@font-face{
  font-family:Inter;
  src:url('assets/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap}

:root{
  /* Brand package v2.1 — logo and brandbook/tokens.css */
  --brand-onyx:#111315;
  --brand-saffron:#f4b000;
  --brand-warm-white:#f7f5f0;
  --brand-fog:#e7e5df;
  --brand-steel:#6c7277;
  --brand-white:#fff;
  --brand-black:#000;
  --radius-card:10px;
  --radius-pill:999px;
  --border-default:1px;
  --border-focus:2px;
  /* Values the brand book draws but does not name as tokens (Components and
     Standalone-mark slides of the v2.1 PDF): button hover, raised dark card,
     disabled/neutral dot, muted text on Onyx. */
  --onyx-hover:#2b2f33;
  --btn-radius:999px; --btn-h:56px; --btn-px:28px; --btn-fs:17px; --btn-fw:500;
  --btn-shine:inset 0 1px 0 #ffffff47; --btn-shine-dark:inset 0 1px 0 #ffffff14;
  --btn-glow:0 0 0 1px #f4b00059,0 12px 40px #f4b00047; --btn-saffron-hover:#f6bd24;
  --onyx-raised:#1a1d20;
  --onyx-raised-2:#202225;
  --neutral-disabled:#b8bdc1;
  --on-dark:var(--brand-warm-white);
  --on-dark-muted:#b6bbc0;
  /* Semantic roles used across the stylesheet. */
  --ink:var(--brand-onyx);
  --body:var(--brand-onyx);
  /* Steel is 4.47:1 on Warm White, just under WCAG AA for small text, so muted
     copy uses Steel mixed 85/15 with Onyx: 5.51:1 on Warm White, 6.0:1 on White. */
  --muted:#5e6468;
  --line:var(--brand-fog);
  --paper:var(--brand-warm-white);
  --accent:var(--brand-saffron);
  --surface:var(--brand-warm-white);
  /* The palette has no success green; positive states read in Onyx. */
  --positive:var(--brand-onyx);
  --white:var(--brand-white);
  --focus:var(--brand-onyx);
  --ease:cubic-bezier(.22,1,.36,1);
  --micro:200ms;
  --ui:400ms;
  --product:850ms;
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lead:1.125rem;
  --text-title:1.5rem;
  --text-section:clamp(2.375rem,4vw,3.625rem);
  --text-display:clamp(4.125rem,7.4vw,7rem);
  color-scheme:light;
  font-family:Inter,Arial,sans-serif;
  font-synthesis:none}

*{
  box-sizing:border-box}
html{
  scroll-padding-top:28px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased}
a{
  color:inherit;
  text-decoration:none}
button,textarea{
  font:inherit}
button{
  color:inherit}
button,a,summary{
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible{
  outline:var(--border-focus) solid var(--focus);
  outline-offset:5px}
button{
  cursor:pointer}
img{
  display:block;
  max-width:100%}
p{
  margin:0}
h1,h2,h3{
  margin:0;
  font-weight:500}
::selection{
  background:var(--accent);
  color:var(--ink)}
.container{
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto}
.skip{
  position:absolute;
  left:16px;
  top:0;
  transform:translateY(-130%);
  padding:16px;
  background:var(--accent);
  z-index:60}
.skip:focus{
  transform:none}
.topbar{
  height:104px;
  display:flex;
  align-items:center;
  gap:46px;
  border-bottom:1px solid var(--line)}
.wordmark{
  font-weight:760;
  letter-spacing:-1.7px;
  font-size:var(--text-title);
  margin-right:auto;
  line-height:1}
.wordmark span{
  font-size:var(--text-xs);
  display:block;
  letter-spacing:3.8px;
  margin-top:8px;
  font-weight:500}
.languages{
  display:flex;
  gap:4px;
  font-size:var(--text-xs)}
.languages a{
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  color:var(--muted)}
.languages a[aria-current]{
  color:var(--ink);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:5px}
.nav-cta{
  font-size:var(--text-sm);
  display:flex;
  align-items:center;
  gap:24px;
  padding:15px 19px;
  border:1px solid var(--ink)}
.nav-cta:hover{
  background:var(--ink);
  color:var(--on-dark)}
.hero{
  padding:64px 0 0}
.eyebrow{
  font-size:var(--text-xs);
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.6}
.hero-intro{
  display:flex;
  align-items:center;
  gap:10px}
.dot{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:100%;
  background:var(--accent);
  flex:none}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  gap:70px;
  align-items:end;
  margin-top:30px}
h1{
  font-size:var(--text-display);
  line-height:1.015;
  letter-spacing:-.05em;
  font-weight:500}
.title-line{
  display:block}
.marked{
  position:relative;
  isolation:isolate;
  width:fit-content}
.marked:after{
  content:'';
  position:absolute;
  left:3px;
  right:.05em;
  bottom:.075em;
  height:.13em;
  background:var(--accent);
  z-index:-1}
.hero-aside{
  padding-bottom:5px;
  min-width:0}
.studio-sign{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:30px}
.monogram{
  font-size:var(--text-base);
  font-weight:700;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  display:grid;
  place-items:center}
.studio-sign p{
  font-size:var(--text-xs);
  line-height:1.8}
.studio-sign span{
  display:block;
  color:var(--muted);
  font-size:var(--text-xs)}
.hero-description{
  font-size:var(--text-lead);
  line-height:1.65;
  color:var(--body);
  max-width:34ch}
.hero-description strong{
  font-weight:600;
  color:var(--ink)}
.hero-secondary{
  font-size:var(--text-sm);
  line-height:1.7;
  color:var(--muted);
  max-width:40ch;
  margin-top:14px}
.hero-actions{
  display:flex;
  align-items:center;
  gap:23px;
  flex-wrap:wrap;
  margin-top:30px}
.primary-button{
  padding:17px 22px;
  background:var(--ink);
  color:var(--on-dark);
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  font-size:var(--text-sm);
  font-weight:500;
  border:1px solid var(--ink)}
.primary-button:hover{
  background:var(--onyx-hover)}
.text-link{
  font-size:var(--text-xs);
  padding:12px 0;
  border-bottom:1px solid var(--ink);
  display:inline-flex;
  gap:16px;
  align-items:center;
  min-height:44px}
.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
  margin-top:60px;
  padding:23px 0;
  color:var(--muted);
  font-size:var(--text-xs);
  line-height:1.7}
.hero-bottom p:first-child{
  color:var(--ink)}
.hero-bottom span{
  margin:0 12px;
  color:var(--on-dark-muted)}
.work{
  padding-top:67px;
  padding-bottom:56px}
.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:35px}
.section-head .eyebrow{
  margin-bottom:18px;
  color:var(--muted)}
h2{
  font-size:var(--text-section);
  line-height:1.08;
  letter-spacing:-.055em}
.section-head>p{
  font-size:var(--text-sm);
  line-height:1.75;
  color:var(--muted);
  max-width:40ch;
  justify-self:end}
.screen-frame{
  background:var(--white);
  box-shadow:0 18px 45px #11131517;
  min-width:0}
.screen-dots{
  position:absolute;
  left:12px;
  display:flex;
  gap:4px}
.screen-dots i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--line)}
.screen-frame img{
  width:100%;
  height:auto;
  aspect-ratio:1512/982;
  object-fit:contain}
.visual-caption{
  font-size:var(--text-xs);
  color:var(--muted);
  line-height:1.5;
  margin-top:12px}
.case-header{
  display:flex;
  justify-content:flex-start;
  gap:20px;
  margin-top:24px;
  align-items:start}
.case-name{
  font-size:var(--text-title);
  line-height:1.3;
  letter-spacing:-.035em}
.case-category{
  font-size:var(--text-xs);
  color:var(--muted);
  margin-top:9px;
  line-height:1.6}
.circle-link{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  flex:none}
.circle-link:hover{
  background:var(--accent);
  border-color:var(--accent)}
.featured-description{
  font-size:var(--text-base);
  line-height:1.75;
  color:var(--body);
  max-width:64ch;
  margin:17px 0}
.case-details{
  margin-top:15px;
  font-size:var(--text-sm);
  line-height:1.8;
  color:var(--body);
  max-width:72ch}
.case-details summary{
  cursor:pointer;
  color:var(--ink);
  width:fit-content;
  padding:9px 0;
  text-decoration:underline;
  text-underline-offset:5px}
.case-details p{
  margin:9px 0}
.case-details ul{
  padding-left:18px}
.case-details a{
  text-decoration:underline;
  text-underline-offset:4px}
.work-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:48px}
.minor-description{
  font-size:var(--text-sm);
  line-height:1.8;
  margin-top:15px;
  color:var(--muted);
  max-width:48ch}
.solutions{
  background:var(--ink);
  color:var(--on-dark);
  padding:82px 0 74px}
.solutions .section-head{
  margin-bottom:45px}
.solutions .eyebrow{
  color:var(--on-dark-muted)}
.solutions .section-head>p{
  color:var(--on-dark-muted)}
.solution-list{
  border-top:1px solid #f7f5f026}
.solution{
  border-bottom:1px solid #f7f5f026}
.solution-number{
  font-size:var(--text-xs);
  color:var(--on-dark-muted)}
.solution h3{
  font-size:var(--text-title);
  letter-spacing:-.03em;
  line-height:1.3}
.solutions a:focus-visible,.solutions summary:focus-visible{
  outline-color:var(--accent)}
.solutions-end{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  margin-top:36px}
.solutions-end p{
  font-size:var(--text-xs);
  line-height:1.7;
  color:var(--on-dark-muted);
  max-width:64ch}
.prototype-footer{
  padding:27px 0;
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:var(--text-xs);
  line-height:1.7}
.prototype-footer a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  border-bottom:1px solid var(--line)}
.prototype-tag{
  display:inline-block;
  background:var(--line);
  color:var(--ink);
  padding:3px 8px;
  margin-right:9px;
  font-size:var(--text-xs);
  letter-spacing:.05em}
dialog{
  width:min(540px,calc(100% - 32px));
  padding:38px;
  border:1px solid var(--line);
  color:var(--ink);
  background:var(--paper);
  max-height:calc(100dvh - 50px);
  overflow:auto}
dialog::backdrop{
  background:#111315a3}
dialog h2{
  font-size:var(--text-section);
  line-height:1.1;
  margin:28px 0 20px}
dialog p{
  font-size:var(--text-sm);
  line-height:1.7;
  color:var(--body)}
.dialog-top{
  display:flex;
  justify-content:space-between;
  align-items:center}
.close-dialog{
  background:none;
  border:1px solid var(--line);
  width:44px;
  height:44px;
  font-size:var(--text-title)}
.dialog-list{
  font-size:var(--text-sm);
  line-height:1.9;
  color:var(--body);
  padding-left:18px;
  margin:20px 0}
.dialog-notice{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:22px!important;
  font-size:var(--text-xs)!important;
  color:var(--muted)!important}
.dialog-action{
  border:1px solid var(--ink);
  padding:13px 18px;
  background:var(--ink);
  color:var(--on-dark);
  margin-top:22px;
  font-size:var(--text-xs)}
.contact-panel{
  scroll-margin-top:24px;
  margin:24px auto;
  padding:28px;
  border:1px solid var(--line)}
.contact-panel:not(:target){
  display:none}
.contact-panel:target{
  display:block}
.contact-panel h2{
  font-size:var(--text-title);
  margin-bottom:16px}
.contact-panel p{
  font-size:var(--text-sm);
  line-height:1.7;
  max-width:65ch}
.contact-panel a{
  display:inline-block;
  text-decoration:underline;
  margin-top:20px}
.contact-note{
  margin-top:18px!important;
  color:var(--muted)}

@media(min-width:1600px){
  .hero-grid{
  gap:95px}
.hero{
  padding-top:78px}
}

@media(max-width:1150px){
  .container{
  width:calc(100% - 72px)}
.topbar{
  gap:26px}
.hero-grid{
  gap:35px;
  grid-template-columns:1.5fr 1fr}
h1{
  font-size:clamp(62px,7.8vw,89px)}
.hero-description{
  font-size:var(--text-base)}
.hero-actions{
  gap:16px}
.primary-button{
  padding:15px 18px;
  gap:18px}
.solution h3{
  font-size:var(--text-lead)}
}

@media(max-width:850px){
  .container{
  width:calc(100% - 48px)}
.topbar{
  height:86px;
  gap:24px}
.nav-cta{
  display:none}
.hero{
  padding-top:44px}
.hero-grid{
  grid-template-columns:1fr;
  gap:32px;
  margin-top:28px}
h1{
  font-size:clamp(64px,11vw,90px)}
.hero-aside{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px}
.studio-sign{
  grid-column:2;
  grid-row:1;
  margin:0 0 14px}
.hero-description{
  grid-column:1;
  grid-row:1/3;
  max-width:38ch;
  font-size:var(--text-base)}
.hero-secondary{
  grid-column:2;
  margin-top:0}
.hero-actions{
  grid-column:1/-1;
  margin-top:25px}
.hero-bottom{
  margin-top:38px}
.work{
  padding-top:46px;
  padding-bottom:64px}
.section-head{
  gap:28px}
.work-grid{
  gap:22px;
  margin-top:36px}
.case-name{
  font-size:var(--text-title)}
.solutions{
  padding:62px 0}
.prototype-footer{
  align-items:start}
}

@media(max-width:560px){
  .container{
  width:calc(100% - 40px)}
.topbar{
  height:78px;
  gap:12px}
.wordmark{
  font-size:var(--text-title);
  letter-spacing:-1.5px}
.wordmark span{
  font-size:var(--text-xs);
  letter-spacing:3.2px}
.languages{
  gap:0}
.languages a{
  min-width:44px;
  font-size:var(--text-xs)}
.hero{
  padding-top:34px}
.hero-intro{
  font-size:var(--text-xs);
  letter-spacing:.1em}
.hero-grid{
  margin-top:24px;
  gap:26px}
h1{
  font-size:clamp(42px,11.7vw,67px);
  letter-spacing:-.05em;
  line-height:1.04}
.hero-aside{
  display:block}
.studio-sign{
  display:none}
.hero-description{
  font-size:var(--text-base);
  line-height:1.7;
  max-width:36ch}
.hero-secondary{
  margin-top:13px;
  max-width:42ch;
  font-size:var(--text-xs)}
.hero-actions{
  gap:20px;
  margin-top:24px}
.primary-button{
  font-size:var(--text-xs);
  min-height:48px;
  gap:20px}
.text-link{
  font-size:var(--text-xs);
  gap:10px}
.hero-bottom{
  display:block;
  margin-top:34px;
  padding:20px 0}
.hero-bottom p:first-child{
  margin-bottom:6px}
.hero-bottom span{
  margin-inline:8px}
.hero-bottom p{
  font-size:var(--text-xs)}
.work{
  padding-top:35px;
  padding-bottom:54px}
.section-head{
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:27px}
.section-head .eyebrow{
  font-size:var(--text-xs);
  margin-bottom:13px}
h2{
  font-size:var(--text-section);
  letter-spacing:-.055em}
.section-head>p{
  justify-self:start;
  font-size:var(--text-sm);
  max-width:42ch}
.screen-dots{
  left:8px}
.visual-caption{
  font-size:var(--text-xs)}
.case-header{
  margin-top:20px;
  gap:14px}
.case-name{
  font-size:var(--text-title)}
.case-category{
  font-size:var(--text-xs)}
.featured-description{
  font-size:var(--text-sm);
  margin:14px 0}
.circle-link{
  width:44px;
  height:44px}
.work-grid{
  grid-template-columns:1fr;
  gap:35px;
  margin-top:35px}
.minor-description{
  max-width:none}
.solutions{
  padding:48px 0 40px}
.solutions .section-head{
  margin-bottom:30px}
.solution h3{
  font-size:var(--text-lead)}
.solutions-end{
  display:block;
  margin-top:29px}
.prototype-footer{
  display:block;
  padding:24px 0}
.prototype-footer p+p{
  margin-top:12px}
dialog{
  padding:25px}
dialog h2{
  font-size:var(--text-title)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important}
}

@media print{
  .container{
  width:100%}
.topbar,.hero-actions,.circle-link,.languages,.prototype-footer,dialog,.contact-panel{
  display:none}
.hero{
  padding-top:10px}
h1{
  font-size:60px}
.hero-grid{
  grid-template-columns:1.6fr 1fr;
  gap:25px}
.hero-aside{
  display:block}
.hero-bottom{
  margin-top:25px}
.work{
  padding-top:30px}
.solutions{
  color:var(--ink);
  background:var(--white)}
.solutions .section-head>p,.solution-teaser,.solution-number,.solution-body,.solutions-end p{
  color:var(--body)}
.work-grid{
  break-inside:avoid}
.solutions-end{
  display:none}
@page{
  size:A4;
  margin:15mm}
}

/* Review iteration: visible system workflows. */
h4 { margin: 0; font-weight: 500; }
.stage-heading { margin-bottom: 12px; }
.stage-number { font-size: var(--text-xs); color: var(--muted); }
.stage-heading h4 { font-size: var(--text-sm); font-weight: 600; line-height: 1.5; margin-top: 5px; overflow-wrap: anywhere; }
summary::-webkit-details-marker { display: none; }
.disclosure-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: var(--text-title); font-weight: 400; flex: none; line-height: 1; }
.disclosure-icon:before { content: '+'; }
details[open] > summary .disclosure-icon:before { content: '−'; }
.solution summary { list-style: none; display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 20px; row-gap: 12px; align-items: center; padding: 27px 0; cursor: pointer; }
.solution .disclosure-icon { color: var(--accent);  }
.solution-example { grid-column: 2; grid-row: 2; display: block; font-size: var(--text-sm); line-height: 1.7; color: var(--on-dark); }
.solution-example b { font-size: var(--text-xs); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); flex: none; }
.solution-body { padding: 0 55px 29px 68px; max-width: 900px; font-size: var(--text-base); line-height: 1.8; color: var(--on-dark); }
.solution-body p { max-width: 65ch; }
.close-dialog { flex: none; }
@media(max-width:1150px) {
  .solution summary { grid-template-columns: 35px minmax(0,1fr); }
  .solution-body { padding-left: 55px; }
}
@media(max-width:850px) {
  .solution summary { grid-template-columns: 30px minmax(0,1fr); column-gap: 15px; row-gap: 10px; padding: 23px 0; }

  .solution-example { grid-column: 2; grid-row: 2; display: block; margin-top: 4px; }
  .solution-example b { display: block; margin-bottom: 4px; }
  .solution-body { padding-left: 45px; padding-right: 15px; }
}
@media(max-width:700px) {
  .stage-heading { margin: 0; }
}
@media(max-width:560px) {
  .topbar { height: 84px; gap: 8px; }
  .hero-intro { letter-spacing: .06em; align-items: flex-start; }
  .hero-intro .dot { margin-top: 6px; }
  .hero-bottom span { margin-inline: 5px; }
  .solution summary { grid-template-columns: 23px minmax(0,1fr); column-gap: 10px; }
  .solution h3 { font-size: var(--text-title); }
  .solution-body { padding-left: 33px; padding-right: 0; }
  .solutions-end a { width: fit-content; margin-top: 22px; }
}
@media print {
  .solution-example { color: var(--ink); }
  .solution-example b { color: var(--ink); }
}

/* Shared visual language: stages, useful state cards, and explicit connections. */
:root { --state-border: var(--neutral-disabled); --state-radius: 5px; --state-fill: var(--white); }
.state-card { border: 1px solid var(--state-border); border-radius: var(--state-radius); background: var(--state-fill); }
.state-active { border-color: var(--ink); box-shadow: inset 0 4px var(--accent); }
.hero-bottom { margin-top: 0; }
.approach { padding-block: 76px 60px; }
.process-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
.process-flow > li { display: flex; flex-direction: column; min-width: 0; position: relative; }
.process-flow > li:not(:last-child):after { content: '→'; position: absolute; right: -24px; width: 16px; text-align: center; top: 124px; color: var(--muted); }
.process-flow .stage-heading { margin-bottom: 18px; }
.process-flow h3 { font-size: var(--text-title); line-height: 1.3; letter-spacing: -.03em; margin-top: 8px; }
.process-card { padding: 24px; flex: 1; font-size: var(--text-sm); line-height: 1.75; color: var(--body); }
.process-timing { font-size: var(--text-xs); color: var(--muted); margin-bottom: 14px; }
.state-active .process-timing { color: var(--ink); font-weight: 600; }
.deliverable { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 22px; }
.deliverable > span { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: 6px; }
.project-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.project-terms h3 { font-size: var(--text-title); line-height: 1.3; letter-spacing: -.03em; margin-bottom: 16px; }
.project-terms p { font-size: var(--text-sm); line-height: 1.8; color: var(--body); max-width: 62ch; }
.project-terms .budget-range { font-size: var(--text-section); letter-spacing: -.04em; line-height: 1.2; color: var(--ink); margin-block: 20px 10px; }
.project-terms .budget-caption { font-size: var(--text-xs); color: var(--muted); margin-bottom: 18px; }
.project-terms .continuity-title { margin-top: 28px; }
.contact-section { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; border-top: 1px solid var(--line); padding-block: 52px 64px; }
.contact-section p { font-size: var(--text-base); line-height: 1.75; color: var(--body); max-width: 55ch; margin-top: 24px; }
.contact-section .contact-note { font-size: var(--text-xs); max-width: 32ch; color: var(--muted); }
@media(max-width:1150px) {
  .topbar { gap: 18px; }
  .process-flow { gap: 24px; }
  .process-card { padding: 18px; }
  .process-flow > li:not(:last-child):after { right: -20px; }
}
@media(max-width:850px) {
  .process-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .process-flow > li:after { display: none; }
  .project-terms { gap: 32px; }
  .contact-section { grid-template-columns: 1fr; gap: 28px; }
}
@media(max-width:700px) {
  .process-flow { grid-template-columns: 1fr; gap: 24px; }
  .process-flow .stage-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
  .process-flow h3 { margin-top: 0; }
  .process-card { padding: 22px; }
  .project-terms { grid-template-columns: 1fr; gap: 32px; }
}
@media(max-width:560px) {
  .solutions { padding-top: 40px; }
  .approach { padding-block: 48px 36px; }
  .project-terms { margin-top: 32px; padding-top: 28px; }
  .contact-section { padding-block: 36px 44px; }
}
@media print {
  .process-flow, .project-terms { break-inside: avoid; }
  .contact-section { display: none; }
}

/* Closing contact: one compact group, with the primary action and alternatives. */
.hero-bottom { margin-top: 36px; }
.solution-heading { display: inline-flex; align-items: baseline; gap: 14px; width: fit-content; max-width: 100%; }
.solution-heading > span:first-child { min-width: 0; }
.solution .disclosure-icon { align-self: center; flex: 0 0 24px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 22px; min-height: 52px; border: 1px solid var(--on-dark-muted); color:var(--on-dark); font-size: var(--text-sm); flex: none; }
.secondary-button:hover { background: var(--onyx-hover); border-color:var(--on-dark); }
.project-terms .tax-note { font-size: var(--text-sm); color: var(--ink); margin-bottom: 12px; }
.contact-section { display: block; padding: 44px 0 48px; border-top: 1px solid var(--line); }
.contact-content { width: 100%; max-width: 760px; }
.contact-section h2 { max-width: 20ch; }
.contact-section p { max-width: 52ch; margin-top: 18px; }
.contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
.contact-alternatives { display: flex; flex-direction: column; align-items: flex-start; }
.contact-alternatives a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: var(--text-base); line-height: 1.5; overflow-wrap: anywhere; }
.contact-alternatives a > span { min-width: 48px; color: var(--muted); font-size: var(--text-xs); }
.contact-alternatives a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:560px) {
  .hero-bottom { margin-top: 28px; }
  .contact-section { padding-block: 32px 36px; }
  .contact-actions { gap: 12px; }
  .prototype-footer { padding-block: 16px; }
}
@media print { .contact-section { display: none; } }

/* ---------- The header: the island (HEADER_CONCEPT_UK.md) ----------
   One glass pill, fixed at the top in the middle, for the whole visit (header.js): the V,
   the four sections, ES | EN and the call to action; on a phone or a tablet the V and a
   menu button, the rest in a menu over the whole screen. Its tone follows the section
   under it (data-tone), in 300 ms. On the homepage the header lives in the hero, sticky
   there with a box 0 px tall, so the stage underneath still starts at the top, and its
   first frame is a row of its own: the big logo on the left, the language on the right.
   The island takes over when the story starts. What is hidden is inert (header.js). */
.site-header { position:absolute; inset:0 0 auto; z-index:50; color:var(--on-dark); --focus:var(--accent); --logo-w:224px; --lang-w:92px; }
.site-header--dark { position:sticky; inset:auto; top:0; height:0; }
.header-shell { width:87.6%; max-width:1800px; height:104px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
/* Full lockup never below the brand book's 180 px digital minimum. */
.brand-logo { display:block; width:var(--logo-w); flex:none; }
.brand-logo picture { display:block; }
.brand-logo img { width:100%; height:auto; }
/* Below 360 px the 180 px lockup no longer fits beside the language, so the row switches
   to the standalone mark at 28 px visual height, as the brand book asks. */
@media(max-width:359px) { .site-header .brand-logo { width:37px; } }
@media(min-width:1101px) and (max-width:1599px) { .site-header { --logo-w:190px; } .header-shell { height:92px; } }
@media(max-width:1100px) { .header-shell { width:90%; height:90px; } }
@media(min-width:681px) and (max-width:850px) { .site-header { --logo-w:180px; } }
@media(max-width:680px) { .site-header { --logo-w:180px; } .header-shell { width:calc(100% - 40px); height:82px; } }

/* the row: in on the first frame, away (and inert) once the island is in */
.site-header :is(.brand-logo,.lang--row) { opacity:0; transform:translateY(-6px); pointer-events:none; }
html[data-js] .site-header:is([data-mode="first"],[data-mode="keys"]) :is(.brand-logo,.lang--row) { opacity:1; transform:none; pointer-events:auto; }
html[data-js] .site-header[data-mode="first"] .island { opacity:0; transform:translateY(-8px); pointer-events:none; }
/* (until header.js has run, the hero's own attributes say which frame this is) */
@media(prefers-reduced-motion:no-preference) {
  html[data-js] .hero--atlantic[data-pinned]:not([data-scrolled]) .site-header:not([data-mode]) :is(.brand-logo,.lang--row) { opacity:1; transform:none; pointer-events:auto; }
  html[data-js] .hero--atlantic[data-pinned]:not([data-scrolled]) .site-header:not([data-mode]) .island { opacity:0; transform:translateY(-8px); pointer-events:none; }
}
/* without the story (reduced motion) or the script the island is there from the start, and
   the big logo stays only where the island leaves it room */
@media(min-width:1360px) and (prefers-reduced-motion:reduce) { .site-header .brand-logo { opacity:1; transform:none; pointer-events:auto; } }
@media(min-width:1360px) { html:not([data-js]) .site-header .brand-logo { opacity:1; transform:none; pointer-events:auto; } }
html:not([data-js]) .site-header .lang--row { display:none; }
.site-header[data-ready] :is(.brand-logo,.lang--row) { transition:opacity 500ms var(--ease),transform 500ms var(--ease); }

/* the island: dark glass over dark sections, light over light ones */
.island { --glass:#1113159e; --rim:#f7f5f01f; --ink-soft:#f7f5f0d1; --ink-on:var(--on-dark); --shade:#0000002e; --glow:#f7f5f014; --thumb:#f7f5f024; --rule:#f7f5f033;
  --cta-bg:var(--on-dark); --cta-ink:var(--brand-onyx); --cta-hover:var(--white);
  position:fixed; z-index:2; top:14px; left:0; right:0; width:max-content; height:52px; margin-inline:auto; display:flex; align-items:center; padding:0 5px;
  border:1px solid var(--rim); border-radius:999px; background:var(--glass); color:var(--ink-soft); box-shadow:0 10px 30px var(--shade);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); }
.site-header:not([data-menu]) .island[data-tone="light"] { --glass:#f7f5f0bd; --rim:#1113151a; --ink-soft:#111315b3; --ink-on:var(--brand-onyx); --shade:#1113151a; --glow:#11131510; --thumb:#11131514; --rule:#11131526;
  --cta-bg:var(--brand-onyx); --cta-ink:var(--on-dark); --cta-hover:var(--onyx-hover); --focus:var(--brand-onyx); }
/* where the glass cannot blur, and without the script (its tone then stays dark), 92 % */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .island { --glass:#111315eb; }
  .site-header:not([data-menu]) .island[data-tone="light"] { --glass:#f7f5f0eb; }
}
html:not([data-js]) .island { --glass:#111315eb; }
.site-header[data-ready] .island { transition:opacity 500ms var(--ease),transform 500ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease),box-shadow 300ms var(--ease); }
.island :focus-visible { outline-offset:2px; }
.island-mark { display:grid; place-items:center; flex:none; width:44px; height:40px; border-radius:999px; }
.island-mark svg { display:block; width:29px; height:22px; }
/* the V: the dark stroke fades in over the light one (and out), so the tone crossfades */
.island-mark .im-dark { opacity:0; }
.site-header:not([data-menu]) .island[data-tone="light"] .im-dark { opacity:1; }
.island-nav { position:relative; display:flex; align-items:center; margin-left:2px; }
/* each link keeps room on its left for the dot, so the active one sits centred in its pill */
.island-nav a { position:relative; z-index:1; display:flex; align-items:center; height:40px; padding:0 14px 0 24px; border-radius:999px; font-size:14.5px; font-weight:500; letter-spacing:-.005em; white-space:nowrap; color:var(--ink-soft); }
.island-nav a:hover,.island-nav a[aria-current] { color:var(--ink-on); }
.island-nav a::before { content:''; position:absolute; left:14px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.3); }
.island-nav a[aria-current]::before { opacity:1; transform:none; }
/* one pill for the whole island: header.js moves it under the active link */
.island-glow { position:absolute; z-index:0; left:0; top:0; width:0; height:40px; border-radius:999px; background:var(--glow); opacity:0; pointer-events:none; }
.island[data-active] .island-glow { opacity:1; }
.island-rule { flex:none; width:1px; height:20px; margin:0 9px 0 5px; background:var(--rule); }
/* the call ends on its words: no arrow anywhere in the header. On hover the dot grows and the
   button brightens a touch */
.header-cta { display:inline-flex; align-items:center; gap:8px; flex:none; height:40px; margin-left:6px; padding:0 17px 0 15px; border-radius:999px; background:var(--cta-bg); color:var(--cta-ink);
  font-size:14px; font-weight:500; line-height:1; white-space:nowrap; }
.header-cta::before { content:''; flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.header-cta .cta-label { gap:7px; }
.header-cta .wa-glyph { width:14px; height:14px; }
.header-cta::before { transition:transform var(--micro) var(--ease); }
.header-cta:hover { background:var(--cta-hover); }
.header-cta:hover::before { transform:scale(1.2); }
.site-header[data-ready] :is(.island-nav a,.lang a) { transition:color var(--micro) var(--ease); }
.site-header[data-ready] .island-nav a::before { transition:opacity 300ms var(--ease),transform 360ms var(--ease); }
.site-header[data-ready] .island-glow { transition:transform 360ms var(--ease),width 360ms var(--ease),opacity 300ms var(--ease),background-color 300ms var(--ease); }
.site-header[data-ready] .island-rule { transition:background-color 300ms var(--ease); }
.site-header[data-ready] .im-dark { transition:opacity 300ms var(--ease); }
.site-header[data-ready] .header-cta { transition:background-color 300ms var(--ease),color 300ms var(--ease); }

/* ES | EN: two links, a thumb under the current one; a click moves it (160 ms), then goes */
.lang { --seg:40px; --h:32px; --inset:3px; position:relative; display:grid; grid-template-columns:repeat(2,var(--seg)); flex:none; height:var(--h); border-radius:999px; }
.lang a { position:relative; z-index:1; display:grid; place-items:center; padding-left:.08em; border-radius:999px; font-size:12.5px; font-weight:500; line-height:1; letter-spacing:.08em; color:var(--ink-soft,#f7f5f0d1); }
.lang a:hover,.lang a[aria-current] { color:var(--ink-on,var(--on-dark)); }
.lang-thumb { position:absolute; top:var(--inset); bottom:var(--inset); left:var(--inset); width:calc(50% - 2 * var(--inset)); border-radius:999px; background:var(--thumb,#f7f5f024); pointer-events:none; }
.lang:has(a[lang="en"][aria-current]) .lang-thumb,.lang[data-going="en"]:has(a[lang="en"]) .lang-thumb { transform:translateX(calc(100% + 2 * var(--inset))); }
.lang[data-going="es"]:has(a[lang="es"]) .lang-thumb { transform:none; }
.lang[data-going] a[aria-current] { color:var(--ink-soft,#f7f5f0d1); }
.lang[data-going="en"] a[lang="en"],.lang[data-going="es"] a[lang="es"] { color:var(--ink-on,var(--on-dark)); }
.site-header[data-ready] .lang-thumb { transition:transform 160ms var(--ease),background-color 300ms var(--ease); }
.lang--island { margin:0 2px; box-shadow:inset 0 0 0 1px var(--rim); }
.lang :focus-visible { outline-offset:2px; }
/* on the first frame the language stands alone, on dark glass, where the old one was */
.lang--row { --seg:46px; --h:44px; --inset:4px; background:#1113159e; box-shadow:inset 0 0 0 1px #f7f5f01f; -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); }

/* the keyboard on the first frame (header.js: data-mode keys) brings the island's links and
   call in between the logo and the language, as the old row had them; the V and the
   island's own language stay away (one language control at a time) */
html[data-js] .site-header[data-mode="keys"] :is(.island-mark,.island-rule,.lang--island) { display:none; }
@media(min-width:1101px) { html[data-js] .site-header[data-mode="keys"] .island { left:calc(var(--logo-w) - var(--lang-w)); } }

/* the phone's menu button: two lines that turn into a cross */
.island-menu { display:none; position:relative; flex:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-on); cursor:pointer; }
.island-menu:hover { background:var(--glow); }
.island-menu span { position:absolute; left:14px; top:21.5px; width:16px; height:1.5px; border-radius:1px; background:currentColor; transition:transform 300ms var(--ease); }
.island-menu span:first-child { transform:translateY(-3px); }
.island-menu span:last-child { transform:translateY(3px); }
.island-menu[aria-expanded="true"] span:first-child { transform:rotate(45deg); }
.island-menu[aria-expanded="true"] span:last-child { transform:rotate(-45deg); }
.site-header[data-ready] .island-menu { transition:background-color 300ms var(--ease),color 300ms var(--ease); }

/* ≤1100 px: a bar the width of the screen, the V and the menu button; it tucks away on the
   way down after the hero (header.js: data-tucked) and comes back on the way up */
@media(max-width:1100px) {
  .island { top:12px; left:12px; right:12px; width:auto; height:56px; margin:0; justify-content:space-between; }
  .island :is(.island-nav,.island-rule,.lang--island,.header-cta) { display:none; }
  .island-mark { width:44px; height:44px; }
  .island-menu { display:grid; }
  .site-header[data-ready] .island { transition:opacity 500ms var(--ease),transform 300ms var(--ease),background-color 300ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease),box-shadow 300ms var(--ease); }
  .site-header[data-tucked] .island { transform:translateY(-120%); box-shadow:0 0 0 #0000; }
  /* the keyboard on the first frame: the menu button alone, just left of the language */
  html[data-js] .site-header[data-mode="keys"] .island { left:auto; right:calc(5% + var(--lang-w) + 2px); top:calc(var(--header-row,90px) / 2 - 28px);
    border-color:transparent; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html[data-js] .site-header[data-mode="keys"] .island-menu { background:#1113159e; box-shadow:inset 0 0 0 1px #f7f5f01f; -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); }
}
@media(max-width:680px) { html[data-js] .site-header[data-mode="keys"] .island { right:calc(20px + var(--lang-w) + 2px); } }

/* the menu: the whole screen in Onyx glass, the sections large, the language and the chat
   at the foot; the page under it holds still and out of reach (header.js) */
.site-menu { position:fixed; z-index:1; inset:0; display:flex; flex-direction:column; padding:100px 24px max(28px,env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain;
  background:#111315f0; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); color:var(--on-dark); --focus:var(--accent); --ink-soft:#f7f5f0c2; --ink-on:var(--on-dark);
  opacity:0; transform:scale(.98); transform-origin:50% 0; }
.site-menu[hidden] { display:none; }
.site-menu.is-open { opacity:1; transform:none; }
.site-header[data-ready] .site-menu { transition:opacity 320ms var(--ease),transform 320ms var(--ease); }
.site-menu-nav { display:flex; flex-direction:column; }
.site-menu-nav a { position:relative; display:flex; align-items:center; min-height:56px; padding:6px 0 6px 24px; border-bottom:1px solid #f7f5f014; font-size:clamp(30px,8.4vw,34px); font-weight:500; line-height:1.1; letter-spacing:-.03em; color:var(--ink-soft);
  opacity:0; transform:translateY(12px); }
.site-menu-nav a:hover,.site-menu-nav a[aria-current] { color:var(--on-dark); }
.site-menu-nav a::before { content:''; position:absolute; left:3px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.3); transition:opacity 300ms var(--ease),transform 360ms var(--ease); }
.site-menu-nav a[aria-current]::before { opacity:1; transform:none; }
.site-menu.is-open .site-menu-nav a { opacity:1; transform:none; transition:opacity 360ms var(--ease) calc(60ms + var(--i) * 40ms),transform 460ms var(--ease) calc(60ms + var(--i) * 40ms),color var(--micro); }
.site-menu-foot { display:grid; gap:14px; margin-top:auto; padding-top:32px; opacity:0; transform:translateY(12px); }
.site-menu.is-open .site-menu-foot { opacity:1; transform:none; transition:opacity 360ms var(--ease) 220ms,transform 460ms var(--ease) 220ms; }
.lang--menu { --seg:56px; --h:44px; --inset:4px; justify-self:start; box-shadow:inset 0 0 0 1px #f7f5f029; }
/* the chat, as the finale's button: Saffron, the WhatsApp glyph, the width of the screen
   (without the finale's arrow: the header has none); on hover it brightens a touch */
.menu-cta { display:flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:0 24px; border-radius:12px; background:var(--accent); color:var(--brand-onyx); font-size:16px; font-weight:500; transition:background-color var(--micro); }
.menu-cta:hover { background:#f7bc1f; }
.menu-cta:focus-visible { outline-color:var(--on-dark); outline-offset:4px; }
html[data-menu-open] { overflow:hidden; }
html[data-menu-open] body { padding-right:var(--scrollbar,0px); }

/* without the script a phone has no menu: the island scrolls with the page and shows every
   link in it, the sections on a row of their own under the V, the language and the chat */
@media(max-width:1100px) {
  html:not([data-js]) .island { position:absolute; height:auto; flex-wrap:wrap; justify-content:flex-start; gap:4px 0; padding:5px; border-radius:26px; }
  html:not([data-js]) .island-menu { display:none; }
  html:not([data-js]) .island .lang--island { display:grid; --seg:46px; --h:44px; margin-left:auto; }
  html:not([data-js]) .island .header-cta { display:inline-flex; height:44px; }
  html:not([data-js]) .island-nav { display:flex; order:1; width:100%; margin:0; overflow-x:auto; scrollbar-width:none; }
  html:not([data-js]) .island-nav a { height:44px; padding:0 12px; }
  html:not([data-js]) .hero--atlantic { --header-clear:128px; }
}
/* (a small phone wraps the call to a row of its own) */
@media(max-width:380px) { html:not([data-js]) .hero--atlantic { --header-clear:176px; } }
/* reduced motion: nothing moves in the header, the menu just appears */
@media(prefers-reduced-motion:reduce) {
  .site-header *,.site-header *::before { transition:none !important; }
  .site-menu,.site-menu-nav a,.site-menu-foot { transform:none !important; }
}

/* ---------- Atlantic hero ----------
   Onyx stage, a CSS horizon glow (also the no-WebGL fallback), the WebGL ocean and
   extruded mark from hero.js on a canvas, the flat SVG mark until that canvas is
   ready, grain and vignette on top, then the text. hero.js reads the positions of
   .hero-mark and .hero-horizon, so the scene always lines up with this layout. */
.hero--atlantic {
  --hero-h:100vh;
  --mark-w:clamp(260px,min(38vw,100vh - 420px),600px);
  /* the first frame is the mark alone: big, centred a little above the middle. The
     eyebrow sits in the header's row, the headline is a quiet line at the bottom left */
  --mark-half:calc(var(--mark-w) * 113 / 296);
  --mark-cy:calc(var(--hero-h) * .44);
  --title:clamp(22px,2.25vw,34px);
  --title-lh:1.12;
  --story-extra:160vh;
  position:relative; padding:0; background:var(--brand-onyx); color:var(--on-dark); --focus:var(--accent);
}
/* the stage is the hero proper; in story mode it is pinned while the section scrolls */
.hero-stage { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:var(--hero-h); }
.hero--atlantic[data-pinned] { height:calc(var(--hero-h) + var(--story-extra)); }
.hero--atlantic[data-pinned] .hero-stage { position:sticky; top:0; }
@supports (height:100svh) {
  .hero--atlantic { --hero-h:100svh; --mark-w:clamp(260px,min(38vw,100svh - 420px),600px); }
}
@media(min-width:1101px) {
  /* the floor is for windows too short for any composition; a short laptop (1366×640,
     1280×600) gets the whole first frame, buttons included, on its screen. The mark's
     own floor follows the height there, so it keeps clear of the headline */
  .hero--atlantic { --hero-h:clamp(560px,100vh,1080px); --mark-w:clamp(min(260px,40vh),min(38vw,100vh - 420px),600px); }
  @supports (height:100svh) { .hero--atlantic { --hero-h:clamp(560px,100svh,1080px); --mark-w:clamp(min(260px,40svh),min(38vw,100svh - 420px),600px); } }
  /* pinned, the stage is the whole screen however tall it is: with the cap a tall window
     (or a zoomed-out page) showed an empty band under the scene for the whole story */
  .hero--atlantic[data-pinned] { --hero-h:max(560px,100vh); }
  @supports (height:100svh) { .hero--atlantic[data-pinned] { --hero-h:max(560px,100svh); } }
}
.hero-horizon { position:absolute; z-index:-3; left:0; right:0; top:calc(var(--hero-h) * .56); height:0; pointer-events:none; }
/* sunset after the sun has gone: no disc, a low wide warmth; 35 % Saffron at its peak,
   which only the fully formed board (--glow: 1, set by hero.js) reaches */
.hero-horizon::before { content:''; opacity:var(--glow,.87); position:absolute; left:50%; top:0; width:max(1300px,120vw); height:min(760px,90vh); transform:translate(-50%,-50%);
  background:
    radial-gradient(20% 4.5% at 50% 50%,#f4b00058,#f4b00000 100%),
    radial-gradient(30% 16% at 50% 50%,#f4b0002c,#f4b00000 100%),
    radial-gradient(46% 44% at 50% 50%,#f4b00011,#f4b00000 100%); }
/* below the horizon the sea is a shade darker than the sky */
.hero-horizon::after { content:''; position:absolute; left:0; right:0; top:0; height:100vh; background:linear-gradient(#0c0e0f00,#0c0e0f80 40%,#0c0e0fb3); }
.hero-canvas { position:absolute; z-index:-2; inset:0; width:100%; height:100%; display:block; opacity:0; pointer-events:none; transition:opacity 600ms var(--ease); }
.hero-mark { position:absolute; z-index:-1; left:50%; top:var(--mark-cy); width:var(--mark-w); transform:translate(-50%,-50%); pointer-events:none;
  filter:drop-shadow(0 30px 40px #00000073); transition:opacity 600ms var(--ease); }
/* the flat mark stays on top, unchanged, until the canvas under it is fully in, and only
   then goes: fading both at once dimmed the logo a quarter at the midpoint */
.hero--atlantic[data-ready] .hero-mark { transition:opacity 220ms linear 620ms; }
.hero-mark svg { display:block; width:100%; height:auto; }
.hero--atlantic[data-ready] .hero-canvas { opacity:1; }
/* without its scene (a lost GPU context) the story keeps its words; the big flat mark is
   only for the first frame, where it does not cover them */
.hero--atlantic[data-pinned]:not([data-ready]):not([data-frame="0"]) .hero-mark { opacity:0; }
.hero--atlantic[data-ready] .hero-mark { opacity:0; }
/* the scene paints its own sky, sea and afterglow: the CSS horizon is only the fallback */
.hero--atlantic[data-ready] .hero-horizon { visibility:hidden; }
/* grain (about 4.5 %) and a soft vignette, so the black is never flat */
.hero-stage::after { content:''; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 42%,#11131500 55%,#0a0b0c99 100%); }
.hero--atlantic .hero-shell { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; width:87.6%; max-width:1800px; margin:0 auto; min-height:var(--hero-h);
  padding:0 0 clamp(28px,4.4vh,48px); }
/* (centred with translate, not transform: the entrance animation's transform would
   otherwise replace the centring and start the line half its width to the right) */
.hero--atlantic .hero-eyebrow { position:absolute; top:var(--header-clear,112px); transition:opacity 500ms var(--ease); left:50%; translate:-50% 0; margin:0; display:block; font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.17em; text-transform:uppercase; white-space:nowrap; color:#f7f5f0b3; }
.hero--atlantic h1 { position:relative; margin:0; text-align:left; color:var(--on-dark); font-size:var(--title); font-weight:500; line-height:var(--title-lh); letter-spacing:-.015em; font-optical-sizing:auto; }
/* soft Onyx scrim so the letters hold over the light V */

.hero--atlantic .hero-title-line { display:block; white-space:nowrap; }
.hero--atlantic .headline-dot { color:var(--accent); }
.hero-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; width:100%; margin-top:auto; padding-top:24px; }
.hero-note { max-width:34ch; font-size:clamp(16px,1.15vw,19px); }
/* the foot's words sit over the sea, which can glitter bright gold under them: a soft dark
   halo keeps them legible without a visible box */
.hero--atlantic .hero-note h1,.hero--atlantic .hero-offer,.hero--atlantic .hero-coords { text-shadow:0 0 18px #111315cc,0 0 3px #11131599; }
/* what the studio builds, right under the headline and read with it: body text, a step
   down in size and brightness, kept to a short measure */
.hero-offer { margin:12px 0 0; max-width:36ch; font-size:clamp(15px,1.05vw,17px); line-height:1.45; letter-spacing:-.005em; color:#f7f5f0bf; text-wrap:balance; }
.hero--atlantic .hero-lede { margin:0; max-width:none; font-size:1em; line-height:1.45; letter-spacing:-.01em; color:#f7f5f0c7; }
.hero-coords { margin:14px 0 0; white-space:nowrap; font:500 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; color:#f7f5f080; }
.hero--atlantic .hero-actions { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; gap:14px; margin:0; }
.hero--atlantic .hero-primary,.hero--atlantic .hero-secondary { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:var(--btn-h); margin:0; padding:0 var(--btn-px); max-width:none;
  border:1px solid transparent; border-radius:var(--btn-radius); font-size:var(--btn-fs); font-weight:var(--btn-fw); line-height:1.2; white-space:nowrap;
  transition:background var(--micro),border-color var(--micro),color var(--micro),box-shadow 240ms,transform 120ms; }
.hero--atlantic .hero-primary { overflow:hidden; isolation:isolate; background:var(--accent); color:var(--ink); box-shadow:var(--btn-shine); }
/* the WhatsApp glyph opens the label: 16 px, in the button's own ink */
.cta-label { display:inline-flex; align-items:center; gap:10px; }
.wa-glyph { width:16px; height:16px; flex:none; }
.hero--atlantic .hero-primary:hover { background:var(--btn-saffron-hover); box-shadow:var(--btn-shine),var(--btn-glow); }
.hero--atlantic .hero-primary:active,.hero--atlantic .hero-secondary:active { transform:scale(.98); }
.hero--atlantic .hero-primary:focus-visible,.hero--atlantic .hero-secondary:focus-visible { outline:2px solid var(--on-dark); outline-offset:3px; }
/* once the first frame is up, one sheen crosses the button, as on «Hablemos» */
.hero--atlantic .hero-primary::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(105deg,#ffffff00 30%,#ffffff73 50%,#ffffff00 70%); transform:translateX(-110%); pointer-events:none; }
@media(prefers-reduced-motion:no-preference) { .hero--atlantic .hero-primary::after { animation:btn-sheen 700ms var(--ease) 1800ms 1 both; } }
@keyframes btn-sheen { from { transform:translateX(-110%); } to { transform:translateX(110%); } }
/* the glass button: the Saffron dot steps in before the words, as in the footer */
.hero--atlantic .hero-secondary { background:#f7f5f01a; color:var(--on-dark); border-color:#f7f5f038; }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)) {
  .hero--atlantic .hero-secondary { background:#f7f5f00f; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
}
.hero--atlantic .hero-secondary::before,.btn-dot::before { content:''; position:absolute; left:var(--btn-px); top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity var(--micro),transform 320ms var(--ease); }
.hero--atlantic .hero-secondary > span { transition:transform 320ms var(--ease); }
.hero--atlantic .hero-secondary:is(:hover,:focus-visible) { background:#f7f5f01f; border-color:#f7f5f066; }
.hero--atlantic .hero-secondary:is(:hover,:focus-visible)::before { opacity:1; transform:none; }
.hero--atlantic .hero-secondary:is(:hover,:focus-visible) > span { transform:translateX(14px); }
@media(min-width:1600px) { .hero--atlantic .hero-eyebrow { font-size:14px; } }
@media(max-width:1100px) {
  .hero--atlantic .hero-shell { width:90%; }
  .hero--atlantic { --header-clear:98px; }
  .hero--atlantic { --mark-w:clamp(240px,min(52vw,100vh - 440px),520px); --title:clamp(22px,2.6vw,30px); }
  @supports (height:100svh) { .hero--atlantic { --mark-w:clamp(240px,min(52vw,100svh - 440px),520px); } }
  .hero-foot { flex-direction:column; align-items:flex-start; gap:28px; }
  .hero--atlantic .hero-actions { justify-content:flex-start; }
}
@media(max-width:768px) {
  .hero-horizon { top:calc(var(--hero-h) * .5); }
  .hero--atlantic[data-frame="5"] .hero-story,.hero--atlantic[data-frame="6"] .hero-story { top:calc(var(--hero-h) * .74); }
  /* from frame 2 the board rides the wave in the lower half: the words move up into the sky */
  .hero--atlantic:is([data-frame="2"],[data-frame="3"],[data-frame="4"],[data-frame="5"],[data-frame="6"]) .hero-story { top:calc(var(--hero-h) * .3); }
  /* (the offer line under the headline takes ~50 px: a short phone gives it from the mark) */
  .hero--atlantic { --mark-w:min(74vw,100vh - 500px); --mark-cy:calc(var(--hero-h) * .39); --title:clamp(22px,6.7vw,27px); --title-lh:1.15; }
  @supports (height:100svh) { .hero--atlantic { --mark-w:min(74vw,100svh - 500px); } }
  .hero--atlantic .hero-shell { width:calc(100% - 40px); }
  .hero--atlantic { --header-clear:90px; }
  .hero--atlantic .hero-eyebrow { font-size:11px; letter-spacing:.14em; }
  .hero-foot { gap:20px; padding-top:26px; }
  .hero-note { font-size:16px; }
  .hero-coords { font-size:10.5px; letter-spacing:.12em; white-space:normal; }
  .hero--atlantic .hero-actions { flex-direction:column; width:100%; gap:12px; }
  .hero--atlantic .hero-primary,.hero--atlantic .hero-secondary { width:100%; min-height:54px; font-size:16px; }
  .hero--atlantic .hero-primary { justify-content:space-between; }
}
/* a phone turned sideways (or any window this short below 1101 px): too short to stack the
   mark over the headline and the buttons. The foot becomes a row again, the headline and
   offer on the left, the two buttons stacked on the right, and the mark sits smaller in
   the band between the header and the foot */
@media(max-width:1100px) and (max-height:520px) and (orientation:landscape) {
  /* the mark fills the band between the row (~66 px) and the foot (~186 px from the bottom) */
  .hero--atlantic { --mark-w:clamp(60px,(var(--hero-h) - 262px) * 1.31,240px); --mark-cy:calc(var(--hero-h) / 2 - 54px); --title:22px; --title-lh:1.12; }
  .hero-foot { flex-direction:row; align-items:flex-end; gap:24px; padding-top:16px; }
  .hero-note { font-size:15px; }
  .hero-offer { font-size:14px; margin-top:8px; }
  .hero-coords { margin-top:10px; font-size:10.5px; letter-spacing:.12em; white-space:nowrap; }
  .hero--atlantic .hero-actions { flex-direction:column; align-items:stretch; gap:10px; width:auto; flex:none; }
  .hero--atlantic .hero-primary,.hero--atlantic .hero-secondary { min-height:46px; padding:0 20px; font-size:15px; }
  .hero--atlantic .hero-primary { justify-content:space-between; }
}
@media(prefers-reduced-motion:reduce) { .hero-canvas,.hero-mark { transition:none; } }

/* ---------- Scroll story (hero.js sets data-pinned, data-frame and the fades) ---------- */
.hero--atlantic[data-pinned] .hero-eyebrow { opacity:var(--intro,1); }
.hero--atlantic[data-pinned] .hero-foot { opacity:var(--intro,1); transform:translateY(calc((1 - var(--intro,1)) * 16px)); }
.hero--atlantic[data-pinned][data-intro-off] .hero-foot { visibility:hidden; }
.hero-story { position:absolute; z-index:1; left:50%; top:calc(var(--hero-h) * .64); width:min(92%,1100px); transform:translate(-50%,-50%); display:none; flex-direction:column; align-items:center; gap:14px; text-align:center; pointer-events:none; }
.hero--atlantic[data-pinned] .hero-story { display:flex; }
.hero-story::before { content:''; position:absolute; z-index:-1; inset:-30% -8%; background:radial-gradient(closest-side,#1113158c 0%,#11131566 45%,#11131500 100%); opacity:0; transition:opacity 400ms var(--ease); }
/* the shade is for the story's words only: the first frame has none (shaded, it greyed the
   headline's middle line on phones and dimmed the afterglow's path on the sea) */
.hero--atlantic[data-frame]:not([data-frame="0"]) .hero-story::before { opacity:1; }
.hs-mask { position:relative; display:block; overflow:hidden; max-width:100%; }
.hs-line { display:block; transition:transform 180ms var(--ease),opacity 180ms var(--ease); }
.hs-line.is-below { transform:translateY(100%); opacity:0; }
.hs-line.is-above { transform:translateY(-100%); opacity:0; }
.hero--atlantic[data-pinned] .hero-story { opacity:var(--story-o,1); }
.hs-flow .hs-line { transition-delay:30ms; }
.hs-index { font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.17em; color:var(--accent); }
.hs-title { font-size:clamp(40px,5.6vw,84px); font-weight:600; line-height:1.04; letter-spacing:-.02em; padding-bottom:.06em; color:var(--on-dark); text-wrap:balance; }
.hs-flow { font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; color:#f7f5f099; }
.hero-rail { position:absolute; z-index:1; right:clamp(20px,2.4vw,40px); top:50%; transform:translateY(-50%); display:none; flex-direction:column; align-items:center; gap:12px; margin:0; padding:0; list-style:none; }
.hero--atlantic[data-pinned] .hero-rail { display:flex; }
.hero-rail li { width:1px; height:18px; background:#f7f5f040; transition:height 300ms var(--ease),background-color 300ms var(--ease); }
.hero-rail li.is-active { height:28px; background:var(--accent); }
/* the pause button (hero.js): a small quiet ring under the story's rail on the right, on a
   phone (no rail) under the header's right end. 44 px to press, a 30 px ring to see. Shown
   only while the story runs; reduced motion has nothing to pause */
.hero-pause { position:absolute; z-index:2; right:max(0px,calc(clamp(20px,2.4vw,40px) - 21.5px)); top:calc(50% + 84px); width:44px; height:44px; display:grid; place-items:center; margin:0; padding:0; border:0; border-radius:50%; background:none; color:#f7f5f0b3; cursor:pointer; --focus:var(--accent); }
.hero-pause[hidden],.hero--atlantic:not([data-pinned]) .hero-pause { display:none; }
.hero-pause::before { content:''; position:absolute; inset:7px; border:1px solid #f7f5f040; border-radius:50%; background:#11131559; transition:border-color var(--micro),background var(--micro); }
.hero-pause:hover { color:var(--on-dark); }
.hero-pause:hover::before { border-color:#f7f5f099; background:#1113158c; }
.hero-pause:focus-visible { outline-offset:-3px; }
.hero-pause svg { position:relative; width:11px; height:11px; }
.hero-pause .hp-play,.hero-pause[aria-pressed="true"] .hp-pause { display:none; }
.hero-pause[aria-pressed="true"] .hp-play { display:block; }
@media(max-width:768px) { .hero-pause { top:calc(var(--header-row,82px) + 2px); right:13px; } }
/* a phone turned sideways: the buttons step back from the rail and the pause ring under it */
@media(min-width:769px) and (max-width:1100px) and (max-height:520px) and (orientation:landscape) { .hero--atlantic .hero-actions { margin-right:24px; } }
@media(prefers-reduced-motion:reduce) { .hero-pause { display:none !important; } }
@media(prefers-reduced-motion:no-preference) { .hero-pause { animation:enter 700ms var(--ease) 1.2s backwards; } }
/* paused, the cue's drop of light holds still too */
.hero--atlantic[data-paused] .hero-scroll-line::after { animation-play-state:paused; }

/* the scroll cue: a quiet label and a thin line with a slow drop of light, centred at the
   foot of the first frame, between the headline and the buttons. It is decoration (the page
   scrolls as any page does), so it is hidden from assistive technology, and it goes as soon
   as the story starts. It needs the free middle of a foot laid out as a row: a laptop or
   wider (from 1200 px, where the gap is wide enough) and a phone turned sideways. Where the
   buttons fill the foot there is no room for it, and none is made */
.hero-scroll { position:absolute; z-index:1; left:50%; bottom:clamp(28px,4.4vh,48px); translate:-50% 0; display:none; flex-direction:column; align-items:center; gap:10px; margin:0; pointer-events:none;
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.2em; text-indent:.2em; text-transform:uppercase; color:#f7f5f080; text-shadow:0 0 12px #111315cc; transition:opacity 400ms var(--ease); }
.hero--atlantic[data-pinned] .hero-scroll { display:flex; }
.hero--atlantic[data-pinned][data-scrolled] .hero-scroll { opacity:0; }
.hero-scroll-line { position:relative; width:1px; height:30px; overflow:hidden; background:#f7f5f024; }
.hero-scroll-line::after { content:''; position:absolute; left:0; top:0; width:1px; height:12px; background:var(--on-dark); transform:translateY(-12px); }
@keyframes scroll-cue { 0% { transform:translateY(-12px); } 55%,100% { transform:translateY(30px); } }
@media(prefers-reduced-motion:no-preference) {
  .hero-scroll-line::after { animation:scroll-cue 2.4s var(--ease) 1.6s infinite; }
  .hero-scroll { animation:enter 700ms var(--ease) 1.1s backwards; }
}
@media(max-width:1199px) { .hero--atlantic[data-pinned] .hero-scroll { display:none; } }
@media(min-width:769px) and (max-width:1100px) and (max-height:520px) and (orientation:landscape) { .hero--atlantic[data-pinned] .hero-scroll { display:flex; } }
/* without the story the five areas are a quiet list under the headline; with it they
   stay for screen readers only (the story layer itself is aria-hidden) */
.hero-directions { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; list-style:none;
  font:500 12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:#f7f5f0a6; }
/* shown, the list sits just above the headline and the buttons, clear of the header and
   the mark (at the top of the column it ran into the navigation) */
.hero--atlantic[data-webgl=off] .hero-directions { position:static; width:auto; height:auto; margin:auto 0 0; clip-path:none; overflow:visible; white-space:normal; }
.hero--atlantic[data-webgl=off] .hero-foot { margin-top:28px; }
@media(prefers-reduced-motion:reduce) { .hero-directions { position:static; width:auto; height:auto; margin:auto 0 0; clip-path:none; overflow:visible; white-space:normal; } .hero-foot { margin-top:28px; } }
/* without the story (reduced motion, no WebGL) the hero is a plain section: its column
   starts under the mark, so the list and the foot can never run into it; on a phone the
   mark is smaller and higher there, so the buttons still fit on the first screen */
.hero--atlantic:not([data-pinned]) .hero-shell { padding-top:calc(var(--mark-cy) + var(--mark-half) + 20px); }
@media(max-width:768px) { .hero--atlantic:not([data-pinned]) { --mark-w:min(60vw,260px); --mark-cy:calc(var(--header-clear) + 44px + var(--mark-half)); } }
.hero-directions:not(.sr-only) { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; max-width:760px; }
@media(max-width:768px) {
  .hero--atlantic { --story-extra:130vh; }
  .hero-rail { display:none !important; }
  .hero-story { gap:10px; }
  .hs-index { font-size:12px; }
  .hs-flow { font-size:11px; letter-spacing:.1em; }
}
/* ---------- The figures under the hero: one line drifting on the hero's sea ----------
   The band carries on the sea at the foot of the hero: its colour (sampled from the scene:
   this base under half the hero's grain renders as the sea's #0f1b26) and its grain, with a hair of light on top for the waterline. The five figures run as one
   line in the hero's own type: the figure in Inter, what it counts in the mono capitals of
   the coordinates, a Saffron point between them. figures.js lays copies end to end and sets
   the row moving; without it (no script, reduced motion) the row stands and scrolls by hand. */
.figures { --sea:#0a1621; --fade:clamp(36px,7vw,132px); --gap:clamp(26px,3.3vw,56px); position:relative; z-index:3; display:flex; align-items:center; min-height:clamp(72px,6.6vw,96px); overflow:hidden; background:var(--sea); color:var(--on-dark); box-shadow:inset 0 1px 0 #f7f5f01c; --focus:var(--accent); }
.figures::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.figures-view { position:relative; z-index:1; flex:1; min-width:0; align-self:stretch; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); }
.figures-view::-webkit-scrollbar { display:none; }
.figures[data-flowing] .figures-view { overflow:hidden; }
.figures-track { display:flex; width:max-content; }
.figures[data-flowing] .figures-track { will-change:transform; }
.credibility-bar { display:flex; flex:none; align-items:baseline; margin:0; padding:0; list-style:none; }
.figures:not([data-flowing]) .credibility-bar { padding-inline:calc(var(--fade) - var(--gap)); }
.credibility-bar li { position:relative; display:flex; align-items:baseline; gap:.78em; padding-inline:var(--gap); white-space:nowrap; }
.credibility-bar li::before { content:''; position:absolute; left:-3px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--accent); }
.figures:not([data-flowing]) .credibility-bar li:first-child::before { display:none; }
.credibility-bar strong { font-size:clamp(20px,1.8vw,28px); font-weight:500; line-height:1; letter-spacing:-.025em; color:var(--on-dark); }
.credibility-bar span { font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; color:#f7f5f0a3; }
/* the pause (WCAG 2.2.2), the hero's ring, standing right under the hero's own */
.figures-pause { position:relative; z-index:2; flex:none; width:44px; height:44px; display:grid; place-items:center; margin:0 max(0px,calc(clamp(20px,2.4vw,40px) - 21.5px)) 0 0; padding:0; border:0; border-radius:50%; background:none; color:#f7f5f0b3; cursor:pointer; }
.figures-pause[hidden] { display:none; }
.figures-pause::before { content:''; position:absolute; inset:7px; border:1px solid #f7f5f040; border-radius:50%; background:#11131559; transition:border-color var(--micro),background var(--micro); }
.figures-pause:hover { color:var(--on-dark); }
.figures-pause:hover::before { border-color:#f7f5f099; background:#1113158c; }
.figures-pause:focus-visible { outline-offset:-3px; }
.figures-pause svg { position:relative; width:11px; height:11px; }
.figures-pause .fp-play,.figures-pause[aria-pressed="true"] .fp-pause { display:none; }
.figures-pause[aria-pressed="true"] .fp-play { display:block; }
@media(max-width:680px) {
  .figures { --gap:22px; min-height:64px; }
  .credibility-bar strong { font-size:18px; }
  .credibility-bar span { font-size:10.5px; letter-spacing:.12em; }
  .figures-pause { margin-right:6px; }
}
:where(a,button,summary):focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:5px; }
.capabilities,.site-footer,.deliverable--dark { --focus:var(--accent); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes headline-enter { from { opacity:0; clip-path:inset(100% 0 0); transform:translateY(25px); } to { opacity:1; clip-path:inset(0); transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) {
 .site-header:is([data-mode="first"],[data-mode="keys"],:not([data-mode])) :is(.brand-logo,.lang--row) { animation:enter 650ms var(--ease) 100ms backwards; }
 .hero--atlantic .hero-eyebrow { animation:enter 650ms var(--ease) 200ms backwards; }
 .hero--atlantic .hero-title-line { animation:headline-enter 800ms var(--ease) 350ms backwards; }
 .hero--atlantic .hero-title-line:nth-child(2) { animation-delay:470ms; }.hero--atlantic .hero-title-line:nth-child(3) { animation-delay:590ms; }
 .hero--atlantic .hero-note { animation:enter 750ms var(--ease) 750ms backwards; }
 .hero--atlantic .hero-actions a { animation:enter 700ms var(--ease) 850ms backwards; }.hero--atlantic .hero-actions a:nth-child(2) { animation-delay:950ms; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; }
}

/* ---------- Selected work: the estate as a system, then four websites on their live sites ---------- */
.selected-work { position:relative; padding:clamp(88px,9vw,140px) 0 clamp(72px,7vw,110px); background:var(--paper); overflow:hidden; }
.selected-work > .container { position:relative; z-index:1; width:min(1520px,calc(100% - 96px)); }
.selected-work::before { content:''; position:absolute; left:18%; right:-8%; top:18%; height:58%; background:radial-gradient(52% 58% at 50% 45%,var(--white),#f7f5f000 72%); pointer-events:none; }

.work-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:34px 64px; align-items:end; margin-bottom:clamp(48px,5vw,80px); }
.work-intro > div { min-width:0; }
.work-intro .eyebrow { display:flex; align-items:center; gap:12px; margin:0; color:var(--muted); }
.work-intro .eyebrow > span { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.work-intro h2 { margin-top:20px; font-size:var(--text-section); line-height:1.04; letter-spacing:-.042em; color:var(--ink); }
.work-lede { max-width:48ch; font-size:var(--text-lead); line-height:1.5; color:var(--body); }

/* Maria Martin Estate as a system: a block of its own above the websites. The pill and its
   Saffron dot say what it is; the stage is three flat layers of real screens, back to
   front: the dashboard, the deal board, the live site on a phone. work.js drifts them a
   little in the plane (never in 3D, so they stay sharp). */
.work-system { display:grid; grid-template-columns:minmax(290px,31%) minmax(0,1fr); gap:clamp(32px,4vw,76px); align-items:center; margin-bottom:clamp(96px,9vw,150px); }
.system-copy { min-width:0; }
.system-pill { display:inline-flex; align-items:center; gap:10px; margin:0; padding:7px 13px 7px 11px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--white);
  font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.16em; color:var(--ink); }
.system-pill span { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px #f4b00029; }
.system-title { margin-top:22px; font-size:clamp(2.4rem,3.4vw,3.6rem); line-height:1.02; letter-spacing:-.04em; color:var(--ink); }
.system-position { margin-top:14px; font-size:15px; color:var(--muted); }
.system-statement { margin-top:22px; max-width:30ch; font-size:clamp(17px,1.2vw,21px); line-height:1.36; color:var(--body); }
.system-facts { display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:12px 26px; margin:30px 0 0; padding:0; list-style:none; }
.system-facts li { display:flex; align-items:center; gap:10px; font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.system-facts li::before { content:''; width:12px; height:1px; background:var(--ink); opacity:.45; }
.system-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; }
.system-actions .case-cta { margin-top:0; }
.system-visit { position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--ink); }
.system-visit::before { content:''; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity var(--micro),transform 320ms var(--ease); }
.system-visit > span:first-child { transition:transform 320ms var(--ease),text-decoration-color var(--micro); }
.system-visit:is(:hover,:focus-visible)::before { opacity:1; transform:none; }
.system-visit:is(:hover,:focus-visible) > span:first-child { transform:translateX(12px); }
.system-visit > span:first-child { text-decoration:underline; text-decoration-color:#11131559; text-underline-offset:6px; }
.system-visit:hover > span:first-child { text-decoration-color:var(--ink); }
.system-stage { position:relative; min-width:0; }
.system-stack { position:relative; aspect-ratio:8/5.4; }
.system-layer { position:absolute; }
.system-layer .browser { transform:none; }
.system-layer .screen { aspect-ratio:16/10; overflow:hidden; background:#fff; }
.system-layer .screen img { display:block; width:100%; height:auto; max-width:none; }
.system-layer .screen img:not([src]) { visibility:hidden; }
.system-layer--dashboard { left:0; top:0; width:66%; }
.system-layer--deals { right:0; top:17%; width:66%; }
.system-layer--phone { left:24%; bottom:-3%; width:19%; }
.system-layer--phone .phone { transform:none; }
.system-layer--phone .screen { aspect-ratio:390/844; background:var(--brand-onyx); }
.system-layer--phone .shot { position:absolute; left:0; top:0; }
.system-stage > .stage-note { margin-top:26px; }
/* the websites under a sub-heading of their own: a hairline, the title, and how many in mono */
.work-group { display:flex; align-items:baseline; gap:18px; margin:clamp(24px,3vw,48px) 0 clamp(32px,3.4vw,52px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line);
  font-size:clamp(1.75rem,2.4vw,2.5rem); line-height:1.05; letter-spacing:-.035em; color:var(--ink); }
.work-group small { margin-left:auto; font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.16em; color:var(--muted); }
/* the switcher's counter and arrows sit right under the stage, so both are on screen together */
.selected-work .case-nav { position:relative; z-index:3; width:max-content; margin:clamp(18px,2vw,28px) 0 0 auto; }
/* the system block arrives once: its three layers rise one after another (work.js); a view
   transition from the case page brings the deal board and the phone by itself */
@media(prefers-reduced-motion:no-preference) {
 html[data-js] .work-system:not(.is-in) .system-layer > * { opacity:0; }
 .work-system.is-in:not(.is-morphed) .system-layer > * { animation:system-rise 900ms var(--ease) backwards; }
 .work-system.is-in:not(.is-morphed) .system-layer--deals > * { animation-delay:130ms; }
 .work-system.is-in:not(.is-morphed) .system-layer--phone > * { animation-delay:260ms; }
}
@keyframes system-rise { from { opacity:0; translate:0 36px; } }

/* The four cases share one grid cell: the active one is shown, the others wait unseen
   (their own parts are transparent too, so no title of theirs ever reads through). */
.featured-cases { display:grid; }
.featured-case { grid-area:1/1; display:grid; grid-template-columns:minmax(290px,31%) minmax(0,1fr); gap:clamp(32px,4vw,76px); align-items:center; visibility:hidden; pointer-events:none; }
.featured-case.is-active,.featured-case.is-leaving { visibility:visible; }
.featured-case.is-active { pointer-events:auto; }
.featured-case:not(.is-active):not(.is-leaving) :is(.case-copy > *,.layer,.case-stage > .stage-note) { opacity:0; }

.case-number { display:flex; align-items:center; gap:14px; margin:0; font-size:12px; letter-spacing:.18em; color:var(--muted); }
.case-number span { width:30px; height:2px; background:var(--accent); }
.case-title { margin-top:16px; font-size:clamp(2.4rem,3.4vw,3.6rem); line-height:1.02; letter-spacing:-.04em; color:var(--ink); }
.case-position { margin-top:14px; font-size:15px; color:var(--muted); }
.case-statement { margin-top:22px; font-size:clamp(17px,1.2vw,21px); line-height:1.36; color:var(--body); }
.case-capabilities { display:grid; gap:14px; margin:30px 0 0; padding:0; list-style:none; }
.case-capabilities li { display:flex; align-items:flex-start; gap:13px; }
.capability-icon { box-sizing:border-box; width:36px; height:36px; flex:none; padding:7px; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink); stroke-width:1.5; }
.case-capabilities strong { display:block; font-size:15px; font-weight:550; color:var(--ink); }
.case-capabilities span { display:block; margin-top:2px; font-size:13px; color:var(--muted); }
.case-cta { display:inline-flex; align-items:center; gap:14px; min-height:56px; margin-top:32px; padding:0 var(--btn-px); border-radius:var(--btn-radius); background:var(--ink); color:var(--on-dark); font-size:16px; box-shadow:var(--btn-shine-dark); transition:background var(--micro),transform 120ms; }
.case-cta:hover { background:var(--onyx-hover); }
.case-cta:active { transform:scale(.98); }

/* The stage. Its layers stand flat, and so sharp, at rest: Chrome rasterises a layer
   held in 3D (a tilt of 0deg is enough) at a lower scale, and on a Retina screen the
   sites' text went soft. Depth is a moment of the motion only: the entrance and the
   switch pass through it (--z). The pointer spreads the layers in the plane instead,
   the near ones further (--k, work.js sets --px and --py from -1 to 1). */
.case-stage { position:relative; perspective:1600px; }
.stack { position:relative; aspect-ratio:8/5.3; transform-style:preserve-3d; }
.layer { position:absolute; transform:translate(calc(var(--dx,0px) + var(--px,0) * var(--k,0px)),calc(var(--dy,0px) + var(--py,0) * var(--k,0px) - var(--lift,0px))); transition:transform 560ms var(--ease),opacity 320ms ease; }
.layer[data-depth="0"] { --k:4px; }
.layer[data-depth="1"] { --z:-40px; --k:-4px; }
.layer[data-depth="2"] { --z:-80px; --k:-7px; }
.layer[data-depth="3"] { --z:-120px; --k:-10px; }
.layer[data-depth="4"] { --z:-160px; --k:-13px; }
.layer[data-depth="-1"] { --z:50px; --k:10px; }
.layer[data-depth="-2"] { --z:80px; --k:14px; }
.stage-note { margin:0; font-size:11px; letter-spacing:.06em; color:var(--muted); }
.case-stage > .stage-note { position:absolute; left:2px; bottom:-34px; }
.layer--site .stage-note { position:absolute; left:2px; top:calc(100% + 16px); white-space:nowrap; }

/* The live site in a browser frame and on a phone. Scrolling moves each capture inside its
   screen at its own pace (work.js sets the transforms); the pointer draws a soft light
   across the glass. */
.browser { position:relative; border-radius:12px; overflow:hidden; background:var(--brand-onyx); transform:translateY(var(--py-browser,0px));
  box-shadow:0 60px 110px -40px #11131580,0 22px 40px -22px #11131559,0 0 0 1px #11131512; }
.browser-bar { display:flex; align-items:center; gap:7px; height:30px; padding:0 14px; background:var(--onyx-raised); }
.browser-bar > span { width:9px; height:9px; flex:none; border-radius:50%; background:#f7f5f02e; }
.browser-bar b { min-width:0; margin-left:12px; overflow:hidden; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em; white-space:nowrap; text-overflow:ellipsis; color:#f7f5f099; }
.browser-bar i { width:6px; height:6px; flex:none; margin-left:auto; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #f4b00026; }
.screen { position:relative; overflow:hidden; background:var(--brand-onyx); }
.browser .screen { aspect-ratio:16/10; }
.shot { position:absolute; left:0; top:0; display:block; width:100%; height:auto; }
.shot:not([src]) { visibility:hidden; }
.phone { position:relative; padding:7px; border-radius:32px; background:var(--brand-onyx); transform:translateY(var(--py-phone,0px));
  box-shadow:0 50px 90px -30px #1113158c,inset 0 0 0 1px #ffffff14; }
.phone::before { content:''; position:absolute; z-index:2; top:14px; left:35%; width:30%; height:14px; border-radius:10px; background:var(--brand-onyx); }
.phone .screen { aspect-ratio:390/844; border-radius:25px; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .screen::after { content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
   background:radial-gradient(60% 50% at var(--mx,50%) var(--my,30%),#ffffff24,#fff0 60%),linear-gradient(115deg,#ffffff12,#fff0 38%); }
}

/* Where the layers sit: the browser on the left, the phone over its right edge, the
   cards over the frame's edges. */
.stage--site .layer--site { left:0; top:3%; width:80%; }
.stage--site .layer--phone { right:2.5%; bottom:-2%; width:22%; }
.stage--site .layer--card-a { left:-4%; top:46%; width:min(270px,31%); }
.stage--site .layer--card-b { right:2%; top:10%; width:min(240px,27%); }
/* the sites whose own headline and buttons sit on the left get their card over the picture side */
.stage--soul .layer--card-a,.stage--idsn .layer--card-a { left:auto; right:2%; top:12%; width:min(270px,31%); }

.layer-card { padding:14px 15px; border:1px solid var(--line); border-radius:12px; background:var(--white); box-shadow:0 18px 40px #11131512,0 2px 4px #1113150a; transform:translateY(var(--py-card,0px)); }
.layer-head { display:flex; align-items:center; gap:10px; }
.layer-icon { box-sizing:border-box; width:28px; height:28px; flex:none; padding:5px; border-radius:8px; background:var(--surface); color:var(--ink); stroke-width:1.6; }
.layer-head strong { display:block; font-size:12.5px; font-weight:550; color:var(--ink); line-height:1.25; }
.layer-head span { display:block; margin-top:1px; font-size:10.5px; color:var(--muted); }
.layer-row { display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:11px; color:var(--body); }
.layer-row i { width:6px; height:6px; flex:none; border-radius:50%; background:var(--ink); }
.layer-row:nth-of-type(2) i { opacity:.6; }
.layer-row:nth-of-type(3) i { opacity:.35; }
.layer-row small { margin-left:auto; font-size:10px; color:var(--muted); }
.layer-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.layer-tags span { padding:4px 8px; border-radius:6px; background:var(--surface); font-size:10px; color:var(--body); }
.layer-tags--codes span { padding:4px 9px; border:1px solid var(--line); border-radius:var(--radius-pill); background:none; font:500 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em; color:var(--ink); }
.layer-note { margin-top:10px; font-size:11px; line-height:1.45; color:var(--muted); }
.layer-steps { display:flex; flex-wrap:wrap; gap:5px 0; margin:11px 0 0; font:500 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.layer-steps span:not(:last-child)::after { content:''; display:inline-block; width:3px; height:3px; margin:0 8px 2px 7px; border-radius:50%; background:var(--accent); vertical-align:middle; }

/* The rail: the four sites' first screens. The chosen one is in full colour with a
   Saffron line along its foot; the others wait a little muted. */
.work-rail { margin-top:clamp(72px,7.5vw,120px); }
.project-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.5vw,26px); margin:0; padding:0; list-style:none; }
.rail-card { display:block; width:100%; padding:0; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.rail-card:focus-visible { outline-offset:6px; }
.rail-image { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; border-radius:10px; background:var(--brand-onyx); box-shadow:0 0 0 1px var(--line); }
.rail-image img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.94); transition:transform 600ms var(--ease),filter 400ms ease; }
.rail-image::after { content:''; position:absolute; inset:auto 0 0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 460ms var(--ease); }
.rail-card.is-current .rail-image::after { transform:scaleX(1); }
.rail-card:is(:hover,:focus-visible,.is-current) .rail-image img { filter:none; }
.rail-card:hover .rail-image img { transform:scale(1.03); }
.rail-number { display:block; margin-top:14px; font:500 12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; color:var(--muted); }
.rail-title { display:block; margin-top:5px; font-size:16px; line-height:1.3; color:#3a3f43; transition:color var(--micro); }
.rail-card:is(:hover,.is-current) .rail-title { color:var(--ink); }
.rail-note { display:block; margin-top:3px; font-size:13px; color:var(--muted); }

.work-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-top:clamp(44px,4.5vw,72px); }
/* arriving at #work (the header, "All work"), the section starts at the top of the window:
   the page's 28 px of breathing room would show a band of the hero above it */
#work { scroll-margin-top:-28px; }
/* on a wider screen so does every section the island leads to: the band would put the
   island across the seam, and the sections' own top padding keeps their labels well clear
   of it. (A phone keeps the band: there the labels need it to clear the bar, which tucks
   away on the way down anyway) */
@media(min-width:1101px) { :is(#solutions,#approach,#stories,#faq,#contact) { scroll-margin-top:-28px; } }
.work-closing { margin:0; font-size:clamp(14px,1vw,17px); line-height:1.6; letter-spacing:.13em; text-transform:uppercase; color:var(--body); }
.work-closing::before { content:''; display:block; width:40px; height:2px; margin-bottom:16px; background:var(--accent); }
.case-nav { display:flex; align-items:center; gap:14px; }
.case-count { font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; color:var(--muted); }
.case-step svg,.story-step svg { display:block; }
.case-step { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--ink); font-size:15px; transition:border-color var(--micro),background var(--micro); }
.case-step:hover { border-color:var(--ink); background:var(--surface); }

/* Hover: the stack opens up a little, the hovered layer steps forward. */
@media(hover:hover) and (pointer:fine) {
 .stack:hover .layer--site { --dy:-4px; }
 .stack:hover .layer--phone { --dx:6px; --dy:-8px; }
 .stack:hover .layer--card-a { --dx:-10px; --dy:6px; }
 .stack:hover .layer--card-b { --dx:8px; --dy:-8px; }
 .layer:hover { --lift:6px; }
}

/* Motion. Before the section is seen its parts wait unseen; then the intro, the active
   case and the rail arrive. Switching cases (work.js): the outgoing copy lifts away and
   its stage recedes; from 160 ms the new title rises out of its mask like the hero's
   headline, the copy follows, and the stage assembles, browser first. */
@media(prefers-reduced-motion:no-preference) {
 .selected-work.is-armed .work-intro:not(.is-in) > *,
 .selected-work.is-armed .work-rail:not(.is-in) li,
 .selected-work.is-armed .featured-cases:not(.is-in) .featured-case.is-active :is(.case-copy > *,.layer,.case-stage > .stage-note) { opacity:0; }
 .work-intro.is-in > * { animation:enter 660ms var(--ease) 100ms backwards; }
 .work-intro.is-in > :nth-child(2) { animation-delay:200ms; }
 .work-rail.is-in li { animation:enter 620ms var(--ease) backwards; }
 .work-rail.is-in li:nth-child(2) { animation-delay:70ms; }
 .work-rail.is-in li:nth-child(3) { animation-delay:140ms; }
 .work-rail.is-in li:nth-child(4) { animation-delay:210ms; }
 .featured-case.is-entering .case-number { animation:enter 520ms var(--ease) 160ms backwards; }
 .featured-case.is-entering .case-title { animation:headline-enter 720ms var(--ease) 200ms backwards; }
 .featured-case.is-entering .case-position { animation:enter 560ms var(--ease) 320ms backwards; }
 .featured-case.is-entering .case-statement { animation:enter 560ms var(--ease) 370ms backwards; }
 .featured-case.is-entering .case-capabilities { animation:enter 560ms var(--ease) 420ms backwards; }
 .featured-case.is-entering .case-cta { animation:enter 560ms var(--ease) 470ms backwards; }
 .featured-case.is-entering .layer { animation:layer-enter 720ms var(--ease) 380ms backwards; }
 .featured-case.is-entering .layer--site { animation-delay:160ms; }
 .featured-case.is-entering .layer--phone { animation-delay:280ms; }
 .featured-case.is-entering .layer--card-b { animation-delay:460ms; }
 .featured-case.is-entering .case-stage > .stage-note { animation:enter 520ms var(--ease) 600ms backwards; }
 .featured-case.is-leaving .case-copy > * { animation:copy-leave 180ms cubic-bezier(.4,0,1,1) both; }
 .featured-case.is-leaving .case-copy > :nth-child(2) { animation-delay:15ms; }
 .featured-case.is-leaving .case-copy > :nth-child(3) { animation-delay:30ms; }
 .featured-case.is-leaving .case-copy > :nth-child(4) { animation-delay:45ms; }
 .featured-case.is-leaving .case-copy > :nth-child(5) { animation-delay:60ms; }
 .featured-case.is-leaving .case-copy > :nth-child(6) { animation-delay:75ms; }
 .featured-case.is-leaving :is(.layer,.case-stage > .stage-note) { animation:layer-leave 320ms cubic-bezier(.4,0,.2,1) both; }
}
@keyframes layer-enter { from { opacity:0; transform:translate3d(calc(var(--dx,0px) + 18px),calc(var(--dy,0px) + 30px),calc(var(--z,0px) - 90px)) rotateY(-7deg); } }
@keyframes copy-leave { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-10px); } }
@keyframes layer-leave { from { opacity:1; } to { opacity:0; transform:translate3d(var(--dx,0px),var(--dy,0px),calc(var(--z,0px) - 120px)); } }

@media(min-width:1101px) and (max-width:1439px) {
 .featured-case { grid-template-columns:minmax(260px,34%) minmax(0,1fr); gap:34px; }
 .case-capabilities li:nth-child(n+5) { display:none; }
 .layer-head strong { font-size:11.5px; } .layer-head span { font-size:9.5px; }
 .layer-row { font-size:10px; }
 .layer-steps { font-size:9.5px; letter-spacing:.08em; }
 .stage--site .layer--phone { width:20%; }
 .stage--soul .layer--card-a,.stage--idsn .layer--card-a { top:9%; }
}
@media(max-width:1100px) {
 .selected-work > .container { width:min(900px,calc(100% - 64px)); --gutter:max(32px,calc(50vw - 450px)); }
 .work-system { grid-template-columns:minmax(0,1fr); gap:44px; }
 .featured-case { grid-template-columns:minmax(0,1fr); gap:44px; }
 .case-stage { perspective:1200px; }
 .layer[data-depth="1"] { --z:-24px; } .layer[data-depth="2"] { --z:-48px; }
 .layer[data-depth="3"] { --z:-72px; } .layer[data-depth="4"] { --z:-96px; }
 .layer[data-depth="-1"] { --z:30px; } .layer[data-depth="-2"] { --z:48px; }
 .stage--site .layer--card-a { left:0; }
 .stage--site .layer--card-b,.stage--soul .layer--card-a,.stage--idsn .layer--card-a { left:auto; right:1.5%; }
 .case-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); }
 /* the rail becomes one row that scrolls sideways, edge to edge */
 .work-rail { margin-inline:calc(var(--gutter) * -1); }
 .project-rail { display:flex; gap:16px; overflow-x:auto; padding:2px var(--gutter) 8px; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain; }
 .project-rail::-webkit-scrollbar { display:none; }
 .project-rail li { flex:0 0 40%; scroll-snap-align:start; }
}
@media(max-width:680px) {
 .selected-work { padding:72px 0 64px; }
 .selected-work > .container { width:calc(100% - 40px); --gutter:20px; }
 .selected-work::before { display:none; }
 .work-intro { grid-template-columns:1fr; gap:20px; margin-bottom:36px; }
 .case-title { font-size:clamp(2rem,9vw,2.6rem); }
 .case-capabilities { grid-template-columns:1fr; gap:12px; }
 .case-cta { width:100%; justify-content:center; }
 .case-stage { perspective:none; }
 .stack { transform:none; }
 /* a site: the browser takes the width, the phone hangs over its corner, no cards */
 .stage--site .stack { aspect-ratio:auto; padding-bottom:31%; }
 .stage--site .layer--site { position:relative; left:auto; top:auto; width:100%; }
 .stage--site .layer--phone { right:3%; bottom:-3%; width:34%; }
 .stage--site :is(.layer--card-a,.layer--card-b) { display:none; }
 .layer--site .stage-note { top:calc(100% + 12px); max-width:58%; white-space:normal; line-height:1.45; }
 .phone { padding:5px; border-radius:22px; }
 .phone .screen { border-radius:17px; }
 .phone::before { top:9px; height:9px; }
 .case-stage > .stage-note { position:static; margin-top:10px; }
 .project-rail { gap:12px; }
 .project-rail li { flex-basis:72%; }
 .work-foot { flex-direction:column; align-items:flex-start; gap:24px; }
 .work-system { margin-bottom:72px; }
 .system-title { font-size:clamp(2rem,9vw,2.6rem); }
 .system-facts { grid-template-columns:minmax(0,1fr); }
 .system-actions .case-cta { width:100%; justify-content:center; }
 .system-stack { aspect-ratio:8/6.6; }
 .system-layer--dashboard { width:78%; }
 .system-layer--deals { top:22%; width:78%; }
 .system-layer--phone { left:auto; right:4%; bottom:-2%; width:27%; }
 .system-layer--phone .phone { padding:4px; border-radius:18px; }
 .system-layer--phone .phone .screen { border-radius:14px; }
 .system-layer--phone .phone::before { top:8px; height:7px; }
 .system-layer .browser-bar { height:22px; padding:0 10px; gap:5px; }
 .system-layer .browser-bar > span { width:6px; height:6px; }
 .system-layer .browser-bar b { font-size:9px; margin-left:8px; }
}
@media(prefers-reduced-motion:reduce) {
 .selected-work :is(.layer,.stack,.featured-case,.browser,.phone,.layer-card,.shot,.system-layer) { transform:none!important; transition:none!important; }
 .selected-work .rail-image img { transition:none; }
}

/* ---------- 02 · Capabilities ----------
   The section's own rules are in capabilities.css, linked just before the section, so they
   never hold up the first paint. These are shared with other sections. */
.accent-rule { width:34px; height:2px; background:var(--accent); flex:none; transform-origin:left; }
.brand-cta { display:inline-flex; align-items:center; gap:14px; min-height:var(--btn-h); padding:0 var(--btn-px); border-radius:var(--btn-radius); background:var(--ink); color:var(--on-dark); font-size:16px; white-space:nowrap; box-shadow:var(--btn-shine-dark); transition:background var(--micro),transform 120ms; }
.brand-cta::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); transition:transform var(--micro); }
.brand-cta:hover { background:var(--onyx-hover); }
.brand-cta:hover::before { transform:scale(1.25); }
.brand-cta:active { transform:scale(.98); }
@media(max-width:680px) { .brand-cta { width:100%; justify-content:center; } }
@keyframes rule-draw { from { transform:scaleX(0); } }
@keyframes line-reveal { from { opacity:0; clip-path:inset(0 0 105% 0); transform:translateY(24px); } }

/* ---------- 03 · Process ----------
   The section's rules are in process.css, linked just before the section, so they never
   hold up the first paint. */

/* ---------- 04 · Client stories ---------- */
.stories { position:relative; padding:clamp(88px,9vw,120px) 0; background:var(--paper); overflow:hidden; }
.stories > .container { width:min(1520px,calc(100% - 128px)); }
.stories-head { max-width:760px; margin:0 auto clamp(40px,4vw,64px); text-align:center; }
.stories .eyebrow { display:flex; align-items:center; justify-content:center; gap:14px; margin:0; letter-spacing:.2em; color:var(--muted); }
.stories h2 { margin-top:20px; font-size:clamp(30px,3.5vw,58px); line-height:1.02; letter-spacing:-.038em; color:var(--ink); }
.stories h2 span { display:block; }
.stories-lede { margin:20px auto 0; max-width:720px; font-size:var(--text-lead); line-height:1.5; color:var(--body); }
.stories-sample { display:inline-block; margin:20px 0 0; padding:7px 14px; border:1px dashed var(--ink); border-radius:6px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:#f4b0001a; }

.stories-stage { position:relative; height:clamp(440px,36vw,520px); perspective:1800px; transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform 420ms ease-out; }
.story { position:absolute; left:50%; top:0; width:min(960px,66%); height:100%; display:grid; grid-template-columns:60% 40%;
  border:1px solid var(--line); border-radius:20px; background:var(--white); box-shadow:0 28px 80px #1113151a; overflow:hidden;
  transform:translateX(-50%); transition:transform 680ms var(--ease),opacity 460ms ease,box-shadow 460ms ease;
  opacity:0; visibility:hidden; pointer-events:none; }
.story[data-pos="0"] { opacity:1; visibility:visible; pointer-events:auto; z-index:3; }
.story[data-pos="-1"],.story[data-pos="1"] { opacity:.7; visibility:visible; pointer-events:auto; cursor:pointer; z-index:2; box-shadow:0 20px 50px #11131512; }
.story[data-pos="-1"] { transform:translateX(-112%) translateZ(-100px) rotateY(5deg) scale(.92); }
.story[data-pos="1"] { transform:translateX(12%) translateZ(-100px) rotateY(-5deg) scale(.92); }
.story[data-pos="-1"]:hover,.story[data-pos="1"]:hover { opacity:.86; }
.story[data-pos="-1"]:hover { transform:translateX(-112%) translateZ(-100px) rotateY(5deg) scale(.935); }
.story[data-pos="1"]:hover { transform:translateX(12%) translateZ(-100px) rotateY(-5deg) scale(.935); }
.story-visual { position:relative; overflow:hidden; background:var(--surface); }
.story-frame { position:absolute; inset:0; }
.story-frame img { width:100%; height:100%; object-fit:cover; transition:transform 620ms var(--ease); }
.story[data-pos="0"] .story-frame img { animation:shot-settle 720ms var(--ease) backwards; }
.story[data-pos="-1"]:hover .story-frame img,.story[data-pos="1"]:hover .story-frame img { transform:scale(1.02); }
@keyframes shot-settle { from { transform:translateY(8px) scale(1.015); } }
.story-body { display:flex; flex-direction:column; padding:clamp(24px,2.4vw,38px); }
.story-quote-mark { font:600 40px/1 Inter,sans-serif; color:var(--accent); }
.story-quote { margin:8px 0 0; }
.story-quote p { margin:0; font-size:clamp(18px,1.55vw,26px); line-height:1.32; letter-spacing:-.02em; color:var(--body); }
.story-divider { height:1px; margin:auto 0 0; border:0; background:var(--line); }
.story-client { display:flex; align-items:center; gap:14px; margin-top:20px; }
.story-initials { display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); font-size:15px; letter-spacing:.04em; color:var(--ink); }
.story-name { display:block; font-size:17px; font-style:normal; font-weight:500; color:var(--ink); }
.story-role { display:block; margin-top:3px; font-size:13.5px; color:var(--muted); }
.story-tags { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 0; padding:0; list-style:none; }
.story-tags li { padding:5px 11px; border-radius:7px; background:var(--surface); font-size:12px; color:var(--body); }
.story-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; align-self:flex-start;
  min-height:48px; margin-top:20px; padding:0 22px; border-radius:7px; background:var(--ink); color:var(--on-dark); font-size:15px; transition:background var(--micro); }
.story-cta:hover { background:var(--onyx-hover); }

.stories-nav { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(28px,3vw,44px); }
.story-step { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  background:var(--white); color:var(--ink); font-size:15px; transition:border-color var(--micro),color var(--micro); }
.story-step:hover { border-color:var(--accent); color:var(--ink); }
.stories-count { font-size:14px; letter-spacing:.14em; color:var(--muted); }
.stories-count b { font-weight:500; color:var(--ink); }
.stories-dots { display:flex; gap:6px; margin-left:8px; }
.stories-dots i { width:22px; height:3px; border-radius:2px; background:var(--line); transition:background 320ms ease; }
.stories-dots i.is-on { background:var(--accent); }
.stories-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(26px,2.6vw,40px); }
.stories-micro { margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.stories-more { display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }

@media(prefers-reduced-motion:no-preference) {
 .stories:not(.is-in) .accent-rule { transform:scaleX(0); }
 .stories:not(.is-in) .eyebrow,.stories:not(.is-in) .stories-lede,
 .stories:not(.is-in) .stories-nav,.stories:not(.is-in) .stories-foot > * { opacity:0; }
 .stories:not(.is-in) h2 span { opacity:0; clip-path:inset(0 0 105% 0); transform:translateY(20px); }
 .stories.is-in .accent-rule { animation:rule-draw 420ms var(--ease) backwards; }
 .stories.is-in .eyebrow { animation:enter 540ms var(--ease) 100ms backwards; }
 .stories.is-in h2 span { animation:line-reveal 700ms var(--ease) 180ms backwards; }
 .stories.is-in h2 span:nth-child(2) { animation-delay:300ms; }
 .stories.is-in .stories-lede { animation:enter 620ms var(--ease) 450ms backwards; }
 .stories.is-in .story { animation:fade-in 680ms var(--ease) 650ms backwards; }
 .stories.is-in .story:nth-child(2) { animation-delay:760ms; }
 .stories.is-in .story:nth-child(n+3) { animation-delay:820ms; }
 .stories.is-in .story.is-active .story-quote-mark { animation:enter 460ms var(--ease) backwards; }
 .stories.is-in .story.is-active .story-quote { animation:enter 480ms var(--ease) 50ms backwards; }
 .stories.is-in .story.is-active .story-client { animation:enter 480ms var(--ease) 110ms backwards; }
 .stories.is-in .story.is-active .story-tags { animation:enter 480ms var(--ease) 170ms backwards; }
 .stories.is-in .story.is-active .story-cta { animation:enter 480ms var(--ease) 230ms backwards; }
 .stories.is-in .stories-nav,.stories.is-in .stories-foot > * { animation:enter 560ms var(--ease) 1250ms backwards; }
}
@keyframes fade-in { from { opacity:0; } }

@media(min-width:1025px) and (max-width:1439px) {
 .stories > .container { width:min(1200px,calc(100% - 80px)); }
 .story { width:min(860px,74%); grid-template-columns:55% 45%; }
 .story[data-pos="-1"] { transform:translateX(-104%) translateZ(-90px) rotateY(4deg) scale(.92); }
 .story[data-pos="1"] { transform:translateX(4%) translateZ(-90px) rotateY(-4deg) scale(.92); }
 .story-quote p { font-size:clamp(17px,1.5vw,21px); }
}
@media(max-width:1024px) {
 .stories > .container { width:min(900px,calc(100% - 64px)); }
 .stories-stage { height:auto; perspective:1200px; }
 .story { position:relative; left:auto; width:100%; height:auto; grid-template-columns:55% 45%; transform:none; display:none; }
 .story[data-pos="0"] { display:grid; opacity:1; }
 .story-visual { min-height:300px; }
 .story-frame { position:relative; inset:auto; height:100%; }
}
@media(max-width:680px) {
 .stories { padding:68px 0 60px; }
 .stories > .container { width:calc(100% - 32px); }
 .stories h2 { font-size:clamp(26px,7.4vw,34px); }
 .story { grid-template-columns:minmax(0,1fr); border-radius:16px; }
 .story-visual { min-height:0; aspect-ratio:16/10; }
 .story-quote p { font-size:17px; }
 .story-cta { width:100%; }
 .stories-foot { flex-direction:column; align-items:flex-start; gap:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .stories .stories-stage,.stories .story { transform:none!important; }
 .stories .story { position:relative; left:auto; width:100%; height:auto; display:none; }
 .stories .story[data-pos="0"] { display:grid; opacity:1; }
 .stories .story-frame { position:relative; inset:auto; }
}
/* A peeking case shows its product and its name, not a clipped testimonial. */
.story-mini { display:none; padding:18px 20px 20px; }
.story-mini strong { display:block; font-size:17px; font-weight:500; color:var(--ink); }
.story-mini span { display:block; margin-top:4px; font-size:13.5px; color:var(--muted); }
.story[data-pos="-1"],.story[data-pos="1"] { grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto; }
.story[data-pos="-1"] .story-body,.story[data-pos="1"] .story-body { display:none; }
.story[data-pos="-1"] .story-mini,.story[data-pos="1"] .story-mini { display:block; }
.story[data-pos="-1"] { transform:translateX(-96%) translateZ(-100px) rotateY(5deg) scale(.92); }
.story[data-pos="1"] { transform:translateX(-4%) translateZ(-100px) rotateY(-5deg) scale(.92); }
.story[data-pos="-1"]:hover { transform:translateX(-96%) translateZ(-100px) rotateY(5deg) scale(.935); }
.story[data-pos="1"]:hover { transform:translateX(-4%) translateZ(-100px) rotateY(-5deg) scale(.935); }
@media(min-width:1025px) and (max-width:1439px) {
 .story[data-pos="-1"] { transform:translateX(-92%) translateZ(-90px) rotateY(4deg) scale(.92); }
 .story[data-pos="1"] { transform:translateX(-8%) translateZ(-90px) rotateY(-4deg) scale(.92); }
}
/* Keep each peeking caption inside the visible strip of its card. */
.story[data-pos="-1"] .story-mini { text-align:left; padding-left:10%; }
.story[data-pos="1"] .story-mini { text-align:right; padding-right:0; transform:translateX(8%); }
.story-mini strong,.story-mini span { display:inline-block; }

/* ---------- Global footer ---------- */
.site-footer { position:relative; padding:clamp(60px,6.4vw,84px) 0 clamp(26px,3vw,38px); background:var(--brand-onyx); color:#f7f5f0f5; overflow:hidden; }
.site-footer::before { content:''; position:absolute; right:-6%; top:-10%; width:64%; height:120%; pointer-events:none;
  background:none; }
.site-footer > .container { position:relative; z-index:1; width:min(1520px,calc(100% - 128px)); }
.footer-rule { height:1px; margin:0; border:0; background:#f7f5f026; }
.footer-place { display:flex; align-items:center; gap:14px; margin:20px 0 0; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#f7f5f0a8; }
.footer-place span { color:var(--accent); }
.footer-grid { display:grid; grid-template-columns:39% 23% 19% minmax(0,1fr); margin-top:clamp(34px,3.6vw,52px); }
.footer-brand { padding-right:clamp(24px,3vw,56px); }
.footer-col { padding-left:clamp(22px,2.5vw,44px); border-left:1px solid #f7f5f01f; }
.footer-logo { display:block; width:clamp(200px,17vw,250px); }
.footer-logo img { display:block; width:100%; height:auto; }
.footer-statement { margin:26px 0 0; font-size:clamp(26px,2.9vw,50px); line-height:1.05; letter-spacing:-.035em; color:var(--on-dark); }
.footer-statement span { display:block; }
.footer-copy { margin:18px 0 0; max-width:480px; font-size:15.5px; line-height:1.5; color:#f7f5f0ad; }
.footer-accent { display:block; width:52px; height:4px; margin-top:24px; border-radius:2px; background:var(--accent); transform-origin:left; }
.footer-head { margin:0 0 18px; font-size:17px; font-weight:500; color:var(--on-dark); }
.footer-col ul { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.footer-col a { position:relative; display:flex; align-items:center; min-height:44px; font-size:14.5px; color:#f7f5f0ad; transition:color var(--micro); }
/* no arrows: a Saffron dot, the CTA's own, steps in before the link and the words make room for it */
.footer-col a::before { content:''; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--accent);
  opacity:0; transform:scale(.3); transition:opacity 220ms ease,transform 320ms var(--ease); }
.footer-col a > span { transition:transform 320ms var(--ease); }
.footer-col a:is(:hover,:focus-visible) { color:var(--on-dark); }
.footer-col a:is(:hover,:focus-visible)::before { opacity:1; transform:none; }
.footer-col a:is(:hover,:focus-visible) > span { transform:translateX(16px); }
.footer-contact ul { gap:0; }
.footer-contact li { display:flex; align-items:center; gap:12px; min-height:44px; font-size:14.5px; color:#f7f5f0ad; }
.footer-contact .icon { width:18px; height:18px; flex:none; color:#f7f5f085; }
.footer-contact a { min-height:auto; justify-content:flex-start; }

.footer-sign { position:relative; display:flex; align-items:flex-end; justify-content:flex-end; min-height:74px; margin-top:clamp(20px,2.2vw,32px); }
.footer-arcs { position:absolute; right:-24px; bottom:-34px; width:clamp(150px,15vw,220px); height:auto; pointer-events:none; }
.footer-arcs .arc { fill:none; stroke:#f7f5f01f; stroke-width:1.2; stroke-linecap:round; }
.footer-arcs .arc-2 { stroke:#f7f5f014; }
.footer-arcs .arc-3 { stroke:#f7f5f00f; }
.footer-arcs .arc-dot { fill:var(--accent); transform-origin:168px 158px; }
.footer-tagline { margin:0 clamp(150px,15vw,220px) 6px 0; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:#f7f5f07a; }
.footer-rule--legal { margin-top:clamp(18px,2vw,28px); }
.footer-legal { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:20px; font-size:13.5px; color:#f7f5f08a; }
.footer-legal p { margin:0; }

@media(prefers-reduced-motion:no-preference) {
 .site-footer:not(.is-in) .footer-place,
 .site-footer:not(.is-in) .footer-brand > *,
 .site-footer:not(.is-in) .footer-col,
 .site-footer:not(.is-in) .footer-tagline,
 .site-footer:not(.is-in) .footer-legal > * { opacity:0; }
 .site-footer:not(.is-in) .footer-rule { transform:scaleX(0); }
 .site-footer:not(.is-in) .arc { stroke-dasharray:100; stroke-dashoffset:100; }
 .site-footer.is-in .footer-rule { animation:rule-draw 520ms var(--ease) backwards; transform-origin:left; }
 .site-footer.is-in .footer-place { animation:enter 520ms var(--ease) 100ms backwards; }
 .site-footer.is-in .footer-brand > * { animation:enter 560ms var(--ease) 200ms backwards; }
 .site-footer.is-in .footer-col--services { animation:enter 560ms var(--ease) 280ms backwards; }
 .site-footer.is-in .footer-col--studio { animation:enter 560ms var(--ease) 360ms backwards; }
 .site-footer.is-in .footer-contact { animation:enter 560ms var(--ease) 440ms backwards; }
 .site-footer.is-in .footer-tagline { animation:enter 540ms var(--ease) 600ms backwards; }
 .site-footer.is-in .arc { animation:arc-draw 900ms var(--ease) 650ms backwards; }
 .site-footer.is-in .arc-2 { animation-delay:740ms; }
 .site-footer.is-in .arc-3 { animation-delay:830ms; }
 .site-footer.is-in .arc-dot { animation:dot-travel 1000ms var(--ease) 700ms backwards; }
 .site-footer.is-in .footer-rule--legal { animation-delay:750ms; }
 .site-footer.is-in .footer-legal > * { animation:enter 520ms var(--ease) 820ms backwards; }
}
@keyframes arc-draw { from { stroke-dasharray:100; stroke-dashoffset:100; } to { stroke-dasharray:100; stroke-dashoffset:0; } }
@keyframes dot-travel { from { opacity:0; transform:rotate(-11deg); } 40% { opacity:1; } to { opacity:1; transform:rotate(0); } }

@media(min-width:1025px) and (max-width:1439px) {
 .site-footer > .container { width:min(1200px,calc(100% - 80px)); }
 .footer-grid { grid-template-columns:35% 24% 20% minmax(0,1fr); }
 .footer-statement { font-size:clamp(24px,2.6vw,38px); }
 .footer-copy,.footer-col a,.footer-contact li { font-size:13.5px; }
 .footer-head { font-size:15.5px; }
}
@media(max-width:1024px) {
 .site-footer > .container { width:min(900px,calc(100% - 64px)); }
 .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 0; }
 .footer-brand { grid-column:1 / -1; padding-right:0; }
 .footer-col { padding-left:0; border-left:0; padding-top:26px; border-top:1px solid #f7f5f01f; }
 .footer-col--studio { padding-left:clamp(22px,4vw,44px); border-left:1px solid #f7f5f01f; }
 .footer-contact { grid-column:1 / -1; }
 .footer-arcs { opacity:.6; }
}
@media(max-width:680px) {
 .site-footer { padding:52px 0 28px; }
 .site-footer > .container { width:calc(100% - 40px); }
 .footer-grid { grid-template-columns:minmax(0,1fr); gap:30px 0; }
 .footer-col,.footer-col--studio { padding-left:0; border-left:0; }
 .footer-statement { font-size:clamp(28px,9vw,40px); }
 .footer-sign { min-height:70px; }
 .footer-arcs { right:-46px; bottom:-30px; width:130px; opacity:.45; }
 .footer-tagline { margin-right:70px; font-size:10.5px; }
 .footer-legal { flex-direction:column; align-items:flex-start; gap:18px; }
}
@media(prefers-reduced-motion:reduce) {
 .site-footer .arc { stroke-dasharray:none; stroke-dashoffset:0; }
 .site-footer .arc-dot { transform:none; }
}

/* ---------- Legal documents ---------- */
.legal { padding:clamp(72px,7vw,104px) 0 clamp(56px,6vw,88px); background:var(--paper); }
.legal > .container { width:min(760px,calc(100% - 64px)); }
.legal-back { display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color var(--micro); }
.legal-back::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.legal-back:hover { color:var(--ink); }
.legal h1 { margin:26px 0 0; font-size:clamp(30px,3.4vw,50px); line-height:1.05; letter-spacing:-.035em; color:var(--ink); }
.legal-intro { margin-top:16px; font-size:var(--text-lead); line-height:1.5; color:var(--body); }
.legal-draft { margin:26px 0 0; padding:14px 16px; border:1px dashed var(--ink); border-radius:8px; background:#f4b0001a; font-size:14px; line-height:1.5; color:var(--ink); }
.legal-block { margin-top:clamp(32px,3.4vw,48px); }
.legal-block h2 { font-size:clamp(19px,1.6vw,24px); line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.legal-block p,.legal-block li { margin-top:12px; font-size:16px; line-height:1.6; color:var(--body); }
.legal-block ul { margin:0; padding-left:20px; }
.legal-facts { display:grid; gap:0; margin:16px 0 0; }
.legal-facts > div { display:grid; grid-template-columns:minmax(140px,30%) minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.legal-facts dt { font-size:13.5px; color:var(--muted); }
.legal-facts dd { margin:0; font-size:15.5px; color:var(--ink); }
.legal-table { width:100%; margin-top:16px; border-collapse:collapse; font-size:14.5px; }
.legal-table th { padding:10px 12px 10px 0; border-bottom:1px solid var(--line); text-align:left; font-weight:500; color:var(--muted); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; }
.legal-table td { padding:12px 12px 12px 0; border-bottom:1px solid var(--line); color:var(--body); vertical-align:top; }
.pending { padding:2px 8px; border-radius:5px; background:#f4b00033; color:var(--ink); font-size:13px; }
.legal-empty { margin-top:12px; }
.legal-stamp { margin-top:clamp(32px,3.4vw,48px); padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.footer-legal-links { display:flex; flex-wrap:wrap; gap:22px; }
.footer-legal-links a { font-size:13.5px; color:#f7f5f08a; transition:color var(--micro); }
.footer-legal-links a:hover { color:var(--on-dark); }
@media(max-width:680px) {
 .legal > .container { width:calc(100% - 40px); }
 .legal-facts > div { grid-template-columns:minmax(0,1fr); gap:4px; }
 .legal-table { font-size:13.5px; }
}

/* ---------- 04 · Questions before we start ----------
   The section's rules are in faq.css, linked just before the section. */

/* ---------- Clean first frame: the mark, the brand, the eyebrow and the foot ---------- */
/* On the first frame the header is its row alone: the big logo and the language, so a
   visitor sees whose studio this is and can change language at once. The island (the
   sections, the call to action, the phone's menu) arrives with the story (header.js reads
   hero.js's data-scrolled) and stays to the end of the page. The eyebrow sits centred in
   the row between the two; on a phone there is no room for it there, so it drops just
   under the row. Reduced motion has the island from the start. */
/* centred on the row's middle line, level with the logo and the language (the row is
   104 px tall, 92 px on a laptop, 90 px on a tablet; the eyebrow's line is 1.5em) */
.hero--atlantic[data-pinned]:not([data-scrolled]) .hero-eyebrow { top:calc(var(--header-row,104px) / 2 - .75em); }
@media(min-width:1101px) and (max-width:1599px) { .hero--atlantic { --header-row:92px; } }
@media(max-width:1100px) { .hero--atlantic { --header-row:90px; } }
@media(max-width:680px) { .hero--atlantic { --header-row:82px; } }
.hero--atlantic[data-pinned][data-scrolled] .hero-eyebrow { opacity:0; }
/* a keyboard reaching the row brings the island's links and call in (header.js: data-mode
   keys) and the eyebrow steps out of their way, as it does in the story: every link is in
   the tab order, so focus on one must never be invisible. The mouse still sees the calm
   frame (until then the island is inert). */
.hero--atlantic[data-pinned]:not([data-scrolled]):has(.site-header[data-mode="keys"]) .hero-eyebrow { opacity:0; }
/* a tablet's row is narrower: a slightly smaller eyebrow keeps clear of the logo */
@media(min-width:769px) and (max-width:1100px) {
  .hero--atlantic[data-pinned]:not([data-scrolled]) .hero-eyebrow { font-size:12px; letter-spacing:.12em; }
}
/* a phone: under the row, centred, on two balanced lines if it needs them. It no longer
   meets the header there, so it stays when the keyboard brings the menu button in */
@media(max-width:768px) {
  .hero--atlantic[data-pinned]:not([data-scrolled]) .hero-eyebrow { top:calc(var(--header-clear) - 2px); width:max-content; max-width:calc(100% - 128px); white-space:normal; text-wrap:balance; text-align:center; }
  .hero--atlantic[data-pinned]:not([data-scrolled]):has(.site-header[data-mode="keys"]) .hero-eyebrow { opacity:var(--intro,1); }
}
/* a small phone turned sideways has no height to spare under the row: the eyebrow stays
   in it, between the logo and the language, on two balanced lines if it needs them */
@media(max-width:768px) and (max-height:520px) and (orientation:landscape) {
  .hero--atlantic[data-pinned]:not([data-scrolled]) .hero-eyebrow { top:calc(var(--header-row) / 2); translate:-50% -50%; max-width:calc(100% - 400px); }
  .hero--atlantic[data-pinned]:not([data-scrolled]):has(.site-header[data-mode="keys"]) .hero-eyebrow { opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  .hero--atlantic[data-pinned]:not([data-scrolled]) .hero-eyebrow { top:var(--header-clear,112px); }
}

/* ---------- Story words around the object, like the reference, instead of a stack under it ---------- */
@media(min-width:769px) {
  .hero-story { width:min(40%,560px); transform:translateY(-50%); gap:12px; }
  .hero-story::before { inset:-40% -14%; }
  .hero--atlantic[data-frame="1"] .hero-story,
  .hero--atlantic[data-frame="3"] .hero-story { left:clamp(24px,7vw,120px); right:auto; align-items:flex-start; text-align:left; }
  .hero--atlantic[data-frame="2"] .hero-story,
  .hero--atlantic[data-frame="4"] .hero-story { left:auto; right:clamp(64px,8vw,140px); align-items:flex-end; text-align:right; }
  .hero--atlantic[data-frame="1"] .hero-story { top:calc(var(--hero-h) * .36); }
  .hero--atlantic[data-frame="2"] .hero-story { top:calc(var(--hero-h) * .42); }
  .hero--atlantic[data-frame="3"] .hero-story { top:calc(var(--hero-h) * .62); }
  .hero--atlantic[data-frame="4"] .hero-story { top:calc(var(--hero-h) * .64); }
  .hero--atlantic[data-frame="5"] .hero-story,
  /* (low on the sea, but never so low on a short screen that the closing lines run off it) */
  .hero--atlantic[data-frame="6"] .hero-story { left:50%; right:auto; width:min(92%,1100px); transform:translate(-50%,-50%); align-items:center; text-align:center; top:min(calc(var(--hero-h) * .84),calc(var(--hero-h) - 160px)); }
  .hero--atlantic[data-frame="5"] .hs-title { font-size:clamp(36px,4.4vw,68px); }
  .hero--atlantic[data-frame="1"] .hs-title,.hero--atlantic[data-frame="2"] .hs-title,
  .hero--atlantic[data-frame="3"] .hs-title,.hero--atlantic[data-frame="4"] .hs-title { font-size:clamp(36px,4.4vw,68px); }
}
/* the swap of the story's words takes about a fifth of a second in all (hero.js tell()) */
.hero-story { transition:opacity 150ms var(--ease); }
.hero-story.is-switching { opacity:0 !important; transition-duration:100ms; }

/* ---------- Between the homepage and the case page: view transitions ----------
   Browsers that have cross-document view transitions (Chrome 126+, Safari 18.2+) cross-fade
   the pages briefly, and the system block's deal board and phone morph into the case's two
   frames (and back): estate-deals is the deal board in both, estate-site the live site.
   The two snapshots fill their box as they change shape, so nothing stretches. Others just
   go to the page, as does anyone who prefers less motion. */
@view-transition { navigation:auto; }
@media(prefers-reduced-motion:reduce) { @view-transition { navigation:none; } }
.system-layer--deals .browser { view-transition-name:estate-deals; }
.system-layer--phone .phone { view-transition-name:estate-site; }
::view-transition-group(root) { animation-duration:280ms; }
::view-transition-group(estate-deals),::view-transition-group(estate-site) { animation-duration:760ms; animation-timing-function:cubic-bezier(.22,1,.36,1); overflow:clip; border-radius:12px; }
::view-transition-old(estate-deals),::view-transition-new(estate-deals),::view-transition-old(estate-site),::view-transition-new(estate-site) {
  height:100%; object-fit:cover; object-position:50% 0; animation-duration:520ms; }