/* ==========================================================================
   THE GRAPH LOOK — an appearance layer over modern.css, nothing else.

   Owner, 31 Oct 2026: "update theme appearance to match better to posts and
   pro look no clutter oversize undersized vibes"; "ig new posts with the
   latest graphing dotted background etc are a much pleasant more combo, less
   brightness/irritations"; and of the page as it is: "proportioning
   disaster, overzoom, overdistant, cluttered … color balance odd", "feel
   like still 5-6 different theme designs".

   So ONE system, the Instagram sheets' (Desktop/Clients/DZT/DZT Posts,
   chapters 3–5), and every part of the page drawn by it:
     ground   the logo's night, everywhere, with the posts' faint square grid
              and a small node at every other crossing
     sheet    every panel: a hairline, near-square corners, no shadow, no glow,
              no gradient fill — the hero form, the track record, the service
              canvas, the reviews, the estimate
     tile     every choice in either form: a hairline box, a small mono index,
              the label
     row      every list (the services, the process): a flat line, not a button
     field    every input: one hairline, one focus
     button   one: the logo's deep green (#33703C, bone on it 5.1:1)
     words    a green caps kicker, a white medium headline, a grey line
   No content is changed; modern.css is untouched. Every rule sits under
   html.g, which index.html carries; ?look=classic removes it (graph.js).
   Revert = delete the <link> to this file.
   ========================================================================== */

html.g {
  --g-night: #05110B;              /* logo-roundel.svg's ground */
  --g-night-1: #08170F;            /* a sheet, one step up */
  --g-hair: rgba(243,241,237,.12);
  --g-hair-2: rgba(243,241,237,.2);
  --g-grid: rgba(243,241,237,.04);
  --g-node: rgba(243,241,237,.16);
  --g-pitch: 44px;
  --g-text-2: rgba(243,241,237,.64);
  --g-btn: #33703C;
  --g-btn-hi: #3C7F46;
  /* ONE RADIUS SCALE: the sections keep modern.css's big inset corners (owner,
     31 Oct: "u lost the round corner sections idea"); photographs one step
     down; every control the same small corner */
  --g-r: 6px;
  --g-r-media: var(--r-m);
  /* THREE TONES, all from the logo's greens, so the page is not one flat dark
     (owner: "too much one dark tone background") */
  /* THE POSTS' OWN COLOURS, sampled from the Instagram sheets (owner, 31 Oct:
     "fixing green theme tone/color … both seem off from ig posts vibe"): the
     ground #05110B, the grid line #0B1C14 — which is the lifted panel here —
     and the frame line #2F3D3A, which rules every panel */
  --g-tone-b: #0B1C14;
  --g-frame: #2F3D3A;
  /* and the tan bands stay tan (owner: "u lost the important tan color
     background") — modern.css's --paper, untouched */
  --g-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* the old surfaces all become the night, so nothing that still names them
     can paint a second colour */
  --s-0: var(--g-night); --s-05: var(--g-night); --s-1: var(--g-night-1);
  --s-15: var(--g-night-1); --s-2: var(--g-night-1); --s-25: var(--g-night-1); --s-3: var(--g-night);
  --contour-ink: none; --contour-pap: none;
}

/* ---- GROUND -------------------------------------------------------------- */
html.g body {
  background-color: var(--g-night);
  background-image:
    radial-gradient(circle at 0 0, var(--g-node) 1.1px, transparent 1.7px),
    linear-gradient(var(--g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px);
  background-size: calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2), var(--g-pitch) var(--g-pitch), var(--g-pitch) var(--g-pitch);
}
/* THE SECTIONS: modern.css's rounded inset panels, each in one of the three
   tones, the grid carried across it — no cream, no contour lines, no glow */
html.g .on-ink, html.g .proc, html.g .foot { background: transparent; box-shadow: none; }
html.g .work--forest, html.g .est__surface {
  background-color: var(--g-tone-b); box-shadow: none; border: 1px solid var(--g-frame);
  background-image:
    radial-gradient(circle at 0 0, var(--g-node) 1.1px, transparent 1.7px),
    linear-gradient(var(--g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px);
  background-size: calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2), var(--g-pitch) var(--g-pitch), var(--g-pitch) var(--g-pitch);
}
/* the tan bands: their own paper, the grid drawn in ink on it, the contour lines gone */
html.g .on-paper {
  background-color: var(--paper); box-shadow: none;
  background-image:
    radial-gradient(circle at 0 0, rgba(20,16,13,.16) 1.1px, transparent 1.7px),
    linear-gradient(rgba(20,16,13,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,16,13,.05) 1px, transparent 1px);
  background-size: calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2), var(--g-pitch) var(--g-pitch), var(--g-pitch) var(--g-pitch);
}
html.g .on-paper .label { color: var(--g-btn); }
html.g .work--forest .label { color: var(--volt); }
html.g .on-paper .lede, html.g .on-paper .what__lede { color: var(--slate); }
html.g .on-paper .what__list button { border-color: rgba(20,16,13,.12); }
html.g .on-paper .what__list .n { color: var(--g-btn); }
/* THE TAN BAND AND THE WORK, ONE PIECE (owner, 1 Nov: the cut-out curve was
   "uglier than it was when what we build n recent work were connected
   sections"). The two panels touch, the tan sweeping down into the green in a
   single wide arc. They scroll together — the stack starts at the work
   (graph.js) — so the tan curve always has its tan right above it; the tan cut
   the owner saw came only from the work sliding over a fading tan. */
html.g .what { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html.g .work.work--forest {
  margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  --arc: clamp(36px, 5vw, 72px);
  padding-top: calc(clamp(4rem, 7vw, 6rem) + var(--arc) * .6);
}
html.g .work--forest::before {
  /* modern.css's grain overlay lived here (opacity .022, overlay blend) */
  content: ''; position: absolute; inset: 0 0 auto 0; height: var(--arc); z-index: 0; pointer-events: none;
  opacity: 1; mix-blend-mode: normal; border-radius: 0;
  background: radial-gradient(70% 100% at 50% 0, var(--paper) 99.4%, transparent 100%);
}
html.g .work--forest > .wrap { position: relative; z-index: 1; }

/* one rhythm: the same space inside every section */
html.g .band, html.g .work, html.g .how { padding-block: clamp(4rem, 7vw, 6rem); }

/* ---- WORDS ---------------------------------------------------------------- */
html.g .label {
  display: inline-flex; align-items: center; gap: .6em;
  color: var(--volt); font-size: .7rem; font-weight: 600; letter-spacing: .16em;
}
/* a lit dot before every kicker: the page is on (tkati's eyebrow, DZT's green) */
html.g .label::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--volt); box-shadow: 0 0 0 3px rgba(110,185,126,.16), 0 0 10px rgba(110,185,126,.65);
}
html.g .on-paper .label::before { background: var(--g-btn); box-shadow: 0 0 0 3px rgba(51,112,60,.14); }
html.g .d-xl { font-weight: 600; letter-spacing: -.045em; line-height: .98;
               font-size: clamp(2.6rem, 5.8vw, max(5.2rem, 3.8vw)); }
/* the section titles carry the page (owner: "section title can be bigger/ pop more") */
html.g .d-l, html.g .how__line {
  font-weight: 600; letter-spacing: -.038em; line-height: 1.02;
  font-size: clamp(2.3rem, 4.4vw, max(3.6rem, 2.6vw));
}
html.g .label + .d-l, html.g .label + .how__line { margin-top: .55rem; }
html.g .lede, html.g .hero__sub { color: var(--g-text-2); }

/* ---- BUTTONS: one -------------------------------------------------------- */
html.g .act {
  background: var(--g-btn); color: var(--bone); border-radius: var(--g-r);
  box-shadow: none; font-weight: 600;
}
html.g .act:hover { background: var(--g-btn-hi); box-shadow: none; transform: none; }
html.g .act-2 { color: var(--bone); }
html.g .on-paper .act-2 { color: var(--coal); }
/* the phone's call bar: the same one button */
html.g .callbar a + a { background: var(--g-btn); color: var(--bone); box-shadow: none; }

/* ---- THE MASTHEAD: the ground, a hairline round it ----------------------- */
html.g .nav__panel {
  background: rgba(5,17,11,.86); border: 1px solid var(--g-hair); border-radius: var(--g-r);
  box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* ---- HERO: square to the edges, the photograph calmer, the grid over it -- */
html.g .hero__canvas { background: var(--g-night); }
/* a longer hero on a desk (owner: "hero cud be bit longer i think, is it
   strechable down"): just past the screen's own height, so the photograph has
   room and the track record sits at the fold. svh is measured on the screen,
   the site drawn at --site-zoom, so the zoom is divided back out. */
@media (min-width: 900px) {
  /* then more ("trying to give more breathing vibe, not cluttered if u stretch
     it down more"): well past the screen, the words and the form settled low
     with open photograph above them */
  html.g .hero__canvas { min-height: clamp(560px, calc(118svh / var(--site-zoom, 1)), 1700px); }
  /* the words and the form held in the middle of the taller hero, not pushed
     down with it (owner: "when u stretch hero down, u pushed hero headline etc
     down together too much") — the room opens above and below them */
  html.g .hero__canvas { display: flex; flex-direction: column; justify-content: center; }
  html.g .hero__inner { align-items: center; padding-block: clamp(5rem, 10vh, 7rem) clamp(4rem, 8vh, 6rem); }
}
/* the photograph at its own light, a touch brighter (owner: "brighten up the
   hero image too, i think its tinted dark intentionally") */
html.g .hero__img { filter: brightness(1.06) saturate(1.06); }
html.g .hero__copy { text-shadow: 0 2px 28px rgba(0,0,0,.38); }
html.g .hero__canvas::after {
  animation: g-drift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 0 0, rgba(243,241,237,.22) 1.1px, transparent 1.7px) 0 0 / calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2),
    linear-gradient(rgba(243,241,237,.05) 1px, transparent 1px) 0 0 / var(--g-pitch) var(--g-pitch),
    linear-gradient(90deg, rgba(243,241,237,.05) 1px, transparent 1px) 0 0 / var(--g-pitch) var(--g-pitch),
    linear-gradient(90deg, rgba(5,17,11,.66) 0%, rgba(5,17,11,.3) 36%, rgba(5,17,11,0) 58%),
    linear-gradient(to bottom, rgba(5,17,11,0) 74%, var(--g-night) 100%),
    radial-gradient(circle, rgba(110,185,126,.16), transparent 62%) 20% 30% / 70vmax 70vmax no-repeat;
}
/* the light moves; the grid and the washes stay where they are */
@keyframes g-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 10% 20%; }
  to   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 75% 55%; }
}
@media (prefers-reduced-motion: reduce) {
  html.g .hero__canvas::after { animation: none; }
  html.g .hl { animation: none; background-size: 100% 100%; }
}

/* THE HERO'S WORDS (owner: "this may be improved in hero"): the kicker, then
   the headline at a hero's size, the line under it held to a measure, and
   the two ways on as buttons — the work in the one green, the phone outlined
   beside it — not two underlined words. Same words as before. */
html.g .hero__copy .label { margin-bottom: 1.4rem; color: #9BD8A8; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 14px rgba(0,0,0,.55); }
/* THE HEADLINE IN GREATER SACRAMENTO'S LANGUAGE (owner, 31 Oct: "hero headline
   txt needs major update feels too outdated compared to greater sacramento and
   boring"; then "u cud keep same tagline"): A YARD YOU'LL LOVE / COMING HOME
   TO. in heavy capitals; the second line drawn in the city art's outline, and
   a soft band of light sweeps through it on arrival and leaves it filled. */
html.g .hero .hero__h {
  text-transform: uppercase; font-weight: 800; letter-spacing: -.035em; line-height: .92;
  /* bigger (owner: "this tag line be bigger on both desk and mobile") */
  font-size: clamp(3rem, 5.6vw, max(5.6rem, 4.1vw));
}
html.g .hero__h-a, html.g .hero__h-b { display: block; text-wrap: balance; }
/* COMING, then HOME TO. larger on its own line (owner: "make home to. bigger
   than coming"); the outline and the sweep run across both */
html.g .hero__h-c, html.g .hero__h-d { display: block; }
html.g .hero__h-d { font-size: 1.3em; line-height: .88; }
html.g .hero__h-b {
  color: transparent; -webkit-text-stroke: 2px rgba(243,241,237,.96);
  /* the light that passes through is the logo's green — never a faded white
     (owner: "the faded white makes [a bad] vibe") — on the same five-wide sheet
     as the city art's, so it fades in from nothing and out to nothing */
  background-image: linear-gradient(100deg,
    rgba(110,185,126,0) 0%, rgba(110,185,126,0) 20%,
    rgba(110,185,126,.12) 26%, rgba(118,192,134,.55) 32%, rgba(124,198,140,.97) 39%,
    rgba(124,198,140,.97) 61%, rgba(118,192,134,.55) 68%, rgba(110,185,126,.12) 74%,
    rgba(110,185,126,0) 80%, rgba(110,185,126,0) 100%);
  background-size: 500% 100%; background-repeat: no-repeat; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  /* the light flows through and out, and the line rests EMPTY — its outline,
     the photograph showing through the letters (owner: "make … coming home to
     end empty inner. cool with image behind it") */
  animation: gs-flow 4.6s cubic-bezier(.37,0,.63,1) .6s 1 both;
}
@media (prefers-reduced-motion: reduce) { html.g .hero__h-b { animation: none; background-position: 50% 0; } }
/* THE PHONE HERO STRETCHED (owner: "hero may be stretched down even more for
   mobile"): a taller crop of the photograph and a hero near the phone's own
   height, the words settled lower under more picture */
@media (max-width: 760px) {
  html.g .hero__img { --hero-img-ar: 3 / 4; --hero-img-fade: 70%; }
  html.g .hero__canvas { min-height: calc(96svh / var(--site-zoom, 1)); }
  html.g .hero .hero__h { font-size: clamp(2.9rem, 12.6vw, 4.4rem); }
  html.g .hero__h-d { font-size: 1.22em; }
}
html.g .hl {
  font-weight: 650; letter-spacing: -.045em;
  background: linear-gradient(transparent 62%, rgba(110,185,126,.45) 62%, rgba(110,185,126,.45) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: g-hl 1.1s .5s var(--ease-s) forwards;
}
@keyframes g-hl { to { background-size: 100% 100%; } }
html.g .hero__sub {
  max-width: 34ch; margin-top: 1.5rem; font-size: clamp(1.05rem, 1.35vw, 1.24rem); line-height: 1.55;
  /* read over the brighter photograph (owner: "bad visibility" on this line) */
  color: rgba(243,241,237,.95); font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 20px rgba(0,0,0,.6);
}
html.g .hero__acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.3rem; }
html.g .hero__acts .act-2 {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.25rem; border-radius: var(--g-r); border: 1px solid var(--g-hair-2);
  font-weight: 600; text-decoration: none; background: rgba(5,17,11,.4);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
html.g .hero__acts .act-2::after { display: none; }       /* the underline the links drew */
html.g .hero__acts .act-2:hover { border-color: rgba(243,241,237,.4); background: rgba(5,17,11,.6); }
html.g .hero__acts .act-2:first-child { background: var(--g-btn); border-color: var(--g-btn); }
html.g .hero__acts .act-2:first-child:hover { background: var(--g-btn-hi); border-color: var(--g-btn-hi); }

/* ---- SHEETS: every panel ------------------------------------------------- */
html.g .intake, html.g .proof {
  background: var(--g-night-1); border: 1px solid var(--g-hair); border-radius: var(--r-m);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.g .what__canvas, html.g .rev__stage { box-shadow: none; }
html.g .intake { background: rgba(5,17,11,.92); }
html.g .proof { background: rgba(5,17,11,.94); }
html.g .proof__n { font-weight: 400; letter-spacing: -.03em; }
html.g .proof__n i { color: var(--volt); font-style: normal; }
html.g .proof__l { text-transform: uppercase; letter-spacing: .14em; font-size: .6rem; color: var(--g-text-2); }

/* ---- PHOTOGRAPHS: square, a dotted frame inside, as on the posts --------- */
html.g .wtile__frame, html.g .lyr, html.g .lyr img { border-radius: var(--g-r-media); }
html.g .wtile__frame { position: relative; box-shadow: none; }
html.g .wtile__frame::after {
  content: ''; position: absolute; inset: 8px; z-index: 2; pointer-events: none;
  border: 1px dashed rgba(243,241,237,.4); border-radius: calc(var(--g-r-media) - 8px);
}
html.g .lyr { box-shadow: none; }
html.g .wtile__cap { border-top: 1px solid var(--g-hair); padding-top: .8rem; }

/* ---- TILES: every choice, in both forms ---------------------------------- */
html.g .intake__chips, html.g .est .opts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: g-t;
}

html.g .ichip, html.g .opt { counter-increment: g-t; display: block; }
html.g .ichip span, html.g .opt span {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .5rem;
  /* read at a glance (owner, 31 Oct: "choice options feel too small/unusually
     hard to read"): body-size words, a calm index above them */
  min-height: 4.4rem; height: 100%; padding: .75rem .9rem .8rem;
  background: rgba(243,241,237,.025); border: 1px solid var(--g-hair-2); border-radius: var(--g-r);
  font-size: 1.14rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--bone); text-align: left; box-shadow: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
/* no index inside a tile: the word gets the whole tile (owner, 31 Oct: "words
   outside or too close to button rightside wall due to length") */
html.g .ichip span::before, html.g .opt span::before { content: none; }
html.g .ichip input:hover + span, html.g .opt:hover span { background: rgba(243,241,237,.04); border-color: var(--g-hair-2); transform: none; }
html.g .ichip input:checked + span, html.g .opt input:checked + span {
  border-color: var(--volt); background: rgba(110,185,126,.07); color: var(--bone);
}
html.g .ichip input:checked + span::before, html.g .opt input:checked + span::before { color: var(--volt); }
html.g .ichip input:focus-visible + span, html.g .opt input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 2px; }

/* ONE LINE A CHOICE (owner, 31 Oct: "form feels sloppy/imbalanced"): the index
   beside the word, not above it, so every tile is the same height and every
   label starts on the same line; the hero's narrow panel takes two columns. */
html.g .ichip span, html.g .opt span {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 0;
  min-height: 3.4rem; padding: .7rem 1rem; font-size: 1.06rem;
}
html.g .ichip span::before, html.g .opt span::before { flex: none; }
html.g .est .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.g .ichip span, html.g .opt span { white-space: nowrap; }
@media (max-width: 520px) { html.g .ichip span, html.g .opt span { font-size: .96rem; padding-inline: .8rem; } }

/* THE HERO FORM WIDE AND SHORT (owner: "shud be wider not vertical form"; a
   tall card ran up under the masthead): the hero splits evenly, the panel
   takes up to 640, its six choices in three one-line columns, name, phone
   and ZIP on one row (modern.css's own), Continue beside the phone line. */
html.g .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); }
html.g .intake { max-width: 640px; }
html.g .intake .intake__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.g .intake .ichip span { min-height: 3.1rem; padding: .6rem 1rem; }
@media (max-width: 1100px) { html.g .hero__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { html.g .intake .intake__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- FIELDS: every input ------------------------------------------------- */
html.g .field input, html.g .field select, html.g .field textarea {
  background: rgba(243,241,237,.03); border: 1px solid var(--g-hair); border-radius: var(--g-r);
  box-shadow: none; color: var(--bone);
}
html.g .field input:focus, html.g .field select:focus, html.g .field textarea:focus {
  border-color: var(--volt); outline: none; box-shadow: 0 0 0 3px rgba(110,185,126,.14);
}
html.g .field label { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g-text-2); }
html.g .intake__trust, html.g .est .note { color: var(--g-text-2); }
html.g .intake__trust { border-top: 1px solid var(--g-hair); padding-top: .8rem; }

/* ---- ROWS: the service list and the process — flat lines, not buttons ---- */
html.g .what__list button {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--g-hair); padding-block: .85rem; transform: none;
}
html.g .what__list button:last-child { border-bottom: 1px solid var(--g-hair); }
html.g .what__list button:hover, html.g .what__list button[aria-selected="true"] { transform: none; background: transparent; }
html.g .what__list button::before { background: var(--volt); border-radius: 0; width: 2px; }
html.g .what__list .n { font-family: var(--g-mono); color: var(--volt); opacity: 1; }
html.g .what__list h3 { font-weight: 500; }
html.g .proc__n { font-family: var(--g-mono); color: var(--volt); }

/* ---- WHAT'S UNDERNEATH (owner: "this section images may be bigger and improve
   overall section feel too dry/halfassed"): its own rounded panel, and one
   large photograph on the right — the row you are on, crossfading as the list
   moves (modern.js puts .is-on on the row and its figure alike) — instead of
   three small frames scattered at odd sizes. The rows read as the index. ---- */
html.g .how {
  margin-inline: var(--inset); border-radius: var(--r-xl); border: 1px solid var(--g-frame);
  background-color: var(--g-tone-b);
  background-image:
    radial-gradient(circle at 0 0, var(--g-node) 1.1px, transparent 1.7px),
    linear-gradient(var(--g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px);
  background-size: calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2), var(--g-pitch) var(--g-pitch), var(--g-pitch) var(--g-pitch);
}
html.g .how__grid { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
html.g .how .cluster { position: relative; aspect-ratio: 4 / 3; display: block; }
html.g .how .lyr, html.g .how .lyr--1, html.g .how .lyr--2, html.g .how .lyr--3 {
  position: absolute; inset: 0; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0;
  border-radius: var(--r-l); box-shadow: none; transform: none; filter: none;
  opacity: 0; transition: opacity .7s var(--ease);
}
html.g .how .lyr img { width: 100%; height: 100%; object-fit: cover; }
html.g .how .lyr::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  border: 1px dashed rgba(243,241,237,.4); border-radius: calc(var(--r-l) - 10px);
}
html.g .how__grid:not(.is-linked) .lyr--1,
html.g .how__grid.is-linked .lyr.is-on { opacity: 1; transform: none; filter: none; box-shadow: none; }
html.g .how__grid.is-linked .lyr:not(.is-on) { opacity: 0; transform: none; filter: none; }
/* the rows: the step's name at a size that reads, the one you are on lit */
html.g .layers li { padding-block: 1.05rem; border-color: var(--g-hair); }
html.g .layers b { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; }
html.g .layers__d { color: var(--g-text-2); }
html.g .layers__n { font-family: var(--g-mono); color: rgba(243,241,237,.45); }
html.g .how__grid.is-linked .layers li { opacity: .5; }
html.g .how__grid.is-linked .layers li.is-on { opacity: 1; }
html.g .layers li.is-on::before {
  content: ''; position: absolute; left: -1rem; top: 1.05rem; bottom: 1.05rem; width: 2px; background: var(--volt);
}
@media (max-width: 900px) {
  html.g .how__grid { grid-template-columns: 1fr; }
  html.g .layers li.is-on::before { left: -.6rem; }
}

/* ---- THE STACK (graph.js): each panel holds when its end is on screen and
   the next slides over it; the one beneath eases back and fades away as it is
   covered. The process becomes a card of the ground, so nothing shows through
   it. ---- */
html.g.g-stack main > .work, html.g.g-stack main > .how,
html.g.g-stack main > .proc, html.g.g-stack main > .rev, html.g.g-stack main > .est { position: sticky; }
html.g.g-stack main > .work, html.g.g-stack main > .how,
html.g.g-stack main > .proc, html.g.g-stack main > .rev, html.g.g-stack main > .est {
  transform-origin: 50% 0;
  transform: scale(calc(1 - .045 * var(--cover, 0)));
  /* a covered card leaves altogether — it is only the passing (owner: "above
     section when scrolled past them shouldn't be visible below bottom section
     or beneath them, its just an animation"). Faded out by the time the new
     card has covered 85% of the screen; by the time any card starts to fade,
     the one beneath it is already gone, so nothing shows through it. */
  opacity: max(0, calc(1 - 1.18 * var(--cover, 0)));
  will-change: transform, opacity;
}
/* A LONGER, FADING FOOT (owner, 1 Nov: "section animation transitions happen
   way too soon on mobile … could be little too soon on desktop too … mobile
   fails to allow user to see things at bottom of previous section … blocked by
   call/book a site walk … let each section scroll longer, make it have a
   longer bottom, like infinity pool vibe fade it out"). Every stacked card but
   the last gets a tail of empty room under its content — a sixth of the
   screen on a desk, a third on a phone, where the call bar takes its share —
   and the card fades out through it like the edge of an infinity pool. The
   card holds only when the tail's end reaches the screen's foot, so its last
   line has risen clear of the call bar before anything comes over it. */
html.g.g-stack main > .work, html.g.g-stack main > .how,
html.g.g-stack main > .proc, html.g.g-stack main > .rev {
  --tail: calc(17svh / var(--site-zoom, 1));
  padding-bottom: calc(clamp(4rem, 7vw, 6rem) + var(--tail));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), rgba(0,0,0,.35) calc(100% - var(--tail) * .4), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), rgba(0,0,0,.35) calc(100% - var(--tail) * .4), transparent 100%);
}
@media (max-width: 760px) {
  html.g.g-stack main > .work, html.g.g-stack main > .how,
  /* a fifth of the phone's screen (a third was "a little bit too much room") */
  html.g.g-stack main > .proc, html.g.g-stack main > .rev { --tail: calc(21svh / var(--site-zoom, 1)); }
}
/* THE TAN BANDS DO NOT FADE INTO THE DARK — tan through the green-black runs
   muddy on the way (owner: "the bottom fade on tan sections looks halfassed").
   They stay tan to a clean rounded foot; in the tail only their grid lines
   fade away, into plain paper, so the room reads as the sheet's own margin. */
html.g.g-stack main > .rev {
  -webkit-mask-image: none; mask-image: none;
  border-radius: var(--r-xl);
  background-image:
    linear-gradient(to bottom, rgba(233,228,219,0) calc(100% - var(--tail) * 1.1), var(--paper) calc(100% - var(--tail) * .35)),
    radial-gradient(circle at 0 0, rgba(20,16,13,.16) 1.1px, transparent 1.7px),
    linear-gradient(rgba(20,16,13,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,16,13,.05) 1px, transparent 1px);
  background-size: 100% 100%, calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2), var(--g-pitch) var(--g-pitch), var(--g-pitch) var(--g-pitch);
  background-repeat: no-repeat, repeat, repeat, repeat;
  /* and as a card comes over them they leave quicker: a half-faded tan over
     the dark is the muddy colour, so that moment is kept short */
  opacity: max(0, calc(1 - 1.75 * var(--cover, 0)));
}
html.g.g-stack main > .proc {
  margin-inline: var(--inset); border-radius: var(--r-xl); border: 1px solid var(--g-frame);
  background-color: var(--g-night);
  background-image:
    radial-gradient(circle at 0 0, var(--g-node) 1.1px, transparent 1.7px),
    linear-gradient(var(--g-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-grid) 1px, transparent 1px);
  background-size: calc(var(--g-pitch) * 2) calc(var(--g-pitch) * 2), var(--g-pitch) var(--g-pitch), var(--g-pitch) var(--g-pitch);
}

/* ---- REVIEWS, ESTIMATE, FOOT: the same words and lines ------------------- */
html.g .rev__item { border-color: var(--g-hair); border-radius: var(--g-r); }
/* the estimate keeps modern.css's wide rounded panel (owner: "cud be made wide
   rounder than squished"), its choices in three wide columns like the hero's */
html.g .est__surface { border-radius: var(--r-xl); }
/* the outline "GREATER SACRAMENTO" over the town names stays as modern.css
   draws it (owner: "why did u get rid of my awesome greater sacramento art"),
   and on a desk it runs out past the column to 92% of the screen ("make
   greater sacramento art bigger on desktop"). 11.6 is the word's width in
   ems, measured: 1205 px at 104 px. */
/* ITS INTRO (graph.js starts it): one continuous fill, not letter by letter.
   A soft band of light — white, a faint green glint on its leading edge —
   flows into the word from the left, through the letters, holds full, flows
   out to the right; then a second sweep fills it and stays, the fill resting
   softer than the sweep (owner: "only 1-2 animations then stop at a filled
   state but … slightly more transparent inner fill"). The band is a gradient
   clipped to the letters, slid across by background-position. */
/* SMOOTH (owner, 1 Nov: "too rough of a start, like clunk … should fade in
   smoothly"): the band's edges are feathered wide — the light rises through a
   fifth of the word rather than arriving as an edge — no glint on it, and it
   moves on a gentle sine ease, slower */
html.g .rail__place.is-lit {
  /* a sheet five words wide, the band in its middle: the word starts and ends
     with nothing on it, and the light rises through a long soft ramp — the
     first frame no longer lands half-lit ("color just drops in") */
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%,
    rgba(255,255,255,.1) 26%, rgba(255,255,255,.5) 32%, rgba(255,255,255,.96) 39%,
    rgba(255,255,255,.96) 61%, rgba(255,255,255,.5) 68%, rgba(255,255,255,.1) 74%,
    rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
  background-size: 500% 100%; background-repeat: no-repeat; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  /* twice through ("make greater sacramento animation go twice"), then the
     settling sweep below */
  animation: gs-flow 5.2s cubic-bezier(.37,0,.63,1) .3s 2 both;
}
/* the second sweep: the same band at a softer white, in from the left, and it stays */
/* it rests brighter and not one flat grey ("should end a bit more bright and
   maybe not so monotone"): white at the left running into the logo's soft
   green at the right, across the word */
html.g .rail__place.is-lit.is-rest {
  background-image: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%,
    rgba(255,255,255,.1) 26%, rgba(255,255,255,.5) 32%, rgba(255,255,255,.9) 40%,
    rgba(236,246,238,.86) 50%, rgba(190,228,201,.84) 60%,
    rgba(190,228,201,.45) 68%, rgba(190,228,201,0) 80%, rgba(190,228,201,0) 100%);
  background-size: 500% 100%;
  animation: gs-settle 3.4s cubic-bezier(.37,0,.63,1) .4s 1 both;
}
@keyframes gs-settle { from { background-position: 100% 0; } to { background-position: 50% 0; } }
@keyframes gs-flow {
  0%   { background-position: 100% 0; }
  42%  { background-position: 50% 0; }
  58%  { background-position: 50% 0; }
  88%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

/* the words under it at a size that reads on a desk (owner: "this section
   seems too small font too, on desktop only"): the line, the call, the towns
   (13, 11.5 and 11.8 px before), the towns spaced to match */
@media (min-width: 1100px) {
  html.g .rail__label { font-size: 1.2rem; }
  html.g .rail__note { font-size: 1rem; margin-top: .35rem; }
  html.g .rail__run a, html.g .rail__run span { font-size: 1.12rem; padding-inline: 1.5rem; }
  html.g .rail__head { padding-right: 2rem; }
}

/* on a phone the two lines (GREATER / SACRAMENTO) fill the screen, both set
   from the same left edge, instead of running off it; 8.45 is SACRAMENTO's
   width in ems */
@media (max-width: 1099px) {
  /* graph.js fits the type so SACRAMENTO fills the band's width exactly,
     inside the page's side margin */
  html.g .rail__place { text-align: left; line-height: .9; }
}
@media (max-width: 600px) {
  html.g .rail__place { padding-inline: var(--gut); }
}
@media (min-width: 1100px) {
  html.g .rail__place {
    width: calc(100vw / var(--site-zoom, 1)); margin-left: calc(50% - 50vw / var(--site-zoom, 1)); text-align: center;
    /* vw is measured on the screen and the site is drawn at --site-zoom, so the
       zoom is divided back out */
    font-size: calc(92vw / 11.6 / var(--site-zoom, 1)); white-space: nowrap;
  }
}
html.g .est__bar i { border-radius: 0; }
html.g .foot__tel { color: var(--bone); }

/* ---- THE FOOT, TIDIED (owner, 1 Nov: "very sloppy and cheap ass vibe
   footer"): the logo column reads logo, line, phone, then the social row at
   its foot with room above it; the row level (the footer's list spacing,
   .foot li + li, had stepped each icon down) and the icons as solid rounded
   tiles in the sheet's language, not thin rings; less dead space above. ---- */
html.g .foot { padding-top: clamp(2.6rem, 5vw, 4.2rem); }
html.g .foot__top > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
html.g .foot__top > div:first-child > .foot__social { order: 9; }
html.g .foot__blurb { max-width: 32ch; margin-top: 1.1rem; color: rgba(243,241,237,.66); }
html.g .foot__social { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.7rem 0 0; padding: 0; }
html.g .foot__social li, html.g .foot__social li + li { margin: 0; }
html.g .foot__social a {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 12px;
  border: 1px solid rgba(243,241,237,.1); background: rgba(243,241,237,.045); color: rgba(243,241,237,.82);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
html.g .foot__social a::after { content: none; }
html.g .foot__social a:hover { color: #fff; border-color: rgba(110,185,126,.5); background: rgba(110,185,126,.16); transform: translateY(-2px); }
html.g .foot__social a:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
html.g .foot__social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* ---- PHONE: the masthead's mark at a size that leaves the page room ------ */
@media (max-width: 600px) {
  html.g { --mark-h: 44px; }
  html.g .intake__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}