/* Homepage layout. Canonical brand assets and tokens stay unchanged. */



.home .wrap{max-width:1240px}
.home header.site{padding-block:24px}
.home .brand .lockup.light{display:block}
.home .brand .lockup{height:42px}
.home nav.top{gap:36px;font-size:13px}
.home .hero{padding-top:112px;padding-bottom:88px}
.home .hero .eyebrow{margin-bottom:30px;color:var(--accent-ink)}
.home h1{font-size:clamp(42px,5.7vw,80px);line-height:1.04;letter-spacing:-.055em;max-width:1000px;margin-bottom:48px;text-wrap:initial}
.hero-bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:88px;align-items:center}
.home .hero .lede{font-size:18px;line-height:1.7;max-width:61ch;margin:0;color:var(--ink-muted)}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;justify-self:end}
.home .btn{padding:17px 23px;border-radius:var(--radius-md)}
.hero-actions .btn span{margin-left:32px}
.text-link{font-size:13px;color:var(--ink);text-decoration:none}
.text-link span{margin-left:20px}
.services-section{border-top:1px solid var(--rule);padding:72px 0 80px}
.section-title{display:grid;grid-template-columns:1fr 2fr;align-items:start;gap:32px}
.home h2{font-size:clamp(30px,3.2vw,44px);line-height:1.15;letter-spacing:-.04em}
.section-title .eyebrow{margin-top:8px}
.home .services{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:36px}
.home .service{border-top:1px solid var(--rule-strong);padding-top:22px;display:flex;flex-direction:column}
.service-index{font-size:12px;color:var(--accent-ink);margin-bottom:28px;font-weight:600}
.home .service h3{font-size:23px;line-height:1.25;min-height:58px;font-weight:600;margin-bottom:18px}
.home .service p{font-size:15px;line-height:1.8;flex:1;margin-bottom:24px}
.service-detail{font-size:11px;color:var(--ink-faint)}
.work-section{padding-top:80px;padding-bottom:88px}
.work-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:34px}
.work-heading h2{margin:0}
.work-heading>p{font-size:14px;margin:0 0 4px}
.featured-product{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
.product-art{background:var(--surface-sunken);padding:36px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:480px}
.art-label{font-size:11px;align-self:flex-start;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.product-art img{width:180px;height:180px;border-radius:32px;margin:36px 0}
.art-caption{font-size:18px;color:var(--ink);font-weight:600;letter-spacing:-.02em}
.product-story{background:var(--brand-charcoal);color:var(--brand-ivory);padding:48px}
.product-story .eyebrow{color:#c6bfb2;font-size:10px}
.product-story h3{font-size:36px;letter-spacing:-.04em;color:var(--brand-ivory);font-weight:700;margin-bottom:20px}
.product-story p{color:#c6bfb2;font-size:14px;line-height:1.8}
.product-story .product-lead{font-size:23px;line-height:1.35;color:var(--brand-ivory);letter-spacing:-.025em;margin-bottom:20px}
.product-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:26px 0 32px}
.product-facts li{font-size:10px;color:#c6bfb2;border:1px solid #463f33;padding:5px 9px;border-radius:4px;margin:0}
.product-link{color:#e08a5c;font-size:14px;font-weight:600;text-decoration:none;display:flex;justify-content:space-between;border-top:1px solid #463f33;padding-top:20px}
.product-language{display:block;font-size:10px;color:#c6bfb2;margin-top:9px}
.process-section{border-top:1px solid var(--rule);padding:80px 0 96px}
.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px}
.process-intro{font-size:15px;max-width:36ch;line-height:1.8}
.process-list{margin:0;padding:0;list-style:none}
.process-list li{display:grid;grid-template-columns:32px 1fr;gap:18px;border-top:1px solid var(--rule);padding:24px 0;margin:0}
.process-list li:first-child{padding-top:0;border:0}
.process-list>li>span{font-size:11px;color:var(--accent-ink);padding-top:4px}
.process-list h3{font-size:18px;font-weight:600;margin-bottom:8px}
.process-list p{font-size:14px;line-height:1.8}
.contact-section{background:var(--brand-charcoal);padding:88px 0;color:var(--brand-ivory)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px}
.contact-section .eyebrow{color:#e08a5c}
.contact-section h2{font-size:clamp(36px,4vw,54px);margin:0}
.contact-copy>p{color:#c6bfb2;font-size:15px;line-height:1.8}
.contact-email{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--brand-ivory);font-size:clamp(15px,1.5vw,19px);font-weight:600;text-decoration:none;border-bottom:1px solid #82796b;padding:16px 0;margin-bottom:24px;overflow-wrap:anywhere}
.contact-copy .contact-note{font-size:12px;max-width:48ch}
.home footer.site{padding-block:40px 48px}
.home footer.site .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.home footer.site nav{align-content:start;font-size:12px;gap:18px;margin:0}
.home .legal{font-size:11px;gap:8px 24px}
.home a:hover{text-decoration:underline;text-underline-offset:5px}
.home .btn:hover{text-decoration:none}

@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .home .brand .lockup.dark{display:block!important}
:root:not([data-theme="light"]) .home .brand .mono.dark{display:none!important}
}

@media(max-width:900px){.hero-bottom,.process-grid,.contact-grid{gap:40px}
.home .services{gap:24px}
.product-story{padding:32px}
.work-heading>p{max-width:25ch}
.home .hero{padding-top:72px}
.home .hero-actions{justify-self:start}
.section-title{grid-template-columns:1fr 2fr}
.product-art{min-height:430px;padding:28px}
.art-caption{font-size:15px}
}

@media(max-width:650px){
.home header.site .wrap{gap:24px;justify-content:space-between}
.home nav.top{width:100%;justify-content:space-between;gap:20px}
.home .brand .lockup{height:40px}
.home .hero{padding:56px 24px}
.home h1{font-size:44px;letter-spacing:-.05em;margin-bottom:28px;text-wrap:balance}
.home .hero .eyebrow{font-size:10px;margin-bottom:24px}
.hero-bottom{grid-template-columns:1fr;gap:28px}
.home .hero .lede{font-size:16px}
.hero-actions{flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap}
.hero-actions .btn span{margin-left:14px}
.text-link{font-size:12px}
.text-link span{margin-left:8px}
.section-title{grid-template-columns:1fr;gap:10px}
.home h2{font-size:32px}
.home .services{grid-template-columns:1fr;gap:32px;margin-top:16px}
.home .service{padding-top:18px}
.service-index{margin-bottom:16px}
.home .service h3{min-height:0;margin-bottom:12px;font-size:22px}
.desktop-break{display:none}
.home .service p{margin-bottom:16px}
.services-section{padding:48px 0}
.work-section{padding-top:48px;padding-bottom:56px}
.work-heading{display:block;margin-bottom:28px}
.work-heading>p{max-width:none;margin-top:20px}
.featured-product{grid-template-columns:1fr}
.product-art{min-height:320px;padding:24px}
.product-art img{width:148px;height:148px;margin:28px 0;border-radius:28px}
.product-story{padding:28px}
.product-story h3{font-size:32px}
.product-story .product-lead{font-size:23px}
.process-section{padding:56px 0}
.process-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
.process-intro{max-width:none}
.contact-section{padding:56px 0}
.contact-section h2{font-size:40px}
.home footer.site .wrap{grid-template-columns:1fr;gap:28px}
.home .legal{grid-template-columns:1fr}
.home .eyebrow{font-size:10px}
}


/* Dark theme: the charcoal panels are cut from the FIXED ARTWORK palette, and
   dark --surface is that same #171717 — so on a dark page both bands rendered
   invisible against their own background. Artwork colours belong to the logo;
   UI surfaces are theme-aware, so in dark these become raised surfaces and the
   band reads as a band again. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .product-story,
  :root:not([data-theme="light"]) .contact-section{background:var(--surface-raised)}
}
:root[data-theme="dark"] .product-story,
:root[data-theme="dark"] .contact-section{background:var(--surface-raised)}