/* ===================================================================
   SECTIONS — each one is a place you arrive at
   =================================================================== */

main { position: relative; z-index: 5; }

section { padding-inline: var(--gutter); }

.place-label {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  color: color-mix(in oklab, var(--live), var(--bark-silver) 45%);
}

/* --- Topbar --------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 1.1rem var(--gutter);
  background: linear-gradient(180deg, color-mix(in oklab, var(--hollow), transparent 25%), transparent);
  backdrop-filter: blur(2px);
}
.topbar__mark { margin-right: auto; }
.topbar__mark span { color: var(--paper); letter-spacing: .3em; }
.topbar__nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); }
.topbar__nav a {
  font-family: var(--font-guide);
  font-size: var(--t-guide);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding: .4rem .1rem;
  border-bottom: 1px solid transparent;
  transition: color 260ms, border-color 260ms;
}
.topbar__nav a:hover, .topbar__nav a:focus-visible {
  color: var(--live);
  border-bottom-color: var(--live);
}


/* Nav is the only thing competing with the mark now that the sound
   toggle is gone, so the mark can stay at every width. */
@media (max-width: 560px) {
  .topbar { gap: .7rem; padding-inline: 1rem; }
  .topbar__nav { gap: .85rem; }
  .topbar__nav a { letter-spacing: .1em; }
  .topbar__mark span { letter-spacing: .18em; }
}

/* --- Hero ----------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: 17vh 14vh;
  position: relative;
}
/* The hero deliberately has no clearing floor — it should be the
   brightest place on the site. But the headline still has to survive
   sitting on a god-ray, so the light is pushed to the right, away from
   the text column. This is the shadowed side of a lit clearing. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--hollow), transparent 34%) 0%,
    color-mix(in oklab, var(--hollow), transparent 52%) 30%,
    transparent 58%);
}
@media (max-width: 780px) {
  /* Text runs full width here, so the veil has to be even */
  .hero::before {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--hollow), transparent 46%) 0%,
      color-mix(in oklab, var(--hollow), transparent 34%) 38%,
      color-mix(in oklab, var(--hollow), transparent 40%) 78%,
      transparent 100%);
  }
}

/* Not ch: ch here would resolve against the body font-size rather than
   the display size, and the headline would wrap to six lines. */
.hero__inner { max-width: min(92vw, 44rem); }
.hero__title {
  font-size: var(--t-hero);
  display: grid;
  margin-block: .3em .55em;
}
/* Rim-light: a backlit leaf glows at its edge while its face stays dark.
   Same physics applied to type. */
.hero__title span:nth-child(1) { color: var(--paper); }
/* THE DESCENDER FIX.
   background-clip: text paints the gradient only inside the element's
   own box. A descender (the g in "edge") hangs BELOW that box, so it
   got no gradient and read as sliced off. Pad the box down past the
   descender and pull the layout back with an equal negative margin. */
.hero__title span:nth-child(2) {
  color: transparent;
  background: linear-gradient(96deg, var(--sun-core), var(--sun) 46%, var(--ember));
  -webkit-background-clip: text; background-clip: text;
  font-style: italic;
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  padding-block: .12em .30em;
  margin-block: -.12em -.30em;
}
.hero__title span:nth-child(3) { color: var(--paper); }

.hero__sub {
  max-width: 46ch;
  color: var(--paper-dim);
  font-size: var(--t-lead);
  line-height: 1.45;
}
.hero__sub b { color: var(--paper); font-weight: 600; }

.hero__cue {
  position: absolute;
  bottom: clamp(2rem, 6vh, 4rem);
  left: var(--gutter);
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-guide);
  font-size: var(--t-guide);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: color 300ms;
}
.hero__cue:hover, .hero__cue:focus-visible { color: var(--live); }
.hero__cue svg { width: 12px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hero__cue svg { animation: cue 3.2s var(--ease-settle) infinite; }
@keyframes cue {
  0%, 62%, 100% { transform: translateY(0); opacity: .7; }
  78% { transform: translateY(7px); opacity: 1; }
}

/* --- Clearings ------------------------------------------------------ */

.clearing, .work, .heart { padding-block: var(--section-pad); position: relative; }

/* THE CLEARING FLOOR.
   A clearing is bright above and dark at the floor, and text lives at
   the floor. Without this the fixed backdrop puts body copy straight on
   top of a god-ray and every contrast ratio in tokens.css is a lie.
   It fades at both ends, so the forest comes back up between sections
   and the page still breathes. */
.clearing::before, .work::before, .heart::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--hollow), transparent 26%) 9%,
    color-mix(in oklab, var(--hollow), transparent 14%) 26%,
    color-mix(in oklab, var(--hollow), transparent 14%) 74%,
    color-mix(in oklab, var(--hollow), transparent 26%) 91%,
    transparent 100%);
}

.about__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: 1180px; margin-inline: auto;
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
}

.portrait { position: relative; }
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  /* 0 = untouched photo, 1 = fully graded into the canopy */
  --portrait-grade: .55;
  border-radius: 2px;
  overflow: hidden;
  background: var(--loam);
  border: 1px solid var(--bark-umber);
  box-shadow: 0 30px 70px -30px var(--hollow);
}
/* The photo is a bright, white tiled room and the site is a dark forest
   at dusk. Ungraded it reads as a snapshot pasted onto the page. This
   cools and settles it into the palette without touching the face.
   Dial --portrait-grade to 0 for the untouched photo. */
.portrait__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* face sits right of centre, roughly a third down the frame */
  object-position: 64% 31%;
  filter:
    contrast(1.04)
    saturate(calc(1 - var(--portrait-grade, 1) * 0.34))
    sepia(calc(var(--portrait-grade, 1) * 0.16))
    brightness(calc(1 - var(--portrait-grade, 1) * 0.04));
}
/* a canopy-coloured wash, so he is lit by the same forest as everything else */
.portrait__frame::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(88% 78% at 64% 31%, transparent 52%, color-mix(in oklab, var(--hollow), transparent 62%) 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--canopy), transparent 84%), color-mix(in oklab, var(--hollow), transparent 70%));
  mix-blend-mode: multiply;
}
.portrait__frame::after { z-index: 2; }
/* A shaft of light falls across the portrait, as it would in a clearing */
.portrait__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(108deg,
    transparent 22%,
    color-mix(in oklab, var(--sun-core), transparent 89%) 34%,
    transparent 48%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.portrait__fallback { display: none; }
.portrait__frame.is-empty .portrait__fallback {
  display: grid; place-content: center; gap: 1rem; justify-items: center;
  position: absolute; inset: 0; z-index: 3; text-align: center;
  color: var(--bark-silver);
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .16em; line-height: 2;
}
.portrait__frame.is-empty .portrait__fallback svg { width: 74px; fill: var(--bark-umber); }
.portrait__cap {
  margin-top: .9rem;
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .2em; text-transform: uppercase; color: var(--bark-silver);
}

.about__text .section-title { margin-bottom: 1.4rem; }

/* --- Work ----------------------------------------------------------- */

.work__intro { max-width: 1180px; margin: 0 auto clamp(3rem, 9vw, 7rem); }
.work__intro .section-title { margin-bottom: 1.2rem; }

.plates {
  display: grid;
  gap: clamp(5rem, 14vw, 13rem);
  max-width: 1180px;
  margin-inline: auto;
}

/* --- Services ------------------------------------------------------- */

.services__list {
  list-style: none; padding: 0;
  max-width: 1180px; margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  display: grid; gap: 0;
  counter-reset: svc;
}
.services__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding-block: clamp(1.8rem, 4vw, 2.8rem);
  border-top: 1px solid var(--moss);
  position: relative;
  transition: border-color 400ms;
}
.services__item:last-child { border-bottom: 1px solid var(--moss); }
.services__num {
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .2em; color: var(--bark-silver);
  padding-top: .55em;
  transition: color 400ms;
}
.services__item h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-h3); line-height: 1.15;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 48;
  margin-bottom: .45rem;
  transition: color 400ms;
}
.services__item p { color: var(--paper-dim); max-width: 58ch; }
/* the forest notices you */
.services__item:hover { border-color: color-mix(in oklab, var(--live), transparent 40%); }
.services__item:hover .services__num { color: var(--live); }
.services__item:hover h3 { color: var(--live); }

/* --- Contact: the heart of the forest -------------------------------- */

.heart {
  text-align: center;
  display: grid; justify-items: center;
  padding-block: clamp(8rem, 22vw, 20rem) clamp(5rem, 10vw, 9rem);
}
.heart__title {
  font-size: var(--t-h2);
  max-width: 16ch;
  margin-bottom: 1.4rem;
}
.heart .prose { margin-inline: auto; }
.heart__cta { margin-top: clamp(2rem, 5vw, 3.5rem); }

.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .22em; text-transform: uppercase;
  background: var(--firefly); color: var(--hollow);   /* 15.06:1 */
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--firefly), transparent 55%);
  transition: box-shadow 420ms var(--ease-settle), transform 420ms var(--ease-settle);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 44px 6px color-mix(in oklab, var(--firefly), transparent 55%);
}
.btn[aria-disabled="true"] {
  background: transparent;
  color: var(--paper-dim);
  border: 1px dashed var(--moss);
  cursor: not-allowed;
  box-shadow: none;
}
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

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

/* Only rendered when SITE.contact is set to a form endpoint */
.contact-form {
  display: grid; gap: .8rem; width: min(100%, 460px); margin-inline: auto;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  background: color-mix(in oklab, var(--canopy), transparent 30%);
  border: 1px solid var(--moss);
  border-radius: 4px;
  color: var(--paper);
  font: inherit;
  resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--bark-silver); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--firefly); }
.contact-form .btn { justify-self: center; margin-top: .4rem; }

.cta-note {
  margin-top: 1rem;
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bark-silver);
}

/* --- Footer ---------------------------------------------------------- */

.footer {
  position: relative;
  padding: 3rem var(--gutter) 4rem;
  border-top: 1px solid var(--bark-umber);
  text-align: center;
  color: var(--paper-dim);
  font-size: var(--t-small);
  display: grid; gap: .6rem;
}
/* The footer lands on the glowing mist band, where bark-silver on its own
   does not survive. Give it ground of its own. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--hollow), transparent 22%) 0%,
    var(--hollow) 46%,
    var(--hollow) 100%);
}
.footer__note { max-width: 60ch; margin-inline: auto; font-size: .8125rem; color: var(--bark-silver); }


/* ===================================================================
   PRICING — plain numbers, stated plainly. No tiers, no "from",
   no asterisk that turns out to matter.
   =================================================================== */

.pricing {
  max-width: 1180px;
  margin: clamp(4rem, 10vw, 7rem) auto 0;
}
.pricing__label {
  font-family: var(--font-guide);
  font-size: var(--t-guide);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--live), var(--bark-silver) 45%);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.pricing__list { display: grid; gap: 0; margin: 0; }
.pricing__row {
  padding-block: clamp(1.5rem, 3.4vw, 2.2rem);
  border-top: 1px solid var(--moss);
  transition: border-color 400ms;
}
.pricing__row:last-of-type { border-bottom: 1px solid var(--moss); }
.pricing__row:hover { border-color: color-mix(in oklab, var(--live), transparent 40%); }

.pricing__term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.2rem;
  margin-bottom: .5rem;
}
.pricing__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.1;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 48;
  transition: color 400ms;
}
.pricing__row:hover .pricing__name { color: var(--live); }

/* The number is the thing people came to read. Give it the light. */
.pricing__amount {
  margin-left: auto;
  font-family: var(--font-guide);
  font-size: clamp(.9375rem, .85rem + .35vw, 1.125rem);
  letter-spacing: .06em;
  color: var(--sun);
  white-space: nowrap;
}
.pricing__body {
  margin: 0;
  max-width: 62ch;
  color: var(--paper-dim);
}
.pricing__foot {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 68ch;
  color: var(--bark-silver);
  font-size: var(--t-small);
  line-height: 1.55;
}

@media (max-width: 620px) {
  .pricing__amount { margin-left: 0; }
}