/* wolfe-tokens.css — Wolfe brand tokens + self-hosted Campton fonts.
   Source: live wolfeequipment.com computed styles, 2026-08-12.
   Drop the Campton .woff2 files into ../fonts/ (see fonts/README.txt) and the
   @font-face rules below activate. Until then, the fallback stack renders. */

/* ---- Self-hosted Campton (commercial font — confirm licence) ---------------- */
/* Self-hosted Campton. Cross-origin loading from production is blocked by CORS
   (verified 2026-08-12: NetworkError), so the fonts MUST live on this install.
   Drop the 6 files from production /wp-content/themes/wolfe_theme/assets/fonts/
   into ../fonts/ (see fonts/README.txt) — filenames already match. Until then the
   fallback stack (Helvetica) renders. */
@font-face {
  font-family: "camptonregular";
  src: url("../fonts/campton-book-webfont.woff2") format("woff2"),
       url("../fonts/campton-book-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "camptonmedium";
  src: url("../fonts/campton-medium-webfont.woff2") format("woff2"),
       url("../fonts/campton-medium-webfont.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "camptonbold";
  src: url("../fonts/campton-bold-webfont.woff2") format("woff2"),
       url("../fonts/campton-bold-webfont.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Tokens ----------------------------------------------------------------- */
:root {
  --wolfe-accent:        #FBAE40;   /* gold — underlines, active states, rules, CTAs */
  --wolfe-dark:          #333333;
  --wolfe-black:         #000000;
  --wolfe-white:         #FFFFFF;
  --wolfe-border:        #CCCCCC;
  --wolfe-border-light:  #E1E1E1;

  --wolfe-font-body:     "camptonregular", Helvetica, Roboto, Arial, sans-serif;
  --wolfe-font-medium:   "camptonmedium", Helvetica, Arial, sans-serif;
  --wolfe-font-heading:  "camptonbold", Helvetica, Roboto, Arial, sans-serif;

  --wolfe-h1-size: 76px;  --wolfe-h1-lh: 64px;  --wolfe-h1-weight: 900;
  --wolfe-h2-size: 40px;  --wolfe-h2-lh: 56px;  --wolfe-h2-weight: 700;
  --wolfe-body-size: 16px; --wolfe-body-lh: 24px; --wolfe-body-weight: 400;

  --wolfe-container: 1200px;   /* verify against a content section */
  --wolfe-section-pad: 80px;
}

/* ---- Base application (globals also set in Customizer/Pagelayer) ------------- */
body { font-family: var(--wolfe-font-body); font-size: var(--wolfe-body-size); line-height: var(--wolfe-body-lh); }
h1, h2, h3, h4, h5, h6 { font-family: var(--wolfe-font-heading); }
h1 { text-transform: uppercase; }

/* Accent underline utility, matching the live logo/heading rule */
.wolfe-rule { border-bottom: 4px solid var(--wolfe-accent); }

/* ---- Accessibility: honour reduced motion for scroll transitions ------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Responsive: 76px hero is too large on phones -------------------------- */
@media (max-width: 767px) {
  :root { --wolfe-h1-size: 40px; --wolfe-h1-lh: 40px; }
}

/* ===========================================================================
   Transparent OVERLAY header that turns solid (dark) on scroll.
   The Pagelayer header renders as header.pagelayer-header (a body child) with a
   .pagelayer-row that carries the #1c2530 bar bg. Default: header is absolutely
   positioned OVER the hero and fully transparent. On scroll (body.wolfe-scrolled,
   toggled by JS in functions.php) it becomes fixed + solid #1c2530.
   =========================================================================== */
header.pagelayer-header{
  position:absolute; top:0; left:0; right:0; width:100%; z-index:900;
  background:transparent; transition:background .3s ease, box-shadow .3s ease;
}
header.pagelayer-header .pagelayer-row{ background-color:transparent !important; }
body.wolfe-scrolled header.pagelayer-header{
  position:fixed; background:#1c2530; box-shadow:0 2px 12px rgba(0,0,0,.28);
}
/* keep the header clear of the WP admin bar while logged in */
.admin-bar header.pagelayer-header{ top:32px; }
@media (max-width:782px){ .admin-bar header.pagelayer-header{ top:46px; } }

/* ===========================================================================
   FULL-BLEED page content: the theme constrains content to ~1150px; break the
   page content (.wh) and footer out to full viewport width. Inner sections keep
   their own centred max-width wrappers (.wh-hero-in, .wf-... etc).
   =========================================================================== */
.wh{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }
.wolfe-footer{ width:100vw; position:relative; left:50%; margin-left:-50vw; box-sizing:border-box; background:#1c2530; }

/* ===========================================================================
   Gravity Forms — brand styling (applies to all embedded GF forms site-wide).
   =========================================================================== */
.gform_wrapper .gfield_label{ font-family:var(--wolfe-font-medium); font-size:14px; color:#333; }
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea{
  width:100%; padding:12px 14px; border:1px solid #ccc; background:#f7f7f7;
  font-family:var(--wolfe-font-body); font-size:15px; box-sizing:border-box; border-radius:0;
}
.gform_wrapper textarea{ min-height:120px; }
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button,
.gform_wrapper input.gform_button,
.gform_wrapper .gform-button{
  background:#FBAE40 !important; color:#2b2b2b !important; border:0 !important;
  padding:16px 44px !important; text-transform:uppercase; letter-spacing:.6px; font-size:13px;
  font-family:var(--wolfe-font-medium); cursor:pointer; border-radius:0 !important; box-shadow:none !important;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper input.gform_button:hover,
.gform_wrapper .gform-button:hover{ opacity:.9; }

/* ===========================================================================
   CUSTOM HEADER (replaces the Pagelayer header) — utility bar + primary nav
   with hover dropdowns + hamburger slide-out drawer. Overlay -> solid on scroll.
   =========================================================================== */
header.pagelayer-header{ display:none !important; }
#wq-hdr{ position:fixed; top:0; left:0; right:0; z-index:1000; background:transparent; transition:background .3s ease, box-shadow .3s ease; }
.admin-bar #wq-hdr{ top:32px; }
@media(max-width:782px){ .admin-bar #wq-hdr{ top:46px; } }
body.wolfe-scrolled #wq-hdr{ background:#1c2530; box-shadow:0 2px 12px rgba(0,0,0,.28); }
body.wolfe-scrolled #wq-hdr .wq-hdr-in{ padding-top:10px; padding-bottom:10px; }
body.wolfe-scrolled #wq-hdr .wq-util{ display:none; }
body.wolfe-scrolled #wq-hdr .wq-logo{ border-bottom:0; padding-bottom:0; }
body.wolfe-scrolled #wq-hdr .wq-word{ display:none; }
body.wolfe-scrolled #wq-hdr .wq-ic{ display:inline-block; }
.wq-hdr-in{ max-width:1240px; margin:0 auto; padding:16px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wq-logo{ font-family:var(--wolfe-font-heading); color:#fff; font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; border-bottom:4px solid var(--wolfe-accent); padding-bottom:2px; line-height:1; flex:0 0 auto; display:inline-flex; align-items:center; }
.wq-word{ display:inline-block; color:#fff; -webkit-text-fill-color:#fff; }
.wq-ic{ display:none; height:46px; width:auto; }
.wq-hdr-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.wq-util{ display:flex; gap:28px; }
.wq-util a{ color:#fff; font-family:var(--wolfe-font-medium); font-size:13px; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; opacity:.92; }
.wq-util a:hover{ color:var(--wolfe-accent); }
.wq-nav{ display:flex; align-items:center; gap:26px; }
.wq-nav > ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; align-items:center; }
.wq-nav > ul > li{ position:relative; }
.wq-nav > ul > li > a{ color:#fff; font-family:var(--wolfe-font-heading); text-transform:uppercase; text-decoration:none; font-size:15px; letter-spacing:.03em; padding:6px 0; border-bottom:3px solid transparent; display:block; white-space:nowrap; }
.wq-nav > ul > li:hover > a{ color:var(--wolfe-accent); border-bottom-color:var(--wolfe-accent); }
.wq-sub{ position:absolute; top:100%; left:0; min-width:230px; background:#1c2530; list-style:none; margin:0; padding:8px 0; display:none; box-shadow:0 10px 22px rgba(0,0,0,.32); }
.wq-nav > ul > li.has-sub:hover .wq-sub{ display:block; }
.wq-sub li a{ display:block; color:#fff; font-family:var(--wolfe-font-body); text-transform:uppercase; font-size:14px; padding:10px 22px; text-decoration:none; white-space:nowrap; }
.wq-sub li a:hover{ background:var(--wolfe-accent); color:#1c2530; }
.wq-burger{ background:none; border:0; cursor:pointer; display:flex; flex-direction:column; gap:5px; padding:6px; margin-left:4px; }
.wq-burger span{ width:26px; height:3px; background:#fff; display:block; transition:background .2s; }
.wq-burger:hover span{ background:var(--wolfe-accent); }
/* slide-out drawer (secondary menu) */
.wq-drawer{ position:fixed; top:0; right:-360px; width:340px; max-width:86vw; height:100%; background:#151d27; z-index:1100; padding:74px 36px; transition:right .32s ease; overflow-y:auto; }
.wq-drawer.open{ right:0; }
.wq-drawer ul{ list-style:none; margin:0; padding:0; }
.wq-drawer li a{ display:block; color:#fff; font-family:var(--wolfe-font-medium); text-transform:uppercase; font-size:15px; letter-spacing:.05em; padding:14px 0; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08); }
.wq-drawer li a:hover{ color:var(--wolfe-accent); }
.wq-drawer-primary{ display:none; }
.wq-drawer-close{ position:absolute; top:18px; right:24px; background:none; border:0; color:#fff; font-size:36px; line-height:1; cursor:pointer; }
.wq-drawer-close:hover{ color:var(--wolfe-accent); }
.wq-drawer-ov{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1090; opacity:0; visibility:hidden; transition:opacity .3s; }
.wq-drawer-ov.open{ opacity:1; visibility:visible; }
@media(max-width:980px){
  .wq-nav > ul{ display:none; }
  .wq-hdr-in{ padding:12px 20px; }
  .wq-hdr-right{ gap:6px; }
  .wq-drawer-primary{ display:block; margin-bottom:10px; }
}

/* ===========================================================================
   PRODUCT HOTSPOT PAGES — shared component (all 4 product pages).
   Large machine image, hollow ring markers (gold-filled when active), side
   arrows, feature panel + See-it-in-Action video button, video modal, and the
   Features accordion + Standard Equipment block.
   =========================================================================== */
.wh .hs{ background:#fff; max-width:1240px; margin:0 auto; padding:56px 40px 80px; }
.wh .hs-tabs{ display:flex; justify-content:center; gap:60px; flex-wrap:wrap; margin-bottom:26px; }
.wh .hs-tab{ cursor:pointer; text-transform:uppercase; font-family:var(--wolfe-font-heading); font-size:21px; color:#333; padding-bottom:8px; border-bottom:3px solid transparent; letter-spacing:.4px; }
.wh .hs-tab.is-active{ border-bottom-color:var(--wolfe-accent); }
.wh .hs-stage{ display:flex; align-items:center; justify-content:center; gap:6px; }
.wh .hs-arrow{ cursor:pointer; font-size:52px; color:#c4c4c4; user-select:none; flex:0 0 auto; transition:color .2s; line-height:1; }
.wh .hs-arrow:hover{ color:#333; }
.wh .hs-imgwrap{ position:relative; flex:1 1 auto; max-width:1080px; }
.wh .hs-img{ display:block; width:100%; }
.wh .hs-dot{ position:absolute; width:34px; height:34px; border-radius:50%; transform:translate(-50%,-50%); cursor:pointer; border:3px solid #2b2b2b; background:rgba(255,255,255,.30); box-shadow:0 0 0 4px rgba(255,255,255,.28); transition:background .2s,border-color .2s,box-shadow .2s; }
.wh .hs-dot:before{ content:""; position:absolute; inset:5px; border-radius:50%; border:2px solid #2b2b2b; transition:border-color .2s; }
.wh .hs-dot:after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(251,174,64,.0); animation:wqpulse 2s infinite; }
.wh .hs-dot:hover{ border-color:var(--wolfe-accent); }
.wh .hs-dot.is-active{ background:var(--wolfe-accent); border-color:var(--wolfe-accent); box-shadow:0 0 0 6px rgba(251,174,64,.32); }
.wh .hs-dot.is-active:before{ border-color:#2b2b2b; }
@keyframes wqpulse{ 0%{ box-shadow:0 0 0 0 rgba(251,174,64,.5);} 70%{ box-shadow:0 0 0 12px rgba(251,174,64,0);} 100%{ box-shadow:0 0 0 0 rgba(251,174,64,0);} }
.wh .hs-content{ max-width:940px; margin:30px auto 0; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.wh .hs-feature{ display:none; flex:1; min-width:280px; }
.wh .hs-feature.is-active{ display:block; }
.wh .hs-feature h3{ text-transform:uppercase; font-size:26px; color:#333; margin:0 0 14px; font-family:var(--wolfe-font-heading); }
.wh .hs-feature p{ font-size:15px; line-height:1.65; color:#444; margin:0; }
.wh .hs-cta{ flex:0 0 auto; padding-top:4px; }
.wh .hs-video-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--wolfe-accent); color:#2b2b2b; padding:16px 30px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; text-decoration:none; font-family:var(--wolfe-font-medium); border:0; cursor:pointer; }
.wh .hs-video-btn:hover{ opacity:.9; }
.wh .hs-video-btn:after{ content:"\25B6"; font-size:11px; }
/* video modal */
.wh .hs-gallery{ display:flex; align-items:center; gap:6px; margin-top:44px; }
.wh .hg-viewport{ overflow-x:auto; flex:1 1 auto; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; }
.wh .hg-viewport::-webkit-scrollbar{ display:none; }
.wh .hg-track{ display:flex; }
.wh .hg-item{ flex:0 0 auto; width:300px; height:230px; cursor:pointer; opacity:.5; transition:opacity .3s; position:relative; }
.wh .hg-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.wh .hg-item.is-active{ opacity:1; }
.wh .hg-item.is-active:after{ content:""; position:absolute; inset:0; border:4px solid var(--wolfe-accent); }
.wh .hg-arrow{ cursor:pointer; font-size:46px; line-height:1; color:#c4c4c4; flex:0 0 auto; user-select:none; padding:0 4px; transition:color .2s; }
.wh .hg-arrow:hover{ color:#333; }
@media(max-width:900px){ .wh .hg-item{ width:220px; height:165px; } }
.wq-vmodal{ position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; padding:24px; }
.wq-vmodal.open{ display:flex; }
.wq-vmodal-box{ width:100%; max-width:960px; aspect-ratio:16/9; position:relative; }
.wq-vmodal-box iframe{ width:100%; height:100%; border:0; }
.wq-vmodal-close{ position:absolute; top:-44px; right:0; background:none; border:0; color:#fff; font-size:36px; line-height:1; cursor:pointer; }

/* Features accordion + Standard Equipment (shared) */
.wh .wh-gallery{ background:#1c2530; }
.wh .wh-gallery-strip{ display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; }
.wh .wh-gallery-strip img{ flex:0 0 40%; max-width:40%; height:360px; object-fit:cover; scroll-snap-align:center; display:block; }
.wh .wh-gallery-strip::-webkit-scrollbar{ height:8px; }
.wh .wh-gallery-strip::-webkit-scrollbar-thumb{ background:var(--wolfe-accent); border-radius:4px; }
.wh .wh-specs{ background:#fff; max-width:1200px; margin:0 auto; padding:70px 40px 90px; }
.wh .wh-specs-grid{ display:flex; gap:60px; flex-wrap:wrap; }
.wh .wh-specs-col{ flex:1; min-width:320px; }
.wh .wh-specs-col h2{ font-family:var(--wolfe-font-heading); text-transform:uppercase; font-size:30px; color:#1c2530; margin:0 0 26px; letter-spacing:.4px; }
.wh .wh-acc-item{ border-bottom:1px solid #e2e2e2; }
.wh .wh-acc-item summary{ list-style:none; cursor:pointer; padding:16px 34px 16px 0; position:relative; font-family:var(--wolfe-font-medium); text-transform:uppercase; font-size:16px; color:#1c2530; letter-spacing:.3px; }
.wh .wh-acc-item summary::-webkit-details-marker{ display:none; }
.wh .wh-acc-item summary em{ text-transform:none; color:#9a9a9a; font-style:normal; font-size:14px; }
.wh .wh-acc-item summary:after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:24px; height:24px; line-height:22px; text-align:center; border-radius:50%; background:var(--wolfe-accent); color:#1c2530; font-size:18px; font-family:var(--wolfe-font-heading); }
.wh .wh-acc-item[open] summary:after{ content:"\2212"; }
.wh .wh-acc-body{ padding:0 30px 20px 0; }
.wh .wh-acc-body p{ font-size:15px; line-height:1.65; color:#444; margin:0; }
.wh .wh-std-list{ list-style:none; margin:0; padding:0; }
.wh .wh-std-list li{ position:relative; padding:0 0 16px 26px; font-size:14.5px; line-height:1.55; color:#444; }
.wh .wh-std-list li:before{ content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:var(--wolfe-accent); }
/* product hero (shared) */
.wh .wh-hero{ position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden; background-size:cover; background-position:center; }
.wh .wh-hero:after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,18,28,.62) 0%,rgba(10,18,28,.32) 45%,rgba(10,18,28,.02) 75%); }
.wh .wh-hero-in{ position:relative; z-index:2; max-width:1200px; width:100%; margin:0 auto; padding:0 40px; }
.wh .wh-hero-in h1{ color:#fff; text-transform:uppercase; font-size:72px; line-height:.92; letter-spacing:.5px; margin:0; font-family:var(--wolfe-font-heading); }
.wh .wh-hero-in .wh-rule{ display:block; width:150px; height:4px; background:var(--wolfe-accent); margin:24px 0 0; }
@media(max-width:900px){
  .wh .hs{ padding:36px 16px 56px; }
  .wh .hs-tabs{ gap:22px; }
  .wh .hs-tab{ font-size:16px; }
  .wh .hs-arrow{ font-size:34px; }
  .wh .hs-dot{ width:24px; height:24px; }
  .wh .hs-content{ flex-direction:column; }
  .wh .wh-hero-in h1{ font-size:42px; }
  .wh .wh-gallery-strip img{ flex:0 0 80%; max-width:80%; height:240px; }
  .wh .wh-specs{ padding:44px 20px 60px; }
  .wh .wh-specs-col h2{ font-size:24px; }
}

/* ===========================================================================
   FOOTER full-bleed fix — the dark bg was boxed to ~1200px (white gap on the
   sides). Full-bleed the Pagelayer ROW that wraps .wolfe-footer and let it carry
   the dark bg edge-to-edge; the inner content keeps its centred max-width.
   =========================================================================== */
.wolfe-footer{ width:auto; left:auto; right:auto; margin-left:auto; margin-right:auto; background:transparent; }
.pagelayer-row:has(.wolfe-footer){ width:100vw !important; max-width:100vw !important; position:relative !important; left:50% !important; right:50% !important; margin-left:-50vw !important; margin-right:-50vw !important; box-sizing:border-box !important; background:#1c2530; overflow:visible; }
.pagelayer-col:has(.wolfe-footer){ overflow:visible; }
.wolfe-footer-inner, .wolfe-footer{ max-width:1200px; margin:0 auto; }

/* ===========================================================================
   TOP whitespace fix — remove any top padding/margin the theme adds above the
   first section, so the overlay header sits directly over the full-bleed hero.
   =========================================================================== */
.pagelayer-content, .entry-content, .site-main, #main, .pagelayer-inner{ margin-top:0 !important; padding-top:0 !important; }
.pagelayer-content > .pagelayer-row:first-child{ margin-top:0 !important; }
body.page .site-content, body.page #content{ padding-top:0 !important; margin-top:0 !important; }
.wh .wh-tech{ background:#fff; max-width:1200px; margin:0 auto; padding:20px 40px 90px; text-align:center; }
.wh .wh-tech h2{ font-family:var(--wolfe-font-heading); text-transform:uppercase; font-size:30px; color:#1c2530; margin:0 0 26px; letter-spacing:.4px; }
.wh .wh-tech-img img{ max-width:100%; height:auto; }
/* Remove Pagelayer column top padding above the hero so the header/hero sit flush (no white gap at top) */
.pagelayer-col-holder:has(.wh){ padding-top:0 !important; }
/* Wolfe Equipment App section */
.wh .wh-app{ background:#1c2530; }
.wh .wh-app-in{ max-width:1200px; margin:0 auto; padding:70px 40px; display:flex; gap:60px; align-items:center; flex-wrap:wrap; }
.wh .wh-app-img{ flex:0 0 300px; max-width:300px; margin:0 auto; }
.wh .wh-app-img img{ width:100%; height:auto; display:block; }
.wh .wh-app-txt{ flex:1; min-width:300px; }
.wh .wh-app-txt h2{ color:#fff; font-family:var(--wolfe-font-heading); text-transform:uppercase; font-size:30px; margin:0 0 22px; letter-spacing:.4px; }
.wh .wh-app-txt ul{ list-style:none; margin:0; padding:0; }
.wh .wh-app-txt li{ position:relative; padding:0 0 15px 26px; color:#cfd6dd; font-size:15px; line-height:1.55; }
.wh .wh-app-txt li:before{ content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:var(--wolfe-accent); }
@media(max-width:900px){ .wh .wh-app-in{ padding:44px 20px; gap:30px; } }
/* Optional Equipment Add-Ons — full-width band, 3-column list (matches live) */
.wh .wh-opt{ background:#ebebeb; }
.wh .wh-opt-in{ max-width:1200px; margin:0 auto; padding:70px 40px 80px; }
.wh .wh-opt-in h2{ font-family:var(--wolfe-font-heading); text-transform:uppercase; font-size:30px; color:#1c2530; margin:0 0 30px; letter-spacing:.4px; }
.wh .wh-opt-list{ list-style:none; margin:0; padding:0; column-count:3; column-gap:48px; }
.wh .wh-opt-list li{ break-inside:avoid; padding:0 0 12px; font-size:15px; line-height:1.5; color:#333; }
@media(max-width:1024px){ .wh .wh-opt-list{ column-count:2; } }
@media(max-width:600px){ .wh .wh-opt-list{ column-count:1; } }

/* LIVE-ACCURATE SECTION OVERRIDES v2 */
.wh .wh-tech{ text-align:left; padding:24px 40px 60px; }
.wh .wh-tech h2{ font-size:32px; }
.wh .wh-tech-img{ margin-bottom:18px; }
.wh .wh-tech-img img{ width:auto; max-width:100%; }
.wh .wh-tech-img[data-model]{ display:none; }
.wh .wh-tech-img[data-model].is-active{ display:block; }
.wh .wh-app{ background:#ebebeb; }
.wh .wh-app-in{ flex-direction:row; align-items:center; }
.wh .wh-app-txt{ order:1; }
.wh .wh-app-img{ order:2; flex:0 0 380px; max-width:380px; margin:0; }
.wh .wh-app-txt h2{ color:#1c2530; font-size:44px; line-height:1.05; margin:0; }
.wh .wh-app-rule{ display:block; width:150px; height:4px; background:var(--wolfe-accent); margin:16px 0 22px; }
.wh .wh-app-sub{ font-family:var(--wolfe-font-medium); text-transform:uppercase; letter-spacing:2px; font-size:14px; color:#8a8a8a; margin:0 0 16px; }
.wh .wh-app-txt ul{ list-style:disc; padding-left:20px; }
.wh .wh-app-txt li{ color:#333; }
.wh .wh-app-txt li:before{ content:none; }
@media(max-width:860px){ .wh .wh-app-in{ flex-direction:column; align-items:flex-start; } .wh .wh-app-img{ flex-basis:100%; max-width:320px; margin:24px auto 0; } .wh .wh-app-txt h2{ font-size:34px; } }
.wh .wh-xd{ background:var(--wolfe-accent); max-width:none; margin:0; padding:0; }
.wh .wh-xd .wh-xd-in{ max-width:1200px; margin:0 auto; padding:60px 40px; }
.wh .wh-xd h2{ font-family:var(--wolfe-font-heading); text-transform:uppercase; font-size:32px; color:#1c2530; margin:0 0 26px; letter-spacing:.4px; text-align:left; }
.wh .wh-xd-list{ list-style:none; margin:0; padding:0; column-count:2; column-gap:60px; }
.wh .wh-xd-list li{ break-inside:avoid; padding:0 0 12px; font-size:15px; line-height:1.55; color:#1c2530; }
@media(max-width:768px){ .wh .wh-xd-list{ column-count:1; } }

/* DOWNLOAD BROCHURE */
.wh .wh-brochure{ background:#fff; text-align:center; padding:0 40px 74px; }
.wh .wh-brochure a{ display:inline-block; background:var(--wolfe-accent); color:#2b2b2b; padding:20px 42px; font-family:var(--wolfe-font-medium); text-transform:uppercase; letter-spacing:.6px; font-size:14px; text-decoration:none; cursor:pointer; }
.wh .wh-brochure a:hover{ opacity:.9; }
.wh .wh-brochure a[data-model]{ display:none; }
.wh .wh-brochure a[data-model].is-active{ display:inline-block; }

/* WHITE PAGE BG + IMAGE LOGO */
.wh{ background:#fff; }
body.page{ background:#fff; }
.wq-logo{ border-bottom:0 !important; padding-bottom:0 !important; }
.wq-logo img.wq-word{ height:52px; width:auto; display:inline-block; }
body.wolfe-scrolled #wq-hdr .wq-word{ display:none; }
@media(max-width:980px){ .wq-logo img.wq-word{ height:42px; } }

/* FOOTER LOGO IMAGE */
.wolfe-footer .wf-logo{ font-size:0 !important; line-height:0 !important; color:transparent !important; border-bottom:0 !important; padding:0 !important; width:175px; height:52px; max-width:60vw; background:url("https://wolfeequipment.com/wp-content/uploads/2016/11/Wolfe_PrimaryLogo_Colour.png") no-repeat left center; background-size:contain; display:inline-block; }


/* HERO TEXT — match live typography exactly (camptonbold 900, tight line-height, no letter-spacing). !important normalizes Pagelayer per-page inline sizes so home + all product heroes match the live site. */
.wh .wh-hero .wh-hero-in h1{
  font-family:var(--wolfe-font-heading) !important;
  font-weight:900 !important;
  letter-spacing:normal !important;
  text-transform:uppercase !important;
  font-size:4.75rem !important;   /* 76px — live product hero */
  line-height:4rem !important;    /* 64px — live .hero-text h1 */
}
body.home .wh .wh-hero .wh-hero-in h1{ font-size:4.875rem !important; } /* 78px — live home hero */
@media (max-width:640px){
  .wh .wh-hero .wh-hero-in h1{ font-size:3rem !important; line-height:3rem !important; } /* 48px — live mobile */
}

/* FOOTER — remove stray trailing <p>&nbsp;</p> that adds empty space after the footer */
footer.pagelayer-footer > p{ display:none !important; }

/* FOOTER FLUSH — content should meet the footer with no gap above it. Hides the admin-only front-end edit link band and removes the top-level Pagelayer column's bottom padding. */
body.page .entry-footer{ display:none !important; }
body.page .entry-content > .pagelayer-row > .pagelayer-row-holder > * > .pagelayer-col-holder{ padding-bottom:0 !important; }

/* PRD TITLE MATCH — section titles = live generic h1 (2.1rem / 900 / line-height 1.4 / no letter-spacing). Unifies staging's inconsistent 30-32px/700 headings. */
.wh .wh-specs h2,
.wh .wh-opt h2,
.wh .wh-tech h2,
.wh .wh-app .wh-app-txt h2{
  font-size:2.1rem !important;
  font-weight:900 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
}
/* PRD SUBTITLE MATCH — hotspot feature titles = live h4 (1.2rem / 700 / 1.4). Was 26px. */
.wh .hs-feature h3{
  font-size:1.2rem !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
}
/* PRD HERO RULE MATCH — yellow underline spans the title width (like live .hero-text h1::after), 8px tall, instead of a fixed 150x4px bar. */
.wh .wh-hero .wh-hero-in h1{ display:inline-block; }
.wh .wh-hero .wh-hero-in .wh-rule{ display:none !important; }
.wh .wh-hero .wh-hero-in h1::after{
  content:""; display:block;
  background:var(--wolfe-accent);
  height:0.5rem;
  width:96%;
  margin-top:14px;
}

/* PRD HERO SPAN — second line of the hero title is a <span> stepped down from the first line (live .hero-text h1 span): 3.5rem/48px line-height/1.6px tracking on desktop, 3rem on mobile. */
.wh .wh-hero .wh-hero-in h1 span{
  font-size:3.5rem !important;
  line-height:3rem !important;
  letter-spacing:0.1rem !important;
  text-transform:uppercase;
  display:inline;
}
@media (max-width:640px){
  .wh .wh-hero .wh-hero-in h1 span{ font-size:3rem !important; line-height:2rem !important; }
}

/* HERO SUBTITLE SPACING — when text follows the title's yellow underline (e.g. Our Company), give it breathing room above so it isn't touching the line. Matches live's ~24px header gap. */
.wh .wh-hero .wh-hero-in > p{ margin-top:24px !important; }

/* CULTURE STATEMENT ALIGN — production left-aligns this on desktop (staging had it centered in a narrow column). Left + full content width on desktop; centered on mobile. */
.wh .co-center .co-center-in{ text-align:left !important; max-width:1200px !important; }
@media (max-width:767px){
  .wh .co-center .co-center-in{ text-align:center !important; }
}