/* ═══════════════════════════════════════════════════════════════════════════
   THE CHARTER — Variation C · photography-led, light grounds
   Built to the Figma spec. 1280 canvas, 1088 content, 96px gutters.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ivory:#F1EBDF;
  --bone:#EDE6D6;
  --bronze:#876736;
  --ink:#0B121C;
  --steel:#51565E;

  --ground:var(--ivory);
  --band:var(--bone);
  --text:var(--ink);
  --muted:var(--steel);

  --page:1280px;
  --content:1088px;
  --wide:1200px;
  --gut:96px;
  --gut-wide:40px;

  --serif:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ui:'Source Sans 3','Source Sans Pro',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --track:0.045em;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:28px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--ivory);padding:16px 24px}
.skip:focus{left:0}

/* ── Shared type ───────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);
}
.eyebrow-bronze{color:var(--bronze)}
.display{font-family:var(--serif);font-weight:700;font-size:40px;line-height:54px;color:var(--ink)}
.display-sm{font-family:var(--serif);font-weight:700;font-size:32px;line-height:44px;color:var(--ink)}
.display-lg{font-family:var(--serif);font-weight:700;font-size:56px;line-height:72px;color:var(--ink)}
.lede{font-family:var(--sans);font-weight:300;font-size:20px;line-height:34px;color:var(--muted)}
.body{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--muted)}
.body-16{font-family:var(--sans);font-weight:400;font-size:16px;line-height:28px;color:var(--muted)}
.flag{
  font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;
  letter-spacing:var(--track);color:var(--bronze);
}
.rule{height:1px;background:var(--bronze);width:100%}

/* ── Button ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;background:var(--ink);border:1px solid var(--ink);border-radius:2px;
  font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ivory);
  cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out;
}
.btn:hover{border-color:var(--bronze);background:#111A26}
.btn-line{background:transparent;color:var(--ink);border-color:var(--bronze)}
.btn-line:hover{background:var(--bronze);color:var(--ivory);border-color:var(--bronze)}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;letter-spacing:inherit;text-transform:inherit}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:var(--ivory)}
.nav-in{
  max-width:var(--page);margin:0 auto;height:101px;padding:26px var(--gut-wide);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{
  font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--steel);
  transition:color .15s ease-out;
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.wordmark{
  font-family:var(--serif);font-weight:400;font-size:22px;line-height:30px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);
  text-align:center;white-space:nowrap;
}
.nav-cta{display:flex;justify-content:flex-end;align-items:center}
.nav-burger{display:none;background:none;border:0;padding:10px;cursor:pointer;justify-self:end}
.bars,.bars::before,.bars::after{display:block;content:"";width:22px;height:1.5px;background:var(--ink)}
.bars::before{transform:translateY(-7px)}
.bars::after{transform:translateY(5.5px)}
.nav-mobile{display:none;flex-direction:column;gap:18px;padding:24px var(--gut-wide) 40px;border-top:1px solid rgba(135,103,54,.3);background:var(--ivory)}
.nav-mobile a{font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);text-transform:uppercase;color:var(--steel)}
.nav-mobile .btn{align-self:flex-start}

/* ── Section shells ────────────────────────────────────────────────────── */
.sec{max-width:var(--page);margin:0 auto;padding:72px var(--gut);background:var(--ivory)}
.sec-bone{background:var(--bone)}
.sec-wide{padding-left:var(--gut-wide);padding-right:var(--gut-wide)}
.sec > * + *{margin-top:20px}
.inner{max-width:var(--content)}
.inner-wide{max-width:var(--wide)}
.band-bone{background:var(--bone)}
.center{text-align:center}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;height:880px;overflow:hidden}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.4}
.hero-copy{
  position:absolute;left:48px;bottom:48px;width:660px;max-width:calc(100% - 96px);
  padding:40px 44px;background:var(--ivory);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}
.hero-copy h1{font-family:var(--serif);font-weight:700;font-size:28px;line-height:40px;color:var(--ink);max-width:572px}
.hero-copy p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:28px;color:var(--steel);max-width:540px}

/* ── Numbers ───────────────────────────────────────────────────────────── */
.numbers{max-width:var(--page);margin:0 auto;padding:56px var(--gut-wide) 32px;background:var(--ivory);
  display:flex;flex-direction:column;align-items:center;gap:23px}
.stats{display:flex;width:100%;max-width:var(--wide)}
.stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.stat b{font-family:var(--serif);font-weight:700;font-size:52px;line-height:60px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat i{display:block;width:40px;height:1px;background:var(--bronze)}
.stat span{font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);text-transform:uppercase;color:var(--steel)}
.numbers .rule{max-width:var(--wide)}
.cities{font-family:var(--sans);font-weight:500;font-size:16px;line-height:19px;letter-spacing:var(--track);color:var(--steel)}

/* ── Weekend diptych ───────────────────────────────────────────────────── */
.diptych{display:flex;max-width:var(--page);margin:0 auto}
.dip{flex:1;display:flex;flex-direction:column}
.dip figure{height:520px}
.dip img{width:100%;height:100%;object-fit:cover}
.dip-copy{background:var(--ivory);padding:28px 36px;display:flex;flex-direction:column;gap:10px}
.dip-copy p{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel)}

/* ── Two column body ───────────────────────────────────────────────────── */
.two-body{display:flex;gap:24px;max-width:var(--content)}
.two-body p{flex:1;font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel)}

/* ── Formats grid ──────────────────────────────────────────────────────── */
.formats{display:flex;flex-wrap:wrap;gap:36px 24px;max-width:var(--wide)}
.fmt{width:384px;display:flex;flex-direction:column;gap:12px}
.fmt-media{position:relative;width:100%;height:300px;overflow:hidden}
.fmt-media img{width:100%;height:100%;object-fit:cover}
.fmt-cap{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--ink);padding:20px 24px 22px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(100%);
  transition:opacity .2s ease-out,transform .2s ease-out;
}
.fmt:hover .fmt-cap,.fmt:focus-within .fmt-cap,.fmt.is-open .fmt-cap{opacity:1;transform:none}
.fmt-cap em{font-style:normal;font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);text-transform:uppercase;color:var(--bone)}
.fmt-cap p{font-family:var(--sans);font-weight:400;font-size:16px;line-height:26px;color:var(--ivory)}
.fmt h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:27px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
.fmt-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.withheld{
  width:100%;height:300px;background:var(--bone);border:1px solid var(--bronze);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:28px;
}
.withheld span{font-family:var(--sans);font-weight:500;font-size:11px;line-height:18px;letter-spacing:var(--track);text-transform:uppercase;color:var(--steel)}
.fmt-secret p{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel)}

/* ── Story ─────────────────────────────────────────────────────────────── */
.story{display:flex;max-width:var(--page);margin:0 auto;min-height:600px}
.story figure{width:640px;flex:none}
.story img{width:100%;height:100%;object-fit:cover}
.story blockquote{
  flex:1;background:var(--ivory);padding:0 64px;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.story blockquote p{font-family:var(--serif);font-weight:400;font-size:21px;line-height:34px;color:var(--ink)}
.story blockquote footer{font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);color:var(--steel)}

/* ── Steps ─────────────────────────────────────────────────────────────── */
.steps{display:flex;gap:24px;max-width:var(--content)}
.step{flex:1;display:flex;flex-direction:column;gap:14px}
.step .rule{margin:0}
.step h3{font-family:var(--serif);font-weight:700;font-size:20px;line-height:28px;text-transform:uppercase;color:var(--ink)}
.step p{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel)}
.cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;max-width:var(--content)}
.cta-row .body{margin:0}

/* ── The article deck ──────────────────────────────────────────────────── */
.deck-wrap{position:relative;width:100%;max-width:var(--content);height:440px;overflow:hidden;--dx:1}
.deck{position:absolute;inset:0}
.card{
  position:absolute;left:50%;top:50%;width:355px;height:405px;
  max-width:calc(100% - 8px);
  background:var(--ivory);border:1.35px solid rgba(11,18,28,.14);border-radius:2.7px;
  box-shadow:0 8.1px 24.3px rgba(11,18,28,.1);
  overflow:hidden;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--x,0px) * var(--dx,1))) scale(var(--s,1));
  opacity:var(--o,1);
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.card .tide{position:absolute;left:0;right:0;bottom:0;height:76.4%;background:var(--ink);transition:height .3s ease-out}
.card.is-active .tide,.card:hover .tide{height:96.8%}
.card > *:not(.tide){position:relative;z-index:1}
.card .numeral{
  position:absolute;left:29.7px;top:35.1px;
  font-family:var(--serif);font-weight:400;font-size:27px;line-height:38px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);
  transition:color .3s ease-out;
}
.card.is-active .numeral,.card:hover .numeral{color:var(--bronze)}
.card .hair{position:absolute;left:29.7px;top:89.1px;width:295.65px;height:1.35px;background:var(--bronze)}
.card .title{
  position:absolute;left:29.7px;right:29.7px;top:110.7px;
  font-family:var(--sans);font-weight:500;font-size:13.5px;line-height:23px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ivory);
}
.card .principle{
  position:absolute;left:29.7px;right:29.7px;top:156.6px;
  font-family:var(--sans);font-weight:400;font-size:17.55px;line-height:30px;color:var(--ivory);
  opacity:0;transition:opacity .3s ease-out;
}
.card.is-active .principle,.card:hover .principle{opacity:1}
.card .arrow{
  position:absolute;left:29.7px;bottom:34px;
  font-family:var(--sans);font-size:24.3px;line-height:32px;color:var(--bronze);
  opacity:0;transition:opacity .3s ease-out;
}
.card.is-active .arrow{opacity:1}
.card.off1{--x:274px;--s:.7407;--o:1}
.card.off1n{--x:-274px;--s:.7407;--o:1}
.card.off2{--x:466px;--s:.5778;--o:.9}
.card.off2n{--x:-466px;--s:.5778;--o:.9}
.card.off3,.card.off3n{--s:.4444;--o:0;pointer-events:none}
.card.off3{--x:623px}
.card.off3n{--x:-623px}
.deck-nav{display:flex;justify-content:center;gap:12px;margin-top:24px}
.deck-nav button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--bronze);
  background:transparent;color:var(--bronze);cursor:pointer;font-size:16px;line-height:1;
}
.deck-nav button:hover{background:var(--bronze);color:var(--ivory)}

/* ── LinkedIn posts ────────────────────────────────────────────────────── */
.posts{display:flex;flex-wrap:wrap;gap:20px;max-width:var(--content)}
.post{
  width:349px;background:#FFF;border:1px solid rgba(0,0,0,.08);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;font-family:var(--ui);
}
.post-flag{background:#FFF3CD;color:#7A5C00;padding:6px 16px;font-weight:600;font-size:9.5px;line-height:13px;letter-spacing:.06em;text-transform:uppercase}
.post-in{padding:12px 16px 4px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-head{display:flex;gap:8px;align-items:flex-start}
.post-av{width:48px;height:48px;border-radius:24px;background:#E3E3E3;flex:none;display:grid;place-items:center;font-weight:600;font-size:16px;color:rgba(0,0,0,.45)}
.post-id{flex:1;min-width:0}
.post-id b{display:block;font-weight:600;font-size:14px;line-height:20px;color:rgba(0,0,0,.9)}
.post-id span{display:block;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}
.post-in-mark{width:24px;height:24px;border-radius:4px;background:#0A66C2;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.post-body{font-weight:400;font-size:14px;line-height:20px;color:rgba(0,0,0,.9)}
.post-spacer{flex:1;min-height:12px}
.post-hr{height:1px;background:rgba(0,0,0,.08)}
.post-eng{display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}
.reacts{display:flex;align-items:center}
.reacts i{width:16px;height:16px;border:1.5px solid #fff;display:block;margin:0 -5px}
.reacts i:nth-child(1){background:#378FE9}
.reacts i:nth-child(2){background:#6DAE4F}
.reacts i:nth-child(3){background:#DF704D}
.reacts b{font-weight:400;margin-left:12px}
.post-actions{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.post-actions span{display:flex;align-items:center;gap:6px;padding:8px 6px;border-radius:4px;font-weight:600;font-size:13.5px;line-height:18px;color:rgba(0,0,0,.6)}
.post-actions em{width:19px;height:19px;background:rgba(0,0,0,.6);display:block;flex:none;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}

/* ── Press rail ────────────────────────────────────────────────────────── */
.rail{display:flex;align-items:center;width:100%;max-width:var(--content);height:124px;border:1px solid rgba(135,103,54,.4)}
.rail li{flex:1;display:grid;place-items:center;padding:0 12px;height:100%}
.rail li + li{border-left:1px solid rgba(135,103,54,.28)}
.rail span{font-family:var(--sans);font-weight:500;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);opacity:.55}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:28px;max-width:var(--content)}
.faq details{display:flex;flex-direction:column;gap:14px}
.faq details + details{padding-top:28px;border-top:1px solid var(--bronze)}
.faq summary{
  list-style:none;cursor:pointer;
  font-family:var(--serif);font-weight:700;font-size:24px;line-height:34px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--bronze);font-family:var(--sans);font-weight:400;font-size:22px}
.faq details[open] summary::after{content:"–"}
.faq p{max-width:860px;font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel);padding-top:14px}

/* ── Closing photo block ───────────────────────────────────────────────── */
.closing{position:relative;height:620px;overflow:hidden}
.closing > img{width:100%;height:100%;object-fit:cover}
.closing-copy{
  position:absolute;left:48px;bottom:48px;width:660px;max-width:calc(100% - 96px);
  padding:40px 44px;background:var(--ivory);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.closing-copy h2{font-family:var(--serif);font-weight:700;font-size:30px;line-height:42px;color:var(--ink);max-width:572px}
.closing-copy p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:28px;color:var(--steel);max-width:540px}

/* ── Full-bleed photo panels (Inside) ──────────────────────────────────── */
.plate{position:relative;overflow:hidden;height:720px}
.plate.tall{height:860px}
.plate.short{height:620px}
.plate > img{width:100%;height:100%;object-fit:cover}
.plate::after{content:"";position:absolute;inset:0;background:#000;opacity:.45}
.plate-copy{position:absolute;z-index:2;display:flex;flex-direction:column;gap:14px;color:var(--ivory)}
.plate-copy .eyebrow{color:var(--ivory);font-size:13px;line-height:20px}
.plate-copy h1,.plate-copy h2{font-family:var(--serif);font-weight:700;color:var(--ivory)}
.plate-copy h1{font-size:56px;line-height:72px}
.plate-copy h2{font-size:44px;line-height:56px}
.plate-copy h3{font-family:var(--serif);font-weight:700;font-size:36px;line-height:46px;color:var(--ivory)}
.plate-copy p{font-family:var(--sans);font-weight:400;font-size:20px;line-height:34px;color:var(--ivory)}
.pos-bl{left:72px;bottom:92px;width:860px;max-width:calc(100% - 144px)}
.pos-tr{right:72px;top:80px;width:660px;max-width:calc(100% - 144px)}
.pos-ml{left:72px;top:236px;width:700px;max-width:calc(100% - 144px)}
.pos-half{left:48px;bottom:48px;width:460px;max-width:calc(100% - 96px)}
.plate-pair{display:flex;max-width:var(--page);margin:0 auto}
.plate-pair .plate{flex:1;height:620px}

/* ── Membership steps ──────────────────────────────────────────────────── */
.gate{
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--page);margin:0 auto;padding-left:var(--gut);background:var(--ivory);
}
.gate-copy{width:420px;flex:none;display:flex;flex-direction:column;gap:10px;padding:48px 24px 48px 0}
.gate-n{font-family:var(--serif);font-weight:700;font-size:34px;line-height:44px;color:var(--bronze)}
.gate-copy h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:34px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
.gate-copy p{font-family:var(--sans);font-weight:400;font-size:16px;line-height:28px;color:var(--steel)}
.gate figure{flex:none}
.gate img{width:100%;height:100%;object-fit:cover}
.gate-1 figure{width:400px;height:360px}
.gate-2 figure{width:560px;height:440px}
.gate-3 figure{width:700px;height:520px}

/* ── Unchartered ───────────────────────────────────────────────────────── */
.masthead{max-width:var(--page);margin:0 auto;padding:140px 160px;background:var(--ivory);display:flex;flex-direction:column;gap:22px}
.masthead h1{font-family:var(--serif);font-weight:700;font-size:56px;line-height:72px;color:var(--ink);max-width:960px}
.masthead p{font-family:var(--sans);font-weight:300;font-size:21px;line-height:38px;color:var(--steel);max-width:960px}
.masthead .rule{max-width:960px}
.figure-full{max-width:var(--page);margin:0 auto;height:640px}
.figure-full img{width:100%;height:100%;object-fit:cover}
.copy-band{max-width:var(--page);margin:0 auto;padding:76px 160px;background:var(--bone)}
.copy-band p{font-family:var(--sans);font-weight:400;font-size:20px;line-height:36px;color:var(--steel);max-width:880px}
.classes{display:flex;flex-direction:column;gap:48px;max-width:960px}
.klass{display:flex;flex-direction:column;gap:12px}
.klass .fmt-media{height:460px}
.klass h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:36px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
.statement{max-width:var(--page);margin:0 auto;padding:130px 160px;background:var(--ivory);display:flex;flex-direction:column;align-items:center;gap:20px}
.statement h2{font-family:var(--serif);font-weight:700;font-size:34px;line-height:48px;text-align:center;color:var(--ink);max-width:960px}
.statement .display{font-size:38px;line-height:52px;text-align:center}
.statement .sub{font-family:var(--serif);font-weight:400;font-size:24px;line-height:36px;text-align:center;color:var(--steel)}

/* ── Partnerships ──────────────────────────────────────────────────────── */
.band-title{max-width:var(--page);margin:0 auto;padding:64px var(--gut-wide);background:var(--ivory);display:flex;align-items:flex-end;gap:64px}
.band-title h1{font-family:var(--serif);font-weight:700;font-size:46px;line-height:60px;color:var(--ink);width:700px;flex:none}
.band-title .intro{flex:1;font-family:var(--sans);font-weight:300;font-size:17px;line-height:30px;color:var(--steel)}
.mosaic{max-width:var(--page);margin:0 auto;padding:0 var(--gut-wide);background:var(--ivory);display:flex;flex-direction:column;gap:8px}
.mosaic-row{display:flex;gap:8px}
.tile{position:relative;overflow:hidden;flex:1}
.tile img{width:100%;height:100%;object-fit:cover}
.tile.has-photo::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.5}
.tile-copy{position:absolute;z-index:2;left:32px;right:32px;bottom:32px;display:flex;flex-direction:column;gap:10px}
.tile h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:30px;letter-spacing:var(--track);text-transform:uppercase}
.tile p{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px}
.tile.on-photo h3,.tile.on-photo p{color:var(--ivory)}
.tile.on-bone{background:var(--bone)}
.tile.on-bone h3{color:var(--ink)}
.tile.on-bone p{color:var(--steel)}
.row-a{height:420px}
.row-a .tile:first-child{flex:740}
.row-a .tile:last-child{flex:452}
.row-b{height:300px}
.value-cols{max-width:var(--page);margin:0 auto;padding:72px var(--gut);background:var(--bone);display:flex;gap:48px}
.value-cols > div{flex:1;display:flex;flex-direction:column;gap:12px}
.value-cols h2{font-family:var(--serif);font-weight:400;font-size:22px;line-height:32px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink)}
.value-cols p{font-family:var(--sans);font-weight:400;font-size:16px;line-height:28px;color:var(--steel)}
.logo-row{display:flex;align-items:center;gap:24px;width:100%;max-width:var(--wide);height:88px}
.logo-row li{flex:1;display:grid;place-items:center}
.logo-row span{font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);text-transform:uppercase;color:var(--steel)}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact{max-width:var(--page);margin:0 auto;padding:140px var(--gut);background:var(--ivory);
  display:flex;flex-direction:column;align-items:center;gap:54px}
.contact figure{width:560px;height:360px;max-width:100%}
.contact figure img{width:100%;height:100%;object-fit:cover}
.contact h1{font-family:var(--serif);font-weight:700;font-size:52px;line-height:66px;text-align:center;color:var(--ink)}
.routes{display:flex;gap:56px;width:100%;max-width:1000px}
.route{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.route .eyebrow{color:var(--bronze)}
.route p{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel)}
.route a.mail{font-weight:700;text-decoration:underline}

/* ── Apply split ───────────────────────────────────────────────────────── */
.apply{display:flex;max-width:var(--page);margin:0 auto;min-height:980px}
.apply figure{width:600px;flex:none}
.apply figure img{width:100%;height:100%;object-fit:cover}
.apply-form{
  flex:1;background:var(--ivory);padding:64px 72px;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.apply-form h1{font-family:var(--serif);font-weight:700;font-size:32px;line-height:44px;color:var(--ink);max-width:536px}
.apply-form > p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:28px;color:var(--steel);max-width:536px}
.form{display:flex;flex-direction:column;gap:18px;width:100%;max-width:536px}
.field{display:flex;flex-direction:column;gap:7px;border:0;padding:0;margin:0}
.field > label,.field > legend{
  font-family:var(--sans);font-weight:500;font-size:11px;line-height:17px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--steel);padding:0;
}
.field input[type=text],.field input[type=email],.field textarea,.field select{
  width:100%;height:46px;padding:0 14px;
  background:var(--bone);border:1px solid var(--steel);border-radius:2px;
  font-family:var(--sans);font-size:15px;color:var(--ink);
}
.field textarea{height:84px;padding:12px 14px;resize:vertical;line-height:24px}
.field select{height:46px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--bronze)}
.field [aria-invalid=true]{border-color:#A4443B}
.field-error{font-family:var(--sans);font-size:12.5px;line-height:20px;color:#A4443B}
.field-help{font-family:var(--sans);font-size:12.5px;line-height:20px;color:var(--steel)}
.note{font-family:var(--sans);font-weight:400;font-size:14px;line-height:24px;color:var(--steel)}
.check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer;
  font-family:var(--sans);font-weight:400;font-size:14px;line-height:24px;color:var(--steel)}
.check input{margin-top:5px;width:16px;height:16px;accent-color:var(--bronze)}
.consent-field{border:1px solid rgba(135,103,54,.5);padding:20px 22px;margin:0;display:flex;flex-direction:column;gap:14px}
.consent-fine{font-family:var(--sans);font-size:12.5px;line-height:20px;color:var(--steel)}
.consent-fine a{text-decoration:underline;color:var(--bronze)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:14px 20px;border-left:2px solid #A4443B;background:rgba(164,68,59,.07);
  font-family:var(--sans);font-size:14px;line-height:24px;color:var(--ink)}
.reference{font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);text-transform:uppercase;color:var(--steel)}

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal{max-width:860px;margin:0 auto;padding:100px var(--gut) 120px}
.legal h1{margin-bottom:20px}
.legal h2{font-family:var(--serif);font-weight:700;font-size:24px;line-height:34px;color:var(--ink);
  margin:48px 0 14px;padding-top:24px;border-top:1px solid var(--bronze)}
.legal p,.legal li{font-family:var(--sans);font-weight:400;font-size:15px;line-height:26px;color:var(--steel);margin-bottom:14px}
.legal ul,.legal ol{padding-left:1.2em;list-style:disc}
.legal ol{list-style:decimal}
.legal a{color:var(--bronze);text-decoration:underline}
.legal code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--bone);padding:1px 6px}
.legal .state{border-left:2px solid var(--bronze);padding-left:16px}
.legal-table{width:100%;border-collapse:collapse;margin:24px 0;display:block;overflow-x:auto}
.legal-table th{text-align:left;font-family:var(--sans);font-weight:500;font-size:11px;line-height:17px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--steel);
  border-bottom:1px solid var(--bronze);padding:0 16px 8px 0;white-space:nowrap}
.legal-table td{font-family:var(--sans);font-size:14px;line-height:24px;color:var(--steel);
  border-bottom:1px solid rgba(135,103,54,.25);padding:14px 16px 14px 0;vertical-align:top}
.prefs{max-width:660px;display:flex;flex-direction:column;gap:16px;margin-top:24px}

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot{max-width:var(--page);margin:0 auto;padding:48px var(--gut);background:var(--bone);
  display:flex;flex-direction:column;gap:20px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:var(--content);width:100%}
.foot-id{display:flex;flex-direction:column;gap:6px}
.foot-id .wordmark{text-align:left}
.foot-id span{font-family:var(--sans);font-weight:400;font-size:12px;line-height:19px;color:var(--steel)}
.foot-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-links a{font-family:var(--sans);font-weight:500;font-size:12px;line-height:19px;letter-spacing:var(--track);text-transform:uppercase;color:var(--steel)}
.foot-links a:hover{color:var(--bronze)}
.foot .rule{max-width:var(--content)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:var(--content);width:100%}
.foot-bottom span,.foot-bottom a,.foot-bottom button{font-family:var(--sans);font-weight:400;font-size:12px;line-height:19px;color:var(--steel)}
.foot-bottom .cities-line{font-weight:500;letter-spacing:var(--track);text-transform:uppercase}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a:hover,.foot-legal button:hover{color:var(--bronze)}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1279px){
  :root{--gut:56px;--gut-wide:32px}
  .masthead,.copy-band{padding-left:56px;padding-right:56px}
  .story figure,.apply figure{width:44%}
  .gate-1 figure,.gate-2 figure,.gate-3 figure{width:44%;height:auto;align-self:stretch}
}
@media (max-width:1000px){
  .nav-in{grid-template-columns:1fr auto}
  .nav-links,.nav-cta{display:none}
  .wordmark{grid-column:1;justify-self:start;text-align:left}
  .nav-burger{display:block}
  .nav-mobile{display:flex}
  .nav-mobile[hidden]{display:none}
  .formats{justify-content:center}
  .fmt{width:min(384px,100%)}
  .posts{justify-content:center}
  .post{width:min(349px,100%)}
  .plate-copy h1{font-size:40px;line-height:52px}
  .plate-copy h2{font-size:32px;line-height:44px}
  .masthead h1,.display-lg{font-size:40px;line-height:52px}
}
@media (max-width:860px){
  :root{--gut:24px;--gut-wide:20px}
  .hero{height:auto}
  .hero-photo{position:relative;height:52vh}
  .hero-copy{position:static;width:100%;max-width:none;padding:32px 24px 40px}
  .closing{height:auto}
  .closing > img{height:44vh}
  .closing-copy{position:static;width:100%;max-width:none;padding:32px 24px 40px}
  .display{font-size:30px;line-height:42px}
  .display-sm{font-size:26px;line-height:36px}
  .stats{flex-direction:column;gap:40px}
  .diptych,.two-body,.steps,.story,.apply,.routes,.value-cols,.band-title,.mosaic-row{flex-direction:column}
  .story figure{width:100%;height:46vh}
  .apply figure{width:100%;height:34vh}
  .apply-form{padding:40px 24px}
  .row-a,.row-b{height:auto}
  .tile{min-height:300px}
  .gate{flex-direction:column;padding-left:0}
  .gate-copy{width:100%;padding:32px 24px}
  .gate figure{width:100%!important;height:auto!important}
  .gate img{height:auto}
  .masthead{padding:64px 24px}
  .copy-band,.statement{padding:56px 24px}
  .contact{padding:64px 24px}
  .plate,.plate.tall,.plate.short,.plate-pair .plate{height:auto;min-height:440px}
  .plate > img{position:absolute;inset:0;height:100%}
  .plate-copy{position:relative;padding:64px 24px 48px}
  .pos-bl,.pos-tr,.pos-ml,.pos-half{left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none}
  .plate-pair{flex-direction:column}
  .legal{padding:64px 24px 80px}
  .foot-row,.foot-bottom{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.nav,.foot,.consent,.btn{display:none}body{background:#fff}}

/* Post action icons — thin line glyphs rather than the grey blocks the
   Figma export leaves as placeholders. */
.post-actions em{
  background:rgba(0,0,0,.6);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.post-actions span:nth-child(1) em{-webkit-mask-image:var(--i-like);mask-image:var(--i-like)}
.post-actions span:nth-child(2) em{-webkit-mask-image:var(--i-comment);mask-image:var(--i-comment)}
.post-actions span:nth-child(3) em{-webkit-mask-image:var(--i-repost);mask-image:var(--i-repost)}
.post-actions span:nth-child(4) em{-webkit-mask-image:var(--i-send);mask-image:var(--i-send)}
:root{
  --i-like:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M7 10v10H4V10h3zm3 10h7.5a2 2 0 0 0 2-1.6l1.3-6.4A1.5 1.5 0 0 0 19.3 10H14l.8-4a2 2 0 0 0-2-2.4L10 10v10z'/%3E%3C/svg%3E");
  --i-comment:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3C/svg%3E");
  --i-repost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 9V7a2 2 0 0 1 2-2h11m0 0-3-3m3 3-3 3M20 15v2a2 2 0 0 1-2 2H7m0 0 3 3m-3-3 3-3'/%3E%3C/svg%3E");
  --i-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M21 3 3 10.5l7 3 3 7L21 3z'/%3E%3C/svg%3E");
}

/* Sticky nav is 101px; keep anchor jumps clear of it. */
html{scroll-padding-top:120px}


/* ── The deck on smaller screens ────────────────────────────────────────────
   The cards keep their proportions; the axis simply tightens, so the
   neighbours peek in from the edges instead of pushing the page sideways. */
@media (max-width:1100px){ .deck-wrap{--dx:.66} }
@media (max-width:860px){
  .deck-wrap{--dx:.42;height:420px}
  .deck-nav{margin-top:16px}
}
@media (max-width:560px){
  .deck-wrap{--dx:.30;height:400px}
  .card{width:min(300px,calc(100vw - 56px));height:360px}
  .card .numeral{left:22px;top:26px;font-size:22px;line-height:32px}
  .card .hair{left:22px;top:70px;width:calc(100% - 44px)}
  .card .title{left:22px;right:22px;top:88px;font-size:12px;line-height:20px}
  .card .principle{left:22px;right:22px;top:126px;font-size:15px;line-height:26px}
  .card .arrow{left:22px;bottom:24px;font-size:20px}
}

/* ── Member posts on a phone ────────────────────────────────────────────────
   The card keeps LinkedIn's shape; only the action row tightens so four
   labels still fit on one line at 360px. */
@media (max-width:640px){
  .post{width:100%;max-width:349px}
  .post-in{padding:12px 14px 4px}
  .post-actions span{padding:8px 2px;gap:4px;font-size:12.5px}
  .post-actions em{width:17px;height:17px}
  .post-head{gap:10px}
  .post-av{width:42px;height:42px;border-radius:21px;font-size:14px}
}
@media (max-width:400px){
  .post-actions span{font-size:11.5px;padding:8px 1px}
  .post-actions em{width:15px;height:15px}
}

/* ── Logo rails wrap rather than push the page sideways ─────────────────── */
@media (max-width:900px){
  .rail{height:auto;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(135,103,54,.4)}
  .rail li{height:82px;border-left:1px solid rgba(135,103,54,.28);border-top:1px solid rgba(135,103,54,.28)}
  .rail li:nth-child(3n+1){border-left:0}
  .rail li:nth-child(-n+3){border-top:0}
  .logo-row{height:auto;flex-wrap:wrap;gap:16px}
  .logo-row li{flex:1 1 30%;min-width:88px;height:64px}
}
@media (max-width:480px){
  .rail{grid-template-columns:repeat(2,1fr)}
  .rail li:nth-child(3n+1){border-left:1px solid rgba(135,103,54,.28)}
  .rail li:nth-child(odd){border-left:0}
  .rail li:nth-child(-n+2){border-top:0}
  .rail li:nth-child(3){border-top:1px solid rgba(135,103,54,.28)}
  .logo-row li{flex:1 1 44%}
}

/* ── Touch targets ──────────────────────────────────────────────────────────
   Anything a thumb has to hit gets at least 44px of height on a phone. */
@media (max-width:1000px){
  .nav-burger{padding:14px;min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:center}
  .nav-mobile{gap:0}
  .nav-mobile a{padding:14px 0;min-height:48px;display:flex;align-items:center;border-bottom:1px solid rgba(135,103,54,.2)}
  .nav-mobile .btn{margin-top:20px;width:100%;justify-content:center}
}
@media (max-width:860px){
  .faq summary{padding:12px 0;min-height:52px;align-items:center}
  .faq details + details{padding-top:16px}
  .foot-links a,.foot-legal a,.foot-legal button{padding:10px 0;display:inline-flex;align-items:center;min-height:44px}
  .foot-links{gap:0 22px}
  .foot-legal{gap:0 18px}
  .route .btn,.statement .btn,.cta-row .btn{width:100%;justify-content:center}
  .cta-row{width:100%}
  .btn{padding:16px 28px}
  .fmt-btn{cursor:pointer}
  /* On touch there is no hover, so the caption is simply always readable. */
  .fmt-cap{position:static;opacity:1;transform:none;background:var(--ink)}
  .fmt-media{height:auto}
  .fmt-media img{height:300px;object-fit:cover}
}
@media (max-width:560px){
  .fmt-media img{height:240px}
  .klass .fmt-media img{height:220px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   The brand book asks for 150–300ms and restraint, so nothing here bounces,
   spins or slides far. Things arrive, and then they are still.
   Every rule sits behind .motion, which the script adds only when the visitor
   has not asked for reduced motion — so with JS off, or motion turned down,
   the page renders complete and unanimated.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page arrives */
.motion body{animation:page-in .5s ease-out both}
@keyframes page-in{from{opacity:0}to{opacity:1}}

/* Sections rise as they come into view */
.motion [data-rise]{opacity:0;transform:translateY(18px)}
.motion [data-rise].is-in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.motion [data-rise].is-in:nth-child(2){transition-delay:.06s}
.motion [data-rise].is-in:nth-child(3){transition-delay:.12s}
.motion [data-rise].is-in:nth-child(4){transition-delay:.18s}

/* Children of a grid stagger in one after another */
.motion [data-stagger] > *{opacity:0;transform:translateY(14px)}
.motion [data-stagger].is-in > *{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
.motion [data-stagger].is-in > *:nth-child(1){transition-delay:0s}
.motion [data-stagger].is-in > *:nth-child(2){transition-delay:.07s}
.motion [data-stagger].is-in > *:nth-child(3){transition-delay:.14s}
.motion [data-stagger].is-in > *:nth-child(4){transition-delay:.21s}
.motion [data-stagger].is-in > *:nth-child(5){transition-delay:.28s}
.motion [data-stagger].is-in > *:nth-child(6){transition-delay:.35s}

/* The hero photograph drifts, very slowly, so the room feels alive */
.motion .hero-photo img{animation:drift 24s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}

/* Hero copy settles a beat after the photograph */
.motion .hero-copy{animation:card-in .7s cubic-bezier(.22,.61,.36,1) .15s both}
.motion .closing-copy{animation:card-in .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes card-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Numbers count up, then hold */
.motion .stat b{font-variant-numeric:tabular-nums}
.motion .stat i{transform:scaleX(0);transform-origin:center}
.motion .stats.is-in .stat i{transform:scaleX(1);transition:transform .5s cubic-bezier(.22,.61,.36,1) .25s}

/* A photograph lifts a little under the cursor */
.motion .fmt-media img,.motion .klass .fmt-media img,.motion .tile img{
  transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .2s ease-out}
.motion .fmt:hover .fmt-media img,.motion .klass:hover .fmt-media img,.motion .tile:hover img{transform:scale(1.035)}

/* Overlay copy on the full-bleed plates fades up with the page */
.motion .plate-copy{opacity:0;transform:translateY(20px)}
.motion .plate.is-in .plate-copy{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}

/* Underline that draws itself */
.motion .nav-links a{position:relative}
.motion .nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--bronze);
  transform:scaleX(0);transform-origin:right;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.motion .nav-links a:hover::after,.motion .nav-links a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* The sticky bar earns a hairline once the page has moved */
.nav{border-bottom:1px solid transparent;transition:border-color .25s ease-out,box-shadow .25s ease-out}
.nav.is-stuck{border-bottom-color:rgba(135,103,54,.35)}

/* Buttons take the bronze hairline the spec asks for */
.btn{transition:background .15s ease-out,border-color .15s ease-out,transform .15s ease-out}
.motion .btn:active{transform:translateY(1px)}

/* FAQ answers open rather than jump */
.motion .faq details[open] p{animation:answer-in .3s ease-out both}
@keyframes answer-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .motion *,.motion *::before,.motion *::after{
    animation:none!important;transition:none!important}
  .motion [data-rise],.motion [data-stagger] > *,.motion .plate-copy{opacity:1!important;transform:none!important}
}

/* Real photographs are busier than flat placeholders — a soft gradient under
   the caption keeps the white type readable without lightening the picture. */
.tile.has-photo .tile-copy::before{
  content:"";position:absolute;left:-32px;right:-32px;bottom:-32px;top:-40px;z-index:-1;
  background:linear-gradient(to top,rgba(11,18,28,.85),rgba(11,18,28,0));
}
.tile-copy{isolation:isolate}
.fmt-cap{background:linear-gradient(to top,rgba(11,18,28,.97),rgba(11,18,28,.92))}

/* ══ The membership request ═══════════════════════════════════════════════
   One question per screen. Everything here is scoped to .flow so it cannot
   reach the rest of the site. */

.flow-welcome{
  max-width:var(--page);margin:0 auto;padding:80px var(--gut-wide) 120px;
  display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:80px;align-items:center;
}
.flow-welcome-image img{width:100%;height:auto;display:block;border-radius:2px}
.flow-welcome-body h1{
  font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.12;
  letter-spacing:.02em;margin:10px 0 28px;
}
.flow-lede{font-size:19px;line-height:1.75;margin:0 0 18px}
.flow-welcome-body p{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 18px}
.flow-start{margin:34px 0 26px !important}
.flow-welcome-body .note{font-size:12.5px;line-height:1.7;letter-spacing:.02em}

.flow{max-width:760px;margin:0 auto;padding:56px var(--gut-wide) 140px}

.flow-rail{display:flex;align-items:center;gap:18px;margin-bottom:56px}
.flow-bar{
  flex:1;height:2px;background:rgba(11,18,28,.12);border-radius:2px;overflow:hidden;
}
.flow-bar span{
  display:block;height:100%;background:var(--bronze);
  transition:width .5s var(--ease);
}
.flow-count{
  margin:0;font-family:var(--sans);font-size:11px;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.flow-count span{opacity:.45;margin:0 2px}

.flow-card{display:flex;flex-direction:column;align-items:stretch}
.flow-question{
  font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.25;
  letter-spacing:.015em;margin:0 0 14px;color:var(--text);
}
.flow-help{margin:0 0 30px;color:var(--muted);font-size:14.5px;line-height:1.75;max-width:56ch}
.flow-error{
  margin:0 0 22px;padding:12px 16px;border-left:2px solid #8C2F2F;background:rgba(140,47,47,.06);
  color:#8C2F2F;font-size:14px;line-height:1.6;
}

/* Free text */
.flow-input{
  width:100%;font-family:var(--sans);font-weight:300;font-size:20px;line-height:1.6;
  color:var(--text);background:transparent;border:0;border-bottom:1px solid rgba(11,18,28,.22);
  padding:12px 2px;border-radius:0;transition:border-color .2s ease-out;
}
.flow-input:focus{outline:none;border-bottom-color:var(--bronze)}
.flow-input::placeholder{color:rgba(81,86,94,.5)}
.flow-textarea{
  border:1px solid rgba(11,18,28,.18);padding:18px 20px;font-size:17px;line-height:1.8;
  resize:vertical;min-height:150px;background:rgba(255,255,255,.35);
}
.flow-textarea:focus{border-color:var(--bronze)}
.flow-hint{
  margin:10px 0 0;font-family:var(--sans);font-size:11.5px;letter-spacing:.03em;
  color:var(--muted);min-height:17px;
}

/* Options */
.flow-options{display:flex;flex-direction:column;gap:10px}
.flow-option{
  display:flex;align-items:center;gap:16px;padding:17px 20px;cursor:pointer;
  border:1px solid rgba(11,18,28,.18);border-radius:2px;background:rgba(255,255,255,.35);
  transition:border-color .15s ease-out,background .15s ease-out,transform .15s var(--ease);
}
.flow-option:hover{border-color:var(--bronze);background:rgba(255,255,255,.7)}
.flow-option input{position:absolute;opacity:0;width:0;height:0}
.flow-option-key{
  flex:0 0 26px;height:26px;display:grid;place-items:center;
  border:1px solid rgba(11,18,28,.25);border-radius:2px;
  font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--muted);
  transition:border-color .15s ease-out,background .15s ease-out,color .15s ease-out;
}
.flow-option-label{font-size:16.5px;line-height:1.5;letter-spacing:.01em}
.flow-option:has(input:checked){border-color:var(--bronze);background:rgba(135,103,54,.07)}
.flow-option:has(input:checked) .flow-option-key{background:var(--bronze);border-color:var(--bronze);color:var(--ivory)}
.flow-option:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px}

/* The one-line follow-up under an option */
.flow-follow{
  display:none;margin-top:22px;padding-top:22px;border-top:1px solid rgba(11,18,28,.1);
}
.flow-follow.is-open{display:block;animation:flow-in .35s var(--ease) both}
.flow-follow label{
  display:block;margin-bottom:10px;font-family:var(--sans);font-size:12px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);
}
.flow-follow input{
  width:100%;font-family:var(--sans);font-weight:300;font-size:17px;color:var(--text);
  background:transparent;border:0;border-bottom:1px solid rgba(11,18,28,.22);padding:10px 2px;
}
.flow-follow input:focus{outline:none;border-bottom-color:var(--bronze)}

@keyframes flow-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.flow-actions{
  display:flex;align-items:center;gap:26px;margin-top:44px;
}
.flow-back{
  font-family:var(--sans);font-size:11.5px;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.flow-back:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.flow-actions .btn{margin-left:auto}

/* Review */
.flow-summary{margin:34px 0 0;padding:0;border-top:1px solid rgba(11,18,28,.12)}
.flow-summary-row{padding:18px 0;border-bottom:1px solid rgba(11,18,28,.09)}
.flow-summary dt{
  font-family:var(--sans);font-size:11px;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.flow-summary dd{
  margin:0;display:flex;align-items:baseline;gap:20px;
  font-size:16px;line-height:1.7;color:var(--text);
}
.flow-summary dd span{flex:1;min-width:0;overflow-wrap:anywhere}
.flow-summary dd a{
  flex:0 0 auto;font-family:var(--sans);font-size:11px;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--bronze);text-decoration:none;border-bottom:1px solid transparent;
}
.flow-summary dd a:hover{border-bottom-color:var(--bronze)}
.flow-consent{margin-top:44px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.flow-consent .btn{align-self:flex-start}

@media (max-width:900px){
  .flow-welcome{grid-template-columns:1fr;gap:44px;padding-top:48px}
  .flow-welcome-image{max-width:420px}
  .flow-welcome-body h1{font-size:40px}
}
@media (max-width:640px){
  .flow{padding:36px 22px 110px}
  .flow-rail{margin-bottom:38px}
  .flow-question{font-size:27px}
  .flow-help{font-size:14px;margin-bottom:24px}
  .flow-input{font-size:18px}
  .flow-option{padding:15px 16px;gap:13px}
  .flow-option-label{font-size:15.5px}
  .flow-actions{margin-top:34px;gap:16px}
  .flow-actions .btn{padding:14px 24px}
  .flow-summary dd{flex-direction:column;gap:6px}
  .flow-summary dd a{align-self:flex-start}
  .flow-welcome{padding:32px 22px 90px}
  .flow-welcome-body h1{font-size:32px}
  .flow-lede{font-size:17px}
}
@media (max-width:400px){
  .flow-question{font-size:24px}
  .flow-option-key{flex-basis:23px;height:23px;font-size:10px}
}

/* Progress. Rules rather than an inline style, because the CSP forbids one. */
.flow-bar span{width:0}
.flow-bar[data-step="1"] span{width:7%}
.flow-bar[data-step="2"] span{width:14%}
.flow-bar[data-step="3"] span{width:21%}
.flow-bar[data-step="4"] span{width:29%}
.flow-bar[data-step="5"] span{width:36%}
.flow-bar[data-step="6"] span{width:43%}
.flow-bar[data-step="7"] span{width:50%}
.flow-bar[data-step="8"] span{width:57%}
.flow-bar[data-step="9"] span{width:64%}
.flow-bar[data-step="10"] span{width:71%}
.flow-bar[data-step="11"] span{width:79%}
.flow-bar[data-step="12"] span{width:86%}
.flow-bar[data-step="13"] span{width:93%}
.flow-bar[data-step="14"] span{width:100%}

/* A quiet frame while a request is in progress. */
.flow-head{
  max-width:var(--page);margin:0 auto;padding:30px var(--gut-wide);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.flow-mark{
  font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);text-decoration:none;
}
.flow-leave{
  font-family:var(--sans);font-size:11px;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.flow-leave:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.flow-foot{
  max-width:var(--page);margin:0 auto;padding:0 var(--gut-wide) 56px;
}
.flow-foot p{
  margin:0;font-family:var(--sans);font-size:11.5px;letter-spacing:.03em;color:var(--muted);
  text-align:center;
}
.flow-foot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.flow-foot a:hover{color:var(--bronze)}
@media (max-width:640px){
  .flow-head{padding:22px 22px}
  .flow-mark{font-size:15px}
  .flow-foot{padding:0 22px 40px}
}

/* ══ Cookie notice ════════════════════════════════════════════════════════
   A card at the foot of the page, not a full-width slab. It sits above the
   content rather than covering it, and every control is a real button. */

.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:0 var(--gut-wide) 22px;
  pointer-events:none;
  animation:consent-rise .45s var(--ease) .35s both;
}
@keyframes consent-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.consent-inner{
  pointer-events:auto;
  max-width:var(--page);margin:0 auto;
  background:#F7F3EA;border:1px solid rgba(135,103,54,.34);border-radius:2px;
  box-shadow:0 -1px 0 rgba(11,18,28,.02),0 18px 44px -22px rgba(11,18,28,.36);
  padding:26px 30px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px 40px;align-items:center;
}

.consent-copy h2{
  margin:0 0 7px;font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.35;
  letter-spacing:.03em;color:var(--ink);
}
.consent-copy p{
  margin:0;font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.7;
  color:var(--steel);max-width:74ch;
}
.consent-copy a{color:var(--bronze);text-decoration:underline;text-underline-offset:2px}
.consent-copy a:hover{text-decoration-thickness:2px}

.consent-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;
}
.consent-actions .btn{padding:12px 22px;font-size:11px;white-space:nowrap}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.btn-dark:hover{background:#111A26;border-color:var(--bronze)}
.btn-plain{
  background:transparent;border-color:transparent;color:var(--steel);
  text-decoration:underline;text-underline-offset:3px;
}
.btn-plain:hover{color:var(--bronze);background:transparent;border-color:transparent}

/* The per-category panel, revealed by "Choose". */
.consent-detail{
  grid-column:1 / -1;margin-top:2px;padding-top:24px;
  border-top:1px solid rgba(11,18,28,.12);
}
.consent-detail[hidden]{display:none}
.consent-detail form{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.consent-detail .btn{margin-top:6px}

.consent-row{
  display:flex;align-items:flex-start;gap:14px;width:100%;
  padding:15px 18px;border:1px solid rgba(11,18,28,.14);border-radius:2px;
  background:rgba(255,255,255,.5);cursor:pointer;
  transition:border-color .15s ease-out;
}
.consent-row:hover{border-color:rgba(135,103,54,.5)}
.consent-row.is-locked{cursor:default;background:rgba(11,18,28,.03);opacity:.9}
.consent-row.is-locked:hover{border-color:rgba(11,18,28,.14)}
.consent-row input{
  flex:0 0 auto;width:17px;height:17px;margin:2px 0 0;accent-color:var(--bronze);cursor:inherit;
}
.consent-row span{display:flex;flex-direction:column;gap:4px;min-width:0}
.consent-row strong{
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink);
}
.consent-row em{
  font-style:normal;font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.65;
  color:var(--steel);
}
.consent-row small{
  font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--steel);opacity:.72;
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  .consent-inner{grid-template-columns:1fr;gap:20px;padding:24px 24px}
  .consent-actions{justify-content:flex-start}
}
@media (max-width:640px){
  .consent{padding:0 14px 14px}
  .consent-inner{padding:22px 20px;gap:18px}
  .consent-copy h2{font-size:16px}
  .consent-copy p{font-size:13px}
  .consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}
  .consent-actions .btn{width:100%;padding:14px 10px}
  .consent-actions .btn-plain{grid-column:1 / -1}
  .consent-row{padding:13px 15px;gap:11px}
}
@media (max-width:400px){
  .consent-actions{grid-template-columns:1fr}
}