:root{--paper:#f3f1eb;--ink:#171725;--cobalt:#2854e8;--coral:#ff6b57;--lemon:#f0de4d;--lilac:#b8a4ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}main{min-height:100vh;overflow:hidden}nav{height:98px;margin:0 4.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #c9c6bd}.brand{display:flex;align-items:center;width:180px;text-decoration:none}.brand img{display:block;width:100%;height:auto}.nav-centre{display:flex;gap:34px;color:#5e5c65;font-size:13px}.nav-actions{justify-self:end;display:flex;align-items:center}.status{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}.status i{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,87,.14)}.login-button{display:flex;align-items:center;gap:16px;padding:12px 16px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);text-decoration:none;font-size:13px;font-weight:700;box-shadow:3px 3px 0 var(--lilac);transition:transform .16s ease,box-shadow .16s ease}.login-button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--lilac)}.login-button:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}.login-button span{font-size:17px;line-height:1}
.hero{min-height:690px;padding:80px 7vw 72px;display:grid;grid-template-columns:.82fr 1.18fr;gap:7vw;align-items:center}.kicker{display:flex;align-items:center;gap:13px;margin:0 0 27px;text-transform:uppercase;letter-spacing:1.8px;font-size:11px;font-weight:600}.kicker span{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--ink);border-radius:50%;letter-spacing:0}.intro h1{margin:0;font-size:clamp(68px,7.2vw,122px);line-height:.82;letter-spacing:-.073em;font-weight:600}.intro h1 em{font-family:"DM Serif Display",serif;font-weight:400;color:var(--cobalt);letter-spacing:-.045em}.summary{max-width:620px;margin:42px 0 0;font-size:clamp(18px,1.35vw,22px);line-height:1.55;color:#5a5862}.launch{margin-top:35px;display:flex;align-items:center;gap:15px;font-size:13px}.launch span{padding:12px 17px;border:1px solid var(--ink);border-radius:2px;font-weight:600;background:#fff}.launch small{color:#6f6c73}
.board{position:relative;min-height:500px;padding:30px;background:#fff;border:2px solid var(--ink);box-shadow:13px 13px 0 var(--lilac);transform:rotate(1.2deg)}.board-head,.board-foot{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:1.3px}.schedule{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:67px 132px 132px;gap:8px;margin:25px 0 19px}.day{display:flex;justify-content:space-between;align-items:center;padding:13px;border-top:1px solid var(--ink);font-size:10px}.day small{font-size:18px}.day.active{background:var(--ink);color:#fff;border:0}.shift{grid-column:var(--start)/span var(--span);grid-row:var(--row);display:flex;gap:15px;padding:17px;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:12px}.shift b{font-size:10px}.shift span{font-weight:700}.shift small{font-weight:400;font-size:10px}.cobalt{background:var(--cobalt);color:#fff}.coral{background:var(--coral)}.lemon{background:var(--lemon)}.open-shift{grid-column:var(--start)/span var(--span);grid-row:var(--row);display:flex;flex-direction:column;justify-content:space-between;padding:13px;border:2px dashed var(--coral);color:#c94534}.open-shift span{font-size:25px}.open-shift small{font-size:10px;font-weight:700;text-transform:uppercase}.board-foot{justify-content:flex-start;gap:22px;letter-spacing:0}.board-foot span{display:flex;align-items:center;gap:7px}.board-foot b{margin-left:auto;font-size:28px}.dot{width:8px;height:8px;border-radius:50%}.dot.blue{background:var(--cobalt)}.dot.red{background:var(--coral)}.note{position:absolute;padding:13px 15px;border:1.5px solid var(--ink);font-size:9px;line-height:1.35;font-weight:700;box-shadow:3px 3px 0 var(--ink)}.note-one{right:-34px;top:-34px;background:var(--lemon);transform:rotate(5deg)}.note-one span{float:right;font-size:18px;margin-left:14px}.note-two{left:-40px;bottom:-35px;background:var(--coral);transform:rotate(-7deg);font-family:"DM Serif Display",serif;font-size:17px;font-weight:400;line-height:1}
.ticker{overflow:hidden;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--cobalt);color:white;transform:rotate(-1deg);width:102%;margin-left:-1%}.ticker div{min-width:max-content;padding:17px 0;display:flex;align-items:center;gap:27px;font-family:"DM Serif Display",serif;font-size:25px}.ticker i{color:var(--lemon);font-style:normal;font-size:18px}
.promise{padding:115px 8vw 100px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:5vw;align-items:end}.promise>p{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px}.promise h2{margin:0;font-size:clamp(48px,5vw,83px);line-height:.95;letter-spacing:-.055em}.promise h2 em{font-family:"DM Serif Display",serif;font-weight:400;color:var(--coral)}.promise-side{border-top:1px solid var(--ink);padding-top:14px}.promise-side span{font-size:10px;font-weight:700;letter-spacing:1.5px}.promise-side p{font-size:13px;line-height:1.5;color:#65626b}.site-footer{margin:0 4.5vw;padding:56px 0 30px;border-top:1px solid #c9c6bd;color:#5f5c66}.footer-main{display:grid;grid-template-columns:minmax(230px,1.5fr) minmax(150px,.65fr) minmax(180px,.65fr);gap:7vw;padding-bottom:56px}.footer-brand{display:block;width:190px;align-self:start}.footer-brand img{display:block;width:100%;height:auto}.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:13px}.footer-column h3{margin:0 0 5px;color:var(--ink);font-size:15px;letter-spacing:-.01em}.footer-column a{color:#68656d;text-decoration:none;font-size:13px;line-height:1.5;transition:color .15s ease}.footer-column a:hover{color:var(--cobalt)}.footer-column a:focus-visible,.footer-brand:focus-visible{outline:3px solid var(--lemon);outline-offset:4px}.footer-bottom{padding-top:24px;border-top:1px solid #c9c6bd;display:flex;justify-content:space-between;gap:25px;color:#77747c;font-size:11px}
@media(max-width:1000px){.nav-centre{display:none}nav{grid-template-columns:1fr 1fr}.hero{grid-template-columns:1fr;padding-top:65px}.intro{max-width:760px}.board{max-width:780px;margin:25px auto 20px}.promise{grid-template-columns:1fr 2fr}.promise-side{grid-column:2}.footer-main{grid-template-columns:1fr 1fr 1fr;gap:5vw}}
@media(max-width:620px){nav{height:78px;margin:0 18px}.brand{width:150px}.nav-actions{gap:10px}.status{display:none}.login-button{padding:10px 12px;gap:10px;font-size:12px;box-shadow:2px 2px 0 var(--lilac)}.hero{padding:55px 25px 60px}.intro h1{font-size:clamp(58px,19vw,82px)}.summary{margin-top:32px;font-size:17px}.launch{align-items:flex-start;flex-direction:column}.board{min-width:670px;transform:scale(.52) rotate(1deg);transform-origin:left top}.hero .board{height:500px;margin-bottom:-220px}.ticker div{font-size:20px}.promise{padding:90px 25px 70px;display:block}.promise>p{margin-bottom:25px}.promise-side{margin-top:45px}.site-footer{margin:0 18px;padding-top:42px}.footer-main{grid-template-columns:1fr 1fr;gap:38px 24px;padding-bottom:42px}.footer-brand{grid-column:1/-1;width:165px}.footer-bottom{flex-direction:column;gap:7px;padding-top:20px;line-height:1.5}}


/* Mobile layout polish */
@media(max-width:620px){
  body{overflow-x:hidden}
  nav{grid-template-columns:minmax(0,1fr) auto}
  .brand{width:140px;min-width:0}
  .hero{display:block;min-height:0;padding:50px 22px 58px}
  .kicker{margin-bottom:23px;font-size:10px;letter-spacing:1.45px}
  .intro h1{font-size:clamp(54px,17.5vw,70px);line-height:.86}
  .summary{margin-top:28px;line-height:1.5}
  .board{width:100%;min-width:0;min-height:0;margin:42px 0 8px;padding:16px;box-shadow:7px 7px 0 var(--lilac);transform:rotate(.5deg)}
  .hero .board{height:auto;margin-bottom:8px}
  .board-head{font-size:8px;letter-spacing:.9px}
  .schedule{grid-template-rows:48px 102px 102px;gap:5px;margin:17px 0 14px}
  .day{padding:7px 5px;flex-direction:column;justify-content:center;gap:3px;font-size:8px}
  .day small{font-size:14px}
  .shift{gap:5px;padding:9px 7px;box-shadow:2px 2px 0 var(--ink);font-size:9px;overflow:hidden}
  .shift b{font-size:7px}
  .shift small{font-size:8px}
  .open-shift{padding:8px 6px}
  .open-shift span{font-size:19px}
  .open-shift small{font-size:8px}
  .board-foot{gap:11px;font-size:8px}
  .board-foot b{font-size:21px}
  .note{display:none}
  .promise h2{font-size:clamp(45px,14vw,62px)}
  .site-footer{text-align:center}
  .footer-brand{justify-self:center}
  .footer-column{align-items:center}
  .footer-bottom{align-items:center}
}
@media(max-width:360px){
  nav{margin-inline:15px}
  .brand{width:128px}
  .login-button{padding:9px 10px;gap:7px}
  .hero{padding-inline:18px}
  .intro h1{font-size:52px}
  .shift{padding-inline:5px}
  .shift b{display:none}
  .board-foot span{gap:4px}
}


/* Refined floating website header */
nav{
  height:84px;
  margin:22px 3vw 0;
  padding:0 24px;
  background:rgba(255,255,255,.96);
  border:1px solid #e3e1dc;
  border-radius:20px;
  box-shadow:0 12px 32px rgba(23,23,37,.055);
}
.nav-centre{gap:8px}
.nav-centre span,.nav-centre a{
  padding:9px 13px;
  border-radius:999px;
  background:#f7f7f5;
  color:#4f4d56;
  font-weight:600;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.nav-centre span:hover,.nav-centre a:hover{background:#f0effc;color:var(--cobalt)}
.status{
  padding:9px 12px;
  border-radius:999px;
  background:#faf9f7;
  color:#5a5861;
  font-size:12px;
}
.login-button{
  border-color:var(--cobalt);
  border-radius:999px;
  color:var(--cobalt);
  box-shadow:none;
  padding:11px 17px;
}
.login-button:hover{
  background:var(--cobalt);
  color:#fff;
  transform:none;
  box-shadow:none;
}
@media(max-width:1000px){
  nav{margin-inline:22px}
}
@media(max-width:620px){
  nav{
    height:68px;
    margin:12px 12px 0;
    padding:0 13px 0 15px;
    border-radius:16px;
  }
  .brand{width:128px}
  .login-button{
    min-height:42px;
    padding:9px 12px;
    border-radius:999px;
  }
}
@media(max-width:360px){
  nav{margin-inline:9px;padding-inline:11px 9px}
  .brand{width:116px}
  .login-button{padding:8px 10px}
}


/* Primary website action */
.nav-actions{gap:10px}
.get-started-button{
  min-height:43px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 17px;
  border:1px solid var(--cobalt);
  border-radius:999px;
  background:var(--cobalt);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.get-started-button:hover{background:#1d45cf;border-color:#1d45cf;transform:translateY(-1px)}
.get-started-button:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
.get-started-button span{font-size:17px;line-height:1}
@media(max-width:620px){
  .nav-actions{gap:6px}
  .brand{width:112px}
  .login-button,.get-started-button{min-height:40px;padding:8px 10px;font-size:11px}
  .login-button span,.get-started-button span{display:none}
}
@media(max-width:360px){
  .brand{width:98px}
  .login-button,.get-started-button{padding-inline:9px;font-size:10px}
}


/* First-view hero and broader organisation positioning */
@media(min-width:1001px){
  .hero{
    min-height:calc(100svh - 106px);
    padding-top:clamp(38px,6vh,66px);
    padding-bottom:clamp(38px,6vh,66px);
  }
}
@media(min-width:1001px) and (max-height:740px){
  .hero{padding-top:30px;padding-bottom:34px;gap:5vw}
  .intro h1{font-size:clamp(66px,6.3vw,96px)}
  .summary{margin-top:30px;font-size:clamp(17px,1.2vw,20px)}
  .launch{margin-top:25px}
  .board{min-height:440px;padding:22px}
  .schedule{grid-template-rows:55px 110px 110px;margin:20px 0 15px}
  .note-one{top:-22px}
  .note-two{bottom:-23px}
}

/* Always-visible mobile navigation card */
.mobile-menu{display:none}
@media(max-width:1000px){
  .mobile-menu{
    display:block;
    position:absolute;
    z-index:20;
    top:100px;
    right:22px;
    width:158px;
    padding:8px;
    border:1px solid #e3e1dc;
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 12px 32px rgba(23,23,37,.055);
  }
  .mobile-menu a{
    min-height:42px;
    padding:0 14px;
    border-radius:12px;
    display:flex;
    align-items:center;
    color:#4f4d56;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background .15s ease,color .15s ease;
  }
  .mobile-menu a:hover,.mobile-menu a.active{background:#f0effc;color:var(--cobalt)}
  .mobile-menu a:focus-visible{outline:3px solid var(--lemon);outline-offset:-1px}
}
@media(max-width:620px){
  .mobile-menu{top:88px;right:12px;width:148px;border-radius:16px}
  .mobile-menu a{min-height:39px;padding-inline:12px;font-size:12px}
}
@media(max-width:360px){.mobile-menu{right:9px;width:140px}}

/* Centred mobile navigation beneath the header */
@media(max-width:1000px){
  .mobile-menu{
    position:relative;
    top:auto;
    right:auto;
    z-index:20;
    width:calc(100% - 44px);
    margin:8px auto 0;
    padding:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:18px;
  }
  .mobile-menu a{
    flex:1;
    min-height:40px;
    padding:0 10px;
    justify-content:center;
    text-align:center;
    border-radius:12px;
  }
}
@media(max-width:620px){
  .mobile-menu{top:auto;right:auto;width:calc(100% - 24px);margin-top:7px;border-radius:16px}
  .mobile-menu a{min-height:38px;padding-inline:7px}
}
@media(max-width:360px){.mobile-menu{right:auto;width:calc(100% - 18px)}}
