/* ============================================================
   FRONTLINE WEB DESIGNS - single-file site
   Design system: "Clay & Bronze - Editorial"
   - Espresso ink foundation · warm sand paper · terracotta clay accent · brass hairline
   - Display: M PLUS Rounded 1c | UI/Body: Atkinson Hyperlegible (v5 rebrand 2026-07-05)
   - Built in Maui, Hawaii with firehouse values.
   ============================================================ */

/* ---------- Design tokens (v9 2026-08-16: Clay & Bronze, rounded. Every pair below was
   solved against WCAG 2.1 AA with a control that must fail; do not eyeball a replacement. ---------- */
:root{
  /* ink / surfaces */
  --ink:        #221C18;   /* espresso base */
  --ink-2:      #2A231E;   /* dark section surface */
  --ink-3:      #352C25;   /* raised dark surface */
  --ink-deep:   #191411;   /* footer / deepest */

  /* paper / light surfaces */
  /* Paper is DELIBERATELY past off-white. impeccable's cream-palette rule reads
     the page background and flags min(r,g,b)>=209 with a 6-48 warm tint, i.e.
     the reflex "tasteful" cream. #E7DCC8 is rgb(231,220,200): min 200, warmth
     31, so it clears on the lightness test with margin and commits to the sand
     instead of hedging toward white. Darkening paper drops every text ratio
     below, so --muted / --muted-2 / --line moved with it - do not change one
     alone. Ratios recomputed, not estimated. */
  --paper:      #E7DCC8;   /* sand page background (was #F0EAE1, read as AI-default cream) */
  --paper-2:    #DBCEB6;   /* deeper warm surface, keeps the card>paper>paper-2 ramp */
  --card:       #FAF6F0;   /* bone card, deliberately not #FFF */
  --line:       #CFC2AC;   /* hairline border on paper (1.29:1, matches the old 1.23:1 read) */
  --line-2:     #8C7C67;   /* form-control border: 3.76:1 on card, clears WCAG 1.4.11 */
  --line-dark:  rgba(240,234,225,.14);

  /* text */
  --text:       #1D1815;   /* headings on light (12.96:1 on paper) */
  --muted:      #665A52;   /* body on light (4.91:1 on paper) */
  --muted-2:    #6A5E51;   /* secondary muted (4.64:1 on paper) */
  --on-dark:    #F2EBE2;   /* text on dark (14.2:1 on ink) */
  --on-dark-mut:#B3A395;   /* muted on dark (6.9:1 on ink) */

  /* accents */
  --ember:      #C2734F;   /* terracotta clay, decor + borders on dark */
  --ember-2:    #DD8F68;   /* clay as text on dark surfaces (6.6:1 on ink) */
  --ember-deep: #9E4B27;   /* solid fill behind white text (AA 6.0:1) + pressed/hover */
  --ember-ink:  #8E4526;   /* clay as text on paper (AA 5.11:1) */
  --tide:       #C0A166;   /* antique brass, decor on dark only (6.8:1 on ink) */
  --tide-ink:   #6B5220;   /* brass as text on paper (AA 5.42:1) */

  --grad-ember: linear-gradient(135deg,#C2734F 0%,#C2734F 100%); /* flat: gradients are a tell */
  --grad-glow:  radial-gradient(58% 58% at 76% 12%, rgba(194,115,79,.16) 0%, transparent 60%);

  --shadow-sm:  0 1px 2px rgba(34,28,24,.05), 0 1px 3px rgba(34,28,24,.05);
  --shadow-md:  0 14px 30px -12px rgba(34,28,24,.16), 0 4px 10px -6px rgba(34,28,24,.10);
  --shadow-lg:  0 30px 64px -20px rgba(34,28,24,.30), 0 10px 26px -14px rgba(34,28,24,.18);
  --shadow-ember: 0 10px 22px -12px rgba(34,28,24,.5); /* neutral, no glow */

  --radius:     16px;
  --radius-sm:  12px;
  --radius-lg:  24px;

  --container:  1180px;
  --nav-h:      74px;

  --display: "M PLUS Rounded 1c", system-ui, sans-serif;
  --ui:      "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease:    cubic-bezier(.16,1,.3,1);
  --t-fast:  .18s ease;
  --t:       .28s var(--ease);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 18px);
}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--text);
  background:var(--paper);
  line-height:1.7;
  font-size:17px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--text);
  margin:0;
}
p{margin:0}
::selection{background:rgba(194,115,79,.22);color:var(--text)}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:6px}

/* ---------- Film grain (atmosphere) ---------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.038;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;font-family:var(--ui);
}
.skip:focus{left:16px}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(66px,9.5vw,124px) 0}
.section--tight{padding:clamp(50px,6vw,84px) 0}
.center{text-align:center}

/* plain typographic label: the chip/pill eyebrow was the loudest AI tell (killed 2026-07-05) */
.eyebrow{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ember-ink);
  padding:0;border-radius:0;background:none;border:0;
}
.hero .eyebrow,.about .eyebrow,.contact .eyebrow{color:var(--tide);background:none;border:0}

.section-head{max-width:700px;margin-inline:auto;margin-bottom:clamp(44px,5.5vw,68px)}
.section-head .eyebrow{margin-bottom:20px}
.h2{font-size:clamp(28px,4.2vw,45px);letter-spacing:-.018em;line-height:1.04}
.h2 em{font-style:italic;font-weight:480;color:var(--ember-ink)}
.lead{color:var(--muted);font-size:clamp(16px,2vw,19px);margin-top:20px;line-height:1.72;font-weight:400}
.about .h2,.contact .h2,.contact h1{color:#fff}
.contact .lead{color:var(--on-dark-mut)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);
  font-family:var(--ui);font-weight:600;font-size:15.5px;letter-spacing:.005em;
  padding:14px 24px;min-height:50px;border-radius:12px;
  position:relative;isolation:isolate;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

.btn--ember{--bg:var(--ember-deep);--fg:#fff;box-shadow:var(--shadow-ember)}
.btn--ember:hover{background:var(--ember-ink);box-shadow:0 22px 46px -16px rgba(194,115,79,.66)}

.btn--ghost{
  --bg:transparent;--fg:var(--text);
  border:1.5px solid var(--line-2);background:rgba(255,253,249,.6);
}
.btn--ghost:hover{border-color:var(--ink);background:var(--card)}
.about .btn--ghost,.contact .btn--ghost,.hero .btn--ghost{--fg:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24)}
.about .btn--ghost:hover,.contact .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42)}

.btn--block{width:100%}
.btn--lg{font-size:16.5px;padding:16px 28px;min-height:56px}
.btn-arrow{transition:transform var(--t)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ---------- Header / nav ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--t),box-shadow var(--t),backdrop-filter var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(240,234,225,.84);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px -16px rgba(34,28,24,.5);
}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px}
.brand{display:inline-flex;align-items:center;flex-shrink:0;gap:11px;font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.01em}
.brand .mark{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--ink);box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.10)}
.brand .mark svg{width:22px;height:22px}
.brand-logo{width:54px;height:54px;display:block;transition:transform var(--t)}
.brand:hover .brand-logo{transform:rotate(-4deg) scale(1.05)}
.brand-name{display:flex;flex-direction:column;line-height:1.04}
.brand-name .bn-1{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.012em;color:#fff;transition:color var(--t)}
.brand-name .bn-2{font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mut);margin-top:1px;transition:color var(--t)}
.header.scrolled .brand-name .bn-1,.header--solid .brand-name .bn-1{color:var(--ink)}
.header.scrolled .brand-name .bn-2,.header--solid .brand-name .bn-2{color:var(--muted-2)}
@media (max-width:560px){.brand-name .bn-1{font-size:16px}.brand-name .bn-2{font-size:8px;letter-spacing:.14em}}
.header .brand .word{color:#fff;transition:color var(--t)}
.header .brand .word b{color:var(--ember-2)}
.header.scrolled .brand .word{color:var(--ink)}
.header.scrolled .brand .word b{color:var(--ember-ink)}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  position:relative;white-space:nowrap;
  font-family:var(--ui);font-weight:500;font-size:15px;color:rgba(255,255,255,.84);
  padding:9px 9px;border-radius:9px;transition:color var(--t-fast);
}
.nav-links a::after{
  content:"";position:absolute;left:9px;right:9px;bottom:6px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);opacity:.55;
}
.nav-links a:hover{color:var(--ember-2)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ember-2)}
.nav-links a.active::after{transform:scaleX(1);background:var(--ember-2);opacity:1;height:2px}
.header.scrolled .nav-links a{color:var(--muted)}
.header.scrolled .nav-links a:hover{color:var(--ember-ink)}
.header.scrolled .nav-links a.active{color:var(--ember-ink)}
.header.scrolled .nav-links a.active::after{background:var(--ember)}
.nav-cta{display:flex;align-items:center;flex-shrink:0;gap:10px}
.nav-cta .btn{white-space:nowrap}

.nav-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;align-items:center;justify-content:center;transition:color var(--t),background var(--t),border-color var(--t)}
.header.scrolled .nav-toggle{border-color:var(--line-2);background:var(--card);color:var(--ink)}

/* Solid header for pages without a dark hero behind it (every page except Home):
   keeps nav text dark-on-light and readable at the top of the page. */
.header--solid{
  background:rgba(240,234,225,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px -16px rgba(34,28,24,.5);
}
.header--solid .nav-links a{color:var(--muted)}
.header--solid .nav-links a:hover{color:var(--ember-ink)}
.header--solid .nav-links a.active{color:var(--ember-ink)}
.header--solid .nav-links a.active::after{background:var(--ember)}
.header--solid .nav-toggle{border-color:var(--line-2);background:var(--card);color:var(--ink)}
.nav-toggle svg{width:24px;height:24px}

/* Tap-to-call button - stays visible on every screen size (incl. mobile) */
.nav-call{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 15px;border-radius:11px;border:1.5px solid var(--ember-2);color:var(--ember-2);font-family:var(--ui);font-weight:600;font-size:14.5px;letter-spacing:-.005em;transition:background var(--t),color var(--t),border-color var(--t)}
.nav-call svg{width:19px;height:19px}
.nav-call:hover{background:var(--ember-deep);border-color:var(--ember-deep);color:#fff}
.header--solid .nav-call,.header.scrolled .nav-call{color:var(--ember-ink);border-color:rgba(178,58,28,.4)}
.header--solid .nav-call:hover,.header.scrolled .nav-call:hover{background:var(--ember-deep);border-color:var(--ember-deep);color:#fff}
@media (max-width:1100px){.nav-call .nav-call-txt{display:none}.nav-call{padding:0;width:44px;justify-content:center}}
.nav-toggle .ic-close{display:none}

/* mobile menu */
@media (max-width:1300px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;
    background:rgba(240,234,225,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:16px 24px 26px;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--t),transform var(--t),visibility var(--t);
    box-shadow:var(--shadow-lg);
  }
  body.menu-open .mobile-menu{opacity:1;transform:none;visibility:visible;pointer-events:auto}
  body.menu-open .nav-toggle .ic-open{display:none}
  body.menu-open .nav-toggle .ic-close{display:block}
  .mobile-menu a{display:block;padding:15px 6px;font-family:var(--display);font-weight:500;font-size:18px;border-bottom:1px solid var(--line)}
  .mobile-menu a:last-of-type{border-bottom:0}
  .mobile-menu a.active{color:var(--ember-ink)}
  .mobile-menu .btn{margin-top:18px;width:100%;font-family:var(--ui);font-size:16px;border-bottom:0}
}
.mobile-menu{display:block}
@media (min-width:1301px){.mobile-menu{display:none}}

/* The header is position:fixed and only .hero reserves its height, so on every
   other page the first block renders behind the nav unless it pads for it here.
   At full width this computes to 124px, which is what .section already used, so
   the common case is unchanged. .lp-hero sits under a sticky bar and is exempt. */
main > :first-child:not(.hero,.lp-hero){padding-top:calc(var(--nav-h) + clamp(26px,3.9vw,50px))}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:
    radial-gradient(120% 120% at 50% -10%, #122c39 0%, var(--ink) 46%, var(--ink-deep) 100%);
  color:var(--on-dark);
  padding-top:calc(var(--nav-h) + clamp(56px,8vw,100px));
  padding-bottom:clamp(72px,10vw,124px);
  overflow:hidden;isolation:isolate;
}
/* atmosphere: ember aurora (top-right) + tide glow (bottom-left) */
.hero::before{
  content:"";position:absolute;inset:-22% -12% -12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 48% at 84% 6%, rgba(255,106,61,.42) 0%, rgba(221,143,104,.12) 38%, transparent 68%),
    radial-gradient(42% 46% at 6% 96%, rgba(16,156,147,.30) 0%, rgba(16,156,147,.06) 42%, transparent 72%);
  animation:auroraDrift 20s var(--ease) infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.7;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(88% 76% at 50% 14%,#000 28%,transparent 80%);
  mask-image:radial-gradient(88% 76% at 50% 14%,#000 28%,transparent 80%);
}
@keyframes auroraDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.09)}}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,70px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:46px}}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  font-family:var(--ui);font-size:13px;font-weight:500;color:var(--on-dark-mut);letter-spacing:.01em;
  padding:7px 15px 7px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
}
.hero-badge .dot{width:9px;height:9px;border-radius:50%;background:#33D69F;box-shadow:0 0 0 4px rgba(51,214,159,.18)}
.hero h1{font-size:clamp(38px,6.2vw,74px);color:#fff;letter-spacing:-.022em;font-weight:500;line-height:1.0;text-wrap:balance;text-shadow:0 1px 40px rgba(0,0,0,.25)}
.hero h1 .accent{position:relative;font-style:italic;font-weight:480;color:var(--ember-2);white-space:nowrap}
.hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.085em;border-radius:4px;background:linear-gradient(90deg,var(--ember),var(--ember-2));box-shadow:0 4px 18px -2px rgba(194,115,79,.6);transform:scaleX(0);transform-origin:left;animation:accentSwash .8s var(--ease) 1s both}
@keyframes accentSwash{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-sub{margin-top:24px;font-size:clamp(17px,2.2vw,20px);color:var(--on-dark-mut);max-width:548px;line-height:1.66}
.hero-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.hero-trust{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center}
.hero-trust .ht{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--on-dark-mut)}
.hero-trust svg{width:20px;height:20px;color:var(--ember-2);flex:none}
.hero-trust b{color:#fff;font-weight:600;font-family:var(--ui)}

/* orchestrated hero entrance */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-badge{animation:heroIn .7s var(--ease) both}
.hero h1{animation:heroIn .85s .07s var(--ease) both}
.hero-sub{animation:heroIn .85s .17s var(--ease) both}
.hero-actions{animation:heroIn .85s .27s var(--ease) both}
.hero-trust{animation:heroIn .85s .37s var(--ease) both}

/* hero site preview */
.showcase{position:relative;perspective:1700px}
.mock{
  position:relative;border-radius:18px;background-color:var(--ink-3);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-lg),0 40px 92px -34px rgba(194,115,79,.42),0 0 0 1px rgba(221,143,104,.05);
  overflow:hidden;transform:rotateY(-8deg) rotateX(3.5deg);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.showcase:hover .mock{transform:rotateY(0deg) rotateX(0deg);box-shadow:var(--shadow-lg),0 52px 104px -32px rgba(194,115,79,.52)}
.mock-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line-dark)}
.mock-bar .d{width:11px;height:11px;border-radius:50%}
.mock-bar .d.r{background:#FF5F57}.mock-bar .d.y{background:#FEBC2E}.mock-bar .d.g{background:#28C840}
.mock-url{margin-left:10px;flex:1;height:26px;border-radius:8px;background:rgba(255,255,255,.06);display:flex;align-items:center;padding:0 12px;font-size:12.5px;color:var(--on-dark-mut);font-family:var(--ui)}
.mock-url svg{width:13px;height:13px;margin-right:7px;color:#33D69F}
.mock-body{padding:16px;background:#0C1622}
/* mini nav */
.mp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mp-nav .lg{width:30px;height:30px;border-radius:8px;background:var(--grad-ember)}
.mp-nav .lk{display:flex;gap:13px}
.mp-nav .lk i{display:block;width:30px;height:7px;border-radius:4px;background:rgba(255,255,255,.18)}
.mp-nav .cta{width:64px;height:24px;border-radius:7px;background:rgba(255,255,255,.9)}
/* mini hero band */
.mock-hero{border-radius:13px;background:var(--grad-ember);padding:22px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mock-hero::after{content:"";position:absolute;right:-26px;top:-30px;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.30),transparent 70%)}
.mock-hero .eyb{width:84px;height:8px;border-radius:5px;background:rgba(255,255,255,.55);margin-bottom:13px}
.mock-line{height:11px;border-radius:6px;background:rgba(255,255,255,.95)}
.mock-line.w70{width:72%}.mock-line.w45{width:48%;margin-top:9px;background:rgba(255,255,255,.62)}
.mh-btns{margin-top:18px;display:flex;gap:9px}
.mock-btn{width:96px;height:30px;border-radius:8px;background:#fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.3)}
.mock-btn.ghost{width:74px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
/* mini stat bar */
.mp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.mp-stats div{background:rgba(255,255,255,.045);border:1px solid var(--line-dark);border-radius:10px;padding:11px 12px}
.mp-stats b{display:block;height:12px;width:54%;border-radius:4px;background:linear-gradient(90deg,var(--ember-2),var(--tide))}
.mp-stats s{display:block;height:6px;width:80%;border-radius:4px;background:rgba(255,255,255,.2);margin-top:7px}
/* feature cards */
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:11px}
.mock-card{border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);padding:11px}
.mock-card i{display:block;width:24px;height:24px;border-radius:7px;background:var(--grad-ember);opacity:.92}
.mock-card s{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.22);margin-top:9px}
/* floating glass proof chips */
.chip{
  position:absolute;z-index:3;display:flex;align-items:center;gap:11px;
  padding:11px 16px 11px 12px;border-radius:15px;
  background:rgba(13,27,37,.74);border:1px solid rgba(255,255,255,.15);
  box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
}
.chip .ci{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:18px;line-height:1}
.chip .ci svg{width:20px;height:20px}
.chip b{display:block;font-family:var(--display);font-weight:500;font-size:15px;color:#fff;line-height:1}
.chip small{display:block;font-size:11.5px;color:var(--on-dark-mut);margin-top:3px;font-family:var(--ui);font-weight:500}
.chip--rating{top:-20px;left:-24px;animation:chipFloat 7s var(--ease) infinite}
.chip--speed{right:-26px;top:42%;animation:chipFloat 8.5s var(--ease) .6s infinite reverse}
.chip--lead{right:-16px;bottom:30px;animation:chipFloat 6.5s var(--ease) .3s infinite}
.chip--rating .ci{background:rgba(221,143,104,.16);color:var(--ember-2)}
.chip--speed .ci{background:rgba(63,208,196,.16);color:#4FD9CE}
.chip--lead .ci{background:rgba(51,214,159,.16);color:#33D69F}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media (max-width:900px){
  .mock,.showcase:hover .mock{transform:none}
  .chip--rating{top:-16px;left:-8px}.chip--speed{right:-8px}.chip--lead{right:-4px}
}
@media (max-width:560px){.chip--speed{display:none}.chip--rating,.chip--lead{transform:scale(.92)}}

/* logo strip */
.logos{border-top:1px solid var(--line-dark);margin-top:clamp(50px,7vw,82px);padding-top:32px}
.logos p{text-align:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mut);margin-bottom:20px;font-weight:600}
.logos ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px}
.logos li{font-family:var(--ui);font-weight:600;font-size:15px;color:#fff;opacity:.6;display:flex;align-items:center;gap:8px;transition:opacity var(--t)}
.logos li:hover{opacity:1}
.logos li svg{width:16px;height:16px;color:var(--ember-2)}

/* ---------- Capabilities ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:880px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(194,115,79,.3)}
.card:hover::before{transform:scaleX(1)}
.card .ic{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:rgba(194,115,79,.10);color:var(--ember-ink);
  transition:background var(--t),color var(--t),transform var(--t);
}
/* LEAVE AS --ember. White on --ember is 3.87:1, which fails the 4.5:1 TEXT bar but this chip
   holds only an SVG icon, so the applicable bar is non-text contrast at 3:1 and it clears.
   Same applies to .value .ic below. Do not "fix" these to --ember-deep. Measured 2026-08-13. */
.card:hover .ic{background:var(--ember);color:#fff;transform:scale(1.05) rotate(-4deg)}
.card .ic svg{width:27px;height:27px}
.card h3,.card h2{font-size:19px;margin-bottom:10px;font-weight:500;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15.5px;line-height:1.64}

/* ---------- Process ---------- */
.process{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
@media (max-width:880px){.steps{grid-template-columns:repeat(2,1fr);gap:30px 24px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:8px}
.step .num{
  font-family:var(--display);font-weight:500;font-size:16px;font-style:italic;
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--ink);color:#fff;margin-bottom:22px;position:relative;z-index:2;
  transition:transform var(--t),background var(--t);
}
.step:hover .num{background:var(--ember-deep);transform:translateY(-3px)}
.step h3{font-size:17px;margin-bottom:10px;font-weight:500;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:15px;line-height:1.62}
.step:not(:last-child)::after{
  content:"";position:absolute;left:48px;top:24px;width:calc(100% - 32px);height:1.5px;
  background:linear-gradient(90deg,var(--line-2),rgba(194,115,79,.4));z-index:1;
}
@media (max-width:880px){.step::after{display:none}}

/* ---------- Work / portfolio ---------- */
.work-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.work-grid>.work{flex:0 1 calc((100% - 44px)/3)}
@media (max-width:900px){.work-grid>.work{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:560px){.work-grid>.work{flex-basis:100%}}
/* real-clients.html jump grid: plain-image cards, each an in-page link to a case study */
.cs-jump{margin-top:clamp(26px,4vw,44px)}
.cs-jump .work{text-decoration:none;color:var(--text)}
.cs-jump .work>img{width:100%;height:auto;aspect-ratio:760/475;object-fit:cover;border-bottom:1px solid var(--line);display:block}
.cs-jump .work-body{gap:6px}
.cs-jump .work-body h3{font-size:1.1rem;line-height:1.15}
.cs-jump .work-body p{font-size:14.5px;color:var(--muted);line-height:1.5}
.work{
  border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex;flex-direction:column;
}
.work:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.work-thumb{
  aspect-ratio:16/10;position:relative;display:grid;place-items:center;overflow:hidden;
  color:#fff;
}
.work-thumb::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 78%);
}
.work-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.work:hover .work-thumb img{transform:scale(1.06)}
/* These thumbnails are screenshots of our own work, so the title must not sit on top of the part
   that shows it off. Centred, it landed at the 45% stop where this ramp is weakest, and 16 of 18
   titles measured 1.75:1 to 2.76:1 against the 3:1 large-text bar. Bottom-aligning it lets the ramp
   work WITH the design: the mid band is now LIGHTER than before (.18 vs .22, so more of each sample
   site is visible) and only the bottom strip is darkened, where the title and the watermark live.
   Re-measure by sampling rendered pixels if the samples are ever swapped. */
.work-thumb::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.52) 78%,rgba(0,0,0,.80) 100%)}
.work-thumb .wname{position:relative;z-index:2;align-self:end;margin-bottom:16px;font-family:var(--display);font-weight:500;font-style:italic;font-size:21px;letter-spacing:-.01em;text-align:center;padding:0 20px;max-width:100%;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.work-thumb .badge{position:absolute;z-index:3;top:13px;left:13px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.work-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.work-body .vibe{color:var(--muted);font-size:14.5px}
.work-body .ind{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.01em}
.work-link{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:600;font-size:14.5px;color:var(--ember-ink)}
.work-link svg{width:16px;height:16px;transition:transform var(--t)}
.work:hover .work-link svg{transform:translate(3px,-3px)}
/* themed thumbs */
.t-restaurant{background:linear-gradient(135deg,#6E2D0E,#C76C2A)}
.t-law{background:linear-gradient(135deg,#0A1A28,#21405C)}
.t-realty{background:linear-gradient(135deg,#0C6F78,#5FB8B0)}
.t-fitness{background:linear-gradient(135deg,#6E0E1C,#E03535)}
.t-beauty{background:linear-gradient(135deg,#190E22,#603482)}
.t-contractor{background:linear-gradient(135deg,#272520,#BC7E27)}
.t-coach{background:linear-gradient(135deg,#123124,#2FAE7E)}
.t-foodtruck{background:linear-gradient(135deg,#7A1E12,#E59B1A)}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:920px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.price{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 30px;box-shadow:var(--shadow-sm);position:relative;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex;flex-direction:column;
}
.price:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.price.featured{
  background:var(--ink);color:var(--on-dark);border-color:transparent;box-shadow:var(--shadow-lg);
  transform:scale(1.02);
}
@media (max-width:920px){.price.featured{transform:none}}
.price.featured h3,.price.featured .amount{color:#fff}
.price.featured .tier{color:var(--ember-2)}
.price.featured .feat li{color:var(--on-dark-mut)}
.price.featured .feat li.no{color:#7A8890} /* 4.85:1 on --ink. Was #728088 = 4.35:1, an AA fail. Deliberately dimmer than --on-dark-mut (7:1) so "not included" still reads as secondary. */
.price-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--ember-deep);color:#fff;font-family:var(--ui);font-weight:700;
  font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;box-shadow:var(--shadow-ember);white-space:nowrap;
}
.price .tier{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-ink)}
.price h3{font-size:25px;margin:8px 0 6px;font-weight:500;letter-spacing:-.01em}
.price .amount{font-family:var(--display);font-weight:500;font-size:34px;letter-spacing:-.02em;line-height:1}
.price .amount small{font-size:15px;font-weight:500;color:var(--muted-2);font-family:var(--ui)}
.price .pdesc{color:var(--muted);font-size:14.5px;margin-top:10px;min-height:20px}
.price.featured .pdesc{color:var(--on-dark-mut)}
/* --muted-2 is documented AA on PAPER; the featured card is --ink, where it measures 3.17:1.
   Scoped override only, because the light cards need --muted-2 and already pass there. */
.price.featured .amount small{color:var(--on-dark-mut)}
.feat{margin:24px 0 28px;display:flex;flex-direction:column;gap:11px}
.feat li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--muted);line-height:1.5}
.feat li svg{width:20px;height:20px;flex:none;margin-top:1px}
.feat li.yes svg{color:var(--tide-ink)}
.price.featured .feat li.yes svg{color:#33D69F}
.feat li.no{color:var(--muted-2)}
.feat li.no svg{color:#BCC3CC}
.price .btn{margin-top:auto}
.deposit-note{margin-top:12px;text-align:center;font-size:13px;color:var(--muted-2)}
.price.featured .deposit-note{color:var(--on-dark-mut)}

/* maintenance */
.maint{
  margin-top:28px;background:var(--card);border:1px dashed var(--line-2);border-radius:var(--radius);
  padding:28px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.maint .mt h4{font-size:18px;margin-bottom:6px;font-weight:500;letter-spacing:-.01em}
.maint .mt p{color:var(--muted);font-size:15px}
.maint .mlist{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px}
.maint .mlist span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.maint .mlist svg{width:16px;height:16px;color:var(--tide-ink)}
.maint .price-tag{font-family:var(--display);font-weight:500;font-size:29px;white-space:nowrap;letter-spacing:-.02em}
.maint .price-tag small{font-size:14px;font-weight:500;color:var(--muted-2);font-family:var(--ui)}

/* ---------- About ---------- */
.about{background:var(--ink-2);color:var(--on-dark);position:relative;overflow:hidden}
.about::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 12% 18%,rgba(194,115,79,.16),transparent 60%);pointer-events:none}
.about .container{position:relative;z-index:2}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,74px);align-items:center}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:42px}}
.about h1,.about h2{color:#fff;font-size:clamp(26px,3.9vw,39px);letter-spacing:-.018em}
.about .story{color:var(--on-dark-mut);font-size:17px;line-height:1.82;margin-top:24px}
.about .story strong{color:#fff;font-weight:600}
.values{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.value{background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--radius-sm);padding:22px}
.value .ic{width:42px;height:42px;border-radius:11px;background:var(--ember);display:grid;place-items:center;color:#fff;margin-bottom:14px}
.value .ic svg{width:22px;height:22px}
.value h2{color:#fff;font-size:16px;margin-bottom:6px;font-weight:500}
.value p{color:var(--on-dark-mut);font-size:14px;line-height:1.55}
/* stat panel */
.about-panel{background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:clamp(30px,4vw,42px);box-shadow:var(--shadow-lg)}
.about-panel .quote{font-family:var(--display);font-weight:480;font-style:italic;font-size:clamp(19px,2.4vw,25px);color:#fff;line-height:1.34;letter-spacing:-.01em}
.about-panel .quote .ember{color:var(--ember-2);font-style:italic}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;padding-top:30px;border-top:1px solid var(--line-dark)}
.stat .n{font-family:var(--display);font-weight:500;font-size:clamp(24px,3.1vw,32px);color:#fff;letter-spacing:-.02em}
.stat .n .grad{color:var(--ember-2)}
.stat .l{font-size:12.5px;color:var(--on-dark-mut);margin-top:6px;line-height:1.35}

/* ---------- Contact / CTA ---------- */
/* overflow:clip, NOT hidden: hidden makes this a scroll container, and a sticky
   child then sticks to a scrollport that never scrolls, so it silently does
   nothing. clip does the same clipping without that side effect. */
.contact{background:var(--ink);color:var(--on-dark);position:relative;overflow:clip}
.contact::before{content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none}
.contact .container{position:relative;z-index:2}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,70px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:42px}}
/* The form card runs about twice the height of the intro beside it, so a
   start-aligned intro left a tall band of empty ground on desktop. Sticky
   spends it instead of centring into it: the phone number and email stay on
   screen while the form is being filled. Two-column widths only. */
@media (min-width:901px){
  .contact-grid>:first-child{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.contact h2{color:#fff;font-size:clamp(28px,4.2vw,44px);letter-spacing:-.018em}
.contact .lead{color:var(--on-dark-mut)}
.contact-info{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.cinfo{display:flex;align-items:center;gap:15px}
.cinfo .ic{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);display:grid;place-items:center;color:var(--ember-2);flex:none}
.cinfo .ic svg{width:22px;height:22px}
.cinfo .ct span{display:block;font-size:13px;color:var(--on-dark-mut)}
.cinfo .ct a,.cinfo .ct b{font-family:var(--ui);font-weight:600;font-size:17px;color:#fff}
.cinfo .ct a:hover{color:var(--ember-2)}

/* form */
.form-card{background:var(--card);border-radius:var(--radius-lg);padding:clamp(28px,4vw,40px);box-shadow:var(--shadow-lg);color:var(--text);border:1px solid var(--line)}
.form-card h3,.form-card h2{color:var(--text);font-size:21px;margin-bottom:6px;font-weight:500;letter-spacing:-.01em}
.form-card .fsub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.field{margin-bottom:16px}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.field.row{grid-template-columns:1fr}}
.field label{display:block;font-size:13px;font-weight:600;font-family:var(--ui);margin-bottom:7px;color:var(--text);letter-spacing:.01em}
.field label .req{color:var(--ember-ink)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:11px;
  /* 16px minimum: iOS Safari zooms the viewport on focus below this. */
  font:inherit;font-size:16px;color:var(--text);background:#fff;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field textarea{resize:vertical;min-height:108px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 4px rgba(194,115,79,.14)}
/* 4.74:1 on white. #9AA0A2 measured 2.65:1 and failed WCAG AA, on every field of
   contact, free-sample, free-sample-lp and start. `impeccable detect` exits 0 on
   all four: it does not evaluate ::placeholder at all. Measured 2026-09-08 with
   ~/.claude/tools/placeholder_contrast.mjs, which is now in this repo's cpd check
   list for exactly that reason. Do not lighten this without re-running it. */
.field input::placeholder,.field textarea::placeholder{color:#6E7478}
.form-note{font-size:12.5px;color:var(--muted-2);margin-top:6px}
/* Service interest checkboxes (contact form) */
.lbl-hint{font-weight:500;color:var(--muted);letter-spacing:0}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media (max-width:480px){.pick-grid{grid-template-columns:1fr}}
.pick-head{grid-column:1/-1;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-ink);margin:11px 0 1px}
.pick-head:first-child{margin-top:0}
.pick-grid .pick{display:flex;align-items:center;gap:11px;margin:0;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:11px;background:#fff;cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.pick:hover{border-color:var(--ember-2)}
.pick input{width:18px;height:18px;flex:none;margin:0;padding:0;accent-color:var(--ember);cursor:pointer}
.pick-txt{display:flex;flex-direction:column;line-height:1.25;font-family:var(--ui);font-weight:600;font-size:14.5px;color:var(--text)}
.pick-txt em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
.pick-grid .pick.is-checked,.pick-grid .pick:has(input:checked){border-color:var(--ember);background:rgba(194,115,79,.05);box-shadow:0 0 0 3px rgba(194,115,79,.10)}
.form-msg{display:none;align-items:center;gap:11px;margin-top:16px;padding:15px 17px;border-radius:12px;font-size:15px;font-weight:500}
.form-msg svg{width:22px;height:22px;flex:none}
.form-msg.ok{background:rgba(16,156,147,.10);color:var(--tide-ink);border:1px solid rgba(16,156,147,.3)}
.form-msg.err{background:rgba(194,115,79,.08);color:var(--ember-ink);border:1px solid rgba(194,115,79,.3)}

/* ---------- Footer ---------- */
.footer{background:var(--ink-deep);color:var(--on-dark-mut);padding:56px 0 32px}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--on-dark-mut);border:1px solid var(--line-dark);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.footer-social a:hover{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.footer-social svg{width:20px;height:20px}
.social-cta{margin-top:16px;font-size:14.5px;color:var(--muted)}
.social-cta a{color:var(--ember-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.social-cta a:hover{color:var(--ember-deep)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;padding-bottom:34px;border-bottom:1px solid var(--line-dark)}
.footer .brand{color:#fff}
.footer-tagline{margin-top:16px;font-family:var(--display);font-weight:500;font-size:16px;color:#fff;letter-spacing:-.005em}
.footer-tagline span{color:var(--ember-2);font-weight:480;font-style:italic}
.footer-about{max-width:340px;margin-top:10px;font-size:14.5px;line-height:1.62}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.footer-nav a{font-family:var(--ui);font-weight:500;font-size:15px;color:var(--on-dark-mut);transition:color var(--t-fast)}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:26px;font-size:13.5px}
.footer-bottom .made{display:inline-flex;align-items:center;gap:8px}
.footer-bottom .made svg{width:15px;height:15px;color:var(--ember)}
.footer-disclaimer{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-dark);font-size:11px;line-height:1.6;color:var(--on-dark-mut)}
.footer-disclaimer a{color:var(--ember-2);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.footer-disclaimer a:hover{color:#fff}

/* ---------- Footer - elevated ($10K polish): top accent, rhythm, whisper hovers ---------- */
.footer{position:relative;padding:clamp(64px,7vw,88px) 0 36px}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 8%,rgba(194,115,79,.5) 38%,rgba(221,143,104,.28) 62%,transparent 92%)}
.footer-top{padding-bottom:clamp(34px,4vw,46px);gap:clamp(28px,5vw,64px)}
.footer-tagline{font-size:20px}
.footer-about{margin-top:12px;line-height:1.7}
.footer-nav a{position:relative;padding-bottom:2px;background-image:linear-gradient(var(--ember-2),var(--ember-2));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;transition:color var(--t-fast),background-size .32s var(--ease)}
.footer-nav a:hover{color:#fff;background-size:100% 1.5px}
/* Service-areas column: same link styling, stacked instead of wrapped */
.footer-nav:not(.footer-local){max-width:440px}
.footer-local{flex-direction:column;gap:11px;align-items:flex-start}
.footer-navlabel{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}
.footer-social a{transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.footer-social a:hover{transform:translateY(-2px);border-color:rgba(221,143,104,.45)}

/* ---------- Real Results / Real Builds (home case study) ---------- */
.real-builds{background:var(--paper-2)}
/* Case study cards. Until 2026-08-16 these were bare regions separated by a hairline, so
   three of them read as one long wall with ragged bottoms. Each is now a contained card and
   the two columns are centred against each other rather than top-aligned. */
.cs-grid{display:grid;gap:clamp(22px,3vw,34px);margin-top:clamp(26px,4vw,44px)}
.cs{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(32px,4vw,56px);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,46px);box-shadow:0 20px 46px -26px rgba(34,28,24,.26)}
.cs-badge{display:inline-block;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-ink);background:rgba(194,115,79,.10);border:1px solid rgba(194,115,79,.22);padding:6px 13px;border-radius:999px}
.cs-name{font-size:clamp(24px,3.1vw,35px);letter-spacing:-.015em;margin-top:16px}
.cs-desc{color:var(--muted);font-size:17px;line-height:1.7;margin-top:14px;max-width:48ch}
.cs-included{margin-top:26px}
.cs-inc-label{display:block;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:13px}
.cs-list{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px}
.cs-list li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--text);line-height:1.4}
.cs-list .ck{flex:none;width:18px;height:18px;color:var(--tide-ink)}
.cs-quote{margin:0;padding:2px 0 2px 20px;border-left:3px solid var(--ember);font-size:17px;line-height:1.6;color:var(--text)}
.cs-quote-by{font-family:var(--ui);font-size:14px;color:var(--muted);margin-top:12px;padding-left:23px}
.cs-quote-by .who{font-weight:700;color:var(--text)}
.cs-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px}
.cs-rating{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
/* --ember measured 3.33:1 on the bone card, under the 4.5 bar. The stars are aria-hidden
   decoration, but they carry the rating visually, so use the on-paper clay (6.44:1). */
.cs-rating .stars{color:var(--ember-ink);letter-spacing:1px}
.cs-shots{position:relative}
.cs-main{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.cs-main img{width:100%;height:auto;display:block}
.cs-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cs-thumbs figure{margin:0}
.cs-thumbs img{width:100%;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);border:1px solid var(--line);display:block}
.cs-thumbs figcaption{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--muted-2);margin-top:8px;text-align:center}
@media(max-width:880px){.cs{grid-template-columns:1fr}}
@media(max-width:430px){.cs-list{grid-template-columns:1fr}}

/* ---------- Reveal animation (refined blur-rise) ----------
   Content is hidden ONLY once main.js signals it is running (html.js added as
   its first statement). If JS is off, blocked, or main.js fails to load, the
   class never appears and everything stays visible - fail-open by design.
   (An @media (scripting:none) fallback was tried first, but it misses older
   browsers and the JS-enabled-but-main.js-blocked case.) */
html.js .reveal{opacity:0;transform:translateY(22px);filter:blur(7px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform,filter}
html.js .reveal.is-visible{opacity:1;transform:none;filter:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js .reveal{opacity:1;transform:none;filter:none}
  .hero-badge,.hero h1,.hero-sub,.hero-actions,.hero-trust{animation:none}
  .hero h1 .accent::after{animation:none;transform:scaleX(1)}
  .hero::before,.mock,.chip{animation:none}
  .mock{transform:none}
}

/* ---------- FAQ ---------- */
.faq-head{max-width:680px;margin:0 auto 40px;text-align:center}
.faq-head .lead{margin-top:14px}
.faq-head .lead a{color:var(--ember-ink);text-decoration:underline;text-underline-offset:3px}
.faq-list{max-width:780px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.faq-item[open]{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;font-family:var(--display);font-size:19px;font-weight:700;color:var(--text);line-height:1.35;transition:color var(--t)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--ember-ink)}
.faq-mark{position:relative;flex:none;width:20px;height:20px}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--ember);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.faq-mark::before{top:9px;left:2px;width:16px;height:2px}
.faq-mark::after{top:2px;left:9px;width:2px;height:16px}
.faq-item[open] .faq-mark::after{transform:scaleY(0);opacity:0}
.faq-a{padding:0 24px 24px;color:var(--muted);font-size:16px;line-height:1.65;max-width:62ch}
.faq-a p{margin:0}
@media (max-width:560px){
  .faq-item summary{padding:18px;font-size:17.5px}
  .faq-a{padding:0 18px 20px}
}



/* === 3-pillar nav + sections (v4) - extracted from new homepage === */
/* ================================================
   NEW SECTION STYLES - move to styles.css when ready
   ================================================ */

/* --- NAV DROPDOWNS --- */
.nav-group { position: relative; display: flex; align-items: center; }

/* .nav-group-btn is now a real <a>, styled by the shared .nav-links a rule above;
   only the icon-only toggle beside it needs its own button styling. */
.nav-group-toggle {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  padding: 9px 4px 9px 0; color: rgba(255,255,255,.84);
  transition: color .2s;
}
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible { color: var(--ember); }
.header.scrolled .nav-group-toggle,
.header--solid .nav-group-toggle { color: var(--muted); }
.header.scrolled .nav-group-toggle:hover,
.header.scrolled .nav-group-toggle:focus-visible,
.header--solid .nav-group-toggle:hover,
.header--solid .nav-group-toggle:focus-visible { color: var(--ember-ink); }

.nav-chevron {
  width: 13px; height: 13px;
  transition: transform .22s ease; flex-shrink: 0; opacity: .7;
}
.nav-group[data-open] .nav-chevron { transform: rotate(180deg); opacity: 1; }

.nav-dropdown {
  position: absolute; top: calc(100% + 14px);
  left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #0e2030; border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 6px; min-width: 230px;
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 200; box-shadow: 0 12px 36px rgba(0,0,0,.45);
  pointer-events: none;
}
.nav-group[data-open] .nav-dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0); pointer-events: auto;
}
/* Invisible bridge spanning the gap between the button and the panel. It is a
   child of .nav-dropdown (and thus of .nav-group), so moving the cursor down
   into the menu no longer crosses dead space that would fire mouseleave and
   close the menu before you reach it. */
.nav-dropdown::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
}
.nav-dropdown a {
  display: block; padding: 10px 14px; border-radius: 7px;
  color: rgba(255,255,255,.65); text-decoration: none;
  font-size: .875rem; font-weight: 500;
  transition: background .15s, color .15s; white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: rgba(255,255,255,.07); color: #fff; outline: none;
}

/* --- MOBILE ACCORDION --- */
.mob-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }

.mob-group-head { display: flex; align-items: center; }

/* Overrides .mobile-menu a's uppercase/border-bottom treatment: this is the
   accordion label, not a standalone mobile-menu link, and needs to match the
   old .mob-group-btn look. */
.mob-group-head .mob-group-link {
  flex: 1; font-family: inherit; font-size: 1rem; font-weight: 600;
  color: var(--text); padding: 15px 0; letter-spacing: .01em;
  text-transform: none; border-bottom: 0;
}
.mob-group-toggle {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 15px 0 15px 14px;
}
.mob-group-toggle .nav-chevron { width: 15px; height: 15px; }
.mob-group[data-open] .mob-group-toggle .nav-chevron { transform: rotate(180deg); }

.mob-dropdown { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.mob-group[data-open] .mob-dropdown { max-height: 500px; }

.mob-dropdown a {
  display: block; padding: 11px 14px;
  color: var(--muted); text-decoration: none;
  font-size: .9rem; font-weight: 500;
  border-top: 1px solid var(--line); transition: color .15s;
}
.mob-dropdown a:last-child { margin-bottom: 8px; }
.mob-dropdown a:hover { color: var(--ember-ink); }

/* --- SERVICE PILLARS --- */
.pillars-section { background: #fff; border-bottom: 1px solid var(--line); }

.pillars-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; margin-top: clamp(32px,5vw,48px);
}
.pillar {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px,3vw,36px);
  border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: inherit; background: #fafafa;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pillar:hover {
  border-color: var(--ember);
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
.pillar-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,94,48,.08); border-radius: 10px; color: var(--ember);
}
.pillar-icon svg { width: 22px; height: 22px; }
.pillar-title {
  font-family: var(--display);
  font-size: clamp(1rem,1.35vw,1.12rem);
  font-weight: 500; color: var(--ink); margin: 0;
}
.pillar-desc { font-size: .9rem; color: #555; line-height: 1.6; margin: 0; flex: 1; }
.pillar-link {
  display: flex; align-items: center; gap: 6px;
  /* --ember as text on a light surface is 3.70:1, an AA fail. --ember-ink is the
     palette's text-on-paper variant and measures 5.93:1 here. */
  font-size: .875rem; font-weight: 600; color: var(--ember-ink); margin-top: 4px;
}
.pillar-link svg { width: 14px; height: 14px; transition: transform .2s; }
.pillar:hover .pillar-link svg { transform: translateX(3px); }

@media (max-width: 768px) { .pillars-grid { grid-template-columns: 1fr; } }

/* --- WEB DESIGN HIGHLIGHTS --- */
.wd-highlights {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 20px; margin: clamp(32px,5vw,48px) 0;
}
.wd-highlight {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 12px;
  background: var(--ink); color: var(--on-dark);
}
.wd-highlight-icon { width: 36px; height: 36px; color: var(--ember); }
.wd-highlight-icon svg { width: 100%; height: 100%; }
.wd-highlight h3 {
  font-family: var(--display); font-size: .94rem;
  font-weight: 500; margin: 0; color: #fff;
}
.wd-highlight p { font-size: .875rem; color: var(--on-dark-mut); line-height: 1.6; margin: 0; }

@media (max-width: 768px) { .wd-highlights { grid-template-columns: 1fr; } }

/* --- DIGITAL MARKETING --- */
.dm-section { background: #f7f8fa; border-block: 1px solid var(--line); }

.dm-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 16px; margin: clamp(32px,5vw,48px) 0;
}
.dm-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px,3vw,28px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.dm-card:hover { border-color: var(--ember); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.dm-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,94,48,.08); border-radius: 9px; color: var(--ember);
}
.dm-icon svg { width: 20px; height: 20px; }
.dm-card h3 { font-family: var(--display); font-size: .94rem; font-weight: 500; color: var(--ink); margin: 0; }
.dm-card p { font-size: .875rem; color: #555; line-height: 1.6; margin: 0; }

@media (max-width: 640px) { .dm-grid { grid-template-columns: 1fr; } }

/* --- FRONTLINE AI --- */
.ai-section { background: var(--ink); }

.ai-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px,6vw,72px); align-items: center;
}
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,94,48,.15); color: var(--ember);
  border: 1px solid rgba(255,94,48,.25); border-radius: 100px;
  padding: 4px 12px; font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px;
}
.ai-features {
  list-style: none; padding: 0; margin: 20px 0 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; color: var(--on-dark-mut);
}
.ai-features li::before {
  content: ''; width: 6px; height: 6px;
  background: var(--ember); border-radius: 50%; flex-shrink: 0;
}

/* Chat mockup */
.chat-mock {
  background: #0e2030; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.chat-mock-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.chat-mock-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.chat-mock-title { font-size: .75rem; color: rgba(255,255,255,.5); margin-left: 4px; }
.chat-mock-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.chat-msg--bot { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; }
.chat-bubble { padding: 10px 14px; border-radius: 12px; font-size: .8rem; line-height: 1.5; }
.chat-msg--bot .chat-bubble { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border-bottom-left-radius: 4px; }
.chat-msg--user .chat-bubble { background: var(--ember-deep); color: #fff; border-bottom-right-radius: 4px; }
.chat-label { font-size: .68rem; color: rgba(255,255,255,.3); padding: 0 4px; }
.chat-msg--user .chat-label { text-align: right; }
.chat-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  background: rgba(255,255,255,.08); border-radius: 12px;
  border-bottom-left-radius: 4px; width: fit-content;
}
.chat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.4); animation: chatdot 1.2s infinite;
}
.chat-dot:nth-child(2) { animation-delay: .2s; }
.chat-dot:nth-child(3) { animation-delay: .4s; }
@keyframes chatdot {
  0%, 60%, 100% { opacity: .4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
.chat-mock-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07);
}
.chat-input-bar {
  flex: 1; height: 34px;
  background: rgba(255,255,255,.07); border-radius: 8px;
  display: flex; align-items: center; padding: 0 12px;
}
.chat-input-placeholder { font-size: .75rem; color: rgba(255,255,255,.25); }
.chat-send-btn {
  width: 30px; height: 30px; background: var(--ember);
  border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-send-btn svg { width: 14px; height: 14px; color: #fff; }

@media (max-width: 768px) {
  .ai-grid { grid-template-columns: 1fr; }
  .chat-mock { max-width: 480px; margin: 0 auto; }
}

/* --- REAL CLIENTS TEASER --- */
.clients-teaser { background: #fff; border-block: 1px solid var(--line); }
.client-thumb-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: clamp(24px,4vw,40px); }
.client-thumb-grid figure { margin: 0; border-radius: 12px; overflow: hidden; position: relative; }
.client-thumb-grid img { width: 100%; height: auto; display: block; transition: transform .3s; }
.client-thumb-grid figure:hover img { transform: scale(1.02); }
.client-thumb-grid figcaption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(34,28,24,.8), transparent);
  color: #fff; font-size: .8rem; font-weight: 500;
}
@media (max-width: 560px) { .client-thumb-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v5 REBRAND OVERRIDES (2026-07-05) - poster identity, matches homepage
   Kill remaining AI tells: glow shadows, italic-serif accents, blur fade-up.
   2026-08-16: the square-corner half of this block is GONE. It carried eight
   `border-radius:0` rules that overrode every component's own radius further up
   this file, which is why the --radius tokens appeared to do nothing. Deleting
   them restores the radii already written into each component rule; do not
   reintroduce a blanket radius reset here.
   ============================================================ */
.btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:15px}
.btn--lg{font-size:17px}
.btn--ghost{border:2px solid var(--line-2)}

/* Closing CTA band. Was an identical inline style repeated across 21 pages, which left
   .btn--ghost inside it falling back to its LIGHT treatment (dark text, sand border) on a
   dark ground. The old .about/.contact/.hero selector list never reached these sections. */
.section--dark{background:var(--ink);text-align:center;color:var(--on-dark)}
.section--dark .h2,.section--dark h2{color:var(--on-dark)}
.section--dark .lead{color:var(--on-dark-mut)}

/* .btn--ghost defaults to DARK text for a light ground. On any dark band that renders as
   near-invisible: measured 1.04:1 for "Try it now" inside .ai-section. Keep this selector
   list in step with every dark surface, or the button silently disappears. */
.section--dark .btn--ghost,.ai-section .btn--ghost{--fg:var(--on-dark);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.26)}
.section--dark .btn--ghost:hover,.ai-section .btn--ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.44)}
/* no italic-serif accents: the display face carries emphasis with weight + color */
.h2 em,.hero h1 .accent,.about-panel .quote,.about-panel .quote .ember,
.step .num,.work-thumb .wname,.footer-tagline span{font-style:normal}
.h2 em{font-weight:700;color:var(--ember-ink)}
/* interior page heroes: flat navy, one calm ember glow, no aurora animation */
.hero{background:var(--ink)}
.hero::before{background:radial-gradient(44% 48% at 84% 6%, rgba(194,115,79,.22) 0%, transparent 62%);animation:none}
/* reveal: keep the settle, kill the blur (blur fade-up reads AI) */
html.js .reveal{filter:none;transform:translateY(14px)}
/* display sizes: the rounded face is wider than the condensed one, so these came down */
.brand-name .bn-1{font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.card h3,.card h2{font-size:21px}
.price h3{font-size:24px}
.faq-item summary{font-family:var(--ui);font-weight:700;font-size:17px}
.mobile-menu a{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em}
/* section labels above h2 keep working as plain kickers */
.pick-head,.cs-inc-label,.price .tier{font-family:var(--display);font-size:13px;letter-spacing:.06em}
.ai-badge{background:none;border:0;padding:0;border-radius:0;font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--tide)}
.ai-badge svg{display:none}