/* MKE Web Labs design system.
   Shared by every page. Fonts, tokens, components.
   Extracted from the inlined block on 2026-09-10 when the site went
   multi-page: one immutable cached file beats re-sending 60KB per page.
   Contrast: every colour pair here is measured against WCAG 2.2 AA.
   Numbers are set in Geist, never Fraunces, which ships no tabular figures. */

/* ===== Self hosted faces. Full source, licences and metric maths in /assets/fonts/README.md ===== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/fraunces-var-latin.woff2') format('woff2') tech(variations),
      url('/assets/fonts/fraunces-var-latin.woff2') format('woff2-variations'),
      url('/assets/fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/geist-var-latin-ext.woff2') format('woff2') tech(variations),
      url('/assets/fonts/geist-var-latin-ext.woff2') format('woff2-variations'),
      url('/assets/fonts/geist-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+0131,U+0152-0153,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2020,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
/* Metric matched fallbacks. Measured, not guessed. Holds CLS at 0 while the webfont swaps. */
@font-face{font-family:'Fraunces Fallback';src:local('Georgia'),local('Times New Roman'),local('Times');size-adjust:108.23%;ascent-override:90.36%;descent-override:23.56%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica'),local('Liberation Sans');size-adjust:105.45%;ascent-override:95.31%;descent-override:27.98%;line-gap-override:0%}

/* ===== Tokens ===== */
:root{
  /* Ground and ink. Every ratio below is measured against WCAG 2.2. */
  --ink:#0B0C0E;            /* page ground */
  --surface:#14161A;        /* raised cards */
  --surface-2:#1B1E23;      /* deeper card */
  --bone:#EDE8E0;           /* primary text, 16.05:1 on ink */
  --bone-dim:#A8A29A;       /* secondary text, 7.73:1 on ink */
  --copper:#E8763A;         /* accent, 6.60:1 on ink */
  --brass:#C8A24C;          /* rules, numerals, 8.13:1 on ink */
  --on-copper:#0B0C0E;      /* text on a copper fill, 6.60:1 */
  --paper:#F4F1EA;          /* light section ground */
  --paper-ink:#14161A;      /* 16.06:1 on paper */
  --paper-dim:#5A5F66;      /* 5.70:1 on paper */
  --copper-deep:#B4500F;    /* accent on paper, 4.55:1 */
  --hair:rgba(237,232,224,.13);
  --hair-dark:rgba(20,22,26,.14);

  --font-display:'Fraunces','Fraunces Fallback',Georgia,'Times New Roman',Times,serif;
  --font-body:'Geist','Geist Fallback',Arial,'Helvetica Neue',Helvetica,system-ui,sans-serif;

  /* 8pt grid */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  /* 1.333 modular scale, fluid */
  --t--1:clamp(.78rem,.76rem + .1vw,.83rem);
  --t-0:clamp(1rem,.97rem + .15vw,1.06rem);
  --t-1:clamp(1.2rem,1.13rem + .35vw,1.4rem);
  --t-2:clamp(1.5rem,1.35rem + .72vw,1.95rem);
  --t-3:clamp(1.85rem,1.58rem + 1.32vw,2.7rem);
  --t-4:clamp(2.3rem,1.8rem + 2.4vw,3.7rem);
  --t-5:clamp(2.9rem,2rem + 4.3vw,5.1rem);

  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);font-size:var(--t-0);line-height:1.6;
  color:var(--bone);background:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit}

/* Focus. Never removed, always 3:1 or better against both grounds. */
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:3px}
.on-paper :focus-visible{outline-color:var(--copper-deep)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--copper);color:var(--on-copper);padding:14px 20px;font-weight:600}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--s3)}
.narrow{max-width:820px}
@media(min-width:700px){.wrap{padding-inline:var(--s5)}}

section{padding-block:clamp(var(--s6),10vw,var(--s8));scroll-margin-top:calc(var(--header-h) + 16px)}
.on-paper{background:var(--paper);color:var(--paper-ink)}
.on-paper .dim{color:var(--paper-dim)}
.on-surface{background:var(--surface)}
.dim{color:var(--bone-dim)}

/* ===== Type ===== */
h1,h2,h3,h4{font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;line-height:1.04;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:var(--t-5)}
h2{font-size:var(--t-4)}
h3{font-size:var(--t-2);line-height:1.12}
h4{font-size:var(--t-1);line-height:1.2}
p{max-width:var(--measure);text-wrap:pretty}
.lead{font-size:var(--t-1);line-height:1.5;color:var(--bone-dim)}
.on-paper .lead{color:var(--paper-dim)}
/* Every figure on this page is set in Geist. Fraunces ships no tabular numerals. */
.num{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

.eyebrow{
  font-family:var(--font-body);font-size:var(--t--1);font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:14px;margin-bottom:var(--s3)
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--brass);flex:none}
.on-paper .eyebrow{color:var(--copper-deep)}
.on-paper .eyebrow::before{background:var(--copper-deep)}

.head{margin-bottom:var(--s6)}
.head p{margin-top:var(--s3)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:.94rem;letter-spacing:.01em;
  text-decoration:none;padding:16px 26px;min-height:52px;border-radius:6px;
  border:1px solid transparent;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--copper);color:var(--on-copper);border-color:var(--copper)}
.btn-primary:hover{background:#F08A52;border-color:#F08A52}
.btn-ghost{border-color:var(--hair);color:var(--bone);background:transparent}
.btn-ghost:hover{border-color:var(--bone);background:rgba(237,232,224,.05)}
.on-paper .btn-ghost{border-color:var(--hair-dark);color:var(--paper-ink)}
.on-paper .btn-ghost:hover{border-color:var(--paper-ink);background:rgba(20,22,26,.04)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ===== Header ===== */
.hdr{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(11,12,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.hdr-in{max-width:1180px;margin:0 auto;height:100%;padding-inline:var(--s3);display:flex;align-items:center;gap:var(--s4)}
@media(min-width:700px){.hdr-in{padding-inline:var(--s5)}}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;color:var(--bone)}
.brand b{color:var(--copper);font-weight:600}
.nav{display:none;gap:var(--s4);margin-left:auto;font-size:.9rem}
.nav a{text-decoration:none;color:var(--bone-dim);transition:color .2s var(--ease)}
.nav a:hover{color:var(--bone)}
@media(min-width:900px){.nav{display:flex}}
.hdr .btn{margin-left:auto;padding:11px 18px;min-height:42px;font-size:.86rem}
@media(min-width:900px){.hdr .btn{margin-left:var(--s3)}}

/* ===== Hero ===== */
.hero{padding-block:clamp(var(--s6),9vw,var(--s8)) clamp(var(--s6),8vw,110px);position:relative;overflow:hidden}
/* One quiet warm bloom. No gradient mesh, no noise overlay, no video. */
.hero::before{content:"";position:absolute;inset:-30% 30% 40% -20%;background:radial-gradient(closest-side,rgba(232,118,58,.10),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.hero h1{max-width:15ch;margin-bottom:var(--s4)}
.hero h1 .b{display:block;color:var(--copper)}
.hero .lead{max-width:56ch;margin-bottom:var(--s5)}
.hero .btn-row{margin-bottom:var(--s5)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);padding-top:var(--s4);border-top:1px solid var(--hair);list-style:none}
.facts li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--bone-dim)}
.facts svg{width:15px;height:15px;color:var(--brass);flex:none}

/* ===== Work / portfolio ===== */
/* Phones get a swipe strip. Six stacked portrait cards added 6,000px of scroll,
   and swiping is what a thumb wants to do to a row of phone screenshots anyway. */
.work-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--s3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:var(--s2);
  margin-inline:calc(var(--s3) * -1);padding-inline:var(--s3);
  scrollbar-width:none
}
.work-grid::-webkit-scrollbar{display:none}
.work-card{display:flex;flex-direction:column;scroll-snap-align:start}
@media(min-width:640px){
  .work-grid{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;
    gap:var(--s6) var(--s4);overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none}
}
@media(min-width:1000px){.work-grid{grid-template-columns:repeat(3,1fr)}}

/* ---- The phone ----
   A device frame that is drawn, not photographed: no image to load, scales
   with the column, and stays crisp at any density. The screen is a real
   scroll container holding a full-page capture, so the visitor scrolls the
   build the way their customer would. */
.phone{
  position:relative;width:100%;max-width:258px;margin-inline:auto;
  aspect-ratio:390/844;padding:9px;
  border-radius:44px;
  background:linear-gradient(160deg,#4A4A4E 0%,#232326 18%,#1A1A1D 50%,#2E2E32 82%,#4A4A4E 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 26px 50px -18px rgba(0,0,0,.85),0 3px 10px rgba(0,0,0,.5);
  transition:transform .35s var(--ease)
}
@media(min-width:640px){.phone{max-width:290px}}
.work-card:hover .phone{transform:translateY(-5px)}
/* side buttons, two hairlines, enough to read as a device */
.phone::before,.phone::after{
  content:"";position:absolute;left:-2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3A3A3E,#1A1A1D);pointer-events:none
}
.phone::before{top:23%;height:5%}
.phone::after{top:32%;height:9%}
.phone-screen{
  position:relative;height:100%;width:100%;border-radius:36px;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  background:var(--surface-2) center top/cover no-repeat;
  scrollbar-width:none
}
.phone-screen::-webkit-scrollbar{display:none}
.phone-screen:focus-visible{outline:3px solid var(--brass);outline-offset:4px}
.phone-shot{width:100%;height:auto;display:block}
/* dynamic island, floating over the content the way it does on the real thing */
.phone-status{
  position:sticky;top:0;z-index:3;height:40px;background:#08090A;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-family:var(--font-body);font-size:11px;font-weight:600;
  color:#F2F2F4;letter-spacing:.01em;font-variant-numeric:tabular-nums
}
.phone-island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:33%;height:22px;border-radius:99px;background:#000;pointer-events:none
}
.phone-bars{display:flex;align-items:center;gap:4px}
.phone-bars i{display:block;width:3px;border-radius:1px;background:#F2F2F4}
.phone-bars i:nth-child(1){height:4px}
.phone-bars i:nth-child(2){height:6px}
.phone-bars i:nth-child(3){height:8px}
.phone-bars i:nth-child(4){height:10px}
.phone-batt{
  width:19px;height:10px;border:1px solid rgba(242,242,244,.55);border-radius:3px;
  position:relative;margin-left:3px
}
.phone-batt::before{content:"";position:absolute;inset:1.5px;width:11px;background:#F2F2F4;border-radius:1px}
.phone-batt::after{content:"";position:absolute;right:-3px;top:3px;width:1.5px;height:4px;background:rgba(242,242,244,.55);border-radius:0 1px 1px 0}
/* a soft foot so the capture never ends on a hard cut, and it reads as depth */
.phone-fade{
  position:absolute;left:9px;right:9px;bottom:9px;height:52px;border-radius:0 0 36px 36px;
  background:linear-gradient(to top,rgba(11,12,14,.55),transparent);
  pointer-events:none;z-index:1
}
.swipe-hint{margin:calc(var(--s5) * -1) 0 var(--s3);font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--bone-dim);font-weight:600}
@media(min-width:640px){.swipe-hint{display:none}}
.scroll-note{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin-top:var(--s3);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-dim);font-weight:600
}
.scroll-note svg{width:13px;height:13px;color:var(--brass)}
.work-note{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair);font-size:.9rem;color:var(--bone-dim);max-width:var(--measure)}

/* ===== Numbered lists (problem, steps) ===== */
.rows{display:grid;gap:var(--s5);counter-reset:r}
@media(min-width:820px){.rows{gap:var(--s6)}}
.row{display:grid;gap:var(--s2) var(--s4);grid-template-columns:auto 1fr;align-items:start}
.row::before{
  counter-increment:r;content:counter(r,decimal-leading-zero);
  font-family:var(--font-body);font-variant-numeric:tabular-nums;
  font-size:.86rem;font-weight:600;letter-spacing:.1em;color:var(--brass);
  padding-top:.55em
}
.row h3{margin-bottom:var(--s1)}
.row p{color:var(--bone-dim)}
.on-paper .row p{color:var(--paper-dim)}
.on-paper .row::before{color:var(--copper-deep)}

/* ===== Feature list ===== */
.checks{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s5)}
@media(min-width:760px){.checks{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5)}}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start}
.checks svg{width:18px;height:18px;color:var(--copper);margin-top:.28em;flex:none}
.on-paper .checks svg{color:var(--copper-deep)}
.checks b{font-weight:600;display:block}
.checks span{color:var(--bone-dim);font-size:.95rem}
.on-paper .checks span{color:var(--paper-dim)}

/* ===== Price ===== */
.price-wrap{display:grid;gap:var(--s6);align-items:start}
@media(min-width:900px){.price-wrap{grid-template-columns:.85fr 1.15fr;gap:var(--s7)}.price-wrap>div:first-child{position:sticky;top:calc(var(--header-h) + 40px)}}
.price-tag{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-size:clamp(4rem,12vw,6.4rem);font-weight:600;line-height:.9;letter-spacing:-.04em}
.price-sub{font-size:var(--t-1);color:var(--bone-dim);margin-top:var(--s2)}
.on-paper .price-sub{color:var(--paper-dim)}
.why{display:grid;gap:var(--s4);list-style:none}
.why li{padding-left:var(--s4);border-left:2px solid var(--brass)}
.on-paper .why li{border-left-color:var(--copper-deep)}
.why b{display:block;margin-bottom:6px;font-weight:600}
.why span{color:var(--bone-dim);font-size:.95rem}
.on-paper .why span{color:var(--paper-dim)}

/* ===== Comparison table ===== */
.tco:focus-visible{outline:3px solid var(--copper-deep);outline-offset:4px;border-radius:6px}
.tco{margin-top:var(--s6);overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
caption{text-align:left;font-size:.9rem;color:var(--bone-dim);padding-bottom:var(--s3)}
.on-paper caption{color:var(--paper-dim)}
th,td{text-align:left;padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--hair)}
.on-paper th,.on-paper td{border-bottom-color:var(--hair-dark)}
thead th{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim);font-weight:600;padding-bottom:var(--s2)}
.on-paper thead th{color:var(--paper-dim)}
td.fig{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;padding-right:0}
th.fig{text-align:right;padding-right:0}
tr.us td{color:var(--bone);font-weight:600;border-bottom:none}
tr.us{background:rgba(232,118,58,.09)}
.on-paper tr.us{background:rgba(180,80,15,.07)}
.on-paper tr.us td{color:var(--paper-ink)}
tr.us td:first-child{box-shadow:inset 3px 0 0 var(--copper)}
.on-paper tr.us td:first-child{box-shadow:inset 3px 0 0 var(--copper-deep)}
.tco-note{margin-top:var(--s3);font-size:.84rem;color:var(--bone-dim);max-width:var(--measure)}
.on-paper .tco-note{color:var(--paper-dim)}

/* ===== Plans ===== */
.plans{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr);gap:var(--s3)}}
.plan{background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:var(--s5) var(--s4);display:flex;flex-direction:column}
.plan.pick{border-color:var(--copper);background:var(--surface-2);position:relative}
.plan.pick::after{content:"Most pick this";position:absolute;top:-1px;right:var(--s4);transform:translateY(-50%);background:var(--copper);color:var(--on-copper);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:99px}
.plan h3{font-size:var(--t-1);margin-bottom:var(--s2)}
.plan .amt{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-size:2.6rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.plan .amt small{font-size:.9rem;font-weight:400;color:var(--bone-dim);letter-spacing:0}
.plan .who{font-size:.9rem;color:var(--bone-dim);margin:var(--s3) 0 var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.plan ul{list-style:none;display:grid;gap:12px;font-size:.92rem}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.plan li svg{width:15px;height:15px;color:var(--copper);margin-top:.32em;flex:none}
.plan li.off{color:var(--bone-dim)}
.plan li.off svg{color:var(--bone-dim);opacity:.45}

/* ===== Trade chips ===== */
.trade-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.trade-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px;min-height:52px;border-radius:99px;
  border:1px solid var(--hair);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)
}
.trade-chip::after{content:"";width:7px;height:7px;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);transition:transform .22s var(--ease)}
.trade-chip:hover{border-color:var(--copper);background:rgba(232,118,58,.07)}
.trade-chip:hover::after{transform:rotate(-45deg) translate(2px,2px)}

/* ===== Bands ===== */
.band{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.band h2{max-width:20ch;margin-bottom:var(--s4)}

/* ===== About ===== */
.about-grid{display:grid;gap:var(--s5);align-items:start}
.about-grid p+p{margin-top:var(--s3)}
.creds{display:grid;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hair)}
@media(min-width:760px){.creds{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.creds h3{font-size:var(--t-1);line-height:1.2;margin-bottom:var(--s1)}
.creds p{font-size:.93rem;color:var(--bone-dim)}

/* ===== FAQ ===== */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--hair)}
.on-paper .faq details{border-bottom-color:var(--hair-dark)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s4) var(--s5) var(--s4) 0;position:relative;
  font-family:var(--font-display);font-size:var(--t-1);font-weight:600;line-height:1.25;
  transition:color .2s var(--ease)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)
}
.on-paper .faq summary::after{border-color:var(--copper-deep)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--copper)}
.on-paper .faq summary:hover{color:var(--copper-deep)}
.faq .a{padding:0 var(--s5) var(--s5) 0;color:var(--bone-dim)}
.on-paper .faq .a{color:var(--paper-dim)}
.faq .a p+p{margin-top:var(--s2)}

/* ===== Contact ===== */
.contact-grid{display:grid;gap:var(--s6)}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.direct{display:grid;gap:var(--s3);margin-top:var(--s5)}
.direct a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--hair);border-radius:8px;text-decoration:none;transition:border-color .2s var(--ease),background .2s var(--ease)}
.direct a:hover{border-color:var(--copper);background:rgba(232,118,58,.06)}
.direct svg{width:20px;height:20px;color:var(--copper);flex:none}
.direct b{display:block;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:var(--bone-dim);font-weight:600;margin-bottom:2px}
.direct span{font-size:var(--t-1);font-variant-numeric:tabular-nums}
form{display:grid;gap:var(--s3)}
label{display:block;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--bone-dim);margin-bottom:9px}
input,textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--bone);background:var(--surface);
  border:1px solid var(--hair);border-radius:7px;padding:14px 15px;min-height:52px;
  transition:border-color .2s var(--ease)
}
textarea{min-height:120px;resize:vertical}
input:hover,textarea:hover{border-color:rgba(237,232,224,.28)}
input::placeholder,textarea::placeholder{color:#6E6A64}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-alt{font-size:.88rem;color:var(--bone-dim);margin-top:var(--s1)}
.form-msg{
  display:none;gap:11px;align-items:flex-start;
  padding:14px 16px;border-radius:8px;font-size:.92rem;line-height:1.5;
  border:1px solid var(--copper);background:rgba(232,118,58,.10);color:var(--bone)
}
.form-msg.on{display:flex}
.form-msg svg{width:17px;height:17px;color:var(--copper);flex:none;margin-top:.18em}
.form-msg a{color:var(--copper);font-weight:600}
.form-alt a{color:var(--copper)}

/* ===== Footer ===== */
.foot{background:var(--ink);border-top:1px solid var(--hair);padding-block:var(--s6) var(--s5)}
.foot-grid{display:grid;gap:var(--s5)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot h4{font-family:var(--font-body);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-dim);font-weight:600;margin-bottom:var(--s3)}
.foot ul{list-style:none;display:grid;gap:11px;font-size:.92rem}
.foot a{color:var(--bone-dim);text-decoration:none;transition:color .2s var(--ease)}
.foot a:hover{color:var(--bone);text-decoration:underline}
.foot .blurb{font-size:.9rem;color:var(--bone-dim);margin-top:var(--s3);max-width:44ch}
.areas{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--hair);font-size:.86rem;color:var(--bone-dim);line-height:1.9}
.legal{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:.84rem;color:var(--bone-dim)}
.legal a{color:var(--bone-dim)}

/* ===== Sticky mobile call bar ===== */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:99;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border-top:1px solid var(--hair)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 10px;background:var(--ink);color:var(--bone);text-decoration:none;font-weight:600;font-size:.94rem;min-height:56px}
.callbar a.p{background:var(--copper);color:var(--on-copper)}
.callbar svg{width:17px;height:17px}
@media(min-width:900px){.callbar{display:none}}
@media(max-width:899px){body{padding-bottom:57px}}

/* ===== Motion ===== */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}