:root{--sans:Arial,sans-serif;--serif:Georgia,serif;--mono:monospace}*{box-sizing:border-box}body{margin:0}main{container-type:inline-size;container-name:site;min-height:100vh}a:focus-visible{outline:3px solid currentColor;outline-offset:3px}.skip{position:absolute;left:-10000px}.skip:focus{position:relative;left:0}p,h1,h2,h3,h4{overflow-wrap:anywhere}ul{padding:0}
.site { --s-ink:#1d1b17; --s-mut:#6d6862; --s-bg:#fbf8f2; --s-acc:#9c7a42; --s-line:rgba(29,27,23,.12);
  background: var(--s-bg); color: var(--s-ink); font-family: var(--sans); line-height: 1.55; }
/* Every direction surfaced by the template rail has a concrete built-site
   treatment. IDs are stable draft tokens; the customer preview consumes them
   without interpreting the descriptive labels saved beside them. */
.site[data-direction="editorial-warmth"]      { --s-bg:#f3eadb; --s-ink:#251c13; --s-mut:#766557; --s-acc:#bb681e; --s-line:rgba(37,28,19,.14); }
.site[data-direction="neighbourhood-plain"]   { --s-bg:#e9e5d5; --s-ink:#20251a; --s-mut:#626754; --s-acc:#68713b; --s-line:rgba(32,37,26,.15); }
.site[data-direction="late-table"]           { --s-bg:#16130f; --s-ink:#f6ead7; --s-mut:#c0aa91; --s-acc:#e17a42; --s-line:rgba(246,234,215,.17); }
.site[data-direction="architectural-minimal"] { --s-bg:#f2f2f0; --s-ink:#171a1c; --s-mut:#687078; --s-acc:#37556b; --s-line:rgba(23,26,28,.14); }
.site[data-direction="studio-editorial-warmth"] { --s-bg:#eee3d8; --s-ink:#37231d; --s-mut:#7d6157; --s-acc:#a55037; --s-line:rgba(55,35,29,.14); }
.site[data-direction="index"]                { --s-bg:#f5f4f1; --s-ink:#17191c; --s-mut:#626a72; --s-acc:#37556b; --s-line:rgba(23,25,28,.18); }
.site[data-direction="product-first"]        { --s-bg:#edf1fb; --s-ink:#10192f; --s-mut:#59657d; --s-acc:#2856d7; --s-line:rgba(16,25,47,.14); }
.site[data-direction="editorial-range"]      { --s-bg:#eee3d8; --s-ink:#37231d; --s-mut:#7d6157; --s-acc:#a55037; --s-line:rgba(55,35,29,.14); }
.site[data-direction="clinical-clean"]       { --s-bg:#eaf1eb; --s-ink:#17302b; --s-mut:#5c746e; --s-acc:#397b69; --s-line:rgba(23,48,43,.14); }
.site[data-direction="quiet-authority"]      { --s-bg:#eee9df; --s-ink:#14233c; --s-mut:#667080; --s-acc:#a66e32; --s-line:rgba(20,35,60,.15); }
.site[data-direction="modern-practice"]      { --s-bg:#f4f6fb; --s-ink:#11192b; --s-mut:#5b667d; --s-acc:#245de3; --s-line:rgba(17,25,43,.13); }
.site[data-direction="evidence-ledger"]      { --s-bg:#ece8db; --s-ink:#193127; --s-mut:#5d7167; --s-acc:#356b50; --s-line:rgba(25,49,39,.16); }
.site[data-direction="calm-reassurance"]     { --s-bg:#eaf1eb; --s-ink:#17302b; --s-mut:#60766f; --s-acc:#397b69; --s-line:rgba(23,48,43,.13); }
.site[data-direction="clinical-confidence"]  { --s-bg:#eaf3f2; --s-ink:#123234; --s-mut:#557678; --s-acc:#288b8d; --s-line:rgba(18,50,52,.13); }
.site[data-direction="wellness-ritual"]      { --s-bg:#f1e6e1; --s-ink:#412724; --s-mut:#80635f; --s-acc:#b76366; --s-line:rgba(65,39,36,.13); }
.site[data-direction="kinetic-club"]         { --s-bg:#141610; --s-ink:#f3f6e8; --s-mut:#b4bea0; --s-acc:#c8f13a; --s-line:rgba(243,246,232,.17); }
.site[data-direction="open-practice"]        { --s-bg:#eef2ef; --s-ink:#1b3034; --s-mut:#607579; --s-acc:#428b98; --s-line:rgba(27,48,52,.13); }
.site[data-direction="community-board"]      { --s-bg:#f2ece1; --s-ink:#1b1915; --s-mut:#6d655b; --s-acc:#ed633c; --s-line:rgba(27,25,21,.16); }
.site[data-direction="gallery-estate"]       { --s-bg:#e8e4db; --s-ink:#262521; --s-mut:#6d6961; --s-acc:#886b49; --s-line:rgba(38,37,33,.15); }
.site[data-direction="modern-listing"]       { --s-bg:#f3f5f9; --s-ink:#101727; --s-mut:#60697b; --s-acc:#2856d7; --s-line:rgba(16,23,39,.13); }
.site[data-direction="material-story"]       { --s-bg:#eadbc8; --s-ink:#3a281d; --s-mut:#785f4f; --s-acc:#a24f2e; --s-line:rgba(58,40,29,.14); }
.site[data-direction="signature-canvas"]     { --s-bg:#181421; --s-ink:#f4eff8; --s-mut:#b6a8c0; --s-acc:#aa79ee; --s-line:rgba(244,239,248,.16); }
.site[data-direction="clean-folio"]          { --s-bg:#f4f3ef; --s-ink:#151515; --s-mut:#66635f; --s-acc:#151515; --s-line:rgba(21,21,21,.14); }
.site[data-direction="personal-index"]       { --s-bg:#f2ece1; --s-ink:#1b1915; --s-mut:#6d655b; --s-acc:#d94c35; --s-line:rgba(27,25,21,.17); }
.site[data-direction="general-editorial-warmth"] { --s-bg:#f6eddf; --s-ink:#29211b; --s-mut:#74685e; --s-acc:#9c7136; --s-line:rgba(41,33,27,.14); }
.site[data-direction="general-architectural-minimal"] { --s-bg:#f0f1f1; --s-ink:#1b2023; --s-mut:#687176; --s-acc:#506878; --s-line:rgba(27,32,35,.14); }
.site[data-direction="bold-product-focus"]   { --s-bg:#f7f3ec; --s-ink:#241914; --s-mut:#765f55; --s-acc:#a8432c; --s-line:rgba(36,25,20,.14); }

/* Category samples are complete starting projects, not colour swatches. Their
   miniatures deliberately use different compositions so the distinction is
   visible before a blank draft is seeded. */
.sample-starter { margin-block: 1rem 1.35rem; text-align:left; }
.sample-starter > .card-t { margin:0; font:600 clamp(1.15rem,2vw,1.55rem)/1.15 var(--sans); letter-spacing:-.02em; color:var(--ink); }
.sample-starter > .card-p { margin:.35rem 0 .75rem; max-width:68ch; font-size:.8rem; line-height:1.5; color:var(--muted); }
.sample-starter-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,78%); gap:.75rem;
  overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding:.25rem .1rem .75rem; }
.sample-start-card { display:flex; flex-direction:column; min-width:0; padding:.7rem; border:1px solid var(--line);
  border-radius:14px; background:#f5f2ea; color:#191b1f; scroll-snap-align:start; }
.sample-start-art { position:relative; display:grid; gap:5px; min-height:118px; overflow:hidden; margin-bottom:.7rem;
  border-radius:10px; padding:9px; background:#ece8df; color:#28231d; }
.sample-start-art i { display:block; border-radius:4px; background:currentColor; opacity:.16; }
.sample-start-category,.sample-start-meta { font:600 .58rem/1.35 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#5b6068; }
.sample-start-title { margin-top:.18rem; font-size:1rem; }
.sample-start-description { min-height:3.7em; margin:.35rem 0; color:#474b52; font-size:.72rem; line-height:1.45; }
.sample-start-meta { min-height:2.7em; letter-spacing:.02em; text-transform:none; }
.sample-start-use { align-self:flex-start; min-height:44px; margin-top:.65rem; }
.sample-start-use:disabled { cursor:not-allowed; opacity:.58; }
.sample-start-card[data-family="food-hospitality"] .sample-start-art { grid-template:2fr 1fr / 1.45fr .55fr; background:#efe2cc; color:#8d4b1d; }
.sample-start-card[data-family="food-hospitality"] .sample-start-art i:first-child { grid-row:1 / 3; }
.sample-start-card[data-family="local-professional-services"] .sample-start-art { grid-template:20px 1fr 1fr / 1fr 1fr; background:#eef0ed; color:#17304b; }
.sample-start-card[data-family="local-professional-services"] .sample-start-art i:first-child { grid-column:1 / 3; opacity:.42; }
.sample-start-card[data-family="shop-catalogue"] .sample-start-art { grid-template:repeat(2,1fr) / repeat(2,1fr); background:#e8edfb; color:#2856d7; }
.sample-start-card[data-family="shop-catalogue"] .sample-start-art i:nth-child(2) { transform:translateY(12px); }
.sample-start-card[data-family="portfolio-personal-brand"] .sample-start-art { display:block; background:#17131f; color:#b381ee; }
.sample-start-card[data-family="portfolio-personal-brand"] .sample-start-art i { position:absolute; width:54%; height:48%; }
.sample-start-card[data-family="portfolio-personal-brand"] .sample-start-art i:nth-child(1) { left:8%; top:9%; transform:rotate(-5deg); opacity:.7; }
.sample-start-card[data-family="portfolio-personal-brand"] .sample-start-art i:nth-child(2) { right:3%; bottom:3%; transform:rotate(8deg); opacity:.36; }
.sample-start-card[data-family="portfolio-personal-brand"] .sample-start-art i:nth-child(3) { width:26%; height:16%; right:12%; top:14%; }
.sample-start-card[data-family="portfolio-personal-brand"] .sample-start-art i:nth-child(4) { width:20%; height:5%; left:11%; bottom:13%; opacity:.9; }
.sample-start-card[data-family="appointments-memberships"] .sample-start-art { grid-template:26px 1fr / 1.6fr .4fr; background:#15170f; color:#c8f13a; }
.sample-start-card[data-family="appointments-memberships"] .sample-start-art i:first-child { grid-column:1 / 3; opacity:.78; transform:skewX(-16deg); }
.sample-start-card[data-family="appointments-memberships"] .sample-start-art i:nth-child(2) { border-radius:50% 0 0 50%; opacity:.46; }

@media (min-width:900px) {
  .sample-starter-rail { grid-auto-columns:minmax(250px,44%); }
}

@media (prefers-reduced-motion:reduce) {
  .sample-start-art i { transform:none !important; }
}

/* Direction also changes rhythm, not just paint. These remain responsive: the
   container breakpoints below still collapse every treatment for small screens. */
.site:is([data-direction="late-table"],[data-direction="kinetic-club"],[data-direction="signature-canvas"]) .st-h1 {
  font-family: var(--sans); font-weight: 650; letter-spacing: -.045em; }
.site:is([data-direction="index"],[data-direction="evidence-ledger"],[data-direction="community-board"],[data-direction="personal-index"]) .st-sec {
  padding-block: clamp(1rem, 2.6cqw, 2rem); }
.site:is([data-direction="index"],[data-direction="evidence-ledger"],[data-direction="community-board"],[data-direction="personal-index"]) .st-grid {
  grid-template-columns: 1fr; }
.site:is([data-direction="gallery-estate"],[data-direction="clean-folio"],[data-direction="architectural-minimal"],[data-direction="general-architectural-minimal"]) .st-grid {
  gap: clamp(.35rem, 1cqw, .75rem); }
.site:is([data-direction="editorial-warmth"],[data-direction="studio-editorial-warmth"],[data-direction="general-editorial-warmth"],[data-direction="editorial-range"],[data-direction="material-story"],[data-direction="wellness-ritual"]) .st-sec {
  padding-block: clamp(2rem, 5.5cqw, 4.4rem); }

.st-nav { display: flex; align-items: center; gap: 1.2em; padding: 1em 1.4em;
  border-bottom: 1px solid var(--s-line); flex-wrap: wrap; }
.st-brand { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em; }
.st-links { list-style: none; display: flex; gap: 1em; margin-left: auto; flex-wrap: wrap; }
.st-links li { font-size: .74rem; color: var(--s-mut); }
.st-links a { color: inherit; text-decoration: none; }
.st-links li.on { color: var(--s-ink); border-bottom: 1px solid var(--s-acc); }
.st-navcta { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--s-ink); padding: .45em .9em; }

.st-sec { position: relative; padding: clamp(1.4rem, 4cqw, 3.4rem) clamp(1rem, 3cqw, 2.6rem);
  border-bottom: 1px solid var(--s-line); cursor: pointer; outline-offset: -3px; }
.st-idx { position: absolute; left: .5rem; top: .5rem; font-family: var(--mono); font-size: .52rem;
  color: var(--s-mut); opacity: .55; }
.st-sec:hover { background: rgba(0,0,0,.012); }
.st-sec.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.st-sec.sel::after { content: ""; position: absolute; right: .5rem; top: .5rem; width: 7px; height: 7px;
  background: var(--accent); }

.st-h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 6.6cqw, 3.4rem);
  line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.st-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 3.2cqw, 1.8rem); line-height: 1.15; }
.st-lede { font-size: clamp(.8rem, 1.7cqw, 1rem); color: var(--s-mut); margin-top: .5em; max-width: 44ch; }
.st-sub { font-size: .8rem; color: var(--s-mut); margin-top: .3em; max-width: 48ch; }
.st-cta { display: inline-block; margin-top: 1.1em; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; background: var(--s-ink); color: var(--s-bg); padding: .7em 1.3em; }
.st-body { height: .6em; background: currentColor; opacity: .1; margin-top: .7em; border-radius: 1px; }
.st-body.short { width: 62%; }

.st-hero { display: grid; gap: clamp(1rem, 3cqw, 2rem); align-items: center; }
.st-herocopy { display: grid; align-content: center; gap: .3rem; min-width: 0; }
.st-herocopy[data-incomplete]::after { content: 'Add what makes this business different'; display: block;
  margin-top: .7rem; padding-left: .8rem; border-left: 2px solid var(--s-acc);
  color: var(--s-mut); font: .68rem/1.4 var(--mono); }
.st-heroart { position: relative; min-height: 130px; overflow: hidden; isolation: isolate;
  background: linear-gradient(145deg, var(--s-bg), var(--s-acc)); }
.st-heroart::before, .st-heroart::after { content: ''; position: absolute; display: block; pointer-events: none; }
.st-heroart::before { width: 65%; aspect-ratio: 1; border-radius: 50%; background: var(--s-acc);
  left: 30%; top: -25%; box-shadow: -3rem 5rem 0 color-mix(in srgb, var(--s-ink) 12%, transparent); }
.st-heroart::after { inset: 12% 14%; border: 1px solid color-mix(in srgb, var(--s-ink) 35%, transparent);
  box-shadow: 1rem 1rem 0 color-mix(in srgb, var(--s-bg) 70%, transparent); }
.site:is([data-direction="general-editorial-warmth"],[data-direction="editorial-warmth"],[data-direction="studio-editorial-warmth"],[data-direction="material-story"]) .st-heroart {
  background: linear-gradient(125deg, var(--s-bg) 13%, color-mix(in srgb, var(--s-acc) 26%, var(--s-bg)) 100%); }
.site:is([data-direction="general-editorial-warmth"],[data-direction="editorial-warmth"],[data-direction="studio-editorial-warmth"],[data-direction="material-story"]) .st-heroart::before {
  width: 54%; left: 9%; top: 12%; border-radius: 48% 48% 4% 4%; }
.site:is([data-direction="general-architectural-minimal"],[data-direction="architectural-minimal"],[data-direction="gallery-estate"],[data-direction="clean-folio"]) .st-heroart {
  background: repeating-linear-gradient(90deg, transparent 0 20%, var(--s-line) calc(20% + 1px) 20.3%), var(--s-bg); }
.site:is([data-direction="general-architectural-minimal"],[data-direction="architectural-minimal"],[data-direction="gallery-estate"],[data-direction="clean-folio"]) .st-heroart::before {
  width: 55%; left: 24%; top: 16%; border-radius: 0; background: color-mix(in srgb, var(--s-acc) 48%, var(--s-bg)); }
.site:is([data-direction="bold-product-focus"],[data-direction="kinetic-club"],[data-direction="signal-range"]) .st-heroart::before {
  width: 78%; left: 17%; top: -8%; border-radius: 8%; transform: rotate(-21deg); }
.site:is([data-direction="bold-product-focus"],[data-direction="kinetic-club"],[data-direction="signal-range"]) .st-heroart::after {
  inset: 55% 6% 9% 36%; border: 0; background: var(--s-ink); transform: skew(-13deg); opacity: .7; }
.site:is([data-direction="signature-canvas"],[data-direction="nocturne"],[data-direction="kinetic-club"]) .st-heroart {
  background: radial-gradient(circle at 74% 28%, color-mix(in srgb, var(--s-acc) 38%, transparent), transparent 34%), var(--s-bg); }
.st-grid { display: grid; gap: .7rem; margin-top: 1.1em; }
.st-card { display: flex; flex-direction: column; gap: .4em; }
.st-thumb { aspect-ratio: 4/3; background: linear-gradient(135deg, rgba(0,0,0,.1), rgba(0,0,0,.04)); }
.st-cardt { font-size: .74rem; color: var(--s-mut); }
.st-form { display: flex; flex-direction: column; gap: .55em; margin-top: 1em; max-width: 26rem; }
.st-field { display: flex; flex-direction: column; gap: .2em; }
.st-lab { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--s-mut); }
.st-input { height: 2.1em; border: 1px solid var(--s-line); background: rgba(255,255,255,.6); }
.st-map { margin-top: 1em; height: clamp(110px, 22cqw, 220px);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px),
              repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px), rgba(0,0,0,.03); }
.st-list { list-style: none; margin-top: 1em; display: flex; flex-direction: column; }
.st-list li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1em; align-items: baseline;
  padding: .55em 0; border-bottom: 1px solid var(--s-line); }
.st-li-n { font-size: .82rem; }
.st-li-d { height: .5em; background: currentColor; opacity: .09; }
.st-menu-hours, .st-menu-modes, .st-menu-notice { margin-top: .4rem; color: var(--s-mut); font-size: .72rem; white-space: pre-line; }
.st-menu-groups { display: grid; gap: clamp(1rem, 2.5cqw, 2rem); margin-top: 1.2rem; }
.st-menu-group { display: flex; flex-direction: column; }
.st-menu-category { font-family: var(--serif); font-size: clamp(.95rem, 2cqw, 1.3rem); font-weight: 500;
  padding-bottom: .35rem; border-bottom: 1px solid var(--s-line); }
.st-menu-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem;
  padding: .75rem 0; border-bottom: 1px solid var(--s-line); }
.st-menu-item.is-unavailable { opacity: .62; }
.st-menu-main { min-width: 0; }
.st-menu-name { font-size: .82rem; font-weight: 600; }
.st-menu-description { margin-top: .15rem; color: var(--s-mut); font-size: .7rem; }
.st-menu-facts, .st-menu-unavailable { margin-top: .25rem; color: var(--s-mut); font: .56rem/1.4 var(--mono); text-transform: uppercase; }
.st-menu-price { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  color: var(--s-ink); font: .68rem/1.3 var(--mono); white-space: nowrap; }
.st-foot { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  padding: 1.2em 1.4em; font-size: .68rem; color: var(--s-mut); }

/* ── the site's own breakpoints, against the CANVAS width ── */
/* three across only when there is genuinely room — at 768 a tablet gets two,
   which is the whole point of having a tablet layout at all */
@container site (min-width: 860px) {
  .st-hero { grid-template-columns: 1.1fr .9fr; }
  .st-heroart { min-height: 300px; }
  .st-grid { grid-template-columns: repeat(3, 1fr); }
  .st-menu-groups { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .st-sec { padding-inline: clamp(1.4rem, 5cqw, 4rem); }
}
@container site (min-width: 481px) and (max-width: 859px) {
  .st-hero { grid-template-columns: 1fr 1fr; }
  .st-grid { grid-template-columns: repeat(2, 1fr); }
  .st-heroart { min-height: 200px; }
}
@container site (max-width: 480px) {
  .st-nav { gap: .7em; padding: .8em 1rem; }
  .st-links { margin-left: 0; width: 100%; gap: .4em; flex-wrap: nowrap; overflow-x: auto; }
  .st-links li { flex: 0 0 auto; font-size: .78rem; }
  .st-links a { display: inline-flex; align-items: center; min-height: 36px; padding: .35em .45em; }
  .st-grid { grid-template-columns: 1fr; }
  .st-heroart { min-height: 140px; }
  .st-cta { width: 100%; text-align: center; }
  .st-foot { flex-direction: column; gap: .3em; }
  .st-menu-item { grid-template-columns: minmax(0,1fr); }
  .st-menu-price { align-items: flex-start; }
}


.site{min-height:100vh;font-size:16px}.st-sec{cursor:default}.site .st-links li,.site .st-sub,.site .st-lede,.site .st-foot,.site .st-menu-hours,.site .st-menu-modes,.site .st-menu-notice,.site .st-menu-description,.site .st-menu-facts,.site .st-menu-unavailable,.site .st-menu-price,.site .st-menu-name,.site .st-cta{font-size:14px}.site .st-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:.4rem .55rem}.site .st-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px}.site[data-density="sparse"] .st-sec{padding-block:64px}.site[data-density="editorial"] .st-sec{padding-block:40px}