/* page-home.css — homepage-specific rules (tokens.css v1.9)
   2026-10-09: .shot lifts on hover only when the frame is a link
   (Master Brand Guide v1.6); the homepage frames aren't links, so they
   stop lifting.
   Values reference var(--token) wherever a token exists.
   ONE FILE: the Drive design-handoff copy, the local design-handoff copy and
   the theme copy (generatepress-child/assets/css/page-home.css) are
   byte-identical. Reconciled 2026-10-08 from the live theme, which had grown
   past the handoff (landmarks timeline, larger small text, GenerateBlocks
   stat fixes, .final band); the handoff's one pending rule,
   .accessibility-feature, was kept. Edit any copy, then copy it to the other
   two. */

/* ---- hero ---- */
.hero{padding:96px 0 84px;background:
  radial-gradient(900px 420px at 85% -10%, rgba(125,40,24,.45) 0%, transparent 60%),
  radial-gradient(700px 380px at -10% 110%, rgba(145,61,20,.28) 0%, transparent 55%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.12;color:var(--text-strong);font-weight:800;letter-spacing:-.01em;margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--orange);position:relative;white-space:nowrap;z-index:0}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;background:rgba(125,40,24,.55);z-index:-1;border-radius:3px}
.hero .lead{font-size:1.18rem;max-width:34em;margin-bottom:32px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .micro{margin-top:18px;font-size:1rem;color:var(--muted)}
.hero-card{background:linear-gradient(165deg,var(--maroon-darkest),var(--maroon-dark));border:1px solid var(--line);border-radius:18px;padding:36px 32px;color:var(--warm-white);box-shadow:0 24px 60px -24px rgba(75,24,14,.45)}
.hero-card .hc-title{color:var(--orange);font-family:var(--head);font-weight:700;font-size:1.35rem;margin-bottom:4px}
.hero-card .hc-sub{color:var(--text);font-size:1rem}
.hero-card ul{list-style:none;margin-top:18px}
.hero-card li{padding:12px 0;border-top:1px solid rgba(255,249,246,.12);display:flex;gap:12px;align-items:baseline;font-size:1rem;line-height:1.5;color:var(--text)}
.hero-card li:first-child{border-top:none}
.hero-card li b{font-family:var(--head);color:#fff}
.hero-card .tick{color:var(--orange-mid);font-weight:800}

/* ---- trust strip ---- */
.trust{background:var(--band);padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;gap:36px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.stat b{display:block;font-family:var(--head);font-size:1.5rem;color:var(--orange);font-weight:800}
/* Caption size matches .hero .lead exactly (1.18rem), per Rob's explicit reference -- now
   shared by all three stat columns, so this lives on the base rule rather than a per-column
   override. */
.stat span{font-size:1.18rem;color:var(--muted)}
/* First two columns' orange numbers only (30+ yrs / 100+ sites) -- bumped up from the
   shared .stat b base rule above; stat3 ("businesses, brands & nonprofits") stays at 1.5rem. */
.gb-text-stat1n b, .gb-text-stat2n b{font-size:1.8rem}
/* Column 3's header ("businesses, brands & nonprofits") is deliberately smaller (1.5rem)
   than the other two, but line-height is a body-inherited 1.7x MULTIPLIER of each header's
   own font-size, so the smaller font produced a shorter line box (40.8px vs 48.96px) --
   .trust .wrap centers each column vertically, so that shortfall pushed this column's
   caption 4px out of alignment with the other two. Setting line-height to the same absolute
   value col1/2 get from their multiplier (1.8rem font x 1.7 = 3.06rem) re-aligns the
   captions without touching this column's own font-size. */
.gb-text-stat3n b{line-height:3.06rem}

/* ---- services: full-width Website Accessibility card ----
   From the v1.2 accessibility delta (IMPLEMENTATION-UPDATE-v1.2.md, item 1).
   Not built on the live homepage yet, so nothing uses it there. */
.accessibility-feature{grid-column:1/-1}

/* ---- AI band ---- */
.ai-band{background:linear-gradient(165deg,var(--maroon-darkest) 40%,var(--maroon-dark));color:var(--warm-white)}
.ai-band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ai-band h2{color:var(--orange);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;margin-bottom:18px;line-height:1.2}
.ai-band p{color:var(--text);font-size:1.05rem;margin-bottom:16px}
.ai-band p b{color:#fff;font-family:var(--head)}
.ai-list{list-style:none;margin-top:8px}
.ai-list li{display:flex;gap:14px;padding:14px 0;border-top:1px solid rgba(255,249,246,.12);align-items:baseline}
.ai-list .tick{color:var(--orange-mid);font-weight:800;font-family:var(--head)}
.ai-list b{font-family:var(--head);color:#fff;display:block;font-size:1rem}
.ai-list span{color:var(--text);font-size:1rem;line-height:1.5}

/* ---- process ---- */
.process{background:var(--band)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{background:var(--card);border-radius:14px;padding:28px 26px;border:1px solid var(--line);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--head);font-stretch:125%;font-weight:800;font-size:2.4rem;color:rgba(248,179,144,.3);position:absolute;top:18px;right:22px;line-height:1}
.step h3{color:var(--text-strong);font-size:1.1rem;margin-bottom:10px;font-weight:700}
.step p{font-size:1rem;margin-bottom:0} /* was implicitly zero via the sitewide reset removed 2026-08-23 (see page-specific.css); this is the one homepage paragraph with no other margin override, so it now needs its own — otherwise GP's Dynamic Typography default (20px) adds unwanted space below the card's last line before its own 28px padding */

/* ---- landmarks: horizontal scrolling timeline ---- */
.landmarks{padding:88px 0}
.landmarks .sec-head p{max-width:640px;margin:14px auto 0}
.lm-scroller{margin-top:44px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--orange-dark) transparent;padding:6px 24px 18px;cursor:grab}
.lm-scroller.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.lm-track{list-style:none;margin:0;padding:0 max(0px,calc((100% - 1120px)/2));display:flex;gap:20px}
.lm-tile{flex:0 0 240px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;transition:transform .2s, box-shadow .2s}
.lm-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(75,24,14,.35)}
.lm-year{display:block;font-family:var(--head);font-weight:700;font-size:.92rem;color:var(--orange-mid);margin-bottom:10px}
.lm-tile h3{font-family:var(--head);font-size:1.05rem;font-weight:700;color:var(--text-strong);margin-bottom:8px}
.lm-tile p{margin:0;font-size:1rem;color:var(--text);line-height:1.5}
.lm-tile.now{background:linear-gradient(165deg,var(--maroon-darkest),var(--maroon-dark));border-color:transparent}
.lm-tile.now .lm-year,.lm-tile.now h3{color:var(--orange-mid)}
.lm-tile.now p{color:var(--text)}
@media (min-width:901px){
  /* Pull the scroller's own right edge in to the content column's edge
     (instead of letting it run full-bleed) so the native scrollbar --
     which spans .lm-scroller's own width, not its scrollable content --
     visually ends at the same point as the "now" tile, matching the
     "Launch & keep growing" column above. Left stays at the true browser
     edge so the 2008 tile goes full width once you scroll all the way
     back. (Earlier version used a .lm-spacer flex item + JS to fake this
     gap via extra scrollable padding; that made the tile land in the
     right place but left the scrollbar spanning past it to the real edge,
     which is the bug this replaces.) */
  .lm-scroller{padding-left:0;padding-right:0;margin-right:max(0px,calc((100% - 1120px)/2 + 24px))}
  .lm-track{padding-left:0}
}
@media (max-width:640px){
  .lm-tile{flex-basis:210px}
  .lm-track{padding-left:24px;padding-right:24px}
}

/* ---- work showcase ---- */
.work .grid{align-items:stretch}
.shot{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .2s}
a.shot:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(75,24,14,.45)}
.shot .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,249,246,.06);border-bottom:1px solid var(--line)}
.bar .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,249,246,.22)}
.bar .dot:first-child{background:var(--orange)}
.shot .bar span{margin-left:8px;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.shot .scr{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--card),var(--maroon-darkest) 70%,var(--maroon-dark))}
.shot .scr img{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{padding:14px 16px;font-size:1rem;color:var(--muted)}
.shot figcaption b{color:var(--text-strong);font-weight:700;display:block;font-size:1rem;margin-bottom:2px}

/* ---- final CTA ---- */
.final{background:radial-gradient(700px 320px at 50% -20%, rgba(125,40,24,.5) 0%, transparent 65%);text-align:center}
.final h2{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--text-strong);font-weight:800;margin:0 auto 16px;max-width:18em;line-height:1.2}
.final p{max-width:36em;margin:0 auto 32px;font-size:1.18rem}

/* ---- page responsive ---- */
@media(max-width:900px){
  .hero .wrap,.ai-band .wrap{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr}
}