/* ==========================================================================
   JARVIS — shared design system                         assets/css/site.css
   "Nocturne": dark, glassy, editorial. Spectral (serif) + Inter (sans).
   --------------------------------------------------------------------------
   HOW TO USE THIS FILE
   - Every page links it:  <link rel="stylesheet" href="assets/css/site.css">
   - Page-only styles go in assets/css/pages/<page>.css (load after this file).
     Never copy component CSS into a page file — extend it with a modifier.
   - Palette = the tokens below only (plus alpha variants). Fonts = Spectral
     and Inter only. Copper is reserved for the hummingbird mark.
   - <html> gets class "js" from a one-line inline script in <head>. Anything
     hidden for animation is hidden ONLY under .js, so content shows without JS.
   - Motion: everything is disabled under prefers-reduced-motion (last section).
   - All paths are relative (works from file:// and on Cloudflare).

   CONTENTS
     01 Tokens               12 Glass card + contact layout
     02 Base / reset         13 Hummingbird quote (.hb)
     03 Utilities + layout   14 Steps (How we work)
     04 Sections + light     15 Services rail (.rail / .card)
     05 Type                 16 Global reach + constellation
     06 Buttons + links      17 Partner tile (.pt) + bento grid
     07 Brand mark/lockup    18 Client logo marquee
     08 Header / nav         19 Forms (mailto enquiry)
     09 Mobile menu          20 Chips, copy button, toast, clock
     10 Heroes (home + page) 21 CTA band
     11 Reveal on scroll     22 Footer
                             23 Reduced motion
   ========================================================================== */


/* ==========================================================================
   01 TOKENS
   ========================================================================== */
:root{
  /* brand palette (exact values from the live site) */
  --ink:#101517;          /* primary dark bg; text on light */
  --deep:#0a1a1f;         /* secondary dark (blue-black) */
  --teal-700:#004a59;     /* brand teal: labels/accents on light */
  --teal-600:#0d6272;     /* hover teal */
  --teal-500:#1a8a9e;     /* bright teal — glows only */
  --cream:#f5f0eb;        /* primary light bg */
  --warm:#e8dfd6;         /* secondary light bg */
  --gold:#c9a96e;         /* hairlines, eyebrows on dark, CTAs */
  --gold-light:#d4bb8a;   /* italic accent words on dark */
  --copper:#b85a2c;       /* the mark only */

  /* text + lines (alpha variants of the palette) */
  --text:rgba(245,240,235,.8);        /* body copy on dark */
  --text-dim:rgba(245,240,235,.64);   /* secondary copy on dark (AA) */
  --text-ink:rgba(16,21,23,.86);      /* body copy on light */
  --text-ink-dim:rgba(16,21,23,.72);  /* secondary copy on light (AA) */
  --hair:rgba(201,169,110,.24);       /* hairline on dark */
  --hair-strong:rgba(201,169,110,.5);
  --hair-light:rgba(201,169,110,.55); /* hairline on cream (ornament only) */
  --glass:rgba(10,26,31,.52);

  /* type */
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-lux:cubic-bezier(.16,1,.3,1);

  /* layout */
  --maxw:1280px;                       /* content width */
  --gutter:clamp(16px, 4vw, 56px);     /* side gutter (16px on phones) */
  --sec:clamp(96px, 11vw, 168px);      /* vertical section padding */
  --nav-offset:104px;                  /* anchor offset under the fixed nav */

  /* film grain (used by .grain) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* small line icons as masks (inline so they work from file://) */
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15M14 7l5 5-5 5'/%3E%3C/svg%3E");
  --i-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='1.5'/%3E%3Cpath d='M15.5 8.5V6a1.5 1.5 0 0 0-1.5-1.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5'/%3E%3C/svg%3E");
}


/* ==========================================================================
   02 BASE / RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-offset);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--text);font:400 18px/1.65 var(--serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--teal-700);color:var(--cream)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
@media (max-width:767px){ body{font-size:17px} }


/* ==========================================================================
   03 UTILITIES + LAYOUT
   .wrap      centred content column (max 1280 + gutters)
   .sr-only   visually hidden, still read by screen readers
   .skip      "Skip to content" link — first element in <body>
   .cols      simple responsive grid: <div class="cols" style="--cols:3">
              (3→2 columns below 1024px, 1 column below 768px)
   .muted     secondary text colour (adapts to light sections)
   .flow      vertical rhythm between children (18px; override with --flow)
   .split     two-column intro: heading block | copy block, bottom-aligned
              (stacks below 1024px)
   .mt-section  large top margin between blocks inside one section
   ========================================================================== */
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;border-radius:999px;transition:top .3s}
.skip:focus{top:16px}
.cols{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.muted{color:var(--text-dim)}
.flow > * + *{margin-top:var(--flow,18px)}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:end}
.mt-section{margin-top:clamp(80px,9vw,128px)}
@media (max-width:1023px){ .split{grid-template-columns:1fr;align-items:start} }
@media (max-width:1023px){ .cols{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))} }
@media (max-width:767px){ .cols{grid-template-columns:1fr} }


/* ==========================================================================
   04 SECTIONS + LIGHT CONTEXT
   <section class="section section--deep" id="…" aria-labelledby="…-title">
     <div class="wrap"> … </div>
   </section>
   Backgrounds:  --ink (default dark) · --deep · --teal (ink + teal glow)
                 --glow (deep + soft teal glow on the right)
                 --cream · --warm (LIGHT) · --mist (blurred texture + grain:
                 add <div class="blur-bg"><img …></div><div class="grain"></div>)
   Spacing:      --tight (60% padding) · --flush-top (no top padding)
   LIGHT sections (--cream, --warm, or any container with .on-light) switch
   eyebrows/headings/links/buttons/focus to ink + teal automatically, and the
   fixed nav turns to light glass while it is over them (site.js).
   ========================================================================== */
.section{position:relative;padding:var(--sec) 0}
.section--tight{padding:calc(var(--sec) * .6) 0}
.section--flush-top{padding-top:0}
.section--ink{background:var(--ink)}
.section--deep{background:var(--deep)}
.section--rule{border-top:1px solid rgba(201,169,110,.12)}
.section--teal{background:
  radial-gradient(ellipse 50% 60% at 8% 0%, rgba(0,74,89,.42) 0%, rgba(0,74,89,0) 70%),
  radial-gradient(ellipse 40% 50% at 100% 100%, rgba(13,98,114,.18) 0%, rgba(13,98,114,0) 70%), var(--ink)}
.section--glow{overflow:hidden;background:radial-gradient(ellipse 55% 65% at 70% 50%, rgba(0,74,89,.38) 0%, rgba(0,74,89,0) 70%),var(--deep)}
.section--cream,.section--warm{color:var(--ink);isolation:isolate;overflow:hidden}
.section--cream{background:var(--cream)}
.section--warm{background:var(--warm)}
.section--cream::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 85% 0%, rgba(232,223,214,1) 0%, rgba(232,223,214,0) 70%)}
.section--mist{overflow:hidden;isolation:isolate;background:var(--deep)}
.section--mist::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse 40% 45% at 82% 38%, rgba(201,169,110,.13) 0%, rgba(201,169,110,0) 70%),
  linear-gradient(180deg, var(--ink) 0%, var(--ink) 6%, rgba(16,21,23,.85) 16%, rgba(10,26,31,.55) 34%, rgba(0,74,89,.35) 60%, rgba(10,26,31,.8) 88%, var(--deep) 100%)}
.section--mist > .grain{z-index:-1;opacity:.09;animation:none;inset:0}

/* blurred texture backdrop (low-res images only ever shown blurred) */
.blur-bg{position:absolute;inset:-40px;z-index:-3;overflow:hidden}
.blur-bg img{width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(.75) brightness(.7);opacity:.55;transform:scale(1.1)}

/* light context */
:is(.section--cream,.section--warm,.on-light){color:var(--ink)}
:is(.section--cream,.section--warm,.on-light) .eyebrow{color:var(--teal-700)}
:is(.section--cream,.section--warm,.on-light) :is(.h2,.h3){color:var(--ink)}
:is(.section--cream,.section--warm,.on-light) :is(.h2,.h3) em{color:var(--teal-700)}
:is(.section--cream,.section--warm,.on-light) .lead{color:var(--text-ink)}
:is(.section--cream,.section--warm,.on-light) .muted{color:var(--text-ink-dim)}
:is(.section--cream,.section--warm,.on-light) :focus-visible{outline-color:var(--teal-700)}


/* ==========================================================================
   05 TYPE
   <p class="eyebrow">What we do</p>          small caps label with gold rule
   <p class="eyebrow eyebrow--center">…</p>   rules on both sides (centred)
   <h2 class="h2">Our <em>services</em></h2>  display heading; <em> = accent
                                              .h2--sm = a size smaller
   <h3 class="h3">…</h3>                      sub heading
   <p class="lead">…</p>                      large intro paragraph
   Section header row (title left, controls/link right):
   <div class="sec-head"><div>eyebrow + h2</div><div>controls</div></div>
   <div class="sec-foot"><a class="link-arrow" href="…">All services</a></div>
   ========================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font:500 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.75;flex:none}
.eyebrow--center{justify-content:center;gap:16px}
.eyebrow--center::after{content:"";width:34px;height:1px;background:currentColor;opacity:.75;flex:none}
.h2{font:300 clamp(40px,4.9vw,70px)/1.04 var(--serif);letter-spacing:-.012em;color:var(--cream);margin-top:22px;text-wrap:balance}
.h2--sm{font-size:clamp(36px,4.2vw,60px)}
.h2 em,.h3 em{font-style:italic;color:var(--gold-light)}
.h3{font:300 clamp(26px,2.4vw,34px)/1.12 var(--serif);color:var(--cream)}
.lead{font:300 clamp(19px,1.6vw,22px)/1.6 var(--serif);color:var(--text);text-wrap:pretty}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.sec-foot{display:flex;justify-content:flex-end;margin-top:clamp(28px,3vw,40px)}
@media (max-width:767px){
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-foot{justify-content:flex-start}
}


/* ==========================================================================
   06 BUTTONS + TEXT LINKS
   <a class="btn btn-gold btn-arrow" href="contact.html">Start a conversation</a>
   <a class="btn btn-ghost" href="services.html">Explore our services</a>
   .btn-gold   primary (gold pill)       .btn-ghost  outline (adapts on light)
   .btn-arrow  appends an arrow icon     .btn-sm     compact (nav CTA)
   .btn--email keeps an email address in normal case
   <a class="link-arrow" href="about.html">More about Jarvis</a>
               small uppercase link with arrow + gold underline on hover
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 30px;border:0;border-radius:999px;cursor:pointer;font:500 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),box-shadow .8s var(--ease),transform .6s var(--ease)}
.btn svg{width:16px;height:16px;transition:transform .6s var(--ease-lux)}
.btn:hover svg{transform:translateX(4px)}
.btn-arrow::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask-image:var(--i-arrow);mask-image:var(--i-arrow);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:transform .6s var(--ease-lux)}
.btn-arrow:hover::after{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 0 0 0 rgba(201,169,110,0)}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 10px 40px -10px rgba(201,169,110,.55)}
.btn-ghost{border:1px solid rgba(245,240,235,.34);color:var(--cream);background:rgba(10,26,31,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-light)}
.btn-sm{min-height:44px;padding:0 22px;font-size:11px}
.btn--email{text-transform:none;letter-spacing:.04em;font-size:14px;font-weight:400}
:is(.section--cream,.section--warm,.on-light) .btn-ghost{color:var(--ink);border-color:rgba(16,21,23,.32);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
:is(.section--cream,.section--warm,.on-light) .btn-ghost:hover{color:var(--teal-700);border-color:var(--teal-700)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

.link-arrow{display:inline-flex;align-items:center;gap:12px;padding:8px 0;font:500 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .8s var(--ease-lux),color .4s var(--ease)}
.link-arrow::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask-image:var(--i-arrow);mask-image:var(--i-arrow);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:transform .6s var(--ease-lux)}
.link-arrow:hover{background-size:100% 1px}
.link-arrow:hover::after{transform:translateX(4px)}
:is(.section--cream,.section--warm,.on-light) .link-arrow{color:var(--teal-700)}
@media (max-width:767px){
  .cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
}


/* ==========================================================================
   07 BRAND MARK + LOCKUP
   <span class="bird" aria-hidden="true"></span>   recolourable hummingbird
        default gold · .bird--copper (the logo's own gradient)
        size it with width (it is square): style="width:64px"
   <span class="hero-mark"><span class="bird"></span></span>  glowing, breathing
   <img src="images/brand/hummingbird.png" alt="" width="512" height="512">
        the original copper artwork (use where no recolour is needed)
   Lockup (nav + footer) — keep the JARVIS wordmark:
   <a class="lockup" href="index.html" aria-label="Jarvis — home">
     <span class="bird" aria-hidden="true"></span><span class="wordmark">JARVIS</span></a>
   NOTE: the mask is inlined as a data URI because CSS masks are CORS-fetched
   and fail from file://. It is a 256px alpha copy of
   images/brand/hummingbird.png. If the mark is replaced, regenerate it:
     python3 -c "from PIL import Image;import base64,io;a=Image.open('images/brand/hummingbird.png').convert('RGBA').split()[3].resize((256,256));b=io.BytesIO();Image.merge('LA',(Image.new('L',(256,256)),a)).save(b,'PNG',optimize=True);print('data:image/png;base64,'+base64.b64encode(b.getvalue()).decode())"
   ========================================================================== */
:root{--bird:url("data:image/png;base64,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")}
.bird{display:inline-block;flex:none;width:32px;aspect-ratio:1;background:var(--gold);-webkit-mask-image:var(--bird);mask-image:var(--bird);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.bird--copper{background:linear-gradient(160deg,#d06030,#a04020)}
.bird--light{background:linear-gradient(160deg,var(--gold-light),var(--gold) 70%)}
.hero-mark{position:relative;display:inline-block;width:118px;height:118px;filter:drop-shadow(0 0 10px rgba(212,187,138,.55)) drop-shadow(0 0 34px rgba(201,169,110,.35))}
.hero-mark::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle, rgba(201,169,110,.22) 0%, rgba(201,169,110,.06) 38%, rgba(201,169,110,0) 66%);animation:breathe 7s ease-in-out infinite}
.hero-mark .bird{position:relative;width:100%;background:linear-gradient(160deg,var(--gold-light),var(--gold) 70%)}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
.lockup{display:inline-flex;align-items:center;gap:12px;color:var(--cream);flex:none}
.lockup .bird{width:38px;filter:drop-shadow(0 0 8px rgba(201,169,110,.35))}
.wordmark{font:300 15px/1 var(--sans);letter-spacing:.35em;margin-right:-.35em;color:var(--cream)}
@media (max-width:767px){ .hero-mark{width:84px;height:84px} }


/* ==========================================================================
   08 HEADER / NAV  (identical markup on every page — copy from _template.html)
   - Transparent over the hero; becomes a floating glass pill once scrolled
     (html.scrolled, set by site.js).
   - Over light sections it turns to light glass (html.nav-light).
   - Mark the current page: aria-current="page" on its link (site.js also
     sets it from the URL as a safety net).
   - Below 1024px the links collapse into the mobile menu (section 09).
   ========================================================================== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:0;transition:padding .9s var(--ease-lux)}
.nav-shell{position:relative;display:flex;align-items:center;gap:28px;margin-inline:auto;width:calc(100% - 2 * var(--gutter));max-width:var(--maxw);padding:26px 0;border:1px solid transparent;border-radius:999px;transition:max-width .9s var(--ease-lux),padding .9s var(--ease-lux),background-color .9s var(--ease),border-color .9s var(--ease),box-shadow .9s var(--ease)}
.nav-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);opacity:0;transition:opacity .9s var(--ease);z-index:-1}
.scrolled .site-header{padding-top:14px}
.scrolled .nav-shell{max-width:1120px;padding:9px 10px 9px 26px;background:rgba(10,26,31,.58);border-color:var(--hair);box-shadow:0 18px 50px -24px rgba(10,26,31,.7)}
.scrolled .nav-shell::before{opacity:1}
.nav-links{margin-left:auto}
.nav-links ul{display:flex;gap:clamp(18px,2.4vw,36px)}
.nav-links a{position:relative;display:block;font:400 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,235,.82);padding:10px 0;transition:color .5s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:.22em;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-lux)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-light)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{min-height:44px;padding:0 22px;font-size:11px}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);background:rgba(10,26,31,.35);cursor:pointer;position:relative;z-index:2;padding:0}
.menu-btn i{position:absolute;left:14px;right:14px;height:1px;background:var(--cream);transition:transform .6s var(--ease-lux),top .6s var(--ease-lux)}
.menu-btn i:first-of-type{top:19px}
.menu-btn i:last-of-type{top:26px}

/* light glass over cream/warm sections */
.lockup .bird,.wordmark,.nav-links a,.menu-btn,.menu-btn i{transition:color .7s var(--ease),background-color .7s var(--ease),border-color .7s var(--ease),filter .7s var(--ease),transform .6s var(--ease-lux),top .6s var(--ease-lux)}
.nav-light.scrolled .nav-shell{background:rgba(245,240,235,.74);border-color:rgba(201,169,110,.55);box-shadow:0 18px 50px -30px rgba(16,21,23,.4)}
.nav-light .site-header .wordmark{color:var(--ink)}
.nav-light .site-header .lockup .bird{background:linear-gradient(160deg,#d06030,#a04020);filter:none}
.nav-light .nav-links a{color:rgba(16,21,23,.8)}
.nav-light .nav-links a:hover,.nav-light .nav-links a[aria-current="page"]{color:var(--teal-700)}
.nav-light .nav-links a::after{background:var(--teal-700)}
.nav-light .menu-btn{background:rgba(245,240,235,.6);border-color:rgba(201,169,110,.6)}
.nav-light .menu-btn i{background:var(--ink)}
.nav-light .site-header :focus-visible{outline-color:var(--teal-700)}

/* menu open: header sits on the dark overlay */
.menu-open .menu-btn i{background:var(--cream)!important}
.menu-open.nav-light .site-header .wordmark{color:var(--cream)}
.menu-open.nav-light .site-header .lockup .bird{background:var(--gold)}
.menu-open.nav-light .site-header :focus-visible{outline-color:var(--gold)}
.menu-open.scrolled .nav-shell{background:transparent;border-color:transparent;box-shadow:none}
.menu-open .menu-btn{background:rgba(10,26,31,.35)!important;border-color:var(--hair)!important}
.menu-open .menu-btn i:first-of-type{top:22.5px;transform:rotate(45deg)}
.menu-open .menu-btn i:last-of-type{top:22.5px;transform:rotate(-45deg)}

@media (max-width:1023px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .scrolled .nav-shell{padding:8px 8px 8px 22px}
}
/* no JS: header scrolls with the page; on small screens the links show
   inline under the lockup (the menu button needs JS) */
html:not(.js) .site-header{position:absolute}
@media (max-width:1023px){
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .nav-shell{flex-wrap:wrap;row-gap:12px}
  html:not(.js) .nav-links{display:block;width:100%;margin-left:0}
  html:not(.js) .nav-links ul{flex-wrap:wrap;gap:4px 22px}
}


/* ==========================================================================
   09 MOBILE MENU  (<1024px)
   <button class="menu-btn" type="button" aria-expanded="false" aria-controls="mnav">
     <span class="sr-only">Open menu</span><i></i><i></i></button>     (in header)
   <nav class="mnav" id="mnav" aria-label="Mobile"> … a.mlink … .mnav-foot </nav>
   site.js: toggles html.menu-open, locks scroll, traps Tab, closes on Esc,
   on link click and when the viewport grows past 1024px.
   ========================================================================== */
.mnav{position:fixed;inset:0;z-index:45;background:rgba(10,26,31,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;padding:96px var(--gutter) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.menu-open .mnav{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.mnav ul{display:grid;gap:6px}
.mnav a.mlink{display:flex;align-items:baseline;gap:18px;font:300 40px/1.25 var(--serif);color:var(--cream);opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .9s var(--ease-lux),color .4s}
.mnav a.mlink span{flex:none;width:26px;font:500 10px/1 var(--sans);letter-spacing:.3em;color:var(--gold)}
.mnav a.mlink:hover,.mnav a.mlink[aria-current="page"]{color:var(--gold-light)}
.mnav a.mlink[aria-current="page"]{font-style:italic}
.menu-open .mnav a.mlink{opacity:1;transform:none}
.menu-open .mnav li:nth-child(2) a{transition-delay:.06s}
.menu-open .mnav li:nth-child(3) a{transition-delay:.12s}
.menu-open .mnav li:nth-child(4) a{transition-delay:.18s}
.menu-open .mnav li:nth-child(5) a{transition-delay:.24s}
.mnav-foot{margin-top:44px;padding-top:28px;border-top:1px solid var(--hair);display:grid;gap:18px;justify-items:start}
.mnav-foot .mail{font:400 15px/1 var(--sans);letter-spacing:.06em;color:var(--text);padding:6px 0}
@media (min-width:1024px){ .mnav{display:none} }
@media (max-width:420px){ .mnav a.mlink{font-size:34px} }


/* ==========================================================================
   10 HEROES
   Shared layers (both heroes), in this order inside the hero:
     <div class="hero-media"><img class="hero-img" src="…" alt="…" width height fetchpriority="high"></div>
     <div class="hero-tint" aria-hidden="true"></div>   teal colour wash
     <div class="hero-veil" aria-hidden="true"></div>   legibility gradient
     <div class="grain" aria-hidden="true"></div>       animated film grain
   Intro animation: add class "intro" (+ style="--d:.4s" delay) to blocks, and
   wrap each heading line as <span class="line"><span style="--d:.5s">…</span></span>.

   10a HOME HERO  .hero — full viewport, centred (index.html only)
   10b PAGE HERO  .page-hero — subpages (copy from _template.html)
       ≈66vh on desktop, auto height on phones; content bottom-left:
       .page-hero-top (breadcrumb) · .page-hero-inner > .page-hero-head (eyebrow,
       h1.page-title) + .page-hero-aside (p.page-hero-sub, optional buttons)
       Modifiers: --compact (shorter, e.g. Contact) · --center (centred, e.g. 404)
                  --full (full viewport height)
       Re-frame the photo per page with style="--pos:50% 40%" on .page-hero.
   ========================================================================== */
.hero,.page-hero{position:relative;overflow:hidden;background:var(--deep);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,62% 50%);transform:scale(1.04);animation:kenburns 34s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.17) translate3d(-2.2%,-1.6%,0)}}
.hero-tint{position:absolute;inset:0;z-index:-2;background:var(--teal-700);mix-blend-mode:color;opacity:.26}
.hero-veil{position:absolute;inset:0;z-index:-2}
.grain{position:absolute;inset:-60%;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:220px;opacity:.11;mix-blend-mode:overlay;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}34%{transform:translate(2%,-4%)}51%{transform:translate(-4%,-1%)}68%{transform:translate(3%,3%)}85%{transform:translate(-1%,4%)}100%{transform:translate(0,0)}}

/* intro animation (heroes) */
.intro{animation:rise 1.6s var(--ease-lux) both;animation-delay:var(--d,0s)}
.line{display:block;overflow:hidden;padding:0 .08em .1em}
.line > span{display:inline-block;animation:lineup 1.8s var(--ease-lux) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lineup{from{opacity:0;transform:translateY(102%)}to{opacity:1;transform:none}}
.hero-mark.intro{animation:mark 2.4s var(--ease-lux) both}
@keyframes mark{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}

/* ---- 10a home hero ---- */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto}
.hero .hero-veil{background:
  radial-gradient(ellipse 70% 60% at 50% 46%, rgba(10,26,31,.62) 0%, rgba(10,26,31,.25) 60%, rgba(10,26,31,0) 100%),
  radial-gradient(ellipse 30% 36% at 90% 52%, rgba(212,187,138,.16) 0%, rgba(212,187,138,0) 100%),
  linear-gradient(180deg, rgba(16,21,23,.72) 0%, rgba(0,74,89,.28) 26%, rgba(10,26,31,.42) 60%, rgba(16,21,23,.92) 90%, var(--ink) 100%)}
.hero-inner{align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:120px;padding-bottom:40px;will-change:transform,opacity}
.hero-inner .hero-mark{margin-bottom:18px}
.hero h1{margin-top:30px;font:300 clamp(46px,7.6vw,118px)/.98 var(--serif);letter-spacing:-.018em;color:var(--cream);text-shadow:0 2px 40px rgba(10,26,31,.45)}
.hero h1 em,.page-title em{font-style:italic;color:var(--gold-light)}
.hero-sub{margin-top:26px;max-width:36em;font:300 clamp(18px,1.45vw,21px)/1.6 var(--serif);color:rgba(245,240,235,.86);text-wrap:pretty}
.hero .cta-row{justify-content:center;margin-top:42px}
.hero-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding-bottom:34px;font:400 10.5px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,235,.64)}
.hero-foot .r{text-align:right;padding-bottom:6px}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:14px;color:rgba(245,240,235,.7);padding:6px 10px}
.scroll-cue i{position:relative;width:1px;height:64px;background:rgba(245,240,235,.2);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:linear-gradient(180deg,rgba(201,169,110,0),var(--gold-light));animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{top:-40%}70%,100%{top:100%}}
@media (max-width:767px){
  .hero-foot{grid-template-columns:1fr;justify-items:center;padding-bottom:22px}
  .hero-foot .l,.hero-foot .r{display:none}
  .hero-inner{padding-top:110px}
  .hero-inner .hero-mark{margin-bottom:10px}
  .hero .eyebrow{letter-spacing:.26em;font-size:10.5px;text-wrap:balance;max-width:300px;justify-content:center}
  .hero .eyebrow::before,.hero .eyebrow::after{display:none}
  .hero h1{margin-top:24px}
  .hero .cta-row{align-self:center}
}
@media (max-width:420px){ .hero h1{font-size:44px} }

/* ---- 10b page hero (subpages) ---- */
.page-hero{display:grid;grid-template-rows:auto 1fr;min-height:clamp(560px,66vh,780px);padding:clamp(118px,13vh,148px) 0 clamp(56px,7vw,100px)}
.page-hero .hero-img{animation-duration:46s}
.page-hero .hero-veil{background:
  linear-gradient(90deg, rgba(10,26,31,.72) 0%, rgba(10,26,31,.4) 42%, rgba(10,26,31,.06) 100%),
  radial-gradient(ellipse 40% 50% at 92% 30%, rgba(212,187,138,.12) 0%, rgba(212,187,138,0) 100%),
  linear-gradient(180deg, rgba(16,21,23,.66) 0%, rgba(0,74,89,.24) 30%, rgba(10,26,31,.4) 64%, rgba(16,21,23,.92) 92%, var(--ink) 100%)}
.page-hero-top{grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:20px}
.page-hero-inner{grid-row:2;align-self:end;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px clamp(32px,6vw,110px);align-items:end;padding-top:clamp(48px,7vh,90px)}
.page-title{margin-top:26px;font:300 clamp(46px,6vw,96px)/1 var(--serif);letter-spacing:-.016em;color:var(--cream);text-wrap:balance;text-shadow:0 2px 40px rgba(10,26,31,.45)}
.page-hero:not(.page-hero--center) .page-title .line{margin-left:-.08em}
.page-hero-sub{font:300 clamp(18px,1.45vw,21px)/1.6 var(--serif);color:rgba(245,240,235,.86);text-wrap:pretty;max-width:30em}
.page-hero-aside{padding-bottom:.6em;border-left:1px solid var(--hair);padding-left:clamp(20px,2.4vw,34px)}
.page-hero-aside .cta-row{margin-top:28px}
.page-hero--compact{min-height:clamp(480px,54vh,620px)}
.page-hero--full{min-height:100vh;min-height:100svh}
.page-hero--center .page-hero-inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;align-self:center;padding-top:0}
.page-hero--center .page-hero-aside{border-left:0;padding-left:0;display:flex;flex-direction:column;align-items:center}
.page-hero--center .page-hero-sub{margin-inline:auto}
.page-hero--center .cta-row{justify-content:center}
.page-hero--center .hero-veil{background:
  radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,26,31,.72) 0%, rgba(10,26,31,.35) 60%, rgba(10,26,31,.1) 100%),
  linear-gradient(180deg, rgba(16,21,23,.78) 0%, rgba(0,74,89,.3) 30%, rgba(10,26,31,.5) 64%, rgba(16,21,23,.94) 92%, var(--ink) 100%)}
.page-hero--center .page-title{margin-top:22px}
.page-hero-head .hero-mark{margin-bottom:16px}

/* breadcrumb: <nav class="breadcrumb" aria-label="Breadcrumb"><ol><li><a href="index.html">Home</a></li><li aria-current="page">Services</li></ol></nav> */
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font:400 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(245,240,235,.66)}
.breadcrumb li{display:inline-flex;align-items:center}
.breadcrumb li + li::before{content:"/";margin:0 14px;color:var(--gold);opacity:.8}
.breadcrumb a{padding:6px 0;transition:color .4s var(--ease)}
.breadcrumb a:hover{color:var(--gold-light)}
.breadcrumb [aria-current="page"]{color:var(--gold-light)}

@media (max-width:1023px){
  .page-hero{min-height:0}
  .page-hero--full{min-height:100vh;min-height:100svh}
  .page-hero-inner{grid-template-columns:minmax(0,1fr);padding-top:clamp(64px,10vw,110px)}
  .page-hero-aside{border-left:0;padding-left:0;max-width:36em}
  .page-title{font-size:clamp(46px,7.4vw,72px)}
}
@media (max-width:767px){
  .page-hero{padding:104px 0 56px}
  .page-hero-inner{padding-top:56px;gap:22px}
  .page-title{font-size:clamp(40px,11vw,56px);margin-top:22px}
  .page-hero .eyebrow{font-size:10.5px;letter-spacing:.28em}
  .page-hero .hero-veil{background:
    linear-gradient(180deg, rgba(16,21,23,.78) 0%, rgba(0,74,89,.34) 30%, rgba(10,26,31,.62) 60%, rgba(16,21,23,.95) 92%, var(--ink) 100%)}
}


/* ==========================================================================
   11 REVEAL ON SCROLL
   <div class="reveal" style="--d:.15s"> … </div>
   Fades/rises in once when scrolled into view (site.js adds .in). Content is
   visible without JS and under reduced motion. Page scripts that inject new
   .reveal elements can call window.Jarvis.reveal(el).
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.5s var(--ease),transform 1.7s var(--ease-lux);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}


/* ==========================================================================
   12 GLASS CARD + CONTACT LAYOUT
   <div class="glass"> … </div>             frosted dark panel (any content)
   .glass--sm                               smaller padding
   <div class="glass contact-card">         2 columns: .contact-info | form
     <div class="contact-info"> eyebrow, h2, lead, <dl class="contact-meta"> </div>
     <form class="form" data-mailto=…> … </form>
   </div>
   <dl class="contact-meta"><div><dt>Email</dt><dd>…</dd></div> …</dl>
   ========================================================================== */
.glass{position:relative;border-radius:6px;border:1px solid var(--hair);background:linear-gradient(150deg,rgba(16,21,23,.62),rgba(10,26,31,.42));-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1);box-shadow:0 40px 120px -40px rgba(10,26,31,.8),inset 0 1px 0 rgba(212,187,138,.12);padding:clamp(28px,5vw,72px)}
.glass--sm{padding:clamp(22px,3vw,36px)}
.contact-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,5vw,80px)}
.contact-info{display:flex;flex-direction:column}
.contact-info .h2{font-size:clamp(40px,4.4vw,64px)}
.contact-info .lead{margin-top:24px}
.contact-meta{margin-top:auto;padding-top:44px;display:grid;gap:22px}
.contact-meta dt{font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.contact-meta dd{margin:10px 0 0;font:300 21px/1.3 var(--serif);color:var(--cream)}
.contact-meta a{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .8s var(--ease-lux),color .5s}
.contact-meta a:hover{background-size:100% 1px;color:var(--gold-light)}
@media (max-width:1180px){
  .contact-card{grid-template-columns:1fr}
  .contact-meta{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding-top:36px}
}
@media (max-width:767px){
  .glass{padding:28px 20px 30px}
  .contact-meta{padding-top:32px;grid-template-columns:1fr}
}


/* ==========================================================================
   13 HUMMINGBIRD QUOTE  (signature brand moment — designed for light sections)
   <figure class="hb reveal">
     <svg class="flight" viewBox="0 0 1120 110" aria-hidden="true" focusable="false"><path d="M0 92 C 170 104, 300 34, 480 50 S 760 104, 880 82 S 975 58, 1002 66"/></svg>
     <img class="hb-bird" src="images/brand/hummingbird.png" alt="" width="512" height="512" loading="lazy">
     <blockquote><p><span class="q">“</span>…<span class="q">”</span></p></blockquote>
     <figcaption class="hb-rule">The Jarvis hummingbird</figcaption>
   </figure>
   The dotted flight path draws in when revealed. On dark sections it switches
   to cream/gold automatically.
   ========================================================================== */
.hb{position:relative;margin:clamp(72px,9vw,130px) auto 0;max-width:1120px;text-align:center;padding-top:clamp(70px,8vw,120px)}
.hb--flush{margin-top:0}
.flight{position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible;pointer-events:none}
.flight path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 11}
.js .flight{clip-path:inset(0 100% 0 0);transition:clip-path 3.2s var(--ease)}
.js .hb.in .flight{clip-path:inset(0 0 0 0)}
.hb-bird{position:absolute;right:clamp(-6px,1vw,20px);top:clamp(-46px,-3.4vw,-20px);width:clamp(86px,10vw,150px);animation:hover 6s ease-in-out infinite alternate}
@keyframes hover{from{transform:translateY(0) rotate(0)}to{transform:translateY(-9px) rotate(-3deg)}}
.hb blockquote p{font:300 italic clamp(30px,4.3vw,62px)/1.18 var(--serif);letter-spacing:-.01em;color:var(--gold-light);text-wrap:balance}
.hb blockquote p .q{color:var(--gold);font-style:normal}
.hb-rule{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px;font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.hb-rule::before,.hb-rule::after{content:"";width:60px;height:1px;background:var(--gold)}
:is(.section--cream,.section--warm,.on-light) .hb blockquote p{color:var(--teal-700)}
:is(.section--cream,.section--warm,.on-light) .hb-rule{color:var(--teal-700)}
@media (max-width:767px){
  .flight path{stroke-width:3.6;stroke-dasharray:0 24}
  .hb{padding-top:64px}
  .hb-bird{top:-26px;right:-4px}
  .hb-rule{letter-spacing:.24em;gap:12px;font-size:10px}
  .hb-rule::before,.hb-rule::after{width:28px}
}


/* ==========================================================================
   14 STEPS  ("How we work", "What happens next")
   <ol class="steps">            4 columns (use .steps--3 for three items)
     <li class="reveal"><span class="n">01</span><h3>Listen</h3><p>…</p></li>
   </ol>
   Works on dark and light sections.
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--hair-strong)}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps > li{position:relative;padding:30px 28px 6px 0}
.steps > li + li{padding-left:28px;border-left:1px solid var(--hair)}
.steps .n{font:500 11px/1 var(--sans);letter-spacing:.3em;color:var(--gold)}
.steps h3{margin-top:18px;font:300 clamp(28px,2.6vw,36px)/1.1 var(--serif);color:var(--cream)}
.steps p{margin-top:10px;font-size:16.5px;line-height:1.55;color:var(--text-dim)}
:is(.section--cream,.section--warm,.on-light) .steps{border-top-color:rgba(201,169,110,.6)}
:is(.section--cream,.section--warm,.on-light) .steps > li + li{border-left-color:rgba(201,169,110,.45)}
:is(.section--cream,.section--warm,.on-light) .steps .n{color:var(--teal-700)}
:is(.section--cream,.section--warm,.on-light) .steps h3{color:var(--ink)}
:is(.section--cream,.section--warm,.on-light) .steps p{color:var(--text-ink-dim)}
@media (max-width:1023px){
  .steps:not(.steps--3){grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps:not(.steps--3) > li:nth-child(3){padding-left:0;border-left:0}
  .steps:not(.steps--3) > li:nth-child(n+3){border-top:1px solid var(--hair);margin-top:18px}
}
@media (max-width:767px){
  .steps > li,.steps > li + li{padding:22px 14px 4px 0;border-left:0}
  .steps:not(.steps--3) > li:nth-child(2n){padding-left:16px;border-left:1px solid var(--hair)}
  .steps:not(.steps--3) > li:nth-child(n+3){margin-top:16px}
  .steps h3{font-size:27px;margin-top:14px}
  .steps p{font-size:15.5px}
  .steps--3{grid-template-columns:1fr}
  .steps--3 > li + li{border-top:1px solid var(--hair);margin-top:12px}
  :is(.section--cream,.section--warm,.on-light) .steps > li:nth-child(n+2){border-color:rgba(201,169,110,.45)}
}


/* ==========================================================================
   15 SERVICES RAIL  (horizontal, snap-scrolling cards)
   <div data-rail-scope>                       wraps rail + its controls
     <div class="sec-head wrap"> … <div class="rail-ctrl">
        <span class="rail-count" aria-hidden="true"><b data-rail-now>01</b> / 06</span>
        <button class="rail-btn" type="button" data-rail-prev aria-label="Previous">…svg…</button>
        <button class="rail-btn" type="button" data-rail-next aria-label="Next">…svg…</button>
     </div></div>
     <div class="rail" data-rail role="region" aria-label="…">
       <ol class="rail-track">
         <li class="card"><a class="card-link" href="services.html#…" aria-labelledby="s1">
           <img …><span class="card-num" aria-hidden="true">01</span>
           <div class="card-body"><h3 id="s1">…</h3>
             <div class="card-desc"><div><p>…</p></div></div><span class="card-rule" aria-hidden="true"></span>
           </div></a></li>
         <li class="card card-end"> bird + p + .btn </li>     (optional CTA card)
       </ol></div>
     <div class="wrap rail-progress" aria-hidden="true"><span><i data-rail-bar></i></span></div>
   </div>
   Descriptions reveal on hover/focus (always shown on touch + phones).
   ========================================================================== */
.rail-ctrl{display:flex;align-items:center;gap:12px;flex:none}
.rail-count{font:400 12px/1 var(--sans);letter-spacing:.24em;color:var(--text-dim);margin-right:14px;font-variant-numeric:tabular-nums}
.rail-count b{font-weight:500;color:var(--gold-light)}
.rail-btn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair-strong);background:rgba(10,26,31,.4);color:var(--cream);cursor:pointer;padding:0;transition:background .6s var(--ease),border-color .6s var(--ease),color .6s,opacity .6s}
.rail-btn svg{width:18px;height:18px}
.rail-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--ink)}
.rail-btn:disabled{opacity:.3;cursor:default}
.rail{margin-top:clamp(44px,5vw,72px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;outline-offset:-2px}
.rail::-webkit-scrollbar{display:none}
.rail-track{display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));padding-block:4px}
.card{position:relative;flex:none;width:clamp(280px,25vw,360px);aspect-ratio:2/3;scroll-snap-align:start;overflow:hidden;border-radius:4px;border:1px solid rgba(201,169,110,.2);background:var(--deep);isolation:isolate;transition:border-color .8s var(--ease)}
.card-link{position:absolute;inset:0;display:block;color:inherit;border-radius:inherit}
.card-link:focus-visible{outline:2px solid var(--gold-light);outline-offset:-3px}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.82) brightness(.86);transform:scale(1.02);transition:transform 2.2s var(--ease-lux),filter 1.4s var(--ease)}
.card img.soft{filter:blur(2px) saturate(.82) brightness(.8);transform:scale(1.08)}   /* for the small 212px images */
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(10,26,31,.5) 0%, rgba(10,26,31,0) 26%, rgba(10,26,31,.15) 48%, rgba(10,26,31,.82) 78%, rgba(10,26,31,.96) 100%);transition:opacity 1s var(--ease)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(10,26,31,0) 20%, rgba(10,26,31,.75) 70%);opacity:0;transition:opacity 1s var(--ease)}
.card-num{position:absolute;top:24px;left:26px;display:flex;align-items:center;gap:12px;font:500 11px/1 var(--sans);letter-spacing:.3em;color:var(--gold)}
.card-num::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.card-body{position:absolute;left:0;right:0;bottom:0;padding:28px 26px 30px}
.card h3{font:300 clamp(27px,2.3vw,33px)/1.1 var(--serif);color:var(--cream);letter-spacing:-.005em}
.card-desc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 1.1s var(--ease-lux),opacity .9s var(--ease)}
.card-desc > div{overflow:hidden}
.card-desc p{padding-top:14px;font-size:16px;line-height:1.55;color:rgba(245,240,235,.86)}
.card-rule{display:block;height:1px;margin-top:20px;background:linear-gradient(90deg,var(--gold),rgba(201,169,110,0));transform-origin:left;transform:scaleX(.25);transition:transform 1.4s var(--ease-lux)}
.card:hover,.card:focus-within{border-color:rgba(201,169,110,.6)}
.card:hover img,.card:focus-within img{transform:scale(1.08);filter:saturate(1) brightness(.8)}
.card:hover img.soft,.card:focus-within img.soft{transform:scale(1.12);filter:blur(2px) saturate(1) brightness(.74)}
.card:hover::after,.card:focus-within::after{opacity:1}
.card:hover .card-desc,.card:focus-within .card-desc{grid-template-rows:1fr;opacity:1}
.card:hover .card-rule,.card:focus-within .card-rule{transform:scaleX(1)}
.card-end{display:flex;flex-direction:column;justify-content:space-between;padding:32px 28px;background:linear-gradient(160deg, rgba(0,74,89,.55), rgba(10,26,31,.6));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--hair)}
.card-end::before,.card-end::after{display:none}
.card-end .bird{width:64px;filter:drop-shadow(0 0 16px rgba(201,169,110,.4))}
.card-end p{font:300 italic clamp(25px,2.1vw,30px)/1.25 var(--serif);color:var(--cream)}
.card-end .btn{align-self:flex-start}
.rail-progress{margin-top:36px}
.rail-progress span{display:block;height:1px;background:rgba(245,240,235,.14);position:relative;overflow:hidden}
.rail-progress span i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(.16);transition:transform .5s var(--ease)}
html:not(.js) :is(.rail-ctrl,.rail-progress){display:none}   /* controls need JS; the rail still scrolls */
@media (hover:none){
  .card-desc{grid-template-rows:1fr;opacity:1}
  .card::after{opacity:.7}
  .card-rule{transform:scaleX(1)}
}
@media (max-width:767px){
  .card-desc{grid-template-rows:1fr;opacity:1}
  .card::after{opacity:.7}
  .card-rule{transform:scaleX(1)}
  .rail-btn{display:none}
  [data-rail-scope] .sec-head{position:relative}
  [data-rail-scope] .rail-ctrl{position:absolute;right:var(--gutter);bottom:14px}
  .card,.card-end{width:min(80vw,330px)}
}


/* ==========================================================================
   16 GLOBAL REACH + CONSTELLATION
   Layout:  <div class="wrap reach-grid"><div class="reach-copy">…</div>
            <div class="constellation-wrap reveal"> <svg class="constellation">…</svg></div></div>
   Stat:    <div class="reach-stat"><b>07</b><span>Partner countries<br>One home in Dubai</span></div>
   List:    <ul class="reach-list"><li class="hq">Dubai, UAE <small>· Headquarters</small></li><li>…</li></ul>
   SVG:     copy the full <svg class="constellation"> block from index.html.
            If a page has more than one, suffix its ids (title, gradient,
            filter) so they stay unique. site.js animates every instance
            when it scrolls into view (routes draw, nodes appear, sparks travel).
   ========================================================================== */
.reach-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(40px,5vw,90px);align-items:center}
.reach-copy .lead{margin-top:28px;max-width:30em}
.reach-copy .lead strong{font-weight:400;color:var(--cream)}
.reach-stat{display:flex;align-items:baseline;gap:18px;margin-top:40px;padding-top:28px;border-top:1px solid var(--hair)}
.reach-stat b{font:300 clamp(56px,5.6vw,80px)/.9 var(--serif);color:var(--gold-light)}
.reach-stat span{font:500 11px/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim)}
.reach-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:30px}
.reach-list li{display:flex;align-items:center;gap:12px;font:400 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.reach-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-light);opacity:.8;flex:none}
.reach-list li.hq{grid-column:1/-1;color:var(--gold-light)}
.reach-list li.hq::before{width:9px;height:9px;background:var(--gold);box-shadow:0 0 0 4px rgba(201,169,110,.18),0 0 14px rgba(201,169,110,.7)}
.reach-list li.hq small{font-size:10px;letter-spacing:.24em;color:var(--text-dim)}
.reach-copy .link-arrow{margin-top:34px}

.constellation{width:100%;height:auto;overflow:visible}
.constellation .stars circle{fill:var(--cream)}
.constellation .tw{animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.7}}
.constellation .web line{stroke:rgba(212,187,138,.16);stroke-width:1;stroke-dasharray:2 5}
.constellation .route{fill:none;stroke:rgba(201,169,110,.55);stroke-width:1.1;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.6s var(--ease)}
.constellation .spark{fill:none;stroke:var(--gold-light);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:5 220;stroke-dashoffset:5;opacity:0}
.constellation .node .halo{fill:rgba(201,169,110,.14);transform-box:fill-box;transform-origin:center;animation:pulse 4.8s ease-in-out infinite}
.constellation .node .core{fill:var(--gold-light)}
.constellation .node{opacity:0;transition:opacity 1.4s var(--ease);transition-delay:calc(var(--i,0) * .25s + 1.2s)}
.constellation text{font-family:var(--sans);font-size:15.5px;letter-spacing:2.6px;fill:rgba(245,240,235,.78);text-transform:uppercase}
.constellation .hub-label{fill:var(--gold-light);font-size:17px;letter-spacing:4px;font-weight:500}
.constellation .hub-sub{fill:rgba(245,240,235,.6);font-size:11.5px;letter-spacing:3.4px}
.constellation .orbit{fill:none;stroke:rgba(201,169,110,.22);stroke-dasharray:1 7;transform-box:fill-box;transform-origin:center;animation:spin 120s linear infinite}
.constellation .orbit.o2{stroke:rgba(201,169,110,.13);animation-duration:200s;animation-direction:reverse}
.constellation .hub-core{fill:var(--gold)}
.constellation .hub-ring{fill:none;stroke:var(--gold-light);stroke-width:1;opacity:.7;transform-box:fill-box;transform-origin:center;animation:ring 3.6s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.25);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes travel{0%{stroke-dashoffset:5;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.constellation.in .route{stroke-dashoffset:0}
.constellation.in .node{opacity:1}
.constellation.in .spark{animation:travel 4.6s var(--ease) infinite}
.constellation .r2{transition-delay:.25s}.constellation .r3{transition-delay:.5s}.constellation .r4{transition-delay:.75s}
.constellation .r5{transition-delay:1s}.constellation .r6{transition-delay:1.25s}.constellation .r7{transition-delay:1.5s}
html:not(.js) .constellation .route{stroke-dashoffset:0}
html:not(.js) .constellation .node{opacity:1}
@media (max-width:1023px){
  .reach-grid{grid-template-columns:1fr}
  .constellation-wrap{max-width:640px;margin-inline:auto;width:100%}
}
@media (max-width:767px){
  .reach-list{gap:12px 16px}
  .reach-list li{font-size:11px;letter-spacing:.12em}
  .constellation text{font-size:19px;letter-spacing:2px}
  .constellation .hub-label{font-size:20px}
  .constellation .hub-sub{font-size:13px}
}


/* ==========================================================================
   17 PARTNER TILE (.pt) + BENTO GRID
   Tile (portrait photo, details slide up on hover/focus; a list row on phones):
   <article class="pt reveal">
     <a class="pt-link" href="partners.html#ultimate-library" aria-labelledby="p1">
       <img src="images/partners/ultimate-library-portrait.webp" alt="…" width="512" height="768" loading="lazy">
       <div class="pt-top" aria-hidden="true"><span class="pt-idx">01</span><span class="pt-sense">Story</span></div>
       <div class="pt-body">
         <p class="pt-disc">Literary curation · London</p>
         <h3 id="p1">Ultimate Library</h3>
         <div class="pt-more"><div><p>…</p><blockquote><p>“…”</p></blockquote></div></div>
       </div></a></article>
   Without a link, use <div class="pt-link"> and give the article tabindex="0".
   img.dim = darker treatment for very bright photos.
   Grid:  <div class="bento"> <div class="bento-intro">…</div> + 7 × .pt </div>
          4 columns with a staggered rhythm → 2 columns → list on phones.
   ========================================================================== */
.bento{--stagger:clamp(40px,5vw,84px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);padding-bottom:var(--stagger)}
.bento > :nth-child(4n+2),.bento > :nth-child(4n+4){position:relative;top:var(--stagger)}
.bento-intro{display:flex;flex-direction:column;justify-content:space-between;padding:6px 8px 4px 0}
.bento-intro .h2{font-size:clamp(36px,3.4vw,50px)}
.bento-intro p.lead{margin-top:22px;font-size:18px}
.bento-intro .link-arrow{margin-top:22px}
.bento-hint{display:flex;align-items:center;gap:12px;font:400 10.5px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);margin-top:28px}
.bento-hint::before{content:"";width:18px;height:18px;border:1px solid var(--hair-strong);border-radius:50%;flex:none;background:radial-gradient(circle,var(--gold) 0 2px,transparent 2.5px)}

.pt{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:4px;border:1px solid rgba(201,169,110,.16);background:var(--deep);isolation:isolate;transition:border-color .8s var(--ease)}
.pt-link{position:absolute;inset:0;display:block;color:inherit;border-radius:inherit}
.pt-link:focus-visible{outline:2px solid var(--gold-light);outline-offset:-3px}
.pt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.78) brightness(.84);transition:transform 2.4s var(--ease-lux),filter 1.4s var(--ease)}
.pt img.dim{filter:saturate(.7) brightness(.66)}
.pt::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(10,26,31,.45) 0%, rgba(10,26,31,0) 22%, rgba(10,26,31,0) 50%, rgba(10,26,31,.88) 100%)}
.pt-top{position:absolute;top:18px;left:20px;right:18px;display:flex;justify-content:space-between;align-items:center}
.pt-idx{font:500 10.5px/1 var(--sans);letter-spacing:.3em;color:var(--gold)}
.pt-sense{font:italic 300 17px/1 var(--serif);color:var(--gold-light)}
.pt-body{position:absolute;left:10px;right:10px;bottom:10px;padding:18px 16px 16px;border-radius:3px;border:1px solid transparent;transition:background-color .9s var(--ease),border-color .9s var(--ease)}
.pt-body::before{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;transition:opacity .9s var(--ease);z-index:-1}
.pt-disc{font:500 10px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.pt h3{margin-top:8px;font:300 clamp(23px,1.9vw,28px)/1.1 var(--serif);color:var(--cream)}
.pt-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 1.1s var(--ease-lux),opacity .9s var(--ease)}
.pt-more > div{overflow:hidden}
.pt-more p{padding-top:12px;font-size:15px;line-height:1.5;color:rgba(245,240,235,.86)}
.pt-more blockquote{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.pt-more blockquote p{padding:0;font:italic 300 15.5px/1.45 var(--serif);color:var(--gold-light)}
.pt:hover,.pt:focus-within{border-color:rgba(201,169,110,.55)}
.pt:hover img,.pt:focus-within img{transform:scale(1.06);filter:saturate(.95) brightness(.7)}
.pt:hover .pt-body,.pt:focus-within .pt-body{background:rgba(10,26,31,.62);border-color:var(--hair)}
.pt:hover .pt-body::before,.pt:focus-within .pt-body::before{opacity:1}
.pt:hover .pt-more,.pt:focus-within .pt-more{grid-template-rows:1fr;opacity:1}
@media (max-width:1180px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento > :nth-child(4n+2),.bento > :nth-child(4n+4){top:0}
  .bento > :nth-child(2n){top:var(--stagger)}
  .pt{aspect-ratio:4/5}
  .bento-intro{padding:0 0 20px}
}
@media (hover:none) and (min-width:768px){
  .pt-more{grid-template-rows:1fr;opacity:1}
  .pt-body{background:rgba(10,26,31,.62);border-color:var(--hair)}
  .pt-body::before{opacity:1}
  .bento-hint{display:none}
}
@media (max-width:767px){
  .bento{grid-template-columns:1fr;gap:0;padding-bottom:0}
  .bento > :nth-child(2n){top:0}
  .bento-intro{padding:0 0 32px}
  .bento-hint{display:none}
  .pt{aspect-ratio:auto;overflow:visible;border:0;border-top:1px solid rgba(201,169,110,.18);border-radius:0;background:none}
  .pt:last-child{border-bottom:1px solid rgba(201,169,110,.18)}
  .pt-link{position:relative;inset:auto;display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;padding:22px 0}
  .pt img,.pt img.dim{position:relative;inset:auto;z-index:0;aspect-ratio:2/3;height:auto;border-radius:3px;filter:saturate(.85) brightness(.9)}
  .pt::before{display:none}
  .pt-top{position:absolute;top:30px;left:8px;right:auto;width:102px}
  .pt-idx{background:rgba(10,26,31,.6);padding:5px 6px;border-radius:2px}
  .pt-sense{display:none}
  .pt-body{position:static;padding:0;background:none!important;border:0!important}
  .pt-body::before{display:none}
  .pt-more{grid-template-rows:1fr;opacity:1}
  .pt:hover img,.pt:focus-within img{transform:none;filter:saturate(.85) brightness(.9)}
}


/* ==========================================================================
   18 CLIENT LOGO MARQUEE
   <div class="marquee reveal" id="clientMarquee" data-marquee>
     <ul class="mq-track">
       <li><img src="images/clients/accor.webp" alt="Accor" width="400" height="300" loading="lazy"></li> …
     </ul></div>
   <button class="mq-toggle" type="button" data-marquee-toggle aria-controls="clientMarquee" aria-pressed="false">Pause logos</button>
   - The toggle must come right after the marquee (it only shows when running).
   - site.js duplicates the logos and scrolls them; pauses on hover/focus.
     Reduced motion / no JS = a static centred wrap of logos.
   - Logos are dark-on-white rasters: on dark they are inverted + screened.
     On light sections use .marquee--light (multiply). Per-logo tweaks:
     li.lg-accor, li.lg-bella, li.lg-km.
   ========================================================================== */
.marquee{position:relative;margin-top:clamp(48px,5vw,72px);overflow:hidden;background:var(--deep);isolation:isolate;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.mq-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;background:inherit;isolation:isolate}
.mq-track li{flex:none;width:clamp(150px,15vw,210px);height:clamp(104px,10vw,136px);margin:0 clamp(18px,2.4vw,36px);display:flex;align-items:center;justify-content:center}
.mq-track img{width:auto;height:auto;max-width:100%;max-height:100%;filter:grayscale(1) invert(1) brightness(1.5) contrast(1.2);mix-blend-mode:screen;opacity:.78;transition:opacity .6s var(--ease)}
.mq-track li:hover img{opacity:1}
.mq-track .lg-km img{width:92%;max-height:none}
.mq-track .lg-accor img{filter:grayscale(1) invert(1) brightness(2.4) contrast(1.15)}
.mq-track .lg-bella img{filter:grayscale(1) invert(1) brightness(1.9) contrast(1.15)}
.marquee--light,.marquee--light .mq-track{background:var(--cream)}
.section--warm .marquee--light,.section--warm .marquee--light .mq-track{background:var(--warm)}
.marquee--light .mq-track img,.marquee--light .mq-track :is(.lg-accor,.lg-bella) img{filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:.82}
.marquee.is-running .mq-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:mq 56s linear infinite}
.marquee.is-running:hover .mq-track,.marquee.is-running:focus-within .mq-track,.marquee.is-paused .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-toggle{display:none;margin:28px auto 0;align-items:center;gap:10px;background:none;border:1px solid var(--hair);border-radius:999px;padding:9px 16px;font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;transition:color .4s,border-color .4s}
.mq-toggle:hover{color:var(--gold-light);border-color:var(--hair-strong)}
:is(.section--cream,.section--warm,.on-light) .mq-toggle{color:var(--text-ink-dim);border-color:rgba(16,21,23,.22)}
.is-running ~ .mq-toggle{display:flex}
.marquee:not(.is-running){-webkit-mask-image:none;mask-image:none}
.marquee:not(.is-running) .mq-track{row-gap:12px}


/* ==========================================================================
   19 FORMS  (enquiry form → opens a pre-filled email; see site.js §9)
   <form class="form" data-mailto="info@jarvis-consult.com"
         action="mailto:info@jarvis-consult.com" method="post" enctype="text/plain">
     <div class="field"><label for="f-name">Name <span class="req" aria-hidden="true">*</span></label>
       <input id="f-name" name="name" type="text" autocomplete="name" required></div>
     <div class="field full"> textarea … </div>        (.full = spans both columns)
     <div class="form-foot"><button class="btn btn-gold btn-arrow" type="submit">Send enquiry</button>
       <p class="form-note">…</p></div>
     <p class="form-status" role="status" aria-live="polite"></p>
   </form>
   Error messages are created by site.js (.field-error, aria-invalid).
   Custom message per field: data-error="…" on the input.
   Selects with long options (e.g. "Leadership Talent Acquisition") need a
   .full field — half-width fields are ~230px on laptop widths.
   ========================================================================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;align-content:start}
.field{display:flex;flex-direction:column;gap:10px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:500 10px/1.2 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.field .req{color:var(--gold-light);margin-left:2px}
.field .opt{letter-spacing:.12em;text-transform:none;color:var(--text-dim);font-weight:400}
.field input,.field select,.field textarea{width:100%;background:rgba(10,26,31,.35);border:0;border-bottom:1px solid rgba(245,240,235,.3);border-radius:2px 2px 0 0;padding:13px 14px;font:300 17px/1.4 var(--serif);color:var(--cream);transition:border-color .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c9a96e' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field select option{background:var(--deep);color:var(--cream)}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,240,235,.46)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold);background-color:rgba(10,26,31,.55)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{box-shadow:0 0 0 1px rgba(201,169,110,.6)}
.field [aria-invalid="true"]{border-bottom:2px solid var(--gold-light);background-color:rgba(201,169,110,.08)}
.field-error{display:flex;align-items:flex-start;gap:8px;font:400 13px/1.45 var(--sans);letter-spacing:.02em;color:var(--gold-light)}
.field-error::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;border:1px solid currentColor;font:600 10px/1 var(--sans)}
.form noscript{grid-column:1/-1} /* no-JS note spans both columns */
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.form-note{font:400 12.5px/1.55 var(--sans);letter-spacing:.02em;color:var(--text-dim);flex:1 1 220px}
.form-status{grid-column:1/-1;font:italic 300 16px/1.5 var(--serif);color:var(--gold-light);min-height:1.5em}
.form-status:empty{min-height:0}
.form-fallback{grid-column:1/-1;font:400 14px/1.5 var(--sans);color:var(--text)}
.form-fallback a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){ .form{grid-template-columns:1fr} }


/* ==========================================================================
   20 CHIPS · COPY BUTTON · TOAST · CLOCK
   Chips (index links, filters):
     <div class="chips"><a class="chip" href="#brand-development"><span class="n">02</span>Brand</a></div>
     Filter buttons: <button class="chip" type="button" aria-pressed="true">All</button>
     Active state: aria-pressed="true" | aria-current="true" | .is-active
   Copy button (hidden without JS):
     <button class="copy-btn" type="button" data-copy="info@jarvis-consult.com">Copy email</button>
     Optional data-copy-toast="Email address copied". Shows the shared toast.
   Toast: created by site.js; call window.Jarvis.toast('Message') from page JS.
   Clock: <span class="clock" data-clock="Asia/Dubai">GMT+4</span>
     (fallback text shows without JS; data-clock-format="full" adds the weekday)
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px;border:1px solid var(--hair-strong);border-radius:999px;background:rgba(10,26,31,.3);font:500 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--text);cursor:pointer;white-space:nowrap;transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.chip .n{color:var(--gold);letter-spacing:.18em}
.chip:hover{border-color:var(--gold);color:var(--gold-light)}
.chip[aria-pressed="true"],.chip[aria-current="true"],.chip.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.chip[aria-pressed="true"] .n,.chip[aria-current="true"] .n,.chip.is-active .n{color:var(--ink)}
:is(.section--cream,.section--warm,.on-light) .chip{background:transparent;border-color:rgba(0,74,89,.35);color:var(--ink)}
:is(.section--cream,.section--warm,.on-light) .chip .n{color:var(--teal-700)}
:is(.section--cream,.section--warm,.on-light) .chip:hover{border-color:var(--teal-700);color:var(--teal-700)}
:is(.section--cream,.section--warm,.on-light) :is(.chip[aria-pressed="true"],.chip[aria-current="true"],.chip.is-active){background:var(--teal-700);border-color:var(--teal-700);color:var(--cream)}
:is(.section--cream,.section--warm,.on-light) :is(.chip[aria-pressed="true"],.chip[aria-current="true"],.chip.is-active) .n{color:var(--cream)}

.copy-btn{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 14px;border:1px solid var(--hair-strong);border-radius:999px;background:transparent;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--text);cursor:pointer;vertical-align:middle;transition:border-color .5s var(--ease),color .5s var(--ease)}
.copy-btn::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask-image:var(--i-copy);mask-image:var(--i-copy);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.copy-btn:hover{border-color:var(--gold);color:var(--gold-light)}
html:not(.js) .copy-btn{display:none}

.toast{position:fixed;left:50%;bottom:28px;z-index:80;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:14px 22px;border:1px solid var(--hair-strong);border-radius:999px;background:rgba(10,26,31,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 50px -20px rgba(10,26,31,.9);font:400 13px/1.4 var(--sans);letter-spacing:.04em;color:var(--cream);opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .5s var(--ease),transform .7s var(--ease-lux),visibility 0s .7s}
.toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(201,169,110,.8)}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .5s var(--ease),transform .7s var(--ease-lux),visibility 0s}

.clock{font-variant-numeric:tabular-nums}


/* ==========================================================================
   21 CTA BAND  (closes every subpage — copy from _template.html)
   <section class="cta-band section--mist" aria-labelledby="cta-title">
     <div class="blur-bg" aria-hidden="true"><img src="images/textures/crystal.webp" alt="" …></div>
     <div class="grain" aria-hidden="true"></div>
     <div class="wrap cta-band-inner reveal"> hero-mark · eyebrow--center · h2 · lead · .cta-row </div>
   </section>
   ========================================================================== */
.cta-band{position:relative;padding:var(--sec) 0;border-top:1px solid rgba(201,169,110,.12)}
.cta-band-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-band .hero-mark{width:74px;height:74px;margin-bottom:28px}
.cta-band .h2{max-width:13em;font-size:clamp(42px,5.4vw,80px)}
.cta-band .lead{margin-top:24px;max-width:30em}
.cta-band .cta-row{justify-content:center;margin-top:40px}
@media (max-width:767px){
  .cta-band .cta-row{align-self:center}
  .cta-band .btn{white-space:normal;text-align:center}
}


/* ==========================================================================
   22 FOOTER  (identical on every page — copy from _template.html)
   Lockup + one-liner · Explore links · Contact · giant fading JARVIS wordmark
   · © line + "Back to top" (href="#top" scrolls to the top of any page).
   ========================================================================== */
.footer{position:relative;background:var(--ink);padding:clamp(72px,8vw,110px) 0 40px;overflow:hidden;border-top:1px solid rgba(201,169,110,.1)}
.foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start;padding-bottom:56px;border-bottom:1px solid rgba(201,169,110,.14)}
.foot-top .lockup .bird{width:44px}
.foot-top .wordmark{font-size:18px}
.foot-tag{margin-top:22px;max-width:22em;font-size:16px;color:var(--text-dim)}
.foot-h{font:500 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.foot-nav{display:grid;gap:4px;justify-items:start}
.foot-nav a{padding:5px 0}
.foot-nav a,.foot-mail{font:400 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text);transition:color .4s}
.foot-nav a:hover,.foot-mail:hover,.foot-nav a[aria-current="page"]{color:var(--gold-light)}
.foot-mail{display:inline-block;padding:4px 0;text-transform:none;letter-spacing:.06em;font-size:15px}
.foot-loc{margin-top:12px;font-size:16px;color:var(--text-dim)}
.foot-mark{display:flex;align-items:center;justify-content:center;margin-top:clamp(40px,6vw,80px);font:300 clamp(58px,15.2vw,226px)/.9 var(--sans);letter-spacing:.35em;color:transparent;background:linear-gradient(180deg,rgba(212,187,138,.42) 0%,rgba(201,169,110,.08) 70%,rgba(201,169,110,0) 100%);-webkit-background-clip:text;background-clip:text;user-select:none;white-space:nowrap}
.foot-mark span{margin-right:-.35em}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(28px,4vw,48px);font:400 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.foot-bottom a{padding:6px 0}
.foot-bottom a:hover{color:var(--gold-light)}
@media (max-width:1023px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top > :first-child{grid-column:1/-1}
}
@media (max-width:767px){
  .foot-top{gap:36px 20px}
  .foot-mail{font-size:13px;letter-spacing:.02em}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .footer{padding-bottom:24px}
}


/* ==========================================================================
   23 REDUCED MOTION — everything static, all content visible
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
  .js .flight{clip-path:none}
  .constellation .route{stroke-dashoffset:0}
  .constellation .node{opacity:1}
  .constellation .spark{display:none}
  .hero-img{transform:scale(1.04)}
}