/*
  OVK Construction — editorial system. Palette: "Navy & Gold — Luxury Craftsman",
  taken from the logo.

  Four brand colours, kept EXACTLY as the owner chose them:
      navy  #0A1628   page ground
      gold  #C4982A   the one accent
      cream #F8F4EC   light sections and the text on navy
      warm gray #8B8070  secondary text
  plus a navy-slate raised surface (#1F2D3D). Four of the pairings they make do
  not reach 4.5:1 on their own (warm gray on the raised surface 3.61, warm gray
  on cream 3.53, gold text on cream 2.43), so there are DERIVED variants of the
  same hues, used only where needed. `scripts/palette_contrast.py` computes every
  pairing; the table is in the README. If a hex appears outside this block it is
  a bug.

  Shape language is the inverse of a soft UI kit: square corners, hairline
  rules, full-bleed tiles, type doing the work. Nothing is a pill.
*/
:root {
  /* brand */
  --ground: #0a1628;   /* navy: page ground                                   */
  --raised: #1f2d3d;   /* navy-slate: raised surface                          */
  --gold:   #c4982a;   /* gold: FILLS (buttons, tiles, marks), never body text on cream */
  --light:  #f8f4ec;   /* cream: text on navy, light sections                 */
  --muted:  #8b8070;   /* warm gray: secondary text on navy (4.68:1)          */

  /* derived, same hues */
  --muted-hi: #a49b8e; /* secondary text on the raised surface: 5.10:1 (6.61 on navy)   */
  --muted-lo: #6b6356; /* secondary text on cream: 5.40:1                               */
  --gold-ink: #7e621b; /* gold as TEXT or thin lines on cream: 5.24:1                   */
  --gold-line:#a07c22; /* gold as a non-text line on cream: 3.54:1                      */

  /* the colours below follow the surface they sit on (see .on-cream, .tile-raised) */
  --accent: var(--gold);      /* gold text / lines / rings: 6.80:1 on navy, 5.24 on raised */
  --line:   #263749;          /* hairline on navy (decorative)                   */
  --well:   #07101e;          /* inputs, recessed                                */

  --logo-ground: #081426;     /* the navy behind the logo file; the TV screen shows it */

  --ok:     #6fd8a8;
  --bad:    #ff8a94;          /* error text on navy 8.0:1, on raised 6.2:1 */

  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

/* Surfaces that are not navy re-point the text colours at their own variants. (If you give
   something `background: var(--raised)`, add it to the list below, or its secondary text
   falls to 3.6:1: the in-browser audit in the README catches exactly that.) */
.tile-raised, .bk, .post-cta { --muted: var(--muted-hi); --line: #34485e; }   /* every surface that is --raised */
.on-cream, .tile-light {
  --muted: var(--muted-lo);
  --accent: var(--gold-ink);
  --line: color-mix(in srgb, var(--ground) 16%, transparent);
  --bad: #a3262f;           /* error text on cream: 6.7:1 */
  color: var(--ground);
}

/*
  Text on a gold fill is ALWAYS navy (6.80:1). Cream text on gold is 2.4:1,
  too faint. This is the single easiest way to break the palette. .tile-accent
  sets `color` for you; do not override it.
*/

* { box-sizing: border-box; }

/* `hidden` is only a UA style, so any utility that sets display beats it —
   a .block span with the attribute set stays on screen. The attribute has to
   win, or hiding something becomes a guessing game. */
[hidden] { display: none !important; }

/* The whole site sits inside a thin gold frame: body is the border, and
   .page-frame is the page. overflow:clip (not hidden) keeps
   position:sticky working inside. The default scrollbar is hidden — the
   frame reads as a device bezel and the bar would puncture it. */
html {
  scrollbar-width: none;
  overscroll-behavior: none;   /* no macOS rubber-band past the bezel */
  background: var(--gold);    /* if a browser still bounces, it shows gold */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

:root {
  --frame: clamp(.6rem, 1.2vw, 1.25rem);
  --frame-r: 0px;
  --win-h: 100vh;                       /* the window's height (the small one on a phone, where svh exists) */
}
@supports (height: 100svh) { :root { --win-h: 100svh; } }

body {
  background: var(--gold);
  color: var(--light);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--frame);
}

/* the bezel is FIXED to the viewport so the gold border never scrolls
   away — gold fills everything outside the window */
body::after {
  content: "";
  position: fixed;
  inset: var(--frame);
  border-radius: var(--frame-r);
  box-shadow: 0 0 0 100vmax var(--gold);
  pointer-events: none;
  z-index: 40;
}

.page-frame {
  background: var(--ground);
  border-radius: var(--frame-r);
  overflow: clip;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Display type: a light, high-contrast serif for the big headings (h1, h2); it sits
   close to the serif OVK in the logo. Archivo stays for small titles (h3) and Inter for
   text: one display family, plus the two that were already here. Cormorant is small for
   its size (its lowercase is about 25% shorter than Archivo's), so the sizes set on the
   headings in the templates and in home.css / hero.css are tuned for it. */
:root { --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
h3 {
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.muted { color: var(--muted); }
.accent { color: var(--accent); }
.wrap { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }

/* ── tiles ─────────────────────────────────────────────────────────────── */
/* Four grounds. Mixing them in one grid is the whole look. */
.tile { position: relative; overflow: hidden; border-radius: 0; --scene-accent: var(--accent); }
/* graphics recolour their "alive" parts per tile so they stay visible */
.tile-light { --scene-accent: var(--gold-ink); }  /* dark gold: 5.24:1 on cream */
.tile-accent { --scene-accent: var(--ground); }
.tile-ground { background: var(--ground); color: var(--light); box-shadow: inset 0 0 0 1px var(--line); }
.tile-raised { background: var(--raised); color: var(--light); }
.tile-accent { background: var(--gold); color: var(--ground); }
.tile-light   { background: var(--light);   color: var(--ground); }
.tile-accent .muted { color: color-mix(in srgb, var(--ground) 82%, transparent); }  /* 5.2:1 on gold */


.tile-hover { transition: transform .4s cubic-bezier(.22,.61,.36,1), filter .4s ease; }
.tile-hover:hover { transform: translateY(-4px); }

/* ── rules ─────────────────────────────────────────────────────────────── */
.rule { height: 1px; background: var(--line); border: 0; }
.rule-light { height: 1px; background: color-mix(in srgb, var(--ground) 16%, transparent); border: 0; }  /* on cream */

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  font-weight: 600;
  font-size: .875rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
/* The primary action is the accent — on a near-black page it is the one
   bright thing, so it does not need to shout twice. */
.btn-primary, .btn-ink { background: var(--gold); color: var(--ground); }
.btn-primary:hover, .btn-ink:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--light); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: var(--raised); }
.btn-invert { background: var(--light); color: var(--ground); }
.btn-invert:hover { transform: translateY(-2px); }
.btn-ground { background: var(--ground); color: var(--light); }
.btn-ground:hover { transform: translateY(-2px); }

/* ── tags ──────────────────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
}
.tag-accent { background: var(--gold); color: var(--ground); box-shadow: none; }

.chip {
  padding: .6rem 1.1rem;
  font-size: .8125rem;
  font-weight: 600;
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.chip:hover { color: var(--light); background: var(--raised); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="true"] { background: var(--gold); color: var(--ground); box-shadow: none; }
a.chip { display: inline-flex; align-items: center; white-space: nowrap; }   /* a chip that is a link or a tab */
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── form ──────────────────────────────────────────────────────────────── */
.field {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--well);
  color: var(--light);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit;
  font-size: .9375rem;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .16s ease;
}
.field::placeholder { color: var(--muted); }
.field:focus { outline-color: var(--accent); }
select.field { appearance: none; }
/* Native <option> does not reliably inherit the tile it sits on — some
   platforms paint it with the select's colours, others with the OS popup's.
   Set both explicitly so the dropdown is legible either way. */
.field option { background: var(--well); color: var(--light); }
/* forms sitting on a light tile invert */
.tile-light .field, .tile-accent .field {
  background: color-mix(in srgb, var(--ground) 6%, transparent);
  color: var(--ground);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ground) 16%, transparent);
}
.tile-light .field::placeholder, .tile-accent .field::placeholder {
  color: color-mix(in srgb, var(--ground) 50%, transparent);
}
.tile-light .field option, .tile-accent .field option { background: var(--light); color: var(--ground); }

/* ── link underline that draws in ──────────────────────────────────────── */
.ulink {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.22,.61,.36,1);
}
.ulink:hover { background-size: 100% 1px; }

/* ── graphics ──────────────────────────────────────────────────────────── */
.seal { animation: spin 22s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(currentColor .5px, transparent .5px);
  background-size: 7px 7px;
  color: var(--line);
}

/* ── blueprint washes ──────────────────────────────────────────────────── */
/* A faint blueprint grid over a dark tile. */
.bp {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--light) 4%, transparent) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--light) 4%, transparent) 0 1px, transparent 1px 36px);
}
/* Same grid as a section backdrop, masked so it blooms behind the graphic. */
.bp-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--light) 6%, transparent) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--light) 6%, transparent) 0 1px, transparent 1px 42px);
  -webkit-mask-image: radial-gradient(58rem 30rem at 72% 22%, #000, transparent 68%);
          mask-image: radial-gradient(58rem 30rem at 72% 22%, #000, transparent 68%);
}

/* ── the mad-lib brief ─────────────────────────────────────────────────── */
/* One big sentence with blanks. Navy ground, gold answers. */
.madlib {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 600;
  line-height: 2.15;
  letter-spacing: -.01em;
  color: var(--light);
}
@media (max-width: 480px) { .madlib { font-size: 1.15rem; line-height: 2.1; } }
.mfield {
  display: inline-block;
  background: transparent;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font: inherit;
  padding: 0 .15em;
  margin: 0 .05em;
  max-width: 100%;
  min-width: 5ch;
  field-sizing: content;
  outline: none;
  border-radius: 0;
  transition: border-color .2s ease;
}
.mfield::placeholder { color: var(--muted); font-weight: 500; }
.mfield:focus { border-color: var(--accent); }
.mfield:not(:placeholder-shown) { border-color: var(--accent); }
.mfield-wide { min-width: 12ch; }
/* Chrome autofill paints a white box over the dark theme; repaint it. */
.mfield:-webkit-autofill,
.mfield:-webkit-autofill:hover,
.mfield:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--accent);
  -webkit-box-shadow: 0 0 0 1000px var(--raised) inset;
          box-shadow: 0 0 0 1000px var(--raised) inset;
  caret-color: var(--accent);
  transition: background-color 999999s ease-out;
}

/* the form must work (and the honeypot stay hidden) without the Tailwind script, so these are plain CSS */
.lead-hp { display: none; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.lead-note { font-size: .75rem; }
.mfield-select { appearance: auto; field-sizing: content; padding-right: .2em; cursor: pointer; }
.mfield-select option { background: var(--raised); color: var(--light); font-size: 1rem; }
.lead-errors-box:empty { display: none; }
.lead-errors { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.lead-errors li { color: var(--bad); font-size: .9375rem; font-weight: 500; line-height: 1.4; padding-left: 1.1rem; position: relative; }
.lead-errors li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: 2px; background: currentColor; }
.merr {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bad);
  margin: -.6em 0 .4em;
}

@media (prefers-reduced-motion: reduce) {
  .seal { animation: none; }
  .mfield { transition: none; }
  .tile-hover, .btn, .ulink { transition: none; }
  .tile-hover:hover, .btn:hover { transform: none; }
}

/* ── buttons and chips used on the home page ─────────────────────────── */
.chip-btn {
  display: inline-flex; align-items: center; gap: .85rem;
  background: var(--light); color: var(--ground);
  border-radius: 0; padding: .4rem 1.5rem .4rem .4rem;
  font-weight: 600; font-size: .875rem; white-space: nowrap;
  transition: transform .2s ease;
}
.chip-btn:hover { transform: translateY(-2px); }
.chip-btn .glyph {
  width: 2.4rem; height: 2.4rem; border-radius: 0; flex: none;
  background: var(--ground); color: var(--light);
  display: inline-flex; align-items: center; justify-content: center;
}
.chip-btn.is-accent { background: var(--gold); color: var(--ground); }
.chip-btn.is-accent .glyph { background: var(--ground); color: var(--gold); }

/* numbered chips on the capability cards */
.cap-num { font-family: "JetBrains Mono", monospace; font-size: .6875rem; letter-spacing: .12em;
  padding: .35rem .7rem; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.cap-tile { background: color-mix(in srgb, var(--raised) 46%, var(--ground));
  border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }

/* bento stat cards */
.dash-card { border-radius: 0; box-shadow: none;
  border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); }
/* only the tick ring spins — the number stays upright */
.burst { animation: burst-spin 24s linear infinite;
  transform-box: fill-box; transform-origin: center; }
.seal-rev { animation: burst-rev 36s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .burst, .seal-rev { animation: none; } }
@keyframes burst-spin { to { transform: rotate(360deg); } }
@keyframes burst-rev { to { transform: rotate(-360deg); } }

/* typewriter caret */
.caret {
  display: inline-block;
  width: .07em;
  height: 1.05em;
  margin-left: .06em;
  vertical-align: -.16em;
  background: currentColor;
  animation: caret-blink 1s steps(1) infinite;
}
.typing-done .caret { animation: caret-blink 1s steps(1) 3; animation-fill-mode: forwards; }
@keyframes caret-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .caret { display: none } }

/* ── book a call ────────────────────────────────────────────────────────
   Square like everything else: a flat panel, square day and time choices.

   Gold fills the chosen thing and the text on it is navy —
   cream on gold is 2.4:1 and is too faint. */
.bk {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(90vh, 50rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--light);
  box-shadow: 0 40px 120px rgba(2, 2, 2, .62), inset 0 0 0 1px var(--line);
}
.bk::backdrop { background: rgba(2, 2, 2, .74); backdrop-filter: blur(3px); }

.bk-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: 1.75rem var(--pad) 1rem;
}
/* The close is the glyph off a .chip-btn, inverted. */
.bk-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 0;
  background: var(--ground); color: var(--light);
  border: 0; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .2s ease;
}
.bk-x:hover { background: var(--light); color: var(--ground); transform: translateY(-2px); }

.bk-modes { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 var(--pad) 1rem; }

/* Where you are, and how far there is to go. */
.bk-steps { display: flex; gap: .35rem; padding: 0 var(--pad) 1.1rem; }
.bk-dot { width: 1.6rem; height: 3px; border-radius: 0;
  background: color-mix(in srgb, var(--light) 18%, transparent); }
.bk-dot.is-on { background: var(--gold); }
.bk-dot.is-done { background: color-mix(in srgb, var(--accent) 45%, transparent); }

.bk-body { padding: 1.25rem var(--pad) 1.9rem; overflow-y: auto; max-height: calc(90vh - 13rem); }
.bk-body { scrollbar-width: none; }
.bk-body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- back ---- */
.bk-back {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muted);
  transition: color .16s ease;
}
.bk-back:hover { color: var(--light); }

/* ---- the calendar ---- */
.bk-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem;
}
.bk-nav { display: flex; align-items: center; gap: .35rem; }
.bk-month { font-size: .9375rem; font-weight: 600; min-width: 9rem; text-align: center; }
.bk-step-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0;
  background: var(--well); color: var(--light);
  border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--light) 12%, transparent);
  cursor: pointer; transition: background .16s ease, color .16s ease;
}
.bk-step-btn:hover:not(:disabled) { background: var(--ground); }
.bk-step-btn:disabled { color: var(--muted); opacity: .35; cursor: default; }

.bk-week, .bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.bk-week {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); text-align: center; margin-bottom: .4rem;
}
/* A day you can take is a filled token; a day you cannot is just a number.
   The difference has to be a FILL — a hairline in --line is invisible against
   the raised panel this dialog is made of. */
.bk-day {
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0;
  background: var(--well); color: var(--light);
  border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--light) 12%, transparent);
  font: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.bk-day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--accent); }
/* A day the company cannot take is still drawn — a calendar with holes punched
   in it cannot be read — it is simply not pressable. */
.bk-day:disabled {
  background: transparent; box-shadow: none; cursor: default;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}
.bk-day.is-empty { background: none; box-shadow: none; }
.bk-day.is-today:not(:disabled) { box-shadow: inset 0 0 0 1px var(--muted); }
.bk-day[aria-pressed="true"] { background: var(--gold); color: var(--ground); box-shadow: none; }

/* ---- the times on that day ---- */
.bk-strip { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.bk-pick {
  padding: .5rem 1rem; border-radius: 0;
  background: var(--well); color: var(--light);
  border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--light) 12%, transparent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .02em; white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .2s ease;
}
.bk-pick:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-1px); }
.bk-pick[aria-pressed="true"] { background: var(--gold); color: var(--ground); box-shadow: none; }

/* ---- who is coming ---- */
.bk-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.1rem; }
.bk-f { display: block; }
.bk-f .field { margin-top: .4rem; border-radius: 0; }
.bk-f-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .bk-fields { grid-template-columns: 1fr; } }

.bk-go {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.bk-go .btn { flex: none; }

/* ---- all set ---- */
.bk-set { text-align: center; padding: 1.5rem 0 1rem; }
.bk-set-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 0;
  background: var(--gold); color: var(--ground);
}

.bk-done { margin-top: 1rem; padding: .9rem 1.3rem; border-radius: 0; font-size: .9375rem; }
.bk-done.bad {
  background: color-mix(in srgb, #ff6b6b 14%, transparent); color: #ffd7d7;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff6b6b 40%, transparent);
}

/* ── the header's one action ────────────────────────────────────────────────
   A handset, white, no pill around it: the label would only repeat what the
   shape already says. It keeps a 44px box so it is still a comfortable tap on
   a phone, and its name lives in aria-label. */

.nav-call {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 0;
  background: none; border: 0; color: var(--light); cursor: pointer;
  transition: color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease;
}
.nav-call:hover, .nav-call:focus-visible {
  color: var(--accent); transform: scale(1.08);
  background: color-mix(in srgb, var(--light) 8%, transparent);
}
.nav-call:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .nav-call { transition: none; }
}

/* ── the brand in the header and footer ─────────────────────────────────────
   A square monogram and the name. No logo file exists yet; when the client
   supplies one, swap .brand-mark's text for an <img>. */
.brand { display: inline-flex; align-items: center; gap: .75rem; line-height: 1; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  background: var(--gold); color: var(--ground);
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.brand:hover .brand-mark { transform: rotate(-4deg); }
.brand-name {
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem;
}
@media (max-width: 420px) { .brand-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } }

/* ── before / after ─────────────────────────────────────────────────────────
   ONE component (partials/compare.html, static/js/compare.js), always drawn large.
   Without JavaScript (no `.js` on <html>) the two photos are stacked, each with its
   label. With it, the "before" layer is clipped at --pos and an invisible range input
   laid over the whole stage does the dragging; a click or a tap anywhere moves the handle.

   Size: as wide as its column, a 3:2 crop (4:3 on a phone), and never taller than the
   window. `--cmp-reserve` is whatever else has to fit in the window with it (4rem by default:
   a line of caption and some air; the home page's showcase sets its own, in home.css).
   Both photos get the identical crop (object-fit: cover, same position), so they stay
   registered. */
.cmp { margin: 0; }
.cmp-lg, .cmp-side {
  --edge: clamp(.6rem, 1.4vw, 1.1rem);                       /* where the BEFORE / AFTER labels sit */
}
.cmp-lg {
  --ar: 3 / 2;
  --ratio-n: 1.5;                                            /* the same ratio as a number */
  --k: clamp(2.9rem, 4.2vw, 3.75rem);                        /* the handle's size */
  width: min(100%, calc((var(--win-h) - 2 * var(--frame) - var(--cmp-reserve, 4rem)) * var(--ratio-n)));
}
@media (max-width: 767px) { .cmp-lg { --ar: 4 / 3; --ratio-n: 1.3333; } }

.cmp-stage { position: relative; background: var(--raised); display: flex; flex-direction: column; }
.cmp-layer-before { order: -1; }   /* stacked without JS: before first */
.cmp-layer { position: relative; }
.cmp-layer + .cmp-layer { margin-top: 1px; }
.cmp-layer img { display: block; width: 100%; height: auto; }
.cmp-tag {
  position: absolute; top: var(--edge, .75rem); padding: .55em .9em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(.75rem, 1.05vw, .95rem); font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .18em;
  background: var(--ground); color: var(--light);
}
.cmp-tag-before { left: var(--edge, .75rem); }
.cmp-tag-after  { left: var(--edge, .75rem); background: var(--gold); color: var(--ground); }
.cmp-line, .cmp-knob, .cmp-range, .cmp-hint { display: none; }

.js .cmp-stage { display: block; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; touch-action: pan-y; }
.js .cmp-layer { position: absolute; inset: 0; margin: 0; }
.js .cmp-layer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.js .cmp-layer-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.js .cmp-stage .cmp-tag-after { left: auto; right: var(--edge, .75rem); }
.js .cmp-line {
  display: block; position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; margin-left: -1.5px; background: var(--gold); pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ground) 40%, transparent);   /* stays visible over a white wall */
}
.js .cmp-knob {
  display: grid; place-items: center; position: absolute; top: 50%; left: var(--pos);
  width: var(--k, 2.75rem); height: var(--k, 2.75rem);
  margin: calc(var(--k, 2.75rem) / -2) 0 0 calc(var(--k, 2.75rem) / -2);
  background: var(--gold); color: var(--ground); pointer-events: none;
  box-shadow: 0 0 0 3px var(--ground), 0 .4rem 1.2rem color-mix(in srgb, var(--ground) 45%, transparent);
}
/* a small "Drag" under the handle: it goes after the first touch (compare.js adds .is-touched) */
.js .cmp-hint {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  left: var(--pos); top: calc(50% + var(--k, 2.75rem) / 2 + .75rem); transform: translateX(-50%);
  padding: .55em .9em; white-space: nowrap;
  font: 600 .75rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ground) 88%, transparent); color: var(--light);
  transition: opacity .35s ease, visibility .35s;
}
.cmp.is-touched .cmp-hint { opacity: 0; visibility: hidden; }
.js .cmp-range {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y; z-index: 3;
  -webkit-appearance: none; appearance: none;
}
/* no thumb width: the value is then exactly where the pointer is, edge to edge */
.js .cmp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; border: 0; }
.js .cmp-range::-moz-range-thumb { width: 0; border: 0; background: transparent; }
.cmp-stage:has(.cmp-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-stage:has(.cmp-range:focus-visible) .cmp-knob { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--light); }
.cmp-cap { margin-top: .8rem; font-size: .875rem; line-height: 1.4; color: var(--muted); }
/* the showcase is fetching the next pair: the photos on screen stay, a little dimmed, until it is ready */
.cmp.is-loading .cmp-stage { opacity: .6; transition: opacity .2s ease; }

/* different shapes, or a progress photo: side by side. The columns are as wide as the photos
   are (inline grid-template-columns), so both come out the same height; one under the other
   on a phone. */
.cmp-side { display: grid; gap: 1px; align-items: start; margin: 0; width: 100%; }
.cmp-side-photo { position: relative; margin: 0; }
.cmp-side-photo img { display: block; width: 100%; height: auto; }
.cmp-side .cmp-cap { grid-column: 1 / -1; }
@media (max-width: 640px) { .cmp-side { grid-template-columns: 1fr !important; gap: .75rem; } }

/* ── photos ──────────────────────────────────────────────────────────────── */
.photo-strip { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.photo-strip figure { flex: 0 0 min(80%, 26rem); margin: 0; scroll-snap-align: start; }
.photo-strip img, .photo-grid img { display: block; width: 100%; height: auto; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1px; }
.photo-grid figure { margin: 0; }
.tag-ba {
  position: absolute; top: 1rem; left: 1rem; padding: .3rem .6rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em;
  background: var(--gold); color: var(--ground);
}
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1px; background: var(--line); }
.thumbs a { display: block; position: relative; background: var(--ground); }
.thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .25s ease; }
.thumbs a:hover img { opacity: .85; }
.thumbs span { display: block; padding: .6rem .75rem .8rem; font-size: .8125rem; font-weight: 600; }

/* ── the services index: a real photo of our work on every tile ───────────────
   The photo is a link to the project it is from (a zoom and a "See the project" label
   on hover and on keyboard focus; always shown on touch screens, which have no hover),
   the caption under it names the project, and the text below is the link to the service
   page. Two sibling links, never nested. */
.svc-tile { display: flex; flex-direction: column; }
.svc-fig { margin: 0; }
.svc-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--raised); cursor: pointer; }
.svc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.svc-over {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 2.6rem 1.25rem 1rem; color: var(--light);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ground) 92%, transparent));
  font: 600 .75rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
  .svc-photo:hover img, .svc-photo:focus-visible img { transform: scale(1.06); }
  .svc-photo:hover .svc-over, .svc-photo:focus-visible .svc-over { opacity: 1; transform: none; }
}
@media (hover: none) { .svc-over { opacity: 1; transform: none; } }
.svc-photo:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.svc-cap { padding: .8rem 2rem 0; font-size: .8125rem; line-height: 1.4; }
.svc-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 2rem 2rem; }
.svc-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.svc-more {
  display: inline-flex; align-items: center; gap: .5rem; padding-top: 1.5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: gap .25s ease;
}
.svc-body:hover .svc-more { gap: .9rem; }
@media (prefers-reduced-motion: reduce) {
  .svc-photo img, .svc-over, .svc-more { transition: none; }
  .svc-photo:hover img, .svc-photo:focus-visible img { transform: none; }
}