/* ===================== HOME — scorrimento orizzontale ===================== */
html,body{height:100%;overflow:hidden;}
:root{--footh:72px;}

/* ---- horizontal track ---- */
.htrack{
  display:flex;height:calc(100vh - var(--footh));width:100vw;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.htrack::-webkit-scrollbar{display:none;}
.panel{
  flex:0 0 100vw;width:100vw;height:100%;
  scroll-snap-align:start;position:relative;overflow:hidden;
}

/* ---- fixed chrome ---- */
.home-header{position:fixed;top:0;left:0;right:0;z-index:60;}
.home-header .wrap{display:flex;align-items:center;justify-content:space-between;height:118px;max-width:none;padding:0 56px 0 90px;}
.home-header .logo{height:46px;width:auto;}
.home-header .header-right{display:flex;align-items:center;gap:30px;}
.home-header .hamburger span{background:#fff;}

/* keep the full-viewport layout intact under the WP admin bar */
.admin-bar .home-header{top:32px;}
.admin-bar .htrack{height:calc(100vh - var(--footh) - 32px);}
@media screen and (max-width:782px){
  .admin-bar .home-header{top:46px;}
  .admin-bar .htrack{height:calc(100vh - var(--footh) - 46px);}
}

/* left vertical rail */
.rail{
  position:fixed;left:0;top:0;bottom:var(--footh);width:64px;z-index:55;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.4vh,32px);
  padding:64px 0 36px;align-items:center;overflow-y:auto;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.rail a{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--text);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap;transition:color .25s ease;
}
.rail a:hover{color:#fff;}
.rail a.active{color:var(--red);}

/* minimal footer — full-width band at the very bottom */
.mini-footer{
  position:fixed;left:0;right:0;bottom:0;height:var(--footh);z-index:57;
  background:#f1f1f1;border-top:1px solid rgba(0,0,0,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:var(--text);font-size:11.5px;line-height:1.35;letter-spacing:.015em;
  color:#000;padding:0 24px;
}
.mini-footer .legal{margin-top:1px;}
.mini-footer .sep{opacity:.35;margin:0 8px;}
.mini-footer a{color:#000;transition:color .2s ease;}
.mini-footer a:hover{color:var(--red);}

/* persistent next arrow */
.next-arrow{
  position:fixed;right:64px;bottom:calc(var(--footh) + 28px);z-index:58;
  width:62px;height:62px;border-radius:50%;background:var(--red);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .25s ease,opacity .35s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.next-arrow svg{width:26px;height:26px;transition:transform .32s cubic-bezier(.4,0,.2,1);}
.next-arrow:hover{transform:translateX(5px);background:#ff2730;}
.next-arrow[hidden]{opacity:0;pointer-events:none;}
/* "there is more copy below": the same button becomes a scroll control. The
   arrow turns down and nudges every few seconds, because a panel that scrolls
   gives no other hint that it does. */
.next-arrow.is-down svg{transform:rotate(90deg);animation:arrow-nudge 2.6s ease-in-out .32s infinite;}
.next-arrow.is-down:hover{transform:translateY(5px);}
@keyframes arrow-nudge{
  0%,70%,100%{transform:rotate(90deg) translateX(0);}
  85%{transform:rotate(90deg) translateX(5px);}   /* rotated frame: moves down */
}
@media (prefers-reduced-motion:reduce){
  .next-arrow.is-down svg{animation:none;}
}

/* ===================== PANEL 0 — HERO ===================== */
.p-hero{
  background-image:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.30) 100%),url('../img/home-hero.jpg');
  background-size:cover;background-position:center;
}
.hero-inner{position:absolute;inset:0;padding:0 90px 0 110px;display:flex;flex-direction:column;justify-content:center;}
.hero-h1{
  font-family:var(--head);font-weight:800;color:#fff;
  font-size:60px;line-height:1.08;letter-spacing:-.01em;max-width:920px;text-wrap:balance;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
}
.hero-nav{
  position:absolute;left:110px;right:90px;bottom:52px;
  display:flex;align-items:center;gap:46px;flex-wrap:wrap;
}
.hero-nav a{display:inline-flex;align-items:center;gap:16px;
  font-family:var(--text);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#fff;}
.hero-nav a::before{content:"";width:13px;height:13px;background:var(--red);flex:none;}
.hero-nav a:hover{color:var(--red);}

/* ===================== PANELS 1-4 — SPLIT ===================== */
.p-split{display:grid;grid-template-columns:53% 47%;}
.p-split .side{
  background:#000;display:flex;flex-direction:column;justify-content:center;
  padding:118px 70px 80px 110px;
}
.p-split .side .inner{max-width:540px;}
.split-h2{
  font-family:var(--head);font-weight:800;color:#fff;
  font-size:40px;line-height:1.1;letter-spacing:-.01em;margin-bottom:38px;text-wrap:balance;
}
.split-body p{color:var(--body);font-size:15.5px;line-height:1.6;margin-bottom:18px;max-width:480px;}
.split-body p:last-child{margin-bottom:0;}
.split-body .hl{color:var(--red);}

/* Human Coated home panel — denser type for the longer copy */
.hc-home .side{padding-top:120px;padding-bottom:60px;justify-content:flex-start;overflow-y:auto;scrollbar-width:none;}
/* the header is fixed and transparent: fade the scrolling copy out beneath it
   instead of letting it run into the logo */
.hc-home .side{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 110px);mask-image:linear-gradient(to bottom,transparent 0,#000 110px);}
.hc-home .side::-webkit-scrollbar{display:none;}
.hc-home .side .inner{max-width:580px;}
.hc-home .split-h2{font-size:34px;margin-bottom:26px;}
.hc-home .split-body p{font-size:14.5px;line-height:1.62;margin-bottom:13px;max-width:520px;}
.hc-home .split-body p.lead{color:var(--body);font-weight:400;}
.hc-home .hl-arrow{margin-top:32px;}

/* inline arrow link */
.hl-arrow{display:inline-flex;align-items:center;gap:24px;margin-top:46px;cursor:pointer;}
.hl-arrow .lbl{font-family:var(--text);font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:#fff;}
.hl-arrow .circle{width:56px;height:56px;flex:none;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;}
.hl-arrow .circle svg{width:23px;height:23px;}
.hl-arrow:hover .circle{transform:translateX(6px);background:#ff2730;}

/* right media */
.p-split .media{position:relative;overflow:hidden;}
.p-split .media.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}
.p-split .media .illu{position:absolute;inset:0;width:100%;height:100%;}
.p-split .media .illu svg{width:100%;height:100%;display:block;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .hero-h1{font-size:46px;}
  .split-h2{font-size:32px;}
}
@media (max-width:820px){
  .home-header .wrap{padding:0 22px 0 64px;height:88px;}
  .home-header .logo{height:38px;}
  .home-header .header-right .btn-pill{padding:11px 22px;font-size:15px;}
  .rail{width:50px;gap:clamp(12px,2vh,22px);padding:80px 0 30px;}
  .rail a{font-size:10px;padding:0 17px;}  /* fills the 50px rail: easier to tap */
  .next-arrow{right:24px;bottom:calc(var(--footh) + 18px);width:54px;height:54px;}
  .mini-footer{font-size:9.5px;line-height:1.55;padding:0 14px;}
  .mini-footer .sep{margin:0 5px;}
  /* Each panel becomes its own vertical scroller. With overflow:hidden and a
     height locked to 100vh − footer, the longer copy (Human Coated above all)
     was simply cut off behind the fixed footer with no way to reach it. */
  .panel{overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;-ms-overflow-style:none;}
  .panel::-webkit-scrollbar{display:none;}
  /* same fade, but on the panel: it is the scroll container here */
  .p-split{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 94px);mask-image:linear-gradient(to bottom,transparent 0,#000 94px);}
  .hc-home .side{-webkit-mask-image:none;mask-image:none;}

  .hero-inner{padding:0 26px 170px 70px;}
  .hero-h1{font-size:32px;}
  /* A wrapping flex row starts each line's second item right after the first,
     and those differ in width: the red squares stop forming a column. A grid
     pins them to a fixed x. */
  .hero-nav{left:70px;right:26px;bottom:64px;display:grid;grid-template-columns:auto auto;justify-content:start;gap:16px 22px;}
  .hero-nav a{font-size:12px;gap:13px;}  /* tighter square-to-text gap buys room for two columns */
  .p-split{grid-template-columns:1fr;}
  /* bottom padding clears both the footer band and the floating next arrow */
  .p-split .side{padding:104px 26px 92px 70px;justify-content:flex-start;}
  /* the panel scrolls now: a second scroller inside it would trap the copy */
  .hc-home .side{padding-top:104px;padding-bottom:92px;overflow:visible;}
  .p-split .media{display:none;}
  .split-h2{font-size:28px;margin-bottom:24px;}
}

@media (max-width:374px){
  /* measured: with the tighter gaps the two columns need 275px, i.e. they fit
     from 375px up. Below that they would overflow, so one entry per row. */
  .hero-nav{grid-template-columns:auto;}
  .hero-inner{padding-bottom:236px;}
}