/* ============================================================
   STONEKEPT — shared design system
   Used by every page. Authored once, cached forever.
   ============================================================ */
:root{
  --head-h:     85px;   /* sticky header height — heroes pull up under it */
  /* stone neutrals */
  --ink:        #17150F;
  --ink-2:      #201D15;
  --stone-900:  #2B271D;
  --stone-700:  #4C4738;
  --stone-600:  #5E5747;
  --stone-500:  #756D5B;
  --stone-400:  #8E8675;
  --stone-300:  #B9B0A0;
  --stone-200:  #D8D0C0;
  --stone-150:  #E6DFD0;
  --paper:      #F4F0E6;
  --paper-2:    #ECE6D8;

  /* accents */
  --moss:       #6E7F4E;
  --moss-bright:#9DB574;
  --moss-deep:  #515E3A;
  --moss-dark:  #333D24;
  --brass:      #B08A4F;
  --brass-soft: #C9A877;
  --brass-cta:  #D9A85C;
  --brass-hov:  #C9944A;
  /* Brass dark enough to read as small text on paper, paper-2 and stone-150
     (4.6:1 or better). --brass stays for rules, marks and dark backgrounds. */
  --brass-ink:  #785E36;

  /* roles */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --muted:      var(--stone-500);
  --line:       #D6CDBB;
  --line-soft:  #E2DACA;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --disp: "Archivo", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* page grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--moss); color:#fff}

/* skip-to-content — visually hidden until focused (keyboard users) */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:10px;
  font-family:var(--sans); font-size:.92rem; font-weight:500;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px; outline:2px solid var(--brass-soft); outline-offset:2px}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.section{padding-block:clamp(72px, 11vw, 150px); position:relative}
.section--tight{padding-block:clamp(56px, 8vw, 104px)}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--moss-deep);
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:600;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--brass); display:inline-block;
}
.eyebrow.center::before{display:none}

h1,h2,h3{font-family:var(--disp); font-weight:800; line-height:.98; letter-spacing:-.02em; margin:0; text-transform:uppercase; text-wrap:balance}
.h-display{ font-size:clamp(2.9rem, 7.6vw, 6.4rem); font-weight:900 }
.h-section{ font-size:clamp(2.1rem, 4.8vw, 3.9rem); letter-spacing:-.02em; font-weight:900 }
h3{font-size:1.32rem; letter-spacing:-.005em; line-height:1.08}
em, .it{font-style:italic}
/* The serif survives as the single italic accent word inside a heading —
   the one piece of the old voice the loud new type keeps. */
h1 .it, h2 .it, h3 .it, .h-display .it, .h-section .it{
  font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0; font-size:.96em;
}
h1 .brass, h2 .brass{font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; font-size:.96em}
.lead{font-size:clamp(1.06rem,1.7vw,1.32rem); color:var(--stone-700); line-height:1.55; font-weight:400}
.kicker-num{font-family:var(--mono); font-size:12px; color:var(--brass); letter-spacing:.1em}

/* ---------- buttons ---------- */
.btn{
  --bg-btn:var(--ink); --fg-btn:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg-btn); color:var(--fg-btn);
  font-family:var(--disp); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.9em 1.55em; border-radius:10px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .35s var(--ease), background .3s, box-shadow .35s var(--ease), color .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(23,21,15,.6)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translate(3px,-3px)}
/* --moss is the loud primary: brass block, ink lettering */
.btn--moss{--bg-btn:var(--brass-cta); --fg-btn:var(--ink)}
.btn--moss:hover{--bg-btn:var(--brass-hov)}
.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--ink); border-color:var(--line); }
.btn--ghost:hover{border-color:var(--ink); box-shadow:none; background:transparent}
.btn--lg{padding:1.05em 1.85em; font-size:1rem}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em; font-weight:500; font-size:.96rem;
  color:var(--moss-deep); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:gap .3s var(--ease), border-color .3s;
}
.link-arrow:hover{gap:.85em; border-color:var(--moss)}
/* The page hero is ink, where moss-deep reads at 2.6:1. */
.page-hero .link-arrow{color:var(--moss-bright)}
.page-hero .link-arrow:hover{border-color:var(--moss-bright)}

/* ============================================================
   HEADER + NAV (shared)
   ============================================================ */
/* Solid dark bar, always — the site's chrome no longer changes color on scroll. */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(23,21,15,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(244,240,230,.08);
  transition:background .4s, border-color .4s;
}
.site-header.scrolled, .site-header.solid{ background:rgba(23,21,15,.97); }
.site-header .brand{color:var(--paper)}
.site-header .brand .mark path{fill:var(--paper)}
.site-header .brand b{color:var(--brass-soft)}
.site-header .burger span{background:var(--paper)}
.site-header .nav-cta .btn{background:var(--brass-cta); color:var(--ink)}
.site-header .nav-cta .btn:hover{background:var(--brass-hov)}
/* 3-column header: brand hard-left, nav links centered, CTA hard-right */
.nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:84px; gap:24px; }
.nav > .brand{ grid-column:1; justify-self:start }
.brand{display:inline-flex; align-items:center; gap:.6em; font-family:var(--disp); font-weight:800; font-size:1.16rem; letter-spacing:.05em; text-transform:uppercase}
.brand .mark{width:26px; height:30px; flex:none}
.brand b{font-weight:800}
/* Gap tops out at 30px: at 34px the row was 1,127px wide in a 1,112px content area, so on wide
   screens "Start a project" sat 10 to 15px past the content's right edge (2026-10-22). */
.nav-links{display:flex; gap:clamp(16px, 2.3vw, 30px); align-items:center; grid-column:2; justify-self:center}
.nav-links > a, .nav-links .has-dropdown > .drop-trigger{
  font-family:var(--disp); font-size:.86rem; color:rgba(244,240,230,.72); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  position:relative; transition:color .25s; background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:.4em;
}
.nav-links > a::after, .drop-trigger::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--brass-cta);
  transition:width .3s var(--ease);
}
.nav-links > a:hover, .drop-trigger:hover{color:var(--paper)}
.nav-links > a:hover::after, .has-dropdown:hover .drop-trigger::after{width:100%}
.nav-links > a[aria-current="page"]{color:var(--paper)}
.nav-links > a[aria-current="page"]::after{width:100%; background:var(--brass-cta)}
.drop-caret{font-size:.6em; transition:transform .3s var(--ease)}

/* dropdown */
.has-dropdown{position:relative}
.drop-trigger[aria-current="page"]{color:var(--paper)}
.drop-trigger[aria-current="page"]::after{width:100%; background:var(--brass-cta)}
/* invisible hover-bridge across the gap between the trigger and the menu —
   scoped to the trigger width (on .has-dropdown), so it never overlays the
   adjacent nav links the way a full-menu-width bridge would */
.has-dropdown::after{content:""; position:absolute; left:0; right:0; top:100%; height:18px; display:none;}
.has-dropdown:hover::after{display:block;}
.dropdown{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:10px; min-width:230px; box-shadow:0 24px 50px -24px rgba(23,21,15,.4);
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s var(--ease); z-index:50;
}
/* Hover or the Services button's .open only. :focus-within used to open every
   panel as focus passed through, so Tab walked all 42 dropdown links. */
.has-dropdown:hover .dropdown, .dropdown.open{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.has-dropdown:hover .drop-caret, .drop-trigger[aria-expanded="true"] .drop-caret{transform:rotate(180deg)}
.dropdown a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; transition:background .2s;
}
.dropdown a:hover{background:var(--paper-2)}
.dropdown a b{font-size:.95rem; color:var(--ink); font-weight:500}
.dropdown a span{font-size:.8rem; color:var(--stone-500)}
/* mega variant — Locations (an "all" link + county-grouped city columns).
   Left-anchored to the trigger so the wider panel never clips the viewport. */
.dropdown--mega{min-width:430px; padding:12px; left:0; transform:translateX(0) translateY(8px);}
.has-dropdown:hover .dropdown--mega, .dropdown--mega.open{transform:translateX(0) translateY(0);}
.dropdown--mega .drop-all{border-bottom:1px solid var(--line-soft); margin-bottom:8px}
.drop-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.drop-county{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--moss-deep); margin:10px 12px 3px}
.drop-col > .drop-county:first-child{margin-top:2px}
.drop-col a{padding:6px 12px}
.drop-col a b{font-weight:450; color:var(--stone-700)}
.drop-col a:hover b{color:var(--ink)}

.nav-cta{display:flex; align-items:center; gap:14px; grid-column:3; justify-self:end}
.nav-phone{font-size:.92rem; color:var(--stone-300); font-weight:450}
.nav-phone:hover{color:var(--paper)}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px; width:42px; height:42px}
.burger span{display:block; width:22px; height:1.8px; background:var(--paper); margin:5px auto; transition:.3s var(--ease)}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  /* pull up under the transparent header so the dark hero fills to the very top */
  margin-top:calc(var(--head-h) * -1);
  padding-top:calc(clamp(56px, 9vw, 110px) + var(--head-h)); padding-bottom:clamp(0px, 4vw, 40px);
  border-bottom:1px solid var(--stone-900);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(176,138,79,.16), transparent 55%),
    radial-gradient(90% 70% at 8% 100%, rgba(110,127,78,.14), transparent 60%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:2}
/* the studio mark, ghosted large in the hero's corner */
.hero-mark{
  position:absolute; right:-60px; bottom:-90px; width:clamp(240px,30vw,460px); height:auto;
  opacity:.1; pointer-events:none; z-index:1;
}
.hero-eyebrow{color:var(--brass-soft)}
.hero-eyebrow::before{background:var(--brass-soft)}
.hero h1{ color:var(--paper); margin:.5em 0 0; max-width:16ch; }
/* Home hero only: accent words stay in the same heavy uppercase — color
   carries the emphasis. (Interior heroes and section h2s keep the serif
   italic accent.) */
.hero h1 .it, .hero h1 .brass{
  font-family:var(--disp); font-style:normal; font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em; font-size:1em;
}
.hero h1 .it{color:var(--moss-bright)}
.hero h1 .brass{color:var(--brass-soft)}
.hero-sub{ margin-top:1.5rem; max-width:46ch; color:var(--stone-300); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; }
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:2.3rem}
.hero .btn--ghost{--fg-btn:var(--paper); border-color:rgba(217,208,192,.28)}
.hero .btn--ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}
.hero-meta{ margin-top:clamp(48px,6vw,84px); border-top:1px solid var(--stone-900); padding-top:30px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.hero-meta .item .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--moss-bright); font-weight:600}
.hero-meta .item .v{display:block; margin-top:8px; font-family:var(--disp); font-weight:800; font-size:1.22rem; color:var(--paper); letter-spacing:.01em; text-transform:uppercase}
.hero-meta .item .d{display:block; margin-top:3px; font-size:.86rem; color:var(--stone-400)}

/* ============================================================
   INTERIOR PAGE HERO
   ============================================================ */
.page-hero{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  /* pull up under the transparent header so the dark hero fills to the very top */
  margin-top:calc(var(--head-h) * -1);
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px);
  padding-top:calc(clamp(56px,8vw,104px) + var(--head-h));
  border-bottom:1px solid var(--stone-900);
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(176,138,79,.15), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(110,127,78,.13), transparent 60%);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero .eyebrow{color:var(--brass-soft)}
.page-hero .eyebrow::before{background:var(--brass-soft)}
.page-hero h1{color:var(--paper); margin:.45em 0 0; font-size:clamp(2.3rem,5.4vw,4.2rem); max-width:18ch}
.page-hero h1 .it{color:var(--moss-bright)}
.page-hero p{margin-top:1.2rem; max-width:52ch; color:var(--stone-300); font-size:clamp(1.04rem,1.5vw,1.2rem)}
.page-hero .hero-actions{margin-top:2rem}
.page-hero .btn--ghost{--fg-btn:var(--paper); border-color:rgba(217,208,192,.28)}
.page-hero .btn--ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}

/* breadcrumb */
.crumbs{display:flex; gap:.5em; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-400)}
.crumbs a{color:var(--brass-soft)}
.crumbs a:hover{color:var(--paper)}
.crumbs .sep{opacity:.5}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy{background:var(--paper-2)}
.phil-grid{display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(40px,7vw,100px); align-items:start}
.phil-statement{ font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,3vw,2.45rem); line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.phil-statement .it{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--moss-deep)}
.phil-body p{color:var(--stone-700); margin:0 0 1.2em}
.phil-body p:last-child{margin-bottom:0}
.phil-signature{margin-top:26px; display:flex; align-items:center; gap:14px}
.phil-signature .mk{width:34px;height:40px}
.phil-signature .nm{font-family:var(--serif); font-style:italic; font-size:1.15rem}
.phil-signature .rl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-400)}

/* ============================================================
   SERVICES GRID
   ============================================================ */
.svc-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:54px; flex-wrap:wrap}
.svc-head .lead{max-width:42ch}
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.svc{ background:var(--paper); padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; gap:16px; min-height:280px; transition:background .35s var(--ease); position:relative; }
.svc:hover{background:#FAF7EF}
.svc-ic{ width:48px; height:48px; border-radius:12px; background:var(--ink); color:var(--brass-soft); display:grid; place-items:center; flex:none; transition:transform .4s var(--ease), background .35s; }
.svc:hover .svc-ic{transform:translateY(-3px) rotate(-4deg); background:var(--moss-deep); color:#fff}
.svc-ic svg{width:24px;height:24px}
.svc h3{margin-top:4px}
.svc p{color:var(--stone-600); font-size:.98rem; margin:0; flex:1}
a.svc{color:inherit}
.svc .num{position:absolute; top:clamp(28px,3.4vw,46px); right:clamp(28px,3.4vw,46px); font-family:var(--mono); font-size:12px; color:var(--stone-300)}
.svc ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.svc ul li{font-size:.8rem; font-family:var(--mono); letter-spacing:.02em; color:var(--stone-600); background:var(--paper-2); border:1px solid var(--line-soft); padding:4px 10px; border-radius:100px}
.svc .more{font-size:.85rem; font-weight:500; color:var(--moss-deep); display:inline-flex; gap:.4em; align-items:center; transition:gap .3s var(--ease)}
a.svc:hover .more{gap:.8em}

/* ============================================================
   PROCESS
   ============================================================ */
.process{background:var(--paper-2)}
.process h2{max-width:14ch}
.proc-list{margin-top:60px; border-top:1.5px solid var(--stone-200)}
.proc-step{ display:grid; grid-template-columns:90px 1fr 1.1fr; gap:30px; align-items:baseline; padding:34px 0; border-bottom:1.5px solid var(--stone-200); transition:padding .4s var(--ease); }
.proc-step:hover{padding-left:14px}
.proc-step .pn{font-family:var(--mono); font-size:13px; color:var(--brass-ink); font-weight:600}
.proc-step h3{color:var(--ink); font-size:1.55rem}
.proc-step p{color:var(--stone-700); margin:0; font-size:.98rem; max-width:46ch}
.proc-step.is-care h3{color:var(--moss-deep)}

/* ============================================================
   WORK
   ============================================================ */
.work-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:50px}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.work-card{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); transition:transform .45s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column; }
.work-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(23,21,15,.45)}
.work-thumb{aspect-ratio:4/3; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.work-thumb svg{position:absolute; inset:0; width:100%; height:100%}
.work-body{padding:22px 24px 26px}
.work-body .cat{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--moss-deep)}
.work-body h3{font-size:1.3rem; margin-top:8px}
.work-body p{font-size:.92rem; color:var(--stone-700); margin:8px 0 0}
.work-body .more{display:inline-flex; align-items:center; gap:.4em; margin-top:14px; font-size:.85rem; font-weight:500; color:var(--moss-deep); transition:gap .3s var(--ease)}
.work-card:hover .more{gap:.8em}
.work-note{margin-top:34px; font-size:.9rem; color:var(--stone-500); font-style:italic; text-align:center; font-family:var(--serif)}
/* Portfolio / selected work (/work) — real homepage screenshots as thumbnails */
.work-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; background:var(--paper-2)}
.work-thumb .status{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); background:rgba(23,21,15,.72); border:1px solid rgba(244,240,230,.18); border-radius:100px; padding:4px 11px}
.work-tags{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none}
.work-tags li{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--stone-600); border:1px solid var(--line); border-radius:100px; padding:3px 9px}
.work-body .more--muted{color:var(--stone-500); font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:none}
.work-card.is-soon{cursor:default}
.work-card.is-soon:hover{transform:none; box-shadow:none}
/* Sample tiles: a linked thumbnail + a two-link body (used on /industries + home) */
a.work-thumb{display:block}
.work-links{display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-top:14px}
.work-body .more-alt{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--stone-500); display:inline-flex; align-items:center; gap:.4em; transition:color .2s var(--ease)}
.work-body .more-alt:hover{color:var(--moss-deep)}
/* Sample preview lightbox */
body.lb-open{overflow:hidden}
.lightbox{position:fixed; inset:0; z-index:1000; background:rgba(11,10,7,.88); overflow:auto; padding:44px 20px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.lightbox[hidden]{display:none}
.lb-stage{max-width:1040px; margin:0 auto; min-height:100%; display:flex; align-items:flex-start; justify-content:center}
.lb-fig{margin:0; width:100%}
.lb-img{display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); background:var(--paper-2)}
.lb-cap{margin:14px 0 0; text-align:center; color:var(--stone-300); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.lb-close{position:fixed; top:16px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid rgba(244,240,230,.28); background:rgba(23,21,15,.62); color:var(--paper); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s var(--ease), transform .2s var(--ease)}
.lb-close:hover{background:rgba(23,21,15,.92); transform:scale(1.06)}
.lb-close:focus-visible{outline:2px solid var(--brass-soft); outline-offset:2px}

/* ============================================================
   CARE
   ============================================================ */
.care{background:var(--paper-2)}
.care-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,84px); align-items:center}
.care-list{list-style:none; margin:30px 0 0; padding:0; columns:2; column-gap:34px}
.care-list li{ break-inside:avoid; margin-bottom:16px; padding-left:30px; position:relative; font-size:.96rem; color:var(--stone-700); }
.care-list li::before{
  content:""; position:absolute; left:0; top:7px; width:15px; height:15px; background:var(--moss-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.care-list li b{font-weight:600; color:var(--ink)}
.care-aside{ background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(30px,4vw,48px); position:relative; overflow:hidden; }
.care-aside::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0, rgba(110,127,78,.2), transparent 60%)}
.care-aside .inner{position:relative; z-index:2}
.care-aside .big{font-family:var(--disp); font-weight:900; font-size:clamp(2.3rem,3.8vw,3rem); color:var(--paper); line-height:1}
.care-aside .big small{font-size:1rem; color:var(--stone-400); font-family:var(--mono); letter-spacing:.05em}
.care-aside h3{color:var(--paper); margin-top:18px}
.care-aside p{color:var(--stone-300); font-size:.95rem; margin:10px 0 0}
.care-aside ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.care-aside ul li{display:flex; gap:12px; align-items:flex-start; font-size:.93rem; color:var(--stone-200)}
.care-aside ul li svg{flex:none; margin-top:3px; color:var(--moss-bright)}

/* ============================================================
   PRICING
   ============================================================ */
.pricing .svc-head{margin-bottom:50px}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.plan{ border:1px solid var(--line); border-radius:var(--r); padding:34px 30px 32px; background:var(--paper); display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.plan:hover{transform:translateY(-5px); box-shadow:0 24px 48px -30px rgba(23,21,15,.4)}
.plan.feat{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:scale(1.015)}
.plan.feat:hover{transform:scale(1.015) translateY(-5px)}
.plan-top{display:flex; justify-content:space-between; align-items:flex-start}
.plan .pname{font-family:var(--disp); font-weight:800; font-size:1.3rem; color:var(--ink); text-transform:uppercase; letter-spacing:.01em}
.plan.feat .pname{color:var(--paper)}
.plan .tag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--brass-soft); padding:5px 10px; border-radius:100px}
.plan .pdesc{font-size:.9rem; color:var(--stone-600); margin:10px 0 0; min-height:42px}
.plan.feat .pdesc{color:var(--stone-300)}
.plan .price{margin:22px 0 4px; display:flex; align-items:baseline; gap:6px}
.plan .price .amt{font-family:var(--disp); font-weight:900; font-size:2.9rem; letter-spacing:-.02em; line-height:1; color:var(--ink)}
.plan.feat .price .amt{color:var(--paper)}
.plan .price .per{font-size:.85rem; color:var(--stone-500)}
.plan.feat .price .per{color:var(--stone-400)}
.plan .build{font-size:.88rem; color:var(--stone-600); font-family:var(--mono)}
.plan.feat .build{color:var(--brass-soft)}
.plan .divider{height:1px; background:var(--line); margin:24px 0}
.plan.feat .divider{background:var(--stone-900)}
.plan ul{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1}
.plan ul li{display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--stone-700)}
.plan.feat ul li{color:var(--stone-200)}
.plan ul li svg{flex:none; margin-top:3px; color:var(--moss-deep)}
.plan.feat ul li svg{color:var(--moss-bright)}
.plan .btn{width:100%; justify-content:center}
.plan.feat .btn{--bg-btn:var(--brass-cta); --fg-btn:var(--ink)}
.plan.feat .btn:hover{--bg-btn:var(--brass-hov)}
.price-foot{margin-top:26px; text-align:center; font-size:.9rem; color:var(--stone-500)}
.price-foot b{color:var(--ink); font-weight:600}
/* "Custom builds" banner — the bigger-project lane below the three tiers */
.custom-tier{margin-top:26px; background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(28px,4vw,42px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; position:relative; overflow:hidden}
.custom-tier::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 100% at 100% 0, rgba(176,138,79,.16), transparent 60%); pointer-events:none}
.custom-tier > *{position:relative; z-index:2}
.custom-tier .eyebrow{color:var(--brass-soft)}
.custom-tier .eyebrow::before{background:var(--brass-soft)}
.custom-tier h3{font-family:var(--serif); color:var(--paper); font-size:1.6rem; margin-top:10px}
.custom-tier p{color:var(--stone-300); margin:8px 0 0; max-width:56ch; font-size:.96rem}
.custom-tier .btn{--bg-btn:var(--brass-cta); --fg-btn:var(--ink); flex:none}
.custom-tier .btn:hover{--bg-btn:var(--brass-hov)}
/* 12-month care term: the second build price on each plan card, and the band on
   /pricing that explains it. The band is light on purpose: it is an option on the
   three plans above, not another lane like the dark custom-build bands. */
.plan .build-term{align-self:flex-start; margin-top:6px; font-size:.84rem; color:var(--moss-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); transition:color .25s}
.plan .build-term:hover{color:var(--ink)}
.plan.feat .build-term{color:var(--moss-bright)}
.plan.feat .build-term:hover{color:var(--paper)}
.term-band{margin-top:26px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(28px,4vw,42px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; scroll-margin-top:100px}
.term-band h3{font-family:var(--serif); color:var(--ink); font-size:1.6rem; margin-top:10px}
.term-band p{color:var(--stone-700); margin:8px 0 0; max-width:62ch; font-size:.96rem}
.term-band .btn{flex:none}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(40px,6vw,80px); align-items:start}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{ list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; gap:24px; align-items:center; font-family:var(--sans); font-weight:600; font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--ink); letter-spacing:-.01em; transition:color .25s; }
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--moss-deep)}
.faq-icon{flex:none; width:26px; height:26px; position:relative; transition:transform .35s var(--ease)}
.faq-icon::before,.faq-icon::after{content:""; position:absolute; background:var(--moss-deep); transition:opacity .3s}
.faq-icon::before{top:12px; left:4px; right:4px; height:2px}
.faq-icon::after{left:12px; top:4px; bottom:4px; width:2px}
details[open] .faq-icon::after{opacity:0}
details[open] .faq-icon{transform:rotate(180deg)}
details .answer{padding:0 0 26px; max-width:60ch; color:var(--stone-700); font-size:.98rem}
details .answer p{margin:0 0 .8em}
details .answer p:last-child{margin-bottom:0}
/* Global a{color:inherit;text-decoration:none} makes in-copy links invisible.
   FAQ answers carry real links (industries, /about, /faq) — mark them. */
details .answer a{color:var(--moss-deep); border-bottom:1px solid var(--line)}
details .answer a:hover{border-bottom-color:var(--moss-deep)}

/* ============================================================
   PROSE (service + location content)
   ============================================================ */
.layout{display:grid; grid-template-columns:1fr 320px; gap:clamp(40px,6vw,80px); align-items:start}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.4rem); margin:0 0 .5em}
.prose h2:not(:first-child){margin-top:1.8em}
.prose h3{font-size:1.35rem; margin:1.6em 0 .4em}
.prose p{color:var(--stone-700); margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose ul{list-style:none; padding:0; margin:0 0 1.4em}
.prose ul li{position:relative; padding-left:30px; margin-bottom:13px; color:var(--stone-700)}
.prose ul li::before{
  content:""; position:absolute; left:0; top:7px; width:15px; height:15px; background:var(--moss-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prose ul li b{color:var(--ink); font-weight:600}
.prose .stat-row{display:flex; gap:34px; flex-wrap:wrap; margin:0 0 1.6em; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.prose .stat-row .s .n{font-family:var(--serif); font-size:2rem; color:var(--ink); display:block; line-height:1}
.prose .stat-row .s .l{font-size:.82rem; color:var(--stone-500); margin-top:4px; display:block}

/* sticky aside card */
.aside-card{position:sticky; top:100px; background:var(--ink); color:var(--paper); border-radius:var(--r); padding:30px; overflow:hidden}
.aside-card::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0,rgba(176,138,79,.16),transparent 60%)}
.aside-card .inner{position:relative; z-index:2}
.aside-card .eyebrow{color:var(--brass-soft)}
.aside-card .eyebrow::before{background:var(--brass-soft)}
.aside-card h3{color:var(--paper); margin:14px 0 0; font-size:1.5rem}
.aside-card p{color:var(--stone-300); font-size:.93rem; margin:10px 0 0}
.aside-card .btn{width:100%; justify-content:center; margin-top:20px; --bg-btn:var(--brass-cta); --fg-btn:var(--ink)}
.aside-card .btn:hover{--bg-btn:var(--brass-hov)}
.aside-card .meta{margin-top:22px; padding-top:20px; border-top:1px solid var(--stone-900); display:flex; flex-direction:column; gap:12px}
.aside-card .meta a, .aside-card .meta span{display:flex; flex-direction:column}
.aside-card .meta .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft)}
.aside-card .meta .v{font-family:var(--disp); font-weight:600; font-size:1rem; color:var(--paper)}
.aside-card .meta a:hover .v{color:var(--moss-bright)}

/* feature blocks on service pages */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px}
.feature{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:28px}
.feature .fic{width:42px;height:42px;border-radius:10px;background:var(--ink);color:var(--brass-soft);display:grid;place-items:center;margin-bottom:16px}
.feature .fic svg{width:21px;height:21px}
.feature h3{font-size:1.2rem; margin-bottom:8px}
.feature p{font-size:.92rem; color:var(--stone-700); margin:0}

/* ============================================================
   LOCATIONS HUB
   ============================================================ */
.loc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.loc-card{background:var(--paper); padding:30px; display:flex; flex-direction:column; gap:8px; transition:background .3s; position:relative}
.loc-card:hover{background:#FAF7EF}
.loc-card .co{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-500)}
.loc-card h3{font-size:1.4rem}
.loc-card p{font-size:.9rem; color:var(--stone-600); margin:0; flex:1}
.loc-card .more{font-size:.85rem; font-weight:500; color:var(--moss-deep); display:inline-flex; gap:.4em; align-items:center; transition:gap .3s var(--ease); margin-top:6px}
.loc-card:hover .more{gap:.8em}

/* related links row */
.related{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.related a{font-size:.88rem; font-family:var(--mono); color:var(--stone-700); background:var(--paper-2); border:1px solid var(--line-soft); padding:8px 14px; border-radius:100px; transition:border-color .25s, color .25s}
.related a:hover{border-color:var(--moss); color:var(--ink)}

/* ============================================================
   COMPARISON TABLE  (custom-vs-wordpress)
   ============================================================ */
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); -webkit-overflow-scrolling:touch}
.cmp{width:100%; border-collapse:collapse; min-width:680px}
.cmp th, .cmp td{text-align:left; padding:15px 18px; border-bottom:1px solid var(--line-soft); font-size:.92rem; line-height:1.45; vertical-align:top}
.cmp thead th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone-600); background:var(--paper-2); font-weight:500; vertical-align:bottom}
.cmp thead th.is-us{color:var(--moss-deep)}
.cmp .col-feat{width:20%}
.cmp tbody th{font-family:var(--sans); font-weight:600; color:var(--ink); font-size:.98rem}
.cmp td.is-us{color:var(--ink)}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:#FAF7EF}
.cmp-note{margin-top:18px; font-size:.9rem; color:var(--stone-600); font-style:italic; max-width:70ch}
code{font-family:var(--mono); font-size:.88em; background:var(--paper-2); border:1px solid var(--line-soft); padding:.08em .4em; border-radius:5px; color:var(--ink)}

/* ============================================================
   CTA + CONTACT
   ============================================================ */
.cta{background:var(--ink); color:var(--paper); position:relative; overflow:hidden}
.cta::after{content:""; position:absolute; inset:0; background:
  radial-gradient(70% 90% at 85% 110%, rgba(176,138,79,.18), transparent 55%),
  radial-gradient(60% 80% at 0% 0%, rgba(110,127,78,.16), transparent 60%)}
.cta .wrap{position:relative; z-index:2}
.cta-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:center}
.cta h2{color:var(--paper); font-size:clamp(2.3rem,5vw,4rem); max-width:14ch}
.cta h2 .it{color:var(--moss-bright)}
.cta p{color:var(--stone-300); margin:22px 0 0; max-width:44ch; font-size:1.1rem}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.cta .btn--ghost{--fg-btn:var(--paper); border-color:rgba(217,208,192,.28)}
.cta .btn--ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.04)}
.contact-card{ background:rgba(244,240,230,.04); border:1px solid var(--stone-900); border-radius:var(--r); padding:clamp(28px,3.5vw,40px); backdrop-filter:blur(6px); }
/* light info panel with DARK lettering — for use on light sections (e.g. the
   contact page), where the card's default light text would be invisible.
   Double-class selectors so these beat the base .contact-card rules that come
   later in the file (equal specificity would otherwise let the base text win). */
.contact-card--panel{ background:var(--paper-2); border-color:var(--line); backdrop-filter:none; }
.contact-card.contact-card--panel .row{ border-bottom-color:var(--line); }
.contact-card.contact-card--panel .row .k{ color:var(--moss-deep); }
.contact-card.contact-card--panel .row a, .contact-card.contact-card--panel .row .v{ color:var(--ink); }
.contact-card.contact-card--panel .row a:hover{ color:var(--moss-deep); }
.contact-card .row{display:flex; flex-direction:column; gap:6px; padding:18px 0; border-bottom:1px solid var(--stone-900)}
.contact-card .row:first-child{padding-top:0}
.contact-card .row:last-child{border-bottom:0; padding-bottom:0}
.contact-card .row .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft)}
.contact-card .row a, .contact-card .row .v{font-family:var(--disp); font-weight:700; font-size:1.16rem; color:var(--paper); transition:color .25s}
.contact-card .row a:hover{color:var(--moss-bright)}

/* contact form */
.form{display:grid; gap:18px}
.form .field{display:flex; flex-direction:column; gap:7px}
.form .field.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-500)}
.form input, .form select, .form textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; transition:border-color .25s, box-shadow .25s;
}
.form input:focus, .form select:focus, .form textarea:focus{outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(110,127,78,.14)}
.form textarea{resize:vertical; min-height:130px}
.form .btn{justify-self:start; margin-top:6px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.form-note{font-size:.84rem; color:var(--stone-500); margin-top:4px}
.form-status{font-size:.92rem; margin:2px 0 0; padding:12px 15px; border-radius:10px; border:1px solid var(--line)}
.form-status.ok{color:var(--moss-deep); background:rgba(110,127,78,.1); border-color:rgba(110,127,78,.35)}
.form-status.err{color:#9a3b2e; background:rgba(154,59,46,.08); border-color:rgba(154,59,46,.3)}
.form-status.err a{color:#9a3b2e; text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink-2); color:var(--stone-300); padding-block:0 0; border-top:1px solid var(--stone-900); position:relative; overflow:hidden}
.foot-cta{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; padding-block:clamp(40px,6vw,64px); border-bottom:1px solid var(--stone-900)}
.foot-cta .eyebrow{color:var(--brass-soft)}
.foot-cta .eyebrow::before{background:var(--brass-soft)}
.foot-cta-h{color:var(--paper); font-size:clamp(1.8rem,3.8vw,2.9rem); margin-top:12px; max-width:18ch}
.foot-cta-h .it{color:var(--brass-soft)}
.foot-cta .btn{flex:none}
/* Brand on its own row, then the four link columns share the full width —
   side-by-side they read as a 5-column grid with one slot wasted. */
.foot-top{display:flex; flex-direction:column; gap:38px; padding-block:clamp(36px,5vw,52px) 28px; border-bottom:1px solid var(--stone-900)}
.foot-brand{max-width:52ch}
.foot-brand .brand{color:var(--paper); margin-bottom:12px}
.foot-brand .brand b{color:var(--brass-soft)}
.foot-brand .brand .mark path{fill:var(--paper)}
.foot-brand p{font-size:.9rem; color:var(--stone-400); margin:0}
.foot-meta{margin-top:18px; display:flex; flex-direction:column; gap:6px}
.foot-meta a, .foot-meta span{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--stone-300)}
.foot-meta a:hover{color:var(--paper)}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px clamp(24px,4vw,48px); width:100%}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr}}
.foot-col h3{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft); font-weight:600; margin:0 0 12px; line-height:inherit; text-wrap:wrap}
.foot-col a{display:block; font-size:.92rem; color:var(--stone-300); margin-bottom:8px; transition:color .25s}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:20px 24px; font-size:.84rem; color:var(--stone-400)}
.foot-bottom a:hover{color:var(--stone-200)}
/* the quarry floor: a giant faded wordmark closing the page */
.foot-giant{
  font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(40px, 14vw, 230px); line-height:.78; text-align:center; white-space:nowrap;
  color:rgba(244,240,230,.05); user-select:none; pointer-events:none;
  margin-top:clamp(8px,2vw,20px); transform:translateY(12%);
}
/* The word is drawn from data-word rather than sitting in the DOM as text: it is
   5%-opacity decoration (WCAG exempts that), but automated contrast checks can't
   tell and marked every page down for it. Looks identical either way. */
.foot-giant::before{content:attr(data-word)}

/* ============================================================
   HOME — signature sections (halves, menu, workbench, rules)
   ============================================================ */
/* Build / Keep split cards */
.halves-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.half{
  background:#FDFBF5; border:1.5px solid var(--stone-200); border-radius:16px;
  padding:clamp(30px,4vw,52px); position:relative; overflow:hidden; display:block;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.half:hover{transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(23,21,15,.25)}
.half h2{font-size:clamp(2rem,3.6vw,3.2rem); margin:14px 0 16px}
.half h2 .it{color:var(--moss-deep)}
.half p{color:var(--stone-700); max-width:44ch; margin:0 0 26px}
.half .go{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--brass-cta); padding-bottom:3px; transition:color .25s}
.half:hover .go{color:var(--moss-deep)}
.half--keep{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.half--keep .eyebrow{color:var(--brass-soft)}
.half--keep .eyebrow::before{background:var(--brass-soft)}
.half--keep h2{color:var(--paper)}
.half--keep h2 .it{color:var(--moss-bright)}
.half--keep p{color:var(--stone-300)}
.half--keep .go{color:var(--paper)}
.half--keep:hover .go{color:var(--brass-soft)}

/* Numbered service menu rows */
.menu-list{border-top:1.5px solid var(--stone-200); margin-top:8px}
.menu-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:baseline;
  padding:24px 8px; border-bottom:1.5px solid var(--stone-200);
  transition:background .25s, padding-left .3s var(--ease);
}
.menu-row:hover{background:rgba(255,255,255,.55); padding-left:18px}
.menu-row .num{font-family:var(--mono); font-size:13.5px; color:var(--brass-ink); font-weight:600}
.menu-row .name{font-family:var(--disp); font-weight:800; font-size:clamp(1.25rem,2.4vw,1.9rem); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink)}
.menu-row:hover .name::after{content:" →"; color:var(--moss)}
.menu-row .desc{font-size:.92rem; color:var(--stone-500); max-width:34ch; text-align:right}

/* Workbench — the free-tools band (deep moss, brass badges) */
.bench{background:var(--moss-dark); color:var(--paper); position:relative; overflow:hidden}
.bench::before{content:""; position:absolute; left:-10%; bottom:-40%; width:60%; height:100%;
  background:radial-gradient(closest-side, rgba(217,168,92,.13), transparent 70%); pointer-events:none}
.bench .wrap{position:relative; z-index:2}
.bench .eyebrow{color:var(--moss-bright)}
.bench .eyebrow::before{background:var(--moss-bright)}
.bench h2{color:var(--paper)}
.bench h2 .it{color:var(--brass-soft)}
.bench .lead{color:var(--stone-200)}
.bench-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px}
.bench-tool{
  background:rgba(23,21,15,.4); border:1px solid rgba(244,240,230,.12); border-radius:14px;
  padding:26px; display:block; transition:transform .3s var(--ease), border-color .3s;
}
.bench-tool:hover{transform:translateY(-4px); border-color:rgba(217,168,92,.5)}
.bench-tool .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.bench-tool .path{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--stone-300)}
.bench-tool .badge{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--ink); background:var(--brass-cta); border-radius:4px; padding:3px 8px}
.bench-tool h3{color:var(--paper); font-size:1.08rem; margin-bottom:8px}
.bench-tool p{font-size:.9rem; color:var(--stone-300); margin:0; line-height:1.55}
.bench-more{margin-top:36px; text-align:center}
.bench-more a{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); border-bottom:2px solid var(--brass-cta); padding-bottom:4px}
.bench-more a:hover{color:var(--brass-soft)}

/* The rules — numbered principles on ink */
.rules{background:var(--ink); color:var(--paper)}
.rules .eyebrow{color:var(--brass-soft)}
.rules .eyebrow::before{background:var(--brass-soft)}
.rules h2{color:var(--paper)}
.rules-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 60px; border-top:1px solid var(--stone-900); margin-top:50px}
.rule{display:flex; gap:24px; align-items:baseline; padding:24px 0; border-bottom:1px solid var(--stone-900)}
.rule .num{font-family:var(--mono); font-size:13.5px; color:var(--moss-bright); font-weight:600}
.rule .txt{font-family:var(--disp); font-weight:800; font-size:clamp(1.1rem,1.9vw,1.5rem); text-transform:uppercase; letter-spacing:0; color:var(--paper)}


@media (max-width:860px){
  .halves-grid{grid-template-columns:1fr}
  .bench-grid{grid-template-columns:1fr 1fr}
  .rules-grid{grid-template-columns:1fr}
  .foot-cta{flex-direction:column; align-items:flex-start}
}
@media (max-width:620px){
  .bench-grid{grid-template-columns:1fr}
  .menu-row{grid-template-columns:40px 1fr}
  .menu-row .desc{grid-column:2; text-align:left; max-width:none}
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }
/* Honour reduced-motion everywhere: neutralise transitions/animations site-wide
   (hovers, icon spins, process/scroll effects) without removing hover styling. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .phil-grid,.care-grid,.cta-grid,.faq-grid,.layout{grid-template-columns:1fr}
  .aside-card{position:static}
  .work-grid,.loc-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .plan.feat{transform:none}
  .plan.feat:hover{transform:translateY(-5px)}
  .care-list{columns:1}
  .care-aside{order:-1}
  .hero-meta{grid-template-columns:repeat(2,1fr); gap:30px 24px}
  .proc-step{grid-template-columns:60px 1fr; gap:14px 20px}
  .proc-step p{grid-column:2}
}
/* Narrow desktop header (2026-10-22). The full row (brand, seven menu items, "Start a project")
   needs about 1,240px once a Windows scrollbar takes its 15 to 17px, so from 1,041px up it ran
   past the screen edge (to 1,152px) or into the right margin (to 1,229px). The menu now folds
   into the menu button up to 1,140px (next block), and up to 1,259px the gaps and the button
   tighten so the row fits inside the margins. */
@media (min-width:1141px) and (max-width:1259px){
  .nav{gap:20px}
  .nav-links{gap:18px}
  .nav-cta .btn{padding:.8em 1.3em; font-size:.92rem}
  .nav-cta .btn .arrow{display:none}
}
@media (max-width:1140px){
  /* pages are hidden here, so drop the 3-column grid back to a simple
     brand-left / burger-right flex row (avoids the CTA squeezing on phones).
     1140, not 1040: see the narrow desktop note above. */
  .nav{display:flex; justify-content:space-between}
  .nav-links, .nav-phone{display:none}
  .burger{display:block}
  /* compact the CTA + brand so brand + button + burger sit comfortably on a phone */
  .nav-cta .btn{padding:.66em 1.05em; font-size:.92rem}
  .nav-cta .btn .arrow{display:none}
  .nav > .brand{font-size:1.28rem}
  .nav-menu-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; justify-self:stretch;
    position:absolute; top:84px; left:0; right:0;
    background:var(--ink); border-bottom:1px solid var(--stone-900); padding:24px var(--gut) 30px; gap:18px;
    box-shadow:0 20px 40px -24px rgba(0,0,0,.5); max-height:80vh; overflow:auto;
  }
  .nav-menu-open .nav-links > a, .nav-menu-open .nav-links .has-dropdown > .drop-trigger{font-size:1rem; padding:10px 0; width:100%}
  .nav-menu-open .has-dropdown{width:100%}
  /* Services becomes a real accordion: collapsed until its trigger is tapped
     (JS toggles .open + aria-expanded), so it no longer sits permanently open. */
  .nav-menu-open .dropdown{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0; min-width:0; background:transparent; display:none}
  .nav-menu-open .dropdown.open{display:block; padding:2px 0 6px}
  .nav-menu-open .dropdown a{padding:9px 0 9px 16px; border-left:2px solid var(--stone-900)}
  .nav-menu-open .dropdown a b{font-weight:450; color:var(--paper); font-size:.98rem}
  .nav-menu-open .dropdown a span{display:none}
  /* the Services caret flips to show expanded/collapsed state */
  .nav-menu-open .drop-trigger[aria-expanded="true"] .drop-caret{transform:rotate(180deg)}
  /* mobile: collapse the multi-column Industries & Locations mega-menus to just
     their trigger link (which goes to the /industries or /locations hub) */
  .nav-menu-open .dropdown--mega{display:none}
  .nav-menu-open a.drop-trigger .drop-caret{display:none}
}
@media (max-width:760px){
  .svc-grid{grid-template-columns:1fr}
  .work-grid,.loc-grid,.feature-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .foot-top{flex-direction:column}
  .form .field.two{grid-template-columns:1fr}
}
@media (max-width:430px){
  .hero-actions .btn, .page-hero .hero-actions .btn{width:100%; justify-content:center}
}
/* Phone header (2026-10-22): brand + "Start a project" + menu button need 393px at the
   sizes above, so on phones under ~414px the row ran past the screen edge and the menu
   button sat partly or fully off-screen (fully at 360px). Compact all three to fit. */
@media (max-width:460px){
  .nav{gap:10px}
  .nav > .brand{font-size:1.06rem; gap:.5em}
  .nav > .brand .mark{width:22px; height:26px}
  .nav-cta{gap:4px}
  .nav-cta .btn{padding:.56em .8em; font-size:.8rem; white-space:nowrap}
  .burger{width:36px; height:40px; padding:8px 4px}
}
/* Under 360px there is no room for all three: keep the brand and the menu. Every page
   still offers "Start a project" in its own buttons and in the footer. */
@media (max-width:359px){
  .nav-cta .btn{display:none}
}

/* ============================================================
   FREE TOOLS  (calculators, checkers & generators)
   Shared toolkit used by every /tools/* page. Built from the
   same tokens as the rest of the site so the tools feel native.
   ============================================================ */

/* --- Tools hub grid --- */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.tools-cat{margin-top:clamp(40px,6vw,72px)}
.tools-cat:first-of-type{margin-top:0}
.tools-cat > .eyebrow{display:inline-flex; margin-bottom:22px; line-height:inherit; text-wrap:wrap}
.tool-card{
  display:flex; flex-direction:column; gap:12px; border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; background:var(--paper); color:inherit; text-decoration:none;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.tool-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px -30px rgba(23,21,15,.4); border-color:var(--stone-300)}
.tool-card .tool-ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--paper-2); border:1px solid var(--line-soft); color:var(--moss-deep)}
.tool-card .tool-ic svg{width:22px; height:22px}
.tool-card h3{font-size:1.28rem; margin:0; letter-spacing:-.015em}
.tool-card p{margin:0; font-size:.93rem; color:var(--stone-600); line-height:1.55; flex:1}
.tool-card .more{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--moss-deep); display:inline-flex; gap:.5em; align-items:center}
.tool-card.soon{opacity:.6; pointer-events:none}
.tool-card .pill{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); border:1px solid var(--line); border-radius:100px; padding:3px 9px; align-self:flex-start}

/* --- Calculator / tool workspace --- */
.tk{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:start}
.tk-panel{display:flex; flex-direction:column; gap:26px}
.tk-field{display:flex; flex-direction:column; gap:12px}
.tk-field > .lab{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--stone-500); display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.tk-field > .lab .hint{text-transform:none; letter-spacing:0; color:var(--stone-500); font-family:var(--sans); font-size:.82rem}

/* segmented choice buttons */
.tk-seg{display:flex; flex-wrap:wrap; gap:8px}
.tk-seg button{
  font-family:var(--sans); font-size:.92rem; color:var(--stone-700); background:var(--paper);
  border:1px solid var(--line); border-radius:100px; padding:9px 16px; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.tk-seg button:hover{border-color:var(--stone-400)}
.tk-seg button.is-on{background:var(--moss-deep); border-color:var(--moss-deep); color:var(--paper)}
.tk-seg.grid{display:grid; grid-template-columns:repeat(2,1fr)}
.tk-seg.grid button{border-radius:11px; text-align:left; padding:13px 16px; line-height:1.35}
.tk-seg.grid button b{display:block; font-weight:500}
.tk-seg.grid button span{display:block; font-size:.8rem; color:var(--stone-500)}
.tk-seg.grid button.is-on span{color:var(--stone-200)}

/* checkbox option rows (feature pickers, checklists) */
.tk-opts{display:flex; flex-direction:column; gap:10px}
.tk-opt{
  display:flex; align-items:flex-start; gap:13px; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; cursor:pointer; transition:border-color .2s, background .2s; background:var(--paper);
}
.tk-opt:hover{border-color:var(--stone-400)}
.tk-opt input{position:absolute; opacity:0; width:0; height:0}
.tk-opt .box{flex:none; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--stone-400); display:grid; place-items:center; margin-top:1px; transition:background .2s, border-color .2s}
.tk-opt .box svg{width:14px; height:14px; color:#fff; opacity:0; transition:opacity .15s}
.tk-opt input:checked ~ .box{background:var(--moss-deep); border-color:var(--moss-deep)}
.tk-opt input:checked ~ .box svg{opacity:1}
.tk-opt input:focus-visible ~ .box{outline:2px solid var(--moss); outline-offset:2px}
.tk-opt .txt b{font-weight:500; font-size:.98rem; display:block}
.tk-opt .txt span{font-size:.85rem; color:var(--stone-500); display:block; margin-top:2px}
.tk-opt .txt .amt{font-family:var(--mono); font-size:.82rem; color:var(--stone-500)}
.tk-opt.on-brand input:checked ~ .box{background:var(--moss-deep)}

/* sliders */
.tk-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px; background:var(--line); outline:none}
.tk-range:focus-visible{outline:2px solid var(--moss); outline-offset:4px}
.tk-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--moss-deep); border:3px solid var(--paper); box-shadow:0 2px 8px -1px rgba(23,21,15,.4); cursor:pointer}
.tk-range::-moz-range-thumb{width:22px; height:22px; border:3px solid var(--paper); border-radius:50%; background:var(--moss-deep); box-shadow:0 2px 8px -1px rgba(23,21,15,.4); cursor:pointer}
.tk-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--moss); outline-offset:2px}
.tk-rangeval{font-family:var(--disp); font-weight:800; font-size:1.45rem; color:var(--ink); line-height:1}
.tk-rangeval small{font-family:var(--mono); font-size:.8rem; color:var(--stone-500)}

/* plain inputs (numbers, text, hex) */
.tk-input, .tk-select{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; width:100%;
  transition:border-color .25s, box-shadow .25s;
}
.tk-input:focus, .tk-select:focus{outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(110,127,78,.14)}
.tk-inputwrap{position:relative; display:flex; align-items:center}
.tk-inputwrap .pre, .tk-inputwrap .post{position:absolute; font-family:var(--mono); font-size:.9rem; color:var(--stone-500); pointer-events:none}
.tk-inputwrap .pre{left:15px}
.tk-inputwrap .pre ~ .tk-input{padding-left:30px}
.tk-inputwrap .post{right:15px}

/* --- Output panel (dark, sticky) --- */
.tk-out{
  background:var(--ink); color:var(--paper); border-radius:var(--r); padding:clamp(28px,3.4vw,42px);
  position:sticky; top:96px; overflow:hidden;
}
.tk-out::after{content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0, rgba(110,127,78,.22), transparent 60%); pointer-events:none}
.tk-out > *{position:relative; z-index:2}
.tk-out .oe{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft)}
.tk-out .big{font-family:var(--disp); font-weight:900; font-size:clamp(2.5rem,5vw,3.5rem); line-height:1; color:var(--paper); margin:14px 0 0; letter-spacing:-.02em}
.tk-out .big small{font-family:var(--mono); font-size:.9rem; color:var(--stone-400); letter-spacing:.03em}
.tk-out .osub{color:var(--stone-300); font-size:.95rem; margin:10px 0 0}
.tk-out .odiv{height:1px; background:var(--stone-900); margin:24px 0}
.tk-rows{display:flex; flex-direction:column; gap:14px}
.tk-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:.94rem}
.tk-row .k{color:var(--stone-300)}
.tk-row .v{font-family:var(--mono); color:var(--paper); font-size:.95rem; text-align:right}
.tk-row.big-row .v{font-family:var(--disp); font-weight:800; font-size:1.25rem}
.tk-row .k small{display:block; font-family:var(--sans); color:var(--stone-400); font-size:.8rem; letter-spacing:0; text-transform:none; margin-top:2px}
/* A value that links somewhere (the cost calculator's 12-month term row). */
.tk-row .v a{color:var(--moss-bright); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.tk-row .v a:hover{color:var(--paper)}
.tk-out .btn{width:100%; justify-content:center; margin-top:26px}
.tk-out .foot{font-size:.82rem; color:var(--stone-400); margin:16px 0 0; text-align:center}

/* stacked bar comparison (WP vs custom, etc.) */
.tk-bars{display:flex; flex-direction:column; gap:18px; margin-top:4px}
.tk-bar .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-size:.9rem; color:var(--stone-300)}
.tk-bar .top b{font-family:var(--disp); font-size:1.05rem; color:var(--paper); font-weight:700}
.tk-bar .track{height:12px; border-radius:100px; background:var(--stone-900); overflow:hidden}
.tk-bar .fill{height:100%; border-radius:100px; background:var(--stone-500); transition:width .5s var(--ease)}
.tk-bar.us .fill{background:linear-gradient(90deg,var(--moss),var(--moss-bright))}
.tk-bar.them .fill{background:linear-gradient(90deg,var(--brass),var(--brass-soft))}

/* --- Speed test gauge --- */
.tk-gauge{display:grid; place-items:center; text-align:center}
.tk-ring{
  --v:0; --c:var(--stone-500);
  width:190px; height:190px; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--v)*1%), var(--stone-900) 0);
  display:grid; place-items:center; position:relative; transition:background .7s var(--ease);
}
.tk-ring::before{content:""; position:absolute; inset:14px; border-radius:50%; background:var(--ink)}
.tk-ring .n{position:relative; font-family:var(--disp); font-weight:900; font-size:3.2rem; line-height:1; color:var(--paper)}
.tk-ring .lab{position:relative; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-400); margin-top:4px}
.g-good{--c:var(--moss-bright) !important}
.g-avg{--c:var(--brass-soft) !important}
.g-poor{--c:#c9603f !important}
.tk-score-cap{font-family:var(--disp); font-weight:700; font-size:1.35rem; margin-top:20px; color:var(--paper)}
.tk-metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px}
.tk-metric{border:1px solid var(--stone-900); border-radius:11px; padding:14px 16px}
.tk-metric .k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-400)}
.tk-metric .v{font-family:var(--disp); font-weight:800; font-size:1.4rem; color:var(--paper); margin-top:4px; line-height:1}
.tk-metric .v.good{color:var(--moss-bright)} .tk-metric .v.avg{color:var(--brass-soft)} .tk-metric .v.poor{color:#d1795a}
.tk-loading{display:flex; align-items:center; gap:12px; color:var(--stone-300); font-size:.95rem}
.tk-spin{width:20px; height:20px; border:2px solid var(--stone-700); border-top-color:var(--moss-bright); border-radius:50%; animation:tkspin 1s linear infinite}
@keyframes tkspin{to{transform:rotate(360deg)}}
.tk-err{color:#d1795a; font-size:.92rem; line-height:1.5}

/* --- SERP preview --- */
.serp{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; max-width:600px}
.serp .fav{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.serp .fav .dot{width:26px; height:26px; border-radius:50%; background:#f1f3f4; display:grid; place-items:center; color:#5f6368; font-family:var(--serif); font-size:.9rem}
.serp .fav .site{font-size:.82rem; color:#202124; line-height:1.2}
.serp .fav .site .u{color:#5f6368; font-size:.75rem}
.serp .s-title{color:#1a0dab; font-size:1.25rem; line-height:1.3; margin:2px 0 3px; font-family:arial,sans-serif; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.serp .s-desc{color:#4d5156; font-size:.87rem; line-height:1.58; font-family:arial,sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.serp.mob{max-width:400px}
.serp.mob .s-title{font-size:1.1rem}
.len-row{display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--stone-500); margin-top:8px}
.len-chip{padding:3px 10px; border-radius:100px; border:1px solid var(--line)}
.len-chip.ok{color:var(--moss-deep); border-color:rgba(110,127,78,.4); background:rgba(110,127,78,.08)}
.len-chip.warn{color:#9a3b2e; border-color:rgba(154,59,46,.35); background:rgba(154,59,46,.07)}

/* --- Contrast checker --- */
.cc-preview{border-radius:var(--r); padding:38px 32px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); transition:background .2s, color .2s}
.cc-preview .big{font-family:var(--disp); font-weight:800; font-size:1.9rem; line-height:1.15}
.cc-preview .small{font-size:.95rem}
.cc-swatch{display:flex; gap:14px; align-items:center}
.cc-color{display:flex; align-items:center; gap:10px}
.cc-color input[type=color]{-webkit-appearance:none; appearance:none; width:46px; height:46px; border:1px solid var(--line); border-radius:10px; padding:0; background:none; cursor:pointer}
.cc-color input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.cc-color input[type=color]::-webkit-color-swatch{border:none; border-radius:7px}
.cc-ratio{font-family:var(--disp); font-weight:900; font-size:clamp(2.5rem,5.8vw,3.4rem); line-height:1; color:var(--paper)}
.cc-ratio small{font-family:var(--mono); font-size:.9rem; color:var(--stone-400)}
.cc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:22px}
.cc-cell{border:1px solid var(--stone-900); border-radius:11px; padding:13px 15px; display:flex; justify-content:space-between; align-items:center}
.cc-cell .k{font-size:.85rem; color:var(--stone-300)}
.cc-cell .b{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:100px}
.cc-cell .b.pass{color:#062915; background:var(--moss-bright)}
.cc-cell .b.fail{color:#fff; background:#9a3b2e}

/* --- Business name generator --- */
.bng-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.bng-name{
  display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--stone-900);
  border-radius:11px; padding:15px 18px; background:rgba(244,240,230,.03);
}
.bng-name .nm{font-family:var(--disp); font-weight:700; font-size:1.1rem; color:var(--paper); line-height:1.15}
.bng-copy{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-400); background:none; border:1px solid var(--stone-700); border-radius:100px; padding:5px 11px; cursor:pointer; transition:color .2s, border-color .2s; flex:none}
.bng-copy:hover{color:var(--moss-bright); border-color:var(--moss)}
.bng-copy.done{color:var(--moss-bright); border-color:var(--moss)}

/* --- scorecard result --- */
.tk-verdict{font-family:var(--disp); font-weight:800; font-size:1.75rem; line-height:1.12; color:var(--paper); margin:14px 0 0}
.tk-reco{display:flex; flex-direction:column; gap:11px; margin-top:6px}
.tk-reco li{display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--stone-200); list-style:none}
.tk-reco li svg{flex:none; margin-top:3px; color:var(--brass-soft); width:16px; height:16px}

/* shared small print / assumptions */
.tk-note{font-size:.86rem; color:var(--stone-500); line-height:1.55; margin-top:6px}
.tk-assume{border:1px solid var(--line); border-radius:12px; background:var(--paper-2); padding:2px 20px; margin-top:8px}
.tk-assume summary{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone-600); padding:16px 0}
.tk-assume[open] summary{color:var(--ink)}
.tk-assume .body{padding:0 0 18px; font-size:.9rem; color:var(--stone-600); line-height:1.6}
.tk-assume .body p{margin:0 0 .7em}
.tk-disclaimer{border-top:1px solid var(--line); margin-top:clamp(40px,6vw,64px); padding-top:26px; font-size:.86rem; color:var(--stone-500); max-width:70ch; line-height:1.6}

@media (max-width:900px){
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .tk{grid-template-columns:1fr; gap:32px}
  .tk-out{position:static}
  .cc-grid, .tk-metrics{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tools-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .tk-seg.grid{grid-template-columns:1fr}
}

/* ---- Tools: image optimizer, Open Graph generator, on-page checker ---- */
.io-drop{display:flex;align-items:center;justify-content:center;border:2px dashed var(--brass-soft);border-radius:14px;padding:34px 20px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;background:var(--paper)}
.io-drop.is-over,.io-drop:hover{border-color:var(--moss);background:var(--paper-2)}
.io-dropinner{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.io-dropinner svg{width:34px;height:34px;color:var(--brass);stroke-width:1.4}
.io-dropinner b{font-size:1.02rem}
.io-dropinner span{color:var(--muted);font-size:.9rem}
.io-prevwrap{margin-top:14px;text-align:center;background:var(--paper-2);border-radius:12px;padding:14px}
.io-prev{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.og-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;max-width:420px;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.og-card .og-img{width:100%;aspect-ratio:1.91/1;object-fit:cover;background:#e7e2d6;display:block}
.og-card .og-noimg{width:100%;aspect-ratio:1.91/1;display:flex;align-items:center;justify-content:center;background:#e7e2d6;color:#9a917d;font-size:.85rem}
.og-card .og-meta{padding:11px 14px}
.og-card .og-dom{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#8a8a8a}
.og-card .og-t{font-size:.98rem;font-weight:600;color:#1d2129;margin:3px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.og-card .og-d{font-size:.86rem;color:#606770;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.op-row{display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-top:1px solid var(--line-soft)}
.op-badge{flex:none;width:56px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 0;text-align:center;border-radius:6px;margin-top:1px}
.op-badge.pass{background:rgba(110,127,78,.16);color:var(--moss-deep)}
.op-badge.warn{background:rgba(201,168,119,.24);color:#6d4f16}
.op-badge.fail{background:rgba(178,58,58,.13);color:#a23b3b}
.op-body b{display:block;font-size:.93rem}
.op-body span{font-size:.85rem;color:var(--muted)}
.op-tree{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;line-height:1.7;white-space:pre-wrap;margin-top:6px}

/* ---- On-site chat assistant widget ---- */
.sk-chat{position:fixed;right:20px;bottom:20px;z-index:110}
.sk-fab{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);border:0;border-radius:100px;padding:12px 20px 12px 14px;cursor:pointer;font:inherit;font-size:.95rem;font-weight:500;box-shadow:0 10px 26px rgba(23,21,15,.28);transition:transform .16s,box-shadow .16s}
.sk-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(23,21,15,.32)}
.sk-fab .mk{width:22px;height:25px;flex:none;display:block}
.sk-fab .fab-dot{width:8px;height:8px;border-radius:50%;background:#8DBF6A;box-shadow:0 0 0 3px rgba(141,191,106,.28)}
.sk-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(390px,calc(100vw - 40px));height:min(600px,calc(100vh - 120px));background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 64px rgba(23,21,15,.30);display:flex;flex-direction:column;overflow:hidden;animation:skchat-in .18s ease}
.sk-panel[hidden]{display:none}
@keyframes skchat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:var(--ink);color:var(--paper);border-bottom:2px solid var(--brass)}
.sk-ident{display:flex;align-items:center;gap:11px;min-width:0}
.sk-avatar{width:40px;height:40px;flex:none;border-radius:12px;background:#211d15;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(201,168,119,.35)}
.sk-avatar .mk{width:21px;height:24px}
.sk-headtext{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sk-title{font-family:var(--disp);font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sk-status{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#c7bfad;margin-top:2px}
.sk-status .live{width:7px;height:7px;border-radius:50%;background:#8DBF6A;flex:none;box-shadow:0 0 0 2px rgba(141,191,106,.25)}
.sk-x{flex:none;width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:#c7bfad;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.sk-x:hover{background:rgba(255,255,255,.08);color:var(--paper)}
.sk-x svg{width:18px;height:18px}
.sk-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.sk-row{display:flex;gap:9px;align-items:flex-end;max-width:100%}
.sk-row.user{justify-content:flex-end}
.sk-mini{width:26px;height:26px;flex:none;border-radius:8px;background:var(--ink);display:grid;place-items:center;margin-bottom:2px}
.sk-mini .mk{width:14px;height:16px}
.sk-bubble{padding:11px 14px;border-radius:16px;line-height:1.5;font-size:.94rem;max-width:82%;word-wrap:break-word;overflow-wrap:anywhere}
.sk-bubble.bot{background:var(--paper-2);color:var(--ink);border-bottom-left-radius:5px}
.sk-bubble.user{background:var(--moss-deep);color:#fff;border-bottom-right-radius:5px}
.sk-bubble.err{background:#f6e6e6;color:#8a3b3b}
.sk-bubble.bot a{color:var(--moss-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.sk-bubble p{margin:0 0 8px}
.sk-bubble p:last-child{margin-bottom:0}
.sk-bubble ul,.sk-bubble ol{margin:7px 0 3px;padding-left:18px}
.sk-bubble li{margin:4px 0}
.sk-bubble strong{font-weight:600}
.sk-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 2px 35px}
.sk-chip{font:inherit;font-size:.85rem;background:transparent;color:var(--moss-deep);border:1px solid var(--line);border-radius:100px;padding:7px 13px;cursor:pointer;transition:border-color .15s,background .15s}
.sk-chip:hover{border-color:var(--moss);background:rgba(110,127,78,.08)}
.sk-typing{display:inline-flex;gap:4px;padding:13px 15px;background:var(--paper-2);border-radius:16px;border-bottom-left-radius:5px}
.sk-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:skblink 1.2s infinite}
.sk-typing i:nth-child(2){animation-delay:.2s}
.sk-typing i:nth-child(3){animation-delay:.4s}
@keyframes skblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.sk-input{display:flex;align-items:flex-end;gap:9px;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.sk-input textarea{flex:1;resize:none;max-height:120px;min-height:44px;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;font-size:.94rem;background:#fff;color:var(--ink);line-height:1.4}
.sk-input textarea::placeholder{color:#9b917d}
.sk-input textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(110,127,78,.16)}
.sk-send{flex:none;width:44px;height:44px;border-radius:13px;border:0;background:var(--moss-deep);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .1s}
.sk-send:hover{background:#454f30}
.sk-send:active{transform:scale(.94)}
.sk-send:disabled{opacity:.5;cursor:default}
.sk-send svg{width:19px;height:19px}
.sk-foot{margin:0;padding:0 14px 11px;font-size:.7rem;color:var(--muted);text-align:center;background:var(--paper)}
.sk-foot a{color:var(--muted);text-decoration:underline}
@media (max-width:520px){.sk-chat{right:12px;bottom:12px}.sk-panel{width:calc(100vw - 24px);height:min(76vh,600px)}.sk-fab{padding:13px}}
@media (prefers-reduced-motion:reduce){.sk-panel{animation:none}.sk-typing i{animation:none}.sk-fab{transition:none}.sk-send{transition:none}}

/* ============================================================
   PORTED FROM THE 2026 REFRESH LAYER
   The pieces of the old refresh worth keeping under the new
   design: a11y focus rings, motion honesty, the proof band
   (figures counted from the profile at build time), and
   always-visible links in prose.
   ============================================================ */
:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:6px}

@media (prefers-reduced-motion: reduce){
  .svc:hover, .feature:hover, .btn:hover, .half:hover, .bench-tool:hover{transform:none}
}

@media (max-width: 860px){
  .svc-grid{grid-template-columns:1fr}
}

/* Proof band — live counts, restyled for the new type system */
.proof{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:52px; padding-top:34px;
  border-top:1.5px solid var(--stone-200);
}
.proof-item{padding-right:22px}
.proof-item .n{
  display:block; font-family:var(--disp); font-weight:900; font-size:clamp(2.2rem,3.6vw,3.1rem);
  line-height:1; letter-spacing:-.02em; color:var(--ink);
}
.proof-item .l{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:.7rem; line-height:1.7; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--stone-500);
}
@media (max-width: 640px){
  .proof{grid-template-columns:1fr; row-gap:28px}
}

/* Bare links in prose stay visibly links (WCAG 1.4.1) */
.prose a:not(.btn):not(.link-arrow),
.answer a:not(.btn):not(.link-arrow){
  color:var(--moss-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--moss) 42%, transparent);
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.prose a:not(.btn):not(.link-arrow):hover,
.answer a:not(.btn):not(.link-arrow):hover{
  color:var(--ink);
  text-decoration-color:var(--moss);
}


/* ==========================================================================
   Utility classes (generated — see the note below before editing)
   ==========================================================================
   These replace the ~1,300 inline style="..." attributes the generated pages
   used to carry. Inline style attributes are exactly what a Content-Security-
   Policy without 'unsafe-inline' forbids, so they had to become real classes
   for the CSP in _headers to be worth having.

   Every declaration carries !important on purpose. An inline style beats any
   selector, so these have to as well, or a rule like `.card p{margin-top:0}`
   would silently win where the inline style used to. That also means a script
   cannot override one of these by writing element.style.* — the two places
   that need to (the favicon tool's upload panel, the speed-test gauge, the
   3-year cost bars) use .u-hidden or the CSSOM instead. Follow that pattern
   rather than adding an !important-free variant here.

   The class names are derived from the declarations, so they read as what they
   do. Add new ones only for values that are genuinely one-off page furniture;
   anything reused belongs in a real semantic class further up this file.
   ========================================================================== */
.u-align-items-start{align-items:start !important}
.u-align-self-flex-start{align-self:flex-start !important}
.u-background-fff-border-radius-12px-padding-22px-margi{background:#fff !important; border-radius:12px !important; padding:22px !important; margin-top:12px !important}
.u-background-paper-2{background:var(--paper-2) !important}
.u-background-stone-900-scroll-margin-top-100px{background:var(--stone-900) !important; scroll-margin-top:100px !important}
.u-border-radius-10px-background-fff-box-shadow-0-2px-1{border-radius:10px !important; background:#fff !important; box-shadow:0 2px 14px rgba(0,0,0,.08) !important}
.u-border-radius-8px-box-shadow-0-2px-12px-rgba-0-0-0-1{border-radius:8px !important; box-shadow:0 2px 12px rgba(0,0,0,.12) !important}
.u-color-brass-soft{color:var(--brass-soft) !important}
.u-color-moss-bright{color:var(--moss-bright) !important}
.u-color-muted{color:var(--muted) !important}
.u-color-negative{color:#d1795a !important}
.u-color-paper{color:var(--paper) !important}
.u-color-stone-300{color:var(--stone-300) !important}
.u-columns-1{columns:1 !important}
.u-display-block-border-radius-r-border-1px-solid-line{display:block !important; border-radius:var(--r) !important; border:1px solid var(--line) !important}
.u-display-flex-align-items-center-gap-10px-margin-5px{display:flex !important; align-items:center !important; gap:10px !important; margin:5px 0 !important; flex-wrap:wrap !important}
.u-display-flex-align-items-center-gap-8px-min-width-13{display:flex !important; align-items:center !important; gap:8px !important; min-width:135px !important; cursor:pointer !important}
.u-display-flex-align-items-flex-end-gap-18px-margin-14{display:flex !important; align-items:flex-end !important; gap:18px !important; margin:14px 0 4px !important; flex-wrap:wrap !important}
.u-display-flex-gap-10px-flex-wrap-wrap-align-items-cen{display:flex !important; gap:10px !important; flex-wrap:wrap !important; align-items:center !important; margin-top:8px !important}
.u-display-flex-gap-10px-flex-wrap-wrap-margin-top-10px{display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-top:10px !important}
.u-display-flex-gap-10px-flex-wrap-wrap-margin-top-14px{display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-top:14px !important}
.u-display-flex-gap-20px-flex-wrap-wrap-align-items-fle{display:flex !important; gap:20px !important; flex-wrap:wrap !important; align-items:flex-start !important; margin-top:22px !important}
.u-display-inline{display:inline !important}
.u-display-none{display:none !important}
.u-flex-1-min-width-200px{flex:1 !important; min-width:200px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-fon-2{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; font-size:.8rem !important; line-height:1.55 !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-fon{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; font-size:.8rem !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-2{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; white-space:pre !important; font-size:.76rem !important; line-height:1.5 !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-3{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; white-space:pre !important; font-size:.78rem !important; line-height:1.55 !important; margin-top:10px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-4{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; white-space:pre !important; font-size:.78rem !important; line-height:1.55 !important; min-height:300px !important; resize:vertical !important; margin-top:10px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-5{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; white-space:pre !important; font-size:.8rem !important; line-height:1.55 !important; margin-top:10px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-6{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; white-space:pre !important; font-size:.8rem !important; line-height:1.55 !important; margin-top:8px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-7{font-family:\\'IBM Plex Mono\\',ui-monospace,monospace !important; white-space:pre-wrap !important; font-size:.8rem !important; line-height:1.55 !important; margin-top:10px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi-8{font-family:\\'IBM Plex Mono\\',ui-monospace,monospace !important; white-space:pre !important; font-size:.78rem !important; line-height:1.55 !important; margin-top:10px !important}
.u-font-family-ibm-plex-mono-ui-monospace-monospace-whi{font-family:\'IBM Plex Mono\',ui-monospace,monospace !important; white-space:pre-wrap !important; word-break:break-all !important; font-size:.82rem !important; line-height:1.6 !important; margin-top:10px !important}
.u-font-size-1-05rem{font-size:1.05rem !important}
.u-font-size-1-35rem-line-height-1-45-margin-24px-0{font-size:1.35rem !important; line-height:1.45 !important; margin:24px 0 !important}
.u-font-size-1-3rem{font-size:1.3rem !important}
.u-font-size-82rem-line-height-1-6-white-space-pre-wrap{font-size:.82rem !important; line-height:1.6 !important; white-space:pre-wrap !important; margin-top:10px !important}
.u-font-size-9rem{font-size:.9rem !important}
.u-font-size-clamp-2-1rem-4-4vw-3-1rem{font-size:clamp(2.1rem,4.4vw,3.1rem) !important}
.u-hidden{display:none}
.u-margin-0-0-12px{margin:0 0 12px !important}
.u-margin-0-0-14px{margin:0 0 14px !important}
.u-margin-0-0-6px{margin:0 0 6px !important}
.u-margin-0-0-8px{margin:0 0 -8px !important}
.u-margin-0-align-self-center{margin:0 !important; align-self:center !important}
.u-margin-0{margin:0 !important}
.u-margin-14px-0-0-font-size-82rem-color-muted{margin:14px 0 0 !important; font-size:.82rem !important; color:var(--stone-600) !important}
.u-margin-14px-0-0{margin:14px 0 0 !important}
.u-margin-16px-0-24px{margin:16px 0 24px !important}
.u-margin-16px-0-6px{margin:16px 0 6px !important}
.u-margin-2px-0-14px{margin:2px 0 14px !important}
.u-margin-bottom-20px{margin-bottom:20px !important}
.u-margin-bottom-22px{margin-bottom:22px !important}
.u-margin-bottom-24px{margin-bottom:24px !important}
.u-margin-top-10px-width-100-justify-content-center-col{margin-top:10px !important; width:100% !important; justify-content:center !important; color:var(--paper) !important; border-color:rgba(244,240,230,.3) !important}
.u-margin-top-10px{margin-top:10px !important}
.u-margin-top-12px{margin-top:12px !important}
.u-margin-top-14px-width-100-justify-content-center{margin-top:14px !important; width:100% !important; justify-content:center !important}
.u-margin-top-14px{margin-top:14px !important}
.u-margin-top-16px-display-block{margin-top:16px !important; display:block !important}
.u-margin-top-16px{margin-top:16px !important}
.u-margin-top-18px-color-paper{margin-top:18px !important; color:var(--paper) !important}
.u-margin-top-18px-display-block{margin-top:18px !important; display:block !important}
.u-margin-top-18px-display-inline-flex{margin-top:18px !important; display:inline-flex !important}
.u-margin-top-18px{margin-top:18px !important}
.u-margin-top-20px{margin-top:20px !important}
.u-margin-top-22px{margin-top:22px !important}
.u-margin-top-24px{margin-top:24px !important}
.u-margin-top-26px{margin-top:26px !important}
.u-margin-top-2px-2{margin-top:2px !important}
.u-margin-top-2px{margin-top:-2px !important}
.u-margin-top-30px-text-align-center{margin-top:30px !important; text-align:center !important}
.u-margin-top-6px-background-none-border-0-color-muted{margin-top:6px !important; background:none !important; border:0 !important; color:var(--muted) !important; font-size:.82rem !important; cursor:pointer !important; padding:2px 0 !important}
.u-margin-top-8px-resize-vertical{margin-top:8px !important; resize:vertical !important}
.u-margin-top-8px{margin-top:8px !important}
.u-max-width-118px{max-width:118px !important}
.u-max-width-130px{max-width:130px !important}
.u-max-width-640px{max-width:640px !important}
.u-max-width-72ch{max-width:72ch !important}
.u-max-width-none{max-width:none !important}
.u-padding-20px{padding:20px !important}
.u-padding-block-clamp-36px-5vw-64px{padding-block:clamp(36px,5vw,64px) !important}
.u-padding-left-30px{padding-left:30px !important}
.u-padding-top-clamp-48px-7vw-88px{padding-top:clamp(48px,7vw,88px) !important}
.u-position-static-margin-top-30px{position:static !important; margin-top:30px !important}
.u-resize-vertical{resize:vertical !important}
.u-text-align-center{text-align:center !important}
.u-text-align-left-margin-top-14px{text-align:left !important; margin-top:14px !important}
.u-text-align-left-margin-top-16px{text-align:left !important; margin-top:16px !important}
.u-text-align-left-margin-top-18px{text-align:left !important; margin-top:18px !important}
.u-text-align-left-margin-top-20px{text-align:left !important; margin-top:20px !important}
.u-text-align-left{text-align:left !important}
.u-white-space-nowrap{white-space:nowrap !important}
.u-width-64px-height-40px-padding-2px-border-radius-8px{width:64px !important; height:40px !important; padding:2px !important; border-radius:8px !important; border:1px solid var(--line) !important; cursor:pointer !important}
.u-sr-only{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important}
/* Failsafe for .reveal: site.js adds html.js-reveal once its observer is live.
   If the script never runs (blocked, failed to load, threw), content fades in
   on its own instead of staying at opacity 0. */
html:not(.js-reveal) .reveal{animation:sk-reveal-failsafe .6s var(--ease) 4s forwards}
@keyframes sk-reveal-failsafe{to{opacity:1; transform:none}}
/* Speed test: the failing Lighthouse audits, listed under the scores. */
.tk-fixes{margin:10px 0 0; padding-left:18px; color:var(--stone-300); font-size:.9rem; line-height:1.5}
.tk-fixes li{margin:7px 0}
.tk-fixes b{color:var(--paper); font-weight:500}
.tk-save{color:var(--moss-bright); font-family:var(--mono); font-size:.78rem; white-space:nowrap}
/* A link-arrow used mid-sentence has to stand apart from the words around it by
   more than color (WCAG 1.4.1): moss-deep against stone-700 body text is barely
   1.1:1. Same quiet underline the plain .prose links already use. */
.link-arrow.u-display-inline{border-bottom:0; padding-bottom:0; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}
.link-arrow.u-display-inline:hover{text-decoration-color:currentColor}

/* Guess mode: the homepage personalization _worker.js adds at the edge (see the
   pz* functions there). Its town or industry card moves to the front of its grid
   with a badge; a town card added in front hides the grid's last card so the
   grid keeps its shape. The preview-only panel and outlines live in the worker's
   /__pz/pz.css, which only preview deploys load. */
.pz-yours{order:-1; position:relative}
.pz-yours::before{content:attr(data-pz-badge); position:absolute; top:12px; right:12px; z-index:3; pointer-events:none; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--brass-cta); border-radius:100px; padding:4px 11px}
.loc-card.pz-yours{background:#FAF7EF}
.pz-hidden{display:none !important}
/* "What brings you here?": four answers under the hero buttons, then three
   "Start here" links once one is chosen. */
.pz-ask{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:26px; scroll-margin-top:calc(var(--head-h) + 140px)}
.pz-ask__q{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--moss-bright); margin-right:4px}
.pz-ask__opt{font-size:.86rem; font-weight:500; color:var(--paper); border:1px solid rgba(244,240,230,.26); border-radius:100px; padding:7px 14px; transition:border-color .25s, background .25s}
.pz-ask__opt:hover{border-color:var(--brass-soft)}
.pz-ask__opt[aria-current]{background:var(--brass-cta); border-color:var(--brass-cta); color:var(--ink)}
.pz-ask__clear{font-size:.82rem; color:var(--stone-400); text-decoration:underline; text-underline-offset:3px}
.pz-ask__clear:hover{color:var(--paper)}
.pz-go{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin:14px 0 0; font-size:.92rem}
.pz-go__k{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft)}
.pz-go a{color:var(--paper); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(244,240,230,.4)}
.pz-go a:hover{text-decoration-color:var(--brass-soft)}