/* ==========================================================================
   LP1  /kodaikanal-resorts/

   Built to the Luxury Resort Landing Page design reference. Structure, section
   order, card treatments and rhythm follow that file. Colour stays inside the
   brand palette: where the reference used off palette tints for hairlines and
   secondary text, those are Night and White at low opacity so everything
   remains derivable from the five approved colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header. White and sticky, sitting above the hero rather than over it, so
   the positive lockup keeps its light ground for the whole page.
   -------------------------------------------------------------------------- */

/* Glass. The translucent ground is declared only where the blur is actually
   supported: without it, a dark wordmark over a scrolling photograph would be
   sitting on nothing but 60% white, so everything else keeps a near opaque
   ground instead. The saturate stops the blurred content going flat and grey. */
.lp1-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp1-header {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

.lp1-header .site-header__inner { min-height: 0; padding-block: 14px; }

/* The reference sets the mark by height rather than width. See README: this
   is below the 140px minimum in Brand Guidelines p.10 and is applied on
   client instruction. */
.lp1-header .site-header__logo img { width: auto; height: 52px; }

/* Both actions are buttons on this page, so they can sit close enough to read
   as one pair. The 24px default is for the other headers, where a text phone
   number would run into the CTA at this distance. */
.lp1-header .site-header__actions { gap: 10px; }

/* The header CTA takes the shared .btn size. No override here, so it matches
   the hero and enquiry buttons exactly. */

/* --------------------------------------------------------------------------
   Placeholders. Diagonal hatch plus a monospace slot label, so a block that
   is still waiting on photography can never be mistaken for a finished one.
   Delete the .ph rules once real images are in.
   -------------------------------------------------------------------------- */

.ph {
  /* The placeholders are figures, and the UA stylesheet gives every figure
     margin: 1em 40px. Left in, that pushed each one 40px right of the image it
     stands in for and overflowed the page on a phone. */
  margin: 0;
  position: relative;
  aspect-ratio: var(--ar, 3 / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background-color: #e9ede3;
  background-image: repeating-linear-gradient(135deg, rgba(43, 87, 72, 0.1) 0 10px, rgba(43, 87, 72, 0) 10px 20px);
}

.ph::after {
  content: attr(data-slot);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
}

.ph--dark {
  background-color: #24463a;
  background-image: repeating-linear-gradient(135deg, rgba(156, 176, 128, 0.16) 0 10px, rgba(156, 176, 128, 0) 10px 20px);
}
.ph--dark::after { color: var(--moss); }

/* --------------------------------------------------------------------------
   SECTION A. Hero
   -------------------------------------------------------------------------- */

.lp1-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: min(88vh, 760px);
  min-height: 520px;
  padding-bottom: clamp(40px, 5vw, 56px);
  background: var(--forest);
  color: var(--white);
  overflow: hidden;
}

/* isolate keeps the tint's multiply blend inside the media stack instead of
   letting it reach the section background behind it. */
.lp1-hero__media {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
}

.lp1-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The light green cast. Multiply rather than a flat overlay, so the footage
   keeps its own contrast instead of being washed to a single tone. */
.lp1-hero__tint {
  position: absolute;
  inset: 0;
  background: var(--moss);
  mix-blend-mode: multiply;
  opacity: 0.62;
}

/* Legibility for the white type. Neutral black, applied after the tint so the
   blend cannot lift it. */
.lp1-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.74) 100%);
}

/* Tap to play, mobile only. */
.lp1-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: var(--white);
  cursor: pointer;
}
.lp1-hero__play svg { width: 26px; height: 26px; margin-left: 3px; }
.lp1-hero__play[hidden] { display: none; }

/* Keeps .wrap's measure, so the left edge lands on the same editorial grid as
   the header logo and every section below. */
.lp1-hero__body { position: relative; z-index: 2; }
.lp1-hero__body > * { margin: 0; }

/* The location eyebrow was removed from the hero on client instruction. The
   place names still carry in the H1 and in the trust band below it. */
.lp1-hero__body h1 {
  font-weight: 300;
  font-size: clamp(34px, 5.4vw, 63px);
  line-height: 1.08;
  max-width: 16ch;
}

.lp1-hero__lede {
  margin-top: 24px !important;
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

/* The rate line and the reply-time line were removed from the hero on client
   instruction. Rates still appear in Section E and in the FAQ. */
.lp1-hero__body .btn-row { margin-top: 34px; }

/* --------------------------------------------------------------------------
   Hero buttons

   A colour wipes up from the base while the button lifts. Unhurried by
   design: 420ms on an ease out curve, no bounce, nothing that draws attention
   to itself. The fill is a pseudo element behind the label rather than a
   background swap, so the change reads as movement instead of a flicker.
   -------------------------------------------------------------------------- */

.lp1-hero .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp1-hero .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                     /* above the button's own ground, under the label */
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp1-hero .btn:hover,
.lp1-hero .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.lp1-hero .btn:hover::before,
.lp1-hero .btn:focus-visible::before { transform: scaleY(1); }

/* Pressing settles it back down, so the click has a physical end. */
.lp1-hero .btn:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.09s;
}

/* Primary: white ground, Morning Moss wipes up, label stays Night. */
.lp1-hero .btn--on-dark::before { background: var(--moss); }
.lp1-hero .btn--on-dark:hover,
.lp1-hero .btn--on-dark:focus-visible { background: var(--white); color: var(--night); }

/* Secondary: outlined, Mist White wipes up, label turns Night. */
.lp1-hero .btn--ghost-on-dark::before { background: var(--white); }
.lp1-hero .btn--ghost-on-dark:hover,
.lp1-hero .btn--ghost-on-dark:focus-visible {
  background: transparent;
  color: var(--night);
  border-color: var(--white);
}

/* The default focus ring is Deep Forest, which all but disappears on the hero. */
.lp1-hero .btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* The same lift, without the wipe, on the buttons further down the page. */
.lp1-cta .btn {
  transition:
    background 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.lp1-cta .btn:active { transform: translateY(0); box-shadow: none; }

/* Motion off means motion off. The colour change still signals the hover. */
@media (prefers-reduced-motion: reduce) {
  .lp1-hero .btn:hover,
  .lp1-hero .btn:focus-visible,
  .lp1-cta .btn:hover { transform: none; box-shadow: none; }
  .lp1-hero .btn::before { transition: none; }
}

/* --------------------------------------------------------------------------
   Trust band and at a glance
   -------------------------------------------------------------------------- */

/* Four proof points, each in its own cell with a hairline between. The cells
   are a grid rather than a flex row so the rules land in the same place on
   every breakpoint, and so a wrapped item never inherits a leading divider.

   Each <li> stays a block: as a flex or grid container it would promote every
   text run and every <span> inside it to a separate item, which is what was
   tearing "[4.X] on Google, [XXX] reviews" into four floating fragments. */
.lp1-trustband {
  background: var(--night);
  color: rgba(255, 255, 255, 0.78);
}

.lp1-trustband ul {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-on-dark);
}

.lp1-trustband li {
  display: block;
  padding: 15px 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-on-dark);
}

/* Two up, so the rules form a clean cross rather than a ragged stack. */
@media (min-width: 620px) {
  .lp1-trustband ul { grid-template-columns: 1fr 1fr; }
  .lp1-trustband li:nth-child(odd) { border-right: 1px solid var(--rule-on-dark); }
  .lp1-trustband li:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* One row, vertical rules only. */
@media (min-width: 1000px) {
  .lp1-trustband ul {
    grid-template-columns: repeat(4, 1fr);
    border-top: 0;
  }
  .lp1-trustband li {
    padding-block: 18px;
    border-bottom: 0;
    border-right: 1px solid var(--rule-on-dark);
  }
  .lp1-trustband li:last-child { border-right: 0; }
}

/* At a glance, as a slow marquee. Full bleed, because a ticker that starts and
   stops inside a centred column reads as a bug rather than as motion. */
.lp1-glance {
  background: var(--mist);
  overflow: hidden;
}

.lp1-glance__track {
  display: flex;
  width: max-content;
  padding-block: 26px;
  will-change: transform;
}

.lp1-glance__set {
  display: flex;
  flex: none;
  align-items: center;
}

.lp1-glance__set li {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-left: clamp(28px, 4vw, 56px);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--forest);
}

/* A separator between every item, including across the seam of the loop. */
.lp1-glance__set li::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--moss);
}

@keyframes lp1-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.lp1-glance__track { animation: lp1-marquee 60s linear infinite; }

/* Pointer and keyboard users can hold it still to read. */
.lp1-glance:hover .lp1-glance__track,
.lp1-glance:focus-within .lp1-glance__track { animation-play-state: paused; }

/* No motion at all when the visitor has asked for none. The duplicate set is
   dropped and the strip falls back to the static centred row. */
@media (prefers-reduced-motion: reduce) {
  .lp1-glance__track {
    animation: none;
    width: 100%;
  }
  .lp1-glance__set[aria-hidden="true"] { display: none; }
  .lp1-glance__set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .lp1-glance__set li:last-child::after { display: none; }
}

/* --------------------------------------------------------------------------
   Shared section heading block
   -------------------------------------------------------------------------- */

.lp1-head { margin-bottom: 48px; }
.lp1-head .eyebrow { margin-bottom: 20px; }
.lp1-head h2 { font-weight: 300; }
.lp1-head p {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.78;
}

.section > .wrap > h2 { font-weight: 300; margin-bottom: 44px; }

/* --------------------------------------------------------------------------
   SECTION C + D. Why here, and the six reasons
   -------------------------------------------------------------------------- */

/* The supporting column was removed on client instruction. The heading now
   stands on its own above the six cards, which carry the argument. */
.lp1-why__intro .eyebrow { margin-bottom: 20px; }
/* Sized for a side column rather than a full width band, and held to two
   lines from the widest desktop down to a 320px phone. */
.lp1-why__intro h2 {
  font-weight: 300;
  font-size: clamp(21px, 5.5vw, 32px);
  line-height: 1.16;
  max-width: 24ch;
}

/* Measured for the side column, not the page: the cards sit alongside it. */
.lp1-why__lede {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.75;
  opacity: 0.82;
}

/* In the side column the heading has a third of the width, so it takes a
   scale tied to the column rather than the shared step. Two lines throughout. */
@media (min-width: 1000px) {
  .lp1-why__intro h2 { font-size: clamp(21px, 2.05vw, 28px); }
}

/* Heading holds the left column, the carousel the right.

   Every track uses minmax(0, ...) rather than a bare fr. A grid item defaults
   to min-width: auto, so the carousel's full six card width would otherwise
   push the column, and the whole section, wider than the page. */
.lp1-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
}

@media (min-width: 1000px) {
  .lp1-why__grid {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.7fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
}

/* Carousel. Built on native scrolling with snap points, so it degrades to a
   plain scrollable list without scripting and stays keyboard operable.
   Image led cards: the picture, then the point beneath it. */
.lp1-carousel { min-width: 0; --card-gap: 24px; --card-ar: 4 / 3; }
.lp1-carousel__viewport { position: relative; container-type: inline-size; }

/* Without scripting the mask is a plain scroller with snap points, so the
   whole set is still reachable. Script upgrades it: the mask clips, and the
   track moves on a transform instead. A transform is composited, so the glide
   runs off the main thread and cannot be stuttered by layout work, which
   animating scrollLeft against mandatory snap always could. */
.lp1-carousel__mask {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lp1-carousel__mask::-webkit-scrollbar { display: none; }
.lp1-carousel__mask:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

.lp1-carousel.is-enhanced .lp1-carousel__mask {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;              /* horizontal is ours, vertical is the page's */
}

.lp1-reasons {
  display: grid;
  grid-auto-flow: column;
  /* One card on a phone, where two would leave each about 160px wide.
     Exactly two from tablet up; the rest arrive on swipe or the arrows. */
  grid-auto-columns: 100%;
  gap: var(--card-gap);
}

.lp1-carousel.is-enhanced .lp1-reasons {
  will-change: transform;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Nothing eases while a finger is on it: the cards track the drag exactly. */
.lp1-carousel.is-dragging .lp1-reasons { transition: none; }
.lp1-carousel.is-dragging { cursor: grabbing; }

@media (min-width: 640px) {
  .lp1-reasons { grid-auto-columns: calc((100% - var(--card-gap)) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  .lp1-carousel.is-enhanced .lp1-reasons { transition: none; }
}

.lp1-reasons li { scroll-snap-align: start; }

/* 4:5 matches the supplied frames exactly, so nothing is cropped. */
.lp1-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--mist);
  transition: filter 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-reasons li:hover .lp1-card__img { filter: brightness(0.94); }

/* Controls ---------------------------------------------------------------- */

/* Arrows sit over the track edges, vertically centred. */
.lp1-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--night);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  transition: background 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-carousel__arrow svg { width: 20px; height: 20px; }
.lp1-carousel__arrow:hover { background: var(--forest); border-color: var(--forest); color: var(--white); }

/* Centred on the picture, not on the whole card. The caption sits below the
   image, so a plain top: 50% would drop the arrows into the text. Container
   units let the image height be derived from the card width. Browsers without
   cqw keep the 50% above. */
.lp1-carousel__arrow { top: calc(100cqw * 5 / 4 / 2); }

@media (min-width: 640px) {
  .lp1-carousel__arrow { top: calc((100cqw - var(--card-gap)) / 2 * 5 / 4 / 2); }
}

.lp1-carousel__arrow--prev { left: 0; transform: translate(-50%, -50%); }
.lp1-carousel__arrow--next { right: 0; transform: translate(50%, -50%); }

/* Never let an arrow hang off the screen edge on a phone. */
@media (max-width: 999px) {
  .lp1-carousel__arrow--prev { left: 8px; transform: translateY(-50%); }
  .lp1-carousel__arrow--next { right: 8px; transform: translateY(-50%); }
}


/* The dot row was removed on client instruction. The arrows remain the
   control, and the carousel is still swipeable and keyboard scrollable. */

.lp1-reasons h3 { margin: 20px 0 8px; font-size: 20px; line-height: 1.3; }
.lp1-reasons p { margin: 0; font-size: 15px; line-height: 1.7; opacity: 0.78; }
.lp1-reasons a { color: var(--forest); font-weight: 500; text-decoration: none; }

/* --------------------------------------------------------------------------
   SECTION E. Rooms
   -------------------------------------------------------------------------- */

.lp1-rooms { background: var(--mist); }

.lp1-roomgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}

.lp1-roomgrid > li {
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-roomgrid > li:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* 5:4 matches the supplied frames exactly, so nothing is cropped. */
.lp1-room__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  background: var(--mist);
}

.lp1-roomgrid__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 26px 26px 30px;
}

.lp1-roomgrid h3 { font-size: 20px; line-height: 1.3; }

/* How many of each there are, sat on the photograph. Real inventory rather
   than a scarcity device: two of the six types are one of a kind, and a guest
   choosing between them should know that before they enquire. */
.lp1-roomgrid > li { position: relative; }

.lp1-roomgrid__count {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  margin: 0;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--forest);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp1-roomgrid__count {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
  }
}
/* Bedrooms, view and capacity as three marks rather than a sentence, so the
   six cards can be compared down a column instead of read one by one. */
.lp1-roomgrid__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp1-roomgrid__specs li {
  padding: 5px 10px;
  border: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night);
  opacity: 0.72;
}
/* A pool is the thing people scan this section for, so it is the one mark that
   carries colour. */
.lp1-roomgrid__specs li[data-key="pool"] {
  border-color: var(--moss);
  color: var(--forest);
  font-weight: 500;
  opacity: 1;
}


.lp1-roomgrid__foot {
  /* The description used to take up the slack and hold this row down. With it
     gone the auto margin does that job, so the rate and the link still line up
     across all six cards however long a title runs. */
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.lp1-roomgrid__rate {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--forest);
}

.lp1-roomgrid__cta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
  color: var(--forest);
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-roomgrid__cta:hover { opacity: 0.7; }

/* --------------------------------------------------------------------------
   SECTION F. What the rate covers
   -------------------------------------------------------------------------- */

/* Two panels sharing an edge, so they read as one statement split in two
   rather than as two unrelated lists. What is owned sits on Deep Forest;
   what costs extra sits on Mist behind a keyline. The colour sorts them
   before a word is read, and the mark confirms it. */
.lp1-covers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
  .lp1-covers__grid { grid-template-columns: 1fr 1fr; }
}

.lp1-covers__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
}

.lp1-covers__panel--in { background: var(--forest); color: var(--white); }
.lp1-covers__panel--extra { background: var(--mist); border: 1px solid var(--rule); }

@media (min-width: 820px) {
  /* The shared edge belongs to one side only, so it stays a hairline. */
  .lp1-covers__panel--extra { border-left: 0; }
}

.lp1-covers__title {
  margin: 0 0 26px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.lp1-covers__panel--in .lp1-covers__title { color: var(--moss); }
.lp1-covers__panel--extra .lp1-covers__title { color: var(--sage); }

.lp1-covers__list { flex: 1; }

.lp1-covers__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  font-size: 16px;
  line-height: 1.5;
}

.lp1-covers__list li + li { border-top: 1px solid var(--rule); }
.lp1-covers__panel--in .lp1-covers__list li + li { border-top-color: var(--rule-on-dark); }
.lp1-covers__list li:first-child { padding-top: 0; }

/* A tick for what is already yours. Drawn from two borders so it stays a
   keyline at any size, in keeping with the mark itself. */
.lp1-covers__panel--in .lp1-covers__list li::before {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: 5px;
  border-left: 1.5px solid var(--moss);
  border-bottom: 1.5px solid var(--moss);
  transform: rotate(-45deg);
}

/* A plus for what can be added, echoing the FAQ marker. */
.lp1-covers__panel--extra .lp1-covers__list li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 2px;
  background:
    linear-gradient(var(--sage), var(--sage)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--sage), var(--sage)) center / 1.5px 100% no-repeat;
}

.lp1-covers__foot {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
  max-width: none;
  opacity: 0.8;
}
.lp1-covers__panel--in .lp1-covers__foot { border-top-color: var(--rule-on-dark); }

/* Still used by the drive times list further down the page. */
.lp1-covers__label {
  margin: 0 0 22px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage);
}

/* --------------------------------------------------------------------------
   SECTION G. The property
   -------------------------------------------------------------------------- */

.lp1-property { background: var(--forest); color: var(--white); }
.lp1-property .lp1-head h2 { max-width: 24ch; }
.lp1-property .lp1-head p { opacity: 0.82; }

/* Six panels on one row, after the reference. Closed, a panel shows only its
   title turned down the spine. Hover or keyboard focus opens it: the panel
   takes the room from its neighbours and the photograph fades up behind the
   words. All of it is CSS, so it survives with scripting off.

   Full bleed on purpose, like the trust band and the glance strip. The row is
   a direct child of the section rather than of .wrap, which reaches the edges
   without vw units and so without the scrollbar overflow they cause. */
/* Stacked is the default, not the fallback. A phone has no hover to give, so
   nothing may be hidden behind one: every panel is simply open. The row below
   is the enhancement, on the same 900px breakpoint the rest of the page uses.
   Written this way round there is no width that can fall between two queries. */
.lp1-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp1-panel {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-on-dark);
  background: var(--forest);          /* fallback where color-mix is unknown */
}

/* A ground per panel, so the closed row reads as six things rather than one
   long block. Every one is mixed from Deep Forest, Sage and Night, so the set
   stays derivable from the approved palette instead of introducing new hues.
   The ramp runs dark to light and is kept dark enough throughout for the white
   titles sitting on it. */
.lp1-panel:nth-child(1) { background: color-mix(in srgb, var(--forest) 42%, var(--night)); }
.lp1-panel:nth-child(2) { background: color-mix(in srgb, var(--forest) 72%, var(--night)); }
.lp1-panel:nth-child(3) { background: var(--forest); }
.lp1-panel:nth-child(4) { background: color-mix(in srgb, var(--forest) 74%, var(--sage)); }
.lp1-panel:nth-child(5) { background: color-mix(in srgb, var(--forest) 42%, var(--sage)); }
.lp1-panel:nth-child(6) { background: color-mix(in srgb, var(--sage) 88%, var(--night)); }

.lp1-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A scrim under the words, so they hold over a bright photograph as easily as
   a dark one. */
.lp1-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.22) 44%, rgba(0, 0, 0, 0) 70%);
}

.lp1-panel__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 28px 24px;
}
.lp1-panel__body h3 {
  margin: 0;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.24;
}
.lp1-panel__more > p {
  margin: 10px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.84);
}

/* Six panels on one row, after the reference. Closed, a panel is its colour
   with the title across the foot. Hover or keyboard focus opens it: the panel
   takes room from its neighbours, the photograph slides up over the colour,
   and the subtext opens under the title. All CSS, so it survives without a
   script.

   Full bleed on purpose, like the trust band and the glance strip. The row is
   a direct child of the section rather than of .wrap, which reaches the edges
   without vw units and so without the scrollbar overflow they cause. */
@media (min-width: 900px) {
  .lp1-panels {
    display: flex;
    border-block: 1px solid var(--rule-on-dark);
    /* Makes the row a container so the titles below can be measured against
       its width, which never changes, rather than against a panel's, which
       quadruples on hover. */
    container-type: inline-size;
  }

  .lp1-panel {
    flex: 1 1 0;
    min-width: 0;
    height: clamp(400px, 46vw, 580px);
    aspect-ratio: auto;
    cursor: pointer;
    border-bottom: 0;
    transition: flex-grow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lp1-panel + .lp1-panel { border-left: 1px solid var(--rule-on-dark); }

  /* focus-within covers the keyboard: the panel carries tabindex, so a visitor
     who cannot hover can still open one. */
  .lp1-panel:hover,
  .lp1-panel:focus-within { flex-grow: 3.6; }
  .lp1-panel:focus-visible { outline: 2px solid var(--moss); outline-offset: -5px; }

  /* The photograph waits below the panel and slides up over the colour, which
     is a move the compositor can take on its own. Fading it in instead would
     cross a colour and a photograph through a muddy middle. The slight scale
     settles as it arrives, so the image lands rather than stops. */
  .lp1-panel__img {
    /* Scaled from the top edge, not the centre. About the centre the 1.08
       pushes the image 4% past its own box, which left the last 17px of every
       photograph showing along the foot of a closed panel: the 101% was no
       longer far enough to clear it. */
    transform-origin: 50% 0;
    transform: translateY(102%) scale(1.08);
    transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }
  .lp1-panel:hover .lp1-panel__img,
  .lp1-panel:focus-within .lp1-panel__img { transform: translateY(0) scale(1); }

  .lp1-panel::after { opacity: 0; transition: opacity 0.55s ease 0.15s; }
  .lp1-panel:hover::after,
  .lp1-panel:focus-within::after { opacity: 1; }

  /* 0fr to 1fr opens to the paragraph's own height, so nothing has to be
     measured and no height is hard coded. */
  .lp1-panel__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lp1-panel__more > p {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease 0.18s;
  }
  .lp1-panel:hover .lp1-panel__more,
  .lp1-panel:focus-within .lp1-panel__more { grid-template-rows: 1fr; }
  .lp1-panel:hover .lp1-panel__more > p,
  .lp1-panel:focus-within .lp1-panel__more > p { opacity: 1; }

  /* The title lifts as the subtext arrives, so the two move as one block. */
  .lp1-panel__body {
    transform: translateY(6px);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Held at the width the panel has when it is closed: six equal panels less
     the five dividers between them, less this body's own padding. A panel
     quadruples in width as it opens, and a title free to use that width
     re-wraps partway through the transition, so the words snap onto one line
     instead of riding the lift. Locking the column means the wrap is decided
     once and both states show the same lines. min() keeps the closed panel
     authoritative; where container units are unknown the whole declaration is
     dropped and the title simply behaves as it did before. */
  .lp1-panel__body h3 {
    width: min(100%, calc((100cqw - 5px) / 6 - 48px));
    text-wrap: balance;
  }
  .lp1-panel:hover .lp1-panel__body,
  .lp1-panel:focus-within .lp1-panel__body { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp1-panel,
  .lp1-panel__img,
  .lp1-panel::after,
  .lp1-panel__body,
  .lp1-panel__more,
  .lp1-panel__more > p { transition: none; }
  .lp1-panel__img { transform: none; }
}

/* Motion off should not mean the section stops working. Cancelling the slide
   left every photograph permanently on show, which removed the reveal itself
   rather than just its movement. Hidden by opacity instead, so the panel still
   opens on hover and focus, only without anything travelling. */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .lp1-panel__img { transform: none; opacity: 0; }
  .lp1-panel:hover .lp1-panel__img,
  .lp1-panel:focus-within .lp1-panel__img { opacity: 1; }
}

/* --------------------------------------------------------------------------
   SECTION H. Ayurveda
   -------------------------------------------------------------------------- */

.lp1-ayur__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.lp1-ayur h2 { font-weight: 300; }
/* The rule below sets a top margin on every p in the section, and the eyebrow
   is one. As the first thing in the column that margin is dead space, and it
   pushed the words 24px below the top of the photograph beside them. */
.lp1-ayur .eyebrow { margin-top: 0; margin-bottom: 20px; }
/* No measure of its own. The column below is sized to be the measure, so a
   second cap here only reopened the gap it was meant to close. */
.lp1-ayur p { margin: 24px 0 0; font-size: 17px; line-height: 1.75; }

/* The reference sets this line in italic. Span ships no roman width italic in
   the supplied bundle, and a synthesised oblique on a high contrast serif
   reads as a mistake, so it carries weight and colour instead. */
.lp1-ayur__pull {
  margin-top: 18px !important;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--forest);
}


/* Stacked, the frame has nothing to stretch to, so the image stays in flow
   and the portrait ratio gives the frame its height. Capped on width rather
   than height: a height cap on a full width tablet would crop this portrait
   down to a letterbox strip. */
.lp1-ayur__figure { position: relative; max-width: 420px; }

.lp1-ayur__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--mist);
}

/* Side by side the photograph must not set the section's height. It takes the
   narrower track and is lifted out of flow, so the row is measured from the
   words alone; the frame stretches to that row and the image fills it, from
   the top of the eyebrow to the bottom of the button. Declared after the base
   rule above, which would otherwise win on source order and restore the ratio. */
@media (min-width: 900px) {
  /* Sized so the words reach the right edge. At 0.58 the text column ran 658px
     while nothing in it was wider than 530, which reads as a gap rather than as
     space. The photograph takes the difference: it is bound to the text's
     height, so a wider track crops it rather than making the section taller. */
  .lp1-ayur__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .lp1-ayur__figure { max-width: none; }
  .lp1-ayur__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* --------------------------------------------------------------------------
   SECTION I. Reviews
   -------------------------------------------------------------------------- */

.lp1-reviews { background: var(--mist); }

.lp1-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}

.lp1-quotes > li {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 32px 28px;
  background: var(--white);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-quotes > li:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.lp1-quotes blockquote {
  margin: 0;
  flex: 1;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
}

.lp1-quotes__name {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

/* --------------------------------------------------------------------------
   SECTION J. Getting here
   -------------------------------------------------------------------------- */

/* Declared rather than left to auto-fit, which split into two columns around
   705px on its own. The map rules below have to fire on the same width, and a
   breakpoint that agrees with itself is the only way to guarantee that. Two
   columns at 760 also left both of them under 320px wide. */
.lp1-here__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
  .lp1-here__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.lp1-here h2 { font-weight: 300; }
.lp1-here__grid > div > p { margin: 24px 0 0; max-width: 50ch; font-size: 16px; line-height: 1.75; }
.lp1-here .map { margin-top: 28px; border: 0; }

/* Side by side the map should finish level with the last drive time instead of
   stopping short on a fixed 16:9. The column becomes a stack, the map takes
   whatever height is left under the heading, and the embed is lifted out of
   flow so it fills that height without also dictating it. The floor only
   matters if the list beside it were ever very short. */
@media (min-width: 900px) {
  .lp1-here__grid > div:first-child { display: flex; flex-direction: column; }
  .lp1-here .map {
    flex: 1;
    aspect-ratio: auto;
    min-height: 240px;
    position: relative;
  }
  .lp1-here .map iframe { position: absolute; inset: 0; }
}

.lp1-drives li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.lp1-drives li span:last-child { color: var(--forest); }

.lp1-here .small { margin-top: 28px; opacity: 0.7; }

/* --------------------------------------------------------------------------
   SECTION K. FAQ
   -------------------------------------------------------------------------- */

.lp1-faq { background: var(--mist); }
.lp1-faq .wrap--narrow { max-width: 900px; }
.lp1-faq .faq { border-top: 0; }
.lp1-faq .faq details { border-bottom: 1px solid var(--rule-strong); }
.lp1-faq .faq summary { padding: 24px 0; font-size: 20px; line-height: 1.4; }

/* A plain cross, matching the reference, rather than the rotating rule. */
.lp1-faq .faq summary::after {
  content: "+";
  width: auto;
  height: auto;
  margin-top: 0;
  background: none;
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1;
  color: var(--sage);
  transition: transform 0.3s ease;
}
.lp1-faq .faq details[open] summary::after { transform: rotate(45deg); }

.lp1-faq .faq__a { padding-bottom: 26px; max-width: 66ch; font-size: 16px; line-height: 1.75; opacity: 0.82; }

/* --------------------------------------------------------------------------
   SECTION L. Final CTA
   -------------------------------------------------------------------------- */

/* Deep Forest rather than black, which is the reference's dark green ground
   expressed in the palette. */
/* The ground comes from section--forest on the element. It used to be set
   here by hand, identically, which meant the section never matched any of the
   dark ground rules in base: error text stayed near black on the green, and
   links kept their light ground colour. */

/* A short rule under each column heading, from the reference. */
.lp1-cta__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 22px 0 26px;
  background: rgba(255, 255, 255, 0.45);
}

.lp1-cta__label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--moss);
}

.lp1-cta__block { margin-top: 40px; }
.lp1-cta__block .lp1-cta__label { margin-bottom: 18px; }
.lp1-cta__block p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}
.lp1-cta__block p:last-child { margin-bottom: 0; }
.lp1-cta__block a { color: var(--white); font-weight: 500; text-decoration: none; }
.lp1-cta__block a:hover { opacity: 0.8; }

/* --------------------------------------------------------------------------
   Floating labels

   The reference puts the question inside the field. A placeholder alone
   disappears the moment anyone types, leaving unlabelled boxes, so the real
   <label> is what floats: same look, and the question survives being answered.
   -------------------------------------------------------------------------- */

/* The form panel. Light ground so the fields can be real boxes rather than
   translucent rules on green, which is what made them hard to see. */
.lp1-cta__panel {
  background: var(--mist);
  color: var(--night);
  padding: clamp(24px, 2.6vw, 40px);
}
.lp1-cta__panel .lp1-cta__label { margin-bottom: 22px; color: var(--sage); }

.lp1-form { gap: 18px; }
.lp1-form .field { gap: 8px; }

/* Labels sit above the field and read as a question, not as a system label:
   sentence case, no tracking, at a size meant to be read rather than scanned. */
.lp1-form .field > label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--night);
}

/* The reference marks required fields in red. There is no red in the palette,
   and the asterisk carries its meaning by convention and position rather than
   by colour, so it takes Sage instead of introducing a sixth hue. */
.field__req { color: var(--sage); }

.lp1-form .field input {
  min-height: 52px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 0;                 /* square, like every other box on the page */
  color: var(--night);
  /* 16px keeps iOS from zooming the page when a field takes focus. */
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp1-form .field input::placeholder { color: var(--night); opacity: 0.38; }

.lp1-form .field input:focus {
  outline: none;
  border-color: var(--forest);
  border-width: 1px;
  padding: 0 16px;
  box-shadow: 0 0 0 3px rgba(97, 135, 100, 0.3);
}
.lp1-form .field.is-invalid input { border-color: var(--night); }
.lp1-form .field__error { margin: 2px 0 0; color: var(--night); }

.lp1-form__submit {
  margin-top: 6px;
  gap: 12px;
  min-height: 54px;
}
.lp1-form__submit svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp1-form__submit:hover svg { transform: translateX(4px); }

.lp1-cta__panel .form__done { border-color: var(--rule-strong); }

@media (prefers-reduced-motion: reduce) {
  .lp1-form__submit svg { transition: none; }
  .lp1-form__submit:hover svg { transform: none; }
}

/* Declared rather than left to auto-fit, which split into two around 705px and
   gave each side barely 300px. It also has to agree with the balancing rules
   below, and a breakpoint that agrees with itself is the only way to be sure. */
.lp1-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}

@media (min-width: 900px) {
  .lp1-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* The form panel is the taller of the two, so the text column was stretching
     to match it and then stopping short, which left the panel looking hung on
     nothing. Dropping the last block to the foot ends both columns together
     while they still begin together. */
  .lp1-cta__grid > div:first-child {
    display: flex;
    flex-direction: column;
    /* Matched to the panel's padding so the two columns line up on their words
       rather than on their boxes: the heading sits level with "Enquiry form",
       and the last line level with the button. Invisible here, since this
       column has no ground of its own. */
    padding-block: clamp(24px, 2.6vw, 40px);
  }
  .lp1-cta__grid > div:first-child > .lp1-cta__block:last-child { margin-top: auto; }

  /* The panel is content sized, so once the text column grew past it the card
     stopped short of the row. Filling means the two grounds end together. */
  .lp1-cta__grid > div:last-child { display: flex; }
  .lp1-cta__panel { flex: 1; display: flex; flex-direction: column; }

  /* Filling the card is not the same as filling it evenly. The fields stack
     from the top and left the button floating with 51px of dead space beneath
     it, while the text opposite ran all the way down. The form takes the whole
     card and the button drops to the foot, so both columns finish on a line. */
  .lp1-cta__panel .lp1-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* The leftover height is shared between the fields rather than dumped into
       one gap above the button. An auto margin was only taking half of it and
       leaving the button short of the floor; spreading it is both exact and
       easier to read, since the fields breathe instead of one seam opening. */
    justify-content: space-between;
  }
}

.lp1-cta h2 { font-weight: 300; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.15; }
.lp1-cta__grid > div > p { margin: 24px 0 0; max-width: 42ch; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.78); }

.lp1-cta__call { margin-top: 32px !important; font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.lp1-cta__call a { color: var(--moss); font-weight: 500; text-decoration: none; }

.lp1-cta .form { gap: 18px; }
.lp1-cta .btn { margin-top: 14px; }
.lp1-cta .form__note { color: rgba(255, 255, 255, 0.55); }

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

.lp1-footer { padding-block: 56px 32px; }

.lp1-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  justify-content: space-between;
  align-items: flex-start;
}

.lp1-footer__brand { flex: 1 1 340px; max-width: 440px; }
.lp1-footer__reach { flex: 0 1 auto; }

.lp1-footer__logo { width: 150px; height: auto; margin-bottom: 20px; }

.lp1-footer__grid p {
  max-width: 46ch;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.72;
}
.lp1-footer__grid p:last-child { margin-bottom: 0; }
.lp1-footer__grid a { text-decoration: none; }
.lp1-footer__grid a:hover { opacity: 0.78; }

/* Sits at full strength, unlike the copy under it. */
.lp1-footer__grid .lp1-footer__label {
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  opacity: 1;
}

/* The divider belongs to this row, not to the copyright paragraph. Carried on
   a p it inherited the 62ch reading measure and stopped short of the width. */
.lp1-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-on-dark);
}
.lp1-footer__bottom p { max-width: none; margin: 0; font-size: 12px; opacity: 0.55; }

.lp1-footer__credit a {
  color: var(--moss);
  text-decoration: none;
}
.lp1-footer__credit a:hover,
.lp1-footer__credit a:focus-visible {
  opacity: 0.78;
}

/* --------------------------------------------------------------------------
   Sticky mobile bar
   -------------------------------------------------------------------------- */

.lp1-stickybar {
  grid-template-columns: 1fr 1fr 1.2fr;
  background: var(--white);
  border-top: 1px solid var(--rule);
}
.lp1-stickybar a {
  min-height: 60px;
  color: var(--forest);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lp1-stickybar a + a { border-left: 1px solid var(--rule); }
.lp1-stickybar a.is-primary { background: var(--forest); color: var(--white); }
.lp1-stickybar a.is-primary:active { background: var(--night); }

/* --------------------------------------------------------------------------
   A section held back on purpose. Used where a page has no honest proof to
   show yet, so the gap is visible in review rather than quietly filled with
   proof borrowed from somewhere else.
   -------------------------------------------------------------------------- */

.lp1-blocked {
  max-width: 68ch;
  padding: 28px 30px;
  border: 1px dashed var(--rule-strong);
  background: var(--white);
}
.lp1-blocked p { font-size: 15px; line-height: 1.75; }
.lp1-blocked p:last-child { margin-bottom: 0; }
.lp1-blocked__tag,
.lp4-blocked__tag {
  margin-bottom: 14px !important;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}