/* ============================================================
   Paul Daffey · Stories on Film
   Shared stylesheet — design system v2
   Warm · literary · dignified. Boldness spent in one place:
   the film-strip signature.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colour — locked brand */
  --cream:      #FBF6EC;   /* page surface */
  --cream-2:    #F4ECDD;   /* alt band / panels */
  --cream-3:    #EFE4CF;   /* hairline-on-cream / sprocket cuts */
  --ochre:      #C2772C;   /* primary accent */
  --ochre-deep: #9A531E;   /* hover / depth */
  --charcoal:   #2B2723;   /* text + dark bands */
  --charcoal-2: #4A443D;   /* muted text */
  --charcoal-3: #6E665C;   /* faint captions */
  --sky:        #7FB4D6;   /* sparing secondary */

  /* Tone helpers */
  --rule:       rgba(43,39,35,.14);   /* hairline on cream */
  --rule-soft:  rgba(43,39,35,.08);
  --rule-light: rgba(251,246,236,.18);/* hairline on charcoal */

  /* Type families */
  --display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;

  /* Old-style figures + ligatures, applied where wanted */
  --onum: "onum" 1, "liga" 1, "kern" 1;

  /* Modular type scale (fluid). Body base ~19px. */
  --step--1: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-0:  clamp(1.1875rem, 1.14rem + 0.24vw, 1.3125rem);   /* body 19–21 */
  --step-1:  clamp(1.45rem, 1.34rem + 0.55vw, 1.8rem);
  --step-2:  clamp(1.8rem, 1.55rem + 1.25vw, 2.6rem);
  --step-3:  clamp(2.3rem, 1.85rem + 2.25vw, 3.6rem);
  --step-4:  clamp(2.9rem, 2.1rem + 4vw, 5.4rem);
  --step-5:  clamp(3.4rem, 2.2rem + 6vw, 7rem);

  /* Spacing scale (4/8 base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Layout */
  --wrap: 1180px;
  --measure: 64ch;
  --radius: 5px;
  --radius-img: 3px;

  /* Motion */
  --ease: cubic-bezier(.21,.6,.35,1);
  --ease-soft: cubic-bezier(.33,.86,.45,1);
  --dur: .7s;

  /* Duotone (ochre shadows -> warm cream highlights) */
  --duo-shadow: #3A2415;
  --duo-light:  #F5E9D2;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.72;
  font-feature-settings:var(--onum);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Faint paper grain over the whole surface (<4% opacity) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body > *{ position:relative; z-index:2; }

img{ max-width:100%; display:block; }

::selection{ background:var(--ochre); color:var(--cream); }
::-moz-selection{ background:var(--ochre); color:var(--cream); }

:focus-visible{
  outline:2.5px solid var(--ochre);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:430;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
  font-feature-settings:var(--onum);
  /* Fraunces optical + soft axes for warmth */
  font-variation-settings:"opsz" 144, "SOFT" 40, "wght" 430;
  letter-spacing:-0.012em;
}
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--ochre-deep); text-decoration:none; }

strong,b{ font-weight:560; }
em,i{ font-style:italic; }

/* Eyebrow — real small-caps, not letterspaced uppercase */
.eyebrow{
  font-family:var(--display);
  font-variation-settings:"opsz" 28, "wght" 520, "SOFT" 0;
  font-feature-settings:"smcp" 1, "c2sc" 1, "onum" 1;
  font-size:var(--step--1);
  letter-spacing:0.06em;
  color:var(--ochre-deep);
  margin:0 0 var(--s-4);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:2.2em; height:1px;
  background:var(--ochre); opacity:.7; display:inline-block;
}

/* Animated link underline (for inline prose links) */
.link{
  color:var(--ochre-deep);
  background-image:linear-gradient(var(--ochre),var(--ochre));
  background-size:0% 1px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .4s var(--ease);
  padding-bottom:1px;
}
.link:hover,.link:focus-visible{ background-size:100% 1px; }

/* ---------- 4. Layout primitives ---------- */
.wrap{ width:min(100% - 2*var(--s-5), var(--wrap)); margin-inline:auto; }
@media (max-width:600px){ .wrap{ width:min(100% - 2*var(--s-4), var(--wrap)); } }

.section{ padding-block:clamp(var(--s-8), 9vw, var(--s-10)); }

.measure{ max-width:var(--measure); }

/* Hairline divider */
.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--ochre); --btn-fg:var(--cream);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--display);
  font-variation-settings:"opsz" 30, "wght" 500, "SOFT" 0;
  font-size:var(--step--1);
  letter-spacing:0.01em;
  line-height:1;
  padding:.95em 1.5em;
  border-radius:var(--radius);
  border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer;
  transition:transform .25s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.btn:hover{ background:var(--ochre-deep); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-lg{ font-size:var(--step-0); padding:1.05em 1.85em; }

.btn-ghost{
  background:transparent; color:var(--charcoal);
  border-color:var(--rule);
}
.btn-ghost:hover{
  background:transparent; color:var(--ochre-deep);
  border-color:var(--ochre); transform:translateY(-2px);
}

/* play glyph inside a button */
.btn .ic{ width:.85em; height:.85em; fill:currentColor; }

/* ---------- 6. THE SIGNATURE: film strip ---------- */
/* A 35mm strip whose perforations echo the logo's wave underline.
   Frames hold real, duotoned keepsake photographs. */
.filmstrip{
  --frame-h: 230px;
  --gauge: 26px;            /* sprocket margin top & bottom */
  position:relative;
  background:var(--charcoal);
  padding-block:var(--gauge);
  overflow:hidden;
}
/* Sprocket-hole gauge: a charcoal band on each edge, with evenly spaced
   cream perforations — the 35mm film look (echoes the logo underline). */
.filmstrip::before,
.filmstrip::after{
  content:"";
  position:absolute; left:0; right:0; height:var(--gauge);
  z-index:3; pointer-events:none;
  padding-block:9px;
  /* layer 1 (content-box): cream perforations, inset by padding;
     layer 2 (border-box): charcoal band fills the whole gauge */
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 9px, var(--cream) 9px 21px, transparent 21px 30px),
    linear-gradient(var(--charcoal), var(--charcoal));
  background-clip:content-box, border-box;
  background-origin:content-box, border-box;
}
.filmstrip::before{ top:0; }
.filmstrip::after{  bottom:0; }

.filmstrip .track{
  display:flex; gap:0;
  width:max-content;
  will-change:transform;
}
.filmstrip .cell{
  position:relative;
  flex:0 0 auto;
  width:calc(var(--frame-h) * 1.34);
  height:var(--frame-h);
  border-right:2px solid var(--charcoal);
  overflow:hidden;
  background:var(--charcoal);
}
.filmstrip .cell img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02);
}
/* duotone overlay (ochre↔charcoal warmth) */
.filmstrip .cell::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(58,36,21,.55), rgba(43,39,35,.66)),
    var(--ochre);
  mix-blend-mode:color;
  pointer-events:none;
}
.filmstrip .cell::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(43,39,35,.0) 60%, rgba(43,39,35,.35));
  pointer-events:none;
}
/* film grain on the strip */
.filmstrip .grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.08; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Auto-drift when JS not driving it / reduced fallback handled in JS */
@media (prefers-reduced-motion: reduce){
  .filmstrip .track{ transform:none !important; }
}

/* ---------- 7. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
  backdrop-filter:blur(8px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--rule);
  background:color-mix(in srgb, var(--cream) 94%, transparent);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-5);
  padding-block:var(--s-4);
}
.brand{
  display:inline-flex; align-items:center; gap:.7em;
  color:var(--charcoal); text-decoration:none;
}
.brand svg{ width:38px; height:38px; flex:0 0 auto; }
.brand .bn{
  display:flex; flex-direction:column; line-height:1.04;
  font-family:var(--display);
  font-variation-settings:"opsz" 40, "wght" 500, "SOFT" 20;
  font-size:1.18rem; letter-spacing:-0.01em;
}
.brand .bt{
  font-family:var(--body);
  font-variation-settings:normal;
  font-size:.62rem; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ochre-deep); font-weight:500; margin-top:.18em;
}

.nav{ display:flex; align-items:center; gap:var(--s-6); }
.nav a{
  font-family:var(--body);
  font-size:1.02rem;
  color:var(--charcoal-2);
  position:relative;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px;
  height:1px; background:var(--ochre);
  transition:right .35s var(--ease);
}
.nav a:hover{ color:var(--charcoal); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--charcoal); }
.nav a.tel{
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 500;
  color:var(--ochre-deep);
  padding:.5em 1em;
  border:1px solid var(--rule);
  border-radius:100px;
  font-feature-settings:"onum" 1;
}
.nav a.tel::after{ display:none; }
.nav a.tel:hover{ border-color:var(--ochre); color:var(--ochre-deep); }

.menu-btn{
  display:none;
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 500;
  font-size:1rem;
  background:transparent; border:1px solid var(--rule);
  border-radius:100px; padding:.5em 1.1em; color:var(--charcoal);
  cursor:pointer;
}

@media (max-width:880px){
  .menu-btn{ display:inline-block; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:var(--s-5);
    background:var(--cream-2);
    border-left:1px solid var(--rule);
    padding:88px var(--s-6) var(--s-6);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    box-shadow:-30px 0 60px rgba(43,39,35,.08);
  }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:1.4rem; font-family:var(--display);
          font-variation-settings:"opsz" 40,"wght" 460,"SOFT" 20; }
  .nav a.tel{ font-size:1.1rem; margin-top:var(--s-3); }
  body.nav-open{ overflow:hidden; }
}

/* ---------- 8. Footer ---------- */
.site-footer{
  background:var(--charcoal);
  color:var(--cream);
  padding-block:var(--s-9) var(--s-6);
  margin-top:0;
}
.site-footer a{ color:var(--cream); }
.site-footer .cols{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr;
  gap:var(--s-7);
  padding-bottom:var(--s-8);
  border-bottom:1px solid var(--rule-light);
}
.site-footer .brand .bn{ color:var(--cream); }
.site-footer .blurb{
  color:rgba(251,246,236,.66);
  max-width:34ch; margin-top:var(--s-4);
  font-size:1.02rem; line-height:1.7;
}
.site-footer h4{
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 520,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  font-size:.95rem; letter-spacing:.05em;
  color:var(--ochre);
  margin:0 0 var(--s-4);
}
.site-footer .fnav{ display:flex; flex-direction:column; gap:.7em; }
.site-footer .fnav a{
  color:rgba(251,246,236,.82); font-size:1.04rem;
  width:max-content;
  transition:color .3s var(--ease);
}
.site-footer .fnav a:hover{ color:var(--ochre); }
.site-footer .legal{
  padding-top:var(--s-6);
  color:rgba(251,246,236,.5);
  font-size:.9rem;
  display:flex; flex-wrap:wrap; gap:.4em 1em;
  align-items:center;
}
.site-footer .legal a{ color:rgba(251,246,236,.7); }
.site-footer .legal a:hover{ color:var(--ochre); }
@media (max-width:760px){
  .site-footer .cols{ grid-template-columns:1fr; gap:var(--s-6); }
}

/* ---------- 9. Scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--dur) var(--ease-soft),
             transform var(--dur) var(--ease-soft);
}
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---------- 10. Duotone utility for inline photos ---------- */
.duo{ position:relative; border-radius:var(--radius-img); overflow:hidden; }
.duo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.03) brightness(1.02);
}
.duo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(58,36,21,.5), rgba(43,39,35,.6)),
            var(--ochre);
  mix-blend-mode:color; pointer-events:none;
}
/* a softer, warmer treatment for hero portraits */
.duo--soft img{ filter:grayscale(.78) sepia(.18) contrast(1.02); }
.duo--soft::after{ background:linear-gradient(180deg,
  rgba(194,119,44,.16), rgba(154,83,30,.22)); mix-blend-mode:multiply; }

/* ============================================================
   11. PAGE: Home
   ============================================================ */

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--charcoal); color:var(--cream);
  padding:.7em 1.1em; border-radius:0 0 var(--radius) 0;
  font-family:var(--display); font-size:1rem;
}
.skip-link:focus{ left:0; }

/* ---- Hero ---- */
.hero{
  padding-block:clamp(var(--s-8), 11vw, 168px) clamp(var(--s-8), 9vw, 120px);
  position:relative;
}
/* warm radial atmosphere behind the hero text */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(194,119,44,.10), transparent 55%),
    radial-gradient(90% 80% at 92% 100%, rgba(127,180,214,.06), transparent 60%);
}
.hero__title{
  font-size:var(--step-5);
  font-variation-settings:"opsz" 144,"wght" 410,"SOFT" 30;
  line-height:.98;
  margin:0 0 var(--s-5);
  letter-spacing:-0.02em;
}
.hero__title em{
  font-style:italic;
  color:var(--ochre-deep);
  font-variation-settings:"opsz" 144,"wght" 420,"SOFT" 50;
}
.hero__sub{
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--charcoal-2);
  margin:0 0 var(--s-6);
  font-weight:400;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-bottom:var(--s-6); }
.hero__by{
  font-size:var(--step--1);
  color:var(--charcoal-3);
  margin:0;
  padding-top:var(--s-5);
  border-top:1px solid var(--rule);
  max-width:42ch;
}
.hero__by strong{ color:var(--charcoal); font-weight:560; }

/* ---- Spiel ---- */
.spiel__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(var(--s-6), 6vw, 96px);
  align-items:start;
}
.spiel__title{
  font-size:var(--step-2);
  font-variation-settings:"opsz" 90,"wght" 440,"SOFT" 30;
  line-height:1.12;
}
.spiel__head .eyebrow{ margin-bottom:var(--s-5); }
.spiel__body p{ color:var(--charcoal-2); }
.spiel__body p:first-child{
  color:var(--charcoal);
  font-size:1.08em;
}
.threads{
  list-style:none; margin:var(--s-6) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s-3);
}
.threads li{
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 470,"SOFT" 10;
  font-size:var(--step--1);
  font-style:italic;
  color:var(--ochre-deep);
  padding:.45em 1em;
  border:1px solid var(--rule);
  border-radius:100px;
  background:var(--cream-2);
}

/* ---- Pull-quote band (charcoal) ---- */
.quote{
  background:var(--charcoal);
  color:var(--cream);
  padding-block:clamp(var(--s-8), 9vw, 128px);
  position:relative;
  overflow:hidden;
}
.quote::after{ /* film grain over the dark band */
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23q)'/%3E%3C/svg%3E");
}
.quote__grid{
  display:grid;
  grid-template-columns:minmax(220px, 320px) 1fr;
  gap:clamp(var(--s-6), 6vw, 80px);
  align-items:center;
}
.quote__fig{ margin:0; }
.quote__fig .duo{ aspect-ratio:4/5; }
.pull{
  font-family:var(--display);
  font-variation-settings:"opsz" 144,"wght" 380,"SOFT" 50;
  font-size:var(--step-3);
  line-height:1.14;
  margin:0;
  text-wrap:balance;
  position:relative;
  text-indent:-0.5em; /* hang the opening quote */
}
.pull::before{ content:"\201C"; color:var(--ochre); }
.pull::after{ content:"\201D"; color:var(--ochre); }
.quote__cite{
  display:block;
  margin-top:var(--s-5);
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 500,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1,"onum" 1;
  font-style:normal;
  letter-spacing:.04em;
  color:var(--ochre);
  font-size:var(--step--1);
}

/* ---- How it works ---- */
.how__head{ max-width:30ch; margin-bottom:clamp(var(--s-7), 6vw, 80px); }
.how__head h2{
  font-size:var(--step-2);
  font-variation-settings:"opsz" 90,"wght" 440,"SOFT" 30;
  line-height:1.12;
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--s-5), 4vw, 64px);
}
.step{ position:relative; padding-top:var(--s-6); border-top:1px solid var(--rule); }
.step__n{
  display:block;
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 520,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  letter-spacing:.08em;
  font-size:.92rem;
  color:var(--ochre-deep);
  margin-bottom:var(--s-5);
}
.step h3{
  font-size:var(--step-1);
  font-variation-settings:"opsz" 60,"wght" 450,"SOFT" 20;
  margin-bottom:var(--s-3);
}
.step p{ color:var(--charcoal-2); font-size:1.02em; margin:0; }

/* ---- Price ---- */
.price{ padding-block:clamp(var(--s-8), 8vw, 120px); background:var(--cream-2);
        border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.price__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(var(--s-6), 6vw, 80px);
  align-items:center;
}
.price__h{
  font-size:var(--step-2);
  font-variation-settings:"opsz" 90,"wght" 440,"SOFT" 30;
  line-height:1.12; margin-bottom:var(--s-4);
}
.price__note{ color:var(--charcoal-2); max-width:46ch; margin:0; }
.price__card{
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(var(--s-6), 4vw, 48px);
  text-align:center;
}
.price__amt{
  font-family:var(--display);
  font-variation-settings:"opsz" 144,"wght" 430,"SOFT" 20;
  font-feature-settings:"onum" 1;
  font-size:clamp(3.2rem, 2.2rem + 5vw, 5rem);
  line-height:1; color:var(--charcoal);
  margin:0 0 var(--s-3);
  letter-spacing:-0.02em;
}
.price__terms{
  font-size:var(--step--1); color:var(--charcoal-2);
  margin:0 0 var(--s-6); font-feature-settings:"onum" 1;
}
.price__terms span{ color:var(--ochre-deep); font-weight:560; }
.price__card .btn{ width:100%; justify-content:center; }
.price__q{ display:inline-block; margin-top:var(--s-5); font-size:var(--step--1); }

/* ---------- 12. Home responsive ---------- */
@media (max-width:920px){
  .spiel__grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .quote__grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .quote__fig{ max-width:340px; }
  .price__inner{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:var(--s-5); }
}
@media (max-width:560px){
  .hero__cta .btn{ width:100%; justify-content:center; }
  .filmstrip{ --frame-h:170px; }
}

/* ============================================================
   13. INNER PAGES — shared chrome
   ============================================================ */

/* ---- Inner-page hero ---- */
.page-hero{
  padding-block:clamp(var(--s-8), 9vw, 140px) clamp(var(--s-6), 5vw, 72px);
  position:relative;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 80% at 14% 0%, rgba(194,119,44,.09), transparent 55%);
}
.page-hero__inner{ max-width:38ch; }
.page-hero__title{
  font-size:var(--step-4);
  font-variation-settings:"opsz" 144,"wght" 410,"SOFT" 35;
  line-height:1.0;
  letter-spacing:-0.02em;
  margin:0;
}
.page-hero__title em{
  font-style:italic; color:var(--ochre-deep);
  font-variation-settings:"opsz" 144,"wght" 420,"SOFT" 55;
}
.page-hero__intro{
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--charcoal-2);
  margin:var(--s-6) 0 0;
  font-weight:400;
}

/* ---- Closing CTA band ---- */
.endcta{
  background:var(--charcoal);
  color:var(--cream);
  padding-block:clamp(var(--s-8), 8vw, 112px);
  position:relative; overflow:hidden;
}
.endcta::after{ /* film grain */
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E");
}
.endcta__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-6) var(--s-7); flex-wrap:wrap;
}
.endcta__lead{
  font-family:var(--display);
  font-variation-settings:"opsz" 90,"wght" 420,"SOFT" 40;
  font-size:var(--step-2); line-height:1.12;
  max-width:18ch; margin:0; text-wrap:balance;
}
.endcta .btn{ --btn-bg:var(--ochre); flex:0 0 auto; }

/* ============================================================
   14. ABOUT
   ============================================================ */
.about__grid{
  display:grid;
  grid-template-columns:minmax(260px, 420px) 1fr;
  gap:clamp(var(--s-6), 6vw, 88px);
  align-items:start;
}
.about__fig{ margin:0; position:sticky; top:104px; }
.about__fig .duo{ aspect-ratio:4/5; }
.about__fig figcaption{
  margin-top:var(--s-4);
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 500,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1,"onum" 1;
  letter-spacing:.04em; color:var(--charcoal-3);
  font-size:var(--step--1);
}
.about__h{
  font-size:var(--step-2);
  font-variation-settings:"opsz" 90,"wght" 440,"SOFT" 30;
  line-height:1.12; margin:0 0 var(--s-5);
}
.about__body p{ color:var(--charcoal-2); }
.about__body p:first-of-type{ color:var(--charcoal); }
.about__pull{
  font-family:var(--display);
  font-variation-settings:"opsz" 144,"wght" 400,"SOFT" 50;
  font-size:var(--step-1); font-style:italic;
  line-height:1.22; color:var(--ochre-deep);
  margin:var(--s-7) 0 0; padding-left:var(--s-5);
  border-left:2px solid var(--ochre);
  text-wrap:balance; text-indent:-0.46em;
}
.about__pull::before{ content:"\201C"; }
.about__pull::after{ content:"\201D"; }

.about__values{ background:var(--cream-2); border-block:1px solid var(--rule); }
.vgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--s-5), 4vw, 64px);
}
.vcard{ border-top:1px solid var(--rule); padding-top:var(--s-5); }
.vcard__n{
  display:block; margin-bottom:var(--s-4);
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"wght" 470,"SOFT" 20;
  font-size:var(--step-1); color:var(--charcoal);
}
.vcard p{ color:var(--charcoal-2); margin:0; font-size:1.02em; }

/* ============================================================
   15. TRAILERS
   ============================================================ */
.tcards{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(var(--s-5), 4vw, 56px);
}
.tcard{
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tcard:hover{ transform:translateY(-3px); box-shadow:0 22px 48px rgba(43,39,35,.10); }
.tcard__thumb{
  position:relative; aspect-ratio:16/10;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(194,119,44,.22), transparent 60%),
    var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* film grain over the thumb */
.tcard__thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.08; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
/* sprocket strip down the left edge — the signature motif */
.tcard__perf{
  position:absolute; left:0; top:0; bottom:0; width:18px; z-index:1;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 8px, var(--cream-3) 8px 18px, transparent 18px 26px);
  background-position:center;
  opacity:.5;
}
.tcard__play{
  position:relative; z-index:2;
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--cream) 14%, transparent);
  border:1px solid rgba(251,246,236,.4);
  color:var(--cream);
  transition:transform .4s var(--ease), background-color .4s var(--ease);
}
.tcard:hover .tcard__play{ transform:scale(1.08); background:var(--ochre); border-color:var(--ochre); }
.tcard__play svg{ width:24px; height:24px; margin-left:3px; }
.tcard__body{ padding:var(--s-5) var(--s-6) var(--s-6); }
.tcard__year{
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 500,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1,"onum" 1;
  letter-spacing:.06em; color:var(--ochre-deep);
  font-size:var(--step--1);
}
.tcard__body h3{
  font-size:var(--step-1);
  font-variation-settings:"opsz" 60,"wght" 450,"SOFT" 20;
  margin:var(--s-2) 0 var(--s-3);
}
.tcard__tag{
  display:inline-block;
  font-size:var(--step--1); color:var(--charcoal-3);
  font-style:italic;
}
.trailers__note{ text-align:center; margin-top:clamp(var(--s-7), 6vw, 72px); color:var(--charcoal-2); }

/* ============================================================
   16. TESTIMONIALS
   ============================================================ */
.testis{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--s-5), 4vw, 48px);
}
.testi{
  text-align:center;
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(var(--s-6), 4vw, 56px) var(--s-6);
}
.testi__av{
  display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:50%;
  background:var(--charcoal); color:var(--ochre);
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"wght" 500,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  letter-spacing:.04em; font-size:1.3rem;
  margin-bottom:var(--s-5);
}
.testi h3{
  font-size:var(--step-1);
  font-variation-settings:"opsz" 50,"wght" 450,"SOFT" 20;
  margin:0 0 var(--s-3);
}
.testi__soon{ color:var(--charcoal-3); font-style:italic; margin:0; font-size:1.02em; }

/* ============================================================
   17. FAQs
   ============================================================ */
.faqs__wrap{
  display:grid; grid-template-columns:1fr minmax(260px, 320px);
  gap:clamp(var(--s-6), 5vw, 80px);
  align-items:start;
}
.faq{ display:flex; flex-direction:column; }
.faq__item{
  border-top:1px solid var(--rule);
}
.faq__item:last-child{ border-bottom:1px solid var(--rule); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-5);
  padding:var(--s-5) 0;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__q{
  font-family:var(--display);
  font-variation-settings:"opsz" 50,"wght" 450,"SOFT" 20;
  font-size:var(--step-1); line-height:1.18;
  color:var(--charcoal);
  transition:color .3s var(--ease);
}
.faq__item:hover .faq__q{ color:var(--ochre-deep); }
.faq__ic{
  flex:0 0 auto; position:relative;
  width:20px; height:20px; margin-top:.35em;
}
.faq__ic::before,.faq__ic::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--ochre); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.faq__ic::before{ width:16px; height:2px; }
.faq__ic::after{ width:2px; height:16px; }
.faq__item[open] .faq__ic::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.faq__a{
  padding:0 var(--s-7) var(--s-6) 0;
  max-width:62ch;
  color:var(--charcoal-2);
}
.faq__a p{ margin:0 0 .8em; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__a ul{ margin:0; padding-left:1.2em; }
.faq__a li{ margin-bottom:.35em; }
.faq__a li::marker{ color:var(--ochre); }
/* gentle open animation (reduced-motion safe via prefers query below) */
.faq__item[open] .faq__a{ animation:faqIn .45s var(--ease-soft) both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .faq__item[open] .faq__a{ animation:none; }
}

.faqs__aside{
  position:sticky; top:104px;
  background:var(--cream-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(var(--s-5), 3vw, 36px);
}
.faqs__aside-h{
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"wght" 460,"SOFT" 20;
  font-size:var(--step-1); color:var(--charcoal);
  margin:0 0 var(--s-3); line-height:1.15;
}
.faqs__aside p{ color:var(--charcoal-2); }
.faqs__aside .btn{ margin-top:var(--s-4); width:100%; justify-content:center; }
.faqs__tel{
  display:block; text-align:center; margin-top:var(--s-4);
  font-family:var(--display);
  font-variation-settings:"opsz" 30,"wght" 500;
  font-feature-settings:"onum" 1;
  color:var(--ochre-deep); font-size:var(--step-0);
}

/* ============================================================
   18. CONTACT
   ============================================================ */
.contact__grid{
  display:grid; grid-template-columns:1.25fr .85fr;
  gap:clamp(var(--s-6), 5vw, 72px);
  align-items:start;
}
.cform .hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.field{ margin-bottom:var(--s-5); }
.field label{
  display:block; margin-bottom:var(--s-3);
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 500,"SOFT" 0;
  font-size:var(--step--1); letter-spacing:.02em;
  color:var(--charcoal);
}
.field .opt{ color:var(--charcoal-3); font-variation-settings:"opsz" 24,"wght" 400; font-style:italic; }
.field input,.field textarea{
  width:100%;
  font-family:var(--body); font-size:var(--step-0);
  color:var(--charcoal);
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:.8em .9em;
  line-height:1.5;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:140px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--charcoal-3); opacity:.8; }
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--ochre);
  background:var(--cream);
  box-shadow:0 0 0 3px rgba(194,119,44,.16);
}
.cform .btn{ margin-top:var(--s-2); }
.cform__note{ margin-top:var(--s-5); color:var(--charcoal-3); font-size:var(--step--1); }

.info-card{
  background:var(--charcoal);
  color:var(--cream);
  border-radius:var(--radius);
  padding:clamp(var(--s-6), 4vw, 44px);
  position:sticky; top:104px;
}
.info-card .eyebrow{ color:var(--ochre); margin-bottom:var(--s-5); }
.info-card .eyebrow::before{ background:var(--ochre); }
.info-card__big{
  display:block;
  font-family:var(--display);
  font-variation-settings:"opsz" 40,"wght" 460,"SOFT" 10;
  font-feature-settings:"onum" 1;
  font-size:var(--step-0);
  color:var(--cream);
  margin-bottom:var(--s-4);
  word-break:break-word;
  transition:color .3s var(--ease);
}
.info-card__big:hover{ color:var(--ochre); }
.info-card__row{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--rule-light); }
.info-card__lbl{
  display:block; margin-bottom:var(--s-3);
  font-family:var(--display);
  font-variation-settings:"opsz" 24,"wght" 520,"SOFT" 0;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  letter-spacing:.06em; font-size:.95rem;
  color:var(--ochre);
}
.info-card__row p{ margin:0; color:rgba(251,246,236,.8); line-height:1.6; }

/* ============================================================
   19. PRIVACY / prose
   ============================================================ */
.prose{ max-width:70ch; }
.prose h2{
  font-size:var(--step-1);
  font-variation-settings:"opsz" 60,"wght" 450,"SOFT" 20;
  margin:var(--s-8) 0 var(--s-4); line-height:1.18;
}
.prose h2:first-of-type{ margin-top:var(--s-7); }
.prose p{ color:var(--charcoal-2); }
.prose ul{ margin:0 0 1.05em; padding-left:1.3em; color:var(--charcoal-2); }
.prose li{ margin-bottom:.4em; }
.prose li::marker{ color:var(--ochre); }
.prose__contact{
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--rule);
  color:var(--charcoal); line-height:1.9;
  font-feature-settings:"onum" 1;
}

/* ============================================================
   20. INNER-PAGE RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .about__grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .about__fig{ position:static; max-width:360px; }
  .vgrid{ grid-template-columns:1fr; gap:var(--s-5); }
  .faqs__wrap{ grid-template-columns:1fr; gap:var(--s-6); }
  .faqs__aside{ position:static; }
  .contact__grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .info-card{ position:static; }
  .testis{ grid-template-columns:1fr; }
  .endcta__inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:680px){
  .tcards{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .endcta .btn{ width:100%; justify-content:center; }
  .faq__a{ padding-right:0; }
}