/* Homepage design pass, 2026-10-14. Loaded last on index.html only. */

/* ---------- Hero ---------- */
.hero-lede {
  font-family: var(--display) !important;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255, 253, 248, 0.92) !important;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-lede::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.hero-copy .kicker { letter-spacing: 0.22em; }

/* Trust strip with icons */
.trust-strip { background: rgba(3, 19, 14, 0.58) !important; }
.trust-strip .wrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}
.trust-strip .trust-item {
  display: grid !important;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  justify-content: start !important;
  padding: 18px 28px !important;
  border-right: 1px solid var(--line2);
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.trust-strip .trust-item:last-child { border-right: 0; }
.trust-strip .al-ico {
  grid-row: 1 / span 2;
  width: 28px !important;
  height: 28px !important;
  stroke: var(--gold2) !important;
  stroke-width: 1.3 !important;
}
.trust-strip b {
  color: var(--paper);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
}
.trust-strip small {
  margin-top: 3px;
  color: rgba(255, 253, 248, 0.62);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .trust-strip .wrap { grid-template-columns: repeat(3, 1fr) !important; padding: 0 !important; }
  .trust-strip .trust-item {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 6px;
    padding: 16px 6px 15px !important;
    border-right: 1px solid var(--line2) !important;
    border-bottom: 0 !important;
    text-align: center !important;
  }
  .trust-strip .trust-item:last-child { border-right: 0 !important; }
  .trust-strip .al-ico { grid-row: auto; width: 24px !important; height: 24px !important; }
  .trust-strip b { font-size: 15px; }
  .trust-strip small { display: none; }
}

/* Header currency control: tucked to the far top right on desktop */
.al-currency--header {
  order: 99;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid currentColor;
  border-left-color: rgba(127, 127, 127, 0.28);
  font-size: 0.56rem !important;
  opacity: 0.78;
}
.al-currency--header > span { display: none; }
.al-currency--header:hover { opacity: 1; }

/* Inline currency switch beside the holiday prices */
.collection-side { display: grid; justify-items: end; gap: 12px; }
.currency-inline .al-currency {
  color: var(--paper);
  font-size: 0.66rem;
  padding: 6px 12px;
  border: 1px solid var(--line2);
}
.currency-inline .al-currency > span { display: none; }
@media (max-width: 900px) { .collection-side { justify-items: start; } }

/* ---------- Holidays ---------- */
.holiday-fit {
  font-family: var(--display) !important;
  font-size: 18px !important;
  font-style: italic;
  line-height: 1.35 !important;
  color: rgba(255, 253, 248, 0.86) !important;
}
.holiday-fit b {
  margin-right: 4px !important;
  color: var(--gold2) !important;
  font-family: var(--display) !important;
  font-size: 18px !important;
  font-style: italic;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Image reveal: a wipe and settle as each holiday scrolls into view */
.holiday-row .holiday-img { position: relative; }
.holiday-row.reveal .holiday-img img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.14);
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), transform 1.8s cubic-bezier(.2, .7, .2, 1) !important;
}
.holiday-row.reveal.is-visible .holiday-img img { clip-path: inset(0 0 0 0); transform: scale(1); }
.holiday-row.reveal.is-visible:hover .holiday-img img { transform: scale(1.05); transition: transform 1.2s ease !important; }

/* Build your own feature */
.custom-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  margin-top: 56px;
  border: 1px solid var(--line2);
  background: rgba(255, 253, 248, 0.03);
  color: var(--paper);
  text-decoration: none;
  overflow: hidden;
}
.custom-feature__media { position: relative; overflow: hidden; min-height: 360px; display: block; }
.custom-feature__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: al-drift 22s ease-in-out infinite alternate;
}
.custom-feature__copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; }
.custom-feature__kicker {
  color: var(--gold2); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.custom-feature__title {
  margin-top: 16px; font-family: var(--display); font-size: clamp(32px, 3.2vw, 46px); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em;
}
.custom-feature__title em { color: var(--gold2); }
.custom-feature__text { margin-top: 18px; max-width: 440px; color: rgba(255, 253, 248, 0.74); font-size: 15px; line-height: 1.7; }
.custom-feature__btn { align-self: flex-start; margin-top: 28px; }
.custom-feature:hover .custom-feature__btn { filter: brightness(1.06); }
@media (max-width: 900px) {
  .custom-feature { grid-template-columns: 1fr; margin-top: 40px; }
  .custom-feature__media { min-height: 240px; }
  .custom-feature__copy { padding: 30px 24px 34px; }
}

/* ---------- Series photos: slow drift ---------- */
.series-feature__images img { animation: al-drift 26s ease-in-out infinite alternate; }
.series-feature__images figure:nth-child(2) img { animation-delay: -9s; }
.series-feature__images figure:nth-child(3) img { animation-delay: -17s; }
@keyframes al-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

/* ---------- Choose what you need: tighter ---------- */
.plan-ways { padding: 76px 0 80px !important; }
.plan-ways .ways-grid { margin-top: 36px !important; }
.plan-ways .way { min-height: 0 !important; padding: 26px 28px 28px !important; }
.plan-ways .way h3 { margin-top: 12px !important; font-size: 28px !important; }
.plan-ways .way-icon { margin: 14px 0 0 !important; }
.plan-ways .way .arrow { margin-top: 20px !important; }
@media (max-width: 760px) {
  .plan-ways { padding: 56px 0 60px !important; }
  .plan-ways .way { padding: 22px 0 24px !important; }
}

/* ---------- Founder: stats instead of bullets ---------- */
.founder-copy .title em { color: var(--gold); font-style: italic; }
.founder-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 6px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.founder-stats div { padding: 22px 18px 20px 0; }
.founder-stats div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.founder-stats dt {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(44px, 4.6vw, 62px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.founder-stats dd {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.portrait-wrap { position: relative; }
.portrait-inset {
  position: absolute;
  left: -64px;
  bottom: -46px;
  z-index: 3;
  width: 46%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border: 6px solid var(--ivory2);
  box-shadow: 0 24px 60px rgba(1, 16, 12, 0.28);
}
.portrait-inset img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.founder .portrait-wrap.reveal .portrait-inset { transform: translateY(26px); opacity: 0; transition: transform 1.1s .35s cubic-bezier(.2,.7,.2,1), opacity .9s .35s; }
.founder .portrait-wrap.reveal.is-visible .portrait-inset { transform: none; opacity: 1; }
@media (max-width: 900px) {
  .founder-stats dt { font-size: 40px; }
  .founder-stats div { padding: 18px 10px 16px 0; }
  .founder-stats div + div { padding-left: 14px; }
  .founder-stats dd { font-size: 10px; letter-spacing: 0.1em; }
  .portrait-inset { left: -8px; bottom: -28px; width: 52%; border-width: 4px; }
  .founder .portrait-wrap { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-feature__media img, .series-feature__images img { animation: none !important; }
  .holiday-row.reveal .holiday-img img { clip-path: none !important; transform: none !important; }
}

/* reset inherited link styles inside the dark collection */
.collection a.custom-feature {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr;
  width: 100%;
  padding: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: 400 !important;
}
.collection a.custom-feature::after, .collection a.custom-feature::before { display: none !important; content: none !important; }
.collection a.custom-feature .custom-feature__kicker { letter-spacing: 0.2em; text-transform: uppercase; }
.collection a.custom-feature .custom-feature__btn { letter-spacing: 0.14em; text-transform: uppercase; }
@media (max-width: 900px) { .collection a.custom-feature { grid-template-columns: 1fr; } }

/* founder inset: bigger, and the portrait tag moves up out of its way */
.portrait-inset { width: 62% !important; left: -120px !important; bottom: -70px !important; }
.founder .portrait-tag { top: 18px !important; right: 18px !important; left: auto !important; bottom: auto !important; }
.founder .pga-mark { top: auto !important; bottom: 18px !important; right: 18px !important; left: auto !important; }
.founder { padding-bottom: 150px !important; }
@media (max-width: 900px) {
  .portrait-inset { width: 58% !important; left: -6px !important; bottom: -40px !important; }
  .founder { padding-bottom: 96px !important; }
}
.founder .pga-mark { top: 18px !important; left: 18px !important; bottom: auto !important; right: auto !important; }

/* hero line: no dash rule */
.hero-lede::before{display:none!important;content:none!important}
.hero-lede{gap:0!important}
/* golfers photo: keep the players in frame */
.proof-thumb img[src*="putting-golfers"]{object-position:center 60%!important}
.trust-item b{white-space:nowrap}
@media (max-width:700px){.trust-item b{font-size:13px!important;white-space:normal;line-height:1.2}}
.trust-item{align-items:center!important}
.trust-item b{margin:0!important}
.founder-stats dt{font-size:clamp(34px,3.4vw,46px)!important;white-space:nowrap}
@media (max-width:640px){.founder-stats dt{font-size:26px!important}.founder-stats dd{font-size:9.5px!important}}
.founder-stats dt{font-variant-numeric:lining-nums}
.course-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.course-card .course-body{padding:14px 0 0!important;background:transparent!important;border-bottom:1px solid var(--line)}
/* Crest placements */
.enquiry-crest{display:block;width:104px;height:auto;margin:6px 0 16px;opacity:.95}
.collection{position:relative;isolation:isolate}
.collection::after{content:"";position:absolute;z-index:-1;right:-60px;bottom:-40px;width:520px;height:480px;background:url("./assets/brand/asean-links-crest-white-900.webp") no-repeat center/contain;opacity:.04;pointer-events:none}
@media (max-width:700px){.collection::after{width:300px;height:280px;right:-50px;bottom:-30px}}
/* Hero caption: tucked bottom-right, above the trust strip */
.hero-caption{position:absolute!important;right:28px;bottom:84px;z-index:3;margin:0!important;text-align:right!important;font-size:10.5px!important;letter-spacing:.16em!important;color:rgba(255,253,248,.62)!important;text-shadow:0 1px 6px rgba(0,0,0,.45)}
@media (max-width:700px){.hero-caption{right:16px;left:auto;bottom:118px;font-size:9.5px!important}}
/* Trust strip: each item centred in its third */
.trust-strip .trust-item{justify-content:center!important;text-align:center}
/* Founder stats: equal, centred columns */
.founder-stats{grid-template-columns:repeat(3,1fr)!important}
.founder-stats div,.founder-stats div+div{padding:22px 12px 20px!important;text-align:center}
.founder-stats div:first-child{text-align:left;padding-left:0!important}
.founder-stats div,.founder-stats div+div{text-align:left!important;padding:22px 16px 20px 24px!important}
.founder-stats div:first-child{padding-left:0!important}
.trust-strip .trust-item{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px}
@media (max-width:700px){.trust-strip .trust-item{flex-direction:column;gap:6px}.hero-caption{bottom:90px!important}}
.founder-stats div,.founder-stats div+div,.founder-stats div:first-child{text-align:center!important;padding:22px 12px 20px!important}
@media (max-width:700px){.hero-caption{top:86px!important;bottom:auto!important;right:16px!important}}
.collection{overflow:hidden}
/* Hero: crisp photo (no zoom), two-line headline */
.hero-media img,.hero-media img.is-on{transform:none!important}
.hero h1{font-size:clamp(50px,7vw,100px)!important;line-height:.98!important}
/* Mobile hero: show the photo, text below */
@media (max-width:700px){
  .hero{min-height:0!important;display:block!important}
  .hero-media{position:relative!important;inset:auto!important;height:auto!important;aspect-ratio:3/2;width:100%}
  .hero-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .hero:after{display:none!important}
  .hero-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,19,14,.6) 0,rgba(3,19,14,0) 32%,rgba(3,19,14,0) 62%,#062b21 100%)}
  .hero-in{min-height:0!important;padding:0 0 34px!important;margin-top:-34px}
  .hero{background:#062b21!important}
  .hero h1{font-size:clamp(42px,12.5vw,54px)!important;margin-top:14px!important}
  .hero-lede{margin-top:14px!important}
  .hero-actions{margin-top:24px!important}
  .hero-caption{display:none!important}
  .trust-strip{background:#04231a!important;backdrop-filter:none!important}
}
@media (max-width:700px){.hero-media{aspect-ratio:4/3!important}.hero-in{margin-top:-18px!important}.hero-media img{object-position:center 60%}}
/* Choose what you need: links sit on one line */
.plan-ways .way{display:flex!important;flex-direction:column}
.plan-ways .way .arrow{margin-top:auto!important;padding-top:20px;align-self:flex-start}
.plan-ways .way p{margin-bottom:0}