@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(https://br-winter-boat-ajcnusyq.storage.c-3.us-east-2.aws.neon.tech/tibly-site-media/sites/bcdf0c0d-6551-4fb5-989c-8e3f60fe4020/cf1ba34766613f508b715f863694a649.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(https://br-winter-boat-ajcnusyq.storage.c-3.us-east-2.aws.neon.tech/tibly-site-media/sites/bcdf0c0d-6551-4fb5-989c-8e3f60fe4020/ca719d68f8f0d4a0b01fcdee08abf769.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(https://br-winter-boat-ajcnusyq.storage.c-3.us-east-2.aws.neon.tech/tibly-site-media/sites/bcdf0c0d-6551-4fb5-989c-8e3f60fe4020/903694d2ca8b6fc366bb8fc016d40454.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(https://br-winter-boat-ajcnusyq.storage.c-3.us-east-2.aws.neon.tech/tibly-site-media/sites/bcdf0c0d-6551-4fb5-989c-8e3f60fe4020/419fa507a2991054934ef715906cc852.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(https://br-winter-boat-ajcnusyq.storage.c-3.us-east-2.aws.neon.tech/tibly-site-media/sites/bcdf0c0d-6551-4fb5-989c-8e3f60fe4020/1c052e377700345a2fa114f77b917212.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://br-winter-boat-ajcnusyq.storage.c-3.us-east-2.aws.neon.tech/tibly-site-media/sites/bcdf0c0d-6551-4fb5-989c-8e3f60fe4020/ea2c1a8b2bc72ae4c89db8fbeeebd26d.woff2) format('woff2')}

/* ============================================================
   louislynn Consulting — Direction B "Heavyweight"
   Near-black canvas · Archivo Black at scale · B&W photography
   Sage (#8db5b2) is the single accent. Teal anchors depth.
   Edit the tokens to reskin. Structure stays put.
   ============================================================ */
:root{
  --ink:#0b0b0a;          /* page canvas */
  --ink-2:#141413;        /* raised surface */
  --ink-3:#1d1d1b;        /* hover surface */
  --paper:#f2f0eb;        /* primary text on dark / bg when inverted */
  --paper-2:#e7e4dc;
  --teal:#114442;
  --teal-deep:#0c3331;
  --sage:#8db5b2;
  --sage-dim:#5f8480;
  --rule:rgba(242,240,235,.15);
  --rule-ink:rgba(11,11,10,.15);
  --display:'Archivo',Impact,sans-serif;
  --ui:'Inter Tight',-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --pad:clamp(4rem,9.5vw,10.5rem);
  --gut:clamp(1.25rem,3.4vw,2.9rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--ui);
  font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--sage);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--sage);color:var(--ink)}

.wrap{max-width:1500px;margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gut)}
section{position:relative;padding:var(--pad) 0}

/* ── type ───────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.86;letter-spacing:-.042em;color:var(--paper)}
h1{font-size:clamp(2.5rem,6.1vw,6.1rem)}
h2{font-size:clamp(1.8rem,3.9vw,3.15rem);margin-bottom:1.1rem;line-height:.92}
h3{font-size:clamp(1.1rem,1.65vw,1.5rem);letter-spacing:-.03em;line-height:.98}
h4{font-size:1rem}
.accent{color:var(--sage);font-style:normal}
/* outline is reserved for ONE word, the emphasis beat of the headline */
.outline{color:transparent;-webkit-text-stroke:1.3px var(--sage);
  paint-order:stroke fill}
@media(max-width:700px){.outline{-webkit-text-stroke-width:1px}}
p{max-width:66ch}
.lede{font-size:clamp(1.12rem,1.55vw,1.36rem);line-height:1.56;
  color:rgba(242,240,235,.7);max-width:48ch;font-weight:400}
strong{font-weight:600;color:var(--paper)}

.eyebrow{display:block;font-family:var(--mono);font-size:0.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sage);margin-bottom:1.5rem}
.hero-kicker{font-family:var(--mono);font-size:0.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage);margin-bottom:1.6rem}

/* ── header ─────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:var(--sage);transform-origin:0 50%;transform:scaleX(0)}
header.site{position:sticky;top:0;z-index:100;background:rgba(11,11,10,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:block;line-height:0}
.logo img{height:27px;width:auto;transition:opacity .2s ease}
.logo:hover{text-decoration:none}
.logo:hover img{opacity:.72}
@media(max-width:600px){.logo img{height:23px}}
.nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none}
.nav-links>li{position:relative}
.nav-links a{font-size:0.84rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper)}
.nav-links a:hover{color:var(--sage);text-decoration:none}
.dropdown>a::after{content:"+";margin-left:.4rem;color:var(--sage);font-weight:400}
.dropdown-menu{position:absolute;top:calc(100% + 14px);left:-1.1rem;min-width:290px;
  background:var(--ink-2);border:1px solid var(--rule);padding:.5rem;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:.7rem .85rem;letter-spacing:0;text-transform:none;font-size:.9rem}
.dropdown-menu a:hover{background:var(--ink-3)}
.dropdown-menu a strong{display:block;font-family:var(--display);font-weight:900;
  font-size:0.88rem;text-transform:uppercase;letter-spacing:-.02em}
.dropdown-menu a:hover strong{color:var(--sage)}
.dropdown-menu a small{display:block;color:rgba(242,240,235,.72);font-size:0.8rem;margin-top:.15rem}

.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-weight:900;font-size:0.84rem;letter-spacing:.06em;text-transform:uppercase;
  padding:1.06rem 1.9rem;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;transition:.2s ease;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary,.btn-sage{background:var(--sage);color:var(--ink)}
.btn-primary:hover,.btn-sage:hover{background:var(--paper);color:var(--ink)}
.btn-ghost{border-color:rgba(242,240,235,.35);color:var(--paper)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage);background:transparent}
.nav .btn{padding:.72rem 1.4rem;font-size:0.8rem}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(5px)}

.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--paper);margin:6px 0;transition:.2s}
@media(max-width:1000px){
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--ink-2);
    flex-direction:column;align-items:flex-start;gap:1.15rem;padding:1.6rem var(--gut) 2rem;
    border-bottom:1px solid var(--rule)}
  .nav-links.open{display:flex}
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;
    border:0;padding:.5rem 0 0 .9rem;display:none;background:transparent}
  .dropdown.open .dropdown-menu{display:block}
}

/* ── hero ───────────────────────────────────────────── */
.hero{min-height:82vh;display:flex;align-items:flex-end;padding:calc(var(--pad) + 2.5rem) 0 3.4rem;
  overflow:hidden;background:var(--ink)}
.hero-sub{min-height:62vh;padding-top:calc(var(--pad) + 1rem)}
.hero-media{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:var(--hero-pos,center);filter:grayscale(1) contrast(1.16) brightness(.95);
  animation:heroZoom 22s ease-out both}
.hero-media.texture{background-size:760px auto;background-repeat:repeat;
  filter:invert(1) grayscale(1);opacity:.09}
.hero-shade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(190deg,rgba(11,11,10,.28) 0%,rgba(11,11,10,.82) 58%,var(--ink) 100%),
  linear-gradient(95deg,rgba(11,11,10,.72) 0%,rgba(11,11,10,.06) 66%)}
.hero-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero>.wrap{position:relative;z-index:3;width:100%}
.hero-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:clamp(2rem,4vw,4.5rem);align-items:end}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}

/* data panel (hero right) */
.hero-panel{background:rgba(11,11,10,.55);border:1px solid var(--rule);
  backdrop-filter:blur(8px);padding:0}
.hero-panel h2{font-family:var(--mono);font-weight:400;font-size:0.74rem;letter-spacing:.2em;
  color:var(--sage);text-transform:uppercase;padding:.95rem 1.4rem;
  border-bottom:1px solid var(--rule);margin:0}
.hero-panel ul{list-style:none}
.hero-panel li{padding:.95rem 1.4rem;border-bottom:1px solid var(--rule);
  font-size:0.9rem;color:rgba(242,240,235,.66);line-height:1.45}
.hero-panel li:last-child{border-bottom:0}
.hero-panel li strong{display:block;font-family:var(--display);font-weight:900;
  font-size:1.32rem;letter-spacing:-.035em;color:var(--sage);margin-bottom:.15rem}

/* ── stat band ──────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stat{padding:2.4rem 1.9rem 2.2rem;border-right:1px solid var(--rule)}
@media(min-width:1100px){.stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.stat{border-right:0;border-bottom:1px solid var(--rule)}
  .stat:last-child{border-bottom:0}}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(1.9rem,3.6vw,3.05rem);letter-spacing:-.05em;line-height:1;color:var(--sage)}
.stat span{display:block;margin-top:.65rem;font-size:0.84rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(242,240,235,.72);line-height:1.45}
.hero .stats{border-bottom:0;margin-top:2.6rem}

/* ── section heads ──────────────────────────────────── */
.section-head{max-width:900px;margin-bottom:4.6rem}
.section-head h2:first-child{margin-top:0}
.section-head p{color:rgba(242,240,235,.66);font-size:1.07rem;line-height:1.6}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
@media(min-width:901px){.split-wide{grid-template-columns:2fr 1fr}}

/* ── inverted (paper) sections for long reading ─────── */
.section-cloud,.section-paper{background:var(--paper);color:#171715}
.section-cloud h1,.section-cloud h2,.section-cloud h3,
.section-paper h1,.section-paper h2,.section-paper h3{color:#0b0b0a}
.section-cloud .accent,.section-paper .accent{color:var(--teal)}
.section-cloud .outline,.section-paper .outline{color:transparent;-webkit-text-stroke-color:var(--teal)}
.section-cloud p,.section-paper p{color:#403f3a}
.section-cloud .eyebrow,.section-paper .eyebrow{color:var(--teal)}
.section-cloud a,.section-paper a{color:var(--teal);font-weight:600}
.section-cloud .lede,.section-paper .lede{color:#403f3a}
.section-cloud strong,.section-paper strong{color:#0b0b0a}
.section-cloud .section-head p,.section-paper .section-head p{color:#403f3a}

.section-teal{background:var(--teal-deep)}
.section-dark{background:var(--ink-2)}

/* ── bordered cell grid (replaces floating cards) ───── */
.grid-3,.grid-2{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:2.7rem 2.2rem 2.5rem;display:flex;flex-direction:column;gap:1rem;
  min-height:260px;transition:background .22s ease}
.card:hover{background-color:var(--ink-3)}
.card h3{transition:color .2s}
.card:hover h3,.card:hover h3 a{color:var(--sage)}
.card p{font-size:1rem;line-height:1.58;color:rgba(242,240,235,.66);flex:1;max-width:none}
.card h3 a{color:inherit}
.card h3 a:hover{text-decoration:none}
.card .tag{align-self:flex-start;font-family:var(--mono);font-size:0.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);border:1px solid var(--sage-dim);padding:.28rem .6rem}
.card .meta{font-size:0.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(242,240,235,.72)}
.card .go{font-family:var(--display);font-weight:900;font-size:0.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sage)}
.card .go:hover{text-decoration:none}
.card .go::after{content:" →";transition:margin .18s}
.card:hover .go::after{margin-left:5px}
/* cells inside paper sections */
.section-cloud .grid-3,.section-cloud .grid-2,
.section-paper .grid-3,.section-paper .grid-2{border-color:var(--rule-ink)}
.section-cloud .card,.section-paper .card{border-color:var(--rule-ink)}
.section-cloud .card:hover,.section-paper .card:hover{background-color:var(--paper-2)}
.section-cloud .card p,.section-paper .card p{color:#4d4c46}
.section-cloud .card:hover h3,.section-paper .card:hover h3{color:var(--teal)}
.section-cloud .card .go,.section-paper .card .go{color:var(--teal)}
.section-cloud .card .tag,.section-paper .card .tag{color:var(--teal);border-color:rgba(17,68,66,.4)}
.section-cloud .card .meta,.section-paper .card .meta{color:#6a6960}

/* ── work cards with faded site-hero screenshot ─────── */
.card.shot{position:relative;isolation:isolate;overflow:hidden}
.card.shot::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--shot-before, var(--shot));background-size:auto 170%;background-position:top center;
  /* blurred: at full sharpness the client sites' own nav text read straight
     through the card copy ("FOR LEADERS SERVICES SOFTWARE ABOUT") */
  filter:grayscale(1) blur(2.5px) contrast(1.06) brightness(.62);
  opacity:.20;transform:scale(1.04);transition:opacity .45s ease,transform .7s ease,filter .5s ease}
.card.shot::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(175deg,rgba(11,11,10,.42) 0%,rgba(11,11,10,.8) 60%,rgba(11,11,10,.94) 100%);transition:opacity .45s ease}
.card.shot:hover::after{opacity:1}
.card.shot:hover{background-color:transparent}
.card.shot:hover::before{opacity:.42;transform:scale(1.07);
  filter:grayscale(1) blur(1.2px) contrast(1.12) brightness(.8)}

/* ── numbered index rows (process / steps) ──────────── */
.steps{border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(1.6rem,4vw,4rem);align-items:baseline;
  padding:2.7rem 0;border-bottom:1px solid var(--rule);transition:.25s ease}
.step:hover{background:linear-gradient(90deg,rgba(141,181,178,.09),transparent);padding-left:1.4rem}
.step h3{margin-bottom:0}
.step:hover h3{color:var(--sage)}
.step p{font-size:1rem;line-height:1.58;color:rgba(242,240,235,.66)}
.step .steplink{font-family:var(--display);font-weight:900;font-size:0.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sage);display:inline-block;margin-top:.6rem}
@media(max-width:820px){.step{grid-template-columns:1fr;gap:.7rem}}
.section-cloud .steps,.section-paper .steps{border-color:var(--rule-ink)}
.section-cloud .step,.section-paper .step{border-color:var(--rule-ink)}
.section-cloud .step p,.section-paper .step p{color:#4d4c46}
.section-cloud .step:hover h3,.section-paper .step:hover h3{color:var(--teal)}
.section-cloud .step:hover,.section-paper .step:hover{background:linear-gradient(90deg,rgba(17,68,66,.07),transparent)}

/* ── checklists ─────────────────────────────────────── */
.checks{list-style:none;border-top:1px solid var(--rule)}
.checks li{position:relative;padding:1.35rem 0 1.35rem 1.7rem;border-bottom:1px solid var(--rule);
  color:rgba(242,240,235,.74);font-size:1.05rem;line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:1.35rem;transform:translateY(.62em);
  width:9px;height:1.5px;background:var(--sage)}
.checks li strong{color:var(--paper)}
.section-cloud .checks,.section-paper .checks{border-color:var(--rule-ink)}
.section-cloud .checks li,.section-paper .checks li{border-color:var(--rule-ink);color:#403f3a}
.section-cloud .checks li::before,.section-paper .checks li::before{background:var(--teal)}
.section-cloud .checks li strong,.section-paper .checks li strong{color:#0b0b0a}

/* ── compare ────────────────────────────────────────── */
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule)}
@media(max-width:800px){.compare{grid-template-columns:1fr}}
.compare .col{padding:3rem 2.5rem}
.compare .col.bad{border-right:1px solid var(--rule);opacity:.72}
.compare .col.good{background:var(--sage);color:var(--ink)}
.compare .col.good h3{color:var(--ink)}
.compare .col h3{margin-bottom:1.4rem;font-size:1.35rem}
.compare .col ul{list-style:none;display:grid;gap:.95rem;font-size:.95rem}
.compare .col li{position:relative;padding-left:1.6rem}
.compare .col.bad li{color:rgba(242,240,235,.66)}
.compare .col.bad li::before{content:"×";position:absolute;left:0;color:#c07a68;font-weight:700}
.compare .col.good li{color:rgba(11,11,10,.85)}
.compare .col.good li::before{content:"→";position:absolute;left:0;color:var(--teal);font-weight:700}
.section-cloud .compare,.section-paper .compare{border-color:var(--rule-ink)}
.section-cloud .compare .col.bad,.section-paper .compare .col.bad{border-color:var(--rule-ink)}
.section-cloud .compare .col.bad li,.section-paper .compare .col.bad li{color:#5b5a52}
.section-cloud .compare .col.bad h3,.section-paper .compare .col.bad h3{color:#0b0b0a}

/* ── quotes ─────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);
  border-left:1px solid var(--rule)}
@media(max-width:800px){.quotes{grid-template-columns:1fr}}
/* A single testimonial on a case study page. Two columns with one child
   leaves an empty ruled cell, so the modifier collapses to one column. */
.quotes.single{grid-template-columns:1fr}
.quote{padding:3rem 2.5rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.quote p{font-family:var(--display);font-weight:400;font-size:clamp(1.08rem,1.65vw,1.4rem);
  line-height:1.32;letter-spacing:-.02em;color:var(--paper);margin-bottom:1.3rem;max-width:none}
.quote cite{font-family:var(--mono);font-style:normal;font-size:0.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage)}

/* ── FAQ ────────────────────────────────────────────── */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1.4rem;padding:1.9rem 0;font-family:var(--display);font-weight:900;
  font-size:clamp(.95rem,1.35vw,1.16rem);text-transform:uppercase;letter-spacing:-.025em;
  color:var(--paper);transition:color .18s}
.faq summary:hover{color:var(--sage)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--ui);font-size:1.5rem;font-weight:400;
  color:var(--sage);flex-shrink:0;line-height:1}
.faq details[open] summary{color:var(--sage)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 2.1rem;color:rgba(242,240,235,.66);max-width:68ch;font-size:1.03rem;
  line-height:1.62}
.section-cloud .faq,.section-paper .faq{border-color:var(--rule-ink)}
.section-cloud .faq details,.section-paper .faq details{border-color:var(--rule-ink)}
.section-cloud .faq summary,.section-paper .faq summary{color:#0b0b0a}
.section-cloud .faq summary:hover,.section-paper .faq summary:hover{color:var(--teal)}
.section-cloud .faq details[open] summary,.section-paper .faq details[open] summary{color:var(--teal)}
.section-cloud .faq summary::after,.section-paper .faq summary::after{color:var(--teal)}
.section-cloud .faq .a,.section-paper .faq .a{color:#4d4c46}

/* ── CTA band ───────────────────────────────────────── */
.cta-band{background:var(--sage);color:var(--ink);padding:var(--pad) 0}
.cta-band .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(max-width:900px){.cta-band .wrap{grid-template-columns:1fr}}
.cta-band h2{color:var(--ink)}
.cta-band h2 .accent{color:var(--teal-deep)}
.cta-band .outline{color:transparent;-webkit-text-stroke-color:var(--teal-deep);
  -webkit-text-stroke-width:2px}
.cta-band p{color:rgba(11,11,10,.72);font-size:1.05rem}
.cta-band a{color:var(--teal);font-weight:600}
.cta-band .btn-sage,.cta-band .btn-primary{background:var(--ink);color:var(--paper)}
.cta-band .btn-sage:hover,.cta-band .btn-primary:hover{background:var(--teal-deep);color:var(--paper)}
/* Ghost buttons sit on sage inside the CTA band, so the dark-canvas treatment
   inverts: near-white on sage was low contrast and sage-on-sage vanished. */
.cta-band .btn-ghost{border-color:rgba(11,11,10,.42);color:var(--ink)}
.cta-band .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.cta-band .hero-cta,.cta-band div>.btn+.btn{margin-top:.7rem}
.cta-band div:last-child{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* ── forms ──────────────────────────────────────────── */
.form{display:grid;gap:1rem;background:var(--ink);padding:2rem;border:1px solid rgba(11,11,10,.25)}
.form label{font-family:var(--mono);font-size:0.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);display:block;margin-bottom:.45rem}
.form input,.form textarea{width:100%;padding:.85rem .9rem;border:1px solid var(--rule);
  background:var(--ink-2);color:var(--paper);font-family:var(--ui);font-size:.95rem}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--sage)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.form .btn{justify-content:center}

/* ── imagery ────────────────────────────────────────── */
.img-duo{position:relative;overflow:hidden;border:1px solid var(--rule)}
.img-duo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(1.06);transition:transform .7s ease,filter .5s ease}
.img-duo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,rgba(141,181,178,.16),rgba(17,68,66,.22))}
.img-duo:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.05) brightness(1.02)}
.img-frame{border:1px solid var(--rule);padding:1.1rem;background:var(--ink-2)}
.img-frame img{width:100%;height:auto;filter:grayscale(1) contrast(1.05) brightness(1.05)}
/* height:auto is load-bearing. With width set in CSS and width/height
   attributes on the tag, the browser uses the literal height attribute
   and stretches the image. The map grid rendered as ovals until this
   was here. The attributes stay, because they are what reserves the
   right space before the image loads. */
.img-frame figcaption{font-family:var(--mono);font-size:0.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,240,235,.72);padding-top:.9rem}
.section-cloud .img-frame,.section-paper .img-frame{background:var(--paper-2);border-color:var(--rule-ink)}
.section-cloud .img-frame figcaption,.section-paper .img-frame figcaption{color:#6a6960}

/* ── prose (case study / long form) ─────────────────── */
.prose p{margin-bottom:1.35rem;font-size:1.12rem;line-height:1.7}
.prose h2{margin-top:3.2rem;margin-bottom:1rem}
.prose h3{margin-top:2rem;margin-bottom:.6rem}
.prose ul{list-style:disc;margin:0 0 1.4rem 1.25rem;display:grid;gap:.55rem}
.prose ul.checks{list-style:none;margin-left:0;gap:0}
.prose ul li{font-size:1.08rem;line-height:1.62}
.prose .meta{display:block;margin-bottom:2.4rem}
.prose .eyebrow{margin-bottom:1rem}

/* ── blog list ──────────────────────────────────────── */
.post-list{border-top:1px solid var(--rule)}
.post-item{position:relative;display:grid;grid-template-columns:130px 1fr 150px;gap:1.5rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid var(--rule);transition:.22s}
.post-item h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.post-item:hover{padding-left:1rem;background:linear-gradient(90deg,rgba(141,181,178,.08),transparent)}
@media(max-width:760px){.post-item{grid-template-columns:1fr;gap:.45rem;padding:1.35rem 0}
  .post-item h3{font-size:1.14rem;line-height:1.25}
  /* the hover indent rewraps the title on narrow screens and jitters the
     rows below it, so tint only */
  .post-item:hover{padding-left:0}}
.post-item time{font-family:var(--mono);font-size:0.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(242,240,235,.72)}
.post-item h3{font-size:1.08rem;line-height:1.15}
.post-item h3 a{color:var(--paper)}
.post-item h3 a:hover{color:var(--sage);text-decoration:none}
.post-item .cat{font-family:var(--mono);font-size:0.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);text-align:right}
@media(max-width:760px){.post-item .cat{text-align:left}}

/* ── related block ──────────────────────────────────── */
.related{border:1px solid var(--rule);padding:2rem}
.related h3{margin-bottom:1.2rem;font-size:1.05rem}
.related ul{list-style:none;display:grid}
.related li{border-top:1px solid var(--rule)}
.related li:first-child{border-top:0}
.related a{display:block;padding:.85rem 0;font-family:var(--display);font-weight:900;
  font-size:0.88rem;text-transform:uppercase;letter-spacing:-.015em;color:var(--paper)}
.related a:hover{color:var(--sage);text-decoration:none}
.section-cloud .related,.section-paper .related{border-color:var(--rule-ink)}
.section-cloud .related li,.section-paper .related li{border-color:var(--rule-ink)}
.section-cloud .related a,.section-paper .related a{color:#0b0b0a}
.section-cloud .related a:hover,.section-paper .related a:hover{color:var(--teal)}

/* ── pills ──────────────────────────────────────────── */
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.pill{font-family:var(--mono);font-size:0.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);border:1px solid var(--sage-dim);padding:.45rem .9rem}

/* ── anthem band: the calling card above every footer ── */
.anthem{overflow:hidden;position:relative;overflow:hidden;padding:clamp(6rem,14vw,13rem) 0 clamp(9rem,16vw,15rem);
  background:var(--ink);isolation:isolate}
.anthem-media{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center 58%;
  filter:grayscale(1) contrast(1.2) brightness(.92);animation:anthemDrift 34s ease-in-out infinite alternate}
.anthem-shade{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,var(--ink) 0%,rgba(11,11,10,.62) 32%,rgba(11,11,10,.72) 62%,var(--ink) 100%),
  linear-gradient(90deg,rgba(11,11,10,.78) 0%,rgba(11,11,10,.1) 70%)}
.anthem-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E")}
@keyframes anthemDrift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}
.anthem-kicker{font-family:var(--mono);font-size:0.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sage);margin-bottom:2.2rem}
.anthem h2{font-size:clamp(2.6rem,8.4vw,8.2rem);line-height:.84;letter-spacing:-.05em;
  max-width:none;margin-bottom:2.8rem}
.anthem-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.anthem-mark{position:absolute;left:0;right:0;bottom:clamp(-1.4rem,-2.2vw,-2.8rem);z-index:-1;
  text-align:center;font-family:var(--display);font-weight:900;
  font-size:clamp(4.5rem,19vw,19rem);line-height:.72;letter-spacing:-.06em;text-transform:lowercase;
  color:rgba(242,240,235,.025);-webkit-text-stroke:1.7px rgba(242,240,235,.26);
  user-select:none;pointer-events:none}

/* ── footer ─────────────────────────────────────────── */
footer.site{background:var(--ink);border-top:1px solid var(--rule);padding:5.5rem 0 2.2rem;
  color:rgba(242,240,235,.66);font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3.5rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
footer .logo{font-size:2rem;display:inline-block;margin-bottom:1rem}
footer h4,.foot-h{font-family:var(--mono);font-weight:400;color:var(--sage);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:.2em;margin-bottom:1.2rem;line-height:1}
footer ul{list-style:none;display:grid;gap:.6rem}
footer a{color:rgba(242,240,235,.66);font-size:0.9rem}
footer a:hover{color:var(--sage)}
/* Chrome-extension callout, carried over from the live footer */
.ext-badge{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.6rem;
  padding:.7rem 1.1rem .7rem .85rem;border:1px solid rgba(141,181,178,.34);border-radius:999px;
  background:rgba(141,181,178,.07);transition:.22s ease}
.ext-badge:hover{background:rgba(141,181,178,.16);border-color:var(--sage);transform:translateY(-1px)}
.ext-badge-mark{color:var(--sage);font-size:0.8rem;line-height:1}
.ext-badge-text{display:flex;flex-direction:column;gap:.15rem}
.ext-badge-text strong{color:var(--paper);font-size:0.88rem;letter-spacing:.01em}
.ext-badge-text small{color:rgba(242,240,235,.72);font-size:0.8rem}
.ext-badge .arrow{color:var(--sage)}
.ext-badge:hover .arrow{transform:translateX(3px)}
.foot-social{display:flex!important;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;list-style:none}
.foot-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--rule);color:rgba(242,240,235,.72);transition:.2s ease}
.foot-social a:hover{border-color:var(--sage);color:var(--ink);background:var(--sage);
  transform:translateY(-2px);text-decoration:none}
.foot-social svg{width:17px;height:17px;fill:currentColor}

/* footer strip listing the city spokes, so every page links to every market */
.foot-areas{border-top:1px solid var(--rule);padding:1.9rem 0 1.7rem;margin-bottom:.4rem}
.foot-areas .foot-h{margin-bottom:1rem}
.foot-areas ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.foot-areas li{font-size:0.9rem}
.foot-areas a{color:rgba(242,240,235,.66)}
.foot-areas a:hover{color:var(--sage)}

.foot-bottom{border-top:1px solid var(--rule);padding-top:1.6rem;display:flex;
  flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--mono);font-size:0.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,240,235,.72);
  /* The back-to-top button is fixed at the bottom right and floats over this
     row. At the old 9.9px the last link happened to stop short of it; at a
     readable size it does not. Reserve the button's width plus its offset so
     the collision cannot come back the next time this type grows. */
  padding-bottom:1.2rem;padding-right:calc(52px + clamp(1rem,2.4vw,2.2rem) + 1rem)}
@media(max-width:760px){
  .foot-bottom{padding-right:0;padding-bottom:calc(52px + 1.5rem)}}

/* ── keyword demand table on the city pages ─────────── */
/* Reuses .post-item's ruled-row rhythm, widened for the keyword column. */
.kw-table .post-item{grid-template-columns:1fr 1fr;cursor:default}
.kw-table .post-item:hover{padding-left:0;background:none}
.kw-table .kw{font-family:var(--mono);font-size:0.84rem;letter-spacing:.01em;
  color:rgba(242,240,235,.9);word-break:break-word}
.kw-table .post-item h3{font-family:var(--ui);font-weight:400;font-size:.97rem;
  letter-spacing:0;text-transform:none;color:rgba(242,240,235,.66);line-height:1.45}
.kw-table .post-item h3 strong{font-family:var(--mono);font-weight:400;color:var(--sage);
  letter-spacing:.02em}
.kw-table .post-item .cat{color:rgba(242,240,235,.72)}
.section-cloud .kw-table .kw,.section-paper .kw-table .kw{color:#0b0b0a}
.section-cloud .kw-table .post-item h3,.section-paper .kw-table .post-item h3{color:#4d4c46}
@media(max-width:760px){
  .kw-table .post-item{grid-template-columns:1fr;gap:.3rem}
  .kw-table .post-item h3{font-size:.92rem}
  .kw-table .post-item .cat{display:none}}

/* ── motion ─────────────────────────────────────────── */
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.hero .hero-kicker{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .07s both}
.hero h1{animation:riseIn .95s cubic-bezier(.16,1,.3,1) .15s both}
.hero .lede{animation:riseIn .95s cubic-bezier(.16,1,.3,1) .3s both}
.hero .hero-cta,.hero .pill-row{animation:riseIn .95s cubic-bezier(.16,1,.3,1) .44s both}
.hero .hero-panel,.hero .form,.hero .stats{animation:riseIn 1s cubic-bezier(.16,1,.3,1) .55s both}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .hero-media{animation:none}
}

/* ── POLISH LAYER ───────────────────────────────────── */

/* hero furniture: hairline above the content block */
.hero>.wrap::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:-2.2rem;
  height:1px;background:linear-gradient(90deg,var(--sage),rgba(141,181,178,0) 55%);opacity:.5}
/* vignette so type always holds */
.hero-shade::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(11,11,10,.55) 100%)}

/* card hover: sage rule wipes in from the left.
   Uses the card's own background-image so it cannot collide with
   .card.shot::before (the client screenshot layer). */
.card{position:relative;background-image:linear-gradient(var(--sage),var(--sage));
  background-repeat:no-repeat;background-size:0% 2px;background-position:0 0;
  transition:background-size .35s cubic-bezier(.16,1,.3,1),background-color .22s ease}
.card:hover{background-size:100% 2px}

/* Only cards with a real destination get the affordance. script.js adds
   .is-clickable; without JS the class never lands and the card stays a
   plain block with a working link inside it, which is the correct
   fallback rather than a dead pointer cursor. */
.card.is-clickable{cursor:pointer}
.card.is-clickable:hover{background-color:var(--ink-3)}
/* The focus ring belongs on the anchor, not the card. The card is not
   focusable on purpose: adding tabindex would create a second tab stop
   for one destination. */
.card.is-clickable:focus-within{outline:2px solid var(--sage);outline-offset:-2px}

/* step rows: sage marker on hover */
.step{position:relative}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--sage);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.step:hover::before{transform:scaleY(1)}

/* CTA band reads like a poster */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.08'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.cta-band h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.cta-band .wrap{position:relative;z-index:1}

h1 .outline{-webkit-text-stroke-width:1.5px}
/* quotes: oversized opening mark */
.quote{position:relative}
.quote::before{content:"\201C";position:absolute;top:.7rem;right:1.3rem;
  font-family:var(--display);font-weight:900;font-size:4.5rem;line-height:1;
  color:var(--sage);opacity:.14}

/* section-head measure + spacing rhythm */
.section-head h2{max-width:18ch}
.section-head p{margin-top:1.3rem}
.wrap-narrow h2{max-width:20ch}

/* footer wordmark scale */
footer .foot-logo img{height:clamp(38px,4.5vw,54px)}

/* ── photo-backed section: breaks up long runs of black ── */
.section-photo{background:var(--ink)}
.section-photo::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bg);background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.05);opacity:.20}
.section-photo::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(11,11,10,.80) 26%,rgba(11,11,10,.76) 52%,rgba(11,11,10,.84) 74%,var(--ink) 100%)}
.section-photo>.wrap,.section-photo>.wrap-narrow{position:relative;z-index:1}

/* ── PAPER-SECTION OVERRIDES (light bg) ─────────────── */
/* Any component that can sit inside .section-cloud/.section-paper needs
   an inverted colour here, or its near-white text vanishes on bone. */
.section-cloud .stats,.section-paper .stats{border-color:var(--rule-ink)}
.section-cloud .stat,.section-paper .stat{border-color:var(--rule-ink)}
.section-cloud .stat b,.section-paper .stat b{color:var(--teal)}
.section-cloud .stat span,.section-paper .stat span{color:#5b5a52}
.section-cloud .quotes,.section-paper .quotes{border-color:var(--rule-ink)}
.section-cloud .quote,.section-paper .quote{border-color:var(--rule-ink)}
.section-cloud .quote p,.section-paper .quote p{color:#171715}
.section-cloud .quote cite,.section-paper .quote cite{color:var(--teal)}
.section-cloud .post-list,.section-paper .post-list{border-color:var(--rule-ink)}
.section-cloud .post-item,.section-paper .post-item{border-color:var(--rule-ink)}
.section-cloud .post-item time,.section-paper .post-item time{color:#6a6960}
.section-cloud .post-item h3 a,.section-paper .post-item h3 a{color:#0b0b0a}
.section-cloud .post-item h3 a:hover,.section-paper .post-item h3 a:hover{color:var(--teal)}
.section-cloud .post-item .cat,.section-paper .post-item .cat{color:var(--teal)}
.section-cloud .post-item:hover,.section-paper .post-item:hover{background:linear-gradient(90deg,rgba(17,68,66,.07),transparent)}
.section-cloud .pill,.section-paper .pill{color:var(--teal);border-color:rgba(17,68,66,.42)}
.section-cloud .quote::before,.section-paper .quote::before{color:var(--teal);opacity:.12}
.section-cloud .step .steplink,.section-paper .step .steplink{color:var(--teal)}
.section-cloud .img-duo,.section-paper .img-duo{border-color:var(--rule-ink)}
.section-cloud .hero-panel,.section-paper .hero-panel{background:var(--paper-2);border-color:var(--rule-ink)}
.section-cloud .hero-panel h2,.section-paper .hero-panel h2{color:var(--teal);border-color:var(--rule-ink)}
.section-cloud .hero-panel li,.section-paper .hero-panel li{color:#4d4c46;border-color:var(--rule-ink)}
.section-cloud .hero-panel li strong,.section-paper .hero-panel li strong{color:var(--teal)}

/* ── utility ────────────────────────────────────────── */
.mt-2{margin-top:1.9rem}.mt-3{margin-top:3.4rem}.center{text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* form honeypot */

/* A two-clause headline that must break at the sentence, not mid-clause.
   Steps the type down so each clause clears the split column at desktop. */
.h2-clause{font-size:clamp(1.5rem,3.05vw,2.55rem);line-height:.96}
.h2-clause br{display:none}
@media(min-width:900px){.h2-clause br{display:inline}}

/* ── focus: was entirely missing, keyboard users had a near-black ring ── */
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--sage);outline-offset:3px;border-radius:2px}
.section-cloud :focus-visible,.section-paper :focus-visible,
/* The cta-band is the light sage panel, where a deep teal ring is the
   readable choice. The anthem is a near-black photo band, where the same
   colour is 1.44:1 and effectively invisible, so it keeps the sage
   default. One rule, two grounds, was the bug. */
.cta-band :focus-visible{outline-color:var(--teal-deep)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--sage);
  color:var(--ink);padding:.9rem 1.4rem;font-family:var(--display);font-weight:900;
  font-size:0.84rem;letter-spacing:.06em;text-transform:uppercase}
.skip-link:focus{left:var(--gut);top:.5rem;text-decoration:none}

/* ── low-contrast greys raised above the 4.5:1 floor ── */
.foot-bottom{color:rgba(242,240,235,.72)}
.post-item time{color:rgba(242,240,235,.72)}
.card .meta{color:rgba(242,240,235,.72)}
.stat span{color:rgba(242,240,235,.72)}
.dropdown-menu a small{color:rgba(242,240,235,.72)}
.img-frame figcaption{color:rgba(242,240,235,.72)}

/* ── section rhythm: stop the metronome, break the long dark runs ── */
section{padding:calc(var(--pad) * .72) 0}
.hero,.hero-sub{padding-top:calc(var(--pad) + 2.5rem)}
.section-cloud,.section-paper,.section-teal,.section-photo,.cta-band{padding:var(--pad) 0}
.section-cloud + .section-cloud{padding-top:0}
.section-paper + .section-paper{padding-top:0}

/* ── MOBILE ─────────────────────────────────────────── */
@media(max-width:1000px){
  /* tap targets: measured, then padded until every non-inline control clears 44px */
  .foot-social a{width:46px;height:46px}
  .menu-toggle{padding:.7rem;min-width:46px;min-height:46px}
  footer ul a{display:inline-block;padding:.72rem 0;line-height:1.2}
  footer ul{gap:0}
  .card .go,.step .steplink{display:inline-block;padding:.85rem 0}
  .card .meta a{display:inline-block;padding:.6rem 0}
  .post-item h3 a{display:block;padding:.5rem 0}
  .nav-links a{padding:.62rem 0;display:inline-block}
  .related ul a{display:inline-block;padding:.6rem 0}
  .logo{padding:.6rem 0}
  .foot-logo{padding:.4rem 0}
  .quotes cite,.faq summary{padding-top:.4rem}
  .card h3 a{display:inline-block;padding:.5rem 0}
  .foot-bottom a{display:inline-block;padding:.6rem 0}
  a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding:.5rem 0}
}
/* long compound words in display type were pushing past the gutter at 320px */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual;text-wrap:balance}

/* ── DISPLAY TYPE ON SMALL SCREENS ───────────────────────────────────
   The desktop scale locks at its clamp floor below ~640px, so mobile was
   rendering 40px Archivo Black at line-height .86: a 34px line box for
   40px caps. Ascenders and descenders collided and five stacked lines read
   as one grey slab. Mobile needs its own scale AND its own leading. */
@media(max-width:760px){
  h1{font-size:clamp(2.1rem,8.6vw,3.1rem);line-height:.96;letter-spacing:-.028em;
     text-wrap:balance}
  h2{font-size:clamp(1.6rem,6.6vw,2.3rem);line-height:1.0;letter-spacing:-.026em;
     margin-bottom:1rem}
  h3{font-size:1.14rem;line-height:1.14;letter-spacing:-.02em}
  .hero h1,.hero-sub h1{margin-bottom:.2rem}
  /* the accent and outline spans are phrases, not words: keep them whole
     so a line never ends on a lone coloured article */
  h1 .accent,h2 .accent{display:inline}
  .anthem h2{font-size:clamp(2.2rem,11.5vw,3.6rem);line-height:.94;letter-spacing:-.035em}
  .cta-band h2{font-size:clamp(1.75rem,7.4vw,2.5rem);line-height:.98}
  .section-head{margin-bottom:2.6rem}
  .section-head h2{max-width:none}
  .lede{font-size:1.02rem;line-height:1.55;max-width:none}
  .hero-kicker{font-size:0.7rem;letter-spacing:.16em;margin-bottom:1.15rem;line-height:1.6}
  .wrap-narrow h2{max-width:none}
  .outline{-webkit-text-stroke-width:1.15px}
}
@media(max-width:380px){
  h1{font-size:2.05rem;letter-spacing:-.022em}
  h2{font-size:1.52rem}
  .anthem h2{font-size:2.15rem}
  .cta-band h2{font-size:1.68rem}
}
@media(max-width:520px){
  /* buttons were nowrap and pushed the page wider than the viewport */
  .btn{white-space:normal;text-align:center;padding:.95rem 1.35rem;font-size:0.8rem;
    line-height:1.25}
  .hero-cta{display:grid;gap:.7rem}
  .hero-cta .btn{width:100%;justify-content:center}
  .cta-band .btn{width:100%;justify-content:center}
  h1{letter-spacing:-.03em}
  .anthem-mark{font-size:17vw;bottom:.4rem;letter-spacing:-.045em}
}
@media(max-width:400px){
  body{font-size:16px}
  .wrap,.wrap-narrow{padding:0 1.15rem}
}
/* overflow-x:hidden here silently killed position:sticky on the header,
   because a scroll container on an ancestor cancels sticky descendants.
   clip does the same clipping WITHOUT creating a scroll container. */
html,body{overflow-x:clip;max-width:100%}

/* ── back to top ────────────────────────────────────── */
.to-top{position:fixed;right:clamp(1rem,2.4vw,2.2rem);bottom:clamp(1rem,2.4vw,2.2rem);
  z-index:150;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--sage);color:var(--ink);border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s,background .2s ease;
  box-shadow:0 6px 26px rgba(0,0,0,.42)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--paper);transform:translateY(-3px)}
.to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:square}
@media(max-width:520px){.to-top{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .01s}}

.backword{display:none}

.sr-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

body{font-size:clamp(18px,.2976vw + 16.7px,21.5px)}
.section-head p{font-size:1.05em}
.card p{font-size:.97em;line-height:1.6}
.step p{font-size:.97em;line-height:1.6}
.checks li{font-size:1.02em;line-height:1.56}
.faq .a{font-size:1.02em;line-height:1.63}
.prose p{font-size:1.09em;line-height:1.7}
.prose ul li{font-size:1.05em;line-height:1.62}
.lede{font-size:clamp(1.16rem,.55vw + .95rem,1.5rem)}
.lookup-sub,.lc-note,.lookup-none p{font-size:1em}


/* Phones keep the size they had. This rule is declared after the clamp on
   purpose: the earlier max-width:400px override lost to it, which quietly
   grew mobile body copy nobody asked to change. 16.5 lands every component
   within a fraction of where it was. */
@media(max-width:400px){body{font-size:16.5px}}

.crumbs{border-bottom:1px solid var(--rule);background:var(--ink)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.55rem;padding:.85rem 0;margin:0;font-family:var(--mono);font-size:0.7rem;
  letter-spacing:.14em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:.55rem;color:rgba(242,240,235,.72)}
.crumbs li+li::before{content:"/";color:rgba(242,240,235,.72)}
.crumbs a{color:rgba(242,240,235,.72);text-decoration:none}
.crumbs a:hover{color:var(--sage);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--sage)}
@media(max-width:560px){.crumbs ol{font-size:0.7rem;gap:.4rem}}

.byline{margin-top:1.4rem;font-family:var(--mono);font-size:0.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(242,240,235,.72);
  max-width:none}
.byline strong{color:var(--sage);font-weight:400}
.byline .sep{margin:0 .55rem;color:rgba(242,240,235,.72)}

:root{--warn-ink:#8a6410;--alert-ink:#9c3b23}

.section-cloud .stat b.warn{color:var(--warn-ink)}
.section-cloud .stat b.alert{color:var(--alert-ink)}

.lookup{margin-top:clamp(2.6rem,5vw,4rem);background:var(--paper-2);
  border:1px solid var(--rule-ink);padding:clamp(1.5rem,3vw,2.4rem)}
.lookup .fc-label{display:block;font-family:var(--mono);font-size:0.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem}
.lookup-sub{color:#4d4c46;font-size:1.02rem;line-height:1.55;margin-bottom:1.3rem;
  max-width:60ch}
.lookup-input{width:100%;background:var(--paper);border:1px solid var(--rule-ink);
  color:var(--ink);padding:1.05rem 1.15rem;font-family:var(--ui);font-size:1.05rem;
  border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.lookup-input:focus{outline:none;border-color:var(--teal);
  box-shadow:inset 0 0 0 1px var(--teal)}
.lookup-input::placeholder{color:rgba(11,11,10,.38)}
.lookup-status{font-family:var(--mono);font-size:0.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6b695f;min-height:1.1rem;margin-top:.7rem}
.lookup-status:empty{margin-top:0}

.lookup-list{list-style:none;margin-top:.4rem;border-top:1px solid var(--rule-ink)}
.lookup-list button{width:100%;display:grid;
  grid-template-columns:1fr auto auto;align-items:center;gap:1rem;
  background:none;border:0;border-bottom:1px solid var(--rule-ink);
  padding:.95rem .2rem;cursor:pointer;text-align:left;font-family:var(--ui);
  transition:background .15s}
.lookup-list button:hover{background:rgba(17,68,66,.06)}
.lookup-list .ln{font-size:1.02rem;font-weight:600;color:var(--ink)}
.lookup-list .lc{font-size:0.88rem;color:#6b695f;white-space:nowrap}
.lookup-list .lg{font-family:var(--display);font-weight:900;font-size:1.05rem;
  width:1.6rem;text-align:center}
.lookup-list .lg.good{color:var(--teal)}
.lookup-list .lg.mid{color:var(--warn-ink)}
.lookup-list .lg.bad{color:var(--alert-ink)}
@media(max-width:560px){
  .lookup-list button{grid-template-columns:1fr auto;row-gap:.25rem}
  .lookup-list .lc{grid-column:1;font-size:0.88rem}
  .lookup-list .lg{grid-row:1/3}
}

.lookup-none{padding:1.6rem 0 .4rem}
.lookup-none p{color:#4d4c46;font-size:1.02rem;line-height:1.6;max-width:58ch}
.lookup-none strong{color:var(--ink)}
.lookup-none-sub{margin-top:.7rem;font-size:.95rem}
.lookup-none .btn{margin-top:1.4rem}

.lookup-card{margin-top:1.4rem;background:var(--paper);
  border:1px solid var(--rule-ink);border-left:3px solid var(--teal);
  padding:clamp(1.3rem,2.4vw,1.9rem)}
.lc-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.2rem;flex-wrap:wrap;margin-bottom:1.5rem}
.lc-name{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.03em;line-height:1.02;
  color:var(--ink);max-width:24ch}
.lc-cat{font-family:var(--mono);font-size:0.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:#6b695f;margin-top:.6rem}
.lc-back{background:none;border:1px solid var(--rule-ink);color:#4d4c46;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.6rem .9rem;cursor:pointer;white-space:nowrap;
  transition:.18s}
.lc-back:hover{border-color:var(--teal);color:var(--teal)}

.lc-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule-ink);border:1px solid var(--rule-ink);margin-bottom:1.5rem}
@media(max-width:620px){.lc-scores{grid-template-columns:1fr}}
.lc-score{background:var(--paper);padding:1.1rem 1.1rem 1.3rem}
.lcs-lab{display:block;font-family:var(--mono);font-size:0.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:#6b695f;margin-bottom:.7rem;line-height:1.5}
.lcs-val{display:flex;align-items:baseline;gap:.4rem;font-family:var(--display);
  font-weight:900;font-size:2.1rem;letter-spacing:-.045em;line-height:1;
  margin-bottom:.7rem}
.lcs-val i{font-style:normal;font-size:.95rem;opacity:.55}
.lcs-val.good{color:var(--teal)}
.lcs-val.mid{color:var(--warn-ink)}
.lcs-val.bad{color:var(--alert-ink)}
.lcs-bar{display:block;height:3px;background:rgba(11,11,10,.12)}
.lcs-bar i{display:block;height:100%}
.lcs-bar i.good{background:var(--teal)}
.lcs-bar i.mid{background:var(--warn-ink)}
.lcs-bar i.bad{background:var(--alert-ink)}

.lc-note{color:#4d4c46;font-size:1.02rem;line-height:1.6;max-width:64ch;
  margin-bottom:.9rem}
.lc-note:empty{display:none}
.lc-note strong{color:var(--ink)}
.lc-cta{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--rule-ink)}
.lc-fine{margin-top:1rem;font-size:0.88rem;line-height:1.55;color:#6b695f}
.lc-fine a{color:var(--teal)}

@media(min-width:768px){
  .hero-media{background-image:var(--hero-lg)!important}
  .anthem-media{background-image:var(--anthem-lg)!important}
}

.credits{border-top:1px solid var(--rule)}
.credit{padding:1.7rem 0;border-bottom:1px solid var(--rule)}
.credit h3{font-size:clamp(1rem,1.5vw,1.2rem);margin-bottom:.7rem}
.credit p{color:rgba(242,240,235,.66);font-size:1rem;line-height:1.6;max-width:70ch}
.credit-mod{margin-top:.5rem;font-size:.92rem;color:rgba(242,240,235,.72)}

.lookup-wide{margin-top:clamp(2.8rem,5vw,4.2rem);background:rgba(11,11,10,.30);
  border-color:rgba(242,240,235,.20)}
.lookup-wide .fc-label{color:var(--sage)}
.lookup-wide .lookup-sub{color:rgba(242,240,235,.72)}
.lookup-row{display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;gap:.7rem}
@media(max-width:640px){.lookup-row{grid-template-columns:1fr}}
.lookup-county{background:rgba(11,11,10,.45);border:1px solid rgba(242,240,235,.24);
  color:var(--paper);padding:1.05rem 1.15rem;font-family:var(--ui);font-size:1.02rem;
  border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.lookup-county:focus{outline:none;border-color:var(--sage)}
.lookup-county option{background:var(--ink);color:var(--paper)}
.lookup-wide .lookup-input{background:rgba(11,11,10,.45);
  border-color:rgba(242,240,235,.24);color:var(--paper)}
.lookup-wide .lookup-input:focus{border-color:var(--sage);box-shadow:none}
.lookup-wide .lookup-input::placeholder{color:rgba(242,240,235,.72)}
.lookup-wide .lookup-status{color:rgba(242,240,235,.72)}
.lookup-wide .lookup-list{border-color:rgba(242,240,235,.2)}
.lookup-wide .lookup-list button{border-color:rgba(242,240,235,.2)}
.lookup-wide .lookup-list button:hover{background:rgba(242,240,235,.07)}
.lookup-wide .lookup-list .ln{color:var(--paper)}
.lookup-wide .lookup-list .lc{color:rgba(242,240,235,.66)}
.lookup-wide .lookup-list .lg.good{color:var(--sage)}
.lookup-wide .lookup-list .lg.mid{color:#d8ad55}
.lookup-wide .lookup-none p{color:rgba(242,240,235,.75)}
.lookup-wide .lookup-none strong{color:var(--paper)}
.lookup-wide .lookup-card{background:rgba(11,11,10,.5);
  border-color:rgba(242,240,235,.2);border-left-color:var(--sage)}
.lookup-wide .lc-name{color:var(--paper)}
.lookup-wide .lc-cat{color:rgba(242,240,235,.72)}
.lookup-wide .lc-back{border-color:rgba(242,240,235,.28);color:rgba(242,240,235,.75)}
.lookup-wide .lc-back:hover{border-color:var(--sage);color:var(--sage)}
.lookup-wide .lc-scores{background:rgba(242,240,235,.2);border-color:rgba(242,240,235,.2)}
.lookup-wide .lc-score{background:rgba(11,11,10,.55)}
.lookup-wide .lcs-lab{color:rgba(242,240,235,.72)}
.lookup-wide .lcs-val.good{color:var(--sage)}
.lookup-wide .lcs-val.mid{color:#d8ad55}
.lookup-wide .lcs-val.bad{color:#e07a5f}
.lookup-wide .lcs-bar{background:rgba(242,240,235,.18)}
.lookup-wide .lcs-bar i.good{background:var(--sage)}
.lookup-wide .lcs-bar i.mid{background:#d8ad55}
.lookup-wide .lcs-bar i.bad{background:#e07a5f}
.lookup-wide .lc-note{color:rgba(242,240,235,.75)}
.lookup-wide .lc-note strong{color:var(--paper)}
.lookup-wide .lc-cta{border-color:rgba(242,240,235,.2)}
.lookup-wide .lc-fine{color:rgba(242,240,235,.72)}
.lookup-wide .lc-fine a{color:var(--sage)}
.lookup-wide .lookup-list .lg.bad{color:#e07a5f}

#index .stats{grid-template-columns:1fr 1fr}
@media(max-width:560px){#index .stats{grid-template-columns:1fr}}

.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
@media(max-width:820px){.shot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shot-grid{grid-template-columns:1fr}}
.shot-card{margin:0;background:var(--ink);overflow:hidden}
.shot-card img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.shot-card:hover img{transform:scale(1.03)}

/* The prose above was converted to em so it tracks the fluid body size. The
   UI and label tokens never were: they are rem, pinned to a 16px root, so
   they stay put while body copy grows with the viewport. On a 15in laptop
   that puts body at 20.4px next to a 13.4px keyword table, and the gap gets
   worse the larger the screen. Same fix, applied to the small end of the
   scale. Ratios are to body, so the relationship holds at every width.

     1240px viewport, body 20.4px:  .82em -> 16.7   .76em -> 15.5
                                    .70em -> 14.3   .64em -> 13.1  */
.kw-table .kw{font-size:.82em}
.kw-table .post-item h3{font-size:.92em}
.kw-table .post-item .cat{font-size:.74em}
.stat span{font-size:.78em;line-height:1.45}
.card .meta,.card .go,.card .tag{font-size:.76em}
.post-item time{font-size:.72em}
.related a{font-size:.86em}
.crumbs ol{font-size:.74em}
.foot-bottom{font-size:.72em}
.foot-bottom a{font-size:inherit}
.foot-areas li{font-size:.82em}
.foot-areas a{font-size:inherit}
footer.site{font-size:1em}
footer a{font-size:.88em}
.ext-badge{font-size:1em}
footer h4,.foot-h{font-size:.70em}
/* .nav-links a also matches these links at equal specificity, so the
   dropdown sets its size on the container and outranks it with a
   two-class selector on the anchor. Children then resolve against the
   container instead of stacking a second reduction on top of it. */
.nav-links .dropdown-menu{font-size:.86em}
.nav-links .dropdown-menu a{font-size:1em}
.dropdown-menu a strong{font-size:1em}
.dropdown-menu a small{font-size:.86em}
.nav-links a{font-size:.78em}
.nav .btn{font-size:.78em}
.btn{font-size:.84em}
.hero-panel h2{font-size:.76em}
.hero-panel li{font-size:.94em}
.lookup .fc-label{font-size:.76em}
.lookup-status,.lc-cat,.lcs-lab{font-size:.74em}
.lc-back{font-size:.78em}
.lc-fine{font-size:.82em}
.lookup-list .lc{font-size:.84em}
.img-frame figcaption{font-size:.74em}
.byline{font-size:.76em}
.quote cite{font-size:.80em}
.form label{font-size:.76em}
.pill{font-size:.78em}
.step .steplink{font-size:.82em}
.credit-mod{font-size:.86em}
.ext-badge-text strong{font-size:.80em}
.ext-badge-text small{font-size:.74em}
.ext-badge-mark{font-size:.72em}
.skip-link{font-size:.82em}
.crumbs li,.crumbs a,.crumbs li+li::before{font-size:inherit}

.lookup-offer{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--rule);
  font-size:.92em;line-height:1.6;color:#4d4c46;max-width:62ch}
.lookup-offer a{border-bottom:1px solid rgba(17,68,66,.35)}
.lookup-wide .lookup-offer{color:rgba(242,240,235,.78);
  border-top-color:rgba(242,240,235,.20)}
.lookup-wide .lookup-offer a{color:var(--sage);border-bottom-color:rgba(141,181,178,.4)}

.form label .opt{font-weight:400;text-transform:none;letter-spacing:0;
  opacity:.62;margin-left:.4em}
/* Tap to call. Hidden on desktop, where a phone number is information rather
   than an action, and shown in the mobile nav where it is the shortest path
   a trades or medical prospect has to a human. */
.nav-call{display:none}
@media(max-width:1000px){
  .nav-call{display:flex;align-items:center;gap:.45rem;margin-left:auto;
    margin-right:.9rem;font-family:var(--mono);font-size:.72em;
    letter-spacing:.06em;color:var(--sage);white-space:nowrap}
  .nav-call:hover{text-decoration:none;color:var(--paper)}
}

/* A three-column grid whose last row holds a single card leaves two ruled
   empty cells, which reads as a layout that broke rather than a list that
   ended. Let the orphan span the row. Keyed on :last-child:nth-child(3n+1)
   so it corrects itself whenever the card count changes, rather than being
   tuned to today's ten. */
@media(min-width:861px){
  .grid-3 > .card:last-child:nth-child(3n+1){grid-column:1 / -1}
  .grid-3 > .card:last-child:nth-child(3n+1) > *{max-width:62ch}
}

/* The Local Falcon grid is a data figure, not photography. The sitewide
   grayscale on .img-frame img would destroy it: the whole point is that
   green means top three and orange means buried. This opts one figure out
   and caps its width so a square map does not run taller than the screen. */
.img-frame.is-data img{filter:none}
.img-frame.is-data{max-width:640px;margin-inline:auto}