/* ==========================================================
   i-BnB | About page  (loads after css/index.css)
   Uses the same tokens: --red, --blush, --cream, --brown*, --head
   The header comes entirely from css/index.css, so it matches the home page.
   ========================================================== */

/* Navbar: active page (same rule as index.html) */
header nav a[aria-current="page"]{color:var(--red)}

/* Shared small label + section rhythm */
.ab-eye{margin-bottom:14px;font:500 12px/1.6 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.head .ab-eye+h2{margin-bottom:0}
@keyframes abpulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.2);opacity:0}}
@keyframes abspin{to{transform:rotate(360deg)}}
@keyframes abflow{to{stroke-dashoffset:-16}}
.ab-halo{transform-box:fill-box;transform-origin:center;animation:abpulse 2.4s ease-out infinite}
.ab-ring{transform-origin:center;transform-box:fill-box;animation:abspin 90s linear infinite}
.ab-arcs path{animation:abflow 1.6s linear infinite}

/* ===== Hero (fills the screen under the header, like the home page) ===== */
.ab-hero{position:relative;overflow:hidden;padding:0;background:var(--white);display:flex;align-items:center;min-height:calc(100svh - var(--hdr,88px))}
.ab-lines{position:absolute;top:0;bottom:0;left:50%;width:var(--w);transform:translateX(-50%);pointer-events:none}
.ab-lines i{position:absolute;top:0;bottom:0;left:calc(var(--k)*25%);width:1px;background:var(--line);transform-origin:top;animation:abgrow 1.4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.2s + var(--k)*.1s)}
.ab-lines i:last-of-type{margin-left:-1px}
@keyframes abgrow{from{transform:scaleY(0)}}
.ab-lines .ml{position:absolute;animation:abfade 1s 1.2s backwards}
.ab-lines .tl{top:18px;left:0}.ab-lines .tr{top:18px;right:0}.ab-lines .br{bottom:28px;right:0}
.ab-lines .x{position:absolute;transform:translate(-50%,-50%);font:400 18px/1 var(--head);color:var(--red);animation:abfade 1s 1.5s backwards}

.ab-giant{position:absolute;left:-2vw;bottom:-.16em;font:700 clamp(150px,30vw,470px)/.8 var(--head);letter-spacing:-.06em;white-space:nowrap;color:var(--blush);-webkit-text-stroke:1.5px #c8142b22;pointer-events:none;user-select:none;animation:abgiant 1.6s cubic-bezier(.16,1,.3,1) .4s backwards}
@keyframes abgiant{from{opacity:0;transform:translateY(10%)}}


.ab-hero-in{position:relative;z-index:2;padding:clamp(56px,8vw,96px) 0 clamp(140px,18vw,240px)}
.ab-coord{margin-bottom:24px;font:500 13px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brown-m)}
.ab-h1{font:700 clamp(40px,7.2vw,104px)/.98 var(--head);letter-spacing:-.04em;color:var(--brown-d)}
.ab-h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.ab-h1 .ln>span{display:block;animation:abup 1.1s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.35s + var(--i)*.14s)}
.ab-h1 em{font-style:normal;color:var(--red)}
@keyframes abup{from{transform:translateY(110%)}}
.ab-hero .lead{margin-top:30px;max-width:540px}
.ab-hero .cta{margin-top:30px}
.ab-in{animation:abfade .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d,0s)}
@keyframes abfade{from{opacity:0;transform:translateY(18px)}}
.ab-hero .btn.line{background:#ffffffd9}

/* ===== Story: heading column + text column, flip table aligned ===== */
.ab-story .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,6vw,96px);align-items:start}
.ab-side{position:sticky;top:calc(var(--hdr,88px) + 24px)}
.ab-story h2{margin:0}
.ab-big{font:500 clamp(23px,2.6vw,34px)/1.3 var(--head);letter-spacing:-.015em;color:var(--brown-d)}
.ab-big+p{margin-top:24px;max-width:58ch;color:var(--brown-m)}

.ab-flip{margin-top:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.ab-flip-h,.ab-flip ul li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding-inline:clamp(0px,1.6vw,22px)}
.ab-flip-h{padding-block:18px 10px;font:600 14px var(--head);color:var(--brown-m)}
.ab-flip-h b:last-child{color:var(--red);padding-left:28px}
.ab-flip ul li{align-items:baseline;padding-block:16px;border-top:1px solid var(--line);transition:background .3s}
.ab-flip ul li:hover{background:var(--blush)}
.ab-flip s{color:#9a8a86;text-decoration-color:var(--red);text-decoration-thickness:1.5px}
.ab-flip li span{position:relative;padding-left:28px;font:600 18px/1.35 var(--head);color:var(--brown-d)}
.ab-flip li span::before{content:"";position:absolute;left:2px;top:.4em;width:12px;height:7px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}

/* ===== What sets us apart: numbered rows, three aligned columns ===== */
.ab-list{border-bottom:1px solid var(--line)}
.ab-list li{position:relative;display:grid;grid-template-columns:clamp(44px,6vw,84px) minmax(0,1.2fr) minmax(0,1fr);gap:8px clamp(20px,4vw,56px);align-items:baseline;padding:30px 0;border-top:1px solid var(--line)}
.ab-list li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--red);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.ab-list li:hover::before{width:100%}
.ab-n{font:600 15px var(--head);letter-spacing:.06em;color:var(--red)}
.ab-list h3{font-size:clamp(22px,2.6vw,34px);transition:transform .35s cubic-bezier(.2,.8,.2,1),color .3s}
.ab-list li:hover h3{transform:translateX(8px);color:var(--red)}
.ab-list p{color:var(--brown-m);max-width:44ch}

/* ===== Mission ===== */
.ab-mission{position:relative;overflow:hidden;padding:clamp(72px,10vw,128px) 0;background:var(--brown);color:#fff}
.ab-mission::before{content:"";position:absolute;right:-140px;bottom:-190px;width:480px;height:480px;border-radius:50%;border:1.5px solid #ffffff2e;box-shadow:0 0 0 64px #ffffff08,0 0 0 128px #ffffff05;pointer-events:none}
.ab-mission::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffffff0d 0 1px,transparent 1px 26px);-webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%);pointer-events:none}
.ab-quote{position:absolute;left:max(2vw,calc((100% - 1160px)/2 - 12px));top:-.1em;font:700 clamp(200px,28vw,420px)/1 var(--head);color:transparent;-webkit-text-stroke:1.5px #ff7a8866;pointer-events:none;user-select:none}
.ab-mission .wrap{position:relative;z-index:1}
.ab-mission h2{margin-bottom:22px;font:600 17px var(--head);letter-spacing:0;color:#ff7a88}
.ab-mission-t{max-width:21em;font:600 clamp(26px,3.8vw,52px)/1.14 var(--head);letter-spacing:-.025em;color:#fff}

/* ===== Values: 2 x 2 with icons ===== */
.ab-vals{position:relative;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.ab-vals>div{padding:36px clamp(20px,3.4vw,48px) 40px 0;border-bottom:1px solid var(--line)}
.ab-vals>div:nth-child(odd){border-right:1px solid var(--line)}
.ab-vals>div:nth-child(even){padding-left:clamp(20px,3.4vw,48px);padding-right:0}
.ab-ico{display:grid;place-items:center;width:54px;height:54px;margin-bottom:20px;border-radius:14px;background:var(--blush);color:var(--red);transition:background .3s,color .3s,transform .4s}
.ab-ico svg{width:26px;height:26px}
.ab-vals>div:hover .ab-ico{background:var(--red);color:#fff;transform:rotate(-8deg) scale(1.08)}
.ab-vals h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
.ab-vals p{max-width:38ch;color:var(--brown-m)}
.ab-vals::after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 6px;background:var(--white);font:400 22px/1 var(--head);color:var(--red)}

/* ===== Where we are: text + regions on the left, orbit map on the right ===== */
.ab-where .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.ab-where h2{margin-bottom:14px}
.ab-where .sub{max-width:46ch}
.ab-regions{margin-top:36px;border-bottom:1px solid var(--line)}
.ab-regions li{padding:14px 0;border-top:1px solid var(--line);font:600 clamp(26px,3.2vw,42px)/1.1 var(--head);letter-spacing:-.03em;color:var(--brown-d);transition:color .3s,padding .35s cubic-bezier(.2,.8,.2,1)}
.ab-regions li:hover{color:var(--red);padding-left:12px}
.ab-map{display:block;width:100%;height:auto;max-width:560px;justify-self:end;color:var(--red);overflow:visible}
.ab-lbl text{font:500 14px var(--body);paint-order:stroke;stroke:var(--cream);stroke-width:5px;stroke-linejoin:round}
.ab-lbl text.b{font:700 15px var(--head)}

/* ===== Final call to action: brand red, so it separates from the dark footer ===== */
.ab-end{position:relative;overflow:hidden;padding:clamp(72px,9vw,120px) 0;color:#fff;
  background:linear-gradient(135deg,#c8142b 0%,#a30f22 100%)}
.ab-end::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;border:1.5px solid #ffffff30;box-shadow:0 0 0 56px #ffffff0a,0 0 0 112px #ffffff06;pointer-events:none}
.ab-end .wrap{position:relative;z-index:1}
.ab-end h2{font-size:clamp(32px,4.6vw,60px);color:#fff;max-width:16ch}
.ab-end .sub{color:#ffe3e6;font-size:18px}
.ab-end .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ab-end .btn.lg{background:#fff;color:var(--red);border-color:#fff;box-shadow:0 14px 40px #24151340}
.ab-end .btn.lg:hover{background:var(--brown-d);color:#fff;border-color:var(--brown-d)}
.ab-end .btn.line{background:transparent;color:#fff;border-color:#ffffffb3;box-shadow:none}
.ab-end .btn.line:hover{background:#fff;color:var(--red);border-color:#fff}
.ab-end :focus-visible{outline-color:#fff}

/* ===== Footer: studio footer (same as index.html) ===== */
footer.ftr{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 28px;color:#e9dcd8;
  background:radial-gradient(60% 70% at 12% 0%,#c8142b40,transparent 70%),linear-gradient(180deg,#2a1a17,#1b100e)}
footer.ftr::before{content:"";position:absolute;right:-6%;top:0;width:55%;height:60%;pointer-events:none;
  background:repeating-linear-gradient(135deg,#ffffff0f 0 1px,transparent 1px 22px);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
footer.ftr .wrap{position:relative;z-index:1}
footer.ftr a{color:inherit;text-decoration:none}
footer.ftr a:focus-visible{outline:2px solid #ff7a88;outline-offset:4px;border-radius:2px}

footer.ftr .ft-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2.4fr) minmax(0,3.6fr);column-gap:clamp(32px,6vw,96px);padding:0 0 clamp(48px,6vw,72px)}
footer.ftr .ft-word{display:inline-block;font:700 clamp(56px,6.5vw,92px)/1 var(--head);letter-spacing:-.03em;color:#fff6f3}
footer.ftr .ft-word span{color:var(--red,#c8142b);display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
footer.ftr .ft-word:hover span{transform:scaleX(1.5)}
footer.ftr .ft-rule{display:block;width:100%;max-width:360px;height:3px;margin:22px 0 20px;background:linear-gradient(90deg,var(--red,#c8142b) 0 56px,#ffffff26 56px)}
footer.ftr .ft-brand p{max-width:38ch;margin:0;font-size:16px;line-height:1.65;color:#c9b8b3}

footer.ftr .ft-col{display:block;position:static;min-width:0}
footer.ftr h4{display:block;margin:0 0 14px;font:600 14px var(--head);color:#ff7a88}
footer.ftr .ft-col>a,footer.ftr .ft-loc{display:flex;align-items:center;gap:12px;margin:0;padding:11px 0;font-size:17px;color:#e9dcd8}
footer.ftr .ft-nav a{position:relative;justify-content:space-between;border-bottom:1px solid #ffffff14;transition:color .3s,padding .3s}
footer.ftr .ft-nav a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#ff7a88;transition:width .4s cubic-bezier(.2,.8,.2,1)}
footer.ftr .ft-nav a:hover{color:#fff;padding-left:6px}
footer.ftr .ft-nav a:hover::after{width:100%}
footer.ftr .ft-nav i,footer.ftr .ft-social i{font-style:normal;color:#ff7a88;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
footer.ftr .ft-nav a:hover i{opacity:1;transform:none}

footer.ftr svg{flex:none;width:20px;height:20px;color:#ff7a88}
footer.ftr .ft-contact a{transition:color .3s}
footer.ftr .ft-contact a:hover{color:#fff}
footer.ftr .ft-contact a svg{transition:transform .3s}
footer.ftr .ft-contact a:hover svg{transform:scale(1.15)}

footer.ftr .ft-legal{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid #ffffff1f;font-size:14px;color:#a8958f}
footer.ftr .ft-social{display:flex;gap:26px;flex-wrap:wrap}
footer.ftr .ft-social a{display:inline-flex;align-items:center;gap:6px;transition:color .3s}
footer.ftr .ft-social a:hover{color:#fff}
footer.ftr .ft-social a:hover i{opacity:1;transform:translate(2px,-2px)}
footer.ftr .ft-social i{transform:none;opacity:.6}

footer.ftr.ft-on .ft-grid>*{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
footer.ftr.ft-on .ft-grid>:nth-child(2){transition-delay:.1s}
footer.ftr.ft-on .ft-grid>:nth-child(3){transition-delay:.2s}
footer.ftr.ft-on.in .ft-grid>*{opacity:1;transform:none}

/* ===== Story: balanced columns, illustration, table motion ===== */
.ab-side{display:flex;flex-direction:column;align-items:flex-start}
/* start the right column level with the "Our story" heading (eyebrow height + gap) */
.ab-main{padding-top:calc(12px*1.6 + 14px)}

.ab-flow{width:100%;max-width:320px;margin:clamp(28px,3.5vw,44px) 0 0;color:var(--brown-d)}
.ab-flow svg{display:block;width:100%;height:auto;max-height:max(300px,calc(100svh - var(--hdr,88px) - 230px));overflow:visible}
.ab-flow .r{stroke:var(--red)}
.ab-flow text{stroke:none}
.ab-tn{font:600 11px var(--head);letter-spacing:.14em;fill:var(--red)}
.ab-tl{font:600 15px var(--head);fill:var(--brown-d)}
.ab-rail{stroke-dasharray:1;opacity:.35}
.ab-dash{stroke-width:2.2;stroke-dasharray:3 5;animation:abflow 1.6s linear infinite}
.ab-rays{animation:abglow 3s ease-in-out infinite}
@keyframes abglow{50%{opacity:.35}}
.ab-pop{transform-box:fill-box;transform-origin:center}

/* Illustration entrance (only when JS adds .ab-anim) */
.ab-flow.ab-anim .ab-rail{stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1) .1s}
.ab-flow.ab-anim .ab-dash{opacity:0;transition:opacity 1s 2.6s}
.ab-flow.ab-anim .ab-st{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--s)*.85s),transform .9s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--s)*.85s)}
.ab-flow.ab-anim .ab-pop{transform:scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1) 2.4s}
.ab-flow.ab-anim.in .ab-rail{stroke-dashoffset:0}
.ab-flow.ab-anim.in .ab-dash{opacity:1}
.ab-flow.ab-anim.in .ab-st{opacity:1;transform:none}
.ab-flow.ab-anim.in .ab-pop{transform:scale(1)}

/* Comparison table: spacing, header accent */
.ab-flip{margin-top:clamp(36px,4vw,52px)}
.ab-flip ul li{padding-block:18px}
.ab-flip-h b:last-child{position:relative}
.ab-flip-h b:last-child::after{content:"";position:absolute;left:28px;bottom:-11px;width:28px;height:2px;background:var(--red)}
.ab-flip s{text-decoration-skip-ink:none}

/* Check ring (pulses once per row) */
.ab-flip li span::after{content:"";position:absolute;left:-4px;top:-1px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--red);opacity:0;pointer-events:none}
@keyframes abring{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}

/* Table row-by-row reveal (only when JS adds .ab-anim) */
.ab-flip.ab-anim .ab-flip-h,
.ab-flip.ab-anim ul li{opacity:0;transform:translateY(12px)}
.ab-flip.ab-anim .ab-flip-h{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.ab-flip.ab-anim ul li{transition:background .3s,
  opacity .7s cubic-bezier(.2,.8,.2,1) calc(var(--r)*.14s + .2s),
  transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--r)*.14s + .2s)}
.ab-flip.ab-anim.in .ab-flip-h,
.ab-flip.ab-anim.in ul li{opacity:1;transform:none}
.ab-flip.ab-anim li span::before{transform:rotate(-45deg) scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--r)*.14s + .55s)}
.ab-flip.ab-anim.in li span::before{transform:rotate(-45deg) scale(1)}
.ab-flip.ab-anim.in li span::after{animation:abring .9s ease-out calc(var(--r)*.14s + .6s) forwards}

@media(max-width:900px){
  .ab-main{padding-top:0}
  .ab-flow{max-width:260px}
  .ab-flow svg{max-height:none}
}
@media(max-width:560px){
  .ab-flip{margin-top:36px}
  .ab-flip ul li{padding-block:15px}
  .ab-flip li span{padding-left:24px;font-size:15px}
  .ab-flip li span::before{width:10px;height:6px}
  .ab-flip li span::after{left:-5px;top:-2px;width:22px;height:22px}
  .ab-flip s{font-size:14px;line-height:1.35}
  .ab-flip-h b:last-child::after{left:28px}
}

/* ===== Responsive ===== */
@media(max-width:900px){
  .ab-hero{min-height:calc(100svh - var(--hdr,72px))}
    .ab-lines .tr{display:none}
  .ab-hero-in{padding:48px 0 150px}
  .ab-story .wrap,.ab-where .wrap{grid-template-columns:1fr}
  .ab-side{position:static}
  .ab-list li{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .ab-list li p{grid-column:2}
  .ab-vals{grid-template-columns:1fr}
  .ab-vals>div,.ab-vals>div:nth-child(even){padding:28px 0;border-right:0}
  .ab-vals>div:nth-child(odd){border-right:0}
  .ab-vals::after{display:none}
  .ab-map{justify-self:center;max-width:480px}
  footer.ftr .ft-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  footer.ftr .ft-brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .ab-flip-h,.ab-flip ul li{gap:14px}
  .ab-flip-h b:last-child{padding-left:28px}
  footer.ftr .ft-grid{grid-template-columns:1fr}
  footer.ftr .ft-col>a,footer.ftr .ft-loc{min-height:48px}
  footer.ftr .ft-nav i{opacity:1;transform:none}
  footer.ftr .ft-legal{flex-direction:column;align-items:flex-start}
}

/* ===== Reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .ab-lines i,.ab-lines .ml,.ab-lines .x,.ab-giant,.ab-h1 .ln>span,.ab-in,.ab-halo,.ab-ring,.ab-arcs path{animation:none!important}
  .ab-dash,.ab-rays,.ab-flip li span::after{animation:none!important}
  .ab-list li::before,.ab-list h3,.ab-ico,.ab-regions li,.ab-flip ul li{transition:none!important}
  .ab-flow *,.ab-flip *{transition:none!important}
  footer.ftr *{transition:none!important}
  footer.ftr.ft-on .ft-grid>*{opacity:1;transform:none}
}