/* =============================================================
   Homepage hero — final composition (client pick, Stage 02 V2):
   A3 text on the right · B2 text-only motion + one fixed button ·
   D2 bare chevron arrows. Replaces the demo options bar rules.
   Loaded on index.html only; layout/arrow JS lives in hero.js.
   ============================================================= */

/* Track is a grid stack: every slide shares one cell, in flow, so
   the track is as tall as the longest headline and the CTA below
   it never collides with a wrapped line. */
[data-layout="centred"] .hero-car__col{
  flex:1;min-width:0;display:flex;flex-direction:column;
  gap:28px;align-items:flex-end;
}
[data-layout="centred"] .hero-car__track{
  flex:none;width:100%;display:grid;min-height:220px;
  grid-template-columns:minmax(0,1fr);
  align-items:end;justify-items:end;
}
[data-layout="centred"] .hero-slide{
  grid-area:1/1;position:relative;inset:auto;width:100%;min-width:0;
  align-items:flex-end;text-align:right;
}
.hero-slide h1{max-width:min(20ch,100%)}
/* slides hold only the headline now (buttons are static), so they
   never need to catch the pointer */
[data-layout="centred"] .hero-slide,[data-layout="centred"] .hero-slide.is-on{pointer-events:none}

/* B2: only the headline moves — per-slide buttons are hidden and
   one static "Get a free quote" button sits under the track. */
.hero-slide .btn-ghost{display:none}
.hero-cta-static{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}

/* Text block sits low in the hero, Laguna-style. */
@media(min-width:641px){
  [data-layout="centred"] .hero-car{padding-bottom:clamp(56px,10vh,120px)}
  [data-layout="centred"] .hero-car__nav{
    transition:top .3s var(--ease,ease),left .3s var(--ease,ease),right .3s var(--ease,ease),background-color .25s,color .25s;
  }
}
@media(prefers-reduced-motion:reduce){
  [data-layout="centred"] .hero-car__nav{transition:none}
}

/* D2: bare chevrons — no circle, generous invisible tap padding. */
/* z-index: the arrows must sit ABOVE the headline track — each
   slide is a full-width block, and it was covering the previous
   arrow, swallowing its clicks and hover. */
html[data-theme] .hero-car__nav{
  position:relative;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;
  border:0;background:none;border-radius:0;font-size:1.05rem;
}
/* same hover as every other slide arrow and the ghost button: a full
   SQUARE light box behind a dark chevron, on hover only */
html[data-theme] .hero-car__nav:hover{background:#F2F2EC;color:#17190F}
.hero-car__nav:focus-visible{outline:2px solid #C2E807;outline-offset:3px}

/* Scroll cue sits opposite the text block (left). */
[data-layout="centred"] .hero-scroll{left:38px;right:auto}
@media(min-width:993px) and (max-width:1270px){
  [data-layout="centred"] .hero-scroll{left:112px}
}

/* Scroll cue (client Stage 02 V2, item 6): larger label, and the
   symbol is a long line with a separate down arrowhead below it —
   the original cue's line + chevron, longer and bigger, with the
   chevron moved to the bottom end as the client drew it. */
[data-layout="centred"] .hero-scroll{
  display:flex;flex-direction:column;align-items:center;
  font-size:.82rem;letter-spacing:.2em;
}
/* markup order is label, arrow, then the ::after line — reorder so
   the arrowhead sits below the line */
[data-layout="centred"] .hero-scroll span{order:1}
[data-layout="centred"] .hero-scroll::after{
  order:2;width:1px;height:96px;margin:14px 0 0;
  background:rgba(242,242,236,.7);
}
[data-layout="centred"] .hero-scroll__arrow{
  order:3;margin-top:8px;font-size:.85rem;color:rgba(242,242,236,.9);
}
@media(prefers-reduced-motion:reduce){
  [data-layout="centred"] .hero-scroll::after,
  [data-layout="centred"] .hero-scroll__arrow{animation:none}
}