/* ============================================================
   GENERATED FILE — do not edit.
   Built by build-css.sh from assets/css/*.css sources.
   Edit the module, then re-run ./build-css.sh
   ============================================================ */

/* ==========================================================================
   Fog Media — design tokens
   Every brand value lives here and NOWHERE else. Change a value once and it
   propagates site-wide. Nothing in this file may reference another module.
   
   NOTE: CSS custom properties cannot be used inside @media queries —
   `@media (max-width: var(--bp))` is invalid and silently fails. Breakpoints are
   therefore documented constants, listed below; use these literals everywhere.
   
     BREAKPOINTS   900px  = tablet / mobile-nav threshold
                   560px  = small phone
                   1280px = --maxw content ceiling (layout, not a media query)
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------*/
:root{
  --bg:#f6f3ee; --bg-2:#f5f0ee; --bg-3:#efe9df;
  --ink:#211e1a; --ink-2:#2a251f; --ink-3:#3a342c; --muted:#544c40;
  --olive:#656853;            /* brand: text/border on light bg (AA 5.19) */
  --olive-panel:#5b5e48;      /* dark section bg: lifts cream text to AA   */
  --olive-d:#4d503f;
  --cream:#f0e9dc; --cream-2:#e2ddcd; --cream-3:#e6dcc2;
  --gold:#c2ad8c; --gold-2:#b8a888;
  --line:#e4ddd0; --line-2:#cabfad;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,Segoe UI,sans-serif;
  --maxw:1280px;
  --pad-x:clamp(24px,5vw,72px);
  --gap-mosaic:4px;            /* image-grid gutter: homepage mosaic + /gallery/ */
  --focus:#211e1a;
  --grain:.35;  /* hero film-grain strength — 0 = off, ~.35 subtle, ~.9 heavy 35mm */
}

/* ==========================================================================
   Fog Media — base layer
   Element defaults only: self-hosted fonts, reset, accessibility primitives and
   shared keyframes. No components, no layout, no page-specific rules.
   All url() paths are ROOT-RELATIVE (/assets/...). Required: this file is both
   linked from /assets/css/ AND inlined into HTML at varying depths — only an
   absolute path resolves identically in both cases.
   ========================================================================== */

/* ---- Self-hosted fonts (latin subset only; en-IN content) --------------*/
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;
  font-display:swap;src:url("https://fogmediapro.com/wp-content/themes/fogmedia/assets/fonts/cormorant-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:'Cormorant Garamond';font-style:italic;font-weight:400;
  font-display:swap;src:url("https://fogmediapro.com/wp-content/themes/fogmedia/assets/fonts/cormorant-italic-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:'Jost';font-style:normal;font-weight:300 500;
  font-display:swap;src:url("https://fogmediapro.com/wp-content/themes/fogmedia/assets/fonts/jost-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;
}

/* ---- Reset -------------------------------------------------------------*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--serif);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-inline-size:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--olive)}
button{font:inherit;color:inherit}
::selection{background:#d8c7ac;color:var(--ink)}

/* ---- Focus & skip link -------------------------------------------------*/
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.skip:focus-visible{outline-color:var(--cream)}
.skip{
  position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:100;
  transform:translateY(-160%);background:var(--olive-panel);color:#fff;
  padding:12px 20px;font-family:var(--sans);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;transition:transform .2s ease;
}
.skip:focus{transform:none}

/* ---- Reveal (progressive; no-JS & reduced-motion safe) -----------------*/
.js [data-reveal]{opacity:0}
.js [data-reveal].is-visible{animation:fmfade .9s cubic-bezier(.22,.61,.36,1) both}

/* Staggered variant: the CONTAINER stops animating and its children come in
   one after another instead. Add `stagger` beside `data-reveal`. Pure CSS —
   nth-child, no JS index bookkeeping. Delays are capped at 8 so a 14-tile
   mosaic never trickles for over a second; everything past the 8th shares the
   last step. NOTE the reduced-motion block in utilities.css must zero
   animation-delay too — killing the duration alone would still leave the
   stagger's dead wait before content appeared. */
.js [data-reveal].stagger{opacity:1}
.js [data-reveal].stagger.is-visible{animation:none}
.js [data-reveal].stagger > *{opacity:0}
.js [data-reveal].stagger.is-visible > *{animation:fmfade .8s cubic-bezier(.22,.61,.36,1) both}
.js [data-reveal].stagger.is-visible > :nth-child(1){animation-delay:0ms}
.js [data-reveal].stagger.is-visible > :nth-child(2){animation-delay:60ms}
.js [data-reveal].stagger.is-visible > :nth-child(3){animation-delay:120ms}
.js [data-reveal].stagger.is-visible > :nth-child(4){animation-delay:180ms}
.js [data-reveal].stagger.is-visible > :nth-child(5){animation-delay:240ms}
.js [data-reveal].stagger.is-visible > :nth-child(6){animation-delay:300ms}
.js [data-reveal].stagger.is-visible > :nth-child(7){animation-delay:360ms}
.js [data-reveal].stagger.is-visible > :nth-child(n+8){animation-delay:420ms}
@keyframes fmfade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fmdrift{0%{transform:scale(1.12)}50%{transform:scale(1.18) translate(-1.2%,-1%)}100%{transform:scale(1.12)}}
@keyframes fmflicker{0%,100%{opacity:.42}50%{opacity:.52}}
@keyframes fmmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Fog Media — layout layer
   Page furniture: the fixed header/nav, hero, masthead, section scaffolding,
   containers and the footer. Breakpoints are co-located with what they override
   (so cascade order can never drift).
   url() paths are ROOT-RELATIVE — see the note in base.css.
   ========================================================================== */

/* ---- Header / nav ------------------------------------------------------
   ABSOLUTE, NOT FIXED (client call: no floating nav). The header overlays the
   top of the hero exactly as a fixed one would, but scrolls away with the page
   and never comes back. Consequences of that choice, all deliberate:
     - it is OUT OF FLOW, so the hero keeps its full 100svh and .page-head keeps
       its large top padding. Switching to a static in-flow bar would mean
       reworking both.
     - there is no `.scrolled` state any more (the bar is gone by the time you
       have scrolled), so the JS toggle and every `.scrolled` rule were removed.
       Do not reintroduce them without making the header fixed again.
     - mix-blend-mode:difference STAYS. The nav still sits on hero photography,
       so it still has to stay legible over unpredictable imagery.          */
.site-header{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad-x);
}
.brand{display:flex;align-items:center}
.brand img{height:48px;width:auto}
.primary-nav ul{display:flex;gap:clamp(18px,2.6vw,40px);list-style:none;align-items:center;mix-blend-mode:difference}
.primary-nav a{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#fff;padding:4px 0}
.primary-nav a:hover{color:#fff;opacity:.7}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px;mix-blend-mode:difference}
.burger span{display:block;width:26px;height:1.5px;background:#fff;transition:transform .3s ease,opacity .3s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:60;background:var(--olive-panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
}
.mobile-menu[hidden]{display:none}
/* Entrance is an ANIMATION, not a transition: the menu is toggled with the
   [hidden] attribute (display:none), and display is not transitionable — so a
   transition would simply never play. The animation re-runs each time the
   element returns to display:flex, which is exactly the behaviour wanted. */
.mobile-menu{animation:fmmenu .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes fmmenu{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.mobile-menu a{font-family:var(--serif);font-size:34px;font-weight:300;color:var(--cream);
  animation:fmfade .45s cubic-bezier(.22,.61,.36,1) both}
.mobile-menu a:nth-of-type(1){animation-delay:.06s}
.mobile-menu a:nth-of-type(2){animation-delay:.11s}
.mobile-menu a:nth-of-type(3){animation-delay:.16s}
.mobile-menu a:nth-of-type(4){animation-delay:.21s}
.mobile-menu a:nth-of-type(5){animation-delay:.26s}
.mobile-menu a:nth-of-type(n+6){animation-delay:.31s}
.mobile-menu .close{position:absolute;inset-block-start:22px;inset-inline-end:20px;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);padding:10px}

/* ---- Hero --------------------------------------------------------------*/
.hero{position:relative;block-size:100svh;min-block-size:640px;inline-size:100%;overflow:hidden;background:var(--olive-panel)}
.hero__media{position:absolute;inset:0}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fmdrift 26s ease-in-out infinite;will-change:transform}
/* Film grain: real per-pixel white noise, oversized so the layer can jitter
   without exposing an edge. steps() makes it jump like film rather than glide.
   Transform-only animation => GPU composited, no per-frame repaint or JS. */
.hero__grain{
  position:absolute;inset:-25%;pointer-events:none;
  background:url("https://fogmediapro.com/wp-content/themes/fogmedia/assets/img/grain.png") repeat;background-size:96px 96px;
  mix-blend-mode:soft-light;opacity:var(--grain);
  animation:fmgrain .8s steps(1) infinite;will-change:transform;
}
@keyframes fmgrain{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-4%,3%,0)}
  40%{transform:translate3d(3%,-4%,0)}
  60%{transform:translate3d(-3%,-2%,0)}
  80%{transform:translate3d(4%,2%,0)}
  100%{transform:translate3d(0,0,0)}
}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,12,.5) 0%,rgba(20,16,12,.14) 32%,rgba(20,16,12,.05) 52%,rgba(20,16,12,.62) 100%)}
.hero__copy{position:absolute;inset-inline:0;inset-block-end:clamp(48px,8vh,96px);text-align:center;padding-inline:24px;color:#fff;text-shadow:0 1px 24px rgba(0,0,0,.28)}
.hero__copy .eyebrow{color:#f0e7d8;letter-spacing:.4em;margin-block-end:20px;opacity:.95}
.hero h1{font-weight:300;font-size:clamp(34px,6.2vw,80px);line-height:1.04;letter-spacing:.01em;text-wrap:balance;max-inline-size:16ch;margin-inline:auto}
.hero h1 em{font-weight:400;font-style:italic}
.hero__sub{font-style:italic;font-size:clamp(17px,2.1vw,25px);margin-block-start:20px;font-weight:300;color:#ece3d4}

/* ---- Masthead (hero-less pages: blog index, articles) ---------------- */
/* Pages without a hero need the header opaque from the first pixel — the
   default header is white-on-dark and relies on a dark hero behind it. */
.site-header--solid{background:var(--olive-panel);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.site-header--solid .primary-nav ul,.site-header--solid .burger{mix-blend-mode:normal}
.page-head{padding:clamp(140px,17vh,210px) var(--pad-x) clamp(48px,7vw,80px);text-align:center}
.page-head .eyebrow{display:block;margin-block-end:22px}
.page-head h1{font-weight:300;font-size:clamp(40px,7vw,86px);line-height:1.02;
  letter-spacing:.01em;color:var(--ink-2)}
.page-head .lede{font-style:italic;font-size:clamp(17px,2.1vw,25px);font-weight:300;
  color:var(--muted);margin-block-start:18px}
.page-head .answer{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.85;
  color:var(--muted);max-inline-size:64ch;margin:32px auto 0}
.page-head .crumbs ol{margin-block-end:0;margin-block-start:34px}

/* Article variant: a post title is long-form prose, so it runs smaller and is
   measure-capped at 22ch. Previously this lived only in the article page's
   inline <style> and was lost when the blocks were consolidated — regression
   caught by the computed-style diff in STEP 4. */
.page-head--post{padding-block-end:clamp(40px,5vw,56px)}
.page-head--post h1{font-size:clamp(32px,5vw,60px);line-height:1.08;
  max-inline-size:22ch;margin-inline:auto;text-wrap:balance}

.post-meta{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive);margin-block-start:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.post-meta .sep{color:var(--gold-2)}
.post-hero{max-inline-size:var(--maxw);margin:0 auto clamp(48px,6vw,80px);padding-inline:var(--pad-x)}
.post-hero img{width:100%;height:auto;aspect-ratio:20/11;object-fit:cover}
.post-hero figcaption{font-family:var(--sans);font-size:12px;color:var(--muted);
  margin-block-start:12px;text-align:center}

/* ---- Header: light variant (hero-less pages on the cream background) ----
   The default header is white-on-dark and relies on a hero behind it; --solid
   paints an olive bar instead. --light is the third option: no bar at all.
   The logo is a WHITE wordmark PNG, so it must be darkened or it vanishes on
   cream. Used by /gallery/, /blog/ and the article, which open on a masthead
   rather than a photograph.
   The former `.site-header--light.scrolled` rule (cream bar + hairline once
   content scrolled underneath) is gone with the rest of the scrolled state —
   nothing ever passes under this header now, it just leaves. -------------- */
.site-header--light{background:transparent;box-shadow:none}
.site-header--light .primary-nav ul,
.site-header--light .burger{mix-blend-mode:normal}
.site-header--light .primary-nav a{color:var(--ink-2)}
.site-header--light .primary-nav a:hover{color:var(--olive);opacity:1}
.site-header--light .burger span{background:var(--ink-2)}
.site-header--light .brand img{filter:brightness(0)}

/* ---- Section scaffolding -----------------------------------------------*/
.section{padding:clamp(90px,13vw,160px) var(--pad-x)}
.section--tight{padding-block:clamp(56px,8vw,96px)}
.section-head{margin-block-end:clamp(48px,7vw,84px)}
.section-head h2{font-weight:300;font-size:clamp(34px,6vw,72px);line-height:1;color:var(--ink-2)}
.on-dark .section-head h2{color:#fff}
.text-link{font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;border-block-end:1px solid var(--gold-2);padding-block-end:6px;color:var(--ink-3);white-space:nowrap}
.on-dark .text-link{color:var(--cream);border-color:var(--olive)}

/* ---- Footer ------------------------------------------------------------*/
.site-footer{background:var(--olive-panel);color:var(--cream-2);padding:clamp(56px,7vw,88px) var(--pad-x) 40px}
.site-footer .top{max-inline-size:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-block-end:48px;border-block-end:1px solid rgba(255,255,255,.22)}
.site-footer .about-col{max-inline-size:360px}
.site-footer img{height:40px;width:auto;margin-block-end:18px}
.site-footer .about-col p{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.8;color:var(--cream-2)}
.site-footer h2{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-3);margin-block-end:18px}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer li a{font-family:var(--sans);font-weight:300;font-size:14px;color:var(--cream-2)}
.site-footer li a:hover{color:#fff}
.site-footer .copy{max-inline-size:var(--maxw);margin:24px auto 0;font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--cream-2)}

/* ---- Layout breakpoints (co-located; override the rules above) ---------- */
@media (max-width:900px){
  .primary-nav{display:none}
  .burger{display:flex}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(30px,9vw,44px)}
}
/* ==========================================================================
   Fog Media — component layer
   Self-contained UI blocks. Each is BEM-named (block__element--modifier) and
   carries its own breakpoints immediately after its base rules.
   ========================================================================== */

/* ---- Intro / answer ----------------------------------------------------*/
.intro{max-inline-size:1000px;margin-inline:auto;padding:clamp(90px,13vw,168px) 24px clamp(52px,8vw,96px);text-align:center}
.intro .eyebrow{margin-block-end:28px;display:block}
.intro h2{font-weight:300;font-size:clamp(27px,4.1vw,50px);line-height:1.28;letter-spacing:.005em;color:var(--ink-2);text-wrap:pretty}
.intro .answer{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.5vw,17px);line-height:1.85;color:var(--muted);max-inline-size:64ch;margin:32px auto 0}

/* ---- Word band (decorative) --------------------------------------------*/
.words{border-block:1px solid var(--line);padding:34px 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,5vw,80px);align-items:center}
.words span{font-style:italic;font-size:clamp(22px,3vw,38px);font-weight:300;color:var(--ink-3)}
.words .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);font-size:0}

/* ---- Galleries ---------------------------------------------------------*/
#work .section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px}
#work .eyebrow{display:block;margin-block-end:16px}
/* 5×3 mosaic exactly as designed: 4px gap, aspect 5/3, spans + B&W tiles */
.gallery{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap-mosaic);aspect-ratio:5/3}
.gallery>*{position:relative;margin:0;overflow:hidden}
.gallery picture,.gallery img{position:absolute;inset:0;width:100%;height:100%}
/* slow push-in on hover, matching .frames__grid and .gal-item so the mosaic
   answers the cursor the same way the gallery page does. overflow:hidden on
   .gallery figure keeps the scaled image inside its tile. */
.gallery figure{overflow:hidden}
.gallery img{object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.gallery figure:hover img{transform:scale(1.045)}
.gallery .bw{filter:grayscale(1)}
.gallery .g1{grid-column:1;grid-row:1}
.gallery .g2{grid-column:2;grid-row:1}
.gallery .g3{grid-column:3;grid-row:1}
.gallery .g4{grid-column:4;grid-row:1 / span 2}
.gallery .g5{grid-column:5;grid-row:1}
.gallery .g6{grid-column:1;grid-row:2 / span 2}
.gallery .g7{grid-column:2 / span 2;grid-row:2}
.gallery .g10{grid-column:5;grid-row:2}
.gallery .g11{grid-column:2;grid-row:3}
.gallery .g12{grid-column:3;grid-row:3}
.gallery .g13{grid-column:4;grid-row:3}
.gallery .g14{grid-column:5;grid-row:3}
/* empty slots — same chrome the design shows for unfilled image-slots */
.gallery__ph{display:flex;align-items:center;justify-content:center;background:rgba(127,127,127,.08)}
.gallery__ph::after{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(110,108,102,.45);pointer-events:none}
.gallery__ph span{font-family:var(--sans);font-size:12px;color:#6e6c66;text-align:center;padding:0 14px}

/* ---- Wedding films -----------------------------------------------------
   Shares the cream treatment of .vwords: light band, dark frame. Was
   --olive-panel until the client cut the olive count on the homepage. The
   section is NOT .on-dark, so .eyebrow/.text-link fall back to their
   light-ground colors automatically — but everything INSIDE .film is still
   on a dark ground and stays styled for it. -------------------------- */
.films{background:var(--bg-3)}
.films .wrap{max-inline-size:1180px}
.films__head{text-align:center;margin-block-end:clamp(40px,6vw,66px)}
/* colour is restated because the eyebrow is a <p>, so the `.films__head p`
   rule below outranks the bare `.eyebrow` utility (0,1,1 vs 0,1,0). The old
   `.on-dark .eyebrow` override used to mask this; on a light band it does not. */
.films__head .eyebrow{display:block;letter-spacing:.4em;margin-block-end:22px;color:var(--olive)}
.films__head h2{font-weight:300;font-size:clamp(34px,6vw,72px);line-height:1;color:var(--ink-2);margin-block-end:22px}
.films__head p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.8;color:var(--muted);max-inline-size:52ch;margin-inline:auto}
.film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#14100c;border:1px solid var(--line-2)}
.film__facade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,#3c3d30 0%,#211e18 100%);border:0;cursor:pointer;width:100%}
/* Poster layering is z-index-driven, NOT DOM order: ::before is the first child
   so it would otherwise paint UNDER the absolutely-positioned img. ::after is
   already spoken for by the "Play film" label, hence ::before for the scrim.
   0 = poster, 1 = scrim, 2 = play circle + label. */
.film__facade img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.film__facade:hover img{transform:scale(1.03)}
.film__facade::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,12,.28) 0%,rgba(20,16,12,.06) 42%,rgba(20,16,12,.62) 100%)}
.film__facade::after{content:"Play film";position:absolute;z-index:2;inset-block-end:22px;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2)}
.film__play{position:relative;z-index:2;width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px);border:1px solid rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);transition:background .3s ease}
.film__facade:hover .film__play{background:rgba(255,255,255,.12)}
.film__play::before{content:"";width:0;height:0;border-inline-start:18px solid #fff;border-block:12px solid transparent;margin-inline-start:5px}
/* on the dark frame, so it keeps the on-dark ring even though the band is light */
.film__facade:focus-visible{outline-color:var(--cream)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.films__more{text-align:center;margin-block-start:clamp(30px,4vw,48px)}

/* ---- Top rated marquee -------------------------------------------------*/
.rated{background:var(--bg-2);padding-block:clamp(56px,8vw,96px) clamp(64px,9vw,110px);overflow:hidden}
.rated h2{text-align:center;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:var(--olive);margin-block-end:clamp(38px,5vw,58px)}
.rated__track-mask{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rated__track{display:flex;align-items:center;gap:clamp(56px,7vw,110px);width:max-content;opacity:.55;animation:fmmarquee 70s linear infinite}
.rated__track:hover{animation-play-state:paused}
.rated__track img{height:clamp(28px,3.4vw,46px);width:auto;filter:grayscale(1);opacity:.9}

/* ---- Values ------------------------------------------------------------*/
.values{background:var(--olive-panel);color:var(--cream)}
.values__head{max-inline-size:var(--maxw);margin-inline:auto;text-align:center;margin-block-end:clamp(44px,6vw,72px)}
.values__head .eyebrow{display:block;letter-spacing:.4em;margin-block-end:20px}
.values__head h2{font-weight:400;font-size:clamp(30px,3.6vw,44px);color:#fff}
.values .grid{max-inline-size:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(32px,4vw,56px)}
.values li{list-style:none;border-block-start:1px solid rgba(240,231,216,.25);padding-block-start:26px}
.values .num{font-family:var(--sans);font-size:13px;letter-spacing:.3em;color:var(--cream-3);display:block;margin-block-end:22px}
.values h3{font-weight:400;font-size:clamp(21px,2.2vw,25px);margin-block-end:14px;color:#fff}
.values p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.7;color:var(--cream-2)}

/* ---- About -------------------------------------------------------------*/
.about .grid{max-inline-size:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.about__photo{position:relative;aspect-ratio:4/5;overflow:hidden}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about .eyebrow{display:block;margin-block-end:26px}
.about h2{font-weight:300;font-size:clamp(30px,4.4vw,54px);line-height:1.12;color:var(--ink-2);margin-block-end:28px}
.about p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.85;color:var(--muted);max-inline-size:46ch;margin-block-end:24px}
.btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--olive);padding:16px 34px;color:var(--olive);transition:background .3s ease,color .3s ease}
.btn:hover{background:var(--olive);color:var(--bg)}

/* ---- Testimonials ------------------------------------------------------*/
.words-sec{background:var(--bg-3)}
.words-sec .wrap{max-inline-size:1180px}
.words-sec .section-head{text-align:center}
.words-sec .eyebrow{display:block;margin-block-end:22px}
.words-sec .section-head h2{font-weight:300;font-size:clamp(28px,4.2vw,52px);line-height:1.22;color:var(--ink-2);max-inline-size:20ch;margin-inline:auto}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.tgrid figure{background:var(--bg);padding:clamp(30px,3vw,44px);border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),border-color .45s ease}
.tgrid figure:hover{transform:translateY(-4px);border-color:var(--line-2)}
.tgrid .quote-mark{font-size:60px;line-height:.5;color:var(--gold);display:block}
.tgrid blockquote{font-weight:300;font-size:19px;line-height:1.55;color:var(--ink-3);margin:18px 0 26px}
.tgrid figcaption{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.tgrid cite{font-style:normal}

/* ---- Video testimonials ------------------------------------------------
   Three 9:16 cards. Same click-to-play facade contract as .film (a
   <button data-embed> that main.js swaps for the iframe) — the only
   difference is the frame ratio and the smaller play circle. Cards ship in
   the .vcard--ph placeholder state until real Shorts IDs and posters land;
   see the recipe comment in index.html for the swap.

   Shares --bg-3 with .words-sec deliberately: written + video testimonials
   read as ONE chapter, and the step down to the FAQ's --bg closes it. The
   page already carries three olive panels (films, values, footer) — a fourth
   was too much, so here the dark video frames on cream do the contrast work.
   NOTE: the frames stay dark, so anything inside them (play circle,
   placeholder chrome, focus ring) is still styled for a dark ground. ---- */
.vwords{background:var(--bg-3)}
.vwords .wrap{max-inline-size:1180px}
.vwords__head{text-align:center;margin-block-end:clamp(40px,6vw,66px)}
.vwords__head .eyebrow{display:block;letter-spacing:.4em;margin-block-end:22px;color:var(--olive)}  /* see .films__head .eyebrow */
.vwords__head h2{font-weight:300;font-size:clamp(30px,4.6vw,56px);line-height:1.1;color:var(--ink-2);margin-block-end:22px}
.vwords__head p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.8;color:var(--muted);max-inline-size:52ch;margin-inline:auto}

/* Carousel. The track is a native scroll-snap strip — it swipes on touch and
   scrolls with the trackpad WITHOUT JavaScript; the arrows are a pure
   enhancement, hidden until `.js` proves scripting is alive (see the head
   script in each page). Never make the arrows the only way to reach a card. */
.vcarousel{position:relative;max-inline-size:940px;margin-inline:auto}
.vgrid{
  --vgap:clamp(20px,2.6vw,40px);
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--vgap)*2)/3);   /* 3 cards in view */
  gap:var(--vgap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* the scrollbar would sit under the captions and fight the type */
  scrollbar-width:none;-ms-overflow-style:none;
}
.vgrid::-webkit-scrollbar{display:none}
.vgrid:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
.vcard{margin:0;scroll-snap-align:start}

/* Arrows: a centred row by default, flanking the track only when there is
   genuinely room outside it (track 940 + 2x58 needs ~1100px of viewport). */
.vnav-row{display:none;justify-content:center;gap:16px;margin-block-start:clamp(28px,3vw,40px)}
.js .vnav-row{display:flex}
.vnav{
  inline-size:46px;block-size:46px;border:1px solid var(--line-2);border-radius:50%;
  background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .3s ease,background .3s ease,opacity .3s ease;
}
.vnav:hover:not(:disabled){border-color:var(--olive);background:rgba(101,104,83,.07)}
.vnav:disabled{opacity:.28;cursor:default}
.vnav span{inline-size:9px;block-size:9px;border-block-start:1px solid var(--olive);border-inline-end:1px solid var(--olive)}
.vnav[data-dir="-1"] span{transform:rotate(-135deg);margin-inline-start:4px}
.vnav[data-dir="1"] span{transform:rotate(45deg);margin-inline-end:4px}
@media (min-width:1100px){
  .vnav-row{margin-block-start:0}
  .js .vnav{position:absolute;inset-block-start:calc(50% - 23px)}
  .vnav[data-dir="-1"]{inset-inline-start:-58px}
  .vnav[data-dir="1"]{inset-inline-end:-58px}
}
.vcard__frame{position:relative;aspect-ratio:9/16;overflow:hidden;background:#14100c;
  border:1px solid var(--line-2)}
.vcard__facade{position:absolute;inset:0;width:100%;display:flex;align-items:center;justify-content:center;
  border:0;padding:0;cursor:pointer;background:radial-gradient(120% 120% at 50% 38%,#3c3d30 0%,#1b1813 100%)}
.vcard__facade img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.vcard__facade:hover img{transform:scale(1.04)}
/* scrim sits above the poster, below the play circle */
.vcard__facade::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,12,.34) 0%,rgba(20,16,12,.06) 42%,rgba(20,16,12,.66) 100%)}
.vcard__play{position:relative;z-index:2;width:clamp(52px,4.8vw,66px);height:clamp(52px,4.8vw,66px);
  border:1px solid rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);transition:background .3s ease,transform .3s ease}
.vcard__facade:hover .vcard__play{background:rgba(255,255,255,.14);transform:scale(1.06)}
.vcard__play::before{content:"";width:0;height:0;border-inline-start:13px solid #fff;border-block:9px solid transparent;margin-inline-start:4px}
/* the button sits on the dark frame, so it keeps the on-dark focus ring even
   though the section around it is now light */
.vcard__facade:focus-visible{outline-color:var(--cream)}
.vcard__frame iframe{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0}

.vcard figcaption{text-align:center;padding-block-start:clamp(18px,2vw,26px)}
.vcard blockquote{font-weight:300;font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:var(--ink-3);margin-block-end:16px}
.vcard cite{display:block;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive)}
.vcard cite::before{content:"";display:block;inline-size:26px;block-size:1px;background:var(--gold);margin:0 auto 14px}
.vcard__meta{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);opacity:.7;margin-block-start:9px}

/* Placeholder state — mirrors .gallery__ph. Chrome stays light-on-dark
   because it lives INSIDE the frame, which is dark regardless. */
.vcard--ph .vcard__frame{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 38%,#3c3d30 0%,#1b1813 100%)}
.vcard--ph .vcard__frame::after{content:"";position:absolute;inset:10px;
  border:1.5px dashed rgba(240,233,220,.32);pointer-events:none}
.vcard--ph .vcard__play{opacity:.42}
.vcard--ph .vcard__ph-label{position:absolute;inset-block-end:22px;font-family:var(--sans);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2);opacity:.7}
.vcard--ph figcaption{opacity:.42}

/* ---- FAQ ---------------------------------------------------------------*/
.faq .wrap{max-inline-size:920px}
.faq .section-head{text-align:center;margin-block-end:clamp(40px,6vw,64px)}
.faq .eyebrow{display:block;margin-block-end:22px}
.faq .section-head h2{font-weight:300;font-size:clamp(30px,4.6vw,56px);line-height:1.1;color:var(--ink-2)}
.faq-list{border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:20px;cursor:pointer;list-style:none;
  padding:clamp(22px,2.6vw,30px) 0;font-size:clamp(19px,2.1vw,24px);font-weight:400;
  line-height:1.4;color:var(--ink-2);transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--olive)}
.faq summary:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
/* plus → minus indicator, drawn in CSS so it inherits the palette */
.faq summary::after{
  content:"";flex:0 0 auto;position:relative;inline-size:13px;block-size:13px;
  margin-block-start:.45em;margin-inline-start:auto;
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat;
}
/* vertical stroke of the "+" — collapses to a "−" when open */
.faq summary::after{
  background-image:
    linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:center,center;
  background-size:100% 1px,1px 100%;
  transition:background-size .35s cubic-bezier(.22,.61,.36,1);
}
.faq details[open] summary::after{background-size:100% 1px,1px 0}
.faq details[open] summary{color:var(--olive)}
/* Closed content stays hidden. Matches UA behavior in modern browsers and
   repairs engines that don't apply it (keeps the answer text in the DOM). */
.faq details:not([open])>p{display:none}
.faq details p{
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.85;color:var(--muted);
  max-inline-size:64ch;padding-block-end:clamp(24px,3vw,32px);padding-inline-end:34px;
  animation:fmfaq .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fmfaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- Contact -----------------------------------------------------------*/
.contact .grid{max-inline-size:1180px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,110px)}
.contact .eyebrow{display:block;margin-block-end:26px}
.contact h2{font-weight:300;font-size:clamp(32px,4.6vw,58px);line-height:1.08;color:var(--ink-2);margin-block-end:30px}
.contact__lead{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.85;color:var(--muted);max-inline-size:42ch;margin-block-end:44px}
.contact__meta{display:flex;flex-direction:column;gap:22px}
.contact__meta .label{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--olive);margin-block-end:7px}
.contact__meta .based{font-size:22px;color:var(--ink-2)}
.contact__social{display:flex;gap:26px;margin-block-start:6px;flex-wrap:wrap}
.contact__social a{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-block-end:1px solid var(--gold-2);padding-block-end:5px}

.form{display:flex;flex-direction:column;gap:26px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.field input,.field textarea{background:transparent;border:0;border-block-end:1px solid var(--line-2);padding:10px 0;font-family:var(--sans);font-size:15px;color:var(--ink);outline-offset:4px;resize:none}
/* Focus: no outline box — the underline itself becomes the indicator.
   Text fields match :focus-visible even on mouse click (they take keyboard
   input), so a boxy ring fires on every click. box-shadow doubles the rule
   instead of border-width, so nothing shifts. Olive on cream = 5.19:1,
   well past the 3:1 non-text contrast floor for focus indicators. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{
  outline:none;
  border-block-end-color:var(--olive);
  box-shadow:0 1px 0 0 var(--olive);
  background-color:rgba(101,104,83,.05);
}
.field .error{font-family:var(--sans);font-size:12px;color:#8a2b1f;min-height:0}
.field.invalid input,.field.invalid textarea{border-color:#8a2b1f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__submit{align-self:flex-start;margin-block-start:12px;background:var(--olive);color:var(--bg);border:0;font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:18px 44px;cursor:pointer;transition:background .3s ease}
.form__submit:hover{background:var(--olive-d)}
.form__status{font-family:var(--sans);font-size:14px;color:var(--olive);min-height:1.2em}

/* ---- Gallery (portfolio grid, filters, lightbox) -----------------------
   Uniform 1:1 crops for a catalogue feel (not masonry). Filtering and the
   lightbox are progressive: with JS off, every figure stays visible and each
   thumbnail is a plain link to the full-size image. -------------------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-block-end:clamp(36px,5vw,56px)}
.gal-filters .btn{padding:12px 26px;font-size:11px;cursor:pointer;background:none}
.gal-filters .btn[aria-pressed="true"]{background:var(--olive);color:var(--bg)}

.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-mosaic);
  list-style:none;margin:0;padding:0}
.gal-grid li{margin:0}
.gal-item{display:block;position:relative;overflow:hidden;aspect-ratio:1/1;
  background:var(--line);width:100%}
.gal-item img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
/* subtle premium hover: slow zoom + a soft olive veil, nothing gimmicky */
.gal-item::after{content:"";position:absolute;inset:0;background:var(--olive-panel);
  opacity:0;transition:opacity .45s ease;pointer-events:none}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.05)}
.gal-item:hover::after,.gal-item:focus-visible::after{opacity:.16}
.gal-item:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.gal-more{text-align:center;margin-block-start:clamp(36px,5vw,56px)}
.gal-more .btn{cursor:pointer;background:none}
.gal-more [hidden]{display:none}
/* Pre-paint hiding of the overflow batch. Scoped to .js so that with
   JavaScript disabled every photograph stays visible (the thumbnails are
   plain links to the full-size files). JS strips data-beyond on init and
   owns visibility from then on. */
.js .gal-grid li[data-beyond]{display:none}
.gal-empty{text-align:center;font-family:var(--sans);font-weight:300;color:var(--muted);
  padding-block:48px}

/* Lightbox — dialog element; closed state handled by [hidden] */
.lightbox{position:fixed;inset:0;z-index:120;border:0;padding:0;max-width:100%;max-height:100%;
  width:100%;height:100%;background:rgba(20,16,12,.94);display:flex;align-items:center;
  justify-content:center}
.lightbox[hidden]{display:none}
.lightbox::backdrop{background:rgba(20,16,12,.94)}
.lightbox__fig{margin:0;max-width:min(92vw,1200px);max-height:86vh;display:flex;
  flex-direction:column;align-items:center;gap:16px}
.lightbox__fig img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.lightbox__cap{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--cream-2);
  text-align:center;max-width:60ch}
.lightbox__btn{position:absolute;background:none;border:1px solid rgba(240,233,220,.5);
  color:var(--cream);width:52px;height:52px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:22px;line-height:1;transition:background .3s ease,border-color .3s ease}
.lightbox__btn:hover{background:rgba(240,233,220,.14);border-color:var(--cream)}
.lightbox__btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.lightbox__close{inset-block-start:22px;inset-inline-end:22px}
.lightbox__prev{inset-inline-start:clamp(10px,3vw,34px);inset-block-start:50%;transform:translateY(-50%)}
.lightbox__next{inset-inline-end:clamp(10px,3vw,34px);inset-block-start:50%;transform:translateY(-50%)}
.lightbox__count{position:absolute;inset-block-end:22px;inset-inline:0;text-align:center;
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--cream-2)}

@media (max-width:900px){ .gal-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .gal-grid{grid-template-columns:1fr}
  .gal-filters .btn{padding:10px 18px}
  .lightbox__btn{width:44px;height:44px}
}

/* ---- Shared component breakpoints -------------------------------------
   POSITION IS LOAD-BEARING: these must sit BEFORE the page-specific
   sections below, because those sections re-override the same selectors at
   the same specificity (e.g. `.values .grid--3` vs `.values .grid`).
   Moving this block to the end silently breaks the About page grid —
   caught by the STEP 4 computed-style diff at 900px. ----------------- */
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(3,1fr);grid-template-rows:none;aspect-ratio:auto}
  .gallery>*{grid-column:auto!important;grid-row:auto!important;aspect-ratio:1/1}
  .films__head p{max-inline-size:none}
  .values .grid{grid-template-columns:1fr 1fr}
  .about .grid{grid-template-columns:1fr}
  .about__photo{aspect-ratio:16/11}
  .tgrid{grid-template-columns:1fr}
  .vwords__head p{max-inline-size:none}
  .vgrid{grid-auto-columns:calc((100% - var(--vgap))/2)}   /* 2 cards in view */
  .contact .grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .values .grid{grid-template-columns:1fr}
  /* one 9:16 card at full width would be ~890px tall — show one plus a sliver
     of the next, which also signals "this scrolls" without any arrow */
  .vgrid{grid-auto-columns:82%}
  .form .row{grid-template-columns:1fr}
}


/* ---- About page --------------------------------------------------------*/
/* Breadcrumb — visible counterpart to the BreadcrumbList JSON-LD */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--olive);margin-block-end:30px}
.crumbs li+li::before{content:"/";margin-inline-end:10px;color:var(--gold-2)}
.crumbs a{border-block-end:1px solid transparent;transition:border-color .3s ease}
.crumbs a:hover{border-block-end-color:var(--gold-2)}
.crumbs [aria-current="page"]{color:var(--muted)}

.values .grid--3{grid-template-columns:repeat(3,1fr)}

/* Frames strip */
.frames__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1vw,16px)}
.frames__grid figure{margin:0}
.frames__grid picture{display:block;position:relative;overflow:hidden;aspect-ratio:1/1}
.frames__grid img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.frames__grid figure:hover img{transform:scale(1.04)}
.frames__grid figcaption{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--olive);margin-block-start:14px}

/* Contact page additions */
.contact__meta h3{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.28em;
  text-transform:uppercase;color:var(--olive);margin-block-end:8px}
.contact__meta p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.8;
  color:var(--muted);margin-block-end:6px}
.contact__social{list-style:none}
/* selects match the underlined input treatment */
.field select{background:transparent;border:0;border-block-end:1px solid var(--line-2);
  padding:10px 26px 10px 0;font-family:var(--sans);font-size:15px;color:var(--ink);
  outline-offset:4px;border-radius:0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--olive) 50%),
                   linear-gradient(135deg,var(--olive) 50%,transparent 50%);
  background-position:calc(100% - 11px) 19px,calc(100% - 6px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field .opt{text-transform:none;letter-spacing:.04em;opacity:.7}
.form__note{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--muted);margin-block-start:-10px}

/* ---- Blog index --------------------------------------------------------*/
/* Pages without a hero need the header opaque from the first pixel — the
   default header is white-on-dark and relies on a dark hero behind it. */

/* Masthead replaces the hero: clears the fixed header, sets the page tone */

/* Post cards — same boxed treatment as the testimonial grid */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.posts article{background:var(--bg);border:1px solid var(--line);
  padding:clamp(28px,2.6vw,40px);display:flex;flex-direction:column}
.posts .meta{font-family:var(--sans);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--olive);margin-block-end:18px}
.posts h2{font-weight:400;font-size:clamp(21px,1.7vw,25px);line-height:1.28;
  color:var(--ink-2);margin-block-end:14px;text-wrap:pretty}
.posts h2 a{display:inline-block}
.posts h2 a:hover{color:var(--olive)}
.posts p{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.75;
  color:var(--muted);margin-block-end:24px}
.posts .more{margin-block-start:auto;font-family:var(--sans);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  border-block-end:1px solid var(--gold-2);padding-block-end:5px;align-self:flex-start}
.posts .more:hover{color:var(--olive)}

/* Closing CTA band */
.cta-band{background:var(--olive-panel);color:var(--cream);text-align:center;
  padding:clamp(64px,9vw,120px) var(--pad-x)}
.cta-band h2{font-weight:300;font-size:clamp(28px,4.2vw,52px);line-height:1.18;
  color:#fff;margin-block-end:16px;text-wrap:balance}
.cta-band p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.8;
  color:var(--cream-2);max-inline-size:52ch;margin:0 auto clamp(30px,4vw,44px)}
.cta-band .btn{border-color:var(--cream);color:var(--cream)}
.cta-band .btn:hover{background:var(--cream);color:var(--olive-panel)}

@media (max-width:900px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .posts{grid-template-columns:1fr} }

/* ---- Article (single blog post) ----------------------------------------*/

.article{max-inline-size:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  padding-block-end:clamp(64px,9vw,110px)}
.article p,.article li{font-family:var(--sans);font-weight:300;font-size:16.5px;
  line-height:1.85;color:var(--muted)}
.article p{margin-block-end:26px}
.article .standfirst{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,23px);
  line-height:1.6;color:var(--ink-3);margin-block-end:34px}
.article h2{font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.22;color:var(--ink-2);
  margin-block:clamp(44px,5vw,64px) 18px;text-wrap:pretty}
.article h3{font-weight:400;font-size:clamp(20px,2.2vw,24px);color:var(--ink-2);
  margin-block:34px 12px}
.article ul{margin:0 0 26px;padding-inline-start:0;list-style:none}
.article ul li{position:relative;padding-inline-start:24px;margin-block-end:12px}
.article ul li::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--gold)}
.article ul li strong{font-weight:500;color:var(--ink-3)}
.article a:not(.btn){color:var(--olive);border-block-end:1px solid var(--gold-2)}
.article a:not(.btn):hover{border-block-end-color:var(--olive)}
.article figure{margin-block:clamp(36px,4vw,52px)}
.article figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.article figcaption{font-family:var(--sans);font-size:12.5px;color:var(--muted);
  margin-block-start:12px;padding-block-start:10px;border-block-start:1px solid var(--line)}
/* chips, not bullets — must beat `.article ul li` above */
.article ul.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 26px}
.article ul.tags li{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;
  color:var(--olive);border:1px solid var(--line);padding:7px 13px;
  margin-block-end:0;padding-inline-start:13px;position:static}
.article ul.tags li::before{content:none}
.article-foot{border-block-start:1px solid var(--line);margin-block-start:clamp(48px,6vw,72px);
  padding-block-start:clamp(28px,3vw,40px);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;align-items:center}

/* Where to find us */
.base__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,72px)}
.base h3{font-weight:400;font-size:24px;color:var(--ink-2);margin-block-end:16px}
.base p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.8;
  color:var(--muted);margin-block-end:12px}
.base__addr{max-inline-size:32ch}
.base__areas{list-style:none;display:flex;flex-direction:column;gap:10px;
  font-family:var(--sans);font-weight:300;font-size:15px}
.base__areas a{border-block-end:1px solid transparent;transition:border-color .3s ease}
.base__areas a:hover{border-block-end-color:var(--gold-2)}

@media (max-width:900px){
  .values .grid--3{grid-template-columns:1fr}
  .frames__grid{grid-template-columns:repeat(2,1fr)}
  .base__grid{grid-template-columns:1fr}
}

/* --- author box ------------------------------------------------------------
   Sits under the article on single posts, above the CTA band. Renders only when
   the author has filled in Biographical Info (see single.php), so the rule set
   never has to style an empty frame. */
.author-box{max-inline-size:var(--maxw);margin:clamp(46px,6vw,76px) auto 0;
  padding-inline:var(--pad-x);padding-block-start:clamp(28px,4vw,40px);
  border-block-start:1px solid var(--line);
  display:flex;gap:clamp(20px,3vw,32px);align-items:flex-start}
.author-box__avatar{flex:0 0 auto;inline-size:76px;block-size:76px;
  border-radius:50%;object-fit:cover}
.author-box__body{min-inline-size:0}
.author-box .eyebrow{display:block;margin-block-end:12px}
.author-box__name{font-weight:400;font-size:clamp(21px,2.2vw,26px);
  color:var(--ink-2);margin:0 0 6px}
.author-box__role{font-family:var(--sans);font-weight:400;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.author-box__bio{font-family:var(--sans);font-weight:300;font-size:15.5px;
  line-height:1.85;color:var(--ink-3);margin:0}

@media (max-width:600px){
  .author-box{flex-direction:column;gap:18px}
}
/* ==========================================================================
   Fog Media — utility layer + preference overrides
   Small single-purpose helpers, then the user-preference overrides.
   
   ORDER MATTERS: this file is concatenated LAST into main.css so that the
   prefers-reduced-motion block below can defeat the animations declared in
   layout.css and components.css. Do not move it earlier.
   ========================================================================== */

/* ---- Shared type helpers -----------------------------------------------*/
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--olive)}
.on-dark .eyebrow{color:var(--cream-3)}
.wrap{max-inline-size:var(--maxw);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Spacing helpers ---------------------------------------------------*/
.section--flush{padding-block-start:0}

/* ---- User preference overrides (MUST REMAIN LAST) ----------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* animation-DELAY matters as much as duration here: the .stagger reveals
     schedule up to 420ms of waiting, and zeroing only the duration would still
     leave content invisible for that whole time. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero__media img{animation:none;transform:none}
  .hero__grain{animation:none}
  .rated__track{animation:none;justify-content:center;flex-wrap:wrap}
  .js [data-reveal]{opacity:1}
  .js [data-reveal].stagger > *{opacity:1}   /* children own the fade when staggered */
  .gallery figure:hover img,.tgrid figure:hover{transform:none}
  .mobile-menu,.mobile-menu a{animation:none}
}