@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
/* Chalkline Digital — site styles (dark)
   Palette: Night slab, Chalk Blue, Chalk Light, Tape Yellow (small accents only) */
:root {
  color-scheme: dark;
  --bg: #020203;
  --deep: #000000;
  --surface: #0B0C0E;
  --surface-2: #101114;
  --line: #1C1E22;
  --line-2: #2A2D32;
  --text: #ECEDEF;
  --muted: #A9AFB7;
  --blue: #2553D8;
  --blue-deep: #1D46C0;
  --blue-light: #8DA6FF;
  --chalk: #5B84FF;
  --blue-wash: #111B3A;
  --tape: #F2C230;
  --error: #FF8A80;
  --g: clamp(16px, 4.2vw, 40px);
  --r: 4px;
  --f-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 22px 48px -24px rgba(0, 0, 0, .8);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--text); font: 400 1.0625rem/1.6 var(--f-sans); -webkit-font-smoothing: antialiased;
  /* top of the page: Chalk Blue sprayed across on an angle, breaking up into mist and specks as it fades into the black */
  background: url("img/slab-noise.svg"), url("img/spray-mob.webp") center top / auto 420px no-repeat, var(--bg);
}
@media (min-width: 1040px) {
  body { background: url("img/slab-noise.svg"), url("img/spray-desk.webp") center top / auto calc(min(100vw, 1440px) * .6944) no-repeat, var(--bg); }
}
::selection { background: var(--blue); color: #fff; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
p, figure { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 4px; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-lg { width: 32px; height: 32px; stroke-width: 1.7; }
.wrap { width: min(100% - 2 * var(--g), 1200px); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2 { font-family: var(--f-sans); font-weight: 700; font-stretch: 80%; letter-spacing: -.02em; }
h1 { font-size: clamp(3.1rem, 7.6vw, 6.4rem); line-height: .92; }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: .96; }
h3 { font: 700 1.25rem/1.2 var(--f-sans); }
.kicker { font: 700 .8125rem/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 14px; }
.kicker-light { color: var(--blue-light); }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 34em; }
.label { font: 700 .8125rem/1.3 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-light); }

/* ---------- buttons: no boxes, a line grows in on hover ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; cursor: pointer; text-decoration: none;
  font: 700 1rem/1.1 var(--f-sans); padding: .3em .05em; margin-block: .1em; border-radius: 0; border: 0;
  background: none; color: inherit; position: relative;
  transition: transform .18s ease;
}
.btn::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--blue-light);
  transition: right .3s cubic-bezier(.2, .7, .3, 1);
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px) scale(1.035); }
.btn:hover::after, .btn:focus-visible::after { right: 0; }
.btn .ic { transition: transform .18s ease; }
.btn:hover .ic { transform: translateX(3px); }
.btn-blue { color: var(--blue-light); }
.btn-ink { color: var(--text); }
.btn-lg { font-size: 1.0625rem; }
.btn-sm { font-size: .9375rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }

/* ---------- header ---------- */
/* see-through over the blue at the top of the page, a dark glass bar once you scroll */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s, border-color .2s; }
.site-header.is-scrolled { background: rgba(2, 2, 3, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.site-header:not(.is-scrolled) .btn-blue { color: #fff; }
.site-header:not(.is-scrolled) .btn::after { background: #fff; }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { position: relative; display: block; }
.brand img { height: 40px; width: auto; transition: opacity .25s ease; }
/* on the blue the logo's blue mark disappears, so it shows in one-colour white there; full colour once the dark bar comes in */
.brand .logo-mono { position: absolute; left: 0; top: 0; }
.site-header:not(.is-scrolled) .logo-std { opacity: 0; }
.site-header.is-scrolled .logo-mono { opacity: 0; }
.nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-actions .btn-sm { display: none; }
.menu-btn { width: 46px; height: 46px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; transition: transform .18s ease; }
.menu-btn:hover, .menu-btn:focus-visible { transform: scale(1.14); }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: transform .2s, background-color .2s; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; } .menu-bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav.is-open { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: 6px var(--g) 16px; box-shadow: var(--shadow); }
.nav.is-open a { padding: 14px 2px; font-weight: 700; font-size: 1.125rem; text-decoration: none; border-bottom: 1px solid var(--line); }
@media (min-width: 520px) { .header-actions .btn-sm { display: inline-flex; } .brand img { height: 44px; } }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .nav, .nav.is-open { display: flex; position: static; gap: 30px; background: none; border: 0; padding: 0; box-shadow: none; }
  .nav a, .nav.is-open a {
    position: relative; padding: 8px 0; border-radius: 0; text-decoration: none;
    font-weight: 500; font-size: .9375rem; letter-spacing: .005em; border: 0; color: var(--muted);
    transition: color .15s;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px;
    background: var(--blue-light); transition: right .25s cubic-bezier(.2, .8, .2, 1);
  }
  .nav a:hover, .nav a:focus-visible { background: none; color: var(--text); }
  .nav a:hover::after, .nav a:focus-visible::after { right: 0; }
  .site-header:not(.is-scrolled) .nav a { color: rgba(255, 255, 255, .86); }
  .site-header:not(.is-scrolled) .nav a:hover, .site-header:not(.is-scrolled) .nav a:focus-visible { color: #fff; }
  .site-header:not(.is-scrolled) .nav a::after { background: #fff; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(32px, 6vw, 80px) clamp(56px, 8vw, 104px); overflow: hidden; }
.hero-inner { position: relative; display: grid; gap: clamp(40px, 5vw, 56px); align-items: center; }
@media (min-width: 1040px) { .hero-inner { grid-template-columns: 1fr 1.02fr; } }
.hero-copy { display: grid; gap: 24px; align-content: start; }
.hero .kicker { color: rgba(255, 255, 255, .9); }   /* sits on the blue */
.snap-wrap { position: relative; display: inline-block; white-space: nowrap; color: var(--blue-light); }
.snap { position: absolute; left: -3%; width: 106%; bottom: -.24em; height: .34em; overflow: visible; pointer-events: none; fill: var(--chalk); }
.snap .chalk-line { transform-box: fill-box; transform-origin: 0 50%; }
.snap .speck { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .js .snap .chalk-line { animation: snapline .45s cubic-bezier(.2, .9, .25, 1) .55s both; }
  .js .snap { animation: twang .55s ease-out 1s both; }
  .js .snap .speck { animation: puff .7s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(1s + var(--t)); }
}
@keyframes snapline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes twang { 0% { transform: translateY(0); } 20% { transform: translateY(-3px); } 40% { transform: translateY(2px); } 60% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes puff { from { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(.3); } to { opacity: 1; transform: none; } }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; font-size: .98rem; color: var(--text); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks .ic { color: var(--blue-light); stroke-width: 2.6; }

.hero-devices { position: relative; padding: 0 9% 7% 0; }
/* ---------- devices ----------
   Laptop: the Higgsfield photo of a midnight MacBook, with only its green backdrop and green screen removed.
   The website screenshot sits underneath it, so the photo's own bezel, notch and rounded screen corners frame
   the site exactly. Nothing is drawn over the photo. */
.laptop { position: relative; isolation: isolate; aspect-ratio: 1987 / 1442; }   /* isolate: the phone always sits in front */
.laptop-photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.laptop-screen { position: absolute; left: 12.179%; top: 3.051%; width: 75.642%; height: 64.563%; overflow: hidden; background: #000; }
.laptop-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Phone: drawn in CSS (sizes in cqw, 1% of the phone's own width, so every detail keeps its proportions) */
.phone { position: absolute; right: 0; bottom: 0; width: 26%; container-type: inline-size; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.phone-frame {   /* metal band around the glass: its reflections change as the edge curves around the corners */
  position: relative; padding: 1.55cqw; border-radius: 16.8cqw;
  background: conic-gradient(from 0deg at 50% 50%,
    #34404D 0deg, #56657A 25deg, #222C38 42deg, #141C25 90deg, #212B37 140deg, #627186 155deg, #1B2430 170deg,
    #0F151C 182deg, #222D39 206deg, #283443 262deg, #475568 316deg, #93A1B3 334deg, #56647A 346deg, #34404D 360deg);
  box-shadow: inset 0 0 0 .22cqw rgba(170, 184, 200, .26), inset 0 0 0 .55cqw rgba(6, 9, 13, .3), 0 0 0 .1cqw rgba(0, 0, 0, .6);
}
.phone-screen { position: relative; overflow: hidden; border: 3.4cqw solid #050506; border-radius: 15.4cqw; background: #050506; box-shadow: 0 0 0 .2cqw #080C14; }
.phone-screen img { width: 100%; aspect-ratio: 1170 / 2532; object-fit: cover; object-position: top; display: block; border-radius: 12cqw; }
.phone-screen::after {
  content: ""; position: absolute; inset: 0; border-radius: 12cqw; pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 44%);
}
.phone-island {   /* the pill-shaped camera cut-out, sitting in the status bar */
  position: absolute; z-index: 1; top: 2.5cqw; left: 50%; width: 28cqw; height: 8.2cqw; transform: translateX(-50%);
  border-radius: 99px; background: #000;
}
.phone-island::after {
  content: ""; position: absolute; right: 8%; top: 50%; width: 3.4cqw; height: 3.4cqw; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #34466A 0 14%, #121827 40%, #050608 72%);
}
.phone-btn { position: absolute; width: 1.2cqw; border-radius: .7cqw; background: linear-gradient(90deg, #0C1117 0%, #4A5668 42%, #222C39 72%, #0C1117 100%); box-shadow: 0 0 0 .08cqw rgba(0, 0, 0, .5); }
.phone-action { left: -.85cqw; top: 16.5%; height: 5%; }
.phone-vol1 { left: -.85cqw; top: 24.5%; height: 8.6%; }
.phone-vol2 { left: -.85cqw; top: 34.6%; height: 8.6%; }
.phone-power { right: -.85cqw; top: 26%; height: 13%; }

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 116px); }
.section-head { margin-bottom: clamp(32px, 5vw, 52px); max-width: 44rem; }

.work { background: var(--bg); border-block: 1px solid var(--line); }
.cases { display: grid; gap: 18px; }
@media (min-width: 1040px) { .cases { grid-template-columns: 1fr 1fr; } }
.case { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); display: grid; }
.case:not(.case-next) { grid-template-rows: auto 1fr; }
.case-shots { position: relative; background: #060708; padding: 6% 16% 0 5%; overflow: hidden; border-bottom: 1px solid var(--line); border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
/* the whole browser window: tab, web address and the site */
.shot-d { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 9px 9px 0 0; box-shadow: var(--shadow); max-width: 100%; }
.case-shots .phone { right: 4.5%; bottom: -34%; width: 22%; }
@media (max-width: 699px) {   /* phones: the window runs off the right edge, so the site and its logo show bigger */
  .case-shots { padding: 7% 0 0 5%; }
  .shot-d { width: 116%; max-width: none; border-radius: 8px 0 0 0; }
  .case-shots .phone { right: 4%; bottom: -30%; width: 27%; }
}
.case-body { padding: clamp(20px, 3vw, 30px); display: grid; gap: 12px; align-content: start; }
.case-meta { font: 700 .8rem/1.2 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.case h3 { font-size: 1.6rem; font-stretch: 85%; }
.case-body > p:not(.case-meta) { color: var(--muted); }
.built { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; font-weight: 600; font-size: .98rem; }
.built li { padding-left: 22px; position: relative; }
.built li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 3px; border-radius: 2px; background: var(--chalk); }
.text-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue-light); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.case-next {
  text-decoration: none; padding: clamp(24px, 4vw, 40px); gap: 14px; align-content: center; justify-items: start;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-2);
}
@media (min-width: 1040px) { .case-next { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 28px; } }
.next-head { display: grid; gap: 8px; }
.case-next h3 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-stretch: 80%; }
.case-next > p:not(.label) { color: var(--muted); max-width: 32em; }

.features { display: grid; gap: 0 40px; border-bottom: 1px solid var(--line-2); }
@media (min-width: 700px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { display: grid; gap: 10px; align-content: start; padding: 28px 0 32px; border-top: 1px solid var(--line-2); }
.feature .ic-lg { color: var(--blue-light); margin-bottom: 4px; }
.feature p { color: var(--muted); }

.how { background: var(--bg); border-block: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 22px 24px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.step-n { font: 700 2.2rem/1 var(--f-sans); font-stretch: 80%; color: var(--blue-light); }
.steps p { color: var(--muted); }

.plans { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 32px); display: grid; gap: 14px; grid-template-rows: auto auto auto 1fr auto; }
.plan h3 { font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.amount { font: 700 3.4rem/1 var(--f-sans); font-stretch: 78%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.amount .cur { font-size: .5em; vertical-align: .85em; margin-right: 2px; }
.amount .from { font-size: .3em; font-stretch: 100%; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 8px; vertical-align: .9em; }
.plan-for { color: var(--muted); }
.plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 9px; align-content: start; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: .98rem; }
.plan li .ic { color: var(--blue-light); margin-top: .15em; stroke-width: 2.6; }
.plan .btn { width: 100%; }
.plan-pop { background: var(--surface-2); border: 1.5px solid #4C6FE6; }
.pop-tag { position: absolute; top: -14px; left: 24px; background: var(--tape); color: #131518; font: 700 .8rem/1 var(--f-sans); letter-spacing: .04em; padding: 8px 12px; border-radius: 2px; }
.care { position: relative; margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 22px clamp(20px, 3vw, 30px); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.care h3 span { color: var(--blue-light); }
.care p { max-width: 46em; margin-top: 4px; }
.care-note { font-size: .9rem; color: #8A9098; }

/* about: the photo fills the section behind the copy and drifts a little slower than the page (site.js) */
.about { position: relative; overflow: hidden; background: var(--bg); }
.about.has-photo { background: none; }
.about-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.about-bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 50% 50%; will-change: transform; }
.focus-top .about-bg { object-position: 50% 18%; }
.focus-bottom .about-bg { object-position: 50% 82%; }
.about-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 2, 3, .5) 0%, rgba(2, 2, 3, .76) 55%, rgba(2, 2, 3, .93) 100%);
}
.about.has-photo .about-copy > p, .about.has-photo h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 26px rgba(0, 0, 0, .55); }
.about-inner { position: relative; z-index: 2; padding-block: clamp(20px, 4vw, 44px); }
.about-copy { display: grid; gap: 18px; max-width: 42em; }
.about-copy > p:not(.kicker) { font-size: 1.125rem; color: var(--muted); max-width: 36em; }
@media (min-width: 900px) {
  .about.has-photo .about-media::after { background: linear-gradient(90deg, rgba(2, 2, 3, .94) 0%, rgba(2, 2, 3, .74) 48%, rgba(2, 2, 3, .28) 100%); }
}

.faq { background: var(--bg); border-top: 1px solid var(--line); }
.faq-inner { display: grid; gap: 8px; }
@media (min-width: 1000px) { .faq-inner { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.faq-list { display: grid; gap: 10px; }
.faq-list details { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 20px; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; font-weight: 700; font-size: 1.0625rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font: 400 1.6rem/1 var(--f-sans); color: var(--blue-light); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 20px; color: var(--muted); max-width: 42em; }

/* ---------- boxes: on hover they lift a little and a blue light runs round the edge, brightest nearest the pointer ---------- */
.case, .steps li, .plan, .care, .faq-list details {
  --bw: 1px;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.plan-pop, .case-next { --bw: 1.5px; }
.case::after, .steps li::after, .plan::after, .care::after, .faq-list details::after {
  content: ""; position: absolute; z-index: 2; inset: calc(var(--bw) * -1); padding: var(--bw); border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(178, 196, 255, .95), rgba(91, 132, 255, .45) 36%, rgba(91, 132, 255, 0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
.case-next::after { display: none; }   /* the dashed "your business here" card just lights its dashes */
@media (hover: hover) and (pointer: fine) {
  .case:hover, .steps li:hover, .plan:hover, .care:hover, .faq-list details:hover {
    z-index: 1; transform: translateY(-4px); border-color: #34426E;
    box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95), 0 12px 46px -14px rgba(37, 83, 216, .5);
  }
  .faq-list details:hover { transform: translateY(-2px); }
  .plan-pop:hover { border-color: #6A88FF; }
  .case-next:hover { border-color: rgba(141, 166, 255, .75); }
  .case:hover::after, .steps li:hover::after, .plan:hover::after, .care:hover::after, .faq-list details:hover::after { opacity: 1; }
}
.case-next:focus-visible { transform: translateY(-4px); border-color: rgba(141, 166, 255, .75); }
/* phones and tablets have no hover: each box lights up while it crosses the middle of the screen,
   and the light slides down its edges as you scroll (site.js adds .is-lit) */
.case.is-lit, .steps li.is-lit, .plan.is-lit, .care.is-lit {
  z-index: 1; transform: translateY(-3px); border-color: #34426E;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95), 0 12px 46px -14px rgba(37, 83, 216, .5);
}
.plan-pop.is-lit { border-color: #6A88FF; }
.case-next.is-lit { border-color: rgba(141, 166, 255, .75); }
.is-lit::after { opacity: 1; }
.case-next:active { transform: scale(.99); }
/* an open question keeps a soft light on its top edge */
.faq-list details[open] { border-color: #2E3A60; }
.faq-list details[open]::after { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .case, .steps li, .plan, .care, .faq-list details { transition: box-shadow .2s ease, border-color .2s ease; }
  .case:hover, .steps li:hover, .plan:hover, .care:hover, .faq-list details:hover, .case-next:focus-visible, .is-lit, .case-next:active { transform: none; }
}

/* ---------- mockup form ---------- */
.mockup { position: relative; background: var(--deep); color: var(--muted); overflow: hidden; }
.mockup-inner { position: relative; display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 1040px) { .mockup-inner { grid-template-columns: .85fr 1.15fr; } }
.mockup-copy { display: grid; gap: 18px; }
.mockup-copy > p { font-size: 1.125rem; max-width: 32em; }
.contact-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; font-weight: 600; }
.contact-list li { display: flex; gap: 12px; align-items: center; }
.contact-list .ic { color: var(--blue-light); }
.contact-list a { color: var(--text); text-underline-offset: 3px; }
.form-card { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.fields { display: grid; gap: 14px; }
@media (min-width: 560px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .want legend { font-weight: 700; font-size: .9375rem; }
.opt { font-weight: 500; color: var(--muted); font-size: .85rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font-size: 1rem; padding: 12px 13px; min-height: 48px; border: 1.5px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--text);
}
input::placeholder, textarea::placeholder { color: #7D838B; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(141, 166, 255, .22); }
input[aria-invalid="true"] { border-color: var(--error); }
.want { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.want legend { margin-bottom: 8px; padding: 0; }
.want label { position: relative; cursor: pointer; }
.want input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.want span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1.5px solid var(--line-2); border-radius: 4px; font-weight: 700; font-size: .9375rem; background: var(--bg); }
.want input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.want input:focus-visible + span { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.form-error { color: var(--error); font-weight: 700; }
.form-error:empty { display: none; }
.fine { font-size: .875rem; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: #8E949C; padding-block: 48px 26px; border-top: 1px solid var(--line); font-size: .98rem; }
.site-footer a { color: var(--text); }
.footer-inner { display: grid; gap: 14px; justify-items: start; }
.footer-inner img { height: 44px; width: auto; margin-bottom: 6px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .875rem; color: #80868E; }

/* ---------- full-screen confirmation once a request is sent (sent.njk) ----------
   The page's own opening, played back: the blue sprayed across the top, the big condensed headline,
   and the chalk line snapping under it. Also used as thanks.html for browsers that don't run the script. */
html.is-sent-open { overflow: hidden; }
.sent {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; color: var(--text);
  background: url("img/slab-noise.svg"), url("img/spray-mob.webp") center top / auto 420px no-repeat, var(--bg);
}
.sent::backdrop { background: var(--bg); }
@media (min-width: 1040px) {
  .sent { background: url("img/slab-noise.svg"), url("img/spray-desk.webp") center top / auto calc(min(100vw, 1440px) * .6944) no-repeat, var(--bg); }
}
.sent-static { position: static; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.sent-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
.sent-static .sent-inner { min-height: 100vh; min-height: 100dvh; }
.sent-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding-top: env(safe-area-inset-top, 0px); }
.sent-logo { height: 40px; width: auto; }
@media (min-width: 520px) { .sent-logo { height: 44px; } }
.sent-x { width: 46px; height: 46px; margin-right: -11px; border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .18s ease; }
.sent-x span { position: relative; width: 22px; height: 22px; }
.sent-x span::before, .sent-x span::after { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.sent-x span::after { transform: rotate(-45deg); }
.sent-x:hover, .sent-x:focus-visible { transform: scale(1.14); }
.sent-body { align-self: center; display: grid; justify-items: start; max-width: 1000px; padding-block: clamp(26px, 6vh, 72px) clamp(36px, 8vh, 88px); }
.sent .kicker { color: rgba(255, 255, 255, .9); margin-bottom: 18px; }
.sent-title { display: grid; font-weight: 700; font-stretch: 80%; letter-spacing: -.02em; font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: .94; color: #fff; outline: none; }
.sent-title > span { display: block; }
.sent-lede { margin-top: 26px; max-width: 34em; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); }
.sent-lede b { font-weight: 600; color: var(--text); }
.sent-steps { list-style: none; margin: clamp(36px, 6vh, 56px) 0 0; padding: 0; display: grid; gap: 22px 32px; width: 100%; }
@media (min-width: 760px) { .sent-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 759px) {   /* phones: number beside each step, so the list stays short */
  .sent-steps { gap: 0; margin-top: 32px; }
  .sent-steps li { grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 3px; padding-block: 14px 16px; }
  .sent-n { grid-row: span 2; margin: 0; padding-top: 2px; font-size: 1.4rem; }
}
.sent-steps li { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-2); }
.sent-n { font: 700 1.6rem/1 var(--f-sans); font-stretch: 80%; color: var(--blue-light); margin-bottom: 4px; }
.sent-steps b { font-size: 1.0625rem; color: #fff; }
.sent-steps li > span:last-child { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.sent-foot { margin-top: clamp(36px, 6vh, 54px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.sent-foot p { color: var(--muted); }
.sent-foot p a { color: var(--text); text-underline-offset: 3px; white-space: nowrap; }
.sent .nw { white-space: nowrap; }
.sent p, .sent-steps span { text-wrap: pretty; }
.sent-preview { margin-top: 22px; font-size: .875rem; color: #80868E; }
/* shorter laptop screens: a little tighter, so the whole message fits without scrolling */
@media (min-width: 700px) and (max-height: 820px) {
  .sent-body { padding-block: 10px 26px; }
  .sent .kicker { margin-bottom: 12px; }
  .sent-title { font-size: clamp(3rem, min(7.4vw, 10.4vh), 6.2rem); }
  .sent-lede { margin-top: 16px; }
  .sent-steps { margin-top: 26px; }
  .sent-steps li { padding-top: 12px; }
  .sent-foot { margin-top: 26px; }
  .sent-preview { margin-top: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sent[open] { animation: sent-fade .3s ease both; }
  .sent.is-closing { animation: sent-fade .19s ease reverse both; }
  .sent[open] .sent-rise, .sent-static .sent-rise { animation: sent-rise .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
  .sent[open] .snap .chalk-line, .sent-static .snap .chalk-line { animation: snapline .45s cubic-bezier(.2, .9, .25, 1) .72s both; }
  .sent[open] .snap, .sent-static .snap { animation: twang .55s ease-out 1.17s both; }
  .sent[open] .snap .speck, .sent-static .snap .speck { animation: puff .7s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(1.17s + var(--t)); }
}
@keyframes sent-fade { from { opacity: 0; } }
@keyframes sent-rise { from { opacity: 0; transform: translateY(16px); } }