:root{
  --deep:#0f3b27;
  --sage:#8ea57d;
  --sage-light:#aebd9f;
  --cream:#f6f3eb;
  --paper:#fffdf9;
  --soft:#f2efe8;
  --ink:#1d2b21;
  --muted:#647066;
  --line:#d9ddd4;
  --shadow:0 14px 36px rgba(29,43,33,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,select,textarea{font:inherit}
h1,h2,h3,p{margin-top:0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:8px 8vw;background:var(--deep);color:#fff}
.brand-logo{width:82px;height:auto;filter:brightness(0) invert(1)}
.site-nav{display:flex;align-items:center;gap:24px;font-size:.72rem;text-transform:uppercase}
.nav-button{padding:9px 15px;border-radius:8px;background:var(--sage-light);color:var(--deep);font-weight:700}
.menu-toggle{display:none;border:0;background:none;color:#fff;font-weight:700}

/* Hero */
.hero{
  min-height:300px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(246,243,235,.98) 0%,rgba(246,243,235,.95) 28%,rgba(246,243,235,.68) 46%,rgba(246,243,235,.16) 68%,rgba(246,243,235,0) 100%),
    url("hero-banner.jpg") center center / 100% 100% no-repeat;
}
.hero-copy{width:52%;padding-left:8vw;text-align:center}
.hero h1{max-width:470px;margin:0 auto 10px;font-family:"Playfair Display",serif;font-size:1.5rem;font-weight:500;line-height:1.18}
.hero h1 em{color:var(--deep);font-style:italic}
.hero p{max-width:330px;margin:0 auto 18px;font-size:.73rem}
.button{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:0;border-radius:7px;font-size:.72rem;font-weight:700;text-transform:uppercase;cursor:pointer}
.dark-button{background:var(--deep);color:#fff}
.light-button{background:var(--sage-light);color:var(--deep)}

/* Space cards */
.space-cards-wrap{padding:16px 8vw 26px;background:#fff}
.space-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.space-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:9px;background:#fff;box-shadow:var(--shadow)}
.space-image{flex:0 0 135px;height:135px;background-position:center;background-size:cover}
.space-image.home{background-image:url("home-card.jpg")}
.space-image.outdoor{background-image:url("outdoor-card.jpg")}
.space-image.workspace{background-image:url("workspaces-card.jpg")}
.space-copy{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;min-height:88px;padding:13px 14px;background:var(--deep);color:#fff;text-align:center}
.space-copy h2{min-height:2.05em;display:flex;align-items:center;justify-content:center;margin:0 0 5px;color:#fff;font-size:.8rem;text-transform:uppercase}
.space-copy p{margin:0;font-size:.67rem}

/* What Resettable does */
.what-we-do{padding:20px 8vw 26px;background:var(--paper)}
.section-title{margin-bottom:18px;text-align:center}
.section-title.left{text-align:left}
.section-title h2{margin-bottom:0;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em}
.what-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.what-card{padding:10px 22px;text-align:center;border-right:1px solid var(--line)}
.what-card:last-child{border-right:0}
.line-icon{margin-bottom:8px;color:var(--sage);font-size:1.9rem}
.what-card h3{margin-bottom:5px;font-size:.7rem;text-transform:uppercase}
.what-card p{margin-bottom:0;font-size:.63rem}

/* Quick/full */
.reset-levels{padding:14px 8vw 10px;background:#fff}
.reset-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reset-level-card{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:15px;min-height:110px;padding:18px 22px;border:1.5px solid var(--sage);border-radius:8px;background:#fff}
.reset-level-icon{color:var(--sage);font-size:1.8rem;text-align:center}
.reset-level-card span{display:inline-block;margin-bottom:9px;padding:3px 11px;border-radius:999px;background:var(--sage);color:#fff;font-size:.63rem;font-weight:700;text-transform:uppercase}
.reset-level-card p{margin-bottom:0;font-size:.65rem}

/* CTA */
.cta-strip{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:16px;margin:12px 8vw 0;padding:14px 22px;border-radius:8px;background:var(--deep);color:#fff}
.cta-icon{color:var(--sage-light);font-size:1.5rem;text-align:center}
.cta-strip h2{margin-bottom:2px;color:#fff;font-size:1rem;text-transform:uppercase}
.cta-strip p{margin-bottom:0;font-size:.65rem}

/* Process + FAQ */
.process-faq-wrap{display:grid;grid-template-columns:1.65fr .8fr;gap:28px;padding:24px 8vw 28px}
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.process-step{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start}
.process-step>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sage);color:#fff;font-size:.67rem;font-weight:700}
.process-step h3{margin-bottom:3px;font-size:.63rem;text-transform:uppercase}
.process-step p{margin-bottom:0;font-size:.58rem}
.faq-column{padding-left:20px;border-left:1px solid var(--line)}
.faq-list details{padding:9px 0;border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;font-size:.62rem;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"⌄";color:var(--sage)}
.faq-list p{margin:7px 0 0;color:var(--muted);font-size:.58rem}

/* About + request */
.about-request{display:grid;grid-template-columns:1fr 1px 1fr;gap:30px;margin:0 8vw 16px;padding:26px 34px;border-radius:9px;background:var(--soft)}
.section-divider{background:var(--line)}
.eyebrow{margin-bottom:8px;font-size:.67rem;font-weight:700;text-transform:uppercase}
.about-panel h2{margin-bottom:10px;font-size:1rem}
.about-panel>p:not(.eyebrow){max-width:520px;color:var(--muted);font-size:.65rem}
.about-badges{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px}
.badge{display:flex;gap:8px;align-items:flex-start;color:var(--deep);font-size:.63rem;font-weight:700;text-transform:uppercase}
.location-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.request-intro{margin-bottom:14px;font-size:.63rem}
.reset-form{display:grid;gap:8px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.reset-form label{display:grid;gap:4px}
.reset-form label span{font-size:.54rem}
.reset-form input,.reset-form select,.reset-form textarea{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);font-size:.62rem}
.submit-button{justify-self:start;margin-top:3px}
.social-icons{display:flex;gap:14px;margin-top:12px}
.social-icons a{display:grid;place-items:center;width:30px;height:30px}
.social-icons svg{width:30px;height:30px;fill:none;stroke:var(--deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.social-icons .dot{fill:var(--deep);stroke:none}

/* Footer */
.site-footer{padding:11px 8vw;background:var(--deep);color:#fff;text-align:center}
.site-footer p{margin:0;font-size:.6rem}

/* Animation */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.reveal.visible{opacity:1;transform:none}

/* Tablet */
@media(max-width:850px){
  .site-nav{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 6vw;background:var(--deep)}
  .site-nav.open{display:flex}
  .menu-toggle{display:block}

  .hero{
    min-height:260px;
    background:
      linear-gradient(90deg,rgba(246,243,235,.98) 0%,rgba(246,243,235,.95) 30%,rgba(246,243,235,.66) 50%,rgba(246,243,235,.16) 72%,rgba(246,243,235,0) 100%),
      url("hero-banner.jpg") center center / 100% 100% no-repeat;
  }
  .hero-copy{width:55%;padding-left:6vw}
  .hero h1{font-size:1.34rem}
  .hero p{font-size:.66rem}

  .space-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
  .space-image{flex-basis:115px;height:115px}
  .space-copy{min-height:98px;padding:12px 10px 14px}
  .space-copy h2{font-size:.68rem}
  .space-copy p{font-size:.60rem;line-height:1.28}

  .what-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .what-card{min-height:145px;padding:20px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .what-card:nth-child(odd){border-right:1px solid var(--line)}
  .what-card:nth-last-child(-n+2){border-bottom:0}

  .process-faq-wrap{grid-template-columns:1fr}
  .faq-column{padding-left:0;border-left:0}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-request{grid-template-columns:1fr}
  .section-divider{width:100%;height:1px}
}

/* Phone */
@media(max-width:560px){
  .site-header{padding:8px 5vw}
  .brand-logo{width:76px}

  .hero{
    min-height:225px;
    background:
      linear-gradient(90deg,rgba(246,243,235,.98) 0%,rgba(246,243,235,.94) 34%,rgba(246,243,235,.62) 58%,rgba(246,243,235,.14) 80%,rgba(246,243,235,0) 100%),
      url("hero-banner.jpg") center center / 100% 100% no-repeat;
  }
  .hero-copy{width:58%;padding-left:5vw}
  .hero h1{max-width:235px;font-size:1.02rem;line-height:1.18}
  .hero p{max-width:205px;font-size:.56rem}
  .hero .button{padding:8px 13px;font-size:.6rem}

  .space-cards-wrap{padding-left:4vw;padding-right:4vw}
  .space-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .space-image{flex-basis:82px;height:82px}
  .space-copy{min-height:138px;padding:10px 7px 12px}
  .space-copy h2{min-height:2.35em;font-size:.52rem;line-height:1.12}
  .space-copy p{font-size:.46rem;line-height:1.28}

  .what-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .what-card{min-height:auto;padding:7px 4px;border-right:1px solid var(--line);border-bottom:0}
  .what-card:last-child{border-right:0}
  .line-icon{font-size:1.3rem}
  .what-card h3{font-size:.5rem}
  .what-card p{font-size:.45rem;line-height:1.25}

  .reset-levels{padding-left:5vw;padding-right:5vw}
  .reset-level-grid{grid-template-columns:1fr}
  .reset-level-card{grid-template-columns:40px 1fr;min-height:auto;padding:14px 16px}

  .cta-strip{grid-template-columns:34px 1fr;margin-left:5vw;margin-right:5vw}
  .cta-strip .button{grid-column:1/-1;width:100%}

  .process-faq-wrap{padding-left:5vw;padding-right:5vw}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}

  .about-request{margin-left:5vw;margin-right:5vw;padding:22px 20px}
  .form-row{grid-template-columns:1fr}
}

/* Dark mode */
@media(prefers-color-scheme:dark){
  :root{
    --deep:#0d2e1f;
    --sage:#9caf8c;
    --sage-light:#b9c8ab;
    --cream:#20271f;
    --paper:#171d18;
    --soft:#222a22;
    --ink:#f2efe8;
    --muted:#bdc5bb;
    --line:#374137;
  }
  body{color-scheme:dark}
  .site-header{background:var(--deep)}
  .hero{
    background:
      linear-gradient(90deg,rgba(32,39,31,.98) 0%,rgba(32,39,31,.94) 28%,rgba(32,39,31,.64) 46%,rgba(32,39,31,.16) 68%,rgba(32,39,31,0) 100%),
      url("hero-banner.jpg") center center / 100% 100% no-repeat;
  }
  .space-cards-wrap,.reset-levels{background:var(--paper)}
  .space-card{background:var(--paper)}
  .what-we-do{background:var(--paper)}
  .reset-level-card{background:var(--paper)}
  .process-faq-wrap{background:var(--paper)}
  .about-request{background:var(--soft)}
  .reset-form input,.reset-form select,.reset-form textarea{background:#f3f0e8;color:#1d2b21}
  .location-icon{stroke:var(--sage-light)}
  .social-icons svg{stroke:var(--sage-light)}
  .social-icons .dot{fill:var(--sage-light)}
}


/* Final section-order refinement */
.space-cards-wrap > .section-title,
.reset-levels > .section-title,
.what-we-do > .section-title{
  margin-bottom:18px;
}

.about-panel > p:not(.eyebrow){
  margin-bottom:10px;
}


/* Final About cleanup */
.about-signoff{
  margin-top:14px;
  color:var(--deep) !important;
  font-weight:700;
  font-size:.68rem !important;
}

@media(prefers-color-scheme:dark){
  .about-signoff{
    color:var(--sage-light) !important;
  }
}


/* Keep the About message calm and compact */
.about-panel h2{
  font-size:.82rem !important;
  line-height:1.35 !important;
  max-width:440px;
  margin-bottom:10px;
}

@media(max-width:850px){
  .about-panel h2{
    font-size:.78rem !important;
  }
}

@media(max-width:560px){
  .about-panel h2{
    font-size:.74rem !important;
    line-height:1.35 !important;
  }
}


/* Final About intro: same size as the sentence beneath it, but bold */
.about-panel h2{
  font-family:"DM Sans",sans-serif !important;
  font-size:.65rem !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  max-width:520px !important;
  margin-bottom:10px !important;
}

@media(max-width:850px){
  .about-panel h2{
    font-size:.65rem !important;
  }
}

@media(max-width:560px){
  .about-panel h2{
    font-size:.65rem !important;
    line-height:1.5 !important;
  }
}


/* ===== FINAL RESPONSIVE HERO IMAGES =====
   Desktop stays exactly as it is.
   Tablet and phone use their own clean, text-free hero images so CSS no longer
   has to crop/zoom the desktop image.
*/

/* User's final About preference: same size/weight/colour as the following sentence */
.about-panel h2{
  color:var(--muted) !important;
  font-weight:400 !important;
}

/* Tablet only */
@media (min-width:561px) and (max-width:850px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(246,243,235,.98) 0%,
        rgba(246,243,235,.95) 29%,
        rgba(246,243,235,.68) 48%,
        rgba(246,243,235,.16) 70%,
        rgba(246,243,235,0) 100%),
      url("hero-tablet.jpg") center center / cover no-repeat !important;
  }
}

/* Phone only */
@media (max-width:560px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(246,243,235,.98) 0%,
        rgba(246,243,235,.95) 34%,
        rgba(246,243,235,.66) 55%,
        rgba(246,243,235,.16) 77%,
        rgba(246,243,235,0) 100%),
      url("hero-mobile.jpg") center center / cover no-repeat !important;
  }
}

/* Matching dark-mode treatments */
@media (prefers-color-scheme:dark) and (min-width:561px) and (max-width:850px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(32,39,31,.98) 0%,
        rgba(32,39,31,.94) 29%,
        rgba(32,39,31,.66) 48%,
        rgba(32,39,31,.16) 70%,
        rgba(32,39,31,0) 100%),
      url("hero-tablet.jpg") center center / cover no-repeat !important;
  }
}

@media (prefers-color-scheme:dark) and (max-width:560px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(32,39,31,.98) 0%,
        rgba(32,39,31,.94) 34%,
        rgba(32,39,31,.64) 55%,
        rgba(32,39,31,.16) 77%,
        rgba(32,39,31,0) 100%),
      url("hero-mobile.jpg") center center / cover no-repeat !important;
  }
}


/* Quick / Full Reset cards are clickable */
.reset-choice-link{
  color:inherit;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.reset-choice-link:hover,
.reset-choice-link:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  outline:none;
}


/* ==========================================================
   RESETTABLE — LAUNCH POLISH
   ========================================================== */

/* 2. Desktop + tablet: all 3 space cards and image areas match exactly */
@media (min-width:561px) {
  .space-cards{
    align-items:stretch !important;
    grid-auto-rows:1fr !important;
  }

  .space-card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }

  .space-image{
    flex:0 0 135px !important;
    height:135px !important;
    min-height:135px !important;
  }

  .space-copy{
    flex:1 1 auto !important;
    min-height:104px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .space-copy h2{
    min-height:2.2em !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

@media (min-width:561px) and (max-width:850px) {
  .space-image{
    flex-basis:115px !important;
    height:115px !important;
    min-height:115px !important;
  }

  .space-copy{
    min-height:112px !important;
  }

  .space-copy h2{
    min-height:2.35em !important;
  }
}

/* 3. Dark mode: trust/location details must remain visible */
@media (prefers-color-scheme:dark) {
  .about-badges,
  .about-badges .badge,
  .about-badges .badge span{
    color:var(--sage-light) !important;
  }

  .location-icon{
    stroke:var(--sage-light) !important;
  }
}

/* 4. Phone: use a much wider, pulled-back hero composition */
@media (max-width:560px) {
  .hero{
    background:
      linear-gradient(90deg,
        rgba(246,243,235,.98) 0%,
        rgba(246,243,235,.95) 34%,
        rgba(246,243,235,.64) 56%,
        rgba(246,243,235,.14) 78%,
        rgba(246,243,235,0) 100%),
      url("hero-mobile.jpg") center center / cover no-repeat !important;
  }
}

@media (prefers-color-scheme:dark) and (max-width:560px) {
  .hero{
    background:
      linear-gradient(90deg,
        rgba(32,39,31,.98) 0%,
        rgba(32,39,31,.94) 34%,
        rgba(32,39,31,.62) 56%,
        rgba(32,39,31,.14) 78%,
        rgba(32,39,31,0) 100%),
      url("hero-mobile.jpg") center center / cover no-repeat !important;
  }
}


/* ==========================================================
   FINAL DROP-IN OVERRIDES
   ========================================================== */

/* Final card images: full-width, matching, with the small white nip */
.space-image{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-top:6px solid #fff !important;
}
.space-image.home{background-image:url("home-card.jpg") !important;}
.space-image.outdoor{background-image:url("outdoor-card.jpg") !important;}
.space-image.workspace{background-image:url("workspaces-card.jpg") !important;}

/* Desktop card images: show the new 2:1 images at their intended proportion */
@media (min-width:851px){
  .space-image{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    flex:0 0 auto !important;
    aspect-ratio:2 / 1 !important;
  }
}

/* Tablet stays on the hero composition that already looked right */
@media (min-width:561px) and (max-width:850px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(246,243,235,.98) 0%,
        rgba(246,243,235,.95) 29%,
        rgba(246,243,235,.68) 48%,
        rgba(246,243,235,.16) 70%,
        rgba(246,243,235,0) 100%),
      url("hero-tablet.jpg") center center / cover no-repeat !important;
  }
}

/* Desktop matched to tablet scale */
@media (min-width:851px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(246,243,235,.98) 0%,
        rgba(246,243,235,.94) 31%,
        rgba(246,243,235,.62) 50%,
        rgba(246,243,235,.12) 70%,
        rgba(246,243,235,0) 100%),
      url("hero-desktop.jpg") center center / cover no-repeat !important;
  }
}

/* Final phone hero: same scale, more breathing room on right */
@media (max-width:560px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(246,243,235,.98) 0%,
        rgba(246,243,235,.94) 35%,
        rgba(246,243,235,.58) 57%,
        rgba(246,243,235,.08) 78%,
        rgba(246,243,235,0) 100%),
      url("hero-mobile.jpg") center center / cover no-repeat !important;
  }
}

/* Dark-mode hero variants */
@media (prefers-color-scheme:dark) and (min-width:851px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(32,39,31,.98) 0%,
        rgba(32,39,31,.94) 31%,
        rgba(32,39,31,.62) 50%,
        rgba(32,39,31,.12) 70%,
        rgba(32,39,31,0) 100%),
      url("hero-desktop.jpg") center center / cover no-repeat !important;
  }
}
@media (prefers-color-scheme:dark) and (min-width:561px) and (max-width:850px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(32,39,31,.98) 0%,
        rgba(32,39,31,.94) 29%,
        rgba(32,39,31,.66) 48%,
        rgba(32,39,31,.16) 70%,
        rgba(32,39,31,0) 100%),
      url("hero-tablet.jpg") center center / cover no-repeat !important;
  }
}
@media (prefers-color-scheme:dark) and (max-width:560px){
  .hero{
    background:
      linear-gradient(90deg,
        rgba(32,39,31,.98) 0%,
        rgba(32,39,31,.94) 35%,
        rgba(32,39,31,.58) 57%,
        rgba(32,39,31,.08) 78%,
        rgba(32,39,31,0) 100%),
      url("hero-mobile.jpg") center center / cover no-repeat !important;
  }
}

/* Proper Create Spaces icon — simple plant/pot, no font/emoji glyph */
.create-spaces-icon{
  position:relative;
  width:38px;
  height:38px;
  margin:0 auto 8px;
}
.create-spaces-icon::before{
  content:"";
  position:absolute;
  left:12px;
  bottom:2px;
  width:14px;
  height:12px;
  border:2px solid var(--sage);
  border-top:0;
  border-radius:0 0 3px 3px;
}
.create-spaces-icon::after{
  content:"";
  position:absolute;
  left:18px;
  bottom:14px;
  width:2px;
  height:15px;
  background:var(--sage);
  transform-origin:bottom center;
  box-shadow:-6px -5px 0 -1px var(--sage),6px -9px 0 -1px var(--sage);
}

/* Dark-mode trust text stays visible */
@media (prefers-color-scheme:dark){
  .about-badges,
  .about-badges .badge,
  .about-badges .badge span{
    color:var(--sage-light) !important;
  }
  .location-icon{
    stroke:var(--sage-light) !important;
  }
}

/* Final About intro preference: calm, same tone as body copy */
.about-panel h2{
  color:var(--muted) !important;
  font-weight:400 !important;
  font-family:"DM Sans",sans-serif !important;
  font-size:.65rem !important;
  line-height:1.5 !important;
  max-width:520px !important;
}


/* ==========================================================
   BODY COPY SIZE REFINEMENT
   Headings, subheadings, buttons, header and footer unchanged.
   ========================================================== */
.hero p{font-size:.88rem !important;line-height:1.55 !important;}
.space-copy p{font-size:.78rem !important;line-height:1.45 !important;}
.what-card p{font-size:.78rem !important;line-height:1.45 !important;}
.reset-level-card p{font-size:.78rem !important;line-height:1.5 !important;}
.cta-strip p{font-size:.76rem !important;line-height:1.45 !important;}
.process-step p{font-size:.76rem !important;line-height:1.45 !important;}
.faq-list p{font-size:.76rem !important;line-height:1.5 !important;}
.about-panel > p:not(.eyebrow){font-size:.76rem !important;line-height:1.55 !important;}
.request-intro{font-size:.74rem !important;line-height:1.5 !important;}
.reset-form label span{font-size:.68rem !important;}
.reset-form input,.reset-form select,.reset-form textarea{font-size:.74rem !important;}
@media (min-width:561px) and (max-width:850px){
  .hero p{font-size:.84rem !important;}
  .space-copy p,.what-card p,.reset-level-card p{font-size:.76rem !important;}
  .process-step p,.faq-list p,.about-panel > p:not(.eyebrow){font-size:.74rem !important;}
}
@media (max-width:560px){
  .hero p{font-size:.76rem !important;}
  .space-copy p{font-size:.60rem !important;line-height:1.35 !important;}
  .what-card p{font-size:.58rem !important;line-height:1.35 !important;}
  .reset-level-card p{font-size:.72rem !important;line-height:1.45 !important;}
  .cta-strip p{font-size:.70rem !important;}
  .process-step p{font-size:.68rem !important;line-height:1.4 !important;}
  .faq-list p{font-size:.70rem !important;line-height:1.48 !important;}
  .about-panel > p:not(.eyebrow){font-size:.70rem !important;line-height:1.5 !important;}
  .request-intro{font-size:.70rem !important;}
  .reset-form label span{font-size:.66rem !important;}
  .reset-form input,.reset-form select,.reset-form textarea{font-size:.72rem !important;}
}

/* FINAL TYPOGRAPHY HIERARCHY FIX */
.process-step h3{font-size:.78rem!important;line-height:1.3!important;font-weight:700!important}
.process-step p{font-size:.76rem!important;line-height:1.45!important;font-weight:400!important}
.about-panel h2,.about-panel>p:not(.eyebrow){font-family:"DM Sans",sans-serif!important;font-size:.76rem!important;line-height:1.55!important;font-weight:400!important;color:var(--muted)!important}
.about-panel .reassurance,.about-panel strong{font-weight:700!important;color:var(--ink)!important}
@media (min-width:561px) and (max-width:850px){
.process-step h3{font-size:.76rem!important}
.process-step p,.about-panel h2,.about-panel>p:not(.eyebrow){font-size:.74rem!important}
}
@media (max-width:560px){
.process-step h3{font-size:.72rem!important}
.process-step p{font-size:.68rem!important}
.about-panel h2,.about-panel>p:not(.eyebrow){font-size:.70rem!important;line-height:1.5!important}
}

/* About Resettable — quieter supporting copy */
.about-panel h2,
.about-panel > p:not(.eyebrow) {
    font-size: 0.68rem !important;
    line-height: 1.55 !important;
}

@media (max-width: 560px) {
    .about-panel h2,
    .about-panel > p:not(.eyebrow) {
        font-size: 0.64rem !important;
    }
}

/* How It Works — smaller supporting text */
.process-step h3 {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.process-step p {
    font-size: 0.64rem !important;
    line-height: 1.45 !important;
}

/* Phone */
@media (max-width: 560px) {
    .process-step h3 {
        font-size: 0.64rem !important;
    }

    .process-step p {
        font-size: 0.60rem !important;
    }
}

/* Restore original smaller sizing */

/* Hero supporting sentence */
.hero p {
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
}

/* Home / Outdoor / Workspaces descriptions */
.space-copy p {
    font-size: 0.62rem !important;
    line-height: 1.4 !important;
}

/* Tablet */
@media (min-width: 561px) and (max-width: 850px) {
    .hero p {
        font-size: 0.70rem !important;
    }

    .space-copy p {
        font-size: 0.60rem !important;
    }
}

/* Phone */
@media (max-width: 560px) {
    .hero p {
        font-size: 0.68rem !important;
    }

    .space-copy p {
        font-size: 0.56rem !important;
    }
}

/* PHONE — align What We Can Help With icons and titles */
@media (max-width: 560px) {

  .what-card .line-icon,
  .what-card .create-spaces-icon {
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 auto 8px !important;
  }

  .create-spaces-icon {
    width: 24px !important;
    transform: scale(0.62) !important;
    transform-origin: center top !important;
  }

  .what-card h3 {
    margin-top: 0 !important;
  }
}

/* PHONE — make What We Can Help With a clean 2 x 2 grid */
@media (max-width: 560px) {

  .what-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .what-card {
    min-height: 170px !important;
    padding: 18px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .what-card:nth-child(odd) {
    border-right: 1px solid var(--line) !important;
  }

  .what-card:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  .what-card h3 {
    font-size: .68rem !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .what-card p {
    font-size: .66rem !important;
    line-height: 1.4 !important;
    max-width: 170px !important;
    margin: 0 auto !important;
  }

  .what-card .line-icon,
  .what-card .create-spaces-icon {
    margin-bottom: 10px !important;
  }
}

/* =========================================
   FINAL MOBILE WHAT-WE-CAN-HELP-WITH LAYOUT
   ========================================= */

@media screen and (max-width: 560px) {

  .what-we-do .what-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 0 !important;
  }

  .what-we-do .what-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 165px !important;
    padding: 18px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .what-we-do .what-card:nth-child(odd) {
    border-right: 1px solid var(--line) !important;
  }

  .what-we-do .what-card:nth-child(3),
  .what-we-do .what-card:nth-child(4) {
    border-bottom: 0 !important;
  }

  .what-we-do .what-card h3 {
    min-height: 2.4em !important;
    margin: 8px 0 8px !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .what-we-do .what-card p {
    max-width: 160px !important;
    margin: 0 auto !important;
    font-size: 0.66rem !important;
    line-height: 1.4 !important;
  }
}

/* PHONE LANDSCAPE — return to one row of four */
@media screen and (max-height: 560px) and (orientation: landscape) {

  .what-we-do .what-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
  }

  .what-we-do .what-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 190px !important;
    padding: 18px 10px !important;

    border-bottom: 0 !important;
    border-right: 1px solid var(--line) !important;
  }

  .what-we-do .what-card:last-child {
    border-right: 0 !important;
  }

  .what-we-do .what-card h3 {
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    min-height: 2.4em !important;
  }

  .what-we-do .what-card p {
    font-size: 0.60rem !important;
    line-height: 1.4 !important;
    max-width: 150px !important;
  }
}

/* =========================================
   ALIGN SERVICE CARD TEXT — PHONE + TABLET
   ========================================= */

@media screen and (max-width: 850px) {

  /* Give every card title the same vertical space */
  .space-copy h3 {
    min-height: 2.4em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 8px !important;
  }

  /* Make every description begin at the same height */
  .space-copy p {
    margin: 0 auto !important;
    width: 100% !important;
  }
}

/* Tablet — keep Workspaces & Organisations on one line */
@media screen and (min-width: 561px) and (max-width: 850px) {

  .space-copy h3 {
    white-space: nowrap !important;
  }

  .space-card:nth-child(3) .space-copy p {
    max-width: 95% !important;
  }
}

/* Phone */
@media screen and (max-width: 560px) {

  .space-copy h3 {
    min-height: 2.6em !important;
  }
}

/* FAQ answers — smaller than the questions */
.faq-list details p {
  font-size: 0.66rem !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}

/* Tablet */
@media (min-width: 561px) and (max-width: 850px) {
  .faq-list details p {
    font-size: 0.64rem !important;
  }
}

/* Phone */
@media (max-width: 560px) {
  .faq-list details p {
    font-size: 0.62rem !important;
  }
}

/* Phone — improve Outdoor description wrapping */
@media screen and (max-width: 560px) {

  .space-card:nth-child(2) .space-copy p {
    width: 110% !important;
    max-width: none !important;
    margin-left: -5% !important;
    margin-right: -5% !important;
  }
}

/* PHONE ONLY — tidy What We Can Help With text wrapping */
@media screen and (max-width: 560px) {

  .what-we-do .what-card p {
    width: 92% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.4 !important;
  }

  /* Create Spaces gets slightly more room */
  .what-we-do .what-card:nth-child(3) p {
    width: 98% !important;
    max-width: 240px !important;
  }
}

/* PHONE LANDSCAPE — align all four help headings */
@media screen and (max-height: 560px) and (orientation: landscape) {

  .what-we-do .what-card h3 {
    height: 42px !important;
    min-height: 42px !important;
    margin: 12px 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .what-we-do .what-card p {
    margin-top: 0 !important;
  }
}

/* ==========================================================
   PHONE — FINAL HEADING ALIGNMENT
   ========================================================== */

@media screen and (max-width: 560px) {

  /* -----------------------------------------
     HOME / OUTDOOR / WORKSPACES
     ----------------------------------------- */

  .space-copy h2 {
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 8px !important;
    line-height: 1.15 !important;
  }

  .space-copy p {
    margin-top: 0 !important;
  }


  /* -----------------------------------------
     WHAT WE CAN HELP WITH
     ----------------------------------------- */

  /* Every icon gets exactly the same space */
  .what-card .line-icon,
  .what-card .create-spaces-icon {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 auto 12px !important;

    display: block !important;
  }

  /* Keep custom Create Spaces icon visually smaller */
  .what-card .create-spaces-icon {
    transform: scale(0.65) !important;
    transform-origin: center center !important;
  }

  /* Every heading gets the same vertical area */
  .what-card h3 {
    height: 46px !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 10px !important;
    line-height: 1.2 !important;
  }

  /* Descriptions all begin from the same level */
  .what-card p {
    margin-top: 0 !important;
  }
}

/* ==========================================================
   PHONE — FINAL HEADING ALIGNMENT
   ========================================================== */

@media screen and (max-width: 560px) {

  /* -----------------------------------------
     HOME / OUTDOOR / WORKSPACES
     ----------------------------------------- */

  .space-copy h2 {
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 8px !important;
    line-height: 1.15 !important;
  }

  .space-copy p {
    margin-top: 0 !important;
  }


  /* -----------------------------------------
     WHAT WE CAN HELP WITH
     ----------------------------------------- */

  /* Every icon gets exactly the same space */
  .what-card .line-icon,
  .what-card .create-spaces-icon {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 auto 12px !important;

    display: block !important;
  }

  /* Keep custom Create Spaces icon visually smaller */
  .what-card .create-spaces-icon {
    transform: scale(0.65) !important;
    transform-origin: center center !important;
  }

  /* Every heading gets the same vertical area */
  .what-card h3 {
    height: 46px !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 0 10px !important;
    line-height: 1.2 !important;
  }

  /* Descriptions all begin from the same level */
  .what-card p {
    margin-top: 0 !important;
  }
}

/* ==========================================================
   FINAL RESPONSIVE ALIGNMENT
   PHONE + TABLET
   ========================================================== */

@media screen and (max-width: 1200px) {

  /* ========================================================
     HOME / OUTDOOR / WORKSPACES & ORGANISATIONS
     ======================================================== */

  .space-copy {
    display: grid !important;
    grid-template-rows: 44px auto !important;
    align-content: center !important;
  }

  .space-copy h2 {
    grid-row: 1 !important;

    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.15 !important;
    text-align: center !important;
  }

  .space-copy p {
    grid-row: 2 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    align-self: start !important;
    text-align: center !important;
  }


  /* ========================================================
     WHAT WE CAN HELP WITH
     ======================================================== */

  .what-card {
    display: grid !important;

    /*
      Every card gets exactly:
      1. icon area
      2. heading area
      3. description area
    */
    grid-template-rows: 42px 50px auto !important;

    align-content: start !important;
  }

  /* Normal icons */
  .what-card .line-icon {
    grid-row: 1 !important;

    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 auto !important;

    align-self: center !important;
    justify-self: center !important;
  }

  /* Create Spaces custom icon */
  .what-card .create-spaces-icon {
    grid-row: 1 !important;

    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;

    margin: 0 auto !important;

    align-self: center !important;
    justify-self: center !important;

    transform: scale(0.65) !important;
    transform-origin: center center !important;
  }

  /* Every heading now begins in exactly the same place */
  .what-card h3 {
    grid-row: 2 !important;

    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Every description begins at exactly the same level */
  .what-card p {
    grid-row: 3 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    align-self: start !important;
    text-align: center !important;
  }
}


/* ==========================================================
   FINAL QUICK / FULL RESET ALIGNMENT
   Keeps the two cards aligned in phone landscape without
   affecting portrait, tablet or desktop.
   ========================================================== */

@media screen and (max-height: 560px) and (orientation: landscape) {

  .reset-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .reset-level-card {
    height: 100% !important;
    min-height: 118px !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;

    padding: 16px 18px !important;
  }

  .reset-level-icon {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* The text side of both cards gets identical rows:
     badge first, description second. */
  .reset-level-card > div:last-child {
    display: grid !important;
    grid-template-rows: 30px auto !important;
    align-content: start !important;
    min-width: 0 !important;
  }

  .reset-level-card span {
    grid-row: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    justify-self: start !important;
    align-self: start !important;

    height: 26px !important;
    min-height: 26px !important;

    margin: 0 !important;
    padding: 3px 11px !important;

    line-height: 1 !important;
  }

  .reset-level-card p {
    grid-row: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;
  }
}

/* ==========================================================
   FINAL SPACE CARD CONTENT ALIGNMENT
   ========================================================== */

@media screen and (max-width: 1200px) {

  .space-copy {
    display: grid !important;
    grid-template-rows: 44px auto !important;

    align-content: start !important;
    justify-content: stretch !important;

    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .space-copy h2 {
    grid-row: 1 !important;

    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  .space-copy p {
    grid-row: 2 !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;
    text-align: center !important;
  }
}