/* Creo.

   Built to the brand board: a near-black night band carrying the wordmark and a
   painted gradient ring, then daylight for the work, then the same paint sweeping
   back in at the foot.

   The rule that keeps it from becoming a rainbow: COLOUR IS A SHAPE, NOT A SKIN.
   The gradient appears on painted objects only — the ring, the four pillar marks,
   the closing wave, one word of the headline, one rule under the wordmark. Type,
   panels and borders stay ink-and-paper. Every client site in the portfolio is
   loud in its own way, so the work grid stays quiet and lets the screenshots talk.
*/

:root{
  /* the six-stop brand gradient, left to right */
  --g1:#FF6A13; --g2:#FF2E63; --g3:#D81E8F;
  --g4:#8B2BD6; --g5:#3B4FE0; --g6:#17A9E0;
  --grad:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g6));

  /* Sampled from the brand board. The hero artwork is a rectangular crop that
     keeps its own background, so any other value here shows as a visible box
     around it. Do not "tidy" this to a rounder number. */
  --night:#00040E;
  --night-2:#0A1020;    /* a panel lifted off it */
  --night-ink:#F2F4F8;
  --night-ink-2:#8E97AC;
  --night-rule:rgba(255,255,255,.13);

  --paper:#FFFFFF;
  --tint:#F4F5F8;       /* the daylight band behind the pillars */
  --sheet:#FFFFFF;
  --ink:#101319;
  --ink-2:#575E6C;
  --rule:#E2E5EA;
  --rule-2:#EDEFF3;
  --shadow:rgba(16,19,25,.09);
  --accent:#8B2BD6;     /* one solid pull from the gradient, for focus + links */
}

/* Dark scheme keeps the night band as-is and drops the daylight to match it,
   so the page reads as one dark object rather than a lit strip on a dark page. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B0F19; --tint:#0F1523; --sheet:#141B2B;
    --ink:#E9ECF2; --ink-2:#98A1B4;
    --rule:#232B3C; --rule-2:#1B2231;
    --shadow:rgba(0,0,0,.5);
    --accent:#A98CFF;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0F19; --tint:#0F1523; --sheet:#141B2B;
  --ink:#E9ECF2; --ink-2:#98A1B4;
  --rule:#232B3C; --rule-2:#1B2231;
  --shadow:rgba(0,0,0,.5);
  --accent:#A98CFF;
}

*{box-sizing:border-box;margin:0;padding:0}

/* An author `display` rule outranks the UA stylesheet's [hidden]{display:none},
   so any element given display:flex/grid here ignores its own hidden attribute.
   That shipped an empty SETUP / MONTHLY pricing block with no figures in it —
   exactly the placeholder this site is built to never show. */
[hidden]{display:none!important}

html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}}

/* ── scroll reveals ──────────────────────────────────────────────────────
   The hidden state is scoped to html[data-reveal], and ONLY site.js sets that
   attribute — after checking that IntersectionObserver exists and that the
   reader has not asked for reduced motion. A bare `opacity:0` in the base
   stylesheet is the classic way to ship a blank page: any reader whose script
   failed, or who has motion turned off, gets content that fades in never.

   The media query below is a second net. matchMedia is read once at load, so a
   reader who turns reduced motion ON afterwards would otherwise stay staring at
   invisible sections — CSS keeps working after JS has stopped looking. */
html[data-reveal] [data-r]{opacity:0;transform:translateY(15px)}
html[data-reveal] [data-r="fade"]{transform:none}
html[data-reveal] [data-r].is-in{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  html[data-reveal] [data-r]{opacity:1!important;transform:none!important}
}

body{
  background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  /* The ring is deliberately allowed to bleed past the edge. `clip` rather than
     `hidden` because hidden makes the element a scroll container, which kills
     position:sticky for anything added here later. */
  overflow-x:clip;
}

/* The filter definitions are markup, not picture. Zero-size, out of flow. */
.defs{position:absolute;width:0;height:0;overflow:hidden}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;z-index:99;border-radius:6px}
.skip:focus{left:.6rem;top:.6rem}

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

/* ── bands and measure ───────────────────────────────────────────────── */
.wrap{max-width:78rem;margin-inline:auto;padding-inline:clamp(1.15rem,5vw,3.5rem)}
.band{position:relative}
.band--night{background:var(--night);color:var(--night-ink)}
.band--tint{background:var(--tint);padding-block:clamp(3.2rem,7vw,5.5rem);
  border-block:1px solid var(--rule)}

/* ── top ─────────────────────────────────────────────────────────────── */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1.6rem,3.5vw,2.6rem);position:relative;z-index:2}
.mark{text-decoration:none;display:inline-block}
/* Jost is the closest Google face to the geometric wordmark on the board:
   near-circular bowls, a single-storey feel, and it survives being tracked out
   this far without the counters closing up. */
.mark__w{
  font-family:Jost,"Century Gothic",Futura,sans-serif;font-weight:200;
  font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:.22em;line-height:1;
  display:block;text-transform:lowercase;
}
/* The gradient rule under the wordmark — straight off the board. */
.mark::after{content:"";display:block;height:2px;width:min(100%,7.5rem);
  margin-top:.55rem;background:var(--grad);border-radius:2px}

.nav{display:flex;flex-wrap:wrap;gap:clamp(.9rem,2.2vw,1.9rem);font-size:.86rem;
  font-weight:500;padding-top:.5rem}
.nav a{text-decoration:none;color:var(--night-ink-2);padding-block:.25rem;
  border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.nav a:hover{color:var(--night-ink);border-bottom-color:var(--g2)}

/* Below 640 the nav can no longer sit beside the wordmark without breaking
   across it, so the header stacks. */
@media (max-width:640px){
  .top{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .nav{padding-top:0;gap:1.1rem;font-size:.82rem}
}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(2.5rem,7vw,5rem) clamp(4rem,9vw,7rem);
}
.hero__h{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(2.05rem,5.1vw,3.7rem);line-height:1.1;letter-spacing:.005em;
  text-wrap:balance;
}
/* Direct children only. A bare `.hero__h span` also caught the nested .grad
   span and made it a block, which broke "TOGETHER WE / TRANSFORM." onto a fourth
   line — the one word that is supposed to close line three. */
.hero__h > span{display:block}
/* The one word that carries the gradient. background-clip:text needs a
   transparent fill; the fallback colour underneath it matters on anything that
   cannot clip, so it is set to a real mid-gradient hue rather than nothing. */
.grad{
  color:var(--g3);
  background:linear-gradient(95deg,var(--g1),var(--g2) 30%,var(--g4) 66%,var(--g6));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero__tag{margin-top:clamp(1.4rem,3vw,2rem);color:var(--night-ink-2);
  font-weight:300;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.65}
.hero__tag > span{display:block}
.hero__meta{margin-top:clamp(1.6rem,3vw,2.3rem);padding-top:1.1rem;
  border-top:1px solid var(--night-rule);font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--night-ink-2);font-weight:500}

/* ── the hero mark ───────────────────────────────────────────────────── */
/* The board runs the swirl wide and lets it fall off the right edge rather than
   sitting it in a tidy box, so this is sized off the viewport and allowed to
   overhang the gutter. The <img> keeps width/height attributes to reserve the
   space and stop layout shift, so height:auto is required or the ratio is
   ignored — the same trap as the portfolio screenshots. */
.heroart{
  display:block;justify-self:end;
  width:min(115%,54vw);height:auto;max-width:none;
  margin-right:calc(-1 * clamp(1.15rem,5vw,3.5rem));
  /* The crop is a rectangle of artwork on a black ground. Lossy WebP lifts flat
     near-black a few levels, which drew a visible box around it; the file is
     exported with its black point pulled to true black, and screen composites
     black as a no-op — so the edges of the rectangle stop existing. Removing
     this brings the box back. */
  mix-blend-mode:screen;
}

/* Below 900 the mark stops being a side panel and becomes the ground the
   headline sits on — the only way it survives a phone width. */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero__text{grid-area:1/1;position:relative;z-index:2}
  .heroart{grid-area:1/1;z-index:1;width:130%;justify-self:center;
    align-self:center;opacity:.5;margin:0 -15%}
}

/* ── statement cards ─────────────────────────────────────────────────── */
/* Three cards butted edge to edge with no gutter — the board runs them as one
   continuous band, and a gap here would turn it into a card grid. */
.say{display:grid;grid-template-columns:repeat(3,1fr)}
.say__card{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(19rem,26vw,25rem);
  padding:clamp(1.5rem,2.4vw,2.4rem);
  display:flex;flex-direction:column;
}
/* This band is pinned to the board's own look in BOTH schemes. The art is
   photographic — a white bulb sheet and a sunrise sky cannot be inverted, and a
   dark variant would just show them as bright rectangles on a dark page.
   Card one is pure white because the bulb crop's paper is flattened to pure
   white on export; any other value here draws a box around the artwork. */
.say__card--light{background:#FFFFFF;color:#101319;justify-content:center}
.say__card--dark {background:#00040E;color:#F2F4F8;justify-content:flex-end}
/* The swirl runs behind the copy on this card, so the type needs ground under
   it — a scrim rising from the bottom rather than a box around the words. */
.say__card--dark::after{content:"";position:absolute;inset:auto 0 0 0;height:78%;
  z-index:1;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,4,14,.55) 42%,rgba(0,4,14,.92) 82%)}
/* The board's third card is a sunrise, so this one is a wash rather than a flat
   fill — it is the only place on the page the gradient acts as a background. */
.say__card--sky{
  color:#101319;justify-content:flex-start;
  background:linear-gradient(150deg,#D9E4F0 0%,#EFE4E2 46%,#F6DCC4 100%);
}

.say__txt{position:relative;z-index:2;max-width:24ch}
/* The bulb takes the right 40% of card one and the summit the right 70% of card
   three, so those columns are the narrow ones. */
.say__card--light .say__txt{max-width:19ch}
.say__card--sky .say__txt{max-width:18ch}
.say__h{font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.05rem,1.7vw,1.42rem);line-height:1.16}
/* The lead word takes the board's orange and its own line; the rest stays ink. */
.say__h b{display:block;color:var(--g1);font-weight:700}
.say__h::after{content:"";display:block;height:2px;width:3.2rem;margin-top:.75rem;
  background:var(--grad);border-radius:2px}
.say__n{margin-top:.85rem;font-size:.92rem;line-height:1.55;opacity:.78}
.say__card--dark .say__n{color:#B4BDD0;opacity:1}

/* ---- the art inside the cards: crops from the brand board ---- */
.art{position:absolute;inset:0;z-index:1;pointer-events:none}
.art img{position:absolute;display:block}

/* Card 1 splits down the middle: type owns the left, the bulb owns the right.
   Sized so "HAS NO LIMITS." still fits on one line beside it. */
.art--bulb img{right:1%;top:50%;transform:translateY(-50%);height:74%;width:auto}

/* Cards 2 and 3 are photographs bled to the card edge on the board. Cut out of
   it they end in a hard vertical seam, so each fades to the left into the
   card's own ground instead of stopping dead.

   Both run at their natural aspect (height:100%, width:auto) rather than being
   forced to a min-width — the crops are portrait and the cards landscape, so
   covering the card would have sliced the top and bottom off each photograph. */
.art--tablet img,.art--peak img{
  right:0;top:0;height:100%;width:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
  mask-image:linear-gradient(90deg,transparent,#000 30%);
}

@media (max-width:960px){
  .say{grid-template-columns:1fr}
  /* Stacked, a card grows as tall as its copy needs, so sizing the bulb off
     card HEIGHT blew it up to two thirds of the width and swallowed the note.
     Width-sized here, height-sized in the three-across layout. */
  .art--bulb img{height:auto;width:36%;right:2%}
  .say__card--light .say__txt,.say__card--sky .say__txt{max-width:22ch}
  .say__card{min-height:16rem}
}

/* ── section heads ───────────────────────────────────────────────────── */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;padding-bottom:.9rem;margin-bottom:clamp(1.8rem,4vw,3rem);
  position:relative;border-bottom:1px solid var(--rule)}
/* The gradient tick that marks the start of every section rule. */
.sechead::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:4.5rem;background:var(--grad);border-radius:2px}
.sechead h2{font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.2}
.sechead__n{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums}

/* ── work ────────────────────────────────────────────────────────────── */
.work{padding-block:clamp(3.2rem,7vw,5.5rem)}
/* 20rem, not 24. The measure inside .wrap is 1136px at desktop, and a 24rem
   minimum only fits two tracks in that — which left the third build sitting
   alone on its own row. At 20rem the row is three across, and it still falls to
   two and then one as the window narrows. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.6rem,3.5vw,2.6rem)}

.card{position:relative;display:flex;flex-direction:column;background:var(--sheet);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--shadow)}
/* The gradient hairline along the top of each card — the paint touching the
   work without landing on the screenshot itself. */
.card__shot{
  /* height:auto is load-bearing. The <img> carries width/height attributes to
     reserve space and stop layout shift, but a resolved height makes the browser
     ignore aspect-ratio entirely — the box came out 525x938 (portrait) and
     object-fit:cover then sliced the sides off every screenshot. */
  display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:top center;
  background:var(--tint);border-bottom:1px solid var(--rule-2);
}
.card__body{padding:1.15rem 1.25rem 1.4rem}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.card__name{font-weight:600;font-size:1.16rem;line-height:1.25;letter-spacing:-.01em}
/* The name carries the link; the ::after stretches its hit area over the whole
   card, so the screenshot is clickable without a second link pointing at the
   same place. z-index keeps it under nothing — there is nothing else to click. */
.card__link{text-decoration:none;color:inherit}
.card__link::after{content:"";position:absolute;inset:0;border-radius:14px}
.card__link:hover{color:var(--accent)}
.card__go{display:inline-block;margin-left:.35em;font-size:.82em;
  transition:transform .16s ease}
.card--linked:hover .card__go{transform:translate(2px,-2px)}
/* The focus ring belongs on the card, not on the inline text, because the card
   is what the ::after has made clickable. */
.card__link:focus-visible{outline:none}
.card:has(.card__link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* The client/concept chip is the only structural marker on a card, because it
   is the only thing about a card that is genuinely categorical. No 01/02/03 —
   this list is not a sequence and numbering it would imply one. */
.k{font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:.3em .6em;white-space:nowrap;border-radius:999px;line-height:1.4;
  border:1px solid currentColor}
.k--client{color:#fff;border-color:transparent;background:linear-gradient(95deg,var(--g2),var(--g4))}
.k--concept{color:var(--ink-2);border-color:var(--rule)}
.card__type{font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;color:var(--ink-2);margin-top:.5rem}
.card__note{margin-top:.7rem;font-size:.93rem;color:var(--ink-2);max-width:46ch}
.card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.95rem}
.card__tags span{font-size:.68rem;letter-spacing:.03em;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:999px;padding:.25em .65em}

.disclose{margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.2rem;
  border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-2);max-width:66ch}
.disclose .k{margin-inline:.14em}

/* ── pillars ─────────────────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(1.6rem,3.2vw,2.4rem)}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:1.05rem;align-items:start}
.pillar__mark{position:relative;width:4.5rem;aspect-ratio:1;flex:none}
/* Same construction as the hero ring at a fraction of the size, with a much
   gentler displacement — the big filter's scale would eat a 72px stroke whole. */
.pillar__brush{position:absolute;inset:0;filter:url(#brush-sm)}
.pillar__arc{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from var(--from,150deg),
    transparent 0 14deg,
    var(--g1) 36deg, var(--g2) 78deg, var(--g3) 118deg,
    var(--g4) 158deg, var(--g5) 202deg, var(--g6) 244deg,
    transparent 282deg 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 68%,#000 76%,#000 96%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 68%,#000 76%,#000 96%,transparent 100%);
}
.pillar__icon{position:absolute;inset:22%;color:var(--ink);opacity:.9}
.pillar__icon svg{width:100%;height:100%;display:block}
/* One solid tone per word, set from brand.js. A gradient across a word this
   short samples only a sliver of it, which made all four titles the same pink. */
.pillar__t{font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.95rem;line-height:1.2;color:var(--tone,var(--g3))}
.pillar__d{margin-top:.55rem;font-size:.92rem;color:var(--ink-2)}

/* ── about ───────────────────────────────────────────────────────────── */
/* A night band between two light ones. This is the quiet, personal beat of the
   page, and it earns the change of ground — everything around it is selling. */
.about{padding-block:clamp(3.5rem,8vw,6rem)}
.about__h{
  font-family:Jost,"Century Gothic",Futura,sans-serif;
  font-weight:300;font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:1.1;letter-spacing:.015em;color:#FFFFFF;
}
.about__h::after{content:"";display:block;height:2px;width:4rem;margin-top:.9rem;
  background:var(--grad);border-radius:2px}
.about__body{margin-top:clamp(1.6rem,3.5vw,2.4rem);max-width:62ch}
.about__p{color:var(--night-ink-2);font-weight:300;line-height:1.7}
.about__p + .about__p{margin-top:1.1rem}
/* The opening paragraph is the one a skimmer reads, so it is set larger and in
   the brighter ink. */
.about__p--lead{font-size:clamp(1.08rem,1.9vw,1.28rem);color:var(--night-ink);
  line-height:1.6}

/* ── process ─────────────────────────────────────────────────────────── */
.how{padding-block:clamp(3.2rem,7vw,5.5rem)}
.steps{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:clamp(1.8rem,3.5vw,2.8rem);
}
.step{position:relative;padding-top:1.1rem;border-top:1px solid var(--rule)}
/* Numbered because this list genuinely is a sequence — the one place on the
   page where a numeral carries meaning rather than decoration. The work grid
   is deliberately unnumbered for exactly the opposite reason. */
.step__n{
  font-family:Jost,"Century Gothic",Futura,sans-serif;
  font-weight:300;font-size:1.5rem;line-height:1;display:block;
  margin-bottom:.7rem;font-variant-numeric:tabular-nums;
  background:linear-gradient(95deg,var(--g2),var(--g4));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--g3);
}
.step__t{font-weight:600;font-size:1.01rem;line-height:1.3;letter-spacing:-.005em}
.step__d{margin-top:.5rem;font-size:.93rem;color:var(--ink-2)}

/* ── estimator ───────────────────────────────────────────────────────── */
.q{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.2rem);align-items:start}

.qg + .qg{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.qg__q{font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:.9rem}
.qg__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:.7rem}

.qo{
  display:flex;flex-direction:column;gap:.3rem;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink);background:var(--sheet);
  border:1px solid var(--rule);border-radius:12px;
  padding:.85rem 1rem;
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.qo:hover{border-color:var(--ink-2);transform:translateY(-1px)}
.qo__l{font-weight:600;font-size:.95rem;line-height:1.25}
.qo__n{font-size:.82rem;color:var(--ink-2);line-height:1.45}

/* Selected state carries a gradient edge rather than a fill, so a chosen option
   still reads as text you can compare against the others. The 2px inset ring is
   what makes it obvious at a glance which ones are on. */
.qo.is-on{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--g4), 0 6px 18px var(--shadow);
}
.qo.is-on .qo__l{color:var(--g4)}

/* ---- the free-text questions ---- */
/* The block sits on the section's own ground — no panel, no card edge. It had a
   night panel so the heading could be white; on the light band that reverses,
   and the heading takes the page's ink. The emphasis now comes from the display
   size and the change of face, not from a box. */
.qa{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--rule);
}
/* Jost — the wordmark's face, at display size. It is the only other family the
   page loads, so it is the one real typographic contrast available. */
.qa__t{
  font-family:Jost,"Century Gothic",Futura,sans-serif;
  font-weight:300;font-size:clamp(1.65rem,3.4vw,2.35rem);
  line-height:1.1;letter-spacing:.015em;color:var(--ink);
}
.qa__t::after{content:"";display:block;height:2px;width:3.4rem;margin-top:.7rem;
  background:var(--grad);border-radius:2px}
.qa__note{font-size:.9rem;color:var(--ink-2);margin:.9rem 0 1.5rem;max-width:52ch}
.qa__f + .qa__f{margin-top:1.15rem}
.qa__l{display:block;font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ink)}
.qa__h{font-size:.84rem;color:var(--ink-2);line-height:1.45;margin-top:.2rem}
.qa__i{
  display:block;width:100%;margin-top:.5rem;
  font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--sheet);border:1px solid var(--rule);border-radius:12px;
  padding:.7rem .9rem;resize:vertical;
  transition:border-color .15s,box-shadow .15s;
}
.qa__i::placeholder{color:var(--ink-2)}
.qa__i:focus{outline:none;border-color:transparent;
  box-shadow:0 0 0 2px var(--g4), 0 6px 18px var(--shadow)}
/* Never colour alone: the invalid field gets a ring AND a sentence under it. */
.qa__i.is-bad{border-color:var(--g2);box-shadow:0 0 0 2px rgba(255,46,99,.35)}
.qa__err{margin-top:.4rem;font-size:.84rem;font-weight:500;color:var(--g2)}

/* ---- the running total ---- */
.q__out{
  position:sticky;top:1.5rem;
  background:var(--sheet);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(1.2rem,2.4vw,1.7rem);
  box-shadow:0 10px 30px var(--shadow);
  overflow:hidden;
}
/* The gradient reappears here because this is the one panel on the page that is
   asking for a decision. */
.q__out::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad)}
.q__lab{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2)}
.q__fig{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;margin-top:.35rem;font-variant-numeric:tabular-nums}
/* Over the ceiling the figure is a sentence, not a number, so it must not sit at
   headline size or it reads as a price. */
.q__fig--over{font-size:clamp(1.25rem,2.6vw,1.6rem);letter-spacing:0}

.q__list{list-style:none;margin-top:1.2rem;padding-top:1.1rem;
  border-top:1px solid var(--rule)}
.q__list li{display:flex;justify-content:space-between;gap:1rem;
  font-size:.9rem;padding:.32rem 0}
.q__list li b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.q__list:empty{display:none}

/* Confirmation that their words travel with the estimate. */
.q__yours{margin-top:1rem;font-size:.86rem;font-weight:500;color:var(--g4)}
/* Trimming and missing contact are warnings, not confirmations, and must not
   read like one. */
.q__yours--trim{color:var(--g1)}
/* The send button stays live while contact is missing — it explains itself on
   click instead of going grey, because a dead control says nothing about why. */
.chip--go.is-waiting{filter:saturate(.35) brightness(.9)}
.q__covers{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  font-size:.86rem;color:var(--ink-2)}
.q__note{margin-top:.7rem;font-size:.86rem;color:var(--ink-2)}
/* The send control lives under the phone field now, not in the estimate panel. */
.qa__send{margin-top:1.6rem}
.qa__send .chip{display:inline-block}
.qa__send .q__yours{margin-top:0;margin-bottom:.9rem}

@media (max-width:860px){
  .q{grid-template-columns:1fr}
  /* Sticky inside a single column would park the panel over the questions it is
     meant to be answering. */
  .q__out{position:static}
}

/* ── upkeep plans ────────────────────────────────────────────────────── */
.plans{padding-block:clamp(3.2rem,7vw,5.5rem)}
.plans__lead{max-width:56ch;color:var(--ink-2);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.plans__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.2rem,2.4vw,1.8rem);align-items:start}

.plan{position:relative;background:var(--sheet);border:1px solid var(--rule);
  border-radius:16px;padding:clamp(1.3rem,2.4vw,1.8rem);overflow:hidden}
/* One plan carries the gradient edge. The others are deliberately plain — if
   every card is emphasised, none of them is. */
.plan--lead{box-shadow:0 10px 30px var(--shadow)}
.plan--lead::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad)}
/* The no-plan option is an honest exit, not a lesser product, so it reads as a
   different kind of thing rather than a downgraded card. */
.plan--none{background:transparent;border-style:dashed}

.plan__n{font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.82rem;color:var(--ink-2)}
.plan__p{margin-top:.5rem;display:flex;align-items:baseline;gap:.3rem;
  font-variant-numeric:tabular-nums}
.plan__p b{font-size:clamp(1.9rem,3.4vw,2.4rem);font-weight:700;line-height:1;
  letter-spacing:-.02em}
.plan__p span{font-size:.9rem;color:var(--ink-2)}
.plan__p--none{font-size:1.35rem;font-weight:600;line-height:1.2;color:var(--ink)}
.plan__note{margin-top:.8rem;font-size:.9rem;color:var(--ink-2)}

.plan__list{list-style:none;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--rule)}
.plan__list li{position:relative;padding-left:1.35rem;font-size:.9rem;
  padding-block:.3rem;line-height:1.5}
/* A gradient tick rather than a bullet — the one place colour lands in here. */
.plan__list li::before{content:"";position:absolute;left:0;top:.72em;
  width:.62rem;height:.62rem;border-radius:50%;background:var(--grad)}
.plan--none .plan__list li::before{background:var(--rule);}

/* ── contact ──/* ── upkeep plans ────────────────────────────────────────────────────── */
.plans{padding-block:clamp(3.2rem,7vw,5.5rem)}
.plans__lead{max-width:56ch;color:var(--ink-2);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.plans__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.2rem,2.4vw,1.8rem);align-items:start}

.plan{position:relative;background:var(--sheet);border:1px solid var(--rule);
  border-radius:16px;padding:clamp(1.3rem,2.4vw,1.8rem);overflow:hidden}
/* One plan carries the gradient edge. The others are deliberately plain — if
   every card is emphasised, none of them is. */
.plan--lead{box-shadow:0 10px 30px var(--shadow)}
.plan--lead::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad)}
/* The no-plan option is an honest exit, not a lesser product, so it reads as a
   different kind of thing rather than a downgraded card. */
.plan--none{background:transparent;border-style:dashed}

.plan__n{font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.82rem;color:var(--ink-2)}
.plan__p{margin-top:.5rem;display:flex;align-items:baseline;gap:.3rem;
  font-variant-numeric:tabular-nums}
.plan__p b{font-size:clamp(1.9rem,3.4vw,2.4rem);font-weight:700;line-height:1;
  letter-spacing:-.02em}
.plan__p span{font-size:.9rem;color:var(--ink-2)}
.plan__p--none{font-size:1.35rem;font-weight:600;line-height:1.2;color:var(--ink)}
.plan__note{margin-top:.8rem;font-size:.9rem;color:var(--ink-2)}

.plan__list{list-style:none;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--rule)}
.plan__list li{position:relative;padding-left:1.35rem;font-size:.9rem;
  padding-block:.3rem;line-height:1.5}
/* A gradient tick rather than a bullet — the one place colour lands in here. */
.plan__list li::before{content:"";position:absolute;left:0;top:.72em;
  width:.62rem;height:.62rem;border-radius:50%;background:var(--grad)}
.plan--none .plan__list li::before{background:var(--rule);}

/* ── contact ─────────────────────────────────────────────────────────── */
.band--contact{overflow:hidden}
.contact{padding-block:clamp(3.5rem,8vw,6rem) clamp(4rem,9vw,7rem)}
.contact__h{font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.12;letter-spacing:.005em;
  text-wrap:balance;max-width:20ch}
.contact__p{margin-top:1.2rem;max-width:52ch;color:var(--night-ink-2);font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.7rem,3vw,2.4rem)}
.chip{font-size:.88rem;font-weight:500;text-decoration:none;border-radius:999px;
  padding:.8em 1.5em;border:1px solid var(--night-rule);color:var(--night-ink);
  transition:border-color .16s,color .16s,transform .16s}
.chip:hover{border-color:var(--night-ink);transform:translateY(-1px)}
/* The primary action is the only solid piece of the gradient on the page. */
.chip--go{border-color:transparent;color:#fff;
  background:linear-gradient(95deg,var(--g1),var(--g2) 34%,var(--g4) 72%,var(--g5))}
.chip--go:hover{border-color:transparent;filter:brightness(1.08)}

/* The wave closes the night band; it sits flush at the bottom of it. */
.wave{display:block;width:100%;height:clamp(72px,9vw,130px);margin-bottom:-1px}

/* ── foot ────────────────────────────────────────────────────────────── */
.foot{padding-block:1.8rem 2.6rem;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between}