/* Motion edition: the existing brand palette, with alternating yellow stages.
   Type is governed by style.css. Images retain the real brand photography. */
:root { --muted: #b2aba0; --section: clamp(72px, 8vw, 116px); }
.hero { min-height: min(900px, 100svh); align-items: center; }
.hero__media { inset: 0; border-radius: 0; overflow: hidden; }
.hero__scrim { background: linear-gradient(90deg, var(--bg) 0%, rgba(11,10,9,.95) 22%, rgba(11,10,9,.52) 43%, transparent 70%); }
.hero__content { width: min(590px, 51%); }
.hero__title { line-height: 1.02; letter-spacing: -.035em; }
.hero__inner { padding-top: 132px; padding-bottom: 76px; }
.hero__copy { max-width: 40ch; margin-top: 24px; }
.hero__actions { margin-top: 28px; }
/* A class that sets display outranks the browser's own [hidden] rule, and a
   hidden overlay that still lays out will sit over the page eating clicks.
   Settle it once, here, for everything. */
[hidden] { display: none !important; }

.brand { width: 103px; }
.brand--footer { width: 152px; }
.button { border-radius: 4px; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(102%); transition: transform .45s var(--ease); }
.button--primary:hover { color: var(--bg); border-color: var(--ink); }
.button--primary:hover::before { transform: translateY(0); }
.button:active { scale: .975; }
.button i { transition: transform .45s var(--ease); }
.button:hover i { transform: translate(3px,-3px) rotate(8deg); }
/* Company cards share the radius the other cards on the page use. */
.entity { border-radius: 4px; }
/* The About band is full bleed, so it takes no radius and no second column. */
/* 4px is the card radius and it disappears on a band this wide, so the
   video takes the larger corner the site gives its other media. */
.group__figure { border-radius: 16px; }
/* The frame never scales, so it always spans the page; the footage inside is
   what moves, and it is clipped to the frame. */
.group__figure { will-change: auto; }
.group__video, .group__figure img { will-change: transform; }
.mv__inner { gap: 0; }
.mv__block { border: 0; border-top: 1px solid var(--line); background: transparent; padding-inline: 0; }
.mv__block + .mv__block { padding-left: var(--gap); }
.mv__block:first-child { padding-right: var(--gap); }
.values, .kiosk { background: var(--yellow); color: var(--on-yellow); --muted: #494014; --line: rgba(16,15,13,.23); --eyebrow: var(--on-yellow); }
.values { position: relative; overflow: hidden; }
.values__grid { border: 0; gap: 20px; }
.value { padding: 28px 0; border-top: 1px solid var(--line); }
.value + .value { border-left: 0; }
.value i { display: inline-block; color: var(--on-yellow); font-size: 38px; transform: translate(var(--repel-x,0px),var(--repel-y,0px)) rotate(var(--repel-r,0deg)); }
.value h3 { margin-top: 32px; }
.value p { max-width: 24ch; }
.value:hover { border-color: var(--on-yellow); }
/* The radius belongs to the card, which clips the image with it. */
.doing__item { border-radius: 4px; }
/* What We Do reads centred end to end: heading, lede and the line under each
   card. The lede is held to a comfortable measure so the centring has a shape
   rather than running the full width of the shell. */
.doing .shell { text-align: center; }
.doing .lede { max-width: 62ch; margin-inline: auto; }
.doing__item p { text-align: center; text-wrap: pretty; }
.products { overflow: clip; background: var(--bg); }
.products__head { position: relative; }
/* One centred column: label, title, description. */
.products.has-rail .products__head .lede { max-width: 62ch; margin: clamp(14px, 1.4vw, 20px) auto 0; }
.pan { perspective: 1100px; cursor: grab; touch-action: pan-y; }
.pan.is-dragging { cursor: grabbing; user-select: none; }
.product { perspective: 900px; }
.product__media { border-radius: 12px; transform: rotateY(var(--card-yaw,0deg)) rotateZ(var(--card-roll,0deg)) translateY(var(--card-lift,0px)); transform-style: preserve-3d; }
.product__media img { aspect-ratio: 4 / 5; user-select: none; -webkit-user-drag: none; }
.products.has-rail .pan { padding-top: 8px; padding-bottom: 4px; }
/* The rail carries the same top and bottom band as every other section, so the
   gap from the previous section's edge down to the eyebrow reads identically
   here. That can make the section taller than the viewport, which is why the
   pin is anchored on the section's centre rather than its top. */
.products.has-rail { padding-block: var(--section); }
/* A fifth-of-the-viewport card is tall on a wide screen, and the panel has to
   fit 100svh. Budget: header 74 + heading block ~230 + rail chrome ~82 +
   the section's bottom padding. Cap the image at what is left, so the rail
   never has to be squeezed and the space under the names stays honest. */
.products.has-rail .product__media img { max-height: calc(100svh - 375px); }
/* The rail is moved by its arrows now, so it must not offer a grab handle. */
.products.has-rail .pan { cursor: default; }
/* Each card is placed by the ring, so the track's own centring padding would
   only push the whole row off by one offset. */
.products.has-rail .pan__track { padding-inline: 0; }
.products.has-rail .product { will-change: transform; }

.pan__nav { display: flex; justify-content: center; gap: 14px; margin-top: clamp(24px, 2.8vw, 38px); }
.pan__step { display: grid; width: 46px; height: 46px; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  color: var(--ink); font-size: 18px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.pan__step:hover:not([disabled]) { border-color: var(--yellow); background: var(--yellow); color: var(--on-yellow); }
.pan__step[disabled] { opacity: .3; cursor: default; }
.pan__step:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 1023px) { .pan__nav { display: none; } }
.product h3 { font-size: var(--fs-h3); }
.packs { background: var(--bg-soft); }
.packs__grid { gap: 24px; }
.pack { border-radius: 4px; }
.pack--lead { border-radius: 90px 4px 4px 4px; }
.kiosk__media { border-radius: 4px 4px 110px 4px; }
/* Kiosk copy sits on the vertical centre of the photo beside it, rather than
   starting at the section's top band. */
.kiosk__inner { align-items: center; }
.plan__block { transition: background .4s var(--ease), border-color .4s var(--ease); }
.kiosk :focus-visible, .values :focus-visible { outline-color: var(--on-yellow); }
.costs { grid-template-columns: 1fr; gap: 0; }
.costs__group { display: grid; grid-template-columns: minmax(150px, .38fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 92px); padding: 28px 0; border-top: 1px solid var(--line); }
.costs__group h4 { grid-column: 1; align-self: start; padding: 0; border: 0; color: var(--yellow); }
.costs__group > ul, .costs__group > .costs__foot { grid-column: 2; }
.costs__group > ul { margin: 0; }
.costs__group > .costs__foot { margin-top: 14px; }

/* Facilities is a calm two-column reading stage: the kiosk stays pinned while
   the operating systems are revealed and opened on the right. */
.facilities__layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(46px, 7vw, 124px); align-items: start; }
.facilities__sticky { position: sticky; top: calc(var(--header-h) + 28px); padding-bottom: 24px; }
.facilities__kicker { margin-bottom: 18px; color: var(--eyebrow); font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.facilities__intro h2 { max-width: 12ch; }
.facilities__lead { max-width: 35ch; margin-top: 22px; color: var(--muted); font-size: var(--fs-lede); line-height: 1.6; }
.facilities__visual { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-top: clamp(26px, 3.2vw, 44px); border-radius: 4px 76px 4px 4px; background: var(--panel); }
.facilities__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.facilities__visual:hover img { transform: scale(1.045); }
.facilities__visual::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(0deg, rgba(8,7,6,.82), transparent); pointer-events: none; }
.facilities__visual figcaption { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; display: flex; justify-content: space-between; gap: 16px; color: #fff; font-size: var(--fs-caption); letter-spacing: .04em; text-transform: uppercase; }
.facilities__visual figcaption span:last-child { color: var(--yellow); }
.facilities__hint { display: flex; gap: 10px; align-items: center; margin-top: 18px; color: var(--muted); font-size: var(--fs-caption); }
.facilities__hint i { color: var(--yellow); font-size: 20px; }
.facilities__content { min-width: 0; padding-top: clamp(0px, 2vw, 24px); }
.facilities__list { max-width: none; margin-top: 0; perspective: 1000px; counter-reset: facility; }
.facility { position: relative; padding-inline: 0; counter-increment: facility; transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.facility.is-open { background: linear-gradient(90deg, rgba(247, 212, 23, .08), transparent 46%), var(--panel); box-shadow: 0 10px 24px rgba(0, 0, 0, .07); }
.facility__toggle { min-height: 94px; padding: 22px 24px 22px 58px; }
.facility__toggle::before { content: counter(facility, decimal-leading-zero); position: absolute; left: 0; color: var(--muted); font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; transition: color .35s var(--ease); }
.facility__toggle i { display: grid; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; place-items: center; }
.facility__toggle:hover::before, .facility.is-open .facility__toggle::before, .facility.is-scroll-active .facility__toggle::before { color: var(--yellow); }
.facility.is-open .facility__toggle { color: var(--yellow); }
.facility__panel p { max-width: 58ch; padding: 0 24px 30px 58px; }
/* Every section carries a running label. Matched to .facilities__kicker so
   the two are indistinguishable wherever they sit next to each other. */
.eyebrow { font-size: var(--fs-label); letter-spacing: .16em; }

@media (min-width: 1024px) and (max-height: 740px) {
}
@media (max-width: 1023px) {
  .hero__media { left: 32%; top: 94px; }
  .hero__content { width: min(580px,65%); }
  .product__media { transform: none; }
}
@media (max-width: 900px) {
  .hero { min-height: 760px; }
  .hero__media { inset: 88px 20px 28px 24%; }
  .hero__content { width: min(560px,80%); }
  .hero__scrim { background: linear-gradient(90deg,var(--bg),rgba(11,10,9,.72) 35%,rgba(11,10,9,.12)); }
  .values__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .value:last-child { grid-column: 1 / -1; }
  .value:last-child p { max-width: 50ch; }
  .facilities__layout { grid-template-columns: 1fr; gap: 42px; }
  .facilities__sticky { position: static; padding-bottom: 0; }
  .facilities__intro h2 { max-width: 16ch; }
  .facilities__visual { max-width: 720px; aspect-ratio: 16 / 8; }
  .facilities__content { padding-top: 0; }
  .costs__group { grid-template-columns: 1fr; row-gap: 12px; }
  .costs__group h4, .costs__group > ul, .costs__group > .costs__foot { grid-column: 1; }
}
@media (max-width: 640px) {
  .hero { min-height: 780px; min-height: min(860px,110svh); align-items: flex-end; }
  .hero__media { inset: 85px 20px 40% 20px; border-radius: 46% 46% 4px 4px; }
  .hero__scrim { background: linear-gradient(0deg,var(--bg) 0%,var(--bg) 23%,rgba(11,10,9,.88) 35%,transparent 67%); }
  .hero__inner { padding-top: 320px; padding-bottom: 48px; }
  .hero__content { width: 100%; }
  .hero__copy { max-width: 36ch; }
  .hero__title > span { display: inline-block; margin-right: .12em; }
  .hero__title { max-width: 390px; }
  .mv__block + .mv__block, .mv__block:first-child { padding-inline: 0; }
  .values__grid { gap: 10px 22px; }
  .value h3 { margin-top: 20px; }
  .facility { padding-inline: 16px; }
  .facility__toggle { padding-left: 46px; padding-right: 0; }
  .facility__toggle::before { left: 0; }
  .facility__panel p { padding-right: 0; padding-left: 46px; }
  .facility__toggle { gap: 12px; }
  .facility__toggle i { width: 30px; height: 30px; font-size: 16px; }
  .facilities__visual { aspect-ratio: 16 / 10; border-radius: 4px 48px 4px 4px; }
  .facilities__visual figcaption { right: 14px; bottom: 12px; left: 14px; font-size: 10px; }
  .facilities__lead { max-width: 34ch; }
  .costs__group { padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .value i, .product__media { transform: none; }
}

/* Homepage editorial sequence. */
.hero__media { inset: 0; border-radius: 0; }
.home-franchise__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap); align-items: center; }
.home-franchise__benefits { list-style: none; margin-bottom: 28px; }
.home-franchise__benefits li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.home-news { padding-block: var(--section); background: var(--bg-soft); }
.home-news__head { display: flex; justify-content: space-between; align-items: end; gap: var(--gap); }
.news-empty { margin-top: 40px; padding-block: 32px; border-top: 1px solid var(--line); }
.news-empty p { font-size: var(--fs-h3); }
/* The rule grows under the words only, never under the arrow, and only on
   hover - the same underline the footer and nav links use. The gradient
   style.css puts on .text-link itself would span the icon too, so it is
   cleared here and re-applied to the label. */
.text-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; color: var(--yellow); background: none; text-decoration: none; }
.text-link > span { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur) var(--ease); }
.text-link i { transition: transform var(--dur) var(--ease); }
.news-item a:hover .text-link > span, .text-link:hover > span { background-size: 100% 1px; }
.news-item a:hover .text-link i, .text-link:hover i { transform: translate(3px, -3px); }
.news-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gap); margin-top: 40px; }
.news-item { padding-top: 0; border-top: 0; }
.news-item__image { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 20px; }
.news-item__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-item a:hover img { transform: scale(1.04); }
.news-item time { display: block; color: var(--muted); font-size: var(--fs-caption); margin-bottom: 12px; }
.news-item h3 { font-size: var(--fs-h3); }
.home-cta { padding-block: var(--section); background: var(--yellow); color: var(--on-yellow); --eyebrow: var(--on-yellow); }
.home-cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-cta h2 { max-width: 19ch; margin-inline: auto; }
.home-cta p { max-width: 45ch; margin-top: 22px; margin-inline: auto; font-size: var(--fs-lede); line-height: 1.6; }
.home-cta .button { margin-top: clamp(28px, 3vw, 42px); background: var(--on-yellow); color: var(--yellow); border-color: var(--on-yellow); flex-shrink: 0; }
.home-cta .button:hover { color: var(--on-yellow); }
.home-cta :focus-visible { outline-color: var(--on-yellow); }
@media (max-width: 900px) {
 .home-franchise__inner, .news-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
 .hero__media { inset: 0 0 25%; border-radius: 0; }
 .hero__media img { object-position: 65% center; }
 .hero__scrim { background: linear-gradient(0deg,var(--bg) 0%,var(--bg) 22%,rgba(11,10,9,.85) 40%,rgba(11,10,9,.05) 75%); }
}

/* Calendar reads as one centred column, the same shape as the Products head:
   heading, then the note, then the week's image underneath. */
.events__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.events__note { max-width: 52ch; margin-inline: auto; }

/* ---------- Franchise Plan ------------------------------------------------
   The commercial ask takes the brand's own yellow, the band the ticker, the
   kiosk and the closing call already use. The heading reads near-black
   straight on that ground; the two cards invert to the page's own near-black
   so they carry weight against it, and inside them brand yellow comes back as
   the accent it is everywhere else. Every colour here is a site token: the
   section only redefines which one each role points at. */

.plan {
  --ink: var(--on-yellow);
  --muted: var(--on-yellow-muted);
  --line: var(--on-yellow-line);
  --line-strong: rgba(16, 15, 13, .42);
  --eyebrow: var(--on-yellow);
  position: relative; background: var(--yellow); color: var(--on-yellow);
}
.plan .shell { text-align: center; }
.plan__intro { width: min(100%, 760px); margin-inline: auto; }
.plan .lede { max-width: 52ch; margin-inline: auto; color: var(--muted); }

/* Near-black cards on the yellow, lifted by a shadow rather than an outline
   so the ground carries straight up to their edge. */
.plan__block { --pad: clamp(26px, 2.6vw, 40px);
  position: relative; overflow: hidden; padding: var(--pad); border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--on-yellow);
  box-shadow: 0 24px 54px -30px rgba(16, 15, 13, .8);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.plan__block:hover { border-color: rgba(255, 255, 255, .28); transform: translateY(-3px);
  box-shadow: 0 32px 68px -30px rgba(16, 15, 13, .85); }
.plan__block::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow) 50%, transparent); }

/* The heading sits to the left with its rule under it, so the card reads as a
   spec sheet rather than a centred notice. */
.plan__block h3 { font-size: var(--fs-h3); color: #f5f3ee; text-align: left; }
.plan__block h3::after { content: ""; display: block; width: 34px; height: 2px;
  margin: 14px 0 0; background: var(--yellow);
  transform: scaleX(var(--rule, 1)); transform-origin: left; }

/* Each line is led by its own icon in a ring, the way the record above states
   its claims. The row lights the ring and brightens the words together, so the
   whole line is the target rather than a dot at the front of it. */
.plan__block ul { display: grid; width: auto; max-width: none;
  margin: clamp(18px, 2vw, 26px) 0 0; border-top: 0; }
.plan__block li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 18px); align-items: center; margin-inline: 0;
  padding: clamp(15px, 1.6vw, 19px) 0; border-bottom: 0; text-align: left;
  font-size: var(--fs-body); line-height: 1.5; color: #f5f3ee; }
.plan__block li::before { content: none; }
.plan__block li i { display: grid; width: 44px; height: 44px; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
  color: var(--yellow); font-size: 21px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.plan__block li::after { content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); z-index: -1;
  transition: background .35s var(--ease); }
.plan__block li + li::after { border-top: 1px solid rgba(255, 255, 255, .14); }
.plan__block li:hover::after { background: rgba(255, 255, 255, .05); }
.plan__block li:hover i { border-color: var(--yellow); background: var(--yellow); color: var(--on-yellow); }

/* The button matches the cards: near-black, with brand yellow as its type. */
/* The goals card leads on its figure instead of on a list. The two cards no
   longer share a shape, which is the point: one states what a partner gets,
   the other states where the company is going. */
/* Tabular figures so the card holds still while the number counts: with
   proportional digits every step would change the width and nudge the layout. */
.plan__figure { margin-top: clamp(20px, 2.4vw, 30px); margin-left: -.045em;
  color: var(--yellow); font-family: var(--font-display);
  font-size: clamp(56px, 6.4vw, 92px); font-weight: 700; letter-spacing: -.055em;
  line-height: .86; font-variant-numeric: tabular-nums; }
.plan__figure-note { margin-top: clamp(8px, 1vw, 14px); color: #f5f3ee;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.3; }
.plan__block--goals ul { margin-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 4px; }
.plan__block--goals li + li::after { border-top: 0; }

.plan .button--primary { border-color: var(--on-yellow); background: var(--on-yellow); color: var(--yellow); }
.plan .button--primary:hover { border-color: #000; background: #000; color: var(--yellow); }
.plan :focus-visible { outline-color: var(--on-yellow); }

/* ---------- Why Choose Us, and how Franchise Plan differs -----------------
   Why Choose Us is an open record: full-width hairline rows on the page's own
   ground, each filling with brand yellow from the left under the pointer with
   its type inverted onto that yellow. The fill sits on ::after behind the
   row's content, which is why each row isolates itself and the layer takes
   z-index -1. */

/* Only where there is a real pointer. A touch screen has no way to leave a
   row, so the wipe would stay painted on whichever one was tapped last. */
@media (hover: hover) and (pointer: fine) {
  .why__row { transition: color .5s var(--ease); }
  .why__row::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--yellow); transform: scaleX(var(--wipe, 0)); transform-origin: left;
    transition: transform .55s var(--ease); }
  .why__row:hover { --wipe: 1; color: var(--on-yellow); }

  .why__row::before { transition: color .5s var(--ease); }
  .why__row:hover::before { color: var(--on-yellow-muted); }
  .why__row i { transition: color .5s var(--ease), transform .55s var(--ease); }
  .why__row:hover i { color: var(--on-yellow); transform: translateX(8px) rotate(-8deg); }
}


/* ---------- About: the group -----------------------------------------------
   The section carries one invitation. The three companies live inside the
   sheet, paged with arrows, so the page itself stays short. */

.group__explore { margin-top: clamp(26px, 3vw, 40px); }
.entity-records { display: none; }

/* The company sheet ------------------------------------------------------- */
.sheet { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center;
  padding: clamp(18px, 3.5vh, 48px) clamp(18px, 4vw, 48px); }
/* This class sets display, which outranks the browser's own [hidden] rule.
   Without this the closed sheet stays laid out - invisible at opacity 0, but
   still a fixed layer over the whole page swallowing every click on it. */
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(6, 5, 4, .78);
  backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s var(--ease); }
.sheet__panel { position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .76fr); align-items: stretch;
  width: min(100%, 920px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; background: var(--panel);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.sheet__text { padding: clamp(28px, 3.4vw, 48px); }
.sheet__media { position: relative; margin: 0; background: var(--bg-soft); }
.sheet__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The panel is one image away from having no left edge to the photograph, so
   a hairline keeps the two halves apart on any picture. */
.sheet__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1px;
  background: rgba(255, 255, 255, .14); }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }
.sheet__close { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; width: 40px; height: 40px;
  place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(11, 10, 9, .62); backdrop-filter: blur(8px);
  color: #fff; font-size: 18px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.sheet__close:hover { border-color: var(--yellow); background: var(--yellow); color: var(--on-yellow); }
.sheet__label { color: var(--yellow); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.sheet__name { margin-top: 14px; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.sheet .entity__meta { margin-top: 20px; }
.sheet__nav { display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); }
.sheet__step { display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  color: var(--ink); font-size: 17px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sheet__step:hover { border-color: var(--yellow); background: var(--yellow); color: var(--on-yellow); }
.sheet__step:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.sheet__count { margin-left: auto; color: var(--muted); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .16em; }
.sheet .entity__role { margin-top: 16px; font-size: var(--fs-body); }

@media (max-width: 720px) {
  .sheet__panel { grid-template-columns: minmax(0, 1fr); }
  .sheet__media { order: -1; aspect-ratio: 16 / 10; }
  .sheet__media::before { inset: auto 0 0 0; width: auto; height: 1px; }
}

/* ---------- Kiosk enquiry form --------------------------------------------
   The same panel the company sheet uses, in one column, with the fields set
   on the page's own dark ground so the overlay is read as a layer above the
   yellow section rather than part of it. */

/* A form can outgrow the screen, so the panel is held inside the padding and
   the fields scroll within it rather than the panel running off both edges.
   The single row is minmax(0, 1fr) and the pane inside it min-height: 0 -
   without both, a grid item refuses to shrink below its content and the last
   field is cut off by the panel's own overflow instead of scrolling. */
.sheet--form .sheet__panel { grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); width: min(100%, 560px); max-height: 100%; }
/* Tightened so the whole form stands on one screen: nothing here should
   need scrolling. The overflow rule stays as a floor for a viewport too
   short for any layout to fit. */
.sheet--form .sheet__text { padding: clamp(22px, 2.6vw, 34px); min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; }
.enquiry__note { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }

.enquiry { display: grid; gap: 11px; margin-top: clamp(16px, 2vw, 22px); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; }
.field { display: grid; gap: 5px; }
.field > span { color: var(--muted); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: 4px; background: rgba(255, 255, 255, .04); color: var(--ink);
  font: inherit; font-size: var(--fs-small); line-height: 1.5;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.field textarea { resize: vertical; min-height: 60px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(155, 149, 139, .7); }
.field input:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--yellow);
  background: rgba(255, 255, 255, .06); }
/* Only after a submit attempt, so a field is never red before it is filled. */
.enquiry.is-checked :invalid { border-color: #e2725b; }

.enquiry__send { justify-content: center; margin-top: 3px; }
/* No reserved height: an empty status must not push the button off screen. */
.enquiry__status:empty { display: none; }
.enquiry__status { color: var(--yellow); font-size: var(--fs-caption); line-height: 1.5; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phone. --------------------------------------------------------
   One column, one axis: everything reads down the middle. The hero fills the
   screen and centres over the photograph instead of sitting in a band under
   an arched crop, and buttons give back the side padding they need on a wide
   row but not on a 375px one. */
@media (max-width: 640px) {
  /* Hero: the photograph is the whole screen, the words sit on top of it. */
  .hero { min-height: 100svh; align-items: center; }
  .hero__inner { padding-top: 0; padding-bottom: 0; }
  .hero__media { inset: 0; border-radius: 0; }
  .hero__media img { object-position: 58% center; }
  .hero__scrim { background:
    linear-gradient(180deg, rgba(11,10,9,.72) 0%, rgba(11,10,9,.42) 34%,
                            rgba(11,10,9,.58) 66%, rgba(11,10,9,.9) 100%); }
  .hero__content { width: 100%; text-align: center; }
  .hero__title { max-width: none; }
  .hero__title > span { margin-right: 0; }
  .hero__copy { max-width: 32ch; margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__actions .button { flex: 0 1 auto; }

  /* Section heads and prose. */
  .kiosk__inner, .kiosk__body, .why .shell, .home-news__head, .news-item,
  .group__story, .products__head, .footer__grid > * {
    text-align: center;
  }
  .kiosk__copy, .why .lede, .news-item p, .group__story .lede {
    margin-inline: auto;
  }
  .home-news__head { flex-direction: column; align-items: center; }
  .group__story .button, .kiosk__body .button { margin-inline: auto; }

  /* The plan cards' own headings, and the short rule under them. */
  .plan__block h3 { text-align: center; }
  .plan__block h3::after { margin-inline: auto; transform-origin: center; }

  /* Rows that pair a mark with a line of text stack, mark on top. */
  .why__row, .plan__block li, .spec {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; text-align: center;
  }
  .why__row i, .plan__block li i { margin: 0; }

  /* Footer columns read down the middle like the rest of the page.
     .brand is a block with a fixed width, so text-align alone will not move
     it - the logo needs its own auto margins. */
  .brand--footer { margin-inline: auto; }
  .footer__links { align-items: center; }
  .footer__brand > p, .footer__signup > p { margin-inline: auto; }
  .footer__social { justify-content: center; }
  .footer__contact > a { justify-content: center; }
  .footer__bottom { align-items: center; text-align: center; }

  /* A 375px row has no room to spend on side padding. */
  .button { padding-inline: 16px; gap: 10px; }
}

/* The kiosk frame's long bottom-right sweep is the desktop morph's resting
   shape, and initMorphs only runs from 901px up. Below that the corner has
   nothing to animate into, so all four are matched instead. */
@media (max-width: 900px) {
  .kiosk__media { border-radius: 4px; }
}

/* Rail on a narrow screen: one card sits in the middle of the viewport, its
   neighbours peek in from both sides, and the same two arrows the desktop
   rail uses move it one card at a time from underneath. */
@media (max-width: 1023px) {
  .products:not(.has-rail) .pan {
    --rail-card: min(78vw, 340px);
    padding-bottom: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }
  /* Spacers, not padding: a flex row's trailing padding is dropped from the
     scroll extent, which would stop the last card short of the centre. */
  .products:not(.has-rail) .pan__track { padding-inline: 0; }
  .products:not(.has-rail) .pan__track::before,
  .products:not(.has-rail) .pan__track::after {
    content: "";
    flex: 0 0 calc((100vw - var(--rail-card)) / 2 - var(--rail-gap) / 2);
  }
  .products:not(.has-rail) .product {
    flex: 0 0 var(--rail-card);
    scroll-snap-align: center;
  }
  .products:not(.has-rail) .pan__nav {
    display: flex;
    padding-bottom: var(--section);
  }
}

/* The menu panel gets the same "you are here" mark as the header bar. */
.mobile-menu__nav a.is-active { color: var(--yellow); }