/* ════════════════════════════════════════════════════════════════════════
   SEE — base overrides
   Loaded sitewide AFTER all other SEE stylesheets.
   Fixes Kadence parent-theme padding/margin that adds dead space to every
   page using a SEE shortcode. Also tightens shared spacing tokens and
   improves mobile hero visibility.
═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. Kill Kadence content-area waste on SEE-shortcode pages ─────────── */
/*
   Kadence parent theme adds:
     .content-area     margin: 80px 0
     .entry-content-wrap padding: 32px
   Both push our shortcode-rendered hero ~112px below the nav. Strip them
   on any page that uses a SEE shortcode (body.has-see-fullbleed is set by
   the see_body_class_for_fullbleed() filter in functions.php).
*/
body.has-see-fullbleed .content-area {
  margin: 0 !important;
}
body.has-see-fullbleed .entry-content-wrap {
  padding: 0 !important;
}
body.has-see-fullbleed .content-container.site-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
body.has-see-fullbleed .entry-content,
body.has-see-fullbleed .entry-content-wrap,
body.has-see-fullbleed .site-main {
  max-width: none !important;
}

/* Also kill the legacy title area on these pages — every SEE page has its own hero */
body.has-see-fullbleed .entry-header,
body.has-see-fullbleed .kadence-title-area,
body.has-see-fullbleed .page-title {
  display: none !important;
}


/* ─── 2. Reduce hero padding-top on NON-home pages ─────────────────────── */
/*
   On the homepage the topbar + pill nav are position:fixed (transparent
   over the bleed hero), so hero content needs ~180px top clearance.
   On every other SEE page the headers are IN FLOW (sticky/relative) so
   the hero doesn't need that clearance. Override hero padding-top to a
   tight value when has-see-fullbleed is set but we're not on home.
*/
body.has-see-fullbleed:not(.home) .seeab-hero,
body.has-see-fullbleed:not(.home) .seesv-hero,
body.has-see-fullbleed:not(.home) .seers-hero,
body.has-see-fullbleed:not(.home) .seelg-hero,
body.has-see-fullbleed:not(.home) .seeloc-hero,
body.has-see-fullbleed:not(.home) .seeql-hero,
body.has-see-fullbleed:not(.home) .seefu-hero {
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}


/* ─── 3. Tighten in-flow section padding across SEE shortcode CSS ──────── */
/*
   Several SEE stylesheets use clamp(70-90px, 9vw, 120-140px) on sections.
   That stacks to 240-280px of vertical padding between two sections — too
   gappy. Override to clamp(40px, 6vw, 80px) sitewide for the .se*-sec and
   .see-* section primitives.
*/
body.has-see-fullbleed .seers-topics,
body.has-see-fullbleed .seers-topic-body,
body.has-see-fullbleed .seers-siblings,
body.has-see-fullbleed .seers-final,
body.has-see-fullbleed .seesv-sec,
body.has-see-fullbleed .seesv-final,
body.has-see-fullbleed .seeloc-intro,
body.has-see-fullbleed .seeloc-sec,
body.has-see-fullbleed .seeloc-final,
body.has-see-fullbleed .seeab-heritage,
body.has-see-fullbleed .seeab-nums,
body.has-see-fullbleed .seeab-chapter,
body.has-see-fullbleed .seeab-founder,
body.has-see-fullbleed .seeab-workshop,
body.has-see-fullbleed .seeab-stds,
body.has-see-fullbleed .seeab-cta,
body.has-see-fullbleed .seelg-body,
body.has-see-fullbleed .seefu-orbit-section,
body.has-see-fullbleed .seefu-video-section {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* Tighten the section-head margin too (currently 50px → drop to 32px) */
body.has-see-fullbleed .seers-topics__head,
body.has-see-fullbleed .seesv-sec__head,
body.has-see-fullbleed .seeloc-sec__head,
body.has-see-fullbleed .seers-siblings__head {
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}

/* Homepage shortcode sections — also tighten on desktop (previously clamp(56-60px, 7-8vw, 96-110px)) */
body.home .see-numbers,
body.home .see-family,
body.home .see-range,
body.home .see-industries,
body.home .see-atlas-teaser,
body.home .see-callback {
  padding-top: clamp(42px, 5.5vw, 72px) !important;
  padding-bottom: clamp(42px, 5.5vw, 72px) !important;
}


/* ─── 4. Mobile hero — better video visibility + no dead space ─────────── */
/*
   The user reports:
     (a) "can't see the hero video on mobile" — overlay was too dark
     (b) "huge black gap below hero" — hero forced to 100dvh but content
         only filled 591px, leaving 200px of dark video at bottom
   Fixes:
     - Drop the 100dvh forcing — let hero size to content with a soft min
     - Lighten the gradient
     - Force video visibility/opacity in case of browser quirks
*/
@media (max-width: 768px) {
  .see-hero {
    /* Auto-size to content with a soft floor — no more 200px of dead video */
    height: auto !important;
    min-height: auto !important;
  }
  .see-hero__inner {
    height: auto !important;
    min-height: auto !important;
  }
  .see-hero__content {
    /* No more height: 100% trick — let content's own padding determine height */
    height: auto !important;
    align-items: flex-start !important;
  }
  .see-hero__overlay {
    /* Lighter mobile overlay so the workshop video is genuinely visible */
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.25) 35%,
      rgba(0, 0, 0, 0.30) 65%,
      rgba(0, 0, 0, 0.55) 100%
    ) !important;
  }
  /* Ensure video is actually shown (some browsers downgrade z-index on absolute children) */
  .see-hero__video {
    z-index: 1 !important;
  }
  .see-hero__video video {
    /* Force visibility regardless of browser optimisations */
    visibility: visible !important;
    opacity: 1 !important;
    /* Better quality on mobile — let the browser scale rather than crop hard */
    object-position: center 30%;
  }
  /* Content sits at the bottom 60% of the hero, leaving top 40% as visible video */
  .see-hero__content {
    padding: 80px clamp(18px, 5vw, 28px) 48px !important;
    align-items: flex-end !important;
  }
}

/* Very narrow phones — even tighter spacing + scroll-hint hidden */
@media (max-width: 420px) {
  .see-hero__content {
    padding: 70px 18px 40px !important;
  }
  .see-hero__h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.05 !important;
  }
  .see-hero__desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   13. MOBILE FOOTER — Direction C "Sticky Utility" (Stripe / dev-tool style)
   Two parts:
     a) Compact static footer (~260px):  brand row → stat card → link chip
        row → bottom copyright.  Verbose blocks all hidden.
     b) Persistent sticky utility bar (~58px) docked to bottom of viewport:
        Call / WhatsApp / Quote — always tappable while scrolling.
   Body padding-bottom reserves space for the sticky bar so it doesn\'t
   cover the last footer line.
═══════════════════════════════════════════════════════════════════════ */

/* ─── (a) Compact static footer @ ≤600px ─────────────────────────────── */
@media (max-width: 600px) {

  /* Force the WHOLE footer to dark surface so the chip wall reads well */
  .seeft {
    background: #0a0a0a !important;
    color: #fff !important;
    border-top: none !important;
  }
  .seeft *,
  .seeft a {
    color: inherit !important;
  }

  /* Hide every verbose block — sticky bar + brand stat card carry the load.
     IMPORTANT: use nth-child (not nth-of-type) because both .seeft__brand
     and .seeft__col are <div> tags, so type-counting shifts by one. */
  .seeft__about,
  .seeft__hours,
  .seeft__cities,
  .seeft__top > .seeft__col:nth-child(2),  /* Contact col — sticky bar covers it */
  .seeft__legal a[href*="sitemap"],
  .seeft-belt,                              /* scrolling product belt */
  .seeft-card__sub,                         /* long card paragraph */
  .seeft-card__ey {                         /* "Built in-house · …" eyebrow */
    display: none !important;
  }

  /* Hide the inline "Hours" subheading still living inside Company col */
  .seeft__col [style*="margin-top:18px"] {
    display: none !important;
  }

  /* CTA card before footer info — keep but tighten massively (was ~600px) */
  .seeft-cta-wrap {
    margin: 24px 0 12px !important;
    padding: 0 12px !important;
  }
  .seeft-card {
    padding: 22px 18px !important;
    border-radius: 16px !important;
  }
  .seeft-card__top {
    text-align: left !important;
  }
  .seeft-card__h {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
  }
  .seeft-card__h-sub {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    display: block !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .seeft-card__bot {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .seeft-card__addr {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
  .seeft-card__hrs {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }
  .seeft-card__btn {
    font-size: 11.5px !important;
    padding: 8px 14px !important;
    align-self: stretch !important;
    text-align: center !important;
  }

  /* Static footer container */
  .seeft {
    padding: 0 !important;
  }
  .seeft__inner {
    padding: 0 !important;
  }

  /* Top grid: stack as single column with thin divider lines between blocks */
  .seeft__top {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 22px 18px 12px !important;
  }

  /* (1) BRAND ROW — small horizontal mark + name + Est. */
  .seeft__brand {
    text-align: left !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .seeft__brand-mark {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .seeft__alogo,
  .seeft__brand-mark video,
  .seeft__brand-mark img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }
  .seeft__brand-text {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .seeft__brand-name {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }
  .seeft__brand-sub {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin: 3px 0 0 !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }

  /* (2) TRUST CARD — single 3-col card with subtle bg, like a stat tile */
  .seeft__trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    flex-direction: unset !important;
    gap: 0 !important;
    padding: 14px 6px !important;
    margin: 14px 0 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 10px !important;
    border: none !important;
  }
  .seeft__trust-item {
    flex: unset !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 4px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    gap: 4px !important;
  }
  .seeft__trust-item:last-child { border-right: none !important; }
  .seeft__trust-item strong {
    font-size: 17px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
  }
  .seeft__trust-item span {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin: 0 !important;
  }

  /* (3) LINK CHIPS — Products (col 3) + Company (col 4) as chip wall.
     Contact col 2 is already hidden above. */
  .seeft__top > .seeft__col:nth-child(3),
  .seeft__top > .seeft__col:nth-child(4) {
    padding: 14px 0 0 !important;
    border-bottom: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .seeft__top > .seeft__col:nth-child(3) .seeft__col-h,
  .seeft__top > .seeft__col:nth-child(4) .seeft__col-h {
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    margin: 0 0 4px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    flex: 0 0 100% !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  .seeft__top > .seeft__col:nth-child(3) a,
  .seeft__top > .seeft__col:nth-child(4) a {
    display: inline-block !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    padding: 7px 11px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 99px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s, border-color 0.2s !important;
  }
  .seeft__top > .seeft__col:nth-child(3) a:hover,
  .seeft__top > .seeft__col:nth-child(4) a:hover,
  .seeft__top > .seeft__col:nth-child(3) a:focus-visible,
  .seeft__top > .seeft__col:nth-child(4) a:focus-visible {
    background: rgba(204, 27, 27, 0.18) !important;
    border-color: rgba(204, 27, 27, 0.5) !important;
    color: #fff !important;
  }

  /* (4) BOTTOM strip — one tight line, centred */
  .seeft__bottom {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 18px 18px 22px !important;
    text-align: center !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .seeft__copy {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }
  .seeft__legal {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .seeft__legal a {
    font-size: 10.5px !important;
    color: rgba(255, 255, 255, 0.65) !important;
  }

  /* Reserve space at bottom of page so sticky bar doesn\'t cover footer line */
  body.has-see-fullbleed,
  body {
    padding-bottom: 64px !important;
  }
}


/* ─── (b) Sticky utility bar @ ≤1024px ───────────────────────────────── */
/* Restyle the existing `.seeft-float` so it matches the Stripe-style mock.
   The element is already present in footer.php and shown via JS at ≤1024px.
   We give it a dark surface, three equal buttons, neutral / WhatsApp green
   / red accent — and pin it to bottom of viewport with safe-area padding. */

@media (max-width: 1024px) {
  .seeft-float {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 95 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.96), #0a0a0a) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }

  .seeft-float__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 8px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: transform 0.15s, background 0.2s !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
  }

  .seeft-float__btn--call {
    background: #1f1f1f !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  .seeft-float__btn--call:hover { background: #2a2a2a !important; transform: translateY(-1px) !important; }

  .seeft-float__btn--wa {
    background: #25D366 !important;
    color: #0a3a1a !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }
  .seeft-float__btn--wa:hover { background: #20bb59 !important; transform: translateY(-1px) !important; }

  .seeft-float__btn--quote {
    background: #CC1B1B !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  .seeft-float__btn--quote:hover { background: #b51717 !important; transform: translateY(-1px) !important; }
}

/* Hide the sticky bar at desktop sizes (the inline JS already does this,
   but belt-and-braces with CSS for cases where JS hasn\'t loaded yet) */
@media (min-width: 1025px) {
  .seeft-float {
    display: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   15. LOGO RENDERING — crisp at every size
   Source PNG is 2048×2048 transparent RGBA. Browsers downsample bilinearly
   by default which can look fuzzy at 44-46px. Force optical-sharpness with
   image-rendering hints and centered object-fit on every logo placement.
═══════════════════════════════════════════════════════════════════════ */
.see-tb__logo img,
.see-mbar__logo img,
.see-drawer__brand img,
.seeft__alogo,
.seeab-chapter__logo {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  object-fit: contain;
  object-position: center;
}

/* Square framing for placements that expect a 1:1 logo */
.seeft__alogo,
.seeab-chapter__logo {
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
}

/* About-chapter logo: cap at reasonable size on desktop, less on mobile */
.seeab-chapter__logo {
  max-width: 280px !important;
  max-height: 280px !important;
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 600px) {
  .seeab-chapter__logo {
    max-width: 180px !important;
    max-height: 180px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   16. ACCESSIBILITY — focus styles + skip-to-content + reduced motion
═══════════════════════════════════════════════════════════════════════ */

/* Visible focus rings on interactive chip-style links and sticky bar buttons.
   Default browser outlines were being suppressed by some hover/transition rules. */
.seeft__col a:focus-visible,
.seeft-float__btn:focus-visible,
.seers-topic:focus-visible,
.seers-sibling:focus-visible,
.seeloc-prod:focus-visible,
.seeloc-btn:focus-visible,
.seers-btn:focus-visible,
.seesv-btn:focus-visible,
.seeab-btn:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
  border-radius: 12px !important;
}

/* Form fields and FAQ accordions: dark-bg focus ring */
.seers-faq__q:focus-visible,
.seeloc-faq__q:focus-visible,
.seelg-toc li a:focus-visible,
.seesv-form__field input:focus-visible,
.seesv-form__field select:focus-visible,
.seesv-form__field textarea:focus-visible {
  outline: 2px solid #CC1B1B !important;
  outline-offset: 2px !important;
}

/* Skip-to-content link — visible only on keyboard focus, hidden otherwise.
   The actual link element is added in header.php (see PHP edit below). */
.see-skip-link {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: #CC1B1B !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  z-index: 9999 !important;
  transform: translateY(-200%) !important;
  transition: transform 0.2s !important;
}
.see-skip-link:focus,
.see-skip-link:focus-visible {
  transform: translateY(0) !important;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .seeft-belt__inner,
  .see-hero-ticker__inner,
  .seeloc-prod img,
  .seeab-mw img {
    animation: none !important;
    transition: none !important;
  }
  .seers-rv,
  .seeloc-rv,
  .seeab-rv,
  .seesv-rv,
  .seelg-rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   14. MOBILE DRAWER — clean thumbnails, consistent indentation
   Real thumbnails come from see_menu_item_thumb_url() in functions.php
   (handles both post_type items and taxonomy category items).
   When no image is available we leave the thumb space EMPTY so the title
   text always lines up with rows that DO have a thumbnail — no jarring
   left-hugged rows.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Every drawer row uses flex with a fixed thumbnail slot */
  .see-drawer .see-msub > li > a,
  .see-drawer .see-msub2 > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 50px 10px 14px !important;
    min-height: 56px !important;
  }
  /* Real thumbnail images — uniform 36×36 rounded square */
  .see-drawer img.see-thumb,
  .see-drawer img.see-nav__thumb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 7px !important;
    object-fit: cover !important;
    object-position: center !important;
    flex-shrink: 0 !important;
    background: #f4f3ee !important;
  }
  /* CONSISTENT INDENTATION: items WITHOUT a thumbnail get a 48px transparent
     spacer so the title text starts at the same x-coord as rows that have one.
     Using :has() — supported in iOS 15.4+ / Chrome 105+ / Firefox 121+. */
  .see-drawer .see-msub > li > a:not(:has(img)),
  .see-drawer .see-msub2 > li > a:not(:has(img)) {
    padding-left: 62px !important;
  }
  /* Fallback for ancient browsers without :has() — give every leftmost <span>
     in the link the same min-width so siblings shift right uniformly. */
  .see-drawer .see-msub > li > a > span:not(.see-thumb):first-child,
  .see-drawer .see-msub2 > li > a > span:not(.see-thumb):first-child {
    margin-left: 0 !important;
  }
  /* Any leftover placeholder span (shouldn\'t appear since header.php now omits
     placeholders entirely, but kept as safety net) */
  .see-drawer .see-thumb:not(img):not(.has-img),
  .see-drawer .see-nav__thumb:not(img):not(.has-img) {
    display: none !important;
  }
  /* Title text — keep readable, single line if possible */
  .see-drawer .see-msub > li > a > span:not(.see-thumb),
  .see-drawer .see-msub2 > li > a > span:not(.see-thumb) {
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #1C1C1C !important;
    font-weight: 500 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Sub-menu toggle chevron — pinned to the TOP of the <li> so it stays
     aligned with the link row even when the sub-list below is expanded.
     (Previously top: 50% positioned it relative to the WHOLE li including
     expanded children, which made it float between rows.) */
  .see-drawer .see-mtoggle {
    position: absolute !important;
    right: 10px !important;
    top: 12px !important;
    transform: none !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.04) !important;
    color: #1C1C1C !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }
  .see-drawer .see-mtoggle svg {
    width: 12px !important;
    height: 12px !important;
    transition: transform 0.2s ease !important;
  }
  .see-drawer .sub-toggle:checked ~ .see-mtoggle svg {
    transform: rotate(90deg) !important;
  }
  /* Same fix for the L1 drawer toggle (e.g. on "Products" header row) */
  .see-drawer .see-mhead {
    position: relative !important;
  }
  .see-drawer .see-mhead .see-mtoggle {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  /* Drawer list items — give right padding so toggle doesn\'t overlap text */
  .see-drawer li {
    position: relative !important;
  }
  .see-drawer li a {
    padding-right: 50px !important;
  }
}


/* ─── 5. Universal mobile section padding squeeze ──────────────────────── */
/* On very small screens the section padding can drop further */
@media (max-width: 600px) {
  body.has-see-fullbleed .seers-topics,
  body.has-see-fullbleed .seers-topic-body,
  body.has-see-fullbleed .seers-siblings,
  body.has-see-fullbleed .seers-final,
  body.has-see-fullbleed .seesv-sec,
  body.has-see-fullbleed .seesv-final,
  body.has-see-fullbleed .seeloc-intro,
  body.has-see-fullbleed .seeloc-sec,
  body.has-see-fullbleed .seeloc-final,
  body.has-see-fullbleed .seeab-heritage,
  body.has-see-fullbleed .seeab-nums,
  body.has-see-fullbleed .seeab-chapter,
  body.has-see-fullbleed .seeab-founder,
  body.has-see-fullbleed .seeab-workshop,
  body.has-see-fullbleed .seeab-stds,
  body.has-see-fullbleed .seeab-cta,
  body.has-see-fullbleed .seelg-body,
  /* Homepage shortcode sections */
  body.has-see-fullbleed .see-numbers,
  body.has-see-fullbleed .see-family,
  body.has-see-fullbleed .see-range,
  body.has-see-fullbleed .see-industries,
  body.has-see-fullbleed .see-atlas-teaser,
  body.has-see-fullbleed .see-callback {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Hero gets even tighter top padding on mobile (header is taller proportionally) */
  body.has-see-fullbleed:not(.home) .seeab-hero,
  body.has-see-fullbleed:not(.home) .seesv-hero,
  body.has-see-fullbleed:not(.home) .seers-hero,
  body.has-see-fullbleed:not(.home) .seelg-hero,
  body.has-see-fullbleed:not(.home) .seeloc-hero,
  body.has-see-fullbleed:not(.home) .seeql-hero,
body.has-see-fullbleed:not(.home) .seefu-hero {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}


/* ─── 6. Prevent horizontal scroll on mobile (catches stretching issue) ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* SEE shortcode wrappers all use width:100vw + negative margin trick to
   bleed full-width. On very narrow mobile this can cause a tiny scrollbar
   from rounding errors. Lock the negative margin to negative 50vw exactly. */
@media (max-width: 1024px) {
  .seeab, .seesv, .seers, .seelg, .seeloc, .seefu, .seers--topic {
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
  }
}


/* ─── 7. Tighten section heads + headlines on small screens ────────────── */
@media (max-width: 600px) {
  .seers-topics__h, .seesv-sec__h, .seeloc-sec__h,
  .seeab-heritage__h, .seeab-chapter__h, .seeab-founder__h,
  .seeab-workshop__h, .seeab-stds__h, .seers-siblings__h,
  .seers-final__h, .seesv-final__h, .seeloc-final__h, .seeab-cta__h {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.15 !important;
  }
  .seers-hero__h, .seesv-hero__h, .seeloc-hero__h, .seeab-hero__h, .seelg-hero__h {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.05 !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   8. MOBILE GRID COLLAPSE — convert single-column stacks back to 2-col
   At mobile widths, many of our auto-fit grids fell to single column
   because the minmax(260px, 1fr) caused 1-col below ~520px.
   Re-grid as 2-col on phones to halve scroll height.
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Location pages — stacks were 5/4/3 deep, way too tall */
  .seeloc-localities,
  .seeloc-specs,
  .seeloc-industries {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .seeloc-loc,
  .seeloc-spec,
  .seeloc-ind {
    padding: 16px 14px !important;
  }
  .seeloc-loc__h,
  .seeloc-spec__h,
  .seeloc-ind__h {
    font-size: 13.5px !important;
    margin-bottom: 6px !important;
  }
  .seeloc-loc p,
  .seeloc-spec p,
  .seeloc-ind p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  .seeloc-spec__num {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  /* Homepage industries — was 8 cells stacking at 1371px tall */
  .see-industries__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .see-industries__cell {
    padding: 16px 14px !important;
    min-height: 110px !important;
  }

  /* About page — workshop capabilities + standards both 4-card grids */
  .seeab-workshop__capabilities,
  .seeab-stds__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .seeab-cap,
  .seeab-std {
    padding: 18px 14px !important;
  }
  .seeab-cap__h,
  .seeab-std__name {
    font-size: 13px !important;
  }
  .seeab-cap p,
  .seeab-std p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* About workshop mosaic — 8 photos, stay 2-col but smaller */
  .seeab-workshop__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Site Survey checklist — 6 cards */
  .seesv-checklist {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .seesv-chk {
    padding: 14px 12px !important;
  }
  .seesv-chk__h {
    font-size: 13px !important;
  }
  .seesv-chk p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* AMC comparison table — must stay 1 col (data) but reduce cell padding */
  .seesv-cmp th,
  .seesv-cmp td {
    padding: 7px 6px !important;
    font-size: 11.5px !important;
  }

  /* AMC tier cards — stay 1 col (these need full width to read pricing) */
  .seesv-tiers {
    gap: 14px !important;
  }
  .seesv-tier {
    padding: 22px 18px !important;
  }

  /* Resources hub topic cards */
  .seers-topics__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .seers-topic {
    padding: 16px 12px !important;
    gap: 10px !important;
  }
  .seers-topic__icon {
    width: 36px !important;
    height: 36px !important;
  }
  .seers-topic__icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  .seers-topic__name {
    font-size: 13px !important;
  }
  .seers-topic__sub {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .seers-topic__count {
    font-size: 10px !important;
    padding-top: 8px !important;
  }
  /* Sibling topics also 2-col */
  .seers-siblings__grid {
    grid-template-columns: 1fr !important;
  }

  /* Featured product grid on location pages — already 2-col, tighten cell padding */
  .seeloc-prod__body {
    padding: 10px 10px 8px !important;
  }
  .seeloc-prod__name {
    font-size: 12.5px !important;
  }
  .seeloc-prod__tag {
    font-size: 10px !important;
  }

  /* Intro angle quote box on location pages — was padded 60px left for big quote mark */
  .seeloc-intro__body {
    font-size: 14px !important;
    margin-bottom: 22px !important;
  }
  .seeloc-angle {
    padding: 18px 16px 16px 38px !important;
    border-radius: 0 8px 8px 0 !important;
  }
  .seeloc-angle p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .seeloc-angle__mark {
    font-size: 36px !important;
    left: 10px !important;
    top: 4px !important;
  }
  .seeloc-angle__sig {
    margin-top: 10px !important;
    font-size: 10.5px !important;
  }

  /* Numbers strip — KEEP HORIZONTAL 3-col on mobile (vertical was taking 1000px+) */
  .see-numbers__grid,
  .seeab-nums__inner {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .seeab-nums__col,
  .see-numbers__col {
    text-align: center !important;
    padding: 0 4px !important;
  }
  .seeab-nums__n,
  .see-numbers__num {
    font-size: 28px !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
    display: block !important;
  }
  .seeab-nums__n span,
  .see-numbers__num span,
  .see-numbers__suf {
    font-size: 0.6em !important;
    margin-left: 1px !important;
  }
  .seeab-nums__lbl,
  .see-numbers__label {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    margin-top: 6px !important;
  }
  .seeab-nums__sub,
  .see-numbers__copy {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
    max-width: none !important;
  }

  /* Family note on home — asymmetric split should stack */
  .see-family__inner {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* Range cards on home */
  .see-range__rail {
    padding: 8px 16px 16px !important;
  }

  /* Footer CTA card on home */
  .see-callback__card {
    padding: 22px 18px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   9. PREVENT TEXT OVERFLOW / WORD BREAK on narrow mobile
   Some long product/city names break the layout horizontally.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .seeloc-hero__sub,
  .seesv-hero__sub,
  .seers-hero__sub,
  .seeab-hero__sub,
  .seelg-hero__sub,
  .seeloc-intro__body,
  .seeloc-angle p,
  .seeab-heritage__body,
  .seeab-chapter__body,
  .seeab-founder__body {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* SEO trailing line is unreadable at 13px on phones — cap at 12px */
  .seeloc-seo,
  .seers-seo,
  .seefu-seo,
  .seeab-seo {
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    padding: 20px 18px 32px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   10. FINAL CTA SECTIONS — stack copy + buttons on mobile
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .seeloc-final__inner,
  .seers-final__inner,
  .seesv-final__btns,
  .seeab-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 600px) {
  .seeloc-final__btns,
  .seers-final__btns,
  .seesv-final__btns {
    flex-direction: column !important;
    width: 100% !important;
  }
  .seeloc-btn,
  .seers-btn,
  .seesv-btn,
  .seeab-btn {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 13.5px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   11. HERO CTA ROW — stack on mobile + tighten phone-link button
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .seeloc-hero__cta-row,
  .seers-hero__chips {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .seeloc-hero__cta-row .seeloc-btn {
    width: 100% !important;
  }
  .seeloc-hero__city-tag {
    font-size: 10.5px !important;
    padding: 6px 12px !important;
  }
  .seeloc-hero__crumb,
  .seers-hero__crumb,
  .seesv-hero__crumb,
  .seeab-hero__crumb,
  .seelg-hero__crumb {
    font-size: 10.5px !important;
    margin-bottom: 14px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   12. FAQ ACCORDION — tighter padding on mobile (location + resources)
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .seeloc-faq__q,
  .seers-faq__q {
    padding: 16px 44px 16px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }
  .seers-faq__q { padding-left: 16px !important; gap: 10px !important; }
  .seers-faq__num { font-size: 10px !important; padding: 2px 6px !important; }
  .seeloc-faq__a,
  .seers-faq__a {
    padding: 0 16px 16px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .seers-faq__a { padding-left: 52px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT-CARD IMAGE FIX  (site-wide)
   --------------------------------------------------------------------
   Cards across the site were cropping product photos badly with
   `object-fit: cover` / `background-size: cover`. Product photos have
   a white studio background — switching to `contain` shows the whole
   product. Card background goes white to blend with the product bg
   so the seam is invisible.
   ──────────────────────────────────────────────────────────────────── */

/* PDP — related products grid ("You might also need") */
.see-pdp-related__img {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #fff !important;
  height: 200px !important;
  padding: 14px !important;
}
.see-pdp-related__img--ph {
  background: linear-gradient(135deg,#fafaf7 0%,#f0eee6 100%) !important;
}

/* Homepage — Range card (Explore Our Range carousel) */
.see-range__card-img {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #fff !important;
  padding: 18px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* PDP — hero product photo */
.see-pdp__hero-photo img {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #fff !important;
  padding: 24px;
}
.see-pdp__hero-photo {
  background: linear-gradient(135deg,#fafaf7,#fff) !important;
}

/* Elevator landing — feature cards & gallery tiles */
.see-el-card__media img,
.see-el-gallery__tile img {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #fff !important;
  padding: 14px;
}
.see-el-card__media,
.see-el-gallery__tile {
  background: #fff !important;
}

/* Category archive — product grid cards (auto-generated grid below
   the rich category landing). The Kadence/WP archive cards use either
   featured-image background or <img>; cover both. */
.see-cat-card__img,
.see-cat-card img,
.see-archive__card-img,
.product .post-thumbnail img,
.see-product-archive .post-thumbnail img {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #fff !important;
  padding: 12px;
}
.see-cat-card__img,
.see-archive__card-img {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #fff !important;
  padding: 12px !important;
}

/* Mega-menu thumbnails — keep contain so single-product photos read
   clearly even at 44–88px sizes. */
.see-nav__thumb,
.see-msub2 .see-thumb {
  object-fit: contain !important;
  background: #fff !important;
  padding: 4px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* Atlas detail panel — when a project photo is shown */
.ats-detail img,
.see-atlas-detail img {
  object-fit: contain !important;
  background: #fff;
  padding: 8px;
}

/* Mobile tweaks — slightly less padding so the image breathes */
@media (max-width: 640px) {
  .see-pdp-related__img,
  .see-range__card-img,
  .see-pdp__hero-photo img,
  .see-el-card__media img,
  .see-el-gallery__tile img {
    padding: 10px !important;
  }
}
/* ──────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   PDP GALLERY  (cabin variants, turbo angles)
   ──────────────────────────────────────────────────────────────────── */
.see-pdp-gallery {
  padding: 56px clamp(20px, 4vw, 60px);
  background: #fafaf7;
}
.see-pdp-gallery__head {
  max-width: 720px;
  margin: 0 0 32px;
}
.see-pdp-gallery__sub {
  font-size: 14px;
  color: var(--see-mute);
  line-height: 1.6;
  margin: 8px 0 0;
}
.see-pdp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.see-pdp-gallery__tile {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--see-line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  text-decoration: none;
}
.see-pdp-gallery__tile:hover {
  transform: translateY(-4px);
  border-color: var(--see-red);
  box-shadow: 0 20px 40px -22px rgba(204,27,27,.32);
}
.see-pdp-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.see-pdp-gallery__tile:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .see-pdp-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .see-pdp-gallery__grid { grid-template-columns: 1fr; gap: 10px; }
  .see-pdp-gallery__tile { aspect-ratio: 4 / 3; }
}

/* ════════════════════════════════════════════════════════════════════
   MEGA-MENU SVG CATEGORY ICONS
   --------------------------------------------------------------------
   Replaces the small product-thumbnail icons in the Products mega-menu
   with crisp vector icons. Styled identically to .see-nav__thumb so
   spacing and layout don't shift.
   ──────────────────────────────────────────────────────────────────── */
.see-nav__thumb--svg {
  width: 88px !important;
  height: 88px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06) !important;
  padding: 14px !important;
  box-sizing: border-box;
}
.see-nav__thumb--svg svg {
  width: 100%;
  height: 100%;
  color: var(--see-red, #CC1B1B);
  stroke: currentColor;
  fill: none;
}
.see-nav__item:hover .see-nav__thumb--svg {
  border-color: var(--see-red) !important;
  background: #fff5f5 !important;
}
.see-nav__item:hover .see-nav__thumb--svg svg {
  color: var(--see-red, #CC1B1B);
}

/* Small variant for L3 submenu (the deep menu items inside each L2) */
.see-nav__thumb--sm {
  width: 50px !important;
  height: 50px !important;
  padding: 8px !important;
  border-radius: 6px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
.see-nav__thumb--sm svg {
  width: 100%;
  height: 100%;
  color: var(--see-red, #CC1B1B);
}
.see-nav__deep a:hover .see-nav__thumb--sm {
  background: #fff5f5 !important;
  border-color: var(--see-red) !important;
}

/* AMC tier price small note ("Final pricing varies...") */
.seesv-tier__price-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,.55);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
/* ──────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════
   SEE MOBILE FIXES — appended 2026-06-13 (production hotfix)
   (1) Restored mobile drawer supplemental styles (markup re-added to header.php)
   (2) Find Us CTA buttons were rendering as ovals on mobile
═══════════════════════════════════════════════════════════════════════ */

/* (1) ---- Mobile drawer restored markup ---- */
.see-dr__close{margin-left:auto;background:rgba(255,255,255,.12);border:0;color:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.see-dr__close:hover{background:rgba(255,255,255,.22)}
.see-dr__nav{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0}
.see-dr__list,.see-dr__sub{list-style:none;margin:0;padding:0}
.see-dr__list>li>a{display:block;padding:15px 22px;font-size:16px;font-weight:600;color:#1C1C1C;text-decoration:none;border-bottom:1px solid #f0efe9}
.see-dr__sub{background:#faf9f6;padding:4px 0 10px}
.see-dr__sub>li>a{display:block;padding:10px 22px 10px 36px;font-size:14px;color:#555;text-decoration:none}
.see-dr__list>li>a:active,.see-dr__sub>li>a:active{background:#f3f2ec}
.see-dr__foot{flex-shrink:0;padding:16px 18px;display:flex;flex-direction:column;gap:10px;border-top:1px solid #ececec;background:#fff}
.see-dr__cta{display:block;text-align:center;padding:14px;border-radius:12px;font-weight:700;text-decoration:none;font-size:15px;line-height:1.2}
.see-dr__cta--call{background:#1C1C1C;color:#fff}
.see-dr__cta--quote{background:#CC1B1B;color:#fff}

/* (2) ---- Find Us CTA buttons: stop them becoming ovals on mobile ---- */
@media (max-width:768px){
  .seefu-addr__btns{flex-direction:column !important;gap:10px !important}
  .seefu-addr__btn{flex:1 1 auto !important;width:100% !important;min-width:0 !important;border-radius:14px !important;white-space:nowrap !important;justify-content:center !important}
}

/* ---- Drawer submenu category vector icons (match web mega-menu) ---- */
.see-drawer .see-msub > li > a{display:flex !important;align-items:center;gap:12px !important;padding:9px 18px !important;min-height:50px !important;grid-template-columns:none !important}
.see-drawer .see-msub > li > a:not(:has(img)){padding-left:18px !important}
.see-dr__ic{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:#CC1B1B}
.see-dr__ic svg{width:30px;height:30px;display:block}
.see-drawer .see-msub > li > a > span:not(.see-dr__ic){flex:1;font-size:14px;color:#1C1C1C;font-weight:500;min-width:0}

/* ---- 3-level drawer: L2 categories (icon + chevron) + collapsible L3 products ---- */
.see-drawer .see-msub > li{position:relative;border-bottom:1px solid #efeee8}
.see-drawer .see-msub > li > .see-mhead{display:flex !important;align-items:center;position:relative;padding:0}
.see-drawer .see-msub > li > .see-mhead > a{flex:1 1 auto;display:flex !important;align-items:center;gap:12px;padding:9px 8px 9px 16px !important;min-height:50px !important;text-decoration:none;grid-template-columns:none !important;color:#1C1C1C}
.see-drawer .see-dr__ic{width:32px;height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:center;color:#CC1B1B}
.see-drawer .see-dr__ic svg{width:28px;height:28px;display:block}
.see-drawer .see-msub > li > .see-mhead > a > span:not(.see-dr__ic){flex:1;font-size:14px;color:#1C1C1C;font-weight:500;min-width:0}
.see-drawer .see-msub > li > .see-mhead > .see-mtoggle{position:static !important;top:auto !important;right:auto !important;flex:0 0 auto;margin-right:10px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.05);display:flex !important;align-items:center;justify-content:center;cursor:pointer;color:#1C1C1C}
.see-drawer .see-msub > li > .see-mhead > .see-mtoggle svg{width:11px;height:11px;transition:transform .2s ease}
.see-drawer .see-msub > li > input.sub-toggle:checked ~ .see-mhead > .see-mtoggle svg{transform:rotate(90deg)}
.see-drawer .see-msub2{display:none;list-style:none;margin:0;padding:0;background:#f3f2ec}
.see-drawer .see-msub > li > input.sub-toggle:checked ~ .see-msub2{display:block}
.see-drawer .see-msub2 > li > a{display:block;padding:9px 16px 9px 52px;font-size:13px;color:#555;text-decoration:none;border-top:1px solid #ebe9e2}
.see-drawer .see-msub2 > li > a > span{font-size:13px;color:#555}