/* ==========================================================================
   CORE / PRIMITIVES
   Reset, layout, and the shared component vocabulary every template builds
   from. Nothing here hardcodes a colour: it all reads from tokens.css.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

p { margin: 0; }

/* height:auto lets aspect-ratio win over the width/height HTML attributes. */
img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; border: 0; background: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: var(--content-width);
  margin-inline: auto;
}

.section { padding-block: 5rem; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- Ambient background -------------------------------------------------
   Soft rotated ellipses behind everything. Colour comes from the template's
   --background-accent, so it reads as part of the brand rather than decoration. */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background: var(--background);
  pointer-events: none;
}

.ambient span {
  position: absolute;
  display: block;
  background: color-mix(in srgb, var(--background-accent) 15%, transparent);
  border-radius: 100%;
  filter: blur(40px);
}

.ambient .b1 {
  top: 0; left: 50%;
  width: 9vw; height: 110vh;
  transform: translate(-120%, -50%) rotate(-52.5deg);
}

.ambient .b2 {
  top: -20vh; right: 2.5vw;
  width: 12.5vw; height: 100vh;
  transform: rotate(-60deg);
}

.ambient .b3 {
  top: 45vh; left: -5vw;
  width: 14vw; height: 90vh;
  transform: rotate(38deg);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* --- Card ----------------------------------------------------------------
   The workhorse surface: a translucent gradient fill over a blur, so it picks
   up whatever sits behind it. */

.card {
  border: 1px solid var(--card);
  border-radius: var(--radius);
  background: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--card) 80%, transparent),
    color-mix(in srgb, var(--card) 40%, transparent)
  );
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.card--solid {
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.shadow-xl {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* --- Buttons -------------------------------------------------------------
   The nine-stop shadow ramp plus an inset top highlight is what makes these
   read as physical rather than flat. Do not flatten it to a single shadow. */

.primary-button {
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  box-shadow:
    color-mix(in srgb, var(--background) 20%, transparent) 0 3px 1px 0 inset,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 0.839802px 0.503881px -0.3125px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 1.99048px 1.19429px -0.625px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 3.63084px 2.1785px -0.9375px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 6.03627px 3.62176px -1.25px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 9.74808px 5.84885px -1.5625px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 15.9566px 9.57398px -1.875px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 27.4762px 16.4857px -2.1875px,
    color-mix(in srgb, var(--primary-cta) 13%, transparent) 0 50px 30px -2.5px;
}

.secondary-button {
  background: var(--secondary-cta);
  color: var(--secondary-cta-text);
  box-shadow:
    color-mix(in srgb, var(--background) 45%, transparent) 0 3px 1px 0 inset,
    color-mix(in srgb, var(--primary-cta) 10%, transparent) 0 6.03627px 3.62176px -1.25px,
    color-mix(in srgb, var(--primary-cta) 10%, transparent) 0 15.9566px 9.57398px -1.875px,
    color-mix(in srgb, var(--primary-cta) 10%, transparent) 0 50px 30px -2.5px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 2.5rem;
  padding-inline: 1.5rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform 0.3s ease-out;
}

.btn > span { overflow: hidden; white-space: nowrap; }

/* Letter-roll: each glyph carries a duplicate of itself one line below via
   text-shadow, then rolls up on hover so the copy takes its place. */
.btn .ltr {
  display: inline-block;
  text-shadow: currentColor 0 1.25em;
  transition: transform 0.3s ease-out;
}

@media (hover: hover) and (width >= 768px) {
  .btn:hover { transform: scale(0.9) rotate(-3deg); }
  .btn:hover .ltr { transform: translateY(-1.25em) rotate(3deg); }
}

/* Arrow button: the label slides right while the icon chip shrinks and spins.
   Pair .btn--arrow with .primary-button or .secondary-button. */
.btn--arrow { justify-content: space-between; }

.btn--arrow .btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: 50%;
  transition: transform 0.3s ease-out;
}

.btn--arrow .btn__icon svg { width: 0.75rem; height: 0.75rem; }
.btn--arrow .btn__label { transition: transform 0.3s ease-out; }

@media (hover: hover) and (width >= 768px) {
  .btn--arrow:hover { transform: none; }
  .btn--arrow:hover .btn__label { transform: translateX(0.4rem); }
  .btn--arrow:hover .btn__icon { transform: scale(0.35) rotate(90deg); }
}

/* --- Eyebrow -------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

/* --- Section heading ------------------------------------------------------ */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.section-head h2 {
  max-width: 80%;
  font-size: var(--section-head-size, var(--text-7xl));
  line-height: 1.15;
  text-wrap: balance;
  background: linear-gradient(to right, var(--foreground), var(--primary-cta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.section-head > p {
  max-width: 70%;
  font-size: var(--text-xl);
  line-height: 1.375;
  text-wrap: balance;
}

.section-head--left {
  align-items: flex-start;
  text-align: left;
}

@media (width <= 768px) {
  .section-head h2,
  .section-head > p { max-width: 100%; }
}

/* --- Navbar ---------------------------------------------------------------
   A floating bar over a full-screen overlay panel. The bar stays put; the
   panel fades in behind it and the bar's controls invert. */

.navbar {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.navbar__bar {
  position: absolute;
  z-index: 10;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--content-width);
  pointer-events: auto;
}

/* Navs that sit over a hero start in --nav-ink (usually white) and switch to
   --nav-ink-scrolled once the hero has scrolled past. */
.navbar__brand {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--nav-ink, inherit);
  transition: color 0.4s;
}

.navbar__links a { color: var(--nav-ink, inherit); }

body.past-hero .navbar__brand,
body.past-hero .navbar__links a { color: var(--nav-ink-scrolled, var(--foreground)); }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  height: 2.5rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.navbar__toggle svg { width: 1rem; height: 1rem; }
.navbar__toggle .icon-close { display: none; }

.navbar__panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--primary-cta);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.navbar__panel a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  color: var(--primary-cta-text);
  font-family: var(--font-body);
  font-size: var(--text-9xl);
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.navbar__panel a:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--primary-cta-text) 25%, transparent);
}

.navbar__panel a svg {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform 0.3s ease-out;
}

.navbar__panel a:hover svg { transform: translate(0.15em, -0.15em); }

.nav-open .navbar__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-open .navbar__panel a { opacity: 1; transform: none; }
.nav-open .navbar__panel a:nth-child(1) { transition-delay: 0.12s; }
.nav-open .navbar__panel a:nth-child(2) { transition-delay: 0.2s; }
.nav-open .navbar__panel a:nth-child(3) { transition-delay: 0.28s; }
.nav-open .navbar__panel a:nth-child(4) { transition-delay: 0.36s; }

/* The panel fills the screen behind the bar, so while it is open the bar
   drops its own fill and blur, and the brand and close button take the
   panel's text colour (--panel-ink, set by a theme whose panel is pale).
   The html body.nav-open .navbar prefix wins over a
   theme's own bar colour, including a past-hero one, and over
   body.past-hero .navbar__brand, which otherwise turned the brand dark on a
   dark panel once the page had been scrolled. */
html body.nav-open .navbar .navbar__bar {
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body.nav-open .navbar .navbar__brand { color: var(--panel-ink, var(--primary-cta-text)); }

html body.nav-open .navbar .navbar__toggle,
html body.nav-open .navbar .navbar__actions .btn {
  background: transparent;
  color: var(--panel-ink, var(--primary-cta-text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-ink, var(--primary-cta-text)) 20%, transparent);
}

/* Long menu words ("Testimonials", "Conservatories") ran past a phone's edges. */
@media (width <= 640px) {
  .navbar__panel { padding-inline: 1.25rem; }
  .navbar__panel a { max-width: 100%; font-size: clamp(1.9rem, 11vw, var(--text-9xl)); }
}

@media (641px <= width <= 900px) {
  .navbar__panel { padding-inline: 2rem; }
  .navbar__panel a { max-width: 100%; font-size: min(var(--text-9xl), 8vw); }
}

.nav-open .navbar__toggle .icon-open { display: none; }
.nav-open .navbar__toggle .icon-close { display: block; }

body.nav-open { overflow: hidden; }

/* --- Inline bar nav -------------------------------------------------------
   A glass pill spanning the content width with links inline. The alternative
   to .navbar__panel for templates that want visible navigation. */

.navbar--bar .navbar__bar {
  padding: 0.625rem 0.625rem 0.625rem 1.5rem;
  border-radius: var(--radius);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar__links a {
  font-size: var(--text-lg);
  transition: opacity 0.2s;
}

.navbar__links a:hover { opacity: 0.65; }

/* With inline links visible, the hamburger is redundant until they collapse. */
@media (width >= 901px) {
  .navbar--bar .navbar__toggle { display: none; }
}

@media (width <= 900px) {
  .navbar__links { display: none; }
}

/* Narrow phones: brand and hamburger only, or the CTA crowds the wordmark. */
@media (width <= 640px) {
  .navbar--bar .navbar__bar { padding-left: 1rem; }
  .navbar--bar .navbar__actions .btn { display: none; }
}

/* --- Avatar stack ---------------------------------------------------------- */

.avatar-stack {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avatar-stack__row { display: flex; }

.avatar-stack__row img,
.avatar-stack__more {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--background);
}

.avatar-stack__row > * + * { margin-left: -0.75rem; }

.avatar-stack__more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-cta);
  color: var(--secondary-cta-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --- Stat list ------------------------------------------------------------- */

.stat-list { display: flex; flex-direction: column; }

.stat-list__item { padding: 1.5rem 0; }
.stat-list__item + .stat-list__item {
  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
}

.stat-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
}

.stat-list__icon svg { width: 1.1rem; height: 1.1rem; }

.stat-list__item h3 {
  font-size: var(--text-3xl);
  margin-bottom: 0.35rem;
}

.stat-list__item p { font-size: var(--text-lg); }

/* --- Numbered badge -------------------------------------------------------- */

.badge-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  font-size: var(--text-lg);
  font-weight: 600;
}

/* --- Carousel -------------------------------------------------------------- */

.carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.carousel::-webkit-scrollbar { display: none; }

.carousel > * {
  flex: 0 0 calc((100% - 2rem) / 3);
  scroll-snap-align: start;
}

@media (width <= 1024px) { .carousel > * { flex-basis: calc((100% - 1rem) / 2); } }
@media (width <= 768px) { .carousel > * { flex-basis: 85%; } }

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.carousel-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.carousel-controls button:hover { transform: scale(1.08); }
.carousel-controls button:disabled { opacity: 0.35; cursor: default; transform: none; }
.carousel-controls svg { width: 1rem; height: 1rem; }

/* --- Feature card (image over copy) ---------------------------------------- */

.feature-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: var(--radius);
}

.feature-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.5rem);
}

.feature-card__body { padding: 1.25rem 0.25rem 0.25rem; }

.feature-card__body h3 {
  font-size: var(--text-2xl);
  margin-bottom: 0.4rem;
}

.feature-card__body p { font-size: var(--text-lg); line-height: 1.4; }

/* --- Split card (copy one side, media the other) ---------------------------- */

.split-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: var(--radius);
}

.split-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
}

.split-card__copy h3 { font-size: var(--text-5xl); line-height: 1.1; }
.split-card__copy p { font-size: var(--text-lg); line-height: 1.45; }

.split-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.5rem);
}

@media (width <= 768px) {
  .split-card { grid-template-columns: minmax(0, 1fr); padding: 1rem; gap: 1rem; }
  .split-card__copy { padding: 0.75rem; }
  .split-card img { aspect-ratio: 4 / 3; }
}

/* --- Plain nav -------------------------------------------------------------
   No pill, no surface: links sit straight on the page. */

.navbar--plain .navbar__bar { padding: 0; }

@media (width >= 901px) {
  .navbar--plain .navbar__toggle { display: none; }
}

/* --- Step panel -------------------------------------------------------------
   Oversized numbered service block: eyebrow and title top-left, detail
   bottom-left, a tilted image on the right, big index in the corner. */

.step-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-height: 34rem;
  padding: 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.step-panel__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.step-panel__title {
  font-size: var(--text-7xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.step-panel__detail { margin-top: auto; }

.step-panel__detail h4 {
  font-size: var(--text-3xl);
  margin-bottom: 0.4rem;
}

.step-panel__detail p {
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: 1.45;
}

.step-panel__index {
  position: absolute;
  top: 2rem;
  right: 2.5rem;
  font-size: var(--text-8xl);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.step-panel__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-panel__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.5rem);
  transform: rotate(-2deg);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
}

@media (width <= 900px) {
  .step-panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 1.5rem;
  }
  .step-panel__index { top: 1rem; right: 1.25rem; font-size: var(--text-6xl); }
  .step-panel__media img { transform: none; }
}

/* --- Floating review card ---------------------------------------------------- */

.float-review {
  position: absolute;
  z-index: 3;
  right: 3vw;
  bottom: 3rem;
  width: min(24rem, 40vw);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  border-radius: var(--radius);
}

.float-review p { font-size: var(--text-lg); line-height: 1.45; }

@media (width <= 900px) {
  .float-review {
    position: static;
    width: auto;
    margin-top: 2rem;
  }
}

/* --- Person card --------------------------------------------------------------- */

.person-card { border-radius: var(--radius); overflow: hidden; }

.person-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.person-card:hover img { transform: scale(1.04); }

.person-card__body { padding: 1.25rem 1.35rem; }
.person-card__body h3 { font-size: var(--text-2xl); }
.person-card__body p { font-size: var(--text-lg); opacity: 0.7; }

/* --- Gradient heading ------------------------------------------------------
   Fades the tail of a headline into the accent colour. Wrap the words that
   should pick up the accent in <span>. */

.grad-head {
  background: linear-gradient(100deg, var(--foreground) 35%, var(--accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* --- Trust pills ------------------------------------------------------------ */

.trust-pill {
  display: flex;
  align-items: center;
  flex: none;
  height: 2.75rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  font-size: var(--text-lg);
  white-space: nowrap;
}

/* --- Glow icon card ---------------------------------------------------------
   Icon in a filled circle with a soft bloom, copy pinned to the bottom. */

.glow-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 17rem;
  padding: 2rem;
  border-radius: var(--radius);
}

.glow-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: auto;
  border-radius: 50%;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  box-shadow: 0 0 2.5rem color-mix(in srgb, var(--accent) 55%, transparent);
}

.glow-card__icon svg { width: 1.25rem; height: 1.25rem; }
.glow-card h3 { font-size: var(--text-3xl); }
.glow-card p { font-size: var(--text-lg); line-height: 1.45; }

/* --- Status pill (pulsing dot) ------------------------------------------------ */

.eyebrow--dot { display: inline-flex; align-items: center; gap: 0.5rem; }

.eyebrow--dot::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* --- Before and after card ------------------------------------------------------ */

.ba-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
}

.ba-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.ba-card__side { position: relative; }

.ba-card__side img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.5rem);
}

.ba-card__side span {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 75%, transparent);
  color: var(--background);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ba-card__body { padding: 0 0.4rem 0.4rem; }
.ba-card__body h3 { font-size: var(--text-2xl); }
.ba-card__body p { font-size: var(--text-base); opacity: 0.7; }

/* --- Comparison lists ------------------------------------------------------------ */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.compare__col { padding: 2rem; border-radius: var(--radius); }

.compare__col h3 {
  font-size: var(--text-3xl);
  margin-bottom: 1.25rem;
}

.compare__col ul { display: flex; flex-direction: column; gap: 0.9rem; }

.compare__col li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-lg);
  line-height: 1.4;
}

.compare__col svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15rem; }
.compare__col--bad { opacity: 0.75; }
.compare__col--bad li { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.compare__col--good svg { color: var(--accent); }

@media (width <= 768px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__col { padding: 1.5rem; }
}

/* --- Form -------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-lg);
  transition: border-color 0.2s;
}

.form textarea { min-height: 8rem; resize: vertical; }

.form input::placeholder,
.form textarea::placeholder { color: color-mix(in srgb, var(--foreground) 72%, transparent); }

.form input:focus,
.form select:focus,
.form textarea:focus { outline: none; border-color: var(--accent); }

/* A select keeps its system appearance unless told otherwise, which on a dark
   form means a white box with black text sitting in the middle of it. */
.form select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.4rem center, right 1.05rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
/* The list itself is drawn by the operating system and cannot inherit the
   page's transparency, so its colours are set explicitly to stay readable. */
.form select option { background: var(--background); color: var(--foreground); }

.form button {
  width: 100%;
  height: 3.25rem;
  margin-top: 0.5rem;
  border-radius: var(--radius);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: transform 0.2s ease-out;
}

.form button:hover { transform: translateY(-2px); }

.form__status {
  font-size: var(--text-base);
  line-height: 1.4;
  min-height: 1.2em;
}

/* --- Testimonial ------------------------------------------------------------ */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  border-radius: var(--radius);
}

.testimonial__stars { display: flex; gap: 0.25rem; color: var(--accent); }
.testimonial__stars svg { width: 1.1rem; height: 1.1rem; }

.testimonial p { font-size: var(--text-lg); line-height: 1.5; }

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.testimonial__author img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__author strong { display: block; font-size: var(--text-lg); }
.testimonial__author span { font-size: var(--text-base); opacity: 0.7; }

/* --- Media card ----------------------------------------------------------
   Image in a padded card with a floating label pill. Used by menus, service
   grids, gallery tiles, room lists: anything that is picture plus name. */

.media-card {
  padding: 0.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.media-card__media { position: relative; }

.media-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.25rem);
  transition: transform 0.5s ease-out;
}

.media-card:hover img { transform: scale(1.04); }

.media-card__label {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  padding: 0.5rem;
}

.media-card__label h3,
.media-card__label h4 {
  font-size: var(--text-3xl);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (width <= 768px) {
  .media-card { padding: 0.25rem; }
  .media-card__label { bottom: 0.25rem; left: 0.25rem; right: 0.25rem; padding: 0.25rem; }
}

/* --- Grids ---------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (width <= 1024px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 768px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .grid--3,
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Filter chips --------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding-inline: 1.5rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  overflow: hidden;
}

.filter__fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s;
}

.filter__label {
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}

.filter[aria-pressed='true'] .filter__fill { opacity: 1; }
.filter[aria-pressed='true'] .filter__label { color: var(--primary-cta-text); }

.filterable { transition: opacity 0.35s ease, transform 0.35s ease; }

/* --- Accordion ------------------------------------------------------------ */

.accordion { display: flex; flex-direction: column; gap: 0.75rem; }

.accordion__item {
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  cursor: pointer;
}

.accordion__trigger h3 { font-size: var(--text-2xl); }

.accordion__trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  transition: transform 0.3s ease-out;
}

.accordion__item[data-open='true'] .accordion__trigger svg { transform: rotate(45deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.accordion__item[data-open='true'] .accordion__panel { grid-template-rows: 1fr; }

.accordion__panel > div { overflow: hidden; }

.accordion__panel p {
  padding: 0 1.5rem 1.25rem;
  font-size: var(--text-lg);
  line-height: 1.45;
}

/* --- Marquee -------------------------------------------------------------- */

.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--marquee-gap, 1rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  gap: var(--marquee-gap, 1rem);
  padding-right: var(--marquee-gap, 1rem);
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  to { transform: translateX(-100%); }
}

/* --- Scroll reveal -------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.is-in > * { opacity: 1; transform: none; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  padding-block: 3.75rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.site-footer__wordmark {
  width: 100%;
  white-space: nowrap;
  line-height: 0.8;
  font-size: var(--text-9xl);
  text-align: center;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.footer-cols ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-cols a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-lg);
  font-weight: 500;
  transition: opacity 0.2s, transform 0.2s;
}

.footer-cols a:hover { opacity: 0.75; transform: translateX(2px); }
.footer-cols svg { width: 0.9em; height: 0.9em; flex: none; }

.footer-legal { font-size: var(--text-sm); opacity: 0.6; }

@media (width <= 768px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { gap: 2.5rem; }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  .btn, .btn .ltr, .media-card img { transition: none; }
}

/* --- Pricing tier ------------------------------------------------------------
   Appended as the component library grew. Name, price, blurb, feature list, CTA. */

.tier {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  border-radius: var(--radius);
}

.tier__name { font-size: var(--text-2xl); opacity: 0.7; }

.tier__price {
  font-size: var(--text-6xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Blurb lines only. The name and the price are <p> children too, and a bare
   `.tier > p` outranks their own classes, which shrank every price to body
   size. */
.tier > p:not(.tier__name):not(.tier__price) { font-size: var(--text-lg); line-height: 1.4; opacity: 0.8; }
.tier__price small { font-size: 0.4em; font-weight: 500; letter-spacing: 0; opacity: 0.6; }
.tier .btn { margin-block: 0.75rem; align-self: stretch; }
.tier ul { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.25rem; }

.tier li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-lg);
  line-height: 1.4;
}

.tier li svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--accent); }
.tier--featured { outline: 1px solid var(--primary-cta); }

/* --- Destination card ---------------------------------------------------------- */

.dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 24rem;
  padding: 1.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
}

.dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease-out;
}

.dest-card:hover img { transform: scale(1.05); }

.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 55%, transparent 85%);
}

/* The image is a direct child, so it used to pick up z-index 2 from the rule
   below and paint straight over the scrim, leaving white caption text sitting
   on an unshaded photo. It stays on its own layer underneath. */
.dest-card > img { z-index: 0; }
.dest-card > *:not(img) { position: relative; z-index: 2; }
.dest-card__region { font-size: var(--text-base); opacity: 0.85; margin-bottom: 0.35rem; }
.dest-card h3 { font-size: var(--text-3xl); margin-bottom: 0.4rem; }
.dest-card p { font-size: var(--text-lg); line-height: 1.4; opacity: 0.9; margin-bottom: 1rem; }

/* ==========================================================================
   MOBILE REFINEMENTS
   Phones are the majority of traffic on every one of these templates, so the
   phone layout gets its own pass rather than inheriting desktop values.
   ========================================================================== */

@media (width <= 768px) {
  /* Desktop section rhythm is too generous on a short screen: 80px top and
     bottom spends a fifth of the viewport on empty space per section. */
  .section { padding-block: 3.25rem; }
  .stack { gap: 1.75rem; }

  /* 44px is the Apple HIG minimum for a reliable tap. 40px misses. */
  .btn { height: 2.75rem; padding-inline: 1.25rem; }
  /* Footer and overlay-menu links are text, so they inherit the line height and
     land around 20px. On a phone they are navigation and need a thumb-sized
     target, which is height rather than font size. */
  .footer-nav a,
  .navbar__panel a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .filter { height: 2.75rem; padding-inline: 1.25rem; }
  .navbar__toggle { width: 2.75rem; height: 2.75rem; }
  .accordion__trigger { padding: 1.1rem 1.25rem; min-height: 3.25rem; }
  .contact-method__icon { min-width: 3.5rem; min-height: 3.5rem; }

  /* Form fields need 16px or iOS zooms the whole page on focus. */
  .form input,
  .form textarea { font-size: max(16px, var(--text-lg)); padding: 0.9rem 1.1rem; }
  .form button { height: 3.25rem; }

  /* Section headings run full width and sit tighter to their body copy. */
  .section-head { gap: 0.4rem; }
  .section-head h2 { line-height: 1.12; }
  .section-head > p { line-height: 1.5; }

  /* Cards get breathing room without wasting the narrow column. */
  .testimonial,
  .glow-card,
  .step-card,
  .tier,
  .compare__col { padding: 1.5rem; }

  .split-card,
  .step-panel { gap: 1.25rem; }

  /* Marquee items that were sized for desktop crowd a phone. */
  .marquee { --marquee-gap: 0.75rem; }

  /* Footers stack rather than squeezing three columns into 340px. */
  .footer-legal-bar { flex-direction: column; gap: 0.75rem; }
  .site-footer__inner { gap: 2rem; }
}

/* Very small phones: drop to a single column everywhere and tighten again. */
@media (width <= 400px) {
  .grid--4,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .footer-nav { grid-template-columns: minmax(0, 1fr) !important; }
  .section { padding-block: 2.75rem; }
}