/* Villa Reedy — design system + components
   Breakpoints (mobile-first, min-width only): 640 / 900 / 1200 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap to Archivo doesn't shift layout */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 86%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* palette */
  --navy-900: #0F1D28; --navy-800: #172A39; --navy-700: #24394A; --navy-600: #3A5163;
  --navy-300: #9FADB8; --navy-100: #DCE2E7;
  --orange-700: #B8321A; --orange-600: #D9452B; --orange-500: #FC563C; --orange-200: #FDB9AC; --orange-100: #FEE6E1;
  --cream: #E9E4E0; --paper: #F4F1EE; --white: #FFFFFF;
  --green-700: #1C6B3E; --amber-700: #8A5300; --red-700: #B3261E;

  /* semantic */
  --bg: var(--cream);
  --surface: var(--paper);
  --text: var(--navy-800);
  --text-muted: #3F5363;           /* 7.3:1 on paper */
  --accent: var(--orange-500);     /* graphics, large text, fills only */
  --accent-text: var(--orange-700);/* small orange text: 4.7:1 on cream, 5.3:1 on paper */
  --on-dark: var(--cream);
  --on-dark-muted: #C3CCD3;        /* 8.6:1 on navy */
  --border: rgba(23, 42, 57, .16);
  --border-dark: rgba(233, 228, 224, .18);
  --focus: var(--navy-800);         /* focus ring: navy on light (11.7:1 on cream); orange on dark (4.6:1 on navy) */

  /* type scale — 1.25 ratio, fluid */
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
  --fs-3xl: clamp(2.3rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-display: clamp(3rem, 1rem + 8vw, 8.5rem);

  /* layout */
  --wrap: 1920px;                     /* content fills the screen; side margins = the gutter */
  --gutter: clamp(16px, 2.5vw, 40px);
  --section-y: clamp(72px, 10vw, 140px);
  --header-h: 72px;
  --radius: 0;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* print-paper grain, 3.5% */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035;
  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='.9' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeComposite in='SourceGraphic' in2='t' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%230F1D28' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { body::before { display: none; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 900; line-height: .95; letter-spacing: -.03em; text-wrap: balance; }
h3 { font-weight: 800; letter-spacing: -.015em; line-height: 1.15; font-size: var(--fs-lg); }
p { text-wrap: pretty; }
.lede { font-size: var(--fs-md); max-width: 62ch; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.dark, .menu, .site-footer, .capture, .svc-wide, .runlog, .success, .site-header.is-dark, .mobile-cta, .bld-sticky, .bld-view .bb, .browser-bar, dialog.bld-dialog { --focus: var(--orange-500); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 300; padding: 12px 18px;
  background: var(--navy-800); color: var(--cream); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.5vw, 32px); }
.section { padding-block: var(--section-y); }
.section:not(.dark):not(.bg-paper) + .section:not(.dark):not(.bg-paper) { padding-top: 0; } /* same background twice (Services, Pricing): one gap, not two */
.bg-paper { background: var(--paper); }
.bg-cream { background: var(--cream); }
.dark { background: var(--navy-800); color: var(--on-dark); --text: var(--on-dark); --text-muted: var(--on-dark-muted); --border: var(--border-dark); --accent-text: var(--orange-500); --focus: var(--orange-500); }

/* section heading block */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.eyebrow::before { content: ""; width: .7em; height: .7em; background: var(--accent); flex: none; }
.h2 { font-size: var(--fs-3xl); margin: .35em 0 .45em; }
.dot { color: var(--accent); }
.section-head { max-width: 60rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .lede { margin-top: -.2em; }

/* ---------- buttons & links ---------- */
.btn {
  --b: var(--navy-800); --f: var(--cream);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 24px;
  font-weight: 700; font-size: var(--fs-base); line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--b); color: var(--f); border: 2px solid var(--b); border-radius: var(--radius);
  transition: transform var(--t-fast) var(--ease);
}
.btn::before { /* orange fill slides in from the left */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange-500);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { border-color: var(--orange-500); color: var(--navy-900); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-accent { --b: var(--orange-500); --f: var(--navy-900); }
.btn-accent::before { background: var(--navy-800); }
.btn-accent:hover { color: var(--cream); border-color: var(--navy-800); }
.btn-outline { --b: transparent; --f: var(--navy-800); border-color: var(--navy-800); }
.dark .btn-outline { --f: var(--cream); border-color: var(--cream); }
.dark .btn:not(.btn-outline):not(.btn-accent) { --b: var(--cream); --f: var(--navy-800); }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding-inline: 28px; font-size: var(--fs-md); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-weight: 700; text-decoration: none; color: var(--text);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 2px no-repeat;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { color: var(--accent-text); }
.link-arrow:hover svg { transform: translateX(4px); }

.ico { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: square; stroke-linejoin: miter; flex: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }
.site-header.is-dark { background: var(--navy-900); color: var(--cream); border-bottom-color: var(--border-dark); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); } /* fixed height: shrinking on scroll moved the page 12px */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em; min-height: 44px; }
/* logo: outlined SVG (brand/villa-reedy/build.py). Navy parts = currentColor, the VR mark = --logo-cut, so it reverses on dark */
@property --logo-cut { syntax: "<color>"; inherits: true; initial-value: #E9E4E0; }
.logo { --logo-cut: var(--cream); }
.logo svg { width: auto; height: 34px; overflow: visible; }
.is-dark .logo, .menu .logo { --logo-cut: var(--navy-800); }
.site-footer .logo { --logo-cut: var(--navy-900); }
.nav-links { display: none; list-style: none; gap: clamp(16px, 2.2vw, 32px); font-weight: 600; font-size: var(--fs-sm); }
.nav-links > li > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav-links > li > a::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; background: var(--accent); transform: translateX(-50%) scale(0); transition: transform var(--t-fast) var(--ease); }
.nav-links > li > a:hover::after, .nav-links > li > a[aria-current="true"]::after { transform: translateX(-50%) scale(1); }
.nav-cta { display: none; }
.is-dark .nav-cta { --b: var(--cream); --f: var(--navy-800); }
.nav-book { display: none; white-space: nowrap; }
@media (min-width: 1080px) { .nav-book { display: inline-flex; min-height: 48px; padding: 10px 16px; } }
.is-dark .nav-book { --f: var(--cream); border-color: var(--cream); }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 14px;
  background: transparent; border: 2px solid currentColor; font-weight: 700; cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; min-height: 48px; padding: 10px 20px; }
  .menu-btn { display: none; }
}

/* mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--navy-900); color: var(--cream);
  padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.menu nav { flex: 1; display: flex; align-items: center; }
.menu ul { list-style: none; display: grid; gap: 4px; width: 100%; padding-block: 24px; }
.menu ul a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--border-dark); }
.menu ul a:hover { color: var(--orange-500); }
.menu-foot { display: grid; gap: 12px; }
.menu-foot .tel { font-size: var(--fs-lg); font-weight: 800; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
body.no-scroll { overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(28px, 4vw, 52px) 32px; position: relative; overflow: hidden; }
.hero-grid { row-gap: 32px; align-items: center; }
.hero-copy { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(3rem, .5rem + 6vw, 6.25rem); text-transform: uppercase; line-height: .9; margin: 14px 0 18px; }
@media (max-width: 899px) { .hero h1 { font-size: clamp(3rem, calc((100vw - 2 * var(--gutter)) / 6.3), 4rem); } } /* widest line THE PHONE is 6.125em */
.hero h1 mark { position: relative; z-index: 0; background: transparent; color: var(--navy-900); padding: 0 .08em; }
.hero h1 .hl { position: absolute; inset: 0; z-index: -1; background: var(--orange-500); transform-origin: left center; }
.hero h1 .ln { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .ln > span { display: block; }
.hero h1 .stop { display: inline-block; width: .2em; height: .2em; margin-left: .06em; background: var(--navy-800); vertical-align: baseline; }
.hero-sub { font-size: var(--fs-md); max-width: 46ch; margin-bottom: 22px; color: var(--text-muted); } /* 6.3:1 on cream */
.score-form { max-width: 620px; }
.score-label { display: block; font-weight: 800; font-size: var(--fs-sm); margin-bottom: 8px; }
.score-row { display: flex; flex-direction: column; gap: 8px; }
.score-row input { min-height: 58px; font-size: 1.125rem; flex: 1; min-width: 0; }
.score-row .btn { min-height: 58px; }
@media (min-width: 640px) { .score-row { flex-direction: row; gap: 0; } .score-row input { border-right: 0; } }
.score-form .hint { margin-top: 6px; font-size: var(--fs-xs); }
.hero-alt { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 18px; }
.proof { /* sits in .hero-alt: its own ruled row on phones, beside the button on desktop */
  flex-basis: 100%; margin-top: 24px; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: var(--fs-sm); font-weight: 600; padding-top: 20px; border-top: 2px solid var(--navy-800);
}
.proof li { display: inline-flex; align-items: center; gap: 10px; }
.proof li::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
/* signature visual: missed call -> text -> booked, pure CSS, <2KB */
.hero-visual { display: none; }
.lock-wrap { position: relative; width: min(300px, 100%); margin-inline: auto; }
.lock-back { position: absolute; inset: 18px -18px -18px 18px; background: var(--orange-500); border-radius: 36px; }
.lock { position: relative; padding: 22px 16px 26px; background: var(--navy-800); border: 10px solid var(--navy-900); border-radius: 36px; display: grid; gap: 10px; }
.lock-time { color: var(--cream); text-align: center; font-weight: 300; font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; margin-bottom: 10px; }
.lock-time small { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--on-dark-muted); margin-top: 6px; }
.note { background: rgba(244, 241, 238, .96); border-radius: 14px; padding: 10px 12px; display: grid; gap: 1px; font-size: .8rem; line-height: 1.3; }
.note b { font-size: .9rem; }
.note .app { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-600); }
.note .app.red { color: var(--red-700); } .note .app.green { color: var(--green-700); }
.visual-cap { text-align: center; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 26px; }
@media (min-width: 900px) {
  .hero-copy { grid-column: 1 / 9; }
  .hero-visual { display: block; grid-column: 9 / -1; }
}
/* desktop first screen: the work heading and the top of the first project show under the hero (1440x900, 1280x800) */
@media (min-width: 1024px) {
  .hero { padding-block: 16px 20px; }
  .hero h1 { margin: 10px 0 14px; }
  .hero-sub { max-width: 60ch; margin-bottom: 16px; }
  .hero-alt { margin-top: 12px; flex-wrap: nowrap; gap: 28px; }
  .hero-alt .btn { flex: none; }
  .hero-alt .proof { flex: 1 1 auto; margin-top: 0; padding: 0 0 0 28px; border-top: 0; border-left: 2px solid var(--navy-800); gap: 6px 28px; }
  #work { padding-top: 16px; }
  #work .section-head { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; margin-bottom: 16px; }
  #work .section-head .eyebrow { flex-basis: 100%; }
  #work .section-head .h2 { margin: 2px 0 0; }
}


/* ---------- website check ---------- */
.check-grid { row-gap: 40px; align-items: start; }
.check-left { grid-column: 1 / -1; }
.check-right { grid-column: 1 / -1; }
@media (min-width: 900px) { .check-left { grid-column: 1 / 7; } .check-right { grid-column: 8 / -1; } }
.check-form { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.check-form .field-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .check-form .field-row { flex-direction: row; gap: 0; } .check-form input { border-right: 0; } }
.check-form input { flex: 1; min-width: 0; min-height: 56px; font-size: 1.125rem; }
.field-error { color: var(--red-700); font-weight: 600; font-size: var(--fs-sm); min-height: 1.4em; }
.check-progress { margin-top: 18px; }
.check-progress[hidden] { display: none; }
.bar { height: 6px; background: var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--orange-500); transform: scaleX(0); transform-origin: left; }
.steps-live { list-style: none; margin-top: 12px; display: grid; gap: 4px; font-size: var(--fs-sm); }
.steps-live li { color: var(--text-muted); display: flex; gap: 10px; align-items: center; }
.steps-live li::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; flex: none; }
.steps-live li.on { color: var(--text); font-weight: 600; }
.steps-live li.on::before { background: var(--orange-500); border-color: var(--orange-500); }
.steps-live li.done::before { background: var(--navy-800); border-color: var(--navy-800); }
.alert { margin-top: 16px; padding: 16px 18px; border-left: 4px solid var(--red-700); background: var(--white); display: grid; gap: 10px; justify-items: start; }
.alert[hidden] { display: none; }
.check-proof { margin-top: 20px; font-size: var(--fs-sm); color: var(--text-muted); }

.report { background: var(--white); border: 1px solid var(--border); padding: clamp(20px, 3vw, 32px); position: relative; }
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.report-head strong { font-size: var(--fs-md); overflow-wrap: anywhere; }
.tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; }
.gauges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
@media (min-width: 640px) { .gauges { grid-template-columns: repeat(4, 1fr); } }
.gauge { text-align: center; }
.gauge svg { width: 96px; height: 96px; margin: 0 auto 8px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.gauge .track { stroke: var(--navy-100); }
.gauge .val { stroke: var(--c, var(--navy-800)); stroke-dasharray: 251.3; stroke-dashoffset: calc(251.3 - 251.3 * var(--p, 0) / 100); }
.gauge .num { display: block; font-size: var(--fs-xl); font-weight: 900; line-height: 1; margin-top: -76px; height: 68px; color: var(--c, var(--text)); }
.gauge .lbl { display: block; font-weight: 700; font-size: var(--fs-sm); }
.gauge .band { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.is-good { --c: var(--green-700); } .is-mid { --c: var(--amber-700); } .is-poor { --c: var(--red-700); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: var(--fs-xs); color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; background: var(--c); }
.issues { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.issues[hidden], .capture[hidden] { display: none; }
.issues ol { list-style: none; counter-reset: i; display: grid; gap: 14px; margin-top: 12px; }
.issues li { counter-increment: i; display: grid; grid-template-columns: 32px 1fr; gap: 2px 10px; }
.issues li::before { content: counter(i); grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; background: var(--navy-800); color: var(--cream); font-weight: 800; font-size: var(--fs-sm); }
.issues li b { font-weight: 700; }
.issues li span { color: var(--text-muted); font-size: var(--fs-sm); }
.capture { margin-top: 24px; background: var(--navy-800); color: var(--cream); padding: clamp(20px, 3vw, 28px); --text-muted: var(--on-dark-muted); }
.capture h3 { margin-bottom: 6px; }
.capture form { display: grid; gap: 12px; margin-top: 16px; }
.capture .req { color: var(--orange-500); } /* 4.6:1 on navy (orange-700 is 2.5:1) */

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field > label, .fieldset legend { font-weight: 700; font-size: var(--fs-sm); }
.opt { font-weight: 500; color: var(--text-muted); }
.req { color: var(--accent-text); }
input, select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font-size: 1rem;
  background: var(--white); color: var(--navy-800); border: 2px solid var(--navy-800); border-radius: 0;
}
textarea { min-height: 140px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--red-700); }
.hint { font-size: var(--fs-xs); color: var(--text-muted); }
.err { font-size: var(--fs-sm); font-weight: 600; color: var(--red-700); }
.dark .err, .capture .err { color: var(--orange-200); }
.err:empty { display: none; }
.consent { font-size: var(--fs-xs); color: var(--text-muted); }
.consent a { color: inherit; font-weight: 700; }
.hp { position: absolute; left: -9999px; }
.fieldset { border: 0; display: grid; gap: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.pill span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--navy-800); background: var(--white); font-weight: 600; cursor: pointer; }
.pill span::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; }
.pill input:checked + span { background: var(--navy-800); color: var(--cream); }
.pill input:checked + span::before { background: var(--orange-500); border-color: var(--orange-500); }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.pill span:hover { border-color: var(--navy-800); background: var(--paper); }
.pill span:active, .opt-card:active .oc, .sel-btns button:active, .bld-steps button:active, .bld-toggle button:active { transform: translateY(1px); }

/* ---------- services ---------- */
.svc-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.svc {
  position: relative; background: var(--paper); border: 1px solid var(--border); padding: clamp(24px, 3vw, 36px);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-content: start;
}
.svc-ico { grid-row: span 2; width: 56px; height: 56px; color: var(--navy-800); stroke-width: 1.72; }
/* 48-grid icons: stroke scaled so every icon renders a 2px line (2 x 48 / rendered size) */
.panel-list .ico { stroke-width: 3.43; }
.svc-ico .ac { stroke: var(--orange-500); }
.svc-num { font-weight: 900; font-size: var(--fs-sm); color: var(--accent-text); letter-spacing: .08em; }
.svc h3 { font-size: var(--fs-xl); }
.svc > p, .svc ul, .svc .link-arrow { grid-column: 1 / -1; }
.svc > p { margin-top: 14px; font-size: var(--fs-md); }
.svc ul { list-style: none; margin: 14px 0 10px; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.svc li { display: flex; gap: 10px; align-items: baseline; }
.svc li::before { content: ""; width: 7px; height: 7px; background: var(--orange-500); flex: none; transform: translateY(-1px); }
.svc .link-arrow { justify-self: start; margin-top: auto; }
.svc-wide { background: var(--navy-800); color: var(--cream); border-color: var(--navy-800); grid-template-columns: 1fr; --text-muted: var(--on-dark-muted); }
@media (min-width: 900px) { .svc-wide { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; } .svc-wide > p { margin-top: 6px; } }
.svc-wide .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- process ---------- */
.path { position: relative; list-style: none; display: grid; gap: 36px; margin-top: 8px; --progress: 0; }
.path::before, .path::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; background: var(--border-dark); }
.path::after { background: var(--orange-500); transform-origin: top; transform: scaleY(var(--progress)); }
.path > li { position: relative; padding-left: 68px; }
.node { position: absolute; left: 0; top: 0; z-index: 1; width: 45px; height: 45px; display: grid; place-items: center; background: var(--navy-800); border: 3px solid var(--on-dark-muted); font-weight: 900; }
/* reached: an orange layer over the fill and border fades in (opacity only); the number sits above it */
.node::before { content: ""; position: absolute; inset: -3px; z-index: -1; background: var(--orange-500); opacity: 0; transition: opacity var(--t-med) var(--ease); }
.path > li.reached .node { color: var(--navy-900); }
.path > li.reached .node::before { opacity: 1; }
.path h3 { font-size: var(--fs-xl); margin: 6px 0 8px; }
.path p { color: var(--on-dark-muted); max-width: 34ch; }
.path .out { display: inline-block; margin-top: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--cream); }
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .path::before, .path::after { left: 22px; right: 22px; top: 21px; bottom: auto; width: auto; height: 3px; }
  .path::after { transform-origin: left; transform: scaleX(var(--progress)); }
  .path > li { padding-left: 0; padding-top: 72px; }
}

/* ---------- automation ---------- */
.auto-grid { row-gap: 48px; align-items: center; }
.auto-copy { grid-column: 1 / -1; }
.auto-phone { grid-column: 1 / -1; }
@media (min-width: 900px) { .auto-copy { grid-column: 1 / 7; } .auto-phone { grid-column: 8 / -1; } }
.auto-copy .btn { margin-top: 28px; }
.auto-points { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.auto-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.auto-points .ico { color: var(--accent-text); margin-top: 1px; }
.phone {
  width: min(100%, 360px); margin-inline: auto; background: var(--navy-900); padding: 14px; border-radius: 40px;
  box-shadow: 0 30px 60px -30px rgba(15, 29, 40, .6);
}
.phone-screen { background: var(--white); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; height: 600px; }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; border-bottom: 1px solid var(--navy-100); }
.phone-bar .av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-800); color: var(--cream); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.phone-bar b { display: block; font-size: var(--fs-sm); line-height: 1.2; }
.phone-bar small { font-size: var(--fs-xs); color: var(--text-muted); }
.thread { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.msg { max-width: 82%; padding: 9px 13px; font-size: .9rem; line-height: 1.35; border-radius: 18px; animation: pop var(--t-med) var(--ease) both; }
.msg.in { align-self: flex-start; background: var(--navy-100); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--navy-800); color: var(--cream); border-bottom-right-radius: 4px; }
.msg.sys { align-self: center; background: transparent; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; text-align: center; padding: 4px 8px; display: flex; align-items: center; gap: 6px; }
.msg.sys.hot { color: var(--red-700); }
.msg.sys.win { color: var(--green-700); }
.msg time { display: block; font-size: .7rem; opacity: .7; margin-top: 3px; }
.msg.sys time { display: inline; margin: 0; opacity: 1; } /* full strength: 70% failed AA on white (owner-approved) */
.typing { align-self: flex-start; background: var(--navy-100); border-radius: 18px; padding: 12px 14px; display: flex; gap: 4px; }
.typing.out { align-self: flex-end; background: var(--navy-800); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-600); animation: blink 1s infinite; }
.typing.out i { background: var(--cream); }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.phone-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.phone-foot .tag { color: var(--text-muted); }
.replay { background: none; border: 0; cursor: pointer; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 4px; }
.replay .ico { width: 18px; height: 18px; }

/* ---------- pricing ---------- */
.price-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .price-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .bundle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .price-grid:not(.bundle-grid) { grid-template-columns: repeat(4, 1fr); } }
.bundle-grid .price { border-top-color: var(--orange-500); }
.price-book { margin-top: clamp(28px, 4vw, 40px); display: flex; justify-content: center; }
.bundles { margin-bottom: clamp(32px, 5vw, 48px); }
#pricing .eyebrow + .price-grid { margin-top: 16px; }
.price { background: var(--paper); border: 1px solid var(--border); border-top: 4px solid var(--navy-800); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.price h3 { font-size: var(--fs-xl); }
.price .from { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.price .amt { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin-top: 4px; }
.ticks { list-style: none; display: grid; gap: 8px; font-size: var(--fs-sm); flex: 1; align-content: start; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ico { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; }

.faq { margin-top: clamp(48px, 7vw, 80px); }
#faq .faq { margin-top: 0; }
.faq h3 { font-size: var(--fs-2xl); margin-bottom: 18px; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 60px; padding: 14px 0; font-weight: 700; font-size: var(--fs-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex: none; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform var(--t-fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; max-width: 65ch; color: var(--text-muted); }

/* ---------- work ---------- */
.work-grid { display: grid; gap: 32px 24px; }
@media (min-width: 900px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .work-grid .featured { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: center; }
}
.case a.frame-link { display: block; text-decoration: none; }
.browser { border: 2px solid var(--navy-800); background: var(--white); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--navy-800); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-600); }
.browser-bar i:first-child { background: var(--orange-500); }
.browser-bar span { margin-left: 10px; flex: 1; background: var(--navy-700); color: var(--on-dark-muted); font-size: .72rem; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.shot img { width: 100%; height: auto; transition: transform 4.5s cubic-bezier(.4, 0, .2, 1); }
@media (hover: hover) { .case a.frame-link:hover .shot img { transform: translateY(calc(-100% + var(--frame-h, 300px))); } }
.case-meta { padding-top: 16px; display: grid; gap: 8px; }
.case h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.case h3 a { text-decoration: none; }
.case h3 a:hover { color: var(--accent-text); }
.case h3 .ico { width: 18px; height: 18px; }
.case p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 52ch; }
.featured .case-meta h3 { font-size: var(--fs-2xl); }
.featured .case-meta p { font-size: var(--fs-md); }
.pills-static { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.pills-static li { font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border: 1px solid var(--border); }
.own { color: var(--accent-text); font-weight: 700; }

/* ---------- testimonials (component ready, section hidden until real quotes exist) ---------- */
.quotes { display: grid; gap: 24px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { position: relative; background: var(--white); border: 1px solid var(--border); padding: 56px 24px 24px; }
.quote::before { content: "\201C"; position: absolute; top: -8px; left: 18px; font-size: 6rem; font-weight: 900; line-height: 1; color: var(--orange-500); }
.quote blockquote { font-size: var(--fs-md); font-weight: 600; }
.quote figcaption { margin-top: 16px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- why us ---------- */
.statement { font-size: var(--fs-3xl); font-weight: 900; letter-spacing: -.03em; line-height: .95; text-wrap: balance; max-width: 18ch; margin: .35em 0 clamp(40px, 6vw, 72px); }
.why-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-grid > div { border-top: 3px solid var(--orange-500); padding-top: 20px; }
.why-grid h3 { margin-bottom: 8px; }
.why-grid p { color: var(--on-dark-muted); }
.agents-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .agents-grid { grid-template-columns: 1.2fr 1fr; align-items: start; gap: 48px; } }
.agents-points { list-style: none; display: grid; gap: 28px; }
.agents-points li { border-top: 3px solid var(--orange-500); padding-top: 18px; }
.agents-points h3 { margin-bottom: 6px; }
.agents-points p { color: var(--text-muted); }
.runlog { background: var(--navy-800); color: var(--cream); padding: clamp(20px, 3vw, 28px); font-variant-numeric: tabular-nums; }
.runlog h3 { margin-bottom: 8px; }
.runlog ol { list-style: none; display: grid; }
.runlog li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--border-dark); }
.runlog li span, .runlog p { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.runlog p { margin-top: 14px; }
.runlog a { color: var(--cream); font-weight: 700; }
.team { margin-bottom: clamp(40px, 6vw, 64px); }
.team-h { margin-bottom: 16px; }
.team-list { list-style: none; display: grid; gap: 16px 32px; }
@media (min-width: 700px) { .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-list li { display: flex; gap: 16px; align-items: center; }
.team-list b { display: block; font-size: var(--fs-lg); }
.team-list span:not(.team-av) { color: var(--on-dark-muted); }
.team-av { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: var(--orange-500); color: var(--navy-900); font-weight: 900; font-size: 1.5rem; }

/* ---------- contact ---------- */
.contact-grid { row-gap: 48px; }
.contact-info { grid-column: 1 / -1; }
.contact-form { grid-column: 1 / -1; }
@media (min-width: 900px) { .contact-info { grid-column: 1 / 6; } .contact-form { grid-column: 7 / -1; } }
.contact-list { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
.contact-list a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: var(--fs-lg); min-height: 48px; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--accent-text); }
.contact-list .ico { width: 26px; height: 26px; color: var(--accent-text); }
.contact-list .note { display: flex; gap: 12px; align-items: center; color: var(--text-muted); font-weight: 600; }
.call-big { display: inline-flex; }
@media (min-width: 900px) { .call-big { display: none; } }
.book-big { display: flex; width: 100%; margin-top: 12px; }
@media (min-width: 900px) { .book-big { display: inline-flex; width: auto; margin-top: 24px; } }
.capture-book { margin-top: 16px; color: var(--on-dark-muted); }
.capture-book a { color: var(--cream); font-weight: 700; }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }
.form-grid .two { display: grid; gap: 18px; }
.form-status { font-weight: 700; }
.form-status.bad { color: var(--red-700); }
.capture .form-status.bad { color: var(--orange-200); } /* same as .capture .err; red-700 is 2.3:1 on navy */
.success { background: var(--navy-800); color: var(--cream); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; justify-items: start; }
.success[hidden] { display: none; }
.success h3 { font-size: var(--fs-2xl); }
.success p { color: var(--on-dark-muted); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: var(--on-dark-muted); padding-top: clamp(56px, 8vw, 96px); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--orange-500); }
.foot-grid { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .logo { color: var(--cream); }
.foot-brand p { margin-top: 14px; max-width: 36ch; }
.site-footer h2 { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); font-weight: 700; margin-bottom: 14px; line-height: 1.4; }
.site-footer ul { list-style: none; display: grid; gap: 4px; }
.site-footer ul a, .site-footer ul span { display: inline-flex; align-items: center; min-height: 36px; }
.foot-bar { border-top: 1px solid var(--border-dark); padding-block: 22px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.foot-bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bar nav a { min-height: 44px; display: inline-flex; align-items: center; }
.to-top { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--on-dark-muted); color: var(--cream); }
.to-top:hover { border-color: var(--orange-500); }
.to-top .ico { width: 20px; height: 20px; }

/* ---------- sticky mobile CTA ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(15, 29, 40, .96);
  transform: translateY(110%); transition: transform var(--t-med) var(--ease);
}
.mobile-cta.show { transform: none; }
.mobile-cta .btn { min-height: 48px; padding: 10px; }
.mobile-cta .btn-outline { --f: var(--cream); border-color: var(--cream); }
@media (min-width: 900px) { .mobile-cta { display: none; } }
/* phones: keep the footer's last row and focused elements clear of the bar (8 + 48 + 8 = 64px) */
@media (max-width: 899px) {
  html:has(.mobile-cta) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .site-footer:has(~ .mobile-cta) .foot-bar { padding-bottom: calc(22px + 64px + env(safe-area-inset-bottom)); }
}

/* ---------- legal pages ---------- */
.legal { padding-block: clamp(48px, 7vw, 96px); }
.legal h1 { font-size: var(--fs-3xl); margin-bottom: 24px; }
.legal h2 { font-size: var(--fs-xl); margin: 40px 0 12px; letter-spacing: -.02em; line-height: 1.1; }
.legal p, .legal li { max-width: 68ch; margin-bottom: 12px; }
.legal ul { padding-left: 1.2em; }
.legal a { font-weight: 700; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
    .shot img { transform: none !important; }
}

/* ================= v2 components ================= */

/* nav panels */
.nav-main { display: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.sq-btn { display: none; width: 48px; height: 48px; place-items: center; border: 2px solid currentColor; color: inherit; }
.sq-btn:hover { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }
.sq-btn .ico { width: 20px; height: 20px; }
.nav-links { align-items: center; }
.nav-trigger { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; background: none; border: 0; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; position: relative; }
.nav-trigger .ico { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.nav-trigger[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav-trigger[aria-current="true"]::after, .nav-trigger:hover::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; background: var(--accent); transform: translateX(-50%); }
.has-panel { position: static; }
.panel { --focus: var(--navy-800); position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); color: var(--navy-800); border-top: 1px solid var(--border); border-bottom: 3px solid var(--orange-500); box-shadow: 0 24px 40px -24px rgba(15, 29, 40, .4); }
.panel:not([hidden]) { display: grid; padding: 12px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.panel-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.panel-list a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; border: 1px solid transparent; min-height: 44px; white-space: nowrap; }
.panel-list a:hover, .panel-list a:focus-visible { border-color: var(--border); background: var(--white); }
.panel-list .ico { width: 28px; height: 28px; flex: none; }
.panel-list .ico .ac, .svc .ac, .pin-ico .ac { stroke: var(--orange-500); }
.panel-list b { font-weight: 800; }
.site-header { position: sticky; }
.site-header .wrap.nav { position: static; }
@media (min-width: 900px) {
  .nav-main { display: block; }
  .sq-btn { display: grid; }
}
@media (max-width: 1199px) { .hide-md { display: none; } }

/* check section explanation */
.explain { display: grid; gap: 14px; margin: 24px 0 28px; }
@media (min-width: 640px) { .explain { grid-template-columns: 1fr 1fr; } }
.explain div { border-left: 3px solid var(--orange-500); padding-left: 14px; }
.explain dt { font-weight: 800; }
.explain dd { color: var(--text-muted); font-size: var(--fs-sm); }
.progress-title { font-weight: 800; margin-bottom: 10px; overflow-wrap: anywhere; }
.check-progress { background: var(--white); border: 1px solid var(--border); padding: 20px; margin-bottom: 16px; }
.check-right .alert { margin: 0 0 16px; }

/* services: stacked cards by default (phones, touch, reduced motion, no JS); motion.js turns on .is-shelf on desktop */
.svc-list { display: grid; gap: 20px; }
.svc { grid-template-columns: 1fr; }
.svc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.svc-head h3 { font-size: var(--fs-xl); }
.svc .brighten { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; margin-top: 14px; }
.svc > p:not(.brighten) { font-size: var(--fs-md); margin-top: 10px; }
.svc-wide { margin-top: 0; }
.shelf-progress { display: none; }

/* process extras */
.step-more { margin-top: 12px; }
.step-more summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--cream); list-style: none; }
.step-more summary::-webkit-details-marker { display: none; }
.step-more summary::before { content: "+"; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--orange-500); color: var(--orange-500); font-weight: 900; line-height: 1; }
.step-more[open] summary::before { content: "−"; }
.cols { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: var(--fs-sm); color: var(--on-dark-muted); margin: 6px 0 8px; }
.cols li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--orange-500); margin-right: 8px; vertical-align: middle; }
.step-more .link-arrow { color: var(--cream); }
.path > li.flash { outline: 3px solid var(--orange-500); outline-offset: 10px; }
.self-select { margin-top: clamp(48px, 6vw, 72px); }
.self-select h2, .self-select h3 { font-size: var(--fs-2xl); margin-bottom: 18px; }
.sel-sec { padding-block: clamp(48px, 6vw, 80px); }
.sel-sec .self-select { margin-top: 0; }
.sel-btns { display: grid; gap: 12px; }
@media (min-width: 900px) { .sel-btns { grid-template-columns: repeat(3, 1fr); } }
.sel-btns button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; min-height: 72px; padding: 16px 20px; background: transparent; color: var(--cream); border: 2px solid var(--border-dark); font-weight: 800; font-size: var(--fs-md); cursor: pointer; }
.sel-btns button:hover { border-color: var(--orange-500); background: var(--navy-700); }
.sel-btns .ico { color: var(--orange-500); transition: transform var(--t-fast) var(--ease); }
.sel-btns button:hover .ico { transform: translateX(4px); }
.care { margin-top: clamp(40px, 5vw, 56px); display: grid; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--border-dark); }
.care .ico { width: 36px; height: 36px; color: var(--orange-500); }
.care p { color: var(--on-dark-muted); }
.care b { color: var(--cream); }
@media (min-width: 900px) { .care { grid-template-columns: auto 1fr auto; } }

/* automation header */
.chat-head { width: min(100%, 360px); margin: 0 auto 14px; display: flex; align-items: center; gap: 10px; }
.chat-head .av, .phone-bar .av { width: 34px; height: 34px; border-radius: 50%; background: var(--orange-500); color: var(--navy-900); display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; }
.chat-head b { display: block; line-height: 1.2; }
.chat-head small { color: var(--text-muted); font-size: var(--fs-xs); }
.chat-head .tag { margin-left: auto; }
.phone-foot { width: min(100%, 360px); margin-inline: auto; }

/* pricing extras */
.price .per { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }
.price .amt { font-size: var(--fs-3xl); }
.extra { font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; }

/* footer extras */
.legal-line { display: block; font-size: var(--fs-xs); margin-top: 4px; }
.to-top { border-radius: 0; }

/* project highlights */
.case .case-lead { color: var(--text); font-weight: 600; }
.featured .case-meta .case-lead { font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; }
.work-hint { display: none; }
@media (hover: hover) { .work-hint { display: block; } }
.case-points { list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.case-points li { display: flex; gap: 8px; align-items: flex-start; }
.case-points .ico { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; flex: none; }

/* ================= motion pass: modes, masks, hovers =================
   Every colour below already existed in this file before the pass. */
/* Lenis (desktop only) */
html.lenis, html.lenis body { height: auto; }
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* header: hides on fast scroll down, returns on any scroll up (motion.js toggles .is-hidden) */
.site-header { transition: transform var(--t-med) var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
/* dropdown panels open with a short downward wipe */
.panel:not([hidden]) { animation: wipeDown 220ms var(--ease) both; }
@keyframes wipeDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* line masks created by SplitText */
.line-mask { overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

/* services (desktop + fine pointer + motion allowed): an uneven two-column spread whose rows drift
   in opposite directions as you scroll past. No pinning — the page never stops. */
html { overflow-x: clip; }
.is-shelf .shelf-track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.is-shelf .svc { align-content: start; }
.is-shelf .svc:nth-child(1) { grid-column: span 7; } .is-shelf .svc:nth-child(2) { grid-column: span 5; }
.is-shelf .svc:nth-child(3) { grid-column: span 5; } .is-shelf .svc:nth-child(4) { grid-column: span 7; }
.is-shelf .svc:nth-child(5) { grid-column: 1 / -1; }
.is-shelf .svc .brighten { font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -.02em; font-weight: 900; }
.is-shelf .svc-wide { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
.shelf-progress i { display: block; width: 120px; height: 2px; background: var(--border); }
.shelf-progress b { display: block; height: 100%; background: var(--orange-500); transform: scaleX(0); transform-origin: left center; }

/* process: sticky card stack (desktop + motion allowed) */
.path.is-stack { display: block; }
.path.is-stack::before, .path.is-stack::after { display: none; }
.path.is-stack > li { position: sticky; top: calc(76px + var(--k, 0) * 16px); background: var(--navy-800); border: 1px solid var(--border-dark); padding: 28px 32px 28px 104px; margin-bottom: 20px; transform-origin: center top;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); grid-template-rows: auto auto 1fr; column-gap: clamp(24px, 4vw, 64px); }
.path.is-stack > li .node { left: 32px; top: 28px; }
.path.is-stack > li p { max-width: 52ch; }
.path.is-stack > li > :not(.step-art, .node) { grid-column: 1; }
.path.is-stack > li > .step-art { grid-column: 2; grid-row: 1 / -1; align-self: center; width: 100%; max-width: none; margin: 0; }

/* process step visuals: hand-built line art on the a-* style. Final state is the default (no JS, reduced motion);
   .js holds the start state until app.js adds .in once the card is half on screen. Transform and opacity only.
   Off: remove data-draw from the .step-art (the drawing then simply shows its final state). */
.step-art { margin-top: 20px; max-width: 360px; color: var(--cream); }
.step-art svg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.step-art .art { stroke-width: 2.5; }
.step-art .ac { stroke: var(--orange-500); }
.step-art .fd { fill: var(--navy-900); }
.step-art .fo, .step-art .fc { stroke: none; fill: var(--orange-500); }
.step-art .fc { fill: var(--cream); }
.step-art .ghost { stroke: var(--on-dark-muted); opacity: .4; }
.step-art text { stroke: none; fill: var(--cream); font-size: 9px; font-weight: 700; }
.step-art text.m { fill: var(--on-dark-muted); font-weight: 400; }
.step-art text.d { fill: var(--navy-900); }
.step-art text.o { fill: var(--orange-500); }
.step-art text.big { font-size: 18px; font-weight: 900; }
.step-art .a { transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--ease), opacity 600ms var(--ease); transition-delay: calc(var(--d, 0) * 180ms); }
.step-art .up3, .step-art .dn1 { transition-duration: 900ms; }
@media (prefers-reduced-motion: no-preference) {
  .js .step-art[data-draw]:not(.in) .a { opacity: 0; transform: translateY(10px); }
  .js .step-art[data-draw]:not(.in) .drop { transform: translateY(-16px); }
  .js .step-art[data-draw]:not(.in) .pop { transform: scale(0); }
  .js .step-art[data-draw]:not(.in) .up3 { opacity: 1; transform: translateY(84px); }
  .js .step-art[data-draw]:not(.in) .dn1 { opacity: 1; transform: translateY(-28px); }
}


/* hover + focus: inner content shifts in reading direction while a 1px rule draws in from the left. No scale, no shadow. */
.price { position: relative; }
.price::after, .svc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--navy-800); transform: scaleX(0); transform-origin: left center; transition: transform 400ms var(--ease); }
.svc-wide::after { background: var(--orange-500); }
.price > *, .svc > * { transition: transform 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .price:hover::after, .svc:hover::after { transform: scaleX(1); }
  .price:hover > *, .svc:hover > * { transform: translateX(8px); }
}
.price:focus-within::after, .svc:focus-within::after { transform: scaleX(1); } /* no content shift on focus: the focused control stays put */
/* text links: underline grows from the centre */
.link-arrow { position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--accent-text); transform: scaleX(0); transform-origin: center; transition: transform 200ms var(--ease); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }
/* work: name shifts right and a rule draws under it */
.case h3 { transition: transform 400ms var(--ease); }
.case h3 a { position: relative; }
.case h3 a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--navy-800); transform: scaleX(0); transform-origin: left center; transition: transform 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .case:hover h3 { transform: translateX(8px); } .case:hover h3 a::after { transform: scaleX(1); } }
.case:focus-within h3 { transform: translateX(8px); } .case:focus-within h3 a::after { transform: scaleX(1); }
.shot picture { display: block; }

/* hero cards: arrive 400ms apart, 8px up and fade in, once. Visible without JS (.js) and with reduced motion.
   Held until app.js adds .go (after the intro hands over, once half the phone is on screen). */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-visual .note { animation: noteIn .5s cubic-bezier(.2, .7, .2, 1) .3s both paused; }
  .js .hero-visual .n2 { animation-delay: .7s; }
  .js .hero-visual .n3 { animation-delay: 1.1s; }
  .js .hero-visual.go .note { animation-play-state: running; }
}
@keyframes noteIn { from { opacity: 0; transform: translateY(8px); } }
/* "Not sure" panel sits on navy: its outline button uses the existing cream */
.svc-wide .btn-outline { --f: var(--cream); border-color: var(--cream); }

/* ================= one-time "blueprint, build, dock" intro (intro.js) =================
   Uses only existing colour tokens. Cover is in place before first paint; failsafe hides it at 3s if intro.js never runs. */
html.intro-pending::after { content: ""; position: fixed; inset: 0; z-index: 299; background: var(--cream); animation: introFailsafe 0s linear 3s forwards; }
@keyframes introFailsafe { to { visibility: hidden; } }
.intro { position: fixed; inset: 0; z-index: 300; overflow: clip; pointer-events: auto; }
.intro-sheet { position: absolute; inset: 0; background: var(--cream); }
.intro-line { position: absolute; background: var(--border); }
.intro-line.strong { background: var(--navy-800); }
.intro-mark { position: absolute; overflow: visible; color: var(--navy-800); }
html.intro-logo .site-header .logo svg { opacity: 0; } /* its copy is flying in; shown again in the same frame it lands */
.intro-label { position: absolute; font: 600 10.5px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; background: var(--orange-500); color: var(--navy-900); padding: 2px 6px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html.intro-pending::after { display: none; } }

/* ================= "See your site" preview builder (UI only — preview colours live inside the iframe) ================= */
.bld { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .bld { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; } }
@media (min-width: 1200px) { .bld { grid-template-columns: minmax(340px, 1fr) minmax(0, 2fr); } } /* preview gets two thirds */
.bld-panel { background: var(--white); border: 1px solid var(--border); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 18px; }
/* steps: one connected progress bar. Done = navy square with a tick, current = orange square + bold label, not reached = dashed */
.bld-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: bs; }
.bld-steps li { position: relative; counter-increment: bs; }
.bld-steps li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.bld-steps li:has(> .done) + li::before { background: var(--navy-800); }
.bld-steps button { position: relative; z-index: 1; width: 100%; min-height: 48px; padding: 0 2px 2px; display: grid; justify-items: center; align-content: start; gap: 6px; background: none; border: 0; color: var(--text-muted); font-weight: 600; font-size: clamp(.6875rem, 2.6vw, .8125rem); line-height: 1.2; cursor: pointer; }
.bld-steps button::before { content: counter(bs); width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--navy-800); background: var(--white); color: var(--navy-800); font-weight: 800; font-size: var(--fs-sm); }
.bld-steps button:hover:not(:disabled)::before { border-color: var(--orange-500); }
.bld-steps button.done { color: var(--text); }
.bld-steps button.done::before { content: ""; background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9E4E0' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center / 18px no-repeat; }
.bld-steps button[aria-current="step"] { color: var(--text); font-weight: 800; }
.bld-steps button[aria-current="step"]::before { content: counter(bs); background: var(--orange-500); background-image: none; border-color: var(--navy-800); color: var(--navy-900); }
.bld-steps button:disabled { cursor: not-allowed; }
.bld-steps button:disabled::before { border-style: dashed; border-color: var(--navy-300); color: var(--text-muted); }
.bld-count { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: -8px; }
.bld-step { border: 0; display: grid; gap: 16px; min-width: 0; }
.bld-step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.bld-h { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 10px; outline-offset: 4px; }
.bld-h::before { content: ""; width: 12px; height: 12px; background: var(--orange-500); flex: none; }
.bld-sub { font-weight: 800; font-size: var(--fs-sm); margin: 8px 0 -8px; } /* label sits 8px over its cards, groups 24px apart */
.bld-wordmark { border: 1px dashed var(--border); padding: 16px; display: grid; gap: 6px; }
.bld-wordmark .tag { justify-self: start; color: var(--text-muted); }
#bWord { font-size: 28px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; color: var(--navy-800); }

/* option cards = real radio inputs */
.bld-cards { display: grid; gap: 10px; }
.bld-cards.trades { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.bld-cards.styles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bld-cards.moods, .bld-cards.goals { grid-template-columns: repeat(3, 1fr); }
.bld-cards.accents { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.opt-card { position: relative; display: block; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.opt-card .oc { position: relative; display: grid; gap: 8px; justify-items: start; align-content: start; min-height: 48px; height: 100%; padding: 12px 32px 12px 12px; border: 2px solid var(--border); background: var(--white); font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; }
.opt-card:hover .oc { border-color: var(--navy-800); }
.opt-card input:checked + .oc { border-color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--navy-800); }
.opt-card .oc-tick { display: none; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 2px; background: var(--navy-800); color: var(--cream); stroke-width: 3; }
.opt-card input:checked + .oc .oc-tick { display: block; }
.opt-card input:focus-visible + .oc { outline: 3px solid var(--focus); outline-offset: 3px; }
.opt-card .oc > svg:not(.oc-tick) { color: var(--navy-800); stroke-width: 1.72; } /* 24-grid icon drawn at 28px: keeps a 2px line */
.oc small { font-weight: 500; color: var(--text-muted); font-size: var(--fs-xs); }
/* style thumbnails: tiny mock layouts, drawn in the site's own neutrals */
.mm { width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--border); background: var(--paper); position: relative; overflow: hidden; }
.mm i { position: absolute; display: block; background: var(--navy-300); }
.mm i.a { background: var(--orange-500); }
.mm i.t { background: var(--navy-800); }
/* swatches (preview colours are set inline per swatch) */
.sw { width: 100%; height: 38px; border: 1px solid var(--border); display: flex; }
.sw b { flex: 1; }
.bld-custom .bld-hex, .bld-share .bld-hex { display: flex; gap: 8px; }
.bld-hex input[type="color"] { width: 56px; padding: 4px; flex: none; }
.bld-nav { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.bld-skip { background: none; border: 0; cursor: pointer; font-size: var(--fs-base); }

/* preview stage */
.bld-stage { min-width: 0; display: grid; gap: 12px; }
.bld-tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.bld-tools:not(:has(> :not([hidden]))) { display: none; }
/* Desktop / Phone toggle lives in the preview's own browser bar */
.bld-frame .browser-bar { padding-block: 6px; }
.bld-frame .browser-bar span, .bld-stage > * { min-width: 0; } /* address shrinks (ellipsis) so the toggle never pushes the page wide */
.bld-toggle { display: inline-flex; flex: none; margin-left: auto; border: 2px solid var(--on-dark-muted); }
.bld-toggle button { min-height: 48px; padding: 4px 12px; border: 0; background: none; color: var(--cream); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.bld-toggle button:hover { background: var(--navy-700); }
.bld-toggle button[aria-pressed="true"] { background: var(--cream); color: var(--navy-800); }
@media (max-width: 639px) { .bld-frame .browser-bar em { display: none; } }
/* switching view: short fade-in (the global reduced-motion rule cuts it to nothing) */
.bld-view.is-switching { animation: bldSwitch 240ms var(--ease); }
@keyframes bldSwitch { from { opacity: 0; transform: scale(.985); } }
.bld-full { min-height: 44px; background: none; border: 0; font-weight: 700; text-decoration: underline; cursor: pointer; }
.bld-frame .browser-bar em { font-style: normal; font-size: .68rem; color: var(--on-dark-muted); margin-left: 8px; white-space: nowrap; }
.bld-view { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--white); }
.bld-view.is-phone { aspect-ratio: auto; height: 680px; background: var(--paper); display: grid; place-items: center; }
.bld-view iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: var(--white); transition: opacity 300ms var(--ease); }
.bld-view.is-phone iframe { left: 50%; top: 20px; border: 10px solid var(--navy-900); border-radius: 36px; }
/* building moment: mini site assembling in the visitor's colours (--bb-* set inline) + live % */
.bld-view .bb { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: var(--navy-900); color: var(--on-dark); transition: opacity 420ms var(--ease); }
.bb.out { opacity: 0; }
.bb-site { position: relative; width: min(340px, 72vw); aspect-ratio: 4 / 3; display: grid; grid-template-rows: 22px 2.2fr 8px 8px 1.5fr 14px; gap: 8px; padding: 12px; background: var(--bb-bg, var(--white)); overflow: hidden; outline: 1px solid var(--border-dark); outline-offset: 6px; }
.bb-blk { position: relative; display: block; min-width: 0; font-style: normal; }
.bb-blk::before { content: ""; position: absolute; inset: 0; border: 1px dashed var(--bb-text, var(--navy-800)); opacity: .3; }
.bb-blk::after { content: ""; position: absolute; inset: 0; background: var(--bb-surface, var(--paper)); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease); }
.bb-blk.on::after { transform: scaleX(1); }
.bb-hero::after { background: var(--bb-acc, var(--navy-600)); }
.bb-line::after, .bb-foot::after { background: var(--bb-text, var(--navy-800)); }
.bb-line.short { width: 60%; }
.bb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bb-cards .bb-blk::after { border-top: 3px solid var(--bb-acc, var(--navy-600)); }
.bb-bar b { position: absolute; z-index: 1; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; color: var(--bb-text, var(--navy-800)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 300ms 200ms; }
.bb-bar.on b { opacity: 1; }
.bb-scan { position: absolute; inset: 0; border-top: 2px solid var(--orange-500); } /* full height so translateY(n%) = n% of the frame */
.bb-pct { margin: 10px 0 0; font-size: var(--fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bb-track { width: min(340px, 72vw); height: 4px; background: var(--border-dark); }
.bb-track i { display: block; height: 100%; background: var(--orange-500); transform: scaleX(0); transform-origin: left; }
.bb-step { margin: 0; min-height: 1.4em; font-size: var(--fs-sm); color: var(--on-dark-muted); text-align: center; }
.bld-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.bld-after { display: grid; gap: 14px; }
.bld-time { font-weight: 700; }
.bld-note { border-left: 3px solid var(--orange-500); padding-left: 12px; font-size: var(--fs-sm); }
.bld-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.bld-actions button.link-arrow { background: none; border: 0; cursor: pointer; font-size: var(--fs-base); }
.bld-share label { font-weight: 700; font-size: var(--fs-sm); display: block; margin-bottom: 6px; }
.bld [hidden], .bld-sticky[hidden] { display: none !important; }
.bld-mail { display: grid; gap: 12px; background: var(--white); border: 1px solid var(--border); padding: 18px; }
.bld-mail .two { display: grid; gap: 12px; }
@media (min-width: 640px) { .bld-mail .two { grid-template-columns: 1fr 1fr; } }
.bld-disc { font-size: var(--fs-xs); color: var(--text-muted); }
.bld-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--navy-900); }
@media (min-width: 1024px) { .bld-sticky { display: none !important; } }
.preview-note { border-left: 3px solid var(--orange-500); padding: 8px 12px; background: var(--paper); font-weight: 700; }
dialog.bld-dialog { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--navy-900); }
dialog.bld-dialog::backdrop { background: var(--navy-900); }
dialog.bld-dialog iframe { width: 100%; height: calc(100% - 56px); border: 0; background: var(--white); }
.bld-dialog-bar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: var(--cream); font-weight: 700; }
.bld-dialog-bar button { min-height: 44px; padding: 0 16px; background: none; color: var(--cream); border: 2px solid var(--cream); font-weight: 700; cursor: pointer; }

/* large line illustrations in empty spaces (symbols a-*, drawn on a 64 grid) */
.art { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-art { position: absolute; right: clamp(24px, 3vw, 36px); bottom: clamp(24px, 3vw, 36px); width: clamp(88px, 9vw, 140px); height: clamp(88px, 9vw, 140px); color: var(--navy-800); pointer-events: none; }
@media (max-width: 639px) { .svc-art { display: none; } }
.head-row { display: grid; gap: 32px; align-items: center; }
.head-art { display: none; }
@media (min-width: 1100px) {
  .head-row { grid-template-columns: minmax(0, 1fr) auto; }
  .head-art { display: flex; gap: clamp(32px, 4vw, 72px); color: var(--navy-800); margin-bottom: clamp(32px, 5vw, 56px); }
  .head-art .art { width: clamp(96px, 8vw, 140px); height: clamp(96px, 8vw, 140px); }
  .dark .head-art { color: var(--cream); margin-bottom: clamp(40px, 6vw, 72px); }
}
/* hide the card illustration when a card is too narrow to leave it a free corner */
.svc { container-type: inline-size; }
@container (max-width: 480px) { .svc-art { display: none; } }
/* cards slide in from 32px right; clip so that never makes the page scroll sideways (clip keeps sticky/pins working) */
#services { overflow-x: clip; }