:root{
  /* surfaces */
  --cream:#FAF7F2; --white:#FFF; --ink:#26211B; --green-dark:#1F4E39;
  --forest:#143224; /* dark section fills (summary card, mobile bar, footer)
                        — distinct from --ink, which stays a text colour */
  /* text */
  --ink-2:#4A4238; --ink-3:#6B6053;
  --cream-text:#F3EDE3; --cream-muted:#CDBFA8; --warm-muted:#9C8F7C;
  --mint-text:#D6E6DC; --mint-muted:#A9C7B4;
  /* brand */
  --green:#2E6B4F; --green-light:#3D9467; --mint:#8FCBAA; --green-tint:#EAF2ED;
  --amber:#D99A3D; --amber-dark:#B4762A; --amber-darker:#8A5A20;
  /* lines */
  --line:#E9E2D6; --line-2:#F0EAE0; --input-border:#D8CFC0;
  /* metrics */
  --maxw:1120px; --pad:24px; --nav-h:70px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
     font-family:'Karla',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Gabarito',sans-serif;text-wrap:pretty}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section[id],header[id],article[id]{scroll-margin-top:var(--nav-h)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:8px;z-index:60;background:var(--white);
            padding:10px 16px;border-radius:10px}

.nav{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.92);
     backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav__inner{padding-block:14px;display:flex;align-items:center;gap:28px}
.logo{font-family:'Gabarito',sans-serif;font-weight:800;font-size:22px;
      color:var(--ink);display:flex;align-items:center}
.logo__mark{width:36px;height:36px;border-radius:10px;background:var(--green);
            color:var(--cream);display:grid;place-items:center;font-size:24px;
            flex:none}
.logo__brand{color:var(--ink)}
.logo__accent{color:var(--green)}

/* Scroll-compact header: the wordmark starts full-size and compresses down
   to just the icon mark once the hero (and its own two CTAs) scrolls out of
   view; the nav CTA does the inverse, growing from an icon-only affordance
   into its full label at the same moment. Driven by .nav.is-scrolled,
   toggled by a scroll listener in main.js (not IntersectionObserver — iOS
   Safari can delay/skip IO callbacks during momentum scrolling, which
   showed up as Chrome working and Safari not). Both sides transition
   together so the header reads as one continuous motion. prefers-reduced-
   motion (base.css) collapses all transitions to .01ms globally, so this
   degrades to an instant swap automatically. */
/* gap, not the HTML whitespace between the two spans — flexbox discards
   whitespace-only text nodes between flex items, so the literal space in
   the markup renders as zero width once this became inline-flex. */
.logo__text{display:inline-flex;gap:.28em;overflow:hidden;white-space:nowrap;
            max-width:220px;margin-left:9px;opacity:1;
            transition:max-width .32s ease,opacity .22s ease,margin-left .32s ease}
.nav.is-scrolled .logo__text{max-width:0;margin-left:0;opacity:0}

/* The icon is drawn in plain CSS — a solid green block with one corner
   less rounded than the others, the standard way a speech-bubble shape is
   drawn without an icon font or SVG — plus three cream dots, the standard
   "someone is typing" motif, so it reads unambiguously as chat. At the top
   of the page that shape *is* the whole clickable element: a small green
   chat-bubble icon-button, no surrounding chrome. On scroll the bubble
   shrinks away as the label grows in — a swap, not an icon-plus-label
   button — and a pill of the same fixed height appears around it.

   Height is fixed at 34px in BOTH states (not just scrolled) so the nav
   bar itself never changes height as the page scrolls — only width
   changes (padding, icon/text max-width), never height. Horizontal-only
   padding at rest still gives the icon a generous tap-target width
   without affecting the row height. */
.nav__cta{display:inline-flex;align-items:center;text-decoration:none;
          font-family:'Karla',sans-serif;font-weight:700;font-size:15px;
          color:var(--cream);background:transparent;border-radius:999px;
          height:36px;padding:0 8px;cursor:pointer;
          transition:background-color .32s ease,padding .32s ease}
.nav__cta:hover{color:var(--cream)} /* pins colour against the global
  a:hover{color:var(--green-dark)} rule, which otherwise wins: a:hover is
  (0,1,1) vs .nav__cta's (0,1,0) — same bug class as the two earlier
  cascade fixes in this file, now caught a third time. */
.nav__cta-icon{width:32px;height:28px;flex:none;overflow:hidden;
               background:var(--green);border-radius:14px 14px 14px 4px;
               display:flex;align-items:center;justify-content:center;
               color:var(--cream);font-size:9px;letter-spacing:2.5px;
               transition:width .28s ease,opacity .2s ease,background-color .32s ease}
.nav__cta:hover .nav__cta-icon{background:var(--green-dark)}
.nav__cta-text{display:inline-flex;overflow:hidden;white-space:nowrap;
               max-width:0;margin-left:0;opacity:0;
               transition:max-width .32s ease,opacity .22s ease,margin-left .32s ease}
.nav.is-scrolled .nav__cta{background:var(--green-dark);padding:0 16px}
.nav.is-scrolled .nav__cta-icon{width:0;opacity:0}
.nav.is-scrolled .nav__cta-text{max-width:160px;margin-left:0;opacity:1}

/* Above 900px there's room for the logo, every nav link, and a full-width
   CTA all at once — the collapse/expand animation exists to solve a space
   problem that only exists below that width. So above it, the button is
   permanently in its "expanded" state and the bubble icon never renders,
   regardless of .is-scrolled. */
@media (min-width:901px){
  .nav__cta{background:var(--green);padding:0 18px}
  .nav__cta:hover{background:var(--green-dark)}
  .nav__cta-icon{display:none}
  .nav__cta-text{max-width:200px;margin-left:0;opacity:1}
}
.nav__links{display:flex;gap:22px;margin-left:auto;align-items:center;
            font-weight:600;font-size:15px}
/* :not(.nav__cta) matters — without it these outrank .nav__cta's own
   colour/display rules (0,2,1 vs 0,1,0), which previously repainted the CTA
   charcoal-on-green and, in the 900px breakpoint below, hid it entirely. */
.nav__links a:not(.nav__cta){color:var(--ink-2)}
.nav__links a:not(.nav__cta):hover{color:var(--green)}
.nav__kitchen{color:var(--amber-dark);font-weight:700}
.nav__kitchen:hover{color:var(--amber-darker)}

.btn{display:inline-block;border-radius:12px;font-weight:700;text-align:center;
     cursor:pointer;font-family:'Karla',sans-serif;white-space:nowrap}
.btn--sm{padding:10px 18px;border-radius:10px;font-size:15px}
.btn--lg{padding:15px 26px;font-size:17px}
.btn--green{background:var(--green);color:var(--cream)}
.btn--green:hover{background:var(--green-dark);color:var(--cream)}
.btn--ghost{background:var(--white);border:1.5px solid var(--input-border);color:var(--ink)}
.btn--ghost:hover{border-color:var(--green);color:var(--green)}
.hero__cta .btn--green{box-shadow:0 4px 14px rgba(46,107,79,.25)}

.hero{padding-block:64px 56px;display:grid;grid-template-columns:1.05fr .95fr;
      gap:48px;align-items:center}
.hero__text{display:flex;flex-direction:column;gap:22px;min-width:0}
.badge{display:flex;align-items:center;gap:8px;background:var(--white);
       border:1px solid var(--line);border-radius:999px;padding:7px 14px;
       width:max-content;font-size:14px;font-weight:700;color:var(--green)}
.badge__dot{width:9px;height:9px;border-radius:50%;background:var(--green-light);
            animation:pulseDot 1.6s infinite}
.hero h1{font-weight:800;font-size:clamp(36px,6.5vw,52px);line-height:1.08;margin:0}
.accent{color:var(--green)}
.hero__lead{font-size:clamp(16px,2.2vw,19px);line-height:1.6;color:var(--ink-2);
            margin:0;max-width:52ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__ticks{display:flex;gap:26px;flex-wrap:wrap;padding-top:6px;
             font-size:14.5px;color:var(--ink-3);font-weight:600}
.hero__media{position:relative;min-width:0}
.hero__media img{width:100%;height:440px;object-fit:cover;border-radius:20px}
.hero__badge{position:absolute;bottom:-18px;left:-18px;background:var(--white);
             border:1px solid var(--line);border-radius:14px;padding:14px 18px;
             box-shadow:0 8px 24px rgba(38,33,27,.1);display:flex;
             align-items:center;gap:12px;pointer-events:none;
             font-size:13.5px;line-height:1.35;color:var(--ink-2);font-weight:600}
.hero__badge-num{font-family:'Gabarito',sans-serif;font-weight:800;
                 font-size:30px;color:var(--green)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px;padding-block:40px 44px}
  .nav__links a:not(.nav__cta){display:none}
  .nav__inner{gap:16px}
  :root{--nav-h:60px}
}
@media (max-width:600px){
  .hero__media img{height:260px}
  .hero__badge{left:0;bottom:-14px;padding:12px 14px}
  .hero__ticks{gap:14px}
  /* The logo and CTA are never both at full size at once any more — the
     scroll-compact behaviour above means whichever one is expanded, the
     other has shrunk to make room. The collapsed CTA is now a bare icon
     (no button chrome), which frees up more width than a pill ever did,
     so the logo can sit close to its desktop size here. */
  .logo{font-size:21px}
  .logo__text{margin-left:6px;max-width:220px}
  .logo__mark{width:33px;height:33px;font-size:19px;border-radius:9px}
  .nav__inner{gap:10px}
  .nav__cta{height:33px;font-size:13.5px}
  .nav__cta-icon{width:29px;height:25px}
  .nav.is-scrolled .nav__cta{padding:0 14px}
  .nav.is-scrolled .nav__cta-text{max-width:140px}
}

.trust{border-block:1px solid var(--line);background:var(--white)}
.trust__grid{padding-block:26px;display:grid;grid-template-columns:repeat(4,1fr)}
.trust__item{display:flex;align-items:center;gap:12px;padding:6px 24px;
             border-right:1px solid var(--line);min-width:0;
             font-size:14.5px;font-weight:600;color:var(--ink-2);line-height:1.35}
.trust__item:first-child{padding-left:0}
.trust__item:last-child{padding-right:0;border-right:none}
.trust__tick{flex:none;width:26px;height:26px;border-radius:50%;
             background:var(--green-tint);color:var(--green);
             display:grid;place-items:center;font-weight:800;font-size:14px}

.band{padding-block:72px 8px}
.band__title{font-weight:800;font-size:clamp(26px,4.5vw,34px);margin:0 0 10px;
             text-align:center}
.band__sub{text-align:center;color:var(--ink-3);margin:0 0 40px;font-size:17px}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--tight{gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;
      padding:28px}
.card h3{font-weight:700;font-size:20px;margin:0 0 8px}
.card p{margin:0;color:var(--ink-2);line-height:1.55;font-size:15.5px}
.card__pill{font-family:'Gabarito',sans-serif;font-weight:800;font-size:15px;
            color:var(--green);background:var(--green-tint);width:max-content;
            padding:5px 12px;border-radius:999px;margin-bottom:14px}
.card--service{padding:24px;display:flex;flex-direction:column;gap:10px}
.card--service:hover{border-color:var(--green);box-shadow:0 6px 18px rgba(38,33,27,.07)}
.card--service h3{font-size:18.5px;margin:0}
.card--service p{font-size:14.5px;line-height:1.5}
.card__icon{font-size:28px}

@media (max-width:900px){
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .trust__item:nth-child(2n){border-right:none;padding-right:0}
  .trust__item:nth-child(2n+1){padding-left:0}
  .band{padding-block:48px 8px}
}
@media (max-width:600px){
  .trust__grid{grid-template-columns:1fr}
  .trust__item{border-right:none;padding-inline:0}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
         overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kitchen{background:var(--green-dark);margin-top:72px;color:var(--cream-text)}
.kitchen__grid{padding-block:64px;display:grid;grid-template-columns:1.05fr .95fr;
               gap:44px;align-items:center}
.kitchen__pitch{display:flex;flex-direction:column;gap:16px;min-width:0}
.kitchen h2{font-weight:800;font-size:clamp(26px,5vw,38px);margin:0;line-height:1.12}
.accent-mint{color:var(--mint)}
/* Scoped to the pitch column only. As `.kitchen p` this also matched the two
   paragraphs inside the cream calculator card, repainting them mint-on-cream
   at 1.21:1 and forcing them to 17px. */
.kitchen__pitch p{margin:0;font-size:17px;line-height:1.65;color:var(--mint-text)}
.tag{background:var(--amber);color:var(--ink);font-family:'Gabarito',sans-serif;
     font-weight:800;font-size:13.5px;letter-spacing:.04em;padding:6px 14px;
     border-radius:999px;width:max-content;text-transform:uppercase}
.ticklist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
          gap:9px;font-size:15.5px}

.kcalc{background:var(--cream);color:var(--ink);border-radius:18px;padding:30px;
       display:flex;flex-direction:column;gap:14px;min-width:0}
.kcalc h3{font-weight:700;font-size:20px;margin:0}
.kcalc__hint{margin:0;font-size:14px;color:var(--ink-3);line-height:1.5}
.kcalc__input{display:flex;align-items:center;gap:10px;background:var(--white);
              border:1.5px solid var(--input-border);border-radius:12px;padding:4px 16px}
.kcalc__input input{flex:1;border:none;font-family:'Gabarito',sans-serif;
                    font-weight:800;font-size:26px;color:var(--ink);background:none;
                    padding:9px 0;min-width:0}
.kcalc__input span{font-weight:700;color:var(--ink-3)}
.kcalc__result{display:flex;flex-direction:column;gap:6px;background:var(--green-tint);
               border-radius:12px;padding:16px 18px}
.kcalc__result[hidden]{display:none}
.kcalc__result>div{display:flex;justify-content:space-between;align-items:baseline;
                   font-size:15px}
.kcalc__result strong{font-family:'Gabarito',sans-serif;font-size:22px;color:var(--green-dark)}
.kcalc__save{color:var(--amber-darker)}
.kcalc__save strong{color:inherit}
.kcalc__cta{padding:15px 22px;font-size:16px}
.kcalc__cta:hover{background:var(--ink)}
.kcalc__fine{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5}

.orrow{display:flex;gap:14px;align-items:center;justify-content:center;
       font-size:13.5px;color:var(--ink-3)}
.orrow button{background:none;border:none;color:var(--green);font-weight:700;
              cursor:pointer;text-decoration:underline;font-family:'Karla',sans-serif;
              font-size:13.5px;padding:0}
.orrow__ok{margin:0;font-size:13px;font-weight:700;color:var(--green-dark);text-align:center}

@media (max-width:900px){
  .kitchen__grid{grid-template-columns:1fr;gap:32px;padding-block:44px}
  .kitchen{margin-top:48px}
}

.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.calc__list{background:var(--white);border:1px solid var(--line);
            border-radius:18px;overflow:hidden}
.crow{display:flex;align-items:center;gap:14px;padding:15px 22px;
      border-bottom:1px solid var(--line-2)}
.crow__icon{font-size:22px;width:30px;text-align:center}
.crow__label{flex:1;min-width:0}
.crow__name{font-weight:700;font-size:15.5px}
.crow__unit{font-size:13.5px;color:var(--ink-3)}
.calc__note{margin:0;padding:14px 22px;font-size:13.5px;color:var(--ink-3);
            background:var(--cream)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:34px;height:34px;border-radius:9px;
                border:1.5px solid var(--input-border);background:var(--cream);
                font-size:18px;font-weight:700;color:var(--ink-2);cursor:pointer;
                font-family:'Karla',sans-serif}
.stepper button:hover{border-color:var(--green);color:var(--green)}
.stepper output{width:22px;text-align:center;font-weight:800;
                font-family:'Gabarito',sans-serif;font-size:17px}

.summary{background:var(--forest);color:var(--cream-text);border-radius:18px;
         padding:28px;position:sticky;top:86px;
         display:flex;flex-direction:column;gap:16px}
.summary h3{font-weight:700;font-size:20px;margin:0}
.summary__total{font-family:'Gabarito',sans-serif;font-weight:800;font-size:44px;
                color:var(--mint)}
.summary__min{margin:0;font-size:14px;color:var(--cream-muted);line-height:1.5}
.summary__terms{margin:0;padding:0;list-style:none;display:flex;
                flex-direction:column;gap:8px;font-size:14.5px;color:var(--cream-muted)}
.summary__terms strong{color:var(--cream-text)}
.summary__cta{padding:15px 22px;font-size:16.5px}
.summary__cta:hover{background:var(--green-light)}
.summary__fine{margin:0;font-size:12.5px;color:var(--cream-muted);line-height:1.5}
.orrow--dark{color:var(--cream-muted)}
.orrow--dark button{color:var(--mint)}
.orrow__ok--dark{color:var(--mint)}

.mobilebar{display:none}

@media (max-width:900px){
  .calc{grid-template-columns:1fr}
  .summary{position:static}
  .mobilebar{display:flex;position:fixed;inset:auto 0 0 0;z-index:40;
             align-items:center;justify-content:space-between;gap:12px;
             background:var(--forest);color:var(--cream-text);
             padding:12px var(--pad);
             box-shadow:0 -4px 18px rgba(38,33,27,.18)}
  .mobilebar[hidden]{display:none}
  .mobilebar__total{font-family:'Gabarito',sans-serif;font-weight:800;
                    font-size:22px;color:var(--mint)}
  body:has(.mobilebar){padding-bottom:72px}   /* clears the fixed bar, only present on index.html */
}
@media (pointer:coarse){
  .stepper button{min-width:44px;min-height:44px}
}

.about{background:var(--white);border:1px solid var(--line);border-radius:20px;
       padding:44px;display:grid;grid-template-columns:160px 1fr;gap:40px;
       align-items:center}
.about__photo{width:160px;height:160px;border-radius:50%;object-fit:cover;
              object-position:center 33%}
.about__text{display:flex;flex-direction:column;gap:14px}
.about h2{font-weight:800;font-size:clamp(24px,4vw,30px);margin:0}
.about p{margin:0;color:var(--ink-2);line-height:1.65;font-size:16.5px}
.pills{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;font-weight:700;
       color:var(--green)}
.pills span{background:var(--green-tint);padding:7px 14px;border-radius:999px}

.guarantee{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.guarantee .card{padding:26px}
.guarantee .card h3{font-size:19px}
.guarantee .card p{font-size:15px}
.card--highlight{border:1.5px solid var(--green);background:var(--green-tint)}
.card--highlight h3{color:var(--green-dark)}
.card--highlight p{color:#3A4A40}

.faq{max-width:820px;margin:0 auto;padding:80px var(--pad) 8px}
.faq h2{font-weight:800;font-size:clamp(26px,4.5vw,34px);margin:0 0 10px;text-align:center}
.faq>p{text-align:center;color:var(--ink-3);margin:0 0 36px;font-size:17px}
.faq__list{display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--white);border:1px solid var(--line);
           border-radius:14px;overflow:hidden}
.faq__item h3{margin:0;font:inherit}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;
        gap:16px;padding:18px 22px;background:none;border:none;cursor:pointer;
        font-family:'Karla',sans-serif;font-weight:700;font-size:16.5px;
        text-align:left;color:var(--ink)}
.faq__q:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.faq__mark{font-family:'Gabarito',sans-serif;font-size:20px;color:var(--green)}
.faq__q[aria-expanded="false"] .faq__mark::before{content:"+"}
.faq__q[aria-expanded="true"]  .faq__mark::before{content:"−"}
.faq__a p{margin:0;padding:0 22px 18px;color:var(--ink-2);line-height:1.6;
          font-size:15.5px}

@media (max-width:900px){
  .about{grid-template-columns:1fr;justify-items:center;text-align:center;padding:32px}
  .about__photo{width:140px;height:140px}
  .about .pills{justify-content:center}
}

.contact{padding-block:80px 90px}
.contact__grid{background:var(--green);border-radius:22px;padding:52px;
               display:grid;grid-template-columns:1.1fr .9fr;gap:44px;
               align-items:center;color:var(--cream-text)}
.contact__text{display:flex;flex-direction:column;gap:14px}
.contact h2{font-weight:800;font-size:clamp(26px,4.5vw,34px);margin:0;line-height:1.15}
.contact__text>p{margin:0;font-size:17px;line-height:1.6;color:var(--mint-text)}
.contact__channels{display:flex;gap:12px;flex-wrap:wrap}
.contact__channels .btn{padding:15px 24px;font-size:16px;font-weight:800;
                        font-family:'Gabarito',sans-serif}
.btn--cream{background:var(--cream-text);color:var(--green-dark)}
.btn--cream:hover{background:var(--white);color:var(--green-dark)}
.btn--translucent{background:rgba(250,247,242,.12);
                  border:1.5px solid rgba(250,247,242,.4);color:var(--white)}
.btn--translucent:hover{background:rgba(250,247,242,.22);color:var(--white)}
.contact__fine{margin:0;font-size:13.5px;color:var(--cream-text)}

.contact__card{background:rgba(250,247,242,.08);
               border:1px solid rgba(250,247,242,.2);
               border-radius:16px;padding:28px}
.signup{display:flex;flex-direction:column;gap:12px}
.signup h3{font-weight:700;font-size:19px;margin:0}
.signup p{margin:0;font-size:14.5px;line-height:1.55;color:var(--cream-text)}
.signup__row{display:flex;gap:10px}
/* Required: JS sets row.hidden = true on successful signup. Without this the
   author `display:flex` overrides the UA [hidden] rule and the form stays visible. */
.signup__row[hidden]{display:none}
.signup__row input{flex:1;padding:13px 16px;border-radius:10px;border:none;
                   font-family:'Karla',sans-serif;font-size:15px;
                   background:var(--cream);color:var(--ink);min-width:0}
.signup__row button{background:var(--ink);color:var(--cream-text);border:none;
                    padding:13px 20px;border-radius:10px;font-weight:700;
                    font-size:15px;cursor:pointer;font-family:'Karla',sans-serif}
.signup__row button:hover{background:#3A332B}
.signup__ok{font-weight:700;font-size:15.5px;background:rgba(250,247,242,.15);
            padding:13px 16px;border-radius:10px}
.signup__err{font-weight:700;font-size:14.5px;color:#FFD9C2}
.signup__fine{font-size:12.5px;color:var(--cream-text)}
.signup__fine a{color:var(--cream-text);text-decoration:underline}

.footer{background:var(--forest);color:var(--cream-muted)}
.footer__grid{padding-block:44px;display:grid;grid-template-columns:1.2fr 1fr 1fr;
              gap:36px;font-size:14.5px;line-height:1.7}
.footer p{margin:0;max-width:36ch}
.footer__brand{font-family:'Gabarito',sans-serif;font-weight:800;font-size:20px;
               color:var(--cream-text);margin-bottom:8px}
.footer__head{font-weight:700;color:var(--cream-text);margin-bottom:8px}
.footer a{color:var(--mint)}
.footer__bar{border-top:1px solid #3A332B;padding:16px var(--pad);
             text-align:center;font-size:13px;color:var(--cream-muted)}

@media (max-width:900px){
  .contact__grid,.footer__grid{grid-template-columns:1fr;gap:32px}
  .contact{padding-block:48px 60px}
}
@media (max-width:600px){
  .contact__grid{padding:28px}
  .signup__row{flex-direction:column;align-items:stretch}
  .footer p{max-width:none}
}

.prose{max-width:720px;margin:0 auto;padding:56px var(--pad) 80px}
.prose h1{font-size:clamp(28px,5vw,38px);margin:0 0 24px}
.prose h2{font-size:20px;margin:32px 0 8px}
.prose p,.prose li{color:var(--ink-2);line-height:1.7;font-size:16px}
.prose ul{padding-left:20px}