/* ============================================================
   Dean Blankfield — Home. Faithful recreation of original.
   Inter + Rethink Sans. Warm brown / cream / taupe palette.
   ============================================================ */

:root {
  --ink: #1C1C1B;
  --brown: #6A5D52;
  --brown-dk: #574C43;
  --taupe: #979086;
  --cream: #F9F9F8;
  --paper: #F6F2EC;
  --sand: #ECE4D8;
  --mint: #ECF8EF;
  --muted: #475050;
  --muted2: #887D75;
  --eb: #4E4644;
  --hair: rgba(28,28,27,0.12);
  --hair-w: rgba(255,255,255,0.18);
  --green-dk: #001B08;

  --inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rethink: "Rethink Sans", var(--inter);

  --pad: clamp(22px, 8.3vw, 120px);
  --maxw: 1440px;
  --r: 24px;
  --pill: 45px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--inter); background: #fff; color: var(--ink);
  font-size: 18px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1,h2,h3 { margin: 0; font-weight: 500; letter-spacing: -0.06em; }
p { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.eyebrow { font-family: var(--inter); font-size: 16px; letter-spacing: -0.06em; color: var(--eb); }

/* ---- Buttons (filled pill + circle arrow) ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 16px 16px 24px; border-radius: var(--pill); font-family: var(--inter); font-weight: 700; font-size: 16px; letter-spacing: -0.016em; border: none; cursor: pointer; transition: transform .35s var(--ease), background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn .ar { width: 24px; height: 24px; display: grid; place-items: center; flex: none; transition: transform .35s var(--ease); }
.btn:hover .ar { transform: translateX(3px); }
.btn .ar svg { width: 22px; height: 22px; }
.btn--glass { background: rgba(236,248,239,0.14); color: #fff; backdrop-filter: blur(6px); }
.btn--glass:hover { background: rgba(236,248,239,0.24); }
.btn--white { background: #fff; color: var(--brown); }
.btn--brown { background: var(--brown); color: #fff; }
.btn--brown:hover { background: var(--brown-dk); }

/* ============================================================
   Nav
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s; }
.nav.scrolled { background: rgba(106,93,82,0.85); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.nav__brand { font-size: 24px; font-weight: 500; letter-spacing: -0.016em; color: #fff; }
.nav__links { display: flex; gap: 32px; align-items: center; }
.nav__links a { font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.92); transition: opacity .2s; }
.nav__links a:hover { opacity: .65; }
.nav__cta { padding: 12px 24px; border-radius: var(--pill); font-size: 16px; font-weight: 700; letter-spacing: -0.016em; color: #fff; border: 1px solid transparent; transition: opacity .2s; }
.nav__cta:hover { opacity: 0.65; }
.nav__burger { display: none; }

/* Collapse nav to a single Contact pill below desktop so the 6 links never overlap the CTA */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__cta:not(.nav__burger) { display: none; }
  .nav__burger { display: inline-flex; }
}

/* ============================================================
   Hero — brown split with portrait, watermark, glass cards
   ============================================================ */
.home-hero { position: relative; background: radial-gradient(115% 95% at 72% 12%, #82735F 0%, #6A5D52 46%, #564B41 100%); overflow: hidden; min-height: 100svh; display: flex; }
.hh { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(96px,12vh,150px) var(--pad) 0; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(30px,4vw,64px); align-items: stretch; }
.hh__left { display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(40px,6vh,96px); }
.hh__title { font-family: var(--inter); font-weight: 700; font-size: clamp(40px,5.4vw,60px); line-height: 1.06; letter-spacing: -0.06em; color: #fff; max-width: 11ch; }
.hh__block { margin-top: clamp(28px,3.4vw,40px); max-width: 600px; }
.hh__lead { font-family: var(--inter); font-weight: 700; font-size: clamp(20px,1.9vw,24px); line-height: 1.35; letter-spacing: -0.016em; color: #fff; }
.hh__line2 { margin-top: 16px; font-size: clamp(16px,1.5vw,18px); line-height: 1.35; letter-spacing: -0.016em; color: rgba(255,255,255,0.9); }
.hh__rule { height: 1px; background: rgba(255,255,255,0.2); margin: 20px 0; max-width: 600px; }
.hh__line3 { font-size: clamp(16px,1.5vw,18px); line-height: 1.35; letter-spacing: -0.016em; color: rgba(255,255,255,0.9); white-space: pre-line; }
/* Reveal → Reshape → Reinforce strip in hero */
.hh__rrr { display: flex; align-items: center; gap: 10px; margin-top: clamp(22px,2.6vw,32px); flex-wrap: wrap; }
.hh__rrr-step { display: inline-flex; align-items: center; gap: 9px; font-family: var(--inter); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.92); padding: 8px 16px 8px 10px; border-radius: var(--pill); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); }
.hh__rrr-n { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0; color: rgba(255,255,255,0.7); flex: none; }
.hh__rrr-arrow { display: grid; place-items: center; color: rgba(255,255,255,0.32); flex: none; }
.hh__rrr-arrow svg { width: 16px; height: 16px; }

.hh__cta { margin-top: clamp(32px,4vw,44px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hh__apply { font-family: var(--inter); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.28); padding-bottom: 2px; transition: color .25s var(--ease), border-color .25s var(--ease); }
.hh__apply:hover { color: #fff; border-color: rgba(255,255,255,0.7); }

.hh__media { position: relative; align-self: stretch; min-height: clamp(420px,46vw,640px); }
.hh__watermark { position: absolute; right: -3%; top: 50%; transform: translateY(-50%); font-family: var(--inter); font-style: normal; font-weight: 800; font-size: clamp(200px,29vw,440px); line-height: 1; color: rgba(255,255,255,0.07); pointer-events: none; user-select: none; z-index: 0; letter-spacing: -0.06em; white-space: nowrap; }
.hh__photo { position: absolute; right: -2%; bottom: 0; width: clamp(360px,49vw,740px); height: clamp(460px,64vw,940px); max-height: 100%; overflow: hidden; z-index: 1; }
.hh__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.hh__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(86,75,65,0) 52%, #564B41 100%); }
.hh__chip { position: absolute; z-index: 2; border-radius: 16px; background: rgba(255,255,255,0.12); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.14); padding: 16px; width: clamp(210px,18vw,250px); }
.hh__chip p { font-size: 14px; font-weight: 500; line-height: 1.4; color: #fff; margin-top: 12px; }
.hh__chip--a { right: clamp(0px,1.4vw,28px); bottom: clamp(150px,21vh,250px); }
.hh__chip--b { right: clamp(160px,21vw,310px); bottom: clamp(36px,6vh,82px); }
.hh__avs { display: flex; }
.hh__av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); margin-left: -10px; background-size: cover; background-position: center; display: grid; place-items: center; }
.hh__av:first-child { margin-left: 0; }
.hh__av--1 { background: radial-gradient(120% 120% at 30% 25%, #C9BCA8, #6A5D52); }
.hh__av--2 { background: radial-gradient(120% 120% at 30% 25%, #A9BFA8, #2E5E3F); }
.hh__av--3 { background: radial-gradient(120% 120% at 30% 25%, #D8CFC2, #8A7F76); }
.hh__av--more { background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); color: #fff; font-family: var(--inter); font-weight: 700; font-size: 13px; line-height: 1; }
.hh__spark { width: 32px; height: 32px; border-radius: 16px; background: rgba(217,217,217,0.2); display: grid; place-items: center; }
.hh__spark svg { width: 18px; height: 18px; color: #fff; }

/* ============================================================
   Section frame
   ============================================================ */
.sec { padding: clamp(60px,7vw,80px) 0; }
.sec--lg { padding: clamp(72px,9vw,120px) 0; }
.sec-head { text-align: center; max-width: 1026px; margin: 0 auto; }
.sec-head .eyebrow { display: block; text-align: center; }
.sec-title { font-family: var(--inter); font-weight: 500; font-size: clamp(32px,3.6vw,48px); line-height: 1.2; letter-spacing: -0.06em; color: var(--ink); margin-top: 16px; }

/* ---- Trust strip ---- */
.trust { background: #fff; }
.trust__icon { width: 80px; height: 80px; margin: 0 auto clamp(28px,3.5vw,44px); display: grid; place-items: center; color: var(--green-dk); }
.trust__icon svg { width: 72px; height: 72px; }
.trust__head { font-family: var(--inter); font-weight: 500; font-size: clamp(30px,3.6vw,48px); line-height: 1.2; letter-spacing: -0.06em; text-align: center; color: var(--ink); max-width: 1026px; margin: 0 auto; }
.trust__stats { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: clamp(18px,2.6vw,44px); margin-top: clamp(44px,5vw,64px); }
.stat { text-align: center; max-width: 220px; }
.stat__v { font-family: var(--inter); font-weight: 700; font-size: clamp(40px,4.4vw,56px); letter-spacing: -0.06em; line-height: 1; color: var(--brown); }
.stat__l { margin-top: 20px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--muted2); line-height: 1.4; }

/* ---- Clear Choice (two branded doors) ---- */
.choice { background: var(--paper); }
.choice__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: clamp(40px,5vw,56px); align-items: stretch; max-width: 980px; margin-inline: auto; }
.choice__quiz { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(28px,3.2vw,40px) auto 0; padding: 19px 32px; border: 1.5px solid rgba(106,93,82,0.32); border-radius: var(--pill); background: #fff; box-shadow: 0 20px 44px -30px rgba(22,21,15,0.45); font-family: var(--inter); font-size: clamp(16px,1.4vw,18px); font-weight: 500; letter-spacing: -0.016em; color: var(--ink); width: fit-content; max-width: 100%; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.choice__quiz:hover { border-color: var(--brown); background: #fff; transform: translateY(-3px); box-shadow: 0 26px 54px -28px rgba(22,21,15,0.5); }
.choice__quiz strong { color: var(--brown); font-weight: 700; }
.choice__quiz-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #57C98A; box-shadow: 0 0 0 0 rgba(87,201,138,0.6); animation: ccqpulse 2.4s var(--ease) infinite; }
.choice__quiz-ar { flex: none; display: grid; place-items: center; color: var(--brown); transition: transform .25s var(--ease); }
.choice__quiz-ar svg { width: 18px; height: 18px; }
.choice__quiz:hover .choice__quiz-ar { transform: translateX(3px); }

/* ---- Quiz band (light card, distinct CTA — not a ghost link) ---- */
.quizband { display: flex; align-items: center; gap: clamp(14px,1.6vw,20px); max-width: 980px; margin: clamp(30px,3.6vw,46px) auto 0; padding: clamp(18px,2vw,24px) clamp(20px,2.4vw,30px); border-radius: var(--r); background: #fff; border: 1px solid var(--hair); box-shadow: 0 26px 54px -34px rgba(22,21,15,0.42); color: var(--ink); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.quizband:hover { transform: translateY(-4px); box-shadow: 0 40px 74px -38px rgba(22,21,15,0.4); }
.quizband__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2FA866; box-shadow: 0 0 0 0 rgba(47,168,102,0.55); animation: ccqpulse 2.4s var(--ease) infinite; }
.quizband__txt { font-family: var(--inter); font-size: clamp(16px,1.5vw,19px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.35; color: var(--brown); }
.quizband__txt strong { color: var(--ink); font-weight: 700; }
.quizband__btn { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px 12px 22px; border-radius: var(--pill); background: var(--green-dk); color: #fff; font-family: var(--rethink); font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 14px 28px -14px rgba(20,80,52,0.6); transition: background .2s var(--ease), transform .2s var(--ease); }
.quizband:hover .quizband__btn { transform: translateX(2px); }
.quizband__btn .ar { width: 24px; height: 24px; display: grid; place-items: center; }
.quizband__btn .ar svg { width: 20px; height: 20px; }
@media (max-width: 620px) { .quizband { flex-wrap: wrap; } .quizband__btn { margin-left: 0; } }
.cc { position: relative; min-height: clamp(430px,46vw,480px); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 42px 72px -56px rgba(22,21,15,0.6); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cc:hover { transform: translateY(-6px); box-shadow: 0 56px 86px -52px rgba(22,21,15,0.55); }
.cc--anx { background: radial-gradient(125% 120% at 82% 0%, #80715F 0%, var(--brown) 52%, #443A33 100%); }
.cc--avo { background: radial-gradient(125% 120% at 82% 0%, #0C3F23 0%, var(--green-dk) 52%, #00110A 100%); }
.cc--quiz { background: radial-gradient(125% 120% at 82% 0%, #3C3C3A 0%, #242423 52%, #111110 100%); }
.cc__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px 12px 24px; border-radius: var(--pill); font-family: var(--rethink); font-weight: 700; font-size: 16px; letter-spacing: -0.016em; transition: background .25s, transform .3s var(--ease); }
.cc__btn .ar { width: 24px; height: 24px; display: grid; place-items: center; }
.cc__btn .ar svg { width: 22px; height: 22px; }
.choice__sub { margin-top: 14px; font-family: var(--inter); font-size: clamp(16px,1.4vw,18px); line-height: 1.45; letter-spacing: -0.016em; color: var(--muted); }
.sec-head .choice__sub { text-align: center; max-width: 54ch; margin-inline: auto; }

/* shared inner content of a choice card */
.ccq { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 30px 30px 26px; gap: 20px; }
.ccq__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ccq__pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--inter); font-size: clamp(16px,1.7vw,20px); font-weight: 700; letter-spacing: -0.02em; color: var(--mint); padding: 9px 17px; border-radius: var(--pill); background: rgba(236,248,239,0.1); border: 1px solid rgba(236,248,239,0.18); }
.ccq__icon { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--mint); background: rgba(236,248,239,0.08); border: 1px solid rgba(236,248,239,0.18); }
.ccq__icon svg { width: 24px; height: 24px; }
.ccq__dot { width: 7px; height: 7px; border-radius: 50%; background: #57C98A; box-shadow: 0 0 0 0 rgba(87,201,138,0.6); animation: ccqpulse 2.4s var(--ease) infinite; }
@keyframes ccqpulse { 0% { box-shadow: 0 0 0 0 rgba(87,201,138,0.55); } 70% { box-shadow: 0 0 0 9px rgba(87,201,138,0); } 100% { box-shadow: 0 0 0 0 rgba(87,201,138,0); } }
.ccq__venn { position: relative; width: 56px; height: 34px; flex: none; }
.ccq__venn span { position: absolute; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(236,248,239,0.5); display: grid; place-items: center; font-family: var(--inter); font-weight: 600; font-size: 13px; color: var(--mint); }
.ccq__venn span:first-child { left: 0; background: rgba(255,255,255,0.12); }
.ccq__venn span:last-child { right: 0; background: rgba(255,255,255,0.06); }
.ccq__body { margin-top: auto; }
.ccq__t { font-family: var(--rethink); font-weight: 600; font-size: clamp(21px,1.7vw,25px); line-height: 1.08; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.ccq__d { margin-top: 12px; font-family: var(--inter); font-size: 15px; line-height: 1.5; letter-spacing: -0.016em; color: rgba(255,255,255,0.74); }
.ccq__foot { display: flex; flex-direction: column; gap: 18px; }
.ccq__steps { display: flex; gap: 6px; }
.ccq__steps i { flex: 1; height: 4px; border-radius: 3px; background: rgba(236,248,239,0.18); }
.ccq__steps i:first-child { background: var(--mint); }
.ccq__btn { align-self: flex-start; margin-top: 0; background: var(--mint); color: var(--green-dk); }
.cc:hover .ccq__btn { background: #fff; }
.cc--quiz:hover .ccq__steps i:nth-child(2) { background: rgba(236,248,239,0.5); transition: background .3s var(--ease); }

/* ---- Method (Shift) ---- */
.method { background: var(--taupe); position: relative; overflow: hidden; color: #fff; }
.method__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.method__intro { max-width: 760px; }
.method__badge { display: inline-flex; align-items: center; font-family: var(--inter); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #fff; padding: 8px 16px; border-radius: var(--pill); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); }
.method__act { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 340px; }
.method__note { font-family: var(--inter); font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: rgba(255,255,255,0.78); }
.method__title { font-family: var(--inter); font-weight: 500; font-size: clamp(32px,3.6vw,48px); line-height: 1.16; letter-spacing: -0.06em; color: #fff; margin-top: 16px; max-width: 18ch; }
.method__sub { margin-top: 18px; font-size: clamp(16px,1.4vw,18px); line-height: 1.45; letter-spacing: -0.016em; color: rgba(255,255,255,0.82); max-width: 52ch; }
.method__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: clamp(40px,4.5vw,56px); }
.mc { position: relative; overflow: hidden; background: #fff; border-radius: var(--r); padding: 36px 32px 34px; color: var(--ink); display: flex; flex-direction: column; min-height: clamp(300px,27vw,360px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.mc:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -50px rgba(22,21,15,0.5); }
.mc__bg { position: absolute; right: 20px; top: -14px; font-family: var(--inter); font-weight: 700; font-size: clamp(120px,11vw,164px); line-height: 1; letter-spacing: -0.06em; color: rgba(106,93,82,0.07); pointer-events: none; user-select: none; }
.mc__icon { width: 60px; height: 60px; border-radius: 16px; background: var(--cream); border: 1px solid var(--hair); display: grid; place-items: center; color: var(--brown); position: relative; z-index: 1; }
.mc__icon svg { width: 28px; height: 28px; }
.mc__step { margin-top: 24px; font-family: var(--inter); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); position: relative; z-index: 1; }
.mc__t { font-family: var(--inter); font-weight: 500; font-size: 26px; line-height: 1.18; letter-spacing: -0.06em; color: var(--ink); margin-top: 8px; position: relative; z-index: 1; }
.mc__d { margin-top: 14px; font-size: 16px; line-height: 1.55; letter-spacing: -0.02em; color: var(--muted); max-width: 36ch; position: relative; z-index: 1; }

/* ============================================================
   SECOND HALF (free-flow, same language)
   ============================================================ */
/* About */
.about { background: var(--paper); }
.about__grid { display: grid; grid-template-columns: 486px 1fr; gap: clamp(36px,5vw,84px); align-items: stretch; }
.about__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 486/526; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__copy { display: flex; flex-direction: column; justify-content: center; gap: 0; padding-block: 4px; }
.about__title { font-family: var(--inter); font-weight: 500; font-size: clamp(32px,3.6vw,46px); line-height: 1.16; letter-spacing: -0.06em; color: var(--ink); margin-top: 16px; max-width: 20ch; text-wrap: balance; }
.about__lead { margin-top: 24px; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; letter-spacing: -0.016em; color: var(--muted); max-width: 48ch; text-wrap: pretty; }
.about__sign { margin-top: 22px; font-size: 15px; letter-spacing: -0.01em; color: var(--muted2); }
.about__cta { margin-top: 34px; align-self: flex-start; }
.about__stats { display: flex; flex-wrap: wrap; gap: clamp(28px,3vw,48px); align-items: baseline; }
.about__stat .v { font-family: var(--inter); font-weight: 700; font-size: clamp(28px,2.8vw,32px); letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.about__stat .l { margin-top: 6px; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; }
.about__years { margin-top: 26px; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); }

/* Testimonials */
.testi { background: radial-gradient(125% 120% at 80% 0%, #80715F 0%, var(--brown) 52%, #443A33 100%); color: #fff; position: relative; overflow: hidden; }
.testi .eyebrow, .testi__eb { color: #fff; }
.tcar { position: relative; margin-top: clamp(40px,4.5vw,56px); }
.tcar__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px clamp(22px,8.3vw,120px); scrollbar-width: none; }
.tcar__track::-webkit-scrollbar { display: none; }
.tq { flex: 0 0 clamp(300px,80vw,628px); scroll-snap-align: center; background: #fff; border-radius: var(--r); padding: 32px; color: var(--ink); display: flex; flex-direction: column; gap: 40px; min-height: 292px; }
.tq__stars { display: flex; gap: 5px; color: #FE7E1B; }
.tq__stars svg { width: 24px; height: 24px; }
.tq__q { font-family: var(--inter); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.04em; color: var(--muted); flex: 1; }
.tq__who { display: flex; align-items: center; gap: 16px; }
.tq__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tq__mono { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--sand); color: var(--brown); font-family: var(--inter); font-weight: 700; font-size: 15px; letter-spacing: 0; }
.tq__who span { font-family: var(--inter); font-weight: 500; font-size: 18px; letter-spacing: -0.06em; color: var(--ink); }
.tcar__nav { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.tcar__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.9); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s, transform .25s; }
.tcar__btn svg { width: 18px; height: 18px; }
.tcar__btn:hover { transform: translateY(-2px); }
.tcar__btn--solid { background: #fff; color: var(--ink); border-color: #fff; }
.tcar__btn--solid:hover { background: rgba(255,255,255,0.85); }

/* Journal */
.journal { background: var(--paper); }
.journal__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px,4.5vw,56px); }
.journal__intro { max-width: 900px; }
.journal__title { text-align: left; margin-top: 16px; }
.journal__sub { margin-top: 12px; font-size: clamp(16px,1.4vw,18px); letter-spacing: -0.02em; color: var(--muted); }
.journal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.journal__col { display: flex; flex-direction: column; gap: 24px; }

/* Editorial journal cards (no photos) */
.bcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; padding: clamp(30px,3vw,40px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.bcard__num { position: absolute; right: -2px; top: -22px; font-family: var(--inter); font-weight: 700; font-size: clamp(120px,11vw,170px); line-height: 1; letter-spacing: -0.06em; pointer-events: none; user-select: none; z-index: 0; }
.bcard__top { position: relative; z-index: 1; display: flex; align-items: center; }
.bcard__cat { font-family: var(--inter); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--pill); }
.bcard__body { position: relative; z-index: 1; margin-top: clamp(28px,4vw,52px); flex: 1; }
.bcard__t { font-family: var(--inter); font-weight: 600; line-height: 1.12; letter-spacing: -0.04em; text-wrap: balance; }
.bcard__d { margin-top: 16px; font-size: 16px; line-height: 1.55; letter-spacing: -0.02em; }
.bcard__more { position: relative; z-index: 1; margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--inter); font-weight: 600; font-size: 15px; transition: gap .25s var(--ease); }
.bcard:hover .bcard__more { gap: 15px; }
.bcard__more svg { width: 16px; height: 16px; }

/* Featured — deep brown */
.bcard--feat { background: radial-gradient(135% 130% at 85% 0%, #80715F 0%, var(--brown) 50%, #443A33 100%); color: #fff; min-height: clamp(420px,42vw,520px); }
.bcard--feat:hover { transform: translateY(-6px); box-shadow: 0 48px 80px -54px rgba(22,21,15,0.55); }
.bcard--feat .bcard__num { color: rgba(255,255,255,0.07); }
.bcard--feat .bcard__cat { color: var(--mint); background: rgba(236,248,239,0.10); border: 1px solid rgba(236,248,239,0.18); }
.bcard--feat .bcard__t { font-size: clamp(28px,2.6vw,36px); color: #fff; }
.bcard--feat .bcard__d { color: rgba(255,255,255,0.82); max-width: 42ch; }
.bcard--feat .bcard__more { color: #fff; }

/* Secondary — warm paper */
.bcard--min { background: var(--cream); color: var(--ink); border: 1px solid var(--hair); flex: 1; }
.bcard--min:hover { transform: translateY(-5px); box-shadow: 0 38px 64px -50px rgba(22,21,15,0.42); }
.bcard--min .bcard__num { color: rgba(106,93,82,0.07); }
.bcard--min .bcard__cat { color: var(--brown); background: #fff; border: 1px solid var(--hair); }
.bcard--min .bcard__t { font-size: clamp(20px,1.7vw,24px); color: var(--ink); }
.bcard--min .bcard__d { color: var(--muted); max-width: 46ch; }
.bcard--min .bcard__more { color: var(--brown); }

/* Newsletter */
.news { background: var(--sand); }
.news-card { position: relative; border-radius: var(--r); overflow: hidden; background: linear-gradient(#fff 0%, #89796C 100%); display: grid; grid-template-columns: 1fr 1fr; align-items: end; min-height: 430px; padding-top: 60px; }
.news-card__circle { position: absolute; left: 18%; top: 36px; width: 235px; height: 391px; border-radius: 50%; background: rgba(255,255,255,0.5); pointer-events: none; }
.news-card__media { position: relative; z-index: 1; align-self: end; display: flex; align-items: flex-end; }
.news-card__media img { display: block; width: clamp(360px,40vw,520px); max-width: 100%; object-fit: contain; object-position: bottom; }
.news-card__body { position: relative; z-index: 2; padding: 60px 64px 60px 0; max-width: 520px; }
.news-card__title { font-family: var(--inter); font-weight: 500; font-size: clamp(28px,3vw,48px); line-height: 1.2; letter-spacing: -0.06em; color: var(--ink); }
.news-card__sub { margin-top: 16px; font-size: 16px; letter-spacing: -0.02em; color: var(--muted); }
.news-field { display: flex; align-items: center; gap: 8px; margin-top: 40px; padding: 4px 4px 4px 24px; border: 1px solid var(--ink); border-radius: var(--pill); background: rgba(255,255,255,0.4); max-width: 375px; }
.news-field input { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--inter); font-size: 16px; letter-spacing: -0.016em; color: var(--ink); }
.news-field input::placeholder { color: var(--muted); }
.news-field input:focus { outline: none; }
.news-field__btn { background: var(--ink); color: #fff; padding: 12px 12px 12px 24px; flex: none; }
.news-field__btn:hover { background: #000; }
.news-done { display: none; margin-top: 16px; font-weight: 700; color: var(--ink); }
.news-done.show { display: block; }

/* Extra button variants */
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

/* The cycle (diagram) */
.cycle { background: linear-gradient(var(--sand) 0%, #DBD3C5 100%); border-top: 1px solid var(--hair); }
.cycle__head { text-align: center; max-width: 760px; margin: 0 auto clamp(44px,5vw,64px); }
.cycle__eb { display: block; color: var(--brown); }
.cycle__title { font-family: var(--inter); font-weight: 500; font-size: clamp(30px,3.6vw,48px); line-height: 1.14; letter-spacing: -0.06em; color: var(--ink); max-width: 20ch; margin: 16px auto 0; text-wrap: balance; }
.cycle__lead { font-family: var(--inter); font-size: clamp(16px,1.4vw,18px); line-height: 1.55; letter-spacing: -0.016em; color: var(--muted); max-width: 58ch; margin: 18px auto 0; text-wrap: pretty; }

/* Pendulum */
.pend { display: flex; flex-direction: column; align-items: center; gap: clamp(10px,2.4vw,26px); }
.pend__svg { width: 100%; max-width: 720px; height: auto; display: block; overflow: visible; }
.pz { fill: none; stroke-width: 9; stroke-linecap: round; }
.pz--anx { stroke: var(--brown); }
.pz--sec { stroke: #57C98A; }
.pz--avo { stroke: var(--green-dk); }
.pt { stroke: #fff; stroke-width: 3; }
.pt--anx { fill: var(--brown); }
.pt--avo { fill: var(--green-dk); }
.pend__mount { fill: var(--taupe); }
.pend__pivot { fill: var(--ink); }
.pend__rod { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.pend__bob { fill: var(--ink); }
.pend__shine { fill: rgba(255,255,255,0.22); }
.pend__arm { transform-box: view-box; transform-origin: 360px 60px; animation: pendSwing 4.8s cubic-bezier(.5,.04,.5,.96) infinite; }
@keyframes pendSwing { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(36deg); } }
@media (prefers-reduced-motion: reduce) { .pend__arm { animation: none; } }

.pend__note { font-family: var(--inter); font-style: italic; font-size: clamp(15px,1.35vw,18px); line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); text-align: center; max-width: 42ch; margin: 0 auto; }
.pend__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px,3vw,44px); }
.pl { display: flex; align-items: flex-start; gap: 12px; max-width: 240px; }
.pl__dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.pl--anx .pl__dot { background: var(--brown); }
.pl--sec .pl__dot { background: #57C98A; }
.pl--avo .pl__dot { background: var(--green-dk); }
.pl__t { font-family: var(--inter); font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.pl__goal { font-family: var(--inter); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #1B6B43; background: rgba(87,201,138,0.2); padding: 3px 8px; border-radius: var(--pill); }
.pl__d { margin-top: 3px; font-size: 14px; line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }

/* Takeaway statement panel */
.cycle__loop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin: clamp(48px,5.5vw,76px) auto 0; max-width: 760px; padding: clamp(40px,5vw,60px) clamp(28px,4vw,56px); background: radial-gradient(125% 130% at 80% 0%, #80715F 0%, var(--brown) 52%, #443A33 100%); border-radius: var(--r); color: #fff; box-shadow: 0 48px 80px -56px rgba(22,21,15,0.55); }
.cycle__loop-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; display: grid; place-items: center; }
.cycle__loop-icon svg { width: 24px; height: 24px; }
.cycle__loop-lead { font-family: var(--inter); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.66); }
.cycle__loop-stmt { font-family: var(--inter); font-weight: 500; font-size: clamp(24px,2.7vw,34px); line-height: 1.18; letter-spacing: -0.04em; color: #fff; max-width: 20ch; text-wrap: balance; }
.cycle__loop-cta { margin-top: 12px; }

/* Footer */
.footer { background: var(--ink); color: rgba(255,255,255,0.66); padding: clamp(56px,6vw,80px) var(--pad) 0; overflow: hidden; }
.footer__in { max-width: var(--maxw); margin: 0 auto; }
.footer__brandblock { display: flex; flex-direction: column; align-items: center; gap: 27px; text-align: center; }
.footer__name { font-family: var(--inter); font-weight: 700; font-size: 28px; letter-spacing: -0.06em; color: #fff; }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--taupe); display: grid; place-items: center; color: rgba(255,255,255,0.85); transition: background .25s, color .25s; }
.footer__social a:hover { background: var(--taupe); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.footer__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; margin-top: 48px; }
.footer__nav a { font-size: 16px; color: var(--cream); transition: opacity .2s; }
.footer__nav a:hover { opacity: 0.65; }
.footer__rule { height: 1px; background: rgba(249,249,248,0.25); margin-top: 40px; }
.footer__bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.footer__legal { display: flex; gap: 40px; }
.footer__legal span, .footer__legal a { font-size: 16px; letter-spacing: -0.02em; color: var(--cream); }
.footer__legal a:hover { opacity: 0.65; }
.footer__watermark { font-family: var(--inter); font-weight: 700; font-size: clamp(48px,11vw,160px); line-height: 1.1; letter-spacing: -0.06em; text-align: center; color: rgba(255,255,255,0.12); margin-top: clamp(30px,4vw,60px); white-space: nowrap; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px) {
  .hh { grid-template-columns: 1fr; }
  .hh__media { min-height: 420px; order: -1; margin-top: 12px; }
  .hh__photo { position: relative; width: 100%; height: 380px; border-radius: var(--r); }
  .hh__watermark { display: none; }
  .hh__chip--a { right: 12px; bottom: 120px; }
  .hh__chip--b { right: auto; left: 12px; bottom: 18px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; aspect-ratio: 16/12; }
  .about__copy { gap: 32px; }
  .news-card { grid-template-columns: 1fr; align-items: stretch; }
  .news-card__media { order: 2; justify-content: center; }
  .news-card__body { padding: 40px clamp(24px,5vw,48px); max-width: none; }
  .news-card__circle { display: none; }
}
@media (max-width: 860px) {
  .choice__grid { grid-template-columns: 1fr; }
  .method__grid { grid-template-columns: 1fr; }
  .mc { min-height: 0; }
  .journal__grid { grid-template-columns: 1fr; }
  .cycle__head { flex-direction: column; align-items: flex-start; }
  .trust__stats { grid-template-columns: repeat(2, 1fr); gap: clamp(28px,6vw,40px); }
}
@media (max-width: 560px) {
  .choice__grid { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .nav__links { display: none; }
  .nav__cta:not(.nav__burger) { display: none; }
  .nav__burger { display: inline-flex; }
  .watch__head, .cycle__head { align-items: flex-start; }
  .footer__bot { justify-content: center; }
  .bcard--feat { min-height: 0; }
  .bcard--feat .bcard__body { margin-top: 32px; }
}