/* Union Group.
   Grammar: Orrery. One object, fixed, for the whole page. Copy lives beside it.
   Palette: forest green ground, red for shapes and buttons, off-white for text.
   Red on the green fails as text, so small accents use the pale red tint. */

:root {
  --sc-canvas:     #4B5E48;
  --sc-surface:    #3E4F3C;
  --sc-ink:        #F5F4F2;
  --sc-ink-soft:   #DDE2D8;
  --sc-accent:     #E74337;
  --sc-accent-ink: #120503;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;

  --accent-t:  #FFD2C4;   /* the accent at small-text contrast */
  --hair:      rgba(245,244,242, 0.22);
  --hair-lit:  rgba(255,210,196, 0.45);
  --gutter:    clamp(1.25rem, 5vw, 5.5rem);
}

html { background: var(--sc-canvas); }
body {
  background: transparent;
  font-family: var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- the field */

.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.field__gl { display: block; width: 100%; height: 100%; }
.field__fallback {
  position: absolute; inset: 0; display: none;
  background:
    radial-gradient(38vmin 38vmin at 62% 48%, #E74337 0%, #B8301F 28%, transparent 62%),
    radial-gradient(70vmin 70vmin at 62% 48%, rgba(245,244,242,.10), transparent 60%),
    radial-gradient(120vmin 90vmin at 50% 40%, #55694F, #4B5E48 70%);
}
.field.is-fallback .field__gl { display: none; }
.field.is-fallback .field__fallback { display: block; }

/* ----------------------------------------------------------------- the bar */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: clamp(.9rem, 2vw, 1.4rem) var(--gutter);
  background: linear-gradient(to bottom, rgba(75,94,72,.94) 0%, rgba(75,94,72,.80) 55%, rgba(75,94,72,0));
}
.bar__mark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 102, "wght" 560;
  font-size: var(--sc-t-sm); letter-spacing: -0.012em;
  color: var(--sc-ink); text-decoration: none;
}
.bar__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 3px rgba(231,67,55,.18), 0 0 14px 2px rgba(231,67,55,.55);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 1.25rem; white-space: nowrap;
  border-radius: 999px; text-decoration: none;
  font-family: var(--sc-font-text); font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: -0.005em;
  transition: background-color 150ms var(--sc-ease-out),
              color 150ms var(--sc-ease-out),
              border-color 150ms var(--sc-ease-out),
              box-shadow 150ms var(--sc-ease-out);
}
.btn--ghost {
  color: var(--sc-ink);
  border: 1px solid rgba(245,244,242,.34);
  background: rgba(75,94,72,.74);
}
.btn--ghost:hover { border-color: var(--accent-t); color: var(--accent-t); }
.btn--solid {
  background: var(--sc-accent); color: #130503;
  box-shadow: 0 8px 30px -8px rgba(231,67,55,.65);
}
.btn--solid:hover { background: #EE5F52; }
.btn--solid:active { transform: translateY(1px); }
.btn--big { min-height: 56px; padding: 0 1.9rem; font-size: var(--sc-t-base); }

/* --------------------------------------------------------------- the ring */

.ring {
  position: fixed; z-index: 40;
  right: clamp(.9rem, 2.4vw, 2rem); bottom: clamp(.9rem, 2.4vw, 2rem);
  width: 112px; height: 112px;
}
.ring__svg { width: 100%; height: 100%; overflow: visible; }
.ring__core { fill: var(--sc-accent); opacity: .25; transition: opacity 280ms var(--sc-ease-out); }
.ring.is-live .ring__core { opacity: 1; }
.ring__track circle { fill: none; stroke: rgba(245,244,242,.2); stroke-width: 1.5; }
.ring__fill circle {
  fill: none; stroke-width: 3; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 80px 80px;
}
.ring__fill circle[data-arc="0"] { stroke: #E74337; }
.ring__fill circle[data-arc="1"] { stroke: #EE7A67; }
.ring__fill circle[data-arc="2"] { stroke: #F3A796; }
.ring__fill circle[data-arc="3"] { stroke: #F6CEC3; }
.ring__fill circle[data-arc="4"] { stroke: #F5F4F2; }

.ring__menu {
  position: absolute; right: calc(100% + .55rem); bottom: 0;
  list-style: none; margin: 0; padding: .4rem;
  min-width: 10.5rem;
  background: rgba(47,60,45,.97); border: 1px solid var(--hair);
  border-radius: 14px; backdrop-filter: blur(8px);
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out);
}
.ring:hover .ring__menu, .ring:focus-within .ring__menu {
  opacity: 1; transform: none; pointer-events: auto;
}
.ring__menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 44px; padding: 0 .7rem;
  background: none; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-xs); text-align: left;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.ring__menu button:hover { background: rgba(255,210,196,.1); color: var(--sc-ink); }
.ring__menu i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; }
.ring__menu i[data-sw="0"] { color: #E74337; }
.ring__menu i[data-sw="1"] { color: #EE7A67; }
.ring__menu i[data-sw="2"] { color: #F3A796; }
.ring__menu i[data-sw="3"] { color: #F6CEC3; }
.ring__menu i[data-sw="4"] { color: #F5F4F2; }
.ring__menu i.is-on { opacity: 1; box-shadow: 0 0 10px 1px currentColor; }

/* ------------------------------------------------------------------- acts */

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

.act { position: relative; }
.act--hero, .act--hush, .act--swap, .act--close {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh; padding: 7rem var(--gutter) 5rem;
}
.act--swap { min-height: auto; padding-block: clamp(7rem, 16vh, 11rem) clamp(5rem, 12vh, 9rem); }

.stage { display: flex; flex-direction: column; justify-content: center;
         padding: 6rem var(--gutter) 5rem; }

/* The veil. A sibling of the copy, never a child, so the harness can measure it.
   Stops are in column units rather than percentages: the copy is what needs the
   density, and at 1000px a percentage that was right at 1440 leaves the last
   third of the column sitting on a lit object. */
.act--hero::before, .act--swap::before, .act--close::before,
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* `to right`, not an angle: a tilted gradient's geometry depends on the box
     it is in, so two stacked sections carrying the same angled veil render
     different ramps and leave a visible horizontal seam at the join. */
  background: linear-gradient(to right,
    rgba(75,94,72,.94) 0%,
    rgba(75,94,72,.92) calc(var(--gutter) + 40rem),
    rgba(75,94,72,.50) calc(var(--gutter) + 48rem),
    rgba(75,94,72,.10) calc(var(--gutter) + 56rem),
    rgba(75,94,72,0) 100%);
}

.col { position: relative; }
.col--lead   { max-width: 42rem; }
.col--wide   { max-width: 46rem; }
.col--centre { max-width: 52rem; margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------- typography */

.sc-display {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 100, "wght" 580;
  letter-spacing: -0.032em; line-height: 0.98;
  text-wrap: balance; margin: 0;
}
.display--xl { font-size: clamp(2.65rem, 7.4vw, 5.6rem); }
.display--lg { font-size: clamp(2.1rem, 5.4vw, 4.1rem); }
.display--md { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-variation-settings: "wdth" 100, "wght" 620; }

.lede {
  margin: 1.6rem 0 0; max-width: 34rem;
  font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.col--centre .lede { margin-inline: auto; }
.lede--tight { margin-top: .9rem; font-size: var(--sc-t-base); }
.lede--quote { color: var(--sc-ink); font-size: var(--sc-t-lg); font-style: italic; }
.act--hero .btn--solid { margin-top: 2.2rem; }

/* The four states cross over in one place rather than stacking down the page,
   which is what a pinned argument wants. Anchored to the floor so a longer line
   grows upward instead of shunting the next one. */
.says { position: relative; min-height: 13rem; }
.say {
  position: absolute; left: 0; bottom: 0;
  margin: 0; max-width: 24ch;
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 98, "wght" 520;
  font-size: clamp(1.85rem, 4.6vw, 3.45rem);
  line-height: 1.05; letter-spacing: -0.028em; text-wrap: balance;
}
.say--turn { color: var(--sc-accent); max-width: 20ch; }

.hush {
  margin: 0;
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 96, "wght" 440;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.1; letter-spacing: -0.03em;
  color: var(--sc-ink);
  padding-block: .2em;          /* clip-path is on the border box, not the ink */
}

/* --------------------------------------------------- act 4, the five layers */

.kicker { color: var(--sc-ink); margin-bottom: 2.4rem; }
.steps { position: relative; min-height: 11.5rem; }
.step {
  position: absolute; inset: 0 auto auto 0; margin: 0; max-width: 34rem;
  font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.step b {
  display: block; margin-bottom: .55rem;
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 104, "wght" 660;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem); letter-spacing: -0.028em;
  color: var(--sc-ink);
}
.step:nth-child(1) b { color: #FFC9BA; }
.step:nth-child(2) b { color: #FFD2C4; }
.step:nth-child(3) b { color: #FBDDD2; }
.step:nth-child(4) b { color: #F8E8E1; }
.step:nth-child(5) b { color: #F5F4F2; }
.rule-note {
  margin: 3rem 0 0; font-size: var(--sc-t-sm); letter-spacing: .02em;
  color: var(--accent-t);
}

/* ------------------------------------------- act 5, the signature move */

.trades { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.9rem; }
.trade {
  min-height: 46px; padding: 0 1.05rem; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--hair);
  background: rgba(62,79,60,.55); color: var(--sc-ink-soft);
  font: inherit; font-weight: 500; font-size: var(--sc-t-sm);
  transition: color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out),
              background-color 150ms var(--sc-ease-out);
}
.trade:hover { color: var(--sc-ink); border-color: var(--hair-lit); }
.trade.is-on {
  color: #130503; background: var(--sc-accent); border-color: var(--sc-accent);
  box-shadow: 0 6px 24px -8px rgba(231,67,55,.7);
}
.trade:active { transform: translateY(1px); }

.core-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .85rem;
  margin-top: 2.1rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--hair);
}
.core-line__tag {
  font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.core-line strong {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: clamp(1.25rem, 2.9vw, 1.95rem); letter-spacing: -0.024em;
  color: var(--sc-ink);
}

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; align-items: baseline; gap: .2rem 1.1rem;
  grid-template-columns: 2.1rem 9.5rem minmax(0, 1fr);
  padding: 1.05rem 0; border-bottom: 1px solid var(--hair);
}
.rows__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.rows__k {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 102, "wght" 620;
  font-size: var(--sc-t-base); letter-spacing: -0.018em; color: var(--sc-ink);
}
.rows li:nth-child(1) .rows__k { color: #FFC9BA; }
.rows li:nth-child(2) .rows__k { color: #FFD2C4; }
.rows li:nth-child(3) .rows__k { color: #FBDDD2; }
.rows li:nth-child(4) .rows__k { color: #F8E8E1; }
.rows li:nth-child(5) .rows__k { color: #F5F4F2; }
.rows__v {
  font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.rows__v.is-swapping { opacity: 0; transform: translateY(6px); }
.rows__v {
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}

/* ------------------------------------------------- act 6, the three ways in */
/* Hairline rows, not a grid of equal cards. Each one reaches further in. */

.tiers { border-top: 1px solid var(--hair); }
.tier {
  display: grid; gap: .35rem 2.2rem;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  padding: 1.6rem 0 1.5rem; border-bottom: 1px solid var(--hair);
  transition: background-color 200ms var(--sc-ease-out);
}
.tier:hover, .tier:focus-visible { background: rgba(255,210,196,.045); outline-offset: 4px; }
.tier header { display: flex; align-items: baseline; gap: .8rem; }
.tier__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--accent-t); }
.tier h3 {
  margin: 0; font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 104, "wght" 640;
  font-size: clamp(1.35rem, 2.8vw, 1.95rem); letter-spacing: -0.026em; color: var(--sc-ink);
}
.tier__p { margin: 0; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.tier__d {
  grid-column: 2; margin: .7rem 0 0;
  font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent-t);
}
.tier__price { grid-column: 1; grid-row: 2; margin: .2rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.tier__price b { color: var(--sc-ink); font-weight: 600; }
.tier--mid { padding-block: 2.1rem 2rem; }
.tier:last-child { padding-bottom: 2.3rem; }

/* ----------------------------------------------------------------- the close */

.act--close { justify-content: flex-end; padding-bottom: 2rem; }
.act--close .col--centre { margin-block: auto; }
.act--close .btn--solid { margin-top: 2.4rem; }
.fine { margin: 1.5rem auto 0; max-width: 34rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.foot {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: center;
  margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--hair);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot__note { color: rgba(245,244,242,.78); }

/* ---------------------------------------------------------------- the phone */

@media (max-width: 900px) {
  .display--xl { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .say { font-size: clamp(1.7rem, 7.4vw, 2.5rem); max-width: 18ch; }
  .hush { font-size: clamp(1.7rem, 7.6vw, 2.6rem); }
  /* On a phone the object sits above the copy, so the density belongs at the
     bottom and the top of the frame stays clear. */
  .act--hero::before, .act--swap::before, .act--close::before, .stage::before {
    background: linear-gradient(to bottom,
      rgba(75,94,72,0) 0%, rgba(75,94,72,.06) 28%, rgba(75,94,72,.62) 46%,
      rgba(75,94,72,.90) 62%, rgba(75,94,72,.95) 100%);
  }
  .act--close::before, .act--hush::before {
    background: linear-gradient(to bottom,
      rgba(75,94,72,0) 0%, rgba(75,94,72,.10) 24%, rgba(75,94,72,.70) 42%,
      rgba(75,94,72,.92) 60%, rgba(75,94,72,.95) 100%);
  }
  .act--hero { justify-content: flex-end; padding-bottom: 12vh; }
  /* Copy sits under the object, not across it. It stops short of the floor on
     purpose: a pinned stage is not stuck until its section's top reaches the
     viewport top, so anything parked at the very bottom of the stage is one
     viewport below the fold for the whole hand-off from the section before. */
  .stage { justify-content: flex-end; padding-bottom: 10vh; }
  .act--flowed .stage {
    justify-content: flex-start; padding-top: 44vh; padding-bottom: 3rem;
  }
  .act--flowed .tier__d { display: none; }   /* lighting is a pointer affordance */
  .act--close { justify-content: flex-end; padding-bottom: 2rem; }
  .act--close .col--centre { margin-block: 0 0; }
  .steps { min-height: 13rem; }
  .says { min-height: 11rem; }
  .rule-note { margin-top: 1.6rem; }
  .rows li { grid-template-columns: 2rem minmax(0, 1fr); }
  .rows li .rows__v { grid-column: 2; }
  .tier { grid-template-columns: minmax(0, 1fr); }
  .tier__d, .tier__price { grid-column: 1; }
  .tier__price { grid-row: auto; margin-top: .8rem; }
  /* On a phone the ring floats over reading copy, so it gets its own ground
     and reads as a control rather than tangling with the text under it. */
  .ring {
    width: 58px; height: 58px; border-radius: 50%;
    background: radial-gradient(circle, rgba(75,94,72,.94) 52%, rgba(75,94,72,.74) 72%, rgba(75,94,72,0) 86%);
  }
  .ring__menu { right: auto; left: calc(100% + .5rem); bottom: 0; }
  .bar__mark { font-size: var(--sc-t-xs); }
}

@media (max-width: 420px) {
  .ring__menu { left: auto; right: 0; bottom: calc(100% + .5rem); }
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .rows__v { transition: none; }
  .step, .say { position: static; margin-bottom: 1.6rem; }
  .steps, .says { min-height: 0; }
}

/* ------------------------------------------------- veils, tuned per act */
/* The object is the subject in acts 1 to 4 and a backdrop in 5 to 7, so the
   density each act needs is different. Each veil is a sibling of the copy. */

/* The two reading acts carry a wider column, so their density runs further.
   Measured, not guessed: body copy here is --ink-soft at 0.38 luminance, which
   needs the ground under it below ~0.046. */
.act--swap::before, #act-tiers .stage::before {
  background: linear-gradient(to right,
    rgba(75,94,72,.97) 0%,
    rgba(75,94,72,.96) calc(var(--gutter) + 47rem),
    rgba(75,94,72,.62) calc(var(--gutter) + 55rem),
    rgba(75,94,72,.14) calc(var(--gutter) + 64rem),
    rgba(75,94,72,0) 100%);
}
.act--hush::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 50%, rgba(75,94,72,.86), rgba(75,94,72,.32) 70%, rgba(75,94,72,0));
}
.act--close::before {
  /* only where the type sits, so the object still reads behind the resolve */
  background:
    radial-gradient(50% 40% at 50% 48%, rgba(75,94,72,.96), rgba(75,94,72,.80) 66%, rgba(75,94,72,.12) 100%),
    linear-gradient(to bottom, rgba(75,94,72,.80), rgba(75,94,72,.22) 36%, rgba(75,94,72,.80) 88%);
}

@media (prefers-reduced-motion: reduce) {
  /* the five layers are the argument, so they stay legible without the crossfade */
  .step { opacity: 1 !important; }
}

/* ------------------------------------------------- union group: the site nav */

/* Near-solid under the type, because copy scrolls behind it on every page. */
.bar { display: grid; grid-template-columns: auto 1fr auto;
       background: linear-gradient(to bottom, rgba(75,94,72,.98) 0%, rgba(75,94,72,.98) 74%, rgba(75,94,72,0)); }
.nav { display: flex; justify-content: center; gap: clamp(.2rem, 1.4vw, 1.2rem); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem;
  color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500;
  transition: color 150ms var(--sc-ease-out);
}
.nav a:hover { color: var(--sc-ink); }
.nav a[aria-current="page"] { color: var(--accent-t); }
.bar .btn--ghost { justify-self: end; }

/* ------------------------------------------- union group: flow-section pages */

:root { color-scheme: dark; }
body { color: var(--sc-ink); }

.act--flow {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6rem, 14vh, 10rem) var(--gutter) clamp(4rem, 10vh, 7rem);
}
.act--flow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right,
    rgba(75,94,72,.97) 0%, rgba(75,94,72,.96) calc(var(--gutter) + 47rem),
    rgba(75,94,72,.62) calc(var(--gutter) + 55rem), rgba(75,94,72,.14) calc(var(--gutter) + 64rem),
    rgba(75,94,72,0) 100%);
}
.act--flow h2 { margin-bottom: 1.4rem; }

.eyebrow {
  margin: 0 0 1.2rem; font-family: var(--sc-font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t);
}
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.act--hero .cta-row .btn--solid { margin-top: 0; }
.act--close .btn--ghost { margin-top: 2.4rem; }
.act--close .cta-row .btn { margin-top: 0; }

.rows--plain li { grid-template-columns: 2.1rem 12rem minmax(0, 1fr); }
.rows__v a, .tier__p a, .note a, .contact-mail { color: var(--accent-t); }

.tier--link h3 a { color: inherit; text-decoration: none; }
.tier--link h3 a:hover { color: var(--accent-t); }
.tier__go {
  grid-column: 2; margin: .7rem 0 0; font-size: var(--sc-t-sm); font-weight: 600;
}
.tier__go a { color: var(--accent-t); }

.price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 2.4rem;
  margin-top: 1.6rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--hair);
}
.price div { display: flex; flex-direction: column; gap: .3rem; }
.price strong {
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 104, "wght" 620;
  font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.03em; color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.price span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.note { margin: 1.4rem 0 0; max-width: 38rem; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); }

.contact-mail {
  display: inline-block; margin-top: 1.8rem; overflow-wrap: anywhere;
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 100, "wght" 560;
  font-size: clamp(1.45rem, 4.4vw, 2.6rem); letter-spacing: -0.024em;
}

.foot a { color: inherit; }
.foot a:hover { color: var(--sc-ink); }

@media (max-width: 900px) {
  /* Mark and button on the first row, the pages on the second, always visible. */
  .bar { grid-template-columns: 1fr auto; gap: .15rem .6rem; padding-block: .6rem .2rem;
         background: linear-gradient(to bottom, rgba(75,94,72,.99) 0%, rgba(75,94,72,.99) 88%, rgba(75,94,72,0)); }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 0; margin-inline: -.5rem; }
  .nav a { padding: 0 .5rem; font-size: var(--sc-t-xs); }
  .bar .btn--ghost { min-height: 44px; padding: 0 .95rem; font-size: var(--sc-t-xs); }
  .act--flow { padding-top: 7.5rem; }
  .act--flow::before {
    background: rgba(75,94,72,.95);
  }
  /* The ring floats over the bottom right corner, so the footer stops above it. */
  .ring ~ main .foot { padding-bottom: 4.6rem; }
  .rows--plain li { grid-template-columns: 2rem minmax(0, 1fr); }
  .tier__go { grid-column: 1; }
}

/* ------------------------------------------- brand: the junction mark (2026-11-06) */
.bar__mark { gap: .55rem; font-variation-settings: "wdth" 100, "wght" 380; font-size: 1.12rem; letter-spacing: -0.01em; }
.bar__mark svg { width: 26px; height: 24px; color: var(--sc-ink); flex: none; }
.jn path { fill: none; stroke: currentColor; }
.jn circle { fill: var(--sc-accent); }

.act--home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 4rem); min-height: 100svh; padding: 7rem var(--gutter) 5rem; }
.act--home .col { max-width: none; }
.hero-mark { width: 100%; max-width: 440px; justify-self: end; color: var(--sc-ink); overflow: visible; }
.hero-mark path { stroke-width: 1.15; stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: jn-draw 1.7s cubic-bezier(.6,0,.2,1) forwards; }
.hero-mark path:nth-of-type(2) { animation-delay: .25s; }
.hero-mark path:nth-of-type(3) { animation-delay: 1.1s; }
.hero-mark circle { transform-box: fill-box; transform-origin: center; transform: scale(0);
  animation: jn-pop .55s 1.15s cubic-bezier(.3,1.6,.5,1) forwards; }
.hero-mark .halo { fill: none; stroke: var(--sc-accent); stroke-width: .6; opacity: 0;
  animation: jn-halo 3.2s 1.7s ease-out infinite; }
@keyframes jn-draw { to { stroke-dashoffset: 0; } }
@keyframes jn-pop { to { transform: scale(1); } }
@keyframes jn-halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-mark path { animation: none; stroke-dashoffset: 0; }
  .hero-mark circle { animation: none; transform: none; }
  .hero-mark .halo { display: none; }
}
@media (max-width: 760px) {
  .act--home { grid-template-columns: 1fr; padding-top: 8.5rem; }
  .hero-mark { max-width: 220px; justify-self: start; order: -1; }
}

/* Services grid: hairline cells, not cards. */
.svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: 2rem; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.svc > div { padding: 1.3rem 1.2rem 1.5rem; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.svc h3 { margin: 0 0 .45rem; font-family: var(--sc-font-display); font-variation-settings: "wdth" 100, "wght" 540;
  font-size: var(--sc-t-base); letter-spacing: -0.01em; color: var(--sc-ink); }
.svc p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.svc a { color: var(--accent-t); }
.svc__tag { display: block; margin-bottom: .6rem; font-family: var(--sc-font-mono, monospace); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }

.band { margin-top: 2.4rem; padding: clamp(1.5rem, 4vw, 2.6rem); background: var(--sc-ink); color: #1D241C; border-radius: 4px; }
.band h3 { margin: 0 0 .6rem; font-family: var(--sc-font-display); font-variation-settings: "wdth" 100, "wght" 560;
  font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; }
.band p { margin: 0 0 .8rem; max-width: 44rem; line-height: 1.55; }
.band b { color: #B8301F; }
.band .btn--solid { color: #F5F4F2; margin-top: .6rem; }