/* ============================================================
   CameraNvideo mirror — OUR tuning layer (loads AFTER the dev's
   compiled /_next CSS so these win the cascade). NEVER edit the
   /_next chunks; put every hand fine-tune here so it survives.
   Selectors use tag+class (e.g. section.hero-section) so they beat
   the compiled single-class rules without needing !important.
   ============================================================ */

/* --- HERO: clear the top of the viewfinder frame off the nav line ---
   The hero's corner brackets (.hero-corner) sit at the section's top
   edge (top:0), which was flush against the <nav> 1px divider — the two
   sections "cut" into each other. A margin-top drops the whole framed
   hero (brackets + content) down together, opening breathing room.
   Fluid: ~22px on a phone → ~40px on a wide laptop. */
section.hero-section{
  margin-top: clamp(22px, 2.8vw, 40px);
}

/* Phones: a touch less so the fold still shows the frame + headline,
   but never touching the nav. */
@media (max-width: 640px){
  section.hero-section{
    margin-top: 20px;
  }
}

/* === "FIVE SERVICES" CRAFTS CAROUSEL — tame the desktop scroll-jack ===
   The dev pins this section for 300vh (~3 screens), so you had to scroll
   4–5× to get past it. The premium cards are motion-graphic VIDEOS that
   depend on the pinned/scroll setup — fully un-pinning COLLAPSES them — so
   we SHORTEN the pin to ~125vh: the cards still hold a beat, then the page
   moves on in a single scroll. Cards + their links stay exactly as designed.
   Desktop only (≥768px); phones already scroll fine (separate swipe carousel),
   so we leave them untouched. */
@media (min-width: 768px){
  /* FULLY UN-PIN the section → it becomes a normal static row, exactly tall
     enough for the cards. This removes BOTH the 300vh scroll-jack AND the big
     blank the 100vh sticky pin left below the cards. */
  .crafts-section{ height: auto !important; }
  .crafts-pin{ position: static !important; height: auto !important; }

  /* Un-pinning otherwise collapses the cards (their video area is flex:1;
     min-height:0 with no intrinsic height), so give each card a DEFINITE height
     so the video fills it. ~520px matches the dev's studio-card max-height. */
  .crafts-track{ width: 100% !important; gap: 12px !important; }
  .crafts-track .crafts-slide{
    flex: 1 1 0 !important; min-width: 0 !important; height: 520px !important;
  }
  .crafts-track .crafts-slide > div{ height: 100% !important; }
  .crafts-track .crafts-slide .studio-card{ height: 100% !important; }

  /* tuck header type down a hair so longer titles don't clip in the narrower 5-up */
  .crafts-track .crafts-slide .studio-card h3{
    font-size: 12px !important;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* card "art" is a 560px video with LEFT-aligned text — anchor left so the
     narrow 5-up doesn't centre-crop the titles ("Premium"→"emium"). */
  .crafts-track .crafts-slide .studio-card-artifact video{
    object-position: left center !important;
  }
  /* the "01 / 04" counter is stale now there are five — hide it */
  .crafts-indicator{ display: none !important; }
}

/* ============================================================
   "YOUR STORY DELIVERED — WITHOUT" (the .method-section)
   ============================================================ */

/* (A) Float the dark video panel: drop the big taupe frame (.method-after pad +
   .cost-video-tile pad + their fills) and give the screen a premium 3D shadow so
   it reads as a lifted display, not a boxed-in tile. Desktop only. */
@media (min-width: 768px){
  .method-after{ background: transparent !important; padding: 20px 0 44px !important; }
  .cost-video-tile{ background: transparent !important; padding: 0 !important; }
  .cost-video-frame{
    box-shadow:
      0 6px 18px rgba(32,19,21,.08),
      0 26px 50px -14px rgba(32,19,21,.24),
      0 60px 120px -40px rgba(32,19,21,.34) !important;
  }
}

/* (C) The struck-out cost labels (Agency mark-up / Rental bills / …): the static
   line was sitting ON the text and killing legibility. Make the text bigger +
   readable, and replace the static strike with a coral line that DRAWS across on
   a continuous loop (staggered card-to-card) — telling the "eliminated" story. */
/* The pill (span around the <s>) had 24px side padding leaving lots of empty
   room — trim it so a bigger label fills the button + the longest one
   ("Post-house pass-through") still fits on one line. */
.method-grid span:has(> s){ padding-left: 14px !important; padding-right: 14px !important; }
.method-grid s{
  font-size: 17px !important;       /* up from 13px — fills the pill */
  letter-spacing: 0.8px !important; /* a touch tighter so the long label fits */
  text-decoration: none !important;
  position: relative !important;
  white-space: nowrap;
}
.method-grid s::after{
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; margin-top: -1px;   /* dead-centre on the text */
  height: 2px; background: #e76d57; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  animation: cnvStrike 3.4s ease-in-out infinite;
}
.method-grid > *:nth-child(2) s::after{ animation-delay: .3s; }
.method-grid > *:nth-child(3) s::after{ animation-delay: .6s; }
.method-grid > *:nth-child(4) s::after{ animation-delay: .9s; }
@keyframes cnvStrike{
  0%{ transform: scaleX(0) } 20%{ transform: scaleX(1) }
  80%{ transform: scaleX(1) } 100%{ transform: scaleX(0) }
}

/* (D) The four "without" cards rise in one-by-one when the section scrolls into
   view. DEFAULT state = fully visible (no hiding) — the stagger only plays once
   JS adds html.cnv-method-in, so a JS hiccup can never leave the cards blank. */
@keyframes cnvCardRise{ from{ opacity: 0; transform: translateY(30px) } to{ opacity: 1; transform: none } }
html.cnv-method-in .method-grid > *{ animation: cnvCardRise .65s cubic-bezier(.22,.61,.36,1) backwards; }
html.cnv-method-in .method-grid > *:nth-child(1){ animation-delay: .10s; }
html.cnv-method-in .method-grid > *:nth-child(2){ animation-delay: .30s; }
html.cnv-method-in .method-grid > *:nth-child(3){ animation-delay: .50s; }
html.cnv-method-in .method-grid > *:nth-child(4){ animation-delay: .70s; }

@media (prefers-reduced-motion: reduce){
  .method-grid s::after{ animation: none !important; transform: scaleX(1) !important; }
  html.cnv-method-in .method-grid > *{ animation: none !important; }
}

/* ============================================================
   FOUNDER — full redesign (#cnv-founder, injected; dev's #about hidden)
   Showreel video (native scrub/mute controls) + portrait curtain reveal.
   ============================================================ */
#about.cnv-about-hidden{ display: none !important; }

#cnv-founder{ background:#f8f3eb; padding: clamp(54px,7vw,108px) clamp(20px,4vw,64px); overflow:hidden; }
#cnv-founder *{ box-sizing:border-box; }
.cnv-fdr-inner{ max-width:1280px; margin:0 auto; }
.cnv-fdr-eyebrow{ font-family:'Poppins',system-ui,sans-serif; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:#e76d57; font-weight:600; }
.cnv-fdr-name{ font-family:'Poppins',system-ui,sans-serif; font-weight:800; font-size:clamp(40px,6.2vw,86px); line-height:.96; letter-spacing:-.015em; color:#201315; margin:.12em 0 0; }
.cnv-fdr-name em{ font-style:normal; color:#e76d57; }

.cnv-fdr-grid{ display:grid; grid-template-columns:0.80fr 1.20fr; gap:clamp(28px,4vw,60px); margin-top:clamp(30px,4vw,54px); align-items:start; }
@media (max-width:900px){ .cnv-fdr-grid{ grid-template-columns:1fr; gap:32px; } }

/* LEFT — portrait (curtain) + bio + quote */
.cnv-fdr-portrait{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 6px 18px rgba(32,19,21,.08), 0 30px 60px -18px rgba(32,19,21,.28); }
.cnv-fdr-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; transform:scale(1.06); }
html.cnv-fdr-in .cnv-fdr-portrait img{ transform:scale(1); transition:transform 2.6s cubic-bezier(.22,.61,.36,1); }
.cnv-fdr-curtain{ position:absolute; inset:0; z-index:3; background:linear-gradient(180deg,#efe7d8,#e1d5c0); }
/* coral accent at the curtain's TOP edge = the reveal line that sweeps downward */
.cnv-fdr-curtain::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:#e76d57; opacity:.6; }
/* curtain slides DOWN → photo reveals TOP-to-BOTTOM, slow + cinematic */
html.cnv-fdr-in .cnv-fdr-curtain{ transform:translateY(101%); transition:transform 2.2s cubic-bezier(.6,.02,.25,1); }
.cnv-fdr-portrait .cap{ position:absolute; left:18px; bottom:16px; z-index:2; color:#f8f3eb; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.cnv-fdr-portrait .cap span{ display:block; font-family:'Poppins',sans-serif; font-size:11px; letter-spacing:.22em; opacity:.9; }
.cnv-fdr-portrait .cap em{ font-family:'Poppins',system-ui,sans-serif; font-style:normal; font-weight:600; font-size:23px; line-height:1.15; letter-spacing:-.01em; }
.cnv-fdr-bio{ margin:24px 0 0; font-family:'Poppins',sans-serif; font-size:clamp(16.5px,1.25vw,18.5px); line-height:1.72; color:#3a2a2c; }
.cnv-fdr-quote{ margin:18px 0 0; padding-top:18px; border-top:1px solid #d8ccba; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:clamp(16px,1.3vw,20px); line-height:1.45; color:#201315; }

/* RIGHT — the showreel */
.cnv-fdr-video{ position:relative; border-radius:14px; overflow:hidden; background:#201315; will-change:transform;
  box-shadow:0 8px 22px rgba(32,19,21,.10), 0 36px 70px -18px rgba(32,19,21,.32), 0 74px 130px -52px rgba(32,19,21,.32);
  animation:cnvVideoBob 2.2s ease-in-out infinite; }
/* gentle continuous bob to pull the eye to the play button — stops once playing */
.cnv-fdr-video.cnv-playing{ animation:none; }
@keyframes cnvVideoBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.cnv-fdr-video video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#201315; }
.cnv-fdr-play{ position:absolute; bottom:16px; right:16px; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; z-index:2;
  background:rgba(231,109,87,.96); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(150,50,35,.45), inset 0 2px 0 rgba(255,255,255,.3); transition:transform .2s ease, background .2s ease; }
.cnv-fdr-play svg{ width:18px; height:18px; margin-left:2px; }
.cnv-fdr-play:hover{ transform:scale(1.08); background:rgba(238,125,104,1); }
.cnv-fdr-play.cnv-hide{ display:none; }
.cnv-fdr-vcap{ margin:15px 2px 0; font-family:'Poppins',sans-serif; font-size:clamp(15px,1.1vw,17px); letter-spacing:.04em; color:#8a7a72; }
.cnv-fdr-vcap b{ color:#201315; font-weight:600; }
/* the highlighted phrase in the bio */
.cnv-fdr-bio strong{ font-weight:700; color:#201315; }

/* the video thumbnail (Option 2): title overlay on the poster, hidden once it plays */
.cnv-fdr-thumb{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(20,12,13,.58),rgba(20,12,13,.34) 42%,rgba(20,12,13,.72)); }
.cnv-fdr-thumb.cnv-hide{ display:none; }
.cnv-fdr-thumb-top{ position:absolute; top:7.5%; left:0; right:0; text-align:center; color:#f1a594;
  font-family:'Poppins',sans-serif; font-size:clamp(10px,1vw,14px); letter-spacing:.32em; font-weight:600; text-transform:uppercase; }
.cnv-fdr-thumb-bot{ position:absolute; bottom:8%; left:0; right:0; text-align:center; padding:0 6%; color:#f8f3eb; }
.cnv-fdr-thumb-bot .hl{ font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(20px,3vw,40px); letter-spacing:-.015em; line-height:1.02; }
.cnv-fdr-thumb-bot .sub{ font-family:'Poppins',sans-serif; font-size:clamp(13px,1.85vw,22px); color:rgba(248,243,235,.86); margin-top:.6em; }

@media (prefers-reduced-motion:reduce){
  .cnv-fdr-portrait img{ transform:none !important; }
  html.cnv-fdr-in .cnv-fdr-curtain{ transition:transform .4s ease; }
  .cnv-fdr-video{ animation:none !important; }
}