/*
  Apex Pro Cabinets — styles.css reorganized by section layers
  NOTE: Rule ordering now uses CSS Cascade Layers to keep predictable overrides.
  Edit sizing tokens in the indicated 'SOURCE OF TRUTH' blocks.
*/
@layer Base, S1_Header, S2_Hero, S3_HeroSupport, S4_Services, S5_Process, S6_About, S7_GalleryPreview, S8_Contact, S9_Footer, SeparatePage_S7_GalleryFull, SeparatePage_S9_PrivacyPolicy, FSC, Utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap') layer(Base);


/* ============================================================
   S0_Base — Global tokens, resets, typography, shared utilities
   ============================================================ */
@layer Base {
/* v31 Typography — Inter for body/UI */
body, p, li, input, textarea, select, button{
  font-family: var(--font-body);
}

/* ============================================
   APEX PRO CABINETS - ENHANCED STYLES
   Premium Cabinet Website (2025-2026)

   Brand: Cinzel (primary) + Lora (body)
   Color: #1D2D44

   ENHANCEMENTS:
   - Modular brand blocks (header/center/footer)
   - Complete light/dark mode system
   - Cabinet door background with easy color change
   - Section tint layers
   - Enhanced responsive design
   - Gold accent system (optional)
   - Perfect scroll behavior
   ============================================ */

/* ============================================
   CSS VARIABLES - LIGHT MODE (Default)
   ============================================ */
   :root {
    /* === BRAND COLORS === */
    --color-brand-primary: #1D2D44;
    --color-brand-primary-light: #2A3F5F;
    --color-brand-primary-dark: #151F30;

    /* === BACKGROUND COLORS === */
    --color-bg-primary: #F7F7F8;
    --color-bg-secondary: #FFFFFF;
    --color-bg-tertiary: #F1F3F5;

    /* === TEXT COLORS === */
    --color-text-primary: #0E1116;
    --color-text-secondary: #3D4654;
    --color-text-tertiary: #6C757D;
    --color-text-muted: #8A8D91;

    /* === SURFACE COLORS (cards, panels) === */
    --color-surface: rgba(255, 255, 255, 0.78);
    --color-surface-hover: rgba(255, 255, 255, 0.9);
    --color-surface-elevated: rgba(255, 255, 255, 0.95);

    /* === BORDER COLORS === */
    --color-border: rgba(29, 45, 68, 0.18);
    --color-border-light: rgba(29, 45, 68, 0.10);
    --color-border-dark: rgba(29, 45, 68, 0.28);

    /* === INTERACTIVE STATES === */
    --color-link: #1D2D44;
    --color-link-hover: #2A3F5F;
    --color-focus: rgba(29, 45, 68, 0.45);

    /* === BUTTON COLORS === */
    --color-button-primary-bg: #1D2D44;
    --color-button-primary-text: #FFFFFF;
    --color-button-primary-hover-bg: #2A3F5F;
  /* Canonical CTA tokens (do not override in header) */
  --cta-primary-bg: var(--color-button-primary-bg);
  --cta-primary-text: var(--color-button-primary-text);
  --cta-primary-hover-bg: var(--color-button-primary-hover-bg);

    /* === STANDARD CTA BUTTON SYSTEM (non-header, non-form-submit) === */
    --btn-std-border: var(--color-border-dark);

    /* === FORM ELEMENTS === */
    --color-input-bg: rgba(255, 255, 255, 0.9);
    --color-input-border: rgba(29, 45, 68, 0.18);
    --color-input-focus-border: #1D2D44;
    --color-input-text: #0E1116;
    --color-input-placeholder: #6C757D;

    /* === STATUS COLORS === */
    --color-success: #10B981;
    --color-success-bg: #D1FAE5;
    --color-error: #EF4444;
    --color-error-bg: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;

    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px 0 rgba(29, 45, 68, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(29, 45, 68, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(29, 45, 68, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(29, 45, 68, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(29, 45, 68, 0.1);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* === OVERLAYS === */
    --overlay-light: rgba(255, 255, 255, 0.95);
    --overlay-medium: rgba(255, 255, 255, 0.8);
    --overlay-dark: rgba(29, 45, 68, 0.9);

    /* === HERO SPECIFIC === */
    --hero-overlay: rgba(12, 18, 28, 0.50);
    --hero-overlay-2: rgba(12, 18, 28, 0.28);
    /* Solid midpoint overlay to eliminate gradient/radial "spot" artifacts */
    --hero-overlay-mid: rgba(241, 243, 245, 0.4);
    --hero-card-bg: rgba(255, 255, 255, 0.92);
    --hero-card-text: #0E1116;
    --hero-card-kicker: #1D2D44;
    --hero-cta-text: #1D2D44;
    --hero-cta-pill-bg: rgba(255, 255, 255, 0.88);
    --hero-cta-pill-border: rgba(29, 45, 68, 0.25);
    --hero-cta-btn-bg: rgba(29, 45, 68, 0.06);
    --hero-cta-btn-border: rgba(29, 45, 68, 0.45);

    /* === CABINET DOOR BACKGROUND SYSTEM === */
    --cabinet-door-bg: url("assets/light_background.png");
    --cabinet-door-bg-pos-x: 51.2%;
    --cabinet-door-bg-pos-y: 50%;
    --cabinet-door-bg-position: var(--cabinet-door-bg-pos-x) var(--cabinet-door-bg-pos-y);
    --cabinet-door-bg-size: cover;

    /* === SECTION TINT LAYERS (Light Mode) === */
    --tint-hero: rgba(255, 255, 255, 0.05);
    --tint-trust: rgba(29, 45, 68, 0.14);
    --tint-services: rgba(12, 18, 28, 0.39);
    --tint-process: rgba(12, 18, 28, 0.30);
    --tint-gallery: rgba(222, 226, 230, 0.4);
    --tint-about: rgba(29, 45, 68, 0.18);
    --tint-contact: rgba(255, 255, 255, 0.14);

    /* === BRAND BLOCK COLORS === */
    --brandblock-text: #1D2D44;
    --brand-logo-filter: none;

    /* === LAYOUT === */
    --max-width: 1160px;
    --radius: 22px;
    --radius-sm: 14px;

    /* === GOLD ACCENT (Optional - Team Decision) === */
    --gold-accent: #D4AF37;
    --gold-accent-hover: #B8941F;
  }

  /* ============================================
     CSS VARIABLES - DARK MODE
     ============================================ */
  [data-theme="dark"] {
    /* === BRAND COLORS (Adjusted for visibility) === */
    --color-brand-primary: #5A7BAF;
    --color-brand-primary-light: #6B8ABF;
    --color-brand-primary-dark: #4A6A9F;

    /* === BACKGROUND COLORS === */
    --color-bg-primary: #090B10;
    --color-bg-secondary: #10121A;
    --color-bg-tertiary: #1A1F26;

    /* === TEXT COLORS === */
    --color-text-primary: #EEF1F6;
    --color-text-secondary: #C0C7D6;
    --color-text-tertiary: #9CA0A5;
    --color-text-muted: #73777D;

    /* === SURFACE COLORS === */
    --color-surface: rgba(16, 18, 26, 0.62);
    --color-surface-hover: rgba(16, 18, 26, 0.82);
    --color-surface-elevated: rgba(26, 31, 38, 0.9);

    /* === BORDER COLORS === */
    --color-border: rgba(255, 255, 255, 0.14);
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-dark: rgba(255, 255, 255, 0.22);

    /* === INTERACTIVE STATES === */
    --color-link: #D6DFF3;
    --color-link-hover: #8BA3CC;
    --color-focus: rgba(214, 223, 243, 0.30);

    /* === BUTTON COLORS === */
    --color-button-primary-bg: #5A7BAF;
    --color-button-primary-text: #FFFFFF;
    --color-button-primary-hover-bg: #6B8ABF;

    /* === STANDARD CTA BUTTON SYSTEM (non-header, non-form-submit) === */
    --btn-std-border: var(--color-border-dark);

    /* === STANDARD CTA BUTTON SYSTEM (non-header, non-form-submit) === */
    --btn-std-border: var(--color-border-dark);

    /* === FORM ELEMENTS === */
    --color-input-bg: rgba(26, 31, 38, 0.8);
    --color-input-border: rgba(255, 255, 255, 0.14);
    --color-input-focus-border: #6B8ABF;
    --color-input-text: #EEF1F6;
    --color-input-placeholder: #73777D;

    /* === STATUS COLORS === */
    --color-success: #10B981;
    --color-success-bg: #064E3B;
    --color-error: #EF4444;
    --color-error-bg: #7F1D1D;
    --color-warning: #F59E0B;
    --color-warning-bg: #78350F;

    /* === SHADOWS (Darker, stronger) === */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.50);

    /* === OVERLAYS === */
    --overlay-light: rgba(26, 31, 38, 0.95);
    --overlay-medium: rgba(15, 20, 25, 0.85);
    --overlay-dark: rgba(10, 15, 20, 0.95);

    /* === HERO SPECIFIC === */
    --hero-overlay: rgba(0, 0, 0, 0.62);
    --hero-overlay-2: rgba(0, 0, 0, 0.34);
    /* Solid midpoint overlay to eliminate gradient/radial "spot" artifacts */
    --hero-overlay-mid: rgba(90, 123, 175, 0.08);
    --hero-card-bg: rgba(16, 18, 26, 0.85);
    --hero-card-text: #EEF1F6;
    --hero-card-kicker: #D6DFF3;
    --hero-cta-text: #EEF1F6;
    --hero-cta-pill-bg: rgba(0, 0, 0, 0.26);
    --hero-cta-pill-border: rgba(255, 255, 255, 0.16);
    --hero-cta-btn-bg: rgba(0, 0, 0, 0.18);
    --hero-cta-btn-border: rgba(255, 255, 255, 0.22);

    /* === CABINET DOOR BACKGROUND SYSTEM === */
    --cabinet-door-bg: url("assets/dark_background.png");

    /* === SECTION TINT LAYERS (Dark Mode) === */
    --tint-hero: rgba(0, 0, 0, 0.15);
    --tint-trust: rgba(0, 0, 0, 0.26);
    --tint-services: rgba(0, 0, 0, 0.48);
    --tint-process: rgba(0, 0, 0, 0.32);
    --tint-gallery: rgba(90, 123, 175, 0.08);
    --tint-about: rgba(0, 0, 0, 0.24);
    --tint-contact: rgba(0, 0, 0, 0.20);

    /* === BRAND BLOCK COLORS === */
    --brandblock-text: #EEF1F6;
    --brand-logo-filter: brightness(0) invert(1);
  }

  html {
scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    font-family: "Cinzel", serif;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    line-height: 1.35;
    text-rendering: optimizeLegibility;
    position: relative;
    overflow-y: auto;
    min-height: 100vh;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      /* Uniform overlay (no gradient) */
      linear-gradient(var(--hero-overlay-mid), var(--hero-overlay-mid)),
      var(--cabinet-door-bg) var(--cabinet-door-bg-position) / var(--cabinet-door-bg-size) no-repeat;
    background-attachment: scroll;
  }

  @media (max-width: 768px) {
    body::before {
      background-attachment: scroll;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
    }
  }

  @media print {
    .header, .footer, .hero, .modal {
      display: none;
    }

    body {
      background: white;
      color: black;
    }

    body::before {
      display: none;
    }
  }

/* Background Geometry Calibration */
body{
  background-position: 0% 0%;
}

  /* ============================================
     BASE STYLES
     ============================================ */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Cinzel", serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  p {
    margin: 0 0 1rem 0;
  }

  a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  button, input, textarea, select {
    font-family: inherit;
  }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 10px;
  }

  .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
  }

  .section {
    padding: 84px 0;
    position: relative;
    isolation: isolate; /* ensure overlays stack above global background/stile strips */
  }

  .section.tight {
    padding: 58px 0;
  }

  .section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0; /* above stile strips (-1), below content */
    pointer-events: none;
    transition: background-color 0.3s ease;
  }

  .section-title {
    text-align: center;
    font-size: clamp(26px, 3.1vw, 40px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    color: var(--color-text-primary);
  }

  .section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: "Lora", Georgia, serif;
    font-size: clamp(16px, 1.6vw, 20px);
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 72ch;
    margin: 0 auto;
  }

  .brand-block {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--brandblock-text);
  }

  .brand-block__container {
    display: grid;
    grid-template-areas:
      "logo wordmark"
      "logo tagline";
    grid-template-columns: auto 1fr;
    gap: 0;
    align-items: center;
  }

  .brand-block__container--stacked {
    grid-template-areas:
      "logo"
      "wordmark"
      "tagline";
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0;
    margin-top: -12px; /* HERO brand block vertical shift ONLY */
  }

  .brand-block__logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.80);
    transform-origin: center;
  }

  .brand-block__logo img {
    display: block;
    object-fit: contain;
    filter: var(--brand-logo-filter);
  }

  .brand-block__wordmark {
    grid-area: wordmark;
    display: flex;
    align-items: center;
  }

  .brand-wordmark-text {
    font-family: "Cinzel", serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brandblock-text);
    display: block;
    line-height: 1.05;
  }

  .brand-block__tagline {
    grid-area: tagline;
    display: flex;
    align-items: center;
  }

  .brand-tagline-text {
    font-family: "Lora", Georgia, serif;
    font-size: 0.805rem;
    color: var(--brandblock-text);
    display: block;
    line-height: 1.35;
  }

.brand-wordmark-text--large {
    font-size: clamp(25px, 3.05vw, 41px);
    letter-spacing: 0.10em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  }

  .brandname-line {
    display: block;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    color: var(--color-text-primary);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
  }

  /* Equalize widths inside a group (JS sets --btn-eq-width) */
  @media (min-width: 640px) {
    .btn-group[data-equalize-buttons] .btn.btn--std {
      min-width: var(--btn-eq-width, auto);
    }
  }

  .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn.primary {
    background: var(--hero-cta-btn-bg);
    color: var(--cta-primary-text);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .btn.primary:hover {
    background: var(--hero-cta-btn-bg);
    text-decoration: none;
  }

  .btn.outline {
    background: var(--hero-cta-btn-bg);
    color: var(--hero-cta-text);
    border-color: var(--hero-cta-btn-border);
    box-shadow: none;
  }

  .btn.outline:hover {
    background: rgba(29, 45, 68, 0.10);
    text-decoration: none;
  }

  [data-theme="dark"] .btn.outline:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .icon-btn {
    width: 44px;
    height: 44px;
    padding: 0;
  }

.theme-toggle.theme-pill .theme-pill__label,
  .theme-toggle.theme-pill .theme-pill__sub{
    display: block;
    line-height: 1.05;
  }

  .theme-toggle.theme-pill .theme-pill__sub{
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.14em;
    font-size: 9px;
  }

  .theme-toggle.theme-pill:hover{
    filter: brightness(0.97);
    transform: translateY(-1px);
  }

  .theme-toggle.theme-pill:active{
    transform: translateY(0);
    filter: brightness(0.94);
  }

  .theme-toggle.theme-pill:focus-visible{
    outline: 2px solid rgba(214, 223, 243, 0.35);
    outline-offset: 3px;
  }

  .theme-pill__label{
    display: inline-block;
    pointer-events: none;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .theme-toggle.theme-pill {
      transition: none;
    }
  }

  .media {
    position: relative;
    min-height: 260px;
    background: #0E1116;
  }

  .media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
  }

  .media-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-tag {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-family: "Lora", Georgia, serif;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
  }

  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 18px 18px;
  }

  .card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }

  .card p {
    margin: 0;
    font-family: "Lora", Georgia, serif;
    color: var(--color-text-secondary);
    font-size: 15.83px;
    line-height: 1.75;
  }

  @media (max-width: 980px) {
    .cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

  .gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
  }

  .gallery figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .gallery img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.3s ease;
  }

  .gallery figure:hover img {
    transform: scale(1.05);
  }

  .gallery figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    color: white;
    font-family: "Lora", Georgia, serif;
    font-size: 12.5px;
    letter-spacing: 0.06em;
  }

  @media (max-width: 980px) {
    .gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

    .gallery img {
      height: 220px;
    }
  }

  .panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 18px;
  }

  .field {
    display: grid;
    gap: 6px;
  }

  label {
    font-size: 13.33px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }

  input, textarea, select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--color-input-border);
    background: var(--color-input-bg);
    padding: 12px 12px;
    font-family: "Lora", Georgia, serif;
    font-size: 15px;
    color: var(--color-input-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
    box-shadow: 0 0 0 3px var(--color-focus);
  }

  input::placeholder, textarea::placeholder {
    color: var(--color-input-placeholder);
  }

  textarea {
    min-height: 128px;
    resize: vertical;
  }

  input[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--color-error);
  }

  .help {
    font-family: "Lora", Georgia, serif;
    font-size: 13.5px;
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

.mini-list {
    font-family: "Lora", Georgia, serif;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    padding-left: 18px;
  }

  .theme-transitioning,
  .theme-transitioning *,
  .theme-transitioning *::before,
  .theme-transitioning *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                fill 0.3s ease,
                stroke 0.3s ease;
  }

.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after{transition:none;}

/* Gallery UX */
.gallery-group{
  margin-top: 48px;
}

.gallery-intro{
  max-width: 640px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.gallery-caption{
  font-size: 13px;
  opacity: 0.85;
  margin-top: 6px;
}

/* Ensure section content sits above section overlay */
.section > .container{ position: relative; z-index: 1; }

/* Gallery CTA row: Request a Quote (left) + Back (right) */
.gallery-cta-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;}

.info-card{
  /* Match other homepage cards (translucent, not opaque/black) */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.info-card h3{
  margin: 0 0 10px;
  font-family: var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-text);
  opacity: .95;
}

.info-card p{
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Panel action row (mirrored CTAs inside content panels) */
.panel-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.panel-actions .ap-btn {
  min-width: 220px;
  justify-content: center;
}

.panel-actions .btn { flex: 1 1 160px; }

@media (max-width: 520px) {
  .panel-actions { justify-content: center; }
  .panel-actions .btn { flex: 0 1 auto; }
}

.gallery-caption--cta{
  font-size: clamp(16px, 1.6vw, 20px);
}

.help--cta{
  font-size: clamp(17px, 1.7vw, 21px);
}

}

/* ============================================================
   S1_Header — Header + navigation + header brand block
   ============================================================ */
@layer S1_Header {
/* Anchor offset for fixed header */
.section[id]{scroll-margin-top:96px;}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(160%) blur(12px);
    /* Light mode: match dark header (solid) while preserving toggle appearance/behavior */
    background: rgb(16 18 26);
    border-bottom: 1px solid rgba(214, 223, 243, 0.14);
    /* Locally scope dark-theme text tokens so header reads correctly in light mode */
    --brandblock-text: #EEF1F6;
    --brand-logo-filter: brightness(0) invert(1);
    --color-text-primary: #EEF1F6;
    --color-text-secondary: #C0C7D6;
    /* Force header link/nav tokens to match dark-mode header in BOTH themes */
    --color-link: #D6DFF3;
    --color-link-hover: #8BA3CC;
    --color-focus: rgba(214, 223, 243, 0.30);
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  [data-theme="dark"] .header {
    /* Uniform overlay (no gradient) */
    background: rgb(16 18 26);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 14px;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .nav a {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 10px;
    border-radius: 12px;
    color: var(--color-link);
    transition: background 0.2s ease;
  }

  .nav a:hover {
    /* Match dark-mode hover treatment in both themes */
    background: rgba(214, 223, 243, 0.08);
    text-decoration: none;
  }

  /* Header: prevent theme toggle content from expanding the 44x44 control */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Header utility buttons (S1-08, S1-09) use canonical CTA surface colors */
  .header-actions .theme-toggle.theme-pill:hover {
    background: var(--hero-cta-btn-bg);
  }

  .header-actions .mobile-toggle.icon-btn:hover {
    background: var(--hero-cta-btn-bg);
  }

  /* =========================================================
     STANDARD CTA BUTTON SYSTEM
     Applies ONLY to elements with .btn--std
     Excludes header CTA + contact submit via not adding .btn--std
     ========================================================= */
  /* Button groups: centered, consistent spacing */
  .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .theme-toggle.theme-pill{
    /* Header theme toggle (S1-08) promoted to primary header control */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    /* Match standard button geometry */
    padding: 0;
    border-radius: 14px;
    width: 44px;
    height: 44px;
    max-width: 44px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--hero-cta-btn-border);
    background: var(--hero-cta-btn-bg);
    box-shadow: var(--shadow-soft);

    /* Stable, square-ish presence */
    min-width: 44px;

    /* Typography */
    font-family: "Cinzel", Georgia, serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--cta-primary-text);

    transition: filter 160ms ease, transform 160ms ease;
  }

  .mobile-toggle svg { stroke-width: 1.8; }

  .mobile-toggle {
    display: none;
    background: var(--hero-cta-btn-bg);
    border-color: var(--hero-cta-btn-border);
    color: var(--hero-cta-text);
    font-family: "Cinzel", Georgia, serif;
    font-weight: 600;
    line-height: 1;
  }

  .mobile-drawer {
    display: block;
    border-top: 1px solid var(--color-border);
    padding: 10px 0 14px;
  }

  .mobile-drawer a {
    display: block;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-drawer a:hover {
    background: rgba(29, 45, 68, 0.08);
    text-decoration: none;
  }

  [data-theme="dark"] .mobile-drawer a:hover {
    background: rgba(214, 223, 243, 0.08);
  }

  /* Performance: avoid backdrop-filter blur on small screens (reduces scroll jank) */
  @media (max-width: 768px) {
    .header {
      backdrop-filter: none;
      background: rgb(16 18 26);
    }
  }

.header{backdrop-filter:none;}

.brand-block--header .brand-block__container{
  column-gap: 7px;     /* logo ↔ text cohesion */
  row-gap: 0px;        /* wordmark ↔ descriptor closer */
}

/* Header nav breakpoint (authoritative)
   - Desktop: show nav, hide hamburger
   - Mobile: hide nav, show hamburger */
@media (min-width: 761px){
  .nav{ display: flex; }
  .mobile-toggle{ display: none; }
  .mobile-drawer{ display: none; }
}

@media (max-width: 760px){
  .nav{ display: none; }
  .mobile-toggle{ display: inline-flex; }
  /* Mobile header breathing room */
   .header .container{
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
}

/* === Header Brand Block: match theme toggle button height (S1-08) === */
/* Goal: brand block vertical bounds match the LIGHT/DARK MODE pill button. */
.brand-block--header{
  height: 3.05rem;            /* same as .ap-btn[data-theme-toggle].ap-btn--stack */
  display: inline-flex;
  align-items: center;
}

.brand-block--header .brand-block__container{
  height: 100%;
  display: grid;
  grid-template-columns: auto max-content;
  row-gap: 0px;
  align-items: center;
}

.brand-block--header .brand-block__wordmark {
  align-self: center;
}

.brand-block--header .brand-block__tagline {
  align-self: center;
}

.brand-block--header .brand-block__wordmark,
.brand-block--header .brand-block__tagline{
  display: block;
  width: 100%;
  white-space: nowrap;
}

.brand-block--header .brand-block__logo{
  margin-right: 0.5px;          /* slightly tighter to fit compact header */
}

.brand-block--header .brand-block__logo{
  align-self: stretch;
}

/* SOURCE OF TRUTH: Header logo size (desktop)
 * Do not size the header logo anywhere else.
 */
.brand-block--header .brand-block__logo img{
  height: 50px;
  width: auto;
  max-width: none;
}

.brand-block--header .brand-wordmark-text{
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 0.5;
  letter-spacing: 1.5px;
  word-spacing: 1.5px;
  white-space: nowrap;
  width: 100%;
  display: block;
  transform: translateY(5px);  /* move wordmark up */
}

.brand-block--header .brand-tagline-text{
  font-family: "Lora", Georgia, serif;
  font-size: 11px;
  line-height: 0.5;
  font-style: italic;
  letter-spacing: 0.010em;
  word-spacing: 0.045em;
  white-space: nowrap;
  width: 100%;
  display: block;
  transform: translateY(-3px); /* move helper up */
}

/* SOURCE OF TRUTH: Hero brand block vertical position
 * Use margin-top here to move the entire hero brand block up/down.
 */
/* Center hero brand block between header and hero text box */
.hero .brand-block--center{
  margin-top: auto;
  margin-bottom: auto;
}

}

/* ============================================================
   S2_Hero — Hero section
   ============================================================ */
@layer S2_Hero {
/* SOURCE OF TRUTH: Hero logo size
 * Change only --hero-logo-scale to resize the hero logo.
 */
.brand-block--center .brand-block__logo{
    --hero-logo-scale: 0.732;
    height: var(--hero-logo-box-h, clamp(216px, 24vw, 352px));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: var(--hero-logo-gap, clamp(14px, 1.6vw, 20px));
  }

  .brand-block--center .brand-block__logo img {
    height: 100%;
    width: auto;
    max-height: 100%;
    transform: scale(var(--hero-logo-scale, 0.95));
    transform-origin: center;
    margin: 0;
  }

  /* Hero brand helper tagline (Cinzel, subordinate) */
  .hero-brand-tagline{
    font-family: var(--display-font);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    color: var(--brandblock-text);
    display: block;
    line-height: 1.15;
    margin-top: clamp(8px, 0.9vw, 12px);
    text-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  }

.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 28px 0 64px 0;
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Uniform overlay (no gradient) */
    background: var(--hero-overlay-mid);
    pointer-events: none;
    z-index: 0;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: -2px;
    /* Remove radial highlights that create moving "spots" */
    background: none;
    pointer-events: none;
    z-index: 0;
  }

  .hero .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 55px;
  }

  .hero-card {
    max-width: 920px;
    background: var(--hero-card-bg);
    border: 1px solid rgba(29, 45, 68, 0.20);
    border-radius: var(--radius);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.40);
    padding: 32px 40px 22px;
    --hero-gap-y: 10px;
    --hero-gap-x: calc(var(--hero-gap-y) * 1.75);
    backdrop-filter: saturate(140%) blur(14px);
    color: var(--hero-card-text);
    margin-bottom: 26px;
  }

  [data-theme="dark"] .hero-card {
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .hero-title {
  margin: 0.9rem 0 var(--hero-gap-y);
  font-family: var(--display-font);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Reduced so it reads as a slogan (not the primary brand line). */
  font-size: clamp(1.10rem, 0.98rem + 0.80vw, 1.48rem);
}

  .hero-card .hero-title {
  font-size: clamp(18px, 2.0vw, 26px);
  letter-spacing: 0.08em;
  margin: -6px 0 10px;
  line-height: 1.22;
}

  .hero-title-center {
    text-align: center;
  }

  .hero-kicker {
  margin: 0.35rem 0 0.95rem;
  font-family: var(--display-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(0.86rem, 1.75vw, 1.01rem);
}

  .hero-kicker-center {
    text-align: center;
    margin: 0 auto 16px;
  }

  .hero-copy {
    font-family: "Lora", Georgia, serif;
    font-size: clamp(17px, 1.7vw, 19px);
    line-height: 1.75;
    margin: 0 0 18px;color: var(--hero-card-text);
  }

  .hero-copy:last-of-type {
    margin-bottom: 0;
  }

  .hero-cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
  }

  .hero-actions-outside {
    width: min(920px, 100%);
  }

  .hero-actions-outside .btn {
    min-width: 190px;
    box-shadow: none;
  }

  .hero-actions .btn.primary {
    border-color: rgba(255, 255, 255, 0.25);
  }

  @media (max-width: 680px) {
    .hero {
      min-height: 74vh;
      padding-bottom: 54px;
    }

    .hero-card {
      padding: 24px 28px;
    }

    .hero-copy {
      text-align: left;
    }

    .hero-actions-outside .btn {
      min-width: 100%;
    }
  }

  .cta {
    /* Uniform overlay (no radial/gradient "spots") */
    background: rgba(29, 45, 68, 0.05);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  [data-theme="dark"] .cta {
    /* Uniform overlay (no radial/gradient "spots") */
    background: rgba(214, 223, 243, 0.04);
  }

 .cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 14px;
  justify-items: center;
  align-items: start;
}

  .cta-inner .cta-lead{
    grid-column: 2;
    margin: 18px auto 0;
    max-width: 70ch;
    text-align: left;
  }

  .cta-inner .btn {
    grid-column: 3;
    justify-self: end;
    margin-top: 0;
  }

  @media (max-height: 430px) and (orientation: landscape) {
    .hero {
      min-height: 520px;
    }

    .hero-card {
      max-width: 900px;
    }

    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

/* Hero Brand Block Rhythm (center only) */

/* Center brand block rhythm & alignment */
.brand-block--center .brand-block__container{
  row-gap: 0.25rem;
  justify-items: center;
  text-align: center;
}

/* Wordmark rhythm */
.brand-block--center .brand-wordmark-text{
  line-height: 1.04;
}

/* Descriptor refinement */
.brand-block--center .brand-tagline-text{
  font-size: 0.78rem;
  line-height: 1.25;
  margin-top: 0.15rem;
}

/* Mobile safety */
@media (max-width: 680px){
  .brand-block--center .brand-block__logo{
    height: var(--hero-logo-box-h-mobile, clamp(170px, 42vw, 230px));
    margin-bottom: var(--hero-logo-gap-mobile, clamp(12px, 2.2vw, 18px));
  }
}

/* Hero bullets + microcopy (UX content sprint) */
.hero-bullets {
  margin: 1.0rem 0 0.25rem;
  padding-left: 1.2rem;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(17px, 1.7vw, 19px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.hero-bullets li{
  margin: 8px 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.hero-bullets li{
  margin: 8px 0;
}

/* CTA hierarchy (Lead Conversion Optimization) */
.hero-actions.hero-actions-outside{
  flex-wrap: wrap;
}

.hero-actions.hero-actions-outside .btn{
  min-width: 160px;
}

@media (max-width: 520px){
  .hero-actions.hero-actions-outside{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions.hero-actions-outside .btn{
    width: 100%;
  }
}

/* Hero copy alignment */
.hero-bullets{
  text-align: center;
  list-style-position: inside;
  padding-left: 0;
}

.hero-phone{
  margin-top: 14px;
  text-align: center;
}

.hero-phone__link{
    font-size: clamp(19px, 2.2vw, 23px);
color: var(--hero-cta-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: none;
}

[data-theme="dark"] .hero-phone__link{
  color: var(--hero-cta-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: none;
}

.hero-phone__link:hover{
  text-decoration: none;
}

[data-theme="dark"] .hero-phone__link:hover{
  text-decoration: none;
}

.hero-kicker--closing {
  margin-top: 1.25rem;
  text-align: center;
  margin-bottom: -0.55rem;
}

/* Hero bullets font */
.hero-bullets,
.hero-bullets li{
  font-family: \"Lora\", Georgia, serif;
}

}

/* ============================================================
   S3_HeroSupport — Hero support / value highlights
   ============================================================ */
@layer S3_HeroSupport {
  .trust {
    padding: 16px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    /* Uniform overlay (no gradient) */
    background: rgba(29, 45, 68, 0.035);
    position: relative;
  }

  .trust::before {
    background-color: var(--tint-trust);
  }

  [data-theme="dark"] .trust {
    /* Uniform overlay (no gradient) */
    background: rgba(214, 223, 243, 0.04);
  }

  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .trust-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 14px;
    box-shadow: var(--shadow-soft);
  }

  .trust-item .typo-card-title{ display:block; margin-bottom: 6px; }

  .trust-item .typo-body-secondary{ display:block; }

  @media (max-width: 980px) {
    .trust-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

}

/* ============================================================
   S4_Services — Services / primary offerings
   ============================================================ */
@layer S4_Services {
  #services::before {
    background-color: var(--tint-services);
  }

  .services {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 26px;
  }

  .service {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .service-content {
    padding: 22px 22px 18px;
  }

  .service-title {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.1vw, 28px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }

  .service-copy {
    font-family: "Lora", Georgia, serif;
    color: var(--color-text-secondary);
    font-size: 16.83px;
    line-height: 1.75;
    margin: 0 0 14px;
  }

  .service-points {
    font-family: "Lora", Georgia, serif;
    color: var(--color-text-primary);
    font-size: 15.13px;
    line-height: 1.7;
    margin: 0;
    padding-left: 18px;
  }

  .service-points li {
    margin: 6px 0;
  }

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

    .media {
      min-height: 220px;
    }
  }

/* Footer overlay matches Services tint */
.footer{
  position: relative;
  isolation: isolate;
}

.footer::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--tint-services);
  pointer-events: none;
  z-index: 0; /* above stile strips (-1), below footer content */
}

}

/* ============================================================
   S5_Process — What it’s like to work with us
   ============================================================ */
@layer S5_Process {
  #process::before {
    background-color: var(--tint-process);
  }

  .reveal {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

/* === Disable scroll animations / eliminate scroll jank === */
.reveal{opacity:1;transform:none;transition:none;will-change:auto;}

.reveal.visible{opacity:1;transform:none;}

}

/* ============================================================
   S6_About — About Apex Pro Cabinets
   ============================================================ */
@layer S6_About {
  #about::before {
    background-color: var(--tint-about);
  }

  .about-build > p{font-size: clamp(17px, 1.55vw, 20px); line-height: 1.55;}

  .about-build h3{ text-align: left; }

  .about-build__listwrap{
    max-width: 40rem;
    margin: 18px auto 14px;
    text-align: left;
  }

  .about-build__list{
    margin: 0;
    padding-left: 1.2rem;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.55;
  }

  .about-build__list li{ margin: 10px 0; }

  .about-build__list .svc-name{ font-weight: 600; }

/* ABOUT section (homepage) */
.about-build{
  margin-top: 26px;
}

.about-build-title {
  font-family: var(--display-font);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  margin: 0 0 12px;
  text-align: center;
}

/* Bind all "What We Build" copy to the wide card, not the viewport */
.about-build-content{
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.about-build-intro,
.about-build-note {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 14px;
}

.about-build-intro {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 14px;
}

.about-build-note{
  margin-top: 18px;
  margin-bottom: 0;
}

.about-build-list{
  /* Match section subtitle typography */
  font-family: "Lora", Georgia, serif;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
  padding-left: 1.25rem;
  text-align: left;
}

.about-build-list strong{
  font-weight: 700;
  color: var(--color-text-primary);
}

.about-cta-row{
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.about-cta-row .btn-large{
  min-width: 200px;
}

/* === About section cards (restored layout) === */
.cards-grid.about-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

@media (max-width: 980px){
  .cards-grid.about-cards{ grid-template-columns: 1fr; }
}

.wide-card.about-build{
  margin-top: 18px;
  /* Keep consistent translucency with other homepage panels */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 6px);
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 520px){
  .wide-card.about-build{ padding: 18px; }
}

.about-build-note{
  /* Match section subtitle typography */
  margin-top: 10px;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-style: normal;
  opacity: 1;
}

/* Keep About CTAs aligned like the old About page */
.wide-card.about-build .about-cta-row{
  justify-content: flex-start;
}

/* ==============================
   About section consistency tweaks
   (Match "What It's Like to Work With Us")
   ============================== */

#about .card--wide{grid-column:1 / -1;}

#about .about-build-title,
#about .about-build-intro,
#about .about-build-note{ text-align:center; }

#about .about-build-list{
  /* Width is controlled by .about-build-content */
  margin:0;
  max-width:none;
  text-align:left;
}

#about .about-build-list li{
  margin:0.6rem 0;
  line-height:1.7;
}

#about .about-build-note{
  margin-top:18px;
  opacity:1;
}

#about .about-cta-row{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

}

/* ============================================================
   S7_GalleryPreview — Gallery preview
   ============================================================ */
@layer S7_GalleryPreview {
/* Gallery Preview */
.gallery-preview{
  max-width: 1100px;
  margin: 56px auto;
  padding: 0 20px;
  text-align: center;
}

.gallery-preview__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.gallery-preview__grid img{
  width: 100%;
  height: auto;
  display: block;
}

.gallery-preview__cta{
  margin-top: 24px;
}

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

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

}

/* ============================================================
   S8_Contact — Contact section + form
   ============================================================ */
@layer S8_Contact {
  #contact::before {
    background-color: var(--tint-contact);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 16px;
    margin-top: 22px;
  }

  .contact-grid.contact-grid--single {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }

  .form {
    display: grid;
    gap: 12px;
  }

  .form-error {
    font-family: "Lora", Georgia, serif;
    font-size: 13px;
    color: var(--color-error);
    display: block;
    min-height: 18px;
  }

  #contact .form .help{
  margin: 0;
  width: 100%;
  text-align: center;
}

/* Contact CTA lead line (typography comes from typography-body roles; keep layout only) */
.contact-lead{
  margin: 18px 0 0;
}

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

  .modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 22px;
    z-index: 1000;
    backdrop-filter: blur(4px);
  }

  .modal.active {
    display: flex;
  }

  .modal__overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }

  .modal__content {
    position: relative;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    padding: 3rem 2rem;
    max-width: 500px;
    width: 90%;
    z-index: 1001;
    text-align: center;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .modal.active .modal__content {
    transform: scale(1);
    opacity: 1;
  }

  .modal__icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
  }

  .icon-success {
    width: 64px;
    height: 64px;
    color: var(--color-success);
  }

  .modal__title {
    font-family: "Cinzel", serif;
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
  }

  .modal__message {
    font-family: "Lora", Georgia, serif;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .modal__button {
    min-width: 160px;
  }

/* Sent Confirmation Modal (theme-aware) */
.modal--sent .modal__content--sent{
  max-width: 560px;
}

.modal--sent .modal__body--sent{
  padding: 40px 34px;
  text-align: center;
}

.modal--sent .sent__headline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.modal--sent .sent__title{
  margin: 0;
  letter-spacing: 0.22em;
  font-size: 34px;
  line-height: 1.0;
}

.modal--sent .sent__check{
  color: currentColor;
  transform: translateY(2px);
  opacity: 0.95;
}

.modal--sent .sent__sub{
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.modal--sent .sent__sub--1{
  font-size: 13px;
  margin-top: 0px;
}

.modal--sent .sent__sub--2{
  font-size: 12px;
  margin-top: 12px;
  opacity: 0.92;
}

.modal--sent .sent__button{
  margin-top: 44px;
  letter-spacing: 0.22em;
  padding-left: 26px;
  padding-right: 26px;
}

/* Theme surfaces */
[data-theme="dark"] .modal--sent .modal__content--sent{
  background: rgba(16, 18, 26, 0.96);
  color: #EEF1F6;
  border: 1px solid rgba(255,255,255,0.10);
}

[data-theme="light"] .modal--sent .modal__content--sent{
  background: rgba(248, 249, 252, 0.98);
  color: #1d2d44;
  border: 1px solid rgba(29,45,68,0.14);
}

@media (max-width: 680px){
  .modal--sent .modal__body--sent{
    padding: 34px 22px;
  }
  .modal--sent .sent__title{
    font-size: 30px;
  }
}

/* Honeypot field (hidden off-screen for anti-spam; CSP-safe) */
.ap-hp{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}

}

/* ============================================================
   S9_Footer — Footer + footer brand block
   ============================================================ */
@layer S9_Footer {
  .footer {
    padding: 28px 0 42px;
    border-top: 1px solid var(--color-border);
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
    text-align: center;
  }

  .footer small {
    font-family: "Lora", Georgia, serif;
    color: var(--color-text-secondary);
    display: block;
    margin-top: 12px;
  }

  .footer a {
    font-family: "Lora", Georgia, serif;
  }

  .social {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--hero-cta-btn-border);
background: var(--hero-cta-btn-bg);
box-shadow: var(--shadow-soft);
text-decoration: none;
    color: var(--cta-primary-text);
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .social a:hover {
    transform: translateY(-2px);
    background: var(--hero-cta-btn-bg);
  }

/* =========================================================
   FOOTER BRAND BLOCK — SINGLE SOURCE OF TRUTH
   Everything footer brand sizing lives here.
   ========================================================= */

.brand-block--footer .brand-block__container{
    display: grid;
    column-gap: 8px;      /* logo ↔ wordmark */
    row-gap: 2px;         /* wordmark ↔ helper */
    align-items: center;
}

.brand-block--footer .brand-block__link {
    display: block;
}

/* ───────────── LOGO ───────────── */

.brand-block--footer .brand-block__logo img{
    height: 64px;         /* CHANGE HERE */
    width: auto;
    max-width: 92px;      /* optional guard */
}

/* ───────────── WORDMARK ───────────── */

.brand-block--footer .brand-wordmark-text{
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-size: 19px;      /* CHANGE HERE */
    line-height: 1;       /* keep tight */
    letter-spacing: 1.55px;
    word-spacing: 0.5px;    /* CHANGE HERE */
    white-space: nowrap;
    margin: 0;
}

/* ───────────── HELPER (TAGLINE) ───────────── */

.brand-block--footer .brand-tagline-text{
    font-family: "Lora", Georgia, serif;
    font-size: 13.3px;    /* CHANGE HERE */
    line-height: 1;       /* keep tight */
    font-style: italic;
    letter-spacing: 0.85px;
    word-spacing: 0.0px;  /* CHANGE HERE */
    white-space: nowrap;
    margin: 0;
}

.footer .container,
.footer .footer-inner{
  position: relative;
  z-index: 1;
}

.social a svg{ display:block; }

}

/* ============================================================
   Separate Page — Gallery full
   ============================================================ */
@layer SeparatePage_S7_GalleryFull {
}

/* ============================================================
   Separate Page — Privacy policy
   ============================================================ */
@layer SeparatePage_S9_PrivacyPolicy {
}

/* ============================================================
   FSC — Form submission confirmation modal
   ============================================================ */
@layer FSC {
}

/* ============================================================
   Utilities — Utility classes (avoid !important where possible)
   ============================================================ */
@layer Utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: visible;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .u-hidden {
    display: none;
  }

  .u-mt-0 {
    margin-top: 0;
  }

  .u-mt-10 {
    margin-top: 10px;
  }

  .u-mt-12 {
    margin-top: 12px;
  }

  .u-mt-14 {
    margin-top: 14px;
  }

.section.tight .reveal.u-mt-14{
  display: flex;
  justify-content: center;
}

  .u-mt-16 {
    margin-top: 16px;
  }

  .u-mt-18 {
    margin-top: 18px;
  }

  .u-mb-10 {
    margin-bottom: 10px;
  }

  .u-max-70ch {
    max-width: 70ch;
  }

  .u-minw-auto {
    min-width: auto;
  }

  .u-title-22 {
    font-size: 22px;
  }

}