:root{
    --navy:#0e1433; --hero:#262a31; --btn:#1f6fd6; --btn-hover:#3a86ee;
    --sans:"Barlow","Helvetica Neue",Arial,system-ui,sans-serif;
    --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
    --pad:clamp(18px,4vw,56px);
    --wrap:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--navy);color:#fff;line-height:1.45;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:hidden}
  
  .inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
  
  /* top bar */
  .topbar{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12)}
  .topbar .inner{padding-top:12px;padding-bottom:12px;font-weight:600;font-size:clamp(15px,1.6vw,18px);letter-spacing:.01em}
  
  /* hero */
  /* hero */
  .hero{position:relative;background:linear-gradient(135deg,#1a1f33 0%,#272b36 100%);padding:clamp(14px,3vw,25px) 0}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
    background:linear-gradient(90deg,#5f6f7e 0 16.66%,#94700a 0 33.33%,#4a4fa3 0 50%,#a8132a 0 66.66%,#b9e08a 0 83.33%,#62b4f5 0)}
  .hero h1{font:400 clamp(13px,2.2vw,22px)/1.2 var(--serif);letter-spacing:.02em;text-transform:uppercase}
  .hero h1 span{display:block;margin-top:4px;font:500 clamp(20px,4.5vw,36px)/1.2 var(--sans);letter-spacing:.01em;color:#fff;text-transform:none}
  .hero p{margin-top:12px;font-size:clamp(13px,1.2vw,16px);line-height:1.6;color:#d5d8e6}
  @media (max-width:820px){.hero .inner{grid-template-columns:1fr;gap:14px}}
  
  /* company bands */
  .band{position:relative;display:block;overflow:hidden;background:var(--bg);color:var(--fg);text-decoration:none;
    animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms + 150ms)}
  .band:focus-visible{outline:none;box-shadow:inset 0 0 0 5px var(--fg)}
  .band .inner{display:flex;align-items:flex-end;min-height:clamp(140px,16vw,210px);padding-top:clamp(14px,1.8vw,24px);padding-bottom:clamp(14px,1.8vw,24px)}
  .band .txt{position:relative;z-index:1;max-width:min(62%,640px)}
  .band h2{font:700 clamp(20px,3.6vw,40px)/1.1 var(--sans);letter-spacing:-.01em;margin-bottom:6px}
  .band p{font-size:clamp(13.5px,1.35vw,17px);margin-bottom:10px}
  .more{display:block;opacity:1}
  .band .letter{position:absolute;right:var(--pad);bottom:0;font:800 clamp(130px,19vw,260px)/.75 var(--sans);color:var(--ltr);pointer-events:none;user-select:none;opacity:.9;transition:transform .8s cubic-bezier(.2,.8,.2,1);line-height:.75}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;background:var(--btn);color:#fff;
    font:600 14px/1 var(--sans);text-decoration:none;transition:background .2s,transform .2s}
  .btn span{display:inline-block;transition:transform .25s}
  .band:hover .btn,.band:focus-visible .btn{background:var(--btn-hover)}
  .band:hover .btn span,.band:focus-visible .btn span{transform:translateX(5px)}
  .band:hover .letter,.band:focus-visible .letter{transform:scale(1.12) rotate(-6deg)}
  @keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
  
  .b-ind{--bg:#5f6f7e;--fg:#fff;--ltr:#e9edf2}
  .b-trd{--bg:#94700a;--fg:#fff;--ltr:#dcc060}
  .b-prp{--bg:#4a4fa3;--fg:#fff;--ltr:#e9e9fb}
  .b-ogm{--bg:#a8132a;--fg:#fff;--ltr:#df3c47}
  .b-hnh{--bg:#b9e08a;--fg:#14210a;--ltr:#8fb35c}
  .b-edg{--bg:#62b4f5;--fg:#0c1b33;--ltr:#3a8fd8}
  
  /* footer */
.site-footer{
  background:#0b0f26;
  border-top:1px solid rgba(255,255,255,.1);
  color:#cfd1e6;
  font-size:13px;
}
.site-footer .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:20px;
  padding-bottom:20px;
}
.site-footer p{margin:0;letter-spacing:.01em}
.site-footer .credit a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:color .2s,border-color .2s;
}
.site-footer .credit a:hover,
.site-footer .credit a:focus-visible{
  color:var(--btn-hover);
  border-color:var(--btn-hover);
}

@media (max-width:600px){
  .site-footer .inner{
    flex-direction:column;
    text-align:center;
    gap:6px;
  }
}
  
  /* tablet & mobile */
  @media (max-width:700px){
    .band .inner{min-height:0;align-items:flex-start}
    .band .txt{max-width:100%}
    .band p{max-width:calc(100% - 4px)}
    .band .letter{font-size:clamp(150px,46vw,220px);bottom:0;right:-2%}
  }
  @media (min-width:1400px){:root{--wrap:1320px}}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

  @media (max-width:700px){
    .topbar .inner{padding-top:8px;padding-bottom:8px;font-size:13px}
  
    /* hero */
    .hero p{
      font-size:13px;
      display:-webkit-box;
      -webkit-line-clamp:4;          /* optional: shortens the paragraph, remove if you want full text */
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
  
    /* bands */
    .band .inner{min-height:0;align-items:flex-start;padding-top:16px;padding-bottom:18px}
    .band .txt{max-width:100%}
    .band h2{font-size:clamp(20px,6vw,26px);margin-bottom:4px}
    .band p{font-size:13px;line-height:1.45;max-width:78%;margin-bottom:10px}
    .btn{padding:8px 14px;font-size:13px}
    .band .letter{font-size:clamp(110px,34vw,170px);right:-3%;bottom:0;opacity:.7}
  
    /* footer */
    .site-footer .inner{flex-direction:column;text-align:center;gap:4px;padding-top:14px;padding-bottom:14px}
    .site-footer{font-size:12px}
  }
  
  /* touch devices: no sticky hover effects */
  @media (hover:none){
    .band:hover .letter{transform:none}
    .band:hover .btn span{transform:none}
  }