/* ============================================================
   SOLOMON WATSON — territory map system
   Shared by the homepage and every specialty page.
   Map paper ground, flat state-fill tints as section fields,
   red kept for the visitor's own territory and pin heads.
   ============================================================ */

:root {
  --paper: #EEF1EA;
  --paper-2: #E2E7DC;
  --ink: #13201B;
  --ink-2: #3D4B44;
  --ink-3: #5A6861;
  --rule: rgba(19, 32, 27, .2);
  --rule-strong: rgba(19, 32, 27, .55);

  /* state-fill tints: map fills, also whole-section fields */
  --ochre: #E8C468;
  --ochre-l: #F1DDA0;
  --sage: #A9C9A4;
  --sage-l: #CADDC4;
  --sky: #9EC3DD;
  --sky-l: #C6DBEA;
  --rose: #E9AFA3;
  --rose-l: #F1CDC4;

  --pin: #D42A1F;
  --pin-ink: #B01F16;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Public Sans", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --sec: clamp(72px, 10vw, 136px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--ochre); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
.field-ink :focus-visible, .foot :focus-visible { outline-color: var(--ochre); }
html { scrollbar-color: var(--ink-3) var(--paper-2); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
p { margin: 0; text-wrap: pretty; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

.ico { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.4em;
  background: var(--ink); color: var(--paper);
  font: 600 1.15rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s;
}
.btn::after {
  content: ""; width: .9em; height: .9em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='2'/%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 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.btn:hover { background: #24362E; text-decoration: none; }
.btn:hover::after { transform: translateX(3px); }
.btn:active { background: #0C1511; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-sm { min-height: 42px; font-size: 1rem; padding: 0 1.1em; }
.btn-block { width: 100%; }
.field-ink .btn, .foot .btn { background: var(--paper); color: var(--ink); }
.field-ink .btn:hover, .dock .btn:hover { background: var(--ochre-l); }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.bar-in { max-width: calc(var(--wrap) + 160px); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.35rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.brand img { width: 32px; height: 32px; }
.brand-inv img { filter: invert(1); }
.bar-nav { display: flex; gap: 26px; margin-left: auto; }
.bar-nav a, .bar-tel { font: 600 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.bar-nav a:hover, .bar-tel:hover { color: var(--ink); text-decoration: underline; }
.bar-tel { font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .bar-nav { display: none; } .bar-tel { margin-left: auto; } }
@media (max-width: 560px) { .bar-tel { display: none; } .bar .btn-sm { margin-left: auto; } .brand span { font-size: 1.15rem; } }

/* ---------- hero ---------- */
.hero { padding: clamp(28px, 4vw, 56px) 0 0; overflow: hidden; }
.hero-in {
  max-width: calc(var(--wrap) + 160px); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: center;
}
.hero h1 { font-size: clamp(3.2rem, 6.4vw, 6rem); line-height: .9; letter-spacing: -.015em; min-height: 2.7em; }
@media (max-width: 1080px) { .hero h1 { min-height: 0; } }
.hero h1 .terr { color: var(--pin); white-space: nowrap; }
.hero h1 .terr.is-default { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pin); text-decoration-thickness: .07em; text-underline-offset: .1em; }
.lede { margin-top: 22px; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 34ch; }

.picker { margin-top: 30px; }
.picker label { display: block; font: 600 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.picker-row { display: flex; gap: 10px; flex-wrap: wrap; }
.picker-row .select { flex: 1 1 210px; }
.picker-row .btn { flex: 0 0 auto; }
.picker-hint { margin-top: 10px; font-size: .9rem; color: var(--ink-3); }

.select { position: relative; display: block; }
.select select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 52px;
  padding: 0 44px 0 14px; border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--paper); color: var(--ink); font: 500 1.05rem/1.2 var(--body); cursor: pointer;
}
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 12px; height: 8px; margin-top: -4px; pointer-events: none;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='black' stroke-width='2'/%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 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.proof { list-style: none; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; font-size: .97rem; color: var(--ink-2); }
.proof li { display: flex; gap: 10px; align-items: baseline; }
.proof .ico { transform: translateY(2px); color: var(--ink); }
.proof strong { color: var(--ink); font-weight: 600; }

/* ---------- the map ---------- */
.map { position: relative; margin: 0; }
.map-title {
  position: absolute; top: 2%; right: 1%; text-align: right; z-index: 1;
  font: 700 1.1rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
}
.map-title span { display: block; margin-top: 4px; font: 500 .82rem/1.2 var(--display); letter-spacing: .12em; color: var(--ink-3); }
.map-svg { display: block; width: 100%; height: auto; overflow: visible; }
.states path {
  stroke: var(--paper); stroke-width: 1.1; stroke-linejoin: round;
  cursor: pointer;
  transition: fill .3s, opacity .45s var(--ease-out), transform .55s var(--ease-out), filter .3s;
  transform-box: fill-box; transform-origin: 50% 60%;
}
.states .t1 { fill: var(--ochre-l); }
.states .t2 { fill: var(--sage-l); }
.states .t3 { fill: var(--sky-l); }
.states .t4 { fill: var(--rose-l); }
.states path:hover { filter: brightness(.92); }
.map.has-mine .states path:not(.is-mine) { opacity: .5; }
.map.has-mine .states path:not(.is-mine):hover { opacity: .8; }
.states path.is-mine { fill: var(--pin); stroke: var(--paper); stroke-width: 1.4; transform: translateY(-6px) scale(1.04); filter: url(#lift); opacity: 1; }

.route-dormant { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .45; transition: opacity .4s; }
.map.has-mine .route-dormant { opacity: .2; }
.route { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.route-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.map.has-mine .route-draw { animation: draw 1.1s var(--ease-out) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.pins text { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.pin-label { font: 700 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); }
.pin-sub { font: 500 12.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-2); }
.pin-client use { fill: var(--ink); }
.pin-studio rect { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.pin-mine { opacity: 0; }
.pin-mine use { fill: var(--pin); stroke: var(--paper); stroke-width: 2; filter: url(#lift); }
.map.has-mine .pin-mine { opacity: 1; }
.map.has-mine .pin-drop { animation: drop .7s var(--ease-out) both; }
@keyframes drop { from { transform: translateY(-70px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }

.legend {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 6px; padding: 10px 0 0; border-top: 1px solid var(--rule);
  font-size: .9rem; color: var(--ink-2);
}
.legend-h { font: 700 .9rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.key { width: 18px; height: 12px; flex: none; }
.key-mine { background: var(--pin); }
.key-studio { width: 10px; height: 10px; margin: 0 4px; background: var(--ink); transform: rotate(45deg); }
.key-pin { width: 18px; height: 16px; fill: var(--ink); }

/* client logos */
.clients {
  max-width: calc(var(--wrap) + 160px); margin: clamp(28px, 4vw, 48px) auto 0; padding: 20px var(--gutter) 28px;
  display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--rule);
}
.clients-h { font: 700 .95rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.clients-row { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; align-items: center; }
.clients-row img { width: 100%; max-width: 132px; height: auto; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); opacity: .85; }

@media (max-width: 1080px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; }
  .map { margin-top: 8px; }
}
@media (max-width: 720px) {
  .clients { flex-direction: column; align-items: flex-start; gap: 14px; }
  .clients-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; width: 100%; }
  .map-title { display: none; }
  .legend-h { display: none; }
  .legend { font-size: .85rem; }
  .pin-label { font-size: 30px; }
  .pin-sub, .pin-studio text { display: none; }
}

/* ---------- route rail: one dashed axis through every stop ----------
   --rail-x is the line's left edge, measured from the full-width rail, so the
   line, the stops and the travelling pin all resolve from one number. The
   stops are positioned against their full-width section (not the centred
   .wrap), which has the same width as the rail, so they cannot drift. */
.route-rail { position: relative; --rail-x: max(10px, calc((100% - var(--wrap)) / 2 - 36px)); --rail-p: 0px; }
.route-rail .wrap { position: static; }
.route-rail::before, .route-rail::after {
  content: ""; position: absolute; top: 0; z-index: 1; pointer-events: none;
  left: var(--rail-x); width: 2px;
}
.route-rail::before { bottom: 0; background: repeating-linear-gradient(to bottom, var(--ink) 0 7px, transparent 7px 14px); opacity: .55; }
/* the stretch of road already travelled is inked in solid */
.route-rail::after { height: var(--rail-p); background: var(--ink); }
.stop {
  position: absolute; z-index: 2;
  left: calc(var(--rail-x) + 1px - 9px); top: calc(var(--sec) + 10px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  transition: box-shadow .35s var(--ease-out);
}
.stop.is-passed { box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 9px var(--ink); animation: stop-pop .45s var(--ease-out); }
@keyframes stop-pop { 40% { transform: scale(1.35); } }
.stop-end { background: transparent; border: 0; width: 28px; height: 40px; left: calc(var(--rail-x) + 1px - 14px); top: calc(var(--sec) - 30px); }
.stop-end.is-passed { box-shadow: none; animation: end-arrive .6s var(--ease-out); }
@keyframes end-arrive { 30% { transform: translateY(-10px); } }
.stop-end svg { width: 26px; height: 36px; fill: var(--pin); }
/* the visitor, travelling the route */
.rail-pin {
  position: absolute; z-index: 3; left: calc(var(--rail-x) + 1px); top: var(--rail-p);
  width: 20px; height: 28px; margin: -28px 0 0 -10px; pointer-events: none;
  transition: opacity .3s;
}
.rail-pin svg { width: 100%; height: 100%; fill: var(--pin); stroke: var(--paper); stroke-width: 2; overflow: visible; }
.rail-pin.is-arrived { opacity: 0; }
@media (max-width: 1340px) { .route-rail { --rail-x: max(10px, calc((100% - var(--wrap)) / 2 + 10px)); } }
@media (max-width: 1100px) { .route-rail::before, .route-rail::after, .stop, .rail-pin { display: none; } }

/* ---------- hero map entrance: client pins land, then their routes appear ---------- */
.map .pin-studio, .map .pin-client { animation: pin-land .8s var(--ease-out) backwards; }
.map .pin-studio { animation-delay: .15s; }
.map .pin-client:nth-of-type(2) { animation-delay: .35s; }
.map .pin-client:nth-of-type(3) { animation-delay: .5s; }
@keyframes pin-land { from { translate: 0 -46px; opacity: 0; } 50% { opacity: 1; } }
.route-dormant { animation: route-in 1s ease-out .9s backwards; }
@keyframes route-in { from { opacity: 0; } }

/* ---------- section fields ---------- */
.field { padding: var(--sec) 0; position: relative; }
.field-paper { background: var(--paper); }
.field-sky { background: var(--sky-l); }
.field-ochre { background: var(--ochre); }
.field-sage { background: var(--sage-l); }
.field-ink { background: var(--ink); color: var(--paper); }

.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head p { color: var(--ink-2); font-size: 1.12rem; max-width: 46ch; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- work: map insets, not cards ---------- */
.case { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.case + .case { margin-top: clamp(64px, 8vw, 112px); }
.case-flip .inset { order: 2; }
.case-flip { align-items: center; }
.inset { position: relative; margin: 0; border: 1.5px solid var(--ink); background: var(--paper); }
.inset img { width: 100%; }
.inset-tall { aspect-ratio: 5 / 5.4; overflow: hidden; }
.inset-tall img { height: 100%; object-fit: cover; object-position: top; }
.inset-tag {
  position: absolute; left: 0; top: 0; z-index: 1;
  background: var(--ink); color: var(--paper);
  font: 600 .88rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px;
}
.case-body h3 { margin-bottom: 16px; }
.case-lede { font-size: 1.2rem; line-height: 1.5; }
.case-body p + p { margin-top: 14px; color: var(--ink-2); }
.case-sub { margin-top: 28px !important; font: 600 1.05rem/1 var(--display) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ink) !important; }
.toolbox { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.toolbox li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.toolbox strong { display: block; font-weight: 600; }
.toolbox li > div span { display: block; font-size: .93rem; color: var(--ink-2); }
.inset-mini { width: 76px; height: 56px; overflow: hidden; border-width: 1px; }
.inset-mini img { height: 100%; object-fit: cover; object-position: top; }
.mini-map { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--paper); }
.mini-map svg { width: 24px; height: 24px; color: var(--ink); }
.mini-map .ico-pin { fill: var(--ink); }

.pull { margin: clamp(72px, 9vw, 128px) 0 0; padding: clamp(32px, 4vw, 48px) 0 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 32px; }
.pull blockquote { margin: 0; }
.pull blockquote p { font: 600 clamp(1.75rem, 3.2vw, 2.75rem)/1.1 var(--display); letter-spacing: -.005em; text-wrap: pretty; }
.pull figcaption { align-self: end; font-size: 1rem; color: var(--ink-2); }
.pull figcaption strong { display: block; font: 700 1.5rem/1 var(--display); letter-spacing: .02em; color: var(--ink); margin-bottom: 4px; }

.oem-note { margin-top: clamp(48px, 6vw, 72px); padding-top: 20px; border-top: 1px solid var(--rule-strong); max-width: 70ch; color: var(--ink-2); }
.oem-note strong { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; }
  .case-flip .inset { order: 0; }
  .pull { grid-template-columns: 1fr; }
}

/* ---------- Fagor & Domus ---------- */
.fd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fd h2 { font-size: clamp(2.8rem, 6vw, 5.2rem); }
.fd-copy > p { margin-top: 24px; font-size: 1.2rem; line-height: 1.5; max-width: 44ch; }
.fd-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.fd-flyers { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.dl { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--ink); padding: 6px 0 4px; }
.dl span { font: 600 .8rem/1 var(--display); letter-spacing: .1em; padding: 3px 5px; border: 1px solid var(--ink); }
.dl:hover { border-bottom-width: 3px; padding-bottom: 2.5px; }
.fd-facts { margin: 0; border-top: 2px solid var(--ink); }
.fd-facts div { padding: 18px 0; border-bottom: 1px solid var(--rule-strong); }
.fd-facts dt { font: 700 1.45rem/1 var(--display); letter-spacing: .01em; margin-bottom: 6px; }
.fd-facts dd { margin: 0; color: var(--ink); }
@media (max-width: 860px) { .fd { grid-template-columns: 1fr; } }

/* ---------- pricing: a rate sheet ---------- */
.rates { border-top: 2px solid var(--ink); }
.rate-row {
  display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 4fr) minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1.3fr);
  gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule-strong);
}
.rate-head { padding: 12px 0; font: 600 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rate-name { font: 700 1.9rem/1 var(--display); }
.rate-name em { display: block; margin-top: 6px; font: 600 .85rem/1 var(--display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rate-what { color: var(--ink-2); font-size: .98rem; }
.rate-time { font-size: .98rem; }
.rate-price { font: 700 2rem/1 var(--display); letter-spacing: -.01em; }
.rate-price small { font: 500 .95rem/1 var(--display); letter-spacing: .04em; color: var(--ink-2); }
.rate-go { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; font: 600 1.05rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--ink); }
.rate-go:hover { border-bottom-width: 4px; }
.rate-row > span:last-child { display: flex; justify-content: flex-end; }
.rate-rec { background: var(--sage-l); margin: 0 calc(-1 * clamp(12px, 1.6vw, 20px)); padding-left: clamp(12px, 1.6vw, 20px); padding-right: clamp(12px, 1.6vw, 20px); }
@media (max-width: 900px) {
  .rate-head { display: none; }
  .rate-row { grid-template-columns: 1fr auto; gap: 8px 20px; padding: 22px 0; }
  .rate-rec { padding: 22px 16px; margin: 0 -16px; }
  .rate-name { grid-column: 1; }
  .rate-price { grid-column: 2; grid-row: 1; text-align: right; }
  .rate-what { grid-column: 1 / -1; }
  .rate-time { grid-column: 1; color: var(--ink-3); font-size: .92rem; }
  .rate-row > span:last-child { grid-column: 2; grid-row: 3; }
}

/* ---------- reviews ---------- */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); border-top: 2px solid var(--ink); }
.reviews li { padding: 28px 0 30px; border-bottom: 1px solid var(--rule-strong); }
.reviews li > p:first-child { font-size: 1.15rem; line-height: 1.55; }
.reviews li > p:first-child::before {
  content: ""; display: block; width: 92px; height: 16px; margin-bottom: 14px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg%3E%3Cpath id='s' d='M9 0.8l2.4 5.1 5.6.7-4.1 3.9 1 5.5L9 13.4 4.1 16l1-5.5L1 6.6l5.6-.7z'/%3E%3Cuse href='%23s' x='20'/%3E%3Cuse href='%23s' x='40'/%3E%3Cuse href='%23s' x='60'/%3E%3Cuse href='%23s' x='80'/%3E%3C/g%3E%3C/svg%3E") left/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg%3E%3Cpath id='s' d='M9 0.8l2.4 5.1 5.6.7-4.1 3.9 1 5.5L9 13.4 4.1 16l1-5.5L1 6.6l5.6-.7z'/%3E%3Cuse href='%23s' x='20'/%3E%3Cuse href='%23s' x='40'/%3E%3Cuse href='%23s' x='60'/%3E%3Cuse href='%23s' x='80'/%3E%3C/g%3E%3C/svg%3E") left/contain no-repeat;
}
.who { margin-top: 14px; font: 700 1.2rem/1 var(--display); letter-spacing: .02em; }
.who span { font: 400 .92rem/1 var(--body); color: var(--ink-2); margin-left: 6px; }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- quote ---------- */
.quote { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.quote h2 { font-size: clamp(2.8rem, 5.6vw, 5rem); }
.quote-lede { margin-top: 20px; font-size: 1.2rem; color: #C9D3CC; max-width: 36ch; }
.next { list-style: none; counter-reset: n; margin: 36px 0 0; padding: 0; border-top: 1px solid rgba(238, 241, 234, .3); }
.next li { counter-increment: n; position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid rgba(238, 241, 234, .18); color: #C9D3CC; }
.next li::before { content: counter(n); position: absolute; left: 0; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--paper); border-radius: 50%; font: 700 1rem/1 var(--display); color: var(--paper); }
.next strong { color: var(--paper); font-weight: 600; }
.quote-direct { margin-top: 26px; color: #C9D3CC; }
.quote-direct a { color: var(--paper); font-weight: 600; }

.sheet { background: var(--paper); color: var(--ink); padding: clamp(22px, 3vw, 36px); border-radius: 2px; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qf-field { display: block; margin-bottom: 16px; font: 600 1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.qf-field .opt { font: 400 .8rem/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-left: 4px; }
.qf-field input, .qf-field textarea, .qf-field select {
  display: block; width: 100%; margin-top: 8px; min-height: 48px; padding: 11px 12px;
  border: 1.5px solid var(--rule-strong); border-radius: 2px; background: #fff; color: var(--ink);
  font: 400 1rem/1.4 var(--body); letter-spacing: 0; text-transform: none;
  transition: border-color .15s, box-shadow .15s;
}
.qf-field .select { margin-top: 8px; }
.qf-field .select select { margin-top: 0; padding-right: 44px; }
.qf-field textarea { resize: vertical; min-height: 92px; }
.qf-field input::placeholder, .qf-field textarea::placeholder { color: #6C7872; }
.qf-field input:focus, .qf-field textarea:focus, .qf-field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(232, 196, 104, .7); }
.qf-err { display: none; margin-top: 6px; font: 500 .88rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--pin-ink); }
.qf-field.invalid input { border-color: var(--pin-ink); }
.qf-field.invalid .qf-err { display: block; }
.qf-submit { margin-top: 6px; min-height: 56px; font-size: 1.25rem; }
.sheet .btn { background: var(--ink); color: var(--paper); }
.qf-status { margin-top: 12px; font-size: .95rem; min-height: 1.4em; }
.qf-status.ok { color: #1E6B3A; }
@media (max-width: 960px) { .quote { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .qf-row { grid-template-columns: 1fr; gap: 0; } }

.playbook { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(238, 241, 234, .25); color: #C9D3CC; }
.playbook a { color: var(--paper); font-weight: 600; }

/* ---------- footer ---------- */
.foot { background: #0C1511; color: #C9D3CC; padding: 72px 0 28px; font-size: .97rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid a { display: block; text-decoration: none; padding: 5px 0; color: #DCE3DD; }
.foot-grid a:hover { color: #fff; text-decoration: underline; }
.foot .brand { color: var(--paper); padding: 0; margin-bottom: 14px; }
.foot-brand p { max-width: 34ch; }
.foot-h { font: 700 .95rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin-bottom: 10px; }
.foot-base { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(238, 241, 234, .15); display: flex; justify-content: space-between; gap: 16px; font-size: .88rem; color: #9DAAA2; }
.foot-base a { color: #C9D3CC; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- mobile dock ---------- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; gap: 8px; padding: 8px; background: var(--ink); border-radius: 4px;
  transform: translateY(140%); transition: transform .4s var(--ease-out);
}
.dock.show { transform: none; }
.dock .btn { flex: 1; background: var(--paper); color: var(--ink); min-height: 48px; }
.dock-call { display: grid; place-items: center; width: 52px; color: var(--paper); border: 1px solid rgba(238, 241, 234, .35); border-radius: 2px; }
@media (max-width: 760px) { .dock:not([hidden]) { display: flex; } body { padding-bottom: 0; } }

/* ---------- gate ---------- */
.gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.gate[hidden] { display: none; }
.gate-backdrop { position: absolute; inset: 0; background: rgba(12, 21, 17, .62); }
.gate-panel { position: relative; width: min(440px, 100%); background: var(--paper); padding: 32px 28px 24px; border-radius: 2px; border: 1.5px solid var(--ink); animation: rise .35s var(--ease-out); }
.gate-panel h3 { font-size: 2.1rem; margin-bottom: 8px; padding-right: 30px; }
.gate-sub { color: var(--ink-2); margin-bottom: 20px; }
.gate-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ---------- small-screen reading order ----------
   The map is the hook, so it sits between the promise and the picker that
   drives it; on the quote stop the form comes before the explanation. */
@media (max-width: 1080px) {
  .hero-copy { display: contents; }
  .hero-in { gap: 0; }
  .hero h1 { order: 1; }
  .lede { order: 2; }
  .map { order: 3; margin-top: 20px; }
  .picker { order: 4; margin-top: 22px; }
  .proof { order: 5; }
}
@media (max-width: 960px) {
  .quote-copy { display: contents; }
  .quote h2 { order: 1; }
  .quote-lede { order: 2; margin-top: -12px; }
  .sheet { order: 3; }
  .next { order: 4; margin-top: 8px; }
  .quote-direct { order: 5; margin-top: -8px; }
  .playbook { order: 6; }
  .quote { row-gap: 32px; }
}

/* ============================================================
   Specialty, utility and legal pages
   ============================================================ */
.crumbs { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter) 0; font-size: .9rem; color: var(--ink-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--rule-strong); }
.crumbs a { color: var(--ink-2); }

.lp-hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 7vw, 96px); position: relative; }
.lp-map { position: absolute; right: var(--gutter); top: 50%; width: min(46%, 560px); height: auto; transform: translateY(-50%); pointer-events: none; }
.lp-hero:has(.lp-map) > :not(.lp-map) { max-width: 52%; }
@media (max-width: 960px) { .lp-map { display: none; } .lp-hero:has(.lp-map) > :not(.lp-map) { max-width: none; } }
.lp-h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .92; max-width: 14ch; }
.hl { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: .07em; text-underline-offset: .1em; }
.lp-lede { margin-top: 24px; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.lp-hero .btn { margin-top: 30px; }
.lp .crumbs, .lp-hero { border-image: linear-gradient(var(--sky-l) 0 0) fill 0 / / 0 100vmax; }
.lp .crumbs { padding-bottom: 4px; }
.lp-terr { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px 8px 10px; background: var(--paper); border: 1px solid var(--ink); font: 600 1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.lp-terr svg { width: 16px; height: 22px; fill: var(--pin); }
.lp-terr strong { color: var(--pin-ink); font-weight: 700; }

.lp-block {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(28px, 5vw, 80px); align-items: start;
}
.lp-block > * { grid-column: 2; }
.lp-block > h2 { grid-column: 1; grid-row: 1 / span 4; font-size: clamp(2rem, 3.6vw, 3rem); position: sticky; top: 92px; }
.lp-block > h2:only-child { grid-column: 1 / -1; }
.lp-block { background: linear-gradient(var(--ink), var(--ink)) no-repeat var(--gutter) clamp(40px, 5vw, 64px) / calc(100% - 2 * var(--gutter)) 2px; padding-top: calc(clamp(40px, 5vw, 64px) + 28px); }
.lp-prose { max-width: 66ch; }
.lp-prose p { font-size: 1.08rem; }
.lp-prose p + p { margin-top: 16px; }
.lp-prose b, .lp-prose strong { font-weight: 600; }
.lp-prose h3 { font-size: 1.6rem; margin: 28px 0 10px; }
.lp-prose ul { padding-left: 1.2em; }
.lp-prose li + li { margin-top: 6px; }
@media (max-width: 860px) {
  .lp-block { grid-template-columns: 1fr; }
  .lp-block > *, .lp-block > h2 { grid-column: 1; grid-row: auto; position: static; }
}

.lp-faqs { border-top: 1px solid var(--rule-strong); }
.lp-faq { border-bottom: 1px solid var(--rule-strong); }
.lp-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 18px 0; font: 700 1.35rem/1.15 var(--display);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--ink); transition: transform .3s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='black' stroke-width='2'/%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 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-faq[open] summary::after { transform: rotate(45deg); }
.lp-faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.lp-faq p { padding: 0 0 20px; color: var(--ink-2); max-width: 64ch; }

.lp-rels { display: grid; border-top: 1px solid var(--rule-strong); }
.lp-rel {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0;
  border-bottom: 1px solid var(--rule-strong); text-decoration: none; font: 600 1.3rem/1.15 var(--display);
}
.lp-rel::after {
  content: ""; flex: none; width: 18px; height: 14px; background: var(--ink); transition: transform .25s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 7h16M10 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%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 18 14'%3E%3Cpath d='M0 7h16M10 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-rel:hover::after { transform: translateX(4px); }
.lp-rel:hover .lp-rel-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

.lp main > .field-ink { margin-top: clamp(40px, 6vw, 80px); }
.lp .field-ink .quote h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); }

/* ============================================================
   Multi-page additions: services list, work, case studies, articles
   ============================================================ */
.bar-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }

/* services as a route sheet: name, what, go */
.svc-list { border-top: 2px solid var(--ink); }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) 28px; gap: 24px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--rule-strong); text-decoration: none;
}
.svc-name { font: 700 1.9rem/1 var(--display); }
.svc-what { color: var(--ink-2); }
.svc-go {
  justify-self: end; width: 22px; height: 16px; background: var(--ink); transition: transform .25s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 7h16M10 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%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 18 14'%3E%3Cpath d='M0 7h16M10 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svc-row:hover .svc-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.svc-row:hover .svc-go { transform: translateX(4px); }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 1fr 24px; gap: 8px 16px; }
  .svc-name { grid-column: 1; }
  .svc-go { grid-column: 2; grid-row: 1; }
  .svc-what { grid-column: 1 / -1; font-size: .98rem; }
}
.serve { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
.serve-h { font: 700 1.05rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.serve ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.serve a { font-weight: 600; }

/* a block whose content spans both columns */
.lp-block-wide > *:not(h2) { grid-column: 1 / -1; }
.lp-block-wide > h2 { grid-row: auto; position: static; }
.lp-block-wide > h2 + * { grid-column: 1 / -1; }

/* work hub */
.work-list { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px); }
.case-h { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 16px; }
.case-body .btn { margin-top: 26px; }

/* case study top: screenshot beside the facts */
.case-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.case-top > .case-shot { grid-column: 1; }
.case-top > .case-facts { grid-column: 2; align-self: start; }
.case-shot { max-height: 620px; overflow: hidden; }
.case-shot img { width: 100%; height: auto; }
.case-facts dd { color: var(--ink-2); }
.inset-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
@media (max-width: 860px) {
  .case-top { grid-template-columns: 1fr; }
  .case-top > .case-shot, .case-top > .case-facts { grid-column: 1; }
  .inset-pair { grid-template-columns: 1fr; }
}
.lp-block .pull { margin-top: 0; }

/* articles: one reading column */
.article { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.article-body { max-width: 68ch; border-top: 2px solid var(--ink); padding-top: 8px; }
.article-body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 44px 0 14px; }
.article-body p, .article-body li { font-size: 1.12rem; line-height: 1.7; }
.article-body p + p { margin-top: 16px; }
.article-body ul { margin: 16px 0 0; padding-left: 1.2em; }
.article-body li + li { margin-top: 8px; }
.article-body li::marker { color: var(--ink-3); }
.article-sign { margin-top: 40px !important; padding-top: 16px; border-top: 1px solid var(--rule-strong); color: var(--ink-2); font-size: 1rem !important; }
.article + .lp-block, .work-list + .field-ink { margin-top: 0; }

.dl-row { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.foot-contact { margin-top: 14px; }
.foot-contact a { display: inline !important; padding: 0 !important; }
.lp-hero .lp-lede a { color: var(--ink); font-weight: 600; }

/* ---------- mobile menu ---------- */
.bar-menu { display: none; width: 44px; height: 44px; margin-right: -8px; background: none; border: 0; cursor: pointer; place-items: center; color: var(--ink); }
.bar-menu-icon, .bar-menu-icon::before, .bar-menu-icon::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s; }
.bar-menu-icon { position: relative; }
.bar-menu-icon::before, .bar-menu-icon::after { content: ""; position: absolute; left: 0; }
.bar-menu-icon::before { top: -7px; }
.bar-menu-icon::after { top: 7px; }
.bar.open .bar-menu-icon { background: transparent; }
.bar.open .bar-menu-icon::before { transform: translateY(7px) rotate(45deg); }
.bar.open .bar-menu-icon::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
  .bar-menu { display: grid; }
  .bar-in { gap: 14px; }
  .bar.open .bar-nav {
    display: grid; position: absolute; left: 0; right: 0; top: 64px; gap: 0; margin: 0;
    background: var(--paper); border-bottom: 2px solid var(--ink); padding: 8px var(--gutter) 16px;
  }
  .bar.open .bar-nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.35rem; color: var(--ink); }
}
.lp-block .pull { border-top: 0; padding-top: 0; }
.btn { white-space: nowrap; }
@media (max-width: 430px) { .bar .brand span { display: none; } .bar .brand img { width: 36px; height: 36px; } }