/* ===========================================================================
   Aero Lube International — component styles

   Every inline style attribute in the design source was collapsed into a class
   here, so the markup carries no presentation. Rules are grouped by the section
   they belong to and named for it: .al-hero-*, .al-product-*, .al-contact-* and
   so on. Classes shared by three or more sections sit in the Base group.

   Paired with style.css, which holds the layout, design tokens and motion.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Reveal states — set by the scroll observer via [data-shown]
   --------------------------------------------------------------------------- */
.al-reveal { opacity:0; transform:translateY(18px) }
.al-reveal-lg { opacity:0; transform:translateY(24px) }
.al-reveal-md { opacity:0; transform:translateY(22px) }
.al-reveal-sm { opacity:0; transform:translateY(20px) }
.al-reveal-xs { opacity:0; transform:translateY(16px) }

/* ---------------------------------------------------------------------------
   Shared type + icon helpers
   --------------------------------------------------------------------------- */
.al-mono { font-family:'IBM Plex Mono',monospace }
.al-burger-bar { display:block; width:18px; height:1.5px; background:#fff }

/* ---------------------------------------------------------------------------
   Base — used across three or more sections
   --------------------------------------------------------------------------- */
.al-base-wrap { position:relative; max-width:1360px; margin:0 auto }
.al-base-box { max-width:1360px; margin:0 auto }
.al-base-label-xs { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.18em; color:#E7B364 }
.al-base-label-xs-a { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.18em; color:#1268B3 }
.al-base-row { display:flex; align-items:center; gap:14px; margin-bottom:clamp(16px,2vw,24px) }
.al-base-block { display:block; width:clamp(22px,3vw,40px); height:1px; background:#E7B364; flex:none }
.al-logo-mobil { background-image:url('../images/logos/mobil.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:62%; max-height:44%; margin:0 auto }
.al-logo-shell { background-image:url('../images/logos/shell.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:26%; max-height:86%; margin:0 auto }
.al-logo-castrol { background-image:url('../images/logos/castrol.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:70%; max-height:40%; margin:0 auto }
.al-logo-caltex { background-image:url('../images/logos/caltex.svg'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:52%; max-height:62%; margin:0 auto }
.al-logo-enoc { background-image:url('../images/logos/enoc.svg'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:88%; max-height:66%; margin:0 auto }
.al-logo-fuchs { background-image:url('../images/logos/fuchs.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:70%; max-height:52%; margin:0 auto }
.al-logo-kluber { background-image:url('../images/logos/kluber.svg'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:58%; max-height:52%; margin:0 auto }
.al-base-label-xs-b { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.2em; color:#E7B364 }
.al-base-label-xs-c { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.18em; color:#72C5F4 }
.al-base-block-a { opacity:0; transform:none }
.al-base-block-b { display:block; width:clamp(24px,4vw,48px); height:1px; background:#1268B3 }
.al-logo-exxonmobil-aviation { background-image:url('../images/logos/exxonmobil-aviation-trim.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:74%; max-height:58%; margin:0 auto }
.al-logo-aeroshell { background-image:url('../images/logos/aeroshell-trim.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:74%; max-height:44%; margin:0 auto }
.al-logo-eastman-aviation { background-image:url('../images/logos/eastman-aviation-trim.png'); background-size:contain; background-position:center; background-repeat:no-repeat; max-width:66%; max-height:44%; margin:0 auto }

/* ---------------------------------------------------------------------------
   Home — hero (scroll-scrubbed scenes)
   --------------------------------------------------------------------------- */
.al-hero-box { max-width:1360px; margin:0 auto; width:100% }
.al-hero-block { display:block; width:clamp(24px,4vw,48px); height:1px; background:#72C5F4; flex:none }
.al-hero-block-a { left:0; right:0; bottom:clamp(84px,12vh,150px); padding:0 clamp(20px,4vw,48px) }
.al-hero-heading-xl { margin:0; max-width:18ch; font-size:clamp(28px,3.6vw,54px); line-height:1.04; letter-spacing:-.032em; font-weight:700; color:#fff }
.al-hero-text-sm { margin:clamp(16px,2vw,24px) 0 0; max-width:44ch; font-size:clamp(16px,1.7vw,18.5px); line-height:1.62; color:#fff }
.al-hero-block-b { display:block; width:clamp(24px,4vw,48px); height:1px; background:#E7B364; flex:none }
.al-hero-block-c { display:block; width:clamp(24px,4vw,48px); height:1px; background:#72C5F4 }
.al-hero-ink { color:#72C5F4 }
.al-hero-wrap { position:relative; height:820vh; background:#041C36; margin-top:calc(-1 * var(--al-top,88px)) }
.al-hero-sticky { position:sticky; top:0; height:100vh; min-height:560px; overflow:hidden; background:#041C36 }
.al-img-hero-droplet { background-image:url('../images/hero-droplet.jpg') }
.al-img-hero-flow { background-image:url('../images/hero-flow.jpg') }
.al-img-hero-approach { background-image:url('../images/hero-approach.jpg') }
.al-img-hero-film { background-image:url('../images/hero-film.jpg') }
.al-img-hero-assembly { background-image:url('../images/hero-assembly.jpg') }
.al-img-hero-closing { background-image:url('../images/hero-closing.jpg'); background-position:center 52% }
.al-hero-overlay { position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(66% 56% at 50% 50%,rgba(4,28,54,.88) 0%,rgba(4,28,54,.5) 58%,rgba(4,28,54,.12) 100%) }
.al-hero-stack { top:0; bottom:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(70px,9vh,110px) clamp(20px,4vw,48px); text-align:center }
.al-hero-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin-bottom:clamp(18px,2.4vw,26px) }
.al-hero-heading-xl-a { margin:0; max-width:20ch; font-size:clamp(32px,5vw,72px); line-height:1.03; letter-spacing:-.035em; font-weight:700; color:#fff }
.al-hero-text-sm-a { margin:clamp(20px,2.4vw,30px) 0 0; max-width:54ch; font-size:clamp(16.5px,1.7vw,20px); line-height:1.62; color:#fff }
.al-hero-row-a { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(28px,3.4vw,42px) }
.al-hero-btn { display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:19px 34px; background:#1268B3; color:#fff; border-radius:10px; font-size:16px; font-weight:700; transition:background .35s ease,transform .35s ease }
.al-hero-btn-a { display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:19px 34px; border:1px solid #fff; background:#fff; color:#062A50; border-radius:10px; font-size:16px; font-weight:700; transition:background .35s ease,color .35s ease,transform .35s ease }
.al-hero-scrim { position:absolute; top:0; bottom:0; left:-40%; width:34%; pointer-events:none; opacity:0; mix-blend-mode:screen; background:linear-gradient(100deg,transparent,rgba(240,205,140,.3) 46%,transparent) }
.al-hero-scrim-a { position:absolute; inset:0; pointer-events:none; opacity:.42; background:linear-gradient(96deg,rgba(4,28,54,.88) 0%,rgba(4,28,54,.5) 30%,rgba(4,28,54,0) 58%,rgba(4,28,54,.22) 100%),linear-gradient(0deg,rgba(4,28,54,.7) 0%,rgba(4,28,54,0) 34%) }
.al-hero-stack-a { top:0; bottom:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:clamp(70px,9vh,110px) clamp(20px,4vw,48px) clamp(70px,9vh,110px); text-align:center; overflow:hidden }
.al-hero-row-b { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin-bottom:clamp(22px,3vw,34px); max-width:100% }
.al-hero-label-xs { font-family:'IBM Plex Mono',monospace; font-size:clamp(14px,1.25vw,15px); letter-spacing:.14em; font-weight:500; color:#9FD8F8; text-shadow:0 1px 10px rgba(4,28,54,.95),0 0 3px rgba(4,28,54,.8); text-align:center }
.al-hero-heading-xl-b { margin:0; max-width:19ch; font-size:clamp(38px,6.4vw,84px); line-height:1.02; letter-spacing:-.035em; font-weight:700; color:#fff; text-wrap:balance }
.al-hero-text-md { margin:clamp(24px,3vw,34px) 0 0; max-width:56ch; font-size:clamp(17px,1.8vw,21px); line-height:1.62; color:#fff }
.al-hero-row-c { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(32px,4vw,46px) }
.al-hero-btn-b { display:inline-flex; align-items:center; gap:12px; padding:19px 34px; background:#1268B3; color:#fff; border-radius:10px; font-size:16px; font-weight:700; transition:background .35s ease,transform .35s ease }
.al-hero-btn-c { display:inline-flex; align-items:center; gap:12px; padding:19px 34px; border:1px solid #fff; background:#fff; color:#062A50; border-radius:10px; font-size:16px; font-weight:700; transition:background .35s ease,color .35s ease,transform .35s ease }
.al-hero-row-d { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(26px,3.2vw,42px); padding-top:20px; border-top:1px solid rgba(255,255,255,.3); font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.16em; color:#fff }

/* ---------------------------------------------------------------------------
   Home — sector stage (Aviation / Industrial & Marine)
   --------------------------------------------------------------------------- */
.al-img-av-fan { background-image:url('../images/av-fan.jpg') }
.al-sector-stack { top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(20px,4vw,48px) }
.al-sector-block { display:block; width:clamp(24px,4vw,48px); height:1px; background:#E7B364 }
.al-img-im-mid { background-image:url('../images/im-mid.jpg'); background-position:center 54% }
.al-sector-row { display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,2.4vw,28px) }
.al-sector-heading-xl { margin:0; max-width:18ch; font-size:clamp(32px,5.2vw,72px); line-height:1.02; letter-spacing:-.035em; font-weight:700; color:#fff }
.al-sector-text-sm { margin:clamp(20px,2.6vw,30px) 0 0; max-width:44ch; font-size:clamp(17px,1.75vw,20px); line-height:1.62; color:#fff }
.al-sector-space { margin-top:clamp(28px,3.4vw,42px) }
.al-img-av-bg { background-image:url('../images/av-bg.jpg') }
.al-img-block { background-image:url('../images/av-fan.jpg'); background-position:center 48% }
.al-img-block-a { background-image:url('../images/av-fan.jpg'); background-position:center 52% }
.al-img-hero-network { background-image:url('../images/hero-network.jpg') }
.al-img-im-fg { background-image:url('../images/im-fg.jpg') }
.al-sector-scrim { position:absolute; top:0; bottom:0; left:-40%; width:32%; pointer-events:none; opacity:0; mix-blend-mode:screen; background:linear-gradient(100deg,transparent,rgba(231,179,100,.28) 46%,transparent) }
.al-sector-scrim-a { position:absolute; inset:0; pointer-events:none; opacity:.46; background:linear-gradient(96deg,rgba(4,28,54,.92) 0%,rgba(4,28,54,.62) 34%,rgba(4,28,54,.1) 68%,rgba(4,28,54,.42) 100%),linear-gradient(0deg,rgba(4,28,54,.8) 0%,rgba(4,28,54,0) 44%) }
.al-sector-overlay { position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(58% 48% at 50% 52%,rgba(4,28,54,0) 30%,rgba(4,28,54,.86) 100%) }
.al-sector-row-a { display:flex; align-items:center; gap:14px; margin-bottom:20px }
.al-sector-heading-xl-a { margin:0; max-width:20ch; font-size:clamp(28px,3.9vw,52px); line-height:1.08; letter-spacing:-.03em; font-weight:700; color:#fff }
.al-sector-text-sm-a { margin:clamp(22px,2.8vw,32px) 0 0; max-width:46ch; font-size:17.5px; line-height:1.65; color:#fff }
.al-sector-scrim-b { position:absolute; right:clamp(20px,4vw,48px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:10px 8px; background:linear-gradient(90deg,rgba(4,28,54,0),rgba(4,28,54,.62)); border-right:1px solid rgba(231,179,100,.34) }

/* ---------------------------------------------------------------------------
   Home — brand tabs + logo grid
   --------------------------------------------------------------------------- */
.al-brandtab-row { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(4px,1vw,18px); border-bottom:1px solid #E8EDF3; margin-bottom:clamp(22px,2.6vw,34px) }
.al-brandtab-box { max-width:70%; max-height:42% }
.al-brandtab-box-a { max-width:30%; max-height:74% }
.al-brandtab-box-b { max-width:74%; max-height:40% }
.al-brandtab-box-c { max-width:52%; max-height:58% }
.al-brandtab-box-d { max-width:84%; max-height:60% }
.al-brandtab-box-e { max-width:74%; max-height:44% }
.al-brandtab-box-f { max-width:62%; max-height:50% }
.al-brandtab-box-g { max-width:78%; max-height:48% }
.al-brandtab-box-h { max-width:60%; max-height:58% }
.al-brandtab-box-i { max-width:76%; max-height:48% }
.al-brandtab-row-a { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px); margin-top:clamp(24px,2.8vw,38px) }
.al-brandtab-btn { display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:16px 32px; border:1px solid #062A50; color:#062A50; border-radius:10px; font-size:15px; font-weight:700; transition:background .35s ease,color .35s ease }

/* ---------------------------------------------------------------------------
   Home — kinetic marquee
   --------------------------------------------------------------------------- */
.al-marquee-row { display:flex; align-items:center; gap:clamp(28px,4vw,60px); font-size:clamp(26px,4vw,58px); font-weight:700; letter-spacing:-.035em; color:#fff; white-space:nowrap }
.al-marquee-block { display:block; width:9px; height:9px; background:#1268B3; flex:none }
.al-marquee-rule { position:relative; background:#041C36; color:#fff; padding:clamp(22px,2.6vw,34px) 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08) }
.al-marquee-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.al-marquee-scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,28,54,.93),rgba(4,28,54,.84) 50%,rgba(4,28,54,.93)); pointer-events:none }
.al-marquee-row-a { position:relative; display:flex; gap:clamp(28px,4vw,60px); width:max-content; animation:alMarquee 34s linear infinite; align-items:center }

/* ---------------------------------------------------------------------------
   Home — about band
   --------------------------------------------------------------------------- */
.al-about-heading-sm { margin:0 0 6px; font-size:18px; line-height:1.3; letter-spacing:-.02em; font-weight:700; color:#062A50 }
.al-about-text-xs { margin:0; font-size:15.5px; line-height:1.6; color:#5A6C82; max-width:42ch }
.al-about-wrap { position:relative; background:#fff; padding:clamp(58px,6vw,86px) clamp(20px,4vw,48px) }
.al-about-box { max-width:76ch; margin-bottom:clamp(30px,3.4vw,48px) }
.al-about-row { display:flex; align-items:center; gap:14px; margin-bottom:22px }
.al-about-heading-xl { margin:0; font-size:clamp(28px,3.9vw,52px); line-height:1.08; letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-about-text-sm { margin:clamp(26px,3vw,36px) 0 0; max-width:56ch; font-size:clamp(16px,1.7vw,18.5px); line-height:1.7; color:#42546B }
.al-about-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,3.4vw,52px); align-items:stretch }
.al-about-wrap-a { position:relative; min-height:clamp(340px,38vw,470px); overflow:hidden; background:#041C36 }
.al-img-block-b { background-image:url('../images/im-mid.jpg') }
.al-about-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,28,54,.28),rgba(4,28,54,.05) 40%,rgba(4,28,54,.5)); pointer-events:none }
.al-about-block { position:absolute; right:clamp(16px,2vw,26px); bottom:clamp(16px,2vw,26px); width:clamp(150px,17vw,214px); height:clamp(104px,12vw,146px); overflow:hidden; background:#0B2A4A; box-shadow:0 24px 48px -22px rgba(4,28,54,.7) }
.al-about-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.al-about-block-a { position:absolute; left:0; top:clamp(22px,3vw,36px); background:#062A50; color:#fff; padding:14px 20px; pointer-events:none }
.al-about-label-xs { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.18em; color:#72C5F4; margin-bottom:7px }
.al-about-heading-xs { font-size:15.5px; font-weight:700; letter-spacing:-.02em }
.al-about-row-a { display:flex; align-items:flex-end; gap:clamp(16px,2vw,26px); padding-bottom:clamp(18px,2vw,26px); margin-bottom:2px; }
.al-about-heading-xl-a { font-size:clamp(56px,6.6vw,96px); line-height:.86; font-weight:800; letter-spacing:-.05em; color:#062A50; font-variant-numeric:tabular-nums }
.al-about-label-xs-a { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.16em; color:#5A6C82; max-width:12ch; padding-bottom:clamp(8px,1vw,14px) }
.al-about-btn { display:inline-flex; align-items:center; gap:12px; margin-top:clamp(20px,2.2vw,30px); padding:16px 28px; border:1px solid #062A50; color:#062A50; border-radius:10px; font-size:15.5px; font-weight:700; transition:background .35s ease,color .35s ease }
.al-about-block-b { font-style:normal; color:#72C5F4; padding:0 10px }
.al-img-block-c { background-image:url('../images/about-av-bg.jpg'); background-position:center 46% }
.al-about-scrim-a { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#041C36 0%,#041C36 30%,rgba(4,28,54,.62) 50%,rgba(4,28,54,.14) 74%,rgba(4,28,54,.34) 100%) }
.al-about-block-c { display:block; width:54px; height:1px; margin:14px 0 0 auto; background:rgba(255,255,255,.55) }
.al-about-wrap-b { position:relative; z-index:1; width:100%; max-width:1360px; margin:0 auto; padding:clamp(46px,6vw,74px) clamp(20px,4vw,48px) }
.al-about-heading-xl-b { margin:0; max-width:20ch; font-size:clamp(30px,4.6vw,62px); line-height:1.04; letter-spacing:-.034em; font-weight:700; color:#fff }
.al-about-text-sm-a { margin:clamp(18px,2.2vw,26px) 0 0; max-width:38ch; font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:#fff }
.al-about-row-b { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:clamp(26px,3.2vw,40px) }
.al-about-block-d { display:block; width:clamp(26px,4vw,52px); height:1px; background:#E7B364 }
.al-about-label-xs-b { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.2em; color:#fff }
.al-about-block-e { display:block; width:clamp(22px,3vw,40px); height:1px; background:#1268B3; flex:none }
.al-about-label-xs-c { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.2em; color:#1268B3 }
.al-about-heading-xl-c { margin:0; font-size:clamp(26px,3.4vw,46px); line-height:1.08; letter-spacing:-.032em; font-weight:700; color:#062A50 }
.al-about-block-f { background:#fff; color:#062A50; padding:clamp(52px,6vw,88px) 0 0 }
.al-about-box-a { max-width:1360px; margin:0 auto; padding:0 clamp(20px,4vw,48px) }
.al-about-reveal { opacity:0; transform:translateY(20px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(22px,3.4vw,56px); align-items:end; margin-bottom:clamp(30px,3.6vw,48px) }
.al-about-text-sm-b { margin:0; max-width:46ch; font-size:16px; line-height:1.62; color:#42546B }
.al-about-row-c { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:clamp(20px,2.4vw,28px) }
.al-about-label-xs-d { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.16em; color:#A8B4C4 }
.al-about-heading-sm-a { margin:0 0 12px; font-size:clamp(16px,1.5vw,18px); line-height:1.3; letter-spacing:.01em; font-weight:700; color:#062A50 }
.al-about-text-xs-a { margin:0; max-width:30ch; font-size:15px; line-height:1.6; color:#5A6C82 }
.al-about-fill { background:#F1F5F9; padding:clamp(52px,6.4vw,96px) clamp(20px,4vw,48px) }
.al-about-reveal-a { opacity:0; transform:translateY(20px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(22px,3.4vw,56px); align-items:end; margin-bottom:clamp(34px,4.2vw,58px) }
.al-about-text-sm-c { margin:0; max-width:44ch; font-size:16px; line-height:1.62; color:#42546B }
.al-about-scrim-b { position:absolute; inset:0; background:linear-gradient(90deg,#041C36 0%,rgba(4,28,54,.94) 42%,rgba(4,28,54,.5) 78%,rgba(4,28,54,.4) 100%) }
.al-about-wrap-c { position:relative; z-index:1; max-width:46ch }
.al-about-row-d { display:flex; align-items:center; gap:14px; margin-bottom:clamp(16px,2vw,22px) }
.al-about-grid-a { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:11px; background:rgba(114,197,244,.16); color:#72C5F4 }
.al-about-box-b { width:20px; height:20px }
.al-about-text-sm-d { margin:0; font-size:clamp(16.5px,1.8vw,20px); line-height:1.58; color:#fff }
.al-img-proc-oil-gear { background-image:url('../images/proc-oil-gear.jpg'); background-position:right center }
.al-img-global-map { background-image:url('../images/global-map.jpg'); background-position:right center }
.al-about-block-g { display:block; width:clamp(22px,3vw,40px); height:1px; background:#72C5F4; flex:none }
.al-about-fill-a { background:#fff; padding:clamp(52px,6.4vw,96px) clamp(20px,4vw,48px) }
.al-about-reveal-b { opacity:0; transform:translateY(20px); margin-bottom:clamp(30px,3.6vw,48px) }
.al-about-heading-lg { margin:0; font-size:clamp(26px,3.4vw,44px); line-height:1.1; letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-about-grid-b { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2vw,26px) }
.al-about-fill-b { background:#fff; padding:clamp(10px,1.2vw,18px) clamp(20px,4vw,48px) clamp(52px,6.4vw,96px) }
.al-about-wrap-d { position:relative; overflow:hidden; background:#041C36; color:#fff; padding:clamp(48px,6vw,86px) clamp(20px,4vw,48px) }
.al-img-quote-oil-droplets { background-image:url('../images/quote-oil-droplets.jpg') }
.al-about-label-xs-e { position:absolute; right:clamp(18px,3vw,44px); top:50%; transform:translateY(-50%); z-index:1; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.18em; line-height:1.85; color:#fff; text-shadow:0 2px 14px rgba(4,28,54,.8) }
.al-about-grid-c { position:relative; z-index:2; max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.4vw,60px); align-items:center }
.al-about-label-xs-f { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.2em; color:#72C5F4 }
.al-about-heading-lg-a { margin:0; max-width:20ch; font-size:clamp(26px,3.4vw,44px); line-height:1.08; letter-spacing:-.032em; font-weight:700; color:#fff }
.al-about-reveal-c { opacity:0; transform:translateY(20px); max-width:46ch }
.al-about-text-sm-e { margin:0 0 clamp(22px,2.6vw,30px); font-size:16.5px; line-height:1.64; color:#fff }
.al-about-row-e { display:flex; flex-wrap:wrap; gap:14px }
.al-about-btn-a { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:15px 30px; border-radius:10px; background:#1268B3; color:#fff; font-size:15px; font-weight:700; transition:background .35s ease,color .35s ease,transform .35s ease }

/* ---------------------------------------------------------------------------
   Home — why Aero Lube
   --------------------------------------------------------------------------- */
.al-why-heading-sm { margin:0 0 12px; font-size:clamp(17px,1.5vw,20px); line-height:1.24; letter-spacing:-.022em; font-weight:700; color:#fff; max-width:22ch }
.al-why-text-sm { margin:0; font-size:16px; line-height:1.62; color:#fff; max-width:34ch }
.al-why-space { margin:clamp(48px,6vw,88px) 0 clamp(44px,5.4vw,80px) }
.al-img-why-bearing-oil { background-image:url('../images/why-bearing-oil.jpg'); background-image:url('../images/why-bearing-oil.jpg') }
.al-why-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(4,28,54,.55) 0%,rgba(4,28,54,.12) 34%,rgba(4,28,54,.3) 68%,rgba(4,28,54,.94) 100%) }
.al-why-row { display:flex; align-items:center; gap:16px; margin-bottom:clamp(6px,1vw,14px) }
.al-why-block { flex:1; height:1px; background:rgba(255,255,255,.12) }
.al-why-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(28px,3.4vw,60px) }
.al-why-block-a { font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------------------
   Home — how we support you
   --------------------------------------------------------------------------- */
.al-process-wrap { position:relative; height:400vh; background:#fff; color:#062A50 }
.al-process-row { display:flex; align-items:center; gap:14px; margin-bottom:clamp(12px,1.5vw,18px) }
.al-process-block { display:block; width:clamp(24px,3vw,42px); height:1px; background:#1268B3; flex:none }
.al-process-heading-xl { margin:0 0 clamp(12px,1.5vw,18px); font-size:clamp(28px,3vw,46px); line-height:1.06; letter-spacing:-.035em; font-weight:700; color:#062A50 }
.al-process-text-sm { margin:0; max-width:46ch; font-size:clamp(16px,1.6vw,18.5px); line-height:1.62; color:#42546B }
.al-process-text-sm-a { font-size:16.5px; color:#42546B }
.al-img-block-d { background-image:url('../images/proc-oil-gear.jpg'); background-position:center 42%; background-image:url('../images/proc-oil-gear.jpg') }
.al-img-block-e { background-image:url('../images/proc-02.jpg'); background-position:center 52%; background-image:url('../images/proc-02.jpg') }
.al-img-block-f { background-image:url('../images/proc-03.jpg'); background-position:center 50%; background-image:url('../images/proc-03.jpg') }
.al-img-block-g { background-image:url('../images/proc-04.jpg'); background-position:center 54%; background-image:url('../images/proc-04.jpg') }
.al-process-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.06) 22%,transparent 45%) }

/* ---------------------------------------------------------------------------
   Home — product documentation
   --------------------------------------------------------------------------- */
.al-docs-stack { display:flex; flex-direction:column; gap:3px; min-width:0 }
.al-docs-box { width:15px; height:15px }
.al-docs-wrap { position:relative; overflow:hidden; background:#041C36; color:#fff }
.al-docs-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(4,22,44,.97) 0%,rgba(4,22,44,.9) 30%,rgba(4,22,44,.52) 52%,rgba(4,22,44,.12) 74%,rgba(4,22,44,.05) 100%) }
.al-docs-scrim-a { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(4,28,54,.5) 0%,rgba(4,28,54,0) 24%,rgba(4,28,54,0) 74%,rgba(4,28,54,.62) 100%) }
.al-docs-box-a { width:196px; height:48px; overflow:hidden; position:relative; filter:brightness(0) invert(1); margin-bottom:clamp(14px,1.8vw,22px) }
.al-docs-block { position:absolute; width:300px; height:300px; left:-49px; top:-130px }
.al-docs-block-a { display:block; width:clamp(24px,3vw,42px); height:1px; background:#E7B364; flex:none }
.al-docs-heading-xl { margin:0 0 clamp(16px,2vw,24px); max-width:650px; font-size:clamp(30px,3.6vw,56px); line-height:1.04; letter-spacing:-.035em; font-weight:700; color:#fff }
.al-docs-text-md { margin:0 0 12px; max-width:46ch; font-size:clamp(17px,1.8vw,21px); line-height:1.55; color:#fff }
.al-docs-text-xs { margin:0; max-width:44ch; font-size:15.5px; line-height:1.62; color:#C8D6E4 }
.al-docs-block-b { display:block; width:52px; height:2px; background:#E7B364; margin-bottom:clamp(20px,2.4vw,28px) }
.al-docs-row { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2vw,28px) }
.al-docs-text-sm { font-size:16px; color:#fff }

/* ---------------------------------------------------------------------------
   Shared — request a quote CTA
   --------------------------------------------------------------------------- */
.al-cta-block { display:block; overflow:hidden }
.al-cta-wrap { position:relative; background:#fff; color:#062A50; padding:clamp(72px,8.4vw,128px) clamp(20px,5vw,90px) }
.al-cta-scrim { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,rgba(18,104,179,.05) 1px,transparent 1px); background-size:96px 100% }
.al-cta-label-xs { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.16em; color:#1268B3 }
.al-cta-heading-xl { margin:0; max-width:16ch; font-size:clamp(32px,4.4vw,68px); line-height:1.05; letter-spacing:-.035em; font-weight:700; color:#062A50 }
.al-cta-text-md { margin:clamp(22px,2.6vw,32px) 0 0; max-width:48ch; font-size:clamp(17px,1.8vw,21px); line-height:1.66; color:#42546B }
.al-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,2.4vw,32px); margin-top:clamp(30px,3.6vw,46px) }
.al-img-quote-turbine-oil { background-image:url('../images/quote-turbine-oil.jpg') }
.al-cta-scrim-a { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.34) 0%,rgba(4,28,54,.04) 34%,rgba(4,28,54,.14) 100%) }
.al-cta-scrim-b { position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#E7B364,transparent); transform:scaleX(0); transform-origin:center }

/* ---------------------------------------------------------------------------
   About — Who We Are / Director's Note stage
   --------------------------------------------------------------------------- */
.al-img-docs-cinematic { background-image:url('../images/av-fan-bg.jpg') }
.al-abstage-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,28,54,.72) 0%,rgba(4,28,54,.3) 38%,rgba(4,28,54,.82) 100%) }
.al-abstage-stack { position:absolute; left:clamp(18px,2.2vw,28px); top:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:6px }
.al-abstage-label-md { font-family:'IBM Plex Mono',monospace; font-size:clamp(20px,2.2vw,28px); letter-spacing:.06em; color:#fff }
.al-abstage-heading-lg { font-size:clamp(22px,2.5vw,32px); line-height:1.08; letter-spacing:-.022em; font-weight:700; color:#fff }
.al-abstage-row { position:absolute; left:clamp(18px,2.2vw,28px); right:clamp(18px,2.2vw,28px); bottom:clamp(18px,2.2vw,26px); display:flex; align-items:flex-end; justify-content:space-between; gap:16px }
.al-abstage-label-xs { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.14em; line-height:1.6; color:#fff }
.al-abstage-box { width:16px; height:16px }
.al-img-block-h { background-image:url('../images/av-fan.jpg'); background-position:center center }
.al-img-about-building { background-image:url('../images/about-building-new.jpg') }
.about-section{background: #F5F5F5;}
.about-section h2{color: #062A50;}
.about-section p{color: #42546B;}
.about-section strong{color: #42546B;}
.about-section em{color: #42546B;opacity: 0.7;}
.about-section .al-img-about-building { background-image: none }
.about-section .al-img-docs-cinematic{ background-image: none }
.about-section [data-abtab]{ color: #42546B;}
.about-section [data-abtabrule]{ background: #42546B;}
.about-section [data-abstage]{background: #F5F5F5;}
.about-section [data-abscrim]{background: none;}
.about-section [data-abswitch]{background: none;display: none;}
.about-row{display: flex;align-items: center;flex-wrap: wrap;}
.about-row .about-left{flex: 0 0 auto;width: 50%;}
.about-row .about-right{flex: 0 0 auto;width: 50%;}
.about-row .about-right img{max-width: 100%;border-radius: 16px;}
.about-section [data-abpane]{max-width: 100%; transition: opacity 3s cubic-bezier(.22, 1, .36, 1), transform 3s cubic-bezier(.22, 1, .36, 1), visibility 3s;}
.about-section [data-abstagein]{padding-right: 0;}

/* ---------------------------------------------------------------------------
   About — core values
   --------------------------------------------------------------------------- */
.al-value-reveal { opacity:0; transform:translateY(20px); position:relative; border:1px solid #E3E8EF; padding:clamp(26px,2.8vw,36px); overflow:hidden; background:#fff }
.al-value-block { position:absolute; top:0; left:0; height:2px; width:0; background:#1268B3; transition:width .6s cubic-bezier(.22,1,.36,1) }
.al-value-row { display:flex; align-items:center; gap:16px }
.al-value-label-xs { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.16em; color:#A8B4C4; transition:color .4s ease }
.al-value-heading-md { margin:22px 0 10px; font-size:21px; letter-spacing:-.022em; font-weight:700; color:#062A50 }
.al-value-text-xs { margin:0; font-size:15.5px; line-height:1.62; color:#5A6C82; max-width:32ch }

/* ---------------------------------------------------------------------------
   About — company profile widget
   --------------------------------------------------------------------------- */
.al-profile-reveal { opacity:0; transform:translateY(18px); display:flex; align-items:center; gap:14px; margin-bottom:clamp(14px,1.8vw,20px) }
.al-profile-reveal-a { opacity:0; transform:translateY(20px); margin:0 0 clamp(12px,1.6vw,18px); font-size:clamp(24px,3vw,40px); line-height:1.1; letter-spacing:-.032em; font-weight:700; color:#fff }
.al-profile-reveal-b { opacity:0; transform:translateY(18px); margin:0; max-width:44ch; font-size:clamp(16px,1.7vw,18.5px); line-height:1.62; color:#fff }

/* ---------------------------------------------------------------------------
   Brands — portfolio cards + filter
   --------------------------------------------------------------------------- */
.al-brand-text-xs { display:block; padding:12px clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px); font-size:14.5px; line-height:1.6; color:#42546B }
.al-brand-stack { display:flex; flex-direction:column; gap:4px; min-width:0 }
.al-brand-text-xs-a { font-size:14px; line-height:1.5; color:#C8D6E4 }
.al-brand-heading-xs { font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:#fff }
.al-brand-wrap { position:relative; z-index:1; max-width:1360px; margin:0 auto; padding:clamp(44px,5.6vw,72px) clamp(20px,4vw,48px) }
.al-brand-row { display:flex; align-items:center; gap:14px; margin-bottom:clamp(14px,1.8vw,22px) }
.al-brand-space { margin-top:clamp(28px,3.4vw,44px) }
.al-brand-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#041C36 0%,#041C36 32%,rgba(4,28,54,.66) 52%,rgba(4,28,54,.16) 76%,rgba(4,28,54,.38) 100%) }
.al-brand-block { display:block; width:30px; height:1px; margin-bottom:12px; background:#E7B364 }
.al-brand-heading-xl { margin:0; max-width:24ch; font-size:clamp(28px,4.2vw,56px); line-height:1.06; letter-spacing:-.034em; font-weight:700; color:#fff }
.al-brand-text-sm { margin:clamp(18px,2.2vw,26px) 0 0; max-width:62ch; font-size:clamp(15px,1.6vw,17px); line-height:1.66; color:#fff }

/* ---------------------------------------------------------------------------
   Brand detail — hero
   --------------------------------------------------------------------------- */
.al-brandhero-wrap { position:relative; background:#041C36; color:#fff; overflow:hidden; padding:clamp(70px,8.4vw,116px) clamp(20px,4vw,48px) clamp(56px,6.4vw,86px) }
.al-brandhero-scrim { position:absolute; inset:0; background-image:linear-gradient(rgba(114,197,244,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(114,197,244,.05) 1px,transparent 1px); background-size:88px 88px }
.al-brandhero-inline { display:inline-flex; align-items:center; gap:9px; min-height:44px; font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.16em; color:#E7B364 }
.al-brandhero-row { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,3.4vw,48px); margin-top:clamp(18px,2.4vw,30px) }
.al-brandhero-grid { opacity:0; display:grid; place-items:center; width:clamp(150px,16vw,196px); height:clamp(94px,10vw,120px); flex:none; padding:16px; border-radius:10px; background:#fff }
.al-brandhero-block { display:block; width:100%; height:100%; background-position:center; background-size:contain; background-repeat:no-repeat }
.al-brandhero-reveal { opacity:0; transform:translateY(16px); display:flex; align-items:center; gap:12px; margin-bottom:14px }
.al-brandhero-block-a { display:block; width:22px; height:2px; background:#E7B364; flex:none }
.al-brandhero-reveal-a { opacity:0; transform:translateY(20px); margin:0; font-size:clamp(32px,4.8vw,62px); line-height:1.02; letter-spacing:-.035em; font-weight:700 }

/* ---------------------------------------------------------------------------
   Brand detail — product grid, search, pagination, modal
   --------------------------------------------------------------------------- */
.al-product-reveal { opacity:0; transform:translateY(18px); margin-bottom:clamp(20px,2.4vw,30px) }
.al-product-row { display:flex; align-items:center; gap:18px }
.al-product-heading-lg { margin:0; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.032em; font-weight:700; color:#062A50 }
.al-product-block { flex:1; min-width:40px; height:1px; background:#DCE3EB }
.al-product-text-sm { margin:12px 0 0; max-width:62ch; font-size:16px; line-height:1.6; color:#5A6C82 }
.al-product-block-a { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.al-product-body { display:flex; flex-direction:column; gap:5px; min-width:0; height:100% }
.al-product-icon { width:72%; height:76% }

/* ---------------------------------------------------------------------------
   Contact — form, details, map
   --------------------------------------------------------------------------- */
.al-contact-block { display:block }
.al-contact-stack { display:flex; flex-direction:column; gap:5px; min-width:0 }
.al-contact-heading-xs { font-size:15px; font-weight:700; letter-spacing:-.012em; color:#062A50 }
.al-contact-text-xs { font-size:15.5px; line-height:1.58; color:#42546B }
.al-contact-heading-xs-a { font-size:15.5px; font-weight:700; color:#fff }
.al-img-block-i { background-image:url('../images/proc-oil-gear.jpg'); background-position:center center }
.al-contact-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#041C36 0%,#041C36 30%,rgba(4,28,54,.66) 50%,rgba(4,28,54,.2) 76%,rgba(4,28,54,.4) 100%) }
.al-contact-block-a { display:block; width:42px; height:1px; margin:12px 0 0 auto; background:#E7B364 }
.al-contact-heading-xl { margin:0; font-size:clamp(30px,4.6vw,58px); line-height:1.05; letter-spacing:-.034em; font-weight:700; color:#fff }
.al-contact-text-sm { margin:clamp(16px,2vw,24px) 0 0; max-width:52ch; font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.64; color:#fff }
.al-contact-pad { padding-right:40px }
.al-contact-block-b { position:absolute; right:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:#8C9BAD; pointer-events:none }
.al-contact-space { margin-top:clamp(10px,1.1vw,13px) }
.al-contact-box { width:17px; height:17px }
.al-contact-text-xs-a { font-size:14px; line-height:1.5; color:#5A6C82 }
.al-contact-row { display:flex; align-items:center; gap:11px; min-width:0 }
.al-contact-box-a { width:18px; height:18px; flex:none; color:#1268B3 }
.al-contact-label { font-family:'IBM Plex Mono',monospace; flex:none }
.al-img-block-j { background-image:url('../images/docs-cinematic.jpg'); background-position:center 48% }
.al-contact-scrim-a { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#041C36 0%,#041C36 34%,rgba(4,28,54,.72) 54%,rgba(4,28,54,.3) 80%,rgba(4,28,54,.46) 100%) }
.al-contact-row-a { position:relative; z-index:1; max-width:1360px; margin:0 auto; padding:clamp(38px,4.6vw,66px) clamp(20px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px }
.al-contact-row-b { display:flex; align-items:center; gap:14px; margin-bottom:clamp(12px,1.6vw,18px) }
.al-contact-heading-lg { margin:0 0 12px; font-size:clamp(24px,3vw,40px); line-height:1.1; letter-spacing:-.032em; font-weight:700; color:#fff }
.al-contact-text-sm-a { margin:0; font-size:clamp(16px,1.7vw,19px); line-height:1.5; color:#fff }
.al-contact-block-c { font-weight:700 }
.al-contact-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:17px 32px; border-radius:10px; background:#fff; color:#062A50; font-size:15px; font-weight:700; white-space:nowrap; transition:background .35s ease,color .35s ease,transform .35s ease }
.al-img-block-k { background-image:url('../images/why-bearing-oil.jpg') }
.al-contact-heading-sm { font-size:16px; font-weight:700; letter-spacing:-.015em; color:#062A50 }
.al-contact-text-xs-b { font-size:14.5px; line-height:1.55; color:#5A6C82 }
.al-contact-fill { background:#F1F5F9; padding:clamp(48px,5.8vw,88px) clamp(20px,4vw,48px) }
.al-contact-heading-lg-a { margin:0 0 clamp(14px,1.8vw,20px); font-size:clamp(26px,3.2vw,42px); line-height:1.1; letter-spacing:-.032em; font-weight:700; color:#062A50 }
.al-contact-text-sm-b { margin:0; max-width:40ch; font-size:16.5px; line-height:1.66; color:#42546B }
.al-contact-fill-a { background:#fff; padding:clamp(48px,5.8vw,88px) clamp(20px,4vw,48px) }
.al-contact-heading-lg-b { margin:0 0 14px; font-size:clamp(24px,2.9vw,38px); line-height:1.12; letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-contact-text-sm-c { margin:0 0 clamp(16px,2vw,24px); max-width:44ch; font-size:16px; line-height:1.64; color:#42546B }

/* ---------------------------------------------------------------------------
   Home — remaining section styling
   --------------------------------------------------------------------------- */
.al-home-wrap { position:relative; background:#fff; color:#062A50; padding:clamp(52px,6vw,86px) clamp(20px,4vw,48px) }
.al-home-reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease; text-align:center; margin-bottom:clamp(24px,2.8vw,38px) }
.al-home-row { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:clamp(20px,2.4vw,28px) }
.al-home-heading-lg { margin:0 auto; max-width:40ch; font-size:clamp(26px,3.2vw,42px); line-height:1.12; letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-home-text-sm { margin:clamp(14px,1.8vw,20px) auto 0; max-width:60ch; font-size:17.5px; line-height:1.65; color:#42546B }
.al-home-reveal-a { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease }
.al-home-wrap-a { position:relative; height:640vh; background:#041C36 }
.al-home-row-a { display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,2.4vw,28px) }
.al-home-wrap-b { position:relative; background:#041C36; color:#fff; padding:clamp(72px,8.4vw,132px) clamp(20px,5.6vw,110px) }
.al-home-box { max-width:1460px; margin:0 auto }
.al-home-box-a { max-width:900px }
.al-home-heading-xl { margin:0; max-width:900px; font-size:clamp(34px,4.6vw,72px); line-height:1.06; letter-spacing:-.035em; font-weight:700; color:#fff }
.al-home-text-md { margin:clamp(24px,2.8vw,34px) 0 0; max-width:600px; font-size:clamp(17px,1.8vw,21px); line-height:1.68; color:#fff }

/* ---------------------------------------------------------------------------
   Brands — remaining section styling
   --------------------------------------------------------------------------- */
.al-brands-heading-lg { margin:0; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-brands-label-xs { font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.16em; line-height:1.7; text-align:right; color:#8C9BAD }
.al-brands-fill { background:#F1F5F9; padding:clamp(44px,5.4vw,80px) clamp(20px,4vw,48px) }
.al-brands-fill-a { background:#fff; padding:clamp(44px,5.4vw,80px) clamp(20px,4vw,48px) }
.al-brands-label-xs-a { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.18em; color:#1268B3 }
.al-brands-fill-b { background:#F1F5F9 }
.al-brands-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(26px,4vw,64px); align-items:center; max-width:1460px; margin:0 auto }
.al-brands-pad { padding:clamp(40px,5vw,76px) clamp(20px,3vw,40px) clamp(40px,5vw,76px) clamp(20px,4vw,48px) }
.al-brands-heading-lg-a { margin:0 0 clamp(18px,2.2vw,26px); max-width:18ch; font-size:clamp(26px,3.2vw,42px); line-height:1.1; letter-spacing:-.032em; font-weight:700; color:#062A50 }
.al-brands-text-sm { margin:0 0 clamp(24px,2.8vw,34px); max-width:52ch; font-size:16.5px; line-height:1.66; color:#42546B }
.al-brands-btn { display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:16px 30px; border-radius:10px; background:#1268B3; color:#fff; font-size:15px; font-weight:700; transition:background .35s ease,transform .35s ease }
.al-img-block-l { background-image:url('../images/docs-cinematic.jpg'); background-position:center 46% }
.al-brands-scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(241,245,249,.55) 0%,rgba(4,28,54,.12) 26%,rgba(4,28,54,.3) 100%) }
.al-brands-label-xs-b { position:absolute; right:clamp(18px,2.6vw,34px); top:clamp(22px,3vw,40px); font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.18em; line-height:2; text-align:right; color:#fff; text-shadow:0 2px 12px rgba(4,28,54,.8) }
.al-brands-row { display:flex; align-items:center; gap:14px; margin-bottom:clamp(14px,1.8vw,20px) }
.al-brands-label-xs-c { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.18em; color:#E7B364 }
.al-brands-wrap { position:relative; overflow:hidden; background:#041C36; color:#fff; padding:clamp(44px,5.4vw,78px) clamp(20px,4vw,48px) }
.al-brands-block { position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:clamp(220px,26vw,320px); height:auto; pointer-events:none; opacity:.5 }
.al-brands-grid-a { position:relative; z-index:1; max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.32fr) auto; gap:clamp(24px,3.4vw,56px); align-items:center }
.al-brands-heading-lg-b { margin:0 0 clamp(14px,1.8vw,20px); max-width:20ch; font-size:clamp(26px,3.2vw,42px); line-height:1.1; letter-spacing:-.032em; font-weight:700; color:#fff }
.al-brands-text-sm-a { margin:0; max-width:56ch; font-size:16px; line-height:1.64; color:#fff }
.al-brands-reveal { opacity:0; transform:translateY(18px); display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; padding:18px 34px; border-radius:10px; background:#fff; color:#062A50; font-size:15px; font-weight:700; white-space:nowrap; transition:background .35s ease,color .35s ease,transform .35s ease }

/* ---------------------------------------------------------------------------
   Brand detail — remaining section styling
   --------------------------------------------------------------------------- */
.al-brandpg-fill { background:#fff; padding:clamp(48px,5.6vw,86px) clamp(20px,4vw,48px) }
.al-brandpg-grid { max-width:1360px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,72px) }
.al-brandpg-row { display:flex; align-items:center; gap:14px; margin-bottom:18px }
.al-brandpg-heading-lg { margin:0 0 20px; font-size:clamp(24px,2.9vw,38px); line-height:1.1; letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-brandpg-text-sm { margin:0; font-size:clamp(16.5px,1.75vw,19px); line-height:1.7; color:#42546B; max-width:58ch }
.al-brandpg-reveal { opacity:0; transform:translateY(20px); border-left:2px solid #E7B364; padding-left:clamp(22px,3vw,38px) }
.al-brandpg-label-xs { font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:.18em; color:#1268B3; margin-bottom:18px }
.al-brandpg-text-sm-a { margin:0; font-size:clamp(16.5px,1.75vw,19px); line-height:1.7; color:#42546B; max-width:52ch }
.al-brandpg-wrap { position:relative; overflow:hidden; background:#F5F7FA; padding:clamp(48px,5.6vw,86px) clamp(20px,4vw,48px) }
.al-img-prod-bg-oil { background-image:url('../images/prod-bg-oil.jpg') }
.al-brandpg-wrap-a { position:relative; z-index:1; max-width:1360px; margin:0 auto }
.al-brandpg-reveal-a { opacity:0; transform:translateY(18px); display:flex; align-items:center; gap:18px; margin-bottom:clamp(22px,2.6vw,32px) }
.al-brandpg-heading-md { margin:0; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.03em; font-weight:700; color:#062A50 }
.al-brandpg-block { flex:1; height:1px; background:#DCE3EB }
.al-brandpg-grid-a { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }

/* ---------------------------------------------------------------------------
   Hover states — applied to links and buttons across every section
   --------------------------------------------------------------------------- */
.al-hover-link:hover { color:#1268B3 }
.al-hover-btn-blue:hover { background:#0E528F; color:#fff; transform:translateY(-3px) }
.al-hover-btn-light:hover { background:#E7B364; color:#041C36; transform:translateY(-3px) }
.al-hover-btn-line:hover { background:#062A50; color:#fff }
.al-brandhero-inline:hover{color: #fff;}

[data-qrow]{
  position: relative;
}

[data-qrow] > [data-ctf]:has([data-combo]){
  position: relative;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Dropdown must sit above Quantity / Delivery fields */
[data-combolist]{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;

  width: 100% !important;
  max-height: 190px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  display: none;
  background: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;

  border: 1px solid #DCE3EB !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(4,28,54,.16) !important;

  z-index: 99999 !important;
  isolation: isolate;
}

/* JS opens the list by removing [hidden] */
[data-combolist]:not([hidden]){
  display: block !important;
}

/* Every option gets a clean white clickable area */
[data-combolist] button[role="option"]{
  position: relative;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  min-height: 38px;
  padding: 10px 14px !important;
  margin: 0 !important;

  background: #fff !important;
  color: #062A50 !important;
  border: 0 !important;
  text-align: left !important;
  white-space: nowrap;
  cursor: pointer;
}

[data-combolist] button[role="option"]:hover,
[data-combolist] button[role="option"]:focus{
  background: #F3F7FB !important;
}

/* Hide filtered options without leaving blank space */
[data-combolist] button[role="option"][hidden]{
  display: none !important;
}

/* No-result message */
[data-combolist] [data-combonote]{
  display: block;
  padding: 10px 14px;
  color: #6B7C90;
  font-size: 13px;
  background: #fff !important;
}
.logos-wrap figure{margin: 0;}
.director-wrap figure{margin: 0;}
@media (max-width:940px){
   .about-row .about-left{width: 100%;}
   .about-row .about-right{width: 100%;}
   .about-section h2{max-width: 100%;}
   .about-section p{max-width: 100%;}
   .logos-wrap, .director-wrap{padding-top: 30px;}
   .about-section [data-abswitch]{display: flex;top: 0;bottom: auto;}
   .about-section [data-abstagein]{        padding: clamp(88px, 8vw, 64px) 20px clamp(40px, 14vw, 104px);}
   .about-section [data-abstagein]{display: block;}
   .about-section [data-abstagein] > div{display: none;}
   .about-section [data-abstagein] > div[aria-hidden="true"]{display: block;visibility: visible;opacity: 1;}
}

    @media (max-width:767px){

.al-hero-heading-xl-b{font-size: 28px;}
.al-hero-text-md{font-size: 16px; line-height: 22px; margin-top: 12px;}
.al-hero-row-c{margin-top: 22px;}
.al-hero-row-b{margin-bottom: 10px;}
.al-hero-row-d{font-size: 12px;}
[data-fcontact] i{    line-height: 34px;}
[data-qmeta]{padding-bottom: 20px; margin-bottom: 0px;}
[data-qmeta] span{opacity: 1;}
.al-cta-wrap{padding-bottom: 30px; padding-top: 30px;}
.al-process-wrap [data-pvis] {display: none;}
.al-home-wrap-b, .al-about-wrap{padding-bottom: 30px; padding-top: 30px;}
[data-btab] {
    padding: 14px 10px;
    font-size: 13px;
    letter-spacing: 1px;
}

[data-bgrid] [data-bgcell]:nth-last-child(2) {
    grid-column: 1 / -1;
}
    }