/* Top Shelf GlassX — "Modern Architectural Minimalism"
   Layout: a 12-column feel on a warm white ground; long horizontal rules and aligned edges,
   generous space, soft stone panels instead of dark bands. One muted brick accent, taken
   from the logo red and toned down, for buttons and active states only. */
:root {
  --ground: #faf8f5;       /* warm white page */
  --panel: #ffffff;        /* cards */
  --stone: #f1eee9;        /* soft background contrast */
  --stone-2: #e7e2da;      /* deeper stone for hover / footer rule */
  --line: #e2ddd5;         /* light borders */
  --line-strong: #cfc8bd;
  --charcoal: #2e3236;     /* headings */
  --ink: #3b4045;          /* body text */
  --muted: #6f7378;        /* secondary text */
  --slate: #5c676d;        /* logo grey, softened */
  --accent: #9c4a46;       /* logo red, muted to brick */
  --accent-deep: #823b38;
  --accent-wash: #f5e9e6;
  --sage: #8e9a8c;         /* natural tone for small details */

  --font: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;               /* main text and headings */
  --comic: "Comic Sans MS", "Comic Neue", "Comic Sans", "Chalkboard SE", cursive;   /* small cards and labels */

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.5vw + 1.25rem, 2.25rem);
  --step-4: clamp(2.25rem, 3vw + 1.25rem, 3.5rem);

  --wrap: 74rem;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(46, 50, 54, 0.04), 0 8px 24px rgba(46, 50, 54, 0.06);
  --shadow-hover: 0 2px 4px rgba(46, 50, 54, 0.05), 0 14px 32px rgba(46, 50, 54, 0.09);
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-0)/1.7 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 600; color: var(--charcoal); }
p { margin: 0; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

.eyebrow {
  font-family: var(--comic);
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--slate);
  display: flex; align-items: center; gap: 0.75rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--line-strong); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 40px);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.prose { display: grid; gap: 1.125rem; max-width: 40rem; }
.kicker { font-size: var(--step-1); color: var(--charcoal); line-height: 1.45; }
.muted { color: var(--muted); }

.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: 0.5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* Buttons */
.btn {
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.875rem; padding: 0.625rem 1.375rem;
  font: 500 1rem/1 var(--font);
  text-decoration: none; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 6px 16px rgba(156, 74, 70, 0.22); }
.btn-ghost { border-color: var(--line-strong); color: var(--charcoal); background: var(--panel); }
.btn-ghost:hover { border-color: var(--charcoal); color: var(--charcoal); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.link-arrow { text-decoration: none; display: inline-flex; gap: 0.5em; align-items: center; color: var(--charcoal); border-bottom: 1px solid var(--line-strong); padding-bottom: 0.15em; width: max-content; max-width: 100%; transition: border-color 0.2s var(--ease); }
.link-arrow::after { content: "→"; transition: transform 0.2s var(--ease); color: var(--accent); }
.link-arrow:hover { color: var(--charcoal); border-bottom-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(3px); }

/* Thin-line icons */
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: var(--slate); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ground); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 2rem; min-height: 5rem; }
.brand { display: block; flex: none; }
.brand img { height: 2.75rem; width: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.site-nav a {
  display: block; padding: 0.5rem 0.875rem; border-radius: 999px;
  font-size: 1rem; color: var(--ink); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:hover { background: var(--stone); color: var(--charcoal); }
.site-nav a[aria-current="page"] { background: var(--stone); color: var(--charcoal); box-shadow: inset 0 -2px 0 var(--accent); }
.header-cta { display: flex; align-items: center; gap: 1.25rem; }
.header-phone { color: var(--muted); text-decoration: none; white-space: nowrap; font-size: 0.9375rem; }
.header-phone:hover { color: var(--charcoal); }
.menu-toggle { display: none; }

@media (max-width: 1040px) { .header-phone { display: none; } }
@media (max-width: 860px) {
  .header-row { min-height: 4.25rem; gap: 0.75rem; }
  .brand img { height: 2.375rem; }
  .menu-toggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: 0.625rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.5rem 1rem; font: 400 0.9375rem/1 var(--font); color: var(--charcoal); cursor: pointer;
  }
  .menu-toggle .bars { width: 16px; height: 1.5px; background: currentColor; position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; }
  .menu-toggle .bars::before { top: -5px; } .menu-toggle .bars::after { top: 5px; }
  .header-cta .btn { display: none; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter-r) 1.25rem var(--gutter-l);
    margin: 0; display: none; box-shadow: 0 12px 24px rgba(46, 50, 54, 0.06);
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 0.875rem 0.25rem; font-size: 1.125rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { background: none; box-shadow: none; color: var(--accent); }
}
.nav-estimate { display: none; margin-top: 1.25rem; }
.nav-estimate .btn { width: 100%; }
@media (max-width: 860px) { .site-nav .nav-estimate { display: block; } }

/* Photos */
.photo { position: relative; background: var(--stone); overflow: hidden; border-radius: var(--radius); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Home hero */
.hero { border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero-text { display: grid; gap: 1.5rem; align-content: center; }
.hero-text h1 em { font-style: normal; color: var(--slate); }
.hero-text p { color: var(--muted); max-width: 32rem; font-size: var(--step-1); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.5rem; }
.hero-photo { aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.hero-photo { margin: 0; }
.hero-cap, .hero-extra { display: none; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; aspect-ratio: 4 / 3; }
}

/* Spec strip */
.spec-strip { border-bottom: 1px solid var(--line); }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec { font-family: var(--comic); padding: 1.75rem 1.5rem; border-left: 1px solid var(--line); display: grid; gap: 0.375rem; align-content: start; }
.spec:first-child { border-left: 0; padding-left: 0; }
.spec-value { font-size: var(--step-3); line-height: 1.1; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.spec-value small { font-size: 0.5em; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 0.35em; color: var(--muted); }
.spec-label { color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
@media (max-width: 860px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .spec:nth-child(-n + 2) { border-top: 0; }
  .spec:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
}

/* Sections */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section.soft { background: var(--stone); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.section-head > div { display: grid; gap: 0.75rem; }

.sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.sector {
  display: grid; gap: 1.125rem; align-content: start; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.75rem 1.75rem;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.sector > :not(.photo) { margin-inline: 1rem; }
.sector:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); color: inherit; }
.sector .photo { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.sector h3 { font-size: var(--step-2); }
.sector p { color: var(--muted); }
@media (max-width: 760px) { .sectors { grid-template-columns: 1fr; } }

/* Gallery category tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.tile {
  display: grid; gap: 0; text-decoration: none; color: var(--charcoal);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tile:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); color: var(--charcoal); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stone); }
.tile-label { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.875rem 1rem 1rem; border-top: 1px solid var(--line); }
.tile-label { font-family: var(--comic); }
.tile-label span:first-child { font-size: 1rem; line-height: 1.3; }
.tile-label span:last-child { font-size: var(--step--1); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tiles { gap: 0.75rem; } .tile-label { flex-direction: column; gap: 0.125rem; padding: 0.75rem; } }

/* Split feature rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.split.flip > .photo { order: 2; }
.split > .photo { aspect-ratio: 5 / 4; }
.split .body { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > .photo { order: 0; } }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.check-list li { padding-left: 1.5rem; position: relative; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.625rem; height: 1px; background: var(--slate); }
.list-title { font-family: var(--comic); font-size: 1rem; color: var(--slate); }

/* Estimate panel (replaces the old red band) */
.cta-band { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.cta-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.cta-panel > div:first-child { display: grid; gap: 0.5rem; max-width: 36rem; }
.cta-panel p { color: var(--muted); }
.cta-panel .actions { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cta-panel .phone { color: var(--charcoal); text-decoration: none; font-size: var(--step-1); display: inline-flex; gap: 0.5rem; align-items: center; }

/* Interior page header */
.page-head { border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.25rem, 4vw, 3.5rem); display: grid; gap: 1.125rem; }
.page-head h1 { max-width: 52rem; }
.page-head p { color: var(--muted); max-width: 44rem; font-size: var(--step-1); line-height: 1.6; }
.crumbs { font-size: var(--step--1); color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--charcoal); }

.intro-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.intro-grid aside { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: grid; gap: 1rem; box-shadow: var(--shadow); }
@media (max-width: 860px) { .intro-grid { grid-template-columns: 1fr; } }

/* Gallery grid + lightbox */
.gallery-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.gallery-intro > .prose:last-child { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
@media (max-width: 860px) { .gallery-intro { grid-template-columns: 1fr; } }
.signoff { font-family: var(--comic); color: var(--slate); }
.photo-grid { columns: 3 17rem; column-gap: 1rem; }
.photo-grid a { display: block; margin-bottom: 1rem; break-inside: avoid; border-radius: var(--radius-sm); overflow: hidden; background: var(--stone); transition: box-shadow 0.25s var(--ease); }
.photo-grid img { width: 100%; transition: transform 0.6s var(--ease); }
.photo-grid a:hover { box-shadow: var(--shadow-hover); }
.photo-grid a:hover img { transform: scale(1.015); }
.gallery-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.75rem; margin-top: 3rem; }
.gallery-pager a { display: grid; gap: 0.25rem; text-decoration: none; color: var(--charcoal); }
.gallery-pager a span { font-family: var(--comic); font-size: 0.9375rem; color: var(--muted); }
.gallery-pager a strong { font-weight: 400; font-size: var(--step-1); }
.gallery-pager a:hover strong { color: var(--accent); }
.gallery-pager a:last-child { text-align: right; margin-left: auto; }

.lightbox { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: rgba(250, 248, 245, 0.98); color: var(--charcoal); }
.lightbox::backdrop { background: rgba(250, 248, 245, 0.9); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; padding: calc(0.75rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 0.75rem max(1rem, env(safe-area-inset-left, 0px)); font-variant-numeric: tabular-nums; color: var(--muted); border-bottom: 1px solid var(--line); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 1.25rem max(4rem, env(safe-area-inset-right, 0px)) calc(1.25rem + env(safe-area-inset-bottom, 0px)) max(4rem, env(safe-area-inset-left, 0px)); }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.lb-btn { background: var(--panel); color: var(--charcoal); border: 1px solid var(--line); border-radius: 999px; width: 2.75rem; height: 2.75rem; font: 400 1.125rem/1 var(--font); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s var(--ease); }
.lb-btn:hover { border-color: var(--charcoal); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: max(0.75rem, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(0.75rem, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .lb-stage { padding-inline: 0.75rem; padding-bottom: 4.5rem; } .lb-prev, .lb-next { top: auto; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); transform: none; } }

/* About */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.member { display: grid; gap: 0.75rem; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.75rem 1.75rem; }
.member > :not(.photo) { margin-inline: 0.875rem; }
.member .photo { aspect-ratio: 4 / 4.2; border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
.member h3 { font-size: var(--step-2); }
.member .role { font-family: var(--comic); font-size: 0.9375rem; color: var(--slate); }
.member p:last-child { color: var(--muted); font-size: 0.9875rem; }
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.timeline div { font-family: var(--comic); padding: 1.5rem 1.5rem 0 0; display: grid; gap: 0.5rem; position: relative; }
.timeline div::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ground); border: 1px solid var(--slate); }
.timeline strong { font-weight: 400; font-size: var(--step-2); }
.timeline span { color: var(--muted); }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-strong); } .timeline div { padding: 0 0 1.5rem 1.5rem; } .timeline div::before { top: 0.6em; left: -5px; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.375rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.25rem); box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; }
@media (max-width: 580px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
.field label { font-size: 0.9375rem; color: var(--charcoal); }
.field .hint { font-size: var(--step--1); color: var(--muted); line-height: 1.45; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--font); color: var(--ink);
  padding: 0.75rem 0.9375rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ground);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--slate); background: var(--panel); box-shadow: 0 0 0 3px rgba(92, 103, 109, 0.14); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input[type="file"] { padding: 0.75rem; border-style: dashed; }
.req { color: var(--accent); }
.hp { position: absolute; left: -5000px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.form-actions .note { margin-left: auto; font-size: var(--step--1); color: var(--muted); }
.form-status { padding: 0.875rem 1.125rem; border-radius: var(--radius-sm); font-size: 0.9875rem; border: 1px solid; }
.form-status.ok { background: #eef3ec; color: #3f5a3c; border-color: #cbd8c6; }
.form-status.err { background: var(--accent-wash); color: var(--accent-deep); border-color: #e6cbc6; }
.form-status.info { background: var(--stone); color: var(--ink); border-color: var(--line); }
.info-card { display: grid; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.info-card > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; padding: 1.375rem 1.5rem; border-top: 1px solid var(--line); }
.info-card > div:first-child { border-top: 0; }
.info-card > div > :not(.icon) { grid-column: 2; }
.info-card .icon { grid-row: 1 / span 3; margin-top: 0.2rem; }
.info-card { font-family: var(--comic); }
.info-card h3 { font-family: var(--comic); font-size: 0.9375rem; color: var(--slate); }
.info-card .big { font-size: var(--step-2); color: var(--charcoal); text-decoration: none; display: block; line-height: 1.3; }
.info-card address { font-style: normal; }

/* Footer */
.site-footer { background: var(--stone); color: var(--muted); font-size: 0.9375rem; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-block: 4rem 3rem; }
.footer-grid h2 { font-family: var(--comic); font-size: 1rem; font-weight: 400; color: var(--slate); margin-bottom: 0.875rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-brand { display: grid; gap: 1.125rem; align-content: start; }
.footer-brand .logo-chip img { height: 3rem; width: auto; }
.footer-base { border-top: 1px solid var(--stone-2); padding-block: 1.375rem calc(1.375rem + env(safe-area-inset-bottom, 0px)); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- theme d ---- */
/* Design D — Spec Sheet
   Layout: a fabricator's shop drawing. White paper on a faint measuring grid, every block
   boxed with 1px rules and corner ticks, labels in mono like drawing callouts.
   Colors come straight from the logo, used sparingly: slate for structure, red only for
   small markers and the main button. */
:root {
  --ground: #ffffff;
  --panel: #ffffff;
  --stone: #f4f6f7;
  --stone-2: #e9edef;
  --line: #d6dcdf;
  --line-strong: #9aa6ac;
  --charcoal: #1b2328;
  --ink: #2c353a;
  --muted: #5f6b71;
  --slate: #48565e;
  --accent: #b8353a;
  --accent-deep: #9a2b30;
  --accent-wash: #fbeeee;
  --grid: rgba(72, 86, 94, 0.07);
  --font: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --comic: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --cond: "IBM Plex Sans Condensed", "Arial Narrow", "IBM Plex Sans", sans-serif;
  --radius: 0px;
  --radius-sm: 0px;
  --shadow: none;
  --shadow-hover: none;
}
body { line-height: 1.65; }
h1, h2, h3 { font-family: var(--cond); font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; }
h1 { font-size: clamp(2.75rem, 5.5vw + 1rem, 5.5rem); }
h2 { font-size: clamp(1.875rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: 1.5rem; }
.eyebrow, .list-title, .member .role, .info-card h3, .footer-grid h2, .gallery-pager a span, .spec-label, .tile-label span:last-child, .crumbs {
  font-family: var(--comic); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate);
}
.eyebrow::before { content: "■"; width: auto; height: auto; background: none; color: var(--accent); font-size: 0.5rem; }
.kicker { font-family: var(--cond); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.25rem; color: var(--slate); }

/* Measuring grid behind headers */
.hero, .page-head { background-color: var(--ground); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }

/* Buttons */
.btn { border-radius: 0; font-family: var(--comic); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 4px 4px 0 var(--charcoal); }
.btn-ghost { border-color: var(--charcoal); background: var(--panel); }
.btn-ghost:hover { background: var(--charcoal); color: #fff; }
.link-arrow { font-family: var(--comic); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--charcoal); }

/* Header: a title block */
.site-header { background: #fff; border-bottom: 1px solid var(--charcoal); backdrop-filter: none; }
.header-row { min-height: 4.5rem; }
.site-nav ul { gap: 0; border-left: 1px solid var(--line); }
.site-nav a { border-radius: 0; font-family: var(--comic); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem 1rem; border-right: 1px solid var(--line); }
.site-nav a:hover { background: var(--stone); }
.site-nav a[aria-current="page"] { background: var(--charcoal); color: #fff; box-shadow: none; }
.header-phone { font-family: var(--comic); font-size: 0.8125rem; }
@media (max-width: 860px) {
  .site-nav ul { border-left: 0; }
  .site-nav a { border-right: 0; }
  .site-nav a[aria-current="page"] { background: none; color: var(--accent); }
  .menu-toggle { border-radius: 0; font-family: var(--comic); text-transform: uppercase; font-size: 0.75rem; border-color: var(--charcoal); }
}

/* Hero: drawing with a dimensioned photo */
.hero { border-bottom: 1px solid var(--charcoal); }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: clamp(3rem, 6vw, 5.5rem); }
.hero-text h1 em { font-style: normal; color: var(--slate); -webkit-text-stroke: 0; }
.hero-photo { box-shadow: none; overflow: visible; background: none; border: 1px solid var(--charcoal); padding: 10px; aspect-ratio: auto; position: relative; }
.hero-photo img { aspect-ratio: 5 / 4; }
.hero-photo::before { content: ""; position: absolute; left: 10px; right: 10px; top: -22px; height: 9px; border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); background: linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat; }
.hero-cap { display: flex; justify-content: space-between; gap: 1rem; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); font-family: var(--comic); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.hero-cap::before { content: "Fig. 01"; color: var(--accent); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-photo { margin-top: 1.5rem; } }

/* Spec table */
.spec-strip { border-bottom: 1px solid var(--charcoal); background: #fff; }
.spec { border-color: var(--line) !important; position: relative; }
.spec-value { font-family: var(--cond); font-weight: 600; font-size: 2.5rem; }
.spec-value small { font-family: var(--comic); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.04em; }

.section.soft { background: var(--stone); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.section-head { border-bottom: 1px solid var(--charcoal); }

/* Boxed cards with corner ticks */
.sector, .tile, .member, .intro-grid aside, .gallery-intro > .prose:last-child, .form, .info-card, .cta-panel {
  border-radius: 0; box-shadow: none; border: 1px solid var(--charcoal);
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat;
  background-color: #fff;
}
.sector { padding: 0 0 1.5rem; }
.sector .photo { border-bottom: 1px solid var(--charcoal); }
.sector > :not(.photo) { margin-inline: 1.25rem; }
.sector:hover, .tile:hover { box-shadow: 6px 6px 0 var(--stone-2); border-color: var(--charcoal); }
.sector h3 { font-size: 1.625rem; }
.tile { counter-increment: tile; }
.tiles { counter-reset: tile; }
.tile-label { border-top: 1px solid var(--charcoal); }
.tile-label span:first-child { font-family: var(--cond); font-weight: 600; text-transform: uppercase; font-size: 1.0625rem; }
.tile-label span:first-child::before { content: counter(tile, decimal-leading-zero) " "; font-family: var(--comic); font-size: 0.75rem; color: var(--accent); }
.tile img { filter: grayscale(0.15); }

.check-list li::before { content: "+"; width: auto; height: auto; background: none; top: 0; color: var(--accent); font-family: var(--comic); }
.cta-band { border-top: 1px solid var(--charcoal); }
.cta-panel .phone { font-family: var(--cond); font-weight: 600; font-size: 1.75rem; }

.page-head { border-bottom: 1px solid var(--charcoal); }
.page-head p { color: var(--slate); }
.photo { border-radius: 0; }
.photo-grid a { border-radius: 0; border: 1px solid var(--line); padding: 6px; background: #fff; }
.photo-grid a:hover { border-color: var(--charcoal); box-shadow: none; }
.photo-grid { counter-reset: fig; }
.gallery-pager { border-top: 1px solid var(--charcoal); }
.gallery-pager a strong { font-family: var(--cond); font-weight: 600; text-transform: uppercase; }
.signoff { font-family: var(--comic); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.lb-btn { border-radius: 0; border-color: var(--charcoal); }
.timeline { border-top: 1px solid var(--charcoal); }
.timeline div::before { border-radius: 0; background: var(--accent); border: 0; width: 8px; height: 8px; }
.timeline strong { font-family: var(--cond); font-weight: 600; font-size: 1.75rem; }
.timeline div { font-family: var(--font); }
.member { padding: 0 0 1.5rem; }
.member .photo { border-bottom: 1px solid var(--charcoal); margin-bottom: 0.75rem; }
.member > :not(.photo) { margin-inline: 1.25rem; }
.member h3 { font-size: 1.5rem; }

.field label { font-family: var(--comic); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.field input, .field select, .field textarea { border-radius: 0; background: #fff; border-color: var(--line-strong); font-family: var(--font); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--charcoal); box-shadow: 3px 3px 0 var(--stone-2); }
.form-actions { border-top-color: var(--line); }
.form-status { border-radius: 0; }
.info-card > div { border-top-color: var(--line); }
.info-card .big { font-family: var(--cond); font-weight: 600; font-size: 1.875rem; }
.icon { stroke: var(--accent); }

.site-footer { background: var(--charcoal); color: #a9b4b9; border-top: 0; }
.site-footer a { color: #e7ecee; }
.site-footer a:hover { color: #fff; }
.footer-grid h2 { color: #8f9ca2; }
.footer-brand .logo-chip { background: #fff; padding: 0.5rem 0.75rem; display: inline-block; width: max-content; }
.footer-base { border-top-color: #34414a; font-family: var(--comic); font-size: 0.75rem; }
/* Keep longer info-card text in the body font; mono stays on the small labels */
.info-card p, .info-card li, .info-card address { font-family: var(--font); }
/* Tablets and phones (incl. unfolded Z Fold): headline first, then a shorter, wide photo */
@media (max-width: 860px) {
  .hero-grid { padding-block: 2.5rem 3rem; gap: 2rem; }
  .hero-photo { order: 0; margin-top: 1.75rem; }
  .hero-photo img { aspect-ratio: 16 / 10; max-height: 42vh; width: 100%; object-fit: cover; }
}
.hero-cap::before { white-space: nowrap; }
@media (max-width: 480px) { .hero-text .eyebrow { font-size: 0.875rem; } }