/* Plan & Section: a sample design from Brad's mockup library, rewritten by
   scripts/import-designs.py. Do not edit; re-run that instead. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-italic-c6f79bf3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-normal-1dee6305.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-tight-normal-bcf282a4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-tight-normal-bcf282a4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-tight-normal-bcf282a4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; margin:0; font-weight:inherit; }
p { text-wrap:pretty; margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
dl, dd { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
[hidden] { display:none !important; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Headers placed over a photo sit within .page, not the window, so anything a host adds above
   the page (the Shift & Shine sample bar) pushes them down instead of hiding under them. */
.page { position:relative; overflow-x:clip; }
.skip { position:absolute; left:12px; top:12px; z-index:100; padding:10px 14px; background:#fff; color:#111; }
.skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js-reveal [data-reveal]:not(.in) { opacity:0; transform:translateY(28px); }
[data-reveal] { transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.demo-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.demo-form .field { display:grid; gap:6px; min-width:0; }
.demo-form .wide { grid-column:1 / -1; }
.demo-form input, .demo-form select, .demo-form textarea { font:inherit; width:100%; min-width:0; }
@media (max-width:640px) { .demo-form { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

:root { --stone:#ECE8E0; --paper:#F6F3EE; --ink:#1F1E1B; --muted:#5C5850; --olive:#4C5927; --clay:#B34A27; --line:#CFC9BE; }
body { background:var(--stone); color:var(--ink); font:400 16.5px/1.65 "Inter Tight", system-ui, sans-serif; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--olive); outline-offset:3px; }
.cap { font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
h1, h2 { font-family:"Instrument Serif", Georgia, serif; font-weight:400; letter-spacing:-.01em; }
.hd { position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px clamp(16px, 4vw, 56px); }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; font-weight:500; }
.mono-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--ink); font:400 19px/1 "Instrument Serif", serif; letter-spacing:.04em; }
.hd ul { display:flex; gap:clamp(14px, 2.4vw, 34px); }
.hd nav a { text-decoration:none; font-size:15px; }
.hd nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.hero { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 4vw, 64px); padding:clamp(110px, 12vw, 150px) clamp(16px, 4vw, 56px) clamp(60px, 7vw, 100px); align-items:end; }
.hero-copy { position:relative; display:grid; gap:24px; padding-bottom:12px; }
.hero h1 { font-size:clamp(48px, 6.2vw, 96px); line-height:.98; }
.lede { color:var(--muted); font-size:18px; max-width:32em; }
.more { display:inline-flex; align-items:center; gap:10px; width:max-content; text-decoration:none; font-weight:500; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.more:hover { color:var(--olive); border-color:var(--olive); }
.arr { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.dot { position:absolute; top:-30px; right:12%; width:22px; height:22px; border-radius:50%; background:var(--clay); }
.hero-img img { width:100%; aspect-ratio:5/4; object-fit:cover; }
figcaption { font-size:13.5px; color:var(--muted); margin-top:10px; }
figcaption span { font-family:"Instrument Serif", serif; font-style:italic; font-size:16px; color:var(--ink); margin-right:6px; }
section { padding:clamp(70px, 9vw, 130px) clamp(16px, 4vw, 56px); }
.feat { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px, 4vw, 64px); background:var(--paper); border-block:1px solid var(--line); }
.feat-copy { display:grid; gap:20px; align-content:start; }
.feat h2 { font-size:clamp(44px, 5vw, 76px); line-height:1; }
.facts { border-top:1px solid var(--ink); }
.facts div { display:grid; grid-template-columns:90px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.facts dt { color:var(--muted); font-size:13.5px; text-transform:uppercase; letter-spacing:.1em; padding-top:2px; }
.views { display:inline-flex; border:1px solid var(--ink); margin-bottom:16px; }
.views button { border:0; background:transparent; padding:11px 18px; font-size:15px; }
.views button + button { border-left:1px solid var(--ink); }
.views button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.stage { position:relative; aspect-ratio:720/470; background:var(--stone); }
.v { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s .6s; margin:0; }
.v.on { opacity:1; visibility:visible; transition:opacity .6s ease; }
.v img { width:100%; height:100%; object-fit:cover; }
.v.sheet { background:#FBFAF6; border:1px solid var(--line); padding:12px 12px 0; display:flex; flex-direction:column; }
.v.sheet svg { width:100%; flex:1; min-height:0; }
.v.sheet figcaption { margin:0 0 10px; }
.draw path, .draw circle, .draw line { fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; }
.draw .walls path { stroke-width:5; }
.draw .walls .thin, .draw .fit path, .draw .fit circle { stroke-width:1.2; }
.draw .glass path { stroke:var(--olive); stroke-width:3; }
.draw .doors path { stroke-width:1.2; stroke-dasharray:4 3; }
.draw .sun path { stroke:var(--clay); stroke-width:1.6; stroke-dasharray:7 5; }
.draw .north path { fill:var(--ink); }
.draw text { font:500 14px "Inter Tight", sans-serif; fill:var(--ink); stroke:none; }
.draw text.sm { font-size:12.5px; fill:var(--muted); }
.v.on .draw .walls path, .v.on .draw .glass path, .v.on .draw .ground path { stroke-dasharray:2000; stroke-dashoffset:2000; animation:ink 1.8s ease forwards; }
.v.on .draw .glass path { animation-delay:.5s; }
.v.on .draw text { opacity:0; animation:fade .6s ease .9s forwards; }
@keyframes ink { to { stroke-dashoffset:0; } }
@keyframes fade { to { opacity:1; } }
.ix-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.ix-head h2 { font-size:clamp(44px, 5vw, 76px); line-height:1; margin-top:8px; }
.filters { display:flex; flex-wrap:wrap; gap:4px; }
.filters button { border:1px solid var(--line); background:transparent; padding:9px 16px; font-size:14.5px; }
.filters button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--stone); }
.ix { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 4vw, 56px); align-items:start; }
.ix-preview { position:sticky; top:calc(var(--ssd-bar, 0px) + 24px); aspect-ratio:4/5; }
.pv { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; display:flex; flex-direction:column; }
.pv.on { opacity:1; }
.pv img { width:100%; flex:1; min-height:0; object-fit:cover; }
.ix-cols, .row { display:grid; grid-template-columns:44px minmax(0,2.2fr) minmax(0,1.6fr) minmax(0,1fr) 54px; gap:12px; align-items:baseline; }
.ix-cols { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); padding:0 0 10px; border-bottom:1px solid var(--ink); }
.row { width:100%; padding:20px 0; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; transition:padding .3s, color .2s; }
.row .pn { font:400 clamp(22px, 2.2vw, 30px)/1.1 "Instrument Serif", serif; }
.row .no, .row .pl, .row .ty, .row .yr { font-size:14.5px; color:var(--muted); }
.row:hover, .row[aria-pressed="true"] { padding-left:10px; color:var(--olive); }
.row[aria-pressed="true"] .no::before { content:"→ "; }
.approach h2 { font-size:clamp(40px, 4.6vw, 70px); margin:10px 0 40px; }
.approach ol { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 48px); border-top:1px solid var(--ink); padding-top:30px; }
.approach li { display:grid; gap:10px; align-content:start; }
.rn { font:italic 400 34px/1 "Instrument Serif", serif; color:var(--clay); }
.approach h3 { font-weight:600; font-size:20px; }
.approach p { color:var(--muted); }
.practice { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px, 5vw, 80px); align-items:center; background:var(--paper); border-block:1px solid var(--line); }
.practice img { aspect-ratio:4/5; width:100%; object-fit:cover; }
.practice h2 { font-size:clamp(34px, 3.8vw, 56px); line-height:1.04; margin:10px 0 20px; }
.practice > div > p { color:var(--muted); }
.people { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:30px 0 20px; }
.people li { display:grid; gap:4px; font-size:14.5px; }
.people b { font-weight:600; }
.people span:last-child { color:var(--muted); }
.sil { display:block; aspect-ratio:1; background:radial-gradient(circle at 50% 38%, #C9C2B5 0 17%, transparent 18%), radial-gradient(ellipse at 50% 100%, #C9C2B5 0 36%, transparent 37%), #DED8CD; margin-bottom:8px; }
.note { font-size:14px; }
.contact { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 5vw, 80px); }
.contact h2 { font-size:clamp(44px, 5vw, 80px); line-height:1; margin:10px 0 24px; }
address { font-style:normal; color:var(--muted); line-height:1.9; }
.demo-form label { font-size:13.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.demo-form input, .demo-form select, .demo-form textarea { padding:12px 0; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); }
.demo-form button { justify-self:start; padding:15px 28px; border:1px solid var(--ink); background:var(--ink); color:var(--stone); font-size:15.5px; }
.demo-form button:hover { background:var(--olive); border-color:var(--olive); }
.form-out { color:var(--olive); min-height:1.4em; }
.ft { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:26px clamp(16px, 4vw, 56px); border-top:1px solid var(--ink); font-size:14px; }
.ft a { text-decoration:none; }
@media (max-width:980px) {
  .hero, .feat, .practice, .contact { grid-template-columns:1fr; }
  .hero-copy { padding-bottom:0; }
  .ix { grid-template-columns:1fr; }
  .ix-preview { position:relative; top:auto; aspect-ratio:4/3; }
  .approach ol { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .hd nav { display:none; }
  .ix-cols { display:none; }
  .row { grid-template-columns:36px minmax(0,1fr) 48px; row-gap:2px; }
  .row .pl { grid-column:2; grid-row:2; } .row .ty { display:none; } .row .yr { grid-column:3; grid-row:1; }
  .people { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .views button { padding:10px 13px; }
  .stage { aspect-ratio:4/3; }
  .dot { right:6px; top:-34px; }
}


/* ---------- Shift & Shine sample bar (scripts/import-designs.py) ---------- */
@font-face { font-family: "SSD Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
:root { --ssd-bar: 53px; scroll-padding-top: var(--ssd-bar); }
.ssd-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px 14px; margin: 0; padding: 8px clamp(14px, 3vw, 28px); background: #0F1B1B; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); font: 400 13.5px/20px "SSD Geist", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: left; text-transform: none; }
.ssd-bar .ssd-bar-text { flex: 1; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; max-width: none; }
.ssd-bar a { color: #FFFFFF; text-decoration: none; }
.ssd-bar .ssd-bar-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -10px; border-radius: 6px; }
.ssd-bar .ssd-bar-home svg { display: block; width: 15px; height: 16px; }
.ssd-bar .ssd-bar-back { display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font: 500 13.5px/1 "SSD Geist", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ssd-bar .ssd-bar-back:hover { background: #FFFFFF; color: #0F1B1B; }
.ssd-bar a:focus-visible { outline: 3px solid #5AD7D7; outline-offset: 2px; }
/* Fingers get the full 44px. */
@media (pointer: coarse) { .ssd-bar .ssd-bar-back { min-height: 44px; } .ssd-bar .ssd-bar-home { width: 44px; height: 44px; margin: 0 -12px 0 -14px; } }
/* Line heights in whole pixels, so the bar is too, and the sample under it
   doesn't land on half pixels. */
@media (max-width: 520px) { :root { --ssd-bar: 71px; } .ssd-bar { font-size: 12.5px; line-height: 18px; } }