/* ============================================================
   AOVO SERVICES — interactive voiceover hero — stylesheet
   EDIT AUDIO FILES: see data/demos.js (see README.md).
   EDIT HERO PHOTO: the current photo is assets/img/hero-2.jpg.
   When swapping in a new photo, ALWAYS give it a NEW filename (hero-3.jpg,
   hero-4.jpg, ...) and update the .stage-photo src in index.html — browsers
   and CDNs cache images hard, and reusing a filename is the usual reason a
   "replaced" photo still shows the old (often blurrier) one on phones.
   ============================================================ */
:root{
  --ink:        #0c0a07;
  --ink-2:      #14100a;
  --gold-hi:    #fbe7b3;
  --gold:       #d9b25a;
  --gold-deep:  #a9772a;
  --gold-line:  rgba(216,178,90,.55);
  --gold-glow:  rgba(216,178,90,.28);
  --panel:      rgba(18,13,8,.62);
  --panel-2:    rgba(24,17,9,.86);
  --txt:        #f4ecdc;
  --txt-dim:    #d8c8a4;
  --serif: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --sans:  "Outfit", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 50% -10%, #241a0e 0%, var(--ink) 55%) ,
    var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HERO ----------
   Layout note: the title block (.brand) sits in normal document flow ABOVE
   the photo, not on top of it. An earlier version overlaid the title on the
   photo with hand-tuned absolute coordinates, and at most window sizes the
   text landed on the subject's face; keeping the text in its own band makes
   that impossible at any width. Only the side label columns and the quote
   button overlay the photo (via .stage-wrap), and they hug the edges. */
.hero{ position:relative; width:100%; }

/* positioning context for the label columns and quote button: its height
   is exactly the photo box's height, so anything absolutely positioned in
   here is pinned to the photo itself */
.stage-wrap{ position:relative; }

.stage{
  position:relative;
  width:100%;
  /* wider than the photo's native 16:9 so the box stays SHORT: together
     with the title band above it, the hero fits a laptop screen with
     little scrolling. The crop trims dark wall and desk, not the person.
     On screens with less height the max-height tightens the crop further
     so header + title band + photo fit the viewport in one screen. */
  aspect-ratio:21/9;
  max-height:calc(100vh - 260px);
  min-height:420px;
  background:var(--ink);
  overflow:hidden;
}
/* real <img> instead of a CSS background-image: mobile Safari/Chrome can
   rasterize a large background-image at reduced resolution when its element
   sits in a GPU-composited layer (.stage does, next to the backdrop-filter
   elements above it) — that's what was reading as blur on phones. An <img>
   goes through the browser's normal image decode/paint path instead. */
.stage-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  /* the wide desktop box crops the 16:9 photo vertically; 36% keeps the
     subject framed with headroom above and the chin clear of the quote
     button below. Mobile overrides this — see the 860px breakpoint. */
  object-fit:cover; object-position:center 36%;
  display:block;
}
/* atmosphere: darken edges + warm vignette so gold pops over photo */
.stage::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(8,6,3,.85) 0%, rgba(8,6,3,.10) 26%, rgba(8,6,3,0) 50%, rgba(8,6,3,.10) 74%, rgba(8,6,3,.85) 100%),
    linear-gradient(180deg, rgba(8,6,3,.78) 0%, rgba(8,6,3,0) 28%, rgba(8,6,3,0) 58%, rgba(8,6,3,.88) 100%);
  pointer-events:none;
}
/* fine grain for texture */
.stage::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- BRAND BLOCK ----------
   A centred band in normal flow between the header and the photo. The page
   background shows through it, and the photo's top vignette fades up into
   the same darkness, so band and photo read as one piece. On desktop the
   logo is positioned against the left edge of the band, outside the title
   stack, so the title, subtitle, and hint stay precisely centred. */
.brand{
  position:relative; text-align:center; width:100%; margin:0 auto;
  padding:clamp(10px,1.8vh,22px) 0 clamp(8px,1.4vh,16px);
  animation:fadeDown .9s ease both;
}
.brand-logo{
  /* The single number that controls how far in from the left edge the logo
     sits: 14px on small desktops, growing with the viewport, capped at 78px
     on very wide screens so it never drifts toward the centred title. */
  position:absolute; left:clamp(14px,4vw,78px); top:50%; transform:translateY(-50%);
  display:block;
  width:clamp(84px,8.5vw,136px); height:auto;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.brand h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.3rem,7.2vw,5.3rem); line-height:.98; letter-spacing:.5px;
  background:linear-gradient(180deg,#fff6da 4%,var(--gold-hi) 26%,var(--gold) 54%,var(--gold-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 30px var(--gold-glow);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:clamp(8px,1.4vh,16px); padding:.5rem 1.25rem;
  border:1px solid var(--gold-line); border-radius:999px;
  background:linear-gradient(180deg,rgba(28,20,10,.55),rgba(12,9,5,.65));
  box-shadow:0 0 0 1px rgba(0,0,0,.3) inset, 0 6px 24px rgba(0,0,0,.45);
  color:var(--gold-hi); font-weight:500; letter-spacing:.6px;
  font-size:clamp(.78rem,1.9vw,1.18rem); backdrop-filter:blur(4px);
}
.pill svg{ width:1.05em; height:1.05em; fill:var(--gold); }
.brand .cta{
  margin-top:clamp(6px,1.2vh,14px); color:var(--txt);
  font-size:clamp(.74rem,1.6vw,1.02rem); letter-spacing:.3px; opacity:.95;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}

/* ---------- LABEL COLUMNS ----------
   Pinned to the photo box (.stage-wrap), hugging its left and right edges;
   the % offsets are fractions of the photo's height, so the columns keep
   their place on the photo at every window size. */
.col{
  position:absolute; top:5%; bottom:12%;
  display:flex; flex-direction:column; justify-content:space-between;
  z-index:5; gap:.4rem;
}
.col-left{  left:clamp(10px,2.4vw,42px);  align-items:flex-start; }
.col-right{ right:clamp(10px,2.4vw,42px); align-items:flex-end;   }

.label{
  position:relative; cursor:pointer; font-family:var(--sans);
  width:clamp(168px,15vw,230px); min-height:clamp(40px,5.2vw,58px);
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem 1rem; border-radius:12px;
  border:1px solid var(--gold-line);
  background:linear-gradient(180deg,rgba(30,21,11,.72),rgba(10,7,4,.82));
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 8px 22px rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.25);
  color:var(--gold-hi); letter-spacing:.7px; font-weight:600;
  font-size:clamp(.66rem,1.18vw,.92rem); text-transform:uppercase;
  backdrop-filter:blur(3px);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  opacity:0; animation:popIn .6s ease forwards;
}
.col-left  .label{ text-align:left;  justify-content:flex-start; }
.col-right .label{ text-align:right; justify-content:flex-end; flex-direction:row-reverse; }

.label .txt{ flex:1; line-height:1.15; }
.label .cur{ width:1.35em; height:1.35em; flex:0 0 auto; fill:var(--gold); filter:drop-shadow(0 0 4px var(--gold-glow)); }

.label:hover, .label:focus-visible{
  transform:translateY(-3px) scale(1.02);
  border-color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(52,37,16,.85),rgba(20,14,7,.9));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 12px 30px rgba(0,0,0,.55), 0 0 26px var(--gold-glow);
  outline:none;
}
.label:active{ transform:translateY(-1px) scale(.99); }

/* connector line toward the center figure (desktop only) */
.label::after{
  content:""; position:absolute; top:50%; height:1px; width:clamp(28px,4vw,80px);
  background:linear-gradient(90deg,var(--gold-line),rgba(216,178,90,0));
  box-shadow:0 0 6px var(--gold-glow);
}
.col-left  .label::after{ left:100%; }
.col-right .label::after{ right:100%; background:linear-gradient(270deg,var(--gold-line),rgba(216,178,90,0)); }
.label::before{ /* node dot at button inner edge */
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}
.col-left  .label::before{ right:-3px; }
.col-right .label::before{ left:-3px; }

/* staggered entrance */
.col-left  .label:nth-child(1){animation-delay:.20s}.col-left  .label:nth-child(2){animation-delay:.28s}
.col-left  .label:nth-child(3){animation-delay:.36s}.col-left  .label:nth-child(4){animation-delay:.44s}
.col-left  .label:nth-child(5){animation-delay:.52s}.col-left  .label:nth-child(6){animation-delay:.60s}
.col-right .label:nth-child(1){animation-delay:.24s}.col-right .label:nth-child(2){animation-delay:.32s}
.col-right .label:nth-child(3){animation-delay:.40s}.col-right .label:nth-child(4){animation-delay:.48s}
.col-right .label:nth-child(5){animation-delay:.56s}.col-right .label:nth-child(6){animation-delay:.64s}

/* ---------- REQUEST A QUOTE CALL-TO-ACTION ----------
   Replaces the old feature bar at the bottom of the hero. Deliberately
   orange — the one element that breaks the gold palette, so it reads as
   THE action to take. The glow pulses gently (disabled for users with
   reduced-motion enabled, via the global rule in the animations section). */
.quote-cta{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:4.5%; z-index:6;
  display:inline-flex; align-items:center; justify-content:center;
  padding:clamp(.8rem,1.1vw,1.2rem) clamp(1.8rem,2.8vw,3.2rem);
  border-radius:999px; text-decoration:none; text-transform:uppercase;
  font-family:var(--sans); font-weight:700; letter-spacing:1.6px;
  font-size:clamp(.9rem,1.25vw,1.3rem); color:#fff; white-space:nowrap;
  background:linear-gradient(180deg,#ff9d45,#f0640a);
  border:1px solid rgba(255,196,130,.8);
  box-shadow:0 0 22px rgba(255,122,26,.55), 0 0 44px rgba(255,122,26,.28), 0 10px 28px rgba(0,0,0,.5);
  text-shadow:0 1px 6px rgba(120,45,0,.6);
  animation:fadeUp 1s ease .3s both, ctaGlow 2.6s ease-in-out 1.3s infinite;
  transition:filter .2s ease;
}
.quote-cta:hover, .quote-cta:focus-visible{ filter:brightness(1.12); outline:none; }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 0 22px rgba(255,122,26,.55), 0 0 44px rgba(255,122,26,.28), 0 10px 28px rgba(0,0,0,.5); }
  50%    { box-shadow:0 0 36px rgba(255,122,26,.9),  0 0 72px rgba(255,122,26,.45), 0 10px 28px rgba(0,0,0,.5); }
}

/* Green variant for the About page's closing section. Unlike the home
   hero's orange .quote-cta it sits in normal flow (the closing card is
   already centred), so it needs no absolute positioning. */
.quote-cta-green{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 2.2rem; border-radius:999px;
  text-decoration:none; text-transform:uppercase;
  font-family:var(--sans); font-weight:700; letter-spacing:1.6px;
  font-size:clamp(.9rem,1.4vw,1.1rem); color:#fff; white-space:nowrap;
  background:linear-gradient(180deg,#4ecb6f,#189a43);
  border:1px solid rgba(170,255,195,.8);
  box-shadow:0 0 22px rgba(40,190,90,.55), 0 0 44px rgba(40,190,90,.28), 0 10px 28px rgba(0,0,0,.5);
  text-shadow:0 1px 6px rgba(0,80,30,.6);
  animation:ctaGlowGreen 2.6s ease-in-out infinite;
  transition:filter .2s ease;
}
.quote-cta-green:hover, .quote-cta-green:focus-visible{ filter:brightness(1.12); outline:none; }
@keyframes ctaGlowGreen{
  0%,100%{ box-shadow:0 0 22px rgba(40,190,90,.55), 0 0 44px rgba(40,190,90,.28), 0 10px 28px rgba(0,0,0,.5); }
  50%    { box-shadow:0 0 36px rgba(40,190,90,.9),  0 0 72px rgba(40,190,90,.45), 0 10px 28px rgba(0,0,0,.5); }
}

/* ---------- MODAL ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:radial-gradient(900px 600px at 50% 30%, rgba(40,28,12,.55), rgba(4,3,1,.86));
  backdrop-filter:blur(6px);
}
.overlay.open{ display:flex; animation:fadeIn .25s ease; }
.modal{
  width:min(540px,100%); border-radius:20px; position:relative;
  border:1px solid var(--gold-line);
  background:linear-gradient(180deg,var(--panel-2),rgba(10,7,4,.95));
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 30px 80px rgba(0,0,0,.7), 0 0 40px var(--gold-glow);
  padding:clamp(20px,4vw,32px); animation:popIn .3s ease both;
}
.modal .x{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--gold-line); background:rgba(0,0,0,.4); color:var(--gold-hi);
  font-size:1.1rem; cursor:pointer; line-height:1; transition:.2s;
}
.modal .x:hover{ background:var(--gold); color:#1a1206; transform:rotate(90deg); }
.modal .eyebrow{ color:var(--gold); letter-spacing:2px; font-size:.7rem; text-transform:uppercase; }
.modal h2{ font-family:var(--serif); font-weight:600; color:var(--gold-hi); font-size:clamp(1.4rem,4vw,2rem); margin:.25rem 0 .15rem; line-height:1.1; }
.modal p.sub{ color:var(--txt-dim); font-size:.92rem; margin-bottom:1.25rem; }

.lang-card{
  border:1px solid rgba(216,178,90,.32); border-radius:14px; padding:1rem 1.1rem;
  background:linear-gradient(180deg,rgba(30,21,11,.6),rgba(12,9,5,.6));
  margin-bottom:.85rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.lang-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.5em; padding:.3em .5em; border-radius:7px;
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.6px;
  color:#1a1206; line-height:1;
}
.lang-card.en .lang-badge{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }
.lang-card.ar .lang-badge{ background:linear-gradient(180deg,#e7d6ab,var(--gold-deep)); }
.lang-card .name{ font-weight:600; color:var(--gold-hi); letter-spacing:.5px; flex:1; min-width:90px; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  border-radius:10px; padding:.6rem .95rem; font-family:var(--sans); font-weight:600;
  font-size:.85rem; letter-spacing:.4px; transition:.2s; white-space:nowrap; border:1px solid transparent;
}
.btn svg{ width:1.05em; height:1.05em; fill:currentColor; }
.btn-play{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#241606; box-shadow:0 4px 14px var(--gold-glow); }
.btn-play:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-play.playing{ background:linear-gradient(180deg,#f0d9a0,var(--gold-deep)); color:#1a1206; }
.btn-dl{ background:rgba(0,0,0,.35); color:var(--gold-hi); border-color:var(--gold-line); text-decoration:none; }
.btn-dl:hover{ background:var(--gold); color:#241606; border-color:var(--gold); transform:translateY(-1px); }

.nowplaying{
  margin-top:.4rem; font-size:.8rem; color:var(--txt-dim);
  display:flex; align-items:center; gap:.5rem; min-height:1.1rem;
}
/* seekable progress bar — native range input styled to match the gold theme */
.seek{
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:4px; background:rgba(216,178,90,.18);
  outline:none; cursor:pointer;
}
.seek:disabled{ cursor:default; opacity:.6; }
.seek::-webkit-slider-runnable-track{ height:4px; border-radius:4px; background:transparent; }
.seek::-moz-range-track{ height:4px; border-radius:4px; background:rgba(216,178,90,.18); }
.seek::-moz-range-progress{ height:4px; border-radius:4px; background:linear-gradient(90deg,var(--gold),var(--gold-hi)); }
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-4.5px; border-radius:50%;
  background:var(--gold-hi); box-shadow:0 0 0 3px rgba(0,0,0,.4), 0 0 8px var(--gold-glow);
}
.seek::-moz-range-thumb{
  width:13px; height:13px; border:none; border-radius:50%;
  background:var(--gold-hi); box-shadow:0 0 0 3px rgba(0,0,0,.4), 0 0 8px var(--gold-glow);
}

/* ---------- SITE HEADER (shared across all pages) ----------
   A normal-height header row at the top of every page: logo on the left,
   nav links on the right. Add a link in every page's <nav class="site-nav">
   when a new page goes live; mark the current page's link with
   class="active". Below 920px the links hide behind the hamburger button
   (.nav-toggle) and drop down as a stacked column when it is tapped —
   the few lines of toggle logic live at the top of assets/js/main.js. */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.55rem clamp(14px,2.4vw,32px);
  background:linear-gradient(180deg,#171008,#0e0b06);
  border-bottom:1px solid var(--gold-line);
  position:relative; z-index:10;
}
.site-logo{ display:block; flex:0 0 auto; }
.site-logo img{
  display:block; height:46px; width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.site-nav{
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:clamp(.4rem,.8vw,.7rem);
}
/* hamburger button — hidden on desktop, shown by the 920px media query.
   The word "MENU" sits beside the three-line icon so it is obvious at a
   glance; it is real text, so screen readers announce it too. */
.nav-toggle{
  display:none; align-items:center; justify-content:center; gap:.55rem;
  height:44px; padding:0 .85rem 0 1rem; border-radius:12px; cursor:pointer;
  border:1px solid var(--gold-line); color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(30,21,11,.72),rgba(10,7,4,.82));
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  letter-spacing:1.2px; text-transform:uppercase;
  transition:.2s;
}
.nav-toggle svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.nav-toggle:hover, .nav-toggle:focus-visible{ border-color:var(--gold-hi); outline:none; }
/* every tab is a visible gold-bordered pill (not just on hover), matching
   the label chips elsewhere on the page */
.site-nav a{
  color:var(--gold-hi); text-decoration:none; text-transform:uppercase;
  font-weight:600; letter-spacing:1.2px; font-size:clamp(.7rem,1vw,.88rem);
  padding:.5rem 1.05rem; border-radius:999px;
  border:1px solid var(--gold-line);
  background:linear-gradient(180deg,rgba(30,21,11,.72),rgba(10,7,4,.82));
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 6px 18px rgba(0,0,0,.45);
  transition:.2s; text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.site-nav a:hover, .site-nav a:focus-visible{
  border-color:var(--gold-hi); transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(52,37,16,.85),rgba(20,14,7,.9));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 10px 26px rgba(0,0,0,.55), 0 0 22px var(--gold-glow);
  outline:none;
}
/* current page: solid gold fill so it clearly stands apart */
.site-nav a.active{
  border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  color:#241606; text-shadow:none;
  box-shadow:0 4px 16px var(--gold-glow);
}
/* small screens: hide the link row behind the hamburger; tapping it drops
   the links down as a full-width stacked column under the logo row */
@media (max-width:920px){
  .nav-toggle{ display:flex; }
  .site-nav{ display:none; flex-basis:100%; flex-direction:column; align-items:stretch; padding:.4rem 0 .3rem; }
  .site-nav.open{ display:flex; }
  .site-nav a{ text-align:center; }
  .site-header{ flex-wrap:wrap; }
}

/* ---------- ABOUT PAGE ---------- */
.about-main{ width:min(94%,1060px); margin:0 auto; padding:clamp(28px,5vh,64px) 0 clamp(40px,7vh,90px); }

/* intro */
.about-intro{ text-align:center; margin-bottom:clamp(36px,6vh,72px); }
.about-intro h1{
  font-family:var(--serif); font-weight:700; line-height:1.08;
  font-size:clamp(1.7rem,4.6vw,3.1rem); letter-spacing:.5px;
  background:linear-gradient(180deg,#fff6da 4%,var(--gold-hi) 26%,var(--gold) 54%,var(--gold-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
  margin-bottom:1rem;
}
.about-intro p{ color:var(--txt-dim); max-width:760px; margin:0 auto .8rem; line-height:1.65; font-size:clamp(.92rem,1.6vw,1.05rem); }

/* section headings (Cinzel + gold, smaller than the intro title) */
.about-eyebrow{ color:var(--gold); letter-spacing:2.5px; font-size:.72rem; text-transform:uppercase; font-weight:600; margin-bottom:.35rem; }
.about-h2{
  font-family:var(--serif); font-weight:600; color:var(--gold-hi);
  font-size:clamp(1.35rem,3vw,2rem); line-height:1.15; margin-bottom:.9rem;
}

/* founder bios: photo + text side by side, photo side alternates.
   The photo column is roughly half its original 340px width (client
   request) and centres vertically against the text block. */
.bio{
  display:grid; grid-template-columns:minmax(140px,180px) 1fr;
  gap:clamp(20px,3.5vw,48px); align-items:center;
  margin-bottom:clamp(36px,6vh,72px);
}
.bio.flip{ grid-template-columns:1fr minmax(140px,180px); }
.bio.flip .bio-photo{ order:2; }
.bio-photo img{
  display:block; width:100%; height:auto; border-radius:18px;
  border:1px solid var(--gold-line);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 16px 40px rgba(0,0,0,.5), 0 0 26px var(--gold-glow);
}
/* the founders' names get a larger, more prominent treatment than the
   generic eyebrow used elsewhere */
.bio .about-eyebrow{ font-size:clamp(1rem,1.8vw,1.35rem); letter-spacing:2px; }
.bio-text p{ color:var(--txt-dim); line-height:1.65; margin-bottom:.8rem; font-size:clamp(1rem,1.7vw,1.13rem); }
.bio-text .focus{
  display:inline-block; margin-top:.2rem; padding:.55rem .95rem;
  border:1px solid var(--gold-line); border-radius:10px;
  background:linear-gradient(180deg,rgba(30,21,11,.6),rgba(12,9,5,.6));
  color:var(--gold-hi); font-size:.85rem; letter-spacing:.4px; line-height:1.5;
}
.bio-text .focus strong{ color:var(--gold); }

/* team / global voices */
.team{ text-align:center; margin-bottom:clamp(36px,6vh,72px); }
.team img{
  /* capped at the same 720px measure as the paragraph below it, so the
     photo and text read as one column instead of a full-bleed banner */
  display:block; width:100%; max-width:720px; height:auto;
  border-radius:18px; margin:0 auto 1.4rem;
  border:1px solid var(--gold-line);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 16px 40px rgba(0,0,0,.5), 0 0 26px var(--gold-glow);
}
.team p{ color:var(--txt-dim); max-width:720px; margin:0 auto 1.3rem; line-height:1.65; font-size:clamp(.92rem,1.6vw,1.05rem); }

/* gold call-to-action buttons (shared look with the popup's Play button) */
.btn-cta{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  border:1px solid transparent; border-radius:12px; padding:.85rem 1.5rem;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.5px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#241606;
  box-shadow:0 4px 18px var(--gold-glow); transition:.2s;
}
.btn-cta svg{ width:1.1em; height:1.1em; fill:currentColor; }
.btn-cta:hover:not(:disabled){ filter:brightness(1.08); transform:translateY(-1px); }
.btn-cta:disabled{ opacity:.55; cursor:default; }

/* why AOVO: three feature cards */
.why{ margin-bottom:clamp(36px,6vh,72px); text-align:center; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,22px); margin-top:1.2rem; text-align:left; }
.why-card{
  border:1px solid var(--gold-line); border-radius:16px; padding:1.2rem 1.25rem;
  background:linear-gradient(180deg,rgba(16,11,6,.78),rgba(8,6,3,.86));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 12px 34px rgba(0,0,0,.45);
}
.why-card h3{ font-family:var(--serif); font-weight:600; color:var(--gold-hi); font-size:1.05rem; margin-bottom:.5rem; }
.why-card p{ color:var(--txt-dim); line-height:1.6; font-size:.9rem; }

/* closing call-to-action */
.closing{
  text-align:center; padding:clamp(26px,4.5vh,48px) clamp(18px,3vw,40px);
  border:1px solid var(--gold-line); border-radius:20px;
  background:linear-gradient(180deg,rgba(24,17,9,.8),rgba(10,7,4,.9));
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 16px 44px rgba(0,0,0,.5), 0 0 30px var(--gold-glow);
}
.closing p{ color:var(--txt-dim); max-width:640px; margin:0 auto 1.3rem; line-height:1.65; font-size:clamp(.92rem,1.6vw,1.05rem); }
.closing .note{ font-size:.78rem; opacity:.75; margin:.8rem auto 0; }

/* Desktop only: fully justify the About page's running text so paragraphs
   don't trail off into 1–4 word orphan lines. text-wrap:pretty additionally
   lets newer browsers rebalance breaks to avoid a short last line entirely.
   The narrow mobile column (≤720px) already wraps evenly, so it keeps the
   default alignment. The closing "Ready to Be Heard?" card is excluded:
   its short description stays centred like the rest of that card. */
@media (min-width:721px){
  .about-intro p, .bio-text p, .team p, .why-card p{
    text-align:justify; text-wrap:pretty;
  }
}

/* about page on phones */
@media (max-width:720px){
  .bio, .bio.flip{ grid-template-columns:1fr; }
  .bio.flip .bio-photo{ order:0; }
  .bio-photo{ max-width:200px; margin:0 auto; }
  .why-grid{ grid-template-columns:1fr; }
}

/* ---------- AUDIO SERVICES PAGE ----------
   Eight square-icon cards keep the technical services easy to scan without
   relying on round bullet points. The icons are inline SVGs in the page, so
   this section needs no icon library, extra image requests, or dependency. */
.audio-main{ width:min(94%,1120px); margin:0 auto; padding:clamp(32px,6vh,76px) 0 clamp(48px,8vh,96px); }
.audio-intro{ text-align:center; max-width:780px; margin:0 auto clamp(30px,5vh,58px); }
.audio-kicker{
  color:var(--gold); font-size:.72rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:.7rem;
}
.audio-intro h1{
  font-family:var(--serif); font-weight:700; line-height:1.08;
  font-size:clamp(1.8rem,5vw,3.5rem); letter-spacing:.6px;
  background:linear-gradient(180deg,#fff6da 4%,var(--gold-hi) 26%,var(--gold) 54%,var(--gold-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)); margin-bottom:.9rem;
}
.audio-tagline{ color:var(--gold-hi); font-family:var(--serif); font-size:clamp(1rem,2.1vw,1.3rem); line-height:1.45; margin-bottom:.8rem; }
.audio-lede{ color:var(--txt-dim); line-height:1.65; font-size:clamp(.92rem,1.6vw,1.06rem); }
.audio-services-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,24px); }
.audio-service-card{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  padding:clamp(18px,2.4vw,28px); border:1px solid var(--gold-line); border-radius:16px;
  background:linear-gradient(145deg,rgba(28,20,10,.86),rgba(10,7,4,.94));
  box-shadow:0 0 0 1px rgba(0,0,0,.38) inset, 0 12px 34px rgba(0,0,0,.4);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.audio-service-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 0 0 1px rgba(0,0,0,.38) inset, 0 16px 38px rgba(0,0,0,.48), 0 0 20px var(--gold-glow); }
.audio-icon{
  width:48px; height:48px; flex:0 0 48px; border:1px solid var(--gold-line); border-radius:11px;
  display:grid; place-items:center; color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(74,53,21,.45),rgba(22,15,7,.7));
  box-shadow:0 0 14px rgba(216,178,90,.12) inset;
}
.audio-icon svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.audio-icon .audio-fill{ fill:currentColor; stroke:none; }
.audio-service-card h2{ color:var(--gold-hi); font-family:var(--serif); font-weight:600; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.3; margin:.1rem 0 .45rem; }
.audio-service-card p{ color:var(--txt-dim); font-size:.94rem; line-height:1.58; }
.audio-service-demo{
  grid-column:2; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-top:-.15rem; padding-top:.8rem; border-top:1px solid rgba(216,178,90,.2);
}
.audio-service-demo-label{ color:var(--gold); font-size:.74rem; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; }
.audio-service-demo .btn{ padding:.5rem .75rem; font-size:.78rem; }
.audio-service-demo .nowplaying{ flex:1 1 100%; margin-top:0; }
.audio-service-demo audio{ display:none; }
.audio-cta{
  margin-top:clamp(32px,6vh,72px); text-align:center; padding:clamp(28px,5vw,52px) clamp(20px,5vw,64px);
  border:1px solid var(--gold-line); border-radius:20px;
  background:radial-gradient(500px 180px at 50% 0%,rgba(154,111,39,.28),transparent 70%),linear-gradient(180deg,rgba(31,22,11,.92),rgba(10,7,4,.96));
  box-shadow:0 0 0 1px rgba(0,0,0,.42) inset, 0 18px 44px rgba(0,0,0,.5), 0 0 30px var(--gold-glow);
}
.audio-cta h2{ font-family:var(--serif); color:var(--gold-hi); font-size:clamp(1.35rem,3vw,2rem); margin-bottom:.7rem; }
.audio-cta p{ max-width:710px; margin:0 auto 1.35rem; color:var(--txt-dim); line-height:1.65; font-size:clamp(.92rem,1.6vw,1.05rem); }
.audio-cta .btn-cta{ text-decoration:none; }
.sample-restore-form{ max-height:calc(100vh - 36px); overflow:auto; }
.sample-restore-form .contact-field{ margin-top:.9rem; }
.sample-restore-form .contact-field input[type="file"]{ padding:.58rem .7rem; font-size:.84rem; }
.sample-restore-form textarea{ min-height:112px; }
.sample-restore-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.2rem; }
.sample-restore-actions .form-status{ flex:1 1 100%; }

@media (max-width:720px){
  .audio-services-grid{ grid-template-columns:1fr; }
  .audio-service-demo{ grid-column:1 / -1; margin-top:.15rem; }
}

/* ---------- CONTACT / ORDER PAGE ----------
   The visual form uses the same gold-edged cards as the secondary pages.
   Native inputs retain their browser validation for reliable, dependency-free
   required-field and email checks; the page script adds the conditional
   "Other" category field and holds submission until delivery is configured. */
.contact-main{ width:min(94%,920px); margin:0 auto; padding:clamp(32px,6vh,76px) 0 clamp(48px,8vh,96px); }
.contact-intro{ text-align:center; max-width:720px; margin:0 auto clamp(28px,4.5vh,52px); }
.contact-intro h1{
  font-family:var(--serif); font-weight:700; line-height:1.08;
  font-size:clamp(1.8rem,5vw,3.35rem); letter-spacing:.6px;
  background:linear-gradient(180deg,#fff6da 4%,var(--gold-hi) 26%,var(--gold) 54%,var(--gold-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)); margin-bottom:.85rem;
}
.contact-intro p{ color:var(--txt-dim); line-height:1.65; font-size:clamp(.92rem,1.6vw,1.05rem); }
/* direct email line under the intro — gold link, wraps cleanly on phones */
.contact-intro .contact-email{ margin-top:.9rem; }
.contact-email a{
  color:var(--gold-hi); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--gold-line); overflow-wrap:anywhere; transition:.2s;
}
.contact-email a:hover, .contact-email a:focus-visible{ color:#fff6da; border-color:var(--gold-hi); outline:none; }
.contact-form{
  padding:clamp(22px,4vw,44px); border:1px solid var(--gold-line); border-radius:20px;
  background:linear-gradient(180deg,rgba(24,17,9,.88),rgba(10,7,4,.95));
  box-shadow:0 0 0 1px rgba(0,0,0,.42) inset, 0 18px 46px rgba(0,0,0,.5), 0 0 26px rgba(216,178,90,.1);
}
.contact-form-header{ display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.7rem; }
.contact-form-header svg{ width:30px; height:30px; flex:0 0 auto; fill:var(--gold); filter:drop-shadow(0 0 7px var(--gold-glow)); }
.contact-form-header h2{ font-family:var(--serif); color:var(--gold-hi); font-size:clamp(1.2rem,2.2vw,1.5rem); margin:.1rem 0 .3rem; }
.contact-form-header p{ color:var(--txt-dim); line-height:1.5; font-size:.9rem; }
.contact-field-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.15rem; }
.contact-field{ display:flex; flex-direction:column; gap:.45rem; }
.contact-field.full{ grid-column:1 / -1; }
/* The browser's built-in rule for [hidden] is display:none, but the
   .contact-field rule above comes from our own stylesheet and therefore wins.
   Without this line the conditional "Other Project Type" field stays on
   screen (greyed out) even while the script has it marked hidden. */
.contact-field[hidden]{ display:none; }
.contact-field label, .contact-field legend{ color:var(--gold-hi); font-size:.82rem; font-weight:600; letter-spacing:.45px; }
.contact-field .optional{ color:var(--txt-dim); font-weight:400; }
.contact-field input, .contact-field select, .contact-field textarea{
  width:100%; min-height:46px; border:1px solid rgba(216,178,90,.42); border-radius:9px;
  padding:.75rem .85rem; color:var(--txt); background:rgba(7,5,3,.62);
  font:400 .96rem var(--sans); line-height:1.4; box-shadow:0 0 0 1px rgba(0,0,0,.32) inset;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-field textarea{ min-height:142px; resize:vertical; }
.contact-field select{ appearance:auto; }
.contact-field input::placeholder, .contact-field textarea::placeholder{ color:#a89878; opacity:1; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{
  outline:none; border-color:var(--gold-hi); background:rgba(20,14,7,.75);
  box-shadow:0 0 0 3px rgba(216,178,90,.16), 0 0 0 1px rgba(0,0,0,.32) inset;
}
.contact-field input:focus:invalid, .contact-field select:focus:invalid{ border-color:#df9a78; }
.contact-deadline{ margin-top:1.45rem; }
.contact-submit-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.5rem; }
.contact-submit-row .btn-cta{ text-decoration:none; }
.contact-submit-row .btn-cta svg{ fill:currentColor; }
.contact-required-note{ color:var(--txt-dim); font-size:.8rem; }
.form-status{ flex:1 1 100%; min-height:1.4em; color:var(--gold-hi); font-size:.9rem; line-height:1.5; }
.form-status.form-notice{ padding:.8rem .95rem; border:1px solid var(--gold-line); border-radius:9px; background:rgba(83,60,20,.25); }
.form-status.is-error{ color:#f0b89c; border-color:rgba(223,154,120,.55); }
/* Spam-trap field: moved off-screen rather than display:none, which some bots skip */
.form-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:640px){
  .contact-field-grid{ grid-template-columns:1fr; }
  .contact-submit-row{ align-items:stretch; }
  .contact-submit-row .btn-cta{ justify-content:center; }
}

/* ---------- FEEDBACK PAGE — testimonial slider ----------
   Pure CSS/JS carousel (no libraries): the track is a flex row of
   full-width slides, moved with translateX by the small script at the
   bottom of feedback.html. Auto-cycles; pauses on hover/keyboard focus. */
.feedback-main{ width:min(94%,900px); margin:0 auto; padding:clamp(28px,5vh,64px) 0 clamp(40px,7vh,90px); }
.feedback-intro{ text-align:center; margin-bottom:clamp(28px,4.5vh,52px); }
.feedback-intro h1{
  font-family:var(--serif); font-weight:700; line-height:1.08;
  font-size:clamp(1.7rem,4.6vw,3.1rem); letter-spacing:.5px;
  background:linear-gradient(180deg,#fff6da 4%,var(--gold-hi) 26%,var(--gold) 54%,var(--gold-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
  margin-bottom:.8rem;
}
.feedback-intro p{ color:var(--txt-dim); max-width:640px; margin:0 auto; line-height:1.65; font-size:clamp(.92rem,1.6vw,1.05rem); }

.slider{ position:relative; }
.slider-window{ overflow:hidden; border-radius:20px; }
.slider-track{ display:flex; transition:transform .6s ease; }
.review-slide{ flex:0 0 100%; min-width:100%; padding:6px; display:flex; }

.review-card{
  position:relative; width:100%; text-align:center;
  padding:clamp(28px,5vh,52px) clamp(20px,5vw,64px) clamp(24px,4vh,40px);
  border:1px solid var(--gold-line); border-radius:20px;
  background:linear-gradient(180deg,var(--panel-2),rgba(10,7,4,.95));
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 20px 50px rgba(0,0,0,.55), 0 0 34px var(--gold-glow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* oversized decorative opening quote behind the card content */
.review-card::before{
  content:"\201C"; position:absolute; top:-.05em; left:.15em;
  font-family:var(--serif); font-size:clamp(5rem,12vw,8rem); line-height:1;
  color:var(--gold); opacity:.14; pointer-events:none;
}
.review-card .stars{ display:flex; gap:.3rem; margin-bottom:1.1rem; }
.review-card .stars svg{ width:clamp(18px,2.4vw,24px); height:clamp(18px,2.4vw,24px); fill:var(--gold); filter:drop-shadow(0 0 6px var(--gold-glow)); }
.review-card blockquote{
  color:var(--txt); line-height:1.7; font-weight:300;
  font-size:clamp(.94rem,1.7vw,1.12rem); max-width:660px; margin:0 0 1.2rem;
}
.review-card figcaption{
  color:var(--gold-hi); font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; font-size:.74rem;
}
.review-card figcaption::before{
  content:""; display:block; width:44px; height:1px; margin:0 auto .7rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* prev / next arrows — echo the popup's circular close button */
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid var(--gold-line); background:rgba(0,0,0,.45); color:var(--gold-hi);
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.slider-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.slider-arrow:hover, .slider-arrow:focus-visible{ background:var(--gold); color:#1a1206; border-color:var(--gold); outline:none; }
.slider-arrow.prev{ left:-21px; }
.slider-arrow.next{ right:-21px; }

/* progress dots */
.slider-dots{ display:flex; justify-content:center; gap:.55rem; margin-top:1.2rem; }
.slider-dots button{
  width:9px; height:9px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid var(--gold-line); background:transparent; transition:.2s;
}
.slider-dots button.active{ background:var(--gold); box-shadow:0 0 8px var(--gold-glow); }

/* centred quote button under the slider (shares .quote-cta-green) */
.feedback-cta{ text-align:center; margin-top:clamp(28px,4.5vh,52px); }

@media (max-width:720px){
  .slider-arrow.prev{ left:6px; }
  .slider-arrow.next{ right:6px; }
  .review-card{ padding-left:56px; padding-right:56px; }
}

/* ---------- ANIMATIONS ---------- */
@keyframes popIn{ from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }
@keyframes fadeDown{ from{opacity:0; transform:translateY(-14px)} to{opacity:1; transform:none} }
@keyframes fadeUp{ from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---------- RESPONSIVE / MOBILE ----------
   The page order (title band, then photo, then labels, then quote button)
   is the same as on desktop, so this block only swaps the photo crop, drops
   the label columns below the photo as a grid, and turns off the effects
   that blurred the photo on phones (see the note further down). */
@media (max-width:860px){
  .hero{ background:linear-gradient(180deg,#171008,#0c0a07); width:100%; overflow:hidden; }
  /* the labels and quote button leave the photo and join the normal flow,
     so their container stacks its children instead of pinning them */
  .stage-wrap{ display:flex; flex-direction:column; }
  /* moderate crop (see the tighter override below for narrow phones).
     Inside this breakpoint the <picture> in index.html serves
     hero-2-mobile.jpg — a 1600x1360 portrait crop of the same photo,
     matching this box's 4/3.4 shape. It is sized at/below the ~1600px cap
     of Hostinger's CDN image optimizer, so the CDN passes it through
     untouched instead of shrinking it (shrink-then-stretch is what made
     the photo look blurry on phones). */
  /* the height caps are a desktop fit-the-viewport measure; the stacked
     phone layout scrolls naturally, so the crop ratio alone rules here */
  .stage{ aspect-ratio:4/3.4; max-height:none; min-height:0; }
  .stage-photo{ object-position:center 20%; }

  /* ---- THE MOBILE BLUR FIX ----------------------------------------------
     This is what actually caused the photo to look soft on Android phones
     while looking perfectly sharp on desktop Chrome. It was never the image
     file or its resolution — the source is 2688x1520, which is more pixels
     than any phone in this breakpoint asks for.

     The cause is GPU compositing. Two things forced the hero photo to be
     drawn into an offscreen GPU texture:

       1. .stage::after painted a noise texture over the whole photo with
          mix-blend-mode:overlay. Blending forces the browser to render the
          photo and the overlay into a shared offscreen buffer.
       2. .pill, .features and all 12 .label chips sit on top of the photo
          with backdrop-filter:blur(). Each one makes the browser snapshot
          the photo behind it so it can be blurred.

     Desktop Chrome allocates those buffers at full device resolution, so it
     looks correct — which is why testing on desktop never reproduced it.
     Android Chrome is far more conservative with GPU memory and commonly
     rasterizes these buffers at around 1x instead of the phone's real 2.6x-3.5x
     pixel ratio, then stretches the result back up to fill the screen. That
     upscaling of an under-sampled texture is the blur, and it hits the photo
     even though the photo itself is plenty sharp.

     Turning both effects off inside this breakpoint lets the photo take the
     browser's normal image path, where it is decoded and painted at the
     screen's true pixel density. Desktop is untouched, so the approved
     design is unchanged there. On mobile the only visible difference is a
     very subtle loss of grain and of the frosted blur behind the chips —
     the chips keep their own translucent background, so they stay readable. */
  .stage::after{ display:none; }
  .pill, .label{ backdrop-filter:none; }
  .brand{ width:100%; padding:16px 18px 12px; animation:none; }
  /* The large hero logo is intentionally desktop-only; the header logo stays. */
  .brand-logo{ display:none; }
  .col{ position:static; width:100%; padding:0 16px; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
  .col-left{ margin-top:14px; }
  .col-right{ margin-bottom:8px; }
  .label{ width:auto; animation:none; opacity:1; justify-content:center!important; text-align:center!important; flex-direction:row!important; }
  .col-right .label{ flex-direction:row!important; }
  .label::after, .label::before{ display:none; }
  /* the quote button joins the stacked flow under the label columns;
     the fadeUp entrance is dropped here because its keyframes assume the
     desktop translateX(-50%) centring */
  .quote-cta{
    position:static; transform:none; align-self:center;
    margin:18px 0 24px; animation:ctaGlow 2.6s ease-in-out infinite;
  }
}
@media (max-width:600px){
  /* narrower phones have far fewer physical pixels to fill, so the taller,
     more dramatic portrait crop stays sharp here even at 3x DPR (the
     1600x1360 mobile image comfortably covers this box on any phone) */
  .stage{ aspect-ratio:3/3.4; }
  .stage-photo{ object-position:center 22%; }
}
@media (max-width:420px){
  .col{ grid-template-columns:1fr; }
}