/* ==========================================================================
   Faglagnir ehf - marketing site
   Native CSS. No build step, no framework.

   Design read: local trade service site for Reykjavik homeowners with a
   problem right now. Language: plain-spoken, organised, technical blue.
   DESIGN_VARIANCE 6 / MOTION_INTENSITY 3 / VISUAL_DENSITY 4.

   Palette is taken from the Faglagnir logo (cobalt droplets on white).
   Accent lock: ONE blue, used everywhere. No second accent colour.
   Shape lock:  4px on every interactive/contained element, 8px on media
                panels only. No pills, no mixed radii.
   ========================================================================== */

/* --- Fonts (self-hosted, no external requests) ---------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* neutrals */
  --bg:        #ffffff;
  --bg-sunk:   #f3f5f9;
  --bg-panel:  #ffffff;
  --ink:       #0f1320;
  --ink-2:     #4d546a;
  --ink-3:     #6d7488;
  --line:      #dcdfe8;
  --line-soft: #e9ebf1;

  /* the one accent */
  --accent:    #2443d8;   /* logo cobalt */
  --accent-in: #1a32ad;   /* hover / pressed */
  --accent-wash: #eef1fd;

  /* primary button */
  --btn-bg:    #2443d8;
  --btn-bg-in: #1a32ad;
  --btn-fg:    #ffffff;

  /* full-bleed brand block (contact / CTA) */
  --brand-bg:      #2443d8;
  --brand-fg:      #ffffff;
  --brand-fg-2:    #ccd5fb;
  --brand-line:    #5570e6;
  --brand-btn-bg:  #ffffff;
  --brand-btn-fg:  #1a32ad;
  --field-bg:      #ffffff;
  --field-fg:      #0f1320;
  --field-line:    #ffffff;

  /* shape lock */
  --r:    4px;
  --r-lg: 8px;

  /* rhythm */
  --gutter: 20px;
  --max:    1200px;
  --sec:    clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --shadow: 0 1px 2px rgba(15, 19, 32, .05), 0 12px 28px -18px rgba(15, 19, 32, .3);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d101a;
    --bg-sunk:   #131826;
    --bg-panel:  #141a29;
    --ink:       #eef0f6;
    --ink-2:     #a3aabd;
    --ink-3:     #868da3;
    --line:      #262d40;
    --line-soft: #1e2434;

    --accent:    #8fa3ff;
    --accent-in: #b3c1ff;
    --accent-wash: #171f3c;

    --btn-bg:    #4462f5;
    --btn-bg-in: #5f7aff;
    --btn-fg:    #ffffff;

    --brand-bg:      #16205a;
    --brand-fg:      #eef0f6;
    --brand-fg-2:    #a9b6ee;
    --brand-line:    #2e3d85;
    --brand-btn-bg:  #4462f5;
    --brand-btn-fg:  #ffffff;
    --field-bg:      #0d101a;
    --field-fg:      #eef0f6;
    --field-line:    #93a3e6;   /* 5.4:1 against --brand-bg; #3b4a91 was 1.6:1 */

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -18px rgba(0, 0, 0, .8);
  }
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-in); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.025em; line-height: 1.06; }
h3, h4 { font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }

.h1 { font-size: clamp(2.1rem, 1.15rem + 3.6vw, 3.75rem); }
.h2 { font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.6rem); line-height: 1.08; }
.h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 46ch;
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }

.muted { color: var(--ink-2); }
.small { font-size: .875rem; line-height: 1.55; }

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec); }
.section--sunk { background: var(--bg-sunk); }
.section--tight { padding-block: calc(var(--sec) * .68); }

.rule-top { border-top: 1px solid var(--line-soft); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: .75rem 1.15rem;
  border-radius: var(--r);
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* --- Icons ---------------------------------------------------------------- */

.i { width: 1em; height: 1em; fill: currentColor; flex: none; }
.i--lg { width: 1.75rem; height: 1.75rem; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.16,1,.3,1), transform .12s ease;
}
.btn:hover { background: var(--btn-bg-in); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--accent-wash); color: var(--ink); border-color: var(--accent); }

.btn--onbrand { background: var(--brand-btn-bg); color: var(--brand-btn-fg); }
.btn--onbrand:hover { background: var(--brand-btn-bg); color: var(--brand-btn-fg); filter: brightness(.94); }

.btn--wide { width: 100%; }
.btn--big { min-height: 58px; font-size: 1.0625rem; padding-inline: 1.6rem; }

/* --- Logo lockup ---------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}
.logo__mark { width: 30px; height: 30px; flex: none; color: var(--accent); fill: currentColor; }
.logo__type { display: grid; gap: 1px; }
.logo__name {
  font-size: 1.115rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
}
.logo__sub {
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Header --------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(1px)) { .hdr { background: var(--bg); } }

.hdr__bar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, .2rem + 1.3vw, 1.9rem);
  list-style: none;
  padding: 0;
}
.nav__link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  transition: color .18s ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current='page'] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

/* Below 768 the sticky call bar carries the phone CTA, so the header keeps
   just the logo and the menu button. */
.hdr__cta { display: none; }
@media (min-width: 768px) { .hdr__cta { display: block; } }
.hdr__cta .btn { min-height: 42px; padding: .45rem 1rem; font-size: .9375rem; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.burger .i { width: 22px; height: 22px; }
.burger__close { display: none; }
.burger[aria-expanded='true'] .burger__open { display: none; }
.burger[aria-expanded='true'] .burger__close { display: block; }

.menu {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  padding-block: .5rem 1.25rem;
}
.menu.is-open { display: block; }
.menu__list { list-style: none; padding: 0; margin: 0; }
.menu__list a {
  display: block;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 600;
}
.menu .btn { margin-top: 1.25rem; }

@media (min-width: 900px) {
  .nav { display: block; }
  .burger { display: none; }
  .menu { display: none !important; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 1rem + 6vw, 6rem); }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
}

.hero__title { max-width: 15ch; }
.hero__lead { margin-top: 1.25rem; }
.hero__cta { margin-top: 2rem; }

.hero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sunk);
  aspect-ratio: 4 / 3;
}
/* Keep the hero photo close in height to the copy column so the split does not
   leave the headline stranded in the middle of a very tall row. */
@media (min-width: 900px) { .hero__media { aspect-ratio: 1 / 1; max-height: 27rem; } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Credentials strip ---------------------------------------------------- */

.creds {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  list-style: none;
  padding: 0;
}
.creds li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
}
.creds .i { color: var(--accent); width: 1.15rem; height: 1.15rem; }

/* --- Benefits (3 unequal columns, hairline top, no cards) ----------------- */

.benefits { display: grid; gap: 2.25rem; }
@media (min-width: 860px) {
  .benefits {
    grid-template-columns: 1.16fr 1fr 1fr;
    gap: clamp(1.75rem, .5rem + 2.6vw, 3.25rem);
  }
}
.benefit { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.benefit__icon { color: var(--accent); margin-bottom: .9rem; }
.benefit h3 { margin-bottom: .5rem; }
.benefit p { color: var(--ink-2); }

/* --- Proof mosaic (5 cells, mixed sizes) ---------------------------------- */

.mosaic { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.mosaic figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-sunk); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.mosaic .m1 { grid-column: span 2; }
.mosaic .m1 img { aspect-ratio: 16 / 10; }
@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; }
  .mosaic .m1 { grid-column: span 2; grid-row: span 2; }
  .mosaic .m1 img { aspect-ratio: 1 / 1; }
}

.proof__head { display: grid; gap: 1rem; margin-bottom: 2.25rem; max-width: 34ch; }
.proof__foot {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  justify-content: space-between;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.link-arrow .i { transition: transform .18s cubic-bezier(.16,1,.3,1); }
.link-arrow:hover .i { transform: translateX(3px); }

/* --- Process rail --------------------------------------------------------- */

.rail { display: grid; gap: 0; counter-reset: none; }
.step { position: relative; padding: 1.4rem 0 1.4rem 2.25rem; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.95rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.step::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2.55rem;
  bottom: -.7rem;
  width: 2px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-2); max-width: 52ch; }

@media (min-width: 860px) {
  .rail { grid-template-columns: repeat(4, 1fr); gap: 0 clamp(1.25rem, .2rem + 2vw, 2.5rem); }
  .step {
    padding: 2.15rem 0 0;
    border-top: 1px solid var(--line);
    border-bottom: none !important;
  }
  .step::before { top: -5px; left: 0; }
  .step::after { display: none; }
  .step p { max-width: none; }
}

/* --- FAQ ------------------------------------------------------------------ */

.faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(2rem, 0rem + 5vw, 5rem); }
}

.qa { border-top: 1px solid var(--line); }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.qa > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  list-style: none;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa__sign {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: .28rem;
  color: var(--accent);
}
.qa__sign::before, .qa__sign::after {
  content: '';
  position: absolute;
  background: currentColor;
  inset: 50% 0 auto 0;
  height: 2px;
  transform: translateY(-50%);
}
.qa__sign::after { transform: translateY(-50%) rotate(90deg); transition: transform .2s cubic-bezier(.16,1,.3,1); }
.qa[open] .qa__sign::after { transform: translateY(-50%) rotate(0deg); }
.qa__body { padding-bottom: 1.3rem; color: var(--ink-2); max-width: 62ch; }
.qa__body p + p { margin-top: .8em; }

/* --- Brand CTA block ------------------------------------------------------ */

.brand-block {
  background: var(--brand-bg);
  color: var(--brand-fg);
}
.brand-block h2, .brand-block h3 { color: var(--brand-fg); }
.brand-block p { color: var(--brand-fg-2); }
.brand-block a:not(.btn) { color: var(--brand-fg); }

.cta__grid { display: grid; gap: 2.5rem; }
@media (min-width: 880px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 0rem + 6vw, 5.5rem); align-items: center; }
}
.cta__copy p { margin-top: 1rem; max-width: 40ch; }

.cta__direct {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--brand-line);
  display: grid;
  gap: .35rem;
}
.cta__phone {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1.1;
}
.cta__phone:hover { text-decoration: underline; }

.cta__alt { margin-top: 1.25rem; font-size: .9375rem; }
.cta__alt a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.cta__alt .i { width: 1.1rem; height: 1.1rem; }

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .45rem; }
.field label { font-size: .875rem; font-weight: 600; letter-spacing: .005em; }
.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  background: var(--field-bg);
  color: var(--field-fg);
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  font-size: 1rem;
  line-height: 1.5;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--brand-fg);
  outline-offset: 2px;
}
.field__hint { font-size: .8125rem; color: var(--brand-fg-2); }
.field__err { font-size: .8125rem; font-weight: 600; color: #ffd9d9; display: none; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ffd9d9; border-width: 2px; }
.field.is-invalid .field__err { display: block; }

.form__note { font-size: .8125rem; color: var(--brand-fg-2); max-width: 44ch; }

.form__status { display: none; border-radius: var(--r); padding: .9rem 1rem; font-size: .9375rem; font-weight: 500; }
.form__status.is-shown { display: block; }
.form__status[data-tone='ok'] { background: rgba(255, 255, 255, .16); border: 1px solid var(--brand-line); }
.form__status[data-tone='warn'] { background: rgba(255, 255, 255, .1); border: 1px solid #ffd9d9; }

/* On light-surface forms (contact page uses the brand block too, so this
   only applies if a form is ever placed on a plain section). */
.form--plain .field input, .form--plain .field textarea { border-color: var(--line); }
.form--plain .field__hint, .form--plain .form__note { color: var(--ink-2); }

/* --- Page head ------------------------------------------------------------ */

.pagehead { padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { margin-top: 1.15rem; max-width: 54ch; }

.crumb {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
  display: block;
  text-decoration: none;
}
.crumb:hover { color: var(--accent); }

/* --- Service cards (image + label) ---------------------------------------- */

.svc-grid { display: grid; gap: clamp(1.25rem, .5rem + 2vw, 2rem); }
@media (min-width: 720px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.svc {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-panel);
}
.svc__media { background: var(--bg-sunk); }
.svc__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc__body { padding: 1.4rem 1.4rem 1.6rem; display: grid; gap: .6rem; align-content: start; }
.svc__icon { color: var(--accent); }
.svc h3 { letter-spacing: -.015em; }
.svc p { color: var(--ink-2); }
.svc ul { margin: .25rem 0 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .9375rem; }
.svc li { margin-bottom: .2rem; }

/* --- Two-column grouped list ---------------------------------------------- */

.groups { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; } }
.group h3 { margin-bottom: .75rem; }
.group ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.group li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-2); }
.group li .i { color: var(--accent); margin-top: .38rem; width: 1rem; height: 1rem; }

/* --- Project blocks ------------------------------------------------------- */

.project { padding-block: clamp(2.25rem, 1rem + 3vw, 3.25rem); border-top: 1px solid var(--line); }
.project__head { display: grid; gap: .85rem; max-width: 58ch; margin-bottom: 1.6rem; }
.project p { color: var(--ink-2); }

/* Cell count follows the number of photographs that actually exist for a job:
   one strong frame goes full width, two go half and half, three go in thirds. */
.shots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.shots:has(> figure:only-child) img { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .shots figure { scroll-snap-align: start; }

  /* A single frame is a showcase, not a strip: give it the full width. */
  .shots:has(> figure:only-child) {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}
.shots figure { margin: 0; display: grid; gap: .6rem; }
.shots img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--bg-sunk);
}
.shots figcaption { font-size: .875rem; color: var(--ink-2); line-height: 1.45; }

/* --- Pull quote ----------------------------------------------------------- */

/* Same device as .benefit and .fact: a 2px rule across the top of the block. */
.pull {
  border-top: 2px solid var(--accent);
  padding-top: 1.25rem;
  margin-block: 2.25rem;
  max-width: 52ch;
}
.pull blockquote {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.28;
}
.pull figcaption { margin-top: .7rem; font-size: .875rem; color: var(--ink-2); }

/* --- Facts / contact essentials ------------------------------------------- */

.facts { display: grid; gap: 1.75rem; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.fact { display: grid; gap: .3rem; align-content: start; border-top: 2px solid var(--ink); padding-top: 1rem; }
.fact dt { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fact dd { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.fact dd a { text-decoration: none; }
.fact dd a:hover { text-decoration: underline; }
.fact .small { font-weight: 400; color: var(--ink-2); }

/* --- Footer --------------------------------------------------------------- */

.ftr { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 1rem + 3vw, 3.5rem) 2rem; }
.ftr__grid { display: grid; gap: 2.25rem; }
@media (min-width: 780px) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.ftr h4 { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; font-weight: 700; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: var(--accent); }
.ftr__blurb { color: var(--ink-2); max-width: 34ch; margin-top: 1rem; font-size: .9375rem; }
.ftr__legal {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--ink-3);
}
.ftr__social { display: inline-flex; align-items: center; gap: .5rem; }

/* --- Sticky mobile call bar ----------------------------------------------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .callbar { background: var(--bg); } }
@media (min-width: 768px) { .callbar { display: none; } }

/* With JS the bar stays out of the way until the hero's own call button has
   scrolled off, so the two never sit on screen at the same time. Without JS
   it is simply always visible. */
.has-js .callbar {
  transform: translateY(115%);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.has-js .callbar.is-shown { transform: none; }
body { padding-bottom: 84px; }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* --- Small layout utilities ----------------------------------------------- */

.section--flush-top { padding-top: 0; }
.creds-band { padding-block: 0 var(--sec); }
.sec-title { max-width: 22ch; margin-bottom: clamp(2rem, 1rem + 2vw, 2.75rem); }
.sec-title--narrow { max-width: 20ch; }
.sec-note { margin-top: 1rem; max-width: 32ch; }
.measure-44 { max-width: 44ch; }

/* --- Breakpoint-gated CTA -------------------------------------------------
   The call button is the CTA below 768px, the form is the CTA at and above it.
   Both live in the DOM and exactly one is rendered per viewport.
   This block is last on purpose: `.cta-form { display: none }` has to win over
   `.form { display: grid }` and `.btn { display: inline-flex }` above. */

.cta-call { display: inline-flex; }
.cta-form { display: none; }

@media (min-width: 768px) {
  .cta-call { display: none; }
  a.cta-form { display: inline-flex; }
  form.cta-form { display: grid; }
}

/* --- About: story column with a supporting frame --------------------------- */

.about-split { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 940px) {
  .about-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}
.about-split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sunk);
}
.about-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 940px) {
  .about-split__media { position: sticky; top: 92px; }
  .about-split__media img { aspect-ratio: 3 / 4; }
}
.about-split__media figcaption {
  padding: .85rem 1rem 1rem;
  font-size: .875rem;
  color: var(--ink-2);
  line-height: 1.45;
}