/* BrandKabal themes. Dark is the studio default look; Light is a full light version.
   Chosen by the visitor (header button, remembered), otherwise follows the device setting. Set on <html data-theme="dark|light">. */
:root{--bg:#0c0c0c;--fg:#fff;--surface:#161616;--surface-2:#1e1e1e;--hair:rgba(255,255,255,.14);--text-2:#c9c9c9;--text-3:#a3a3a3;--dot:rgba(128,128,128,.28);color-scheme:dark}
html[data-theme="light"]{--bg:#fff;--fg:#0c0c0c;--surface:#f5f5f5;--surface-2:#ececec;--hair:rgba(12,12,12,.12);--text-2:#444;--text-3:#6b6b6b;--dot:rgba(12,12,12,.16);color-scheme:light}

/* Dotted grid sits BEHIND everything: it is painted on the page canvas, never over content. */
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);background-size:var(--bg-dot-space,20px) var(--bg-dot-space,20px)}
body::before{display:none!important}
.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related{background:transparent!important;color:var(--fg)!important}
.partners{background:transparent!important}
html[data-theme="dark"] .partners{background:#f3f3f3!important;color:#0c0c0c}
html[data-theme="dark"] .partners :where(p,h2,h3,span,a){color:#0c0c0c!important}

/* Theme button */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--fg);cursor:pointer;flex:none;transition:background .2s,border-color .2s}
.theme-toggle:hover{background:var(--surface-2)}.theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.theme-toggle .i-sun{display:none}.theme-toggle .i-moon{display:block}
html[data-theme="light"] .theme-toggle .i-sun{display:block}html[data-theme="light"] .theme-toggle .i-moon{display:none}
.header-inner{gap:10px}.theme-toggle{margin-left:0}
.mobile-menu .theme-toggle{margin:12px 0 0}

/* ---------- DARK: light-page content turns dark ---------- */
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(h1,h2,h3,h4,h5,p,li,dd,dt,td,th,label,small,blockquote,figcaption,summary):not(.kind-tag):not(.button){color:var(--fg)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(p,li,dd,td,figcaption,.fine,.muted,small,label){color:var(--text-2)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(.fine,.muted,.by,.row-foot,.meta,small){color:var(--text-3)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(input,select,textarea){background:var(--surface);color:var(--fg);border-color:var(--hair)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(input,textarea)::placeholder{color:var(--text-3)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(.pkg,.card,.res-card,.form-card,.job-card,.job-filters,.side-card,.apply-card,.spot-card,.cite-box,.author-box,.gate-card,.callout,.disclosure,.transcript,.side-box,.gcard,.toc-mobile,.job-tags span){background-color:var(--surface);border-color:var(--hair)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) :where(p,li,dd) a:not(.button):not(.kind-tag){color:#ff6b6b}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) .button.dark{background:var(--fg);color:var(--bg);border-color:var(--fg)}
html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) .button.light-outline,html[data-theme="dark"] :is(.light-page,.light-section,.journal,.testimonials,.packages,.culture,.related) .button.ghost{color:var(--fg);border-color:var(--hair)}
html[data-theme="dark"] .prose pre{background:#050505}

/* ---------- LIGHT: dark surfaces turn light ---------- */
html[data-theme="light"] .site-header{background:rgba(255,255,255,.92);border-bottom-color:var(--hair);color:var(--fg)}
html[data-theme="light"] .site-header a:not(.button),html[data-theme="light"] .logo{color:var(--fg)}
html[data-theme="light"] .menu-toggle{color:var(--fg)}
html[data-theme="light"] .mobile-menu{background:#fff;color:var(--fg)}html[data-theme="light"] .mobile-menu a:not(.button){color:var(--fg)}
html[data-theme="light"] .hero,html[data-theme="light"] .consult,html[data-theme="light"] .site-footer,html[data-theme="light"] footer{background:var(--surface);color:var(--fg)}
html[data-theme="light"] :where(h1,h2,h3,h4,.section-heading){color:var(--fg)}
html[data-theme="light"] :where(p,li,dd,dt,td,th,label,small,figcaption,blockquote){color:var(--text-2)}
html[data-theme="light"] .hero p,html[data-theme="light"] .hero .lede{color:var(--text-2)}
html[data-theme="light"] footer a,html[data-theme="light"] .footer-col a,html[data-theme="light"] .footer-col button,html[data-theme="light"] .footer-bottom a,html[data-theme="light"] .footer-bottom button{color:var(--text-2)}
html[data-theme="light"] .consult .button{color:#fff}
html[data-theme="light"] .hero::before{background:radial-gradient(ellipse at 80% 20%,rgba(255,0,0,.08),transparent 55%)}
html[data-theme="light"] .btn-outline,html[data-theme="light"] .button.outline,html[data-theme="light"] .button.light-outline{color:var(--fg);border-color:var(--hair)}
html[data-theme="light"] .dot-grid{--dot-color:rgba(12,12,12,.16)}
html[data-theme="light"] .cookie-banner,html[data-theme="light"] .cookie{background:#fff;color:var(--fg);border-color:var(--hair)}
html[data-theme="light"] :where(input,select,textarea){background:#fff;color:var(--fg);border-color:rgba(12,12,12,.2)}
/* Always-orange bands keep dark ink, in both themes */
.cta-band,.cta-band :where(h2,p,a:not(.button),label,small){color:#0c0c0c!important}
html[data-theme] .tag-light,html[data-theme] .kind-tag{color:inherit}
@media print{html{background:#fff}body{background:#fff;color:#000;background-image:none}}

/* Scheduling page (after the Build With Us form) and the consultation band note */
.sched{max-width:860px;padding:24px 0}.sched h1{font-size:clamp(30px,4.4vw,48px);margin:12px 0}.sched p{max-width:62ch}
.sched-frame{display:block;width:100%;height:760px;border:1px solid var(--hair);border-radius:12px;background:#fff;margin:22px 0 10px}
@media(max-width:600px){.sched-frame{height:880px}}
.consult-note{margin:10px 0 0;opacity:.75}

/* Dark: components that hard-code light surfaces or dark ink */
html[data-theme="dark"] .letter{background:var(--surface);color:var(--fg);border-color:var(--hair)}
html[data-theme="dark"] .letter :where(h3,p,label,small){color:var(--text-2)}html[data-theme="dark"] .letter h3{color:var(--fg)}
html[data-theme="dark"] .letter input{background:transparent;color:var(--fg)}
html[data-theme="dark"] .pkg{background:var(--surface);border-color:var(--hair)}
html[data-theme="dark"] .pkg-best,html[data-theme="dark"] .pkg-best strong{color:var(--text-2)!important}
html[data-theme="dark"] .pkg-best strong{color:var(--fg)!important}
html[data-theme="dark"] .pkg.feat{background:#222;border-color:var(--orange)}
html[data-theme="dark"] .pkg-stage{color:var(--orange-3)}
html[data-theme="dark"] .pkg-list li{color:var(--text-2)}
html[data-theme="light"] .pkg.feat{color:#fff}
html[data-theme="dark"] .job-card :where(span,time,small):not(.kind-tag):not(.button){color:var(--text-3)}
html[data-theme="dark"] .job-tags span{background:var(--surface-2);color:var(--text-2)}
html[data-theme="dark"] .job-card .button{background:#fff;color:#0c0c0c}

html[data-theme="light"] .faq{background:var(--surface)}
html[data-theme="light"] .faq :where(summary,button,h3,h2,.faq-q){color:var(--fg)}
html[data-theme="light"] .faq :where(p,div.faq-a){color:var(--text-2)}
html[data-theme="light"] .letter{background:var(--surface-2)}

.mag-head-bare{padding:30px 0 0}

/* Header order on tablet and phone: logo ... Let's talk, theme, menu */
@media(max-width:900px){
  .header-inner{gap:10px}
  .header-inner .header-cta{margin-left:auto}
}
@media(max-width:600px){.theme-toggle{width:36px;height:36px}.header-inner{gap:8px}}
@media(max-width:360px){.theme-toggle{width:34px;height:34px}.logo{font-size:20px}.header-inner{gap:6px}.header-inner .header-cta{padding:9px 9px;font-size:9.5px}.menu-toggle{width:38px;height:38px}.site-header .container{padding:0 16px}}

/* Floating bottom navigation (phones) */
.bottom-nav{display:none}
@media(max-width:600px){
  body{padding-bottom:96px}
  .bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:200;justify-content:space-between;gap:2px;padding:7px 6px;border-radius:22px;background:rgba(22,22,22,.88);border:1px solid var(--hair);box-shadow:0 14px 40px rgba(0,0,0,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  html[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.92);box-shadow:0 14px 40px rgba(12,12,12,.18)}
  .bottom-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:16px;color:var(--text-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:color .2s,background .2s}
  .bottom-nav a:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
  .bottom-nav a.on{color:#fff;background:var(--grad)}
  .bottom-nav a:active{transform:scale(.96)}
  .to-top{bottom:96px!important}.cookie{bottom:96px!important}.toast{bottom:104px}
}
@media print{.bottom-nav{display:none!important}}

/* Left-aligned clients label */
.partners-head{display:block;text-align:left}.partners .label{max-width:none;margin:0;text-align:left}

/* Phone: no Let's talk button in the header (the bottom bar has Build) */
@media(max-width:600px){.site-header .header-cta{display:none}.header-inner .theme-toggle{margin-left:auto}}
.hero-media img{filter:none;object-position:center 45%}