/* ==========================================================================
   ACTP LTD | Component Stylesheet
   UI/UX PRO MAX - Architectural Axonometric & Technical Drafting Aesthetic
   ========================================================================== */

/* ==========================================================================
   Monochrome icon system — every icon inherits currentColor, so the UI
   stays ink / white / brand-orange with no third-party emoji colour.
   ========================================================================== */
.ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Larger boxed icons (contact channels, direct links) */
.channel-icon .ico,
.direct-link-icon .ico {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
}

/* Any stray emoji is forced to text presentation rather than colour glyphs */
.dock-btn,
.tab-btn,
.project-location,
.project-view-btn {
  font-variant-emoji: text;
}

/* ==========================================================================
   0. Top Utility / Architectural Header Info Bar
   ========================================================================== */
.top-utility-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.45rem 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 101;
  font-family: var(--font-mono);
}

.utility-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.utility-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.utility-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.utility-item a {
  color: var(--text-primary);
  font-weight: 600;
}

.utility-item a:hover {
  color: var(--brand-orange);
}

.utility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  color: var(--brand-orange-dark);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.utility-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.76rem;
}

.utility-right span.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
  margin-right: 0.35rem;
}

/* ==========================================================================
   1. Header & Navigation Bar (Drafting Atelier Header)
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* Live height — descendants (the mobile drawer) anchor to this so they
     stay flush with the bar when it shrinks on scroll. */
  --header-h-live: var(--header-height);
  height: var(--header-h-live);
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-medium);
  z-index: 100;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
}

.header.scrolled {
  --header-h-live: var(--header-height-scrolled);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-bold);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Brand Logo Vector */
.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--text-primary);
}

.brand-svg-logo {
  display: block;
  width: 130px;
  height: auto;
}

.brand-tagline {
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--border-bold);
  padding-left: 0.85rem;
}

.brand-tagline-main {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.brand-tagline-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brand-orange);
  font-weight: 700;
}

/* Navigation Links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color var(--transition-fast);
  position: relative;
}

/* Drafting underline: a measured rule that draws itself left-to-right */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  left: 0.7rem;
  right: 0.7rem;
  height: 1.5px;
  background: var(--text-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-normal);
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

/* The active plate is marked in brand orange — the one colour the UI uses */
.nav-link.active::after {
  background: var(--brand-accent);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link:focus-visible {
  outline: 1.5px solid var(--text-primary);
  outline-offset: 2px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Theme Toggle Button */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* ==========================================================================
   2. Hero Section (Axonometric Atelier Showcase)
   ========================================================================== */
.hero {
  padding: 4.5rem 0 6rem 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-medium);
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge-container {
  margin-bottom: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--brand-orange);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-sm);
}

.hero-badge .pulse-point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
}

.hero-title {
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2.25rem;
  max-width: 620px;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.25rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-medium);
}

.stat-item h3 {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--brand-orange);
  margin-bottom: 0.25rem;
  line-height: 1;
}

.stat-item p {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
}

/* Hero Axonometric Drafting Canvas Showcase */
.hero-visual {
  position: relative;
}

.drafting-board-frame {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  padding: 1rem;
  box-shadow: var(--shadow-plate);
  position: relative;
}

/* Corner Crop Registration Marks (+) */
.drafting-board-frame::before {
  content: '+';
  position: absolute;
  top: 4px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.drafting-board-frame::after {
  content: '+';
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.drafting-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.drafting-canvas-inner {
  position: relative;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  overflow: hidden;
}

.drafting-axonometric-img {
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.05) grayscale(0.15);
  transition: transform var(--transition-slow);
}

.drafting-board-frame:hover .drafting-axonometric-img {
  transform: scale(1.02);
}

/* Title Block Footer Stamp */
.drafting-title-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  align-items: center;
}

.title-block-info h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

.title-block-info p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ==========================================================================
   3. Certified Qualifications Strip (Technical Plates)
   ========================================================================== */
.qualifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Fixed 3-up: 6 cards read as two clean rows of three */
.qualifications-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .qualifications-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .qualifications-grid.grid-3 {
    grid-template-columns: 1fr;
  }
}

.qual-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.qual-card:hover {
  border-color: var(--brand-orange);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.qual-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 1.5rem;
  width: 24px;
  height: 2px;
  background: var(--brand-orange);
}

.qual-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-orange-dark);
  margin-bottom: 0.75rem;
}

.qual-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.qual-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ==========================================================================
   4. Comprehensive Services Suite (Architectural Plates)
   ========================================================================== */
.services-tabs-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}

.tab-btn {
  padding: 0.7rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tab-btn:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

.tab-btn.active {
  background: var(--brand-orange);
  border-color: var(--brand-orange-dark);
  color: var(--brand-contrast);
  box-shadow: 0 4px 12px var(--brand-orange-glow);
}

.tab-btn .tab-count {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-xs);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.service-card:hover {
  border-color: var(--brand-orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.service-icon {
  width: 44px;
  height: 44px;
  background: var(--brand-orange-subtle);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--brand-orange);
  flex-shrink: 0;
}

.service-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0.2rem;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.service-card-footer a {
  color: var(--brand-orange);
  font-weight: 700;
  text-transform: uppercase;
}

.comparison-badge.before {
  right: 1.5rem;
}

.comparison-badge.after {
  left: 1.5rem;
  border-color: var(--brand-orange);
  color: var(--brand-orange-light);
}

/* ==========================================================================
   7. Portfolio Grid (Architectural Project Plates)
   ========================================================================== */
.portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 3.5rem;
}

.filter-btn {
  padding: 0.6rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

.filter-btn.active {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2.25rem;
}

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  border-color: var(--brand-orange);
  transform: translateY(-5px);
  box-shadow: var(--shadow-plate);
}

.project-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #101010;
}

.project-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.project-card:hover .project-img-wrapper img {
  transform: scale(1.05);
}

.project-category-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.85rem;
  background: rgba(16, 16, 16, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-overlay-view {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.project-card:hover .project-overlay-view {
  opacity: 1;
}

.project-view-btn {
  padding: 0.75rem 1.5rem;
  background: var(--brand-orange);
  color: var(--brand-contrast);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}

.project-info {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  border-top: 1px solid var(--border-subtle);
}

.project-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.project-location {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--brand-orange);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.project-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
}

.meta-pill {
  padding: 0.25rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ==========================================================================
   8. Testimonials Section
   ========================================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.testimonial-stars {
  color: var(--text-primary);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.testimonial-quote {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
  font-style: italic;
}

.testimonial-author-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.25rem;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-xs);
  background: var(--brand-orange);
  color: var(--brand-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.1rem;
}

.author-info h5 {
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.author-info p {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--brand-orange);
}

/* ==========================================================================
   9. FAQ Accordion
   ========================================================================== */
.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--brand-orange);
}

.faq-item.active {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  padding: 1.5rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
}

.faq-toggle-icon {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--brand-orange);
  transition: transform var(--transition-fast);
}

.faq-item.active .faq-toggle-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
  padding: 0 1.75rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 1.5rem;
}

/* ==========================================================================
   3b. The Drawing Room — Technical Detailing Showcase
   ========================================================================== */
.drawing-room {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
  margin-top: 4.5rem;
  padding: 3rem;
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-plate);
}

.drawing-room-copy h3 {
  margin: 1.25rem 0;
}

.drawing-room-copy > p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.drawing-spec-list {
  list-style: none;
  margin-bottom: 2rem;
  border-top: 1px solid var(--border-hairline);
}

.drawing-spec-list li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.94rem;
  color: var(--text-secondary);
}

.drawing-spec-list span {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

/* The plate: a drawing pinned to the sheet, hairline-ruled like a title block */
.drawing-room-plate {
  margin: 0;
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  background: var(--bg-vellum);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.drawing-room-plate img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: top center;
  background: #ffffff;
  padding: 1rem;
  filter: grayscale(1) contrast(1.1);
}

.drawing-room-plate figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-medium);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}

/* Until the plate image is supplied, drop the frame rather than show a broken box */
.drawing-room-plate.is-empty {
  display: none;
}

.drawing-room:has(.drawing-room-plate.is-empty) {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   9a. Projects Page — Category Index & Drawing-Schedule Rows
   ========================================================================== */
/* Category index uses the same pill language as the portfolio filters.
   Column counts are chosen so the nine disciplines never leave a single
   pill stranded on its own row: 5+4, then 3+3+3, then 2 columns, then 1. */
.project-index {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

@media (max-width: 1180px) {
  .project-index {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .project-index {
    grid-template-columns: repeat(2, 1fr);
  }
  /* odd count in a 2-up grid — let the last pill span both columns */
  .project-index-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .project-index {
    grid-template-columns: 1fr;
  }
}

.project-index-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  transition: all var(--transition-fast);
}

.project-index-link:hover,
.project-index-link.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-card);
}

.project-index-plate {
  display: none;
}

.project-index-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  opacity: 0.85;
}

/* Published capabilities for a discipline */
.cap-list {
  margin-bottom: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.cap-heading {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.cap-list ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.5rem 1.75rem;
}

.cap-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.cap-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1.5px;
  background: var(--brand-accent);
}

/* ==========================================================================
   Card slider — horizontal scroll-snap. Cards stay in normal flow so the
   row sizes itself; nothing depends on a JS-measured height.
   ========================================================================== */
.slider-wrap {
  position: relative;
  margin-bottom: 3rem;
}

.card-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  /* No scroll-snap and no CSS smooth-scroll here. Both fight the
     scroll-linked transforms and the programmatic scrollLeft used by the
     arrows and the page-scroll drift. Smooth motion is requested per call
     via scrollTo({ behavior: "smooth" }) instead. */
  scroll-snap-type: none;
  overscroll-behavior-x: contain;
  /* room for rotated/scaled cards, and inline padding so the first and
     last card can still reach the centre */
  padding: 1.75rem calc((100% - clamp(300px, 34vw, 470px)) / 2) 1.5rem;
  perspective: 1400px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.card-slider::-webkit-scrollbar {
  display: none;
}

.card-slider > * {
  flex: 0 0 clamp(300px, 34vw, 470px);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  /* Deliberately no transform/opacity transition: the transform is
     recalculated every frame from scroll position, so a transition would
     restart continuously and produce the judder. */
  transition: box-shadow 0.3s ease;
}

/* the card nearest the centre reads as the focused plate */
.card-slider > .is-centred {
  box-shadow: 0 26px 54px rgba(23, 23, 23, 0.22);
}

/* Wide, short cover keeps the cards compact in a row */
.card-slider > .project-card .project-img-wrapper {
  aspect-ratio: 16 / 10;
}

.card-slider .work-strip {
  margin: 0.9rem 0 0;
  gap: 6px;
}

.card-slider .work-strip .work-thumb {
  aspect-ratio: 4 / 3;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 20;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), opacity var(--transition-fast);
}

.slider-arrow .ico {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  stroke-width: 2;
}

/* A lone card is not a slider — lay it out normally */
.single-card {
  display: grid;
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
  padding: 0;
  perspective: none;
}

.single-card > * {
  transform: none !important;
  opacity: 1 !important;
}

.slider-arrow:hover:not(:disabled) {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #ffffff;
}

.slider-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.slider-prev { left: -14px; }
.slider-next { right: -14px; }

@media (max-width: 900px) {
  .card-slider > * {
    flex-basis: min(86vw, 420px);
  }
  .slider-prev { left: 2px; }
  .slider-next { right: 2px; }
}

/* Thumbnail strip sits inside the card body, under the title */
.work-strip {
  display: grid;
  /* four across: three thumbs plus the "+N" tile. Six was too many to
     stay legible inside a card this width. */
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 1.25rem 0;
}

.work-strip .work-thumb {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.work-strip .work-thumb:hover {
  border-color: var(--brand-accent);
}

/* Enquire pill picks up the one sanctioned colour on hover */
.meta-pill-cta {
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.meta-pill-cta:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #ffffff;
}

/* The card's cover is a button on the projects page — strip native chrome */
button.project-img-wrapper {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: zoom-in;
  text-align: left;
}

/* "+N more" tile — the remaining frames live in the lightbox */
.work-more {
  position: relative;
}

.work-more img {
  filter: grayscale(1) brightness(0.42);
}

.work-more-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  pointer-events: none;
}

.work-more:hover img {
  filter: grayscale(0) brightness(0.55);
}

@media (max-width: 560px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* Project photography: contact-sheet grid of plates */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  margin-bottom: 2.5rem;
  background: var(--border-medium);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}

.project-shot {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: var(--bg-card);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.project-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Photographs of built work show in full colour */
  transition: transform var(--transition-slow);
}

.project-shot:hover img,
.project-shot:focus-visible img {
  transform: scale(1.04);
}

.project-shot:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -2px;
}

/* ==========================================================================
   Desktop floating contact dock (direct links only — no forms)
   ========================================================================== */
.contact-dock {
  position: fixed;
  right: 2rem;
  bottom: 5.5rem;
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}

.contact-dock-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--brand-accent);
  color: #ffffff;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.contact-dock-toggle:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.contact-dock.open .contact-dock-toggle {
  filter: brightness(0.92);
}

.contact-dock-menu {
  display: flex;
  flex-direction: column;
  min-width: 268px;
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  animation: dock-open 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* An author `display` beats the UA rule for [hidden], so restate it —
   without this the links show before the toggle is ever pressed. */
.contact-dock-menu[hidden] {
  display: none;
}

@keyframes dock-open {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-dock-menu {
    animation: none;
  }
}

.contact-dock-link {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border-hairline);
  transition: background var(--transition-fast);
}

.contact-dock-link:last-child {
  border-bottom: none;
}

.contact-dock-link:hover {
  background: var(--bg-secondary);
}

.contact-dock-link span:first-child {
  font-size: 1.05rem;
  text-align: center;
}

.contact-dock-link strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.contact-dock-link em {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  color: var(--text-muted);
}

/* The mobile bottom dock already covers small screens */
@media (max-width: 768px) {
  .contact-dock {
    display: none;
  }
}

/* Lightbox slider */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 5rem;
  background: rgba(16, 16, 16, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
}

.lightbox-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 100%;
  max-height: 100%;
  cursor: default;
}

.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.lightbox-counter {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-xs);
  color: var(--brand-accent);
  font-weight: 700;
  white-space: nowrap;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.lightbox-close {
  top: 1.25rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  font-size: 2rem;
  line-height: 1;
}

.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #ffffff;
}

.lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .lightbox {
    padding: 1rem 0.75rem 1.25rem;
  }
  .lightbox-nav {
    width: 40px;
    height: 52px;
    font-size: 1.6rem;
  }
  .lightbox-prev { left: 0.35rem; }
  .lightbox-next { right: 0.35rem; }
  .lightbox-img {
    max-height: calc(100vh - 9rem);
  }
}

/* Drawing-schedule rows: hairline-ruled, monospaced, numbered */
.project-list {
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}

@media (max-width: 640px) {
  .project-row {
    grid-template-columns: 2.5rem 1fr;
    row-gap: 0.6rem;
    padding: 1rem 1.15rem;
  }
  .project-row-type {
    grid-column: 2;
    justify-self: start;
  }
  .project-row-arrow {
    display: none;
  }
}

/* ==========================================================================
   9b. About Us Section
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.about-copy p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.35rem;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.about-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-medium);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-plate);
}

.about-fact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.6rem 1.4rem;
  background: var(--bg-card);
}

.about-fact-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.about-fact strong {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
}

.about-fact-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ==========================================================================
   10. Contact Section & Direct Links
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 3.5rem;
  align-items: start;
}

.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-plate);
}

.contact-channel {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.channel-icon {
  width: 44px;
  height: 44px;
  background: var(--brand-orange-subtle);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--brand-orange);
  flex-shrink: 0;
}

.channel-details h5 {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.channel-details p a {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-orange);
}

.contact-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-plate);
}

.direct-contact-heading {
  margin-bottom: 0.75rem;
}

.direct-contact-copy {
  margin-bottom: 2rem;
  font-size: 1rem;
}

.direct-contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.direct-link-btn {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.35rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xs);
  transition: all var(--transition-normal);
}

.direct-link-btn:hover {
  background: var(--bg-card);
  border-color: var(--border-bold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.direct-link-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xs);
}

.direct-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.direct-link-text strong {
  font-size: 1rem;
  color: var(--text-primary);
}

.direct-link-text span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.direct-link-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.direct-link-btn:hover .direct-link-arrow {
  transform: translateX(4px);
  color: var(--text-primary);
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   12. Mobile Bottom Quick-Action Dock (<768px)
   ========================================================================== */
.mobile-bottom-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-bold);
  padding: 0.65rem 1rem;
  z-index: 99;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.mobile-dock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 0.6rem;
}

.dock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  text-decoration: none;
  text-align: center;
}

.dock-btn-call {
  background: var(--bg-card);
  border: 1px solid var(--border-bold);
  color: var(--text-primary);
}

.dock-btn-whatsapp {
  background: var(--text-primary);
  border: 1px solid var(--text-primary);
  color: var(--bg-card);
}

.dock-btn-quote {
  background: var(--brand-orange);
  border: 1px solid var(--brand-orange-dark);
  color: var(--brand-contrast);
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-bold);
  padding: 5rem 0 2rem 0;
  position: relative;
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3.5rem;
  margin-bottom: 4rem;
}

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-medium);
  padding-bottom: 0.5rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links li a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-links li a:hover {
  color: var(--brand-orange);
}

.footer-bottom {
  border-top: 1px solid var(--border-medium);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================================
   14. Responsive Layout Rules & Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .top-utility-bar {
    display: none;
  }
  /* Bottom dock carries the CTAs on mobile — keep the bar to logo + toggle + menu */
  .header-actions .btn-primary {
    display: none;
  }
  .brand-svg-logo {
    width: 104px;
  }
  .brand-tagline {
    display: none;
  }
  .nav-menu {
    position: fixed;
    /* follows the bar as it shrinks, so the drawer stays flush against it */
    top: var(--header-h-live);
    left: 0;
    width: 100%;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-bold);
    transition: top var(--transition-normal), transform var(--transition-normal),
                opacity var(--transition-normal), visibility var(--transition-normal);
    flex-direction: column;
    padding: 1.5rem 2rem;
    gap: 1rem;
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }
  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .hamburger {
    display: flex;
  }
  /* Page behind the open drawer is frozen, so the header cannot shrink and
     shift the drawer while the user is reading it. */
  body.nav-open {
    overflow: hidden;
  }
  .mobile-bottom-dock {
    display: block;
  }
  .hero {
    padding: 3rem 0 4rem 0;
  }
  .contact-form-card {
    padding: 2rem 1.5rem;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  body {
    padding-bottom: 60px;
  }
}

/* ==========================================================================
   iOS / notched-device fitting
   Two problems this solves:
   1. Fixed bottom UI sits under the home indicator on notched iPhones.
   2. iOS reports 100vh as the viewport WITHOUT browser chrome, so anything
      sized to 100vh is taller than the visible area and gets cut off.
      dvh tracks the real visible height; the vh rule stays as a fallback.
   ========================================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-bottom-dock {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .contact-dock {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    right: calc(2rem + env(safe-area-inset-right));
  }

  .back-to-top-btn {
    bottom: calc(2rem + env(safe-area-inset-bottom));
    right: calc(2rem + env(safe-area-inset-right));
  }

  .lightbox {
    padding-top: calc(2.5rem + env(safe-area-inset-top));
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
    padding-left: calc(5rem + env(safe-area-inset-left));
    padding-right: calc(5rem + env(safe-area-inset-right));
  }

  .lightbox-close {
    top: calc(1.25rem + env(safe-area-inset-top));
    right: calc(1.5rem + env(safe-area-inset-right));
  }

  /* the header sits under the notch in landscape without this */
  .header-container,
  .top-utility-bar .container {
    padding-left: max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
  }

  @media (max-width: 768px) {
    body {
      padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
  }
}

/* Real visible height on iOS, where 100vh overshoots */
@supports (height: 100dvh) {
  .lightbox-img {
    max-height: calc(100dvh - 11rem);
  }
}

@media (max-width: 640px) {
  @supports (height: 100dvh) {
    .lightbox-img {
      max-height: calc(100dvh - 9rem);
    }
  }
}

/* ==========================================================================
   Mobile layout corrections (observed on iPhone)
   1. .drawing-room had no breakpoint, so it stayed a two-column grid: the
      copy collapsed to a narrow ribbon and the plate to a sliver.
   2. Slider arrows sat on top of the card content, clipping the text
      either side. Touch devices swipe, so the arrows are not needed there.
   3. The scale list wrapped its label and text into two cramped columns.
   ========================================================================== */
@media (max-width: 900px) {
  .drawing-room {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem;
    margin-top: 3rem;
  }

  .drawing-room-plate img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  /* Swipe replaces the arrows; overlaying them clipped the card text */
  .slider-arrow {
    display: none;
  }

  .card-slider {
    /* no arrow gutters needed, so the card can use the full width */
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1rem;
  }

  .card-slider > * {
    flex-basis: min(88vw, 400px);
    scroll-snap-align: center;
  }

  /* the 3D tilt is disorienting on a narrow screen and costs legibility */
  .card-slider > * {
    transform: none !important;
    opacity: 1 !important;
  }

  .drawing-spec-list li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .drawing-spec-list li span {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Back-to-top on mobile
   It sat at bottom:2rem, inside the bottom dock's band, and with a lower
   z-index than the dock — so the dock painted over it and only a clipped
   sliver showed. Lift it clear of the dock and above it in the stack.
   ========================================================================== */
@media (max-width: 768px) {
  .back-to-top-btn {
    bottom: 5.25rem;
    right: 1rem;
    z-index: 100;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--border-bold);
    box-shadow: var(--shadow-lg);
  }

  @supports (padding: env(safe-area-inset-bottom)) {
    .back-to-top-btn {
      bottom: calc(5.25rem + env(safe-area-inset-bottom));
      right: calc(1rem + env(safe-area-inset-right));
    }
  }
}

/* ==========================================================================
   Contact section on small screens
   The grid already collapses to one column, but the content inside did not
   fit: the email address is a single unbreakable token rendered at 1.15rem
   monospace, which together with the 44px icon and card padding exceeded a
   375px viewport. Shrink the type, let long tokens break, and trim padding.
   ========================================================================== */
@media (max-width: 560px) {
  .contact-info-card,
  .contact-form-card {
    padding: 1.75rem 1.25rem;
  }

  .contact-channel {
    gap: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .channel-icon,
  .direct-link-icon {
    width: 38px;
    height: 38px;
  }

  /* long addresses must be allowed to wrap rather than push the card wide */
  .channel-details p a,
  .direct-link-text span {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .channel-details h5 {
    font-size: 0.98rem;
  }

  .channel-details span {
    font-size: 0.76rem;
  }

  .direct-link-btn {
    gap: 0.85rem;
    padding: 0.9rem 1rem;
  }

  .direct-link-text strong {
    font-size: 0.92rem;
  }

  /* the arrow is decoration; drop it before it squeezes the label */
  .direct-link-arrow {
    display: none;
  }
}

/* Belt and braces: no email or phone string should ever widen a container */
.channel-details p a,
.direct-link-text span,
.direct-link-text strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-channel,
.direct-link-btn {
  min-width: 0;
}

.channel-details {
  min-width: 0;
  flex: 1;
}

/* ==========================================================================
   Splash entry page — header, big logo, Enter button, footer.
   Sized so the whole thing sits in one screen without scrolling: the main
   area takes the space left over once the header and footer are placed.
   ========================================================================== */
.splash-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@supports (min-height: 100dvh) {
  .splash-body {
    min-height: 100dvh;   /* iOS reports 100vh taller than the visible area */
  }
}

.splash {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0 5rem;
  position: relative;
  z-index: 1;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.splash-logo {
  width: min(620px, 78vw);
  height: auto;
  display: block;
}

.splash-tagline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.splash-enter {
  min-width: 220px;
  padding: 1rem 2.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
}

/* The splash keeps the floating contact dock — it is the only call to
   action besides Enter. Back-to-top and the bottom dock stay hidden: the
   page does not scroll, so both would only cover content. */
.splash-body .back-to-top-btn,
.splash-body .mobile-bottom-dock {
  display: none;
}

/* The dock is normally hidden under 768px because the mobile bottom dock
   takes over — but the splash has no bottom dock, so it must stay. */
.splash-body .contact-dock {
  display: flex !important;
}

/* Fallback offset only. The real value is set inline by clearFooter() in
   app.js, which measures the footer so the dock never sits on the text. */
.splash-body .contact-dock {
  bottom: 2rem;
}

@media (max-width: 768px) {
  .splash {
    padding: 3rem 0 4rem;
  }
  .splash-inner {
    gap: 1.75rem;
  }
  .splash-logo {
    width: min(460px, 84vw);
  }
  .splash-tagline {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
  .splash-enter {
    min-width: 200px;
  }
  /* the bottom dock is hidden here, so the body offset is not needed */
  body.splash-body {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Minimal footer — used on the splash entry page only.
   No columns, no link lists: identity, direct contact, copyright.
   ========================================================================== */
.footer-minimal {
  padding: 2rem 0 2.25rem;
  border-top: 1px solid var(--border-medium);
  background: var(--bg-secondary);
}

.footer-minimal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.footer-minimal-brand {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
}

.footer-minimal-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  margin: 0;
}

.footer-minimal-contact a {
  color: var(--text-primary);
  font-weight: 600;
  /* long address must wrap rather than widen the page on a phone */
  overflow-wrap: anywhere;
}

.footer-minimal-contact a:hover {
  color: var(--brand-accent);
}

.footer-minimal-contact span {
  color: var(--text-muted);
}

.footer-minimal-legal {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 560px) {
  .footer-minimal {
    padding: 1.75rem 0 2rem;
  }
  .footer-minimal-contact {
    font-size: 0.8rem;
    gap: 0.35rem;
  }
  /* the bullet reads as clutter once the two links stack */
  .footer-minimal-contact span {
    display: none;
  }
}

/* ==========================================================================
   Minimal header — splash entry page only. A contact strip, no navigation.
   Mirrors the minimal footer so the page is bracketed symmetrically.
   ========================================================================== */
.header-minimal {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  position: relative;
  z-index: 2;
}

.header-minimal-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.header-minimal-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

a.header-minimal-item:hover {
  color: var(--brand-accent);
}

.header-minimal-place {
  color: var(--text-secondary);
  font-weight: 500;
}

.header-minimal-sep {
  color: var(--text-muted);
}

@supports (padding: env(safe-area-inset-top)) {
  .header-minimal {
    padding-top: calc(1rem + env(safe-area-inset-top));
  }
}

@media (max-width: 640px) {
  .header-minimal {
    padding: 0.75rem 0;
  }
  .header-minimal-inner {
    font-size: 0.74rem;
    gap: 0.5rem 0.9rem;
  }
  /* separators read as clutter once the items wrap onto their own lines */
  .header-minimal-sep {
    display: none;
  }
  /* location is the least useful of the three on a small screen */
  .header-minimal-place {
    display: none;
  }
}

/* Credit line under the minimal footer */
.footer-minimal-credit {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
}

.footer-minimal-credit a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.footer-minimal-credit a:hover {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

/* Accessible heading that carries the page title for search engines and
   screen readers without appearing in the layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}