/* ==========================================================================
   PRIME TECH CONCRETE PUMPS
   Design language derived from the Prime Tech logo:
   deep navy + controlled metallic gold, circular geometry, angled cuts.
   ========================================================================== */

/* --------------------------------------------------------------- 01 TOKENS */
:root{
  /* brand — sampled directly from the logo artwork */
  --navy:        #131F31;
  --navy-deep:   #0A1220;
  --navy-900:    #0E1826;
  --navy-800:    #1A2942;
  --navy-700:    #24354F;
  --navy-600:    #35486380;

  --gold:        #B08847;
  --gold-bright: #C9A264;
  --gold-soft:   #E4D4B4;

  --white:       #FFFFFF;
  --surface:     #F2F4F6;
  --surface-2:   #E6E9ED;

  --text:        #131F31;
  --muted:       #59637380;
  --muted-solid: #5A6473;
  --line:        rgba(19,31,49,.13);
  --line-light:  rgba(255,255,255,.14);

  /* type */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* motion */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --t:        .7s;

  /* layout */
  --wrap: 1320px;
  --pad:  clamp(20px, 5vw, 64px);
  --sec:  clamp(76px, 9vw, 140px);
  --cut:  14px;          /* angled corner cut — echoes the logo's diagonal terminals */
}

/* ----------------------------------------------------------- 02 BASE/RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
[hidden]{ display:none !important; }

.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:10px 16px; background:var(--navy); color:#fff;
  font:600 13px/1 var(--f-display); letter-spacing:.06em; text-transform:uppercase;
  transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }

/* ------------------------------------------------------------- 03 TYPOGRAPHY */
.h-xl,.h-lg,.h-md{
  font-family:var(--f-display); font-weight:700;
  letter-spacing:-.022em; line-height:1.05; text-wrap:balance;
}
.h-xl{ font-size:clamp(2.3rem, 5.4vw, 4.4rem); }
.h-lg{ font-size:clamp(1.95rem, 4.1vw, 3.35rem); }
.h-md{ font-size:clamp(1.6rem, 3vw, 2.4rem); }
.gold{ color:var(--gold-bright); }

.eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:.35em .7em;
  font-family:var(--f-display); font-size:clamp(10px,1vw,11.5px); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted-solid);
  margin:0 0 clamp(18px,2vw,26px);
}
.eyebrow .narrow{ display:none; }
.eyebrow b{ color:var(--gold); font-weight:700; letter-spacing:.12em; }
.eyebrow i{ color:var(--gold); font-style:normal; }
.eyebrow--light{ color:rgba(255,255,255,.66); }
.eyebrow--light b{ color:var(--gold-bright); }
.eyebrow--light i{ color:var(--gold-bright); }

/* tapered hairline — lifted from the flanking rules under the wordmark */
.rule{
  display:block; height:2px; width:min(160px,40%);
  background:linear-gradient(90deg, var(--gold), rgba(176,136,71,0));
  margin:clamp(20px,2.4vw,30px) 0;
}
.rule--c{
  width:120px; margin-inline:auto;
  background:linear-gradient(90deg, rgba(201,162,100,0), var(--gold-bright) 50%, rgba(201,162,100,0));
}

/* ----------------------------------------------------------- 04 LAYOUT */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--light  { background:var(--white); }
.sec--surface{ background:var(--surface); }
.sec--navy   { background:var(--navy); color:#fff; }
.sec--navy .h-md,.sec--navy .h-lg{ color:#fff; }

.sec__head{ max-width:760px; margin-bottom:clamp(38px,4.6vw,66px); }
.sec__title{ text-wrap:balance; }
.sec__head--split{
  max-width:none; display:grid; gap:clamp(20px,3vw,64px);
  grid-template-columns:1fr; align-items:end;
}
.sec__note{ color:var(--muted-solid); max-width:44ch; }

/* ----------------------------------------------------------- 05 BUTTONS */
.btn{
  --bg:var(--navy); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.75em;
  padding:16px 26px; background:var(--bg); color:var(--fg);
  font-family:var(--f-display); font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
  overflow:hidden;
}
.btn::before{                       /* gold edge accent */
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--gold); transition:width .5s var(--ease); z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover::before{ width:100%; }
.btn:hover{ color:var(--navy); }

.btn__ico{ width:17px; height:17px; flex:none; transition:transform .45s var(--ease); }
.btn:hover .btn__ico{ transform:translateX(5px); }

.btn--gold{ --bg:var(--gold); --fg:var(--navy); }
.btn--gold::before{ background:var(--white); }
.btn--gold:hover{ color:var(--navy); }

.btn--ghost{
  background:transparent; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  clip-path:none;
}
.btn--ghost::before{ display:none; }
.btn--ghost:hover{ background:rgba(255,255,255,.1); color:#fff; }

.btn--sm{ padding:12px 20px; font-size:11.5px; --cut:10px; }

/* text link with moving arrow */
.link{
  display:inline-flex; align-items:center; gap:.6em; margin-top:clamp(18px,2vw,26px);
  font-family:var(--f-display); font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--navy);
  padding-bottom:6px; box-shadow:inset 0 -1px 0 0 var(--line);
  transition:box-shadow .45s var(--ease), color .35s var(--ease);
}
.link .btn__ico{ color:var(--gold); }
.link:hover{ box-shadow:inset 0 -1px 0 0 var(--gold); }
.link:hover .btn__ico{ transform:translateX(5px); }
.link--light{ color:#fff; box-shadow:inset 0 -1px 0 0 var(--line-light); }

/* ----------------------------------------------------------- 06 HEADER */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.hdr__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  height:clamp(66px,7vw,92px); display:flex; align-items:center; gap:clamp(16px,3vw,48px);
}
.hdr__hair{
  position:absolute; inset:auto 0 0; height:1px;
  background:linear-gradient(90deg, rgba(176,136,71,0), rgba(176,136,71,.55), rgba(176,136,71,0));
  opacity:0; transition:opacity .5s var(--ease);
}
.hdr.is-scrolled{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 14px 40px -28px rgba(10,18,32,.6);
}
.hdr.is-scrolled .hdr__hair{ opacity:1; }

.brand{ position:relative; display:block; flex:none; height:clamp(30px,3.2vw,42px); }
.brand__img{
  height:100%; width:auto; transition:opacity .45s var(--ease);
}
.brand__img--dark{ position:absolute; inset:0; opacity:0; }
.hdr.is-scrolled .brand__img--light{ opacity:0; }
.hdr.is-scrolled .brand__img--dark { opacity:1; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); margin-left:auto; }
.nav a{
  position:relative; padding:6px 0; color:rgba(255,255,255,.82);
  font-family:var(--f-display); font-size:13px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1.5px;
  background:var(--gold-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ transform:scaleX(1); }
.hdr.is-scrolled .nav a{ color:var(--navy); }
.hdr.is-scrolled .nav a::after{ background:var(--gold); }

.hdr__end{ display:flex; align-items:center; gap:14px; margin-left:clamp(8px,2vw,28px); }
.hdr .btn--sm{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.hdr .btn--sm::before{ background:var(--gold); }
.hdr .btn--sm:hover{ color:var(--navy); box-shadow:inset 0 0 0 1px var(--gold); }
.hdr.is-scrolled .btn--sm{ background:var(--navy); color:#fff; box-shadow:none; }
.hdr.is-scrolled .btn--sm:hover{ color:var(--navy); }

/* burger */
.burger{ display:none; width:40px; height:40px; position:relative; margin-right:-8px; }
.burger span{
  position:absolute; left:9px; width:22px; height:1.5px; background:#fff;
  transition:transform .45s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:23px; width:14px; background:var(--gold-bright); }
.hdr.is-scrolled .burger span{ background:var(--navy); }
.hdr.is-scrolled .burger span:nth-child(2){ background:var(--gold); }
.is-menu .burger span:nth-child(1){ top:20px; transform:rotate(45deg); background:#fff; }
.is-menu .burger span:nth-child(2){ top:20px; width:22px; transform:rotate(-45deg); background:#fff; }

/* ----------------------------------------------------------- 07 MOBILE MENU */
.menu{
  position:fixed; inset:0; z-index:95; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px var(--pad) 48px;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
}
.menu::before{                                   /* logo-derived arc */
  content:""; position:absolute; right:-24%; top:8%; width:80vw; height:80vw;
  border:1.5px solid rgba(201,162,100,.16); border-radius:50%;
  border-right-color:transparent; border-bottom-color:transparent; pointer-events:none;
}
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{
  display:flex; align-items:baseline; gap:16px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.09); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.6rem,7vw,2.3rem);
  letter-spacing:-.015em;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease);
}
.menu__nav a em{
  font-size:11px; font-style:normal; font-weight:600; letter-spacing:.2em;
  color:var(--gold-bright);
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.16s; }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.22s; }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.28s; }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.34s; }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.40s; }
.menu__foot{ margin-top:auto; padding-top:32px; }
.menu__foot .rule{ margin-bottom:26px; }
body.is-menu{ overflow:hidden; }

/* ----------------------------------------------------------- 08 HERO */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(100svh, 940px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(120px,16vh,200px); background:var(--navy-deep);
}
.hero__media{ position:absolute; inset:-8% 0 -8%; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:60% 62%;
  transform:scale(1.14); opacity:0;
  transition:transform 2.2s var(--ease), opacity 1.5s ease;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,18,32,.72) 0%, rgba(10,18,32,.2) 30%, rgba(10,18,32,.34) 62%, rgba(10,18,32,.9) 100%),
    linear-gradient(90deg, rgba(10,18,32,.84) 0%, rgba(10,18,32,.3) 48%, rgba(10,18,32,0) 78%);
  opacity:0; transition:opacity 1.4s ease .2s;
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.hero__in{ position:relative; padding-bottom:clamp(48px,7vh,90px); color:#fff; }
.hero__title{
  font-family:var(--f-display); font-weight:700; color:#fff;
  font-size:clamp(2.1rem, 8.4vw, 5.3rem); line-height:1.03; letter-spacing:-.03em;
  margin:0 0 clamp(20px,2.6vw,30px); max-width:16ch;
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln i{
  display:block; font-style:normal;
  transform:translateY(105%); transition:transform 1.05s var(--ease);
}
.hero__lede{
  max-width:46ch; color:rgba(255,255,255,.78); font-size:clamp(15px,1.35vw,18px);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.4vw,42px); }

/* hero load choreography */
.hero__eyebrow,.hero__lede,.hero__cta{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.is-ready .hero__media img{ transform:scale(1); opacity:1; }
.is-ready .hero__scrim{ opacity:1; }
.is-ready .hero__eyebrow{ opacity:1; transform:none; transition-delay:.5s; }
.is-ready .hero__title .ln:nth-child(1) i{ transition-delay:.62s; transform:none; }
.is-ready .hero__title .ln:nth-child(2) i{ transition-delay:.74s; transform:none; }
.is-ready .hero__lede{ opacity:1; transform:none; transition-delay:.96s; }
.is-ready .hero__cta { opacity:1; transform:none; transition-delay:1.08s; }

/* hero index rail */
.hero__rail{
  position:relative; border-top:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(10,18,32,0), rgba(10,18,32,.4));
  opacity:0; transform:translateY(16px);
  transition:opacity 1s var(--ease) 1.25s, transform 1s var(--ease) 1.25s;
}
.is-ready .hero__rail{ opacity:1; transform:none; }
.hero__railin{
  display:flex; align-items:center; gap:clamp(18px,4vw,64px);
  padding-block:18px; color:rgba(255,255,255,.6);
  font-family:var(--f-display); font-size:12px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
}
.hero__railin em{ font-style:normal; color:var(--gold-bright); font-weight:700; margin-right:.5em; }
.hero__scroll{
  margin-left:auto; width:38px; height:38px; flex:none;
  display:grid; place-items:center; color:var(--gold-bright);
  border:1px solid rgba(201,162,100,.4); border-radius:50%;
}
.hero__scroll svg{ width:16px; height:16px; animation:nudge 2.4s var(--ease-io) infinite; }
@keyframes nudge{ 0%,72%,100%{ transform:translateY(0); opacity:1 } 86%{ transform:translateY(4px); opacity:.55 } }

/* ----------------------------------------------------------- 09 INTRO */
.intro__grid{ display:grid; gap:clamp(28px,4vw,80px); grid-template-columns:1fr; }
.intro__head .h-lg{ max-width:17ch; }
.intro__body{ color:var(--muted-solid); }
.intro__body p + p{ margin-top:1.1em; }

/* ----------------------------------------------------------- 10 CARDS */
.cards{ display:grid; gap:clamp(18px,2.4vw,34px); grid-template-columns:1fr; }
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); box-shadow:0 1px 0 var(--line), 0 0 0 1px var(--line);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.card::before{                                     /* gold top accent */
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:0;
  background:var(--gold); z-index:2; transition:width .7s var(--ease);
}
.card:hover{ transform:translateY(-7px); box-shadow:0 0 0 1px rgba(19,31,49,.16), 0 34px 60px -34px rgba(10,18,32,.55); }
.card:hover::before{ width:100%; }

.card__media{ display:block; overflow:hidden; position:relative; background:var(--navy-deep); aspect-ratio:16/10; box-shadow:inset 0 -1px 0 var(--line); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card--wide .card__media{ aspect-ratio:16/9; }

.card__body{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start;
  gap:clamp(14px,2vw,26px); padding:clamp(22px,2.6vw,34px);
  flex:1;
}
.card__no{
  font-family:var(--f-display); font-style:normal; font-weight:700; font-size:13px;
  letter-spacing:.1em; color:var(--gold); padding-top:.35em;
}
.card__txt h3{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.015em; line-height:1.15;
  font-size:clamp(1.15rem,1.75vw,1.55rem); margin-bottom:.5em;
}
.card__txt p{ color:var(--muted-solid); font-size:15px; max-width:46ch; }
.card__ico{
  width:20px; height:20px; color:var(--navy); flex:none; margin-top:.35em;
  transition:transform .5s var(--ease), color .4s var(--ease);
}
.card:hover .card__ico{ transform:translateX(6px); color:var(--gold); }

/* ----------------------------------------------------------- 11 SHOWCASE */
.showcase{
  position:relative; isolation:isolate; overflow:hidden; background:var(--navy-deep);
  color:#fff; padding-block:clamp(96px,13vw,190px);
}
.showcase__media{ position:absolute; inset:-10% 0; z-index:-2; }
.showcase__media img{ width:100%; height:100%; object-fit:cover; object-position:56% 50%; }
.showcase__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(10,18,32,.9) 4%, rgba(10,18,32,.52) 46%, rgba(10,18,32,.08) 86%),
    linear-gradient(180deg, rgba(10,18,32,.5), rgba(10,18,32,0) 32%, rgba(10,18,32,.62)),
    linear-gradient(0deg, rgba(19,31,49,.3), rgba(19,31,49,.3));
}
.showcase__in{ max-width:960px; }
.showcase__in .h-xl{ color:#fff; margin-bottom:clamp(18px,2vw,26px); }
.showcase__lede{ color:rgba(255,255,255,.76); max-width:48ch; margin-bottom:clamp(26px,3vw,38px); }

/* ----------------------------------------------------------- 12 BUY / SELL */
.trade__grid{ display:grid; gap:clamp(16px,2vw,28px); grid-template-columns:1fr; }
.panel{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(30px,3.6vw,54px); min-height:clamp(300px,32vw,430px);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  overflow:hidden;
}
.panel::before{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:56px;
  background:var(--gold); transition:width .7s var(--ease);
}
.panel::after{                                   /* logo-derived arc watermark */
  content:""; position:absolute; right:-90px; bottom:-120px; width:280px; height:280px;
  border:1.5px solid rgba(176,136,71,.22); border-radius:50%;
  border-top-color:transparent; border-left-color:transparent;
  transition:transform .9s var(--ease); pointer-events:none;
}
.panel:hover{ transform:translateY(-6px); box-shadow:inset 0 0 0 1px rgba(19,31,49,.18), 0 34px 60px -34px rgba(10,18,32,.5); }
.panel:hover::before{ width:100%; }
.panel:hover::after{ transform:translate(-14px,-14px) rotate(-12deg); }

.panel__no{
  font-family:var(--f-display); font-style:normal; font-weight:700;
  font-size:13px; letter-spacing:.14em; color:var(--gold); margin-bottom:clamp(38px,6vw,74px);
}
.panel__title{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.5em;
}
.panel p{ color:var(--muted-solid); max-width:34ch; }
.panel__cta{
  display:inline-flex; align-items:center; gap:.6em; margin-top:clamp(26px,3vw,40px);
  font-family:var(--f-display); font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--navy);
}
.panel__cta .btn__ico{ color:var(--gold); transition:transform .5s var(--ease); }
.panel:hover .panel__cta .btn__ico{ transform:translateX(6px); }

.panel--dark{ background:var(--navy); color:#fff; box-shadow:none; }
.panel--dark p{ color:rgba(255,255,255,.7); }
.panel--dark .panel__cta{ color:#fff; }
.panel--dark .panel__no{ color:var(--gold-bright); }
.panel--dark::after{ border-color:rgba(201,162,100,.3); border-top-color:transparent; border-left-color:transparent; }
.panel--dark:hover{ box-shadow:0 34px 60px -34px rgba(10,18,32,.8); }

/* ----------------------------------------------------------- 13 BRANDS MARQUEE */
.brands{ overflow:hidden; }
.brands__head{ margin-bottom:clamp(36px,4.4vw,60px); }
.brands__head .h-md{ max-width:16ch; }

/* A light rail inset into the navy section. Manufacturer logos are drawn for
   white, so they keep their own colours here instead of being knocked out. */
.marquee{
  position:relative; width:100%;
  /* flat rail + the two gold hairlines as background layers, so ::before and
     ::after stay free for the edge fades */
  --rail:#FFFFFF;
  --hair:linear-gradient(90deg, rgba(176,136,71,0), rgba(176,136,71,.55) 22%, rgba(176,136,71,.55) 78%, rgba(176,136,71,0));
  background:
    var(--hair) left top    / 100% 2px no-repeat,
    var(--hair) left bottom / 100% 2px no-repeat,
    var(--rail);
}
/* Edge fades are painted over the track rather than masking it. A CSS mask on an
   animated element forces its own compositing layer and flickers white on mobile. */
.marquee::before,
.marquee::after{
  content:""; position:absolute; top:0; bottom:0; z-index:2; pointer-events:none;
  width:clamp(40px, 9%, 130px);
}
.marquee::before{ left:0;  background:linear-gradient(90deg,  var(--rail) 10%, rgba(255,255,255,0)); }
.marquee::after { right:0; background:linear-gradient(270deg, var(--rail) 10%, rgba(255,255,255,0)); }

.marquee__mask{ overflow:hidden; }
.marquee__track{
  display:flex; width:max-content;
  animation:slide 42s linear infinite;
  will-change:transform; backface-visibility:hidden;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state:paused; }
@keyframes slide{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.marquee__row{ display:flex; align-items:center; flex:0 0 auto; }
.marquee__row li{ display:flex; align-items:center; min-height:clamp(78px,8.5vw,112px); }
.marquee__row li::after{           /* gold diamond separator */
  content:""; width:6px; height:6px; margin-inline:clamp(28px,4vw,64px);
  background:var(--gold); transform:rotate(45deg); flex:none; opacity:.85;
}

.brands__logo{
  height:calc(clamp(26px,3vw,40px) * var(--lh,1)); width:auto;
  transition:transform .45s var(--ease);
}
.brands__logo:hover{ transform:translateY(-2px); }

/* fallback for any brand still awaiting artwork */
.brands__name{
  display:block; padding-block:clamp(24px,3vw,38px);
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(13px,1.25vw,16px); letter-spacing:.09em; text-transform:uppercase;
  color:rgba(19,31,49,.62); white-space:nowrap;
  transition:color .4s var(--ease);
}
.brands__name:hover{ color:var(--navy); }

/* ----------------------------------------------------------- 14 GLOBAL SUPPLY */
.global__grid{ display:grid; gap:clamp(30px,4vw,72px); grid-template-columns:1fr; align-items:center; }
.global__txt p{ color:var(--muted-solid); max-width:46ch; }
.ticks{ margin-top:clamp(22px,2.6vw,32px); display:grid; gap:12px; }
.ticks li{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-display); font-size:14px; font-weight:500; letter-spacing:.02em;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.ticks li::before{
  content:""; width:7px; height:7px; background:var(--gold);
  transform:rotate(45deg); flex:none;
}
.global__art{
  position:relative; background:var(--navy); overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.global__art img{ width:100%; height:auto; }

/* ----------------------------------------------------------- 15 ABOUT */
.about__grid{ display:grid; gap:clamp(30px,4vw,80px); grid-template-columns:1fr; align-items:center; }
.about__art{
  position:relative; overflow:hidden; background:var(--navy-deep);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.about__art img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.about__tag{
  position:absolute; left:0; bottom:0; padding:12px 18px; background:var(--gold);
  color:var(--navy); font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.about__txt > p{ color:var(--muted-solid); margin-top:clamp(20px,2.4vw,28px); max-width:50ch; }
.facts{ margin-top:clamp(30px,3.6vw,46px); display:grid; gap:0; }
.facts li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:baseline;
  padding-block:clamp(16px,2vw,22px); border-top:1px solid var(--line);
}
.facts li em{
  grid-row:span 2; font-style:normal; font-family:var(--f-display); font-weight:700;
  font-size:12px; letter-spacing:.14em; color:var(--gold); padding-top:.3em;
}
.facts li b{ font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.facts li span{ color:var(--muted-solid); font-size:14.5px; }

/* ----------------------------------------------------------- 16 FINAL CTA */
.cta{
  position:relative; isolation:isolate; overflow:hidden; background:var(--navy-deep);
  color:#fff; padding-block:clamp(90px,12vw,170px); text-align:center;
}
.cta__media{ position:absolute; inset:-10% 0; z-index:-2; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta__scrim{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(115% 88% at 50% 46%, rgba(10,18,32,.34), rgba(10,18,32,.88) 76%);
}
.cta__in{ max-width:880px; }
.cta__in .h-xl{ color:#fff; margin-block:clamp(20px,2.4vw,30px) clamp(14px,1.6vw,20px); }
.cta__in > p{ color:rgba(255,255,255,.76); max-width:44ch; margin-inline:auto; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(28px,3.4vw,42px); }

/* ----------------------------------------------------------- 17 FOOTER */
.ftr{ background:var(--navy-deep); color:rgba(255,255,255,.62); padding-top:clamp(56px,7vw,96px); }
.ftr__grid{
  display:grid; gap:clamp(34px,4vw,56px); grid-template-columns:1fr;
  padding-bottom:clamp(44px,5vw,72px);
}
.ftr__brand img{ width:clamp(150px,16vw,190px); height:auto; margin-bottom:24px; }
.ftr__brand p{ max-width:30ch; font-size:15px; }
.ftr__col h2{
  font-family:var(--f-display); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-bright);
  margin-bottom:20px;
}
.ftr__col li + li{ margin-top:11px; }
.ftr__col a{ font-size:15px; transition:color .3s var(--ease); }
.ftr__col a:hover{ color:#fff; }
.ftr__cta p{ font-size:15px; max-width:26ch; margin-bottom:22px; }
.ftr__cta .btn{ color:var(--navy); }

.ftr__base{
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  padding-block:26px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(255,255,255,.44);
}
.ftr__tag{ font-family:var(--f-display); letter-spacing:.1em; text-transform:uppercase; font-size:11px; }

/* ----------------------------------------------------------- 18 REVEAL */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* Image wipe. The clip lives on the *inner* image, never on the observed
   element — a clipped target reports zero intersection and would never fire. */
[data-reveal="mask"]{ opacity:1; transform:none; overflow:hidden; }
[data-reveal="mask"] img{
  clip-path:inset(0 0 100% 0); transform:scale(1.1);
  transition:clip-path 1.1s var(--ease), transform 1.5s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal="mask"].is-in img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* ----------------------------------------------------------- 19 RESPONSIVE */
@media (min-width:700px){
  .cards{ grid-template-columns:repeat(12,1fr); }
  .card--wide{ grid-column:span 7; }
  .card:not(.card--wide){ grid-column:span 5; }
  .card--drop{ margin-top:clamp(24px,4vw,72px); }
  .trade__grid{ grid-template-columns:1fr 1fr; }
  .sec__head--split{ grid-template-columns:1.35fr 1fr; }
}
@media (min-width:900px){
  .intro__grid{ grid-template-columns:1.05fr 1fr; align-items:start; }
  .global__grid{ grid-template-columns:1fr 1fr; }
  .about__grid{ grid-template-columns:.85fr 1fr; }
  .ftr__grid{ grid-template-columns:repeat(2,1fr); }
  .hero__in{ padding-bottom:clamp(56px,8vh,110px); }
}
@media (min-width:1100px){
  .ftr__grid{ grid-template-columns:1.6fr .9fr .9fr 1.1fr; }
}

@media (max-width:899px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr__end{ margin-left:auto; }
  .hdr__end .btn--sm{ display:none; }

  .hero{ min-height:min(88svh,760px); padding-top:clamp(92px,15vh,140px); }
  .hero__in{ padding-bottom:40px; }
  .hero__title{ max-width:none; }
  /* same landscape photo as desktop — framed on the machine for a portrait crop */
  .hero__media img{ object-position:27% 50%; }
  /* lighter scrim on phones — the machine has to stay legible in a tall crop */
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(10,18,32,.82) 0%, rgba(10,18,32,.24) 24%, rgba(10,18,32,.42) 54%, rgba(10,18,32,.92) 92%);
  }
  .hero__railin{ overflow-x:auto; scrollbar-width:none; gap:26px; padding-right:24px; }
  .hero__railin::-webkit-scrollbar{ display:none; }
  .hero__rail{
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
            mask-image:linear-gradient(90deg,#000 86%,transparent);
  }
  .hero__scroll{ display:none; }

  .card__body{ grid-template-columns:auto 1fr; }
  .card__ico{ grid-column:2; justify-self:start; margin-top:4px; }
  .about__art{ max-width:420px; }
}
@media (max-width:640px){
  .eyebrow .wide{ display:none; }
  .eyebrow .narrow{ display:inline; }
  .panel{ min-height:auto; }
  .panel__no{ margin-bottom:clamp(26px,7vw,40px); }
}
@media (max-width:520px){
  :root{ --cut:10px; }
  .card,.panel,.global__art,.about__art{
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  }
  .btn{ padding:15px 20px; font-size:12px; }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; }
  .cta__btns .btn{ width:100%; justify-content:center; }
  .ftr__base{ flex-direction:column; }
}

/* ----------------------------------------------------------- 20 A11Y MOTION */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],[data-reveal="mask"]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero__media img{ opacity:1 !important; transform:none !important; }
  .hero__scrim{ opacity:1 !important; }
  .hero__title .ln i{ transform:none !important; }
  .hero__eyebrow,.hero__lede,.hero__cta,.hero__rail{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none !important; }
}

/* preview-imagery credit line — remove once client photography is in place */
.ftr__credit{ padding-bottom:22px; margin-top:-8px; }
.ftr__credit p{ font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.3); max-width:70ch; }