/* ==========================================================================
   ADW Machinery — Global site CSS
   Powers header.php / footer.php everywhere (our 24 native templates,
   Elementor Pro pages, blog posts, archives). This is the same design
   system used across the approved concept.
   ========================================================================== */

:root{--bg:#fff;--alt:#f4f6f8;--panel:#0b0e13;--ink:#000;--ink2:#54595F;--ink3:#8a929b;--line:#e6e9ee;--line2:#d3d9e0;--blue:#0075C9;--blue-d:#005a9c;--green:#00BE2E;--green-d:#03a029;--maxw:1220px}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Montserrat',system-ui,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.mono{font-family:'Montserrat';font-weight:600;letter-spacing:2.5px;text-transform:uppercase;font-size:12px;color:var(--blue)}

.btn{font-family:'Oswald';text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-size:13px;padding:12px 24px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;transition:.25s;cursor:pointer;border:1px solid transparent}
.btn-p{background:var(--blue);color:#fff}.btn-p:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-g{background:transparent;color:var(--ink);border-color:var(--line2)}.btn-g:hover{border-color:var(--ink)}

/* Header / nav - "solid" variant (used site-wide by default; the Home
   page overrides this locally with its own transparent-to-solid scroll
   behaviour, embedded in that page's own template). */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo img{height:30px;display:block}
.menu{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--ink2)}
.menu a{position:relative;transition:.2s}.menu a:hover,.menu a.active{color:var(--ink)}
.nav-cta{display:flex;gap:12px;align-items:center}

/* Footer */
footer{padding:60px 0 34px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px}
.foot-grid h5{font-family:'Oswald';text-transform:uppercase;font-size:14px;margin-bottom:14px}
.foot-grid a{display:block;font-size:14px;padding:5px 0;color:var(--ink2);transition:.2s}.foot-grid a:hover{color:var(--blue)}
.foot-bot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;font-size:13px;color:var(--ink3);flex-wrap:wrap;gap:10px}

/* Reveal-on-scroll (used by the IntersectionObserver script on every page) */
.rv{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

@media(max-width:1000px){
  .menu,.nav-cta .btn-g{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .nav{height:64px}
  .logo img{height:22px}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:9px 14px;font-size:11px;letter-spacing:.5px;white-space:nowrap}
}
@media(max-width:380px){
  .nav-cta .btn-p{padding:8px 12px;font-size:10px}
}

/* ---- Generic content styling for Elementor / blog pages so headings,
   paragraphs and buttons that AREN'T from our 24 hand-built templates
   still look native to the site instead of unstyled browser defaults. ---- */
.adw-content-area{padding:150px 32px 90px;max-width:var(--maxw);margin:0 auto}
.adw-content-area h1{font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:clamp(32px,5vw,52px);line-height:1.05;margin-bottom:18px}
.adw-content-area h2{font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:clamp(24px,3.2vw,34px);margin:36px 0 14px}
.adw-content-area h3{font-family:'Oswald';font-weight:600;text-transform:uppercase;font-size:22px;margin:26px 0 10px}
.adw-content-area p{color:var(--ink2);font-size:16px;margin-bottom:16px;max-width:760px}
.adw-content-area ul,.adw-content-area ol{color:var(--ink2);margin:0 0 16px 22px}
.adw-content-area a:not(.btn){color:var(--blue);text-decoration:underline}

/* Blog cards (archive.php) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px}
.blog-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.blog-card img{width:100%;height:190px;object-fit:cover;display:block}
.blog-card .bc-body{padding:20px}
.blog-card .bc-date{font-family:'Montserrat';font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:11px;color:var(--blue);margin-bottom:8px}
.blog-card h3{font-family:'Oswald';text-transform:uppercase;font-size:19px;margin-bottom:8px;line-height:1.2}
.blog-card p{color:var(--ink2);font-size:14px}
@media(max-width:1000px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.adw-content-area{padding-top:120px}}

/* Mobile hamburger menu */
#adw-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;border:none;background:transparent;cursor:pointer;padding:0}
#adw-burger span{display:block;width:24px;height:2px;background:#000;border-radius:2px;transition:.25s;margin:0 auto}
#adw-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#adw-burger.open span:nth-child(2){opacity:0}
#adw-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#adw-mobile-menu{display:none;flex-direction:column;position:fixed;top:64px;left:0;right:0;bottom:0;background:#fff;padding:24px 32px;overflow-y:auto;z-index:998}
#adw-mobile-menu a{font-family:'Oswald';text-transform:uppercase;font-size:20px;padding:16px 0;border-bottom:1px solid #e6e9ee;color:#000}
#adw-mobile-menu .adw-mm-ctas{display:flex;flex-direction:column;gap:12px;margin-top:24px}
#adw-mobile-menu .adw-mm-ctas .btn{justify-content:center}
body.adw-menu-open{overflow:hidden}
body.adw-menu-open #adw-mobile-menu{display:flex}

@media(max-width:1000px){
  #adw-burger{display:flex}
}

/* ADW gallery sizing fix */
/* Gallery images now come from the Media Library with explicit width/height
   attributes (needed to stop layout shift). Because .gallery .main is sized by
   aspect-ratio, its percentage max-height does not resolve, so the height
   attribute would stretch the image. Sizing the img to the frame and letting
   object-fit letterbox it keeps any aspect ratio correct. Higher specificity
   than the per-template rule so it wins despite load order. */
.pgrid .gallery .main img{width:100%;height:100%;object-fit:contain}
.pgrid .thumbs button img{width:100%;height:100%;object-fit:contain}


/* ADW catalogue card image fit */
/* Card photos now come from the Media Library and are not all square. The
   template rule relies on percentage max-height inside an aspect-ratio box,
   which does not resolve reliably, so size the image to the frame and let
   object-fit letterbox it. Higher specificity than the template rule. */
.range-grid .pc-im{position:relative}
.range-grid .pc-im img{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);object-fit:contain;max-width:none;max-height:none}


/* ADW fixed-height image frames */
/* These frames are display:grid + place-items:center with a fixed height and
   rely on percentage max-height on the image. Percentage max-height does not
   resolve reliably for a grid item, which only became visible once width and
   height attributes were added to the images for layout-shift protection:
   the image kept its attribute height and overflowed, and overflow:hidden
   cropped it to a mostly-empty region. Positioning the image absolutely gives
   it a definite box, and object-fit:contain letterboxes the picture inside. */
.bcard .media{position:relative}
.bcard .media img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);max-width:none;max-height:none;object-fit:contain}
.relc .im{position:relative}
.relc .im img{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);max-width:none;max-height:none;object-fit:contain}
.model .im{position:relative}
.model .im img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);max-width:none;max-height:none;object-fit:contain}
.phero-visual{position:relative}
.phero-visual img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}


/* ADW brand cards: breakout 3D treatment */
/* The four homepage brand cards use transparent PNG cut-outs that break out of
   the grey panel and overhang into the white body, with a grounded contact
   shadow, so the product reads as sitting in front of the card rather than
   inside a window. Clipping must be off for the overhang to show, so the panel
   carries its own rounded corners.

   The image box is inset 58px from the top of the panel and hangs 44px below
   it. That top inset is what keeps the widest cut-out (the RAMIA bench, 1057
   x 544) from growing tall enough to reach the brand label or wide enough to
   spill past the card border -- object-fit:contain scales to whichever edge
   binds first, so limiting the height limits the width too. object-position
   :center bottom then guarantees every product's base meets the overhang line
   whatever its aspect ratio.

   Scoped to body.home on purpose. home.php ships its own inline <style> setting
   .bcard{overflow:hidden} and .bcard .media img{max-width:100%}, emitted after
   this stylesheet, so an unscoped rule of equal specificity loses. The
   body.home prefix raises specificity above it, and keeps the breakout off the
   other templates that reuse .bcard and still want a plain contained frame. */
body.home .bcard{overflow:visible}
body.home .bcard .media{height:280px;overflow:visible;border-radius:16px 16px 0 0;background:linear-gradient(163deg,#f2f5f8 0%,#e7ecf2 52%,#dee5ed 100%)}
body.home .bcard .media::before{content:"";position:absolute;inset:0;border-radius:16px 16px 0 0;background:radial-gradient(ellipse at 52% 64%,rgba(255,255,255,.92),transparent 64%);pointer-events:none;z-index:1}
body.home .bcard .media::after{content:"";position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:46%;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,14,20,.32),rgba(10,14,20,.13) 45%,transparent 72%);filter:blur(7px);pointer-events:none;z-index:2;transition:.5s cubic-bezier(.2,.7,.2,1)}
body.home .bcard .media img{position:absolute;left:0;right:auto;top:auto;bottom:-44px;width:100%;height:calc(100% - 14px);max-width:none;max-height:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 14px rgba(12,16,22,.24));transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s;z-index:3}
body.home .bcard:hover .media img{transform:translateY(-9px) scale(1.04);filter:drop-shadow(0 28px 24px rgba(12,16,22,.3))}
body.home .bcard:hover .media::after{width:40%;opacity:.75;filter:blur(9px)}
body.home .bcard .bhead{z-index:4;text-shadow:0 1px 3px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.85),0 0 30px rgba(255,255,255,.6)}
body.home .bcard .body{padding-top:58px;position:relative;z-index:1;background:#fff;border-radius:0 0 16px 16px}
@media(max-width:640px){body.home .bcard .media{height:240px}body.home .bcard .media img{bottom:-30px;height:calc(100% - 22px)}body.home .bcard .body{padding-top:42px}body.home .bcard .media::after{bottom:-24px}}


/* ADW contact page: Fluent Form styled to match the page's form card */
/* The visible form on /contact-us/ was a static mock-up with onsubmit="return false",
   so every enquiry typed into it was discarded without any error shown to the visitor.
   It now renders Fluent Form 3 -- the same form as the site-wide quote modal -- and this
   block restyles Fluent Forms' default controls to match the original design so the page
   looks unchanged: 10px radius, #f4f6f8 fill, and the Oswald uppercase primary button. */
.adw-ff .ff-el-group{margin-bottom:16px}
.adw-ff .ff-el-input--label label{font-weight:600;font-size:13.5px;color:#0c1016;margin-bottom:7px;display:inline-block;line-height:1.3}
.adw-ff .ff-el-input--label.ff-el-is-required label:after{content:" *";color:#d92d20;font-weight:700}
.adw-ff .ff-el-form-control{width:100%;background:#f4f6f8;border:1px solid #e6e9ee;border-radius:10px;padding:13px 15px;font-size:15px;line-height:1.45;color:#0c1016;box-shadow:none;transition:border-color .18s,background .18s,box-shadow .18s}
.adw-ff .ff-el-form-control::placeholder{color:#8b95a3}
.adw-ff .ff-el-form-control:focus{background:#fff;border-color:#0075c9;outline:0;box-shadow:0 0 0 3px rgba(0,117,201,.15)}
.adw-ff textarea.ff-el-form-control{min-height:120px;resize:vertical}
.adw-ff select.ff-el-form-control{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23566' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.adw-ff .ff-el-group.ff-el-form-check{margin-bottom:12px}
.adw-ff .ff-el-form-check-label{font-size:14px;color:#3d4653;line-height:1.5}
.adw-ff .ff-el-help-message{font-size:12.5px;color:#6b7480;margin-top:6px}
.adw-ff .ff-el-is-error .ff-el-form-control{border-color:#d92d20;background:#fff7f6}
.adw-ff .error.text-danger{font-size:12.5px;color:#d92d20;margin-top:5px}
.adw-ff .ff-btn-submit{background:#0075c9;color:#fff;border:1px solid transparent;border-radius:8px;padding:14px 28px;font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s;width:auto}
.adw-ff .ff-btn-submit:hover{background:#005fa3;transform:translateY(-1px)}
.adw-ff .ff-btn-submit:focus-visible{outline:3px solid #0075c9;outline-offset:3px}
.adw-ff .ff-message-success{background:#eef8f1;border:1px solid #bfe3cb;border-radius:12px;padding:20px 22px;color:#14532d;font-size:15px;line-height:1.6}
.adw-ff .ff-message-success strong{color:#0b3d1d}
/* Fluent Forms lays its two-up rows out with its own grid; keep the column gap consistent
   with the rest of the card rather than its default 20px. */
.adw-ff .ff-t-cell{padding-left:9px;padding-right:9px}
.adw-ff .ff-t-container{margin-left:-9px;margin-right:-9px}
@media(max-width:640px){.adw-ff .ff-t-cell{padding-left:0;padding-right:0}.adw-ff .ff-t-container{margin-left:0;margin-right:0}.adw-ff .ff-btn-submit{width:100%}}

/* ADW homepage search: let the results panel escape the hero */
/* section.hero uses overflow:hidden to contain its decorative bleed, which also
   clipped the search dropdown. Unclipped on the homepage only, with overflow-x
   guarded on the page so the decoration still cannot cause sideways scroll. */
body.home{overflow-x:hidden}
body.home section.hero{overflow:visible}
body.home .adw-search{z-index:60}
body.home .adw-results{z-index:61}

/* ADW: fixed header must clear the WordPress admin bar */
/* The header is position:fixed;top:0, so when an admin is logged in the 32px
   admin bar overlaps it and the logo and nav get cut off. Visitors never saw
   this, but anyone editing the site did. WordPress switches the bar to 46px
   and non-fixed below 782px, hence the two rules. */
body.admin-bar header{top:32px}
@media screen and (max-width:782px){body.admin-bar header{top:46px}}

/* ADW: breathing room under the homepage search before the hero buttons */
/* The suggestion chips sat flush against Explore our brands with a 0px gap. */
body.home .adw-search{margin-bottom:26px}
body.home .hero-cta{margin-top:4px}

/* ADW: header nav now carries six items plus two buttons */
/* Adding Rentals pushed the desktop nav onto three lines. Tightening the gap
   and letter-spacing keeps everything on one row without shrinking the type to
   an unreadable size. */
header nav{gap:22px}
header nav a{white-space:nowrap;letter-spacing:.2px}
@media(min-width:900px) and (max-width:1200px){header nav{gap:15px}header nav a{font-size:14px}}

/* ADW: separate the nav from the header buttons */
/* With six nav items the last link (Contact) ended flush against the DEMO &
   TEST button - measured 0px apart - so they read as overlapping. A margin on
   the nav is used rather than a gap change because the theme sets the nav gap
   inline with higher specificity. */
body header nav{margin-right:30px}
@media(min-width:900px) and (max-width:1240px){body header nav{margin-right:18px;gap:20px}body header nav a{font-size:14px}}

/* ADW: smaller header logo, clear of the navigation */
/* The logo rendered 357px wide and ended at exactly the same x as the Home
   link - no gap at all - so the wordmark read as overlapping the menu. Reduced
   from 30px to 24px tall (about 285px wide) with a hard right margin, and
   smaller again on the tablet range where the six nav items are tightest. */
body header a.logo{margin-right:38px;flex:0 0 auto}
body header a.logo img{height:24px;width:auto;max-width:none;display:block}
@media(min-width:900px) and (max-width:1240px){body header a.logo{margin-right:22px}body header a.logo img{height:21px}}
@media(max-width:899px){body header a.logo{margin-right:0}body header a.logo img{height:22px}}

/* ADW: Brands & Industries dropdown menus */
/* Brands and Industries previously pointed at homepage anchors, so there was
   nothing to navigate to. They now open a panel listing the four brand hubs and
   the five sector pages - which also gives the sector pages a home in the
   navigation for the first time. Opens on hover and on :focus-within, so it is
   keyboard reachable without any JavaScript. The 14px top padding on .subm is a
   deliberate hover bridge: without it the panel closes as the pointer travels
   from the label down into the list. */
body header nav.menu{align-items:center}
body header .nav-item.has-sub{position:relative;display:flex;align-items:center}
body header .nav-item.has-sub > a{display:inline-flex;align-items:center;gap:5px}
body header .nav-item.has-sub > a:after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .2s,opacity .2s}
body header .nav-item.has-sub:hover > a:after,body header .nav-item.has-sub:focus-within > a:after{opacity:1;transform:rotate(225deg) translateY(-3px)}
body header .subm{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:262px;padding:14px 8px 8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120}
body header .nav-item.has-sub:hover .subm,body header .nav-item.has-sub:focus-within .subm{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
body header .subm:before{content:"";position:absolute;inset:14px 0 0 0;background:#fff;border:1px solid #e6e9ee;border-radius:14px;box-shadow:0 24px 54px rgba(12,16,22,.17)}
body header .subm > a{position:relative;display:block;padding:10px 14px;border-radius:9px;text-decoration:none;line-height:1.25;transition:background .15s}
body header .subm > a:hover{background:#f2f6fa}
body header .subm .sm-t{display:block;font-weight:600;font-size:14.5px;color:#0c1016}
body header .subm .sm-d{display:block;font-size:12.5px;color:#6b7480;margin-top:2px}
body header .subm > a:focus-visible{outline:2px solid #0075c9;outline-offset:1px}

/* Mobile: the panel pattern does not work on touch, so the sub-items are shown
   inline and indented inside the burger menu instead. */
#adw-mobile-menu .mm-sub{padding-left:26px !important;font-size:15px !important;opacity:.82}
#adw-mobile-menu .mm-sub:before{content:"—";margin-right:8px;opacity:.45}

/* Caret correction: the theme already uses nav a::after as an absolutely
   positioned underline indicator, so styling that pseudo-element turned the
   chevron into a diamond floating below the label. The caret now hangs off the
   .nav-item wrapper, which is a flex container, so it sits inline after the
   text and leaves the theme's underline alone. */
body header .nav-item.has-sub > a:after{content:none;width:auto;height:auto;border:0;transform:none;opacity:1}
body header .nav-item.has-sub{gap:6px}
body header .nav-item.has-sub:after{content:"";width:5px;height:5px;flex:0 0 auto;border-right:1.6px solid #3d4653;border-bottom:1.6px solid #3d4653;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .2s,opacity .2s}
body header .nav-item.has-sub:hover:after,body header .nav-item.has-sub:focus-within:after{opacity:.95;transform:rotate(225deg) translateY(-3px)}

/* ADW: footer social icons + legal link (light footer, so ink on white -> blue on hover).
   `footer .foot-social a` deliberately outranks `.foot-grid a` (which forces display:block
   and vertical padding on every footer link). */
.foot-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
footer .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink2);transition:background .2s,border-color .2s,color .2s,transform .2s}
footer .foot-social a svg{width:18px;height:18px;display:block}
footer .foot-social a:hover,footer .foot-social a:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
footer .foot-social a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.foot-bot a{color:var(--ink3);text-decoration:none;transition:.2s}
.foot-bot a:hover{color:var(--blue);text-decoration:underline}
@media(max-width:640px){.foot-social{margin-bottom:8px}}

/* ADW: legal/long-form pages rendered through page.php (Privacy Policy et al). */
.adw-content-area li{margin-bottom:8px}
.adw-content-area h2:first-of-type{margin-top:26px}
.adw-content-area .adw-legal-meta{font-size:14px;color:var(--ink3);margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.adw-content-area table{width:100%;max-width:760px;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.adw-content-area table th,.adw-content-area table td{text-align:left;padding:11px 14px;border:1px solid var(--line);color:var(--ink2);vertical-align:top}
.adw-content-area table th{background:var(--alt);color:var(--ink);font-family:'Oswald';text-transform:uppercase;font-size:13px;letter-spacing:.02em}

/* ADW: vertical (YouTube Shorts) video. The facade defaults to 16:9, which would
   letterbox a 9:16 clip into a thin strip. */
.adw-video-portrait .adw-video{aspect-ratio:9/16;max-width:420px;margin-left:auto;margin-right:auto}

/* ADW: two vertical clips side by side rather than stacked, which would make the
   section extremely tall on desktop. Collapses to one column on small screens. */
.adw-video-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:880px;margin:0 auto 28px}
.adw-video-pair .adw-video-portrait .adw-video{max-width:100%;margin-bottom:0}

/* ADW: three landscape clips as an even showcase row on sector pages. Falls back
   to two-up, then one-up, as the viewport narrows. */
.adw-video-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.adw-video-trio .adw-video{margin-bottom:0}

/* ADW: the hero button row and the closing panel are both class="cta", so the hero
   row was inheriting the dark panel treatment (black box, 70px padding, radial
   glows) behind its two buttons. The per-template .phero .cta rule only set
   display/gap, so it never reset the rest. Undo the panel look inside .phero. */
.phero .cta{background:none;padding:0;border-radius:0;text-align:left;color:inherit;overflow:visible;box-shadow:none}
.phero .cta::before,.phero .cta::after{content:none}
.phero .cta .btn-g{color:var(--ink);border-color:var(--line2)}
.phero .cta .btn-g:hover{border-color:var(--ink)}