/* Refined Performing Arts — homepage layout.
   Colours come only from brand.css tokens. Gold is structure and emphasis, never status.
   Type per brand book: Cormorant Garamond for everything, Jost only for tiny labels.
   Uppercase always carries wide tracking (.2–.34em). Headlines stay regular weight. */

/* self-hosted fonts — no third-party requests, works offline and in five years */
@font-face{
  font-family:"Cormorant Garamond";
  src:url(../assets/fonts/cormorant-garamond.woff2) format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url(../assets/fonts/cormorant-garamond-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Jost";
  src:url(../assets/fonts/jost.woff2) format("woff2");
  font-weight:300 400; font-style:normal; font-display:swap;
}

:root{
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Jost","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --max:72rem;
}

body{ font-family:var(--serif); }

h1,h2,h3,h4{ font-weight:400; line-height:1.12; margin:0; }
p{ margin:0; }

.section{ padding:var(--section) var(--gutter); }
.section > *{ max-width:var(--max); margin-left:auto; margin-right:auto; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* gold at this size fails contrast on ivory — text is ink-soft, the gold lives in the dash */
.eyebrow{
  font-family:var(--sans); font-weight:300; font-size:.72rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.eyebrow::before{
  content:""; display:inline-block; width:1.2rem; height:1px;
  background:var(--gold); margin-right:.8rem; vertical-align:.25em;
}

/* ---------- header ---------- */

.site-head{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:2rem; padding:1.1rem var(--gutter) 0;
}
.brand{ justify-self:start; }
.brand img{ width:150px; height:auto; }
.site-nav{ justify-self:center; display:flex; gap:clamp(1.2rem,3vw,2.6rem); }
.site-nav a{
  font-family:var(--sans); font-weight:300; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); padding:.4rem 0; border-bottom:1px solid transparent;
}
.site-nav a[aria-current], .site-nav a:hover{ border-bottom-color:var(--gold); }
.head-side{ justify-self:end; }
.head-side a{ color:var(--ink); display:inline-flex; padding:.4rem; }
.head-side a:hover{ color:var(--gold); }

/* mobile menu (CSS toggle; a 3-line script in index.html closes it on link tap) */
.nav-toggle{ display:none; }
.nav-burger{ display:none; }
.nav-overlay{ display:none; }

/* ---------- hero ---------- */

.hero{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* hero slider: stacked images, pure-CSS crossfade — 5s per slide, 30s loop (6 slides).
   Negative delays phase-shift the shared animation; ~1s overlap = the crossfade. */
.hero-slide{
  opacity:0;
  animation:hero-fade 30s linear infinite;
}
.hero-slide:nth-child(1){ animation-delay:-30s; }
.hero-slide:nth-child(2){ animation-delay:-25s; }
.hero-slide:nth-child(3){ animation-delay:-20s; }
.hero-slide:nth-child(4){ animation-delay:-15s; }
.hero-slide:nth-child(5){ animation-delay:-10s; }
.hero-slide:nth-child(6){ animation-delay:-5s; }
@keyframes hero-fade{
  0%    { opacity:0; }
  3.4%  { opacity:1; }
  16.7% { opacity:1; }
  20%   { opacity:0; }
  100%  { opacity:0; }
}
.hero-veil{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to bottom, rgba(250,248,244,.82) 0%, rgba(250,248,244,0) 26%),
    rgba(250,248,244,.22);
}
/* edge-anchored ivory scrim carrying the tagline (brand book: scrims run ivory from the edge;
   the tagline sits low, over the studio floor — never across a face or costume) */
.hero-scrim{
  position:absolute; left:0; right:0; bottom:0; height:36%; z-index:2;
  background:linear-gradient(to top,
    rgba(250,248,244,.92) 0%, rgba(250,248,244,.72) 45%, rgba(250,248,244,0) 100%);
}
.hero-tag{
  position:absolute; left:50%; bottom:clamp(4.5rem, 11vh, 7.5rem); transform:translateX(-50%); z-index:3;
  width:max-content; max-width:min(92vw, 60rem); text-align:center;
  font-size:var(--step-1); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink); white-space:normal; padding:0 1rem;
}
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:1.6rem; z-index:3;
  display:inline-flex; padding:.75rem;
  color:var(--ink); opacity:.65;
}
.hero-scroll:hover{ opacity:1; }

/* ---------- about ---------- */

.about-grid{
  display:grid; grid-template-columns:1.05fr auto 1fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:center; max-width:var(--max);
  margin:0 auto;
}
.about h1{ font-size:var(--step-3); margin-bottom:1.6rem; }
.about h1 em{
  font-style:italic;
  border-bottom:1px solid var(--gold-light);
}
.lead{
  font-size:calc(var(--step-0) * 1.12); color:var(--ink-soft);
  max-width:38ch; margin-bottom:2.4rem;
}
/* brand book button system: primary = gold ground, ink text */
.btn{
  display:inline-flex; align-items:center; gap:.9em;
  font-family:var(--sans); font-weight:400; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:var(--gold);
  padding:1.05em 2em; border-radius:999px; border:1px solid transparent;
}
.btn:hover .btn-dash{ width:2.4em; }
.btn-dash{
  width:1.6em; height:1px; background:var(--ink);
  transition:width .25s ease;
}
/* vertical founder film — hairline gold frame, ivory play disc */
.about-video{
  position:relative; margin:0;
  width:clamp(240px, 23vw, 320px);
}
.about-video video{
  display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover;
  border-radius:16px; border:1px solid var(--gold-light);
  background:var(--ivory-deep);
}
.video-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer; border-radius:16px;
}
.video-play svg{ transition:transform .25s ease; }
.video-play:hover svg{ transform:scale(1.06); }
.video-play:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.video-play[hidden]{ display:none; }
.about-side .lead{ margin-bottom:2.4rem; }
.side-head{
  font-size:var(--step-1); line-height:1.3; margin-bottom:1.1rem;
}

/* ---------- clients / trusted by (belongs to the about section — tight spacing) ---------- */

.about{ padding-bottom:calc(var(--section) * .3); }
.clients{
  padding:0 0 calc(var(--section) * .6);
}
.clients-eyebrow{ text-align:center; margin-bottom:1.8rem; }
.logo-marquee{
  overflow:hidden; max-width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-track{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; width:max-content;
  animation:logo-scroll 44s linear infinite;
}
.logo-track li{
  margin-right:clamp(2.2rem, 5vw, 4.5rem);
}
.logo-track img{
  display:block; height:clamp(44px, calc(4vw + 10px), 62px); width:auto;
  opacity:.55;
}
@keyframes logo-scroll{ to{ transform:translateX(-50%); } }
.clients-quote{
  text-align:center; font-style:italic; color:var(--ink-soft);
  font-size:calc(var(--step-0) * 1.08); max-width:44ch; margin:2.6rem auto 0;
}

/* ---------- four steps (show creation process) ---------- */

.steps{ position:relative; }
/* soft background portrait behind the right side — all edges fade, no hard lines */
.steps::after{
  content:""; position:absolute; z-index:0;
  top:calc(var(--section) * .25); right:0;
  width:min(46vw, 620px); aspect-ratio:2/3;
  background:url(../assets/IMG_9360-bg.jpg) center top/cover no-repeat;
  opacity:.14; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse closest-side, #000 38%, transparent 78%);
  mask-image:radial-gradient(ellipse closest-side, #000 38%, transparent 78%);
}
.steps > *{ position:relative; z-index:1; }

.step-grid{
  --step-gap:clamp(2rem,4vw,3.5rem);
  list-style:none; margin:0 auto; padding:0; max-width:var(--max);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--step-gap);
}
.step-grid li{ position:relative; }
/* the thread joining 01 — 02 — 03 — 04 */
.step-grid li + li::before{
  content:""; position:absolute; right:100%;
  top:calc(var(--step-3) / 2); height:1px;
  width:calc(40% + var(--step-gap));
  background:var(--gold-light);
}
.step-num{
  display:block; font-family:var(--serif); font-size:var(--step-3);
  line-height:1; color:var(--gold); margin-bottom:1rem;
}
.step-grid h3{
  font-size:var(--step-1); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.8rem;
}
.step-grid p{ color:var(--ink-soft); font-size:var(--step-0); }
.step-cta-title{
  text-align:center; font-size:var(--step-1);
  margin:clamp(3rem,7vw,4.5rem) auto 1.4rem;
}
.step-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem;
  max-width:var(--max); margin:0 auto;
}

/* ---------- testimonials ---------- */

.testimonials{ background:var(--ivory-deep); position:relative; overflow:hidden; }
/* the R mark on the left, full section height, sitting behind the slider */
.testimonials::before{
  content:""; position:absolute; z-index:0;
  left:clamp(-10rem, -7vw, -3rem); top:0; bottom:0;
  width:min(78vw, 1000px);
  background:url(../assets/mark-r-gold.png) left center/auto 100% no-repeat;
  opacity:.25; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 45% 50%, #000 55%, transparent 92%);
  mask-image:radial-gradient(ellipse 72% 62% at 45% 50%, #000 55%, transparent 92%);
}
.testimonials > *{ position:relative; z-index:1; }
.tst-shell{ position:relative; }
.tst-marquee{
  overflow-x:auto; max-width:100%;
  scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.tst-marquee::-webkit-scrollbar{ display:none; }
.tst-track{
  list-style:none; margin:0; padding:.5rem 0;
  display:flex; align-items:stretch; width:max-content;
}
.tst-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--ivory); border:1px solid var(--gold);
  color:var(--ink);
}
.tst-prev{ left:-.4rem; }
.tst-next{ right:-.4rem; }
.tst-arrow:hover{ background:var(--gold-pale); }
.tst-arrow:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.tst-card{
  width:clamp(300px, 36vw, 470px); margin-right:clamp(1.2rem, 2.5vw, 2rem);
  background:var(--ivory); border:1px solid var(--gold-pale); border-radius:18px;
  padding:1.8rem 2rem;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
/* the client's mark, full strength, anchored bottom-right */
.tst-logo{
  position:absolute; right:1.7rem; bottom:1.5rem;
  height:38px; width:auto; opacity:1; pointer-events:none;
}
/* keep the name block clear of the mark */
.tst-card:has(.tst-logo) .tst-name,
.tst-card:has(.tst-logo) .tst-role{ padding-right:100px; }
.tst-card blockquote{
  margin:0 0 1.1rem; font-style:italic; line-height:1.55;
  font-size:var(--step-0); color:var(--ink); flex:1;
}
.tst-stars{ color:var(--gold); margin-bottom:.7rem; }
.tst-stars svg{ display:block; }
.tst-name{ font-weight:500; }
.tst-role{
  font-family:var(--sans); font-weight:300; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:.3rem;
}

/* ---------- services ---------- */

.section-head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section-head h2{ font-size:var(--step-3); margin-bottom:1rem; }
.section-sub{ color:var(--ink-soft); font-size:calc(var(--step-0) * 1.08); }

.svc-card{
  background:var(--ink); border-radius:26px;
  padding:clamp(1.4rem,3.5vw,3rem);
  display:grid; grid-template-columns:minmax(240px,380px) 1fr;
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
  max-width:var(--max); margin:0 auto clamp(1.6rem,3vw,2.4rem);
}
.svc-card:last-child{ margin-bottom:0; }
.svc-card figure{ margin:0; }
.svc-card figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px;
}
.svc-body h3{ font-size:var(--step-2); color:var(--ivory); margin-bottom:1rem; }
.svc-body p{
  color:rgba(250,248,244,.72); font-size:calc(var(--step-0) * 1.06);
  max-width:52ch; margin-bottom:1.6rem;
}
.svc-list{ list-style:none; margin:0; padding:0; }
.svc-list li{
  color:rgba(250,248,244,.88); font-size:var(--step-0);
  padding-left:2rem; position:relative; margin-bottom:.55rem;
}
.svc-list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:1.1rem; height:1px; background:var(--gold-light);
}

/* light variant — cards alternate dark / light down the section */
.svc-quiet{ background:var(--ivory-deep); }
.svc-quiet .svc-body h3{ color:var(--ink); }
.svc-quiet .svc-body p{ color:var(--ink-soft); }
.svc-quiet .svc-list li{ color:var(--ink); }
.svc-quiet .svc-list li::before{ background:var(--gold); }

/* even cards mirror: image right, content left */
.svc-flip figure{ order:2; }

/* full-bleed variant (card 1, for review): image fills the entire left HALF of the
   card, edge to edge, its right side fading into the card ground. Height: 521px. */
.svc-bleed{
  padding:0; grid-template-columns:65fr 35fr; align-items:stretch; overflow:hidden;
}
.svc-bleed figure{ position:relative; min-height:521px; }
.svc-bleed figure img{
  position:absolute; inset:0; width:100%; height:100%; max-height:none;
  aspect-ratio:auto; object-fit:cover; /* per-image crop anchor set inline on each <img> */
  border-radius:0;
  -webkit-mask-image:linear-gradient(to right, #000 62%, transparent 100%);
  mask-image:linear-gradient(to right, #000 62%, transparent 100%);
}
/* mirrored bleed: image fills the RIGHT 65%, fading left into the card */
.svc-bleed.svc-flip{ grid-template-columns:35fr 65fr; }
.svc-bleed.svc-flip figure img{
  -webkit-mask-image:linear-gradient(to left, #000 62%, transparent 100%);
  mask-image:linear-gradient(to left, #000 62%, transparent 100%);
}
.svc-bleed.svc-flip .svc-body{
  padding:clamp(1.4rem,3.5vw,3rem) 0 clamp(1.4rem,3.5vw,3rem) clamp(1.4rem,3.5vw,3rem);
}
.svc-bleed .svc-body{
  align-self:center;
  padding:clamp(1.4rem,3.5vw,3rem) clamp(1.4rem,3.5vw,3rem) clamp(1.4rem,3.5vw,3rem) 0;
}
.svc-bleed .svc-body h3{ font-size:calc(var(--step-2) * 1.22); }
.svc-bleed .svc-list{ margin-bottom:1.8rem; }

/* ghost button (brand book secondary): hairline gold border, ink text */
.btn-ghost{
  background:transparent; border-color:var(--gold); color:var(--ink);
}


/* ---------- footer ---------- */

.site-foot{
  background:var(--ink); color:var(--ivory);
  padding:calc(var(--section) * .8) var(--gutter) 2.2rem;
}
.foot-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.foot-brand img{ width:180px; height:auto; }
.foot-col h4{
  font-family:var(--sans); font-weight:300; font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-light);
  margin-bottom:1.2rem;
}
.foot-col p{ color:rgba(250,248,244,.82); margin-bottom:.5rem; }
.foot-muted{ color:rgba(250,248,244,.5); font-size:var(--step--1); }
.foot-col nav{ display:flex; flex-direction:column; gap:.55rem; }
.foot-col a{
  color:rgba(250,248,244,.82); text-decoration:none;
}
.foot-col a:hover{ color:var(--gold-light); }
.foot-base{
  max-width:var(--max); margin:3.5rem auto 0; padding-top:1.6rem;
  border-top:1px solid rgba(250,248,244,.14); text-align:center;
}
.foot-base p{
  font-family:var(--sans); font-weight:300; font-size:var(--step--1);
  letter-spacing:.26em; text-transform:uppercase; color:rgba(250,248,244,.6);
}

/* ---------- mobile ---------- */

@media (max-width:840px){
  .site-nav, .head-side{ display:none; }

  /* checkbox stays in the document (focusable for keyboard users) but out of sight */
  .nav-toggle{ display:block; position:absolute; opacity:0; pointer-events:none; }
  .nav-toggle:focus-visible ~ .nav-burger{
    outline:2px solid var(--ink); outline-offset:3px; border-radius:2px;
  }

  /* fixed, so the close control can never scroll out of reach while the menu is open */
  .nav-burger{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; cursor:pointer;
    position:fixed; top:1.1rem; right:var(--gutter); z-index:30;
  }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after{
    content:""; display:block; width:22px; height:1.5px;
    background:var(--ink); position:relative; transition:transform .25s ease, opacity .2s ease;
  }
  .nav-burger span::before{ position:absolute; top:-7px; }
  .nav-burger span::after{ position:absolute; top:7px; }
  .nav-toggle:checked ~ .nav-burger span{ transform:rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span::before{ transform:rotate(-90deg) translateX(-7px); }
  .nav-toggle:checked ~ .nav-burger span::after{ opacity:0; }

  .nav-overlay{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1.4rem; position:fixed; inset:0; z-index:20; background:var(--ivory);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .nav-toggle:checked ~ .nav-overlay{ opacity:1; visibility:visible; pointer-events:auto; }
  .nav-overlay a{
    font-family:var(--serif); font-size:var(--step-2); text-decoration:none;
    color:var(--ink); padding:.35rem 1.5rem;
  }

  .brand img{ width:140px; } /* brand book: never narrower than 140px on screen */

  /* hold a real ivory scrim behind the logo — the mobile crop pushes feathers into the header */
  .hero-veil{
    background:
      linear-gradient(to bottom, rgba(250,248,244,.9) 0, rgba(250,248,244,.85) 140px, rgba(250,248,244,0) 38%),
      rgba(250,248,244,.22);
  }

  .about-grid{ grid-template-columns:1fr; }
  .about-video{ margin:.5rem auto 0; width:min(72vw, 300px); }

  .step-grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .step-grid li + li::before{ display:none; } /* connectors only make sense in one row */
  .steps::after{ width:min(78vw, 420px); opacity:.12; }

  .svc-card{ grid-template-columns:1fr; }
  .svc-card figure img{ aspect-ratio:4/3; }
  .svc-flip figure{ order:0; } /* stacked cards always show the image first */

  /* stacked bleed card: image runs edge-to-edge on top, fading down into the card */
  .svc-bleed, .svc-bleed.svc-flip{ min-height:0; grid-template-columns:1fr; }
  .svc-bleed figure{ min-height:0; }
  .svc-bleed figure img, .svc-bleed.svc-flip figure img{
    position:static; height:auto; aspect-ratio:4/3;
    -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .svc-bleed .svc-body, .svc-bleed.svc-flip .svc-body{
    padding:0 clamp(1.4rem,3.5vw,3rem) clamp(1.4rem,3.5vw,3rem);
  }

  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }

  /* arrows below the cards on small screens, out of the content's way */
  .tst-arrow{ position:static; transform:none; }
  .tst-shell{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }
  .tst-marquee{ order:-1; flex-basis:100%; }
}

@media (max-width:480px){
  .foot-grid{ grid-template-columns:1fr; }
  .hero-tag{ letter-spacing:.22em; font-size:var(--step-0); padding:0 .5rem; }
  .step-grid{ grid-template-columns:1fr; }
}

/* keep the page still behind the open menu (progressive enhancement) */
html:has(.nav-toggle:checked){ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .nav-overlay, .btn-dash{ transition:none; }
  .hero-slide{ animation:none; } /* slider holds on the first image */
  .hero-slide:first-child{ opacity:1; }
  .logo-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .logo-track li[aria-hidden]{ display:none; } /* static grid instead of marquee */
  /* testimonial drift is JS and already gated on this media query; arrows still work */
}