/* =========================================================
   Bear & Bee — Option 02 "Gallery Modern"
   Photo-first. Swiss grid, tight sans type, one honey accent.
   ========================================================= */

:root {
  --ink:   #131313;
  --ink-2: #5d5d59;
  --bg:    #ffffff;
  --mist:  #f4f4f2;
  --line:  #e3e3df;
  --honey: #b8821b;
  --honey-lt: #d9a331;
  --dark:  #131313;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shell: 1400px;
  --sec: clamp(4rem, 9vw, 8rem);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(.98rem, .94rem + .2vw, 1.06rem); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

/* Anchor links (#why, #testimonials) must clear the sticky bar. */
[id] { scroll-margin-top: 90px; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.u-hp { position: absolute; left: -9999px; }
.skip { position: absolute; left: -9999px; z-index: 100; background: var(--ink); color: #fff; padding: .75rem 1.25rem; }
.skip:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

/* ---------- Type ---------- */
.mega {
  font-size: clamp(2.4rem, 1.1rem + 6.6vw, 7.5rem);
  font-weight: 500; line-height: .98; letter-spacing: -.035em; margin: 0 0 1.5rem;
}
.mega__accent { color: var(--honey-lt); }

.h1 {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.4rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.028em; margin: 0 0 1rem; text-wrap: balance;
}
.h1--page { max-width: 18ch; }
.h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -.022em; margin: 0 0 .6rem; }
.h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); font-weight: 500; letter-spacing: -.015em; margin: 0 0 .5rem; }
.h1 a, .h2 a { text-decoration: none; }
.h1 a:hover, .h2 a:hover { color: var(--honey); }

.label {
  font-size: .68rem; font-weight: 500; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.25rem;
}
.label--light { color: rgba(255,255,255,.7); }
.label a { text-decoration: none; border-bottom: 1px solid currentColor; }

.big { font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.src { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); opacity: .65; }

.arrowlink {
  text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 1px solid var(--ink); padding-bottom: .35rem;
}
.arrowlink span { transition: transform .3s var(--ease); display: inline-block; }
.arrowlink:hover span { transform: translateX(5px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  font-size: .76rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  padding: 1.1rem 2rem; transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.btn--honey { background: var(--honey-lt); color: #131313; }
.btn--honey:hover { background: #eab944; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--honey); }
.btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink); }

/* ---------- Top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line);
  transition: background-color .35s, border-color .35s, color .35s;
}
.bar__in {
  width: min(100% - 2.5rem, var(--shell)); margin-inline: auto;
  display: flex; align-items: center; gap: 2rem; min-height: 74px;
}
.brand { text-decoration: none; display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.brand__sub { font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

.nav { display: flex; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav a {
  text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem 0; border-bottom: 1px solid transparent; transition: border-color .3s, opacity .3s; opacity: .75;
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--honey-lt); }
.bar__tel { text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .05em; }
.bar__tel:hover { color: var(--honey); }

/* Transparent over the hero on the home page, solid once scrolled */
.has-overlay-nav .bar { position: fixed; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; color: #fff; }
.has-overlay-nav .bar.is-stuck { background: rgba(19,19,19,.92); backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,.12); }

.navtoggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; margin-right: -.5rem; /* 44px minimum touch target */
}
.navtoggle span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 940px) {
  .navtoggle { display: flex; }
  .bar__tel { display: none; }
  .nav {
    position: fixed; inset: 74px 0 auto; background: var(--ink); color: #fff;
    flex-direction: column; gap: 0; padding: 1rem 1.25rem 2rem;
    max-height: calc(100svh - 74px); overflow-y: auto;
    transform: translateY(-135%); transition: transform .4s var(--ease);
  }
  body.nav-open { overflow: hidden; }
  .nav.is-open { transform: translateY(0); }
  .nav a { font-size: .95rem; letter-spacing: .1em; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.12); opacity: 1; }
}

/* ---------- Hero stage ---------- */
.stage {
  position: relative;
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;  /* avoids the mobile URL-bar jump */
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden;
}
.stage__slides { position: absolute; inset: 0; background: #131313; }
.stage__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.stage__slide.is-active { opacity: 1; }
.stage__slide img { width: 100%; height: 100%; object-fit: cover; animation: kb 14s linear infinite alternate; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.5) 100%);
}
.stage__body, .stage__ui { position: relative; z-index: 2; }
.stage__body { padding-bottom: clamp(2rem, 5vw, 4rem); padding-top: 8rem; }
.stage__lede { font-size: clamp(1.02rem, 1rem + .4vw, 1.25rem); max-width: 40ch; color: rgba(255,255,255,.85); margin: 0; }
.stage__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.stage__ui {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
  padding: .75rem 0 1.75rem; border-top: 1px solid rgba(255,255,255,.2); margin-top: clamp(2rem, 5vw, 4rem);
}
.stage__now { margin: 0; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.stage__dots { display: flex; gap: .35rem; }
/* Visually a 3px bar, but a 44px-tall target so it's tappable. */
.stage__dot {
  width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer;
  position: relative; display: grid; place-items: center;
}
.stage__dot::before {
  content: ""; width: 34px; height: 3px; background: rgba(255,255,255,.35); transition: background-color .3s;
}
.stage__dot.is-active::before { background: var(--honey-lt); }
@media (prefers-reduced-motion: reduce) { .stage__slide img { animation: none; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 1.15rem 0; background: var(--mist); }
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: slide 38s linear infinite; }
.marquee__track span { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.marquee__track .dot { color: var(--honey); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Blocks ---------- */
.block { padding: var(--sec) 0; }
.block--top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.block--mist { background: var(--mist); }
.block--dark { background: var(--dark); color: #fff; }
.block--dark .big, .block--dark .src { color: rgba(255,255,255,.7); }

.pagehead { padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.two { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.two--form { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 900px) { .two, .two--form { grid-template-columns: 1fr; gap: 2.5rem; } }

.figures { list-style: none; margin: 2.5rem 0 1rem; padding: 0; display: grid; gap: 1.5rem; }
.figures li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.5rem; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.block--dark .figures li { border-color: rgba(255,255,255,.18); }
.figures strong { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; color: var(--honey); }
.figures span { font-size: .92rem; color: var(--ink-2); }

.plain { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.plain a { text-decoration: none; border-bottom: 1px solid var(--line); }
.plain a:hover { border-color: var(--honey); color: var(--honey); }
.plain--lg { gap: 1.25rem; }
.plain--lg li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1rem; }
.plain--lg .label { margin: 0; }
.plain--lg a { font-size: 1.2rem; font-weight: 500; }

/* ---------- Showcase (home) ---------- */
.showcase {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 1.2vw, 1.1rem);
  width: min(100% - 2.5rem, var(--shell)); margin-inline: auto;
}
.show { text-decoration: none; display: block; position: relative; }
.show__img { display: block; overflow: hidden; background: var(--mist); }
.show__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; }
.show--tall .show__img img { aspect-ratio: 4/5; }
.show:hover .show__img img { transform: scale(1.05); }
.show__meta { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 0 0; }
.show__name { font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.show__sub { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 720px) { .showcase { grid-template-columns: 1fr; } }

/* ---------- Cards (services) ---------- */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.card { background: var(--bg); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; }
.card__num { font-size: .72rem; font-weight: 600; letter-spacing: .2em; color: var(--honey); margin: 0 0 1.75rem; }
.card__lede { font-weight: 500; margin: 0 0 .75rem; }
.card__body { color: var(--ink-2); font-size: .95rem; margin: 0; }
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.3rem; font-size: .9rem; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .68em; width: .55rem; height: .55rem; border: 1px solid var(--honey); }

.svcfull {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3.25rem) 0; border-top: 1px solid var(--line); align-items: center;
}
.svcfull:last-of-type { border-bottom: 1px solid var(--line); }
.svcfull__img { overflow: hidden; background: var(--mist); }
.svcfull__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.svcfull--flip .svcfull__img { order: 2; }
.svcfull .card__num { margin: 0 0 1rem; }
@media (max-width: 860px) {
  .svcfull, .svcfull--flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .svcfull--flip .svcfull__img { order: 0; }
  .svcfull__img img { aspect-ratio: 3/2; }
}

.steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.steps li { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.steps li span { font-size: .72rem; font-weight: 600; letter-spacing: .2em; color: var(--honey); display: block; margin-bottom: 1.25rem; }
.steps p { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* ---------- Gallery ----------
   A grid, not CSS columns. With this many photographs the order you read
   (left to right) has to match the DOM order the lightbox walks, and
   filtering has to reflow without the whole page re-shuffling — neither is
   true of multi-column layout.

   Each photo keeps its own framing: the tile carries the original aspect
   ratio inline, so nothing is cropped and nothing shifts while loading.
   Without JavaScript this is a plain grid whose rows are as tall as their
   tallest photo. app.js measures each tile and hands it a `grid-row-end`
   span against a small fixed row unit, closing those gaps into true masonry. */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); background: var(--bg);
  transition: border-color .25s, color .25s, background .25s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__n { font-size: .7rem; letter-spacing: .06em; opacity: .55; font-variant-numeric: tabular-nums; }
.chip.is-on .chip__n { opacity: .7; }

.filters__count {
  margin: 0 0 1.75rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}

.gallery {
  --shot-gap: clamp(.5rem, 1.2vw, 1rem);
  display: grid; gap: var(--shot-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Never stretch a tile to its row: each keeps its own height, which is what
     both the un-scripted fallback and the masonry measurement depend on. */
  align-items: start;
}
@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Masonry, applied by app.js once it can measure. */
.gallery.is-masonry { grid-auto-rows: var(--row-unit, 8px); align-items: start; }

.shot { position: relative; display: block; overflow: hidden; background: var(--mist); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot.is-hidden { display: none; }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.1rem; color: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,0));
  opacity: 0; transition: opacity .35s;
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; }
.shot__cap em { font-style: normal; color: var(--honey-lt); }

.gallery__empty { margin: 3rem 0; color: var(--ink-2); }

.endcap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.endcap .h1 { margin: 0; max-width: 22ch; }

/* ---------- Quote slider ---------- */
.slider { position: relative; min-height: 15rem; }
/* app.js pins every quote to the height of the longest so the section can't
   resize under the reader mid-rotation; centring keeps the short ones from
   sitting top-heavy in the space that reserves. */
.slider__item {
  margin: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease);
  display: flex; flex-direction: column; justify-content: center;
}
.slider__item.is-active { opacity: 1; visibility: visible; position: relative; }
.slider__item blockquote {
  margin: 0 0 1.5rem; font-size: clamp(1.35rem, 1rem + 2.1vw, 2.5rem); font-weight: 400;
  line-height: 1.28; letter-spacing: -.025em; max-width: 24ch; text-wrap: balance;
}
/* A full-paragraph testimonial set at pull-quote size runs to a dozen lines and
   dwarfs the section. Longer ones step down to reading size on a wider measure.
   Must stay after the rule above: same specificity, so source order decides. */
.slider__item--long blockquote {
  font-size: clamp(1.02rem, .92rem + .7vw, 1.4rem);
  line-height: 1.5; letter-spacing: -.01em; max-width: 52ch; text-wrap: initial;
}
.slider__item figcaption { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.slider__item figcaption span { color: rgba(255,255,255,.55); }
.slider__dots { display: flex; gap: .25rem; margin-top: 2rem; position: relative; z-index: 2; }
.slider__dot {
  width: 48px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slider__dot::before { content: ""; width: 40px; height: 3px; background: rgba(255,255,255,.25); transition: background-color .3s; }
.slider__dot.is-active::before { background: var(--honey-lt); }

.pull { margin: 2.5rem 0 0; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.pull blockquote { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.45; letter-spacing: -.015em; }
.pull figcaption { font-size: .74rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.pull figcaption span { color: var(--ink-2); }

/* ---------- Form ---------- */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field { margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .68rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field textarea, .field select {
  font: inherit;
  /* Never below 16px: iOS Safari zooms the page when you focus a smaller field. */
  font-size: max(16px, 1rem);
  color: var(--ink); background: transparent; width: 100%;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .7rem 0;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--honey); }
.field input::placeholder, .field textarea::placeholder { color: #adaca6; }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: #b3392c; }
.field__err { font-size: .82rem; color: #b3392c; }
.block--dark .field input, .block--dark .field textarea, .block--dark .field select { color: #fff; border-bottom-color: rgba(255,255,255,.25); }

.select { position: relative; display: block; }
.select::after {
  content: ""; position: absolute; right: .2rem; top: 45%; width: .45rem; height: .45rem;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
.select select { appearance: none; }

.form__foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.form__note { font-size: .82rem; color: var(--ink-2); margin: 0; }

.notice { border: 1px solid var(--line); border-left: 3px solid var(--honey); padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--mist); }
.notice--bad { border-left-color: #b3392c; }
.notice p { margin: 0; }
.notice .h2 { margin-bottom: .5rem; }

/* ---------- Footer ---------- */
.foot { background: var(--dark); color: rgba(255,255,255,.72); padding: var(--sec) 0 2rem; }
.foot__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid rgba(255,255,255,.14); }
.foot__big { color: #fff; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.foot__mark { width: 60px; height: 60px; margin-bottom: 1.5rem; }
.foot__grid p { margin: 0; font-size: .93rem; line-height: 1.9; }
.foot__grid .label { color: rgba(255,255,255,.45); margin-bottom: .75rem; }
.foot__grid a { text-decoration: none; }
.foot__grid a:hover { color: var(--honey-lt); }
.foot__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; }
.foot__base p { margin: 0; }
.foot__base a { text-decoration: none; }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(12,12,12,.96);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity .3s;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 1rem; min-width: 0; }
.lightbox__fig img { max-height: 82vh; width: auto; object-fit: contain; }
.lightbox__fig figcaption {
  color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap;
}
/* Position in the set — with dozens of photos you need to know where you are. */
.lightbox__n { color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.lightbox__close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .7; }
.lightbox__nav { background: none; border: 0; color: #fff; font-size: 2.8rem; line-height: 1; cursor: pointer; opacity: .5; padding: .5rem 1rem; }
.lightbox__nav:hover, .lightbox__close:hover { opacity: 1; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================
   Mobile action bar — phone only.
   The two things a seller does on a phone: call, or send the form.
   ========================================================= */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.14);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -10px 30px -18px rgba(0,0,0,.5);
  transform: translateY(105%); transition: transform .35s var(--ease);
}
.actionbar.is-up { transform: none; }
.actionbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; text-decoration: none;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.actionbar__call { background: var(--ink); color: #fff; }
.actionbar__quote { background: var(--honey-lt); color: #131313; }
.actionbar svg { width: 16px; height: 16px; flex: none; }

/* =========================================================
   Phone refinements
   ========================================================= */
@media (max-width: 640px) {
  .actionbar { display: grid; }
  /* Keep the footer clear of the fixed bar. */
  body { padding-bottom: 56px; }

  .brand__mark { width: 36px; height: 36px; }
  .foot__mark { width: 52px; height: 52px; }

  .stage__body { padding-top: 6.5rem; }
  .stage__lede { font-size: 1.02rem; }
  .stage__actions { gap: .75rem; }
  .stage__actions .btn { flex: 1 1 auto; text-align: center; padding-inline: 1.1rem; }
  .stage__ui { padding-bottom: 1.25rem; }
  .stage__now { font-size: .66rem; letter-spacing: .14em; }

  .btn { padding: 1rem 1.5rem; }

  .head { margin-bottom: 2rem; }
  .figures li { grid-template-columns: 1fr; gap: .35rem; }
  .figures strong { font-size: 2.1rem; }

  .plain--lg li { grid-template-columns: 1fr; gap: .1rem; }

  /* Captions are hover-only on desktop; on touch there is no hover, so pin them
     on — but tighter, because the tiles are two-up and the label would otherwise
     cover most of the photo. "View" goes: tapping a photo is obvious on touch. */
  .shot__cap { opacity: 1; padding: .55rem .65rem; font-size: .6rem; letter-spacing: .1em; }
  .shot__cap em { display: none; }

  .filters { gap: .4rem; }
  .chip { padding: .5rem .8rem; font-size: .7rem; }

  .slider__item blockquote { font-size: 1.35rem; line-height: 1.35; max-width: none; }

  .foot__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .foot__top { padding-bottom: 2.5rem; }

  /* Lightbox: arrows below the image instead of squeezing it from the sides. */
  .lightbox { grid-template-columns: 1fr; padding: 3.5rem 1rem 1rem; }
  .lightbox__fig { grid-row: 1; }
  .lightbox__fig img { max-height: 68vh; }
  .lightbox__nav {
    position: absolute; bottom: 1rem; font-size: 2rem; opacity: .85;
    width: 56px; height: 56px; display: grid; place-items: center; padding: 0;
    border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  }
  .lightbox__nav--prev { left: calc(50% - 4.5rem); }
  .lightbox__nav--next { right: calc(50% - 4.5rem); }
  .lightbox__close { top: .5rem; right: 1rem; width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .shell, .bar__in, .showcase { width: min(100% - 1.75rem, var(--shell)); }
  .brand__sub { display: none; }
}