/* ============================================================
   INTERNATIONAL DENTAL ARTS — GLOBAL STYLESHEET
   ============================================================
   Ported verbatim from the static build's two inline <style> blocks:
     - IDA Dev/index.html          lines 92–1345  (tokens, type scale, components)
     - IDA Dev/includes/header.html lines 2–332    (global mobile rules, header, nav)

   Load order matters. functions.php enqueues assets/css/tailwind.css FIRST so
   the component rules below can override Tailwind utilities.

   Rules for editing:
     - The type scale in §TYPE is canonical. Never inline font-size: clamp() on
       a heading; use .text-display / .text-h1 / .text-h2-lg / .text-h2 /
       .text-h3 / .text-h4. See .claude/build-notes.md §3 in the static repo.
     - No @font-face and no webfonts. The site is system-stack only by design.
     - Brand colors live in :root below AND in tailwind.config.js. Change both.
     - Asset URLs are theme-relative (../images/...), rewritten from the static
       build's root-absolute /assets/... paths.

   Removed during the port:
     - .pattern-overlay (defined on every static page, applied to no element,
       and its mask asset ida-squre-pattern.svg was already missing).
   ============================================================ */

/* ============================================================
   §1 TOKENS, TYPE SCALE, COMPONENTS  (from index.html)
   ============================================================ */
  :root{
    /* Brand */
    --ida-purple:        #3B3FB6;   /* exact brand purple */
    --ida-purple-bright: #6A6EE8;   /* expanded — for hover/accents on dark */
    --ida-purple-deep:   #1F2270;   /* expanded — for shadows/depth */
    --ida-orange:        #F94E00;   /* exact brand orange */
    --ida-orange-warm:   #FF8A4D;   /* expanded — softer aurora tone */
    --ida-green:         #35D52F;   /* exact brand green */
    --ida-green-soft:    #6FE56A;   /* expanded — softer for hover/glow */
    --ida-specialty-blue:#34B6E4;   /* 4th accent — from Specialty branding */
    --ida-navy-brand:    #101820;   /* exact brand dark navy */
    --ida-navy-deep:     #0C131B;   /* expanded — slight depth shift */
    --ida-navy-mid:      #141D27;   /* expanded — mid section bg */
    --ida-navy-warm:     #1A1A28;   /* expanded — warmer tone for About */
    --ida-black:         #070B11;   /* expanded — deepest band */
    /* Aurora */
    --ida-aurora-purple:  #3B3FB6;
    --ida-aurora-magenta: #6A3FB6;  /* purple→orange bridge */
    --ida-aurora-amber:   #F94E00;
    --ida-line: rgba(255,255,255,0.08);
    --ida-line-strong: rgba(255,255,255,0.16);
    --ida-text-mute: rgba(255,255,255,0.55);
    --ida-text-dim:  rgba(255,255,255,0.4);

    /* Per-hub accent — overridden inline on each hub <body>.
       Default to orange (homepage). */
    --hub-accent: var(--ida-orange);
  }
  html,body{ background: var(--ida-black); color:#fff; }
  body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  .font-display{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.035em;
    font-weight: 700;
  }
  .font-display-light{ font-weight: 300; letter-spacing: -0.035em; }
  .tracking-tightest { letter-spacing: -0.04em; }
  .tracking-display  { letter-spacing: -0.03em; }

  /* ---------- Sticky in-page anchor nav (used on /about/) ---------- */
  .anchor-nav{
    position: sticky;
    top: 72px;  /* sits just below the fixed site header */
    z-index: 40;
    background: rgba(10,14,31,0.85);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .anchor-nav ul{
    display: flex;
    gap: 0.25rem;
    padding: 14px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .anchor-nav ul::-webkit-scrollbar{ display: none; }
  .anchor-nav a{
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px; letter-spacing: 0.18em; font-weight: 600;
    text-transform: uppercase; white-space: nowrap;
    color: rgba(255,255,255,0.55);
    transition: color .2s ease, background .2s ease;
  }
  .anchor-nav a:hover{ color: #fff; background: rgba(255,255,255,0.06); }
  .anchor-nav a.is-active{ color: #fff; background: rgba(255,255,255,0.10); }

  /* Section anchors need scroll-margin so they land below the fixed header +
     sticky in-page nav (72px header + ~52px nav + buffer = ~140px). */
  [data-anchor-section]{ scroll-margin-top: 140px; }


  /* ---------- Tabs (cream section variant) ----------
     Pill-shaped tab triggers. Active + hover = solid orange fill, white text + icon.
     `aria-selected` drives the active state.
  */
  .tab-trigger{
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    color: rgba(16,24,32,0.55);
    background: transparent;
    border: 1px solid rgba(16,24,32,0.15);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .tab-trigger:hover,
  .tab-trigger[aria-selected="true"]{
    color: #fff;
    background: var(--ida-orange);
    border-color: var(--ida-orange);
  }
  /* When the trigger is active/hovered, its icon stroke follows currentColor → white */
  .tab-trigger:focus-visible{
    outline: 2px solid var(--ida-orange);
    outline-offset: 2px;
  }
  /* Hidden tabpanels — using [hidden] attribute */
  .tab-panel[hidden]{ display: none; }

  /* ---------- Widow prevention (site-wide) ----------
     text-wrap: balance on headings spreads words evenly across lines so no
     single word dangles on the last line. text-wrap: pretty on body paragraphs
     prevents a one-word last line. Modern browsers only (Chrome 114+, Safari
     17.4+, Firefox 121+); older browsers fall back to normal wrap. */
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  /* ---------- Formal type scale (canonical heading sizes) ----------
     Use these classes on every heading instead of inline font-size:
       .text-display  → Page-lead moments (homepage hero, homepage final CTA)
       .text-h1       → Internal page hero, hub final CTA
       .text-h2-lg    → Featured/major section heading
       .text-h2       → Standard section heading (intro, grid, decision aid, testimonials)
       .text-h3       → Card titles, sub-section heading
       .text-h4       → Small step/inline cards
  */
  .text-display { font-size: clamp(48px, 7.6vw, 124px); line-height: 0.95; }
  .text-h1      { font-size: clamp(38px, 5vw,   76px);  line-height: 1.02; }
  .text-h2-lg   { font-size: clamp(34px, 4.2vw, 60px);  line-height: 1.05; }
  .text-h2      { font-size: clamp(28px, 3.6vw, 48px);  line-height: 1.05; }
  .text-h3      { font-size: clamp(22px, 2.4vw, 32px);  line-height: 1.15; }
  .text-h4      { font-size: clamp(16px, 1.6vw, 20px);  line-height: 1.2;  }

  /* ---------- Grain overlay (SVG turbulence) ---------- */
  .grain::before{
    content:"";
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 0 1  0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events:none;
    z-index: 1;
  }
  .grain-strong::before{ opacity: 0.55; }
  .grain > *{ position: relative; z-index: 2; }

  /* ---------- Aurora gradients ---------- */
  .aurora-hero{
    position:absolute; inset:-10% -10% -10% -10%;
    background:
      radial-gradient(60% 55% at var(--ax,72%) var(--ay,38%), rgba(106,63,182,0.55) 0%, rgba(106,63,182,0) 60%),
      radial-gradient(45% 50% at var(--bx,82%) var(--by,62%), rgba(249,78,0,0.48) 0%, rgba(249,78,0,0) 60%),
      radial-gradient(70% 60% at var(--cx,30%) var(--cy,55%), rgba(59,63,182,0.65) 0%, rgba(59,63,182,0) 65%),
      radial-gradient(55% 50% at 10% 10%, rgba(106,110,232,0.35) 0%, rgba(106,110,232,0) 60%);
    filter: saturate(1.05);
    will-change: transform;
  }

  /* Hero mesh-gradient shader canvas (replaces .aurora-hero on the hero) */
  #hero-shader-canvas{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
    /* CSS fallback if WebGL unavailable */
    background:
      radial-gradient(60% 55% at 70% 40%, rgba(106,63,182,0.55) 0%, transparent 60%),
      radial-gradient(45% 50% at 82% 62%, rgba(249,78,0,0.42) 0%, transparent 60%),
      radial-gradient(70% 60% at 30% 55%, rgba(59,63,182,0.65) 0%, transparent 65%),
      radial-gradient(55% 50% at 10% 10%, rgba(106,110,232,0.30) 0%, transparent 60%);
  }
  .aurora-band{
    position:absolute; inset:0;
    background:
      radial-gradient(50% 80% at 20% 50%, rgba(59,63,182,0.55) 0%, transparent 70%),
      radial-gradient(45% 70% at 75% 50%, rgba(106,63,182,0.40) 0%, transparent 70%),
      radial-gradient(40% 80% at 95% 100%, rgba(249,78,0,0.30) 0%, transparent 70%);
  }
  .aurora-soft{
    position:absolute; inset:0;
    background:
      radial-gradient(60% 60% at 85% 30%, rgba(59,63,182,0.32) 0%, transparent 65%),
      radial-gradient(45% 55% at 12% 75%, rgba(106,110,232,0.22) 0%, transparent 65%);
  }
  .aurora-cta{
    position:absolute; inset:-10%;
    background:
      radial-gradient(45% 70% at 50% 60%, rgba(106,63,182,0.65) 0%, transparent 65%),
      radial-gradient(35% 60% at 30% 50%, rgba(59,63,182,0.75) 0%, transparent 70%),
      radial-gradient(35% 60% at 75% 55%, rgba(249,78,0,0.55) 0%, transparent 70%);
  }

  /* slow drift on aurora — set via CSS variables */
  @keyframes auroraDrift{
    0%,100%{ --ax:72%; --ay:38%; --bx:82%; --by:62%; --cx:30%; --cy:55%; }
    33%{    --ax:65%; --ay:48%; --bx:88%; --by:55%; --cx:38%; --cy:48%; }
    66%{    --ax:78%; --ay:32%; --bx:75%; --by:68%; --cx:25%; --cy:62%; }
  }
  .aurora-hero{ animation: auroraDrift 18s ease-in-out infinite; }

  /* ---------- Scroll reveals ---------- */
  .reveal{ opacity:0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal-line{ overflow:hidden; }
  .reveal-line > span{
    display:inline-block; transform: translateY(110%);
    transition: transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal-line.in > span{ transform: translateY(0); }

  /* ---------- Frosted card ---------- */
  .glass{
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid var(--ida-line);
    backdrop-filter: blur(14px) saturate(110%);
    -webkit-backdrop-filter: blur(14px) saturate(110%);
    transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
  }
  .glass:hover{
    transform: translateY(-3px);
    border-color: rgba(106,110,232,0.45);
    box-shadow: 0 18px 60px -20px rgba(59,63,182,0.55), 0 0 0 1px rgba(106,110,232,0.15) inset;
    background: linear-gradient(180deg, rgba(106,110,232,0.05) 0%, rgba(255,255,255,0.02) 100%);
  }
  /* Process cards (#how section) — static, no hover state at all.
     Force background to stay white (matching `.section-light .glass` base) and box-shadow
     to keep the resting elevation; otherwise the .glass:hover rule's purple-tinted gradient
     bleeds through and makes the card look like it changes color on hover.
     !important is needed to beat the mobile `.glass:hover !important` reset added earlier. */
  #how .glass{ transition: none !important; }
  #how .glass:hover{
    transform: none !important;
    border-color: rgba(16,24,32,0.10) !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 rgba(16,24,32,0.04), 0 12px 32px -16px rgba(16,24,32,0.10) !important;
  }

  /* Scoped .glass hover variant — no outline change on hover, green drop shadow.
     Used on the Real Cases mini-story cards (Case Planning) and any future grid
     where we want a subtler hover without the purple ring. */
  .cards-green-hover .glass:hover{
    transform: translateY(-3px);
    border-color: var(--ida-line);  /* keep neutral, no purple outline */
    box-shadow: 0 18px 60px -20px rgba(53,213,47,0.55), 0 0 0 1px rgba(53,213,47,0.18) inset;
    background: linear-gradient(180deg, rgba(53,213,47,0.04) 0%, rgba(255,255,255,0.02) 100%);
  }

  /* ---------- Pill CTA ---------- */
  .pill{
    display:inline-flex; align-items:center; gap:.65rem;
    padding: 14px 22px 14px 26px;
    border-radius: 999px;
    font-size: 14px; letter-spacing: .02em; font-weight: 500;
    background: var(--ida-purple);
    color:#fff;
    transition: background .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
    box-shadow: 0 12px 40px -10px rgba(59,63,182,0.6);
  }
  .pill:hover{ background: var(--ida-purple-bright); box-shadow: 0 18px 48px -10px rgba(106,110,232,0.85); }
  .pill .arr{ transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .pill:hover .arr{ transform: translateX(5px); }

  /* Title-case all button text */
  .pill, .pill-ghost, .mobile-call, .mega-view-all{ text-transform: capitalize; }

  /* Highlighter marker — keyframe animation draws the bg left→right after reveal-line settles */
  @keyframes hlDraw{
    from{ background-size: 0% 100%; }
    to  { background-size: 100% 100%; }
  }
  .hl{
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    color: #fff;
    padding: 0.04em 0;
  }
  .hl-orange{ background-image: linear-gradient(var(--ida-orange), var(--ida-orange)); }
  .hl-purple{ background-image: linear-gradient(var(--ida-purple), var(--ida-purple)); }
  .hl-green { background-image: linear-gradient(var(--ida-green), var(--ida-green)); }
  .hl-blue  { background-image: linear-gradient(var(--ida-specialty-blue), var(--ida-specialty-blue)); }
  /* Per-hub highlight — color comes from --hub-accent set on <body>.
     Zero horizontal padding so adjacent punctuation (period, comma) sits
     flush against the highlighted word instead of trailing in dead space. */
  .hl-hub   {
    background-image: linear-gradient(var(--hub-accent, var(--ida-orange)), var(--hub-accent, var(--ida-orange)));
    padding: 0.04em 0;
  }

  /* When the parent reveal-line scrolls in, draw the marker */
  .reveal-line.in .hl{
    animation: hlDraw .85s cubic-bezier(.4,0,.2,1) .5s forwards;
  }
  /* On internal pages where the H1 is a single text widget (not split into
     reveal-line spans), the .hl-hub also draws when its parent .reveal fires. */
  .reveal.in .hl-hub{
    animation: hlDraw .85s cubic-bezier(.4,0,.2,1) .5s forwards;
  }

  /* ---------- Hub-page hero (full-bleed image background) ---------- */
  .hub-hero{
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 160px 0 96px;
    background-color: var(--ida-navy-deep);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .hub-hero::before{
    content: "";
    position: absolute; inset: 0;
    /* Dark-navy gradient overlay: 80% L → 20% R for text legibility */
    background: linear-gradient(to right, rgba(16,24,32,0.80) 0%, rgba(16,24,32,0.20) 100%);
    pointer-events: none;
  }
  .hub-hero > *{ position: relative; z-index: 1; }
  .hub-hero-content{ max-width: 72%; }
  @media (max-width: 1024px){ .hub-hero-content{ max-width: 100%; } }

  /* Hub service-card grid.
     - Override the carousel sizing (.service-card has width: clamp(280px,38vw,720px)
       intended for a 100vw flex carousel) so the cards fill their grid cells
       at every viewport. Without this, cards exceed cell width at viewports
       ≥ ~1800px and physically overlap.
     - Photo + overlay treatment matches the homepage service-card style. */
  .hub-cards .service-card{
    width: 100%;
    max-width: 100%;
  }

  /* Hub feature-image wrapper: 1:1 square (used in the "featured" block on
     each service hub — Custom Shades on Crowns, Case Planning callout on
     Implants). Image stretches to row height if the text column is taller. */
  .hub-feature-img{
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 1rem;
    height: 100%;
  }
  /* Featured-card grid (dentures protected callouts) — also square. */
  .hub-cards--featured .service-card-img{
    aspect-ratio: 1 / 1;
  }
  .hub-feature-img img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  /* Reduced-motion: skip the draw, show full marker immediately */
  @media (prefers-reduced-motion: reduce){
    .hl{ background-size: 100% 100%; }
    .reveal-line.in .hl{ animation: none; }
  }

  /* Secondary buttons: no trailing arrows */
  .pill-ghost .arr{ display: none; }

  /* Infinite logo marquee (scanner compatibility) */
  .logo-marquee{
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-block: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .logo-marquee-track{
    display: flex;
    align-items: center;
    width: max-content;
    animation: logoMarquee 24s linear infinite;
  }
  .logo-marquee:hover .logo-marquee-track{ animation-play-state: paused; }
  /* -50% works seamlessly because each item has uniform trailing margin
     (incl. the last in each set), so item 5's left edge sits exactly at
     -50% of the track width. */
  @keyframes logoMarquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(var(--marquee-distance, -50%)); }
  }
  .logo-marquee-item{
    height: 42px; width: auto;
    display: block; flex: 0 0 auto;
    margin-right: 72px;
    /* Force every logo to flat white silhouette */
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity .25s ease;
  }
  .logo-marquee-item:hover{ opacity: 1; }
  @media (prefers-reduced-motion: reduce){
    .logo-marquee-track{ animation: none; }
  }

  /* Testimonial slider arrows — matches services carousel recipe, adapted for cream bg */
  .testimonial-arrows{ position:relative; }
  .testimonial-arrow{
    position:absolute; top:50%; transform: translateY(-50%);
    width:44px; height:44px; border-radius:999px;
    border:1px solid var(--ida-line-strong);
    color: rgba(16,24,32,0.72);
    background: transparent;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    z-index:5;
  }
  .testimonial-arrow--prev{ left:0; }
  .testimonial-arrow--next{ right:0; }
  .testimonial-arrow:hover{
    background: rgba(106,110,232,0.15);
    border-color: var(--ida-purple-bright);
    color: var(--ida-purple-bright);
  }
  @media (max-width: 900px){ .testimonial-arrow{ display:none; } }

  /* Slide states for the active testimonial */
  .testimonial-slide{ display:none; }
  .testimonial-slide.is-active{
    display:block;
    animation: testimonialFade .4s cubic-bezier(.16,1,.3,1);
  }
  @keyframes testimonialFade{
    from{ opacity:0; transform: translateY(8px); }
    to{   opacity:1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .testimonial-slide.is-active{ animation: none; }
  }

  /* Featured-callout icon (replaces eyebrow on Custom Abutments / Case Planning) */
  .callout-icon{
    width: 52px; height: 52px;
    border-radius: 14px;
    border: 1px solid var(--ida-line-strong);
    background: rgba(106,110,232,0.10);
    color: var(--ida-purple-bright);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
  }

  /* "Quiet" .glass variant: keeps drop shadow on hover, drops the purple outline ring + bg tint */
  .glass.glass--quiet:hover{
    border-color: var(--ida-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
    box-shadow: 0 18px 60px -20px rgba(59,63,182,0.45);
  }

  /* Callout card arrow — mirrors carousel-arrow recipe */
  .callout-arrow{
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ida-line-strong);
    color: #fff;
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
  }
  .glass--quiet:hover .callout-arrow,
  .glass--quiet:focus-visible .callout-arrow{
    background: rgba(106,110,232,0.15);
    border-color: var(--ida-purple-bright);
    color: var(--ida-purple-bright);
  }

  /* Featured-callout grid hover states (Custom Abutments + Case Planning) — match .service-card */
  .callout-grid > a{ transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .callout-grid > a:hover,
  .callout-grid > a:focus-visible{ transform: translateY(-3px); }

  /* Purple-bg card · chevron fills white on hover, arrow goes purple */
  .callout-card--purple:hover .callout-arrow,
  .callout-card--purple:focus-visible .callout-arrow{
    background: #fff !important;
    border-color: #fff !important;
    color: var(--ida-purple) !important;
    transform: scale(1.06);
  }

  /* White-bg card · chevron fills purple on hover, arrow goes white */
  .callout-card--white:hover .callout-arrow,
  .callout-card--white:focus-visible .callout-arrow{
    background: var(--ida-purple) !important;
    border-color: var(--ida-purple) !important;
    color: #fff !important;
    transform: scale(1.06);
  }

  /* Smaller, quieter pill — for header / dense UI contexts */
  .pill--sm{
    padding: 8px 14px 8px 16px;
    gap: .5rem;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    background: rgba(59,63,182,0.92);
  }
  .pill--sm:hover{
    background: var(--ida-purple-bright);
    box-shadow: 0 6px 18px -6px rgba(106,110,232,0.55);
  }
  .pill--sm svg{ width:12px; height:12px; }

  .pill-ghost{
    display:inline-flex; align-items:center; gap:.65rem;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px; letter-spacing: .02em; font-weight: 500;
    border: 1px solid var(--ida-line-strong);
    color:#fff;
    transition: border-color .25s ease, background .25s ease;
  }
  .pill-ghost:hover{ border-color: rgba(106,110,232,0.55); background: rgba(106,110,232,0.06); }

  /* Value-strip dividers · mobile gets horizontal between stacked rows, desktop keeps the column lines (.md\:border-l) */
  @media (max-width: 767px){
    .value-strip > * + *{
      border-top: 1px solid rgba(16,24,32,0.22);
      padding-top: 28px;
    }
    /* Drop the md:border-l on mobile so we don't get a stray left rule under the stacked layout */
    .value-strip > .md\:border-l{ border-left: none; padding-left: 0; }

    /* Tighter section padding on the value strip — collapse the 56px py-14 to ~44px */
    .section-light:has(> .value-strip){ padding-top: 44px !important; padding-bottom: 44px !important; }
    .value-strip{ padding-top: 0 !important; padding-bottom: 0 !important; }

    /* Featured callout cards (Custom Abutments + Case Planning) match service-card inner padding */
    .callout-grid > a.callout-card{ padding: 22px 22px 18px !important; }

    /* Process cards (How We Work) lose the hover outline + lift on mobile */
    .glass:hover{
      transform: none !important;
      border-color: var(--ida-line) !important;
      box-shadow: none !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%) !important;
    }

    /* Stats — 2×2 grid on mobile (instead of single-column stacked) */
    #case-planning .ring-stat + ::after,
    #case-planning > div > .reveal.flex.flex-wrap{
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 18px !important;
      justify-items: center;
    }
    .ring-stat{
      width: 150px !important;
      height: 150px !important;
    }
    .ring-stat > .font-display{
      font-size: 42px !important;
    }
    /* Stat ring labels: smaller + single-line so longer labels (e.g. "Combined Technician Yrs") fit */
    .ring-stat > .text-white\/65{
      font-size: 11px !important;
      padding: 0 4px !important;
      margin-top: 8px !important;
      white-space: nowrap;
      line-height: 1.25 !important;
    }

    /* Grid columns on mobile must not expand past container — needed because
       `lg:col-span-*` has no mobile fallback and a column with un-wrappable content
       (long sentence in a <p>) shrink-wraps to that content. Force columns to wrap and
       fill the container exactly. */
    main > section .grid > div{
      min-width: 0;
      width: 100%;
    }
  }

  /* ---------- Inline arrow-text link (used in hub decision-aid + reference blocks) ---------- */
  .hub-link{
    display: inline-flex; align-items: center; gap: 0.45rem;
    transition: color .25s ease;
  }
  .hub-link .arr{
    width: 12px; height: 12px;
    transition: transform .25s cubic-bezier(.16,1,.3,1);
  }
  .hub-link:hover{ color: #fff !important; }
  .hub-link:hover .arr{ transform: translateX(4px); }

  /* ---------- Vertical gutter label ---------- */
  .gutter{
    display: none !important;
  }
  .gutter--legacy{
    position: absolute; left: 28px; top: 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--ida-text-mute);
    font-weight: 500;
  }
  @media (max-width: 900px){ .gutter{ display:none; } }

  /* ---------- Bracket frame ---------- */
  .bracket{ position: relative; }
  .bracket::before, .bracket::after{
    content:""; position:absolute; width:22px; height:22px;
    border-color: rgba(255,255,255,0.35); border-style:solid; border-width:0;
  }
  .bracket::before{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
  .bracket::after{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }

  /* nav underline-from-left */
  .nav-link{ position:relative; }
  .nav-link::after{
    content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
    background: var(--ida-purple-bright);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .nav-link:hover::after{ transform: scaleX(1); }

  /* purple key word */
  .kw{ color: var(--ida-purple-bright); }

  /* ringed stat */
  .ring-stat{
    width: 220px; height: 220px; border-radius: 999px;
    border: 1px solid rgba(106,110,232,0.35);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position: relative;
    transition: border-color .35s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  }
  .ring-stat::before{
    content:""; position:absolute; inset:10px; border-radius:999px;
    border: 1px dashed rgba(106,110,232,0.15);
  }
  .ring-stat:hover{
    border-color: rgba(106,110,232,0.8);
    transform: translateY(-3px);
    box-shadow: 0 0 60px -10px rgba(106,110,232,0.5);
  }

  /* idle float on 3D objects */
  @keyframes idleFloat{
    0%,100%{ transform: translateY(0) rotate(-2deg); }
    50%   { transform: translateY(-6px) rotate(1.5deg); }
  }
  .idle-float{ animation: idleFloat 6s ease-in-out infinite; will-change: transform; }
  @keyframes idleFloat2{
    0%,100%{ transform: translateY(0) rotate(2deg); }
    50%   { transform: translateY(-5px) rotate(-1.5deg); }
  }
  .idle-float-2{ animation: idleFloat2 5.4s ease-in-out infinite; }

  /* FAQ */
  .faq-item{ border-top: 1px solid var(--ida-line); }
  .faq-item:last-child{ border-bottom: 1px solid var(--ida-line); }
  .faq-q{ display:flex; align-items:center; justify-content:space-between; width:100%; padding: 28px 0; text-align:left; gap: 24px; }
  .faq-icon{
    width: 36px; height:36px; border-radius:999px;
    border: 1px solid rgba(106,110,232,0.45);
    display:flex; align-items:center; justify-content:center;
    color: var(--ida-purple-bright);
    transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease;
    flex-shrink:0;
  }
  .faq-item.open .faq-icon{ transform: rotate(45deg); background: rgba(106,110,232,0.15); border-color: rgba(106,110,232,0.8); }
  .faq-a{ overflow:hidden; max-height:0; transition: max-height .55s cubic-bezier(.16,1,.3,1); }
  .faq-item.open .faq-a{ max-height: 320px; }
  .faq-a-inner{ padding: 0 0 28px 0; max-width: 720px; color: var(--ida-text-mute); line-height: 1.65; }

  /* number counter prevents jitter */
  .stat-num{ font-variant-numeric: tabular-nums; }

  /* small caps spec strip / eyebrow */
  .smcaps{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color: var(--ida-orange); font-weight:500; }
  /* deeper orange on cream for WCAG contrast */
  .section-light .smcaps,
  .section-light-alt .smcaps{ color: #C73D00; }
  /* opt-out modifier for eyebrows that should stay muted (e.g. hero) */
  .smcaps.smcaps--mute,
  .section-light .smcaps.smcaps--mute,
  .section-light-alt .smcaps.smcaps--mute{ color: var(--ida-text-mute); }

  /* ---------- Services full-bleed image-card carousel ---------- */
  .services-carousel{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
  .services-carousel-track{
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 4px;
    padding-inline: max(24px, calc((100vw - 1320px) / 2));
    scroll-padding-inline: max(24px, calc((100vw - 1320px) / 2));
  }
  .services-carousel-track::-webkit-scrollbar{ display: none; }

  .service-card{
    flex: 0 0 auto;
    width: clamp(280px, 38vw, 720px);
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .service-card:hover{ transform: translateY(-3px); }

  .service-card-img{
    position: relative;
    aspect-ratio: 4 / 3;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 60%, rgba(0,0,0,0.20) 100%),
      var(--ida-navy-mid);
    border-radius: 18px;
    overflow: hidden;
  }
  /* Placeholder pattern */
  .service-card-img[data-img-placeholder]::before{
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.55;
    pointer-events: none;
  }
  .service-card-img[data-img-placeholder]::after{
    content: "Image placeholder";
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(255,255,255,0.28); font-weight: 500;
    pointer-events: none;
  }
  /* Real image fills the card; sits beneath text + arrow */
  .service-card-bg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    display: block;
  }
  /* Dark veil for readability of white text over photo */
  .service-card-overlay{
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 38%, rgba(0,0,0,0.0) 62%, rgba(0,0,0,0.40) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Text block: heading + description stacked at top of card */
  .service-card-text{
    position: absolute;
    top: 22px; left: 26px; right: 26px;
    z-index: 2;
  }
  .service-card-label{
    display: block; margin: 0;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 600; color: #fff;
    line-height: 1.15; letter-spacing: -0.015em;
    text-shadow: 0 1px 14px rgba(0,0,0,0.35);
  }
  .service-card-title{
    margin: 10px 0 0;
    font-size: 13.5px; font-weight: 400;
    color: rgba(255,255,255,0.72);
    line-height: 1.5;
    letter-spacing: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  }
  .service-card-img > .service-card-plus{ z-index: 2; }
  .service-card-plus{
    position: absolute; bottom: 22px; right: 22px;
    width: 44px; height: 44px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .service-card:hover .service-card-plus,
  .service-card:focus-visible .service-card-plus{
    background: var(--hub-accent);
    border-color: var(--hub-accent);
    transform: scale(1.06);
  }

  /* Carousel arrows */
  .carousel-arrow{
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--ida-line-strong);
    background: transparent;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
    padding: 0;
  }
  .carousel-arrow:hover:not(:disabled){
    background: rgba(106,110,232,0.15);
    border-color: var(--ida-purple-bright);
    color: var(--ida-purple-bright);
  }
  .carousel-arrow:disabled{ opacity: 0.3; cursor: not-allowed; }

  /* parallax targets */
  .parallax-aurora{ will-change: transform; }
  .parallax-render{ will-change: transform; }

  /* prefers reduced motion */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation: none !important; transition: none !important; }
    .reveal, .reveal-line > span{ opacity:1 !important; transform:none !important; }
  }

  /* selection */
  ::selection{ background: rgba(106,110,232,0.45); color:#fff; }

  /* divider line */
  .hairline{ height:1px; background: var(--ida-line); }

  /* ---------- LIGHT SECTION MODIFIER ---------- */
  /* Cream/bone background variant. Tokens shift inside .section-light. */
  .section-light,
  .section-light-alt{
    --ida-text-mute: rgba(16,24,32,0.62);
    --ida-text-dim:  rgba(16,24,32,0.42);
    --ida-line:        rgba(16,24,32,0.10);
    --ida-line-strong: rgba(16,24,32,0.20);
    --ida-purple-bright: #2A2DAE; /* darker purple for contrast on cream */
    color: #101820;
  }
  .section-light    { background: #F4F0E8 !important; }  /* warm bone — default cream */
  .section-light-alt{ background: #ECE6D8 !important; }  /* deeper bone — use when two cream sections sit adjacent so they read as distinct */
  .section-light .grain::before,
  .section-light.grain::before{ opacity: 0.18; mix-blend-mode: multiply; }
  /* Hide aurora glows in light sections */
  .section-light .aurora-band,
  .section-light .aurora-soft{ display:none; }
  /* Force any decorative absolute gradient overlays inside light sections to fade */
  .section-light > .absolute.inset-0{ opacity: 0.28 !important; mix-blend-mode: multiply; }

  /* Override the white text utilities used throughout the design */
  .section-light .text-white\/95,
  .section-light .text-white\/90,
  .section-light .text-white\/85,
  .section-light .text-white\/80{ color: #101820; }
  .section-light .text-white\/70,
  .section-light .text-white\/65{ color: rgba(16,24,32,0.72); }
  .section-light .text-white\/60,
  .section-light .text-white\/55{ color: rgba(16,24,32,0.6); }
  .section-light .text-white\/45,
  .section-light .text-white\/40{ color: rgba(16,24,32,0.45); }
  .section-light .text-white\/30{ color: rgba(16,24,32,0.32); }
  /* very-low-opacity outline numerals (e.g. "01" decorative) */
  .section-light .text-white\/\[0\.06\]{ color: rgba(16,24,32,0.07); }

  /* Glass cards become solid bone-white with a subtle outline */
  .section-light .glass{
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(16,24,32,0.04), 0 12px 32px -16px rgba(16,24,32,0.10);
  }
  .section-light .hairline{ background: rgba(16,24,32,0.12); }
  .section-light .border-white\/10,
  .section-light .border-white\/15{ border-color: rgba(16,24,32,0.10); }

  /* Gutter label */
  .section-light .gutter{ color: rgba(16,24,32,0.55); }

  /* Pill-ghost buttons inside light sections */
  .section-light .pill-ghost{
    color: #101820;
    border-color: rgba(16,24,32,0.20);
  }
  .section-light .pill-ghost:hover{
    border-color: rgba(106,110,232,0.55);
    background: rgba(106,110,232,0.06);
  }
  /* Keep the orange .kw highlight, but ensure the green badge dot remains visible — leave it */

  /* Legacy section portrait cards: the dark navy gradients are the design — leave them, but
     soften the silhouette overlay so they read intentional on cream */
  .section-light#story .lg\:col-span-5 svg[class*="mix-blend-screen"]{ mix-blend-mode: normal; opacity: 0.5; }
  /* Testimonial avatar circles: increase border for definition on white cards */
  .section-light .glass .rounded-full{ border-color: rgba(16,24,32,0.15) !important; }

  /* nav blur */
  .nav-blur{ background: rgba(10,14,31,0.6); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }

  /* hide scrollbars on hero canvas */
  .crown-glow{
    position: absolute; inset:-30%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(106,110,232,0.35) 0%, transparent 60%);
    filter: blur(20px);
  }

  /* skip nav (visible on focus) */
  .skip-nav{
    position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  }
  .skip-nav:focus{
    position:fixed; top:12px; left:12px; width:auto; height:auto;
    padding:10px 16px; background:#fff; color:#101820; border-radius:6px;
    z-index:1000; font-size:14px;
  }

  /* ---------- Header / nav extras ---------- */
  .header-bar{ height:72px; }

  .nav-phone{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:rgba(255,255,255,0.75);
    transition: color .2s ease;
    white-space:nowrap;
  }
  .nav-phone:hover{ color:#fff; }

  .nav-login{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; color:rgba(255,255,255,0.75);
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
    white-space:nowrap;
  }
  .nav-login:hover{
    color:#fff;
    border-color: rgba(106,110,232,0.55);
    background: rgba(106,110,232,0.06);
  }
  .nav-login svg{ opacity: 0.85; }

  /* Primary nav: items + sliding hover pill */
  .primary-nav{ position:relative; }
  .nav-pill{
    position:absolute; top:50%; left:0;
    height:34px; width:0;
    transform: translate(0,-50%);
    background: rgba(106,110,232,0.14);
    border-radius:999px;
    pointer-events:none; opacity:0;
    transition: transform .35s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1), opacity .2s ease;
    z-index:0;
  }
  .primary-nav > a, .primary-nav > .nav-mega-wrapper > a{
    position:relative; z-index:1;
    display:inline-flex; align-items:center; gap:6px;
    padding: 6px 16px; border-radius:999px;
    font-size:14px;
    color: rgba(255,255,255,0.65);
    transition: color .25s ease;
    white-space:nowrap;
  }
  .primary-nav > a:hover, .primary-nav > .nav-mega-wrapper > a:hover{ color:#fff; }
  .primary-nav .nav-link::after{ display:none; }
  .primary-nav .nav-mega-wrapper.is-open > a{ color:#fff; }


  /* Disabled nav item — keeps it visible but non-interactive (used for pages not yet built) */
  a.is-disabled,
  .nav-link.is-disabled{
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  /* Active page indicator — keep text white; the .nav-pill JS parks under the active item */
  .primary-nav > a.is-active,
  .primary-nav > .nav-mega-wrapper > a.is-active{ color: #fff; }

  /* Hero scattered-pattern overlay — white tint at 6% opacity, anchored center-bottom.
     Uses ::after so it sits above the shader canvas (z:0) but below the content (z:10). */
  .has-hero-pattern::after{
    content: '';
    position: absolute; inset: 0;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern.svg');
            mask-image: url('../images/ida-brand-pattern.svg');
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
            mask-position: center bottom;
    pointer-events: none;
    opacity: 0.06;
    z-index: 1;
  }

  /* Corner pattern overlay (bottom-right) — white tint at 6% opacity. */
  .has-corner-pattern::after{
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 42%;
    aspect-ratio: 1264.9 / 1355.3;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern-corner.svg');
            mask-image: url('../images/ida-brand-pattern-corner.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
            mask-position: bottom right;
    pointer-events: none;
    opacity: 0.06;
    z-index: 1;
  }

  /* Corner pattern overlay (bottom-left variant) — reuses bottom-right SVG mirrored via scaleX(-1). */
  .has-corner-pattern-bl::after{
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 42%;
    aspect-ratio: 1264.9 / 1355.3;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern-corner.svg');
            mask-image: url('../images/ida-brand-pattern-corner.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
            mask-position: bottom right;
    transform: scaleX(-1);
    pointer-events: none;
    opacity: 0.06;
    z-index: 1;
  }

  /* Corner pattern overlay (top-left variant) — white tint at 6% opacity.
     Uses ::after so it doesn't collide with .grain::before on the same section. */
  .has-corner-pattern-tl::after{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 42%;
    aspect-ratio: 1264.9 / 1355.3;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern-corner-top-left.svg');
            mask-image: url('../images/ida-brand-pattern-corner-top-left.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: top left;
            mask-position: top left;
    pointer-events: none;
    opacity: 0.06;
    z-index: 1;
  }

  /* Corner pattern overlay (top-right variant) — white tint at 6% opacity.
     Reuses the top-left SVG mirrored via scaleX(-1), the same trick .has-corner-pattern-bl
     uses on the bottom-right art. Referenced by the responsive width override below
     since this file was written, but never actually defined — so the 17 sections
     that ask for it got no pattern at all. */
  .has-corner-pattern-tr::after{
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 42%;
    aspect-ratio: 1264.9 / 1355.3;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern-corner-top-left.svg');
            mask-image: url('../images/ida-brand-pattern-corner-top-left.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: top left;
            mask-position: top left;
    transform: scaleX(-1);
    pointer-events: none;
    opacity: 0.06;
    z-index: 1;
  }

  /* Gradient hero — /schedule/. The base .hub-hero lays a navy scrim over a
     background photo; with no photo to darken, that scrim is switched off and the
     .aurora-band inside supplies all the colour over the navy fill. */
  .hub-hero--gradient::before{ display: none; }
  .hub-hero--gradient > .aurora-band{ position: absolute; inset: 0; z-index: 0; }
  .hub-hero--gradient > .max-w-\[1400px\]{ position: relative; z-index: 2; }

  .nav-link--mega{ cursor:pointer; }
  .nav-chev{ transition: transform .3s cubic-bezier(.16,1,.3,1); opacity:0.7; }
  .nav-mega-wrapper.is-open .nav-chev{ transform: rotate(180deg); opacity:1; }

  /* Megamenu card */
  .nav-mega-wrapper{ position:relative; }
  .megamenu{
    position:absolute; top:calc(100% + 12px); left:0;
    width:max-content; max-width: calc(100vw - 48px);
    background: rgba(15,18,28,0.96);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border:1px solid var(--ida-line-strong);
    border-radius:16px;
    padding:24px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.03);
    opacity:0; visibility:hidden; transform: translateY(-8px) scale(0.985);
    transform-origin: top left;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    pointer-events:none;
    z-index:60;
  }
  .megamenu.is-open{
    opacity:1; visibility:visible; transform: translateY(0) scale(1); pointer-events:auto;
  }
  .megamenu-grid{
    display:grid;
    grid-template-columns: repeat(4, max-content);
    gap: 28px;
  }
  .mega-col{ min-width: 200px; }
  .mega-col-title{
    display:block;
    font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    color: var(--ida-text-mute); font-weight:600;
    margin-bottom: 14px;
    transition: color .2s ease;
  }
  .mega-col-title:hover{ color:#fff; }
  /* Per-category accent on megamenu Service headings */
  .mega-col-title[href="/crowns-bridges/"]:hover       { color: var(--ida-orange) !important; }
  .mega-col-title[href="/implant-restorations/"]:hover { color: var(--ida-purple-bright) !important; }
  .mega-col-title[href="/dentures/"]:hover             { color: var(--ida-green) !important; }
  .mega-col-title[href="/nightguards/"]:hover          { color: var(--ida-specialty-blue) !important; }

  .mega-col ul{ display:flex; flex-direction:column; gap:4px; }

  .mega-item{
    display:flex; align-items:flex-start; gap:12px;
    padding: 8px; border-radius:10px;
    transition: background .2s ease;
  }
  .mega-item:hover{ background: rgba(255,255,255,0.04); }
  .mega-item-icon{
    display: none;
  }
  .mega-item:hover .mega-item-icon{
    background: rgba(106,110,232,0.18);
    border-color: rgba(106,110,232,0.55);
    color: var(--ida-purple-bright);
  }
  .mega-item-text{ display:flex; flex-direction:column; gap:2px; line-height:1.3; min-width:0; }
  .mega-item-label{ font-size:14px; color:#fff; font-weight:500; }
  .mega-item-desc{ font-size:12px; color: var(--ida-text-mute); transition: color .2s ease; white-space:nowrap; }
  .mega-item:hover .mega-item-desc{ color: rgba(255,255,255,0.78); }

  .mega-view-all{
    display:inline-block; margin-top:14px;
    font-size:12px; color: var(--ida-purple-bright);
    letter-spacing:0.04em;
  }
  .mega-view-all:hover{ color:#fff; }

  /* Narrow dropdown variant (small dropdowns like Insights) */
  .megamenu--narrow{ padding: 10px; min-width: 200px; }
  .megamenu--narrow .megamenu-list{ display:flex; flex-direction:column; gap:2px; }
  .megamenu--narrow .megamenu-list a{
    display:block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.78);
    transition: background .2s ease, color .2s ease;
  }
  .megamenu--narrow .megamenu-list a:hover{
    background: rgba(255,255,255,0.04);
    color: #fff;
  }

  @media (max-width: 1023px){ .megamenu{ display:none; } }

  /* Hamburger */
  .hamburger{
    width:36px; height:36px;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:transparent; border:0; cursor:pointer; padding:0;
  }
  .hamburger span{
    display:block; width:22px; height:1.5px;
    background:#fff; border-radius:2px;
    transition: transform .3s ease, opacity .25s ease;
  }
  .hamburger.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; }
  .hamburger.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
  /* Hide hamburger on desktop. Inline-style block loads after tailwind.css so
     it was overriding .lg:hidden — explicit override here wins the cascade. */
  @media (min-width: 1024px){ .hamburger{ display: none; } }

  /* Mobile drawer */
  .mobile-drawer{
    position:fixed; top:72px; left:0; right:0; bottom:0;
    background: rgba(7,11,17,0.98);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index:49;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    overflow-y:auto;
    display:flex; flex-direction:column;
  }
  .mobile-drawer.is-open{ transform: translateX(0); }
  @media (min-width: 1024px){ .mobile-drawer{ display: none; } }
  .mobile-drawer-nav{ display:flex; flex-direction:column; padding: 16px 24px 12px; }
  .mobile-drawer-nav > a, .mobile-mega > summary{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 4px; font-size: 18px; color:#fff;
    border-bottom: 1px solid var(--ida-line);
    cursor:pointer; list-style:none;
  }
  .mobile-mega > summary::-webkit-details-marker{ display:none; }
  .mobile-mega[open] > summary svg{ transform: rotate(180deg); }
  .mobile-mega svg{ transition: transform .25s ease; }
  .mobile-mega-body{ padding: 8px 0 16px; }
  .mobile-mega-all{
    display:block; padding: 12px 4px;
    font-size:14px; color: var(--ida-purple-bright);
  }
  .mobile-mega-group{ padding: 10px 0; border-top: 1px solid var(--ida-line); }
  .mobile-mega-cat{
    display:block; padding: 6px 4px;
    font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
    color: var(--ida-text-mute); font-weight:500;
  }
  .mobile-mega-group > a:not(.mobile-mega-cat){
    display:block; padding: 8px 4px 8px 14px;
    font-size:15px; color: rgba(255,255,255,0.85);
  }
  .mobile-drawer-footer{
    margin-top:auto; padding: 24px;
    border-top: 1px solid var(--ida-line);
    display:flex; flex-direction:column; gap:12px;
  }
  .mobile-call{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 14px; border-radius: 999px;
    border: 1px solid var(--ida-line-strong); color:#fff; font-size:15px;
  }
  body.menu-open{ overflow:hidden; }

/* ============================================================
   §2 GLOBAL MOBILE RULES, HEADER, NAV, DRAWER  (from header.html)
   ============================================================ */
  /* Global · prevent horizontal scroll caused by off-canvas mobile drawer (fixed + translateX(100%)).
     Use `overflow-x: clip` (not `hidden`) so `position: sticky` descendants keep working — `hidden`
     creates a scroll container that breaks sticky positioning across the page. */
  html, body{ overflow-x: clip; }

  /* Mobile: hide phone / login / Schedule pill below lg (1024px). Hamburger handles all nav on mobile.
     Uses !important because .pill / .nav-phone / .nav-login base styles set `display: inline-flex`
     in per-page CSS, which loads AFTER tailwind.css and overrides the .hidden utility. */
  @media (max-width: 1023px){
    header .nav-phone,
    header .nav-login,
    header .pill.pill--sm{ display: none !important; }
  }

  /* Mobile drawer item polish (loaded after per-page CSS, so wins the cascade) */
  /* 1. Hover state — primary items, mega summaries, sub-items all shift to accent on hover */
  .mobile-drawer-nav > a,
  .mobile-mega > summary,
  .mobile-mega-group > a{ transition: color .2s ease; }
  .mobile-drawer-nav > a:hover,
  .mobile-mega > summary:hover,
  .mobile-mega-group > a:hover{ color: var(--ida-orange) !important; }

  /* 2. Sub-items align flush with primary nav items (drop the 14px left indent) */
  .mobile-mega-group > a:not(.mobile-mega-cat){ padding-left: 4px !important; }

  /* 3. Remove secondary line separators between sub-menu groups */
  .mobile-mega-group{ border-top: none !important; }

  /* ===========================================================
     IDA mobile conventions (recurring rules — apply site-wide)
     =========================================================== */
  @media (max-width: 768px){

    /* RULE 1 · all pill buttons full-width on mobile, content centered */
    .pill, .pill-ghost, .pill.pill--accent{
      width: 100% !important;
      justify-content: center !important;
      justify-self: stretch !important;
    }

    /* RULE 2 · section headings left-justified on mobile (unless overridden per page).
       Excludes `.hub-hero` — heroes keep their centered layout. */
    main > section:not(.hub-hero) .text-center,
    main > section:not(.hub-hero) .text-center h1,
    main > section:not(.hub-hero) .text-center h2,
    main > section:not(.hub-hero) .text-center h3,
    main > section:not(.hub-hero) .text-center p{ text-align: left !important; }
    main > section:not(.hub-hero) .text-center{ margin-left: 0 !important; margin-right: 0 !important; }

    /* RULE 3 · corner pattern overlays scale up to 75% on mobile (was 42% desktop) */
    .has-corner-pattern::after,
    .has-corner-pattern-tr::after,
    .has-corner-pattern-tl::after,
    .has-corner-pattern-bl::after{ width: 75% !important; }

    /* RULE 4 · in image+text sections, the IMAGE COLUMN ALWAYS COMES FIRST on mobile.
       Catches: .hub-feature-img wrappers, direct <img>/<picture>/<figure> children,
       and image columns where the image is wrapped one level deep in a <a> link. */
    main > section .grid > div:has(.hub-feature-img),
    main > section .grid > div:has(> img),
    main > section .grid > div:has(> picture),
    main > section .grid > div:has(> figure),
    main > section .grid > div:has(> a > img){ order: -1; }

    /* RULE 5 · section top/bottom padding -20px on mobile (excluding hub-hero, which keeps full hero padding) */
    main > section:not(.hub-hero){
      padding-top: 92px !important;
      padding-bottom: 92px !important;
    }

    /* RULE 9 · gradient treatments (aurora-band / aurora-soft / aurora-cta) must NOT warp on mobile.
       Cause: the desktop gradients use percentage-sized ellipses ("50% 80% at 20% 50%"). On a
       tall section the vertical % blows the ellipse into a smeared column.
       Fix: redefine with FIXED-PIXEL CIRCLES anchored at percentage positions. The element
       still covers the full section (`inset: 0`) — each colored blob stays round, reads as
       an atmospheric glow, and the gradient scales correctly regardless of section height.
       Apply this pattern to any new gradient overlay introduced site-wide. */
    .aurora-band{
      background:
        radial-gradient(circle 360px at 20% 12%, rgba(59,63,182,0.55) 0%, transparent 70%),
        radial-gradient(circle 320px at 75% 45%, rgba(106,63,182,0.40) 0%, transparent 70%),
        radial-gradient(circle 380px at 95% 90%, rgba(249,78,0,0.30) 0%, transparent 70%) !important;
    }
    .aurora-soft{
      background:
        radial-gradient(circle 340px at 85% 12%, rgba(59,63,182,0.32) 0%, transparent 65%),
        radial-gradient(circle 300px at 12% 60%, rgba(106,110,232,0.22) 0%, transparent 65%) !important;
    }
    .aurora-cta{
      background:
        radial-gradient(circle 340px at 50% 30%, rgba(106,63,182,0.65) 0%, transparent 65%),
        radial-gradient(circle 300px at 25% 65%, rgba(59,63,182,0.75) 0%, transparent 70%),
        radial-gradient(circle 320px at 80% 88%, rgba(249,78,0,0.45) 0%, transparent 65%) !important;
    }

    /* RULE 6 · hub-hero h1 highlight (`.hl.hl-hub`) keeps its accent treatment on mobile.
       (Previous version dropped the background — restored per Sebastian's request so the
       highlight reads on core-service hero pages.) */

    /* RULE 7 · arrow-link + pill pairing on mobile.
       - When a flex container holds BOTH a .pill and a .arrow-link, switch to column.
       - The pill is full-width (rule 1) so the arrow-link stacks below it, horizontally centered. */
    :where(div, section, nav, ul, li):has(> .pill):has(> .arrow-link){
      flex-direction: column !important;
      align-items: center !important;
    }
    :where(div, section, nav, ul, li):has(> .pill) > .arrow-link{
      align-self: center !important;
      margin-left: auto;
      margin-right: auto;
    }

    /* RULE 8 · standalone arrow-link follows content alignment on mobile.
       - Default: left-justified (already set via base `.arrow-link { align-self: flex-start; width: fit-content }`)
       - Inside a centered content block (`.text-center`, `.justify-center`, `.items-center`):
         arrow-link centers with the content.
       Note: RULE 2 forces `text-align: left` on `.text-center` containers (heading-left rule),
       so inline-level centering doesn't work. We promote the arrow-link to `display: flex`
       (block-level) + `margin: 0 auto` so it horizontally centers regardless of parent text-align. */
    .text-center .arrow-link,
    [class*="text-center"] > .arrow-link,
    [class*="items-center"] > .arrow-link:not(:has(~ .pill)),
    [class*="justify-center"] > .arrow-link:not(:has(~ .pill)){
      display: flex !important;
      align-self: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* Reliable responsive show/hide utilities — use these instead of Tailwind .hidden when the
     target has a base `display: inline-flex` or similar (e.g. .pill, .pill-ghost), since
     Tailwind's .hidden loses to per-page CSS without !important. */
  @media (max-width: 767px){ .desktop-only{ display: none !important; } }
  @media (min-width: 768px){ .mobile-only{  display: none !important; } }

  /* ===========================================================
     Solid-color hero variant · used on sub-service pages
     `.hub-hero--solid` swaps the bg-image hero for a flat accent fill, with
     the brand corner-pattern overlay anchoring the bottom-right corner.
     =========================================================== */
  .hub-hero.hub-hero--solid::before{ display: none; }
  .hub-hero.hub-hero--solid{
    background-color: var(--hub-accent) !important;
    background-image: none !important;
  }
  .hub-hero.hub-hero--solid .reveal.smcaps{ color: rgba(255,255,255,0.85) !important; }
  /* Hero CTA pill · white fill + accent text · hover navy fill + white text */
  .hub-hero.hub-hero--solid .pill{
    background: #fff;
    color: var(--hub-accent);
    box-shadow: 0 12px 40px -10px rgba(0,0,0,0.25);
  }
  .hub-hero.hub-hero--solid .pill:hover{
    background: var(--ida-navy-deep);
    color: #fff;
    box-shadow: 0 18px 48px -10px rgba(0,0,0,0.45);
  }
  /* Corner-pattern BL overlay (flipped — anchors the bottom-left) */
  .has-corner-pattern-bl::after{
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 42%;
    aspect-ratio: 1264.9 / 1355.3;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern-corner.svg');
            mask-image: url('../images/ida-brand-pattern-corner.svg');
    -webkit-mask-size: contain;          mask-size: contain;
    -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
    -webkit-mask-position: bottom left;  mask-position: bottom left;
    transform: scaleX(-1);
    pointer-events: none;
    opacity: 0.14;
    z-index: 1;
  }
  /* Ensure hero content (heading, copy, CTA pill) sits ABOVE the corner-pattern overlay.
     The pattern uses z-index: 1 absolutely-positioned ::after — without this, the pill
     CTA can render behind the pattern on solid sub-service heroes. */
  .hub-hero > .max-w-\[1400px\],
  .hub-hero > div{ position: relative; z-index: 2; }

  /* Corner-pattern BR overlay (anchors the bottom-right corner of solid heroes) */
  .has-corner-pattern::after{
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 42%;
    aspect-ratio: 1264.9 / 1355.3;
    background-color: #fff;
    -webkit-mask-image: url('../images/ida-brand-pattern-corner.svg');
            mask-image: url('../images/ida-brand-pattern-corner.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: bottom right;
            mask-position: bottom right;
    pointer-events: none;
    opacity: 0.14;
    z-index: 1;
  }

  /* ===========================================================
     Alt header treatment · body.solid-hero
     For sub-service pages with a solid-color (`hub-hero--solid`) hero.
     Header floats transparent over the hero, all chrome inverts to white.
     Once scrolled past the hero, header.is-past-hero adds the normal nav-blur
     background back, and chrome reverts to the standard dark/branded styling.
     Toggled by IntersectionObserver in the script at the bottom of this partial.
     =========================================================== */
  /* Smooth transitions between the two states */
  body.solid-hero header.nav-blur,
  body.solid-hero header.nav-blur img[alt*="International Dental Arts"],
  body.solid-hero header.nav-blur .nav-link,
  body.solid-hero header.nav-blur .nav-phone,
  body.solid-hero header.nav-blur .nav-login,
  body.solid-hero header.nav-blur .pill.pill--sm,
  body.solid-hero header.nav-blur .hamburger span{
    transition: background .25s ease, border-color .25s ease, color .25s ease, filter .25s ease, backdrop-filter .25s ease;
  }

  /* State 1: OVER the hero · transparent header, all chrome white */
  body.solid-hero header.nav-blur:not(.is-past-hero){
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }
  body.solid-hero header.nav-blur:not(.is-past-hero) img[alt*="International Dental Arts"]{
    filter: brightness(0) invert(1);
  }
  body.solid-hero header.nav-blur:not(.is-past-hero) .nav-link{ color: #fff; }
  body.solid-hero header.nav-blur:not(.is-past-hero) .nav-pill{ background: rgba(255,255,255,0.16) !important; }
  body.solid-hero header.nav-blur:not(.is-past-hero) .nav-phone,
  body.solid-hero header.nav-blur:not(.is-past-hero) .nav-login{
    color: #fff;
    border-color: rgba(255,255,255,0.32) !important;
  }
  body.solid-hero header.nav-blur:not(.is-past-hero) .nav-phone:hover,
  body.solid-hero header.nav-blur:not(.is-past-hero) .nav-login:hover{
    border-color: rgba(255,255,255,0.65) !important;
    background: rgba(255,255,255,0.06);
  }
  body.solid-hero header.nav-blur:not(.is-past-hero) .pill.pill--sm{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff !important;
    box-shadow: none !important;
  }
  body.solid-hero header.nav-blur:not(.is-past-hero) .pill.pill--sm:hover{
    background: #fff !important;
    color: var(--hub-accent) !important;
    border-color: #fff;
  }
  body.solid-hero header.nav-blur:not(.is-past-hero) .hamburger span{ background: #fff !important; }

  /* State 2: SCROLLED past hero · standard nav-blur background, default chrome.
     Nothing to override — the base .nav-blur styles take effect because the
     :not(.is-past-hero) selectors no longer match. */

  /* ===========================================================
     Standard inline arrow-link · accent color · underline grows on hover · arrow shifts right.
     Use this for secondary CTAs and inline "read more" links anywhere on the site.
     =========================================================== */
  .arrow-link{
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 15px; font-weight: 500;
    letter-spacing: -0.005em;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: opacity .2s ease, border-color .2s ease;
    /* Stop the underline from stretching to full container width when the link
       is a flex item (e.g. card columns) — flex items blockify `inline-flex`. */
    align-self: flex-start;
    width: fit-content;
  }
  .arrow-link .arrow-link-arr{ transition: transform .25s cubic-bezier(.16,1,.3,1); }
  .arrow-link:hover{ border-bottom-color: currentColor; }
  .arrow-link:hover .arrow-link-arr{ transform: translateX(5px); }

  /* When .arrow-link carries .mx-auto, promote to block-flex so margin: 0 auto centers it
     (inline-flex margin-auto doesn't center inline-level boxes). */
  .arrow-link.mx-auto{ display: flex; }

  /* RULE · whenever an .arrow-link sits next to a .pill in the same flex container,
     the pair must be cross-axis centered (vertical-center the underline link with the pill). */
  :where(div, section, nav, ul, li):has(> .pill):has(> .arrow-link){
    align-items: center;
  }
  /* And the arrow-link itself overrides its default `align-self: flex-start` in that context. */
  :where(div, section, nav, ul, li):has(> .pill) > .arrow-link,
  :where(div, section, nav, ul, li):has(> .arrow-link) > .pill ~ .arrow-link,
  :where(div, section, nav, ul, li):has(> .pill) > .arrow-link ~ .pill{
    align-self: center;
  }

  /* ===========================================================
     section-light-alt — extend the same text-color overrides
     that section-light gets (per-page CSS only targets .section-light).
     =========================================================== */
  .section-light-alt .text-white\/95,
  .section-light-alt .text-white\/90,
  .section-light-alt .text-white\/85,
  .section-light-alt .text-white\/80{ color: #101820; }
  .section-light-alt .text-white\/75,
  .section-light-alt .text-white\/70,
  .section-light-alt .text-white\/65{ color: rgba(16,24,32,0.72); }
  .section-light-alt .text-white\/60,
  .section-light-alt .text-white\/55{ color: rgba(16,24,32,0.6); }
  .section-light-alt .text-white\/45,
  .section-light-alt .text-white\/40{ color: rgba(16,24,32,0.45); }
  .section-light-alt .text-white\/30{ color: rgba(16,24,32,0.32); }
  /* keep deep-orange smcaps + hide aurora glows for parity with section-light */
  .section-light-alt .aurora-band,
  .section-light-alt .aurora-soft{ display: none; }
  /* glass cards solid-white on dark cream */
  .section-light-alt .glass{
    background: #fff;
  }

  /* Responsive border-white variants also need the cream remap (sm:/md:/lg: prefixes) */
  .section-light .md\:border-white\/10,
  .section-light .lg\:border-white\/10,
  .section-light .md\:border-white\/15,
  .section-light .lg\:border-white\/15,
  .section-light-alt .md\:border-white\/10,
  .section-light-alt .lg\:border-white\/10,
  .section-light-alt .md\:border-white\/15,
  .section-light-alt .lg\:border-white\/15{ border-color: rgba(16,24,32,0.22); }

/* ============================================================
   WORDPRESS-SPECIFIC ADDITIONS
   Everything below this line has no counterpart in the static build.
   ============================================================ */

/* ── Admin bar ──────────────────────────────────────────────────────────
   The site header is position:fixed at top:0, so the 32px admin bar would
   overlap it for logged-in editors. */
body.admin-bar .header-bar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header-bar { top: 46px; }
}

/* ── Skip link ──────────────────────────────────────────────────────────
   Visually hidden until focused. First element in <body>. */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ida-orange);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-nav:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* ── Visible focus for keyboard users ───────────────────────────────────
   The static build relied on browser defaults, which the dark backgrounds
   made nearly invisible. */
:focus-visible {
  outline: 3px solid var(--ida-specialty-blue);
  outline-offset: 2px;
}
.section-light :focus-visible {
  outline-color: var(--ida-purple);
}

/* ── .prose — post and event body content ───────────────────────────────
   Styles raw editor HTML. The static posts inconsistently applied utility
   classes to their body headings; in WordPress the editor emits bare tags,
   so these rules carry the whole burden. Matches the static .prose block. */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1.25em; }
.prose p { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,0.78); }
.prose h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  margin-top: 2em;
  color: #fff;
}
.prose h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  margin-top: 1.75em;
  color: #fff;
}
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.5em; line-height: 1.7; color: rgba(255,255,255,0.78); }
.prose li::marker { color: var(--hub-accent); }
.prose strong { color: #fff; font-weight: 700; }
.prose a {
  color: var(--hub-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose blockquote {
  border-left: 3px solid var(--hub-accent);
  padding-left: 1.25em;
  font-size: 19px;
  line-height: 1.6;
  color: #fff;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.prose figcaption {
  font-size: 13px;
  color: var(--ida-text-dim);
  margin-top: 0.6em;
}
/* Cream-background variant, for legal/policy pages. */
.section-light .prose p,
.section-light .prose li { color: rgba(16,24,32,0.78); }
.section-light .prose h2,
.section-light .prose h3,
.section-light .prose strong,
.section-light .prose blockquote { color: var(--ida-navy-brand); }

/* ── WordPress core alignment + caption classes ─────────────────────────*/
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ida-text-dim); }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Contact Form 7 ─────────────────────────────────────────────────────
   The static build used four hand-rolled PHP-POST forms. CF7 replaces them,
   so its output has to inherit the same input styling. Field markup differs
   (CF7 wraps every input in a <span class="wpcf7-form-control-wrap">), which
   is why these rules are not just the static form selectors. */
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ida-line-strong);
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 180ms ease, background 180ms ease;
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--ida-text-dim); }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--hub-accent);
  background: rgba(255,255,255,0.08);
}
.wpcf7-form select option { background: var(--ida-navy-brand); color: #fff; }

/* Radio and checkbox groups — the schedule form's call-window fieldset. */
/* Horizontal, wrapping, with the source's own gaps. This was `display: grid` with a
   10px gap — a vertical stack, where the source lays the call-window and start-with
   options out in a wrapping row at `gap: 0.5rem 1.75rem`. Nothing rendered these until
   now, because neither form had radios at all: both shipped as generic contact forms. */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
}
.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] { accent-color: var(--hub-accent); width: 18px; height: 18px; }

/* Submit — reuses the .pill treatment. */
.wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hub-accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}
.wpcf7-form input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wpcf7-form input[type="submit"]:active { transform: translateY(0); }

/* Visually hidden, still announced. The source labels every form field this way and
   lets the placeholder carry the visible cue — and `.sr-only` was NOT COMPILED anywhere,
   so the one label already using it was showing too. A placeholder alone is not a label:
   it disappears on focus and is not reliably announced, so these stay as real <label for>
   elements rather than being deleted. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Forms on a LIGHT section ────────────────────────────────────────────────
   Every CF7 rule above is written for a dark background: white text on a 5%-white
   fill with a light border. All THREE page forms — /contact/, /schedule/ and
   /become-a-client/ — sit inside `.section-light`, so they were rendering white text
   on a near-white card. Only the footer newsletter is genuinely on dark, which is why
   the dark base stays.

   Values below are the source's own, read off its inline styles rather than eyeballed:
     input/textarea   background rgba(16,24,32,0.03) · border rgba(16,24,32,0.12)
                      colour #0F1116 · padding 12px 16px · radius 8px · 14px
     legend           13px, rgba(16,24,32,0.65), 12px below
     radio row        14px, rgba(16,24,32,0.85), gap 0.5rem 1.75rem
     footnote         12px, rgba(16,24,32,0.50), centred

   ONE DELIBERATE DEPARTURE, listed: the source gives selects `py-3` with no `px-4`,
   and Tailwind's preflight zeroes form-control padding — so in the reference a select's
   text sits flush against its own left border while the inputs beside it have 16px.
   That is a defect rather than a decision, so selects get the same 16px here. Say the
   word and it becomes a one-line change back. */
.section-light .wpcf7-form input[type="text"],
.section-light .wpcf7-form input[type="email"],
.section-light .wpcf7-form input[type="tel"],
.section-light .wpcf7-form input[type="url"],
.section-light .wpcf7-form select,
.section-light .wpcf7-form textarea {
  background: rgba(16,24,32,0.03);
  border: 1px solid rgba(16,24,32,0.12);
  border-radius: 8px;
  padding: 12px 16px;
  color: #0F1116;
  font-size: 14px;
}
.section-light .wpcf7-form input::placeholder,
.section-light .wpcf7-form textarea::placeholder { color: rgba(16,24,32,0.45); }
.section-light .wpcf7-form input:focus,
.section-light .wpcf7-form select:focus,
.section-light .wpcf7-form textarea:focus {
  border-color: var(--hub-accent);
  background: rgba(16,24,32,0.05);
}
.section-light .wpcf7-form select option { background: #fff; color: #0F1116; }

.section-light .ida-fieldset legend {
  font-size: 13px;
  color: rgba(16,24,32,0.65);
  margin-bottom: 0.75rem;
}
.section-light .wpcf7-form .wpcf7-radio,
.section-light .wpcf7-form .wpcf7-checkbox { font-size: 14px; color: rgba(16,24,32,0.85); }
.section-light .wpcf7-form .wpcf7-list-item label { font-size: 14px; gap: 0.5rem; }

/* The submit is a pill spanning both columns and centred, as the source has it. */
/* CF7 runs the form through wpautop, so it wraps the submit in its own <p>. That <p>
   carries the theme's paragraph margins and pushed everything below it down — the note
   sat ~47px under the button against the source's 8. Zeroed here rather than fighting
   wpautop, which would mangle the rest of the markup. */
.ida-fg-2 .wpcf7-submit-row { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 0.5rem; }
.ida-fg-2 .wpcf7-submit-row p { margin: 0; }

/* CF7 always emits a spinner and only makes it VISIBLE while submitting — but it still
   occupies 24px of inline space beside the button the rest of the time, which the source
   has no equivalent for. Taken out of flow until the form is actually submitting. */
.wpcf7-form:not(.submitting) .wpcf7-spinner { display: none; }
/* The note the source puts INSIDE the form grid at mt-2. Rendered after </form> it
   also inherited the form's 1rem bottom margin, making the gap ~32px against the
   source's 8 — hence the negative pull-up, which lands it exactly 8px under the
   submit row wherever it is in the DOM. */
.ida-form-note {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255,255,255,0.5);
}
/* .ida-fg-2's own 1rem bottom margin collapses through the form and lands between the
   submit and the note, so the gap measured 16px against the source's 8. The grid is
   always the last visible thing in these forms — only the hidden honeypot and the
   response output follow it — so it carries no trailing margin inside a CF7 form. */
.wpcf7-form .ida-fg-2 { margin-bottom: 0; }
.section-light .ida-form-note { color: rgba(16,24,32,0.50); }
.section-light .ida-form-note a { color: inherit; text-decoration: underline; }

/* Validation + response messages. */
.wpcf7-not-valid-tip { color: #FF8A8A; font-size: 13px; margin-top: 6px; }
.wpcf7-form .wpcf7-not-valid { border-color: #FF8A8A; }
.wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--ida-line-strong);
  font-size: 15px;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output { border-color: #FF8A8A; color: #FF8A8A; }
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--ida-green); color: var(--ida-green-soft); }
.wpcf7-spinner { margin-left: 10px; }

/* Honeypot — every IDA form carries one. Must never be visible or focusable. */
.wpcf7-form .ida-honeypot,
.wpcf7-form .wpcf7-form-control-wrap[class*="honeypot"] {
  position: absolute !important;
  left: -9999px !important;
}

/* The cream-section form variant used to live here with `background: #fff` and a
   0.18 border — invented values, not the source's. It sat AFTER the correct block
   further up and silently won on source order, which is why the fields looked close
   but never right. Merged into the single block above, on the source's own numbers
   (0.03 fill, 0.12 border). Two rules for one thing is how that happens. */

/* ── Reduced motion ─────────────────────────────────────────────────────
   The static build only opted .hl out of animation. Honour the preference
   across every entrance animation. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-line > span, .hl {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hl { background-size: 100% 100% !important; }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   §4 HEADER + FOOTER LAYOUT
   ============================================================
   The static build expressed this layout as inline Tailwind utilities on the
   markup (max-w-[1400px] mx-auto px-6 lg:px-10, grid lg:grid-cols-12,
   lg:col-span-4 ...). Per the project rule that global.css drives all visual
   styles, the same values are named classes here. Only .header-bar height and
   the nav/megamenu/drawer internals came over from the static <style> block;
   everything below is the layout those utilities used to provide.
   ============================================================ */

/* ── Shared container ───────────────────────────────────────────────────── */
.ida-container {
  max-width: var(--container-max, 1400px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .ida-container { padding-inline: 2.5rem; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.header-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  /* height: 72px comes from §2 */
}
.header-inner {
  max-width: var(--container-max, 1400px);
  margin-inline: auto;
  padding-inline: 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .header-inner { padding-inline: 2.5rem; }
}
.header-logo { display: flex; align-items: center; flex: 0 0 auto; }
.ida-logo { height: 52px; width: auto; display: block; }
.header-right { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }

/* The logo lockup inverts to white on pages whose hero is a flat accent fill.
   The static build targeted img[alt*="International Dental Arts"], which broke
   whenever an editor changed the alt text. Keyed to the class instead. */
body.solid-hero .header-bar .ida-logo { filter: brightness(0) invert(1); }

.nav-chev { flex: 0 0 auto; opacity: 0.6; transition: transform 200ms ease; }
.nav-mega-wrapper { position: relative; display: flex; align-items: center; }
.nav-mega-wrap[aria-expanded="true"] .nav-chevron,
.nav-mega-wrap.is-open .nav-chev { transform: rotate(180deg); }

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

/* ── Mobile drawer rows ──────────────────────────────────────────────────────
   Nothing here. .mobile-link and .mobile-mega-item were invented names for elements
   the source leaves unclassed, and they had their own rules that COMPETED with the
   ported ones above: 1.25rem/1rem padding against the source's 18px/4px, and
   var(--ida-text-mute) against rgba(255,255,255,0.85). Whichever block loaded last
   won, by accident rather than intent. The markup emits neither class now, so
   `.mobile-drawer-nav > a` and `.mobile-mega-group > a:not(.mobile-mega-cat)` govern
   both — which is what the static build does. */

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--ida-navy-deep);
}
.footer-inner {
  max-width: var(--container-max, 1400px);
  margin-inline: auto;
  padding: 5rem 1.5rem;
}
@media (min-width: 1024px) {
  .footer-inner { padding-inline: 2.5rem; }
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-brand      { grid-column: span 4; }
  .footer-grid > div:not(.footer-brand) { grid-column: span 2; }
}
.footer-tagline {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ida-text-mute);
  max-width: 34ch;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ida-line-strong);
  color: var(--ida-text-mute);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.footer-social a:hover {
  color: #fff;
  border-color: var(--ida-purple-bright);
  background: rgba(106, 110, 232, 0.12);
}
.footer-address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ida-text-mute);
}
.footer-phone {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ida-purple-bright);
}
.footer-phone:hover { color: #fff; }

.footer-links { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.footer-links a {
  font-size: 0.9375rem;
  color: var(--ida-text-mute);
  transition: color 180ms ease;
}
.footer-links a:hover { color: #fff; }

.footer-newsletter-blurb {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ida-text-mute);
  margin-bottom: 1rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
}
.footer-copyright { font-size: 0.8125rem; color: var(--ida-text-dim); }

/* The Hueston credit. inline-flex so the wordmark sits on the text baseline rather
   than dropping below it, and the SVG is given an explicit height because an SVG with
   no intrinsic size renders at whatever the box allows. */
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  transition: opacity 0.2s ease;
}
.footer-credit:hover { opacity: 0.65; }
.footer-credit img { height: 1rem; width: auto; display: inline-block; vertical-align: middle; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.footer-legal a { font-size: 0.8125rem; color: var(--ida-text-dim); }
.footer-legal a:hover { color: #fff; }

/* ── Testimonials carousel ──────────────────────────────────────────────
   Layout only. Type, colour and alignment come from utilities in the template,
   matching the source: display type 22→38px, left-aligned, 820px measure.
   An earlier version here centred everything at 23px and added CSS quote marks,
   which was wrong on all three counts. */
.testimonial-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonial-track { position: relative; width: 100%; }
.testimonial-slide > p { margin: 0; }
@media (max-width: 900px) {
  .testimonial-arrow { display: none; }
}

/* ── Blog: cards, filters, pagination, article ──────────────────────────── */
.post-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, 0.08);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.10)); }
.post-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--ida-navy-brand), var(--ida-navy-deep));
}
.post-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card-cat  { color: var(--hub-accent); }
.post-card-date { font-size: 12px; color: rgba(16, 24, 32, 0.5); }
.post-card-excerpt { font-size: 14px; line-height: 1.6; color: rgba(16, 24, 32, 0.7); flex: 1; }

/* Real category links, replacing the static build's JS-only pills — those were
   display:none under 768px and invisible to crawlers. */
.post-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.post-filter {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 24, 32, 0.14);
  font-size: 14px;
  transition: border-color 180ms ease, background 180ms ease;
}
.post-filter:hover, .post-filter.is-active {
  border-color: var(--hub-accent);
  background: color-mix(in srgb, var(--hub-accent) 10%, transparent);
}

.post-pagination { margin-top: 3rem; }
.post-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.post-pagination .page-numbers {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(16, 24, 32, 0.14);
  font-size: 14px;
}
.post-pagination .page-numbers.current {
  background: var(--hub-accent);
  border-color: var(--hub-accent);
  color: #fff;
}

/* Article header + share */
.article-title { font-size: clamp(36px, 4.5vw, 60px); line-height: 1.08; }
.article-byline {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: 2rem; font-size: 14px; color: var(--ida-text-dim);
}
.article-byline > span + span::before { content: '· '; }
.article-featured { background: var(--ida-navy-deep); padding-bottom: 0; }
.article-featured img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 14px; }

.article-share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(16, 24, 32, 0.12);
  max-width: 720px;
}
/* Author row, on the same rule as the share links. Ported from the source: a round
   accent chip with the initials, the team name in display type, and the strapline
   beneath. It sits left, the share links right, hence justify-content: space-between
   on .article-share. */
.article-author { display: flex; align-items: center; gap: 1rem; margin-right: auto; }
.article-author-chip {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--hub-accent, var(--ida-orange)); color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px; letter-spacing: -0.01em;
}
.article-author-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px; letter-spacing: -0.015em; color: #0F1116;
}
.article-author-strap { font-size: 13px; color: rgba(16, 24, 32, 0.55); margin-top: 2px; }

.article-share-links { display: flex; align-items: center; gap: 0.5rem; }
.article-share-links a,
.article-share-links button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 38px; padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 24, 32, 0.14);
  background: transparent;
  color: rgba(16, 24, 32, 0.65);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.article-share-links a:hover,
.article-share-links button:hover {
  color: #fff; background: var(--hub-accent); border-color: var(--hub-accent);
}
.arrow-link--back::before { content: '\2190'; margin-right: 0.4rem; }

/* 404 code block */
.error-code {
  font-size: clamp(72px, 12vw, 160px);
  line-height: 1;
  color: var(--ida-orange);
  opacity: 0.9;
}

/* Scheduler embed (Thank You page, optional) */
.scheduler-embed { border-radius: 16px; overflow: hidden; background: #fff; }

/* ── Flexible-page layout components ────────────────────────────────────
   The static build styled these inline. Values transcribed from the service
   hub and Lab Forms / Digital Impressions pages. */


/* Non-linking service cards (the Nightguards hub) — hover suppressed. */
.service-card--static { cursor: default; }
.service-card--static:hover .service-card-img { transform: none; }
.service-card--static:hover { transform: none; box-shadow: none; }

/* Contact detail rows ────────────────────────────────────────────────────────
   Ported verbatim. The previous version was a 2-column label/value grid with a
   BOTTOM border and 16px body copy; the source is a stacked list with a TOP
   border, 1.5rem vertical padding, and the value set in display type at 19-22px
   with no underline. Every one of those differences was visible. */
.contact-rows { list-style: none; padding: 0; margin: 0; }
.contact-row {
  border-top: 1px solid rgba(16,24,32,0.10);
  padding: 1.5rem 0;
}
.contact-row .smcaps { display: block; margin-bottom: 0.5rem; }
.contact-row-value {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #0F1116;
}
/* Rows whose value is a sentence rather than a single address sit a step down,
   matching the source's 19-20px on those. */
.contact-row-value--prose { font-size: 19px; line-height: 1.4; }
/* The postal address: three lines of display type at 20px, between the single-line
   22px addresses and the 19px prose rows. It was rendering at 22px. */
.contact-row-value--mid { font-size: 20px; line-height: 1.35; }
.contact-row-value a { color: inherit; transition: opacity .2s ease; }
.contact-row-value a:hover { opacity: 0.7; }

/* Tab panel image */
.tab-img { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.tab-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Form wrapper — constrains CF7 output to a readable measure. */
.ida-form { max-width: 720px; }

/* ── About + Schedule layout components ─────────────────────────────────── */
.story-scroller { display: grid; gap: 4rem; }
.story-slide { padding: 2.5rem; border-radius: 20px; background: var(--story-bg, transparent); }
.story-slide-img { aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; }
.story-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }



.note-photo { aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; }
.note-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-signature { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.15rem; }
.quote-card {
  display: flex; gap: 0.9rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ida-line-strong);
}
.section-light .quote-card { background: #fff; border-color: rgba(16, 24, 32, 0.1); }
.quote-card p { font-size: 16px; line-height: 1.6; font-style: italic; }
.quote-card svg { flex: 0 0 auto; margin-top: 3px; }

/* ── Event info panel ───────────────────────────────────────────────────── */
.event-panel {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, 0.1);
}
@media (min-width: 768px) {
  .event-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
}
.event-panel-cell { display: flex; flex-direction: column; gap: 0.3rem; }
.event-panel-cell--cta { justify-content: center; }
.event-panel-value {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; letter-spacing: -0.02em;
  font-size: 18px; color: var(--ida-navy-brand);
}
.event-panel-sub { font-size: 14px; color: rgba(16, 24, 32, 0.6); }

/* ── CF7 field groups (used by _migrate/cf7-seed) ───────────────────────── */
/* gap-3 in the source, which is 0.75rem — this was 1rem. */
.ida-fg-2  { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .ida-fg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ida-fg-2 label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* ── Form field spans and fieldsets ─────────────────────────────────────────
   .ida-fg-full is the source's sm:col-span-2: the message textarea, the practice
   address, and each radio fieldset run the full width of the two-column grid. */
.ida-fg-full { grid-column: 1 / -1; }

.ida-fieldset { border: 0; padding: 0; margin: 0; }
.ida-fieldset legend {
  display: block;
  font-size: 0.8125rem;
  color: var(--ida-text-mute);
  margin-bottom: 0.75rem;
  padding: 0;
}

/* The footer newsletter strip: one rounded row, field and button side by side, the
   way the source composes it. */
.ida-newsletter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border: 1px solid var(--ida-line);
  border-radius: 999px;
}
.ida-newsletter-row label { flex: 1; margin: 0; }
.ida-newsletter-row input[type="email"] {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  color: #fff;
}
.ida-newsletter-row input[type="email"]::placeholder { color: rgba(255,255,255,0.35); }
.ida-newsletter-row input[type="email"]:focus { outline: none; }
.ida-newsletter-row input[type="submit"] {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  font-size: 0.8125rem;
  background: var(--ida-specialty-blue);
  color: #06121a;
  border: 0;
  cursor: pointer;
}

/* ── Share buttons ──────────────────────────────────────────────────────── */
.share-copy-link { font: inherit; }
.share-copy-label { letter-spacing: 0.01em; }

/* ── Footer newsletter column ───────────────────────────────────────────── */
.footer-newsletter { display: flex; flex-direction: column; }


/* ── Reveal safety net ──────────────────────────────────────────────────────
   no-js safety: the reveal system hides content until JS adds .in. If the
   script fails to load or throws, that leaves the page permanently blank —
   which is exactly what happened once already. <html> gets .ida-js from the
   script itself, so the hidden state only ever applies when JS is alive to
   undo it. */
html:not(.ida-js) .reveal,
html:not(.ida-js) .reveal-line > span {
  opacity: 1 !important;
  transform: none !important;
}


/* ── Service-detail decision aid ─────────────────────────────────────────────
   Ported from the detail pages' 3rd <style> block. The active state is driven
   by [aria-selected] on the button, not by a class — so the a11y attribute and
   the visual state can never disagree. */
.decision-tabs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.decision-tab {
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 17px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  display: flex; align-items: center; gap: 0.85rem;
}
.decision-tab:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); }
.decision-tab[aria-selected="true"] {
  background: var(--hub-accent);
  border-color: var(--hub-accent);
  color: #fff;
}
.decision-tab[aria-selected="true"] .decision-tab-num { background: rgba(255,255,255,0.22); }
.decision-tab-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  transition: background .2s ease;
}
.decision-panel { display: none; }
.decision-panel.is-active { display: block; animation: idaFadeIn .3s ease; }
@keyframes idaFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Service-detail FAQ accent scope ────────────────────────────────────────
   The detail pages' 4th <style> block. Recolours the shared FAQ chrome to the
   page's --hub-accent; without it every detail page's FAQ icons read purple. */
.subservice-page .faq-icon { border-color: var(--hub-accent); color: var(--hub-accent); }
.subservice-page .faq-item.open .faq-icon {
  background: color-mix(in srgb, var(--hub-accent) 15%, transparent);
  border-color: var(--hub-accent);
}
.subservice-page .pill.pill--accent {
  background: var(--hub-accent);
  box-shadow: 0 12px 40px -10px color-mix(in srgb, var(--hub-accent) 55%, transparent);
}
.subservice-page .pill.pill--accent:hover {
  background: var(--hub-accent);
  box-shadow: 0 18px 48px -10px color-mix(in srgb, var(--hub-accent) 75%, transparent);
}

/* ── Flat (non-animating) accent highlight ──────────────────────────────────
   The cream sections on the service-detail pages highlight a word with a solid
   accent block that is present on load rather than sweeping in. The source did
   this with a repeated inline style on 42 spans, at two different horizontal
   paddings (0.10em on section headings, 0.08em in the FAQ) with no reason for
   the difference — standardised here on 0.10em. */
.hl-flat {
  /* Colour and horizontal padding are both overridable, because the source varies
     them per section: 0.10em on the detail-page headings, 0.08em in their FAQ,
     and 0 with --ida-purple on the For Dentists feature band. A heading that
     needs a different pair sets --hl-flat-color / --hl-flat-pad inline rather
     than earning its own modifier class. */
  background: var(--hl-flat-color, var(--hub-accent));
  color: #fff;
  padding: 0.04em var(--hl-flat-pad, 0.10em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Corner pattern, accent-tinted top-left ─────────────────────────────────
   The prep-guide band on the service-detail pages. Same geometry as
   .has-corner-pattern-tl but painted in --hub-accent at 7% rather than white at
   6%, because it sits on cream. The source did this with an absolutely
   positioned <div> carrying 350 characters of inline mask CSS. */
.has-corner-pattern-tl-accent { position: relative; }
.has-corner-pattern-tl-accent::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 42%;
  aspect-ratio: 1264.9 / 1355.3;
  background-color: var(--hub-accent);
  -webkit-mask-image: url('../images/ida-brand-pattern-corner-top-left.svg');
          mask-image: url('../images/ida-brand-pattern-corner-top-left.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top left;
          mask-position: top left;
  pointer-events: none;
  opacity: 0.07;
  z-index: 1;
}

/* ══ Named components used by the flexible / thank-you / event templates ══════
   These class names were in the markup with no rules behind them, which renders
   as unstyled text — no error, no warning. Found by bin/check-classes.py.

   Declarations are lifted from the equivalent verbatim-ported sections on the
   service-detail pages, so a flexible-page ADA grid and a service-detail ADA
   grid look identical instead of merely similar.

   Base values assume a navy section, since that is the theme default; the
   .section-light overrides follow each block. */

/* ── Image fill ─────────────────────────────────────────────────────────────
   Passed to ida_image() from a dozen call sites. Where the parent already
   styles its img (.hub-feature-img) this is redundant; where it doesn't
   (.related-card-img, post hero, .note-photo) the image was overflowing. */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── ADA / procedure-code cards ─────────────────────────────────────────── */
.ada-card {
  border-radius: 0.75rem;
  padding: 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.ada-code {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  color: var(--hub-accent);
  font-size: 32px;
  line-height: 1;
}
.ada-label {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
  color: #fff;
}
.ada-note { font-size: 13px; line-height: 1.55; margin-top: 0.5rem; color: rgba(255,255,255,0.65); }
.section-light .ada-card,
.section-light-alt .ada-card { background: #fff; border-color: rgba(16,24,32,0.10); }
.section-light .ada-label,
.section-light-alt .ada-label { color: #0F1116; }
.section-light .ada-note,
.section-light-alt .ada-note { color: rgba(16,24,32,0.62); }

/* ── System / feature cards (implant systems, next steps, event cards) ──── */
.system-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.75rem;
  padding: 1.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
}
a.system-card:hover { transform: translateY(-3px); border-color: var(--hub-accent); }
.system-note { font-size: 13.5px; line-height: 1.55; margin-top: 0.5rem; color: rgba(255,255,255,0.65); }
.section-light .system-card,
.section-light-alt .system-card { background: #fff; border-color: rgba(16,24,32,0.10); }
.section-light .system-note,
.section-light-alt .system-note { color: rgba(16,24,32,0.62); }

/* ── Related-content cards ──────────────────────────────────────────────── */
.related-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: #FFFFFF;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.related-card:hover { transform: translateY(-4px); }
.related-card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.related-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; }
.related-card-body h3 { color: #0F1116; margin-bottom: 0.75rem; }
.related-card-body .smcaps { margin-bottom: 0.75rem; }
.related-card-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
  color: rgba(16,24,32,0.68);
}
.related-card .arrow-link { align-self: flex-start; color: var(--hub-accent); }

/* ── Stat pairs (flexible-page stat rows) ───────────────────────────────────
   The homepage uses .ring-stat, a circle. This is the plain stacked variant. */
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hub-accent);
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 0.75rem; color: rgba(255,255,255,0.65); }
.section-light .stat-label,
.section-light-alt .stat-label { color: rgba(16,24,32,0.62); }

/* ── Cross-links inside the two-paths comparison bullets ────────────────────
   A few of those bullets are links to a sibling service page. The source styled
   each with an inline colour, which is not reproducible from inside a stored
   field, so the colour lives here and .compare-card is the hook. Underlined in
   both variants, matching the source. */
.compare-card a {
  color: var(--hub-accent);
  text-decoration: underline;
}
.compare-card--accent a {
  color: rgba(255,255,255,0.85);
}
.compare-card a:hover { text-decoration-thickness: 2px; }

/* ── Scanner-submission callout ─────────────────────────────────────────────
   The tinted link beside the download card on /lab-forms/. Ported from that
   page's own <style> block; its comment says it mirrors the homepage slider's
   .service-card-plus, adapted for a cream background. */
.scanner-callout-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16,24,32,0.12);
  color: #0F1116;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.scanner-callout:hover .scanner-callout-arrow,
.scanner-callout:focus-visible .scanner-callout-arrow {
  background: var(--ida-purple-bright);
  border-color: var(--ida-purple-bright);
  color: #fff;
  transform: scale(1.06);
}

/* ══ Story scrolling showcase ═════════════════════════════════════════════════
   /about/'s founding-story section. Ported from that page's own <style> block —
   the original CSS pass missed it entirely, so .story-sticky, .story-grid,
   .story-pagination and .story-pag-bar had no rules at all.

   The outer wrapper is deliberately N*100vh tall: that height is what drives the
   scroll-pinning, and the sticky inner panel maps scroll progress to a slide.
   The per-slide background colour and the light/dark text switch are set by JS
   as inline style + a data-fg attribute, because they change with the active
   slide rather than being fixed per section. */
.story-scroller { position: relative; min-height: 400vh; transition: background-color .8s ease; }

/* Dark text on a light slide background — green, in the source's palette. */
.story-scroller[data-fg="dark"] .story-slide .smcaps { color: rgba(15,17,22,0.55); }
.story-scroller[data-fg="dark"] .story-slide h2 { color: #0F1116; }
.story-scroller[data-fg="dark"] .story-slide p { color: rgba(15,17,22,0.78); }
.story-scroller[data-fg="dark"] .story-pag-bar { background: rgba(15,17,22,0.20); }
.story-scroller[data-fg="dark"] .story-pag-bar.is-active { background: rgba(15,17,22,0.85); }
.story-scroller[data-fg="dark"] .story-pag-bar:hover { background: rgba(15,17,22,0.50); }
.story-scroller[data-fg="dark"] .story-image-frame { border-color: rgba(0,0,0,0.10); }

.story-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  display: flex; align-items: stretch;
  overflow: hidden;
}
/* Bottom-right brand pattern on the sticky panel, under the image column. The
   SVG is natively dense at bottom-right, so unlike the top-left variant this one
   needs no rotation. */
.story-sticky::after {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 42%;
  aspect-ratio: 1264.9 / 1355.3;
  background-color: #fff;
  -webkit-mask-image: url('../images/ida-brand-pattern-corner.svg');
          mask-image: url('../images/ida-brand-pattern-corner.svg');
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: bottom right; mask-position: bottom right;
  pointer-events: none;
  opacity: 0.10;
  z-index: 0;
}

.story-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; max-width: 1400px; margin: 0 auto;
}
.story-text-col {
  position: relative;
  padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.story-pagination { display: flex; gap: 8px; margin-bottom: 30px; }
.story-pag-bar {
  height: 4px; width: 24px;
  border-radius: 2px;
  background: rgba(255,255,255,0.30);
  transition: width .5s ease, background-color .5s ease;
  cursor: pointer; border: 0; padding: 0;
}
.story-pag-bar.is-active { width: 48px; background: rgba(255,255,255,0.95); }
.story-pag-bar:hover { background: rgba(255,255,255,0.55); }

.story-slide-stack { position: relative; min-height: 320px; }
.story-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.story-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.story-slide .smcaps { color: rgba(255,255,255,0.75); margin-bottom: 18px; }
.story-slide h2 { color: #fff; margin: 0 0 22px; text-wrap: balance; }
.story-slide p { color: rgba(255,255,255,0.85); max-width: 480px; margin: 0; }

.story-image-col {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  z-index: 1;
}
.story-image-frame {
  position: relative;
  width: 82%; height: 75vh; max-height: 720px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px -10px rgba(0,0,0,0.35);
  border: 4px solid rgba(255,255,255,0.08);
}
.story-image-track { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.65,0,.35,1); }
.story-image-slide { width: 100%; height: 100%; }
.story-image-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
  .story-grid { grid-template-columns: 1fr; }
  /* Image above the copy, filling the column edge to edge — the desktop 32px
     padding and 82% width both have to be overridden for that. */
  .story-image-col {
    order: -1;
    width: calc(100% - 48px);
    margin: 24px auto 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .story-image-frame { width: 100% !important; height: 100%; max-height: none; }
  .story-text-col { padding: 24px 24px 40px; }
  .story-slide-stack { min-height: 380px; }
  .story-sticky::after { width: 75% !important; }
  /* Tall enough for image and copy stacked. */
  .story-sticky { height: auto; min-height: 100vh; }
}

/* No scroll-pinning when motion is reduced: the whole effect is scroll-driven, so
   the honest fallback is a plain stack of readable panels. */
@media (prefers-reduced-motion: reduce) {
  .story-scroller { min-height: 0 !important; }
  .story-sticky { position: static; height: auto; }
  .story-slide-stack { min-height: 0; }
  .story-slide { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 3rem; }
  .story-image-track { position: static; transform: none !important; }
  .story-image-slide + .story-image-slide { margin-top: 1rem; }
  .story-pagination { display: none; }
}
