/*
Theme Name: AMG (Hello Biz Child)
Theme URI: https://amgbarbados.com
Description: Child theme for Antillean Marble & Granite (AMG) Inc. — design system, component styles, and per-page rules. Built on the Hello Biz parent theme. Companion to the WordPress install at amgbarbados.com.
Author: Lucky Tyke (Ryan Davis, LLC)
Author URI: https://luckytyke.com
Template: hello-biz
Version: 1.0.30
License: Proprietary — client deliverable
Text Domain: amg-child
*/

/* =============================================================================
   AMG design system — see theme.json for design tokens (colors, fonts, spacing).
   This stylesheet hosts the COMPONENT and PAGE-SCOPED rules; tokens live in
   theme.json so they're available to the block editor + Elementor's globals
   resolver, not just CSS.

   Loading order: enqueued at priority 99 in functions.php so this stylesheet
   loads AFTER Elementor's compiled per-element CSS (default priority 10).
   That gives us cascade wins on body.<context> + 3-class chain selectors
   per the LuckyTyke "elementor-per-element-css-specificity" rule, without
   needing !important everywhere.

   Migrated from Code Snippets Pro at end of AMG Session 21 / start of staging
   retrofit. Source snippets:
     12 — Brittany Signature @font-face + design tokens (501 bytes)
     8  — Brand buttons + scroll animations (4.3 KB)
     13 — Square grid tiles (625 bytes)
     5  — Gravity Forms brand styling (5.5 KB)
     16 — Main cosmetic + functional rules (72.3 KB, rules #1-#34)
   Total: ~83 KB pre-minify.

   DONE 2026-09-21 (go-live): the last absolute dev-host URL (hero bg,
   rule in 16) is now root-relative; every other url() is theme-relative.
   Keep url() values host-agnostic so a rename never breaks them.
   ============================================================================= */


/* ============================================================================
   SECTION 1 — Brittany Signature @font-face + design tokens
   (Origin: Code Snippets Pro snippet 12)
   ============================================================================ */

@font-face {
  font-family: 'Brittany Signature';
  src: url('fonts/BrittanySignature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --amg-font-script: 'Brittany Signature', cursive;
  --amg-font-display: 'Playfair Display', serif;
  --amg-font-body: 'Inter', sans-serif;
  --amg-slate-navy: #334655;
  --amg-steel-blue: #537789;
  --amg-light-blue: #C7D9E5;
  --amg-cream: #F4EFEB;
}


/* ============================================================================
   SECTION 2 — Brand buttons + scroll animations
   (Origin: Code Snippets Pro snippet 8)
   ============================================================================ */

/* ============================================================
   AMG Brand Buttons — Bluehost-baseline (Session 7 polish)
   Reference: Projects/AMG-Inc/docs/bluehost-design-spec-2026-05-01.md
   ============================================================ */

/* PRIMARY — solid steel-blue pill (Browse Catalogue / View Services) */
a.amg-btn-primary,
button.amg-btn-primary,
.amg-btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start !important;  /* don't stretch in flex column parents */
    width: auto !important;
    padding: 16px 35px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    background: #537789 !important;
    border: 1px solid #537789 !important;
    border-radius: 100px !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer;
}
a.amg-btn-primary:hover,
button.amg-btn-primary:hover,
.amg-btn-primary:hover {
    color: #839EAB !important;
    background: rgba(83, 119, 137, 0.26) !important;
    border-color: #537789 !important;
}

/* NAVY — slate-navy pill (Request Quote CTA-strip) */
a.amg-btn-navy,
button.amg-btn-navy,
.amg-btn-navy {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start !important;
    width: auto !important;
    padding: 15px 30px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    background: #334655 !important;
    border: 1px solid #334655 !important;
    border-radius: 50px !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer;
}
a.amg-btn-navy:hover,
button.amg-btn-navy:hover,
.amg-btn-navy:hover {
    background: rgba(51, 70, 85, 0.196) !important;
    border-color: #D7DBDD !important;
    color: #FFFFFF !important;
}

/* GHOST — outline button on dark hero backgrounds.
   CRITICAL: never animate text color to anything that could equal background.
   Bug from pre-Session-7: dev hero CTA had bg→white on hover with text staying
   white, so text disappeared. This rule ensures text stays white in all states. */
a.amg-btn-ghost,
button.amg-btn-ghost,
.amg-btn-ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: flex-start !important;
    width: auto !important;
    padding: 12px 24px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 90px !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer;
}
a.amg-btn-ghost:hover,
button.amg-btn-ghost:hover,
.amg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;  /* never fade to bg */
}

/* ============================================================
   AMG Scroll-Triggered Entrance Animation
   ============================================================ */
.amg-animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.amg-animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .amg-animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* ============================================================================
   SECTION 3 — Square grid tiles (materials + portfolio)
   (Origin: Code Snippets Pro snippet 13)
   ============================================================================ */

/* AMG: Square aspect ratio for material + portfolio grids (Alicia 2026-05-06) */
.s-0bb0e0c .lt-image-grid__media,
.s-b71d24a .lt-post-grid__media {
  aspect-ratio: 1 / 1 !important;
}

/* Tighter portfolio cards — match mockup */
.s-b71d24a .lt-post-grid__excerpt {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #537789;
  margin-top: 4px;
}
.s-b71d24a .lt-post-grid__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
  color: #334655 !important;
}


/* ============================================================================
   SECTION 4 — Gravity Forms brand styling
   (Origin: Code Snippets Pro snippet 5)
   ============================================================================ */

/* AMG brand styling for Gravity Forms — Bluehost-baseline tightened (Session 7).
   Reference: Projects/AMG-Inc/docs/bluehost-design-spec-2026-05-01.md */
.gform_wrapper {
  font-family: 'Inter', sans-serif;
  color: #334655;
}

/* Field row spacing — tightened to Bluehost 21px */
.gform_wrapper .gfield {
  margin-bottom: 21px !important;
}

/* Labels — sit tight to input (3px gap, not 6px) */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #334655 !important;
  letter-spacing: normal !important;
  margin-bottom: 0 !important;
  padding-bottom: 3px !important;
  line-height: 1.5 !important;
}

.gform_wrapper .gfield_required {
  color: #537789;
  font-weight: 500;
  font-size: 12px;
  margin-left: 4px;
}

/* Inputs — Bluehost spec: 1px solid #69727D, radius 3px, padding 8/16, 42px height */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #334655 !important;
  background-color: #FFFFFF !important;
  border: 1px solid #69727D !important;
  border-radius: 3px !important;
  padding: 8px 16px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select {
  height: 42px !important;
}
.gform_wrapper textarea {
  min-height: 120px !important;
  resize: vertical;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: #93A4B0;
  opacity: 1;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: #537789 !important;
  box-shadow: 0 0 0 3px rgba(83, 119, 137, 0.15) !important;
  outline: none !important;
}

/* Radio + checkbox lists */
.gform_wrapper .gchoice {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.gform_wrapper .gchoice input[type="radio"],
.gform_wrapper .gchoice input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  accent-color: #334655;
}
.gform_wrapper .gchoice label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #334655;
  cursor: pointer;
  margin-bottom: 0;
}

/* File upload zone */
.gform_wrapper .gform_drop_area {
  background-color: #FFFFFF;
  border: 2px dashed #C7D9E5;
  border-radius: 6px;
  padding: 24px;
  text-align: center;
  color: #537789;
  font-family: 'Inter', sans-serif;
}
.gform_wrapper .gform_button_select_files,
.gform_wrapper .button.gform_button_select_files {
  background-color: #537789;
  color: #FFFFFF;
  border: 1px solid #537789;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.gform_wrapper .gform_button_select_files:hover {
  background-color: #334655;
}

/* Submit button — match .amg-btn-primary spec exactly */
.gform_wrapper .gform_footer {
  padding-top: 0 !important;
  margin-top: 16px !important;
}
.gform_wrapper input[type="submit"],
.gform_wrapper button.gform_button,
.gform_wrapper .gform_button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  height: 40px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background-color: #537789 !important;
  border: 1px solid #537789 !important;
  border-radius: 90px !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 140px;
  box-shadow: none !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.1s ease !important;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper .gform_button.button:hover {
  color: #839EAB !important;
  background-color: rgba(83, 119, 137, 0.26) !important;
  border-color: #537789 !important;
}
.gform_wrapper input[type="submit"]:active,
.gform_wrapper button.gform_button:active {
  transform: translateY(1px);
}

/* Validation messages */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  color: #B85450;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin-top: 4px;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #B85450 !important;
}

/* Confirmation message */
.gform_confirmation_wrapper .gform_confirmation_message {
  background-color: #FFFFFF;
  border-left: 4px solid #334655;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  color: #334655;
  border-radius: 0 4px 4px 0;
}

/* Field description (helper text) */
.gform_wrapper .gfield_description {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #537789;
  margin-top: 4px;
}



/* ============================================================================
   SECTION 5 — Main cosmetic + functional CSS (rules #1 through #34)
   (Origin: Code Snippets Pro snippet 16)
   ============================================================================ */

/* ============================================================
   AMG QA polish v2 — 2026-05-06 (mockup-faithful, hover-only)
   Covers: Privacy/ToS spacing, footer underline removal,
           portfolio offset+hover, material/service hover,
           button hover, footer nav slide-right, portfolio title
           color shift, smooth scroll. NO scroll fade-in (per mockup).
   2026-05-07 fix: rule #11 was scoped to template 479 (Single Page)
   which leaked to every static page. Re-scoped to body.page-id-2485/2486.
   ============================================================ */

/* --- 1. Privacy Policy + Terms of Service content frame --- */
body.page-id-2485 main, body.page-id-2486 main,
body.page-id-2485 .site-main, body.page-id-2486 .site-main {
  background-color: #FFFFFF;
}

/* --- 2. Footer Privacy/ToS inline links — remove underline --- */
.elementor-location-footer .elementor-element-1042d870 a,
.elementor-location-footer .elementor-element-4f60be09 a {
  text-decoration: none !important;
  color: rgba(244, 239, 235, 0.7) !important;
  transition: color 0.2s ease !important;
}
.elementor-location-footer .elementor-element-1042d870 a:hover,
.elementor-location-footer .elementor-element-4f60be09 a:hover {
  color: #FFFFFF !important;
}

/* --- 3. Featured Projects — offset middle card + mockup hover --- */
.s-b71d24a .lt-post-grid__grid {
  align-items: start;
}
.s-b71d24a .lt-post-grid__item:nth-child(2) {
  margin-top: 64px;
}
.s-b71d24a .lt-post-grid__item {
  transition: transform 0.5s ease;
}
.s-b71d24a .lt-post-grid__item:hover {
  transform: translateY(-8px);
}
.s-b71d24a .lt-post-grid__media {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(51, 70, 85, 0.06);
  transition: box-shadow 0.5s ease;
}
.s-b71d24a .lt-post-grid__item:hover .lt-post-grid__media {
  box-shadow: 0 12px 40px rgba(51, 70, 85, 0.18);
}
.s-b71d24a .lt-post-grid__media img {
  transition: transform 1s ease;
}
.s-b71d24a .lt-post-grid__item:hover .lt-post-grid__media img {
  transform: scale(1.06);
}
/* Portfolio title color shift on card hover (mockup: hover:text-steel-blue) */
.s-b71d24a .lt-post-grid__title {
  transition: color 0.3s ease !important;
}
.s-b71d24a .lt-post-grid__item:hover .lt-post-grid__title {
  color: #537789 !important;
}

/* --- 4. Material tile hover (mockup duration-1000 scale-110, duration-500 lift) --- */
.s-0bb0e0c .lt-image-grid__item .lt-image-grid__media {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(51, 70, 85, 0.06);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.s-0bb0e0c .lt-image-grid__item:hover .lt-image-grid__media {
  box-shadow: 0 12px 40px rgba(51, 70, 85, 0.18);
  transform: translateY(-8px);
}
.s-0bb0e0c .lt-image-grid__item .lt-image-grid__media img {
  transition: transform 1s ease !important;
}
.s-0bb0e0c .lt-image-grid__item:hover .lt-image-grid__media img {
  transform: scale(1.10) !important;
}
/* Material overlay gradient opacity shift (mockup: opacity-90 → opacity-100) */
.s-0bb0e0c .lt-image-grid__overlay {
  opacity: 0.9;
  transition: opacity 0.5s ease !important;
}
.s-0bb0e0c .lt-image-grid__item:hover .lt-image-grid__overlay {
  opacity: 1;
}

/* --- 5. Services card hover (mockup: shadow-xl + translate-y-2 duration-500) --- */
.s-b34c394 .lt-image-grid__item .lt-image-grid__media {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(51, 70, 85, 0.06);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.s-b34c394 .lt-image-grid__item:hover .lt-image-grid__media {
  box-shadow: 0 12px 40px rgba(51, 70, 85, 0.18);
  transform: translateY(-8px);
}
.s-b34c394 .lt-image-grid__item .lt-image-grid__media img {
  transition: transform 1s ease !important;
}
.s-b34c394 .lt-image-grid__item:hover .lt-image-grid__media img {
  transform: scale(1.05) !important;
}

/* --- 6. Atomic e-button hover (mockup: -translate-y-1, color swap) --- */
.e-button-base {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
  text-decoration: none !important;
}
.e-button-base:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(51, 70, 85, 0.18);
}

/* --- 7. Footer nav links — translate-x-1 + color shift on hover (mockup) --- */
.elementor-location-footer .elementor-nav-menu li a {
  transition: transform 0.3s ease, color 0.3s ease !important;
  display: inline-block !important;
}
.elementor-location-footer .elementor-nav-menu li a:hover {
  transform: translateX(4px);
  color: #FFFFFF !important;
}

/* --- 8. Smooth scroll for in-page anchors --- */
html {
  scroll-behavior: smooth;
}

/* --- 9. Material tile titles — readable Playfair --- */
.s-0bb0e0c .lt-image-grid__overlay {
  background: linear-gradient(180deg, rgba(51,70,85,0) 0%, rgba(51,70,85,0.92) 100%) !important;
  padding: 24px 20px !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* --- 10. Hero h1 — increase max-width to keep on 2 lines --- */
.elementor-271 .elementor-element-fccf17f {
  max-width: 1100px !important;
}

/* --- 11. Privacy/ToS body content — page-id-scoped (was template-scoped, leaked to all pages) --- */
body.page-id-2485 .elementor-element-bccde83,
body.page-id-2486 .elementor-element-bccde83 {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 64px 24px 96px !important;
}
body.page-id-2485 .elementor-widget-theme-post-content,
body.page-id-2486 .elementor-widget-theme-post-content {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #334655 !important;
}
body.page-id-2485 .elementor-widget-theme-post-content p,
body.page-id-2486 .elementor-widget-theme-post-content p {
  margin-bottom: 16px !important;
}
body.page-id-2485 .elementor-widget-theme-post-content h1,
body.page-id-2485 .elementor-widget-theme-post-content h2,
body.page-id-2486 .elementor-widget-theme-post-content h1,
body.page-id-2486 .elementor-widget-theme-post-content h2 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  color: #334655 !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
}
body.page-id-2485 .elementor-widget-theme-post-content h2,
body.page-id-2486 .elementor-widget-theme-post-content h2 {
  font-size: 26px !important;
}

/* --- 12. Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
  .s-b71d24a .lt-post-grid__item,
  .lt-image-grid__item,
  .e-button-base,
  .elementor-location-footer .elementor-nav-menu li a,
  html {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- 13. Neutralize amg-animate-on-scroll hide-state ---
   Snippet #9 (Scroll Animations Observer JS) is deactivated per mockup
   ("NO scroll fade-in"), so the .is-visible flip never fires. The
   lt-archive-filter widget hard-codes .amg-animate-on-scroll on its
   pill buttons, so without this override the filter row stays at
   opacity:0 on /material/<term>/, /colour/<term>/, /finish/<term>/,
   /size-available/<term>/ archives. Force-visible globally. */
.amg-animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   --- 14. AMG header polish (mockup-faithful) ---
   Single-bar header with navy pattern bg, cream nav, RFQ pill.
   Image #2495 (blue-on-navy-1920.jpg) set on container 12f1ef71 via
   _elementor_data; this snippet handles defensive lazy-load and
   nav typography.
   ============================================================ */

/* Defensive: ensure header bg image renders even with lazy-load active */
.elementor-location-header .amg-header-bar {
  background-image: url('img/marble/blue-on-navy-1920.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #334655 !important; /* fallback navy */
}

/* Nav links — cream/90 with white hover (mockup) */
.elementor-location-header .amg-header-bar .elementor-nav-menu > li > a,
.elementor-location-header .amg-header-bar .elementor-nav-menu > li > a:visited {
  color: rgba(244, 239, 235, 0.9) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  transition: color 0.3s ease !important;
}
.elementor-location-header .amg-header-bar .elementor-nav-menu > li > a:hover,
.elementor-location-header .amg-header-bar .elementor-nav-menu > li.current-menu-item > a {
  color: #FFFFFF !important;
}

/* Request a Quote — pill button (.menu-item-rfq class on the <li>) */
.elementor-location-header .amg-header-bar .elementor-nav-menu > li.menu-item-rfq > a {
  background-color: #537789 !important; /* steel-blue */
  color: #FFFFFF !important;
  padding: 12px 28px !important;
  border-radius: 9999px !important;
  margin-left: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-location-header .amg-header-bar .elementor-nav-menu > li.menu-item-rfq > a:hover {
  background-color: #6a92a4 !important; /* steel-blue/90 */
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
  color: #FFFFFF !important;
}

/* Mobile hamburger — cream */
.elementor-location-header .amg-header-bar .elementor-menu-toggle {
  color: #F4EFEB !important;
  background-color: transparent !important;
}

/* Mobile dropdown panel — slate-navy bg, cream items */
@media (max-width: 1024px) {
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown {
    background-color: #334655 !important;
  }
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown a {
    color: rgba(244, 239, 235, 0.9) !important;
    border-bottom-color: rgba(244, 239, 235, 0.1) !important;
  }
  /* Current / hover row inside the dropdown.
     Two rules collided here and made the open menu unreadable on every page
     that has a menu entry (reported 2026-09-21):
       - the nav widget's own setting background_color_dropdown_item_active
         is #F9FAFD (Elementor global 764183d), painted by post-239 CSS;
       - the desktop rule above paints li.current-menu-item > a #FFFFFF.
     Against this navy panel that is white text on a near-white bar, i.e. a
     solid pale band with no readable text. Repaint both explicitly.
     Specificity has to clear the desktop rule's (0,4,2), which is why the
     --dropdown and .elementor-nav-menu classes are both in the chain. */
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown .elementor-nav-menu > li > a:hover,
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown .elementor-nav-menu > li.current-menu-item > a,
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item-active,
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.highlighted {
    background-color: rgba(244, 239, 235, 0.12) !important;
    color: #FFFFFF !important;
  }
  /* RFQ pill displays as full-width row inside mobile dropdown */
  .elementor-location-header .amg-header-bar .elementor-nav-menu--dropdown li.menu-item-rfq > a {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
  }
}

/* Logo crispness on hi-DPI bg pattern */
.elementor-location-header .amg-header-bar .elementor-widget-theme-site-logo img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* --- 15. AMG Services page — section titles Playfair (PDF p6) ---
   Maintenance / Restoration / Bespoke Creations / Countertops headings.
   Targeted explicitly by V4 atomic element IDs to avoid leaking to the
   shared gc- global heading class which is also used on About + Home. */
.s-ae892ca,
.s-33fd0fa,
.s-353d07b,
.s-3ade210 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

/* --- 16. AMG About page — team typography (PDF p4-5, V2 #13 2026-05-11) ---
   V2 reductions: smaller name (24→20), job title italics removed.
   Names: Playfair Display bold slate-navy.
   Positions: Inter regular steel-blue (italic removed per V2 #13).
   Inline styles in lt-post-grid widget output force !important. */
body.page-id-293 .lt-post-grid__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #334655 !important;
  letter-spacing: 0 !important;
}
body.page-id-293 .lt-post-grid__meta--title {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  color: #537789 !important;
}
/* Team cards without photos (Alicia 2026-09-14: "remove the team headshots
   for now"). Every member carries the same placeholder, attachment 1734, and
   no headshots are coming. Hidden, not removed: the image stays set on each
   post, so deleting this rule brings the tiles back. The widget writes
   display:block inline, hence !important. */
body.page-id-293 .lt-post-grid__media {
  display: none !important;
}
body.page-id-293 .lt-post-grid__title {
  margin-top: 0 !important;
}
/* Without the tiles, three inline columns at phone width let long roles
   ("Fabricator/Installer") run into the next column. */
@media (max-width: 767px) {
  body.page-id-293 .lt-post-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
  }
}

/* --- 17. AMG Portfolio archive (custom shortcodes — see snippet #17 PHP) ---
   Theme builder Portfolio Archive #1730 renders [amg_featured_portfolio]
   (60vh hero) + [amg_portfolio_grid] (offset-1 staggered 2-col grid).
   Mockup: docs/mockup/portfolio.html (Session 16, 2026-05-07). */

/* Featured project hero */
.amg-portfolio-featured {
  display: block;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 96px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .amg-portfolio-featured {
    padding: 0 16px 64px;
  }
}
.amg-portfolio-featured__link {
  display: block;
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 12px 48px rgba(51, 70, 85, 0.18);
}
@media (max-width: 768px) {
  .amg-portfolio-featured__link {
    height: 60vh;
    min-height: 480px;
    max-height: 600px;
  }
}
.amg-portfolio-featured__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.5s ease-out;
}
.amg-portfolio-featured__link:hover .amg-portfolio-featured__image {
  transform: scale(1.05);
}
.amg-portfolio-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(51, 70, 85, 0.92) 0%,
    rgba(51, 70, 85, 0.45) 40%,
    transparent 75%
  );
  pointer-events: none;
}
.amg-portfolio-featured__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .amg-portfolio-featured__content {
    padding: 24px;
  }
}
.amg-portfolio-featured__eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(244, 239, 235, 0.85) !important;
  margin-bottom: 16px !important;
}
.amg-portfolio-featured__title,
.amg-portfolio-featured__link .amg-portfolio-featured__title,
.amg-portfolio-featured h2.amg-portfolio-featured__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  font-size: 60px !important;
  line-height: 1.1 !important;
  color: #F4EFEB !important;
  margin: 0 0 16px !important;
}
@media (max-width: 768px) {
  .amg-portfolio-featured__title,
  .amg-portfolio-featured__link .amg-portfolio-featured__title,
  .amg-portfolio-featured h2.amg-portfolio-featured__title {
    font-size: 36px !important;
  }
}
.amg-portfolio-featured__caption {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  color: rgba(244, 239, 235, 0.92) !important;
  max-width: 640px !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .amg-portfolio-featured__caption {
    font-size: 15px;
  }
}

/* Staggered 2-col grid */
.amg-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .amg-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 16px;
  }
}
.amg-portfolio-grid > .amg-portfolio-card:nth-child(2n) {
  margin-top: 64px;
}
@media (max-width: 768px) {
  .amg-portfolio-grid > .amg-portfolio-card:nth-child(2n) {
    margin-top: 0;
  }
}
.amg-portfolio-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.amg-portfolio-card__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(51, 70, 85, 0.06);
  transition: box-shadow 0.5s ease;
}
.amg-portfolio-card:hover .amg-portfolio-card__image {
  box-shadow: 0 12px 40px rgba(51, 70, 85, 0.18);
}
.amg-portfolio-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s ease;
}
.amg-portfolio-card:hover .amg-portfolio-card__image img {
  transform: scale(1.05);
}
.amg-portfolio-card__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: #334655;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}
@media (max-width: 768px) {
  .amg-portfolio-card__title {
    font-size: 26px;
  }
}
.amg-portfolio-card:hover .amg-portfolio-card__title {
  color: #537789;
}
.amg-portfolio-card__caption {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(51, 70, 85, 0.8);
  margin: 0;
  /* Clamp to 3 lines until Alicia provides clean excerpts */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 18. AMG Services page — mobile breakpoint reset (v2) ---
   Aggressive reset: section flex direction column, ALL nested containers
   full width, zero out horizontal padding that's causing text column to
   squeeze to ~80px. Page-id-scoped to Services only.

   Every selector is additionally scoped to .elementor-location-single, i.e.
   the page's own content. Without that, `body.page-id-252 .e-con-inner`
   also matched the HEADER template's container and flipped it to
   flex-direction: column, which centred the hamburger on Services while it
   sat right on every other page (reported 2026-09-21). It reached the footer
   template the same way. The Services content all lives inside
   .elementor-location-single, so this scoping changes nothing this reset was
   ever meant to touch. */
@media (max-width: 768px) {
  body.page-id-252 .elementor-location-single .e-con-inner,
  body.page-id-252 .elementor-location-single .e-flexbox-base,
  body.page-id-252 .elementor-location-single .e-con-inner .e-flexbox-base {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page-id-252 .elementor-location-single .e-con-inner > .e-flexbox-base {
    gap: 24px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.page-id-252 .elementor-location-single .e-paragraph-base,
  body.page-id-252 .elementor-location-single .e-heading-base {
    width: auto !important;
    max-width: 100% !important;
  }
  /* Smaller Playfair on mobile */
  body.page-id-252 .elementor-location-single .s-ae892ca,
  body.page-id-252 .elementor-location-single .s-33fd0fa,
  body.page-id-252 .elementor-location-single .s-353d07b,
  body.page-id-252 .elementor-location-single .s-3ade210 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
}
/* --- 19. AMG Catalogue page #449 — destination-page treatment (Session 17) ---
   Hides #479 single-page hero (the dark "Catalogue" overlay) on /amg/catalogue/.
   Restyles the existing Browse-by-Material / Browse-by-Colour e-headings as
   Brittany script section eyebrows, matching the portfolio rebuild vocabulary.
   Tightens lt-image-grid tiles: 4:5 aspect, soft shadow, hover lift, Playfair
   label below. Page-id-scoped to 449 only. Other lt-image-grid usages on the
   site (e.g. material/colour archive templates) are unaffected by this rule. */

/* Hide #479 single-page wrapper hero */
body.page-id-449 .elementor-element-6a657b9b {
  display: none !important;
}

/* Force cream page background (#479's wrap may set a different color) */
body.page-id-449 {
  background-color: #FFFFFF !important;
}

/* Browse-by-Material / Browse-by-Colour headings → Brittany section eyebrow */
body.page-id-449 .s-06b25de,
body.page-id-449 .s-e659394 {
  font-family: 'Brittany Signature', cursive !important;
  font-weight: 400 !important;
  font-size: 48px !important;
  line-height: 1 !important;
  color: #334655 !important;
  text-align: center !important;
  display: block !important;
  margin: 0 auto 40px !important;
  padding: 64px 0 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
@media (max-width: 768px) {
  body.page-id-449 .s-06b25de,
  body.page-id-449 .s-e659394 {
    font-size: 40px !important;
    margin-bottom: 24px !important;
    padding-top: 32px !important;
  }
}

/* lt-image-grid container scoping */
body.page-id-449 .lt-image-grid {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  body.page-id-449 .lt-image-grid {
    padding: 0 16px !important;
  }
}
body.page-id-449 .lt-image-grid__grid {
  gap: 32px !important;
}
@media (max-width: 768px) {
  body.page-id-449 .lt-image-grid__grid {
    gap: 16px !important;
  }
}

/* Tile hover behavior */
body.page-id-449 .lt-image-grid__item {
  transition: transform 0.5s ease !important;
}
body.page-id-449 .lt-image-grid__item:hover {
  transform: translateY(-8px);
}

/* Tile media: 4:5 aspect, soft shadow, scale on hover */
body.page-id-449 .lt-image-grid__media {
  overflow: hidden !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(51, 70, 85, 0.06) !important;
  transition: box-shadow 0.5s ease !important;
  aspect-ratio: 4 / 5 !important;
  display: block !important;
  position: relative !important;
}
body.page-id-449 .lt-image-grid__item:hover .lt-image-grid__media {
  box-shadow: 0 12px 40px rgba(51, 70, 85, 0.18) !important;
}
body.page-id-449 .lt-image-grid__media img {
  transition: transform 1s ease !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body.page-id-449 .lt-image-grid__item:hover .lt-image-grid__media img {
  transform: scale(1.05) !important;
}

/* Tile label below media */
body.page-id-449 .lt-image-grid__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: #334655 !important;
  margin-top: 16px !important;
  text-align: left !important;
  display: block !important;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color 0.3s ease !important;
}
@media (max-width: 768px) {
  body.page-id-449 .lt-image-grid__title {
    font-size: 20px !important;
  }
}
body.page-id-449 .lt-image-grid__item:hover .lt-image-grid__title {
  color: #537789 !important;
}

/* Spacing tail before global footer CTA */
body.page-id-449 main > .elementor-element:last-child,
body.page-id-449 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-449 main > .elementor-element:last-child,
  body.page-id-449 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 20. AMG destination-page intro primitives (shared) ---
   BEM .amg-page-intro__* used by Services (#252), About (#293),
   Contact (#247), Careers (#938). Catalogue (#449) keeps its
   v4 atomic per-page styles from Session 17 (visually identical;
   not refactored to avoid touching shipped page).
   ============================================================ */
.amg-page-intro {
  background-color: #FFFFFF !important;
  padding: 96px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
@media (max-width: 768px) {
  .amg-page-intro {
    padding: 64px 16px 48px !important;
  }
}
.amg-page-intro__eyebrow {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
  align-self: center !important;
}
@media (max-width: 768px) {
  .amg-page-intro__eyebrow {
    font-size: 40px !important;
    margin-bottom: 8px !important;
  }
}
.amg-page-intro__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
  align-self: center !important;
}
@media (max-width: 768px) {
  .amg-page-intro__title {
    font-size: 44px !important;
    margin-bottom: 16px !important;
  }
}
.amg-page-intro__caption {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: rgba(51, 70, 85, 0.9) !important;
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  align-self: center !important;
}
@media (max-width: 768px) {
  .amg-page-intro__caption {
    font-size: 17px !important;
  }
}

/* ============================================================
   --- 21. AMG Services destination-page (page-id-252) ---
   Suppress #479's wrapping page-title hero (#6a657b9b), cream
   page bg, tail spacing before global footer CTA. Mirrors rule #19
   for Catalogue.
   ============================================================ */
body.page-id-252 .elementor-element-6a657b9b {
  display: none !important;
}
body.page-id-252 {
  background-color: #FFFFFF !important;
}
body.page-id-252 main > .elementor-element:last-child,
body.page-id-252 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-252 main > .elementor-element:last-child,
  body.page-id-252 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 22. AMG About destination-page (page-id-293) ---
   Suppress #479's hero, cream page bg, tail spacing. Restyle the
   existing "The Stone Specialists" + "Meet Our Team" + "What Our
   Clients Say" h2s as Brittany script section eyebrows (mirrors
   rule #19's Browse-by-Material/Browse-by-Colour restyle on #449).
   ============================================================ */
body.page-id-293 .elementor-element-6a657b9b {
  display: none !important;
}
body.page-id-293 {
  background-color: #FFFFFF !important;
}
/* About-page section eyebrows — Brittany script, slate-navy on cream.
   Targets v4 atomic e-heading widgets via their s-* per-class:
     s-57dca4b = 'Meet Our Team' (h2 in container 629fedc2)
     s-0f69df1 = 'What Our Clients Say' (h2 in container 8080656)
   'The Stone Specialists' (s-adc57ef) stays Playfair — it's the story
   section's main heading, not a grid eyebrow. Demoted from h1 → h2 in
   _elementor_data so the intro band's h1 stays canonical. */
body.page-id-293 .s-57dca4b,
body.page-id-293 .s-0f69df1 {
  font-family: 'Brittany Signature', cursive !important;
  font-weight: 400 !important;
  font-size: 48px !important;
  color: #334655 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
}
@media (max-width: 768px) {
  body.page-id-293 .s-57dca4b,
  body.page-id-293 .s-0f69df1 {
    font-size: 40px !important;
  }
}
body.page-id-293 main > .elementor-element:last-child,
body.page-id-293 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-293 main > .elementor-element:last-child,
  body.page-id-293 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 23. AMG Contact destination-page (page-id-247) ---
   ============================================================ */
body.page-id-247 .elementor-element-6a657b9b {
  display: none !important;
}
body.page-id-247 {
  background-color: #FFFFFF !important;
}
body.page-id-247 main > .elementor-element:last-child,
body.page-id-247 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-247 main > .elementor-element:last-child,
  body.page-id-247 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 24. AMG Careers destination-page (page-id-938) ---
   ============================================================ */
body.page-id-938 .elementor-element-6a657b9b {
  display: none !important;
}
body.page-id-938 {
  background-color: #FFFFFF !important;
}
body.page-id-938 main > .elementor-element:last-child,
body.page-id-938 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-938 main > .elementor-element:last-child,
  body.page-id-938 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 25. AMG Request-a-Quote destination-page (page-id-954) ---
   ============================================================ */
body.page-id-954 .elementor-element-6a657b9b {
  display: none !important;
}
body.page-id-954 {
  background-color: #FFFFFF !important;
}
body.page-id-954 main > .elementor-element:last-child,
body.page-id-954 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-954 main > .elementor-element:last-child,
  body.page-id-954 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 26. AMG Privacy + ToS destination-page (page-id-2485, 2486) ---
   Restyle #479's hero from slate-navy to cream destination-page band,
   inject Brittany eyebrow via ::before (since the page has empty
   _elementor_data — can't add real intro widgets), Playfair page title,
   cream body bg, harden rule #11 content padding.
   ============================================================ */

/* Hero container — slate-navy → cream destination-page band */
body.page-id-2485 .elementor-element-6a657b9b,
body.page-id-2486 .elementor-element-6a657b9b {
  background-color: #FFFFFF !important;
  background-image: none !important;
  padding: 96px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 0 !important;
}
@media (max-width: 768px) {
  body.page-id-2485 .elementor-element-6a657b9b,
  body.page-id-2486 .elementor-element-6a657b9b {
    padding: 64px 16px 48px !important;
  }
}
body.page-id-2485 .elementor-element-6a657b9b .e-con-inner,
body.page-id-2486 .elementor-element-6a657b9b .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: transparent !important;
}

/* Inject Brittany script eyebrow above the page title */
body.page-id-2485 .elementor-element-6a657b9b .e-con-inner::before {
  content: "The privacy policy";
}
body.page-id-2486 .elementor-element-6a657b9b .e-con-inner::before {
  content: "The terms of service";
}
body.page-id-2485 .elementor-element-6a657b9b .e-con-inner::before,
body.page-id-2486 .elementor-element-6a657b9b .e-con-inner::before {
  display: block;
  font-family: 'Brittany Signature', cursive;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.15;
  color: #334655;
  text-align: center;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  body.page-id-2485 .elementor-element-6a657b9b .e-con-inner::before,
  body.page-id-2486 .elementor-element-6a657b9b .e-con-inner::before {
    font-size: 40px;
    margin-bottom: 8px;
  }
}

/* Page title h1 — Playfair, slate-navy on cream, centered */
body.page-id-2485 .elementor-element-6a657b9b .elementor-heading-title,
body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  body.page-id-2485 .elementor-element-6a657b9b .elementor-heading-title,
  body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title {
    font-size: 44px !important;
  }
}

/* Cream body background */
body.page-id-2485,
body.page-id-2486 {
  background-color: #FFFFFF !important;
}

/* Reading-width content — harden rule #11 with doubled-class specificity
   so it wins against e-con-full's --padding-inline / e-flex padding overrides */
body.page-id-2485.page-id-2485 .elementor-element-bccde83,
body.page-id-2486.page-id-2486 .elementor-element-bccde83 {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 64px !important;
  padding-bottom: 96px !important;
  background-color: transparent !important;
}

/* Tail spacing before global footer CTA */
body.page-id-2485 main > .elementor-element:last-child,
body.page-id-2486 main > .elementor-element:last-child,
body.page-id-2485 main > section:last-child,
body.page-id-2486 main > section:last-child {
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-2485 main > .elementor-element:last-child,
  body.page-id-2486 main > .elementor-element:last-child,
  body.page-id-2485 main > section:last-child,
  body.page-id-2486 main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 26b. AMG Privacy/ToS padding belt (defensive) ---
   Higher-specificity belt over rule #26's reading-width padding,
   targeting both container and inner widget, with v4 CSS variables
   AND direct padding. Wins against any e-con-full --padding-inline
   override that may differ between Privacy and ToS render paths.
   ============================================================ */
html body.page-id-2485 .elementor-element-bccde83.e-con,
html body.page-id-2486 .elementor-element-bccde83.e-con {
  --padding-inline: 24px !important;
  --padding-block-start: 64px !important;
  --padding-block-end: 96px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 64px !important;
  padding-bottom: 96px !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
html body.page-id-2485 .elementor-element-bccde83 > .elementor-widget-theme-post-content,
html body.page-id-2486 .elementor-element-bccde83 > .elementor-widget-theme-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   --- 26c. AMG Privacy/ToS h1 rephrase (mirror destination-page voice) ---
   Brittany eyebrow names the subject, Playfair h1 rephrases — matches
   Contact ("Get in touch" / "How to reach us"), Services ("The
   services" / "Design. Fabricate. Install."), etc. The dynamic
   post-title h1 echoed the eyebrow; this CSS-only swap visually
   replaces it (real h1 text stays in DOM for SEO).
   ============================================================ */
body.page-id-2485 .elementor-element-6a657b9b .elementor-heading-title,
body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title {
  font-size: 0 !important;
  line-height: 0 !important;
}
body.page-id-2485 .elementor-element-6a657b9b .elementor-heading-title::after,
body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title::after {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 1.1;
  color: #334655;
  text-align: center;
  margin: 0;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.page-id-2485 .elementor-element-6a657b9b .elementor-heading-title::after {
  content: "How we handle your data";
}
body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title::after {
  content: "Using our website";
}
@media (max-width: 768px) {
  body.page-id-2485 .elementor-element-6a657b9b .elementor-heading-title::after,
  body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title::after {
    font-size: 44px;
  }
}

/* ============================================================
   --- 26d. AMG Privacy/ToS hero parity (3-class specificity) ---
   Beat Elementor's compiled per-element CSS (which uses 3-class
   .elementor-element.elementor-element-6a657b9b chains) so the
   cream bg sticks AND the eyebrow sits at the same vertical
   position as the prepended .amg-page-intro on the other
   destination pages. justify-content: flex-start eliminates
   centering-driven offset; padding-top: 96px aligns with
   .amg-page-intro's 96px top padding.
   ============================================================ */
html body.page-id-2485 .elementor-element.elementor-element-6a657b9b,
html body.page-id-2486 .elementor-element.elementor-element-6a657b9b {
  background-color: #FFFFFF !important;
  background-image: none !important;
  background: #FFFFFF !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 96px 24px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (max-width: 768px) {
  html body.page-id-2485 .elementor-element.elementor-element-6a657b9b,
  html body.page-id-2486 .elementor-element.elementor-element-6a657b9b {
    padding: 64px 16px 48px !important;
  }
}

/* Defeat any background overlay (separate div or pseudo) */
html body.page-id-2485 .elementor-element.elementor-element-6a657b9b > .elementor-background-overlay,
html body.page-id-2486 .elementor-element.elementor-element-6a657b9b > .elementor-background-overlay,
html body.page-id-2485 .elementor-element.elementor-element-6a657b9b::before,
html body.page-id-2486 .elementor-element.elementor-element-6a657b9b::before {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* e-con-inner — kill any inherited bg, ensure tight stack */
html body.page-id-2485 .elementor-element.elementor-element-6a657b9b > .e-con-inner,
html body.page-id-2486 .elementor-element.elementor-element-6a657b9b > .e-con-inner {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* ============================================================
   --- 27. AMG hero photos sitewide (restore behind .amg-page-intro) ---
   Photo layer + cream-tinted overlay (~85%) keeps the cream destination-
   page vocabulary intact while adding texture + separation into body.
   Photos imported from OG Bluehost design at /wp-content/uploads/2026/01/.
   Home (#271) intentionally untouched per Ryan. Portfolio (#1730 archive)
   has its own featured-project hero — also intentionally untouched.
   ============================================================ */

/* --- 27a. Catalogue (#449) — hero image added 2026-05-13 to match the
       destination-page archetype shared with Services/About/Contact/Careers/RFQ.
       Catalogue was built in Session 17 before the photo-hero pattern landed
       (Session 18) — never retrofitted. Atlas-plan slab close-up thematically
       matches "Stone, by the slab" h1. --- */
body.page-id-449 .s-amg-cat-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/atlas-plan-boost-stone-ivory-stone-effect-large-slabs-clamp_1440_900_50.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.page-id-449 .s-amg-cat-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/8.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27b. Services (#252) — .amg-page-intro --- */
body.page-id-252 .amg-page-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/3.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27c. About (#293) --- */
body.page-id-293 .amg-page-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/9.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27d. Contact (#247) — Atlas Plan calacatta extra kitchen --- */
body.page-id-247 .amg-page-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/2-1-kitchen-island-with-atlas-plan-calacatta-extra-marble-effect-porcelain-tiles-clip_1440_900_50.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27e. Careers (#938) --- */
body.page-id-938 .amg-page-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/14.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27f. Request a Quote (#954) --- */
body.page-id-954 .amg-page-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/1-1.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27g. Privacy (#2485) + ToS (#2486) — ivory-stone slab close-up.
       Targets #479's hero #6a657b9b at 3-class specificity to beat
       Elementor's compiled CSS (per memory `elementor-per-element-css-
       specificity.md`). --- */
html body.page-id-2485 .elementor-element.elementor-element-6a657b9b,
html body.page-id-2486 .elementor-element.elementor-element-6a657b9b {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/atlas-plan-boost-stone-ivory-stone-effect-large-slabs-clamp_1440_900_50.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27h. Material taxonomy archive (template #402) — stone-slab close-up.
       Targets the existing hero container restyled in rule #30. Same
       cream-tinted overlay pattern as the destination pages above so
       /amg/material/<term>/ joins the same vocabulary. --- */
html body.tax-material .elementor-element.elementor-element-fe296b9 {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/atlas-plan-boost-stone-ivory-stone-effect-large-slabs-clamp_1440_900_50.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- 27i. Colour / Finish / Size taxonomy archive (template #1059) — kitchen scene
       with installed stone. Same cream-tinted overlay; targets the existing
       hero container restyled in rule #31. --- */
html body.tax-colour .elementor-element.elementor-element-289a39f4,
html body.tax-finish .elementor-element.elementor-element-289a39f4,
html body.tax-size-available .elementor-element.elementor-element-289a39f4 {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/Courtyard-Villa-Kitchen-2-scaled.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============================================================
   --- 28. AMG hero photo no-gap (kill bccde83 top padding for
   pages with hero INSIDE bccde83) ---
   Hero photo touches header, no cream strip in between.
   Privacy/ToS skipped — they have hero in #6a657b9b (sibling of
   bccde83), bccde83 is the legal-reading content area there.
   ============================================================ */
body.page-id-449 .elementor-element-bccde83,
body.page-id-252 .elementor-element-bccde83,
body.page-id-293 .elementor-element-bccde83,
body.page-id-247 .elementor-element-bccde83,
body.page-id-938 .elementor-element-bccde83,
body.page-id-954 .elementor-element-bccde83 {
  padding-top: 0 !important;
  --padding-block-start: 0 !important;
  margin-top: 0 !important;
}

/* The intermediate widget + page wrappers between bccde83 and the
   hero — zero margins/padding so nothing pushes the photo down. */
body.page-id-449 .elementor-element-bccde83 > .elementor-widget-theme-post-content,
body.page-id-252 .elementor-element-bccde83 > .elementor-widget-theme-post-content,
body.page-id-293 .elementor-element-bccde83 > .elementor-widget-theme-post-content,
body.page-id-247 .elementor-element-bccde83 > .elementor-widget-theme-post-content,
body.page-id-938 .elementor-element-bccde83 > .elementor-widget-theme-post-content,
body.page-id-954 .elementor-element-bccde83 > .elementor-widget-theme-post-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The page's own elementor wrap (.elementor-XXX) — same. */
body.page-id-449 .elementor-449,
body.page-id-252 .elementor-252,
body.page-id-293 .elementor-293,
body.page-id-247 .elementor-247,
body.page-id-938 .elementor-938,
body.page-id-954 .elementor-954 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The hero container itself — no top margin (its own padding-top: 96px
   handles the eyebrow's distance from the band top). */
body.page-id-449 .s-amg-cat-intro,
body.page-id-252 .amg-page-intro,
body.page-id-293 .amg-page-intro,
body.page-id-247 .amg-page-intro,
body.page-id-938 .amg-page-intro,
body.page-id-954 .amg-page-intro {
  margin-top: 0 !important;
}

/* ============================================================
   --- 29. AMG About — Stone Specialists folded into hero ---
   Hero photo override (overrides rule #27c's 9.webp) + hide
   container 502e7cd0 (now redundant — its title is the hero h1
   and its body text is captured by the existing caption).
   ============================================================ */

/* Override hero photo for About — Courtyard Villa Kitchen */
body.page-id-293 .amg-page-intro {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    url('img/hero-photos/Courtyard-Villa-Kitchen-2-scaled.webp') !important;
}

/* (V2 #12 — REVEALED 2026-05-11) Stone Specialists section is back.
   Hero h1 is now "Antillean Marble & Granite" (V2 Item 11), so the
   Stone Specialists block is no longer redundant. Body copy in widget
   #0bdcc0c already matches Alicia's V2 #12 wording verbatim. */


/* ============================================================
   --- 30. AMG Material taxonomy archive (template #402) ---
   /amg/material/<term>/ — restyle existing slate-navy hero
   container (.elementor-element-fe296b9) into the cream
   destination-page archetype. Pure CSS — no _elementor_data
   mutation. Mirror of rule #26 (Privacy/ToS) pattern: ::before
   eyebrow injected, theme-archive-title h1 styled as Playfair.
   Browse-Other-Materials footer band restyled to match Catalogue
   (#449 rule #19) lt-image-grid vocabulary.
   ============================================================ */

/* Cream body bg */
body.tax-material {
  background-color: #FFFFFF !important;
}

/* Hero container — 3-class specificity to beat Elementor compiled CSS.
   Original was slate-navy with min-height; force cream layout (background
   image set in rule #27h to add the cream-tinted hero photo).
   Padding 96px matches catalogue (#449) intro vocabulary so navigation
   from catalogue → /amg/material/<term>/ keeps the eyebrow + h1 stack
   at the same vertical position. */
html body.tax-material .elementor-element.elementor-element-fe296b9 {
  background-color: #FFFFFF !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 96px 24px !important;
  text-align: center !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
}
/* e-con-inner zero — keep h1 tight against Brittany eyebrow so the stack
   matches the catalogue intro vocabulary. */
html body.tax-material .elementor-element.elementor-element-fe296b9 > .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Brittany script eyebrow injected via ::before (no real DOM element since
   this is CSS-only restyle of existing container).
   position: relative is REQUIRED — Elementor's .e-con-boxed::before sets
   position: absolute by default which removes the pseudo from flow,
   leaving a big visual gap between eyebrow and h1. Forcing relative
   positioning puts the eyebrow back in flow so h1 sits naturally
   underneath. */
body.tax-material .elementor-element.elementor-element-fe296b9::before {
  content: "Browse by material";
  display: block;
  position: relative !important;
  font-family: 'Brittany Signature', cursive;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: #334655;
  text-align: center;
  margin: 0 0 12px 0;
  align-self: center;
  width: 100%;
}

/* Playfair h1 — restyle theme-archive-title widget's inner h1.
   Widget renders as .elementor-widget-theme-archive-title with
   .elementor-widget-container > .elementor-heading-title inside.
   Zero both widget-wrapper AND .elementor-widget-container margin/padding
   so the h1 sits tight under the Brittany eyebrow — matches the
   catalogue intro stack vocabulary. */
body.tax-material .elementor-element-fe296b9 .elementor-widget-theme-archive-title,
body.tax-material .elementor-element-fe296b9 .elementor-widget-theme-archive-title .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
body.tax-material .elementor-element-fe296b9 .elementor-widget-theme-archive-title .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* "Browse Other Materials" heading — Brittany script section eyebrow
   (mirrors rule #19 for /amg/catalogue/ Browse-by-Material heading). */
body.tax-material .elementor-element-af9f3b9 .elementor-heading-title {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #334655 !important;
  text-align: center !important;
}

/* Footer container .elementor-element-dc1574e — generous spacing */
body.tax-material .elementor-element-dc1574e {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* lt-image-grid — Catalogue-style 4:5 aspect tiles, soft shadow, hover lift */
body.tax-material .lt-image-grid {
  max-width: 1440px !important;
  margin: 32px auto 0 !important;
  gap: 32px !important;
}
body.tax-material .lt-image-grid__media {
  aspect-ratio: 4/5 !important;
  box-shadow: 0 6px 24px -8px rgba(48, 72, 88, 0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body.tax-material .lt-image-grid__item:hover .lt-image-grid__media {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -10px rgba(48, 72, 88, 0.25) !important;
}
body.tax-material .lt-image-grid__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 24px !important;
  color: #334655 !important;
  transition: color 0.3s ease !important;
}
body.tax-material .lt-image-grid__item:hover .lt-image-grid__title {
  color: #5C7A8C !important;
}

/* Tail spacing — match destination-page rhythm before global footer CTA */
body.tax-material main > .elementor-element:last-child,
body.tax-material main > section:last-child {
  padding-bottom: 96px !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body.tax-material .elementor-element.elementor-element-fe296b9 {
    padding: 64px 16px 48px !important;
  }
  body.tax-material .elementor-element.elementor-element-fe296b9::before {
    font-size: 40px;
    margin-bottom: 8px;
  }
  body.tax-material .elementor-element-fe296b9 .elementor-widget-theme-archive-title .elementor-heading-title {
    font-size: 44px !important;
  }
  body.tax-material .elementor-element-af9f3b9 .elementor-heading-title {
    font-size: 36px !important;
  }
  body.tax-material .elementor-element-dc1574e {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  body.tax-material .lt-image-grid {
    gap: 16px !important;
  }
  body.tax-material .lt-image-grid__title {
    font-size: 18px !important;
  }
  body.tax-material main > .elementor-element:last-child,
  body.tax-material main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 31. AMG Colour/Finish/Size taxonomy archive (template #1059) ---
   /amg/colour/<term>/, /amg/finish/<term>/, /amg/size-available/<term>/.
   Same destination-page treatment as rule #30 but scoped to three
   taxonomies. Hero container .elementor-element-289a39f4 originally
   has theme-archive-title + side image; we hide the image and inject
   per-taxonomy ::before eyebrow.
   ============================================================ */

/* Cream body bg — three taxes */
body.tax-colour,
body.tax-finish,
body.tax-size-available {
  background-color: #FFFFFF !important;
}

/* Hero container restyle (background image set in rule #27i for the hero photo).
   Padding 96px matches catalogue (#449) intro vocabulary so navigation
   between archives keeps the eyebrow + h1 stack at the same vertical
   position. */
html body.tax-colour .elementor-element.elementor-element-289a39f4,
html body.tax-finish .elementor-element.elementor-element-289a39f4,
html body.tax-size-available .elementor-element.elementor-element-289a39f4 {
  background-color: #FFFFFF !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 96px 24px !important;
  text-align: center !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
}
/* e-con-inner zero — keep h1 tight against Brittany eyebrow so the stack
   matches the catalogue intro vocabulary. */
html body.tax-colour .elementor-element.elementor-element-289a39f4 > .e-con-inner,
html body.tax-finish .elementor-element.elementor-element-289a39f4 > .e-con-inner,
html body.tax-size-available .elementor-element.elementor-element-289a39f4 > .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Hide the side image widget on taxonomy hero */
body.tax-colour .elementor-element-9d7fee4,
body.tax-finish .elementor-element-9d7fee4,
body.tax-size-available .elementor-element-9d7fee4 {
  display: none !important;
}

/* Per-taxonomy Brittany eyebrow via ::before */
body.tax-colour .elementor-element.elementor-element-289a39f4::before {
  content: "Browse by colour";
}
body.tax-finish .elementor-element.elementor-element-289a39f4::before {
  content: "Browse by finish";
}
body.tax-size-available .elementor-element.elementor-element-289a39f4::before {
  content: "Browse by size";
}
body.tax-colour .elementor-element.elementor-element-289a39f4::before,
body.tax-finish .elementor-element.elementor-element-289a39f4::before,
body.tax-size-available .elementor-element.elementor-element-289a39f4::before {
  display: block;
  position: relative !important; /* Elementor .e-con-boxed::before defaults to absolute — restore flow */
  font-family: 'Brittany Signature', cursive;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: #334655;
  text-align: center;
  margin: 0 0 12px 0;
  align-self: center;
  width: 100%;
}

/* Playfair h1 — theme-archive-title inside hero. Zero widget-wrapper
   margin AND .elementor-widget-container (Elementor's inner wrapper)
   so the h1 sits tight under the Brittany eyebrow — matches the
   catalogue intro stack vocabulary. */
body.tax-colour .elementor-element-289a39f4 .elementor-widget-theme-archive-title,
body.tax-finish .elementor-element-289a39f4 .elementor-widget-theme-archive-title,
body.tax-size-available .elementor-element-289a39f4 .elementor-widget-theme-archive-title,
body.tax-colour .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-widget-container,
body.tax-finish .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-widget-container,
body.tax-size-available .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
body.tax-colour .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-heading-title,
body.tax-finish .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-heading-title,
body.tax-size-available .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* "Browse Other ..." footer heading — Brittany script section eyebrow */
body.tax-colour .elementor-element-ba11236 .elementor-heading-title,
body.tax-finish .elementor-element-ba11236 .elementor-heading-title,
body.tax-size-available .elementor-element-ba11236 .elementor-heading-title {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #334655 !important;
  text-align: center !important;
}

/* Footer container — generous spacing */
body.tax-colour .elementor-element-c022c24,
body.tax-finish .elementor-element-c022c24,
body.tax-size-available .elementor-element-c022c24 {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* lt-image-grid — Catalogue-style */
body.tax-colour .lt-image-grid,
body.tax-finish .lt-image-grid,
body.tax-size-available .lt-image-grid {
  max-width: 1440px !important;
  margin: 32px auto 0 !important;
  gap: 32px !important;
}
body.tax-colour .lt-image-grid__media,
body.tax-finish .lt-image-grid__media,
body.tax-size-available .lt-image-grid__media {
  aspect-ratio: 4/5 !important;
  box-shadow: 0 6px 24px -8px rgba(48, 72, 88, 0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body.tax-colour .lt-image-grid__item:hover .lt-image-grid__media,
body.tax-finish .lt-image-grid__item:hover .lt-image-grid__media,
body.tax-size-available .lt-image-grid__item:hover .lt-image-grid__media {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -10px rgba(48, 72, 88, 0.25) !important;
}
body.tax-colour .lt-image-grid__title,
body.tax-finish .lt-image-grid__title,
body.tax-size-available .lt-image-grid__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 24px !important;
  color: #334655 !important;
  transition: color 0.3s ease !important;
}
body.tax-colour .lt-image-grid__item:hover .lt-image-grid__title,
body.tax-finish .lt-image-grid__item:hover .lt-image-grid__title,
body.tax-size-available .lt-image-grid__item:hover .lt-image-grid__title {
  color: #5C7A8C !important;
}

/* Tail spacing */
body.tax-colour main > .elementor-element:last-child,
body.tax-finish main > .elementor-element:last-child,
body.tax-size-available main > .elementor-element:last-child,
body.tax-colour main > section:last-child,
body.tax-finish main > section:last-child,
body.tax-size-available main > section:last-child {
  padding-bottom: 96px !important;
}

/* Mobile */
@media (max-width: 768px) {
  html body.tax-colour .elementor-element.elementor-element-289a39f4,
  html body.tax-finish .elementor-element.elementor-element-289a39f4,
  html body.tax-size-available .elementor-element.elementor-element-289a39f4 {
    padding: 64px 16px 48px !important;
  }
  body.tax-colour .elementor-element.elementor-element-289a39f4::before,
  body.tax-finish .elementor-element.elementor-element-289a39f4::before,
  body.tax-size-available .elementor-element.elementor-element-289a39f4::before {
    font-size: 40px;
    margin-bottom: 8px;
  }
  body.tax-colour .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-heading-title,
  body.tax-finish .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-heading-title,
  body.tax-size-available .elementor-element-289a39f4 .elementor-widget-theme-archive-title .elementor-heading-title {
    font-size: 44px !important;
  }
  body.tax-colour .elementor-element-ba11236 .elementor-heading-title,
  body.tax-finish .elementor-element-ba11236 .elementor-heading-title,
  body.tax-size-available .elementor-element-ba11236 .elementor-heading-title {
    font-size: 36px !important;
  }
  body.tax-colour .elementor-element-c022c24,
  body.tax-finish .elementor-element-c022c24,
  body.tax-size-available .elementor-element-c022c24 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  body.tax-colour .lt-image-grid,
  body.tax-finish .lt-image-grid,
  body.tax-size-available .lt-image-grid {
    gap: 16px !important;
  }
  body.tax-colour .lt-image-grid__title,
  body.tax-finish .lt-image-grid__title,
  body.tax-size-available .lt-image-grid__title {
    font-size: 18px !important;
  }
  body.tax-colour main > .elementor-element:last-child,
  body.tax-finish main > .elementor-element:last-child,
  body.tax-size-available main > .elementor-element:last-child,
  body.tax-colour main > section:last-child,
  body.tax-finish main > section:last-child,
  body.tax-size-available main > section:last-child {
    padding-bottom: 64px !important;
  }
}

/* ============================================================
   --- 31b. Hide "Browse Other Colours" footer on Finish + Size archives ---
   Template #1059's footer container .elementor-element-c022c24
   contains a hardcoded "Browse Other Colours" heading + a colour-
   terms lt-image-grid. This is correct on /amg/colour/<term>/ but
   misleading on /amg/finish/ and /amg/size-available/ archives.
   Hiding rather than relabeling: the underlying lt-image-grid
   shows colour terms regardless of taxonomy context, so just
   relabeling the heading still leaves the wrong tiles below.
   Phase 2 candidate: replace with a context-aware "Browse Other
   <Taxonomy>" navigation widget.
   ============================================================ */
body.tax-finish .elementor-element-c022c24,
body.tax-size-available .elementor-element-c022c24 {
  display: none !important;
}




/* ============================================================
   --- 32. AMG Product single CPT — destination-page treatment (Session 21) ---
   Template #1250 renders single-product. Top container #9d5bb2e (two-col)
   restyled as vertical cream intro band: post-info eyebrow #4114cde
   (Material taxonomy) → Brittany script; theme-post-title #ad6fda1 →
   Playfair h1; spec post-info #9f11ae3 → Inter caption. Image column
   #d5776f1 hidden (no real product photos delivered yet — Phase 2).
   Spec list's first row (Material) hidden via :first-child since
   Material is now the eyebrow above. "Browse related" h2 #e4a9091 →
   Brittany section eyebrow. lt-image-grid below inherits Catalogue
   tile styling (rules #19, no per-grid restyle needed).
   ============================================================ */
body.single-product {
  background-color: #FFFFFF !important;
}
body.single-product .elementor-element.elementor-element-9d5bb2e {
  background-color: #FFFFFF !important;
  padding: 96px 24px !important;
  flex-direction: column !important;
  align-items: center !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element.elementor-element-9d5bb2e {
    padding: 64px 16px 48px !important;
  }
}
/* V2 #10 fix (2026-05-12) — reveal product image column. Session 21 rule
   hid this with "no real product photos delivered yet" — stale now that
   144/185 products have images. Image renders above the text column via
   flex order. */
body.single-product .elementor-element.elementor-element-d5776f1 {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 0 32px !important;
  order: 0 !important;
  align-self: flex-start !important;
}
body.single-product .elementor-element.elementor-element-d5776f1 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 24px rgba(51, 70, 85, 0.12) !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element.elementor-element-d5776f1 {
    max-width: 360px !important;
    margin-bottom: 24px !important;
  }
}
body.single-product .elementor-element.elementor-element-a46b503 {
  width: 100% !important;
  max-width: 720px !important;
  text-align: left !important;
  align-items: flex-start !important;
  order: 1 !important;
}
/* Eyebrow — first post-info widget (material taxonomy) → Brittany script.
   V3 (2026-05-13): left-aligned per Alicia. Colour taxonomy removed from
   eyebrow data — now only Material renders here. */
body.single-product .elementor-element-4114cde,
body.single-product .elementor-element-4114cde .elementor-icon-list-items,
body.single-product .elementor-element-4114cde .elementor-icon-list-item,
body.single-product .elementor-element-4114cde .elementor-icon-list-text,
body.single-product .elementor-element-4114cde a {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  color: #334655 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
body.single-product .elementor-element-4114cde .elementor-icon-list-items {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element-4114cde,
  body.single-product .elementor-element-4114cde .elementor-icon-list-text,
  body.single-product .elementor-element-4114cde a {
    font-size: 40px !important;
  }
}
/* H1 — Playfair, slate-navy */
body.single-product .elementor-element-ad6fda1 .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 12px 0 24px 0 !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element-ad6fda1 .elementor-heading-title {
    font-size: 44px !important;
    margin: 8px 0 16px 0 !important;
  }
}
/* Specs — Inter caption */
body.single-product .elementor-element-9f11ae3 .elementor-icon-list-items {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
body.single-product .elementor-element-9f11ae3 .elementor-icon-list-item:first-child {
  display: none !important;
}
body.single-product .elementor-element-9f11ae3,
body.single-product .elementor-element-9f11ae3 .elementor-icon-list-text,
body.single-product .elementor-element-9f11ae3 a {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(51, 70, 85, 0.9) !important;
  line-height: 1.6 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element-9f11ae3,
  body.single-product .elementor-element-9f11ae3 .elementor-icon-list-text,
  body.single-product .elementor-element-9f11ae3 a {
    font-size: 16px !important;
  }
}
/* "Browse related" container + h2 → section eyebrow */
body.single-product .elementor-element.elementor-element-cb98db8 {
  padding-top: 48px !important;
  padding-bottom: 16px !important;
  text-align: center !important;
  background-color: #FFFFFF !important;
}
body.single-product .elementor-element-e4a9091 .elementor-heading-title {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  color: #334655 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element-e4a9091 .elementor-heading-title {
    font-size: 40px !important;
  }
}
/* Related-grid container — white bg + side padding so tiles aren't flush to
   viewport edges (Ryan flagged 2026-05-14, matching /colour/beige/ pattern). */
body.single-product .elementor-element.elementor-element-4b3f367 {
  background-color: #FFFFFF !important;
  padding-bottom: 96px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 768px) {
  body.single-product .elementor-element.elementor-element-4b3f367 {
    padding-bottom: 64px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Related-grid layout — match the taxonomy-archive grid (rule #31) so the
   product-detail and the /material/<term>/ + /colour/<term>/ grids feel
   identical. Square tiles + no rounding per V2 #9 site-wide pattern.
   width:100% is critical — the parent container is e-flex, and .lt-image-grid
   as a flex child defaults to intrinsic content width (~559px) without it,
   making the grid take only ~44% of the viewport. Verified via Playwright
   getBoundingClientRect 2026-05-14. */
body.single-product .lt-image-grid {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 32px auto 0 !important;
  gap: 32px !important;
}
body.single-product .lt-image-grid__media {
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 24px -8px rgba(48, 72, 88, 0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body.single-product .lt-image-grid__item:hover .lt-image-grid__media {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -10px rgba(48, 72, 88, 0.25) !important;
}
body.single-product .lt-image-grid__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  color: #334655 !important;
  transition: color 0.3s ease !important;
}
body.single-product .lt-image-grid__item:hover .lt-image-grid__title {
  color: #5C7A8C !important;
}
/* Tail spacing — last main element */
body.single-product main > .elementor-element:last-child,
body.single-product main > section:last-child {
  padding-bottom: 0 !important;
}

/* ============================================================
   --- 33. AMG Portfolio single CPT — destination-page treatment (Session 21) ---
   Template #1731 renders single-portfolio. Hero band #5e176ae restyled
   from navy to cream with: h6 #s-e394457 (dynamic ACF client_type, e.g.
   "Residential"/"Commercial") → Brittany script eyebrow; h1 #s-aec0873
   (post-title) → Playfair slate-navy; h2 #s-9491e5e (dynamic ACF location)
   → Inter caption. Cream content band #261851f keeps cream bg, restyled
   theme-post-content as centered Inter body. Bottom CTA #803dc69
   ("Start your project") DELETED via _elementor_data mutation since global
   footer already has the "Yours next?" CTA.
   ============================================================ */
body.single-portfolio {
  background-color: #FFFFFF !important;
}
/* Hero band — flip from navy to cream destination-page style */
body.single-portfolio .elementor-element.elementor-element-5e176ae {
  background-color: #FFFFFF !important;
  background-image: none !important;
  padding: 96px 24px 32px !important;
  align-items: center !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
}
@media (max-width: 768px) {
  body.single-portfolio .elementor-element.elementor-element-5e176ae {
    padding: 64px 16px 24px !important;
  }
}
/* Eyebrow — h6 ACF client_type → Brittany script slate-navy mixed case */
body.single-portfolio .e-heading-base.s-e394457 {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  color: #334655 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}
@media (max-width: 768px) {
  body.single-portfolio .e-heading-base.s-e394457 {
    font-size: 40px !important;
    margin-bottom: 8px !important;
  }
}
/* H1 — Playfair slate-navy */
body.single-portfolio .e-heading-base.s-aec0873 {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 0 24px 0 !important;
}
@media (max-width: 768px) {
  body.single-portfolio .e-heading-base.s-aec0873 {
    font-size: 44px !important;
    margin-bottom: 16px !important;
  }
}
/* H2 caption — Inter (renders empty if ACF location not populated) */
body.single-portfolio .e-heading-base.s-9491e5e {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(51, 70, 85, 0.9) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin: 0 !important;
}
/* Cream content band — keep cream, center the post-content */
body.single-portfolio .elementor-element.elementor-element-261851f {
  background-color: #FFFFFF !important;
  padding: 32px 24px 96px !important;
  align-items: center !important;
}
@media (max-width: 768px) {
  body.single-portfolio .elementor-element.elementor-element-261851f {
    padding: 24px 16px 64px !important;
  }
}
body.single-portfolio .elementor-element-20ecefb,
body.single-portfolio .elementor-element-20ecefb p {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #334655 !important;
  text-align: center !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Tail — last container drops padding into global footer CTA */
body.single-portfolio main > .elementor-element:last-child,
body.single-portfolio main > section:last-child {
  padding-bottom: 0 !important;
}

/* ============================================================
   --- 34. AMG Vacancy single CPT — destination-page treatment (Session 21) ---
   Template #1323 renders single-vacancy. Top container #64a23220 (icon-box
   "Back to All Vacancies" + h1 dynamic post-title) restyled as cream intro
   band: Brittany "Careers at AMG" eyebrow injected via ::before on the h1
   widget #4670536d, h1 → Playfair slate-navy. Bottom container #3e3663aa
   (theme-post-content #1534b0fc) restyled: cream bg, Position/Location/Type
   intro paragraphs as Inter caption, h3s ("About the role" etc.) as
   Brittany script section eyebrows.
   ============================================================ */
body.single-vacancy {
  background-color: #FFFFFF !important;
}
/* Top container — cream intro band */
body.single-vacancy .elementor-element.elementor-element-64a23220 {
  background-color: #FFFFFF !important;
  padding: 96px 24px 32px !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
@media (max-width: 768px) {
  body.single-vacancy .elementor-element.elementor-element-64a23220 {
    padding: 64px 16px 24px !important;
  }
}
/* "Back to All Vacancies" icon-box — small Inter link, demoted */
body.single-vacancy .elementor-element-c4f1cf0,
body.single-vacancy .elementor-element-c4f1cf0 .elementor-icon-box-title,
body.single-vacancy .elementor-element-c4f1cf0 .elementor-icon-box-title a {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(51, 70, 85, 0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
body.single-vacancy .elementor-element-c4f1cf0 .elementor-icon-box-wrapper {
  text-align: center !important;
  justify-content: center !important;
}
body.single-vacancy .elementor-element-c4f1cf0 {
  margin-bottom: 24px !important;
}
/* H1 widget #4670536d — inject Brittany eyebrow via ::before, then Playfair h1 */
body.single-vacancy .elementor-element-4670536d {
  position: relative !important;
  text-align: center !important;
}
body.single-vacancy .elementor-element-4670536d::before {
  content: 'Careers at AMG';
  display: block;
  font-family: 'Brittany Signature', cursive;
  font-size: 64px;
  font-weight: 400;
  color: #334655;
  line-height: 1;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  body.single-vacancy .elementor-element-4670536d::before {
    font-size: 40px;
    margin-bottom: 8px;
  }
}
body.single-vacancy .elementor-element-4670536d .elementor-heading-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 72px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: #334655 !important;
  text-align: center !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  body.single-vacancy .elementor-element-4670536d .elementor-heading-title {
    font-size: 44px !important;
  }
}
/* Bottom container with theme-post-content — cream bg, centered reading column */
body.single-vacancy .elementor-element.elementor-element-3e3663aa {
  background-color: #FFFFFF !important;
  padding: 32px 24px 96px !important;
}
@media (max-width: 768px) {
  body.single-vacancy .elementor-element.elementor-element-3e3663aa {
    padding: 24px 16px 64px !important;
  }
}
body.single-vacancy .elementor-element-1534b0fc {
  max-width: 720px !important;
  margin: 0 auto !important;
}
/* Position/Location/Type lead paragraphs — Inter caption */
body.single-vacancy .elementor-element-1534b0fc p {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #334655 !important;
}
body.single-vacancy .elementor-element-1534b0fc ul,
body.single-vacancy .elementor-element-1534b0fc li {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #334655 !important;
}
/* Section h3s ("About the role", "What you'll do", etc.) → Brittany script */
body.single-vacancy .elementor-element-1534b0fc h3 {
  font-family: 'Brittany Signature', cursive !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #334655 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 40px 0 8px 0 !important;
  line-height: 1 !important;
}
@media (max-width: 768px) {
  body.single-vacancy .elementor-element-1534b0fc h3 {
    font-size: 36px !important;
    margin: 32px 0 8px 0 !important;
  }
}
/* Tail spacing into global footer */
body.single-vacancy main > .elementor-element:last-child,
body.single-vacancy main > section:last-child {
  padding-bottom: 0 !important;
}


/* ============================================================================
   SECTION 8 — V2 apply (2026-05-11, Alicia V2 feedback)
   See docs/alicia-feedback-v2-2026-05-11.md
   ============================================================================ */

/* --- V2 #5 + #6. Home Catalog + Portfolio + Services sections — square corners
       (square aspect-ratio already in rule #3 line 205).
       2026-05-13: Added .s-b34c394 (home Services tiles) — Alicia consistently
       asked for "square images" + "no rounding" elsewhere, so site-wide flip. --- */
.s-0bb0e0c .lt-image-grid__item .lt-image-grid__media,
.s-b71d24a .lt-post-grid__media,
.s-b34c394 .lt-image-grid__item .lt-image-grid__media {
  border-radius: 0 !important;
}

/* --- V2 #19. Contact form row — white bg
       Container 1d3cab3 holds the "Send us a message" h1 + Gravity Forms shortcode.
       Page-id-247 body bg stays cream (rule #23) — only this row flips white. --- */
body.page-id-247 .elementor-element-1d3cab3 {
  background-color: #FFFFFF !important;
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  body.page-id-247 .elementor-element-1d3cab3 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* --- V2 #20. ToS "Using our website" h1 — keep on one line.
       Privacy h1 ("How we handle your data") fits — only ToS wraps. --- */
body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title {
  white-space: nowrap !important;
}
@media (max-width: 768px) {
  body.page-id-2486 .elementor-element-6a657b9b .elementor-heading-title {
    white-space: normal !important;
  }
}

/* --- V2 #7. Catalogue page #449 — tiles square + no rounding.
       Overrides rule #19's 4:5 + 8px on the same selector. --- */
body.page-id-449 .lt-image-grid__media {
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
}

/* --- V2 #9. Material / Colour / Finish / Size taxonomy archive tiles —
       square + no rounding. Overrides 4:5 in rules #30 + #31. --- */
body.tax-material .lt-image-grid__media,
body.tax-colour .lt-image-grid__media,
body.tax-finish .lt-image-grid__media,
body.tax-size-available .lt-image-grid__media {
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
}

/* --- V2 #15c. Portfolio archive — remove corner rounding from images.
       Touches both featured (60vh hero) and grid cards from rule #17. --- */
.amg-portfolio-featured__link,
.amg-portfolio-card__image {
  border-radius: 0 !important;
}

/* --- V2 #17. Vacancy single template — REVERSE Brittany→Playfair on section
       h3s (rule #34 lines 2497-2513 set Brittany). Width match ToS (760px,
       was 720px). Stronger centering on hero (3-class specificity per memory
       `elementor-per-element-css-specificity.md`). --- */
body.single-vacancy .elementor-element-1534b0fc h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 32px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 40px 0 12px 0 !important;
}
@media (max-width: 768px) {
  body.single-vacancy .elementor-element-1534b0fc h3 {
    font-size: 24px !important;
    margin: 32px 0 8px 0 !important;
  }
}
body.single-vacancy .elementor-element-1534b0fc {
  max-width: 760px !important;
}
body.single-vacancy .elementor-element.elementor-element-64a23220 {
  text-align: center !important;
  align-items: center !important;
}
body.single-vacancy .elementor-element.elementor-element-64a23220 > .e-con-inner {
  align-items: center !important;
  text-align: center !important;
}
body.single-vacancy .elementor-element.elementor-element-4670536d,
body.single-vacancy .elementor-element.elementor-element-4670536d .elementor-heading-title {
  text-align: center !important;
  width: 100% !important;
}
body.single-vacancy .elementor-element.elementor-element-4670536d::before {
  text-align: center !important;
  width: 100%;
}

/* --- V2 #18. Request a Quote — width match ToS (760px) on the form container.
       Form lives in container #f908a9f (text-editor blurb + shortcode 0885782
       Gravity Forms). --- */
body.page-id-954 .elementor-element.elementor-element-f908a9f {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* --- V2 #6b. Home Portfolio (Recent work) — title only, hide excerpt.
       Container 85e9bf6 → 0d9ac06 → b71d24a (lt-post-grid). --- */
.s-b71d24a .lt-post-grid__excerpt {
  display: none !important;
}

/* --- V2 #15a. Portfolio archive — unlink the individual portfolio pages
       for now ("Keep the functionality for a future phase"). Disables clicks
       on portfolio card + featured hero but keeps the visual treatment.
       To restore: remove this rule (no shortcode/template edit needed). --- */
.amg-portfolio-featured__link,
.amg-portfolio-card {
  pointer-events: none !important;
  cursor: default !important;
}
.amg-portfolio-featured__link *,
.amg-portfolio-card * {
  pointer-events: none !important;
  cursor: default !important;
}

/* --- V2 #13a. About — add space around "Meet Our Team" h2 (#57dca4b
       restyled in rule #22 as Brittany script section eyebrow).
       2026-05-13 FIX: was targeting .elementor-element-57dca4b (v3 wrapper class)
       which v4 atomic widgets don't get. Real rendered class is .s-57dca4b on the
       h2 itself. Per memory elementor-v4-heading-class-name.md. --- */
body.page-id-293 h2.s-57dca4b {
  margin-top: 80px !important;
  margin-bottom: 32px !important;
}
@media (max-width: 768px) {
  body.page-id-293 h2.s-57dca4b {
    margin-top: 56px !important;
    margin-bottom: 24px !important;
  }
}

/* --- V2 #12 follow-up — About "Stone Specialists" section vertical rhythm.
       Container 502e7cd0 (image + h2 + body) was sitting flush against the
       hero band, giving an "undesigned" stack of two images. 96/64 padding
       matches the destination-page section rhythm used elsewhere. --- */
body.page-id-293 .elementor-element-502e7cd0 {
  padding-top: 96px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 768px) {
  body.page-id-293 .elementor-element-502e7cd0 {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
  }
}

/* --- V2 #6c + V3 Product "Back to Catalogue" CTA — centered under grid.
       Both use .amg-btn-primary brand styling; override its align-self:flex-start
       so they center within their flex-column parent. --- */
a.s-amg-home-pf-cta,
.s-amg-home-pf-cta,
a.s-amg-product-back-to-catalogue,
.s-amg-product-back-to-catalogue {
  align-self: center !important;
  margin-top: 48px !important;
}
@media (max-width: 768px) {
  a.s-amg-home-pf-cta,
  .s-amg-home-pf-cta,
  a.s-amg-product-back-to-catalogue,
  .s-amg-product-back-to-catalogue {
    margin-top: 32px !important;
  }
}

/* --- V2 #2. Home hero bg — swap from tara-house (busy interior) to
       courtyard-villa (cleaner architectural shot). Overrides compiled
       atomic CSS via 2-class specificity (body.page-id-271 + .s-2e132aa).
       Keeps the same slate-navy 45% gradient overlay. --- */
body.page-id-271 .s-2e132aa {
  background-image:
    linear-gradient(rgba(51, 70, 85, 0.45), rgba(51, 70, 85, 0.45)),
    url('/wp-content/uploads/2026/05/portfolio-courtyard-villa-scaled.jpg') !important;
  background-repeat: repeat, no-repeat !important;
  background-size: auto auto, cover !important;
  background-position: 0% 0%, center center !important;
}

/* --- V2 #21. Footer RFQ section — visual sync to home's "Let's get to work"
       CTA. Footer template #227 container fca2283 currently solid slate-navy;
       swap to cream-tinted kitchen bg matching home 91d0401. Text widgets
       already updated to match home wording (eyebrow + h1 + caption).
       Since the footer now matches home's separate CTA strip (91d0401), hide
       the home-only one to avoid duplication on /amg/. --- */
body.page-id-271 .elementor-element-91d0401 {
  display: none !important;
}
.elementor-location-footer .elementor-element-fca2283 {
  background-image:
    linear-gradient(rgba(51, 70, 85, 0.78), rgba(51, 70, 85, 0.78)),
    url('img/hero-photos/2-1-kitchen-island-with-atlas-plan-calacatta-extra-marble-effect-porcelain-tiles-clip_1440_900_50.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 96px 24px !important;
}
@media (max-width: 768px) {
  .elementor-location-footer .elementor-element-fca2283 {
    padding: 64px 16px !important;
  }
}
/* Option A (Alicia, 2026-09-16): 78% slate-navy wash over the kitchen photo
   with cream type. The body line is full cream, not 70%, so it clears 4.5:1
   on the photo's lightest pixels. Atomic widgets carry data-id and s-<id>,
   not .elementor-element-<id>, so the text is targeted by data-id. */
.elementor-location-footer .elementor-element-fca2283 [data-id="0b739cd"],
.elementor-location-footer .elementor-element-fca2283 [data-id="83acc4a"],
.elementor-location-footer .elementor-element-fca2283 [data-id="af973c5"] {
  color: #F4EFEB !important;
}

/* --- V2 #22. Page Header overlay — darken to match home CTA slate-navy.
       Currently the marble bg shows through too lightly; add a slate-navy
       tint layer over the marble image so the overall band reads as solid
       slate-navy like the home CTA + RFQ strip. --- */
.elementor-location-header .amg-header-bar {
  background-image:
    linear-gradient(rgba(51, 70, 85, 0.55), rgba(51, 70, 85, 0.55)),
    url('img/marble/blue-on-navy-1920.jpg') !important;
}

/* --- V2 #23. Cream → white site-wide.
       Body bgs, destination-page hero bands, and footer RFQ overlay all
       flipped from cream (#F4EFEB) to white (#FFFFFF). Brand cream stays
       as accent color for text-on-dark (header nav links, portfolio hero
       overlay text). Catalogue/Material/Colour tile cards still need a
       subtle border or shadow on white to separate from page bg. --- */
body.page-id-449 .lt-image-grid__media,
body.tax-material .lt-image-grid__media,
body.tax-colour .lt-image-grid__media,
body.tax-finish .lt-image-grid__media,
body.tax-size-available .lt-image-grid__media,
.s-0bb0e0c .lt-image-grid__media {
  box-shadow: 0 4px 16px rgba(51, 70, 85, 0.08) !important;
}

/* Override Elementor compiled atomic CSS that still uses cream linear-gradient.
   These come from per-page atomic styles set via _elementor_data, not from
   style.css. Page-id-scoped 2-class selector beats compiled single-class. */
body.page-id-271 .s-cd99e5d,
body.page-id-271 .s-85e9bf6,
body.post-type-archive-portfolio .s-amg-pf-intro,
body.post-type-archive-portfolio .s-amg-pf-feat,
body.post-type-archive-portfolio .s-amg-pf-rphd,
body.post-type-archive-portfolio .s-amg-pf-grid {
  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
}
/* Note: .s-amg-cat-intro (Catalogue hero) was previously in this list, removed
   2026-05-13 so rule #27a's white-tinted slab-photo bg wins the cascade. */

/* --- V2 #15de. Portfolio archive — tag/category pills (replaces excerpt).
       Alicia's V2 doc asked for Property Type + Room + Material pills on
       each portfolio card instead of the text-block excerpt. Pill style
       mirrors the INACTIVE state of the lt-archive-filter pills used on
       /material/<term>/ + /colour/<term>/ archives, so visual language
       across the site stays consistent. Pills are the intentional
       exception to the "no rounding" pattern (which applies to images
       and cards, not buttons/tags). --- */
.amg-portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.amg-portfolio-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.5em;
  text-transform: uppercase;
  color: #334655;
  background: #FFFFFF;
  border: 1px solid #334655;
  border-radius: 100px;
}
/* Pills should not inherit the card's hover color-shift on the parent
   <a> (the card title gets a steel-blue tint on hover; pills should
   keep their slate-navy contrast against the white pill bg). */
.amg-portfolio-card:hover .amg-portfolio-card__pill {
  color: #334655;
}



/* ============================================================================
   SECTION 9 — Grid column counts at phone width (2026-09-20, pre-launch)
   ============================================================================

   Found while capturing the item-1 verification shots for the pre-launch pass.
   The lt-image-grid / lt-post-grid / lt-testimonial-grid widgets write their
   column count as an INLINE style on the <ul>:

       style="... display:grid; grid-template-columns:repeat(3, minmax(0,1fr));"

   with no media query anywhere in the widget or in this stylesheet, so every
   grid kept its desktop column count all the way down. Measured at a 390px
   viewport before this section existed:

       Home     services 3-up        91px tiles, overlay labels clipped
       Home     materials 6-up       91px tiles
       Home     portfolio 3-up       91px tiles
       Catalogue  two grids          96px tiles
       /material/granite/           68px tiles (4 columns)
       single product               72px tiles (4 columns)

   Inline styles outrank a plain stylesheet rule, so the override needs
   !important. Everything here is inside a max-width query: desktop and tablet
   layouts are untouched.

   Column choice: two across at phone width for catalogue-style tiles, and one
   across for the Home services row, whose three large 3:2 tiles carry an
   overlay caption that has nowhere to go in a half-width tile.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .lt-image-grid__grid,
  .lt-post-grid__grid,
  .lt-testimonial-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Home "Our Services" — three large overlay-captioned tiles, one per row */
  body.page-id-271 .s-b34c394 .lt-image-grid__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --- 2026-09-21. Home script eyebrows — line-height at phone widths.
   Reported: the "Areas of Expertise" eyebrow above "Our Services" wraps to two
   lines on a phone and the two lines sit on top of each other, so the Brittany
   script is an unreadable tangle. The hero's "Custom Stone & Countertops" has
   the identical fault and was not reported.

   Cause: line-height is INHERITED here, not set. Nothing in the cascade gives
   these paragraphs a line-height, so they take the global 21px off the page
   wrapper. 21px is a px value, so it does not scale with the element's own
   56-64px font-size — the line box ends up a third of the type size and wrapped
   lines overlap almost exactly. Single-line eyebrows survive it because their
   ink simply overflows a too-short box with nothing beneath to collide with.

   Scope: the four 56-64px script eyebrows on Home, at the phone breakpoint
   only. The 40px .amg-page-intro__eyebrow / .s-amg-cat-eb / .s-amg-pf-eb
   eyebrows on Services, About, Contact, RFQ, Catalogue and Portfolio inherit
   the same 21px and share the same latent fault, but none of them wraps at any
   width we support, so giving them a real line-height would move six page
   layouts to fix nothing visible. Left alone deliberately.

   "Our materials" and "Recent work" do fit on one line at 390px, but only just
   (312px and 274px of a 312px and 274px box); they wrap below ~370px. They are
   included so the whole set behaves the same way rather than failing one
   handset narrower.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.page-id-271 .amg-script.s-c7750d0,
  body.page-id-271 .s-dcc6afc,
  body.page-id-271 .s-d4e209c,
  body.page-id-271 .s-2fbe1ee {
    line-height: 1.15 !important;
  }
}

/* --- 35. Blog index (/blog/) — [amg_blog_grid].
       Reuses the portfolio card system, with two overrides it cannot inherit:
       (1) rule V2 #15a sets pointer-events:none on .amg-portfolio-card to
           unlink the portfolio cards. Blog cards must opt back out or the
           index is a wall of unclickable pictures.
       (2) the portfolio crop is 4/5 portrait, which is wrong for the
           landscape editorial photography on the posts.
       Landed 2026-09-21 with the post-launch SEO fixes (audit C2). --- */
.amg-blog-grid .amg-portfolio-card,
.amg-blog-grid .amg-portfolio-card * {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.amg-blog-grid .amg-portfolio-card__image {
  aspect-ratio: 3 / 2;
}
.amg-blog-grid .amg-portfolio-card__title {
  font-size: 28px;
}
@media (max-width: 768px) {
  .amg-blog-grid .amg-portfolio-card__title {
    font-size: 24px;
  }
}