/* Hollow Oak Tree Care (fictional demo): "The cut plan".
   Chaptered editorial grammar, job-book variant. Hard-cut grounds per chapter:
   black, paper, black, paper, black, green. Two families: Big Shoulders Display
   (display) and Atkinson Hyperlegible (text). Engine tokens are themed here; the
   engine itself is untouched. */

@font-face { font-family: "GTS Display"; src: url("fonts/bigshoulders-600-900.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "GTS Text"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GTS Text"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --black: #0F1210;
  --black-2: #171B18;
  --bone: #EEF0E8;
  --bone-soft: #B3BAAE;
  --lime: #B6E84E;
  --lime-tag: #9AD43A;
  --paper: #F1F2EC;
  --ink: #121512;
  --ink-soft: #454D45;
  --green: #1C6A32;
  --green-bar: #1E7436;
  --green-bar-hover: #23803D;
  --green-soft: #D9E6D5;

  --sc-canvas: var(--black);
  --sc-surface: var(--black-2);
  --sc-ink: var(--bone);
  --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--lime);
  --sc-accent-ink: var(--black);
  --sc-font-display: "GTS Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sc-font-text: "GTS Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4.2vw, 64px);
  --maxw: 1360px;
  --folio-h: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --rule-w: 1px;
}

html { scroll-behavior: auto; scroll-padding-top: 12px; scroll-padding-bottom: calc(var(--folio-h) + 16px); }
body {
  font-family: var(--sc-font-text);
  font-size: clamp(1.0625rem, 1rem + .22vw, 1.1875rem);
  line-height: 1.6;
  letter-spacing: 0;
  background: var(--black);
  color: var(--bone);
}
h1, h2, h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 800; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* engine fallbacks: content never stays hidden if a script fails */
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > *,
html.sc-failed [data-sc-in], html.sc-failed [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }

.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--lime); color: var(--black); padding: 10px 16px; font-weight: 700; text-decoration: none; border-radius: 3px; }
.skip:focus { top: 12px; }

/* grounds ------------------------------------------------------------- */
.ch { position: relative; }
.ch--black { background: var(--black); color: var(--bone); --accent: var(--lime); --soft: var(--bone-soft); --rule: rgba(238, 240, 232, .16); --ring: var(--lime); }
.ch--paper { background: var(--paper); color: var(--ink); --accent: var(--green); --soft: var(--ink-soft); --rule: rgba(18, 21, 18, .18); --ring: var(--green); }
.ch--green { background: var(--green); color: var(--bone); --accent: var(--lime); --soft: var(--green-soft); --rule: rgba(238, 240, 232, .26); --ring: var(--lime); }
.ch :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.ch--paper ::selection { background: var(--green); color: var(--paper); }

.ch-title { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.7rem); line-height: .94; letter-spacing: 0; max-width: 15ch; }
.ch-num { display: inline-block; vertical-align: top; margin: .32em .8em 0 0; padding-top: .4em; border-top: 4px solid var(--accent); font-family: var(--sc-font-text); font-weight: 700; font-size: .3em; line-height: 1; letter-spacing: .14em; color: var(--accent); }
.fine { margin-top: 1.4rem; font-size: .875rem; line-height: 1.5; color: var(--soft); max-width: 70ch; }

/* concept strip ---------------------------------------------------------- */
.strip { background: var(--black); color: var(--bone-soft); font-size: .8125rem; line-height: 1.45; border-bottom: 1px solid rgba(238, 240, 232, .12); }
.strip__in { display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding-block: .6rem; }
.strip b { color: var(--lime); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; padding-top: .05rem; }

/* I. cover ----------------------------------------------------------------- */
.cover { min-height: calc(100svh - 40px); display: flex; }
.cover__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-block: clamp(28px, 5vh, 64px); }
.mast { display: flex; flex-direction: column; line-height: .8; margin-bottom: 1rem; }
.mast__name { font-family: var(--sc-font-display); font-weight: 900; font-size: clamp(3rem, 2rem + 3.4vw, 5.2rem); text-transform: uppercase; letter-spacing: .005em; }
.mast__sub { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1rem, .82rem + .8vw, 1.55rem); text-transform: uppercase; letter-spacing: .34em; margin-top: .42em; }
.stamp { display: inline-block; border: 2px solid var(--lime); color: var(--lime); font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; line-height: 1.2; padding: .32em .7em .26em; transform: rotate(-2.5deg); margin-bottom: clamp(1.4rem, 4.5vh, 3.2rem); }
.cover__title { font-size: clamp(2.7rem, 1.4rem + 4.4vw, 6rem); line-height: .9; letter-spacing: 0; max-width: 10ch; }
.cover__lede { margin-top: 1.25rem; max-width: 42ch; color: var(--bone-soft); }
.cover__actions { margin-top: clamp(1.6rem, 4vh, 2.6rem); display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.callbar { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .9rem; background: var(--green-bar); color: var(--bone); text-decoration: none; padding: .8rem 1.3rem .78rem; border-radius: 3px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.callbar:hover { background: var(--green-bar-hover); }
.callbar:active { transform: translateY(1px); }
.callbar__label { font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.callbar__num { font-family: var(--sc-font-display); font-weight: 900; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.textlink { color: var(--bone); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: .32em; padding-block: .55rem; }
.textlink:hover { color: var(--lime); }
.cover__fig { margin: 0; position: relative; height: min(80svh, 780px); min-height: 420px; }
.cover__fig canvas { width: 100%; height: calc(100% - 1.8rem); opacity: 0; transition: opacity .9s var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.cover__fig canvas.is-drawn { opacity: 1; }
html:not(.js) .cover__fig canvas { opacity: 1; }
.cover__fig figcaption { position: absolute; left: 0; bottom: 0; font-size: .8125rem; color: var(--bone-soft); }

/* II. the plan ------------------------------------------------------------- */
.plan { padding-top: clamp(72px, 12vh, 140px); padding-bottom: clamp(72px, 14vh, 160px); }
.plan__intro { margin-top: 1.1rem; max-width: 50ch; color: var(--soft); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(24px, 4vh, 48px); }
.plan__fig { grid-column: 2; grid-row: 1; }
.plan__stage { position: sticky; top: 0; height: calc(100svh - var(--folio-h)); }
.plan__stage canvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 2.6rem); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.plan__tags { position: absolute; left: 0; top: 0; right: 0; height: calc(100% - 2.6rem); pointer-events: none; overflow: hidden; }
.plan__cap { position: absolute; left: 0; right: 0; bottom: .55rem; font-size: .8125rem; line-height: 1.35; color: var(--soft); }
.fig-tag { position: absolute; left: 0; top: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(.8rem, .72rem + .25vw, .98rem); letter-spacing: .07em; text-transform: uppercase; line-height: 1.1; background: var(--lime-tag); color: var(--ink); padding: .3em .55em .24em; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.plan__steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 50svh 0 calc(50svh - var(--folio-h)); --S: 520svh; }
.step { min-height: calc(var(--w) * var(--S)); }
.step__text { position: sticky; top: 30svh; padding-block: .5rem 3rem; max-width: 34ch; }
.step__text::before { content: ""; display: block; width: 2.6rem; height: 6px; background: var(--accent); margin-bottom: 1.1rem; transform: scaleX(.3); transform-origin: left center; transition: transform .45s var(--ease); }
.step.is-active .step__text::before { transform: none; }
.js .plan.is-live .step__text { opacity: .16; transition: opacity .35s var(--ease); }
.js .plan.is-live .step.is-active .step__text { opacity: 1; }
.step h3 { font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.9rem); line-height: .96; }
.step p { margin-top: .85rem; color: var(--soft); }
.step--peak h3 { font-size: clamp(3.6rem, 1.8rem + 5.6vw, 7.4rem); line-height: .84; }
.step--peak p { color: var(--ink); font-size: 1.08em; }

/* III. the work ------------------------------------------------------------ */
.work { padding-block: clamp(72px, 13vh, 150px); }
.svc { list-style: none; margin: clamp(28px, 5vh, 56px) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.svc li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); align-items: end; gap: .4rem 2.5rem; padding-block: clamp(.55rem, 1.3vh, .95rem) clamp(.7rem, 1.6vh, 1.1rem); border-bottom: 1px solid var(--rule); }
.svc__name { font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, .9rem + 6.6vw, 7.4rem); line-height: .86; letter-spacing: .005em; }
.svc__line { color: var(--bone-soft); padding-bottom: .45rem; }
.work__ask { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 700; max-width: 40ch; }
.fn { color: var(--lime); text-decoration: none; padding: 0 .3em; margin-left: .05em; }
.fn:hover { text-decoration: underline; }

/* IV. proof ---------------------------------------------------------------- */
.proof { padding-block: clamp(72px, 13vh, 150px); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(24px, 5vw, 88px); align-items: start; }
.proof__prose p { font-size: clamp(1.35rem, 1.02rem + 1.15vw, 2.1rem); line-height: 1.3; letter-spacing: -.005em; max-width: 29ch; }
.proof__prose p + p { margin-top: .95em; }
.fig { font-family: var(--sc-font-display); font-weight: 900; font-size: 1.42em; line-height: 0; color: var(--green); font-variant-numeric: tabular-nums; padding-inline: .03em; }
.proof__links { list-style: none; margin: clamp(1.8rem, 4vh, 2.6rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.proof__links a { display: inline-block; padding-block: .55rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.proof__links a:hover { color: var(--green); }

/* V. send the tree --------------------------------------------------------- */
.send { padding-block: clamp(72px, 13vh, 150px); }
.send__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.send__lede { margin-top: 1.1rem; max-width: 46ch; color: var(--bone-soft); }
.ticket { margin-top: clamp(28px, 4.5vh, 48px); display: grid; gap: 1.6rem; }
.ticket__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.ticket legend, .field > span:first-child, #photo-label { display: block; font-weight: 700; margin-bottom: .6rem; padding: 0; }
.opt { font-weight: 400; color: var(--bone-soft); font-size: .875em; margin-left: .35em; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: .5rem 1rem; border: 1.5px solid rgba(238, 240, 232, .4); border-radius: 999px; font-weight: 700; font-size: .95rem; line-height: 1.2; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.chip:hover span { border-color: var(--bone); }
.chip input:checked + span { background: var(--lime); color: var(--black); border-color: var(--lime); }
.chip input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.ticket__err { margin-top: .7rem; color: #FFB4A2; font-weight: 700; }
.ticket__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: block; min-width: 0; }
.field input[type="text"], .field input[type="tel"] { width: 100%; min-height: 50px; border: 1.5px solid rgba(238, 240, 232, .4); background: var(--black-2); color: var(--bone); border-radius: 6px; padding: .65rem .85rem; font-size: 1rem; }
.field input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-color: var(--lime); }
.photo-pick { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 50px; }
.photo-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-pick__btn { flex: none; display: inline-flex; align-items: center; min-height: 50px; padding: .6rem 1rem; border: 1.5px dashed rgba(238, 240, 232, .55); border-radius: 6px; font-weight: 700; }
.photo-pick:hover .photo-pick__btn { border-color: var(--bone); }
.photo-pick:focus-within .photo-pick__btn { outline: 3px solid var(--lime); outline-offset: 3px; }
.photo-pick__state { font-size: .875rem; color: var(--bone-soft); min-width: 0; overflow-wrap: anywhere; }
.ticket__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn { min-height: 52px; padding: .7rem 1.5rem; background: var(--lime); color: var(--black); border: 1.5px solid var(--lime); border-radius: 4px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform .15s var(--ease), background-color .15s var(--ease); }
.btn:hover { background: #C6F166; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--bone); border-color: rgba(238, 240, 232, .4); }
.btn--ghost:hover { background: rgba(238, 240, 232, .08); border-color: var(--bone); }
.ticket__note { font-size: .875rem; color: var(--bone-soft); }
.send__phone { position: sticky; top: clamp(24px, 7vh, 72px); }
.phone { max-width: 360px; margin-inline: auto; min-height: 500px; display: flex; flex-direction: column; border: 2px solid rgba(238, 240, 232, .22); border-radius: 36px; padding: 20px 16px 18px; background: #141815; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.phone__head { display: grid; justify-items: center; gap: .05rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(238, 240, 232, .12); font-size: .875rem; text-align: center; }
.phone__to { font-weight: 700; }
.phone__num { color: var(--bone-soft); }
.phone__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: .5rem; padding-block: 1.2rem 1rem; }
.bubble { background: var(--lime); color: var(--black); border-radius: 20px 20px 6px 20px; padding: .7rem .95rem; max-width: 90%; font-size: .98rem; line-height: 1.42; overflow-wrap: anywhere; }
.bubble-photo { margin: 0; width: 62%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(238, 240, 232, .2); }
.bubble-photo img { width: 100%; height: auto; display: block; }
.phone__status { font-size: .8125rem; line-height: 1.45; color: var(--bone-soft); text-align: center; min-height: 2.9em; }
.phone.is-ready { border-color: rgba(182, 232, 78, .55); }
.phone.is-ready .phone__status { color: var(--bone); }

/* VI. close ---------------------------------------------------------------- */
.close { padding-block: clamp(80px, 14vh, 170px) clamp(40px, 6vh, 72px); }
.close__kicker { font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .22em; font-size: clamp(1rem, .8rem + .8vw, 1.5rem); color: var(--lime); }
.close__num { display: block; width: max-content; max-width: 100%; margin-top: .12em; padding-block: 6px; font-family: var(--sc-font-display); font-weight: 900; font-size: clamp(2.8rem, .5rem + 11.5vw, 13rem); line-height: .86; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--bone); text-decoration: none; }
.close__num:hover { text-decoration: underline; text-decoration-thickness: .045em; text-underline-offset: .1em; }
.close__meta { margin-top: 1.2rem; font-size: 1.0625rem; font-weight: 700; }
.close__meta--soft { margin-top: .35rem; font-weight: 400; color: var(--green-soft); }
.colophon { margin-top: clamp(48px, 9vh, 104px); padding-top: 1.4rem; border-top: 1px solid var(--rule); font-size: .875rem; line-height: 1.55; color: var(--green-soft); max-width: 74ch; display: grid; gap: .7rem; }
.colophon strong { color: var(--bone); }

/* folio -------------------------------------------------------------------- */
.folio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--folio-h); padding-inline: var(--gutter); padding-bottom: env(safe-area-inset-bottom); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(15, 18, 16, .97); color: var(--bone); border-top: 1px solid rgba(238, 240, 232, .14); transform: translateY(105%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
.folio.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.folio__where { display: flex; align-items: baseline; gap: .8rem; min-width: 0; font-size: .875rem; }
.folio__brand { flex: none; font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .02em; }
.folio__ch { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bone-soft); }
.folio__tag { flex: none; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(182, 232, 78, .5); padding: .12rem .42rem; border-radius: 2px; }
.folio__call { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem; background: var(--green-bar); color: var(--bone); text-decoration: none; font-weight: 700; border-radius: 3px; }
.folio__call:hover { background: var(--green-bar-hover); }
.folio__call span { font-family: var(--sc-font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.folio :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* responsive --------------------------------------------------------------- */
@media (max-width: 959px) {
  .cover { min-height: 0; }
  .cover__grid { grid-template-columns: 1fr; padding-block: 28px 8px; }
  .cover__fig { height: clamp(260px, 72vw, 520px); min-height: 0; }
  .plan__grid { display: block; margin-top: 28px; }
  .plan__fig { position: sticky; top: 0; z-index: 2; height: 54svh; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); }
  .plan__stage { position: relative; top: auto; height: 100%; }
  .plan__stage canvas { -webkit-mask-image: none; mask-image: none; }
  .plan__steps { --S: 600svh; position: relative; z-index: 1; padding: 0 0 8svh; }
  .step__text { top: calc(54svh + 18px); padding-block: .5rem 2rem; }
  .step--peak h3 { font-size: clamp(3.2rem, 2rem + 6vw, 4.6rem); }
  .proof__grid { grid-template-columns: 1fr; }
  .send__grid { grid-template-columns: 1fr; }
  .send__phone { position: static; }
}
@media (max-width: 760px) {
  .svc li { grid-template-columns: 1fr; gap: .3rem; }
  .svc__line { padding-bottom: .1rem; }
  .ticket__row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .folio__brand, .folio__tag { display: none; }
  .folio__call { padding-inline: .85rem; }
  .strip__in span + span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .folio, .folio.is-on { transition: none; }
  .step__text::before, .js .plan.is-live .step__text { transition: none; }
  .callbar, .btn { transition: none; }
}

/* Fictional demo: studio credit link meets the 44px tap target. */
.colophon a { display: inline-flex; align-items: center; min-height: 44px; }