/* ==========================================================================
   Ninety Six Photography — Core Stylesheet
   Palette : ink / taupe / cream  ·  Type : Cormorant Garamond + Montserrat
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* colour */
  --ink:#000000;
  --ink-soft:#111111;
  --body:#444444;
  --muted:#665e57;           /* 6.0:1 on paper, 4.6:1 on cream */
  /* Two accent weights. --accent carries TEXT and button fills and is dark
     enough to clear 4.5:1 on every ground it lands on. --accent-soft is the
     original taupe, kept for decoration only (rules, dots, tints) where
     contrast rules do not apply, so the palette still reads as warm taupe. */
  --accent:#74563b;          /* 6.3:1 paper · 4.9:1 cream · 6.7:1 under white */
  --accent-soft:#a48d78;     /* decorative only — never text */
  --gold:#c9a24a;            /* decorative gold — marquee sparkle */
  --accent-dk:#5c4430;
  --sand:#cbb9a4;            /* mid beige */
  --star:#b8770f;            /* review gold — 3.5:1 on --paper, the only ground it sits on */
  --cream:#e6dac8;           /* section wash */
  --blush:#e9e0e0;           /* soft rose grey */
  --paper:#faf8f5;           /* off-white page ground */
  --white:#ffffff;
  --line:rgba(0,0,0,.12);
  --line-lt:rgba(255,255,255,.22);

  /* type */
  --display:"Cormorant Garamond",Georgia,serif;
  --number:var(--sans);
  --serif:"Libre Baskerville",Georgia,serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* metrics */
  --shell:1280px;
  --gut:clamp(20px,5vw,72px);
  --nav-h:96px;
  --nav-h-sm:76px;
  --mbar-h:56px;           /* phone bottom action bar */

  /* corner radius — every photograph on the site is framed from these three
     steps, so the whole library can be re-cornered from one place. */
  --r-img:14px;              /* standard photo frame */
  --r-img-sm:12px;           /* small tiles — coverflow, other-services */
  --r-img-lg:20px;           /* feature art — offer poster */

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16px;font-weight:300;line-height:1.85;
  letter-spacing:.012em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{max-width:100%;display:block}
/* width/height attrs are presentational hints that set a px height and defeat
   aspect-ratio; auto lets the aspect-ratio rules below take over. Elements that
   need a real height (hero, film, brand, footer logo) set it explicitly in CSS. */
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:var(--r-img)}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:#fff}

/* ---------- 3. Typography ------------------------------------------------ */
.display{
  font-family:var(--display);font-weight:300;color:var(--ink);
  line-height:1.06;letter-spacing:.005em;
}
.d-xl{font-size:clamp(2.6rem,7vw,6rem)}
.d-lg{font-size:clamp(2.2rem,5.2vw,4.4rem)}
.d-md{font-size:clamp(1.9rem,3.6vw,3.1rem)}
.d-sm{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.display em{font-style:italic;color:var(--accent)}
.display .thin{font-weight:200}
.brand-lockup{display:block;max-width:700px;margin:0;color:var(--ink)}
.brand-name{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.25rem,3.7vw,4.4rem);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1;
}
.brand-name span{font-family:var(--display);font-weight:500}
.brand-rule{display:block;width:clamp(52px,7vw,90px);height:2px;margin:16px 0 15px;background:var(--accent)}
.brand-slogan{
  display:block;
  font-family:var(--sans);
  font-size:clamp(.82rem,1.25vw,1.1rem);
  font-weight:500;
  letter-spacing:.13em;
  line-height:1.5;
  text-transform:uppercase;
  color:var(--muted);
}
.brand-slogan em{
  color:var(--accent-dk);
  font-family:var(--display);
  font-size:1.28em;
  font-style:italic;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:none;
}
.up{
  font-family:var(--sans);font-size:clamp(.68rem,.8vw,.78rem);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;line-height:1.7;color:var(--accent);
}
.up-ink{color:var(--ink)}
.up-lt{color:rgba(255,255,255,.94);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.lede{font-size:clamp(1rem,1.2vw,1.12rem);line-height:2;max-width:62ch}
/* .lede is capped at 62ch, so centring the text without centring the box
   would leave it hanging off the left edge of a centred section */
.lede.center{margin-inline:auto}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.85;color:var(--ink-soft)}
.rule{width:64px;height:1px;background:var(--accent-soft);opacity:.9}
/* Readable by screen readers and search engines, invisible on screen. Used for
   the hero h1, which has no visible counterpart. Not display:none — that would
   hide it from assistive tech too. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.rule.center{margin-inline:auto}
.mt-s{margin-top:10px}.mt-m{margin-top:28px}.mt-l{margin-top:42px}

/* ---------- 4. Layout ---------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell-wide{max-width:1600px}
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-tight{padding-block:clamp(52px,7vw,92px)}
.sec-cream{background:var(--cream)}
.sec-blush{background:var(--blush)}
.sec-white{background:var(--white)}
.sec-ink{background:var(--ink);color:rgba(255,255,255,.7)}
.sec-ink .display,.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .lede{color:rgba(255,255,255,.84)}
.sec-ink .up{color:var(--accent-soft)}
.center{text-align:center}
.head{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.head.center{align-items:center;text-align:center}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 34px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  overflow:hidden;transition:color .45s var(--ease),border-color .45s var(--ease);
  border-radius:var(--r-img);z-index:1
}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:1;
}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#fff;border-color:var(--accent)}
.btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn-accent{--bg:var(--accent);--fg:#fff;--bd:var(--accent)}
.btn-accent::after{background:var(--ink)}
.btn-sm{padding:12px 26px;font-size:.68rem}

.link-u{
  display:inline-flex;align-items:center;gap:10px;padding-bottom:5px;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line);transition:.4s var(--ease);
}
.link-u svg{transition:transform .4s var(--ease)}
.link-u:hover{color:var(--accent);border-color:var(--accent)}
.link-u:hover svg{transform:translateX(6px)}
.sec-ink .link-u{color:#fff;border-color:var(--line-lt)}

/* ---------- 6. Preloader ------------------------------------------------- */
#loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--paper);transition:opacity .7s var(--ease),visibility .7s;
}
#loader.gone{opacity:0;visibility:hidden}
#loader .lg{width:min(220px,58vw);opacity:0;animation:lgin 1.4s var(--ease) forwards}
#loader .bar{margin-top:26px;width:132px;height:1px;background:var(--line);overflow:hidden}
#loader .bar i{display:block;height:100%;width:100%;background:var(--accent);transform:translateX(-100%);animation:barx 1.5s var(--ease) infinite}
@keyframes lgin{to{opacity:1}}
@keyframes barx{to{transform:translateX(100%)}}

/* ---------- 7. Header ---------------------------------------------------- */
.hdr{
  position:fixed;top:0;left:0;width:100%;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),height .5s var(--ease),box-shadow .5s var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.34) 55%,transparent);
  opacity:1;transition:opacity .5s var(--ease);pointer-events:none;
}
/* Three columns rather than flex space-between, so the logo sits at the true
   centre of the header no matter how wide the two link groups are. */
.hdr-in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,2.5vw,40px);width:100%;position:relative;z-index:2;
}
.nav-l{grid-column:1;justify-self:start}
.brand{grid-column:2;justify-self:center;display:block}
.hdr-r{grid-column:3;justify-self:end;display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.brand img{height:42px;width:auto;transition:height .5s var(--ease)}
.brand .l-dk{display:none}

.nav{display:flex;align-items:center;gap:clamp(16px,1.9vw,32px)}
/* `>` keeps these off the dropdown's own links, which sit on a light panel */
.nav > a,.nav .sub-t{
  position:relative;font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;padding:6px 0;transition:color .35s;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.35);
}
.nav > a::after,.nav .sub-t::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav > a:hover::after,.nav > a.on::after,
.nav .sub-t:hover::after,.nav .sub-t.on::after,
.has-sub:hover .sub-t::after{transform:scaleX(1);transform-origin:left}
.nav > a.on{color:#fff}

/* ---- dropdown ---- */
.has-sub{position:relative;display:flex;align-items:center}
.sub-t{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font-family:var(--sans)}
.sub-t .chev{transition:transform .35s var(--ease)}
.has-sub:hover .sub-t .chev,.has-sub.open .sub-t .chev{transform:rotate(180deg)}
/* .sub is a transparent hover-bridge; .sub-in is the visible panel. Without the
   bridge the pointer crosses a dead gap and the menu closes on its way down. */
.sub{
  position:absolute;top:100%;left:50%;min-width:262px;padding-top:16px;z-index:5;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.has-sub:hover .sub,.has-sub.open .sub,.has-sub:focus-within .sub{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.sub-in{
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.13);padding:14px 0;
  /* one column of six service pages — short enough not to need splitting */
  display:grid;grid-template-columns:minmax(0,1fr);
}
.sub-h{
  margin:0 0 2px;padding:0 22px;font-family:var(--sans);
  font-size:.58rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.sub-in a{
  display:block;padding:10px 22px;font-size:.72rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.sub-in a:hover,.sub-in a:focus-visible{background:var(--cream);color:var(--accent)}

.hdr.solid,.hdr.always-solid{
  background:rgba(250,248,245,.96);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);
}
.hdr.solid{height:var(--nav-h-sm)}
.hdr.solid::before,.hdr.always-solid::before{opacity:0}
.hdr.solid .brand img{height:34px}
.hdr.solid .brand .l-lt,.hdr.always-solid .brand .l-lt{display:none}
.hdr.solid .brand .l-dk,.hdr.always-solid .brand .l-dk{display:block}
.hdr.solid .nav > a,.hdr.always-solid .nav > a,
.hdr.solid .nav .sub-t,.hdr.always-solid .nav .sub-t{color:var(--ink);text-shadow:none}
.hdr.solid .nav > a:hover,.hdr.always-solid .nav > a:hover,
.hdr.solid .nav .sub-t:hover,.hdr.always-solid .nav .sub-t:hover{color:var(--accent-dk)}
.hdr.solid .nav > a.on,.hdr.always-solid .nav > a.on,
.hdr.solid .nav .sub-t.on,.hdr.always-solid .nav .sub-t.on{color:var(--accent-dk)}
.hdr.solid .burger i,.hdr.always-solid .burger i{background:var(--ink)}

.burger{display:none;width:30px;height:20px;position:relative;flex:0 0 auto;z-index:2}
.burger i{position:absolute;left:0;width:100%;height:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5);transition:.4s var(--ease)}
.hdr.solid .burger i,.hdr.always-solid .burger i{box-shadow:none}
.burger i:nth-child(1){top:2px}
.burger i:nth-child(2){top:9px;width:70%}
.burger i:nth-child(3){top:16px}
.burger.x i{background:#fff !important}
.burger.x i:nth-child(1){top:9px;transform:rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){top:9px;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:890;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  /* `safe` keeps the first link reachable once the list is taller than the
     phone: plain `center` would push the overflow off the top with no way to
     scroll back up. Browsers without `safe` keep the plain center above. */
  justify-content:safe center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--nav-h) var(--gut) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{
  font-family:var(--display);font-size:clamp(1.8rem,7vw,2.8rem);font-weight:300;color:#fff;
  padding-block:8px;opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.drawer.open a{opacity:1;transform:none}
.drawer a:hover{color:var(--accent)}
.drawer-sub{display:flex;flex-direction:column;padding-left:18px;border-left:1px solid var(--line-lt);margin:2px 0 6px}
.drawer-sub a{font-family:var(--sans);font-size:.86rem;font-weight:300;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.72);padding-block:7px}
.drawer-sub a:hover{color:var(--accent-soft)}
.drawer .meta{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-lt);color:rgba(255,255,255,.82);font-size:.82rem;letter-spacing:.08em}
.drawer .meta a{font-family:var(--sans);font-size:.9rem;letter-spacing:.06em;display:inline;opacity:1;transform:none;color:#fff;padding:0}
.drawer .socials{margin-top:16px}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero-track{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.09);transition:transform 8s linear}
.slide.on img{transform:scale(1)}
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.78) 100%),
    radial-gradient(120% 70% at 20% 100%,rgba(0,0,0,.42),transparent 60%);
}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-bottom:clamp(28px,4vw,52px)}
/* The overlay copy was removed — the hero photographs carry their own titles.
   The slider controls are the only child left, so end-align them instead of
   space-between, which would otherwise push them to the left edge. */
.hero-foot .row{display:flex;align-items:flex-end;justify-content:flex-end;gap:28px;flex-wrap:wrap}
.hero-ui{display:flex;align-items:center;gap:22px}
.dots{display:flex;gap:9px}
.dots button{width:26px;height:2px;background:rgba(255,255,255,.35);transition:background .4s}
.dots button.on{background:var(--accent-soft)}
.hero-arrows{display:flex;gap:8px}
.hero-arrows button{
  width:44px;height:44px;border:1px solid rgba(255,255,255,.35);color:#fff;
  display:grid;place-items:center;transition:.4s var(--ease);
}
.hero-arrows button:hover{background:#fff;color:var(--ink);border-color:#fff}
.scroll-cue{
  position:absolute;left:50%;bottom:clamp(28px,4vw,52px);transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.92);
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* page hero (inner pages) */
.phero{
  position:relative;background:var(--cream);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(52px,8vw,104px));
  padding-bottom:clamp(40px,6vw,76px);
}
.phero .shell{max-width:880px;text-align:center}
.phero .rule,.phero .lede{margin-inline:auto}
.phero .crumb{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.phero .crumb a:hover{color:var(--accent)}

/* ---------- 9. Marquee --------------------------------------------------- */
.marq{overflow:hidden;border-block:1px solid var(--line);background:var(--paper);padding-block:20px}
.marq-in{display:flex;width:max-content;animation:marq 36s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq span{
  display:inline-flex;align-items:center;gap:26px;padding-inline:26px;
  font-family:var(--display);font-size:clamp(1rem,1.6vw,1.35rem);font-weight:300;
  color:var(--ink);white-space:nowrap;
}
/* Gold sparkle separator, drawn with clip-path rather than an SVG data: URI —
   CSS background images are governed by img-src, and our CSP is img-src 'self'
   with no data:, so a data URI would be silently blocked. The gradient gives it
   a metallic edge instead of reading as a flat yellow blob. */
.marq span::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  background:linear-gradient(150deg,#e6cd8c,var(--gold) 52%,#a07c31);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 10. Split blocks --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,3vw,52px);align-items:center}
.split.top{align-items:start}
.split-media{position:relative}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-img)}
/* Kept deliberately small: it sits over the photograph, so every extra pixel of
   padding hides more of the picture. Tighter tracking on the label buys width
   back without shrinking the type, which has to stay readable. */
.split-media .badge{
  position:absolute;right:-16px;bottom:-16px;background:var(--paper);
  padding:11px 15px;border:1px solid var(--line);text-align:center;
}
.split-media .badge b{display:block;font-family:var(--number);font-size:1.5rem;color:var(--ink);line-height:1;font-weight:400}
/* em-based so the "+" always scales with the number beside it */
.split-media .badge b span{font-size:.62em}
.split-media .badge small{font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stack-2{position:relative;padding-bottom:15%;padding-right:13%}
.stack-2 .a{width:80%}
.stack-2 .b{position:absolute;right:0;bottom:0;width:52%;border:8px solid var(--paper);
  /* the paper border is part of the frame, so round the outer edge a touch
     wider than the picture inside it */
  border-radius:calc(var(--r-img) + 8px)}
.sec-cream .stack-2 .b{border-color:var(--cream)}

/* ---------- 11. Gallery grids -------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,16px)}
.gal-3{grid-template-columns:repeat(3,1fr)}
.gcell{position:relative;overflow:hidden;background:var(--blush);cursor:zoom-in;display:block;border-radius:var(--r-img)}
.gcell img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.gcell.wide{grid-column:span 2}
.gcell.wide img{aspect-ratio:8/5}
.gcell.tall img{aspect-ratio:3/4.6}
.gcell::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.28);opacity:0;transition:opacity .5s var(--ease)}
.gcell:hover img{transform:scale(1.06)}
.gcell:hover::after{opacity:1}
.gcell .plus{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:46px;height:46px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:grid;place-items:center;color:#fff;opacity:0;scale:.75;
  transition:opacity .5s var(--ease),scale .5s var(--ease);
}
.gcell:hover .plus{opacity:1;scale:1}

.filters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:clamp(28px,4vw,48px)}
.filters button{
  padding:10px 22px;border:1px solid transparent;font-size:.71rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);transition:.35s var(--ease);
}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink);border-color:var(--line)}
.gcell.hide{display:none}

/* ---------- 12. Film / video --------------------------------------------- */
.film{position:relative;overflow:hidden;background:var(--ink)}
.film video,.film>img{width:100%;height:clamp(430px,82vh,780px);object-fit:cover;opacity:.6}
/* Scrim under the copy: the footage is bright in places, so the text needs
   its own dark base instead of relying on the frame being dark enough. */
.film::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(85% 70% at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,.34) 60%,rgba(0,0,0,.5) 100%)}
.film-ov{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;text-align:center;padding:var(--gut);color:#fff;
}
/* .display defaults to var(--ink); over footage it has to be forced white or
   the heading renders near-black on a dark video. */
.film-ov h2,.film-ov .display{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.film-ov .display em{color:#e4cdb2}
.film-ov .lede{color:rgba(255,255,255,.95);margin-inline:auto;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.film-ov .link-u{color:#fff;border-color:rgba(255,255,255,.45)}
.film-ov .link-u:hover{color:#e4cdb2;border-color:#e4cdb2}
.play{
  width:82px;height:82px;border:1px solid rgba(255,255,255,.85);border-radius:50%;
  display:grid;place-items:center;color:#fff;transition:.5s var(--ease);
}
.play:hover{background:#fff;color:var(--ink);border-color:#fff;transform:scale(1.06)}
.play.hidden{opacity:0;visibility:hidden}
.sound{
  position:absolute;right:var(--gut);bottom:26px;z-index:5;display:flex;align-items:center;gap:10px;
  color:#fff;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.sound .ic{width:38px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;transition:.4s}
.sound:hover .ic{background:#fff;color:var(--ink)}

/* film cards */
.films{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px)}
.fcard{position:relative;overflow:hidden;display:block;background:var(--ink);border-radius:var(--r-img)}
.fcard img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.82;transition:transform 1.1s var(--ease),opacity .5s}
.fcard:hover img{transform:scale(1.05);opacity:.62}
.fcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}
.fcard .cap{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(18px,2.4vw,30px);color:#fff}
.fcard .cap h3{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:400;color:#fff}
.fcard .cap span{font-size:.67rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.fcard .pill{
  position:absolute;right:18px;top:18px;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;color:#fff;
  transition:.45s var(--ease);
}
.fcard:hover .pill{background:#fff;color:var(--ink)}

/* ---------- 13. Services -------------------------------------------------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
/* scroll-margin: the Photography menu links straight at a card and the header
   is fixed over the page, so an unpadded jump lands under it */
/* cards are <a> on the services grid and <article> on the studio page,
   so style the grid's children generically */
.svc > *{
  background:var(--paper);padding:clamp(24px,2.6vw,34px);transition:background .5s var(--ease);
  scroll-margin-top:calc(var(--nav-h) + 56px);
}
.svc > *:hover{background:var(--white)}
.sec-cream .svc > *{background:var(--cream)}
.sec-cream .svc > *:hover{background:#efe6d9}
.svc .no{font-family:var(--number);font-size:1.4rem;font-weight:400;color:var(--accent);display:block;margin-bottom:8px}
.svc h3{font-family:var(--display);font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:400;color:var(--ink);margin-bottom:9px}
.svc p{font-size:.92rem;line-height:1.75}
.svc .tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
/* clickable card: the title shifts colour and an "Explore" cue is revealed */
.svc-item{display:block;text-decoration:none}
.svc-item h3{transition:color .35s var(--ease)}
.svc-item:hover h3,.svc-item:focus-visible h3{color:var(--accent)}
.svc-item .go{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.svc-item:hover .go,.svc-item:focus-visible .go{opacity:1;transform:none}
.svc-item:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* touch devices have no hover, so always show the cue there */
@media (hover:none){.svc-item .go{opacity:1;transform:none}}
.svc .tags i{
  font-style:normal;font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border:1px solid rgba(0,0,0,.22);color:var(--muted);
}

/* ---------- 13b. Photo service cards + process ---------------------------
   The services page leads with pictures instead of the numbered text cards
   used on the home page: a photograph carries "puberty ceremony" faster than
   a paragraph does. Same palette and type scale, different entry point. */
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.scard{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-img-sm);overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  border-radius:var(--r-img);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  /* the Photography menu aims at these cards and the header is fixed over
     the page, so an unpadded jump lands underneath it */
  scroll-margin-top:calc(var(--nav-h) + 56px);
}
.scard:hover,.scard:focus-visible{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.12)}
.scard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the figure caps the card, so only its top corners round */
.scard-fig{margin:0;overflow:hidden;border-radius:var(--r-img) var(--r-img) 0 0}
/* The gallery files are 4:5 with a caption burnt into the bottom of the
   frame. Cropping these 4:3 cards from the top drops that band entirely
   and keeps the subject, instead of slicing a caption in half. */
.scard-fig img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top;
  transition:transform 1.1s var(--ease);
}
.scard:hover .scard-fig img{transform:scale(1.06)}
.scard-body{
  flex:1;display:flex;flex-direction:column;text-align:center;
  padding:clamp(16px,1.9vw,26px) clamp(14px,1.7vw,24px) clamp(18px,2vw,28px);
}
.scard h3{
  font-family:var(--display);font-size:clamp(1.08rem,1.6vw,1.38rem);font-weight:400;
  line-height:1.28;color:var(--ink);transition:color .35s var(--ease);
}
.scard:hover h3,.scard:focus-visible h3{color:var(--accent)}
.scard p{font-size:.86rem;line-height:1.78;margin-top:10px}
.scard .go{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;padding-top:16px;
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}

/* Four stages, icon-led. Sits on the services page under the card grid. */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3vw,44px);text-align:center}
.proc svg{color:var(--accent);margin-inline:auto}
.proc h3{font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.32rem);font-weight:400;color:var(--ink);margin:14px 0 8px}
.proc p{font-size:.88rem;line-height:1.8}

/* ---------- 14. Why / stats ---------------------------------------------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.why article{border-top:1px solid var(--line);padding-top:26px}
.sec-ink .why article{border-color:var(--line-lt)}
.why .no{font-family:var(--number);font-size:1.2rem;font-weight:400;color:var(--accent);letter-spacing:.1em}
.why h3{font-family:var(--display);font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:400;color:var(--ink);margin:12px 0 10px}
.why p{font-size:.93rem;line-height:1.88}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);text-align:center}
.stats .n{font-family:var(--number);font-size:clamp(2.4rem,4.6vw,3.8rem);font-weight:400;color:var(--ink);line-height:1}
.sec-ink .stats .n{color:#fff}
.sec-ink .stats .k{color:rgba(255,255,255,.8)}
.stats .k{margin-top:10px;font-size:.67rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}

/* ---------- 15. Testimonials — Google review cards ------------------------ */
/* A horizontal scroll-snap rail. Native scrolling does the touch/trackpad work;
   the dots below drive it a page at a time and mirror the scroll position. */
.tst{position:relative}
.tst-track{
  display:flex;gap:clamp(16px,2vw,26px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  /* the cards carry a soft shadow — let it breathe inside the clipped rail */
  padding:10px 4px 18px;margin:-10px -4px -18px;
}
.tst-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.tst-track{scroll-behavior:auto}}

.tst-item{
  flex:0 0 calc((100% - 2 * clamp(16px,2vw,26px)) / 3);
  scroll-snap-align:start;
}

/* --- the card ------------------------------------------------------------ */
.gr{
  position:relative;overflow:hidden;height:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(30px,3vw,42px) clamp(20px,2.2vw,32px) clamp(30px,3vw,40px);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.28);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.gr:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 20px 40px -20px rgba(0,0,0,.34)}

/* Folded tan corner carrying the Google mark. Rounded on the outside to follow
   the card, scooped on the inside so it reads as a turned-back page corner. */
.gr-corner{
  position:absolute;top:0;right:0;width:70px;height:66px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--sand);border-radius:0 20px 0 22px;
  box-shadow:-1px 1px 0 rgba(0,0,0,.05);
}
.gr-corner svg{width:18px;height:18px;display:block}
.gr-corner .mini{font-size:.5rem;letter-spacing:.12em;color:var(--accent-dk);line-height:1}

/* --- avatar --------------------------------------------------------------- */
.gr-av{
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;
}
.gr-av svg{width:24px;height:24px;display:block}

/* --- meta ----------------------------------------------------------------- */
.gr-name{
  font-family:var(--display);font-size:clamp(1.18rem,1.5vw,1.4rem);font-weight:500;
  color:var(--ink);letter-spacing:.01em;line-height:1.2;margin:22px 0 0;
}
.gr-when{font-size:.7rem;letter-spacing:.12em;color:var(--muted);margin:9px 0 0}
.gr-stars{
  color:var(--star);letter-spacing:.24em;font-size:.86rem;line-height:1;
  margin:16px 0 0;padding-left:.24em;   /* offset the trailing letter-spacing */
}
.gr-body{
  margin:22px 0 0;border:0;padding:0;
  font-size:.9rem;font-weight:300;line-height:1.95;color:var(--body);
  letter-spacing:.008em;
}

/* --- dots ----------------------------------------------------------------- */
.tst-nav{display:flex;justify-content:center;gap:8px;margin-top:38px}
.tst-nav button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.4s}
.tst-nav button.on{background:var(--accent);transform:scale(1.35)}
.tst-nav:empty{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- 16. Instagram coverflow --------------------------------------- */
/* A fanned stack: the active frame sits front and centre, its neighbours recede
   to either side. JS owns each card's transform (see main.js §10) and sets
   --cf-vis to say how many neighbours a breakpoint should reveal. */
.cf{
  --cf-w:clamp(190px,20vw,286px);   /* card width  */
  --cf-vis:3;                        /* neighbours shown each side */
  position:relative;
}
.cf-stage{
  position:relative;
  height:calc(var(--cf-w) * 1.25 + 92px);
  perspective:1500px;
  /* Cards parked off-stage would otherwise widen the document and give the
     whole page a horizontal scrollbar. clip crops without creating a scroll
     container; hidden is the fallback. The extra height above keeps the card
     shadows inside the clip rect instead of leaning on a clip-margin, which
     would itself have overflowed. No preserve-3d: perspective alone projects
     direct children, and non-visible overflow would flatten it regardless. */
  overflow:hidden;
  overflow:clip;
  overflow-clip-margin:0;
}
.cf-card{
  position:absolute;top:50%;left:50%;
  width:var(--cf-w);
  margin:calc(var(--cf-w) * -0.625) 0 0 calc(var(--cf-w) * -0.5);
  border-radius:var(--r-img-sm);overflow:hidden;display:block;
  background:var(--paper);
  box-shadow:0 16px 44px rgba(0,0,0,.24);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform .85s var(--ease),opacity .85s var(--ease),filter .85s var(--ease);
  will-change:transform,opacity;
}
.cf-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* Only the centre card is a live target; the rest are recentred on click. */
.cf-card[aria-hidden="true"]{pointer-events:none}

.cf-cta{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;
  padding:10px 22px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-size:.58rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
  opacity:0;transition:opacity .5s var(--ease),translate .5s var(--ease);
  translate:-50% 8px;
}
.cf-card.on .cf-cta{opacity:1;translate:-50% 0}
.cf-card.on:hover .cf-cta{background:#fff}

.cf-ui{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:34px}
.cf-prev,.cf-next{
  width:42px;height:42px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink-soft);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.cf-prev:hover,.cf-next:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cf-dots{display:flex;gap:9px}
.cf-dots button{width:22px;height:2px;background:var(--line);transition:background .4s}
.cf-dots button.on{background:var(--accent-dk)}

/* ---------- 16b. Service pages -------------------------------------------- */
/* Layout mirrors the reference brief: image banner, centred intro under a ruled
   heading, frames, an inclusions list, then the other services. */
.svc-banner{
  position:relative;
  min-height:clamp(360px,46vh,520px);
  display:flex;align-items:flex-end;
  padding-block:clamp(48px,7vw,86px);
  overflow:hidden;
}
/* Every photograph in the library carries a baked-in caption (they are the
   studio's Instagram posts), which would fight the page title. Blurring the
   banner turns it into colour and mood only, so the h1 is the single piece of
   legible text. The slight scale hides the soft edge blur leaves behind. */
.svc-banner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:blur(7px);transform:scale(1.09);
}
.svc-banner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.42) 45%,rgba(0,0,0,.78));
}
.svc-banner-in{position:relative;z-index:2;text-align:center}
.svc-banner .crumb{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.svc-banner .crumb a{color:#fff}
.svc-banner .crumb a:hover{color:var(--accent-soft)}
.svc-banner h1{color:#fff;margin-top:16px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
/* .display em defaults to --accent, which is a dark brown — unreadable over
   the banner scrim. Same warm sand the film overlay uses. */
.svc-banner h1 em{color:#e4cdb2}

.shell.narrow{max-width:820px}
/* six frames read as two full rows rather than 4 + 2 with a hole */
.gal.gal-3{grid-template-columns:repeat(3,1fr)}

/* Heading with a short rule either side — the reference's signature detail. */
.ruled{
  display:flex;align-items:center;justify-content:center;gap:22px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);
}
.ruled::before,.ruled::after{
  content:"";height:1px;width:clamp(26px,5vw,62px);background:var(--accent-soft);flex:0 0 auto;
}
.svc-pull{
  margin-top:22px;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(.95rem,1.5vw,1.12rem);color:var(--accent-dk);
}

.inc-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px;list-style:none;margin:0;padding:0}
.inc-list li{
  position:relative;padding:14px 0 14px 30px;
  border-bottom:1px solid var(--line);
  font-size:.82rem;letter-spacing:.03em;color:var(--body);
}
.inc-list li::before{
  content:"";position:absolute;left:2px;top:20px;
  width:9px;height:9px;border:1px solid var(--accent-dk);border-radius:50%;
}
.inc-list li i{font-style:normal;color:var(--muted);font-size:.74rem}

.oth{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.oth-card{position:relative;display:block;overflow:hidden;border-radius:var(--r-img-sm)}
.oth-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.oth-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.74));
  transition:opacity .45s;
}
.oth-card:hover img{transform:scale(1.06)}
.oth-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px 20px;color:#fff}
.oth-cap h3{
  font-family:var(--display);font-size:1.24rem;font-weight:400;line-height:1.2;color:#fff;
}
.oth-cap em{
  display:inline-flex;align-items:center;gap:9px;margin-top:9px;
  font-family:var(--sans);font-style:normal;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88);
}

/* ---------- 17. Forms ----------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.66rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 2px;background:transparent;border:0;border-bottom:1px solid var(--line);
  font-size:.97rem;font-weight:300;color:var(--ink);transition:border-color .4s var(--ease);border-radius:0;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent)}
.field.err input,.field.err select,.field.err textarea{border-color:#c0574f}
.field .msg{font-size:.72rem;letter-spacing:.02em;color:#a3352b;min-height:16px}
.form-note{font-size:.81rem;color:var(--muted);letter-spacing:.02em}
.sent{
  display:none;margin-top:22px;padding:22px 24px;border:1px solid var(--accent);
  background:rgba(164,141,120,.14);font-size:.94rem;color:var(--ink);
}
.sent.show{display:block;animation:fadeUp .6s var(--ease)}

.info-list{display:flex;flex-direction:column;gap:26px}
.info-list .it{display:flex;gap:16px;align-items:flex-start}
.info-list .ic{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.info-list h4{font-size:.67rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:6px}
.info-list p,.info-list a{font-size:.97rem;color:var(--ink);line-height:1.75}
.info-list a:hover{color:var(--accent)}

/* ---------- 18. CTA band -------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.cta-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:-1}
.cta-band .shell{position:relative;text-align:center;color:#fff;padding-block:clamp(74px,10vw,132px)}
.cta-band h2{color:#fff;margin-bottom:20px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.cta-band p{color:rgba(255,255,255,.92);margin-inline:auto;text-shadow:0 1px 18px rgba(0,0,0,.5)}

/* ---------- 19. Footer ---------------------------------------------------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.82);padding-top:clamp(56px,7vw,92px)}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(26px,3vw,52px)}
.ftr img.fl{height:46px;width:auto;margin-bottom:20px}
.ftr h4{font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:20px}
.ftr li{margin-bottom:11px}
.ftr a{font-size:.91rem;transition:color .35s}
.ftr a:hover{color:var(--accent-soft)}
.ftr p{font-size:.91rem;line-height:1.9}
.socials{display:flex;gap:12px}
.socials a{
  width:38px;height:38px;border:1px solid var(--line-lt);display:grid;place-items:center;
  color:rgba(255,255,255,.92);transition:.4s var(--ease);
}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ftr-btm{
  margin-top:clamp(40px,5vw,64px);padding-block:24px;border-top:1px solid var(--line-lt);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.79rem;letter-spacing:.04em;
}

/* ---------- 20. Lightbox -------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:950;background:rgba(8,8,8,.96);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.lb.open{opacity:1;visibility:visible}
/* the stage generates no box, so the JS-created <img> still lays out as a
   direct flex child of .lb */
.lb-stage{display:contents}
.lb img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--r-img)}
.lb .x{position:absolute;top:20px;right:22px;width:48px;height:48px;border:1px solid var(--line-lt);color:#fff;display:grid;place-items:center;transition:.4s}
.lb .x:hover{background:#fff;color:#000}
.lb .pv,.lb .nx{
  position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;
  border:0;background:transparent;color:#fff;display:grid;place-items:center;transition:color .4s;
}
.lb .pv{left:18px}
.lb .nx{right:18px}
.lb .pv:hover,.lb .nx:hover{background:transparent;color:var(--accent-soft)}
.lb .count{position:absolute;bottom:22px;left:50%;translate:-50% 0;color:rgba(255,255,255,.85);font-size:.74rem;letter-spacing:.18em}

/* ---------- 20b. Offer popup ---------------------------------------------- */
/* Shown once per browser session on the home page, after the preloader clears.
   [hidden] keeps it out of the flow until JS arms it, so no-JS visitors and
   crawlers never meet a modal they cannot dismiss. */
.pop{
  position:fixed;inset:0;z-index:960;background:rgba(8,8,8,.88);
  display:grid;place-items:center;padding:clamp(18px,4vw,48px);
  opacity:0;visibility:hidden;
  /* visibility is a discrete property: given a duration it flips only halfway
     through, which would leave the close button unfocusable for 250ms. Delay
     it on the way out instead, and switch it instantly on the way in. */
  transition:opacity .5s var(--ease),visibility 0s .5s;
}
.pop.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.pop-in{
  /* max-width, not width: the panel shrinks to whatever the poster actually
     measures once max-height has capped it, so the shadow hugs the artwork
     instead of letterboxing it on short viewports */
  position:relative;max-width:min(440px,100%);
  transform:translateY(20px) scale(.985);
  transition:transform .55s var(--ease);
}
.pop.open .pop-in{transform:none}
.pop-art{display:block}
.pop-art img{
  width:auto;height:auto;max-width:100%;max-height:86vh;
  border-radius:var(--r-img-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.pop .x{
  position:absolute;top:-16px;right:-16px;width:44px;height:44px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line-lt);color:#fff;
  display:grid;place-items:center;
  /* named properties, not `all`: a bare `.4s` would also transition the
     inherited visibility flip and leave the button unfocusable for 200ms */
  transition:background .4s var(--ease),color .4s var(--ease);
}
.pop .x:hover{background:#fff;color:var(--ink)}

/* ---------- 21. Floating actions ------------------------------------------ */
.fab{position:fixed;right:18px;bottom:18px;z-index:800;display:flex;flex-direction:column;gap:10px}
.fab a,.fab button{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.22);transition:.4s var(--ease);
}
.fab .wa{background:#25d366}
.fab a:hover,.fab button:hover{transform:translateY(-4px)}
.fab .top{opacity:0;visibility:hidden;background:var(--accent)}
.fab .top.show{opacity:1;visibility:visible}

/* ---------- 21b. Mobile action bar ---------------------------------------
   Home / call / mail / WhatsApp, pinned to the bottom edge on phones. Off by
   default: above 860px the header nav and footer already carry these four
   routes, and a fixed bar there would only eat viewport. The visible rules
   live in the 860px query below so they sit after the utility block. */
.mbar{display:none}

/* ---------- 22. Reveal ----------------------------------------------------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}
.rv-d2{transition-delay:.2s}
.rv-d3{transition-delay:.3s}
.rv-d4{transition-delay:.4s}
.rv-d5{transition-delay:.5s}
.rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.rv-img.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv,.rv-img{opacity:1;transform:none;clip-path:none}
  .cf-card{transition:none}
}

/* ---------- 23. Utilities -------------------------------------------------- */
/* These replace what used to be inline style="" attributes. Two reasons:
   1. Security — a CSP with style-src 'unsafe-inline' gives away most of what
      style-src is for. With no inline styles left, style-src can be strict.
   2. Correctness — an inline style outranks a media query, so the three grids
      below used to keep their desktop column count all the way down to 375px.
   POSITION MATTERS: this block must stay ABOVE the media queries that follow,
   so those media queries still win on small screens. Do not move it below. */
.u-mt-14{margin-top:14px}
.u-mt-22{margin-top:22px}
.u-mt-28{margin-top:28px}
.u-mt-44{margin-top:clamp(28px,3.5vw,44px)}
.u-mt-46{margin-top:clamp(30px,4vw,46px)}
.u-mt-50{margin-top:clamp(30px,4vw,50px)}
.u-mt-54{margin-top:clamp(34px,4vw,54px)}
.u-mt-58{margin-top:clamp(34px,4vw,58px)}
.u-mt-62{margin-top:clamp(34px,4vw,62px)}
.u-mb-40{margin-bottom:clamp(24px,3vw,40px)}
.u-btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.success-content{max-width:680px;margin:0 auto;text-align:center}
.u-cols-2{grid-template-columns:repeat(2,1fr)}
.u-cols-3{grid-template-columns:repeat(3,1fr)}
.u-plain{text-transform:none;letter-spacing:0}
.u-fw-500{font-weight:500}

/* ---------- 24. Responsive ------------------------------------------------- */
@media (max-width:1080px){
  .oth{grid-template-columns:repeat(2,1fr)}
  .gal.gal-3{grid-template-columns:repeat(2,1fr)}
  .cf{--cf-vis:2}
  .tst-item{flex-basis:calc((100% - clamp(16px,2vw,26px)) / 2)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .svc{grid-template-columns:repeat(2,1fr)}
  .scards{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ig{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .cf{--cf-vis:2;--cf-w:clamp(180px,42vw,240px)}
  :root{--nav-h:76px;--nav-h-sm:66px}
  .tst-item{flex-basis:100%}
  .nav{display:none}
  .brand img{height:32px}
  .hdr.solid .brand img{height:28px}
  .burger{display:block}
  .split{grid-template-columns:1fr;gap:34px}
  /* Was right:12px;bottom:12px, which sat the card fully inside the photo and
     covered a large share of it at phone widths. Hanging it off the corner puts
     most of the card on the page ground instead of on the picture. */
  .split-media .badge{right:-6px;bottom:-6px;padding:9px 13px}
  .split-media .badge b{font-size:1.35rem}
  .stack-2{padding-right:10%;padding-bottom:12%}
  .form{grid-template-columns:1fr}
  .films{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,1fr)}
  .hero-foot .row{flex-direction:column;align-items:flex-start;gap:20px}
  .scroll-cue{display:none}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px}

  /* --- mobile action bar --- */
  .mbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:820;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.07);
    /* iOS home-indicator gutter; 0px everywhere else */
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mbar a{
    height:var(--mbar-h);display:grid;place-items:center;color:var(--ink);
    transition:color .3s var(--ease),background .3s var(--ease);
  }
  .mbar a[aria-current="page"]{color:var(--accent)}
  .mbar a:active{background:rgba(0,0,0,.055)}
  /* The bar owns the bottom edge now: drop the duplicate WhatsApp FAB and
     lift the back-to-top button clear of the bar. */
  .fab .wa{display:none}
  .fab{bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom,0px) + 14px)}
  /* Grow the footer's last row by the bar's height so the copyright line is
     never parked underneath it. */
  .ftr-btm{padding-bottom:calc(24px + var(--mbar-h) + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  /* frames are a third the width here; the desktop radius would read as a
     bevel rather than a soft corner, so step it down with them */
  :root{--r-img:10px;--r-img-sm:9px;--r-img-lg:14px}
  .inc-list{grid-template-columns:1fr}
  .oth{grid-template-columns:1fr}
  .ruled{gap:14px}
  .svc-banner{min-height:320px}
  .cf{--cf-vis:1;--cf-w:min(62vw,240px)}
  /* nine dots plus both arrows overrun a phone-width row, so tighten them */
  .cf-ui{gap:12px;margin-top:26px}
  .cf-dots{gap:6px}
  .cf-dots button{width:12px}
  .cf-prev,.cf-next{width:38px;height:38px}
  body{font-size:14.5px}
  .gal{grid-template-columns:repeat(2,1fr);gap:6px}
  .gcell.wide{grid-column:span 2}
  .svc{grid-template-columns:1fr}
  /* one card per row: at 170px wide the descriptions were breaking to six
     and seven lines, which cost more height than the second column saved. */
  .scards{grid-template-columns:1fr;gap:14px}
  .why{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr;gap:34px}
  .ig{grid-template-columns:repeat(3,1fr)}
  .hero-arrows{display:none}
  .ftr-btm{flex-direction:column;text-align:center}
  .lb .pv,.lb .nx{width:42px;height:42px}
  /* keep the close button on-screen once the modal padding drops to 18px */
  .pop .x{top:-12px;right:-12px;width:38px;height:38px}
}