/* ============================================================
   SHOTSBYZEESHAN — Testimonials, Contact, Footer, CTA
   Reuses tokens.css + main.css (.btn) + about.css atoms (.a-*, .r-*)
   ============================================================ */

/* ---- rating / score atom ("money score") ---- */
.score{ display:flex; flex-direction:column; gap:.5rem; }
.score__stars{ color:var(--gold-bright); letter-spacing:.22em; font-size:1.05rem; }
.score__num{ font-family:var(--font-ui); font-weight:600; color:var(--paper);
  font-size:clamp(2.8rem,2rem + 3.4vw,4.6rem); line-height:.9; letter-spacing:-.02em; }
.score__num small{ font-family:var(--font-ui); font-weight:400; font-size:.3em; color:var(--gold); vertical-align:super; margin-left:.12em; letter-spacing:0; }
.score__label{ font-family:var(--font-ui); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-soft); }

/* review card shared */
.rev{ position:relative; }
.rev__stars{ color:var(--gold-bright); letter-spacing:.18em; font-size:.8rem; }
.rev__quote{ font-family:var(--font-display); font-weight:400; color:var(--paper); line-height:1.35;
  letter-spacing:.005em; margin-top:.9rem; }
.rev__by{ font-family:var(--font-ui); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-top:1rem; }
.rev__by span{ color:var(--paper-soft); }

/* ============================================================
   TESTIMONIALS · V1 — MARQUEE REELS
   ============================================================ */
.tm1{ padding:clamp(4.5rem,12vh,10rem) 0; overflow:hidden; }
.tm1__head{ max-width:1280px; margin:0 auto; padding-inline:var(--gutter);
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.tm1__head .sec-head{ max-width:34ch; }
.tm1__marquee{ margin-top:clamp(2.4rem,6vh,4rem); display:flex; flex-direction:column; gap:clamp(.9rem,1.6vw,1.4rem); }
.tm1__track{ display:flex; gap:clamp(.9rem,1.6vw,1.4rem); width:max-content; will-change:transform; }
.tm1__row--a .tm1__track{ animation:tmScrollA 46s linear infinite; }
.tm1__row--b .tm1__track{ animation:tmScrollB 54s linear infinite; }
.tm1:hover .tm1__track{ animation-play-state:paused; }
@keyframes tmScrollA{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes tmScrollB{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.tm1__card{ flex:0 0 clamp(300px,32vw,420px); background:var(--ink-1); border:1px solid var(--line-gold);
  border-radius:3px 16px 3px 16px; padding:clamp(1.4rem,2.2vw,2.1rem); }
.tm1__card .rev__quote{ font-size:clamp(1.05rem,1rem + .5vw,1.3rem); }

/* ============================================================
   TESTIMONIALS · V2 — EDITORIAL LIST + SCORE
   ============================================================ */
.tm2{ padding:clamp(4.5rem,12vh,10rem) 0; }
.tm2__grid{ max-width:1280px; margin:0 auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.tm2__aside{ position:sticky; top:calc(var(--letterbox) + 5.5rem); }
.tm2__aside .score{ margin-top:1.8rem; }
.tm2__aside .score__num{ font-size:clamp(3.6rem,2.4rem + 4vw,6.2rem); }
.tm2__list{ display:flex; flex-direction:column; }
.tm2__item{ padding:clamp(1.8rem,4vh,2.8rem) 0; border-top:1px solid var(--line-soft); display:grid;
  grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.4rem); }
.tm2__item:last-child{ border-bottom:1px solid var(--line-soft); }
.tm2__n{ font-family:var(--font-display); font-weight:500; color:var(--gold); font-size:1rem; padding-top:.4rem; }
.tm2__item .rev__quote{ font-size:clamp(1.3rem,1rem + 1.4vw,2.1rem); font-weight:400; }

/* ============================================================
   TESTIMONIALS · GRID (main page) — proper cards + score header
   ============================================================ */
.tmgrid{ max-width:1280px; margin:0 auto; padding-inline:var(--gutter); }
.tmgrid__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem 3rem; flex-wrap:wrap; }
.tmgrid__head .sec-head{ max-width:32ch; }
.tmgrid__head .score{ align-items:flex-end; text-align:right; }
.tmgrid__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.5vw,1.4rem);
  margin-top:clamp(2.4rem,6vh,4rem); }
.tmgrid__cards .rev{ background:var(--ink-1); border:1px solid var(--line-gold);
  border-radius:4px 20px 4px 20px; padding:clamp(1.5rem,2.2vw,2.1rem);
  transition:border-color .45s var(--ease-cine), transform .45s var(--ease-cine); }
.tmgrid__cards .rev:hover{ border-color:var(--gold); transform:translateY(-4px); }
.tmgrid__cards .rev__quote{ font-size:clamp(1.05rem,1rem + .4vw,1.24rem); }
@media (max-width:900px){ .tmgrid__cards{ grid-template-columns:1fr 1fr; }
  .tmgrid__head .score{ align-items:flex-start; text-align:left; } }
@media (max-width:560px){ .tmgrid__cards{ grid-template-columns:1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{ position:relative; overflow:hidden; text-align:center;
  padding:clamp(4rem,12vh,8rem) var(--gutter); }
.cta > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 32%;
  z-index:-2; filter:saturate(.85) brightness(.42) contrast(1.03); transform:scale(1.06); }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 100% at 50% 50%, rgba(15,22,20,.5), rgba(15,22,20,.86) 74%, var(--ink)); }
.cta h2{ font-family:var(--font-display); font-weight:600; color:var(--paper);
  font-size:clamp(2.2rem,1.4rem + 3.4vw,4.6rem); line-height:1.1; letter-spacing:.012em; max-width:20ch; margin:0 auto; }
.cta h2 em{ font-style:normal; color:var(--gold-bright); }
.cta p{ color:var(--paper-dim); font-size:var(--fs-lead); font-weight:300; margin:1.2rem auto 0; max-width:48ch; }
.cta .btn{ margin-top:2rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(3.5rem,9vh,7rem) 0 0; }
.contact__wrap{ max-width:1280px; margin:0 auto; padding-inline:var(--gutter); }
.contact__grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.4rem,6vh,4rem); align-items:start; }
.contact__grid--formleft{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.contact__grid--formright{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }

/* form */
.form{ display:grid; gap:1.15rem; }
.form__row{ display:grid; gap:1.15rem; grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-family:var(--font-ui); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-soft); }
.field input, .field select, .field textarea{
  font-family:var(--font-ui); font-weight:300; font-size:.98rem; color:var(--paper);
  background:var(--ink-1); border:1px solid var(--line-gold); border-radius:2px 12px 2px 12px;
  padding:.95rem 1.1rem; width:100%; transition:border-color .4s var(--ease-cine), background .4s var(--ease-cine); }
.field textarea{ resize:vertical; min-height:130px; border-radius:3px 16px 3px 16px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--paper-soft); }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--ink-2); }
.form__submit{ margin-top:.4rem; }
.form__note{ font-size:.72rem; color:var(--paper-soft); letter-spacing:.02em; margin-top:.2rem; }

/* pricing */
.pricing{ margin-top:clamp(3rem,7vh,5rem); }
.pricing__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.4vw,1.2rem); margin-top:1.8rem; }
.price{ border:1px solid var(--line-gold); border-radius:3px 16px 3px 16px; padding:clamp(1.3rem,2vw,1.9rem);
  background:var(--ink-1); display:flex; flex-direction:column; gap:.6rem; transition:border-color .4s var(--ease-cine), transform .4s var(--ease-cine); }
.price:hover{ border-color:var(--gold); transform:translateY(-3px); }
.price.is-feature{ border-color:var(--gold); background:var(--ink-2); }
.price h4{ font-family:var(--font-display); font-weight:500; color:var(--paper); font-size:1.15rem; letter-spacing:.01em; }
.price__amt{ font-family:var(--font-display); font-weight:500; color:var(--gold-bright); font-size:clamp(1.5rem,1rem + 1.4vw,2.1rem); line-height:1; }
.price__amt small{ font-family:var(--font-ui); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-soft); display:block; margin-bottom:.35rem; }
.price ul{ list-style:none; display:flex; flex-direction:column; gap:.45rem; margin-top:.4rem; }
.price li{ font-size:.84rem; color:var(--paper-dim); line-height:1.4; padding-left:1.1rem; position:relative; }
.price li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; background:var(--gold); border-radius:50%; }
.price__tag{ font-family:var(--font-ui); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* reviews rail beside the form */
.revrail{ border:1px solid var(--line-soft); border-radius:4px 22px 4px 22px; padding:clamp(1.6rem,2.4vw,2.4rem);
  background:linear-gradient(180deg,var(--ink-1),var(--ink)); position:sticky; top:calc(var(--letterbox) + 5.5rem); }
.revrail .score{ padding-bottom:1.4rem; border-bottom:1px solid var(--line-soft); }
.revrail__scroll{ margin-top:1.4rem; display:flex; flex-direction:column; gap:1.5rem; max-height:none; }
.revrail .rev__quote{ font-size:1.05rem; }
.revrail .rev + .rev{ padding-top:1.5rem; border-top:1px solid var(--line-soft); }

/* ============================================================
   FOOTER · V1 — CTA + COLUMNS
   ============================================================ */
.ft1{ border-top:1px solid var(--line-soft); margin-top:clamp(3rem,8vh,6rem); }
.ft1__grid{ max-width:1280px; margin:0 auto; padding:clamp(3rem,7vh,5rem) var(--gutter) 2rem;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.ft1__brand img{ width:64px; height:64px; margin-bottom:1.1rem; }
.ft1__brand p{ color:var(--paper-soft); font-size:.9rem; line-height:1.6; max-width:34ch; }
.ft1__col h5{ font-family:var(--font-ui); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.ft1__col a, .ft1__col p{ display:block; color:var(--paper-dim); font-size:.92rem; line-height:1.5; margin-bottom:.7rem;
  transition:color .4s var(--ease-cine); }
.ft1__col a:hover{ color:var(--paper); }
.ft1__bar{ border-top:1px solid var(--line-soft); }
.ft1__bar div{ max-width:1280px; margin:0 auto; padding:1.5rem var(--gutter); display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; color:var(--paper-soft); font-size:.72rem; letter-spacing:.06em; }

/* ============================================================
   FOOTER · V2 — EDITORIAL MONOGRAM
   ============================================================ */
.ft2{ border-top:1px solid var(--line-soft); margin-top:clamp(3rem,8vh,6rem); text-align:center;
  padding:clamp(3.5rem,9vh,6.5rem) var(--gutter) 2.4rem; position:relative; }
.ft2 img{ width:80px; height:80px; margin:0 auto 1.6rem; }
.ft2__word{ font-family:var(--font-display); font-weight:500; color:var(--paper);
  font-size:clamp(2rem,1.2rem + 4vw,4.5rem); letter-spacing:.06em; line-height:1; }
.ft2__contact{ margin-top:1.6rem; display:flex; gap:clamp(1.2rem,4vw,3rem); justify-content:center; flex-wrap:wrap;
  font-family:var(--font-ui); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); }
.ft2__contact a{ transition:color .4s var(--ease-cine); }
.ft2__contact a:hover{ color:var(--gold); }
.ft2__social{ margin-top:2rem; display:flex; gap:1.4rem; justify-content:center;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-soft); }
.ft2__social a:hover{ color:var(--gold); }
.ft2__copy{ margin-top:2.4rem; color:var(--paper-soft); font-size:.7rem; letter-spacing:.08em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .tm2__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .tm2__aside{ position:static; }
  .contact__grid--formleft, .contact__grid--formright{ grid-template-columns:1fr; }
  .revrail{ position:static; }
  .pricing__grid{ grid-template-columns:1fr 1fr; }
  .ft1__grid{ grid-template-columns:1fr 1fr; }
  .ft1__brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .form__row{ grid-template-columns:1fr; }
  .pricing__grid{ grid-template-columns:1fr; }
  .ft1__grid{ grid-template-columns:1fr; }
  .tm1__card{ flex-basis:78vw; }
}
@media (prefers-reduced-motion:reduce){
  .tm1__row--a .tm1__track, .tm1__row--b .tm1__track{ animation:none; flex-wrap:wrap; width:auto; }
}