@font-face{
  font-family:Vogue;
  src:url('assets/Vogue.ttf') format('truetype');
  font-display:swap;
}

/* ---------------------------------------------------------------------------
   Tokens

   The design is drawn on a 1920x10125 Figma frame. Every measurement below is
   written in that frame's pixels and multiplied by --u, "one artboard pixel",
   so the whole page scales as a single proportional system. At 1920px wide
   --u resolves to 1px and the page matches the artboard one-to-one.
--------------------------------------------------------------------------- */
:root{
  --u:clamp(.72px, .0520833vw, 1.1px);
  /* The mobile artboard is 402 wide; --m is its pixel, capped so the scale
     stops growing once the viewport is wider than a phone. */
  --m:min(calc(100vw / 402), 1.25px);

  --cream:#E3DFD9;
  --ink:#424153;
  --navy:#171C4B;
  --slate:#3E4160;
  --slate-hi:#575873;
  --mauve-hi:#7E576A;
  --mauve:#6C3F57;
  --plum:#53163E;
  --plum-lt:#833869;
  --deep:#481023;
  --rule:#A7A5A5;
  --field:#EEECE8;

  --display:Vogue,Didot,'Times New Roman',serif;
  --text:'Times New Roman',Times,serif;

  --fs-h1:min(calc(80*var(--u)), 8.2vw);
  --fs-h2:min(calc(65*var(--u)), 7vw);
  --fs-eyebrow:calc(35*var(--u));
  --fs-lead:calc(25*var(--u));
  --fs-title:calc(30*var(--u));
  --fs-small:calc(22*var(--u));

  --lh-lead:calc(29/25);
  --lh-title:calc(34/30);
  --lh-small:calc(25/22);

  /* Figma strokes use stroke-dasharray="5"; these reproduce it in CSS. */
  --dash-on:calc(5*var(--u));
  --dash-step:calc(10*var(--u));
  --dash-light:rgba(227,223,217,.6);

  /* The motion language carried over from campabalt2/3. */
  --ease:cubic-bezier(.16,1,.3,1);
  --panel-closed:#F5F2EE;
  --card-rest:#F9F8F7;
  --card-hover:#F1ECEF;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--plum-lt);outline-offset:4px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{
  position:fixed;top:10px;left:10px;z-index:100;
  background:#fff;color:var(--plum);padding:10px 14px;
  transform:translateY(-200%);
}
.skip:focus{transform:none}

.wrap{width:min(75%, calc(1440*var(--u)));margin-inline:auto}

section[id]{scroll-margin-top:calc(128*var(--u))}

/* ---------------------------------------------------------------------------
   Shared type
--------------------------------------------------------------------------- */
h1,h2{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  color:var(--navy);
  text-transform:uppercase;
}
h1{font-size:var(--fs-h1);line-height:calc(85/80)}
h1 .line{display:block}
h2{font-size:var(--fs-h2);line-height:calc(70/65)}
h3,h4{margin:0;font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title)}

.eyebrow{
  margin:0;
  font-size:var(--fs-eyebrow);
  line-height:calc(40/35);
  text-transform:uppercase;
  color:var(--plum);
}

.intro{
  margin-top:calc(31*var(--u));
  display:grid;
  grid-template-columns:minmax(0,783fr) minmax(0,585fr);
  column-gap:calc(72*var(--u));
}
.intro__copy p{margin:0}
.intro__copy p+p{margin-top:calc(29*var(--u))}
.intro__copy em{font-style:italic;color:var(--plum)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mauve);color:#F5F2EE;
  font-family:var(--display);font-size:var(--fs-title);
  text-transform:uppercase;text-decoration:none;
  border:0;cursor:pointer;
  transition:background .24s ease;
}
.btn:hover,.btn:focus-visible{background:var(--plum);color:var(--cream)}

.link{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.link:hover,.link:focus-visible{border-bottom-color:currentColor}

.rule-short{
  display:block;flex:0 0 auto;
  width:calc(220*var(--u));max-width:100%;height:calc(2*var(--u));
  background:var(--rule);
}
.rule-short--block{margin:calc(94*var(--u)) 0 0 auto}

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */
/* The mark holds the viewport on its own fixed layer, above the hero's
   background but below every section, so it can drift and dissolve on scroll
   without ever showing through the sections that follow. */
.hero-bg{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.hero-bg__mark{
  position:absolute;
  top:calc(165*var(--u));left:36.667%;
  width:60.833%;height:auto;
  opacity:.05;
  will-change:transform,opacity;
}

.hero{
  position:relative;
  min-height:100vh;
  padding-top:calc(130*var(--u));
  display:flex;flex-direction:column;
  background:var(--cream);
}
.hero>.wrap{position:relative;z-index:1}
.section{position:relative;z-index:1}

/* The bar is transparent over the hero — matching the artboard — and only
   takes a ground once the page has moved under it. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-block:calc(95*var(--u)) 0;
  transition:padding .45s var(--ease),background-color .45s var(--ease),
             box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);
}
.site-header.is-stuck{
  padding-block:calc(34*var(--u));
  background:rgba(227,223,217,.9);
  box-shadow:0 1px 0 rgba(167,165,165,.55);
}
@supports (backdrop-filter:blur(1px)){
  .site-header.is-stuck{
    background:rgba(227,223,217,.78);
    backdrop-filter:blur(16px) saturate(1.1);
  }
}
/* An open menu needs a solid ground whatever is behind it. */
.site-header.is-menu-open,
.site-header.is-menu-open.is-stuck{
  background:var(--cream);
  box-shadow:0 1px 0 rgba(167,165,165,.55);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(30*var(--u));
}
.logo{display:block;flex:0 0 auto;width:calc(333*var(--u))}
.logo img{width:100%;height:auto}

.nav{display:flex;gap:calc(37*var(--u))}
.nav a{
  position:relative;
  text-decoration:none;text-transform:uppercase;white-space:nowrap;
  font-size:var(--fs-lead);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:calc(-11*var(--u));
  height:1px;background:var(--rule);
  opacity:0;transition:opacity .22s ease;
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current]::after{opacity:1}

.nav-toggle{
  display:none;
  border:1px solid var(--plum);background:none;color:var(--plum);
  padding:8px 14px;cursor:pointer;text-transform:uppercase;
}

.hero__body{flex:1 1 auto;padding-top:calc(207*var(--u))}
.hero__copy{margin:calc(37*var(--u)) 0 0}
.btn--hero{
  margin-top:calc(86*var(--u));
  width:calc(708*var(--u));height:calc(82*var(--u));
}

.hero__foot{
  position:relative;
  margin-top:calc(73*var(--u));
  padding-top:calc(87*var(--u));
  padding-bottom:calc(90*var(--u));
  display:flex;gap:calc(72*var(--u));
}
.hero__foot::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:calc(2*var(--u));background:var(--rule);
  transform-origin:left;
}
.js-motion .hero__foot::before{transform:scaleX(0)}
.js-motion.motion-on .hero__foot::before{transform:scaleX(1);transition:transform 1.4s var(--ease) 820ms}

/* ---------------------------------------------------------------------------
   Section shells
--------------------------------------------------------------------------- */
.section{padding-block:calc(87*var(--u)) calc(95*var(--u))}
.section--light{background:#fff}
.section--cream{background:var(--cream)}
.section--slate{background:var(--slate)}
.section--mauve{background:var(--mauve)}

.section--slate,.section--mauve{color:var(--cream)}
.section--slate h2,.section--slate .eyebrow,
.section--mauve h2,.section--mauve .eyebrow{color:var(--cream)}

/* ---------------------------------------------------------------------------
   What we do — four stages (Concept 3)

   At rest a card shows its step and name against a large ghost numeral. On
   hover the text lifts to the top, the numeral gives way and the description
   appears — the two states drawn on the "Before 2.0" / "After 2.0" artboards.
--------------------------------------------------------------------------- */
.stages{
  margin:calc(71*var(--u)) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:calc(24*var(--u));row-gap:calc(26*var(--u));
}
.stage{
  position:relative;overflow:hidden;
  min-height:calc(299*var(--u));
  padding:calc(111*var(--u)) calc(46*var(--u)) calc(40*var(--u));
  color:var(--cream);
  transition:padding-top .6s var(--ease),translate .55s var(--ease),
             background-color .55s var(--ease),box-shadow .55s var(--ease);
}
.stage--slate{background:var(--slate)}
.stage--mauve{background:var(--mauve)}
/* The mark bar is the campabalt2/3 hover tell: it grows down the leading edge. */
.stage::before{
  content:'';position:absolute;left:0;top:0;
  width:calc(5*var(--u));height:0;
  background:var(--cream);
  transition:height .6s var(--ease);
}
/* The numeral from the artboard: Vogue 400 in a 383x299 box at the card's
   right edge, cream at 10%, clipped by the card. */
.stage__ghost{
  position:absolute;top:calc(5*var(--u));right:calc(-12*var(--u));
  width:calc(383*var(--u));
  font-family:var(--display);font-size:calc(400*var(--u));line-height:calc(361*var(--u));
  text-align:center;color:var(--cream);opacity:.1;
  pointer-events:none;user-select:none;
  transition:opacity .5s var(--ease),translate .7s var(--ease);
}
.stage__step,.stage__name{position:relative;transition:translate .55s var(--ease)}
.stage__step{margin:0;font-size:var(--fs-title);line-height:var(--lh-title);text-transform:uppercase}
.stage__name{margin:calc(9*var(--u)) 0 0;font-size:var(--fs-title);line-height:var(--lh-title);font-style:italic}
.stage__body{
  position:absolute;left:calc(46*var(--u));right:calc(46*var(--u));top:calc(147*var(--u));
  margin:0;max-width:calc(636*var(--u));
  font-size:var(--fs-small);line-height:var(--lh-small);
  opacity:0;translate:0 calc(12*var(--u));
  transition:opacity .5s var(--ease),translate .6s var(--ease);
}
/* Desktop only: on phones the deck owns the cards, and there is no bar, no
   padding shift and no reveal to make. */
@media (hover:hover) and (min-width:721px){
  .stage:hover{
    padding-top:calc(36*var(--u));
    box-shadow:0 calc(16*var(--u)) calc(36*var(--u)) rgba(23,28,75,.20);
  }
  .stage--slate:hover{background:#4A4D70}
  .stage--mauve:hover{background:#7E4A65}
  .stage:hover::before{height:100%}
  .stage:hover .stage__ghost{opacity:0;translate:calc(40*var(--u)) 0}
  .stage:hover .stage__body{opacity:1;translate:0 0;transition-delay:.12s}
}
/* Touch has no hover, so the card nearest the reading line takes the state. */
.stage.is-on{padding-top:calc(36*var(--u))}
.stage--slate.is-on{background:#4A4D70}
.stage--mauve.is-on{background:#7E4A65}
.stage.is-on::before{height:100%}
.stage.is-on .stage__ghost{opacity:0;translate:calc(40*var(--u)) 0}
.stage.is-on .stage__body{opacity:1;translate:0 0}

/* The artboard drops the case note; only the short rule remains. */
.deck + .rule-short--block{margin-top:calc(77*var(--u))}

/* ---------------------------------------------------------------------------
   Capabilities — expandable panels
--------------------------------------------------------------------------- */
.panels{
  margin-top:calc(99*var(--u));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:calc(24*var(--u));row-gap:calc(25*var(--u));
  align-items:start;
}
/* Closed is the resting state drawn on the "Before" artboard: a light panel
   118u tall. Opening switches to the "After" palette and 307u. */
.panel{
  min-height:calc(118*var(--u));
  background:var(--panel-closed);
  color:var(--navy);
  transition:background-color .55s var(--ease),color .55s var(--ease);
}
.panel--wide{grid-column:1/-1}
.panel--slate{--panel-open:var(--slate)}
.panel--mauve{--panel-open:var(--mauve)}
.panel[open]:not(.is-closing){
  min-height:calc(307*var(--u));
  background:var(--panel-open);
  color:var(--cream);
}
/* While the height is animating, min-height must not clamp it. The [open]
   qualifier is needed to out-weigh the open rule above. */
.panel[open].is-animating{min-height:0;overflow:hidden}

.panel summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(30*var(--u));
  padding:calc(43*var(--u)) calc(49*var(--u)) 0 calc(46*var(--u));
}
.panel summary::-webkit-details-marker{display:none}
.panel__title{font-size:var(--fs-title);line-height:var(--lh-title)}
.panel__toggle{
  flex:0 0 auto;
  width:calc(35*var(--u));height:calc(35*var(--u));
  overflow:visible;color:var(--mauve);
  transition:color .55s var(--ease),scale .55s var(--ease);
}
.panel__toggle circle{fill:none;stroke:currentColor;stroke-opacity:.45}
.panel__toggle line{
  stroke:currentColor;stroke-width:1;
  transition:opacity .35s var(--ease),transform .5s var(--ease);
}
.panel__toggle .bar-v{transform-origin:18.5px 18.5px}
/* The chevron is the phone toggle; the desktop keeps its plus. */
.panel__toggle .chev{display:none}
.panel summary:hover .panel__toggle{scale:1.08}
.panel[open]:not(.is-closing) .panel__toggle{color:var(--cream)}
.panel[open]:not(.is-closing) .panel__toggle .bar-v{opacity:0;transform:rotate(90deg)}

.panel__body{
  padding:calc(41*var(--u)) calc(46*var(--u)) calc(46*var(--u));
  font-size:var(--fs-small);line-height:var(--lh-small);
}
.panel__body::before{
  content:'';display:block;
  width:100%;max-width:calc(427*var(--u));height:calc(1.5*var(--u));
  margin-bottom:calc(35*var(--u));
  background-image:repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
}
.panel__body p{margin:0;max-width:calc(564*var(--u))}
.panel--wide .panel__body p{max-width:calc(958*var(--u))}


/* ---------------------------------------------------------------------------
   Capabilities — index + pinned reader ("Before 1" / "After 2" artboards)

   Six titles on the left, one card on the right. Pointing at a title repaints
   the card; nothing has to be clicked and the section never changes height.
--------------------------------------------------------------------------- */
.caps{
  margin-top:calc(71*var(--u));
  display:grid;grid-template-columns:635fr 708fr;
  column-gap:calc(97*var(--u));
  align-items:start;
}

.caps__index{margin:0;padding:0;list-style:none}
.caps__row + .caps__row{margin-top:calc(19*var(--u))}

.caps__item{
  position:relative;display:block;width:100%;
  min-height:calc(72*var(--u));
  padding:calc(19*var(--u)) calc(24*var(--u)) calc(19*var(--u)) calc(44*var(--u));
  text-align:left;border:0;background:transparent;cursor:pointer;
  transition:background-color .4s var(--ease);
}
.caps__tick{
  position:absolute;left:0;top:0;bottom:0;
  width:calc(3*var(--u));background:var(--slate);
  transform-origin:top;
  transition:background-color .4s var(--ease),transform .5s var(--ease);
}
.caps__name{
  display:block;
  font-size:var(--fs-title);line-height:var(--lh-title);
  color:var(--navy);
  transition:translate .45s var(--ease),color .4s var(--ease);
}
.caps__item[aria-current]{background:#F1EFE9}
.caps__item[aria-current] .caps__tick{background:var(--plum)}
.caps__item[aria-current] .caps__name{translate:calc(6*var(--u)) 0}
@media (hover:hover){
  .caps__item:hover .caps__name{translate:calc(6*var(--u)) 0}
}

/* Present for assistive tech and for narrow screens; the reader shows it on
   pointer layouts. */
.js-caps .caps__text{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.caps__text{
  margin:calc(10*var(--u)) 0 0 calc(44*var(--u));
  font-size:var(--fs-small);line-height:var(--lh-small);
}

.caps__reader{
  position:relative;display:none;
  min-height:calc(436*var(--u));
  padding:calc(88*var(--u)) calc(60*var(--u)) calc(120*var(--u)) calc(122*var(--u));
  background:var(--slate);color:var(--cream);
}
.js-caps .caps__reader{display:block}
.caps__title{
  margin:0;max-width:calc(420*var(--u));
  text-transform:uppercase;font-weight:400;
  font-size:var(--fs-title);line-height:var(--lh-title);
}
.caps__body{
  margin:calc(33*var(--u)) 0 0;max-width:calc(464*var(--u));
  font-size:var(--fs-small);line-height:var(--lh-small);
}
.caps__dots{
  position:absolute;left:calc(122*var(--u));bottom:calc(80*var(--u));
  display:flex;gap:calc(6*var(--u));
}
.caps__dots span{
  box-sizing:content-box;width:calc(37*var(--u));height:calc(4*var(--u));
  padding:calc(10*var(--u)) 0;background-clip:content-box;
  background-color:#4F506C;cursor:pointer;
  transition:background-color .45s var(--ease),transform .45s var(--ease);
}
.caps__dots span:hover{background-color:#8B8CA6}
.caps__dots span.is-on{background-color:var(--cream)}

/* The artboard closes the section with the wordmark cropped to the full bleed
   and sitting flush with the bottom edge. The 10% is baked into the SVG. */
#capabilities{position:relative;overflow:hidden;padding-bottom:calc(278*var(--u))}
.caps__ghost{
  position:absolute;z-index:0;
  left:0;right:0;bottom:0;
  width:100%;height:auto;
  pointer-events:none;
}


/* ---------------------------------------------------------------------------
   Capabilities variant switch

   Both capability treatments are built. <body data-caps="…"> picks one, and
   build-final.sh flips it, so either can be previewed from the same source.
--------------------------------------------------------------------------- */
body[data-caps="reader"] .panels,
body[data-caps="reader"] .caps-rule{display:none}
body[data-caps="accordion"] .caps,
body[data-caps="accordion"] .caps__ghost{display:none}
body[data-caps="accordion"] #capabilities{padding-bottom:calc(95*var(--u))}

/* ---------------------------------------------------------------------------
   AI orchestration — flow diagram and human gate
--------------------------------------------------------------------------- */
.flow{
  position:relative;
  margin-top:calc(94*var(--u));
  display:grid;
  grid-template-columns:342fr 207fr 342fr 207fr 342fr;
  row-gap:calc(47*var(--u));
}
.flow__col{
  min-width:0;
  display:grid;grid-template-rows:auto 1fr;row-gap:calc(47*var(--u));
}
.flow__col h3{text-transform:uppercase;color:var(--ink)}
.flow__col ul{
  margin:0;padding:0;list-style:none;
  display:grid;gap:calc(23*var(--u));align-content:start;
}
.flow__col li{
  position:relative;
  min-height:calc(73*var(--u));
  padding:calc(8*var(--u)) calc(12*var(--u));
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:var(--fs-small);line-height:var(--lh-small);
  border:calc(1*var(--u)) dashed;
  transition:opacity .35s var(--ease),border-color .35s var(--ease),
             background-color .35s var(--ease),translate .35s var(--ease);
}
/* Concept 3 strokes, drawn at 60%: grey 1.5 for sources, blue and plum 2 for
   processing and outputs. */
.flow__col--a li{background:#F9F7F5;border-width:calc(1.5*var(--u));border-color:rgba(167,165,165,.6)}
.flow__col--b li{background:#F4F5F6;border-width:calc(2*var(--u));border-color:rgba(99,102,140,.6)}
.flow__col--c li{background:#F9F4F6;border-width:calc(2*var(--u));border-color:rgba(146,79,123,.6)}

/* The generated wire layer sits under the boxes and carries the signals. */
.flow__wires{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.flow__col,.flow__link{position:relative;z-index:1}
.wire{
  fill:none;stroke:var(--rule);
  stroke-width:calc(1.5*var(--u));
  stroke-dasharray:calc(5*var(--u));
  opacity:.6;
  transition:opacity .35s var(--ease),stroke .35s var(--ease),stroke-width .35s var(--ease);
}
.wire.is-hot{stroke:var(--plum-lt);opacity:1;stroke-width:calc(2.2*var(--u))}
.wire.is-dim{opacity:.14}
.pulse-dot{fill:var(--plum-lt)}
.pulse-glow{fill:rgba(131,56,105,.18)}

.flow__col li.is-lit{border-color:var(--plum-lt);translate:0 calc(-2*var(--u))}
.flow__col li.is-dim{opacity:.38}
.flow__col li.is-dim.is-ping{animation:none}
.flow__col li.is-ping{animation:node-ping .9s ease-out}
.flow__gate.is-ping{animation:gate-ping .7s ease-out}
.flow__gate{transition:opacity .35s var(--ease)}
.flow__gate.is-dim{opacity:.38}
@keyframes node-ping{
  from{box-shadow:0 0 0 0 rgba(131,56,105,.45)}
  to{box-shadow:0 0 0 calc(12*var(--u)) rgba(131,56,105,0)}
}
@keyframes gate-ping{
  from{box-shadow:0 0 0 0 rgba(131,56,105,.6)}
  to{box-shadow:0 0 0 calc(16*var(--u)) rgba(131,56,105,0)}
}

/* The panning caption belongs to the phone layout only. */
.flow__hint{display:none}

/* Static fallback connectors, replaced by the live layer once JS runs. */
.js-flow .flow__link>svg{display:none}

/* Connectors are positioned from the top of the box stack: heading (34) + gap (47). */
.flow__link{position:relative}
.flow__link>svg{
  position:absolute;left:0;top:calc(114*var(--u));
  width:100%;height:calc(293*var(--u));
}
.flow__gate{
  position:absolute;left:50%;transform:translateX(-50%);
  width:calc(62*var(--u));height:calc(62*var(--u));
  background:var(--plum-lt);
  display:grid;place-items:center;
}
.flow__gate--one{top:calc(160*var(--u))}
.flow__gate--two{top:calc(329*var(--u))}
.flow__gate .check{width:calc(24.47*var(--u));height:calc(18.46*var(--u))}

/* Concept 3 closes the band short and sets the site's bracket beside it as an
   end-cap, in the band's own colour. Icon and title sit centred; the copy
   stays top-aligned. */
.gate-row{
  margin-top:calc(93*var(--u));
  display:grid;grid-template-columns:minmax(0,1318fr) minmax(0,87fr);
  column-gap:calc(36*var(--u));
  align-items:start;
}
.gate{
  min-height:calc(190*var(--u));
  background:#F5F5F5;
  border-left:calc(6*var(--u)) solid var(--plum);
  padding:0 calc(56*var(--u)) 0 calc(49*var(--u));
  display:grid;align-items:center;
  grid-template-columns:calc(68*var(--u)) calc(487*var(--u)) 1fr;
}
.gate__icon{
  width:calc(68*var(--u));height:calc(68*var(--u));
  background:var(--plum-lt);
  display:grid;place-items:center;
}
.gate__icon .check{width:calc(26.84*var(--u));height:calc(20.24*var(--u))}
.gate__title{padding-left:calc(43*var(--u));text-transform:uppercase;color:var(--ink)}
.gate__body{margin:0;align-self:start;padding-block:calc(37*var(--u))}
.gate-cap{
  display:block;width:100%;height:auto;
  color:#F5F5F5;
}

/* ---------------------------------------------------------------------------
   Approach — dashed pillar grid
--------------------------------------------------------------------------- */
.pillars{position:relative;margin-top:calc(58*var(--u))}
.pillars::before,.pillars::after{
  content:'';position:absolute;top:0;bottom:0;
  width:calc(2*var(--u));
  background-image:repeating-linear-gradient(to bottom,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
}
.pillars::before{left:calc(49*var(--u))}
.pillars::after{left:calc(532*var(--u))}
.pillars__rows{padding-block:calc(35*var(--u)) calc(25*var(--u))}

.pillar{
  display:grid;
  grid-template-columns:calc(122*var(--u)) calc(488*var(--u)) 1fr;
  padding:calc(25*var(--u)) calc(48*var(--u)) calc(85*var(--u)) 0;
  background-image:repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
  background-size:100% calc(2*var(--u));
  background-position:0 0;
  background-repeat:no-repeat;
}
.pillar:last-child{
  background-image:
    repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step)),
    repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
  background-size:100% calc(2*var(--u)),100% calc(2*var(--u));
  background-position:0 0,0 100%;
  background-repeat:no-repeat,no-repeat;
}
.pillar{transition:background-color .45s var(--ease)}
.pillar h3{
  grid-column:2;padding-right:calc(78*var(--u));
  text-transform:uppercase;color:var(--cream);
  transition:translate .45s var(--ease);
}
.pillar p{
  grid-column:3;margin:0;
  font-size:var(--fs-small);line-height:var(--lh-small);
  color:var(--cream);
  transition:color .45s var(--ease);
}
.pillar:focus-within,.pillar.is-on{background-color:var(--mauve-hi)}
.pillar.is-on p{color:var(--cream)}
.pillar.is-on h3{translate:calc(8*var(--u)) 0}
@media (hover:hover){
  .pillar:hover{background-color:var(--mauve-hi)}
  .pillar:hover p{color:var(--cream)}
  .pillar:hover h3{translate:calc(8*var(--u)) 0}
}

.policy{margin:calc(41*var(--u)) 0 0;text-align:right;font-style:italic}
/* The artboard gives this section a shallower foot than the rest. */
#approach{padding-bottom:calc(89*var(--u))}

/* ---------------------------------------------------------------------------
   How we build — delivery cards
--------------------------------------------------------------------------- */
.delivery{
  margin-top:calc(71*var(--u));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(25*var(--u));
}
.delivery__card{
  min-height:calc(351*var(--u));
  padding:calc(40*var(--u)) calc(25*var(--u)) calc(44*var(--u));
}
/* The artboard gives each card its own tint — warm, cool, rose — left to right. */
.delivery__card:nth-child(1){--card-rest:#F9F7F5}
.delivery__card:nth-child(2){--card-rest:#F8F9FA}
.delivery__card:nth-child(3){--card-rest:#FBF8FA}
.delivery__card{
  background:var(--card-rest);
  transition:background-color .45s var(--ease),translate .5s var(--ease),box-shadow .5s var(--ease);
}
.delivery__card h3{text-transform:uppercase;color:var(--ink);transition:color .45s var(--ease)}
.delivery__card h3::after{
  content:'';display:block;
  width:100%;max-width:calc(220*var(--u));height:calc(1*var(--u));
  margin-top:calc(42*var(--u));
  background:var(--mauve);
}
.delivery__card p{margin:calc(39*var(--u)) 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}
.delivery__card h3::after{transition:max-width .55s var(--ease),background-color .45s var(--ease)}
.delivery__card:focus-within,.delivery__card.is-on{background:var(--card-hover)}
.delivery__card.is-on h3{color:var(--plum)}
.delivery__card.is-on h3::after{max-width:calc(360*var(--u));background:var(--plum)}
@media (hover:hover){
  .delivery__card:hover{
    background:var(--card-hover);
    translate:0 calc(-6*var(--u));
    box-shadow:0 calc(14*var(--u)) calc(30*var(--u)) rgba(83,22,62,.12);
  }
  .delivery__card:hover h3{color:var(--plum)}
  .delivery__card:hover h3::after{max-width:calc(360*var(--u));background:var(--plum)}
}

/* ---------------------------------------------------------------------------
   About — leadership
--------------------------------------------------------------------------- */
.leadership{margin-top:calc(94*var(--u));text-transform:uppercase;color:var(--cream)}
.people{
  margin-top:calc(40*var(--u));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(25*var(--u));
}
.person__portrait{
  position:relative;isolation:isolate;
  width:calc(318*var(--u));max-width:100%;aspect-ratio:1;
  --block:#90909C;
}
/* The block behind: the artboard (2026-09-18) draws a 319 square set 22 right
   and 22 down behind a 318 photo, so it shows 23 at the right and the bottom. */
.person__portrait::after{
  content:'';position:absolute;z-index:0;
  left:calc(22*var(--u));top:calc(22*var(--u));
  right:calc(-23*var(--u));bottom:calc(-23*var(--u));
  background:var(--block);
}
.person__portrait img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.person h4{margin-top:calc(60*var(--u));text-transform:uppercase;color:var(--cream)}
.person__role{margin:calc(11*var(--u)) 0 0;font-style:italic}
.person__body{margin:calc(39*var(--u)) 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}

/* ---------------------------------------------------------------------------
   Contact
--------------------------------------------------------------------------- */
.contact__head{
  margin-top:calc(32*var(--u));
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(60*var(--u));
}
.contact__logo{flex:0 0 auto;width:calc(464*var(--u));height:auto}
.contact__copy{margin:calc(70*var(--u)) 0 0}
.contact__copy a{color:var(--plum);font-style:italic;text-decoration:none}
.contact__copy a:hover{text-decoration:underline}

.rule-dashed{
  display:block;margin-top:calc(49*var(--u));
  width:calc(464*var(--u));max-width:100%;height:calc(2*var(--u));
  background-image:repeating-linear-gradient(to right,var(--plum) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
}

.contact__grid{
  margin-top:calc(83*var(--u));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:calc(24*var(--u));
}

.addresses h3{text-transform:uppercase;line-height:calc(40/30)}
.addresses__row{
  margin-top:calc(20*var(--u));
  display:grid;grid-template-columns:calc(122*var(--u)) 1fr;
  align-items:center;
}
.addresses__row+.addresses__row{margin-top:calc(48*var(--u))}
.addresses__place{color:var(--plum);font-size:var(--fs-title);line-height:calc(40/30)}
.addresses address{font-style:normal;font-size:var(--fs-lead);line-height:calc(30/25)}
.addresses address strong{font-weight:400;color:var(--deep)}

form{min-width:0}
form label{display:block;font-size:var(--fs-title);line-height:calc(40/30)}
.form__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(24*var(--u))}
.form__pair+label,form>label+label{margin-top:calc(20*var(--u))}
input,textarea{
  display:block;width:100%;
  margin-top:calc(11*var(--u));
  height:calc(47*var(--u));
  padding:0 calc(14*var(--u));
  background:var(--field);border:1px solid transparent;border-radius:0;
  font-size:var(--fs-lead);
  transition:background .2s ease,border-color .2s ease;
}
textarea{height:calc(94*var(--u));padding:calc(10*var(--u)) calc(14*var(--u));resize:vertical}
input:hover,textarea:hover{background:#E7E4DE}
input:focus,textarea:focus{background:#fff;border-color:var(--plum);outline:0}
input:user-invalid,textarea:user-invalid{border-color:var(--plum-lt)}

.form__actions{margin-top:calc(47*var(--u))}
.btn--send{width:calc(219*var(--u));height:calc(60*var(--u))}

.form__status{margin:calc(24*var(--u)) 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}
.form__status:empty{display:none}
.form__status a{color:var(--plum)}

.site-foot{
  position:relative;
  margin-top:calc(97*var(--u));
  padding-top:calc(41*var(--u));
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:baseline;
  font-size:calc(20*var(--u));line-height:calc(23/20);
}
.site-foot::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:calc(2*var(--u));background:var(--rule);
  transform-origin:left;
}
/* The footer text is 20/23 and the artboard closes 90u under it. */
#contact{padding-bottom:calc(90*var(--u))}
.site-foot>:nth-child(2){justify-self:center}
.site-foot>:last-child{justify-self:end;color:var(--plum)}

/* ---------------------------------------------------------------------------
   Privacy policy page ("Web 1920 - 3" artboard)

   One cream ground: the site's fixed bar with a way back instead of the nav,
   the clauses as a numbered list divided by full-width rules, then the site's
   own contact block.
--------------------------------------------------------------------------- */
.page--legal{background:var(--cream)}

/* The legal page's bar sits exactly where the main page's does (the artboard
   draws it 5px higher, but a mark that hops between pages reads as a fault). */
/* The legal page borrows the site bar but not its navigation; on phones the
   artboard shows the burger there instead of the way back. */
.site-header--legal .nav,
.site-header--legal .nav-toggle{display:none}
.legal-bar__back{
  display:inline-flex;align-items:center;gap:calc(15*var(--u));
  font-size:var(--fs-title);line-height:var(--lh-title);text-transform:uppercase;text-decoration:none;
}
.legal-bar__back svg{flex:0 0 auto;width:calc(45*var(--u));height:auto;transition:translate .5s var(--ease)}
.legal-bar__back span{border-bottom:1px solid transparent;transition:border-color .2s ease}
.legal-bar__back:hover span,.legal-bar__back:focus-visible span{border-bottom-color:currentColor}
.legal-bar__back:hover svg,.legal-bar__back:focus-visible svg{translate:calc(-6*var(--u)) 0}

/* The bar is fixed, so the title keeps its artboard position by its own padding. */
.legal{padding:calc(306*var(--u)) 0 calc(155*var(--u))}
.legal__title{
  margin:0;
  font-family:var(--display);font-weight:400;
  font-size:var(--fs-h1);line-height:calc(85/80);
  color:var(--navy);text-transform:uppercase;
}

.clauses{margin:calc(71*var(--u)) 0 0;padding:0;list-style:none}
/* The artboard divides clauses with 1px navy rules dashed 5/5, the same
   pattern the pillar grid uses; a gradient keeps the dash rhythm exact. */
.clause{
  --clause-rule:repeating-linear-gradient(to right,var(--navy) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
  display:grid;grid-template-columns:calc(122*var(--u)) 1fr;
  padding:calc(35*var(--u)) 0 calc(90*var(--u));
  background:var(--clause-rule) top/100% calc(1*var(--u)) no-repeat;
}
.clause__no{
  font-size:var(--fs-title);line-height:var(--lh-title);
  color:var(--ink);
}
.clause__title{
  /* The artboard sets these in the text face, not the display one: "Consent"
     measures 139px, which is uppercase Times New Roman at 30px exactly. */
  margin:0;font-family:var(--text);font-weight:400;
  font-size:var(--fs-title);line-height:var(--lh-title);
  color:var(--navy);
}
.clause__body{
  grid-column:2;margin:calc(34*var(--u)) 0 0;
  max-width:calc(1200*var(--u));
  font-size:var(--fs-lead);line-height:var(--lh-lead);
}
.clause__body a{color:var(--plum);font-style:italic;text-decoration:none}
.clause__body a:hover,.clause__body a:focus-visible{text-decoration:underline}
.clause--last{
  background:
    var(--clause-rule) top/100% calc(1*var(--u)) no-repeat,
    var(--clause-rule) bottom/100% calc(1*var(--u)) no-repeat;
}

.legal__updated{
  margin:calc(41*var(--u)) 0 0 calc(123*var(--u));
  font-size:calc(20*var(--u));line-height:calc(23/20);font-style:italic;
}


@media (max-width:900px){
  .legal-bar__back{font-size:var(--fs-lead)}
  .clause{grid-template-columns:minmax(0,1fr);row-gap:calc(6*var(--u))}
  .clause__body{grid-column:1}
  .legal__updated{margin-left:0}
  .legal{padding:calc(230*var(--u)) 0 calc(140*var(--u))}
}

/* ---------------------------------------------------------------------------
   Privacy dialog
--------------------------------------------------------------------------- */
dialog{
  border:1px solid var(--plum);background:var(--cream);color:var(--ink);
  max-width:600px;width:90%;padding:45px;position:relative;
}
dialog::backdrop{background:rgba(23,28,75,.4)}
dialog h2{font-size:2rem;line-height:1.1;padding-right:30px;margin-bottom:20px}
dialog p{font-size:1rem;line-height:1.45}
dialog a{color:var(--plum)}
.dialog__close{
  position:absolute;right:14px;top:8px;
  border:0;background:none;color:var(--plum);font-size:32px;line-height:1;cursor:pointer;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width:1200px){
  .wrap{width:86%}
  .intro{grid-template-columns:minmax(0,1fr);row-gap:calc(34*var(--u))}
  .hero__mark{left:28%;width:78%}
  .btn--hero{width:min(calc(708*var(--u)),100%)}

  .flow{grid-template-columns:minmax(0,1fr);row-gap:calc(40*var(--u))}
  .flow__link{display:none}

  .gate-row{grid-template-columns:minmax(0,1fr)}
  .gate-cap{display:none}
  .gate{
    grid-template-columns:calc(68*var(--u)) 1fr;
    row-gap:calc(24*var(--u));
    padding:calc(30*var(--u)) calc(40*var(--u)) 0 calc(30*var(--u));
  }
  .gate__title{padding-left:calc(24*var(--u))}
  .gate__body{grid-column:1/-1;padding-top:calc(6*var(--u))}

  .pillar{grid-template-columns:calc(40*var(--u)) calc(420*var(--u)) 1fr;padding-right:calc(20*var(--u))}
  .pillars::before{left:calc(16*var(--u))}
  .pillars::after{left:calc(460*var(--u))}

  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(60*var(--u)) calc(30*var(--u))}
  .site-foot{grid-template-columns:1fr auto;row-gap:calc(20*var(--u))}
  .site-foot>:nth-child(2){grid-column:1;grid-row:2;justify-self:start}
}

@media (max-width:900px){
  /* ---- Mark left, burger right, panel under the bar --------------------- */
  /* Without scripting the burger cannot open anything, so the links stay in
     the bar as an ordinary list and the button is not offered at all. */
  .site-header{position:fixed;max-height:none;overflow:visible}
  .site-header__inner{flex-wrap:wrap;align-items:center;gap:calc(16*var(--m))}
  .nav{
    flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:0 0 calc(10*var(--m));
  }
  .nav-toggle{display:none}
  /* A bar carrying five links is far too tall to float over the page, so
     without scripting it takes its place in the flow instead. */
  html:not(.js) .site-header{position:static}
  html:not(.js) .hero{padding-top:calc(24*var(--m))}
  html:not(.js) .legal{padding-top:calc(30*var(--m))}
  .js .site-header__inner{flex-wrap:nowrap}
  .js .nav-toggle{
    order:2;flex:0 0 auto;display:grid;place-items:center;
    width:calc(40*var(--m));height:calc(40*var(--m));
    margin-right:calc(-9*var(--m));
    padding:0;border:0;background:none;color:var(--ink);cursor:pointer;
  }
  .nav-toggle__bars{display:grid;gap:calc(3*var(--m));width:calc(21*var(--m))}
  .nav-toggle{padding:0;border:0;background:none}
  .nav-toggle__bars i{
    display:block;height:calc(2*var(--m));background:currentColor;
    transition:opacity .35s var(--ease),translate .45s var(--ease),rotate .45s var(--ease);
  }
  /* Four bars closed; the outer pair retires and the inner pair crosses. */
  .nav-toggle[aria-expanded="true"] i:nth-child(1){opacity:0;translate:0 calc(5*var(--m))}
  .nav-toggle[aria-expanded="true"] i:nth-child(4){opacity:0;translate:0 calc(-5*var(--m))}
  .nav-toggle[aria-expanded="true"] i:nth-child(2){translate:0 calc(2.5*var(--m));rotate:45deg}
  .nav-toggle[aria-expanded="true"] i:nth-child(3){translate:0 calc(-2.5*var(--m));rotate:-45deg}
  .nav-toggle__label{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }

  .js .nav{
    visibility:hidden;
    position:absolute;left:0;right:0;top:100%;
    padding:0 7% calc(16*var(--m));
    background:var(--cream);
    box-shadow:0 calc(16*var(--m)) calc(36*var(--m)) rgba(23,28,75,.14);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .55s var(--ease),visibility 0s linear .55s;
  }
  .js .nav.is-open{
    visibility:visible;clip-path:inset(0 0 0 0);
    transition:clip-path .65s var(--ease),visibility 0s;
  }
  .nav a{
    font-size:var(--fs-eyebrow);line-height:calc(23/20);
    padding:calc(14*var(--m)) 0;
    border-top:1px solid rgba(167,165,165,.5);
  }
  .js .nav a{
    opacity:0;translate:0 calc(-8*var(--m));
    transition:opacity .4s var(--ease),translate .5s var(--ease);
  }
  .nav a::after{display:none}
  .nav a[aria-current]{color:var(--plum)}
  .js .nav.is-open a{opacity:1;translate:0 0}
  .nav.is-open a:nth-child(1){transition-delay:.10s}
  .nav.is-open a:nth-child(2){transition-delay:.16s}
  .nav.is-open a:nth-child(3){transition-delay:.22s}
  .nav.is-open a:nth-child(4){transition-delay:.28s}
  .nav.is-open a:nth-child(5){transition-delay:.34s}
  body.is-locked{overflow:hidden}

  .stages,.delivery,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .stage,.delivery__card{min-height:0}
  .stage__ghost{font-size:calc(300*var(--u));top:calc(-3*var(--u));width:calc(290*var(--u))}

  /* The reader has nowhere to sit, so each title carries its own text. */
  .caps{grid-template-columns:minmax(0,1fr)}
  .js-caps .caps__reader{display:none}
  .js-caps .caps__text{
    position:static;width:auto;height:auto;margin:calc(10*var(--u)) 0 0 calc(44*var(--u));
    overflow:visible;clip-path:none;white-space:normal;
  }
  .caps__item{cursor:default;min-height:0;padding-bottom:calc(6*var(--u))}
  /* Nothing is "current" when every entry shows its own text. */
  .caps__item[aria-current]{background:transparent}
  .caps__item[aria-current] .caps__tick{background:var(--slate)}
  .caps__item[aria-current] .caps__name{translate:0}
  .caps__row{padding-bottom:calc(14*var(--u))}
  #capabilities{padding-bottom:calc(150*var(--u))}
  .delivery__card{padding:calc(34*var(--u)) calc(30*var(--u))}

  .case{flex-direction:column;align-items:flex-start;gap:calc(30*var(--u))}
  .case .rule-short{margin-bottom:0}

  .pillar{grid-template-columns:minmax(0,1fr);row-gap:calc(14*var(--u));padding-left:calc(24*var(--u))}
  .pillar h3,.pillar p{grid-column:1}
  .pillars::before,.pillars::after{display:none}

  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(60*var(--u)) calc(30*var(--u))}
  .contact__grid{row-gap:calc(60*var(--u))}
  .contact__head{display:block}
  .contact__logo{display:none}
  .hero__foot{flex-wrap:wrap;gap:calc(30*var(--u))}
}

@media (max-width:640px){
  :root{--u:.78px}
  .wrap{width:88%}
  .hero__body{padding-top:calc(120*var(--u))}
  .hero{padding-top:calc(75*var(--u))}
  .site-header{padding-block:calc(40*var(--u)) 0}
  .site-header.is-stuck{padding-block:calc(26*var(--u))}
  .hero__mark{left:auto;right:-30%;width:120%}
  .form__pair{grid-template-columns:minmax(0,1fr)}
  .form__pair label+label{margin-top:calc(38*var(--u))}
  .btn--send{width:100%}
  .people{grid-template-columns:minmax(0,1fr);gap:calc(50*var(--u))}
  .person__portrait{width:calc(325*var(--u))}
  .addresses__row{grid-template-columns:minmax(0,1fr);row-gap:calc(8*var(--u))}
  .site-foot{grid-template-columns:minmax(0,1fr)}
  .site-foot>:last-child{justify-self:start}
  .contact__copy br,.hero__copy br{display:none}
  dialog{padding:30px 24px}
}

/* ---------------------------------------------------------------------------
   Motion

   The hero intro is armed before first paint by the inline script in <head>;
   scroll reveals are added by app.js and only ever to elements that start
   below the fold, so nothing here can strand content out of sight.
--------------------------------------------------------------------------- */
.js-motion h1 .line,
.js-motion .hero__copy,
.js-motion .btn--hero,
.js-motion .hero__foot{
  opacity:0;
  transform:translateY(calc(18*var(--u)));
  filter:blur(6px);
}
.js-motion .hero-bg{opacity:0}

.js-motion.motion-on h1 .line,
.js-motion.motion-on .hero__copy,
.js-motion.motion-on .btn--hero,
.js-motion.motion-on .hero__foot{
  opacity:1;transform:none;filter:none;
  transition:opacity 1s var(--ease) var(--hd,0ms),
             transform 1.1s var(--ease) var(--hd,0ms),
             filter .9s ease var(--hd,0ms);
}
.js-motion.motion-on .hero-bg{opacity:1;transition:opacity 1.8s ease 320ms}

.js-motion h1 .line:first-child{--hd:140ms}
.js-motion h1 .line:last-child{--hd:280ms}
.js-motion .hero__copy{--hd:440ms}
.js-motion .btn--hero{--hd:580ms}
.js-motion .hero__foot{--hd:700ms}

.reveal-pending{opacity:0;transform:translateY(calc(20*var(--u)))}
.reveal-pending.is-in{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease) var(--rd,0ms),
             transform 1.25s var(--ease) var(--rd,0ms);
}

/* Eyebrows set themselves a letter at a time instead of sliding in. */
.letters-pending .letter{opacity:0}
.letters-pending.is-in .letter{animation:letter-in .7s var(--ease) calc(var(--letter,0)*40ms) both}
@keyframes letter-in{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}

/* The human-gate band slides out from its own accent bar: the bar shows first
   at the left edge, the band wipes rightward, and the contents follow. */
.gate-row.reveal-pending{
  opacity:1;transform:none;
  clip-path:inset(0 100% 0 0);
}
.gate-row.reveal-pending .gate>*{opacity:0;transform:translateX(calc(-48*var(--u)))}
.gate-row.reveal-pending.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 2.3s var(--ease);
}
.gate-row.reveal-pending.is-in .gate>*{
  opacity:1;transform:none;
  transition:opacity 1.6s var(--ease) .3s,transform 2s var(--ease) .3s;
}

/* Rules draw from their anchor rather than appearing whole. */
.draw-pending{transform:scaleX(0);transform-origin:left}
.draw-pending.is-in{transform:scaleX(1);transition:transform 1.15s var(--ease) var(--rd,120ms)}

/* Rules that live inside a revealing block draw as that block arrives. */
.site-foot.reveal-pending::before,
.delivery__card.reveal-pending h3::after{transform:scaleX(0);transform-origin:left}
.site-foot.reveal-pending.is-in::before{
  transform:scaleX(1);
  transition:transform .8s var(--ease) 80ms;
}
.delivery__card.reveal-pending.is-in h3::after{
  transform:scaleX(1);
  /* The hover transitions ride along, or a hover in the first seconds after
     the card arrives would extend the rule with no motion at all. */
  transition:transform 1.3s var(--ease) 260ms,
             max-width .55s var(--ease),background-color .45s var(--ease);
}
/* 1. The footer is the last thing on the page; it arrives briskly. */
.site-foot.reveal-pending.is-in{
  transition:opacity .55s var(--ease),transform .7s var(--ease);
}


/* ---------------------------------------------------------------------------
   Phones — the 402 artboard

   The Figma "Mobile" page redraws the site on a 402-wide frame with its own
   type scale (28/20/18/16) and a 25px gutter. --m is that frame's pixel, the
   mobile twin of --u, capped so the scale stops growing on large phones. The
   type tokens are redefined from it, so every component inherits the mobile
   scale and only layout needs restating.
--------------------------------------------------------------------------- */
@media (max-width:720px){
  :root{
    --fs-h1:calc(28*var(--m));
    --fs-h2:calc(28*var(--m));
    --fs-eyebrow:calc(20*var(--m));
    --fs-lead:calc(16*var(--m));
    --fs-title:calc(18*var(--m));
    --fs-small:calc(16*var(--m));
    --lh-lead:calc(18/16);
    --lh-title:calc(21/18);
    --lh-small:calc(18/16);
    --dash-on:calc(5*var(--m));
    --dash-step:calc(10*var(--m));
    --gutter:6.2%;
  }
  .wrap{width:87.6%}
  /* The artboard's rhythm: light sections open 24 in, coloured bands 36;
     every section closes 42 under its last element except What we do (28). */
  .section{padding-block:calc(38*var(--m)) calc(42*var(--m))}
  #what-we-do{padding-bottom:calc(28*var(--m))}
  .intro{margin-top:calc(12*var(--m));row-gap:calc(21*var(--m))}
  .intro__copy p+p{margin-top:calc(14*var(--m))}
  /* The mobile artboard sets the eyebrows and the address heading in title
     case, where the desktop has them in capitals. */
  .eyebrow{letter-spacing:0;text-transform:none}   /* the markup is title case */
  .addresses h3{text-transform:capitalize}
  h2{margin:0}

  /* ---- Header ------------------------------------------------------------ */
  /* Anchors must clear the condensed bar, which is shorter here. */
  section[id]{scroll-margin-top:calc(72*var(--m))}
  .site-header{padding-block:calc(20*var(--m))}
  .site-header.is-stuck{padding-block:calc(16*var(--m))}
  .logo,.site-header--legal .logo{width:calc(191*var(--m))}
  .js .nav{padding-left:var(--gutter);padding-right:var(--gutter)}

  /* ---- Hero ------------------------------------------------------------- */
  .hero{padding-top:calc(60*var(--m));min-height:0}
  .hero__body{padding-top:calc(35*var(--m))}
  .hero__mark{top:calc(119*var(--m));left:auto;right:calc(25*var(--m));width:calc(265*var(--m))}
  .hero h1{max-width:calc(340*var(--m))}
  .hero__copy{margin-top:calc(16*var(--m));max-width:calc(300*var(--m))}
  .hero__copy-2{display:block;margin-top:calc(18*var(--m))}
  /* The artboard closes the hero on its rule and leaves the three-phrase line
     to the desktop, so the element stays for the rule and loses its text. */
  .hero__foot{
    margin-top:calc(29*var(--m));padding:calc(28*var(--m)) 0 calc(42*var(--m));
    gap:0;
  }
  .hero__foot span{display:none}
  .btn{font-size:calc(16*var(--m));letter-spacing:calc(1*var(--m))}
  .btn--hero{margin-top:calc(29*var(--m));width:calc(260*var(--m));height:calc(40*var(--m))}

  /* ---- What we do: the card deck ---------------------------------------- */
  .stage__ghost{display:none}
  .stage::before{display:none}
  .stage,.stage.is-on{
    min-height:calc(205*var(--m));
    padding:calc(23*var(--m)) calc(27*var(--m)) calc(26*var(--m));
  }
  .stage--slate.is-on{background:var(--slate)}
  .stage--mauve.is-on{background:var(--mauve)}
  .stage__body{
    position:static;opacity:1;translate:none;
    margin:calc(16*var(--m)) 0 0;max-width:none;
  }
  .stages{margin-top:calc(25*var(--m));gap:calc(16*var(--m))}

  /* Live only once the deck has been measured; without scripting the four
     cards stay an ordinary stacked list.

     The deck is swiped, not scrolled: it is only as tall as the card plus the
     edges of the ones behind it, and a vertical drag on it belongs to the deck
     rather than to the page. */
  .deck.is-deck{
    position:relative;height:var(--deck-h);margin-top:calc(28*var(--m));
    touch-action:pan-x pinch-zoom;
    -webkit-user-select:none;user-select:none;
    cursor:grab;
  }
  .deck.is-deck.is-dragging{cursor:grabbing}
  .deck.is-deck .stages{position:absolute;inset:0;margin:0;display:block}
  /* The desktop card carries hover transitions on translate and box-shadow;
     in the deck those would smear every frame-by-frame update, so the deck
     has none unless a card is asked to settle. */
  .deck.is-deck .stage{
    position:absolute;left:0;right:0;top:0;height:var(--deck-card-h);
    translate:0 var(--y,0);rotate:var(--r,0deg);scale:var(--s,1);z-index:var(--z,1);
    transform-origin:50% 100%;
    box-shadow:var(--sh,none);
    transition:none;
    will-change:translate,scale;
  }
  /* Slot changes ease; a card in flight is animated frame by frame instead.
     A card let go short of the threshold springs back with a little give. */
  .deck.is-deck .stage.is-settling{
    transition:translate .5s var(--ease),rotate .5s var(--ease),
               scale .5s var(--ease),box-shadow .5s var(--ease);
  }
  .deck.is-deck .stage.is-springing{
    transition:translate .55s cubic-bezier(.2,1.5,.4,1),rotate .55s cubic-bezier(.2,1.5,.4,1),
               scale .45s var(--ease),box-shadow .45s var(--ease);
  }
  .slider-ticks.slider-ticks--deck{margin-top:calc(16*var(--m))}   /* the line lands 28 under the card */
  /* The artboard closes What we do and The firm on their content, not on a
     rule; those rules are desktop-only. */
  #what-we-do .rule-short--block,
  #about .rule-short{display:none}
  /* Phones alternate the card colours around the loop. */
  .stage:nth-child(3){background:var(--slate)}
  .stage:nth-child(4){background:var(--mauve)}

  /* ---- Capabilities: always the accordion -------------------------------- */
  body[data-caps] .caps,
  body[data-caps] .caps-rule{display:none}
  body[data-caps] .panels{
    display:grid;grid-template-columns:minmax(0,1fr);
    margin-top:calc(13*var(--m));row-gap:calc(14*var(--m));
  }
  body[data-caps] .caps__ghost{display:block}
  body[data-caps] #capabilities{padding-bottom:calc(60*var(--m))}
  .panel{
    min-height:calc(36*var(--m));
    background:transparent;
    border-left:calc(2*var(--m)) solid var(--slate);
  }
  /* Every open card is the artboard's slate; the desktop's alternation is
     a desktop thing. */
  .panel{--panel-open:var(--slate)}
  .panel[open]:not(.is-closing){
    min-height:calc(36*var(--m));
    background:var(--panel-open);
    border-left-color:var(--navy);
  }
  .panel summary{padding:calc(7*var(--m)) calc(16*var(--m)) 0 calc(27*var(--m))}
  /* The toggle wears the same circled chevron as the orchestration rows. */
  .panel__toggle{width:calc(26*var(--m));height:calc(26*var(--m));color:var(--plum)}
  .panel__toggle circle{stroke-opacity:.35;transition:fill .35s var(--ease),stroke-opacity .35s var(--ease)}
  .panel__toggle .bar-h,.panel__toggle .bar-v{display:none}
  .panel__toggle .chev{
    display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    transform-origin:18.5px 18.5px;transition:transform .45s var(--ease),stroke .35s var(--ease);
  }
  .panel[open]:not(.is-closing) .panel__toggle{color:var(--cream)}
  .panel[open]:not(.is-closing) .panel__toggle circle{fill:var(--cream);stroke-opacity:1}
  .panel[open]:not(.is-closing) .panel__toggle .chev{transform:rotate(180deg);stroke:var(--panel-open)}
  .panel summary:hover .panel__toggle{scale:1}
  .panel__body{padding:calc(20*var(--m)) calc(27*var(--m)) calc(24*var(--m))}
  .panel__body::before{
    max-width:calc(157*var(--m));height:calc(1*var(--m));
    margin-bottom:calc(20*var(--m));
  }
  .caps__ghost{height:calc(38*var(--m))}

  /* ---- Orchestration: tap a source, trace that workflow ------------------
     The artboard draws the four sources and nothing else. With scripting the
     tapped source opens the part of the graph that belongs to it: the steps
     that process it, the approval it needs, the outputs it reaches. Without
     scripting the three columns simply stack, as they do on narrow desktops. */
  .flow{margin-top:calc(26*var(--m));display:block}
  .flow__col h3{
    font-size:var(--fs-lead);line-height:calc(18/16);
    color:var(--plum);text-transform:uppercase;
  }
  .flow__col ul{gap:calc(14*var(--m))}
  .flow__col li{
    min-height:calc(42*var(--m));
    padding:calc(6*var(--m)) calc(12*var(--m));
    font-size:var(--fs-lead);line-height:calc(18/16);
  }
  .js-trace .flow__col--b,
  .js-trace .flow__col--c,
  .js-trace .flow__link{display:none}
  /* Rows are spaced by margins rather than grid gap: a gap on either side of
     a collapsing panel does not collapse with it, so the panel's last pixels
     would snap when it left the DOM. A margin on the next row does. */
  .js-trace .flow__col--a>ul{gap:0}
  .js-trace .flow__col--a>ul>li+li{margin-top:calc(14*var(--m))}
  .js-trace .flow__col--a>ul>li.flow__trace{margin-top:0}
  .js-trace .flow__col--a>ul>li.flow__trace+li{margin-top:0}   /* the panel's own 26 closes it */
  .js-trace .flow__col--a{display:block}                      /* no grid row left for the hidden heading */
  .js-trace .flow__col--a h3{display:none}
  /* A source row on phones: label and a chevron; once open it is tagged as
     the source the flow underneath starts from. */
  .js-trace .flow__col--a>ul>li:not(.flow__trace){
    cursor:pointer;
    display:grid;grid-template-columns:1fr auto auto;column-gap:calc(10*var(--m));
    align-items:center;text-align:left;
    min-height:calc(42*var(--m));
    padding:calc(6*var(--m)) calc(12*var(--m)) calc(6*var(--m)) calc(16*var(--m));
    transition:background-color .35s var(--ease),border-color .35s var(--ease),
               opacity .35s var(--ease);
  }
  .js-trace .flow__col--a>ul>li:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
  .flow__label{grid-column:1}
  .flow__tag{
    grid-column:2;
    font-size:calc(11*var(--m));line-height:1;letter-spacing:.08em;
    text-transform:uppercase;color:var(--plum);
    padding:calc(4*var(--m)) calc(7*var(--m));
    border:calc(1*var(--m)) solid rgba(83,22,62,.35);
    opacity:0;translate:calc(6*var(--m)) 0;
    transition:opacity .35s var(--ease),translate .45s var(--ease);
  }
  .js-trace .flow__col--a li.is-open .flow__tag{opacity:1;translate:0 0}
  /* Whole pixels on purpose: a 25.2px circle with a .97px ring cannot sit on
     the pixel grid, and the ring comes out a hair heavier on one side, which
     reads as the chevron being off-centre. The glyph itself is a box, not an
     auto-height SVG, so WebKit and Blink place it the same way. */
  .flow__chevron{
    grid-column:3;
    display:grid;place-items:center;
    width:26px;height:26px;
    border:1px solid rgba(83,22,62,.35);border-radius:50%;
    color:var(--plum);
    transition:rotate .45s var(--ease),background-color .35s var(--ease),
               border-color .35s var(--ease),color .35s var(--ease);
  }
  .flow__chevron svg{display:block;width:12px;height:8px;overflow:visible}
  .js-trace .flow__col--a li.is-open{
    background:rgba(245,242,238,.6);border:1px dashed var(--plum);color:var(--ink);
  }
  .js-trace .flow__col--a li.is-open .flow__chevron{
    rotate:180deg;background:var(--plum);border-color:var(--plum);color:#F5F2EE;
  }
  /* The first row's chevron bobs twice when the section arrives. */
  .flow__col--a li.is-nudged .flow__chevron{animation:chevron-nudge 1.1s var(--ease) .4s 2}
  @keyframes chevron-nudge{
    0%,100%{translate:0 0}
    40%{translate:0 calc(4*var(--m))}
    70%{translate:0 calc(-1*var(--m))}
  }
  .flow__hint{
    display:block;
    margin:calc(39*var(--m)) 0 calc(14*var(--m));
    font-size:var(--fs-lead);line-height:calc(18/16);
    color:#707070;font-style:italic;
  }
  .flow{margin-top:0}

  /* The opened workflow, to the artboard's grid: 78 of wire below the source,
     the processing row (64 tall, two 168 boxes or one full-width), 78 of wire
     with the gates at its middle, the output row (78 tall; three boxes edge to
     edge or two 168s), 26 to the next source. Captions sit 32 above each row. */
  .flow__col .flow__trace{
    list-style:none;position:relative;overflow:hidden;
    min-height:0;padding:0;border:0;
  }
  .flow__trace-inner{position:relative;z-index:1;padding-bottom:calc(26*var(--m))}
  .trace__gap{position:relative;height:calc(78*var(--m))}
  .flow__trace h4{
    position:absolute;left:0;top:calc(46*var(--m));margin:0;
    font-family:var(--text);font-weight:400;font-style:italic;
    font-size:var(--fs-lead);line-height:calc(18/16);
    color:#707070;
  }
  .flow__trace ul{
    margin:0;padding:0;list-style:none;
    display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));
    column-gap:calc(16*var(--m));
  }
  .flow__trace ul.trace--o[style*="--n: 3"]{
    grid-template-columns:minmax(0,117fr) minmax(0,118fr) minmax(0,117fr);column-gap:0;
  }
  /* The artboard draws these boxes at 60%: a 1px grey dash and a near-white
     fill, the text on top at full strength. */
  .flow__trace li{
    padding:calc(6*var(--m)) calc(12*var(--m));
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:var(--fs-lead);line-height:calc(18/16);color:var(--ink);
    border:1px dashed rgba(167,165,165,.6);
  }
  .flow__trace .trace--p li{height:calc(64*var(--m));background:rgba(248,249,250,.6)}
  .flow__trace .trace--o li{height:calc(78*var(--m));background:rgba(251,248,250,.6)}
  /* Text measures chosen so the names break on the artboard's lines in
     16px Times: "Cost & Margin" fits 98 and "Data Validation" does not;
     "Draft Customer" breaks under 99 while "Communication" overflows by a
     hair; "Decision &" breaks under 130 while "Approval Record" holds. */
  .flow__trace ul[style*="--n: 2"].trace--p li>span{max-width:calc(98*var(--m))}
  .flow__trace ul[style*="--n: 3"].trace--o li>span{max-width:calc(99*var(--m))}
  .flow__trace ul[style*="--n: 2"].trace--o li>span{max-width:calc(130*var(--m))}
  .flow__wires--trace .wire{stroke-width:1px;stroke-dasharray:5 5}
  .flow__trace ul.trace--o[style*="--n: 3"] li{padding-inline:calc(3*var(--m))}
  .flow__wires--trace{
    position:absolute;left:0;top:0;
    width:100%;height:100%;
    overflow:visible;pointer-events:none;z-index:0;
  }
  .trace__gate{
    position:absolute;z-index:2;
    width:calc(18*var(--m));height:calc(18*var(--m));
    margin:calc(-9*var(--m)) 0 0 calc(-9*var(--m));
    background:var(--plum-lt);
    display:grid;place-items:center;
  }
  .trace__gate .check{width:calc(9*var(--m));height:calc(7*var(--m));color:#fff}

  /* ---- Gate band -------------------------------------------------------- */
  .gate-row{margin-top:calc(30*var(--m))}
  .gate{
    min-height:calc(191*var(--m));
    border-left-width:calc(2*var(--m));
    grid-template-columns:calc(36*var(--m)) 1fr;
    padding:calc(14*var(--m)) calc(24*var(--m)) calc(16*var(--m)) calc(28*var(--m));
    row-gap:calc(14*var(--m));
  }
  .gate__icon{width:calc(36*var(--m));height:calc(36*var(--m))}
  .gate__title{padding-left:calc(16*var(--m))}
  .gate__body{padding-block:0}
  /* The mobile artboard sets the bracket-and-dot mark inside the band, at
     its right edge, white at 70% — a watermark behind the copy rather than
     the desktop's end-cap beside it. */
  .gate-row{position:relative}
  .gate>*{position:relative;z-index:1}
  .gate-cap{
    display:block;position:absolute;right:0;top:0;z-index:0;
    height:100%;width:auto;
    color:#fff;opacity:.7;pointer-events:none;
    scale:-1 1;   /* the artboard's mark points left with the dot at the right */
  }

  /* ---- Approach: a flat dashed list ------------------------------------- */
  .pillars{margin-top:calc(28*var(--m))}
  .pillars__rows{padding-block:0}
  .pillar{
    padding:calc(23*var(--m)) 0 calc(24*var(--m)) calc(28*var(--m));
    row-gap:calc(17*var(--m));
    background-image:repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
    background-repeat:no-repeat;background-position:top left;background-size:100% 1px;
  }
  .pillar:last-child{
    background-image:
      repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step)),
      repeating-linear-gradient(to right,var(--dash-light) 0 var(--dash-on),transparent var(--dash-on) var(--dash-step));
    background-position:top left,bottom left;background-size:100% 1px,100% 1px;
  }
  .policy{margin-top:calc(22*var(--m))}

  /* ---- Delivery and leadership: one swipeable track each ----------------- */
  .delivery,.people{
    display:flex;gap:0;
    margin:calc(25*var(--m)) calc(-6.2vw) 0;
    padding:calc(2*var(--m)) 6.2vw;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .delivery::-webkit-scrollbar,.people::-webkit-scrollbar{display:none}
  .delivery>*,.people>*{flex:0 0 100%;min-width:0;scroll-snap-align:center}
  .delivery__card{
    min-height:calc(205*var(--m));
    padding:calc(23*var(--m)) calc(27*var(--m)) calc(26*var(--m));
  }
  /* One card at a time is always "the current one"; no highlight to give. */
  .delivery__card.is-on{background:var(--card-rest)}
  .delivery__card.is-on h3{color:var(--ink)}
  .delivery__card.is-on h3::after{background:var(--mauve);max-width:calc(233*var(--m))}
  .delivery__card h3::after{margin-top:calc(19*var(--m));max-width:calc(233*var(--m))}
  .delivery__card p{margin-top:calc(22*var(--m))}
  /* 338 photo + 14 of block showing at the right = the full 352 column. */
  .person__portrait{width:calc(100% - 14*var(--m));max-width:none}
  /* Mobile frame: 326 block against a 338 photo, 26 in on both axes. */
  .person__portrait::after{
    left:calc(26*var(--m));top:calc(26*var(--m));
    right:calc(-14*var(--m));bottom:calc(-14*var(--m));
  }
  .person h4{margin-top:calc(40*var(--m))}
  .person__role{margin-top:calc(5*var(--m))}
  .person__body{margin-top:calc(15*var(--m))}
  .leadership{margin-top:calc(38*var(--m))}
  .people{margin-top:calc(24*var(--m))}
  /* The artboard shows one card with clear space either side; without a gap
     the next slide's first 25px show at the right edge at rest. */
  .delivery,.people{column-gap:calc(50*var(--m))}

  .slider-ticks{
    display:flex;justify-content:center;gap:calc(12*var(--m));
    margin-top:calc(22*var(--m));
  }
  .slider-ticks button{
    box-sizing:content-box;
    width:calc(33*var(--m));height:calc(1*var(--m));
    padding:calc(12*var(--m)) 0;border:0;background:none;cursor:pointer;
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;background-position:center;
    background-size:100% calc(1*var(--m));
    opacity:.5;
  }
  /* Only the tick coming on eases in; the one going out drops at once, so
     there is never a moment with two lit. */
  .slider-ticks button.is-on{
    opacity:1;background-size:100% calc(2.5*var(--m));
    transition:opacity .35s var(--ease),background-size .35s var(--ease);
  }
  #about .slider-ticks{color:var(--cream)}
  #how-we-build .slider-ticks{color:var(--mauve)}

  /* ---- Contact and footer ----------------------------------------------- */
  .contact__head{margin-top:calc(12*var(--m))}
  .contact__copy{margin-top:calc(24*var(--m))}
  .rule-dashed{margin-top:calc(32*var(--m));width:100%}
  .contact__grid{margin-top:calc(23*var(--m));row-gap:calc(43*var(--m))}
  form label{font-size:var(--fs-title);line-height:calc(21/18)}
  .form__pair{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:calc(16*var(--m));
  }
  .form__pair label+label{margin-top:0}
  input,textarea{margin-top:calc(11*var(--m));height:calc(36*var(--m));padding:calc(6*var(--m)) calc(10*var(--m))}
  textarea{height:calc(72*var(--m))}
  .form__pair+label,form>label+label{margin-top:calc(11*var(--m))}
  .form__actions{margin-top:calc(23*var(--m))}
  .btn--send{width:calc(168*var(--m));height:calc(40*var(--m))}
  .addresses{order:2}
  .addresses h3{font-size:var(--fs-title)}
  /* The artboard's 92 label column leaves the UAE line 8px short in browser
     Times; a slightly narrower column keeps every address on three lines. */
  .addresses__row{grid-template-columns:calc(84*var(--m)) 1fr;align-items:center;margin-top:calc(16*var(--m))}
  .addresses__row+.addresses__row{margin-top:calc(30*var(--m))}
  .addresses address{font-size:var(--fs-lead);line-height:calc(18/16)}
  .site-foot{
    margin-top:calc(44*var(--m));padding-top:calc(42*var(--m));
    grid-template-columns:1fr auto 1fr;
    font-size:calc(12*var(--m));line-height:calc(14/12);
  }
  .site-foot::before{background:var(--mauve)}   /* the artboard's footer rule is mauve */
  .site-foot>:nth-child(2){grid-column:2;justify-self:center}
  .site-foot>:last-child{grid-column:3;justify-self:end}
  #contact{padding-bottom:calc(40*var(--m))}
  /* The mobile artboard drops the mark from the contact heading and sets it
     over the footer line instead; as a pseudo-element it joins the footer grid
     without disturbing the three items' places in it. */
  .contact__logo{display:none}
  .site-foot::after{
    content:'';grid-column:1/-1;grid-row:1;
    width:calc(168*var(--m));height:calc(18*var(--m));
    margin-bottom:calc(30*var(--m));
    background:url('assets/imgGroup54.svg') left center/contain no-repeat;
  }
  .site-foot>span,.site-foot>a{grid-row:2}

  /* ---- Privacy page ------------------------------------------------------ */
  .legal{padding:calc(95*var(--m)) 0 calc(60*var(--m))}
  .legal__title{font-size:var(--fs-h1);line-height:calc(32/28)}
  .clauses{margin-top:calc(28*var(--m))}
  .clause{
    grid-template-columns:calc(28*var(--m)) 1fr;
    padding:calc(23*var(--m)) 0 calc(28*var(--m));
    row-gap:calc(20*var(--m));
  }
  .clause__no,.clause__title{font-size:var(--fs-lead);line-height:calc(18/16)}
  .clause__body{grid-column:2;margin-top:0;font-size:var(--fs-lead)}
  .legal__updated{margin:calc(24*var(--m)) 0 0;font-size:calc(14*var(--m))}
  .site-header--legal .nav{display:flex}
  .js .site-header--legal .nav-toggle{display:grid}
  .legal-bar__back{display:none}

  dialog{padding:24px 20px}
}

/* A phone on its side has no room to pin a deck or centre a portrait, so both
   fall back to ordinary stacks. */
@media (max-width:900px) and (max-height:520px){
  .deck.is-deck{height:auto}
  .deck.is-deck .stages{position:static;height:auto;display:grid;gap:calc(16*var(--m))}
  .deck.is-deck .stage{
    position:static;height:auto;
    translate:none;scale:none;opacity:1;box-shadow:none;
  }
  .delivery,.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(20*var(--m));overflow:visible}
  .slider-ticks{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal-pending{opacity:1;transform:none}
  .gate-row.reveal-pending{clip-path:none}
  .gate-row.reveal-pending .gate>*{opacity:1;transform:none}
}