/*
Theme Name: Art Yapı - GEALAN Türkiye
Theme URI: https://art-yapi.com
Description: Custom child theme for Art Yapı, authorized GEALAN partner in Türkiye. Built on Hello Elementor for full Elementor compatibility.
Author: Art Yapı
Author URI: https://art-yapi.com
Template: hello-elementor
Version: 1.0.0
Text Domain: art-yapi-child
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   ART YAPI DESIGN SYSTEM
   Minimal, Material-Design-inspired visual language.
   Deep navy + restrained gold accent, soft elevation, generous whitespace.

   IMPORTANT LAYOUT NOTE
   ----------------------
   Pages use hello-elementor's "elementor_header_footer" full-width template.
   There is NO <main>/.site-main/.page-content/.entry-content wrapper —
   the_content() is output as bare, top-level elements directly inside
   <body>, immediately between </header> and <footer>. All container /
   centering / gutter logic below therefore targets those loose elements
   directly as children of body.page (see "LOOSE CONTENT LAYOUT").
   ========================================================================== */

:root {

  /* ---- Brand color ---- */
  --ay-primary:        #1a3a5c;
  --ay-primary-dark:   #0f2440;
  --ay-primary-light:  #2f6690;
  --ay-primary-tint:   #eaf0f5; /* very light navy tint for subtle surfaces */

  --ay-accent:         #c8a951; /* use sparingly: CTAs, highlights, dividers */
  --ay-accent-dark:    #a8863d; /* hover state for accent-filled elements */
  --ay-accent-light:   #e8d491;
  --ay-accent-tint:    #f8f3e3; /* pale gold surface tint */
  --ay-accent-text:    #8a6d29; /* AA-safe gold-family text on white */

  /* ---- Neutrals ---- */
  --ay-white:   #ffffff;
  --ay-bg:      #ffffff;
  --ay-bg-alt:  #f7f8fa;

  --ay-gray-50:  #f7f8fa;
  --ay-gray-100: #eef1f4;
  --ay-gray-200: #e1e6eb;
  --ay-gray-300: #cbd3db;
  --ay-gray-400: #a3aeb9;
  --ay-gray-500: #78838f;
  --ay-gray-600: #57626d;
  --ay-gray-700: #3d4650;
  --ay-gray-800: #262d35;
  --ay-gray-900: #14181d;

  --ay-text:        var(--ay-gray-700);
  --ay-text-muted:  var(--ay-gray-500);
  --ay-text-strong: var(--ay-primary-dark);
  --ay-border:      var(--ay-gray-200);

  /* ---- Typography ---- */
  --ay-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ay-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ay-fs-body: 1.0625rem;      /* ~17px */
  --ay-lh-body: 1.65;

  /* ---- Spacing (8px baseline grid) ---- */
  --ay-sp-1: 0.5rem;   /* 8  */
  --ay-sp-2: 1rem;     /* 16 */
  --ay-sp-3: 1.5rem;   /* 24 */
  --ay-sp-4: 2rem;     /* 32 */
  --ay-sp-5: 3rem;     /* 48 */
  --ay-sp-6: 4rem;     /* 64 */
  --ay-sp-7: 6rem;     /* 96 */

  /* ---- Radius ---- */
  --ay-radius-sm:   8px;
  --ay-radius:      10px;
  --ay-radius-lg:   16px;
  --ay-radius-pill: 999px;

  /* ---- Elevation (Material-style, restrained) ---- */
  --ay-shadow-1: 0 1px 2px rgba(15,36,64,0.06), 0 1px 3px rgba(15,36,64,0.08);
  --ay-shadow-2: 0 6px 16px rgba(15,36,64,0.10), 0 2px 4px rgba(15,36,64,0.06);
  --ay-shadow-3: 0 16px 40px rgba(15,36,64,0.16), 0 4px 10px rgba(15,36,64,0.08);

  /* ---- Motion ---- */
  --ay-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ay-transition-fast: 150ms var(--ay-ease);
  --ay-transition: 200ms var(--ay-ease);

  /* ---- Layout ---- */
  --ay-container: 1160px;
  --ay-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Shared horizontal inset used by every loose top-level content element so
     they all line up on one centered column, without needing a wrapper div.
     At wide viewports it grows to keep content capped at --ay-container;
     at narrow viewports it never drops below --ay-gutter. */
  --ay-side-pad: max(var(--ay-gutter), calc((100% - var(--ay-container)) / 2));
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: var(--ay-font-body) !important;
  font-size: var(--ay-fs-body);
  line-height: var(--ay-lh-body);
  color: var(--ay-text);
  background: var(--ay-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guards against any sub-pixel full-bleed rounding */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ay-font-heading) !important;
  color: var(--ay-text-strong);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--ay-sp-3);
}

h1 { font-weight: 800; }

p {
  margin: 0 0 var(--ay-sp-3);
}

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

a {
  color: var(--ay-primary);
  text-decoration: none;
  transition: color var(--ay-transition-fast);
}

a:hover { color: var(--ay-primary-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ay-accent-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--ay-accent-light);
  color: var(--ay-primary-dark);
}

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

/* ==========================================================================
   SITE HEADER + NAVIGATION (Hello Elementor)
   Verified against live markup: header#site-header.site-header > .header-inner
   > .site-branding (.site-logo > a.custom-logo-link, p.site-description),
   nav.site-navigation > ul.menu, .site-navigation-toggle-holder button,
   nav.site-navigation-dropdown.
   ========================================================================== */

#site-header.site-header,
header.site-header {
  background: var(--ay-white) !important;
  box-shadow: 0 1px 0 var(--ay-border), var(--ay-shadow-1);
  border-bottom: 1px solid var(--ay-border);
  position: sticky;
  top: 0;
  z-index: 999;
}

header.site-header .header-inner {
  max-width: var(--ay-container);
  margin: 0 auto;
  padding: 0 var(--ay-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: var(--ay-sp-3);
}

header.site-header .site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--ay-sp-2);
}

.custom-logo-link {
  display: flex;
  align-items: center;
  gap: var(--ay-sp-1);
  text-decoration: none !important;
}

.ay-logo-svg {
  display: inline-flex;
  align-items: center;
}

.ay-logo-svg svg {
  height: 44px;
  width: auto;
  display: block;
}

/* Logo keeps its OWN brand colours (dark wordmark + blue emblem) — the header
   is white, so no recolouring is applied. */

header.site-header .site-title a,
header.site-header .site-branding a {
  display: flex;
  align-items: center;
  color: var(--ay-text-strong) !important;
  text-decoration: none !important;
  font-family: var(--ay-font-heading) !important;
  font-weight: 700;
}

header.site-header .site-description {
  color: var(--ay-text-muted) !important;
  font-size: 0.78rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}

/* Navigation */
nav.site-navigation {
  font-family: var(--ay-font-body) !important;
}

nav.site-navigation ul.menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.site-navigation .menu > li {
  position: relative;
}

nav.site-navigation .menu > li > a {
  display: block;
  position: relative;
  color: var(--ay-gray-700) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  border-radius: var(--ay-radius-sm);
  transition: color var(--ay-transition-fast), background-color var(--ay-transition-fast);
}

nav.site-navigation .menu > li > a::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--ay-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ay-transition);
}

nav.site-navigation .menu > li > a:hover {
  color: var(--ay-primary) !important;
  background: var(--ay-primary-tint) !important;
}

nav.site-navigation .menu > li > a:hover::after {
  transform: scaleX(1);
}

nav.site-navigation .menu > li.current-menu-item > a,
nav.site-navigation .menu > li.current-menu-ancestor > a,
nav.site-navigation .menu > li.current-page-ancestor > a {
  color: var(--ay-primary) !important;
}

nav.site-navigation .menu > li.current-menu-item > a::after,
nav.site-navigation .menu > li.current-menu-ancestor > a::after,
nav.site-navigation .menu > li.current-page-ancestor > a::after {
  transform: scaleX(1);
}

/* Sub-menu dropdown */
nav.site-navigation .sub-menu {
  background: var(--ay-white) !important;
  border-radius: var(--ay-radius) !important;
  box-shadow: var(--ay-shadow-3) !important;
  border: 1px solid var(--ay-border) !important;
  padding: 8px !important;
  min-width: 230px;
}

nav.site-navigation .sub-menu li a {
  color: var(--ay-text-strong) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  border-radius: var(--ay-radius-sm) !important;
  display: block;
}

nav.site-navigation .sub-menu li a::after {
  display: none;
}

nav.site-navigation .sub-menu li a:hover {
  background: var(--ay-primary-tint) !important;
  color: var(--ay-primary) !important;
}

/* "Get a Quote" CTA appended to the primary menu (both desktop and mobile
   dropdown share theme_location "menu-1", so this single rule covers
   both — see functions.php:art_yapi_nav_cta_item). Desktop: a compact gold
   pill sitting to the right of the nav links. */
nav.site-navigation .menu > li.ay-nav-cta-item {
  margin-left: var(--ay-sp-2);
  padding-left: var(--ay-sp-2);
  border-left: 1px solid var(--ay-border);
}

nav.site-navigation .menu > li.ay-nav-cta-item > a.ay-nav-cta {
  display: inline-flex;
  align-items: center;
  color: var(--ay-primary-dark) !important;
  background: var(--ay-accent);
  font-weight: 700 !important;
  padding: 9px 18px !important;
  border-radius: var(--ay-radius-pill);
  box-shadow: var(--ay-shadow-1);
  transition: background-color var(--ay-transition-fast), box-shadow var(--ay-transition-fast), transform var(--ay-transition-fast);
}

nav.site-navigation .menu > li.ay-nav-cta-item > a.ay-nav-cta::after {
  display: none;
}

nav.site-navigation .menu > li.ay-nav-cta-item > a.ay-nav-cta:hover {
  background: var(--ay-accent-dark) !important;
  color: var(--ay-primary-dark) !important;
  box-shadow: var(--ay-shadow-2);
  transform: translateY(-1px);
}

/* Mobile dropdown: keep it inline with the other links rather than pilled,
   but pick it out with the accent colour so it's still the obvious CTA. */
nav.site-navigation-dropdown .menu li.ay-nav-cta-item > a.ay-nav-cta {
  color: var(--ay-accent-text) !important;
  font-weight: 700;
}

/* Mobile toggle button */
.site-header .site-navigation-toggle-holder button,
.site-header button.site-navigation-toggle {
  color: var(--ay-primary) !important;
  border-radius: var(--ay-radius-sm);
  transition: background-color var(--ay-transition-fast);
}

.site-header .site-navigation-toggle-holder button:hover,
.site-header button.site-navigation-toggle:hover {
  background: var(--ay-primary-tint) !important;
}

/* Mobile dropdown nav */
nav.site-navigation-dropdown {
  background: var(--ay-white) !important;
  box-shadow: var(--ay-shadow-2);
  border-top: 1px solid var(--ay-border);
}

nav.site-navigation-dropdown .menu {
  padding: var(--ay-sp-1) 0;
}

nav.site-navigation-dropdown .menu li a {
  color: var(--ay-gray-700) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 14px var(--ay-gutter) !important;
  border-bottom: 1px solid var(--ay-border) !important;
}

nav.site-navigation-dropdown .menu li.current-menu-item > a {
  color: var(--ay-primary) !important;
}

/* ==========================================================================
   LOOSE CONTENT LAYOUT
   ==========================================================================
   No .site-main / .page-content wrapper exists on this template, so every
   top-level content element is centered and gutter-padded individually,
   all sharing the single --ay-side-pad token so their left/right edges
   line up exactly regardless of element type.

   Category A (padding-based — element has no other competing padding, and
   staying full-width lets any background bleed edge-to-edge if needed):
     headings, paragraphs, lists, columns, config grid.

   Category B (margin-based — element already owns internal padding for its
   own card chrome, e.g. the quote or the boxed table, so the container inset
   must come from margin instead of padding):
     wrapped tables, the bare spec-table, blockquote, separators.
   ========================================================================== */

body.page > h1.wp-block-heading,
body.page > h2.wp-block-heading,
body.page > h3.wp-block-heading,
body.page > h4.wp-block-heading,
body.page > p,
body.page > ul:not(.menu),
body.page > ol,
body.page > .wp-block-columns,
body.page > .ay-config-grid,
body.page > .wp-block-buttons.ay-brochure,
/* Home-page sections wrapped in a .ay-section / .ay-cta-band group (see
   "GROUPED SECTIONS" below) are full-bleed themselves, so their direct
   children need the same side inset the top-level elements get above. */
body.page > .ay-section > h2.wp-block-heading,
body.page > .ay-section > h3.wp-block-heading,
body.page > .ay-section > p,
body.page > .ay-section > ul:not(.menu),
body.page > .ay-section > .wp-block-columns {
  box-sizing: border-box;
  padding-left: var(--ay-side-pad);
  padding-right: var(--ay-side-pad);
}

/* .ay-cta-band children are CENTERED (not full-bleed), so they must NOT get the
   large side-pad inset — combined with a narrow max-width + border-box it
   collapses the text to one word per line on wide screens. Small gutter only. */
body.page > .ay-cta-band > h2.wp-block-heading,
body.page > .ay-cta-band > p,
body.page > .ay-cta-band > .wp-block-buttons {
  box-sizing: border-box;
  padding-left: var(--ay-gutter);
  padding-right: var(--ay-gutter);
}

body.page > figure.wp-block-table,
body.page > .wp-block-quote,
body.page > hr.wp-block-separator,
body.page > .wp-block-separator {
  margin-left: var(--ay-side-pad);
  margin-right: var(--ay-side-pad);
}

/* Bare shortcode-output table (no <figure> wrapper) — padding on a <table>
   box is unreliable across browsers, and tables don't stretch to fill their
   container by default, so give it an explicit width instead. */
body.page > table.ay-spec-table {
  margin-left: var(--ay-side-pad);
  margin-right: var(--ay-side-pad);
  width: calc(100% - (var(--ay-side-pad) * 2));
}

/* ==========================================================================
   TYPOGRAPHY — top-level loose content
   ========================================================================== */

body.page > h1.wp-block-heading {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);
  color: var(--ay-text-strong);
  margin-top: var(--ay-sp-6);
  margin-bottom: var(--ay-sp-4);
}

body.page > h2.wp-block-heading,
body.page > .ay-section > h2.wp-block-heading,
body.page > .ay-cta-band > h2.wp-block-heading {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  color: var(--ay-primary);
  margin-top: var(--ay-sp-6);
  margin-bottom: var(--ay-sp-3);
  padding-bottom: var(--ay-sp-2);
  border-bottom: 1px solid var(--ay-border);
}

/* A section's own heading shouldn't add extra top margin on top of the
   section's already-generous padding-top */
body.page > .ay-section > h2.wp-block-heading:first-child,
body.page > .ay-cta-band > h2.wp-block-heading:first-child {
  margin-top: 0;
}

body.page > h3.wp-block-heading {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  color: var(--ay-text-strong);
  margin-top: var(--ay-sp-5);
  margin-bottom: var(--ay-sp-2);
}

body.page > h4.wp-block-heading {
  font-size: 1.05rem;
  color: var(--ay-text-strong);
  margin-top: var(--ay-sp-4);
  margin-bottom: var(--ay-sp-2);
}

body.page > p,
body.page > .ay-section > p,
body.page > .ay-cta-band > p {
  font-size: var(--ay-fs-body);
  line-height: var(--ay-lh-body);
  color: var(--ay-text);
  /* Fill the content column — do not hug the left with a narrow measure.
     (Previously capped at 72ch, which left a large empty band on the
     right; the client wants paragraphs to use the full container width.) */
  max-width: 100%;
  margin-top: 0;
  margin-bottom: var(--ay-sp-4);
}

body.page > p strong,
body.page > .ay-section > p strong,
body.page > .ay-cta-band > p strong,
body.page > .wp-block-quote strong {
  color: var(--ay-text-strong);
  font-weight: 600;
}

/* Inline text links inside loose body copy — underline accent, not a filled pill */
body.page > p a,
body.page > ul li a,
body.page > ol li a {
  color: var(--ay-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ay-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--ay-transition-fast), text-decoration-color var(--ay-transition-fast);
}

body.page > p a:hover,
body.page > ul li a:hover,
body.page > ol li a:hover {
  color: var(--ay-primary-dark);
  text-decoration-color: var(--ay-accent-dark);
}

/* Solo CTA links, e.g. "View Systems →" inside a card paragraph */
.wp-block-column p > a:only-child,
body.page > p > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ay-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--ay-accent);
  padding-bottom: 2px;
  transition: color var(--ay-transition-fast), border-color var(--ay-transition-fast), transform var(--ay-transition-fast);
}

.wp-block-column p > a:only-child:hover,
body.page > p > a:only-child:hover {
  color: var(--ay-primary-dark);
  border-bottom-color: var(--ay-accent-dark);
  transform: translateX(3px);
}

/* Comfortable top spacing so the first content block never feels jammed
   against the sticky header */
body.page > h1.wp-block-heading:first-of-type {
  margin-top: var(--ay-sp-6);
}

/* ==========================================================================
   HOME PAGE HERO — .ay-hero
   A wp:cover block: real photography (lifestyle-home.jpg) full-bleed behind
   a navy gradient scrim, with the H1 / intro copy / CTA pair overlaid. It is
   a bare top-level child of <body> just like every other loose element, so
   it is already edge-to-edge with no breakout hack required; its own inner
   container re-applies --ay-side-pad so the heading/copy column still lines
   up with the rest of the page.
   ========================================================================== */

body.home > .ay-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  color: var(--ay-white);
  background: var(--ay-primary-dark);
}

body.home > .ay-hero .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

body.home > .ay-hero .ay-hero-overlay,
body.home > .ay-hero .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(15,36,64,0.94) 0%, rgba(15,36,64,0.82) 32%, rgba(15,36,64,0.42) 68%, rgba(15,36,64,0.32) 100%);
}

body.home > .ay-hero .ay-hero-inner,
body.home > .ay-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ay-container);
  margin: 0 auto;
  padding: var(--ay-sp-7) var(--ay-gutter);
}

body.home > .ay-hero h1.wp-block-heading {
  color: var(--ay-white) !important;
  font-size: clamp(2.35rem, 1.7rem + 3vw, 4rem);
  line-height: 1.12;
  max-width: 18ch;
  margin-top: 0;
  margin-bottom: var(--ay-sp-3);
}

body.home > .ay-hero p {
  color: rgba(255,255,255,0.86) !important;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  max-width: 58ch;
  margin-bottom: var(--ay-sp-4);
}

body.home > .ay-hero .ay-hero-ctas {
  margin: var(--ay-sp-3) 0 0;
}

/* Comfortable rhythm for whatever follows the hero (the stats strip) */
body.home > .ay-hero + .ay-stats {
  padding-top: var(--ay-sp-5) !important;
}

/* ==========================================================================
   STAT ROW — .ay-stats (a wp:columns block used for headline numbers)
   ========================================================================== */

.ay-stats {
  margin-top: 0 !important;
  padding-top: var(--ay-sp-4) !important;
  padding-bottom: var(--ay-sp-4) !important;
  /* Override the core is-layout-flex utility so we can lay four (or more)
     stats out evenly as a real grid instead of relying on flex-basis math. */
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
}

.ay-stats .wp-block-column {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: var(--ay-sp-2) var(--ay-sp-3);
  text-align: center;
  align-items: center;
}

.ay-stats .wp-block-column:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.ay-stats .wp-block-column:not(:first-child) {
  border-left: 1px solid var(--ay-border);
}

.ay-stats h3 {
  font-family: var(--ay-font-heading);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 800;
  color: var(--ay-primary);
  line-height: 1;
  margin: 0 0 0.25rem;
}

.ay-stats p {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ay-text-muted);
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   MEDIA & RICH CONTENT
   Real photography, an inline video and a brochure CTA, all loose top-level
   children of body.page just like everything else on this template.
   ========================================================================== */

/* .ay-product-shot — large system photo on product pages */
body.page > figure.wp-block-image.ay-product-shot {
  margin: var(--ay-sp-4) var(--ay-side-pad) var(--ay-sp-4);
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
  box-shadow: var(--ay-shadow-2);
  background: var(--ay-bg-alt);
}

body.page > figure.wp-block-image.ay-product-shot img {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
}

/* .ay-ref-shot — project photo + caption on the References page */
body.page > figure.wp-block-image.ay-ref-shot {
  margin: var(--ay-sp-4) var(--ay-side-pad) var(--ay-sp-2);
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
  box-shadow: var(--ay-shadow-2);
  background: var(--ay-bg-alt);
}

body.page > figure.wp-block-image.ay-ref-shot img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

body.page > figure.wp-block-image.ay-ref-shot figcaption {
  padding: var(--ay-sp-2) var(--ay-sp-3);
  background: var(--ay-white);
  text-align: center;
  font-size: 0.85rem;
  font-style: normal;
  color: var(--ay-text-muted);
}

/* .ay-video — responsive 16:9 embed wrapper */
body.page > .ay-video,
body.page > .ay-section .ay-video {
  margin: var(--ay-sp-4) var(--ay-side-pad) var(--ay-sp-5);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
  box-shadow: var(--ay-shadow-2);
  background: var(--ay-gray-900);
}

.ay-video iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* .ay-brochure — tasteful outline "download" CTA after a config grid */
body.page > .wp-block-buttons.ay-brochure {
  margin-top: var(--ay-sp-2);
  margin-bottom: var(--ay-sp-4);
  justify-content: flex-start;
}

/* .ay-icon — small inline SVG glyph inside a card heading, kept subtle */
.wp-block-column h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Cards that carry an icon badge (the "Why Choose Us" trio) read more
   premium with the icon stacked above the title rather than inline. */
.wp-block-column h3:has(.ay-icon) {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ay-sp-2);
}

.ay-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ay-primary-tint);
  color: var(--ay-primary);
}

.ay-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* .ay-split — two-up image + text/checklist layout */
.ay-split .wp-block-column {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ay-split .wp-block-column:hover {
  transform: none;
}

.ay-split-img {
  margin: 0;
  flex: 1;
  min-height: 280px;
  border-radius: var(--ay-radius-lg);
  overflow: hidden;
  box-shadow: var(--ay-shadow-2);
}

.ay-split-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .ay-announcement — the "Setting Sail" letter: portrait photo (shown in full,
   not cropped) beside a long message, image top-aligned. */
.ay-announcement {
  align-items: flex-start;
  gap: var(--ay-sp-5);
}
.ay-announcement > .wp-block-column:first-child {
  flex: 0 0 38%;
  max-width: 430px;
}
.ay-announcement .ay-split-img {
  flex: none;
  min-height: 0;
  align-self: flex-start;
}
.ay-announcement .ay-split-img img {
  height: auto;            /* keep the portrait aspect — no cropping of the sail */
}
.ay-signoff {
  margin-top: var(--ay-sp-3);
  padding-top: var(--ay-sp-3);
  border-top: 1px solid var(--ay-border);
  line-height: 1.5;
}
.ay-signoff .ay-hashtags {
  color: var(--ay-accent-text);
  font-weight: 600;
}

/* GEALAN partner logo shown under the "Why Choose GEALAN?" heading */
body.page .ay-gealan-logo {
  margin: 0 0 var(--ay-sp-4);
  padding-left: var(--ay-side-pad);
}
body.page .ay-gealan-logo img {
  width: 220px;
  max-width: 60%;
  height: auto;
}

/* .ay-range — product cards with an image header */
.ay-range .wp-block-column {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.ay-range-img {
  margin: 0;
  overflow: hidden;
}

.ay-range-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms var(--ay-ease);
}

.ay-range .wp-block-column:hover .ay-range-img img {
  transform: scale(1.06);
}

.ay-range .wp-block-column h3 {
  margin: var(--ay-sp-3) var(--ay-sp-4) var(--ay-sp-2);
}

.ay-range .wp-block-column p {
  margin-left: var(--ay-sp-4);
  margin-right: var(--ay-sp-4);
}

.ay-range .wp-block-column p:last-child {
  margin-bottom: var(--ay-sp-4);
}

/* ==========================================================================
   GROUPED SECTIONS — .ay-section / .ay-section-alt / .ay-cta-band
   The Home page wraps each major section in a wp:group so it can carry its
   own full-bleed background band, giving the page clear, alternating
   rhythm (white / tint / white...) instead of one flat scroll. The group
   itself stays edge-to-edge (it's a bare top-level child of body, same as
   everything else); side-pad is re-applied to its children above.
   ========================================================================== */

body.page > .ay-section,
body.page > .ay-cta-band {
  margin: 0;
}

body.page > .ay-section {
  padding-top: var(--ay-sp-7);
  padding-bottom: var(--ay-sp-7);
}

body.page > .ay-section-alt {
  background: var(--ay-bg-alt);
}

body.page > .ay-section > *:last-child {
  margin-bottom: 0 !important;
}

/* .ay-cta-band — the closing "Contact" call-to-action, styled like a short
   reprise of the hero: same navy gradient, white type, dual CTA buttons. */
body.page > .ay-cta-band {
  background: linear-gradient(135deg, var(--ay-primary-dark) 0%, var(--ay-primary) 100%);
  padding-top: var(--ay-sp-7);
  padding-bottom: var(--ay-sp-7);
  text-align: center;
}

body.page > .ay-cta-band > h2.wp-block-heading {
  color: var(--ay-white) !important;
  border-bottom: none;
  padding-bottom: 0;
}

body.page > .ay-cta-band > p {
  color: rgba(255,255,255,0.82) !important;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

body.page > .ay-cta-band > p:last-of-type {
  color: rgba(255,255,255,0.95) !important;
  font-weight: 600;
  font-size: 1.05rem;
}

.ay-cta-band-buttons {
  justify-content: center !important;
  margin-top: var(--ay-sp-4) !important;
}

/* Outline buttons read as invisible navy-on-navy inside dark sections —
   give them a white outline treatment wherever they sit on the hero or the
   closing CTA band. */
.ay-hero .wp-block-button.is-style-outline .wp-block-button__link,
.ay-cta-band .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--ay-white) !important;
  border-color: rgba(255,255,255,0.55);
}

.ay-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ay-cta-band .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--ay-white);
  color: var(--ay-white) !important;
}

/* ==========================================================================
   BUTTONS / CTAS
   ========================================================================== */

.wp-block-button__link,
.ay-btn-primary,
.ay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  font-family: var(--ay-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  border-radius: var(--ay-radius-sm) !important;
  background: var(--ay-primary);
  color: var(--ay-white) !important;
  border: 1px solid transparent;
  box-shadow: var(--ay-shadow-1);
  cursor: pointer;
  transition: background-color var(--ay-transition-fast), box-shadow var(--ay-transition-fast), transform var(--ay-transition-fast);
}

.wp-block-button__link:hover,
.ay-btn-primary:hover,
.ay-btn:hover {
  background: var(--ay-primary-dark);
  box-shadow: var(--ay-shadow-2);
  transform: translateY(-2px);
  color: var(--ay-white) !important;
}

.wp-block-button__link:active,
.ay-btn-primary:active,
.ay-btn:active {
  transform: translateY(0);
}

/* Gold "accent" filled variant — reserved for the primary conversion action */
.wp-block-button.is-style-fill-accent .wp-block-button__link,
.ay-btn-accent {
  background: var(--ay-accent);
  color: var(--ay-primary-dark) !important;
  box-shadow: var(--ay-shadow-1);
}

.wp-block-button.is-style-fill-accent .wp-block-button__link:hover,
.ay-btn-accent:hover {
  background: var(--ay-accent-dark);
  color: var(--ay-primary-dark) !important;
}

/* Outline variant (Gutenberg core "outline" style) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ay-primary) !important;
  border: 1.5px solid var(--ay-primary);
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ay-primary);
  color: var(--ay-white) !important;
}

/* ==========================================================================
   CARD GRID — wp:columns / wp:column (feature cards, product cards)
   ========================================================================== */

.wp-block-columns {
  gap: var(--ay-sp-4) !important;
  margin-top: 0;
  margin-bottom: var(--ay-sp-4) !important;
  align-items: stretch !important;
}

.wp-block-column {
  display: flex;
  flex-direction: column;
  background: var(--ay-white);
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-radius);
  padding: var(--ay-sp-4);
  box-shadow: var(--ay-shadow-1);
  transition: box-shadow var(--ay-transition), transform var(--ay-transition), border-color var(--ay-transition);
}

.wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: var(--ay-shadow-2);
  border-color: var(--ay-accent-light);
}

.wp-block-column h3 {
  font-size: 1.15rem !important;
  margin-top: 0 !important;
  margin-bottom: var(--ay-sp-2);
  color: var(--ay-text-strong);
}

.wp-block-column p {
  font-size: 0.95rem;
  color: var(--ay-text-muted);
  line-height: 1.65;
  margin-bottom: var(--ay-sp-2);
  max-width: none;
}

.wp-block-column p:last-child {
  margin-bottom: 0;
  margin-top: auto;
  padding-top: var(--ay-sp-1);
}

/* Empty columns (spacers) shouldn't look like cards */
.wp-block-column:empty {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.wp-block-column:empty:hover { transform: none; }

/* ==========================================================================
   SEPARATOR / DIVIDER
   ========================================================================== */

.wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--ay-border) !important;
  height: 0 !important;
  margin-top: var(--ay-sp-6) !important;
  margin-bottom: var(--ay-sp-6) !important;
  opacity: 1 !important;
}

.wp-block-separator.is-style-wide {
  border-top-color: var(--ay-accent) !important;
  border-top-width: 2px !important;
  max-width: 96px;
}

/* ==========================================================================
   TABLES — wp:table and .ay-spec-table
   ========================================================================== */

.wp-block-table {
  margin-top: var(--ay-sp-4);
  margin-bottom: var(--ay-sp-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ay-radius);
  box-shadow: var(--ay-shadow-1);
  border: 1px solid var(--ay-border);
}

.wp-block-table table {
  min-width: 560px;
}

.wp-block-table table,
.ay-spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}

.ay-spec-table {
  margin-top: var(--ay-sp-3);
  margin-bottom: var(--ay-sp-5);
  border-radius: var(--ay-radius);
  overflow: hidden;
  box-shadow: var(--ay-shadow-1);
  border: 1px solid var(--ay-border);
}

.wp-block-table thead tr {
  background: var(--ay-primary-dark);
}

.wp-block-table thead th {
  color: var(--ay-white) !important;
  font-family: var(--ay-font-heading) !important;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.9rem 1.1rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.wp-block-table tbody tr,
.ay-spec-table tr {
  border-bottom: 1px solid var(--ay-gray-100);
  transition: background-color var(--ay-transition-fast);
}

.wp-block-table tbody tr:last-child,
.ay-spec-table tr:last-child {
  border-bottom: none;
}

.wp-block-table tbody tr:nth-child(even) {
  background: var(--ay-bg-alt);
}

.wp-block-table tbody tr:hover,
.ay-spec-table tr:hover {
  background: var(--ay-accent-tint);
}

.wp-block-table td,
.wp-block-table th,
.ay-spec-table td {
  padding: 0.85rem 1.1rem;
  color: var(--ay-text);
  border-bottom: 1px solid var(--ay-gray-100);
  vertical-align: top;
}

.ay-spec-table td:first-child {
  color: var(--ay-text-muted);
  font-weight: 600;
  width: 38%;
  background: var(--ay-bg-alt);
  border-right: 1px solid var(--ay-gray-100);
}

.ay-spec-table td:last-child {
  color: var(--ay-text-strong);
  font-weight: 500;
}

/* ==========================================================================
   CONFIG GRID — .ay-config-grid / .ay-config-item
   ========================================================================== */

.ay-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ay-sp-2);
  margin-top: var(--ay-sp-2);
  margin-bottom: var(--ay-sp-5);
}

.ay-config-item {
  padding: var(--ay-sp-3);
  background: var(--ay-white);
  border: 1px solid var(--ay-border);
  border-radius: var(--ay-radius-sm);
  box-shadow: var(--ay-shadow-1);
  transition: box-shadow var(--ay-transition), transform var(--ay-transition), border-color var(--ay-transition);
}

.ay-config-item:hover {
  border-color: var(--ay-accent);
  background: var(--ay-accent-tint);
  transform: translateY(-2px);
  box-shadow: var(--ay-shadow-2);
}

.ay-config-item strong {
  display: block;
  font-family: var(--ay-font-heading);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ay-text-strong);
  margin-bottom: 0.3rem;
}

.ay-config-item span {
  display: block;
  font-size: 0.85rem;
  color: var(--ay-text-muted);
  line-height: 1.55;
}

/* ==========================================================================
   LISTS — .ay-highlights checklist + generic content lists
   ========================================================================== */

body.page > ul:not(.menu),
ul.ay-highlights {
  list-style: none;
  margin-top: 0;
  margin-bottom: var(--ay-sp-5);
}

body.page > ul:not(.menu) li,
.ay-highlights li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--ay-sp-2);
  font-size: 0.98rem;
  color: var(--ay-text);
  line-height: 1.6;
}

body.page > ul:not(.menu) li:last-child,
.ay-highlights li:last-child {
  margin-bottom: 0;
}

body.page > ul:not(.menu) li::before,
.ay-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ay-primary-tint);
  box-shadow: inset 0 0 0 1.5px var(--ay-accent);
}

body.page > ul:not(.menu) li::after,
.ay-highlights li::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 0.5em;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--ay-primary);
  border-bottom: 2px solid var(--ay-primary);
  transform: rotate(-45deg);
}

/* Ordered lists */
body.page > ol {
  counter-reset: item;
  list-style: none;
  margin-top: 0;
  margin-bottom: var(--ay-sp-5);
}

body.page > ol li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--ay-sp-2);
  font-size: 0.98rem;
  color: var(--ay-text);
  line-height: 1.6;
  counter-increment: item;
}

body.page > ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  background: var(--ay-primary);
  color: var(--ay-white);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

.wp-block-quote {
  position: relative;
  border-left: 3px solid var(--ay-accent) !important;
  background: var(--ay-bg-alt);
  padding: var(--ay-sp-4) var(--ay-sp-5) !important;
  margin-top: var(--ay-sp-5) !important;
  margin-bottom: var(--ay-sp-5) !important;
  border-radius: 0 var(--ay-radius) var(--ay-radius) 0;
}

.wp-block-quote p {
  font-family: var(--ay-font-heading);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  font-weight: 500;
  font-style: normal;
  color: var(--ay-primary) !important;
  line-height: 1.55;
  max-width: 60ch;
}

.wp-block-quote cite {
  display: block;
  margin-top: var(--ay-sp-2);
  font-family: var(--ay-font-body);
  font-size: 0.88rem;
  color: var(--ay-text-muted);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ==========================================================================
   FOOTER
   Verified against live markup:
   footer#site-footer.site-footer > .footer-inner > (.site-branding
   [.site-logo > a.custom-logo-link, p.site-description], .copyright > p)
   ========================================================================== */

/* Hello Elementor's own <footer id="site-footer"> is collapsed to zero
   height — its logo/tagline/copyright children are hidden and its padding
   removed — because the premium replacement footer (.ay-footer-band,
   injected via wp_footer in functions.php) immediately follows it and
   becomes the entire visual footer. This keeps the DOM's real <footer>
   element intact (some plugins / accessibility tooling expect it to exist)
   without rendering a redundant thin navy strip above the new one. */
.site-footer {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.site-footer .footer-inner > .site-branding,
.site-footer .footer-inner > .site-description,
.site-footer .footer-inner > .copyright,
.site-footer.footer-has-copyright .copyright {
  display: none !important;
}

/* ---- .ay-footer-band — the real footer ---- */

.ay-footer-band {
  background: var(--ay-primary-dark);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.ay-footer-band-inner {
  max-width: var(--ay-container);
  margin: 0 auto;
  padding: var(--ay-sp-6) var(--ay-gutter) var(--ay-sp-5);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--ay-sp-5);
}

.ay-footer-col h4 {
  font-family: var(--ay-font-heading);
  color: var(--ay-white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--ay-sp-2);
}

.ay-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ay-footer-col li {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.4;
}

.ay-footer-brand .ay-logo-svg svg {
  height: 38px;
  margin-bottom: var(--ay-sp-2);
}

.ay-footer-brand .ay-logo-svg svg .cls-1,
.ay-footer-brand .ay-logo-svg svg .cls-2,
.ay-footer-brand .ay-logo-svg svg path,
.ay-footer-brand .ay-logo-svg svg polygon,
.ay-footer-brand .ay-logo-svg svg circle {
  fill: var(--ay-white) !important;
}

.ay-footer-tagline {
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 var(--ay-sp-2);
  max-width: 30ch;
}

.ay-footer-badge {
  display: inline-flex;
  color: var(--ay-accent-light);
  font-family: var(--ay-font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
}

.ay-footer-band a {
  color: rgba(255,255,255,0.68) !important;
  text-decoration: none;
  transition: color var(--ay-transition-fast);
}

.ay-footer-band a:hover {
  color: var(--ay-accent-light) !important;
}

.ay-footer-bottom {
  max-width: var(--ay-container);
  margin: 0 auto;
  padding: var(--ay-sp-3) var(--ay-gutter) var(--ay-sp-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ay-sp-2);
  flex-wrap: wrap;
}

.ay-footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

.ay-footer-gealan {
  font-weight: 600;
  color: rgba(255,255,255,0.62) !important;
  letter-spacing: 0.02em;
}

/* Defensive fallback: standard WP sidebar widgets, in case a footer widget
   area is added to this template in the future. */
.site-footer .widget {
  text-align: left;
  max-width: 320px;
  margin: 0 auto var(--ay-sp-3);
}

.site-footer .widget-title {
  font-family: var(--ay-font-heading) !important;
  color: var(--ay-white) !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--ay-sp-2);
}

.site-footer .widget p,
.site-footer .widget li {
  color: rgba(255,255,255,0.68);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ==========================================================================
   TRANSLATEPRESS SWITCHER
   ========================================================================== */

.trp-language-switcher {
  margin-left: var(--ay-sp-2);
}

.trp-language-switcher .trp-ls-shortcode-current-language {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--ay-radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: var(--ay-white) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .wp-block-columns { gap: var(--ay-sp-3) !important; }
}

@media (max-width: 900px) {
  .ay-footer-band-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--ay-sp-4);
  }

  .ay-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  header.site-header .header-inner { min-height: 64px; }

  .ay-logo-svg svg { height: 36px; }

  body.page > h1.wp-block-heading:first-of-type { margin-top: var(--ay-sp-5); }

  body.page > h2.wp-block-heading,
  body.page > .ay-section > h2.wp-block-heading { margin-top: var(--ay-sp-5); }

  .wp-block-columns { flex-direction: column !important; }

  .wp-block-column { padding: var(--ay-sp-3); }

  /* Stats: 4-up desktop -> 2-up tablet (no vertical divider at this tier,
     the row/column gap already separates the pairs cleanly) */
  .ay-stats { grid-template-columns: repeat(2, 1fr); }

  .ay-stats .wp-block-column:not(:first-child) {
    border-left: none;
  }

  .ay-config-grid { grid-template-columns: 1fr 1fr; }

  .ay-split .wp-block-column { padding: 0; }

  .ay-split-img { min-height: 220px; }

  body.home > .ay-hero {
    min-height: auto;
  }

  body.home > .ay-hero .ay-hero-inner,
  body.home > .ay-hero .wp-block-cover__inner-container {
    padding-top: var(--ay-sp-7);
    padding-bottom: var(--ay-sp-6);
  }

  body.page > .ay-section,
  body.page > .ay-cta-band {
    padding-top: var(--ay-sp-6);
    padding-bottom: var(--ay-sp-6);
  }

  .wp-block-quote { padding: var(--ay-sp-3) var(--ay-sp-4) !important; }

  /* Nav CTA moves into the mobile dropdown list — no divider/pill needed */
  nav.site-navigation .menu > li.ay-nav-cta-item {
    display: none;
  }
}

@media (max-width: 640px) {
  .ay-config-grid { grid-template-columns: 1fr; }

  .wp-block-column { padding: var(--ay-sp-3) var(--ay-sp-2); }

  /* Stats: fully stacked on mobile, with a top-border divider between items */
  .ay-stats { grid-template-columns: 1fr; }

  .ay-stats .wp-block-column:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--ay-border);
  }

  .ay-product-shot img,
  .ay-ref-shot img { max-height: 280px; }

  body.page > h1.wp-block-heading { font-size: 1.85rem; }

  body.page > h2.wp-block-heading,
  body.page > .ay-section > h2.wp-block-heading,
  body.page > .ay-cta-band > h2.wp-block-heading { font-size: 1.4rem; }

  body.home > .ay-hero h1.wp-block-heading {
    font-size: 2rem;
    max-width: none;
  }

  body.home > .ay-hero p {
    font-size: 1rem;
  }

  .ay-hero-ctas .wp-block-button {
    width: 100%;
  }

  .ay-hero-ctas .wp-block-button__link {
    width: 100%;
  }

  .ay-spec-table td:first-child { width: 45%; }

  .site-footer .widget { max-width: none; }

  .ay-footer-band-inner { grid-template-columns: 1fr; }

  .ay-footer-brand { grid-column: auto; }

  .ay-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
