/* ==========================================================================
   JARVIS — About page                          assets/css/pages/about.css
   Loads after site.css. Page-only classes are prefixed "ab-".
   Rhythm: hero (dark) · who we are (cream) · hummingbird (deep) ·
           principles (warm) · how we work (teal) · where we work (cream) ·
           clients (deep) · CTA band (mist)

   CONTENTS
     1 Who we are (editorial statement, figure, facts)
     2 The hummingbird (stage: glow, orbits, drawn flight path, hovering bird)
     3 What guides us (three principles with small line marks)
     4 How we work (sticky heading + vertical timeline)
     5 Where we work (HQ + seven partner countries)
     6 Clients
     7 Responsive
     8 Reduced motion
   ========================================================================== */


/* ==========================================================================
   1 WHO WE ARE
   ========================================================================== */
.ab-statement{margin-top:26px;max-width:19em;font:300 clamp(34px,4.3vw,62px)/1.1 var(--serif);letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.ab-statement em{font-style:italic;color:var(--teal-700)}

.ab-who-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:end;margin-top:clamp(56px,7vw,104px)}

/* figure with an offset gold hairline frame */
.ab-who-figure{position:relative;max-width:410px;margin-bottom:18px;isolation:isolate}
.ab-who-figure::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--hair-light);border-radius:3px;transform:translate(18px,18px)}
.ab-who-figure img{width:100%;aspect-ratio:654/945;object-fit:cover;border-radius:3px;filter:saturate(.86)}

.ab-who-lead{font-size:clamp(21px,1.9vw,27px);line-height:1.5;color:var(--ink)}
.ab-who-text .muted{max-width:34em}

/* at-a-glance numbers (countable facts only) */
.ab-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,5vw,72px);border-top:1px solid rgba(201,169,110,.6)}
.ab-facts a{display:flex;flex-direction:column;gap:14px;height:100%;padding:26px 18px 8px 0;transition:color .5s var(--ease)}
.ab-facts li + li a{padding-left:22px;border-left:1px solid rgba(201,169,110,.45)}
.ab-facts b{font:300 clamp(46px,4.4vw,66px)/.9 var(--serif);color:var(--teal-700);letter-spacing:-.01em;transition:color .5s var(--ease)}
.ab-facts span{display:flex;align-items:flex-start;gap:10px;font:500 10.5px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--text-ink-dim);transition:color .5s var(--ease)}
.ab-facts span::after{content:"";flex:none;width:14px;height:14px;margin-top:1px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .6s var(--ease-lux)}
.ab-facts a:hover b{font-style:italic}
.ab-facts a:hover span,.ab-facts a:focus-visible span{color:var(--teal-700)}
.ab-facts a:hover span::after,.ab-facts a:focus-visible span::after{opacity:1;transform:none}


/* ==========================================================================
   2 THE HUMMINGBIRD
   The stage is a square; every layer inside shares one 600×600 coordinate
   system, so the flight path always meets the bird's tail at any size.
   Motion: the dotted flight path draws in (masked stroke), the bird arrives
   along its last stretch, then hovers. Static under reduced motion / no JS.
   ========================================================================== */
.ab-hb{overflow:hidden;isolation:isolate;background:
  radial-gradient(ellipse 42% 58% at 24% 34%, rgba(0,74,89,.5) 0%, rgba(0,74,89,0) 70%),
  radial-gradient(ellipse 50% 50% at 100% 100%, rgba(13,98,114,.16) 0%, rgba(13,98,114,0) 70%),
  var(--deep)}
.ab-hb > .grain{opacity:.06;animation:none;inset:0}

.ab-hb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}

.ab-stage{position:relative;width:100%;max-width:540px;aspect-ratio:1;--mx:0;--my:0}
.ab-stage-glow{position:absolute;inset:4%;border-radius:50%;background:
  radial-gradient(circle at 50% 48%, rgba(184,90,44,.13) 0%, rgba(184,90,44,.05) 30%, rgba(201,169,110,.04) 48%, rgba(201,169,110,0) 68%);
  animation:ab-breathe 9s ease-in-out infinite}
@keyframes ab-breathe{0%,100%{opacity:.7;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}

.ab-orbits,.ab-flight{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ab-orbits{transform:translate3d(calc(var(--mx) * -8px),calc(var(--my) * -6px),0);transition:transform 1.8s var(--ease-lux)}
.ab-orbit{transform-box:view-box;transform-origin:50% 50%;animation:spin 180s linear infinite}
.ab-orbit--b{animation-duration:260s;animation-direction:reverse}
.ab-orbit circle{fill:none;stroke:rgba(201,169,110,.3);stroke-width:1;stroke-dasharray:1 8;vector-effect:non-scaling-stroke}
.ab-orbit--b circle{stroke:rgba(201,169,110,.16)}
.ab-orbit .ab-pollen{fill:var(--gold-light);stroke:none;filter:drop-shadow(0 0 4px rgba(212,187,138,.9))}

/* flight path: a dotted gold trail, revealed by a masked solid stroke */
.ab-flight-dots{fill:none;stroke:url(#ab-flight-fade);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:0 13}
.ab-flight-draw{fill:none;stroke:#fff;stroke-width:22;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 2.8s cubic-bezier(.45,.05,.3,1) .2s}
.js .ab-stage:not(.in) .ab-flight-draw{stroke-dashoffset:1}

/* the bird: 122% of the stage, centred (the artwork has wide transparent margins);
   its tail tip lands at ≈(289,525) in stage units, where the flight path ends */
.ab-bird{position:absolute;left:-11%;top:-11%;width:122%;transform:translate3d(calc(var(--mx) * 14px),calc(var(--my) * 10px),0);transition:transform 1.6s var(--ease-lux)}
.ab-bird-arrive{transition:opacity 1.4s var(--ease),transform 2.4s var(--ease-lux);transition-delay:1.8s}
.js .ab-stage:not(.in) .ab-bird-arrive{opacity:0;transform:translate(-9%,7%) rotate(8deg) scale(.9)}
.ab-bird-img{width:100%;filter:brightness(1.04) drop-shadow(0 0 9px rgba(208,96,48,.2)) drop-shadow(0 0 34px rgba(201,169,110,.1));transform-origin:58% 46%;animation:ab-hover 9s ease-in-out infinite}
@keyframes ab-hover{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  30%{transform:translate3d(-.6%,-2.4%,0) rotate(-1.8deg)}
  62%{transform:translate3d(.7%,-1%,0) rotate(1deg)}
}
/* the stage itself must not fade (only its parts animate) */
.js .ab-stage.reveal{opacity:1;transform:none}

/* the quote */
.ab-quote blockquote p{font:300 italic clamp(32px,3.85vw,58px)/1.18 var(--serif);letter-spacing:-.012em;color:var(--gold-light);text-wrap:pretty;text-indent:-.4em}
.ab-quote .q{color:var(--gold);font-style:normal}
.ab-quote figcaption{display:flex;align-items:center;gap:16px;margin-top:36px;font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.ab-quote figcaption::before{content:"";width:60px;height:1px;background:currentColor}

/* why a hummingbird */
.ab-why{align-items:start;margin-top:clamp(64px,8vw,120px);padding-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--hair)}
.ab-why-traits{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;font:500 10.5px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.ab-why-traits span + span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 16px;border-radius:50%;background:var(--copper);vertical-align:middle;transform:translateY(-1px)}
.ab-why-text{margin-top:22px;max-width:32em;font-size:clamp(20px,1.75vw,25px);line-height:1.55;color:rgba(245,240,235,.84)}


/* ==========================================================================
   3 WHAT GUIDES US
   ========================================================================== */
.ab-pr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,84px);border-top:1px solid rgba(201,169,110,.6)}
.ab-pr > li{position:relative;padding:44px clamp(24px,3vw,44px) 6px 0}
.ab-pr > li + li{padding-left:clamp(24px,3vw,44px);border-left:1px solid rgba(201,169,110,.45)}
.ab-pr-mark{width:84px;height:84px;overflow:visible}
.ab-pr-n{display:block;margin-top:34px;font:500 11px/1 var(--sans);letter-spacing:.3em;color:var(--teal-700)}
.ab-pr h3{margin-top:16px;font:300 clamp(28px,2.55vw,37px)/1.12 var(--serif);color:var(--ink);text-wrap:balance}
.ab-pr h3 em{font-style:italic;color:var(--teal-700)}
.ab-pr p{margin-top:14px;max-width:22em;font-size:17.5px;line-height:1.6;color:var(--text-ink-dim)}

/* the small line marks: 1 (one of one) · 5 senses meeting the guest · Dubai + 7 */
.ab-pr-mark .g,.ab-map-mark .ray{fill:none;stroke:rgba(201,169,110,.95);stroke-width:1.1}
.ab-pr-mark .t{fill:none;stroke:var(--teal-700);stroke-width:1.1}
.ab-pr-mark .dash{stroke-dasharray:1.5 4}
.ab-pr-mark .dot,.ab-map-mark .dot{fill:var(--teal-700)}
.ab-pr-mark .hub,.ab-map-mark .hub{fill:var(--teal-700);stroke:rgba(201,169,110,.9);stroke-width:5;paint-order:stroke}
.ab-pr-mark .ray,.ab-map-mark .ray{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease);transition-delay:calc(var(--d,0s) + .35s)}
.js .reveal:not(.in) .ab-pr-mark .ray,.js .reveal:not(.in) .ab-map-mark .ray{stroke-dashoffset:1}


/* ==========================================================================
   4 HOW WE WORK  — sticky heading + vertical timeline (nodes light up)
   ========================================================================== */
.ab-how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:start}
.ab-how-head{position:sticky;top:132px}
.ab-how-head .lead{margin-top:26px;max-width:22em}
.ab-how-head .link-arrow{margin-top:30px}

.ab-steps{--node:58px}
.ab-steps > li{position:relative;display:grid;grid-template-columns:var(--node) minmax(0,1fr);gap:clamp(22px,3vw,44px);padding-bottom:clamp(52px,5.6vw,84px)}
.ab-steps > li:last-child{padding-bottom:0}
/* rail + its gold fill, from this node to the next */
.ab-steps > li:not(:last-child)::before,.ab-steps > li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--node) / 2);top:calc(var(--node) + 10px);bottom:10px;width:1px}
.ab-steps > li:not(:last-child)::before{background:rgba(201,169,110,.2)}
.ab-steps > li:not(:last-child)::after{background:linear-gradient(180deg,var(--gold),rgba(201,169,110,.15));transform-origin:top;transform:scaleY(1);transition:transform 2s var(--ease-lux) .6s}
.js .ab-steps > li:not(.in)::after{transform:scaleY(0)}
.ab-node{position:relative;display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;border:1px solid var(--gold);background:rgba(201,169,110,.12);box-shadow:0 0 0 6px rgba(201,169,110,.06),0 0 28px rgba(201,169,110,.25);font:500 11px/1 var(--sans);letter-spacing:.2em;padding-left:.2em;color:var(--gold-light);transition:background-color 1.2s var(--ease) .3s,border-color 1.2s var(--ease) .3s,box-shadow 1.2s var(--ease) .3s}
.js .ab-steps > li:not(.in) .ab-node{background:transparent;border-color:var(--hair-strong);box-shadow:0 0 0 0 rgba(201,169,110,0)}
.ab-step-body{padding-top:6px}
.ab-step-body h3{font:300 clamp(36px,3.6vw,54px)/1.02 var(--serif);letter-spacing:-.012em;color:var(--cream)}
.ab-step-body p{margin-top:16px;max-width:27em;font:300 clamp(18px,1.45vw,21px)/1.6 var(--serif);color:var(--text)}


/* ==========================================================================
   5 WHERE WE WORK
   ========================================================================== */
.ab-where-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,120px);align-items:center}
.ab-where-copy .lead{margin-top:26px;max-width:24em}
.ab-where-copy .link-arrow{margin-top:30px}

.ab-map{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:1px solid rgba(201,169,110,.55);border-radius:4px;background:linear-gradient(150deg,rgba(232,223,214,.75),rgba(232,223,214,.35));overflow:hidden;isolation:isolate}
.ab-map-mark{display:block;width:clamp(92px,8vw,118px);height:auto;margin-top:clamp(28px,3.4vw,44px);overflow:visible}
.ab-map-mark .ray{stroke-width:.8}
.ab-map-mark .hub{stroke-width:3.4}
.ab-label{font:500 10px/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--teal-700)}
.ab-hq{position:relative;padding:clamp(28px,3.4vw,48px);border-right:1px solid rgba(201,169,110,.45);display:flex;flex-direction:column}
.ab-hq-city{margin-top:22px;font:300 clamp(54px,5.6vw,84px)/.92 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.ab-hq-country{margin-top:14px;font:400 11.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text-ink-dim)}
.ab-hq-time{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:clamp(28px,3.4vw,44px);font:400 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-ink-dim)}
.ab-hq-time .clock{font:400 20px/1 var(--serif);letter-spacing:.02em;color:var(--ink)}
.ab-pulse{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal-700)}
.ab-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--teal-700);animation:ring 3.2s var(--ease) infinite}
.ab-countries{padding:clamp(28px,3.4vw,48px)}
.ab-countries ol{margin-top:14px}
.ab-countries li{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(201,169,110,.38);font:300 clamp(19px,1.55vw,22px)/1.3 var(--serif);color:var(--ink)}
.ab-countries li:last-child{border-bottom:0}
.ab-countries li span{flex:none;width:22px;font:500 10px/1 var(--sans);letter-spacing:.2em;color:var(--teal-700)}


/* ==========================================================================
   6 CLIENTS
   ========================================================================== */
.ab-clients .marquee{margin-top:clamp(36px,4vw,56px)}


/* ==========================================================================
   7 RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .ab-map{grid-template-columns:1fr}
  .ab-hq{border-right:0;border-bottom:1px solid rgba(201,169,110,.45)}
  .ab-hq{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px}
  .ab-hq > p{grid-column:1}
  .ab-map-mark{grid-column:2;grid-row:1 / span 4;align-self:center;margin-top:0}
  .ab-hq-time{padding-top:28px}
  .ab-countries ol{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .ab-countries li:nth-last-child(2){border-bottom:0}
}
@media (max-width:1023px){
  .ab-who-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:40px}
  .ab-who-text{padding-top:0}
  .ab-facts{grid-template-columns:1fr;border-top:0}
  .ab-facts li a,.ab-facts li + li a{flex-direction:row;align-items:center;gap:22px;padding:18px 0;border-left:0;border-top:1px solid rgba(201,169,110,.55)}
  .ab-facts b{flex:none;width:2.1ch}

  .ab-hb-grid{grid-template-columns:1fr;justify-items:center}
  .ab-stage{max-width:440px}
  .ab-quote{max-width:34em;text-align:center}
  .ab-quote blockquote p{text-indent:0}
  .ab-quote figcaption{justify-content:center}
  .ab-quote figcaption::after{content:"";width:60px;height:1px;background:currentColor}
  .ab-why{justify-items:stretch;gap:20px}

  .ab-pr{grid-template-columns:1fr;border-top:0}
  .ab-pr > li,.ab-pr > li + li{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:32px;padding:36px 0;border-left:0;border-top:1px solid rgba(201,169,110,.6)}
  .ab-pr > li:last-child{padding-bottom:0}
  .ab-pr-mark{grid-row:1 / span 3}
  .ab-pr-n{margin-top:4px}
  .ab-pr p{max-width:34em}

  .ab-how-grid{grid-template-columns:1fr}
  .ab-how-head{position:static}

  .ab-where-grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .ab-statement{margin-top:22px}
  .ab-who-grid{grid-template-columns:1fr;margin-top:44px}
  .ab-who-figure{max-width:none;margin-right:14px}
  .ab-who-figure img{aspect-ratio:4/5}

  .ab-stage{max-width:340px;width:88%}
  .ab-flight-dots{stroke-width:4.2;stroke-dasharray:0 20}
  .ab-quote blockquote p{font-size:clamp(27px,7.6vw,34px)}
  .ab-quote figcaption{gap:12px;font-size:10px;letter-spacing:.24em}
  .ab-quote figcaption::before,.ab-quote figcaption::after{width:28px}
  .ab-why-traits span + span::before{margin:0 12px}

  .ab-pr > li,.ab-pr > li + li{grid-template-columns:52px minmax(0,1fr);column-gap:20px;padding:30px 0}
  .ab-pr-mark{width:52px;height:52px}
  .ab-pr h3{font-size:28px}
  .ab-pr p{font-size:16.5px}

  .ab-steps{--node:46px}
  .ab-steps > li{gap:18px;padding-bottom:44px}
  .ab-step-body{padding-top:4px}
  .ab-step-body h3{font-size:34px}
  .ab-step-body p{font-size:17px}

  .ab-countries ol{grid-template-columns:1fr}
  .ab-countries li:nth-last-child(2){border-bottom:1px solid rgba(201,169,110,.38)}
}


/* ==========================================================================
   8 REDUCED MOTION  (site.css already stops animations + transitions;
   these make sure every drawn/arriving element is in its final state)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ab-flight-draw{stroke-dashoffset:0!important}
  .ab-bird-arrive{opacity:1!important;transform:none!important}
  .ab-bird,.ab-orbits{transform:none!important}
  .ab-pr-mark .ray,.ab-map-mark .ray{stroke-dashoffset:0!important}
  .ab-steps > li::after{transform:none!important}
}