*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#fff}

.hero{position:relative;min-height:calc(100vh - 118px);height:820px;max-height:980px;overflow:hidden;background:#16391f}
.panel{position:absolute;top:0;bottom:0;width:50%;background-repeat:no-repeat;background-size:cover}
.panel-left{left:0;background-image:url("golf-aerial.png");background-position:center center}
.panel-right{right:0;background-image:url("roundmap-golfer-new.png");background-position:center center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.03) 0%,rgba(0,0,0,.10) 38%,rgba(0,0,0,.70) 74%,rgba(0,0,0,.83) 100%)}
.hero-content{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:min(1060px,88vw);display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.logo-stage{position:relative;display:flex;align-items:center;justify-content:center;width:min(500px,38vw);margin:0 0 8px;padding:10px 20px 8px}
.logo-stage::before{content:"";position:absolute;inset:3% -15% 0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.80) 0%,rgba(255,255,255,.62) 38%,rgba(255,255,255,.22) 67%,rgba(255,255,255,0) 78%);filter:blur(7px);z-index:-1}
.hero-logo{width:100%;height:auto;display:block;filter:none}
.accent{width:82px;height:5px;background:#2dbb42;margin:22px 0 18px;border-radius:3px}
.hero h1{margin:0;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,2.7vw,46px);line-height:1.05;font-weight:700;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.hero p{max-width:790px;margin:18px auto 0;font-size:clamp(17px,1.45vw,26px);line-height:1.36;font-weight:400;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.coming-soon{margin-top:18px;font-size:clamp(18px,1.55vw,28px);font-weight:900;letter-spacing:.035em;text-shadow:0 2px 12px rgba(0,0,0,.65)}
.down-arrow{position:absolute;left:50%;bottom:24px;width:26px;height:26px;transform:translateX(-50%) rotate(45deg);border-right:4px solid #fff;border-bottom:4px solid #fff;z-index:3;opacity:.9}
.footer{height:118px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:24px;padding:16px 42px;background:#fff;color:#315e36}
.footer-logo{width:145px;height:auto;display:block}
.footer-tagline{text-align:center;font-size:18px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.footer-copy-logo{justify-self:end;width:min(360px,100%);height:auto;display:block}

@media(max-width:760px){
  .hero{height:auto;min-height:calc(100svh - 86px);background:#0f2115;overflow:hidden;padding-bottom:34px}
  .panel-left{display:none}
  .panel-right{width:100%;height:100%;background-size:cover;background-position:46% center}
  .hero-overlay{background:linear-gradient(to bottom,rgba(0,0,0,.00) 0%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.40) 54%,rgba(0,0,0,.86) 76%,rgba(0,0,0,.94) 100%)}
  .hero-content{position:relative;left:auto;top:auto;transform:none;width:100%;padding:40vh 26px 46px;min-height:calc(100svh - 86px);justify-content:flex-end}
  .logo-stage{width:min(72vw,330px);margin-bottom:4px;padding:8px 14px 6px}
  .logo-stage::before{inset:5% -12% 1%;background:radial-gradient(ellipse at center,rgba(255,255,255,.82) 0%,rgba(255,255,255,.62) 40%,rgba(255,255,255,.20) 68%,rgba(255,255,255,0) 80%)}
  .accent{width:78px;height:5px;margin:20px 0 18px}
  .hero h1{font-size:clamp(27px,7.2vw,40px);line-height:1.06;max-width:640px}
  .hero p{font-size:clamp(18px,4.55vw,24px);line-height:1.34;max-width:660px;margin-top:18px}
  .coming-soon{font-size:clamp(18px,4.8vw,25px);margin-top:18px;letter-spacing:.025em}
  .desktop-only{display:none}
  .down-arrow{bottom:18px;width:24px;height:24px}
  .footer{height:86px;grid-template-columns:1fr auto;padding:11px 18px;gap:12px}
  .footer-logo{width:138px}
  .footer-tagline{display:none}
  .footer-copy-logo{width:min(235px,100%)}
}

@media(min-width:761px) and (max-height:760px){
  .hero{height:650px;min-height:650px}
  .hero-content{top:51%;width:min(980px,88vw)}
  .logo-stage{width:min(420px,34vw);margin-bottom:4px}
  .accent{margin:14px 0 12px}
  .hero h1{font-size:clamp(26px,2.35vw,38px)}
  .hero p{font-size:clamp(16px,1.25vw,22px);margin-top:12px}
  .coming-soon{font-size:clamp(17px,1.3vw,22px);margin-top:12px}
}

/* v6 refinements: wider desktop view of Pebble Beach photo and smaller mobile composition */
@media(min-width:761px){
  .panel-right{
    /* Show more of the left side of the Pebble Beach photo, including the 18th tee sign. */
    background-position:40% center;
  }
}

@media(max-width:760px){
  .panel-right{
    /* Pull back the mobile photo and keep the 18th-hole context in frame. */
    background-size:auto 92%;
    background-position:42% top;
    background-color:#152b1b;
  }
  .hero-content{
    padding:34vh 20px 40px;
  }
  .logo-stage{
    width:min(68vw,300px);
    margin-bottom:2px;
  }
  .accent{
    width:68px;
    height:4px;
    margin:15px 0 14px;
  }
  .hero h1{
    font-size:clamp(23px,5.9vw,32px);
    line-height:1.08;
    max-width:560px;
  }
  .hero p{
    font-size:clamp(16px,3.9vw,20px);
    line-height:1.32;
    max-width:590px;
    margin-top:14px;
  }
  .coming-soon{
    font-size:clamp(16px,4.1vw,21px);
    margin-top:14px;
  }
}

/* v7: stronger mobile hero pullback. Desktop unchanged. */
@media(max-width:760px){
  .panel-right{
    background-size:auto 72%;
    background-position:42% 4%;
  }
  .hero-content{
    padding-top:31vh;
  }
}

/* v8: much stronger mobile photo pullback. Desktop unchanged. */
@media(max-width:760px){
  .panel-right{
    background-size:auto 52%;
    background-position:48% 3%;
  }
}



/* v14: mobile only. Shift golfer photo right and slightly up to show more of the full 18th tee sign. */
@media(max-width:760px){
  .panel-right{
    background-position:42% 0%;
  }
}

/* v15: new brand artwork and updated golfer/card image. */
@media(max-width:760px){
  .panel-right{background-size:auto 58%;background-position:48% 0%}
  .hero-content{padding-top:31vh}
  .logo-stage{transform:translateY(-34px);margin-bottom:-24px}
}

/* v18: reduce and tighten desktop logo halo so the 18th tee sign remains visible.
   Mobile retains nearly the same contrast treatment, reduced only slightly. */
.logo-stage::before{
  inset:8% -7% 5%;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.48) 0%,
    rgba(255,255,255,.38) 30%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.08) 66%,
    rgba(255,255,255,0) 76%);
  filter:blur(8px);
}
@media(max-width:760px){
  .logo-stage::before{
    inset:-3% -17% -4%;
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.84) 0%,
      rgba(255,255,255,.73) 32%,
      rgba(255,255,255,.45) 54%,
      rgba(255,255,255,.16) 70%,
      rgba(255,255,255,0) 82%);
    filter:blur(10px);
  }
}


/* v19: desktop halo is targeted only around the black ROUNDMAP / GOLF wordmark.
   The green circular mark and green tagline are no longer washed by a broad halo.
   Mobile keeps the v18 treatment, which was already working well. */
@media(min-width:761px){
  .logo-stage::before{
    top:49%;
    right:-4%;
    bottom:18%;
    left:-4%;
    border-radius:50%;
    background:radial-gradient(
      ellipse at center,
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,.52) 32%,
      rgba(255,255,255,.26) 56%,
      rgba(255,255,255,.08) 72%,
      rgba(255,255,255,0) 84%
    );
    filter:blur(7px);
  }
}


/* v20 desktop: no glow. A very subtle neutral contrast veil sits only behind
   the ROUNDMAP/GOLF portion, reducing background detail without looking lit. */
@media(min-width:761px){
  .logo-stage::before{
    top:51%;
    right:2%;
    bottom:20%;
    left:2%;
    border-radius:46%;
    background:rgba(225,225,218,.16);
    filter:blur(11px);
    box-shadow:none;
  }
}


/* v21 desktop: no white glow. Locally soften and dim only the busy background
   directly behind the ROUNDMAP/GOLF wordmark. Feathered, transparent edges. */
@media(min-width:761px){
  .logo-stage::before{
    top:50%;
    right:0%;
    bottom:18%;
    left:0%;
    border-radius:50%;
    background:radial-gradient(
      ellipse at center,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.075) 42%,
      rgba(0,0,0,.035) 65%,
      rgba(0,0,0,0) 82%
    );
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    filter:none;
    box-shadow:none;
  }
}


/* v22 desktop: clean composition. No artificial logo glow/veil/blur.
   Shift the right-side golfer/tee-sign image farther right to clear the wordmark. */
@media(min-width:761px){
  .logo-stage::before{
    display:none !important;
    content:none !important;
    background:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    box-shadow:none !important;
  }

  .hero-right{
    background-position:60% center !important;
  }
}


/* v23 DESKTOP: three-panel hero.
   Left = Torrey Pines female golfer
   Center = clean aerial green
   Right = Pebble Beach male golfer
   The full logo stays entirely inside the center green panel.
   The center green is NOT darkened behind the logo. */
@media(min-width:761px){
  .panel{
    width:33.333333%;
    background-size:cover;
    background-repeat:no-repeat;
    top:0;
    bottom:0;
  }

  .panel-left{
    left:0;
    right:auto;
    display:block;
    background-image:url("roundmap-golfer-female-torrey.png");
    background-position:31% center;
  }

  .panel-center{
    display:block;
    left:33.333333%;
    background-image:url("golf-aerial.png");
    background-position:center center;
  }

  .panel-right{
    left:66.666666%;
    right:auto;
    background-image:url("roundmap-golfer-new.png");
    background-position:57% center !important;
  }

  /* Keep the upper hero, especially the center green behind the logo, bright.
     Darkening begins only below the logo to support the white copy. */
  .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,.18) 58%,
      rgba(0,0,0,.66) 76%,
      rgba(0,0,0,.84) 100%
    );
  }

  .logo-stage{
    width:min(30vw,430px);
    max-width:90%;
  }

  .logo-stage::before{
    display:none !important;
    content:none !important;
    background:none !important;
    filter:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }
}

/* v23 MOBILE: preserve the existing successful single Pebble Beach image.
   The new left/center desktop panels are hidden. */
@media(max-width:760px){
  .panel-left,
  .panel-center{
    display:none !important;
  }
  .panel-right{
    left:0;
    right:0;
    width:100%;
  }
}


/* v24 final desktop composition */
@media(min-width:761px){
  .panel-left{
    background-image:url("roundmap-golfer-female-torrey-final.png") !important;
    background-position:center center !important;
  }

  /* Reframe the aerial so the light bunker sits behind most of the dark
     ROUNDMAP/GOLF wordmark. No dark overlay behind the logo. */
  .panel-center{
    background-position:18% 22% !important;
    background-size:190% auto !important;
  }

  .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 49%,
      rgba(0,0,0,.16) 60%,
      rgba(0,0,0,.64) 77%,
      rgba(0,0,0,.84) 100%
    ) !important;
  }

  .logo-stage::before{
    display:none !important;
    content:none !important;
  }
}


/* v25 MOBILE: aerial green + bunker only. No golfer images on mobile. */
@media(max-width:760px){
  .panel-left,
  .panel-right{
    display:none !important;
  }

  .panel-center{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:url("golf-aerial.png") !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    /* Favor the bunker/green composition behind the logo. */
    background-position:20% 18% !important;
  }

  /* Keep the upper logo area bright; darken only lower area for white copy. */
  .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 47%,
      rgba(0,0,0,.18) 58%,
      rgba(0,0,0,.70) 75%,
      rgba(0,0,0,.88) 100%
    ) !important;
  }

  .logo-stage::before{
    display:none !important;
    content:none !important;
  }
}


/* v26: restore intended sand-trap framing.
   Same aerial framing principle on desktop center and mobile full hero.
   No glow, blur, or darkening over the logo. */
@media(min-width:761px){
  .panel-center{
    background-image:url("golf-aerial.png") !important;
    background-size:auto 112% !important;
    background-position:18% 58% !important;
    background-repeat:no-repeat !important;
  }
}

@media(max-width:760px){
  .panel-left,
  .panel-right{
    display:none !important;
  }

  .panel-center{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:url("golf-aerial.png") !important;
    background-size:auto 112% !important;
    background-position:18% 58% !important;
    background-repeat:no-repeat !important;
  }

  .logo-stage::before{
    display:none !important;
    content:none !important;
  }
}


/* v27: use the EXACT approved center-panel composition so the sand trap sits
   behind ROUNDMAP/GOLF exactly as approved. No percentage guessing. */
@media(min-width:761px){
  .panel-center{
    background-image:url("approved-center-panel.png") !important;
    background-size:cover !important;
    background-position:center top !important;
  }

  /* Branding is already part of the approved center-panel artwork. */
  .logo-stage{
    visibility:hidden !important;
  }
}

/* Mobile uses the same approved center artwork, cropped to the phone viewport.
   No golfers. */
@media(max-width:760px){
  .panel-left,
  .panel-right{
    display:none !important;
  }

  .panel-center{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:url("approved-center-panel.png") !important;
    background-size:cover !important;
    background-position:center top !important;
  }

  .logo-stage{
    visibility:hidden !important;
  }
}

/* v28 ONE CHANGE ONLY: shift desktop male panel slightly right
   so the card is approximately centered in the right third. */
@media(min-width:761px){
  .panel-right{
    background-position:36% center !important;
  }
}


/* v29 ONE CHANGE ONLY: remove center white-text ghosting.
   The approved center image contains an old baked copy of the white text.
   Mask only that lower text area; live HTML text remains unchanged. */
@media(min-width:761px){
  .panel-center::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:66%;
    bottom:0;
    background:linear-gradient(
      to bottom,
      rgba(5,18,8,.82) 0%,
      rgba(3,12,5,.91) 28%,
      rgba(0,0,0,.96) 100%
    );
    pointer-events:none;
  }
}


/* v30 ONE CHANGE ONLY: remove the two green lines beneath the center logo. */
@media(min-width:761px){
  .accent{
    display:none !important;
  }
  .panel-center::after{
    top:63.5% !important;
  }
}


/* v31 FINAL: approved revised woman only.
   Everything else remains exactly as v30. */
@media(min-width:761px){
  .panel-left{
    background-image:url("roundmap-golfer-female-final-v31.png") !important;
    background-position:center center !important;
  }
}


/* v33 CLEAN CENTER
   Clean red-flag aerial image as the center background.
   Logo and all white copy remain separate live HTML layers.
   No baked text, no mask, no green separator lines. */

.panel-center::after{
  display:none !important;
  content:none !important;
}

.accent{
  display:none !important;
}

.logo-stage{
  visibility:visible !important;
}

/* Desktop: preserve the existing 3-panel layout and left/right positioning. */
@media(min-width:761px){
  .panel-center{
    background-image:url("center-aerial-red-flag.png") !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  /* Keep the logo centered over the middle panel. */
  .logo-stage{
    width:min(30vw,430px) !important;
  }

  /* Keep the image visible while giving the live white copy contrast
     across all three panels. No solid mask/block. */
  .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 49%,
      rgba(0,0,0,.16) 60%,
      rgba(0,0,0,.58) 78%,
      rgba(0,0,0,.72) 100%
    ) !important;
  }
}

/* Mobile: same clean center golf image, no golfers, with live logo + live copy. */
@media(max-width:760px){
  .panel-left,
  .panel-right{
    display:none !important;
  }

  .panel-center{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-image:url("center-aerial-red-flag.png") !important;
    background-size:cover !important;
    background-position:center top !important;
  }

  .logo-stage{
    visibility:visible !important;
  }

  .hero-overlay{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.18) 58%,
      rgba(0,0,0,.68) 77%,
      rgba(0,0,0,.84) 100%
    ) !important;
  }
}

/* v34 APPROVED LEFT MASTER + LOGO VERTICAL ALIGNMENT ONLY */
@media(min-width:761px){
  .panel-left{
    background-image:url("roundmap-left-master-clean.png") !important;
    background-size:cover !important;
    background-position:left center !important;
  }
  .logo-stage{
    transform:translateY(-28px) !important;
    margin-bottom:-20px !important;
  }
}
@media(max-width:760px){
  .logo-stage{
    transform:translateY(-42px) !important;
    margin-bottom:-38px !important;
  }
}

/* v35: raise the center aerial framing slightly and raise the live logo again.
   Photography remains clean. No text or overlays are baked into any image. */
@media(min-width:761px){
  .panel-center{
    background-position:center calc(50% - 18px) !important;
  }
  .logo-stage{
    transform:translateY(-48px) !important;
    margin-bottom:-40px !important;
  }
}

@media(max-width:760px){
  .panel-center{
    /* Slight zoom gives the portrait aerial enough vertical travel to move upward
       while still fully covering the phone hero. */
    background-size:auto 108% !important;
    background-position:center 70% !important;
  }
  .logo-stage{
    transform:translateY(-67px) !important;
    margin-bottom:-63px !important;
  }
}

/* v36: move ONLY the clean center aerial photograph downward so the bunker
   sits lower behind the live logo. Applies to desktop and mobile. */
@media(min-width:761px){
  .panel-center{
    background-position:center top !important;
  }
}

@media(max-width:760px){
  .panel-center{
    background-size:auto 108% !important;
    background-position:center top !important;
  }
}

/* v36 final tuning: enlarge from the TOP edge so the bunker itself extends
   substantially farther downward behind the unchanged live logo. */
@media(min-width:761px){
  .panel-center{
    background-size:auto 120% !important;
    background-position:center top !important;
  }
}
@media(max-width:760px){
  .panel-center{
    background-size:auto 118% !important;
    background-position:center top !important;
  }
}

/* v40 ONE CHANGE ONLY: slide the entire approved left master image left
   so the Roundmap card is centered within the left desktop panel. */
@media(min-width:761px){
  .panel-left{
    background-position:18% center !important;
  }
}