/*
Theme Name: Lightboard Nova
Theme URI: https://lightboardstudio.ca
Author: Lightboard Studio
Author URI: https://lightboardstudio.ca
Description: Design language overhaul of Quantum
Version: 1.0.20
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lightboard-nova
Tags: custom-logo, custom-menu, e-commerce, featured-images, full-width-template, one-column, two-columns, threaded-comments
WooCommerce: 10.7
*/

/* ============================================
   TOKENS
   ============================================ */
:root {
    /* ---- Accent: burnt amber ------------------------------------------ */
    --orange:        #AD5A17;                 /* buttons, links, focus, the one accented hero word. 4.94:1 on white */
    --orange-lo:     #8F4912;                 /* hover/pressed; all amber TEXT on white and on washes. 6.71:1 */
    --orange-hi:     #E8A063;                 /* amber on navy only (eyebrows, icons in theatre). Never on white */
    --orange-wash:   #FAEFE4;                 /* amber tint: chips, callouts, icon wells */
    --orange-wash-2: #F1DCC6;                 /* border / hover step for the tint */

    /* ---- Supporting: sea green (included / verified / in stock / training) */
    --teal:          #2E7D73;                 /* icons and check marks on white. 4.89:1 */
    --teal-lo:       #236259;                 /* text on --teal-wash */
    --teal-hi:       #7FD1C3;                 /* on navy only */
    --teal-wash:     #E6F2EE;

    /* ---- Supporting: lavender (equipment / lighting / partner) --------- */
    --purple:        #6B62B8;                 /* icons on white. 5.17:1 */
    --purple-lo:     #574F9B;                 /* text on --purple-wash */
    --purple-hi:     #B3ACEB;                 /* on navy only */
    --purple-wash:   #EEEBF8;

    /* ---- Neutrals: light register ------------------------------------- */
    --w:        #FFFFFF;
    --mist:     #F5F5F7;                      /* section wash. Cool grey, not cream */
    --mist-2:   #EAEAEF;                      /* deep wash: segmented track, neutral chips, table header fills */
    --cream:    var(--mist);                  /* [alias] legacy references resolve to mist */
    --cream-2:  var(--mist-2);                /* [alias] */

    /* ---- Inks: fixed values, never navy-at-opacity ---------------------- */
    --ink:      #16161D;                      /* headings, prices, values, primary UI text. 18:1 */
    --ink-2:    #3F3F4A;                      /* body. 10.4:1 */
    --ink-3:    #6B6B78;                      /* captions, labels, eyebrows, secondary UI. 5.25:1 */
    --ink-4:    #8E8E9A;                      /* placeholders, disabled, decorative. 3.24:1 — never running text */
    --ink-hi:   #2A2A34;                      /* hover of solid-ink buttons */

    /* ---- Hairlines: light register ------------------------------------ */
    --line:     rgba(22,22,29,.08);           /* card edges, table rows, section strips */
    --line-2:   rgba(22,22,29,.16);           /* inputs, ghost buttons, table header rules */

    /* ---- Dark register: theatre surfaces ------------------------------ */
    --navy:     #07071A;
    --navy-2:   #0D0D24;
    --navy-3:   #14142F;
    --navy-4:   #1C1C42;
    --navy-border: rgba(255,255,255,.10);     /* was .06 — lifts to a visible hairline */
    --slate:    var(--navy);                  /* [alias] retired: one dark, not two */
    --slate-2:  var(--navy-2);                /* [alias] */
    --slate-border: var(--navy-border);       /* [alias] */

    /* ---- White opacity scale: unchanged, plus --w50 -------------------- */
    --w95: rgba(255,255,255,.95);
    --w80: rgba(255,255,255,.8);
    --w60: rgba(255,255,255,.6);              /* body on dark — locked in the July contrast pass */
    --w55: rgba(255,255,255,.55);
    --w50: rgba(255,255,255,.5);              /* captions on dark, 5.3:1. --w40 (3.7:1) fails AA for small text */
    --w40: rgba(255,255,255,.4);              /* ≥18px/500 and decorative meta only */
    --w20: rgba(255,255,255,.2);
    --w10: rgba(255,255,255,.1);
    --w05: rgba(255,255,255,.05);
    --w03: rgba(255,255,255,.03);

    /* ---- Status ------------------------------------------------------- */
    --err:      #B42318;
    --err-wash: #FDECEA;
    --ok:       var(--teal);
    --ok-wash:  var(--teal-wash);

    /* ---- Role tokens: light register (theatre register re-declares these) */
    --sur:      var(--w);                     /* the surface I am on */
    --sur-2:    var(--mist);                  /* a nested / raised surface on --sur */
    --tx:       var(--ink);                   /* heading, primary text */
    --tx-2:     var(--ink-2);                 /* body */
    --tx-3:     var(--ink-3);                 /* caption, label, eyebrow */
    --ln:       var(--line);
    --ln-2:     var(--line-2);
    --acc:      var(--orange);                /* accent fill */
    --acc-tx:   var(--orange-lo);             /* accent as text */
    --focus:    var(--orange);

    /* ---- Type ---------------------------------------------------------- */
    --ff: 'Instrument Sans', 'Inter', system-ui, sans-serif;   /* display: h1–h4, values, prices */
    --fb: 'Inter', system-ui, sans-serif;                      /* body and all UI text, buttons included */

    --fs-hero:    clamp(2.75rem, 5.5vw, 4.5rem);   /* 44 → 72px */
    --fs-h2:      clamp(2rem, 3.4vw, 2.75rem);     /* 32 → 44px */
    --fs-h2-sm:   clamp(1.5rem, 2.4vw, 1.875rem);  /* 24 → 30px — long-form h2 */
    --fs-h3:      1.25rem;                          /* 20px */
    --fs-h4:      1.0625rem;                        /* 17px — card titles, loop product names */
    --fs-body:    1.0625rem;                        /* 17px */
    --fs-body-lg: 1.1875rem;                        /* 19px — ledes */
    --fs-caption: 0.875rem;                         /* 14px — captions, helper text, footer meta */
    --fs-eyebrow: 0.8125rem;                        /* 13px */
    --fs-spec:    0.8125rem;                        /* 13px */
    --fs-btn:     0.9375rem;                        /* 15px */
    --fs-stat:    2rem;                             /* 32px — partner stats, big numbers */
    --fs-val:     1.5rem;                           /* 24px — spec tile values */

    --lh-display: 1.04;                             /* h1 */
    --lh-h2:      1.12;
    --lh-h3:      1.3;                              /* h3/h4 */
    --lh-body:    1.6;
    --lh-body-lg: 1.6;

    --ls-display: -.025em;
    --ls-h2:      -.02em;
    --ls-eyebrow: 0;                                /* eyebrows are no longer tracked caps */
    --ls-spec:    0;
    --fw-display: 600;                              /* h2, h3, h4, values */
    --fw-hero:    700;                              /* h1 only */

    /* ---- Shape: radius grows with the element ------------------------- */
    --r-xs:   6px;                                  /* chips, tags, badges, icon wells, check squares */
    --rs:     8px;                                  /* buttons, inputs, spec tiles, pagination, segmented buttons */
    --r:      12px;                                 /* cards, tables, matte plates, segmented track, mini-cart */
    --r-lg:   16px;                                 /* image frames, wash cards, matte video cards, product cards */
    --r-xl:   24px;                                 /* hero frame, theatre panel, CTA panels */
    --r-pill: 100px;                                /* circles only: .cart-count, .flip-step-num, status dots */

    /* ---- Depth: ink-tinted, two layers, nothing else casts a shadow ---- */
    --sh-1: 0 1px 2px rgba(22,22,29,.04), 0 4px 12px rgba(22,22,29,.05);    /* raised: matte cards, segmented active */
    --sh-2: 0 2px 6px rgba(22,22,29,.05), 0 16px 40px rgba(22,22,29,.10);   /* floating: image frames, hovered product cards, mini-cart */
    --sh-3: 0 4px 10px rgba(22,22,29,.06), 0 32px 72px rgba(22,22,29,.14);  /* elevated: hero frame, modals, hovered framed image links */
    --sh-focus: 0 0 0 3px rgba(173,90,23,.22);                              /* input focus halo */
    --edge: inset 0 0 0 1px rgba(255,255,255,.08);                          /* the glass edge on image frames, via ::after */

    /* ---- Layout and motion ------------------------------------------- */
    --max:      1200px;                             /* text and grids */
    --max-wide: 1360px;                             /* theatre panel, wide image rows */
    --gutter:   clamp(20px, 4vw, 40px);             /* replaces the fixed 24px side padding */
    --nav-h:    72px;
    --sec-y:    clamp(72px, 8vw, 120px);            /* content sections */
    --sec-y-sm: clamp(40px, 5vw, 64px);             /* strips: logos, trust, breadcrumbs */
    --col-gap:  clamp(32px, 6vw, 80px);             /* text ↔ media column gap */
    --grid-gap: 24px;                               /* card grids */
    --ease:     cubic-bezier(.16,1,.3,1);
    --dur-1:    160ms;                              /* colour transitions */
    --dur-2:    260ms;                              /* shadow and panel transitions */
}

/* Theatre register — every dark surface in Nova. Components inside read the role tokens. */
/* .cat-resources left the register when it moved above the closing CTA band: it is a
   light section now (woocommerce.css), so it reads the default light role tokens. */
.flip-demo, .cta, .foot,
.cat-cta-band, .train-cta, .sg-contact, .cta-band, .theatre, .pdp-flipq--featured,
.about-cta, .setup-cta-band, .sh-cta, .spl-cta-card, .pdp-cta-band {
    --sur:    var(--navy);
    --sur-2:  var(--navy-2);
    --tx:     var(--w);
    --tx-2:   var(--w60);
    --tx-3:   var(--w50);
    --ln:     var(--w10);
    --ln-2:   var(--w20);
    --acc:    var(--orange);
    --acc-tx: var(--orange-hi);
    --focus:  var(--w);
}

/* ============================================
   RESET
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--ink-2);background:var(--w);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5,h6{font-family:var(--ff);font-weight:var(--fw-display);line-height:var(--lh-h3);letter-spacing:var(--ls-h2)}
h1{font-weight:var(--fw-hero);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2{line-height:var(--lh-h2)}

/* ============================================
   REVEAL
   ============================================ */
:where(html.js) .rv{opacity:1;transform:none;transition:none}
.rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}
.rv-d2{transition-delay:.24s}
.rv-d3{transition-delay:.36s}

/* ============================================
   BUTTONS
   ============================================ */
/* Single source of truth for all button styles.
   Components.css references these — do not duplicate there. */
/* Shared base (Delta §7.1). WooCommerce buttons ride on the same rule;
   their own rules in woocommerce.css carry only widths and variant colours. */
.btn,.woocommerce .button,#place_order,.checkout-button,.single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;font:600 var(--fs-btn)/1 var(--fb);letter-spacing:0;border-radius:var(--rs);border:1px solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);transform:none;box-shadow:none}
.btn:active,.woocommerce .button:active,#place_order:active,.checkout-button:active,.single_add_to_cart_button:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:focus-visible,.woocommerce .button:focus-visible,#place_order:focus-visible,.checkout-button:focus-visible,.single_add_to_cart_button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-sm,.nav-cta,li.product .btn{height:40px;padding:0 16px;font-size:.875rem}

/* The four variants (Delta §7.2) — colour changes only, never position */
.btn-glow{background:var(--orange);color:var(--w)}
.btn-glow:hover{background:var(--orange-lo)}
.btn-glow:active{background:var(--orange-lo)}
.btn-glow:focus-visible{outline-color:var(--focus);outline-offset:2px}

.btn-dark{background:var(--ink);color:var(--w)}
.btn-dark:hover{background:var(--ink-hi)}

.btn-ghost{background:transparent;border-color:var(--ln-2);color:var(--tx)}
.btn-ghost:hover{background:var(--sur-2);border-color:var(--tx-3)}

.btn-w{background:var(--w);color:var(--ink)}
.btn-w:hover{background:var(--mist)}

.btn[disabled],.btn.disabled,.btn[aria-disabled="true"],.woocommerce .button[disabled],.woocommerce .button.disabled{opacity:.45;pointer-events:none}
.btn.loading,.woocommerce .button.loading{opacity:.7}

/* Arrows: solid variants drop the trailing arrow; ghost buttons and text links keep it,
   and it nudges 2px on hover — the one permitted micro-movement (Delta §7.1, §7.7) */
.arr{width:16px;height:16px;flex-shrink:0;transition:transform var(--dur-1) var(--ease)}
.btn-glow .arr,.btn-dark .arr,.btn-w .arr{display:none}
/* 36 templates draw the arrow as a plain inline <svg> after the label (no .arr): last-child catches it on the solid variants; the search buttons keep their trailing magnifier */
.btn-glow > svg:last-child,.btn-dark > svg:last-child,.btn-w > svg:last-child{display:none}
.btn-glow.search-submit > svg:last-child,.btn-glow.nav-search-submit > svg:last-child{display:inline-block}
.btn-ghost:hover .arr,.btn-ghost:hover > svg:last-child{transform:translateX(2px)}
.btn-ghost > svg:last-child{transition:transform var(--dur-1) var(--ease)}

/* ============================================
   INPUTS (Delta §7.3) — one box for every field.
   Component rules keep only widths; theatre
   surfaces re-declare the role tokens.
   ============================================ */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],input[type="url"],textarea,select,
.nav-search-field,.mob-search-field,.search-hero-form .search-field,.error-404-search input{height:48px;padding:0 14px;font:400 1rem/1.4 var(--fb);color:var(--tx);background:var(--sur);border:1px solid var(--ln-2);border-radius:var(--rs);box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
textarea{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
::placeholder{color:var(--ink-4)}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="number"]:hover,input[type="search"]:hover,input[type="password"]:hover,input[type="url"]:hover,textarea:hover,select:hover{border-color:var(--tx-3)}
input[type="text"]:focus-visible,input[type="email"]:focus-visible,input[type="tel"]:focus-visible,input[type="number"]:focus-visible,input[type="search"]:focus-visible,input[type="password"]:focus-visible,input[type="url"]:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--tx);box-shadow:var(--sh-focus)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2316161D'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;padding-right:40px}
.form-row.woocommerce-invalid input,.form-row.woocommerce-invalid select,.form-row.woocommerce-invalid textarea{border-color:var(--err)}
.form-row label{display:block;margin-bottom:6px;font:500 var(--fs-caption)/1.4 var(--fb);color:var(--tx)}
.form-row .description,.ct-form-caption{font-size:.8125rem;color:var(--tx-3)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--orange);width:18px;height:18px;margin-right:4px}
.quantity .qty{width:72px;text-align:center}

/* Nav search: 40px, mist fill, no border until focus */
/* input.* so the 40px mist field outranks the input base above (input[type="search"] is 0,1,1) */
input.nav-search-field{height:40px;background:var(--mist);border-color:transparent}
.nav-search-field:focus-visible{border-color:var(--tx);box-shadow:var(--sh-focus)}
.nav-search-submit{height:40px;padding:0 16px;font-size:.875rem}

/* ============================================
   SEGMENTED CONTROL (Delta §7.5)
   ============================================ */
.sg-tab-strip,.se-view-toggle{display:inline-flex;gap:2px;padding:4px;background:var(--mist-2);border:0;border-radius:var(--r);width:fit-content}
.sg-tab-btn,.se-view-btn{height:36px;padding:0 14px;font:500 .875rem var(--fb);background:transparent;border:0;border-radius:var(--rs);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease);color:var(--ink-2)}
.sg-tab-btn:hover,.se-view-btn:hover{color:var(--ink)}
.sg-tab-btn.is-active,.sg-tab-btn[aria-selected="true"],.se-view-btn.is-active{background:var(--w);color:var(--ink);box-shadow:var(--sh-1)}

/* ============================================
   PAGINATION (Delta §7.6)
   ============================================ */
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span,.woocommerce-pagination ul li a,.woocommerce-pagination ul li span,.page-links span a,.blog-section .page-numbers{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:1px solid var(--line);border-radius:var(--rs);font:500 .875rem var(--fb);color:var(--ink-2);text-decoration:none;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.woocommerce nav.woocommerce-pagination ul li a:hover,.woocommerce-pagination ul li a:hover,.page-links span a:hover,.blog-section .page-numbers:hover{background:var(--mist);color:var(--ink-2);border-color:var(--line)}
.woocommerce nav.woocommerce-pagination ul li span.current,.woocommerce-pagination ul li span.current,.page-links .post-page-numbers.current,.blog-section .page-numbers.current{background:var(--ink);color:var(--w);border-color:var(--ink)}

/* ============================================
   LINKS (Delta §7.7)
   ============================================ */
.entry-content a,.faq-a-inner a,.page-content a,.woocommerce-privacy-policy-text a,.pdp-tabs-content a{color:var(--acc-tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;border:0;transition:color var(--dur-1) var(--ease)}
.entry-content a:hover,.faq-a-inner a:hover,.page-content a:hover,.woocommerce-privacy-policy-text a:hover,.pdp-tabs-content a:hover{color:var(--tx);border:0}
.post-card-more,.sr-more,.del-contact-link,.lbp-video-cta,.lbp-empty-link,.pdp-sticky-link,.cat-resource-link,.mini-cart-shop-link,.woocommerce-LostPassword a{display:inline-flex;align-items:center;gap:6px;font:500 .9375rem var(--fb);color:var(--tx);text-decoration:none;transition:color var(--dur-1) var(--ease)}
.post-card-more:hover,.sr-more:hover,.del-contact-link:hover,.lbp-video-cta:hover,.lbp-empty-link:hover,.pdp-sticky-link:hover,.cat-resource-link:hover,.mini-cart-shop-link:hover,.woocommerce-LostPassword a:hover{color:var(--tx);gap:6px}
.post-card-more:hover .arr,.sr-more:hover .arr,.del-contact-link:hover .arr,.cat-resource-link:hover .arr,.cat-resource-card:hover .arr{transform:translateX(2px)}

/* ============================================
   TAG (Section eyebrow)
   ============================================ */
.tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font:500 var(--fs-eyebrow)/1.4 var(--fb);letter-spacing:var(--ls-eyebrow);color:var(--tx-3)}
/* Eyebrows are grey (Delta §2 rule 6, §10.13). Some templates still colour them inline — the eyebrow-tag component's
   teal variant, the footer's style="color:var(--orange)" and the category editorials — and markup is out of scope,
   so this is the one way to reach them. Resolves to --w50 inside the theatre register. */
.tag[style]{color:var(--tx-3) !important}


/* ============================================
   CHIPS (Delta §7.4) — one recipe applied to the
   existing chip selectors; no new markup classes.
   Variants set only background + colour below.
   ============================================ */
.partner-badge,.ct-status,.ct-toronto,.train-free-pill,.train-consult-chip,.about-craft-badge,.del-city-pill,.flip-status,.fl-loc,.sr-group-count,
.onsale,.lb-sale-save,.woocommerce div.product p.stock,.pdp-summary p.stock,.cat-product-tag,.cat-product-status,.cat-compare-sub,.shop-chapter-pill .num,.pdp-use-cap,
.se-card-tag,.se-card-oos-tag,.se-card-subcat,.se-list-oos-tag,.se-badge,.se-filter-count,.lbp-teaser-kind,.lbp-file-chip,.acc-status,.woocommerce-MyAccount-orders mark.order-status,.order-detail-meta mark.order-status,
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__link::after{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 20px;font:600 .75rem/1 var(--fb);letter-spacing:.01em;text-transform:none;border-radius:var(--r-xs);white-space:nowrap;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.partner-badge svg,.ct-status svg,.ct-toronto svg,.train-free-pill svg,.train-consult-chip svg,.about-craft-badge svg,.del-city-pill svg,.flip-status svg,.fl-loc svg,.lb-sale-save svg,.woocommerce div.product p.stock svg,.cat-product-status svg,.se-badge svg{width:14px;height:14px;flex-shrink:0}

/* ============================================
   FRAMES + MATTE CARDS (Delta §5.2, §6 variant 5)
   Photos are framed objects on the page: radius,
   neutral shadow, 1px inner glass edge. White-
   background device videos sit on a matte plate.
   ============================================ */
.hero-img,.prod-img,.partner-img,.cases-img,.cat-product-dark .cat-product-frame,.cat-product-light .cat-product-frame,.pdp-gallery .woocommerce-product-gallery,.pdp-use-frame,.pdp-install-media,.pdp-glass-img,.single-thumbnail,.setup-step-img,.about-hero-img,.train-hero-img,.train-free-card,.eq-hero-banner-img,.eq-row-media,.sg-hero-media,.sg-step-media,.sg-diagram-img,.spl-action-media,.spl-feature-media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy);box-shadow:var(--sh-2);border:0}
.hero-img{border-radius:var(--r-xl);box-shadow:var(--sh-3)}
.hero-img::after,.prod-img::after,.partner-img::after,.cases-img::after,.cat-product-dark .cat-product-frame::after,.cat-product-light .cat-product-frame::after,.pdp-gallery .woocommerce-product-gallery::after,.pdp-use-frame::after,.pdp-install-media::after,.pdp-glass-img::after,.single-thumbnail::after,.setup-step-img::after,.about-hero-img::after,.train-hero-img::after,.train-free-card::after,.eq-hero-banner-img::after,.eq-row-media::after,.sg-hero-media::after,.sg-step-media::after,.sg-diagram-img::after,.spl-action-media::after,.spl-feature-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--edge);pointer-events:none;z-index:2}
/* page-template photos that are bare <img> elements: radius + neutral shadow (no container for the glass edge) */
.about-why-media img,.about-craft-media img,.about-beyond-media img,.train-consult-media img{border-radius:var(--r-lg);box-shadow:var(--sh-2)}
/* theatre register: shadow off, hairline on */
.cta [class*="-img"],.foot [class*="-img"],.cat-resources [class*="-img"],.theatre [class*="-img"]{box-shadow:none;border:1px solid var(--ln)}
/* framed image links deepen the shadow on hover (Delta §7.8) */
.prod-img{transition:box-shadow var(--dur-2) var(--ease)}
.prod-img:hover{box-shadow:var(--sh-3)}
/* matte plates */
.what-vis-frame,.setup-diagram,.diff-img,.flip-frame{background:var(--w);border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:var(--r-lg);padding:24px;overflow:hidden}
.flip-demo .flip-frame{box-shadow:none;border:0}
@media(max-width:768px){.what-vis-frame,.setup-diagram,.diff-img,.flip-frame{padding:16px}}

/* ============================================
   LIGHT SECTION
   ============================================ */
.light{background:var(--mist);color:var(--ink-2)}

/* Gradient text utilities */
.gl{color:var(--orange)}
.gl-t{color:var(--teal)}
/* Delta §8.4: the accent word lives only in a page h1; h2/h3 accents (training, delivery, contact, equipment, account) render as the heading */
h2 .gl,h3 .gl{color:inherit}

/* ============================================
   NAVIGATION
   ============================================ */
.nav{position:fixed;top:0;width:100%;z-index:1000;transition:background .4s var(--ease),border-color .25s var(--ease);height:var(--nav-h);padding:0 var(--gutter);background:var(--w);border-bottom:1px solid transparent;box-shadow:none} /* transparent border always present: no 1px layout shift, no lingering hairline on fast scroll-up */
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}

.nav-in{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:var(--nav-h)}

.logo{font-family:var(--fb);font-weight:600;font-size:var(--fs-body-lg);display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo-m{width:36px;height:36px;background:var(--orange);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-body);color:var(--w);}

.nav-l{display:none;list-style:none;gap:32px;align-items:center}
.nav-l > li{position:relative;display:flex;align-items:center;height:var(--nav-h)}
.nav-l a{position:relative;font:500 .9375rem var(--fb);color:var(--ink-2);transition:color var(--dur-1) var(--ease)}
.nav-l a:hover{color:var(--ink)}
.nav-l .current-menu-item > a,.nav-l .current_page_item > a,.nav-l a[aria-current="page"],.nav-l .nav-ancestor > a{color:var(--ink)}

/* Parent item with a dropdown: label plus chevron, panel hangs off the bar.
   The <li> is the full nav height, so the panel meets it with no hover gap. */
.nav-has-sub > a{display:inline-flex;align-items:center;gap:6px}
.nav-sub-arrow{width:12px;height:12px;flex-shrink:0;opacity:.6;transition:transform var(--dur-1) var(--ease)}
.nav-has-sub:hover > a .nav-sub-arrow,.nav-has-sub:focus-within > a .nav-sub-arrow{transform:rotate(180deg);opacity:1}

/* Dropdown panel. Opens on hover and on :focus-within, so it needs no JS, and
   visibility:hidden keeps its links out of the tab order while it is closed. */
.nav-sub{position:absolute;top:100%;left:-20px;z-index:20;display:flex;flex-direction:column;gap:2px;min-width:250px;margin:0;padding:8px;list-style:none;background:var(--w);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.nav-has-sub:hover > .nav-sub,.nav-has-sub:focus-within > .nav-sub{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s}
.nav-sub li{display:block}
.nav-sub a{display:block;padding:10px 12px;border-radius:var(--rs);font:500 .9375rem/1.35 var(--fb);color:var(--ink-2);white-space:nowrap;transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.nav-sub a:hover{color:var(--ink);background:var(--mist)}
.nav-sub .current-menu-item > a,.nav-sub a[aria-current="page"]{color:var(--ink);background:var(--mist)}
.nav-sub a:focus-visible{outline-offset:-2px}

.nav-cta{display:none}

.mob-btn{display:flex;flex-direction:column;gap:5px;padding:6px;z-index:10}
.mob-btn span{display:block;width:24px;height:2px;border-radius:2px;transition:.3s;background:var(--ink)}

.mob-menu{display:none;position:fixed;inset:0;z-index:999;padding:100px 32px 32px;flex-direction:column;gap:8px;background:var(--w);border-top:1px solid var(--line)}
.mob-menu.active{display:flex}
.mob-menu a{padding:16px 0;font:500 1.125rem/1.4 var(--fb);color:var(--ink);border-bottom:1px solid var(--line);transition:color var(--dur-1) var(--ease)}
.mob-menu a:hover{color:var(--ink-2)}
/* Sub-menu group: the parent keeps its row, its children sit indented behind a
   rail so the categories read as belonging to it. -8px cancels the column gap. */
.mob-menu a.mob-parent{border-bottom-color:transparent;padding-bottom:6px}
.mob-sub{display:flex;flex-direction:column;margin-top:-8px;padding-left:18px;border-left:1px solid var(--line-2)}
.mob-menu .mob-sub a{padding:13px 0;font:400 1.0625rem/1.4 var(--fb);color:var(--ink-2)}
.mob-menu .mob-sub a:hover,.mob-menu .mob-sub a[aria-current="page"]{color:var(--ink)}
.mob-close{position:absolute;top:28px;right:28px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-val);color:var(--ink-2)}

@media(min-width:900px){
    .nav-l{display:flex}
    .nav-cta{display:inline-flex}
    .mob-btn{display:none}
}

/* ============================================
   NAV CART ICON
   ============================================ */
.nav-cart{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;color:var(--ink-2);transition:color var(--dur-1) var(--ease);background:none;border-radius:0}
.nav-cart:hover{color:var(--ink)}
.nav-cart svg{width:22px;height:22px}
.cart-count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;transform:translate(35%,-35%);pointer-events:none;border-radius:var(--r-pill);background:var(--orange);color:var(--w);font:600 .6875rem/18px var(--fb)}
.cart-count:empty{display:none}

/* ============================================
   HERO — Cinematic
   ============================================ */
.hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 80px}




.hero-in{max-width:var(--max);margin:0 auto;width:100%;display:grid;align-items:center;position:relative;z-index:1;grid-template-columns:1fr;gap:var(--col-gap)}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-eyebrow)/1.4 var(--fb);letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin-bottom:20px}


.hero h1{font-size:var(--fs-hero);color:var(--tx);max-width:14ch;margin-bottom:24px}
.hero h1 .gl{color:var(--orange)}

.hero-sub{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:50ch;margin-bottom:32px}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Trust strip. Three things every board includes, so they are worth reading: the check
   marks are the same teal ticks the spec tables use for "Included", and the labels sit at
   body size in --tx-2. It replaced a 14px grey row separated by hairlines (Delta §8.4),
   which was quiet enough to miss (Chris, 2026-09-21). Shared with the training hero. */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:40px;font-family:var(--fb);line-height:1.4}
.hero-trust-label{font-size:var(--fs-eyebrow);font-weight:500;color:var(--tx-3)}
.hero-trust-items{display:flex;flex-wrap:wrap;gap:12px 28px}
.hero-trust-item{display:flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:500;color:var(--tx-2)}
.hero-trust-item svg{display:block;width:18px;height:18px;flex-shrink:0;color:var(--teal)}

/* Hero image — cinematic crop */
.hero-vis{position:relative;max-width:560px;margin-left:auto;width:100%}

.hero-img{aspect-ratio:5 / 6}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}


/* Floating elements */
.fl{position:absolute;z-index:2}

.fl-loc{background:var(--w);color:var(--ink);box-shadow:var(--sh-1);top:16px;right:16px}
.fl-loc svg{color:var(--ink-3)}

.fl-card{left:-20px;bottom:32px;background:var(--w);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-2)}
.fl-card-l{font:500 var(--fs-spec)/1.4 var(--fb);letter-spacing:var(--ls-spec);color:var(--ink-3);margin-bottom:2px}
.fl-card-v{font:600 1rem/1.3 var(--ff);color:var(--ink)}
.fl-card-v .ac{color:var(--teal)}

@media(min-width:900px){
    .hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}

/* The one orchestrated moment (Delta §9.1): hero children rise 10px over 600ms, staggered 60ms; the frame follows at .15s over 800ms. Runs once on load. */
@keyframes nova-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-content > *{animation:nova-rise 600ms var(--ease) both}
.hero-content > :nth-child(2){animation-delay:.06s}
.hero-content > :nth-child(3){animation-delay:.12s}
.hero-content > :nth-child(4){animation-delay:.18s}
.hero-content > :nth-child(5){animation-delay:.24s}
.hero-vis{animation:nova-rise 800ms var(--ease) .15s both}
@media(max-width:768px){.fl-card{left:12px;bottom:12px}}


/* ============================================
   CLIENT LOGOS
   ============================================ */
.logos{background:var(--w);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sec-y-sm) var(--gutter)}
.logos-in{max-width:var(--max);margin:0 auto}
.logos-label{text-align:center;margin-bottom:clamp(28px,3vw,40px);font:500 var(--fs-eyebrow)/1.4 var(--fb);letter-spacing:var(--ls-eyebrow);color:var(--tx-3)}
/* Eight logos, 4 x 2 on desktop and 2 x 4 on phones. Each image is a 240x88 box at 2x with the
   logo already sized and flattened to one colour (template-parts/homepage/client-logos.php), so
   the grid only scales boxes down; opacity sets the grey. */
.logos-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(16px,3vw,48px);align-items:center;justify-items:center}
.logo-item{width:100%;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent}
.logo-item img{display:block;width:100%;max-width:240px;height:auto;opacity:.65}
@media(max-width:700px){.logos-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================
   WHAT IS A LIGHTBOARD (Light section)
   ============================================ */
.what{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.what-in{max-width:var(--max);margin:0 auto;display:grid;align-items:center;grid-template-columns:1fr;gap:var(--col-gap)}

.what h2{font-size:var(--fs-h2);margin-bottom:16px;color:var(--tx);max-width:22ch}
.what-p{font-size:var(--fs-body-lg);line-height:var(--lh-body);margin-bottom:32px;color:var(--tx-2);max-width:520px}

.what-feats{display:grid;gap:12px;margin-top:32px}
.wf{display:flex;align-items:center;gap:14px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--rs);padding:16px 18px}
.wf-i{width:40px;height:40px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--orange-wash);color:var(--orange-lo)}
.wf-i svg{width:20px;height:20px}
.wf span{font-weight:500;font-size:var(--fs-body);color:var(--tx)}

/* Video result showcase — single featured image */
.what-vis-showcase{position:relative;max-width:600px;width:100%;margin-left:auto}
.what-vis-frame{position:relative}
.what-vis-frame img,.what-vis-frame video{width:100%;height:auto;display:block}
.what-vis-caption{text-align:center;margin-top:24px}
.what-vis-caption h4{font-family:var(--ff);font-size:var(--fs-h4);font-weight:600;margin-bottom:6px;color:var(--tx)}
.what-vis-caption p{font-size:var(--fs-caption);color:var(--ink-3);line-height:1.6;max-width:400px;margin:0 auto}
/* Play indicator overlay */
.what-vis-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease);cursor:pointer;z-index:2}
.what-vis-play svg{width:24px;height:24px;color:var(--w);margin-left:3px}

@media(min-width:900px){
    .what-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ============================================
   INTERACTIVE FLIP DEMO
   ============================================ */
.flip-demo{background:transparent;padding:var(--sec-y) var(--gutter);color:var(--tx-2)}


.flip-demo-in{max-width:var(--max-wide);margin:0 auto;padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px);background:var(--navy);border-radius:var(--r-xl);color:var(--tx-2);display:grid;grid-template-columns:1fr;gap:var(--col-gap);align-items:center}

.flip-demo h2{font-size:var(--fs-h2);margin-bottom:16px;color:var(--tx);max-width:22ch}
.flip-demo-p{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:520px;margin-bottom:0}

/* Steps indicator */
.flip-steps{display:grid;gap:12px;margin-top:28px}
.flip-step{display:flex;align-items:flex-start;gap:14px;background:var(--navy-2);border:1px solid var(--ln);border-radius:var(--r);padding:16px 18px;transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.flip-step.active{border-color:var(--w20)}
.flip-step-num{border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fb);font-weight:600;width:24px;height:24px;font-size:.75rem;border:1px solid var(--w20);color:var(--w60);background:transparent;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.flip-step.active .flip-step-num{border-color:var(--orange-hi);color:var(--orange-hi)}

.flip-step-text{font-size:var(--fs-caption);font-weight:500;color:var(--w60);line-height:1.5}
.flip-step:not(.active) .flip-step-text{color:var(--w60)}
.flip-step.active .flip-step-text{color:var(--w)}

/* The interactive frame */
.flip-visual{position:relative;max-width:560px;width:100%;margin-left:auto}
/* White matte: the raw phone footage is shot against white, so the frame is a
   white card with padding — the video's background blends into deliberate
   white space instead of clashing with a dark frame (Chris, 2026-07-17). */
.flip-frame{position:relative}
.flip-frame img,.flip-frame video{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
/* The bundled footage is a FINISHED (readable) video, so the demo starts
   mirrored to represent the raw recording; pressing Mirror Flip un-mirrors
   it. Legacy img mapping unchanged (raw-looking stills start normal). */
.flip-frame video{transform:scaleX(-1)}
.flip-frame.flipped video{transform:scaleX(1)}
.flip-frame.flipped img{transform:scaleX(-1)}

/* Status bar */
.flip-status{position:absolute;z-index:3;top:12px;left:12px;background:var(--mist-2);color:var(--ink-2);transition:color var(--dur-1) var(--ease)}
.flip-status.mirrored{color:var(--ink-2)}
.flip-status.original{color:var(--ink-2)}
.flip-status-dot{width:8px;height:8px;border-radius:var(--r-pill);transition:background .5s}
.flip-status .flip-status-dot{background:var(--teal)}

/* Mirror button */
.flip-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;width:100%;cursor:pointer;position:relative;overflow:hidden;height:48px;padding:0 22px;font:600 var(--fs-btn)/1 var(--fb);border:1px solid transparent;border-radius:var(--rs);background:var(--orange);color:var(--w);transition:background-color var(--dur-1) var(--ease)}

.flip-btn:hover{background:var(--orange-lo)}

.flip-btn svg{width:18px;height:18px;transition:transform var(--dur-2) var(--ease)}
.flip-btn.is-flipped svg{transform:scaleX(-1)}
.flip-btn span{position:relative;z-index:1;display:flex;align-items:center;gap:10px}

@media(min-width:900px){
    .flip-demo-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ============================================
   PRODUCT SHOWCASE — Full-width, grand
   Each product gets its own hero-scale section
   ============================================ */
.prod{padding:var(--sec-y) var(--gutter)}

/* Alternating backgrounds */
.prod.dark{background:var(--mist)}
.prod.light{background:var(--w);color:var(--ink-2)}

.prod-in{max-width:var(--max);margin:0 auto;display:grid;align-items:center;position:relative;z-index:1;grid-template-columns:1fr;gap:var(--col-gap)}

/* Glow behind dark product sections */




.prod-label{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;line-height:1.4;letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin-bottom:16px;display:inline-block}
.prod.dark .prod-label{color:var(--tx-3)}
.prod.light .prod-label{color:var(--tx-3)}

.prod h2{font-size:var(--fs-h2);margin-bottom:20px;color:var(--tx);max-width:22ch}
.prod.dark h2{color:var(--tx)}
.prod.light h2{color:var(--tx)}

.prod-desc{font-size:var(--fs-body-lg);line-height:var(--lh-body);margin-bottom:36px;color:var(--tx-2);max-width:520px}
.prod.dark .prod-desc{color:var(--tx-2)}
.prod.light .prod-desc{color:var(--tx-2)}

/* Product specs */
.prod-specs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:40px;gap:12px}

.prod-spec{background:var(--sur);border:1px solid var(--ln);border-radius:var(--rs);padding:16px 18px}




.prod-spec-val{font-family:var(--ff);font-size:var(--fs-val);font-weight:var(--fw-display);margin-bottom:2px;color:var(--tx);line-height:1.1;letter-spacing:-.01em}



.prod-spec-lab{font-size:var(--fs-spec);letter-spacing:0;font-weight:500;line-height:1.4;color:var(--tx-3)}



/* Product image — Hero scale */
.prod-img{aspect-ratio:4 / 5}




.prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-visual{max-width:560px;width:100%;margin-left:auto}
.prod-in.flip-order .prod-visual{margin-left:0;margin-right:auto}

/* "Included" badge */
.prod-incl{display:flex;align-items:center;gap:10px;background:var(--teal-wash);color:var(--teal-lo);border:0;border-radius:var(--rs);padding:14px 16px;font:500 .9375rem/1.5 var(--fb);margin:20px 0 28px}


.prod-incl svg{width:18px;height:18px;flex-shrink:0;color:var(--teal)}

@media(min-width:900px){
    .prod-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .prod-in.flip-order .prod-content{order:2}
    .prod-in.flip-order .prod-visual{order:1}
}

/* ============================================
   NEEWER PARTNERSHIP
   ============================================ */
.partner{background:var(--purple-wash);padding:var(--sec-y) var(--gutter)}


.partner-in{max-width:var(--max);margin:0 auto;display:grid;align-items:center;position:relative;z-index:1;grid-template-columns:1fr;gap:var(--col-gap)}

.partner-content{display:flex;flex-direction:column;align-items:flex-start}

.partner-logo{display:flex;align-items:center;justify-content:center;margin-bottom:24px;background:var(--w);border:1px solid var(--line);border-radius:var(--rs);padding:10px 16px}
.partner-logo img{height:22px;width:auto;object-fit:contain;filter:none}

.partner-badge{background:var(--purple-wash);color:var(--purple-lo);margin-bottom:24px;width:fit-content}
.partner-badge svg{width:14px;height:14px}

.partner h2{font-size:var(--fs-h2);margin-bottom:16px;color:var(--tx);max-width:22ch}
.partner-p{line-height:var(--lh-body);margin-bottom:36px;font-size:var(--fs-body-lg);color:var(--tx-2);max-width:520px}

.partner-stats{flex-wrap:wrap;display:flex;gap:40px;margin-top:32px}
.partner-stat{text-align:left}
.partner-stat-val{font-family:var(--ff);font-size:var(--fs-stat);font-weight:var(--fw-display);margin-bottom:2px;color:var(--tx);line-height:1.1;letter-spacing:-.015em}
.partner-stat-lab{font-size:var(--fs-spec);letter-spacing:0;font-weight:500;line-height:1.4;color:var(--purple-lo)}

.partner-img{aspect-ratio:4 / 5}
.partner-img img{width:100%;height:100%;object-fit:cover;display:block}
.partner-img{max-width:560px;width:100%;margin-left:auto}

@media(min-width:900px){
    .partner-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ============================================
   STUDIO SETUP
   ============================================ */
.setup{background:var(--w);padding:var(--sec-y) var(--gutter)}


.setup-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}

.setup-top{display:grid;grid-template-columns:1fr;align-items:end;gap:16px;text-align:left;margin:0 0 48px}
.setup-top h2{font-size:var(--fs-h2);color:var(--tx);max-width:22ch;margin-bottom:0}
.setup-top p{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:58ch}

.setup-grid{display:grid;grid-template-columns:1fr;gap:var(--col-gap);align-items:center}

/* Diagram */
.setup-diagram{display:flex;flex-direction:column;align-items:center;justify-content:center}
.setup-diagram img{width:100%;height:auto;object-fit:contain}
.setup-diagram video{border-radius:var(--rs);width:100%;height:auto;max-width:100%;object-fit:contain}
.setup-diagram-cta{margin-top:20px;align-self:flex-start}

/* Equipment list */
.setup-equip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}

.setup-item{background:var(--sur-2);border:0;border-radius:var(--r-lg);padding:28px}

.setup-item-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;margin-bottom:12px;width:40px;height:40px}
.setup-item-icon svg{width:20px;height:20px}

.setup-item-icon.o{background:var(--orange-wash);color:var(--orange-lo)}
.setup-item-icon.t{background:var(--teal-wash);color:var(--teal)}
.setup-item-icon.p{background:var(--purple-wash);color:var(--purple)}
.setup-item-icon.w{background:var(--mist-2);color:var(--ink-2)}

.setup-item h4{font-family:var(--ff);font-size:var(--fs-h4);font-weight:600;margin-bottom:2px;color:var(--tx)}
.setup-item p{font-size:var(--fs-caption);color:var(--tx-2);line-height:1.5}

@media(min-width:900px){
    .setup-grid{grid-template-columns:1fr 1fr}
    .setup-equip{grid-template-columns:repeat(2,1fr)}
}

/* ============================================
   USE CASES
   ============================================ */
.cases{background:var(--w);padding:var(--sec-y) var(--gutter)}

.cases-in{max-width:var(--max);margin:0 auto}

.cases-top{display:grid;grid-template-columns:1fr;align-items:end;gap:16px;text-align:left;margin:0 0 48px}
.cases-top h2{font-size:var(--fs-h2);color:var(--tx);max-width:22ch;margin-bottom:0}
.cases-top p{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:58ch}

.cases-layout{display:grid;grid-template-columns:1fr;gap:var(--col-gap);align-items:center}

/* Featured image — vertical */
.cases-img{aspect-ratio:4 / 5} /* portrait like the hero — sides crop via cover */
.cases-img img{width:100%;height:100%;display:block;object-fit:cover}

.cases-grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}

.case{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:20px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r);padding:24px 26px}

.case-num{display:none}

.case-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px}
.case-icon svg{width:20px;height:20px}
.case-icon.o{background:var(--orange-wash);color:var(--orange-lo)}
.case-icon.t{background:var(--teal-wash);color:var(--teal)}
.case-icon.p{background:var(--purple-wash);color:var(--purple)}
.case-icon.d{background:var(--mist-2);color:var(--ink-2)}

.case-text h3{margin-bottom:6px;font-size:var(--fs-h4);color:var(--tx)}
.case-text p{font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--tx-2)}

/* Two-column intros (Delta §10.0). The markup carries an eyebrow the spec's two-child grid does not: stacked, its
   4px + the 16px grid gap keep the usual 20px above the heading. From 1024px the setup intro puts the eyebrow and
   heading in the left column and the lede across both rows on the right, bottom-aligned; row 1 is 1fr so a taller
   lede grows the eyebrow's row, never the gap under it. The use-cases intro stays stacked and heads its card column
   instead (1.0.9, below). */
.cases-top .tag,.setup-top .tag{margin-bottom:4px}
@media(min-width:768px){.cases-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){
    /* Use cases (1.0.9): the intro sits at the top of the card column instead of across the section. As a two-column
       intro its lede ran on a 1fr 1fr split while the cards below sit on .72fr 1fr, so it started 92px right of them,
       and with the cards centred on the image (1.0.6) it hung ~150px above them. .cases-layout steps aside
       (display:contents) so the image, intro and cards share one grid: the image spans every row, the intro and then
       the cards stack on the right. The two 1fr rows centre that column against the image; when the column is the
       taller one they collapse to 0 and the image centres instead, the 1.0.6 rule in both directions. The PDP
       use-cases module (template-parts/pdp/modules/use-cases.php) shares this layout. */
    .cases-in{display:grid;grid-template-columns:.72fr 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:var(--col-gap)}
    .cases-layout{display:contents}
    .cases-img{grid-column:1;grid-row:1 / -1;align-self:center;position:sticky;top:calc(var(--nav-h) + 24px)}
    .cases-top{grid-column:2;grid-row:2}
    .cases-grid{grid-column:2;grid-row:3;grid-template-columns:1fr 1fr}
    .setup-top{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:20px var(--col-gap)}
    .setup-top .tag{grid-column:1;grid-row:1;margin-bottom:0}
    .setup-top h2{grid-column:1;grid-row:2}
    .setup-top p{grid-column:2;grid-row:1 / span 2}
}

/* ============================================
   DIFFERENTIATOR (Low-Iron)
   ============================================ */
.diff{background:var(--mist);padding:var(--sec-y) var(--gutter)}


.diff-in{max-width:var(--max);margin:0 auto;display:grid;align-items:center;position:relative;z-index:1;grid-template-columns:1fr;gap:var(--col-gap)}

.diff h2{font-size:var(--fs-h2);margin-bottom:16px;color:var(--tx);max-width:22ch}
.diff h2 .gl-t{color:var(--teal)}

.diff-p{line-height:var(--lh-body);font-size:var(--fs-body-lg);color:var(--tx-2);max-width:520px;margin-bottom:0}

.diff-list{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px}
.diff-i{display:flex;align-items:center;gap:12px;background:var(--sur);border:1px solid var(--ln);padding:16px 18px;border-radius:var(--r)}
.diff-ck{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--teal-wash);color:var(--teal)}
.diff-ck svg{width:18px;height:18px;color:var(--teal)}
.diff-i span{font-weight:500;font-size:var(--fs-body);color:var(--tx)}

/* White matte (matches .flip-frame): the MacBook clip sits on white. */
.diff-img img,.diff-img video{width:100%;height:auto;display:block}
.diff-img{max-width:540px;width:100%;margin-left:auto}

@media(min-width:768px){.diff-list{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.diff-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ============================================
   TRAINING CTA
   ============================================ */
.cta{background:var(--navy);padding:var(--sec-y) var(--gutter);text-align:left;border-top:none}

.cta-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;grid-template-areas:"h" "p" "btn";gap:16px;align-items:center;justify-items:start}
.cta h2{font-size:var(--fs-h2);grid-area:h;color:var(--tx);max-width:20ch;margin-bottom:0}
.cta p{font-size:var(--fs-body-lg);line-height:var(--lh-body);grid-area:p;color:var(--tx-2);max-width:52ch;margin-bottom:0}
.cta-in .btn{grid-area:btn;align-self:center}
@media(min-width:768px){.cta-in{grid-template-columns:1.2fr auto;grid-template-areas:"h btn" "p btn";column-gap:var(--col-gap);row-gap:12px}}

/* ============================================
   FOOTER
   ============================================ */
.foot{background:var(--navy);padding:0 var(--gutter);border-top:1px solid var(--w10)}
.foot-in{max-width:var(--max);margin:0 auto}

.foot-top{display:grid;grid-template-columns:1fr;gap:var(--col-gap);padding:var(--sec-y) 0 64px}

.foot-head h2{font-size:var(--fs-h2);margin-bottom:16px;color:var(--tx);max-width:22ch}
.foot-head p{font-size:var(--fs-body);line-height:var(--lh-body);max-width:400px;color:var(--tx-2)} /* was --w20: unreadable body text (contrast pass 2026-07-16; --w60 = the PDP short-desc grey) */

.foot-contact{display:flex;flex-direction:column;gap:0}
.foot-ci{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.foot-ci-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;background:var(--navy-3);border:1px solid var(--w10)}
.foot-ci-icon svg{width:20px;height:20px;color:var(--orange-hi)}
.foot-ci-text strong{display:block;margin-bottom:2px;font:500 var(--fs-spec)/1.4 var(--fb);color:var(--tx-3)}
.foot-ci-text span{color:var(--tx);font-size:var(--fs-body)}
.foot-ci-text a{color:var(--tx)}
.foot-ci-text a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

.foot-bot{border-top:1px solid var(--w10);padding:24px 0;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.foot-logo{font-family:var(--fb);font-weight:600;font-size:var(--fs-body);display:flex;align-items:center;gap:8px;color:var(--tx)} /* wordmark matches the white logo */
.foot-logo-m{width:26px;height:26px;background:var(--orange);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-spec);color:var(--w)}
.foot-meta{font-size:var(--fs-caption);color:var(--tx-3)}

/* Footer links (1.0.16): shop, guides, company, policies. Every item is a link, so the hover is allowed. Titles match .foot-ci-text strong. */
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;padding:48px 0;border-top:1px solid var(--w10)}
.foot-links-title{margin:0 0 14px;font:500 var(--fs-spec)/1.4 var(--fb);color:var(--tx-3)}
.foot-links ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.foot-links a{font-size:var(--fs-caption);line-height:1.5;color:var(--tx-2);transition:color var(--dur-1) var(--ease)}
.foot-links a:hover{color:var(--tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

@media(min-width:768px){
    .foot-top{grid-template-columns:1fr 1fr}
    .foot-links{grid-template-columns:repeat(4,minmax(0,1fr))}
    .foot-bot{flex-direction:row;justify-content:space-between;text-align:left}
}

/* Two-column media sections stack under 900px: media first only in .what (Delta §10.0); the theatre panel is inset 12px at --r-lg under 768px (§5.3) */
@media(max-width:899px){
    .what-vis-showcase{order:-1;margin-left:0}
    .cases-img{order:1;max-width:560px}
    .prod-visual,.partner-img,.flip-visual,.diff-img{margin-left:0}
}
@media(max-width:768px){
    .flip-demo{padding-left:12px;padding-right:12px}
    .flip-demo-in{border-radius:var(--r-lg)}
}

/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */

/* Global catch-all — :focus-visible so mouse users are unaffected */
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Nav links */
.nav-link:focus-visible,.nav-cta:focus-visible{outline-offset:4px}

/* Post cards, archive cards — focus ring on the title link */
.post-card-title a:focus-visible,.post-card-more:focus-visible{outline-offset:3px}

/* Post navigation */
.post-nav-link:focus-visible{outline-offset:4px;border-radius:var(--r)}

/* FAQ question button — custom focus to complement the open/close state */
.faq-q:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:2px}

/* Pagination */
.blog-section .page-numbers:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible,
.woocommerce nav.woocommerce-pagination ul li span:focus-visible{outline-offset:3px}

/* WooCommerce form inputs use border+shadow instead of outline — keep outline suppressed */
.woocommerce input:focus,.woocommerce textarea:focus,.woocommerce select:focus,
.contact-form input:focus,.contact-form textarea:focus{outline:none}
/* Checkboxes and radios have no border+shadow ring, so keyboard focus keeps the outline */
.woocommerce input[type="checkbox"]:focus-visible,.woocommerce input[type="radio"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ============================================
   SCREEN READER UTILITY
   ============================================ */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================
   SKIP LINK (Accessibility)
   ============================================ */
/* position:fixed keeps it anchored to the viewport regardless of scroll position */
.skip-link{position:fixed;top:-48px;left:0;background:var(--orange);color:var(--w);padding:10px 20px;z-index:10000;border-radius:0 0 var(--rs) 0;transition:top .2s var(--ease);font:600 var(--fs-caption)/1.4 var(--fb)}
.skip-link:focus,.skip-link:focus-visible{top:0;outline:2px solid var(--w);outline-offset:2px}


/* ============================================
   BLOG & PAGES
   ============================================ */

/* ---------- Page Hero (page.php) ---------- */
.page-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left}
.page-hero-in{margin:0 auto;max-width:720px}
.page-hero .tag{margin-bottom:16px}
.page-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);margin:0;max-width:14ch}

/* ---------- Page Content (page.php) ---------- */
.page-content{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.page-content-in{max-width:720px;margin:0 auto}

/* ---------- Archive / Single Hero (shared) ---------- */
.archive-hero,.single-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px}
.archive-hero-in,.single-hero-in{max-width:var(--max);margin:0 auto}
.archive-hero .tag,.single-hero .tag{margin-bottom:16px}
.archive-hero h1,.single-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);margin:0 0 20px;max-width:14ch}
.archive-hero-desc{font-family:var(--fb);font-size:var(--fs-body-lg);color:var(--tx-2);line-height:var(--lh-body);margin:0;max-width:52ch}

/* ---------- Single Post Hero ---------- */
.single-hero{text-align:left}
.single-hero-in{max-width:720px}
.single-meta{font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx-3);margin-top:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.single-meta .posted-on time,.single-meta .byline a{color:var(--tx-2)}
.single-meta .byline a:hover{color:var(--tx)}
.single-meta .read-time{color:var(--tx-3)}

/* ---------- Single Post Content ---------- */
.single-content{background:var(--w);padding:var(--sec-y) var(--gutter);border-top:1px solid var(--line)}
.single-content-in{max-width:720px;margin:0 auto}

/* Featured image — light-section floating shadow */
.single-thumbnail{margin-bottom:48px}
.single-thumbnail img{width:100%;height:auto;display:block}

/* ---------- Entry Content (prose) ---------- */
.entry-content,.page-content-in{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body-lg);color:var(--tx-2)}
.entry-content h2,.entry-content h3,.entry-content h4,.page-content-in h2,.page-content-in h3,.page-content-in h4{font-family:var(--ff);font-weight:var(--fw-display);color:var(--tx);margin:2em 0 .6em}
.entry-content h2,.page-content-in h2{font-size:var(--fs-h2-sm)}
.entry-content h3,.page-content-in h3{font-size:var(--fs-h3)}
.entry-content h4,.page-content-in h4{font-size:var(--fs-h4)}
.entry-content p,.page-content-in p{margin:0 0 1.5em}
.page-content-in > :last-child{margin-bottom:0}
.entry-content ul,.entry-content ol,.page-content-in ul,.page-content-in ol{margin:0 0 1.5em;padding-left:1.5em}
.entry-content li,.page-content-in li{margin-bottom:.5em}
.entry-content blockquote,.page-content-in blockquote{margin:2em 0;padding:16px 24px;background:var(--mist-2);border-radius:0 var(--rs) var(--rs) 0;border-left:3px solid var(--ln-2)}
.entry-content blockquote p,.page-content-in blockquote p{margin:0;font-style:italic;color:var(--tx)}
.entry-content code,.page-content-in code{font-size:.88em;background:var(--mist-2);border-radius:var(--r-xs);padding:2px 6px;font-family:ui-monospace,monospace}
.entry-content pre,.page-content-in pre{padding:24px;border-radius:var(--rs);overflow-x:auto;margin:0 0 1.5em;background:var(--mist);color:var(--ink-2)}
.entry-content pre code,.page-content-in pre code{background:none;padding:0;font-size:.85em}
.entry-content img,.page-content-in img{max-width:100%;height:auto;border-radius:var(--rs);box-shadow:var(--sh-2)}
.entry-content table,.page-content-in table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:var(--fs-caption)}
.entry-content th,.entry-content td,.page-content-in th,.page-content-in td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--ln)}
.entry-content th,.page-content-in th{font-family:var(--fb);font-weight:500;color:var(--tx);background:var(--mist-2)}

/* Multi-page links */
.page-links{margin:2em 0;font-family:var(--fb);font-size:var(--fs-caption);font-weight:600}
.page-links .page-links-title{margin-right:8px;color:var(--tx)}
.page-links span a{margin-right:4px}

/* ---------- Post Navigation (single.php) ---------- */
.post-nav{padding:48px 24px;background:var(--mist)}
.post-nav-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.post-nav-link{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r);padding:24px 26px;transition:border-color var(--dur-1) var(--ease)}
.post-nav-link:not(.post-nav-empty):hover{border-color:var(--tx-3)}
.post-nav-next{text-align:right}
.post-nav-empty{visibility:hidden}
.post-nav-label{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);color:var(--tx-3)}
.post-nav-title{font-family:var(--ff);font-size:var(--fs-h4);font-weight:600;color:var(--tx-2);line-height:var(--lh-h3)}

@media(max-width:600px){
    .post-nav-in{grid-template-columns:1fr}
    .post-nav-empty{display:none}
    .post-nav-next{text-align:left}
}

/* ---------- Blog Section (archive.php, search.php) ---------- */
.blog-section{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.blog-section-in{max-width:var(--max);margin:0 auto}

/* ---------- Post Card Grid ---------- */
.post-card-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:32px}

@media(min-width:600px){.post-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.post-card-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Post Card ---------- */
.post-card{overflow:hidden;display:flex;flex-direction:column;background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg);transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.post-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}

.post-card-img{display:block;aspect-ratio:16/9;overflow:hidden}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}


.post-card-body{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
.post-card-cat{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin-bottom:10px}
.post-card-title{font-family:var(--ff);font-size:var(--fs-h4);font-weight:var(--fw-display);line-height:var(--lh-h3);letter-spacing:-.015em;margin:0 0 12px}
.post-card-title a{color:var(--tx);text-decoration:none;transition:color .2s}
.post-card-title a:hover{color:var(--tx-2)}
.post-card-excerpt{font-family:var(--fb);font-size:var(--fs-caption);line-height:var(--lh-body);color:var(--tx-2);margin:0 0 20px;flex:1}

.post-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:16px;border-top:1px solid var(--ln)}
.post-card-meta{font-family:var(--fb);font-size:var(--fs-spec);color:var(--tx-3)}
.post-card-meta .posted-on time{color:var(--tx-2)}
.post-card-meta .byline a{color:var(--tx-2);text-decoration:none}
.post-card-meta .byline a:hover{color:var(--tx)}

.post-card-more .arr{width:14px;height:14px;flex-shrink:0}

/* ---------- Blog Pagination ---------- */
.blog-section .navigation.pagination{margin-top:64px;text-align:center}
.blog-section .nav-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.blog-section .page-numbers.dots{border:none;color:var(--ink-4);pointer-events:none}
.blog-section .page-numbers.prev,.blog-section .page-numbers.next{font-size:0}
.blog-section .page-numbers.prev svg,.blog-section .page-numbers.next svg{width:16px;height:16px;color:var(--ink-2)}
.blog-section .page-numbers.prev:hover svg,.blog-section .page-numbers.next:hover svg{color:var(--ink)}

/* ---------- No Results / No Posts ---------- */
.no-posts,.no-results{text-align:center;padding:60px 0;font-family:var(--fb);font-size:var(--fs-body-lg);color:var(--tx-3)}
.no-results .search-form{margin-top:32px;display:flex;gap:8px;justify-content:center}
.no-results .search-field{width:280px;max-width:100%}
.no-results .search-submit{height:48px;padding:0 22px;font:600 var(--fs-btn)/1 var(--fb);border:1px solid transparent;border-radius:var(--rs);background:var(--orange);color:var(--w);cursor:pointer;transition:background-color var(--dur-1) var(--ease)}
.no-results .search-submit:hover{background:var(--orange-lo)}


/* ============================================
   404 PAGE
   ============================================ */
.error-404-section{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) var(--sec-y);text-align:left}
.error-404-in{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}

.error-404-code{font:500 var(--fs-eyebrow)/1.4 var(--fb);letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin:0 0 16px}
.error-404-code .gl{color:inherit}

.error-404-title{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--tx);max-width:14ch;margin:0 0 24px}

.error-404-desc{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:52ch;margin:0 0 32px}
.error-404-search{width:100%;max-width:480px;margin:0 0 24px}

/* Search form */
.error-404-search form{display:flex;align-items:center;gap:10px;width:100%}
.error-search-input{flex:1;min-width:0}
.error-search-input::placeholder{color:var(--ink-4)}
.error-search-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;padding:0;background:var(--orange);color:var(--w);border:0;border-radius:var(--rs);cursor:pointer;transition:background-color var(--dur-1) var(--ease)}
.error-search-btn:hover{color:var(--w);background:var(--orange-lo)}



/* ============================================
   CONTACT PAGE TEMPLATE
   ============================================ */

/* ---------- Contact Hero ---------- */
.ct-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left}
.ct-hero-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.ct-hero .tag{margin-bottom:22px}
.ct-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);max-width:14ch;margin:0 0 24px}
.ct-hero-sub{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:52ch;margin:0}

/* Decorative orbs */
.ct-hero-orb{display:none}
.ct-hero-orb--orange{display:none}
.ct-hero-orb--teal{display:none}

/* ---------- Contact Info ---------- */
.ct-info{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.ct-info-in{max-width:var(--max);margin:0 auto}

.ct-info-header{text-align:left;max-width:720px;margin:0 0 40px}
.ct-info-header .tag{margin-bottom:16px}
.ct-info-header h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 14px}
.ct-info-header p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0}

/* Contact cards */
.ct-cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.ct-cards{grid-template-columns:repeat(3,1fr)}}

.ct-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r);padding:24px 26px;transition:border-color var(--dur-1) var(--ease)}
.ct-card:hover{border-color:var(--tx-3)}

.ct-card-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;margin-bottom:8px;width:40px;height:40px;background:var(--mist-2);color:var(--ink-2)}

.ct-card-label{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;color:var(--tx-3)}
.ct-card-value{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.02em;color:var(--tx)}
.ct-card-value--live{display:flex;align-items:center;gap:10px}
.ct-card-sub{font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx-2);line-height:1.55}

/* Live dot */
.ct-live-dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--ink-4);flex-shrink:0}
.ct-live-dot--on{background:var(--teal);}

/* Toronto chip */
.ct-toronto{background:var(--mist-2);color:var(--ink-2);margin:36px auto 0}
.ct-info-in > .ct-toronto{display:flex;justify-content:center;width:fit-content;margin-left:0;margin-right:0}
.ct-toronto-pin{color:var(--ink-3)}
.ct-toronto-sep{color:var(--ink-2)}

/* ---------- Contact Divider ---------- */
.ct-divider{display:none}
.ct-divider-line{max-width:var(--max);margin:0 auto;height:1px;background:var(--ln)}


/* ---------- Contact Hours ---------- */
.ct-hours{background:var(--w);padding:var(--sec-y) var(--gutter)}
.ct-hours-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.ct-hours-in{grid-template-columns:1fr 1fr;gap:60px}}

.ct-hours-text .tag{margin-bottom:16px}
.ct-hours-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 18px}
.ct-hours-text p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0 0 26px}

/* Status pill */
.ct-status{background:var(--mist-2);color:var(--ink-2)}
.ct-status--open{background:var(--teal-wash);color:var(--teal-lo)}

.ct-status-dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--ink-4);flex-shrink:0}
.ct-status-dot--on{background:var(--teal);}

/* Hours table */
.ct-hours-table{overflow:hidden;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}

.ct-hours-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ln)}
.ct-hours-row:last-child{border-bottom:none}
.ct-hours-row--today{background:var(--sur-2)}


.ct-hours-day{font-family:var(--fb);font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;color:var(--tx-2);display:flex;align-items:center;gap:10px}
.ct-hours-badge{font-family:var(--fb);font-size:.75rem;font-weight:600;letter-spacing:.01em;color:var(--tx-3)}
.ct-hours-time{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2)}
.ct-hours-time--closed{color:var(--tx-3);font-style:italic}

/* ---------- Message Form ---------- */
.ct-form-section{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.ct-form-in{max-width:920px;margin:0 auto}

.ct-form-header{margin-bottom:48px;text-align:left}
.ct-form-header .tag{margin-bottom:16px}
.ct-form-header h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 14px}
.ct-form-subtitle{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);max-width:560px;margin:0}

/* Form card */
.ct-form-card{background:var(--sur);border:1px solid var(--ln);border-radius:var(--r);padding:32px}

.ct-form{display:flex;flex-direction:column;gap:20px}
.ct-form-row--2col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.ct-form-row--2col{grid-template-columns:1fr}}

.ct-form-field{display:flex;flex-direction:column;gap:8px}
.ct-form-field label{font:500 var(--fs-caption)/1.4 var(--fb);color:var(--tx)}
.ct-form-field .required{margin-left:2px;color:var(--tx-3)}

.ct-form input[type="text"],
.ct-form input[type="email"],
.ct-form textarea{width:100%;resize:none}
.ct-form input::placeholder,
.ct-form input:focus,
.ct-form textarea{min-height:140px}

.ct-submit{align-self:flex-start;margin-top:8px}

/* Error notice */
.ct-form-error{display:flex;align-items:center;gap:12px;font-family:var(--fb);font-size:var(--fs-caption);margin-bottom:24px;padding:14px 16px;border-radius:var(--rs);background:var(--err-wash);border:0;color:var(--err)}
.ct-form-error svg{flex-shrink:0;color:var(--err)}

/* Success state */
.ct-success{padding:48px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}

.ct-success-icon{width:64px;height:64px;border-radius:var(--r-xs);background:var(--teal-wash);color:var(--teal);display:flex;align-items:center;justify-content:center;}

.ct-success h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.02em;color:var(--tx);margin:0}
.ct-success p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);max-width:480px;margin:0}

/* Honeypot — visually hidden from humans, filled by bots */
.contact-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ---------- Contact Responsive ---------- */
@media(max-width:600px){
    .ct-card{padding:24px 20px}
    .ct-form-card{padding:28px 24px}
    .ct-success{padding:36px 28px}
    .ct-toronto{font-size:var(--fs-spec);padding:10px 16px;gap:8px;height:auto;white-space:normal;line-height:1.4}
}


/* ============================================
   ABOUT PAGE TEMPLATE
   ============================================ */

/* Rebuilt 2026-09-23 (Chris): his three photographs (the Toronto skyline, steel
   fabrication, a conversation over a laptop) replace the presenter mockups, and the
   story, craft and support blocks carry icons instead of repeated ticks. Section
   rhythm follows the training page: hero white, story mist, craft white, support
   mist, audience white, CTA navy. .about-hero-img, .about-craft-media img,
   .about-beyond-media img, .about-craft-badge and .about-cta keep their places in
   the shared FRAMES, CHIPS and theatre register lists. Section headings use
   text-wrap:balance so none ends on a single orphaned word. */

/* ---------- About Hero ---------- */
.about-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left} /* 72px like the other page heroes: the banner and its shadow stay on white, clear of the mist section */
.about-hero-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.about-hero .tag{margin-bottom:16px}
.about-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);margin:0 0 24px;max-width:11.2em} /* breaks after the comma: the accent phrase gets its own line */
.about-hero-sub{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:58ch;margin:0 0 32px}
.about-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.about-hero .hero-trust{margin-bottom:56px}

/* Skyline banner. The photo is 1.91:1, so 2/1 keeps the whole CN Tower with sky above
   the antenna; phones take a taller 4/3 crop that follows the tower (Responsive). */
.about-hero-img-wrap{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.about-hero-img{aspect-ratio:2/1}
.about-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}

/* ---------- Our story ---------- */
.about-story{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.about-story-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.about-story-in{grid-template-columns:1.05fr 1fr;gap:72px}}

.about-story-text .tag{margin-bottom:16px}
.about-story-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 24px;text-wrap:balance}
.about-story-text p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0 0 16px}

/* Our purpose: the line the company exists for, set as a plate under the story */
.about-purpose{display:flex;align-items:center;gap:16px;margin-top:32px;padding:20px 22px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}
.about-purpose-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-xs);background:var(--orange-wash);color:var(--orange-lo)}
.about-purpose-body{display:flex;flex-direction:column;gap:4px}
.about-purpose-label{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);color:var(--tx-3)}
.about-purpose-body strong{font-family:var(--ff);font-size:var(--fs-h4);font-weight:600;line-height:1.3;color:var(--tx)}

/* The usual way against a Lightboard: two Outlined cards joined by a round arrow badge */
.about-compare{display:flex;flex-direction:column}
.about-compare-card{background:var(--sur);border:1px solid var(--ln);border-radius:var(--r-lg);padding:28px}
.about-compare-card--after{box-shadow:var(--sh-1)}
.about-compare-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.about-compare-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-2)}
.about-compare-card--after .about-compare-icon{background:var(--teal-wash);color:var(--teal)}
.about-compare-label{display:block;font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin-bottom:4px}
.about-compare-head h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.01em;color:var(--tx);margin:0}
.about-compare-list{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--ln);display:grid;gap:12px}
.about-compare-list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--fb);font-size:var(--fs-body);line-height:1.5;color:var(--tx-2)}
.about-compare-list svg{flex-shrink:0;width:18px;height:18px;margin-top:3px;color:var(--tx-3)}
.about-compare-card--after .about-compare-list li{color:var(--tx)}
.about-compare-card--after .about-compare-list svg{color:var(--teal)}
.about-compare-arrow{position:relative;z-index:1;align-self:center;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-8px 0;border-radius:var(--r-pill);background:var(--sur);border:1px solid var(--ln);box-shadow:var(--sh-1);color:var(--ink-2)}
.about-compare-arrow svg{width:18px;height:18px}

/* ---------- Craftsmanship ---------- */
.about-craft{background:var(--w);padding:var(--sec-y) var(--gutter)}
.about-craft-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.about-craft-in{grid-template-columns:.9fr 1fr;gap:72px}}

/* The photo is 3:2; the 4/5 crop keeps the sparks and the welder's helmet */
.about-craft-media{position:relative}
.about-craft-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:54% center;display:block}
.about-craft-badge{position:absolute;top:20px;left:20px;background:var(--orange-wash);color:var(--orange-lo)}
.about-craft-badge svg{flex-shrink:0}

.about-craft-text .tag{margin-bottom:16px}
.about-craft-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 20px;text-wrap:balance}
.about-craft-text p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0}

.about-craft-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.about-craft-grid{grid-template-columns:1fr 1fr}}
.about-craft-item{display:flex;flex-direction:column;gap:4px;padding:20px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}
.about-craft-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:12px;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-2)}
.about-craft-item strong{font-family:var(--fb);font-size:var(--fs-body);font-weight:600;line-height:1.4;color:var(--tx)}
.about-craft-note{font-family:var(--fb);font-size:var(--fs-spec);line-height:1.55;color:var(--tx-2)}

/* ---------- Beyond the product ---------- */
.about-beyond{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.about-beyond-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.about-beyond-in{grid-template-columns:1.05fr 1fr;gap:72px}}

.about-beyond-text .tag{margin-bottom:16px}
.about-beyond-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 20px;text-wrap:balance}
.about-beyond-text p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0}

.about-support{list-style:none;margin:28px 0 32px;padding:0;display:grid;gap:16px}
.about-support-item{display:flex;align-items:flex-start;gap:14px}
.about-support-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-xs);background:var(--sur);border:1px solid var(--ln);color:var(--teal)}
.about-support-body{display:flex;flex-direction:column;gap:4px}
.about-support-body strong{font-family:var(--fb);font-size:var(--fs-body);font-weight:600;color:var(--tx)}
.about-support-body span{font-family:var(--fb);font-size:var(--fs-spec);line-height:1.55;color:var(--tx-2)}

/* The photo is 8:7; 5/4 trims a little floor and ceiling and keeps both faces */
.about-beyond-media img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center 45%;display:block}

/* ---------- Who we build for ---------- */
.about-audience{background:var(--w);padding:var(--sec-y) var(--gutter)}
.about-audience-in{max-width:var(--max);margin:0 auto}

.about-audience-header{text-align:left;max-width:720px;margin:0 0 56px}
.about-audience-header .tag{margin-bottom:16px}
.about-audience-header h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 16px;text-wrap:balance}
.about-audience-header p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--tx-2);margin:0}

.about-audience-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:700px){.about-audience-grid{grid-template-columns:repeat(3,1fr)}}

.about-audience-card{padding:28px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r-lg)}
.about-audience-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:20px;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-2)}
.about-audience-icon--teal{background:var(--teal-wash);color:var(--teal)}
.about-audience-icon--purple{background:var(--purple-wash);color:var(--purple-lo)}
.about-audience-icon--amber{background:var(--orange-wash);color:var(--orange-lo)}
.about-audience-card h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.01em;color:var(--tx);margin:0 0 10px}
.about-audience-card p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0}

/* ---------- About CTA ---------- */
/* A card inside the navy band, as on the training page, so it does not run straight
   into the navy footer. */
.about-cta{background:var(--navy);padding:var(--sec-y) var(--gutter)}
.about-cta-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}

.about-cta-card{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:56px 60px;background:var(--navy-2);border:1px solid var(--ln);border-radius:var(--r-lg)}
@media(min-width:900px){.about-cta-card{grid-template-columns:1.4fr auto;gap:48px}}

.about-cta-body .tag{margin-bottom:16px}
.about-cta-body h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 16px;text-wrap:balance}
.about-cta-body p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body-lg);color:var(--tx-2);margin:0;max-width:52ch}

.about-cta-actions{display:flex;flex-direction:column;gap:12px}
.about-cta-actions .btn{justify-content:center}

/* ---------- About Responsive ---------- */
/* Stacked, the fabrication photo goes back to its own 3:2 so it is not a tall column,
   and the chip drops to the workbench corner so it stays off the welder's helmet */
@media(max-width:899px){
    .about-craft-media img{aspect-ratio:3/2;object-position:center}
    .about-craft-badge{top:auto;bottom:16px;left:16px}
}
@media(max-width:600px){
    .about-hero .hero-trust{margin-bottom:40px}
    .about-hero-actions .btn{width:100%;justify-content:center}
    .about-hero-img{aspect-ratio:4/3}
    .about-hero-img img{object-position:72% 50%}
    .about-purpose{align-items:flex-start;padding:18px}
    .about-compare-card,.about-audience-card{padding:24px}
    .about-cta-card{padding:36px 28px}
    .about-cta-actions{width:100%}
    .about-cta-actions .btn{width:100%;text-align:center}
}


/* ============================================
   TRAINING PAGE TEMPLATE
   ============================================ */

/* Rebuilt 2026-09-21 (Chris): real studio photography instead of the consultation-preview
   mock-up, a shorter consultant block with icon points, and the nine topics as a
   three-stage journey. Section rhythm: hero white, free mist, consultant white,
   journey mist, outcomes white, CTA navy. */

/* ---------- Training Hero ---------- */
.train-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left} /* 72px like the other page heroes: the banner and its shadow stay on white, clear of the mist section */
.train-hero-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.train-hero .tag{margin-bottom:16px}
.train-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);margin:0 0 24px;max-width:16ch}
.train-hero-sub{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:56ch;margin:0 0 32px}
.train-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.train-hero .hero-trust{margin-bottom:56px}

/* Hero banner. The photo is 3:2, so 16/9 keeps both faces with a little off the floor. */
.train-hero-img-wrap{margin:0 auto;position:relative;z-index:1;padding:0;max-width:var(--max)}
.train-hero-img{aspect-ratio:16/9}
.train-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}

/* ---------- Free Training ---------- */
.train-free{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.train-free-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.train-free-in{grid-template-columns:1.05fr 1fr;gap:72px}}

.train-free-pill{background:var(--orange-wash);color:var(--orange-lo);margin-bottom:24px}
.train-free-pill svg{flex-shrink:0}

.train-free-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 24px}
.train-free-text p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0 0 32px}

/* Session formats */
.train-formats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.train-formats{grid-template-columns:1fr}}

.train-format{display:flex;align-items:flex-start;gap:14px;background:var(--sur);border:1px solid var(--ln);padding:16px 18px;border-radius:var(--r)}
.train-format-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--teal-wash);color:var(--teal)}
.train-format-body{display:flex;flex-direction:column;gap:4px}
.train-format-body strong{font-family:var(--fb);font-size:var(--fs-body);font-weight:600;color:var(--tx)}
.train-format-body span{font-family:var(--fb);font-size:var(--fs-spec);line-height:1.55;color:var(--tx-2)}

/* Filming photo (frame recipe lives in FRAMES) */
.train-free-card img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}

/* ---------- Your consultant ---------- */
.train-consult{background:var(--w);padding:var(--sec-y) var(--gutter)}
.train-consult-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.train-consult-in{grid-template-columns:1fr 1.05fr;gap:72px}}

.train-consult-media{position:relative}
.train-consult-media img{width:100%;aspect-ratio:3/2;object-fit:cover}

.train-consult-chip{position:absolute;top:20px;left:20px;background:var(--orange-wash);color:var(--orange-lo)}
.train-consult-dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--teal);flex-shrink:0}

.train-consult-text .tag{margin-bottom:16px}
.train-consult-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 20px}
.train-consult-text p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0}

.train-points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.train-point{display:flex;align-items:flex-start;gap:14px}
.train-point-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-2)}
.train-point-body{display:flex;flex-direction:column;gap:4px}
.train-point-body strong{font-family:var(--fb);font-size:var(--fs-body);font-weight:600;color:var(--tx)}
.train-point-body span{font-family:var(--fb);font-size:var(--fs-spec);line-height:1.55;color:var(--tx-2)}

/* ---------- Session journey ---------- */
.train-journey{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.train-journey-in{max-width:var(--max);margin:0 auto}

.train-journey-header{text-align:left;max-width:760px;margin:0 0 56px}
.train-journey-header .tag{margin-bottom:16px}
.train-journey-header h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 16px}
.train-journey-header p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--tx-2);margin:0}

.train-journey-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.train-journey-map{grid-template-columns:repeat(3,1fr);gap:28px}}

.train-stage{position:relative;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r-lg);padding:28px}

/* The route between stages: a hairline through the gap with a small arrow head.
   Horizontal from 900px, vertical below it. Both line up with the icon well. */
.train-stage:not(:last-child)::after,
.train-stage:not(:last-child)::before{content:"";position:absolute}
.train-stage:not(:last-child)::after{left:52px;bottom:-24px;width:1px;height:24px;background:var(--ln-2)}
.train-stage:not(:last-child)::before{left:49px;bottom:-11px;width:7px;height:7px;border-right:1px solid var(--ln-2);border-bottom:1px solid var(--ln-2);transform:rotate(45deg)}
@media(min-width:900px){
    .train-stage:not(:last-child)::after{left:auto;bottom:auto;top:52px;right:-28px;width:28px;height:1px}
    .train-stage:not(:last-child)::before{left:auto;bottom:auto;top:48px;right:-11px;border-right:1px solid var(--ln-2);border-bottom:0;border-top:1px solid var(--ln-2);transform:rotate(45deg)}
}

.train-stage-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-xs);background:var(--orange-wash);color:var(--orange-lo);margin-bottom:18px}
.train-stage-label{display:block;font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin-bottom:8px}
.train-stage-head h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.01em;color:var(--tx);margin:0 0 10px}
.train-stage-head p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0}

.train-stage-steps{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--ln);display:grid;gap:16px}
.train-step{display:flex;align-items:flex-start;gap:14px}
.train-step-num{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-xs);background:var(--mist-2);color:var(--ink-2);font-family:var(--fb);font-size:var(--fs-spec);font-weight:600}
.train-step-text{font-family:var(--fb);font-size:var(--fs-body);line-height:1.55;color:var(--tx-2);padding-top:4px}

/* ---------- What you take away ---------- */
.train-learn{background:var(--w);padding:var(--sec-y) var(--gutter)}
.train-learn-in{max-width:var(--max);margin:0 auto}

.train-learn-header{text-align:left;max-width:720px;margin:0 0 56px}
.train-learn-header .tag{margin-bottom:16px}
.train-learn-header h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0}

.train-learn-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:700px){.train-learn-grid{grid-template-columns:repeat(3,1fr)}}

.train-outcome{position:relative;overflow:hidden;border:1px solid var(--ln);border-radius:var(--r-lg);padding:28px;background:var(--sur)}

.train-outcome-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;margin-bottom:20px;width:40px;height:40px;background:var(--mist-2);color:var(--ink-2)}
.train-outcome-icon--teal{background:var(--teal-wash);color:var(--teal)}
.train-outcome-icon--purple{background:var(--purple-wash);color:var(--purple-lo)}
.train-outcome-icon--amber{background:var(--orange-wash);color:var(--orange-lo)}

.train-outcome h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);color:var(--tx);letter-spacing:-.01em;margin:0 0 10px}
.train-outcome p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0}

/* ---------- Training CTA ---------- */
.train-cta{background:var(--navy);padding:var(--sec-y) var(--gutter)}
.train-cta-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}

.train-cta-card{padding:56px 60px;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;background:var(--navy-2);border:1px solid var(--ln);border-radius:var(--r-lg)}
@media(min-width:900px){.train-cta-card{grid-template-columns:1.4fr auto;gap:48px}}

.train-cta-body .tag{margin-bottom:16px}
.train-cta-body h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 16px}
.train-cta-body p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body-lg);color:var(--tx-2);margin:0}

.train-cta-actions{display:flex;flex-direction:column;gap:12px}
.train-cta-actions .btn{justify-content:center}

/* ---------- Training Responsive ---------- */
@media(max-width:600px){
    .train-hero .hero-trust{margin-bottom:40px}
    .train-hero-actions .btn{width:100%;justify-content:center}
    .train-stage{padding:24px}
    .train-cta-card{padding:36px 28px}
    .train-cta-actions{width:100%}
    .train-cta-actions .btn{width:100%;text-align:center}
}


/* ============================================
   DELIVERY PAGE TEMPLATE
   ============================================ */

/* ---------- Delivery Hero ---------- */
.del-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left}
.del-hero-in{margin:0 auto;position:relative;z-index:1;max-width:var(--max)}
.del-hero .tag{margin-bottom:22px}
.del-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);max-width:14ch;margin:0 0 24px}
.del-hero-sub{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:52ch;margin:0}

/* Decorative orbs */
.del-hero-orb{display:none}
.del-hero-orb--orange{display:none}
.del-hero-orb--teal{display:none}

/* ---------- Three Pillars ---------- */
.del-pillars{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.del-pillars-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:700px){.del-pillars-in{grid-template-columns:repeat(3,1fr)}}

.del-pillar{position:relative;overflow:hidden;border:0;border-radius:var(--r-lg);padding:28px;background:var(--w)}

.del-pillar-num{display:none}

.del-pillar-icon{border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;margin-bottom:24px;width:40px;height:40px;background:var(--mist-2);color:var(--ink-2)}

.del-pillar h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.02em;color:var(--tx);margin:0 0 14px}
.del-pillar p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0}

/* ---------- Delivery Divider ---------- */
.del-divider{display:none}
.del-divider-line{max-width:var(--max);margin:0 auto;height:1px;background:var(--ln)}


/* ---------- Ontario Delivery ---------- */
.del-ontario{background:var(--w);padding:var(--sec-y) var(--gutter)}
.del-ontario-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:900px){.del-ontario-in{grid-template-columns:1.1fr 1fr;gap:80px}}

.del-ontario-text .tag{margin-bottom:16px}
.del-ontario-text h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 28px}
.del-ontario-text p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0 0 20px}
.del-ontario-text p:last-of-type{margin-bottom:30px}

/* City pill card */
.del-ontario-card{background:var(--sur);border:1px solid var(--ln);border-radius:var(--r);padding:32px}

.del-ontario-card-head{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--tx-3)}
.del-ontario-card-head span{font-family:var(--fb);font-size:var(--fs-spec);font-weight:600;letter-spacing:0;color:var(--tx-2)}

.del-city-pills{display:flex;flex-wrap:wrap;gap:8px}

.del-city-pill{background:var(--mist-2);color:var(--ink-2)}
.del-city-pill svg{color:var(--teal);flex-shrink:0}

.del-city-pill--more{background:var(--mist-2);color:var(--ink-2)}

/* ---------- Delivery Contact ---------- */
.del-contact{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.del-contact-in{max-width:920px;margin:0 auto}

.del-contact-header{margin-bottom:48px;text-align:left}
.del-contact-header .tag{margin-bottom:16px}
.del-contact-header h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 14px}
.del-contact-subtitle{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);max-width:520px;margin:0}

/* Form card */
.del-form-card{background:var(--sur);border:1px solid var(--ln);border-radius:var(--r);padding:32px}

.del-form{display:flex;flex-direction:column;gap:20px}
.del-form-row--2col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.del-form-row--2col{grid-template-columns:1fr}}

.del-form-field{display:flex;flex-direction:column;gap:8px}
.del-form-field label{font:500 var(--fs-caption)/1.4 var(--fb);color:var(--tx)}
.del-form-field .required{margin-left:2px;color:var(--tx-3)}

.del-form input[type="text"],
.del-form input[type="email"],
.del-form textarea{width:100%;resize:none}
.del-form input::placeholder,
.del-form input:focus,
.del-form textarea{min-height:140px}

.del-submit{align-self:flex-start;margin-top:8px}

/* Honeypot */
.del-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* Error notice */
.del-form-error{display:flex;align-items:center;gap:12px;font-family:var(--fb);font-size:var(--fs-caption);margin-bottom:24px;padding:14px 16px;border-radius:var(--rs);background:var(--err-wash);border:0;color:var(--err)}
.del-form-error svg{flex-shrink:0;color:var(--err)}

/* Success state */
.del-success{padding:48px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}

.del-success-icon{width:64px;height:64px;border-radius:var(--r-xs);background:var(--teal-wash);color:var(--teal);display:flex;align-items:center;justify-content:center;}

.del-success h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.02em;color:var(--tx);margin:0}
.del-success p{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);max-width:480px;margin:0}

/* Contact info line */
.del-contact-info{margin-top:36px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx-2);justify-content:flex-start}
.del-contact-sep{color:var(--tx-3)}
.del-contact-hours{color:var(--tx-2)}

/* ---------- Delivery Responsive ---------- */
@media(max-width:600px){
    .del-pillar{padding:32px 28px}
    .del-form-card{padding:28px 24px}
    .del-success{padding:36px 28px}
    .del-contact-info{flex-direction:column;gap:8px}
    .del-contact-sep{display:none}
}


/* ============================================
   EQUIPMENT GUIDE TEMPLATE
   ============================================ */

/* ---------- EQ Hero ---------- */
.eq-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px}
.eq-hero-orb{display:none}
.eq-hero-orb--orange{display:none}
.eq-hero-orb--teal{display:none}
.eq-hero-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1;padding-bottom:48px;text-align:left}
.eq-hero-in h1{font-family:var(--ff);font-weight:var(--fw-hero);font-size:var(--fs-hero);color:var(--tx);max-width:14ch;margin:0 0 24px}
.eq-hero-sub{font-family:var(--fb);font-size:var(--fs-body-lg);color:var(--tx-2);line-height:var(--lh-body);max-width:52ch;margin:0 0 36px}
.eq-hero-banner{max-width:1320px;margin:0 auto;position:relative;z-index:1;padding:0}

.eq-hero-banner-img img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}

/* ---------- EQ Legend Strip ---------- */
.eq-legend{background:var(--mist);padding:var(--sec-y-sm) var(--gutter)}
.eq-legend-in{max-width:var(--max);margin:0 auto;text-align:left}
.eq-legend-heading{font-family:var(--ff);font-weight:var(--fw-display);line-height:var(--lh-h2);font-size:var(--fs-h2-sm);color:var(--tx);max-width:680px;margin:0 0 32px}
.eq-legend-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.eq-legend-item{text-align:center;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;align-items:center;background:var(--sur);border:1px solid var(--ln);border-radius:var(--rs);padding:16px 12px;transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.eq-legend-item:hover,.eq-legend-item.is-active{background:var(--sur-2);border-color:var(--tx-3)}
.eq-legend-circle{width:40px;height:40px;border-radius:50%;color:var(--w);display:inline-flex;align-items:center;justify-content:center;font-family:var(--fb);font-size:var(--fs-body);font-weight:600;margin-bottom:12px;flex-shrink:0;background:var(--ink)}
.eq-legend-label{font-family:var(--fb);font-size:var(--fs-spec);font-weight:500;color:var(--tx);line-height:1.3}

/* ---------- EQ Component Rows ---------- */
.eq-row{scroll-margin-top:80px;background:var(--w);padding:var(--sec-y) var(--gutter)}
.eq-row--flip{background:var(--mist)}
.eq-row-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.eq-row-text{order:1}
.eq-row--flip .eq-row-text{order:2}
.eq-row-media{order:2}
.eq-row--flip .eq-row-media{order:1}
.eq-row-media img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.eq-row-badge{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.eq-row-letter{width:56px;height:56px;border-radius:50%;color:var(--w);display:inline-flex;align-items:center;justify-content:center;font-family:var(--fb);font-size:var(--fs-val);font-weight:600;flex-shrink:0;background:var(--ink)}
.eq-row-eyebrow{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;color:var(--tx-3)}
.eq-row-text h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:20px}
.eq-row-text p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin-bottom:16px}
.eq-row-text p:last-of-type{margin-bottom:0}

/* ---------- EQ Bullet List ---------- */
.eq-bullets{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:12px}
.eq-bullets li{display:flex;gap:14px;align-items:flex-start;font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:1.6}
.eq-bullets li svg{color:var(--teal);display:inline-flex;flex-shrink:0;margin-top:5px;width:14px;height:14px}

/* ---------- EQ Price Bar ---------- */
.eq-price-bar{margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--sur);border:1px solid var(--ln);border-radius:var(--rs);padding:16px 18px}
.eq-price-badge{font-size:var(--fs-spec);letter-spacing:0;display:block;margin-bottom:4px;font-family:var(--fb);font-weight:500;color:var(--tx-3)}
.eq-price-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;width:100%}
.eq-price{font-family:var(--ff);font-size:var(--fs-val);font-weight:var(--fw-display);letter-spacing:-.02em;color:var(--tx);line-height:1}
.eq-price-cad{font-family:var(--fb);font-size:var(--fs-spec);font-weight:500;color:var(--tx-3);margin-left:6px}

/* ---------- EQ Divider ---------- */
.eq-divider{display:none}
.eq-divider-line{height:1px;background:var(--ln)}


/* ---------- EQ Bundle CTA ---------- */
.eq-bundle{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.eq-bundle-orb{display:none}
.eq-bundle-in{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.eq-bundle-card{display:grid;grid-template-columns:1.2fr 1fr;gap:0;align-items:stretch;overflow:hidden;background:var(--w);border:1px solid var(--line);border-radius:var(--r-lg)}
.eq-bundle-text{padding:56px 60px;display:flex;flex-direction:column;justify-content:center}
.eq-bundle-text h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:20px}
.eq-bundle-text p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin-bottom:28px}
.eq-bundle-actions{display:flex;gap:12px;flex-wrap:wrap}
.eq-bundle-img{position:relative;min-height:380px}
.eq-bundle-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- EQ Responsive ---------- */
@media(max-width:768px){
    .eq-hero-sub{font-size:var(--fs-body)}
    .eq-legend-grid{grid-template-columns:repeat(4,1fr)}
    .eq-row-in{grid-template-columns:1fr;gap:40px}
    .eq-row-text,.eq-row--flip .eq-row-text{order:1}
    .eq-row-media,.eq-row--flip .eq-row-media{order:2}
    .eq-bundle-card{grid-template-columns:1fr}
    .eq-bundle-text{padding:40px 32px}
    .eq-bundle-img{min-height:260px}
}
@media(max-width:480px){
    .eq-legend-grid{grid-template-columns:repeat(4,1fr);gap:8px}
    .eq-legend-item{padding:14px 8px}
    .eq-legend-circle{width:32px;height:32px;font-size:var(--fs-caption)}
    .eq-legend-label{font-size:var(--fs-spec)}
    .eq-row-in{gap:32px}
    .eq-row-letter{width:44px;height:44px;font-size:var(--fs-h3)}
    .eq-price-bar{flex-direction:column;align-items:flex-start;gap:14px}
    .eq-price-row{flex-direction:column;align-items:flex-start;gap:12px}
    .eq-bundle-text{padding:32px 20px}
    .eq-bundle-actions{flex-direction:column}
    .eq-bundle-actions .btn{width:100%;justify-content:center}
}


/* ============================================
   SETUP GUIDE TEMPLATE
   ============================================ */

/* ---------- SG Hero ---------- */
.sg-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px}
.sg-hero-orb{display:none}
.sg-hero-orb--orange{display:none}
.sg-hero-orb--teal{display:none}
.sg-hero-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sg-hero-text h1{font-family:var(--ff);font-weight:var(--fw-hero);font-size:var(--fs-hero);color:var(--tx);margin-bottom:24px;max-width:14ch}
.sg-hero-sub{font-family:var(--fb);font-size:var(--fs-body-lg);color:var(--tx-2);line-height:var(--lh-body);max-width:520px;margin:0 0 32px}

.sg-hero-media img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.sg-hero-media-fade{display:none}

/* ---------- SG Divider ---------- */
.sg-divider{display:none}
.sg-divider-line{height:1px;background:var(--ln)}


/* ---------- SG Table of Contents ---------- */
.sg-toc{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.sg-toc-in{max-width:var(--max);margin:0 auto}
.sg-toc-head{margin-bottom:36px}
.sg-toc-head h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin:0}
.sg-toc-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px}
.sg-toc-item{display:flex;align-items:center;gap:18px;text-decoration:none;background:var(--sur);border:1px solid var(--ln);border-radius:var(--rs);padding:12px 14px;color:var(--tx);transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.sg-toc-item:hover{background:var(--sur-2);border-color:var(--tx-3)}
.sg-toc-num{flex-shrink:0;font-family:var(--fb);font-size:var(--fs-body);font-weight:600;min-width:24px;text-align:center;color:var(--tx-3)}
.sg-toc-label{font-family:var(--fb);font-size:var(--fs-body);flex:1}
.sg-toc-item svg{color:var(--tx-3);flex-shrink:0}

/* ---------- SG Numbered Steps ---------- */
.sg-step{position:relative;background:var(--w);padding:var(--sec-y) var(--gutter)}
.sg-step--flip{background:var(--mist)}
.sg-diagram + .sg-step:not(.sg-step--flip),.sg-diagram + .sg-divider + .sg-step:not(.sg-step--flip),.sg-step:not(.sg-step--flip) + .sg-tabs-section,.sg-step:not(.sg-step--flip) + .sg-divider + .sg-tabs-section{border-top:1px solid var(--line)}
.sg-step-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sg-step-text{order:1}
.sg-step--flip .sg-step-text{order:2}
.sg-step-media{order:2}
.sg-step--flip .sg-step-media{order:1}
.sg-step-media img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
/* Portrait sources in the 4:3 slot: anchor the crop to the top so the subject
   (e.g. the lights' heads and barn doors) survives instead of being cut off. */
.sg-step-media img.sg-media-top{object-position:center top}
.sg-step-badge{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sg-step-num{border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;font-family:var(--fb);font-size:var(--fs-val);font-weight:600;flex-shrink:0;width:48px;height:48px;background:var(--mist-2);color:var(--ink-2)}
.sg-step-eyebrow{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;color:var(--tx-3)}
.sg-step-text h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:20px}
.sg-step-text p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin:0 0 16px}
.sg-step-text p:last-of-type{margin-bottom:0}

/* ---------- SG Diagram Block ---------- */
.sg-diagram{background:var(--w);padding:var(--sec-y) var(--gutter)}
.sg-diagram-in{max-width:var(--max);margin:0 auto}
.sg-diagram-head{max-width:720px;margin-bottom:48px}
.sg-diagram-head h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:16px}
.sg-diagram-head p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body)}
.sg-diagram-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sg-diagram-fig{margin:0}
/* Lead measurements diagram: full width above the aerial/side pair */
.sg-diagram-fig--lead{margin:0 0 32px}

.sg-diagram-img img{width:100%;display:block;aspect-ratio:5/3;object-fit:cover}
.sg-diagram-fig figcaption{margin-top:14px;font-family:var(--fb);font-size:var(--fs-spec);font-weight:500;letter-spacing:0;color:var(--tx-2);text-align:center}

/* ---------- SG Device Tabs ---------- */
.sg-tabs-section{background:var(--w);padding:var(--sec-y) var(--gutter)}
.sg-tabs-in{max-width:var(--max);margin:0 auto}
.sg-tabs-head{max-width:720px;margin-bottom:36px}
.sg-tabs-head h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:16px}
.sg-tabs-head p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body)}
.sg-tab-strip{margin-bottom:32px}
.sg-tab-panel{display:none;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center;padding:0;background:transparent;border:0}
.sg-tab-panel.is-active{display:grid}
.sg-tab-img{overflow:hidden;border-radius:var(--rs);border:1px solid var(--ln);background:var(--sur-2)}
.sg-tab-img img{width:100%;display:block;aspect-ratio:4/3;object-fit:contain}
.sg-tab-content h3{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:-.02em;color:var(--tx);margin-bottom:14px}
.sg-tab-content p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body);margin:0 0 14px}
.sg-tab-specs{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.sg-tab-specs li{display:flex;gap:10px;align-items:flex-start;font-family:var(--fb);font-size:var(--fs-caption);color:var(--tx-2)}
.sg-tab-specs li svg{color:var(--teal);display:inline-flex;flex-shrink:0;margin-top:4px}

/* ---------- SG Contact Strip ---------- */
.sg-contact{background:var(--navy);padding:var(--sec-y) var(--gutter)}
.sg-contact-orb{display:none}
.sg-contact-in{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.sg-contact-card{padding:48px 56px;display:grid;grid-template-columns:1.4fr auto;gap:48px;align-items:center;background:var(--navy-2);border:1px solid var(--ln);border-radius:var(--r-lg)}
.sg-contact-text h2{font-family:var(--ff);font-weight:var(--fw-display);font-size:var(--fs-h2);color:var(--tx);margin-bottom:14px}
.sg-contact-text p{font-family:var(--fb);font-size:var(--fs-body);color:var(--tx-2);line-height:var(--lh-body)}
.sg-contact-actions{display:flex;flex-direction:column;gap:12px}

/* ---------- SG Responsive ---------- */
@media(max-width:768px){
    .sg-hero-in{grid-template-columns:1fr;gap:40px}
    .sg-hero-media{max-width:480px}
    .sg-toc-grid{grid-template-columns:1fr}
    .sg-step-in{grid-template-columns:1fr;gap:40px}
    .sg-step-text,.sg-step--flip .sg-step-text{order:1}
    .sg-step-media,.sg-step--flip .sg-step-media{order:2}
    .sg-diagram-grid{grid-template-columns:1fr}
    .sg-tab-panel{grid-template-columns:1fr;gap:32px;padding:24px}
    .sg-contact-card{grid-template-columns:1fr;padding:36px 28px;gap:28px}
    .sg-contact-actions{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:480px){
    .sg-toc-item{padding:14px 16px;gap:12px}
    .sg-step-in{gap:32px}
    .sg-step-num{width:44px;height:44px;font-size:var(--fs-h3)}
    .sg-tab-strip{width:100%;justify-content:center}
    .sg-tab-btn{padding:10px 16px;font-size:var(--fs-spec)}
    .sg-tab-panel{padding:20px 16px}
    .sg-contact-card{padding:28px 20px}
    .sg-contact-actions .btn{width:100%;justify-content:center}
}


/* ============================================
   FAQ TEMPLATE
   ============================================ */

/* ---------- FAQ Hero ---------- */
.faq-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left}
.faq-hero-in{margin:0 auto;max-width:800px}
.faq-hero .tag{margin-bottom:16px}
.faq-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);margin:0 0 24px;max-width:14ch}
.faq-hero-intro{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:52ch;margin:0}
.faq-hero-intro p{margin:0}

/* ---------- FAQ Section ---------- */
.faq-section{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.faq-section-in{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:56px}

/* ---------- FAQ Category ---------- */
.faq-cat-label{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);margin:0 0 20px;display:flex;align-items:center;gap:12px;color:var(--tx-3)}
.faq-cat-label::after{content:'';flex:1;height:1px;background:var(--ln)}

/* ---------- FAQ Accordion ---------- */
.faq-accordion{display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--sur);border:1px solid var(--ln);border-radius:var(--r)}

/* ---------- FAQ Item ---------- */
.faq-item{border-bottom:1px solid var(--ln)}
.faq-item:last-child{border-bottom:none}
.faq-item.is-open{border-left-color:transparent}

/* ---------- Question button ---------- */
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;cursor:pointer;padding:20px 24px;text-align:left;font-family:var(--fb);font-size:var(--fs-body);font-weight:600;color:var(--tx);line-height:1.35;transition:color .2s,background .2s}
.faq-q:hover{background:var(--sur-2);color:var(--tx)}
.faq-item.is-open .faq-q{color:var(--tx)}
.faq-q span{flex:1}

/* Chevron */
.faq-chevron{width:18px;height:18px;flex-shrink:0;color:var(--tx-3);transition:transform .3s var(--ease),color .2s}
.faq-item.is-open .faq-chevron{transform:rotate(180deg);color:var(--tx)}

/* ---------- Answer panel ---------- */
.faq-a{overflow:hidden;max-height:0;transition:max-height .35s var(--ease),visibility 0s linear .35s;visibility:hidden}
.faq-item.is-open .faq-a{visibility:visible;transition:max-height .35s var(--ease),visibility 0s linear 0s}
.faq-a-inner{padding:0 24px 22px;font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body-lg);color:var(--tx-2)}
.faq-a-inner p{margin:0}
.faq-a-inner p + p{margin-top:1em}

/* ---------- FAQ CTA ---------- */
.faq-cta{padding:48px 0 0;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:20px;text-align:left;align-items:flex-start}
.faq-cta p{font-family:var(--fb);font-size:var(--fs-body-lg);color:var(--tx-2);margin:0}


/* ============================================
   SETUP GUIDE TEMPLATE
   ============================================ */

/* ---------- Setup Hero ---------- */
.setup-hero{background:var(--w);padding:calc(var(--nav-h) + 56px) var(--gutter) 72px;text-align:left}

.setup-hero-in{margin:0 auto;position:relative;max-width:var(--max)}
.setup-hero .tag{margin-bottom:16px}
.setup-hero h1{font-family:var(--ff);font-size:var(--fs-hero);font-weight:var(--fw-hero);color:var(--tx);margin:0 0 20px;max-width:14ch}
.setup-hero-desc{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);max-width:52ch;margin:0 0 28px}
.setup-hero-meta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-family:var(--fb);font-size:var(--fs-spec);font-weight:500;color:var(--tx-3);letter-spacing:0;justify-content:flex-start}
.setup-hero-meta span{display:flex;align-items:center;gap:7px}
.setup-hero-meta svg{color:var(--teal)}

/* ---------- Setup Section ---------- */
.setup-section{background:var(--mist);padding:var(--sec-y) var(--gutter)}
.setup-section-in{max-width:860px;margin:0 auto}

/* ---------- Steps List ---------- */
.setup-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}

/* ---------- Step ---------- */
.setup-step{display:grid;grid-template-columns:60px 1fr;gap:0 28px;position:relative}
.setup-step:not(:last-child){padding-bottom:56px}

/* ---------- Step Marker (number + connecting line) ---------- */
.setup-step-marker{display:flex;flex-direction:column;align-items:center;gap:0}
.setup-step-num{width:48px;height:48px;border-radius:50%;font-family:var(--fb);font-size:var(--fs-body);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--ink);color:var(--w)}
.setup-step-line{flex:1;width:2px;margin:8px 0;min-height:40px;background:var(--line-2)}

/* ---------- Step Body ---------- */
.setup-step-body{padding-top:10px}
.setup-step-heading{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);color:var(--tx);letter-spacing:-.02em;line-height:var(--lh-h3);margin:0 0 12px}
.setup-step-label{display:block;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);color:var(--tx-3);margin-bottom:4px}
.setup-step-desc{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body-lg);color:var(--tx-2);margin:0}

/* Optional step image */
.setup-step-img{margin-top:24px}
.setup-step-img img{width:100%;height:auto;display:block}

/* ---------- Setup CTA Band ---------- */
.setup-cta-band{background:var(--navy);padding:var(--sec-y) var(--gutter);text-align:left}
.setup-cta-band-in{margin:0 auto;max-width:var(--max)}
.setup-cta-band .tag{margin-bottom:16px}
.setup-cta-band h2{font-family:var(--ff);font-size:var(--fs-h2);font-weight:var(--fw-display);color:var(--tx);margin:0 0 16px;max-width:20ch}
.setup-cta-band p{font-family:var(--fb);font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--tx-2);margin:0 0 36px;max-width:52ch}
.setup-cta-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-start}

@media(max-width:600px){
    .setup-step{grid-template-columns:44px 1fr;gap:0 18px}
    .setup-step-num{width:40px;height:40px;font-size:var(--fs-body)}
    .setup-cta-actions{flex-direction:column;align-items:stretch}
    .setup-cta-actions .btn{text-align:center;justify-content:center}
}


/* ============================================
   PASSWORD-PROTECTED POST FORM
   Cream card, white inputs, orange focus ring, btn-glow submit.
   ============================================ */
.post-password-form {
    max-width: 480px;
    margin: 80px auto;
    padding: 40px 36px;
    background: var(--sur);
    border: 1px solid var(--ln);
    border-radius: var(--r);
}

.post-password-form p:first-child {
    font-family: var(--fb);
    font-size: var(--fs-body);
    color:var(--tx-2);
    line-height: var(--lh-body);
    margin-bottom: 24px;
}

.post-password-form label {
    display: block;
    margin-bottom: 8px;
    font: 500 var(--fs-caption)/1.4 var(--fb);
    color: var(--tx);
}

.post-password-form input[type="password"] {
    width: 100%;
    margin-bottom: 16px;
}


/* ============================================
   REDUCED MOTION
   Disables all transitions, animations, and
   scroll-driven effects for users who request it.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        transition-delay:0ms !important;
        scroll-behavior:auto !important;
    }
    /* Keep skip-link transition so it still works on focus */
    .skip-link{transition:none}
    /* Freeze scroll-reveal items in their visible state */
    .rv{opacity:1;transform:none}
    /* Remove glow-pulse and bob keyframe animations */
    .hero-orb,.hero-orb-2,.glow-orb{animation:none}
    /* Prevent parallax hero movement (JS also checks this — belt-and-suspenders) */
    .hero-vis{transform:none !important}
    /* Nova: the hero entrance and the arrow nudge are off (Delta §9.3) */
    .hero-content > *,.hero-vis{animation:none}
    .btn-ghost:hover .arr,.post-card-more:hover .arr,.sr-more:hover .arr,.del-contact-link:hover .arr,.cat-resource-link:hover .arr,.cat-resource-card:hover .arr,.acc-quick:hover .acc-quick-arrow,.cat-resource-card:hover .cat-resource-arrow,.btn-ghost:hover > svg:last-child{transform:none}
}

/* ============================================
   NAV SEARCH
   Magnifying-glass toggle in the nav + a
   full-width dropdown panel below it (rendered
   outside .nav — see header.php comment).
   ============================================ */
.nav-search-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--ink-2);transition:color var(--dur-1) var(--ease)}
.nav-search-btn:hover,.nav-search-btn[aria-expanded="true"]{color:var(--ink)}
.nav-search-btn svg{width:22px;height:22px}
.nav-search-btn:focus-visible{outline-offset:4px;border-radius:var(--rs);outline:2px solid var(--focus)}

/* Account / login — subtle icon in the nav icon cluster */
.nav-account{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;color:var(--ink-2);transition:color var(--dur-1) var(--ease)}
.nav-account:hover{color:var(--ink)}
.nav-account svg{width:22px;height:22px}
.nav-account:focus-visible{outline-offset:4px;border-radius:var(--rs);outline:2px solid var(--focus)}

.nav-search{position:fixed;left:0;right:0;z-index:998;padding:22px 24px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;top:var(--nav-h);background:var(--w);border-bottom:1px solid var(--line)}
.nav-search.active{opacity:1;visibility:visible;transform:translateY(0)}
.nav-search-in{max-width:680px;margin:0 auto}
.nav-search-form{display:flex;align-items:center;gap:12px;position:relative}
.nav-search-icon{position:absolute;left:18px;width:18px;height:18px;pointer-events:none;color:var(--ink-3)}
input.nav-search-field{flex:1;min-width:0;padding-left:44px}   /* clears the absolute .nav-search-icon */
.nav-search-submit{flex-shrink:0}

.nav-search-overlay{position:fixed;inset:0;z-index:997;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;background:rgba(22,22,29,.32)}
.nav-search-overlay.active{opacity:1;visibility:visible}

/* Mobile menu search */
.mob-search{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.mob-search-field{flex:1;min-width:0}
.mob-search-submit{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;background:var(--orange);border:0;border-radius:var(--rs);color:var(--w);cursor:pointer;transition:background-color var(--dur-1) var(--ease)}
.mob-search-submit:hover{background:var(--orange-lo)}

/* ============================================
   SEARCH RESULTS PAGE
   Dark hero search form + grouped text rows
   (Products / Guides & Information). No images,
   no author/date — clean, consistent rows.
   ============================================ */
.search-hero-form{margin-top:32px;max-width:560px}
.search-hero-form .search-form-row{display:flex;gap:10px}
.search-hero-form .search-field{flex:1;min-width:0;height:56px}

.sr-group{margin-bottom:64px}
.sr-group:last-of-type{margin-bottom:24px}
.sr-group-head{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--ln-2)}
.sr-group-head h2{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);color:var(--tx);margin:0;letter-spacing:-.01em}
.sr-group-count{background:var(--mist-2);color:var(--ink-2)}

.sr-list{list-style:none;margin:0;padding:0}
.sr-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:28px 0;border-bottom:1px solid var(--ln)}
.sr-row-main{min-width:0}
.sr-type{font-family:var(--fb);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:0;color:var(--tx-3);margin-bottom:8px}
.sr-title{font-family:var(--ff);font-size:var(--fs-h3);font-weight:var(--fw-display);line-height:var(--lh-h3);margin:0 0 10px}
.sr-title a{color:var(--tx);text-decoration:none;transition:color .2s}
.sr-title a:hover{color:var(--acc-tx)}
.sr-excerpt{font-family:var(--fb);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx-2);margin:0;max-width:640px}
.sr-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;padding-top:26px}
.sr-price{font-family:var(--ff);font-size:var(--fs-body);font-weight:var(--fw-display);color:var(--tx);white-space:nowrap}
.sr-price del{font-weight:500;margin-right:6px;color:var(--ink-4)}
.sr-price ins{text-decoration:none}
.sr-more{white-space:nowrap}
.sr-more .arr{width:15px;height:15px}

.sr-quick-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

@media(max-width:700px){
    .sr-row{flex-direction:column;gap:14px}
    .sr-row-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-top:0}
    .search-hero-form .search-form-row{flex-direction:column}
    .nav-search-submit{display:none}
}

/* ============================================================
   Brand mark visibility (2026-07-16)
   The logo PNG is dark purple and disappears on the navy header/
   footer. Render it as a white silhouette via filter — the mark is
   monochrome so nothing is lost. Long-term: export a proper white
   SVG/PNG into assets/images/logos/ and drop this rule.
   Applies to the hosted fallback AND a future Customizer logo
   (both carry .site-logo-img in header.php).
   ============================================================ */
.site-logo-img{filter:brightness(0);height:28px !important}
.foot-logo-img{filter:brightness(0) invert(1);height:24px}
/* Phones: keep "Lightboard Studio" on one line beside the four 40px nav buttons (Chris, 2026-09-15). At 19px the
   lockup needs ~201px and gets 194 at 390, so mark and text step down together, keeping the desktop 1.5 : 1 ratio.
   Below ~345px it wraps rather than push the menu button off screen. */
@media(max-width:480px){
    .logo{font-size:1rem;gap:8px;line-height:1.2}
    .site-logo-img{height:24px !important}
}
@media(max-width:374px){
    .logo{font-size:.875rem}
    .site-logo-img{height:21px !important}
}
/* Phase 11 gate at 320px: a long button label wraps inside the 48px control instead of pushing the page sideways;
   the equipment legend drops to two columns; a search row's price and link wrap */
@media(max-width:374px){
    .btn{white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;line-height:1.25;text-align:center}
    .eq-legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sr-row-side{flex-wrap:wrap}
}

/* Contact form AJAX submit — button spinner while the request is in flight */
.ct-submit{position:relative}
.ct-submit.is-loading{color:transparent;pointer-events:none}
.ct-submit.is-loading .arr{opacity:0}
.ct-submit.is-loading::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.35);border-top-color:var(--w);border-radius:50%;animation:lb-spin .7s linear infinite}
@keyframes lb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ct-submit.is-loading::after{animation-duration:1.6s}}

/* The hidden attribute must always win — authored display rules on
   components (.ct-success{display:flex} etc.) were overriding it, leaving
   the contact form's AJAX success/error slots permanently visible. */
[hidden]{display:none !important}

/* Homepage product images are links now — gentle zoom affordance */
.prod-img a{display:block;height:100%;border-radius:inherit}
.prod-img:has(> a:focus-visible){outline:2px solid var(--focus);outline-offset:2px}