:root {
    --red: #E63226;
    --rust: #A9612F;
    --ink: #1A1A1A;
  }
  * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
      
  }
  html, body { 
      height: 100%; 
      
  }
  body {
    overflow: hidden;
  }
  section.opt { position: absolute; inset: 0; }
  section.opt[hidden] { display: none; }

  /* ============================================================
     OPTION 1 — Serif hero with letterpress lens
     ============================================================ */
  #opt1 .hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
  }
  #opt1 nav {
    height: 101px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12.5%;
    background: #F7F7F5;
    position: relative;
    z-index: 3;
  }
  #opt1 .logo { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  #opt1 .logo span { color: var(--red); }
  #opt1 .nav-links { display: flex; gap: 32px; }
  #opt1 .nav-links a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
  /* hover: the brand full stop lands after the word */
  #opt1 .nav-links a::after {
    content: '.';
    color: var(--red);
    font-weight: 600;
    display: inline-block;
    margin-left: 1px;
    opacity: 0;
    transform: translateY(4px) scale(0.4);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #opt1 .nav-links a:hover::after { opacity: 1; transform: none; }
  #opt1 .nav-right { display: flex; align-items: center; gap: 24px; }
  #opt1 .cart { font-size: 15px; font-weight: 500; }
  /*#opt1 .btn {*/
  /*  display: inline-flex; align-items: center; gap: 8px;*/
  /*  padding: 16px 30px;*/
  /*  border-radius: 999px;*/
  /*  font-family: 'Archivo', sans-serif;*/
  /*  font-size: 15px; font-weight: 500;*/
  /*  text-decoration: none;*/
  /*  cursor: pointer;*/
  /*  border: none;*/
  /*  position: relative;*/
  /*  overflow: hidden;*/
  /*  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;*/
  /*}*/
  #opt1 .btn > * { position: relative; z-index: 2; }
  /* oneify-style sweep: colour layer rises from below on hover */
  /*#opt1 .btn::after {*/
  /*  content: '';*/
  /*  position: absolute;*/
  /*  inset: 0;*/
  /*  z-index: 1;*/
  /*  border-radius: inherit;*/
  /*  transform: translateY(101%);*/
  /*  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);*/
  /*}*/
  #opt1 .btn:hover::after { transform: translateY(0); }
  #opt1 .btn-red { background: var(--red); color: #fff; }
  #opt1 .btn-red::after { background: #8A150E; }
  #opt1 .btn-outline { background: #fff; color: var(--ink); border: 1px solid #D8D5D0; }
  #opt1 .btn-outline::after { background: var(--ink); }
  #opt1 .btn-outline:hover { color: #fff; border-color: var(--ink); }
  #opt1 .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  #opt1 .arrow { transition: transform 0.25s ease; }
  #opt1 .btn-red:hover .arrow { transform: translate(2px, -2px); }
  #opt1 .body { position: relative; flex: 1; overflow: hidden; }
  #opt1 #grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  #opt1 .glyph {
    position: absolute;
    left: 43.4%;
    top: 4.5%;
    width: 54.5%;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
  #opt1 .eyebrow {
    position: absolute;
    left: 17.3%;
    top: 13.2%;
    color: var(--red);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    z-index: 3;
  }
  #opt1 h1 {
    position: absolute;
    left: 17.3%;
    top: 45%;
    z-index: 3;
    color: #1F2325;
    font-family: Butler;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: 122%; /* 97.6px */
  }
  #opt1 h1 .dot { color: var(--red); }
  #opt1 .ctas {
    position: absolute;
    left: 55.8%;
    top: 55%;
    display: flex;
    gap: 14px;
    z-index: 3;
  }
  /*#opt1 .ctas .btn { width: 200px; height: 57px; padding: 0; justify-content: center; }*/
  #opt1 .ctas .arrow { width: 13px; height: 13px; margin-left: 6px; flex: 0 0 auto; }
  #opt1 .scroll-hint {
    position: absolute;
    left: 17.3%;
    bottom: 30%;
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: 0.2em;
    color: #6E6A64;
    z-index: 3;
  }
  #opt1 .scroll-hint::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red);
  }
  #opt1 .scroll-hint::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    left: -1px;
    top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    border: 1px solid var(--red);
    animation: o1ring 2s ease-out 1.5s infinite;
    opacity: 0;
  }
  @keyframes o1ring {
    0%        { transform: scale(1);   opacity: 0.7; }
    70%, 100% { transform: scale(3.4); opacity: 0; }
  }
  /* entrance: masked line reveals for text, quiet fades for the rest */
  @keyframes o1fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes o1slideUp {
    from { transform: translateY(110%); }
    to   { transform: none; }
  }
  #opt1 .reveal { display: block; overflow: hidden; }
  #opt1 .reveal-in {
    display: block;
    animation: o1slideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #opt1 .eyebrow .reveal-in { animation-delay: 0.15s; }
  #opt1 h1 .reveal:nth-child(1) .reveal-in { animation-delay: 0.25s; }
  #opt1 h1 .reveal:nth-child(2) .reveal-in { animation-delay: 0.35s; }
  @keyframes o1riseIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  .hero-banner{
    height: 950px;
 }

@media only screen and (max-width: 600px) {
    #opt1 h1 span{
        position: unset;
        left: 6.3%;
        top: 116px;
        z-index: 3;
        color: #1F2325;
        font-family: "Butler Bold";
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 124%;
    }
     #opt1 h1 {
        position: unset;
        margin-bottom:48px;
     }
    .eyebrow-main{
        padding: 56px 24px 0px;
    }
    #opt1 .eyebrow {
        position: relative;
        left: 0px;
        top: 0px;
        margin-bottom:24px;
    }
    #opt1 .ctas {
         position: unset; 
        left: 55.8%;
        top: 55%;
        display: flex;
        gap: 16px;
        z-index: 3;
        flex-direction: column;
    }
    .hero-banner {
        height: 700px;
    }
    #opt1 .glyph {
        position: absolute;
        left: 27.4%;
        top: 61.5%;
        width: 54.5%;
        height: 330px;
        z-index: 2;
        pointer-events: none;
    }
    .reveal-in{
        color: var(--brand-red, #D92F24);
        font-family: "Work Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 170%;
        letter-spacing: 1.1px;
    }
    #opt1 .ctas .btn {
        width: 100%;
        height: 57px;
        padding: 0;
        justify-content: center;
    }
    #opt1 .eyebrow {
        position: relative;
        left: 17.3%;
        top: 13.2%;
        color: var(--red);
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
        z-index: 3;
    }
    #opt1 .eyebrow {
        position: relative;
        left: 0px;
        top: 0px;
        color: var(--red);
        margin-bottom: 24px;
    }
    section.opt {
        position: absolute;
        inset: 0;
        margin-top: 30px;
    }
}