/* Homepage v3. The fixed wordmark and original time footer remain in index.html. */
:root{--home-ink:#282b27;--home-muted:#656860;--home-gap:clamp(20px,3vw,48px)}
.home-scenes{position:relative;background:#fff;color:var(--home-ink)}
.home-section{position:relative;min-height:100svh;padding:80px 5vw 56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--home-gap);align-content:start;scroll-margin-top:20px}
.home-scenes>.home-section:first-child{padding-top:125px}
.home-section.hero{height:auto;min-height:100svh;padding-top:125px;overflow:visible}
.surface{position:relative;z-index:11;background:transparent;padding:24px;min-width:0}
.home-section .dot-layout{inset:30px 3vw;gap:24px;grid-template-rows:repeat(12,minmax(0,1fr));z-index:0}
.home-section .dot-panel{background-image:radial-gradient(circle,#aaa 1px,transparent 1.15px);background-size:12px 12px;background-position:0 0}
.home-section .dot-panel-a{grid-column:1/4;grid-row:1/6}.home-section .dot-panel-b{grid-column:2/5;grid-row:7/13}.home-section .dot-panel-c{grid-column:5/13;grid-row:1/10}.home-section .dot-panel-d{grid-column:6/13;grid-row:10/13}
.home-header{position:absolute;left:5vw;right:5vw;top:24px;display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:21;background:transparent;padding:4px 0}
.home-scenes .site-header,.home-scenes .site-controls button{background:transparent}
.home-name{font-size:15px;font-weight:700;letter-spacing:-.04em;min-height:44px;display:flex;align-items:center}
.home-header .nav{position:static;display:flex;gap:28px;line-height:44px;font-size:12px}
.menu-toggle{display:none}
.eyebrow,.section-corner,.panel-index,.sample-number{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;line-height:1.6;font-weight:400}
.home-section h1,.home-section h2{font-size:clamp(32px,3.2vw,52px);font-weight:500;letter-spacing:-.045em;line-height:1.2;margin:22px 0}
.home-section h3{font-size:clamp(21px,1.8vw,28px);font-weight:500;line-height:1.4;letter-spacing:-.03em;margin:18px 0}
.home-section p{font-size:14px;line-height:1.9;margin:0 0 20px}.home-section p.eyebrow,.home-section p.panel-index,.home-section p.section-corner{font-size:10px}
.hero-heading{grid-column:1/6;max-width:510px;padding-top:15px}
.hero-space{grid-column:1/-1;min-height:clamp(85px,14svh,170px);pointer-events:none}
.hero-intro{grid-column:8/13;max-width:500px;justify-self:end}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.action{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:46px;border:1px solid #333;padding:8px 15px;font-size:12px;line-height:1.6;transition:background .15s,color .15s}.action:hover{background:#282b27;color:#fff}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px;text-decoration:underline;text-underline-offset:5px;line-height:1.6}
.section-corner{grid-column:1/6;justify-self:start;padding:7px 12px;margin-top:10px!important}
.section-heading{grid-column:1/6;align-self:start}.section-heading>p:last-child{color:var(--home-muted)}
.service-workspace{grid-column:7/13;grid-row:1/3;padding:28px}
.service-tabs{display:flex;border-bottom:1px solid #ccc;gap:10px}
.service-tabs button{font:inherit;font-size:12px;min-height:48px;flex:1;border:0;background:#fff;border-bottom:2px solid transparent;padding:8px 0;cursor:pointer;color:#666}
.service-tabs button[aria-selected=true]{border-color:#282b27;color:#282b27}
.service-panel{padding-top:22px;min-height:355px}.service-panel[hidden]{display:none}.service-panel>p{color:var(--home-muted)}
.service-panel ul{list-style:none;padding:0;margin:20px 0;font-size:12px;line-height:2}.service-panel li::before{content:'+ ';color:#777}
.work-preview{grid-column:1/6;grid-row:2/4;margin:0;padding:14px;align-self:start}
.work-preview>a{display:block;background:#f0eee8;height:270px;overflow:hidden}.work-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%}
.work-preview figcaption{display:grid;gap:8px;padding:17px 7px 5px;font-size:12px;line-height:1.6}.work-preview small{font-size:10px;color:var(--home-muted)}
.service-contact{grid-column:8/13;grid-row:3;padding:24px;align-self:end}.service-contact p{font-size:12px}
.community .section-heading{grid-column:1/6}.community-copy{grid-column:8/13;grid-row:1/3}.community-copy p{color:var(--home-muted)}
.resource-samples{grid-column:1/7;grid-row:2/4;margin-top:60px;padding:24px}.sample-row{display:grid;grid-template-columns:22px 1fr 14px;gap:15px;align-items:center;min-height:83px;border-top:1px solid #ccc;padding:12px 0}.sample-row strong{font-size:14px;font-weight:400;display:block}.sample-row small{display:block;font-size:11px;color:var(--home-muted);margin-top:8px}.sample-row:hover strong{text-decoration:underline;text-underline-offset:4px}.resource-samples .sample-note{font-size:10px;line-height:1.8;margin:18px 0 0;color:var(--home-muted)}
.partner-note{grid-column:8/13;grid-row:3;margin-top:45px}.partner-note p:not(.eyebrow){font-size:12px;color:var(--home-muted)}
.dot-motion{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:none}
.dot-motion.is-active{display:block}
.home-section button:focus-visible,.home-section a:focus-visible,.service-panel:focus-visible{outline:2px solid #34382f;outline-offset:4px}
@media(max-width:1100px) and (min-width:769px){.home-section{padding-left:4vw;padding-right:4vw;gap:22px}.surface{padding:20px}.hero-intro{grid-column:7/13}.service-workspace{grid-column:6/13}.community-copy,.partner-note{grid-column:7/13}.resource-samples{grid-column:1/7}.home-section h1,.home-section h2{font-size:36px}}
@media(max-width:768px){
.home-section,.home-section.hero{display:flex;flex-direction:column;gap:36px;padding:72px 6vw 44px;min-height:100svh;height:auto;overflow:visible}
.home-section.hero{padding-top:110px;gap:20px}
.home-scenes>.home-section:first-child{padding-top:110px}
.home-header{left:6vw;right:6vw;top:20px;flex-wrap:wrap;gap:0}.home-name{font-size:13px}.menu-toggle{display:block;min-height:44px;background:transparent;border:0;font:inherit;font-size:12px;padding:8px 0 8px 18px;cursor:pointer}
.home-header .nav{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid #ddd;padding:8px 0}.home-header .nav.is-open{display:flex}.home-header .nav a{padding:2px 10px}
.home-section .dot-layout{inset:88px 4vw 24px;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.home-section .dot-panel-a{grid-column:1/3;grid-row:1/5}.home-section .dot-panel-b{grid-column:1/4;grid-row:6/13}.home-section .dot-panel-c{grid-column:3/7;grid-row:1/6}.home-section .dot-panel-d{grid-column:4/7;grid-row:7/13}
.surface{padding:20px}.hero-heading{width:88%;align-self:flex-start;padding:16px}.home-section h1,.home-section h2{font-size:34px;margin:18px 0}.home-section p{font-size:13px}.hero-space{min-height:105px}.hero-intro{width:92%;align-self:flex-end;padding:22px 18px}.section-corner{align-self:flex-start}.section-heading{width:92%;align-self:flex-start}.service-workspace{width:94%;align-self:flex-end;padding:20px}.service-panel{min-height:360px}.work-preview{width:88%;align-self:flex-start}.work-preview>a{height:250px}.service-contact{width:92%;align-self:flex-end}.community-copy{width:94%;align-self:flex-end}.resource-samples{width:96%;margin-top:0;padding:20px}.partner-note{width:92%;align-self:flex-end;margin-top:0}.home-section h3{font-size:23px}.sample-row strong{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.action{transition:none}.dot-motion{display:none!important}}
/* Reading sizes are independent of the small editorial labels. */
.home-section p,.home-section .partner-note p:not(.eyebrow),.home-section .service-contact p{font-size:16px;line-height:1.85}
.home-section p.eyebrow,.home-section p.panel-index,.home-section p.section-corner{font-size:10px}
.home-section .sample-note{font-size:11px}.service-panel ul{font-size:14px}.sample-row strong{font-size:16px}.home-section .action,.home-section .text-link{font-size:14px}
/* Keep the complete fixed wordmark over reading surfaces, at watermark strength. */
.logo.is-reading-watermark{z-index:12;opacity:.065;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:none;padding:0}
.logo.is-reading-watermark img{visibility:visible;filter:brightness(0)}
@media(max-width:768px){
 .hero-heading{width:100%;padding:16px 12px}
 .home-section h1{font-size:clamp(26px,7.6vw,32px)}
 .home-header .nav{display:flex}
 .menu-toggle{display:none}
 .home-header.has-menu-enhancement .menu-toggle{display:block}
 .home-header.has-menu-enhancement .nav{display:none}
 .home-header.has-menu-enhancement .nav.is-open{display:flex}
 .home-header:not(.has-menu-enhancement){position:relative;top:auto;left:auto;right:auto;margin-top:-85px}
}
@media(max-width:768px){.hero-space{min-height:165px}}

/* Issue 02: compact heading surface behind the complete fixed wordmark. */
.hero-heading{width:max-content;max-width:100%;justify-self:start;padding:16px 18px;z-index:9;background:transparent}
.hero-heading h1{font-size:clamp(32px,3.1vw,44px);margin:12px 0 0}
.hero-heading p.eyebrow{margin:0}
.hero .surface{z-index:9}
.work-preview figcaption .photo-credit{display:inline-flex;width:fit-content;height:auto;background:none;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:var(--home-muted);padding:3px 0;min-height:24px}
@media(max-width:768px){.hero-heading{width:max-content;max-width:100%;padding:14px 12px}.hero-heading h1{font-size:clamp(26px,7.6vw,32px);margin:12px 0 0}}
@media(max-width:768px){.hero-space{min-height:max(165px,calc(50svh - 190px))}}
html[lang=en] .hero-heading{max-width:min(510px,100%)}
html[lang=en] .hero-heading h1{font-size:clamp(30px,3vw,43px)}
@media(max-width:768px){html[lang=en] .hero-heading h1{font-size:clamp(25px,7vw,32px)}}
/* 2026-10-04: short service directory and independent community offer. */
.services .section-heading{grid-column:1/5}
.service-directory{grid-column:6/13;padding:28px;align-self:start}
.home-section h3.directory-group-title{font:11px var(--font-mono);letter-spacing:.07em;line-height:1.6;margin:0;padding:0 0 12px;color:#656860}
.directory-group+.directory-group{margin-top:32px}
.service-directory-row{display:grid;grid-template-columns:22px minmax(0,1fr) 18px;gap:16px;align-items:start;border-top:1px solid #d8d8d2;min-height:88px;padding:18px 0;overflow-wrap:anywhere}
.directory-number{font:10px var(--font-mono);line-height:28px;color:#73756e}
.service-directory-row strong{font-size:clamp(18px,1.55vw,22px);font-weight:400;line-height:1.5;display:block}
.directory-explanation{display:block;font-size:15px;line-height:1.8;color:#656860;margin-top:4px}
.service-directory-row:hover strong{text-decoration:underline;text-underline-offset:5px}
.home-section .directory-note{font-size:14px;color:#656860;margin:24px 0 4px}
.directory-actions{display:flex;gap:4px 22px;flex-wrap:wrap}
.community .section-heading{grid-column:1/6}
.community-offer{grid-column:7/13;align-self:start;padding:28px}
.community-values{list-style:none;padding:0;margin:0 0 26px}
.community-values li{padding:16px 0;border-top:1px solid #d8d8d2}
.community-values strong{display:block;font-size:20px;line-height:1.5;font-weight:400}
.community-values li p{margin:6px 0 0;color:#656860}
.home-section .membership-note{font-size:14px;color:#656860;margin:0 0 24px}
.community-partnership{margin-top:36px;border-top:1px solid #d8d8d2;padding-top:10px}
.community-partnership summary{cursor:pointer;font-size:14px;line-height:1.8;min-height:44px;padding:10px 0;list-style-position:inside}
.community-partnership p{padding-top:14px;color:#656860}
.community-partnership summary:focus-visible{outline:2px solid #34382f;outline-offset:4px}
@media(max-width:1100px) and (min-width:769px){.service-directory{grid-column:5/13;padding:24px}.community-offer{grid-column:6/13}.services .section-heading{padding:20px 14px}.services h2{font-size:32px}}
@media(max-width:768px){.services .section-heading,.community .section-heading{width:100%}.service-directory,.community-offer{width:100%;padding:20px 14px}.service-directory-row{gap:10px;grid-template-columns:18px minmax(0,1fr) 14px}.directory-explanation{font-size:15px}.directory-actions{gap:4px 18px}.service-directory-row strong{font-size:18px}.community-values strong{font-size:19px}}

/* Brand/content services occupy the open space beneath the left-hand title. */
.services{row-gap:24px}
.services .section-heading{grid-column:1/6;grid-row:1;padding-bottom:0}
.services .service-directory{grid-column:7/13;grid-row:1/3}
.brand-directory{grid-column:1/6;grid-row:2;align-self:start;padding:0 24px 24px}
@media(max-width:1100px) and (min-width:769px){.brand-directory{padding:0 20px 20px}}
@media(max-width:768px){.services{gap:28px}.brand-directory{width:100%;padding:20px 14px}}

/* Only the opening Hero keeps its modular composition. Reading screens share a grid. */
.home-section:not(.hero) .dot-layout{inset:0;display:block}
.home-section:not(.hero) .dot-panel{display:none}
.home-section:not(.hero) .dot-panel-a{display:block;position:absolute;inset:0;background-position:0 var(--dot-grid-phase,0px)}

/* Restore the original logo-only opening before the current reading content. */
.home-scenes>.home-section.logo-hero{display:block;height:100svh;min-height:480px;padding:0;overflow:hidden}
.home-section.logo-hero .dot-layout{inset:112px 3vw 32px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:24px}
@media(max-width:600px){.home-scenes>.home-section.logo-hero{min-height:420px}.home-section.logo-hero .dot-layout{inset:94px 6% 24px;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}}
@media(max-height:540px) and (min-width:601px){.home-scenes>.home-section.logo-hero{min-height:360px}.home-section.logo-hero .dot-layout{top:78px;bottom:20px;gap:16px}}

/* Invert the pixels under the wordmark as it crosses into the time/photo screen. */
.logo.is-negative{z-index:12;opacity:1;mix-blend-mode:difference;mask-image:none;-webkit-mask-image:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:none;padding:0}
.logo.is-negative img{visibility:visible;filter:brightness(0) invert(1)}
