/* warm.css (Oct 30, owner: "the head's back, but the rest is all blue; I want contrast").
   Navy stays only where the head lives. Reading sections become bright white with near-black ink;
   copper replaces blue as the accent; a few deep-ink sections give rhythm. Colour only: no fixed
   backgrounds, no blur, nothing that competes with the WebGL head. */
:root{
  --w-white:#FFFFFF;
  --w-paper:#FFFFFF;
  --w-paper-2:#F2F4F7;
  --w-ink:#111317;
  --w-ink-2:#3F444E;
  --w-ink-3:#626875;
  --w-line:rgba(17,19,23,.10);
  --w-line-2:rgba(17,19,23,.20);
  --w-copper:#B4621F;
  --w-copper-text:#8F4D15;
  --w-copper-bright:#EDAA70;
  --w-copper-fill-a:#B5641F;
  --w-copper-fill-b:#8F4A12;
  --w-deep-a:#16181E;
  --w-deep-b:#0E1014;
  --w-on-deep:#F5F2EC;
  --w-on-deep-2:#CFC9BD;
  --w-on-deep-line:rgba(245,242,236,.14);
  --w-deep-c:#1F2229;
  --w-deep-d:#22252D;
  --w-on-deep-3:#A9A396;
  --w-on-color:#FFFFFF;
  --w-card-shadow:0 1px 2px rgba(17,19,23,.06),0 12px 28px -14px rgba(17,19,23,.22);
}

/* Homepage + atelier pages: light reading theme tokens */
html body.agency-site,html body:not(.agency-site){
  --paper:var(--w-paper);--paper-2:var(--w-paper-2);--white:var(--w-white);
  --ink:var(--w-ink);--ink-70:var(--w-ink-2);--ink-45:var(--w-ink-3);
  --cobalt:var(--w-copper-text);--line:var(--w-line);--line-strong:var(--w-line-2);
  --veil:rgba(255,255,255,.85)}
html body{background:var(--w-paper)}

/* Navigation: white, ink text, copper action */
html body .nav,html body .nav.scrolled,html body .site-nav{background:rgba(255,255,255,.96) !important;border-bottom:1px solid var(--w-line) !important}
html body .nav .logo,html body .site-brand{color:var(--w-ink) !important}
html body .nav-links a,html body .site-links a{color:var(--w-ink-2) !important}
html body .nav-links .nav-studio,html body .site-links .studio-link{color:var(--w-copper-text) !important;border-left-color:var(--w-line-2) !important}
html body .nav .btn-ink,html body .site-nav .site-button,html body .qq-pill{background:linear-gradient(180deg,var(--w-copper-fill-a),var(--w-copper-fill-b)) !important;border-color:var(--w-copper-fill-b) !important;color:var(--w-on-color) !important}

/* Reading sections that used to be navy bands become bright white */
html body main>section.band.tbar,html body main>section.band.ks,html body main>section.band.pteaser,html body main>section.band.wall{
  --paper:var(--w-white);--paper-2:var(--w-paper);--white:var(--w-white);--ink:var(--w-ink);--ink-70:var(--w-ink-2);--ink-45:var(--w-ink-3);--cobalt:var(--w-copper-text);--line:var(--w-line);--line-strong:var(--w-line-2);
  background:var(--w-white) !important;color:var(--w-ink) !important;border-block:1px solid var(--w-line)}
html body main>section.band:is(.tbar,.ks,.pteaser,.wall) :is(h2,h3,.sec-title){color:var(--w-ink) !important}
html body main>section.band:is(.tbar,.ks,.pteaser,.wall) h2 em{color:var(--w-copper-text) !important}
html body main>section.band:is(.tbar,.ks,.pteaser,.wall) .kicker{color:var(--w-copper-text) !important}
html body main>section.band:is(.tbar,.ks,.pteaser,.wall) :is(p,.tbar-lede,.ks-lede){color:var(--w-ink-2) !important}
.tbar-field{background:var(--w-white) !important;border:1px solid var(--w-line-2) !important;box-shadow:0 0 0 5px rgba(181,100,31,.08),var(--w-card-shadow) !important}
.tbar-field input{color:var(--w-ink) !important}
.tbar-field input::placeholder{color:var(--w-ink-3) !important}
.tbar-meta{color:var(--w-ink-3) !important}.tbar-meta span::before{background:var(--w-copper) !important}
.ks-parts li{background:var(--w-paper) !important;border:1px solid var(--w-line) !important}
.ks-parts b{color:var(--w-ink) !important}.ks-parts span{color:var(--w-ink-2) !important}
.ks-stage{background:var(--w-deep-a) !important;border-color:var(--w-deep-a) !important}
.ks-control{background:var(--w-deep-c) !important;border-color:rgba(245,242,236,.12) !important}
.wall .wallmap *{border-color:var(--w-line-2)}
.pteaser .faq-list>*{background:var(--w-paper) !important;border:1px solid var(--w-line) !important;color:var(--w-ink) !important}

/* The remaining dark sections: deep ink with warm light, not navy */
html body main>section.band:not(.tbar):not(.ks):not(.pteaser):not(.wall):not(.bigfoot),html body>section:is(.fn-band,.fn-dark,.fn-form),html body main>section:is(.fn-band,.fn-dark,.fn-form),html body>div.band{
  --paper:var(--w-deep-b);--paper-2:var(--w-deep-a);--white:var(--w-deep-d);--ink:var(--w-on-deep);--ink-70:var(--w-on-deep-2);--ink-45:var(--w-on-deep-3);--cobalt:var(--w-copper-bright);--line:var(--w-on-deep-line);--line-strong:rgba(245,242,236,.28);
  background:radial-gradient(ellipse 60% 70% at 90% 0%,rgba(181,100,31,.16),transparent 65%),linear-gradient(180deg,var(--w-deep-a),var(--w-deep-b)) !important}
html body main>section.band:not(.tbar):not(.ks):not(.pteaser):not(.wall):not(.bigfoot) h2 em{color:var(--w-copper-bright) !important}
html body main>section.band:not(.tbar):not(.ks):not(.pteaser):not(.wall):not(.bigfoot) .kicker{color:var(--w-copper-bright) !important}
html body main>section.band .btn-ink{background:var(--w-on-deep) !important;color:var(--w-ink) !important;border-color:var(--w-on-deep) !important}

/* Primary buttons in light sections: copper. Secondary: ink outline */
html body main section:not(.band):not(.film) .btn-ink,html body main .band:is(.tbar,.ks,.pteaser,.wall) .btn-ink,html body main .site-button{background:linear-gradient(180deg,var(--w-copper-fill-a),var(--w-copper-fill-b)) !important;border-color:var(--w-copper-fill-b) !important;color:var(--w-on-color) !important}
html body main section:not(.band):not(.film) .btn-line{background:var(--w-white) !important;color:var(--w-ink) !important;border-color:var(--w-line-2) !important}

/* Light-section accents: copper instead of blue */
html body main section:not(.band):not(.film) .kicker,html body main .eyebrow{color:var(--w-copper-text)}
html body main section:not(.band):not(.film) h2 em,html body main section:not(.band):not(.film) .sec-title em{color:var(--w-copper-text) !important}
html body main section:not(.band) a:not(.btn):not(.site-button){color:var(--w-copper-text)}
html body .qstrip{background:var(--w-paper-2) !important;border-block:1px solid var(--w-line) !important}
html body .qstrip .btn-ink{background:linear-gradient(180deg,var(--w-copper-fill-a),var(--w-copper-fill-b)) !important;color:var(--w-on-color) !important;border-color:var(--w-copper-fill-b) !important}
html body .srow:hover{background:var(--w-paper-2) !important}

/* Cards in light sections lift with a crisp edge */
html body main section:not(.band):not(.film) :is(.pane,.tier,.who-card,.practice,.svc,.receipt){background:var(--w-white) !important;border:1px solid var(--w-line) !important;box-shadow:var(--w-card-shadow) !important}
.more-grid{border-color:var(--w-line-2) !important}
.more-grid>li{background:var(--w-white) !important}
.more-grid>li:last-child{background:var(--w-deep-a) !important}

/* Pricing focus cards: deep ink with copper prices */
.focused-card{background:linear-gradient(180deg,var(--w-deep-a),var(--w-deep-b)) !important;border-color:var(--w-deep-a) !important}
.focused-price{color:var(--w-copper-bright) !important}
.focused-card footer{border-top-color:var(--w-on-deep-line) !important}

/* Interior heroes keep their dark glass panel; buttons on it read clearly */
.phero .btn-ink{background:var(--w-white) !important;color:var(--w-ink) !important;border-color:var(--w-white) !important}
.phero .kicker{color:var(--w-copper-bright) !important}

/* Second template (site-nav pages) */
html body:has(>header.site-nav){--accent:var(--w-copper-text);--accent-ink:var(--w-on-color);--ink:var(--w-ink);--muted:var(--w-ink-2);--paper:var(--w-paper);--surface:var(--w-white);--soft:var(--w-paper-2);--line:var(--w-line)}
html body:has(>header.site-nav) main .eyebrow{color:var(--w-copper-text) !important}

/* Footer */
html body>footer,html body .site-footer{background:var(--w-paper-2) !important;color:var(--w-ink-2) !important;border-top:1px solid var(--w-line) !important}
html body>footer a,html body .site-footer a{color:var(--w-ink-2)}
html body .studio-footer-link{color:var(--w-copper-text) !important}
/* Leftover blue: links and mono meta lines */
html body main a:not(.btn):not(.site-button){color:var(--w-copper-text)}
html body main section.band:not(.tbar):not(.ks):not(.pteaser):not(.wall) a:not(.btn){color:var(--w-copper-bright)}
.tbar-meta,.tbar-meta *{color:var(--w-ink-3) !important}
/* Interior dark sections (pricing focus block and others): deep ink, not navy */
html body main section.focused-builds{background:linear-gradient(180deg,var(--w-deep-a),var(--w-deep-b)) !important}
html body main section.focused-builds :is(h2,.focused-heading h2){color:var(--w-on-deep) !important}
html body main section.focused-builds h2 em{color:var(--w-copper-bright) !important}
html body main section.focused-builds :is(p,.focused-note){color:var(--w-on-deep-2) !important}
html body main section.focused-builds .kicker{color:var(--w-copper-bright) !important}
/* Featured tier: deep ink statement card */
html body main section .tier.tier-hot{background:linear-gradient(180deg,var(--w-deep-a),var(--w-deep-b)) !important;border-color:var(--w-copper) !important}
html body main section .tier.tier-hot :is(h3,.tier-price,strong,b){color:var(--w-on-deep) !important}
html body main section .tier.tier-hot :is(p,li,span,small,div){color:var(--w-on-deep-2) !important}
html body main section .tier.tier-hot .kicker{color:var(--w-copper-bright) !important}
html body main section .tier.tier-hot .tier-price{color:var(--w-copper-bright) !important}
/* Links and meta inside dark cards */
.focused-card a,.focused-card footer a{color:var(--w-copper-bright) !important}
.focused-card :is(.focused-number,footer span){color:var(--w-on-deep-2) !important}
/* Second template headlines in the brand serif */
html body:has(>header.site-nav) main :is(h1,h2,h3){font-family:'Zodiak',Georgia,serif !important;font-weight:400 !important;letter-spacing:-.015em !important}
html body main section:not(.band):not(.film) article.tier.pane.tier-hot{background:linear-gradient(180deg,var(--w-deep-a),var(--w-deep-b)) !important;border-color:var(--w-copper) !important}
html body main section:not(.band):not(.film) article.tier.tier-hot :is(h2,h3,strong,b){color:var(--w-on-deep) !important}
html body main section:not(.band):not(.film) article.tier.tier-hot :is(p,li,span,small){color:var(--w-on-deep-2) !important}
html body main section:not(.band):not(.film) article.tier.tier-hot :is(.tier-price,.tier-price *){color:var(--w-copper-bright) !important}
html body main section:not(.band):not(.film) article.tier.tier-hot .kicker{color:var(--w-copper-bright) !important}
/* Widescreen (Oct 31, owner: "not like widescreen... all that space on the left and right").
   Content columns open up to 1720px on large monitors; dark bands run edge to edge. */
:root{--w-wide:1720px;--w-gutter:clamp(24px,3.4vw,72px)}
@media(min-width:1440px){
  html body{overflow-x:clip}
  html body main.wrap,html body .wrap{max-width:var(--w-wide);width:calc(100% - 2*var(--w-gutter))}
  html body main :is(.ks-in,.tbar-in,.pteaser-in,.faq-list.objections){max-width:calc(var(--w-wide) - 2*var(--w-gutter))}
  html body :is(section.offers,section.practice-motion,section.roi,section.who,section.faq){max-width:var(--w-wide);padding-inline:var(--w-gutter)}
  html body main .wallmap{max-width:1480px}
  html body .td-shell{width:min(var(--w-wide),calc(100% - 2*var(--w-gutter)))}
  html body main section.focused-builds{margin-inline:calc(50% - 50vw);border-radius:0;padding-inline:max(var(--w-gutter),calc((100vw - var(--w-wide))/2 + var(--w-gutter)))}
}