.hero-astra {
      position: relative;
      isolation: isolate;
      width: 100%;
      aspect-ratio: auto;
      height: clamp(320px, 23vw, 420px);
      min-height: 0;
      overflow: hidden;
      border-radius: 0;
      border: 0;
      outline: none;
      box-shadow: none;
      color: #fff;
      background: radial-gradient(ellipse at -12% 58%, #35c27a 0%, #1e7a4a 19%, #0f3d2a 39%, #040a07 73%);
    }

    /* Background adapted from https://codepen.io/Juxtopposed/pen/BaqLEQY */
    .hero-astra__atmosphere { position:absolute; z-index:0; inset:0; pointer-events:none; overflow:hidden; mask-image:linear-gradient(90deg,#000 0%,#000 35%,transparent 85%); -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 35%,transparent 85%); }
    .hero-astra__blob { position:absolute; width:clamp(260px,38vw,700px); aspect-ratio:1; border-radius:45% 55% 62% 38%; filter:blur(60px); will-change:transform; animation:bloom 8s ease-in-out -1.3s infinite; }
    .hero-astra__blob--bright { left:-24%; top:-35%; background:#35c27a; opacity:.85; }
    .hero-astra__blob--mid { left:0; top:18%; background:#2fa86a; opacity:.7; animation-name:drift; }
    .hero-astra__blob--deep { left:28%; top:-48%; background:#1e7a4a; opacity:.65; animation-name:roll; }
    @keyframes bloom { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(22%,30%) scale(1.18); } 66% { transform:translate(4%,55%) scale(.95); } }
    @keyframes drift { 0%,100% { transform:translate(0,0) scale(1.1); } 33% { transform:translate(35%,-25%) scale(.9); } 66% { transform:translate(-12%,-45%) scale(1.2); } }
    @keyframes roll { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(-28%,50%) scale(1.2); } 66% { transform:translate(16%,20%) scale(.9); } }
    .hero-astra__vignette {
      position: absolute;
      z-index: 1;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, rgb(4 10 7 / .23), rgb(4 10 7 / .42) 39%, rgb(4 10 7 / .35) 64%, rgb(4 10 7 / .12)),
        radial-gradient(ellipse at 31% 45%, rgb(4 10 7 / .3), transparent 65%);
    }
    .hero-astra__iron, .hero-astra__ball, .hero-astra__club {
      position: absolute;
      z-index: 2;
      aspect-ratio: 1;
      pointer-events: none;
      user-select: none;
      filter: drop-shadow(10px 17px 14px rgb(0 0 0 / .65)) drop-shadow(30px 42px 34px rgb(0 0 0 / .5));
    }
    .hero-astra__iron, .hero-astra__club {
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 77%, rgb(0 0 0 / .85) 92%, rgb(0 0 0 / .5));
      mask-image: linear-gradient(to bottom, #000 0%, #000 77%, rgb(0 0 0 / .85) 92%, rgb(0 0 0 / .5));
    }
    .hero-astra__iron img, .hero-astra__ball img, .hero-astra__club img { display: block; width: 100%; height: auto; }
    .hero-astra__iron img, .hero-astra__club img { filter: brightness(.64) contrast(1.18) saturate(.92) blur(.25px); }
    .hero-astra__ball img { filter: brightness(.77) contrast(1.12) saturate(.9) blur(.2px); }
    .hero-astra__iron::after, .hero-astra__ball::after, .hero-astra__club::after {
      content: "";
      position: absolute;
      inset: 0;
      -webkit-mask: var(--object-mask) center / contain no-repeat;
      mask: var(--object-mask) center / contain no-repeat;
      background: linear-gradient(135deg, transparent 18%, rgb(0 0 0 / .12) 48%, rgb(0 0 0 / .8) 94%);
      mix-blend-mode: multiply;
    }
    .hero-astra__object-atmosphere { position:absolute; inset:0; z-index:1; pointer-events:none; -webkit-mask:var(--object-mask) center / contain no-repeat; mask:var(--object-mask) center / contain no-repeat; background:radial-gradient(ellipse at 5% 0%,#24bd69,transparent 75%); mix-blend-mode:overlay; opacity:.217; }
    .hero-astra__sparkle { position:absolute; inset:0; z-index:3; -webkit-mask:var(--object-mask) center / contain no-repeat; mask:var(--object-mask) center / contain no-repeat; background:radial-gradient(ellipse at 46% 13%,rgb(224 255 235 / .75) 0%,transparent 5%); mix-blend-mode:screen; animation:crown-light 8s ease-in-out -1.3s infinite; }
    @keyframes crown-light { 0%,30%,70%,100% { opacity:0; } 50% { opacity:.42; } }
    .hero-astra__texture {
      position: absolute; inset: 0; z-index: 2; pointer-events: none;
      -webkit-mask: var(--object-mask) center / contain no-repeat;
      mask: var(--object-mask) center / contain no-repeat;
      opacity: .4; mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
    }

    .hero-astra__iron {
      --object-mask: url("/static/hero/iron.png");
      width: clamp(400px, 34vw, 640px);
      right: -7%;
      top: -32%;
      transform: rotate(-9deg);
      transform-origin: center;
    }
    .hero-astra__driver { --object-mask: url("/static/hero/driver.png"); width: clamp(240px, 21vw, 390px); right: 7%; top: 33%; transform: rotate(17deg); }
    .hero-astra__wedge { --object-mask: url("/static/hero/wedge.png"); width: clamp(220px, 19vw, 350px); right: -4%; top: 54%; transform: rotate(-14deg); z-index: 3; }
    .hero-astra__ball {
      --object-mask: url("/static/hero/ball.png");
      width: clamp(220px, 20vw, 340px);
      left: 7%;
      top: 68%;
      bottom: auto;
      filter: drop-shadow(10px 17px 14px rgb(0 0 0 / .65)) drop-shadow(30px 42px 34px rgb(0 0 0 / .5));
    }
    .hero-astra__ground-shadow {
      position: absolute;
      z-index: 1;
      width: 27%;
      height: 8%;
      left: 9%;
      bottom: -1%;
      border-radius: 50%;
      background: rgb(0 0 0 / .85);
      filter: blur(18px);
      pointer-events: none;
    }
    .hero-astra__ground-shadow--clubs { left:auto; right:-2%; width:28%; }
    .hero-astra__content {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: minmax(0, min(600px, 46%));
      align-content: center;
      align-items: center;
      gap: 32px;
      width: 100%;
      min-height: inherit;
      height: 100%;
      padding: 32px 0 48px 5.5%;
    }
    .hero-astra__copy { align-self: center; }
    .hero-astra h1 {
      font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
      text-transform: uppercase;
      margin: 0 0 .3em;
      font-size: clamp(2.5rem, 4.2vw, 4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -.005em;
    }
    .hero-astra__headline { position: relative; display: inline-block; padding-bottom: .3em; }
    .hero-astra__underline {
      position: absolute;
      left: -1%;
      bottom: 0;
      width: 102%;
      height: 22px;
      overflow: visible;

      pointer-events: none;
    }
    .hero-astra__pencil-stroke { stroke-dasharray:var(--length,500); stroke-dashoffset:var(--length,500); }
    .hero-astra.is-visible .hero-astra__pencil-stroke { animation:pencil-draw .8s ease-out forwards; }
    .hero-astra.is-visible .hero-astra__pencil-stroke--second { animation-delay:.65s; animation-duration:.45s; }
    @keyframes pencil-draw { to { stroke-dashoffset:0; } }
    .hero-astra p {
      font-family: Roboto, Arial, sans-serif;
      letter-spacing: .01em;
      position: relative;
      top: -10px;
      max-width: none;
      margin: 0;
      color: rgb(255 255 255 / .9);
      font-size: 1.18rem;
      white-space: nowrap;
      font-weight: 300;
      line-height: 1.4;
      text-wrap: pretty;
    }
    .hero-astra__links {
      position: absolute;
      left: max(24px, calc(55% - 175px));
      top: 45%;
      transform: translateY(-50%);
      width: clamp(220px, 20.3vw, 300px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
    }
    .hero-astra__links a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      min-height: 64px;
      padding: 18px 24px;
      border: 0;
      border-radius: 999px;
      background: #080b09;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 500;
      letter-spacing: 0;
      white-space: nowrap;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      box-shadow: none;
      transition: none;
    }
    .hero-astra__links a:first-child { background: #fff; color: #080b09; }
    .hero-astra__links a:last-child { border:0; font-size:1rem; min-height:56px; }
    .hero-astra__links svg { width: 22px; height: 22px; flex: 0 0 22px; }
    .hero-astra__links a:focus-visible { outline: 3px solid #35c27a; outline-offset: 5px; }
    .hero-astra__grain {
      position: absolute;
      z-index: 1;
      inset: 0;
      pointer-events: none;
      opacity: .28;
      mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
    }
    .hero-astra__integration {
      position:absolute; inset:0; z-index:3; pointer-events:none;
      background:linear-gradient(to top,rgb(4 10 7 / .2),transparent 26%),radial-gradient(ellipse at 0% 18%,rgb(35 143 83 / .08),transparent 70%);
    }
    /* Fine scene-wide texture, including the copy and product surfaces. */
    .hero-astra__finish {
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
      opacity: .22;
      mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h160v160H0z' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    }
    @media (min-width: 1500px) {
      .hero-astra__links {
        left: 43%;
        width: 31%;
        max-width: 620px;
        flex-direction: row;
        gap: 14px;
      }
      .hero-astra__links a { flex: 1 1 0; min-width: 0; padding: 18px 16px; }
      .hero-astra__links a:last-child { min-height: 64px; }
    }
    @media (max-width: 1200px) {
      .hero-astra__content { width: 100%; grid-template-columns: minmax(0, 46%); gap: 24px; }
      .hero-astra p { white-space: normal; font-size: 1.1rem; }
      .hero-astra__links a { font-size: 1rem; padding: 16px; }
    }
    @media (max-width: 700px) {
      .hero-astra { height: auto; min-height: 500px; }
      .hero-astra__content { width: 100%; min-height: 0; height: auto; padding: 36px 24px 170px; grid-template-columns: 1fr; gap: 24px; }
      .hero-astra h1 { font-size: clamp(2rem, 7vw, 3rem); }
      .hero-astra p { max-width: 370px; font-size: 1.05rem; }
      .hero-astra__links { position: static; transform: none; width: min(100%, 285px); gap: 10px; }
      .hero-astra__links a { min-height: 56px; }
      .hero-astra__iron { width: 68%; right: -29%; top: -7%; opacity: .55; }
      .hero-astra__driver { width: 42%; right: 5%; top: auto; bottom: -8%; }
      .hero-astra__wedge { width: 37%; right: -10%; top: auto; bottom: -12%; }
      .hero-astra__ball { width:47%; left:3%; top:auto; bottom:-9%; }
      .hero-astra__ground-shadow { width: 48%; left: 5%; bottom: 0; }
      .hero-astra__ground-shadow--clubs { left:auto; right:-2%; }
      }
    @media (prefers-reduced-motion: reduce) {
      .hero-astra .hero-astra__pencil-stroke { stroke-dashoffset: 0; animation: none; }
      .hero-astra__blob, .hero-astra__sparkle { animation:none; will-change:auto; }
      .hero-astra__sparkle { opacity:.15; }
      .hero-astra__links a { transition: none; }
      .hero-astra__links a:hover { transform: none; }
    }
  
/* site integration */
.hero-astra__links a:last-child { background: #a8794f; color: #fff; }
.hero-astra { width: 100vw; margin-left: calc(50% - 50vw); }
.hero-astra h1, .hero-astra p { color: #fff; }
/* Buttons float in the gap between the copy and the clubs, centred at any width. */
@media (min-width: 701px) {
  .hero-astra__content { display: flex; align-items: center; gap: 24px; padding-right: calc(7% + min(312px, 16.8vw) + 24px); }
  .hero-astra__copy { flex: 0 0 auto; max-width: 100%; }
  .hero-astra__links { position: static; transform: none; flex: 0 0 auto; margin: 0 auto; }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .hero-astra__copy { max-width: 46%; }
}
@media (min-width: 1500px) {
  .hero-astra__links { flex-direction: row; width: auto; max-width: none; gap: 14px; align-items: center; }
  .hero-astra__links a { flex: 0 0 auto; min-width: 250px; min-height: 64px; padding: 18px 28px; font-size: 1.1rem; }
  .hero-astra__links a:last-child { min-height: 64px; font-size: 1.1rem; }
}
@media (max-width: 700px) {
  .hero-astra__headline { padding-bottom: .55em; }
  .hero-astra__underline { height: 16px; }
}

/* site integration: the second pill is a placeholder, not a link */
.hero-astra__links a.hero-astra__soon { cursor: default; pointer-events: none; }