/* ==========================================================================
   AMBRA Live Productions — public homepage
   Placeholder-safe clone of ambraliveproductions.com: real colors/fonts
   approximated from the AMBRA brand already used elsewhere in this repo
   (gig-it.html, login.css) until real screenshots/assets arrive. Every
   photo slot is a labeled placeholder block, swappable later without
   touching layout.
   ========================================================================== */
:root{
  --ink:#141414;
  --bg:#FFFFFF;
  --surface:#FAF8F5;
  --line:#ECE4D8;
  --orange:#F2711C;
  --orange-dark:#C65A14;
  --orange-soft:#FDE8D8;
  --muted:#6B6358;
  --faint:#A39A8A;
  --font-display:'Fraunces',serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius:16px;
  --wrap:1180px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
/* Scales the whole homepage up ~20%, same trick already used for the admin
   panel (body.app in login.css) — zoom doesn't touch vh units, so the hero's
   100vh is compensated separately below. Off on narrow viewports, same as
   the admin panel, so it doesn't eat into already-tight phone width. */
body.home{ zoom:1.2; }
@media (max-width:930px){
  body.home{ zoom:1; }
}
/* The header must look identical on every page. body.home's zoom above
   covers the whole homepage (nav included); every other page has no body
   zoom, so its nav would render ~17% smaller than home's without its own
   matching zoom here — and since zoom compounds on nested elements, home's
   nav needs its own zoom reset back to 1 so it isn't zoomed twice. */
.site-nav{ zoom:1.2; }
body.home .site-nav{ zoom:1; }
@media (max-width:930px){
  .site-nav{ zoom:1; }
  body.home .site-nav{ zoom:1; }
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.container-wide{ max-width:1700px; }

/* ---------- Placeholder photo blocks ---------- */
.ph{
  position:relative; background:linear-gradient(135deg,var(--surface) 0%,#F0E7DA 100%);
  border:1px dashed var(--faint); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--faint);
}
.ph::before{ content:'🖼'; font-size:22px; opacity:.55; display:block; margin-bottom:6px; }
.ph-label{
  position:absolute; bottom:10px; left:10px; right:10px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint); text-align:center;
}
.ph-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px; }

/* ---------- Nav ----------
   Every page's header must look identical, so the base look IS the solid
   orange bar — the home page's hero nav (below) only adds a transparent
   intro state before you scroll past the video, then fades into this exact
   same look. */
.site-nav{
  position:sticky; top:0; z-index:200; background:#F36C3B; box-shadow:0 4px 20px rgba(0,0,0,.18);
}
.site-nav .container{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
  /* The nav reaches closer to the true edges of the window than the
     1180px-capped content sections below it — brand and Inquire sit near
     the actual screen edges, not just the edges of the centered column. */
  max-width:none; padding-left:40px; padding-right:40px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-brand img{ height:48px; width:auto; filter:brightness(0) invert(1); }
/* Centered in the bar regardless of how wide the logo or the right-side
   group are, rather than just filling the space between them. */
.nav-links{
  display:flex; align-items:center; gap:34px;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.nav-links a{ font-size:13.5px; font-weight:600; color:#fff; transition:.15s; }
.nav-links a:hover{ color:#2B1206; }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{
  background:#fff; color:#F36C3B !important; padding:10px 22px; border-radius:0;
  font-size:13px; font-weight:700;
}
.nav-cta:hover{ background:#FFE8DC; }
.nav-login{
  font-size:13px; font-weight:700; color:#fff; background:transparent;
  border:1.5px solid #fff; border-radius:0; padding:9px 20px; transition:.15s;
}
.nav-login:hover{ background:#fff; color:#2B1206; }
.nav-toggle{ display:none; background:none; border:none; font-size:22px; cursor:pointer; color:#fff; }

/* Hero nav (home only): starts transparent over the video before any
   scroll, then fades into the exact same solid-orange look every other
   page's header already has — toggled by .scrolled in index.html's JS. */
.site-nav.nav-hero{
  position:fixed; top:0; left:0; right:0; background:transparent; box-shadow:none;
  transition:background .3s ease, box-shadow .3s ease;
}
.site-nav.nav-hero.scrolled{ background:#F36C3B; box-shadow:0 4px 20px rgba(0,0,0,.18); }
/* The mobile dropdown still opens on a solid white panel, so its links go
   back to dark text regardless of scroll state. */
.site-nav.nav-hero .nav-links.open{ background:#fff; }
.site-nav.nav-hero .nav-links.open a:not(.nav-cta){ color:var(--ink); }

/* ---------- Hero ---------- */
.hero{ padding:74px 0 60px; }
.hero .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin:0 0 16px;
}
.hero h1{
  font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4.6vw,58px); line-height:1.06;
  letter-spacing:-.01em; margin:0 0 20px;
}
.hero p.lede{ font-size:16.5px; color:#fff; line-height:1.65; max-width:820px; margin:0 auto 30px; }
.hero-subtitle{ font-family:var(--font-display); font-weight:500; font-size:20px; margin:0 0 28px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:13px 26px; border-radius:0;
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s; border:1px solid transparent;
}
.btn-solid{ background:var(--orange); color:#fff; }
.btn-solid:hover{ background:var(--orange-dark); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- Hero video (homepage only) ---------- */
.hero-video{
  position:relative; min-height:calc(100vh / 1.2); padding:0; display:flex; align-items:center;
  overflow:hidden; background:linear-gradient(160deg,#2B1206,#1A0C04);
}
@media (max-width:930px){
  .hero-video{ min-height:100vh; }
}
.hero-video .container{ display:block; }
.hero-video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,10,5,.5) 0%, rgba(20,10,5,.7) 100%);
}
.hero-content{ position:relative; z-index:2; text-align:center; max-width:1160px; margin:0 auto; padding:120px 20px 0; }
.hero-content .eyebrow{ color:#fff; font-weight:400; }
.eyebrow-roboto{ font-family:'Roboto',sans-serif; }
.hero-content h1{ color:var(--orange); font-style:italic; font-weight:500; font-size:clamp(32px,5.4vw,76px); }
.hero-content .hero-subtitle{ color:#F1ECE0; font-size:clamp(18px,2vw,26px); }
.hero-content .btn-row{ justify-content:center; margin-bottom:28px; }
.btn-outline-light{ color:#fff; border-color:#fff; }
.btn-outline-light:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- Stats ---------- */
.stats{ background:#161F1A; color:#fff; padding:60px 0; }
.stats-numbers{ background:#0b3625; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stat-num{ font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4vw,46px); color:var(--orange); }
.stat-label{ font-size:14px; color:#fff; margin-top:10px; letter-spacing:.02em; }

/* ---------- Section scaffolding ---------- */
.section{ padding:84px 0; }
.section-head{ max-width:640px; margin:0 auto 44px; text-align:center; }
.section-head.left{ margin:0 0 40px; text-align:left; }
.section-tag{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); margin:0 0 12px;
}
.section-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.4vw,38px); margin:0 0 14px; letter-spacing:-.01em; }
.section-head p{ color:var(--muted); font-size:15px; line-height:1.6; }

/* Inquire page — "Let's Talk" copy beside the Calendly widget. */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; max-width:1300px; margin:0 auto 50px; }

/* ---------- Gallery ---------- */
.gallery-carousel{ padding:0; }
.gallery-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track img{
  flex:0 0 100%; width:100%; aspect-ratio:16/10; object-fit:cover; scroll-snap-align:start;
}
.gallery-dots{ display:flex; justify-content:center; gap:9px; margin-top:20px; }
.gallery-dots button{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; background:var(--line); cursor:pointer; transition:.2s;
}
.gallery-dots button.active{ background:var(--orange); width:22px; border-radius:5px; }
.gallery-caption{ text-align:center; margin-top:18px; font-size:12.5px; color:var(--faint); font-style:italic; }

/* ---------- Our Latest Events ---------- */
.latest-events-section{ padding-top:64px; padding-bottom:0; }
.latest-events-section .section-head{ margin-bottom:30px; }
.latest-events-section .why-head{ margin-bottom:64px; }
.latest-events-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.event-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-top:1px solid var(--orange);
  padding:44px 48px; text-decoration:none; transition:background .15s; text-align:center;
}
.event-card:not(:last-child){ border-right:none; }
.event-card + .event-card{ border-left-color:var(--orange); }
a.event-card:hover{ background:var(--orange-soft); }
.event-card h3{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--orange); margin:0 0 10px; }
.event-card-sub{ font-size:13.5px; color:var(--muted); margin:0 0 18px; }
.event-card-stat{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:17px; color:var(--ink); margin:0; }

/* ---------- Why AMBRA ---------- */
.why-head{ margin-bottom:60px; }
.why-head-center{ text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }
.why-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.2vw,50px); color:var(--orange); margin:0 0 14px; letter-spacing:-.01em; }
.rotating-word{ display:inline-block; transition:opacity .3s ease, transform .3s ease; }

/* Simple, short fade-in as these sections enter view — toggled by JS adding
   .in-view once each one is scrolled into the viewport. */
.fade-in{ opacity:0; transition:opacity .9s ease; }
.fade-in.in-view{ opacity:1; }
.rotating-word.swapping{ opacity:0; transform:translateY(6px); }
.why-subtitle{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:18px; color:#161F1A; margin:0; }

.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; align-items:start; }
.why-card{ border-top:1px solid var(--line); padding-top:26px; }
.why-card:nth-child(2){ margin-top:80px; }
.why-card:nth-child(3){ margin-top:160px; }
.why-num{ display:block; font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--orange); margin-bottom:22px; }
.why-card h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2vw,27px); color:var(--orange); line-height:1.18; margin:0 0 36px; }
.why-card p{ font-size:14px; color:var(--ink); line-height:1.75; text-align:justify; margin:0; }

/* ---------- Process — a tall snap-scroll stack: scrolling down inside it
   steps through one big card at a time instead of a flat list, then hands
   scroll back to the page once you pass the last one. ---------- */
.process-scroller{
  height:68vh; max-height:620px; overflow-y:auto; scroll-snap-type:y mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.process-scroller::-webkit-scrollbar{ display:none; }
.process-card{
  height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--wrap); margin:0 auto; padding:0 28px;
  border-top:1px solid var(--line);
}
.process-card-split{ flex-direction:row; align-items:center; justify-content:space-between; gap:40px; }
.process-card-split > div{ flex:1; }
.process-card:first-child{ border-top:none; }
.process-num{ font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--orange); margin-bottom:18px; }
.process-card h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.4vw,56px); color:var(--orange); margin:0 0 20px; letter-spacing:-.01em; }
.process-card p{ font-size:16px; color:var(--ink); line-height:1.75; max-width:620px; margin:0; }
.section-cta{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:40px; }

/* ---------- Logo rows (clients / partners) ---------- */
.logo-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.logo-pill{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10px; padding:16px 26px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); background:var(--surface);
}
.logo-pill img{ max-height:36px; max-width:130px; width:auto; object-fit:contain; }
.logo-row-big{ gap:50px; }
.logo-row-big .logo-pill{ padding:30px 44px; }
.logo-row-big .logo-pill img{ max-height:170px; max-width:440px; }
.logo-row-plain{ align-items:center; }
.logo-row-plain img{ max-height:170px; max-width:440px; width:auto; object-fit:contain; }
.logo-row-wide{ justify-content:space-between; align-items:center; gap:30px; width:100%; padding:0 40px; margin:18px 0; }
.logo-row-wide .logo-pill{ flex:1; min-width:140px; border:none; background:none; padding:0; }
.logo-row-wide .logo-pill img{ max-height:110px; max-width:260px; }
.logos-wrap{ padding:50px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos-wrap .section-tag{
  text-align:center; font-family:var(--font-display); font-weight:700;
  font-size:clamp(32px,4.2vw,50px); letter-spacing:-.01em; text-transform:none;
}

/* ---------- Testimonial / Story ---------- */
.story{ background:var(--surface); }
.story .container{ display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:center; }
.story-photo{ aspect-ratio:1/1; border-radius:50%; width:100%; max-width:260px; object-fit:cover; }
blockquote.pull{
  font-family:var(--font-display); font-weight:400; font-style:italic; font-size:clamp(14px,1.8vw,18px);
  line-height:1.55; margin:0 0 22px; color:var(--ink);
}
blockquote.pull.secondary{ font-size:15px; font-style:normal; color:var(--muted); font-weight:400; line-height:1.65; }
.story-attr{ font-weight:700; font-size:14px; margin-top:18px; }
.story-attr span{ display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:2px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:#fff; border-top:2px solid var(--orange); padding:60px 0 36px; text-align:center; }
.footer-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-bottom:40px; }
.footer-grid .footer-col:first-child{ justify-self:start; }
.footer-grid .footer-col:last-child{ justify-self:end; }
.footer-col h4{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--orange); margin:0 0 14px; }
.footer-col p{ font-size:14px; color:var(--muted); margin:0; }
.footer-icons{ display:flex; justify-content:center; gap:10px; margin-bottom:12px; }
.footer-icon{
  width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.footer-icon:hover{ background:var(--orange-dark); }
.footer-icon svg{ width:16px; height:16px; }
.footer-email{ display:block; font-size:14px; color:var(--orange); font-weight:600; }
.footer-copyright{
  font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--muted); margin:0;
  justify-self:center; white-space:nowrap;
}
.footer-fine-print{ margin:10px 0 0; font-size:11.5px; color:var(--faint); }
.footer-fine-print a{ color:var(--faint); }
.footer-fine-print a:hover{ color:var(--orange); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; aspect-ratio:16/10; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .why-grid{ grid-template-columns:1fr; }
  .why-card:nth-child(2), .why-card:nth-child(3){ margin-top:0; }
  .latest-events-grid{ grid-template-columns:1fr; }
  .story .container{ grid-template-columns:1fr; }
  .story-photo{ width:160px; margin:0 auto; }
  .footer-grid{ grid-template-columns:1fr; justify-items:center; gap:30px; text-align:center; }
  .footer-grid .footer-col:first-child, .footer-grid .footer-col:last-child{ justify-self:center; }
}
@media (max-width:720px){
  .site-nav .container{ padding-left:20px; padding-right:20px; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; transform:none; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0;
    padding:8px 28px 18px; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 0; width:100%; border-top:1px solid var(--line); color:var(--ink); }
  .nav-links a:hover{ color:var(--orange); }
  .nav-links a:first-child{ border-top:none; }
  .nav-toggle{ display:block; }
  .section{ padding:56px 0; }
  .process-scroller{ height:60vh; }
  .process-card{ padding:0 20px; }
  .process-card-split{ flex-direction:column; align-items:flex-start; gap:20px; }
}

/* ==========================================================================
   /cases — "Our Work" page. Shares the nav/footer/section/stats/logo-row
   rules above; this block only adds what's unique to this page.
   ========================================================================== */
.work-hero{ padding:64px 0 50px; text-align:center; }
.work-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-.01em; margin:0 auto 20px; max-width:760px; }
.work-hero h1 em{ color:var(--orange); font-style:italic; }
.work-hero .lede{ max-width:600px; margin:0 auto 26px; color:var(--muted); font-size:15.5px; line-height:1.65; }
.impact-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:30px; padding:9px 20px; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--ink);
}
.impact-badge b{ color:var(--orange); }

.case-list{ display:flex; flex-direction:column; gap:60px; }
.case-card{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.case-card:nth-child(even) .case-photo{ order:2; }
.case-photo{ aspect-ratio:4/3; }
.case-tag{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin:0 0 10px; }
.case-card h3{ font-family:var(--font-display); font-weight:600; font-size:24px; margin:0 0 12px; }
.case-card p{ color:var(--muted); font-size:14.5px; line-height:1.65; margin:0; }

.service-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 44px; }
.service-item{ display:flex; gap:16px; }
.service-mark{ font-size:18px; color:var(--orange); flex-shrink:0; line-height:1.4; }
.service-item h4{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 6px; }
.service-item p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:0; }

.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-top:1px solid var(--line); padding:6px 0; }
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 2px; font-family:var(--font-display); font-weight:600; font-size:15.5px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--orange); flex-shrink:0; transition:transform .2s; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ margin:0 2px 18px; color:var(--muted); font-size:14px; line-height:1.65; max-width:640px; }

/* ---------- FAQ, orange full-bleed two-column variant (/stories) ---------- */
.faq-orange{ background:#F36C3B; padding:84px 0; }
.faq-orange-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.4vw,40px);
  color:#fff; text-align:center; margin:0 0 50px; letter-spacing:-.01em;
}
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 60px; max-width:1060px; margin:0 auto; }
.faq-orange .faq-item{ border-top:1px solid rgba(255,255,255,.35); }
.faq-orange .faq-col .faq-item:last-child{ border-bottom:1px solid rgba(255,255,255,.35); }
.faq-orange .faq-item summary{ color:#fff; font-size:16px; }
.faq-orange .faq-item summary::after{ color:#fff; }
.faq-orange .faq-item p{ color:rgba(255,255,255,.82); max-width:none; }
.faq-orange .section-cta{ margin-top:50px; }

@media (max-width:720px){
  .faq-grid{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:900px){
  .case-card{ grid-template-columns:1fr; }
  .case-card:nth-child(even) .case-photo{ order:0; }
  .service-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   /our-team
   ========================================================================== */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:90px; }
.team-photo{ aspect-ratio:1/1; border-radius:50%; margin-bottom:20px; width:100%; object-fit:cover; }
.team-card h3{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:0 0 4px; }
.team-title{ font-family:var(--font-body); font-size:14px; font-weight:400; letter-spacing:.02em; color:var(--orange); margin:0 0 14px; }
.team-bio{ font-size:14px; color:var(--muted); line-height:1.75; text-align:justify; margin:0; }
.team-resume-link{ display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--orange); }
.team-resume-link:hover{ color:var(--orange-dark); }

@media (max-width:900px){
  .team-grid{ grid-template-columns:1fr; max-width:360px; margin:0 auto; }
}

/* ==========================================================================
   /stories — Testimonials
   ========================================================================== */
/* Testimonials page (/stories/), styled after morisdesignco.com: uppercase label,
   two columns, each with the quote above a square photo beside a bold name and title. */
.testimonial-stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:64px 48px; max-width:1300px; margin:0 auto; }
.testimonial-row{ display:grid; grid-template-columns:128px 1fr; column-gap:32px; align-items:center; align-content:start; }
.testimonial-stack .testimonial-row > div:last-child{ display:contents; }
.testimonial-photo-col{ grid-column:1; grid-row:2; }
.testimonial-meta{ grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:6px; }
.testimonial-stars{ color:var(--orange); font-size:18px; letter-spacing:3px; }
.testimonial-photo{ width:128px; height:128px; object-fit:cover; flex-shrink:0; }
.testimonial-photo .ph-inner, .testimonial-photo::before{ font-size:14px; }
.testimonial-quote{
  grid-column:1 / -1; grid-row:1; margin:0 0 64px; max-width:none; text-align:left;
  font-family:var(--font-body); font-weight:400; font-style:normal; font-size:15pt; line-height:1.4; color:var(--ink);
}
.testimonial-attr{ font-size:16px; font-weight:700; margin:0; color:var(--ink); }
.testimonial-attr span{ display:block; font-weight:400; color:var(--muted); font-size:16px; margin-top:0; }

/* ---------- Mini testimonials preview (home page, under Why AMBRA) ----------
   Sticky-note cards: cream paper, slight rotation, small square marker in the
   corner, scattered unevenly rather than sitting in a flat tidy row. */
.mini-testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:30px 0 20px; }
.mini-testimonial{
  background:#4C9A6A; border-radius:4px; padding:30px 26px 26px;
  position:relative; transition:transform .2s, opacity .9s ease;
}
.mini-testimonial::before{ content:''; position:absolute; top:18px; left:18px; width:10px; height:10px; background:#fff; }
.mini-testimonial-photo{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:16px; }
.mini-testimonial:hover{ transform:rotate(0deg) scale(1.03); }
.mini-testimonial:nth-child(1){ transform:rotate(-3deg); }
.mini-testimonial:nth-child(2){ transform:rotate(2deg); margin-top:34px; }
.mini-testimonial:nth-child(3){ transform:rotate(-2deg); margin-top:10px; }
.mini-testimonial .testimonial-quote{ font-size:15px; color:#fff; }
.mini-testimonial .testimonial-attr{ color:#fff; }
.mini-testimonial .testimonial-attr span{ color:rgba(255,255,255,.8); }

@media (max-width:900px){
  .mini-testimonials{ grid-template-columns:1fr; }
  .mini-testimonial:nth-child(2), .mini-testimonial:nth-child(3){ margin-top:0; }
}

@media (max-width:720px){
  .testimonial-stack{ grid-template-columns:1fr; gap:48px; }
  .testimonial-row{ grid-template-columns:96px 1fr; column-gap:20px; }
  .testimonial-photo{ width:96px; height:96px; }
  .testimonial-attr, .testimonial-attr span{ font-size:14px; }
}

/* ==========================================================================
   /cases — "featured" case card (photo + stat badges + Read More), for a
   card whose full story has its own dedicated detail page.
   ========================================================================== */
.case-stats{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px; }
.case-stat{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; min-width:76px;
}
.case-stat b{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--orange); }
.case-stat span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.case-card .btn{ margin-top:4px; }

/* ==========================================================================
   /tbf and other single-event case-study detail pages
   ========================================================================== */
.case-hero{ padding:58px 0 10px; text-align:center; }
.case-hero .client-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin:0 0 10px; }
.case-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,58px); margin:0; letter-spacing:-.01em; }

/* Full-bleed photo hero variant — background photo, dark overlay, white
   title, and the event-facts row sitting directly on the photo as outlined
   boxes instead of the plain-page layout above. */
.case-hero-photo{
  position:relative; min-height:100vh; display:flex; align-items:center; padding:0 0 60px;
  background-size:cover; background-position:center 55%; text-align:center;
}
.case-hero-photo::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,10,5,0) 0%, rgba(20,10,5,0) 55%, rgba(20,10,5,.45) 100%);
}
.case-hero-photo .container{ position:relative; z-index:1; }
.case-hero-photo h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(44px,7vw,92px); color:#fff; margin:0; letter-spacing:-.01em; }
.case-hero-photo .client-tag{ font-size:18px; font-weight:600; color:#fff; margin:10px 0 0; text-transform:none; letter-spacing:0; font-family:var(--font-body); }
.case-hero-photo .event-facts{ justify-content:center; padding:34px 0 0; gap:16px; }
.case-hero-photo .event-fact{
  border:1px solid rgba(255,255,255,.6); border-radius:4px; padding:12px 18px; color:#fff;
  background:rgba(0,0,0,.4); backdrop-filter:blur(3px); box-shadow:0 2px 12px rgba(0,0,0,.25);
}

.event-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; padding:30px 0 50px; }
.event-fact{ font-size:14px; }
.event-fact b{ font-weight:700; }

.case-copy{ max-width:760px; margin:0 auto; }
.needs-logo{ height:34px; width:auto; }

/* What They Needed / What AMBRA Delivers — side by side, text column on the
   left, a collapsed accordion list (reusing the FAQ pattern) on the right.
   Each column's heading reuses .why-head h2 (wrap it in a plain, non-center
   .why-head div) so every title on this page matches "Why AMBRA?" exactly. */
.needs-deliver-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; max-width:1500px; margin:0 auto; }
.case-copy p{ color:var(--muted); font-size:17px; line-height:1.75; margin:0 0 16px; }
.case-copy p strong{ color:var(--ink); }

.deliver-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 36px; max-width:900px; margin:0 auto; }
.deliver-item h4{ font-family:var(--font-display); font-weight:600; font-size:15.5px; margin:0 0 6px; }
.deliver-item h4::before{ content:'✺ '; color:var(--orange); }
.deliver-item p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

.gallery-strip{ display:flex; gap:18px; overflow-x:auto; padding:4px 0 10px; scroll-snap-type:x mandatory; }
.gallery-strip .ph{ flex:0 0 auto; width:260px; height:180px; scroll-snap-align:start; }
.gallery-strip img{
  flex:0 0 auto; width:min(720px, 85vw); height:62vh; object-fit:cover; border-radius:var(--radius);
  scroll-snap-align:start;
}

.media-links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.media-links a{
  border:1px solid var(--line); border-radius:30px; padding:10px 20px; font-size:13px; font-weight:600;
  color:var(--ink); background:var(--surface);
}
.media-links a:hover{ border-color:var(--orange); color:var(--orange); }

.run-of-show{ max-width:640px; margin:0 auto; }
.row-item{ display:grid; grid-template-columns:90px 1fr; gap:18px; padding:16px 0; border-top:1px solid var(--line); }
.run-of-show .row-item:last-child{ border-bottom:1px solid var(--line); }
.row-time{ font-family:var(--font-mono); font-size:12.5px; color:var(--orange); font-weight:600; }
.row-item p{ margin:0; font-size:13.5px; color:var(--muted); }

.quote-block{ max-width:1000px; margin:0 auto; text-align:center; }
.quote-block blockquote{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(18px,2.4vw,24px); line-height:1.5; margin:0 0 16px; }
.quote-block cite{ font-family:var(--font-display); font-style:normal; font-size:13px; font-weight:700; color:var(--muted); }

/* Run of the Show — two big photos on top, two smaller ones below, for a
   balanced 2x2 feel instead of one dominant photo. */
.runshow-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:100%; margin:0; }
.runshow-grid img{ width:100%; display:block; border-radius:var(--radius); object-fit:cover; }
.runshow-main{ aspect-ratio:16/10; }
.runshow-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.runshow-bottom img{ width:100%; display:block; border-radius:var(--radius); object-fit:cover; aspect-ratio:16/9; }

/* Venue Visualizer — 3D stage model embed (Three.js), shared with the
   internal app's Stage tab. Colors are hardcoded to match that dark viewer
   rather than this page's light theme tokens, since it's meant to look the
   same everywhere it's embedded. */
.stage-3d-box{ max-width:760px; margin:0 auto; }
.stage-3d-box.wide{ max-width:calc(100% - 24px); }
.stage3d-overlay{ position:absolute; z-index:5; pointer-events:none; }
.stage3d-overlay-tl{ top:16px; left:18px; }
.stage3d-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#B7AF9E; margin-bottom:4px; }
.stage3d-title{ font-family:'Fraunces',serif; font-weight:700; font-size:20px; color:#F1ECE0; }
.stage3d-title #stage3d-project-title{ color:#ffb97d; }
.stage3d-overlay-tr{ top:16px; right:18px; display:flex; gap:8px; pointer-events:auto; }
.stage3d-btn{
  background:rgba(36,28,22,0.85); backdrop-filter:blur(8px); border:1px solid #4A4642; color:#F1ECE0;
  font-family:'Inter',sans-serif; font-weight:500; font-size:12.5px; padding:9px 14px; border-radius:8px; cursor:pointer; transition:.15s;
}
.stage3d-btn:hover{ border-color:#D98A3D; color:#ffb97d; }
.stage3d-overlay-bl{ bottom:16px; left:18px; display:flex; gap:16px; font-size:11.5px; color:#B7AF9E; }
.stage3d-overlay-bl b{ color:#F1ECE0; font-weight:600; }
.stage3d-overlay-br{ bottom:16px; right:18px; font-size:11.5px; color:#B7AF9E; font-family:'IBM Plex Mono',monospace; }
#stage3d-canvas-wrap{
  position:relative; min-height:520px; background:#1D1A18; border:1px solid #4A4642; border-radius:16px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#stage3d-canvas-wrap canvas{ display:block; width:100%; height:100%; }
.stage3d-loader{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.stage3d-load-title{ font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#B7AF9E; }
.stage3d-bar{ width:220px; height:3px; background:#4A4642; border-radius:3px; overflow:hidden; }
.stage3d-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, #D98A3D, #8C6FB5); transition:width .2s; }
.stage3d-empty{ color:#9A9183; font-size:13px; padding:44px 20px; text-align:center; }

/* Stage & Setup — two columns of copy below the full-width visualizer:
   the event description on the left, mouse controls on the right. */
.stage-info-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; max-width:100%; margin:28px 0 0; }
.stage-info-row .case-copy{ margin:0; max-width:520px; }

/* Staging-concept renders — used in place of the 3D visualizer when a page
   doesn't have its own .glb model yet. */
.stage-photos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:100%; margin:0; }
.stage-photos-grid img{ width:100%; display:block; border-radius:var(--radius); border:1px solid var(--line); }

.partners-list{ display:flex; flex-direction:column; gap:22px; max-width:1100px; margin:0 auto; }
.partner-item h4{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 6px; }
.partner-item h4 a{ color:var(--orange); }
.partner-item p{ font-size:13px; color:var(--muted); line-height:1.65; margin:0 0 10px; }
.partner-item p:last-child{ margin-bottom:0; }
.partner-item-logo{ display:flex; gap:22px; align-items:flex-start; }
.partner-logo{ max-height:100px; max-width:280px; width:auto; height:auto; object-fit:contain; flex-shrink:0; }

.related-row{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.related-pill{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  width:360px; height:210px; border:2px solid var(--line); background:var(--surface);
  text-decoration:none; transition:transform .2s ease, border-color .2s ease;
}
.related-pill:hover{ transform:scale(1.06); border-color:var(--orange); }
.related-pill-title{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--orange); letter-spacing:.02em; }
.related-pill img{ height:54px; width:auto; }

/* Video cards — real YouTube thumbnails with a play button, styled like a
   YouTube embed card: icon + title + channel row above the thumbnail. */
.video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; max-width:1700px; margin:0 auto; }
.video-card{ display:block; background:#0F0F0F; border-radius:12px; overflow:hidden; text-decoration:none; transition:transform .15s; }
.video-card:hover{ transform:translateY(-3px); }
.video-card-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; }
.video-card-icon{ width:30px; height:30px; border-radius:50%; flex-shrink:0; }
.video-card-head h4{ font-family:var(--font-body); font-weight:700; font-size:13.5px; margin:0; color:#fff; line-height:1.3; }
.video-card-head span{ font-size:11px; color:#aaa; }
.video-card-thumb{ position:relative; aspect-ratio:16/9; background:#000; }
.video-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:40px; background:rgba(20,20,20,.75); border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; transition:.15s;
}
.video-card:hover .video-play{ background:#FF0000; }

/* Spotify embed block */
.spotify-block{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.spotify-block iframe{ height:480px; }
.spotify-block iframe{ width:100%; }
.spotify-copy p{ color:var(--muted); font-size:17px; line-height:1.75; margin:0 0 20px; }

/* Full-width photo banner between sections */
.case-banner{ width:100%; aspect-ratio:36/9; object-fit:cover; display:block; }

/* "Companies we work with" — logos pending upload, same look as the home
   page's Clients/Partners rows once real files land. */
.logos-pending{ text-align:center; color:var(--faint); font-size:13px; padding:20px 0; }

@media (max-width:720px){
  .event-facts{ gap:14px 24px; }
  .contact-split{ grid-template-columns:1fr; gap:30px; }
  .needs-deliver-grid{ grid-template-columns:1fr; gap:36px; }
  .deliver-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
  .stage-info-row{ flex-direction:column; gap:24px; }
  .stage-info-row .case-copy{ max-width:none; }
  .runshow-grid{ grid-template-columns:1fr; }
  .runshow-bottom{ grid-template-columns:1fr; }
  .gallery-strip img{ width:88vw; height:50vh; }
  .spotify-block{ grid-template-columns:1fr; gap:24px; }
  .case-hero-photo{ min-height:60vh; }
  .case-hero-photo h1{ font-size:clamp(30px,10vw,52px); }
}