*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── DARK FINTECH PALETTE ── */
  --bg:#0B1628;--bg2:#0F1C33;--bg3:#132038;
  --gold:#C8A96E;--gold-l:#D9BB84;--gold-dim:rgba(200,169,110,.12);
  --iv:#F2E8D5;--iv2:rgba(242,232,213,.72);--iv3:rgba(242,232,213,.40);
  --border:rgba(200,169,110,.18);
  --sans:'Jost',sans-serif;--serif:'Cormorant Garamond',serif;

  /* ── DIAMOND MESH — geometric wireframe, faint (body/sections) ── */
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,0 L24,12 L12,24 L0,12 Z' fill='none' stroke='rgba(200,169,110,.055)' stroke-width='.55'/%3E%3Ccircle cx='12' cy='0' r='.7' fill='rgba(200,169,110,.065)'/%3E%3Ccircle cx='24' cy='12' r='.7' fill='rgba(200,169,110,.065)'/%3E%3Ccircle cx='12' cy='24' r='.7' fill='rgba(200,169,110,.065)'/%3E%3Ccircle cx='0' cy='12' r='.7' fill='rgba(200,169,110,.065)'/%3E%3C/svg%3E");
  /* rich: hero panel / badge interior */
  --tex-rich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,0 L24,12 L12,24 L0,12 Z' fill='none' stroke='rgba(200,169,110,.13)' stroke-width='.7'/%3E%3Ccircle cx='12' cy='0' r='.9' fill='rgba(200,169,110,.18)'/%3E%3Ccircle cx='24' cy='12' r='.9' fill='rgba(200,169,110,.18)'/%3E%3Ccircle cx='12' cy='24' r='.9' fill='rgba(200,169,110,.18)'/%3E%3Ccircle cx='0' cy='12' r='.9' fill='rgba(200,169,110,.18)'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth;font-size:17px}
body{
  background-color:var(--bg);
  background-image:var(--tex);
  background-size:24px 24px;
  color:var(--iv);font-family:var(--sans);overflow-x:hidden;line-height:1.7
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s}
.nav.scrolled{background:rgba(11,22,40,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 48px;height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links.right{justify-content:flex-end}
.nav-links a{font-size:.74rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--iv2);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-brand{text-align:center;display:flex;flex-direction:row;gap:12px;align-items:center;line-height:1}
.brand-name{font-family:var(--serif);font-size:1.1rem;font-weight:600;letter-spacing:5px;text-transform:uppercase;white-space:nowrap;color:var(--iv)}
.brand-sub{font-size:.52rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);margin-top:4px}

/* ═══ HERO ═══ */
.hero{height:100svh;min-height:640px;display:grid;grid-template-columns:55% 45%;padding-top:76px}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:60px 64px 60px 80px}
.hero-eyebrow{font-size:.62rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;display:flex;align-items:center;gap:12px}
.hero-eyebrow::after{content:'';flex:1;max-width:48px;height:2px;background:var(--gold)}
.hero-h1{font-family:var(--serif);font-size:clamp(3rem,5.2vw,5.4rem);font-weight:300;line-height:1.07;color:var(--iv);margin-bottom:32px}
.hero-h1 em{font-style:italic;color:var(--gold)}
.hero-desc{font-size:1.1rem;line-height:1.9;color:var(--iv2);max-width:420px;margin-bottom:44px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}

/* Hero panel — rich sapphire gradient */
.hero-panel{position:relative;overflow:hidden}
.hero-panel-bg{
  position:absolute;inset:0;
  background:linear-gradient(145deg,#0F1C33 0%,#0A1428 38%,#0C1830 65%,#060D1A 100%)
}
/* diamond mesh on panel */
.panel-texture{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--tex-rich);background-size:24px 24px
}
/* suit jacket — floats via mix-blend-mode:lighten (photo's black bg dissolves) */
.panel-suit{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 28%;
  z-index:2;
  mix-blend-mode:lighten;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.85) 14%,black 28%,black 80%,rgba(0,0,0,.4) 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.8) 8%,black 18%,black 80%,rgba(0,0,0,.6) 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.85) 14%,black 28%,black 80%,rgba(0,0,0,.4) 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.8) 8%,black 18%,black 80%,rgba(0,0,0,.6) 91%,transparent 100%);
  mask-composite:intersect
}
/* diagonal gold light-streak — crosses over jacket image */
.panel-streak{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(
    122deg,
    transparent 18%,
    rgba(200,169,110,.008) 32%,
    rgba(200,169,110,.055) 42%,
    rgba(200,169,110,.15) 48%,
    rgba(200,169,110,.22) 50%,
    rgba(200,169,110,.15) 52%,
    rgba(200,169,110,.055) 58%,
    rgba(200,169,110,.008) 68%,
    transparent 82%
  )
}
/* left-edge fade — blends panel into body bg */
.hero-panel::before{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(to right,var(--bg) 0%,rgba(11,22,40,0) 26%)
}
.hero-monogram{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20rem;font-weight:300;
  color:rgba(200,169,110,.055);user-select:none;pointer-events:none
}
.hero-panel-lines{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-panel-lines::before{
  content:'';position:absolute;top:12%;right:18%;width:1px;height:76%;
  background:linear-gradient(to bottom,transparent,rgba(200,169,110,.50),transparent)
}
.hero-panel-lines::after{
  content:'';position:absolute;top:20%;right:30%;width:1px;height:52%;
  background:linear-gradient(to bottom,transparent,rgba(200,169,110,.22),transparent)
}
/* Instagram badge echo */
.hero-badge-wrap{position:absolute;bottom:56px;right:56px;z-index:3;width:110px;height:110px}
.hero-badge{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(200,169,110,.40);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-image:var(--tex-rich);background-size:24px 24px;
  background-color:rgba(11,22,40,.35)
}
.hero-badge::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:.75px solid rgba(200,169,110,.32);z-index:2}
.badge-label{
  position:relative;z-index:1;
  font-family:var(--serif);font-size:1.4rem;font-weight:600;letter-spacing:3px;color:var(--gold)
}
.hero-detail{position:absolute;bottom:56px;right:184px;z-index:3;text-align:right}
.hero-detail-text{font-size:.56rem;letter-spacing:3px;text-transform:uppercase;color:var(--iv3);line-height:2.3}

/* ═══ HERO — CINEMATIC ═══
   Full-bleed real photography, dark cinematic grade + gradient scrim for
   legibility. Content is NEVER hidden pending JS — every element is
   opacity:1 by default; the fade-up is a pure CSS @keyframes animation
   that plays automatically on load regardless of any script executing.
   (The previous hero depended on a CDN-loaded GSAP timeline to reveal
   clip-path/opacity-hidden text — if that script was slow, blocked, or
   failed, the entire hero rendered as an empty navy screen. Confirmed via
   headless screenshot. Never gate first-paint content behind a network
   request again.) */
.hero-cine{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:170px 0 110px}
.hero-cine-media{position:absolute;inset:0;z-index:0}
.hero-cine-media picture,.hero-cine-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-cine-media img{filter:saturate(.8) contrast(1.14) brightness(.62) sepia(.1) hue-rotate(-6deg)}
.hero-cine-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,12,24,.95) 0%,rgba(6,12,24,.82) 30%,rgba(6,12,24,.42) 62%,rgba(6,12,24,.18) 100%),
    linear-gradient(0deg,rgba(6,12,24,.9) 0%,rgba(6,12,24,0) 42%)
}
.hero-cine-inner{position:relative;z-index:1;max-width:740px}
.hero-cine-inner>*{opacity:0;animation:heroFadeUp .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-cine-inner .eyebrow{animation-delay:.05s}
.hero-cine-h1{animation-delay:.16s}
.hero-cine-lead{animation-delay:.34s}
.hero-cine-ctas{animation-delay:.5s}
.hero-cine-proof{animation-delay:.64s}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-cine-inner>*{animation:none!important;opacity:1!important;transform:none!important}}
.hero-cine-h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.7rem,6.2vw,5.4rem);line-height:1.05;color:var(--iv);margin:22px 0 26px}
.hero-cine-h1 em{font-style:italic;color:var(--gold)}
.hero-cine-lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.8;color:var(--iv2);max-width:540px;margin-bottom:40px}
.hero-cine-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:38px}
.hero-cine-proof{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--iv3);letter-spacing:.2px}
.hero-cine-rating{color:var(--iv2);border-bottom:1px solid rgba(200,169,110,.4);padding-bottom:1px;transition:color .2s,border-color .2s}
.hero-cine-rating:hover{color:var(--gold);border-color:var(--gold)}
.hero-cine-rating .stars{color:var(--gold);margin-left:1px}
.hero-cine-proof strong{color:var(--gold);font-weight:600}
.hero-scroll-cue{position:absolute;left:60px;bottom:36px;z-index:1;display:flex;align-items:center;gap:10px;font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--iv3);opacity:0;animation:heroFadeUp .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.85s}
.hero-scroll-cue svg{width:14px;height:14px;stroke:var(--gold);animation:cueBob 1.8s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.hero-scroll-cue{animation:none!important;opacity:1!important}.hero-scroll-cue svg{animation:none!important}}
@media(max-width:960px){
  .hero-cine{padding:92px 0 calc(90px + env(safe-area-inset-bottom,0px));min-height:92svh}
  .hero-cine-scrim{background:linear-gradient(180deg,rgba(6,12,24,.72) 0%,rgba(6,12,24,.6) 40%,rgba(6,12,24,.94) 100%)}
  .hero-scroll-cue{display:none}
  /* Rating + Miss Universe credit were sharing one nowrap-ish flex row;
     at narrow widths the rating link's own text wrapped internally
     instead of the row breaking cleanly, and the wrapped "Google" ended
     up hidden behind the fixed mobile CTA bar. Wrapping the row itself
     puts each claim on its own line instead. */
  .hero-cine-proof{flex-wrap:wrap;row-gap:8px}
}

/* ═══ STAT BAND ═══ */
.stat-band{padding:56px 0;border-bottom:1px solid var(--border);background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px}
.stat-band-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1200px;margin:0 auto;padding:0 60px}
.stat-band-item{text-align:center;padding:0 12px}
a.stat-band-item{display:block;color:inherit;text-decoration:none;transition:opacity .2s}
a.stat-band-item:hover{opacity:.75}
.stat-band-n{font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.9rem);font-weight:300;color:var(--gold);line-height:1;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1,"pnum" 1}
.stat-band-l{font-size:.66rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--iv3);margin-top:10px;line-height:1.5}
@media(max-width:960px){.stat-band-inner{grid-template-columns:1fr 1fr;gap:36px 24px;padding:0 24px}}
@media(max-width:480px){.stat-band{padding:40px 0}.stat-band-inner{gap:28px 16px}.stat-band-l{font-size:.6rem}}

/* ═══ SPECIALIZATION ═══
   Was previously defined only in index.html's own inline <style> block
   (predating the rebuild); that whole block got replaced during the hero
   rebuild without these rules being carried over first, which silently
   left "Too tall. Too big. Too short." and the services list completely
   unstyled. Living here in the shared stylesheet now instead. */
.spec{padding:100px 0;background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* Standalone opening line, fully separate from the "Too tall / Too big /
   Too short" composition below it — not a caption stacked on any one of
   the three. Same italic-serif family as .spec-short so it reads as
   related typography, but in full-strength gold (not muted) and sized
   for real presence: clearly smaller than .spec-big, but well past
   caption territory. Generous margin-bottom is deliberate breathing room
   between this and .spec-tall, not a gap to be tightened. */
.spec-heard{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.8rem,3.6vw,2.4rem);color:var(--gold);line-height:1.15;margin:0 0 72px}
.spec-comp{position:relative;display:flex;flex-direction:column;gap:.08em;margin-top:0;margin-bottom:80px;font-weight:400}
.spec-tall,.spec-big,.spec-short{position:relative;z-index:1;font-family:var(--serif);line-height:.92;margin:0}
.spec-tall{font-size:clamp(2.2rem,6vw,4rem);font-weight:300;color:var(--iv2);align-self:flex-start}
.spec-big{font-size:clamp(3.6rem,11.5vw,8.5rem);font-weight:700;color:var(--gold);align-self:center;letter-spacing:-.01em}
.spec-short{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:300;font-style:italic;color:var(--iv2);align-self:flex-end}
.spec-body-row{display:grid;grid-template-columns:5.5fr 6.5fr;gap:60px;align-items:start}
.spec-body{max-width:560px}
/* .spec-body p (0,1,1) was beating .spec-breakout (0,1,0) on specificity
   alone, so the "That's what I do. That's all I do." pull-line silently
   rendered at the exact same size as every other paragraph instead of
   standing out — the section's whole point was getting flattened by a
   cascade fight. Scoped to .spec-body p.spec-breakout now so it always
   wins outright, no !important needed. */
/* Pop-in uses a back-out overshoot curve (cubic-bezier(.34,1.56,.64,1)),
   not a flat ease — it cruises past 100% scale/position and springs back,
   which is what actually reads as "pop" versus a plain fade. */
.spec-body p{font-size:1.2rem;line-height:1.8;color:var(--iv2);margin-bottom:24px;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .6s cubic-bezier(.34,1.56,.64,1),transform .6s cubic-bezier(.34,1.56,.64,1)}
.spec-body p.in-view{opacity:1;transform:translateY(0) scale(1)}
.spec-body p:nth-child(1){transition-delay:0s}
.spec-body p:nth-child(2){transition-delay:.1s}
.spec-body p:nth-child(3){transition-delay:.42s}
.spec-body p:nth-child(4){transition-delay:.52s}

/* The thesis line gets its own moment: a small gold tick draws in first
   (::before, same "chalk mark" language as the hero's tape-measure
   photo), then the line itself lands a beat later with a stronger
   overshoot than the surrounding paragraphs — it's the emotional peak of
   the section, so it should visibly land harder. */
.spec-body p.spec-breakout{position:relative;padding-top:28px;font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,2.8rem);color:var(--gold);line-height:1.25;margin:48px 0!important;letter-spacing:-.01em;transform:translateY(34px) scale(.9);transition:opacity .7s cubic-bezier(.34,1.56,.64,1) .22s,transform .7s cubic-bezier(.34,1.56,.64,1) .22s}
/* Continuous glow pulse, independent of the scroll-triggered pop-in above
   (runs on a plain CSS @keyframes loop, not gated by .in-view or any JS
   at all) — guaranteed visible the moment this text is on screen, no
   scroll-timing or caching edge case can hide it. */
.spec-body p.spec-breakout.in-view{animation:breakoutGlow 2.8s ease-in-out .9s infinite}
@keyframes breakoutGlow{
  0%,100%{text-shadow:0 0 16px rgba(200,169,110,.3),0 0 2px rgba(200,169,110,.25)}
  50%{text-shadow:0 0 36px rgba(200,169,110,.85),0 0 10px rgba(200,169,110,.6)}
}
@media(prefers-reduced-motion:reduce){
  .spec-body p.spec-breakout.in-view{animation:none;text-shadow:0 0 24px rgba(200,169,110,.5)}
}
.spec-body p.spec-breakout::before{content:'';position:absolute;top:0;left:0;width:44px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.65,0,.35,1) .05s}
.spec-body p.spec-breakout.in-view{transform:translateY(0) scale(1)}
.spec-body p.spec-breakout.in-view::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .spec-body p{opacity:1!important;transform:none!important;transition:none!important}
  .spec-body p.spec-breakout::before{transform:scaleX(1)!important;transition:none!important}
}
.spec-services{display:flex;flex-direction:column;width:100%;margin-top:48px;border-top:1px solid var(--border)}
.spec-svc{display:block;padding:22px 0;border-bottom:1px solid var(--border);transition:padding-left .22s}
.spec-svc:hover{padding-left:12px}
.spec-svc-name{display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--iv)}
.spec-svc-name::after{content:'\2192';color:var(--gold);opacity:0;margin-left:8px;transition:opacity .2s;text-transform:none;letter-spacing:0}
.spec-svc:hover .spec-svc-name::after{opacity:1}
.spec-svc-rule{display:block;width:26px;height:1px;background:rgba(200,169,110,.4);margin:11px 0}
.spec-svc-desc{display:block;font-size:.92rem;line-height:1.65;color:var(--iv3)}
@media(max-width:960px){
  .spec{padding:64px 0}
  .spec-comp{margin-bottom:56px}
  .spec-body-row{grid-template-columns:1fr;gap:8px}
  .spec-body{max-width:none}
}

/* ═══ SPECIALIZATION — photo pairing (replaces JS-drawn connector lines) ═══ */
.spec-visual{position:relative;min-width:0}

/* ═══ SPECIALIZATION — real before/after photo pairs (replaces the
   illustrated Off the Rack vs Custom Fit line drawing with two actual
   client examples: hand-basted first fitting → finished garment). Sized
   to fill .spec-visual the same slot the illustration used, so the
   section's two-column layout doesn't shift width when swapping one
   for the other. ═══ */
.spec-proof{border:1px solid var(--border);background:var(--bg3);padding:40px 20px;display:flex;flex-direction:column;gap:48px}
.spec-proof-row{display:flex;align-items:center;gap:16px}
.spec-proof-photo{flex:1;min-width:0}
.spec-proof-photo .photo-frame{aspect-ratio:3/4;border:1px solid var(--border)}
.spec-proof-cap{margin-top:14px;text-align:center;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--iv3)}
.spec-proof-cap.after{color:var(--gold)}
.spec-proof-arrow{flex:0 0 auto;color:var(--gold);opacity:.8;display:flex}
.spec-proof-arrow svg{width:24px;height:24px;display:block}
.spec-proof-divider{border-top:1px dashed var(--border)}
/* A more noticeable zoom than the site's default subtle 1.035x
   (.photo-frame:hover img) — these photos are the actual sales proof,
   worth letting someone lean in on construction/fit detail rather than
   the barely-there hover every other photo on the site gets. */
.spec-proof-photo .photo-frame:hover img{transform:scale(1.18)}
@media(max-width:960px){.spec-proof{margin-top:36px;padding:28px 22px;gap:36px}}
@media(max-width:480px){.spec-proof{padding:22px 16px;gap:28px}.spec-proof-row{gap:14px}.spec-proof-arrow svg{width:18px;height:18px}}

/* ═══ FEATURED WORK — pure-CSS mosaic (replaces GSAP fan carousel; no
   external script dependency, works identically with JS disabled) ═══ */
.work-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:56px}
.work-mosaic a{position:relative;overflow:hidden;border:1px solid var(--border);display:block;aspect-ratio:4/5}
.work-mosaic a:last-child{grid-column:1/-1;aspect-ratio:21/6}
.work-mosaic .photo-frame{width:100%;height:100%;position:absolute;inset:0;border:none}
.work-mosaic-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;background:linear-gradient(to top,rgba(6,12,24,.92),transparent);font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--iv);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.work-mosaic a:hover .work-mosaic-cap{opacity:1;transform:translateY(0)}
@media(max-width:960px){
  .work-mosaic{grid-template-columns:repeat(2,1fr)}
  .work-mosaic a:last-child{aspect-ratio:16/9}
}
@media(max-width:560px){
  .work-mosaic a:last-child{aspect-ratio:4/5}
}

/* ═══ PAGE HERO — PHOTO ═══
   Shared banner treatment for About / Services / Gallery / Contact: same
   cinematic grade + scrim as the homepage hero, shorter, content always
   visible by default (no animation gating). */
.page-hero-photo{position:relative;padding:186px 0 76px;overflow:hidden;border-bottom:1px solid var(--border)}
.page-hero-photo-media{position:absolute;inset:0;z-index:0}
.page-hero-photo-media picture,.page-hero-photo-media img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero-photo-media img{filter:saturate(.78) contrast(1.15) brightness(.5) sepia(.1) hue-rotate(-6deg)}
.page-hero-photo-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,12,24,.95) 0%,rgba(6,12,24,.86) 34%,rgba(6,12,24,.55) 68%,rgba(6,12,24,.3) 100%)}
.page-hero-photo .container{position:relative;z-index:1}
@media(max-width:960px){.page-hero-photo{padding:130px 0 56px}.page-hero-photo-scrim{background:linear-gradient(180deg,rgba(6,12,24,.75) 0%,rgba(6,12,24,.72) 50%,rgba(6,12,24,.95) 100%)}}

/* ═══ BUTTONS ═══ */
.btn-primary{display:inline-flex;align-items:center;gap:9px;padding:14px 34px;background:var(--gold);color:var(--bg);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;border:none;cursor:pointer;transition:background .22s}
.btn-primary:hover{background:var(--gold-l)}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;padding:14px 34px;background:transparent;border:1px solid var(--border);color:var(--iv2);font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;transition:border-color .22s,color .22s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ═══ LAYOUT ═══ */
.section{padding:100px 0}
.container{max-width:1200px;margin:0 auto;padding:0 60px}
.eyebrow{font-size:.64rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:20px;font-weight:600}
.eyebrow::before{content:'';width:36px;height:2px;background:var(--gold)}
.section-title{font-family:var(--serif);font-size:clamp(2.2rem,3.5vw,3.5rem);font-weight:300;line-height:1.15;color:var(--iv)}
.section-title em{font-style:italic;color:var(--gold)}
.body-text{font-size:1.06rem;line-height:1.95;color:var(--iv2)}

/* ═══ SERVICES STRIP ═══ */
.services-strip{background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.services-strip .container{padding:0}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--border);gap:1px}
.svc{background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px;padding:48px 36px;transition:background-color .2s;position:relative;overflow:hidden}
.svc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.svc:hover{background-color:var(--bg3)}
.svc:hover::after{transform:scaleX(1)}
.svc-icon{margin-bottom:24px;opacity:.85}
.svc-name{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--iv);margin-bottom:12px}
.svc-desc{font-size:1rem;line-height:1.85;color:var(--iv2)}
.svc-link{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:20px;transition:gap .22s}
.svc-link:hover{gap:12px}
.svc-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ PHILOSOPHY ═══ */
.philosophy{text-align:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);background-image:var(--tex);background-size:24px 24px}
.philosophy-quote{font-family:var(--serif);font-size:clamp(1.75rem,2.8vw,2.6rem);font-weight:300;font-style:italic;line-height:1.55;color:var(--iv);max-width:820px;margin:0 auto 24px;position:relative;padding:0 48px}
.philosophy-quote::before{content:'\201C';position:absolute;top:-10px;left:0;font-size:7rem;line-height:1;color:var(--gold);opacity:.2;font-family:var(--serif)}
.philosophy-cite{font-size:.66rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--iv3)}

/* ═══ NUMBERS ═══ */
.numbers{padding:80px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background-image:var(--tex);background-size:24px 24px}
.numbers-inner{display:flex;justify-content:center;gap:120px;max-width:1200px;margin:0 auto;padding:0 60px}
.stat{text-align:center}
.stat-n{font-family:var(--serif);font-size:clamp(3rem,4.5vw,4.5rem);font-weight:300;color:var(--gold);line-height:1}
.stat-l{font-size:.64rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--iv3);margin-top:10px}

/* ═══ TESTIMONIALS ═══ */
.testimonials{background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);margin-top:56px}
.testi{background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px;padding:48px 44px;position:relative}
.testi-q{font-family:var(--serif);font-size:1.25rem;font-style:italic;line-height:1.82;color:var(--iv);margin-bottom:28px}
.testi-q::before{content:'\201C';font-size:4rem;line-height:0;color:var(--gold);opacity:.22;position:absolute;top:56px;left:44px}
.testi-author{font-size:.72rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.testi-detail{font-size:.74rem;color:var(--iv3);margin-top:5px}

/* ═══ CTA ═══ */
.cta-block{text-align:center;padding:100px 60px;border-top:1px solid var(--border);background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px}
.cta-block .section-title{margin-bottom:16px}
.cta-block .body-text{max-width:500px;margin:0 auto 40px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ═══ FOOTER ═══ */
footer{background-color:var(--bg);background-image:var(--tex);background-size:24px 24px;border-top:1px solid var(--border);padding:72px 0 40px}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 60px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--border);margin-bottom:36px}
.footer-brand .f-name{font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:4px;text-transform:uppercase;margin-bottom:6px}
.footer-brand .f-sub{font-size:.55rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-brand p{font-size:.97rem;line-height:1.85;color:var(--iv2);max-width:260px}
.footer-col h4{font-size:.65rem;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:.97rem;color:var(--iv2);transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--iv3)}

/* ═══ INNER PAGES ═══ */
.page-hero{padding:160px 0 80px;border-bottom:1px solid var(--border);background-image:var(--tex);background-size:24px 24px}
.page-hero .container{display:flex;flex-direction:column;align-items:flex-start}
.section-lead{font-size:1.15rem;line-height:1.9;color:var(--iv2);max-width:560px;margin-top:20px}

/* Services detail */
.svc-detail{padding:80px 0;border-bottom:1px solid var(--border);background-image:var(--tex);background-size:24px 24px;overflow-x:hidden}
.svc-detail-inner{display:grid;grid-template-columns:180px 1fr;gap:64px;align-items:start;min-width:0}
/* MTM's block swaps the numeral for a real photo (embroidery + monogramming
   is literally what this section describes) — wider first column than the
   plain numeral needs, real content deserves the room. */
.svc-detail-inner-photo{grid-template-columns:280px 1fr}
.svc-detail-photo{aspect-ratio:3/4;border:1px solid var(--border);min-width:0}
#mtm .svc-detail-photo{border:none;background:transparent}
#mtm .svc-detail-photo::after{content:none}
#mtm .svc-detail-photo::before{
  content:'';position:absolute;inset:-8%;
  background-image:url('assets/photos/embroidery-machine.jpg');
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.05);
  /* Explicit two-value ellipse sizing (`ellipse 80% 80%`) silently fails to
     render in this Chrome build — mask-image just never applies, no error,
     no fallback, image shows fully sharp with hard edges. Verified in
     isolation: `circle farthest-side` rendered fine, `ellipse <px> <px>`
     did not. Keyword-based sizing (`closest-side`) is the form that
     actually works, so stops are tuned around that instead. */
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,transparent 56%,#000 78%,transparent 100%);
  mask-image:radial-gradient(ellipse closest-side at 50% 50%,transparent 56%,#000 78%,transparent 100%);
}
#mtm .svc-detail-photo img{
  position:relative;z-index:1;
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 54%,transparent 88%);
  mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 54%,transparent 88%);
}
.svc-num{font-family:var(--serif);font-size:7rem;font-weight:300;line-height:1;color:rgba(200,169,110,.18)}
.svc-meta{padding-top:8px}
.svc-meta h2{font-family:var(--serif);font-size:clamp(1.8rem,2.5vw,2.5rem);font-weight:400;color:var(--iv);margin-bottom:16px}
.svc-items{display:flex;flex-direction:column;gap:8px;margin-top:24px;list-style:none}
.svc-items li{font-size:1.02rem;color:var(--iv2);padding-left:22px;position:relative;line-height:1.8}
.svc-items li::before{content:'•';position:absolute;left:0;color:var(--gold)}
.svc-price-note{margin-top:20px;font-size:.82rem;letter-spacing:.5px;color:var(--iv3);border-top:1px solid var(--border);padding-top:16px}

/* About page */
.about-intro{padding:96px 0 80px;background-image:var(--tex);background-size:24px 24px;overflow-x:hidden}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:60px;min-width:0}
.about-hero-photo{aspect-ratio:3/4;border:1px solid var(--border);min-width:0}
.values{padding:80px 0;background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px;border-top:1px solid var(--border)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);margin-top:56px}
.value{background-color:var(--bg2);background-image:var(--tex);background-size:24px 24px;padding:44px 36px;transition:background-color .2s}
.value:hover{background-color:var(--bg3)}
.value-num{font-family:var(--serif);font-size:3.5rem;font-weight:300;color:var(--gold);opacity:.28;line-height:1;margin-bottom:16px}
.value h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--iv);margin-bottom:12px}
.value p{font-size:1rem;line-height:1.85;color:var(--iv2)}

/* Contact page */
.contact-page{padding:96px 0 80px;background-image:var(--tex);background-size:24px 24px}
.contact-grid{display:grid;grid-template-columns:3fr 2fr;gap:80px;margin-top:56px;align-items:start}
.form-field{margin-bottom:20px}
.form-field label{display:block;font-size:.62rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--iv2);margin-bottom:8px}
.form-field input,.form-field select,.form-field textarea{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--iv);padding:14px 16px;font-family:var(--sans);font-size:1rem;outline:none;transition:border-color .22s;appearance:none}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--gold)}
.form-field textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ci{margin-bottom:32px}
.ci-label{font-size:.62rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ci-val{font-size:.95rem;line-height:1.85;color:var(--iv2)}
.hours-table{width:100%;border-collapse:collapse;margin-top:8px}
.hours-table td{font-size:.88rem;padding:5px 0;color:var(--iv2)}
.hours-table td:last-child{text-align:right;color:var(--iv3)}

/* Gallery page — styling lives entirely in gallery.html's own inline
   <style> block now, not here. This used to be a second, older copy of
   the same rules (predating the real-photo gallery rebuild) and having
   two sources of truth for the same selectors is exactly what caused a
   bug: gallery.html's inline block was edited to fix a layout issue, but
   this older copy — never touched — silently kept applying underneath it,
   since equal-specificity rules follow document order and this file loads
   *before* gallery.html's inline block, not after. Removed rather than
   re-synced, so there's only one place left to edit. */

/* ═══ MOBILE NAV ═══ */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:16px 12px;justify-content:center}
.hamburger span{display:block;width:22px;height:1px;background:var(--iv);transition:background .2s}
.mobile-nav{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;background:#0b1628;z-index:199;padding:48px 40px;flex-direction:column;gap:28px}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--iv2);transition:color .2s}
.mobile-nav a:hover{color:var(--gold)}

/* ═══ MOBILE STICKY CTA BAR ═══
   Persistent Call / Book Appointment bar, mobile only (same 960px
   breakpoint the rest of the site uses). Hidden entirely above that
   width via the base rule below — @media only ever turns it back on,
   never introduces it, so desktop is untouched by default.
   z-index sits above .nav (200) so it stays on top while scrolling, but
   .nav-open (toggled by the same toggleNav() the hamburger already
   calls) drops it below .mobile-nav (199) — without that, this bar would
   sit fixed on top of the open full-screen mobile menu and cover its
   last item, since both are pinned to the same bottom edge. */
.mobile-cta-bar{display:none}
@media(max-width:960px){
  .mobile-cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:220;gap:10px;
    background:rgba(11,22,40,.97);backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  }
  .mobile-cta-bar.nav-open{z-index:120}
  .mobile-cta-bar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:13px 8px;font-family:var(--sans);font-size:.66rem;font-weight:600;
    letter-spacing:.8px;text-transform:uppercase;transition:opacity .2s;
    white-space:nowrap;
  }
  .mobile-cta-bar a:active{opacity:.75}
  .mobile-cta-bar svg{width:15px;height:15px;flex-shrink:0}
  .mobile-cta-call{background:transparent;border:1px solid var(--border);color:var(--iv2)}
  .mobile-cta-book{background:var(--gold);color:var(--bg);border:1px solid var(--gold)}
  /* Room for the fixed bar so it never covers the footer or in-page CTAs */
  body{padding-bottom:76px}
}

/* ═══ RESPONSIVE ═══ */

/* iOS tap highlight removal */
*{-webkit-tap-highlight-color:transparent}

@media(max-width:960px){
  /* Nav */
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-inner{grid-template-columns:48px 1fr 48px;padding:0 20px}
  .nav-brand{grid-column:2;min-width:0;gap:8px}
  .hamburger{grid-column:3;justify-self:end}

  /* Logo — the icon + longer "Tailor & Alterations" tagline overflowed the
     narrow middle nav column (was fine as bare text before the icon was
     added). Tagline drops on mobile like most nav wordmarks do at this
     width; icon shrinks; name loses letter-spacing/nowrap so it can wrap
     instead of pushing past the screen edge. */
  .nav-logo-badge{width:44px;height:44px}
  .nav-logo-icon{height:36px}
  .nav-brand-text{min-width:0}
  .brand-name{font-size:.6875rem;letter-spacing:.5px;white-space:normal;line-height:1.2}
  .brand-sub{display:none}

  /* Hero — panel becomes full-bleed background on mobile */
  .hero{grid-template-columns:1fr;height:auto;min-height:100svh;position:relative}
  .hero-text{padding:110px 28px 64px;align-items:flex-start;position:relative;z-index:2}
  /* Show panel as abs positioned bg layer (not hidden) */
  .hero-panel{
    display:block;
    position:absolute;inset:0;
    z-index:0
  }
  /* On mobile: override the left-edge fade with a full dark scrim for text legibility */
  .hero-panel::before{
    background:linear-gradient(
      160deg,
      rgba(11,22,40,.88) 0%,
      rgba(11,22,40,.72) 45%,
      rgba(11,22,40,.82) 100%
    ) !important;
    z-index:6 !important
  }
  /* Hide decorative badge + detail text — would overlap hero copy */
  .hero-badge-wrap,.hero-detail{display:none}
  .hero-h1{font-size:clamp(2.6rem,9vw,4rem)}
  .hero-desc{font-size:1rem;max-width:100%}
  .section-title{font-size:clamp(2rem,7vw,3rem)}

  /* Layout */
  .container{padding:0 24px}
  .section{padding:64px 0}
  .numbers{padding:56px 0}
  .numbers-inner{padding:0 24px;gap:40px;flex-wrap:wrap;justify-content:center}

  /* Page hero headers */
  .page-hero{padding:110px 0 52px}
  .about-intro{padding:56px 0 52px}
  .contact-page{padding:56px 0 52px}
  .section-lead{font-size:1.05rem}

  /* Grids */
  .services-grid{grid-template-columns:1fr 1fr}
  .svc{padding:36px 24px}
  .svc-desc{font-size:.97rem}
  .testi-grid{grid-template-columns:1fr}
  .testi{padding:36px 24px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .svc-detail-inner{grid-template-columns:1fr}
  .svc-num{display:none}
  .about-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr 1fr}
  .value{padding:36px 24px}
  .value p{font-size:.97rem}
  .contact-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr!important}
  .about-teaser-grid{grid-template-columns:1fr!important}

  /* CTA */
  .cta-block{padding:64px 24px}
  .body-text{font-size:1rem}
}

@media(max-width:480px){
  /* Container and spacing */
  .container{padding:0 20px}
  .section{padding:52px 0}
  .numbers{padding:48px 0}
  .numbers-inner{padding:0 20px;flex-direction:column;gap:32px;align-items:center}
  .cta-block{padding:52px 20px}
  .page-hero{padding:100px 0 44px}
  .about-intro{padding:44px 0 44px}
  .contact-page{padding:44px 0 44px}

  /* Hero */
  .hero-text{padding:100px 20px 52px}
  .hero-h1{font-size:clamp(2.4rem,10vw,3.2rem)}
  .hero-desc{font-size:.97rem}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost{width:100%;justify-content:center;text-align:center}

  /* Grids collapse to 1-col */
  .services-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .form-row{grid-template-columns:1fr}

  /* Tighter card padding */
  .svc{padding:28px 20px}
  .testi{padding:28px 20px}
  .value{padding:28px 20px}
  .ci{margin-bottom:24px}

  /* Typography */
  .section-title{font-size:clamp(1.9rem,9vw,2.8rem)}
  .section-lead{font-size:1rem}
  .body-text{font-size:.97rem}
  .svc-desc{font-size:.95rem}
  .value p{font-size:.95rem}
  .svc-items li{font-size:.97rem}
  .testi-q{font-size:1.12rem}
  .stat-n{font-size:clamp(2.4rem,10vw,3.5rem)}
  .philosophy-quote{font-size:clamp(1.5rem,5vw,2rem);padding:0 24px}

  /* CTAs stack */
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn-primary,.cta-actions .btn-ghost{justify-content:center;text-align:center}

  /* Footer bottom row wraps */
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}

  /* Mobile nav — bigger touch targets */
  .mobile-nav{padding:40px 24px;gap:0}
  .mobile-nav a{padding:16px 0;font-size:1.8rem;border-bottom:1px solid var(--border);display:block}
  .mobile-nav a:last-child{border-bottom:none}

  /* Buttons — full width feel */
  .btn-primary,.btn-ghost{width:100%;justify-content:center;text-align:center}

  /* Form */
  .form-field input,.form-field select,.form-field textarea{font-size:1rem}

  /* Hours table */
  .hours-table td{font-size:.85rem}

  /* Contact info quote block */
  .ci-val{font-size:.92rem}
}

/* ═══ LOGO — nav + footer ═══
   Real needle-icon mark added alongside the existing text wordmark (there
   was no graphic mark before, text-only). assets/logo-icon-navlight.png is
   the ORIGINAL Logo.png artwork's own colors (red ring, charcoal needle),
   just isolated from its white background and outer gray ring — no
   recoloring. That red-on-navy combo is too low-contrast against this
   site's own dark navy on its own, so a soft cream circular badge (var(--iv),
   matching the site's ivory text color) sits behind it for contrast instead
   of altering the mark itself.
   Row layout (icon beside text) lives directly on the base .nav-brand rule
   above, not as a separate override here — a same-specificity override rule
   placed later in the file was empirically NOT winning the cascade for
   flex-direction in this stylesheet (unclear why; verified with
   getComputedStyle, ruled out media-query scoping and duplicate rules).
   Editing the base rule directly sidesteps whatever that was. If nav-brand
   ever renders stacked again instead of side-by-side, check this first. */
/* Structural properties live here, unconditional, so they apply at every
   width. Actual width/height used to live in this same rule, unconditional
   and placed after the @media(max-width:960px) mobile override further up
   the file — same specificity + later source order meant it won at EVERY
   width, silently nullifying the mobile-scoped 44px/36px badge/icon sizing.
   Sizing now lives in width-scoped rules instead (mobile block above,
   desktop block below) so neither can accidentally clobber the other. */
.nav-logo-badge{border-radius:50%;background:var(--iv);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-icon{width:auto;display:block}
@media(min-width:961px){
  .nav-logo-badge{width:66px;height:66px}
  .nav-logo-icon{height:56px}
}
.nav-brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-logo-badge{width:56px;height:56px;border-radius:50%;background:var(--iv);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.footer-logo-icon{height:46px;width:auto;display:block}

/* ═══ REAL PHOTOGRAPHY — unified treatment ═══
   Every real shop photo goes through the same grade so four different
   phone photos read as one considered set: a slight desaturate + warm
   push toward the site's navy/gold palette (filter), plus a navy gradient
   scrim (::after) anchored to match the hero panel's own gradient angle,
   so real photos feel like part of this design system, not inserts. */
.photo-frame{position:relative;overflow:hidden;background-color:var(--bg2)}
.photo-frame picture{display:block;width:100%;height:100%}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.06) brightness(.96) sepia(.06) hue-rotate(-6deg);
  transition:transform .5s ease;
}
.photo-frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(145deg,rgba(11,22,40,.38) 0%,rgba(11,22,40,.08) 40%,rgba(11,22,40,.22) 100%);
  box-shadow:inset 0 0 0 1px rgba(200,169,110,.14);
}
.photo-frame:hover img{transform:scale(1.035)}

/* ═══ AS SEEN ON — Miss Universe credibility section ═══
   overflow-x:hidden here is a deliberate defensive belt-and-suspenders: in
   testing, narrow viewports intermittently computed .aso-card's box a few
   pixels wider than .container's content width (reproduced even with a
   totally bare max-width+margin:auto+padding container and no image/grid
   involved at all — couldn't pin down a root cause, and it didn't reproduce
   at desktop widths). Nothing here should ever legitimately need to
   overflow horizontally, so clipping is safe regardless of the cause. */
.as-seen-on{background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);background-image:var(--tex-rich);background-size:24px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow-x:hidden}
.aso-head{text-align:center;max-width:680px;margin:0 auto 64px}
.aso-headline{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:300;line-height:1.15;color:var(--iv);margin-top:20px}
.aso-headline em{font-style:italic;color:var(--gold)}
.aso-sub{font-size:1.05rem;line-height:1.85;color:var(--iv2);margin-top:20px;max-width:560px;margin-left:auto;margin-right:auto}
.aso-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;min-width:0}
/* min-width:0 overrides grid's default min-width:auto — without it, this
   grid item won't shrink below the photo's intrinsic size, which pushed it
   past the viewport edge on narrow screens even though the track itself
   was sized correctly (classic CSS grid + large-image gotcha). */
.aso-card{position:relative;min-width:0}
.aso-card .photo-frame{aspect-ratio:3/4;border:1px solid var(--border)}
.aso-card-cap{margin-top:22px;text-align:center}
.aso-card-title{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--iv);font-style:italic}
.aso-card-sub{font-size:.68rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-top:8px}
@media(max-width:960px){
  .aso-grid{grid-template-columns:1fr;gap:32px}
  .aso-head{margin-bottom:44px}
}