/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */ @layer theme {
  :root,:host {
    --font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --spacing:.25rem;
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }

}

@layer base {
  *,:after,:before,::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }

  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }

  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }

  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }

  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }

  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
  }

  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }

  b,strong {
    font-weight:bolder
  }

  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }

  small {
    font-size:80%
  }

  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }

  sub {
    bottom:-.25em
  }

  sup {
    top:-.5em
  }

  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }

  :-moz-focusring {
    outline:auto
  }

  progress {
    vertical-align:baseline
  }

  summary {
    display:list-item
  }

  ol,ul,menu {
    list-style:none
  }

  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block
  }

  img,video {
    max-width:100%;
    height:auto
  }

  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }

  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }

  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }

  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }

  ::file-selector-button {
    margin-inline-end:4px
  }

  ::placeholder {
    opacity:1
  }

  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }

    @supports (color:color-mix(in lab,red,red)) {
      ::placeholder {
        color:color-mix(in oklab,currentcolor 50%,transparent)
      }

    }

  }

  textarea {
    resize:vertical
  }

  ::-webkit-search-decoration {
    -webkit-appearance:none
  }

  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }

  ::-webkit-datetime-edit {
    display:inline-flex
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }

  ::-webkit-datetime-edit {
    padding-block:0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }

  ::-webkit-calendar-picker-indicator {
    line-height:1
  }

  :-moz-ui-invalid {
    box-shadow:none
  }

  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }

  ::file-selector-button {
    appearance:button
  }

  ::-webkit-inner-spin-button {
    height:auto
  }

  ::-webkit-outer-spin-button {
    height:auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }

}

@layer components;
@layer utilities {
  .visible {
    visibility:visible
  }

  .relative {
    position:relative
  }

  .start {
    inset-inline-start:var(--spacing)
  }

  .table {
    display:table
  }

}

:root {
  --eco:#8bc208;
  --eco-bright:#a5d92d;
  --eco-dark:#527a08;
  --eco-deep:#3d6210;
  --cream:#fcfbe8;
  --cream-deep:#f2f5d8;
  --white:#fffef8;
  --text:#34442f;
  --muted:#70806a;
  --line:#4e6f1829
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}

body {
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  margin:0;
  font-family:Zen Maru Gothic,Hiragino Maru Gothic ProN,Yu Gothic,Meiryo,sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

.hero {
  height:100svh;
  min-height:760px;
  color:var(--text);
  background:var(--cream);
  position:relative;
  overflow:hidden
}

.hero-photo {
  background:url(/herasu-hero-eco.png) 50%/cover no-repeat;
  position:absolute;
  inset:0;
  transform:scale(1.012)
}

.hero-shade {
  background:linear-gradient(90deg,#fcfbe8fa 0%,#fcfbe8f0 34%,#fcfbe894 54%,#fcfbe80d 76%);
  position:absolute;
  inset:0
}

.hero-shade:after {
  content:"";
  background:linear-gradient(#fcfbe873,#0000 27%,#fcfbe838);
  position:absolute;
  inset:0
}

.site-header {
  z-index:5;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  background:#fcfbe8c7;
  border-bottom:1px solid #527a0829;
  justify-content:space-between;
  align-items:center;
  height:108px;
  padding:0 5vw;
  display:flex;
  position:relative
}

.brand {
  align-items:center;
  gap:14px;
  min-width:250px;
  display:flex
}

.brand-logo {
  object-fit:contain;
  background:var(--eco);
  border-radius:13px;
  width:50px;
  height:50px;
  padding:6px
}

.brand span {
  flex-direction:column;
  gap:5px;
  display:flex
}

.brand small {
  letter-spacing:.09em;
  color:#70855f;
  font-size:9px
}

.brand strong {
  letter-spacing:.1em;
  color:var(--eco-dark);
  font-size:24px;
  font-weight:700;
  line-height:1
}

nav {
  align-items:center;
  gap:32px;
  margin-left:auto;
  margin-right:34px;
  display:flex
}

nav a {
  letter-spacing:.04em;
  color:#56674f;
  font-size:13px;
  font-weight:500;
  transition:color .2s
}

nav a:hover {
  color:var(--eco-dark)
}

.header-cta {
  color:#fff;
  background:var(--eco);
  letter-spacing:.04em;
  border-radius:999px;
  align-items:center;
  gap:25px;
  padding:17px 20px 17px 24px;
  font-size:12px;
  font-weight:700;
  transition:transform .2s,background .2s;
  display:flex;
  box-shadow:0 8px 24px #6c9c0733
}

.header-cta:hover {
  background:#7eb204;
  transform:translateY(-2px)
}

.header-cta span {
  font-size:17px
}

.hero-content {
  z-index:2;
  width:min(1200px,90vw);
  margin:0 auto;
  padding-top:clamp(80px,12vh,135px);
  position:relative
}

.eyebrow {
  color:var(--eco-dark);
  letter-spacing:.09em;
  align-items:center;
  gap:13px;
  margin:0 0 25px;
  font-size:12px;
  font-weight:700;
  display:flex
}

.eyebrow span {
  background:var(--eco);
  border-radius:3px;
  width:38px;
  height:3px
}

h1 {
  letter-spacing:.025em;
  text-shadow:0 2px 22px #fcfbe8cc;
  max-width:720px;
  margin:0;
  font-size:clamp(56px,6.1vw,92px);
  font-weight:700;
  line-height:1.28
}

.hero-seo-line {
  color:#50664a;
  letter-spacing:.04em;
  margin-bottom:10px;
  font-size:clamp(18px,1.7vw,27px);
  font-weight:700;
  display:block
}

h1 em {
  color:var(--eco-dark);
  font-style:normal;
  position:relative
}

h1 em:after {
  content:"";
  z-index:-1;
  background:#8bc20833;
  border-radius:999px;
  height:.26em;
  position:absolute;
  bottom:.04em;
  left:-.02em;
  right:-.08em
}

.hero-copy {
  color:#53634c;
  letter-spacing:.035em;
  margin:30px 0 0;
  font-size:16px;
  font-weight:500;
  line-height:2
}

.hero-actions {
  align-items:center;
  gap:34px;
  margin-top:38px;
  display:flex
}

.primary-button {
  color:#fff;
  background:var(--eco);
  letter-spacing:.02em;
  border-radius:16px;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  min-width:315px;
  padding:19px 22px 19px 25px;
  font-size:14px;
  font-weight:700;
  transition:transform .25s,background .25s;
  display:flex;
  box-shadow:0 14px 34px #6c9c073d
}

.primary-button:hover {
  background:#7cb004;
  transform:translateY(-3px)
}

.primary-button>span:first-child {
  flex-direction:column;
  gap:4px;
  display:flex
}

.primary-button small {
  letter-spacing:.1em;
  opacity:.8;
  font-size:9px
}

.primary-button>span:last-child {
  font-size:20px
}

.phone-link {
  color:var(--text);
  flex-direction:column;
  gap:3px;
  display:flex
}

.phone-link small {
  letter-spacing:.08em;
  color:#718268;
  font-size:10px
}

.phone-link strong {
  letter-spacing:.02em;
  color:var(--eco-dark);
  font-size:25px;
  font-weight:700
}

.phone-link>span {
  color:#85917f;
  letter-spacing:.04em;
  font-size:9px
}

.hero-note {
  z-index:3;
  color:#fff;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:#527a08e6;
  border-radius:18px 18px 0 0;
  display:flex;
  position:absolute;
  bottom:0;
  right:5vw;
  box-shadow:0 -8px 30px #527a081f
}

.hero-note span {
  letter-spacing:.05em;
  border-right:1px solid #ffffff38;
  padding:20px 25px;
  font-size:10px;
  font-weight:700
}

.hero-note span:last-child {
  border:0
}

.trust-bar {
  background:var(--white);
  border-bottom:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
  display:grid
}

.trust-bar div {
  border-right:1px solid var(--line);
  flex-direction:column;
  justify-content:center;
  gap:9px;
  min-height:124px;
  padding:32px 4vw;
  display:flex;
  position:relative
}

.trust-bar div:before {
  content:"";
  background:var(--eco);
  border-radius:7px;
  width:7px;
  height:45px;
  position:absolute;
  left:2vw
}

.trust-bar div:last-child {
  border:0
}

.trust-bar small {
  color:#83a03d;
  letter-spacing:.14em;
  font-size:9px;
  font-weight:700
}

.trust-bar strong {
  letter-spacing:.035em;
  color:#43583b;
  font-size:20px
}

.section-label {
  color:#7d9660;
  letter-spacing:.17em;
  white-space:nowrap;
  align-items:center;
  gap:14px;
  font-size:9px;
  font-weight:700;
  display:flex
}

.section-label span {
  letter-spacing:0;
  width:36px;
  height:36px;
  color:var(--eco-dark);
  background:#ffffff80;
  border:1px solid #abc67c;
  border-radius:50%;
  place-items:center;
  font-size:10px;
  display:grid
}

.section-label.light {
  color:##204b20
}

.section-label.light span {
  color: #395532;
    background: #53505014;
    border-color: #312e2e7a;
}

.intro {
  grid-template-columns:180px minmax(0,1fr) 150px;
  gap:6vw;
  max-width:1240px;
  margin:0 auto;
  padding:125px 30px 140px;
  display:grid
}

.intro-kicker {
  color:var(--eco-dark);
  letter-spacing:.08em;
  margin:0 0 24px;
  font-size:16px;
  font-weight:700
}

.intro h2,.features h2 {
  letter-spacing:.035em;
  margin:0;
  font-size:clamp(38px,4.2vw,62px);
  font-weight:700;
  line-height:1.55
}

.intro-copy {
  grid-template-columns:1fr 1fr;
  gap:55px;
  margin-top:48px;
  display:grid
}

.intro-copy p {
  color:var(--muted);
  letter-spacing:.025em;
  margin:0;
  font-size:14px;
  line-height:2.25
}

.intro-side {
  color:#a2b88d;
  letter-spacing:.15em;
  writing-mode:vertical-rl;
  flex-direction:column;
  align-self:center;
  gap:12px;
  font:700 9px/1 Zen Maru Gothic,sans-serif;
  display:flex
}

.intro-side:before {
  content:"";
  background:#b8d392;
  border-radius:2px;
  width:2px;
  height:105px;
  margin-bottom:12px
}

.features {
  color:var(--text);
  background:var(--cream-deep);
  padding:120px max(5vw,26px)
}

.features-head {
  grid-template-columns:240px 1fr;
  gap:30px;
  max-width:1180px;
  margin:0 auto 72px;
  display:grid
}

.features-kicker {
  color:var(--eco-dark);
  letter-spacing:.08em;
  margin:0 0 20px;
  font-size:16px;
  font-weight:700
}

.feature-grid {
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:1180px;
  margin:0 auto;
  display:grid
}

.feature-grid article {
  background:#ffffffb8;
  border:1px solid #70972b26;
  border-radius:24px;
  min-height:275px;
  padding:32px 30px;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 12px 34px #53741c0f
}

.feature-grid article:hover {
  transform:translateY(-5px);
  box-shadow:0 18px 38px #53741c1c
}

.feature-number {
  color:var(--eco);
  margin-bottom:42px;
  font-size:18px;
  font-weight:900;
  display:block
}

.feature-grid h3 {
  letter-spacing:.025em;
  margin:0 0 18px;
  font-size:20px;
  font-weight:700;
  line-height:1.55
}

.feature-grid p {
  color:#214115;
  letter-spacing:.02em;
  margin:0;
  font-size:14px;
  line-height:2
}

.feature-note {
  color:#819177;
  letter-spacing:.02em;
  max-width:1180px;
  margin:18px auto 0;
  font-size:13px;
  line-height:1.8
}

.occasions {
  grid-template-columns:180px minmax(0,1.5fr) minmax(280px,.8fr);
  align-items:start;
  gap:6vw;
  max-width:1240px;
  margin:0 auto;
  padding:125px 30px 140px;
  display:grid
}

.occasions-kicker,.support-kicker,.flow-kicker {
  color:var(--eco-dark);
  letter-spacing:.07em;
  margin:0 0 22px;
  font-size:16px;
  font-weight:700
}

.occasions h2,.support h2,.flow h2,.assessment h2,.cta h2,.company h2 {
  letter-spacing:.035em;
  margin:0;
  font-size:clamp(36px,4.1vw,50px);
  font-weight:700;
  line-height:1.5
}

.occasion-tags {
  flex-wrap:wrap;
  gap:10px;
  margin-top:42px;
  display:flex
}

.occasion-tags span {
  text-align:center;
  color:#55713c;
  letter-spacing:.04em;
  background:var(--white);
  border:1px solid #bfd692;
  border-radius:30px;
  min-width:92px;
  padding:13px 18px;
  font-size:14px;
  font-weight:500
}

.occasions-copy {
  color:var(--muted);
  letter-spacing:.025em;
  margin:47px 0 0;
  font-size:14px;
  line-height:2.25
}

.assessment {
  min-height:720px;
  color:var(--text);
  background:var(--white);
  grid-template-columns:1fr 1fr;
  display:grid
}

.assessment-photo {
  background:url(/herasu-hero-eco.png) 63%/cover no-repeat;
  min-height:620px
}
.assessment-photo2 {
  background:url("/herasu-hero-eco2.png") 63%/cover no-repeat;
  min-height:620px
}
.assessment-content {
  background:linear-gradient(135deg,var(--cream-deep),var(--cream));
  flex-direction:column;
  justify-content:center;
  padding:100px max(6vw,45px);
  display:flex
}

.assessment-kicker {
  color:var(--eco-dark);
  letter-spacing:.07em;
  margin:48px 0 19px;
  font-size:16px;
  font-weight:700
}

.assessment-content .section-label.light {
  color:#7d9660
}

.assessment-content .section-label.light span {
  color:var(--eco-dark);
  background:#fff;
  border-color:#abc67c
}

.assessment-content>p:not(.assessment-kicker) {
  color:var(--muted);
  letter-spacing:.025em;
  margin:30px 0;
  font-size:14px;
  line-height:2.2
}

.assessment ul {
  border-top:1px solid var(--line);
  margin:0 0 32px;
  padding:0;
  list-style:none
}

.assessment li {
  border-bottom:1px solid var(--line);
  letter-spacing:.025em;
  grid-template-columns:52px 1fr;
  gap:12px;
  padding:17px 0;
  font-size:16px;
  font-weight:500;
  display:grid
}

.assessment li span {
  color:var(--eco);
  font-size:11px;
  font-weight:900;
  line-height:1.5
}

.text-link {
  border:1px solid var(--eco);
  color:var(--eco-dark);
  letter-spacing:.04em;
  background:#fff;
  border-radius:999px;
  align-self:flex-start;
  align-items:center;
  gap:26px;
  padding:11px 20px;
  font-size:12px;
  font-weight:700;
  display:flex
}

.text-link span {
  font-size:18px
}

.support {
  background:var(--white);
  padding:125px max(5vw,26px) 135px
}

.support-head {
  grid-template-columns:200px 1fr .8fr;
  align-items:start;
  gap:5vw;
  max-width:1180px;
  margin:0 auto 72px;
  display:grid
}

.support-head>p {
  color:var(--muted);
  letter-spacing:.025em;
  margin:49px 0 0;
  font-size:14px;
  line-height:2.15
}

.support-grid {
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1180px;
  margin:0 auto;
  display:grid
}

.support-grid article {
  border:1px solid var(--line);
  background:var(--cream);
  border-radius:22px;
  min-height:250px;
  padding:29px 25px;
  transition:transform .25s,background .25s
}

.support-grid article:hover {
  background:var(--cream-deep);
  transform:translateY(-4px)
}

.support-grid article>span {
  color:var(--eco);
  margin-bottom:48px;
  font-size:14px;
  font-weight:900;
  display:block
}

.support-grid h3 {
  letter-spacing:.035em;
  margin:0 0 17px;
  font-size:21px;
  font-weight:700
}

.support-grid p {
  color:var(--muted);
  letter-spacing:.02em;
  margin:0;
  font-size:15px;
  line-height:2
}

.flow {
  max-width:1240px;
  margin:0 auto;
  padding:125px 30px 140px
}

.flow-heading {
  grid-template-columns:200px 1fr;
  gap:5vw;
  margin-bottom:60px;
  display:grid
}

.flow-list {
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  display:grid
}

.flow-list li {
  border:1px solid var(--line);
  background:var(--white);
  border-radius:22px;
  min-height:265px;
  padding:34px 30px;
  position:relative
}

.flow-list li:not(:last-child):after {
  content:"→";
  z-index:2;
  color:#fff;
  background:var(--eco);
  border-radius:50%;
  place-items:center;
  width:34px;
  height:34px;
  font-size:12px;
  display:grid;
  position:absolute;
  top:50%;
  right:-26px;
  box-shadow:0 4px 14px #5c8b0a33
}

.flow-list li>span {
  color:var(--eco);
  letter-spacing:.07em;
  margin-bottom:43px;
  font-size:11px;
  font-weight:900;
  display:block
}

.flow-list strong {
  letter-spacing:.05em;
  margin-bottom:17px;
  font-size:22px;
  font-weight:700;
  display:block
}

.flow-list p {
  color:var(--muted);
  letter-spacing:.02em;
  margin:0;
  font-size:15px;
  line-height:2
}

.local-area {
  background:var(--cream-deep);
  padding:125px max(5vw,26px) 135px
}

.local-area-head {
  grid-template-columns:240px 1fr;
  gap:30px;
  max-width:1180px;
  margin:0 auto 65px;
  display:grid
}

.local-area-head>div:last-child>p,.faq-heading>div:last-child>p {
  color:var(--eco-dark);
  letter-spacing:.07em;
  margin:0 0 18px;
  font-size:16px;
  font-weight:700
}

.local-area h2,.faq h2 {
  letter-spacing:.035em;
  margin:0;
  font-size:clamp(36px,4.1vw,60px);
  font-weight:700;
  line-height:1.5
}

.area-content {
  grid-template-columns:1.2fr .8fr;
  gap:42px;
  max-width:1180px;
  margin:0 auto;
  display:grid
}

.area-list {
  gap:12px;
  display:grid
}

.area-list article {
  border:1px solid var(--line);
  background:#ffffffbf;
  border-radius:18px;
  grid-template-columns:140px 1fr;
  gap:20px;
  padding:23px 26px;
  display:grid
}

.area-list h3 {
  color:var(--eco-dark);
  margin:0;
  font-size:16px
}

.area-list p {
  color:var(--muted);
  margin:0;
  font-size:12px;
  line-height:1.9
}

.area-links {
  gap:12px;
  display:grid
}

.area-links a {
  color:#fff;
  background:var(--eco-dark);
  border-radius:18px;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:27px;
  transition:transform .2s,background .2s;
  display:flex
}

.area-links a:hover {
  background:var(--eco-deep);
  transform:translateY(-3px)
}

.area-links strong {
  font-size:17px;
  line-height:1.6
}

.area-links span {
  color:#ffffffb8;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  display:flex
}

.area-note {
  color:#819177;
  max-width:1180px;
  margin:18px auto 0;
  font-size:9px
}

.faq {
  max-width:1240px;
  margin:0 auto;
  padding:125px 30px 140px
}

.faq-heading {
  grid-template-columns:240px 1fr;
  gap:30px;
  margin-bottom:65px;
  display:grid
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  cursor:pointer;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:15px;
  padding:25px 8px;
  font-size:16px;
  font-weight:700;
  line-height:1.7;
  list-style:none;
  display:grid
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary:after {
  content:"＋";
  color:var(--eco);
  grid-column:3;
  font-size:21px
}

.faq-list details[open] summary:after {
  content:"−"
}

.faq-list summary>span,.faq-list details>div>span {
  color:#fff;
  background:var(--eco);
  border-radius:50%;
  place-items:center;
  width:32px;
  height:32px;
  font-weight:900;
  display:grid
}

.faq-list details>div {
  grid-template-columns:38px 1fr;
  gap:15px;
  padding:0 8px 26px;
  display:grid
}

.faq-list details>div>span {
  color:var(--eco-dark);
  background:var(--cream-deep)
}

.faq-list details>div p {
  color:var(--muted);
  margin:4px 0 0;
  font-size:15px;
  line-height:2
}

.cta {
  text-align:center;
  min-height:560px;
  color:var(--text);
  background:linear-gradient(135deg,#f4f8d9,var(--cream));
  place-items:center;
  padding:100px 30px;
  display:grid;
  position:relative;
  overflow:hidden
}

.cta-orbit {
  border:1px solid #06af8080;
  border-radius:50%;
  width:650px;
  height:650px;
  position:absolute
}

.cta-orbit:before,.cta-orbit:after {
  content:"";
  border:1px solid #8bc2082b;
  border-radius:50%;
  position:absolute
}

.cta-orbit:before {
  inset:70px
}

.cta-orbit:after {
  inset:140px
}

.cta-mark {
  object-fit:contain;
  opacity:.2;
  filter:sepia()saturate(8)hue-rotate(35deg);
  width:400px;
  height:400px;
  position:absolute
}

.cta-content {
  z-index:2;
  max-width:850px;
  position:relative
}

.cta-content>p {
  color:var(--eco-dark);
  letter-spacing:.18em;
  margin:0 0 22px;
  font-size:9px;
  font-weight:700
}

.cta-content>span {
  max-width:680px;
  color:var(--muted);
  letter-spacing:.025em;
  margin:22px auto 34px;
  font-size:16px;
  line-height:2;
  display:block
}

.cta-actions {
  justify-content:center;
  align-items:center;
  gap:35px;
  display:flex
}

.cta-form {
  text-align:left;
  color:#fff;
  background:var(--eco);
  border-radius:16px;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  min-width:330px;
  padding:20px 22px 20px 25px;
  font-size:14px;
  font-weight:700;
  transition:transform .2s,background .2s;
  display:flex;
  box-shadow:0 14px 32px #6c9c0733
}

.cta-form:hover {
  background:#7cb004;
  transform:translateY(-3px)
}

.cta-form>span:first-child {
  flex-direction:column;
  gap:4px;
  display:flex
}

.cta-form small {
  letter-spacing:.1em;
  opacity:.8;
  font-size:9px
}

.cta-form>span:last-child {
  font-size:20px
}

.cta-phone {
  text-align:left;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  display:flex
}

.cta-phone small {
  color:#76866f;
  letter-spacing:.08em;
  font-size:9px
}

.cta-phone strong {
  letter-spacing:.02em;
  color:var(--eco-dark);
  font-size:25px;
  font-weight:700;
  line-height:1.3
}

.cta-phone span {
  color:#899684;
  font-size:9px
}

.company {
  color:var(--text);
  background:#edf4d4;
  padding:125px max(5vw,26px) 135px
}

.company-heading {
  grid-template-columns:240px 1fr;
  gap:30px;
  max-width:1180px;
  margin:0 auto 72px;
  display:grid
}

.company-kicker {
  color:var(--eco-dark);
  letter-spacing:.08em;
  margin:0 0 18px;
  font-size:12px;
  font-weight:700
}

.company .section-label.light {
  color:#7d9660
}

.company .section-label.light span {
  color:var(--eco-dark);
  background:#ffffff8c;
  border-color:#abc67c
}

.company-grid {
  grid-template-columns:1.35fr .9fr;
  gap:9vw;
  max-width:1180px;
  margin:0 auto;
  display:grid
}

.company-details {
  margin:0
}

.company-details>div {
  border-top:1px solid var(--line);
  grid-template-columns:130px 1fr;
  gap:25px;
  padding:22px 0;
  display:grid
}

.company-details>div:last-child {
  border-bottom:1px solid var(--line)
}

.company-details dt {
  color:#789064;
  letter-spacing:.07em;
  font-size:10px
}

.company-details dd {
  letter-spacing:.025em;
  margin:0;
  font-size:13px;
  line-height:1.9
}

.company-details a:hover {
  color:var(--eco-dark)
}

.licenses>p {
  color:#829371;
  letter-spacing:.13em;
  margin:3px 0 20px;
  font-size:9px;
  font-weight:700
}

.licenses article {
  border-top:1px solid var(--line);
  grid-template-columns:40px 1fr;
  gap:16px;
  padding:24px 0;
  display:grid
}

.licenses article:last-child {
  border-bottom:1px solid var(--line)
}

.licenses article>span {
  color:var(--eco);
  font-size:11px;
  font-weight:900;
  line-height:1.5
}

.licenses h3 {
  letter-spacing:.04em;
  margin:0 0 9px;
  font-size:18px;
  font-weight:700
}

.licenses article p {
  color:var(--muted);
  letter-spacing:.025em;
  margin:0;
  font-size:11px;
  line-height:1.8
}

footer {
  color:#fff;
  background:var(--eco-deep);
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  min-height:190px;
  padding:48px 5vw;
  display:grid
}

footer .brand {
  min-width:0
}

footer .brand strong {
  color:#fff
}

footer .brand small {
  color:#ffffffb3
}

footer .brand-logo {
  background:#ffffff24
}

.footer-links {
  gap:25px;
  display:flex
}

.footer-links a {
  color:#ffffffb3;
  letter-spacing:.04em;
  font-size:10px
}

footer>p {
  color:#ffffff8c;
  letter-spacing:.1em;
  justify-self:end;
  margin:0;
  font-size:8px;
  font-weight:500
}

.mobile-contact {
  display:none
}

.subpage-header {
  z-index:5;
  border-bottom:1px solid var(--line);
  background:#fcfbe8f5;
  justify-content:space-between;
  align-items:center;
  height:100px;
  padding:0 5vw;
  display:flex;
  position:relative
}

.seo-hero {
  background:var(--cream);
  grid-template-columns:1.05fr .95fr;
  min-height:650px;
  display:grid
}

.seo-hero-copy {
  flex-direction:column;
  justify-content:center;
  padding:70px 6vw 75px;
  display:flex
}

.breadcrumbs {
  color:#829573;
  align-items:center;
  gap:10px;
  margin-bottom:42px;
  font-size:10px;
  display:flex
}

.breadcrumbs a {
  text-underline-offset:3px;
  text-decoration:underline
}

.breadcrumbs span:last-child {
  color:#5d7054
}

.seo-eyebrow {
  color:var(--eco-dark);
  letter-spacing:.08em;
  margin:0 0 18px;
  font-size:12px;
  font-weight:700
}

.seo-service-page .seo-hero h1 {
  max-width:740px;
  color:var(--text);
  letter-spacing:.025em;
  text-shadow:none;
  margin:0;
  font-size:clamp(42px,4.8vw,70px);
  line-height:1.42
}

.seo-lead {
  max-width:680px;
  color:var(--muted);
  margin:26px 0 0;
  font-size:14px;
  line-height:2.1
}

.seo-hero-actions {
  align-items:center;
  gap:28px;
  margin-top:34px;
  display:flex
}

.seo-phone {
  flex-direction:column;
  gap:2px;
  display:flex
}

.seo-phone small,.seo-phone span {
  color:#829076;
  font-size:9px
}

.seo-phone strong {
  color:var(--eco-dark);
  font-size:22px
}

.seo-hero>img {
  object-fit:cover;
  object-position:60% center;
  width:100%;
  height:100%;
  min-height:650px
}

.seo-overview {
  grid-template-columns:200px 1fr;
  gap:6vw;
  max-width:1200px;
  margin:0 auto;
  padding:120px 30px 130px;
  display:grid
}

.seo-overview h2,.seo-section-head h2,.seo-area h2,.seo-related h2 {
  letter-spacing:.03em;
  margin:0;
  font-size:clamp(34px,3.8vw,54px);
  line-height:1.55
}

.seo-overview-copy {
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin-top:42px;
  display:grid
}

.seo-overview-copy p {
  color:var(--muted);
  margin:0;
  font-size:13px;
  line-height:2.2
}

.seo-benefits {
  background:var(--cream-deep);
  padding:115px max(5vw,25px) 125px
}

.seo-section-head {
  grid-template-columns:200px 1fr;
  gap:5vw;
  max-width:1180px;
  margin:0 auto 60px;
  display:grid
}

.seo-benefit-grid {
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  max-width:1180px;
  margin:0 auto;
  display:grid
}

.seo-benefit-grid article {
  border:1px solid var(--line);
  background:#ffffffbf;
  border-radius:22px;
  min-height:245px;
  padding:28px
}

.seo-benefit-grid article>span {
  color:var(--eco);
  margin-bottom:37px;
  font-size:16px;
  font-weight:900;
  display:block
}

.seo-benefit-grid h3 {
  margin:0 0 15px;
  font-size:19px
}

.seo-benefit-grid p {
  color:var(--muted);
  margin:0;
  font-size:12px;
  line-height:2
}

.seo-trust {
  color:#fff;
  background:var(--eco-dark);
  grid-template-columns:1fr 1fr;
  display:grid
}

.seo-trust>div {
  border-right:1px solid #fff3;
  min-height:275px;
  padding:58px max(6vw,40px)
}

.seo-trust small {
  color:#ffffffa6;
  letter-spacing:.14em;
  margin-bottom:20px;
  font-size:9px;
  display:block
}

.seo-trust strong {
  margin-bottom:18px;
  font-size:23px;
  line-height:1.55;
  display:block
}

.seo-trust p {
  color:#ffffffb8;
  margin:0;
  font-size:12px;
  line-height:2
}

.seo-area {
  grid-template-columns:200px 1fr;
  gap:6vw;
  max-width:1200px;
  margin:0 auto;
  padding:115px 30px 125px;
  display:grid
}

.seo-area-main>p {
  max-width:760px;
  color:var(--muted);
  margin:28px 0 30px;
  font-size:13px;
  line-height:2
}

.seo-area-main>div {
  flex-wrap:wrap;
  gap:9px;
  display:flex
}

.seo-area-main>div span {
  color:#597344;
  background:#fff;
  border:1px solid #bfd692;
  border-radius:999px;
  padding:11px 16px;
  font-size:11px
}

.seo-faq {
  background:var(--white);
  padding:115px max(5vw,25px) 125px
}

.seo-faq .faq-list {
  max-width:1180px;
  margin:0 auto
}

.seo-related {
  text-align:center;
  background:var(--cream-deep);
  padding:90px 30px 100px
}

.seo-related>p {
  color:var(--eco-dark);
  letter-spacing:.16em;
  margin:0 0 18px;
  font-size:9px;
  font-weight:700
}

.seo-related>a {
  color:#fff;
  background:var(--eco-dark);
  text-align:left;
  border-radius:18px;
  justify-content:space-between;
  align-items:center;
  max-width:620px;
  margin:38px auto 0;
  padding:26px 30px;
  display:flex
}

.seo-related>a strong {
  font-size:18px
}

.seo-related>a span {
  font-size:10px
}

.seo-cta {
  min-height:540px
}

@media (width<=980px) {
  nav {
    display:none
  }

  .site-header {
    height:90px
  }

  .hero {
    min-height:760px
  }

  .hero-content {
    padding-top:105px
  }

  .hero-shade {
    background:linear-gradient(90deg,#fcfbe8fa,#fcfbe8d9 52%,#fcfbe82e)
  }

  .hero-note {
    right:0
  }

  .hero-note span {
    padding:18px
  }

  .intro {
    grid-template-columns:130px minmax(0,1fr)
  }

  .intro-side {
    display:none
  }

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

  .occasions {
    grid-template-columns:130px minmax(0,1fr)
  }

  .occasions-copy {
    grid-column:2
  }

  .assessment-content {
    padding:75px 45px
  }

  .support-head {
    grid-template-columns:160px 1fr
  }

  .support-head>p {
    grid-column:2;
    margin-top:0
  }

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

  .area-content {
    grid-template-columns:1fr
  }

  .local-area-head,.faq-heading {
    grid-template-columns:180px 1fr
  }

  footer {
    grid-template-columns:1fr auto
  }

  .footer-links {
    display:none
  }

}

@media (width<=680px) {
  html {
    scroll-padding-top:76px
  }

  .hero {
    height:auto;
    min-height:820px
  }

  .hero-photo {
    background-position:67%
  }

  .hero-shade {
    background:linear-gradient(#fcfbe8fa 0%,#fcfbe8ed 37%,#fcfbe870 62%,#fcfbe833 100%)
  }

  .site-header {
    height:78px;
    padding:0 18px
  }

  .brand {
    gap:9px;
    min-width:0
  }

  .brand-logo {
    border-radius:10px;
    width:40px;
    height:40px;
    padding:5px
  }

  .brand small {
    font-size:7px
  }

  .brand strong {
    font-size:20px
  }

  .header-cta {
    gap:7px;
    padding:12px 13px;
    font-size:10px
  }

  .header-cta span {
    font-size:14px
  }

  .hero-content {
    width:auto;
    margin:0 23px;
    padding-top:85px
  }

  .eyebrow {
    letter-spacing:.05em;
    font-size:10px
  }

  h1 {
    font-size:clamp(42px,11vw,59px);
    line-height:1.35
  }

  .hero-copy {
    letter-spacing:.015em;
    font-size:13px;
    line-height:1.9
  }

  .desktop {
    display:none
  }

  .hero-seo-line {
    margin-bottom:8px;
    font-size:17px
  }

  .hero-actions {
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    margin-top:30px
  }

  .primary-button {
    width:100%;
    min-width:0
  }

  .phone-link {
    background:#fcfbe8d1;
    border-radius:14px;
    align-items:center;
    padding:10px
  }

  .phone-link strong {
    font-size:24px
  }

  .hero-note {
    border-radius:14px 14px 0 0;
    grid-template-columns:repeat(3,1fr);
    display:grid;
    left:0;
    right:0
  }

  .hero-note span {
    text-align:center;
    padding:15px 6px;
    font-size:8px
  }

  .trust-bar {
    grid-template-columns:1fr
  }

  .trust-bar div {
    border-right:0;
    border-bottom:1px solid var(--line);
    min-height:auto;
    padding:23px 50px
  }

  .trust-bar div:before {
    width:6px;
    height:37px;
    left:25px
  }

  .trust-bar div:last-child {
    border-bottom:0
  }

  .trust-bar strong {
    font-size:17px
  }

  .intro {
    grid-template-columns:1fr;
    gap:38px;
    padding:80px 24px 90px
  }

  .intro h2,.features h2 {
    font-size:30px
  }

  .intro-copy {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:32px
  }

  .intro-copy p {
    font-size:13px;
    line-height:2.1
  }

  .features {
    padding:80px 23px 76px
  }

  .features-head {
    grid-template-columns:1fr;
    gap:38px;
    margin-bottom:45px
  }

  .feature-grid {
    grid-template-columns:1fr
  }

  .feature-grid article {
    min-height:auto;
    padding:27px 24px
  }

  .feature-number {
    margin-bottom:25px
  }

  .feature-grid h3 {
    font-size:18px
  }

  .occasions {
    grid-template-columns:1fr;
    gap:38px;
    padding:80px 24px 88px
  }

  .occasions h2,.support h2,.flow h2,.assessment h2,.cta h2,.company h2 {
    font-size:30px
  }

  .occasions-copy {
    grid-column:auto;
    margin:0;
    font-size:13px;
    line-height:2.1
  }

  .occasion-tags {
    margin-top:30px
  }

  .occasion-tags span {
    min-width:calc(33.333% - 7px);
    padding:11px 7px;
    font-size:12px
  }

  .assessment {
    grid-template-columns:1fr
  }

  .assessment-photo {
    background-position:61%;
    min-height:360px
  }

  .assessment-content {
    padding:65px 24px 72px
  }

  .assessment-kicker {
    margin-top:38px
  }

  .assessment-content>p:not(.assessment-kicker) {
    font-size:12px
  }

  .assessment li {
    grid-template-columns:40px 1fr;
    font-size:11px
  }

  .support {
    padding:80px 23px 88px
  }

  .support-head {
    grid-template-columns:1fr;
    gap:38px;
    margin-bottom:45px
  }

  .support-head>p {
    grid-column:auto;
    margin:0
  }

  .support-grid {
    grid-template-columns:1fr
  }

  .support-grid article {
    min-height:auto
  }

  .support-grid article>span {
    margin-bottom:28px
  }

  .flow {
    padding:80px 23px 88px
  }

  .flow-heading {
    grid-template-columns:1fr;
    gap:38px;
    margin-bottom:45px
  }

  .flow-list {
    grid-template-columns:1fr
  }

  .flow-list li {
    min-height:auto;
    padding:27px 24px
  }

  .flow-list li:not(:last-child):after {
    content:"↓";
    top:auto;
    bottom:-27px;
    right:calc(50% - 17px)
  }

  .flow-list li>span {
    margin-bottom:24px
  }

  .local-area {
    padding:80px 23px 88px
  }

  .local-area-head,.faq-heading {
    grid-template-columns:1fr;
    gap:38px;
    margin-bottom:45px
  }

  .local-area h2,.faq h2 {
    font-size:32px
  }

  .area-content {
    grid-template-columns:1fr;
    gap:28px
  }

  .area-list article {
    grid-template-columns:1fr;
    gap:8px;
    padding:20px
  }

  .area-links strong {
    font-size:15px
  }

  .faq {
    padding:80px 23px 88px
  }

  .faq-list summary {
    grid-template-columns:32px 1fr auto;
    gap:10px;
    padding:21px 0;
    font-size:13px
  }

  .faq-list details>div {
    grid-template-columns:32px 1fr;
    gap:10px;
    padding:0 0 23px
  }

  .faq-list summary>span,.faq-list details>div>span {
    width:29px;
    height:29px;
    font-size:12px
  }

  .faq-list details>div p {
    font-size:12px
  }

  .cta {
    min-height:620px;
    padding:78px 23px 86px
  }

  .cta-orbit {
    width:500px;
    height:500px
  }

  .cta-mark {
    width:300px;
    height:300px
  }

  .cta-content>span {
    font-size:12px
  }

  .cta-actions {
    flex-direction:column;
    gap:24px
  }

  .cta-form {
    width:100%;
    min-width:0
  }

  .cta-phone {
    text-align:center;
    align-items:center
  }

  .company {
    padding:80px 23px 93px
  }

  .company-heading {
    grid-template-columns:1fr;
    gap:38px;
    margin-bottom:50px
  }

  .company-grid {
    grid-template-columns:1fr;
    gap:60px
  }

  .company-details>div {
    grid-template-columns:88px 1fr;
    gap:14px
  }

  .company-details dd {
    overflow-wrap:anywhere;
    font-size:11px
  }

  footer {
    grid-template-columns:1fr;
    justify-items:start;
    min-height:210px;
    padding:48px 24px 100px
  }

  footer>p {
    justify-self:start
  }

  .mobile-contact {
    z-index:20;
    grid-template-columns:.85fr 1.15fr;
    display:grid;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    box-shadow:0 -8px 25px #48681333
  }

  .mobile-contact a {
    text-align:center;
    color:#fff;
    background:var(--eco-deep);
    letter-spacing:.03em;
    padding:16px 8px;
    font-size:11px;
    font-weight:700
  }

  .mobile-contact a:last-child {
    color:#fff;
    background:var(--eco)
  }

}

@media (prefers-reduced-motion:no-preference) {
  .hero-photo {
    animation:16s ease-out both heroZoom
  }

  @keyframes heroZoom {
    0% {
      transform:scale(1.035)
    }

    to {
      transform:scale(1.012)
    }

  }

}

@media (width<=980px) {
  .subpage-header {
    height:90px
  }

  .seo-hero {
    grid-template-columns:1.1fr .9fr
  }

  .seo-hero-copy {
    padding:55px 4vw 65px
  }

  .seo-hero>img {
    min-height:600px
  }

  .seo-benefit-grid {
    grid-template-columns:repeat(2,1fr)
  }

}

@media (width<=680px) {
  .subpage-header {
    height:78px;
    padding:0 18px
  }

  .seo-hero {
    flex-direction:column-reverse;
    display:flex
  }

  .seo-hero>img {
    object-position:58% center;
    height:310px;
    min-height:310px
  }

  .seo-hero-copy {
    padding:35px 23px 65px
  }

  .breadcrumbs {
    margin-bottom:30px
  }

  .seo-service-page .seo-hero h1 {
    font-size:38px
  }

  .seo-lead {
    font-size:13px
  }

  .seo-hero-actions {
    flex-direction:column;
    align-items:stretch
  }

  .seo-hero-actions .primary-button {
    width:100%
  }

  .seo-phone {
    align-items:center
  }

  .seo-overview {
    grid-template-columns:1fr;
    gap:38px;
    padding:78px 23px 85px
  }

  .seo-overview h2,.seo-section-head h2,.seo-area h2,.seo-related h2 {
    font-size:31px
  }

  .seo-overview-copy {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:30px
  }

  .seo-overview-copy p {
    font-size:12px
  }

  .seo-benefits {
    padding:78px 23px 85px
  }

  .seo-section-head {
    grid-template-columns:1fr;
    gap:35px;
    margin-bottom:42px
  }

  .seo-benefit-grid {
    grid-template-columns:1fr
  }

  .seo-benefit-grid article {
    min-height:auto
  }

  .seo-benefit-grid article>span {
    margin-bottom:24px
  }

  .seo-trust {
    grid-template-columns:1fr
  }

  .seo-trust>div {
    border-bottom:1px solid #fff3;
    border-right:0;
    min-height:auto;
    padding:45px 24px
  }

  .seo-trust strong {
    font-size:20px
  }

  .seo-area {
    grid-template-columns:1fr;
    gap:38px;
    padding:78px 23px 85px
  }

  .seo-area-main>p {
    font-size:12px
  }

  .seo-area-main>div span {
    font-size:10px
  }

  .seo-faq {
    padding:78px 23px 85px
  }

  .seo-related {
    padding:70px 23px 80px
  }

  .seo-related>a {
    gap:16px;
    padding:22px
  }

  .seo-related>a strong {
    font-size:15px
  }

  .seo-cta {
    min-height:600px
  }

}