/* ============================================================
   Stournaras LTD, consolidated Bricks overrides. Loaded LAST.
   Edit here, not in stournaras-pages.css.
   ============================================================ */

:root{--section-y:clamp(50px,5.5vw,74px);--maxw:1400px;--pad-x:34px}
@media (max-width:600px){:root{--pad-x:20px}}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text)}

/* ---------- Bricks block resets ---------- */
.site-header__inner,.nav,.header-actions,.socials,.footer-bottom,.cta__actions,
.project__meta,.why-stack-wrap,.pillar2,.pillar2__link,.marquee__track,.m-row,
.cluster,.op__points,.mat__grades,.gfilters,.socs,.hours__row,.form__foot{flex-direction:row}
.mats,.tl,.jobs,.infocard,.job__in,.tl__card,.mat__specs,.mat__head,.gitem,.gitem__btn{display:block}
.gfilters,.socs,.op__points,.mat__grades,.cluster,.cta__actions{display:flex;flex-wrap:wrap}
.contact-lines{display:flex;flex-direction:column}
.about-band,.why-band{justify-content:center}
.pillar2{align-items:flex-end}
.gfilter,.op__points li,.mat__grades li,.soc,.cta__actions .btn,.cluster .btn{width:auto;flex:0 0 auto}
.gfilter,.soc{display:inline-flex;align-items:center;justify-content:center}
.op__points li,.mat__grades li{display:inline-block}
.op__points,.mat__grades{padding-left:0;margin-left:0;list-style:none}
.sec-head h1,.sec-head h2,.sec-head h3,.split__body h2,.split__body h3,
.about-band__inner h2,.page-hero h1,.cta h2,.op__body h3,.step__body h3,
.model h3,.tl__title,.eq__t,.mat__name,.infocard h3,.job__t{margin-top:0}

/* ---------- Centred heads ---------- */
.sec-head,.projects-light__head{text-align:center;align-items:center;margin-inline:auto}
.sec-head .eyebrow,.sec-head h1,.sec-head h2,.sec-head h3,.sec-head p,
.projects-light__head .t-lead{margin-inline:auto}
.sec-head .measure,.sec-head .t-lead{max-width:64ch;margin-inline:auto}
.page-hero__inner{text-align:center;align-items:center}
.page-hero h1,.page-hero .t-lead,.page-hero .eyebrow,.page-hero .btn{margin-inline:auto}
.about-band__inner{text-align:center;align-items:center}
.about-band__inner .eyebrow,.about-band__inner h2,.about-band__inner p{margin-inline:auto}
.op__points{justify-content:center}
.op .op__points{justify-content:flex-start}

/* ---------- Even grids ---------- */
.eqs,.certs,.brings,.grid-4,.grid-3,.models{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
:is(.eqs,.certs,.brings,.grid-4,.grid-3,.models):has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
:is(.eqs,.certs,.brings,.grid-4,.grid-3,.models):has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
:is(.eqs,.certs,.brings,.grid-4,.grid-3,.models):has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
:is(.eqs,.certs,.brings,.grid-4,.grid-3,.models):has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.cert,.model,.svc-card,.card{height:100%}
@media (max-width:1180px){.eqs,.certs,.brings,.grid-4,.grid-3,.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.eqs,.certs,.brings,.grid-4,.grid-3,.models{grid-template-columns:minmax(0,1fr)}}

/* ---------- MAIN HEADER: logo left | nav centre | lang+CTA right ---------- */
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,48px)}
.site-header .brand{flex:0 0 auto;margin:0}
.site-header .nav{flex:1 1 auto;justify-content:center;gap:clamp(14px,1.8vw,28px);margin:0}
.site-header .header-actions{flex:0 0 auto;margin:0;gap:14px;align-items:center}

/* Dark fade keeps the bar readable over light photos */
.site-header:not(.is-compact){
  background:linear-gradient(180deg,rgba(6,10,8,.9) 0%,rgba(6,10,8,.55) 55%,rgba(6,10,8,0) 100%);
  border-bottom-color:transparent;
}

/* Sticky pill: equal breathing room, must survive the padding transition */
.site-header.is-compact .site-header__inner{padding:7px 20px 7px 24px !important;gap:16px}
.site-header.is-compact .header-actions{gap:12px;margin-right:0}
.site-header.is-compact .nav-toggle{margin-right:0}
.site-header .header-cta{padding:11px 22px !important;font-size:11.5px !important}
.site-header.is-compact .header-cta{padding:10px 20px !important}

/* Chevron on "Sell Your Scrap" (was rendering as a bare line) */
.nav .has-sub > a::after{
  content:'';display:inline-block;width:7px;height:7px;margin-left:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  border-top:0;border-left:0;
  transform:translateY(-3px) rotate(45deg);opacity:.75;
}
.nav .has-sub{padding-bottom:14px;margin-bottom:-14px}
.nav .nav-sub{padding-top:12px}

/* ---------- Buttons ---------- */
.btn--primary,.btn--primary:hover,.header-cta,.header-cta:hover,
.footer-wa,.footer-wa:hover{color:#fff !important}
.btn--onlight-solid,.btn--onlight-solid:hover{background:#fff !important;color:var(--green-deep) !important}
.btn--onlight-ghost,.btn--onlight-ghost:hover{color:#fff !important;border-color:rgba(255,255,255,.55) !important}
.cta{text-align:center}
.cta h2,.cta .t-lead{margin-inline:auto}
.cta__actions{justify-content:center;align-items:center}
.projects-viewall{display:flex;justify-content:center;width:100%}

/* ---------- Hero play button (icon was missing) ---------- */
.hero__play{display:grid;place-items:center}
.hero__play svg{display:block;width:28px;height:28px}
.hero__play:not(:has(svg))::before{
  content:'';display:block;margin-left:6px;
  border-left:20px solid currentColor;
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}

/* ---------- Partners marquee ---------- */
.partners-section2 .sec-head{margin-bottom:8px}
.marquee{margin-top:46px !important}
.marquee__track{animation-duration:24s;gap:26px}
.partner{height:118px;width:226px;flex:0 0 auto}

/* ---------- Why Stournaras ---------- */
.why-scard{
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(13,18,16,.62)) !important;
  border-color:rgba(255,255,255,.24) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
}
.why-scard:not(.is-active){opacity:.5}
.why-scard__img{width:100%;height:auto;max-height:170px;aspect-ratio:16/9;border-radius:14px;margin-bottom:20px;overflow:hidden}
.why-scard__img img{width:100%;height:100%;object-fit:cover;display:block}
.why-stack{height:440px}
.why-rail{gap:12px}
.why-rail button{width:52px;height:52px;padding:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;line-height:1;text-align:center}
.why-rail button span{display:block;line-height:1}
.why-rail button.is-active{background:var(--green);color:var(--on-green);border-color:var(--green)}
.why-band__bg img,.about-band__bg img{width:100%;height:100%;object-fit:cover}

/* ---------- Overlay menu ---------- */
.mobile-menu nav{width:100%;position:relative;z-index:1}
.mobile-menu nav > a,.mobile-menu .m-has-sub{width:100%}
.mobile-menu nav > a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.mobile-menu nav > a::after{margin-left:auto}
.mobile-menu .m-has-sub{border-bottom:1px solid var(--line)}
.mobile-menu .m-row{display:flex;align-items:center;width:100%;position:relative;padding-right:54px;gap:12px}
.mobile-menu .m-row > a{flex:1 1 auto;border-bottom:0 !important;justify-content:flex-start}
.mobile-menu .m-row > a::after{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0}
.mobile-menu .m-sub-toggle{position:relative;color:transparent;flex:0 0 auto}
.mobile-menu .m-sub-toggle::before{
  content:'';position:absolute;top:44%;left:50%;width:9px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:translate(-50%,-50%) rotate(45deg);
}
.mobile-menu .m-has-sub.is-open .m-sub-toggle{transform:none}
.mobile-menu .m-has-sub.is-open .m-sub-toggle::before{transform:translate(-50%,-30%) rotate(225deg)}
.mobile-menu__inner{position:relative}
.menu-preview{
  position:absolute;right:clamp(16px,7vw,110px);top:50%;z-index:0;
  width:min(38vw,420px);aspect-ratio:4/3;object-fit:cover;border-radius:16px;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-50%) rotate(-6deg) scale(.94);
  transition:opacity .35s var(--ease),transform .5s var(--ease),top .5s var(--ease);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.menu-preview.is-visible{opacity:.95;visibility:visible;transform:translateY(-50%) rotate(-4deg) scale(1)}

/* ---------- Footer ---------- */
.footer-wa{display:inline-flex !important;flex-direction:row !important;align-items:center;justify-content:center;gap:9px}
.footer-wa__ic,.footer-wa svg{flex:0 0 auto}

/* ---------- Location / Contact ---------- */
.infocard .cluster{margin-top:20px}
.map-full .map-wrap{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);border-radius:0;border-left:0;border-right:0}

/* ---------- Bricks forms ---------- */
.brxe-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.brxe-form textarea,.brxe-form select{
  font-family:var(--font-body);font-size:15px;color:var(--text);
  background:var(--bg-3);border:1px solid var(--line-strong);border-radius:12px;
  padding:13px 16px;width:100%;
}
.brxe-form input:focus,.brxe-form textarea:focus,.brxe-form select:focus{outline:none;border-color:var(--green-bright);background:var(--bg-2)}
.brxe-form textarea{min-height:140px;resize:vertical}
.brxe-form label{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:7px;display:block}
.brxe-form .form-group{margin-bottom:16px}
.brxe-form .bricks-button,.brxe-form button[type=submit]{
  background:var(--green);color:#fff;border:0;border-radius:12px;
  font-family:var(--font-display);font-weight:800;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:15px 30px;cursor:pointer;width:auto;
}
.brxe-form .bricks-button:hover,.brxe-form button[type=submit]:hover{background:var(--green-bright);color:#fff}
.brxe-form input[type=file]{background:var(--bg-3);border:1px solid var(--line-strong);border-radius:12px;padding:11px 14px}
.brxe-form input[type=file]::file-selector-button{font-family:var(--font-display);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#fff;background:var(--green);border:0;border-radius:8px;padding:8px 14px;margin-right:12px;cursor:pointer}

/* ---------- Timeline: alternating sides instead of one straight column ---------- */
.tl{padding-left:0;max-width:1100px;margin-inline:auto}
.tl::before{left:50%;transform:translateX(-50%)}
.tl__item{width:calc(50% - 42px);padding-bottom:clamp(26px,3.5vw,44px)}
.tl__item:nth-child(odd){margin-right:auto;text-align:right}
.tl__item:nth-child(even){margin-left:auto;text-align:left}
.tl__item:nth-child(odd) .tl__marker{left:auto;right:-50px}
.tl__item:nth-child(even) .tl__marker{left:-50px;right:auto}
.tl__item:nth-child(odd) .tl__card .t-body,.tl__item:nth-child(odd) .tl__img{margin-left:auto}
.tl__card{max-width:none}
.tl__card .t-body{max-width:46ch}
.tl__img{max-width:320px}
@media (max-width:900px){
  .tl{padding-left:34px}
  .tl::before{left:7px;transform:none}
  .tl__item,.tl__item:nth-child(odd),.tl__item:nth-child(even){width:auto;margin:0;text-align:left}
  .tl__item .tl__marker{left:-34px;right:auto}
  .tl__item:nth-child(odd) .tl__card .t-body,.tl__item:nth-child(odd) .tl__img{margin-left:0}
}

/* ---------- Gallery (static tiles, CSS masonry) ---------- */
.ggrid{display:block;columns:4;column-gap:14px}
.gitem{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px;width:100%}
.gitem__btn{display:block;width:100%;aspect-ratio:var(--r,1)}
@media (max-width:1080px){.ggrid{columns:3}}
@media (max-width:900px){.ggrid{columns:2}}
@media (max-width:560px){.ggrid{columns:2;column-gap:10px}.gitem{margin-bottom:10px}}
.gallery-empty{display:none}
.gallery-empty.is-shown{display:block}

/* Jobs listing grid: one full-width row per role */
.jobs,.jobs > .jet-listing-grid,.jobs .jet-listing-grid__items{display:block !important;width:100% !important}
.jobs .jet-listing-grid__item{width:100% !important;max-width:none !important;flex:none !important;margin:0 !important;padding:0 !important}

/* Social icons are injected as inline SVG (Font Awesome is not enqueued) */
.socials a svg,.soc svg,.footer-wa svg{width:17px;height:17px;display:block}
.socials a i,.soc i{display:none}


/* ================= ROUND 2 ================= */
/* 1. No border under the header */
.site-header,.site-header:not(.is-compact){border-bottom:0 !important}
/* 2. Gallery: real CPT listing grid, masonry via multicol on the items wrapper */
.ggrid{display:block !important;columns:auto !important}
.ggrid > .jet-listing-grid{display:block !important;width:100% !important}
.ggrid .jet-listing-grid__items{display:block !important;columns:4 !important;column-gap:14px !important;width:100% !important;margin:0 !important;padding:0 !important}
.ggrid .jet-listing-grid__item{display:block !important;width:100% !important;max-width:none !important;flex:none !important;margin:0 0 14px !important;padding:0 !important;break-inside:avoid;-webkit-column-break-inside:avoid;position:static !important}
.ggrid .gitem{display:block;width:100%;margin:0}
.ggrid .gitem__btn{display:block;width:100%;aspect-ratio:var(--r,1)}
@media (max-width:1080px){.ggrid .jet-listing-grid__items{columns:3 !important}}
@media (max-width:900px){.ggrid .jet-listing-grid__items{columns:2 !important}}
/* 3. Why cards: keep the glass, just readable */
.why-scard{background:linear-gradient(155deg,rgba(255,255,255,.22),rgba(13,18,16,.48)) !important;border-color:rgba(255,255,255,.30) !important;-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
.why-scard:not(.is-active){opacity:.45}
/* 4. Project cards: rounded media, centred CTA */
.project__media,.project__media img{border-radius:14px}
.project__media{overflow:hidden;margin:13px 13px 0}
.project__body{text-align:left}
.project__cta{display:inline-flex;margin-top:16px}
.projects-viewall,.projects-light .projects-viewall{display:flex !important;justify-content:center !important;width:100%}
/* 5. Marquee: the shorthand in base.css was overriding the duration */
.marquee__track{animation:marquee 18s linear infinite !important;gap:26px}
.marquee:hover .marquee__track{animation-play-state:paused !important}
/* 6. Hero play: glyph optically centred, ring far more visible on light photos */
.hero__play{display:grid;place-items:center;background:rgba(8,12,10,.45);border-color:rgba(255,255,255,.55)}
.hero__play::before{margin:0 0 0 4px}
.hero__play::after{border:2px solid rgba(58,208,106,.85);box-shadow:0 0 22px rgba(58,208,106,.55)}
.hero__play:hover{background:rgba(33,168,74,.28)}
/* 7. Dropdown: chevron stays inline, panel sits closer */
.nav .has-sub > a{display:inline-flex;align-items:center;white-space:nowrap}
.nav .has-sub{padding-bottom:18px;margin-bottom:-18px}
.nav .nav-sub{padding-top:6px}
.nav .has-sub:hover .nav-sub,.nav .has-sub:focus-within .nav-sub{transform:translateX(-50%) translateY(0)}
/* 8. ESPA banners on one row */
.espa{display:flex !important;flex-direction:row !important;flex-wrap:nowrap;align-items:center;gap:14px}
.espa img{height:46px;width:auto;flex:0 0 auto}
@media (max-width:700px){.espa{flex-wrap:wrap;justify-content:center}}
/* 9. Footer WhatsApp button padding */
.footer-wa{padding:12px 22px !important;border-radius:var(--r-btn)}
/* 10. Certifications: proper badge plates until official logos are supplied */
.cert{position:relative;padding:24px 22px;background:linear-gradient(160deg,#16211c,#101815) !important;overflow:hidden}
.cert::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--green-bright),transparent)}
.cert__code{font-size:22px}
/* 11. Timeline as a steel rail with hex-bolt markers */
.tl::before{width:12px;border-radius:4px;opacity:1;background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 12px,transparent 12px 26px),linear-gradient(90deg,#0e1613,#26332c 45%,#0e1613);border:1px solid rgba(255,255,255,.10)}
.tl__marker{width:30px;height:30px;border-radius:0;background:linear-gradient(145deg,#31423a,#121a16);border:1px solid rgba(255,255,255,.24);box-shadow:0 0 0 5px rgba(33,168,74,.13),inset 0 1px 0 rgba(255,255,255,.20);clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%)}
.tl__marker::after{content:'';position:absolute;inset:34%;background:var(--green-bright);border-radius:2px;box-shadow:0 0 10px rgba(58,208,106,.7)}
.tl__item:hover .tl__marker{background:linear-gradient(145deg,#3ad06a,#0e5c2c)}
.tl__item:nth-child(odd) .tl__marker{right:-56px}
.tl__item:nth-child(even) .tl__marker{left:-56px}
.tl__year{font-family:var(--font-mono);font-weight:700;letter-spacing:.02em}
.tl__card{background:linear-gradient(160deg,rgba(22,33,28,.72),rgba(13,18,16,.72));border:1px solid var(--line);border-radius:14px;padding:22px 24px}
@media (max-width:900px){.tl__item .tl__marker{left:-40px !important;right:auto !important}}


/* ================= ROUND 3 ================= */
/* 1. Gallery filter did nothing: .gitem{display:block} beat the [hidden] attribute */
.gitem[hidden],.jet-listing-grid__item[hidden]{display:none !important}
/* 2. Hero play glyph truly centred (line-height was pushing it down) */
.hero__play{display:grid;place-items:center;line-height:0;padding:0}
.hero__play svg{width:26px;height:26px;display:block;margin:0 0 0 3px}
.hero__play::before{margin:0 0 0 4px;align-self:center}
.hero__play::after{top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.75);opacity:0}}
/* 3. Sell Your Scrap when it is the current page: the aria-current underline and
      my chevron were both ::after on the same <a>, so it rendered as a green
      diamond below the label. Chevron moves to the parent. */
.nav .has-sub > a::after{content:none !important}
.nav .has-sub{position:relative;display:inline-flex;align-items:center}
.nav .has-sub::after{content:'';flex:0 0 auto;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.75;background:none !important;position:static}
.nav .has-sub > a[aria-current='page']::after{content:'' !important;position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--green);border:0;transform:none;width:auto;margin:0}
/* 4. Timeline: scroll fills the rail like metal loading into a pipe */
.tl{position:relative}
.tl::after{content:'';position:absolute;left:50%;margin-left:-6px;top:6px;bottom:6px;width:12px;border-radius:4px;pointer-events:none;background:repeating-linear-gradient(180deg,#3ad06a 0 9px,#1c8f40 9px 13px,#21a84a 13px 22px);box-shadow:0 0 18px rgba(58,208,106,.45);clip-path:inset(0 0 100% 0)}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.tl::after{animation:tl-fill linear both;animation-timeline:view();animation-range:cover 2% cover 78%}}}
@keyframes tl-fill{to{clip-path:inset(0 0 0% 0)}}
@media (max-width:900px){.tl::after{left:7px;margin-left:0}}


/* ================= ROUND 4 ================= */
/* .has-sub is a Bricks block, so it inherited flex-direction:column and the
   chevron dropped onto its own line under the label. */
.nav .has-sub{display:inline-flex !important;flex-direction:row !important;align-items:center;flex-wrap:nowrap}
.nav .has-sub > a{white-space:nowrap}
/* Overlay menu hover preview must actually fade in */
.menu-preview.is-visible{opacity:.95 !important;visibility:visible !important}
.menu-preview{z-index:0}
.mobile-menu nav{position:relative;z-index:2}


/* ================= ROUND 5 ================= */
/* Gallery filter row centred */
.gfilters{justify-content:center}
/* Why cards: less transparent again, taller image */
.why-scard{background:linear-gradient(155deg,rgba(38,52,45,.90),rgba(11,16,13,.93)) !important;border-color:rgba(255,255,255,.22) !important;-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
.why-scard:not(.is-active){opacity:.42}
.why-scard__img{max-height:230px;aspect-ratio:16/8}
.why-stack{height:480px}
/* Project cards: media flush to the card edges, cover, shorter body */
.project{overflow:hidden}
.project__media{margin:0 !important;border-radius:0 !important;aspect-ratio:16/10;overflow:hidden}
.project__media img{width:100% !important;height:100% !important;object-fit:cover !important;display:block;border-radius:0 !important}
.project__body{padding:18px 22px 22px}
.project__body .t-body{margin-bottom:0}
.project__cta{margin-top:14px}
.projects-light .project.card{border-bottom-right-radius:44px}
/* Overlay menu preview: pulled inside, not hugging the edge */
.menu-preview{right:clamp(24px,10vw,180px);width:min(34vw,400px)}
/* Branded scrollbar */
html{scrollbar-color:var(--green) var(--bg-2);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--green-bright),var(--green));border-radius:10px;border:3px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:var(--green-bright)}
::-webkit-scrollbar-corner{background:var(--bg-2)}
/* Lock background scroll while the overlay menu is open */
body.menu-open{overflow:hidden !important}


/* ================= ROUND 6 ================= */
/* Play glyph: absolutely positioned so no line-box/baseline can offset it */
.hero__play{position:relative;font-size:0;line-height:0;display:block;padding:0}
.hero__play::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border-left:20px solid currentColor;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:0}
.hero__play svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:26px;height:26px}


/* ================= ROUND 7 ================= */
/* Header was never really space-between: Bricks blocks are width:100%, so
   .header-actions resolved to the full 1400px and overflowed the container. */
.site-header .brand,.site-header .header-actions,.site-header .nav{width:auto !important}
.site-header .brand,.site-header .header-actions{flex:0 0 auto !important}
.site-header .nav{flex:1 1 auto !important;min-width:0}
/* View all projects: the wrapper is a Bricks column-flex, so justify-content
   was centring on the vertical axis. */
.projects-viewall{display:flex !important;flex-direction:row !important;justify-content:center !important;align-items:center}
/* Single project: centre the year / location row */
.page-hero .project__meta{justify-content:center;display:flex}
/* Masonry for a plain .ggrid (project single) - the listing-grid rule had set columns:auto */
.ggrid:not(:has(.jet-listing-grid)){display:block !important;columns:4 !important;column-gap:14px !important}
@media (max-width:1080px){.ggrid:not(:has(.jet-listing-grid)){columns:3 !important}}
@media (max-width:900px){.ggrid:not(:has(.jet-listing-grid)){columns:2 !important}}
/* Project cards: tighter, closer to the mockup */
.project__body{padding:16px 20px 20px}
.project__body .t-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
.project__meta{margin-bottom:8px}
.project__thumbs{display:flex;flex-direction:row;gap:6px;margin-top:12px}
.project__thumbs img{width:46px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.project__cta{margin-top:12px;padding:11px 20px}
.projects-light .project.card{height:100%}


/* ================= ROUND 8 ================= */
/* Nav was splitting in two: .has-sub is a Bricks block (width:100%) so it
   inflated inside the nav and shoved the remaining items to the right. */
.nav > *{width:auto !important;flex:0 0 auto !important}
.nav .has-sub{width:auto !important;flex:0 0 auto !important}
.nav{justify-content:center;gap:clamp(14px,1.8vw,28px)}
/* Project cards back to the local mockup values (site/css/dir-industrial.css) */
.project__body{padding:22px 24px 26px}
.project__meta{margin-bottom:10px}
.project__body h3{margin-bottom:8px}
.project__body .t-body{-webkit-line-clamp:3}
.project__thumbs{display:flex;flex-direction:row;gap:8px;margin-top:16px}
.project__thumbs img{width:54px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.project__media{aspect-ratio:16/10;border:0;border-radius:0;margin:0}
.projects-light .project.card{background:#11201a;border-color:rgba(0,0,0,.14);border-bottom-right-radius:54px}
.project__cta{margin-top:14px}
/* Projects grid: always 3 per row, same as home */
.portfolio-grid .jet-listing-grid__items{display:flex !important;flex-wrap:wrap !important;gap:28px !important}
.portfolio-grid .jet-listing-grid__item{flex:0 0 calc((100% - 56px) / 3) !important;width:calc((100% - 56px) / 3) !important;max-width:none !important;margin:0 !important}
@media (max-width:900px){.portfolio-grid .jet-listing-grid__item{flex-basis:calc((100% - 28px) / 2) !important;width:calc((100% - 28px) / 2) !important}}
@media (max-width:600px){.portfolio-grid .jet-listing-grid__item{flex-basis:100% !important;width:100% !important}}


/* ================= ROUND 9 =================
   A 4-image project gallery in 4 masonry columns put one photo per column, so
   every column was a different height and it read as broken. Scale the column
   count to the number of photos instead. */
.ggrid:not(:has(.jet-listing-grid)):has(> :nth-child(2):last-child){columns:2 !important}
.ggrid:not(:has(.jet-listing-grid)):has(> :nth-child(3):last-child){columns:3 !important}
.ggrid:not(:has(.jet-listing-grid)):has(> :nth-child(4):last-child){columns:2 !important}
.ggrid:not(:has(.jet-listing-grid)):has(> :nth-child(5):last-child){columns:3 !important}
.ggrid:not(:has(.jet-listing-grid)):has(> :nth-child(6):last-child){columns:3 !important}
.ggrid:not(:has(.jet-listing-grid)):has(> :first-child:last-child){columns:1 !important;max-width:760px;margin-inline:auto}
@media (max-width:900px){.ggrid:not(:has(.jet-listing-grid)){columns:2 !important}}
@media (max-width:600px){.ggrid:not(:has(.jet-listing-grid)){columns:1 !important}}


/* ================= ROUND 10 =================
   Single-project gallery rows were touching: an earlier rule set
   .ggrid .gitem{margin:0}, which killed the bottom gutter the CSS-columns
   masonry relies on (column-gap only spaces columns, not rows). */
.ggrid .gitem{margin:0 0 14px !important}
.ggrid:not(:has(.jet-listing-grid)) .gitem{margin:0 0 14px !important}
@media (max-width:560px){.ggrid .gitem{margin:0 0 10px !important}}


/* ================= ROUND 11 =================
   Global scroll-to-top, fixed bottom right, output from the footer template. */
.to-top{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:120;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(13,18,16,.82);border:1px solid var(--line-strong);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .25s var(--ease),border-color .25s var(--ease);padding:0}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--green);border-color:var(--green);color:#fff}
.to-top::before{content:'';width:10px;height:10px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg)}
@media (max-width:560px){.to-top{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s linear}}


/* ================= ROUND 12 =================
   Project gallery popup: glass surface matching the overlay menu, close X,
   and a centre-focused horizontal slider with blurred sides. */
.brx-popup[data-popup-id='181'] .brx-popup-content{background:radial-gradient(75% 80% at 100% 100%,rgba(33,168,74,.18),transparent 55%),rgba(10,15,13,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-strong);border-radius:var(--r-panel);max-width:min(1500px,94vw);width:100%;padding:clamp(26px,4vw,54px);position:relative;color:var(--text)}
.brx-popup[data-popup-id='181'] .brx-popup-backdrop{background:rgba(5,8,7,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.st-popup__close{position:absolute;top:18px;right:20px;z-index:5;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);color:#fff;padding:0;transition:border-color .25s var(--ease),background .25s var(--ease)}
.st-popup__close:hover{border-color:var(--green-bright);background:rgba(33,168,74,.2)}
.st-popup__close::before,.st-popup__close::after{content:'';position:absolute;width:17px;height:2px;background:currentColor;border-radius:2px}
.st-popup__close::before{transform:rotate(45deg)}
.st-popup__close::after{transform:rotate(-45deg)}
/* Slider: horizontal snap, centre item sharp, sides blurred */
.brx-popup .ggrid{display:flex !important;columns:auto !important;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px calc(50% - min(30vw,430px));margin:0;scrollbar-width:none}
.brx-popup .ggrid::-webkit-scrollbar{display:none}
.brx-popup .gitem{flex:0 0 min(60vw,860px);scroll-snap-align:center;margin:0 !important;break-inside:auto}
.brx-popup .gitem__btn{aspect-ratio:16/10;cursor:default}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
.brx-popup .gitem{animation:st-slide-focus linear both;animation-timeline:view(x);animation-range:entry 10% exit 90%}
@keyframes st-slide-focus{0%{filter:blur(5px) brightness(.5);transform:scale(.88)}50%{filter:none;transform:scale(1)}100%{filter:blur(5px) brightness(.5);transform:scale(.88)}}
}}
@media (max-width:700px){.brx-popup .gitem{flex-basis:82vw}.brx-popup .ggrid{padding:10px calc(50% - 41vw)}}


/* ================= ROUND 13 =================
   Timeline now renders through a JetEngine Listing Grid, which wraps each
   milestone in .jet-listing-grid__item. The alternating layout and the steel
   rail must key off that wrapper instead of .tl__item. */
.tl > .jet-listing-grid,.tl .jet-listing-grid__items{display:block !important;width:100% !important;margin:0 !important;padding:0 !important;columns:auto !important}
.tl .jet-listing-grid__item{display:block !important;width:100% !important;max-width:none !important;flex:none !important;margin:0 !important;padding:0 !important;position:relative}
.tl .jet-listing-grid__item .tl__item{width:calc(50% - 42px);padding-bottom:clamp(26px,3.5vw,44px)}
.tl .jet-listing-grid__item:nth-child(odd) .tl__item{margin-right:auto;text-align:right}
.tl .jet-listing-grid__item:nth-child(even) .tl__item{margin-left:auto;text-align:left}
.tl .jet-listing-grid__item:nth-child(odd) .tl__marker{left:auto;right:-56px}
.tl .jet-listing-grid__item:nth-child(even) .tl__marker{left:-56px;right:auto}
.tl .jet-listing-grid__item:nth-child(odd) .tl__card .t-body,.tl .jet-listing-grid__item:nth-child(odd) .tl__img{margin-left:auto}
@media (max-width:900px){
.tl .jet-listing-grid__item .tl__item,.tl .jet-listing-grid__item:nth-child(odd) .tl__item,.tl .jet-listing-grid__item:nth-child(even) .tl__item{width:auto;margin:0;text-align:left}
.tl .jet-listing-grid__item .tl__marker{left:-40px !important;right:auto !important}
.tl .jet-listing-grid__item:nth-child(odd) .tl__card .t-body,.tl .jet-listing-grid__item:nth-child(odd) .tl__img{margin-left:0}
}
/* hide the image frame when a milestone has no photo */
.tl__img:not(:has(img)){display:none}


/* ================= ROUND 14 ================= */
/* Legal page typography */
.legal{max-width:78ch;margin-inline:auto;text-align:left}
.legal h2{font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2.2vw,24px);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-heading);margin:38px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted);font-size:var(--fs-body);line-height:1.75}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 16px 0;padding-left:20px;list-style:disc}
.legal li{margin-bottom:8px}
.legal strong{color:var(--text)}
.legal a{color:var(--green-bright);text-decoration:underline;text-underline-offset:3px}
/* Footer privacy link, next to the legal name */
.footer-privacy{color:var(--faint);font-size:13px}
.footer-privacy:hover{color:var(--green-bright)}
.footer-bottom{gap:8px 18px;align-items:center}
/* Form consent checkbox */
.brxe-form .bricks-form-group-checkbox label,.brxe-form label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:500;font-size:13.5px;color:var(--muted)}
.brxe-form input[type=checkbox]{width:18px;height:18px;min-width:18px;accent-color:var(--green);margin:1px 0 0;padding:0;border-radius:5px}
/* ---- Baled scrap at the end of the timeline ----
   Sits over the following section and straightens as you scroll past it. */
.tl__bale{position:relative;z-index:3;width:clamp(180px,22vw,300px);margin:-26px auto -90px;aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 6px rgba(13,18,16,.9);transform:rotate(-7deg) scale(.96);pointer-events:none}
.tl__bale img{width:100%;height:100%;object-fit:cover;display:block}
.tl__bale::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(33,168,74,.16),transparent 55%);pointer-events:none}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
.tl__bale{animation:st-bale-straighten linear both;animation-timeline:view();animation-range:entry 55% cover 42%}
@keyframes st-bale-straighten{from{transform:rotate(-9deg) scale(.94)}to{transform:rotate(0deg) scale(1)}}
}}
@media (max-width:700px){.tl__bale{margin:-10px auto -60px;width:min(190px,50vw)}}


/* ================= ROUND 15 =================
   Timeline: every .tl__item is now an only child of its listing wrapper, so
   .tl__item:nth-child(odd) matched ALL of them and the even markers were
   thrown 295px off. Alternation must key off the wrapper only. */
.tl .tl__item:nth-child(odd) .tl__marker,.tl .tl__item:nth-child(even) .tl__marker{left:auto;right:auto}
.tl .jet-listing-grid__item:nth-child(odd) .tl__marker{left:auto !important;right:-57px !important}
.tl .jet-listing-grid__item:nth-child(even) .tl__marker{left:-57px !important;right:auto !important}
/* Cards above the rail, rail behind */
.tl::before,.tl::after{z-index:0}
.tl .jet-listing-grid__item{z-index:2}
.tl__card{position:relative;z-index:2;background:linear-gradient(160deg,rgba(22,33,28,.96),rgba(13,18,16,.96))}
.tl__marker{z-index:3}
/* Popup slider arrows */
.st-slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(13,18,16,.78);border:1px solid var(--line-strong);color:#fff;padding:0;transition:background .25s var(--ease),border-color .25s var(--ease),opacity .25s}
.st-slider-nav:hover{background:var(--green);border-color:var(--green)}
.st-slider-nav[disabled]{opacity:.25;cursor:default}
.st-slider-nav--prev{left:18px}
.st-slider-nav--next{right:18px}
.st-slider-nav::before{content:'';width:11px;height:11px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.st-slider-nav--prev::before{transform:translateX(2px) rotate(-135deg)}
.st-slider-nav--next::before{transform:translateX(-2px) rotate(45deg)}
@media (max-width:700px){.st-slider-nav{width:44px;height:44px}.st-slider-nav--prev{left:8px}.st-slider-nav--next{right:8px}}


/* ================= ROUND 16 =================
   Even rows computed margin-left:296px / margin-right:296px -> the card was
   CENTRED on the rail, not pushed to the right half, so the marker (left:-57px)
   landed 296px short. Both margins must be pinned, not just one. */
.tl .jet-listing-grid__item:nth-child(odd) .tl__item{margin-left:0 !important;margin-right:auto !important}
.tl .jet-listing-grid__item:nth-child(even) .tl__item{margin-left:auto !important;margin-right:0 !important}


/* ================= ROUND 17 =================
   Bale is now a designed vector (shortcode), not a photo.
   Popup slider: blurred side slides are clickable to become active. */
.tl__bale{background:none !important;border:0 !important;box-shadow:none !important;overflow:visible !important;width:min(320px,74vw) !important;height:auto !important;border-radius:0 !important}
.tl__bale .brxe-shortcode{display:block;width:100%}
.tl__bale svg.bale{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.62))}
.brx-popup .ggrid .gitem{cursor:pointer}
.brx-popup .ggrid .gitem.is-center{cursor:default}


/* ================= ROUND 18 =================
   Scroll-driven grab-and-feed opening for the timeline: the grab descends onto
   the pile, closes, lifts, tracks to centre and drops the load into the hopper
   that feeds the line. Cable scaleY and grab translateY are keyframe-synced:
   grabY = -274 * (1 - cableScale). */
.tl-intro-wrap{display:block;width:100%}
.tl-intro{position:relative;min-height:240vh;width:100%}
.tl-intro__stick{position:sticky;top:8vh;height:84vh;display:flex;align-items:center;justify-content:center}
.tlm{width:min(860px,92%);height:auto;overflow:visible}
/* static end-state: correct with no scroll-timeline support and under reduced motion */
.tlm__cable{transform:scaleY(.32);transform-origin:450px 66px}
.tlm__grab{transform:translateY(-186px)}
.tlm__jawL{transform:rotate(-34deg);transform-origin:446px 374px}
.tlm__jawR{transform:rotate(34deg);transform-origin:454px 374px}
.tlm__load{opacity:0}
.tlm__sh{opacity:0}
.tlm__hopglow{opacity:.9}
.tlm__spark{opacity:1}
.tlm__pile{transform-origin:270px 492px}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .tl-intro{view-timeline-name:--tlin;view-timeline-axis:block}
 .tlm__trolley,.tlm__cable,.tlm__grab,.tlm__jawL,.tlm__jawR,.tlm__load,.tlm__pile,.tlm__hopglow,.tlm__spark,.tlm__sh{animation-timeline:--tlin;animation-range:contain 0% contain 100%;animation-fill-mode:both;animation-timing-function:linear;animation-duration:1s}
 .tlm__trolley{animation-name:tlmTrolley}
 .tlm__cable{animation-name:tlmCable}
 .tlm__grab{animation-name:tlmGrab}
 .tlm__jawL{animation-name:tlmJawL}
 .tlm__jawR{animation-name:tlmJawR}
 .tlm__load{animation-name:tlmLoad}
 .tlm__pile{animation-name:tlmPile}
 .tlm__hopglow{animation-name:tlmGlow}
 .tlm__spark{animation-name:tlmSpark}
 .tlm__sh1{animation-name:tlmShA}
 .tlm__sh2{animation-name:tlmShB}
 .tlm__sh3{animation-name:tlmShC}
 .tlm__sh4{animation-name:tlmShD}
 .tlm__sh5{animation-name:tlmShE}
 .tlm__sh6{animation-name:tlmShF}
}}
@keyframes tlmTrolley{0%,48%{transform:translateX(-150px)}64%,100%{transform:translateX(0)}}
@keyframes tlmCable{0%,6%{transform:scaleY(.32)}22%,44%{transform:scaleY(1)}58%,100%{transform:scaleY(.32)}}
@keyframes tlmGrab{0%,6%{transform:translateY(-186px)}22%,44%{transform:translateY(0)}58%,100%{transform:translateY(-186px)}}
@keyframes tlmJawL{0%,24%{transform:rotate(-34deg)}32%,76%{transform:rotate(0)}84%,100%{transform:rotate(-34deg)}}
@keyframes tlmJawR{0%,24%{transform:rotate(34deg)}32%,76%{transform:rotate(0)}84%,100%{transform:rotate(0deg)}}
@keyframes tlmLoad{0%,28%{opacity:0}34%,76%{opacity:1}82%,100%{opacity:0}}
@keyframes tlmPile{0%,28%{transform:scale(1)}38%,100%{transform:scale(.9) translateY(4px)}}
@keyframes tlmGlow{0%,76%{opacity:0}92%,100%{opacity:.9}}
@keyframes tlmSpark{0%,84%{opacity:0}94%,100%{opacity:1}}
@keyframes tlmShA{0%,80%{opacity:0;transform:translate(0,0) rotate(0)}84%{opacity:1}94%,100%{opacity:0;transform:translate(6px,178px) rotate(38deg)}}
@keyframes tlmShB{0%,82%{opacity:0;transform:translate(0,0) rotate(0)}86%{opacity:1}96%,100%{opacity:0;transform:translate(-14px,172px) rotate(-42deg)}}
@keyframes tlmShC{0%,81%{opacity:0;transform:translate(0,0) rotate(0)}85%{opacity:1}95%,100%{opacity:0;transform:translate(22px,176px) rotate(30deg)}}
@keyframes tlmShD{0%,84%{opacity:0;transform:translate(0,0) rotate(0)}88%{opacity:1}98%,100%{opacity:0;transform:translate(-8px,166px) rotate(-26deg)}}
@keyframes tlmShE{0%,86%{opacity:0;transform:translate(0,0) rotate(0)}90%{opacity:1}100%{opacity:0;transform:translate(16px,162px) rotate(46deg)}}
@keyframes tlmShF{0%,83%{opacity:0;transform:translate(0,0) rotate(0)}87%{opacity:1}97%,100%{opacity:0;transform:translate(-20px,168px) rotate(-34deg)}}


/* ================= ROUND 19 =================
   Bale sits on nothing (no plate/panel behind it); project card thumbs get
   rounded corners + a hover zoom on the image. */
.tl__bale,.tl__bale .brxe-shortcode,.tl__bale div{background:none !important;background-color:transparent !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;border-radius:0 !important;padding:0 !important}
/* project card thumbnails */
.project__thumb{border-radius:12px !important;overflow:hidden !important;position:relative;padding:0 !important;border:1px solid var(--line) !important;background:#121a17;line-height:0;transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.project__thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .55s var(--ease),filter .45s var(--ease);will-change:transform}
.project__thumb:hover img,.project__thumb:focus-visible img{transform:scale(1.14)}
.project__thumb:hover,.project__thumb:focus-visible{border-color:var(--green) !important;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.project__thumb:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px}
/* popup slider tiles match */
.brx-popup .ggrid .gitem img{border-radius:14px}
@media (prefers-reduced-motion:reduce){.project__thumb img{transition:none}.project__thumb:hover img{transform:none}}


/* ================= ROUND 20 =================
   Trolley start was -150 (grab centre x=300) but the pile centres on x=270,
   so the grab closed 30px off the pile. A later @keyframes of the same name
   wins, so redefine rather than patch. */
@keyframes tlmTrolley{0%,48%{transform:translateX(-180px)}64%,100%{transform:translateX(0)}}


/* ================= ROUND 21 =================
   .tl__bale::after was a 320x320 green gradient plate added back when the bale
   was a photo. The vector needs no plate behind it. */
.tl__bale::after,.tl__bale::before{content:none !important;display:none !important;background:none !important}


/* ================= ROUND 22 =================
   Full-bleed gantry (beam rects run past the viewBox; svg overflow:visible and
   body overflow-x:hidden trim it at the viewport). Grabbed chunk leaves with
   the grab. Shards land behind the funnel walls. Hopper pulled down to the
   pipe. Bale assembles out of the pipe on its own view timeline. */
.tl-intro__stick{align-items:flex-end !important;top:6vh !important;height:88vh !important}
.tl-intro{margin-bottom:-104px}
.tlm{overflow:visible}
.tlm__chunk{transform-box:fill-box;transform-origin:center}
.tlm__chunk{opacity:0;transform:scale(.6)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .tlm__chunk{animation-timeline:--tlin;animation-range:contain 0% contain 100%;animation-fill-mode:both;animation-timing-function:linear;animation-duration:1s;animation-name:tlmChunk}
}}
@keyframes tlmChunk{0%,28%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(.55)}}
@keyframes tlmPile{0%,30%{transform:translateY(0)}42%,100%{transform:translateY(3px)}}
@keyframes tlmShA{0%,80%{opacity:0;transform:translate(0,0) rotate(0)}83%{opacity:1}96%,100%{opacity:1;transform:translate(8px,192px) rotate(34deg)}}
@keyframes tlmShB{0%,82%{opacity:0;transform:translate(0,0) rotate(0)}85%{opacity:1}98%,100%{opacity:1;transform:translate(-20px,190px) rotate(-40deg)}}
@keyframes tlmShC{0%,81%{opacity:0;transform:translate(0,0) rotate(0)}84%{opacity:1}97%,100%{opacity:1;transform:translate(18px,188px) rotate(28deg)}}
@keyframes tlmShD{0%,84%{opacity:0;transform:translate(0,0) rotate(0)}87%{opacity:1}100%{opacity:1;transform:translate(-12px,180px) rotate(-24deg)}}
@keyframes tlmShE{0%,86%{opacity:0;transform:translate(0,0) rotate(0)}89%{opacity:1}100%{opacity:1;transform:translate(26px,176px) rotate(44deg)}}
@keyframes tlmShF{0%,83%{opacity:0;transform:translate(0,0) rotate(0)}86%{opacity:1}99%,100%{opacity:1;transform:translate(-30px,174px) rotate(-32deg)}}
.bl__faces,.bl__straps{transform-box:view-box;transform-origin:205px 220px}
.bl__p{transform-box:fill-box;transform-origin:center;opacity:0}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .tl__bale{view-timeline-name:--tlbale;view-timeline-axis:block}
 .bl__p,.bl__faces,.bl__straps{animation-timeline:--tlbale;animation-range:cover 5% cover 45%;animation-fill-mode:both;animation-timing-function:linear;animation-duration:1s}
 .bl__faces{animation-name:blFaces}
 .bl__straps{animation-name:blStraps}
 .bl__p1{animation-name:blP1}
 .bl__p2{animation-name:blP2}
 .bl__p3{animation-name:blP3}
 .bl__p4{animation-name:blP4}
 .bl__p5{animation-name:blP5}
 .bl__p6{animation-name:blP6}
 .bl__p7{animation-name:blP7}
}}
@keyframes blFaces{0%,64%{opacity:0;transform:scale(.86)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes blStraps{0%,80%{opacity:0;transform:scale(.93)}96%,100%{opacity:1;transform:scale(1)}}
@keyframes blP1{0%{opacity:0;transform:translate(92px,-188px) scale(.28) rotate(-40deg)}10%{opacity:1;transform:translate(66px,-117px) scale(.55) rotate(-40deg)}44%{opacity:1;transform:translate(-70px,-70px) scale(1) rotate(-16deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP2{0%{opacity:0;transform:translate(15px,-176px) scale(.28) rotate(35deg)}10%{opacity:1;transform:translate(11px,-109px) scale(.55) rotate(35deg)}44%{opacity:1;transform:translate(30px,-95px) scale(1) rotate(20deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP3{0%{opacity:0;transform:translate(-49px,-202px) scale(.28) rotate(-28deg)}10%{opacity:1;transform:translate(-35px,-125px) scale(.55) rotate(-28deg)}44%{opacity:1;transform:translate(80px,-60px) scale(1) rotate(14deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP4{0%{opacity:0;transform:translate(81px,-263px) scale(.28) rotate(44deg)}10%{opacity:1;transform:translate(58px,-163px) scale(.55) rotate(44deg)}44%{opacity:1;transform:translate(-90px,-30px) scale(1) rotate(-22deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP5{0%{opacity:0;transform:translate(5px,-257px) scale(.28) rotate(-36deg)}10%{opacity:1;transform:translate(4px,-159px) scale(.55) rotate(-36deg)}44%{opacity:1;transform:translate(5px,-120px) scale(1) rotate(18deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP6{0%{opacity:0;transform:translate(-48px,-290px) scale(.28) rotate(30deg)}10%{opacity:1;transform:translate(-35px,-180px) scale(.55) rotate(30deg)}44%{opacity:1;transform:translate(95px,-25px) scale(1) rotate(-14deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP7{0%{opacity:0;transform:translate(41px,-310px) scale(.28) rotate(-46deg)}10%{opacity:1;transform:translate(30px,-192px) scale(.55) rotate(-46deg)}44%{opacity:1;transform:translate(-55px,-110px) scale(1) rotate(24deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}


/* ================= ROUND 23 =================
   SVG elements default to transform-box:view-box, so rotate() on a shard
   pivoted around the viewBox centre (450,280) and threw it across the scene.
   Each shard must rotate about its own centre. */
.tlm__sh{transform-box:fill-box;transform-origin:center}


/* ================= ROUND 24 =================
   1. Rail fill finished at cover 78%, i.e. while the end of the line was still
      far below the fold, so it read as 'already full'. entry 100% ends the fill
      exactly when the bottom of .tl (the outlet) reaches the viewport bottom.
   2. Scatter cluster re-centred on the rail (was ~25 units left of the viewBox
      centre) and tightened.
   3. Tilt moved from .tl__bale to .bl__cube so the outlet stays fixed.
   4. Mobile: rail runs BEHIND the cards, cards full width. */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .tl::after{animation-range:cover 2% entry 100%}
}}
.tl__bale{animation:none}
.bl__cube{transform-box:view-box;transform-origin:205px 332px}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .bl__cube{animation:blTilt linear both;animation-timeline:--tlbale;animation-range:cover 30% cover 60%}
}}
@keyframes blTilt{0%{transform:rotate(-7deg)}100%{transform:rotate(0)}}
@keyframes blP1{0%{opacity:0;transform:translate(97px,-132px) scale(.26) rotate(-38deg)}10%{opacity:1;transform:translate(68px,-87px) scale(.52) rotate(-38deg)}44%{opacity:1;transform:translate(47px,-23px) scale(1) rotate(-14deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP2{0%{opacity:0;transform:translate(20px,-120px) scale(.26) rotate(34deg)}10%{opacity:1;transform:translate(14px,-79px) scale(.52) rotate(34deg)}44%{opacity:1;transform:translate(28px,19px) scale(1) rotate(18deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP3{0%{opacity:0;transform:translate(-44px,-146px) scale(.26) rotate(-26deg)}10%{opacity:1;transform:translate(-31px,-96px) scale(.52) rotate(-26deg)}44%{opacity:1;transform:translate(8px,-34px) scale(1) rotate(12deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP4{0%{opacity:0;transform:translate(86px,-207px) scale(.26) rotate(42deg)}10%{opacity:1;transform:translate(60px,-137px) scale(.52) rotate(42deg)}44%{opacity:1;transform:translate(44px,-23px) scale(1) rotate(-20deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP5{0%{opacity:0;transform:translate(10px,-201px) scale(.26) rotate(-34deg)}10%{opacity:1;transform:translate(7px,-133px) scale(.52) rotate(-34deg)}44%{opacity:1;transform:translate(5px,-52px) scale(1) rotate(16deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP6{0%{opacity:0;transform:translate(-43px,-234px) scale(.26) rotate(28deg)}10%{opacity:1;transform:translate(-30px,-154px) scale(.52) rotate(28deg)}44%{opacity:1;transform:translate(5px,-45px) scale(1) rotate(-12deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes blP7{0%{opacity:0;transform:translate(46px,-254px) scale(.26) rotate(-44deg)}10%{opacity:1;transform:translate(32px,-168px) scale(.52) rotate(-44deg)}44%{opacity:1;transform:translate(36px,-60px) scale(1) rotate(22deg)}78%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}88%,100%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}}
@media (max-width:900px){
 /* rail runs behind the cards, centred, not beside them */
 .tl{padding-left:0 !important}
 .tl::before,.tl::after{left:50% !important;margin-left:-6px !important;transform:none !important}
 .tl .jet-listing-grid__item:nth-child(odd) .tl__item,.tl .jet-listing-grid__item:nth-child(even) .tl__item{width:100% !important;margin-left:0 !important;margin-right:0 !important;text-align:left !important}
 .tl .tl__card,.tl .tl__card .t-body{text-align:left !important;max-width:none !important}
 .tl .jet-listing-grid__item:nth-child(odd) .tl__marker,.tl .jet-listing-grid__item:nth-child(even) .tl__marker{left:50% !important;right:auto !important;margin-left:-15px;top:-15px}
 .tl .jet-listing-grid__item{z-index:2}
 .tl__card{z-index:2}
 /* intro machine */
 .tl-intro{min-height:190vh;margin-bottom:-72px}
 .tl-intro__stick{top:8vh !important;height:84vh !important}
 .tlm{width:100%}
}
@media (max-width:600px){
 .tl-intro{min-height:165vh;margin-bottom:-56px}
 .tl__bale{width:min(216px,64vw) !important}
 .tl .tl__card{padding:18px 16px}
}


/* ================= ROUND 25 =================
   .tl__bale kept a static transform:rotate(-7deg) from when the whole bale
   tilted. Killing the animation left the static tilt, which rotated the fixed
   outlet 16px off the rail. The tilt now lives on .bl__cube only. */
.tl__bale{transform:none !important}


/* ================= ROUND 26 =================
   .tl is far taller than the viewport, so 'entry 100%' resolves to
   contain-START (the moment .tl's top hits the viewport top) -- near the very
   beginning, which is why the rail read as full almost immediately.
   contain 100% = contain-END = .tl's bottom reaching the viewport bottom,
   i.e. the fill completes exactly as the outlet comes into view. */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .tl::after{animation-range:cover 2% contain 100%}
}}


/* ================= ROUND 27 — responsive pass =================
   1. body{overflow-x:hidden} still allows panning/programmatic scroll, so the
      full-bleed gantry beam left ~29px of sideways scroll on /about/.
      overflow-x:clip on the root contains it WITHOUT creating a scroll
      container, so sticky + view() timelines keep working. (clip pairs with
      overflow-y:visible; hidden would force it to auto.)
   2. The partner marquee is a flex item: min-width:auto let it grow to its
      track's content width (1120px inside a 380px section) = 730px of
      horizontal scroll on the home page at 390.
   3. Mobile tap targets on the gallery filters and the footer privacy link. */
html{overflow-x:clip}
body{overflow-x:clip}
/* Only min-width:0 is needed: .marquee already has overflow:hidden and
   max-width:1120px + margin-inline:auto. The mobile blowout was the flex
   automatic minimum size (min-width:auto) refusing to shrink below the
   track's content width. width:100% IS needed (the section is a wrapping
   column flex container, so it sizes the item from content instead of
   stretching it). Never override max-width -- that is the 1120px cap that
   keeps it off the viewport edges, with margin-inline:auto centring it. */
.marquee{min-width:0 !important;overflow:hidden !important;width:100% !important}
.marquee__track{flex-wrap:nowrap}
.page-hero__bg,.page-hero__bg [data-zoom],.page-hero{overflow:hidden}
@media (max-width:900px){
 /* tap targets */
 .gfilters button,.gfilters a,[data-gfilter]{min-height:40px;padding:9px 16px !important;display:inline-flex;align-items:center}
 .footer-privacy,.foot a{min-height:34px;display:inline-flex;align-items:center}
 .contact-lines a,.socs a{min-height:38px;display:inline-flex;align-items:center}
}


/* ================= ROUND 28 =================
   The 404 renders the theme's default search form: a transparent input with a
   light-grey hairline border, which reads as unstyled on the dark page.
   Match it to the site's real form fields (bg #1a231f, .18 border, 12px radius). */
body.error404 .search-form,body.error404 form[role=search]{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;max-width:540px;margin:0 auto}
body.error404 input[type=search],body.error404 input[type=text],body.error404 .search-field{background:#1a231f !important;border:1px solid rgba(255,255,255,.18) !important;border-radius:12px !important;padding:13px 16px !important;color:var(--text) !important;font-size:15px !important;min-height:52px;width:min(320px,100%);box-shadow:none !important}
body.error404 input::placeholder{color:var(--muted);opacity:1}
body.error404 input[type=search]:focus,body.error404 .search-field:focus{outline:2px solid var(--green-bright);outline-offset:2px;border-color:var(--green) !important}
body.error404 input[type=submit],body.error404 .search-submit,body.error404 button[type=submit]{background:var(--green);color:#06110a;border:0;border-radius:12px;padding:15px 30px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:13.5px;line-height:1;cursor:pointer;min-height:52px;transition:background .25s var(--ease)}
body.error404 input[type=submit]:hover,body.error404 .search-submit:hover,body.error404 button[type=submit]:hover{background:var(--green-bright)}
@media (max-width:600px){body.error404 .search-form,body.error404 form[role=search]{padding:0 20px}body.error404 input[type=search],body.error404 .search-field{width:100%}}


/* ================= ROUND 29 =================
   Match the 404 search submit to the buttons already on the site (white on
   green, 12px radius, 15px/30px, 800/13.5px uppercase) instead of the
   #06110a from DESIGN-SYSTEM.md, so nothing looks like a one-off. */
body.error404 input[type=submit],body.error404 .search-submit,body.error404 button[type=submit]{background:var(--green);color:#fff;border:0;border-radius:12px;padding:15px 30px;font-weight:800;font-size:13.5px;letter-spacing:.675px;text-transform:uppercase;line-height:1;min-height:52px;cursor:pointer}
body.error404 input[type=submit]:hover,body.error404 .search-submit:hover,body.error404 button[type=submit]:hover{background:var(--green-bright);color:#fff}