/* ============================================================================
   Printforce — styles
   Hero slide photos live in assets/img/hero/ (slide-1.jpg … slide-4.jpg).
   Each slide layers the photo OVER a themed gradient, so if a photo is missing
   the slide still looks intentional. A readability overlay keeps text legible.
   NOTE: url() paths here are relative to THIS file (assets/css/), hence ../img/…
============================================================================ */

:root{
  --coral:#f1594a;
  --coral-light:#f4715f;
  --coral-dark:#d8463a;
  --brick:#bf4133;
  --btn-red:#bd3b30;
  --white:#ffffff;
  --bar:64px;            /* width of the fixed right sidebar */
  --ease:cubic-bezier(.76,0,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Ubuntu',sans-serif;
  color:#fff;
  overflow:hidden;
  background:#111;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------------- HERO */
.hero{position:fixed;top:0;left:0;right:var(--bar);height:100vh;height:100dvh;overflow:hidden}

.slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.slide.active{opacity:1;visibility:visible}

.slide-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* readability overlay — darkens the lower-left where the text sits */
.slide-bg::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 72%),
    linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%);
}
/* subtle grain on top */
.slide-bg::after{
  content:"";position:absolute;inset:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* per-slide background: photo first, themed gradient as graceful fallback */
.s1 .slide-bg{background-image:url("../img/hero/slide-1.jpg"),radial-gradient(120% 90% at 80% 10%,#3a3a3d 0%,#1c1c1e 45%,#0a0a0b 100%);}
.s2 .slide-bg{background-image:url("../img/hero/slide-2.jpg"),radial-gradient(140% 120% at 20% 0%,#9fc6cf 0%,#5e8e6f 38%,#34603f 70%,#1f3d29 100%);}
.s3 .slide-bg{background-image:url("../img/hero/slide-3.jpg"),radial-gradient(130% 110% at 85% 15%,#f0a060 0%,#c85b3a 45%,#7d2f24 100%);}
.s4 .slide-bg{background-image:url("../img/hero/slide-4.jpg"),radial-gradient(130% 110% at 15% 90%,#7d8aa0 0%,#46506a 45%,#222838 100%);}

.slide-content{
  position:absolute;left:clamp(28px,5.5vw,110px);bottom:clamp(70px,16vh,150px);
  max-width:42%;z-index:1;
}
.eyebrow{
  font-weight:400;font-size:clamp(2.4rem,6vw,5.1rem);line-height:1.02;
  color:#fff;letter-spacing:-.5px;
}
.headline{
  font-weight:400;font-size:clamp(2.4rem,6vw,5.1rem);line-height:1.02;
  color:var(--coral);letter-spacing:-.5px;margin-bottom:clamp(22px,3.5vh,40px);
}
.cta{
  display:inline-block;padding:.62em 1.7em;border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;font-weight:400;font-size:clamp(.95rem,1.5vw,1.2rem);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.cta:hover{background:#fff;color:#1a1a1a}

/* staggered entrance for active slide */
.slide.active .eyebrow{animation:rise .7s var(--ease) both .12s}
.slide.active .headline{animation:rise .7s var(--ease) both .22s}
.slide.active .cta{animation:rise .7s var(--ease) both .34s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.logo{
  position:absolute;top:clamp(24px,3.5vh,46px);left:clamp(28px,5.5vw,56px);
  display:flex;align-items:center;gap:12px;z-index:20;
}
.logo img{height:clamp(26px,3.4vh,34px);width:auto;display:block}

.indicators{
  position:absolute;left:clamp(28px,5.5vw,110px);bottom:clamp(34px,7vh,72px);
  display:flex;gap:18px;z-index:15;
}
.indicators button{position:relative;height:40px;width:46px;background:none;padding:0;transition:width .4s var(--ease)}
.indicators button::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:3px;background:rgba(255,255,255,.85);transition:background .4s}
.indicators button.on{width:54px}
.indicators button.on::before{background:var(--coral)}

/* ------------------------------------------------------------- SIDEBAR */
/* red bar — sits ON TOP of the login panel and masks it, except at the GO! square
   (it starts at y=80 so the top GO! square stays open for the panel to show through) */
.bar{position:fixed;top:80px;right:0;width:var(--bar);height:calc(100vh - 80px);height:calc(100dvh - 80px);background:var(--coral-dark);z-index:50}
/* buttons float on the very top so they stay visible & clickable in every state */
.sidebar{position:fixed;top:0;right:0;width:var(--bar);height:100vh;height:100dvh;z-index:80}
.go-btn{
  position:absolute;top:clamp(14px,2.2vh,26px);left:50%;transform:translateX(-50%);
  width:42px;height:42px;border:1.5px solid rgba(255,255,255,.92);border-radius:9px;
  color:#fff;font-weight:700;font-size:.92rem;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;background:transparent;
  transition:background .3s,color .3s,border-color .3s;
}
.go-btn:hover{background:#fff;color:var(--coral)}
/* big clickable MENU target — full bar width, tall zone below the GO! square */
.menu-tab{
  position:absolute;top:80px;bottom:0;left:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;cursor:pointer;
}
.menu-tab span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-weight:600;font-size:1.05rem;letter-spacing:3px;color:#fff;
  padding:30px 14px;transition:letter-spacing .25s var(--ease),opacity .2s;
}
.menu-tab:hover span{letter-spacing:5px;opacity:.85}

/* --------------------------------------------------------- LOGIN PANEL */
/* One solid panel slides right-to-left. The red bar sits ON TOP and masks it,
   so it's only visible through the GO! square until its left edge clears the
   bar — then it reveals itself as it keeps moving left. Single transform. */
.login{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(540px,86vw);
  background:var(--coral);z-index:42;
  padding:clamp(34px,7vh,70px) calc(var(--bar) + 34px) 40px clamp(34px,5vw,58px);
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
  transform:translateX(100%);
  transition:transform .6s var(--ease);
}
.login.open{pointer-events:auto;transform:translateX(0)}
/* dark-red base behind the GO! square, so the square reads red when the panel is away */
.go-base{
  position:fixed;top:0;right:0;width:var(--bar);height:80px;
  background:var(--coral-dark);z-index:40;
}
.login h2{font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin-bottom:1.4em}
.login input{
  width:100%;border:none;border-radius:999px;background:#fff;color:#444;
  padding:1.05em 1.5em;font-family:inherit;font-size:1.05rem;margin-bottom:18px;outline:none;
}
.login input::placeholder{color:var(--coral)}
.login .submit{
  background:var(--btn-red);color:#fff;border-radius:999px;
  padding:1.05em 1.5em;font-size:1.1rem;font-weight:500;width:auto;min-width:160px;margin-top:6px;
  transition:filter .3s;
}
.login .submit:hover{filter:brightness(1.12)}
.login .links{margin-top:2.4em;display:flex;flex-direction:column;gap:1em}
.login .links a{font-weight:600;font-size:1.05rem;opacity:.95}
.login .links a:hover{opacity:.75}

/* ---------------------------------------------------------- MENU OVERLAY */
.menu{
  position:fixed;top:0;left:0;right:var(--bar);height:100vh;height:100dvh;background:#fff;z-index:40;
  transform:translateX(100%);transition:transform .6s var(--ease);
  display:flex;align-items:center;
}
.menu.open{transform:translateX(0)}

/* level 1 — big brick words, right-aligned, shifting left as tiers open */
.nav1{
  flex:1;display:flex;flex-direction:column;gap:clamp(2px,.6vh,8px);
  text-align:right;
  padding-right:clamp(28px,5.5vw,110px);
  transition:padding-right .55s var(--ease);z-index:2;
}
.nav1 button{
  text-align:right;color:var(--brick);font-weight:500;
  font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.18;letter-spacing:-.5px;
  opacity:.9;transition:opacity .25s,color .25s,transform .3s var(--ease);white-space:nowrap;
}
.nav1 button:hover{opacity:1;color:var(--coral);transform:translateX(-10px)}
.nav1 button.active{color:var(--coral-light)}
.menu.l2 .nav1{padding-right:calc(40% + clamp(36px,4vw,80px))}
.menu.l3 .nav1{padding-right:calc(58% + clamp(36px,4vw,80px))}

/* the coral deep panel (levels 2 & 3) — z-index above .nav1 so its links are clickable */
.deep{
  position:absolute;top:0;right:0;height:100%;z-index:3;
  background:var(--coral);
  width:0;overflow:hidden;
  transition:width .55s var(--ease);
  display:flex;align-items:center;
}
.menu.l2 .deep{width:40%}
.menu.l3 .deep{width:58%}
@media(max-width:880px){
  .menu.l2 .deep{width:54%}
  .menu.l3 .deep{width:72%}
  .menu.l2 .nav1{padding-right:calc(54% + 24px)}
  .menu.l3 .nav1{padding-right:calc(72% + 24px)}
}

.deep .cols{
  display:flex;gap:clamp(40px,7vw,120px);
  padding-left:clamp(40px,6vw,90px);width:100%;
  min-width:max-content;
}
.col{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px);min-width:230px}
.col button{
  position:relative;text-align:left;color:rgba(255,255,255,.92);font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.15;white-space:nowrap;
  transition:color .2s,padding-left .25s var(--ease);
}
.col button::before{
  content:"\203A";position:absolute;left:4px;top:50%;color:#fff;
  opacity:0;transform:translate(-6px,-50%);
  transition:opacity .2s,transform .25s var(--ease);
}
.col button:hover,.col button.active{color:#fff;padding-left:24px}
.col button:hover::before,.col button.active::before{opacity:.7;transform:translate(0,-50%)}
.col3{opacity:0;transform:translateX(20px);transition:opacity .4s .12s,transform .45s .12s var(--ease)}
.menu.l3 .col3{opacity:1;transform:none}

/* ================================ ACCOUNT PANEL VIEWS ================================ */
.login{overflow-y:auto}
.acct-view[hidden]{display:none}
.acct-x{
  position:absolute;top:16px;right:calc(var(--bar) + 14px);
  width:40px;height:40px;border-radius:50%;font-size:1.7rem;line-height:1;
  color:#fff;opacity:.85;display:flex;align-items:center;justify-content:center;
}
.acct-x:hover{opacity:1}
.acct-back{color:#fff;font-weight:500;font-size:1rem;opacity:.9;margin-bottom:1.3em;align-self:flex-start}
.acct-back:hover{opacity:1}

/* onboarding */
.ob-progress{display:flex;gap:8px;margin-bottom:1.6em}
.ob-dot{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.4);transition:background .3s}
.ob-dot.on{background:#fff}
.ob-step[hidden]{display:none}
.ob-done{font-size:1.1rem;line-height:1.55;opacity:.95;margin-top:.3em}
.ob-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:.3em}
.chip{
  border:1.5px solid rgba(255,255,255,.7);border-radius:999px;
  padding:.55em 1.1em;color:#fff;font-size:1rem;transition:background .2s,color .2s;
}
.chip.on{background:#fff;color:var(--coral)}
.ob-nav{display:flex;gap:14px;align-items:center;margin-top:1.8em}
.ob-back{color:#fff;opacity:.85;font-size:1rem;padding:.6em 0}
.ob-back:hover{opacity:1}
.ob-next{margin-top:0}

/* ================================ PRODUCT / CONTENT PAGE ================================ */
.page{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:30;background:#fff;color:#222;overflow-y:auto}
.page[hidden]{display:none}
.page-bar{position:sticky;top:0;background:#fff;padding:14px 22px;z-index:2}
.page-logo{display:inline-flex;align-items:center}
.page-logo img{height:26px;width:auto;display:block}
.page-hero{
  position:relative;height:clamp(220px,38vh,420px);
  background:radial-gradient(120% 120% at 75% 15%,var(--coral-light),var(--coral) 45%,var(--coral-dark));
  display:flex;align-items:flex-end;padding:clamp(20px,4vw,48px);
}
.page-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:rgba(255,255,255,.92);font-size:.95rem;letter-spacing:.4px}
.crumb-link{color:rgba(255,255,255,.85);font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.crumb-link:hover{color:#fff}
.crumb-cur{color:#fff;font-weight:500}
.crumb-sep{opacity:.55}
.page-body{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(22px,5vw,40px) 80px}
.page-title{color:var(--brick);font-weight:500;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;margin-bottom:.5em}
.page-lead{font-size:1.2rem;line-height:1.6;color:#444;margin-bottom:1.6em}
.page-feats{list-style:none;display:grid;gap:12px;margin-bottom:2em}
.page-feats li{position:relative;padding-left:28px;font-size:1.05rem;color:#333}
.page-feats li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:3px;background:var(--coral)}
.page-specs{margin-bottom:2.2em}
.page-specs h3{color:var(--brick);font-weight:500;font-size:1.2rem;margin-bottom:.6em}
.page-specs .spec{display:flex;justify-content:space-between;padding:.7em 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:1.02rem}
.page-specs .spec span:first-child{color:#777}
.page-cta{color:#fff;background:var(--coral);border-color:var(--coral)}
.page-cta:hover{background:var(--coral-dark);color:#fff;border-color:var(--coral-dark)}

/* ================================ MOBILE CHROME (hidden on desktop) ================================ */
.topbar{display:none}
.mnav{display:none}

/* ================================ MOBILE LAYOUT ================================ */
@media(max-width:720px){
  :root{--bar:54px}

  /* desktop chrome off */
  .bar,.sidebar,.go-base,.menu,.logo{display:none}

  /* top bar */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:0;left:0;right:0;height:60px;z-index:70;
    background:#fff;padding:0 14px;border-bottom:1px solid rgba(0,0,0,.07);
  }
  .topbar-logo{display:flex;align-items:center}
  .topbar-logo img{height:24px;width:auto;display:block}
  .topbar-actions{display:flex;align-items:center;gap:4px}
  .tb-account{width:44px;height:44px;color:var(--coral-dark);display:flex;align-items:center;justify-content:center}
  .tb-account svg{width:24px;height:24px}
  .tb-burger{width:46px;height:46px;display:flex;align-items:center;justify-content:center}
  .tb-burger span{position:relative;width:24px;height:2.6px;background:var(--brick);border-radius:2px;transition:background .25s}
  .tb-burger span::before,.tb-burger span::after{content:"";position:absolute;left:0;width:24px;height:2.6px;background:var(--brick);border-radius:2px;transition:transform .25s,top .25s}
  .tb-burger span::before{top:-8px}
  .tb-burger span::after{top:8px}
  .tb-burger.on span{background:transparent}
  .tb-burger.on span::before{top:0;transform:rotate(45deg)}
  .tb-burger.on span::after{top:0;transform:rotate(-45deg)}

  /* hero full width below the bar; bigger text box */
  .hero{top:60px;left:0;right:0;height:calc(100vh - 60px);height:calc(100dvh - 60px)}
  .slide-content{max-width:84%;left:24px;bottom:clamp(64px,14vh,120px)}
  .eyebrow,.headline{font-size:clamp(1.5rem,6.8vw,2.7rem)}

  /* simple accordion menu */
  .mnav{
    display:flex;flex-direction:column;
    position:fixed;top:60px;left:0;right:0;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:65;
    background:#fff;overflow-y:auto;padding-bottom:30px;
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  .mnav.open{transform:translateX(0)}
  .mnav-l1{
    width:100%;text-align:left;color:var(--brick);font-weight:600;font-size:1.45rem;
    padding:18px 22px;border-bottom:1px solid rgba(0,0,0,.08);
    display:flex;justify-content:space-between;align-items:center;
  }
  .mnav-l1::after{content:"+";font-weight:400;opacity:.45;transition:opacity .2s}
  .mnav-l1.open::after{content:"\2013";opacity:.7}
  .mnav-sub{display:none;background:#faf1ef}
  .mnav-sub.open{display:block}
  .mnav-l2{
    width:100%;text-align:left;color:var(--brick);font-weight:500;font-size:1.12rem;
    padding:14px 22px 14px 34px;border-bottom:1px solid rgba(0,0,0,.05);
    display:flex;justify-content:space-between;align-items:center;
  }
  .mnav-l2.has::after{content:"+";opacity:.45}
  .mnav-l2.has.open::after{content:"\2013";opacity:.7}
  .mnav-sub2{display:none;background:#f6e7e4}
  .mnav-sub2.open{display:block}
  .mnav-l3{
    width:100%;text-align:left;color:#864a40;font-size:1.04rem;
    padding:12px 22px 12px 46px;border-bottom:1px solid rgba(0,0,0,.04);
  }
  .mnav-l1:active,.mnav-l2:active,.mnav-l3:active{background:rgba(0,0,0,.05)}
  .mnav-account{
    margin:22px;padding:1em;border-radius:999px;background:var(--coral);
    color:#fff;font-size:1.1rem;font-weight:500;
  }

  /* account panel: full width, no bar masking on mobile */
  .login{
    width:100%;z-index:75;
    padding:74px clamp(26px,7vw,46px) 40px;
    justify-content:flex-start;
  }
  .acct-x{right:18px;top:14px}

  /* product page sits below the persistent top bar so nav stays reachable */
  .page{top:60px;height:calc(100vh - 60px);height:calc(100dvh - 60px)}
  .page-bar{display:none}   /* top bar's logo is the home control on mobile */
}