/* ==========================================================================
   Lit Little Laboratories - site styles
   Direction: clean and light, trades-friendly. Warm neutrals + deep teal +
   burnt orange. Every colour pair below was checked against WCAG 2.2 AA.

   The palette is deliberately committed to a light look rather than carrying a
   dark twin. A local services site is read by strangers on phones in daylight,
   and a half-maintained dark theme is worse than none.
   ========================================================================== */

:root{
  /* neutrals (60%) */
  --white:#FFFFFF;
  --warm-50:#FAF8F5;      /* alternating section ground */
  --warm-100:#F3F0EA;
  --warm-200:#E3DED5;     /* decorative borders */
  --warm-300:#CBC4B8;     /* hover borders */
  --warm-500:#8F877B;     /* control borders - 3.55:1, meets 1.4.11 */

  /* ink */
  --ink:#1A1815;          /* 17.72:1 */
  --ink-2:#57514A;        /*  7.83:1 */
  --ink-3:#6E675E;        /*  5.58:1 */

  /* brand teal (30%) */
  --brand:#0E4F4D;        /* 9.36:1 both directions */
  --brand-hover:#0A3B39;
  --brand-tint:#F0F7F6;
  --brand-tint-2:#E6F0EF;

  /* accent burnt orange (10%) - primary CTA, focus ring, active state. Nothing else. */
  --accent:#6C3C90;       /* 7.82:1 as text on white AND white on it - from the wizard mark */
  --accent-hover:#563073;
  --accent-tint:#F6F3F8;

  --success:#1F6B3A;
  --error:#9A3412;

  /* aliases kept so the legal pages and console keep rendering */
  --paper:var(--white);
  --surface:var(--white);
  --surface-2:var(--warm-50);
  --line:var(--warm-200);
  --line-2:var(--warm-500);
  --signal:var(--brand);
  --signal-on:var(--white);
  --signal-soft:var(--brand-tint);
  --warn:var(--accent);
  --warn-soft:var(--accent-tint);

  /* type */
  --f-display:"Bricolage Grotesque","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --t-xs:clamp(.8125rem,.79rem + .11vw,.875rem);
  --t-sm:clamp(.9375rem,.92rem + .11vw,1rem);
  --t-base:clamp(1.0625rem,1.04rem + .11vw,1.125rem);
  --t-lg:clamp(1.1875rem,1.16rem + .13vw,1.25rem);
  --t-xl:clamp(1.375rem,1.28rem + .42vw,1.5625rem);
  --t-2xl:clamp(1.625rem,1.45rem + .78vw,1.9375rem);
  --t-3xl:clamp(1.875rem,1.53rem + 1.53vw,2.4375rem);
  --t-4xl:clamp(2.1875rem,1.67rem + 2.28vw,3.0625rem);
  --t-5xl:clamp(2.375rem,1.72rem + 3.1vw,3.5rem);

  /* space, 8px grid */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-6:1.5rem; --s-8:2rem; --s-12:3rem; --s-16:4rem; --s-24:6rem;

  --container:1180px;
  --prose:720px;
  --gutter:clamp(1.25rem,4vw,2rem);
  --section-y:clamp(3.5rem,7vw,6.5rem);
  --grid-gap:clamp(1rem,2vw,1.5rem);
  --header-h:72px;

  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-2xl:18px; --r-full:999px;

  --sh-xs:0 1px 2px rgb(28 24 21 / .04);
  --sh-sm:0 2px 6px -2px rgb(28 24 21 / .07);
  --sh-md:0 10px 28px -10px rgb(28 24 21 / .14);
  --sh-lg:0 20px 48px -16px rgb(28 24 21 / .18);

  --ease:cubic-bezier(.4,0,.2,1);
  --dur:180ms;
  --tap:48px;
  --tap-lg:56px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);scroll-padding-bottom:80px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);
  font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.02em;text-wrap:balance;
  margin:0;color:var(--ink)}
h1{font-size:var(--t-5xl);line-height:1.05;font-weight:700}
h2{font-size:var(--t-3xl);line-height:1.15;font-weight:700}
h3{font-size:var(--t-xl);line-height:1.25;font-weight:600}
h4{font-size:var(--t-lg);line-height:1.3;font-weight:600}
p{margin:0}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
img{max-width:100%;height:auto}
ul,ol{margin:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.on-dark :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:#fff;padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:600;
  text-decoration:none}
.skip:focus{left:0;color:#fff}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.wrap-prose{max-width:var(--prose);margin-inline:auto}

.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 var(--s-4)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--ink-2);max-width:56ch}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* --------------------------------------------------------------- header */
.site-head{background:rgb(255 255 255 / .92);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--warm-200);position:sticky;top:0;z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:var(--s-6);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-weight:700;flex:none}
.brand .mark{width:30px;height:30px;flex:none;
  background:url(/assets/mark-64.png) center/contain no-repeat}
.brand b{font-family:var(--f-display);letter-spacing:-.03em;font-weight:700;font-size:1.0625rem}
.brand .short{display:none}

.nav{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.nav a{text-decoration:none;color:var(--ink-2);font-size:var(--t-sm);font-weight:500;
  padding:10px 12px;border-radius:var(--r-md);transition:color var(--dur) var(--ease),
  background var(--dur) var(--ease)}
.nav a:hover{color:var(--ink);background:var(--warm-100)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:600}
.nav .btn{margin-left:var(--s-2)}
.nav a.btn,.nav a.btn:hover{color:#fff}
.nav-toggle{display:none}

@media(max-width:900px){
  .brand .full{display:none}
  .brand .short{display:inline}
  .nav a.hide-sm{display:none}
  .nav a{padding:10px 8px}
}
@media(max-width:720px){
  .site-head .wrap{gap:var(--s-3)}
  .nav{gap:0}
  .nav .btn{display:none}
  .nav a.hide-xs{display:none}
}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap-lg);padding:14px 26px;border-radius:var(--r-lg);
  border:1.5px solid var(--accent);background:var(--accent);color:#fff;
  text-decoration:none;font-family:inherit;font-size:var(--t-sm);font-weight:600;
  cursor:pointer;line-height:1.2;text-align:center;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;
  transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn:active{transform:none}
.btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn.ghost{background:none;border-color:var(--brand);color:var(--brand)}
.btn.ghost:hover{background:var(--brand-tint);color:var(--brand-hover);border-color:var(--brand)}
.btn.solid-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.solid-brand:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.on-dark-ghost{background:none;border-color:rgb(255 255 255 / .5);color:#fff}
.btn.on-dark-ghost:hover{background:rgb(255 255 255 / .12);border-color:#fff;color:#fff}
.btn.sm{min-height:var(--tap);padding:11px 18px;font-size:var(--t-sm)}
.btn.wide{width:100%}
.textlink{display:inline-flex;align-items:center;gap:6px;color:var(--accent);
  font-weight:600;font-size:var(--t-sm);text-decoration:none}
.textlink:hover{text-decoration:underline}
.textlink .arw{transition:transform var(--dur) var(--ease)}
.textlink:hover .arw{transform:translateX(3px)}

/* --------------------------------------------------------------- sections */
section{padding-block:var(--section-y)}
.band-alt{background:var(--warm-50);border-block:1px solid var(--warm-200)}
.band-dark{background:var(--brand);color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:rgb(255 255 255 / .84)}
.shead{margin-bottom:var(--s-12);max-width:62ch}
.shead.center{margin-inline:auto}
.shead h2{margin-bottom:var(--s-4)}
.shead p{color:var(--ink-2)}

/* --------------------------------------------------------------- hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero h1{margin-bottom:var(--s-6)}
.hero .cta{margin-top:var(--s-8);display:flex;gap:var(--s-3);flex-wrap:wrap}
.hero-points{list-style:none;padding:0;margin:var(--s-8) 0 0;display:grid;gap:10px}
.hero-points li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);
  color:var(--ink-2)}
.hero-points svg{flex:none;margin-top:3px;color:var(--brand)}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero .cta .btn{flex:1 1 240px}
}

/* the visual panel beside the hero: works with or without a photograph */
.hero-panel{position:relative}
.hero-figure{aspect-ratio:4/3;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--warm-200);background:
  radial-gradient(120% 90% at 15% 10%,#14706C 0%,var(--brand) 55%,#0A3B39 100%);
  display:grid;place-items:center;box-shadow:var(--sh-md)}
.hero-figure img{width:100%;height:100%;object-fit:cover;display:block}
.hero-figure .placeholder{color:rgb(255 255 255 / .9);text-align:center;padding:var(--s-8);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.hero-figure .placeholder svg{opacity:.9;margin-bottom:var(--s-4)}
.hero-card{position:relative;margin:-40px var(--s-6) 0 auto;max-width:330px;
  background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-xl);
  padding:var(--s-6);box-shadow:var(--sh-lg)}
.hero-card dl{margin:0;display:grid;gap:14px}
.hero-card .k{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.hero-card .v{font-size:var(--t-sm);color:var(--ink);font-weight:600;margin:2px 0 0}
@media(max-width:860px){
  .hero-panel{order:-1}
  .hero-figure{aspect-ratio:16/9}
  .hero-card{margin-inline:auto;max-width:none}
}

/* --------------------------------------------------------------- trust strip */
.trust{background:var(--warm-50);border-block:1px solid var(--warm-200);padding-block:var(--s-4)}
.trust ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-8);
  align-items:center;justify-content:center;flex-wrap:wrap}
.trust li{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--ink-2);
  font-weight:500;white-space:nowrap}
.trust svg{color:var(--brand);flex:none}
@media(max-width:760px){
  .trust ul{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:var(--s-6);scrollbar-width:none;padding-inline:2px}
  .trust ul::-webkit-scrollbar{display:none}
}

/* --------------------------------------------------------------- intent tiles */
.tiles{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,1fr)}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-xl);
  padding:var(--s-8);min-height:260px;box-shadow:var(--sh-xs);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--warm-300)}
.tile .ico{width:64px;height:64px;border-radius:var(--r-full);background:var(--brand-tint);
  display:grid;place-items:center;color:var(--brand);margin-bottom:var(--s-2)}
.tile h3{margin:0}
.tile p{color:var(--ink-2);font-size:var(--t-sm)}
.tile .go{margin-top:auto;padding-top:var(--s-4)}
.tile a.stretch::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl)}
@media(max-width:900px){.tiles{grid-template-columns:1fr}.tile{min-height:0}}

/* --------------------------------------------------------------- cards */
.grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1050px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.grid,.grid.two{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-xl);
  padding:var(--s-6);box-shadow:var(--sh-xs);min-height:0;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
  border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--warm-300)}
.card h3{font-size:var(--t-lg);font-weight:600}
.card .outcome{color:var(--ink-2);font-size:var(--t-sm)}
.card .card-copy{margin-bottom:auto;display:flex;flex-direction:column;gap:var(--s-3)}
.card .price{padding-top:var(--s-4);border-top:1px solid var(--warm-200);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.card .amount{font-family:var(--f-mono);font-size:var(--t-lg);font-weight:600;
  color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card .kind{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.card .note-sm{font-size:var(--t-xs);color:var(--ink-3);margin-top:-4px}
.card .ribbon{position:absolute;top:-1px;right:var(--s-6);transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;background:var(--accent);color:#fff;padding:5px 10px;
  border-radius:var(--r-full)}
.card.is-feature{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--sh-sm)}

/* --------------------------------------------------------------- rate band */
.rateband{background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-2xl);
  padding:clamp(1.75rem,4vw,2.75rem);box-shadow:var(--sh-sm);
  display:grid;gap:var(--s-8);grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center}
@media(max-width:900px){.rateband{grid-template-columns:1fr}}
.rateband h2{font-size:var(--t-2xl)}
.rateband .lede{font-size:var(--t-base);margin-top:var(--s-3)}
.ratelist{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border:1px solid var(--warm-200);border-radius:var(--r-xl);overflow:hidden}
.ratelist li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:14px var(--s-6);background:var(--white);border-bottom:1px solid var(--warm-200)}
.ratelist li:last-child{border-bottom:0}
.ratelist li:nth-child(odd){background:var(--warm-50)}
.ratelist .lbl{font-size:var(--t-sm);color:var(--ink-2)}
.ratelist .amt{font-family:var(--f-mono);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--t-sm)}

/* --------------------------------------------------------------- steps */
.steps{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(4,1fr);counter-reset:s}
.step{position:relative;padding-top:var(--s-8)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:0;left:0;
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;
  color:var(--accent)}
.step::after{content:"";position:absolute;top:8px;left:34px;right:-16px;height:1px;
  background:var(--warm-200)}
.step:last-child::after{display:none}
.step h4{margin:0 0 var(--s-2)}
.step p{color:var(--ink-2);font-size:var(--t-sm)}
@media(max-width:900px){
  .steps{grid-template-columns:1fr;gap:var(--s-8)}
  .step{padding-left:var(--s-12);padding-top:0}
  .step::before{top:2px}
  .step::after{top:22px;left:9px;right:auto;bottom:-34px;width:1px;height:auto}
}

/* --------------------------------------------------------------- price anchors */
.anchors{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.anchors{grid-template-columns:1fr}}
.anchor{background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-xl);
  padding:var(--s-8) var(--s-6);text-align:center;box-shadow:var(--sh-xs)}
.anchor .lbl{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-3)}
.anchor .fig{font-family:var(--f-mono);font-size:var(--t-3xl);font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.anchor .sub{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s-3)}

/* --------------------------------------------------------------- owner */
.owner{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center}
@media(max-width:860px){.owner{grid-template-columns:1fr}}
.owner-figure{aspect-ratio:4/5;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--warm-200);background:var(--warm-100);display:grid;place-items:center;
  box-shadow:var(--sh-sm)}
.owner-figure img{width:100%;height:100%;object-fit:cover;display:block}
.owner-figure .placeholder{text-align:center;padding:var(--s-8);color:var(--ink-3);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.owner p + p{margin-top:var(--s-4)}
.facts{list-style:none;margin:var(--s-8) 0 0;padding:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(3,1fr);border-top:1px solid var(--warm-200);padding-top:var(--s-6)}
.facts .k{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.facts .v{font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-top:4px}
@media(max-width:560px){.facts{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------- area chips */
.area{display:grid;gap:clamp(2rem,5vw,3rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center}
@media(max-width:860px){.area{grid-template-columns:1fr}}
.chips{list-style:none;margin:var(--s-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips li{font-size:var(--t-sm);background:var(--brand-tint);color:var(--brand);
  padding:7px 14px;border-radius:var(--r-full);font-weight:500}
.map{aspect-ratio:4/3;border-radius:var(--r-xl);border:1px solid var(--warm-200);
  background:var(--brand-tint);display:grid;place-items:center;overflow:hidden;position:relative}
.map svg{width:100%;height:100%;display:block}

/* --------------------------------------------------------------- FAQ */
.faq{max-width:var(--prose);margin-inline:auto;border-top:1px solid var(--warm-200)}
.faq details{border-bottom:1px solid var(--warm-200)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s-4);padding:var(--s-6) 0;min-height:var(--tap);
  font-weight:600;font-size:var(--t-base);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);transform:rotate(45deg) translateY(-3px);
  transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .answer{padding:0 0 var(--s-6);color:var(--ink-2);max-width:64ch}
.faq .answer p + p{margin-top:var(--s-3)}

/* --------------------------------------------------------------- final CTA */
.cta-band{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center}
@media(max-width:860px){.cta-band{grid-template-columns:1fr}}
.cta-card{background:var(--white);border-radius:var(--r-2xl);padding:clamp(1.5rem,4vw,2.25rem);
  box-shadow:var(--sh-lg);color:var(--ink)}
.cta-card h3{margin-bottom:var(--s-4)}
.cta-card p{color:var(--ink-2)}

/* --------------------------------------------------------------- forms */
.form{display:grid;gap:var(--s-6);max-width:600px}
.field{display:grid;gap:6px}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.field .note{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{font:inherit;font-size:var(--t-base);
  color:var(--ink);background:var(--white);border:1.5px solid var(--warm-500);
  border-radius:var(--r-md);padding:13px 14px;min-height:var(--tap);width:100%}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint-2)}
.field .hint{font-size:var(--t-sm);color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:var(--t-sm);color:var(--ink-3)}
.msg{padding:14px 18px;border-radius:var(--r-md);font-size:var(--t-sm);display:none}
.msg.ok{display:block;background:var(--brand-tint);color:var(--brand);
  border:1px solid var(--brand)}
.msg.bad{display:block;background:var(--accent-tint);color:var(--error);
  border:1px solid var(--error)}

/* --------------------------------------------------------------- misc */
.pill{display:inline-block;align-self:flex-start;font-family:var(--f-mono);font-size:10.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;
  border-radius:var(--r-full);background:var(--brand-tint);color:var(--brand)}
.callout{border-left:4px solid var(--brand);background:var(--brand-tint);
  padding:var(--s-6);border-radius:0 var(--r-xl) var(--r-xl) 0;max-width:72ch;
  font-size:var(--t-sm);color:var(--ink-2)}
.callout b{color:var(--ink)}
.callout.warn{border-left-color:var(--accent);background:var(--accent-tint)}
.loading{color:var(--ink-3);font-size:var(--t-sm);padding:var(--s-8) 0}

.split{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.prod{border:1px solid var(--warm-200);background:var(--white);border-radius:var(--r-xl);
  padding:var(--s-8);display:flex;flex-direction:column;gap:var(--s-4);box-shadow:var(--sh-xs)}
.prod h3{font-size:var(--t-2xl);font-weight:700}
.prod p{color:var(--ink-2)}
.prod .go{margin-top:auto;padding-top:var(--s-2)}

/* segmented filter */
.segbar{display:flex;justify-content:center;margin-bottom:var(--s-12)}
.seg{display:inline-flex;background:var(--warm-100);border:1px solid var(--warm-200);
  border-radius:var(--r-full);padding:5px;gap:4px;max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);
  background:none;border:0;cursor:pointer;padding:11px 20px;border-radius:var(--r-full);
  min-height:var(--tap);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--brand);
  box-shadow:var(--sh-sm)}

/* jump nav on the services page */
.jump{position:sticky;top:var(--header-h);z-index:20;background:rgb(255 255 255 / .94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--warm-200)}
.jump .wrap{display:flex;gap:var(--s-2);align-items:center;overflow-x:auto;
  min-height:60px;scrollbar-width:none}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:9px 14px;border-radius:var(--r-full);font-weight:500}
.jump a:hover{background:var(--warm-100);color:var(--ink)}

/* --------------------------------------------------------------- gallery */
.gal{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.gal{grid-template-columns:1fr}}
.shot{background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-xl);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-xs);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.shot:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.shot .frame{aspect-ratio:4/3;background:var(--warm-100);position:relative;overflow:hidden}
.shot .frame img{width:100%;height:100%;object-fit:cover;display:block}
.shot .cap{padding:var(--s-6);display:flex;flex-direction:column;gap:8px}
.shot .cap h3{font-size:var(--t-base);font-weight:600}
.shot .cap p{font-size:var(--t-sm);color:var(--ink-2)}
.shot .meta{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:.04em;margin-top:auto;padding-top:4px}
.shot .cap{flex:1}
.gal .shot.pair{grid-column:span 2}
@media(max-width:680px){.gal .shot.pair{grid-column:span 1}}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--warm-200)}
.ba figure{margin:0;position:relative;aspect-ratio:4/3;background:var(--warm-100);overflow:hidden}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba .tag{position:absolute;top:10px;left:10px;font-family:var(--f-mono);font-size:10px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;
  border-radius:var(--r-sm);background:var(--ink);color:#fff}
.emptyshot{display:grid;place-items:center;height:100%;color:var(--ink-3);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}

/* social row */
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-3)}
.social a{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:12px 18px;border:1px solid var(--warm-200);border-radius:var(--r-lg);
  background:var(--white);color:var(--ink);text-decoration:none;font-size:var(--t-sm);
  font-weight:600;transition:border-color var(--dur) var(--ease),
  background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.social a:hover{border-color:var(--brand);background:var(--brand-tint);
  color:var(--brand);transform:translateY(-2px)}
.social svg{flex:none;color:var(--brand)}
.social .soon{opacity:.55;pointer-events:none}

/* --------------------------------------------------------------- footer */
footer.site{background:var(--ink);color:#B8B1A8;padding-block:var(--s-16) var(--s-12);
  margin-top:0;font-size:var(--t-sm)}
footer.site .cols{display:grid;gap:var(--s-8);grid-template-columns:1.4fr 1fr 1fr 1.2fr}
@media(max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-size:var(--t-sm);font-family:var(--f-mono);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s-4)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer.site a{color:#D6D0C7;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .blurb{color:#9C958B;max-width:34ch;margin-top:var(--s-3)}
footer.site .brand b{color:#fff}
footer.site .brand{color:#fff}
footer.site .legal{margin-top:var(--s-12);padding-top:var(--s-6);
  border-top:1px solid rgb(255 255 255 / .12);display:flex;gap:var(--s-6);flex-wrap:wrap;
  align-items:center;color:#8E877E;font-size:var(--t-xs)}
footer.site .legal a{color:#8E877E}
.foot-social{display:flex;gap:var(--s-2);margin-top:var(--s-6)}
.foot-social a{display:grid;place-items:center;width:var(--tap);height:var(--tap);
  border-radius:var(--r-md);color:#B8B1A8}
.foot-social a:hover{background:rgb(255 255 255 / .1);color:#fff}

/* --------------------------------------------------------------- sticky bar */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgb(28 24 21 / .14);transform:translateY(110%);
  transition:transform 220ms var(--ease)}
.stickybar.show{transform:none}
.stickybar .inner{display:grid;grid-template-columns:1fr 1fr}
.stickybar a{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;text-decoration:none;font-weight:600;font-size:var(--t-sm);color:#fff}
.stickybar .a1{background:var(--brand)}
.stickybar .a2{background:var(--accent)}
@media(max-width:760px){
  .stickybar{display:block}
  body.has-sticky{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
body:has(.form :focus) .stickybar{transform:translateY(110%)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.tile:hover,.shot:hover,.social a:hover{transform:none}
}