:root{
    --blue:#2623ff;
    --white:#ffffff;
    --pad:clamp(1.5rem,7vw,6rem);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-anchor:none}
  body{
    background:var(--blue);
    color:var(--white);
    font-family:"Cal Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  ::selection{background:#fff;color:var(--blue)}

  .wrap{
    max-width:1100px;
    margin:0 auto;
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    max-width:1100px;
    margin:0 auto;
    padding:calc(clamp(1.1rem,4.5vw,1.7rem) + env(safe-area-inset-top)) var(--pad) clamp(1.1rem,4.5vw,1.7rem);
    transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);
  }
  body.nav-hidden .nav{
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
  }
  .nav .logo{display:block;line-height:0}
  .nav .logo img{
    height:clamp(18px,5.2vw,26px);
    width:auto;
    display:block;
  }
  .burger{
    -webkit-appearance:none;appearance:none;
    background:none;border:0;cursor:pointer;
    width:32px;height:22px;
    margin-right:-4px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:6px;
  }
  .burger span{
    display:block;
    width:28px;height:2px;
    background:var(--white);
    border-radius:2px;
    transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s ease;
  }
  .burger:focus-visible{outline:2px solid #fff;outline-offset:8px}
  body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .menu{
    position:fixed;
    inset:0;
    z-index:20;
    background:var(--blue);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:var(--pad);
    overflow-y:auto;
    overscroll-behavior:contain;
    visibility:hidden;
    transition:visibility 0s linear .45s;
  }
  body.menu-open .menu{visibility:visible;transition-delay:0s}
  .menu a{
    font-family:"Anton",Impact,sans-serif;
    font-size:clamp(2.6rem,13vw,5.5rem);
    line-height:1.02;
    text-transform:uppercase;
    letter-spacing:-.005em;
    color:var(--white);
    text-decoration:none;
    display:block;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
  }
  body.menu-open .menu a{opacity:1;transform:none}
  body.menu-open .menu a:nth-child(1){transition-delay:.1s}
  body.menu-open .menu a:nth-child(2){transition-delay:.17s}
  body.menu-open .menu a:nth-child(3){transition-delay:.24s}
  body.menu-open .menu a:nth-child(4){transition-delay:.31s}
  body.menu-open .menu a:nth-child(5){transition-delay:.38s}
  body.menu-open .menu a:nth-child(6){transition-delay:.45s}

  /* ---------- hero ---------- */
  .hero-shell{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:100vh;
    min-height:100lvh;
  }
  .hero-video{
    position:absolute;
    top:0;
    left:0;
    bottom:auto;
    z-index:-1;
    width:100%;
    /* never shorter than the screen: on iOS the visible height changes as the
       URL bar hides, so take the largest of the section, the viewport and the
       large-viewport unit rather than trusting any single one */
    height:100%;
    height:max(100%, 100vh, 100lvh);
    object-fit:cover;
    object-position:center;
    opacity:.23;
    pointer-events:none;
  }
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding-top:calc(clamp(2rem,5vh,3rem) + env(safe-area-inset-top));
    padding-bottom:calc(clamp(4rem,11vh,7rem) + env(safe-area-inset-bottom));
  }
  h1{
    font-family:"Anton",Impact,sans-serif;
    font-weight:400;
    font-size:clamp(2.3rem,12.5vw,8rem);
    line-height:.96;
    letter-spacing:-.005em;
    text-transform:uppercase;
  }
  .sub{
    font-size:clamp(1.05rem,4.4vw,1.6rem);
    line-height:1.45;
    max-width:22ch;
    margin:clamp(1.6rem,5.2vw,2.4rem) auto 0;
  }
  .cta{
    display:inline-block;
    align-self:center;
    margin-top:clamp(2.8rem,8.5vw,4rem);
    background:var(--white);
    color:var(--blue);
    text-decoration:none;
    font-family:"Cal Sans",sans-serif;
    font-size:clamp(1rem,4vw,1.15rem);
    line-height:1;
    padding:1.15em 1.8em;
    border-radius:12px;
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),opacity .35s ease;
  }
  .cta:focus-visible{outline:2px solid #fff;outline-offset:4px}

  /* ---------- creed ---------- */
  .creed{
    padding-top:clamp(6rem,22vh,13rem);
    padding-bottom:clamp(6rem,22vh,13rem);
    text-align:center;
  }
  .creed p{
    font-family:"Anton",Impact,sans-serif;
    font-weight:400;
    font-size:clamp(1.6rem,7vw,3.25rem);
    line-height:1.08;
    letter-spacing:-.005em;
    text-transform:uppercase;
    max-width:19ch;
    text-wrap:balance;
    margin:0 auto;
  }

  /* ---------- about ---------- */
  .about{
    padding-bottom:clamp(5rem,18vh,11rem);
    text-align:center;
  }
  .bit + .bit{margin-top:clamp(5rem,16vh,10rem)}
  .bit h2{
    font-family:"Mr Dafoe",cursive;
    font-weight:400;
    font-size:clamp(2.4rem,15vw,10rem);
    line-height:1.05;
    letter-spacing:0;
    text-transform:none;
    -webkit-text-stroke:.024em currentColor;
    paint-order:stroke fill;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    margin-bottom:clamp(1.25rem,4.5vw,2.5rem);
    padding-left:.5rem;
    padding-right:.5rem;
  }
  .bit img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:12px;
    background:rgba(255,255,255,.08);
  }
  .bit p{
    margin:clamp(1.75rem,5.5vw,2.75rem) auto 0;
    font-size:clamp(1.05rem,4.4vw,1.35rem);
    line-height:1.55;
    max-width:46ch;
  }

  /* ---------- content pages ---------- */
  .page{
    padding-top:clamp(7rem,20vh,12rem);
    padding-bottom:clamp(4rem,14vh,8rem);
  }
  .page h1{
    font-family:"Anton",Impact,sans-serif;
    font-weight:400;
    font-size:clamp(2.6rem,12vw,6rem);
    line-height:.92;
    letter-spacing:-.005em;
    text-transform:uppercase;
    max-width:14ch;
    text-wrap:balance;
    margin-bottom:clamp(2.25rem,8vw,4rem);
  }
  .page .lede{
    max-width:52ch;
    font-size:clamp(1.15rem,4.8vw,1.5rem);
    line-height:1.5;
    margin-bottom:clamp(1.5rem,5vw,2.25rem);
  }
  .page h2{
    font-family:"Anton",Impact,sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,6vw,2.4rem);
    line-height:1.05;
    letter-spacing:-.005em;
    text-transform:uppercase;
    margin-top:clamp(2.75rem,9vw,4.5rem);
    margin-bottom:clamp(.9rem,3vw,1.4rem);
  }
  .page p,
  .page li{
    max-width:58ch;
    font-size:clamp(1rem,4vw,1.15rem);
    line-height:1.65;
  }
  .page p{margin-bottom:1.1em}
  .page ul{list-style:none;margin-bottom:1.4em}
  .page li{position:relative;padding-left:1.4em;margin-bottom:.55em}
  .page li::before{
    content:"0";
    position:absolute;
    left:0;
    font-family:"Anton",Impact,sans-serif;
    opacity:.55;
  }
  .page a:not(.cta){
    color:var(--white);
    text-decoration:underline;
    text-underline-offset:.22em;
    text-decoration-thickness:1px;
  }

  .page .story-photo{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    margin-bottom:clamp(1.75rem,5vw,2.5rem);
  }
  @media (min-width:768px){
    .page .story-photo{aspect-ratio:16/9}
  }

  /* ---------- accordions ---------- */
  .qa details{padding:clamp(1.1rem,3.6vw,1.6rem) 0}
  .qa summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1.25rem;
    max-width:58ch;
    font-size:clamp(1.05rem,4.4vw,1.35rem);
    line-height:1.35;
  }
  .qa summary::-webkit-details-marker{display:none}
  .qa summary:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
  .qa .mark{
    position:relative;
    flex:none;
    width:.85em;
    height:.85em;
    margin-top:.28em;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
  }
  .qa .mark::before,
  .qa .mark::after{content:"";position:absolute;background:var(--white);border-radius:2px}
  .qa .mark::before{left:0;right:0;top:calc(50% - 1px);height:2px}
  .qa .mark::after{top:0;bottom:0;left:calc(50% - 1px);width:2px}
  .qa details[open] .mark{transform:rotate(135deg)}
  .qa .a{
    max-width:58ch;
    padding-top:clamp(.85rem,2.6vw,1.15rem);
    padding-right:2rem;
  }
  .qa .a p{margin-bottom:0}
  .qa details[open] .a{animation:answerIn .5s cubic-bezier(.16,1,.3,1)}
  @keyframes answerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* ---------- apply ---------- */
  .quicklinks{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(1.1rem,5vw,2.5rem);
    margin-bottom:clamp(1.75rem,5vw,2.75rem);
    font-size:clamp(1rem,4vw,1.15rem);
    line-height:1.3;
  }
  .quicklinks a{
    color:var(--white);
    text-decoration:none;
    opacity:.75;
    transition:opacity .35s ease;
  }
  .quicklinks a:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}

  .apply{
    padding-bottom:clamp(3rem,10vh,6rem);
    scroll-margin-top:clamp(2rem,8vh,5rem);
  }
  #form{
    height:clamp(540px,74svh,700px);
    width:100%;
  }
  #form div,
  #form iframe{
    height:100% !important;
    width:100% !important;
    border:0;
  }

  footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding-top:clamp(3rem,10vh,6rem);
    padding-bottom:clamp(2rem,6vh,3.5rem);
    font-size:.82rem;
    opacity:.65;
  }
  footer a{
    color:inherit;
    text-decoration:none;
    transition:opacity .35s ease;
  }
  footer a:focus-visible{outline:2px solid #fff;outline-offset:4px}

  /* ---------- larger screens ---------- */
  @media (min-width:768px){
    .hero{
      padding-top:clamp(5rem,11vh,7rem);
      padding-bottom:clamp(3rem,9vh,5.5rem);
    }
    h1{font-size:clamp(4rem,10.5vw,8rem)}
    .sub{
      max-width:32ch;
      margin-top:1.8rem;
    }
    .cta{margin-top:3rem}
    .bit img{aspect-ratio:16/9}
  }

  /* ---------- entrance ---------- */
  .r{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
  .r.in{opacity:1;transform:none}
  .creed .r{transform:translateY(24px);transition-duration:1.1s}
  .r:nth-child(2){transition-delay:.06s}
  .r:nth-child(3){transition-delay:.12s}
  .r:nth-child(4){transition-delay:.18s}
  /* ---------- hover ---------- */
  @keyframes wiggle{
    0%   {transform:rotate(0deg)     translate(0,0)}
    20%  {transform:rotate(1.5deg)   translate(11px,-7px)}
    40%  {transform:rotate(-.9deg)   translate(-8px,7px)}
    60%  {transform:rotate(1.1deg)   translate(7px,9px)}
    80%  {transform:rotate(-1.35deg) translate(-11px,-5px)}
    100% {transform:rotate(0deg)     translate(0,0)}
  }
  .bit img,
  .story-photo{animation:wiggle 11s ease-in-out infinite}
  .bit:nth-of-type(2) img{animation-delay:-3.7s}
  .bit:nth-of-type(3) img{animation-delay:-7.4s}

  @media (hover:hover) and (pointer:fine){
    a.cta:hover{
      transform:translateY(-3px) scale(1.015);
      box-shadow:0 14px 32px rgba(0,0,0,.20);
    }
    a.cta:active{
      transform:translateY(-1px) scale(.995);
      box-shadow:0 6px 14px rgba(0,0,0,.16);
      transition-duration:.09s;
    }
    body.menu-open .menu a:hover{transform:translateX(12px)}
    .nav .logo:hover img{opacity:.75}
    .quicklinks a:hover{opacity:1}
    footer a:hover{opacity:.6}
    body:not(.menu-open) .burger:hover span:nth-child(1){transform:translateY(-1.5px)}
    body:not(.menu-open) .burger:hover span:nth-child(3){transform:translateY(1.5px)}
  }
  .nav .logo img{transition:opacity .35s ease}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .r{opacity:1;transform:none;transition:none}
    .cta,.burger span,.menu,.menu a,.nav,.nav .logo img,.quicklinks a{transition:none}
    .bit img,
    .story-photo{animation:none}
    .qa .mark{transition:none}
    .qa details[open] .a{animation:none}
    a.cta:hover,a.cta:active{transform:none}
    .menu a{opacity:1;transform:none}
  }