/* Crispy Edits marketing site, v2.
   Framework and rhythm follow siteworkdigital.ai: off-white hero, dark section under it, one spacing
   token for every section gap, pill buttons. Colors are Crispy's own.
   Type follows darkroomagency.com (2026-09-28): everything regular weight, serif headings at 28px,
   sans body at 16px with open tracking. Their fonts are licensed (STK Bureau Serif, Darkroom Sans,
   GT Planar), so these are the closest free matches: Literata and Albert Sans. */
:root {
  --navy: #0a0e1a;
  --navy-deep: #060911;
  --card: #111827;
  --card-2: #161f30;
  --paper: #F2F0EB;
  --paper-2: #EAE7E0;
  --paper-card: #F8F6F1;
  --ink: #0f141c;
  --ink-2: #47525F;
  --ink-mut: #77828F;
  --line-d: rgba(255,255,255,0.09);
  --line-l: rgba(19,26,34,0.13);
  --text: #F4F6F9;
  --text-2: #C3CBD5;
  --muted: #8E9AA8;
  --accent: #ed5829;
  --accent-2: #f26a3f;
  --font: 'Albert Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: 'Literata', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22,.8,.3,1);
  --maxw: 1240px;
  --nav-h: 92px;
  --r: 14px;
  /* half the block gap: two stacked sections make one full gap */
  --gap-y: clamp(40px, 4.5vw, 70px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy-deep); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: .02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* ============ type ============ */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.35; text-wrap: balance; }
.t-hero { font-size: clamp(24px, 1.95vw, 28px); }
@media (min-width: 901px) { .hero-head .em { white-space: nowrap; } }
.t-1 { font-size: clamp(24px, 1.95vw, 28px); }
.t-2 { font-size: clamp(20px, 1.7vw, 24px); }
.em { color: var(--accent); }
.lead { font-size: 16px; text-wrap: pretty; }
.lt .lead { color: var(--ink-2); }
.dk .lead { color: var(--text-2); }
.alink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.alink .ar { color: var(--accent); transition: transform .25s var(--ease); }
.alink:hover .ar { transform: translateX(4px); }
.sm { font-size: 14px; }

/* ============ buttons ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; font-weight: 500; font-size: 14px; letter-spacing: .02em; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-family: var(--font); color: inherit; transition: background .2s ease, transform .25s var(--ease), border-color .2s ease, box-shadow .25s ease, color .2s ease; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); transform: scale(1.04); box-shadow: 0 16px 34px -14px rgba(237,88,41,.8); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #232d38; transform: scale(1.04); }
.btn-ghost { border-color: rgba(255,255,255,.22); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.08); transform: scale(1.04); }
.lt .btn-ghost { border-color: var(--line-l); color: var(--ink); }
.lt .btn-ghost:hover { background: rgba(19,26,34,.05); }
.btn-sm { font-size: 14px; padding: 10px 20px; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

/* ============ header ============ */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
header.scrolled { background: rgba(242,240,235,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line-l); }
.navwrap { padding: 0 24px; }
nav { height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.brand { justify-self: start; display: flex; align-items: center; gap: 12px; white-space: nowrap; font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: var(--ink); transition: color .2s ease; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.navlinks { justify-self: center; display: flex; align-items: center; gap: 34px; font-size: 14.7px; font-weight: 400; color: var(--ink); transition: color .2s ease; }
.navlinks a { transition: color .15s ease; white-space: nowrap; }
.navlinks a:hover { color: var(--accent); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav-signin { font-size: 14.7px; font-weight: 400; color: var(--ink); }
.nav-signin:hover { color: var(--accent); }
/* while a preview fills the hero the header sits on video, so it goes light */
html.vid-showing .brand, html.vid-showing .navlinks, html.vid-showing .nav-signin { color: #F4F6F9; }
html.vid-showing .navlinks a:hover { color: var(--accent); }
html.vid-showing header::before { opacity: 1; }
header::before { content: ""; position: absolute; inset: 0 0 -30px; background: linear-gradient(180deg, rgba(6,9,17,.6), rgba(6,9,17,0)); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: -1; }
/* dark pages keep a dark header */
body.dark-top header:not(.scrolled) .brand, body.dark-top header:not(.scrolled) .navlinks, body.dark-top header:not(.scrolled) .nav-signin { color: #F4F6F9; }
body.dark-top header.scrolled { background: rgba(10,14,26,.9); border-bottom-color: var(--line-d); }
body.dark-top header.scrolled .brand, body.dark-top header.scrolled .navlinks, body.dark-top header.scrolled .nav-signin { color: #F4F6F9; }
.mnav { position: relative; display: none; }
.mnav summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; cursor: pointer; color: inherit; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary svg { width: 24px; height: 24px; }
.mnav-panel { position: absolute; right: 0; top: 54px; min-width: 240px; background: var(--paper-card); color: var(--ink); border: 1px solid var(--line-l); border-radius: 16px; padding: 10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.mnav-panel a { padding: 12px 14px; border-radius: 10px; font-weight: 400; font-size: 16px; }
.mnav-panel a:hover { background: var(--paper-2); }
.mnav-panel .mcta { margin-top: 6px; background: var(--accent); color: #fff; text-align: center; font-weight: 500; }
@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  nav { grid-template-columns: 1fr auto; }
  .navlinks, .nav-cta, .nav-signin { display: none; }
  .mnav { display: block; }
  .brand { font-size: 20px; }
  .brand img { width: 28px; height: 28px; }
}

/* ============ sections ============ */
.sec { padding: var(--gap-y) 0; }
.lt { background: var(--paper); color: var(--ink); }
.dk { background: var(--navy); color: var(--text); }
.sec-head { max-width: 640px; margin: 0 0 clamp(36px, 4vw, 56px); }
.sec-head .lead { margin-top: 14px; max-width: 56ch; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .lead { margin-left: auto; margin-right: auto; }
.sec-foot { margin-top: clamp(30px, 3.4vw, 46px); }

/* ============ hero ============ */
.hero { padding: calc(var(--nav-h) + clamp(12px, 3vh, 40px)) 0 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.hero > .wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; z-index: 2; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(140px, 24vh, 240px); background: linear-gradient(180deg, rgba(10,14,26,0), var(--navy)); pointer-events: none; z-index: 1; }
.hero-screen { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--navy-deep); opacity: 0; transition: opacity .25s ease; }
.hero.showing .hero-screen { opacity: 1; }
.hero-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a vertical reel is shown whole, over a blurred copy of itself, so nothing is cropped away */
.hero-screen video.back { filter: blur(44px) brightness(.55); transform: scale(1.25); }
.hero-screen video.whole { object-fit: contain; }
.hero-screen iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; }
.hero-screen::after { content: ""; position: absolute; inset: 0; background: rgba(6,9,17,.35); }
.hero-head { max-width: 700px; margin: 0 auto; text-align: center; transition: opacity .18s ease; }
.hero.showing .hero-head, .hero.showing .tickerbox { opacity: 0; }
.hero-head .lead { margin: 16px auto 0; max-width: 48ch; }
/* hero text runs 10 percent over the base scale (Ryan, 2026-09-28) */
.hero-head .t-hero { font-size: clamp(26.4px, 2.145vw, 30.8px); }
.hero-head .lead { font-size: 17.6px; }
.hero-head .btn { font-size: 15.4px; padding: 14px 26px; }
.hero-head .alink { font-size: 15.4px; }
.hero-cta { margin-top: 28px; display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.tickerbox { margin: 0 0 16px; overflow: hidden; position: relative; z-index: 2; transition: opacity .18s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%); }
.ticker { display: flex; width: max-content; animation: tick 34s linear infinite; }
.ticker a { flex: none; font-size: 12px; font-weight: 400; text-transform: lowercase; color: var(--ink-mut); border: 1px solid rgba(19,26,34,.17); border-radius: 999px; padding: 5px 13px; margin-right: 9px; transition: color .15s ease, border-color .15s ease; }
.ticker a:hover { color: var(--ink); border-color: rgba(19,26,34,.4); }
@keyframes tick { to { transform: translateX(-50%); } }
.strip-zone { padding: 0 0 10px; position: relative; z-index: 3; }
.strip { display: flex; gap: 10px; padding: 0 10px; }
.win { position: relative; flex: 1 1 0; min-width: 0; border-radius: 10px; overflow: hidden; background: var(--paper-2); height: clamp(130px, 10.5vw, 230px); transform: translateZ(0); transition: transform .35s var(--ease), box-shadow .35s var(--ease); cursor: pointer; }
.win img, .win video { width: 100%; height: 100%; object-fit: cover; }
/* vertical clips get a narrower window, the way Darkroom mixes 197px and 120px tiles */
.win.tall { flex: .62 1 0; }
.win .tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-size: 12px; font-weight: 500; color: #fff; background: rgba(6,9,17,.78); border-radius: 999px; padding: 5px 12px; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s var(--ease); }
.win:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 26px 44px -18px rgba(19,26,34,.45); z-index: 3; }
.win:hover .tag { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .strip { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .win { flex: 0 0 240px; height: 150px; scroll-snap-align: start; }
  .win.tall { flex: 0 0 120px; }
  .hero-screen { display: none; }
}
/* inner page hero */
.page-hero { padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) 0 var(--gap-y); }
.page-hero .lead { margin-top: 20px; max-width: 58ch; }
.page-hero .hero-cta { justify-content: flex-start; margin-top: 26px; }
.page-hero.tall { min-height: 78vh; display: flex; align-items: center; }
.page-hero.tall .wrap { width: 100%; }
.page-hero h1 { max-width: 760px; }

/* ============ statement + names ============ */
.statement { max-width: 640px; }
.statement .lead { margin-top: 14px; }
.names { margin-top: clamp(30px, 3.6vw, 48px); display: flex; flex-wrap: wrap; gap: 8px 34px; max-width: 900px; }
.names span { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(20px, 1.7vw, 24px); color: var(--muted); transition: color .2s ease; }
@media (max-width: 600px) { .names { gap: 10px 22px; } }
.names span:hover { color: var(--text); }

/* ============ pillars (sticky side) ============ */
.pillars { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.pillars-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.pillars-side .lead { margin-top: 14px; }
.pillar { padding: clamp(24px, 2.6vw, 38px) 0; border-top: 1px solid var(--line-d); }
.pillar:last-child { border-bottom: 1px solid var(--line-d); }
.pillar h3 { font-size: clamp(20px, 1.7vw, 24px); margin-bottom: 8px; }
.pillar p { color: var(--text-2); max-width: 60ch; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } .pillars-side { position: static; } }

/* ============ service rows ============ */
.svc { border-top: 1px solid var(--line-l); padding: clamp(28px, 3vw, 44px) 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.svc:last-of-type { border-bottom: 1px solid var(--line-l); }
.svc h3 { font-size: clamp(20px, 1.7vw, 24px); }
.svc .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc .pills span { font-size: 12px; font-weight: 400; color: var(--ink-2); border: 1px solid var(--line-l); border-radius: 999px; padding: 4px 11px; }
.svc p { margin: 0 0 18px; color: var(--ink-2); }
.dk .svc { border-color: var(--line-d); }
.dk .svc .pills span { color: var(--text-2); border-color: var(--line-d); }
.dk .svc p { color: var(--text-2); }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } }

/* ============ case list with hover preview ============ */
.cases { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.case-list { display: flex; flex-direction: column; }
.case-list a { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.35; font-size: clamp(24px, 1.95vw, 28px); color: var(--muted); padding: 7px 0; transition: color .2s ease, transform .25s var(--ease); }
.case-list a:hover, .case-list a.on { color: var(--text); transform: translateX(8px); }
.case-view { position: sticky; top: calc(var(--nav-h) + 24px); }
.shot { position: relative; border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); cursor: pointer; }
.shot img, .shot video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: none; }
.shot img.on, .shot video.on { display: block; }
.case-view .meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 4px 0; color: var(--text-2); font-size: 14px; }
.case-view .meta b { color: var(--text); font-weight: 500; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } .case-view { position: static; } .case-list a { font-size: 24px; } }

/* ============ work grid (work page) ============ */
.grid-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile { display: block; border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); transition: transform .3s var(--ease); }
.tile:hover { transform: translateY(-6px); }
.tile .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover .thumb img { transform: scale(1.04); }
.tile .meta { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; font-size: 14px; color: var(--text-2); }
.tile .meta b { color: var(--text); font-weight: 500; }
@media (max-width: 900px) { .grid-work { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-work { grid-template-columns: 1fr; } }

/* ============ thesis + quotes ============ */
.thesis { max-width: 720px; }
.thesis .t-2 { font-family: var(--serif); line-height: 1.35; letter-spacing: -.02em; font-weight: 400; color: var(--ink); }
.thesis .t-2 + .t-2 { margin-top: 22px; }
.thesis .dim { color: var(--ink-mut); }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.rv { background: var(--paper-card); border: 1px solid var(--line-l); border-radius: 16px; padding: 24px 24px 22px; height: 100%; display: flex; flex-direction: column; }
.rv-head { display: flex; align-items: center; gap: 12px; }
.rv .ini { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 500; font-size: 13px; display: grid; place-items: center; flex: none; }
.rv .who b { display: block; font-size: 15px; font-weight: 500; }
.rv .who span { display: block; font-size: 12.5px; color: var(--ink-mut); line-height: 1.4; }
.rv p { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.rv .big { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-size: clamp(24px, 1.95vw, 28px); line-height: 1.25; color: var(--ink); }
.rv .big .em { display: block; }
.rv .alink { margin-top: auto; padding-top: 16px; }
@media (max-width: 900px) { .rv-grid { grid-template-columns: 1fr; } }

/* ============ pricing ============ */
/* billing switch */
.bill { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-d); border-radius: 999px; margin: 0 0 26px; }
.bill button { padding: 8px 16px; border-radius: 999px; font-size: 14px; color: var(--text-2); transition: background .2s ease, color .2s ease; }
.bill button span { font-size: 11px; color: var(--accent); margin-left: 6px; }
.bill button.on { background: var(--text); color: var(--ink); }
.lt .bill { border-color: var(--line-l); }
.lt .bill button { color: var(--ink-2); }
.lt .bill button.on { background: var(--ink); color: var(--paper); }
@media (max-width: 480px) { .bill button { padding: 8px 11px; font-size: 13px; } .bill button span { display: none; } }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan { background: var(--card); border: 1px solid var(--line-d); border-radius: 18px; padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; }
.plan.pop { border-color: var(--accent); background: linear-gradient(180deg, rgba(237,88,41,.12), rgba(237,88,41,0) 60%), var(--card); }
.plan h3 { font-size: clamp(20px, 1.7vw, 24px); }
.plan .fit { color: var(--text-2); font-size: 14px; margin-top: 6px; min-height: 42px; }
.plan .price { margin-top: 16px; font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(32px, 2.6vw, 38px); }
.plan .price small { font-family: var(--font); font-weight: 400; letter-spacing: .02em; font-size: 14px; color: var(--muted); }
.plan .sub { margin-top: 6px; color: var(--text-2); font-size: 14px; }
.plan .was { margin-top: 16px; min-height: 21px; color: var(--muted); font-size: 14px; }
.plan .was + .price { margin-top: 0; }
.plan .save { margin-top: 4px; color: var(--accent); font-size: 14px; font-weight: 500; }
.plan li.locked { color: var(--muted); opacity: .6; }
.plan li.locked::before { content: "·"; color: var(--muted); }
.plan li.locked span { margin-left: auto; font-size: 11px; letter-spacing: .06em; }
.plans-note { margin-top: 22px; font-size: 14px; color: var(--muted); }
.lt .plans-note { color: var(--ink-mut); }
.plans-note a { color: var(--accent); }
.plan .btn { margin: 22px 0 26px; }
.plan ul { display: flex; flex-direction: column; gap: 9px; color: var(--text-2); font-size: 14px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "+"; color: var(--accent); font-weight: 500; flex: none; }
.pop-tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.lt .plan { background: var(--paper-card); border-color: var(--line-l); }
.lt .plan .fit, .lt .plan .sub, .lt .plan ul { color: var(--ink-2); }
.table-scroll { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line-l); background: var(--paper-card); }
table.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 16px; font-weight: 500; }
.compare thead th.pop { color: var(--accent); }
.compare tbody th { font-weight: 500; width: 26%; }
.compare td { color: var(--ink-2); }
.compare td.yes { color: var(--accent); font-weight: 500; }
.compare td.na { color: var(--ink-mut); }
.glance .amt { white-space: nowrap; }
.glance .amt s { color: var(--ink-mut); font-size: 13px; margin-right: 6px; }
.glance .amt b { font-weight: 500; font-size: 16px; color: var(--ink); }
.glance .amt small { color: var(--ink-mut); }
.glance .pop-tag { margin: 0 0 0 8px; }
.cards.examples { margin-top: 18px; }

/* ============ cards (terms, fit) ============ */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--paper-card); border: 1px solid var(--line-l); border-radius: 16px; padding: 26px; }
.card h3 { font-size: clamp(20px, 1.7vw, 24px); }
.card .k { display: block; font-size: 12px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
.card p { margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.dk .card { background: var(--card); border-color: var(--line-d); }
.dk .card p { color: var(--text-2); }
@media (max-width: 900px) { .cards, .cards.c2 { grid-template-columns: 1fr; } }

/* ============ faq ============ */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line-d); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-d); }
.lt .faq details { border-color: var(--line-l); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; font-size: 18px; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { margin: 0 0 22px; padding: 0 4px; color: var(--text-2); max-width: 64ch; font-size: 14px; }
.lt .faq .a { color: var(--ink-2); }
.faq .a a { color: var(--accent); }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group h2 { font-size: clamp(20px, 1.7vw, 24px); margin-bottom: 10px; }

/* ============ quote / form ============ */
.quote-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.quote-side .lead { margin-top: 14px; }
.quote-side .sm { margin-top: 22px; color: var(--text-2); }
.quote-side .sm a { color: var(--accent); }
.form-card { background: var(--card); border: 1px solid var(--line-d); border-radius: 18px; padding: clamp(24px, 3vw, 38px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.form-card label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 7px; }
.form-card input, .form-card select, .form-card textarea { width: 100%; background: var(--navy); color: var(--text); border: 1px solid var(--line-d); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; letter-spacing: .01em; }
.form-card textarea { min-height: 120px; resize: vertical; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(237,88,41,.22); }
.form-card .btn { margin-top: 6px; }
.hp { display: none; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* ============ lightbox ============ */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 16px; background: rgba(3,5,12,.92); }
.lightbox.open { display: grid; }
.lightbox-in { width: min(1100px, 100%); }
.lightbox-frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; }
.lightbox-frame iframe, .lightbox-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: contain; }
.lightbox-close { display: block; margin: 0 0 12px auto; color: var(--text); font-size: 14px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.lightbox-close:hover { background: rgba(255,255,255,.08); }

/* ============ footer ============ */
footer { background: var(--navy-deep); color: var(--text); padding: clamp(48px, 6vw, 80px) 0 34px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
footer .brand { color: var(--text); font-size: 20px; }
footer .about { margin: 16px 0 22px; color: var(--text-2); font-size: 14px; max-width: 36ch; }
footer h3 { font-family: var(--font); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
footer ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-2); }
footer ul a:hover { color: var(--text); }
.foot-bottom { margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.foot-bottom a:hover { color: var(--text); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ============ reveals ============ */
html.js [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
html.js [data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-rv] { opacity: 1; transform: none; transition: none; }
  .ticker { animation: none; }
}