@import url("fonts.css");

/* =========================================================================
   Dillirófa - design tokens
   Palette: deep spruce green + green-tinted paper + a single warm coral accent.
   Radius rule: buttons and chips are pill, cards and media are 22px,
   form inputs are 12px. Nothing else invents its own radius.
   ========================================================================= */

:root {
  /* light theme (default) */
  --paper:        #F4F7F2;
  --paper-2:      #FFFFFF;
  --paper-3:      #E9F0EA;
  --ink:          #16221D;
  --ink-soft:     #4C5C55;
  --ink-faint:    #5E6E67;
  --brand:        #0F4A3D;
  --brand-deep:   #0A2E26;
  --brand-soft:   #E1EBE4;
  --accent:       #E2683F;
  --accent-ink:   #9E3F1C;
  --line:         #D9E3DB;
  --line-strong:  #BCCCC0;

  --btn-fg:       #FFFFFF;
  --btn-bg:       #0F4A3D;
  --btn-bg-hover: #0B3A30;

  /* on the dark brand band */
  --on-brand:       #EAF3EC;
  --on-brand-soft:  #A9C4B6;
  --on-brand-line:  rgba(234, 243, 236, 0.16);

  --shadow-sm: 0 1px 2px rgba(16, 40, 32, .05), 0 2px 8px rgba(16, 40, 32, .04);
  --shadow-md: 0 2px 6px rgba(16, 40, 32, .06), 0 18px 40px -18px rgba(16, 40, 32, .22);
  --shadow-lg: 0 4px 12px rgba(16, 40, 32, .07), 0 40px 80px -32px rgba(16, 40, 32, .30);

  --r-input: 12px;
  --r-card: 22px;
  --r-pill: 999px;

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0C1512;
    --paper-2:      #13201B;
    --paper-3:      #182821;
    --ink:          #EAF1EC;
    --ink-soft:     #AABDB4;
    --ink-faint:    #92A79D;
    --brand:        #6FCFB0;
    --brand-deep:   #071310;
    --brand-soft:   #1C3029;
    --accent:       #FF8A5C;
    --accent-ink:   #FFA07A;
    --line:         #253429;
    --line-strong:  #35493C;

    --btn-fg:       #06201A;
    --btn-bg:       #6FCFB0;
    --btn-bg-hover: #8CDCC1;

    --on-brand:       #EAF3EC;
    --on-brand-soft:  #9DB8AA;
    --on-brand-line:  rgba(234, 243, 236, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .6);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .4), 0 40px 80px -32px rgba(0, 0, 0, .7);

    color-scheme: dark;
  }
}

/* =========================================================================
   Base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain. Fixed and non-interactive so it never repaints on scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--accent); color: #fff; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

/* =========================================================================
   Layout primitives
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.lede {
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, .98rem + .42vw, 1.25rem);
  line-height: 1.62;
  max-width: 56ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}
.eyebrow svg { width: 15px; height: 15px; }

.h-xl { font-size: clamp(2.4rem, 1.7rem + 2.9vw, 3.55rem); }
.h-lg { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
.h-md { font-size: clamp(1.5rem, 1.28rem + 1.05vw, 2.05rem); }
.h-sm { font-size: clamp(1.15rem, 1.06rem + .42vw, 1.35rem); letter-spacing: -.018em; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .16s var(--ease),
              box-shadow .22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }

.btn--on-brand {
  background: var(--on-brand);
  color: var(--brand-deep);
}
.btn--on-brand:hover { background: #fff; }

.btn--ghost-on-brand {
  background: transparent;
  color: var(--on-brand);
  border-color: rgba(234, 243, 236, .38);
}
.btn--ghost-on-brand:hover { border-color: var(--on-brand); background: rgba(234, 243, 236, .08); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* Text link with an arrow that slides on hover */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.tlink svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.tlink:hover { border-color: currentColor; }
.tlink:hover svg { transform: translateX(3px); }

/* =========================================================================
   Header / navigation
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand__paw {
  width: 26px;
  height: 26px;
  color: var(--accent);
  transition: transform .35s var(--ease);
}
.brand:hover .brand__paw { transform: rotate(-14deg) scale(1.08); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  position: relative;
  font-size: .975rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: .35rem;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav__cta { flex: none; }
.nav__cta .btn { padding: .7rem 1.25rem; font-size: .95rem; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after { top: 5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__links, .nav__cta { display: none; }

  .nav__panel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 1rem var(--gutter) 1.75rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    clip-path: inset(0 0 100% 0);
    transition: clip-path .38s var(--ease);
  }
  .nav__panel[data-open="true"] { clip-path: inset(0 0 0 0); }
  .nav__panel ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: .25rem;
  }
  .nav__panel a {
    display: block;
    padding: .8rem .25rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
  }
  .nav__panel a[aria-current="page"] { color: var(--accent-ink); }
  .nav__panel .btn { width: 100%; }
}

@media (min-width: 901px) {
  .nav__panel { display: none; }
}

/* =========================================================================
   Hero (asymmetric split)
   ========================================================================= */

.hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.75rem);
  overflow: hidden;
}

/* soft brand wash behind the hero, replaces a flat colour block */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -30%;
  height: 70%;
  background:
    radial-gradient(48% 60% at 22% 38%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
    radial-gradient(40% 55% at 78% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title { margin-bottom: 1.75rem; }

/* the "tail" flourish: one simple curved stroke under a single word */
.wag {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.wag svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.28em;
  width: 100%;
  height: .34em;
  overflow: visible;
  color: var(--accent);
}
.wag path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: wag-draw 1.1s var(--ease) .55s forwards;
}
@keyframes wag-draw { to { stroke-dashoffset: 0; } }

.hero__actions { margin-top: 2rem; }

/* No overflow clip here: the badge is meant to hang past the left edge, and
   clipping it lopped off its rounded cap. The image rounds its own corners. */
.hero__media {
  position: relative;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
}
.hero__media img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 46% 42%;
}

/* small floating fact card overlapping the photo */
.hero__badge {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -1rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.15rem .85rem .95rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  max-width: calc(100% - 2rem);
}
.hero__badge svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.hero__badge b {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.hero__badge span {
  display: block;
  font-size: .8rem;
  color: var(--ink-faint);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__badge { left: 1rem; right: 1rem; max-width: none; }
}

/* =========================================================================
   Proof strip (thin band under the hero)
   ========================================================================= */

.strip {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}
.strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.strip__item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.6rem clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--line);
}
.strip__item:first-child { border-left: 0; padding-left: 0; }
.strip__item:last-child { padding-right: 0; }
.strip__item svg { width: 21px; height: 21px; color: var(--accent); flex: none; margin-top: .15rem; }
.strip__item b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .1rem;
}
.strip__item p { font-size: .9rem; color: var(--ink-faint); line-height: 1.45; }

@media (max-width: 760px) {
  .strip__grid { grid-template-columns: 1fr; }
  .strip__item {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-inline: 0;
    padding-block: 1.15rem;
  }
  .strip__item:first-child { border-top: 0; }
}

/* =========================================================================
   Benefits (asymmetric bento, 3 cells)
   ========================================================================= */

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.cell {
  position: relative;
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cell:hover { transform: translateY(-3px); }

/* Base type first. The variants below override colour, so they must come
   after these rules: they carry identical specificity and source order wins. */
.cell h3 { margin-bottom: .6rem; }
.cell p { color: var(--ink-soft); font-size: 1rem; line-height: 1.58; }

/* cell 1: tall, photographic */
.cell--photo {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 27rem;
  padding: 0;
  box-shadow: var(--shadow-md);
}
.cell--photo:hover { box-shadow: var(--shadow-lg); }
.cell--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 70%;
}
/* The scrim has to carry body text over a bright window, so it runs deep. */
.cell--photo .cell__body {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  color: #F2F7F3;
  background: linear-gradient(to top,
    rgba(7, 22, 17, .96) 0%,
    rgba(7, 22, 17, .90) 32%,
    rgba(7, 22, 17, .62) 62%,
    rgba(7, 22, 17, .22) 85%,
    rgba(7, 22, 17, 0) 100%);
}
.cell--photo h3 { color: #FFFFFF; }
.cell--photo p { color: #DCE8E0; }

/* cell 2: solid brand tint */
.cell--tint {
  background: var(--brand-soft);
  border: 1px solid var(--line);
}

/* the two stacked cells centre their content so neither reads bottom-heavy */
.cell--tint, .cell--deep {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* cell 3: deep brand, inverted */
.cell--deep {
  background: var(--brand-deep);
  color: var(--on-brand);
}
.cell--deep h3 { color: var(--on-brand); }
.cell--deep p { color: var(--on-brand-soft); }
.cell--deep::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  pointer-events: none;
}

.cell__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink);
}
.cell__icon svg { width: 22px; height: 22px; }
.cell--tint .cell__icon {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--accent-ink);
}
.cell--deep .cell__icon { background: rgba(255, 255, 255, .12); color: var(--accent); }
.cell--photo .cell__icon { background: rgba(255, 255, 255, .18); color: #FFFFFF; }


@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .cell--photo { grid-row: auto; min-height: 22rem; }
}

/* =========================================================================
   Proof band (dark)
   ========================================================================= */

.band {
  position: relative;
  background: var(--brand-deep);
  color: var(--on-brand);
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  inset: auto -10% -55% 30%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%);
  pointer-events: none;
}
.band > .wrap { position: relative; z-index: 1; }
.band h2 { color: var(--on-brand); }
.band .eyebrow { color: var(--accent); }

.proof {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}

.proof__figure {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-display);
  letter-spacing: -.045em;
  line-height: .88;
}
.proof__figure b {
  font-size: clamp(4.5rem, 3rem + 6.5vw, 8rem);
  font-weight: 700;
  color: var(--on-brand);
}
.proof__figure i {
  font-style: normal;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem);
  font-weight: 600;
  color: var(--accent);
}
.proof__caption {
  margin-top: 1rem;
  color: var(--on-brand-soft);
  max-width: 34ch;
}
.proof__caption a { color: var(--on-brand); text-underline-offset: 3px; }

.proof__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--on-brand-line);
}
.proof__list li:first-child { border-top: 0; padding-top: 0; }
.proof__list li:last-child { padding-bottom: 0; }
.proof__list svg { width: 22px; height: 22px; color: var(--accent); margin-top: .2rem; }
.proof__list b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.proof__list p { color: var(--on-brand-soft); font-size: .975rem; line-height: 1.55; }

/* Customer quotes, verbatim from the Facebook page */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; }
.quotes li {
  padding-block: 1.6rem;
  border-top: 1px solid var(--on-brand-line);
}
.quotes li:first-child { border-top: 0; padding-top: 0; }
.quotes li:last-child { padding-bottom: 0; }
.quotes blockquote { margin: 0; }
.quotes p {
  color: var(--on-brand);
  font-size: clamp(1rem, .96rem + .22vw, 1.1rem);
  line-height: 1.55;
}
.quotes cite {
  display: block;
  margin-top: .8rem;
  font-style: normal;
  font-size: .9rem;
  font-weight: 600;
  color: var(--on-brand);
}
.quotes cite span {
  display: block;
  margin-top: .1rem;
  font-size: .84rem;
  font-weight: 400;
  color: var(--on-brand-soft);
}

/* Single quote used inline on a light section.
   Full margin shorthand: a bare blockquote keeps a 40px browser left margin. */
.quote-soft { margin: 1.75rem 0 0; }
.quote-soft p {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.22rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--ink);
}
.quote-soft cite {
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-size: .875rem;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr; gap: 2.25rem; }
  /* stacked, the first quote needs a rule or it reads as part of the caption */
  .quotes li:first-child { border-top: 1px solid var(--on-brand-line); padding-top: 1.6rem; }
}

/* =========================================================================
   FAQ (sticky heading + accordion)
   ========================================================================= */

.faq {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq__head { position: sticky; top: 7rem; }
.faq__head p { margin-top: 1rem; }

.qa {
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.qa:last-of-type { border-bottom: 1px solid var(--line); }

.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent-ink); }

.qa__chev {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: .1rem;
  color: var(--ink-faint);
  transition: transform .32s var(--ease), color .2s var(--ease);
}
.qa[open] .qa__chev { transform: rotate(180deg); color: var(--accent-ink); }

.qa__body {
  padding-bottom: 1.6rem;
  padding-right: clamp(0rem, 4vw, 3.5rem);
  color: var(--ink-soft);
  line-height: 1.65;
}
.qa__body p + p { margin-top: .85rem; }
.qa[open] .qa__body { animation: qa-in .34s var(--ease); }
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; gap: 1.75rem; }
  .faq__head { position: static; }
}

/* =========================================================================
   Closing CTA (photo band)
   ========================================================================= */

.closer {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-card);
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem);
  text-align: center;
  color: #F4F9F5;
}
.closer img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 26, 20, .74), rgba(7, 26, 20, .86));
}
.closer h2 { color: #FFFFFF; margin-bottom: 1rem; }
.closer p {
  color: #D3E2D8;
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
}
.closer .btn-row { justify-content: center; margin-top: 2rem; }

/* Stacked CTAs of differing widths read as ragged, so match them on mobile. */
@media (max-width: 560px) {
  .closer .btn-row { flex-direction: column; align-items: stretch; }
  .closer .btn-row .btn { width: 100%; }
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__grid h4 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.footer__about p { color: var(--ink-soft); font-size: .975rem; max-width: 34ch; margin-top: .9rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer__list a, .footer__list span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .975rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer__list a:hover { color: var(--accent-ink); }
.footer__list svg { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-faint);
}
.footer__social { display: flex; gap: .5rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.footer__social a:hover { color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* =========================================================================
   Inner page header
   ========================================================================= */

.page-head {
  position: relative;
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-bottom: clamp(.5rem, 1.5vw, 1.25rem);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: -40% 40% auto -20%;
  height: 130%;
  background: radial-gradient(45% 50% at 40% 50%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.page-head > .wrap { position: relative; z-index: 1; }
.page-head p { margin-top: 1.1rem; }

/* =========================================================================
   Services
   ========================================================================= */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
  align-items: start;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
/* the middle tier sits slightly proud so the row is not three identical blocks */
.tier--lift { background: var(--brand-soft); }
@media (min-width: 981px) {
  .tier--lift { margin-top: -1.75rem; padding-block: calc(clamp(1.6rem, 2.4vw, 2.1rem) + .875rem); }
}

.tier__size {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: .7rem;
}
.tier h3 { margin-bottom: .5rem; }
.tier__meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 500;
  /* ink-soft, not ink-faint: faint fails AA on the tinted middle tier */
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.tier__meta svg { width: 16px; height: 16px; }

.ticks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .6rem; }
.ticks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: .6rem;
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.ticks svg { width: 18px; height: 18px; color: var(--accent); margin-top: .18rem; }

.tier .btn { margin-top: auto; }

@media (max-width: 980px) {
  .tiers { grid-template-columns: 1fr; }
}

/* split feature row (poodle + add-on) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.split__media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-md);
  background: var(--paper-3);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.split h2 { margin-bottom: 1rem; }
.split .ticks { margin-top: 1.5rem; margin-bottom: 1.75rem; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split__media { aspect-ratio: 16 / 11; }
}

/* add-on callout */
.callout {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--accent-ink);
  border: 1px solid var(--line);
}
.callout__icon svg { width: 24px; height: 24px; }
.callout h3 { margin-bottom: .55rem; }
.callout p { color: var(--ink-soft); max-width: 62ch; }
.callout p + p { margin-top: .7rem; }

@media (max-width: 620px) {
  .callout { grid-template-columns: 1fr; gap: 1rem; }
}

/* process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
.step { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -.85rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
}
.step h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.step p { font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* =========================================================================
   About
   ========================================================================= */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.story__body p + p { margin-top: 1.1rem; }
.story__body p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.68; }
/* Height follows the text column rather than a fixed ratio, so the two
   columns do not end hundreds of pixels apart. */
.story__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 26rem;
  box-shadow: var(--shadow-md);
  background: var(--paper-3);
}
/* absolute so the photo fills the row instead of dictating its height */
.story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: 2rem; }
  .story__media { aspect-ratio: 16 / 11; min-height: 0; order: -1; }
}

/* pull quote */
.pull {
  max-width: 46ch;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 3px solid var(--accent);
}
.pull p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.28;
  color: var(--ink);
}
.pull cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: .92rem;
  color: var(--ink-faint);
}

/* values grid */
.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.value { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.value h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.value p { color: var(--ink-soft); font-size: .975rem; line-height: 1.6; }

@media (max-width: 700px) { .values { grid-template-columns: 1fr; } }

/* =========================================================================
   Contact
   ========================================================================= */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

.info { display: grid; gap: 0; }
.info__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
}
.info__row:first-child { border-top: 0; padding-top: 0; }
.info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--accent-ink);
  flex: none;
}
.info__icon svg { width: 20px; height: 20px; }
.info__row h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.info__row p, .info__row a {
  font-size: .975rem;
  color: var(--ink-soft);
  line-height: 1.55;
  text-decoration: none;
}
.info__row a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.info__note { font-size: .875rem; color: var(--ink-faint); margin-top: .35rem; }
.info__note a {
  font-size: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.map {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 16 / 10;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* form */
.form {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.form h2 { margin-bottom: .6rem; }
.form > p { color: var(--ink-soft); font-size: .975rem; margin-bottom: 1.75rem; }

.field { display: grid; gap: .45rem; margin-bottom: 1.15rem; }
.field label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.field label .opt { font-weight: 400; color: var(--ink-faint); }
.field .hint { font-size: .84rem; color: var(--ink-faint); line-height: 1.4; }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.field select { appearance: none; cursor: pointer; padding-right: 2.75rem; }

.select-wrap { position: relative; }
.select-wrap > svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); opacity: 1; }

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--ink-faint); }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--paper-2);
}

.field .error {
  display: none;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  font-weight: 500;
  color: var(--accent-ink);
}
.field[data-invalid="true"] .error { display: flex; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--accent-ink); }

.form__submit { width: 100%; margin-top: .35rem; }
.form__submit[data-loading="true"] { pointer-events: none; opacity: .75; }

.spinner {
  width: 17px;
  height: 17px;
  border: 2px solid color-mix(in srgb, var(--btn-fg) 35%, transparent);
  border-top-color: var(--btn-fg);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  display: none;
  gap: .75rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-input);
  font-size: .95rem;
  line-height: 1.5;
}
.form__status[data-show="true"] { display: flex; }
.form__status[data-kind="ok"] {
  background: var(--brand-soft);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.form__status svg { width: 20px; height: 20px; color: var(--accent-ink); flex: none; margin-top: .1rem; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =========================================================================
   Scroll reveal (opt-in, transform + opacity only)
   ========================================================================= */

/* Gated on .js so that without JavaScript nothing is ever left invisible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .hero__rise {
    opacity: 0;
    transform: translateY(20px);
    animation: rise .85s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wag path { stroke-dashoffset: 0; }
}