/* ===========================================================================
   tech-seed.online — the shop's own site.
   Static, no build step, no runtime fetch, no CDN, no external font.

   DESIGN POSITION (Leonardo, 2026-09-08)
   --------------------------------------
   This is a SIBLING to the demo sites in leadgen/demo-template, not a copy of
   one. It has to look like a shop that could plausibly have made those sites,
   while never looking like one of its own clients. Four decisions carry it:

   1. INK AND PAPER. THE WORK BRINGS THE COLOUR.
      Every demo site gets one saturated trade accent (amber, rust, blue...).
      This site is near-black on warm off-white with a single dark spruce
      accent used sparingly. The portfolio screenshots supply all the colour on
      the page. A neutral shop makes the work pop; a colourful shop competes
      with it.

   2. THE PRICE IS ON THE WALL, IN DISPLAY TYPE.
      An agency hides pricing behind "let's talk". A real shop paints it on the
      window. $500 set at h1 scale does more positioning work than any
      paragraph of copy, and it is the single fastest way to NOT read as the
      premium boutique Seedro deliberately owns.

   3. NO PHOTOGRAPHY OF OURSELVES.
      There is no team, no office, no studio. Stock photos of laptops and
      handshakes would be the one lie on an otherwise honest site, and a
      prospect checking us out mid-call is exactly the person who spots it.
      The only images on this site are real screenshots of real work.

   4. WARMTH STAYS, COOLNESS DOESN'T.
      Warm off-white canvas, dark bookends around a light middle. A cool-grey
      minimal page reads as a startup pitching investors. This has to read as a
      small competent shop that answers the phone.
   =========================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(archivo.woff2) format('woff2')}

:root{
  --ink:#111317;          /* near-black — hero + footer bookends */
  --ink-2:#1a1d22;
  --paper:#ffffff;
  --paper-2:#f6f4f0;      /* warm off-white section fill */
  --line:#e4e0d8;
  --accent:#1f5f4b;       /* deep spruce. Dark + cool enough that it never
                             collides with landscaping's bright olive (#5b8c3a)
                             or dental's light teal (#3d8b8b), and it nods at
                             "seed" without a leaf-logo pun. */
  --accent-dark:#164638;
  --accent-soft:#eaf1ed;
  --txt:#16181c;
  --muted:#6d6b66;
  --radius:18px;
  --radius-lg:24px;
  --shadow:0 1px 2px rgba(17,19,23,.045),0 10px 30px -16px rgba(17,19,23,.16);
  --shadow-lift:0 2px 6px rgba(17,19,23,.06),0 26px 60px -26px rgba(17,19,23,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
  --pad:clamp(20px,5vw,48px);
  --navh:68px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:CLIP not HIDDEN — clip does not create a scroll container, so the
   sticky header keeps working and any in-section swipe track stays independent
   of the page's own scroll width. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--txt);
  font:400 17px/1.62 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:calc(var(--navh) + 14px)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:10px;
  box-shadow:var(--shadow);font-weight:700}

/* ---- type ---------------------------------------------------------------
   The bigger the step, the tighter the tracking. Uniform tracking across a wide
   clamp range makes the large end look loose and the small end look cramped;
   this is the single change that most reads as "typeset" rather than "styled".
   text-wrap:balance stops a display heading ending on a one-word orphan.      */
h1,h2,h3{font-weight:800;text-wrap:balance}
p,li,.lede,.fine{text-wrap:pretty}
h1{font-size:clamp(38px,5.6vw,66px);line-height:1.04;letter-spacing:-.036em}
h2{font-size:clamp(28px,3.9vw,46px);line-height:1.06;letter-spacing:-.032em}
h3{font-size:clamp(19px,1.5vw,22px);line-height:1.22;letter-spacing:-.018em}
p{max-width:62ch}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent)}
.eyebrow-l{color:#8fbcab}
.lede{font-size:clamp(17px,1.4vw,20.5px);color:var(--muted);line-height:1.6;letter-spacing:-.005em}
.lede-l{color:#a8a49c}
.fine{font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:800 16px/1 'Archivo',sans-serif;letter-spacing:-.012em;
  padding:16px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  min-height:54px;text-align:center;
  transition:transform .18s var(--ease),background .2s var(--ease),color .2s var(--ease),
    border-color .2s var(--ease)}
.btn:active{transform:scale(.978)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--accent)}
.btn-ghost{border-color:#ffffff4d;background:#ffffff0f;color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-line{border-color:var(--line);background:#fff;color:var(--txt)}
.btn-line:hover{border-color:var(--ink);}
.btn svg{flex:0 0 auto}
.btnrow{display:flex;flex-wrap:wrap;gap:12px}

/* ---- reveal --------------------------------------------------------------
   Progressive enhancement: without JS the `jsr` class is never set and every
   .rv block is simply visible. One 18px rise. No bounce, no scale, no stagger. */
html.jsr .rv{opacity:0;transform:translateY(18px)}
html.jsr .rv.in{opacity:1;transform:none;
  transition:opacity .72s var(--ease),transform .72s var(--ease)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.jsr .rv,html.jsr .rv.in{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

/* ---- utility strip + header --------------------------------------------- */
.util{background:var(--ink-2);color:#c9c6be;font-size:13px}
.util .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:9px;padding-bottom:9px}
.util .live{display:flex;align-items:center;gap:9px;font-weight:600;color:#efece6}
.util .dot{width:7px;height:7px;border-radius:50%;background:#5fd08a;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(95,208,138,.18)}
.util .right{margin-left:auto;display:flex;gap:16px;align-items:center}
.util a:hover{color:#fff}

header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.84);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(17,19,23,.07)}
header .wrap{display:flex;align-items:center;gap:clamp(12px,3vw,38px);
  min-height:var(--navh);padding-top:11px;padding-bottom:11px}
.mark{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:0}
.mark .glyph{width:36px;height:36px;border-radius:11px;background:var(--ink);color:#7fd4b4;
  display:grid;place-items:center;flex:0 0 auto}
.mark .glyph svg{width:19px;height:19px}
.mark .name{font-weight:800;font-size:17.5px;letter-spacing:-.032em;line-height:1.1;
  white-space:nowrap}
.mark .name i{font-style:normal;color:var(--muted);font-weight:700}
nav.links{display:flex;gap:clamp(13px,2vw,28px);font-size:15px;font-weight:600;color:#43454a;
  white-space:nowrap}
nav.links a{transition:color .18s var(--ease)}
nav.links a:hover,nav.links a[aria-current=page]{color:var(--accent)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hdr-tel{font-weight:800;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.hdr-tel:hover{color:var(--accent)}
.hdr-cta{padding:11px 20px;min-height:44px;font-size:15px}

/* No-JS disclosure menu for narrow screens. */
.menu{position:relative;display:none}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;padding:10px 14px;border:1.5px solid var(--line);
  border-radius:999px;background:#fff;min-height:44px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--ink)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:8px;min-width:216px;display:flex;flex-direction:column}
.menu-panel a{padding:12px 14px;border-radius:12px;font-weight:600;font-size:16px}
.menu-panel a:hover{background:var(--paper-2)}

/* ---- bands --------------------------------------------------------------
   One idea per band. Whitespace separates sections — no rules, no boxes drawn
   around boxes. */
section{padding-block:clamp(64px,8.5vw,116px)}
.band-soft{background:var(--paper-2)}
.band-dark{background:var(--ink);color:#efece6}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:#a8a49c}
.head{max-width:none;margin-bottom:clamp(34px,4.6vw,56px)}
.head .eyebrow{margin-bottom:16px}
.head p{margin-top:18px}

/* ---- hero ---------------------------------------------------------------- */
.hero{background:var(--ink);color:#fff;padding-block:clamp(64px,9vw,124px);
  position:relative;overflow:hidden}
/* One very soft spruce wash off the top-left. It reads as depth, not as a
   gradient effect — at 8% it is barely perceptible and that is the point. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%,rgba(31,95,75,.30) 0%,transparent 62%)}
.hero .wrap{position:relative}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{margin-top:24px;max-width:52ch;color:#b4b0a8}
.hero .eyebrow{margin-bottom:20px}
/* The price, set as display type. This is the positioning, not decoration. */
.pricecard{margin-top:clamp(34px,4.4vw,48px);display:flex;flex-wrap:wrap;
  align-items:flex-end;gap:clamp(20px,4vw,54px)}
.pricecard .unit{display:flex;flex-direction:column;gap:6px}
.pricecard .lbl{font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:#8fbcab}
.pricecard .fig{font-weight:800;font-size:clamp(44px,6.4vw,74px);line-height:.98;
  letter-spacing:-.042em;color:#fff}
.pricecard .fig sup{font-size:.42em;font-weight:800;vertical-align:super;letter-spacing:-.02em;
  margin-right:.06em}
.pricecard .fig em{font-style:normal;font-size:.3em;font-weight:700;letter-spacing:-.01em;
  color:#8b8781;margin-left:.14em}
.pricecard .note{font-size:14px;color:#8b8781}
.hero .btnrow{margin-top:clamp(32px,4vw,42px)}
.hero .trust{margin-top:30px;font-size:14px;color:#807d77;display:flex;flex-wrap:wrap;gap:8px 18px}
.hero .trust span{display:flex;align-items:center;gap:8px}
.hero .trust span::before{content:"";width:4px;height:4px;border-radius:50%;background:#4f4c47}

/* ---- steps --------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);
  counter-reset:s}
.step{counter-increment:s}
.step .n{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:16px;
  margin-bottom:18px}
.step .n::before{content:counter(s)}
.step h3{margin-bottom:9px}
.step p{color:var(--muted);font-size:16.5px;max-width:38ch}

/* ---- work ---------------------------------------------------------------- */
.works{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,40px)}
.work{display:block}
.work .shot{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);
  background:var(--ink);transition:transform .4s var(--ease)}
.work:hover .shot{transform:translateY(-5px)}
.work .shot img{width:100%}
.work .meta{margin-top:20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.work .meta h3{letter-spacing:-.024em}
.work .tag{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.work .meta p{width:100%;color:var(--muted);font-size:16px;margin-top:2px}
.work .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;
  font-size:15.5px;color:var(--accent)}
.work:hover .go{color:var(--accent-dark)}

/* ---- included list ------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px}
.checks li{list-style:none;display:flex;gap:12px;padding-block:13px;
  border-top:1px solid var(--line);font-size:16.5px;line-height:1.45}
.checks li svg{flex:0 0 auto;margin-top:3px;color:var(--accent)}
.band-dark .checks li{border-color:#2a2d33;color:#dedad2}
.band-dark .checks li svg{color:#7fd4b4}

/* ---- retainer ------------------------------------------------------------ */
.retainer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,72px);align-items:center}
.retbox{background:#20242a;border:1px solid #2c3037;border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,40px)}
.retbox .fig{font-weight:800;font-size:clamp(40px,5vw,58px);line-height:1;letter-spacing:-.04em;
  color:#fff}
.retbox .fig sup{font-size:.42em;vertical-align:super;margin-right:.06em}
.retbox .fig em{font-style:normal;font-size:.28em;font-weight:700;color:#8b8781;margin-left:.14em}
.retbox ul{margin-top:24px;display:flex;flex-direction:column}
.retbox li{list-style:none;display:flex;gap:12px;padding-block:14px;border-top:1px solid #2c3037;
  font-size:16px;color:#dedad2;line-height:1.45}
.retbox li svg{flex:0 0 auto;margin-top:3px;color:#7fd4b4}
.retbox li b{color:#fff;font-weight:700}

/* ---- pricing page -------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,30px);
  align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,36px);display:flex;flex-direction:column}
.tier.feature{background:var(--ink);border-color:var(--ink);color:#efece6}
.tier.feature h3,.tier.feature .fig{color:#fff}
.tier.feature .sub,.tier.feature li{color:#b4b0a8}
.tier.feature li b{color:#fff}
.tier.feature li svg{color:#7fd4b4}
.tier.feature li{border-color:#2c3037}
.tier .pill{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:#7fd4b4;color:#0d2c22;border-radius:999px;
  padding:5px 11px;margin-bottom:16px}
.tier h3{letter-spacing:-.022em}
.tier .fig{font-weight:800;font-size:clamp(38px,4.4vw,50px);line-height:1;letter-spacing:-.04em;
  margin-top:16px}
.tier .fig sup{font-size:.42em;vertical-align:super;margin-right:.06em}
.tier .fig em{font-style:normal;font-size:.3em;font-weight:700;color:var(--muted);margin-left:.12em}
.tier .sub{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.5}
.tier ul{margin-top:22px;display:flex;flex-direction:column;flex:1}
.tier li{list-style:none;display:flex;gap:11px;padding-block:12px;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.45;color:var(--txt)}
.tier li svg{flex:0 0 auto;margin-top:3px;color:var(--accent)}
.tier li b{font-weight:700}
.tier .btn{margin-top:26px;width:100%}

/* Add-on rows. Deliberately NOT a <table> — at 390px a price table either
   overflows or shrinks to unreadable. Rows that stack are the honest form. */
.rates{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,44px)}
.rate{display:flex;gap:16px 28px;align-items:baseline;flex-wrap:wrap;
  padding-block:clamp(18px,2.2vw,24px);border-bottom:1px solid var(--line)}
.rate .what{flex:1 1 min(100%,26ch);min-width:0}
.rate .what b{display:block;font-weight:800;font-size:17.5px;letter-spacing:-.018em}
.rate .what span{display:block;color:var(--muted);font-size:15.5px;margin-top:5px;line-height:1.5}
.rate .cost{font-weight:800;font-size:clamp(19px,2vw,24px);letter-spacing:-.028em;
  white-space:nowrap;color:var(--accent)}
.rate .cost.free{color:var(--accent)}

/* ---- faq ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:20px;align-items:flex-start;
  padding-block:clamp(20px,2.4vw,26px);font-weight:800;font-size:clamp(17.5px,1.6vw,20px);
  letter-spacing:-.02em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;margin-left:auto;width:13px;height:13px;
  border-right:2.4px solid var(--muted);border-bottom:2.4px solid var(--muted);
  transform:rotate(45deg);margin-top:6px;transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.faq details[open] summary{color:var(--accent)}
.faq .a{padding-bottom:clamp(20px,2.4vw,26px);color:var(--muted);font-size:16.5px;
  line-height:1.62;max-width:70ch}
.faq .a p+p{margin-top:12px}
.faq .a a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- contact / form ------------------------------------------------------ */
.contactgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow)}
.band-soft .formcard{box-shadow:var(--shadow-lift)}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;letter-spacing:-.005em;margin-bottom:7px}
.field label .req{color:var(--accent);font-weight:800}
.field input,.field select,.field textarea{width:100%;font:400 16.5px/1.5 'Archivo',sans-serif;
  color:var(--txt);background:#fff;border:1.5px solid var(--line);border-radius:13px;
  padding:13px 15px;min-height:52px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236d6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px rgba(31,95,75,.13)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formcard .btn{width:100%;margin-top:6px}
.formnote{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.5;text-align:center}
.formnote a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.msg{display:none;border-radius:13px;padding:14px 16px;font-size:15.5px;font-weight:600;
  line-height:1.45;margin-bottom:16px}
.msg.ok{display:block;background:var(--accent-soft);color:var(--accent-dark)}
.msg.err{display:block;background:#fdeceb;color:#9c2b1c}

.reach{display:flex;flex-direction:column}
.reach .row{display:flex;gap:16px;align-items:flex-start;padding-block:20px;
  border-top:1px solid var(--line)}
.reach .row:last-child{border-bottom:1px solid var(--line)}
.reach .ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex:0 0 auto}
.reach .row b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.reach .row .v{font-weight:800;font-size:clamp(18px,1.9vw,21px);letter-spacing:-.028em;
  line-height:1.25;word-break:break-word}
.reach .row .v:hover{color:var(--accent)}
.reach .row .sub{font-size:14.5px;color:var(--muted);margin-top:5px;line-height:1.5}

/* ---- prose (privacy / terms / about) ------------------------------------- */
.prose{max-width:72ch}
.prose h2{font-size:clamp(23px,2.4vw,30px);margin-top:clamp(40px,4.4vw,58px);margin-bottom:14px;
  letter-spacing:-.026em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:30px;margin-bottom:10px;font-size:19px}
.prose p{margin-bottom:15px;color:#3a3d43;line-height:1.68}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:22px;color:#3a3d43}
.prose li{margin-bottom:9px;line-height:1.62}
.prose a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:700;color:var(--txt)}
.prose .updated{font-size:14.5px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--line);
  margin-bottom:clamp(32px,3.6vw,44px)}
.prose .callout{background:var(--paper-2);border-radius:var(--radius);padding:22px 24px;
  margin:26px 0;border-left:3px solid var(--accent)}
.prose .callout p:last-child{margin-bottom:0}

/* about: the story column + the plain facts column */
.story{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.facts{background:var(--paper-2);border-radius:var(--radius-lg);padding:clamp(24px,3vw,32px)}
.facts .row{padding-block:15px;border-top:1px solid var(--line)}
.facts .row:first-of-type{border-top:0;padding-top:0}
.facts .row b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.facts .row span{font-weight:700;font-size:16.5px;letter-spacing:-.014em;line-height:1.4;
  display:block;word-break:break-word}
.facts .row a:hover{color:var(--accent)}

/* ---- closing cta --------------------------------------------------------- */
.cta{text-align:center}
.cta h2{max-width:20ch;margin:0 auto}
.cta p{margin:20px auto 0}
.cta .btnrow{justify-content:center;margin-top:34px}
.cta .tel{display:block;margin-top:28px;font-weight:800;font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.034em;color:#fff}
.cta .tel:hover{color:#7fd4b4}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--ink);color:#8b8781;padding-block:clamp(50px,6vw,74px);font-size:15px}
footer .top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,52px);padding-bottom:clamp(34px,4vw,46px);
  border-bottom:1px solid #24282e}
footer .mark .name{color:#fff}
footer .mark .name i{color:#6d6b66}
footer .blurb{margin-top:18px;font-size:15px;line-height:1.6;color:#8b8781;max-width:40ch}
footer h4{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:#efece6;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer a:hover{color:#fff}
footer .tel{font-weight:800;font-size:19px;letter-spacing:-.026em;color:#fff}
footer .tel:hover{color:#7fd4b4}
footer .bot{padding-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:14px}
footer .bot .right{margin-left:auto;display:flex;gap:10px 22px;flex-wrap:wrap}

/* ===========================================================================
   BREAKPOINTS
   Measured with agent-browser at a true 390px viewport, not eyeballed and not
   Chrome-headless (which clamps its layout viewport to a 500px floor and then
   crops the screenshot, reporting a phone layout that does not exist).
   =========================================================================== */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr;gap:30px}
  .split,.retainer,.contactgrid,.story{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  footer .top{grid-template-columns:1fr 1fr}
  footer .brandcol{grid-column:1/-1}
}
@media (max-width:900px){
  nav.links{display:none}
  .menu{display:block}
  .hdr-tel{display:none}
}
@media (max-width:760px){
  :root{--navh:60px}
  .works{grid-template-columns:1fr;gap:38px}
  .checks{grid-template-columns:1fr}
  .util .right{display:none}
  .util .wrap{justify-content:center}
  .hero .btnrow .btn,.cta .btnrow .btn{flex:1 1 100%}
  .f2{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr;gap:32px}
  footer .bot .right{margin-left:0;width:100%}
}
@media (max-width:430px){
  /* At 390px the wordmark and a pill button share one row with 40px of
     padding. `.online` is the first thing to go — the name still reads. */
  .mark .name i{display:none}
  .pricecard{gap:20px 30px}
  .rate .cost{width:100%}
}

/* ---- /work: one column, full width -------------------------------------
   Three builds in a two-up grid leaves an orphan in the second row. A single
   column is not a fallback here — it lets each screenshot run at ~1100px, which
   is the difference between "thumbnail of a website" and "that is a website". */
.works-stack{grid-template-columns:1fr;gap:clamp(48px,6vw,86px)}
.works-stack .meta p{max-width:64ch}
@media (min-width:900px){
  .works-stack .work{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:clamp(28px,3.6vw,52px);align-items:center}
  .works-stack .work .meta{margin-top:0}
  .works-stack .work .go{grid-column:2}
}

/* ---- hero: copy left, the work right -------------------------------------
   The first draft ran the copy full-width and left the right half of a 1496px
   screen empty. On a web shop's own site that empty half is the most expensive
   space on the page — it should be carrying the argument, and the argument is
   "we already built one." So a real build sits next to the price.
   Below 1000px it moves under the copy rather than shrinking to a stamp. */
.hero-split .wrap{display:grid;gap:clamp(38px,5vw,64px);align-items:center}
.hmedia{border-radius:var(--radius-lg);overflow:hidden;position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,.3),0 40px 80px -30px rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.09)}
.hmedia img{width:100%;display:block}
/* A hairline of the accent along the top edge, so the frame reads as a
   deliberate object rather than an image that happens to have a shadow. */
.hmedia::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
@media (min-width:1000px){
  .hero-split .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
  .hero-split h1{max-width:none}
  .hero-split .lede{max-width:44ch}
}
@media (max-width:999px){
  .hmedia{max-width:560px}
}

/* ── Case study: before/after inside device frames ───────────────────────────
   Two captures, one progress value (case_study.py). The screen is a fixed-ratio
   window; the full-page capture translates inside it. */
.cs-head{padding:clamp(48px,7vw,84px) 0 clamp(20px,3vw,32px)}
.cs-head h1{display:flex;flex-direction:column;gap:6px}
.cs-head .cs-city{font-size:clamp(14px,1.4vw,17px);font-weight:600;letter-spacing:0;color:var(--muted)}
.cs-disclosure{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:62ch;
  border-left:2px solid var(--line);padding-left:12px}
.cs-stage{padding:clamp(16px,2vw,26px) 0 clamp(40px,6vw,72px)}
.cs-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(16px,2vw,24px)}
.cs-tabs{display:inline-flex;gap:4px;background:var(--paper-2);padding:4px;border-radius:999px}
.cs-tabs button{border:0;background:none;font:600 13.5px/1 inherit;color:var(--muted);
  padding:9px 18px;border-radius:999px;cursor:pointer;min-height:44px}
.cs-tabs button[aria-selected=true]{background:var(--paper);color:var(--txt);box-shadow:0 1px 3px rgba(17,19,23,.10)}
.cs-play{display:flex;align-items:center;gap:12px;flex:1 1 260px;max-width:420px}
.cs-play button{border:1px solid var(--line);background:var(--paper);border-radius:999px;
  font:600 13px/1 inherit;padding:10px 16px;min-height:44px;cursor:pointer}
.cs-play input[type=range]{flex:1;accent-color:var(--txt)}
.cs-views{position:relative}
.cs-view[hidden]{display:none}
.cs-view{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);align-items:start}
.cs-view[data-view=mobile]{justify-content:center;grid-template-columns:auto auto;justify-items:center}
.cs-pane{margin:0}
.cs-pane figcaption{margin-bottom:10px}
.cs-tag{display:inline-block;font:700 11px/1 inherit;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;background:var(--paper-2);color:var(--muted)}
.cs-tag-new{background:rgba(17,19,23,.92);color:#fff}
/* the frames: drawn, not images, so they stay crisp and weigh nothing */
.cs-device{background:#111317;border-radius:14px;padding:10px 10px 0;box-shadow:0 18px 42px -14px rgba(17,19,23,.4)}
.cs-monitor{position:relative}
.cs-monitor:after{content:"";display:block;height:12px;margin:8px auto 0;width:34%;
  background:#111317;border-radius:0 0 8px 8px}
.cs-phone{border-radius:30px;padding:9px 9px 0;max-width:280px}
.cs-phone .cs-screen{border-radius:22px}
.cs-phone:before{content:"";display:block;width:38%;height:5px;margin:0 auto 7px;border-radius:99px;background:#2a2e36}
.cs-screen{position:relative;overflow:hidden;background:#fff;border-radius:6px;aspect-ratio:16/10}
.cs-phone .cs-screen{aspect-ratio:9/19}
.cs-shot{display:block;width:100%;height:auto;will-change:transform}
.cs-notes{position:relative;min-height:132px;margin-top:clamp(18px,2.4vw,28px)}
.cs-note{position:absolute;inset:0 auto auto 0;width:min(420px,92%);left:clamp(0px,calc(var(--x) - 12%),60%);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md,14px);
  padding:14px 16px;box-shadow:0 10px 30px -12px rgba(17,19,23,.22);
  opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease,ease),transform .35s var(--ease,ease);
  pointer-events:none}
.cs-note.on{opacity:1;transform:none;pointer-events:auto}
.cs-note strong{display:block;font-size:15.5px;letter-spacing:-.01em;margin-bottom:4px}
.cs-note span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cs-note-arrow{position:absolute;top:-26px;left:26px;width:2px;height:20px;background:var(--txt);opacity:.55}
.cs-note-arrow:before{content:"";position:absolute;top:-6px;left:-4px;width:10px;height:10px;
  border-left:2px solid var(--txt);border-top:2px solid var(--txt);transform:rotate(45deg)}
.cs-summary{padding:0 0 clamp(52px,8vw,96px)}
.cs-summary-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cs-list{list-style:none;margin-top:16px;display:grid;gap:12px}
.cs-list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.cs-list li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--txt)}
.cs-stat{background:var(--paper-2);border-radius:var(--radius-lg,22px);padding:clamp(20px,2.6vw,30px);display:grid;gap:10px}
.cs-stat strong{font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.03em}
.cs-stat span{font-size:14px;line-height:1.5;color:var(--muted)}
.cs-stat .btn{margin-top:6px;justify-self:start}
.cs-old-link{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px;
  color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){
  .cs-view{grid-template-columns:1fr;gap:22px}
  .cs-view[data-view=mobile]{grid-template-columns:1fr 1fr}
  .cs-summary-grid{grid-template-columns:1fr}
  .cs-note{position:relative;left:0;width:100%;margin-bottom:10px;opacity:1;transform:none;display:none}
  .cs-note.on{display:block}
  .cs-notes{min-height:0}
  .cs-note-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cs-note{position:relative;left:0;width:100%;opacity:1;transform:none;margin-bottom:10px}
  .cs-notes{min-height:0}
  .cs-shot{transition:none}
}