@font-face{font-family:PortfolioSans;src:local("Arial");font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f2efe7;color:#161612;font-family:PortfolioSans,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.skip{position:fixed;z-index:50;left:1rem;top:1rem;transform:translateY(-160%);padding:.75rem 1rem;background:#fff;border:2px solid #111;border-radius:999px}.skip:focus{transform:none}.site-head{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1.1rem,3vw,3rem);border-bottom:1px solid rgba(18,18,14,.18);background:rgba(242,239,231,.9);backdrop-filter:blur(18px)}.brand{display:flex;gap:.7rem;align-items:center;font-weight:700;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#191915;color:#f6f1e8;font-weight:900}.site-head nav{display:flex;gap:clamp(.75rem,1.8vw,2rem);align-items:center;font-size:.82rem;font-weight:600}.site-head nav a{border-bottom:1px solid transparent}.site-head nav a:hover,.site-head nav a:focus-visible{border-color:currentColor}.nav-cta{padding:.72rem 1rem!important;border:1px solid #191915!important;border-radius:999px}.hero{min-height:calc(100svh - 70px);padding:clamp(3rem,8vw,8rem) clamp(1.1rem,5vw,5.5rem) 3rem;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid #29291f}.eyebrow,.kicker{font-size:.72rem;line-height:1.2;text-transform:uppercase;letter-spacing:.17em;font-weight:800}.eyebrow{display:flex;gap:.55rem;align-items:center}.status-dot{width:.48rem;height:.48rem;border-radius:50%;background:#f05b39;box-shadow:0 0 0 .22rem rgba(240,91,57,.14)}.hero h1{max-width:1300px;margin:2.5rem 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(4rem,10.8vw,10rem);line-height:.83;letter-spacing:-.075em;font-weight:400}.hero h1 em{font-weight:400;color:#f05b39}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}.hero-bottom>p{max-width:42rem;margin:0;font-size:clamp(1.1rem,1.8vw,1.55rem);line-height:1.4;letter-spacing:-.02em}.round-link{flex:0 0 auto;width:9rem;height:9rem;border:1px solid #24241d;border-radius:50%;padding:1.35rem;display:flex;flex-direction:column;justify-content:space-between;transition:.25s ease}.round-link b{font-size:2rem;font-weight:400;text-align:right}.round-link:hover,.round-link:focus-visible{background:#191915;color:#fff;transform:rotate(-4deg)}.work{padding:clamp(4rem,8vw,8rem) clamp(1.1rem,3vw,3rem)}.section-intro{display:grid;grid-template-columns:1.5fr .8fr;gap:3rem;align-items:end;max-width:1450px;margin:0 auto 4rem}.section-intro h2,.preview-copy h2,.approach h2,.contact h2,.template-showroom h2{margin:.8rem 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.8rem,5vw,5.6rem);line-height:.96;letter-spacing:-.055em;font-weight:400}.section-intro>p{max-width:38rem;margin:0 0 .5rem;color:#525246;font-size:1.05rem}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6rem 2rem;max-width:1450px;margin:0 auto}.project{min-width:0}.project-image{position:relative;overflow:hidden;display:block;aspect-ratio:16/10;border-radius:1.3rem;background:#ddd8cc;box-shadow:0 .3rem 1.5rem rgba(30,29,24,.08)}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.75,.2,1)}.project-image:hover img,.project-image:focus-visible img{transform:scale(1.025)}.visit{position:absolute;right:1rem;bottom:1rem;padding:.65rem .9rem;border-radius:999px;background:rgba(250,247,239,.93);color:#161612;font-size:.75rem;font-weight:800;opacity:0;transform:translateY(.45rem);transition:.25s ease}.project-image:hover .visit,.project-image:focus-visible .visit{opacity:1;transform:none}.project-copy{padding:1.15rem .2rem 0}.meta{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;color:#656559;text-transform:uppercase;letter-spacing:.11em;font-size:.64rem;font-weight:800}.badge{padding:.42rem .62rem;border:1px solid currentColor;border-radius:999px;letter-spacing:.08em}.badge.live{color:#246a4b}.badge.independent{color:#735917}.badge.preview{color:#b83f28}.project h3{margin:.85rem 0 .45rem;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.75rem,2.7vw,3rem);line-height:1;letter-spacing:-.04em;font-weight:400}.project h3 a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s}.project h3 a:hover,.project h3 a:focus-visible{background-size:100% 1px}.project-copy>p{max-width:40rem;margin:.65rem 0;color:#56564b}.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 0;padding:0;list-style:none}.tags li{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#77766a}.tags li+li:before{content:"·";margin-right:.55rem}.preview-block{max-width:1450px;margin:8rem auto 0;padding:1.4rem;display:grid;grid-template-columns:.72fr 1.28fr;gap:1.5rem;align-items:stretch;background:#171712;color:#f2efe7;border-radius:1.6rem}.preview-copy{padding:clamp(1rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}.preview-copy .kicker{color:#c9e875;margin:0 0 1.5rem}.preview-copy .meta{color:#c7c5b9}.preview-copy .badge.preview{color:#c9e875}.preview-copy h2{font-size:clamp(2.7rem,4.8vw,5rem)}.preview-copy>p:not(.kicker){color:#bdbbb0;max-width:38rem}.text-link{display:inline-block;align-self:flex-start;margin-top:1rem;border-bottom:1px solid currentColor;font-weight:700}.preview-image{overflow:hidden;border-radius:1.1rem;min-height:440px}.preview-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.preview-image:hover img,.preview-image:focus-visible img{transform:scale(1.025)}
.template-showroom{padding:clamp(5rem,9vw,9rem) clamp(1.1rem,3vw,3rem);background:#171712;color:#f2efe7}.template-showroom .section-intro>p{color:#bdbbb0}.template-showroom .kicker{color:#c9e875}.approach{padding:clamp(5rem,10vw,10rem) clamp(1.1rem,5vw,5.5rem);background:#d8e6cf}.approach>div:first-child{max-width:1200px}.approach h2{max-width:1100px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:5rem;border:1px solid rgba(22,22,18,.3);background:rgba(22,22,18,.3)}.principles article{background:#d8e6cf;padding:clamp(1.4rem,3vw,3rem)}.principles span{font-size:.68rem;letter-spacing:.13em}.principles h3{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,2vw,2.2rem);font-weight:400;margin:3rem 0 .8rem}.principles p{color:#42483e;margin:0}.contact{padding:clamp(6rem,12vw,12rem) clamp(1.1rem,5vw,5.5rem);background:#f05b39;color:#151510;text-align:center}.contact h2{font-size:clamp(3.6rem,8vw,8.2rem)}.contact h2 em{font-weight:400;color:#f8f1e6}.contact>p:not(.kicker){margin:2rem auto;max-width:48rem;font-size:1.2rem}.contact>a{display:inline-block;padding:1rem 1.35rem;border:1px solid currentColor;border-radius:999px;font-weight:800}.contact>a:hover,.contact>a:focus-visible{background:#151510;color:#fff}.contact small{display:block;margin:1rem auto 0;max-width:38rem}.selected-template{display:inline-block!important;padding:.55rem .85rem;border:1px solid currentColor;border-radius:999px;font-weight:800}.selected-template[hidden]{display:none!important}footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem clamp(1.1rem,3vw,3rem);background:#151510;color:#f2efe7;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}a:focus-visible{outline:3px solid #236bea;outline-offset:4px}.reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}@media(max-width:900px){.site-head nav>a:not(.nav-cta){display:none}.hero{min-height:82svh;padding-top:4rem}.hero h1{font-size:clamp(4rem,16vw,7rem)}.hero-bottom{align-items:flex-start}.round-link{width:7rem;height:7rem}.section-intro{grid-template-columns:1fr;gap:1.3rem}.project-grid{grid-template-columns:1fr;gap:4rem}.preview-block{grid-template-columns:1fr}.preview-image{min-height:320px;order:-1}.principles{grid-template-columns:1fr}.principles h3{margin-top:1.5rem}}@media(max-width:560px){.site-head{padding:.8rem 1rem}.brand>span:last-child{font-size:.88rem}.brand-mark{width:1.9rem;height:1.9rem}.nav-cta{font-size:.68rem;padding:.58rem .7rem!important}.hero{min-height:calc(100svh - 58px);padding:4rem 1rem 2rem}.eyebrow{font-size:.61rem}.hero h1{font-size:clamp(3.8rem,18.5vw,6rem);line-height:.86;margin:2rem 0}.hero-bottom{display:block}.hero-bottom>p{font-size:1.02rem}.round-link{margin-top:2.2rem;width:6.2rem;height:6.2rem;font-size:.72rem}.work,.template-showroom{padding:4.5rem 1rem}.section-intro{margin-bottom:2.6rem}.section-intro h2,.preview-copy h2,.approach h2,.template-showroom h2{font-size:clamp(2.6rem,12vw,4.4rem)}.project-grid{gap:3.4rem}.project-image{border-radius:.85rem}.visit{opacity:1;transform:none}.preview-block{margin-top:5rem;padding:.65rem;border-radius:1.1rem}.preview-copy{padding:1.1rem .75rem 1.5rem}.preview-image{min-height:230px;border-radius:.75rem}.approach{padding:4.5rem 1rem}.principles{margin-top:3rem}.contact{padding:6rem 1rem}.contact h2{font-size:clamp(3rem,15vw,5.5rem)}footer{flex-direction:column;align-items:flex-start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===========================================================================
   Two-axis template browse
   ---------------------------------------------------------------------------
   Industry axis  = "I run a salon."  Scannable bands, compact cards.
   Template axis  = "Show me the work." Fewer, larger, fully specified cards.
   Both panels ship as static HTML; main.js upgrades the switch to ARIA tabs.
   Density is the differentiator between the axes, not a different card.
   =========================================================================== */

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.browse{--head-h:66px;--rail-h:0px;max-width:1450px;margin:0 auto}
.browse-panel[hidden]{display:none!important}
.browse-panel{scroll-margin-top:calc(var(--head-h) + 1rem)}

/* ---- Axis switch ---- */
.browse-switch{display:flex;gap:.5rem;padding:.5rem;margin:0 auto;width:fit-content;max-width:100%;border:1px solid #ffffff2b;border-radius:1.4rem;background:#ffffff0a}
.browse-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1.5rem;border-radius:1rem;border:1px solid transparent;text-align:center;transition:background .2s ease,color .2s ease,border-color .2s ease}
.browse-tab-label{font-size:.95rem;font-weight:800;letter-spacing:-.01em}
.browse-tab-note{font-size:.72rem;color:#a9a79c;letter-spacing:.01em}
.browse-tab:hover{background:#ffffff12}
.browse-tab.is-active{background:#c9e875;color:#171712;border-color:#c9e875}
.browse-tab.is-active .browse-tab-note{color:#3d4a1e}
/* Without JS both panels are visible, so no tab may claim to be "current". */
.browse:not(.has-js) .browse-tab{background:#ffffff12}
.browse-hint{margin:1rem auto 3rem;max-width:44rem;text-align:center;color:#a9a79c;font-size:.85rem}
.browse:not(.has-js) .browse-hint{display:none}

/* ---- Panel headings ---- */
.browse-panel-head{margin:0 0 1.75rem}
.browse-panel-title{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.045em;font-weight:400}
.browse-panel-note{margin:.7rem 0 0;max-width:46rem;color:#bdbbb0;font-size:.95rem}
.browse:not(.has-js) #by-template{margin-top:5rem;padding-top:4rem;border-top:1px solid #ffffff2b}

/* ---- Industry rail: jump links across 8 bands ---- */
.ind-rail{position:sticky;z-index:10;top:var(--head-h);margin:0 -.5rem 2.5rem;padding:.75rem .5rem;background:rgba(23,23,18,.92);backdrop-filter:blur(14px);border-bottom:1px solid #ffffff1f}
.ind-rail ul{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
/* position:relative is load-bearing: the .vh spans inside these chips are
   position:absolute, so without it their containing block resolves to the
   sticky .ind-rail — an ancestor of the scrolling <ul>. An overflow container
   only clips descendants whose containing block sits inside it, so the spans
   escaped the scroller and widened the document to 1173px at 390px wide. */
.ind-rail a{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border:1px solid #ffffff2b;border-radius:999px;font-size:.78rem;font-weight:700;color:#e8e5da;transition:background .2s ease,border-color .2s ease,color .2s ease}
.ind-rail a span[aria-hidden]{color:#c9e875;font-size:.7rem;font-weight:800}
.ind-rail a:hover{background:#c9e875;border-color:#c9e875;color:#171712}
.ind-rail a:hover span[aria-hidden]{color:#3d4a1e}

/* ---- Industry bands ---- */
.ind-band{scroll-margin-top:calc(var(--head-h) + 5rem)}
.ind-band+.ind-band{margin-top:4.5rem;padding-top:3.5rem;border-top:1px solid #ffffff1f}
.ind-head{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:baseline;justify-content:space-between}
.ind-title{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.04em;font-weight:400}
.ind-lede{margin:.4rem 0 0;color:#c9e875;font-size:.88rem;font-weight:700}
.ind-count{flex:0 0 auto;margin:0;color:#a9a79c;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;font-weight:800}
.ind-count b{color:#f2efe7;font-size:.95rem;letter-spacing:0}
.ind-blurb{margin:.9rem 0 1.6rem;max-width:44rem;color:#bdbbb0;font-size:.92rem}

/* ---- Card grids ---- */
.tpl-grid{display:grid;gap:2rem 1.2rem;grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.tpl-grid.is-compact{gap:1.4rem 1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ---- Card ---- */
.tpl{display:flex;flex-direction:column;min-width:0;border:1px solid #ffffff2b;border-radius:1.2rem;overflow:hidden;background:#201f1a;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.tpl:hover,.tpl:focus-within{border-color:#c9e875a6;transform:translateY(-3px);box-shadow:0 1rem 2.2rem rgba(0,0,0,.35)}
.tpl-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#34332c}
.tpl-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.tpl:hover .tpl-shot img{transform:scale(1.03)}
.tpl-shot-hint{position:absolute;right:.7rem;bottom:.7rem;padding:.5rem .7rem;border-radius:999px;background:rgba(242,239,231,.94);color:#171712;font-size:.7rem;font-weight:800;opacity:0;transform:translateY(.4rem);transition:opacity .25s ease,transform .25s ease}
.tpl:hover .tpl-shot-hint,.tpl:focus-within .tpl-shot-hint{opacity:1;transform:none}
.tpl-body{flex:1;display:flex;flex-direction:column;padding:1.15rem 1.15rem 1.25rem}
.tpl-craft{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;margin:0}
.tpl-craft>span:first-child{text-transform:uppercase;letter-spacing:.14em;color:#c9e875;font-size:.63rem;font-weight:800}
.tpl-flag{flex:0 0 auto;padding:.3rem .55rem;border:1px solid rgba(240,91,57,.55);border-radius:999px;background:rgba(240,91,57,.16);color:#ffb7a1;font-size:.63rem;font-weight:800;letter-spacing:.02em}
.tpl-name{margin:.6rem 0 0;font-family:Georgia,"Times New Roman",serif;font-size:1.55rem;line-height:1.05;letter-spacing:-.035em;font-weight:400}
.tpl-blurb{margin:.55rem 0 0;color:#bdbbb0;font-size:.88rem;line-height:1.45}
.tpl-feats{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0;padding:0;list-style:none}
.tpl-feats li{padding:.32rem .5rem;border:1px solid #ffffff36;border-radius:999px;font-size:.65rem;color:#d8d5ca}
.tpl-int{display:grid;gap:.3rem;margin:.9rem 0 0;padding:.7rem .75rem;border-left:2px solid #c9e875;background:#ffffff0a;color:#d8d5ca;font-size:.7rem;line-height:1.4}
.tpl-int b{color:#c9e875}
/* Actions pin to the card foot so a grid row reads as one clean band. */
.tpl-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1.1rem}
/* Same containing-block guard: these buttons carry .vh label text. */
.tpl-btn{position:relative;padding:.6rem .8rem;border:1px solid #f2efe7;border-radius:999px;font-size:.72rem;font-weight:800;transition:background .2s ease,color .2s ease,border-color .2s ease}
.tpl-btn.is-primary{background:#f2efe7;color:#171712}
.tpl-btn.is-primary:hover{background:#fff;border-color:#fff}
.tpl-btn.is-admin{border-color:#c9e875;color:#c9e875;background:transparent}
.tpl-btn.is-admin:hover{background:#c9e875;color:#171712}
.tpl-btn.is-choose{border-color:#ffffff4d;color:#e8e5da;background:transparent}
.tpl-btn.is-choose:hover{border-color:#f2efe7;background:#ffffff14}

/* Compact cards trade the spec detail for scannability; the full card is one
   click away on the template axis, so nothing is only available here. */
.tpl.is-compact .tpl-feats,.tpl.is-compact .tpl-int{display:none}
.tpl.is-compact .tpl-name{font-size:1.3rem}
.tpl.is-compact .tpl-blurb{font-size:.83rem}
.tpl.is-compact .tpl-body{padding:1rem 1rem 1.1rem}

/* Lime reads far better than the page-wide blue on this near-black panel. */
.template-showroom a:focus-visible{outline:3px solid #c9e875;outline-offset:3px}

@media(max-width:900px){
  .browse{--head-h:58px}
  .tpl-grid,.tpl-grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
}
@media(max-width:620px){
  .browse{--head-h:56px}
  .browse-switch{width:100%;flex-direction:column;gap:.4rem}
  .browse-tab{padding:.75rem 1rem}
  .ind-rail{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
  .ind-rail ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem}
  .ind-rail ul::-webkit-scrollbar{display:none}
  .ind-rail a{white-space:nowrap}
  .tpl-grid,.tpl-grid.is-compact{grid-template-columns:1fr;gap:1.2rem}
  .tpl-shot-hint{opacity:1;transform:none}
  .ind-band+.ind-band{margin-top:3rem;padding-top:2.5rem}
}