/* Automated Living Studio — additive styles (homepage touches + Studio page).
   Production CSS (styles.css) is reused untouched.
   NOTE: palette + serif values below are design-phase PLACEHOLDERS, clearly
   marked, for the front-end design plugin to finalize. */

@font-face {
  font-family: "Alte DIN 1451";
  src: url("/assets/fonts/AlteDIN1451Mittelschrift.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --din: "Alte DIN 1451", "Roboto Condensed", sans-serif;
}

/* ============================================================
   DESIGN-PHASE PLACEHOLDERS — the front-end design plugin
   finalizes these. Defaults chosen to be tasteful but neutral.
   ============================================================ */
:root {
  --studio-serif: "Cormorant Garamond", Georgia, serif; /* TBD: final editorial serif */
  --studio-bg: #f6f3ee;        /* warm bone — TBD */
  --studio-bg-2: #efeae1;      /* oat — TBD */
  --studio-ink: #100f0d;       /* shared deep ink (from production) */
  --studio-soft: #5a554d;      /* muted body text — TBD */
  --studio-accent: #9a7b4f;    /* brass/bronze — TBD */
  --studio-maxw: 68rem;
  --studio-border: rgba(16, 15, 13, 0.12);
  --al-header-bg: rgba(255, 255, 255, 0.82);
}

/* --- Homepage touches — match the main-site look (Roboto, indigo accent).
   The warm/editorial treatment belongs on the Studio page, not here. --- */
.hero-subhead {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--secondary-color);
  margin-top: 0.5rem;
  max-width: 42ch;
}
.studio-band {
  background: linear-gradient(to right, var(--light-color), rgba(94, 96, 206, 0.1));
  padding: 4rem 0;
}
.studio-band .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-color);
  margin: 0 0 0.75rem;
}
.studio-band h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin: 0 0 1rem;
}
.studio-band-lede {
  max-width: 60ch;
  margin: 0 0 1.75rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--dark-color);
}
.footer-discretion {
  max-width: 60ch;
  opacity: 0.75;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* --- Studio page --- */
.studio-page { background: var(--studio-bg); color: var(--studio-ink); }
.studio-page .container { max-width: var(--studio-maxw); }
.studio-eyebrow {
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: var(--studio-accent);
  margin: 0 0 0.75rem;
}
.studio-display {
  font-family: var(--studio-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.studio-hero {
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(3rem, 8vh, 6rem);
}
.studio-hero .studio-display { font-size: clamp(2.75rem, 8vw, 6rem); }
.studio-lede {
  font-family: var(--studio-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  max-width: 40ch;
  margin-top: 1.5rem;
  color: var(--studio-soft);
}
.studio-section { padding: clamp(3rem, 8vh, 6rem) 0; }
.studio-section p { max-width: 60ch; line-height: 1.7; color: var(--studio-soft); margin: 0 0 1.1rem; }
.studio-section .studio-display { font-size: clamp(1.9rem, 4.5vw, 3.25rem); margin: 0 0 1.5rem; }
.studio-feature { background: var(--studio-bg-2); }
.studio-closer {
  font-family: var(--studio-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--studio-ink) !important;
  max-width: 50ch !important;
  margin-top: 1.5rem !important;
}
.studio-pillars, .studio-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; }
.studio-pillars { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.studio-pillars h3, .studio-steps h3 { font-family: var(--din); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; margin: 0 0 0.5rem; color: var(--studio-ink); }
.studio-steps { counter-reset: step; }
.studio-steps li { position: relative; padding-left: 3.5rem; }
.studio-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--din);
  position: absolute; left: 0; top: 0;
  font-size: 1.5rem; color: var(--studio-accent);
}
.studio-discretion { background: var(--studio-ink); color: var(--studio-bg); padding: clamp(3rem, 8vh, 6rem) 0; }
.studio-discretion .studio-display { color: var(--studio-bg); font-size: clamp(1.8rem, 4vw, 2.75rem); margin: 0 0 1.25rem; }
.studio-discretion p { color: var(--studio-bg); opacity: 0.85; max-width: 56ch; }
.studio-discretion .studio-eyebrow { color: var(--studio-bg); opacity: 0.7; }
.studio-start .contact-buttons { display: flex; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; }

/* ───────────────────────────────────────────────────────────────────
   Contact CTAs ("Call us" / "Email us") — re-thought as flat editorial
   keys instead of dated filled pills. DIN uppercase labels, hairline
   definition, a primary (ink) + ghost (outline) pairing, and a single
   travelling-arrow micro-interaction on hover (no bounce, no shadow).
   Scoped to .contact-buttons so other .buttons are untouched; colours
   key off --studio-* so they adapt per page and in dark mode.
   ─────────────────────────────────────────────────────────────────── */
.contact-buttons .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.75rem;
  border-radius: 2px;
  border: 1px solid transparent;
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 400;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* kill the inherited translateY bounce + any shadow */
.contact-buttons .button:hover { transform: none; box-shadow: none; }

/* travelling arrow — the one signature motion */
.contact-buttons .button::after {
  content: "→";
  font-size: 0.95rem;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}
.contact-buttons .button:hover::after { transform: translateX(4px); }

/* primary — filled ink, label inverts correctly in dark mode */
.contact-buttons .button.dark {
  background: var(--studio-ink);
  color: var(--studio-bg);
  border-color: var(--studio-ink);
}
.contact-buttons .button.dark:hover {
  background: var(--studio-accent);
  color: #fff;
  border-color: var(--studio-accent);
}

/* secondary — ghost key; out-specify the site-cool / dark-mode .button.light rules */
.contact-buttons .button.light,
body.site-cool .contact-buttons .button.light,
body.site-cool.dark-mode .contact-buttons .button.light,
body.studio-page.dark-mode .contact-buttons .button.light {
  background: transparent;
  color: var(--studio-ink);
  border: 1px solid var(--studio-border);
}
.contact-buttons .button.light:hover,
body.site-cool .contact-buttons .button.light:hover,
body.site-cool.dark-mode .contact-buttons .button.light:hover,
body.studio-page.dark-mode .contact-buttons .button.light:hover {
  background: transparent;
  color: var(--studio-accent);
  border-color: var(--studio-accent);
}

.contact-buttons .button:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-buttons .button::after { transition: none; }
}

/* --- Hero: silent ambient video (cinematic).
   Real silent footage drops into the commented <video> slot in the HTML; until
   then a slow warm gradient stands in. Motion stops for reduced-motion. --- */
.studio-hero--video {
  position: relative;
  padding: 0;
  min-height: min(90vh, 56rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.studio-hero-media,
.studio-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.studio-hero-video { width: 100%; height: 100%; object-fit: cover; }
.studio-hero-media {
  background:
    radial-gradient(130% 120% at 18% 18%, rgba(226, 210, 183, 0.85), transparent 58%),
    linear-gradient(120deg, #221f1b 0%, #463b30 42%, #6d5b45 72%, #221f1b 100%);
  background-size: 170% 170%;
  transform: scale(1.06);
  animation: studioHeroDrift 34s ease-in-out infinite alternate;
}
@keyframes studioHeroDrift {
  from { background-position: 8% 28%; }
  to   { background-position: 92% 72%; }
}
.studio-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(16, 15, 13, 0.78) 0%, rgba(16, 15, 13, 0.30) 48%, rgba(16, 15, 13, 0.50) 100%);
}
.studio-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 12vh, 8rem);
}
.studio-hero--video .studio-eyebrow { color: rgba(255, 255, 255, 0.82); }
.studio-hero--video .studio-display { color: #fff; }
.studio-hero--video .studio-lede { color: rgba(255, 255, 255, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .studio-hero-media { animation: none; }
}

/* --- Mood imagery (AI-generated, discretion-safe — abstract interiors and
   materials, never client homes). Figures hold a cover image with a warm
   gradient fallback shown while the image loads. --- */
.studio-figure {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(115deg, #efeae1 0%, #e6dcca 55%, #dccbb0 100%);
  border-block: 1px solid var(--studio-border);
}
.studio-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.studio-figure--break {            /* full-bleed cinematic band */
  aspect-ratio: 21 / 9;
  margin: clamp(1rem, 4vh, 2.5rem) 0;
}
.studio-figure--inset {            /* contained image within a section */
  aspect-ratio: 3 / 2;
  margin-top: 2.5rem;
  border: 1px solid var(--studio-border);
}
@media (max-width: 640px) {
  .studio-figure--break { aspect-ratio: 16 / 9; }
}

/* two product images side by side, contained (stacks on mobile) */
.studio-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: clamp(1.5rem, 5vh, 3rem) 0;
}
.studio-duo .studio-figure { aspect-ratio: 16 / 9; }
@media (max-width: 720px) {
  .studio-duo { grid-template-columns: 1fr; }
}

/* ============================================================
   MAIN SITE — "engineered cool" editorial theme.
   Reuses the Studio component classes with a cool palette plus a
   few site-specific components (craft cards, affiliations).
   ============================================================ */
body.site-cool {
  --studio-bg: #eceef1;       /* cool mist */
  --studio-bg-2: #e0e3e7;     /* graphite tint */
  --studio-ink: #0e1116;      /* near-black */
  --studio-soft: #555c64;     /* slate */
  --studio-accent: #46708f;   /* steel blue */
  --studio-border: rgba(14, 17, 22, 0.12);
  --al-header-bg: rgba(255, 255, 255, 0.82);
  background: var(--studio-bg);
  color: var(--studio-ink);
}

/* ============================================================
   DARK MODE — two night palettes. In dark mode the whole site
   adopts the hero's after-dark mood: surfaces drop to a deep,
   premium dark and the accent reads like integrated light glowing
   in an unlit room. (The accessibility toggle sets .dark-mode.)
   ============================================================ */
body.site-cool.dark-mode {
  --studio-bg: #0d1116;        /* engineered night */
  --studio-bg-2: #161c24;      /* graphite */
  --studio-ink: #e9edf1;       /* cool off-white text */
  --studio-soft: #8b97a4;      /* cool slate */
  --studio-accent: #79a8cf;    /* steel, brightened to glow */
  --studio-border: rgba(255, 255, 255, 0.10);
  --al-header-bg: rgba(12, 16, 21, 0.72);
  /* win over the production body.dark-mode bg regardless of load order */
  background: var(--studio-bg);
  color: var(--studio-ink);
}
body.studio-page.dark-mode {
  --studio-bg: #15110d;        /* candlelit atelier */
  --studio-bg-2: #211a13;      /* warm charcoal */
  --studio-ink: #ece4d8;       /* warm bone text */
  --studio-soft: #a59a89;      /* warm taupe-grey */
  --studio-accent: #cba36b;    /* brass, brightened to gold */
  --studio-border: rgba(236, 228, 216, 0.10);
  --al-header-bg: rgba(20, 16, 12, 0.72);
  background: var(--studio-bg);
  color: var(--studio-ink);
}
/* keep the discretion panel a dark feature in dark mode (its bg is --studio-ink,
   which is now light) and fix the otherwise-white "light" button */
body.dark-mode .studio-discretion { background: var(--studio-bg-2); }
body.dark-mode .studio-discretion .studio-display,
body.dark-mode .studio-discretion p,
body.dark-mode .studio-discretion .studio-eyebrow { color: var(--studio-ink); }
/* light/secondary button in dark mode — out-specify body.site-cool .button.light below */
body.site-cool.dark-mode .button.light,
body.studio-page.dark-mode .button.light {
  background: var(--studio-bg-2); color: var(--studio-ink);
  border: 1px solid var(--studio-border);
}
body.site-cool.dark-mode .button.light:hover,
body.studio-page.dark-mode .button.light:hover {
  background: var(--studio-ink); color: var(--studio-bg); border-color: var(--studio-ink);
}
body.site-cool .container { max-width: var(--studio-maxw); }

/* cool gradient fallback behind figure images (instead of the warm one) */
body.site-cool .studio-figure {
  background: linear-gradient(115deg, #2b3a45 0%, #1a222a 55%, #0b0e12 100%);
}

/* cool hero-video gradient (overrides the warm Studio gradient) */
body.site-cool .studio-hero-media {
  background:
    radial-gradient(130% 120% at 78% 18%, rgba(120, 152, 178, 0.5), transparent 55%),
    linear-gradient(120deg, #0b0e12 0%, #1a222a 45%, #2b3a45 72%, #0b0e12 100%);
}

/* editorial buttons in the cool palette */
body.site-cool .button,
body.site-cool .cta-button { background-color: var(--studio-ink); border-radius: 2px; }
body.site-cool .button:hover,
body.site-cool .cta-button:hover { background-color: var(--studio-accent); }
body.site-cool .button.light { background: #ffffff; color: var(--studio-ink); }
body.site-cool .button.light:hover { background: var(--studio-bg-2); color: var(--studio-ink); }

/* hero "start a project" quiet link */
.studio-hero-cta {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 0.2rem;
}
.studio-hero-cta:hover { color: #fff; border-color: #fff; }

/* two-crafts cards */
.crafts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.5rem;
  grid-auto-flow: dense;
  margin-top: 2.5rem;
}
/* a service panel sits right after its card in the DOM; on desktop it spans the
   full row (appears below the card row), on mobile it falls directly under its
   own card (single column) — so the reveal is always adjacent to the tap. */
.craft-panel { grid-column: 1 / -1; }
.craft-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--studio-bg-2);
  border: 1px solid var(--studio-border);
}
.craft-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.craft-card__img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.04);
  transition: transform 0.6s ease, filter 0.6s ease;
}
/* a cool cast via soft-light (NOT a dark overlay) so the photos harmonise with
   the cool palette by toning the colour, not by dimming; full colour returns on
   hover and when the card is active */
.craft-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--studio-accent);
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.craft-card:hover .craft-card__img img,
.craft-card.is-open .craft-card__img img { transform: scale(1.04); filter: saturate(1) contrast(1); }
.craft-card:hover .craft-card__img::after,
.craft-card.is-open .craft-card__img::after { opacity: 0; }
.craft-card__body { padding: 1.25rem 1.35rem 1.5rem; }
.craft-card__body h3 {
  font-family: var(--studio-serif); font-weight: 400;
  font-size: 1.5rem; margin: 0 0 0.4rem; color: var(--studio-ink);
}
.craft-card__body p {
  color: var(--studio-soft); margin: 0 0 0.85rem;
  font-size: 0.95rem; line-height: 1.6;
}
.craft-card__more {
  font-family: var(--din); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--studio-accent);
}
.craft-card__chev { display: inline-block; transition: transform 0.3s ease; }

/* toggle cards expand a drawer in place */
.craft-card--toggle { cursor: pointer; }
.craft-card__hit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.craft-card__hit:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 3px; }
.craft-card.is-open {
  border-color: var(--studio-accent);
  box-shadow: 0 12px 28px -14px rgba(14, 17, 22, 0.26);
}
.craft-card.is-open .craft-card__chev { transform: rotate(180deg); }

/* keypad LED — the same 5px mark as the creds grid; lights when a card's
   drawer is open, the quiet "this one is live" signal */
.craft-card--toggle::before {
  content: "";
  position: absolute; top: 9px; right: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--studio-accent);
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}
.craft-card--toggle.is-open::before {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 6px var(--studio-accent), 0 0 2px var(--studio-accent);
}

/* opening is a 450ms glide; closing is brisk — a drawer shuts faster than
   it opens, and a quick close never competes with an arrival scroll */
.craft-panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  transition: grid-template-rows 0.25s ease;
}
.craft-panel.is-open {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* the services sit on a quiet recessed tray that reads as part of the card */
.craft-panel__inner {
  min-height: 0;
  overflow: hidden;
  background: var(--studio-bg-2);
  box-shadow: inset 0 16px 26px -20px rgba(14, 17, 22, 0.4);
}
/* padding lives on the list (a grandchild), so the collapsed panel clips to a
   true zero height — no content peeking out when closed. */
.svc-grid { margin: 0; padding: 2.25rem clamp(1.25rem, 3vw, 2.25rem) 2.5rem; }

/* the services settle in top-to-bottom as the drawer opens, starting once
   it is about a third of the way down; closing drops the delays so nothing
   lingers behind the 250ms fold */
.craft-panel .svc-grid li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0, 0, 0.2, 1), transform 0.35s cubic-bezier(0, 0, 0.2, 1);
}
.craft-panel.is-open .svc-grid li { opacity: 1; transform: none; }
.craft-panel.is-open .svc-grid li:nth-child(1) { transition-delay: 0.15s; }
.craft-panel.is-open .svc-grid li:nth-child(2) { transition-delay: 0.195s; }
.craft-panel.is-open .svc-grid li:nth-child(3) { transition-delay: 0.24s; }
.craft-panel.is-open .svc-grid li:nth-child(4) { transition-delay: 0.285s; }
.craft-panel.is-open .svc-grid li:nth-child(5) { transition-delay: 0.33s; }
.craft-panel.is-open .svc-grid li:nth-child(6) { transition-delay: 0.375s; }
.craft-panel.is-open .svc-grid li:nth-child(7) { transition-delay: 0.42s; }
.craft-panel.is-open .svc-grid li:nth-child(8) { transition-delay: 0.465s; }
.craft-panel.is-open .svc-grid li:nth-child(9) { transition-delay: 0.51s; }

/* native-jump fallback (no JS): keep hash targets clear of the fixed header */
#crafts, #residential, #commercial, #contact { scroll-margin-top: 5.5rem; }

/* the global reduced-motion rules zero durations but not delays — under
   reduced motion (or the widget's Stop Animations) everything here snaps */
@media (prefers-reduced-motion: reduce) {
  .craft-panel,
  .craft-panel .svc-grid li,
  .craft-card--toggle::before,
  .craft-card__chev { transition: none; }
  .craft-panel.is-open .svc-grid li { transition-delay: 0s; }
}
html.a11y-stop-animations .craft-panel.is-open .svc-grid li { transition-delay: 0s; }

/* ============================================================
   NAVBAR — editorial redesign (shared across pages). Transparent
   over a hero, frosted on scroll; DIN labels; a "Start a project"
   text link instead of the filled pill. The accent adapts per page
   via --studio-accent (cool on the tech side, warm on the Studio).
   ============================================================ */
#header {
  background: var(--al-header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--studio-border);
  box-shadow: none;
}
#header .container { padding-top: 1.05rem; padding-bottom: 1.05rem; }
#header .logo img { height: 40px; filter: none; }

#header .nav-links a {
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--studio-ink);
}
#header .nav-links a::after { height: 1px; background: var(--studio-accent); }
#header .nav-links li { margin-left: 2.25rem; }
#header .hamburger span { background: var(--studio-ink); }

.nav-cta {
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--studio-accent);
  margin-left: 2.5rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.nav-cta:hover { color: var(--studio-accent); border-bottom-color: currentColor; }

/* dark mode: the frosted bar follows the night palette; logo goes white */
body.dark-mode #header .logo img { filter: brightness(0) invert(1); }

/* transparent over a hero (until scrolled): white logo + text */
body.has-hero:not(.is-scrolled) #header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-hero:not(.is-scrolled) #header .nav-links a,
body.has-hero:not(.is-scrolled) #header .nav-cta { color: #fff; }
body.has-hero:not(.is-scrolled) #header .logo img { filter: brightness(0) invert(1); }
body.has-hero:not(.is-scrolled) #header .hamburger span { background: #fff; }

/* the hamburger is a <button> — strip native chrome so it doesn't render as a
   beveled grey/blue box; keep a clean keyboard-only focus ring */
.hamburger {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:focus { outline: none; box-shadow: none; }
.hamburger:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 5px; box-shadow: none; }

/* mobile: real hamburger + full-screen overlay */
@media (max-width: 768px) {
  #header .hamburger { display: flex; z-index: 1200; }
  #header .nav-links {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin: 0;
    background: var(--studio-bg);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1100;
  }
  #header .nav-links.active { transform: translateX(0); }
  #header .nav-links li { margin: 0; }
  /* overlay links must read on the panel in every header state — the
     transparent-over-hero white rule otherwise bleeds in and hides them */
  #header .nav-links a,
  body.has-hero #header .nav-links a,
  body.has-hero:not(.is-scrolled) #header .nav-links a,
  body.has-hero.is-scrolled #header .nav-links a { color: var(--studio-ink); font-size: 1.05rem; }
  /* when the overlay is open, the logo sits on the panel, not the hero —
     give it the panel-appropriate color regardless of scroll state */
  body:has(.nav-links.active) #header .logo img { filter: none; }
  body.dark-mode:has(.nav-links.active) #header .logo img { filter: brightness(0) invert(1); }
  .nav-cta { display: none; }
  .hamburger.active span { background: var(--studio-ink) !important; }
  .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* affiliations row */
.studio-affiliations {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.studio-affiliations li {
  font-family: var(--din); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.82rem; color: var(--studio-soft);
}

/* ───────────────────────────────────────────────────────────────────
   Memberships registry — the professional bodies this studio belongs
   to, set as engraved marks in a hairline-ruled grid (a spec sheet of
   accreditation). Each cell carries the keypad LED that lights in the
   page accent on hover — the same status-light motif as the dock.
   Logos drop into /assets/affiliations/<slug>.svg and replace the DIN
   text mark the moment they load (onload sets .has-logo); a missing
   file falls back to the mark, never a broken image. Every colour keys
   off --studio-* so it adapts to all four palettes (cool/warm,
   light/dark) with no per-page overrides.
   ─────────────────────────────────────────────────────────────────── */
.al-creds { padding: clamp(3rem, 8vh, 6rem) 0; }
.al-creds__lede {
  max-width: 52ch; line-height: 1.7;
  color: var(--studio-soft); margin: 0 0 2.5rem;
}

.al-creds__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* ruled grid: container draws the top + left lines, each cell draws
     its right + bottom — clean single hairlines at every wrap count */
  border-top: 1px solid var(--studio-border);
  border-left: 1px solid var(--studio-border);
}
@media (max-width: 900px) { .al-creds__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .al-creds__grid { grid-template-columns: repeat(2, 1fr); } }

.al-cred {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.65rem; text-align: center;
  padding: 1.85rem 1rem 1.55rem;
  border-right: 1px solid var(--studio-border);
  border-bottom: 1px solid var(--studio-border);
  transition: background 0.3s ease;
}
.al-cred:hover { background: var(--studio-bg-2); }

/* the logo shows by default; the DIN mark is the fallback shown only if the
   image fails to load (.no-logo set by onerror, which also removes the img) */
.al-cred__mark {
  font-family: var(--din);
  font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1;
  color: var(--studio-ink); opacity: 0.55;
  transition: opacity 0.3s ease;
  display: none;
}
.al-cred.no-logo .al-cred__mark { display: block; }
.al-cred.no-logo:hover .al-cred__mark { opacity: 1; }

.al-cred__logo {
  display: block;
  width: auto; max-width: min(72%, 8.5rem); height: 2.75rem;
  object-fit: contain;
  /* quiet monochrome by default; true colour on hover */
  filter: grayscale(1); opacity: 0.62;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.al-cred:hover .al-cred__logo { filter: grayscale(0); opacity: 1; }
.al-cred.no-logo .al-cred__logo { display: none; }
/* dark mode: lift monochrome logos to white off the dark surface */
body.dark-mode .al-cred__logo { filter: grayscale(1) brightness(0) invert(1); opacity: 0.72; }
body.dark-mode .al-cred:hover .al-cred__logo { filter: none; opacity: 1; }

.al-cred__name {
  font-family: var(--din);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.62rem; line-height: 1.35;
  color: var(--studio-soft); max-width: 18ch;
}

/* keypad LED — lights in the page accent on hover, echoing the dock */
.al-cred::before {
  content: "";
  position: absolute; top: 9px; right: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--studio-accent);
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.al-cred:hover::before {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 6px var(--studio-accent), 0 0 2px var(--studio-accent);
}

@media (prefers-reduced-motion: reduce) {
  .al-cred, .al-cred__mark, .al-cred__logo, .al-cred::before { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────
   The lines we carry — the product brands integrated into every build,
   shown as a quiet monochrome lineup that comes to colour on hover (the
   same behaviour as the memberships registry, but a flowing row rather
   than an engraved grid — carrying a line is a different claim than
   belonging to a body). Logos drop into /assets/images/brands/<slug>.svg
   and replace the DIN wordmark the moment they load; a missing file falls
   back to the wordmark, never a broken image. Each line is captioned by
   the category it covers, so the row shows the breadth of the system.
   ─────────────────────────────────────────────────────────────────── */
.al-brands {
  margin-top: 2.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--studio-border);
}
.al-brands__eyebrow { margin: 0 0 1.9rem; }
.al-brands__row {
  list-style: none; margin: 0; padding: 0;
  /* Centred flex wrap: a full first row of six logos, and any shorter final
     row (e.g. the remaining five) centres beneath it instead of stranding in
     the first column. Centring is automatic for whatever the last row holds. */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2.6rem 1.25rem;
}
.al-brand {
  /* six per row on desktop; basis subtracts the five 1.25rem column gaps so
     row one fills exactly, and flex-shrink absorbs any sub-pixel overflow so
     the sixth logo never wraps. fixed logo slot keeps every caption on one
     baseline; centred so the mark sits over its caption */
  flex: 0 1 calc((100% - 5 * 1.25rem) / 6);
  min-width: 0; /* allow the slot to shrink to its 1/6 share so six fit a row */
  display: grid; grid-template-rows: 1.5rem auto;
  place-items: center; gap: 0.8rem; text-align: center;
}
.al-brand__logo {
  display: block; height: 1.4rem; width: auto; max-width: 100%;
  object-fit: contain; object-position: center;
  /* Normalize every logo to one ink silhouette regardless of its native
     fill — the official files ship inconsistently (some white, some
     two-tone, some currentColor). brightness(0) collapses any colour to
     black; opacity gives the quiet monochrome wall, intensifying on hover. */
  filter: brightness(0); opacity: 0.55;
  transition: opacity 0.3s ease;
}
.al-brand:hover .al-brand__logo { opacity: 0.9; }
/* DIN wordmark — the fallback shown only when no logo file is present
   (.no-logo is set by onerror, which also removes the broken img) */
.al-brand__mark {
  display: none;
  font-family: var(--din);
  font-size: 1.35rem; letter-spacing: 0.03em; line-height: 1;
  color: var(--studio-ink); opacity: 0.78;
  transition: opacity 0.3s ease;
}
.al-brand.no-logo .al-brand__mark { display: block; }
.al-brand.no-logo:hover .al-brand__mark { opacity: 1; }
.al-brand.no-logo .al-brand__logo { display: none; }
.al-brand__cat {
  font-family: var(--din);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.6rem; line-height: 1; color: var(--studio-soft);
}
/* dark mode: lift the ink silhouette to white off the dark surface */
body.dark-mode .al-brand__logo { filter: brightness(0) invert(1); opacity: 0.68; }
body.dark-mode .al-brand:hover .al-brand__logo { opacity: 1; }
/* tablet: three per row before six-across gets cramped (captions need width) */
@media (max-width: 980px) {
  .al-brand { flex-basis: calc((100% - 2 * 1.25rem) / 3); }
}
/* phone: two per row; a lone final logo still centres via justify-content */
@media (max-width: 720px) {
  .al-brands__row { gap: 1.9rem 1rem; }
  .al-brand { flex-basis: calc((100% - 1rem) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .al-brand__logo, .al-brand__mark { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────
   Utility dock — the theme + accessibility controls, restyled as one
   minimal "keypad" that echoes the engraved designer keypads this studio
   installs. Two flush buttons share a frosted faceplate (the same glass as
   the nav); a status LED lights in the brand accent when a control is
   engaged. Both buttons are independent fixed elements stacked flush, so
   no DOM coordination between the two scripts that create them is needed.
   Launcher rules use `body .a11y-launcher` to out-specify the production
   widget CSS, which loads after this file.
   ─────────────────────────────────────────────────────────────────── */
:root { --al-dock-size: 50px; --al-dock-radius: 16px; --al-dock-edge: 24px; }

/* shared faceplate */
.al-dock-btn,
body .a11y-launcher {
  position: fixed;
  right: var(--al-dock-edge);
  left: auto;
  width: var(--al-dock-size);
  height: var(--al-dock-size);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--al-header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  border: 1px solid var(--studio-border);
  color: var(--studio-soft);
  box-shadow: 0 14px 30px -16px rgba(8, 10, 14, 0.5);
  cursor: pointer;
  z-index: 1000;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* top slot: theme — bottom slot: accessibility, stacked flush */
.al-dock-theme {
  bottom: calc(var(--al-dock-edge) + var(--al-dock-size));
  border-radius: var(--al-dock-radius) var(--al-dock-radius) 0 0;
  border-bottom: 0;
}
body .a11y-launcher {
  bottom: var(--al-dock-edge);
  border-radius: 0 0 var(--al-dock-radius) var(--al-dock-radius);
}

/* icons */
.al-dock-ic { width: 21px; height: 21px; }
body .a11y-launcher svg { width: 22px; height: 22px; }
.al-ic-sun { display: none; }
body.dark-mode .al-dock-theme .al-ic-moon { display: none; }
body.dark-mode .al-dock-theme .al-ic-sun { display: block; }

/* hover / focus — brighten the icon, lift the plate, neutralise the
   production launcher's scale so the seam stays flush */
.al-dock-btn:hover,
body .a11y-launcher:hover {
  color: var(--studio-ink);
  background: var(--al-header-bg);
  box-shadow: 0 18px 36px -16px rgba(8, 10, 14, 0.62);
}
.al-dock-btn:hover,
.al-dock-btn:active,
.al-dock-btn:focus,
body .a11y-launcher:hover,
body .a11y-launcher:active,
body .a11y-launcher:focus { transform: none; }
.al-dock-btn:focus,
body .a11y-launcher:focus { outline: none; }
/* keyboard focus ring — same brand ring as the rest of the site (the base
   drop-shadow would otherwise out-specify the global focus-visible rule) */
.al-dock-btn:focus-visible,
body .a11y-launcher:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--studio-bg), 0 0 0 4px var(--studio-accent);
}

/* status LED — appears (accent glow) only while the control is engaged */
.al-dock-btn::before,
body .a11y-launcher::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--studio-accent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
body.dark-mode .al-dock-theme::before,
body .a11y-launcher[aria-expanded="true"]::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 6px var(--studio-accent), 0 0 2px var(--studio-accent);
}

/* engraved DIN label, slides out to the left on hover / keyboard focus */
.al-dock-btn::after,
body .a11y-launcher::after {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 5px 9px;
  font-family: var(--din);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--studio-ink);
  background: var(--al-header-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--studio-border);
  border-radius: 3px;
  box-shadow: 0 14px 30px -16px rgba(8, 10, 14, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.al-dock-theme::after { content: "Theme"; }
body .a11y-launcher::after { content: "Accessibility"; }
.al-dock-btn:hover::after,
.al-dock-btn:focus-visible::after,
body .a11y-launcher:hover::after,
body .a11y-launcher:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .al-dock-btn,
  body .a11y-launcher,
  .al-dock-btn::before,
  body .a11y-launcher::before,
  .al-dock-btn::after,
  body .a11y-launcher::after { transition: none; }
}