:root{
    --white:#FFFFFF;
    --black:#141212;
    --bordeaux:#5B1F28;
    --bordeaux-dark:#4A1920;
    --gold:#B8935A;
    --green:#1F5B3A;
    --green-dark:#184A2F;
    --hairline:rgba(20,18,18,0.08);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{
    -webkit-text-size-adjust:100%;
  }

  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--white);
    color:var(--black);
    min-height:100dvh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  .font-display{
    font-family:'Playfair Display',Georgia,serif;
  }

  /* ---------- Layout ---------- */

  .stage{
    min-height:100dvh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 24px;
  }

  .grid-wrap{
    width:100%;
    max-width:1280px;
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
  }

  @media (min-width:900px){
    .grid-wrap{
      grid-template-columns:1.5fr 1fr;
      gap:56px;
    }
    .stage{padding:40px 56px;}
  }

  /* ---------- Text column ---------- */

  .text-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    order:1;
  }

  @media (min-width:900px){
    .text-col{
      align-items:flex-start;
      text-align:left;
    }
  }

  .brand-logo{
    height:40px;
    width:auto;
    margin-bottom:26px;
    opacity:0;
    animation:rise 0.6s ease-out 0s forwards;
  }

  @media (min-width:900px){
    .brand-logo{height:46px;}
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:22px;
    opacity:0;
    animation:rise 0.7s ease-out 0.05s forwards;
  }

  .eyebrow::before{
    content:'';
    width:22px;
    height:1px;
    background:var(--gold);
  }

  h1{
    font-size:clamp(2rem, 3.6vw, 2.85rem);
    line-height:1.2;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--black);
    max-width:26ch;
    opacity:0;
    animation:rise 0.7s ease-out 0.15s forwards;
  }

  .subhead{
    margin-top:20px;
    font-size:clamp(0.93rem, 1vw, 0.98rem);
    line-height:1.6;
    color:#4a4544;
    max-width:60ch;
    font-weight:400;
    opacity:0;
    animation:rise 0.7s ease-out 0.28s forwards;
  }

  @media (min-width:900px){
    h1{max-width:27ch;}
    .subhead{max-width:60ch;}
  }

  .break-desktop{display:none;}

  @media (min-width:900px){
    .break-desktop{display:inline;}
  }

  /* ---------- Video column ---------- */

  .video-col{
    order:2;
    width:100%;
    display:flex;
    justify-content:center;
    opacity:0;
    animation:rise 0.8s ease-out 0.2s forwards;
  }

  .video-frame{
    position:relative;
    width:100%;
    max-width:520px;
    aspect-ratio:16/9;
    border-radius:20px;
    background:linear-gradient(155deg, #1c1414 0%, var(--bordeaux-dark) 55%, var(--bordeaux) 100%);
    box-shadow:
      0 24px 60px -18px rgba(91,31,40,0.35),
      0 8px 24px -10px rgba(20,18,18,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .video-frame::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
    pointer-events:none;
  }

  .video-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    color:rgba(255,255,255,0.82);
    padding:0 20px;
    text-align:center;
  }

  .play-glyph{
    width:52px;
    height:52px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 0.35s ease, border-color 0.35s ease;
  }

  .video-frame:hover .play-glyph{
    transform:scale(1.06);
    border-color:var(--gold);
  }

  .play-glyph svg{
    width:16px;
    height:16px;
    margin-left:3px;
  }

  .video-placeholder p{
    font-size:13px;
    letter-spacing:0.02em;
    color:rgba(255,255,255,0.55);
    font-weight:400;
  }

  /* ---------- CTA block ---------- */

  .cta-block{
    margin-top:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    opacity:0;
    animation:rise 0.7s ease-out 0.4s forwards;
  }

  @media (min-width:900px){
    .cta-block{align-items:flex-start;}
  }

  .cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--green);
    color:var(--white);
    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.01em;
    padding:18px 38px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    text-decoration:none;
    box-shadow:0 14px 30px -10px rgba(31,91,58,0.45);
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    width:100%;
    max-width:380px;
  }

  .cta-btn:hover{
    background:var(--green-dark);
    transform:translateY(-2px);
    box-shadow:0 18px 36px -10px rgba(31,91,58,0.55);
  }

  .cta-btn:active{
    transform:translateY(0);
  }

  .cta-btn:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  @media (min-width:900px){
    .cta-btn{width:auto;}
  }

  .trust-row{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 20px;
    font-size:12.5px;
    color:#6b6564;
    font-weight:500;
  }

  @media (min-width:900px){
    .trust-row{justify-content:flex-start;}
  }

  .trust-row span{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }

  .trust-row svg{
    width:12px;
    height:12px;
    flex-shrink:0;
    color:var(--gold);
  }

  /* ---------- Footer ---------- */

  .footer{
    position:fixed;
    bottom:16px;
    left:0;
    right:0;
    text-align:center;
    font-size:11.5px;
    color:#a39c9a;
    letter-spacing:0.02em;
    z-index:5;
  }

  .footer a{
    color:#a39c9a;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color 0.2s ease, border-color 0.2s ease;
  }

  .footer a:hover{
    color:var(--bordeaux);
    border-color:var(--bordeaux);
  }

  /* ---------- Motion ---------- */

  @keyframes rise{
    from{opacity:0; transform:translateY(14px);}
    to{opacity:1; transform:translateY(0);}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    .eyebrow, h1, .subhead, .video-col, .cta-block{opacity:1;}
  }

  /* Small-height safety (short mobile viewports) */
  @media (max-height:700px) and (max-width:899px){
    .stage{padding:20px 20px;}
    .grid-wrap{gap:24px;}
    .cta-block{margin-top:22px;}
    h1{font-size:clamp(1.7rem,7vw,2.2rem);}
  }

  /* ---------- CTA visibility control ---------- */

  /* Duplicate CTA visibility control: one lives inside text-col for desktop order,
     one lives after video for mobile order. Only one shows at a time. */
  .cta-block-mobile-only{ display:flex; order:3; }
  .cta-block-desktop-only{ display:none; }

  @media (min-width:900px){
    .cta-block-mobile-only{ display:none; }
    .cta-block-desktop-only{ display:flex; }
  }