/* ============================================================
   THE CASTING DIRECTOR'S CUT
   Design system: "Screen Test Silence", WHITE REWORK
   Built from 03-design/TCDC-Hero-Design-Philosophy.md

   Fixes the three things the Phase 4 page builds got wrong:
     1. The mint #A4F4E4 was absent. It is the brand signature.
     2. There was no imagery of any kind, and no way to add any.
     3. The bracket motif, a real brand device, was unused.

   REWORKED August 5, Phase 4t, at David's request: the site should
   not read as a black background. The rule applied throughout this
   file is a dark-open, white-body, dark-close rhythm:
     - DARK, UNCHANGED FROM THE ORIGINAL: .hero, .subhero, .marquee,
       .close-cta, .foot. These are the two cinematic bookends per
       page (the opening photographic hero and the closing CTA) plus
       the footer. They keep the navy treatment on purpose, the same
       way a bright, warm site can still have a dark photograph in it
       without being "a black website".
     - EVERYTHING ELSE is white or a faint mint-tinted off-white:
       value props, package cards, the CD roster, testimonials, the
       comparison table, the accordion, included-items, add-ons,
       process steps, the fork cards, bios, the open-class panel, the
       FAQ, and the contact routes and form.
   Every selector name is unchanged so no page template needs editing.
   Only colors, backgrounds, borders, shadows and photo filters moved.
   ============================================================ */

:root{
  /* Depth. Still the brand's navy family, now used mainly as ink and
     as the two dark bookend backgrounds, not as the page canvas. */
  --abyss:      #05081A;
  --navy-deep:  #0A0E26;
  /* The navy the rest of the site chrome actually uses. Read off the live
     site 2026-08-11: nav#site-navigation and the Beaver Builder footer row
     are both rgb(29,31,67). The dark bookends on ported pages must equal
     this or they read as a second, wrong blue against the header. */
  --navy-chrome:#1D1F43;
  --navy:       #151941;
  --navy-lift:  #1D2150;
  --navy-edge:  #2A2F63;
  --charcoal:   #22263C;

  /* The signature. Used sparingly so it always lands. */
  --mint:       #A4F4E4;
  --mint-deep:  #6FD8C2;
  --mint-veil:  rgba(164,244,228,.14);
  --mint-glow:  rgba(164,244,228,.40);
  /* A darker, saturated teal pulled from the same hue for anywhere
     mint has to work as legible TEXT on a white background. Plain
     mint on white fails contrast; this does not. */
  --mint-ink:   #168572;

  --bone:       #F6F5F2;
  --paper:      #FFFFFF;
  --slate:      #8B96A8;
  --slate-dim:  #5D6980;

  /* New: the white-body palette. */
  --ink:        #151941;              /* primary text on white, = --navy */
  --ink-soft:   #3E4A63;              /* body copy on white */
  --surface:    #FFFFFF;              /* the page canvas */
  --surface-tint: #F4FAF8;            /* faint mint-tinted band, for alternating rhythm */
  --line:       rgba(21,25,65,.10);   /* hairline on white, replaces rgba(255,255,255,.1) */
  --line-soft:  rgba(21,25,65,.07);
  --card-bg:      #FFFFFF;
  --card-line:    rgba(21,25,65,.11);
  --card-shadow:  0 16px 34px -18px rgba(21,25,65,.22);

  --shell: min(1240px, 100% - 3rem);
  --shell-narrow: min(880px, 100% - 3rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --step--1: clamp(.78rem, .74rem + .2vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .22vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --step-5:  clamp(3.1rem, 2rem + 5.2vw, 7.2rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

/* ---------- Film grain + vignette. One fixed layer, never repaints. ---------- */
/* Grain stays: a very fine paper-like texture reads fine on white.
   Vignette is turned almost all the way down: at the old strength it
   grayed out every white section on the page, which is the "black
   background" problem in disguise. What is left is a faint navy edge
   darkening, closer to a print vignette than a dark room. */
.grain,.vignette{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{
  opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  background:radial-gradient(125% 95% at 50% 42%, transparent 60%, rgba(21,25,65,.05) 100%);
  z-index:59;
}

/* ---------- The bracket motif. The brand's real device. ---------- */
.brackets{position:relative}
.brackets::before,.brackets::after{
  content:'';position:absolute;width:26px;height:26px;
  border:1.5px solid var(--mint-deep);opacity:.9;pointer-events:none;
}
.brackets::before{top:0;left:0;border-right:0;border-bottom:0}
.brackets::after{bottom:0;right:0;border-left:0;border-top:0}
.brackets--wide::before,.brackets--wide::after{width:40px;height:40px}

/* ---------- Sprocket rail. Projection-booth geometry as structure. ---------- */
.sprocket{
  --sp:var(--mint-deep);
  width:10px;flex:none;align-self:stretch;min-height:60px;
  background-image:linear-gradient(var(--sp) 0 0);
  background-size:2px 100%;background-position:4px 0;background-repeat:no-repeat;
  position:relative;opacity:.4;
}
.sprocket::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 5px 5px, var(--sp) 0 2.2px, transparent 2.4px);
  background-size:10px 22px;
}

/* ---------- Motion primitives ---------- */
.rise{opacity:0;transform:translate3d(0,26px,0);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.08s}
.rise[data-d="2"]{transition-delay:.16s}
.rise[data-d="3"]{transition-delay:.24s}
.rise[data-d="4"]{transition-delay:.32s}
.rise[data-d="5"]{transition-delay:.40s}

/* Text mask reveal, the slate-clap wipe */
.wipe{display:block;overflow:hidden}
.wipe > span{
  display:block;transform:translate3d(0,110%,0);
  transition:transform 1s var(--ease-out);
}
.wipe.in > span{transform:none}
.wipe[data-d="1"] > span{transition-delay:.10s}
.wipe[data-d="2"] > span{transition-delay:.20s}
.wipe[data-d="3"] > span{transition-delay:.30s}

/* Hairline that draws itself */
.rule{height:1px;background:var(--mint-deep);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out);opacity:.85}
.rule.in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.wipe>span,.rule{transition:none!important;opacity:1!important;transform:none!important}
  .marquee__track{animation:none!important}
  .parallax{transform:none!important}
}

/* ---------- Shared atoms ---------- */
.shell{width:var(--shell);margin-inline:auto}
.shell-narrow{width:var(--shell-narrow);margin-inline:auto}
section{position:relative}
/* Section rhythm. Tightened again 2026-08-11, same day, on David's note
   that /consulting/ still had too much padding between blocks. Was
   .pad clamp(3.5rem,6vw,6rem) and .pad-sm clamp(2.5rem,4.5vw,4.5rem),
   about 173px between one block's content and the next at a normal
   desktop width. Now roughly 104px. */
.pad{padding-block:clamp(2.25rem,4vw,4rem)}
.pad-sm{padding-block:clamp(1.75rem,3vw,3rem)}

.eyebrow{
  font-family:'Archivo',sans-serif;font-size:var(--step--1);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mint-ink);
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.4rem;
}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--mint-deep);opacity:.9;flex:none}
.eyebrow--center{justify-content:center}

.lede{font-size:var(--step-1);color:var(--ink-soft);font-weight:300;line-height:1.55;max-width:62ch}
.muted{color:var(--slate-dim)}

/* Buttons. Mint-on-navy already reads well on white with no change. */
.btn{
  --bg:var(--mint);--fg:var(--navy-deep);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.02rem 2rem;border-radius:2px;border:1px solid var(--bg);
  background:var(--bg);color:var(--fg);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),color .35s var(--ease);
}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--navy-deep);
  transform:translate3d(0,101%,0);transition:transform .45s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px -14px rgba(21,25,65,.35);color:var(--mint)}
.btn:hover::after{transform:none}
.btn:focus-visible{outline:2px solid var(--mint-deep);outline-offset:4px}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

/* Ghost button: on white this needs dark text and a visible border,
   the old near-white text and pale border were tuned for navy. */
.btn--ghost{--bg:transparent;--fg:var(--navy)}
.btn--ghost{border-color:rgba(21,25,65,.28)}
.btn--ghost::after{background:var(--mint)}
.btn--ghost:hover{color:var(--navy-deep);box-shadow:none}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--mint-ink);
  text-decoration:none;font-weight:500;font-size:var(--step--1);
  letter-spacing:.06em;border-bottom:1px solid rgba(22,133,114,.35);
  padding-bottom:2px;transition:border-color .35s var(--ease),gap .35s var(--ease);
}
.tlink:hover{border-color:var(--mint-ink);gap:.85rem}

/* Casting-director picker dropdown. Added 2026-08-12 for the "choose your
   casting director" tiers on /consulting/: styled to read as a .tlink, not
   a bare native select. */
select.tlink-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:transparent;border:none;border-bottom:1px solid rgba(22,133,114,.35);
  cursor:pointer;max-width:100%;
}
select.tlink-select:hover,select.tlink-select:focus{border-color:var(--mint-ink)}

/* ---------- Cursor rim-light. "A single point of light, disproportionately powerful." ---------- */
.lit{position:relative;isolation:isolate}
.lit::before{
  content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(164,244,228,.30), transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.lit:hover::before{opacity:1}


/* ============================================================
   HERO. Dark bookend, unchanged. This is a photograph with a
   cinematic grade, not a flat black fill, and it is the one place
   in the system that is meant to feel like a dim room.
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:9rem 4.5rem;overflow:clip;isolation:isolate;
  /* Was --navy-deep, a visibly different blue than the site header
     (nav#site-navigation is rgb(29,31,67) = --navy-chrome). .subhero
     was already built correctly against --navy-chrome; .hero was left
     on the old prototype value from before it ever sat under a real
     header. Fixed 2026-08-13 at David's flag: "the blues of the header
     and hero need to match." */
  background:var(--navy-chrome);color:var(--bone);
}
.hero .eyebrow{color:var(--mint)}
.hero .eyebrow::before{background:var(--mint);opacity:.8}
.hero__media{position:absolute;inset:-8% 0 0;z-index:-3;overflow:hidden}
.hero__media img{
  width:100%;height:118%;object-fit:cover;object-position:50% 34%;
  /* Lightened 2026-08-14 at David's request, previewed live on production
     (not saved) at two strengths before he picked this one. Was
     contrast(1.08) brightness(.8) saturate(1.15), which was crushing the
     photo, especially the bokeh/lens detail on the right, toward near-black. */
  filter:contrast(1.0) brightness(1.3) saturate(1.05);
  will-change:transform;
}
/* Navy wash so the photograph reads as depth, not as stock.
   Top stop now starts at --navy-chrome so the seam under the header
   matches exactly, then deepens toward abyss/navy-deep further down,
   the same cinematic taper as before.
   Gradient stops thinned out 2026-08-14 alongside the brightness change
   above, same reason: was rgba(21,25,65,.42) / rgba(10,14,38,.66) /
   rgba(5,8,26,.93), David confirmed the lighter version live. */
.hero__wash{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(75% 58% at 22% 30%, rgba(21,25,65,.16), transparent 70%),
    linear-gradient(178deg, var(--navy-chrome) 0%, rgba(10,14,38,.22) 34%, rgba(5,8,26,.5) 84%, var(--navy-deep) 100%);
}
/* The disciplined arc of light, the one thing the philosophy insists on */
.hero__arc{
  position:absolute;z-index:-1;right:-16vw;top:8%;width:62vw;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(164,244,228,.30);
  box-shadow:0 0 120px -20px rgba(164,244,228,.22), inset 0 0 160px -60px rgba(164,244,228,.4);
  mask-image:conic-gradient(from 190deg, #000 0deg 96deg, transparent 130deg);
  pointer-events:none;
}
.hero__arc--in{width:40vw;right:-6vw;top:20%;opacity:.5;border-color:rgba(164,244,228,.2)}
.hero__media~.hero__arc{display:none}

.hero__inner{width:var(--shell);margin-inline:auto;position:relative}
.hero h1{
  font-size:var(--step-5);letter-spacing:-.04em;line-height:.94;
  max-width:16ch;margin-bottom:1.6rem;text-transform:uppercase;color:var(--bone);
}
.hero h1 em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  color:var(--mint);text-transform:none;letter-spacing:-.01em;
}
.hero__sub{max-width:52ch;margin:0 0 2.6rem;font-size:var(--step-1);color:#CBD3E4;font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center}

.hero__meta{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-top:3.4rem;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.10);
}
.hero__meta div{display:flex;flex-direction:column;gap:.2rem}
.hero__meta b{font-family:'Archivo',sans-serif;font-size:var(--step-2);font-weight:800;color:var(--mint);letter-spacing:-.03em}
.hero__meta span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}

.scrollcue{
  position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate-dim);
}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--mint),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:720px){.scrollcue{display:none}.hero{min-height:92svh}}

/* ============================================================
   CREDIT MARQUEE. Dark bookend, sits directly under the hero,
   unchanged, reads as the hero's closing frame.
   ============================================================ */
.marquee{
  border-block:1px solid rgba(255,255,255,.09);background:var(--mint);
  padding-block:1.5rem;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;gap:4rem;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(.8rem,1.4vw,1rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy-deep);white-space:nowrap;
  display:flex;align-items:center;gap:4rem;
}
.marquee span::after{content:'';width:4px;height:4px;background:var(--navy-deep);opacity:.55;border-radius:50%;flex:none}

/* ============================================================
   SITE FOOTER. Global BB footer module ships transparent; its
   own text/link colors (light grey) were built for a dark bar
   that was never actually given a background. Give it one.
   ============================================================ */
.dhf-template-generatepress.dhf-footer .site-footer{background:var(--navy-chrome) !important}
.entry-meta{display:none}

/* ============================================================
   VALUE PROPS. White body starts here.
   ============================================================ */
.props{background:var(--surface)}
.props__grid{display:grid;gap:2.6rem;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));margin-top:3.6rem}
.prop{display:flex;gap:1.5rem}
.prop__icon{
  flex:none;width:54px;height:54px;display:grid;place-items:center;
  border:1px solid rgba(22,133,114,.35);border-radius:2px;color:var(--mint-ink);
  background:var(--surface-tint);transition:.5s var(--ease);
}
.prop:hover .prop__icon{background:var(--mint);color:var(--navy-deep);border-color:var(--mint);transform:translateY(-3px)}
.prop h3{font-size:var(--step-1);margin-bottom:.6rem;letter-spacing:-.02em;color:var(--ink)}
.prop p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.65}

/* ============================================================
   THE FILM, a real asset the site was not using
   ============================================================ */
.film{background:var(--surface-tint);overflow:clip}
.film__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.film__grid{grid-template-columns:1.15fr .85fr}}
.film__frame{position:relative;padding:14px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:4px}
.film__frame img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(.12) contrast(1.02) brightness(1.0);
  transition:filter .8s var(--ease),transform .8s var(--ease);
}
.film__frame:hover img{filter:grayscale(0) contrast(1.05) brightness(1.02);transform:scale(1.012)}
.film__play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.film__play i{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--mint-ink);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  transition:.5s var(--ease);
}
.film__frame:hover .film__play i{background:var(--mint);border-color:var(--mint);transform:scale(1.06)}
.film__frame:hover .film__play svg{fill:var(--navy-deep)}
.film__play svg{fill:var(--mint-ink);margin-left:4px;transition:fill .5s var(--ease)}
.film h2{font-size:var(--step-3);margin-bottom:1.2rem;color:var(--ink)}
.film p{color:var(--ink-soft);margin:0 0 2rem}

/* ============================================================
   PACKAGE LADDER
   ============================================================ */
.packs{background:var(--surface)}
.packs__head{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;margin-bottom:3.4rem}
.packs__head h2{font-size:var(--step-3);max-width:14ch;color:var(--ink)}
.packs__grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.pack{
  position:relative;display:flex;flex-direction:column;
  padding:2.1rem 1.55rem 1.7rem;border:1px solid var(--card-line);border-radius:3px;
  background:var(--card-bg);box-shadow:0 1px 2px rgba(21,25,65,.04);
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.pack:hover{transform:translateY(-7px);border-color:rgba(22,133,114,.4);box-shadow:var(--card-shadow)}
.pack--flag{border-color:rgba(22,133,114,.45);background:linear-gradient(175deg,var(--surface-tint),var(--card-bg) 60%)}
.pack__flag{
  position:absolute;top:-1px;right:1.3rem;background:var(--mint);color:var(--navy-deep);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.34rem .62rem;
}
.pack__name{font-family:'Archivo',sans-serif;font-weight:800;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;margin:0 0 .5rem;line-height:1.3;color:var(--ink)}
.pack__tag{font-size:.84rem;color:var(--slate-dim);min-height:2.9em;margin:0 0 1.3rem;line-height:1.45}
.pack__price{font-family:'Archivo',sans-serif;font-size:var(--step-3);font-weight:800;letter-spacing:-.045em;color:var(--mint-ink);line-height:1;margin-bottom:1.4rem}
.pack ul{list-style:none;margin:0 0 1.7rem;padding:0;display:flex;flex-direction:column;gap:.62rem;flex:1}
.pack li{position:relative;padding-left:1.2rem;font-size:.855rem;color:var(--ink-soft);line-height:1.5}
.pack li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:1px;background:var(--mint-ink);opacity:.9}
.pack .btn{width:100%;justify-content:center;padding-inline:1rem}
.packs__foot{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between}

/* ============================================================
   CASTING DIRECTOR ROSTER, the real photography
   ============================================================ */
.roster{background:var(--surface-tint)}
.roster__grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin-top:3.4rem}
.cd{text-align:center;position:relative}
.cd__ph{
  position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin-bottom:1.15rem;isolation:isolate;background:var(--card-bg);
}
.cd__ph img{
  width:100%;height:100%;object-fit:cover;
  /* Full black and white at rest, David's request 2026-08-14. Was
     grayscale(.55), a partial desaturation. The reveal-to-color on hover
     (below) is unchanged, just starting from a fuller black and white now. */
  filter:grayscale(1) contrast(1.04) brightness(1.02);
  transition:filter .7s var(--ease),transform .9s var(--ease);
}
.cd:hover .cd__ph img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.05)}
.cd__ph::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(22,133,114,.3);
  box-shadow:inset 0 -18px 30px -26px rgba(21,25,65,.25);
  transition:border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.cd:hover .cd__ph::after{border-color:var(--mint-deep);box-shadow:0 0 24px -6px rgba(164,244,228,.55), inset 0 -18px 30px -28px rgba(21,25,65,.18)}
.cd h3{font-size:.92rem;letter-spacing:-.01em;margin-bottom:.35rem;color:var(--ink)}
.cd p{margin:0;font-size:.78rem;color:var(--slate-dim);line-height:1.5}

/* ============================================================
   BEST WORK POLICY, the pinned statement
   ============================================================ */
.bwp{background:var(--surface);overflow:clip}
.bwp__wrap{display:grid;gap:clamp(2.4rem,5vw,5rem);grid-template-columns:1fr}
@media(min-width:960px){.bwp__wrap{grid-template-columns:.92fr 1.08fr}}
.bwp__stick{position:sticky;top:clamp(6rem,14vh,9rem);align-self:start}
.bwp h2{font-size:var(--step-4);letter-spacing:-.035em;line-height:1.0;color:var(--ink)}
.bwp h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--mint-ink);letter-spacing:-.01em}
.bwp__body p{color:var(--ink-soft);font-size:var(--step-0);margin:0 0 1.5rem;max-width:56ch}
.bwp__body p:first-child{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:var(--step-2);
  color:var(--ink);line-height:1.34;
}
/* Iris rings, concentric, closing toward a vanishing point */
.iris{position:absolute;left:-14vw;bottom:-18vh;width:44vw;aspect-ratio:1;pointer-events:none;opacity:.28}
.iris i{position:absolute;inset:0;border:1px solid var(--mint-deep);border-radius:50%;opacity:.30}
.iris i:nth-child(2){inset:11%;opacity:.24}
.iris i:nth-child(3){inset:23%;opacity:.18}
.iris i:nth-child(4){inset:36%;opacity:.13}
.iris i:nth-child(5){inset:50%;opacity:.09}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{background:var(--surface-tint)}
.quotes__grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));margin-top:3.2rem}
.quote{
  padding:2rem 1.8rem;border:1px solid var(--card-line);border-radius:3px;
  background:var(--card-bg);position:relative;transition:.55s var(--ease);
}
.quote:hover{border-color:rgba(22,133,114,.35);transform:translateY(-5px);box-shadow:var(--card-shadow)}
.quote__mark{font-family:'Instrument Serif',serif;font-size:3.6rem;color:var(--mint-ink);opacity:.4;line-height:.6;display:block;margin-bottom:.7rem}
.quote p{margin:0 0 1.5rem;color:var(--ink-soft);font-size:.965rem;line-height:1.66}
.quote footer{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-ink)}
.quote footer span{display:block;color:var(--slate-dim);letter-spacing:.06em;text-transform:none;margin-top:.2rem;font-size:.76rem}
.placeholder-note{
  margin-top:1.8rem;padding:.85rem 1.1rem;border-left:2px solid var(--mint-ink);
  background:var(--surface-tint);font-size:.83rem;color:var(--slate-dim);
}

/* ============================================================
   CLASSES BAND, mint carries it. Unaffected either way, already
   a bright brand-color band rather than a navy fill.
   ============================================================ */
.band{background:var(--mint);color:var(--navy-deep);position:relative;overflow:clip}
.band__in{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:center;justify-content:space-between}
.band h2{font-size:var(--step-2);letter-spacing:-.03em;margin-bottom:.5rem;max-width:20ch}
.band p{margin:0;color:rgba(5,8,26,.76);font-size:.94rem;max-width:56ch}
.band .btn{--bg:var(--navy-deep);--fg:var(--mint);border-color:var(--navy-deep)}
.band .btn::after{background:var(--bone)}
.band .btn:hover{color:var(--navy-deep);box-shadow:0 12px 30px -16px rgba(5,8,26,.7)}
.band__sprockets{position:absolute;inset:0 auto 0 -2px;display:flex;opacity:.22}

/* ============================================================
   CLOSING CTA. Dark bookend, unchanged: the closing dramatic beat
   that mirrors the hero, on purpose.
   ============================================================ */
.close-cta{background:var(--navy-chrome);color:var(--bone);text-align:center;overflow:clip;position:relative}
.close-cta .eyebrow{color:var(--mint);justify-content:center}
.close-cta .eyebrow::before{background:var(--mint)}
.close-cta h2{font-size:var(--step-4);margin-bottom:1.2rem;color:var(--bone)}
.close-cta h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--mint)}
.close-cta p{color:#AEB8CC;max-width:48ch;margin:0 auto 2.4rem}
.close-cta__actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;justify-content:center;align-items:center}
.glowfield{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(900px,120%);aspect-ratio:2/1;
  background:radial-gradient(ellipse at center, rgba(164,244,228,.12), transparent 66%);
  pointer-events:none;
}

/* ============================================================
   FOOTER. Dark bookend, unchanged: closes the page the same way
   the hero opens it.
   ============================================================ */
.foot{background:var(--navy-deep);color:var(--bone);border-top:1px solid rgba(255,255,255,.08);padding-block:2.6rem;text-align:center}
.foot img{height:30px;margin:0 auto 1.2rem;opacity:.9}
.foot p{margin:0;font-size:.78rem;color:var(--slate-dim)}

/* ============================================================
   PAGE 2, REEL PACKAGES

   .subhero is the dark bookend for every inner page: the same role
   the hero plays on Home. It stays navy on purpose, whether or not a
   photo is added. Everything after it in each page is white.
   ============================================================ */

.subhero{
  position:relative;padding-block:clamp(9rem,16vh,12rem) clamp(3.5rem,7vw,6rem);
  background:var(--navy-chrome);overflow:clip;color:var(--bone);
}
.subhero .eyebrow{color:var(--mint)}
.subhero .eyebrow::before{background:var(--mint)}
.subhero h1{font-size:var(--step-4);max-width:15ch;margin-bottom:1.5rem;color:var(--bone)}
.subhero h1 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--mint)}
.subhero p{color:#CBD3E4}

/* Comparison table */
.cmp{background:var(--surface)}
.cmp__scroll{overflow-x:auto;margin-top:2.8rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.88rem}
thead th{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);text-align:center;
  padding:1.2rem .8rem;border-bottom:1px solid rgba(22,133,114,.35);vertical-align:bottom;
}
thead th:first-child{text-align:left}
thead th.hot{color:var(--mint-ink)}
thead th small{display:block;font-family:'Inter Tight',sans-serif;font-weight:400;font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--slate-dim);margin-top:.3rem}
tbody th{
  text-align:left;font-weight:500;color:var(--ink-soft);padding:1rem .8rem;font-size:.86rem;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{
  text-align:center;padding:1rem .8rem;border-bottom:1px solid var(--line);color:var(--ink);
}
tbody tr:hover th,tbody tr:hover td{background:var(--surface-tint)}
td.hot{background:rgba(164,244,228,.10)}
.tick{color:var(--mint-ink);font-weight:700}
.dash{display:inline-block;width:14px;height:1px;background:var(--slate);vertical-align:middle}
.pricerow td{font-family:'Archivo',sans-serif;font-weight:800;font-size:var(--step-1);color:var(--mint-ink);letter-spacing:-.03em}

/* Which package, accordion */
.which{background:var(--surface-tint)}
.acc{margin-top:2.6rem;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  cursor:pointer;list-style:none;padding:1.5rem .4rem;display:flex;align-items:center;gap:1.2rem;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--step-1);letter-spacing:-.02em;
  color:var(--ink);transition:color .4s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--mint-ink)}
.acc summary .n{font-size:.72rem;letter-spacing:.16em;color:var(--mint-ink);font-weight:800;flex:none;width:2.4ch}
.acc summary .pl{margin-left:auto;flex:none;width:14px;height:14px;position:relative}
.acc summary .pl::before,.acc summary .pl::after{content:'';position:absolute;background:var(--mint-ink);transition:transform .4s var(--ease)}
.acc summary .pl::before{inset:6px 0 auto;height:1.5px}
.acc summary .pl::after{inset:0 6px auto;width:1.5px;height:14px}
.acc details[open] summary .pl::after{transform:scaleY(0)}
.acc details[open] summary{color:var(--mint-ink)}
.acc__body{padding:0 .4rem 1.9rem calc(2.4ch + 1.2rem);color:var(--ink-soft);max-width:74ch}
.acc__body p{margin:0 0 1rem}
.acc__price{display:inline-flex;align-items:baseline;gap:.6rem;margin-top:.4rem}
.acc__price b{font-family:'Archivo',sans-serif;font-size:var(--step-1);color:var(--mint-ink);font-weight:800}

/* Included grid */
.incl{background:var(--surface)}
.incl__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));margin-top:3rem}
.incl__item{
  display:flex;gap:1.1rem;padding:1.5rem 1.4rem;border:1px solid var(--card-line);
  border-radius:3px;background:var(--card-bg);transition:.5s var(--ease);
}
.incl__item:hover{border-color:rgba(22,133,114,.4);transform:translateY(-4px);box-shadow:var(--card-shadow)}
.incl__item i{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--mint-ink);color:var(--mint-ink);font-size:.68rem;font-weight:700;font-style:normal;
  font-family:'Archivo',sans-serif;
}
.incl__item p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.6}

/* Add-ons */
.addons{background:var(--surface-tint)}
.addons__list{margin-top:2.6rem;border-top:1px solid var(--line)}
.addon{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;justify-content:space-between;
  padding:1.35rem .4rem;border-bottom:1px solid var(--line);transition:.4s var(--ease);
}
.addon:hover{background:var(--card-bg);padding-inline:1rem .4rem}
.addon span{color:var(--ink-soft);font-size:.95rem;max-width:62ch}
.addon b{font-family:'Archivo',sans-serif;font-weight:800;color:var(--mint-ink);font-size:var(--step-1);letter-spacing:-.03em;white-space:nowrap}
.genres{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.genres em{font-style:normal;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-dim);margin-right:.6rem}
.chip{
  padding:.45rem .95rem;border:1px solid rgba(22,133,114,.35);border-radius:2px;
  font-size:.78rem;letter-spacing:.08em;color:var(--mint-ink);transition:.4s var(--ease);
}
.chip:hover{background:var(--mint);border-color:var(--mint);color:var(--navy-deep)}

/* ============================================================
   PROCESS TIMELINE, How It Works
   ============================================================ */
.steps{background:var(--surface);position:relative}
.steps__list{list-style:none;margin:3.4rem 0 0;padding:0;position:relative}
.steps__list::before{
  content:'';position:absolute;left:31px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(var(--mint-deep),rgba(111,216,194,.15));opacity:.6;
}
@media(max-width:700px){.steps__list::before{left:19px}}
.step{display:flex;gap:1.9rem;padding-bottom:3.2rem;position:relative}
.step:last-child{padding-bottom:0}
.step__num{
  flex:none;width:63px;height:63px;border-radius:50%;display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;
  color:var(--mint-ink);background:var(--card-bg);
  border:1px solid rgba(22,133,114,.4);position:relative;z-index:1;
  transition:.6s var(--ease);
}
.step:hover .step__num{background:var(--mint);color:var(--navy-deep);border-color:var(--mint);box-shadow:0 0 26px -8px rgba(164,244,228,.6)}
@media(max-width:700px){.step{gap:1.15rem}.step__num{width:39px;height:39px;font-size:.8rem}}
.step__eyebrow{font-family:'Archivo',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-dim);margin:0 0 .5rem}
.step h3{font-size:var(--step-2);margin-bottom:.75rem;color:var(--ink)}
.step p{margin:0 0 1rem;color:var(--ink-soft);max-width:60ch}
.step__sub{
  border-left:2px solid rgba(22,133,114,.4);padding:.15rem 0 .15rem 1.1rem;
  font-size:.9rem;color:var(--slate-dim);margin-top:1.2rem!important;
}
.step__note{display:inline-flex;align-items:center;gap:.55rem;color:var(--mint-ink);font-size:.86rem;font-weight:500}
.step__note::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mint-ink)}
#scenesteps .step__num{background:var(--surface-tint)}
.gtk{margin-top:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(264px,1fr))}
.gtk__item{padding:1.4rem 1.35rem;border:1px solid var(--card-line);border-radius:3px;background:var(--card-bg);font-size:.89rem;color:var(--ink-soft);line-height:1.6;transition:.5s var(--ease)}
.gtk__item:hover{border-color:rgba(22,133,114,.4);transform:translateY(-4px);box-shadow:var(--card-shadow)}

/* ============================================================
   FORK, two ways to work with us
   ============================================================ */
.fork{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:3rem}
.forkcard{
  padding:2.2rem 1.9rem;border:1px solid var(--card-line);border-radius:3px;
  background:var(--card-bg);
  display:flex;flex-direction:column;transition:.55s var(--ease);
}
.forkcard:hover{border-color:rgba(22,133,114,.45);transform:translateY(-6px);box-shadow:var(--card-shadow)}
.forkcard h3{font-size:var(--step-2);margin-bottom:.9rem;color:var(--ink)}
.forkcard > p{color:var(--ink-soft);margin:0 0 1.6rem;font-size:.95rem}
.forkcard dl{margin:0 0 1.7rem;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.2rem;font-size:.87rem;flex:1;align-content:start}
.forkcard dt{color:var(--slate-dim);letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;padding-top:.22em}
.forkcard dd{margin:0;color:var(--ink)}
.forkcard dd.from{font-family:'Archivo',sans-serif;font-weight:800;color:var(--mint-ink);font-size:var(--step-1);letter-spacing:-.03em}
.callout{
  margin-top:2.6rem;padding:1.3rem 1.5rem;border:1px solid rgba(22,133,114,.3);
  border-radius:3px;background:var(--surface-tint);color:var(--ink-soft);font-size:.92rem;
}
.callout strong{color:var(--mint-ink);font-weight:600}

.pricecols{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:2.8rem}
.pricecol h4{font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mint-ink);margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid rgba(22,133,114,.3)}
.pricerow2{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;padding:1.05rem 0;border-bottom:1px solid var(--line);transition:.4s var(--ease)}
.pricerow2:hover{padding-left:.6rem}
.pricerow2 div{min-width:0}
.pricerow2 b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:.94rem;letter-spacing:-.01em;margin-bottom:.2rem;color:var(--ink)}
.pricerow2 small{color:var(--slate-dim);font-size:.82rem;line-height:1.5;display:block}
.pricerow2 em{font-style:normal;font-family:'Archivo',sans-serif;font-weight:800;color:var(--mint-ink);font-size:var(--step-1);letter-spacing:-.03em;white-space:nowrap}

.qlist{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.qlist li{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:var(--step-1);
  color:var(--ink-soft);padding-left:1.6rem;position:relative;line-height:1.4;
}
.qlist li::before{content:'';position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--mint-ink)}

/* ============================================================
   BIO CARDS, Our Casting Directors
   ============================================================ */
.bios{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:3.4rem}
.bio{
  display:flex;flex-direction:column;padding:1.9rem;border:1px solid var(--card-line);
  border-radius:3px;background:var(--card-bg);
  transition:.55s var(--ease);
}
.bio:hover{border-color:rgba(22,133,114,.42);transform:translateY(-6px);box-shadow:var(--card-shadow)}
.bio__top{display:flex;gap:1.2rem;align-items:center;margin-bottom:1.3rem}
.bio__ph{flex:none;width:82px;height:82px;border-radius:50%;overflow:hidden;position:relative;background:var(--surface-tint)}
/* Full black and white at rest, David's request 2026-08-14, same change as
   .cd__ph img: was grayscale(.4). Reveal-to-color on hover unchanged. */
.bio__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.02);transition:.7s var(--ease)}
.bio:hover .bio__ph img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
.bio__ph::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(22,133,114,.3);transition:.6s var(--ease)}
.bio:hover .bio__ph::after{border-color:var(--mint-deep);box-shadow:0 0 20px -6px rgba(164,244,228,.55)}
.bio h3{font-size:var(--step-1);margin-bottom:.3rem;color:var(--ink)}
.bio__role{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint-ink);margin:0}
.bio p.bio__b{color:var(--ink-soft);font-size:.9rem;margin:0 0 1.4rem;line-height:1.62;flex:1}
.bio__links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.bio__links a{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.42rem .8rem;border:1px solid rgba(22,133,114,.32);border-radius:2px;color:var(--mint-ink);
  transition:.4s var(--ease);
}
.bio__links a:hover{background:var(--mint);border-color:var(--mint);color:var(--navy-deep)}

/* ============================================================
   CLASSES
   ============================================================ */
.openclass{
  position:relative;padding:clamp(2.2rem,4vw,3.4rem);border-radius:3px;margin-top:3rem;
  border:1px solid rgba(22,133,114,.4);
  background:linear-gradient(150deg,var(--surface-tint),var(--card-bg) 62%);
  overflow:hidden;
}
.openclass::after{
  content:'';position:absolute;right:-9%;top:-42%;width:46%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(22,133,114,.3);pointer-events:none;
}
.openclass__tag{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--mint);color:var(--navy-deep);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.42rem .85rem;margin-bottom:1.5rem;
}
.openclass__tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--navy-deep);animation:blip 2s var(--ease) infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.openclass h3{font-size:var(--step-3);margin-bottom:.9rem;max-width:20ch;color:var(--ink)}
.openclass__sub{color:var(--ink-soft);margin:0 0 2rem;font-size:var(--step-1);font-weight:300;max-width:52ch}
.openclass__facts{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;margin-bottom:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(22,133,114,.25)}
.openclass__facts div{display:flex;flex-direction:column;gap:.15rem}
.openclass__facts b{font-family:'Archivo',sans-serif;font-size:var(--step-1);font-weight:800;color:var(--mint-ink);letter-spacing:-.02em}
.openclass__facts span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-dim)}
.runlist{margin-top:2.6rem;border-top:1px solid var(--line)}
.runrow{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:space-between;
  padding:1.15rem .3rem;border-bottom:1px solid var(--line);transition:.4s var(--ease);
}
.runrow:hover{background:var(--surface-tint);padding-inline:.9rem .3rem}
.runrow b{font-family:'Archivo',sans-serif;font-weight:700;font-size:.97rem;letter-spacing:-.01em;color:var(--ink)}
.runrow span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim)}
.runrow span.live{color:var(--mint-ink)}

/* ============================================================
   ADD-ONS, grouped by stage
   ============================================================ */
.stage{margin-top:3rem}
.stage__h{
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint-ink);display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;
}
.stage__h::after{content:'';flex:1;height:1px;background:rgba(22,133,114,.3)}
.stage__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.acard{
  padding:1.8rem 1.6rem;border:1px solid var(--card-line);border-radius:3px;
  background:var(--card-bg);transition:.55s var(--ease);
}
.acard:hover{border-color:rgba(22,133,114,.42);transform:translateY(-5px);box-shadow:var(--card-shadow)}
.acard__top{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;margin-bottom:.9rem}
.acard h3{font-size:var(--step-1);color:var(--ink)}
.acard__price{font-family:'Archivo',sans-serif;font-weight:800;color:var(--mint-ink);font-size:var(--step-1);letter-spacing:-.03em;white-space:nowrap}
.acard p{margin:0 0 1rem;color:var(--ink-soft);font-size:.9rem;line-height:1.62}
.acard__eg{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;color:var(--mint-ink);
  background:var(--surface-tint);border-left:2px solid rgba(22,133,114,.5);
  padding:.7rem .9rem;margin:0 0 1rem;line-height:1.55;word-break:break-word;
}
.acard__note{font-size:.82rem;color:var(--slate-dim);margin:0}

/* ============================================================
   FAQ
   ============================================================ */
.faqgroup{margin-top:3rem}
.faqgroup > h3{
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint-ink);display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem;
}
.faqgroup > h3::after{content:'';flex:1;height:1px;background:rgba(22,133,114,.3)}
.faqgroup .acc summary{font-size:var(--step-0);padding-block:1.25rem}
.faqgroup .acc summary .n{display:none}
.faqgroup .acc__body{padding-left:.4rem}
.faqgroup .acc__body p{white-space:pre-line}
.draftchip{
  display:inline-block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-deep);background:var(--mint);padding:.22rem .55rem;border-radius:2px;
  margin-bottom:.6rem;font-family:'Archivo',sans-serif;font-weight:800;
}
.blankmark{
  display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-dim);border:1px dashed rgba(93,105,128,.5);padding:.3rem .7rem;border-radius:2px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.routes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));margin-top:2.8rem}
.route{
  display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 1.4rem;text-decoration:none;
  border:1px solid var(--card-line);border-radius:3px;background:var(--card-bg);
  transition:.5s var(--ease);
}
.route:hover{border-color:rgba(22,133,114,.45);transform:translateY(-4px);box-shadow:var(--card-shadow)}
.route i{flex:none;color:var(--mint-ink);font-style:normal;font-size:1.1rem;line-height:1.4;transition:transform .45s var(--ease)}
.route:hover i{transform:translateX(3px)}
.route span{color:var(--ink-soft);font-size:.9rem;line-height:1.6}
.formwrap{
  margin-top:3rem;padding:clamp(1.8rem,4vw,2.8rem);border:1px solid var(--card-line);
  border-radius:3px;background:var(--surface-tint);
}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.field label{font-family:'Archivo',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-dim)}
.field input,.field textarea{
  background:var(--card-bg);border:1px solid rgba(21,25,65,.18);border-radius:2px;
  color:var(--ink);font-family:inherit;font-size:.95rem;padding:.9rem 1rem;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--mint-deep);box-shadow:0 0 0 3px rgba(164,244,228,.22)}
.field textarea{resize:vertical;min-height:150px}
.formrow{display:grid;gap:0 1.3rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}


@media(max-width:600px){
  /* Was 4rem, tightened with the desktop values on 2026-08-11 */
  .pad{padding-block:2rem}
  .pad-sm{padding-block:1.5rem}
  .hero__meta{gap:1.2rem 1.8rem}
  .brackets::before,.brackets::after{width:18px;height:18px}
  .bio__top{flex-direction:column;align-items:flex-start}
}
/* ============================================================
   PAGE BUILD HOOKS
   Classes used by the ported mu-plugin page builds. The prototype
   does not need these because it has no WordPress theme wrapper
   and no media fields.
   ============================================================ */

/* Every ported page wraps itself in .tcdc-page so the design can
   escape the theme's content width without touching theme CSS.
   This is the white canvas: individual sections inside it (.hero,
   .subhero, .close-cta, .foot) still lay down their own dark
   background on top of this white base where they need to. */
.tcdc-page{
  margin-inline:calc(50% - 50vw);
  width:100vw;
  background:var(--surface);
  color:var(--ink);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:var(--step-0);
  line-height:1.62;
  overflow-x:clip;
  position:relative;
}

/* GeneratePress puts 60px of padding on .inside-article, top and bottom.
   On a normal post that is correct. On a ported full-bleed page it lays
   a 60px white band between the navy site header and the navy .subhero,
   and another between the navy .close-cta and the navy site footer, so
   the dark-open/dark-close rhythm breaks at both ends. Added 2026-08-11.
   :has() is supported everywhere current; an older browser simply keeps
   the 60px it has today, so this degrades to the present behaviour. */
.inside-article:has(.tcdc-page){
  padding-top:0;
  padding-bottom:0;
}
/* Same problem, 20px of it, one level further out. */
main.site-main:has(.tcdc-page){
  margin-top:0;
  margin-bottom:0;
}
.tcdc-page h1,.tcdc-page h2,.tcdc-page h3,.tcdc-page h4{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;line-height:1.02;
  letter-spacing:-.025em;margin:0;text-wrap:balance;color:var(--ink);
}
.tcdc-page h1{font-size:var(--step-4);max-width:15ch;margin-bottom:1.5rem}
.tcdc-page p{margin:0 0 1rem}
.tcdc-page a{color:inherit}
.tcdc-page img{max-width:100%;display:block;height:auto}
.tcdc-page ol,.tcdc-page ul{margin:0;padding:0}
/* The dark bookends still need bone-colored headings on their own navy fill */
.tcdc-page .hero h1,.tcdc-page .subhero h1,.tcdc-page .close-cta h2{color:var(--bone)}

/* Optional hero photograph behind a subhero. Kept dark, matching the
   hero: this is a photograph, not a flat fill, and it belongs to the
   dark bookend by design. */
.subhero__media{position:absolute;inset:-8% 0 0;z-index:0;overflow:hidden}
.subhero__media img{
  width:100%;height:116%;object-fit:cover;object-position:50% 34%;
  filter:grayscale(.72) contrast(1.16) brightness(.40);will-change:transform;
}
.subhero__wash{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg, rgba(5,8,26,.86) 0%, rgba(10,14,38,.66) 38%, rgba(5,8,26,.94) 86%, var(--navy-deep) 100%);
}
.subhero > .shell{position:relative;z-index:2}

/* Optional image inside a process step. This sits in the white body,
   so the photo reads true rather than darkened into a navy field. */
.step__fig{margin:1.4rem 0 0;padding:12px;position:relative;background:var(--card-bg);border:1px solid var(--card-line);border-radius:4px}
.step__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.1) contrast(1.02) brightness(1.0);transition:filter .7s var(--ease)}
.step__fig:hover img{filter:none}

/* Optional image behind a closing call to action. Kept dark like the
   hero: a moody photograph is not the same thing as a black canvas. */
.close-cta__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.close-cta__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) brightness(.34)}
.close-cta > .shell,.close-cta > .shell-narrow{position:relative;z-index:2}
.close-cta .glowfield{z-index:1}

/* ============================================================
   HOW IT WORKS PAGE, scoped fix, Aug 11 2026
   Two things David flagged at the bottom of this page:

   1. The "Good to know" section sat on --abyss (#05081A), a near-
      black navy directly above the .close-cta section's own
      --navy-chrome (#1D1F43) fill. The two are both dark blues but
      not the same one, so the seam between them read as a mismatch
      rather than a deliberate break. Changed to mint with navy
      text so the section is visibly its own block.

   2. The closing "Create My Reel" button is .btn with its default
      mint fill, but site-wide .tcdc-page a{color:inherit} overrides
      .btn's own --fg:var(--navy-deep) text color, so it inherited
      --bone (off-white) from .close-cta instead. A pale mint box
      with near-white text reads as a white button. Flipped to a
      black fill with mint text, the same swap already used on
      .band .btn elsewhere in this file.

   Both scoped to .tcdc-page--how so no other page reusing .gtk,
   .gtk__item or .close-cta .btn is affected.
   ============================================================ */
.tcdc-page--how .gtk-section{background:var(--mint)}
.tcdc-page--how .gtk-section .eyebrow{color:var(--navy-deep)}
.tcdc-page--how .gtk-section .eyebrow::before{background:var(--navy-deep)}
.tcdc-page--how .gtk-section .gtk__item{background:rgba(255,255,255,.55);border-color:rgba(21,25,65,.18);color:var(--navy-deep)}
.tcdc-page--how .gtk-section .gtk__item:hover{border-color:rgba(21,25,65,.32)}

.tcdc-page--how .close-cta .btn{--bg:var(--navy-deep);--fg:var(--mint);border-color:var(--navy-deep)}
.tcdc-page--how .close-cta .btn::after{background:var(--bone)}
.tcdc-page--how .close-cta .btn:hover{color:var(--navy-deep);box-shadow:0 12px 30px -16px rgba(5,8,26,.7)}

/* ============================================================
   ABOUT US / OUR CASTING DIRECTORS PAGE, scoped fix, Aug 11 2026

   1. New "Why this exists" portrait, .why-portrait. Framed like the
      process-step photo (.step__fig) with the brand's bracket motif,
      a small uppercase caption underneath. Generic, unprefixed: it is
      only ever printed by this page's own template, so no page scope
      is needed to avoid collisions.

   2. Both closing-CTA buttons on this page read pale/white instead of
      navy, the same site-wide .tcdc-page a{color:inherit} bug fixed
      for How It Works above (see that entry for the root cause).
      "Create My Reel" (.btn) needed navy text while NOT hovered.
      "Book A Consulting Session" (.btn--ghost) needed navy text WHILE
      hovered. Scoped to .tcdc-page--cds, this page's own wrapper
      class, so no other page's .close-cta buttons are touched.
   ============================================================ */
.why-portrait{margin:2.2rem 0 0;max-width:360px;padding:10px;background:var(--card-bg);border:1px solid var(--card-line);border-radius:4px}
.why-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;border-radius:2px;filter:grayscale(.08) contrast(1.02);display:block}
.why-portrait__cap{margin:.85rem 0 0;font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mint-ink);white-space:nowrap}

@media(min-width:960px){
  .tcdc-page--cds .bwp__stick{padding-left:2.2rem}
}

.tcdc-page--cds .close-cta .btn{color:var(--navy-deep)}
.tcdc-page--cds .close-cta .btn:hover{color:var(--mint)}
.tcdc-page--cds .close-cta .btn--ghost:hover{color:var(--navy-deep)}
.tcdc-page--cds .close-cta .btn--ghost{background:var(--bone);border-color:var(--bone)}

/* ============================================================
   ADD-ONS PAGE, scoped fix, Aug 12 2026
   Same site-wide .tcdc-page a{color:inherit} bug fixed on How It Works
   and Our Casting Directors above: .close-cta's inherited --bone
   (off-white) text color was overriding .btn's own navy --fg, so
   "Create My Reel" read as a pale mint box with near-white, hard to
   read text. Scoped to .tcdc-page--addons so no other page's
   .close-cta .btn is affected.
   ============================================================ */
.tcdc-page--addons .close-cta .btn{color:var(--navy-deep)}
.tcdc-page--addons .close-cta .btn:hover{color:var(--mint)}

/* ============================================================
   HOME PAGE, scoped fix, 2026-08-14
   Same site-wide .tcdc-page a{color:inherit} bug fixed on How It
   Works, Our Casting Directors, Add-ons and FAQ above: .hero and
   .close-cta both set their own text color (--bone) for the section,
   which beats .btn's own navy --fg on specificity, so "Create My
   Reel" read as pale, near-white text on the mint button in both
   places it appears on this page, the hero and the closing CTA.

   Retraction, 2026-08-13: hover was NOT already correct. The site-wide
   .btn:hover rule sets color to var(--mint), which is fine on pages
   where hover also swaps the background away from mint, but home's
   .hero .btn and .close-cta .btn keep a mint background permanently,
   so on hover the text became mint-on-mint, invisible, same bug as the
   resting state just missed the first time. Fixed below by pinning
   hover color to navy-deep too, same as resting state. Scoped to
   .tcdc-page--home so no other page's .hero or .close-cta .btn is
   touched.
   ============================================================ */
.tcdc-page--home .hero{border-top:2px solid var(--mint-deep)}
.tcdc-page--home .hero .btn{color:var(--navy-deep)}
.tcdc-page--home .close-cta .btn{color:var(--navy-deep)}
.tcdc-page--home .hero .btn:hover{color:var(--navy-deep)}
.tcdc-page--home .close-cta .btn:hover{color:var(--navy-deep)}

/* ============================================================
   WORK WITH A CD PAGE, added 2026-08-11
   ============================================================ */
/* Time allotment called out inside the pricing column descriptions.
   David's note: the two columns read as one flat grey block and the
   durations (20/40/60 minutes) got lost in the sentence. */
.tdur{color:var(--mint-ink);font-weight:700}
.pack__price .compare{display:block;color:var(--slate-dim);font-weight:400;font-size:.6em;letter-spacing:0;text-transform:none;margin-top:.3rem}

/* Break up the run of white sections with the shared faint mint tint,
   same variable every other page already alternates with. Order on
   this page: props (white) -> membership (tint) -> packs (white) ->
   bwp (tint) -> incl (white, already on --surface). */
.tcdc-page--work #tcdc-membership{background:var(--surface-tint)}
.tcdc-page--work .bwp{background:var(--surface-tint)}

/* ============================================================
   FAQ PAGE, scoped fix, Aug 12 2026

   The closing "Contact Us" button sits in a .band section (mint
   background, navy text by default). .band .btn already flips its
   --fg to mint for a navy-on-mint button, but the site-wide
   .tcdc-page a{color:inherit} rule beats .btn's own color:var(--fg)
   rule on specificity, so the anchor inherited the section's own
   navy text color instead. Navy button, navy text, unreadable.
   Scoped to .tcdc-page--faq so no other page's .band .btn is
   touched.
   ============================================================ */
.tcdc-page--faq .band .btn{color:var(--mint)}