/* =====================================================================
   HDI site build 2026-09-24 (Rosemary, LOCAL REVIEW ONLY)
   Layer on top of tokens.css + web.css + home.css (copied unchanged from the
   D1 "two worlds" mock). Only page structure for the new copy lives here.
   ===================================================================== */

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ---------- header: nav of record + the contact button ---------- */
.nav .btn-nav{ margin-left:.6rem; min-height:44px; padding:0 1.1rem; font-size:1rem; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper) }
.nav .btn-nav:hover{ background:var(--harbour-dk); border-color:var(--harbour-dk); color:var(--paper-3) }
.menu .panel .btn-nav{ margin-top:.25rem; font-weight:600 }
.wordmark{ min-height:44px; display:inline-flex; align-items:center }

/* ---------- placeholders (never mistaken for final copy) ---------- */
.ph-box{ display:grid; place-items:center; min-height:5.5rem; padding:1.25rem; margin:1.5rem 0; border:2px dashed var(--rule-ui);
         border-radius:var(--radius); font:italic 600 var(--fs-small)/1.3 var(--font-body); color:var(--text-secondary); text-align:center }
.ph-box.small{ min-height:0; max-width:34rem; justify-items:start; text-align:left }
.ph-box.figure{ min-height:clamp(12rem, 28vw, 20rem); background:repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--rule) 45%, transparent) 14px 15px) }
.ph-inline{ font-style:italic; font-weight:700; border-bottom:2px dashed var(--rule-ui); padding:0 .1em; color:var(--text-primary) }

/* ---------- hero (page copy is longer than the mock's two-word lines) ---------- */
.hero h1, .hero .twin-hero{ font-family:var(--font-display); font-size:clamp(2.35rem, 1.25rem + 3.9vw, 4.6rem); line-height:1.06; font-weight:340;
  letter-spacing:-.025em; margin:0 0 1.5rem; color:var(--role-heading); text-wrap:balance }
.hero .twin-hero{ font-style:italic; font-weight:320 }
[data-world="other"] .hero.has-twin h1{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }  /* W-38: the daylight h1 stays in the tree */
.hero .kind{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-lead); line-height:1.45; color:var(--text-secondary); margin:0 0 1.25rem; max-width:34em }
.hero .lede{ font-size:var(--fs-body); max-width:36em }
.hero .fine{ display:block; margin-top:1.25rem; font-size:var(--fs-small); color:var(--text-secondary); max-width:36em }
.hero .ctas{ align-items:center }
.hero .ctas a:not(.btn){ font-weight:600; min-height:44px; display:inline-flex; align-items:center; padding:0 .25rem }
.hero.plain{ padding-bottom:clamp(2.5rem,6vw,5rem) }
.hero.plain .wrap{ grid-template-columns:1fr }
.hero.plain .hero-copy{ max-width:52rem }

/* the other-side kicker: the frame for every twin heading (W-37) */
.kicker{ margin:0 0 .25rem }
.read .kicker + h2{ margin-top:.35rem }

/* ---------- reading sections ---------- */
.read .wrap > .col-l{ min-width:0 }
.read .wrap > .col-r{ min-width:0 }
.read p{ max-width:var(--measure) }
.read .lead-p{ font-family:var(--font-display); font-size:var(--fs-lead); line-height:1.5; max-width:32em }
.read h2{ font-size:var(--fs-h2) }
.read h3{ font-size:var(--fs-h3); font-weight:500; margin:0 0 .4rem }

.deliver{ list-style:none; margin:1.75rem 0; padding:0; display:grid; gap:0; max-width:46rem; border-top:1px solid var(--rule) }
.deliver li{ padding:1rem 0 1rem 1.75rem; border-bottom:1px solid var(--rule); position:relative }
.deliver li::before{ content:""; position:absolute; left:.2rem; top:1.55rem; width:.6rem; height:.6rem; border:1.5px solid var(--ink); transform:rotate(45deg) }
.deliver strong{ font-weight:700 }

.sep{ margin-top:1.75rem }
.fig-caption{ margin-top:-.5rem }

/* six steps: reuse the mock's pencil / cable thread */
.steps ol{ gap:2.1rem }
.steps p{ margin:0 }

/* refused */
.refused{ list-style:none; margin:1.75rem 0; padding:0; display:grid; gap:1.25rem; max-width:46rem }
.refused li{ padding:0 0 1.25rem; border-bottom:1px solid var(--rule) }
.refused s{ display:block; font-family:var(--font-display); font-size:var(--fs-lead); text-decoration-thickness:2px; text-decoration-color:var(--ochre); margin-bottom:.35rem; color:var(--text-primary) }
.closing{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-lead); border-left:2px solid var(--ochre); padding:.25rem 0 .25rem 1.25rem; max-width:32em }

/* doors */
.doors{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1rem; max-width:46rem }
.doors li{ padding:1.1rem 1.25rem; border:1px solid var(--border-default); background:var(--surface-elevated); border-radius:var(--radius) }
.doors a{ font-weight:700; font-size:1.125rem }

/* ---------- spreads: real pages, pixels unaltered ---------- */
.spreads{ display:grid; gap:clamp(2rem,5vw,3.5rem); margin:2rem 0 1.5rem }
.spread{ margin:0 }
.spread .pages{ display:flex; gap:clamp(.75rem,2vw,1.5rem); align-items:flex-start }
.spread picture, .spread img{ display:block }
.spread .a4{ flex:0 1 26rem; min-width:0 }
.spread .phone{ flex:0 1 11rem; min-width:0; margin-top:clamp(1rem,4vw,3rem) }
.spread img{ width:100%; height:auto; border:1px solid var(--rule); box-shadow:0 22px 40px -30px rgba(0,34,49,.55); background:#fff }
.spread .phone img{ border-radius:10px }
.spread figcaption:empty{ display:none }
[data-world="other"] .spread img{ border-color:var(--border-default); box-shadow:0 0 0 6px var(--surface-elevated), 0 22px 40px -20px rgba(0,0,0,.9) }
[data-world="other"] .spread .phone img{ box-shadow:0 0 0 6px #000E14, 0 0 0 7px var(--border-default), 0 0 40px 2px rgba(125,211,227,.16) }
.pages-row{ display:flex; flex-wrap:wrap; gap:clamp(.75rem,2vw,1.5rem); align-items:flex-start; margin:1.75rem 0 }
.pages-row .a4{ flex:0 1 24rem; min-width:0 }
.pages-row .phone{ flex:0 1 10.5rem; min-width:0 }
.pages-row img{ width:100%; height:auto; border:1px solid var(--rule); box-shadow:0 22px 40px -30px rgba(0,34,49,.55); background:#fff }
.pages-row .phone img{ border-radius:10px }
.pages-row figure{ margin:0 }
[data-world="other"] .pages-row img{ border-color:var(--border-default); box-shadow:0 0 0 6px var(--surface-elevated) }

/* ---------- contact form (identical in both worlds; only its heading flips) ---------- */
.contact .form{ display:grid; gap:1.25rem; max-width:40rem; margin-top:2rem }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }
.field{ display:grid; gap:.4rem; min-width:0 }
.field label, .field legend{ font-weight:700; font-size:var(--fs-small); color:var(--text-primary) }
.req{ color:var(--text-primary); font-weight:700 }
.field input[type=text], .field input[type=email], .field textarea{ width:100%; min-height:48px; padding:.7rem .85rem; font:400 var(--fs-body)/1.4 var(--font-body);
  color:var(--text-primary); background:var(--surface-elevated); border:1.5px solid var(--border-default); border-radius:var(--radius) }
.field textarea{ min-height:9rem; resize:vertical }
.field input:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--focus-ring-color); outline-offset:2px }
.field [aria-invalid="true"]{ border-color:var(--text-primary); border-width:2px }
fieldset.field{ border:0; padding:0; margin:0 }
.choices{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem }
.choices label{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; font-weight:400; cursor:pointer }
.choices input{ width:1.25rem; height:1.25rem; accent-color:var(--ink); margin:0 }
.err{ margin:0; font-size:var(--fs-small); font-weight:700; color:var(--text-primary); border-left:3px solid var(--ochre); padding-left:.6rem }
.req-note{ font-size:var(--fs-small); color:var(--text-secondary); margin:0 }
.form .send{ justify-self:start }
.status{ margin:0; font-weight:700; font-size:var(--fs-body); border:2px solid var(--ink); padding:.75rem 1rem; justify-self:start }
.contact small{ display:block; font-size:var(--fs-small); color:var(--text-secondary) }
[data-world="other"] .contact{ background:var(--void) }
[data-world="other"] .contact .field input[type=text], [data-world="other"] .contact .field input[type=email], [data-world="other"] .contact .field textarea{ background:#00161F }
[data-world="other"] .choices input{ accent-color:#F3EEE4 }
/* the only light point on the other side: Send is also the way back to daylight */
[data-world="other"] .contact .send{ background:#FAF7F0; color:#002231; border-color:#FFFDF8;
  box-shadow:0 0 0 1px rgba(255,236,196,.7), 0 0 38px 8px rgba(255,226,170,.30), 0 0 120px 36px rgba(255,226,170,.10) }

/* ---------- FAQ (for-you) ---------- */
.faq{ display:grid; gap:1.75rem; margin-top:1.5rem; max-width:46rem }
.faq > div{ border-top:1px solid var(--rule); padding-top:1.25rem }
.faq p{ margin:0 }

/* price line */
.price{ font-family:var(--font-display); font-size:var(--fs-lead); margin:1.5rem 0 1rem }

/* ---------- footer, as home.md "foot" ---------- */
.foot .wrap{ display:block }
.foot .foot-name{ font-family:var(--font-display); font-size:1.5rem; font-weight:400; color:var(--ink); margin:0 0 .75rem }
.foot p{ margin:0 0 .35rem; color:var(--text-secondary) }
.foot .legal{ margin-top:1.25rem }

/* ---------- the switch: visible label on touch (W-33) ---------- */
@media (hover:none){
  .switch .tip{ opacity:1; font-size:1rem; min-height:44px; display:inline-flex; align-items:center; border-radius:99px; padding:0 .9rem;
    box-shadow:0 8px 20px -10px rgba(0,34,49,.5) }
  [data-world="other"] .switch .tip{ background:#F3EEE4; color:#002231 }
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .form .row2{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  .spread .phone{ flex-basis:36%; margin-top:1rem }
  .spread .a4{ flex-basis:64% }
  .pages-row .a4{ flex-basis:100% }
  .pages-row .phone{ flex:0 1 calc(50% - .5rem) }
}
@media (max-width: 1100px) and (min-width: 901px){ .nav a{ padding:.6rem .5rem } }
.look-ctas{ display:flex; flex-wrap:wrap; gap:.9rem 1.25rem; align-items:center; margin-top:2rem }
.look-ctas a:not(.btn){ font-weight:600; min-height:44px; display:inline-flex; align-items:center }
.fine-s{ font-size:var(--fs-small); color:var(--text-secondary) }
.hero .kicker{ margin-bottom:.75rem }
/* spreads: cover | result side by side, the plan page with the phone edition beside it below */
@media (min-width: 700px){
  .spreads{ grid-template-columns:1fr 1fr; align-items:start }
  .spreads .spread:nth-child(3){ grid-column:1 / -1 }
  .spreads .spread:nth-child(3) .a4{ flex-basis:calc(50% - 1rem) }
}
.zoom{ display:block; cursor:zoom-in }
.zoom:focus-visible{ outline:3px solid var(--focus-ring-color); outline-offset:4px }

/* B5-2: the former h1, now the line under it (GATE-20260924-055) */
.hero-sub{font-family:var(--font-display,serif);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.25;margin:.6em 0 .8em;color:inherit;max-width:26ch}

/* B7-1: the lead line of the hero lede */
.lede-lead{font-weight:600;margin-bottom:.4em}

/* B8: billboard fix */
.hero-kind{margin:0 0 .8em}
.lede.offer{font-weight:600;font-size:1.15em;margin-bottom:.5em}
.lede-lead{font-weight:400}