/* ═══════════════════════════════════════════════════════════
   Grisilda Hasa Consulting - funnel styles
   Nga Vëmendja te Shitja
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#131211;
  --ink-2:#1B1917;
  --body:#46403A;
  --muted:#8B837B;
  --muted-2:#6A625A;

  --paper:#FCFAF7;
  --cream:#F4EFEA;
  --line:#E3DAD2;
  --line-2:#DCD3C9;
  --line-3:#C9BDB1;
  --line-soft:rgba(227,218,210,.55);

  --dark:#0F0E0D;
  --dark-2:#1A1817;

  --accent:#7A6857;
  --accent-2:#A08D7E;
  --accent-3:#C6B5A6;
  --green:#4A5B48;

  --on-dark:#D6CEC6;
  --on-dark-2:#EAE3DC;
  --on-dark-3:#F2ECE6;

  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px, 6vw, 96px);
  --sec-y:clamp(56px, 7vw, 88px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  overflow-x:clip;               /* clip, not hidden - hidden would break sticky */
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F2ED 22%,#F0E9E3 62%,#FCFAF7 100%);
  background-attachment:fixed;
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.6;
  overflow-x:clip;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.018em;text-wrap:pretty}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Progress + header ──────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;pointer-events:none}
.progress__bar{
  height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
}

.header{
  position:sticky;top:0;z-index:70;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:26px var(--gutter);
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease),background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.header::before{content:'';display:block}
.header.is-stuck{
  padding:12px var(--gutter);
  background:rgba(252,250,247,.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 12px 30px -26px rgba(19,18,17,.6);
}
.header--solid{
  background:rgba(252,250,247,.9);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.wordmark{
  grid-column:2;justify-self:center;
  font-family:var(--serif);font-size:clamp(13px,1.5vw,21px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;text-decoration:none;
}
.wordmark span{display:inline-block;transition:transform .5s var(--ease)}
.wordmark:hover span{transform:translateY(-2px)}
.header__cta{
  grid-column:3;justify-self:end;
  opacity:0;transform:translateX(12px) scale(.94);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  height:40px;padding:0 18px;font-size:12.5px;white-space:nowrap;
}
.header.is-stuck .header__cta,
.header.is-short .header__cta{opacity:1;transform:none;pointer-events:auto}
/* below this the wordmark needs the full row to itself */
@media (max-width:900px){.header__cta{display:none}}

/* ── Funnel step tracker ────────────────────────────────── */
.track{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(8px,1.4vw,16px);
  padding:16px var(--gutter);
  border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.5);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.track__step{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);transition:color .5s ease;
  text-decoration:none;
}
.track__step i{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--line-2);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10px;color:var(--muted);
  transition:background .5s ease,border-color .5s ease,color .5s ease,transform .5s var(--ease);
}
.track__step--done{color:var(--body)}
.track__step--done i{background:var(--accent);border-color:var(--accent);color:#fff}
.track__step--now{color:var(--ink)}
.track__step--now i{
  background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.12);
  box-shadow:0 0 0 4px rgba(19,18,17,.08);
}
.track__sep{width:clamp(10px,2vw,28px);height:1px;background:var(--line-2)}
@media (max-width:640px){
  .track{gap:6px;padding:12px 14px;font-size:10.5px;letter-spacing:.06em}
  .track__step span{display:none}
  .track__step--now span{display:inline}
  .track__sep{width:10px}
}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:58px;padding:0 clamp(22px,3vw,34px);
  border:0;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-size:clamp(14px,1.15vw,17px);font-weight:600;
  letter-spacing:.04em;text-align:center;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .4s ease,color .4s ease,opacity .4s ease;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);
  transform:translateX(-130%);
}
.btn:hover::before{transform:translateX(130%);transition:transform .8s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(19,18,17,.65)}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn--light{background:#fff;color:var(--ink)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:#87735F}
.btn--ink{background:linear-gradient(180deg,#100F0E 0%,#1A1817 100%);color:#fff}
.btn--ghost{
  background:transparent;color:var(--ink);border:1px solid #24211E;height:50px;
}
.btn--ghost::before{background:linear-gradient(105deg,transparent 32%,rgba(19,18,17,.08) 50%,transparent 68%)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--full{width:100%}
.btn[disabled],.btn.is-locked{
  opacity:.42;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none;
}
.ripple{
  position:absolute;border-radius:50%;transform:scale(0);z-index:-1;
  background:rgba(255,255,255,.35);animation:ripple .65s var(--ease) forwards;pointer-events:none;
}
.btn--light .ripple,.btn--ghost .ripple{background:rgba(19,18,17,.14)}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

.textlink{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .3s ease;
}
.textlink:hover{color:var(--accent)}

/* ── Reveal system ──────────────────────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="right"]{transform:translateX(24px)}
[data-reveal="scale"]{transform:scale(.96)}

.lines span{display:block;overflow:hidden}
.lines span i{
  display:block;font-style:inherit;transform:translateY(105%);
  transition:transform 1s var(--ease);transition-delay:var(--d,0ms);
}
.lines.is-in span i{transform:none}

/* ── Layout primitives ──────────────────────────────────── */
.sec{padding:var(--sec-y) var(--gutter)}
.sec--tight{padding-block:clamp(40px,5vw,64px)}
.wrap{max-width:1240px;margin:0 auto}
.wrap--narrow{max-width:940px;margin:0 auto}
.wrap--tight{max-width:820px;margin:0 auto}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.grid-2--hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.grid-2--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.eyebrow{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.eyebrow--light{color:var(--accent-3)}
.veil{
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.6) 100%);
  border-top:1px solid var(--line-soft);
}
.veil--both{border-bottom:1px solid var(--line-soft)}
.h-xl{font-size:clamp(38px,6vw,74px);line-height:.99}
.h-lg{font-size:clamp(30px,4.4vw,56px);line-height:1.04}
.h-md{font-size:clamp(26px,3.2vw,44px);line-height:1.1}
.h-sm{font-size:clamp(24px,2.6vw,38px);line-height:1.2}
.lede{font-size:clamp(16px,1.15vw,18px);line-height:1.62;color:var(--body)}
.center{text-align:center}
.stack-gap{display:grid;gap:14px}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:var(--dark);color:#fff;
  padding:clamp(52px,6vw,96px) var(--gutter) clamp(60px,7vw,104px);
}
.hero::before{
  content:'';position:absolute;inset:-20%;pointer-events:none;
  background:
    radial-gradient(46% 38% at 22% 18%,rgba(160,141,126,.22),transparent 70%),
    radial-gradient(40% 34% at 82% 76%,rgba(198,181,166,.14),transparent 72%);
  animation:drift 22s ease-in-out infinite alternate;
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,-3%,0) scale(1.08)}}
.hero > *{position:relative;z-index:1}
.hero h1{color:#fff;margin:0 0 26px;letter-spacing:-.022em}
.hero h1 em{font-style:italic;color:var(--accent-3)}
.hero__copy{display:grid;gap:14px;max-width:540px;margin-bottom:34px}
.hero__copy p{color:var(--on-dark);font-size:clamp(16px,1.15vw,18px);line-height:1.6}

/* light hero (page 3) */
.hero--paper{background:transparent;color:var(--ink-2);padding-block:clamp(48px,5.5vw,84px)}
.hero--paper::before,.hero--paper::after{display:none}
.hero--paper h1{color:var(--ink)}
.hero--paper h1 em{color:var(--accent)}
.hero--paper .hero__copy p{color:var(--body)}

.pull{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,1.5vw,22px);line-height:1.4;color:var(--on-dark-3);
  padding-left:18px;border-left:2px solid rgba(255,255,255,.3);
  transition:border-color .5s ease,padding-left .5s var(--ease);
}
.pull:hover{border-color:var(--accent-3);padding-left:24px}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;margin-bottom:28px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2);
  transition:background .4s ease,border-color .4s ease,transform .4s var(--ease);
}
.badge:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.badge svg{flex-shrink:0}
.badge__pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent-3);
  box-shadow:0 0 0 0 rgba(198,181,166,.7);animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(198,181,166,.6)}
  70%{box-shadow:0 0 0 9px rgba(198,181,166,0)}
  100%{box-shadow:0 0 0 0 rgba(198,181,166,0)}
}
.badge--ok{
  background:#EDEAE3;border:1px solid #D7CEC3;color:var(--green);
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;
  padding:9px 18px;
}
.badge--ok svg{color:var(--green)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.24);
  font-size:clamp(13.5px,1vw,15px);color:var(--on-dark-2);
  transition:transform .4s var(--ease),background .4s ease,border-color .4s ease,color .4s ease;
}
.chip:hover{transform:translateY(-3px) rotate(-1.2deg);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.chip--paper{
  border-radius:6px;border:1px solid var(--line);
  background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--body);padding:8px 16px;font-size:clamp(14px,1.05vw,15.5px);
}
.chip--paper:hover{background:#fff;border-color:var(--accent-2);color:var(--ink);transform:translateY(-3px) rotate(1deg)}

/* ── Forms ──────────────────────────────────────────────── */
.formcard{
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  padding:clamp(22px,2.4vw,34px);max-width:540px;
  transition:border-color .5s ease,background .5s ease;
}
.formcard:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1)}
.formcard--paper{
  background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:clamp(22px,2.4vw,30px);max-width:560px;margin:0 auto;
}
.formcard--paper:hover{background:#FBF8F4;border-color:var(--accent-2)}
.form{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label,.field > .field__label{
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#B7ADA3;
  transition:color .3s ease;
}
.formcard--paper .field label{color:var(--muted)}
.field input,.field textarea,.field select{
  width:100%;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;
  background:rgba(0,0,0,.2);
  padding:0 16px;color:#fff;font-family:var(--sans);font-size:16px;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.field input{height:52px}
.field textarea{padding:14px 16px;min-height:96px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#9C948B}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent-3);
  box-shadow:0 0 0 4px rgba(198,181,166,.16);background:rgba(0,0,0,.32);
}
.field:focus-within label{color:var(--accent-3)}
.formcard--paper .field input,.formcard--paper .field textarea{border:1px solid var(--line-2);background:#fff;color:var(--ink)}
.formcard--paper .field input::placeholder{color:#A79E95}
.formcard--paper .field input:focus,.formcard--paper .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(122,104,87,.12)}
.formcard--paper .field:focus-within label{color:var(--accent)}
.field.is-error input,.field.is-error textarea{
  border-color:#B4574B;box-shadow:0 0 0 4px rgba(180,87,75,.14);animation:shake .4s ease;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.form__note{display:flex;align-items:center;gap:8px;color:#A79D93;font-size:13px;margin-top:4px}
.formcard--paper .form__note{color:var(--muted)}
.form__msg{
  font-size:13.5px;color:var(--accent-3);
  opacity:0;transform:translateY(-4px);
  transition:opacity .4s ease,transform .4s var(--ease);
}
.formcard--paper .form__msg{color:var(--accent)}
.form__msg.is-on{opacity:1;transform:none}
.form__msg.is-bad{color:#E29A8E}
.formcard--paper .form__msg.is-bad{color:#A8453A}
.form.is-sent .field,.form.is-sent .form__note{opacity:.35;pointer-events:none;transition:opacity .5s ease}
.form.is-sent button[type="submit"]{display:none}

/* ── Cards & lists ──────────────────────────────────────── */
.card{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:14px;
  padding:clamp(24px,3vw,40px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s ease,background .5s ease;
}
.card:hover{
  transform:translateY(-4px);box-shadow:0 28px 60px -40px rgba(19,18,17,.55);
  border-color:var(--accent-2);background:rgba(255,255,255,.76);
}
.card--solid{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card--dark{
  background:linear-gradient(160deg,#100F0E 0%,#1C1A18 100%);
  border:0;color:#fff;
}
.card--dark:hover{
  background:linear-gradient(160deg,#171513 0%,#241F1B 100%);
  border:0;box-shadow:0 34px 70px -44px rgba(0,0,0,.95);
}
.card--dark p{color:var(--on-dark)}
.card__kicker{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,24px);color:var(--accent);margin-bottom:22px}
.card__list{display:grid;gap:18px;font-size:clamp(16px,1.15vw,17.5px);line-height:1.55;color:var(--body)}
.card__foot{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line-soft);
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;color:var(--body);
}
.card__foot em{color:var(--muted);font-style:italic}

.rule-list{
  display:grid;gap:12px;padding-left:20px;border-left:2px solid var(--line);
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;color:var(--body);
  transition:border-color .5s ease;
}
.rule-list:hover{border-color:var(--accent-2)}
.plain-list{display:grid;gap:10px;font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;color:var(--body)}

blockquote{
  margin:0 0 24px;padding-left:20px;border-left:2px solid var(--accent-2);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(20px,1.9vw,25px);line-height:1.4;color:var(--ink);
}

.ledger{display:grid}
.ledger__row{
  position:relative;padding:14px 0;border-bottom:1px solid #EBE3DA;
  font-family:var(--serif);font-size:clamp(19px,1.65vw,23px);color:var(--ink-2);
  transition:padding-left .45s var(--ease),color .35s ease;
}
.ledger__row:last-child{border-bottom:0}
.ledger__row::before{
  content:'';position:absolute;left:0;top:50%;width:0;height:1px;
  background:var(--accent-2);transform:translateY(-50%);transition:width .45s var(--ease);
}
.ledger__row:hover{padding-left:26px;color:var(--accent)}
.ledger__row:hover::before{width:16px}
.ledger__row--accent{color:var(--accent);font-style:italic}

/* facts list (bullets with dots) */
.facts{display:grid;gap:12px;margin-bottom:24px}
.fact{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--body)}
.fact i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;font-style:normal}

/* ── Decision rail (signature) ──────────────────────────── */
.rail{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(10px,1.4vw,18px);margin:0 0 34px;padding:14px 0;list-style:none;
  border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);
}
.rail::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-3));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.9s var(--ease);
}
.rail.is-on::after{transform:scaleX(1)}
.rail__step{
  padding:4px 2px;font-size:clamp(11px,.95vw,13px);letter-spacing:.2em;
  color:rgba(234,227,220,.34);
  transition:color .6s ease,transform .6s var(--ease);
}
.rail.is-on .rail__step{color:var(--on-dark-2)}
.rail__sep{color:rgba(180,171,162,.4);font-size:14px;transition:color .6s ease}
.rail.is-on .rail__sep{color:#B4ABA2}
.rail__step--end{
  padding:9px 22px;border-radius:999px;font-weight:600;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.4);transform:scale(.92);
}
.rail.is-on .rail__step--end{
  background:#fff;color:var(--ink);transform:scale(1);
  animation:landing .9s var(--ease) 1.6s both;
}
@keyframes landing{
  0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  55%{transform:scale(1.07)}
  100%{transform:scale(1);box-shadow:0 0 0 16px rgba(255,255,255,0)}
}
.rail--paper{
  border-color:var(--line);background:rgba(255,255,255,.85);
  padding:14px clamp(14px,2vw,24px);gap:clamp(10px,1.3vw,16px);
}
.rail--paper .rail__step{color:rgba(70,64,58,.35);font-size:clamp(11px,.9vw,12.5px)}
.rail--paper.is-on .rail__step{color:var(--body)}
.rail--paper .rail__step--end{background:rgba(19,18,17,.15);color:rgba(19,18,17,.35)}
.rail--paper.is-on .rail__step--end{background:var(--ink);color:#fff;animation-name:landingPaper}
@keyframes landingPaper{
  0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(19,18,17,.35)}
  55%{transform:scale(1.07)}
  100%{transform:scale(1);box-shadow:0 0 0 16px rgba(19,18,17,0)}
}

/* ── Dark band ──────────────────────────────────────────── */
.band{
  background:linear-gradient(180deg,#100F0E 0%,#1A1817 100%);
  color:#fff;padding:var(--sec-y) var(--gutter);
}
.band--center{text-align:center}
.band__inner{max-width:900px;margin:0 auto}
.band p{color:var(--on-dark);font-size:clamp(16px,1.15vw,18px)}
.band--center p{max-width:660px;margin:0 auto 34px}

/* ── Numbered rows ──────────────────────────────────────── */
.curriculum{display:grid}
.mod{
  position:relative;display:grid;
  grid-template-columns:110px minmax(0,.85fr) minmax(0,1.5fr);
  gap:clamp(18px,3vw,44px);align-items:start;
  padding:clamp(26px,3vw,40px) clamp(10px,1.4vw,18px);
  border-top:1px solid var(--line-3);transition:background .45s ease;
}
.mod:last-child{border-bottom:1px solid var(--line-3)}
.mod::before{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--accent);transition:width .7s var(--ease);
}
.mod:hover::before{width:100%}
.mod:hover{background:rgba(255,255,255,.5)}
.mod__num{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(32px,3.4vw,44px);line-height:1;color:var(--accent);
  transition:transform .5s var(--ease),color .4s ease;
}
.mod:hover .mod__num{transform:translateY(-4px);color:var(--ink)}
.mod__title{font-size:clamp(17px,1.4vw,20px);font-weight:600;line-height:1.35;color:var(--ink-2);transition:transform .5s var(--ease)}
.mod:hover .mod__title{transform:translateX(4px)}
.mod__text{margin:0;font-size:clamp(15.5px,1.1vw,16.5px);line-height:1.6;color:var(--body)}
.mod--roman .mod__num{font-style:normal}

/* dark variant, columns */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,56px)}
.pillar{border-top:1px solid rgba(255,255,255,.24);padding:32px 0 0}
.pillar__num{font-family:var(--serif);font-size:40px;line-height:1;color:var(--accent-3);margin-bottom:14px;transition:transform .5s var(--ease)}
.pillar:hover .pillar__num{transform:translateY(-4px)}
.pillar__title{font-size:18px;font-weight:600;line-height:1.35;margin-bottom:12px}
.pillar p{margin:0;font-size:16px;line-height:1.6;color:var(--on-dark)}

/* two-column signal grid */
.signals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
.signal{
  border-top:1px solid var(--line-3);padding:clamp(24px,2.6vw,34px) 8px clamp(20px,2.4vw,30px);
  font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;color:var(--body);
  transition:background .4s ease,color .4s ease,padding-left .4s var(--ease);
}
.signal:hover{background:rgba(255,255,255,.55);color:var(--ink-2);padding-left:18px}
.signal--wide{grid-column:span 2}

/* ── Checks ─────────────────────────────────────────────── */
.checks{display:grid;gap:13px}
.check{
  display:flex;gap:12px;align-items:flex-start;
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.5;color:var(--body);
  transition:transform .4s var(--ease),color .3s ease;
}
.check:hover{transform:translateX(6px);color:var(--ink-2)}
.check svg{margin-top:4px;flex-shrink:0}
.check svg path{
  stroke-dasharray:16;stroke-dashoffset:16;
  transition:stroke-dashoffset .55s var(--ease);transition-delay:var(--d,0ms);
}
.checks.is-in .check svg path{stroke-dashoffset:0}

/* ── Audit visual ───────────────────────────────────────── */
.audit{
  background-image:
    linear-gradient(rgba(246,242,238,.9),rgba(246,242,238,.94)),
    url('../images/texture-audit.jpg');
  background-size:auto,62% auto;background-position:center,12% 72%;background-repeat:no-repeat;
}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.post{
  position:relative;aspect-ratio:1;border-radius:6px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  transition:background .5s ease,border-color .5s ease,transform .5s var(--ease);
}
.post::after{
  content:'';position:absolute;inset:0;border-radius:5px;
  background:rgba(198,181,166,.5);opacity:0;transition:opacity .35s ease;
}
.post.is-scanning::after{opacity:1}
.post.is-dup{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.post.is-dup::before{
  content:'';position:absolute;left:50%;top:50%;width:34%;height:1px;
  transform:translate(-50%,-50%) scaleX(0);background:rgba(255,255,255,.3);
  transition:transform .5s var(--ease);
}
.post.is-dup.is-marked::before{transform:translate(-50%,-50%) scaleX(1)}
.post.is-key{background:rgba(160,141,126,.3);border-color:rgba(160,141,126,.5)}
.postgrid:hover .post{transform:scale(.97)}
.postgrid .post:hover{transform:scale(1.06)}
.auditmeter{
  display:flex;align-items:center;gap:12px;margin-bottom:26px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#8E857B;
}
.auditmeter b{font-family:var(--serif);font-size:20px;letter-spacing:0;color:var(--accent-3);font-variant-numeric:tabular-nums}
.auditmeter__track{flex:1;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.auditmeter__fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-3));
  transition:width 1.4s var(--ease);
}

/* ── Photo stack ────────────────────────────────────────── */
.stackwrap{min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.stack{
  position:relative;width:min(100%,520px);aspect-ratio:2683/4032;
  margin:0 auto;cursor:pointer;border:0;padding:0;background:none;
  transition:transform .6s var(--ease);
}
.stack:hover{transform:translateY(-6px)}
.stack__item{
  position:absolute;inset:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#121110;
  transition:transform .55s var(--ease),background .4s ease,border-color .4s ease,box-shadow .4s ease;
  will-change:transform;
}
.stack__item img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease,transform 8s ease-out}
.stack:hover .stack__item[data-front] img{transform:scale(1.035)}
.stack__item[data-front]{box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}

/* ── Video player (page 2) ──────────────────────────────── */
.player{
  position:relative;overflow:hidden;background:#0D0C0B;
  box-shadow:0 40px 90px -40px rgba(30,27,24,.5);
}
.player__frame{position:relative;aspect-ratio:16/9;background:#121110}
.player__frame video{width:100%;height:100%;object-fit:cover;display:block;background:#121110}
.player__ghost{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:#121110;
}
.player__ghost span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6B655E}
.player__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;
  transition:opacity .4s ease,visibility .4s;
}
.player__play i{
  width:clamp(64px,9vw,96px);height:clamp(64px,9vw,96px);border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.player__play:hover i{transform:scale(1.08);box-shadow:0 26px 60px -18px rgba(0,0,0,.75)}
.player__play:active i{transform:scale(.97)}
.player.is-playing .player__play{opacity:0;visibility:hidden}
.player__bar{
  position:absolute;left:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);bottom:clamp(14px,2.4vw,28px);
  display:flex;align-items:center;gap:16px;color:#fff;
  opacity:1;transition:opacity .4s ease;
}
.player__track{
  flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;
  transition:height .3s ease;
}
.player__track:hover{height:7px}
.player__fill{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .2s linear}
.player__time{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.player__demo{
  position:absolute;top:14px;left:14px;
  padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);
}
.player__caption{font-size:14px;color:var(--muted);margin-top:18px}

.gate{position:relative;overflow:hidden}

.gate__head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.gate__status{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark);
  transition:color .5s ease;
}
.gate:not(.is-locked) .gate__status{color:var(--accent-3)}
.gate__meter{flex:1;height:2px;background:rgba(255,255,255,.16);overflow:hidden;min-width:60px}
.gate__meter i{display:block;height:100%;width:0;background:var(--accent-3);transition:width .4s linear}

/* the padlock */
.lock{
  position:relative;flex-shrink:0;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  transition:background .7s var(--ease),border-color .7s var(--ease);
}
.lock svg{
  width:22px;height:22px;overflow:visible;
  fill:none;stroke:var(--accent-3);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .7s var(--ease);
}
.lock__shackle{
  transform-box:fill-box;transform-origin:100% 100%;
  transition:transform .75s var(--ease);
}
.lock__pin{transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center}

/* locked: a slow breathing ring, nothing washed out */
.gate.is-locked .lock::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(198,181,166,.45);
  animation:lockPulse 2.8s ease-out infinite;
}
@keyframes lockPulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}

/* open: the shackle swings up and the badge warms */
.gate:not(.is-locked) .lock{background:var(--accent);border-color:var(--accent)}
.gate:not(.is-locked) .lock svg{stroke:#fff}
.gate:not(.is-locked) .lock__shackle{transform:translateY(-4px) rotate(28deg)}
.gate:not(.is-locked) .lock__pin{transform:scale(1.25)}
.gate.is-open .lock{animation:lockPop .8s var(--ease) .1s both}
@keyframes lockPop{
  0%{transform:scale(1)}
  35%{transform:scale(1.18) rotate(-6deg)}
  60%{transform:scale(.96) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}

/* the copy under the lock waits its turn, but stays legible */
.gate__body{opacity:.72;transition:opacity .7s ease}
.gate:not(.is-locked) .gate__body{opacity:1}
.gate.is-open{animation:unlock .9s var(--ease)}
@keyframes unlock{
  0%{transform:scale(.985);box-shadow:0 0 0 0 rgba(198,181,166,.5)}
  60%{transform:scale(1.012)}
  100%{transform:scale(1);box-shadow:0 0 0 22px rgba(198,181,166,0)}
}

/* ── Application form (page 3) ──────────────────────────── */
.qlist{display:grid;max-width:940px;margin:0 auto}
.q{display:grid;gap:10px;padding:30px 0;border-top:1px solid var(--line-2)}
.q__label{font-size:16.5px;font-weight:600;color:var(--ink-2)}
.q__label b{color:var(--accent);font-weight:600;margin-right:6px;font-family:var(--serif);font-size:18px}
.q__help{font-size:15px;color:var(--muted-2)}
.q input[type="text"],.q input[type="url"],.q input[type="email"],.q textarea{
  width:100%;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);
  color:var(--ink);font-family:var(--sans);font-size:15.5px;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.q input{height:50px;padding:0 16px}
.q textarea{min-height:96px;padding:14px 16px;resize:vertical;line-height:1.55}
.q input::placeholder,.q textarea::placeholder{color:#A79E95}
.q input:focus,.q textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px rgba(122,104,87,.12);
}
.q.is-error input,.q.is-error textarea{border-color:#B4574B;box-shadow:0 0 0 4px rgba(180,87,75,.12);animation:shake .4s ease}
.q__error{font-size:13.5px;color:#A8453A;display:none}
.q.is-error .q__error{display:block}

.pickers{display:flex;flex-wrap:wrap;gap:8px}
.picker{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--body);cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--ease);
}
.picker:hover{transform:translateY(-2px);border-color:var(--accent-2);color:var(--ink)}
.picker[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.picker[aria-pressed="true"]:hover{background:#2A2724}

.radios{display:grid;gap:8px}
.radio{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--paper);
  font-size:15.5px;color:var(--body);cursor:pointer;
  transition:border-color .3s ease,background .3s ease,transform .3s var(--ease);
}
.radio:hover{border-color:var(--accent-2);transform:translateX(4px)}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio i{
  width:16px;height:16px;border-radius:50%;border:1.5px solid #C0B4A6;flex-shrink:0;
  display:inline-block;position:relative;transition:border-color .3s ease;
}
.radio i::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .3s var(--ease);
}
.radio:has(input:checked){border-color:var(--accent);background:#fff}
.radio:has(input:checked) i{border-color:var(--accent)}
.radio:has(input:checked) i::after{transform:scale(1)}

/* ── Calendar ───────────────────────────────────────────── */
.booking{
  border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3);
  padding:clamp(28px,4vw,44px) 0;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,4vw,48px);max-width:1000px;margin:0 auto;
}
.cal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal__month{font-size:18px;font-weight:600}
.cal__nav{display:flex;gap:8px}
.cal__nav button{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);
  background:#fff;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--ease);
}
.cal__nav button:hover:not([disabled]){background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.cal__nav button[disabled]{opacity:.35;cursor:not-allowed}
.cal__dow{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#98908A;text-align:center;
}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{
  height:44px;border-radius:8px;border:1px solid transparent;background:transparent;
  color:#B4ABA2;font-family:var(--sans);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--ease);
}
.day--empty{visibility:hidden}
.day--open{background:#E9E1D9;color:var(--accent);border-color:#DED4CA;cursor:pointer}
.day--open:hover{transform:translateY(-2px) scale(1.04);background:#DFD4C8}
.day--sel{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.04)}
.day--sel:hover{background:var(--ink)}
.day--none{cursor:default}

.slotpanel{display:flex;flex-direction:column}
.slotpanel__day{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.slots{display:grid;gap:10px;margin-bottom:24px}
.slot{
  height:48px;border:1px solid var(--line-2);border-radius:8px;background:#fff;
  color:var(--body);font-family:var(--sans);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--ease);
}
.slot:hover:not([disabled]){transform:translateY(-2px);border-color:var(--ink)}
.slot[aria-pressed="true"]{background:var(--ink);border-color:#24211E;color:#fff}
.slot[disabled]{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.slot small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;text-decoration:none}
.slots__empty{
  padding:22px;border:1px dashed var(--line-2);border-radius:8px;
  color:var(--muted);font-size:15px;text-align:center;
}
.booking__note{font-size:13.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* ── Confirmation ───────────────────────────────────────── */
.seal{
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(180deg,#100F0E 0%,#1A1817 100%);
  display:flex;align-items:center;justify-content:center;margin:0 auto 30px;
  animation:seal .9s var(--ease) both;
}
@keyframes seal{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
.seal svg path{
  stroke-dasharray:18;stroke-dashoffset:18;
  animation:draw .7s var(--ease) .45s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.slipcard{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  text-align:left;box-shadow:0 22px 56px -34px rgba(30,27,24,.22);margin-bottom:44px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.slipcard:hover{transform:translateY(-3px);box-shadow:0 30px 66px -36px rgba(30,27,24,.34)}
.slipcard__when{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--ink-2)}
.slipcard__meta{font-size:15px;color:var(--muted-2);margin-top:6px}
.slipcard__avatar{
  width:78px;height:78px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:1px solid #DFD5CB;background:#E6DCD3;
}
.slipcard__avatar img{width:100%;height:100%;object-fit:cover}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(28px,4vw,64px);text-align:left;margin-bottom:52px}
.col{border-top:1px solid var(--line-3);padding:34px 0 0}
.col__title{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.col__list{display:grid;gap:14px;font-size:16px;line-height:1.55;color:var(--body)}
.tasks{display:grid;gap:12px;font-size:16px;line-height:1.5;color:var(--body)}
.task{display:flex;gap:11px;align-items:flex-start;cursor:pointer;transition:color .3s ease}
.task:hover{color:var(--ink-2)}
.task input{position:absolute;opacity:0;pointer-events:none}
.task i{
  width:16px;height:16px;border:1.5px solid #C0B4A6;border-radius:4px;flex-shrink:0;margin-top:3px;
  display:inline-block;position:relative;transition:background .3s ease,border-color .3s ease;
}
.task i::after{
  content:'';position:absolute;left:4px;top:.5px;width:5px;height:9px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease);
}
.task:has(input:checked) i{background:var(--accent);border-color:var(--accent)}
.task:has(input:checked) i::after{transform:rotate(45deg) scale(1)}
.task:has(input:checked){color:var(--muted);text-decoration:line-through}

/* ── Sticky mobile CTA ──────────────────────────────────── */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,4vw,20px);
  background:rgba(15,14,13,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(120%);transition:transform .5s var(--ease);
}
.stickybar.is-on{transform:none}
.stickybar__text{flex:1;min-width:0;color:var(--on-dark);font-size:13px;line-height:1.35}
.stickybar__text b{display:block;color:#fff;font-family:var(--serif);font-size:16px;font-weight:400}
.stickybar .btn{height:46px;padding:0 18px;font-size:13px;white-space:nowrap;width:auto}
@media (min-width:761px){.stickybar{display:none}}

/* ── Toast ──────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:90;
  transform:translate(-50%,140%);
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:10px;
  background:rgba(19,18,17,.94);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:14.5px;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
  transition:transform .5s var(--ease);max-width:calc(100vw - 32px);
}
.toast.is-on{transform:translate(-50%,0)}

/* ── Footer ─────────────────────────────────────────────── */
.footer{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:34px var(--gutter);font-size:13px;color:var(--muted);
}
.footer a{color:var(--muted);text-decoration:none;position:relative}
.footer a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s var(--ease);
}
.footer a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ── Containers: hold the measure on wide screens ────────── */
.grid-2,.grid-3,.curriculum,.signals,.pillars{
  max-width:1240px;margin-left:auto;margin-right:auto;
}
/* the fanned photos lean down-right - leave them room */
.stackwrap{padding:0 36px 36px 0}

/* ── Responsive ladder ──────────────────────────────────── */

/* small laptops */
@media (max-width:1200px){
  .mod{grid-template-columns:88px minmax(0,.9fr) minmax(0,1.45fr)}
  .grid-2--hero{gap:clamp(28px,4vw,52px)}
  .stack{width:min(100%,460px)}
}

/* tablets, landscape */
@media (max-width:980px){
  .grid-2,.grid-2--hero,.grid-2--wide,.grid-3,.pillars,.signals,.booking,.cols{grid-template-columns:minmax(0,1fr)}
  .signal--wide{grid-column:auto}
  .grid-2--hero{gap:clamp(36px,6vw,56px)}
  .stack{width:min(78%,380px)}
  .stackwrap{padding:0 24px 24px 0}
  .mod{grid-template-columns:64px minmax(0,1fr);row-gap:10px}
  .mod__num{grid-row:span 2}
  .formcard,.hero__copy{max-width:none}
  .pillar,.col{margin-top:8px}
  .slipcard{flex-direction:column;align-items:flex-start;text-align:left}
}

/* tablets, portrait - the sticky bar appears from here down */
@media (max-width:760px){
  body{padding-bottom:84px}
  .duo{flex-direction:column;align-items:stretch}
  .booking{gap:32px}
  .player__bar{gap:10px;bottom:12px}
  .player__time{font-size:12.5px}
  .q{padding:24px 0}
  .slipcard{gap:18px}
  .cols{row-gap:8px}
}

/* phones */
@media (max-width:560px){
  .rail{gap:8px 10px}
  .rail__sep{display:none}
  .rail__step{padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:10.5px}
  .rail--paper .rail__step{border-color:var(--line)}
  .audit{background-size:auto,120% auto;background-position:center,50% 90%}
  .btn{height:54px;width:100%}
  .btn--ghost{height:50px}
  .day{height:40px;font-size:14px}
  .stack{width:min(88%,340px)}
  .signal:hover{padding-left:8px}
  .blockquote,blockquote{padding-left:16px}
}

/* small phones */
@media (max-width:400px){
  :root{--gutter:16px}
  .wordmark{font-size:12px;letter-spacing:.12em}
  .day{height:36px;font-size:13px}
  .cal__grid,.cal__dow{gap:4px}
  .postgrid{gap:7px}
  .track{padding:10px 12px}
  .formcard{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .lines span i{transform:none !important}
  .rail::after{transform:scaleX(1)}
}

@media print{
  .header,.track,.stickybar,.progress,.btn,.footer{display:none !important}
  body{background:#fff}
}

/* ── Page 3 odds and ends ───────────────────────────────── */
[data-reveal-now]{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal-now].is-in{opacity:1;transform:none}

.duo{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,40px);
  margin-top:44px;padding-top:36px;border-top:1px solid var(--line-soft);
}
@media (max-width:760px){.duo{flex-direction:column;align-items:stretch}}

.nope{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:10px;
  font-size:clamp(15.5px,1.15vw,17px);color:var(--body);
  transition:transform .4s var(--ease),border-color .4s ease,background .4s ease;
}
.nope span{color:var(--accent);font-size:18px;transition:transform .4s var(--ease)}
.nope:hover{transform:translateX(6px);border-color:var(--accent-2);background:#fff}
.nope:hover span{transform:rotate(90deg)}

.quotebox{
  background:linear-gradient(160deg,#100F0E 0%,#1C1A18 100%);
  border-radius:10px;padding:clamp(24px,2.6vw,30px) clamp(24px,2.8vw,32px);margin-bottom:24px;
  font-family:var(--serif);font-size:clamp(21px,2vw,26px);line-height:1.35;color:#fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.quotebox:hover{transform:translateY(-3px);box-shadow:0 26px 56px -34px rgba(0,0,0,.9)}

.maybe{
  padding:14px 20px;border:1px solid rgba(255,255,255,.18);border-radius:8px;
  font-size:clamp(15.5px,1.15vw,16.5px);color:var(--on-dark-2);
  transition:border-color .4s ease,background .4s ease,transform .4s var(--ease);
}
.maybe:hover{border-color:var(--accent-3);background:rgba(255,255,255,.05);transform:translateX(6px)}

.slot--mine{
  opacity:1;background:var(--ink);border-color:#24211E;color:#fff;text-decoration:none;
}
.slot--mine small{opacity:.75}

/* ── YouTube embed ──────────────────────────────────────── */
.player__yt{position:absolute;inset:0;z-index:1}
.player__yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* with YouTube's own controls in play, our overlay only sits on top until it starts */
.player--yt .player__play{z-index:3}
.player--yt.is-playing .player__play{pointer-events:none}

/* consent line under the opt-in forms */
.form__legal{
  margin-top:2px;font-size:12px;line-height:1.5;color:#9A918A;
}
.form__legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.form__legal a:hover{color:var(--accent-3)}
.formcard--paper .form__legal{color:var(--muted)}
.formcard--paper .form__legal a:hover{color:var(--accent)}

/* email typo suggestion */
.form__fix,.form__keep{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;
  transition:color .3s ease;
}
.form__fix{font-weight:600;color:#fff}
.form__keep{opacity:.7;margin-left:4px}
.form__fix:hover,.form__keep:hover{color:var(--accent-3)}
.formcard--paper .form__fix{color:var(--ink)}
.formcard--paper .form__fix:hover,.formcard--paper .form__keep:hover{color:var(--accent)}

/* ── Email code step ────────────────────────────────────── */
.codestep{display:grid;gap:14px;animation:codeIn .5s var(--ease)}
@keyframes codeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.codestep__lead{font-size:14.5px;line-height:1.55;color:var(--on-dark);margin:0}
.codestep__lead b{color:#fff;font-weight:600;word-break:break-all}
.codestep__input{
  width:100%;height:64px;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;
  background:rgba(0,0,0,.2);color:#fff;
  font-family:var(--serif);font-size:30px;letter-spacing:.34em;text-align:center;
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.codestep__input::placeholder{color:#6A625A;letter-spacing:.18em;font-size:24px}
.codestep__input:focus{
  outline:none;border-color:var(--accent-3);
  box-shadow:0 0 0 4px rgba(198,181,166,.16);background:rgba(0,0,0,.32);
}
.codestep__actions{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:0}
.codestep__msg{margin:0}
.formcard--paper .codestep__lead{color:var(--body)}
.formcard--paper .codestep__lead b{color:var(--ink)}
.formcard--paper .codestep__input{border-color:var(--line-2);background:#fff;color:var(--ink)}
.formcard--paper .codestep__input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(122,104,87,.12)}

/* ══════════════════════════════════════════════════════════
   Hero ordering + iOS safe area
   ══════════════════════════════════════════════════════════ */

/* Desktop keeps text and form stacked on the left, photos right.
   Named areas let the phone put the photos between them instead. */
.grid-2--hero{
  grid-template-areas:
    "text  photo"
    "form  photo";
  align-items:start;
}
.hero__text{grid-area:text}
.hero__form{grid-area:form;margin-top:clamp(20px,2.4vw,34px)}
.grid-2--hero .stackwrap{grid-area:photo;align-self:center}

@media (max-width:980px){
  .grid-2--hero{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "text"
      "photo"
      "form";
    row-gap:clamp(28px,5vw,40px);
  }
  .hero__form{margin-top:0}
  /* the fanned photos read better a touch smaller above the form */
  .grid-2--hero .stackwrap{padding:0 20px 20px 0}
}

/* The bottom bar sat flush against the iPhone home indicator.
   env() is 0 everywhere else, so this costs nothing on desktop. */
.stickybar{
  padding:14px clamp(14px,4vw,20px);
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  padding-left:calc(clamp(14px,4vw,20px) + env(safe-area-inset-left, 0px));
  padding-right:calc(clamp(14px,4vw,20px) + env(safe-area-inset-right, 0px));
}

@media (max-width:760px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
}

/* viewport-fit=cover lets content reach the notch in landscape -
   keep the page gutters clear of it. */
@media (max-width:900px){
  .header,.track,.sec,.hero,.band,.footer{
    padding-left:calc(var(--gutter) + env(safe-area-inset-left, 0px));
    padding-right:calc(var(--gutter) + env(safe-area-inset-right, 0px));
  }
}

/* ══════════════════════════════════════════════════════════
   Header button: desktop only, and never squeezed
   Deleted from the phone by CSS, not from the markup - the
   bottom bar is the mobile equivalent.
   ══════════════════════════════════════════════════════════ */
.header__cta{
  width:auto;                    /* beats the full-width .btn rule */
  min-width:max-content;         /* the track can never squash the label */
  flex-shrink:0;
  white-space:nowrap;
  height:42px;
  padding:0 20px;
  font-size:13px;
  letter-spacing:.03em;
  overflow:hidden;               /* the shine sweep must stay inside the edges */
}

/* The middle column may give ground; the button never does. */
.header{grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr)}

/* Tablets and phones: the bottom bar takes over. */
@media (max-width:900px){
  .header__cta{display:none}
  .header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════
   Confirmation card portrait
   The photo is a tall portrait with the face in the top
   quarter, so a centred square crop landed on the blazer.
   Anchoring to the top puts the face in the circle.
   ══════════════════════════════════════════════════════════ */
.slipcard__avatar{
  width:clamp(104px, 11vw, 132px);
  height:clamp(104px, 11vw, 132px);
}
.slipcard__avatar img{
  object-fit:cover;
  object-position:center top;
}
@media (max-width:560px){
  .slipcard__avatar{width:96px;height:96px}
}

/* ══════════════════════════════════════════════════════════
   Confirmation actions
   Two equal columns, so the outline button matches the solid
   one exactly instead of inheriting the shorter ghost height.
   ══════════════════════════════════════════════════════════ */
.actions{
  display:grid;
  grid-template-columns:repeat(2, 250px);
  gap:12px;
  justify-content:center;
}
.actions .btn,
.actions .btn--ghost{
  height:58px;
  width:100%;
  padding:0 16px;
}
@media (max-width:560px){
  .actions{grid-template-columns:minmax(0,1fr);width:100%}
  .actions .btn,.actions .btn--ghost{height:54px}
}

/* ══════════════════════════════════════════════════════════
   Scroll landings
   The header is sticky, so a plain jump parks the target
   underneath it. This reserves the header's height.
   ══════════════════════════════════════════════════════════ */
[data-form-anchor],
#aplikimi,
#kalendar,
#opt-in{
  scroll-margin-top:clamp(76px, 11vh, 104px);
}

/* ══════════════════════════════════════════════════════════
   Video page: embed, audit strip, booking
   ══════════════════════════════════════════════════════════ */

/* YT.Player replaces the mount div with its own iframe, so this
   targets the frame's child rather than a class we control. */
.player__frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* The audit sits directly under the video as one horizontal band. */
.auditstrip{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,36px);
  padding:clamp(20px,2.6vw,28px) clamp(20px,3vw,34px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;
  transition:border-color .5s ease,box-shadow .5s var(--ease),transform .5s var(--ease);
}
.auditstrip:hover{
  border-color:var(--accent-2);
  transform:translateY(-3px);
  box-shadow:0 26px 56px -40px rgba(19,18,17,.5);
}
.auditstrip__text{min-width:0}
.auditstrip__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:0;
}
.auditstrip__btn{flex-shrink:0;white-space:nowrap}
@media (max-width:760px){
  .auditstrip{flex-direction:column;align-items:stretch;text-align:left}
  .auditstrip__btn{width:100%}
}

/* Calendar on the left, the four questions on the right. */
.booking2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,56px);
  align-items:start;
  max-width:1060px;margin:0 auto;
  border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3);
  padding:clamp(28px,4vw,44px) 0;
}
.booking2__cal{min-width:0}
.booking2__form{min-width:0}
.qlist--tight{max-width:none;margin:0}
.qlist--tight .q:first-child{border-top:0;padding-top:0}
.qlist--tight .q{padding:22px 0}
@media (max-width:900px){
  .booking2{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,36px)}
}

/* ══════════════════════════════════════════════════════════
   Proof figure - a light slide on a dark section
   ══════════════════════════════════════════════════════════ */
.figure{
  margin:clamp(26px,4vw,42px) auto 0;
  max-width:1000px;
  background:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:clamp(10px,1.4vw,16px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.figure.is-in{opacity:1;transform:none}
.figure img{width:100%;height:auto;display:block;border-radius:8px}
.figure__caption{
  margin-top:14px;font-size:13px;color:var(--muted);text-align:center;
}
@media (prefers-reduced-motion:reduce){
  .figure{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════
   VËMENDJA ≠ VENDIMI
   Set in caps like the slide, with the sign carrying the accent.
   ══════════════════════════════════════════════════════════ */
.neq-title{
  text-transform:uppercase;
  letter-spacing:.005em;
  font-size:clamp(28px,4.2vw,52px);
}
.neq{
  color:var(--accent);
  font-style:normal;
  padding:0 .12em;
  font-size:.92em;
  display:inline-block;
  transition:transform .5s var(--ease);
}
.neq-title:hover .neq{transform:rotate(-8deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){
  .neq-title:hover .neq{transform:none}
}

/* ══════════════════════════════════════════════════════════
   "Pyetja e vërtetë" card
   The card needs enough width to keep the whole journey on one
   line - BLEVA dropping to a second row breaks the whole point
   of showing it as a single path.
   ══════════════════════════════════════════════════════════ */
.grid-2--proof{
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
}
@media (max-width:980px){
  .grid-2--proof{grid-template-columns:minmax(0,1fr)}
}

/* Tighter rail for use inside a card rather than full width. */
.rail--compact{
  gap:clamp(5px,.7vw,10px);
  padding-left:0;padding-right:0;
}
.rail--compact .rail__step{
  font-size:clamp(9.5px,.82vw,11.5px);
  letter-spacing:.1em;
  padding:4px 0;
}
.rail--compact .rail__sep{font-size:11px}
.rail--compact .rail__step--end{
  padding:7px 13px;
  letter-spacing:.1em;
}
/* the card's own padding is the squeeze at mid widths */
.grid-2--proof .card{padding-left:clamp(20px,2.2vw,30px);padding-right:clamp(20px,2.2vw,30px)}

/* ── The not-equal title stays on one line ──────────────── */
.neq-title{
  white-space:nowrap;
  font-size:clamp(18px,3.2vw,34px);
  letter-spacing:.01em;
}
@media (max-width:420px){
  .neq-title{font-size:clamp(16px,4.6vw,20px)}
}