/* =====================================================================
   My Life Transformation Coach — Sue Bova
   Brand: coastal-calm + warm hope. Deep teal (clarity/grounding),
   warm sand (comfort), sunrise gold (hope/forward).
   Type: Source Serif 4 (display, crisp serif) + Nunito Sans (body, friendly). Swapped off Fraunces 2026-08-07: its Wonky axis defaults ON and bent the F and J.
   Hand-built static system. No framework. Shared across all 6 pages.
   ===================================================================== */

:root{
  /* Sue's REAL brand (extracted from her funnel): royal indigo + turquoise + soft sky */
  --ink:#20204a;          /* deep indigo ink (text) */
  --ink-soft:#4a4a72;
  --muted:#71718f;
  --paper:#f6f7fe;        /* soft sky-white */
  --paper-2:#eceefb;      /* light lavender-blue */
  --paper-3:#e2e6f9;
  --white:#ffffff;
  --ocean:#3c3cc0;        /* PRIMARY royal indigo (kept var name for reuse) */
  --ocean-d:#2f2fa0;      /* deeper indigo */
  --ocean-dd:#252585;     /* deepest indigo (hero base) */
  --sage:#4fc7ba;         /* turquoise, readable on white */
  --sage-soft:#a7ece3;
  --sun:#3fd0c0;          /* ACCENT turquoise (buttons) */
  --sun-2:#2bb4a6;        /* deeper turquoise (hover / text on light) */
  --sun-soft:#81e6d9;     /* soft turquoise (on dark) */
  --violet:#8a6fd0;       /* logo butterfly violet (tertiary accent) */
  --violet-soft:#c8a9fe;  /* soft lavender */
  --line:#dde1f4;
  --shadow:0 24px 60px -34px rgba(37,37,133,.5);
  --shadow-soft:0 14px 40px -28px rgba(37,37,133,.38);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sun-2)}
/* hero recognition chip (small "that's her" photo + cert, above the fold, F-position) */
.hero-id{display:flex;align-items:center;gap:.65rem;margin-bottom:1.15rem}
.hero-id .hid-photo{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:top;
  box-shadow:0 6px 18px -8px rgba(37,37,133,.5)}
.hero-id .hid-badge{height:52px;width:auto;margin-left:.35rem;flex:none}
.hero-id span{display:flex;flex-direction:column;line-height:1.25}
.hero-id b{font-family:var(--body);font-weight:800;font-size:.98rem;color:#fff}
.hero-id small{font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet-soft)}
/* ways to work with me (options ladder) */
.ways{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;max-width:1080px;margin-inline:auto}
.way{flex:1 1 300px;max-width:326px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-soft)}
.way-k{font-family:var(--body);font-weight:800;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--violet)}
.way h3{font-size:1.18rem}
.way p{color:var(--ink-soft);font-size:.94rem;flex:1}
.way .btn{align-self:flex-start;margin-top:.5rem}
.center{text-align:center}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:700;
  font-size:.95rem;letter-spacing:.01em;padding:.95rem 1.9rem;border-radius:999px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;cursor:pointer;border:0}
.btn-sun{background:var(--sun);color:var(--ocean-dd);box-shadow:0 12px 30px -10px rgba(63,208,192,.55)}
.btn-sun:hover{transform:translateY(-2px);box-shadow:0 16px 38px -10px rgba(63,208,192,.65);background:var(--sun-soft)}
.btn-ocean{background:var(--ocean);color:#fff}
.btn-ocean:hover{transform:translateY(-2px);background:var(--ocean-d)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ocean-d)}
.btn-ghost-ink{border:1.5px solid var(--ocean);color:var(--ocean)}
.btn-ghost-ink:hover{background:var(--ocean);color:#fff}
.btn-lg{padding:1.1rem 2.3rem;font-size:1rem}

/* ---- header / nav ---- */
header.site{position:sticky;top:0;z-index:60;background:rgba(249,243,233,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand svg{width:38px;height:38px;flex:none}
.brand .brandmark{width:46px;height:46px;flex:none;object-fit:contain}
.brand .bn{font-family:var(--serif);font-size:1.12rem;color:var(--ocean-d);line-height:1.05}
.brand .bn small{display:block;font-family:var(--body);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sun-2);font-weight:700;margin-top:2px}
nav.main{display:flex;align-items:center;gap:1.7rem}
nav.main a{font-size:.92rem;font-weight:600;color:var(--ink-soft);position:relative;padding:2px 0}
nav.main a:hover,nav.main a.active{color:var(--ocean-d)}
nav.main a.active::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;
  background:var(--sun);border-radius:2px}
nav.main .btn{margin-left:.7rem;padding:.8rem 1.8rem;font-size:.92rem;white-space:nowrap;flex:none}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ocean-d)}
.navtoggle svg{width:26px;height:26px}

/* ---- hero ---- */
.hero{position:relative;background:linear-gradient(150deg,var(--ocean-dd),var(--ocean-d) 60%,#2a5559);
  color:#fff;overflow:hidden}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;
  gap:3rem;align-items:center;padding-top:5.2rem;padding-bottom:5.6rem}
.hero__bg{position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(60% 80% at 80% 30%,rgba(216,150,90,.4),transparent 60%),
    radial-gradient(60% 80% at 95% 80%,rgba(126,166,156,.5),transparent 60%);
  background-size:200% 200%,200% 200%;animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{0%{background-position:0% 30%,100% 60%}100%{background-position:40% 70%,60% 20%}}
.hero .eyebrow{color:var(--sun-soft)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);color:#fff;margin-top:1rem;font-weight:400}
/* no-layout-shift rotating headline: an invisible "ghost" holds the space of the
   longest phrase; the animated text is absolutely overlaid on top of it. */
.hero h1 .rotate{position:relative;display:block;color:var(--sun-soft);font-style:italic;margin-top:.1em}
.hero h1 .rotate .ghost{visibility:hidden}
.hero h1 .rotate .typed{position:absolute;left:0;top:0;right:0}
.hero .cursor{display:inline-block;width:2px;margin-left:1px;background:var(--sun-soft);
  animation:blink 1s steps(1) infinite;vertical-align:-.02em}
@keyframes blink{50%{opacity:0}}
.hero .sub{margin-top:1.5rem;font-size:1.15rem;color:#e7eeeb;max-width:36ch}
.hero .cta{margin-top:2.2rem;display:flex;gap:.9rem;flex-wrap:wrap}
.hero__media{position:relative}
.hero__media .frame{position:relative;border-radius:220px 220px 22px 22px;overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--shadow);border:6px solid rgba(255,255,255,.12)}
.hero__media .frame img,.hero__media .frame video{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.hero__media .frame .heromov-fallback{display:none}
@media(prefers-reduced-motion:reduce){.hero__media .frame video{display:none}.hero__media .frame .heromov-fallback{display:block}}
.hero__badge{position:absolute;left:-22px;bottom:26px;background:#fff;color:var(--ink);
  border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:10px;max-width:210px}
.hero__badge img{width:44px;height:44px;object-fit:contain;flex:none}
.hero__badge span{font-size:.78rem;line-height:1.35;font-weight:600;color:var(--ink-soft)}
.hero__edge{position:absolute;left:0;right:0;bottom:-1px;z-index:2;height:64px;background:var(--paper);
  clip-path:polygon(0 60%,100% 0,100% 100%,0 100%)}

/* ---- sections ---- */
section.pad{padding:5.4rem 0}
section.pad-lg{padding:6.8rem 0}
.sec-head{max-width:44rem}
.sec-head.center{margin:0 auto}
/* 2026-08-06 (Sue): "Start small, or go deep. Your pace." was wrapping onto a second line.
   At the 3rem clamp ceiling that headline needs about 806px and .sec-head caps at 44rem
   (704px), so it broke. .wide lifts the cap for that one section only; everything else
   keeps the 44rem measure. */
.sec-head.wide{max-width:60rem}
/* 2026-08-06 (Sue): opt-in line break, desktop and up only, so a deliberate break does not
   become an awkward orphan on a phone where the text already wraps. */
.lb{display:none}
@media(min-width:640px){.lb{display:inline}}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);color:var(--ocean-d);margin-top:.7rem;font-weight:400}
.sec-head p{margin-top:1rem;color:var(--ink-soft);font-size:1.1rem}
.bg-paper2{background:var(--paper-2)}
.bg-ocean{background:linear-gradient(150deg,var(--ocean-d),var(--ocean-dd));color:#fff}
.bg-ocean .sec-head h2{color:#fff}.bg-ocean .sec-head p{color:#dce7e4}.bg-ocean .eyebrow{color:var(--sun-soft)}
.bg-ocean .split h2{color:#fff}.bg-ocean .split p{color:#dce7e4}
.bg-sand{background:var(--paper-3)}

/* ---- generic split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
.split.narrow{gap:2.4rem}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;object-fit:cover}
.split-media.tall img{aspect-ratio:4/5}
.split h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--ocean-d);font-weight:400;margin-top:.6rem}
.split p{margin-top:1.1rem;color:var(--ink-soft)}
.split .btn{margin-top:1.6rem}
.tag-list{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem}
.tag{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;
  font-size:.85rem;font-weight:600;color:var(--ocean-d)}

/* ---- cards ---- */
.grid{display:grid;gap:1.5rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.8rem;box-shadow:var(--shadow-soft)}
.card .ic{width:52px;height:52px;border-radius:14px;background:var(--paper-2);display:flex;
  align-items:center;justify-content:center;margin-bottom:1.1rem;color:var(--ocean);font-size:1.5rem}
.card h3{font-size:1.28rem;color:var(--ocean-d);font-weight:500}
.card p{margin-top:.6rem;color:var(--ink-soft);font-size:.98rem}
.card.gold{border-top:3px solid var(--sun)}
.card.violet{border-top:3px solid var(--violet)}
.card .ic.vio{background:#efe9fb;color:var(--violet)}
.num{font-family:var(--serif);font-size:2.2rem;color:var(--sun);line-height:1}
.signature{margin:1.2rem 0 .4rem;max-width:230px;height:auto;opacity:.95}

/* ---- steps ---- */
.steps{counter-reset:s;display:grid;gap:1.3rem}
.step{display:flex;gap:1.3rem;align-items:flex-start;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--shadow-soft)}
.step .sn{font-family:var(--serif);font-size:1.6rem;color:#fff;background:var(--ocean);flex:none;
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.step h3{font-size:1.22rem;color:var(--ocean-d);font-weight:500}
.step p{margin-top:.35rem;color:var(--ink-soft);font-size:.98rem}

/* ---- quote / testimonial ---- */
.quote{background:var(--white);border-radius:var(--radius);padding:2.4rem;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);position:relative}
.quote::before{content:"\201C";font-family:var(--serif);font-size:5rem;color:var(--sage-soft);
  position:absolute;top:-.4rem;left:1.2rem;line-height:1}
.quote p{position:relative;font-size:1.08rem;color:var(--ink);font-style:italic}
.quote .who{margin-top:1.1rem;font-weight:700;color:var(--ocean-d);font-style:normal;font-size:.95rem;
  display:flex;align-items:center;gap:.7rem}
.quote .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.quote .who b{font-weight:700}
.quote .arc{display:inline-block;margin-top:.2rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sun-2)}
/* ---- testimonial rotator ---- */
.quotes{position:relative}
.qslide{display:none}
.qslide.is-active{display:block;animation:qfade .5s ease}
@keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.who-mono{width:46px;height:46px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:var(--ocean-d);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.02em}
.qdots{display:flex;gap:.5rem;justify-content:center;margin-top:1.1rem}
.qdot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--sage-soft);
  cursor:pointer;transition:transform .2s ease,background .2s ease}
.qdot.is-active{background:var(--ocean-d);transform:scale(1.3)}
.qdot:hover{background:var(--ocean-d)}
@media(prefers-reduced-motion:reduce){.qslide.is-active{animation:none}}

/* ---- pillars / list ---- */
.check{list-style:none;display:grid;gap:.85rem}
.check li{position:relative;padding-left:2rem;color:var(--ink-soft)}
.check li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--sun-soft),var(--sun));box-shadow:0 0 0 4px rgba(216,150,90,.14)}
.check li b{color:var(--ink)}

/* ---- pricing / offer box ---- */
.offer{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;max-width:520px;margin:0 auto}
.offer .top{background:linear-gradient(150deg,var(--ocean-d),var(--ocean-dd));color:#fff;padding:2rem 2.2rem}
.offer .top .price{font-family:var(--serif);font-size:3rem;line-height:1}
.offer .top .price small{font-size:1rem;color:#cfe0dc;font-family:var(--body)}
.offer .body{padding:2rem 2.2rem}
.offer .body .check{margin-bottom:1.6rem}
.offer .guarantee{margin-top:1rem;font-size:.85rem;color:var(--muted);text-align:center}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(150deg,var(--sun-soft),var(--sun));color:var(--ocean-dd);text-align:center}
.cta-band h2{color:var(--ocean-dd);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:400}
.cta-band p{margin-top:.9rem;color:#1c1c52;max-width:48ch;margin-left:auto;margin-right:auto}
/* 2026-08-06 (Sue): she wants "No magic transformation..." to sit on ONE line. It runs 89
   characters and the 48ch cap forced a wrap. Released from about 900px up, where the line
   lands near 670px inside a 1180px wrap. The 48ch measure still applies on phones, where one
   line is neither possible nor readable. */
@media(min-width:900px){.cta-band p{max-width:none}}
.cta-band .btn{margin-top:1.8rem}
.cta-band .btn-white{background:var(--ocean-d);color:#fff}
.cta-band .btn-white:hover{background:var(--ocean-dd);color:#fff}

/* ---- forms ---- */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:2.2rem;box-shadow:var(--shadow-soft)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700;font-size:.85rem;color:var(--ocean-d);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--sage);
  box-shadow:0 0 0 4px rgba(126,166,156,.18)}
.field textarea{min-height:130px;resize:vertical}

/* ---- footer ---- */
footer.site{background:var(--ocean-dd);color:#cdddd9}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem;padding:4rem 26px 2.4rem}
footer.site .brand .bn{color:#fff}
footer.site h4{font-family:var(--body);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun-soft);margin-bottom:1rem;font-weight:700}
footer.site a{display:block;color:#cdddd9;font-size:.95rem;margin-bottom:.55rem}
footer.site a:hover{color:#fff}
footer.site .tagline{margin-top:1rem;font-size:.92rem;color:#a9c1bd;max-width:34ch}
footer.site .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);margin-top:1.4rem;
  padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;color:#8fa8a4}
footer.site .footer-disclaimer{grid-column:1/-1;margin-top:.85rem;font-size:.74rem;line-height:1.55;
  color:#7e9793;max-width:88ch}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---- page hero (interior) ---- */
.phero{background:linear-gradient(150deg,var(--ocean-d),var(--ocean-dd));color:#fff;position:relative;overflow:hidden}
.phero__bg{position:absolute;inset:0;opacity:.4;background:radial-gradient(60% 90% at 85% 20%,rgba(216,150,90,.4),transparent 60%)}
.phero .wrap{position:relative;z-index:2;padding:3.6rem 26px 4rem;max-width:52rem}
.phero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);color:#fff;margin-top:.7rem;font-weight:400}
.phero p{margin-top:1rem;color:#dde8e5;font-size:1.15rem;max-width:44ch}

/* ---- utilities ---- */
.mt-s{margin-top:1rem}.mt{margin-top:1.6rem}.mt-l{margin-top:2.4rem}
.maxw{max-width:52rem}.maxw-c{max-width:52rem;margin:0 auto}

/* ---- responsive ---- */
@media(max-width:920px){
  nav.main{position:fixed;inset:76px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:.6rem 0;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-soft);transform:translateY(-140%);transition:transform .3s ease;z-index:55}
  nav.main.open{transform:none}
  nav.main a{padding:.9rem 26px}
  nav.main a.active::after{display:none}
  nav.main .btn{margin:.5rem 26px}
  .navtoggle{display:block}
  .hero .wrap{grid-template-columns:1fr;gap:2.4rem;padding-top:3.4rem;padding-bottom:4rem}
  .hero__media{max-width:380px;margin:0 auto}
  .split{grid-template-columns:1fr;gap:2rem}
  .split.flip .split-media{order:-1}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  footer.site .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  footer.site .wrap{grid-template-columns:1fr}
  .hero__badge{left:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #rot::after{content:"moving forward"}
}

/* ---- 2026-07-21 edits: Sue photo in header, static hero headline ---- */
.brand .brandphoto{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center top;flex:none;border:2px solid var(--violet-soft)}
.brand .bn small.cpc{color:var(--violet)}
.hero h1 em{color:var(--sun-soft);font-style:italic;font-weight:inherit}

/* ---- 2026-08-03: circular hero collage + readable headline (Sue call) ---- */
.hero h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.06}
.hero h1 em{display:block;font-family:var(--body);font-style:normal;font-weight:800;
  font-size:clamp(1.6rem,5vw,3.2rem);white-space:nowrap;letter-spacing:-.005em;
  color:#a7ece3;margin-top:.2em;line-height:1.1}

.herocollage{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:1/1}
.herocollage .cc{position:absolute;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:4px solid rgba(255,255,255,.92);box-shadow:0 18px 44px -18px rgba(10,10,60,.65)}
.herocollage .cc img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
/* 2026-08-06 (Sue call): she asked for the bubbles to "connect, a little bit overlapping"
   so the collage reads as one linked group rather than five separate portraits, which ties
   it to the copy. Each satellite was moved along its own line toward the centre circle until
   it overlaps cc-a by 3% of the container. Gaps before this were 1.7 / 5.4 / 9.4 / 10.0. */
.herocollage .cc-a{width:54%;top:17%;left:23%;border-width:5px;z-index:3}
.herocollage .cc-b{width:29%;top:4.1%;left:6.6%;z-index:4}
.herocollage .cc-c{width:25%;top:9.1%;right:8.6%;z-index:4}
.herocollage .cc-d{width:27%;bottom:12.8%;left:13.6%;z-index:4}
.herocollage .cc-e{width:30%;bottom:10.3%;right:11%;z-index:4}
@media(max-width:900px){.hero__media{width:100%}.herocollage{max-width:420px;margin:0 auto}}
@media(max-width:520px){.herocollage .cc{border-width:3px}}


/* ---- cookie consent ---- */
.sb-cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;max-width:760px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:0 24px 60px -28px rgba(37,37,133,.45);display:none;
  grid-template-columns:1fr auto;gap:18px;align-items:center}
.sb-cc.is-open{display:grid}
.sb-cc p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.sb-cc a{color:var(--ocean);font-weight:700;text-decoration:underline}
.sb-cc-btns{display:flex;gap:10px;flex:none}
.sb-cc button{font-family:var(--body);font-weight:700;font-size:14px;padding:11px 22px;
  border-radius:999px;border:0;cursor:pointer;white-space:nowrap}
.sb-cc .sb-cc-yes{background:var(--sun);color:var(--ocean-dd)}
.sb-cc .sb-cc-yes:hover{background:var(--sun-soft)}
.sb-cc .sb-cc-no{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line)}
.sb-cc .sb-cc-no:hover{border-color:var(--ocean);color:var(--ocean)}
@media(max-width:700px){
  .sb-cc{grid-template-columns:1fr;gap:14px}
  .sb-cc-btns{width:100%}
  .sb-cc button{flex:1}
}