/*
Theme Name: Three Monkey IT v2
Theme URI: https://threemonkey.uk
Author: Three Monkey IT
Author URI: https://threemonkey.uk
Description: Neon-gallery redesign for Three Monkey IT: near-black hero with the neon sticker-monkey artwork, a diagonal home/business split, light reading sections and Lucide line icons. Classic PHP theme, self-hosted fonts, no external requests.
Version: 2.0.0-beta.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: three-monkey-it-2
Tags: business, custom-menu, custom-logo, featured-images, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   DESIGN BASE: Concept A "Neon gallery" (redesign-v2/concepts/A-neon-gallery),
   with Concept C's diagonal home/business split (redesign-v2/concepts/
   C-split-personality). Cartoon service mascots removed; Lucide line icons
   (ISC) instead, inlined from inc/icons.php. Licences: LICENSES.md.

   FONTS (self-hosted woff2 from @fontsource 5.3.0, assets/fonts/):
     Space Grotesk 500/700 - headings - SIL Open Font License 1.1
     Inter 400/600/700     - body     - SIL Open Font License 1.1

   CONTRAST (WCAG 2.x, computed by script on 2026-10-17; 63 pairs, 0 fail).
   'body' needs 4.5:1, 'large' 3:1, 'ui' (icons, borders, focus rings) 3:1.
   'Worst case' rows estimate the strongest point of a glow behind the text.
   If a colour or opacity changes, re-measure it.
     #F4F1EA on #131418  16.32:1  body  PASS  Text on ink (hero, header, steps, page heroes)
     #B9BCC4 on #131418   9.69:1  body  PASS  Muted text on ink
     #2AC3BD on #131418   8.45:1  body  PASS  Teal eyebrow / "Handled." / nav underline on ink
     #2AC3BD on #1A484A   4.66:1  body  PASS  Teal eyebrow over strongest teal glow (worst case)
     #B9BCC4 on #1A484A   5.34:1  body  PASS  Muted lede over strongest teal glow (worst case)
     #F4F1EA on #1A484A   8.99:1  body  PASS  Hero heading over strongest teal glow (worst case)
     #B9BCC4 on #3A2A26   7.18:1  body  PASS  Muted text over coral glow corner (worst case)
     #0E1013 on #2AC3BD   8.75:1  body  PASS  Button text on teal button
     #1E1F24 on #F4F1EA  14.58:1  body  PASS  Artwork caption on cream pill
     #A9370F on #F4F1EA   5.75:1  body  PASS  Caption emphasis on cream pill
     #1E1F24 on #FAF7F2  15.39:1  body  PASS  Body text on paper
     #4A4D55 on #FAF7F2   7.91:1  body  PASS  Muted text on paper
     #A9370F on #FAF7F2   6.06:1  body  PASS  Kicker (coral-text) on paper
     #0B6F69 on #FAF7F2   5.63:1  body  PASS  Links (teal-deep) on paper
     #1E1F24 on #FFFFFF  16.45:1  body  PASS  Body text on white
     #4A4D55 on #FFFFFF   8.45:1  body  PASS  Muted text on white
     #A9370F on #FFFFFF   6.48:1  body  PASS  Kicker (coral-text) on white
     #0B6F69 on #FFFFFF   6.01:1  body  PASS  Links (teal-deep) on white
     #FFC24D on #131418  11.46:1  body  PASS  Gold kicker on ink
     #B9BCC4 on #25282F   7.77:1  body  PASS  Step text on step card
     #F4F1EA on #25282F  13.08:1  body  PASS  Step heading on step card
     #2AC3BD on #25282F   6.77:1  large PASS  Step 1 number
     #FFC24D on #25282F   9.19:1  large PASS  Step 2 number
     #FF6A3C on #25282F   5.18:1  large PASS  Step 3 number
     #F4F1EA on #1F4246   9.67:1  body  PASS  CTA heading over teal tint (worst case)
     #B9BCC4 on #1F4246   5.74:1  body  PASS  CTA text over teal tint (worst case)
     #2AC3BD on #1F4246   5.00:1  body  PASS  CTA email link over teal tint (worst case)
     #B9BCC4 on #0D0E11  10.16:1  body  PASS  Footer text and links
     #F4F1EA on #0D0E11  17.11:1  body  PASS  Footer headings / link hover
     #1F1A17 on #FBF4EA  15.78:1  body  PASS  Home side heading/body (warm off-white)
     #5A4E45 on #FBF4EA   7.37:1  body  PASS  Home side muted
     #A9370F on #FBF4EA   5.93:1  body  PASS  Home side tick icons
     #A9370F on #F4E9D8   5.40:1  body  PASS  "At home" tag on home-2 chip
     #1E1F24 on #FFFFFF  16.45:1  body  PASS  Welcome card heading on white
     #F4F1EA on #131418  16.32:1  body  PASS  Business side text on ink
     #B9BCC4 on #19393C   6.53:1  body  PASS  Business side muted over teal glow (worst case)
     #F4F1EA on #19393C  11.00:1  body  PASS  Business side heading over teal glow (worst case)
     #2AC3BD on #19393C   5.70:1  body  PASS  Business ticks/link over teal glow (worst case)
     #B9BCC4 on #3A222F   7.62:1  body  PASS  Business muted over magenta glow corner (worst case)
     #2AC3BD on #182F33   6.46:1  body  PASS  "At work" tag text on teal-tint chip
     #2AC3BD on #1C1E24   7.65:1  ui    PASS  Service icon: teal on dark tile
     #FFC24D on #1C1E24  10.37:1  ui    PASS  Service icon: gold on dark tile
     #FF6A3C on #1C1E24   5.85:1  ui    PASS  Service icon: coral on dark tile
     #FF5C93 on #1C1E24   5.72:1  ui    PASS  Service icon: magenta on dark tile
     #A99BFF on #1C1E24   7.00:1  ui    PASS  Service icon: violet on dark tile
     #8BE15A on #1C1E24  10.33:1  ui    PASS  Service icon: lime on dark tile
     #1C1E24 on #FAF7F2  15.59:1  ui    PASS  Dark icon tile edge on paper card
     #767B85 on #FFFFFF   4.25:1  ui    PASS  Form field border on white
     #1E1F24 on #FFFFFF  16.45:1  body  PASS  Form labels and input text on white
     #1E5631 on #E6F4EA   7.61:1  body  PASS  Success notice text
     #8A1C12 on #FDECEA   8.14:1  body  PASS  Error notice text
     #0E1013 on #FF6A3C   6.69:1  body  PASS  "Client project" badge (ink on coral)
     #0B6F69 on #E3F3F2   5.26:1  body  PASS  "Concept" badge (teal-deep on teal tint)
     #F4F1EA on #1C1E24  14.77:1  body  PASS  Dark card text on ink-2
     #B9BCC4 on #1C1E24   8.77:1  body  PASS  Dark card muted on ink-2
     #2AC3BD on #1C1E24   7.65:1  body  PASS  Dark card email link on ink-2
     #F4F1EA on #25282F  13.08:1  body  PASS  Mobile nav panel links on ink-3
     #FFC24D on #131418  11.46:1  ui    PASS  Focus ring gold on ink
     #FFC24D on #1C1E24  10.37:1  ui    PASS  Focus ring gold on ink-2
     #0B6F69 on #FAF7F2   5.63:1  ui    PASS  Focus ring teal-deep on paper
     #0B6F69 on #FFFFFF   6.01:1  ui    PASS  Focus ring teal-deep on white
     #0B6F69 on #FBF4EA   5.51:1  ui    PASS  Focus ring teal-deep on home side
     #0E1013 on #FFC24D  11.86:1  body  PASS  Skip link (ink on gold)
   REJECTED (fail, so never used for text):
     #12A199 on #FAF7F2   2.98:1  brand teal on paper      -> text uses #0B6F69
     #F0552C on #FAF7F2   3.25:1  brand coral on paper     -> text uses #A9370F
     #FFFFFF on #F0552C   3.48:1  white on coral           -> dark ink on coral
     #D6316B on #15171C   3.85:1  brand magenta on dark    -> magenta kept to glows/icons
     #2AC3BD on #FFFFFF   2.18:1  neon teal on white       -> icons sit on dark tiles
   --------------------------------------------------------------------------- */

@font-face{font-family:"Space Grotesk";src:url("assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#131418; --ink-2:#1C1E24; --ink-3:#25282F; --ink-4:#0D0E11;
  --on-dark:#F4F1EA; --on-dark-muted:#B9BCC4;
  --paper:#FAF7F2; --card:#FFFFFF; --text:#1E1F24; --muted:#4A4D55; --line:#E7E1D7;
  --teal:#2AC3BD; --teal-deep:#0B6F69; --coral:#FF6A3C; --coral-text:#A9370F; --gold:#FFC24D;
  --magenta:#FF5C93; --violet:#A99BFF; --lime:#8BE15A;
  --home:#FBF4EA; --home-2:#F4E9D8; --home-ink:#1F1A17; --home-muted:#463C35;
  --btn-ink:#0E1013; --field:#767B85;
  --radius:18px; --wrap:1180px;
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:var(--teal-deep)}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--btn-ink);padding:10px 16px;border-radius:8px;z-index:100;font-weight:700;text-decoration:none}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.site-header :focus-visible,.site-footer :focus-visible,.biz-side :focus-visible{outline-color:var(--gold)}
.icon{width:1em;height:1em;flex:none}

/* ---------- dark / light grounds ---------- */
.dark{background:var(--ink);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:var(--on-dark)}
.dark a{color:var(--teal)}
.light{background:var(--paper);color:var(--text)}
.white{background:var(--card)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.2;text-decoration:none;padding:.85em 1.4em;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.btn .icon{width:1.1em;height:1.1em;stroke-width:2.5}
.btn-primary,.dark a.btn-primary{background:var(--teal);color:var(--btn-ink);box-shadow:0 8px 28px -8px rgba(42,195,189,.65)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(42,195,189,.55),0 10px 30px -8px rgba(42,195,189,.7)}
.btn-ghost,.dark a.btn-ghost{color:var(--on-dark);border:2px solid rgba(244,241,234,.35);background:transparent}
.btn-ghost:hover{border-color:var(--on-dark)}
.btn-dark{background:var(--ink);color:var(--on-dark)}
.btn-dark:hover{transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{background:var(--ink);color:var(--on-dark);position:relative;z-index:20}
.header-inner{max-width:1280px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-dark)}
.brand img{width:92px;height:auto}
.brand__text{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;white-space:nowrap}
.custom-logo-link img{max-height:60px;width:auto}
.header-actions{display:flex;align-items:center;gap:28px}
.main-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.main-nav a{text-decoration:none;color:var(--on-dark-muted);font-weight:600;font-size:.98rem;padding:6px 0}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav a[aria-current]{color:var(--on-dark)}
.main-nav .current-menu-item>a,.main-nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--teal)}
.main-nav .sub-menu{display:none}
.header-cta.btn{padding:.65em 1.15em;font-size:.98rem;white-space:nowrap}
.nav-toggle{display:none;align-items:center;gap:8px;background:transparent;color:var(--on-dark);border:2px solid rgba(244,241,234,.35);border-radius:999px;padding:.5em .9em;font:600 .95rem var(--body);cursor:pointer}
.nav-toggle .icon{width:1.2em;height:1.2em}
.nav-toggle .icon-x{display:none}
.nav-toggle[aria-expanded="true"] .icon-x{display:block}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}

/* ---------- hero (front page) ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 96px}
.hero::before,.hero::after,.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none}
.hero::before{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(42,195,189,.55),transparent 70%)}
.hero::after{width:620px;height:620px;right:-180px;bottom:-260px;background:radial-gradient(circle,rgba(255,106,60,.45),transparent 70%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:4.6fr 7.4fr;gap:56px;align-items:center;max-width:1280px}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin:0 0 22px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.hero h1{font-size:clamp(3rem,6.2vw,5.4rem);margin-bottom:.35em}
.glow{color:var(--teal);text-shadow:0 0 18px rgba(42,195,189,.55),0 0 42px rgba(42,195,189,.35)}
.hero .lede{font-size:1.25rem;color:var(--on-dark-muted);max-width:30em;margin-bottom:32px}
.hero .lede strong{color:var(--on-dark);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .small{margin:22px 0 0;font-size:.95rem;color:var(--on-dark-muted)}
.artwork{position:relative;margin:0 -40px 0 0}
.frame{position:relative;border-radius:28px;padding:3px;background:linear-gradient(120deg,var(--teal),#7d5cff 40%,var(--magenta) 70%,var(--coral));box-shadow:0 0 50px rgba(42,195,189,.25),0 0 90px rgba(255,92,147,.18)}
.frame>div{border-radius:25px;overflow:hidden;background:var(--ink)}
.artwork img{width:100%;height:auto;transform:scale(1.04)}
.artwork figcaption{position:absolute;left:24px;bottom:-22px;background:var(--on-dark);color:var(--text);font-size:.85rem;font-weight:600;padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.artwork figcaption b{color:var(--coral-text)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative;overflow:hidden;padding:72px 0 80px}
.page-hero::before{width:460px;height:460px;left:-160px;top:-180px;background:radial-gradient(circle,rgba(42,195,189,.5),transparent 70%)}
.page-hero::after{width:520px;height:520px;right:-200px;bottom:-320px;background:radial-gradient(circle,rgba(255,106,60,.4),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.5rem,5vw,4.2rem);margin-bottom:.3em;max-width:16em}
.page-hero .lede{font-size:1.2rem;color:var(--on-dark-muted);max-width:36em;margin:0}

/* ---------- sections ---------- */
.section{padding:104px 0}
.kicker{font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-text);margin:0 0 12px}
.dark .kicker{color:var(--gold)}
.section h2,.steps-band h2{font-size:clamp(2.1rem,3.6vw,3rem)}
.intro{max-width:40em;font-size:1.15rem;color:var(--muted)}
.dark .intro{color:var(--on-dark-muted)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- diagonal split (from concept C) ---------- */
/* 2026-10-26 (Steve: "the split needs character"; chose the torn edge): home side = warm
   watercolour paper (fine grain + soft blotches, drawn by SVG noise, no image) + a lamp glow;
   business side = dark brick (assets/images/brick-dark.webp, generated, mural colours) under a
   52% ink overlay + the neon glows. The torn seam is assets/css/split-tear.css (front page):
   since 2026-10-29 the NEON RIP (Steve's pick), generated by _src/make_split_textures.py, its
   glow kept clear of text by _src/check_seam_clearance.mjs (grey text fails under any glow band).
   2026-10-29 (Steve: warmer home side, bolder tear, more visible brick): paper base --home-2,
   blotches .09->.14, grain .11->.15; ink over the brick .66->.52 (mobile too); darker mortar.
   Contrast by script, WORST case (every glow/grain peaking behind one glyph, brightest brick
   pixel 90,85,87 / darkest paper). Tight rows marked; going further fails (grain .16 -> home
   muted 4.43, ink .48 -> business muted 4.45):
     #F4F1EA on #353336 11.06  body PASS  business text, brightest brick
     #B9BCC4 on #353336  6.57  body PASS  business muted
     #B9BCC4 on #335051  4.59  body PASS  business muted over teal glow (tight)
     #F4F1EA on #553A45  8.97  body PASS  business text over magenta glow
     #2AC3BD on #335051  4.01  ui   PASS  business tick ICONS over teal glow (teal is not text here)
     #1F1A17 on #DABF9E  9.78  body PASS  home text, darkest paper
     #5A4E45 on #DABF9E  4.56  body PASS  home muted (tight)
     #A9370F on #DABF9E  3.68  ui   PASS  home tick ICONS (coral is not text here; tags sit on solid chips)
   2026-11-01 (Steve: home side "to match the letter head home, faint kitchen table"): .split::after holds
   assets/images/home-kitchen-faint.webp (baked by _src/make_home_kitchen.py, alpha 0.12, gone before the seam).
   Re-measured with its darkest pixel over the darkest paper (#C7AD8F worst case):
     #1F1A17 on #C7AD8F  8.05  body PASS  home text
     #463C35 on #C7AD8F  5.01  body PASS  home muted (--home-muted darkened from #5A4E45, which would be 3.76 here)
     #A9370F on #C7AD8F  3.03  ui   PASS  home tick ICONS (tight: alpha 0.15 would fail at 2.86)
   The seam is now the TORN RIP (2026-11-01): Steve found the neon rip dizzying. */
.split{position:relative;color:var(--home-ink);overflow:hidden;padding:88px 0 104px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .16 .15 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .55 0 0 0 0 .32 .14 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    radial-gradient(42% 55% at 14% 78%,rgba(255,196,120,.22),transparent 70%),
    var(--home-2)}
.split::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 70%,rgba(42,195,189,.20),transparent 70%),radial-gradient(40% 40% at 95% 10%,rgba(255,92,147,.16),transparent 70%),linear-gradient(rgba(19,20,24,.52),rgba(19,20,24,.52)),url("assets/images/brick-dark.webp") 0 0/348px 144px;clip-path:polygon(54% 0,100% 0,100% 100%,46% 100%)}
.split::after{content:"";position:absolute;left:0;top:0;bottom:0;width:54%;pointer-events:none;background:url("assets/images/home-kitchen-faint.webp") 0 0/100% auto no-repeat}
.split .wrap{position:relative;z-index:1}
/* Welcome card (2026-11-01, Steve: "very white"): warm cream with a gold glow on the home side and a teal one on
   the business side, inside a neon gradient edge like the picture frames. Measured worst case (both glows stacked,
   #E1E0C5): heading --text 12.4:1, body --muted 6.35:1; plain cream 15.1 / 7.7. WCAG AA needs 4.5. */
.welcome{max-width:760px;margin:0 auto 72px;color:var(--text);border-radius:28px;padding:44px 48px 40px;text-align:center;box-shadow:0 30px 70px -30px rgba(19,20,24,.55);border:2px solid transparent;
  background:radial-gradient(120% 140% at 0% 0%,rgba(242,169,59,.18),transparent 55%) padding-box,radial-gradient(120% 140% at 100% 100%,rgba(42,195,189,.14),transparent 55%) padding-box,linear-gradient(#FBF4EA,#FBF4EA) padding-box,linear-gradient(120deg,var(--gold),var(--coral) 35%,var(--magenta) 65%,var(--teal)) border-box}
.welcome h2{font-size:clamp(2rem,3.4vw,2.7rem);margin-bottom:.4em}
.welcome p{color:var(--muted);font-size:1.1rem;margin:0}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:150px}
.side{display:flex;flex-direction:column}
.side .tag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.side .tag .icon{width:1.1em;height:1.1em}
a.tag{text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}   /* tags link to the path pages (2026-11-01) */
a.tag:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px currentColor}
.home-side .tag{background:var(--home-2);color:var(--coral-text)}
.biz-side .tag{background:#182F33;color:var(--teal)}
.side h3{font-size:clamp(2rem,3.4vw,2.9rem);margin-bottom:.35em}
.side .sub{font-size:1.1rem;margin-bottom:24px}
.home-side h3{color:var(--home-ink)}
.home-side .sub{color:var(--home-muted)}
.biz-side{color:var(--on-dark)}
.biz-side h3{color:var(--on-dark)}
.biz-side .sub{color:var(--on-dark-muted)}
/* Single monkey: the crops are ~2x upscales, so never display wider than 450 CSS px. */
/* Home side: the kitchen-table illustration, framed like the business side but in warm coral/gold. */
.home-art{margin-bottom:26px;border-radius:22px;padding:3px;background:linear-gradient(120deg,var(--gold),var(--coral) 55%,var(--magenta));box-shadow:0 14px 34px rgba(169,55,15,.22)}
.home-art>div{border-radius:19px;height:220px;background:var(--home-2)}
.home-art img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.biz-art{margin-bottom:26px;border-radius:22px;padding:3px}
.biz-art>div{border-radius:19px;height:220px}
.biz-art img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* Homepage "How we can help": the three monkeys as a team (2026-10-24). */
.team-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.team-card{position:relative;overflow:hidden;background:var(--white,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease}
/* 2026-11-01: each card wears its monkey's colour: a top edge, the portrait's neon ring and the icon badge. */
.team-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc)}
.team-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(var(--acc-rgb),.75)}
.team-face{position:relative;display:inline-block;width:104px;height:104px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--acc),rgba(var(--acc-rgb),.25),var(--acc));box-shadow:0 12px 28px -12px rgba(var(--acc-rgb),.85)}
.team-face img{display:block;width:100%;height:100%;border-radius:50%;background:var(--ink-2)}
.team-badge{position:absolute;right:-6px;bottom:-4px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);box-shadow:0 0 0 3px #fff,0 0 14px rgba(var(--acc-rgb),.7)}
.team-badge .icon{width:20px;height:20px;color:var(--acc);stroke-width:2;filter:drop-shadow(0 0 4px rgba(var(--acc-rgb),.8))}
.team-role{margin:20px 0 4px;font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.team-card h3{font-size:1.45rem;margin:0 0 8px}
.team-card p:last-child{margin:0;color:var(--muted)}
.team-paths{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* Path pages (For your home / For your business): page hero with that side's framed art. */
.path-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.path-hero .lede{margin-bottom:28px}
.path-art{margin-bottom:0}
.path-art>div{height:320px}
.ticks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.06rem}
.ticks .icon{width:24px;height:24px;margin-top:2px;stroke-width:2.2}
.home-side .ticks .icon{color:var(--coral-text)}
.biz-side .ticks .icon{color:var(--teal);filter:drop-shadow(0 0 4px rgba(42,195,189,.5))}
.side .more{margin-top:auto;align-self:flex-start;font-family:var(--display);font-weight:700;font-size:1.12rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5em;padding-bottom:3px;border-bottom:3px solid}
.side .more .icon{transition:transform .15s ease}
.side .more:hover .icon{transform:translateX(4px)}
.home-side .more{color:var(--home-ink);border-color:var(--coral)}
.biz-side .more{color:var(--on-dark);border-color:var(--teal)}

/* ---------- service cards with line icons ---------- */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.svc{display:flex;gap:20px;align-items:flex-start;padding:26px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .2s ease,border-color .2s}
.svc:hover{transform:translateY(-3px);border-color:var(--teal-deep);box-shadow:0 16px 34px -22px rgba(11,111,105,.6)}
.svc h3{font-size:1.3rem;margin:4px 0 6px;color:var(--text)}
.svc p{margin:0;color:var(--muted);font-size:1rem}
.svc-icon{--acc:var(--teal);--acc-rgb:42,195,189;width:72px;height:72px;flex:none;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(var(--acc-rgb),.16),transparent 70%),var(--ink-2);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.35),0 10px 24px -14px rgba(var(--acc-rgb),.7)}
.svc-icon .icon{width:34px;height:34px;color:var(--acc);stroke-width:1.75;filter:drop-shadow(0 0 5px rgba(var(--acc-rgb),.65))}
.acc-teal{--acc:var(--teal);--acc-rgb:42,195,189}
.acc-gold{--acc:var(--gold);--acc-rgb:255,194,77}
.acc-coral{--acc:var(--coral);--acc-rgb:255,106,60}
.acc-magenta{--acc:var(--magenta);--acc-rgb:255,92,147}
.acc-violet{--acc:var(--violet);--acc-rgb:169,155,255}
.acc-lime{--acc:var(--lime);--acc-rgb:139,225,90}

/* ---------- steps ---------- */
.steps-band{position:relative;overflow:hidden;padding:96px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:52px 0 0;list-style:none;padding:0}
.step{background:var(--ink-3);border-radius:22px;padding:34px 30px}
.step .num{font-family:var(--display);font-weight:700;font-size:3.6rem;line-height:1;margin-bottom:14px;display:block}
.step:nth-child(1) .num{color:var(--teal);text-shadow:0 0 22px rgba(42,195,189,.6)}
.step:nth-child(2) .num{color:var(--gold);text-shadow:0 0 22px rgba(255,194,77,.55)}
.step:nth-child(3) .num{color:var(--coral);text-shadow:0 0 22px rgba(255,106,60,.55)}
.step h3{font-size:1.6rem;margin-bottom:8px}
.step p{color:var(--on-dark-muted);margin:0}

/* ---------- about ---------- */
.about .wrap{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.about-art{background:var(--ink);border-radius:28px;padding:48px 40px;display:grid;place-items:center;box-shadow:0 30px 60px -36px rgba(19,20,24,.6)}
.about-art img{width:100%;max-width:360px;height:auto;filter:drop-shadow(0 0 14px rgba(255,194,77,.45))}
.about-art p{margin:22px 0 0;color:var(--on-dark-muted);font-size:.95rem;text-align:center}
.about h2{font-size:clamp(2.1rem,3.6vw,3rem)}
.big{font-size:1.2rem}
.promises{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.promises li{padding-left:20px;border-left:3px solid var(--teal-deep)}
.promises b{display:block;font-family:var(--display);font-size:1.15rem}
.promises span{color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-wrap{padding-top:96px;padding-bottom:96px}
.cta-card{border-radius:32px;padding:64px;display:grid;grid-template-columns:auto 1fr auto;gap:44px;align-items:center;background:radial-gradient(120% 140% at 0% 0%,rgba(42,195,189,.22),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(255,92,147,.18),transparent 55%),var(--ink-2);box-shadow:0 0 0 1px rgba(42,195,189,.3),0 0 60px rgba(42,195,189,.18)}
.cta-card img{width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--ink),0 0 0 6px var(--teal),0 0 34px rgba(42,195,189,.6)}
.cta-card h2{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:.3em}
.cta-card p{color:var(--on-dark-muted);margin:0;font-size:1.12rem}
.cta-card p a{color:var(--teal);font-weight:600}

/* ---------- services page ---------- */
.svc-block .wrap{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
.svc-block .svc-icon{width:96px;height:96px;border-radius:24px}
.svc-block .svc-icon .icon{width:46px;height:46px}
.svc-block h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.svc-block .intro{margin-bottom:28px}
.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.svc-list li{display:flex;gap:12px;align-items:flex-start}
.svc-list .icon{width:22px;height:22px;margin-top:3px;color:var(--teal-deep);stroke-width:2.2}
.svc-block .btn{margin-top:28px}
.svc-nav{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.svc-nav a,.dark .svc-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(244,241,234,.25);color:var(--on-dark);text-decoration:none;font-weight:600;font-size:.95rem}
.svc-nav a:hover{border-color:var(--teal)}
.svc-nav .icon{width:18px;height:18px;color:var(--teal)}

/* ---------- prose ---------- */
.entry-content{max-width:46em}
.entry-content>*:first-child{margin-top:0}
.entry-content h2{font-size:2rem;margin-top:1.6em}
.entry-content h3{font-size:1.45rem;margin-top:1.4em}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{margin:1.5em 0;padding:4px 0 4px 20px;border-left:3px solid var(--teal-deep);color:var(--muted)}
.entry-content img{border-radius:14px}
.post-thumb{margin:0 0 2.5rem}
.post-thumb img{border-radius:18px}

/* ---------- cards (index, portfolio) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h2,.card h3{font-size:1.35rem;margin:0 0 .4em}
.card h2 a,.card h3 a{color:var(--text);text-decoration:none}
.card h2 a:hover,.card h3 a:hover{color:var(--teal-deep);text-decoration:underline}
.card p{color:var(--muted);margin:0}
.pagination,.nav-links{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.page-numbers{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--text);background:var(--card)}
.page-numbers.current{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}

/* ---------- portfolio ---------- */
.portfolio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.portfolio__card{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 40px -30px rgba(19,20,24,.4)}
.portfolio__image{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.portfolio__image img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.portfolio__info{padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px}
.portfolio__info h2{font-size:1.45rem;margin:0}
.portfolio__info p{margin:0;color:var(--muted)}
.portfolio__type{align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#E3F3F2;color:var(--teal-deep)}
.portfolio__type--live{background:var(--coral);color:var(--btn-ink)}
.portfolio__card--live{grid-column:1/-1;display:grid;grid-template-columns:7fr 5fr;box-shadow:0 0 0 1px rgba(42,195,189,.3),0 24px 60px -30px rgba(19,20,24,.55)}
.portfolio__card--live .portfolio__image{aspect-ratio:auto;padding:28px 28px 0;display:flex;align-items:flex-end;background:linear-gradient(120deg,#16302F,var(--ink-2))}
.portfolio__card--live .portfolio__image img{border-radius:12px 12px 0 0;height:auto;box-shadow:0 0 30px rgba(42,195,189,.2)}
.portfolio__card--live .portfolio__info{padding:40px 40px 40px;justify-content:center}
.portfolio__card--live h2{font-size:2rem}
.portfolio__links{margin-top:8px!important}
.portfolio__link{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;color:var(--text);text-decoration:none;border-bottom:3px solid var(--coral);padding-bottom:3px}
.portfolio__link:hover{color:var(--teal-deep)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:7fr 4fr;gap:40px;align-items:start}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:40px;box-shadow:0 18px 40px -30px rgba(19,20,24,.4)}
.form-card .entry-content{margin-bottom:28px}
.form-row{margin-bottom:22px}
.form-row label{display:block;font-weight:600;margin-bottom:8px;color:var(--text)}
.form-row .hint{display:block;font-weight:400;font-size:.92rem;color:var(--muted)}
.form-row input,.form-row select,.form-row textarea{width:100%;font:inherit;color:var(--text);background:var(--card);border:1.5px solid var(--field);border-radius:12px;padding:.75em .9em}
.form-row textarea{min-height:160px;resize:vertical}
.form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{outline:3px solid var(--teal-deep);outline-offset:1px;border-color:var(--teal-deep)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.notice{padding:16px 18px;border-radius:14px;margin:0 0 24px;font-weight:600}
.notice--ok{background:#E6F4EA;color:#1E5631;border:1px solid #9CCBA9}
.notice--err{background:#FDECEA;color:#8A1C12;border:1px solid #E7A59D}
.contact-aside{background:var(--ink-2);color:var(--on-dark);border-radius:24px;padding:34px 30px;box-shadow:0 0 0 1px rgba(42,195,189,.25),0 22px 50px -24px rgba(42,195,189,.35)}
.contact-aside h2{font-size:1.5rem;color:var(--on-dark);margin-bottom:20px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .icon{width:24px;height:24px;color:var(--teal);margin-top:2px;filter:drop-shadow(0 0 4px rgba(42,195,189,.5))}
.contact-list strong{display:block;font-family:var(--display);color:var(--on-dark)}
.contact-list span{color:var(--on-dark-muted)}
.contact-list a{color:var(--teal);font-weight:600;word-break:break-word}
.thankyou{padding:88px 0 104px;position:relative;overflow:hidden}
.thankyou .wrap{max-width:860px;text-align:center;position:relative;z-index:1}
.thankyou .frame{margin:0 auto 44px;max-width:720px}
.thankyou h1{font-size:clamp(2.5rem,5vw,4rem)}
.thankyou .lede{font-size:1.25rem;color:var(--on-dark-muted)}
.thankyou .sub{color:var(--on-dark-muted)}
.thankyou .cta-row{justify-content:center;margin-top:32px}
.yt-link{display:inline-flex;align-items:center;gap:10px;color:var(--on-dark);font-weight:600;text-decoration:none}
.dark a.yt-link{color:var(--on-dark)}
.yt-link:hover span{text-decoration:underline}

/* ---------- 404 ---------- */
.notfound .cta-row{margin-top:32px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-4);color:var(--on-dark-muted);padding:56px 0 40px;font-size:.98rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.site-footer h2{font-size:1rem;color:var(--on-dark);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--on-dark-muted);text-decoration:none}
.site-footer a:hover{color:var(--on-dark);text-decoration:underline}
.site-footer .brand{margin-bottom:14px}
.site-footer .brand img{width:80px}
.site-footer .yt-link{color:var(--on-dark-muted)}
.footer-widget{margin-top:18px}
.footer-bottom{border-top:1px solid #2A2D35;padding-top:22px;margin-top:40px;font-size:.9rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- WordPress core classes ---------- */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text,.wp-element-caption{font-size:.9rem;color:var(--muted)}
.sticky{}
.bypostauthor{}
.gallery-caption{}

/* ---------- business showcase: bento grid of neon-graded photos (2026-10-24) ----------
   Captions sit on a bottom gradient that is at least rgba(13,14,17,.82) under
   the text. Worst case (pure white photo behind it) = #39393C, by script:
     #F4F1EA on #39393C  10.20:1  body  PASS  Caption label
     #B9BCC4 on #39393C   6.06:1  body  PASS  Caption line
   ------------------------------------------------------------------------- */
.biz-showcase{position:relative;overflow:hidden}
.biz-showcase::before{content:"";position:absolute;width:640px;height:640px;right:-220px;top:-260px;border-radius:50%;filter:blur(90px);opacity:.5;background:radial-gradient(circle,rgba(169,155,255,.45),transparent 70%);pointer-events:none}
.biz-showcase .wrap{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;grid-auto-flow:dense;gap:18px;margin-top:48px}
.bento-tile{position:relative;display:block;overflow:hidden;border-radius:22px;background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(244,241,234,.08);text-decoration:none;isolation:isolate}
.bento-feature{grid-column:span 2;grid-row:span 2}
.bento-tall{grid-row:span 2}
.bento-wide{grid-column:span 2}
.bento-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .4s ease;z-index:-2}
.bento-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(13,14,17,.9) 0%,rgba(13,14,17,.82) 26%,rgba(13,14,17,0) 62%)}
.bento-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s ease;pointer-events:none}
.bento-tile:hover img,.bento-tile:focus-visible img{transform:scale(1.05)}
.bento-tile:hover::after,.bento-tile:focus-visible::after{box-shadow:inset 0 0 0 2px var(--teal),0 0 30px rgba(42,195,189,.35)}
.bento-cap{position:absolute;left:22px;right:22px;bottom:18px;display:flex;flex-direction:column;gap:2px}
.bento-cap b{font-family:var(--display);font-size:1.25rem;color:var(--on-dark);letter-spacing:-.01em}
.bento-cap span{color:var(--on-dark-muted);font-size:.95rem;line-height:1.4}
.bento-feature .bento-cap b{font-size:1.7rem}

/* ---------- warm tone: the For your home page (2026-10-24) ----------
   Steve: "like the original warm theme". v1's cream/brown palette (COMPANY.md),
   on this page only: sections carry class "warm" instead of "dark", and the
   body gets "tone-warm" (functions.php) for the shared service blocks.
   Contrast measured by script 2026-10-24, 33 pairs, 0 fail:
     #3B281E on #F6E6C3  11.29:1  body  Lede/body on warm bg
     #673D22 on #F6E6C3   7.51:1  large h1/h2 on warm bg
     #A9370F on #F6E6C3   5.25:1  body  Eyebrow/kicker on warm bg
     #3B281E on #F5D7A1  10.02:1  body  Lede over gold glow (worst case)
     #A9370F on #F5D7A1   4.67:1  body  Eyebrow over gold glow (worst case)
     #673D22 on #F5CCA8   6.21:1  large h1 over coral glow (worst case)
     #FDF8EC on #673D22   8.74:1  body  Button text on brown button
     #3B281E on #FDF8EC  13.14:1  body  Body text on cream
     #673D22 on #FDF8EC   8.74:1  large Headings on cream
     #6B4A33 on #FDF8EC   7.47:1  body  Muted intro on cream
     #6B4A33 on #F6E6C3   6.42:1  body  Muted intro on warm bg
     #A9370F on #FDF8EC   6.11:1  body  Kicker/ticks on cream
     #FF6A3C on #3B281E   4.89:1  ui    Icon coral on brown tile
     #2AC3BD on #3B281E   6.39:1  ui    Icon teal on brown tile
     #FFC24D on #3B281E   8.67:1  ui    Icon gold on brown tile
     #3B281E on #FDF8EC  13.14:1  ui    Brown tile edge on cream
     #3B281E on #F6E6C3  11.29:1  ui    Brown tile edge on warm bg
     #673D22 on #DEC196   5.37:1  large Steps h2 on sand band
     #673D22 on #DEC196   5.37:1  body  Steps kicker on sand (coral-text was 3.76 FAIL)
     #3B281E on #FDF8EC  13.14:1  body  Step text on cream card
     #A9370F on #FDF8EC   6.11:1  large Step 1 number
     #0C7A73 on #FDF8EC   4.90:1  large Step 2 number
     #673D22 on #FDF8EC   8.74:1  large Step 3 number
     #A9370F on #FBE7C5   5.35:1  body  CTA link over gold tint (worst case)
     #3B281E on #FBE7C5  11.50:1  body  CTA text over gold tint (worst case)
     #A9370F on #FBE1D1   5.18:1  body  CTA link over coral tint (worst case)
     #673D22 on #FBE1D1   7.41:1  large CTA heading over coral tint (worst case)
     #0B6F69 on #F6E6C3   4.88:1  ui    Focus ring on warm bg
     #0B6F69 on #FDF8EC   5.67:1  ui    Focus ring on cream
     #0B6F69 on #DEC196   3.49:1  ui    Focus ring on sand
   ------------------------------------------------------------------------- */
:root{--w-bg:#F6E6C3;--w-cream:#FDF8EC;--w-sand:#DEC196;--w-ink:#3B281E;--w-primary:#673D22;--w-muted:#6B4A33;--teal-text:#0C7A73}
.warm{background:var(--w-bg);color:var(--w-ink)}
.warm h1,.warm h2,.warm h3{color:var(--w-primary)}
.warm a{color:var(--coral-text)}
.warm .eyebrow{color:var(--coral-text)}
.warm .eyebrow::before{background:var(--coral);box-shadow:none}
.page-hero.warm::before{background:radial-gradient(circle,rgba(242,169,59,.45),transparent 70%)}
.page-hero.warm::after{background:radial-gradient(circle,rgba(240,85,44,.3),transparent 70%)}
.page-hero.warm .lede{color:var(--w-ink)}
.warm .btn-primary,.warm a.btn-primary{background:var(--w-primary);color:var(--w-cream);box-shadow:0 8px 24px -10px rgba(103,61,34,.6)}
.warm .btn-primary:hover{box-shadow:0 10px 28px -8px rgba(103,61,34,.7)}
.warm :focus-visible{outline-color:var(--teal-deep)}
.tone-warm .section.light{background:var(--w-cream)}
.tone-warm .section.white{background:var(--w-bg)}
.tone-warm .svc-block{color:var(--w-ink)}
.tone-warm .svc-block h2{color:var(--w-primary)}
.tone-warm .svc-block .intro{color:var(--w-muted)}
.tone-warm .svc-icon{background:var(--w-ink);box-shadow:0 10px 24px -14px rgba(59,40,30,.8)}
.tone-warm .svc-icon .icon{filter:none}
.tone-warm .acc-violet{--acc:var(--gold);--acc-rgb:255,194,77}
.tone-warm .svc-list .icon{color:var(--coral-text)}
.tone-warm .svc-block .btn-dark{background:var(--w-primary);color:var(--w-cream)}
.steps-band.warm{background:var(--w-sand)}
.steps-band.warm .kicker{color:var(--w-primary)}
.warm .step{background:var(--w-cream)}
.warm .step p{color:var(--w-ink)}
.warm .step:nth-child(1) .num{color:var(--coral-text);text-shadow:none}
.warm .step:nth-child(2) .num{color:var(--teal-text);text-shadow:none}
.warm .step:nth-child(3) .num{color:var(--w-primary);text-shadow:none}
.cta-band.warm .cta-card{background:radial-gradient(120% 140% at 0% 0%,rgba(242,169,59,.22),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(240,85,44,.14),transparent 55%),var(--w-cream);box-shadow:0 0 0 1px rgba(169,55,15,.25),0 24px 60px -30px rgba(103,61,34,.5)}
.cta-band.warm .cta-card img{box-shadow:0 0 0 4px var(--w-cream),0 0 0 6px var(--coral)}
.cta-band.warm .cta-card p{color:var(--w-ink)}
.cta-band.warm .cta-card p a{color:var(--coral-text)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sides{gap:110px}
}
@media (max-width:1020px){
  .hero .wrap{grid-template-columns:1fr;gap:56px}
  .artwork{margin:0}
  .grid6,.cards,.portfolio__grid{grid-template-columns:1fr 1fr}
  .about .wrap{grid-template-columns:1fr;gap:40px}
  .cta-card{grid-template-columns:1fr;text-align:center;justify-items:center;padding:48px 32px}
  .portfolio__card--live{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .js .nav-toggle{display:inline-flex}
  .js .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink-3);padding:12px 24px 20px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
  .js .main-nav.is-open{display:block}
  .js .main-nav ul{flex-direction:column;gap:0}
  .js .main-nav a{display:block;padding:14px 0;color:var(--on-dark);font-size:1.05rem;border-bottom:1px solid rgba(244,241,234,.1)}
  .js .main-nav li:last-child a{border-bottom:0}
  .no-js .header-inner{flex-wrap:wrap}
  .no-js .header-actions{display:contents}
  .no-js .main-nav{order:3;width:100%}
  .no-js .main-nav ul{flex-wrap:wrap;gap:4px 22px}
  .header-actions{gap:12px}
}
@media (max-width:820px){
  .split{padding:56px 0 0}
  .split::before{display:none}
  .split::after{width:100%}   /* stacked: the kitchen sits behind the home half at the top */
  .welcome{margin-bottom:48px}
  .sides{grid-template-columns:1fr;gap:0}
  .side{padding:8px 0 56px}
  .biz-side{position:relative;padding-top:96px}
  .biz-side::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-24px;right:-24px;background:radial-gradient(70% 40% at 80% 45%,rgba(42,195,189,.2),transparent 70%),linear-gradient(rgba(19,20,24,.52),rgba(19,20,24,.52)),url("assets/images/brick-dark.webp") 0 0/348px 144px;clip-path:polygon(0 48px,100% 0,100% 100%,0 100%)}
  .steps,.team-grid,.path-hero .wrap{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:190px}
  .bento-feature{grid-column:span 2}
  .path-art>div{height:220px}
  .svc-block .wrap{grid-template-columns:1fr;gap:20px}
  .svc-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:1rem}
  .wrap{padding:0 18px}
  .brand img{width:60px}
  .brand__text{font-size:1.05rem}
  .header-cta.btn{padding:.55em .9em;font-size:.88rem}
  .nav-toggle{padding:.45em .7em}
  .nav-toggle .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .hero{padding:36px 0 72px}
  .hero .lede{font-size:1.1rem}
  .page-hero{padding:48px 0 56px}
  .section{padding:72px 0}
  .welcome{padding:32px 22px 28px;border-radius:22px}
  .biz-side::before{left:-18px;right:-18px}
  .home-art>div,.biz-art>div{height:170px}
  .grid6,.cards,.portfolio__grid{grid-template-columns:1fr}
  .svc{padding:22px 18px}
  .svc-icon{width:60px;height:60px;border-radius:16px}
  .svc-icon .icon{width:28px;height:28px}
  .cta-wrap{padding-top:64px;padding-bottom:64px}
  .cta-card{padding:40px 22px}
  .artwork figcaption{left:12px;right:12px;text-align:center}
  .form-card{padding:26px 20px}
  .portfolio__card--live .portfolio__info{padding:26px}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .header-inner{gap:10px}
  .brand{gap:6px}
  .brand img{width:40px}
  .brand__text{font-size:.9rem}
  .header-actions{gap:8px}
  .header-cta.btn{padding:.5em .75em;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover,.svc:hover,.btn-primary:hover{transform:none}
  .bento-tile:hover img,.bento-tile:focus-visible img{transform:none}
}