/* =========================================================
   CONTENT² — core stylesheet
   Palette, type and layout follow the client's own reference
   designs. Edit the variables below to retune the whole site.
   ========================================================= */

/* ---------- self-hosted fonts (supplied by client) ----------
   Benzin       -> headings, logo wordmark, prices — bold display text
   Sanseriffic  -> body copy, nav, labels, buttons — smaller text
   Both files live in /fonts and load with no external request,
   so they render correctly even without an internet connection,
   and identically wherever this site is hosted.
   NOTE on licensing: Sanseriffic's package points to a licence
   page (chequered.ink/font-licenses-for-nal-fonts) rather than
   stating terms in the file itself — worth checking that page
   covers commercial web embedding before launch. Benzin's readme
   doesn't state terms either way. Since this is a live business
   site, it's worth confirming/buying the right licence for each
   before launch — see the README for details.
   (Roman Wood Type JNL was used for an earlier logo direction and
   New York for an earlier body-text direction; neither is
   referenced in the CSS any more — the files are still in /fonts
   if you want to revisit either look later.) */

@font-face{
  font-family: 'Benzin';
  src: url('../fonts/benzin/Benzin-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Benzin';
  src: url('../fonts/benzin/Benzin-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Benzin';
  src: url('../fonts/benzin/Benzin-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Benzin';
  src: url('../fonts/benzin/Benzin-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Benzin';
  src: url('../fonts/benzin/Benzin-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Sanseriffic';
  src: url('../fonts/sanseriffic/Sanseriffic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --cream:      #E8E4D9;   /* light warm background (About / FPV tour pages) */
  --white:      #FFFFFF;   /* Services / Contact page background */
  --lime:       #DAFF00;   /* accent green used for CTA bands + book buttons — matches logo lime */
  --lime-dark:  #A5C100;
  --lime-light: #E7FF59;   /* lighter tint — Book Now "lights up" on hover instead of darkening */
  --ink:        #111110;   /* near-black text / buttons */
  --ink-soft:   #3b3a35;
  --border:     rgba(17,17,16,0.55);
  --border-soft:rgba(17,17,16,0.28);

  --font-display: 'Benzin', Arial, sans-serif;         /* bold / headline / logo / price text */
  --font-body:    'Sanseriffic', Arial, sans-serif;    /* smaller / body text */

  --max-width: 1800px;
  --gutter: 56px;
  --radius: 999px; /* pill radius for buttons / inputs */
}

@media (max-width: 780px){
  :root{ --gutter: 24px; }
}

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

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: 0.035em;
  -webkit-font-smoothing: antialiased;
  /* Sanseriffic only ships one (fairly light) weight — this hairline
     stroke gives body text a touch more presence without a real
     bold cut to switch to. Remove if a bold weight file is added. */
  -webkit-text-stroke: 0.35px currentColor;
  /* every page fades in on arrival and fades out on the way to the next
     one (see main.js) — starts hidden so the fade-in has something to
     animate from; the <noscript> rule in <head> is the no-JS fallback */
  opacity: 0;
  transition: opacity 210ms ease;
}
body.is-page-ready{ opacity: 1; }
body.is-page-leaving{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  body{ transition: none; }
}

/* The stroke above is only meant for small Sanseriffic body text.
   Reset it on every Benzin/display element — inherited stroke plus
   their tight line-height was clipping the tops of letters like
   T, O, U, Y. */
h1, h2, h3,
.logo-mark,
.marquee-track,
.price-tag,
.service-row .price,
.footer-email{
  -webkit-text-stroke: 0;
}

img, video{ display:block; max-width:100%; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 700; /* Benzin Bold */
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

p{ margin: 0; }

.visually-hidden{
  position:absolute; width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

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

/* ---------- layout helpers ---------- */

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

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; gap: 40px; }
}

section{ position:relative; }

/* ---------- header / nav ---------- */

.site-header{
  position: static;
  z-index: 50;
  background: var(--bg, var(--cream));
  padding: 22px var(--gutter);
}

.site-header.is-transparent{
  position:absolute;
  top:0; left:0; right:0;
  background: transparent;
}

.header-inner{
  max-width: var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}

.logo{
  font-size: 21px;
  white-space:nowrap;
  display:block;
  margin-right: auto;
  transition: transform .2s ease, filter .2s ease;
}
.logo:hover,
.logo:focus-visible{
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 0 7px rgba(255,255,255,0.75));
}
@media (prefers-reduced-motion: reduce){
  .logo:hover, .logo:focus-visible{ transform:none; }
}

.site-header.is-transparent .nav-links a{ color: var(--white); }
.site-header.is-transparent .logo-mark{ color: var(--white); }

/* ---------- logo wordmark: same bold display face as headings ---------- */

.logo-mark{
  display:inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.logo-mark sup{
  font-size: 0.5em;
  top: -0.55em;
  margin-left: 0.02em;
}
/* footer sits on lime — the wordmark starts ink-black like the rest of the
   footer text, and eases to white on hover */
.footer-logo .logo-mark{ color: var(--ink); transition: color .3s ease; }
.footer-logo:hover .logo-mark{ color: var(--white); }

.nav-links{
  display:flex;
  gap: 36px;
  align-items:center;
  list-style:none;
  margin:0; padding:0;
  font-size: 22px;
}

.nav-links a{
  display: inline-block;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: transform .18s ease, filter .18s ease;
}

.nav-links a[aria-current="page"]{
  border-bottom-color: currentColor;
}

.nav-links a:hover,
.nav-links a:focus-visible{
  transform: translateY(-2.25px);
  /* text-color glow — the ink version is dialed back 25% (rgba alpha
     0.75 vs. a plain currentColor's implicit full opacity), since a
     glow the same strength as the underlying black text just reads
     as a smudge rather than a glow */
  filter: drop-shadow(0 0 6px rgba(17,17,16,0.75));
}
.site-header.is-transparent .nav-links a:hover,
.site-header.is-transparent .nav-links a:focus-visible{
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.75));
}
@media (prefers-reduced-motion: reduce){
  .nav-links a:hover, .nav-links a:focus-visible{ transform:none; }
}

.nav-right{
  display:flex;
  align-items:center;
  gap: 28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height: 56px;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  border-radius: var(--radius);
  padding: 0 28px;
  border: 1px solid var(--ink);
  cursor:pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--ink);
  color: var(--white);
  -webkit-text-stroke: 0.6px currentColor;
}
.btn-primary:hover{ background: var(--ink-soft); }

.btn-lime{
  background: var(--lime);
  color: var(--white);
  border-color: var(--ink);
  -webkit-text-stroke: 0.6px currentColor;
}
.btn-lime:hover{ background: var(--lime-dark); }

.btn-outline{ background: transparent; color: var(--ink); }

/* ---------- "Book Now" CTA — glowing lime pill ---------- */
.btn-book{
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0;
  box-shadow: 0 0 22px 4px rgba(218,255,0,0.45);
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.btn-book:hover,
.btn-book:focus-visible{
  transform: translateY(-1px) scale(1.05);
  background: var(--lime-light);
  box-shadow: 0 0 42px 10px rgba(218,255,0,0.19);
}
@media (prefers-reduced-motion: reduce){
  .btn-book:hover, .btn-book:focus-visible{ transform:none; }
}

/* Send + Book a shoot — both stay solid black, always (Home/About/
   Services/Contact CTA forms, and every package detail page). On hover
   the fill never changes — only the type turns lime — and the glow
   dials back slightly and matches the BUTTON's own black fill, not the
   text or the outline. .btn-shoot is kept as a hook on the "Book a
   shoot" links (identical styling to plain .btn-dark for now) in case
   the two ever need to diverge again later. */
.btn-book.btn-dark,
.btn-book.btn-dark.btn-shoot{
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: 0 0 18px 3px rgba(255,255,255,0.25);
  transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
.btn-book.btn-dark:hover,
.btn-book.btn-dark:focus-visible,
.btn-book.btn-dark.btn-shoot:hover,
.btn-book.btn-dark.btn-shoot:focus-visible{
  background: var(--ink);
  color: var(--lime);
  box-shadow: 0 0 15px 3px rgba(17,17,16,0.35);
}
/* Follow: lime background, dark type — with the glow swapped to
   match (lime halo, since the background itself is now lime). */
.btn-book.btn-dark.btn-follow{
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  box-shadow: 0 0 18px 3px rgba(218,255,0,0.4);
}
.btn-book.btn-dark.btn-follow:hover,
.btn-book.btn-dark.btn-follow:focus-visible{
  background: var(--lime-light);
  box-shadow: 0 0 34px 8px rgba(218,255,0,0.55);
}

/* CTA Send buttons on a lime background (Home/About/Services — Contact's
   Send button sits on white and keeps the plain white-on-black look
   above) — lime type on standby, swapping to white on hover. Fill stays
   black throughout. */
.section-lime .btn-book.btn-dark{
  color: var(--lime);
}
.section-lime .btn-book.btn-dark:hover,
.section-lime .btn-book.btn-dark:focus-visible{
  color: var(--white);
}

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:currentColor; display:block; }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute;
    top: 100%; left:0; right:0;
    background: var(--cream);
    flex-direction:column;
    align-items:flex-start;
    padding: 20px var(--gutter) 28px;
    gap: 18px;
    border-top: 1px solid var(--border-soft);
    display:none;
  }
  .site-header.nav-open .nav-links{ display:flex; }
  .nav-right .btn{ padding: 10px 18px; font-size: 18px; }
}

/* ---------- media placeholder (image or video slot) ---------- */

.media{
  position:relative;
  overflow:hidden;
  background: #cfcbbd;
  border: 1px solid var(--border-soft);
}
.media img, .media video{
  width:100%; height:100%; object-fit: cover; display:block;
}
.media-placeholder{
  width:100%; height:100%;
  min-height: 220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 24px;
  background:
    repeating-linear-gradient(45deg, rgba(17,17,16,0.06) 0 12px, transparent 12px 24px);
  color: var(--ink-soft);
  font-size: 16px;
  letter-spacing: 0.03em;
}
.media-placeholder span{
  border: 1px dashed var(--border);
  padding: 10px 16px;
  background: rgba(255,255,255,0.6);
}

.ratio-portrait{ aspect-ratio: 4 / 5; }
.ratio-square{ aspect-ratio: 1 / 1; }
.ratio-wide{ aspect-ratio: 16 / 9; }
.ratio-hero{ aspect-ratio: 21 / 9; }

/* ---------- sections ---------- */

.section{ padding: 100px 0; }
@media (max-width: 780px){ .section{ padding: 64px 0; } }

/* The lime "Ready to..." CTA on the home/about/services pages (not
   Contact's, which is white) — locked to exactly one screen tall
   (fills it, but never runs past it — every element, including the
   footer right after it, stays reachable with no extra scrolling).
   `overflow:hidden` is a safety net only; the real work is below:
   the message box (.form-compact) is stretched through this whole
   chain so it can flex to fill whatever room is actually left over
   after the rest of the form, rather than guessing a fixed height. */
.section-lime#book{
  flex: 1;
  min-height: 0;
  padding: 32px 0;
  display:flex;
  overflow: hidden;
}
.section-lime#book .wrap{ width:100%; }

/* Wraps the lime CTA section together with the footer that follows it,
   so the pair — not just the CTA alone — is what's locked to one screen:
   the footer keeps its natural height and the CTA (flex:1 above) absorbs
   whatever's left, so the logo/email/socials stay in view at the bottom
   instead of getting pushed off past a full 100vh CTA. */
.book-footer-wrap{
  display:flex;
  flex-direction:column;
  height:100vh;
}
.book-footer-wrap .site-footer{ flex:none; }

.section-cream{ background: var(--cream); }
.section-white{ background: var(--white); }
.section-lime{ background: var(--lime); }
.section-ink{ background: var(--ink); color: var(--white); }

.eyebrow-link{
  font-size: 19px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.display-1{ font-size: clamp(40px, 6vw, 84px); }
.display-2{ font-size: clamp(32px, 4.4vw, 56px); }
.display-3{ font-size: clamp(24px, 3vw, 34px); }

.lede{
  font-size: 20px;
  max-width: 46ch;
  color: var(--ink-soft);
}
.section-lime .lede{ color: var(--ink); }

.bold-em{ font-weight: 700; letter-spacing: 0.045em; color: var(--ink); }
.section-lime .bold-em{ color: var(--ink); }

/* ---------- hero (home) ---------- */

.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:flex-end;
  color: var(--white);
}
.hero .media{ position:absolute; inset:0; z-index:0; aspect-ratio:auto; }
.hero .media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
}
.hero-content{
  position:relative; z-index:1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 13vh;
  width:100%;
  text-align:center;
}
.hero-content h1{
  color: var(--white);
  font-size: clamp(38px, 7vw, 92px);
  margin-bottom: 18px;
}
.hero-content p{
  color: rgba(255,255,255,0.88);
  max-width: 46ch;
  margin: 0 auto 28px;
  font-size: 19px;
}

/* ---------- process strip (3-up) ---------- */

.process-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 28px;
  align-items:start;
}
@media (max-width: 900px){
  .process-grid{ grid-template-columns: 1fr; }
}
.process-item{
  text-align: center;
}
.process-item figcaption{
  margin-top: 14px;
  font-size: 19px;
}

/* ---------- gallery strip ---------- */

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- YouTube showreel ---------- */

.showreel-grid{ align-items:start; }
.showreel-item{
  position:relative;
  display:block;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  overflow:hidden;
  background: #cfcbbd;
  border: 1px solid var(--border-soft);
  cursor:pointer;
  transform: scale(1);
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.showreel-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s ease;
}
.showreel-item:hover, .showreel-item:focus-visible{
  transform: scale(1.045);
  box-shadow: 0 16px 34px rgba(17,17,16,0.28);
  z-index: 2;
  outline: none;
}
.showreel-item:active{ transform: scale(0.985); }
.showreel-item:hover img{ transform: scale(1.06); }
.showreel-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(17,17,16,0.18);
  transition: background .25s ease;
}
.showreel-item:hover .showreel-play, .showreel-item:focus-visible .showreel-play{
  background: rgba(17,17,16,0.34);
}
.showreel-play svg{
  width:46px; height:46px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.4));
  transform: scale(1);
  transition: transform .25s ease;
}
.showreel-item:hover .showreel-play svg{ transform: scale(1.12); }
@media (max-width: 900px){
  .showreel-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .showreel-grid{ grid-template-columns: 1fr; }
}

/* ---------- marquee ---------- */

.marquee{
  overflow:hidden;
  white-space:nowrap;
  padding: 2px 0;
  display:flex;
  align-items:center;
}
.marquee-track{
  /* Fallback values, used only until the JS in main.js measures the
     real, live-rendered font and replaces both of these with exact
     numbers (see the "marquee" section of main.js). */
  --marquee-shift: 0.1em;
  --marquee-distance: 50%;
  display:flex;
  align-items:center;
  width: max-content;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 16.5vw, 240px);
  line-height: 1;
  /* Reserve equal real space above and below the line box (not just a
     visual transform) so the downward correction below has somewhere
     to land without getting cropped by .marquee's overflow:hidden. */
  padding: var(--marquee-shift) 0;
  animation: marquee 12s linear infinite;
  will-change: transform;
}
.marquee-copy{
  display:flex;
  align-items:center;
  white-space:nowrap;
}
.marquee-text{
  display:inline-block;
  /* Benzin's capital letters sit noticeably above the geometric center
     of their own line box (measured directly from the font file: cap
     height spans roughly the top 74% of the em, not the middle), so
     flex-centering the raw box leaves the visible letters looking too
     high. This nudges the actual ink down to true center, into the
     padding reserved above on .marquee-track. */
  transform: translateY(var(--marquee-shift));
}
.marquee-dot{
  /* a drawn circle rather than a font glyph — the "·" character's
     vertical position is baked into the font's own metrics and
     resisted every centering approach we tried; a plain shape has no
     such ambiguity and centers exactly where we put it */
  display:inline-block;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: currentColor;
  margin: 0 0.4em;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
@keyframes marquee{
  from{ transform: translate3d(0,0,0); }
  /* Exactly one copy's width — see --marquee-distance above. Using a
     JS-measured pixel value instead of trusting the -50% shorthand to
     land pixel-perfectly avoids any subpixel drift at the loop point,
     which is what a visible "seam" in an infinite marquee usually is. */
  to{ transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); }
}

/* ---------- services list ---------- */

.service-row{
  position:relative;
  z-index:0;
  display:grid;
  grid-template-columns: 120px 1fr auto;
  gap: 32px;
  align-items:center;
  padding: 22px 20px;
  margin: 0 -20px;
  text-align:left;
  background:none;
  border:none;
  width:calc(100% + 40px);
  cursor:pointer;
  color: inherit;
  font-family: inherit;
  border-radius: 0;
  transition: color .25s ease;
}
.service-row .thumb{
  width:120px; height:120px;
  position:relative;
  background:var(--white);
  border:none;
  transition: background-color .3s ease;
}
.service-row .thumb img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: opacity .3s ease;
}
.service-row .thumb img.thumb-hover{ opacity:0; }
.service-row:hover .thumb img.thumb-default,
.service-row:focus-visible .thumb img.thumb-default,
.service-row.is-selected .thumb img.thumb-default{
  opacity:0;
}
.service-row:hover .thumb img.thumb-hover,
.service-row:focus-visible .thumb img.thumb-hover,
.service-row.is-selected .thumb img.thumb-hover{
  opacity:1;
}
.service-row h3{ font-size: clamp(20px, 2.6vw, 30px); margin-bottom: 8px; }
.service-row .desc{ font-size: 18px; color: var(--ink-soft); max-width: 62ch; transition: color .3s ease; }
.service-row .price{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  white-space:nowrap;
}

/* The highlight itself is a full-viewport-width layer behind the row's
   content, rather than the row's own background — so it bleeds all the
   way to the browser edges instead of stopping at the page's gutters. */
.service-row::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  right:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
  background: transparent;
  transition: background-color .3s ease;
  z-index:-1;
}

.service-row:hover::before,
.service-row:focus-visible::before,
.service-row.is-selected::before,
.service-row:hover .thumb,
.service-row:focus-visible .thumb,
.service-row.is-selected .thumb{
  background: var(--ink);
}
.service-row:hover,
.service-row:focus-visible,
.service-row.is-selected{
  color: var(--white);
}
.service-row:hover .desc,
.service-row:focus-visible .desc,
.service-row.is-selected .desc{
  color: var(--white);
}
/* The package's name and price pick up the lime accent — the
   description stays white, same as the rest of the row. */
.service-row:hover h3,
.service-row:focus-visible h3,
.service-row.is-selected h3,
.service-row:hover .price,
.service-row:focus-visible .price,
.service-row.is-selected .price{
  color: var(--lime);
}

@media (max-width: 780px){
  .service-row{ grid-template-columns: 84px 1fr; }
  .service-row .price{ grid-column: 2; }
  .service-row .thumb{ width:84px; height:84px; }
}

/* ---------- product / detail page ---------- */

.product-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items:flex-start;
}
@media (max-width: 900px){ .product-layout{ grid-template-columns: 1fr; gap:36px; } }

/* product titles can run long ("FPV drone tour 2 (Landscape + Portrait)"),
   so they get their own smaller scale rather than the full display-1 size */
.product-layout h1{
  font-size: clamp(28px, 3.4vw, 46px);
  margin-bottom: 4px;
}

.breadcrumb{
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.breadcrumb a{ text-decoration: underline; text-underline-offset: 3px; }

.price-tag{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 18px 0 22px;
}

.qty-row{ display:flex; align-items:center; gap: 22px; margin-top: 32px; flex-wrap:wrap; }
.qty{
  display:flex; align-items:center;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
}
.qty button{
  background:none; border:none; width:40px; height:100%;
  font-size:22px; cursor:pointer; font-family: var(--font-body);
}
.qty input{
  width:36px; height:100%; text-align:center; border:none; background:none;
  font-family: var(--font-body); font-size:20px;
}
.qty input:focus{ outline:none; }

/* ---------- forms ---------- */

/* Fills the width of its grid column (rather than stopping at a fixed
   cap) so its right edge lines up with whatever sits on the other
   side of the row — the photo on Contact, the heading on About/Services. */
.form{ width: 100%; }

/* Contact page only: the form sits beside a full-height photo, so it
   fills that same height (grid-2's default row stretch already makes
   the column itself match the photo — this makes the CONTENT inside
   it match too) and the message box absorbs the extra space, so Send
   ends up level with the bottom of the photo instead of stopping short */
.contact-form-col{ display:flex; flex-direction:column; height:100%; }
.contact-form{ display:flex; flex-direction:column; flex:1; }
.contact-form .field:has(textarea){ display:flex; flex-direction:column; flex:1; }
.contact-form textarea{ flex:1; }
/* The column's flex stretch above would otherwise also stretch the
   Send button to the full form width — keep it back to its natural,
   content-hugging pill size. */
.contact-form button[type="submit"]{ align-self: flex-start; }
.form fieldset{ border:none; padding:0; margin:0 0 14px; }
.form legend{ font-size: 18px; margin-bottom: 10px; padding:0; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }

.field{ margin-bottom: 14px; }
.field label{ display:block; font-size: 18px; margin-bottom: 8px; }
.field .req{ color: var(--ink-soft); font-weight:400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%;
  font-family: var(--font-body);
  font-size: 19px;
  letter-spacing: 0.035em;
  padding: 13px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.35);
  color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.field textarea{
  border-radius: 22px;
  min-height: 380px;
  resize: vertical;
  overflow-y: auto;
  /* A slim, styled scrollbar embedded in the box once the message runs
     longer than it can show, replacing the browser's default chunky one.
     "thin" is also what drops Firefox's up/down step-arrows — Firefox has
     no property to remove those from the full-size "auto" scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink) rgba(17,17,16,0.08);
}
.field textarea::-webkit-scrollbar{
  width: 12px;
}
.field textarea::-webkit-scrollbar-track{
  background: rgba(17,17,16,0.08);
  border-radius: 999px;
  margin: 8px 0; /* keeps the track inset from the box's rounded corners */
}
.field textarea::-webkit-scrollbar-thumb{
  background-color: var(--ink);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.field textarea::-webkit-scrollbar-thumb:hover{
  background-color: var(--ink-soft);
}
.field textarea::-webkit-scrollbar-corner{
  background: transparent;
}
/* Minimalist look: no up/down step-arrows on the scrollbar (Chromium/Safari) */
.field textarea::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}
/* The home/about/services CTA forms — same "fill the leftover space"
   technique already used for Contact's photo-height form. The section
   is a fixed one-screen-tall box (see .section-lime#book above); this
   chain hands that real, bounded height down to the message box, so
   it grows or shrinks to fit exactly whatever room is left after the
   name/phone/email/company rows, the checkbox and the Send button —
   never a guessed fixed size, and never pushing anything off-screen. */
.form-compact{
  display:flex;
  flex-direction:column;
  height:100%;
}
.form-compact .field:has(textarea){
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.form-compact textarea{
  flex:1;
  min-height:60px; /* a floor so it never shrinks away entirely */
}
/* Same fix as Contact's Send button: the column's flex stretch would
   otherwise stretch this to the full form width — keep it the natural,
   content-hugging pill size instead, matching Contact's Send button. */
.form-compact button[type="submit"]{ align-self: flex-start; }
/* Below 900px, .grid-2 drops to a single stacked column (see .grid-2's
   own media query), so the heading and the form are no longer two
   side-by-side tracks the fixed one-screen height can divide between
   them — the "fill the leftover space" chain above has nothing
   meaningful to hand the message box at that point. Revert to the
   simpler, natural-height behavior there instead of forcing a cramped
   fit. */
@media (max-width: 900px){
  .book-footer-wrap{ height:auto; display:block; }
  .section-lime#book{
    flex:none;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .form-compact{ height:auto; }
  .form-compact .field:has(textarea){ flex:none; }
  .form-compact textarea{ flex:none; min-height:140px; }
}
.field input:hover, .field textarea:hover{
  border-color: var(--lime);
}
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: var(--lime);
  background: rgba(255,255,255,0.75);
}
/* on lime page sections, a lime border on a lime background would be
   invisible — use ink there instead so the highlight still reads clearly */
.section-lime .field input:hover, .section-lime .field textarea:hover,
.section-lime .field input:focus, .section-lime .field textarea:focus{
  border-color: var(--ink);
}
/* Contact's "Let's talk" form sits on white, not lime — hovered/focused
   fields there use a black outline instead of the site's usual lime */
.section-white .field input:hover, .section-white .field textarea:hover,
.section-white .field input:focus, .section-white .field textarea:focus{
  border-color: var(--ink);
}

.checkbox-row{ display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom: 20px; }
.checkbox-row input{ width:16px; height:16px; }

.form-note{ font-size: 17px; color: var(--ink-soft); margin-top: 10px; max-width: 60ch; }
.section-lime .form-note{ color: var(--ink-soft); }

/* ---------- footer ---------- */

.site-footer{
  background: var(--lime);
  padding: 64px 0 40px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  gap: 24px; flex-wrap: wrap;
}
.footer-logo{
  font-size: clamp(36px, 5vw, 58px);
  display:inline-block;
}
.footer-email{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 50px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align:right;
  max-width: 900px;
  line-height: 1;
}
.footer-email a{ transition: color .3s ease; }
.footer-email a:hover{ color: var(--white); }
@media (max-width: 780px){
  .footer-top{ flex-direction:column; }
  .footer-email{ text-align:left; }
}
.footer-bottom{
  display:flex; justify-content:flex-end; align-items:center;
  margin-top: 28px; flex-wrap: wrap; gap: 16px;
}
.footer-socials{ display:flex; align-items:center; gap: 20px; }
.footer-socials a{
  display:flex; align-items:center; justify-content:center;
  transition: color .3s ease;
}
.footer-socials a:hover{ color: var(--white); }
.footer-socials svg{ width:22px; height:22px; }
.footer-socials img{
  width:22px; height:22px; display:block; object-fit:contain;
  transition: filter .3s ease;
}
.footer-socials a:hover img{ filter: brightness(0) invert(1); }

/* ---------- hero video loading screen ---------- */

#hero-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background: var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 22px;
  transition: opacity .5s ease;
}
#hero-loader.is-hidden{
  opacity:0;
  pointer-events:none;
}
#hero-loader .logo-mark{
  color: var(--white);
  font-size: 32px;
}
.hero-loader-bar{
  width: 160px;
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow:hidden;
}
.hero-loader-bar::after{
  content:"";
  display:block;
  width: 40%;
  height:100%;
  background: var(--lime);
  border-radius: 999px;
  animation: heroLoaderSweep 1.1s ease-in-out infinite;
}
@keyframes heroLoaderSweep{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-loader-bar::after{ animation: none; width:100%; }
}

/* hero video fills the same box the placeholder used to */
.hero .media video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}