/* =========================================================
   HANNE ARTS — website stylesheet (v1, Oct 2026)
   Warm editorial direction + existing brand colours.
   Fraunces (headlines) + DM Sans (body).
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root{
  /* Brand */
  --teal:#278E93;
  --teal-dark:#1C6E72;
  --teal-ink:#12484B;
  --red:#D11313;
  --pale:#E4F4F4;
  --orange:#FFAD31;
  --orange-deep:#E08A16;
  /* Warm editorial */
  --cream:#FBF6EF;
  --paper:#FFFDF9;
  --blush:#F5E5DA;
  --clay:#B25334;
  --clay-soft:#E7B79F;
  --ink:#241F1B;
  --muted:#6E6259;
  --line:#EADFD1;
  --linesoft:#F2EADF;
  --max:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,.serif{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0 0 .4em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,5.6vw,4.7rem); }
h2{ font-size:clamp(2rem,4vw,3.2rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.65rem); }
h4{ font-size:1.12rem; }
p{ margin:0 0 1.05em; }
em{ font-style:italic; }
strong{ font-weight:700; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0 0 1.1em; padding-left:1.15em; }
li{ margin:.35em 0; }
hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }

::selection{ background:#E08A16; color:#241F1B; }

:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:4px; }

.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; }
.skip:focus{ left:8px; }

/* ---------- Layout helpers ---------- */
.container{ width:min(var(--max), calc(100% - 44px)); margin-inline:auto; }
.narrow{ max-width:760px; }
.center{ text-align:center; }
.small{ font-size:.86rem; line-height:1.6; }
.muted{ color:var(--muted); }
.serif-italic{ font-family:"Fraunces",serif; font-style:italic; }
.eyebrow{
  font-family:"DM Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:700;
  color:var(--clay);
  margin:0 0 14px;
}
.eyebrow.teal{ color:var(--teal-dark); }
.lead{ font-size:1.16rem; color:#4c4139; }

section{ padding:86px 0; }
.section-sm{ padding:58px 0; }
.bg-paper{ background:var(--paper); }
.bg-blush{ background:var(--blush); }
.bg-pale{ background:var(--pale); }
.bg-ink{ background:var(--teal-ink); color:#EFE7DA; }

.sec-head{ max-width:660px; margin-bottom:46px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head p{ margin-top:.6em; }

/* ---------- Header / nav ---------- */
.topbar{
  background:var(--teal-ink);
  color:#EAF3F2;
  font-size:.82rem;
  text-align:center;
  padding:9px 16px;
  letter-spacing:.01em;
}
.topbar a{ color:var(--orange); font-weight:700; text-decoration:none; white-space:nowrap; }
.topbar a:hover{ text-decoration:underline; }

header.site{
  position:sticky; top:0; z-index:100;
  background:var(--cream);
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:26px; min-height:78px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.brand img{ width:50px; height:50px; object-fit:contain; }
.brand span{ display:flex; flex-direction:column; line-height:1.02; }
.brand b{ font-family:"Fraunces",serif; font-weight:600; font-size:1.24rem; letter-spacing:-.03em; }
.brand small{ font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-top:3px; }
.menu{ display:flex; gap:26px; font-size:.94rem; font-weight:600; }
.menu a{ text-decoration:none; color:#4a4038; padding:6px 0; border-bottom:2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"]{ color:var(--teal-dark); border-color:var(--teal); }
.nav .btn{ white-space:nowrap; }

.nav-toggle{ display:none; }
.nav-toggle-label{ display:none; }
@media(max-width:940px){
  .menu{ display:none; }
  .nav-toggle-label{
    display:inline-flex; flex-direction:column; gap:5px; cursor:pointer;
    margin-left:auto; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
  }
  .nav-toggle-label i{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
  .nav-toggle:checked ~ .nav-toggle-label i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label i:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-toggle-label i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-toggle:checked ~ .menu{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:14px 22px 20px; font-size:1.05rem;
  }
  .nav-toggle:checked ~ .menu a{ padding:12px 0; border-bottom:1px solid var(--linesoft); }
  .nav .btn{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"DM Sans",sans-serif; font-weight:700; font-size:.95rem;
  padding:15px 26px; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  position:relative; overflow:hidden;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn.primary{ background:var(--teal-dark); color:#fff; box-shadow:0 12px 26px rgba(28,110,114,.28); }
.btn.primary:hover{ background:#155A5E; box-shadow:0 16px 34px rgba(28,110,114,.34); }
.btn.secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.secondary:hover{ background:var(--ink); color:var(--cream); }
.btn.clay{ background:var(--clay); color:#fff; box-shadow:0 12px 26px rgba(192,96,63,.26); }
.btn.clay:hover{ background:#a94f31; }
.btn.on-dark{ background:var(--paper); color:var(--teal-ink); }
.btn.on-dark:hover{ background:var(--orange); color:var(--ink); }
.btn.ghost-dark{ background:transparent; color:#EFE7DA; border-color:rgba(255,255,255,.42); }
.btn.ghost-dark:hover{ background:#fff; color:var(--teal-ink); }
.btn.block{ width:100%; }
.btn.small{ padding:11px 18px; font-size:.86rem; }

/* animated sheen + pulsing ring (the "stand out" CTA) */
.btn.primary::after, .btn.clay::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-130%);
}
.btn.primary:hover::after, .btn.clay:hover::after{ animation:sheen .8s ease; }
@keyframes sheen{ to{ transform:translateX(130%); } }

.btn.glow{ animation:glowPulse 2.9s infinite; }
@keyframes glowPulse{
  0%{ box-shadow:0 12px 26px rgba(28,110,114,.30), 0 0 0 0 rgba(39,142,147,.45); }
  70%{ box-shadow:0 12px 26px rgba(28,110,114,.30), 0 0 0 15px rgba(39,142,147,0); }
  100%{ box-shadow:0 12px 26px rgba(28,110,114,.30), 0 0 0 0 rgba(39,142,147,0); }
}
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 70px; background:linear-gradient(150deg,var(--pale),var(--cream) 58%); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:.5em; }
.hero h1 em{ color:var(--clay); }
.hl{ background:#E08A16; color:#241F1B; padding:0 .14em; border-radius:5px; font-style:normal; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.offer{ padding-bottom:42px; }
.offer ul{ margin-bottom:30px; }
.hero .lead{ max-width:560px; }
.hero-figure{ position:relative; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; border-radius:26px; box-shadow:0 30px 70px rgba(36,31,27,.20); aspect-ratio:4/4.7; background:var(--blush); }
.hero-figure .badge-float{
  position:absolute; left:-14px; bottom:26px;
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:14px 18px; box-shadow:0 18px 40px rgba(36,31,27,.14); max-width:240px;
}
.hero-figure .badge-float b{ font-family:"Fraunces",serif; font-size:1.5rem; }
.hero-figure .badge-float span{ display:block; font-size:.78rem; color:var(--muted); line-height:1.4; }
.trustline{ font-size:.9rem; color:var(--muted); margin-top:20px; font-weight:600; letter-spacing:.01em; }
@media(max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .hero-figure{ order:-1; }
  .hero-figure img{ aspect-ratio:4/3.4; }
}

/* ---------- Trust strip ---------- */
.truststrip{ background:var(--paper); border-block:1px solid var(--line); }
.truststrip .container{ display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:center; padding-block:20px; }
.truststrip span{
  font-size:.82rem; font-weight:700; letter-spacing:.02em; color:#4a4038;
  display:inline-flex; align-items:center; gap:8px;
}
.truststrip span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }

/* ---------- Credentials marquee ---------- */
.marquee{ overflow:hidden; background:var(--paper); border-block:1px solid var(--line); }
.marquee-track{ display:flex; align-items:center; gap:64px; width:max-content; padding:20px 0; animation:marquee 45s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:#4a4038; white-space:nowrap; display:inline-flex; align-items:center; gap:9px; }
.marquee-track span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:12px 30px; padding:18px 22px; }
}

/* ---------- Stats ---------- */
.statsbar{ background:var(--paper); border-bottom:1px solid var(--line); padding:30px 0; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ text-align:center; }
.stat b{ font-family:"Fraunces",serif; font-size:clamp(2rem,4vw,3rem); color:var(--teal-dark); display:block; line-height:1; }
.stat span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
@media(max-width:640px){
  .statsbar{ padding:16px 0; }
  .stats{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:22px; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .stats::-webkit-scrollbar{ display:none; }
  .stat{ flex:0 0 auto; display:flex; align-items:baseline; gap:7px; text-align:left; }
  .stat b{ font-size:1.15rem; display:inline; }
  .stat span{ font-size:.66rem; letter-spacing:.05em; white-space:nowrap; }
}

/* ---------- Generic card ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:30px 30px;
}
.card.soft{ background:var(--blush); border-color:transparent; }
.card h3{ margin-bottom:.35em; }
.card p:last-child{ margin-bottom:0; }
.card.topic{ display:flex; flex-direction:column; }
.card.topic a{ text-decoration:none; color:inherit; }
.card.topic .watch{ margin-top:14px; font-size:.85rem; font-weight:700; color:var(--clay); text-decoration:none; }
.card.topic .watch:hover{ text-decoration:underline; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:940px){ .grid3{ grid-template-columns:1fr 1fr; } .grid4{ grid-template-columns:1fr 1fr; } }
@media(max-width:760px){ .grid2{ grid-template-columns:1fr; gap:30px; } .grid3{ grid-template-columns:1fr; } .grid4{ grid-template-columns:1fr; } }

figure.photo{ margin:0; border-radius:22px; overflow:hidden; background:var(--blush); }
figure.photo img{ width:100%; height:100%; object-fit:cover; }
figure.tall img{ aspect-ratio:4/5; }
figure.land img{ aspect-ratio:4/3; }

/* ---------- Offers ---------- */
.offer-grid{ display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:22px; align-items:stretch; }
.offer{
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:34px 30px 46px; display:flex; flex-direction:column; position:relative;
  min-height:560px;
}
.offer .kicker{ font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--clay); }
.offer .price{ font-family:"Fraunces",serif; font-size:2.5rem; margin:10px 0 2px; line-height:1; }
.offer .price small{ font-family:"DM Sans",sans-serif; font-size:.85rem; color:var(--muted); font-weight:600; letter-spacing:0; }
.offer ul{ list-style:none; padding:0; margin:18px 0 0; }
.offer li{ position:relative; padding-left:26px; font-size:.95rem; margin:.5em 0; }
.offer li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.offer .btn{ margin-top:auto; }
.offer .badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:var(--ink); font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.12em; padding:7px 16px; border-radius:999px;
  box-shadow:0 10px 22px rgba(224,138,22,.3); white-space:nowrap;
}
.offer.featured{
  background:var(--teal-ink); color:#EFE7DA; border-color:transparent;
  box-shadow:0 30px 66px rgba(18,72,75,.28); transform:translateY(-10px);
}
.offer.featured .kicker{ color:var(--orange); }
.offer.featured .muted{ color:#B9CFCE; }
.offer.featured li::before{ background:var(--orange); }
.offer.featured .price{ color:#fff; }
.offer.featured .price small{ color:#AFC7C6; }
@media(max-width:900px){
  .offer-grid{ grid-template-columns:1fr; }
  .offer.featured{ transform:none; }
  .offer{ min-height:0; }
}

/* ---------- Lists ---------- */
.checklist{ list-style:none; padding:0; }
.checklist li{ position:relative; padding-left:34px; margin:.55em 0; }
.checklist li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--teal-dark); font-weight:800; }
.crosslist{ list-style:none; padding:0; }
.crosslist li{ position:relative; padding-left:34px; margin:.7em 0; }
.crosslist li::before{ content:"×"; position:absolute; left:6px; top:0; color:var(--clay); font-weight:800; font-size:1.15rem; }

.dest-list{ list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 46px; }
.dest-list li{ display:flex; gap:15px; padding:15px 0; border-bottom:1px solid var(--line); font-size:1.04rem; line-height:1.5; }
.dest-list li::before{ content:""; flex:none; width:9px; height:9px; margin-top:.55em; border-radius:50%; background:var(--clay); }
@media(max-width:720px){ .dest-list{ grid-template-columns:1fr; } }

/* ---------- RESET stages ---------- */
.reset-list{ display:grid; gap:16px; }
.reset-item{
  display:grid; grid-template-columns:76px 1fr; gap:24px; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px 30px;
}
.reset-item .letter{
  font-family:"Fraunces",serif; font-size:2.6rem; line-height:1; color:#fff;
  background:var(--teal); width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
}
.reset-item:nth-child(2) .letter{ background:var(--clay); }
.reset-item:nth-child(3) .letter{ background:var(--orange-deep); }
.reset-item:nth-child(4) .letter{ background:var(--teal-dark); }
.reset-item:nth-child(5) .letter{ background:var(--clay); }
.reset-item h3{ margin-bottom:.25em; }
.reset-item p{ margin-bottom:0; font-size:1rem; }
.reset-item .stage-sub{ font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; margin-bottom:6px; }
@media(max-width:560px){ .reset-item{ grid-template-columns:1fr; gap:14px; } .reset-item .letter{ width:54px; height:54px; font-size:2.1rem; } }

/* compact 5-up for homepage */
.reset-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.reset-strip .r{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px 20px; }
.reset-strip .r b{ font-family:"Fraunces",serif; font-size:2rem; color:var(--clay); display:block; line-height:1; }
.reset-strip .r h4{ font-size:1rem; margin:10px 0 6px; }
.reset-strip .r p{ font-size:.86rem; color:var(--muted); margin:0; line-height:1.5; }
@media(max-width:940px){ .reset-strip{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .reset-strip{ grid-template-columns:1fr; } }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.steps.centered{ text-align:center; }
.steps.centered .step{ text-align:center; }
.steps.centered .step::before{ margin-inline:auto; }
.steps.three{ grid-template-columns:repeat(3,1fr); }
@media(max-width:820px){ .steps.three{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .steps.three{ grid-template-columns:1fr; } }
.btn-wide{ width:100%; max-width:560px; justify-content:center; }
.hero .note{ margin-top:16px; }
.step{ position:relative; padding-top:14px; }
.step::before{
  counter-increment:step; content:counter(step);
  font-family:"Fraunces",serif; font-size:1.2rem; font-weight:600;
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:#FBE0A8; color:var(--teal-ink); margin-bottom:16px;
}
.step h4{ font-family:"Fraunces",serif; font-size:1.2rem; margin-bottom:.3em; }
.step p{ font-size:.94rem; color:var(--muted); margin:0; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr 1fr; gap:26px 20px; } }
@media(max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Timeline ---------- */
.timeline{ border-left:2px solid var(--line); margin-left:12px; padding-left:42px; }
.tl{ position:relative; padding-bottom:40px; }
.tl:last-child{ padding-bottom:0; }
.tl::before{ content:""; position:absolute; left:-51px; top:6px; width:15px; height:15px; border-radius:50%; background:var(--clay); border:3px solid var(--cream); }
.tl .yr{ font-family:"Fraunces",serif; font-size:.95rem; color:var(--clay); letter-spacing:.04em; }
.tl h3{ font-size:1.35rem; margin:.25em 0 .3em; }
.tl p{ margin:0; color:#4c4139; max-width:640px; }

/* ---------- Quotes / testimonials ---------- */
.quote-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:34px 32px; display:flex; flex-direction:column; }
.quote .stars{ color:var(--orange-deep); letter-spacing:2px; font-size:.95rem; margin-bottom:14px; }
.quote blockquote{ margin:0 0 20px; font-family:"Fraunces",serif; font-size:1.06rem; line-height:1.6; color:#332b26; }
.quote mark{ background:#FBE7C6; color:inherit; padding:0 2px; border-radius:3px; }
.quote-grid.three{ grid-template-columns:repeat(3,1fr); }
@media(max-width:940px){ .quote-grid.three{ grid-template-columns:1fr; } }
.pullquote{ font-family:"Fraunces",serif; font-style:italic; font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.4; text-align:center; max-width:760px; margin:48px auto 0; color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 12px; }
.pullquote span{ display:block; font-family:"DM Sans",sans-serif; font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); margin-top:14px; font-weight:700; }
.quote .who{ display:flex; align-items:center; gap:13px; margin-top:auto; font-size:.92rem; color:var(--muted); }
.quote .who .avatar{ width:44px; height:44px; border-radius:50%; background:var(--clay); color:#fff; display:grid; place-items:center; font-weight:700; font-family:"Fraunces",serif; flex:none; }
.quote .who b{ color:var(--ink); display:block; font-weight:700; }
.google-badge{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700; color:var(--muted); background:var(--linesoft); border-radius:999px; padding:5px 12px; }
.google-badge svg{ width:14px; height:14px; }
@media(max-width:760px){ .quote-grid{ grid-template-columns:1fr; } }

/* ---------- Media logos ---------- */
.media-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 46px; }
.media-row .m{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; color:#5b4f46;
  opacity:.8; transition:.2s;
}
.media-row .m:hover{ opacity:1; color:var(--teal-dark); }

/* ---------- Social strip ---------- */
.social-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.social-card{ display:flex; flex-direction:column; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:28px; transition:.18s; }
.social-card:hover{ transform:translateY(-3px); border-color:var(--clay); box-shadow:0 18px 40px rgba(36,31,27,.10); }
.social-card .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:var(--clay); margin-bottom:10px; }
.social-card h4{ margin-bottom:.3em; }
.social-card p{ font-size:.92rem; color:var(--muted); margin-bottom:14px; }
.social-card .go{ margin-top:auto; font-weight:700; color:var(--teal-dark); }
.social-card .ico{ width:34px; height:34px; margin-bottom:14px; }
@media(max-width:760px){ .social-strip{ grid-template-columns:1fr; } }

/* ---------- Client wins rotator ---------- */
.rot{ position:relative; max-width:560px; margin-inline:auto; }
.rot .slide{ display:none; }
.rot .slide.on{ display:block; animation:fade .6s ease; }
.rot .dots{ display:flex; gap:9px; justify-content:center; margin-top:18px; }
.rot .dots button{ width:9px; height:9px; border-radius:50%; border:0; background:#D9CDBD; cursor:pointer; padding:0; }
.rot .dots button.on{ background:var(--clay); }
.rot .win{ max-width:100%; }
@media(prefers-reduced-motion:reduce){ .rot .slide{ display:block; margin-bottom:20px; } .rot .dots{ display:none; } }

/* ---------- Client wins gallery ---------- */
.wins{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.win{ background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.win img{ width:100%; height:420px; object-fit:cover; object-position:top center; }
.win .cap{ padding:16px 20px; }
.win .cap b{ display:block; }
.win .cap span{ font-size:.85rem; color:var(--muted); }
@media(max-width:820px){ .wins{ grid-template-columns:1fr; } .win img{ height:auto; max-height:560px; } }

/* ---------- Imagine band ---------- */
.imagine-band{ background:var(--teal-ink); color:#EFE7DA; border-radius:26px; padding:60px 54px; }
.imagine-band h2{ color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); }
.imagine-band p{ color:#C6D7D6; max-width:780px; }
.imagine-band .dest-list li{ border-color:rgba(255,255,255,.16); color:#E7EFEE; }
.imagine-band .dest-list li::before{ background:var(--orange); }
@media(max-width:760px){ .imagine-band{ padding:40px 26px; } }

/* ---------- Photo caption ---------- */
.photo-cap{ font-family:"Fraunces",serif; font-style:italic; font-size:1.12rem; color:var(--muted); text-align:center; margin-top:16px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--teal-ink); color:#EFE7DA; border-radius:26px;
  padding:56px 54px; display:flex; align-items:center; justify-content:space-between;
  gap:38px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin:0; max-width:620px; }
.cta-band p{ color:#C6D7D6; margin:.6em 0 0; max-width:620px; }
.cta-band .btn-row{ flex:none; }
@media(max-width:760px){ .cta-band{ padding:40px 28px; } }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px; max-width:860px; margin-inline:auto; }
.faq details{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:6px 24px;
}
.faq summary{
  cursor:pointer; list-style:none; font-family:"Fraunces",serif; font-size:1.16rem;
  padding:20px 0; display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--clay); transition:.2s; flex:none; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 20px; color:#4c4139; }

/* ---------- Form ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:7px; }
.field input, .field textarea, .field select{
  width:100%; font-family:inherit; font-size:1rem; padding:15px 17px;
  border:1.5px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--teal); }
.field textarea{ min-height:130px; resize:vertical; }
.option{
  display:flex; gap:14px; align-items:flex-start; background:var(--paper);
  border:1.5px solid var(--line); border-radius:16px; padding:17px 20px; margin-bottom:10px;
  cursor:pointer; transition:.16s; font-size:1rem;
}
.option:hover{ border-color:var(--clay); transform:translateY(-2px); box-shadow:0 14px 30px rgba(120,80,45,.08); }
.option input{ margin-top:6px; flex:none; width:20px; height:20px; accent-color:var(--teal); }
.option.sel{ border-color:var(--teal); background:#EDF7F7; }
.note{ font-size:.84rem; color:var(--muted); line-height:1.6; }
.bar{ height:5px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:36px; }
.bar i{ display:block; height:100%; width:20%; background:var(--teal); transition:width .35s ease; }
.q-step{ display:none; animation:fade .4s ease; }
.q-step.on{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Result ---------- */
.result-badge{ display:inline-flex; align-items:center; gap:14px; background:var(--teal-ink); color:#fff; border-radius:999px; padding:10px 24px 10px 12px; }
.result-badge b{ font-family:"Fraunces",serif; font-size:1.4rem; background:var(--orange); color:var(--ink); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; }
.result-badge span{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.read{ display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:15px 20px; margin-bottom:10px; text-decoration:none; font-weight:600; font-size:.96rem; transition:.16s; }
.read:hover{ border-color:var(--clay); }
.read span{ color:var(--clay); white-space:nowrap; }
.safe{ background:#FDF1E6; border:1px solid #F3D9C2; border-radius:16px; padding:20px 24px; font-size:.9rem; color:#7A4A2A; line-height:1.6; }

/* ---------- Banner image ---------- */
.banner{ position:relative; border-radius:26px; overflow:hidden; }
.banner img{ width:100%; height:420px; object-fit:cover; }
.banner .cap{
  position:absolute; left:30px; bottom:26px; right:30px; color:#fff;
  font-family:"Fraunces",serif; font-size:clamp(1.3rem,2.6vw,2rem); text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,40,40,.62), transparent 60%); }

/* ---------- Footer ---------- */
footer.site{ background:var(--teal-ink); color:#CBD9D8; padding:66px 0 34px; margin-top:20px; }
footer.site a{ color:#CBD9D8; text-decoration:none; }
footer.site a:hover{ color:#fff; text-decoration:underline; }
.footgrid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; }
footer.site .brand b{ color:#fff; }
footer.site .brand small{ color:#8FB0AE; }
footer.site .brand img{ width:54px; height:54px; background:var(--paper); border-radius:50%; padding:4px; }
footer.site h4{ font-family:"DM Sans",sans-serif; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#8FB0AE; margin-bottom:14px; }
footer.site .flinks a{ display:block; font-size:.92rem; padding:5px 0; }
.footbot{ margin-top:46px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; line-height:1.75; color:#9FB8B7; }
.footbot .social{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; font-weight:700; }
@media(max-width:880px){ .footgrid{ grid-template-columns:1fr 1fr; } }

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta{ display:none; }
@media(max-width:820px){
  .mobile-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120;
    padding:11px 14px; gap:10px; background:var(--cream);
    background:color-mix(in srgb,var(--cream) 94%, transparent);
    backdrop-filter:blur(10px); border-top:1px solid var(--line);
  }
  .mobile-cta .btn{ flex:1; padding:14px 12px; font-size:.9rem; }
  body{ padding-bottom:78px; }
}

/* ---------- Misc ---------- */
.pill-row{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{ font-size:.8rem; font-weight:700; border:1px solid var(--line); border-radius:999px; padding:7px 15px; background:var(--paper); color:#4a4038; text-decoration:none; }
.pill:hover{ border-color:var(--clay); color:var(--clay); }
.tag{ display:inline-block; background:var(--pale); color:var(--teal-ink); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:6px 13px; }
.tag.orange{ background:#FDEBCF; color:#8a5a0a; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.placeholder{ border:1.5px dashed var(--clay-soft); background:#FFF9F4; border-radius:16px; padding:20px 24px; font-size:.88rem; color:#8a5a44; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Campaign / standalone offer page ---------- */
.campaign{ background:var(--cream); }
.campaign-top{ padding:20px 0; border-bottom:1px solid var(--line); background:var(--paper); }
.campaign-top .container{ display:flex; align-items:center; justify-content:center; }
.campaign-logo{ height:72px; width:auto; }
.campaign-hero{ padding:56px 0 64px; }
.campaign-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px; }
.campaign-badges .pill{ background:var(--blush); border-color:transparent; color:var(--ink); }
.campaign-badges .pill.hot{ background:var(--orange); }
.terms{ background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--orange); border-radius:16px; padding:24px 26px; }
.terms p:last-child{ margin-bottom:0; }
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.price-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px; }
.price-card h4{ margin-bottom:.2em; }
.price-card .amount{ font-family:"Fraunces",serif; font-size:1.7rem; color:var(--teal-ink); }
.price-card .meta{ font-size:.8rem; color:var(--muted); line-height:1.5; }
.price-card.feature{ border-color:var(--teal); box-shadow:0 12px 30px rgba(28,110,114,.12); }
.obj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.obj{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px; }
.obj h4{ font-size:1.05rem; margin-bottom:.4em; }
.obj p{ font-size:.95rem; color:#4c4139; margin:0; }
.campaign-video{ width:100%; display:block; border-radius:18px; box-shadow:0 18px 44px rgba(36,31,27,.14); background:#000; }
.shots{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.shots figure{ margin:0; }
.shots img{ width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:18px; border:1px solid var(--line); }
.shots figcaption{ font-size:.85rem; color:var(--muted); margin-top:10px; line-height:1.6; }
.price-card .save{ display:inline-block; background:var(--orange); color:var(--ink); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:4px 10px; margin-bottom:10px; }
.price-card s{ color:var(--muted); font-family:"DM Sans",sans-serif; font-size:1rem; margin-right:8px; }
.price-card .amount small{ font-size:.8rem; color:var(--muted); font-family:"DM Sans",sans-serif; }
@media(max-width:820px){ .shots{ grid-template-columns:1fr; } }
.campaign-sticky{ display:none; }
.campaign-footer{ background:var(--teal-ink); color:#CBD9D8; padding:30px 0; font-size:.82rem; line-height:1.7; }
.campaign-footer a{ color:#CBD9D8; }
.campaign-footer .container{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
@media(max-width:820px){
  .obj-grid{ grid-template-columns:1fr; }
  .campaign-logo{ height:56px; }
  body.campaign{ padding-bottom:80px; }
  .campaign-sticky{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120; padding:11px 14px; gap:10px; background:var(--cream); background:color-mix(in srgb,var(--cream) 94%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); }
  .campaign-sticky .btn{ flex:1; }
}

/* ---------- Mobile polish ---------- */
@media(max-width:860px){
  .hero-figure .badge-float{ left:12px; right:12px; bottom:14px; max-width:none; }
}
@media(max-width:760px){
  section{ padding:60px 0; }
  .hero{ padding:40px 0 46px; }
  h1{ font-size:clamp(2.1rem,8vw,3rem); }
  h2{ font-size:clamp(1.7rem,6vw,2.3rem); }
  .banner .cap{ font-size:1.1rem; left:18px; right:18px; bottom:16px; }
  .cta-band h2{ font-size:clamp(1.6rem,6vw,2.2rem); }
}