@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Share+Tech+Mono&display=swap');

    .wrap{
    max-width:1400px;
    margin:0 auto;
    padding:0 48px;
  } 


    /* ---------- HERO (full viewport; wording is real HTML now, not baked into the image) ---------- */
  .hero{
    position:relative;
    width: 100%;
    box-sizing:border-box;
    background-color:var(--bg-0);
    /* mobile/tablet default: a full 100vh box is much taller than the image's own
       shape, so it always had to either crop hard (cover) or letterbox (contain) —
       no background-size fixes that on its own. Sizing the box itself close to
       square gets much closer to the image's real proportions: cover then only
       needs a modest side-crop (~10% each side) instead of a drastic zoom, and
       there's no empty letterbox space since the image fills the box completely. */
    aspect-ratio:1/1;
    background-image:url('../images/hero-bg-fish.webp');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* ---------- HERO TEXT ----------
     max-width was 34% (sized for the wide desktop banner, where text needs to
     stay clear of the fish's head) — way too narrow on a phone-width screen at
     this font size, which was wrapping the title/tagline onto multiple lines.
     Loosened for mobile/tablet; desktop keeps the tighter 34% below.
     left/top re-measured for the square-box crop above (10% cropped off each
     side horizontally, no vertical crop). */
  .hero-text{
    position:absolute;
    left:7%;
    top:36%;
    max-width:80%;
  }
  .hero-title{
    margin:0;
    font-family:'Oswald',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(28px, 4.5vw, 90px);
    line-height:1;
    letter-spacing:0.5px;
    color:var(--white);
  }
  .hero-title .accent{ color:var(--red); }
  .hero-tagline{
    margin:1.5vw 0 0;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    font-size:clamp(13px, 1.9vw, 34px);
    letter-spacing:1px;
    color:var(--red);
  }

  /* Desktop and up: original wide, shallow banner sizing */
  @media (min-width:1024px){
    .hero{
      height:auto;
      max-height:40vw;
      min-height:383px;
      aspect-ratio:1.7525/1;
      /* wider/shallower banner shape than the mobile square box above, so it
         needs its own top-biased crop tuned earlier (dorsal fin + teeth visible) */
      background-position:center 40%;
    }
    .hero-text{
      left:15.7%; /* desktop's own value — the base rule's 7% is specifically for the
                     mobile square-box crop and was leaking in here unset */
      top:32%;
      max-width:34%;
    }
  }

  /* ---------  arrow --------- */

  .scroll-arrow-wrap{
    left: 50vw;
    position: absolute;
  }

  @keyframes bob{
    0%, 100%{ transform:translateY(0); opacity:0.7; }
    50%{ transform:translateY(8px); opacity:1; }
  }

  .scroll-arrow-wrap svg{
    animation:bob 1.8s ease-in-out infinite;
    filter:drop-shadow(0 0 3px rgba(217,43,28,0.6));
  }

  /* ---------- SECTION DIVIDER (thin accent line, glow sweeps side to side) ---------- */
  .section-divider{
    height:4px;
    width:100%;
    position:relative;
    background:var(--red-dim);
    overflow:hidden;
  }
  .section-divider::before{
    content:'';
    position:absolute;
    top:0; bottom:0;
    left:0;
    width:35%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 50%, transparent);
    filter:blur(1px);
    animation:dividerSweep 2.4s ease-in-out infinite;
  }
  @keyframes dividerSweep{
    0%{ transform:translateX(-120%); }
    100%{ transform:translateX(385%); }
  }

   /* ---------- ABOUT BRIEF ---------- */
  .about-brief{
    padding:56px 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:auto 1fr;
    gap:48px;
    align-items:center;
    min-height:50vh;
    box-sizing:border-box;
    position:relative;
  }

  @media (max-width:860px){
    .about-brief{ grid-template-columns:1fr; gap:16px; min-height:auto; padding:40px 0; }
  }
  .about-brief .section-head{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--red);
    white-space:nowrap;
    padding-top:4px;
  }
  .about-brief p{
    font-family:'Inter',sans-serif;
    font-size:15px;
    line-height:1.75;
    color:#cfccc6;
    max-width:680px;
  }
  .about-brief .learn-more{
    display:inline-block;
    margin-top:14px;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--white);
    text-decoration:none;
    border-bottom:1px solid var(--red);
    padding-bottom:2px;
  }
  .about-brief .learn-more:hover{ color:var(--red); }

  /* ---------- MODELS SCROLLER (product cards) ---------- */
  .models-scroller-section{
    padding:56px 0 64px;
    border-top:1px solid var(--line);
    min-height:50vh;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .models-scroller-section .section-head{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:6px;
  }
  .models-scroller-section h2{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(24px, 3vw, 34px);
    text-transform:uppercase;
    letter-spacing:-0.3px;
    color:var(--white);
    margin-bottom:28px;
  }

  .models-scroller{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:16px;
    margin:0 -48px;
    padding-left:48px;
    padding-right:48px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--red) var(--line);
  }
  .models-scroller::-webkit-scrollbar{ height:6px; }
  .models-scroller::-webkit-scrollbar-track{ background:var(--line); border-radius:6px; }
  .models-scroller::-webkit-scrollbar-thumb{ background:var(--red); border-radius:6px; }

  .model-card{
    position:relative;
    flex:0 0 auto;
    width:min(78vw, 340px);
    aspect-ratio:3/4;
    border-radius:6px;
    overflow:hidden;
    scroll-snap-align:start;
    border:1px solid var(--line);
    text-decoration:none;
    display:block;
  }
  @media (max-width:600px){
    .model-card{ width:72vw; }
  }
  .model-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .model-card .card-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(10,9,8,0) 40%, rgba(10,9,8,0.92) 100%);
  }
  .model-card .card-text{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:22px;
  }
  .model-card .card-eyebrow{
    font-family:'Oswald',sans-serif;
    font-size:10.5px;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:6px;
  }
  .model-card .card-title{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:24px;
    text-transform:uppercase;
    letter-spacing:-0.2px;
    color:var(--white);
  }
  .model-card .card-price{
    font-family:'Inter',sans-serif;
    font-size:13px;
    color:var(--gray);
    margin-top:4px;
  }
  .model-card .card-tag{
    display:inline-block;
    margin-top:10px;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--white);
    border-bottom:1px solid var(--red);
    padding-bottom:2px;
  }
  .model-card.coming-soon .card-title{ color:var(--gray); }

  /* ---------- PLACEHOLDER SECTION ---------- */
  .placeholder-section{
    padding:56px 0;
    border-top:1px solid var(--line);
    min-height:40vh;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .placeholder-section .ph-box{
    width:100%;
    border:1.5px dashed rgba(217,43,28,0.35);
    border-radius:6px;
    padding:48px 24px;
    text-align:center;
  }
  .placeholder-section .ph-label{
    font-family:'Oswald',sans-serif;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray);
  }


  /* ---------- FINANCING CALLOUT ---------- */
  .financing-callout{
    max-width:1400px;
    margin:0 auto;
    padding:28px 48px 56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
  }
  .financing-callout p{
    font-family:'Inter',sans-serif;
    color:var(--gray);
    font-size:15px;
    margin:0;
  }
  .financing-link{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--red);
    text-decoration:none;
    border-bottom:1px solid var(--red);
    padding-bottom:2px;
    transition:opacity .2s ease;
    white-space:nowrap;
  }
  .financing-link:hover{ opacity:0.75; }
  @media (max-width:600px){
    .financing-callout{ padding:24px 24px 40px; flex-direction:column; align-items:flex-start; }
  }

  
    /* ---------- CONTACT SECTION ---------- */
  .contact-section{
    padding:56px 0;
    border-top:1px solid var(--line);
    min-height:75vh;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
  }
  .contact-section .section-head{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:16px;
  }
  .contact-section h2{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:clamp(26px, 3.4vw, 40px);
    text-transform:uppercase;
    letter-spacing:-0.3px;
    color:var(--white);
    margin-bottom:24px;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
  }
  @media (max-width:800px){
    .contact-grid{ grid-template-columns:1fr; }
  }
  .contact-info-item{
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
  .contact-info-item .ci-head{
    font-family:'Oswald',sans-serif;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gray);
    margin-bottom:6px;
  }
  .contact-info-item .ci-body a{
    color:var(--white);
    text-decoration:none;
    font-size:15px;
  }
  .contact-info-item .ci-body a:hover{ color:var(--red); }
  .contact-blurb{
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.7;
    color:#cfccc6;
    margin-top:20px;
  }