/* ==========================================================================
   DEKA — Pages stylesheet
   Additive styles for non-home pages (page-hero, shop, contact, etc).
   Loaded AFTER home.css so it can layer on top without ever overwriting
   home.css. New page/section styles should go HERE, not in home.css.
   ========================================================================== */

/* ==========================================================================
   PAGE HERO — reusable heading section for simpler pages (shop, contact, …).
   Dark navy base with optional background photo + gradient overlay, so the
   fixed nav (white logo/links at the top state) is always legible over it.
   White heading + lavender (sapphire-soft) accent; centered.

   Markup (photo optional):
     <section class="page-hero">
       <div class="page-hero__bg">
         <img src="…" alt="" loading="eager">  <!-- optional -->
         <div class="page-hero__overlay"></div>
       </div>
       <div class="container"><div class="page-hero__inner">
         <span class="kicker">Eyebrow</span>
         <h1>Big heading <em>with accent.</em></h1>
         <p class="page-hero__lede">Optional intro line.</p>
       </div></div>
     </section>
   ========================================================================== */
.page-hero {
    position: relative; overflow: hidden;
    padding: clamp(160px, 20vh, 240px) 0 clamp(72px, 9vh, 120px);
    min-height: 45dvh;
    background: var(--deka-ink); color: var(--deka-ivory);
    text-align: center;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; opacity: 0.55;
}
.page-hero__overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 78% 40%, rgba(43, 82, 159, 0.45), transparent 60%),
        linear-gradient(180deg, rgba(4, 5, 65, 0.85) 0%, rgba(4, 5, 65, 0.62) 40%, rgba(4, 5, 65, 0.96) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__inner {
    max-width: 64ch; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
}
.page-hero .kicker {
    font-family: var(--deka-mono);
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--deka-sapphire-soft); font-weight: 500;
    display: inline-flex; align-items: center; gap: 10px;
}
.page-hero .kicker::before,
.page-hero .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-sapphire-soft); }
/* Display style sits on a class, not on `h1`, so the eyebrow and the display
   line can swap semantic roles (h1 ↔ p / h2) without changing the look. */
.page-hero__title {
    margin: 20px 0 0;
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -0.025em;
    color: var(--deka-ivory); text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.page-hero__title em {
    font-family: var(--deka-serif); font-style: italic; font-weight: 400;
    color: var(--deka-sapphire-soft);
}
.page-hero__lede {
    margin-top: 20px; max-width: 56ch;
    font-size: 16.5px; line-height: 1.65;
    color: rgba(245, 244, 239, 0.82);
}

/* ==========================================================================
   SHOP — page-hero + product grid (.svc cards) + category filter chips.
   The product cards reuse the global .svc / .svc-grid styles from home.css.
   ========================================================================== */
.shop-content { padding: clamp(56px, 7vh, 96px) 0 clamp(80px, 10vh, 140px); background: var(--deka-ivory); }
.shop-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 48px; }
.shop-filter {
    padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--deka-rule);
    background: transparent; color: var(--deka-ink);
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shop-filter:hover { border-color: var(--deka-sapphire); color: var(--deka-sapphire); }
.shop-filter.active { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); }

/* ==========================================================================
   CONTACT — info + form two-column block paired with .page-hero.
   ========================================================================== */
.contact-section { padding: clamp(72px, 9vh, 120px) 0 clamp(100px, 12vh, 160px); background: var(--deka-ivory); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-info h3 {
    font-family: var(--deka-serif); font-weight: 400;
    font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.01em;
    color: var(--deka-ink); margin-bottom: 14px;
}
.contact-info__lede { font-size: 16px; color: var(--hm-muted); line-height: 1.6; margin-bottom: 28px; max-width: 40ch; }

.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li {
    display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline;
    padding-bottom: 16px; border-bottom: 1px solid var(--deka-rule);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list__label {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--hm-muted-2);
}
.contact-list a { color: var(--deka-ink); transition: color .2s ease; }
.contact-list a:hover { color: var(--deka-sapphire); }
.contact-list__group { display: grid; gap: 14px; }
.contact-list__entry { display: flex; flex-direction: column; gap: 3px; }
.contact-list__sub {
    font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--hm-muted-2);
}

.contact-form {
    background: #fff; border: 1px solid var(--deka-rule); border-radius: 22px; padding: 32px;
    box-shadow: 0 30px 70px -40px rgba(4, 5, 65, 0.25);
}

/* ==========================================================================
   ENDORSEMENTS — grid of clinician cards (portrait + name + title + quote).
   ========================================================================== */
.endorsements-section { padding: clamp(72px, 9vh, 120px) 0 clamp(100px, 12vh, 160px); background: var(--deka-ivory); }
.endorsements-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    margin-top: clamp(40px, 5vh, 64px);
}
@media (max-width: 880px) { .endorsements-grid { grid-template-columns: 1fr; gap: 18px; } }

.endorsement {
    background: #fff; border: 1px solid var(--deka-rule); border-radius: 22px;
    padding: 32px;
    display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: start;
    transition: box-shadow .3s ease, transform .3s ease;
}
.endorsement:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -32px rgba(4, 5, 65, 0.18); }
@media (max-width: 640px) { .endorsement { grid-template-columns: 1fr; gap: 20px; padding: 24px; } }

.endorsement__portrait {
    width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
    background: var(--deka-bone-2);
    border: 1px solid var(--deka-rule);
}
.endorsement__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .endorsement__portrait { width: 96px; height: 96px; } }

.endorsement__body p.q {
    font-family: var(--deka-serif); font-weight: 300; font-style: italic;
    font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5;
    color: var(--deka-ink); margin: 0 0 18px;
}
.endorsement__name {
    font-family: var(--deka-serif); font-weight: 400; font-size: 19px;
    letter-spacing: -0.01em; color: var(--deka-ink); margin: 0;
}
.endorsement__title {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--hm-muted-2); margin-top: 6px;
}

/* ==========================================================================
   COMPANY PROFILE — alternating two-column narrative sections.
   ========================================================================== */
.company-profile { padding: clamp(72px, 9vh, 120px) 0 clamp(100px, 12vh, 160px); background: var(--deka-ivory); }
.cp-section + .cp-section { margin-top: clamp(64px, 8vh, 112px); }
.cp-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px);
    align-items: center;
}
.cp-section--reverse .cp-section__media { order: 2; }
.cp-section--text-only { grid-template-columns: 1fr; max-width: 64ch; margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 880px) {
    .cp-section, .cp-section--reverse { grid-template-columns: 1fr; gap: 32px; }
    .cp-section--reverse .cp-section__media { order: 0; }
}

.cp-section__kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
    display: inline-block; margin-bottom: 14px;
}
.cp-section__heading {
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--deka-ink); margin: 0 0 18px; text-wrap: balance;
}
.cp-section__heading em {
    font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire);
}
.cp-section__lede {
    font-size: 16.5px; line-height: 1.7; color: var(--hm-muted); max-width: 56ch;
}
.cp-section__media img { width: 100%; height: auto; display: block; border-radius: 18px; }

/* ==========================================================================
   CP — split feature (image + narrative, alternating).
   ========================================================================== */
.cp-feature { padding: clamp(80px, 10vh, 140px) 0; background: var(--deka-ivory); }
.cp-feature__grid {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
.cp-feature--reverse .cp-feature__media { order: 2; }
@media (max-width: 880px) {
    .cp-feature__grid { grid-template-columns: 1fr; gap: 32px; }
    .cp-feature--reverse .cp-feature__media { order: 0; }
}
.cp-feature__media img { width: 100%; height: auto; display: block; border-radius: 22px; }
.cp-feature__kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
    display: inline-block; margin-bottom: 16px;
}
.cp-feature__heading {
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.025em;
    color: var(--deka-ink); margin: 0 0 18px; text-wrap: balance;
}
.cp-feature__heading em {
    font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire);
}
.cp-feature__text { font-size: 16.5px; line-height: 1.7; color: var(--hm-muted); max-width: 56ch; }
.cp-feature__text + .cp-feature__text { margin-top: 16px; }

/* ==========================================================================
   CP — Technology, 3-up numbered feature cards.
   ========================================================================== */
.cp-tech { padding: clamp(80px, 10vh, 140px) 0; background: var(--deka-bone); }
.cp-tech-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-top: clamp(40px, 5vh, 64px);
}
@media (max-width: 880px) { .cp-tech-grid { grid-template-columns: 1fr; gap: 18px; } }

.cp-tech-card {
    padding: 36px 32px;
    background: #fff; border: 1px solid var(--deka-rule); border-radius: 22px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.cp-tech-card:hover { transform: translateY(-2px); box-shadow: 0 30px 60px -32px rgba(4, 5, 65, 0.18); }
.cp-tech-card__num {
    font-family: var(--deka-serif); font-size: 64px; font-weight: 300; line-height: 1;
    color: var(--deka-sapphire); letter-spacing: -0.03em;
}
.cp-tech-card__name {
    margin-top: 18px;
    font-family: var(--deka-serif); font-weight: 500; font-size: 22px;
    color: var(--deka-ink); letter-spacing: -0.01em;
}
.cp-tech-card__text {
    margin-top: 10px; font-size: 14.5px; line-height: 1.65;
    color: var(--hm-muted); max-width: 38ch;
}

/* ==========================================================================
   CP — Conservation: dark aside (2-col text + pull-quote tile).
   ========================================================================== */
.cp-aside {
    padding: clamp(80px, 10vh, 140px) 0;
    background: var(--deka-ink); color: var(--deka-ivory);
}
.cp-aside__grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 6vw, 80px);
    align-items: center;
}
@media (max-width: 880px) { .cp-aside__grid { grid-template-columns: 1fr; gap: 40px; } }
.cp-aside .kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire-soft); font-weight: 500;
    display: inline-block; margin-bottom: 16px;
}
.cp-aside h2 {
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.025em;
    color: var(--deka-ivory); margin: 0 0 20px; text-wrap: balance;
}
.cp-aside h2 em {
    font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-brass);
}
.cp-aside p {
    font-size: 16.5px; line-height: 1.7;
    color: rgba(245, 244, 239, 0.78); max-width: 52ch;
}
.cp-aside__quote {
    background: linear-gradient(160deg, rgba(43, 82, 159, 0.92), rgba(4, 5, 65, 0.95));
    border-radius: 22px; padding: 40px 36px;
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.cp-aside__quote .quote-mark {
    font-family: var(--deka-serif); font-style: italic; font-size: 80px;
    line-height: 0.5; color: var(--deka-brass);
}
.cp-aside__quote p {
    font-family: var(--deka-serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35;
    color: var(--deka-ivory); margin: 0; max-width: none;
}

/* ==========================================================================
   CP — Four pillars: glass cards on a sapphire→ink gradient band.
   Used by the Company Profile page below the hero.
   ========================================================================== */
.cp-pillars {
    padding: clamp(80px, 10vh, 140px) 0;
    /* Solid ink so the hero's bottom edge (ink at ~96% over the photo) fades
       seamlessly into this section — no visible color seam. */
    background: var(--deka-ink);
    color: var(--deka-ivory);
}
/* Company Profile only: drive the hero overlay to FULLY opaque ink before the
   bottom edge so the faint photo no longer shows through there — removes the
   ~4% seam where the hero meets this solid-ink band. */
.page-id-398 .page-hero__overlay {
    background:
        radial-gradient(ellipse 60% 45% at 78% 40%, rgba(43, 82, 159, 0.40), transparent 60%),
        linear-gradient(180deg,
            rgba(4, 5, 65, 0.82) 0%,
            rgba(4, 5, 65, 0.55) 36%,
            rgba(4, 5, 65, 0.98) 78%,
            var(--deka-ink) 100%);
}
.cp-pillars__grid {
    /* auto-fit, not a fixed 4: the Medical & Dental pillar was pulled (Jul 2026
       client feedback) and a hard repeat(4) left an empty slot on desktop. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
@media (max-width: 1100px) { .cp-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cp-pillars__grid { grid-template-columns: 1fr; } }

.cp-pillar {
    background: rgba(245, 244, 239, 0.06);
    border: 1px solid rgba(245, 244, 239, 0.16);
    border-radius: 22px; padding: 36px 30px;
    color: var(--deka-ivory);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.cp-pillar:hover {
    background: rgba(245, 244, 239, 0.10);
    border-color: rgba(245, 244, 239, 0.28);
    transform: translateY(-4px);
}
.cp-pillar__kicker {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire-soft); font-weight: 500;
}
.cp-pillar__heading {
    margin: 14px 0 16px;
    font-family: var(--deka-serif); font-weight: 400;
    font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.01em;
    color: var(--deka-ivory);
}
.cp-pillar__heading em { font-style: italic; color: var(--deka-brass); }
.cp-pillar__text {
    margin: 0;
    font-size: 14.5px; line-height: 1.65;
    color: rgba(245, 244, 239, 0.82);
}

/* ==========================================================================
   UTILITY — centered content image. 95% / max 900px / auto-margined.
   Use on <img> or <figure>: <img class="image-center" src="..." alt="">
   ========================================================================== */
.image-center {
    display: block;
    width: 95%; max-width: 900px;
    height: auto;
    margin: clamp(40px, 5vh, 72px) auto;
}
.image-center > img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   LASER HERO — individual laser detail-page hero (dark, with product stage).
   Text on left (kicker / title / tagline / description / CTAs), product on a
   light-blue checker stage on the right.
   ========================================================================== */
.laser-hero {
    position: relative; overflow: hidden;
    padding: clamp(160px, 18vh, 220px) 0 clamp(80px, 10vh, 140px);
    background: var(--deka-ink); color: var(--deka-ivory);
}
.laser-hero__overlay {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at 78% 30%, rgba(43, 82, 159, 0.45), transparent 60%),
        linear-gradient(180deg, rgba(4, 5, 65, 0.92) 0%, rgba(4, 5, 65, 0.75) 50%, rgba(4, 5, 65, 0.97) 100%);
}
.laser-hero .container { position: relative; z-index: 1; }
.laser-hero__grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
@media (max-width: 960px) { .laser-hero__grid { grid-template-columns: 1fr; gap: 40px; } }

.laser-hero__kicker {
    font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire-soft); font-weight: 500;
}
.laser-hero__title {
    margin: 14px 0 16px;
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(40px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.025em;
    color: var(--deka-ivory); text-wrap: balance;
}
.laser-hero__title em { font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire-soft); }
.laser-hero__tagline {
    font-family: var(--deka-serif); font-style: italic; font-weight: 300;
    font-size: clamp(20px, 2vw, 26px); line-height: 1.4;
    color: var(--deka-sapphire-soft); margin: 0 0 20px; max-width: 36ch;
}
.laser-hero__text { font-size: 16.5px; line-height: 1.7; color: rgba(245, 244, 239, 0.82); max-width: 50ch; margin: 0 0 28px; }
.laser-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.laser-hero__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 999px;
    background: var(--deka-ivory); color: var(--deka-ink);
    font-family: var(--deka-mono); font-size: 11.5px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    transition: transform .3s ease, box-shadow .3s ease;
}
.laser-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5); }
.laser-hero__cta--ghost { background: transparent; color: var(--deka-ivory); border: 1px solid rgba(245, 244, 239, 0.3); }
.laser-hero__cta--ghost:hover { border-color: var(--deka-ivory); background: rgba(245, 244, 239, 0.06); }

/* Transparent stage with an edge-fading 32px grid -- same motif as the homepage
   .ha-laser-media, but the stage keeps its size so the art renders larger here.
   No card, no gradient field, no rounded chrome. */
/* --stage-h is shared with the img's max-height below, and it (not overflow
   clipping) is what keeps tall product shots from spilling into adjacent content:
   a PERCENTAGE max-height wouldn't resolve on a grid item, so an absolute length is
   used and the two are kept in sync. overflow is VISIBLE so the image drop-shadow
   isn't clipped at the stage's bottom edge. */
.laser-stage {
    --stage-h: clamp(340px, 34vw, 470px);
    position: relative; height: var(--stage-h); overflow: visible;
    display: grid; place-items: center;
    background: none;
}
.laser-stage::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(4, 5, 65, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4, 5, 65, 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 80%);
}
/* The source art is low-res (203x650, 200x449, 300x396), so scale DOWN to fit only
   — width/height:auto keeps small shots at native size rather than blurring them up
   to fill the stage. */
.laser-stage img {
    position: relative; z-index: 1;
    max-width: 92%; max-height: var(--stage-h); width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(4, 5, 65, 0.28));
}

/* ==========================================================================
   LASER SPECS — clean 3-up (2 on tablet, 1 on phone) key/value grid.
   ========================================================================== */
.laser-specs { padding: clamp(80px, 10vh, 140px) 0; background: var(--deka-ivory); }
.laser-specs__head { text-align: center; margin-bottom: clamp(40px, 5vh, 64px); }
.laser-specs__head .kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
}
.laser-specs__heading {
    margin: 14px 0 0;
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--deka-ink);
}
.laser-specs__heading em { font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire); }
.laser-specs__grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--deka-rule); border-left: 1px solid var(--deka-rule);
}
@media (max-width: 880px) { .laser-specs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .laser-specs__grid { grid-template-columns: 1fr; } }
.laser-spec { padding: 24px 24px 28px; border-right: 1px solid var(--deka-rule); border-bottom: 1px solid var(--deka-rule); }
.laser-spec__label {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--hm-muted-2); font-weight: 500;
}
.laser-spec__value {
    margin-top: 10px;
    font-family: var(--deka-serif); font-weight: 300;
    font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -0.01em;
    color: var(--deka-ink);
}
.laser-spec__value sup {
    font-family: var(--deka-mono); font-size: 0.42em; font-weight: 400;
    color: var(--deka-sapphire); vertical-align: top; margin-left: 4px;
}

/* ==========================================================================
   LASER APPLICATIONS — 3-up clinical-use cards (BONE bg).
   ========================================================================== */
.laser-apps { padding: clamp(80px, 10vh, 140px) 0; background: var(--deka-bone); }
.laser-apps__head { text-align: center; margin-bottom: clamp(40px, 5vh, 64px); }
.laser-apps__head .kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
}
.laser-apps__heading {
    margin: 14px 0 0;
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--deka-ink);
}
.laser-apps__heading em { font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire); }
.laser-apps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px) { .laser-apps__grid { grid-template-columns: 1fr; gap: 18px; } }
.laser-app { padding: 32px 28px; background: #fff; border: 1px solid var(--deka-rule); border-radius: 22px; }
.laser-app__num {
    font-family: var(--deka-serif); font-size: 48px; font-weight: 300; line-height: 1;
    color: var(--deka-sapphire); letter-spacing: -0.03em;
}
.laser-app__name {
    margin-top: 14px;
    font-family: var(--deka-serif); font-weight: 500; font-size: 20px;
    color: var(--deka-ink); letter-spacing: -0.01em;
}
.laser-app__text { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--hm-muted); }

/* ==========================================================================
   LASERS LIST — landing page: alternating image-stage + narrative rows.
   ========================================================================== */
/* overflow-x:clip replicates the top-level .home-alt clip on the home page: the
   ported Beyond panel breaks out to 95vw on mobile and the comparison table is a
   wide swipe area — neither may add horizontal PAGE scroll. X only, so the laser
   rows' vertical drop-shadows and the table's sticky column are unaffected. */
.lasers-list { padding: clamp(80px, 10vh, 140px) 0; background: var(--deka-ivory); overflow-x: clip; }

/* The Beyond panel is ported from home-alt (7456), where .ha-bt sits directly in
   .container and its mobile 95vw breakout (margin-inline: calc(50% - 47.5vw))
   resolves against .container. Here it's wrapped in an extra .home-alt div, which
   both shifts that breakout and re-clips it via the base .home-alt{overflow-x:clip}.
   display:contents dissolves the wrapper's box so .ha-bt's containing block is
   .container again — identical to home-alt. The .home-alt CLASS still scopes every
   descendant rule (they match on the DOM, not the box tree). */
.lasers-list .home-alt { display: contents; }
.laser-row {
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 5vw, 80px); align-items: center;
}
.laser-row + .laser-row { margin-top: clamp(72px, 9vh, 120px); }
.laser-row--reverse .laser-row__media { order: 2; }
@media (max-width: 960px) {
    .laser-row { grid-template-columns: 1fr; gap: 32px; }
    .laser-row--reverse .laser-row__media { order: 0; }
}

.laser-row__kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
}
.laser-row__name {
    margin: 14px 0 6px;
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.025em;
    color: var(--deka-ink); text-wrap: balance;
}
.laser-row__tagline {
    font-family: var(--deka-serif); font-style: italic; font-weight: 300;
    font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4;
    color: var(--deka-sapphire); margin: 0 0 16px;
}
.laser-row__text { font-size: 16px; line-height: 1.7; color: var(--hm-muted); max-width: 52ch; margin: 0 0 24px; }

.laser-row__highlights { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; }
.laser-row__highlight { display: flex; flex-direction: column; gap: 4px; }
.laser-row__highlight-label {
    font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--hm-muted-2); font-weight: 500;
}
.laser-row__highlight-value {
    font-family: var(--deka-serif); font-weight: 300;
    font-size: clamp(22px, 2vw, 28px); line-height: 1; letter-spacing: -0.01em;
    color: var(--deka-ink);
}
.laser-row__highlight-value sup { font-family: var(--deka-mono); font-size: 0.4em; color: var(--deka-sapphire); vertical-align: top; margin-left: 3px; }

.laser-row__cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px;
    background: var(--deka-ink); color: var(--deka-ivory);
    font-family: var(--deka-mono); font-size: 11.5px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    transition: transform .3s ease, box-shadow .3s ease;
}
.laser-row__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -20px rgba(4, 5, 65, 0.4); }

/* ==========================================================================
   LASER HERO PRODUCT — minimal replacement for .laser-stage on detail pages.
   No box, no rounded corners; the laser floats with a faint WHITE lined
   checker pattern behind it (the same grid-line idiom used on .svc-img in
   home.css, retinted opaque-white so it reads over the dark purple hero).
   ========================================================================== */
.laser-hero__product {
    position: relative;
    /* No fixed aspect-ratio — let the image breathe. min-height gives it a
       responsive floor (clamps 440–680px desktop, 320–480px mobile) so the
       image is always large without freezing a hard pixel value. */
    min-height: clamp(440px, 60vh, 680px);
    display: grid; place-items: center;
}
@media (max-width: 960px) {
    .laser-hero__product { min-height: clamp(320px, 48vh, 480px); }
}
.laser-hero__product::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
}
.laser-hero__product img {
    position: relative; z-index: 1;
    height: 100%; width: auto;
    max-width: 100%; max-height: 75vh;
    object-fit: contain;
    filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   LASER RELATED — strip the .svc card chrome down to image + title.
   Removes: card background, border, kicker-tag overlay, tagline paragraph,
   and the "view instrument" foot row + its divider. Keeps the image (which
   still gets its lined-checker bg from home.css's .svc-img edit) + the name.
   ========================================================================== */
.laser-related { padding: clamp(72px, 9vh, 130px) 0; background: var(--deka-ivory); }
.laser-related__head { margin-bottom: clamp(36px, 5vh, 60px); }
.laser-related .kicker {
    font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
}
.laser-related__heading {
    font-family: var(--deka-serif); font-weight: 400;
    font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.015em;
    color: var(--deka-ink); margin-top: 12px; text-wrap: balance;
}
.laser-related__heading em { font-family: var(--deka-serif); font-style: italic; color: var(--deka-sapphire); }

.laser-related .svc {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.laser-related .svc:hover { box-shadow: none; }
.laser-related .svc-img .tag { display: none; }
.laser-related .svc-body { padding: 18px 0 0; }
.laser-related .svc-body p { display: none; }
.laser-related .svc-foot { display: none; }

/* On phones, stack paired .form-row fields (kept for any WooCommerce forms). */
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Brand typography — EVERY heading renders in Cormorant (serif). No heading
   is sans. base.css already defaults h1–h6 to --deka-serif; home.css ships a
   few section headings in --deka-sans (Inter). Neutralise them here — pages.css
   loads AFTER home.css, so these equal-specificity selectors win. (academy.css's
   own sans headings are fixed at source in academy.css.)
   ========================================================================== */
.center-head h2,
.why h2,
.demo-copy h2,
.final-card h2 {
    font-family: var(--deka-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
}
/* …and onto the shared desktop scale. Same reason these live here rather than
   in home.css: equal specificity, later sheet. */
@media (min-width: 1000px) {
    .center-head h2,
    .why h2,
    .demo-copy h2,
    .final-card h2 { font-size: var(--deka-h2); }
}

/* ==========================================================================
   Home "Why Deka" testimonial. The quote markup now lives OUTSIDE the collage
   (in .why-media, before .why-collage) so its text can never be clipped by the
   absolutely-sized tile. Behaviour is split by viewport:
     • MOBILE (≤980px): a normal-flow, full-width card preceding the collage.
     • DESKTOP (≥981px): restored to the original look — the card is absolutely
       positioned over the collage's bottom-right corner (where tile t4 sat).
   Overrides live here so home.css is untouched.
   ========================================================================== */
.why-media { display: flex; flex-direction: column; gap: 28px; }
.why-quote {
    background: linear-gradient(160deg, rgba(43, 82, 159, 0.92), rgba(4, 5, 65, 0.95));
    border-radius: 20px; padding: 28px 30px; color: #fff;
    display: flex; flex-direction: column; align-items: flex-start;
    box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.6);
}
.why-quote .quote-mark { font-family: var(--deka-serif); font-style: italic; font-size: 64px; line-height: 0.6; color: var(--deka-brass); }
.why-quote .qtext { font-family: var(--deka-serif); font-style: italic; font-size: clamp(12px, 1.2vw, 18px); line-height: 1.45; margin-top: 12px; color: #fff; }
.why-quote .qauthor { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 16px; color: rgba(255, 255, 255, 0.7); }

/* DESKTOP: re-create the original collage — the quote overlays the bottom-right
   corner exactly where tile t4 used to sit (collage is 1:1, so % match the old
   tile). The collage is the only in-flow child, so .why-media takes its size. */
@media (min-width: 981px) {
    .why-media { display: block; position: relative; gap: 0; }
    .why-quote {
        position: absolute; bottom: 6%; right: 4%; width: 42%; height: 48%; z-index: 3;
        margin: 0; padding: 20px; overflow: hidden;
        justify-content: flex-end;
    }
    .why-quote .quote-mark { font-size: 80px; }
    .why-quote .qtext { margin-top: 12px; line-height: 1.3; }
    .why-quote .qauthor { margin-top: 14px; }
}

/* ==========================================================================
   Home "Clinicians" voices carousel. Three fixes (overrides home.css):
   1. Equal-height cards — all slides share one grid cell, so the track is
      always the height of the TALLEST quote and the controls never shift.
   2. Real portrait thumbnails in the avatar circle.
   3. Slightly smaller quote type so paragraph-length endorsements read well.
   ========================================================================== */
.voices-track { display: grid; min-height: 0; }
.voices-track .voice-slide { position: relative; inset: auto; grid-area: 1 / 1; }
.voice-slide .q { font-size: clamp(16px, 1.2vw, 20px); max-width: 46ch; }
.voice-slide .avatar { overflow: hidden; background: none; flex: 0 0 auto; }
.voice-slide .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Home final CTA — the laser breaks out over the card's top & bottom edges
   (overflow visible + taller image), over the same faint 32px grid texture
   used on the laser detail pages. Vertical padding trimmed so the card frames
   the breakout. Overrides home.css.
   ========================================================================== */
.final-card { overflow: visible; padding-top: 52px; padding-bottom: 52px; }
.final-card::before {
    content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 28px; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 78% 78% at 72% 50%, #000 25%, transparent 82%);
            mask-image: radial-gradient(ellipse 78% 78% at 72% 50%, #000 25%, transparent 82%);
}
/* keep text + visual above the grid texture */
.final-card > div { position: relative; z-index: 1; }
/* desktop: the laser stands taller than the card so it pops over both edges */
@media (min-width: 981px) {
    .final-visual img { height: 165%; max-height: 760px; }
}

/* ==========================================================================
   PARTNER / RESOURCE PORTAL — reusable layout for the gated partner pages
   (notice · welcome · contacts · videos · downloads). Paired with .page-hero.
   ========================================================================== */
.portal { padding: clamp(56px, 7vh, 96px) 0 clamp(80px, 10vh, 140px); background: var(--deka-ivory); }
.portal__inner { max-width: 980px; margin: 0 auto; }

.portal-notice {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(38, 74, 156, 0.07); border: 1px solid var(--deka-rule); border-left: 3px solid var(--deka-sapphire);
    border-radius: 12px; padding: 16px 20px; margin-bottom: 44px;
    font-size: 14.5px; line-height: 1.55; color: var(--deka-ink);
}
.portal-notice strong { color: var(--deka-sapphire); }

.portal-intro { margin-bottom: 48px; }
.portal-intro h2 { font-family: var(--deka-serif); font-weight: 500; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.01em; color: var(--deka-ink); margin-bottom: 18px; }
.portal-intro p { font-size: 16.5px; line-height: 1.7; color: var(--hm-muted, rgba(4,5,65,0.72)); margin-bottom: 14px; max-width: 70ch; }

/* contacts */
.portal-contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 56px; }
@media (max-width: 680px) { .portal-contacts { grid-template-columns: 1fr; } }
.portal-contact { background: #fff; border: 1px solid var(--deka-rule); border-radius: 14px; padding: 22px 24px; }
.portal-contact__name { font-family: var(--deka-serif); font-weight: 500; font-size: 19px; color: var(--deka-ink); }
.portal-contact__title { font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(4,5,65,0.55); margin: 6px 0 12px; }
.portal-contact a { display: block; color: var(--deka-sapphire); font-size: 14.5px; text-decoration: none; }
.portal-contact a:hover { text-decoration: underline; }
.portal-contact__phone { display: block; font-family: var(--deka-mono); font-size: 13px; color: var(--deka-ink); margin-top: 4px; }

/* sections */
.portal-section { margin-top: 56px; }
.portal-section__title { font-family: var(--deka-serif); font-weight: 500; font-style: italic; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.01em; color: var(--deka-ink); padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--deka-rule); }
.portal-section__title span { font-style: normal; font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deka-sapphire); vertical-align: middle; }
.portal-note { font-family: var(--deka-mono); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(4,5,65,0.55); margin: -16px 0 24px; }

/* video grid */
.portal-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .portal-videos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .portal-videos { grid-template-columns: 1fr; } }
.portal-video { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--deka-rule); background: #000; aspect-ratio: 16/10; }
.portal-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.portal-video:hover img { transform: scale(1.04); }
.portal-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.portal-video__play::before { content: ''; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5); }
.portal-video__play::after { content: ''; position: absolute; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--deka-sapphire); margin-left: 4px; }
.portal-video figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.portal-video--embed { aspect-ratio: 16/9; }
.portal-video--embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* downloads */
.portal-downloads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 680px) { .portal-downloads { grid-template-columns: 1fr; } }
.portal-download {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: #fff; border: 1px solid var(--deka-rule); border-radius: 12px;
    color: var(--deka-ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.portal-download:hover { border-color: var(--deka-sapphire); transform: translateY(-2px); }
.portal-download svg { flex: 0 0 auto; color: var(--deka-sapphire); }
.portal-download span { font-size: 15px; line-height: 1.3; }
.portal-download small { display: block; font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(4,5,65,0.45); margin-top: 3px; }

/* Referral pages — heading + intro + form slot (reuses .portal layout) */
.portal-referral__sub { font-family: var(--deka-serif); font-style: italic; font-size: clamp(19px, 2.1vw, 25px); color: var(--deka-sapphire); margin: 0 0 14px; }
.portal-form-slot { margin-top: 36px; padding: clamp(32px, 5vw, 56px); border: 1px dashed var(--deka-rule); border-radius: 16px; background: #fff; text-align: center; }
.portal-form-slot__label { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deka-sapphire); }
.portal-form-slot p { font-size: 14.5px; color: var(--hm-muted, rgba(4,5,65,0.6)); margin: 10px 0 0; }

/* Doctor Resources (master portal) — jump nav, labeled video grid, brochure subgroups */
.portal-jumpnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.portal-jumpnav a { font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deka-ink); border: 1px solid var(--deka-rule); border-radius: 999px; padding: 9px 16px; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.portal-jumpnav a:hover { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); }
.portal-section[id] { scroll-margin-top: 110px; }
/* Video tiles are Anchor Universal Popup cards (page 1382 only). Two columns,
   not three, so the branded thumbnails read at a usable size. */
.portal-vidgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 760px) { .portal-vidgrid { grid-template-columns: 1fr; } }
.portal-vidgrid .up-video-card { width: 100%; max-width: none; }
.portal-vid__frame { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--deka-rule); background: #000; }
.portal-vid__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.portal-vid__name { font-family: var(--deka-sans); font-weight: 500; font-size: 14px; color: var(--deka-ink); margin-top: 10px; }
.portal-subhead { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deka-sapphire); margin: 30px 0 12px; }

/* Portal tabs — reusable tabbed organization for portal pages */
.portal-tabs { margin-top: 8px; }
.portal-tabs__bar {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 36px;
}
.portal-tab {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    padding: 11px 20px; border-radius: 999px;
    border: 1px solid var(--deka-rule); background: #fff;
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(4, 5, 65, 0.6);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.portal-tab:hover { border-color: var(--deka-ink); color: var(--deka-ink); }
.portal-tab.is-active { background: var(--deka-sapphire); border-color: var(--deka-sapphire); color: #fff; }
.portal-tab:focus-visible { outline: 2px solid var(--deka-sapphire); outline-offset: 2px; border-radius: 4px; }
.portal-tabpanel[hidden] { display: none; }
.portal-tabpanel { animation: portal-fade .35s ease; }
@keyframes portal-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* inside a tab panel the tab label is the heading, so drop the section title */
.portal-tabpanel > .portal-section { margin-top: 0; }
@media (max-width: 600px) {
    .portal-tabs__bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .portal-tab { white-space: nowrap; }
}


/* =========================================================================
   MEMBERS-ONLY GATE  (wp-members product-restricted view)
   Frosted notice card floating over a blurred, inert skeleton backdrop.
   Paired with the .page-hero emitted by the wpmem_product_restricted_args
   filter in functions.php. No real protected content is ever rendered here.
   ========================================================================= */
.portal-locked { position: relative; overflow: hidden; }
.portal-locked__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(420px, 52vh, 620px);
	isolation: isolate;
}

/* Blurred decorative skeleton behind the card — masked to fade at the edges. */
.portal-locked__backdrop {
	position: absolute; inset: 0; z-index: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	filter: blur(7px) saturate(0.85);
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
	-webkit-mask-image: radial-gradient(120% 92% at 50% 38%, #000 32%, transparent 78%);
	        mask-image: radial-gradient(120% 92% at 50% 38%, #000 32%, transparent 78%);
}
@media (max-width: 820px) { .portal-locked__backdrop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .portal-locked__backdrop { grid-template-columns: 1fr; } }
.portal-locked__ghost {
	background: #fff;
	border: 1px solid var(--deka-rule);
	border-radius: 16px;
	padding: 18px;
	display: flex; flex-direction: column; gap: 12px;
}
.portal-locked__ghost .g-thumb { display: block; height: 120px; border-radius: 10px; background: linear-gradient(120deg, var(--deka-bone), #fff 60%, var(--deka-bone)); }
.portal-locked__ghost .g-line  { display: block; height: 12px; border-radius: 6px; background: var(--deka-bone); }
.portal-locked__ghost .g-line--lg { width: 85%; height: 16px; }
.portal-locked__ghost .g-line--sm { width: 45%; }

/* Frosted notice card. */
.portal-locked__card {
	position: relative; z-index: 1;
	width: min(520px, 92vw);
	text-align: center;
	padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 52px);
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	        backdrop-filter: blur(14px) saturate(1.1);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 22px;
	box-shadow: 0 30px 60px -20px rgba(4, 5, 65, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.portal-locked__seal {
	display: inline-grid; place-items: center;
	width: 66px; height: 66px; margin-bottom: 22px;
	border-radius: 50%;
	color: var(--deka-ivory);
	background: radial-gradient(circle at 30% 25%, var(--deka-sapphire), var(--deka-ink));
	box-shadow: 0 10px 24px -8px rgba(43, 82, 159, 0.7), 0 0 0 6px rgba(43, 82, 159, 0.10);
	font-size: 24px;
}
.portal-locked__kicker {
	font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--deka-sapphire); margin-bottom: 14px;
}
.portal-locked__title {
	font-family: var(--deka-serif); font-weight: 500; font-style: italic;
	font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.01em;
	color: var(--deka-ink); margin-bottom: 16px; line-height: 1.1;
}
.portal-locked__msg {
	font-size: 16px; line-height: 1.7; color: rgba(4, 5, 65, 0.72);
	max-width: 42ch; margin: 0 auto 30px;
}
.portal-locked__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.portal-locked__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 26px; border-radius: 999px;
	font-family: var(--deka-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
	text-decoration: none; cursor: pointer;
	background: var(--deka-sapphire); color: var(--deka-ivory);
	box-shadow: 0 10px 22px -10px rgba(43, 82, 159, 0.85);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.portal-locked__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(43, 82, 159, 0.9); }
.portal-locked__btn--ghost {
	background: transparent; color: var(--deka-ink);
	box-shadow: inset 0 0 0 1px var(--deka-rule);
}
.portal-locked__btn--ghost:hover { background: rgba(4, 5, 65, 0.04); box-shadow: inset 0 0 0 1px var(--deka-sapphire); }

@media (prefers-reduced-motion: no-preference) {
	.portal-locked__card { animation: portalLockIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	@keyframes portalLockIn {
		from { opacity: 0; transform: translateY(14px) scale(0.98); }
		to   { opacity: 1; transform: none; }
	}
}

/* ==========================================================================
   SUCCESS STORIES — archive page (hero via .page-hero; cards reuse .journal/.post)
   ========================================================================== */
.ss-archive { padding: 72px 0 110px; background: var(--deka-bone); }
.ss-toolbar { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ss-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-filters a { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deka-ink); padding: 9px 16px; border: 1px solid var(--deka-rule); border-radius: 999px; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.ss-filters a:hover { border-color: var(--deka-ink); }
.ss-filters a.is-active { background: var(--deka-ink); color: #fff; border-color: var(--deka-ink); }
.ss-search { display: flex; align-items: stretch; border: 1px solid var(--deka-rule); border-radius: 999px; background: #fff; overflow: hidden; }
.ss-search input[type="search"] { border: 0; outline: 0; padding: 11px 18px; font-size: 14px; font-family: var(--deka-sans); min-width: 220px; background: transparent; color: var(--deka-ink); }
.ss-search button { border: 0; background: var(--deka-ink); color: #fff; padding: 0 20px; cursor: pointer; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ss-count { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(4, 5, 65, 0.5); margin-bottom: 26px; }
.ss-empty { padding: 60px 0; text-align: center; color: var(--hm-muted); }
.ss-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.ss-pagination .page-numbers { font-family: var(--deka-mono); font-size: 12px; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--deka-rule); border-radius: 999px; color: var(--deka-ink); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.ss-pagination a.page-numbers:hover { border-color: var(--deka-ink); }
.ss-pagination .page-numbers.current { background: var(--deka-ink); color: #fff; border-color: var(--deka-ink); }
.ss-pagination .page-numbers.dots { border-color: transparent; }
@media (max-width: 640px) { .ss-toolbar { flex-direction: column; align-items: stretch; } .ss-search input[type="search"] { min-width: 0; flex: 1; } }
/* Homepage "browse all" button under the success-stories section */
.ss-cta-row { text-align: center; margin-top: 48px; }
.ss-browse { display: inline-flex; align-items: center; gap: 10px; background: var(--deka-ink); color: #fff; font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 30px; border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease; }
.ss-browse:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(4, 5, 65, 0.5); }

/* ==========================================================================
   SUCCESS STORIES — single story (page-hero + clean reading column)
   ========================================================================== */
.ss-single { padding: 64px 0 110px; background: var(--deka-ivory); }
.ss-single__body { max-width: 760px; margin: 0 auto; }
.ss-single__body p { font-size: 17px; line-height: 1.75; color: var(--deka-ink); margin: 0 0 20px; }
.ss-single__body .ss-lede { font-size: 11px; line-height: 1.5; margin: 0 0 26px; }
.ss-single__body .ss-figures { margin: 26px 0; }
.ss-hero-stat { margin-top: 24px; display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ss-hero-stat b { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -0.02em; color: #fff; }
.ss-hero-stat span { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.ss-single__foot { max-width: 760px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--deka-rule); display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.ss-single__foot .ss-back { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--deka-ink); display: inline-flex; gap: 8px; align-items: center; transition: gap .25s ease; }
.ss-single__foot .ss-back:hover { gap: 14px; }

/* ==========================================================================
   Company Profile — "Innate Ability" manifesto quote
   Shrink the oversized quote, and stop grid-column:2/3 from leaking into the
   single-column mobile layout (which left an empty 1fr — the odd left padding).
   ========================================================================== */
.page-id-398 .manifesto-quote { font-size: clamp(20px, 3vw, 34px); }
@media (max-width: 880px) {
    .page-id-398 .manifesto-quote { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------
 * Form pages — CE certificate request, anonymous evaluation, DEKA Care
 * inquiry, and the Catapult inquiry. Hero + short intro + [jotform] iframe.
 * ------------------------------------------------------------------ */
.form-page { padding: 4rem 0 5rem; }
.form-page__intro { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.form-page__intro h2 { margin: 0 0 .75rem; }
.form-page__intro p { margin: 0; opacity: .8; }
.form-page .jotform-embed {
	max-width: 52rem;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--anchor-radius-lg, 12px);
	box-shadow: 0 2px 24px rgba(0, 0, 0, .07);
	overflow: hidden;
}
.form-page .jotform-embed iframe { display: block; }

/* Offer cards — /catapult/ partner rebates. */
.offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0 0;
}
.offer-card {
	padding: 2rem 1.75rem;
	border-radius: var(--anchor-radius-lg, 12px);
	background: #fff;
	box-shadow: 0 2px 24px rgba(0, 0, 0, .07);
	text-align: center;
}
.offer-card__amount { display: block; font-size: 2.25rem; font-weight: 600; line-height: 1.1; }
.offer-card__label { display: block; margin-top: .5rem; opacity: .8; }

/* ==========================================================================
   B2 — BEYOND TRADITIONAL DENTISTRY  (dark purple; expanded-application blocks)
   ========================================================================== */
.ha-beyond {
    position: relative; overflow: hidden;
    background: var(--deka-ink); color: var(--deka-ivory);
    padding: clamp(80px,10vh,120px) 0;
}
.ha-beyond > .container { position: relative; z-index: 1; }
/* 32px line grid across the section, same motif as .ha-laser-media::after but light-on-dark */
.ha-beyond::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(245,244,239,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,244,239,0.055) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 92% 74% at 50% 46%, #000 38%, transparent 86%);
    mask-image: radial-gradient(ellipse 92% 74% at 50% 46%, #000 38%, transparent 86%);
}
.ha-beyond__orbs {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(540px 480px at 20% 30%, rgba(108,76,168,0.22), transparent 70%),
        radial-gradient(520px 460px at 78% 72%, rgba(43,82,159,0.18), transparent 72%);
}
/* headings on this page are serif — match .ha-why-lead h2, not the Inter center-head default */
.ha-beyond .center-head h2 {
    font-family: var(--deka-serif); font-weight: 300;
    font-size: clamp(34px,4vw,52px); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--deka-ivory);
}
.ha-beyond .center-head p { color: rgba(245,244,239,0.72); max-width: 66ch; }
.ha-beyond .center-head .kicker { color: var(--deka-sapphire-soft); }
.ha-beyond .center-head .kicker::before,
.ha-beyond .center-head .kicker::after { background: var(--deka-sapphire-soft); }

.ha-beyond-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,2vw,28px); }
@media (max-width: 1100px){ .ha-beyond-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .ha-beyond-grid { grid-template-columns: 1fr; } }

.ha-beyond-card {
    position: relative; cursor: pointer;
    display: flex; flex-direction: column;
    background: rgba(4,5,65,0.30); border: 1px solid rgba(245,244,239,0.14);
    border-radius: 16px; overflow: hidden;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.ha-beyond-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.28); }
/* transparent product cutouts sit straight on the purple card; max-width/height
   (not 100%/100%) guarantees the art is letterboxed inside the tile, never cropped */
/* Definite pixel height, not aspect-ratio: as a column flex item the media box had
   no definite height, so the img's max-height:100% could not resolve and only
   max-width bound -- tall cutouts overshot and got clipped by overflow:hidden. */
.ha-beyond-media {
    height: clamp(200px, 17vw, 260px); overflow: hidden; background: transparent;
    display: flex; align-items: center; justify-content: center;
    padding: 26px 26px 6px; flex: none;
}
.ha-beyond-media img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
}
.ha-beyond-card h3 {
    font-family: var(--deka-serif); font-weight: 400; font-size: 22px;
    color: var(--deka-ivory); margin: 22px 22px 8px;
}
.ha-beyond-card p {
    font-size: 14.5px; line-height: 1.65; color: rgba(245,244,239,0.66);
    margin: 0 22px 22px;
}
/* margin-top:auto pins the divider to the card bottom so all four line up
   regardless of how many lines the copy above runs to */
.ha-beyond-cta {
    margin: auto 22px 22px; padding-top: 16px;
    border-top: 1px solid rgba(245,244,239,0.14);
}
/* bare text link -- no pill, no container */
.ha-beyond-link {
    display: inline-flex; align-items: center; gap: 9px;
    background: none; border: 0; padding: 0;
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--deka-sapphire-soft);
    transition: color .3s ease, gap .3s ease;
}
/* stretch the single anchor across the card: one link, whole-card hit area,
   and no nested-interactive markup */
.ha-beyond-link::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
}
.ha-beyond-card:hover .ha-beyond-link,
.ha-beyond-link:hover,
.ha-beyond-link:focus-visible { color: var(--deka-ivory); gap: 14px; }
.ha-beyond-link:focus-visible { outline: 2px solid var(--deka-sapphire-soft); outline-offset: 4px; }
.ha-beyond-link svg { flex: none; }

/* ==========================================================================
   LASER COMPARISON TABLE — page 7225 "Our Lasers", sits under the laser rows.
   Own .lcmp-* namespace so nothing here can reach a shared component.

   Ivory ground, so NO brass. The only accent is --deka-sapphire-soft (#8b8eb2),
   the existing lavender token — the "yes" mark. Partial is the same lavender,
   hollow; "no" is a muted rule. No new hue is introduced.
   ========================================================================== */
.lasers-compare { margin-top: clamp(72px, 9vw, 120px); }
.lasers-compare__head { text-align: center; margin-bottom: clamp(32px, 4vh, 52px); }
.lasers-compare__head .kicker {
    font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--deka-sapphire); font-weight: 500;
}
.lasers-compare__head h2 {
    margin: 14px 0 0;
    font-family: var(--deka-serif); font-weight: 500;
    font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
    color: var(--deka-ink);
}
.lasers-compare__head h2 em { font-family: var(--deka-serif); font-style: italic; font-weight: 400; color: var(--deka-sapphire); }
.lasers-compare__head p { margin: 14px auto 0; max-width: 62ch; font-size: 15.5px; line-height: 1.7; color: var(--hm-muted); }

/* Swipe affordance: the hint only exists while the table actually overflows. */
.lcmp-hint {
    display: none; margin: 0 0 12px; text-align: right;
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--hm-muted-2);
}
@media (max-width: 1040px) { .lcmp-hint { display: block; } }

/* The scrollport. The right-edge fade is a sticky child, NOT a ::after on the
   scroller — a pseudo on an overflow container scrolls away with the content. */
.lcmp-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.lcmp-scroll:focus-visible { outline: 2px solid var(--deka-ink); outline-offset: 3px; }

.lcmp {
    /* separate, NOT collapse: collapsed borders don't paint on sticky cells. */
    border-collapse: separate; border-spacing: 0;
    width: 100%; min-width: 940px; table-layout: fixed;
    text-align: left;
}
.lcmp col.lcmp__col--label { width: 260px; }
.lcmp col.lcmp__col--laser { width: 170px; }

/* Frozen label column. Needs its own OPAQUE background or the swiped laser cells
   show through it; the box-shadow is its right edge — a border would shift the
   fixed layout. The group ("Accessories") row is NOT included here: it's a
   colspan-5 full-width cell, and sticky left:0 doesn't reliably pin a spanning
   cell — its label is frozen via .lcmp__group-label instead. */
.lcmp th[scope="row"], .lcmp .lcmp__corner {
    position: sticky; left: 0; z-index: 2; background: var(--deka-ivory);
    box-shadow: 1px 0 0 var(--deka-rule);
}
.lcmp th, .lcmp td {
    padding: 16px 18px; vertical-align: middle;
    border-bottom: 1px solid var(--deka-rule);
}
.lcmp thead th { vertical-align: bottom; border-bottom: 1px solid var(--deka-ink); }

/* Column heads: product shot over the name. contain, never cover — these are
   portrait product shots and cover would crop the chassis. */
.lcmp__shot { display: grid; place-items: end center; height: 132px; margin-bottom: 12px; }
.lcmp__shot img { max-width: 100%; max-height: 132px; width: auto; height: auto; object-fit: contain; }
.lcmp__name {
    display: block; font-family: var(--deka-serif); font-weight: 500;
    font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; color: var(--deka-ink);
}
.lcmp__corner .lcmp__name { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hm-muted-2); font-weight: 500; }

/* Group divider rows (Use cases / Accessories). The cell spans full width for the
   ink underline; the label rides a sticky inner span so it stays frozen at the
   left the way the USE CASES corner does. padding-left:0 lets the span own the
   indent so it lines up under the row labels. */
.lcmp__group th {
    padding-top: 30px; padding-bottom: 12px; padding-left: 0;
    border-bottom: 1px solid var(--deka-ink);
}
.lcmp__group-label {
    position: sticky; left: 0; z-index: 2;
    display: inline-block; padding: 0 18px 0 18px; background: var(--deka-ivory);
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--deka-ink); font-weight: 500;
}

/* Row hover tint. It MUST be opaque: it also paints the sticky th[scope=row], and
   a translucent value there drops the frozen column below full opacity so the
   swiped cells bleed through it. #eeedea is --deka-ivory with ~3% ink baked in, so
   the frozen column stays fully opaque while the row still lifts on hover. Gated to
   real pointers so a stuck :hover after a tap doesn't leave a row tinted on touch. */
@media (hover: hover) {
    .lcmp tbody tr:hover td, .lcmp tbody tr:hover th[scope="row"] { background: #eeedea; }
}

.lcmp__rowname { font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--deka-ink); }
.lcmp__rowsub { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--hm-muted); font-weight: 400; }

/* Accessory rows carry a thumbnail beside the name. */
.lcmp__acc { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.lcmp__acc-thumb {
    width: 52px; height: 52px; border-radius: 10px; background: #fff;
    border: 1px solid var(--deka-rule); display: grid; place-items: center; overflow: hidden;
}
.lcmp__acc-thumb img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; }

/* Cells: mark + verdict. */
.lcmp__cell { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.lcmp__verdict { font-size: 13.5px; line-height: 1.45; color: var(--hm-muted); }

/* The mark is colour/shape only, so each cell states its verdict for screen
   readers. This theme has no .screen-reader-text of its own — don't assume one. */
.lcmp-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.lcmp-mark { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.lcmp-mark--yes { background: var(--deka-sapphire-soft); }
/* White check, not ink: an ink glyph this size swallows the disc and the mark
   reads as navy rather than lavender. White on #8b8eb2 is 3.18:1 — over the 3:1
   floor for non-text contrast. */
.lcmp-mark--yes::after {
    content: ''; width: 11px; height: 11px; background: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12l5 5 11-11'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12l5 5 11-11'/></svg>") center / contain no-repeat;
}
/* Partial: the same lavender, hollow — "sort of", without a second colour. */
.lcmp-mark--part { border: 2px solid var(--deka-sapphire-soft); }
.lcmp-mark--no::after { content: ''; width: 10px; height: 2px; border-radius: 1px; background: rgba(4, 5, 65, 0.3); }

/* Phones. The desktop 260px label column would eat a 390px screen and leave the
   first laser column sliced in half. Narrow both so the frozen labels plus ONE
   whole laser column fit side by side (170 + 165 = 335 < 342 of usable port), and
   drop the decorative accessory thumb so the name and description get the width. */
@media (max-width: 700px) {
    .lcmp { min-width: 830px; }
    .lcmp col.lcmp__col--label { width: 170px; }
    .lcmp col.lcmp__col--laser { width: 165px; }
    .lcmp th, .lcmp td { padding: 13px 12px; }
    .lcmp__group-label { padding: 0 12px; }   /* match the 12px cell indent */
    .lcmp__shot { height: 84px; }
    .lcmp__shot img { max-height: 84px; }
    .lcmp__name { font-size: 15px; }
    .lcmp__acc { grid-template-columns: 1fr; }
    .lcmp__acc-thumb { display: none; }
    .lcmp__rowname { font-size: 13.5px; }
    .lcmp__rowsub { font-size: 11.5px; }
    .lcmp__verdict { font-size: 12.5px; }
    .lcmp__cell { grid-template-columns: 16px 1fr; gap: 8px; }
    .lcmp-mark { width: 16px; height: 16px; }
}

/* ==========================================================================
   ENDORSEMENTS — clamped quotes with a bottom fade, plus a modal that doubles
   as a slider over every endorsement. Mirrors the home-alt `ha-lightbox`
   pattern (open / close / step, arrow keys, Esc, backdrop click).
   The clamp is applied by JS (.is-clamped) only to cards that actually
   overflow, so short endorsements keep no fade and no "Read more".
   ========================================================================== */
.endorsement { cursor: pointer; }
.endorsement:focus-visible { outline: 2px solid var(--deka-brass); outline-offset: 3px; }
.endorsement__body { display: flex; flex-direction: column; align-items: stretch; }
/* the cue must not stretch to the card width */
.endorsement.is-clamped .endorsement__more { align-self: flex-start; }
.endorsement__body p.q { margin-bottom: 18px; }

/* Clamp + gradient fade. 8 lines at the quote's 1.5 line-height. */
.endorsement.is-clamped .endorsement__body p.q {
    --end-lines: 8;
    max-height: calc(var(--end-lines) * 1.5em);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}

/* "Read more" cue — only on cards that were actually clamped. */
.endorsement__more { display: none; }
.endorsement.is-clamped .endorsement__more {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 14px;
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--deka-ink);
}
.endorsement.is-clamped .endorsement__more::after {
    content: ''; width: 18px; height: 1px; background: currentColor;
    transition: width .3s ease;
}
.endorsement:hover .endorsement__more::after { width: 30px; }

/* ---- Modal ---------------------------------------------------------- */
body.endorsement-lb-lock { overflow: hidden; }

.endorsement-lb {
    position: fixed; inset: 0; z-index: 1300;
    display: none; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(4, 5, 65, 0.72);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.endorsement-lb.is-open { display: flex; }

.endorsement-lb__frame {
    position: relative; margin: 0;
    width: min(720px, 100%); max-height: 86vh; overflow-y: auto;
    background: #fff; color: var(--deka-ink);
    border-radius: 22px; padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 40px 90px -30px rgba(4, 5, 65, 0.55);
    text-align: center;
}
.endorsement-lb__portrait {
    width: 120px; height: 120px; margin: 0 auto 22px;
    border-radius: 50%; overflow: hidden;
    background: var(--deka-bone-2); border: 1px solid var(--deka-rule);
}
.endorsement-lb__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.endorsement-lb__quote {
    margin: 0 0 22px; border: 0; padding: 0;
    font-family: var(--deka-serif); font-weight: 300; font-style: italic;
    font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; color: var(--deka-ink);
}
.endorsement-lb__meta { margin: 0; }
.endorsement-lb__name {
    font-family: var(--deka-serif); font-weight: 400; font-size: 20px;
    letter-spacing: -0.01em; margin: 0;
}
.endorsement-lb__title {
    font-family: var(--deka-mono); font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--hm-muted-2); margin: 6px 0 0;
}

.endorsement-lb__arrow, .endorsement-lb__close {
    position: absolute; display: grid; place-items: center;
    border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.9); color: var(--deka-ink);
    transition: background .2s ease, transform .2s ease;
}
.endorsement-lb__arrow:hover, .endorsement-lb__close:hover { background: #fff; }
.endorsement-lb__arrow:focus-visible, .endorsement-lb__close:focus-visible {
    outline: 2px solid var(--deka-brass); outline-offset: 3px;
}
.endorsement-lb__arrow { width: 56px; height: 56px; top: 50%; transform: translateY(-50%); }
.endorsement-lb__prev { left: 28px; }
.endorsement-lb__next { right: 28px; }
.endorsement-lb__close {
    width: 40px; height: 40px; top: 16px; right: 16px;
    background: rgba(4, 5, 65, 0.06);
}
.endorsement-lb__counter {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.14em; color: #fff;
}

@media (max-width: 780px) {
    .endorsement-lb__arrow { width: 44px; height: 44px; }
    .endorsement-lb__prev { left: 8px; }
    .endorsement-lb__next { right: 8px; }
    .endorsement-lb__frame { padding-bottom: 56px; }
    .endorsement-lb__counter { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .endorsement.is-clamped .endorsement__more::after,
    .endorsement:hover .endorsement__more::after { transition: none; }
}


/* ==========================================================================
   VOICES — shared across every page that renders the .voices markup.
   These rules were authored under `.home-alt .voices` in home-alt-v2.css,
   which is enqueued ONLY on the front page (7456) and "Our Lasers" (7225).
   Every other page (the laser detail pages, etc.) emits identical .voices
   markup but never loaded that sheet, so the carousel fell back to bare
   home.css and collapsed. Same classes, same declarations — just de-scoped
   from .home-alt and moved into a globally-enqueued sheet.
   The .home-alt copies still exist and are MORE specific, so the front page
   cascade is unchanged.
   ========================================================================== */
/* ==========================================================================
   07 — VOICES — light band (Jul 2026): the dark Ken Burns photo treatment was
   retired. Base home.css already styles .voices for the bone ground (bone bg,
   ink rules/dots/counter/arrows), so this block only carries the head sizing
   and what the front page adds on top of it.
   ========================================================================== */
.voices .voices-head { margin-bottom: clamp(34px,5vh,52px); }
/* The per-slide "— 04" numbers were removed (Jul 2026). home.css still lays the
   slide out as 1fr 7fr (number | content), which would drop the content div
   into the skinny number column — collapse to a single column instead. */
.voices .voice-slide { grid-template-columns: 1fr; }
.voices .voices-head .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-ink); font-weight: 500; }
.voices .voices-head .kicker::after { content: ''; width: 24px; height: 1px; background: var(--deka-ink); }
.voices .voices-head h2 { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px,4vw,50px); line-height: 1.05; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 14px; }
/* Light ground: emphasis is serif italic, never colour — brass is barred here. */
.voices .voices-head h2 em { font-style: italic; }
/* lead beneath the voices headline — every other section carries one; without it
   this head read thin. */
.voices .voices-head .voices-lead {
    margin-top: 16px; max-width: 62ch;
    font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65;
    color: rgba(4, 5, 65, 0.72);
}

/* Voices — DESKTOP ONLY: portrait + name + title get their own left column so
   the portrait can be far larger (48px -> 150px); the quote takes the rest.
   Done purely with grid placement — the markup order (quote, then .who) is
   untouched, so below 900px it falls back to the stacked default with no
   override to undo.
   150px is the ceiling on purpose: the source portraits are 150x150 (no larger
   square crops exist for Heller / Bilski / Horowitz), so anything bigger
   upscales and goes soft. */
@media (min-width: 900px) {
    .voices .voice-slide > div:not(.voice-no) {
        display: grid;
        grid-template-columns: 210px 1fr;
        column-gap: clamp(36px, 4vw, 64px);
        align-items: center;   /* was start — portrait now centres against the quote card */
    }
    .voices .voice-slide .q { grid-column: 2; grid-row: 1; }
    .voices .voice-slide .who {
        grid-column: 1; grid-row: 1;
        margin-top: 0;
        flex-direction: column; align-items: flex-start; gap: 18px;
    }
    .voices .voice-slide .avatar { width: 150px; height: 150px; flex: none; }
    .voices .voice-slide .avatar img {
        width: 100%; height: 100%; border-radius: 50%;
        object-fit: cover; display: block;
    }
    .voices .voice-slide .meta .n { font-size: 20px; }
    /* Speech-bubble tail on the quote card, pointing at the portrait column.
       Desktop only — below 900px the portrait sits under the quote, so a
       left-pointing tail would aim at nothing. A rotated square whose exposed
       left/bottom edges continue the card's own border; its fill matches the
       card gradient at mid-height. */
    .voices .voice-slide .q { position: relative; }
    .voices .voice-slide .q::before {
        content: ""; position: absolute; top: 50%; left: -9px;
        width: 16px; height: 16px;
        transform: translateY(-50%) rotate(45deg);
        background: #fdfcfa;
        border-left: 1px solid rgba(4, 5, 65, 0.10);
        border-bottom: 1px solid rgba(4, 5, 65, 0.10);
    }
}
/* Below the desktop grid the portrait + name sit UNDER the quote card, so the
   speech-bubble tail hangs off the card's bottom-left, aimed at them. Down
   arrow = right+bottom borders exposed on the rotated square; fill matches the
   card gradient's END stop since this tail sits on the bottom edge. */
@media (max-width: 899.98px) {
    .voices .voice-slide .q { position: relative; }
    .voices .voice-slide .q::before {
        content: ""; position: absolute; bottom: -9px; left: 28px;
        width: 16px; height: 16px;
        transform: rotate(45deg);
        background: #faf9f5;
        border-right: 1px solid rgba(4, 5, 65, 0.10);
        border-bottom: 1px solid rgba(4, 5, 65, 0.10);
    }
}
/* Mobile controls: the single space-between row squashes — the "03 / 05"
   counter breaks vertically. Dots take their own full-width row on top;
   beneath, the counter sits directly beside the arrows. */
@media (max-width: 720px) {
    .voices .voices-controls { flex-wrap: wrap; row-gap: 20px; }
    .voices .voices-dots { flex-basis: 100%; justify-content: flex-end; }
    .voices .voices-counter { white-space: nowrap; margin-left: auto; margin-right: 18px; }
}

/* The quote keeps the lp-card treatment — a white card, now on the bone band.
   On a light face the house rule applies: emphasis is serif italic, NOT colour,
   so the em stays ink rather than picking up brass. */
.voices .voice-slide .q {
    /* home.css caps .q at a ~62ch measure. That was right for bare text, but on a
       card it left the card floating ~200px short of its column, reading as a
       mistake. The card fills the column; its padding keeps the measure sane. */
    max-width: none;
    padding: clamp(26px, 3vw, 38px);
    background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
    border: 1px solid rgba(4, 5, 65, 0.10);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 12px 26px -20px rgba(4, 5, 65, 0.30);
    color: var(--deka-ink);
}
.voices .voice-slide .q em { color: var(--deka-ink); }

@media (min-width: 1000px) {
    .voices .voices-head h2 { font-size: var(--deka-h2); line-height: 1.08; }
}