/* ============================================================
   THOR BUILDINGS — theme stylesheet
   Ported from the source design (thor-building-HTML.html) and
   adapted to work with real Gutenberg blocks so header/nav,
   buttons, images, headings and paragraphs stay editable in the
   Site Editor while keeping the original pixel-level design.
   ============================================================ */
:root{
  --ink:#0a0b0d;
  --ink-2:#12141a;
  --ink-3:#1b1f27;
  --ink-4:#2a2f39;

  --steel:#9aa1a9;
  --steel-lt:#c9ced4;

  --amber:#ff7a1a;
  --amber-dk:#ab4a00; /* [2026-10-23] was #d95e00 (3.1-3.8:1 on paper/white); AA 4.5:1 for small text */
  --steel-ink:#6b7076; /* [2026-10-23] grey for small text on light backgrounds (AA); --steel stays for dark ones */
  --amber-soft:rgba(255,122,26,.14);

  --paper:#f6f5f2;
  --paper-2:#eae7e1;

  --white:#fff;

  --font-display:'Archivo Black',"Helvetica Neue",Impact,sans-serif;
  --font-cond:'Archivo Narrow',"Arial Narrow",sans-serif;
  --font-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1540px;
  --gut:clamp(18px,2.5vw,40px);

  --t:.45s cubic-bezier(.2,.7,.25,1);
  --shadow:0 24px 60px -20px rgba(10,11,13,.45);
}

/* ---------- Base / WP compatibility ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--paper);
  /* overflow-x:hidden (the source's own value) forces the browser to
     auto-promote overflow-y from its initial "visible" to "auto" per the
     CSS overflow spec, which makes body a scroll/clip container and
     breaks `position:sticky` for every descendant (the header included) —
     confirmed via a stuck header sitting far off-screen despite computed
     position:sticky. `clip` prevents the horizontal scrollbar the same
     way without triggering that promotion. */
  overflow-x:clip;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.wp-block-group,.wp-block-columns{max-width:none}
h1,h2,h3,h4,.wp-block-heading{margin:0;line-height:.95;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%}

/* ---------- Full-bleed, independent of ancestor width ----------
   A section nested inside `wp:post-content`'s own "constrained"
   layout (as opposed to sitting directly in a template, sibling to
   post-content) can't reliably escape via core's `alignfull` CSS —
   that container shrinks its own box to the content width, and an
   `alignfull` child's "max-width:none" only removes ITS cap, it
   doesn't pull the child out of an already-narrower parent box. This
   is an explicit, ancestor-independent full-bleed instead. */
.full-bleed{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}

/* Display type */
.d1{font-family:var(--font-display);font-size:clamp(2.3rem,5.6vw,4.5rem);line-height:.98;text-transform:uppercase;letter-spacing:-.025em}
.d2{font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.85rem);line-height:1.02;text-transform:uppercase;letter-spacing:-.022em}
.d3{font-family:var(--font-display);font-size:clamp(1.12rem,1.7vw,1.45rem);line-height:1.1;text-transform:uppercase;letter-spacing:-.015em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-cond);font-weight:700;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-dk);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--amber);flex:none}
.on-dark .eyebrow{color:var(--amber)}

.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:#4b525d;max-width:62ch;margin:0}
.on-dark .lede{color:#a8b0ba}

.ribs{
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0 1px,
    transparent 1px 9px,
    rgba(0,0,0,.16) 9px 10px,
    transparent 10px 18px);
}
.rule{height:1px;background:rgba(10,11,13,.1);border:0;margin:0}
/* [2026-10-08] Fading variant: same gradient as the .sec--video-gallery::before edge
   line, as a standalone divider between two sections. */
.rule--fade{background:linear-gradient(90deg,transparent 0%,rgba(10,11,13,.08) 50%,transparent 100%)}
.on-dark .rule{background:rgba(255,255,255,.1)}

/* ============================================================
   Buttons — core/button adapted (no wrapping <span>: the fill
   sweep uses a negative z-index so it paints behind the anchor's
   own text instead of needing an inner span for stacking order).
   ============================================================ */
.wp-block-button__link.btn,a.btn{
  --bg:var(--amber); --fg:#fff;
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.7rem !important;
  background:var(--bg) !important;color:var(--fg) !important;
  font-family:var(--font-cond);font-weight:700;
  font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  border-radius:0 !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
}
.wp-block-button__link.btn::after,a.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform var(--t);
}
.wp-block-button__link.btn:hover,a.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(255,122,26,.6);color:#fff !important}
.wp-block-button__link.btn:hover::after,a.btn:hover::after{transform:translateY(0)}
.wp-block-button__link.btn--arrow,a.btn--arrow{padding-right:1.5rem !important}
.wp-block-button__link.btn--arrow::before,a.btn--arrow::before{
  content:"";width:16px;height:16px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--t);
}
.wp-block-button__link.btn--arrow:hover::before,a.btn--arrow:hover::before{transform:translateX(5px)}

.wp-block-button__link.btn--ghost,a.btn--ghost{
  --fg:var(--ink);
  --stroke:rgba(10,11,13,.3);
  --surface:var(--paper);
  background:var(--stroke) !important;
  color:var(--fg) !important;
  box-shadow:none;
}
.wp-block-button__link.btn--ghost::before,a.btn--ghost::before{
  content:"";position:absolute;inset:2px;z-index:-1;
  background:var(--surface);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.wp-block-button__link.btn--ghost:hover,a.btn--ghost:hover{--fg:#fff;box-shadow:0 16px 34px -16px rgba(10,11,13,.5);color:#fff !important}
.on-dark .wp-block-button__link.btn--ghost,.wp-block-button__link.btn--ghost.on-dark,
.on-dark a.btn--ghost,a.btn--ghost.on-dark{--fg:#fff;--stroke:rgba(255,255,255,.42);--surface:var(--ink);color:#fff !important}
.on-dark .wp-block-button__link.btn--ghost::after,.wp-block-button__link.btn--ghost.on-dark::after,
.on-dark a.btn--ghost::after,a.btn--ghost.on-dark::after{background:var(--white)}
.on-dark .wp-block-button__link.btn--ghost:hover,.wp-block-button__link.btn--ghost.on-dark:hover,
.on-dark a.btn--ghost:hover,a.btn--ghost.on-dark:hover{--fg:var(--ink);color:var(--ink) !important}
.sec--paper2 .wp-block-button__link.btn--ghost,.sec--paper2 a.btn--ghost{--surface:var(--paper-2)}
.hero .wp-block-button__link.btn--ghost,.cta .wp-block-button__link.btn--ghost,
.hero a.btn--ghost,.cta a.btn--ghost{--surface:rgba(10,11,13,.42)}

.textlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-cond);font-weight:700;font-size:.85rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding-bottom:4px;color:inherit;
  background:linear-gradient(var(--amber),var(--amber)) left bottom / 100% 2px no-repeat;
  transition:gap var(--t),color var(--t)
}
.textlink:hover{gap:1rem;color:var(--amber-dk)}
/* Source markup has a literal inline SVG arrow after the text on some
   (not all) textlinks — reproduced as a mask icon so the label stays
   plain editable text; apply only where the source had the arrow. */
.textlink--arrow::after{
  content:"";width:16px;height:16px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   Utility bar
   ============================================================ */
.ubar{
  background:var(--ink);color:#8f97a1;
  font-family:var(--font-cond);font-size:.85rem;letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ubar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap;padding-block:.4rem}
.ubar__grp{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.ubar a{display:inline-flex;align-items:center;gap:.5rem;transition:color var(--t);color:inherit}
.ubar a:hover{color:var(--amber)}
.ubar svg{width:15px;height:15px;flex:none;color:var(--amber)}
.ubar__hours{display:none}
@media(min-width:900px){.ubar__hours{display:inline-flex;align-items:center}}

/* ============================================================
   Header
   ============================================================ */
/* Sticky positioning lives on the template-part wrapper (.hdr-sticky-wrap),
   not on .hdr itself. A sticky element can never stick past the bottom
   edge of its own containing block (= its direct parent) — .hdr's parent
   used to be the header template part's auto-height wrapper, which was
   only ~140px tall once the utility bar shared it, so the header ran out
   of room to stick after ~140px of scroll and just scrolled away. The
   utility bar now lives in its own separate template part, and .hdr's
   wrapper (.hdr-sticky-wrap) is a direct child of .wp-site-blocks, which
   spans the full page — giving the sticky header room to stick properly
   for the whole scroll range. */
.hdr-sticky-wrap{position:sticky;top:0;z-index:80}
/* `backdrop-filter` (and `filter`/`transform`/`perspective`/`contain`)
   makes the element that carries it a new *containing block* for any
   `position:fixed` descendant — including the mobile Navigation overlay
   nested inside .hdr. That made the fixed-position overlay size/position
   itself relative to .hdr's own small box instead of the true viewport
   (its top landed at .hdr's own top offset below the utility bar, not
   y:0), the same family of bug as the earlier sticky-header containing-
   block issue. Moving the blur onto a ::before keeps the frosted-glass
   look without .hdr itself ever carrying backdrop-filter, so it no
   longer intercepts fixed-position descendants. */
.hdr{position:relative;isolation:isolate;transition:box-shadow var(--t)}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(10,11,13,.92);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.hdr.is-stuck{box-shadow:0 14px 34px -18px rgba(0,0,0,.9)}
.hdr__in{
  display:flex;align-items:center;
  gap:clamp(.75rem,1.6vw,2rem);
  min-height:72px;flex-wrap:nowrap;
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:34px;width:auto;filter:invert(1) brightness(1.9)}
/* [2026-10-23] Site Logo block: its inner link must not add inline-baseline space. */
.brand .custom-logo-link{display:flex;align-items:center}
@media(min-width:768px){.brand img{height:40px}}
@media(min-width:1280px){.brand img{height:44px}}

.hdr .wp-block-navigation{flex:1 1 auto;min-width:0;justify-content:center}
/* Core sets `.wp-block-navigation__responsive-container{background-color:inherit}`
   at wide widths so it can pick up a solid nav background set via Global
   Styles. Our header background is translucent (rgba + backdrop-filter), so
   "inherit" repaints that same translucent layer a second time on top of
   itself right where the nav sits, making that band visibly darker than the
   rest of the header. Force it transparent instead — the dark overlay style
   for the open mobile menu is set explicitly further down and isn't affected. */
.hdr .wp-block-navigation__responsive-container:not(.is-menu-open),
.hdr .wp-block-navigation__container{background-color:transparent !important}
.hdr .wp-block-navigation .wp-block-navigation-item>a,
.hdr .wp-block-navigation .wp-block-navigation-item>.wp-block-navigation-item__content{
  position:relative;
  padding:.55rem clamp(.4rem,.8vw,.8rem) !important;
  font-family:var(--font-cond);font-weight:600;
  font-size:clamp(.8rem,.92vw,.92rem);
  letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
  color:#cfd4da !important;transition:color var(--t);
}
.hdr .wp-block-navigation .wp-block-navigation-item>a::after{
  content:"";position:absolute;left:clamp(.4rem,.8vw,.8rem);right:clamp(.4rem,.8vw,.8rem);bottom:.22rem;
  height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
/* Adding the "Patterns" nav item (11th real item) pushed the row past
   its available width specifically in this range — the fluid clamp()
   above had already hit its own minimum by 1160px, so it had no more
   "give" left to shrink further on its own. This tightens padding and
   font-size just enough, only in the range where it's actually needed,
   to keep the desktop nav on one row all the way down to the 1160px
   breakpoint the theme's own mobile-menu switch is built around. */
@media (min-width:1160px) and (max-width:1360px){
  .hdr .wp-block-navigation .wp-block-navigation-item>a,
  .hdr .wp-block-navigation .wp-block-navigation-item>.wp-block-navigation-item__content{
    padding-left:.32rem !important;padding-right:.32rem !important;
    font-size:.74rem;letter-spacing:.03em;
  }
}
.hdr .wp-block-navigation .wp-block-navigation-item>a:hover{color:#fff !important}
.hdr .wp-block-navigation .wp-block-navigation-item>a:hover::after,
.hdr .wp-block-navigation .wp-block-navigation-item.current-menu-item>a::after{transform:scaleX(1)}
.hdr .wp-block-navigation .wp-block-navigation-item.current-menu-item>a{color:#fff !important}

/* WP's Navigation block defaults its inline/overlay switch to 600px;
   the source design switches at 1160px, so shift it here. Visibility
   (display:none/flex/grid) is scoped to each range below so it never
   fights core's own >=600px "hide the open button" rule at wide widths. */
.hdr .wp-block-navigation__responsive-container-open,
.hdr .wp-block-navigation__responsive-container-close{
  place-items:center;width:46px;height:46px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;padding:0;
}
@media (max-width:1159.98px){
  .hdr .wp-block-navigation__responsive-container-open:not(.always-shown){display:grid !important}
}
@media (min-width:600px) and (max-width:1159.98px){
  .hdr .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important}
}
.hdr .wp-block-navigation__responsive-container-open svg,
.hdr .wp-block-navigation__responsive-container-close svg{fill:currentColor}
/* [2026-10-26] The close (x) button never got display:grid (only the open button does, in the media query
   above), so place-items did nothing: Chrome still centred the icon via its default button styling, iOS Safari
   left it in the top-left corner. Centre it explicitly, and make both icons blocks so line-height can't shift them. */
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{display:grid;place-items:center} /* open overlay only: desktop must keep core's hidden close button */
.hdr .wp-block-navigation__responsive-container-open svg,
.hdr .wp-block-navigation__responsive-container-close svg{display:block}

/* Mobile overlay menu — reuse the dark full-screen "drawer" look.
   This full-viewport `position:fixed` overlay is a descendant of .hdr, so
   it depended on .hdr no longer carrying backdrop-filter (see above) —
   otherwise it sized/positioned itself relative to .hdr's own small box
   instead of the true viewport.
   IMPORTANT: `.wp-block-navigation__responsive-container-content` is the
   same element in both the open (mobile) and closed (desktop inline) nav
   states — scoping this to `.is-menu-open` only is required, or it paints
   solid ink behind the desktop nav too, showing as an opaque box against
   the header's translucent/blurred background everywhere else. */
.hdr .wp-block-navigation__responsive-container.is-menu-open,
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  background:var(--ink) !important;
}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a,
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>.wp-block-navigation-item__content{
  font-family:var(--font-display);font-size:clamp(1.25rem,5.2vw,1.85rem) !important;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff !important;
  padding:.6rem 0 !important;border-bottom:1px solid rgba(255,255,255,.09);
}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:hover{color:var(--amber) !important}
/* [2026-10-23] Open mobile menu: core gives the overlay no side padding here, so the items sat flush
   against the screen edge and the close button in the corner. Use the site's page gutter, and let each
   item's divider run the full width instead of stopping at the end of its label. */
.hdr .wp-block-navigation__responsive-container.is-menu-open{padding:clamp(14px,3vw,28px) var(--gut) 2.5rem !important}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a,
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>.wp-block-navigation-item__content{display:block;width:100%}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a::after{display:none}

/* The CTA is duplicated as a nav-link so it's reachable inside the mobile
   overlay (which the standalone .hdr .btn button, positioned in the header
   row, would otherwise be hidden behind); the inline desktop row keeps only
   the standalone button, so hide this copy there. */
@media (min-width:1160px){
  .hdr .wp-block-navigation-item.hdr-nav__cta{display:none}
}
.hdr .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.hdr-nav__cta>a{
  color:var(--amber) !important;
}

/* Header CTA button lives outside the Navigation block.
   The core Button block's outer wrapper div (.wp-block-button) carries
   the same "btn" class as the inner link for the main button styles
   elsewhere (deliberately, so `.wp-block-button__link.btn` and `a.btn`
   both match). A bare `.hdr .btn` selector here, though, matches BOTH
   that wrapper div and the link inside it, so this padding/font-size was
   being applied twice — once on the wrapper, once again on the link,
   inflating the button's real size. Display (hide/show) is fine on
   either element, but padding/font-size must be scoped to the link only. */
.hdr .wp-block-button{display:none;flex:0 0 auto}
@media(min-width:1160px){.hdr .wp-block-button{display:inline-flex}}
.hdr .wp-block-button__link.btn{padding:.8rem 1.15rem !important;font-size:.78rem;letter-spacing:.08em;white-space:nowrap}
@media(min-width:1380px){.hdr .wp-block-button__link.btn{padding:.85rem 1.4rem !important;font-size:.82rem}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero,.hero *{color:#fff}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.09);
  transition:opacity 1.5s ease,transform 8s linear;
}
.hero__slide.is-on{opacity:1;transform:scale(1)}
/* [2026-10-23] Slides are <img>s now (was background-image): same cover/centre framing. */
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,11,13,.86) 0%,rgba(10,11,13,.5) 40%,rgba(10,11,13,.94) 100%),
    linear-gradient(90deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.25) 65%,rgba(10,11,13,.6) 100%);
}
.hero__ribs{position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay}
.hero__in{position:relative;z-index:3;padding-block:clamp(4rem,11vh,8.5rem) 0}
.hero__kick{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-cond);font-weight:700;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--amber-soft);
  box-shadow:inset 0 0 0 1px rgba(255,122,26,.5);
  padding:.5rem 1rem;margin-bottom:1.6rem;
}
.hero__kick svg{width:16px;height:16px;color:var(--amber)}
/* The kicker is now a plain editable Paragraph (no child SVG element),
   so the source's lightning-bolt icon is reproduced as a mask ::before. */
.hero__kick::before{
  content:"";width:16px;height:16px;flex:none;
  background:var(--amber);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2 4.5 13.5H11L9.5 22 19 9.5h-6.5L13 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2 4.5 13.5H11L9.5 22 19 9.5h-6.5L13 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hero h1{max-width:17ch;text-shadow:0 8px 40px rgba(0,0,0,.55)}
.hero h1 em{font-style:normal;color:var(--amber);display:block}
.hero__sub{margin:1.5rem 0 2.3rem;max-width:52ch;font-size:clamp(1.04rem,1.6vw,1.2rem);color:#d5dae0}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem 1.1rem;align-items:center}

.hero__dots{display:flex;gap:.6rem;margin-top:3rem}
.hero__dots button{width:46px;height:3px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;border:0;padding:0}
.hero__dots button::after{content:"";position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.hero__dots button.is-on::after{transform:scaleX(1);transition:transform 6s linear}

.stats{
  --rule:1px solid rgba(255,255,255,.16);
  position:relative;z-index:3;margin-top:clamp(3rem,7vh,5.5rem);
  border-top:var(--rule);border-left:var(--rule);border-right:var(--rule);
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:1.6rem clamp(.9rem,2vw,1.6rem);border-right:var(--rule)}
.stat:nth-child(2n){border-right:0}
.stat:nth-child(-n+2){border-bottom:var(--rule)}
@media(min-width:860px){
  .stat{border-right:var(--rule);border-bottom:0}
  .stat:nth-child(2n){border-right:var(--rule)}
  .stat:last-child{border-right:0}
}
.stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.025em;color:var(--amber)}
/* The visible digits live in a <span> child of <b> (JS writes the
   count-up value there). That span is also directly matched by the
   broad `.hero *{color:#fff}` safety-net rule, and a direct match on
   an element always wins over an inherited value regardless of the
   other rule's specificity — so the span needs its own explicit
   color, not just inheritance from .stat b. */
.stat b,.stat b *{color:var(--amber)}
.stat b i{font-style:normal}
.stat>span{display:block;margin-top:.5rem;font-family:var(--font-cond);font-weight:600;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:#8f97a1}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{background:var(--amber);color:var(--ink);overflow:hidden;padding:.85rem 0}
.marquee__track{display:flex;gap:0;width:max-content;animation:thor-slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track div{display:flex;gap:0}
.marquee__track span{
  display:inline-flex;align-items:center;gap:2.4rem;padding-right:2.4rem;
  font-family:var(--font-display);font-size:clamp(.8rem,1.2vw,1rem);
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
}
.marquee__track span::after{content:"";width:9px;height:9px;background:var(--ink);transform:rotate(45deg);flex:none}
@keyframes thor-slide{to{transform:translateX(-50%)}}

/* ============================================================
   Sections
   ============================================================ */
/* padding-block, not the `padding` shorthand: many sections are also .wrap
   (class="sec wrap"), and the shorthand reset padding-inline to 0, cancelling
   .wrap's own --gut side gutter. Harmless on desktop, where max-width plus
   auto margins still inset the content, but on mobile it left text flush to
   the screen edge. */
.sec{padding-block:clamp(4.5rem,11vh,8rem)}
.sec-top--padd{padding-block-start:clamp(4.5rem,11vh,8rem)}
.sec-btm--padd{padding-block-end: clamp(4.5rem,11vh,8rem)}
.sec-top--padd_sm{padding-block-start:clamp(2.5rem,5vh,5rem)}
.sec-btm--padd_sm{padding-block-end: clamp(2.5rem,5vh,5rem)}
.sec--padd_sm{padding-block-start:clamp(3rem,8vh,6rem)}
.sec--compact{padding-block:clamp(1.5rem,3vh,2.5rem)}
.sec--compact.wrap{padding-inline:clamp(12px,1.8vw,24px)}
.sec--compact > .wrap{padding-inline:var(--gut);padding-top:clamp(2rem,4vh,3.5rem);padding-bottom:clamp(2rem,4vh,3.5rem)}
.sec--dark{background:var(--ink);color:#fff}
.sec--dark :is(h1,h2,h3,h4,p,li){color:inherit}
.sec--paper2{background:var(--paper-2)}
.sec-head{max-width:70ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)}

/* ---------- Divisions — core/cover per card, so the photo stays
   replaceable from the Media Library; overlay + hover motion are
   layered onto Cover's own background span/inner-container. ---------- */
.divs{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:760px){.divs{grid-template-columns:repeat(3,1fr)}}
.wp-block-cover.div-card{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(360px,48vh,540px);
  display:flex !important;flex-direction:column;justify-content:flex-end !important;
  padding:clamp(1.4rem,2.4vw,2.1rem);
  color:#fff;margin:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.wp-block-cover.div-card,.wp-block-cover.div-card :is(h3,p,a){color:#fff}
.wp-block-cover.div-card .wp-block-cover__image-background{transition:transform 1s cubic-bezier(.2,.7,.25,1)}
.wp-block-cover.div-card:hover .wp-block-cover__image-background{transform:scale(1.08)}
.wp-block-cover.div-card .wp-block-cover__background{
  background:linear-gradient(180deg,rgba(10,11,13,.15) 0%,rgba(10,11,13,.55) 52%,rgba(10,11,13,.95) 100%) !important;
  opacity:1 !important;
  transition:background var(--t);
}
.wp-block-cover.div-card:hover .wp-block-cover__background{background:linear-gradient(180deg,rgba(10,11,13,.3) 0%,rgba(217,94,0,.35) 55%,rgba(10,11,13,.96) 100%) !important}
.wp-block-cover.div-card .wp-block-cover__inner-container{width:100%;color:inherit}
.div-card__num{font-family:var(--font-cond);font-weight:700;font-size:.74rem;letter-spacing:.2em;color:var(--amber);margin-bottom:.7rem}
.div-card p{
  margin:.8rem 0 0;color:#c9ced4;font-size:.98rem;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s ease,opacity .4s ease,margin .4s ease;
}
.div-card:hover p,.div-card:focus-within p{max-height:14rem;opacity:1}
.div-card .textlink{margin-top:1.2rem;color:#fff;font-size:.92rem}
.div-card ul{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.div-card ul li{font-family:var(--font-cond);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;padding:.25rem .6rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#e6e9ec}

/* ---------- About page "Our Work" cards only — the caption/description/
   link beneath each .d3 title stay collapsed until hover (see .div-card p
   above), so in the resting state each card's only visible content is its
   title, bottom-anchored by .div-card's flex column. Project titles here
   are real, varying-length names (unlike the fixed "Agricultural<br>
   Buildings" cards elsewhere, which sidestep this with a hardcoded line
   break) — a title that wraps to two lines sits visibly higher than a
   one-line title in a neighboring card. Reserving space for two lines
   keeps every title's top edge level without touching the wording. ---------- */
.about-work .d3{min-height:3.3em}

/* ---------- Tag pills — light-background counterpart to .div-card's
   chip list, for the 3-item category list under each division page's
   intro copy (same notched-corner motif, on-paper coloring). ---------- */
.tag-pills{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.tag-pills li{
  font-family:var(--font-cond);font-weight:700;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.45rem .95rem;background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.14);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}

/* ---------- Steel Patterns swatch grid — same visual language as
   .div-card (cover-based hover zoom, gradient shift, notched corner,
   amber accent), but sized for the actual near-square swatch
   photography instead of the tall landscape building-photo ratio. ---------- */
.finishes{display:grid;gap:0.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.finishes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.finishes{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1440px){.finishes{grid-template-columns:repeat(5,1fr)}}
.wp-block-cover.finish-card{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:1;
  display:flex !important;flex-direction:column;justify-content:flex-end !important;
  padding:1.1rem 1.2rem;color:#fff;margin:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.wp-block-cover.finish-card,.wp-block-cover.finish-card :is(h3,p){color:#fff}
.wp-block-cover.finish-card .wp-block-cover__image-background{transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.wp-block-cover.finish-card:hover .wp-block-cover__image-background,
.wp-block-cover.finish-card:focus-visible .wp-block-cover__image-background{transform:scale(1.08)}
.wp-block-cover.finish-card .wp-block-cover__background{
  background:linear-gradient(180deg,rgba(10,11,13,0) 45%,rgba(10,11,13,.88) 100%) !important;
  opacity:1 !important;transition:background var(--t);
}
.wp-block-cover.finish-card:hover .wp-block-cover__background{background:linear-gradient(180deg,rgba(10,11,13,.15) 0%,rgba(217,94,0,.3) 55%,rgba(10,11,13,.94) 100%) !important}
.wp-block-cover.finish-card .wp-block-cover__inner-container{width:100%;color:inherit}
.finish-card__name{font-family:var(--font-cond);font-weight:700;font-size:.86rem;letter-spacing:.03em;line-height:1.25;position:relative;z-index:1}
.finish-card::after{
  content:"View Pattern";position:absolute;z-index:2;right:.9rem;bottom:.9rem;
  font-family:var(--font-cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.62rem;color:var(--amber);opacity:0;transform:translateY(8px);
  transition:opacity var(--t),transform var(--t);
}
.finish-card:hover::after,.finish-card:focus-visible::after{opacity:1;transform:none}
.finish-card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- Split (Why choose / 3D tool / Employment) ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:960px){.split{grid-template-columns:1.05fr .95fr}}
.split--flip .split__media{order:-1}
@media(min-width:960px){.split--flip .split__media{order:0}}

.frame{position:relative}
.frame img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}
.frame::before{content:"";position:absolute;inset:auto auto -18px -18px;width:44%;height:52%;z-index:-1;background:var(--amber);opacity:.16}
.frame__badge{
  position:absolute;right:clamp(-10px,-1vw,0px);top:clamp(14px,3vw,28px);
  background:var(--ink);color:#fff;padding:1rem 1.2rem;
  box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.frame__badge b{display:block;font-family:var(--font-display);font-size:1.1rem;letter-spacing:-.02em;color:var(--amber);line-height:1}
.frame__badge span{font-family:var(--font-cond);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#9aa1a9}

/* ---------- Technical diagram card — for a supplied CAD-style
   spec diagram (wide/flat line art, not a photo) shown alongside a
   .feats specification grid; contained rather than cropped. ---------- */
.panel-diagram{margin:2.2rem 0 0;padding:clamp(1.2rem,3vw,2rem);background:#fff;box-shadow:inset 0 0 0 1px rgba(10,11,13,.1)}
.panel-diagram img{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.panel-diagram__cap{display:block;margin-top:1rem;text-align:center;font-family:var(--font-cond);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#7a828c}

.feats{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.1rem}
@media(min-width:620px){.feats{grid-template-columns:1fr 1fr}}
.feats.feats--1col{grid-template-columns:1fr}
.feats>.feat{display:flex;gap:.9rem;align-items:flex-start}
.feats .ic{position:relative;flex:none;width:42px;height:42px;display:grid;place-items:center;background:var(--ink);color:var(--amber);clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.on-dark .feats .ic{background:rgba(255,122,26,.15);box-shadow:none}
.on-dark .feats .ic::before{
  content:"";position:absolute;inset:0;z-index:1;background:rgba(255,122,26,.62);
  clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 10px),calc(100% - 10px) calc(100% - 1px),1px calc(100% - 1px));
}
.feats .ic svg{position:relative;z-index:2;width:20px;height:20px}
.feats strong{display:block;font-family:var(--font-cond);font-weight:700;font-size:.97rem;letter-spacing:.045em;text-transform:uppercase}
.feats p{margin:.15rem 0 0;font-size:.95rem;color:#5a616b}
.on-dark .feats p{color:#98a0aa}

/* ---------- Perma-Column — core/cover for the desaturated bg photo ---------- */
.perma{position:relative;overflow:hidden;background:var(--ink-2);color:#fff}
.perma.wp-block-cover .wp-block-cover__image-background{opacity:.2;filter:grayscale(1) contrast(1.1)}
.perma.wp-block-cover .wp-block-cover__background{opacity:0 !important}
.perma__in{position:relative;z-index:2}
.perma__logo{background:#fff;padding:.7rem 1rem;display:inline-block;margin-bottom:1.6rem}
.perma__logo img{height:44px;width:auto}
.perma__quote{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.1rem,2.1vw,1.7rem);line-height:1.14;letter-spacing:-.02em;max-width:28ch;margin:1.6rem 0}
.perma__quote em{font-style:normal;color:var(--amber)}

/* ---------- Process ---------- */
.steps{display:grid;gap:1px;background:rgba(10,11,13,.12);grid-template-columns:1fr}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);padding:clamp(1.5rem,2.6vw,2.2rem);position:relative;transition:background var(--t),color var(--t)}
.sec--paper2 .step{background:var(--paper-2)}
.step:hover{background:var(--ink);color:#fff}
.step__n{font-family:var(--font-display);font-size:2.1rem;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(10,11,13,.28);transition:color var(--t),-webkit-text-stroke var(--t);margin:0}
.step:hover .step__n{color:var(--amber);-webkit-text-stroke:1.5px transparent}
.step h3{margin:.9rem 0 .5rem;font-family:var(--font-cond);font-weight:700;font-size:1.08rem;letter-spacing:.045em;text-transform:uppercase}
.step p{margin:0;font-size:.96rem;color:#5a616b;transition:color var(--t)}
.step:hover p{color:#b7bec7}

/* ---------- Gallery grid — sophisticated, professional layout with
   featured image leading, asymmetric editorial masonry aesthetic. Each tile
   is a real core/image block (photos stay replaceable from Media Library).
   Premium hover with subtle zoom, overlay and interactive indicator. ---------- */
.gal{
  display:grid;
  gap:clamp(.6rem,1.2vw,.95rem);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:640px){
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1024px){
  .gal{grid-template-columns:repeat(4,1fr)}
}

.gal .wp-block-image{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  overflow:hidden;
  background:var(--ink-3);
  aspect-ratio:4/3;
  cursor:pointer;
  border-radius:2px;
  outline:2px solid transparent;
  outline-offset:-2px;
  transition:outline-color .25s ease,transform .25s ease;
}

/* Featured (lead) image: larger asymmetric presentation */
.gal .wp-block-image.is-feature{
  grid-column:span 2;
  aspect-ratio:8/5;
}
@media(min-width:640px){
  .gal .wp-block-image.is-feature{
    grid-row:span 2;
    aspect-ratio:auto;
  }
}

/* Professional image handling: object-fit with smooth transitions */
.gal .wp-block-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.25,1);
  will-change:transform;
}

/* Sophisticated overlay gradient that appears on hover */
.gal .wp-block-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(10,11,13,0) 40%,
    rgba(10,11,13,.8) 100%
  );
  opacity:0;
  transition:opacity .35s cubic-bezier(.2,.7,.25,1);
  pointer-events:none;
}

/* Interactive "View" indicator, subtle and premium */
.gal .wp-block-image::before{
  content:"";
  position:absolute;
  z-index:2;
  bottom:1rem;
  right:1rem;
  width:36px;
  height:36px;
  background:var(--amber);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(0.8);
  transition:opacity .35s cubic-bezier(.2,.7,.25,1),transform .35s cubic-bezier(.2,.7,.25,1);
  pointer-events:none;
  box-shadow:0 8px 24px rgba(10,11,13,.2);
}

/* Plus icon inside the circle.
   This was previously written as `.gal .wp-block-image::before::after`,
   which is invalid — pseudo-elements cannot be chained, so browsers
   dropped the whole rule and the badge rendered as an empty orange
   circle. The glyph belongs on ::before itself, which is already a
   centred flex container. */
.gal .wp-block-image::before{
  content:"+";
  font-family:var(--font-display);
  font-size:1.6rem;
  color:#fff;
  line-height:1;
  font-weight:300;
  letter-spacing:-.02em;
  text-indent:0;
}

/* Hover state: zoom image, show overlay and indicator */
.gal .wp-block-image:hover img,
.gal .wp-block-image:focus-within img{
  transform:scale(1.07);
}

.gal .wp-block-image:hover::after,
.gal .wp-block-image:focus-within::after,
.gal .wp-block-image:hover::before,
.gal .wp-block-image:focus-within::before{
  opacity:1;
  transform:scale(1);
}

/* Focus indicator for keyboard navigation */
.gal .wp-block-image:focus-visible,
.gal .wp-block-image:focus{
  outline-color:var(--amber);
}

/* Respect reduced motion preference */
@media(prefers-reduced-motion:reduce){
  .gal .wp-block-image img,
  .gal .wp-block-image::after,
  .gal .wp-block-image::before{
    transition:none;
  }
}

/* ---------- Gallery groups — each is its own named sub-gallery
   (matching the source site's separate "Building Gallery N" sections)
   with its own independent lightbox sequence, not one merged wall of
   photos. Clear separation via spacing + a numbered heading rather
   than alternating background colors (keeps the existing palette). ---------- */
.gal-group{margin-top:clamp(1.6rem,3vw,2.4rem)}
.gal-group__h{
  display:flex;align-items:center;gap:1rem;margin:0 0 1.2rem;
  font-family:var(--font-cond);font-weight:700;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  padding-bottom:.9rem;border-bottom:1px solid rgba(10,11,13,.1);
}
/* Larger variant for real, named projects (In Progress page) rather
   than numbered sub-galleries — same border/spacing rhythm, bigger
   and title-case instead of small-caps-style uppercase. */
.gal-group__h--lg{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.01em;text-transform:none;
  flex-wrap:wrap;
  align-items:flex-start;
}
.gal-group__loc{
  font-family:var(--font-cond);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  flex-shrink:0;
}

/* ---------- Gallery tab selector — premium, modern navigation between
   gallery groups. Desktop: elegant pill buttons with amber underline active
   state. Mobile: horizontally scrollable cards with thumbnails for visual
   navigation. Smooth fade-and-lift transition on panel switch. ---------- */
.gal-tabs{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-bottom:clamp(1.4rem,2.5vw,2.2rem);
  align-items:center;
}
.gal-tabs button{
  font-family:var(--font-cond);font-weight:700;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.65rem 1.25rem;
  border:0;background:transparent;cursor:pointer;
  color:var(--ink-2);
  position:relative;
  transition:color var(--t);
  display:flex;
  align-items:center;
  gap:.5em;
  /* Underline appears on hover and active */
}
/* Elegant amber underline instead of dark fill */
.gal-tabs button::after{
  content:"";
  position:absolute;
  bottom:-8px;left:1.25rem;right:1.25rem;
  height:3px;
  background:var(--amber);
  border-radius:1.5px;
  opacity:0;
  transition:opacity var(--t), transform var(--t);
  transform:scaleX(0);
  transform-origin:left;
}
.gal-tabs button:hover::after{
  opacity:.6;
  transform:scaleX(1);
}
.gal-tabs button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
.gal-tabs button.is-on{
  color:var(--ink);
  font-weight:700;
}
.gal-tabs button.is-on::after{
  opacity:1;
  transform:scaleX(1);
}
.gal-tabs__count{
  opacity:.55;
  font-weight:400;
  font-size:.75em;
  margin-left:.25em;
  padding:.3em .5em;
  background:rgba(10,11,13,.05);
  border-radius:3px;
  display:inline-block;
  transition:opacity var(--t),background var(--t);
  letter-spacing:.05em;
}
.gal-tabs button:hover .gal-tabs__count{
  opacity:.7;
  background:rgba(10,11,13,.08);
}
.gal-tabs button.is-on .gal-tabs__count{
  opacity:.8;
  background:rgba(10,11,13,.12);
}

/* Mobile: scrollable tab cards instead of simple pills */
@media(max-width:820px){
  .gal-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:1rem;
    margin-left:calc(-1 * var(--gut));
    margin-right:calc(-1 * var(--gut));
    padding:0 var(--gut) 1.2rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x mandatory;
  }
  .gal-tabs button{
    flex:0 0 auto;
    white-space:nowrap;
    scroll-snap-align:start;
    /* Ensure active tab stays visible after scroll */
    scroll-snap-stop:always;
  }
  .gal-tabs button::after{
    display:none;
  }
  .gal-tabs button{
    padding:.5rem .9rem;
    font-size:.78rem;
    background:rgba(10,11,13,.05);
    border-radius:4px;
    border:1px solid rgba(10,11,13,.1);
    transition:background var(--t),border-color var(--t),color var(--t);
  }
  .gal-tabs button:hover{
    background:rgba(10,11,13,.08);
    border-color:rgba(10,11,13,.2);
  }
  .gal-tabs button.is-on{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
  }
}

.gal-panel{
  display:none;
  margin-top:0!important;
}
.gal-panel.is-on{
  display:block;
  animation:gal-panel-fade-lift .45s cubic-bezier(.2,.7,.25,1);
}
@keyframes gal-panel-fade-lift{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@media(prefers-reduced-motion:reduce){
  .gal-panel.is-on{
    animation:none;
  }
}

/* ---------- Lightbox — premium, full-screen image viewer with smooth
   navigation and professional image counter. Gallery-isolated (only shows
   images from the selected gallery's lightbox collection). ---------- */
.lb{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  background:rgba(6,7,9,.97);
  padding:clamp(1rem,4vw,3rem);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s cubic-bezier(.2,.7,.25,1),visibility .35s;
  margin:0;
  backdrop-filter:blur(2px);
}

.lb.is-open{
  opacity:1;
  visibility:visible;
}

/* Main image with sophisticated shadow and animation */
.lb img{
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  border-radius:2px;
  animation:lb-image-enter .45s cubic-bezier(.2,.7,.25,1);
}

@keyframes lb-image-enter{
  from{
    opacity:0;
    transform:scale(0.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.lb:has(.lb__caption:not(:empty)) img{
  max-height:70vh;
}

/* Caption area with professional typography */
.lb__caption{
  color:#fff;
  text-align:center;
  max-width:56ch;
  animation:lb-caption-enter .45s cubic-bezier(.2,.7,.25,1) .1s both;
}

@keyframes lb-caption-enter{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

.lb__caption:empty{
  display:none;
}

.lb__caption h3{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2vw,1.5rem);
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:0 0 .5rem;
}

.lb__caption p{
  font-size:.92rem;
  color:#c9ced4;
  margin:0;
}

.lb__caption em{
  display:block;
  margin-top:.6rem;
  font-style:normal;
  font-size:.76rem;
  color:#8f97a1;
}

/* Control buttons — close and navigation */
.lb__x,
.lb__nav{
  position:absolute;
  color:#fff;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:background var(--t),box-shadow var(--t),transform .2s ease;
  padding:0;
  border-radius:2px;
  background:rgba(255,255,255,.05);
  border:none;
  cursor:pointer;
}

.lb__x:hover,
.lb__nav:hover{
  background:var(--amber);
  box-shadow:none;
  transform:scale(1.1);
}

.lb__x:active,
.lb__nav:active{
  transform:scale(0.95);
}

.lb__x{
  top:clamp(1rem,3vw,2rem);
  right:clamp(1rem,3vw,2rem);
}

/* Navigation arrows */
.lb__nav{
  top:50%;
  transform:translateY(-50%);
  opacity:.8;
  transition:background var(--t),box-shadow var(--t),opacity var(--t),transform var(--t);
}

.lb__nav:hover{
  opacity:1;
}

.lb__nav--prev{
  left:clamp(.5rem,2vw,2rem);
}

.lb__nav--next{
  right:clamp(.5rem,2vw,2rem);
}

.lb svg{
  width:22px;
  height:22px;
}

/* Image counter — subtle and professional "N / Total" display */
.lb__counter{
  position:absolute;
  bottom:clamp(1rem,3vw,2rem);
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-cond);
  font-weight:700;
  font-size:.84rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(10,11,13,.6);
  padding:.5rem 1rem;
  border-radius:20px;
  opacity:.8;
  transition:opacity var(--t);
}

.lb:hover .lb__counter{
  opacity:1;
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .lb img,
  .lb__caption,
  .lb__nav{
    animation:none;
  }
  .lb__nav:hover,
  .lb__x:hover{
    transform:none;
  }
}

/* ---------- Reviews ---------- */
.revs{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:680px){.revs{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.revs{grid-template-columns:repeat(5,1fr)}}
.rev{padding:1.6rem 1.4rem;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:transform var(--t),background var(--t),box-shadow var(--t)}
.rev:hover{transform:translateY(-6px);background:rgba(255,122,26,.09);box-shadow:inset 0 0 0 1px rgba(255,122,26,.45)}
.rev svg{width:26px;height:26px;color:var(--amber);margin-bottom:.9rem}
.rev strong{display:block;font-family:var(--font-cond);font-weight:700;font-size:1rem;letter-spacing:.045em;text-transform:uppercase}
.rev p{margin:.4rem 0 0;font-size:.93rem;color:#98a0aa}

/* ---------- FAQ (core/details powers the accordion) ---------- */
.faq-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.faq-tabs button{font-family:var(--font-cond);font-weight:700;font-size:.84rem;letter-spacing:.11em;text-transform:uppercase;padding:.7rem 1.15rem;box-shadow:inset 0 0 0 1px rgba(10,11,13,.2);transition:background var(--t),color var(--t),box-shadow var(--t);border:0;background:none}
.faq-tabs button:hover{box-shadow:inset 0 0 0 1px var(--amber)}
.faq-tabs button.is-on{background:var(--ink);color:#fff;box-shadow:none}
.faq-panel{display:none}
.faq-panel.is-on{display:block}

.qa{border-top:1px solid rgba(10,11,13,.14);margin:0}
.qa:last-child{border-bottom:1px solid rgba(10,11,13,.14)}
.qa summary{
  position:relative;width:100%;display:block;
  padding:1.25rem 3rem 1.25rem 0;list-style:none;cursor:pointer;
  font-family:var(--font-cond);font-weight:700;
  font-size:clamp(.98rem,1.5vw,1.14rem);letter-spacing:.035em;text-transform:uppercase;
  transition:color var(--t);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--amber-dk)}
.qa summary::before,.qa summary::after{content:"";position:absolute;right:0;top:50%;background:currentColor}
.qa summary::before{width:22px;height:2px;transform:translateY(-50%)}
.qa summary::after{width:2px;height:22px;right:10px;transform:translateY(-50%);transition:transform var(--t)}
.qa[open] summary{color:var(--amber-dk)}
.qa[open] summary::after{transform:translateY(-50%) scaleY(0)}
.qa>p{padding:0 0 1.5rem;margin:0;max-width:80ch;color:#4b525d}
.qa ol,.qa ul{margin:.7rem 0 1.5rem;padding-left:1.2rem;max-width:80ch;color:#4b525d}
.qa li{margin:.3rem 0}

/* ---------- CTA band — core/cover for the dimmed bg photo ---------- */
.cta.wp-block-cover{background:var(--ink);color:#fff;text-align:center}
.cta,.cta :is(h1,h2,h3,p){color:#fff}
.cta.wp-block-cover .wp-block-cover__image-background{opacity:.26}
.cta.wp-block-cover .wp-block-cover__background{opacity:0 !important}
.cta__ribs{position:absolute;inset:0;opacity:.35;pointer-events:none}
.cta__in{position:relative;z-index:2;padding:clamp(4rem,10vh,7rem) 0;width:100%}
.cta h2{margin-inline:auto;max-width:20ch}
.cta .lede{margin:1.3rem auto 2.3rem;text-align:center}
.cta__row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ---------- Footer ---------- */
.ftr{background:#07080a;color:#8f97a1;padding-top:clamp(3.5rem,8vh,5.5rem)}
.ftr__grid{display:grid;gap:2.6rem;grid-template-columns:1fr}
@media(min-width:700px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
@media(min-width:1280px){.ftr__grid{grid-template-columns:1.15fr 1fr 1fr 1fr 1fr}}
.ftr__areas{display:flex;flex-wrap:wrap;gap:.5rem .9rem;padding:0}
.ftr__areas a{color:#9aa1a9;font-size:.88rem}
.ftr__areas a:hover{color:var(--amber)}
/* [2026-10-15] Service Areas grouped by state (ND / MN). */
.ftr__states{display:grid;gap:1.4rem}
.ftr .ftr__state-h{font-family:var(--font-cond);font-weight:600;font-size:.74rem;line-height:.98;letter-spacing:.16em;text-transform:uppercase;color:#c9ced4;margin:0 0 .55rem}
.ftr ul.ftr__areas{display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.ftr__areas span{font-size:.88rem}
/* [2026-10-15] Compact layout: Service Areas takes the spare grid width and
   the two states sit side by side, each sized by its town count (--towns,
   set by the pattern), so the list ends near the other columns' height. */
@media(min-width:700px){
  .ftr__states{display:flex;align-items:flex-start;gap:1.2rem 2rem}
  .ftr__state{flex:var(--towns,1) 1 0;min-width:0}
}
@media(min-width:700px) and (max-width:999.98px){
  .ftr__grid > :has(.ftr__states){grid-column:1 / -1}
}
@media(min-width:1000px){.ftr__grid{grid-template-columns:minmax(0,1fr) auto minmax(0,2fr) auto}}
@media(min-width:1280px){.ftr__grid{grid-template-columns:minmax(0,1.1fr) auto minmax(0,2.4fr) auto auto}}
.ftr h2,.ftr h4{font-family:var(--font-cond);font-weight:700;font-size:.82rem;letter-spacing:.19em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem}
.ftr .wp-block-image.logo{margin:0 0 1.3rem}
.ftr .wp-block-image.logo img{height:46px;width:auto;filter:invert(1) brightness(1.9)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ftr a{transition:color var(--t);color:inherit}
.ftr a:hover{color:var(--amber)}
.ftr__hours{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-family:var(--font-cond);font-size:.95rem}
.ftr__hours b{color:#fff;font-weight:600}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{width:44px;height:44px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background var(--t),color var(--t),box-shadow var(--t)}
.socials a:hover{background:var(--amber);color:#fff;box-shadow:none}
.socials svg{width:19px;height:19px}
.ftr__bar{margin-top:clamp(2.5rem,6vh,4rem);padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-family:var(--font-cond);font-size:.85rem;letter-spacing:.06em}
/* [2026-10-23] Classes replacing the footer's invalid inline styles + the menu-driven legal links. */
.ftr .ftr__tagline{max-width:34ch}
.ftr li.ftr__name{color:#fff}
.ftr .wp-block-button__link{font-size:.9rem}
.ftr ul.ftr__legal{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}

/* Back to top */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:50px;height:50px;display:grid;place-items:center;
  background:var(--amber);color:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--t),visibility var(--t),transform var(--t),background var(--t);
  border:0;padding:0;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--ink)}
.totop svg{width:20px;height:20px}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.25,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s}.rv-d5{transition-delay:.45s}.rv-d6{transition-delay:.54s}

/* ---------- Contact Form 7 quote form ---------- */
.wpcf7-form{margin-top:1.4rem}
.wpcf7-form .cf7-row{display:grid;gap:1rem}
@media(min-width:620px){.wpcf7-form .cf7-row{grid-template-columns:1fr 1fr}}
.wpcf7-form-control-wrap{display:block;margin-bottom:1rem}
.wpcf7-form input.wpcf7-form-control,.wpcf7-form select.wpcf7-form-control,.wpcf7-form textarea.wpcf7-form-control{
  width:100%;padding:.9rem 1rem;
  background:var(--white);color:var(--ink-2);
  border:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.2);
  font-family:var(--font-body);font-size:1rem;
  transition:box-shadow var(--t);
}
.wpcf7-form textarea.wpcf7-form-control{min-height:140px;resize:vertical}
/* appearance:none above removes the native dropdown arrow along with
   the heavier native border — replace it with a plain chevron so a
   <select> still reads as one at a glance. */
.wpcf7-form select.wpcf7-form-control{
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0b0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;
}
.wpcf7-form input.wpcf7-form-control:focus,.wpcf7-form select.wpcf7-form-control:focus,.wpcf7-form textarea.wpcf7-form-control:focus{box-shadow:inset 0 0 0 2px var(--amber);outline:0}
.wpcf7-form input.wpcf7-submit{
  --bg:var(--amber);--fg:#fff;
  position:relative;overflow:hidden;isolation:isolate;
  padding:1rem 1.7rem;background:var(--bg);color:var(--fg);
  font-family:var(--font-cond);font-weight:700;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  transition:transform var(--t),box-shadow var(--t);
}
.wpcf7-form input.wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(255,122,26,.6)}
.wpcf7-form .wpcf7-spinner{margin-left:.8rem}
.wpcf7-not-valid-tip{color:#c0392b;font-size:.85rem;margin-top:.3rem;display:block}
.wpcf7-response-output{margin:1.2rem 0 0;padding:1rem;box-shadow:inset 0 0 0 1px rgba(10,11,13,.2)}
.wpcf7-mail-sent-ok{box-shadow:inset 0 0 0 1px #2e7d32 !important;color:#2e7d32}

/* Simple hero used on inner pages — core/cover */
.page-hero.wp-block-cover{background:var(--ink);color:#fff}
.page-hero,.page-hero :is(h1,p){color:#fff}
.page-hero.wp-block-cover .wp-block-cover__image-background{opacity:.32}
.page-hero.wp-block-cover .wp-block-cover__background{opacity:0 !important}
.page-hero__in{position:relative;z-index:2;padding:clamp(4.5rem,12vh,7rem) 0;text-align:center;width:100%}
.page-hero .lede{margin:1.2rem auto 0;text-align:center}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--font-cond);font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--steel);margin:1.6rem auto;padding-block:0}
.breadcrumb a{color:var(--steel-ink);transition:color var(--t)}
.breadcrumb a:hover{color:var(--amber-dk)}
.breadcrumb span[aria-current]{color:var(--ink-2);font-weight:700}
.breadcrumb__sep{color:var(--steel-lt)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- Free Estimate modal ---------- */
.fe-modal{position:fixed;inset:0;z-index:100010;/* above the core mobile-nav modal (100000) */display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.fe-modal[hidden]{display:none}
.fe-modal__overlay{position:absolute;inset:0;background:rgba(10,11,13,.72);backdrop-filter:blur(3px)}
.fe-modal__dialog{
  position:relative;width:100%;max-width:680px;max-height:min(92vh,92dvh);
  display:flex;background:var(--white);color:var(--ink-2);
  box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  animation:fe-modal-in .3s cubic-bezier(.2,.7,.25,1);
}
@keyframes fe-modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fe-modal__body{width:100%;overflow-y:auto;padding:clamp(1.5rem,4vw,2.6rem)}
.fe-modal__close{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--paper-2);color:var(--ink-2);border:0;cursor:pointer;
  transition:background var(--t),color var(--t);
}
.fe-modal__close:hover{background:var(--ink);color:#fff}
.fe-modal__title{margin:.35rem 0 .6rem}
.fe-modal__lede{color:var(--ink-4);max-width:46ch;margin:0}
.fe-modal .wpcf7-form{margin-top:1.5rem}

/* Field labels (shared with the contact-page form) */
.cf7-field{display:block;margin-bottom:1rem}
.cf7-field .wpcf7-form-control-wrap{margin-bottom:0}
.cf7-label{
  display:block;margin-bottom:.4rem;
  font-family:var(--font-cond);font-weight:700;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.on-dark .cf7-label{color:var(--steel-lt)}
.cf7-req{color:var(--amber-dk)}
.cf7-optional{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--steel-ink)}
.wpcf7-form .cf7-row .cf7-field{margin-bottom:0}
.wpcf7-form .cf7-row{margin-bottom:1rem}
.fe-modal .wpcf7-form textarea.wpcf7-form-control{min-height:110px}
.fe-modal .wpcf7-form .wpcf7-submit{width:100%;margin-top:.4rem}

/* Success state */
.fe-modal__success{text-align:center;padding:2.2rem .5rem 1rem}
.fe-modal__success[hidden]{display:none}
.fe-modal--sent .fe-modal__form,.fe-modal--sent .fe-modal__lede{display:none}
.fe-modal__check{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;margin-bottom:1.1rem;background:var(--amber);color:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
}
.fe-modal__success-title{font-family:var(--font-display);font-size:1.5rem;margin:0 0 .7rem}
.fe-modal__success p{color:var(--ink-4);max-width:44ch;margin:0 auto 1.6rem}

/* Background scroll lock while open */
body.fe-modal-open{overflow:hidden}

@media(max-width:479px){
  .fe-modal{padding:10px}
  .fe-modal__dialog{max-height:calc(100dvh - 20px)}
}

/* ---------- Contact page (scoped: .contact-sec) ---------- */
.contact-sec .contact-grid{gap:clamp(2rem,4vw,4rem);align-items:flex-start}
.contact-info .eyebrow{margin-bottom:.9rem}
.contact-info__lede{color:var(--ink-4);margin:1rem 0 2rem;max-width:40ch}
.contact-info__item{padding:1.1rem 0;border-top:1px solid rgba(10,11,13,.12)}
.contact-info__item:last-child{border-bottom:1px solid rgba(10,11,13,.12)}
.contact-info__label{
  font-family:var(--font-cond);font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-dk);
  margin:0 0 .45rem;
}
.contact-info__item p{margin:0;color:var(--ink-3);line-height:1.6}
.contact-card{
  background:var(--white);
  padding:clamp(1.5rem,3.5vw,2.6rem);
  box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.contact-card__title{margin:0 0 .5rem}
.contact-card__lede{color:var(--ink-4);margin:0;max-width:52ch}
.contact-card .wpcf7-form{margin-top:1.6rem}
.contact-card .wpcf7-form textarea.wpcf7-form-control{min-height:150px}

@media(max-width:781px){
  .contact-sec .contact-grid{gap:2rem}
  /* Info first, form second when stacked. */
  .contact-info{order:1}
  .contact-form-col{order:2}
}

/* ---------- Employment application (scoped: .emp-apply / .emp-card) ---------- */
.emp-card{
  background:var(--white);
  padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.emp-card .eyebrow{margin-bottom:.7rem}
.emp-card .d3{margin:0 0 .4rem}
.emp-card .wpcf7-form{margin-top:1.4rem}
.emp-card .wpcf7-form textarea.wpcf7-form-control{min-height:120px}
.emp-card .wpcf7-form .wpcf7-submit{width:100%;margin-top:.6rem}

/* Referral radios as tappable pills */
.emp-radio{border:0;padding:0;margin:0 0 1rem;min-width:0}
.emp-radio .wpcf7-radio{display:flex;gap:.6rem;flex-wrap:wrap}
.emp-radio .wpcf7-list-item{margin:0}
.emp-radio .wpcf7-list-item label{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.7rem 1.2rem;background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.2);
  font-family:var(--font-cond);font-weight:600;font-size:.95rem;
}
.emp-radio .wpcf7-list-item label:has(input:checked){
  background:var(--amber-soft);box-shadow:inset 0 0 0 2px var(--amber);
}
.emp-radio input[type="radio"]{accent-color:var(--amber-dk)}

/* Referrer name appears only when referral = Yes (JS toggles hidden) */
.emp-referrer[hidden]{display:none}

/* Resume upload */
.emp-upload input[type="file"]{
  width:100%;padding:.65rem .8rem;background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.2);
  font-family:var(--font-body);font-size:.92rem;color:var(--ink-3);
}
.emp-upload input[type="file"]::file-selector-button{
  margin-right:.9rem;border:0;cursor:pointer;
  padding:.6rem 1.1rem;background:var(--ink);color:#fff;
  font-family:var(--font-cond);font-weight:700;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background var(--t);
}
.emp-upload input[type="file"]::file-selector-button:hover{background:var(--amber-dk)}
.emp-upload__note{display:block;margin-top:.4rem;font-size:.8rem;color:var(--steel-ink)}

.emp-required-note{margin:.2rem 0 0;font-size:.82rem;color:var(--steel-ink);line-height:1.5}

/* Employment apply split: benefits align to the top of the form card. */
#apply .split{align-items:start}

/* ---------- Contact page map (scoped: .thor-contact-map) ---------- */
.thor-contact-map{margin-top:clamp(2.6rem,5vw,4.2rem)}
.thor-contact-map .eyebrow{margin-bottom:.7rem}
.thor-contact-map .d3{margin:0 0 .35rem}
.thor-contact-map__address{color:var(--ink-4);margin:0 0 1.2rem}
.thor-contact-map__frame{
  position:relative;background:var(--paper-2);
  box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.thor-contact-map__frame iframe{display:block;width:100%;height:clamp(320px,42vw,460px);border:0}
.thor-contact-map__actions{margin-top:1.3rem}

/* ---------- Snap Lock Roofing (shouses, scoped: .snaplock-*) ---------- */
.snaplock-split{display:grid;gap:clamp(2rem,4.5vw,4rem);grid-template-columns:1fr;align-items:start}
@media(min-width:1024px){.snaplock-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* Media column: brochure photo + profile diagrams, framed like site cards. */
.snaplock-media{display:grid;gap:1.1rem;align-content:start}
.snaplock-media .wp-block-image{margin:0;background:var(--white);padding:1rem;box-shadow:var(--shadow);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.snaplock-media img{display:block;width:100%;height:auto}
@media(min-width:1024px){.snaplock-media{position:sticky;top:6.5rem}}

/* Content column */
.snaplock-content .eyebrow{margin-bottom:.9rem}
.snaplock-content .d2{margin:0 0 1.4rem}
.snaplock-specs{margin:0 0 1.6rem;padding-left:1.15rem;max-width:72ch}
.snaplock-specs li{margin:.5rem 0;line-height:1.6;color:var(--ink-3);break-inside:avoid;padding-left:.2rem}
.snaplock-specs li::marker{color:var(--amber-dk)}
@media(min-width:640px){.snaplock-specs{columns:2;column-gap:2.6rem}}
@media(min-width:1024px) and (max-width:1279px){.snaplock-specs{columns:1}}
.snaplock-note{
  margin:0 0 1.6rem;padding:1rem 1.2rem;max-width:64ch;
  background:var(--white);border-left:3px solid var(--amber);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.08);
  font-weight:600;color:var(--ink-2);line-height:1.6;
}
.snaplock-link{margin:0;color:var(--ink-4);max-width:64ch;line-height:1.7}

/* When page content ends with a full-bleed band (e.g. Snap Lock on the
   shouses page), the constrained wrapper's own bottom padding renders as a
   stray light stripe between two darker sections — drop it there, and
   soften the following section's top padding so the two paper2 bands do
   not stack a double gap. Content ending in normal text keeps the padding. */
.sec.wrap:has(> .wp-block-post-content > .full-bleed:last-child){padding-bottom:0}
.sec.wrap:has(> .wp-block-post-content > .full-bleed:last-child) + .sec{padding-top:clamp(2.5rem,6vh,4.5rem)}

/* Wide standalone panel diagram (agricultural Tuff Rib): full-width card,
   no sticky behavior outside the split. */

/* ---------- PROFESSIONAL TRU-STEEL HD VIDEO GALLERY ---------- */

.sec--video-gallery{background:linear-gradient(180deg,#f6f5f2 0%,#eae7e1 100%);padding-top:clamp(3.5rem,9vh,5.5rem);padding-bottom:clamp(3.5rem,9vh,5.5rem);position:relative;overflow:hidden}
.sec--video-gallery::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(10,11,13,.08) 50%,transparent 100%);pointer-events:none}

/* Gallery Grid */
.tvg-gallery{margin-top:clamp(2rem,5vw,3.5rem)}
.tvg-grid{display:grid;gap:clamp(1.4rem,3vw,2.2rem);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media(min-width:768px){.tvg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.tvg-grid{grid-template-columns:repeat(3,1fr)}}

/* Video Cards — Premium Design */
.tvg-card{all:unset;display:flex;flex-direction:column;cursor:pointer;border:none;background:none;padding:0;font:inherit;color:inherit;transition:all var(--t);border-radius:2px;overflow:hidden;box-shadow:0 4px 12px rgba(10,11,13,.08)}
.tvg-card:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
.tvg-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}

/* Media Container */
.tvg-card__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;flex:none}
.tvg-card__image{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;transition:transform 0.8s cubic-bezier(.2,.7,.25,1)}
.tvg-card:hover .tvg-card__image{transform:scale(1.06)}

/* Overlay */
.tvg-card__overlay{position:absolute;inset:0;background:rgba(10,11,13,.15);opacity:0;transition:opacity var(--t);pointer-events:none}
.tvg-card:hover .tvg-card__overlay{opacity:1}

/* Glass-Morphism Play Button */
.tvg-card__play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;display:grid;place-items:center;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.3);border-radius:50%;z-index:10;transition:all var(--t);box-shadow:0 8px 32px rgba(0,0,0,.1)}
.tvg-card:hover .tvg-card__play-button{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(1.12);box-shadow:0 12px 48px rgba(0,0,0,.2)}
.tvg-card:focus-visible .tvg-card__play-button{background:rgba(255,255,255,.25);border-color:rgba(255,122,26,.8);transform:translate(-50%,-50%) scale(1.12)}
.tvg-play-icon{width:28px;height:28px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:transform 0.3s ease-out}
.tvg-card:hover .tvg-play-icon{transform:scale(1.15)}

/* Card Info */
.tvg-card__info{padding:1.4rem 1.3rem;background:var(--white);display:flex;flex-direction:column;gap:0.5rem;flex:1;transition:background var(--t)}
.tvg-card:hover .tvg-card__info{background:#fafaf9}
.tvg-card__title{font-family:var(--font-cond);font-weight:700;font-size:1rem;letter-spacing:.02em;line-height:1.3;color:var(--ink-2);margin:0;transition:color var(--t)}
.tvg-card:hover .tvg-card__title{color:var(--amber)}
.tvg-card__meta{font-size:.85rem;color:var(--steel-ink);margin:0;line-height:1.4;font-family:var(--font-body)}

/* Lightbox Modal */
.tvg-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;animation:tvg-modal-fade-in .3s ease-out;padding:1rem}
.tvg-modal[hidden]{display:none !important}
@keyframes tvg-modal-fade-in{from{opacity:0}to{opacity:1}}
.tvg-modal__overlay{position:absolute;inset:0;background:rgba(10,11,13,.85);backdrop-filter:blur(2px);animation:tvg-overlay-fade-in .3s ease-out;cursor:pointer}
@keyframes tvg-overlay-fade-in{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(2px)}}
.tvg-modal__dialog{position:relative;z-index:10000;background:var(--white);border-radius:3px;max-width:95vw;max-height:95vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 80px rgba(10,11,13,.3);animation:tvg-modal-zoom-in .4s cubic-bezier(.2,.7,.25,1)}
@keyframes tvg-modal-zoom-in{from{transform:scale(.92) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@media(max-height:700px){.tvg-modal__dialog{max-height:calc(100vh - 40px)}}

/* Close Button */
.tvg-modal__close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;background:rgba(10,11,13,.08);border:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);z-index:10001;transition:all 0.2s ease-out}
.tvg-modal__close:hover{background:rgba(10,11,13,.15);transform:scale(1.08)}
/* [2026-10-26] The button overlaps the video's top corner; on the 8% grey circle the dark X vanished over dark
   footage. Solid white + soft shadow reads on both the white card and the video. */
.tvg-modal__close,.brochure-viewer__close{background:#fff;box-shadow:0 2px 10px rgba(10,11,13,.28)}
.tvg-modal__close:hover,.brochure-viewer__close:hover{background:#fff;color:var(--amber-dk)}
.tvg-modal__close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.tvg-modal__close svg{width:22px;height:22px}

/* Modal Content */
.tvg-modal__content{flex:1;display:flex;flex-direction:column;overflow:auto;padding:2rem;gap:2rem}
.tvg-modal__video-wrapper{width:100%;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;flex:none}
.tvg-modal__video{display:block;width:100%;height:100%;outline:none}
.tvg-modal__info{display:flex;flex-direction:column;gap:1rem}
.tvg-modal__title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;color:var(--ink-2);margin:0}
.tvg-modal__description{font-size:1.05rem;color:#6b7280;line-height:1.6;margin:0;max-width:80ch}

/* Navigation */
.tvg-modal__nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 1.5rem;pointer-events:none;z-index:10001}
.tvg-modal__nav-btn{width:48px;height:48px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;transition:all 0.2s ease-out;pointer-events:auto;font:inherit;padding:0}
.tvg-modal__nav-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);transform:scale(1.1)}
.tvg-modal__nav-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.tvg-modal__nav-btn svg{width:24px;height:24px}
@media(max-width:768px){.tvg-modal__nav{display:none}}

/* Mobile Responsive */
@media(max-width:768px){.tvg-modal__content{padding:1.5rem;gap:1.5rem}.tvg-modal__close{top:1rem;right:1rem;width:40px;height:40px}.tvg-modal__title{font-size:clamp(1.2rem,5vw,1.8rem)}.tvg-modal__description{font-size:1rem}}

/* Utilities */
body.tvg-modal-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.tvg-card,.tvg-card__media,.tvg-card__info,.tvg-card__play-button,.tvg-modal,.tvg-modal__overlay,.tvg-modal__dialog{animation:none!important;transition:none!important}}
.snaplock-media--wide{position:static;max-width:1100px;margin-top:.4rem}

/* ---------- BROCHURE SECTION ---------- */
.sec--brochure{background:linear-gradient(180deg,#eae7e1 0%,#ddd9d0 100%);padding-top:clamp(3.5rem,9vh,5.5rem);padding-bottom:clamp(3.5rem,9vh,5.5rem)}.brochure-section{margin-top:clamp(2rem,5vw,3.5rem)}.brochure-wrapper{display:grid;gap:clamp(2.5rem,6vw,4rem);grid-template-columns:1fr 1fr;align-items:center}@media(max-width:768px){.brochure-wrapper{grid-template-columns:1fr}}.brochure-preview{display:flex;justify-content:center;align-items:flex-start}.brochure-card{width:100%;max-width:360px;background:var(--white);border-radius:3px;overflow:hidden;box-shadow:var(--shadow);transition:all var(--t);border:1px solid rgba(10,11,13,.06)}.brochure-card:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(10,11,13,.15)}.brochure-card__image{position:relative;background:linear-gradient(135deg,#2a2f39 0%,#1b1f27 100%);aspect-ratio:5/7;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.brochure-card__image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 100%);pointer-events:none}.brochure-icon{width:80px;height:80px;color:var(--amber);opacity:.8;margin-bottom:1.5rem;transition:transform var(--t)}.brochure-card:hover .brochure-icon{transform:scale(1.1) translateY(-4px)}.brochure-label{color:var(--white);font-family:var(--font-cond);font-weight:700;font-size:1.1rem;text-align:center;line-height:1.4;letter-spacing:.02em;text-transform:uppercase}.brochure-card__meta{padding:1.2rem 1.3rem;background:var(--white);text-align:center;border-top:1px solid rgba(10,11,13,.08)}.brochure-meta-text{font-family:var(--font-cond);font-weight:700;font-size:.9rem;color:var(--ink-2);margin:0;letter-spacing:.02em}.brochure-meta-pages{font-size:.85rem;color:var(--steel-ink);margin:.4rem 0 0}.brochure-actions{display:flex;flex-direction:column;gap:1rem}.brochure-btn{all:unset;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1rem 1.8rem;background:var(--white);border:2px solid var(--ink-2);border-radius:2px;cursor:pointer;transition:all var(--t);font-family:var(--font-cond);font-weight:700;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}.brochure-btn:hover{background:var(--ink-2);color:var(--white);transform:translateY(-2px);box-shadow:0 12px 32px rgba(10,11,13,.15)}.brochure-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.brochure-btn--view{background:var(--ink-2);color:var(--white);border-color:var(--ink-2)}.brochure-btn--view:hover{background:var(--ink-3);border-color:var(--ink-3)}.brochure-btn--download{background:0 0;border-color:var(--amber);color:var(--amber)}.brochure-btn--download:hover{background:var(--amber);border-color:var(--amber);color:var(--white)}.brochure-btn__icon{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}.brochure-btn__icon svg{width:100%;height:100%;stroke-width:2.2}.brochure-btn__text{flex:1}.brochure-viewer{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;animation:brochure-fade-in .3s ease-out;padding:1rem}@keyframes brochure-fade-in{from{opacity:0}to{opacity:1}}.brochure-viewer[hidden]{display:none !important}.brochure-viewer__overlay{position:absolute;inset:0;background:rgba(10,11,13,.88);backdrop-filter:blur(3px);cursor:pointer;animation:brochure-overlay-fade .3s ease-out}@keyframes brochure-overlay-fade{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(3px)}}.brochure-viewer__container{position:relative;z-index:9999;background:var(--white);border-radius:4px;max-width:95vw;max-height:95vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 100px rgba(10,11,13,.4);animation:brochure-modal-zoom .4s cubic-bezier(.2,.7,.25,1)}@keyframes brochure-modal-zoom{from{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.brochure-viewer__close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;background:rgba(10,11,13,.08);border:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);z-index:10000;transition:all .2s ease-out}.brochure-viewer__close:hover{background:rgba(10,11,13,.15);transform:scale(1.08)}.brochure-viewer__close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.brochure-viewer__close svg{width:22px;height:22px} /* [2026-10-26] close icon added to the markup; match .tvg-modal__close svg */.brochure-viewer__header{padding:2rem;background:linear-gradient(135deg,#2a2f39 0%,#1b1f27 100%);color:var(--white);text-align:center}.brochure-viewer__title{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;margin:0}.brochure-viewer__subtitle{font-size:.95rem;color:rgba(255,255,255,.8);margin:.5rem 0 0;font-family:var(--font-cond)}.brochure-viewer__content{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f5f5f5;min-height:400px}.brochure-viewer__iframe{width:100%;height:100%;border:none;display:block}.brochure-viewer__footer{padding:1.5rem 2rem;background:var(--white);border-top:1px solid rgba(10,11,13,.08);display:flex;align-items:center;justify-content:space-between;gap:1rem}.brochure-viewer__download{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;background:var(--ink-2);color:var(--white);border:none;border-radius:2px;font-family:var(--font-cond);font-weight:700;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:all .2s ease-out;text-decoration:none}.brochure-viewer__download:hover{background:var(--ink-3);transform:translateY(-2px)}.brochure-viewer__download svg{width:18px;height:18px;stroke-width:2.2}.brochure-viewer__hint{font-size:.85rem;color:var(--steel);font-family:var(--font-body)}@media(max-width:768px){.brochure-viewer__header{padding:1.5rem}.brochure-viewer__title{font-size:clamp(1.2rem,5vw,1.8rem)}.brochure-viewer__footer{flex-direction:column;text-align:center}.brochure-viewer__hint{display:none}}body.brochure-viewer-open{overflow:hidden}@media(prefers-reduced-motion:reduce){.brochure-card,.brochure-btn,.brochure-viewer,.brochure-viewer__overlay,.brochure-viewer__container{animation:none !important;transition:none !important}}

/* ---------- PREMIUM BROCHURE SECTION (Redesigned) ---------- */
.sec--brochure-premium{background:linear-gradient(180deg,#eae7e1 0%,#ddd9d0 100%);padding:clamp(3.5rem,9vh,5.5rem) 0; position: relative;}
.sec--brochure-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(10, 11, 13, .08) 50%, transparent 100%);
  pointer-events: none;
}
.brochure-premium-wrapper{margin-top:clamp(2rem,5vw,3.5rem)}

.brochure-premium-grid{display:grid;gap:clamp(2.5rem,6vw,4rem);grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:768px){.brochure-premium-grid{grid-template-columns:1fr}}

.brochure-premium-card{position:relative;width:100%;max-width:400px;aspect-ratio:5/7;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);transition:all var(--t);border:1px solid rgba(10,11,13,.06)}
.brochure-premium-card:hover{transform:translateY(-6px);box-shadow:0 32px 100px rgba(10,11,13,.2)}

.brochure-premium-card__inner{position:relative;width:100%;height:100%;display:flex;flex-direction:column}

.brochure-premium-card__image{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.brochure-premium-card__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,47,57,0) 0%,rgba(27,31,39,.8) 100%);pointer-events:none}

.brochure-premium-card__badge{position:absolute;top:1rem;right:1rem;z-index:10;display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:rgba(255,255,255,.95);border-radius:3px;box-shadow:0 4px 12px rgba(10,11,13,.15);font-family:var(--font-cond);font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.brochure-premium-card__badge svg{width:16px;height:16px;color:var(--amber);flex:none}

.brochure-premium-card__footer{position:absolute;bottom:0;inset-x:0;padding:1.4rem;z-index:5;background:linear-gradient(180deg,rgba(27,31,39,0) 0%,rgba(27,31,39,.95) 100%)}
.brochure-premium-card__title{font-family:var(--font-display);font-size:1.4rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff;line-height:1;margin:0}
.brochure-premium-card__subtitle{font-family:var(--font-cond);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:.4rem 0 0}

.brochure-premium-actions{display:flex;flex-direction:column;gap:1.2rem;padding:0 clamp(1rem,2vw,1.5rem)}
.brochure-premium-actions__content{display:flex;flex-direction:column;gap:1.6rem}

.brochure-premium-actions__heading{font-family:var(--font-display);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink-2);margin:0;line-height:1.05}

.brochure-premium-actions__description{font-size:.97rem;line-height:1.7;color:#5a616b;margin:0}

.brochure-premium-actions__buttons{display:flex;flex-direction:column;gap:.95rem}

.brochure-premium-btn{all:unset;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1.05rem 1.8rem;cursor:pointer;transition:all var(--t);font-family:var(--font-cond);font-weight:700;font-size:.93rem;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;position:relative;overflow:hidden}

.brochure-premium-btn--view{background:var(--ink-2);color:#fff;border:none}
.brochure-premium-btn--view:hover{background:var(--ink-3);transform:translateY(-3px);box-shadow:0 12px 32px rgba(10,11,13,.2)}
.brochure-premium-btn--view:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.brochure-premium-btn--download{background:transparent;color:var(--amber);border:2px solid var(--amber)}
.brochure-premium-btn--download:hover{background:var(--amber);color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px rgba(255,122,26,.25)}
.brochure-premium-btn--download:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.brochure-premium-btn svg{width:20px;height:20px;flex:none;stroke-width:2}

.brochure-premium-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;padding:1.2rem;background:rgba(10,11,13,.04);border-radius:2px;margin-top:.5rem}

.brochure-premium-meta__item{display:flex;flex-direction:column;gap:.3rem}
.brochure-premium-meta__label{font-family:var(--font-cond);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7a828c}
.brochure-premium-meta__value{font-size:.95rem;font-weight:600;color:var(--ink-2)}

@media(prefers-reduced-motion:reduce){
  .brochure-premium-card,
  .brochure-premium-btn,
  .brochure-viewer,
  .brochure-viewer__overlay,
  .brochure-viewer__container{animation:none !important;transition:none !important}
}

/* ---------- CTA Card Grid Section ---------- */
.cta-intro{margin-bottom:clamp(2rem,5vw,3.5rem)}

.cta-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr);margin-top:1rem}
@media(min-width:768px){.cta-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media(min-width:1024px){.cta-grid{grid-template-columns:repeat(5,1fr);gap:1.2rem}}

.cta-card{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:#fff;border:1px solid rgba(10,11,13,.08);border-radius:3px;text-decoration:none;color:inherit;transition:all var(--t);overflow:hidden}
.cta-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,122,26,.05) 0%,rgba(255,122,26,0) 100%);pointer-events:none;opacity:0;transition:opacity var(--t)}
.cta-card:hover{border-color:var(--amber);box-shadow:0 12px 32px rgba(10,11,13,.12);transform:translateY(-4px)}
.cta-card:hover::before{opacity:1}

.cta-card__number{font-family:var(--font-display);font-size:2rem;font-weight:900;line-height:1;color:var(--amber);letter-spacing:-.02em}

.cta-card__title{font-family:var(--font-cond);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;margin:0;color:var(--ink-2)}

.cta-card__icon{width:40px;height:40px;margin-top:auto;color:var(--amber);transition:transform var(--t)}
.cta-card:hover .cta-card__icon{transform:translateY(-3px) scale(1.1)}

/* Written flat, not with native CSS nesting. These two rules previously
   nested an @media inside their declaration block. Browsers accept that,
   so the front end was fine, but the block editor re-parses this file
   (it is registered via add_editor_style) to scope its selectors to the
   editor canvas, and that parser does not understand nested at-rules.
   Identical computed result; no visual change. */
.cta-card--secondary{grid-column:span 1}
.cta-card--primary{background:var(--amber);color:#fff;border-color:var(--amber)}
@media(max-width:767px){
  .cta-card--secondary,
  .cta-card--primary{grid-column:span 2}
}
.cta-card--primary .cta-card__title{color:#fff}
.cta-card--primary .cta-card__number{display:none}
.cta-card--primary:hover{box-shadow:0 16px 40px rgba(255,122,26,.3)}

@media(max-width:767px){
  .cta-card--secondary{grid-column:span 1}
  .cta-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- FEATURED YOUTUBE VIDEO SECTION ---------- */
/* No bottom padding: the section ends on the .rule separator, whose own
   margin-top supplies the gap above it. Keeping the bottom padding as
   well stacked two large spaces before the FAQ section. */
.sec--video-feature{background:var(--paper);padding:clamp(4.5rem,11vh,8rem) 0 0}

.video-feature{margin-top:clamp(2rem,5vw,3.5rem)}

.video-feature__container{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9}

.video-feature__thumbnail{all:unset;position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);transition:all var(--t)}
.video-feature__thumbnail:hover{transform:translateY(-6px);box-shadow:0 32px 100px rgba(10,11,13,.2)}
.video-feature__thumbnail:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.video-feature__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.video-feature__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,11,13,.15) 0%,rgba(10,11,13,.25) 100%);opacity:0;transition:opacity var(--t)}
.video-feature__thumbnail:hover .video-feature__overlay{opacity:1}

.video-feature__play-button{position:relative;z-index:2;width:80px;height:80px;background:var(--amber);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:all var(--t);box-shadow:0 12px 32px rgba(255,122,26,.3)}
.video-feature__thumbnail:hover .video-feature__play-button{transform:scale(1.15);box-shadow:0 16px 48px rgba(255,122,26,.5)}

.video-feature__play-button svg{width:32px;height:32px}

.video-feature__player{position:absolute;inset:0;background:rgba(10,11,13,.95);backdrop-filter:blur(3px);z-index:10;display:flex;align-items:center;justify-content:center;animation:video-fade-in .3s ease-out}
@keyframes video-fade-in{from{opacity:0}to{opacity:1}}

.video-feature__player[hidden]{display:none !important}

.video-feature__close{position:absolute;top:1.5rem;right:1.5rem;z-index:20;width:44px;height:44px;background:rgba(255,255,255,.1);border:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;transition:all .2s ease-out}
.video-feature__close:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.video-feature__close:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.video-feature__iframe{width:100%;height:100%;border:none}

@media(prefers-reduced-motion:reduce){
  .video-feature__thumbnail,
  .video-feature__play-button,
  .video-feature__player{animation:none !important;transition:none !important}
}

@media(max-width:768px){
  .video-feature__play-button{width:60px;height:60px}
  .video-feature__play-button svg{width:24px;height:24px}
}


/* ---------- GALLERY ALBUMS (division + in-progress album cards) ----------
   Scoped entirely to the .thor-albums namespace so nothing here can reach
   the existing .gal gallery, cards, or any other component. Reuses the
   established tokens (--amber, --ink, --paper, --t, --shadow, --gut) and
   the site's notched-corner clip-path motif rather than introducing a new
   visual language. */
.thor-albums{margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.thor-albums__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1rem,1.8vw,1.6rem);
  grid-template-columns:1fr;
}
@media(min-width:620px){.thor-albums__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.thor-albums__grid{grid-template-columns:repeat(3,1fr)}}
.thor-albums__item{margin:0}

.thor-albums__card{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.09);
  transition:transform var(--t),box-shadow var(--t);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
}
.thor-albums__card:hover,
.thor-albums__card:focus-visible{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.14),0 22px 48px -22px rgba(10,11,13,.4);
}
.thor-albums__card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.thor-albums__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;background:var(--paper-2);
}
.thor-albums__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.25,1);
}
.thor-albums__card:hover .thor-albums__img,
.thor-albums__card:focus-visible .thor-albums__img{transform:scale(1.045)}
/* Amber wash + arrow reveal on hover — the same accent treatment the
   gallery tiles already use, kept deliberately quick and subtle. */
.thor-albums__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,11,13,0) 45%,rgba(10,11,13,.55) 100%);
  opacity:0;transition:opacity var(--t);
}
.thor-albums__card:hover .thor-albums__media::after,
.thor-albums__card:focus-visible .thor-albums__media::after{opacity:1}
.thor-albums__arrow{
  position:absolute;right:14px;bottom:14px;
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--amber);color:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  opacity:0;transform:translateX(-6px);
  transition:opacity var(--t),transform var(--t);
}
.thor-albums__card:hover .thor-albums__arrow,
.thor-albums__card:focus-visible .thor-albums__arrow{opacity:1;transform:translateX(0)}

.thor-albums__body{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.05rem 1.15rem 1.25rem;
}
.thor-albums__title{
  font-family:var(--font-cond);font-weight:700;
  font-size:1rem;letter-spacing:.045em;text-transform:uppercase;
  line-height:1.25;color:var(--ink);
}
.thor-albums__card:hover .thor-albums__title{color:var(--amber-dk)}
.thor-albums__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.thor-albums__count,
.thor-albums__loc{
  font-family:var(--font-cond);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:#6c737d;
}
.thor-albums__loc{color:var(--amber-dk)}

/* Back link on an album detail page. */
.thor-albums__back{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-bottom:clamp(1.2rem,2.5vw,1.8rem);
  font-family:var(--font-cond);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-dk);text-decoration:none;
  transition:gap var(--t),color var(--t);
}
.thor-albums__back:hover{gap:.8rem;color:var(--amber)}
.thor-albums__back:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .thor-albums__card,.thor-albums__img,.thor-albums__arrow,
  .thor-albums__media::after,.thor-albums__back{transition:none!important}
  .thor-albums__card:hover{transform:none}
  .thor-albums__card:hover .thor-albums__img{transform:none}
}

/* ---------- MOBILE HEADER + UTILITY BAR ----------
   Scoped to the existing .hdr / .ubar components; no new markup, no change
   to the desktop layout. */

/* Hamburger sits hard right. The nav is a flex child with
   `justify-content:center`, which centres the toggle once the desktop menu
   is hidden — so it read as floating mid-header on a phone.
   [2026-10-26] Applied through the whole hamburger range (the menu collapses
   below 1160px), not just phones: on tablets it was still centred. */
@media(max-width:1159.98px){
  .hdr .wp-block-navigation{justify-content:flex-end}
  /* The CTA button is hidden in this range but its empty .wp-block-buttons wrapper still took a flex
     gap, leaving the toggle 12-19px short of the content edge the utility bar above lines up with. */
  .hdr .wp-block-buttons{display:none}
}

@media(max-width:599.98px){
  /* One row, not three: the bar wrapped because both groups and their links
     were allowed to wrap. */
  .ubar__in{flex-wrap:nowrap;gap:.75rem;min-height:36px}
  .ubar__grp{flex-wrap:nowrap;gap:.75rem;min-width:0}
  .ubar__grp a{white-space:nowrap}

  /* Email: keep the icon (and the mailto link) but drop its long address,
     which is what forced the extra rows. font-size:0 hides the text node
     without needing a wrapper element in the template part; the SVG has
     explicit width/height so it is unaffected, and screen readers still
     read the address. */
  .ubar a[href^="mailto:"]{font-size:0;gap:0}
  .ubar a[href^="mailto:"] svg{width:16px;height:16px}

  /* Phone number stays visible and is the one piece of text that matters. */
  .ubar a[href^="tel:"]{font-size:.78rem;letter-spacing:.02em}

  /* Location is the least useful item at this width and is the first thing
     to drop once the phone number has to fit. */
  .ubar__grp:last-child a{font-size:.78rem}
}
@media(max-width:399.98px){
  .ubar__grp:last-child{display:none}
}

/* ---------- Core flow-layout spacing override ----------
   Correcting the invalid layout type "flow" to "default" (required to stop
   the block editor crashing) makes WordPress emit `is-layout-flow` on group
   wrappers, which activates core's spacing rules:

     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }

   That selector carries two pseudo-classes (:root and :first-child), so at
   (0,2,0) it outranks a plain single-class theme rule and was silently
   killing the breadcrumb's top margin. Re-asserted here at the same
   specificity; theme.css is enqueued after the global styles, so this wins
   on source order. A full audit of every first/last child of a flow
   container found .breadcrumb to be the only component affected — every
   other component sets its margins on descendants, not on itself. */
:root :where(.is-layout-flow) > .breadcrumb{margin-block-start:1.6rem}
.commercial-template .sec--paper2 hr {
  display: none;
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
/* ---------- LONG CREEK COLORS (Colors & Finishes page) [2026-10-08] ----------
   Painted-steel color chart. Scoped to .thor-colors; reuses the site
   tokens and the notched-corner clip-path used by the pattern swatches
   and album cards, so it reads as part of the same system. Text sits
   below each chip rather than on it — a white label on Polar White, or a
   dark one on Stealth Black, would be unreadable. */
.thor-colors{margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.thor-colors__line + .thor-colors__line{margin-top:clamp(2.4rem,5vw,3.6rem)}
.thor-colors__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.8rem;margin-bottom:1.2rem;
  border-bottom:1px solid rgba(10,11,13,.12);
}
.thor-colors__title{
  margin:0;font-family:var(--font-cond);font-weight:700;
  font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.thor-colors__count{
  font-family:var(--font-cond);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-dk);white-space:nowrap;
}
.thor-colors__intro{margin:-.4rem 0 1.2rem;max-width:70ch;color:#5a616b}

.thor-colors__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(.7rem,1.4vw,1.1rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:560px){.thor-colors__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.thor-colors__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.thor-colors__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

.thor-colors__item{
  margin:0;display:flex;flex-direction:column;background:var(--white);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.08);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.thor-colors__chip{
  display:block;aspect-ratio:4/3;
  /* Inset hairline so the near-white colors (Polar White, Cotton White)
     still read as a swatch against the white card. */
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.1);
}
.thor-colors__body{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .85rem .95rem}
.thor-colors__name{
  font-family:var(--font-cond);font-weight:700;font-size:.9rem;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.2;color:var(--ink);
}
.thor-colors__code{
  font-family:var(--font-cond);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:#6c737d;
}
.thor-colors__coating{font-size:.74rem;line-height:1.35;color:#72777e}

.thor-colors__note{
  display:flex;align-items:flex-start;gap:.55rem;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;max-width:70ch;
  font-size:.88rem;line-height:1.55;color:#5a616b;
}
.thor-colors__note svg{flex:none;margin-top:.18rem;color:var(--amber-dk)}

/* ---------- COLORS & FINISHES — MOBILE [2026-10-08] ----------
   Phone-width fixes found by rendering the page at a true 390px viewport.
   Desktop and tablet layouts are untouched. */

/* Pattern swatches. The card's own aspect-ratio:1 never applies: WordPress
   writes an inline style="aspect-ratio:unset" on every cover block that has
   a min-height, and inline beats the class rule. The cards were therefore
   sized only by core's `.wp-block-cover{min-height:430px}` — on a phone a
   ~170x430 sliver, with the 13 patterns taking ~3,000px of scrolling.
   !important is required to override that inline style. */
@media(max-width:639.98px){
  .wp-block-cover.finish-card{min-height:0;aspect-ratio:1 !important;padding:.75rem .8rem}
  .finish-card__name{font-size:.78rem}
}

/* Long Creek color chart. Two large cards per row made 40 colors ~4,500px
   long. Three compact cards per row roughly halves that. The paint system
   line is dropped at this size: it is identical on all 16 KryptStone colors
   and on most Standard ones, and the color code already identifies each. */
@media(max-width:559.98px){
  .thor-colors__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .thor-colors__item{clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
  .thor-colors__body{padding:.5rem .55rem .65rem;gap:.1rem}
  .thor-colors__name{font-size:.72rem;letter-spacing:.02em}
  .thor-colors__code{font-size:.6rem;letter-spacing:.06em}
  .thor-colors__coating{display:none}
  .thor-colors__head{margin-bottom:.9rem}
}
/* Very narrow phones (e.g. 320px): back to two per row so names stay legible. */
@media(max-width:359.98px){
  .thor-colors__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* "One part of customizing your building" cards. Each reserves a 40px icon
   slot that is empty (its SVG is missing from the page content), which left
   the lower half of every card blank on a phone. Hide the slot only while it
   is empty, so the layout recovers automatically if the icons are restored. */
@media(max-width:767.98px){
  .cta-card__icon:empty{display:none}
}

/* ==========================================================================
   [2026-10-15] SERVICE AREA DIRECTORY (/service-area/)
   One card grid per state; cards follow the album-card look (white tile,
   hairline border, lift on hover) without the clip-path notch, so the
   keyboard focus outline is never clipped.
   ========================================================================== */
.thor-areas{display:grid;gap:clamp(3rem,6vw,4.5rem)}
.thor-areas__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;
  padding-bottom:1rem;margin-bottom:clamp(1.4rem,2.4vw,2rem);border-bottom:1px solid rgba(10,11,13,.12)}
.thor-areas__head h2{margin:0}
.thor-areas__count{margin:0;font-family:var(--font-cond);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-ink)}
.thor-areas__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.7rem,1.2vw,1rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.thor-areas__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.thor-areas__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){.thor-areas__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.thor-areas__card{position:relative;display:flex;flex-direction:column;gap:.3rem;height:100%;min-height:44px;
  padding:1.1rem 2.6rem 1.1rem 1.1rem;background:var(--white);color:var(--ink);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.09),inset 3px 0 0 var(--amber);
  transition:transform var(--t),box-shadow var(--t)}
.thor-areas__card:hover,.thor-areas__card:focus-visible{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(10,11,13,.14),inset 3px 0 0 var(--amber),0 18px 40px -22px rgba(10,11,13,.4)}
.thor-areas__card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.thor-areas__name{font-family:var(--font-cond);font-weight:700;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.2;overflow-wrap:anywhere}
.thor-areas__state{font-family:var(--font-cond);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#6b727b}
.thor-areas__arrow{position:absolute;right:1rem;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--amber-dk);transition:transform var(--t)}
.thor-areas__card:hover .thor-areas__arrow,.thor-areas__card:focus-visible .thor-areas__arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.thor-areas__card,.thor-areas__arrow{transition:none}.thor-areas__card:hover,.thor-areas__card:focus-visible{transform:none}}

/* [2026-10-15] Town pages (single service_area): the constrained layout
   centred the 62ch .lede as a narrower indented block while the next
   paragraph ran full width, left-aligned and flush against it. Give the
   body one centred column, matching the centred hero and buttons. */
.single-service_area .wp-block-post-content{max-width:85ch;margin-inline:auto !important;text-align:center}
.single-service_area .wp-block-post-content > *{max-width:none}
.single-service_area .wp-block-post-content > .lede{margin-block:0;font-size:clamp(1.224rem,1.8vw,1.392rem)} /* 20% above the base .lede clamp(1.02rem,1.5vw,1.16rem) */
.single-service_area .wp-block-post-content > * + *{margin-block-start:1rem}

/* [2026-10-23] Section head with the title left and a link/button right (was an inline style on
   the Gallery page, which the editor rejected as invalid block markup). */
.sec-head.sec-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;max-width:none}
/* [2026-10-23] Cover overlays now carry core's has-background-dim-0 classes (valid block markup).
   Core paints those black; the site's overlays were transparent and are styled per section above. */
.wp-block-cover>.wp-block-cover__background.has-background-dim-0:not([class*=-background-color]){background-color:transparent}

/* [2026-10-23] Long legal pages (Privacy Policy): one readable left-aligned column under the breadcrumb.
   The measure sits on this one container in rem — a constrained layout in `ch` gave every heading a wider box
   than the paragraphs (ch follows each element's own font size), so headings and text didn't line up. */
.legal{max-width:100rem} /* [2026-10-23] was 48rem; widened to match the live site's ~1060px text column */
.legal h1{margin-bottom:1.6rem}
.legal h2{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.15;margin:2.6rem 0 .9rem}
.legal p{margin:0 0 1.1rem;line-height:1.75}
.legal ul,.legal ol{margin:0 0 1.3rem;padding-left:1.3rem;line-height:1.7}
.legal li+li{margin-top:.5rem}
.legal ul.legal__alpha{list-style:none;padding-left:0}
.legal a{color:var(--amber-dk);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--ink)}
.legal__updated{margin-top:2.2rem !important;font-family:var(--font-cond);font-size:.85rem;letter-spacing:.06em;color:var(--steel-ink)}
/* [2026-10-23] Privacy Policy: tighter section padding and a fade divider between the breadcrumb and the
   title (same gradient as .rule--fade). left/right instead of width:100% because .sec is also .wrap, whose
   side padding would push an un-anchored absolute line past the right edge. */
.privacy-policy .sec{padding-block:3rem;position:relative}
.privacy-policy .sec::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(10,11,13,.15) 50%,transparent 100%)}
body.page #ae_app #ae_launcher {
  top: 45%;
}