/*
Theme Name: Aybar Ecotechnologies
Theme URI: https://aybarecotech.com
Description: Child theme for Aybar Ecotechnologies. Deep-tech design system,
  block patterns for the three technology pillars, and self-contained SEO
  metadata output (title, description, Open Graph, JSON-LD) so the site does
  not depend on a page builder or an SEO plugin for its on-page fundamentals.
Author: Aybar Ecotechnologies
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.6
Tested up to: 6.8
License: GPL-2.0-or-later
Text Domain: aybar
*/

/* Design tokens live in theme.json. This file carries the component styles the
   block system cannot express: the pillar tiles, the rotating glow frame, the
   hero field, the diagram panels and the founder block. */

/* ==========================================================================
   Shorthands for the theme.json presets, so the rules below stay readable
   ========================================================================== */
:root {
  --ay-base: var(--wp--preset--color--base);
  --ay-base-2: var(--wp--preset--color--base-raised);
  --ay-surface: var(--wp--preset--color--surface);
  --ay-line: var(--wp--preset--color--hairline);
  --ay-line-2: var(--wp--preset--color--hairline-strong);
  --ay-dim: var(--wp--preset--color--dim);
  --ay-muted: var(--wp--preset--color--muted);
  --ay-contrast: var(--wp--preset--color--contrast);
  --ay-accent: var(--wp--preset--color--accent);
  --ay-display: var(--wp--preset--font-family--display);
  --ay-body: var(--wp--preset--font-family--body);
  --ay-mono: var(--wp--preset--font-family--mono);
  --ay-s10: var(--wp--preset--spacing--10);
  --ay-s20: var(--wp--preset--spacing--20);
  --ay-s30: var(--wp--preset--spacing--30);
  --ay-s40: var(--wp--preset--spacing--40);
  --ay-s50: var(--wp--preset--spacing--50);
  --ay-s60: var(--wp--preset--spacing--60);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ==========================================================================
   Eyebrow label
   ========================================================================== */
.aybar-eyebrow {
  font-family: var(--ay-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ay-accent);
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.aybar-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.aybar-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 300ms, border-color 300ms, backdrop-filter 300ms;
}

.aybar-header.is-stuck {
  background: color-mix(in srgb, var(--ay-base) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-color: var(--ay-line);
}

.aybar-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.aybar-logo svg { width: 26px; height: 26px; flex: none; }
.aybar-logo b {
  font-family: var(--ay-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ay-contrast);
  line-height: 1.1;
}
.aybar-logo i {
  display: block;
  font-family: var(--ay-mono);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--ay-dim);
  text-transform: uppercase;
}

/* Navigation underline grows from the left */
.aybar-header .wp-block-navigation-item__content {
  position: relative;
  text-decoration: none;
  color: var(--ay-muted);
}
.aybar-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.15rem;
  height: 1px;
  background: var(--ay-accent);
  transition: right 250ms ease;
}
.aybar-header .wp-block-navigation-item__content:hover { color: var(--ay-contrast); }
.aybar-header .wp-block-navigation-item__content:hover::after { right: 0; }

/* Hand-built nav: the link set is fixed and matches the URL map, so it does
   not depend on an editor-managed menu existing. */
.aybar-nav { display: flex; gap: var(--ay-s30); flex-wrap: wrap; }
.aybar-nav a {
  position: relative;
  color: var(--ay-muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding-block: 0.5rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.aybar-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.4rem;
  height: 1px;
  background: var(--ay-accent);
  transition: right 250ms ease;
}
.aybar-nav a:hover { color: var(--ay-contrast); }
.aybar-nav a:hover::after { right: 0; }

.aybar-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.5em;
  background: var(--ay-accent);
  color: var(--ay-base);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid var(--ay-accent);
  transition: background 200ms, color 200ms;
  white-space: nowrap;
}
.aybar-header__cta:hover { background: transparent; color: var(--ay-accent); }

.aybar-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--ay-s30);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ay-dim);
}
.aybar-foot__links { display: flex; gap: var(--ay-s20); flex-wrap: wrap; }
.aybar-foot a { color: var(--ay-dim); text-decoration: none; }
.aybar-foot a:hover { color: var(--ay-accent); }

@media (max-width: 900px) {
  .aybar-nav { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.aybar-hero { position: relative; isolation: isolate; }

.aybar-field {
  position: absolute;
  inset: -20% -5% auto -5%;
  width: 110%;
  height: 150%;
  z-index: -2;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 65% 35%, #000 5%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 65% 35%, #000 5%, transparent 72%);
}

.aybar-gridlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ay-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ay-line) 1px, transparent 1px);
  background-size: 100% 7rem, 10rem 100%;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
}

.aybar-hero h1 { max-width: 16ch; font-weight: 300; }
.aybar-hero h1 em { font-style: italic; color: var(--ay-accent); }
.aybar-lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); max-width: 56ch; }

/* Patent status badges */
.aybar-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aybar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.4em 0.9em;
  border: 1px solid var(--ay-line-2);
  border-radius: 999px;
  font-family: var(--ay-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--ay-surface) 60%, transparent);
}
.aybar-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.aybar-dot--on {
  background: var(--ay-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ay-accent) 18%, transparent);
}
.aybar-dot--wait { background: var(--ay-dim); }

/* ==========================================================================
   Rotating glow frame, shared by every card-like box
   ========================================================================== */
@property --aybar-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.aybar-glow {
  position: relative;
  isolation: isolate;
  --aybar-c: var(--ay-accent);
}

.aybar-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--aybar-a),
    transparent 0 42%,
    color-mix(in srgb, var(--aybar-c) 45%, transparent) 50%,
    var(--aybar-c) 56%,
    #ffffff 59%,
    var(--aybar-c) 62%,
    color-mix(in srgb, var(--aybar-c) 45%, transparent) 68%,
    transparent 76% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: aybar-orbit 6s linear infinite;
  opacity: 0.45;
  transition: opacity 350ms ease;
  pointer-events: none;
  z-index: 2;
}

@keyframes aybar-orbit { to { --aybar-a: 360deg; } }

.aybar-glow:hover::after,
.aybar-glow:focus-within::after { opacity: 1; animation-duration: 2.6s; }

/* Beams offset in time so the page does not pulse in unison */
.aybar-panel::after { animation-duration: 9s; animation-delay: -3s; opacity: 0.35; }
.aybar-cta::after { inset: 0; animation-duration: 8s; animation-delay: -5s; opacity: 0.4; }

@supports not (background: conic-gradient(from var(--aybar-a), red, blue)) {
  .aybar-glow::after {
    background: linear-gradient(135deg, var(--aybar-c), transparent 60%);
    animation: none;
    opacity: 0.5;
  }
}

/* ==========================================================================
   Pillar tiles
   ========================================================================== */
.aybar-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ay-s30);
}

.aybar-tile {
  display: flex;
  flex-direction: column;
  gap: var(--ay-s20);
  padding: var(--ay-s40) var(--ay-s30) var(--ay-s30);
  background: var(--ay-base-2);
  border: 1px solid var(--ay-line);
  border-radius: 8px;
  transition: background 350ms ease, transform 350ms ease, box-shadow 350ms ease;
}

.aybar-tile:hover {
  background: var(--ay-surface);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -24px color-mix(in srgb, var(--aybar-c) 70%, transparent);
}

.aybar-tile--protein { --aybar-c: var(--wp--preset--color--pillar-protein); }
.aybar-tile--laser { --aybar-c: var(--wp--preset--color--pillar-laser); }
.aybar-tile--bactericide { --aybar-c: var(--wp--preset--color--pillar-bactericide); }

.aybar-tile figure { margin: 0 0 var(--ay-s10); }
.aybar-tile svg { width: 100%; height: 104px; overflow: visible; }
.aybar-tile .aybar-num {
  font-family: var(--ay-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ay-dim);
  margin: 0;
}
.aybar-tile h3 { margin: 0; color: var(--ay-contrast); }
.aybar-tile p { font-size: 0.95rem; margin: 0; }
.aybar-tile__cta {
  margin-top: auto;
  padding-top: var(--ay-s20);
  font-family: var(--ay-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--aybar-c);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
}
.aybar-tile__cta span { transition: transform 250ms; }
.aybar-tile:hover .aybar-tile__cta span { transform: translateX(4px); }

/* Diagram motion */
.aybar-dash { stroke-dasharray: 3 5; animation: aybar-flow 3s linear infinite; }
@keyframes aybar-flow { to { stroke-dashoffset: -32; } }
.aybar-pulse { animation: aybar-pulse 2.6s ease-in-out infinite; }
@keyframes aybar-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ==========================================================================
   Metrics
   ========================================================================== */
.aybar-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--ay-s30);
}

.aybar-metric { padding: var(--ay-s30) 0; border-top: 1px solid var(--ay-line); }
.aybar-metric__value {
  display: block;
  font-family: var(--ay-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--ay-contrast);
  letter-spacing: -0.03em;
}
.aybar-metric__value i {
  font-style: normal;
  font-size: 0.5em;
  color: var(--ay-accent);
  vertical-align: 0.55em;
}
.aybar-metric__label {
  display: block;
  font-size: 0.82rem;
  color: var(--ay-dim);
  margin-top: 0.6rem;
  line-height: 1.5;
}

/* ==========================================================================
   Diagram panel and numbered steps
   ========================================================================== */
.aybar-panel {
  margin: 0;
  padding: var(--ay-s40);
  background: var(--ay-base-2);
  border: 1px solid var(--ay-line);
  border-radius: 8px;
}
.aybar-panel svg { width: 100%; height: auto; }
.aybar-panel figcaption {
  font-family: var(--ay-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ay-dim);
  margin-top: var(--ay-s20);
}

.aybar-steps { list-style: none; margin: var(--ay-s30) 0 0; padding: 0; counter-reset: s; }
.aybar-steps li {
  counter-increment: s;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: var(--ay-s20);
  font-size: 0.975rem;
}
.aybar-steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: var(--ay-mono);
  font-size: 0.7rem;
  color: var(--ay-accent);
  border: 1px solid var(--ay-line-2);
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* ==========================================================================
   Pull quote for clinical evidence
   ========================================================================== */
.aybar-proof {
  border-left: 2px solid var(--ay-accent);
  padding: var(--ay-s10) 0 var(--ay-s10) var(--ay-s30);
}
.aybar-proof q {
  font-family: var(--ay-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  color: var(--ay-contrast);
  font-weight: 300;
  line-height: 1.4;
  quotes: none;
}
.aybar-proof cite {
  display: block;
  font-style: normal;
  font-family: var(--ay-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ay-dim);
  margin-top: var(--ay-s20);
}

/* ==========================================================================
   Founder block
   ========================================================================== */
.aybar-founder {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: var(--ay-s50);
  align-items: center;
}
.aybar-founder-photo {
  margin: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ay-line);
}
.aybar-founder-photo img { display: block; width: 100%; height: auto; }
/* Bottom fade seats the photo against the page instead of a hard edge */
.aybar-founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--ay-base) 85%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--ay-accent) 10%, transparent), transparent 45%);
}
.aybar-founder-photo figcaption {
  position: absolute;
  left: var(--ay-s20);
  bottom: var(--ay-s20);
  font-family: var(--ay-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ay-muted);
  z-index: 1;
}

.aybar-facts {
  list-style: none;
  margin: var(--ay-s40) 0 var(--ay-s30);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--ay-s40);
  justify-content: start;
}
.aybar-facts li { border-left: 1px solid var(--ay-line); padding-left: var(--ay-s20); }
.aybar-facts b {
  display: block;
  font-family: var(--ay-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  color: var(--ay-contrast);
}
.aybar-facts span {
  display: block;
  font-size: 0.78rem;
  color: var(--ay-dim);
  margin-top: 0.45rem;
  max-width: 16ch;
  line-height: 1.45;
}

/* ==========================================================================
   Comparison tables scroll in their own box, never the page
   ========================================================================== */
.aybar-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aybar-compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
}
.aybar-compare caption {
  text-align: left;
  font-family: var(--ay-mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ay-accent);
  padding-bottom: var(--ay-s20);
}
.aybar-compare th,
.aybar-compare td {
  text-align: left;
  padding: 0.85em 1em;
  border-bottom: 1px solid var(--ay-line);
  vertical-align: top;
}
.aybar-compare thead th {
  font-family: var(--ay-mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ay-dim);
}
.aybar-compare tbody th { font-weight: 400; }
.aybar-compare tbody td:first-of-type { color: var(--ay-contrast); font-weight: 500; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.aybar-breadcrumbs { font-size: var(--wp--preset--font-size--small); color: var(--ay-dim); }
.aybar-breadcrumbs a { color: inherit; }
.aybar-breadcrumbs a:hover { color: var(--ay-accent); }

/* ==========================================================================
   Scroll reveal. Elements only start hidden once JS confirms it can reveal
   them, so a blocked script never leaves a blank page.
   ========================================================================== */
.aybar-rv-ready .aybar-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.aybar-rv-ready .aybar-rv.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Tap targets, per the technical SEO checklist
   ========================================================================== */
.wp-block-button__link,
.wp-block-navigation-item__content { min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   Live-review corrections (folded in from overrides.css)
   ========================================================================== */
/* 1. The front page prints the page title "Home" above the hero, which both
      duplicates the hero H1 and breaks the layout. Block themes render it
      from the template, so it is suppressed here. */
/* Every page's content supplies its own H1 from the SEO kit, so the
   template-rendered title is always a duplicate. Left visible it produced two
   H1s per page, which is both a layout problem and an on-page SEO one. */
.wp-singular .wp-block-post-title {
  display: none;
}

/* 2. The interference field was tuned against a shorter hero. Full-width and
      full-height it overpowers the copy, so it is dimmed and a scrim is laid
      between the field and the text to hold contrast. */
.aybar-field {
  /* Tuned down twice: the field reads much stronger stretched across a
     full-width hero than it did in the constrained preview. */
  opacity: 0.18;
}

.aybar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      var(--wp--preset--color--base) 0%,
      color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent) 46%,
      color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 78%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 60%,
      var(--wp--preset--color--base) 100%
    );
}

/* 3. Keep the hero copy above both layers. */
.aybar-hero > * {
  position: relative;
  z-index: 1;
}

/* 4. The full-width hero needs its inner content aligned to the same gutter
      as the rest of the page. */
.aybar-hero.alignfull {
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

/* 5. Constrained layout caps every direct child at contentSize (740px), which
      squeezed the tile grid, the mechanism columns and the founder block into
      a narrow column. These three are the wide-format blocks; the prose
      around them should stay narrow, so they are widened individually rather
      than by loosening the layout. */
.wp-block-group.alignwide > .aybar-tiles,
.wp-block-group.alignwide > .aybar-mech,
.wp-block-group.alignwide > .aybar-founder {
  max-width: var(--wp--style--global--wide-size);
}

/* 6. The interference field is deliberately wider than the viewport (110% with
      a negative inset) so its mask fades off-screen. On a phone that pushed
      the document 19px wider than the viewport and produced sideways scroll,
      which the technical SEO checklist forbids. Clip it at the hero. */
.aybar-hero {
  overflow: hidden;
}

/* 7. On a phone the hero's 9rem top padding pushed the headline most of a
      screen down, so the first thing a visitor saw was empty field. */
@media (max-width: 781px) {
  .aybar-hero {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
  }
}

/* 8. The header bar sat flush against the viewport edge on narrow screens. */
.aybar-header .wp-block-group {
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

/* 9. THE HERO BUG.
      Measured at a 1920px viewport: .aybar-hero was 1905px wide, but the
      canvas and the grid overlay were only 740px, sitting as a narrow strip in
      the middle. Cause: WordPress's constrained layout applies
      `max-width: <content-size>` to EVERY direct child via a :where() rule.
      The canvas is a background layer, not content, so it must opt out.
      Same for the hero's own content, which belongs at wide size, not at the
      740px reading measure meant for body copy. */
.aybar-hero > .aybar-field,
.aybar-hero > .aybar-gridlines {
  max-width: none;
  width: 110%;
}

.aybar-hero {
  --wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/* 10. The opacity in rule 2 was losing to style.css, which declares 0.55 at
       the same specificity and is enqueued after the global stylesheet. Raised
       specificity rather than reaching for !important. */
.aybar-hero > .aybar-field {
  opacity: 0.2;
}

/* 11. Constrained layout centres any child narrower than the container, so
       once the hero was widened to 1240 the headline and lede floated to the
       middle while the eyebrow, buttons and badges stayed left. Everything in
       the hero aligns to the same left edge. */
.aybar-hero > .wp-block-heading,
.aybar-hero > h1,
.aybar-hero > .aybar-lede {
  /* !important is required here, not preferred: WordPress's own constrained
     layout rule declares `margin-left: auto !important`, so nothing short of
     !important can left-align a child that is narrower than the container. */
  /* Align to the left edge of the 1240px column the rest of the hero sits in,
     not to the viewport edge. The percentage resolves against the hero's
     content box, and max() keeps it at 0 once the viewport is narrower than
     the column. */
  margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-right: 0 !important;
}

/* 12. Twenty Twenty-Five's page template adds 104px of padding, a 104px
       margin and a 24px content margin before the first block: sensible for a
       text page, wrong for a front page whose first block is a full-bleed
       hero. It pushed the headline 314px down the screen, which on a phone
       meant the visitor opened the site to an empty band. Scoped to the home
       page so interior pages keep their normal spacing. */
/* !important because the parent theme emits these as inline styles on the
   block, which nothing else can outrank. */
.home .wp-site-blocks > .wp-block-group,
.home .wp-site-blocks > .wp-block-group > .wp-block-group {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home .wp-block-post-content {
  margin-top: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .aybar-tiles { grid-template-columns: 1fr; }
  .aybar-founder { grid-template-columns: 1fr; gap: var(--ay-s30); }
  .aybar-founder-photo { max-width: 380px; }
  .aybar-facts { gap: var(--ay-s30); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aybar-rv-ready .aybar-rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}