/**
 * Design system — the shared premium primitive layer.
 *
 * Ported from the React source of truth (src/styles.css, Phase 10 "PRODUCT
 * EXPERIENCE — luxury catalogue layer"). These are the primitives every page
 * shares: the two button families, the catalogue card, the spec card, the
 * editorial gallery shot, section ambience, chips and breadcrumbs, plus the
 * Ayat Food section badge.
 *
 * Loaded site-wide, immediately after tokens.css and before main.css, so an
 * interior page gets the same interaction language as the homepage without
 * pulling in home.css. home.css still carries its own copy of
 * .ipek-btn-premium and wins on the front page purely by cascade order — the
 * two are the same rules, so nothing shifts either way.
 *
 * Everything animates transform/opacity only, so it stays on the compositor,
 * and every motion rule is switched off under prefers-reduced-motion at the
 * bottom of this file.
 *
 * @package Ayat_Food
 * @since   1.4.0
 */

/* ══════════════════════════════════════════════════════════════════
   1. Buttons
   ══════════════════════════════════════════════════════════════════ */

/* Shared focus ring for every interactive control — keyboard users get the
   same brand halo everywhere instead of the UA outline. */
.lux-btn:focus-visible,
.lux-chip:focus-visible,
.ipek-btn:focus-visible,
.ipek-btn-premium:focus-visible,
.ipek-btn-wipe:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--ipek-background, #fff),
		0 0 0 4px rgba(218, 41, 42, 0.55),
		0 18px 44px -22px rgba(179, 18, 23, 0.6);
}

/* On dark surfaces the white inner ring would glow; use the surface colour. */
.lux-btn--dark:focus-visible {
	box-shadow:
		0 0 0 2px #0a0a0a,
		0 0 0 4px rgba(226, 192, 141, 0.7);
}

/* Google Fonts load via <link id=ipekci-google-fonts> (enqueue.php) — do not
   @import here: this file is concatenated/inlined after other rules, and
   Tailwind @import/@theme are not valid in the browser. */

/* Color / radius aliases (were inside ignored Tailwind @theme) */
:root {
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 6px);
  --radius-2xl: calc(var(--radius) + 10px);
  --radius-3xl: calc(var(--radius) + 14px);
  --radius-4xl: calc(var(--radius) + 18px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-ring-offset-background: var(--background);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-elevated);
  --color-gold: var(--gold);
  --color-gold-soft: var(--gold-soft);
  --color-blood: var(--blood);
  --color-blood-glow: var(--blood-glow);
  --color-charcoal: var(--charcoal);
  --color-charcoal-2: var(--charcoal-2);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Outfit", system-ui, sans-serif;
}

:root {
  --radius: 0.125rem;

  /* Ayat Food — official red premium identity (ayatfood.nl) */
  --background: #0a0a0a;
  --foreground: #f7f4ee;

  --surface: #111111;
  --surface-elevated: #1a1a1a;

  --card: #161616;
  --card-foreground: #f7f4ee;
  --popover: #161616;
  --popover-foreground: #f7f4ee;

  --primary: #da292a;
  --primary-foreground: #ffffff;

  --secondary: #f7f4ee;
  --secondary-foreground: #141414;

  --muted: #1a1a1a;
  --muted-foreground: #d9d4ce;

  --accent: #e8c48a;
  --accent-foreground: #141414;

  --gold-primary: #e8c48a;
  --gold-secondary: #c9a46b;
  --gold-bronze: #9e6f3d;
  --gold-champagne: #f0d7a8;
  --gold: oklch(0.84 0.1 78);
  --gold-soft: oklch(0.72 0.09 75);
  --blood: oklch(0.55 0.2 25);
  --blood-glow: oklch(0.62 0.22 25);
  --charcoal: oklch(0.14 0.008 30);
  --charcoal-2: oklch(0.1 0.006 30);
  --ayat-red: #da292a;
  --ayat-red-deep: #b01e20;
  --ayat-red-rich: #ef3b3c;
  --cream: #f7f4ee;
  --gradient-cinematic:
    radial-gradient(ellipse at 50% 40%, oklch(0.28 0.06 25 / 0.35) 0%, transparent 62%),
    radial-gradient(ellipse at 28% 52%, oklch(0.24 0.05 22 / 0.4) 0%, transparent 58%),
    radial-gradient(ellipse at 72% 76%, oklch(0.48 0.18 25 / 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 100%, oklch(0.84 0.1 78 / 0.07) 0%, transparent 46%),
    linear-gradient(180deg, oklch(0.14 0.008 30) 0%, oklch(0.18 0.01 28) 48%, oklch(0.16 0.008 30) 100%);
  --shadow-luxury:
    0 30px 80px -20px oklch(0 0 0 / 0.7),
    0 0 60px -10px oklch(0.55 0.2 25 / 0.2);
  --shadow-glow-gold: 0 0 40px oklch(0.84 0.1 78 / 0.25);
  --shadow-glow-blood: 0 0 30px oklch(0.55 0.2 25 / 0.5);

  --destructive: oklch(0.6 0.22 25);
  --destructive-foreground: oklch(0.97 0.005 80);

  --border: color-mix(in oklab, white 10%, transparent);
  --input: color-mix(in oklab, white 14%, transparent);
  --ring: var(--primary);

  --sidebar: #161616;
  --sidebar-foreground: #f7f4ee;
  --sidebar-primary: #da292a;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1d1d1d;
  --sidebar-accent-foreground: #f7f4ee;
  --sidebar-border: color-mix(in oklab, white 10%, transparent);
  --sidebar-ring: var(--primary);

  /* ── Ayat Food design system ── */
  /* ── Motion ──────────────────────────────────────────────────────
     One easing and one duration scale for the whole site. `ui` is the
     default for anything a pointer touches (buttons, links, chips,
     dropdowns, form controls) and sits in the 220–320ms band that reads
     as responsive without feeling abrupt. Reveals and cinematic moments
     keep their longer values — those are narrative, not feedback. */
--ipek-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ipek-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ipek-ease-reveal: var(--ipek-ease-out);
  --ipek-duration-instant: 120ms;
  --ipek-duration-ui: 260ms;
  --ipek-duration-ui-slow: 320ms;
  --ipek-duration-reveal: 650ms;
  --ipek-duration-slow: 900ms;
  --ipek-stagger: 90ms;

  /* ── Layout ──────────────────────────────────────────────────────
     The homepage HERO is the reference: 1480px of content with a
     24/40/56/64px gutter. Every page, every section, the navbar and the
     footer share these, so the hero, a heading, a card grid and a footer
     column all begin on exactly the same vertical line. */
  --ipek-container: 1480px;
  --ipek-gutter: 1.5rem;
  --ipek-gutter-sm: 2.5rem;
  --ipek-gutter-lg: 3.5rem;
  --ipek-gutter-xl: 4rem;

  --ipek-section-y: clamp(5rem, 10vw, 7.5rem);
  --ipek-section-y-lg: clamp(6.5rem, 11vw, 9rem);
  --ipek-stack-sm: 1rem;
  --ipek-stack-md: 1.5rem;
  --ipek-stack-lg: 2rem;
  --ipek-stack-xl: 2.5rem;

  /* ── Radii ───────────────────────────────────────────────────────
     Buttons were shipping five different radii (18 / 9999 / 12 / 14 /
     10px). One scale now: `btn` for standard controls, `btn-sm` for
     compact/inline ones. Cards and panels keep their own softer radii. */
  --ipek-radius-btn: 14px;
  --ipek-radius-btn-sm: 12px;
  --ipek-radius-card: 26px;
  --ipek-radius-panel: 28px;

  --ipek-text-hero: clamp(3.25rem, 5.8vw, 6.25rem);
  --ipek-text-h1: clamp(2.4rem, 4.2vw, 3.85rem);
  --ipek-text-h2: clamp(1.5rem, 2.4vw, 2.15rem);
  --ipek-text-h2-lg: clamp(1.5rem, 2.4vw, 2.15rem);
  --ipek-text-h3: clamp(1.85rem, 2.8vw, 3.35rem);
  --ipek-text-sub: clamp(1.2rem, 2.2vw, 1.65rem);
  --ipek-text-body: 0.9375rem;
  --ipek-text-body-sm: 0.875rem;
  --ipek-text-label: 0.625rem;
  --ipek-text-meta: 0.6875rem;
  --ipek-tracking-label: 0.34em;
  --ipek-tracking-meta: 0.28em;
  --ipek-tracking-btn: 0.22em;
  --ipek-leading-display: 1.02;
  --ipek-leading-body: 1.7;

  --ipek-shadow-card:
    0 1px 0 color-mix(in oklab, white 6%, transparent) inset,
    0 28px 80px -48px oklch(0 0 0 / 0.55);
  --ipek-shadow-card-hover:
    0 1px 0 color-mix(in oklab, white 8%, transparent) inset,
    0 36px 100px -44px oklch(0 0 0 / 0.62);
  --ipek-border-card: color-mix(in oklab, white 10%, transparent);
}

.dark {
  --background: #111111;
  --foreground: #f5f1eb;
}

/* Unlayered — must beat the :root defaults above (layered @media :root loses). */
@media (max-width: 767px) {
  :root {
    --ipek-gutter: 1.125rem;
    --ipek-section-y: clamp(2.5rem, 6.5vw, 3.5rem);
    --ipek-section-y-lg: clamp(3rem, 7vw, 4rem);
    --ipek-stack-md: 1rem;
    --ipek-stack-lg: 1.25rem;
    --ipek-radius-card: 18px;
    --ipek-radius-panel: 20px;
    --ipek-text-hero: clamp(2rem, 8.5vw, 2.75rem);
    --ipek-text-h1: clamp(1.65rem, 6.4vw, 2.2rem);
    --ipek-text-h2: clamp(1.3rem, 4.8vw, 1.65rem);
    --ipek-text-h2-lg: clamp(1.3rem, 4.8vw, 1.65rem);
    --ipek-text-h3: clamp(1.4rem, 5.2vw, 1.85rem);
    --ipek-text-sub: clamp(1rem, 3.6vw, 1.2rem);
    --ipek-text-body: 0.9375rem;
    --ipek-leading-body: 1.62;
    --ipek-tracking-label: 0.28em;
    --ipek-tracking-btn: 0.2em;
  }
}

@media (max-width: 359px) {
  :root {
    --ipek-gutter: 1rem;
  }
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  html {
    scroll-behavior: auto;
    overscroll-behavior-y: none;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    width: 100%;
    overflow-x: hidden;
  }

  #root {
    width: 100%;
    overflow-x: clip;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.98;
    text-wrap: balance;
  }

  ::selection {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
  }

  /* Premium tap feedback — no default grey flash */
  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .glass {
    background: color-mix(in oklab, var(--background) 55%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid color-mix(in oklab, white 8%, transparent);
  }

  .bg-cinematic {
    background: var(--gradient-cinematic);
  }

  .bg-grain {
    background-image: radial-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px);
    background-size: 3px 3px;
  }

  .text-gold {
    color: var(--gold);
  }

  .text-blood {
    color: var(--blood);
  }

  .shadow-luxury {
    box-shadow: var(--shadow-luxury);
  }

  .bg-charcoal-2 {
    background-color: var(--charcoal-2);
  }

  .bg-blood {
    background-color: var(--blood);
  }

  .shadow-glow-gold {
    box-shadow: var(--shadow-glow-gold);
  }

  .shadow-glow-blood {
    box-shadow: var(--shadow-glow-blood);
  }

  .glass-panel {
    background: linear-gradient(
      135deg,
      oklch(0.2 0.01 30 / 0.75) 0%,
      oklch(0.14 0.008 30 / 0.85) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid oklch(0.82 0.13 78 / 0.18);
  }

  .grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .hairline {
    border-color: color-mix(in oklab, white 10%, transparent);
  }

  .text-gradient-orange {
    background: linear-gradient(
      135deg,
      var(--gold-champagne) 0%,
      var(--gold-primary) 40%,
      var(--gold-bronze) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .marquee {
    animation: marquee 40s linear infinite;
  }

  .animate-pulse-glow {
    animation: pulse-glow 2.2s ease-in-out infinite;
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  @keyframes pulse-glow {
    0%,
    100% {
      box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gold-champagne) 30%, transparent),
        0 0 16px -10px color-mix(in oklab, var(--primary) 65%, transparent);
    }

    50% {
      box-shadow:
        0 0 0 1px color-mix(in oklab, var(--gold-champagne) 55%, transparent),
        0 0 26px -10px color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }

  .reveal-up {
    animation: reveal-up var(--ipek-duration-reveal) var(--ipek-ease) both;
  }

  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Typography ── */
  .ipek-hero {
    font-family: var(--font-display);
    font-size: var(--ipek-text-hero);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

  .ipek-h1 {
    font-family: var(--font-display);
    font-size: var(--ipek-text-h1);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

  .ipek-h2 {
    font-family: var(--font-display);
    font-size: var(--ipek-text-h2);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .ipek-h2-lg {
    font-family: var(--font-display);
    font-size: var(--ipek-text-h2-lg);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .ipek-h3 {
    font-family: var(--font-display);
    font-size: var(--ipek-text-h3);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }

  .ipek-subhead {
    font-family: var(--font-display);
    font-size: var(--ipek-text-sub);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .ipek-body {
    font-family: var(--font-sans);
    font-size: var(--ipek-text-body);
    line-height: var(--ipek-leading-body);
    text-wrap: pretty;
  }

  .ipek-body-sm {
    font-family: var(--font-sans);
    font-size: var(--ipek-text-body-sm);
    line-height: 1.65;
    text-wrap: pretty;
  }

  .ipek-label {
    font-family: var(--font-sans);
    font-size: var(--ipek-text-label);
    font-weight: 600;
    letter-spacing: var(--ipek-tracking-label);
    text-transform: uppercase;
    line-height: 1.5;
  }

  .ipek-heading-accent {
    background-image: linear-gradient(90deg, #ef3b3c 0%, #da292a 50%, #b01e20 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
  }

  .ipek-hero-halalvlees {
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    padding-right: 0.12em;
    font-size: clamp(2.05rem, 4.35vw, 3.55rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0.018em;
    background-image: linear-gradient(
      102deg,
      #ffffff 0%,
      #f7f4ee 22%,
      #f0d7a8 55%,
      #e8c48a 78%,
      #da292a 132%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(226, 192, 141, 0.12);
  }

  .ipek-hero-halalvlees::after {
    content: "";
    display: block;
    width: min(100%, 11.5rem);
    height: 1px;
    margin-top: 0.35em;
    background: linear-gradient(
      90deg,
      rgba(218, 41, 42, 0.85) 0%,
      rgba(226, 192, 141, 0.55) 48%,
      transparent 100%
    );
    transform-origin: left center;
    animation: ipek-hero-word-rule 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
  }

  @keyframes ipek-hero-word-rule {
    from {
      transform: scaleX(0);
      opacity: 0;
    }
    to {
      transform: scaleX(1);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ipek-hero-halalvlees::after {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .ipek-heading-label {
    color: var(--primary);
  }

  .ipek-meta {
    font-family: var(--font-sans);
    font-size: var(--ipek-text-meta);
    font-weight: 600;
    letter-spacing: var(--ipek-tracking-meta);
    text-transform: uppercase;
    line-height: 1.5;
  }

  /* ── Container ──────────────────────────────────────────────────
     The single content column. Interior pages used to sit at 1200px
     while the homepage and footer sat at 1320px, so moving between them
     made the content visibly jump. One utility now, used by every page
     shell plus the navbar and footer, so every left edge aligns. */
  .ipek-container {
    width: 100%;
    max-width: var(--ipek-container);
    margin-inline: auto;
    padding-inline: var(--ipek-gutter);
  }

  @media (min-width: 640px) {
    .ipek-container {
      padding-inline: var(--ipek-gutter-sm);
    }
  }

  @media (min-width: 1024px) {
    .ipek-container {
      padding-inline: var(--ipek-gutter-lg);
    }
  }

  @media (min-width: 1280px) {
    .ipek-container {
      padding-inline: var(--ipek-gutter-xl);
    }
  }

  /*
   * Homepage section inners — same column as .ipek-container (React source
   * of truth). Every left edge aligns: navbar, hero, trust, meat, over-ons,
   * speerpunten, assortiment, voor-wie, eindproducten, footer.
   */
  .ipekci-story__inner,
  .ipekci-assortiment__inner,
  .ipekci-voorwie__inner,
  .ipekci-speerpunten__inner,
  .ipekci-eindproducten__inner {
    width: 100%;
    max-width: var(--ipek-container);
    margin-inline: auto;
    padding-inline: var(--ipek-gutter);
  }

  @media (min-width: 640px) {
    .ipekci-story__inner,
    .ipekci-assortiment__inner,
    .ipekci-voorwie__inner,
    .ipekci-speerpunten__inner,
    .ipekci-eindproducten__inner {
      padding-inline: var(--ipek-gutter-sm);
    }
  }

  @media (min-width: 1024px) {
    .ipekci-story__inner,
    .ipekci-assortiment__inner,
    .ipekci-voorwie__inner,
    .ipekci-speerpunten__inner,
    .ipekci-eindproducten__inner {
      padding-inline: var(--ipek-gutter-lg);
    }
  }

  @media (min-width: 1280px) {
    .ipekci-story__inner,
    .ipekci-assortiment__inner,
    .ipekci-voorwie__inner,
    .ipekci-speerpunten__inner,
    .ipekci-eindproducten__inner {
      padding-inline: var(--ipek-gutter-xl);
    }
  }

  /* Full-bleed sections that paint their own background still need the
     inner column; this pairs `.ipek-section` (vertical) with the
     horizontal gutter without needing px-6 lg:px-10 on every section. */
  .ipek-bleed {
    padding-inline: var(--ipek-gutter);
  }

  @media (min-width: 640px) {
    .ipek-bleed {
      padding-inline: var(--ipek-gutter-sm);
    }
  }

  @media (min-width: 1024px) {
    .ipek-bleed {
      padding-inline: var(--ipek-gutter-lg);
    }
  }

  @media (min-width: 1280px) {
    .ipek-bleed {
      padding-inline: var(--ipek-gutter-xl);
    }
  }

  /* ── Section rhythm ── */
  .ipek-section {
    padding-top: var(--ipek-section-y);
    padding-bottom: var(--ipek-section-y);
  }

  .ipek-section-lg {
    padding-top: var(--ipek-section-y-lg);
    padding-bottom: var(--ipek-section-y-lg);
  }

  /* ── Buttons ── */
  .ipek-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--ipek-radius-btn);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--ipek-tracking-btn);
    text-transform: uppercase;
    line-height: 1;
    transition:
      transform var(--ipek-duration-ui) var(--ipek-ease),
      box-shadow var(--ipek-duration-ui) var(--ipek-ease),
      border-color var(--ipek-duration-ui) var(--ipek-ease),
      color var(--ipek-duration-ui) var(--ipek-ease);
  }

  .ipek-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translateX(-102%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }

  .ipek-btn > * {
    position: relative;
    z-index: 1;
  }

  .ipek-btn:active {
    transform: translateY(1px) scale(0.985);
  }

  .ipek-btn-icon {
    transition: transform var(--ipek-duration-ui) var(--ipek-ease);
  }

  .group:hover .ipek-btn-icon,
  .ipek-btn:hover .ipek-btn-icon {
    transform: translate(2px, -2px);
  }

  .ipek-btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid color-mix(in oklab, var(--primary) 80%, transparent);
    box-shadow: 0 0 30px -16px color-mix(in oklab, var(--primary) 70%, transparent);
  }

  .ipek-btn-primary::before {
    background: linear-gradient(
      120deg,
      #e2c08d 0%,
      #c6a062 42%,
      #9a6b22 100%
    );
  }

  .ipek-btn-primary:hover {
    color: #141414;
    border-color: rgba(198, 160, 98, 0.65);
    box-shadow:
      0 0 44px -12px rgba(198, 160, 98, 0.45),
      0 12px 36px -16px rgba(177, 18, 23, 0.25);
  }

  .ipek-btn-primary:hover::before {
    transform: translateX(0);
  }

  .ipek-btn-ghost {
    border: 1px solid color-mix(in oklab, white 18%, transparent);
    background: color-mix(in oklab, black 40%, transparent);
    color: color-mix(in oklab, var(--foreground) 90%, transparent);
  }

  .ipek-btn-ghost::before {
    background: linear-gradient(
      120deg,
      #ef3b3c 0%,
      var(--primary) 50%,
      #b01e20 100%
    );
  }

  .ipek-btn-ghost:hover {
    color: var(--primary-foreground);
    border-color: color-mix(in oklab, var(--primary) 55%, transparent);
    box-shadow: 0 0 40px -14px color-mix(in oklab, var(--primary) 65%, transparent);
  }

  .ipek-btn-ghost:hover::before {
    transform: translateX(0);
  }

/* ==========================================================================
   Premium button — site-wide (React: .ipek-btn-premium in src/styles.css).
   Must live in design-system so interior pages get styled CTAs without home.css.
   ========================================================================== */

.ipek-btn-premium {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	/* React PrimaryLinkButton: px-7 py-3.5 (Tailwind on the element) */
	padding: 0.875rem 1.75rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(135deg, #ef3b3c 0%, #da292a 48%, #b01e20 100%);
	color: #ffffff;
	font-family: var(--ipek-font-sans, var(--font-sans));
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.12) inset,
		0 18px 44px -22px rgba(179, 18, 23, 0.65);
	transition:
		transform 0.55s var(--ipek-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow 0.55s var(--ipek-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color 0.45s ease;
}

@media (min-width: 640px) {
	.ipek-btn-premium {
		/* React: sm:px-9 sm:py-4 sm:text-[12px] */
		padding: 1rem 2.25rem;
		font-size: 12px;
	}
}

.ipek-btn-premium__label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

.ipek-btn-premium::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.22) 50%, transparent 68%);
	transform: translateX(-130%);
	transition: transform 0.75s var(--ipek-ease, cubic-bezier(0.16, 1, 0.3, 1));
	pointer-events: none;
}

.ipek-btn-premium::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, #e8181e 0%, #c41419 45%, #9a1014 100%);
	opacity: 0;
	transition: opacity 0.5s var(--ipek-ease, cubic-bezier(0.16, 1, 0.3, 1));
	pointer-events: none;
}

.ipek-btn-premium:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.28);
	color: #ffffff;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.18) inset,
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 24px 56px -18px rgba(179, 18, 23, 0.72);
}

.ipek-btn-premium:hover::before {
	transform: translateX(130%);
}

.ipek-btn-premium:hover::after {
	opacity: 1;
}

.ipek-btn-premium > * {
	position: relative;
	z-index: 1;
}

.ipek-btn-premium__arrow,
.ipek-btn-premium svg {
	transition: transform 0.55s var(--ipek-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.ipek-btn-premium:hover .ipek-btn-premium__arrow,
.ipek-btn-premium:hover svg {
	transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
	.ipek-btn-premium,
	.ipek-btn-premium::before,
	.ipek-btn-premium svg {
		transition-duration: 0.01s !important;
	}

	.ipek-btn-premium:hover {
		transform: none;
	}
}

  
/**
 * .lux-btn — the quiet counterpart to .ipek-btn-premium.
 * A hairline outline that fills with brand gold on hover while the label
 * flips to near-black. Works on both light and dark surfaces via the
 * --lux-btn-* custom properties.
 */
.lux-btn {
	--lux-btn-fg: #3d3d3d;
	--lux-btn-fg-hover: #111;
	--lux-btn-border: rgba(198, 160, 98, 0.45);
	--lux-btn-border-hover: rgba(198, 160, 98, 0.85);
	--lux-btn-fill: rgba(226, 192, 141, 0.95);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	border-radius: var(--ipek-radius-btn);
	border: 1px solid var(--lux-btn-border);
	padding: 0.8rem 1.4rem;
	font-family: var(--ipek-font-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lux-btn-fg);
	background: transparent;
	text-decoration: none;
	transition:
		color var(--ipek-duration-ui) var(--ipek-ease),
		border-color var(--ipek-duration-ui) var(--ipek-ease),
		transform var(--ipek-duration-ui) var(--ipek-ease),
		box-shadow var(--ipek-duration-ui) var(--ipek-ease);
}

.lux-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--lux-btn-fill);
	transform: translateX(-118%) skewX(-8deg) scaleX(1.1);
	transform-origin: left center;
	transition: transform var(--ipek-duration-reveal) var(--ipek-ease-out);
}

.lux-btn:hover {
	color: var(--lux-btn-fg-hover);
	border-color: var(--lux-btn-border-hover);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -24px rgba(179, 18, 23, 0.4);
}

.lux-btn:hover::before {
	transform: translateX(0) skewX(-8deg) scaleX(1.1);
}

.lux-btn:active:not([disabled]) {
	transform: translateY(0) scale(0.985);
	transition-duration: 0.12s;
}

.lux-btn[disabled],
.lux-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
	transform: none;
	box-shadow: none;
}

.lux-btn[disabled]::before,
.lux-btn[aria-disabled="true"]::before {
	transform: translateX(-118%) skewX(-8deg) scaleX(1.1);
}

/* Dark-surface variant */
.lux-btn--dark {
	--lux-btn-fg: rgba(255, 255, 255, 0.82);
	--lux-btn-fg-hover: #0a0a0a;
	--lux-btn-border: rgba(226, 192, 141, 0.35);
	--lux-btn-border-hover: rgba(226, 192, 141, 0.8);
}

/* The arrow inside any luxury button travels on hover. */
.lux-btn__arrow,
.lux-arrow,
.lux-btn .ipekci-page-icon {
	transition: transform var(--ipek-duration-ui) var(--ipek-ease);
}

.lux-btn:hover .lux-btn__arrow,
.lux-btn:hover .ipekci-page-icon {
	transform: translate(3px, -3px);
}

/*
 * Paired hero/CTA button row. Mirrors src/components/ui/DualCtaRow.tsx and the
 * .ipek-dual-cta rules in src/styles.css.
 *
 * Mobile-first, and deliberately a grid rather than a wrapping flex row: two
 * full-width stacked buttons ate ~100px of a 844px phone viewport and pushed the
 * hero's showcase card below the fold. A 50/50 grid keeps both CTAs on one line
 * and reads like a native app's action bar. From 640px up it relaxes into the
 * ordinary horizontal button row the desktop design was approved with.
 */
.ipek-dual-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.5rem;
	width: 100%;
	max-width: 100%;
}

.ipek-dual-cta > * {
	min-width: 0;
}

.ipek-dual-cta--center {
	margin-inline: auto;
}

/* Retained spelling from the first port; both resolve to the same behaviour. */
.ipek-dual-cta--centered {
	justify-content: center;
}

@media (max-width: 639px) {
	.ipek-dual-cta .ipekci-hero-cta,
	.ipek-dual-cta .hero-cta,
	.ipek-dual-cta .ipek-btn-premium,
	.ipek-dual-cta .ipek-btn-ghost,
	.ipek-dual-cta .lux-btn,
	.ipek-dual-cta .ipek-btn,
	.ipek-dual-cta .ipekci-vac__secondary-cta,
	.ipek-dual-cta .ipekci-vac-hero__ghost {
		display: inline-flex;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.5rem 0.375rem;
		font-size: 8px;
		letter-spacing: 0.08em;
		line-height: 1.25;
		gap: 0.25rem;
		justify-content: center;
		align-items: center;
		text-align: center;
		white-space: normal;
	}

	.ipek-dual-cta .ipekci-hero-cta svg,
	.ipek-dual-cta .hero-cta svg,
	.ipek-dual-cta .ipek-btn-premium svg,
	.ipek-dual-cta .ipek-btn-ghost svg,
	.ipek-dual-cta .lux-btn svg,
	.ipek-dual-cta .ipek-btn svg,
	.ipek-dual-cta .ipekci-vac__secondary-cta svg,
	.ipek-dual-cta .ipekci-vac-hero__ghost svg {
		width: 11px;
		height: 11px;
		flex-shrink: 0;
	}

	.ipek-dual-cta .hero-cta svg,
	.ipek-dual-cta .ipekci-hero-cta .ipekci-hero-icon--arrow-right {
		display: none;
	}
}

@media (max-width: 359px) {
	.ipek-dual-cta .ipekci-hero-cta,
	.ipek-dual-cta .hero-cta,
	.ipek-dual-cta .ipek-btn-premium,
	.ipek-dual-cta .ipek-btn-ghost,
	.ipek-dual-cta .lux-btn,
	.ipek-dual-cta .ipek-btn {
		font-size: 7.5px;
		letter-spacing: 0.06em;
	}
}

@media (min-width: 640px) {
	.ipek-dual-cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem 1rem;
		width: auto;
		max-width: none;
	}
}

/* ══════════════════════════════════════════════════════════════════
   2. Category / product cards
   ══════════════════════════════════════════════════════════════════ */

/**
 * .lux-card — the catalogue card.
 * Lift + a whisper of rotation on hover, an inner image that scales
 * independently, a border that lights up, and a CTA row that slides in.
 * The rotation is deliberately tiny (0.45deg): enough to feel alive,
 * never enough to read as a gimmick.
 */
.lux-card {
	position: relative;
	isolation: isolate;
	transform-style: preserve-3d;
	transition:
		transform 0.75s var(--ipek-ease),
		box-shadow 0.75s var(--ipek-ease),
		border-color 0.6s ease;
	will-change: transform;
}

.lux-card__media img {
	transition: transform 1.35s var(--ipek-ease-out);
	will-change: transform;
}

/* Border glow — a masked ring that fades in, so no layout shift. */
.lux-card__glow {
	position: absolute;
	inset: -1px;
	z-index: 3;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(226, 192, 141, 0.75),
		rgba(218, 41, 42, 0.45) 45%,
		transparent 75%
	);
	-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;
	opacity: 0;
	transition: opacity 0.6s var(--ipek-ease);
	pointer-events: none;
}

.lux-card__cta {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.5s var(--ipek-ease),
		transform 0.5s var(--ipek-ease);
}

.lux-card__sheen {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	background: linear-gradient(
		105deg,
		transparent 35%,
		rgba(255, 255, 255, 0.14) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) {
	.lux-card:hover,
	.lux-card:focus-within {
		transform: translateY(-8px) rotate(-0.45deg);
		box-shadow: 0 48px 110px -46px rgba(0, 0, 0, 0.4);
	}

	.lux-card:hover .lux-card__media img,
	.lux-card:focus-within .lux-card__media img {
		transform: scale(1.07);
	}

	.lux-card:hover .lux-card__glow,
	.lux-card:focus-within .lux-card__glow {
		opacity: 1;
	}

	.lux-card:hover .lux-card__cta,
	.lux-card:focus-within .lux-card__cta {
		opacity: 1;
		transform: translateY(0);
	}

	.lux-card:hover .lux-card__sheen {
		opacity: 1;
		animation: lux-sheen 1.05s var(--ipek-ease-out);
	}
}

/* Touch: no hover to rely on, so the CTA is simply always visible. */
@media (hover: none) {
	.lux-card__cta {
		opacity: 1;
		transform: none;
	}
}

.lux-card:active {
	transform: translateY(-4px) scale(0.995);
	transition-duration: 0.14s;
}

@keyframes lux-sheen {
	from {
		transform: translateX(-120%);
	}
	to {
		transform: translateX(120%);
	}
}

/* Animated index numeral that swaps for an arrow on hover. */
.lux-card__index {
	transition:
		opacity 0.45s var(--ipek-ease),
		transform 0.45s var(--ipek-ease);
}

.lux-card:hover .lux-card__index {
	opacity: 0;
	transform: translateY(-6px);
}

.lux-card__index-arrow {
	opacity: 0;
	transform: translate(-4px, 6px);
	transition:
		opacity 0.45s var(--ipek-ease) 0.06s,
		transform 0.45s var(--ipek-ease) 0.06s;
}

.lux-card:hover .lux-card__index-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* ══════════════════════════════════════════════════════════════════
   3. Spec cards (text-forward product variants)
   ══════════════════════════════════════════════════════════════════ */

.lux-spec {
	position: relative;
	transition:
		transform 0.6s var(--ipek-ease),
		border-color 0.5s ease,
		box-shadow 0.6s var(--ipek-ease);
}

.lux-spec__rule {
	display: block;
	height: 1px;
	width: 100%;
	background: linear-gradient(
		90deg,
		rgba(179, 18, 23, 0.34),
		rgba(20, 20, 20, 0.08) 38%,
		transparent
	);
	transform: scaleX(0.34);
	transform-origin: left center;
	transition: transform 0.7s var(--ipek-ease-out);
}

@media (hover: hover) {
	.lux-spec:hover,
	.lux-spec:focus-within {
		transform: translateY(-4px);
		border-color: rgba(198, 160, 98, 0.4);
		box-shadow: 0 32px 80px -46px rgba(0, 0, 0, 0.28);
	}

	.lux-spec:hover .lux-spec__rule,
	.lux-spec:focus-within .lux-spec__rule {
		transform: scaleX(1);
	}
}

/* ══════════════════════════════════════════════════════════════════
   4. Gallery
   ══════════════════════════════════════════════════════════════════ */

.lux-shot {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.lux-shot img {
	transition: transform 1.5s var(--ipek-ease-out);
	will-change: transform;
}

.lux-shot__caption {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.6s var(--ipek-ease),
		transform 0.6s var(--ipek-ease);
}

@media (hover: hover) {
	.lux-shot:hover img,
	.lux-shot:focus-within img {
		transform: scale(1.08);
	}

	.lux-shot:hover .lux-shot__caption,
	.lux-shot:focus-within .lux-shot__caption {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (hover: none) {
	.lux-shot__caption {
		opacity: 1;
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════
   5. Ambient depth
   ══════════════════════════════════════════════════════════════════ */

/**
 * .lux-ambient — soft, off-centre light so a section never reads flat.
 * Two very wide radial gradients (warm gold + brand red). Purely
 * decorative; always paired with aria-hidden.
 */
.lux-ambient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 45% at 12% 0%, rgba(226, 192, 141, 0.16), transparent 62%),
		radial-gradient(ellipse 55% 50% at 92% 78%, rgba(179, 18, 23, 0.07), transparent 60%);
}

.lux-ambient--dark {
	background:
		radial-gradient(ellipse 62% 48% at 16% 0%, rgba(179, 18, 23, 0.2), transparent 60%),
		radial-gradient(ellipse 55% 48% at 88% 82%, rgba(226, 192, 141, 0.11), transparent 62%);
}

.lux-hairline {
	position: absolute;
	inset-inline: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(198, 160, 98, 0.42), transparent);
}

.lux-hairline--top {
	top: 0;
}

.lux-hairline--bottom {
	bottom: 0;
	opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════
   6. Chips and breadcrumbs
   ══════════════════════════════════════════════════════════════════ */

.lux-chip {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition:
		color 0.45s var(--ipek-ease),
		border-color 0.45s ease,
		transform 0.45s var(--ipek-ease);
}

.lux-chip::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, #ef3b3c, #da292a 55%, #b01e20);
	opacity: 0;
	transition: opacity 0.45s var(--ipek-ease);
}

.lux-chip:hover {
	transform: translateY(-1px);
}

.lux-chip[data-active="true"] {
	color: #fff;
	border-color: transparent;
}

.lux-chip[data-active="true"]::before {
	opacity: 1;
}

/* Breadcrumb link underline that draws itself in. */
.lux-crumb {
	position: relative;
}

.lux-crumb::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--ipek-ease);
}

.lux-crumb:hover::after {
	transform: scaleX(1);
}

/* ══════════════════════════════════════════════════════════════════
   7. Ayat Food section badge
   Ported from src/components/home/AyatSectionBadge.tsx.
   ══════════════════════════════════════════════════════════════════ */

.ayat-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	border-radius: 12px;
	border: 1px solid rgba(179, 18, 23, 0.22);
	background: #fff;
	padding: 0.5rem 0.625rem;
	box-shadow: 0 14px 36px -24px rgba(179, 18, 23, 0.45);
}

.ayat-badge--center {
	margin-inline: auto;
}

.ayat-badge--dark {
	border-color: rgba(240, 215, 168, 0.28);
	background: linear-gradient(
		135deg,
		rgba(14, 14, 14, 0.88) 0%,
		rgba(8, 8, 8, 0.62) 55%,
		rgba(218, 41, 42, 0.14) 100%
	);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.ayat-badge__mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	height: 2.25rem;
	width: 2.25rem;
	border-radius: 9px;
	border: 1px solid rgba(179, 18, 23, 0.28);
	background: linear-gradient(145deg, rgba(179, 18, 23, 0.12), #fff);
}

.ayat-badge--dark .ayat-badge__mark {
	border-color: rgba(218, 41, 42, 0.45);
	background: linear-gradient(145deg, rgba(218, 41, 42, 0.28), rgba(20, 20, 20, 0.7));
}

.ayat-badge__mark img {
	height: 1rem;
	width: 1rem;
	object-fit: contain;
}

.ayat-badge--dark .ayat-badge__mark img {
	height: 1.25rem;
	width: 1.25rem;
	filter: drop-shadow(0 2px 8px rgba(218, 41, 42, 0.45));
}

.ayat-badge__text {
	min-width: 0;
	padding-right: 0.25rem;
}

.ayat-badge__kicker-row {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.ayat-badge__seal {
	display: block;
	flex-shrink: 0;
	height: 0.875rem;
	width: 0.875rem;
	color: #b31217;
}

.ayat-badge--dark .ayat-badge__seal {
	color: rgba(226, 192, 141, 0.95);
}

.ayat-badge__seal svg {
	display: block;
	height: 100%;
	width: 100%;
}

.ayat-badge__kicker {
	font-family: var(--ipek-font-sans);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #b31217;
}

.ayat-badge--dark .ayat-badge__kicker {
	color: rgba(226, 192, 141, 0.95);
}

.ayat-badge__title {
	display: block;
	margin-top: 0.125rem;
	font-family: var(--ipek-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #141414;
}

.ayat-badge--dark .ayat-badge__title {
	color: rgba(255, 255, 255, 0.92);
}

/* ══════════════════════════════════════════════════════════════════
   8. Mobile — 48px minimum touch area on every button family
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.ipek-btn,
	.ipek-btn-premium,
	.ipek-btn-wipe,
	.lux-btn {
		min-height: 2.75rem;
		padding-block: 0.75rem;
	}
}

/* ══════════════════════════════════════════════════════════════════
   9. Reduced motion
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.lux-btn,
	.lux-btn::before,
	.lux-btn__arrow,
	.lux-arrow,
	.lux-card,
	.lux-card__media img,
	.lux-card__glow,
	.lux-card__cta,
	.lux-card__index,
	.lux-card__index-arrow,
	.lux-spec,
	.lux-spec__rule,
	.lux-shot img,
	.lux-shot__caption,
	.lux-chip,
	.lux-crumb::after,
	.ipek-btn-premium,
	.ipek-btn-premium::before,
	.ipek-btn-premium::after {
		transition: none !important;
		animation: none !important;
	}

	.lux-card:hover,
	.lux-card:focus-within,
	.lux-card:active,
	.lux-spec:hover,
	.lux-btn:hover,
	.lux-btn:active,
	.lux-chip:hover,
	.ipek-btn-premium:hover,
	.ipek-btn-premium:active {
		transform: none;
	}

	.lux-card:hover .lux-card__media img,
	.lux-shot:hover img {
		transform: none;
	}

	/* Anything that reveals on hover stays permanently visible instead. */
	.lux-card__cta,
	.lux-shot__caption {
		opacity: 1;
		transform: none;
	}

	.lux-card__sheen,
	.lux-btn::before {
		display: none;
	}

	.lux-spec__rule {
		transform: scaleX(1);
	}
}
/**
 * Over Ons + Hero CTA parity layer.
 * Ported from src/styles.css (React source of truth).
 * Do not redesign — keep in sync with HomeOverOnsSection / HeroCtaButton.
 */


/* ==========================================================================
   Over Ons — layout (ported from React Tailwind classes on HomeOverOnsSection)
   React uses utility classes for the grid; WP markup needs equivalent CSS.
   ========================================================================== */

.over-ons-bento,
.ipekci-overons__bento {
	display: grid;
	margin-top: 2rem;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.over-ons-bento,
	.ipekci-overons__bento {
		margin-top: 3.5rem;
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.over-ons-bento,
	.ipekci-overons__bento {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto;
		gap: 1.25rem;
	}

	.ipekci-overons__bento-hero,
	.over-ons-bento > .story-reveal:has(.over-ons-hero),
	.over-ons-bento > .ipekci-overons__bento-hero {
		grid-column: span 7 / span 7;
		grid-row: span 2 / span 2;
	}

	/* React: lg:contents — must win over the base flex rule below. */
	.over-ons-bento__icons {
		display: contents !important;
	}

	.over-ons-bento__icons > .story-reveal {
		grid-column: span 5 / span 5;
		display: flex;
		min-height: 0;
		height: 100%;
	}

	.over-ons-bento__icons .over-ons-icon-card {
		flex: 1 1 auto;
		width: 100%;
		height: 100%;
		min-height: 0;
	}
}

/* Mobile/tablet stack — kept AFTER lg so it does not override contents at desktop.
   Use max-width so it never fights the lg:contents rule. */
@media (max-width: 1023px) {
	.over-ons-bento__icons {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.over-ons-bento__icons {
		gap: 1.25rem;
	}
}

/* Hero shell — radii + min-heights from React SHELL / min-h utilities */
.over-ons-hero,
.over-ons-bento__hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 260px;
	height: 100%;
	background: #0a0a0a;
	border-radius: 1.35rem 0.75rem 1.5rem 0.9rem;
	box-shadow: 0 40px 100px -48px rgba(0, 0, 0, 0.55);
}

@media (min-width: 640px) {
	.over-ons-hero,
	.over-ons-bento__hero {
		min-height: 420px;
		border-radius: 1.65rem 0.9rem 1.85rem 1.05rem;
	}
}

@media (min-width: 1024px) {
	.over-ons-hero,
	.over-ons-bento__hero {
		min-height: 520px;
	}
}

.over-ons-hero__media {
	position: absolute;
	inset: -6% 0 auto;
	height: 112%;
}

.over-ons-hero__media img,
.over-ons-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.over-ons-hero__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.over-ons-hero__shade-base {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4, 4, 4, 0.96), rgba(5, 5, 5, 0.42) 50%, rgba(5, 5, 5, 0.1));
}

.over-ons-hero__shade-key {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 58% 50% at 18% 6%, rgba(255, 241, 222, 0.13), transparent 62%);
}

.over-ons-hero__shade-wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(179, 18, 23, 0.16), transparent 55%);
}

.over-ons-hero__shade-vig {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 78% 72% at 50% 46%, transparent 34%, rgba(0, 0, 0, 0.44) 100%);
}

.over-ons-hero__shade-accent {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(ellipse 70% 60% at 78% 18%, rgba(179, 18, 23, 0.3), transparent 62%);
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.over-ons-hero[data-linked="true"] .over-ons-hero__shade-accent {
	opacity: 1;
}

.over-ons-hero__shade-line {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(226, 192, 141, 0.32), transparent);
}

.over-ons-hero__lift,
.over-ons-hero__sheen {
	position: absolute;
	inset: 0;
}

.over-ons-hero__content {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.over-ons-hero__content {
		padding: 2rem;
	}
}

@media (min-width: 1024px) {
	.over-ons-hero__content {
		padding: 2.5rem;
	}
}

.over-ons-hero__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.over-ons-hero__index {
	font-family: var(--ipek-font-display, inherit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	color: rgba(255, 255, 255, 0.45);
	tabular-nums: true;
}

.over-ons-hero__live {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	/* React default (unlinked): white/12 border, black/35 fill */
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.35);
	padding: 0.375rem 0.75rem;
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(12px);
	transition:
		border-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.over-ons-hero[data-linked="true"] .over-ons-hero__live {
	border-color: rgba(226, 192, 141, 0.34);
	background: rgba(0, 0, 0, 0.45);
	color: rgba(240, 226, 202, 0.95);
}

.over-ons-hero__live-default,
.over-ons-hero__live-echo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.over-ons-hero__live-icon {
	height: 0.875rem;
	width: 0.875rem;
	object-fit: contain;
	flex-shrink: 0;
}

.over-ons-hero__pulse {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: #da292a;
	flex-shrink: 0;
}

.over-ons-hero__bottom {
	/* React: mt-10 on caption block */
	margin-top: 2.5rem;
	max-width: 32rem;
}

.over-ons-hero__bottom h3 {
	margin: 0;
	font-family: var(--ipek-font-display, inherit);
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #fff;
	text-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}

@media (min-width: 640px) {
	.over-ons-hero__bottom h3 {
		font-size: 2rem;
	}
}

@media (min-width: 1024px) {
	.over-ons-hero__bottom h3 {
		font-size: 2.3rem;
	}
}

.over-ons-hero__bottom > p:not(.over-ons-hero__caption) {
	margin: 0.875rem 0 0;
	max-width: 28rem;
	font-family: var(--ipek-font-sans, inherit);
	font-size: 14px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.76);
}

@media (min-width: 640px) {
	.over-ons-hero__bottom > p:not(.over-ons-hero__caption) {
		font-size: 15px;
	}
}

.over-ons-hero__rule {
	margin-top: 1.5rem;
	height: 1px;
	width: 3.5rem;
	background: linear-gradient(90deg, rgba(226, 192, 141, 0.9), transparent);
	transform-origin: left center;
}

.over-ons-hero__caption {
	margin-top: 0.875rem !important;
	font-family: var(--ipek-font-display, inherit) !important;
	font-size: 12.5px !important;
	font-style: italic;
	font-weight: 400;
	line-height: 1.6 !important;
	letter-spacing: normal;
	text-transform: none;
	color: rgba(232, 210, 178, 0.82) !important;
	max-width: none;
}

/* Feature cards — structural */
.over-ons-icon-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: linear-gradient(165deg, #ffffff 0%, #faf8f5 100%);
	padding: 1rem;
	box-shadow: 0 28px 70px -48px rgba(0, 0, 0, 0.28);
	min-height: 0;
}

@media (min-width: 640px) {
	.over-ons-icon-card {
		padding: 1.75rem;
		min-height: 248px;
	}
}

.over-ons-icon-card__glow {
	pointer-events: none;
	position: absolute;
	right: -1.5rem;
	top: -1.5rem;
	height: 7rem;
	width: 7rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(179, 18, 23, 0.08), transparent 70%);
}

.over-ons-icon-card__edge {
	pointer-events: none;
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(179, 18, 23, 0.55), transparent);
}

.over-ons-icon-card__index {
	position: absolute;
	right: 1rem;
	top: 1rem;
	display: none;
	font-family: var(--ipek-font-display, inherit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: rgba(20, 20, 20, 0.25);
	tabular-nums: true;
}

@media (min-width: 640px) {
	.over-ons-icon-card__index {
		display: block;
		right: 1.5rem;
		top: 1.5rem;
	}
}

.over-ons-icon-card__row {
	position: relative;
	display: flex;
	min-width: 0;
	gap: 0.875rem;
}

@media (min-width: 640px) {
	.over-ons-icon-card__row {
		gap: 1.25rem;
	}
}

.over-ons-icon-card__tile {
	display: flex;
	height: 2.75rem;
	width: 2.75rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
	border: 1px solid rgba(179, 18, 23, 0.12);
	background: linear-gradient(145deg, rgba(179, 18, 23, 0.06), rgba(255, 255, 255, 0.9));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (min-width: 640px) {
	.over-ons-icon-card__tile {
		height: 4.5rem;
		width: 4.5rem;
		border-radius: 1rem;
	}
}

.over-ons-icon-card__icon {
	height: 2rem;
	width: 2rem;
	object-fit: contain;
}

@media (min-width: 640px) {
	.over-ons-icon-card__icon {
		height: 3rem;
		width: 3rem;
	}
}

.over-ons-icon-card__text {
	min-width: 0;
	flex: 1;
}

.over-ons-icon-card__text h3 {
	margin: 0;
	padding-right: 0;
	font-family: var(--ipek-font-display, inherit);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #141414;
	line-height: 1.2;
}

@media (min-width: 640px) {
	.over-ons-icon-card__text h3 {
		padding-right: 2.25rem;
		font-size: 1.35rem;
	}
}

.over-ons-icon-card__text p {
	margin: 0.375rem 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(20, 20, 20, 0.66);
}

@media (min-width: 640px) {
	.over-ons-icon-card__text p {
		margin-top: 0.625rem;
		font-size: 13px;
		line-height: 1.7;
	}
}

.over-ons-icon-card__rule {
	display: none;
	margin-top: 1.25rem;
	height: 1px;
	width: 100%;
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(179, 18, 23, 0.34), rgba(20, 20, 20, 0.08) 38%, transparent);
}

@media (min-width: 640px) {
	.over-ons-icon-card__rule {
		display: block;
	}
}

.over-ons-icon-card__chips {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.over-ons-icon-card__chips {
		margin-top: 1rem;
		gap: 0.5rem;
	}
}

.over-ons-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	border: 1px solid rgba(20, 20, 20, 0.08);
	background: rgba(255, 255, 255, 0.85);
	padding: 0.25rem 0.625rem;
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(20, 20, 20, 0.62);
}

.over-ons-chip--cert {
	border-color: rgba(179, 18, 23, 0.22);
	background: #fff;
	color: #b31217;
	box-shadow: 0 8px 20px -16px rgba(179, 18, 23, 0.7);
}

.over-ons-chip__seal {
	height: 0.75rem;
	width: 0.75rem;
	object-fit: contain;
}

.over-ons-chip__dot {
	width: 4px;
	height: 4px;
	border-radius: 9999px;
	background: rgba(179, 18, 23, 0.55);
}

.over-ons-icon-card__footer {
	position: relative;
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1rem;
}

.over-ons-icon-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 9.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: #b31217;
	text-decoration: none;
}

.over-ons-icon-card__link-text {
	position: relative;
}

.over-ons-icon-card__note {
	max-width: 17ch;
	text-align: right;
	font-size: 9px;
	color: rgba(20, 20, 20, 0.35);
}

@media (max-width: 639px) {
	.over-ons-icon-card__footer {
		display: none;
	}
}

/* Lower panel: story + proof */
.ipekci-overons__panel {
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
}

@media (min-width: 1024px) {
	.ipekci-overons__panel {
		grid-template-columns: 1.35fr 1fr;
		gap: 1.5rem;
		margin-top: 3rem;
	}
}

.over-ons-story {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.35rem;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.8);
	padding: 1.5rem;
	box-shadow: 0 24px 60px -44px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@media (min-width: 640px) {
	.over-ons-story {
		padding: 2rem;
	}
}

.over-ons-story__glow {
	position: absolute;
	left: -2.5rem;
	top: -2.5rem;
	height: 10rem;
	width: 10rem;
	border-radius: 9999px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(226, 192, 141, 0.22), transparent 70%);
}

.over-ons-story__quote-mark {
	position: absolute;
	bottom: -2rem;
	right: 1rem;
	pointer-events: none;
	font-family: var(--ipek-font-display);
	font-size: 8rem;
	line-height: 1;
	color: rgba(179, 18, 23, 0.055);
}

.over-ons-story__content {
	position: relative;
}

.over-ons-story__rule {
	margin-top: 0.75rem;
	height: 1px;
	width: 2.5rem;
	background: linear-gradient(90deg, rgba(200, 164, 107, 0.9), transparent);
}

/* React proof panel is dark — must not share story's white shell */
.over-ons-proof {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.35rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: linear-gradient(165deg, #141414 0%, #0a0a0a 55%, #1a0808 100%);
	padding: 1.5rem;
	color: #ffffff;
	box-shadow: 0 32px 80px -40px rgba(0, 0, 0, 0.55);
}

@media (min-width: 640px) {
	.over-ons-proof {
		padding: 2rem;
	}
}

.over-ons-proof__glow {
	position: absolute;
	right: -3rem;
	top: -3rem;
	height: 12rem;
	width: 12rem;
	border-radius: 9999px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(179, 18, 23, 0.24), transparent 70%);
}

.over-ons-proof__edge {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(226, 192, 141, 0.42), transparent);
}

.over-ons-proof__icons {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
}

.over-ons-proof__icon {
	height: 2.5rem;
	width: auto;
	object-fit: contain;
	opacity: 0.9;
	filter: brightness(0) invert(1);
}

.over-ons-proof__seal-box {
	display: grid;
	height: 2rem;
	width: 2rem;
	flex-shrink: 0;
	place-items: center;
	border-radius: 9px;
	border: 1px solid rgba(226, 192, 141, 0.24);
	background: rgba(255, 255, 255, 0.04);
}

.over-ons-proof__seal {
	height: 1rem;
	width: 1rem;
	object-fit: contain;
	opacity: 0.85;
	filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(350deg);
}

.over-ons-proof__stat {
	margin: 1rem 0 0;
}

.over-ons-proof__stat-num {
	display: flex;
	align-items: baseline;
	font-family: var(--ipek-font-display, inherit);
	font-size: clamp(3rem, 4vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #ffffff;
}

.over-ons-proof__stat-suffix {
	color: #da292a;
}

.over-ons-proof__stat-label {
	display: block;
	margin-top: 0.5rem;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.7);
}

.over-ons-proof__stat-meta {
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 11px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.48);
}

.over-ons-proof__checklist {
	margin: auto 0 0;
	padding: 1.75rem 0 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.over-ons-proof__checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.over-ons-proof .over-ons-check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	padding: 0.625rem 0.75rem;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.88);
}

.over-ons-proof .over-ons-check__mark {
	display: grid;
	height: 1.25rem;
	width: 1.25rem;
	flex-shrink: 0;
	place-items: center;
	border-radius: 9999px;
	background: #b31217;
	color: #ffffff;
}

.over-ons-story__kicker,
.over-ons-story__customer-kicker {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: rgba(20, 20, 20, 0.45);
}

.over-ons-story__customer-kicker {
	letter-spacing: 0.26em;
	color: #b31217;
	font-size: 11px;
}

.over-ons-story__text {
	margin: 1.25rem 0 0;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(20, 20, 20, 0.78);
}

@media (min-width: 640px) {
	.over-ons-story__text {
		font-size: 17px;
	}
}

.over-ons-story__customer {
	margin-top: auto;
	padding-top: 2rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.over-ons-story__customer-text {
	margin: 0.75rem 0 0;
	max-width: 32rem;
	font-family: var(--ipek-font-display, inherit);
	font-size: 1.35rem;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: #141414;
}

@media (min-width: 640px) {
	.over-ons-story__customer-text {
		font-size: 1.5rem;
	}
}

.over-ons-story__customer-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 1.25rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(20, 20, 20, 0.45);
}

.over-ons-story__customer-seal {
	height: 0.875rem;
	width: 0.875rem;
	object-fit: contain;
}

.over-ons-check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 13px;
	font-weight: 500;
	color: #141414;
}

.over-ons-check__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background: rgba(179, 18, 23, 0.08);
	color: #b31217;
	flex-shrink: 0;
}

/* Dual CTA desk/mob label swap — matches React hidden sm:inline / sm:hidden */
.ipekci-hero__cta-label-mob,
.ipekci-eindproducten__cta-mob,
.ipekci-vac__cta-label-mob,
.ipekci-vw-hero__cta-label-mob,
.ipekci-404__cta-label-mob,
.ipekci-pr-only-narrow {
	display: none;
}

@media (max-width: 639px) {
	.ipekci-hero__cta-label-desk,
	.ipekci-eindproducten__cta-desk,
	.ipekci-vac__cta-label-desk,
	.ipekci-vw-hero__cta-label-desk,
	.ipekci-404__cta-label-desk,
	.ipekci-pr-only-wide {
		display: none;
	}

	.ipekci-hero__cta-label-mob,
	.ipekci-eindproducten__cta-mob,
	.ipekci-vac__cta-label-mob,
	.ipekci-vw-hero__cta-label-mob,
	.ipekci-404__cta-label-mob,
	.ipekci-pr-only-narrow {
		display: inline;
	}
}


  /* ── Hero CTA (premium hover + wipe) ── */
  .hero-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-family: var(--ipek-font-sans, var(--font-sans));
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    transition:
      transform var(--ipek-duration-ui) var(--ipek-ease),
      box-shadow var(--ipek-duration-ui) var(--ipek-ease),
      border-color var(--ipek-duration-ui) var(--ipek-ease),
      color var(--ipek-duration-ui) var(--ipek-ease);
  }

  /* Label + arrow must sit above wipe/shine (z-index 0–2). Without this the
     white wipe paints over the text on hover — looks like a blank white button. */
  .hero-cta__label,
  .hero-cta__arrow {
    position: relative;
    z-index: 10;
  }

  .hero-cta__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hero-cta__arrow {
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease;
  }

  .hero-cta:hover .hero-cta__arrow {
    transform: translateX(6px);
    color: #da292a;
  }

  @media (hover: hover) {
    .hero-cta:hover {
      transform: translateY(-2px);
    }
  }

  .hero-cta:active {
    transform: translateY(0) scale(0.98);
  }

  .hero-cta-wipe {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translateX(-102%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }

  .hero-cta:hover .hero-cta-wipe {
    transform: translateX(0);
  }

  .hero-cta--primary {
    background: linear-gradient(135deg, #ef3b3c 0%, var(--primary) 48%, #b01e20 100%);
    border: 1px solid color-mix(in oklab, var(--primary) 55%, white 20%);
    color: #ffffff;
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent),
      0 14px 42px -16px color-mix(in oklab, var(--primary) 78%, transparent);
  }

  .hero-cta--primary .hero-cta-wipe {
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.98) 50%,
      rgba(250, 250, 250, 1) 100%
    );
  }

  .hero-cta--primary:hover {
    color: var(--primary);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45),
      0 18px 52px -14px rgba(255, 255, 255, 0.18),
      0 0 48px -12px rgba(218, 41, 42, 0.25);
  }

  .hero-cta--primary:hover .hero-cta__label,
  .hero-cta--primary:hover .hero-cta__arrow {
    color: var(--primary);
  }

  .hero-cta-border-glow {
    position: absolute;
    inset: -1px;
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      120deg,
      transparent 20%,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 80%
    );
    background-size: 220% 100%;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    animation: hero-cta-border-sweep 2.8s linear infinite;
    pointer-events: none;
  }

  .hero-cta--primary:hover .hero-cta-border-glow {
    opacity: 1;
  }

  @keyframes hero-cta-border-sweep {
    0% {
      background-position: 220% 0;
    }
    100% {
      background-position: -220% 0;
    }
  }

  .hero-cta-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      105deg,
      transparent 38%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 62%
    );
    transform: translateX(-130%);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }

  .hero-cta--primary:hover .hero-cta-shine {
    transform: translateX(130%);
  }

  .hero-cta--ghost {
    border: 1px solid color-mix(in oklab, white 16%, transparent);
    background: color-mix(in oklab, black 42%, transparent);
    backdrop-filter: blur(10px);
    color: rgba(245, 241, 235, 0.92);
  }

  .hero-cta--ghost .hero-cta-wipe {
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 50%,
      rgba(245, 245, 245, 0.97) 100%
    );
  }

  .hero-cta--ghost:hover {
    color: var(--primary);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.35),
      0 12px 36px -18px rgba(255, 255, 255, 0.14);
  }

  .hero-cta--ghost:hover .hero-cta__label,
  .hero-cta--ghost:hover .hero-cta__arrow {
    color: var(--primary);
  }

  .hero-cta-ghost-ring {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    border: 1px solid transparent;
    background:
      linear-gradient(rgba(8, 8, 8, 0.9), rgba(8, 8, 8, 0.9)) padding-box,
      linear-gradient(
        135deg,
        rgba(226, 192, 141, 0.15),
        rgba(179, 18, 23, 0.35),
        rgba(226, 192, 141, 0.15)
      )
      border-box;
    opacity: 0.55;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }

  .hero-cta--ghost:hover .hero-cta-ghost-ring {
    opacity: 0;
  }
  /* ==========================================================================
     Over Ons - premium bento theater
     All interaction work is transform/opacity only (compositor-friendly);
     nothing here animates layout or paint-heavy properties.
     ========================================================================== */
  .over-ons-hero {
    transition: box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-hero:hover {
    box-shadow: 0 48px 110px -44px rgba(0, 0, 0, 0.62);
  }

  /* Cinematic grade — static filter, so only transform moves on hover */
  .over-ons-hero__img {
    filter: brightness(0.86) contrast(1.06) saturate(1.04);
    transform: translate3d(0, 0, 0) scale(1.005);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-hero:hover .over-ons-hero__img,
  .over-ons-hero[data-linked="true"] .over-ons-hero__img {
    transform: translate3d(0, 0, 0) scale(1.045);
  }

  /* Warm key-light that rises on hover / when a card is linked */
  .over-ons-hero__lift {
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(ellipse 65% 55% at 22% 12%, rgba(255, 238, 214, 0.16), transparent 62%),
      radial-gradient(ellipse 60% 50% at 62% 62%, rgba(255, 226, 196, 0.08), transparent 66%);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-hero:hover .over-ons-hero__lift,
  .over-ons-hero[data-linked="true"] .over-ons-hero__lift {
    opacity: 1;
  }

  /* Single-pass light sweep — keyframed so it never plays in reverse */
  .over-ons-hero__sheen {
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255, 255, 255, 0.09) 49%,
      transparent 58%
    );
    transform: translate3d(-130%, 0, 0);
  }

  .over-ons-hero:hover .over-ons-hero__sheen {
    animation: overOnsSheen 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes overOnsSheen {
    from {
      transform: translate3d(-130%, 0, 0);
    }
    to {
      transform: translate3d(130%, 0, 0);
    }
  }

  /* Gold caption rule extends on hover */
  .over-ons-hero__rule {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-hero:hover .over-ons-hero__rule {
    transform: scaleX(1.9);
  }

  /* Live-status dot — slow halo, signals an active operation */
  .over-ons-hero__pulse {
    position: relative;
  }

  .over-ons-hero__pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgba(218, 41, 42, 0.55);
    animation: overOnsPulse 2.8s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  }

  @keyframes overOnsPulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    70%,
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  /* --- Feature cards ------------------------------------------------------ */
  .over-ons-icon-card {
    transition:
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.45s ease;
  }

  .over-ons-icon-card:hover,
  .over-ons-icon-card:focus-within {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(179, 18, 23, 0.16);
    box-shadow: 0 36px 80px -42px rgba(179, 18, 23, 0.18);
  }

  .over-ons-icon-card__edge {
    opacity: 0;
    transform: scaleX(0.4);
    transition:
      opacity 0.5s ease,
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-icon-card:hover .over-ons-icon-card__edge,
  .over-ons-icon-card:focus-within .over-ons-icon-card__edge {
    opacity: 1;
    transform: scaleX(1);
  }

  .over-ons-icon-card__glow {
    opacity: 0.75;
    transform: scale(1);
    transition:
      opacity 0.6s ease,
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-icon-card:hover .over-ons-icon-card__glow,
  .over-ons-icon-card:focus-within .over-ons-icon-card__glow {
    opacity: 1;
    transform: scale(1.35);
  }

  .over-ons-icon-card__tile {
    transition:
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.45s ease;
  }

  .over-ons-icon-card:hover .over-ons-icon-card__tile {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(179, 18, 23, 0.26);
  }

  .over-ons-icon-card__icon {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-icon-card:hover .over-ons-icon-card__icon {
    transform: scale(1.08) rotate(-2deg);
  }

  .over-ons-icon-card__rule {
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-icon-card:hover .over-ons-icon-card__rule {
    transform: scaleX(1.02);
  }

  .over-ons-chip {
    transition:
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.45s ease;
  }

  .over-ons-icon-card:hover .over-ons-chip--cert {
    transform: translate3d(0, -1px, 0);
    border-color: rgba(179, 18, 23, 0.38);
  }

  /* Footer action — underline sweeps in from the left */
  .over-ons-icon-card__link-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 1px;
    width: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-icon-card:hover .over-ons-icon-card__link-text::after,
  .over-ons-icon-card__link:focus-visible .over-ons-icon-card__link-text::after {
    transform: scaleX(1);
  }

  .over-ons-icon-card__link-arrow {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-icon-card:hover .over-ons-icon-card__link-arrow {
    transform: translate3d(2px, -2px, 0);
  }

  /* --- Proof panel checklist --------------------------------------------- */
  .over-ons-check {
    transition:
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.45s ease,
      background-color 0.45s ease;
  }

  .over-ons-check:hover {
    transform: translate3d(2px, 0, 0);
    border-color: rgba(226, 192, 141, 0.28);
    background-color: rgba(255, 255, 255, 0.07);
  }

  .over-ons-check__mark {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .over-ons-check:hover .over-ons-check__mark {
    transform: scale(1.12);
  }

  @media (prefers-reduced-motion: reduce) {
    .over-ons-hero:hover,
    .over-ons-icon-card:hover,
    .over-ons-icon-card:focus-within,
    .over-ons-check:hover {
      transform: none;
    }

    .over-ons-hero:hover .over-ons-hero__img,
    .over-ons-hero[data-linked="true"] .over-ons-hero__img,
    .over-ons-hero:hover .over-ons-hero__rule,
    .over-ons-icon-card:hover .over-ons-icon-card__glow,
    .over-ons-icon-card:focus-within .over-ons-icon-card__glow,
    .over-ons-icon-card:hover .over-ons-icon-card__tile,
    .over-ons-icon-card:hover .over-ons-icon-card__icon,
    .over-ons-icon-card:hover .over-ons-icon-card__rule,
    .over-ons-icon-card:hover .over-ons-chip--cert,
    .over-ons-icon-card:hover .over-ons-icon-card__link-arrow,
    .over-ons-check:hover .over-ons-check__mark {
      transform: none;
    }

    .over-ons-hero__img {
      transform: none;
    }

    .over-ons-hero:hover .over-ons-hero__sheen {
      animation: none;
    }

    .over-ons-hero__pulse::after {
      animation: none;
      opacity: 0;
    }

    /* Keep the card→image link legible without motion */
    .over-ons-icon-card__edge {
      transform: none;
    }

    .over-ons-icon-card__link-text::after {
      transition: none;
    }
  }

@media (max-width: 639px) {
    /* Over Ons — mobile: stacked full-width feature rows, readable copy */
    .over-ons-bento {
      margin-top: 1.75rem;
      gap: 0.625rem;
    }

    .over-ons-bento__hero {
      min-height: 200px;
    }

    .over-ons-bento__hero h3 {
      font-size: 1.25rem;
      line-height: 1.12;
    }

    .over-ons-bento__hero p {
      font-size: 13px;
      line-height: 1.6;
    }

    .over-ons-bento__icons {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }

    .over-ons-icon-card {
      padding: 0.875rem 1rem !important;
      min-height: 0 !important;
    }

    .over-ons-icon-card .over-ons-icon-card__tile {
      height: 2.75rem;
      width: 2.75rem;
      flex-shrink: 0;
    }

    .over-ons-icon-card .over-ons-icon-card__icon {
      height: 2rem;
      width: 2rem;
    }

    .over-ons-icon-card h3 {
      font-size: 1.05rem;
      padding-right: 0;
      line-height: 1.2;
    }

    .over-ons-icon-card p {
      font-size: 12px;
      line-height: 1.55;
      margin-top: 0.375rem;
      display: block;
      overflow: visible;
      -webkit-line-clamp: unset;
    }

    .over-ons-icon-card__rule,
    .over-ons-icon-card__link {
      display: none;
    }

    .over-ons-icon-card .over-ons-chip {
      font-size: 8px;
      padding: 0.2rem 0.5rem;
    }

    .over-ons-story {
      padding: 1.125rem !important;
    }

    .over-ons-story p {
      font-size: 0.9375rem;
      line-height: 1.65;
    }

    .over-ons-proof {
      padding: 1.125rem !important;
    }

    .over-ons-proof .over-ons-check {
      padding: 0.5rem 0.625rem;
      font-size: 10.5px;
    }

}

/* Dual CTA must size .hero-cta the same as legacy .ipekci-hero-cta */
@media (max-width: 639px) {
	.ipek-dual-cta .hero-cta {
		display: inline-flex;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.5rem 0.375rem;
		font-size: 8px;
		letter-spacing: 0.08em;
		line-height: 1.25;
		gap: 0.25rem;
		justify-content: center;
		align-items: center;
		text-align: center;
		white-space: normal;
	}
	.ipek-dual-cta .hero-cta svg {
		width: 11px;
		height: 11px;
		flex-shrink: 0;
	}
}
@media (max-width: 359px) {
	.ipek-dual-cta .hero-cta {
		font-size: 7.5px;
		letter-spacing: 0.06em;
	}
}

} /* close @layer utilities */