/* ============================================================
   CONCRETE: CMS location pages (/locations/{city}/{service}).
   The page IS the parent service page (styles.css + detail.css + its own
   background and scripts); this file only styles the one section the CMS
   adds, the local block after the flagship case. Everything here is scoped
   to .sd-local so nothing on the service page itself can change.
   Type follows detail.css: Anton display heads, near-white body copy with
   the same soft shadow the service pages use, mono only for small labels.
   Never colour <html>; no animated filter: blur().
   ============================================================ */

.sd-local{ padding:clamp(56px,8vh,104px) 0 clamp(16px,2.4vh,32px); }

/* one dark-glass panel: the statement on the left, the detail rows on the right */
.lc-panel{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px);
  padding:clamp(28px,3.6vw,56px); align-items:start; }
.lc-panel.lc-single{ grid-template-columns:minmax(0,1fr); }
.lc-panel.lc-single .lc-rows{ max-width:860px; }

.lc-intro{ position:sticky; top:clamp(96px,13vh,132px); display:grid; gap:clamp(24px,3.6vh,38px); }
.lc-lede > *{ margin:0; }
.lc-lede > * + *{ margin-top:.75em; }
.lc-lede p{ font-size:var(--fs-lede); line-height:var(--lh-body); color:var(--ink); text-shadow:0 1px 18px rgba(8,6,12,.5); text-wrap:pretty; }
.lc-lede p.lc-big{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d3); line-height:var(--lh-display); letter-spacing:var(--ls-display);
  color:#fff; text-shadow:none; text-wrap:balance; }
.lc-lede strong, .lc-lede em{ font-style:normal; color:var(--ig); font-weight:inherit; }
.lc-lede a{ color:inherit; text-decoration:none; border-bottom:2px solid var(--ig); }

/* the rows: hairline-ruled, heading over copy, so long bodies read as a set of short answers */
.lc-rows{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.lc-row, .lc-copy, .lc-intro{ min-width:0; }
.lc-row{ padding:clamp(22px,3.2vh,34px) 0; border-top:1px solid rgba(255,255,255,.14); }
.lc-row:first-child{ padding-top:0; border-top:0; }
.lc-row:last-child{ padding-bottom:0; }
.lc-h{ position:relative; font-family:var(--disp); text-transform:uppercase; font-weight:var(--fw-regular); font-size:var(--fs-d5); line-height:var(--lh-tight);
  letter-spacing:var(--ls-display); color:#fff; margin:0 0 clamp(10px,1.5vh,14px); padding-left:22px; scroll-margin-top:110px; text-wrap:balance; }
.lc-h::before{ content:""; position:absolute; left:0; top:.32em; width:9px; height:9px; border-radius:var(--r-xs); background:var(--ig); }

.lc-copy{ color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); text-shadow:0 1px 14px rgba(8,6,12,.45); }
.lc-row .lc-copy{ padding-left:22px; }
.lc-copy > :first-child{ margin-top:0; }
.lc-copy > :last-child{ margin-bottom:0; }
.lc-copy p{ margin:0 0 .9em; }
.lc-copy strong{ color:#fff; font-weight:var(--fw-bold); }
.lc-copy a:not(.btn){ color:#fff; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ig) 70%, transparent); transition:color .2s, border-color .2s; }
.lc-copy a:not(.btn):hover{ color:var(--ig); border-color:var(--ig); }
.lc-copy a[rel~="nofollow"]{ border-bottom-style:dashed; }
.lc-copy h3{ font-family:var(--sans); font-weight:var(--fw-bold); font-size:clamp(17px,1.5vw,19px); line-height:var(--lh-snug); color:#fff; margin:1.3em 0 .4em; scroll-margin-top:110px; }
.lc-copy h4{ font-family:var(--mono); font-weight:var(--fw-regular); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:#fff; margin:1.3em 0 .5em; scroll-margin-top:110px; }
.lc-copy ul, .lc-copy ol{ margin:0 0 1em; padding:0; list-style:none; display:grid; gap:10px; }
.lc-copy ul > li{ position:relative; padding-left:22px; }
.lc-copy ul > li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:var(--r-xs); background:var(--ig); }
.lc-copy ol{ counter-reset:lc; }
.lc-copy ol > li{ position:relative; padding-left:34px; counter-increment:lc; }
.lc-copy ol > li::before{ content:counter(lc); position:absolute; left:0; top:.1em; font-family:var(--disp); font-size:1.05em; color:var(--ig); }
.lc-copy blockquote{ margin:1.2em 0; padding:.1em 0 .1em 18px; border-left:3px solid var(--ig); color:#fff; font-size:1.06em; }
.lc-copy blockquote p:last-child{ margin-bottom:0; }
.lc-copy hr{ border:0; height:1px; background:rgba(255,255,255,.14); margin:1.6em 0; }
.lc-copy img{ max-width:100%; height:auto; border-radius:var(--r-md); }
.lc-copy code{ font-size:.9em; background:rgba(255,255,255,.08); padding:.1em .35em; border-radius:var(--r-sm); }

/* :::tip callout: a tinted inset in the page colour */
.lc-copy .cms-tip{ margin:1.2em 0; padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,24px); border-radius:var(--r-lg);
  background:linear-gradient(158deg, color-mix(in srgb, var(--ig) 18%, rgba(12,9,15,.7)), rgba(12,9,15,.5));
  border:1px solid color-mix(in srgb, var(--ig) 40%, rgba(255,255,255,.1)); color:#fff; }
.lc-copy .cms-tip-title{ margin:0 0 .45em; font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d6); letter-spacing:var(--ls-display); color:#fff; }
.lc-copy .cms-tip > :last-child{ margin-bottom:0; }

/* tables: scroll inside their own box on small screens */
.lc-table{ margin:1.2em 0; overflow-x:auto; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); background:rgba(12,9,15,.45); }
.lc-table:focus-visible{ outline:2px solid var(--ig); outline-offset:2px; }
.lc-table table{ width:100%; min-width:460px; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-body); }
.lc-table th{ text-align:left; font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; letter-spacing:var(--ls-display); font-size:15px; color:#fff;
  padding:13px 16px; border-bottom:1px solid color-mix(in srgb, var(--ig) 50%, rgba(255,255,255,.12)); }
.lc-table td{ padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.lc-table tr:last-child td{ border-bottom:0; }

.lc-cta{ margin:1.4em 0 0; }

/* optional local proof (only when the entry names a real local client with real numbers) */
.lc-proof{ display:grid; gap:18px; padding-top:clamp(20px,3vh,28px); border-top:1px solid rgba(255,255,255,.14); }
.lc-proof-logo{ height:34px; width:auto; max-width:160px; object-fit:contain; object-position:left center; filter:brightness(0) invert(1); opacity:.9; }
.lc-stats{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:18px clamp(24px,3vw,40px); }
.lc-stats li{ display:grid; gap:4px; }
.lc-stats .n{ font-family:var(--disp); font-size:var(--fs-d3); line-height:var(--lh-display); color:var(--ig); }
.lc-stats .l{ font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink); max-width:20ch; }

@media (max-width:900px){
  .lc-panel{ grid-template-columns:minmax(0,1fr); }
  .lc-intro{ position:static; }
}
@media (max-width:520px){
  .lc-h{ padding-left:18px; }
  .lc-row .lc-copy{ padding-left:0; }
}

/* ---------- city/service pages: the SILO breadcrumb above the H1 (cms.css is not on these pages) ---------- */
.cms-location .crumbs, .cms-loc-hub .crumbs{ position:relative; z-index:3; }
.cms-location .crumbs ol{ list-style:none; margin:0 0 clamp(18px,2.6vh,26px); padding:0; display:flex; flex-wrap:wrap; gap:6px 0;
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; }
.cms-location .crumbs li{ display:flex; align-items:center; min-width:0; }
.cms-location .crumbs li:not(:last-child)::after{ content:"/"; margin:0 10px; color:rgba(255,255,255,.45); }
.cms-location .crumbs a{ color:var(--ink-2); text-decoration:none; transition:color .2s; text-shadow:0 1px 12px rgba(8,6,12,.6); }
.cms-location .crumbs a:hover{ color:#fff; }
.cms-location .crumbs [aria-current]{ color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34ch; }
/* "More in {City}" then the service page's own "More of what we do": the second one sits close under the first */
.sd-next.sd-next-also{ margin-top:clamp(22px,3vh,34px); }

/* ---------- /locations and /locations/{city}: big ruled rows, one per service (or city) ---------- */
.lh-hero .sd-lead{ max-width:52ch; }
.lh-services{ padding:clamp(12px,2vh,28px) 0 clamp(36px,6vh,72px); }
.lh-services .sd-head{ margin:0 0 clamp(18px,2.6vh,28px); }
.lh-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.16); }
.lh-list > li{ border-bottom:1px solid rgba(255,255,255,.16); }
.lh-row{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"no ttl ar" ". dsc ar";
  column-gap:clamp(16px,2.4vw,34px); row-gap:8px; align-items:baseline; padding:clamp(20px,3.2vh,34px) clamp(4px,1vw,12px);
  color:#fff; text-decoration:none; transition:background-color .25s; }
.lh-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); transform:scaleY(0); transform-origin:top; transition:transform .3s; }
.lh-row:hover, .lh-row:focus-visible{ background:rgba(255,255,255,.035); outline:none; }
.lh-row:hover::before, .lh-row:focus-visible::before{ transform:scaleY(1); }
.lh-no{ grid-area:no; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--c); }
.lh-ttl{ grid-area:ttl; font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d2); line-height:var(--lh-display); letter-spacing:var(--ls-display); text-wrap:balance; }
.lh-dsc{ grid-area:dsc; color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); max-width:60ch; text-shadow:0 1px 14px rgba(8,6,12,.45); }
.lh-ar{ grid-area:ar; align-self:center; font-size:clamp(20px,2.4vw,30px); color:var(--c); transition:transform .25s; }
.lh-row:hover .lh-ar{ transform:translate(3px,-3px); }
/* /locations: each city row carries its service pages underneath */
.lx-svcs{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0 clamp(4px,1vw,12px) clamp(20px,3vh,30px) calc(clamp(4px,1vw,12px) + clamp(16px,2.4vw,34px) + 2.2em); }
.lx-svcs a{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-2); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px; transition:color .2s, border-color .2s; }
.lx-svcs a:hover{ color:#fff; border-color:#fff; }
.cms-loc-hub .sd-local{ padding-top:clamp(20px,3vh,40px); }
@media (max-width:620px){
  .lh-row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"no ar" "ttl ar" "dsc ar"; row-gap:6px; }
  .lx-svcs{ padding-left:clamp(4px,1vw,12px); }
}
@media (prefers-reduced-motion: reduce){ .lh-row::before, .lh-ar{ transition:none; } }

/* ---------- author pages (/about/{name}): the About page sticker beside the name ---------- */
.au-head{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
.au-sticker{ width:clamp(180px,24vw,340px); height:auto; filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); transform:rotate(-2.5deg); }
.au-copy .cms-title{ max-width:none; }
.au-title{ margin:clamp(10px,1.6vh,16px) 0 0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-2); }
.au-copy .sd-lead{ margin-top:clamp(14px,2vh,20px); max-width:58ch; }
.au-links{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:clamp(18px,2.6vh,26px) 0 0; }
.au-links a{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:#fff; text-decoration:none; border-bottom:1px solid var(--ig, #E5342B); padding-bottom:3px; transition:color .2s; }
.au-links a:hover{ color:var(--ig, #E5342B); }
.au-wttl{ font-size:var(--fs-d4); line-height:var(--lh-tight); }
/* the kind label sits on its own line above the excerpt; the excerpt is clamped by lines, not cut mid-sentence */
.au-kind{ display:block; margin:0 0 6px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); line-height:var(--lh-snug); text-transform:uppercase; color:var(--ig, #E5342B); }
.au-ex{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
/* the list's last rule already closes the section: no second rule and no empty band before "Keep going" */
.lh-services:has(+ .sd-wrap .au-next){ padding-bottom:0; }
.sd-next.au-next{ border-top:0; margin-top:clamp(28px,4vh,48px); padding-top:0; }
@media (max-width:720px){ .au-head{ grid-template-columns:minmax(0,1fr); } .au-sticker{ width:min(62vw,260px); } }
.au-hero{ padding-bottom:clamp(44px,8vh,100px); }

/* ---------- city hubs (/locations/{city}), Chiril's 16 Oct spec ---------- */
.ch-hero .sd-lead{ max-width:58ch; }
/* city hubs: the city's inked landmark on its own card in the city colour (the /locations cover), right of
   the copy on desktop, above it on phones */
.ch-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,34%); grid-template-areas:"copy art"; align-items:center; column-gap:clamp(28px,4vw,64px); }
.ch-hero-copy{ grid-area:copy; min-width:0; }
.ch-hero-copy .cms-title{ max-width:none; font-size:var(--fs-d2); }
.ch-art{ grid-area:art; position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); display:grid; place-items:center; color:var(--bg);
  background:linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 82%, var(--c2)) 100%);
  box-shadow:0 40px 90px -30px color-mix(in srgb, var(--c) 70%, transparent), 0 20px 50px rgba(0,0,0,.45); transform:rotate(2.5deg); }
.ch-art svg{ width:76%; height:auto; opacity:.86; }
@media (max-width:900px){
  .ch-hero-grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"art" "copy"; row-gap:24px; }
  .ch-art{ width:min(40vw,170px); justify-self:start; border-radius:var(--r-lg); transform:rotate(-2deg); }
  .ch-hero-copy .cms-title{ font-size:clamp(40px,11vw,72px); }
}
.ch-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3.4vh,34px); }
/* phones: the pair stacks at one shared width, as on /about */
@media (max-width:640px){ .ch-ctas{ flex-direction:column; align-items:stretch; max-width:320px; } .ch-ctas .btn{ width:100%; } .ch-ctas .btn .bl{ flex:1; } }
.ch-services{ padding:clamp(28px,5vh,64px) 0 clamp(30px,5vh,60px); }
.ch-services .sd-head{ margin:0 0 clamp(18px,2.6vh,28px); }
/* the local-anchor cards: one per service page in this city, in the service's own colour */
.ch-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); }
.ch-cards.ch-n1{ grid-template-columns:minmax(0,1fr); }
.ch-cards.ch-n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ch-card{ position:relative; display:flex; flex-direction:column; gap:12px; min-height:clamp(260px,34vh,360px); padding:clamp(22px,2.4vw,32px);
  border-radius:var(--r-lg); color:var(--bg); text-decoration:none;
  background:linear-gradient(155deg, color-mix(in srgb, var(--c) 62%, #ffffff), var(--c));
  box-shadow:var(--sh-card); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ch-card:hover, .ch-card:focus-within{ transform:translateY(-4px); box-shadow:var(--sh-lift); }
.ch-k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; font-weight:var(--fw-bold); opacity:.7; }
.ch-ttl{ margin:0; font-weight:var(--fw-regular); font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d4); line-height:var(--lh-display); letter-spacing:var(--ls-display); text-wrap:balance; }
.ch-dsc{ margin:0; font-family:var(--sans); font-weight:var(--fw-semi); font-size:var(--fs-body); line-height:var(--lh-body); max-width:38ch; }
/* the one link on the card: Chiril's clean local anchor ("AUCKLAND B2B OUTBOUND ↗"), stretched over the card */
/* one size on every card: full card width, pinned to the bottom, label left and the arrow right; a long
   label wraps inside it and the arrow stays put */
.ch-go{ margin-top:auto; align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; box-sizing:border-box;
  font-family:var(--mono); font-size:var(--fs-label); line-height:var(--lh-snug); letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:var(--fw-bold);
  background:var(--bg); color:#fff; text-decoration:none; border-radius:var(--r-pill); padding:10px 20px; }
.ch-go-l{ min-width:0; }
.ch-go-ar{ flex:none; }
/* only the arrow moves: a transform on .ch-go would make it the box of its own ::after and shrink the card-wide click */
.ch-go-ar{ display:inline-block; transition:transform .25s var(--ease); }
.ch-go::after{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); }
.ch-go:focus-visible{ outline:none; }
.ch-go:focus-visible::after{ outline:3px solid #fff; outline-offset:3px; }
.ch-card:hover .ch-go-ar{ transform:translate(3px,-3px); }
.ch-area{ margin:calc(clamp(18px,2.6vh,28px) * -.5) 0 clamp(16px,2.4vh,24px); font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink-2); max-width:62ch; }
.ch-remote .ch-area{ margin:0; }
.ch-case-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
/* one service in the city: the title on the left, its line and the link on the right, so the card reads as one wide panel */
.ch-n1 .ch-card{ min-height:clamp(220px,28vh,300px); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-areas:"ttl dsc" "ttl go"; grid-template-rows:1fr auto; column-gap:clamp(28px,4vw,72px); row-gap:20px; align-items:end; }
.ch-n1 .ch-ttl{ grid-area:ttl; font-size:var(--fs-d2); }
.ch-n1 .ch-dsc{ grid-area:dsc; max-width:40ch; }
.ch-n1 .ch-go{ grid-area:go; margin-top:0; justify-self:start; align-self:end; width:max-content; max-width:100%; }
/* regional numbers */
.ch-stats{ padding:0 0 clamp(20px,3vh,36px); }
.ch-stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(12px,1.4vw,18px); }
.ch-stat-row .sd-hero-stat{ text-align:left; align-content:start; }
/* featured case: the service page's proof panel, trimmed */
.ch-case{ padding-top:clamp(20px,3vh,40px); }
/* the studio */
.ch-office{ padding:clamp(36px,6vh,80px) 0 0; }
.ch-office .sd-head{ margin:0 0 clamp(18px,2.6vh,28px); }
.ch-map{ border-radius:var(--r-lg); overflow:hidden; }
.ch-map iframe{ width:100%; height:clamp(280px,44vh,440px); border:0; display:block; filter:invert(0.92) hue-rotate(180deg) saturate(0.72) brightness(0.96) contrast(0.94); }
.ch-map .ct-map-cap{ display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; padding:15px clamp(18px,2.2vw,26px); border-top:1px solid rgba(255,255,255,.09); background:rgba(11,9,14,.82); }
.ch-cap-k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); }
.ch-cap-v{ margin-right:auto; color:var(--ink); font-size:var(--fs-small); }
.ch-map .ct-map-dir{ color:#fff; text-decoration:none; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; border-bottom:1px solid var(--ig, #E5342B); padding-bottom:2px; }
.ch-remote{ padding:clamp(26px,3.4vw,48px); border-radius:var(--r-lg); display:grid; gap:clamp(14px,2vh,20px); justify-items:start; }
.ch-remote .sd-head{ margin:0; }
.ch-remote p{ margin:0; max-width:62ch; color:var(--ink); font-size:var(--fs-lede); line-height:var(--lh-body); }
@media (max-width:900px){
  .ch-cards, .ch-cards.ch-n2{ grid-template-columns:minmax(0,1fr); }
  .ch-card{ min-height:0; }
  .ch-ttl{ font-size:var(--fs-d3); }
  .ch-n1 .ch-card{ display:flex; align-items:stretch; min-height:0; }
}

/* ============================================================
   City/service pages: Chiril's 11-section structure (16 Oct spec).
   Hero chips and byline, the component blocks the body can carry,
   the guarantee strip and the local footer band. All scoped to the
   generated markup (.lc-*), so the service pages never change.
   ============================================================ */

/* hero: the site vignette (styles.css body::after, z-index 60) sits over all content and greys anything
   in the lower part of the screen, which made the white "Launch outbound" chip read as disabled. On city
   pages it drops under <main> (z-index 1): the background keeps its vignette, the chips stay white.
   The hero also starts from the top (the logo rail moved down, so there is nothing to pin to the foot of
   the first screen) and the local panel shows under the byline. */
body.cms-location::after{ z-index:0; }
.cms-location .hero-screen{ min-height:0; }
.cms-location .sd-hero{ justify-content:flex-start; padding-bottom:0; }

/* three fast-track chips under the lede, then the byline */
.lc-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,3.4vh,32px); position:relative; z-index:3; }
.lc-chip{ display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px; border-radius:var(--r-pill);
  font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.34); background:rgba(10,8,14,.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.lc-chip:hover, .lc-chip:focus-visible{ background:#fff; color:var(--bg); border-color:#fff; transform:translateY(-2px); outline:none; }
.lc-chip.is-go{ background:#fff; color:var(--bg); border-color:#fff; }
.lc-chip.is-go:hover, .lc-chip.is-go:focus-visible{ background:var(--ig); color:#fff; border-color:var(--ig); }
/* Book a call: the homepage's founders pill (styles.css .hero-call): the cut-out stickers pop out of the
   pill on hover and say hi */
.lc-chip.is-call{ gap:12px; padding:0 18px 0 6px; overflow:visible; }
.lc-chip.is-call .hc-avs{ margin:-12px 0 -1px 2px; }
.lc-chip.is-call .hc-avs img{ height:46px; }
.lc-chip.is-call .hc-hi{ z-index:2; }
@media (hover:hover){
  .lc-chip.is-call:hover .hc-avs img:first-child, .lc-chip.is-call:focus-visible .hc-avs img:first-child{ transform:rotate(-8deg) translate(-14px,-2px) scale(1.55); }
  .lc-chip.is-call:hover .hc-avs img + img, .lc-chip.is-call:focus-visible .hc-avs img + img{ transform:rotate(7deg) translate(-4px,-2px) scale(1.55); transition-delay:.04s; }
  .lc-chip.is-call:hover .hc-hi, .lc-chip.is-call:focus-visible .hc-hi{ opacity:1; transform:translateX(0) rotate(-4deg) scale(1); transition-delay:.12s; }
}
.lc-chip.is-call:hover .hc-ar{ transform:translate(2px,-2px); }
.lc-chips-inline{ margin:1.3em 0; }
/* chips inside the body copy keep the chip look, not the copy's underlined links */
.lc-lede .lc-chip, .lc-copy .lc-chip{ border:1px solid rgba(255,255,255,.34); color:#fff; min-height:42px; }
.lc-lede .lc-chip:hover, .lc-copy .lc-chip:hover, .lc-lede .lc-chip:focus-visible, .lc-copy .lc-chip:focus-visible{ color:var(--bg); border-color:#fff; }
.lc-by{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:clamp(16px,2.4vh,22px) 0 0; position:relative; z-index:3;
  font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink); text-shadow:0 1px 12px rgba(8,6,12,.6); }
.lc-by a{ color:#fff; font-weight:var(--fw-semi); text-decoration:none; border-bottom:1px solid var(--ig); padding-bottom:1px; }
.lc-by a:hover{ color:var(--ig); }
.lc-by-sep{ color:rgba(255,255,255,.4); }
/* the logo rail now follows the local text instead of closing the first screen */
.cms-location .sd-local + .sd-trust{ padding-top:clamp(30px,4.4vh,52px); }

/* shared block frame */
.lc-block{ padding:clamp(56px,8vh,104px) 0 0; }
.lc-block .sd-head{ max-width:22ch; text-wrap:balance; }
.lc-block-lead{ max-width:62ch; margin:calc(clamp(20px,2.8vh,32px) * -.4) 0 clamp(22px,3vh,32px); color:var(--ink); font-size:var(--fs-lede); line-height:var(--lh-body); text-shadow:0 1px 14px rgba(8,6,12,.45); }
.lc-block-lead > :last-child{ margin-bottom:0; }

/* offerings: a 3-4 column card grid from the H3 groups */
.lc-offer-grid{ display:grid; gap:clamp(12px,1.4vw,18px); grid-template-columns:repeat(3,minmax(0,1fr)); }
.lc-offer-grid.lc-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.lc-offer-grid.lc-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.lc-card{ display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.2vw,32px); border-radius:var(--r-lg); min-width:0; }
.lc-card-no{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--ig); }
.lc-card h3{ margin:0; font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; font-size:var(--fs-d5); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:#fff; text-wrap:balance; }
.lc-card-copy{ color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); }
.lc-card-copy > *{ margin:0; } .lc-card-copy > * + *{ margin-top:.7em; }
.lc-card-copy strong{ color:#fff; }
.lc-card-copy a{ color:#fff; border-bottom:1px solid var(--ig); text-decoration:none; }
/* a card title Chiril links (the hub's Core Capabilities) reads as a link: the body links' underline plus an arrow */
.lc-card h3 a{ color:inherit; text-decoration:none; border-bottom:2px solid color-mix(in srgb, var(--ig) 70%, transparent); transition:color .2s, border-color .2s; }
.lc-card h3 a::after{ content:' \2197\FE0E'; color:var(--ig); font-size:.7em; vertical-align:.12em; }
.lc-card h3 a:hover{ color:var(--ig); border-color:var(--ig); }

/* in-house vs Concrete: a dim grey card next to a bright red one */
.lc-cmp{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); align-items:stretch; }
.lc-cmp-card{ display:flex; flex-direction:column; gap:14px; padding:clamp(24px,2.8vw,42px); border-radius:var(--r-lg); min-width:0; }
.lc-cmp-card h3{ margin:0; font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; font-size:var(--fs-d4); line-height:var(--lh-display); letter-spacing:var(--ls-display); text-wrap:balance; }
.lc-cmp-k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; }
.lc-cmp-copy{ font-size:var(--fs-body); line-height:var(--lh-body); }
.lc-cmp-copy p{ margin:0 0 .8em; } .lc-cmp-copy p:last-child{ margin-bottom:0; }
.lc-cmp-copy ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.lc-cmp-copy li{ position:relative; padding-left:28px; }
.lc-cmp-copy a{ color:inherit; }
.lc-cmp-in{ background:rgba(22,20,26,.72); border:1px solid rgba(255,255,255,.08); color:#a19cab; }
.lc-cmp-in h3{ color:#c9c4cf; }
.lc-cmp-in .lc-cmp-k{ color:#7f7a88; }
.lc-cmp-in li::before{ content:""; position:absolute; left:2px; top:.7em; width:12px; height:2px; background:#6f6a78; }
.lc-cmp-us{ background:linear-gradient(155deg,#FF4A3B 0%,#E5342B 60%,#C9261D 100%); color:#fff; box-shadow:0 30px 70px -20px rgba(229,52,43,.55); }
.lc-cmp-us .lc-cmp-k{ color:rgba(255,255,255,.78); }
.lc-cmp-us li::before{ content:""; position:absolute; left:2px; top:.38em; width:12px; height:7px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg); }
.lc-cmp-us strong{ color:#fff; }

/* the flagship case: its link plus "estimate a similar project" */
.lc-pb-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.lc-pb-ctas .pb-cta{ align-self:auto; }

/* engineering / stack */
.lc-stack-panel{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,64px); padding:clamp(26px,3.4vw,52px); border-radius:var(--r-lg); }
.lc-stack-side{ display:grid; align-content:start; gap:14px; }
.lc-stack-k{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--ig); }
.lc-stack-h{ margin:0; font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; font-size:var(--fs-d4); line-height:var(--lh-display); letter-spacing:var(--ls-display); color:#fff; text-wrap:balance; }
.lc-stack-chips{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.lc-stack-chips li{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:#fff; padding:7px 11px; border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb, var(--ig) 55%, rgba(255,255,255,.18)); background:color-mix(in srgb, var(--ig) 14%, transparent); }
.lc-stack-copy p:first-child{ font-size:var(--fs-lede); color:#fff; }
.lc-stack-panel:not(:has(.lc-stack-copy)){ grid-template-columns:minmax(0,1fr); padding-block:clamp(20px,2.4vw,32px); }

/* week-by-week timeline, ending in "Book a call" */
.lc-tl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) max-content; gap:clamp(14px,1.6vw,22px); position:relative; }
.lc-tl.lc-tl-n2{ grid-template-columns:repeat(2,minmax(0,1fr)) max-content; }
.lc-tl.lc-tl-n3{ grid-template-columns:repeat(3,minmax(0,1fr)) max-content; }
.lc-tl::before{ content:""; position:absolute; left:6px; right:6px; top:6px; height:2px; background:linear-gradient(90deg, var(--ig), color-mix(in srgb, var(--ig) 30%, transparent)); }
.lc-tl-step{ position:relative; display:grid; align-content:start; gap:10px; padding-top:34px; min-width:0; }
.lc-tl-dot{ position:absolute; left:0; top:0; width:14px; height:14px; border-radius:50%; background:var(--ig); box-shadow:0 0 0 5px rgba(10,8,14,.7); }
.lc-tl-k{ font-family:var(--disp); text-transform:uppercase; font-size:var(--fs-d4); line-height:var(--lh-tight); color:#fff; }
.lc-tl-step h3{ margin:0; font-family:var(--sans); font-weight:var(--fw-bold); font-size:clamp(17px,1.5vw,19px); line-height:var(--lh-snug); color:#fff; }
.lc-tl-copy{ color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); text-shadow:0 1px 14px rgba(8,6,12,.45); }
.lc-tl-copy > *{ margin:0; } .lc-tl-copy > * + *{ margin-top:.6em; }
.lc-tl-end .lc-tl-dot{ background:#fff; }
/* same line box as the Anton "WEEK n" labels, the small label sitting on its foot */
.lc-tl-end .lc-tl-k{ display:flex; align-items:flex-end; min-height:var(--fs-d4); color:var(--ink-2); font-family:var(--mono); font-size:var(--fs-label); line-height:var(--lh-tight); letter-spacing:var(--ls-label); }
.lc-tl-end .btn{ justify-self:start; max-width:100%; }

/* guarantee strip */
.lc-guarantee{ padding-bottom:clamp(36px,6vh,72px); }
.lc-g{ padding:clamp(22px,2.6vw,38px) clamp(22px,3vw,44px); border-radius:var(--r-lg); }
.lc-g-h{ margin:0 0 clamp(16px,2.2vh,22px); font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; font-size:var(--fs-d5); color:#fff; }
.lc-g-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:clamp(18px,3vw,44px); }
.lc-g-list li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; }
.lc-g-ic{ width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--ig); background:color-mix(in srgb, var(--ig) 14%, transparent); border:1px solid color-mix(in srgb, var(--ig) 40%, transparent); }
.lc-g-ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lc-g-list h3{ margin:2px 0 6px; font-family:var(--disp); font-weight:var(--fw-regular); text-transform:uppercase; font-size:var(--fs-d5); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:#fff; }
.lc-g-list p{ margin:0; color:var(--ink); font-size:var(--fs-body); line-height:var(--lh-body); }

/* local footer band, above the "More in {City}" row */
.lc-band{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0; border-radius:var(--r-lg); overflow:hidden; margin-bottom:clamp(26px,4vh,44px); }
.lc-band-copy{ display:grid; align-content:center; gap:8px; padding:clamp(22px,2.6vw,36px); }
.lc-band-k{ margin:0; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--dim); }
.lc-band-v{ margin:0; color:#fff; font-size:var(--fs-lede); line-height:var(--lh-body); max-width:44ch; }
.lc-band-area{ margin:4px 0 0; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--ink-2); max-width:48ch; }
.lc-band-map{ min-height:220px; }
.lc-band-map iframe{ width:100%; height:100%; min-height:220px; border:0; display:block; filter:invert(0.92) hue-rotate(180deg) saturate(0.72) brightness(0.96) contrast(0.94); }
.lc-band-remote{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
/* the band's actions: the city hub (and its other pages while there are few) as chips */
.lc-band-acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.lc-band-remote .lc-band-acts{ justify-content:flex-end; margin:0; padding:clamp(22px,2.6vw,36px); }
/* with no "More in" row after it, the band is the last thing before Other services */
.lc-band + .sd-next-also{ margin-top:0; }

@media (max-width:1000px){
  .lc-offer-grid.lc-cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lc-tl, .lc-tl.lc-tl-n2, .lc-tl.lc-tl-n3{ grid-template-columns:minmax(0,1fr); gap:0; }
  .lc-tl::before{ left:6px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background:linear-gradient(180deg, var(--ig), color-mix(in srgb, var(--ig) 30%, transparent)); }
  .lc-tl-step{ padding:0 0 clamp(22px,3vh,30px) 38px; }
  .lc-tl-step:last-child{ padding-bottom:0; }
}
@media (max-width:820px){
  .lc-offer-grid, .lc-offer-grid.lc-cols-2, .lc-offer-grid.lc-cols-4{ grid-template-columns:minmax(0,1fr); }
  .lc-cmp{ grid-template-columns:minmax(0,1fr); }
  .lc-stack-panel{ grid-template-columns:minmax(0,1fr); }
  .lc-g-list{ grid-template-columns:minmax(0,1fr); }
  .lc-band, .lc-band-remote{ grid-template-columns:minmax(0,1fr); }
  .lc-band-remote .lc-band-acts{ justify-content:flex-start; padding-top:0; }
  .lc-band-map{ order:-1; min-height:180px; }
  .lc-band-map iframe{ min-height:180px; }
}
@media (max-width:720px){
  /* the sticky bar under every phone screen already has "Book a call" */
  .lc-chips .lc-chip.is-call{ display:none; }
  /* the byline stacks: author, then the dates, no separators left dangling */
  .lc-by{ flex-direction:column; align-items:flex-start; gap:2px; }
  .lc-by-sep{ display:none; }
}
@media (max-width:520px){
  /* phones: the chips stack full width, one tap target each */
  .lc-chips{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  .lc-chip{ justify-content:center; padding:0 14px; min-height:48px; }
}
@media (prefers-reduced-motion: reduce){ .lc-chip{ transition:none; } }