/* ==========================================================================
   Home — page module for index.html
   Section styles unique to the homepage. Loaded after tokens/base/chrome.
   ========================================================================== */

/* Editorial grid with named lines for one-sided + full bleeds */
.ed {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--edge), 1fr)
    [main-start] minmax(0, var(--content)) [main-end]
    minmax(var(--edge), 1fr) [full-end];
}
.ed > * { grid-column: main-start / main-end; }
.ed > .u-full   { grid-column: full-start / full-end; }
.ed > .u-bleed-r { grid-column: main-start / full-end; }
.ed > .u-bleed-l { grid-column: full-start / main-end; }

.thread-accent { color: var(--thread); }

.cap {
  font-family: 'Fraunces', serif; font-style: italic; font-size: 14px;
  color: var(--ink-faint); margin-top: 14px; max-width: 46ch;
}
.cap.on-dark { color: #a8a399; }

/* The homepage nav spans the full width to line up with the full-bleed hero */
.site-nav .wrap { max-width: none; }

/* ---------- Hero (asymmetric split, media bleeds right) ---------- */
.hero {
  display: grid;
  grid-template-columns: var(--edge) minmax(0, 1.12fr) clamp(28px, 4vw, 72px) minmax(0, 0.88fr);
  align-items: center;
  min-height: min(90vh, 940px);
  padding-top: 24px;
}
.hero-copy { grid-column: 2; padding-block: 60px; }
.hero-media { grid-column: 4; align-self: stretch; }
.hero h1 {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(42px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -0.025em;
  max-width: 15ch; margin-bottom: 30px;
}
.hero h1 em { color: var(--thread); font-weight: 400; }
.hero-sub { font-size: 20px; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.hero-media .ph { height: 100%; min-height: 460px; border-radius: 10px 0 0 10px; }

/* ---------- Journey + stitched timeline ---------- */
.journey { padding: 120px 0 140px; border-top: 1px solid var(--line); }
.journey-lede { max-width: 900px; margin-bottom: 64px; }
.journey-lede h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -0.02em; }
.journey-lede h2 em { font-style: italic; color: var(--thread); }
.journey-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(40px, 6vw, 100px); align-items: start; }

.beats { position: relative; --knot-y: 46px; --pad: 52px; --thread-x: 16px; }
.beats { padding-left: var(--pad); }
.beats::before { content: ''; position: absolute; left: var(--thread-x); top: 26px; bottom: 26px; width: 2px; background: var(--line); transform: translateX(-50%); }
.beat { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 40px; padding: 34px 0; border-top: 1px solid var(--line); align-items: baseline; }
.beat:last-of-type { border-bottom: 1px solid var(--line); }
.beat .when { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding-top: 6px; }
.beat .where { display: block; color: var(--thread); font-size: 12px; margin-top: 5px; letter-spacing: 0.08em; }
.beat p { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.4; letter-spacing: -0.005em; color: var(--ink); }
.beat p em { font-style: italic; }
/* knot — aligned onto the thread guide, sitting in the left padding */
.beat::before {
  content: ''; position: absolute; left: calc(var(--thread-x) - var(--pad)); top: var(--knot-y);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line);
  transform: translate(-50%, -50%) scale(.55); opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.5,.5,1), opacity .4s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease;
  z-index: 2;
}
.beat.in::before { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--thread); border-color: var(--thread); box-shadow: 0 0 0 5px rgba(184,65,14,0.12); }
/* drawn running-stitch segment to next knot */
.beat::after {
  content: ''; position: absolute; left: calc(var(--thread-x) - var(--pad)); top: var(--knot-y); bottom: calc(-1 * var(--knot-y));
  border-left: 2px dashed var(--thread); transform: translateX(-50%);
  clip-path: inset(0 0 100% 0); transition: clip-path .6s ease .08s; z-index: 1;
}
.beat.in::after { clip-path: inset(0 0 0 0); }
.beat:last-of-type::after { display: none; }

.journey-aside { position: sticky; top: 96px; }
.journey-aside .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: 8px; }
.turn { margin-top: 64px; max-width: 820px; }
.turn p { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(23px, 2.8vw, 34px); line-height: 1.3; color: var(--ink); }
.turn p em { color: var(--thread); }

/* ---------- Tension (full-bleed dark) ---------- */
.tension { background: var(--ink); color: var(--paper); padding: 140px 0; }
.tension-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.tension .label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a857c; margin-bottom: 22px; }
.tension h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em; }
.tension p { font-size: 18px; line-height: 1.68; color: #c9c4ba; margin-bottom: 20px; }
.tension p:last-child { margin-bottom: 0; }
.tension .pullquote { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 23px; line-height: 1.5; color: var(--paper); padding-left: 26px; border-left: 2px solid var(--thread); margin: 34px 0; }

/* ---------- Full-bleed atmosphere band ---------- */
.band { position: relative; }
.band .ph { width: 100%; aspect-ratio: 21 / 8; min-height: 320px; }
.band .band-cap {
  position: absolute; left: var(--edge); bottom: 32px; z-index: 3;
  font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(18px, 2vw, 26px);
  color: var(--paper); max-width: 32ch; text-shadow: 0 1px 30px rgba(0,0,0,0.5);
}
.band .scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(17,17,16,0.5), rgba(17,17,16,0.05) 55%); pointer-events: none; }

/* ---------- Resolution / surfaces ---------- */
.resolution { padding: 140px 0; }
.section-head { max-width: 780px; margin-bottom: 72px; }
.section-head .label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px; }
.section-head h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 22px; }
.section-head h2 em { font-style: italic; color: var(--thread); }
.section-head p { font-size: 19px; color: var(--ink-soft); max-width: 58ch; }

.surfaces { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.surface { background: var(--paper-warm); border-radius: 6px; padding: 52px 44px; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.22,.61,.24,1), box-shadow .35s ease; }
.surface:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -34px rgba(17,17,16,0.32); }
.surface .kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--thread); margin-bottom: 20px; }
.surface h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 16px; }
.surface > p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin-bottom: 28px; }
.surface ul { list-style: none; margin-bottom: 28px; }
.surface ul li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); display: flex; align-items: baseline; gap: 12px; }
.surface ul li::before { content: ''; width: 14px; height: 1px; background: var(--thread); flex-shrink: 0; position: relative; top: 8px; }
.surface .surface-visual { margin-top: auto; padding-top: 20px; }

.recs-rail { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.recs-rail .rail-head { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.recs-rail .rail-head .for { color: var(--ink); font-family: 'Fraunces', serif; text-transform: none; letter-spacing: 0; font-size: 13px; font-style: italic; }
.recs-rail .rail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rec-card { background: var(--paper-warm); border-radius: 4px; padding: 12px; aspect-ratio: 1 / 1.15; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s ease; }
.rec-card:hover { transform: translateY(-3px); }
.rec-card .rc-img { flex-grow: 1; background: linear-gradient(135deg, #d8d2c5 0%, #ebe6dc 100%); border-radius: 2px; margin-bottom: 8px; }
.rec-card .rc-name { font-family: 'Fraunces', serif; font-size: 12px; line-height: 1.25; color: var(--ink); }
.rec-card .rc-meta { font-size: 10px; color: var(--ink-faint); margin-top: 2px; letter-spacing: 0.04em; }

.quote-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.quote-card .qc-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.quote-card .qc-who { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; }
.quote-card .qc-who span { display: block; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--ink-faint); font-weight: 400; margin-top: 2px; }
.quote-card .qc-status { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--thread); display: flex; align-items: center; gap: 6px; }
.quote-card .qc-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--thread); }
.quote-card .qc-lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; margin-top: 12px; }
.quote-card .qc-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.quote-card .qc-line .qc-name { font-family: 'Fraunces', serif; }
.quote-card .qc-line .qc-price { color: var(--ink-soft); }
.quote-card .qc-total { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; display: flex; justify-content: space-between; font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; }

.underneath { margin-top: 40px; padding: 48px clamp(32px, 5vw, 64px); background: var(--ink); color: var(--paper); border-radius: 6px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.underneath .u-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a857c; margin-bottom: 8px; }
.underneath h4 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; }
.underneath h4 em { color: var(--thread); font-style: italic; }
.underneath p { color: #c9c4ba; font-size: 15px; line-height: 1.65; }

/* ---------- Features ---------- */
.features { padding: 140px 0; background: var(--paper-warm); }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 64px; }
.feat-item h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(23px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px; }
.feat-item p { color: var(--ink-soft); font-size: 16px; line-height: 1.62; }
.feat-item .stitch { width: 34px; height: 2px; background: var(--thread); margin-bottom: 22px; transition: width .35s ease; border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, var(--thread) 0 6px, transparent 6px 10px); background-color: transparent; }
.feat-item:hover .stitch { width: 58px; }

/* ---------- Objections (list + sticky companion image) ---------- */
.objection { padding: 140px 0; }
.obj-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
.obj-card { border-top: 1px solid var(--line); padding: 36px 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; transition: background .3s ease; }
.obj-card:last-child { border-bottom: 1px solid var(--line); }
.obj-q { font-family: 'Fraunces', serif; font-style: italic; font-size: 21px; font-weight: 300; line-height: 1.35; transition: color .3s ease; }
.obj-card:hover .obj-q { color: var(--thread); }
.obj-a { color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.obj-aside { position: sticky; top: 96px; }
.obj-aside .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: 8px; }

/* ---------- Pattern (elevated card on full-bleed band) ---------- */
.pattern { position: relative; overflow: hidden; padding: 150px 0; display: grid; }
.pattern-band { position: absolute; inset: 0; z-index: 0; background: var(--img, var(--ink)) center / cover no-repeat, var(--ink); }
.pattern-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(17,17,16,0.2), rgba(17,17,16,0.6)); }
.pattern .card { position: relative; z-index: 1; background: #fff; border-radius: 12px; padding: clamp(44px, 6vw, 84px); box-shadow: 0 50px 100px -40px rgba(17,17,16,0.6); max-width: 940px; margin-inline: auto; }
.pattern .card .label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 26px; }
.pattern .card p { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.26; letter-spacing: -0.015em; color: var(--ink); }
.pattern .card p em { font-style: italic; color: var(--thread); }
.pattern .card .sig { margin-top: 30px; font-size: 15px; color: var(--ink-faint); letter-spacing: 0.02em; }

/* ---------- Closing ---------- */
.closing { position: relative; overflow: hidden; padding: 150px 0; background: var(--ink); color: var(--paper); }
.closing-band { position: absolute; inset: 0; z-index: 0; background: var(--img, transparent) center / cover no-repeat; opacity: 0.26; }
.closing .wrap { position: relative; z-index: 1; max-width: 940px; }
.closing h2 { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(40px, 5.5vw, 76px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 30px; }
.closing p { font-size: 19px; color: #c9c4ba; margin-bottom: 38px; max-width: 60ch; }
.closing .btn { background: var(--paper); color: var(--ink); padding: 16px 28px; font-size: 16px; }
.closing .btn:hover { background: var(--thread); color: var(--paper); }
.closing .small { margin-top: 24px; font-size: 14px; color: #8a857c; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: var(--edge) 1fr var(--edge); min-height: 0; padding-top: 8px; }
  .hero-copy { grid-column: 2; padding-block: 52px 36px; }
  .hero-media { grid-column: 1 / -1; }
  .hero-media .ph { border-radius: 0; min-height: 0; aspect-ratio: 3 / 2; height: auto; }
  .journey-layout { grid-template-columns: 1fr; gap: 56px; }
  .journey-aside { position: static; order: -1; }
  .journey-aside .ph { aspect-ratio: 16 / 10; }
  .tension-grid { grid-template-columns: 1fr; gap: 36px; }
  .surfaces { grid-template-columns: 1fr; gap: 24px; }
  .obj-layout { grid-template-columns: 1fr; gap: 48px; }
  .obj-aside { position: static; order: -1; }
  .obj-aside .ph { aspect-ratio: 16 / 10; }
  .feat-grid { grid-template-columns: 1fr; gap: 48px; }
  .underneath { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .beats { --knot-y: 36px; --pad: 34px; --thread-x: 10px; }
  .beat { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .obj-card { grid-template-columns: 1fr; gap: 14px; }
  .band .ph { aspect-ratio: 4 / 3; }
  .journey, .tension, .resolution, .features, .objection, .pattern, .closing { padding-block: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .beat::before { opacity: 1; transform: translate(-50%, -50%) scale(1); background: var(--thread); border-color: var(--thread); }
  .beat::after { clip-path: inset(0 0 0 0); }
}