/* =====================================================================
   KOHWAN — homepage, built to the approved comps.
   Everything references the semantic tokens declared in style.css, so the
   whole page themes light/dark from one place. Prefix: .k*
   ===================================================================== */

/* ---------------------------------------------------------- section shell */
.ksec { padding: clamp(38px, 4.2vw, 60px) 0; }
.ksec__head { text-align: center; margin-bottom: clamp(20px, 2.4vw, 32px); }
.ksec__kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .74rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 8px;
}
.ksec__title {
  position: relative;
  display: inline-block;   /* so the flanking rules hug the text, not the container */
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.2vw, 2.45rem);
  font-weight: 800; letter-spacing: -.5px;
  color: var(--green-deep); margin: 0;
}
.ksec__title--sm { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
/* Thin rules either side of the heading, as in the comp. */
.ksec__title::before, .ksec__title::after {
  content: ''; position: absolute; top: 50%;
  width: clamp(28px, 7vw, 96px); height: 1px;
  background: var(--border-strong);
}
.ksec__title::before { right: calc(100% + 20px); }
.ksec__title::after  { left:  calc(100% + 20px); }
@media (max-width: 700px) { .ksec__title::before, .ksec__title::after { display: none; } }

/* =============================================================== HERO === */
.khero {
  position: relative;
  min-height: clamp(560px, 82vh, 780px);
  display: flex; align-items: center;
  padding: calc(var(--header-h) + var(--ubar-h) + 40px) 0 clamp(70px, 9vw, 120px);
  overflow: hidden;
  color: #FAF8F3;
}
.khero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
.khero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(46, 71, 85, .86) 0%, rgba(46, 71, 85, .55) 46%, rgba(46, 71, 85, .18) 78%),
    linear-gradient(180deg, rgba(46, 71, 85, .55) 0%, rgba(46, 71, 85, .1) 34%, rgba(46, 71, 85, .55) 100%);
}
/* .khero is a flex container, so .container — which carries margin:0 auto —
   would shrink-wrap and centre itself. Force full width to keep the copy
   hard left, as the comp has it. */
.khero > .container { width: 100%; }
.khero__inner { position: relative; z-index: 2; max-width: 660px; }
.khero__eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 18px;
}
.khero__title {
  font-family: var(--font-head);
  font-size: clamp(2.3rem, 5.6vw, 4.2rem);
  line-height: 1.06; font-weight: 700; letter-spacing: -1.5px;
  margin: 0 0 20px;
}
/* The comp sets the second line in a lighter serif italic. */
.khero__title em {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  color: var(--gold);
  letter-spacing: -1px;
}
.khero__lead {
  font-size: clamp(.94rem, 1.4vw, 1.04rem);
  line-height: 1.75; max-width: 46ch;
  opacity: .92; margin: 0 0 30px;
}
.khero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.kbtn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 30px; border-radius: 6px;
  font-size: .8rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.kbtn--gold { background: var(--gold); color: #2e4755; box-shadow: 0 12px 30px rgba(46, 71, 85, .28); }
.kbtn--gold:hover { background: var(--gold-soft); transform: translateY(-2px); }
.kbtn--play { color: #FAF8F3; padding-left: 0; }
.kbtn__play {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(250, 248, 243, .6);
  transition: background-color .3s var(--ease);
}
.kbtn--play:hover .kbtn__play { background: rgba(250, 248, 243, .16); }

/* Floating conditions rail */
.krail {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-40%);
  z-index: 3;
  display: flex; flex-direction: column;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  background: rgba(46, 71, 85, .78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(250, 248, 243, .14);
  border-right: 0;
}
.krail__item {
  display: grid; justify-items: center; gap: 6px;
  padding: 15px 16px; min-width: 86px;
  color: #FAF8F3; font-size: .66rem; font-weight: 700;
  line-height: 1.3; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.krail__item + .krail__item { border-top: 1px solid rgba(250, 248, 243, .12); }
.krail__item:hover { background: rgba(250, 248, 243, .1); color: var(--gold); }
@media (max-width: 1100px) { .krail { display: none; } }

/* ============================================================= SEARCH === */
.ksearch { position: relative; z-index: 5; margin-top: clamp(-58px, -5vw, -40px); }
.ksearch__bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 10px;
}
.ksearch__field { display: flex; align-items: center; gap: 12px; padding: 8px 18px; min-width: 0; }
.ksearch__field + .ksearch__field { border-left: 1px solid var(--border); }
.ksearch__ic { color: var(--primary); flex: none; display: grid; place-items: center; }
.ksearch__body { display: block; min-width: 0; flex: 1; }
.ksearch__body label {
  display: block;
  font-size: .64rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.ksearch__body input,
.ksearch__body select {
  width: 100%; border: 0; background: none; padding: 0;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--ink); outline: none;
  appearance: none; -webkit-appearance: none;
}
.ksearch__body select { cursor: pointer; }
.ksearch__go {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 34px; border: 0; border-radius: 8px;
  background: var(--primary); color: var(--on-primary);
  font: inherit; font-size: .78rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease);
}
.ksearch__go:hover { background: var(--primary-deep); }
@media (max-width: 900px) {
  .ksearch { margin-top: 0; padding-top: 22px; }
  .ksearch__bar { grid-template-columns: 1fr; }
  .ksearch__field + .ksearch__field { border-left: 0; border-top: 1px solid var(--border); }
  .ksearch__go { padding: 15px 24px; margin-top: 8px; }
}

/* ============================================================== TRUST === */
/* .ktrust now lives in footer.css — the row moved into the footer, and this
   sheet loads after it, so keeping a copy here would override it on the
   homepage only and make the two disagree. */

/* ======================================================= DESTINATIONS === */
.kdest__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;   /* names wrap to 2 lines at some widths */
}
@media (max-width: 1240px) { .kdest__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .kdest__grid { grid-template-columns: repeat(2, 1fr); } }

.kdest__card {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kdest__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kdest__media { position: relative; display: block; background: var(--surface-2); flex: none; }
.kdest__media img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }
.kdest__badge {
  position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--primary);
}
.kdest__badge svg { width: 17px; height: 17px; }
.kdest__body {
  padding: 24px 10px 14px; text-align: center;
  display: flex; flex-direction: column; flex: 1;
}
.kdest__body em { margin-top: auto; padding-top: 9px; }
.kdest__body b { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kdest__body small { display: block; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.kdest__body em {
  display: block;
  font-style: normal; font-size: .66rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--primary);
}

/* ========================================================= EXPERIENCES == */
.kexp__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1240px) { .kexp__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { .kexp__grid { grid-template-columns: repeat(2, 1fr); } }
.kexp__tile {
  display: grid; justify-items: center; gap: 11px;
  padding: 22px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--green-deep);
  font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.3;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.kexp__tile:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.kexp__ic { color: var(--primary); }
.kexp__ic svg { width: 27px; height: 27px; }

/* ============================================================ PACKAGES == */
.kpack__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 1180px) { .kpack__layout { grid-template-columns: 1fr; } }
.kpack__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .kpack__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .kpack__grid { grid-template-columns: 1fr; } }

.kcard {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kcard__media { position: relative; display: block; background: var(--surface-2); flex: none; }
.kcard__media img { width: 100%; aspect-ratio: 16 / 11; height: auto; object-fit: cover; display: block; }
.kcard__tag {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 11px; border-radius: 4px;
  background: var(--primary); color: var(--on-primary);
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.kcard__body { padding: 15px 15px 17px; display: flex; flex-direction: column; flex: 1; }
.kcard__title { font-size: .93rem; font-weight: 700; line-height: 1.35; margin: 0 0 9px; }
.kcard__title a { color: var(--green-deep); }
.kcard__meta { display: grid; gap: 5px; font-size: .74rem; color: var(--muted); margin: 0 0 13px; }
.kcard__meta span { display: flex; align-items: center; gap: 6px; }
.kcard__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kcard__price { font-size: 1.08rem; font-weight: 800; color: var(--primary); }
.kcard__price i { font-style: normal; font-size: .72rem; font-weight: 600; }
.kcard__unit { font-size: .68rem; color: var(--muted); }
.kcard__btn {
  display: block; margin-top: 13px; padding: 10px;
  border: 1px solid var(--primary); border-radius: 5px;
  text-align: center; color: var(--primary);
  font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.kcard__btn:hover { background: var(--primary); color: var(--on-primary); }

/* ------------------------------------------------- live information panel */
.klive {
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.klive__head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 12px;
  background: var(--primary); color: var(--on-primary);
  font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.klive__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #BD830D;
  animation: klive-pulse 1.9s ease-in-out infinite;
}
@keyframes klive-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.klive__body { padding: 16px; }
.klive__label {
  font-size: .63rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 9px;
}
.klive__label + .klive__label,
.klive__minmax + .klive__label,
.klive__row + .klive__label { margin-top: 17px; }
.klive__row { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.klive__ic { color: var(--primary); flex: none; }
.klive__ic svg { width: 34px; height: 34px; }
.klive__ic--sky { color: var(--ski-blue, #2e4755); }
.klive__val b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--green-deep); line-height: 1.1; }
.klive__val small { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.klive__minmax {
  margin: 0; padding: 7px 10px; border-radius: 5px;
  background: var(--surface-2); color: var(--muted);
  font-size: .72rem; text-align: center;
}
.klive__status {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: .76rem; color: var(--ink);
}
.klive__status + .klive__status { border-top: 1px solid var(--border-soft); }
.klive__status b {
  padding: 3px 9px; border-radius: 4px;
  font-size: .6rem; font-weight: 800; letter-spacing: .07em;
}
.klive__status b.is-open    { background: #FAF8F3; color: #2e4755; }
.klive__status b.is-closed  { background: #FAF8F3; color: #2e4755; }
.klive__status b.is-on-hold { background: #FAF8F3; color: #2e4755; }
.klive__note { margin: 12px 0 0; font-size: .72rem; color: var(--muted); line-height: 1.5; }
.klive__btn {
  display: block; margin-top: 15px; padding: 10px;
  border: 1px solid var(--border-strong); border-radius: 5px;
  text-align: center; color: var(--green-deep);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.klive__btn:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* =============================================================== STATS == */
.kstats { padding: clamp(12px, 1.8vw, 20px) 0; }
.kstats__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: clamp(18px, 2.6vw, 28px) clamp(18px, 3vw, 34px);
  border-radius: 10px;
  background: var(--primary); color: var(--on-primary);
}
.kstat { display: flex; align-items: center; gap: 14px; justify-content: center; }
.kstat + .kstat { border-left: 1px solid rgba(250, 248, 243, .18); }
.kstat__ic { flex: none; opacity: .95; }
.kstat__ic svg { width: 32px; height: 32px; }
.kstat__txt b { display: block; font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.05; }
.kstat__txt small { display: block; font-size: .76rem; opacity: .85; margin-top: 2px; }
@media (max-width: 900px) {
  .kstats__inner { grid-template-columns: repeat(2, 1fr); }
  .kstat:nth-child(odd) { border-left: 0; }
  .kstat:nth-child(n+3) { border-top: 1px solid rgba(250, 248, 243, .18); padding-top: 14px; }
}

/* ============================================================= REVIEWS ==
   Two columns: the pitch on the left, the proof on the right — a score
   summary over a scrolling list of the reviews themselves. Brand navy
   stands in for the comp's purple.
   ======================================================================= */
/* A soft cream panel rather than a full-bleed slab, so it reads as a card
   floating on the page gradient. */
/* The tones are the other way round from the rest of the page: the band is
   white and the cards carry the warm tint, which is how the reference sets
   this row. Everywhere else on the site it is the reverse. */
.krev {
  background: #FFFFFF;
  /* Top only. The foot of this band meets the footer's mountain range, and a
     rule drawn across there cut the peaks off from the page above them — the
     white of this band runs straight into the white of the artwork's sky
     instead, with nothing marking the join. */
  border-top: 1px solid rgba(46, 71, 85, .1);
}
/* The pitch on top, the proof beneath it: a summary tile with the reviews
   themselves running off to the right, as the reference lays them out. */
.krev__inner {
  display: block;
}
/* Centred above the row, as the reference sets it. */
.krev__intro { margin-bottom: clamp(20px, 2.6vw, 38px); }
/* The section still needs a heading; the tabs are the visible label. */
.krev__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* One line, always. The row centres itself while it fits and becomes a
   sideways scroller when it does not, rather than dropping the last pill onto
   a second line and throwing the row off balance. */
/* Six pills need more room than the text column has, and the band behind them
   is full width anyway — so the row reaches past the column on both sides by
   the same amount, which keeps it centred while giving it the width to sit on
   one line. */
.krev__intro {
  display: flex;
  justify-content: center;
  margin-inline: clamp(-110px, -7vw, 0px);
}
/* Below desktop the reach-out runs past the screen edge; the row scrolls
   sideways there instead. */
@media (max-width: 1199px) {
  .krev__intro { margin-inline: 0; }
}
.krev__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(7px, .7vw, 11px);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Room for the focus ring, which a clipping scroller would cut off. */
  padding: 3px;
}
.krev__tabs::-webkit-scrollbar { display: none; }
.krev__pill { flex: none; white-space: nowrap; }
/* The site's mustard for the live tab, a navy hairline for the rest — the
   reference's red belongs to its own brand, not this one. */
.krev__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 15px;
  border: 1px solid rgba(46, 71, 85, .18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(.82rem, .95vw, .95rem);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.krev__pill svg { width: 16px; height: 16px; flex: none; }
.krev__pill:hover { border-color: var(--gold); color: var(--gold); }
.krev__pill.is-on {
  border-color: var(--gold);
  background: var(--gold);
  color: #FFFFFF;
  font-weight: 700;
}
.krev__pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ======================================================================
   THE OTHER PROOF PANES — awards, partners, films and the two programmes.
   Everything in them is placeholder content; see the note in the markup.
   ====================================================================== */
.proof[hidden] { display: none; }

.proof__rail {
  display: flex;
  gap: clamp(12px, 1.3vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 3px;
  /* start, not stretch: a tile whose height comes from its aspect-ratio would
     otherwise be stretched to the row and lose its shape. */
  align-items: flex-start;
}
.proof__rail::-webkit-scrollbar { display: none; }

/* Square tiles, as the reference sets awards and partner marks. */
/* Square, picture only. With no caption the tile's height no longer depends
   on its words, so every one in the row is identical. */
.proof__tile {
  flex: 0 0 clamp(150px, 15%, 210px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.3vw, 22px);
  border: 1px solid rgba(46, 71, 85, .07);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(46, 71, 85, .07);
  scroll-snap-align: start;
}
.proof__mark { display: block; width: clamp(38px, 3.4vw, 52px); height: clamp(38px, 3.4vw, 52px); color: var(--gold); }
.proof__mark svg { width: 100%; height: 100%; display: block; }
/* A photographed award or certificate: contained, not cropped, so the whole
   trophy or page is in frame whatever shape the file is. */
.proof__shot { display: block; width: 100%; height: 100%; }
.proof__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Two lines at most, so a long name cannot be what decides the tile's height. */
.proof__name {
  font-size: clamp(.82rem, .92vw, .92rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proof__meta {
  font-size: clamp(.72rem, .8vw, .8rem);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---- the film tiles ---- */
.proof__rail--wide .vfilm { flex: 0 0 clamp(190px, 21%, 290px); }
.vfilm {
  position: relative;
  aspect-ratio: 290 / 380;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(46, 71, 85, .08);
  scroll-snap-align: start;
}
.vfilm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vfilm__veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.38) 48%, rgba(0,0,0,0) 100%);
}
.vfilm__play {
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  place-items: center;
  width: clamp(42px, 3.6vw, 56px);
  height: clamp(42px, 3.6vw, 56px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--gold);
  transform: translate(-50%, -60%);
}
.vfilm__play svg { width: 45%; height: 45%; margin-left: 2px; }
.vfilm__foot { position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: center; }
.vfilm__kicker {
  display: block;
  font-size: clamp(.62rem, .72vw, .72rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
}
.vfilm__place {
  display: block;
  margin-top: 4px;
  font-size: clamp(.98rem, 1.2vw, 1.2rem);
  font-weight: 800;
  color: #FFFFFF;
}
.vfilm__who {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  border-radius: 4px;
  background: var(--gold);
  color: #FFFFFF;
  font-size: clamp(.7rem, .8vw, .8rem);
  font-weight: 700;
}

/* ---- the two programme panels ---- */
/* White with a soft shadow, as the reference draws it — not the tinted,
   outlined panel the tiles use. */
.pgm {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  align-items: stretch;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 10px 34px rgba(46, 71, 85, .1);
  overflow: hidden;
}
.pgm__media { position: relative; display: block; min-height: clamp(240px, 26vw, 380px); }
.pgm__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pgm__body { padding: clamp(20px, 2.4vw, 40px); }
.pgm__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2vw, 1.95rem);
  font-weight: 800;
  line-height: 1.18;
  color: var(--ink);
}
.pgm__lead { margin: 12px 0 0; font-size: clamp(.88rem, 1vw, 1rem); color: var(--muted); }
.pgm__list { margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.pgm__list li { display: flex; align-items: flex-start; gap: 11px; font-size: clamp(.86rem, .98vw, .98rem); color: var(--ink); }
.pgm__list svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--gold); }
.pgm__cta {
  display: inline-block;
  margin-top: clamp(18px, 2vw, 28px);
  padding: 12px 26px;
  border-radius: 8px;
  background: var(--gold);
  color: #FFFFFF;
  font-size: clamp(.86rem, .98vw, .98rem);
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s var(--ease);
}
.pgm__cta:hover { filter: brightness(1.07); }

@media (max-width: 900px) {
  .pgm { grid-template-columns: 1fr; }
  .pgm__media { min-height: clamp(190px, 48vw, 300px); }
}
.krev__panel {
  display: grid;
  grid-template-columns: clamp(180px, 17vw, 250px) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 30px);
  align-items: stretch;
}
/* An explicit `display` beats the `hidden` attribute's own display:none, so
   without this the reviews pane stayed on screen under every other tab. */
.krev__panel[hidden] { display: none; }

.krev__eyebrow {
  margin: 0 0 10px;
  font-size: clamp(.82rem, .95vw, .95rem);
  font-weight: 700;
  color: var(--primary);
}
.krev__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 3.05rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--green-deep);
}

/* ---- stars ----
   Gold and bare in the reviews row, as the reference draws them; the navy
   squares are kept for anywhere else that still asks for .kstars on its own. */
.kstars { display: inline-flex; gap: 4px; }
/* The row above would otherwise beat the attribute, and the panel hides its
   stars for anything that is not a review. */
.kstars[hidden] { display: none; }
.kstar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 3px;
  background: var(--primary);
  color: #FAF8F3;
}
.kstar svg { width: 20px; height: 20px; display: block; }
.kstar--off { background: rgba(46, 71, 85, .1); }
.kstars--sm .kstar { width: 22px; height: 22px; border-radius: 2px; }
.kstars--sm .kstar svg { width: 14px; height: 14px; }

.kstars--gold { gap: 1px; }
.kstars--gold .kstar {
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: #F5A623;
}
.kstars--gold .kstar svg { width: 19px; height: 19px; }
.kstars--gold .kstar--off { background: none; color: rgba(46, 71, 85, .18); }
.kstars--gold.kstars--sm .kstar svg { width: 15px; height: 15px; }

/* ---- the summary tile ---- */
.krev__sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(18px, 2vw, 30px) 16px;
  border: 1px solid rgba(46, 71, 85, .09);
  border-radius: 16px;
  background: #F8F7F3;
  text-align: center;
}
.krev__big {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.krev__big b { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 800; color: var(--ink); }
/* The Google wordmark, letter by letter in the brand's own four colours. */
.krev__mark {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}
.krev__mark .g-b { color: #4285F4; }
.krev__mark .g-r { color: #EA4335; }
.krev__mark .g-y { color: #FBBC05; }
.krev__mark .g-g { color: #34A853; }
.krev__count { margin: 0; font-size: clamp(.88rem, 1vw, 1rem); font-weight: 600; color: var(--ink); }

/* ---- the reviews, running sideways ---- */
.krev__rail { position: relative; min-width: 0; }
.krev__track {
  display: flex;
  gap: clamp(12px, 1.3vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  height: 100%;
}
.krev__track::-webkit-scrollbar { display: none; }

.rvcard {
  flex: 0 0 clamp(230px, 30%, 340px);
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.3vw, 20px);
  border: 1px solid rgba(46, 71, 85, .09);
  border-radius: 14px;
  background: #F8F7F3;
  scroll-snap-align: start;
}
.rvcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rvcard__who { flex: 1 1 auto; min-width: 0; }
.rvcard__name {
  display: block;
  font-size: clamp(.92rem, 1.02vw, 1.02rem);
  font-weight: 700;
  color: var(--ink);
}
/* Red, as the reference sets its dates. */
.rvcard__date { display: block; margin-top: 5px; font-size: .84rem; font-weight: 600; color: #D6342C; }
.rvcard__who .kstars { margin-top: 8px; }

/* The avatar, with Google's mark beneath it — the reference's right column. */
.rvcard__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, .8vw, 13px);
}
.rvcard__avatar {
  width: clamp(40px, 3.4vw, 52px);
  height: clamp(40px, 3.4vw, 52px);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(46, 71, 85, .08);
}
.rvcard__g { display: block; width: clamp(18px, 1.5vw, 23px); height: clamp(18px, 1.5vw, 23px); }
.rvcard__g svg { width: 100%; height: 100%; display: block; }
/* Four lines and no more, so every card in the row is the same height. */
.rvcard__text {
  margin: 12px 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The arrows sit over the row's edges, as the reference has them. */
.krev__step {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(46, 71, 85, .12);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(46, 71, 85, .16);
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .22s var(--ease), background-color .22s var(--ease);
}
.krev__step svg { width: 17px; height: 17px; }
.krev__step--prev { left: -19px; }
.krev__step--next { right: -19px; }
.krev__step[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
:root[data-theme="dark"] .krev { background: var(--panel); border-block-color: var(--border); }
:root[data-theme="dark"] .krev__title,
:root[data-theme="dark"] .rvcard__name,
:root[data-theme="dark"] .rvcard__text,
:root[data-theme="dark"] .krev__count,
:root[data-theme="dark"] .krev__big b { color: var(--ink); }
:root[data-theme="dark"] .krev__sum,
:root[data-theme="dark"] .rvcard { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .krev__step { background: var(--surface); border-color: var(--border); color: var(--ink); }

@media (max-width: 900px) {
  /* The summary tile goes above the row rather than beside it. */
  .krev__panel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .krev__sum { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; text-align: left; }
  .rvcard { flex-basis: clamp(230px, 78%, 330px); }
  /* Swiped on a phone, so the arrows are dead weight. */
  .krev__step { display: none; }
  .kstar { width: 26px; height: 26px; }
  .kstar svg { width: 16px; height: 16px; }
}

/* ======================================================================
   OPENING ONE IN FULL
   A review, award or certificate answers to a click by lifting slightly,
   then opening over the page at a size where the whole of it can be read —
   the picture at full size on the left, the writing beside it on the right.
   One panel serves the whole section; the script fills it from whichever
   card was clicked.
   ====================================================================== */
/* The cards are now buttons (the awards and certificates) or have
   role=button (the reviews), so they need to look pressable and to lose the
   browser's own button skin. */
.proof__tile,
.rvcard[data-zoom] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.proof__tile:hover,
.rvcard[data-zoom]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(46, 71, 85, .14);
}
.proof__tile:focus-visible,
.rvcard[data-zoom]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.zoom {
  position: fixed;
  inset: 0;
  /* The site's own modals (.cmodal, .paymodal) sit here. Anything lower is
     painted under the sidebar (200) and the banner's full-screen layer (999),
     which left the scrim covering nothing. */
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 46px);
}
/* The attribute alone would lose to the display above. */
.zoom[hidden] { display: none; }

.zoom__scrim { position: absolute; inset: 0; background: rgba(14, 26, 33, .62); }

.zoom__card {
  position: relative;
  display: grid;
  /* Side by side: the photograph filling the whole of the left, everything
     written about it on the right. */
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
  align-items: stretch;
  width: min(1040px, 100%);
  max-height: min(720px, 88vh);
  overflow: hidden;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 26px 70px rgba(14, 26, 33, .38);
}
/* A review with no picture shared gives the whole panel over to the words
   rather than leaving an empty column. */
.zoom.is-textonly .zoom__card { grid-template-columns: minmax(0, 1fr); width: min(660px, 100%); }

.zoom__x {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(46, 71, 85, .12);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(46, 71, 85, .18);
  cursor: pointer;
}
.zoom__x svg { width: 17px; height: 17px; }
.zoom__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The picture fills its half of the panel corner to corner — no frame, no
   margin of background around it. */
.zoom__media {
  position: relative;
  display: block;
  min-height: clamp(300px, 34vw, 460px);
  background: #F3F1EC;
}
.zoom__media[hidden] { display: none; }
.zoom__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* An award or a certificate is the exception: it is a page or a trophy shot
   against its own background, and cropping it to fill the column would cut off
   the thing that was opened to be looked at. Those are shown whole, at their
   own size, with the column sized to them. */
.zoom.is-contain .zoom__card { grid-template-columns: auto minmax(clamp(260px, 26vw, 420px), 1fr); }
.zoom.is-contain .zoom__media {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(14px, 1.6vw, 26px);
}
.zoom.is-contain .zoom__media img {
  position: static;
  width: auto;
  height: auto;
  max-width: min(520px, 42vw);
  max-height: min(560px, 64vh);
  object-fit: contain;
}

.zoom__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 38px);
  overflow-y: auto;
}
.zoom__title { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.45rem); font-weight: 800; color: var(--ink); }
.zoom__meta { margin: 0; font-size: clamp(.82rem, .94vw, .94rem); color: var(--muted); }
.zoom__meta[hidden] { display: none; }
.zoom__body .kstars { align-self: flex-start; }
/* No clamp here: the point of the panel is the whole of the review. */
.zoom__text { margin: 6px 0 0; font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.72; color: var(--ink); white-space: pre-line; }
.zoom__text[hidden] { display: none; }

:root[data-theme="dark"] .zoom__card,
:root[data-theme="dark"] .zoom__x { background: var(--surface); color: var(--ink); border-color: var(--border); }
:root[data-theme="dark"] .zoom__media { background: var(--panel); }
:root[data-theme="dark"] .zoom__title,
:root[data-theme="dark"] .zoom__text { color: var(--ink); }

@media (max-width: 820px) {
  /* Too narrow to stand side by side: the picture goes above the writing. */
  .zoom__card,
  .zoom.is-contain .zoom__card { grid-template-columns: minmax(0, 1fr); max-height: 90vh; }
  .zoom__media { min-height: 0; height: 42vh; }
  .zoom.is-contain .zoom__media { height: auto; }
}

/* =========================================================== INSTAGRAM == */
.kinsta { padding: 0 0 clamp(30px, 3.6vw, 48px); }
.kinsta__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 20px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
}
.kinsta__head b { display: block; font-size: .86rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--green-deep); }
.kinsta__head small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.kinsta__strip { display: flex; gap: 8px; overflow: hidden; }
.kinsta__shot { flex: 1 1 0; min-width: 0; border-radius: 7px; overflow: hidden; }
.kinsta__shot img { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.kinsta__shot:hover img { transform: scale(1.08); }
.kinsta__btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 12px 20px; border-radius: 6px;
  background: var(--primary); color: var(--on-primary);
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  transition: background-color .25s var(--ease);
}
.kinsta__btn:hover { background: var(--primary-deep); }
@media (max-width: 1080px) {
  .kinsta__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .kinsta__strip { width: 100%; }
}
@media (max-width: 620px) { .kinsta__shot:nth-child(n+5) { display: none; } }

/* ================================================================ DARK == */
:root[data-theme="dark"] .ksec__title,
:root[data-theme="dark"] .ktrust__txt b,
:root[data-theme="dark"] .kcard__title a,
:root[data-theme="dark"] .kexp__tile,
:root[data-theme="dark"] .klive__val b,
:root[data-theme="dark"] .kinsta__head b,
:root[data-theme="dark"] .ktst__card figcaption b,
:root[data-theme="dark"] .klive__btn { color: var(--ink); }
:root[data-theme="dark"] .klive__status b.is-open    { background: rgba(46, 71, 85, .1);  color: rgba(250, 248, 243, .76); }
:root[data-theme="dark"] .klive__status b.is-closed  { background: rgba(46, 71, 85, .12);  color: rgba(250, 248, 243, .64); }
:root[data-theme="dark"] .klive__status b.is-on-hold { background: rgba(189, 131, 13, .2); color: #BD830D; }
:root[data-theme="dark"] .klive__ic--sky { color: rgba(250, 248, 243, .61); }
:root[data-theme="dark"] .kstat + .kstat,
:root[data-theme="dark"] .kstat:nth-child(n+3) { border-color: rgba(46, 71, 85, .22); }
:root[data-theme="dark"] .khero__scrim {
  background:
    linear-gradient(90deg, rgba(46, 71, 85, .92) 0%, rgba(46, 71, 85, .62) 46%, rgba(46, 71, 85, .22) 78%),
    linear-gradient(180deg, rgba(46, 71, 85, .6) 0%, rgba(46, 71, 85, .15) 34%, rgba(46, 71, 85, .7) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .kdest__card, .kcard, .kexp__tile, .kinsta__shot img { transition: none; }
  .kdest__card:hover, .kcard:hover, .kexp__tile:hover { transform: none; }
  .klive__dot { animation: none; }
}

/* --- Dark: match the comp's dark treatments --------------------------
   The comp keeps the utility bar and the stats band DARK in dark mode
   (gold is reserved for accents), so they must not inherit --primary,
   which flips to gold. */
:root[data-theme="dark"] .ubar {
  background: #2e4755;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .ubar__chip b.is-open { color: var(--primary); }
:root[data-theme="dark"] .ubar__chip b.is-shut { color: var(--text-faint); }

:root[data-theme="dark"] .kstats__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
:root[data-theme="dark"] .kstat__ic { color: var(--primary); }
:root[data-theme="dark"] .kstat__txt b { color: var(--primary); }
:root[data-theme="dark"] .kstat__txt small { color: var(--muted); opacity: 1; }
:root[data-theme="dark"] .kstat + .kstat,
:root[data-theme="dark"] .kstat:nth-child(n+3) { border-color: var(--border); }

/* Instagram CTA reads as a dark button with light text in the comp. */
:root[data-theme="dark"] .kinsta__btn { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
:root[data-theme="dark"] .kinsta__btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* =================================================================
   MOBILE
   -----------------------------------------------------------------
   Below 900px the desktop .ubar is hidden and the mobile .topbar (44px,
   fixed) takes over. The header must clear it, and .khero must clear
   both — the original rule only covered the old .hero.
   ================================================================= */
@media (max-width: 900px) {
  .site-header { top: 44px; }

  .khero {
    min-height: auto;
    padding: calc(var(--header-h) + 44px + 26px) 0 clamp(150px, 34vw, 200px);
  }
  .khero__title { font-size: clamp(1.9rem, 8.4vw, 2.7rem); letter-spacing: -.8px; }
  .khero__title br { display: none; }          /* let it wrap naturally */
  .khero__lead { font-size: .92rem; margin-bottom: 24px; }
  .khero__cta { gap: 14px; }
  .kbtn { padding: 13px 22px; font-size: .74rem; }

  /* Search bar overlaps the hero base; on mobile it needs its own room. */
  .ksearch { margin-top: clamp(-130px, -28vw, -100px); }
  .ksearch__bar { padding: 6px; }
  .ksearch__field { padding: 11px 14px; }
  .ksearch__go { padding: 14px 20px; margin-top: 6px; }

  .ksec { padding: clamp(34px, 7vw, 52px) 0; }
  .ktrust { padding: 20px 0; }
  .ktrust__inner { gap: 14px 12px; }

  .kpack__layout { gap: 18px; }
  .klive { max-width: 420px; margin: 0 auto; }

  .kstats__inner { padding: 18px 16px; gap: 10px; }
  .kstat { gap: 10px; }
  .kstat__ic svg { width: 26px; height: 26px; }

  .kinsta__inner { padding: 14px; gap: 14px; }
}

@media (max-width: 560px) {
  .khero { padding-bottom: clamp(120px, 40vw, 170px); }
  .khero__cta { flex-direction: column; align-items: stretch; }
  .kbtn { justify-content: center; }
  .kbtn--play { justify-content: flex-start; padding-left: 0; }
  .ksearch { margin-top: clamp(-110px, -32vw, -90px); }
  .ktrust__inner { grid-template-columns: 1fr; }
  .kexp__grid { gap: 10px; }
  .kexp__tile { padding: 16px 8px; font-size: .72rem; }
  .ksec__title { font-size: clamp(1.25rem, 6.4vw, 1.7rem); }
}

/* Small peak glyph beside the section title, as in the comp. */
.ksec__glyph { display: inline-grid; place-items: center; vertical-align: -2px; margin-right: 8px; color: var(--primary); }
.ksec__glyph svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .ksec__glyph svg { width: 18px; height: 18px; } }