/* ==========================================================================
   Perry Offer, value creation operator
   Build specification v1.0, section 2 tokens.
   Container driven. No media queries anywhere in this file, by contract.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self hosted. Archivo and Newsreader only.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/newsreader-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/newsreader-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;src:url("../fonts/newsreader-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url("../fonts/newsreader-italic-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url("../fonts/newsreader-italic-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url("../fonts/newsreader-italic-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}

/* --------------------------------------------------------------------------
   Tokens. Specification section 2. Nothing outside this block is a colour.
   -------------------------------------------------------------------------- */
:root{
  /* Colour */
  --ink:#0B0B0C;
  --red:#C8102E;
  --red-pressed:#93061F;
  --red-on-dark:#FF8A9B;
  --red-on-dark-soft:#FFA0AE;
  --red-on-dark-strong:#FF6B80;
  --white:#ffffff;
  --navy-1:#1B4198;
  --navy-2:#15357E;
  --navy-3:#0C1E4A;
  --navy:linear-gradient(158deg,var(--navy-1) 0%,var(--navy-2) 46%,var(--navy-3) 100%);
  --grey-700:#3A424C;
  --grey-500:#5C6570;
  /* Greys on dark grounds */
  --on-dark-1:#E2E7EE;
  --on-dark-2:#D3D9E1;
  --on-dark-3:#C9D1DB;
  --on-dark-4:#C4D0E0;
  --on-dark-5:#C0CBDD;
  --on-dark-6:#B9C6D8;
  --on-dark-7:#B9C1CC;
  --on-dark-8:#9FB0C6;
  --on-dark-9:#98A4B4;
  --on-dark-10:#9AA5B3;
  --on-dark-11:#8E99A7;
  --on-dark-12:#8FA3BF;
  /* Hairlines */
  --line:#E5E7EA;
  --line-strong:#DCDFE3;
  --line-dot:#C9CDD3;
  --line-dark-1:rgba(255,255,255,.14);
  --line-dark-2:rgba(255,255,255,.18);
  --line-dark-3:rgba(255,255,255,.22);
  --line-dark-4:rgba(255,255,255,.30);
  --off-white:#F6F7F8;

  /* Space and shape */
  --container:1280px;
  --gutter:clamp(20px,2.4vw,32px);
  --pad-section:clamp(48px,7vw,88px);
  --pad-compact:clamp(38px,5vw,62px);
  --pad-strip:clamp(26px,3.4vw,38px);
  --r-card:2px;
  --r-pill:100px;
  --r-chevron:5px;

  /* Shadow, only two exist */
  --shadow-card:0 18px 38px rgba(11,11,12,.10);
  --shadow-card-navy:0 18px 38px rgba(12,30,74,.26);
  --shadow-nav:0 8px 24px rgba(11,11,12,.08);
  --shadow-btn:0 16px 34px rgba(0,0,0,.4);

  /* Motion */
  --move:cubic-bezier(.2,.7,.2,1);
  --t-interaction:.25s;
  --t-move:.3s;
  --t-nav:.4s;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:Archivo,Helvetica,Arial,sans-serif;font-size:16px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0;}
img{display:block;max-width:100%;height:auto;}
a{color:var(--red);text-decoration:none;}
a:hover{color:var(--red-pressed);}
button{font-family:inherit;}
:where(button,a,[tabindex]):focus-visible{outline:2px solid var(--red);outline-offset:3px;}
h1,h2,h3,h4{margin:0;font-weight:400;}
::selection{background:var(--red);color:var(--white);}

.page{width:100%;overflow-x:clip;}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Anchor targets clear the fixed header */
[id]{scroll-margin-top:92px;}

/* Serif display face, used for every heading and every figure */
.dsp{font-family:Newsreader,Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.025em;}
.dsp-light{font-family:Newsreader,Georgia,'Times New Roman',serif;font-weight:300;letter-spacing:-.03em;}
.num{font-variant-numeric:tabular-nums;}

/* Extends a small control to a 44px tap target without moving the layout */
.hit{position:relative;}
.hit::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}

/* Section header pattern, specification section 3 */
.pill{
  display:inline-block;background:var(--red);color:var(--white);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  padding:8px 16px;border-radius:var(--r-pill);
}
.pill-ink{background:var(--ink);}
.label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--grey-500);}
.label-dark{color:var(--on-dark-5);}
.instruction{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-500);font-weight:700;}
.h2{font-size:clamp(28px,4.2vw,44px);line-height:1.06;text-wrap:balance;}
.h2-light{font-size:clamp(28px,4.4vw,48px);line-height:1.04;text-wrap:balance;}
.h2-sm{font-size:clamp(24px,3.4vw,38px);line-height:1.06;text-wrap:balance;}
.head-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;}

@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

/* --------------------------------------------------------------------------
   01 Scroll progress and sticky header
   -------------------------------------------------------------------------- */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--red);z-index:60;width:0;transition:width .08s linear;}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background-color:rgba(11,11,12,0);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-dark-1);box-shadow:none;
  transition:background-color var(--t-nav) ease,border-color var(--t-nav) ease,box-shadow var(--t-nav) ease;
}
.nav.is-scrolled{background-color:rgba(255,255,255,.94);border-bottom-color:var(--line);box-shadow:var(--shadow-nav);}
/* The row holds the wordmark, the two anchors and the call to action on one
   line at every width it physically can. Below that it wraps rather than clip
   the call to action, which is the page's primary conversion route. */
.nav{container-type:inline-size;container-name:navbar;}
.nav__inner{max-width:var(--container);margin:0 auto;padding:clamp(10px,1.6vw,15px) var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(12px,2.4vw,24px);}
.nav__mark{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--white);transition:color var(--t-nav) ease;}
.nav.is-scrolled .nav__mark{color:var(--ink);}
.nav__mark:hover{color:inherit;}
.nav__word{font-size:clamp(15px,2.4vw,17px);font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;}
.nav__dot{width:5px;height:5px;background:var(--red);border-radius:50%;display:inline-block;flex:none;}
.nav__tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.62);transition:color var(--t-nav) ease;}
.nav.is-scrolled .nav__tag{color:var(--grey-500);}
.nav__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(12px,2.4vw,24px);}
.nav__cta{flex:none;}
.nav__link{white-space:nowrap;}
.nav__cta{white-space:nowrap;}
/* Container driven, not a viewport breakpoint: the descriptor beside the
   wordmark yields its space to the navigation before anything else does. */
@container navbar (max-width: 739px){
  .nav__tag{display:none;}
}
.nav__link{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--white);transition:color var(--t-move) ease;}
.nav.is-scrolled .nav__link{color:var(--ink);}
.nav__link:hover,.nav.is-scrolled .nav__link:hover{color:var(--red);}
.nav__cta{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--white);background:var(--red);padding:11px 18px;border-radius:var(--r-card);
  transition:background var(--t-interaction) ease,transform var(--t-interaction) ease;
}
.nav__cta:hover{background:var(--ink);color:var(--white);transform:translateY(-1px);}

/* --------------------------------------------------------------------------
   Buttons, specification section 5
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-card);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:17px 28px;
}
.btn__chev{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border:1px solid currentColor;border-radius:var(--r-chevron);font-size:12px;line-height:1;padding-left:1px;
}
.btn-primary{background:var(--red);color:var(--white);transition:background var(--t-interaction) ease,color var(--t-interaction) ease,transform var(--t-interaction) ease,box-shadow var(--t-interaction) ease;}
.btn-primary:hover{background:var(--white);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-btn);}
.btn-secondary{color:var(--white);border:1px solid var(--line-dark-4);transition:border-color var(--t-interaction) ease,background var(--t-interaction) ease;}
.btn-secondary:hover{border-color:var(--white);background:rgba(255,255,255,.1);color:var(--white);}

/* Static chips. Hover styling only, never pressable. */
.chip{
  display:inline-block;font-size:12px;font-weight:600;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--white);padding:7px 13px;border-radius:var(--r-pill);
}
.chip-strip{
  font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 16px;color:var(--grey-700);background:none;
  transition:border-color var(--t-interaction) ease,color var(--t-interaction) ease;
}
.chip-strip:hover{border-color:var(--red);color:var(--red);}
.chip-dark{
  font-size:13px;font-weight:600;color:var(--white);border:1px solid var(--line-dark-4);
  border-radius:var(--r-pill);padding:6px 12px;
  transition:border-color var(--t-interaction) ease,background-color var(--t-interaction) ease;
}
.chip-dark:hover{border-color:var(--red);background-color:rgba(200,16,46,.22);}
.chip-title{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--on-dark-1);
  border:1px solid rgba(255,255,255,.26);padding:8px 14px;border-radius:var(--r-pill);
  transition:border-color var(--t-interaction) ease,color var(--t-interaction) ease;
}
.chip-title:hover{border-color:var(--red);color:var(--white);}

/* Selector tabs. Click only. Active state is the only solid fill in its row. */
.tab{cursor:pointer;font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:var(--r-pill);transition:background-color var(--t-interaction) ease,color var(--t-interaction) ease,border-color var(--t-interaction) ease,transform var(--t-interaction) ease;}
.tab:hover{transform:translateY(-2px);}
.tab-dark{border:1px solid var(--line-dark-4);background-color:rgba(255,255,255,.08);color:var(--white);}
.tab-dark[aria-selected="true"]{background-color:var(--red);border-color:var(--red);color:var(--white);}
.tab-light{padding:11px 18px;border:1px solid var(--line-strong);background-color:var(--white);color:var(--grey-700);}
.tab-light[aria-selected="true"]{background-color:var(--ink);border-color:var(--ink);color:var(--white);}

/* --------------------------------------------------------------------------
   02 Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:min(86svh,830px);display:flex;align-items:center;background:var(--ink);overflow:hidden;}
.hero__glow{position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 20%,rgba(21,53,126,.55) 0%,rgba(11,11,12,0) 60%);}
.hero__inner{
  position:relative;width:100%;max-width:var(--container);margin:0 auto;
  padding:96px var(--gutter) clamp(44px,6vw,76px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4vw,56px);align-items:center;
}
.hero__pill{margin-bottom:clamp(18px,2.6vw,24px);animation:rise .9s .1s var(--move) both;}
.hero__h1{
  font-size:clamp(36px,5.2vw,62px);line-height:1.03;letter-spacing:-.03em;
  margin:0 0 clamp(18px,2.6vw,26px);color:var(--white);max-width:16ch;text-wrap:balance;
  animation:rise 1s .2s var(--move) both;
}
.hero__h1 em{font-style:italic;color:var(--red);}
.hero__lead{font-size:clamp(15px,2vw,17px);line-height:1.62;color:var(--on-dark-3);margin:0 0 18px;max-width:52ch;text-wrap:pretty;animation:rise 1s .34s var(--move) both;}
.hero__sub{font-size:clamp(15px,2vw,17px);line-height:1.62;color:var(--on-dark-11);margin:0 0 clamp(22px,3vw,30px);max-width:52ch;text-wrap:pretty;animation:rise 1s .42s var(--move) both;}
.hero__titles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;animation:rise 1s .52s var(--move) both;}
.hero__interim{font-size:12.5px;line-height:1.5;letter-spacing:.01em;color:var(--on-dark-11);margin:0 0 clamp(22px,3vw,30px);animation:rise 1s .56s var(--move) both;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;animation:rise 1s .62s var(--move) both;}
.hero__specialisms{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin-top:clamp(26px,3.6vw,34px);padding-top:clamp(18px,2.6vw,24px);
  border-top:1px solid rgba(255,255,255,.14);animation:rise 1s .72s var(--move) both;
}
.hero__specialisms-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--on-dark-5);}
.hero__specialisms-list{display:flex;flex-wrap:wrap;gap:8px;}
.hero__figure{position:relative;justify-self:end;width:100%;max-width:360px;margin:0;}
.hero__block{position:absolute;inset:auto -12px -12px 28px;height:66%;background:var(--red);border-radius:var(--r-card);}
.hero__square{position:absolute;left:-12px;top:26px;width:56px;height:56px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-card);}
.hero__portrait{
  position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:34% 24%;
  border-radius:var(--r-card);filter:contrast(1.05) saturate(.97);
  animation:rise 1.1s .35s var(--move) both;
}

/* --------------------------------------------------------------------------
   03 Evidence
   -------------------------------------------------------------------------- */
.section-white{background:var(--white);border-bottom:1px solid var(--line);}
.section-pad{padding-block:var(--pad-section);}
.section-pad-compact{padding-block:var(--pad-compact);}

.evidence__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-template-rows:repeat(6,auto);gap:clamp(14px,1.6vw,20px);}
.ev{
  grid-row:span 6;display:grid;grid-template-rows:subgrid;gap:18px;
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r-card);
  transition:transform var(--t-move) var(--move),box-shadow var(--t-move) ease,border-color var(--t-move) ease;
}
.ev-navy{color:var(--white);background:var(--navy);}
.ev-navy:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-navy);}
.ev-white{border:1px solid var(--line);background:var(--white);}
.ev-white:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:var(--ink);}
.ev__cat{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700;}
/* Specification section 11: red as text on navy must be the lighter red. At
   10px the lightest band of the navy gradient needs the softer of the two. */
.ev-navy .ev__cat{color:var(--red-on-dark-soft);}
.ev__name{font-size:clamp(24px,2.8vw,30px);line-height:1.1;letter-spacing:-.02em;}
.ev__meta{font-size:12.5px;color:var(--grey-500);margin-top:8px;}
.ev-navy .ev__meta{color:var(--on-dark-6);}
.ev__rows{grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:0;align-content:start;border-top:1px solid var(--line);}
.ev-navy .ev__rows{border-top-color:var(--line-dark-3);}
.ev__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;padding:13px 0;border-bottom:1px solid var(--line);}
.ev-navy .ev__row{border-bottom-color:var(--line-dark-1);}
.ev__row:last-child{border-bottom:0;}
.ev__k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-500);font-weight:700;}
.ev-navy .ev__k{color:var(--on-dark-8);}
.ev__v{font-size:24px;letter-spacing:-.02em;text-align:right;white-space:nowrap;margin-left:auto;}
.ev__note{font-size:14px;line-height:1.55;color:var(--grey-500);margin:0;}
.ev-navy .ev__note{color:var(--on-dark-2);}

/* Four or more cards turn the row into a carousel. Three keep the grid exactly
   as it is, which is why every rule here is behind :has(). The cards stay grid
   items so grid-template-rows: subgrid still lines their rows up across the
   row; a flex scroller would lose that. Exactly three stay in view and the rest
   are reached with the controls. The grid scrolls, not the page. */
.evidence__grid:has(> .ev:nth-child(4)){
  grid-template-columns:none;grid-auto-flow:column;
  /* A definite width, not a minmax: a minmax track shrinks to fit the scroll
     box, which put all four cards nearly in view at 300px each. Exactly three
     fill the row and the rest are scrolled to. */
  grid-auto-columns:max(300px,calc((100% - 2 * clamp(14px,1.6vw,20px)) / 3));
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  /* Room for the lift on hover, which would otherwise be clipped by the scroll box. */
  padding:6px 0;margin:-6px 0;
}
.evidence__grid:has(> .ev:nth-child(4))::-webkit-scrollbar{display:none;}
.evidence__grid:has(> .ev:nth-child(4)) > .ev{scroll-snap-align:start;}
.evidence__grid:focus-visible{outline:2px solid var(--red);outline-offset:4px;}
.ev-nav[hidden]{display:none;}
.ev-nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:clamp(18px,2.2vw,24px);}
.ev-nav__count{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-500);margin:0;min-width:7ch;text-align:center;}
.ev-nav__btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);
  font-size:20px;line-height:1;cursor:pointer;
  transition:border-color var(--t-move) ease,background var(--t-move) ease,color var(--t-move) ease;
}
.ev-nav__btn:hover:not(:disabled){border-color:var(--ink);}
.ev-nav__btn:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.ev-nav__btn:disabled{opacity:.35;cursor:default;}

/* --------------------------------------------------------------------------
   04 Situations
   -------------------------------------------------------------------------- */
.situations{
  background-color:var(--off-white);
  background-image:linear-gradient(rgba(246,247,248,.94),rgba(246,247,248,.97)),url("../img/city-aerial.jpg");
  background-size:cover;background-position:50% 30%;border-bottom:1px solid var(--line);
}
.sit__list{border-top:1px solid var(--line-strong);}
.sit{
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,40px);
  padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid var(--line-strong);
  transition:padding-left var(--t-move) var(--move),background var(--t-interaction) ease;
}
.sit:hover{padding-left:12px;background:rgba(255,255,255,.6);}
.sit__n{flex:0 0 auto;font-size:clamp(24px,2.8vw,32px);line-height:.9;color:var(--red);min-width:56px;}
.sit__body{flex:1 1 300px;min-width:0;}
.sit__title{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px;font-family:inherit;}
.sit__copy{font-size:14.5px;line-height:1.6;color:var(--grey-500);max-width:48ch;}
.sit__side{flex:1 1 260px;min-width:0;display:grid;gap:9px;align-content:start;}
.sit__chips{display:flex;flex-wrap:wrap;gap:7px;}

/* --------------------------------------------------------------------------
   05 Operating system
   -------------------------------------------------------------------------- */
.section-ink{background:var(--ink);color:var(--white);}
.chain__head{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-end;margin-bottom:clamp(30px,4vw,44px);}
.chain__head h2{flex:1 1 380px;max-width:18ch;margin:0;}
.chain__head p{flex:1 1 340px;font-size:15.5px;line-height:1.62;color:var(--on-dark-7);max-width:46ch;}
.chain{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
  background:var(--ink);border-top:1px solid var(--line-dark-2);border-bottom:1px solid var(--line-dark-2);
}
.chain__card{background:var(--ink);padding:clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px);display:grid;gap:14px;align-content:start;border-right:1px solid var(--line-dark-2);transition:background var(--t-move) ease;}
.chain__card:last-child{border-right:0;}
.chain__card:hover{background:var(--navy-2);}
.chain__top{display:flex;align-items:center;gap:10px;}
.chain__n{font-size:22px;line-height:1;color:var(--red-on-dark);}
.chain__rule{flex:1 1 auto;height:1px;background:var(--line-dark-3);}
.chain__title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--white);min-height:2lh;}
.chain__body{font-size:13.5px;line-height:1.5;color:var(--on-dark-9);}
.chain__close{font-size:clamp(19px,2.6vw,28px);line-height:1.32;letter-spacing:-.02em;color:var(--white);margin:clamp(28px,4vw,42px) 0 0;max-width:44ch;}

/* --------------------------------------------------------------------------
   06 and 12 White separator strips
   -------------------------------------------------------------------------- */
.strip__inner{max-width:var(--container);margin:0 auto;padding:var(--pad-strip) var(--gutter);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;}
.strip__chips{display:flex;flex-wrap:wrap;gap:10px 14px;}
.strip-sectors .strip__inner{justify-content:flex-start;gap:10px 14px;}

/* --------------------------------------------------------------------------
   07 Flagship cases
   -------------------------------------------------------------------------- */
.cases{background:var(--navy);color:var(--white);}
.cases__cols{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);align-items:flex-start;}
.cases__nav{flex:1 1 300px;min-width:0;display:grid;gap:0;align-content:start;}
.cases__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.cases__rail{display:grid;}

.stage{
  text-align:left;cursor:pointer;background:none;border:0;border-top:1px solid var(--line-dark-2);
  padding:0;display:flex;gap:16px;align-items:stretch;opacity:.82;transition:opacity var(--t-move) ease;
}
.stage[aria-selected="true"]{opacity:1;}
.stage__seg{flex:none;width:3px;background-color:rgba(255,255,255,.22);transition:background-color var(--t-move) ease;}
.stage.is-past .stage__seg{background-color:rgba(255,255,255,.75);}
.stage[aria-selected="true"] .stage__seg{background-color:var(--red);}
.stage__main{flex:1 1 auto;min-width:0;padding:12px 0;display:grid;gap:5px;}
.stage__top{display:flex;align-items:center;gap:10px;}
.stage__n{font-size:15px;color:rgba(255,255,255,.68);transition:color var(--t-move) ease;}
.stage[aria-selected="true"] .stage__n{color:var(--red-on-dark);}
.stage__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--on-dark-5);transition:color var(--t-move) ease;}
.stage[aria-selected="true"] .stage__label{color:var(--white);}
.stage__hint{font-size:13.5px;line-height:1.45;color:var(--on-dark-5);}
.stage__chev{
  flex:none;align-self:center;width:26px;height:26px;margin-right:2px;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:rgba(255,255,255,.6);transform:rotate(0deg);
  transition:transform .35s var(--move),color var(--t-move) ease,border-color var(--t-move) ease;
}
.stage[aria-selected="true"] .stage__chev{transform:rotate(90deg);color:var(--red-on-dark);border-color:var(--red-on-dark);}

.cases__panelwrap{flex:2 1 440px;min-width:0;border:1px solid var(--line-dark-3);border-radius:3px;padding:clamp(20px,2.4vw,30px);background:rgba(11,11,12,.24);display:grid;}
/* Every stage of every case occupies the same grid cell, so the panel height
   is fixed by the tallest and never jumps when the reader changes stage or case. */
.case-panel{grid-area:1/1;display:grid;gap:16px;align-content:start;visibility:hidden;}
.case-panel.is-active{visibility:visible;}
.case-panel__head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;}
.case-panel__name{font-size:clamp(24px,3vw,32px);line-height:1.08;}
.case-panel__meta{font-size:12.5px;color:var(--on-dark-5);margin-top:8px;}
.case-panel__stagelabel{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-on-dark-soft);font-weight:700;}
.case-panel__bar{height:2px;background:var(--line-dark-2);border-radius:2px;}
.case-panel__bar span{display:block;height:100%;background:var(--red);border-radius:2px;transition:width .5s var(--move);}
.case-panel__body{font-size:clamp(18px,2.1vw,23px);line-height:1.3;letter-spacing:-.02em;max-width:44ch;}
.case-panel__points{display:grid;gap:0;border-top:1px solid var(--line-dark-2);}
.case-panel__points li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:14px;line-height:1.5;}
.case-panel__points li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;background:var(--red);}
.case-panel__metrics{display:flex;flex-wrap:wrap;gap:22px;padding-top:4px;}
.metric{display:grid;gap:6px;}
.metric__v{display:flex;align-items:baseline;gap:7px;font-size:clamp(22px,2.6vw,28px);line-height:1;letter-spacing:-.025em;color:var(--white);}
.metric__arrow{color:var(--red-on-dark);font-size:.7em;}
.metric__k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-5);font-weight:700;}
.case-panel[data-stage="3"] .metric__v{color:var(--red-on-dark-strong);}

/* --------------------------------------------------------------------------
   08 Portfolio interventions
   -------------------------------------------------------------------------- */
.rail{display:flex;gap:0;overflow-x:auto;margin-bottom:clamp(26px,3.4vw,36px);padding-bottom:4px;}
.mark{flex:1 0 104px;cursor:pointer;background:none;border:0;padding:0 0 4px;display:grid;gap:12px;justify-items:stretch;text-align:center;}
.mark__line{display:flex;align-items:center;height:18px;}
.mark__seg{flex:1 1 auto;height:1px;background-color:var(--line);}
.mark:first-child .mark__seg-l,.mark:last-child .mark__seg-r{background-color:transparent;}
.mark__hub{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.mark__dot{
  width:11px;height:11px;border-radius:50%;background-color:var(--white);border:2px solid var(--line-dot);
  box-shadow:0 0 0 0 rgba(200,16,46,0);transform:scale(1);
  transition:background-color var(--t-move) ease,border-color var(--t-move) ease,box-shadow var(--t-move) ease,transform var(--t-move) var(--move);
}
.mark[aria-selected="true"] .mark__dot{background-color:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(200,16,46,.16);transform:scale(1.35);}
.mark__year{font-size:15px;letter-spacing:-.01em;color:var(--grey-500);transition:color var(--t-move) ease;}
.mark[aria-selected="true"] .mark__year{color:var(--ink);}
.mark__sector{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--grey-500);transition:color var(--t-move) ease;}
.mark[aria-selected="true"] .mark__sector{color:var(--red);}

.tile-stack{display:grid;border-top:1px solid var(--line);padding-top:clamp(22px,3vw,32px);}
.tile{grid-area:1/1;display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,48px);align-items:flex-start;visibility:hidden;}
.tile.is-active{visibility:visible;}
.tile__left{flex:1 1 300px;min-width:0;}
.tile__co{font-size:clamp(24px,3vw,32px);line-height:1.08;}
.tile__meta{font-size:12.5px;color:var(--grey-500);margin-top:8px;}
.tile__fig{display:flex;align-items:baseline;gap:10px;margin-top:22px;}
.tile__fig b{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1;letter-spacing:-.03em;color:var(--red);font-variant-numeric:tabular-nums;}
.tile__unit{font-size:13px;color:var(--grey-500);max-width:28ch;}
.tile__rows{flex:1.4 1 360px;min-width:0;display:grid;gap:0;}
.tile__row{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 0;border-bottom:1px solid var(--line);}
.tile__row:last-child{border-bottom:0;}
.tile__rk{flex:0 0 110px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-500);font-weight:700;padding-top:3px;}
.tile__rv{flex:1 1 220px;font-size:14.5px;line-height:1.55;}
.tile__rv-muted{color:var(--grey-500);}

/* --------------------------------------------------------------------------
   09 and 11 Photo halves
   -------------------------------------------------------------------------- */
.split{display:flex;flex-wrap:wrap;align-items:stretch;}
.split__photo{flex:1 1 300px;min-width:0;position:relative;min-height:260px;}
.split__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split__scrim{position:absolute;inset:0;}
.split__caption{position:absolute;left:clamp(20px,3vw,34px);bottom:clamp(22px,3vw,32px);right:clamp(20px,3vw,34px);}
.split__copy{
  flex:1.3 1 440px;min-width:0;
  padding:clamp(26px,3.2vw,40px) max(clamp(24px,3vw,40px),calc((100vw - 1280px) / 2 + clamp(20px,2.4vw,32px))) clamp(26px,3.2vw,40px) clamp(24px,2.8vw,36px);
  display:grid;gap:clamp(14px,1.8vw,20px);align-content:center;
}
.capital__line{font-size:clamp(22px,2.8vw,32px);line-height:1.16;letter-spacing:-.025em;max-width:18ch;color:var(--white);margin:0;text-wrap:balance;}
.capital__group{padding:12px 0;border-top:1px solid var(--line-dark-3);}
.capital__theme{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-on-dark-soft);font-weight:700;margin-bottom:9px;}
.capital__chips{display:flex;flex-wrap:wrap;gap:8px 10px;}
.capital__note{font-size:13px;line-height:1.5;color:var(--on-dark-5);margin:9px 0 0;max-width:56ch;}
.capital__intro{font-size:14.5px;line-height:1.62;color:var(--on-dark-2);max-width:54ch;margin:0;text-wrap:pretty;}

/* --------------------------------------------------------------------------
   10 Mandates
   -------------------------------------------------------------------------- */
.mandate__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3.2vw,34px);}
.mandate-stack{display:grid;border-top:1px solid var(--line);padding-top:clamp(22px,3vw,32px);}
.mandate-panel{grid-area:1/1;display:flex;flex-wrap:wrap;gap:clamp(24px,3.4vw,56px);align-items:flex-start;visibility:hidden;}
.mandate-panel.is-active{visibility:visible;}
.mandate-panel__note{flex:1 1 280px;min-width:0;font-size:15px;line-height:1.62;color:var(--grey-500);max-width:42ch;}
.mandate-panel__roles{flex:1.4 1 380px;min-width:0;display:grid;gap:0;}
.mandate-panel__roles li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);transition:padding-left var(--t-move) var(--move);}
.mandate-panel__roles li:hover{padding-left:10px;}
.mandate-panel__roles li::before{content:"";flex:none;width:7px;height:7px;background:var(--red);}
.mandate-panel__role{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.15;letter-spacing:-.02em;}

/* --------------------------------------------------------------------------
   11 Perry at a glance
   -------------------------------------------------------------------------- */
.glance .split{min-height:clamp(460px,52vw,580px);}
.glance .split__photo{min-height:280px;}
.glance__photolabel{position:absolute;left:clamp(20px,3vw,32px);bottom:clamp(20px,3vw,30px);display:flex;align-items:center;gap:10px;}
.glance__photolabel i{width:22px;height:2px;background:var(--red);display:block;}
.glance__photolabel span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-1);font-weight:700;}
.glance__copy{flex:1.35 1 460px;padding-block:clamp(32px,4.2vw,52px);gap:clamp(20px,2.6vw,28px);}
.glance__list{display:grid;gap:0;border-top:1px solid var(--line-dark-3);}
.glance__row{border-bottom:1px solid var(--line-dark-1);}
.glance__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:13px 0;padding-left:0;
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;
  transition:padding-left var(--t-move) var(--move);
}
.glance__btn[aria-expanded="true"]{padding-left:10px;}
/* The master CV. It only ever reaches the page once glance:cv.url holds an
   asset; until then the renderer drops it entirely rather than ship a dead
   link, which is why there is no "coming soon" state to style. */
.glance__cv{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:12px 22px;border-radius:var(--r-card);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);border:1px solid var(--line-dark-4);
  transition:border-color var(--t-interaction) ease,background var(--t-interaction) ease;
}
.glance__cv:hover{border-color:var(--white);background:rgba(255,255,255,.1);}
.glance__cv:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px;}
.glance__k{flex:0 1 148px;min-width:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-5);font-weight:700;transition:color var(--t-move) ease;}
.glance__btn[aria-expanded="true"] .glance__k{color:var(--red-on-dark-soft);}
.glance__v{flex:1 1 120px;min-width:0;font-size:15px;line-height:1.4;color:var(--white);}
.glance__chev{
  flex:none;margin-left:auto;width:24px;height:24px;background-color:var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;line-height:1;color:var(--white);
  transform:rotate(0deg);transition:transform .35s var(--move),background-color var(--t-move) ease;
}
.glance__btn[aria-expanded="true"] .glance__chev{transform:rotate(90deg);background-color:var(--red-pressed);}
.glance__detail{overflow:hidden;max-height:0;opacity:0;transition:max-height var(--t-nav) var(--move),opacity var(--t-move) ease;}
.glance__detail.is-open{max-height:220px;opacity:1;}
.glance__detail p{font-size:13.5px;line-height:1.55;color:var(--on-dark-5);margin:0 0 15px;padding-left:0;max-width:56ch;transition:padding-left var(--t-move) var(--move);}
.glance__detail.is-open p{padding-left:10px;}

/* --------------------------------------------------------------------------
   13 Track record
   -------------------------------------------------------------------------- */
.track{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(11,11,12,.72),rgba(11,11,12,.88)),url("../img/city-aerial.jpg");
  background-size:cover;background-position:50% 35%;color:var(--white);
}
.track__afford{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.track__affordchev{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid rgba(255,255,255,.45);border-radius:var(--r-chevron);font-size:11px;line-height:1;padding-left:1px;}
.track__affordlabel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-7);font-weight:700;}
.era__tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:0;border-top:1px solid var(--line-dark-3);border-bottom:1px solid var(--line-dark-3);margin-bottom:clamp(26px,3.5vw,40px);}
/* One column per era once there is room for them, which is the arrangement the
   row is meant to have. Below that the columns keep their floor and wrap onto a
   second line instead: six eras share the desktop composition from 720px up,
   and forcing them into one row there would leave 113px slivers. At the five
   eras the site carries today this resolves to the same five equal columns
   auto-fit already produces, so nothing moves. */
@media (min-width:1040px){
  .era__tabs:has(> .era:nth-child(4)):not(:has(> .era:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr));}
  .era__tabs:has(> .era:nth-child(5)):not(:has(> .era:nth-child(6))){grid-template-columns:repeat(5,minmax(0,1fr));}
  .era__tabs:has(> .era:nth-child(6)):not(:has(> .era:nth-child(7))){grid-template-columns:repeat(6,minmax(0,1fr));}
}
.era{cursor:pointer;background-color:rgba(255,255,255,.04);color:var(--white);border:0;border-left:1px solid var(--line-dark-3);padding:18px 16px;display:grid;gap:6px;text-align:left;transition:background-color var(--t-move) ease,transform var(--t-move) ease;}
.era:first-child{border-left:0;}
.era:hover{background-color:rgba(255,255,255,.16);transform:translateY(-2px);}
.era[aria-selected="true"]{background-color:var(--red);}
.era__years{font-size:19px;letter-spacing:-.01em;}
.era__label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--on-dark-7);}
.era[aria-selected="true"] .era__label{color:rgba(255,255,255,.85);}
.era__arrow{display:inline-block;font-size:13px;letter-spacing:0;transform:rotate(0deg);transition:transform var(--t-move) ease;}
.era[aria-selected="true"] .era__arrow{transform:rotate(90deg);}
.era-stack{display:grid;}
.era-panel{grid-area:1/1;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-start;visibility:hidden;}
.era-panel.is-active{visibility:visible;}
.era-panel__left{flex:1 1 360px;min-width:0;}
.era-panel__title{font-size:clamp(24px,3.2vw,34px);line-height:1.1;letter-spacing:-.02em;margin-bottom:10px;}
.era-panel__meta{font-size:12.5px;color:var(--red-on-dark);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;}
.era-panel__blurb{font-size:15.5px;line-height:1.62;color:var(--on-dark-2);max-width:48ch;}
.era-panel__points{flex:1 1 360px;min-width:0;display:grid;gap:0;}
.era-panel__points li{font-size:15px;line-height:1.5;padding:14px 0;border-top:1px solid var(--line-dark-3);color:var(--white);}

/* --------------------------------------------------------------------------
   14 Quote strip
   -------------------------------------------------------------------------- */
.quote{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.quote__inner{max-width:var(--container);margin:0 auto;padding:clamp(38px,5.5vw,64px) var(--gutter) clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center;}
.quote__open{flex:0 0 auto;font-size:clamp(60px,9vw,120px);line-height:.7;color:var(--red);align-self:flex-start;}
.quote__text{flex:1 1 420px;font-size:clamp(28px,4.4vw,52px);line-height:1.1;letter-spacing:-.03em;max-width:20ch;color:var(--ink);}
.quote__text em{font-style:normal;color:var(--red);}
.quote__close{color:var(--ink);font-size:1.9em;line-height:0;vertical-align:-.28em;}
.quote__side{flex:0 1 240px;display:grid;gap:16px;border-left:1px solid var(--line);padding-left:clamp(24px,3vw,40px);margin-left:clamp(8px,3vw,44px);}
.quote__side span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);}

/* --------------------------------------------------------------------------
   15 Contact
   -------------------------------------------------------------------------- */
.contact{position:relative;background:var(--ink);color:var(--white);}
.contact__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;}
.contact__scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.76) 45%,rgba(11,11,12,.48) 100%);}
.contact__scrim-b{position:absolute;inset:0;background:linear-gradient(rgba(11,11,12,0) 34%,rgba(11,11,12,.50) 70%,rgba(11,11,12,.86) 100%);}
.contact__inner{position:relative;max-width:var(--container);margin:0 auto;padding:clamp(52px,8vw,100px) var(--gutter);}
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,5vw,64px);align-items:end;}
.contact__h2{font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.03em;margin:0 0 20px;max-width:16ch;text-wrap:balance;}
.contact__lead{font-size:16px;line-height:1.6;color:var(--on-dark-4);max-width:52ch;}
.contact__actions{display:grid;gap:14px;justify-items:start;}
.btn-contact{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:16px 28px;border-radius:var(--r-card);letter-spacing:normal;text-transform:none;}
.contact__links{display:flex;flex-wrap:wrap;gap:20px;padding-top:4px;}
.contact__link{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-4);font-size:14px;font-weight:500;padding:4px 0;border-bottom:1px solid var(--line-dark-4);transition:color var(--t-interaction) ease,border-color var(--t-interaction) ease;}
.contact__link:hover{color:var(--white);border-color:var(--white);}
.contact__foot{margin-top:clamp(36px,6vw,64px);padding-top:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--on-dark-5);}

/* --------------------------------------------------------------------------
   Reduced motion, specification section 2. Global and mandatory.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;}
}

/* --------------------------------------------------------------------------
   Arrow notation, specification section 8. The arrow itself renders red.
   -------------------------------------------------------------------------- */
.ev__arrow{color:var(--red);}
.ev__arrow-dark{color:var(--red-on-dark);}

/* Skip link, visible the moment it takes focus. */
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:70;background:var(--red);color:var(--white);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:15px 22px;border-radius:var(--r-card);
  transition:top var(--t-interaction) ease;}
.skip:focus{top:12px;color:var(--white);}

/* --------------------------------------------------------------------------
   The mobile build is a sibling composition in the same document. It is
   hidden here and revealed by assets/css/mobile.css, which the page loads
   only below 720px through the media attribute on its link. That attribute
   is the single place the breakpoint is declared.
   -------------------------------------------------------------------------- */
.m-page,.m-bar{display:none;}