/* Golf in Scotland -- shared stylesheet, generated pages all link to this one file */
:root{
  --linen:#FBFBF9;
  --sand:#EDEDE7;
  --ink:#1C2620;
  --ink-soft:#4A554E;
  --fairway:#2C5A49;
  --fairway-deep:#1E4235;
  --fairway-bright:#3E7A63;
  --gorse:#BD8226;
  --gorse-bright:#D9A039;
  --mist:#7C8A80;
  --line:rgba(28,38,32,0.10);
  --card:#FFFFFF;
  --shadow: 0 1px 2px rgba(28,38,32,0.06), 0 8px 24px -12px rgba(28,38,32,0.18);
  --focus: #1E4235;
  --pill-open-bg: rgba(44,90,73,0.16);
  --pill-wait-bg: rgba(189,130,38,0.20);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --linen:#141C17; --sand:#1B241D; --ink:#EAE6D9; --ink-soft:#AEB9AF;
    --fairway:#5EA084; --fairway-deep:#3E7A63; --fairway-bright:#79BB9E;
    --gorse:#E3A748; --gorse-bright:#F0BC63; --mist:#8C978F;
    --line:rgba(234,230,217,0.14); --card:#1B241D;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
    --focus: #79BB9E;
    --pill-open-bg: rgba(94,160,132,0.22); --pill-wait-bg: rgba(227,167,72,0.24);
  }
}
:root[data-theme="dark"]{
  --linen:#141C17; --sand:#1B241D; --ink:#EAE6D9; --ink-soft:#AEB9AF;
  --fairway:#5EA084; --fairway-deep:#3E7A63; --fairway-bright:#79BB9E;
  --gorse:#E3A748; --gorse-bright:#F0BC63; --mist:#8C978F;
  --line:rgba(234,230,217,0.14); --card:#1B241D;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
  --focus: #79BB9E;
  --pill-open-bg: rgba(94,160,132,0.22); --pill-wait-bg: rgba(227,167,72,0.24);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--linen); color:var(--ink);
  font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:"Fraunces", Georgia, "Times New Roman", serif; font-weight:600; text-wrap:balance; margin:0; color:var(--ink); }
a{color:inherit;}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
.eyebrow{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fairway); font-weight:500; }
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }

/* Fades/rises page elements in as they scroll into view -- assets/site.js
   adds "is-visible" once each one crosses the viewport. Starts revealed if
   JS never runs (see the <noscript> rule in build.js) so nothing is ever
   permanently hidden. */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.is-visible{opacity:1; transform:none;}
/* A light stagger so cards in the same row/grid don't all arrive in lockstep. */
.row-track > .reveal:nth-child(2), .event-grid > .reveal:nth-child(2), .course-grid > .reveal:nth-child(2), .package-grid > .reveal:nth-child(2){transition-delay:.06s;}
.row-track > .reveal:nth-child(3), .event-grid > .reveal:nth-child(3), .course-grid > .reveal:nth-child(3), .package-grid > .reveal:nth-child(3){transition-delay:.12s;}
.row-track > .reveal:nth-child(4), .event-grid > .reveal:nth-child(4), .course-grid > .reveal:nth-child(4), .package-grid > .reveal:nth-child(4){transition-delay:.18s;}
.row-track > .reveal:nth-child(5), .event-grid > .reveal:nth-child(5), .course-grid > .reveal:nth-child(5), .package-grid > .reveal:nth-child(5){transition-delay:.24s;}
.row-track > .reveal:nth-child(n+6), .event-grid > .reveal:nth-child(n+6), .course-grid > .reveal:nth-child(n+6), .package-grid > .reveal:nth-child(n+6){transition-delay:.3s;}

.shell{max-width:1180px; margin:0 auto; padding:0 clamp(1.1rem,3vw,2.4rem);}

/* Nav is a fixed near-black bar regardless of light/dark site theme -- it's a
   brand choice, not something that should flip with the reader's system
   setting, so it deliberately doesn't use the --linen/--card theme tokens. */
header.topbar{ position:sticky; top:0; z-index:40; background:rgba(12,15,13,0.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.08); transition:background .3s ease, box-shadow .3s ease; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:0.6rem 0; transition:padding .3s ease; }
.brand{display:flex; align-items:center; gap:0.6rem; text-decoration:none; cursor:pointer;}
.brand-logo{height:46px; width:auto; display:block; flex:none; transition:height .3s ease;}
.brand-logo-foot{height:34px;}
/* Nav compresses slightly once you've scrolled past the hero -- a small,
   smooth touch rather than a static bar sitting at full height forever. */
header.topbar.is-scrolled{ background:rgba(8,10,9,0.98); box-shadow:0 10px 28px -16px rgba(0,0,0,0.55); }
header.topbar.is-scrolled .topbar-inner{ padding:0.4rem 0; }
header.topbar.is-scrolled .brand-logo{ height:36px; }

nav.pillars{display:flex; gap:0.3rem; align-items:center;}
nav.pillars a{ font-size:0.86rem; font-weight:600; text-decoration:none; padding:0.5rem 0.85rem; border-radius:7px; color:rgba(255,255,255,0.72); transition:color .15s ease, background .15s ease; white-space:nowrap; }
nav.pillars a:hover{color:#FBF8EF; background:rgba(255,255,255,0.08);}
nav.pillars a.active{color:var(--gorse-bright); background:rgba(255,255,255,0.08);}
.nav-scroll{display:flex; overflow-x:auto; gap:0.2rem; scrollbar-width:none;}
.nav-scroll::-webkit-scrollbar{display:none;}

.cta-btn{ display:inline-flex; align-items:center; gap:0.4rem; background:var(--fairway); color:#FBF8EF; border:none; font-family:"Public Sans", sans-serif; font-weight:600; font-size:0.86rem; padding:0.62rem 1.05rem; border-radius:8px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s ease, transform .15s ease; }
.cta-btn:hover{background:var(--fairway-deep); transform:translateY(-1px);}
.cta-btn.ghost{ background:transparent; color:var(--fairway); border:1.5px solid var(--fairway); }
.cta-btn.ghost:hover{background:var(--sand); transform:none;}
.cta-btn.gorse{background:var(--gorse); color:#241705;}
.cta-btn.gorse:hover{background:var(--gorse-bright);}
.cta-btn.ghost-light{background:transparent; color:#FBF8EF; border:1.5px solid rgba(251,248,239,0.45);}
.cta-btn.ghost-light:hover{background:rgba(251,248,239,0.1); border-color:rgba(251,248,239,0.7); transform:translateY(-1px);}

/* Homepage's closing moment before the footer -- a full-bleed dark band so
   the page ends on a deliberate note rather than just stopping after the
   last row. No photo needed; the gradient + rows above already did the
   photographic heavy lifting. */
.cinematic-cta{
  position:relative; margin-top:2.4rem; padding:4.2rem 0; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(217,160,57,0.14), rgba(217,160,57,0) 45%),
    linear-gradient(135deg, var(--fairway-deep) 0%, #0E1712 100%);
}
.cinematic-cta-inner{text-align:center; max-width:640px; margin:0 auto;}
.cinematic-cta .eyebrow{color:var(--gorse-bright);}
.cinematic-cta h2{color:#FBF8EF; font-size:clamp(1.7rem, 1.8vw + 1.1rem, 2.5rem); margin-top:0.5rem;}
.cinematic-cta p{color:#D7DED8; margin-top:0.9rem; font-size:1rem;}
.cinematic-cta-actions{display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem;}

main{min-height:70vh;}
footer.sitefoot{ border-top:1px solid var(--line); margin-top:5rem; padding:2.6rem 0 3rem; color:var(--ink-soft); font-size:0.86rem; }
footer.sitefoot .shell{display:flex; flex-direction:column; gap:1rem;}
.foot-row{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:flex-start;}

/* Unused now the homepage leads with search rather than a headline hero,
   kept in case a headline treatment is wanted again on this or another page. */
.hero{padding:4.2rem 0 3.4rem; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:3rem; align-items:center;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2.3rem, 3.6vw + 1rem, 3.6rem); line-height:1.05; letter-spacing:-0.01em;}
.hero h1 em{font-style:italic; color:var(--fairway); font-weight:500;}
.hero p.lede{font-size:1.08rem; color:var(--ink-soft); max-width:44ch; margin-top:1.1rem;}
.hero-actions{display:flex; gap:0.7rem; margin-top:1.7rem; flex-wrap:wrap;}
.hero-art{aspect-ratio:4/3; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative;}

/* Homepage now opens with a full-bleed photo: search bar and quick stats are
   layered over it inside .search-hero-content, which is the only part
   constrained to .shell width. */
.search-hero{position:relative; padding:5.2rem 0 3.4rem; overflow:hidden; isolation:isolate; min-height:30rem; display:flex; align-items:flex-end;}
.search-hero-media{position:absolute; inset:0; z-index:-1; background:var(--fairway-deep);}
.search-hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 68%;
  transform:scale(1.09); animation:heroZoom 24s ease-out forwards;
}
/* A slow, barely-perceptible drift rather than a hard cut to a static photo
   -- the closest a plain <img> gets to a cinematic title-sequence feel. */
@keyframes heroZoom{ from{transform:scale(1.09);} to{transform:scale(1);} }
.search-hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 18% 88%, rgba(217,160,57,0.16), rgba(217,160,57,0) 55%),
    linear-gradient(180deg, rgba(8,12,9,0.5) 0%, rgba(8,12,9,0.32) 40%, rgba(8,12,9,0.4) 60%, rgba(6,9,7,0.88) 100%);
}
.search-hero-content{position:relative; width:100%;}
.hero-eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:0.78rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gorse-bright); font-weight:500; margin:0 0 0.5rem;
  animation:heroRise .7s cubic-bezier(.16,.8,.3,1) .05s both;
}
.hero-headline{
  font-size:clamp(2.1rem, 2.6vw + 1.2rem, 3.4rem); line-height:1.06; letter-spacing:-0.01em;
  color:#FBF8EF; max-width:18ch; margin:0 0 1.4rem; text-shadow:0 4px 24px rgba(0,0,0,0.35);
  animation:heroRise .8s cubic-bezier(.16,.8,.3,1) .16s both;
}
.home-search{ animation:heroRise .8s cubic-bezier(.16,.8,.3,1) .3s both; }
.hero-stats{ animation:heroRise .8s cubic-bezier(.16,.8,.3,1) .42s both; }
@keyframes heroRise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
@media (max-width:640px){.search-hero{padding:3.6rem 0 2.4rem; min-height:26rem;}}

.home-search{
  display:flex; align-items:center; gap:0.7rem;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:0.6rem 0.6rem 0.6rem 1.1rem; margin-top:0; box-shadow:0 12px 32px -8px rgba(6,10,8,0.55);
  transition:border-color .15s ease;
}
.home-search:focus-within{border-color:var(--fairway);}
.home-search-icon{width:20px; height:20px; flex:none; color:var(--ink-soft);}
.home-search input[type="search"]{
  flex:1; min-width:0; border:none; background:transparent; color:var(--ink);
  font-family:"Public Sans", sans-serif; font-size:1rem; padding:0.6rem 0;
}
.home-search input[type="search"]::placeholder{color:var(--ink-soft);}
.home-search input[type="search"]:focus{outline:none;}
.home-search .cta-btn{flex:none;}
@media (max-width:560px){
  .home-search{flex-wrap:wrap; padding:0.9rem;}
  .home-search input[type="search"]{flex-basis:100%; order:1;}
  .home-search-icon{order:0;}
  .home-search .cta-btn{order:2; flex:1; justify-content:center;}
}

/* Replaces the old boxed white "stat strip" -- these sit directly on the
   photo, so they're frosted glass chips with light text rather than cards. */
.hero-stats{display:flex; flex-wrap:wrap; gap:0.7rem 1rem; margin-top:1.3rem;}
.hero-stat{
  display:flex; align-items:baseline; gap:0.5rem;
  background:rgba(251,248,239,0.14); border:1px solid rgba(251,248,239,0.32);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:999px; padding:0.55rem 1.15rem;
}
.hero-stat-num{font-family:"Fraunces", serif; font-weight:600; font-size:1.4rem; color:#FBF8EF;}
.hero-stat-label{font-size:0.8rem; color:#EDEBDD;}

/* Homepage rows -- Featured, Upcoming Competitions, Play Our Events, Golf
   Course Directory, and Plan Your Golf Break all share this component. Each
   is a ".home-row" with a ".row-track" of ".row-card"s; see home-carousel.js
   for the scroll/button/dot behaviour. */
.home-row{padding:2.6rem 0 0.6rem;}
.row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.4rem;}
.row-head h2{font-size:clamp(1.5rem, 1.4vw + 1rem, 2rem); margin-top:0.3rem;}
.row-actions{display:flex; align-items:center; gap:0.9rem;}
.row-seeall{font-size:0.84rem; font-weight:600; color:var(--gorse); text-decoration:none; white-space:nowrap;}
.row-seeall:hover{text-decoration:underline;}
.carousel-btn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--card);
  color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
  transition:border-color .15s ease, color .15s ease;
}
.carousel-btn:hover{border-color:var(--fairway); color:var(--fairway);}
.carousel-btn:disabled{opacity:0.35; cursor:default;}
.carousel-btn:disabled:hover{border-color:var(--line); color:var(--ink);}

.row-track{
  display:flex; gap:0.85rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0.2rem 0.2rem 1rem; margin:0 -0.2rem; scrollbar-width:none;
}
.row-track::-webkit-scrollbar{display:none;}
/* Sized smaller and closer together, Airbnb-card style, so 4-5 fit across a
   desktop row instead of 3. */
.row-card{
  flex:0 0 clamp(178px, 20vw, 224px); scroll-snap-align:start;
  background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease;
}
.row-card:hover{transform:translateY(-6px); box-shadow:0 26px 44px -20px rgba(10,16,12,0.4);}
.row-art{aspect-ratio:4/3; position:relative; display:block; overflow:hidden;}
.row-art svg, .row-art img{width:100%; height:100%; display:block; transition:transform .5s ease; object-fit:cover;}
.row-card:hover .row-art svg, .row-card:hover .row-art img{transform:scale(1.07);}
.row-art-label{ position:absolute; left:0.7rem; bottom:0.6rem; right:0.7rem; color:#FBF8EF; font-family:"Fraunces",serif; font-weight:600; font-size:0.92rem; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.row-badge{position:absolute; top:0.6rem; left:0.6rem;}
.row-badge.badge-featured{
  background:var(--gorse); color:#241705; font-size:0.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; padding:0.26rem 0.55rem; border-radius:99px;
}
.row-body{padding:0.8rem 0.85rem 0.95rem; display:flex; flex-direction:column; gap:0.35rem;}
.row-body h3{font-size:0.92rem; line-height:1.3;}
.row-body h3 a{text-decoration:none;}
.row-body h3 a:hover{color:var(--fairway);}
.row-body p{font-size:0.78rem; color:var(--ink-soft); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.row-meta{font-size:0.7rem; color:var(--ink-soft);}
.row-link{font-weight:600; color:var(--gorse); text-decoration:none; font-size:0.76rem; margin-top:auto;}

.row-dots{display:flex; justify-content:center; gap:0.45rem; margin-top:0.2rem;}
.row-dot{
  width:8px; height:8px; border-radius:50%; border:none; background:var(--line);
  padding:0; cursor:pointer;
}
.row-dot.active{background:var(--fairway); width:22px; border-radius:99px; transition:width .18s ease;}

.pillars-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:3.6rem;}
@media (max-width:940px){.pillars-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pillars-grid{grid-template-columns:1fr;}}
.pillar-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.4rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:0.9rem; box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; }
.pillar-card:hover{transform:translateY(-3px); border-color:var(--fairway);}
.pillar-icon{width:38px; height:38px; color:var(--fairway);}
.pillar-card h3{font-size:1.12rem;}
.pillar-card p{font-size:0.86rem; color:var(--ink-soft); margin:0;}
.pillar-go{font-size:0.78rem; font-weight:600; color:var(--gorse); margin-top:auto;}

section.block{padding:3rem 0;}
.block-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.8rem;}
.block-head h2{font-size:clamp(1.6rem, 1.6vw + 1rem, 2.1rem);}
.block-head p{color:var(--ink-soft); margin-top:0.4rem; max-width:56ch;}

.filterbar{ display:flex; gap:0.7rem; flex-wrap:wrap; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0.9rem; margin-bottom:1.8rem; box-shadow:var(--shadow); }
.filterbar input[type="search"]{ flex:1 1 220px; min-width:180px; border:1px solid var(--line); background:var(--linen); color:var(--ink); border-radius:8px; padding:0.6rem 0.8rem; font-size:0.9rem; font-family:"Public Sans", sans-serif; }
.filterbar select{ border:1px solid var(--line); background:var(--linen); color:var(--ink); border-radius:8px; padding:0.6rem 0.7rem; font-size:0.9rem; font-family:"Public Sans", sans-serif; }
.filter-dates{ display:flex; align-items:center; gap:0.4rem; border:1px solid var(--line); background:var(--linen); border-radius:8px; padding:0.15rem 0.5rem 0.15rem 0.15rem; }
.filter-dates input[type="date"]{ border:none; background:transparent; color:var(--ink); font-size:0.86rem; font-family:"IBM Plex Mono", monospace; padding:0.45rem 0.4rem; width:9.5rem; }
.filter-dates input[type="date"]:focus{outline:none;}
.filter-dates-sep{color:var(--ink-soft); font-size:0.8rem;}
.filter-dates-clear{ border:none; background:transparent; color:var(--ink-soft); font-size:1.1rem; line-height:1; cursor:pointer; padding:0.2rem 0.3rem; border-radius:6px; }
.filter-dates-clear:hover{background:var(--sand); color:var(--ink);}
@media (max-width:640px){ .filter-dates{flex-wrap:wrap;} .filter-dates input[type="date"]{width:8rem;} }
.filter-count{font-size:0.8rem; color:var(--ink-soft); margin-left:auto; white-space:nowrap;}
.load-more-row{display:flex; justify-content:center; margin-top:2rem;}
.load-more-btn[hidden]{display:none;}

.event-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.1rem;}
.event-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s ease;
}
.event-card:hover{transform:translateY(-4px); box-shadow:0 22px 40px -18px rgba(10,16,12,0.32);}
.event-art{aspect-ratio:16/10; position:relative; overflow:hidden;}
.event-art svg, .event-art img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease;}
.event-card:hover .event-art svg, .event-card:hover .event-art img{transform:scale(1.06);}
.event-body{padding:1.1rem 1.3rem 1.2rem; display:flex; flex-direction:column; gap:0.55rem; flex:1;}
.event-top{display:flex; justify-content:space-between; gap:0.6rem; align-items:flex-start;}
.event-date{font-family:"IBM Plex Mono",monospace; font-size:0.78rem; color:var(--fairway); font-weight:600;}
.pill{ font-size:0.68rem; font-weight:600; padding:0.24rem 0.55rem; border-radius:99px; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }
.pill.open{background:var(--pill-open-bg); color:var(--fairway);}
.pill.waitlist{background:var(--pill-wait-bg); color:var(--gorse);}
.pill.full, .pill.closed{background:var(--line); color:var(--ink-soft);}
.event-card h3{font-size:1.05rem; line-height:1.3;}
.event-meta{font-size:0.82rem; color:var(--ink-soft); display:flex; gap:0.5rem; flex-wrap:wrap;}
.event-desc{font-size:0.86rem; color:var(--ink-soft); flex:1;}
.event-foot{display:flex; justify-content:space-between; align-items:center; margin-top:0.4rem; font-size:0.82rem;}
.event-fee{font-family:"IBM Plex Mono",monospace; font-weight:600;}
.event-link{font-weight:600; color:var(--gorse); text-decoration:none; font-size:0.82rem;}

.course-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1.2rem;}
.course-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease; }
.course-card:hover{transform:translateY(-6px); box-shadow:0 26px 44px -20px rgba(10,16,12,0.4);}
.course-art{aspect-ratio:16/10; position:relative; overflow:hidden;}
.course-art svg, .course-art img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease;}
.course-card:hover .course-art svg, .course-card:hover .course-art img{transform:scale(1.06);}
.course-art-label, .event-art-label{ position:absolute; left:0.9rem; bottom:0.7rem; color:#FBF8EF; font-family:"Fraunces",serif; font-weight:600; font-size:1.02rem; text-shadow:0 2px 10px rgba(0,0,0,0.45); max-width:88%; }
.course-body{padding:0.95rem 1.05rem 1.1rem; display:flex; flex-direction:column; gap:0.3rem;}
.course-name{font-size:1.05rem; line-height:1.3; margin:0; font-weight:700; color:var(--ink);}
.course-region{font-size:0.78rem; color:var(--ink-soft); font-weight:400;}
.course-stats{display:flex; gap:0.9rem; font-family:"IBM Plex Mono",monospace; font-size:0.76rem; color:var(--ink-soft); margin-top:0.2rem;}
.course-tags{display:flex; gap:0.35rem; flex-wrap:wrap; margin-top:0.35rem;}
.tag-chip{font-size:0.68rem; background:var(--sand); color:var(--ink-soft); padding:0.2rem 0.5rem; border-radius:99px;}

.course-hero{aspect-ratio:21/8; border-radius:16px; overflow:hidden; position:relative; box-shadow:var(--shadow); background:var(--fairway-deep);}
.course-hero svg, .course-hero img{width:100%; height:100%; display:block; object-fit:cover;}
.course-hero.cine-zoom svg, .course-hero.cine-zoom img{transform:scale(1.08); animation:heroZoom 20s ease-out forwards;}
.course-hero-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.8rem clamp(1.2rem,3vw,2.4rem); background:linear-gradient(0deg, rgba(10,16,12,0.72), rgba(10,16,12,0) 60%); }
.course-hero-overlay .eyebrow{color:#D9EAE1;}
.course-hero-overlay h1{color:#FBF8EF; font-size:clamp(1.7rem,2.6vw + 1rem,2.6rem); margin-top:0.3rem;}
.back-link{display:inline-flex; align-items:center; gap:0.35rem; font-size:0.84rem; font-weight:600; color:var(--fairway); text-decoration:none; margin-bottom:1.1rem;}
.back-link:hover{text-decoration:underline;}

.course-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:2.4rem; margin-top:2.2rem;}
@media (max-width:880px){.course-layout{grid-template-columns:1fr;}}
.course-desc p{color:var(--ink-soft); font-size:0.98rem; max-width:64ch;}
.video-frame{ margin-top:1.6rem; border-radius:12px; aspect-ratio:16/9; background:var(--fairway-deep); display:flex; align-items:center; justify-content:center; color:#EAE6D9; position:relative; overflow:hidden; }
.video-frame .playbtn{width:56px; height:56px; border-radius:50%; background:rgba(251,248,239,0.16); display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(251,248,239,0.5);}
.video-frame .caption{position:absolute; bottom:0.8rem; left:1rem; font-size:0.76rem; color:#D9EAE1; font-family:"IBM Plex Mono",monospace;}

.side-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.3rem; box-shadow:var(--shadow); margin-bottom:1.2rem;}
.side-card h4{font-size:0.92rem; margin-bottom:0.9rem;}
.stat-list{display:flex; flex-direction:column; gap:0.55rem;}
.stat-row{display:flex; justify-content:space-between; font-size:0.86rem; border-bottom:1px dashed var(--line); padding-bottom:0.55rem;}
.stat-row:last-child{border-bottom:none; padding-bottom:0;}
.stat-row span:first-child{color:var(--ink-soft);}
.stat-row span:last-child{font-family:"IBM Plex Mono",monospace; font-weight:600;}

.mini-comp{padding:0.7rem 0; border-bottom:1px solid var(--line); font-size:0.84rem;}
.mini-comp:last-child{border-bottom:none;}
.mini-comp-name{font-weight:600;}
.mini-comp-meta{color:var(--ink-soft); font-size:0.78rem; margin-top:0.15rem;}
.empty-note{color:var(--ink-soft); font-size:0.86rem; font-style:italic;}

.package-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem;}
.package-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.3rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:0.6rem; transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s ease;}
.package-card:hover{transform:translateY(-4px); box-shadow:0 22px 40px -18px rgba(10,16,12,0.32);}
.package-card h3{font-size:1.05rem;}
.package-price{font-family:"IBM Plex Mono",monospace; color:var(--fairway); font-weight:600; font-size:1.15rem;}
.package-card p{color:var(--ink-soft); font-size:0.86rem; margin:0;}
.package-list{font-size:0.82rem; color:var(--ink-soft); padding-left:1.1rem; margin:0.2rem 0;}

.enquiry-panel{ margin-top:3.2rem; background:var(--fairway-deep); color:#F3EFE1; border-radius:18px; padding:clamp(1.6rem,3vw,2.8rem); display:grid; grid-template-columns:1fr 1.2fr; gap:2.2rem; }
@media (max-width:820px){.enquiry-panel{grid-template-columns:1fr;}}
.enquiry-panel h2{color:#FBF8EF; font-size:clamp(1.5rem,2vw + 1rem,2rem);}
.enquiry-panel p{color:#CFE0D6; font-size:0.92rem; max-width:40ch;}
.enquiry-form{display:grid; grid-template-columns:1fr 1fr; gap:0.8rem;}
.enquiry-form .full{grid-column:1/-1;}
.enquiry-form label{display:flex; flex-direction:column; gap:0.35rem; font-size:0.78rem; color:#D9EAE1; font-weight:600;}
.enquiry-form input, .enquiry-form select, .enquiry-form textarea{ background:rgba(251,248,239,0.08); border:1px solid rgba(251,248,239,0.28); color:#FBF8EF; border-radius:8px; padding:0.6rem 0.7rem; font-family:"Public Sans",sans-serif; font-size:0.88rem; }
.enquiry-form textarea{resize:vertical; min-height:70px;}
.enquiry-form ::placeholder{color:#B9CBBF;}
.enquiry-note{grid-column:1/-1; font-size:0.74rem; color:#B9CBBF; margin-top:0.2rem;}

.page-head{padding-top:2.6rem; padding-bottom:0.4rem;}
.page-head .eyebrow{margin-bottom:0.6rem;}