/* case-study-v2.css
   Case study pages on the v2 design system. Loads after tokens.css,
   partials.css, home-v2.css and service-v2.css, and adds only the patterns
   those do not already carry.

   Reused from elsewhere, do not redefine here:
   .wrap .dark .warm .grain .sig .ch-head .ch-split .ghost .ovl .h2 .lead .btn
   .rv .bf .shot .cap-l .pq .tags .flow .close-line .stage .fnd .lvl .diff
   .cta-g .cl .crumbs .comp .rel .chan .chan-2 .audit

   No heading font-size is set here. tokens.css owns the scale.
*/

/* ── case study hero ─────────────────────────────────────── */
.cs-hero{padding:132px 0 116px}
@media(max-width:960px){.cs-hero{padding:104px 0 84px}}
.cs-hero-g{display:grid;grid-template-columns:1fr 1.06fr;gap:60px;align-items:center;margin-top:34px}
@media(max-width:1024px){.cs-hero-g{grid-template-columns:1fr;gap:48px}}
.cs-hero h1{max-width:22ch}
.cs-hero .sub{font-weight:600;color:var(--acid);font-size:clamp(.98rem,1.5vw,1.16rem);margin:20px 0 16px;letter-spacing:-0.02em;max-width:48ch}
.cs-hero .lead{max-width:52ch}
.cs-hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;align-items:center}
.cs-back{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--gray-s);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.cs-back:hover{color:var(--paper);border-bottom-color:var(--paper)}

/* project metadata ledger */
.cs-meta{list-style:none;border-top:1px solid var(--ld);margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.cs-meta{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.cs-meta{grid-template-columns:1fr}}
.cs-meta li{padding:16px 20px;border-bottom:1px solid var(--ld);border-right:1px solid var(--ld)}
.cs-meta li:nth-child(3n){border-right:0}
.cs-meta li:nth-child(3n+1){padding-left:0}
@media(max-width:760px){.cs-meta li:nth-child(3n){border-right:1px solid var(--ld)}.cs-meta li:nth-child(2n){border-right:0}.cs-meta li{padding-left:20px}.cs-meta li:nth-child(2n+1){padding-left:0}}
@media(max-width:440px){.cs-meta li{border-right:0;padding-right:0;padding-left:0}}
.cs-meta em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;display:block;margin-bottom:7px}
.cs-meta span{font-size:14px;line-height:1.5;display:block}
.dark .cs-meta span{color:var(--paper)}

/* service tag row */
.cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.cs-tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:6px 13px;border:1px solid var(--ld);border-radius:100px;color:var(--gray-s)}

/* ── figures: the workhorse of this page ─────────────────── */
.fig{margin:0}
.fig .bf .shot{display:block;width:100%;height:auto}
.fig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gray);margin-top:12px;line-height:1.65;max-width:80ch}
.dark .fig figcaption{color:var(--gray-s)}
/* a full-bleed screenshot moment, used once or twice per page */
.fig-wide{margin-top:52px}
.fig-wide figcaption{margin-top:14px}
/* two figures side by side */
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
@media(max-width:860px){.fig-pair{grid-template-columns:1fr;gap:32px}}
/* text beside a figure */
.fig-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;margin-top:48px}
.fig-split.flip .fig{order:-1}
@media(max-width:960px){.fig-split,.fig-split.flip{grid-template-columns:1fr;gap:32px}.fig-split.flip .fig{order:0}}
.fig-split ul{list-style:none;margin-top:20px}
.fig-split li{font-size:14px;line-height:1.85;padding-left:16px;position:relative;color:var(--gray)}
.fig-split li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--gray)}
.dark .fig-split li{color:var(--gray-s)}
.dark .fig-split li::before{background:var(--acid)}

/* ── standalone list block — no figure, spans full width ── */
.solo{margin-top:48px}
.solo ul{list-style:none;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 52px;align-items:start}
@media(max-width:720px){.solo ul{grid-template-columns:1fr}}
.solo li{font-size:14px;line-height:1.85;padding-left:16px;position:relative;color:var(--gray)}
.solo li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--gray)}
.dark .solo li{color:var(--gray-s)}
.dark .solo li::before{background:var(--acid)}

/* ── annotated screenshot callouts ───────────────────────── */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:28px}
.dark .notes{background:var(--ld);border-color:var(--ld)}
@media(max-width:860px){.notes{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.notes{grid-template-columns:1fr}}
.notes>div{background:var(--paper);padding:20px 18px}
.warm .notes>div{background:#F4F2EA}
.dark .notes>div{background:var(--black)}
.notes b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--gray)}
.dark .notes b{color:var(--acid)}
.notes p{font-size:13px;line-height:1.65;color:var(--gray)}
.dark .notes p{color:var(--gray-s)}

/* ── pipeline stage ladder ───────────────────────────────── */
.stages{border-top:1px solid var(--ld);margin-top:44px}
.stg-i{display:grid;grid-template-columns:52px 230px 1fr;gap:26px;padding:18px 0;border-bottom:1px solid var(--ld);align-items:baseline}
@media(max-width:820px){.stg-i{grid-template-columns:44px 1fr;gap:16px}.stg-i>p{grid-column:2}}
@media(max-width:480px){.stg-i{grid-template-columns:1fr;gap:6px}.stg-i>p{grid-column:1}}
.stg-i em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--acid)}
.stg-i b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.stg-i>p{color:var(--gray-s);font-size:14px;line-height:1.7}
.stg-i.unseen em,.stg-i.unseen b{color:var(--gray)}
.stg-i.unseen>p{color:var(--gray)}

/* ── workflow entries ────────────────────────────────────── */
.wf{border-top:1px solid var(--ll);margin-top:44px}
.wf-i{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;padding:32px 0;border-bottom:1px solid var(--ll);align-items:start}
@media(max-width:860px){.wf-i{grid-template-columns:1fr;gap:18px;padding:26px 0}}
.wf-i .wf-name{font-family:var(--mono);font-size:13px;letter-spacing:.04em;display:block;margin-bottom:8px}
.wf-i .wf-state{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ll);border-radius:100px;padding:3px 10px;color:var(--gray);margin-left:10px;white-space:nowrap}
.wf-i h3{margin-bottom:8px}
.wf-i>div>p{color:var(--gray);font-size:14px;line-height:1.7;max-width:46ch}
.wf-spec{width:100%}
.wf-spec div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:8px 0;border-bottom:1px solid var(--ll);font-size:13.5px;line-height:1.6}
.wf-spec div:last-child{border-bottom:0}
.wf-spec em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--gray);text-transform:uppercase;padding-top:3px}
@media(max-width:480px){.wf-spec div{grid-template-columns:1fr;gap:2px}}

/* ── before and after comparison ─────────────────────────── */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
@media(max-width:760px){.cmp{grid-template-columns:1fr}}
.cmp>div{background:#F4F2EA;padding:30px 28px}
.cmp em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px}
.cmp h3{margin-bottom:14px}
.cmp ul{list-style:none}
.cmp li{font-size:14px;line-height:1.85;padding-left:20px;position:relative;color:var(--gray)}
.cmp li::before{content:"\2013";position:absolute;left:0;color:var(--gray);font-family:var(--mono)}
.cmp .after li{color:var(--black)}
.cmp .after li::before{content:"+";color:var(--black)}

/* ── takeaways ───────────────────────────────────────────── */
.take{border-top:1px solid var(--ld);margin-top:44px}
.take-i{display:grid;grid-template-columns:64px 1fr 1.2fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--ld);align-items:baseline}
@media(max-width:820px){.take-i{grid-template-columns:48px 1fr;gap:18px}.take-i>p{grid-column:2}}
@media(max-width:480px){.take-i{grid-template-columns:1fr;gap:8px}.take-i>p{grid-column:1}}
.take-i em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--acid)}
.take-i h3{letter-spacing:-0.015em}
.take-i>p{color:var(--gray-s);font-size:14.5px;line-height:1.7}

/* ── small subheading rule, used above the related case studies row ─── */
.gal-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.gal-h::after{content:"";flex:1;height:1px;background:var(--ll)}

/* ── related case studies ────────────────────────────────── */
.rcs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:900px){.rcs{grid-template-columns:1fr}}
.rcs a{text-decoration:none;color:inherit;border-top:2px solid var(--ll);padding-top:20px;display:block;transition:border-color .2s}
.rcs a:hover{border-top-color:var(--black)}
.dark .rcs a{border-top-color:var(--ld)}
.dark .rcs a:hover{border-top-color:var(--acid)}
.rcs em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:9px}
.rcs h3{margin-bottom:7px}
.rcs p{font-size:13.5px;line-height:1.65;color:var(--gray)}
.dark .rcs p{color:var(--gray-s)}

/* ══ ecommerce growth case study ═══════════════════════════
   Patterns below are used by the Dallas Parrots page. They sit here rather
   than in a page file because a second multi-channel case study will reuse
   them. Nothing above this marker was changed for that page.
*/

/* ── hero screenshot stack, offset rather than a single frame ── */
.cs-stack{display:grid;gap:18px}
.cs-stack figure{margin:0;position:relative}
.cs-stack figure:nth-child(2){margin-left:9%}
.cs-stack figure:nth-child(3){margin-left:18%}
@media(max-width:1024px){.cs-stack figure:nth-child(2),.cs-stack figure:nth-child(3){margin-left:0}}
.cs-stack figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-s);margin-top:9px;line-height:1.6}
/* thin connector between the stacked frames, desktop only */
.cs-stack figure:not(:last-child)::after{content:"";position:absolute;left:22px;bottom:-19px;width:1px;height:19px;background:var(--ld)}
@media(max-width:1024px){.cs-stack figure::after{display:none}}

/* ── dense screenshots on small screens ──────────────────────
   An ads dashboard scaled to a 335px column is unreadable. Below 700px these
   figures keep the screenshot at a legible width and let it scroll sideways
   inside its own frame. The page body never scrolls horizontally.
   The lightbox still works on tap for anyone who wants the full capture. */
@media(max-width:700px){
  /* grid items default to min-width:auto, so without this the track grows to
     the 820px image and the frame never scrolls, it just overflows. */
  .fig-split>*,.fig-pair>*,.gal-set>*{min-width:0}
  .fig-scroll,.fig-scroll .bf{min-width:0;max-width:100%}
  .fig-scroll .bf{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig-scroll .bf .shot{width:820px;max-width:none}
  .fig-scroll .bf .bar{position:sticky;left:0}
  .fig-scroll figcaption::before{content:"Scroll sideways or tap to enlarge. ";color:var(--black)}
  .dark .fig-scroll figcaption::before{color:var(--acid)}
}

/* ── verified revenue comparison ─────────────────────────────
   The second cell is a black panel so the acid figure stays legible on an
   off-white section. Both cells carry a written label, so the meaning never
   depends on the colour alone. */
.rev{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ll);margin-top:44px}
@media(max-width:760px){.rev{grid-template-columns:1fr}}
.rev>div{padding:40px 34px}
.rev .then{border-right:1px solid var(--ll)}
@media(max-width:760px){.rev .then{border-right:0;border-bottom:1px solid var(--ll)}}
.rev .now{background:var(--black);color:var(--paper)}
.rev em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:20px}
.rev .now em{color:var(--gray-s)}
.rev b{font-family:var(--mono);font-weight:500;font-size:clamp(2.4rem,5.6vw,4rem);line-height:1;letter-spacing:-0.03em;display:block}
.rev .now b{color:var(--acid)}
.rev small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);display:block;margin-top:18px;line-height:1.65}
.rev .now small{color:var(--gray-s)}
.rev-span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--ll);border-top:0;padding:18px 34px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:baseline}
/* label then value. the label is set back so the pair reads as one unit */
.rev-span span:nth-child(odd){color:var(--gray)}
.rev-span span:nth-child(even){color:var(--black);margin-right:22px}
.rev-span span:last-child{margin-right:0}
.rev-note{margin-top:34px;border-left:2px solid var(--black);padding:10px 0 10px 22px;font-size:15px;line-height:1.75;max-width:74ch}
.rev-note b{font-weight:600}

/* ── channel matrix on a light section, four across ──────── */
.chan.light{border-color:var(--ll)}
.chan.light>div{border-right-color:var(--ll);border-bottom-color:var(--ll)}
.chan.light em{color:var(--gray)}
.chan.light p{color:var(--gray)}
.chan.four{grid-template-columns:repeat(4,1fr)}
.chan.four>div:nth-child(3n){border-right:1px solid var(--ll)}
.chan.four>div:nth-child(4n){border-right:0}
@media(max-width:900px){
  .chan.four{grid-template-columns:1fr 1fr}
  .chan.four>div:nth-child(4n){border-right:1px solid var(--ll)}
  .chan.four>div:nth-child(2n){border-right:0}
}
@media(max-width:520px){.chan.four{grid-template-columns:1fr}.chan.four>div{border-right:0}}
.chan.light h3{margin-bottom:9px}

/* ── outcome ledger, two columns of short statements ─────── */
.outc{list-style:none;border-top:1px solid var(--ll);margin-top:44px;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:760px){.outc{grid-template-columns:1fr}}
.outc li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:baseline;padding:20px 26px 20px 0;border-bottom:1px solid var(--ll);font-size:14.5px;line-height:1.7;color:var(--gray)}
.outc li:nth-child(odd){border-right:1px solid var(--ll)}
.outc li:nth-child(even){padding-left:26px}
@media(max-width:760px){.outc li:nth-child(odd){border-right:0}.outc li:nth-child(even){padding-left:0}}
.outc em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;color:var(--gray)}
/* the revenue line closes the ledger. it runs the full width so the last row
   never leaves a half filled cell, and it is the only entry set in full black */
.outc li.key{grid-column:1/-1;grid-template-columns:32px 1fr;border-right:0;padding-right:0;color:var(--black);font-weight:500;font-size:15.5px}
.outc li.key em{color:var(--black)}

/* ── proof gallery, mixed sizes rather than a card grid ──── */
.gal-set{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 28px;margin-bottom:60px}
.gal-set:last-child{margin-bottom:0}
.gal-set figure{margin:0;grid-column:span 3}
.gal-set figure.wide{grid-column:span 6}
.gal-set figure.third{grid-column:span 2}
@media(max-width:900px){
  .gal-set{grid-template-columns:1fr;gap:34px}
  .gal-set figure,.gal-set figure.wide,.gal-set figure.third{grid-column:span 1}
}
.gal-set figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gray);margin-top:12px;line-height:1.65}
/* a group with no publishable capture. states what is missing instead of
   filling the slot with an unrelated screenshot. */
.gal-note{border:1px dashed var(--ll);padding:24px 22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--gray);line-height:1.85;grid-column:span 3}
@media(max-width:900px){.gal-note{grid-column:span 1}}
.gal-note b{display:block;color:var(--black);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:10px;margin-bottom:9px}

/* ══ commercial property case study ════════════════════════
   An architectural register for the Buraq page. Squared plates instead of
   the rounded browser chrome, hairline grids, and mono metadata. Kept here
   so a second property project can reuse it.
*/

/* ── squared image plate with corner ticks ───────────────── */
.plate{border:1px solid var(--ld);background:var(--panel);padding:12px;position:relative}
section:not(.dark) .plate{border-color:var(--ll);background:#EFEDE6}
.plate img{display:block;width:100%;height:auto}
.plate::before,.plate::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--acid);pointer-events:none}
.plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
section:not(.dark) .plate::before,section:not(.dark) .plate::after{border-color:var(--black)}
.plate-c{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gray);margin-top:12px;line-height:1.65;max-width:80ch}
.dark .plate-c{color:var(--gray-s)}
/* a plate that carries a tall render rather than a wide capture */
.plate-tall img{max-height:none}
.plate .shot{cursor:zoom-in}
/* plate window. a dense ads capture pans inside this below 700px while the
   caption underneath stays where it is.
   Named plate-w, not pw. home-v2.css already owns .pw as a three column grid,
   and reusing the name turned every capture into a grid item a third of the
   frame wide. */
.plate-w{min-width:0}
@media(max-width:700px){
  .plate,.plate .plate-w{min-width:0;max-width:100%}
  .plate-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .plate-w img{width:820px;max-width:none}
  .plate-w+.plate-c::before,.plate-w+figcaption::before{content:"Scroll sideways or tap to enlarge. ";color:var(--black)}
  .dark .plate-w+.plate-c::before{color:var(--acid)}
}

/* ── blueprint metadata grid ─────────────────────────────── */
.blue{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ld);border-left:1px solid var(--ld);margin-top:44px}
section:not(.dark) .blue{border-top-color:var(--ll);border-left-color:var(--ll)}
.blue li{padding:18px 20px;border-right:1px solid var(--ld);border-bottom:1px solid var(--ld)}
section:not(.dark) .blue li{border-right-color:var(--ll);border-bottom-color:var(--ll)}
.blue em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;display:block;margin-bottom:8px}
section:not(.dark) .blue em{color:var(--gray)}
.blue span{font-size:14px;line-height:1.5;display:block}
.dark .blue span{color:var(--paper)}
@media(max-width:900px){.blue{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.blue{grid-template-columns:1fr}}

/* ── audience layers ─────────────────────────────────────── */
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
.dark .aud{background:var(--ld);border-color:var(--ld)}
.aud>div{background:var(--paper);padding:26px 22px;display:flex;flex-direction:column}
.warm .aud>div{background:#F4F2EA}
.dark .aud>div{background:var(--black)}
.aud em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;display:block;margin-bottom:10px}
.dark .aud em{color:var(--acid)}
.aud h3{margin-bottom:10px}
.aud p{font-size:13.5px;line-height:1.7;color:var(--gray);margin-bottom:18px}
.dark .aud p{color:var(--gray-s)}
.aud ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.aud li{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:5px 11px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}
.dark .aud li{border-color:var(--ld);color:var(--gray-s)}
@media(max-width:1024px){.aud{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.aud{grid-template-columns:1fr}}

/* ── withheld or missing asset, stated in place ──────────── */
.miss{border:1px dashed var(--ll);padding:26px 30px;margin-top:40px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;line-height:1.9;color:var(--gray)}
/* When the block sits directly in the wrap it runs the full column width, so
   the text splits into two to keep the measure readable. Nested copies, like
   the one inside a fig-split cell, stay single column because their container
   is already narrow. */
@media(min-width:900px){
  .wrap>.miss{columns:2;column-gap:46px}
  .wrap>.miss b{column-span:all}
}
.dark .miss{border-color:var(--ld);color:var(--gray-s)}
.miss b{display:block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--black);margin-bottom:9px}
.dark .miss b{color:var(--acid)}

/* ══ search performance case study ═════════════════════════
   A data register for the automotive SEO page. Wide horizontal rules,
   mono readouts, and a dark slab for the one real capture. Kept here so a
   second search engagement can reuse it.
*/

/* ── verified metric pair, read as a readout not a card ──── */
.gauge{border-top:2px solid var(--black);margin-top:44px}
.dark .gauge{border-top-color:var(--acid)}
.gauge-i{display:grid;grid-template-columns:210px 1fr 1.1fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--ll);align-items:baseline}
.dark .gauge-i{border-bottom-color:var(--ld)}
@media(max-width:900px){.gauge-i{grid-template-columns:1fr;gap:12px;padding:28px 0}}
.gauge-i b{font-family:var(--mono);font-weight:500;font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:.92;letter-spacing:-0.04em;display:block}
.dark .gauge-i b{color:var(--acid)}
.gauge-i em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px}
.dark .gauge-i em{color:var(--gray-s)}
.gauge-i h3{margin-bottom:8px}
.gauge-i>div:last-child p{color:var(--gray);font-size:14px;line-height:1.75}
.dark .gauge-i>div:last-child p{color:var(--gray-s)}
.gauge-note{margin-top:30px;border-left:2px solid var(--black);padding:10px 0 10px 22px;font-size:15px;line-height:1.75;max-width:76ch}
.dark .gauge-note{border-left-color:var(--acid);color:var(--paper)}

/* ── dark data slab, holds the one real capture ──────────── */
.slab{background:var(--panel);border:1px solid var(--ld);padding:26px;margin-top:44px}
section:not(.dark) .slab{background:#EFEDE6;border-color:var(--ll)}
.slab img{display:block;width:100%;height:auto}
/* a crop smaller than its column. upscaling a 256px capture to fill the slab
   just makes it blurry, so this one keeps its native size and centres. */
.slab.fit img{width:auto;max-width:100%;margin:0 auto}
.slab .shot{cursor:zoom-in}
.slab-h{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:baseline;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--ld);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
section:not(.dark) .slab-h{border-bottom-color:var(--ll)}
.slab-h b{font-weight:500;color:var(--acid)}
section:not(.dark) .slab-h b{color:var(--black)}
.slab-h span{color:var(--gray-s)}
section:not(.dark) .slab-h span{color:var(--gray)}
.slab-c{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gray-s);margin-top:18px;line-height:1.75;max-width:86ch}
section:not(.dark) .slab-c{color:var(--gray)}
.slab-w{min-width:0}
@media(max-width:700px){
  .slab,.slab .slab-w{min-width:0;max-width:100%}
  .slab-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .slab-w img{width:760px;max-width:none}
}

/* ── audit matrix, dense technical checklist ─────────────── */
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
.dark .matrix{background:var(--ld);border-color:var(--ld)}
@media(max-width:900px){.matrix{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.matrix{grid-template-columns:1fr}}
.matrix>div{background:var(--paper);padding:26px 24px}
.warm .matrix>div{background:#F4F2EA}
.dark .matrix>div{background:var(--black)}
.matrix h3{margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.matrix h3 i{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.1em;color:var(--gray)}
.dark .matrix h3 i{color:var(--acid)}
.matrix ul{list-style:none}
.matrix li{font-size:13.5px;line-height:1.85;color:var(--gray);padding-left:18px;position:relative}
.dark .matrix li{color:var(--gray-s)}
.matrix li::before{content:"\002B";position:absolute;left:0;top:0;font-family:var(--mono);font-size:11px;color:var(--gray)}
.dark .matrix li::before{color:var(--acid)}

/* ── search intent map, query shape to answering page ───── */
.imap{border-top:1px solid var(--ll);margin-top:44px}
.dark .imap{border-top-color:var(--ld)}
.imap-i{display:grid;grid-template-columns:150px 1.1fr 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--ll);align-items:baseline}
.dark .imap-i{border-bottom-color:var(--ld)}
@media(max-width:860px){.imap-i{grid-template-columns:1fr;gap:8px;padding:20px 0}}
.imap-i em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.dark .imap-i em{color:var(--acid)}
.imap-i b{font-family:var(--mono);font-weight:400;font-size:13.5px;letter-spacing:.02em;color:var(--black);display:block}
.dark .imap-i b{color:var(--paper)}
.imap-i p{color:var(--gray);font-size:14px;line-height:1.7}
.dark .imap-i p{color:var(--gray-s)}
/* the header row labels the three columns rather than repeating them per row */
.imap-h{display:grid;grid-template-columns:150px 1.1fr 1fr;gap:32px;padding-bottom:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
@media(max-width:860px){.imap-h{display:none}}

/* ── site structure, branching rules rather than boxes ──── */
.tree{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media(max-width:900px){.tree{grid-template-columns:1fr;gap:32px}}
.tree>div{border-top:2px solid var(--black);padding-top:20px}
.dark .tree>div{border-top-color:var(--acid)}
.tree h3{margin-bottom:16px}
.tree ol{list-style:none;counter-reset:tr}
.tree li{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;line-height:1.5;padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--ll)}
.dark .tree li{border-bottom-color:var(--ld);color:var(--paper)}
.tree li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:1px;background:var(--gray)}
.dark .tree li::before{background:var(--gray-s)}
.tree li:last-child{border-bottom:0}
.tree li:last-child::before{background:var(--black)}
.dark .tree li:last-child::before{background:var(--acid)}
/* each level steps in, so the hierarchy is legible without any graphics */
.tree li:nth-child(2){padding-left:44px}
.tree li:nth-child(2)::before{left:22px}
.tree li:nth-child(3){padding-left:62px}
.tree li:nth-child(3)::before{left:40px}
.tree li:nth-child(4){padding-left:80px}
.tree li:nth-child(4)::before{left:58px}
.tree li:nth-child(5){padding-left:98px}
.tree li:nth-child(5)::before{left:76px}
@media(max-width:520px){
  .tree li:nth-child(n){padding-left:26px}
  .tree li:nth-child(n)::before{left:4px}
  .tree li:nth-child(2){padding-left:36px}.tree li:nth-child(2)::before{left:14px}
  .tree li:nth-child(3){padding-left:46px}.tree li:nth-child(3)::before{left:24px}
  .tree li:nth-child(4){padding-left:56px}.tree li:nth-child(4)::before{left:34px}
  .tree li:nth-child(5){padding-left:66px}.tree li:nth-child(5)::before{left:44px}
}
.tree p{font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--gray);text-transform:none;letter-spacing:0;margin-top:16px}
.dark .tree p{color:var(--gray-s)}

/* ── takeaways and outcome ledger on the opposite ground ── */
.take.light{border-top-color:var(--ll)}
.take.light .take-i{border-bottom-color:var(--ll)}
.take.light .take-i em{color:var(--gray)}
.take.light .take-i>p{color:var(--gray)}
.dark .outc{border-top-color:var(--ld)}
.dark .outc li{border-bottom-color:var(--ld);color:var(--gray-s)}
.dark .outc li:nth-child(odd){border-right-color:var(--ld)}
.dark .outc em{color:var(--gray-s)}
.dark .outc li.key{color:var(--paper)}
.dark .outc li.key em{color:var(--acid)}

/* ══ publisher scale case study ════════════════════════════
   An editorial register for the health publisher page. Column rules,
   query clusters, a taxonomy ladder and an operating rail. Kept here so a
   second publisher engagement can reuse it.
*/

/* ── three stop traffic readout, start, peak, current ────── */
.trend{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--black);margin-top:44px}
.dark .trend{border-top-color:var(--acid)}
@media(max-width:820px){.trend{grid-template-columns:1fr}}
.trend>div{padding:32px 30px 30px 0;border-right:1px solid var(--ll);border-bottom:1px solid var(--ll)}
.dark .trend>div{border-right-color:var(--ld);border-bottom-color:var(--ld)}
.trend>div+div{padding-left:30px}
.trend>div:last-child{border-right:0}
@media(max-width:820px){.trend>div,.trend>div+div{padding-left:0;border-right:0}}
.trend em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:16px}
.dark .trend em{color:var(--gray-s)}
.trend b{font-family:var(--mono);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;letter-spacing:-0.03em;display:block}
.dark .trend b{color:var(--acid)}
.trend small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gray);display:block;margin-top:14px;line-height:1.7}
.dark .trend small{color:var(--gray-s)}
/* the middle stop is the one the page refuses to hide */
.trend .peak b{color:var(--black)}
.dark .trend .peak b{color:var(--paper)}

/* ── search intent clusters ──────────────────────────────── */
.clus{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
.dark .clus{background:var(--ld);border-color:var(--ld)}
@media(max-width:1000px){.clus{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.clus{grid-template-columns:1fr}}
.clus>div{background:var(--paper);padding:24px 22px}
.warm .clus>div{background:#F4F2EA}
.dark .clus>div{background:var(--black)}
.clus em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:10px}
.dark .clus em{color:var(--acid)}
.clus h3{margin-bottom:12px}
.clus b{font-family:var(--mono);font-weight:400;font-size:12.5px;letter-spacing:.02em;line-height:1.6;display:block;padding:10px 0;border-top:1px solid var(--ll);color:var(--gray)}
.dark .clus b{border-top-color:var(--ld);color:var(--gray-s)}
.clus p{font-size:13px;line-height:1.7;color:var(--gray);margin-top:12px}
.dark .clus p{color:var(--gray-s)}

/* ── prioritization model, three decisions ───────────────── */
.prio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media(max-width:900px){.prio{grid-template-columns:1fr}}
.prio>div{border:1px solid var(--ll);padding:30px 26px;position:relative;display:flex;flex-direction:column}
.dark .prio>div{border-color:var(--ld)}
.prio .cond{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);display:block;line-height:1.8;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--ll)}
.dark .prio .cond{color:var(--gray-s);border-bottom-color:var(--ld)}
.prio h3{margin-bottom:12px}
.prio p{font-size:13.5px;line-height:1.75;color:var(--gray);margin-bottom:18px}
.dark .prio p{color:var(--gray-s)}
.prio .act{margin-top:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:16px;border-top:2px solid var(--black)}
.dark .prio .act{border-top-color:var(--acid);color:var(--acid)}

/* ── taxonomy ladder, levels as columns ──────────────────── */
.tax{margin-top:44px;border-top:1px solid var(--ll)}
.dark .tax{border-top-color:var(--ld)}
.tax-r{display:grid;grid-template-columns:120px 1fr 1.2fr;gap:30px;padding:20px 0;border-bottom:1px solid var(--ll);align-items:baseline}
.dark .tax-r{border-bottom-color:var(--ld)}
@media(max-width:820px){.tax-r{grid-template-columns:1fr;gap:6px;padding:18px 0}}
.tax-r em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.dark .tax-r em{color:var(--acid)}
.tax-r b{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;display:block}
.dark .tax-r b{color:var(--paper)}
.tax-r p{color:var(--gray);font-size:14px;line-height:1.7}
.dark .tax-r p{color:var(--gray-s)}
/* each level steps in so the depth is legible without any graphics */
.tax-r:nth-child(2) b{padding-left:18px}
.tax-r:nth-child(3) b{padding-left:36px}
.tax-r:nth-child(4) b{padding-left:54px}
.tax-r:nth-child(5) b{padding-left:72px}
@media(max-width:820px){.tax-r:nth-child(n) b{padding-left:0}}

/* ── operating rail, the sequence a team runs on ─────────── */
.ops{display:flex;flex-wrap:wrap;border:1px solid var(--ll);margin-top:44px}
.dark .ops{border-color:var(--ld)}
.ops>div{flex:1 1 0;min-width:138px;padding:24px 20px;border-right:1px solid var(--ll)}
.dark .ops>div{border-right-color:var(--ld)}
.ops>div:last-child{border-right:0}
@media(max-width:980px){.ops>div{flex:1 1 30%;border-bottom:1px solid var(--ll)}.dark .ops>div{border-bottom-color:var(--ld)}}
@media(max-width:600px){.ops>div{flex:1 1 100%;border-right:0}}
.ops em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--gray);display:block;margin-bottom:9px}
.dark .ops em{color:var(--acid)}
.ops b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;display:block;line-height:1.45}
.dark .ops b{color:var(--paper)}
.ops span{font-size:12.5px;color:var(--gray);line-height:1.65;display:block;margin-top:10px}
.dark .ops span{color:var(--gray-s)}
.ops-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ops-roles li{list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 13px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}
.dark .ops-roles li{border-color:var(--ld);color:var(--gray-s)}

/* ══ long engagement case study ════════════════════════════
   A duration register for the Premier Choice page. A horizontal year
   timeline, service layers running across it, a screenshot wall and a three
   column alignment check. Kept here so a second retained engagement can
   reuse it.
*/

/* ── year timeline ───────────────────────────────────────── */
.tl{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--black);margin-top:44px}
.dark .tl{border-top-color:var(--acid)}
@media(max-width:1000px){.tl{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.tl{grid-template-columns:1fr}}
.tl>div{padding:26px 22px 28px 0;border-right:1px solid var(--ll);position:relative}
.dark .tl>div{border-right-color:var(--ld)}
.tl>div+div{padding-left:22px}
.tl>div:last-child{border-right:0}
@media(max-width:620px){.tl>div,.tl>div+div{padding-left:0;border-right:0;border-bottom:1px solid var(--ll)}.dark .tl>div{border-bottom-color:var(--ld)}}
/* the marker sits on the rule itself, so the row reads as one line */
.tl>div::before{content:"";position:absolute;top:-5px;left:0;width:8px;height:8px;border-radius:50%;background:var(--black)}
.dark .tl>div::before{background:var(--acid)}
.tl>div+div::before{left:22px}
@media(max-width:620px){.tl>div+div::before{left:0}}
.tl em{font-family:var(--mono);font-style:normal;font-weight:500;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-0.01em;color:var(--black);display:block;margin-bottom:14px}
.dark .tl em{color:var(--paper)}
.tl b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;line-height:1.55;color:var(--gray)}
.dark .tl b{color:var(--gray-s)}
.tl p{font-size:13px;line-height:1.7;color:var(--gray);margin-top:12px}
.dark .tl p{color:var(--gray-s)}

/* ── service layers running across the engagement ────────── */
.svc-l{margin-top:40px;border-top:1px solid var(--ll)}
.dark .svc-l{border-top-color:var(--ld)}
.svc-l>div{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:16px 0;border-bottom:1px solid var(--ll);align-items:center}
.dark .svc-l>div{border-bottom-color:var(--ld)}
@media(max-width:720px){.svc-l>div{grid-template-columns:1fr;gap:10px;align-items:start}}
.svc-l b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.dark .svc-l b{color:var(--paper)}
/* the bar is a span of the row, labelled in text so it never depends on
   colour alone to say when a service ran */
/* display:block matters here. a bare span is inline, so height and background
   are ignored and the bar disappears entirely. */
.svc-l .span{display:block;height:8px;background:var(--ll);position:relative;border-radius:0}
.dark .svc-l .span{background:var(--ld)}
.svc-l .span i{position:absolute;top:0;bottom:0;background:var(--black);display:block}
.dark .svc-l .span i{background:var(--acid)}
.svc-l .yrs{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gray);display:block;margin-top:9px}
.dark .svc-l .yrs{color:var(--gray-s)}
.svc-l-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gray);margin-top:12px;padding-left:258px}
.dark .svc-l-axis{color:var(--gray-s)}
@media(max-width:720px){.svc-l-axis{padding-left:0}}

/* ── screenshot wall, mixed sizes without a card grid ────── */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:26px;margin-top:44px}
@media(max-width:900px){.wall{grid-template-columns:1fr;gap:32px}}
.wall figure{margin:0;grid-column:span 3}
.wall figure.w4{grid-column:span 4}
.wall figure.w2{grid-column:span 2}
.wall figure.w6{grid-column:span 6}
@media(max-width:900px){.wall figure,.wall figure.w4,.wall figure.w2,.wall figure.w6{grid-column:span 1}}
.wall img{display:block;width:100%;height:auto}
.wall figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--gray);margin-top:12px;line-height:1.7}
.dark .wall figcaption{color:var(--gray-s)}

/* ── message alignment, three columns read across ────────── */
.align{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
.dark .align{background:var(--ld);border-color:var(--ld)}
@media(max-width:860px){.align{grid-template-columns:1fr}}
.align>div{background:var(--paper);padding:28px 26px}
.warm .align>div{background:#F4F2EA}
.dark .align>div{background:var(--black)}
.align em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px}
.dark .align em{color:var(--acid)}
.align h3{margin-bottom:12px}
.align>div>p{font-size:13.5px;line-height:1.75;color:var(--gray);margin-bottom:18px}
.dark .align>div>p{color:var(--gray-s)}
.align dl{border-top:1px solid var(--ll);margin:0}
.dark .align dl{border-top-color:var(--ld)}
.align dl div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--ll);font-size:13px;line-height:1.6}
.dark .align dl div{border-bottom-color:var(--ld)}
.align dl div:last-child{border-bottom:0}
.align dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);padding-top:3px}
.dark .align dt{color:var(--gray-s)}
.align dd{margin:0}
.dark .align dd{color:var(--paper)}
@media(max-width:480px){.align dl div{grid-template-columns:1fr;gap:2px}}

/* ── bare strip, for a capture that is already chrome ─────
   The navigation bar and the WordPress admin bar are both already browser
   furniture. Wrapping them in a .bf frame puts a browser bar inside a browser
   bar, so they get a hairline border and nothing else. */
.strip{border:1px solid var(--ll);display:block;overflow:hidden}
.dark .strip{border-color:var(--ld)}
.strip img{display:block;width:100%;height:auto}
.strip .shot{cursor:zoom-in}

/* Native size variant. .strip stretches its image to 100%, which is right for a
   wide capture but blows a small UI chip up several times over and it looks
   awful. .nat renders at the pixel size the crop actually has, centred, and
   only shrinks once the viewport is narrower than the image. */
.strip.nat{display:flex;justify-content:center;background:var(--warm,#F4F2EA)}
.dark .strip.nat{background:rgba(255,255,255,.03)}
.strip.nat img{width:auto;max-width:100%;height:auto}

/* ══ transport booking case study ══════════════════════════
   A route register for the executive transport page. Stops on a line, a twin
   operator split, an airport board field list and a four stage status strip.
   Kept here so a second booking build can reuse it.
*/

/* ── route line with stops ───────────────────────────────── */
.route{list-style:none;display:flex;flex-wrap:wrap;margin-top:44px}
/* the rule lives on each stop rather than the container, so a wrapped second
   row gets its own line instead of floating away from one. */
.route>li{flex:1 1 0;min-width:158px;padding:30px 20px 28px 0;position:relative;border-top:1px solid var(--ll)}
.dark .route>li{border-top-color:var(--ld)}
.route>li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--gray);box-sizing:border-box}
.warm .route>li::before{background:#F4F2EA}
.dark .route>li::before{background:var(--black);border-color:var(--gray-s)}
/* first and last stop are the two ends a reader looks for */
.route>li:first-child::before,.route>li:last-child::before{background:var(--black);border-color:var(--black)}
.dark .route>li:first-child::before,.dark .route>li:last-child::before{background:var(--acid);border-color:var(--acid)}
.route em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--gray);display:block;margin-bottom:9px}
.dark .route em{color:var(--gray-s)}
.route b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;display:block;line-height:1.45}
.dark .route b{color:var(--paper)}
.route span{font-size:12.5px;line-height:1.65;color:var(--gray);display:block;margin-top:10px}
.dark .route span{color:var(--gray-s)}
@media(max-width:620px){.route>li{flex:1 1 100%;padding-right:0}}

/* Ten stops. flex:1 1 0 with a 158px floor fits seven per row, so the last
   three stretch across the full width and the block reads as broken rather
   than as two rows. .r5 pins five equal columns, so ten stops land as two
   matching rows and every stop keeps the same measure. Six-stop routes stay
   on the default flex behaviour, where a single row is correct. */
@media(min-width:900px){
  .route.r5{display:grid;grid-template-columns:repeat(5,1fr)}
  .route.r5>li{min-width:0}
}
@media(min-width:620px) and (max-width:899px){
  .route.r5{display:grid;grid-template-columns:repeat(2,1fr)}
  .route.r5>li{min-width:0}
}

/* Six stops sit on one row down to about 1024px, then flex drops one stop to a
   line of its own at 900 and two at 820, both of which stretch. .r3 takes over
   below 1024 and gives two rows of three instead. */
@media(min-width:620px) and (max-width:1023px){
  .route.r3{display:grid;grid-template-columns:repeat(3,1fr)}
  .route.r3>li{min-width:0}
}

/* .bf stretches its capture to fill the column, which is right for a wide
   screenshot and wrong for one narrower than the column it lands in. .nat caps
   the frame at the capture's own width and centres it, so the image never
   renders above 1:1. Set --natw to the image's intrinsic width. Matched on
   .nat alone rather than .fig.nat, because gallery figures carry no .fig class
   and need the same cap. */
.nat > .bf{max-width:var(--natw,100%);margin-left:auto;margin-right:auto}

/* ── two operators, one foundation ───────────────────────── */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ll);border:1px solid var(--ll);margin-top:44px}
.dark .twin{background:var(--ld);border-color:var(--ld)}
@media(max-width:760px){.twin{grid-template-columns:1fr}}
.twin>div{background:var(--paper);padding:30px 28px}
.warm .twin>div{background:#F4F2EA}
.dark .twin>div{background:var(--black)}
.twin em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px}
.dark .twin em{color:var(--acid)}
.twin h3{margin-bottom:14px}
.twin>div>p{font-size:13.5px;line-height:1.75;color:var(--gray);margin-bottom:18px}
.dark .twin>div>p{color:var(--gray-s)}
.twin ul{list-style:none}
.twin li{font-size:13.5px;line-height:1.85;color:var(--gray);padding-left:16px;position:relative}
.dark .twin li{color:var(--gray-s)}
.twin li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--gray)}
.dark .twin li::before{background:var(--acid)}
/* the shared band sits under both columns and reads as one piece */
.twin-base{border:1px solid var(--ll);border-top:0;padding:28px}
.dark .twin-base{border-color:var(--ld)}
.twin-base b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:16px}
.dark .twin-base b{color:var(--acid)}
.twin-base ul{list-style:none;columns:3;column-gap:34px}
@media(max-width:860px){.twin-base ul{columns:2}}
@media(max-width:520px){.twin-base ul{columns:1}}
.twin-base li{font-size:13.5px;line-height:1.9;color:var(--gray);padding-left:16px;position:relative;break-inside:avoid}
.dark .twin-base li{color:var(--gray-s)}
.twin-base li::before{content:"+";position:absolute;left:0;font-family:var(--mono);font-size:11px;color:var(--gray)}
.dark .twin-base li::before{color:var(--acid)}

/* ── booking fields, read like a board ───────────────────── */
.fields{margin-top:44px;border-top:1px solid var(--ll)}
.dark .fields{border-top-color:var(--ld)}
.fields>div{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:22px 0;border-bottom:1px solid var(--ll);align-items:start}
.dark .fields>div{border-bottom-color:var(--ld)}
@media(max-width:720px){.fields>div{grid-template-columns:1fr;gap:12px}}
.fields b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.dark .fields b{color:var(--paper)}
.fields b i{font-style:normal;display:block;font-size:9.5px;letter-spacing:.12em;color:var(--gray);margin-top:7px}
.dark .fields b i{color:var(--gray-s)}
.fields ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.fields li{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 13px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}
.dark .fields li{border-color:var(--ld);color:var(--gray-s)}

/* ── booking status, four stages with a stated owner ─────── */
.status{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
@media(max-width:900px){.status{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.status{grid-template-columns:1fr}}
.status>div{border-top:2px solid var(--ll);padding-top:20px;display:flex;flex-direction:column}
.dark .status>div{border-top-color:var(--ld)}
/* the confirmed stage is the one the page keeps insisting on */
.status>div.done{border-top-color:var(--black)}
.dark .status>div.done{border-top-color:var(--acid)}
.status em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px}
.dark .status em{color:var(--gray-s)}
.status h3{margin-bottom:10px}
.status p{font-size:13.5px;line-height:1.75;color:var(--gray);margin-bottom:18px}
.dark .status p{color:var(--gray-s)}
/* ownership is written out, never carried by the rule colour alone */
.status .who{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);padding-top:14px;border-top:1px solid var(--ll)}
.dark .status .who{color:var(--gray-s);border-top-color:var(--ld)}

/* ── related services, descriptive rather than card-like ─── */
.rsv{border-top:1px solid var(--ll);margin-top:40px}
.rsv a{display:grid;grid-template-columns:200px 1fr 30px;gap:28px;padding:26px 0;border-bottom:1px solid var(--ll);text-decoration:none;color:inherit;align-items:baseline;transition:background .2s}
.rsv a:hover{background:rgba(10,10,10,.03)}
@media(max-width:760px){.rsv a{grid-template-columns:1fr 26px;gap:10px}.rsv a>p{grid-column:1}}
.rsv b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em}
.rsv p{color:var(--gray);font-size:14px;line-height:1.7}
.rsv span{justify-self:end;font-size:18px;transition:transform .2s}
.rsv a:hover span{transform:translateX(5px)}