/* dB Audio — v2 styles
   Dark navy base (not black), warm off-white text, one blue accent (match to logo).
   Newsreader for headings, Manrope for body/nav. */

html { --nav-h: 88px; }
:root {
  --bg: #14263B;          /* navy base (brief §4) */
  --bg-2: #1C3350;        /* alternating panel */
  --bg-3: #0E1B2B;        /* footer, hero overlay */
  --line: #2F4A6A;
  --text: #F1F3F5;
  --text-soft: #BBC8D6;
  --blue: #8FBCE6;        /* site accent: links, labels */
  --blue-hover: #B3D3F0;
  --logo-blue: #4B63F2;   /* logo arcs on dark; logo original is #00128A */
  --gutter: clamp(20px, 5vw, 72px);
  --site-max: 1240px;
  --measure: 58ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kenburns img, .kenburns .ph { animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

h1, h2, h3 {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-wrap: balance;           /* even line lengths on multi-line headings; ignored by older browsers */
}
/* Home hero headline: sized on its own (see .hero h1). Interior page headlines: a step above section headings. */
h1 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); }
/* Main section headings: ~38px on desktop, ~29px on phones */
h2 { font-size: clamp(1.8rem, 1.35rem + 1.45vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.5rem); margin-bottom: .35em; line-height: 1.25; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--text); }
.soft { color: var(--text-soft); }

.wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Navigation: fixed, translucent, few items ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(20, 38, 59, .74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; color: var(--text); }
.brand:hover { color: var(--text); }
.brand img { height: 56px; width: auto; display: block; }
.brand .mark { display: none; height: 40px; }
.brand b { font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--text); font-size: 1.08rem; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue-hover); }
.nav-links .phone { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.nav-links a.btn { color: var(--bg); }
.nav-links .trade-link { display: none; }  /* trade page is reachable from the footer and the home page on desktop; the phone menu lists it */
.nav-links a.btn:hover { color: var(--bg); }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font: inherit; font-size: 1rem; cursor: pointer; padding: 10px 8px; min-height: 44px; }
.nav-actions { display: none; align-items: center; gap: 6px; }
.nav-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); color: var(--text); font-weight: 600; font-size: .95rem; }
.nav-text:hover { color: var(--text); border-color: var(--text); }

/* Buttons */
.btn {
  display: inline-block;
  padding: .75em 1.35em;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1rem; font-weight: 600;
  cursor: pointer; line-height: 1.2;
}
.btn:hover { background: #fff; border-color: #fff; color: var(--bg); }
.btn.ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,.35); }
.btn.ghost:hover { border-color: var(--text); background: rgba(255,255,255,.06); color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 1.8em; }
.btn-row .tel { color: var(--text); font-size: 1.1rem; font-weight: 500; }

/* ---------- Photo slots with slow zoom ---------- */
.photo {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.photo .ph {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: 24px; color: var(--text-soft); font-size: .95rem; line-height: 1.4;
  background: linear-gradient(160deg, #24405F 0%, #1A304A 60%, #14263B 100%);
}
.photo .ph span { max-width: 28ch; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.wide { aspect-ratio: 16 / 10; }
.photo.tall { aspect-ratio: 4 / 5; }
.photo.square { aspect-ratio: 1 / 1; }
.kenburns img, .kenburns .ph { animation: kb 28s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 8vh, 96px);
  overflow: hidden;
}
.hero .bg { position: absolute; inset: 0; z-index: 0; }
.hero .bg .ph, .hero .bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .bg .ph { display: flex; align-items: flex-start; justify-content: flex-end; color: var(--text-soft); text-align: right; padding: calc(var(--nav-h) + 20px) 24px 24px; font-size: .85rem; opacity: .8;
  background: radial-gradient(120% 80% at 70% 30%, #2A4A6E 0%, #14263B 55%, #0E1B2B 100%); }
.hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,27,43,.15) 0%, rgba(14,27,43,.55) 55%, rgba(14,27,43,.94) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); line-height: 1.12; max-width: 16ch; margin-bottom: .4em; }
.hero .lede { max-width: 44ch; }
.hero .since { font-size: 1rem; letter-spacing: .04em; color: var(--text-soft); margin-bottom: 1.2em; }

/* ---------- Sections / panels ---------- */
/* Stacking-card scroll, made safe for long content:
   a panel taller than the viewport pins by its BOTTOM edge (its --stick offset is negative,
   set by the script at the end of each page), so all of its content scrolls into view
   before the next panel slides over it. Short panels pin at the top as before.
   Every panel is at least one screen tall (see the rule below .section > .wrap). */
.hero, .section, .page-hero { position: sticky; top: var(--stick, 0px); background: var(--bg); }
.section {
  padding: max(calc(var(--nav-h) + 28px), clamp(84px, 11vh, 132px)) 0 clamp(72px, 9vh, 112px);
  /* dark panel: drop shadow onto whatever it slides over */
  box-shadow: 0 -24px 56px rgba(6, 12, 20, .45);
}
.section > .wrap { position: relative; width: 100%; }
/* one panel per screen: no panel is ever shorter than the viewport, so the panel pinned
   beneath can never show below a short one. Content sits vertically centred in the panel. */
.section, .page-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.page-hero > .wrap { width: 100%; }
.section.alt {
  background: var(--bg-2);
  /* light panel: outer glow instead of a shadow */
  box-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 -34px 70px rgba(160, 200, 240, .22);
}
.section.compact { padding: max(calc(var(--nav-h) + 24px), clamp(56px, 7vh, 80px)) 0 clamp(56px, 7vh, 80px); }
/* (the old extra bottom padding on the last panel is gone: it made the panel taller than the screen, which pins it by its bottom edge and lets the footer trail it with no slide-in) */
.footer { position: relative; z-index: 2; box-shadow: 0 -24px 56px rgba(6, 12, 20, .45); }
[id] { scroll-margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head a { font-weight: 600; white-space: nowrap; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.beats, .row.detail { align-items: start; }
.two-col.top { align-items: start; }

/* Service tiles (text-first) */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.tile { grid-column: span 2; position: relative; display: block; overflow: hidden; border: 1px solid var(--line); color: var(--text); }
.tiles .tile:nth-child(4), .tiles .tile:nth-child(5) { grid-column: span 3; }
.tiles.text .tile { min-height: 200px; background: linear-gradient(160deg, #22395A 0%, #1B3150 55%, #172B45 100%); display: flex; align-items: flex-end; transition: border-color .3s ease, background .3s ease; }
.tiles.text .tile:hover { border-color: var(--blue); background: linear-gradient(160deg, #27405F 0%, #1F3756 55%, #1A2F4A 100%); }
.tiles.text .tile .label { padding: 26px; }
.tile .label h3 { margin: 0 0 .3em; font-size: clamp(1.25rem, 1.15rem + .35vw, 1.4rem); }
.tile .label p { margin: 0; font-size: .95rem; color: var(--text-soft); max-width: none; }

/* Photo tiles (if a tile ever gets an image: add <img> inside and drop the `text` class on .tiles) */
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tiles:not(.text) .tile { aspect-ratio: 4 / 3; }
.tiles:not(.text) .tile .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(180deg, rgba(14,27,43,0) 0%, rgba(14,27,43,.85) 100%); }

/* Brand grid */
.brand-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brand-grid li { border: 1px solid var(--line); padding: 22px 12px; text-align: center; font-family: "Manrope", system-ui, sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); background: rgba(255,255,255,.02); }
.brand-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-grid.compact li { padding: 18px 10px; }
.brand-grid.wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.brand-grid.wide li { padding: 18px 8px; }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.quote { border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); background: rgba(255,255,255,.02); }
.quote p { font-family: "Lora", Georgia, serif; font-size: 1.3rem; line-height: 1.45; margin: 0 0 1em; max-width: none; }
.quote p::before { content: "\201C"; color: var(--blue); margin-right: .1em; }
.quote footer { font-size: .95rem; color: var(--text-soft); }

/* 3: How we work / principles: two by two, wide columns, no numbering */
.beats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 96px); }
.beat h3 { margin-bottom: .45em; }
.beat p { font-size: 1.02rem; color: var(--text-soft); max-width: 48ch; line-height: 1.6; }
.goal { margin: 2.4em auto 0; max-width: 62ch; text-align: center; }
/* Jump links in a page intro (services) */
.jump { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 2em; }
.jump a { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .98rem; font-weight: 500; transition: border-color .25s ease, color .25s ease; }
.jump a:hover { border-color: var(--blue); color: var(--blue-hover); }

/* Services: one section per service; optional photo or detail figure */
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.row.solo { grid-template-columns: minmax(0, 1fr); }
.row.solo > div { max-width: 62ch; }
.row.detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
figure.detail { margin: 0; max-width: 380px; justify-self: end; }
figure.detail .photo { aspect-ratio: 1 / 1; }
figure.detail figcaption { font-size: .88rem; color: var(--text-soft); margin-top: 10px; line-height: 1.45; }
.inline-link { font-weight: 600; }

/* Services FAQ: static, readable, no expanders */
.faq { display: grid; gap: clamp(32px, 4.5vw, 52px); max-width: 68rem; }
.faq .qa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px clamp(24px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); align-items: start; }
.faq .qa h3 { font-size: clamp(1.35rem, 1.22rem + .4vw, 1.5rem); line-height: 1.3; margin: 0; }
.faq .qa p { color: var(--text-soft); max-width: 58ch; }
.faq .qa p + p { margin-top: -.2em; }
@media (max-width: 900px) { .faq .qa { grid-template-columns: 1fr; } }

/* 4: opening statement strip under the hero */
.intro .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.intro h2 { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.25rem); }

/* Hero crossfade: one, two, or three stills */
.hero .bg .slide { position: absolute; inset: 0; opacity: 0; animation: fade var(--cycle, 36s) infinite; }
.hero .bg .slide:nth-child(1) { animation-delay: 0s; }
.hero .bg .slide:nth-child(2) { animation-delay: calc(var(--cycle, 36s) / 3); }
.hero .bg .slide:nth-child(3) { animation-delay: calc(var(--cycle, 36s) * 2 / 3); }
.hero .bg .slide:only-child { opacity: 1; animation: none; }
@keyframes fade { 0% { opacity: 0 } 12% { opacity: 1 } 33% { opacity: 1 } 45% { opacity: 0 } 100% { opacity: 0 } }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; max-width: 48ch; }
.steps li { position: relative; padding-left: 3.2rem; margin-bottom: 1.3em; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: .05em; width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: .95rem; color: var(--text-soft); }

/* Forms */
form { max-width: 34rem; }
.field { margin-bottom: 1.1em; }
label { display: block; margin-bottom: .35em; font-size: .95rem; color: var(--text-soft); }
input, textarea { width: 100%; font: inherit; padding: .7em .8em; border: 1px solid var(--line); background: #0F1E31; color: var(--text); }
input:focus, textarea:focus { border-color: var(--blue); outline: none; }
textarea { min-height: 7.5em; resize: vertical; }

/* Consultation dialog */
dialog.consult { border: 1px solid var(--line); background: var(--bg-2); color: var(--text); padding: 0; width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
dialog.consult::backdrop { background: rgba(8, 14, 20, .75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.consult .inner { padding: clamp(20px, 4vw, 36px); }
dialog.consult h2 { font-size: 1.5rem; margin-bottom: .2em; }
dialog.consult .field { margin-bottom: .75em; }
dialog.consult label { margin-bottom: .25em; font-size: .9rem; }
dialog.consult input, dialog.consult textarea { padding: .55em .7em; }
dialog.consult textarea { min-height: 5.5em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { color: var(--blue); }
.form-note { font-size: .85rem; color: var(--text-soft); margin: 0 0 .9em; }
dialog.consult .close { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--text-soft); font-size: 1.6rem; cursor: pointer; padding: 6px 10px; }
dialog.consult .close:hover { color: var(--text); }

/* Areas */
.areas { columns: 3; column-gap: 32px; list-style: none; padding: 0; margin: 0 0 1.5em; max-width: 34rem; }
.areas li { break-inside: avoid; padding: .15em 0; }

/* Footer */
.footer { background: var(--bg-3); padding: calc(var(--nav-h) + 28px) 0 64px; color: var(--text-soft); font-size: .95rem; border-top: 1px solid var(--line);
  min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.footer > .wrap { width: 100%; }
.footer .invite { text-align: center; margin-top: clamp(48px, 6vw, 72px); }
.footer .invite::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: clamp(40px, 5vw, 56px); }
.footer .invite .btn { color: var(--bg); }
.footer .invite .btn:hover { color: var(--bg); }
.footer .invite h2 { color: var(--text); font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 .8em; }
.footer .invite .btn-row { justify-content: center; margin-top: 0; }
.footer .invite .tel { color: var(--text); }
.footer .invite .tel a { color: var(--blue); }
.footer .invite .tel a:hover { color: var(--blue-hover); }
.footer .invite p { max-width: none; margin: 1em 0 0; font-size: .95rem; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer a { color: var(--text-soft); }
.footer a:hover { color: var(--text); }
.footer .brand img { height: 64px; margin-bottom: 14px; }
.footer p { max-width: 38ch; }

/* Page hero (interior pages) */
.page-hero { padding: calc(var(--nav-h) + clamp(40px, 8vh, 120px)) 0 clamp(40px, 6vw, 72px); }
.page-hero h1 { max-width: 22ch; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .brand-grid, .brand-grid.compact, .brand-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row.detail { grid-template-columns: 1fr; }
  figure.detail { justify-self: start; max-width: 320px; }
  .intro .wrap { grid-template-columns: 1fr; }
  .tile, .tiles .tile:nth-child(4), .tiles .tile:nth-child(5) { grid-column: auto; }
  .tiles.text .tile { min-height: 150px; }
  .two-col, .row, .ask, .quotes { grid-template-columns: 1fr; }
  .row:nth-child(even) .photo { order: 0; }
  .footer .cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 17px; line-height: 1.6; }
  dialog.consult textarea { min-height: 4.4em; }
  dialog.consult .inner { padding: 16px 16px 20px; }
  dialog.consult .field { margin-bottom: .6em; }
  dialog.consult .form-note { margin-bottom: .7em; }
  html { --nav-h: 64px; }
  .nav-toggle { display: block; }
  .nav-actions { display: flex; }
  .brand img { display: none; }
  .brand .mark { display: block; }
  .beats { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 18px;
    padding: 20px var(--gutter) 28px;
    background: rgba(20, 38, 59, .97); border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .hero { min-height: 100svh; }
  .section, .page-hero { justify-content: flex-start; }
  .nav-links .trade-link { display: block; }
  /* phones: the page ends on the contact block alone, one screen, centred */
  .footer .invite { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .footer .invite::before { display: none; }
  .footer .invite .tel { display: flex; flex-direction: column; gap: .35em; }
  .footer .invite .sep { display: none; }  /* phones: read from the top; most panels exceed the screen anyway */
  .tiles { grid-template-columns: 1fr; }
  .brand-grid, .brand-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas { columns: 2; }
}