/* Shared by every page: the real logo (yellow square dot + bomb), the light/dark switch and its light palette,
   and the wavy background grid drawn by theme.js. Loaded after each page's own styles. */

/* Light mode: chosen with the sun/moon switch, remembered per visitor */
:root[data-theme="light"] {
  --bg: #f2ece2; --fg: #1c1a19; --muted: #6f685e; --line: rgba(28,26,25,.14); --grid: rgba(28,26,25,.08);
  --accent-text: #2441b5; --panel: #e6dfd3;
  color-scheme: light;
}
html, body { transition: background-color .4s, color .4s; }

/* Logo: the studio's own artwork on one line (white text in dark mode, dark text in light mode and on the menu) */
.logo img { display: block; height: 19px; width: auto; }
.logo .lg-d, :root[data-theme="light"] .logo .lg-w, .menu-top .logo .lg-w, .logo.on-cobalt .lg-w { display: none; }
:root[data-theme="light"] .logo .lg-d, .menu-top .logo .lg-d, .logo.on-cobalt .lg-d { display: block; }

/* Sun / moon switch: the yellow knob sits behind the mode that is on */
.theme-btn { position: relative; gap: 0; padding: 0 5px; width: 78px; justify-content: space-between; cursor: pointer; border: 0; font: inherit; }
.theme-btn::before { content: ""; position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
:root:not([data-theme="light"]) .theme-btn::before { transform: translateX(36px); }
.theme-btn svg { position: relative; width: 32px; height: 18px; color: var(--muted); transition: color .3s; }
:root[data-theme="light"] .theme-btn .sun, :root:not([data-theme="light"]) .theme-btn .moon { color: var(--dark-ink); }
.menu .theme-btn { margin-left: auto; margin-right: 8px; background: var(--light-ink); box-shadow: none; }
.menu .theme-btn svg { color: rgba(28,26,25,.45); }
@media (max-width: 760px) { .top .theme-btn { display: none; } }
@media (min-width: 761px) { .menu .theme-btn { display: none; } }

/* Wavy background grid (theme.js swaps the straight columns for this) */
.gridlines.wavy { display: block; padding: 0; color: var(--grid); }
.gridlines.wavy svg { position: absolute; left: 0; top: 0; display: block; }
.top .pill { white-space: nowrap; }
@media (max-width: 420px) { .top .logo { padding: 0 13px; } .top .logo img { height: 16px; } .top .pill { padding: 0 13px; } .top .menu-btn { padding: 0 15px; } }
@media (max-width: 760px) { .top .nav-svc { display: none; } }

/* Small text: Manrope replaces the typewriter font everywhere */
:root { --mono: "Manrope", "Schibsted Grotesk", system-ui, sans-serif; --yellow-ink: var(--yellow); }
.mono { letter-spacing: .01em; font-weight: 500; }
/* Readable accents: yellow text on the light background turns a deep gold; text on photos gets a stronger shade behind it */
:root[data-theme="light"] { --yellow-ink: #8f6500; }
.b-more summary::after, .b-next, .bk-alt a, .d-down, .next .arr, .wk .mono, .sv-faq summary::after, .step, .cta-band h2 i, .contact h2 i { color: var(--yellow-ink); }
.ccard::after { background: linear-gradient(rgba(10,10,10,0) 30%, rgba(10,10,10,.55) 58%, rgba(10,10,10,.9)) !important; }
.ccard p { color: rgba(242,236,226,.95) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.ccard b, .ccard .more { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.card .cap { background: linear-gradient(transparent, rgba(10,10,10,.55)); left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 26px 14px 12px; }
.sv-tile .mono, .sp-hero .crumb, .sp-hero p { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.sp-hero::after { background: linear-gradient(rgba(10,10,10,.2) 25%, rgba(10,10,10,.88)) !important; }
/* Photo viewer: always the whole photo, never cropped to its top half */
.lb-stage { overflow: hidden; }
.lb-stage img, .lb-stage video { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100svh - 150px); object-fit: contain; }

/* Page to page: a soft cross-fade, the header stays put, and a service card's photo morphs into the service page's big photo */
@view-transition { navigation: auto; }
.top { view-transition-name: site-header; }
.sp-hero .bg { view-transition-name: svc-hero; }
::view-transition-group(svc-hero) { animation-duration: .75s; animation-timing-function: cubic-bezier(.7,0,.2,1); }
::view-transition-old(root) { animation: tntOut .28s ease both; }
::view-transition-new(root) { animation: tntIn .45s ease .12s both; }
@keyframes tntOut { to { opacity: 0; } }
@keyframes tntIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.cgrid.leaving .ccard.picked { opacity: 1 !important; transform: none !important; }
.gridlines.wavy { contain: strict; will-change: transform; }
/* Founders: photo and words line up in both columns; on phones each founder is one row, photo beside the words */
.fd-pics figure { align-content: start; }
@media (max-width: 760px) {
  .fd-pics { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fd-pics figure { grid-template-columns: 38% minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .fd-ph { font-size: 40px; }
}
/* Service cards on phones: smaller words so they sit inside the card, below the subject of the photo */
@media (max-width: 860px) {
  .ccard { aspect-ratio: 3 / 4.4; padding: 12px; gap: 4px; }
  .ccard b { font-size: 24px; }
  .ccard p { font-size: 12.5px; line-height: 1.4; }
  .ccard .more { font-size: 12px; margin-top: 4px; }
}
/* Service page top: the words never wait for an animation to appear; the photo stops just short of the screen bottom */
@keyframes spUp { from { transform: translateY(24px); } }
.sp-hero { height: 92vh !important; height: 92svh !important; }
/* Service cards on phones: just the name and "See more" at the bottom, over a soft fade, so the photo stays visible */
@media (max-width: 860px) {
  .ccard { gap: 2px; padding: 10px 12px; }
  .ccard b { font-size: 21px; }
  .ccard p { display: none; }
  .ccard .more { font-size: 11.5px; margin-top: 2px; }
  .ccard::after { background: linear-gradient(rgba(10,10,10,0) 55%, rgba(10,10,10,.55) 75%, rgba(10,10,10,.85)) !important; }
}
/* Consultation box on phones: compact, buttons side by side */
@media (max-width: 760px) {
  .cta-box, .sp-cta { padding: 22px 18px 18px; gap: 14px; }
  .cta-box h2, .sp-cta h2 { font-size: 30px; }
  .cta-box p, .sp-cta p { font-size: 14.5px; line-height: 1.5; }
  .cta-box .ctas, .sp-cta .ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 2px; }
  .cta-box .btn, .sp-cta .btn { min-height: 44px; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 760px) {
  .cta-box > div:first-child, .sp-cta > div:first-child { gap: 6px !important; flex-basis: 100%; }
  .cta-box h2, .sp-cta h2 { line-height: 1.05; }
}