/* =====================================================================
   MKSH website · design system · Stage 10 · HER (High End Reach)
   Colour from Stage 7, type from Stage 6, patterns from Stage 8.
   One file, no framework. Logical properties throughout, so the same
   rules mirror for Arabic (dir="rtl").
   Sections:  1 fonts · 2 tokens · 3 base · 4 grounds · 5 type · 6 layout
              7 header & menu · 8 actions · 9 heroes · 10 components
              11 media · 12 forms · 13 article · 14 footer · 15 motion
              16 review aids · 17 print
   ===================================================================== */

/* 1 · Fonts ------------------------------------------------------------
   Bodoni Moda is the static opsz-11 cut (approved optical size, Stage 6).
   Arabic faces carry Arabic + digits + punctuation only; Latin words in
   Arabic text fall through to Bodoni / Work Sans. */
@font-face{font-family:"Bodoni Moda 11";src:url("../fonts/bodoni-moda-11-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda 11";src:url("../fonts/bodoni-moda-11-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni Moda 11";src:url("../fonts/bodoni-moda-11-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/work-sans-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url("../fonts/amiri-regular.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0020-0040,U+00A0,U+00AB,U+00B7,U+00BB,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2027,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";src:url("../fonts/amiri-bold.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0020-0040,U+00A0,U+00AB,U+00B7,U+00BB,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2027,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-regular.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0020-0040,U+00A0,U+00AB,U+00B7,U+00BB,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2027,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-medium.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0020-0040,U+00A0,U+00AB,U+00B7,U+00BB,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2027,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/ibm-plex-sans-arabic-semibold.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0020-0040,U+00A0,U+00AB,U+00B7,U+00BB,U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+2010-2027,U+FB50-FDFF,U+FE70-FEFF}

/* 2 · Tokens ----------------------------------------------------------- */
:root{
  /* colour · Stage 7. Champagne is accent only: rules, the logo on Ink,
     small text on Ink. Never a fill, never text on a light ground. */
  --ink:#0F1B2D; --porcelain:#F7F5F0; --slate:#586372; --sand:#E9E1D3;
  --champagne:#C9B38A; --mist:#A8B2BF; --bronze:#705E3B;
  --error:#9B3B2E;                               /* web only: form errors */
  --metal:linear-gradient(115deg,#8D7A57,#D9C6A0,#F3E8D0,#C9B38A,#7C6A4B); /* renders only */
  --line-on-light:rgba(15,27,45,.14);            /* palette colours at low alpha: no new hues */
  --line-on-dark:rgba(247,245,240,.16);

  /* type · Stage 6. Fluid between 375 and 1440 px; the upper value is the approved size */
  --ff-d:"Bodoni Moda 11","Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --ff-t:"Work Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(2.75rem,1.694rem + 4.507vw,5.75rem);      /* 44 → 92  web hero only */
  --fs-display:clamp(2.5rem,1.972rem + 2.254vw,4rem);        /* 40 → 64 */
  --fs-h1:clamp(2rem,1.736rem + 1.127vw,2.75rem);            /* 32 → 44 */
  --fs-h2:clamp(1.625rem,1.493rem + .563vw,2rem);            /* 26 → 32 */
  --fs-h3:clamp(1.25rem,1.206rem + .188vw,1.375rem);         /* 20 → 22 */
  --fs-quote:clamp(1.375rem,1.287rem + .376vw,1.625rem);     /* 22 → 26 */
  --fs-lead:clamp(1.0625rem,1.018rem + .188vw,1.1875rem);    /* 17 → 19 */
  --fs-prose:clamp(1rem,.956rem + .188vw,1.125rem);          /* 16 → 18  long reading */
  --fs-body:1rem; --fs-caption:.8125rem; --fs-label:.6875rem;/* 16 · 13 · 11 */
  --lh-hero:1.02; --lh-display:1.05; --lh-h1:1.1; --lh-h2:1.2; --lh-h3:1.3; --lh-quote:1.35;
  --lh-lead:1.55; --lh-body:1.6; --lh-prose:1.7; --lh-caption:1.5; --lh-label:1.4;
  --w-h3:500; --italic:italic; --label-case:uppercase;
  --track-label:.24em; --track-ui:.2em; --track-d:-.005em;
  --script:1;                                    /* Arabic: 1.15 × the Latin size */

  /* space: 4 px base */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section:clamp(5rem,3.24rem + 7.51vw,10rem);  /* 80 → 160 between sections */
  --gutter:clamp(1.25rem,.106rem + 4.88vw,4.5rem);/* 20 → 72 page margin */
  --col-gap:clamp(1rem,.78rem + .94vw,2rem);     /* 16 → 32 */
  --wrap:85rem;                                  /* 1360 content width */
  --measure:39rem;                               /* ~68 characters of prose */

  /* header: the horizontal lockup never drops below 200 px (Stage 5 minimum) */
  --hdr-top:9.5rem; --hdr-compact:4.75rem; --logo-w:13.5rem; --mono-h:2.5rem;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.2s; --t-med:.45s; --t-slow:.9s;

  /* ground defaults (Porcelain) */
  --bg:var(--porcelain); --fg:var(--ink); --fg-2:var(--slate); --label:var(--bronze);
  --line:var(--line-on-light); --rule:var(--champagne); --focus:var(--ink); --hover-bg:var(--sand);
}
@media (max-width:56rem){:root{--hdr-top:8.25rem; --hdr-compact:4rem; --logo-w:12.5rem; --mono-h:2.25rem}}
/* Arabic pages use the bilingual lockup: 240 px minimum on screen */
html[lang="ar"]{--hdr-top:10.5rem; --logo-w:16rem}
@media (max-width:56rem){html[lang="ar"]{--hdr-top:9.5rem; --logo-w:15rem}}

/* Arabic: Amiri + IBM Plex Sans Arabic at 1.15×, more leading, no tracking, no italic, no caps */
[lang="ar"]{
  --ff-d:"Amiri","Bodoni Moda 11",Georgia,serif;
  --ff-t:"IBM Plex Sans Arabic","Work Sans",Tahoma,sans-serif;
  --script:1.15; --w-h3:700; --italic:normal; --label-case:none;
  --track-label:0; --track-ui:0; --track-d:0;
  --lh-hero:1.25; --lh-display:1.3; --lh-h1:1.35; --lh-h2:1.4; --lh-h3:1.5; --lh-quote:1.6;
  --lh-lead:1.75; --lh-body:1.8; --lh-prose:1.9; --lh-caption:1.7; --lh-label:1.5;
}
[lang="en"]{
  --ff-d:"Bodoni Moda 11","Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --ff-t:"Work Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --script:1; --w-h3:500; --italic:italic; --label-case:uppercase;
  --track-label:.24em; --track-ui:.2em; --track-d:-.005em;
  --lh-hero:1.02; --lh-display:1.05; --lh-h1:1.1; --lh-h2:1.2; --lh-h3:1.3; --lh-quote:1.35;
  --lh-lead:1.55; --lh-body:1.6; --lh-prose:1.7; --lh-caption:1.5; --lh-label:1.4;
}

/* 3 · Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-compact) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{min-height:100vh;background:var(--porcelain);color:var(--ink);font-family:var(--ff-t);
  font-size:calc(var(--fs-body)*var(--script));line-height:var(--lh-body);font-weight:400;
  font-kerning:normal;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
address{font-style:normal}
::selection{background:var(--champagne);color:var(--ink)}
:focus-visible{outline:1px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;inset-block-start:.75rem;inset-inline-start:.75rem;z-index:100;background:var(--ink);color:var(--porcelain);padding:.75rem 1.25rem;font:500 .75rem/1 var(--ff-t);letter-spacing:var(--track-ui);text-transform:var(--label-case);text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none}
bdi,.ltr{unicode-bidi:isolate}
.nowrap{white-space:nowrap}

/* 4 · Grounds: every section sits on one of three. They set the text roles. */
.g-porcelain,.g-sand,.g-ink{background-color:var(--bg);color:var(--fg)}
.g-porcelain{--bg:var(--porcelain);--fg:var(--ink);--fg-2:var(--slate);--label:var(--bronze);--line:var(--line-on-light);--rule:var(--champagne);--focus:var(--ink);--hover-bg:var(--sand)}
.g-sand{--bg:var(--sand);--fg:var(--ink);--fg-2:var(--slate);--label:var(--bronze);--line:rgba(15,27,45,.16);--rule:var(--bronze);--focus:var(--ink);--hover-bg:var(--porcelain)}
.g-ink{--bg:var(--ink);--fg:var(--porcelain);--fg-2:var(--mist);--label:var(--champagne);--line:var(--line-on-dark);--rule:var(--champagne);--focus:var(--champagne);--hover-bg:rgba(247,245,240,.05)}

/* Patterns · Stage 8. Seal = rings off-canvas lower right, never centred.
   Lattice = seamless texture. Never both on one surface, never behind the logo. */
.seal-ink{background:var(--ink) url("../brand/seal-ink.svg") right bottom/cover no-repeat}
.seal-porcelain{background:var(--porcelain) url("../brand/seal-porcelain.svg") right bottom/cover no-repeat}
.seal-sand{background:var(--sand) url("../brand/seal-sand.svg") right bottom/cover no-repeat}
@media (max-width:48rem){
  .seal-ink{background-image:url("../brand/seal-ink-portrait.svg")}
  .seal-porcelain{background-image:url("../brand/seal-porcelain-portrait.svg")}
  .seal-sand{background-image:url("../brand/seal-sand-portrait.svg")}
}
[dir="rtl"] .seal-ink,[dir="rtl"] .seal-porcelain,[dir="rtl"] .seal-sand{background-position:left bottom}
[dir="rtl"] .seal-ink{background-image:url("../brand/seal-ink-rtl.svg")}
[dir="rtl"] .seal-porcelain{background-image:url("../brand/seal-porcelain-rtl.svg")}
[dir="rtl"] .seal-sand{background-image:url("../brand/seal-sand-rtl.svg")}
.seal-wide.seal-ink{background-image:url("../brand/seal-ink-wide.svg")}
.seal-wide.seal-porcelain{background-image:url("../brand/seal-porcelain-wide.svg")}
.seal-wide.seal-sand{background-image:url("../brand/seal-sand-wide.svg")}
@media (max-width:48rem){.seal-wide.seal-ink{background-image:url("../brand/seal-ink-portrait.svg")}.seal-wide.seal-porcelain{background-image:url("../brand/seal-porcelain-portrait.svg")}.seal-wide.seal-sand{background-image:url("../brand/seal-sand-portrait.svg")}}
[dir="rtl"] .seal-wide.seal-ink{background-image:url("../brand/seal-ink-wide-rtl.svg")}
[dir="rtl"] .seal-wide.seal-porcelain{background-image:url("../brand/seal-porcelain-wide-rtl.svg")}
.lattice-porcelain{background:var(--porcelain) url("../brand/lattice-porcelain.svg") 0 0/53.856px 95.296px}
.lattice-sand{background:var(--sand) url("../brand/lattice-sand.svg") 0 0/53.856px 95.296px}
.lattice-ink{background:var(--ink) url("../brand/lattice-ink.svg") 0 0/53.856px 95.296px}

/* 5 · Type ------------------------------------------------------------- */
.t-hero,.t-display,.t-h1,.t-h2,.t-h3,.t-quote{font-family:var(--ff-d);font-weight:400;font-optical-sizing:none;letter-spacing:var(--track-d);text-wrap:balance}
.t-hero{font-size:calc(var(--fs-hero)*var(--script));line-height:var(--lh-hero)}
.t-display{font-size:calc(var(--fs-display)*var(--script));line-height:var(--lh-display)}
.t-h1{font-size:calc(var(--fs-h1)*var(--script));line-height:var(--lh-h1)}
.t-h2{font-size:calc(var(--fs-h2)*var(--script));line-height:var(--lh-h2)}
.t-h3{font-size:calc(var(--fs-h3)*var(--script));line-height:var(--lh-h3);font-weight:var(--w-h3);letter-spacing:0}
.t-quote{font-size:calc(var(--fs-quote)*var(--script));line-height:var(--lh-quote);font-style:var(--italic)}
.t-lead{font-size:calc(var(--fs-lead)*var(--script));line-height:var(--lh-lead)}
.t-body{font-size:calc(var(--fs-body)*var(--script));line-height:var(--lh-body)}
.t-caption{font-size:calc(var(--fs-caption)*var(--script));line-height:var(--lh-caption)}
.t-label{font-family:var(--ff-t);font-size:calc(var(--fs-label)*var(--script));line-height:var(--lh-label);font-weight:500;letter-spacing:var(--track-label);text-transform:var(--label-case)}
.t-muted{color:var(--fg-2)}
.t-figures{font-variant-numeric:tabular-nums lining-nums}
.t-pretty{text-wrap:pretty}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:var(--stack,1em)}

/* Eyebrow: label + short champagne rule. Bronze on light grounds, Champagne on Ink. */
.eyebrow{display:flex;align-items:center;gap:.875rem;color:var(--label);font-family:var(--ff-t);font-size:calc(var(--fs-label)*var(--script));line-height:var(--lh-label);font-weight:500;letter-spacing:var(--track-label);text-transform:var(--label-case)}
.eyebrow::before{content:"";flex:none;width:2rem;height:1px;background:var(--rule)}
.eyebrow--plain::before{display:none}
.eyebrow .num{color:var(--fg-2)}

/* 6 · Layout ------------------------------------------------------------ */
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.section{padding-block:var(--section)}
.section--top0{padding-block-start:0}
.section--end0{padding-block-end:0}
.section--short{padding-block:calc(var(--section)*.6)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}

/* Rail: the house layout. A narrow left rail for the eyebrow, content from column 4. */
.rail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-5)}
.rail__side{grid-column:1/span 3;padding-block-start:.55em}
.rail__main{grid-column:4/-1}
.rail__main--narrow{grid-column:4/span 7}
@media (max-width:56rem){.rail__side,.rail__main,.rail__main--narrow{grid-column:1/-1;padding:0}}

.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-5);align-items:end}
.section-head__title{grid-column:1/span 8}
.section-head__aside{grid-column:9/-1;justify-self:end}
.section-head .eyebrow{grid-column:1/-1}
@media (max-width:56rem){.section-head__title,.section-head__aside{grid-column:1/-1;justify-self:start}}

/* Split: media and text side by side. --flip mirrors it. */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-7);align-items:center}
.split__media{grid-column:1/span 6;grid-row:1}
.split__body{grid-column:8/span 5;grid-row:1}
.split--flip .split__media{grid-column:7/span 6}
.split--flip .split__body{grid-column:1/span 5}
.split--wide .split__media{grid-column:1/span 7}
.split--wide .split__body{grid-column:9/span 4}
.split--wide.split--flip .split__media{grid-column:6/span 7}
.split--wide.split--flip .split__body{grid-column:1/span 4}
.split--portrait .split__media{grid-column:1/span 5}
.split--portrait .split__body{grid-column:7/span 5}
.split--portrait.split--flip .split__media{grid-column:8/span 5}
.split--portrait.split--flip .split__body{grid-column:2/span 5}
.split--top{align-items:start}
@media (max-width:56rem){.split>.split__media,.split>.split__body{grid-column:1/-1!important;grid-row:auto!important}
  .split--portrait>.split__media{max-width:28rem}}

/* Spacing helpers and small layouts */
.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}.mt-8{margin-top:var(--sp-8)}.mt-9{margin-top:var(--sp-9)}.mt-10{margin-top:var(--sp-10)}
.section--strip{padding-block:clamp(2rem,4vw,3.5rem) 0}
.stack-section>*+*{margin-top:var(--section)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) var(--col-gap)}
@media (max-width:56rem){.cols-2{grid-template-columns:1fr}}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-5) var(--sp-7)}
.more.mt-6,.btn.mt-6,.btn.mt-7{display:inline-flex}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}

/* 7 · Header & menu ---------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;color:var(--ink);transition:background-color var(--t-med) var(--ease),color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--hdr-top);transition:height var(--t-med) var(--ease)}
.brand{display:block;flex:none;color:var(--ink);text-decoration:none}
.brand svg{height:auto}
.brand__lockup{width:var(--logo-w);animation:fade-in var(--t-med) var(--ease)}
.brand__mono{display:none;width:auto;height:var(--mono-h)!important}
.site-header[data-state="compact"] .brand__lockup{display:none}
.site-header[data-state="compact"] .brand__mono{display:block;animation:fade-in var(--t-med) var(--ease)}
.site-header[data-state="compact"]{background:rgba(247,245,240,.94);-webkit-backdrop-filter:saturate(1.1) blur(14px);backdrop-filter:saturate(1.1) blur(14px);box-shadow:0 1px 0 var(--line-on-light)}
.site-header[data-state="compact"] .site-header__bar{height:var(--hdr-compact)}
body[data-hero="dark"] .site-header[data-state="top"]{color:var(--porcelain);--nav-rule:var(--champagne)}
body[data-hero="dark"] .site-header[data-state="top"] .brand{color:var(--champagne)}
.nav{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.5rem)}
.nav__list{display:flex;gap:clamp(1.25rem,2.4vw,2.5rem)}
.nav a{position:relative;display:block;padding-block:.75rem;color:inherit;text-decoration:none;font-family:var(--ff-t);font-size:calc(.75rem*var(--script));line-height:1;font-weight:500;letter-spacing:var(--track-ui);text-transform:var(--label-case)}
.nav__list a::after{content:"";position:absolute;inset-inline:0;bottom:.25rem;height:1px;background:var(--nav-rule,currentColor);transform:scaleX(0);transform-origin:var(--from,left);transition:transform var(--t-med) var(--ease)}
[dir="rtl"]{--from:right}
.nav__list a:hover::after,.nav__list a[aria-current="page"]::after{transform:scaleX(1)}
.nav__lang{padding-inline-start:clamp(1.25rem,2.4vw,2.5rem)!important;border-inline-start:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.nav__lang:hover{opacity:.75}
.menu-btn{display:none;align-items:center;gap:.875rem;background:none;border:0;padding:.75rem 0;cursor:pointer;color:inherit;font-family:var(--ff-t);font-size:calc(.75rem*var(--script));font-weight:500;letter-spacing:var(--track-ui);text-transform:var(--label-case)}
.menu-btn__icon{width:1.75rem;height:.5625rem;border-block:1px solid currentColor}
@media (max-width:69.99rem){.nav{display:none}.menu-btn{display:inline-flex}}

.menu{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;overflow-y:auto;opacity:0;transition:opacity var(--t-med) var(--ease)}
.menu.is-open{opacity:1}
.menu__bar{display:flex;align-items:center;justify-content:space-between;min-height:var(--hdr-top)}
.menu .brand{color:var(--champagne)}
.menu__close{background:none;border:0;cursor:pointer;color:var(--porcelain);padding:.75rem 0;font-family:var(--ff-t);font-size:calc(.75rem*var(--script));font-weight:500;letter-spacing:var(--track-ui);text-transform:var(--label-case);display:inline-flex;gap:.875rem;align-items:center}
.menu__close::before{content:"";width:1.25rem;height:1.25rem;background:linear-gradient(45deg,transparent calc(50% - .5px),currentColor calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),currentColor calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}
.menu__nav{padding-block:var(--sp-7)}
.menu__nav li{border-bottom:1px solid var(--line)}
.menu__nav li:first-child{border-top:1px solid var(--line)}
.menu__nav a{display:flex;align-items:baseline;gap:1.25rem;padding-block:1rem;text-decoration:none;color:var(--porcelain)}
.menu__nav a .t-label{color:var(--champagne);min-width:1.75rem}
.menu__nav a[aria-current="page"] .t-h1{font-style:var(--italic)}
.menu__foot{margin-top:auto;padding-block:var(--sp-6) var(--sp-7);display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-7);color:var(--mist)}
.menu__foot a{color:var(--porcelain)}

/* 8 · Actions ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.875rem;min-height:3.25rem;padding:0 1.875rem;border:1px solid var(--btn-bd,currentColor);background:transparent;color:var(--fg);cursor:pointer;text-decoration:none;
  font-family:var(--ff-t);font-size:calc(.75rem*var(--script));line-height:1;font-weight:500;letter-spacing:var(--track-ui);text-transform:var(--label-case);
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.g-ink .btn{--btn-bd:rgba(247,245,240,.45)}
.btn--solid{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn--solid:hover{background:transparent;color:var(--fg)}
.btn .icon{width:1.1rem;transition:transform var(--t-med) var(--ease)}
.btn:hover .icon{transform:translateX(.25rem)}
[dir="rtl"] .icon--arrow{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .icon--arrow{transform:scaleX(-1) translateX(.25rem)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5) var(--sp-6)}

/* "More" link: a champagne rule that lengthens on hover */
.more{display:inline-flex;align-items:center;gap:.875rem;padding-block:.5rem;color:var(--fg);text-decoration:none;font-family:var(--ff-t);font-size:calc(.75rem*var(--script));line-height:1.2;font-weight:500;letter-spacing:var(--track-ui);text-transform:var(--label-case)}
.more::before{content:"";flex:none;width:2rem;height:1px;background:var(--rule);transition:width var(--t-med) var(--ease)}
.more:hover::before{width:3.5rem}

/* Text link inside copy: underline in Bronze (light) or Champagne (Ink) */
.link,.prose a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--label);transition:text-decoration-color var(--t-fast)}
.link:hover,.prose a:hover{text-decoration-color:currentColor}

.crumbs{display:flex;flex-wrap:wrap;gap:.5rem .75rem;color:var(--fg-2)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.crumbs li+li::before{content:"/";margin-inline-end:.75rem;opacity:.6}

/* 9 · Heroes ------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero__media{position:absolute!important;inset:0;z-index:-2;aspect-ratio:auto!important}
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,27,45,.55) 0%,rgba(15,27,45,0) 28%),
             linear-gradient(90deg,rgba(15,27,45,.88) 0%,rgba(15,27,45,.62) 40%,rgba(15,27,45,.14) 75%,rgba(15,27,45,.04) 100%),
             linear-gradient(0deg,rgba(15,27,45,.72) 0%,rgba(15,27,45,0) 42%)}
[dir="rtl"] .hero__scrim{background:linear-gradient(180deg,rgba(15,27,45,.55) 0%,rgba(15,27,45,0) 28%),
             linear-gradient(270deg,rgba(15,27,45,.88) 0%,rgba(15,27,45,.62) 40%,rgba(15,27,45,.14) 75%,rgba(15,27,45,.04) 100%),
             linear-gradient(0deg,rgba(15,27,45,.72) 0%,rgba(15,27,45,0) 42%)}
.hero--home{min-height:max(40rem,100svh);display:flex;flex-direction:column;justify-content:flex-end}
.hero__inner{padding-block:calc(var(--hdr-top) + var(--sp-8)) var(--sp-9)}
.hero__content{max-width:48rem}
.hero__title{margin-top:var(--sp-5)}
.hero__lead{margin-top:var(--sp-6);max-width:33rem;color:var(--fg-2)}
.hero .actions{margin-top:var(--sp-7)}
.hero__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding-block:var(--sp-5);border-top:1px solid var(--line);color:var(--fg-2)}
.scroll-cue{display:inline-flex;align-items:center;gap:.875rem}
.scroll-cue::after{content:"";width:1px;height:2.25rem;background:linear-gradient(var(--champagne),transparent);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.hero--page{min-height:clamp(34rem,82svh,52rem);display:flex;flex-direction:column;justify-content:flex-end;padding-block:calc(var(--hdr-top) + var(--sp-7)) clamp(3.5rem,7vw,6.5rem)}
.hero--page .hero__content{max-width:56rem}
.hero--image{min-height:clamp(36rem,92svh,58rem)}
.hero--full{min-height:100svh}
.hero--light{padding-block:calc(var(--hdr-top) + var(--sp-8)) var(--sp-9)}
.hero .crumbs{margin-bottom:var(--sp-6)}

/* 10 · Components --------------------------------------------------------- */
/* Sector strip: the six sectors, as on the approved Route B homepage */
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.strip__item{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(15rem,23vw,21rem);padding:var(--sp-5) var(--sp-5) var(--sp-6);background:var(--bg);color:var(--fg);text-decoration:none;
  transition:flex-grow .8s var(--ease),color var(--t-med) var(--ease)}
.strip__num{color:var(--fg-2);transition:color var(--t-med) var(--ease)}
.strip__name{margin-top:auto;font-family:var(--ff-d);font-size:calc(clamp(1.375rem,.6rem + 1.1vw,1.625rem)*var(--script));line-height:1.1;letter-spacing:var(--track-d);white-space:nowrap}
/* Hover reveal: the sector's picture rises behind an Ink scrim, the column widens, the others step back */
.strip__media{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .7s var(--ease);background:var(--ink)}
.strip__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.6s var(--ease)}
.strip__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,27,45,.92) 0%,rgba(15,27,45,.45) 48%,rgba(15,27,45,.2) 100%)}
.strip__item:is(:hover,:focus-visible){color:var(--porcelain)}
.strip__item:is(:hover,:focus-visible) .strip__media{opacity:1}
.strip__item:is(:hover,:focus-visible) .strip__media img{transform:scale(1)}
.strip__item:is(:hover,:focus-visible) .strip__num{color:var(--champagne)}
.strip__item:is(:hover,:focus-visible) .strip__desc{color:var(--mist)}
.strip__item:is(:hover,:focus-visible) .strip__arrow{color:var(--champagne)}
.strip:hover .strip__item:not(:hover) .strip__name{color:var(--fg-2)}
.strip:hover .strip__item:not(:hover) .strip__name,.strip__name{transition:color var(--t-med) var(--ease)}
@media (min-width:64.01rem) and (hover:hover){
  .strip{display:flex}
  .strip__item{flex:1 1 0;min-width:0}
  .strip__item:is(:hover,:focus-visible){flex-grow:1.5}
}
.strip__desc{margin-top:.5rem;color:var(--fg-2);transition:color var(--t-med) var(--ease);font-size:calc(var(--fs-caption)*var(--script));line-height:var(--lh-caption)}
@media (min-width:40.01rem){.strip__desc{min-height:calc(2em*var(--lh-caption))}}  /* two lines kept for every descriptor, so the names align */
.strip__arrow{position:absolute;inset-block-start:var(--sp-5);inset-inline-end:var(--sp-5);width:1.1rem;opacity:0;transform:translateX(-.4rem);transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease);color:var(--label)}
[dir="rtl"] .strip__arrow{transform:scaleX(-1) translateX(-.4rem)}
.strip__item:is(:hover,:focus-visible) .strip__arrow{opacity:1;transform:none}
[dir="rtl"] .strip__item:is(:hover,:focus-visible) .strip__arrow{transform:scaleX(-1)}
.strip--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:64rem){.strip,.strip--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:40rem){
  .strip,.strip--5{grid-template-columns:1fr}
  .strip__item{display:grid;grid-template-columns:2.25rem 1fr auto;align-items:baseline;column-gap:var(--sp-3);min-height:0;padding:var(--sp-5) 0;background:transparent}
  .strip__media{display:none}
  .strip__item:is(:hover,:focus-visible){color:var(--fg)}
  .strip__name{white-space:normal}
  .strip{background:transparent;gap:0}
  .strip__item+.strip__item{border-top:1px solid var(--line)}
  .strip__name{margin-top:0;grid-column:2}
  .strip__desc{grid-column:2;margin-top:.25rem}
  .strip__arrow{position:static;opacity:1;transform:none;grid-column:3;grid-row:1}
}

/* Numbered points: pillars, services, commitments */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8) var(--col-gap)}
.point{border-top:1px solid var(--line);padding-top:var(--sp-5)}
.point__num{color:var(--label)}
.point__title{margin-top:var(--sp-6)}
.point__text{margin-top:var(--sp-3);color:var(--fg-2);max-width:26rem}
.points--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:56rem){.points{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.points,.points--2{grid-template-columns:1fr;gap:var(--sp-7)}}

/* Steps: large Bodoni numerals */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-8) var(--col-gap)}
.step{border-top:1px solid var(--line);padding-top:var(--sp-5)}
.step__num{display:block;font-family:var(--ff-d);font-size:calc(var(--fs-display)*var(--script));line-height:1;color:var(--fg);font-variant-numeric:lining-nums}
.step__title{margin-top:var(--sp-6)}
.step__text{margin-top:var(--sp-3);color:var(--fg-2)}
@media (max-width:64rem){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.steps{grid-template-columns:1fr;gap:var(--sp-7)}}

/* Tick list with the open hexagon from the monogram */
.ticks{border-top:1px solid var(--line)}
.ticks li{position:relative;padding-block:.9rem;padding-inline-start:1.75rem;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:calc(.9rem + .38em);width:.75rem;height:.875rem;background:var(--label);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M7.24 1.45L10.06 3.17M11.30 5.37L11.30 8.63M10.06 10.83L7.24 12.55M4.76 12.55L1.94 10.83M0.70 8.63L0.70 5.37M1.94 3.17L4.76 1.45' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M7.24 1.45L10.06 3.17M11.30 5.37L11.30 8.63M10.06 10.83L7.24 12.55M4.76 12.55L1.94 10.83M0.70 8.63L0.70 5.37M1.94 3.17L4.76 1.45' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}

/* Quote band: full-bleed image, text on the calm lower part */
.band{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(28rem,60vw,48rem);display:flex;align-items:flex-end}
.band__media{position:absolute!important;inset:0;z-index:-2;aspect-ratio:auto!important}
.band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(15,27,45,.86) 0%,rgba(15,27,45,.35) 48%,rgba(15,27,45,0) 75%)}
.band__inner{padding-block:var(--sp-9)}
.band__quote{max-width:52rem;margin-top:var(--sp-5)}
.band__note{margin-top:var(--sp-5);max-width:34rem;color:var(--fg-2)}

/* Statement */
.statement{max-width:62rem}
.statement+.statement-body{margin-top:var(--sp-7)}
.statement-body{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-5);align-items:end}
.statement-body>p{grid-column:1/span 5;color:var(--fg-2)}
.statement-body>.more{grid-column:7/-1;justify-self:start}
@media (max-width:56rem){.statement-body>p,.statement-body>.more{grid-column:1/-1}}

/* Cards: insights */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8) var(--col-gap)}
.card{display:block;color:inherit;text-decoration:none}
.card__meta{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-top:var(--sp-5);color:var(--label)}
.card__meta .sep{color:var(--fg-2)}
.card__title{margin-top:var(--sp-3);transition:color var(--t-fast)}
.card__text{margin-top:var(--sp-3);color:var(--fg-2)}
.card:hover .card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--label)}
.card:hover .media img{transform:scale(1.03)}
@media (max-width:64rem){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.cards{grid-template-columns:1fr}}
.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-6);align-items:end;color:inherit;text-decoration:none}
.feature .media{grid-column:1/span 8}
.feature__body{grid-column:9/-1}
.feature:hover .media img{transform:scale(1.02)}
.feature:hover .card__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--label)}
@media (max-width:56rem){.feature .media,.feature__body{grid-column:1/-1}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 1.1rem;border:1px solid var(--line);color:var(--fg);text-decoration:none;font-family:var(--ff-t);font-size:calc(.6875rem*var(--script));font-weight:500;letter-spacing:var(--track-ui);text-transform:var(--label-case);transition:border-color var(--t-fast),background-color var(--t-fast),color var(--t-fast)}
.chips a:hover{border-color:var(--fg)}
.chips a[aria-current="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* People */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-9) var(--col-gap)}
.person__name{margin-top:var(--sp-6)}
.person__role{margin-top:var(--sp-3);color:var(--label)}
.person__bio{margin-top:var(--sp-5);color:var(--fg-2);max-width:30rem}
@media (max-width:40rem){.people{grid-template-columns:1fr}}

/* Definition rows: contact details, facts */
.details{display:grid;gap:0;border-top:1px solid var(--line)}
.details>div{display:grid;grid-template-columns:minmax(7rem,1fr) 2fr;gap:var(--sp-4);padding-block:1.1rem;border-bottom:1px solid var(--line)}
.details dt{color:var(--fg-2)}
.details dd a{text-decoration:none}
.details dd a:hover{text-decoration:underline;text-underline-offset:.2em}

/* Appointment band: closes most pages. Ink + Seal. */
.appointment__inner{padding-block:var(--section)}
.appointment__title{margin-top:var(--sp-5)}
.appointment__text{margin-top:var(--sp-5);max-width:32rem;color:var(--fg-2)}
.appointment .actions{margin-top:var(--sp-7)}
.appointment__mail{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.2rem}
.appointment__mail:hover{border-bottom-color:var(--fg)}

/* 11 · Media frames & placeholders ---------------------------------------
   Every image is a <figure class="media"> with a named slot. Until the file
   exists in assets/media/, the frame shows a brand placeholder; with review
   notes on, it also shows the slot's brief from the Higgsfield shot list. */
.media{position:relative;overflow:hidden;aspect-ratio:var(--ratio,3/2);background:var(--sand) url("../brand/lattice-sand.svg") 0 0/53.856px 95.296px;isolation:isolate}
.g-ink .media,.media--dark{background:radial-gradient(120% 90% at 72% 18%,rgba(88,99,114,.42),rgba(15,27,45,0) 62%),var(--ink) url("../brand/lattice-ink.svg") 0 0/53.856px 95.296px}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);opacity:0;transition:opacity 1s var(--ease),transform 1.4s var(--ease)}
.media.is-loaded>img,.media.is-playing>video{opacity:1}
.no-js .media>img{opacity:1}
.media__ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(.75rem,2vw,1.5rem);transition:opacity .6s var(--ease)}
.media.is-loaded .media__ph{opacity:0}
.media__tag{display:none;flex-direction:column;gap:.35rem;max-width:min(100%,24rem);padding:.75rem .9rem;background:rgba(247,245,240,.92);color:var(--ink);border-inline-start:2px solid var(--bronze);font-family:"Work Sans",sans-serif;font-size:.75rem;line-height:1.45;direction:ltr;text-align:left}
.g-ink .media__tag,.media--dark .media__tag{background:rgba(15,27,45,.86);color:var(--porcelain);border-color:var(--champagne)}
.show-notes .media:not(.is-loaded) .media__tag{display:flex}
.media__kind{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.625rem;color:var(--bronze)}
.g-ink .media__kind,.media--dark .media__kind{color:var(--champagne)}
.media__id{font-family:ui-monospace,Consolas,monospace;font-size:.75rem}
.media__spec{opacity:.75}
.media__brief{opacity:.9}
.hero .media__ph,.band .media__ph{align-items:flex-start;justify-content:flex-end;padding-block-start:calc(var(--hdr-top) + 1rem)}
.band .media__ph{padding-block-start:var(--sp-6)}
.g-sand .media:not(.media--dark){background:var(--porcelain) url("../brand/lattice-porcelain.svg") 0 0/53.856px 95.296px}
.figure>figcaption{margin-top:var(--sp-3);color:var(--fg-2);font-size:calc(var(--fs-caption)*var(--script));line-height:var(--lh-caption)}

/* 12 · Forms ------------------------------------------------------------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) var(--col-gap)}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--full{grid-column:1/-1}
.field__label{color:var(--fg-2)}
.field__label .req{color:var(--label)}
.field__hint{color:var(--fg-2);font-size:calc(var(--fs-caption)*var(--script))}
.input,.select,.textarea{display:block;width:100%;appearance:none;-webkit-appearance:none;border:0;border-radius:0;background:transparent;border-bottom:1px solid rgba(15,27,45,.35);padding:.55rem 0 .7rem;color:var(--fg);font-family:var(--ff-t);font-size:calc(1.0625rem*var(--script));line-height:1.5;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.g-ink .input,.g-ink .select,.g-ink .textarea{border-bottom-color:rgba(247,245,240,.4)}
.input::placeholder,.textarea::placeholder{color:var(--fg-2);opacity:.7}
.input:hover,.select:hover,.textarea:hover{border-bottom-color:var(--fg)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-bottom-color:var(--fg);box-shadow:0 1px 0 0 var(--fg)}
.select{padding-inline-end:2rem;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F1B2D' stroke-width='1.2'/%3E%3C/svg%3E") right .25rem center/.8rem no-repeat}
[dir="rtl"] .select{background-position:left .25rem center}
.textarea{min-height:9rem;resize:vertical}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-bottom-color:var(--error);box-shadow:0 1px 0 0 var(--error)}
.field__error{display:none;color:var(--error);font-size:calc(var(--fs-caption)*var(--script))}
.field.is-invalid .field__error{display:block}
.choice{display:flex;align-items:flex-start;gap:.875rem;cursor:pointer;color:var(--fg)}
.choice input{appearance:none;-webkit-appearance:none;flex:none;width:1.125rem;height:1.125rem;margin-top:.2em;border:1px solid rgba(15,27,45,.55);background:transparent;display:grid;place-content:center;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast)}
.choice input[type="radio"]{border-radius:50%}
.choice input:hover{border-color:var(--fg)}
.choice input:checked{background:var(--fg);border-color:var(--fg)}
.choice input[type="checkbox"]:checked::after{content:"";width:.55rem;height:.3rem;border-inline-start:1.5px solid var(--bg);border-bottom:1.5px solid var(--bg);transform:translateY(-.08rem) rotate(-45deg)}
.choice input[type="radio"]:checked{box-shadow:inset 0 0 0 3px var(--bg)}
.field.is-invalid .choice input{border-color:var(--error)}
.choices{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);padding-top:.4rem}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5)}
.form-done{border-top:1px solid var(--line);padding-top:var(--sp-6)}
@media (max-width:40rem){.form{grid-template-columns:1fr}}

.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-9)}
.contact__form{grid-column:1/span 7}
.contact__aside{grid-column:9/-1}
@media (max-width:56rem){.contact__form,.contact__aside{grid-column:1/-1}}

/* 13 · Article ------------------------------------------------------------ */
.article{display:grid;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [wide-start] minmax(0,10rem) [content-start] min(var(--measure),100% - 2*var(--gutter)) [content-end] minmax(0,10rem) [wide-end] minmax(var(--gutter),1fr) [full-end]}
.article>*{grid-column:content}
.article>.wide{grid-column:wide}
.article>.full{grid-column:full}
.article>.article__head{grid-column:wide;padding-block:calc(var(--hdr-top) + var(--sp-7)) var(--sp-8)}
.article__head>*{max-width:52rem}
.article__foot{margin-top:var(--sp-8)!important;padding-top:var(--sp-5);border-top:1px solid var(--line)}
.article__title{margin-top:var(--sp-5)}
.article__stand{margin-top:var(--sp-6);color:var(--fg-2)}
.article__meta{margin-top:var(--sp-7);padding-block:var(--sp-4);border-block:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;color:var(--fg-2)}
.prose{font-size:calc(var(--fs-prose)*var(--script));line-height:var(--lh-prose)}
.prose>*+*{margin-top:1.3em}
.prose>h2{margin-top:2.2em}
.prose>h2+*{margin-top:.9em}
.prose blockquote{margin-block:2em;padding-inline-start:1.5rem;border-inline-start:1px solid var(--rule)}
.prose blockquote p{font-family:var(--ff-d);font-style:var(--italic);font-size:calc(var(--fs-quote)*var(--script));line-height:var(--lh-quote)}
.prose figure{margin-block:2.5em}
.prose ul li{position:relative;padding-inline-start:1.75rem}
.prose ul li+li{margin-top:.6em}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:.9rem;height:1px;background:var(--rule)}
.prose--dropcap>p:first-of-type::first-letter{float:left;font-family:var(--ff-d);font-size:4.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--fg)}
[lang="ar"] .prose--dropcap>p:first-of-type::first-letter{float:none;font-size:inherit;padding:0}

/* 14 · Footer -------------------------------------------------------------- */
.site-footer{padding-block:var(--sp-9) var(--sp-6);border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--sp-8)}
.footer__brand{grid-column:1/span 4}
.footer__brand a{display:inline-block;color:var(--champagne)}
.footer__brand svg{width:8.5rem;height:auto}
.footer__line{margin-top:var(--sp-6);color:var(--fg-2)}
.footer__col{grid-column:span 2}
.footer__col--wide{grid-column:span 3}
.footer__col:first-of-type{grid-column-start:6}
.footer__head{color:var(--label);margin-bottom:var(--sp-5)}
.footer__col li+li{margin-top:.6rem}
.footer__col a{text-decoration:none;color:var(--fg)}
.footer__col a:hover{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.25em}
.footer__col address,.footer__col p{color:var(--fg-2)}
.footer__col p+p{margin-top:.6rem}
.footer__bottom{margin-top:var(--sp-9);padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-4) var(--sp-7);color:var(--fg-2);font-size:calc(var(--fs-caption)*var(--script))}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:var(--fg)}
@media (max-width:64rem){.footer__brand{grid-column:1/-1}.footer__col,.footer__col--wide,.footer__col:first-of-type{grid-column:auto/span 4}}
@media (max-width:40rem){.footer__col,.footer__col--wide,.footer__col:first-of-type{grid-column:1/-1}}

/* 15 · Motion -------------------------------------------------------------- */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.js [data-reveal]{opacity:0;transform:translateY(1.25rem);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* 16 · Review aids (prototype only) -----------------------------------------
   .ph-note  reviewer notes: hidden unless notes are on (press N, or the switch)
   .ph-text  placeholder copy that must be replaced before launch (always visible) */
.ph-note{display:none}
.show-notes .ph-note{display:inline-block;margin-inline-start:.5rem;padding:.15rem .45rem;border:1px dashed currentColor;color:var(--bronze);background:rgba(247,245,240,.92);font:500 .6875rem/1.35 "Work Sans",sans-serif;letter-spacing:.02em;text-transform:none;font-style:normal;vertical-align:.15em;white-space:normal;direction:ltr;unicode-bidi:isolate}
.show-notes .g-ink .ph-note{color:var(--champagne);background:rgba(15,27,45,.9)}
.show-notes .ph-note--block{display:block;margin:var(--sp-4) 0 0;max-width:30rem}
.ph-text{color:var(--fg-2);text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.2em}
.review-toggle{position:fixed;inset-block-end:1rem;inset-inline-start:1rem;z-index:80;display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .85rem;border:1px solid rgba(247,245,240,.25);background:var(--ink);color:var(--porcelain);cursor:pointer;font:500 .625rem/1 "Work Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 6px 24px rgba(15,27,45,.25);opacity:.9}
.review-toggle:hover{opacity:1}
.menu.is-open~.review-toggle{display:none}
.review-toggle__dot{width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--champagne)}
.show-notes .review-toggle__dot{background:var(--champagne)}
.review-toggle kbd{font:inherit;opacity:.6}
.grid-overlay{position:fixed;inset:0;z-index:79;pointer-events:none;display:none}
.show-grid .grid-overlay{display:block}
.grid-overlay .wrap{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.grid-overlay span{background:rgba(201,179,138,.10);border-inline:1px solid rgba(201,179,138,.4)}

.shot .hero--home,.shot .hero--full{min-height:56.25rem}.shot .hero--page{min-height:46rem}.shot .hero--image{min-height:50rem}
.shot [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
@media (max-width:40rem){.shot .hero--home{min-height:50rem}.shot .hero--page{min-height:36rem}.shot .hero--image{min-height:40rem}}
.shot .scroll-cue::after,.shot .brand svg{animation:none}
.shot .media>img,.shot .media__ph{transition:none}
.shot .media>img{opacity:1;color:transparent;font-size:0}  /* screenshots: show pictures without waiting for load events */

/* 17 · Print --------------------------------------------------------------- */
@media print{
  .site-header,.menu,.review-toggle,.grid-overlay,.skip-link,.scroll-cue,video{display:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero,.band,.g-ink{background:#fff!important;color:#000!important}
}
