/* Tablet-only layout layer. Fine-pointer desktops and phone widths keep their
   approved styles. Breakpoints describe available space, not a device brand. */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
    :root {
        --tablet-body: clamp(16px, 1.45vw, 18px);
        --tablet-heading: clamp(30px, 3.2vw, 40px);
        --tablet-space: clamp(28px, 3.5vw, 48px);
    }

    /* A consistent touch header across portrait and landscape. */
    .header-inner .nav-left, .header-inner .nav-right,
    .lvx-nav-left, .lvx-nav-right { display: none !important; }
    .header-inner { height: 86px !important; padding: 0 28px !important; }
    .header-inner .header-grid, .lvx-header-grid, .lvx-sticky-inner {
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        position: relative;
        width: 100%;
        min-height: 48px;
        padding-top: 0;
    }
    .header-inner .brand, .lvx-header .lvx-brand, .lvx-sticky .lvx-brand {
        position: static !important;
        transform: none !important;
    }
    .header-inner .brand img, .lvx-brand img {
        width: 48px !important;
        height: auto !important;
        margin-top: 0;
    }
    .header-inner .mobile-toggle, .lvx-mobile-toggle {
        display: block !important;
        position: absolute !important;
        left: 24px !important;
        top: 50% !important;
        transform: translateY(-50%);
        margin: 0 !important;
        z-index: 2;
        width: 44px;
        height: 44px;
    }
    .header-inner .mobile-toggle::before, .lvx-mobile-toggle::before { top: 12px; }
    .header-inner .mobile-toggle span, .lvx-mobile-toggle span { top: 20px; }
    .header-inner .mobile-toggle::after, .lvx-mobile-toggle::after { top: 28px; bottom: auto; }
    .header-inner .mobile-toggle::before, .header-inner .mobile-toggle::after,
    .header-inner .mobile-toggle span, .lvx-mobile-toggle::before,
    .lvx-mobile-toggle::after, .lvx-mobile-toggle span { left: 9px; width: 25px; }
    .header-inner .mobile-toggle::before, .header-inner .mobile-toggle::after,
    .header-inner .mobile-toggle span { background: #0f2a1d !important; }
    .mobile-menu, .lvx-mobile-menu { display: block !important; overflow-y: auto; max-height: 100dvh; }
    .mobile-menu-inner, .lvx-mobile-inner { max-width: 760px; margin-inline: auto; }
    .mobile-close, .lvx-close { width: 44px; height: 44px; display: flex; align-items: center; }

    /* Hero copy never inherits small desktop container-relative text. */
    .proportional-hero {
        --hero-heading-size: clamp(36px, 3.8vw, 48px);
        --hero-copy-size: var(--tablet-body);
        --hero-copy-width: min(85%, 760px);
    }
    .hero .hero-content { max-width: calc(100% - 64px); }
    .hero .hero-content h1 { overflow-wrap: break-word; }

    .main-box-inner > .dual-box-section.hero-two {
        margin-top: 106px !important;
        --service-panel-height: clamp(560px, 52vw, 680px) !important;
        --service-panel-padding: var(--tablet-space) !important;
        --service-title-size: clamp(34px, 3.5vw, 44px) !important;
        --service-title-gap: 24px !important;
        --service-body-size: var(--tablet-body) !important;
        --service-subheading-size: 26px !important;
        --blog-hero-height: clamp(480px, 45vw, 620px) !important;
        --blog-hero-padding: var(--tablet-space) !important;
        --blog-title-size: clamp(34px, 3.5vw, 44px) !important;
    }
    .main-box-inner > .dual-box-section.hero-two .dual-box {
        height: auto;
        min-height: 480px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .main-box-inner > .dual-box-section.hero-two .dual-content { padding: var(--tablet-space); }
    .main-box-inner .dual-scroll { overflow-y: auto; padding-right: 12px; font-size: var(--tablet-body); }
    .main-box-inner .dual-scroll p { font-size: var(--tablet-body); line-height: 1.65; }
    .main-box-inner .dual-scroll h4 { font-size: 26px; line-height: 1.3; }
    .main-box-inner .dual-media { height: auto; min-width: 0; }
    .main-box-inner .dual-media img { position: absolute; inset: 0; }
    .futures-hero h1 { font-size: clamp(32px, 3.3vw, 42px); }
    .futures-hero .front-row p { font-size: var(--tablet-body); line-height: 1.6; }

    /* Text and image panels are tall enough for their actual content. */
    .main-box > .best-stylist-section .best-stylist-box {
        aspect-ratio: auto !important;
        min-height: 460px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .best-stylist-left { padding: var(--tablet-space); min-width: 0; }
    .best-stylist-left-inner { max-width: 100%; }
    .best-stylist-left-inner h3, .best-stylist-left-inner h4 { font-size: var(--tablet-heading); line-height: 1.2; }
    .best-stylist-left-inner p { font-size: var(--tablet-body); line-height: 1.6; }

    .main-box > .approach-section {
        --approach-panel-height: 440px;
        --approach-content-padding: 32px;
        --approach-heading-size: 32px;
        --approach-copy-size: var(--tablet-body);
        --approach-copy-width: 100%;
        --approach-button-size: 48px;
    }
    .approach-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; min-height: 440px; }
    .main-box:has(> .hero.hero-zoom) > .approach-section :is(.approach-visual, .approach-content) {
        min-height: 440px;
    }
    .approach-title { font-size: 58px; line-height: 24px; padding: 60px 28px; }
    .approach-title span { font-size: 38px; }
    .approach-navigation { display: grid; grid-template-columns: 48px 1fr 48px; gap: 28px; }
    .approach-arrow { position: static; grid-row: 1; }
    .approach-arrow.prev { grid-column: 1; }
    .approach-arrow.next { grid-column: 3; }
    .approach-content-viewport { grid-column: 1 / -1; grid-row: 2; }

    .blog-section .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .blog-section .blog-card { min-height: 420px; padding: 48px 28px 100px; border-radius: 22px; }
    .blog-section .blog-card h3 { font-size: 24px; line-height: 1.3; letter-spacing: 0.035em; }
    .blog-section .blog-card p { font-size: var(--tablet-body); }
    /* Touch users can open an article without first discovering a hover state. */
    .blog-section .blog-card .blog-cta { opacity: 1; pointer-events: auto; transform: translateX(-50%); bottom: 28px; font-size: 14px; }
    .blog-section .blog-card:is(:hover, .mobile-active) h3,
    .blog-section .blog-card:is(:hover, .mobile-active) p { opacity: 1; transform: none; }
    .blog-section .blog-card:is(:hover, .mobile-active)::after { opacity: 0; }
    .service-card { aspect-ratio: 1 / 1.1; }
    .service-title { font-size: clamp(32px, 3.2vw, 42px); }
    .demo-experience-card { flex-basis: calc((100vw - 88px) / 2); min-height: 390px; padding: 28px; }
    .demo-experience-card blockquote { font-size: 22px; line-height: 1.35; }

    .about-perspective, .home-front-row {
        --story-width: min(100%, 760px);
        --story-font: var(--tablet-body);
        --story-padding: 64px;
        --front-marquee-size: 40px;
    }
    .about-perspective .boxhead { font-size: var(--tablet-heading); }
    .about-values .best-stylist-box { min-height: 460px; aspect-ratio: auto; }
    .about-values h2 { font-size: var(--tablet-heading); }
    .about-values p { font-size: var(--tablet-body); }
    .futures-section .unified-front-box { padding-block: 64px; }
    .futures-section .front-row-text { max-width: 760px; padding-inline: 24px; }
    .futures-section .front-row-text > span, .futures-join .text-center > span { font-size: var(--tablet-body); }
    .futures-funds h3, .futures-join h2, .futures-section .futures-focus-title { font-size: var(--tablet-heading); line-height: 1.25; }
    .futures-section .impact-container { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-inline: 0; }
    .futures-section .impact-card { padding: 64px 28px; }
    .futures-section .impact-card h3 { font-size: 28px; }
    .futures-section .impact-card p { font-size: var(--tablet-body); }
    .main-box-inner > .unified-front-section:has(.blog-row-text) {
        --article-measure: 820px;
        --article-font-size: var(--tablet-body);
        --article-block-padding: 56px;
        --article-inline-padding: 24px;
    }

    .split-contact-content { padding: 48px 36px 0; min-width: 0; }
    .split-title { font-size: 48px; padding-top: 0; }
    .split-text p, .connect-item p { font-size: var(--tablet-body); }
    .connect-item h5 { font-size: 24px; }
    .split-form input, .split-form textarea, .connect-right input, .connect-right textarea { font-size: 16px; min-width: 0; }
    .split-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .connect-left, .connect-right { min-width: 0; }
    .main-box > .connect-section .connect-box { grid-template-columns: 1fr; gap: 32px; }

    /* Stacked footer throughout the touch-tablet band. */
    .unified-footer-section .footer-main { grid-template-columns: 1fr !important; gap: 36px; }
    .unified-footer-section .footer-main::after { display: none; }
    .unified-footer-section .desk-only { display: none !important; }
    .unified-footer-section .mob-only { display: block !important; }
    .unified-footer-section .footer-brand { border: 0; padding: 0; }
    .unified-footer-section .footer-brand > div { max-width: 600px; margin-inline: auto; }
    .unified-footer-section .footer-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .unified-footer-section .footer-col { min-width: 0; overflow-wrap: break-word; }
    .unified-footer-section .footer-col li { font-size: 16px; }
    .unified-footer-section .footer-col li.footi { font-size: 14px; }
    .unified-footer-section .footerllogo { display: block; width: min(100%, 460px); margin: 0 auto; }
    .unified-footer-section .section-divider { width: 100%; margin-left: 0; }
    .unified-footer-section .connect-right button { min-height: 44px; }
    .unified-footer-section .footer-brand .connect-right input { font-size: 16px; }
    .lux-editorial-title { font-size: var(--tablet-heading) !important; }
    .lux-editorial-text, .lux-para { font-size: var(--tablet-body) !important; line-height: 1.65 !important; }
}

@media (min-width: 768px) and (max-width: 1023px) and (pointer: coarse) {
    .main-box-inner > .dual-box-section.hero-two .dual-box,
    .main-box-inner:has(.blog-row-text) .dual-box,
    .main-box > .best-stylist-section .best-stylist-box { grid-template-columns: 1fr; }
    .main-box-inner > .dual-box-section.hero-two .dual-media,
    .main-box-inner:has(.blog-row-text) .dual-media,
    .best-stylist-right { height: 440px; max-height: none; aspect-ratio: auto; }
    .main-box-inner > .dual-box-section.hero-two .dual-content { padding: 40px; }
    .main-box-inner > .dual-box-section.hero-two { --service-panel-height: auto !important; }
    .main-box-inner .dual-scroll { overflow: visible; flex: none; padding-right: 0; }
    .main-box-inner .dual-title { font-size: 36px; }
    .main-box > .approach-section .approach-grid { grid-template-columns: 1fr; }
    .main-box > .approach-section { --approach-panel-height: 380px; }
    .main-box:has(> .hero.hero-zoom) > .approach-section :is(.approach-visual, .approach-content) {
        min-height: 380px;
    }
    .split-contact-box { grid-template-columns: 1fr; }
    .split-contact-image { height: 400px; }
}