/* Dezz Web Studio. Mobile first; every value below starts at a 380px phone. */

@font-face{font-family:"Funnel Display";src:url(../fonts/funnel-display.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url(../fonts/funnel-sans.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
/* Fallbacks sized to Funnel's metrics (measured against Arial), so the H1 doesn't reflow when the font swaps in */
@font-face{font-family:"Funnel Display Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:300 800;size-adjust:100.8%;ascent-override:99.2%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:"Funnel Sans Fallback";src:local("Arial"),local("ArialMT");font-weight:300 549;size-adjust:100.8%;ascent-override:99.2%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:"Funnel Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 800;size-adjust:94.9%;ascent-override:105.4%;descent-override:26.4%;line-gap-override:0%}

:root{
  color-scheme:dark;
  /* night: a real warm brown-black (hue 28°), the desk after dark */
  --night:#1b140e; --night-2:#261c14; --line:#4a3a2c;
  --bone:#f1e6d6; --bone-2:#c2b19b;
  /* amber: Ezra's colour since the first Dezz site. Used as ink, never as a glow */
  --amber:#f7b54a; --amber-press:#ffc56a;
  /* paper: the lamp-lit part of the desk */
  --paper:#f5e4c6; --field:#fffaf1; --ink:#1b140e; --ink-2:#5a4636; --amber-deep:#7a4a00; --edge:#8c7a68; --edge-soft:#d4bd97;

  --font-display:"Funnel Display","Funnel Display Fallback","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-text:"Funnel Sans","Funnel Sans Fallback","Avenir Next","Segoe UI",system-ui,sans-serif;

  --step--1:clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0:clamp(1.125rem, 1.06rem + 0.18vw, 1.1875rem);
  --step-1:clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:clamp(1.625rem, 1.3rem + 1.7vw, 2.75rem);
  --step-3:clamp(2.25rem, 1.2rem + 4.4vw, 5rem);
  --step-big:clamp(5.75rem, 4rem + 8vw, 11rem);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --g:16px;
  --pad-tight:24px;
  --pad-m:clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --pad-l:clamp(3.5rem, 2.4rem + 4.6vw, 6rem);
  --pad-xl:clamp(4.5rem, 3rem + 6.4vw, 8rem);
  --bar-h:calc(68px + env(safe-area-inset-bottom));   /* the sticky call bar, phones only */

  --r-screen:14.1% / 6.5%;   /* a real iPhone screen corner, at any size */
  --r-btn:6px; --r-field:4px; --r-slip:16px 16px 16px 4px; --r-sticker:3px;
  --shadow-sticker:0 2px 0 hsl(28 40% 5% / .45), 0 6px 12px hsl(28 40% 5% / .25);
}
@media (min-width:600px){ :root{ --g:24px } }
@media (min-width:960px){ :root{ --g:32px } }

/* section themes */
.t-night{--fg:var(--bone);--fg-2:var(--bone-2);--rule:var(--line);--link:var(--amber);--focus:var(--amber);color:var(--bone);color-scheme:dark}
.t-paper{--fg:var(--ink);--fg-2:var(--ink-2);--rule:var(--edge);--link:var(--amber-deep);--focus:var(--ink);background:var(--paper);color:var(--ink);color-scheme:light}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--bone);
  font:400 var(--step-0)/1.55 var(--font-text);font-synthesis:none;font-kerning:normal}
[hidden]{display:none !important}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
strong,b{font-weight:700}
em{font-style:normal;font-weight:650}
:focus-visible{outline:2px solid var(--focus, var(--amber));outline-offset:3px}
.t-paper :focus-visible{outline-offset:2px}
/* Selection stays amber, but see-through: the headings are set tight, so a solid box on one line
   would paint over the descenders of the line above it ("p" and "g" in the hero) and over
   "What it costs" under "$1,500". Text keeps its own colour either way. */
::selection{background:rgba(247,181,74,.6)}
.t-night ::selection{background:rgba(247,181,74,.42)}
/* "$1,500" is set tight, so its selection box reaches up over "What it costs".
   Lifting the heading and the text below it keeps both fully dark on top. */
.ask h3,.ask__body > p{position:relative;z-index:1}
/* a tap-and-hold on a card used to select the picture and tint it amber until you tapped away */
.ex__link,.ex__shot{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ex__shot{-webkit-user-drag:none}
.ex__shot::selection{background:transparent}

h1,h2,h3,h4{text-wrap:balance}
/* hyphens stay manual: auto-hyphenation chops words like "pho-tos" and slows reading */
p,li{text-wrap:pretty;hyphens:manual;-webkit-hyphens:manual;hanging-punctuation:first allow-end last}
h2{font:700 var(--step-2)/1.05 var(--font-display);letter-spacing:-.008em}
.nw,.tel{white-space:nowrap}
.tel,.big,.offer{font-variant-numeric:lining-nums tabular-nums}

.wrap{width:100%;max-width:calc(1180px + 2 * var(--g));margin-inline:auto;
  padding-inline:max(var(--g), env(safe-area-inset-left)) max(var(--g), env(safe-area-inset-right))}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{position:absolute;left:8px;top:-80px;z-index:10;padding:12px 16px;border-radius:var(--r-btn);
  background:var(--amber);color:var(--night);font-weight:700;text-decoration:none}
.skip:focus{top:8px}

/* header (not sticky, no menu) */
.site-head{position:relative}
/* the header colour continues above the page, so an iPhone's pull-down bounce doesn't flash the dark body */
.site-head::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:inherit;pointer-events:none}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;
  font:700 1.1875rem/1 var(--font-display);letter-spacing:-.005em}
.brand__ez{width:34px;height:24px;fill:currentColor;flex:none}
.head-tel{display:inline-flex;align-items:center;min-height:44px;font-weight:600;
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:5px}

/* hero */
.hero{padding-block:var(--space-2) var(--space-4)}
h1{font:700 var(--step-3)/1 var(--font-display);letter-spacing:-.012em}
.lede{margin-top:14px;max-width:46ch}
.offer{margin-top:var(--space-4);font-weight:700;font-size:min(1.1875rem, 5.1vw);line-height:1.35}
/* Ezra's own photo, once it exists (slot commented in index.html) */
.hero__me{float:left;width:56px;height:56px;border-radius:50%;object-fit:cover;margin:6px 12px 0 0}
.hero-ring{display:none}
/* Ezra's upright intro video, once it exists (commented out in index.html). Never autoplays.
   Below 960px it's a thumbnail, so the examples still show on the first screen; a tap opens it full screen. */
.hero__video{width:8.5rem;aspect-ratio:9 / 16;margin-top:var(--space-5);object-fit:cover;
  background:var(--night-2);border-radius:var(--r-btn)}

/* examples */
.examples{padding-block:20px var(--pad-m)}
.ex-note{margin-top:var(--space-2);color:var(--bone-2);max-width:40ch}
.ex-grid{list-style:none;padding:0;margin-top:var(--space-4);display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-6) var(--space-3);align-items:start}
.ex{position:relative;min-width:0}
[data-for="dog-grooming"] .ex--dog-grooming,[data-for="handyman"] .ex--handyman,
[data-for="nails"] .ex--nails,[data-for="gardening"] .ex--gardening{order:-1}
[data-for] .ex-grid{margin-top:var(--space-6)}
.ex__link{display:block;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out}
.ex__link:active{transform:translateY(1px) scale(.98)}
.ex__frame{position:relative;display:block}
.ex__shot{width:100%;border-radius:var(--r-screen);outline:1px solid var(--line);outline-offset:0;background:var(--night-2)}
.ex__trade{margin-top:var(--space-3);font:500 1.0625rem/1.3 var(--font-text);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--bone-2)}
.ex__why{margin-top:var(--space-1);font-size:var(--step--1);line-height:1.45;color:var(--bone-2)}
/* sits on the screenshot's top edge, clear of the example's honesty bar text */
.ex__yours{display:none;position:absolute;z-index:1;top:-25px;left:-5px;rotate:-3deg;padding:5px 8px;
  background:var(--amber);color:var(--night);font:700 .875rem/1.2 var(--font-text);
  border-radius:var(--r-sticker);box-shadow:var(--shadow-sticker)}
[data-for="dog-grooming"] .ex--dog-grooming .ex__yours,[data-for="handyman"] .ex--handyman .ex__yours,
[data-for="nails"] .ex--nails .ex__yours,[data-for="gardening"] .ex--gardening .ex__yours{display:block}
.ex-after{padding-top:var(--pad-tight);max-width:44ch;color:var(--bone-2)}

/* the one ask: first name and mobile, straight after the examples (night) */
.start{padding-block:var(--pad-m) calc(var(--pad-m) + var(--space-5));border-top:1px solid var(--line)}
.start__lead{margin-top:var(--space-3);max-width:38ch}
.start__form{margin-top:var(--space-5);max-width:34rem}
.lead{position:relative}
.lead__fields{display:grid;gap:var(--space-4)}
.field label{display:block;margin-bottom:6px;font:500 1rem/1.3 var(--font-text)}
.lead input{-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:52px;margin:0;padding:12px 14px;
  font:400 1.1875rem/1.3 var(--font-text);color:var(--ink);background-color:var(--field);border:1.5px solid var(--edge);border-radius:var(--r-field)}
.lead input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hp{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;visibility:hidden}
.btn--send{width:100%;min-height:52px;margin-top:var(--space-5)}
.fine{margin-top:var(--space-3);font-size:var(--step--1);line-height:1.45;color:var(--fg-2)}
.status{font-weight:600}
.status:not(:empty){margin-top:var(--space-3)}
.status:focus,.sent:focus{outline:none}
.sent{padding-block:var(--space-2)}
.sent__h{font:700 var(--step-2)/1.1 var(--font-display)}
.sent p + p{margin-top:var(--space-3);max-width:40ch}
.lead__alt{margin-top:var(--space-4)}
/* inline with padding, so the tap area is 44px tall without stretching the line */
.lead__alt a{padding-block:.65em;color:var(--link);font-weight:600}
.alt-desk{display:none}

/* three things people ask first (paper) */
.asks{padding-block:var(--pad-l)}
.ask{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--rule)}
.ask h3{font:600 var(--step-1)/1.3 var(--font-text)}
.ask__body > p{margin-top:var(--space-2);max-width:46ch}
.big{margin-top:var(--space-1);font:800 var(--step-big)/.9 var(--font-display);letter-spacing:-.02em;overflow-wrap:anywhere}
/* "$1,500" is about 3em wide, so 32% of its column keeps it on screen with bigger text or page zoom.
   Written out (no var) so a browser without container units just keeps the size above. */
.ask--price .ask__head{container-type:inline-size}
.ask--price .big{font-size:min(clamp(5.75rem, 4rem + 8vw, 11rem), 32cqi)}
.ask--price .ask__body > p:first-child{margin-top:var(--space-3)}
.hl{position:relative;display:inline-block;white-space:nowrap;font-weight:650;isolation:isolate}
.hl .mark{position:absolute;z-index:-1;left:-.08em;right:auto;top:.3em;width:calc(100% + .3em);height:1.25em;rotate:-.8deg;transform-origin:0 50%;opacity:.92;fill:var(--amber);pointer-events:none}

/* tucked away: the full quote and every step, one tap to open */
.more{margin-top:var(--space-2)}
.more > summary{list-style:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;
  font:600 var(--step-0)/1.3 var(--font-text);color:var(--link);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;-webkit-tap-highlight-color:transparent}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -3px;transition:rotate .18s ease-out, translate .18s ease-out}
.more[open] > summary::after{rotate:225deg;translate:0 2px}
.more__body{padding-block:var(--space-2) var(--space-4)}
.more__body > p{max-width:52ch}
.more__body > p + p{margin-top:var(--space-2)}

/* the quote: set like an invoice, ruled lines, figures in a column */
.quote{width:100%;max-width:30rem;margin-top:var(--space-5);border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
.quote caption{caption-side:top;text-align:left;padding-bottom:var(--space-3);font:500 var(--step-1)/1.3 var(--font-text)}
.quote th,.quote td{padding:11px 0 12px;border-top:1px solid var(--edge-soft);vertical-align:baseline}
.quote tr:first-child th,.quote tr:first-child td{border-top:2px solid var(--ink)}
.quote tr:last-child th,.quote tr:last-child td{border-bottom:2px solid var(--ink)}
.quote th{font-weight:400;text-align:left;padding-right:var(--space-4)}
.quote td{font-weight:500;text-align:right;white-space:nowrap}
.quote tr:first-child td{font-weight:700}
.quote .quote__total th,.quote .quote__total td{font-weight:700;border-top:2px solid var(--ink)}
.quote .quote__or th,.quote .quote__or td{border-top:0;padding-top:0;color:var(--ink-2);font-size:var(--step--1);font-weight:400}
.quote + p{margin-top:var(--space-5)}

/* every step, as a text thread (inside "how it works") */
.how__note{font-size:var(--step--1);color:var(--fg-2);max-width:44ch}
.steps{margin-top:var(--space-5);padding-left:1.75rem}
.steps > li + li{margin-top:var(--space-5)}
.steps > li::marker{font-family:var(--font-text);font-weight:700;font-size:var(--step-1);color:var(--fg-2);font-variant-numeric:tabular-nums}
.step h4{font:600 var(--step-1)/1.3 var(--font-text)}
.step > p{margin-top:var(--space-2);max-width:52ch}
.slip{margin-top:var(--space-3);max-width:30ch}
.slip figcaption{margin-bottom:6px;font-size:var(--step--1);line-height:1.4;color:var(--fg-2)}
.slip blockquote{padding:10px 14px 11px;border-radius:var(--r-slip);background:var(--amber);color:var(--night);
  font-size:1.0625rem;line-height:1.4;overflow-wrap:anywhere}
.slip blockquote p{hyphens:manual}
.slip__sig{margin-top:6px;font-size:var(--step--1);line-height:1.35}

/* about */
.about{padding-block:var(--pad-m)}
.about__ez{display:none}
.me__photo{display:block;width:72%;max-width:22rem;height:auto;margin-top:var(--space-5)}
.about__text{margin-top:var(--space-4)}
.about__text p{max-width:56ch}
.about__text p + p{margin-top:var(--space-4)}
.about__text a{color:var(--amber)}
.about__text .signoff{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:var(--space-5);color:var(--bone-2);font-size:var(--step--1)}
.signoff__ez{width:88px;height:63px;fill:var(--amber);flex:none}
.signoff span{padding-bottom:4px}

/* FAQ */
.faq{padding-block:var(--pad-m) var(--pad-l);border-top:1px solid var(--line)}
.faq__list{margin-top:var(--space-4);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:48px;padding-block:var(--space-4);font:450 var(--step-1)/1.3 var(--font-text);-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  rotate:45deg;translate:0 -3px;transition:rotate .18s ease-out, translate .18s ease-out}
.faq details[open] > summary::after{rotate:225deg;translate:0 3px}
.faq details > p{padding-bottom:var(--space-5);max-width:60ch}

/* reviews slot (commented out in index.html until real Google reviews exist) */
.reviews{padding-block:var(--pad-m);border-top:1px solid var(--line)}
.review{margin-top:var(--space-5);max-width:52ch}
.review blockquote p{font-size:var(--step-1);line-height:1.45}
.review figcaption{margin-top:var(--space-2);font-size:var(--step--1);color:var(--fg-2)}
.review figcaption a{display:inline-flex;align-items:center;min-height:44px;color:var(--link)}

/* ring or text, to close (paper) */
.contact{padding-block:var(--pad-m)}
.contact__intro > p{margin-top:var(--space-3);max-width:46ch}
.contact__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-5)}
.contact__actions .btn{flex:1 1 auto;white-space:nowrap}
.contact .btn--mail,.lost .btn--mail{display:none}
.contact .save{margin-top:var(--space-2)}
.contact .save a{display:inline-flex;align-items:center;min-height:44px}
.contact a:not(.btn){color:var(--amber-deep)}

/* 404 */
.lost{padding-block:var(--space-4) var(--pad-xl)}
.lost h1{max-width:16ch}
.lost__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-6);max-width:34rem}
.lost__actions .btn{flex:1 1 auto;white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;border-radius:var(--r-btn);
  font:600 var(--step-0)/1.2 var(--font-text);text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s ease-out, background-color .12s ease-out}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--amber{background:var(--amber);color:var(--night);border:0}
.btn--amber:active{background:var(--amber-press)}
.btn--ghost{border:1.5px solid var(--bone-2);color:var(--bone);background:transparent}
.btn--ink{background:var(--ink);color:var(--paper);border:0}
.btn--ghost-ink{border:2px solid var(--ink);color:var(--ink);background:transparent}
.btn--ink:active{background:#2e2218}
.btn[disabled]{cursor:default}

/* footer: the fine print lives here */
.site-foot{padding-block:var(--pad-m) var(--space-7);border-top:1px solid var(--line)}
.foot__brand{display:flex;align-items:center;gap:10px;font:700 1.1875rem/1 var(--font-display)}
.foot__ez{width:40px;height:29px;fill:var(--bone);flex:none}
.foot__who{margin-top:var(--space-4)}
.foot__links{list-style:none;padding:0;margin-top:var(--space-1);display:flex;flex-wrap:wrap;column-gap:var(--space-5)}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.legal{margin-top:var(--space-4);max-width:60ch;font-size:.9375rem;color:var(--bone-2)}
.colophon{margin-top:var(--space-3);max-width:60ch;font-size:var(--step--1);color:var(--bone-2)}

/* sticky call bar (phones) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;
  padding:10px max(var(--g), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left));
  background:var(--night);border-top:1px solid var(--line)}
.js .bar{transition:transform .2s ease-out, visibility 0s linear 0s}
.bar.is-away{transform:translateY(110%);visibility:hidden;transition:transform .2s ease-out, visibility 0s linear .2s}
@media (max-width:767px){
  body{padding-bottom:var(--bar-h)} body.is-404,.bar-live body{padding-bottom:0}
  /* anything scrolled into view (a focused field, the Send button) stops above the bar, never under it */
  html{scroll-padding-bottom:calc(var(--bar-h) + 16px)}
}


/* hover extras, only where there's a real pointer */
@media (hover:hover) and (pointer:fine){
  .ex__shot{transition:outline-color .15s ease-out, outline-offset .15s ease-out}
  .ex__link:hover .ex__trade{text-decoration-thickness:2px;text-decoration-color:var(--bone)}
  .ex__link:hover .ex__shot{outline:2px solid var(--amber);outline-offset:4px}
  .btn--amber:hover{background:var(--amber-press)}
  .btn--ink:hover{background:#2e2218}
  .btn--ghost-ink:hover{background:var(--field)}
  .more > summary:hover{text-decoration-thickness:2px}
  .contact .btn--sms,.lost .btn--sms{display:none}
  .contact .btn--mail,.lost .btn--mail{display:inline-flex}
  .alt-phone{display:none}
  .alt-desk{display:inline}
  .head-tel:hover{text-decoration-color:var(--amber)}
}

@media (min-width:600px){
  .lead__fields{grid-template-columns:1fr 1fr}
}
/* ≥720: four prints in a row */
@media (min-width:720px){
  .ex-grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--space-5)}
}
@media (min-width:768px){
  .bar{display:none}
  .hero-ring{display:block;margin-top:var(--space-2)}
  .hero-ring a{color:var(--link);font-weight:600}
}

/* desktop */
@media (min-width:960px){
  .site-head__in{min-height:72px}
  .hero{padding-block:var(--space-6)}
  .hero__grid{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);column-gap:var(--space-8);align-items:end}
  .hero__side .lede{margin-top:0}
  /* once the video is in: the words stay under the H1 and the upright video stands on the right */
  .hero__grid:has(.hero__video){grid-template-areas:"h1 video" "words video";align-items:start}
  .hero__grid:has(.hero__video) h1{grid-area:h1}
  .hero__grid:has(.hero__video) .hero__side{display:contents}
  .hero__grid:has(.hero__video) .hero__words{grid-area:words;padding-top:var(--space-5)}
  .hero__grid:has(.hero__video) .hero__video{grid-area:video;justify-self:end;width:min(100%, 17rem);margin-top:0}
  .examples{padding-top:var(--space-7)}
  .ex-note{max-width:none}
  .ex-after{margin-left:calc((100% - 3 * var(--space-5)) / 4 + var(--space-5));max-width:52ch}

  .start__grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:var(--space-8);align-items:start}
  .start__form{margin-top:.35rem}

  .ask{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:var(--space-8);align-items:start;padding-top:var(--space-5)}
  .ask__body > p:first-child{margin-top:0}
  .ask .big{font-size:clamp(5.75rem, 3rem + 6vw, 8.5rem);font-size:min(clamp(5.75rem, 3rem + 6vw, 8.5rem), 32cqi)}
  /* "to launch…" starts level with the top of the big figure */
  .ask--price .ask__body{padding-top:calc(1.3 * var(--step-1) + var(--space-3))}
  .ask--price .ask__body > p:first-child{margin-top:0}

  .about__grid{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--space-8)}
  .about__head{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6)}
  /* no big decorative monogram here: the amber one signs the text, and Ezra's photo takes this column when it arrives */
  .about__head .me__photo{width:min(100%, 26rem);max-width:none;margin-top:0}
  .about__head:has(.me__photo) .about__ez{display:none}
  .about__text{margin-top:.35rem}

  .faq__list{margin-top:var(--space-6);max-width:46rem}

  .contact__grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:var(--space-8);align-items:end}
  .contact__side{max-width:34rem}
  .contact__actions{margin-top:0}
}

/* motion, only when it's welcome: a plain crossfade into the examples, and the highlighter swiped once */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.2s linear both vt-out}
  ::view-transition-new(root){animation:.24s linear .08s both vt-in}
  .mark.is-armed .pen{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.65, 0, .35, 1) .1s}
  .mark.is-armed.is-drawn .pen{stroke-dashoffset:0}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}