:root{
  --paper:#FFFFFF;
  --surface:#F7F9FC;
  --pale:#EAF2FF;
  --border:#E2E8F0;
  --ink:#152042;
  --slate:#4F5B70;
  --muted:#7A8497;
  --blue:#0B63E5;
  --bright:#1C78FE;
  --night:#0F1730;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:clamp(20px, 5vw, 72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
::selection{background:var(--pale); color:var(--ink)}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700; margin:0; text-wrap:balance}
h1{font-size:clamp(38px, 6.6vw, 88px); line-height:1.0; letter-spacing:-.038em}
h2{font-size:clamp(29px, 3.9vw, 54px); line-height:1.04; letter-spacing:-.032em}
h3{font-size:clamp(21px, 2.1vw, 28px); line-height:1.14; letter-spacing:-.022em}
p{margin:0 0 1.05em}
.lede{font-size:clamp(17px,1.42vw,21px); line-height:1.5; font-weight:400}
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--blue); margin:0 0 18px;
}
.cap{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:500; line-height:1.5}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:1320px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.narrow{max-width:720px}
.bleed{width:100%}
.shot{background:var(--surface); overflow:hidden}
.shot img{width:100%; transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.022)}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px var(--pad); color:#fff;
  border-bottom:1px solid transparent;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
header.solid{background:rgba(255,255,255,.95); backdrop-filter:blur(10px); color:var(--ink); border-bottom-color:var(--border)}
.mark{font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; line-height:1.25}
.mark span{display:block; font-weight:500; font-size:9.5px; letter-spacing:.14em; opacity:.66; margin-top:3px}
nav{display:flex; gap:24px; align-items:center}
nav a{font-size:12.5px; font-weight:500; letter-spacing:.03em; text-decoration:none; opacity:.88}
nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:5px}
header a:focus-visible, .idx a:focus-visible, .btn:focus-visible, .clines a:focus-visible{outline:2px solid var(--bright); outline-offset:3px}

/* ---------- hero ---------- */
.hero{height:100svh; min-height:580px; position:relative; overflow:hidden; background:var(--night)}
.hero img{width:100%; height:100%; object-fit:cover; object-position:50% 34%}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,23,48,.5) 0%, rgba(15,23,48,0) 30%, rgba(15,23,48,.15) 52%, rgba(15,23,48,.88) 100%);
}
.hero-copy{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 var(--pad) clamp(26px,5vh,60px); color:#fff}
.hero-copy .inner{max-width:1320px; margin:0 auto}
.hero h1{color:#fff; max-width:19ch}
.hero .lede{color:rgba(255,255,255,.88); max-width:62ch; margin-top:18px}
.hero .eyebrow{color:#8FBBFF}
.hero-foot{
  display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between; align-items:flex-end;
  margin-top:30px; border-top:1px solid rgba(255,255,255,.24); padding-top:15px;
}
.hero-foot .cap{color:rgba(255,255,255,.68)}

/* ---------- stats ---------- */
.stats{background:var(--night); color:#fff; padding:clamp(42px,6vw,68px) 0}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr)}
.stats .cell{border-left:1px solid rgba(255,255,255,.16); padding-left:26px; padding-right:20px}
.stats .cell:first-child{border-left:0; padding-left:0}
.stats .n{font-size:clamp(34px,4.2vw,56px); font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.stats .l{font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:12px; line-height:1.45}
@media(max-width:820px){
  .stats .grid{grid-template-columns:1fr 1fr; gap:32px 0}
  .stats .cell:nth-child(odd){border-left:0; padding-left:0}
}

/* ---------- contents ---------- */
.contents{padding:clamp(58px,8vw,104px) 0 clamp(28px,4vw,46px)}
.idx{border-top:1px solid var(--border)}
.idx a{
  display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--border); text-decoration:none;
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1), color .3s;
}
.idx a:hover{padding-left:14px; color:var(--blue)}
.idx .k{font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.06em}
.idx .ttl{font-size:clamp(19px,2.1vw,27px); font-weight:400; letter-spacing:-.024em; line-height:1.22}
.idx .ttl b{font-weight:600}
.idx .meta{font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); text-align:right}
@media(max-width:700px){
  .idx a{grid-template-columns:40px 1fr}
  .idx .meta{grid-column:2; text-align:left; margin-top:5px}
}

/* ---------- case ---------- */
.case{padding:clamp(58px,8vw,116px) 0 0}
.case-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(28px,5vw,84px); align-items:start}
.case-head > .case-num,.case-head > .case-client,.case-head > h2{grid-column:1}
.case-head > .case-body{grid-column:2; grid-row:1 / span 3; margin-top:8px; max-width:54ch}
.split .case-head{grid-template-columns:minmax(0,1fr)}
.split .case-head > .case-body{grid-column:1; grid-row:auto; max-width:none}
@media(max-width:900px){
  .case-head{grid-template-columns:minmax(0,1fr)}
  .case-head > .case-body{grid-column:1; grid-row:auto; margin-top:18px; max-width:none}
}
.case-num{font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--muted); display:block; margin-bottom:14px; font-variant-numeric:tabular-nums}
.case-client{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:14px}
.case-body{font-size:clamp(16.5px,1.2vw,18px); color:var(--slate)}
.case-body strong{color:var(--ink); font-weight:600}
.case-body a{color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.figure{margin:clamp(28px,4vw,50px) 0 0}
.figure figcaption{padding:11px var(--pad) 0; max-width:1320px; margin:0 auto}
.results{display:flex; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:clamp(24px,3vw,40px)}
.results > div{flex:1 1 160px; padding:17px 0; margin-right:26px; border-right:1px solid var(--border)}
.results > div > div{padding-right:26px}
.results > div:last-child{border-right:0; margin-right:0}
.results .rn{font-size:clamp(24px,2.4vw,34px); font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.results .rl{font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:9px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,24px)}
@media(max-width:760px){ .duo{grid-template-columns:1fr} }
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,20px)}
.trio .shot{aspect-ratio:4/3}
.trio .shot img{width:100%; height:100%; object-fit:cover}
@media(max-width:820px){ .trio{grid-template-columns:1fr} .trio .shot{aspect-ratio:16/10} }
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); align-items:center}
.split .results > div{flex:1 1 105px; margin-right:18px}
.split .results > div > div{padding-right:18px}
@media(max-width:880px){ .split{grid-template-columns:1fr} }

.press{display:grid; grid-template-columns:1.55fr .45fr; gap:clamp(14px,2vw,28px); align-items:start; margin-top:clamp(28px,4vw,50px)}
@media(max-width:760px){ .press{grid-template-columns:1fr} .press figure:last-child{max-width:300px} }

/* ---------- slider ---------- */
.slider{margin-top:clamp(26px,3.5vw,44px)}
.track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track figure{flex:0 0 33.333%; scroll-snap-align:start; margin:0; aspect-ratio:4/5; background:var(--surface)}
.track img{width:100%; height:100%; object-fit:cover}
@media(max-width:1000px){ .track figure{flex:0 0 55%} }
@media(max-width:620px){ .track figure{flex:0 0 86%} }
.sctrl{display:flex; align-items:center; gap:10px; margin-top:18px}
.sctrl button{
  width:44px; height:44px; border:1px solid var(--border); background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1; cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
.sctrl button:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.sctrl button:focus-visible{outline:2px solid var(--bright); outline-offset:3px}
.sctrl .hint{font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 0 8px}

/* ---------- dark spread ---------- */
.spread{background:var(--night); color:#fff; padding:clamp(64px,9vw,124px) 0; margin-top:clamp(58px,8vw,116px)}
.spread h2{color:#fff}
.spread .case-num{color:rgba(255,255,255,.5)}
.spread .case-client{color:#8FBBFF}
.spread .case-body{color:rgba(255,255,255,.76)}
.spread .case-body strong{color:#fff}
.spread .results{border-top-color:rgba(255,255,255,.2)}
.spread .results > div{border-right-color:rgba(255,255,255,.2)}
.spread .results > div:last-child{border-right:0}
.spread .results .rl{color:rgba(255,255,255,.56)}
.spread .cap{color:rgba(255,255,255,.5)}
.quote{
  font-size:clamp(21px,2.5vw,33px); font-weight:600; letter-spacing:-.028em;
  line-height:1.24; margin:0 0 16px;
}
.quote-attr{font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.56); margin:0}
.gravaa-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,28px); align-items:start; margin-top:clamp(30px,4vw,52px)}
@media(max-width:820px){ .gravaa-grid{grid-template-columns:1fr} }
.pressgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px); margin-top:clamp(28px,4vw,50px)}
.pressgrid figure{margin:0}
.pressgrid .shot{aspect-ratio:16/11; background:#fff}
.pressgrid img{width:100%; height:100%; object-fit:cover; object-position:top center}
@media(max-width:900px){ .pressgrid{grid-template-columns:1fr 1fr} }
.rooms{display:grid; grid-template-columns:.38fr .62fr; gap:clamp(10px,1.4vw,20px); align-items:start; margin-top:clamp(10px,1.4vw,20px)}
@media(max-width:820px){ .rooms{grid-template-columns:1fr} }
.metarow{display:grid; grid-template-columns:.42fr .58fr; gap:clamp(12px,1.6vw,22px); align-items:start; margin-top:clamp(20px,2.6vw,32px)}
@media(max-width:820px){ .metarow{grid-template-columns:1fr} }
.quotebox{border-left:2px solid var(--bright); padding-left:24px; margin-top:clamp(32px,4vw,54px); max-width:640px}

/* ---------- principles ---------- */
.principles{padding:clamp(62px,9vw,120px) 0}
.plist{border-top:1px solid var(--border); margin-top:clamp(28px,4vw,46px)}
.plist .row{
  display:grid; grid-template-columns:44px minmax(0,24ch) 1fr; gap:clamp(14px,3vw,48px);
  padding:clamp(20px,2.8vw,32px) 0; border-bottom:1px solid var(--border); align-items:start;
}
.plist .k{font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--blue); padding-top:6px; font-variant-numeric:tabular-nums}
.plist p{margin:0; color:var(--slate); font-size:16.5px}
@media(max-width:800px){ .plist .row{grid-template-columns:34px 1fr} .plist p{grid-column:2} }

/* ---------- mosaic ---------- */
.mosaic{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(8px,1vw,16px); margin-top:clamp(28px,4vw,48px)}
.mosaic figure{margin:0; height:100%}
.mosaic img{width:100%; height:100%; object-fit:cover}
.m-a{grid-column:span 7} .m-b{grid-column:span 5}
.m-c{grid-column:span 4} .m-e{grid-column:span 8}
@media(max-width:820px){ .m-a,.m-b,.m-e{grid-column:span 12} .m-c{grid-column:span 6} }

/* ---------- testimonials ---------- */
.says{background:var(--surface); padding:clamp(62px,9vw,120px) 0}
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,48px); margin-top:clamp(28px,4vw,48px)}
.tgrid blockquote{margin:0; border-top:2px solid var(--ink); padding-top:19px}
.tgrid q{font-size:clamp(17px,1.4vw,20px); font-weight:500; line-height:1.36; letter-spacing:-.015em; quotes:"“" "”" "‘" "’"}
.tgrid .who{margin:17px 0 0; font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); line-height:1.7}
.tgrid .who b{display:block; color:var(--ink); font-weight:600}
@media(max-width:880px){ .tgrid{grid-template-columns:1fr} }

/* ---------- about ---------- */
.about{padding:clamp(62px,9vw,120px) 0}
.logos{display:flex; flex-wrap:wrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:clamp(32px,4vw,54px)}
.logos span{padding:15px 0; margin-right:22px; font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.logos span:not(:last-child)::after{content:"·"; margin-left:22px; color:var(--border)}

/* ---------- ways ---------- */
.ways{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); margin-top:clamp(28px,4vw,46px)}
.ways article{padding:26px 30px 32px 0; border-right:1px solid var(--border)}
.ways article:last-child{border-right:0}
.ways h3{margin-bottom:11px}
.ways p{font-size:16px; color:var(--slate); margin:0}
@media(max-width:820px){
  .ways{grid-template-columns:1fr}
  .ways article{border-right:0; border-bottom:1px solid var(--border); padding-right:0}
  .ways article:last-child{border-bottom:0}
}

/* ---------- contact ---------- */
.contact{background:var(--night); color:#fff; padding:clamp(66px,9vw,128px) 0}
.contact h2{color:#fff; max-width:16ch}
.contact .eyebrow{color:#8FBBFF}
.contact-intro{max-width:56ch; color:rgba(255,255,255,.72); font-size:clamp(16.5px,1.25vw,18px); margin:20px 0 0}
.clines{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 48px; margin-top:clamp(30px,4vw,52px); max-width:820px}
.clines a,.clines span{text-decoration:none; display:block}
.clines .k{font-size:10.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:7px}
.clines .v{font-size:clamp(18px,1.7vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.2}
.clines a .v{border-bottom:1px solid rgba(255,255,255,.28); display:inline-block; transition:border-color .25s}
.clines a:hover .v{border-color:#fff}
.btn{
  display:inline-block; margin-top:clamp(32px,4vw,50px); background:var(--blue); color:#fff;
  text-decoration:none; padding:16px 32px; font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; transition:background .25s, transform .25s;
}
.btn:hover{background:var(--bright); transform:translateY(-2px)}
@media(max-width:700px){ .clines{grid-template-columns:1fr} }

footer{background:var(--night); color:rgba(255,255,255,.45); padding:0 0 44px; font-size:12.5px}
footer .fl{border-top:1px solid rgba(255,255,255,.14); padding-top:25px; display:flex; flex-wrap:wrap; gap:12px 40px; justify-content:space-between}
footer a{color:rgba(255,255,255,.72)}

/* ---------- mobile ---------- */
@media(max-width:700px){
  header{padding:13px 18px; gap:12px}
  .mark span{display:none}
  .mark{font-size:11.5px; letter-spacing:.1em; white-space:nowrap}
  nav{gap:12px}
  nav a{font-size:11.5px}
  nav .nav-secondary{display:none}
  .bleed.shot{aspect-ratio:16/11}
  .bleed.shot img{width:100%; height:100%; object-fit:cover}
  .hero .lede{font-size:16px}
}
@media(max-width:540px){ nav .nav-compact{display:none} }
@media(max-width:680px){
  .results{display:grid; grid-template-columns:1fr 1fr}
  .results > div{border-right:0; margin-right:0; padding:15px 0; border-top:1px solid var(--border)}
  .results > div > div{padding-right:0}
  .results > div:nth-child(odd){padding-right:16px; border-right:1px solid var(--border)}
  .results > div:nth-child(even){padding-left:16px}
  .results > div:nth-child(-n+2){border-top:0}
  .spread .results > div{border-top-color:rgba(255,255,255,.2)}
  .spread .results > div:nth-child(odd){border-right-color:rgba(255,255,255,.2)}
  .split .results > div{flex:none; margin-right:0}
}

/* ---------- content visibility ---------- */
.js .rv{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shot img{transition:none}
}

.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}


/* ---------- shared filter bar (media + writing) ---------- */
.mhead{background:var(--night); color:#fff; padding:clamp(94px,11vw,150px) 0 clamp(38px,5vw,64px)}
.mhead h1{color:#fff; font-size:clamp(34px,5vw,66px); max-width:18ch}
.mhead .lede{color:rgba(255,255,255,.8); max-width:60ch; margin-top:18px}
.mhead .eyebrow{color:#8FBBFF}
.mbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:14px 0}
.mbar .inner{display:flex; flex-wrap:wrap; gap:12px 10px; align-items:center; justify-content:space-between}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:9px 14px; border:1px solid var(--border); background:var(--paper); color:var(--slate); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.chip:focus-visible, #q:focus-visible{outline:2px solid var(--bright); outline-offset:2px}
#q{font-family:var(--sans); font-size:14px; padding:10px 14px; border:1px solid var(--border);
  background:var(--paper); color:var(--ink); min-width:230px}
#q::placeholder{color:var(--muted)}
.mcount{font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:22px 0 0}
.mempty{padding:60px 0 100px; color:var(--muted)}
.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}

/* ---------- writing index ---------- */
.wstart{padding:clamp(58px,8vw,104px) 0; background:var(--paper)}
.wstart-intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(24px,6vw,88px); align-items:end; margin-bottom:clamp(28px,4vw,48px)}
.wstart-intro h2{max-width:15ch}
.wstart-intro > p{max-width:48ch; color:var(--slate); font-size:clamp(16.5px,1.25vw,18px); margin:0}
.wlead{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); background:var(--night); color:#fff; text-decoration:none; overflow:hidden}
.wlead-image{min-height:390px}
.wlead-image img{width:100%; height:100%; object-fit:cover; object-position:center 45%}
.wlead-copy{padding:clamp(28px,5vw,64px); align-self:center}
.wlead .wtheme,.wstart-card .wtheme{font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin:0 0 15px}
.wlead .wtheme{color:#8FBBFF}
.wlead h3{font-size:clamp(27px,3.3vw,46px); max-width:15ch; margin-bottom:18px}
.wlead-copy > p:not(.wtheme){color:rgba(255,255,255,.74); max-width:44ch; margin:0 0 24px}
.wread{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.wlead .wread{color:#fff}
.wlead:hover h3,.wlead:focus-visible h3,.wstart-card:hover h3,.wstart-card:focus-visible h3{color:var(--bright)}
.wlead:focus-visible,.wstart-card:focus-visible,.wcard:focus-visible{outline:2px solid var(--bright); outline-offset:4px}
.wstart-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--border); margin-top:clamp(18px,2.4vw,28px)}
.wstart-card{display:block; text-decoration:none; padding:clamp(24px,3vw,38px) clamp(22px,3.5vw,48px) clamp(24px,3vw,38px) 0; border-bottom:1px solid var(--border)}
.wstart-card + .wstart-card{border-left:1px solid var(--border); padding-left:clamp(22px,3.5vw,48px); padding-right:0}
.wstart-card .wtheme{color:var(--blue)}
.wstart-card h3{font-size:clamp(21px,2.2vw,30px); max-width:24ch; transition:color .25s}
.wstart-card > p:not(.wtheme){font-size:15.5px; color:var(--slate); max-width:54ch; margin:14px 0 20px}
.wstart-card .wread{color:var(--ink)}
.wlist{border-top:1px solid var(--border); margin:clamp(18px,2.4vw,28px) 0 clamp(70px,9vw,120px)}
.wcard{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(16px,3vw,56px);
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--border); text-decoration:none;
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1)}
.wcard:hover{padding-left:12px}
.wcard:hover h2{color:var(--blue)}
.wcard h2{font-size:clamp(20px,2.2vw,30px); letter-spacing:-.026em; line-height:1.16; transition:color .25s; margin:8px 0 0}
.wcard .wtheme{font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin:0}
.wcard .wdek{font-size:16px; color:var(--slate); margin:0; line-height:1.55}
.wcard .wmeta{font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:12px 0 0}
@media(max-width:820px){
  .wstart-intro,.wlead,.wstart-grid{grid-template-columns:1fr}
  .wstart-intro{align-items:start}
  .wlead-image{min-height:0; aspect-ratio:4/3}
  .wlead h3{max-width:18ch}
  .wstart-card,.wstart-card + .wstart-card{border-left:0; padding-left:0; padding-right:0}
  .wcard{grid-template-columns:1fr; gap:10px}
}

/* ---------- article ---------- */
.arthead{padding-top:clamp(96px,11vw,140px)}
.arthead h1{font-size:clamp(32px,4.6vw,58px); max-width:20ch; letter-spacing:-.034em; line-height:1.04}
.arthead .lede{max-width:56ch; margin-top:20px; color:var(--slate)}
.artmeta{font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin:clamp(24px,3vw,34px) 0 0; padding-top:16px; border-top:1px solid var(--border)}
.artbody{max-width:68ch; margin:clamp(30px,4vw,50px) 0 0; font-size:17.5px; line-height:1.68}
.artbody p{margin:0 0 1.15em; color:#22293A}
.artbody h3{font-size:clamp(19px,1.8vw,24px); margin:clamp(30px,3.4vw,44px) 0 12px; letter-spacing:-.022em}
.artbody strong{font-weight:600; color:var(--ink)}
.artbody em{font-style:italic}
.artfoot{border-top:1px solid var(--border); margin-top:clamp(40px,5vw,64px); padding-top:22px; max-width:68ch}
.artfoot p{font-size:15px; color:var(--slate)}
.artfoot a{color:var(--blue)}
.related{margin:clamp(46px,6vw,74px) 0 clamp(60px,8vw,100px)}
.related .rgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); margin-top:20px}
.related a{text-decoration:none; border-top:2px solid var(--ink); padding-top:16px; display:block}
.related a:hover h3{color:var(--blue)}
.related h3{font-size:17px; letter-spacing:-.02em; line-height:1.24; transition:color .25s; margin:0}
.related .rt{font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 8px}
@media(max-width:800px){ .related .rgrid{grid-template-columns:1fr} }