/* =========================================================
   Pawse & Plan — Belgian Dog Budget Guide
   Design: warm cream + terracotta, editorial serif display
   ========================================================= */

:root{
  --cream-50:#FDFAF4;
  --cream-100:#FBF7F1;
  --cream-200:#F5EFE5;
  --cream-300:#EDE3D2;
  --cream-400:#DCCEB6;

  --ink-900:#1F1A14;
  --ink-700:#2A2520;
  --ink-500:#5C544A;
  --ink-400:#7A6F62;
  --ink-300:#A89E8E;

  --orange-100:#FCEBD9;
  --orange-300:#F1B488;
  --orange-500:#D9622C;
  --orange-600:#BB4F1F;
  --orange-700:#8E3A14;

  --olive:#6B6A45;
  --moss:#3F4A2E;

  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .06), 0 2px 6px rgba(60, 40, 20, .04);
  --shadow-md: 0 6px 24px -8px rgba(60, 40, 20, .18), 0 2px 6px rgba(60, 40, 20, .06);
  --shadow-lg: 0 24px 60px -20px rgba(60, 40, 20, .25), 0 6px 16px rgba(60, 40, 20, .08);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --font-display:"Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --font-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --gutter: clamp(20px, 4vw, 48px);

  --ease: cubic-bezier(.2,.7,.2,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-700);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:var(--orange-600); text-decoration:none; }
a:hover{ color:var(--orange-700); }

::selection{ background:var(--orange-500); color:var(--cream-50); }

.container{ width:min(100% - 2 * var(--gutter), var(--container)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; padding:.75rem 1rem;
  background:var(--ink-900); color:var(--cream-50); border-radius:0 0 var(--radius-sm) 0;
  z-index:100;
}
.skip-link:focus{ left:0; }

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.6rem, 5.5vw + .5rem, 5rem);
  line-height:1.02;
  letter-spacing:-0.022em;
  color:var(--ink-900);
  margin:0 0 1rem;
  font-variation-settings: "opsz" 144;
}
.display--center{ text-align:center; }
.display__accent{
  display:block;
  font-style:italic;
  font-weight:400;
  color:var(--orange-600);
}

.h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.9rem, 2.6vw + 1rem, 3rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--ink-900);
  margin:0 0 1rem;
}
.h2 em{ font-style:italic; color:var(--orange-600); font-weight:400; }

.h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.4rem, 1.4vw + 1rem, 1.9rem);
  line-height:1.15;
  letter-spacing:-0.015em;
  color:var(--ink-900);
  margin:0 0 .5rem;
}

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--orange-600);
  margin:0 0 1rem;
}
.kicker::before{
  content:""; width:24px; height:1px; background:currentColor; opacity:.7;
}

.eyebrow{
  display:inline-block;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--ink-500);
  padding:.4rem .75rem;
  border:1px solid var(--cream-400);
  border-radius:999px;
  background:var(--cream-50);
}

.lede{
  font-size:clamp(1.05rem, .4vw + 1rem, 1.2rem);
  line-height:1.6;
  color:var(--ink-500);
  max-width:60ch;
  margin:0 0 1.5rem;
}

.micro{ font-size:.82rem; color:var(--ink-400); margin:.6rem 0 0; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--orange-500); --fg:var(--cream-50); --bd:var(--orange-500);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.4rem;
  font-weight:600; font-size:.97rem;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn svg{ transition: transform .25s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

.btn--primary{ --bg:var(--orange-500); --fg:#fff; --bd:var(--orange-500); }
.btn--primary:hover{ --bg:var(--orange-600); --bd:var(--orange-600); color:#fff; }

.btn--outline{ --bg:transparent; --fg:var(--ink-900); --bd:var(--ink-900); }
.btn--outline:hover{ --bg:var(--ink-900); --fg:#fff; color:#fff; }

.btn--ghost{ --bg:var(--cream-200); --fg:var(--ink-900); --bd:transparent; }
.btn--ghost:hover{ --bg:var(--cream-300); }

.btn--sm{ padding:.55rem .95rem; font-size:.86rem; }
.btn--lg{ padding:1.1rem 1.75rem; font-size:1.02rem; }
.btn--block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,241,.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--cream-300);
  background:rgba(251,247,241,.94);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .8rem 0;
}
.brand{ display:inline-flex; align-items:center; gap:.7rem; color:var(--ink-900); }
.brand:hover{ color:var(--ink-900); }
.brand__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--cream-50); border:1px solid var(--cream-300);
}
.brand__name{
  font-family:var(--font-display); font-size:1.25rem; font-weight:500;
  letter-spacing:-0.01em;
}
.brand__name em{ font-style:italic; color:var(--orange-600); }
.brand__name--light{ color:var(--cream-100); }
.brand__name--light em{ color:var(--orange-300); }

.site-nav{ display:flex; gap:1.6rem; align-items:center; }
.site-nav a{
  font-size:.95rem; font-weight:500; color:var(--ink-700);
  position:relative; padding:.25rem 0;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:1.5px; background:var(--orange-500);
  transform: scaleX(0); transform-origin:left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover{ color:var(--ink-900); }
.site-nav a:hover::after{ transform: scaleX(1); }

.header__cta{ margin-left:.5rem; }

.nav-toggle{
  display:none;
  width:42px; height:42px; padding:10px;
  background:transparent; border:1px solid var(--cream-400); border-radius:12px;
}
.nav-toggle span{
  display:block; height:2px; background:var(--ink-900); border-radius:2px;
  margin:3px 0; transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:.25rem;
  padding: .5rem var(--gutter) 1.25rem;
  border-top:1px solid var(--cream-300);
  background:var(--cream-100);
}
.mobile-nav a{
  padding:.85rem .25rem; color:var(--ink-700); font-weight:500;
  border-bottom:1px solid var(--cream-200);
}
.mobile-nav.is-open{ display:flex; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: clamp(2.5rem, 5vw, 5rem) 0 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, var(--orange-100) 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, var(--cream-200) 0%, transparent 55%),
    var(--cream-100);
  overflow:hidden;
}
.hero__grain{
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(80,50,20,.08) 1px, transparent 1.4px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity:.45;
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items:center;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero__copy{ position:relative; z-index:2; }
.hero__copy .eyebrow{ margin-bottom:1.25rem; opacity:0; animation: fadeUp .8s var(--ease) .1s forwards; }
.hero__copy .display{ opacity:0; animation: fadeUp .9s var(--ease) .25s forwards; }
.hero__copy .lede{ opacity:0; animation: fadeUp .9s var(--ease) .4s forwards; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.5rem; opacity:0; animation: fadeUp .9s var(--ease) .55s forwards; }
.hero__chips{
  list-style:none; padding:0; margin: 2.25rem 0 0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
  border-top:1px solid var(--cream-300);
  padding-top:1.5rem;
  opacity:0; animation: fadeUp .9s var(--ease) .7s forwards;
}
.hero__chips li{ display:flex; flex-direction:column; gap:.15rem; }
.hero__chips strong{
  font-family:var(--font-display); font-size:1.45rem; font-weight:500;
  color:var(--ink-900); letter-spacing:-0.01em;
}
.hero__chips span{ font-size:.82rem; color:var(--ink-400); }

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(18px); }
  to  { opacity:1; transform: translateY(0); }
}

.hero__art{
  position:relative; margin:0;
  opacity:0; animation: fadeUp 1s var(--ease) .35s forwards;
}
.hero__art-frame{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: 50% 48% 52% 50% / 48% 50% 50% 52%;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--orange-100), transparent 60%),
    var(--cream-200);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--cream-300);
}
.hero__art-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero__svg{
  position:absolute; inset:0; width:100%; height:100%;
}
.hero__art-frame:not(.no-photo) .hero__svg{ display:none; }

.hero__caption{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1rem; font-size:.85rem; color:var(--ink-500); font-style:italic;
}
.hero__caption .dot{
  width:8px; height:8px; border-radius:50%; background:var(--orange-500);
  box-shadow: 0 0 0 4px var(--orange-100);
}

/* Marquee */
.marquee{
  position:relative;
  border-top:1px solid var(--cream-300);
  border-bottom:1px solid var(--cream-300);
  padding:.7rem 0;
  background:var(--cream-50);
  overflow:hidden;
}
.marquee__track{
  display:flex; gap:3rem; white-space:nowrap;
  animation: scroll-x 38s linear infinite;
  font-family:var(--font-display); font-style:italic; font-size:1.1rem;
  color:var(--ink-500);
  letter-spacing:.02em;
}
@keyframes scroll-x{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ---------- Section base ---------- */
.section{
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  position:relative;
}

.section-head{ max-width:60ch; margin: 0 0 2.5rem; }
.section-head--center{ text-align:center; margin-inline:auto; }
.section-head__lede{ color:var(--ink-500); font-size:1.05rem; margin:.25rem 0 0; }

/* ---------- Intro ---------- */
.intro{
  background:
    linear-gradient(to bottom, var(--cream-100), var(--cream-50));
}
.intro__grid{
  display:grid; grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items:start;
}
.intro__grid .kicker{ grid-column:1; }
.intro__grid .h2{ grid-column:2; grid-row:1 / span 2; }
.intro__body{ grid-column:2; }
.intro__body p + p{ margin-top:1rem; }

/* ---------- Cost cards ---------- */
.costs{ background: var(--cream-50); }
.cost-grid{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(.9rem, 1.4vw, 1.25rem);
}
.cost-card{
  grid-column: span 4;
  position:relative;
  padding: 1.6rem 1.4rem 1.5rem;
  background:#fff;
  border:1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow:hidden;
}
.cost-card::after{
  content:""; position:absolute; inset:auto -40% -40% auto;
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(closest-side, var(--orange-100), transparent 70%);
  opacity:.0;
  transition: opacity .35s var(--ease);
}
.cost-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-300);
}
.cost-card:hover::after{ opacity:1; }

.cost-card__icon{
  width:46px; height:46px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--cream-200);
  color: var(--orange-600);
  margin-bottom:1rem;
}
.cost-card__icon svg{ width:24px; height:24px; }
.cost-card__title{
  font-family:var(--font-display); font-weight:500;
  font-size:1.2rem; letter-spacing:-0.01em; color:var(--ink-900);
  margin:0 0 .35rem;
}
.cost-card__range{
  font-family:var(--font-display); font-weight:500;
  font-size:1.5rem; color:var(--orange-600); letter-spacing:-0.01em;
  margin: .2rem 0 .35rem; display:flex; align-items:baseline; gap:.5rem;
}
.cost-card__range span{
  font-family:var(--font-body); font-size:.78rem; color:var(--ink-400);
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.cost-card__note{ font-size:.93rem; color:var(--ink-500); margin:0; }

.cost-card--feature{
  background: linear-gradient(160deg, var(--ink-900), #2c241b 60%, var(--ink-700));
  color: var(--cream-200);
  border-color: var(--ink-900);
}
.cost-card--feature .cost-card__title{ color:var(--cream-50); }
.cost-card--feature .cost-card__note{ color: var(--cream-300); }
.cost-card--feature .cost-card__icon{
  background: rgba(255,255,255,.08);
  color: var(--orange-300);
}
.cost-card--feature .cost-card__range{ color: var(--orange-300); }

/* ---------- Calculator ---------- */
.calculator{
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3vw, 3rem);
  position:relative;
  overflow:hidden;
}
.calculator::before{
  content:""; position:absolute; inset:auto -10% -40% -10%; height:60%;
  background: radial-gradient(closest-side, rgba(217,98,44,.25), transparent 70%);
  pointer-events:none;
}
.calculator__intro .kicker{ color: var(--orange-300); }
.calculator__intro h3{ color:#fff; }
.calculator__intro p{ color:var(--cream-300); max-width:38ch; }

.calculator__panel{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  position:relative; z-index:1;
}
.calc-row{ margin-bottom:1.1rem; }
.calc-row label{
  display:block; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--cream-300); margin-bottom:.5rem; font-weight:600;
}
.calc-row__legend{
  display:flex; justify-content:space-between; margin-top:.3rem;
  font-size:.74rem; color: var(--ink-300);
}

.seg{
  display:inline-flex; background: rgba(255,255,255,.06);
  padding:4px; border-radius:999px; gap:2px;
}
.seg button{
  background:transparent; border:0; color: var(--cream-200);
  padding:.55rem 1rem; border-radius:999px; font-weight:500; font-size:.9rem;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.seg button.is-active{
  background: var(--orange-500); color:#fff;
}
.seg--two button{ min-width:78px; text-align:center; }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background: linear-gradient(to right, var(--orange-500) 0%, var(--orange-500) var(--p,50%), rgba(255,255,255,.12) var(--p,50%));
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid var(--orange-500);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid var(--orange-500);
  cursor:pointer;
}

.calc-result{
  margin-top:1.4rem;
  padding:1.1rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
  color:#fff;
  display:flex; flex-direction:column; gap:.15rem;
}
.calc-result__label{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85;
}
.calc-result__value{
  font-family:var(--font-display); font-weight:500; font-size: clamp(1.6rem, 1.6vw + 1rem, 2.4rem);
  letter-spacing:-0.015em; line-height:1.1;
}
.calc-result__hint{ font-size:.82rem; opacity:.85; }

/* ---------- Financing ---------- */
.financing{
  background:
    linear-gradient(to bottom, var(--cream-50), var(--cream-100));
}
.financing__grid{
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items:center;
}
.financing__chart{
  background:#fff; padding:1.5rem; border-radius: var(--radius-lg);
  border:1px solid var(--cream-300);
  box-shadow: var(--shadow-sm);
}
.financing__chart-label{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink-400); font-weight:600;
  display:block; margin-bottom:1rem;
}
.bars{
  display:flex; align-items:flex-end; gap:.75rem; height:180px;
  padding-bottom:1.75rem; position:relative;
  border-bottom:1px dashed var(--cream-400);
}
.bar{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  height:100%;
}
.bar span{
  width:100%; max-width:36px; border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, var(--orange-500), var(--orange-300));
  transition: height 1s var(--ease);
}
.bar em{
  font-style:normal; font-size:.78rem; color:var(--ink-500);
  position:absolute; bottom:0; transform: translateY(100%);
  padding-top:.4rem;
}

.bullets{ list-style:none; padding:0; margin:1.25rem 0; display:grid; gap:.85rem; }
.bullets li{
  position:relative; padding-left:1.6rem;
  font-size:1rem; color:var(--ink-500);
}
.bullets li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:8px; height:8px; border-radius:2px; transform: rotate(45deg);
  background: var(--orange-500);
}

.callout{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:1rem 1.15rem; margin:1.5rem 0;
  background: var(--cream-200);
  border-left:3px solid var(--orange-500);
  border-radius: var(--radius-md);
  font-size:.96rem; color:var(--ink-700);
}
.callout__mark{
  flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  background:var(--orange-500); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-weight:500;
}

/* ---------- Credit topic (Belgian consumer credit / Crelan) ---------- */
.credit{
  background:
    radial-gradient(900px 500px at 85% 0%, var(--cream-200), transparent 60%),
    var(--cream-100);
  position:relative;
}
.credit::before{
  content:""; position:absolute; left:0; top:0; right:0; height:1px;
  background: linear-gradient(to right, transparent, var(--cream-300), transparent);
}
.credit__grid{
  display:grid; grid-template-columns: 1.45fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items:start;
}
.credit__main p{ margin: 0 0 1rem; font-size: 1.02rem; color: var(--ink-700); }
.credit__main p:last-child{ margin-bottom: 0; }
.credit__main em{ font-style: italic; color: var(--orange-700); }
.credit__main abbr{ text-decoration: none; border-bottom: 1px dotted var(--ink-400); cursor: help; }

.credit__facts{
  background:#fff;
  border:1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem 1.4rem;
  position: sticky; top: 96px;
  box-shadow: var(--shadow-sm);
}
.credit__facts .h3{ margin-bottom: 1rem; font-size: 1.35rem; }
.fact-list{ margin:0; display:grid; gap: 0; }
.fact{
  display:grid; grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px dashed var(--cream-400);
}
.fact:first-child{ border-top: 0; padding-top: 0; }
.fact:last-child{ padding-bottom: 0; }
.fact dt{
  font-size: .74rem; letter-spacing:.12em; text-transform: uppercase;
  font-weight: 600; color: var(--orange-600);
  margin: 0; padding-top:.15em;
}
.fact dd{
  margin:0; font-size: .94rem; color: var(--ink-500); line-height: 1.55;
}
.fact dd strong{ color: var(--ink-900); font-weight:600; }

.credit__example{
  margin-top: clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(600px 300px at 100% 0%, var(--orange-100), transparent 60%),
    linear-gradient(160deg, var(--cream-50), var(--cream-200));
  border:1px solid var(--cream-300);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display:grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  position:relative;
  overflow:hidden;
}
.credit__example::after{
  content:""; position:absolute; right:-40px; bottom:-40px;
  width: 220px; height:220px; border-radius:50%;
  border: 1px dashed var(--orange-300);
  opacity:.5;
  pointer-events:none;
}
.credit__example-head{ position:relative; }
.credit__example-head .kicker{ margin-bottom: .35rem; }
.credit__example-head .h3{
  font-size: clamp(1.8rem, 1.8vw + 1rem, 2.6rem);
  margin: 0 0 .85rem;
  font-style: italic;
}
.credit__badge{
  display:inline-block;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color: var(--ink-500);
  padding: .35rem .65rem;
  border: 1px solid var(--cream-400);
  background: var(--cream-50);
  border-radius:999px;
}
.credit__example-body p{ margin: 0 0 .85rem; color: var(--ink-700); font-size: 1rem; }
.credit__example-body .checklist{ margin: .5rem 0 1.25rem; }
.checklist--compact li{ font-size: .94rem; color: var(--ink-700); }
.credit__example-actions{
  display:flex; align-items:center; gap: .65rem .8rem; flex-wrap: wrap;
  margin-top: .25rem;
}
.credit__example-actions .btn{ flex: 0 1 auto; }
.credit__example-actions + .micro{ margin: .85rem 0 0; }
@media (max-width: 560px){
  .credit__example-actions .btn{ flex: 1 1 100%; }
}

.credit__disclaimer{
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 1rem 1.15rem;
  background: var(--cream-200);
  border-left: 3px solid var(--ink-400);
  border-radius: var(--radius-md);
  font-size: .9rem; color: var(--ink-500);
  max-width: 90ch;
}
.credit__disclaimer strong{ color: var(--ink-900); }

@media (max-width: 960px){
  .credit__grid{ grid-template-columns: 1fr; }
  .credit__facts{ position: static; }
  .credit__example{ grid-template-columns: 1fr; }
  .fact{ grid-template-columns: 110px 1fr; }
}
@media (max-width: 480px){
  .fact{ grid-template-columns: 1fr; gap:.2rem; }
  .fact dt{ padding-top:0; }
}

/* ---------- Alternative ---------- */
.alternative{ background: var(--cream-100); }
.alternative__grid{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items:center;
}
.checklist{ list-style:none; padding:0; margin:1rem 0 1.75rem; display:grid; gap:.65rem; }
.checklist li{
  position:relative; padding-left:1.9rem; color:var(--ink-700);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:18px; height:18px; border-radius:50%;
  background: var(--orange-100);
  border:1.5px solid var(--orange-500);
}
.checklist li::after{
  content:""; position:absolute; left:5px; top:.85em;
  width:8px; height:4px;
  border-left:2px solid var(--orange-600);
  border-bottom:2px solid var(--orange-600);
  transform: rotate(-45deg);
}

.alternative__art{ margin:0; }
.postcard{
  position:relative;
  background:#fff;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border:1px solid var(--cream-300);
  transform: rotate(-2deg);
  transition: transform .4s var(--ease);
}
.postcard:hover{ transform: rotate(0deg) translateY(-4px); }
.postcard svg{ display:block; width:100%; height:auto; border-radius: var(--radius-md); }
.postcard__stamp{
  position:absolute; top:18px; right:18px;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  background:var(--cream-50); border:1px dashed var(--ink-400);
  padding:.35rem .6rem; border-radius:6px;
  font-size:.82rem; color:var(--ink-700);
  transform: rotate(6deg);
}
.postcard__caption{
  margin:.85rem .25rem .25rem;
  font-family:var(--font-display); font-style:italic; color:var(--ink-500);
}

/* ---------- Responsible ---------- */
.responsible{
  background:
    linear-gradient(to bottom, var(--cream-100), var(--cream-50));
}
.pillars{
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top:2.5rem;
}
.pillar{
  background:#fff; border:1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  padding:1.5rem 1.25rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
}
.pillar:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar__num{
  display:inline-block;
  font-family:var(--font-display); font-style:italic; font-weight:400;
  color: var(--orange-500); font-size:1.4rem;
  margin-bottom:.5rem;
}
.pillar h3{
  font-family:var(--font-display); font-weight:500; font-size:1.15rem;
  color:var(--ink-900); margin:0 0 .4rem; letter-spacing:-0.01em;
}
.pillar p{ font-size:.94rem; color:var(--ink-500); margin:0; }

/* ---------- FAQ ---------- */
.faq{ background: var(--cream-50); }
.faq__grid{
  display:grid; grid-template-columns: .9fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items:start;
}
.faq__head{ position:sticky; top:88px; }
.faq__head p{ color:var(--ink-500); font-size:1.02rem; }

.faq__list{ display:grid; gap:.75rem; }
.faq-item{
  background:#fff;
  border:1px solid var(--cream-300);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open]{ border-color: var(--orange-300); box-shadow: var(--shadow-sm); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  list-style:none;
  padding: 1.15rem 1.35rem;
  cursor:pointer;
  font-family:var(--font-display); font-weight:500; font-size:1.13rem;
  color: var(--ink-900); letter-spacing:-0.01em;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item__icon{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--cream-200); position:relative;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.faq-item__icon::before,
.faq-item__icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:2px; background: var(--ink-900); border-radius:2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.faq-item__icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon{ background: var(--orange-500); }
.faq-item[open] .faq-item__icon::before,
.faq-item[open] .faq-item__icon::after{ background:#fff; }
.faq-item[open] .faq-item__icon::after{ transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__body{
  padding: 0 1.35rem 1.25rem;
  color:var(--ink-500); font-size: 1rem; line-height:1.65;
}
.faq-item__body p{ margin:0; }

/* ---------- Final CTA ---------- */
.final-cta{
  background:
    radial-gradient(700px 400px at 50% -20%, var(--orange-100), transparent 60%),
    var(--cream-100);
  text-align:center;
}
.final-cta__inner{ max-width: 880px; margin-inline:auto; text-align:center; }
.final-cta .lede{ margin-inline:auto; }
.final-cta__buttons{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
  margin: 2rem 0 1.5rem;
}
.disclosure{
  font-size:.85rem; color:var(--ink-400); max-width:64ch; margin: 1rem auto 0; line-height:1.6;
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(217,98,44,.15), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(217,98,44,.08), transparent 60%),
    var(--ink-900);
  color: var(--cream-300);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 1.75rem;
  overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(to right, transparent, var(--orange-500), transparent);
  opacity:.65;
}

.site-footer__top{
  display:grid; grid-template-columns: 1.2fr 2fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items:start;
}

.site-footer__brand .brand{ display:inline-flex; margin-bottom:.85rem; }
.site-footer__brand .brand__mark{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  width:44px; height:44px;
}
.site-footer__brand .brand__name{ font-size:1.4rem; }
.site-footer__tag{
  margin: .5rem 0 0; max-width:34ch;
  color:var(--ink-300); font-size:.95rem; line-height:1.6;
}
.site-footer__locale{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.25rem;
  font-size:.85rem; color: var(--ink-300);
  letter-spacing:.02em;
}
.site-footer__locale svg{ color: var(--orange-300); }

.site-footer__cols{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.site-footer__col h4{
  font-family:var(--font-display); font-weight:500; font-size:1.05rem;
  color:#fff; margin: 0 0 1rem; letter-spacing:-0.005em;
  position:relative;
  padding-bottom:.6rem;
}
.site-footer__col h4::after{
  content:""; position:absolute; left:0; bottom:0;
  width:22px; height:2px; background: var(--orange-500); border-radius:2px;
}

.site-footer__col a,
.site-footer__col .linklike{
  display:block;
  padding:.32rem 0; color:var(--cream-300); font-size:.93rem;
  background:transparent; border:0; text-align:left;
  font-family: inherit;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.site-footer__col a:hover,
.site-footer__col .linklike:hover{
  color: var(--orange-300);
  transform: translateX(2px);
}

.site-footer__contact{
  display:flex !important; align-items:center; gap:.6rem;
  padding: .35rem 0 !important;
  color: var(--cream-200) !important;
  font-weight:500;
  word-break: break-word;
}
.site-footer__contact svg{
  flex:0 0 auto;
  color: var(--orange-300);
  transition: transform .25s var(--ease);
}
.site-footer__contact:hover{ color: var(--orange-300) !important; }
.site-footer__contact:hover svg{ transform: translateX(1px) translateY(-1px); }

.site-footer__hours{
  margin: .75rem 0 0;
  font-size:.82rem; color: var(--ink-300);
  letter-spacing:.04em;
}

.site-footer__disclosure{
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.15rem 1.35rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  color: var(--ink-300);
  font-size: .88rem;
  line-height: 1.65;
}
.site-footer__disclosure p{ margin:0; }
.site-footer__disclosure strong{
  color: var(--cream-100);
  font-family: var(--font-display); font-style:italic; font-weight:500;
}
.nowrap{ white-space: nowrap; }

.site-footer__bottom{
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--ink-300);
}
.site-footer__copy strong{
  color: var(--cream-100);
  font-family: var(--font-display); font-style:italic; font-weight:500;
}
.site-footer__legal{ color: var(--ink-400); }

@media (max-width: 960px){
  .site-footer__top{ grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__cols{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .site-footer__cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .site-footer__cols{ grid-template-columns: 1fr; }
  .site-footer__bottom{ flex-direction: column; align-items: flex-start; }
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding: .75rem var(--gutter) max(.75rem, env(safe-area-inset-bottom));
  background: rgba(251,247,241,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top:1px solid var(--cream-300);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.sticky-cta.is-visible{ transform: translateY(0); }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left: var(--gutter); right: var(--gutter);
  bottom: 1rem; z-index:70;
  background:var(--ink-900); color:var(--cream-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.25rem;
  transform: translateY(120%);
  opacity:0;
  transition: transform .5s var(--ease), opacity .35s var(--ease);
  max-width: 720px; margin-inline:auto;
}
.cookie-banner.is-visible{ transform: translateY(0); opacity:1; }
.cookie-banner__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.cookie-banner__inner p{ margin:0; font-size:.95rem; }
.cookie-banner__actions{ display:flex; gap:.6rem; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity:1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .site-nav, .header__cta{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; flex-direction:column; }

  .hero__grid{ grid-template-columns: 1fr; padding-bottom: 2.5rem; }
  .hero__art-frame{ max-width: 460px; margin-inline:auto; }
  .hero__chips strong{ font-size:1.2rem; }

  .intro__grid{ grid-template-columns: 1fr; }
  .intro__grid .h2, .intro__grid .kicker, .intro__body{ grid-column: 1; }

  .cost-card{ grid-column: span 6; }

  .calculator{ grid-template-columns: 1fr; }

  .financing__grid,
  .alternative__grid,
  .faq__grid{ grid-template-columns: 1fr; }
  .faq__head{ position:static; }

  .pillars{ grid-template-columns: repeat(2, 1fr); }

  .site-footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .cost-card{ grid-column: span 12; }
  .pillars{ grid-template-columns: 1fr; }
  .hero__chips{ grid-template-columns: 1fr 1fr; }
  .hero__chips li:last-child{ grid-column: span 2; }
  .final-cta__buttons .btn{ width:100%; }

  .site-footer__grid{ grid-template-columns: 1fr; }
  .cookie-banner__inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner__actions{ justify-content:flex-end; }
}

@media (max-width: 420px){
  .brand__name{ font-size:1.1rem; }
  .calc-result__value{ font-size:1.6rem; }
}

/* Print */
@media print{
  .site-header, .sticky-cta, .cookie-banner, .marquee, .nav-toggle{ display:none !important; }
  body{ background:#fff; color:#000; }
  .hero, .section{ padding: 1rem 0; }
}