/* ============================================================
   WMP SKIN · brings the services pages into the main
   wellmadeplays.com design system. Loaded after main.css;
   overrides tokens and chrome only. Copy and layout logic
   stay in main.css untouched.
   System: Söhne Breit Halbfett = headline tier · Söhne = body
   · Söhne Mono = data/labels · cream #F4EEDC · ink #141312 ·
   ground #0B0B0C · square corners · flat surfaces.
   ============================================================ */

@font-face{font-family:"Sohne";src:url("../fonts/Sohne-Buch.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Sohne";src:url("../fonts/Sohne-Leicht.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Sohne";src:url("../fonts/Sohne-Kraftig.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Sohne";src:url("../fonts/Sohne-Halbfett.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Sohne";src:url("../fonts/Sohne-Dreiviertelfett.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Sohne Breit";src:url("../fonts/SohneBreit-Halbfett.otf") format("opentype");font-weight:400 600;font-display:swap}
@font-face{font-family:"Sohne Breit";src:url("../fonts/SohneBreit-Dreiviertelfett.otf") format("opentype");font-weight:650 900;font-display:swap}
@font-face{font-family:"Sohne Mono";src:url("../fonts/SohneMono-Buch.otf") format("opentype");font-weight:400 700;font-display:swap}

:root{
  --paper:#F4EEDC;
  --paper-deep:#ECE4CC;
  --ink:#141312;
  --ink-soft:#3A3836;
  --muted:#696560;
  --line:#CFC9B7;
  --line-strong:#B4AE9C;
  --vermilion:#141312;
  --vermilion-text:#141312;
  --blue:#141312;
  --blue-soft:#ECE4CC;
  --serif:"Sohne Breit","Sohne",Helvetica,Arial,sans-serif;
  --sans:"Sohne",Helvetica,Arial,sans-serif;
  --mono:"Sohne Mono",ui-monospace,SFMono-Regular,monospace;
  --radius:0;
  --press:none;
  --field-bg:#FBF7EA;
  --field-line:#141312;
  --select:#141312;
  --ground:#0B0B0C;
  --cream-72:rgba(244,238,220,.72);
  --cream-55:rgba(244,238,220,.55);
}
::selection{background:var(--ink);color:var(--paper)}

/* --- type voice ------------------------------------------------ */
h1,h2,h3,h4,.wordmark-text{letter-spacing:-.012em}
h1 em,h2 em,h3 em,h1 i,h2 i,h3 i{font-style:normal}
em{font-style:normal;font-weight:inherit}

/* kickers / eyebrows / small labels go mono uppercase tracked */
.kicker,.hero-card-kicker,.sec-label,.eyebrow,.menu-route,.work-kind,
.path-kicker,.bundle-tag,.rs-note,.pl-k,.voices-k{
  font-family:var(--mono)!important;
  letter-spacing:.12em;text-transform:uppercase;font-weight:400;
}

/* --- flat, square surfaces ------------------------------------ */
*{border-radius:0!important}
[class]{box-shadow:none!important;text-shadow:none!important}

/* --- nav: the ground-dark house bar --------------------------- */
/* Opaque ground, so drop Doug's blur: sticky + backdrop-filter makes the
   bar stop repainting and vanish on scroll in iOS Safari, and the blur is
   invisible behind an opaque fill anyway. */
.nav,
.nav.is-scrolled{background:var(--ground);color:var(--paper);border-bottom:1px solid rgba(244,238,220,.14);
  backdrop-filter:none;-webkit-backdrop-filter:none}
/* .nav.is-scrolled (from main.js on scroll) reset the bar to translucent
   cream, so it vanished into the page; keep it opaque ground at all scroll
   positions. */
.nav a{color:var(--paper)}
.nav .wordmark,.nav .wordmark-text{color:var(--paper)}
.nav .wordmark-text{font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:-.01em}
.nav .wordmark-text small{font-family:var(--mono);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-55)}
.nav-links a{font-family:var(--sans);font-weight:500;color:var(--cream-72);transition:color .25s}
.nav-links a:hover{color:var(--paper)}
.nav .btn,.nav .btn-primary{background:var(--paper);color:var(--ground);border-color:var(--paper)}
.nav .btn:hover,.nav .btn-primary:hover{background:var(--cream-72);border-color:var(--cream-72);color:var(--ground)}
.nav .mark{color:var(--paper)}

/* --- buttons: square ink blocks ------------------------------- */
.btn{font-family:var(--sans);font-weight:500;border-radius:0!important}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000;border-color:#000;color:var(--paper)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* --- links: inherit surrounding ink, never accent color.
   currentColor keeps links legible on dark photo tiles too. ------ */
a{color:inherit}
main a:not(.btn){color:inherit;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
main a:not(.btn):hover{text-decoration-color:currentColor}

/* --- rules: the 2px ink section rule -------------------------- */
hr{border:0;border-top:1px solid var(--line)}

/* --- testimonial marquee: explicit pause (WCAG 2.2.2) --------- */
.voices.is-paused .voices-track{animation-play-state:paused!important}
.voices-pause svg{display:block}

/* --- anchor targets clear the sticky nav ---------------------- */
/* Doug's html scroll-padding predates the taller reskinned bar; :target
   guarantees every #hash jump lands below the fixed header. */
:target{scroll-margin-top:6rem}
section[id],[id].menu-entry,[id].route,.pl-group[id]{scroll-margin-top:6rem}

/* --- forms ----------------------------------------------------- */
input,select,textarea{font-family:var(--sans);border-radius:0!important}

/* --- focus ----------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nav a:focus-visible,.nav button:focus-visible{outline-color:var(--paper)}

/* Doug handoff: examples flagship prices + Tally scan embed */
.example-price{margin:.35rem 0 1rem;font-size:.95rem}
.example-price strong{font-family:"Sohne Mono","SFMono-Regular",monospace;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-right:.4rem}
.tally-embed{margin:.5rem 0 1.5rem;min-height:520px}
.tally-embed iframe{width:100%;border:0;background:transparent}
.tally-embed noscript p{margin-top:1rem}

/* visually-hidden heading (screen-reader only) for proper outline nesting */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}