/* Kingswell Publishing
   hero, marquee, services, catalogue, spotlight, CTA
   Edit this file for any section other than the envelope. Design tokens live in tokens.css. */

/* ============================================================
   1. HERO  (cinematic video ground + editorial type on top)
   ============================================================ */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:118px 4vh;overflow:hidden;
}

/* --- media ground --- */
.hero__media{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:var(--ink) url("../assets/kingswell-hero-poster.jpg") center/cover no-repeat;
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  filter:saturate(.68) contrast(1.05) brightness(.96);
  will-change:transform;
  transform-origin:50% 46%;
}
/* teal duotone: pulls the footage into the house palette */
.hero__tint{
  position:absolute;inset:0;
  background:var(--teal);
  mix-blend-mode:color;
  opacity:.42;
}
/* scrim: dark where the type sits, open through the upper third
   so the library actually reads as a picture and not as wallpaper */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(7,33,31,.94) 0%,
      rgba(7,33,31,.46) 24%,
      rgba(7,33,31,.66) 46%,
      rgba(7,33,31,.88) 72%,
      rgba(7,33,31,.97) 100%),
    linear-gradient(90deg,
      rgba(7,33,31,.90) 0%,
      rgba(7,33,31,.66) 34%,
      rgba(7,33,31,.20) 62%,
      rgba(7,33,31,.06) 78%,
      rgba(7,33,31,.42) 100%);
}
/* hairline that ties the media block to the section below */
.hero__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(234,244,241,.10);
}

/* small yellow tag above the headline */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:clamp(20px,2.4vw,34px);
  padding:8px 16px 8px 12px;border-radius:999px;
  background:var(--mint);color:var(--ink);
  font-size:clamp(11px,.8vw,13px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  box-shadow:0 10px 30px -12px rgba(245,189,2,.55);
}
.hero__eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 3px rgba(7,33,31,.18);
}

.hero h1{
  font-size:clamp(52px,6.5vw,108px);
  margin-left:-.045em;                 /* optical hang, breaks the column edge */
}
/* hero accent word: the GIF plays inside the letterforms. Padding keeps the
   italic overhang inside the painted box; the negative margin cancels it out. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero .em--gif{
    background:var(--mint) url("../assets/banner-text-gif.gif") center/cover no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    padding-right:.22em;margin-right:-.22em;   /* wide enough for tall slanted ascenders like the "d" */
  }
}
.line{display:block;overflow:hidden;padding-block:.06em;}
.line > span{display:block;will-change:transform,filter;}

.hero__grid{
  display:grid;
  grid-template-columns:7fr 5fr;      /* asymmetric 7/5 */
  gap:clamp(28px,4vw,72px);align-items:end;
  margin-top:clamp(28px,3.4vw,52px);
}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;}}

.hero__lede{
  color:rgba(234,244,241,.82);
  max-width:52ch;
  text-shadow:0 1px 24px rgba(7,33,31,.6);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin-top:clamp(26px,3vw,40px);}
.link-draw{position:relative;font-size:15px;padding-bottom:5px;color:var(--mint);}
.link-draw::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:left;transition:transform .55s var(--ease-out-expo);
}
.link-draw:hover::after{transform:scaleX(0);transform-origin:right;}
.link-quiet{font-size:15px;color:rgba(234,244,241,.68);border-bottom:1px solid rgba(234,244,241,.28);padding-bottom:5px;}
.link-quiet:hover{color:var(--paper);}

.hero__foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  margin-top:clamp(40px,5vw,72px);padding-top:18px;border-top:1px solid var(--rule);
  font-size:13px;color:rgba(234,244,241,.62);
}
.hero__foot span:last-child{margin-left:auto;}   /* a lone line still sits on the right */

/* mobile: the video plays here too. It is a 2.46:1 clip, so on a tall phone
   screen only its middle slice shows (object-position picks which); the
   purpose-cropped 4:5 still below is the placeholder until it loads. */
@media (max-width:820px){
  /* the video plays on phones too; this still shows until it loads, and stays if the phone blocks autoplay */
  .hero__video{object-position:50% 42%;}
  .hero__media{background-image:url("../assets/kingswell-hero-poster-mobile.jpg");background-position:50% 42%;}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(7,33,31,.90) 0%,
      rgba(7,33,31,.42) 18%,
      rgba(7,33,31,.50) 38%,
      rgba(7,33,31,.84) 56%,
      rgba(7,33,31,.95) 74%,
      rgba(7,33,31,.99) 100%);
  }
  .hero h1{font-size:clamp(38px,10.4vw,58px);}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:5px;}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{display:none;}
}

/* ============================================================
   2. SCRUBBED MARQUEE
   ============================================================ */
/* a light-maroon band between the dark hero and the paper letter section */
.marquee{
  position:relative;overflow:hidden;
  background:#9A4452;color:#fff;
  padding-block:clamp(9px,1vw,15px);            /* slim band */
  border-block:1px solid rgba(110,42,54,.3);   /* a faint hairline, not a dark rule */
}
.marquee__track{
  display:flex;align-items:center;gap:clamp(22px,2.4vw,40px);
  width:max-content;white-space:nowrap;will-change:transform;
  padding-right:clamp(22px,2.4vw,40px);   /* matches gap, so both halves are equal width */
}
.marquee__word{
  font-family:Unbounded,serif;font-weight:600;
  font-size:clamp(17px,2.2vw,32px);line-height:1;letter-spacing:-0.03em;
  text-transform:uppercase;
}
/* "wght" has to live inside font-variation-settings here, not the font-weight
   shorthand: once font-variation-settings is set with other axes (SOFT/WONK),
   the browser stops honouring font-weight for this element entirely. */
.marquee__word.is-italic{
  font-style:italic;text-transform:none;
  font-variation-settings:"SOFT" 40,"WONK" 1,"wght" 400;
  color:var(--mint);   /* brand gold reads on maroon; teal didn't */
}
.marquee__star{
  flex:0 0 auto;width:clamp(11px,1.1vw,17px);height:auto;
  fill:#fff;
}


/* ============================================================
   4. SERVICES - numbered editorial rows (no cards)
   ============================================================ */
.svc{
  padding-block:clamp(80px,10vw,170px);
  position:relative;
  background-color:var(--ink);
  background-image:
    radial-gradient(70% 80% at 88% 45%, rgba(7,33,31,.55) 0%, rgba(7,33,31,.94) 55%, rgba(7,33,31,.98) 100%),
    url("../assets/services-scene.jpg");
  background-position:center, right center;
  background-size:100% 100%, cover;
  background-repeat:no-repeat, no-repeat;
}
/* heading left, contact block right, both on one row */
.svc__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(28px,4vw,72px);
  margin-bottom:clamp(40px,5vw,80px);
}
.svc__head h2{font-size:clamp(38px,5vw,84px);}
.svc__head-h{max-width:100%;}
.svc__head-line{display:block;}

.svc__aside{
  max-width:420px;padding-left:clamp(20px,2vw,32px);
  border-left:1px solid var(--rule);
}
.svc__aside-note{font-size:15px;line-height:1.65;color:rgba(234,244,241,.66);}
.svc__aside-note + .svc__aside-note{margin-top:.8em;}
@media (max-width:900px){
  .svc__head{grid-template-columns:1fr;align-items:start;}
  .svc__aside{max-width:none;padding-left:0;border-left:0;}
}

.svc__panel{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);
  align-items:start;
  border-top:1px solid var(--rule);
}
@media (max-width:900px){ .svc__panel{grid-template-columns:1fr;gap:0;} }

/* ---- left: the list of names ---- */
.svc__list{display:flex;flex-direction:column;}
.svc__item{
  position:relative;display:grid;grid-template-columns:1fr;
  align-items:baseline;
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:clamp(16px,2vw,26px) 4px;
  border-bottom:1px solid var(--rule);
  color:rgba(234,244,241,.4);
  transition:color .4s var(--ease-out-expo);
}
.svc__name{
  font-family:Unbounded,serif;font-size:clamp(22px,2.7vw,42px);line-height:1.05;
  letter-spacing:-0.024em;
  transition:color .4s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.svc__item:hover{color:rgba(234,244,241,.7);}
.svc__item.is-active{color:#fff;}
.svc__item.is-active .svc__name{color:#fff;transform:translateX(6px);}
.svc__inline{display:none;}

/* ---- right: the detail follows the hover, and stays pinned while you scroll
        down the (tall) list so it is always in view ---- */
.svc__detail{
  position:sticky;top:clamp(96px,13vh,130px);align-self:start;
  display:grid;
  padding-top:clamp(24px,3vw,44px);       /* breathing room below the panel's top rule */
}
.svc__card{
  grid-area:1 / 1;                        /* all cards stack in one cell */
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--ease-out-expo), transform .45s var(--ease-out-expo), visibility .45s;
}
.svc__card.is-active{opacity:1;visibility:visible;transform:none;}
.svc__title{
  font-family:Unbounded,serif;font-weight:400;
  font-size:clamp(30px,3.6vw,54px);line-height:1.05;letter-spacing:-0.03em;   /* smaller: titles like "Illustration and Graphic Design" run long */
  color:var(--teal);
}
.svc__lede{
  margin-top:clamp(16px,2vw,22px);max-width:44ch;
  font-size:17px;line-height:1.55;color:rgba(234,244,241,.88);
}
.svc__label{
  margin-top:clamp(20px,2.6vw,28px);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
}
.svc__points{
  margin:12px 0 0;display:grid;gap:.55em;
}
.svc__points li{
  position:relative;padding-left:20px;font-size:15px;color:rgba(234,244,241,.82);
}
.svc__points li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--mint);
}
.svc__body{
  margin-top:clamp(20px,3vw,30px);max-width:44ch;
  font-size:15px;line-height:1.7;color:rgba(234,244,241,.6);
}

@media (max-width:900px){
  .svc__detail{display:none;}
  .svc__item{
    grid-template-columns:1fr;grid-row-gap:8px;align-items:start;
    color:rgba(234,244,241,.85);
  }
  .svc__item .svc__arrow{display:none;}
  .svc__name{font-size:clamp(22px,7vw,32px);}
  .svc__item.is-active .svc__name{transform:none;}
  .svc__inline{
    display:block;font-size:14px;line-height:1.6;
    color:rgba(234,244,241,.55);
  }
}


/* ============================================================
   6. CATALOGUE - book covers (legitimately repeatable objects)
   ============================================================ */
.cat{padding-block-start:clamp(80px,10vw,170px);padding-block-end:clamp(40px,5vw,90px);}
.cat__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,72px);}
.cat__head h2{font-size:clamp(38px,5vw,80px);}
/* room for the pen's clip-path reveal: under the descenders, and past the
   italic "work", whose slant overhangs the text box on the right */
.cat__head-h{padding-bottom:.08em;padding-right:.14em;}

/* the pen "writes" the heading in on scroll — see site.js OPEN LETTER... no,
   CATALOGUE PEN block. Text starts fully clipped via JS (gsap.set), so with
   no script it just shows normally — this file adds no clip-path itself. */
.cat__pen-wrap{position:relative;display:inline-block;max-width:100%;}
.cat__pen{
  position:absolute;top:0;left:0;
  width:84px;height:auto;
  transform-origin:97.9% 99.2%;         /* the nib tip, in the source image — rotation is driven entirely by JS now */
  pointer-events:none;will-change:transform,opacity;
  filter:drop-shadow(0 3px 6px rgba(7,33,31,.3));
}

.cat__head-link{display:inline-block;margin-top:.5em;color:var(--teal);}
.spot__more{display:inline-block;margin-top:clamp(20px,2.4vw,32px);}
.spot__titles li a{display:flex;justify-content:space-between;gap:20px;width:100%;color:inherit;}
.spot__titles li a:hover em{color:var(--mint);}
.portrait__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---- continuous sliding strip (GSAP-driven, see site.js 6b) ---- */
.cat__carousel{overflow:hidden;padding-block:6px 10px;}
.cat__track{display:flex;gap:clamp(20px,3vw,46px);will-change:transform;}
.cat__set{display:flex;gap:clamp(20px,3vw,46px);flex:0 0 auto;}
/* motion off, or the animation library failed: only the real (non-duplicate) set shows */
@media (prefers-reduced-motion:reduce){ .cat__set[aria-hidden]{display:none;} }
.no-gsap .cat__set[aria-hidden]{display:none;}

.cbook{flex:0 0 clamp(190px,22vw,262px);text-align:center;}
.cbook__cover{
  position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:2px;display:flex;
  flex-direction:column;justify-content:space-between;padding:clamp(14px,1.5vw,24px);
  transition:transform .7s var(--ease-out-expo), box-shadow .7s var(--ease-out-expo);
}
.cbook__cover::before{content:"";position:absolute;inset:0 auto 0 0;width:12px;background:linear-gradient(90deg,rgba(7,33,31,.3),rgba(7,33,31,0));z-index:1;}
.cbook__cover.has-img{padding:0;}
.cbook__cover.has-img::before{display:none;}
.cbook__cover.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cbook:hover .cbook__cover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(7,33,31,.4);}
.cbook__ct{font-family:Unbounded,serif;font-size:clamp(16px,1.5vw,24px);line-height:1.05;letter-spacing:-0.022em;}
.cbook__cs{font-size:.62em;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0;}
.cbook__cm{font-size:11px;letter-spacing:.01em;opacity:.62;}
.cbook__title{font-family:Unbounded,serif;font-weight:400;font-size:15px;line-height:1.15;
  letter-spacing:-0.01em;text-transform:uppercase;margin-top:16px;}
.cbook__title a{color:var(--ink);}
.cbook__status{display:inline-block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);}

.cv--1{background:var(--ink);color:var(--paper);}
.cv--2{background:var(--teal);color:var(--paper);}
.cv--3{background:var(--ink);color:var(--mint);}
.cv--4{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(7,33,31,.18);}
.cv--5{background:var(--mint);color:var(--ink);}
.cv--6{background:var(--teal);color:var(--paper);}
.cv-rule{display:block;height:1px;background:currentColor;opacity:.3;margin-block:14px;}

/* ============================================================
   7. AUTHOR SPOTLIGHT  (5/7)
   ============================================================ */
.spot{padding-block:clamp(80px,10vw,180px);overflow:hidden;}
.spot__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4.4vw,84px);align-items:center;}
@media (max-width:1000px){.spot__grid{grid-template-columns:1fr;}}
.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--teal);}
.portrait__img{
  position:absolute;inset:-12% 0;
  background:
    radial-gradient(60% 44% at 50% 32%, rgba(245,189,2,.42), rgba(245,189,2,0) 70%),
    repeating-linear-gradient(0deg, rgba(7,33,31,.55) 0 2px, rgba(7,33,31,0) 2px 5px),
    linear-gradient(180deg, var(--teal), var(--ink));
  will-change:transform;
}
.portrait__cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:12px;color:rgba(234,244,241,.72);background:linear-gradient(0deg,rgba(7,33,31,.75),rgba(7,33,31,0));}
.spot h2{font-size:clamp(34px,4.4vw,74px);}
.spot__q{
  font-family:Unbounded,serif;font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 90;
  font-size:clamp(21px,2vw,34px);line-height:1.32;letter-spacing:-0.02em;
  max-width:30ch;margin-block:clamp(22px,2.6vw,36px);
}
.spot__rule{height:1px;background:var(--gold);width:96px;margin-bottom:26px;} /* single gold in viewport */
.spot__titles{margin-top:clamp(26px,3vw,42px);border-top:1px solid var(--rule);}
.spot__titles li{display:flex;justify-content:space-between;gap:20px;padding-block:14px;border-bottom:1px solid var(--rule);font-size:14.5px;}
.spot__titles em{font-family:Unbounded,serif;font-style:italic;font-size:17px;font-variation-settings:"SOFT" 40,"WONK" 1;}
.spot__titles span{color:rgba(234,244,241,.5);white-space:nowrap;}

/* ============================================================
   8. SUBMISSION CTA
   ============================================================ */
.cta{padding-block:clamp(90px,11vw,180px);text-align:left;}
.cta h2{font-size:clamp(44px,7vw,120px);max-width:14ch;margin-left:-.045em;}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,64px);margin-top:clamp(36px,4vw,64px);}
.magnetic{
  position:relative;display:inline-flex;align-items:center;gap:16px;white-space:nowrap;
  background:var(--mint);color:var(--ink);           /* matches the "brands" accent colour in the hero */
  padding:18px 32px;font-size:15.5px;font-weight:700;
  border-radius:14px;
  box-shadow:6px 6px 0 var(--ink);                    /* hard offset shadow, no blur — sticker/pop style */
  transition:box-shadow .3s var(--ease-out-expo);
  will-change:transform;
}
.magnetic:hover{box-shadow:3px 3px 0 var(--ink);}      /* eases toward its shadow on hover, without touching transform — that stays free for the magnetic cursor-follow */
.magnetic .arrow{display:inline-block;transition:transform .6s var(--ease-out-expo);}
.magnetic:hover .arrow{transform:translateX(9px);}
.cta__note{font-size:14px;color:rgba(7,33,31,.62);max-width:38ch;}

/* classes replacing the inline styles that used to sit in the markup */
.cat__head-note{font-size:14.5px;color:rgba(7,33,31,.6);max-width:40ch;}
.book__sub{font-size:.62em;letter-spacing:0;font-family:'Plus Jakarta Sans',sans-serif;}
.spot__eyebrow{margin-bottom:22px;}
.spot__bio{color:rgba(234,244,241,.62);font-size:15px;}


/* ============================================================
   9. TESTIMONIALS - a dark band between the paper catalogue and the
   paper pitch. Real counts up top, then a snap-scrolling quote row.
   ============================================================ */
.tst{
  padding-block:clamp(90px,10vw,160px);overflow:hidden;
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(18,124,110,.28), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(245,189,2,.07), transparent 70%),
    var(--ink);
}
.tst__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:clamp(32px,5vw,90px);
}
.tst__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#22A08D;margin-bottom:clamp(16px,2vw,24px);   /* brighter cut of --teal: the brand teal is too dim on this dark band */
}
.tst__eyebrow::before{content:"";width:28px;height:1px;background:currentColor;}
.tst__h{font-size:clamp(34px,4.6vw,72px);max-width:13ch;}

.tst__stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,28px) clamp(28px,3vw,48px);margin:0;
}
.tst__stats div{padding-left:18px;border-left:1px solid var(--rule);}
.tst__stats dt{font-size:12.5px;color:rgba(234,244,241,.55);order:2;}
.tst__stats dd{
  margin:0 0 4px;font-family:Unbounded,serif;font-weight:600;
  font-size:clamp(30px,3vw,46px);line-height:1;letter-spacing:-0.03em;color:var(--paper);
}
.tst__stats dd span{color:#22A08D;font-size:.6em;margin-left:2px;}   /* same brighter teal as the eyebrow */
.tst__stats div{display:flex;flex-direction:column-reverse;}

.tst__bar{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,72px);padding-top:22px;border-top:1px solid var(--rule);
}
.tst__note{font-size:15px;color:rgba(234,244,241,.6);max-width:46ch;}
.tst__ctrls{display:flex;align-items:center;gap:10px;}
.tst__count{
  font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(234,244,241,.55);
  font-variant-numeric:tabular-nums;margin-right:8px;
}
.tst__btn{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-size:18px;line-height:1;
  background:transparent;color:var(--paper);border:1px solid rgba(234,244,241,.25);
  transition:background .3s var(--ease-out-expo), color .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
}
.tst__btn:hover{background:var(--mint);border-color:var(--mint);color:var(--ink);}
.tst__btn:disabled{opacity:.35;pointer-events:none;}

/* the row starts on the page gutter and bleeds off the right edge */
.tst__track{
  --edge:max(var(--gutter), calc((100vw - 1560px) / 2 + var(--gutter)));
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(290px,32vw,480px);
  gap:clamp(16px,1.6vw,24px);
  margin-top:clamp(20px,2vw,28px);
  /* vertical room so the hover lift and shadow are not clipped by the scroller */
  padding:12px var(--edge) 24px;scroll-padding-inline:var(--edge);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.tst__track::-webkit-scrollbar{display:none;}
.tst__track:focus-visible{outline:2px solid var(--mint);outline-offset:4px;}

.tst__card{
  scroll-snap-align:start;margin:0;
  display:flex;flex-direction:column;gap:clamp(20px,2vw,28px);
  padding:clamp(24px,2.4vw,36px);border-radius:18px;
  background:linear-gradient(180deg,rgba(234,244,241,.06),rgba(234,244,241,.02));
  border:1px solid rgba(234,244,241,.12);
  transition:border-color .4s var(--ease-out-expo), transform .4s var(--ease-out-expo), background .4s var(--ease-out-expo);
}
.tst__card:hover{
  border-color:rgba(245,189,2,.45);transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(234,244,241,.09),rgba(234,244,241,.03));
}
.tst__mark{width:40px;height:auto;fill:#22A08D;}   /* brighter cut of --teal, readable on the dark band */
.tst__q{
  margin:0;flex:1;
  font-size:clamp(17px,1.3vw,20px);line-height:1.6;letter-spacing:-0.01em;
  color:rgba(234,244,241,.9);
}
.tst__who{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding-top:20px;border-top:1px solid var(--rule);
}
.tst__avatar{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--teal);color:var(--paper);
  font-family:Unbounded,serif;font-size:14px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 0 0 3px rgba(245,189,2,.35);
}
.tst__avatar.has-photo{overflow:hidden;flex:0 0 auto;}
.tst__avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.tst__id{display:flex;flex-direction:column;min-width:0;}
.tst__name{font-weight:600;color:var(--paper);font-size:15px;}
.tst__role{font-size:13px;color:rgba(234,244,241,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tst__role i{font-style:italic;color:rgba(234,244,241,.75);}
.tst__tag{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mint);border:1px solid rgba(245,189,2,.4);border-radius:999px;
  padding:6px 10px;white-space:nowrap;
}

@media (max-width:900px){
  .tst__head{grid-template-columns:1fr;align-items:start;}
  .tst__track{grid-auto-columns:84vw;}
}
@media (max-width:520px){
  .tst__who{grid-template-columns:auto 1fr;}
  .tst__tag{grid-column:1 / -1;justify-self:start;}
}


/* ============================================================
   10. PITCH - closing CTA. Covers start stacked dead-centre (behind the
   text) and fan out to the edges as the section scrolls past (GSAP).
   ============================================================ */
.pitch{padding-block-start:clamp(14px,2vw,32px);padding-block-end:clamp(30px,5vw,70px);overflow:hidden;}
.pitch__scene{
  position:relative;width:100%;
  min-height:clamp(640px,92vh,900px);
}

.pitch__img{
  --fx:0; --fy:0; --fr:0;
  position:absolute;top:50%;left:50%;
  width:clamp(100px,11vw,160px);aspect-ratio:2/3;
  display:block;border-radius:3px;overflow:hidden;z-index:4;
  box-shadow:0 40px 70px -34px rgba(7,33,31,.45), 0 2px 6px rgba(7,33,31,.12);
  background:var(--ink);will-change:transform,opacity;
  /* resting state (= GSAP progress 0): a loose stack dead-centre */
  transform:translate(-50%,-50%) scale(.82) rotate(calc(var(--fr) * 0.22deg));
}
/* real covers set their own height, so the whole cover shows uncropped
   whatever its proportions; the 2/3 ratio above only shapes placeholders */
.pitch__img:has(img){aspect-ratio:auto;}
.pitch__img img{width:100%;height:auto;display:block;}
.pitch__ph{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:clamp(14px,1.4vw,22px);}
.pitch__ph-t{font-family:Unbounded,serif;font-size:clamp(15px,1.5vw,22px);line-height:1.05;letter-spacing:-0.022em;}
.pitch__ph-a{font-size:11px;letter-spacing:.02em;opacity:.7;}

/* fanned-out state — used when motion is off or GSAP is absent; GSAP animates
   to exactly this, so scripts on or off it ends up the same */
@media (prefers-reduced-motion:reduce){
  .pitch__img{transform:translate(calc(-50% + var(--fx) * 1vw), calc(-50% + var(--fy) * 1vh)) rotate(calc(var(--fr) * 1deg));}
}
.no-gsap .pitch__img{transform:translate(calc(-50% + var(--fx) * 1vw), calc(-50% + var(--fy) * 1vh)) rotate(calc(var(--fr) * 1deg));}

.pitch__center{
  position:absolute;inset:0;z-index:3;   /* covers sweep over the text, then settle at the edges */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-inline:clamp(20px,8vw,140px);pointer-events:none;
}
.pitch__eyebrow{
  font-family:Unbounded,serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:clamp(16px,2vw,26px);
}
.pitch__h{
  font-size:clamp(34px,5vw,74px);max-width:13ch;margin-bottom:clamp(24px,3vw,40px);
}
.pitch__cta{pointer-events:auto;}
.pitch__note{
  margin-top:clamp(20px,2.6vw,32px);max-width:44ch;
  font-size:14px;color:rgba(7,33,31,.6);
}

/* narrow screens: the book covers are desktop-only, so they are hidden here
   (display:none also keeps their lazy images from downloading) and the
   section is just the heading, button and note */
@media (max-width:900px){
  .pitch{padding-block:clamp(56px,10vw,96px);}
  .pitch__scene{min-height:0;padding-inline:var(--gutter);}
  .pitch__center{position:static;inset:auto;padding-inline:0;}
  .pitch__img{display:none;}
}

/* ============================================================
   PRICING - a popup holding three flat-fee cards and a currency switch.
   Opens from [data-prc-open]; the corner X, the backdrop and Esc close it.
============================================================ */
.prc{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
  opacity:0;transition:opacity .3s var(--ease-out-expo);
}
.prc[hidden]{display:none;}
.prc.is-open{opacity:1;}

.prc__backdrop{
  position:absolute;inset:0;
  background:rgba(7,33,31,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.prc__panel{
  position:relative;z-index:1;
  width:100%;max-width:940px;max-height:100%;
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(22px,3vw,40px) clamp(16px,2.2vw,32px);
  background:var(--paper);color:var(--ink);
  border-radius:22px;
  box-shadow:0 50px 110px -40px rgba(7,33,31,.7);
  transform:translateY(14px) scale(.985);
  transition:transform .35s var(--ease-out-expo);
  scrollbar-width:thin;
  scrollbar-color:rgba(18,124,110,.4) transparent;
}
.prc.is-open .prc__panel{transform:none;}

/* a slim house-coloured scrollbar instead of the OS default slab */
.prc__panel::-webkit-scrollbar{width:10px;}
.prc__panel::-webkit-scrollbar-track{background:transparent;margin-block:16px;}
.prc__panel::-webkit-scrollbar-thumb{
  background:rgba(18,124,110,.34);
  border:3px solid transparent;background-clip:content-box;
  border-radius:999px;
}
.prc__panel::-webkit-scrollbar-thumb:hover{
  background:rgba(18,124,110,.6);background-clip:content-box;
}

/* the page must not scroll behind the popup */
html.prc-open, html.prc-open body{overflow:hidden;}

.prc__head{text-align:center;max-width:62ch;margin-inline:auto;}
.prc__h{font-size:clamp(23px,2.3vw,34px);}
.prc__lede{
  margin-top:clamp(10px,1.2vw,16px);
  font-size:clamp(14px,1vw,16px);color:rgba(7,33,31,.66);
}

/* currency switch — a pill holding one button per currency */
.prc__switch{
  display:inline-flex;gap:4px;margin-top:clamp(16px,1.8vw,24px);
  padding:4px;border-radius:999px;
  background:rgba(7,33,31,.06);
  box-shadow:inset 0 0 0 1px var(--rule-dark);
}
.prc__switch-btn{
  appearance:none;border:0;background:none;font:inherit;
  padding:7px 18px;border-radius:999px;
  font-size:14px;font-weight:500;color:rgba(7,33,31,.6);
  transition:background .3s var(--ease-out-expo), color .3s var(--ease-out-expo);
}
.prc__switch-btn:hover{color:var(--ink);}
.prc__switch-btn.is-active{background:var(--teal);color:#fff;}
.prc__note{margin-top:14px;font-size:13.5px;color:var(--teal);}

/* ---- the cards ---- */
.prc__grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(16px,1.6vw,24px);
  margin-top:clamp(26px,3vw,40px);
  perspective:1100px;                 /* gives the cards' tilt somewhere to happen */
}
.prc__card{
  /* --rx/--ry/--mx/--my are written by the cursor tracking in site.js */
  --lift:0px; --rx:0deg; --ry:0deg;
  position:relative;
  flex:1 1 240px;max-width:300px;
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,#fff 0%,#FBFDFC 100%);
  border:1px solid var(--rule-dark);
  border-radius:14px;
  padding:clamp(18px,1.8vw,24px);
  transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:0 10px 26px -22px rgba(7,33,31,.45);
  transition:transform .3s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo),
             border-color .35s var(--ease-out-expo), opacity .35s var(--ease-out-expo);
}
/* a soft glow that sits under the cursor */
.prc__card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),
             rgba(18,124,110,.10), rgba(18,124,110,0) 62%);
  opacity:0;transition:opacity .35s var(--ease-out-expo);
}
.prc__card:hover{
  --lift:-8px;
  border-color:rgba(18,124,110,.4);
  box-shadow:0 34px 70px -40px rgba(7,33,31,.55);
}
.prc__card:hover::after{opacity:1;}
/* hovering one card quiets the others so the chosen one reads first */
.prc__grid:hover .prc__card:not(:hover){opacity:.72;}

.prc__card.is-featured{
  background:linear-gradient(170deg,#FFFCF2 0%,#FDF6E4 100%);
  border-color:rgba(163,126,44,.42);
  box-shadow:0 18px 40px -28px rgba(7,33,31,.5);
}
.prc__card.is-featured:hover{
  border-color:rgba(163,126,44,.75);
  box-shadow:0 38px 76px -38px rgba(7,33,31,.58);
}
.prc__card.is-featured::after{
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),
             rgba(163,126,44,.14), rgba(163,126,44,0) 62%);
}

/* ---- opening choreography ----
   intro text rises, cards flip up out of a blur one after another, then each
   card's feature lines slide in. --card-i / --i are set inline in pricing.blade.php. */
@keyframes prcRise{
  from{opacity:0;transform:translateY(14px);}
  to  {opacity:1;transform:none;}
}
@keyframes prcCardIn{
  from{opacity:0;transform:translateY(46px) rotateX(14deg) scale(.94);filter:blur(6px);}
  to  {opacity:1;transform:none;filter:none;}
}
@keyframes prcLineIn{
  from{opacity:0;transform:translateX(-12px);}
  to  {opacity:1;transform:none;}
}
.prc.is-open .prc__head > *{animation:prcRise .6s var(--ease-out-expo) backwards;}
.prc.is-open .prc__head > :nth-child(2){animation-delay:.08s;}
.prc.is-open .prc__head > :nth-child(3){animation-delay:.16s;}
.prc.is-open .prc__card{
  transform-origin:50% 100%;
  animation:prcCardIn .8s var(--ease-out-expo) backwards;
  animation-delay:calc(.12s + var(--card-i,0) * .12s);
}
.prc.is-open .prc__features li{
  animation:prcLineIn .5s var(--ease-out-expo) backwards;
  animation-delay:calc(.5s + var(--card-i,0) * .12s + var(--i,0) * .06s);
}
.prc.is-open .prc__foot{animation:prcRise .6s var(--ease-out-expo) .9s backwards;}

/* the featured card: a slow light running round its border */
@keyframes prcBorderRun{ to{background-position:300% 0;} }
.prc__card.is-featured::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(110deg, rgba(163,126,44,.25) 0%, var(--mint) 18%, rgba(18,124,110,.7) 34%,
             rgba(163,126,44,.25) 50%, var(--mint) 68%, rgba(18,124,110,.7) 84%, rgba(163,126,44,.25) 100%) 0 0 / 300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:prcBorderRun 6s linear infinite;
}
/* and its badge breathes gently */
@keyframes prcBadgeGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(18,124,110,.35);}
  50%    {box-shadow:0 0 0 7px rgba(18,124,110,0);}
}
.prc.is-open .prc__badge{animation:prcBadgeGlow 2.6s ease-in-out 1.2s infinite;}

/* the popup's own close button, in the panel's top corner */
.prc__close{
  position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);z-index:3;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;
  appearance:none;border:0;border-radius:50%;
  background:rgba(7,33,31,.07);color:rgba(7,33,31,.62);
  transition:background .25s var(--ease-out-expo), color .25s var(--ease-out-expo);
}
.prc__close:hover{background:rgba(7,33,31,.14);color:var(--ink);}

/* lifted out of the flow and onto the card's top edge, so all three cards
   start their name/price on the same line and the corner stays free for the X */
.prc__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:5px 14px;border-radius:999px;
  background:var(--teal);color:#fff;
  font-family:Unbounded,serif;font-size:11px;letter-spacing:.04em;
}
.prc__name{
  font-family:Unbounded,serif;font-weight:500;font-size:17px;letter-spacing:-0.02em;
}
.prc__quote{
  margin-top:clamp(14px,1.6vw,20px);padding-left:12px;
  border-left:2px solid var(--mint);
  font-style:italic;font-size:14px;line-height:1.5;color:rgba(7,33,31,.88);
}
.prc__blurb{
  margin-top:12px;font-size:13px;line-height:1.45;color:rgba(7,33,31,.6);
}
.prc__price{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:clamp(16px,1.8vw,22px);
}
.prc__amount{
  font-family:Unbounded,serif;font-weight:700;
  font-size:clamp(26px,2.3vw,33px);letter-spacing:-0.03em;line-height:1;
}
.prc__unit{font-size:13px;color:rgba(7,33,31,.5);}
.prc__turnaround{margin-top:8px;font-size:13px;color:rgba(7,33,31,.5);}
.prc__inherits{
  margin-top:clamp(18px,2vw,26px);
  font-family:Unbounded,serif;font-size:13px;letter-spacing:-0.01em;
}
.prc__features{
  margin-top:clamp(14px,1.6vw,20px);display:grid;gap:.62em;
}
.prc__features li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13px;line-height:1.42;color:rgba(7,33,31,.82);
  transition:transform .25s var(--ease-out-expo), color .25s var(--ease-out-expo);
}
.prc__features li:hover{transform:translateX(4px);color:var(--ink);}
.prc__tick{
  flex:0 0 auto;margin-top:.18em;
  display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:rgba(18,124,110,.14);color:var(--teal);
  transition:transform .25s var(--ease-out-expo), background .25s var(--ease-out-expo);
}
.prc__features li:hover .prc__tick{transform:scale(1.15);background:rgba(18,124,110,.26);}
.prc__card.is-featured .prc__tick{background:rgba(163,126,44,.18);color:var(--gold);}
.prc__card.is-featured .prc__features li:hover .prc__tick{background:rgba(163,126,44,.32);}
.prc__btn{
  margin-top:clamp(18px,2vw,26px);
  display:block;text-align:center;
  padding:11px 18px;border-radius:999px;
  font-size:13.5px;font-weight:500;
  color:var(--ink);box-shadow:inset 0 0 0 1px rgba(7,33,31,.28);
  transition:background .3s var(--ease-out-expo), color .3s var(--ease-out-expo),
             transform .3s var(--ease-out-expo);
}
.prc__btn:hover{background:rgba(7,33,31,.05);transform:translateY(-2px);}
/* a streak of light sweeps across a button on hover */
.prc__btn{position:relative;overflow:hidden;}
.prc__btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  transition:left .7s var(--ease-out-expo);
}
.prc__btn:hover::after{left:120%;}
.prc__btn--solid{
  background:var(--teal);color:#fff;box-shadow:none;
}
.prc__btn--solid:hover{background:#0f6a5e;color:#fff;}

.prc__foot{
  margin-top:clamp(18px,2vw,28px);text-align:center;
  font-size:14px;color:rgba(7,33,31,.6);
}
.prc__foot-link{
  color:var(--teal);text-decoration:underline;text-underline-offset:3px;
}

@media (max-width:980px){
  .prc__grid{max-width:520px;margin-inline:auto;}
  .prc__card{flex:1 1 100%;max-width:none;}
  .prc__blurb{min-height:0;}
}
@media (prefers-reduced-motion:reduce){
  .prc__card,.prc__btn,.prc__features li,.prc__tick,.prc__panel{transition:none;}
  .prc.is-open .prc__card,
  .prc.is-open .prc__head > *,
  .prc.is-open .prc__features li,
  .prc.is-open .prc__foot,
  .prc.is-open .prc__badge,
  .prc__card.is-featured::before{animation:none;}
  .prc__btn::after{display:none;}
  .prc__card{--lift:0px !important; --rx:0deg !important; --ry:0deg !important;}
  .prc__btn:hover,.prc__features li:hover{transform:none;}
  .prc__features li:hover .prc__tick{transform:none;}
}

/* ============================================================
   BOOK COVER LIGHTBOX - a cover opens large over a dimmed page
   (public/js/lightbox.js). z-index sits above the pricing popup.
============================================================ */
.lbx{
  position:fixed;inset:0;z-index:1100;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  opacity:0;transition:opacity .28s var(--ease-out-expo);
}
.lbx[hidden]{display:none;}
.lbx.is-open{opacity:1;}
.lbx__backdrop{
  position:absolute;inset:0;cursor:zoom-out;
  background:rgba(7,33,31,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lbx__img{
  position:relative;z-index:1;
  max-width:min(92vw,980px);max-height:88vh;width:auto;height:auto;
  object-fit:contain;border-radius:3px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.75);
  transform:translateY(14px) scale(.94);
  transition:transform .4s var(--ease-out-expo);
}
.lbx.is-open .lbx__img{transform:none;}
.lbx__btn{
  position:absolute;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;
  appearance:none;border:0;border-radius:50%;cursor:pointer;
  background:rgba(234,244,241,.12);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .25s var(--ease-out-expo), transform .25s var(--ease-out-expo);
}
.lbx__btn:hover{background:rgba(245,189,2,.9);color:var(--ink);}
.lbx__btn[hidden]{display:none;}
.lbx__close{top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);}
.lbx__nav{top:50%;margin-top:-23px;}
.lbx__prev{left:clamp(10px,2vw,28px);}
.lbx__next{right:clamp(10px,2vw,28px);}
.lbx__nav:hover{transform:scale(1.08);}
html.lbx-open, html.lbx-open body{overflow:hidden;}
@media (max-width:600px){
  .lbx__nav{top:auto;bottom:18px;margin-top:0;}
  .lbx__prev{left:calc(50% - 56px);}
  .lbx__next{right:calc(50% - 56px);}
  .lbx__img{max-height:78vh;}
}
@media (prefers-reduced-motion:reduce){
  .lbx,.lbx__img,.lbx__btn{transition:none;}
}