/* TELCOSS BUILD: 20260717-J — if you do not see this stamp, the browser is running a CACHED old file. */
/* Telcoss — shared stylesheet. Loaded by every page.
   NB: every url() below sits inside a CSS custom property (--img-*).
   Those resolve against the PAGE, not this stylesheet, so paths are
   written as if from the page: 'aerial-down.png', NOT '../aerial-down.png'.
   Images therefore live beside the HTML, not beside this file. */
:root{
  --ink:#0B0F10;
  --ink-2:#33383A;      /* newsletter grey, like the reference */
  --ink-3:#171C1E;
  --steel:#9AA3A6;
  --chalk:#FFFFFF;
  /* ---- one place to change the brand colour ---- */
  --accent:#00A44F;        /* Telcoss green. Eyedropper logo.png and paste the real hex here. */
  --accent-lt:#3ED07F;     /* lighter tint, used for small text on black */

  /* ---- imagery: every path lives here ---- */
  --img-aerial-down:url("aerial-down.png");
  --img-aerial-angle:url("aerial-angle.png");
  --img-macro-detail:url("industrial-01.png");
  --img-macro-wheel:url("macro-wheel.png");
  --img-industrial-2:url("industrial-01.png");
  --img-industrial-1:url("industrial-02.png");
  --img-industrial-3:url("industrial-03.png");
  --img-industrial-4:url("industrial-04.png");
  --img-industrial-5:url("industrial-05.png");
  --img-industrial-6:url("industrial-06.png");
  --img-macro-detail-2:url("macro-detail-02.png");
  --line:rgba(255,255,255,.16);
  --display:'Archivo',Arial,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --nav-h:56px;
  --nav-h-hero:150px;
  --pad:clamp(18px,4vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--chalk);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--pad)}

/* ============ the reference lockup: eyebrow / title / discover ============ */
.lockup{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.lockup .eyebrow{font-family:var(--display);font-weight:500;font-size:clamp(.9rem,1.05vw,1.05rem);letter-spacing:.01em;color:var(--chalk);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.lockup .title{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1;
  font-size:clamp(2rem,3.4vw,3.4rem);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.discover{display:inline-flex;align-items:center;gap:14px;margin-top:8px;
  font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.discover .circ{width:36px;height:36px;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;transition:.35s}
.discover .circ svg{width:9px;height:12px;transition:transform .35s}
.discover:hover .circ{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.discover:hover .circ svg{transform:translateX(2px)}

/* Same fail-safe as cine.css: if site.js never loads, revealFail shows the
   content after 2.5s rather than leaving the page blank. site.js adds
   .js-live the moment it runs, which cancels it. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  animation:revealFail .01s linear 2.5s forwards}
.js-live .reveal{animation:none}
@keyframes revealFail{to{opacity:1;transform:none}}
.reveal.in{opacity:1;transform:none}

/* ============ page-transition curtain ============ */
/* Sequence: black fades IN over the page -> logo fades in, holds, fades out -> black fades OUT.
   Driven by two classes added in order: .curtain.show (black + logo in), then .curtain.out (black away). */
/* PAGE TRANSITION CURTAIN — two phases, because real page loads mean two pages:
     ARRIVE : starts black, fades out as the new page settles.
     LEAVE  : fades back in over the old page, THEN navigates.
   It starts VISIBLE in CSS so there's no white flash before JS runs. The
   failsafe animation below clears it even if JS never loads — otherwise a
   broken script would leave every visitor staring at a black screen. */
/* ---- page transition curtain ----
   Arriving: black plate -> mark fades in -> holds -> fades out -> plate lifts.
   Leaving:  straight to black, NO mark.
   The mark is animated on ONE side only. It used to run on both, and because
   the outgoing page navigated mid-fade the incoming page restarted the same
   animation from zero — the mark blinked off and back on. */
.curtain{position:fixed;inset:0;z-index:200;background:#000;
  display:flex;align-items:center;justify-content:center;
  opacity:1;visibility:visible;pointer-events:all;
  transition:opacity .42s ease, visibility 0s linear .42s;
  animation:curtainFailsafe .01s linear 2s forwards}
@keyframes curtainFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* 'forwards' fill beats normal rules: after 2s the curtain would be pinned
   invisible and could never fade back in. Cancel it as soon as JS is alive.
   The net is only ever for a dead site.js. */
.js-live .curtain{animation:none}

/* Leaving: to black, briskly. */
.curtain.show{opacity:1;visibility:visible;pointer-events:all;
  transition:opacity .42s ease, visibility 0s}
/* Arriving: the reveal is the moment the new page lands — give it room. */
.curtain.gone{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .62s ease, visibility 0s linear .62s}

/* The mark itself. Fades up and settles; the scale is barely there on purpose,
   it should read as weight rather than movement. */
.curtain__logo,
.curtain__word{opacity:0;transform:scale(.986);
  transition:opacity .4s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.curtain.logo-in .curtain__logo,
.curtain.logo-in .curtain__word{opacity:1;transform:none}
.curtain__logo{height:96px;width:auto}
.curtain__word{position:absolute;font-family:var(--display);font-weight:700;
  font-size:2.6rem;letter-spacing:.24em;color:var(--chalk);display:none}
.curtain__word span{color:var(--accent)}
/* if the logo PNG is missing, JS adds .noimg and we show the wordmark instead */
.curtain.noimg .curtain__logo{display:none}
.curtain.noimg .curtain__word{display:block}

/* ============ nav ============ */
/* Two heights: --nav-h scrolled (compact), --nav-h-hero at load (tall, holds the big logo). */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);background:var(--ink);
  display:flex;align-items:center;transition:height .45s cubic-bezier(.16,1,.3,1),background .4s}
.nav.nav--hero{height:var(--nav-h-hero)}
.nav.transparent{background:linear-gradient(rgba(0,0,0,.62),transparent)}
/* MENU and the phone number are pinned to the SCROLLED nav position
   (half of --nav-h from the top) so they never move. Only the logo scales. */
.nav__in{position:relative;width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;padding-inline:var(--pad)}

.nav__menu,.nav__phone{position:absolute;top:calc(var(--nav-h) / 2);translate:0 -50%;z-index:2;
  font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chalk);transition:color .25s}
.nav__menu{left:var(--pad);display:inline-flex;align-items:center;gap:10px;background:none;border:0;
  padding:6px 0;cursor:pointer}
.nav__menu-txt{position:relative;display:inline-block}
.nav__menu-txt::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav__menu:hover .nav__menu-txt::after{transform:scaleX(1)}
.nav__menu:hover,.nav__phone:hover{color:var(--accent-lt)}
.nav__phone{right:var(--pad)}

/* centred logo */
.mark{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.24em;display:flex;align-items:center;justify-content:center}
.mark span{color:var(--accent)}
/* logo image. If the supplied PNG is dark artwork, uncomment the filter line to knock it out white. */
.mark img{height:30px;width:auto;display:block;transition:height .45s cubic-bezier(.16,1,.3,1)}
.nav--hero .mark img{height:120px}      /* 4x the 30px scrolled size, on load */
/* .mark img{filter:brightness(0) invert(1)} */
.mark .wordmark{display:none;font-size:1.05rem;transition:font-size .45s cubic-bezier(.16,1,.3,1)}
.nav--hero .mark .wordmark{font-size:2.6rem}
.mark.fallback img{display:none}
.mark.fallback .wordmark{display:inline}
.foot__logo img{height:44px;width:auto;margin-bottom:20px}
.foot__logo.fallback img{display:none}
.foot__logo .wordmark{display:none}
.foot__logo.fallback .wordmark{display:inline}

.menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,40px);list-style:none}
.nav__side{display:flex;align-items:center;min-width:0}
.nav__side--left{grid-column:1;justify-content:flex-start}
.nav__side--right{grid-column:3;justify-content:flex-end;gap:26px}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{font-family:var(--display);font-weight:500;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--chalk);display:inline-flex;align-items:center;height:56px;transition:color .25s}
.menu>li>a:hover,.menu>li>button:hover,.menu>li.open>button{color:var(--accent-lt)}
.menu>li.open .nav__right{display:flex;align-items:center;gap:26px}
.nav__right a,.nav__right button{font-family:var(--display);font-weight:500;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase}
.nav__phone{color:var(--accent-lt)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger i{width:22px;height:1.5px;background:var(--chalk);display:block}

/* ============ assist CTA band ============ */
.assist-cta{background:#0E1315;border-bottom:1px solid var(--line);padding-block:clamp(56px,6.5vw,104px)}
.assist-cta__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.assist-cta .kicker{font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-lt)}
.assist-cta h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;
  font-size:clamp(2rem,3.6vw,3.4rem)}
.assist-cta p{max-width:52ch;color:#B9C0BF}
.assist-btn{margin-top:12px;display:inline-flex;align-items:center;gap:16px;background:var(--accent);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding:18px 30px;transition:.3s}
.assist-btn:hover{filter:brightness(1.12)}
.assist-btn .circ{width:30px;height:30px;border:1px solid rgba(11,15,16,.5);border-radius:50%;display:grid;place-items:center}
.assist-btn .circ svg{width:8px;height:11px;transition:transform .3s}
.assist-btn:hover .circ svg{transform:translateX(2px)}

/* ============ assist drawer ============ */
.assist{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s linear .5s}
.assist.open{visibility:visible;transition:visibility 0s}
.assist__scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:opacity .5s ease;backdrop-filter:blur(2px)}
.assist.open .assist__scrim{opacity:1}
.assist__panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:#131718;
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .55s cubic-bezier(.16,1,.3,1);box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.assist.open .assist__panel{transform:none}

.assist__head{padding:22px clamp(22px,4vw,42px) 0;flex:none}
.assist__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
/* Telcoss logo with ASSIST in small caps beneath it. */
.assist__brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.assist__brand img{height:30px;width:auto;display:block}
.assist__brand-txt{font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent-lt)}
.assist__brand em{font-style:normal;color:var(--accent-lt)}
.assist__x{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;
  color:var(--chalk);transition:.3s;flex:none}
.assist__x svg{width:14px;height:14px}
.assist__x:hover{background:var(--chalk);color:#131718;border-color:var(--chalk)}
.assist__bar{height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.assist__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.16,1,.3,1)}
.assist__count{display:block;margin-top:10px;font-family:var(--display);font-weight:500;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:#6C7477}

.assist__body{flex:1;overflow-y:auto;padding:clamp(24px,4vh,40px) clamp(22px,4vw,42px)}
.assist__eyebrow{font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-lt);display:block;margin-bottom:12px}
.assist__q{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.08;
  text-transform:uppercase;letter-spacing:.005em;margin-bottom:10px}
.assist__note{color:#8B9599;font-size:.88rem;margin-bottom:26px}

/* option chips */
.assist__opts{display:flex;flex-direction:column;gap:10px}
.opt{width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  border:1px solid rgba(255,255,255,.16);background:transparent;color:#DFE3E2;
  padding:16px 18px;font-family:var(--display);font-weight:500;font-size:.98rem;transition:.25s}
.opt:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03)}
.opt.sel{border-color:var(--accent);background:rgba(0,164,79,.1);color:var(--chalk)}
.opt__box{width:18px;height:18px;border:1px solid rgba(255,255,255,.35);flex:none;display:grid;place-items:center;transition:.25s}
.opt__box.round{border-radius:50%}
.opt.sel .opt__box{background:var(--accent);border-color:var(--accent)}
.opt__box svg{width:10px;height:10px;color:var(--ink);opacity:0;transition:opacity .2s}
.opt.sel .opt__box svg{opacity:1}
.opt__label{flex:1}
.opt__sub{display:block;font-family:var(--body);font-weight:300;font-size:.78rem;color:#8B9599;margin-top:3px}

/* text fields */
.assist__fields{display:flex;flex-direction:column;gap:22px}
.af{position:relative}
.af input,.af textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.2);
  padding:12px 0;color:var(--chalk);font-family:var(--body);font-size:1rem;transition:border-color .3s}
.af textarea{resize:vertical;min-height:78px}
.af input:focus,.af textarea:focus{outline:none;border-bottom-color:var(--accent)}
.af label{position:absolute;left:0;top:12px;font-family:var(--display);font-weight:500;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:#6C7477;pointer-events:none;transition:.25s}
.af input:focus+label,.af textarea:focus+label,
.af input:not(:placeholder-shown)+label,.af textarea:not(:placeholder-shown)+label{top:-11px;font-size:.56rem;color:var(--accent-lt)}
.af__unit{position:absolute;right:0;top:12px;font-family:var(--display);font-size:.72rem;color:#6C7477}
.af__err{color:var(--hazard);font-size:.72rem;margin-top:6px;display:none}
.af.bad input{border-bottom-color:var(--hazard)}
.af.bad .af__err{display:block}

/* footer buttons */
.assist__foot{flex:none;display:flex;gap:12px;padding:18px clamp(22px,4vw,42px) clamp(22px,4vw,30px);
  border-top:1px solid rgba(255,255,255,.1)}
.assist__back{padding:15px 22px;border:1px solid rgba(255,255,255,.2);color:#B9C0BF;
  font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:.25s}
.assist__back:hover{border-color:var(--chalk);color:var(--chalk)}
.assist__back[hidden]{display:none}
.assist__next{flex:1;background:var(--accent);color:var(--ink);padding:15px 24px;
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:.25s}
.assist__next:hover{filter:brightness(1.12)}
.assist__next:disabled{opacity:.3;cursor:not-allowed;filter:none}

/* summary + done */
.assist__done{text-align:center;padding-top:8px}
.assist__tick{width:56px;height:56px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 22px}
.assist__tick svg{width:24px;height:24px;color:var(--ink)}
.assist__person{display:flex;align-items:center;gap:18px;text-align:left;border:1px solid rgba(255,255,255,.14);
  padding:18px;margin:24px 0}
/* Lewis photo. Filename has a space in it, hence the %20 — see the JS below. */
.assist__avatar{width:88px;height:88px;border-radius:50%;flex:none;position:relative;overflow:hidden;
  background:#22292B;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,164,79,.5);
  opacity:0;transform:scale(.82);animation:popIn .55s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes popIn{to{opacity:1;transform:scale(1)}}
.assist__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.assist__avatar span{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--accent-lt)}
.assist__avatar img+span{display:none}              /* initials only show if the photo fails */
.assist__avatar.noimg img{display:none}
.assist__avatar.noimg img+span{display:block}
.assist__who{min-width:0}
.assist__who b{font-family:var(--display);font-weight:700;font-size:1.05rem;display:block;margin-bottom:3px}
.assist__who > span{display:block;font-size:.82rem;color:#8B9599;line-height:1.5}
.assist__who-c{display:flex!important;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.assist__who-c a{color:var(--accent-lt);white-space:nowrap}
.assist__who-c a:hover{text-decoration:underline}
.assist__sum{text-align:left;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;margin-top:4px}
.assist__sum h4{font-family:var(--display);font-weight:500;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:#6C7477;margin-bottom:14px}
.assist__sum dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.86rem}
.assist__sum dt{color:#6C7477}
.assist__sum dd{color:#DFE3E2}
.assist__again{margin-top:28px;padding:13px 26px;border:1px solid rgba(255,255,255,.2);color:#B9C0BF;
  font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;transition:.25s}
.assist__again:hover{border-color:var(--chalk);color:var(--chalk)}

@media(max-width:560px){
  .assist__panel{width:100%}
}

/* ============ MEGA MENU OVERLAY ============
   Desktop : narrow left rail (logo + close) | primary | secondary | image right.
             The image crossfades to match whichever section is hovered.
   Mobile  : full-screen drill-down. Level 1 = sections, level 2 = that
             section's links, with a back arrow. No image.
   ========================================================================= */
.mega{position:fixed;inset:0;z-index:120;visibility:hidden;transition:visibility 0s linear .6s}
.mega.open{visibility:visible;transition:visibility 0s}

.mega__panel{position:absolute;top:0;left:0;bottom:0;width:52%;background:#0A0C0D;z-index:2;
  display:grid;grid-template-columns:auto 1fr;
  transform:translateX(-100%);transition:transform .62s cubic-bezier(.16,1,.3,1)}
.mega.open .mega__panel{transform:none}

/* ---- left rail: logo, then close beneath it (Ferrari's arrangement) ---- */
/* Three deepening greys across the panel, as Ferrari does it — the columns
   are separated by tone, not by a rule. */
.mega__rail{padding:clamp(20px,2vw,30px) clamp(14px,1.4vw,22px) 0 clamp(20px,2.2vw,34px);
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;background:#070909}
.mega__logo img{height:44px;width:auto;display:block}
.mega__logo .wordmark{display:none;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:.2em;color:var(--chalk)}
.mega__logo.fallback img{display:none}
.mega__logo.fallback .wordmark{display:inline}
.mega__x{width:46px;height:46px;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:grid;place-items:center;color:var(--chalk);transition:.3s;background:none;cursor:pointer}
.mega__x svg{width:16px;height:16px}
.mega__x:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}

/* ---- body ---- */
.mega__body{position:relative;padding:clamp(48px,6vh,90px) 0 clamp(24px,3vh,40px) 0;
  display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:#0D1011}
/* Full-height column bands. The grid below is 1fr 1fr, so these two layers
   sit exactly under it and run the whole height of the panel, top to bottom,
   the way the Ferrari menu does. */
.mega__body::after{content:"";position:absolute;top:0;bottom:0;left:50%;right:0;
  background:#141819;z-index:0;pointer-events:none}
.mega__eyebrow,.mega__cols,.mega__foot{position:relative;z-index:1}
.mega__eyebrow{font-family:var(--display);font-weight:500;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:#6F7679;margin-bottom:clamp(22px,3vh,42px);display:block;
  padding-left:clamp(18px,2vw,34px)}

.mega__cols{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0}

/* primary — grey, active white, chevron right */
.mega__primary{list-style:none;display:flex;flex-direction:column;gap:clamp(6px,1vh,14px);
  padding:0 clamp(20px,2.4vw,42px) 0 clamp(18px,2vw,34px)}
.mega__primary a{display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.1;
  color:#7C8386;transition:color .3s;padding:5px 0}
.mega__primary a:hover{color:var(--chalk)}
.mega__primary li.on a{color:var(--chalk)}
.mega__primary .chev{width:7px;height:11px;flex:none;opacity:.55;transition:.3s}
.mega__primary li.on .chev,.mega__primary a:hover .chev{opacity:1;transform:translateX(3px)}

/* secondary — white, one level, no chevrons */
/* No divider rule here on purpose — the shade change does that job, and the
   band itself is painted full-height by .mega__body::after. */
.mega__secondary{list-style:none;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,18px);
  padding:0 clamp(20px,2.4vw,42px)}
.mega__secondary a{font-family:var(--display);font-weight:400;font-size:clamp(1rem,1.45vw,1.35rem);
  line-height:1.2;color:#C9CFD0;transition:color .25s,transform .25s;display:inline-block}
.mega__secondary a:hover{color:var(--accent-lt);transform:translateX(4px)}
.mega__secondary li{opacity:0;transform:translateY(8px);
  animation:megaIn .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes megaIn{to{opacity:1;transform:none}}

.mega__foot{margin-top:auto;padding:clamp(20px,3vh,36px) clamp(18px,2vw,34px) 0;display:flex;
  align-items:baseline;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08)}
.mega__foot a{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--accent-lt)}
.mega__foot-note{font-family:var(--display);font-weight:500;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:#6F7679}

/* ---- image, right ---- */
.mega__media{position:absolute;top:0;right:0;bottom:0;width:48%;overflow:hidden;background:#05080A}
.mega__img{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s ease,transform 7s ease}
.mega__img.show{opacity:1;transform:scale(1.05)}   /* JS toggles .show — keep in step */
.mega__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,18,19,.9),transparent 32%)}

/* mobile-only header hidden on desktop */
.mega__mhead{display:none}

/* ---- MOBILE: full-screen drill-down ----
   1000px, not 900: the old code hid the mega image below 1000 while the panel
   stayed 52% wide, so 901-1000px showed half an empty screen. One breakpoint. */
@media(max-width:1000px){
  .mega__media{display:none}
  /* Flex column, not grid. As a grid this needed grid-template-rows to be
     exactly right or align-content:stretch gave each row half the leftover
     height and a 72px header ballooned past 180px. A flex column cannot do
     that: the header is flex:none and takes its content height, full stop. */
  .mega__panel{width:100%;display:flex;flex-direction:column;
    transform:translateX(100%);background:#1A1A1A}
  .mega__mhead{flex:0 0 auto}
  .mega__body{flex:1 1 auto;min-height:0}
  .mega__rail{display:none}

  /* Header: logo centred, close in a ring on the right, hairline underneath —
     the Ferrari mobile menu. Back button takes the left slot once drilled in. */
  .mega__mhead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
    height:68px;padding:0 clamp(14px,4vw,18px);border-bottom:1px solid rgba(255,255,255,.14)}
  .mega__mlogo{justify-self:center}
  .mega__mlogo img{height:34px;width:auto;display:block}
  .mega__back{width:44px;height:44px;border:1px solid rgba(255,255,255,.32);border-radius:50%;
    display:grid;place-items:center;color:var(--chalk);background:none;visibility:hidden}
  .mega__back svg{width:9px;height:12px}
  .mega.drilled .mega__back{visibility:visible}
  .mega__x--m{justify-self:end;width:44px;height:44px;border:1px solid rgba(255,255,255,.32);
    border-radius:50%;display:grid;place-items:center;color:var(--chalk);background:none}
  .mega__x--m svg{width:14px;height:14px}

  /* One flat surface on mobile — the desktop banding would just look like a
     rendering fault at this width. */
  .mega__body{padding:64px 0 24px;overflow-y:auto;background:#1A1A1A}
  .mega__body::after{display:none}
  .mega__panel{background:#1A1A1A}
  .mega__primary,.mega__secondary{background:none;padding:0}
  .mega__eyebrow{display:none;padding-inline:clamp(20px,5.5vw,26px)}
  .mega.drilled .mega__eyebrow{display:block;margin-bottom:18px}

  .mega__cols{display:block}
  .mega__primary{gap:0}
  /* ~46px rows, matching the Ferrari rhythm — the list was at 70px. */
  .mega__primary a{font-size:1.35rem;font-weight:400;letter-spacing:0;color:#fff;
    padding:9px clamp(20px,5.5vw,24px);text-transform:none;line-height:1.3}
  .mega__primary a .chev{width:8px;height:12px;opacity:.75;margin-left:auto}
  .mega__primary a:hover,.mega__primary a.on{color:#fff;transform:none}
  .mega.drilled .mega__primary{display:none}

  .mega__secondary{display:none;border-left:0;padding-left:0;gap:0}
  .mega.drilled .mega__secondary{display:flex}
  .mega__secondary a{font-size:1.12rem;font-weight:400;color:#D7DBDB;
    padding:9px clamp(20px,5.5vw,24px);display:block;text-transform:none;line-height:1.3}
  .mega__secondary a:hover{transform:none;color:#fff}

  /* Ferrari's mobile menu carries no footer — the phone number is one tap
     away on the nav bar behind it. Keeping it here just crowded the list. */
  .mega__foot{display:none}
}

/* ============ hero slider ============ */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
/* Single video hero: the one slide is visible by default. It used to start at
   opacity:0 and rely on JS adding .active to fade it in — which meant a failed
   or cached-out site.js left the hero blank. The video must show without JS. */
.slide{position:absolute;inset:0;opacity:1;pointer-events:auto}
/* (kept for when a page opts back into the multi-slide carousel) */
.hero--carousel .slide{opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hero--carousel .slide.active{opacity:1;pointer-events:auto}
.slide.active{opacity:1;pointer-events:auto}
.slide__media{position:absolute;inset:0}
.slide__media video,.slide__media .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide__media .bg{background-size:cover;background-position:center}
.slide__media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 78%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 46%,rgba(0,0,0,.62) 100%)}
.slide__in{position:absolute;left:0;right:0;bottom:16%;z-index:2;padding-inline:var(--pad)}
/* slide 1 gets a deep, near-black studio vignette like the reference hero */
#s1 .slide__media::after{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.1) 32%,rgba(0,0,0,.88))}

.hero__dots{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:14px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--chalk);opacity:.65;transition:.3s;position:relative}
.dot.active{opacity:1;width:16px;height:16px;background:transparent;border:1.5px solid var(--accent)}

/* ============ ticker (from the brief) ============ */
.ticker{background:var(--ink);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.ticker__label{position:absolute;left:0;top:0;bottom:0;z-index:3;background:var(--accent);color:var(--ink);display:flex;align-items:center;gap:9px;padding:0 22px;
  font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.ticker__track{display:flex;width:max-content;animation:slide 62s linear infinite;padding-block:16px}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:12px;padding:0 32px;border-right:1px solid var(--line);white-space:nowrap;font-size:.86rem;color:#C6CCCB}
.tick b{font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.14em;color:var(--accent-lt);text-transform:uppercase}

/* ============ 2x2 tile grid — the core of the reference layout ============ */
.tiles{display:grid;grid-template-columns:1fr 1fr}
.tile{position:relative;overflow:hidden;min-height:min(52vw,620px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(48px,7vw,110px)}
.tile__bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.tile:hover .tile__bg{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.3) 100%)}
.tile .lockup{position:relative;z-index:2;padding-inline:24px}
/* tinted treatments so each tile reads distinctly without stock photography */
.t-teal   .tile__bg{filter:contrast(1.04) saturate(.95)}
.t-light  .tile__bg{filter:contrast(1.06) brightness(1.02)}
.t-light::after{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.05) 62%)}
.t-slate  .tile__bg{filter:contrast(1.08) brightness(.9)}
.t-green  .tile__bg{filter:contrast(1.08) brightness(.88)}

/* ============ stats ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stat{background:var(--ink);padding:clamp(40px,4.4vw,72px) 30px;text-align:center}
.stat b{font-family:var(--display);font-weight:700;font-size:clamp(3rem,5.6vw,5.4rem);line-height:.9;display:block}
.stat b sup{font-size:.32em;color:var(--accent);vertical-align:super;margin-left:3px}
.stat span{font-family:var(--display);font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-top:16px;display:block}

/* ============ generic centred section head ============ */
section{position:relative;padding-block:clamp(70px,8vw,130px)}
.head{text-align:center;max-width:760px;margin:0 auto clamp(44px,5vw,76px)}
.head .kicker{font-family:var(--display);font-weight:500;font-size:1rem;margin-bottom:14px}
.head h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;font-size:clamp(2rem,3.6vw,3.6rem);letter-spacing:.005em}
.head p{color:#B9C0BF;margin-top:20px;font-size:1rem}

/* ============ about ============ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,90px);align-items:center}
.two p{color:#C6CCCB}
.tl{list-style:none;margin-top:34px}
.tl li{position:relative;padding:0 0 30px 30px;border-left:1px solid var(--line)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-4.5px;top:6px;width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.tl h4{font-family:var(--display);font-weight:700;font-size:1.15rem;text-transform:uppercase;margin-bottom:6px;letter-spacing:.02em}
.tl time{font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.18em;color:var(--accent-lt);display:block;margin-bottom:7px;text-transform:uppercase}
.about__media{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;filter:contrast(1.04)}

/* ============ care cards ============ */
.care{background:#0E1315}
.care__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.care__card{background:#0E1315;padding:44px 30px;transition:background .45s;min-height:290px;text-align:center;display:flex;flex-direction:column;align-items:center}
.care__card:hover{background:var(--ink)}
.ico{width:34px;height:34px;margin-bottom:24px;color:var(--accent)}
.care__card h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem;margin-bottom:12px;letter-spacing:.03em}
.care__card p{font-size:.9rem;color:#B9C0BF}
.care__card ul{list-style:none;margin-top:16px}
.care__card li{font-family:var(--display);font-weight:500;font-size:.66rem;letter-spacing:.12em;color:var(--steel);padding:5px 0;text-transform:uppercase}

/* ============ case rail ============ */
.rail__top{display:flex;justify-content:center;position:relative;margin-bottom:40px}
.rail__nav{position:absolute;right:0;bottom:0;display:flex;gap:10px}
.rail__nav button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.3s}
.rail__nav button:hover{border-color:var(--accent);color:var(--accent)}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.rail::-webkit-scrollbar{display:none}
.case{flex:0 0 clamp(270px,30vw,430px);scroll-snap-align:start;position:relative;overflow:hidden;background:#0E1315}
.case__img{height:250px;background-size:cover;background-position:center;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s ease;filter:grayscale(.55) contrast(1.05)}
.case:hover .case__img{transform:scale(1.06);filter:grayscale(0) contrast(1.05)}
.case__body{padding:26px 26px 30px}
.case__tag{font-family:var(--display);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:12px;display:block}
.case h4{font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;margin-bottom:10px;line-height:1.05;letter-spacing:.02em}
.case p{font-size:.88rem;color:#B9C0BF}

/* ============ quote ============ */
.quote{background:#0E1315;border-block:1px solid var(--line)}
.quote__in{max-width:1000px;margin:0 auto;text-align:center}
.quote blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.5vw,2.2rem);line-height:1.25}
.quote cite{font-family:var(--display);font-style:normal;font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:block;margin-top:30px}

/* ============ accreditations ============ */
.accs{overflow:hidden;padding-block:38px;border-bottom:1px solid var(--line)}
.accs__track{display:flex;width:max-content;animation:slide 40s linear infinite}
.acc{padding:0 clamp(26px,3.6vw,58px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;justify-content:center;text-align:center}
.acc b{font-family:var(--display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.acc span{font-family:var(--display);font-weight:500;font-size:.58rem;letter-spacing:.16em;color:var(--steel);text-transform:uppercase}



/* ============ footer ============ */
footer{padding-block:clamp(56px,5vw,84px) 0;border-top:1px solid var(--line)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:46px}
.foot h5{font-family:var(--display);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:22px}
.foot ul{list-style:none}
.foot li{margin-bottom:11px}
.foot a{font-size:.9rem;color:var(--steel);transition:.25s}
.foot a:hover{color:var(--chalk)}
.foot address{font-style:normal;font-size:.9rem;color:var(--steel);line-height:1.9}
.foot__logo{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:.2em;margin-bottom:20px}
.foot__logo span{color:var(--accent)}
.foot__bar{margin-top:60px;border-top:1px solid var(--line);padding-block:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--display);font-weight:500;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* ============ responsive ============ */
@media(max-width:1100px){
  .care__grid{grid-template-columns:repeat(2,1fr)}
  .two,  .foot__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  :root{--nav-h-hero:110px}
  .menu{display:none}
  .nav__side--left{display:none}                 /* left cell empty on mobile */
  .nav__side--right{gap:0}
  .nav__right a:not(.nav__phone){display:none}
  .nav__phone{display:none}
  .burger{display:flex}
  .nav--hero .mark img{height:76px}              /* smaller 'big' logo on phones */
  .nav--hero .mark .wordmark{font-size:1.8rem}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:66vw}
  .stats{grid-template-columns:1fr}
  .care__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .ticker__label{display:none}
  .rail__nav{display:none}
    }
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .slide{transition:none}
}

/* ============================================================
   PLACEHOLDERS — every image/video slot is tagged.
   Search the HTML for  data-file="..."  to find them all.
   Delete the <figure class="ph"> and drop your real asset in.
   ============================================================ */
.ph{position:relative;display:grid;place-items:center;margin:0;
  background:repeating-linear-gradient(45deg,#161C1E 0 10px,#12181A 10px 20px);
  border:1px dashed rgba(255,255,255,.28);min-height:220px;overflow:hidden}
.ph::after{content:attr(data-ph);font-family:var(--display);font-weight:500;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:#7E878A;text-align:center;
  padding:14px 20px;line-height:1.9;max-width:90%}
.ph::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.06)}
.ph--band{min-height:min(46vw,520px)}
.ph--hero{position:absolute;inset:0;min-height:0;border:0}
.ph--card{aspect-ratio:4/3;min-height:0;border-left:0;border-right:0;border-top:0}
.ph--portrait{aspect-ratio:4/5;min-height:0;margin-bottom:16px}
.ph--fleet{aspect-ratio:16/10;min-height:0}
.ph--inline{aspect-ratio:3/2;min-height:0;margin-top:24px}
.ph--map{min-height:340px}
/* light pages need the inverse treatment */
.dsr:not(.dsr--dark) .ph{background:repeating-linear-gradient(45deg,#E4E6E6 0 10px,#DCDFDF 10px 20px);
  border-color:rgba(11,15,16,.25)}
.dsr:not(.dsr--dark) .ph::after{color:#8A9295}
.dsr:not(.dsr--dark) .ph::before{border-color:rgba(11,15,16,.06)}

/* nav: current page */
.menu>li.on>a{color:var(--accent-lt)}

/* The mega is reachable at every size now that nav links go to real pages. */
.burger{display:none !important}
.nav__right{gap:18px}

/* ============================================================
   "COPY NEEDED" MARKER
   Deliberately loud. This should be impossible to publish without
   noticing — that's the whole point of it.
   ============================================================ */
.need{border:1px dashed var(--hazard);background:rgba(214,64,44,.07);padding:clamp(22px,2.6vw,32px);
  margin-top:28px;max-width:74ch}
.need__tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--hazard);border:1px solid var(--hazard);
  padding:5px 10px;margin-bottom:14px}
.need h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem;
  margin-bottom:10px;color:var(--chalk)}
.need p{font-size:.9rem;line-height:1.7;color:#B9C0BF}
.dsr:not(.dsr--dark) .need h3{color:var(--ink)}
.dsr:not(.dsr--dark) .need p{color:#5C6467}

/* ============================================================
   CLIENT LOGO WALL — "we take care of these"
   ============================================================ */
/* White ground on purpose: the supplied marks are dark, and this mirrors the
   way Ferrari lays out its partner wall. The one light band on the site. */
.clients{padding-block:clamp(56px,8vh,110px);background:#fff}
.clients__head{text-align:center;margin-bottom:clamp(34px,5vh,64px)}
.clients h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.05;
  font-size:clamp(1.5rem,3vw,2.6rem);color:#0A0C0D}
.clients__sub{font-family:var(--display);font-weight:500;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:#6F7679;margin-top:14px}
.cl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(22px,3vw,54px);
  align-items:center;justify-items:center}
.cl-logo{width:100%;display:grid;place-items:center;min-height:clamp(52px,6vw,84px)}
/* Full colour, as supplied. */
.cl-logo img{max-width:100%;max-height:clamp(38px,4.4vw,62px);width:auto;height:auto;
  object-fit:contain;display:block}
.clients .need{margin-top:clamp(30px,4vh,50px)}
@media(max-width:900px){ .cl-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .cl-grid{grid-template-columns:repeat(2,1fr)} }

/* Anchored sections (from the menu sub-links) must clear the fixed nav when
   you land on them, or the heading hides behind it. */
[id="our-story"],[id="our-team"],[id="health-safety"],[id="community"],[id="sustainability"],[id="sponsorship"],
.fl-card[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
html{scroll-behavior:smooth}

/* agency credit mark in the footer bar */
.foot__by{display:inline-flex;align-items:center;opacity:.75;transition:opacity .3s ease}
.foot__by:hover{opacity:1}
.foot__by img{height:20px;width:auto;display:block}