/* ==========================================================================
   HEAD TO SARASOTA — "The Suncoast Report"
   Bold editorial magazine. Navy + cyan chevron. Designed, not templated.
   ========================================================================== */

:root {
  /* Brand (sampled from logo) */
  --navy:      #182846;
  --navy-700:  #101d33;
  --navy-900:  #0a1322;
  --cyan:      #1FA1B5;
  --cyan-600:  #16808f;
  --cyan-300:  #66c4d4;
  --slate:     #6A7D8F;
  --slate-300: #9fadba;

  --paper:  #ffffff;
  --haze:   #F5F6F8;
  --haze-2: #EBEEF2;
  --line:   #E1E5EA;          /* hairline on light */
  --line-d: rgba(255,255,255,.16); /* hairline on dark */
  --ink:    #1b2740;          /* body text */
  --ink-soft:#566472;

  /* Type */
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid scale */
  --fs--1: clamp(.8rem, .76rem + .18vw, .9rem);
  --fs-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --fs-1:  clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --fs-2:  clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  --fs-3:  clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);
  --fs-4:  clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --fs-5:  clamp(2.1rem, 1.1rem + 3.4vw, 4.4rem);   /* masthead */

  --maxw: 1240px;
  --gutter: clamp(1.15rem, .5rem + 3vw, 3.25rem);
  --ease: cubic-bezier(.22,.61,.18,1);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body {
  font-family: var(--body);
  font-size: var(--fs-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img,picture,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color: var(--cyan-600); text-underline-offset:3px; }
strong { font-weight:700; }

/* ---------- type ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight:700; line-height:1.04; letter-spacing:-.015em; color:var(--navy); }
.u-display { font-family: var(--display); }
.kicker {           /* small uppercase editorial label */
  font-family: var(--body); font-weight:700; font-size: var(--fs--1);
  letter-spacing:.22em; text-transform:uppercase; color: var(--cyan-600);
  display:inline-flex; align-items:center; gap:.7em;
}
.kicker--light { color: var(--slate); }
.kicker.on-dark { color: var(--cyan-300); }
.chev { width:.72em; height:.72em; flex:none; }
.chev path { stroke: currentColor; stroke-width:2.4; fill:none; }

.h-mast { font-size: var(--fs-5); line-height:.92; letter-spacing:-.03em; font-weight:800; }
.h-1 { font-size: var(--fs-4); }
.h-2 { font-size: var(--fs-3); }
.h-3 { font-size: var(--fs-2); }
.lede { font-size: var(--fs-1); line-height:1.5; color: var(--ink-soft); }
p { max-width: 66ch; }

/* ---------- layout ---------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide { max-width: 1440px; }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
.section--tight { padding-block: clamp(2.5rem,1.5rem + 3vw,4.5rem); }
.bg-navy { background: var(--navy); color:#dfe6ee; }
.bg-navy h1,.bg-navy h2,.bg-navy h3 { color:#fff; }
.bg-haze { background: var(--haze); }
.rule { border:0; border-top:1px solid var(--line); }
.rule-d { border:0; border-top:1px solid var(--line-d); }

/* section header device: kicker + index coordinate over a hairline */
.sec-head { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); margin-bottom: clamp(2rem,1rem + 3vw,3.5rem); }
.bg-navy .sec-head { border-color: var(--line-d); }
.sec-head__idx { font-family:var(--display); font-weight:700; font-size:var(--fs--1); letter-spacing:.1em; color:var(--slate); white-space:nowrap; }
.sec-head h2 { margin-top:.6rem; max-width:30ch; }

/* ---------- buttons ---------- */
.btn { --bg:var(--cyan); --fg:#04222a;
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--body); font-weight:700;
  font-size:var(--fs-0); line-height:1; padding:1.02em 1.6em; border:1.5px solid transparent;
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .2s, border-color .2s;
}
.btn .chev { width:.8em;height:.8em }
.btn:hover { transform: translateY(-2px); }
.btn--cyan { --bg:var(--cyan); --fg:#04222a; }
.btn--cyan:hover { --bg:var(--cyan-600); --fg:#fff; }
.btn--navy { --bg:var(--navy); --fg:#fff; }
.btn--navy:hover { --bg:var(--navy-700); }
.btn--ghost { background:transparent; border-color:var(--navy); color:var(--navy); }
.btn--ghost:hover { background:var(--navy); color:#fff; }
.btn--ghost.on-dark { border-color:rgba(255,255,255,.5); color:#fff; }
.btn--ghost.on-dark:hover { background:#fff; color:var(--navy); }
.btn--lg { padding:1.15em 2em; font-size:var(--fs-1); }
.btn-row { display:flex; flex-wrap:wrap; gap:.85rem; }

.arrowlink { font-family:var(--body); font-weight:700; color:var(--navy); text-decoration:none; display:inline-flex; align-items:center; gap:.5em; border-bottom:2px solid var(--cyan); padding-bottom:.25em; }
.arrowlink .chev { transition: transform .25s var(--ease); }
.arrowlink:hover .chev { transform: translateX(4px); }
.arrowlink.on-dark { color:#fff; }

/* ---------- top utility bar + header ---------- */
.topbar { background:var(--navy-900); color:var(--slate-300); font-size:var(--fs--1); }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:38px; }
.topbar .places { letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.topbar a { color:#cdd6df; text-decoration:none; font-weight:600; }
.topbar a:hover { color:var(--cyan-300); }
@media (max-width:680px){ .topbar .places{display:none} .topbar .wrap{justify-content:center} }

.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line); }
.site-header__bar { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:78px; }
.brand img { height:34px; width:auto; }
.nav { display:flex; align-items:center; gap:clamp(.9rem,.3rem + 1.3vw,2rem); }
.nav a { font-family:var(--body); font-weight:600; font-size:var(--fs--1); letter-spacing:.04em; text-transform:uppercase; color:var(--navy); text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--cyan-600); }
.nav .btn { text-transform:none; letter-spacing:0; padding:.7em 1.1em; }
.nav-toggle { display:none; background:none; border:1.5px solid var(--line); padding:.5em .6em; cursor:pointer; }
.nav-toggle svg{ width:22px;height:22px;stroke:var(--navy) }
@media (max-width:920px){
  .nav-toggle{ display:inline-flex }
  .nav{ position:fixed; inset:auto 0 0 0; top:var(--hdr,116px); flex-direction:column; align-items:stretch; gap:0;
        background:var(--paper); border-top:1px solid var(--line); padding:.5rem var(--gutter) 1.5rem;
        transform:translateY(-130%); transition:transform .3s var(--ease); box-shadow:0 24px 40px rgba(10,20,38,.18); }
  .nav[data-open="true"]{ transform:translateY(0) }
  .nav a{ padding:1rem 0; border-bottom:1px solid var(--line); font-size:var(--fs-0) }
  .nav .btn{ margin-top:1rem; justify-content:center }
}

/* ---------- masthead / hero ---------- */
.masthead { position:relative; background:var(--navy-900); color:#fff; overflow:hidden; }
.masthead__media{ position:absolute; inset:0; z-index:0 }
.masthead__media img{ width:100%; height:100%; object-fit:cover; }
/* Sunny scrim — stronger on the left where text sits, clear on the right sky */
.masthead__media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(10,19,34,.74) 0%, rgba(10,19,34,.5) 26%, rgba(10,19,34,.12) 52%, rgba(10,19,34,0) 70%),
    linear-gradient(to top, rgba(10,19,34,.5) 0%, rgba(10,19,34,0) 28%); }
/* Full-viewport hero — bottom always meets the browser edge (header is 116px) */
.masthead__inner{ position:relative; z-index:1; display:flex; flex-direction:column;
  min-height: max(560px, 100vh - 116px);
  min-height: max(560px, 100svh - 116px);
  padding-block: clamp(2rem,1.2rem + 3vw,3.5rem); }
.masthead__body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center;
  text-shadow:0 2px 30px rgba(10,19,34,.45); }
.masthead__body .kicker{ color:var(--cyan-300); margin-bottom:1.3rem; text-shadow:none; }
.masthead h1{ color:#fff; max-width:18ch; }
.masthead h1 .wink{ color:var(--cyan-300); }
.masthead__sub{ color:#eef3f6; font-size:var(--fs-1); max-width:44ch; margin-top:1.5rem; line-height:1.45; }
.masthead .btn-row{ margin-top:2.2rem }
/* index strip */
.masthead__index{ position:relative; z-index:2; margin-top: clamp(2rem,1rem + 3vw,3.2rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.2); }
.masthead__index a{ background:rgba(10,19,34,.42); backdrop-filter:blur(2px); padding:1.05rem 1.2rem; text-decoration:none;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; transition:background .25s var(--ease); }
.masthead__index a:hover{ background:rgba(31,161,181,.28) }
.masthead__index .nm{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; font-size:var(--fs-0) }
.masthead__index .chev{ color:var(--cyan-300); width:1em;height:1em }
@media (max-width:620px){ .masthead__index{ grid-template-columns:1fr } .masthead__body{max-width:none} }

/* ---------- intro / statement ---------- */
.statement{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,1rem + 4vw,5rem); align-items:start; }
.statement h2{ font-size:var(--fs-3); max-width:16ch; }
.statement__body > * + *{ margin-top:1.1rem }
@media (max-width:820px){ .statement{ grid-template-columns:1fr } }
/* statement with companion image */
.statement--img{ grid-template-columns:1.15fr .85fr; align-items:center; }
.statement--img .statement__text .kicker{ margin-bottom:1.2rem; }
.statement--img .statement__body{ margin-top:1.4rem; }
.statement__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:820px){ .statement--img{ grid-template-columns:1fr } .statement--img .statement__media{ max-width:460px } }

/* beaches */
.beach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:820px){ .beach-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .beach-grid{ grid-template-columns:1fr } }
.beach{ background:var(--paper); padding:clamp(1.4rem,1rem + 1.5vw,2rem); display:flex; flex-direction:column; transition:background .25s var(--ease); }
.beach:hover{ background:var(--haze); }
.beach__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.beach h3{ font-size:var(--fs-2); }
.beach__tag{ font-family:var(--body); font-weight:700; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-600); white-space:nowrap; }
.beach p{ color:var(--ink-soft); font-size:var(--fs--1); margin-top:.7rem; flex:1; }
.beach__meta{ display:flex; align-items:center; gap:.5em; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); font-weight:700; font-size:var(--fs--1); color:var(--navy); }
.beach__meta .chev{ color:var(--cyan); }
#beaches .sec-head h2{ max-width:none; }
@media (min-width:560px){ #beaches .sec-head h2{ white-space:nowrap; } }

/* ---------- latest articles / blog feed ---------- */
.artfeed{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:start; }
@media (max-width:860px){ .artfeed{ grid-template-columns:1fr } }
.art-cat{ font-family:var(--body); font-weight:700; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan-600); }
.art-meta{ font-size:.78rem; color:var(--slate); letter-spacing:.02em; }
.art-feature{ display:flex; flex-direction:column; text-decoration:none; color:var(--navy); }
.art-feature__media{ aspect-ratio:16/9; overflow:hidden; margin-bottom:1.1rem; }
.art-feature__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.art-feature:hover .art-feature__media img{ transform:scale(1.04); }
.art-feature h3{ font-size:var(--fs-2); margin:.55rem 0 .5rem; }
.art-feature:hover h3{ color:var(--cyan-600); }
.art-feature p{ color:var(--ink-soft); font-size:var(--fs--1); }
.art-feature .art-meta{ margin-top:.9rem; }
.art-list{ display:flex; flex-direction:column; }
.art-item{ display:grid; grid-template-columns:96px 1fr; gap:1.1rem; align-items:center; padding:1.15rem 0; border-top:1px solid var(--line); text-decoration:none; color:var(--navy); transition:padding-left .2s var(--ease); }
.art-list .art-item:first-child{ border-top:0; padding-top:0; }
.art-item:hover{ padding-left:.4rem; }
.art-item__media{ width:96px; height:74px; overflow:hidden; }
.art-item__media img{ width:100%; height:100%; object-fit:cover; }
.art-item h4{ font-family:var(--display); font-size:var(--fs-0); font-weight:700; line-height:1.18; margin:.25rem 0; }
.art-item:hover h4{ color:var(--cyan-600); }

/* ---------- article page ---------- */
.art-hero{ max-width:60rem; }
.art-cat + .art-hero__title, .art-hero .art-cat{ display:inline-block; margin-bottom:1rem; }
.art-hero__title{ font-size:var(--fs-4); max-width:20ch; }
.art-hero__meta{ margin-top:1.3rem; font-size:var(--fs--1); color:var(--slate); font-weight:600; letter-spacing:.02em; }
.art-hero__media{ margin-top:clamp(1.8rem,1rem + 3vw,3rem); }
.art-hero__media img{ width:100%; aspect-ratio:40/21; object-fit:cover; }
.article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:start; }
@media (max-width:940px){ .article-grid{ grid-template-columns:1fr } .article-aside{ display:none } }
.aside-card{ position:sticky; top:140px; background:var(--paper); border:1px solid var(--line); padding:1.7rem; box-shadow:var(--shadow, 0 1px 2px rgba(16,29,51,.05), 0 16px 40px rgba(16,29,51,.07)); }
.aside-card .arrowlink{ display:inline-flex; }

/* related */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,.5rem + 2vw,2rem); }
@media (max-width:760px){ .related-grid{ grid-template-columns:1fr } }
.rel-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--navy); background:var(--paper); border:1px solid var(--line); }
.rel-card__media{ aspect-ratio:5/3; overflow:hidden; }
.rel-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.rel-card:hover .rel-card__media img{ transform:scale(1.05); }
.rel-card__body{ padding:1.2rem 1.3rem 1.4rem; }
.rel-card h3{ font-size:var(--fs-1); margin:.45rem 0 .6rem; }
.rel-card:hover h3{ color:var(--cyan-600); }

/* ---------- guides hub ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,1rem + 2vw,3rem); }
.chip{ font-family:var(--body); font-weight:650; font-size:var(--fs--1); padding:.6em 1.1em; border:1.5px solid var(--line); background:var(--paper); color:var(--navy); cursor:pointer; border-radius:100px; transition:all .2s var(--ease); }
.chip:hover{ border-color:var(--cyan); color:var(--cyan-600); }
.chip.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,.8rem + 2vw,2rem); }
@media (max-width:860px){ .card-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr } }
.gcard{ display:flex; flex-direction:column; text-decoration:none; color:var(--navy); background:var(--paper); border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.gcard:hover{ transform:translateY(-4px); box-shadow:0 20px 45px rgba(16,29,51,.1); }
.gcard__media{ aspect-ratio:5/3; overflow:hidden; }
.gcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gcard:hover .gcard__media img{ transform:scale(1.05); }
.gcard__body{ padding:1.3rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.gcard h3{ font-size:var(--fs-1); margin:.45rem 0 .5rem; }
.gcard p{ color:var(--ink-soft); font-size:var(--fs--1); flex:1; }
.gcard .art-meta{ margin-top:1rem; }
.gcard[hidden]{ display:none; }

/* ---------- community feature spreads ---------- */
.feature{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center; }
.feature + .feature{ margin-top: clamp(3rem,2rem + 4vw,6rem); padding-top: clamp(3rem,2rem + 4vw,6rem); border-top:1px solid var(--line); }
.feature--rev .feature__media{ order:2 }
.feature__media{ position:relative; }
.feature__media img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.feature__tag{ position:absolute; left:0; bottom:0; background:var(--navy); color:#fff; font-family:var(--display);
  font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:var(--fs--1); padding:.6em 1.1em; }
.feature__char{ font-family:var(--display); font-weight:700; color:var(--cyan-600); text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-0); }
.feature h3{ font-size:var(--fs-3); margin:.35rem 0 .2rem; }
.feature__desc{ color:var(--ink-soft); margin-top:.9rem }
.statbar{ margin-top:1.6rem; border-top:1px solid var(--line); }
.statbar dl{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 }
.statbar div{ padding:1rem 1rem 1rem 0; border-bottom:1px solid var(--line); }
.statbar dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--slate); }
.statbar dd{ font-family:var(--display); font-weight:700; font-size:var(--fs-2); color:var(--navy); margin:.2rem 0 0; line-height:1 }
.feature .arrowlink{ margin-top:1.7rem }
@media (max-width:760px){ .feature{ grid-template-columns:1fr } .feature--rev .feature__media{ order:0 } }

/* ---------- data wall ---------- */
.datawall{ display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line-d); }
.datawall div{ padding:clamp(1.4rem,1rem + 1.5vw,2.4rem) 1.2rem; border-right:1px solid var(--line-d); border-bottom:1px solid var(--line-d); }
.datawall .n{ font-family:var(--display); font-weight:800; font-size:var(--fs-4); color:var(--cyan-300); line-height:.9; letter-spacing:-.02em; }
.datawall .l{ margin-top:.7rem; color:#b9c6d3; font-size:var(--fs--1); text-transform:uppercase; letter-spacing:.08em; max-width:18ch }
@media (max-width:780px){ .datawall{ grid-template-columns:repeat(2,1fr) } }

/* ---------- quiz promo (lead magnet) ---------- */
.quizpromo{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.quizpromo::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(120% 90% at 100% 0%, rgba(31,161,181,.42), transparent 55%); }
.quizpromo__grid{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center; }
.quizpromo h2{ color:#fff; font-size:var(--fs-3); max-width:16ch }
.quizpromo p{ color:#cfdae3; margin-top:1rem; max-width:46ch }
.quizpromo .btn-row{ margin-top:1.8rem }
.quizpromo__chev{ display:flex; gap:.4rem; justify-content:flex-end; color:var(--cyan); opacity:.9 }
.quizpromo__chev svg{ width:clamp(48px,8vw,110px); height:auto }
.quizpromo__chev svg:nth-child(2){ opacity:.6 } .quizpromo__chev svg:nth-child(3){ opacity:.3 }
@media (max-width:760px){ .quizpromo__grid{ grid-template-columns:1fr } .quizpromo__chev{ display:none } }

/* ---------- guide index (magazine TOC) ---------- */
.guide-idx{ border-top:1px solid var(--line) }
.guide-idx a{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,.5rem + 2vw,3rem); align-items:center;
  padding:clamp(1.2rem,1rem + 1vw,1.9rem) 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--navy);
  transition: padding-left .25s var(--ease), background .25s var(--ease); }
.guide-idx a:hover{ padding-left:1rem; background:linear-gradient(90deg,var(--haze),transparent) }
.guide-idx .num{ font-family:var(--display); font-weight:700; color:var(--cyan); font-size:var(--fs-1); }
.guide-idx .ttl{ font-family:var(--display); font-weight:700; font-size:var(--fs-2); }
.guide-idx .dsc{ display:block; font-family:var(--body); font-weight:400; font-size:var(--fs--1); color:var(--ink-soft); margin-top:.2rem; max-width:60ch }
.guide-idx .go{ color:var(--cyan); width:1.4em; height:1.4em; transition:transform .25s var(--ease) }
.guide-idx a:hover .go{ transform:translateX(5px) }
@media (max-width:620px){ .guide-idx .go{ display:none } .guide-idx a{ grid-template-columns:auto 1fr } }

/* ---------- lifestyle strip ---------- */
.lifestrip{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(.6rem,.3rem + 1vw,1rem); }
.lifestrip figure{ position:relative; margin:0; overflow:hidden; }
.lifestrip img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .6s var(--ease) }
.lifestrip figure:first-child img{ aspect-ratio:auto; min-height:100% }
.lifestrip figure:hover img{ transform:scale(1.05) }
.lifestrip figcaption{ position:absolute; left:0; bottom:0; right:0; padding:1rem 1.1rem .9rem;
  background:linear-gradient(0deg, rgba(10,19,34,.82), transparent); color:#fff;
  font-size:var(--fs--1); font-weight:600; letter-spacing:.02em }
.lifestrip figcaption b{ font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; color:var(--cyan-300); display:block; font-size:.72rem; margin-bottom:.2rem }
@media (max-width:700px){ .lifestrip{ grid-template-columns:1fr 1fr } .lifestrip figure:first-child{ grid-column:1/-1 } }

/* ---------- lead form ---------- */
.leadwrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:start }
@media (max-width:840px){ .leadwrap{ grid-template-columns:1fr } }
.leadcard{ background:var(--paper); border:1px solid var(--line); padding:clamp(1.4rem,1rem + 2vw,2.3rem); box-shadow:0 1px 2px rgba(16,29,51,.04), 0 24px 50px rgba(16,29,51,.08) }
.lead-form{ display:grid; gap:1rem }
.lead-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:520px){ .lead-form .row{ grid-template-columns:1fr } }
.field{ display:flex; flex-direction:column; gap:.4rem }
.field label{ font-size:var(--fs--1); font-weight:700; color:var(--navy) }
.field input,.field select,.field textarea{ font-family:var(--body); font-size:var(--fs-0); color:var(--ink);
  padding:.85em .9em; border:1.5px solid var(--line); background:var(--paper); transition:border-color .2s, box-shadow .2s }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(31,161,181,.16) }
.field textarea{ resize:vertical; min-height:110px }
.hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden }
.form-note{ font-size:var(--fs--1); color:var(--ink-soft) }
.form-msg{ padding:1rem 1.1rem; font-weight:600 }
.form-msg.ok{ background:#E7F6F0; color:#13694a; border:1px solid #bfe6d4 }
.form-msg.err{ background:#FBECE9; color:#9a2a1e; border:1px solid #f1cdc7 }
.checklist{ list-style:none; padding:0; display:grid; gap:.8rem; margin-top:1.3rem }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft) }
.checklist .chev{ color:var(--cyan); margin-top:.35em; flex:none }

/* ---------- CTA band ---------- */
.ctaband{ position:relative; background:var(--navy); color:#fff; overflow:hidden; text-align:center }
.ctaband::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 50% -20%, rgba(31,161,181,.4), transparent 60%) }
.ctaband__in{ position:relative; max-width:42rem; margin-inline:auto }
.ctaband h2{ color:#fff; font-size:var(--fs-3) }
.ctaband p{ color:#cfdae3; margin:1rem auto 0 }
.ctaband .btn-row{ justify-content:center; margin-top:2rem }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-900); color:#9fb0bf; padding-block:clamp(3rem,2rem + 3vw,5rem) 2rem }
.site-footer a{ color:#c3d0db; text-decoration:none } .site-footer a:hover{ color:var(--cyan-300) }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2rem }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand img{ height:38px; margin-bottom:1.2rem }
.footer-brand p{ font-size:var(--fs--1); max-width:34ch }
.footer-grid h4{ color:#fff; font-family:var(--body); font-size:var(--fs--1); text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.1rem }
.footer-grid ul{ list-style:none; padding:0; display:grid; gap:.65rem }
.footer-legal{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line-d); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:var(--fs--1); color:#7d8f9e }
.footer-legal .disclaimer{ max-width:72ch }

/* ---------- sticky lead bar ---------- */
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--navy); color:#fff;
  border-top:2px solid var(--cyan); transform:translateY(110%); transition:transform .4s var(--ease); box-shadow:0 -10px 30px rgba(10,19,34,.25) }
.sticky-bar[data-show="true"]{ transform:translateY(0) }
.sticky-bar .wrap{ display:flex; align-items:center; gap:1.2rem; min-height:64px; padding-block:.7rem }
.sticky-bar p{ margin:0; font-weight:600; max-width:none }
.sticky-bar p b{ font-family:var(--display); color:var(--cyan-300) }
.sticky-bar .btn{ padding:.75em 1.3em; white-space:nowrap }
.sticky-bar .close{ margin-left:auto; background:none; border:0; color:#9fb0bf; cursor:pointer; font-size:1.4rem; line-height:1; padding:.2em }
.sticky-bar .close:hover{ color:#fff }
@media (max-width:680px){ .sticky-bar .txt{ display:none } .sticky-bar .wrap{ justify-content:space-between } .sticky-bar .btn{ flex:1; justify-content:center } }

/* ---------- breadcrumbs / prose / faq (reused on inner pages) ---------- */
.crumbs{ font-size:var(--fs--1); color:var(--ink-soft); padding-block:1.1rem .2rem }
.crumbs a{ color:var(--ink-soft); text-decoration:none } .crumbs a:hover{ color:var(--cyan-600) }
.crumbs span{ color:var(--line); margin-inline:.55em }
.prose{ max-width:72ch } .prose > * + *{ margin-top:1.15rem }
.prose h2{ margin-top:2.6rem; font-size:var(--fs-2) } .prose h3{ margin-top:1.9rem; font-size:var(--fs-1) }
.prose ul,.prose ol{ padding-left:1.3rem } .prose li + li{ margin-top:.5rem } .prose li::marker{ color:var(--cyan) }
.prose blockquote{ border-left:3px solid var(--cyan); padding-left:1.2rem; font-size:var(--fs-1); color:var(--navy); font-weight:600 }
.faq{ max-width:78ch } .faq details{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; list-style:none; padding:1.1rem 0; font-family:var(--display); font-weight:700; font-size:var(--fs-1); color:var(--navy); display:flex; justify-content:space-between; gap:1rem; align-items:center }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; width:.8em; height:.8em; border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(45deg); transition:transform .25s var(--ease); flex:none; margin-top:-.2em }
.faq details[open] summary::after{ transform:rotate(-135deg) }
.faq details > p{ padding:0 0 1.2rem; color:var(--ink-soft); max-width:72ch }

/* ---------- misc ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none } }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--cyan); color:#04222a; padding:.8em 1.2em; z-index:100; font-weight:700 }
.skip-link:focus{ left:0 }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px }
.center{ text-align:center } .measure{ max-width:64ch; margin-inline:auto }