/* ===========================================================
   QIVEDA · THE LIVING PRACTICE
   Design System Layer — loaded after the page's base styles.
   Source of truth: Qiveda Design System (Foundations, Type,
   Components, Motion). Everything here refines rhythm,
   hierarchy, contrast and interaction to brand standard.
   =========================================================== */

:root{
  /* — Ground & light — */
  --qv-black:#000000;
  --qv-ink:#0A0908;
  --qv-gold:#CE974E;
  --qv-champagne:#E7C48A;
  --qv-cream:#F5F1E8;
  --qv-dim:#B3AC9D;

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

  /* — Section rhythm: bounded, never viewport-stretched — */
  --sec-y:clamp(72px, 8.5vw, 132px);
  --sec-y-lg:clamp(96px, 11vw, 176px);

  /* — Tracking — */
  --tr-wordmark:.34em;
  --tr-eyebrow:.26em;
  --tr-label:.2em;

  /* — Measure — */
  --measure:62ch;

  /* — Easing — */
  --ease-qv:cubic-bezier(.16,1,.3,1);
}

/* ----------------------------------------------------------
   1 · VERTICAL RHYTHM
   Replaces vh-based padding, which opened large voids on tall
   screens and crushed content on short ones.
   ---------------------------------------------------------- */
section{padding-top:var(--sec-y);padding-bottom:var(--sec-y);scroll-margin-top:72px}
section.band,section.begin{padding-top:var(--sec-y-lg);padding-bottom:var(--sec-y-lg)}
.band,.begin{min-height:0}
.band .content,.begin .content{padding-top:var(--S-4);padding-bottom:var(--S-4)}
.threshold{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.hero{height:min(100svh,940px);min-height:600px}
footer{padding-top:var(--sec-y-lg);padding-bottom:var(--sec-y)}

.doors,.blocks{margin-top:var(--S-8)}
.pillars,.pillstrip{margin-top:var(--S-8);padding-top:var(--S-7)}
.calwrap{padding-top:var(--S-8);padding-bottom:var(--S-8)}
.signup{margin-top:var(--S-7)}

/* ----------------------------------------------------------
   2 · TYPOGRAPHY
   Cormorant Garamond carries voice; Arboria carries
   information. Tracking follows the system exactly.
   ---------------------------------------------------------- */
h1,h2{letter-spacing:-.012em;text-wrap:balance}
h2{margin-top:var(--S-3)}
.eyebrow{letter-spacing:var(--tr-eyebrow);font-size:11px;line-height:1.4}
.hero .lp{letter-spacing:var(--tr-wordmark)}
.sub{margin-top:var(--S-3);max-width:34ch;text-wrap:balance}
p.body{max-width:var(--measure);line-height:1.72;font-size:clamp(1.02rem,1.05vw,1.12rem)}
p.body + p.body{margin-top:var(--S-4)}
.doctrine{max-width:30ch;text-wrap:balance}

/* Optical correction: large serif display reads tighter */
h1{line-height:1.02}
h2{line-height:1.06}

/* ----------------------------------------------------------
   3 · CONTRAST & LEGIBILITY
   Body copy over imagery always sits on a scrim; no text is
   allowed below comfortable reading contrast.
   ---------------------------------------------------------- */
.band .content p.body,.begin .content p.body{color:#C7C0B0}
.band .sc{background:linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.62) 55%,rgba(0,0,0,.86))}
.begin .sc{background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.86) 42%,rgba(0,0,0,.7) 70%,rgba(0,0,0,.9))}
.begin .bg{opacity:.34}
.door p,.block p,.appfeat p{color:#B9B2A3}

/* ----------------------------------------------------------
   4 · GEOMETRY · the diamond rule
   Hand-drawn section punctuation instead of stock dividers.
   ---------------------------------------------------------- */
.qv-rule{display:flex;align-items:center;justify-content:center;gap:var(--S-4);margin:var(--S-8) auto 0;max-width:420px;opacity:.8}
.qv-rule::before,.qv-rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(206,151,78,.5))}
.qv-rule::after{background:linear-gradient(270deg,transparent,rgba(206,151,78,.5))}
.qv-rule i{width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--qv-gold);display:block}

/* ----------------------------------------------------------
   5 · COMPONENTS
   ---------------------------------------------------------- */
/* Buttons — generous, quiet, never shouty */
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:var(--tr-label);transition:background .5s var(--ease-qv),border-color .5s var(--ease-qv),color .5s var(--ease-qv),transform .5s var(--ease-qv)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Ghost / inline links — underline grows from the left */
.ghostlink,.door .go{position:relative;border-bottom-color:transparent}
.ghostlink::after,.door .go::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--qv-gold);transform-origin:left;opacity:.38;transition:opacity .5s var(--ease-qv);}
.ghostlink:hover::after,.door:hover .go::after,.door .go:hover::after{opacity:1}
.ghostlink:hover{letter-spacing:0}

/* Doors — a gold marker enters on hover */
.door{transition:background .55s var(--ease-qv)}
.door h3{transition:color .45s var(--ease-qv)}
.door:hover h3{color:var(--qv-champagne)}

/* Pillars & bands keep even optical weight */
.pillar,.block{min-width:0}
.pill b{text-wrap:balance}

/* Forms — inputs must feel like objects, not hints */
.sigrow,.namerow input{border-bottom-width:1px}
.sigrow input,.namerow input,.modal input,.modal textarea{min-height:52px;font-size:1.05rem}
.sigrow input::placeholder,.namerow input::placeholder,
.modal input::placeholder,.modal textarea::placeholder{color:#8B8474;opacity:1}
.sigrow button{min-height:48px;padding-left:var(--S-4);padding-right:var(--S-2)}
.modal .card{padding:clamp(28px,5vw,52px)}

/* Video frame — the gold border sits flush to the 16:9 field */
#voices .vwrap{aspect-ratio:16/9;overflow:hidden}
#voices .vwrap iframe{width:100%;height:100%}

/* ----------------------------------------------------------
   6 · ACCESSIBILITY
   ---------------------------------------------------------- */
:focus-visible{outline:1px solid var(--qv-gold);outline-offset:3px}
.btn:focus-visible,.ghostlink:focus-visible,nav a:focus-visible{outline-offset:5px}
input:focus-visible,textarea:focus-visible{outline:none}
.sigrow:focus-within,.namerow input:focus{border-color:var(--qv-gold)}
#motion{min-height:34px}

/* ----------------------------------------------------------
   7 · MOTION — everything breathes, nothing hurries
   ---------------------------------------------------------- */
[data-reveal]{transition-duration:1.15s;transition-timing-function:var(--ease-qv)}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ----------------------------------------------------------
   8 · RESPONSIVE REFINEMENT
   ---------------------------------------------------------- */
@media(max-width:1024px){
  .pillstrip{grid-template-columns:1fr 1fr;gap:var(--S-6)}
}
@media(max-width:820px){
  :root{--sec-y:clamp(64px,10vw,96px);--sec-y-lg:clamp(72px,12vw,112px)}
  .hero{height:min(100svh,760px)}
  .split{gap:var(--S-8)}
}
@media(max-width:560px){
  .pillars,.pillstrip{grid-template-columns:1fr;gap:var(--S-5)}
  h1{font-size:clamp(2.4rem,10vw,3.2rem)}
  h2{font-size:clamp(2rem,8.5vw,2.6rem)}
  .qv-rule{margin-top:var(--S-7)}
}

/* ===========================================================
   9 · COMPOSITION PASS — designer layer
   Visible refinements: hero balance, section punctuation,
   door rows, pillar rhythm, the Letters panel.
   =========================================================== */

/* --- 9.1 Eyebrows carry a gold diamond --- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--qv-gold)}
.eyebrow::before{content:'';width:5px;height:5px;flex:none;transform:rotate(45deg);
  border:1px solid currentColor;opacity:.85}

/* --- 9.2 Hero: tighter optical centre, quieter cue --- */
.hero .scrollcue{opacity:.55;transition:opacity .6s var(--ease-qv)}
.hero:hover .scrollcue{opacity:.9}
.hero .scrollcue .line{position:relative;overflow:hidden}
.hero .scrollcue .line::after{content:'';position:absolute;inset:0;
  background:var(--qv-gold);animation:qv-drip 3.4s var(--ease-qv) infinite}
@keyframes qv-drip{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
.threshold .way{max-width:18ch;margin-inline:auto}

/* --- 9.3 Motion toggle: discreet, footer-anchored --- */
#motion{background:transparent;
  border-color:rgba(206,151,78,.24);border-radius:999px;
  padding:8px 14px;font-size:9.5px;letter-spacing:var(--tr-label);
  opacity:.34;transition:opacity .5s var(--ease-qv),border-color .5s var(--ease-qv)}
#motion:hover,#motion:focus-visible{opacity:1;border-color:var(--qv-gold)}

/* --- 9.4 The image frame: true brackets, graded photograph --- */
.frame{position:relative}
.frame{padding:14px;display:block;line-height:0}
.frame img{filter:grayscale(1) contrast(1.06) brightness(.94);
  transition:filter 1.1s var(--ease-qv),transform 1.4s var(--ease-qv)}
.frame:hover img{filter:grayscale(.82) contrast(1.02) brightness(1);transform:scale(1.012)}
.frame::before,.frame::after{content:'';position:absolute;width:56px;height:56px;
  border:1px solid rgba(206,151,78,.55);pointer-events:none}
.frame::before{top:0;left:0;border-right:0;border-bottom:0}
.frame::after{right:0;bottom:0;border-left:0;border-top:0}

/* --- 9.5 Pillars: each a column with its own gilded hairline --- */
.pillstrip{border-top:0;gap:var(--S-6)}
.pill{position:relative;padding-top:var(--S-5)}
.pill::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(206,151,78,.2);transition:background .6s var(--ease-qv)}
.pill:hover::before{background:rgba(206,151,78,.75)}
.pill b{display:block;font-size:clamp(1.25rem,1.6vw,1.55rem);line-height:1.1}
.pill span{display:block;margin-top:var(--S-3);font-size:10px;
  letter-spacing:var(--tr-label);color:#8E8778;transition:color .6s var(--ease-qv)}
.pill:hover span{color:var(--qv-dim)}

/* --- 9.6 Doors: numbered rows that light from the left --- */
.doors{counter-reset:door;border-top:1px solid rgba(206,151,78,.16)}
.door{position:relative;counter-increment:door;
  padding-left:clamp(20px,4vw,56px);padding-right:clamp(16px,2.5vw,32px);
  border-bottom:1px solid rgba(206,151,78,.16);
  transition:background .6s var(--ease-qv),padding-left .6s var(--ease-qv)}
.door::before{content:counter(door,decimal-leading-zero);
  position:absolute;left:clamp(4px,1.2vw,16px);top:calc(var(--S-6) + 4px);
  font-size:10px;letter-spacing:.14em;color:rgba(206,151,78,.4);
  transition:color .6s var(--ease-qv)}
.door::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--qv-gold);transform:scaleY(0);transform-origin:top;
  transition:transform .7s var(--ease-qv)}
.door:hover{background:linear-gradient(90deg,rgba(206,151,78,.07),rgba(206,151,78,0) 62%)}
.door:hover::after{transform:scaleY(1)}
.door:hover::before{color:var(--qv-gold)}
.door h3{font-size:clamp(1.3rem,1.9vw,1.7rem)}
.door .k{color:var(--qv-gold);letter-spacing:var(--tr-label);font-size:10px}
.door p{margin-top:var(--S-2);max-width:64ch}

/* --- 9.7 The Letters: a panel, not floating text --- */
.begin .content{position:relative}
.signup{position:relative;max-width:560px;padding:clamp(26px,3.4vw,42px);
  background:linear-gradient(180deg,rgba(8,7,6,.86),rgba(0,0,0,.72));
  border:1px solid rgba(206,151,78,.22);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.signup::before,.signup::after{content:'';position:absolute;width:22px;height:22px;pointer-events:none}
.signup::before{top:-1px;left:-1px;border-top:1px solid var(--qv-gold);border-left:1px solid var(--qv-gold)}
.signup::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--qv-gold);border-right:1px solid var(--qv-gold)}
.signup .lab{color:var(--qv-champagne)}
.signup .note{color:#B9B2A3;max-width:44ch}
.namerow{margin-top:var(--S-6)}
.sigrow input,.namerow input{background:transparent}

/* --- 9.8 Footer: settled, generous --- */
footer .sym{opacity:.9}
footer .cop{letter-spacing:var(--tr-label);color:#7C7669;margin-top:var(--S-6)}
footer .links{gap:clamp(18px,3vw,42px);margin-top:var(--S-6)}
footer .links a{letter-spacing:var(--tr-label);font-size:10px;
  transition:color .5s var(--ease-qv)}
footer .links a:hover{color:var(--qv-champagne)}
footer .oneliner{margin-top:var(--S-5)}

/* --- 9.9 Responsive for the composition pass --- */
@media(max-width:820px){
  .frame::before,.frame::after{width:34px;height:34px}
  .door{padding-left:44px}
  .door::before{left:6px;top:var(--S-5)}
  .signup{max-width:none}
}

/* ============================================================
   10 — THE ONE-TO-ONE PAGE  (/one-to-one)
   ============================================================ */
.oto-hero{position:relative;min-height:92vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:18vh var(--edge) 14vh;overflow:hidden}
.oto-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:18px;max-width:60rem}
.oto-mark{width:clamp(150px,15vw,208px);height:auto;margin-bottom:18px;
  filter:drop-shadow(0 0 44px rgba(206,151,78,.22))}
.oto-hero h1{max-width:16ch}
.oto-hero .sub{max-width:34ch}
.oto-hero-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:26px}
.oto-quiet{font-family:var(--serif);font-style:italic;color:var(--faint);
  font-size:clamp(.95rem,1.2vw,1.1rem);max-width:46ch;margin-top:14px}
#gate .oto-quiet,#changes .oto-quiet{margin-left:0}

/* pull quotes */
.oto-q{border-left:1px solid var(--gold-deep);padding-left:22px;margin-top:22px}
.oto-q p{font-family:var(--serif);font-style:italic;color:var(--white);
  font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.5}
.oto-q cite,.oto-big cite,.oto-close cite{display:block;margin-top:12px;font-style:normal;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dim)}

.oto-undeniable{text-align:center;padding:16vh var(--edge)}
.oto-big{max-width:24ch;margin:0 auto}
.oto-big p{font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.2}
.oto-big cite{color:var(--faint)}

.oto-close{text-align:center;max-width:34ch;margin:9vh auto 0}
.oto-close p{font-family:var(--serif);font-style:italic;color:var(--white);
  font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.4}

/* what changes */
.oto-changes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);
  margin-top:8vh;padding-top:5vh;border-top:1px solid rgba(206,151,78,.22)}
.oto-change b{display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.3rem,1.8vw,1.75rem);color:var(--white)}
.oto-change p{font-family:var(--serif);font-style:italic;color:var(--dim);
  font-size:.98rem;line-height:1.5;margin-top:14px}
.oto-change cite{display:block;margin-top:12px;font-style:normal;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim)}

/* the four months */
.oto-stages{margin-top:8vh;border-top:1px solid var(--gold-deep)}
.oto-stage{display:grid;grid-template-columns:170px 1fr;gap:clamp(20px,4vw,54px);
  padding:clamp(30px,5vh,54px) 0;border-bottom:1px solid var(--gold-deep);
  position:relative;transition:background .6s var(--ease-qv)}
.oto-stage:hover{background:linear-gradient(90deg,rgba(206,151,78,.05),transparent 70%)}
.oto-stage-num{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);
  color:var(--gold-deep);line-height:1}
.oto-stage h3{font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,2.8vw,2.4rem);color:var(--white)}
.oto-stage-lead{font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(1.05rem,1.6vw,1.3rem);margin-top:6px}
.oto-stage p{color:var(--dim);font-size:1rem;line-height:1.7;max-width:44em;margin-top:16px}

/* testimonial films */
.oto-vframe{position:relative;padding-top:56.25%;border:2px solid rgba(206,151,78,.6);background:#000}
.oto-vframe iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.oto-featured{margin:8vh auto 0;max-width:900px}
.oto-featured .oto-vframe{border-width:3px;border-color:rgba(206,151,78,.75)}
.oto-featured figcaption,.oto-vcard figcaption{display:flex;gap:14px;align-items:baseline;
  justify-content:center;margin-top:14px;flex-wrap:wrap}
.oto-featured figcaption b,.oto-vcard figcaption b{font-family:var(--serif);font-weight:500;
  color:var(--white);font-size:1.1rem}
.oto-featured figcaption span,.oto-vcard figcaption span{font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dim)}
.oto-vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,360px));
  justify-content:center;gap:clamp(24px,3vw,42px);margin-top:8vh}

/* the gate */
.oto-gate{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,5vw,64px);
  margin-top:7vh;align-items:start}
.oto-gate-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px)}
.oto-gate-col .k{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);padding-bottom:14px;border-bottom:1px solid var(--gold-deep)}
.oto-gate-col ul{list-style:none;margin-top:18px}
.oto-gate-col li{position:relative;padding-left:22px;color:var(--dim);font-size:.95rem;
  line-height:1.6;margin-bottom:14px}
.oto-gate-col li::before{content:'\25C6';position:absolute;left:0;top:.1em;font-size:7px;color:var(--gold-dim)}
.oto-gate-q{border-left:none;padding-left:0;border-top:1px solid var(--gold-deep);padding-top:24px;margin-top:0}

/* application panel */
.oto-apply{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:start}
.oto-panel{position:relative;background:rgba(5,4,3,.9);border:1px solid var(--gold-deep);
  padding:clamp(28px,4vw,48px)}
.oto-panel::before,.oto-panel::after{content:'';position:absolute;width:22px;height:22px;
  border:1px solid var(--gold);pointer-events:none}
.oto-panel::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.oto-panel::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.oto-panel label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin:22px 0 8px}
.oto-panel input,.oto-panel textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--gold-deep);color:var(--white);font-family:var(--sans);
  font-size:.98rem;padding:10px 2px;transition:border-color .4s}
.oto-panel textarea{min-height:96px;resize:vertical}
.oto-panel input:focus,.oto-panel textarea:focus{outline:none;border-color:var(--gold)}
.oto-panel .send{margin-top:34px;width:100%;cursor:pointer;min-height:52px}
.oto-panel .signote{margin-top:22px;font-family:var(--serif);font-style:italic;color:var(--gold)}

@media(max-width:980px){
  .oto-changes{grid-template-columns:1fr 1fr;gap:32px}
  .oto-gate,.oto-apply{grid-template-columns:1fr}
  .oto-gate-q{margin-top:10px}
}
@media(max-width:640px){
  .oto-hero{min-height:88vh;padding:16vh var(--edge) 12vh}
  .oto-changes{grid-template-columns:1fr;gap:28px}
  .oto-gate-cols{grid-template-columns:1fr}
  .oto-stage{grid-template-columns:1fr;gap:6px}
  .oto-stage-num{font-size:2rem}
  .oto-vgrid{grid-template-columns:1fr;margin-top:6vh}
}

/* --- 10.1 Quote legibility pass ---
   The italic serif read too faintly at small sizes. Quotes now sit in the
   sans face with real weight and full contrast, while the display pull
   quotes keep the serif voice but drop the slant. */
.oto-q p{font-family:var(--sans);font-style:normal;font-weight:500;
  color:var(--cream,#F5F1E8);font-size:clamp(1.02rem,1.35vw,1.18rem);
  line-height:1.6;letter-spacing:.005em}
.oto-change p{font-family:var(--sans);font-style:normal;font-weight:500;
  color:#D8D2C4;font-size:1rem;line-height:1.62}
.oto-big p{font-style:normal;font-weight:500;letter-spacing:-.01em}
.oto-close p{font-style:normal;font-weight:500;color:var(--cream,#F5F1E8)}
.oto-quiet{font-family:var(--sans);font-style:normal;color:#B9B2A3;
  font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.68}
.oto-stage-lead{font-style:normal;font-weight:500}

/* ============================================================
   11 — HOMEPAGE CONVERSION LAYER  (/home)
   Proof above the fold, a teacher with a face, one clear road
   into the one-to-one work.
   ============================================================ */

/* 11.1 Nav — condenses on scroll, gold hairline of progress */
nav#nav{transition:padding .6s var(--ease-qv),background .6s var(--ease-qv),
  backdrop-filter .6s var(--ease-qv),opacity .8s ease,transform .8s ease}
nav#nav.cond{padding-top:12px;padding-bottom:12px;
  background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,0));
  backdrop-filter:blur(9px)}
#navprog{position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--qv-gold),var(--qv-champagne));
  transform:scaleX(0);transform-origin:left;opacity:.75;pointer-events:none}

/* 11.2 Proof strip — the first thing after the threshold line */
.proof{padding-top:0;padding-bottom:var(--sec-y)}
.proofrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);
  padding-top:var(--S-7);border-top:1px solid rgba(206,151,78,.18)}
.proofrow blockquote{position:relative;padding-left:20px}
.proofrow blockquote::before{content:'';position:absolute;left:0;top:.35em;bottom:.35em;
  width:1px;background:linear-gradient(180deg,var(--qv-gold),rgba(206,151,78,0))}
.proofrow p{font-family:var(--serif);color:var(--qv-cream);
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.5;font-weight:500}
.proofrow cite{display:block;margin-top:12px;font-style:normal;font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--qv-gold)}
.prooffoot{margin-top:var(--S-7);font-size:10px;letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:#8E8778}

/* 11.3 The tonal break — one lighter band in an all-dark scroll */
section.tonal{background:linear-gradient(180deg,rgba(245,241,232,.035),rgba(245,241,232,.055) 50%,rgba(245,241,232,.02));
  border-top:1px solid rgba(206,151,78,.14);border-bottom:1px solid rgba(206,151,78,.14)}
section.tonal .frame img{filter:grayscale(1) contrast(1.05) brightness(.96)}
section.tonal .split{grid-template-columns:.85fr 1.15fr}

/* 11.4 What changes — reuses the one-to-one card rhythm */
#changes .oto-changes{margin-top:var(--S-8);padding-top:var(--S-7)}

/* 11.5 The one-to-one invitation band */
.oneone{text-align:center}
.oneone-in{max-width:56ch;margin-inline:auto;
  padding-top:var(--S-7);border-top:1px solid rgba(206,151,78,.2)}
.oneone-in p.body{margin-inline:auto;text-align:center;max-width:52ch}
.oneone-in .eyebrow{justify-content:center}
.oneone-actions{margin-top:var(--S-7)}

/* 11.6 The path — the one-to-one door carries the weight */
.door.lead{background:linear-gradient(90deg,rgba(206,151,78,.06),rgba(206,151,78,0) 70%)}
.door.lead h3{color:var(--qv-champagne)}
.door.lead::after{transform:scaleY(1);opacity:.55}
.door.lead:hover::after{opacity:1}

/* 11.7 Voices — the road out to all nine films */
.voices-more{margin-top:var(--S-6)}

/* 11.8 Responsive */
@media(max-width:900px){
  .proofrow{grid-template-columns:1fr;gap:var(--S-6)}
  section.tonal .split{grid-template-columns:1fr}
  #changes .oto-changes{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  #changes .oto-changes{grid-template-columns:1fr}
  .oneone-actions .btn{width:100%}
}


/* ============================================================
   10.1 — ONE-TO-ONE HERO CELESTIAL DEPTH FRAME
   ============================================================ */
.oto-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* anchor content in upper two-thirds */
  text-align: center;
  padding: 12vh var(--edge) 8vh;
  overflow: hidden;
}

.oto-hero-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 60rem;
  margin-top: 8vh;
}

.oto-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 40%, #18181b 0%, #0a0a0c 55%, #050506 100%);
}

.oto-poster-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: saturate(0.75) brightness(0.55);
  transform: scale(1.02);
}

.oto-poster-depth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, transparent 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.78) 55%, rgba(0,0,0,0.95) 100%);
}

.oto-poster-aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 55% at 50% 38%, rgba(206,151,78,0.14) 0%, rgba(206,151,78,0.04) 35%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.8;
}

.oto-frame {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(206,151,78,0.12);
  pointer-events: none;
  z-index: 2;
}

.oto-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  border-color: rgba(206,151,78,0.32);
  border-style: solid;
}

.oto-corner-tl {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.oto-corner-tr {
  top: -1px;
  right: -1px;
  border-width: 1px 1px 0 0;
}

.oto-corner-bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 1px 1px;
}

.oto-corner-br {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

@media (max-width: 640px) {
  .oto-hero {
    min-height: 88vh;
    padding: 10vh var(--edge) 6vh;
  }
  .oto-hero-in {
    margin-top: 6vh;
    gap: 14px;
  }
  .oto-frame {
    inset: 16px;
  }
  .oto-corner {
    width: 28px;
    height: 28px;
  }
}

/* ----------------------------------------------------------
   12 · MOBILE SAFETY
   No section may exceed the viewport. Content columns shrink,
   never spill.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .band .content, .begin .content, .cond-wrap, .oto-hero-in {
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .band .content h2, .begin .content h2 { text-wrap: balance; }
}
@media (max-width: 860px) {
  /* room for the sticky apply bar */
  footer { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
  /* the floating motion toggle overlaps content on small screens */
  #motion { display: none !important; }
}

/* ── Entity statement + answer set (GEO) ───────────────────────── */
.entity{padding:clamp(40px,6vh,72px) 22px clamp(8px,2vh,24px)}
.entity .ewrap{max-width:760px;margin:0 auto;text-align:center}
.entity .elead{font-family:var(--serif,"Cormorant Garamond",Georgia,serif);
  font-size:clamp(19px,2.5vw,25px);line-height:1.55;color:#E7DFD2;font-weight:300}
.entity .esub{margin-top:20px}
.esub{font-size:clamp(14px,1.7vw,15.5px);line-height:1.75;
  color:#A79F91;max-width:660px;margin-left:auto;margin-right:auto;text-align:center}


.answers .esub{margin-top:34px}

.answers{padding:clamp(56px,8vh,110px) 22px}
.answers .awrap{max-width:780px;margin:0 auto;text-align:center}
.answers h2{font-family:var(--serif,"Cormorant Garamond",Georgia,serif);font-weight:300;
  font-size:clamp(28px,4.4vw,42px);margin:14px 0 30px;color:#F2EBDD}
.qalist{text-align:left;border-top:1px solid rgba(206,151,78,.16)}
.qa{border-bottom:1px solid rgba(206,151,78,.16)}
.qa>summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:var(--serif,"Cormorant Garamond",Georgia,serif);font-size:clamp(17px,2.2vw,21px);
  color:#E7DFD2;font-weight:400}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:#CE974E;font-size:19px;line-height:1}
.qa[open]>summary:after{content:"–"}
.qa>p{padding:0 0 20px;margin:0;color:#A79F91;font-size:15px;line-height:1.8;max-width:66ch}

/* Required-field markers */
.reqmark{font-style:normal;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-left:.5em;color:var(--gold,#c9a227)}
.fielderr{border-color:#c66 !important;box-shadow:0 0 0 1px rgba(204,102,102,.35)}