/* ==========================================================================
   Atom Structures — stylesheet
   Tokens measured from the January 2026 company profile and Atom Logo.svg.
   See atom-structures_Brand_Context.md §8 and §13.7 for provenance.
   Design position: flat, sharp, single accent. Radius 0, shadow none.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Accent — deck primary (#EF4E2F). NOT the logo SVG's #E63229, see §14.1
     WCAG note: white on #EF4E2F is 3.62:1, below AA for normal text. The brand
     orange is therefore reserved for graphics, rules, and accent text on dark,
     while --accent-deep (4.62:1 against white, both directions) carries every
     small-text pairing. Same hue, 13% darker. Deviation logged in the handoff. */
  --accent:            #EF4E2F;   /* graphics, rules, badges, accent text on dark */
  --accent-deep:       #D04429;   /* accent text on light + accent backgrounds */
  --accent-hover:      #B83517;
  --accent-tint:       #FDF1EE;
  --logo-red:          #E63229;   /* logo artwork only, never UI */

  /* Ink */
  --ink:               #1F1F1D;
  --ink-80:            #4A4A47;
  --ink-muted:         #6D6D6B;
  --ink-on-accent:     #FFFFFF;

  /* Surface */
  --surface:           #FFFFFF;
  --surface-alt:       #F7F7F6;
  --surface-deep:      #1F1F1D;
  --border:            #E2E2E2;
  /* Form-control boundaries need 3:1 non-text contrast (WCAG 1.4.11).
     #C9C9C7 measured 1.66:1, so control borders use this darker grey.
     --border stays light: those are decorative dividers on labelled elements. */
  --border-strong:     #90908D;

  /* Type */
  --font-display: "Barlow", "D-DIN", "DIN Alternate", system-ui, sans-serif;
  --font-body:    "Inter", "Barlow", system-ui, -apple-system, sans-serif;

  --fs-xs:    0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  1.0625rem;
  --fs-lg:    clamp(1.125rem, 0.4vw + 1.05rem, 1.3125rem);
  --fs-h4:    clamp(1.1875rem, 0.5vw + 1.1rem, 1.375rem);
  --fs-h3:    clamp(1.375rem, 0.9vw + 1.2rem, 1.75rem);
  --fs-h2:    clamp(1.75rem, 1.7vw + 1.35rem, 2.625rem);
  --fs-h1:    clamp(2.25rem, 3.6vw + 1.4rem, 4.25rem);

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.62;
  --track-wide: 0.18em;
  --track-wordmark: 0.35em;

  /* Space — 8px scale */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 5.5rem;  --s-8: 7.5rem;

  /* Form — flat and sharp per §8 */
  --radius: 0;
  --radius-badge: 9999px;
  --shadow: none;
  --bw: 1px;
  --rule: 5px;

  --container: 1280px;
  --gutter: 1.5rem;
  --header-h: 76px;

  --duration: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) { :root { --gutter: 2.5rem; } }
@media (min-width: 1200px) { :root { --gutter: 3rem; } }

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { overflow-x: clip; }
body {
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* <picture> is inline by default, so a child img with height:100% resolves against
   nothing and collapses. Every cover-fill image on this site sits inside a picture,
   so picture must be a block that fills its container. This was the gallery bug. */
picture { display: block; }
.gallery__item picture,
.card__media picture,
.hero__media picture,
.hero-switch__stage picture { height: 100%; }
img { border-radius: var(--radius); }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-2); }
strong { font-weight: 600; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--s-2);
}
.eyebrow--muted { color: var(--ink-muted); }
/* On the dark surface the deep accent drops to 3.57:1, so the brand orange
   (4.56:1 on #1F1F1D) is the accessible choice there. */
.section--deep .eyebrow, .cta-band .eyebrow { color: var(--accent); }
.hero__panel .eyebrow { color: var(--surface); }

.lede { font-size: var(--fs-lg); color: var(--ink-80); max-width: 62ch; }
.muted { color: var(--ink-muted); }
.rule { width: 64px; height: var(--rule); background: var(--ink); margin: var(--s-3) 0; }
.rule--accent { background: var(--accent); }
.rule--light { background: var(--surface); }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--s-6); }
@media (min-width: 768px) { .section { padding-block: var(--s-7); } }
@media (min-width: 1200px) { .section { padding-block: var(--s-8); } }
.section--tight { padding-block: var(--s-5); }
.section--alt { background: var(--surface-alt); }
.section--deep { background: var(--surface-deep); color: var(--surface); }
.section--deep .lede, .section--deep .muted { color: #B8B8B4; }

.section-head { max-width: 68ch; margin-bottom: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  background: var(--ink); color: var(--surface);
  padding: var(--s-1) var(--s-3); font-weight: 600;
  transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 48px; padding: 0.75rem 1.6rem;
  font-family: var(--font-display); font-size: var(--fs-sm);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: var(--bw) solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.btn--primary { background: var(--accent-deep); color: var(--ink-on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--surface); }
.btn--on-accent { background: var(--surface); color: var(--ink); }
.btn--on-accent:hover { background: var(--ink); color: var(--surface); }
.btn--on-deep { background: transparent; color: var(--surface); border-color: #55554F; }
.btn--on-deep:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.btn__arrow { transition: transform var(--duration) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--ease);
}
.link-arrow:hover { border-color: var(--accent-deep); }
.section--deep .link-arrow { color: var(--accent); }
.link-arrow svg { transition: transform var(--duration) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: var(--bw) solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: none;
  border: var(--bw) solid var(--border); cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 20px; height: 2px; background: var(--ink);
  position: relative;
}
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform var(--duration) var(--ease), top var(--duration) var(--ease);
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }

.primary-nav__list { display: flex; flex-direction: column; }
.primary-nav__link, .mega-trigger {
  display: flex; align-items: center; gap: 0.4em;
  width: 100%; padding: var(--s-2) 0;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer; text-align: left;
  border-bottom: var(--bw) solid var(--border);
}
.primary-nav__link[aria-current="page"] { color: var(--accent-deep); }
.mega-trigger__chev { transition: transform var(--duration) var(--ease); margin-left: auto; }
.mega-trigger[aria-expanded="true"] .mega-trigger__chev { transform: rotate(180deg); }

.mega { display: none; padding: var(--s-2) 0 var(--s-3); }
.mega[data-open] { display: block; }
.mega__group-title {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--s-1);
}
.mega__list { display: grid; gap: 2px; }
.mega__link {
  display: block; padding: 0.6rem 0;
  border-bottom: var(--bw) solid var(--border);
}
.mega__link span { font-weight: 600; }
.mega__link small { display: block; color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1.45; }
.mega__link:hover { color: var(--accent-deep); }

/* Mobile drawer */
@media (max-width: 1023px) {
  .primary-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-bottom: var(--bw) solid var(--border);
    padding: var(--s-2) var(--gutter) var(--s-4);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .primary-nav[data-open] { display: block; }
  .header-cta { display: none; }
}

/* Desktop bar */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block !important; }
  .primary-nav__list { flex-direction: row; align-items: center; gap: var(--s-3); }
  .primary-nav__item { position: relative; }
  .primary-nav__link, .mega-trigger {
    width: auto; padding: calc(var(--s-2) + 4px) 0; border-bottom: 3px solid transparent;
  }
  .primary-nav__link:hover, .mega-trigger:hover { color: var(--accent-deep); }
  .primary-nav__link[aria-current="page"] { border-bottom-color: var(--accent); }
  .mega-trigger__chev { margin-left: 0; }

  .mega {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: calc(100% + var(--bw));
    width: min(760px, calc(100vw - 4rem));
    background: var(--surface);
    border: var(--bw) solid var(--border);
    padding: var(--s-4);
  }
  .mega__list { grid-template-columns: 1fr 1fr; gap: 2px var(--s-4); }
  .mega__link { border-bottom: 0; padding: 0.7rem 0.75rem; }
  .mega__link:hover { background: var(--accent-tint); }
  .header-cta { display: inline-flex; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { border-bottom: var(--bw) solid var(--border); }
.hero__grid { display: grid; grid-template-columns: 1fr; }
.hero__panel {
  background: var(--accent-deep); color: var(--ink-on-accent);
  padding: var(--s-5) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.hero__panel > *:not(.is-decor) { position: relative; z-index: 1; }
/* Raised specificity as well as the opt-out class, so no later blanket rule
   can pull this decorative mark back into the flow. */
.hero__panel > .hero__watermark,
.hero__watermark {
  position: absolute; right: -5%; bottom: -10%;
  width: min(38%, 260px); opacity: 0.09; z-index: 0; pointer-events: none;
}
.hero__panel .eyebrow { color: rgba(255,255,255,0.82); }
.hero__panel h1 { color: var(--ink-on-accent); }
.hero__lede { font-size: var(--fs-lg); color: var(--surface); max-width: 46ch; margin-top: var(--s-3); }
.hero__media { position: relative; min-height: 300px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__switch { min-width: 0; }
.hero__grid > * { min-width: 0; }
.hero-switch__stage { min-width: 0; }
/* Hero headline runs a step smaller than a page h1 so the whole band stays short */
.hero h1 { font-size: clamp(1.75rem, 1.9vw + 0.95rem, 2.75rem); }
@media (max-width: 899px) {
  .hero__panel { justify-content: flex-start; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
  .hero__panel { padding: clamp(2rem, 2.4vw, 2.5rem) clamp(2rem, 3.4vw, 3.5rem); }
  .hero__media { min-height: 520px; }
  /* Stage fills the panel height; tabs sit on the bottom edge of the same row. */
  .hero__switch .hero-switch { height: 100%; grid-template-rows: 1fr auto; }
  .hero__switch .hero-switch__stage { min-height: 0; height: 100%; }
  .hero__switch .hero-switch__tabs { border-right: 0; }
  /* min-height, never max-height. A max-height here clips the box while the
     panel and switcher keep their intrinsic size, so the overflow lands on top
     of the section below. Height is governed by content plus this floor. */
  .hero__grid { min-height: 480px; }
  .hero__panel .hero__lede { max-width: 46ch; }
}

/* Interior page hero */
.page-hero { border-bottom: var(--bw) solid var(--border); padding-block: var(--s-5) var(--s-5); }
.page-hero__inner { max-width: 74ch; }
.page-hero__chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.chip {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-muted);
}
.chip::before { content: "▸ "; color: var(--accent); }

/* Front-loaded answer block — the AEO surface, see Brand Context §9 */
.answer {
  border-left: var(--rule) solid var(--accent);
  padding-left: var(--s-3); margin-top: var(--s-4);
  font-size: var(--fs-lg); color: var(--ink); max-width: 68ch;
}

/* --- Abstract patterns -------------------------------------------------
   Brand-derived, inline as data URIs so they cost no extra request. Each one
   is drawn from something Atom Structures actually fabricates: louver blades,
   jaali perforation, truss chevrons (which is also the logo mark), and the
   technical drawing grid the shop works from.
   ---------------------------------------------------------------------- */
.pattern { position: relative; isolation: isolate; }
.pattern > *:not(.is-decor) { position: relative; z-index: 1; }
.pattern::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background-repeat: repeat;
}

/* Louver blades — angled 4deg, the rake of a fixed aluminium louver */
.pattern--louver::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M-10 29 48 -7' stroke='%231F1F1D' stroke-width='1.6' fill='none'/%3E%3Cpath d='M-10 48 48 12' stroke='%231F1F1D' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  opacity: 0.05;
}
/* Mullion rhythm — the vertical joint spacing of a glazed bay, with a heavier
   line every fourth division, the way a curtain wall reads on elevation */
.pattern--mullion::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%231F1F1D' fill='none'%3E%3Cpath d='M30.5 0V120M60.5 0V120M90.5 0V120' stroke-width='1'/%3E%3Cpath d='M.5 0V120' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.055;
}
/* Truss — chevron lattice, the geometry inside the logo mark */
.pattern--truss::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='46'%3E%3Cg fill='none' stroke='%231F1F1D' stroke-width='1.1'%3E%3Cpath d='M0 45.5H160'/%3E%3Cpath d='M0 45 40 3 80 45 120 3 160 45'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.055;
}
/* Technical grid — shop drawing paper */
.pattern--grid::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%231F1F1D'%3E%3Cpath d='M0 .5H60M.5 0V60' stroke-width='1'/%3E%3Cpath d='M0 15.5H60M0 30.5H60M0 45.5H60M15.5 0V60M30.5 0V60M45.5 0V60' stroke-width='.5' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.055;
}
/* Inverted for dark and accent surfaces */
.section--deep.pattern::before, .cta-band.pattern::before, .hero__panel.pattern::before {
  filter: invert(1);
}
.section--deep.pattern--grid::before { opacity: 0.10; }
.section--deep.pattern--truss::before { opacity: 0.11; }
.cta-band.pattern::before { opacity: 0.09; }

/* Diagonal accent rule used to break up flat bands */
.band-rule {
  height: var(--rule); width: 100%;
  background: repeating-linear-gradient(115deg,
    var(--accent) 0 14px, transparent 14px 26px);
}

/* --- Interactive hero switcher -----------------------------------------
   A tablist that swaps a large image plus its caption. Real interactivity
   rather than decoration: on the homepage the tabs are the eight service
   packages and each panel links through. Full keyboard support, and it
   degrades to a plain visible image and list when JS does not run.
   ---------------------------------------------------------------------- */
.hero-switch { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.hero-switch__stage {
  position: relative; overflow: hidden;
  background: var(--ink); min-height: 260px;
}
.hero-switch__stage img { width: 100%; height: 100%; object-fit: cover; }
.hero-switch__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--ease);
}
.hero-switch__slide[data-active] { opacity: 1; visibility: visible; }
.hero-switch__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,20,18,0.9) 0%, rgba(20,20,18,0.35) 42%, rgba(20,20,18,0.05) 100%);
}
.hero-switch__caption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--s-4) var(--s-3) var(--s-3);
  color: #fff;
}
.hero-switch__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  line-height: var(--lh-head); letter-spacing: -0.015em; color: #fff;
}
.hero-switch__caption p { color: #fff; font-size: var(--fs-sm); max-width: 52ch; margin-top: 0.35rem; }
.hero-switch__caption .link-arrow { color: #fff; margin-top: var(--s-2); }
.hero-switch__caption .link-arrow:hover { border-color: #fff; }
.hero-switch__index {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--track-wide); color: var(--accent); margin-bottom: 0.3rem;
}

.hero-switch__tabs {
  display: flex; min-width: 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  border: var(--bw) solid var(--border); border-top: 0;
  background: var(--surface);
}
.hero-switch__tab {
  flex: 1 0 auto; min-width: 116px; min-height: 56px;
  padding: 0.75rem 0.9rem; text-align: left;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted); background: transparent;
  border: 0; border-right: var(--bw) solid var(--border);
  border-top: 3px solid transparent; cursor: pointer;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.hero-switch__tab:last-child { border-right: 0; }
.hero-switch__tab:hover { color: var(--ink); background: var(--surface-alt); }
.hero-switch__tab[aria-selected="true"] {
  color: var(--ink); border-top-color: var(--accent); background: var(--surface);
}
@media (min-width: 900px) {
  .hero-switch__stage { min-height: 460px; }
  .hero-switch__caption { padding: var(--s-5) var(--s-4) var(--s-4); }
  .hero-switch__tab {
    min-width: 0; flex: 1 1 0;
    padding: 0.7rem 0.4rem; text-align: center;
    font-size: 0.6875rem; letter-spacing: 0.03em;
  }
}
/* No-JS fallback: show the first slide, and the tabs still read as a list */
.no-js .hero-switch__slide:first-child { opacity: 1; visibility: visible; }

/* Page-hero variant: compact switcher under an interior page heading */
.page-hero--switch { padding-bottom: 0; }
.hero-switch--compact .hero-switch__stage { min-height: 260px; }
@media (min-width: 900px) { .hero-switch--compact .hero-switch__stage { min-height: 420px; } }

/* --- Cards -------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  border: var(--bw) solid var(--border);
  background: var(--surface);
  transition: border-color var(--duration) var(--ease);
}
.card:hover { border-color: var(--ink); }
.card__body { padding: var(--s-3); display: flex; flex-direction: column; flex: 1; }
.card__title { margin-bottom: var(--s-1); }
.card__title a:hover { color: var(--accent-deep); }
.card__text { color: var(--ink-80); font-size: var(--fs-sm); flex: 1; }
.card__foot { margin-top: var(--s-3); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__index {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--track-wide); color: var(--accent-deep); margin-bottom: var(--s-1);
}

/* Plain value / feature block, no border — mirrors the profile's Values page */
.feature { padding-top: var(--s-3); border-top: 3px solid var(--ink); }
.feature h3 { margin-bottom: var(--s-1); }
.feature p { color: var(--ink-80); font-size: var(--fs-sm); }
.section--deep .feature { border-top-color: var(--accent); }
.section--deep .feature p { color: #B8B8B4; }

/* Icon badge — the profile's only icon device */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--accent); color: var(--surface);
  border-radius: var(--radius-badge);
}
.badge svg { width: 16px; height: 16px; }

/* --- Logo wall ---------------------------------------------------------- */
.logo-wall {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--bw) solid var(--border); border-right: 0; border-bottom: 0;
  background: var(--surface);
}
@media (min-width: 620px)  { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.logo-wall__cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 122px; padding: var(--s-3) var(--s-2);
  border-right: var(--bw) solid var(--border);
  border-bottom: var(--bw) solid var(--border);
}
.logo-wall__cell img {
  width: auto; max-width: 100%; max-height: 62px;
  object-fit: contain;
  filter: grayscale(1); opacity: 0.8;
  transition: filter var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.logo-wall__cell:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logo-wall__cell img { filter: none; opacity: 1; } }

/* --- Gallery ------------------------------------------------------------
   Two variants. .gallery is a uniform grid used on /projects/, where filtering
   hides cells: uniform cells mean hiding one never leaves a hole. .mosaic is the
   curated homepage layout with mixed spans and dense flow, and is never filtered.
   ------------------------------------------------------------------------ */
.gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mosaic {
  display: grid; gap: 10px; grid-auto-flow: dense;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery__item {
  position: relative; overflow: hidden; background: var(--surface-alt);
  aspect-ratio: 4 / 3; margin: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }

/* Mosaic emphasis cells. Spans only apply where there are 4 columns to span. */
@media (min-width: 900px) {
  .gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
  .gallery__item--tall { grid-row: span 2; aspect-ratio: 3 / 4; }
  .gallery__item--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
}

.gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-4) var(--s-2) var(--s-2);
  background: linear-gradient(to top, rgba(20,20,18,0.92) 0%, rgba(20,20,18,0.72) 45%, rgba(20,20,18,0) 100%);
  color: #fff; font-size: var(--fs-xs); line-height: 1.45;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-within .gallery__cap { opacity: 1; transform: none; }
@media (hover: none) { .gallery__cap { opacity: 1; transform: none; } }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); }
.filter {
  padding: 0.55rem 1.1rem; min-height: 44px;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--surface); color: var(--ink-80);
  border: var(--bw) solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* --- Media rows --------------------------------------------------------- */
.media-pair { display: grid; grid-template-columns: 1fr; gap: 8px; margin-block: var(--s-4); }
@media (min-width: 720px) { .media-pair { grid-template-columns: 1fr 1fr; } }
.media-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-full { margin-block: var(--s-4); }
.media-full img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
figure { margin: 0; }
figcaption { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--s-1); }

.split { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-6); } }
.split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-4)); }

/* --- Prose -------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose h3 { margin-top: var(--s-4); margin-bottom: var(--s-1); }
.prose > :first-child { margin-top: 0; }
.prose ul { margin-top: var(--s-2); display: grid; gap: 0.55rem; }
.prose ul li { position: relative; padding-left: 1.5rem; color: var(--ink-80); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 2px; background: var(--accent);
}

.spec-list { display: grid; gap: 0; border-top: var(--bw) solid var(--border); }
.spec-list__row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding-block: var(--s-2);
  border-bottom: var(--bw) solid var(--border);
}
@media (min-width: 720px) {
  .spec-list__row { grid-template-columns: 240px 1fr; gap: var(--s-3); }
}
.spec-list__key { font-family: var(--font-display); font-weight: 600; }
.spec-list__val { color: var(--ink-80); font-size: var(--fs-sm); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: var(--bw) solid var(--border); max-width: 78ch; }
.faq__item { border-bottom: var(--bw) solid var(--border); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--s-2);
  width: 100%; padding: var(--s-3) 0; text-align: left;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
  line-height: var(--lh-head);
}
.faq__q:hover { color: var(--accent-deep); }
.faq__icon { margin-left: auto; flex-shrink: 0; margin-top: 0.25em; transition: transform var(--duration) var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { display: none; padding-bottom: var(--s-3); }
.faq__a[data-open] { display: block; }
.faq__a p { color: var(--ink-80); max-width: 70ch; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--accent-deep); color: var(--ink-on-accent); }
.cta-band h2 { color: var(--ink-on-accent); max-width: 24ch; }
.cta-band p { color: var(--surface); max-width: 54ch; margin-top: var(--s-2); }
.cta-band__inner { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr auto; gap: var(--s-6); }
}

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); max-width: 640px; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-80);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem; min-height: 48px;
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--border-strong); border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.field--pair { display: grid; gap: var(--s-3); }
@media (min-width: 620px) { .field--pair { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: var(--fs-xs); color: var(--ink-muted); max-width: 60ch; }

/* --- Contact blocks ----------------------------------------------------- */
.contact-list { display: grid; gap: var(--s-3); }
.contact-item { display: flex; gap: var(--s-2); align-items: flex-start; }
.contact-item__label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 2px;
}
.contact-item a:hover { color: var(--accent-deep); }

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumb { padding-block: var(--s-2); border-bottom: var(--bw) solid var(--border); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5em; font-size: var(--fs-xs); color: var(--ink-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5em; color: var(--border-strong); }
.breadcrumb a:hover { color: var(--accent-deep); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--surface-deep); color: #B8B8B4; padding-block: var(--s-6) var(--s-4); }
.site-footer h2, .site-footer h3 { color: var(--surface); }
.site-footer a { color: #B8B8B4; }
.site-footer a:hover { color: var(--surface); }
.footer__grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand img { height: 30px; width: auto; }
.footer__title {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--surface); margin-bottom: var(--s-2);
}
.footer__list { display: grid; gap: 0.55rem; font-size: var(--fs-sm); }
.footer__bottom {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: var(--bw) solid #3A3A36;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; font-size: var(--fs-xs);
}

/* --- Motion --------------------------------------------------------------
   Restrained on purpose. Entrance only, short durations, one easing curve,
   no parallax, no looping, no autoplay. Everything is suppressed wholesale
   under prefers-reduced-motion at the bottom of this block.
   ---------------------------------------------------------------------- */

/* Scroll reveal, with an optional stagger for grid and list children */
/* Visible is the default state. `is-pending` is added by JS immediately before
   the element is observed and removed when it intersects, so a missed observer,
   a JS error, or a disabled script can never leave content invisible. */
.reveal, .reveal-stagger > * {
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.reveal.is-pending { opacity: 0; transform: translateY(18px); }
.reveal-stagger.is-pending > * { opacity: 0; transform: translateY(16px); }
.reveal-stagger > :nth-child(1)  { transition-delay:  0ms; }
.reveal-stagger > :nth-child(2)  { transition-delay:  60ms; }
.reveal-stagger > :nth-child(3)  { transition-delay: 120ms; }
.reveal-stagger > :nth-child(4)  { transition-delay: 180ms; }
.reveal-stagger > :nth-child(5)  { transition-delay: 240ms; }
.reveal-stagger > :nth-child(6)  { transition-delay: 300ms; }
.reveal-stagger > :nth-child(7)  { transition-delay: 340ms; }
.reveal-stagger > :nth-child(8)  { transition-delay: 380ms; }
.reveal-stagger > :nth-child(n+9) { transition-delay: 420ms; }

/* The accent rule draws itself in — a small, deliberate signature */
.rule { transform-origin: left center; transition: transform 520ms var(--ease) 120ms; }
.reveal.is-pending .rule, .reveal-stagger.is-pending .rule { transform: scaleX(0); }

/* Hero band animates on load rather than on scroll, since it is already in view */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__panel > .eyebrow,
.hero__panel > h1,
.hero__panel > .hero__lede,
.hero__panel > .btn-row { animation: rise 620ms var(--ease) both; }
.hero__panel > .eyebrow    { animation-delay:  60ms; }
.hero__panel > h1          { animation-delay: 140ms; }
.hero__panel > .rule       { animation: draw-x 560ms var(--ease) 300ms both; transform-origin: left center; }
.hero__panel > .hero__lede { animation-delay: 380ms; }
.hero__panel > .btn-row    { animation-delay: 480ms; }
.hero__switch              { animation: fade 760ms var(--ease) 120ms both; }
/* Its own keyframe: `fade` ends at opacity 1 and an animation outranks the
   static opacity, which is what previously rendered this at full strength. */
@keyframes fade-watermark { from { opacity: 0; } to { opacity: 0.09; } }
.hero__watermark { animation: fade-watermark 1200ms var(--ease) 400ms both; }

/* Switcher caption lifts each time a slide becomes active */
.hero-switch__slide[data-active] .hero-switch__caption > * {
  animation: rise 480ms var(--ease) both;
}
.hero-switch__slide[data-active] .hero-switch__caption > :nth-child(1) { animation-delay:  40ms; }
.hero-switch__slide[data-active] .hero-switch__caption > :nth-child(2) { animation-delay: 100ms; }
.hero-switch__slide[data-active] .hero-switch__caption > :nth-child(3) { animation-delay: 160ms; }
.hero-switch__slide[data-active] .hero-switch__caption > :nth-child(4) { animation-delay: 220ms; }

/* Header compacts slightly once the page scrolls */
.site-header { transition: box-shadow var(--duration) var(--ease); }
.site-header__inner { transition: min-height 260ms var(--ease); }
.site-header.is-scrolled .site-header__inner { min-height: 62px; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(31,31,29,0.06); }
.brand img { transition: height 260ms var(--ease); }
.site-header.is-scrolled .brand img { height: 26px; }

/* Small hover lifts */
.card { transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease); }
.card:hover { transform: translateY(-3px); }
.logo-wall__cell { transition: background-color var(--duration) var(--ease); }
.logo-wall__cell:hover { background: var(--surface-alt); }
.gallery__item img { will-change: transform; }
.feature { transition: border-top-color var(--duration) var(--ease); }
.feature:hover { border-top-color: var(--accent); }
.spec-list__row { transition: background-color var(--duration) var(--ease); }
.spec-list__row:hover { background: rgba(31,31,29,0.02); }
.spec-list--dark .spec-list__row:hover { background: rgba(255,255,255,0.035); }
.faq__item { transition: background-color var(--duration) var(--ease); }
.faq__q[aria-expanded="true"] { color: var(--accent-deep); }
.faq__a[data-open] { animation: rise 320ms var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *,
  .reveal.is-pending, .reveal-stagger.is-pending > * { opacity: 1; transform: none; transition: none; }
  .rule, .reveal.is-pending .rule, .reveal-stagger.is-pending .rule { transform: none; transition: none; }
  .card:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
[hidden] { display: none !important; }

/* --- Dark spec list ----------------------------------------------------- */
.spec-list--dark { border-top-color: #3A3A36; }
.spec-list--dark .spec-list__row { border-bottom-color: #3A3A36; }
.spec-list--dark .spec-list__key { color: var(--surface); }
.spec-list--dark .spec-list__val { color: #B8B8B4; }

/* --- Contact cards ------------------------------------------------------ */
.contact-cards {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border: var(--bw) solid var(--border);
  border-right: 0; border-bottom: 0;
}
@media (min-width: 620px)  { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-card {
  padding: var(--s-4) var(--s-3);
  border-right: var(--bw) solid var(--border);
  border-bottom: var(--bw) solid var(--border);
}
.contact-card .badge { margin-bottom: var(--s-3); }
.contact-card__value {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
  line-height: var(--lh-head); margin-block: 0.15rem var(--s-2);
  overflow-wrap: anywhere;
}
.contact-card__value a { border-bottom: 2px solid transparent; transition: border-color var(--duration) var(--ease); }
.contact-card__value a:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.contact-card address { font-style: normal; font-size: var(--fs-lg); }
.contact-card .muted { font-size: var(--fs-sm); }

.map-frame { border: var(--bw) solid var(--border); background: var(--surface-alt); }
.map-frame iframe { display: block; border: 0; width: 100%; }

/* --- Footer detail ------------------------------------------------------ */
.footer__blurb { font-size: var(--fs-sm); max-width: 38ch; }
.footer__tagline {
  margin-top: var(--s-3); font-size: var(--fs-xs);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: #8A8A85;
}
.site-footer address { font-style: normal; }

/* --- FAQ heading reset -------------------------------------------------- */
.faq__heading { margin: 0; font-size: inherit; }