/* chrome.css: header, nav, footer helpers and the title icons.
   Loaded last on every page, so it wins over the older layers. Edit header and title styling here only. */

/* ---- title icons (replace the old dash before each section title) ---- */
.eyebrow::before{content:none!important;display:none!important}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.ey-i{flex:none;width:32px;height:32px;padding:7px;border-radius:10px;background:var(--gold-soft);color:var(--copper);border:1px solid var(--gold-mid);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.hero .ey-i,.phero .ey-i,.pb .ey-i,.cta-band .ey-i,[class*="dark"] .ey-i{background:rgba(252,204,36,.16);border-color:rgba(252,204,36,.4);color:var(--gold)}

/* ---- header ---- */
.hdr .wrap{gap:20px}
.hdr .ph-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-right:7px;vertical-align:-3px;color:var(--accent)}
.hdr-phone{display:none;align-items:center;font-weight:700;color:var(--ink);white-space:nowrap}
@media (min-width:1400px){.hdr-phone{display:inline-flex}}
.nav a[aria-current="page"]{color:var(--accent);background:var(--sage)}
.nav .has-sub{position:relative}
.nav .has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.nav .sub{list-style:none;margin:0;padding:8px;position:absolute;left:0;top:100%;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -22px rgba(0,42,27,.45);display:none;z-index:300}
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav .sub a{padding:10px 12px;font-size:14.5px;border-radius:9px}
.nav .has-sub:hover>.sub,.nav .has-sub:focus-within>.sub{display:block}
.nav .has-sub:hover>a::after,.nav .has-sub:focus-within>a::after{transform:rotate(225deg)}
@media (min-width:901px) and (max-width:1100px){.quote-btn .qlabel{display:none}.nav{gap:0}.nav a{padding:8px 7px;font-size:14px}.hdr .wrap{gap:12px}}
@media (min-width:901px) and (max-width:959px){.quote-btn{display:none}}
@media (max-width:900px){
  .nav .has-sub>a::after{display:none}
  .nav .sub{display:block;position:static;min-width:0;border:0;box-shadow:none;padding:0 0 6px 14px;background:transparent}
  .nav .sub::before{display:none}
  .nav .sub a{font-size:16px;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--muted)}
  .nav a[aria-current="page"]{background:transparent}
}
/* product photos in page heroes: show the whole product, never crop it */
.phero-product img{aspect-ratio:auto!important;max-height:560px;object-fit:cover}
.phero-product{background:#0b2a1f}
.phero-portrait{max-width:440px;justify-self:center;width:100%}
.phero-portrait img{max-height:none!important;aspect-ratio:4/5!important;object-fit:cover}
.cats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cats{grid-template-columns:1fr}}
@media (max-width:860px){#build-options .why-grid{grid-template-columns:minmax(0,1fr)!important}}

/* pricing chips and checkout button */
.tier-price{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:999px;background:var(--accent);color:#fff;font:700 .82rem/1 Inter,system-ui,sans-serif;letter-spacing:.02em}
.tier-buy{margin-top:16px}
#build-options .why-card{display:flex;flex-direction:column;align-items:flex-start}

/* price hook band and upload band */
.hook{background:linear-gradient(135deg,#00281b,var(--accent));color:#fff}
.hook h2{color:#fff}.hook .lede{color:rgba(255,255,255,.82)}.hook .eyebrow{color:var(--gold)}
.hook-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:40px;align-items:center}
.hook-pts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.hook-pts li{position:relative;padding-left:28px;color:#fff;font-weight:500}
.hook-pts li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--gold)}
.hook-card{background:#fff;color:var(--ink,#16241d);border-radius:20px;padding:28px;text-align:center;display:grid;gap:12px;justify-items:center;box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
.hook-from{font:600 .95rem Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--copper)}
.hook-num{font:700 clamp(3.4rem,9vw,5rem)/1 Spectral,Georgia,serif;color:var(--accent)}
.hook-per{margin-top:-6px;color:#55655d;font-weight:500}
.hook-card .btn{width:100%}
.upl{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.upl>div{flex:1 1 420px}
@media(max-width:860px){.hook-in{grid-template-columns:minmax(0,1fr);gap:28px}}

/* one line buttons on mobile: label never wraps */
.btn,.cta-lg,button.add,.mcta a,.hook-card .btn{white-space:nowrap}
@media(max-width:640px){
  .btn,.btn-lg{padding:0 14px;font-size:clamp(13px,3.9vw,15.5px);gap:6px;max-width:100%}
  .btn svg{width:16px;height:16px}
  .cta-lg{padding:12px 16px;gap:10px;max-width:100%}
  .cta-lg b{font-size:clamp(14px,4.2vw,17px);white-space:nowrap}
  .cta-lg small{display:none}
  button.add{padding:0 12px;font-size:13px}
  .hero-cta,.phero-cta{flex-direction:column;align-items:stretch}
  .hero-cta>*,.phero-cta>*,.hero-cta .btn{width:100%;flex:0 0 auto}
}

/* how each marker is made */
.made-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:m}
.made-steps li{counter-increment:m;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.made-steps li:before{content:counter(m);width:34px;height:34px;border-radius:50%;background:var(--accent,#c8102e);color:#fff;font-weight:700;display:grid;place-items:center;margin-bottom:4px}
.made-steps b{font-size:1.02rem}
.made-steps span{font-size:.92rem;line-height:1.45;opacity:.85}
.pay-note{font-size:.88rem;opacity:.8;margin-top:8px}

@media(max-width:900px){.made-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.made-steps{grid-template-columns:1fr}}
@media(max-width:640px){.ms-seg.fin{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ms-seg.fin button{font-size:.86rem;padding-inline:8px}}

/* real product photos */
.views-a{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.views-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;margin-top:14px}
.views-a figure,.views-b figure{margin:0;border-radius:18px;overflow:hidden;background:#1c1f1d;border:1px solid var(--line)}
.views-a img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.views-b img{display:block;width:100%;height:100%;aspect-ratio:1.2/1;object-fit:cover}
@media(max-width:700px){.views-a{grid-template-columns:repeat(2,minmax(0,1fr))}.views-a figure:last-child{grid-column:1/-1}.views-a figure:last-child img{aspect-ratio:16/10}.views-b{grid-template-columns:minmax(0,1fr)}}
.coats img{aspect-ratio:1/1!important}

.crew .dial{display:inline-block;margin-top:8px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:none;white-space:nowrap}.crew .dial:hover{text-decoration:underline}

.paints{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.paints li{text-align:center}.paints img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid var(--line)}.paints b{display:block;margin-top:8px;font-size:15px}
@media(max-width:900px){.paints{grid-template-columns:repeat(3,minmax(0,1fr))}}
.made-steps .mk-ph{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin-top:10px}

.paints img{height:auto!important;aspect-ratio:1/1!important}
.mk-fig{margin:28px 0 0;max-width:860px}.mk-fig img{display:block;width:100%!important;height:auto!important;aspect-ratio:3/2;object-fit:cover;border-radius:18px}

/* 2D rotation: no 3D transforms, works in every browser */
.ms-world{perspective:none!important}
.turn{transform:none!important;transform-style:flat!important;transition:none!important}
.face.f,.face.b{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;will-change:transform}
.face.b{visibility:hidden}
.edge{display:none!important}
.slab{left:-7px;width:14px;transform:scaleX(0);transform-origin:50% 50%}
.stake.b{display:none}

/* real golf course backdrop for the marker studio */
.sc-up{background:#6fb3e6 url(/assets/studio-bg-course.webp) center/cover no-repeat!important}
.sc-up::after{display:none!important}
.sc-gr{background:#4a8f3a url(/assets/studio-bg-grass.webp) center/cover no-repeat!important}
.ms-stage{background:#6fb3e6!important}
.ms-shadow{background:radial-gradient(closest-side,rgba(0,25,10,.55),rgba(0,25,10,0))!important}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}.ms-stage{user-select:none;-webkit-user-select:none}

.made-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start;margin-top:28px}
.made-wrap .mk-fig{margin:0;max-width:none;position:sticky;top:96px}.made-wrap .mk-fig img{aspect-ratio:4/5;object-position:72% 50%}
.made-wrap .made-steps{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.made-wrap{grid-template-columns:1fr}.made-wrap .mk-fig{position:static}.made-wrap .mk-fig img{aspect-ratio:3/2;object-position:70% 50%}}
@media(max-width:560px){.made-wrap .made-steps{grid-template-columns:1fr}}

.phero-art img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;box-shadow:0 24px 50px -28px rgba(0,30,18,.5)}

.proc{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:1100px){.proc{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:700px){.proc{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:480px){.proc{grid-template-columns:1fr!important}}
.gal{grid-auto-rows:minmax(0,200px)}