:root {
  --brand: #c2701c;
  --brand-dark: #8f4f12;
  --ink-on-brand: #ffffff;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;   
  --fg: #161a22;          
  --muted-fg: #59616e;
  --bg: #fcfcfd;          
  --soft: #f3f5f9;
  --line: #e7eaf0;
  --maxw: 64rem;
  --measure: 66ch;        
  --radius: 16px;
  
  --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4rem; --s8: 6rem;
  --shadow: 0 1px 2px rgba(20,26,40,.04), 0 12px 28px rgba(20,26,40,.06);
  --shadow-lg: 0 24px 60px rgba(20,26,40,.13);
}
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.75rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; font-family: 'Inter', var(--font); color: var(--fg); background: var(--bg);
  font-size: 1.05rem; line-height: 1.65; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, .brand, .foot-brand { font-family: var(--font-head); }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.025em; margin: 0 0 .6rem; }
h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.45rem); font-weight: 800; margin-bottom: 1.1rem; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1.1rem; }
a { color: var(--brand-dark); }
img { max-width: 100%; height: auto; display: block; }
.badges:empty, .ticks:empty { display: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.75rem, 5.5vw, 4.5rem) 1.5rem; }
.wrap.narrow { max-width: 46rem; }

.about p, .hero-text .lede, .person-bio { max-width: var(--measure); }

.band { background: linear-gradient(180deg, var(--soft), color-mix(in srgb, var(--brand) 5%, var(--soft))); border-block: 1px solid var(--line); }
.band:nth-of-type(even) { background: radial-gradient(900px 380px at 85% -10%, color-mix(in srgb, var(--brand) 9%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--bg)), var(--soft)); }
.muted { color: var(--muted-fg); }
.section-sub { color: var(--muted-fg); font-size: 1.16rem; line-height: 1.55; max-width: 46rem; margin: 0 0 var(--s5); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 100; box-shadow: var(--shadow); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.preview-banner { background: #1d2330; color: #fdf3e6; text-align: center; font-size: .86rem; line-height: 1.4;
  padding: .55rem 1rem; font-weight: 600; letter-spacing: .01em; border-bottom: 2px solid var(--brand); }


.cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.2;
  background: var(--brand-dark); color: var(--ink-on-brand);
  padding: .8rem 1.6rem; border-radius: 999px; text-decoration: none; font-weight: 700;
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); background: var(--brand); }
.cta-sm { padding: .55rem 1.1rem; font-size: .95rem; }
.cta-ghost { background: transparent; color: var(--brand-dark); box-shadow: inset 0 0 0 2px var(--brand); }
.cta-ghost:hover { background: var(--brand); color: var(--ink-on-brand); }
.cta-invert { background: #fff; color: var(--brand-dark); }
.link { color: var(--brand-dark); font-weight: 600; text-decoration: none; align-self: center; }


.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.25rem; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; text-decoration: none; color: var(--fg); }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; color: var(--fg); white-space: nowrap; }

.theme-calm .brand-logo { height: 40px; background: var(--brand-dark); border-radius: 12px; padding: 7px 11px; box-sizing: content-box; box-shadow: 0 2px 10px rgba(54,71,59,.28); }
.theme-calm .brand-name { color: var(--brand-dark); }
.site-header nav { display: flex; align-items: center; gap: 1.4rem; }
.site-header nav a { text-decoration: none; color: var(--fg); font-weight: 600; font-size: .98rem; }
.site-header nav a:hover { color: var(--brand-dark); }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; background: none; border: 0; padding: .4rem; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--fg); border-radius: 2px; }
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-header nav {
    position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: .5rem 1rem 1rem;
    box-shadow: var(--shadow); display: none;
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: .7rem .2rem; border-bottom: 1px solid var(--line); }
  .site-header nav a.cta-sm { margin-top: .6rem; text-align: center; border: 0; }
}


.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent),
    linear-gradient(180deg, var(--soft), var(--bg));
  text-align: center;
}
.hero-inner { max-width: 52rem; margin: 0 auto; padding: clamp(3.5rem, 9vw, 6.5rem) 1.25rem clamp(2.5rem, 6vw, 4rem); }

.hero-photo { background-image: linear-gradient(180deg, rgba(8,10,16,.46), rgba(8,10,16,.58) 55%, rgba(8,10,16,.74)), var(--hero-img); background-size: cover; background-position: center; }
.hero-photo h1, .hero-photo .kicker, .hero-photo .hero-note { color: #fff; }
.hero-photo .lede { color: rgba(255,255,255,.93); }
.hero-photo .badges li { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; }
.hero-photo .cta-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.hero-photo .cta-ghost:hover { background: #fff; color: var(--brand-dark); }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; color: var(--brand-dark); margin: 0 0 .8rem; }
.hero .lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted-fg); max-width: 40rem; margin: .5rem auto 1.8rem; }
.hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin: 1.2rem 0 0; font-weight: 600; color: var(--fg); }
.badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .7rem; padding: 0; margin: 1.6rem 0 0; }
.badges li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .9rem; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); }



.hero-split { text-align: left; background: linear-gradient(180deg, var(--soft), var(--bg)); }
.hero-split-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) 1.25rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .hero-split-inner { grid-template-columns: 1.1fr .9fr; } }
.hero-split .hero-cta { justify-content: flex-start; }
.hero-split .lede { margin-left: 0; margin-right: 0; }
.hero-split .badges { justify-content: flex-start; }
.hero-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

.hero-text { text-align: left; background: radial-gradient(820px 340px at 88% -25%, color-mix(in srgb, var(--brand) 18%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--brand) 11%, var(--bg)), var(--bg)); border-bottom: 1px solid var(--line); }
.hero-text-inner { max-width: 54rem; margin: 0; padding: clamp(3.5rem, 9vw, 6rem) 1.25rem clamp(2.5rem, 6vw, 4rem); }
.hero-text .hero-cta, .hero-text .badges { justify-content: flex-start; }
.hero-text .lede { margin-left: 0; }
.hero-text h1 { max-width: 18ch; }

.hero-minimal .hero-inner { padding-block: clamp(4.5rem, 12vw, 8rem); max-width: 40rem; }


.brand-logo { height: 34px; width: auto; display: block; }


.menu-section .menu-group { margin: 0 0 2.2rem; }
.menu-group-name { color: var(--brand-dark); border-bottom: 2px solid color-mix(in srgb, var(--brand) 30%, var(--line)); padding-bottom: .4rem; margin-bottom: .9rem; }
.menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.menu-item-head { display: flex; align-items: baseline; gap: .5rem; }
.menu-item-name { font-weight: 700; }
.menu-item-dots { flex: 1; border-bottom: 1.5px dotted var(--line); transform: translateY(-.2rem); }
.menu-item-price { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.menu-item-desc { color: var(--muted-fg); margin: .2rem 0 0; font-size: .97rem; }
.menu-cta { margin-top: 1.5rem; }


.layout-airy .wrap { padding-block: clamp(4rem, 10vw, 7rem); }
.layout-airy .cards { gap: 2rem; }
.layout-compact .wrap { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.layout-compact .cards { gap: 1rem; }




@media (min-width: 900px) {
  .layout-editorial #features { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .layout-editorial #features > h2 { grid-column: 1; grid-row: 1; margin: 0; }
  .layout-editorial #features > .section-sub { grid-column: 1; grid-row: 2; align-self: start; margin: 1rem 0 0; }
  .layout-editorial #features > .flist { grid-column: 2; grid-row: 1 / span 4; grid-template-columns: 1fr; margin-top: 0; }
  .layout-editorial #features > .flist .flist-item:first-child { border-top: 0; padding-top: 0; }
  
  .layout-editorial #features.features-section { display: block; }
}


.theme-dark {
  --bg: #0b1220; --soft: #111d33; --fg: #e6edf8; --muted-fg: #9db0ca; --line: #24324c;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 55px rgba(0,0,0,.6);
}
.theme-dark .site-header { background: rgba(11,18,32,.82); border-bottom-color: var(--line); }
.theme-dark .brand, .theme-dark .site-header nav a { color: var(--fg); }
.theme-dark .card, .theme-dark .badges li, .theme-dark .quote,
.theme-dark details, .theme-dark .steps li { background: var(--soft); border-color: var(--line); }
.theme-dark .hero-text { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, var(--bg)), var(--bg)); }
.theme-dark .band { background: var(--soft); }
.theme-dark .flist-icon, .theme-bold .flist-icon { stroke: color-mix(in srgb, var(--brand) 72%, #fff); background: color-mix(in srgb, var(--brand) 24%, transparent); }
.theme-dark .map iframe { filter: invert(.92) hue-rotate(180deg); } 


.theme-bold {
  --bg: #15100d; --soft: #201711; --fg: #f6efe8; --muted-fg: #c3b3a6; --line: #3a2a20;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.55);
  --shadow-lg: 0 22px 56px rgba(0,0,0,.65);
}
.theme-bold .site-header { background: rgba(21,16,13,.9); border-bottom-color: var(--line); }
.theme-bold .brand, .theme-bold .site-header nav a { color: var(--fg); }
.theme-bold h1, .theme-bold h2 { text-transform: uppercase; letter-spacing: .01em; }
.theme-bold .band { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, transparent), color-mix(in srgb, #000 20%, transparent)); }
.theme-bold .card, .theme-bold .quote, .theme-bold details, .theme-bold .menu-group,
.theme-bold .badges li { background: var(--soft); border-color: var(--line); }
.theme-bold .flist-item, .theme-bold .menu-item-dots { border-color: var(--line); }
.theme-bold .gal-item, .theme-bold .feature-media img { box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.theme-bold .map iframe { filter: invert(.92) hue-rotate(180deg); }


body.theme-dark {
  background-image:
    radial-gradient(1100px 560px at 82% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent),
    radial-gradient(820px 520px at 0% 104%, color-mix(in srgb, var(--brand) 7%, transparent), transparent);
  background-attachment: fixed;
}
body.theme-bold {
  background-image:
    radial-gradient(1150px 540px at 78% -8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent),
    radial-gradient(900px 600px at 6% 108%, rgba(0, 0, 0, .30), transparent);
  background-attachment: fixed;
}


body.page-grad {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 820px at 5% 0%,    color-mix(in srgb, var(--brand) 24%, transparent), transparent 52%),
    radial-gradient(1000px 820px at 98% 22%,  color-mix(in srgb, var(--brand) 16%, transparent), transparent 50%),
    radial-gradient(1100px 900px at 0% 58%,   color-mix(in srgb, var(--brand) 14%, transparent), transparent 52%),
    radial-gradient(1000px 880px at 100% 88%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, var(--bg)), var(--bg));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
}

body.page-grad section,
body.page-grad .band,
body.page-grad .cta-band { background: transparent !important; border-block-color: transparent !important; }

body.page-grad section.hero-photo {
  background: linear-gradient(180deg, rgba(10,26,32,.34), rgba(10,26,32,.46) 55%, rgba(10,26,32,.6)),
    var(--hero-img) !important;
  background-size: cover !important;
  background-position: center !important;
}

body.page-grad .cta-band h2, body.page-grad .cta-band p,
body.page-grad .sandbox-section h2 { color: var(--fg); }
body.page-grad .sandbox-section .section-sub,
body.page-grad .sandbox-caption,
body.page-grad .sandbox-editnote { color: var(--muted-fg); }


body.grad-sky {
  background-color: #eef4fb;
  background-image:
    radial-gradient(1150px 900px at 4% 0%,   rgba(56,189,248,.30) 0%, transparent 54%),    
    radial-gradient(1050px 860px at 99% 16%, rgba(17,181,203,.26) 0%, transparent 52%),    
    radial-gradient(1200px 980px at 96% 48%, rgba(129,140,248,.26) 0%, transparent 54%),   
    radial-gradient(1100px 920px at 0% 62%,  rgba(34,211,238,.24) 0%, transparent 52%),    
    radial-gradient(1050px 900px at 72% 95%, rgba(99,102,241,.26) 0%, transparent 54%),    
    linear-gradient(170deg, #e6f0fd 0%, #edf4fc 32%, #e5eefb 64%, #ecf2fb 100%);
}


@media (min-width: 820px) {
  
  .layout-edge .menu-board { columns: 2; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .layout-edge .menu-board > .menu-group { break-inside: avoid; -webkit-column-break-inside: avoid; }
}
.layout-edge .menu-list { gap: 1.1rem; }                       
.layout-edge .menu-item { padding-block: 0; }
.layout-edge .menu-group { margin: 0 0 2.4rem; }
.layout-edge .menu-group-name { font-family: var(--heading-font, inherit); font-size: 1.35rem; letter-spacing: .02em; }
.layout-edge .section-sub { max-width: 60rem; }

.theme-bold.layout-edge {
  background-image:
    radial-gradient(1150px 540px at 78% -6%, color-mix(in srgb, var(--brand) 17%, transparent), transparent),
    radial-gradient(1000px 760px at 10% 48%, color-mix(in srgb, var(--brand) 10%, transparent), transparent),
    radial-gradient(950px 680px at 95% 98%, rgba(0, 0, 0, .34), transparent),
    
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 10%, var(--bg)) 0%,
      var(--bg) 26%,
      color-mix(in srgb, #000 24%, var(--bg)) 58%,
      color-mix(in srgb, var(--brand) 9%, var(--bg)) 84%,
      color-mix(in srgb, #000 18%, var(--bg)) 100%);
  background-attachment: fixed, fixed, fixed, scroll;
  background-size: auto, auto, auto, 100% 100%;
  background-repeat: no-repeat;
}
.theme-bold .wrap:nth-of-type(even) { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent), color-mix(in srgb, #000 14%, transparent)); }


@media (min-width: 1280px) {
  .rk-rails::before, .rk-rails::after {
    content: ""; position: fixed; top: 0; bottom: 0; z-index: 0; pointer-events: none;
    width: clamp(190px, calc((100vw - 58rem) / 2), 360px);   
    background-size: cover; background-position: center; opacity: .68;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 90%, transparent 100%);
  }
  .rk-rails::before { left: 0; background-image: url("assets/real-hero-chicken.jpg"); }
  .rk-rails::after { right: 0; background-image: url("assets/real-platters.jpg"); }
  .rk-rails .site-header, .rk-rails main, .rk-rails .site-footer { position: relative; z-index: 1; }
}


.order-app { margin-top: var(--s4); }
.oa-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .oa-grid { grid-template-columns: 1.55fr 1fr; } .oa-cart { position: sticky; top: 90px; } }
.oa-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.oa-cat { font: inherit; font-weight: 700; cursor: pointer; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); }
.oa-cat.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink, #fff); }
.oa-cat-h { margin: 0 0 .8rem; }
.oa-items { display: grid; gap: .8rem; }
.oa-item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); transition: border-color .12s, transform .12s; }
.oa-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.oa-item-main { display: grid; gap: .2rem; }
.oa-item-name { font-weight: 700; }
.oa-item-desc { color: var(--muted-fg); font-size: .92rem; }
.oa-item-price { font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.theme-bold .oa-item-price, .theme-dark .oa-item-price { color: color-mix(in srgb, var(--brand) 70%, #fff); }

.oa-cart { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.5vw, 1.6rem); box-shadow: var(--shadow); }
.oa-cart h3 { margin: 0 0 1rem; }
.oa-empty { color: var(--muted-fg); margin: 0; }
.oa-line { padding: .8rem 0; border-top: 1px solid var(--line); }
.oa-line:first-child { border-top: 0; }
.oa-line-top { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
.oa-line-opts { color: var(--muted-fg); font-size: .85rem; margin-top: .25rem; }
.oa-rm { font: inherit; font-size: .82rem; color: var(--brand-dark); background: none; border: 0; padding: .2rem 0; cursor: pointer; text-decoration: underline; }
.theme-bold .oa-rm, .theme-dark .oa-rm { color: color-mix(in srgb, var(--brand) 72%, #fff); }
.oa-tot { margin-top: .6rem; border-top: 2px solid var(--line); padding-top: .8rem; }
.oa-tot-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted-fg); margin: .3rem 0; }
.oa-tot-total { color: var(--fg); font-weight: 800; font-size: 1.15rem; }
.oa-checkout { width: 100%; margin-top: 1rem; }
.oa-checkout:disabled { opacity: .5; cursor: not-allowed; }
.oa-note { color: var(--muted-fg); font-size: .82rem; margin: .8rem 0 0; }
.oa-confirm { font-size: .9rem; margin: .8rem 0 0; }

.oa-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.55); }
.oa-modal[hidden] { display: none; }
.oa-modal-card { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(30rem, 100%); max-height: 90vh; overflow: auto; padding: clamp(1.3rem, 3vw, 1.8rem); position: relative; }
.oa-x { position: absolute; top: .6rem; right: .8rem; font-size: 1.6rem; line-height: 1; background: none; border: 0; color: var(--muted-fg); cursor: pointer; }
.oa-m-desc { color: var(--muted-fg); margin: .2rem 0 1rem; }
.oa-opts { display: grid; gap: 1rem; margin: 1rem 0; }
.oa-optgroup { display: grid; gap: .4rem; }
.oa-optgroup label { font-weight: 700; font-size: .92rem; }
.oa-opt { font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--fg); }
.oa-m-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.oa-qty { display: inline-flex; align-items: center; gap: .9rem; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .6rem; }
.oa-q { font: inherit; font-size: 1.2rem; line-height: 1; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 0; background: var(--soft); color: var(--fg); cursor: pointer; }
.oa-q-n { min-width: 1.2rem; text-align: center; font-weight: 700; }


.conditions { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; padding: 0; margin: var(--s4) 0 0; }
.condition { padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); font-weight: 600; font-size: .98rem; }
.theme-calm .condition { background: color-mix(in srgb, var(--brand) 8%, var(--bg)); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }


.assessment-app { margin-top: var(--s4); }
.wa-card { max-width: 44rem; margin: 0 auto; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.theme-calm .wa-card { background: color-mix(in srgb, var(--brand) 6%, #fff); }
.wa-progress { height: 6px; background: color-mix(in srgb, var(--brand) 14%, var(--bg)); }
.wa-bar { display: block; height: 100%; width: 0; background: var(--brand); transition: width .35s ease; }
.wa-body { padding: clamp(1.5rem, 4vw, 2.4rem); }
.wa-step { color: var(--muted-fg); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; }
.wa-q { margin: 0 0 1.3rem; font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.wa-opts { display: grid; gap: .65rem; }
.wa-opt { font: inherit; text-align: left; cursor: pointer; padding: .85rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); transition: border-color .12s, background .12s; }
.wa-opt:hover { border-color: var(--brand); }
.wa-opt.is-sel { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bg)); font-weight: 600; }
.wa-nav { margin-top: 1.2rem; min-height: 1.5rem; }
.wa-back { font: inherit; background: none; border: 0; color: var(--brand-dark); cursor: pointer; padding: 0; }
.wa-result-msg { font-size: 1.08rem; line-height: 1.6; }
.wa-crisis { background: color-mix(in srgb, var(--brand) 10%, #fff); border-left: 3px solid var(--brand); padding: .8rem 1rem; border-radius: 8px; font-size: .95rem; }
.wa-result-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.4rem 0 .5rem; }
.wa-restart { font: inherit; background: none; border: 0; color: var(--brand-dark); cursor: pointer; text-decoration: underline; }
.wa-disclaimer { color: var(--muted-fg); font-size: .82rem; margin: 1rem 0 0; }


.theme-playful { --radius: 22px; }
.theme-playful .band { background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 14%, var(--bg)), color-mix(in srgb, var(--brand) 4%, var(--bg))); border-block-color: color-mix(in srgb, var(--brand) 20%, var(--line)); }
.theme-playful .card { border-radius: 22px; }
.theme-playful .hero-text { background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 18%, var(--bg)), var(--bg)); }
.theme-playful .cta { transform: none; }
.theme-playful .badges li { background: color-mix(in srgb, var(--brand) 10%, #fff); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }


.theme-calm {
  --bg: #fbf9f4; --soft: #f2eee4; --fg: #2c2a24; --muted-fg: #6b6557; --line: #e7e1d3; --radius: 20px;
  --shadow: 0 1px 2px rgba(60,50,30,.04), 0 16px 36px rgba(60,50,30,.06);
  --shadow-lg: 0 24px 56px rgba(60,50,30,.12);
}

.theme-calm .band { background: transparent; border-block: 0; }
.theme-calm .card { background: #fffdf9; }
.theme-calm .hero-split { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--bg)), transparent); }

.theme-calm .hero-panel {
  width: 100%; aspect-ratio: 5 / 6; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  background:
    url("assets/logo.png") center / 48% no-repeat,
    radial-gradient(580px 470px at 18% 14%, color-mix(in srgb, #8fcdc2 58%, transparent), transparent 60%),
    radial-gradient(580px 490px at 88% 90%, color-mix(in srgb, #f1c994 48%, transparent), transparent 60%),
    linear-gradient(150deg, var(--brand), var(--brand-dark));   
}
.theme-calm h1, .theme-calm h2, .theme-calm h3 { letter-spacing: -.012em; }


.theme-calm .hero-photo { min-height: 84vh; display: flex; align-items: center;
  background-image: linear-gradient(180deg, rgba(36,48,40,.18) 0%, rgba(36,48,40,.30) 50%, rgba(28,38,31,.60) 100%), var(--hero-img); }
.theme-calm .hero-photo .hero-inner { background: rgba(34,46,38,.42); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; padding: clamp(1.8rem, 4vw, 2.9rem); box-shadow: 0 30px 72px rgba(18,26,20,.42); max-width: 44rem; backdrop-filter: blur(7px) saturate(1.1); }
.theme-calm .hero-photo h1, .theme-calm .hero-photo .kicker, .theme-calm .hero-photo .hero-note { color: #fff; }
.theme-calm .hero-photo .lede { color: rgba(255,255,255,.94); }
.theme-calm .hero-photo .badges li { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; }
.theme-calm .hero-photo .cta { background: #fff; color: var(--brand-dark); }
.theme-calm .hero-photo .cta:hover { background: #f2eee3; }
.theme-calm .hero-photo .cta-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); }
.theme-calm .hero-photo .cta-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }




.theme-calm .hero-text { text-align: center; border-bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--bg)), transparent); }
.theme-calm .hero-text-inner { max-width: 50rem; margin: clamp(2rem, 5vw, 3.5rem) auto; text-align: center;
  padding: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem); border-radius: 28px;
  background:
    radial-gradient(640px 400px at 14% 0%,   color-mix(in srgb, #8fcdc2 62%, #fff), transparent 62%),
    radial-gradient(640px 400px at 90% 100%, color-mix(in srgb, #f1c994 60%, #fff), transparent 60%),
    linear-gradient(152deg, color-mix(in srgb, var(--brand) 17%, #fff), color-mix(in srgb, #bfded2 50%, #fff) 54%, color-mix(in srgb, var(--brand) 14%, #fff));
  box-shadow: 0 24px 60px rgba(54,71,59,.16); }
.theme-calm .hero-text h1 { max-width: none; }
.theme-calm .hero-text .lede { margin-inline: auto; }
.theme-calm .hero-text .hero-cta, .theme-calm .hero-text .badges { justify-content: center; }

.theme-calm .wrap, .theme-calm .band { background: transparent; border-block: 0; }

.theme-calm .about-photo { border-radius: 50%; aspect-ratio: 1; object-fit: cover; max-width: 300px; margin-inline: auto; box-shadow: 0 18px 44px rgba(54,71,59,.24); }
.theme-calm .about-side { justify-items: center; text-align: center; }


body.theme-calm { --maxw: 56rem; }   


.theme-calm {
  background-color: #e9eee0;
  background-image:
    radial-gradient(1000px 820px at 8% 2%,    #a6d6cf 0%, rgba(166,214,207,0) 48%),   
    radial-gradient(980px 800px at 96% 12%,    #f1cb98 0%, rgba(241,203,152,0) 46%),   
    radial-gradient(1300px 1000px at 88% 44%,  #a8c489 0%, rgba(168,196,137,0) 50%),   
    radial-gradient(1050px 900px at 2% 58%,    #93cfc4 0%, rgba(147,207,196,0) 48%),   
    radial-gradient(1150px 950px at 72% 90%,   #efbb89 0%, rgba(239,187,137,0) 50%),   
    radial-gradient(1000px 860px at 22% 95%,   #b7d196 0%, rgba(183,209,150,0) 48%),   
    linear-gradient(150deg,
      #e4eee0 0%,
      #ecdcc1 36%,   
      #bfded2 66%,   
      #b1ce98 100%); 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
  background-attachment: scroll;
}


@media (min-width: 1080px) {
  body.theme-calm::before, body.theme-calm::after {
    content: ""; position: fixed; top: 0; bottom: 0; z-index: -1; pointer-events: none;
    width: clamp(200px, 19vw, 340px); background-repeat: no-repeat; background-position: center;
    background-size: cover; opacity: .9;
  }
  body.theme-calm::before { left: 0;  background-image: url("assets/vine-left.png");
    -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
            mask-image: linear-gradient(to right, #000 52%, transparent 100%); }
  body.theme-calm::after  { right: 0; background-image: url("assets/vine-right.png");
    -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 100%);
            mask-image: linear-gradient(to left, #000 52%, transparent 100%); }
}


.theme-calm .cards .card { position: relative; border-radius: 18px; padding-top: 2.6rem; border-color: color-mix(in srgb, var(--brand) 16%, var(--line)); box-shadow: 0 1px 2px rgba(54,71,59,.06), 0 14px 34px rgba(54,71,59,.10); transition: transform .14s ease, box-shadow .14s ease; }
.theme-calm .cards .card::before { content: ""; position: absolute; top: 1.4rem; left: 1.6rem; width: 26px; height: 26px; background: url("assets/leaf-mark.svg") center/contain no-repeat; }
.theme-calm .cards .card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(54,71,59,.17); }
.theme-calm .cards .card .price { display: inline-block; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand-dark); font-weight: 700; padding: .32rem .85rem; border-radius: 999px; }
.theme-calm .cards .card:first-child { background: color-mix(in srgb, var(--brand) 9%, #fff); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand) 30%, transparent), 0 18px 44px rgba(54,71,59,.16); }


.theme-calm #services .cards { display: block; max-width: 54rem; margin-inline: auto; }
.theme-calm #services .cards .card { position: static; background: transparent; box-shadow: none; border: 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 0;
  padding: 1.5rem .1rem 1.6rem; display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem;
  align-items: baseline; transition: none; }
.theme-calm #services .cards .card:hover { transform: none; box-shadow: none; }
.theme-calm #services .cards .card::before { content: none; }   
.theme-calm #services .cards .card h3 { grid-column: 1; margin: 0; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.theme-calm #services .cards .card .price { grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  background: color-mix(in srgb, var(--brand) 13%, #fff); color: var(--brand-dark); font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; font-size: .9rem; }
.theme-calm #services .cards .card p { grid-column: 1 / -1; margin: .5rem 0 0; color: var(--muted-fg);
  max-width: 48rem; }
.theme-calm #services .cards .card .card-link { grid-column: 1 / -1; margin-top: .7rem; }
.theme-calm #services .cards .card:first-child { border-top: 0; background: transparent; box-shadow: none; }
.theme-calm #services .cards .card:first-child h3 { color: var(--brand-dark); }


.accreditations-section { text-align: center; }
.accreditations { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: var(--s4); }
.accreditations img { height: clamp(56px, 9vw, 78px); width: auto; }


.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 0; border-radius: 18px; position: relative;
  padding: 2.1rem 1.95rem 2rem; box-shadow: 0 1px 2px rgba(20,26,40,.04), 0 16px 38px rgba(20,26,40,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 30px 64px rgba(20,26,40,.14); }
.card h3 { margin-bottom: .5rem; font-size: 1.3rem; }
.card p { margin: 0; color: var(--muted-fg); }
.card-icon-svg { width: 1.9rem; height: 1.9rem; padding: .7rem; border-radius: 14px; margin-bottom: 1rem; background: color-mix(in srgb, var(--brand) 14%, transparent); }
.theme-dark .card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5); }
.card-icon { font-size: 1.8rem; line-height: 1; margin-bottom: .6rem; }
.card-icon-svg { width: 2.5rem; height: 2.5rem; display: block; margin-bottom: .8rem; fill: none; stroke: var(--brand); stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

.card-icon-svg { padding: .55rem; box-sizing: content-box; width: 1.7rem; height: 1.7rem; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.card .price { font-weight: 700; color: var(--brand-dark); margin: .4rem 0 0; }
.card-link { display: inline-block; margin-top: .9rem; color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card.location .loc-actions { display: flex; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }


.flist { display: grid; grid-template-columns: 1fr; margin-top: var(--s4); }
@media (min-width: 760px) { .flist { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.flist-item { display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.flist-icon { width: 1.45rem; height: 1.45rem; padding: .6rem; box-sizing: content-box; border-radius: 13px; background: color-mix(in srgb, var(--brand) 13%, transparent); margin-top: .1rem; fill: none; stroke: var(--brand-dark); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flist-item h3 { margin: 0 0 .35rem; font-size: 1.24rem; }
.flist-item p { margin: 0; color: var(--muted-fg); }


.features { display: grid; gap: clamp(3rem, 7vw, 6rem); margin-top: var(--s4); }
.feature-row { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 840px) {
  .feature-row { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .feature-row:nth-child(even) .feature-media { order: 2; }
}
.feature-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.feature-copy h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: .7rem; }
.feature-copy p { color: var(--muted-fg); font-size: 1.13rem; line-height: 1.6; max-width: 46ch; margin: 0; }
.feature-copy .kicker { margin-bottom: .6rem; }
.feature-copy .card-link { margin-top: 1.1rem; font-size: 1.02rem; }

@media (min-width: 840px) {
  .feature-row:not(:has(.feature-media)) { grid-template-columns: 1fr; max-width: 52rem; margin-inline: auto; text-align: center; }
  .feature-row:not(:has(.feature-media)) .feature-copy p { max-width: 52ch; margin-inline: auto; }
  .feature-row:not(:has(.feature-media)) .feature-copy .kicker { justify-content: center; }
}


.gallery { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.gal-item { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gal-item img { width: 100%; height: clamp(180px, 26vw, 240px); object-fit: cover; transition: transform .45s ease; display: block; }
.gal-item:hover img { transform: scale(1.06); }
@media (min-width: 720px) {
  
  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-auto-flow: dense; }
  .gal-item { aspect-ratio: 1; }
  .gal-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .gal-item img { height: 100%; }
}



.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: .5rem; }
.person { flex: 1 1 260px; max-width: 360px; }
@media (max-width: 520px) { .person { flex-basis: 100%; max-width: none; } }
.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease; }
.person:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.person-photo { width: 100%; height: 300px; object-fit: cover; object-position: center 28%; background: var(--soft); }

.person-mono { height: 150px; display: grid; place-items: center; font-weight: 800; font-size: 2.6rem;
  letter-spacing: .04em; color: var(--ink-on-brand); font-family: var(--heading-font, inherit);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.person-body { padding: 1.4rem 1.5rem 1.6rem; }
.person-body h3 { margin: 0 0 .15rem; }
.person-title { color: var(--brand-dark); font-weight: 700; font-size: .98rem; margin: 0 0 .7rem; }
.person-bio { color: var(--muted-fg); font-size: .96rem; margin: 0; }
.theme-dark .person { background: var(--soft); }


.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--s4) 0 0; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 3.5rem); } }
.steps li { counter-increment: s; position: relative; padding-top: 3.7rem; }
.steps li::before {
  content: counter(s); position: absolute; top: 0; left: 0; display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem; background: var(--brand); color: var(--ink-on-brand);
  border-radius: 50%; font-weight: 800; font-size: 1.15rem; box-shadow: var(--shadow);
}
@media (min-width: 760px) { .steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.35rem; left: 3.2rem; right: -1.1rem; height: 2px; background: color-mix(in srgb, var(--brand) 32%, var(--line)); } }
.steps li h3 { margin-bottom: .4rem; }
.steps li p { color: var(--muted-fg); margin: 0; }

@media (min-width: 760px) { .theme-calm .steps { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2.5rem, 6vw, 5rem); row-gap: 2.5rem; } }
.theme-calm .steps li::after { content: none; }


.about { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .about { grid-template-columns: 1.4fr 1fr; } }
.about-side { display: grid; gap: 1.25rem; align-content: start; }
.about-photo { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ticks li { padding-left: 1.9rem; position: relative; font-weight: 600; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 18%, #fff); color: var(--brand-dark); border-radius: 50%; font-size: .8rem; }


.code { background: #0e1726; color: #e7edf6; padding: 1.3rem 1.4rem; border-radius: var(--radius); overflow-x: auto; font-size: .92rem; line-height: 1.55; box-shadow: var(--shadow); }
.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }


.sandbox { margin-top: 1.4rem; }
.sandbox-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.sandbox-tab { font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; padding: .5rem .95rem;
  border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--muted-fg); transition: background .15s, color .15s, border-color .15s; min-height: 40px; }
.sandbox-tab:hover { color: var(--fg); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.sandbox-tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.sandbox-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 880px) { .sandbox-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }

@media (min-width: 1100px) { .sandbox-section > .wrap { max-width: 82rem; } }
.sandbox-pane { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius);
  background: #0e1726; overflow: hidden; }
.sandbox-pane-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; font-size: .82rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #aebed4;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.sandbox-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sandbox-dot-malloy { background: var(--brand); }
.sandbox-dot-sql { background: #5fd0a0; }
.sandbox-blurb { margin: 0; padding: .55rem .9rem 0; color: #aebed4; font-size: .86rem; }
.sandbox-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem;
  line-height: 1.65; color: #e7edf6; background: transparent; border: 0; outline: 0; resize: vertical;
  width: 100%; min-height: 0; padding: .9rem 1.05rem 1.1rem; tab-size: 2; }
.sandbox-editor:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent); }
.sandbox-sql { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: 0;
  font-size: 1rem; line-height: 1.6; background: transparent; }
.sandbox-sql code { white-space: pre; }
.sandbox-sqlnote { padding: 0 .9rem; }
.sandbox-note { color: #8ea2bd; font-size: .82rem; margin: .5rem 0 0; }

.sandbox-results { padding: .2rem 1.05rem 1.05rem; max-height: 460px; overflow: auto; }
.sandbox-results-cap { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #9fb2c6;
  margin: .35rem 0 .55rem; }
.sandbox-table { width: 100%; border-collapse: collapse; font-size: .95rem; color: #e3ecf6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sandbox-table th { text-align: left; font-weight: 700; color: #bcd0e6; padding: .5rem .85rem;
  border-bottom: 2px solid rgba(255,255,255,.18); position: sticky; top: 0; background: #0e1f25; }
.sandbox-table td { padding: .42rem .85rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.sandbox-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.035); }
.sandbox-table tbody tr:hover td { background: rgba(77,214,232,.10); }
.sandbox-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; margin-top: 1rem; }

.sandbox-pane .sandbox-bar { margin-top: auto; gap: .7rem; padding: .72rem .9rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.sandbox-pane .sandbox-share { color: #c7ecf3; border-color: rgba(120,210,225,.5); }
.sandbox-pane .sandbox-share:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.sandbox-pane .sandbox-caption { margin: auto 0 0; padding: .65rem .9rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); font-size: .8rem; }
.sandbox-run.is-busy { opacity: .7; pointer-events: none; }
.sandbox-run span { margin-left: .2em; }
.sandbox-editnote { color: #8ea2bd; font-size: .82rem; }
.sandbox-caption { color: #8ea2bd; font-size: .86rem; margin: .9rem 0 0; }
.sandbox-caption code { background: rgba(255,255,255,.08); padding: .05rem .35rem; border-radius: 5px; }

.sandbox-tab-yours { border-style: dashed; }
.sandbox-tab-yours.is-active { border-style: solid; }
.sandbox-schema { padding: .55rem .9rem .9rem; font-size: .74rem; color: #8ea2bd; line-height: 1.7; border-top: 1px solid rgba(255,255,255,.06); margin-top: auto; }
.sandbox-schema-cap { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #aebed4; margin-right: .2rem; }
.sandbox-schema code { background: rgba(255,255,255,.08); padding: .03rem .3rem; border-radius: 5px; font-size: .92em; }
.sandbox-error { margin: .2rem .9rem .9rem; padding: .7rem .85rem; border-radius: 10px; font-size: .86rem; color: #ffd9d2;
  background: rgba(220,80,60,.14); border: 1px solid rgba(220,80,60,.4); }
.sandbox-error strong { color: #ffb4a8; }



.quote { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }

.theme-calm #reviews .cards { display: block; columns: 17rem; column-gap: 1.25rem; }
.theme-calm #reviews .quote { break-inside: avoid; margin: 0 0 1.25rem; display: inline-block; width: 100%; }
.reviews-cta { margin: 1.6rem 0 0; }
.reviews-cta a { font-weight: 700; }

.posts { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: var(--s4); }
@media (min-width: 720px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: #fffdf9; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.7rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.theme-calm .post-card { background: #fffdf9; }
.post-date { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-dark); margin: 0 0 .5rem; }
.post-card h3 { margin: 0 0 .55rem; font-size: 1.2rem; }
.post-card p { color: var(--muted-fg); margin: 0 0 1rem; }
.post-card .card-link { margin-top: auto; color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.posts-cta { margin: 1.6rem 0 0; }
.quote blockquote { margin: 0 0 .8rem; font-size: 1.05rem; }
.quote blockquote::before { content: "\201C"; color: var(--brand); font-size: 2rem; line-height: 0; vertical-align: -.4rem; margin-right: .15rem; }
.quote figcaption { font-weight: 700; color: var(--muted-fg); }

.cards .quote:only-child { grid-column: 1 / -1; max-width: 46rem; margin-inline: auto; text-align: center; }
.cards .quote:only-child blockquote { font-size: 1.3rem; line-height: 1.5; }


details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .2rem .4rem; margin-bottom: .8rem; box-shadow: var(--shadow); }
summary { cursor: pointer; font-weight: 700; padding: .9rem 1rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--brand-dark); font-weight: 800; }
details[open] summary::after { content: "\2013"; }
details p { padding: 0 1rem 1rem; margin: 0; color: var(--muted-fg); }


.cta-band { background: linear-gradient(120deg, var(--brand-dark), var(--brand)); color: var(--ink-on-brand); text-align: center; }
.cta-band .wrap { padding-block: clamp(2.5rem, 6vw, 4rem); }
.cta-band h2 { color: var(--ink-on-brand); }
.cta-band p { color: color-mix(in srgb, var(--ink-on-brand) 85%, transparent); max-width: 38rem; margin: 0 auto 1.6rem; }


.contact { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact p { margin: .4rem 0; }
.contact .cta { margin-top: 1.4rem; }
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: 1.15rem; }
.contact-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.contact-list a { color: var(--fg); text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--brand-dark); }

.contact-form { background: #fffdf9; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow); display: grid; gap: 1rem; align-content: start; }
.contact-form h3 { margin: 0 0 .2rem; font-size: 1.35rem; }
.contact-form label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; color: var(--fg); }
.contact-form input, .contact-form textarea { font: inherit; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--fg); width: 100%; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.contact-form textarea { resize: vertical; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.contact-form .cta { justify-self: start; margin-top: .3rem; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--muted-fg); margin: .2rem 0 0; }
@media (min-width: 820px) { .contact:has(.contact-form) .map { grid-column: 1 / -1; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.prose p { max-width: var(--measure); }
.prose-note { margin-top: 1.6rem; }
.prose .cta { margin-top: 1.6rem; }

.newsletter-card { max-width: 44rem; margin-inline: auto; text-align: center; background: #fffdf9; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(2rem, 4vw, 3rem); box-shadow: var(--shadow); }
.newsletter-form { display: flex; gap: .7rem; max-width: 30rem; margin: 1.5rem auto 0; flex-wrap: wrap; justify-content: center; }
.newsletter-form input[type=email] { flex: 1 1 14rem; font: inherit; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--fg); }
.newsletter-form input[type=email]:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.newsletter-form .cta { flex-shrink: 0; }
.contact-ic { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--brand); stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.contact-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-fg); font-weight: 700; margin-bottom: .1rem; }
.hours { border-collapse: collapse; margin: .6rem 0 0; }
.hours th, .hours td { text-align: left; padding: .3rem 1.4rem .3rem 0; font-weight: 600; }
.hours th { color: var(--muted-fg); }
.map iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }


.site-footer { background: color-mix(in srgb, var(--brand-dark) 74%, #0a0e15); color: color-mix(in srgb, #ffffff 72%, var(--brand)); }
.site-footer .wrap { padding-block: 2.5rem; text-align: center; }
.foot-logo { width: 56px; height: auto; display: block; margin: 0 auto .7rem; }
.foot-brand { font-weight: 800; font-size: 1.1rem; color: #fff; margin: 0 0 .2rem; }
.site-footer .muted { color: rgba(255,255,255,.62); margin: .2rem 0; }

.foot-top { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .foot-top { grid-template-columns: 1.6fr 1fr; text-align: left; align-items: start; } .foot-top .foot-logo { margin-inline: 0; } }
.foot-blurb { max-width: 42rem; }
.foot-meta { display: grid; gap: .3rem; align-content: start; }
.foot-phone a, .foot-social { color: #fff; text-decoration: none; }
.foot-social { display: inline-block; margin: .5rem .9rem 0 0; padding: .25rem 0; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.35); }
.foot-social:hover, .foot-phone a:hover { color: color-mix(in srgb, var(--brand) 60%, #fff); }
.foot-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; justify-content: center; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.4rem !important; margin-top: .5rem; }
.foot-legal .muted { margin: 0; }
.foot-link { text-decoration: underline; }



body.theme-syntax {
  --bg: #eef4fb; --soft: #ffffff; --fg: #102027; --muted-fg: #4c5f67; --line: #d3e0e6;
  --teal: #4dd6e8; --teal-deep: #0e9bb0; --amber: #f0b35e;
  color: var(--fg);
}

body.theme-syntax .kicker { color: #0a6b79; }
body.theme-syntax .kicker::before { color: #b9701f; }
body.theme-syntax a:not(.cta):not(.brand) { color: #0a6b79; }
body.theme-syntax .badges li { color: #0a6b79; border-left-color: #0a6b79; }
body.theme-syntax .quote { border-left-color: #b9701f; }
body.theme-syntax .site-footer a { color: color-mix(in srgb, #ffffff 82%, var(--brand)); }
body.theme-syntax section { background: transparent; }
body.theme-syntax .band { background: transparent; }
body.theme-syntax h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
body.theme-syntax .section-sub { color: var(--muted-fg); }
body.theme-syntax .kicker {
  font-family: var(--font-head); color: var(--teal); text-transform: none;
  letter-spacing: 0; font-weight: 600;
}
body.theme-syntax .kicker::before { content: "// "; color: var(--amber); }
body.theme-syntax a:not(.cta):not(.brand) { color: var(--teal); }
body.theme-syntax .cta { background: var(--teal-deep); color: #06181d; font-weight: 700; }
body.theme-syntax .cta:hover { background: var(--teal); color: #06181d; }
body.theme-syntax .cta-ghost { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal-deep); }
body.theme-syntax .cta-ghost:hover { background: var(--teal-deep); color: #06181d; }

body.theme-syntax .cta-invert { background: var(--amber); color: #0c1619; }
body.theme-syntax .cta-invert:hover { background: #f6c57f; color: #0c1619; }


body.theme-syntax .hero, body.theme-syntax .hero-text { background: transparent; }
.hero-code .hero-inner { max-width: min(74rem, 100%); padding: clamp(2.2rem, 5vw, 3.6rem) 1.25rem clamp(1.6rem, 3vw, 2.4rem); }
.hero-code-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; text-align: left; }
.hero-code-copy h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
.hero-code-copy .lede { max-width: 36rem; margin-inline: 0; color: var(--muted-fg); }
.hero-code-copy .hero-cta { justify-content: flex-start; }
.hero-code-card pre { font-size: .82rem; }
@media (max-width: 880px) { .hero-code-inner { grid-template-columns: 1fr; } }


body.theme-syntax .badges { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .45rem 1.6rem; justify-content: start; }
body.theme-syntax .badges li {
  background: transparent; border: 0; border-left: 3px solid var(--teal-deep); border-radius: 0;
  font-family: var(--font-head); font-size: .78rem; color: var(--teal); padding: .12rem 0 .12rem .55rem;
  white-space: nowrap;
}
@media (max-width: 480px) { body.theme-syntax .badges { grid-template-columns: 1fr; } }


body.theme-syntax .code-card { margin: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); border: 1px solid rgba(255,255,255,.10); }
body.theme-syntax .code-card-bar { display: flex; align-items: center; gap: .45rem;
  background: #081215; padding: .6rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
body.theme-syntax .code-card-bar .dot { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(255,255,255,.16); }
body.theme-syntax .code-card-bar em { font-style: normal; font-family: var(--font-head);
  font-size: .72rem; color: rgba(255,255,255,.5); margin-left: .35rem; }
body.theme-syntax .code-card pre { margin: 0; background: #0e1f25; padding: 1.1rem 1.25rem;
  font-size: .88rem; line-height: 1.55; overflow-x: auto; }
body.theme-syntax .code-card code { color: #d7e8ec; font-family: var(--font-head); }
body.theme-syntax .code-card .tok-k { color: #4dd6e8; }   
body.theme-syntax .code-card .tok-v { color: #f0b35e; }   
body.theme-syntax .code-card .tok-c { color: #7e9aa1; }   
body.theme-syntax .code { background: #0e1f25; }


.ledger { list-style: none; counter-reset: ledger; margin: 0; padding: 0; }
.ledger-row { counter-increment: ledger; display: grid; grid-template-columns: 5.2rem minmax(0,1fr); gap: 1rem;
  padding: clamp(1.2rem, 2.6vw, 1.9rem) 0; border-top: 1px solid rgba(255,255,255,.14); }
.ledger-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ledger-row::before { content: counter(ledger, decimal-leading-zero); font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: var(--amber); line-height: 1.1; }
.ledger-row h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.ledger-row p { margin: 0; max-width: 46rem; color: var(--muted-fg); }
@media (max-width: 640px) { .ledger-row { grid-template-columns: 3rem minmax(0,1fr); } }


body.theme-syntax .sandbox-pane { background: #0e1f25; border-color: var(--line); }
body.theme-syntax .sandbox-tab { color: var(--muted-fg); border-color: var(--line); background: transparent; }
body.theme-syntax .sandbox-tab:hover { color: var(--fg); border-color: var(--teal-deep); }
body.theme-syntax .sandbox-tab.is-active { background: var(--teal-deep); color: #06181d; border-color: var(--teal-deep); }
body.theme-syntax .sandbox-caption, body.theme-syntax .sandbox-editnote { color: var(--muted-fg); }
details.sandbox-learn, details.sandbox-schema { padding: 0; font-size: .84rem; line-height: 1.55;
  color: var(--muted-fg); border-top: 1px solid rgba(255,255,255,.07); }
details.sandbox-learn summary, details.sandbox-schema summary { cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .9rem; color: var(--teal); }
details.sandbox-learn summary::before, details.sandbox-schema summary::before { content: '▸ '; color: var(--amber); }
details[open].sandbox-learn summary::before, details[open].sandbox-schema summary::before { content: '▾ '; }
details.sandbox-learn .sandbox-learn-body, details.sandbox-schema > div { padding: 0 .9rem .75rem; }
.sandbox-learn .cap-try { font-family: var(--font-head); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; display: block; margin-top: .45rem; color: var(--amber); }
.sandbox-learn code, .sandbox-schema code { color: #d7e8ec; }


body.theme-syntax .prose p { font-size: 1.05rem; line-height: 1.75; color: color-mix(in srgb, var(--fg) 88%, transparent); }
body.theme-syntax .quote { background: transparent; border: 0; border-left: 4px solid var(--amber);
  border-radius: 0; padding: .4rem 0 .4rem 1.4rem; box-shadow: none; }
body.theme-syntax .quote blockquote { font-family: var(--font-head); font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.5; color: var(--fg); }
body.theme-syntax .cards { display: block; }


body.theme-syntax .cta-band { background: var(--soft); border: 1px solid var(--line); border-radius: 18px;
  margin-inline: auto; max-width: min(72rem, calc(100% - 2.4rem)); }
body.theme-syntax .cta-band h2, body.theme-syntax .cta-band p { color: var(--fg); }
body.theme-syntax .site-footer { background: #081215; }
body.theme-syntax .foot-blurb { max-width: 34rem; }
@media (max-width: 719px) { body.theme-syntax .foot-blurb { margin-inline: auto; } }


body.theme-syntax .hero-text .hero-inner { max-width: 46rem; text-align: center;
  padding: clamp(2rem, 4.5vw, 3rem) 1.25rem clamp(1.4rem, 2.5vw, 2rem); }
body.theme-syntax .hero-text h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; }
body.theme-syntax .hero-text .lede { color: var(--muted-fg); max-width: 38rem; margin-inline: auto; }
body.theme-syntax .hero-text .hero-cta { justify-content: center; }
body.theme-syntax .hero-text .badges { justify-content: center; grid-template-columns: repeat(2, minmax(0, max-content)); }
@media (max-width: 480px) { body.theme-syntax .hero-text .badges { grid-template-columns: 1fr; justify-items: start; } }

body.theme-syntax .hero-text-inner { margin: 0 auto; }
body.theme-syntax .hero-text h1 { max-width: none; }
body.theme-syntax .hero-text .lede { margin-left: auto; }

harr-* (Harrison-only).
   ============================================================================ */

body.grad-craft { background-color:#f4e3c8; background-attachment:fixed; background-image:
  radial-gradient(1200px 880px at 4% 0%,   rgba(214,130,40,.42), transparent 56%),
  radial-gradient(1100px 880px at 98% 14%, rgba(232,168,86,.40), transparent 54%),
  radial-gradient(1150px 940px at 0% 60%,  rgba(176,96,30,.32), transparent 56%),
  radial-gradient(1100px 900px at 100% 96%,rgba(206,140,66,.40), transparent 56%),
  linear-gradient(168deg,#f6e9d2,#f0dcbc 55%,#ecd3ad); }
body.grad-wood { background-color:#e9d2b0; background-attachment:fixed; background-image:
  radial-gradient(1200px 880px at 5% 0%,   rgba(140,82,38,.52), transparent 56%),
  radial-gradient(1100px 880px at 97% 14%, rgba(190,124,60,.50), transparent 54%),
  radial-gradient(1150px 940px at 0% 60%,  rgba(96,56,26,.38), transparent 56%),
  radial-gradient(1100px 900px at 100% 94%,rgba(168,108,52,.48), transparent 56%),
  linear-gradient(168deg,#efdcc0,#e6cca4 55%,#e0c193); }
body.grad-water { background-color:#cde9f6; background-attachment:fixed; background-image:
  radial-gradient(1250px 900px at 4% 0%,   rgba(20,160,230,.48), transparent 56%),
  radial-gradient(1100px 880px at 98% 14%, rgba(22,200,180,.42), transparent 54%),
  radial-gradient(1200px 960px at 96% 52%, rgba(90,190,250,.46), transparent 56%),
  radial-gradient(1150px 940px at 0% 64%,  rgba(40,210,225,.38), transparent 56%),
  linear-gradient(168deg,#e1f3fb,#cfeaf8 55%,#dceffb); }






.harr-wood .about-side { background:rgba(255,255,255,.66); border:1px solid rgba(122,74,34,.22); border-radius:14px;
  padding:1.3rem 1.4rem; box-shadow:var(--shadow); }
.harr-wood .about-photo { border-radius:12px; box-shadow:var(--shadow); }
.harr-wood .gal-item { border-radius:12px; }
.harr-wood h2 { display:inline-block; padding-bottom:.3rem; border-bottom:3px solid var(--brand); }
.harr-wood .ticks li::marker { color:#8f4f12; }


.harr-water .hero { position:relative; overflow:hidden; }
.harr-water .hero-inner { position:relative; z-index:1; }
.harr-water .hero h1 { font-family:'Saira Stencil One','Oswald',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.06em; color:#fff; font-size:clamp(2.6rem,6vw,4.4rem);
  text-shadow:0 1px 0 rgba(255,255,255,.5), 0 0 28px rgba(150,215,245,.6); }
.harr-water .hero .kicker { letter-spacing:.16em; }

.harr-water .hero.hero-photo::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(118deg, transparent 36%, rgba(255,255,255,.32) 45%, rgba(180,230,255,.10) 50%, transparent 62%); }

.harr-water h2 { font-family:'Saira Stencil One','Oswald',sans-serif; font-weight:400; text-transform:uppercase;
  letter-spacing:.04em; display:inline-block; padding:.1rem .6rem;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.7) 20%, rgba(255,255,255,.85) 80%, transparent);
  border-radius:4px; box-shadow:0 0 22px rgba(120,200,235,.4); }
.harr-water .cta { border-radius:7px; }


body.harr-light { background-color:#3a2a18 !important; background-attachment:fixed; background-image:
  radial-gradient(70% 50% at 18% 102%, rgba(255,196,96,.85), rgba(255,168,64,.28) 42%, transparent 70%),
  radial-gradient(64% 46% at 82% 102%, rgba(255,180,76,.78), rgba(255,150,50,.24) 44%, transparent 70%),
  radial-gradient(58% 40% at 50% -4%,  rgba(255,214,140,.55), transparent 68%),
  linear-gradient(180deg,#46331e,#2c1f12) !important; }
.harr-light .hero.hero-photo { background-image:
  linear-gradient(180deg, rgba(28,16,2,.40), rgba(28,16,2,.58) 55%, rgba(28,16,2,.72)), var(--hero-img) !important; }

.harr-light h2, .harr-light h3, .harr-light .section-sub, .harr-light .about p,
.harr-light .ticks li, .harr-light .hero h1, .harr-light .hero .lede, .harr-light .hero .kicker,
.harr-light .hero-note { color:#fff8ee; }
.harr-light .ticks li::before { filter:brightness(1.6); }

.harr-light h2, .harr-light .hero h1 { position:relative; text-shadow:0 0 26px rgba(255,190,92,.85), 0 0 8px rgba(255,214,150,.9); }
.harr-light h2::before, .harr-light .hero h1::before { content:''; position:absolute; left:50%; bottom:-40%;
  width:150%; height:260%; transform:translateX(-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,198,108,.6), rgba(255,176,78,.22) 42%, transparent 68%); }
.harr-light .about-side, .harr-light .gal-item { box-shadow:0 0 0 1px rgba(255,200,120,.25), 0 18px 40px rgba(0,0,0,.5); }
.harr-light .cta { box-shadow:0 0 30px rgba(255,160,50,.6); }



.grad-craft #features .feature-row:nth-child(1) { position:relative; }
.grad-craft #features .feature-row:nth-child(1)::before { content:''; position:absolute; left:-3%; top:-14%;
  width:52%; height:128%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 32% 42%, rgba(255,198,108,.55), rgba(255,180,80,.18) 45%, transparent 70%); }
.grad-craft #features .feature-row:nth-child(1) > * { position:relative; z-index:1; }
.grad-craft #features .feature-row:nth-child(1) h3 { text-shadow:0 0 20px rgba(255,186,92,.6); }

.grad-craft #features .feature-row:nth-child(2) h3 { font-family:'Saira Stencil One','Oswald',sans-serif;
  font-weight:400; text-transform:uppercase; letter-spacing:.03em; display:inline-block; padding:.06rem .55rem;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.72) 20%, rgba(255,255,255,.88) 80%, transparent);
  border-radius:4px; box-shadow:0 0 18px rgba(120,200,235,.35); }



.harr-water .contact-form, body.grad-craft .contact-form { backdrop-filter:saturate(1.1); }


.navcards { display:grid; gap:1.3rem; grid-template-columns:1fr; margin-top:var(--s4); }

@media (min-width:560px){ .navcards { grid-template-columns:repeat(2,1fr); } }
.navcard { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(210px, 24vw, 330px);
  border-radius:18px; overflow:hidden; padding:1.2rem 1.25rem 1.3rem; text-decoration:none; color:#fff;
  background-size:cover; background-position:center; box-shadow:var(--shadow-lg);
  transition:transform .16s ease, box-shadow .16s ease; }
.navcard:hover, .navcard:focus-visible { transform:translateY(-6px); box-shadow:0 30px 64px rgba(20,26,40,.32); }
.navcard-label { font-family:var(--font-head); font-weight:700; font-size:1.55rem; line-height:1.08; }
.navcard-sub { font-size:.96rem; opacity:.94; margin-top:.3rem; max-width:90%; }
.navcard-go { position:absolute; top:1rem; right:1.1rem; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; background:rgba(255,255,255,.22); backdrop-filter:blur(3px);
  transition:background .16s ease, transform .16s ease; }
.navcard:hover .navcard-go { background:rgba(255,255,255,.4); transform:translateX(3px); }

.nav-light { background-image:linear-gradient(180deg, rgba(40,22,4,.28), rgba(255,150,40,.30) 58%, rgba(26,15,3,.82)), var(--nc-img); }
.nav-light .navcard-label { text-shadow:0 0 20px rgba(255,184,86,.85); }
.nav-water { background-image:linear-gradient(180deg, rgba(10,80,120,.30), rgba(30,165,215,.34) 54%, rgba(7,38,66,.82)), var(--nc-img); }
.nav-water .navcard-label { font-family:'Saira Stencil One','Oswald',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.04em; }
.nav-wood { background-image:linear-gradient(180deg, rgba(60,34,12,.30), rgba(140,82,38,.42) 54%, rgba(38,21,6,.84)), var(--nc-img); }
.nav-craft { background-image:linear-gradient(180deg, rgba(120,60,10,.28), rgba(202,122,42,.38) 54%, rgba(66,38,10,.82)), var(--nc-img); }




.reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .62s cubic-bezier(.2,.82,.25,1.04); transition-delay: var(--rd, 0s); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }

.reveal-item { transform: translateY(26px) scale(.975); }
.reveal-item.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; } }


.sandbox-pane-head { display: flex; align-items: center; gap: .5rem; }
.sandbox-copy { margin-left: auto; font: 600 .72rem/1 var(--font-head, inherit); letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.74); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; padding: .5rem .7rem; min-height: 34px; cursor: pointer; transition: background .12s, color .12s; }
.sandbox-copy:hover { background: rgba(255,255,255,.18); color: #fff; }
.sandbox-copy.is-done { background: var(--brand); color: #fff; border-color: transparent; }
.sandbox-share { font: 600 .9rem/1 inherit; color: var(--brand-dark); background: transparent; border: 1px solid var(--brand); border-radius: 9px; padding: .6rem .95rem; cursor: pointer; transition: background .12s, color .12s; }
.sandbox-share:hover { background: var(--brand); color: var(--ink-on-brand); }
.sandbox-sql .sql-k { color: #7fd3e6; font-weight: 600; }
.sandbox-sql .sql-s { color: #f6c57f; }


.compare-section { margin-top: clamp(2.5rem, 6vw, 4rem); }
.switch-tabs { display: inline-flex; flex-wrap: wrap; gap: .4rem; background: var(--soft); padding: .35rem; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 1.5rem; }
.switch-tab { font: 600 .95rem/1 inherit; color: var(--muted-fg); background: transparent; border: 0; border-radius: 10px; padding: .65rem 1.15rem; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.switch-tab:hover { color: var(--fg); }

.switch-tab.is-active { background: #fff; color: var(--brand-dark); font-weight: 700; box-shadow: var(--shadow), inset 0 0 0 2px var(--rec-accent, #e0a01e); }


.switch-tab--primary { color: var(--brand-dark); font-weight: 800; }
.switch-tab--primary::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.switch-tab--primary:not(.is-active) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 65%, transparent); }
.switch-tab--primary:not(.is-active):hover { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-dark); }

.switch-tab--primary.is-active { background: var(--brand); color: var(--ink-on-brand); box-shadow: var(--shadow), 0 0 0 2px var(--rec-accent, #e0a01e); }
.switch-tab--primary.is-active::before { background: #fff; }
.switch-panel { animation: switchIn .28s ease; max-width: 60rem; }
@keyframes switchIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.switch-verdict { font-weight: 700; font-size: 1.12rem; margin: 0 0 1rem; padding-left: 1rem; border-left: 4px solid var(--brand); }
.switch-verdict.is-bad { border-color: #d98b4a; }
.switch-points { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .65rem; }
.switch-points li { position: relative; padding-left: 1.9rem; color: var(--muted-fg); }
.switch-points li::before { position: absolute; left: 0; top: -1px; font-weight: 800; }
.switch-points .pt-good::before { content: "\2713"; color: var(--brand); }
.switch-points .pt-bad::before { content: "\2715"; color: #d98b4a; }


.recipes-tools { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.6rem; flex-wrap: wrap; }
.recipes-search { flex: 1 1 280px; max-width: 440px; font: inherit; padding: .72rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); }
.recipes-search:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.recipes-count { color: var(--muted-fg); font-size: .9rem; }
.recipes-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.recipe-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.3rem 1.4rem 1.1rem; box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease; }
.recipe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.recipe-card h3 { margin: 0 0 .4rem; }
.recipe-card > p { color: var(--muted-fg); margin: 0 0 .9rem; font-size: .96rem; }
.recipe-card .code { font-size: .82rem; margin: 0 0 .8rem; }
.recipe-tags { color: var(--brand-dark); font-size: .8rem; font-weight: 600; margin: 0; }
.recipes-empty { color: var(--muted-fg); text-align: center; padding: 2rem; }


.code-note { max-width: 46rem; margin: 1.4rem auto 0; color: var(--muted-fg); font-size: 1rem; line-height: 1.6; text-align: center; }
.code-note strong { color: var(--fg); }


.section-search { display: block; width: 100%; max-width: 30rem; margin: 0 0 1.4rem; font: inherit;
  padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); }
.section-search:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.menu-section .section-search { margin-inline: auto; }
.section-empty { color: var(--muted-fg); text-align: center; padding: 1.5rem; }


.specs { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.specs li { text-align: center; padding: 1.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.62); }
.spec-stat { display: block; font: 800 2rem/1 var(--font-head, inherit); color: var(--brand-dark); margin-bottom: .35rem; }
.spec-label { color: var(--muted-fg); font-size: .95rem; }


/* === GRADIENT FIELD — chooser-baked, DO NOT HAND-EDIT. Re-bake via kit/render-site.sh from
   the client.config.json "gradient" token (set by the make-gradient chooser, where Andrew picks
   the field). Enforced by kit/check-gradient-token.cjs in ship-gate.sh. === */
body.grad-baked {
  /* generated by kit/gradient — token: {"s1":0,"s2":0,"s3":0,"brandHue":30} */
  background:
  radial-gradient(1300px 1196px at 18% 4%, rgba(233,143,129,0.340) 0%, transparent 74%),
  radial-gradient(1200px 1104px at 76% 8%, rgba(227,192,145,0.320) 0%, transparent 74%),
  radial-gradient(1150px 1058px at 44% 13%, rgba(232,135,135,0.310) 0%, transparent 74%),
  radial-gradient(1250px 1150px at 90% 18%, rgba(222,209,145,0.330) 0%, transparent 74%),
  radial-gradient(1200px 1104px at 9% 24%, rgba(234,153,123,0.320) 0%, transparent 74%),
  radial-gradient(1350px 1242px at 62% 29%, rgba(211,222,156,0.310) 0%, transparent 74%),
  radial-gradient(1200px 1104px at 33% 35%, rgba(225,200,148,0.320) 0%, transparent 74%),
  radial-gradient(1250px 1150px at 84% 41%, rgba(231,171,131,0.320) 0%, transparent 74%),
  radial-gradient(1300px 1196px at 14% 47%, rgba(203,222,161,0.310) 0%, transparent 74%),
  radial-gradient(1250px 1150px at 54% 53%, rgba(222,220,150,0.320) 0%, transparent 74%),
  radial-gradient(1200px 1104px at 80% 59%, rgba(177,221,172,0.320) 0%, transparent 74%),
  radial-gradient(1300px 1196px at 30% 65%, rgba(150,227,184,0.310) 0%, transparent 74%),
  radial-gradient(760px 699px at 68% 71%, rgba(92,235,228,0.400) 0%, transparent 74%),
  radial-gradient(1200px 1104px at 16% 78%, rgba(134,228,197,0.310) 0%, transparent 74%),
  radial-gradient(720px 662px at 58% 85%, rgba(95,180,241,0.400) 0%, transparent 74%),
  radial-gradient(1250px 1150px at 38% 93%, rgba(128,229,205,0.330) 0%, transparent 74%),
  linear-gradient(165deg, rgb(243,223,216) 0%, rgb(235,238,221) 38%, rgb(219,240,228) 72%, rgb(214,245,243) 100%);
  background-attachment: scroll;
}
body.grad-baked { background-repeat: no-repeat; background-size: 100% 100%; }
body.grad-baked section,
body.grad-baked .band,
body.grad-baked .cta-band { background: transparent !important; border-block-color: transparent !important; }
body.grad-baked section.hero-photo {
  background: linear-gradient(180deg, rgba(10,26,32,.34), rgba(10,26,32,.46) 55%, rgba(10,26,32,.6)), var(--hero-img) !important;
  background-size: cover !important; background-position: center !important;
}

/* ---- per-client CUSTOM_CSS_FILE (craft.css) ---- */



:root {
  --ink: #241a10;
  --ink-soft: #57452f;
  --paper: #fbf7f1;
  --rule-ink: #241a10;
  --rule-thin: rgba(36, 26, 16, 0.18);

  --amber: #c2701c;
  --amber-lift: #e8a24a;
  --amber-deep: #8f4f12;
  --amber-text: #7a4410;         
  --water: #1f6a7a;              
  --green: #4a7a4e;
  --night: #0b1220;              
  --night-2: #16203a;

  --radius: 0px;
  --measure: 60ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell-w: min(1360px, 100% - (2 * var(--gutter)));
  --ease-out: cubic-bezier(0.22, 0.68, 0.24, 1);
}



body.grad-baked,
body {
  background-color: #f5ebda;
  background-image:
    radial-gradient(52rem 40rem at 14% 3%,   rgba(126, 168, 222, 0.50), transparent 71%),
    radial-gradient(48rem 37rem at 86% 13%,  rgba(150, 142, 222, 0.46), transparent 71%),
    radial-gradient(50rem 38rem at 10% 25%,  rgba(132, 180, 228, 0.44), transparent 71%),
    radial-gradient(52rem 40rem at 88% 37%,  rgba(163, 140, 216, 0.46), transparent 71%),
    radial-gradient(48rem 37rem at 12% 49%,  rgba(226, 142, 158, 0.44), transparent 71%),
    radial-gradient(52rem 40rem at 86% 61%,  rgba(150, 150, 224, 0.42), transparent 71%),
    radial-gradient(50rem 38rem at 14% 72%,  rgba(238, 158, 138, 0.48), transparent 71%),
    radial-gradient(52rem 40rem at 84% 83%,  rgba(240, 178, 104, 0.50), transparent 71%),
    radial-gradient(50rem 39rem at 20% 93%,  rgba(233, 152, 82, 0.46),  transparent 71%),
    radial-gradient(46rem 36rem at 80% 99%,  rgba(244, 186, 126, 0.48), transparent 71%),
    linear-gradient(176deg, #e9edf3 0%, #eeeaf0 22%, #f4e9e6 46%, #f7e9dc 68%, #f8ecd8 86%, #f7edd6 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.shell { width: var(--shell-w); margin-inline: auto; }


h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.7rem, 7vw, 5.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: -0.026em; margin-bottom: 0.8rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.012em; line-height: 1.12; }
p  { line-height: 1.6; max-width: var(--measure); margin: 0 0 1rem; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }

.kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--amber-text); margin: 0 0 1.3rem;
}
.section-sub { color: var(--ink-soft); max-width: 50ch; font-size: 1.05rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }

section, .band { padding-block: clamp(2.25rem, 4vw, 3.5rem); }   


.lit-word { transition: color 560ms var(--ease-out) var(--lit-delay, 0ms),
                        text-shadow 560ms var(--ease-out) var(--lit-delay, 0ms); }
.lit.is-lit .lit-word { text-shadow: 0 0 1.6rem color-mix(in oklab, var(--amber-lift) 42%, transparent); }
.night .lit-word { color: rgba(246, 241, 232, 0.78); }        
.night .lit.is-lit .lit-word {
  color: #fdf9f1;
  text-shadow: 0 0 1.1rem color-mix(in oklab, var(--amber-lift) 60%, transparent);
}

.stagger-word { display: inline-block; opacity: 0.92; transform: translateY(0.12em);
  transition: opacity 460ms var(--ease-out) var(--lit-delay, 0ms),
              transform 460ms var(--ease-out) var(--lit-delay, 0ms); }
.stagger.is-in .stagger-word { opacity: 1; transform: none; }


.craft-hero { padding-block: clamp(3rem, 5.5vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) {
  .hero-grid.has-plate { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero-grid.has-plate .hero-plate { max-width: 26rem; justify-self: end; }
}
.hero-plate {
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid var(--rule-thin);
  padding: clamp(0.7rem, 1.4vw, 1.1rem);
}
.craft-hero .hero-h { max-width: 15ch; }
.craft-hero .hero-h::after {
  content: ""; display: block; width: 5.5rem; height: 5px;
  background: var(--amber); margin-top: 1.1rem;
}

.craft-hero .lede { margin-top: 1.3rem; margin-left: 0; margin-right: auto; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.hero-note { font-size: 0.88rem; color: var(--ink-soft); margin-top: 1rem; }


.acc-light .hero-h::after { background: linear-gradient(90deg, var(--amber), var(--amber-lift)); }
.acc-water .hero-h::after { background: var(--water); }
.acc-water .kicker { color: var(--water); }
.acc-wood .hero-h::after { background: linear-gradient(90deg, var(--amber-deep), var(--amber)); }
.acc-ink .hero-h::after { background: var(--rule-ink); }

.trade-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; list-style: none; padding: 0; margin: 1.8rem 0 0; }
.trade-strip:empty { display: none; }
.trade-strip li { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }


.shot { position: relative; display: block; margin: 0; }
.shot img { display: block; width: 100%; height: auto; background: rgba(36, 26, 16, 0.06); border-radius: var(--radius); }

.duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 48rem) { .duo > :nth-child(2) { margin-top: 3rem; } }   
@media (min-width: 48rem) { .duo { grid-template-columns: repeat(2, minmax(0, 27rem)); } }

.spread { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 54rem) {
  .spread { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .spread.flip > .spread-media { order: 2; }
  .spread.tall .spread-media { max-width: 24rem; }
  .spread > .spread-body:only-child { grid-column: 1 / -1; }
  .spread:has(> .spread-body:only-child) { grid-template-columns: minmax(0, 1fr); }
}
.spread > * { min-width: 0; }
.spread-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); max-width: 18ch; }
@media (min-width: 54rem) {
  #detail .spread-body {
    background: rgba(255, 251, 244, 0.95); border: 1px solid var(--rule-thin);
    border-top: 4px solid var(--water, var(--amber));
    padding: clamp(1.4rem, 2.4vw, 2rem); margin-left: -4rem; margin-top: 2.5rem;
    position: relative; z-index: 2;
  }
}
.spread-body p { color: var(--ink-soft); font-size: 1.02rem; max-width: 46ch; }
.spread-media img { width: 100%; height: auto; }




.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 52px; padding: 0.85rem 1.7rem;
  background: var(--amber); color: #fff;
  border: 2px solid var(--amber); border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-decoration: none;
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.cta:hover, .cta:focus-visible { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; }
.cta-ghost { background: transparent; color: var(--amber-deep); border-color: var(--amber); }
.cta-ghost:hover, .cta-ghost:focus-visible { background: var(--amber); color: #fff; }


a[href^="tel:"] { text-decoration: none; }
main a[href^="tel:"]:not(.cta) { color: var(--amber-text); font-weight: 700; }
.night a[href^="tel:"]:not(.cta) { color: var(--amber-lift); }
.site-footer a[href^="tel:"], .site-footer .foot-phone a { color: var(--amber-lift) !important; font-weight: 700; display: inline-block; padding-block: 0.65rem; }   


.sweep { margin: 0; }
.sweep-frame { position: relative; isolation: isolate; touch-action: pan-y; cursor: ew-resize; }
.sweep-frame img { display: block; width: 100%; height: auto; }
.sweep-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--sp, 50%)) 0 0); }
.sweep-after img { position: absolute; inset: 0; height: 100%; }
.sweep-seam {
  position: absolute; top: 0; bottom: 0; left: var(--sp, 50%); width: 2px; margin-left: -1px;
  background: rgba(253, 249, 241, 0.95); box-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.sweep-chip {
  position: absolute; top: 0.9rem; z-index: 2; pointer-events: none;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fdf9f1; background: rgba(11, 18, 32, 0.62); padding: 0.35rem 0.7rem;
}
.sweep-chip-a { left: 0.9rem; }
.sweep-chip-b { right: 0.9rem; }
.sweep-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 1; }
.sweep-range:focus-visible ~ .sweep-seam { box-shadow: 0 0 0 4px var(--amber-lift); }
figure.sweep-portrait { max-width: min(560px, 100%); }   
.sweep-h { max-width: 18ch; }
.sweep-tag {
  margin-top: 0.9rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber-text);
}
.sweep-sec { padding-block: 0; }
.sweep-band { padding-block: clamp(2.25rem, 4vw, 3.5rem); }


.sweep-aside:empty { display: none; }
.duo:empty, .duo:not(:has(.shot)) { display: none; }   
.sweep-side { max-width: 24rem; margin-top: 1.4rem; }
@media (min-width: 60rem) {
  .sweep-shell.sweep-portrait .sweep-side { margin-top: 0; }
}
.sweep-aside .note { margin-top: 1.4rem; }
.sweep-aside .note:first-child { margin-top: 0; }
.sweep-main .sweep-tag { margin-bottom: 0; }
.sweep-shell:not(.sweep-portrait) .sweep-aside .note { margin-top: 1.6rem; }
@media (min-width: 60rem) {
  .sweep-shell.sweep-portrait { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .sweep-shell.sweep-portrait .sweep-head { grid-column: 1 / -1; }
  .sweep-shell.sweep-portrait .sweep-main { grid-column: 1; }
  .sweep-shell.sweep-portrait .sweep-aside { grid-column: 2; align-self: center; }
}


.night {
  background:
    radial-gradient(38rem 24rem at 18% 8%,  rgba(232, 162, 74, 0.13), transparent 70%),
    radial-gradient(34rem 22rem at 85% 30%, rgba(232, 162, 74, 0.10), transparent 70%),
    radial-gradient(40rem 26rem at 30% 92%, rgba(194, 112, 28, 0.12), transparent 70%),
    linear-gradient(174deg, #0b1220 0%, #101a30 55%, #0b1220 100%);
  color: rgba(246, 241, 232, 0.92);
}
.night h1, .night h2, .night h3 { color: #fdf9f1; }
.night .section-sub { color: rgba(246, 241, 232, 0.72); }
.night .kicker { color: var(--amber-lift); }
.night .sweep-tag { color: var(--amber-lift); }
.night .note { color: rgba(246, 241, 232, 0.88); border-left-color: var(--amber-lift); }


.masonry { columns: 1; column-gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 44rem) { .masonry { columns: 2; } }
.masonry .shot { break-inside: avoid; margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.masonry .shot:nth-child(odd) { transform: rotate(-0.6deg); }
.masonry .shot:nth-child(even) { transform: rotate(0.5deg) translateY(0.8rem); }
.masonry .shot { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.masonry .shot:hover { transform: rotate(0deg) translateY(-4px); }
.masonry .shot, .duo .shot, .spread-media {
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid var(--rule-thin);
  padding: clamp(0.6rem, 1.3vw, 1rem);
}


.note {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; font-weight: 500;
  color: var(--ink); max-width: 44ch;
  border-left: 3px solid var(--amber); padding-left: 1.1rem;
  margin: 1.6rem 0 0;
}

#landscape .note, .aboutpage-shots ~ .note {
  background: rgba(255, 251, 244, 0.95); border: 1px solid var(--rule-thin);
  border-left: 4px solid var(--amber); padding: 1rem 1.3rem;
  position: relative; z-index: 2; max-width: 36ch;
}
#landscape .note { margin-top: 1.2rem; }
#landscape .note + .note { margin-top: 0.8rem; }

@media (min-width: 74rem) {
  #landscape .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: clamp(2rem, 4vw, 4rem); }
  #landscape .shell > h2, #landscape .shell > .section-sub { grid-column: 1 / -1; }
  #landscape .duo { grid-column: 1; grid-row: 2 / span 4; }
  #landscape .note { grid-column: 2; margin-top: 1.2rem; }
  #landscape .note:first-of-type { margin-top: 3rem; }
}

.notes-sec { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.notes-row { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 52rem) { .notes-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.note-panel {
  margin: 0; padding: 1.1rem 1.2rem 1.2rem;
  background: rgba(255, 251, 244, 0.88); border: 1px solid var(--rule-thin);
  border-top: 4px solid var(--amber);
  font-size: 1.05rem; line-height: 1.5; font-weight: 550; color: var(--ink); max-width: none;
}


main section .shell > h2::before,
.sweep-head .sweep-h::before,
.aboutpage-body h2::before,
.hf-deck-copy h2::before {
  content: ""; display: block; width: 3.25rem; height: 4px;
  background: var(--amber); margin-bottom: 0.9rem;
}
.night .sweep-h::before { background: var(--amber-lift); }


.hf-deck-stage { display: none; }
.hf-deck-fallback { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 44rem) { .hf-deck-fallback { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); } }
.hf-deck-fallback li { border-top: 1px solid var(--rule-thin); }
.hf-deck-fallback li:first-child { border-top: 2px solid var(--rule-ink); }
.hf-deck-fallback a {
  display: block; padding: 1.1rem 0; text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 1.1rem;
}
.hf-deck-fallback a:hover, .hf-deck-fallback a:focus-visible { color: var(--amber-deep); }

html.anim .hf-deck-on .hf-deck-stage {
  display: block; position: relative; height: 400px; margin-top: 1rem;
  perspective: 1100px; perspective-origin: 50% 50%;
}
html.anim .hf-deck-on .hf-deck-fallback {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;                     
}
html.anim .hf-deck-on .hf-deck-track { height: 200vh; }
html.anim .hf-deck-on .hf-deck-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
.hf-deck-pin { width: 100%; }
@media (min-width: 64rem) {
  html.anim .hf-deck-on .hf-deck-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); }
  html.anim .hf-deck-on .hf-deck-copy h2 { max-width: 8ch; }
}
.hf-ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.hf-card {
  position: absolute; top: 50%; left: 50%; width: min(460px, 82%); height: 116px;
  margin-left: calc(min(460px, 82%) / -2); margin-top: -58px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 1.6rem; text-decoration: none;
  background: rgba(255, 251, 244, 0.96); border: 1px solid var(--rule-thin);
  border-top: 4px solid var(--amber);
  backface-visibility: hidden; transform-origin: center center;
}
.hf-card h3 { font-size: 1.18rem; color: var(--ink); line-height: 1.25; margin: 0; }
.hf-card.is-front { border-color: var(--amber); border-top-color: var(--amber-deep); }
.about-go { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.06em; color: var(--amber-text); text-decoration: none; }


.hf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 52rem) { .hf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hf-step { background: rgba(255, 251, 244, 0.88); border: 1px solid var(--rule-thin); border-top: 4px solid var(--amber); padding: clamp(1.4rem, 2.4vw, 1.9rem); position: static; }
.hf-step::before, .hf-step::after, .hf-steps::before, .hf-steps::after { content: none !important; }
.hf-step-num {
  display: block; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1;
  color: color-mix(in oklab, var(--amber) 55%, transparent);
  font-variant-numeric: tabular-nums; margin-bottom: 0.7rem;
  position: static; width: auto; height: auto; border: 0; background: none;
}
.hf-step h3 { margin-bottom: 0.45rem; }
.hf-step p { font-size: 0.96rem; color: var(--ink-soft); margin: 0; }
#how { padding-block: clamp(3rem, 6vw, 5rem); }


.punch { list-style: none; margin: 0; padding: 0; }
.punch-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 1rem; padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--rule-thin); isolation: isolate;
}
.punch-row:first-child { border-top: 2px solid var(--rule-ink); }

.punch-fill { position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--amber) 24%, #fff6e8 12%); transform: scaleX(var(--fill, 1)); transform-origin: left center; }
.punch-label { font-weight: 600; font-size: 1.05rem; }
.punch-state { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber-deep); opacity: 0; transition: opacity 320ms var(--ease-out); }
.punch-row.is-done .punch-state { opacity: 1; }
.stage-note { margin-top: 1.6rem; color: var(--ink-soft); }
html:not(.anim) .punch-fill { transform: scaleX(1); }
html:not(.anim) .punch-state { opacity: 1; }


.wood-piece .shot {
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid var(--rule-thin);
  padding: clamp(0.7rem, 1.6vw, 1.25rem);
}
.wood-piece .shot img { background: rgba(36, 26, 16, 0.05); }
.wood-plate {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.4rem;
  position: relative; z-index: 2; width: fit-content;
  background: rgba(255, 250, 240, 0.95); border: 1px solid var(--rule-thin);
  border-top: 4px solid var(--amber-deep);
  margin: 0.9rem 0 0; padding: 1rem 1.5rem;
}
@media (min-width: 54rem) {
  .wood-plate { margin: -2.4rem 0 0 clamp(1rem, 4vw, 3rem); }
}
.wood-plate h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0; }
.wood-plate p { margin: 0; color: var(--ink-soft); }
.wood-sides { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.wood-piece .shot { transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.wood-piece .shot:hover { transform: translateY(-4px) rotate(-0.4deg); }
@media (prefers-reduced-motion: reduce) { .wood-piece .shot:hover { transform: none; } }


.irrigation-card {
  max-width: 62ch;
  background: rgba(255, 252, 246, 0.72);
  border: 1px solid var(--rule-thin); border-left: 4px solid var(--amber);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.irrigation-card h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.irrigation-body { color: var(--ink); margin-top: 0.8rem; }
.irrigation-note { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }


.includes-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 54rem) { .includes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }
.includes-grid li { border-top: 2px solid var(--rule-ink); padding: 1.2rem 0 0.6rem; }
.inc-kicker {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber-text); margin-bottom: 0.5rem;
}
.includes-grid p { color: var(--ink-soft); font-size: 0.98rem; }

#faq .wrap.narrow, #faq .wrap { width: var(--shell-w); max-width: none; margin-inline: auto; text-align: left; }
#faq h2 { text-align: left; }
#faq details {
  background: rgba(255, 252, 246, 0.8); border: 1px solid var(--rule-thin);
  border-radius: 0; max-width: 68ch; margin: 0 0 0.6rem; padding: 0.9rem 1.1rem;
}
#faq summary { font-weight: 700; color: var(--ink); cursor: pointer; }
#faq details p { color: var(--ink-soft); margin: 0.7rem 0 0; }


.craft-contact-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  width: var(--shell-w); margin-inline: auto;
  border-top: 2px solid var(--rule-ink); padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 54rem) { .craft-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.contact-rows { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-rows li { display: grid; gap: 0.25rem; }
.contact-rows .lab { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber-text); }
.contact-rows a { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 1.15rem; }
.contact-rows a:hover, .contact-rows a:focus-visible { color: var(--amber-deep); text-decoration: underline; }

.craft-form { border: 1px solid var(--rule-thin); background: rgba(255, 252, 246, 0.8); padding: clamp(1.25rem, 3vw, 2rem); }
.craft-form h3 { margin-bottom: 1rem; }
.craft-form label { display: grid; gap: 0.35rem; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.9rem; color: var(--ink); }
.craft-form input, .craft-form textarea {
  font: inherit; padding: 0.65rem 0.75rem; border: 1px solid var(--rule-thin);
  border-radius: var(--radius); background: #fff; color: var(--ink); width: 100%;
}
.craft-form input:focus-visible, .craft-form textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.form-grid { display: grid; gap: 0 1rem; }
@media (min-width: 30rem) { .form-grid { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0.8rem 0 0; }


.cta-night { padding-block: clamp(3rem, 5vw, 4.5rem); }
.cta-night h2 { color: #fdf9f1; }
.cta-night .lede { color: rgba(246, 241, 232, 0.8); }
.craft-cta-inner { max-width: 46rem; margin-inline: auto; text-align: center; padding-inline: var(--gutter); }
.craft-cta-inner .lede { margin-inline: auto; }
.craft-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.5rem; }


.craft-hero, .craft-hero .shell { text-align: left; }
.craft-hero .hero-h { margin-left: 0; margin-right: auto; }
.hero-cta { justify-content: flex-start; }


.shot img, .sweep-frame img { filter: none !important; mix-blend-mode: normal !important; }


main .shell > h2, .cta-night h2 {
  background-image: linear-gradient(100deg, var(--amber-deep), var(--amber) 45%, var(--amber-lift));
  background-size: 0% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: background-size 520ms var(--ease-out);
}
main .shell > h2:hover, .cta-night h2:hover { background-size: 100% 100%; color: transparent; }
@media (prefers-reduced-motion: reduce) { main .shell > h2:hover, .cta-night h2:hover { color: inherit; background-size: 0 100%; } }




body:has(.acc-light) main h1, body:has(.acc-light) main h2 {
  color: #4a3416;
  text-shadow: 0 0 1.4rem rgba(232, 162, 74, 0.35);
}
body:has(.acc-light) .note { border-left-color: var(--amber-lift); }
body:has(.acc-light) .note-panel { border-top-color: var(--amber-lift); }
body:has(.acc-light) main ::selection { background: rgba(232, 162, 74, 0.35); }


body:has(.acc-water) main .kicker, body:has(.acc-water) .sweep-tag { color: #14505c; }
body:has(.acc-water) main section .shell > h2::before,
body:has(.acc-water) .sweep-head .sweep-h::before { background: var(--water); }
body:has(.acc-water) .hero-h::after { background: var(--water); }
body:has(.acc-water) .note { border-left-color: var(--water); }
body:has(.acc-water) .note-panel { border-top-color: var(--water); }
body:has(.acc-water) .sweep-seam { background: rgba(214, 240, 246, 0.96); }
body:has(.acc-water) main ::selection { background: rgba(31, 106, 122, 0.25); }


body:has(.acc-wood) main h1, body:has(.acc-wood) main h2 { color: #5c3a10; letter-spacing: -0.02em; }
body:has(.acc-wood) main .kicker { color: var(--amber-deep); }
body:has(.acc-wood) .wood-plate { border-top-color: var(--amber-deep); }
body:has(.acc-wood) main ::selection { background: rgba(143, 79, 18, 0.25); }


body:has(.acc-ink) main h1, body:has(.acc-ink) main h2 { color: var(--ink); }
body:has(.acc-ink) main .kicker { color: var(--ink-soft); letter-spacing: 0.3em; }
body:has(.acc-ink) .step, body:has(.acc-ink) .note-panel { border-top-color: var(--rule-ink); }


.night h1, .night h2, .night h3 { color: #fdf9f1 !important; }


.hf-marquee-sec { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 47.99rem) { .hf-marquee-sec { display: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hf-marquee { overflow: hidden; border-block: 1px solid var(--rule-thin); padding-block: 0.9rem; }
.hf-marquee-track { display: flex; width: max-content; animation: hf-mq 36s linear infinite; }
.hf-mq {
  white-space: nowrap; padding-right: 2.5rem;
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(143, 79, 18, 0.55);
}
@keyframes hf-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html:not(.anim) .hf-marquee-track, .hf-marquee:hover .hf-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hf-marquee-track { animation: none; } }
.night + .hf-marquee-sec { margin-top: 0; }


.site-header {
  background: rgba(250, 244, 233, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--rule-ink);
  box-shadow: none;
}
.site-header .brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding-block: 0.5rem;                                  
  font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--ink);
  text-decoration: none;
}

.site-header .brand::before {
  content: ""; width: 0.85em; height: 0.85em; flex: 0 0 auto;
  background:
    radial-gradient(120% 120% at 30% 25%, var(--amber-lift), var(--amber) 55%, var(--amber-deep) 100%);
  border: 2px solid var(--night);
}
.site-header nav a:not(.cta) { position: relative; font-weight: 600; color: var(--ink); }
.site-header nav a:not(.cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -0.35rem; height: 2px;
  background: var(--amber); transition: right 320ms var(--ease-out);
}
.site-header nav a:not(.cta):hover::after,
.site-header nav a:not(.cta):focus-visible::after { right: 0; }


.aboutpage { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56rem) { .aboutpage { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.portrait-frame {
  background: rgba(255, 250, 240, 0.9);
  border: 1px solid var(--rule-thin);
  padding: clamp(0.7rem, 1.4vw, 1.1rem);
  max-width: 24rem;
}
.portrait-placeholder {
  aspect-ratio: 4 / 5;
  display: grid; place-content: center; justify-items: center; gap: 0.8rem;
  background:
    radial-gradient(70% 55% at 50% 32%, rgba(232, 162, 74, 0.28), transparent 70%),
    linear-gradient(174deg, #101a30, #0b1220 70%);
  border: 1px solid var(--rule-thin);
}
.pp-mono {
  font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 800; line-height: 1;
  color: var(--amber-lift); text-shadow: 0 0 2.2rem rgba(232, 162, 74, 0.55);
}
.pp-label {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(246, 241, 232, 0.75); text-align: center; line-height: 1.7;
}
.aboutpage-body h2 { max-width: 18ch; margin-bottom: 1rem; }
.aboutpage-body p { color: var(--ink-soft); }
.aboutpage-body .note { color: var(--ink); margin-top: 1.4rem; }
.aboutpage-shots { margin-top: clamp(2rem, 4vw, 3rem); }


html:not(.anim) .lit-word, html:not(.anim) .stagger-word { opacity: 1; transform: none; }
html:not(.anim) .night .lit-word { color: #fdf9f1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .stagger-word { opacity: 1; transform: none; }
  .plate { transform: none; opacity: 1; }
}