/* A Proper Sort — design tokens & components. Light is the default; [data-theme="dark"] on flips the palette. */ :root{ --sage:#6C7C60;--sage-deep:#556147;--sage-soft:#8A9A7C; --bg:#FBFAF6;--bg-alt:#F3F1E9;--surface:#FFFFFF;--surface-2:#F7F5EE; --ink:#282C24;--ink-soft:#5C6353;--ink-faint:#8A8F80; --line:#E2DFD3;--line-soft:#EDEAE0;--tint:#EDF0E7; --shadow:0 1px 2px rgba(40,44,36,.05),0 12px 32px -12px rgba(40,44,36,.14); --shadow-lift:0 2px 4px rgba(40,44,36,.06),0 24px 48px -16px rgba(40,44,36,.2); --serif:Georgia,"Times New Roman",Times,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --wrap:1140px;--r:2px; color-scheme:light; } [data-theme="dark"]{ --sage:#9FB08F;--sage-deep:#B9C7AC;--sage-soft:#7F8F72; --bg:#181A16;--bg-alt:#1E211B;--surface:#212520;--surface-2:#262A22; --ink:#EAEAE2;--ink-soft:#AFB5A6;--ink-faint:#868C7C; --line:#333829;--line-soft:#2B2F26;--tint:#252A21; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6); --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.7); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px} body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--sans);text-wrap:pretty;-webkit-font-smoothing:antialiased} img,video{max-width:100%;height:auto;display:block} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.01em;margin:0} h1{font-size:clamp(2.4rem,5vw,3.6rem)} h2{font-size:clamp(1.9rem,3.4vw,2.7rem)} h3{font-size:1.35rem;line-height:1.3} p{margin:0 0 1.1em} a{color:var(--sage-deep);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--sage)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .narrow{max-width:760px} section{position:relative} .pad{padding:clamp(56px,8vw,104px) 0} .pad-s{padding:clamp(40px,5vw,64px) 0} .alt{background:var(--bg-alt)} .eyebrow{font:500 .74rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sage);margin:0 0 18px} .lede{font-size:1.2rem;color:var(--ink-soft)} .rule{height:1px;background:var(--line);border:0;margin:0} .center{text-align:center} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:60;background:var(--surface);padding:10px 16px;border:1px solid var(--sage)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:13px 26px;border-radius:var(--r);border:1px solid var(--sage-deep);background:var(--sage-deep);color:#FBFAF6;font:500 .95rem/1 var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s} .btn:hover{background:var(--sage);border-color:var(--sage);color:#FBFAF6;transform:translateY(-1px)} [data-theme="dark"] .btn:not(.btn-ghost):not(.btn-light){color:#181A16} [data-theme="dark"] .btn:not(.btn-ghost):not(.btn-light):hover{color:#181A16} .btn-ghost{background:transparent;color:var(--sage-deep);border-color:var(--line)} .btn-ghost:hover{background:var(--tint);color:var(--sage-deep);border-color:var(--sage-soft)} .btn-light{background:transparent;border-color:rgba(255,255,255,.65);color:#fff} .btn-light:hover{background:#fff;border-color:#fff;color:var(--sage-deep)} /* the hero sits over video, so its buttons ignore the theme */ html .hero .btn:not(.btn-ghost):not(.btn-light),html .hero .btn:not(.btn-ghost):not(.btn-light):hover{color:#fff} [data-theme="dark"] .hero .btn:not(.btn-ghost):not(.btn-light){background:#556147;border-color:#556147;color:#fff} [data-theme="dark"] .hero .btn:not(.btn-ghost):not(.btn-light):hover{background:#6C7C60;border-color:#6C7C60;color:#fff} [data-theme="dark"] .hero .btn-light{background:transparent;border-color:rgba(255,255,255,.65);color:#fff} [data-theme="dark"] .hero .btn-light:hover{background:#fff;border-color:#fff;color:#556147} .btn-sm{min-height:40px;padding:9px 18px;font-size:.85rem} /* header */ .site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)} .head-in{display:flex;align-items:center;gap:20px;min-height:74px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--sage-deep);flex:none} .brand img{width:38px;height:38px;object-fit:contain;transition:transform .35s cubic-bezier(.2,.7,.3,1),filter .3s} .brand span{font-family:var(--serif);font-size:1.22rem;letter-spacing:.02em;white-space:nowrap;transition:color .3s} .site-head .brand:hover img{transform:scale(1.06) rotate(-3deg);filter:saturate(1.15)} .site-head .brand:hover span{color:var(--sage)} .nav{display:flex;align-items:center;gap:2px;margin-left:auto} .nav a{padding:9px 12px;border-radius:var(--r);color:var(--ink-soft);text-decoration:none;font-size:.94rem} .nav a:hover{color:var(--ink);background:var(--tint)} .nav a[aria-current="page"]{color:var(--sage-deep);box-shadow:inset 0 -2px 0 var(--sage)} .head-tools{display:flex;align-items:center;gap:6px;flex:none} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid transparent;border-radius:999px;background:none;color:var(--ink-soft);cursor:pointer} .icon-btn:hover{background:var(--tint);color:var(--ink)} .icon-btn svg{width:19px;height:19px} [data-theme="dark"] .moon{display:none} .sun{display:none} [data-theme="dark"] .sun{display:block} #menu-btn{display:none} .mobile-nav{display:none;border-top:1px solid var(--line);padding:10px 24px 20px} .mobile-nav a:not(.btn){display:block;padding:12px 4px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-soft)} .mobile-nav a:not(.btn)[aria-current="page"]{color:var(--sage-deep)} .mobile-nav .btn{margin-top:18px;width:100%} @media(max-width:1000px){.nav{display:none}#menu-btn{display:inline-flex}.mobile-nav.open{display:block}} /* Keep the header row inside the viewport on phones. The brand and the tools are both flex:none, so anything that does not fit pushes the row sideways and takes the whole page with it. The consultation button is 207px of a ~327px budget at 375px, and it already appears full-width in the drawer, so it is the thing to drop. The threshold is 1100px rather than the 1000px nav breakpoint because between those two widths the full nav is showing as well, and the two together overflow. */ @media(max-width:1100px){.head-tools .btn-sm{display:none}} @media(max-width:420px){ .site-head .wrap{padding-left:16px;padding-right:16px} .head-in{gap:12px} .brand span{font-size:1.05rem} } @media(max-width:340px){.head-in{gap:8px}.brand span{font-size:.95rem}} /* Backstop: below every breakpoint above, the wordmark gives way rather than letting the row overflow. Sized so it never actually truncates at 320px. */ .brand{min-width:0} .brand span{overflow:hidden;text-overflow:ellipsis} /* hero */ .hero{position:relative;min-height:min(78vh,660px);display:grid;place-items:center;overflow:hidden;background:#2A2E26} .hero video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,34,26,.5),rgba(30,34,26,.34) 45%,rgba(30,34,26,.72))} .hero-in{position:relative;z-index:2;text-align:center;padding:clamp(64px,10vw,120px) 24px;max-width:820px} .hero-mark{width:96px;margin:0 auto 26px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.35))} .hero h1{color:#fff;font-size:clamp(2.5rem,6vw,4.2rem);text-shadow:0 2px 24px rgba(0,0,0,.35)} .hero p{color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:36em;margin:20px auto 32px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* intro */ .intro{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(32px,6vw,72px);align-items:start} .intro-logo img{width:100%;height:auto} @media(max-width:820px){.intro{grid-template-columns:1fr}.intro-logo{max-width:230px;margin:0 auto}} .quote{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--sage-deep);border-left:2px solid var(--sage-soft);padding-left:22px;margin:32px 0 0} .quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px} /* cards */ .grid{display:grid;gap:26px} .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))} .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .card-img{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)} .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out} .card:hover .card-img img{transform:scale(1.04)} .card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;gap:12px} .card-body h3{font-size:1.3rem} .card-body p{color:var(--ink-soft);font-size:.98rem;margin:0} .card-body .more{margin-top:auto;padding-top:16px;font:500 .84rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep);text-decoration:none} .card-body .more:hover{color:var(--sage)} .card-body .more::after{content:" →"} /* service detail */ .svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(44px,6vw,72px) 0} .svc+.svc{border-top:1px solid var(--line)} .svc:nth-child(even) .svc-media{order:2} @media(max-width:860px){.svc{grid-template-columns:1fr}.svc:nth-child(even) .svc-media{order:0}} .svc h2{font-size:clamp(1.7rem,2.8vw,2.2rem)} .svc-frame{position:relative;margin:0} .svc-media img,.svc-media video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--surface-2);display:block} .svc-frame video{position:absolute;inset:0;height:100%} .svc-frame video:not(:has(source)){display:none} /* image beside intro copy */ .intro-split{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:clamp(28px,5vw,56px);align-items:center} @media(max-width:820px){.intro-split{grid-template-columns:1fr}.intro-shot{max-width:420px}} .intro-shot{margin:0} .intro-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)} .intro-shot.tall img{aspect-ratio:4/5} .intro-split>div>p:last-child{margin-bottom:0} /* service area */ .area{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center} @media(max-width:900px){.area{grid-template-columns:1fr}} .area-map{margin:0} .area-map img{width:100%;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow)} #service-map{position:relative;aspect-ratio:1/1;width:100%;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;background:var(--surface-2)} #service-map img.map-fallback{border:0;border-radius:0;box-shadow:none;height:100%;object-fit:cover} #service-map .map-host{position:absolute;inset:0} #service-map .leaflet-container{height:100%;width:100%;background:var(--surface-2);font-family:var(--sans)} #service-map .leaflet-tile-pane{filter:saturate(.68) contrast(.96)} [data-theme="dark"] #service-map .leaflet-tile-pane{filter:saturate(.5) brightness(.78) contrast(1.05)} #service-map .leaflet-control-attribution{font-size:11px;background:rgba(251,250,246,.88);color:#41463A} #service-map .leaflet-control-attribution a{color:#3F5132} #service-map .leaflet-bar a{color:var(--sage-deep);border-bottom-color:var(--line)} #service-map .leaflet-bar a:hover{background:var(--tint)} .area-map figcaption{margin-top:12px;font-size:.85rem;color:var(--ink-faint);letter-spacing:.04em;text-align:center} /* tables */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)} table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:720px} caption{text-align:left;padding:0 0 12px;color:var(--ink-faint);font-size:.88rem} th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top} thead th{background:var(--tint);color:var(--sage-deep);font:500 .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--surface-2)} td strong{font-family:var(--serif);font-weight:400;font-size:1.08rem} .save{color:var(--sage-deep);font-size:.86rem} .save strong{font-weight:600;font-family:var(--sans);font-size:.9rem} .res-table{min-width:900px} .res-table td:first-child{color:var(--ink-faint);font-size:.86rem;white-space:nowrap} .pkg-cards,.res-cards{display:none} @media(max-width:900px){ .table-wrap.pkg{display:none} .pkg-cards{display:grid;gap:18px} .pkg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)} .pkg-card h3{margin-bottom:4px} .pkg-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:16px 0 0;font-size:.94rem} .pkg-card dt{color:var(--ink-faint);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding-top:2px} .pkg-card dd{margin:0} /* The resources directory is four columns of prose; side-by-side labels would squeeze the values to a ribbon, so this dl stacks rather than pairing. */ .table-wrap:has(>.res-table){display:none} .res-cards{display:grid;gap:18px} .res-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)} .res-cat{margin:0 0 6px;color:var(--ink-faint);font:500 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase} .res-card h3{font-size:1.2rem;overflow-wrap:break-word} .res-card dl{margin:16px 0 0;font-size:.94rem} .res-card dt{margin-top:12px;color:var(--ink-faint);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase} .res-card dt:first-child{margin-top:0} .res-card dd{margin:4px 0 0} .res-link{margin:16px 0 0} } /* faq */ .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--serif);font-size:1.18rem;line-height:1.35} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);transform:translateY(-70%) rotate(45deg);transition:transform .2s} .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq summary:hover{color:var(--sage-deep)} .faq .answer{padding:0 8px 24px 0;color:var(--ink-soft)} .faq .answer>:last-child{margin-bottom:0} .faq .answer ul{padding-left:20px;margin:0 0 1em} .faq .answer li{margin-bottom:6px} /* organizing-style quiz — collapsed panel on the home page */ .quiz-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)} .quiz-panel>summary{list-style:none;cursor:pointer;display:block;position:relative;padding:24px 56px 24px 26px} .quiz-panel>summary::-webkit-details-marker{display:none} .quiz-panel>summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);transform:translateY(-70%) rotate(45deg);transition:transform .2s} .quiz-panel[open]>summary::after{transform:translateY(-30%) rotate(-135deg)} .quiz-panel>summary:focus-visible{outline:2px solid var(--sage-soft);outline-offset:-2px} .quiz-summary-title{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.3;color:var(--sage-deep)} .quiz-summary-sub{display:block;margin-top:6px;font-size:.9rem;color:var(--ink-faint)} .quiz-panel>summary:hover .quiz-summary-title{color:var(--sage)} .quiz-body{padding:22px 26px 28px;border-top:1px solid var(--line-soft)} .quiz-body>p{margin:0 0 1em;color:var(--ink-soft)} .quiz-body h3{margin:26px 0 10px;font-size:1.18rem;color:var(--sage-deep)} /* min-width:0 throughout: these are grid items wrapping text that must be allowed to shrink, and a fieldset carries min-inline-size:min-content. */ .quiz,.quiz-q,.quiz-options,.quiz-choice,.quiz-text,.quiz-result,.quiz-arch{min-width:0} .quiz{margin-top:24px} .quiz-progress-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .quiz-step{margin:0;font:500 .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep)} .quiz-answered{margin:0;font-size:.8rem;color:var(--ink-faint)} .quiz-progress{height:4px;margin:10px 0 24px;border-radius:999px;background:var(--line-soft);overflow:hidden} .quiz-progress span{display:block;height:100%;border-radius:999px;background:var(--sage);transition:width .3s} .quiz-q{border:0;padding:0;margin:0} .quiz-q legend{padding:0;font-family:var(--serif);font-size:1.22rem;line-height:1.35;color:var(--ink)} .quiz-options{display:grid;gap:10px;margin-top:18px} .quiz-option{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);cursor:pointer;transition:background .18s,border-color .18s} .quiz-option:hover{border-color:var(--sage-soft);background:var(--tint)} .quiz-letter{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:500 .78rem/1 var(--sans);color:var(--ink-faint);transition:background .18s,border-color .18s,color .18s} .quiz-text{font-size:.98rem;line-height:1.5;color:var(--ink-soft)} .quiz-choice input:checked+.quiz-option{border-color:var(--sage-deep);background:var(--tint)} .quiz-choice input:checked+.quiz-option .quiz-letter{background:var(--sage-deep);border-color:var(--sage-deep);color:#FBFAF6} [data-theme="dark"] .quiz-choice input:checked+.quiz-option .quiz-letter{color:#181A16} .quiz-choice input:checked+.quiz-option .quiz-text{color:var(--ink)} .quiz-choice input:focus-visible+.quiz-option{outline:2px solid var(--sage-soft);outline-offset:2px} .quiz-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} .quiz-nav .btn{flex:1 1 auto} .quiz-nav .btn[disabled]{opacity:.4;pointer-events:none} .quiz-badge{display:inline-block;margin:0;padding:6px 14px;border-radius:999px;background:var(--tint);color:var(--sage-deep);font:500 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase} .quiz-result:focus{outline:none} .quiz-result-title{margin:14px 0 0;font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--sage-deep)} .quiz-synergy{margin:16px 0 0;color:var(--ink-soft)} .quiz-result.is-wildcard{position:relative;padding-top:24px} .quiz-result.is-wildcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--sage-deep),var(--sage-soft),var(--sage))} .quiz-result.is-wildcard .quiz-badge{background:var(--sage-deep);color:#FBFAF6} [data-theme="dark"] .quiz-result.is-wildcard .quiz-badge{color:#181A16} .quiz-arch{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)} .quiz-arch header{margin-bottom:14px} .quiz-arch h4{font-size:1.25rem;color:var(--sage-deep)} .quiz-arch-title{margin:2px 0 0;font-family:var(--serif);font-size:1.02rem;color:var(--ink-soft)} .quiz-arch-score{margin:8px 0 0;font:500 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)} .quiz-arch p{margin:0 0 12px;font-size:.96rem;color:var(--ink-soft)} .quiz-arch p:last-child{margin-bottom:0} .quiz-arch-suited strong{color:var(--ink)} .quiz-motto{font-family:var(--serif);font-size:1.1rem;color:var(--sage-deep)} .quiz-cta{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)} .quiz-cta h4{font-size:1.22rem;color:var(--sage-deep)} .quiz-help-head{margin:14px 0 8px;font:500 .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)} .quiz-help{margin:0;padding-left:20px;color:var(--ink-soft)} .quiz-help li{margin-bottom:8px} .quiz-help strong{color:var(--ink)} .quiz-disclaimer{margin:18px 0 0;font-size:.86rem;font-style:italic;color:var(--ink-faint)} .quiz-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} @media(max-width:520px){ .quiz-panel>summary{padding:20px 44px 20px 18px} .quiz-panel>summary::after{right:18px} .quiz-body{padding:20px 18px 24px} .quiz-arch{padding:18px} .quiz-nav .btn,.quiz-actions .btn{flex:1 1 100%} } /* article */ .prose{max-width:70ch;margin:0 auto;font-size:1.08rem} .prose h2{margin:1.8em 0 .6em;font-size:1.7rem} .prose p{margin:0 0 1.25em} .prose strong{font-weight:600;color:var(--ink)} .prose em{font-style:italic} .prose blockquote{margin:1.8em 0;padding:0 0 0 24px;border-left:2px solid var(--sage-soft);font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--sage-deep)} .meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.85rem;color:var(--ink-faint);letter-spacing:.04em} .meta .dot{color:var(--line)} .banner{aspect-ratio:21/9;overflow:hidden;border-radius:var(--r)} .banner img{width:100%;height:100%;object-fit:cover} /* article list — adapts to however many posts exist */ .post-list{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .post-list:not(:has(>:nth-child(2))){grid-template-columns:1fr;max-width:840px;margin:0 auto} .post-list:not(:has(>:nth-child(2))) .post-card{flex-direction:row;align-items:stretch} .post-list:not(:has(>:nth-child(2))) .post-card .card-img{flex:0 0 44%;aspect-ratio:auto} .post-list:not(:has(>:nth-child(2))) .post-card .card-body{padding:32px 34px} .post-list:not(:has(>:nth-child(2))) .post-card h3{font-size:1.35rem} .post-list:not(:has(>:nth-child(2))) .post-card .meta{margin-top:20px} @media(max-width:640px){.post-list:not(:has(>:nth-child(2))) .post-card{flex-direction:column}.post-list:not(:has(>:nth-child(2))) .post-card .card-img{aspect-ratio:16/10}} .post-card .meta{margin-top:auto;padding-top:16px} .empty-state{max-width:46ch;margin:8px auto 0;text-align:center;color:var(--ink-soft)} .post-list:not(:empty)+.empty-state{display:none} .post-card{display:flex;text-decoration:none;color:inherit;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s} .post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .post-card .card-img{aspect-ratio:16/10} .post-card h3{font-size:1.18rem} .ph{background:repeating-linear-gradient(135deg,var(--tint),var(--tint) 10px,var(--surface-2) 10px,var(--surface-2) 20px);display:grid;place-content:center} .ph span{font:.76rem/1.5 var(--mono);letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase} .tagline{font:.72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)} /* single testimonial */ .solo{max-width:820px;margin:0 auto;text-align:center} .solo h2{color:var(--sage-deep)} .solo-quote{margin:40px 0 0;padding:0} .solo-quote .mark{display:block;font-family:var(--serif);font-size:4.5rem;line-height:.5;color:var(--sage-soft);opacity:.55;margin-bottom:26px} .solo-quote p{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.55;color:var(--ink);margin:0} .solo-quote footer{display:flex;flex-direction:column;gap:5px;align-items:center;margin-top:28px} .solo-quote .who{font:500 .82rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep)} .solo-quote .where{font-size:.85rem;color:var(--ink-faint);letter-spacing:.04em} .solo-quote footer::before{content:"";width:34px;height:1px;background:var(--sage-soft);margin-bottom:14px} .solo-note{max-width:56ch;margin:44px auto 10px;color:var(--ink-soft);font-size:1rem} /* forms */ .form{display:grid;gap:20px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:640px){.row2{grid-template-columns:1fr}} .field{display:grid;gap:7px} .field>label{font:500 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)} .field input:not(.sr),.field select,.field textarea{font:400 1rem/1.5 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;min-height:48px;width:100%} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sage-soft);outline-offset:1px;border-color:var(--sage-soft)} .hint{font-size:.85rem;color:var(--ink-faint)} /* availability + contact method picker */ .sched{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:22px 24px 26px;margin:0;display:grid;gap:26px} .field-label{display:block;font:500 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)} .sched-label{display:block;font:500 .78rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px} .sched-label .hint{letter-spacing:0;text-transform:none;font-weight:400} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:.94rem;cursor:pointer;transition:background .18s,border-color .18s,color .18s} .chip:hover{border-color:var(--sage-soft);color:var(--ink)} input:checked+.chip{background:var(--sage-deep);border-color:var(--sage-deep);color:#FBFAF6} [data-theme="dark"] input:checked+.chip{color:#181A16} input:focus-visible+.chip,input:focus-visible+.cell{outline:2px solid var(--sage-soft);outline-offset:2px} /* A grid item will not shrink below its own content unless told to, and a fieldset carries min-inline-size:min-content from the UA stylesheet. Without this the 520px availability grid never let .avail-scroll's own scrollbar engage — it pushed the whole page sideways on a phone instead. */ .form,.form .field,.sched,.avail{min-width:0} .avail-scroll{overflow-x:auto;padding-bottom:4px} .avail-grid{display:grid;grid-template-columns:auto repeat(7,minmax(46px,1fr));gap:6px;align-items:center;min-width:520px} .avail-grid .day{text-align:center;font:500 .76rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)} .avail-grid .day abbr{text-decoration:none;border:0} .avail-grid .slot{display:grid;gap:2px;padding-right:16px;font-size:.9rem;color:var(--ink-soft);white-space:nowrap} .avail-grid .slot small{font-size:.74rem;color:var(--ink-faint)} .cell{height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);cursor:pointer;transition:background .16s,border-color .16s;position:relative} .cell:hover{border-color:var(--sage-soft);background:var(--tint)} input:checked+.cell{background:var(--sage-deep);border-color:var(--sage-deep)} input:checked+.cell::after{content:"";position:absolute;left:50%;top:48%;width:11px;height:6px;border-left:1.8px solid #FBFAF6;border-bottom:1.8px solid #FBFAF6;transform:translate(-50%,-50%) rotate(-45deg)} [data-theme="dark"] input:checked+.cell::after{border-color:#181A16} .field input[type="file"]{padding:10px 12px;font-size:.92rem;cursor:pointer} .field input[type="file"]::file-selector-button{font:500 .82rem/1 var(--sans);letter-spacing:.04em;color:var(--sage-deep);background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;margin-right:14px;cursor:pointer} .field input[type="file"]::file-selector-button:hover{border-color:var(--sage-soft);color:var(--sage)} .file-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;font-size:.88rem;color:var(--ink-soft)} .file-list li{display:flex;justify-content:space-between;gap:16px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r)} .file-list li span{color:var(--ink-faint);font-size:.82rem;white-space:nowrap} .file-list li.over{border-color:var(--sage-soft)} .file-list li.over span{color:var(--sage-deep)} .form-note{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font-size:.9rem;color:var(--ink-soft)} .form-status{display:none;padding:14px 18px;border-radius:var(--r);font-size:.94rem;border:1px solid var(--sage-soft);background:var(--tint);color:var(--sage-deep)} .form-status.show{display:block} .contact-grid{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:clamp(32px,6vw,72px);align-items:start} @media(max-width:860px){.contact-grid{grid-template-columns:1fr}} .info-list{list-style:none;margin:0;padding:0;display:grid;gap:22px} .info-list dt,.info-list .k{font:500 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px} .info-list a{text-decoration:none} .info-list a:hover{text-decoration:underline} /* page head */ .page-head{padding:clamp(48px,6vw,84px) 0 0} .page-head h1{max-width:22ch} .page-head .lede{max-width:60ch;margin-top:18px} .page-hero-img{margin-top:clamp(32px,5vw,56px);max-width:420px;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)} .page-hero-img img{width:100%;height:100%;object-fit:cover} /* about */ .bio{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:clamp(32px,6vw,72px);align-items:start} @media(max-width:820px){.bio{grid-template-columns:1fr}.bio figure{max-width:300px}} .bio figure{margin:0} .bio img{width:100%;height:auto;border-radius:var(--r)} .bio figcaption{font-size:.85rem;color:var(--ink-faint);margin-top:12px;letter-spacing:.04em} .bio-col{display:grid;gap:28px} .badge{display:grid;justify-items:center;gap:14px;text-align:center} .bio-col .badge{border-top:1px solid var(--line);padding-top:24px} .foot-badge .badge{justify-items:start;text-align:left} .foot-badge .badge p{max-width:30ch;color:var(--ink-faint)} [data-theme="dark"] .foot-badge .badge img{background:none;padding:0;width:150px} .badge img{width:150px;height:auto} [data-theme="dark"] .badge img{width:178px;padding:14px;box-sizing:border-box;background:#fff;border-radius:var(--r);filter:none} .badge p{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-faint);letter-spacing:.03em;max-width:26ch} /* cta band */ .band{background:var(--sage-deep);color:#FBFAF6;text-align:center} [data-theme="dark"] .band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band h2{color:inherit} .band p{color:rgba(251,250,246,.82);max-width:52ch;margin:16px auto 30px} [data-theme="dark"] .band p{color:var(--ink-soft)} .band .eyebrow{color:rgba(251,250,246,.65)} [data-theme="dark"] .band .eyebrow{color:var(--sage)} [data-theme="dark"] .band .btn-light{border-color:var(--sage);color:var(--sage-deep)} [data-theme="dark"] .band .btn-light:hover{background:var(--sage);color:#181A16} /* footer */ .site-foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 32px;font-size:.94rem} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} @media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} .foot-grid h4{font:500 .74rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px} .foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .foot-grid .where-we-are{color:var(--sage-deep)} .foot-grid a{color:var(--ink-soft);text-decoration:none} .foot-grid a:hover{color:var(--sage-deep);text-decoration:underline} .foot-brand p{color:var(--ink-soft);max-width:34ch;margin-top:16px} .socials{display:flex;gap:10px;margin-top:22px} .socials a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft)} .socials a:hover{border-color:var(--sage-soft);color:var(--sage-deep);background:var(--surface)} .socials svg{width:17px;height:17px} .foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--ink-faint);font-size:.86rem} .foot-bottom a{color:var(--ink-faint);text-decoration:none} .foot-bottom a:hover{color:var(--sage-deep)} /* search */ .search-box{display:flex;gap:12px;flex-wrap:wrap} .search-box input{flex:1;min-width:240px} .results{margin-top:32px;display:grid;gap:2px} .result{padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;display:block;color:inherit} .result:hover h3{color:var(--sage-deep)} .result p{color:var(--ink-soft);font-size:.95rem;margin:8px 0 0} .result .where{font:.74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px} .empty{color:var(--ink-faint);padding:24px 0} /* 404 */ .oops{min-height:64vh;display:grid;place-content:center;text-align:center;gap:8px} .oops .big{font-family:var(--serif);font-size:clamp(4rem,14vw,9rem);line-height:1;color:var(--sage-soft)} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}