/* ============================================================================
   Up Cafe — mobile experience layer.

   Loaded after the compiled brand stylesheet and after refinements.css, so a
   rule here only ever has to beat the desktop defaults. Everything is scoped
   to phones (`max-width: 767px`) unless a comment says otherwise — the tablet
   and desktop layouts are deliberately left exactly as they were.

   The pieces that make this feel like an app rather than a shrunken website:
     1. Foundations   — touch behaviour, tap feedback, fluid display type.
     2. App chrome    — compacting header and the full-height navigation sheet
                        (≤1023px: this is the touch layout, tablet included).
     3. Dock          — a thumb-zone bar with the four things a café guest
                        actually opens a phone for: call, directions, menus.
     4. Rails         — full-bleed, snapping, momentum scrollers for the little
                        strips of content (welcome strip, gallery).
     5. Sections      — one pass of composition polish per homepage block.
     6. Details       — menu plates, forms, focus, safe areas.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Foundations
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    /* One gutter token so the full-bleed rails can cancel the container
       padding exactly, at every phone width. */
    --mobile-gutter: 24px;
    --dock-height: 58px;
    --radius-card: 20px;
    --hero-photo-height: clamp(300px, 88vw, 420px);
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 20px;
  }
}

@media (max-width: 767px) {
  /* iOS inflates body text in landscape unless told otherwise, and the
     300ms tap delay is only removed by declaring the gesture as a tap. */
  html {
    -webkit-text-size-adjust: 100%;
  }

  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role='button'] {
    touch-action: manipulation;
  }

  /* A phone has no hover, so the hover lift that desktop buttons use never
     makes sense here. Presses get a short, physical squish instead — the
     same "it moved when I touched it" feedback native apps give. */
  .button,
  .circle-button,
  .food-arrow,
  .menu-control-item,
  .gallery-item,
  .text-link,
  .mobile-dock-item,
  .mobile-nav-list a,
  .review-dots > button,
  .footer-socials > a {
    transition: transform 0.12s ease, opacity 0.12s ease, background 0.2s ease, border-color 0.2s ease;
  }
}

@media (hover: none) and (max-width: 767px) {
  .button:active,
  .circle-button:active,
  .food-arrow:active,
  .menu-control-item:active,
  .gallery-item:active,
  .menu-plate:active,
  .text-link:active,
  .mobile-dock-item:active,
  .mobile-nav-list a:active,
  .footer-socials > a:active {
    transform: scale(0.97);
  }

  .button:hover {
    transform: none;
  }

  .offer-image-link:hover .offer-photo-frame > img,
  .gallery-item:hover > img {
    transform: none;
  }
}

@media (max-width: 767px) {
  /* Headlines break where the eye wants them to, not where the box runs out. */
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  .section-heading > p,
  .hero-description,
  .offer-content > p:not(.eyebrow),
  .catering-copy > p:not(.eyebrow),
  .story-copy > p:not(.eyebrow),
  .visit-copy > p:not(.eyebrow) {
    text-wrap: pretty;
  }

  h2 {
    font-size: clamp(30px, 9.7vw, 39px);
    line-height: 1.08;
  }

  h3 {
    line-height: 1.22;
  }
}

/* ---------------------------------------------------------------------------
   2. App chrome — compacting header + navigation sheet
   --------------------------------------------------------------------------- */

/* The header keeps its own height in one variable so the sheet below it, the
   sticky offsets and the scroll anchor padding can never disagree. */
@media (max-width: 1023px) {
  :root {
    --header-h: 100px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 80px;
  }
}

/* Scrolling down hands the header back to the content: it condenses to a slim
   bar and lifts off the page with a hairline shadow. Scrolling up (or landing
   on a new page) restores it. */
html.u-header-compact {
  --header-h: 64px;
}

@media (max-width: 1023px) {
  .site-header {
    transition: box-shadow 0.25s ease;
  }

  .header-inner {
    height: var(--header-h);
    transition: height 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .site-header.is-scrolled {
    box-shadow: 0 10px 26px #1b1a1912, 0 1px 0 var(--line);
  }

  .site-header .brand img {
    transition: width 0.25s ease, height 0.25s ease;
  }

  .site-header.is-scrolled .brand img {
    width: 40px;
    height: 44px;
  }
}

@media (max-width: 767px) {
  .site-header.is-scrolled .brand {
    font-size: 18px;
    gap: 10px;
  }

  .site-header.is-scrolled .brand-sub {
    display: none;
  }

  .brand {
    min-height: 44px;
  }

  /* A comfortable thumb target, and the icon flips to a cross while the
     sheet is open (the label stays "Open menu" for assistive tech — the
     expanded state is carried by aria-expanded). */
  .menu-toggle {
    width: 48px;
    height: 48px;
    background: #fff;
    border-color: #cdd5c6;
  }

  .menu-toggle:active {
    transform: scale(0.94);
  }
}

/* The sheet itself: a full-height panel of large, calm rows that opens under
   the still-visible header, so the header's own button closes it again. */
.mobile-nav {
  top: 100%;
  left: 0;
  right: 0;
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: var(--cream);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
  .mobile-nav {
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    padding: 6px 0 max(28px, env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px #1b1a191a;
  }

  .mobile-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
  }
}

html.u-nav-open {
  overflow: hidden;
}

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px 26px 0;
}

.mobile-nav-eyebrow {
  margin-bottom: 10px;
}

.mobile-nav-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.mobile-nav-list > li {
  border-bottom: 1px solid var(--line);
  animation: mobile-nav-row 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.mobile-nav-list > li:nth-child(1) {
  animation-delay: 0.03s;
}

.mobile-nav-list > li:nth-child(2) {
  animation-delay: 0.07s;
}

.mobile-nav-list > li:nth-child(3) {
  animation-delay: 0.11s;
}

.mobile-nav-list > li:nth-child(4) {
  animation-delay: 0.15s;
}

@keyframes mobile-nav-row {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.mobile-nav-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 2px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.15;
  color: var(--ink);
}

.mobile-nav-list a > em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9aa392;
}

.mobile-nav-list a > .icon {
  width: 20px;
  height: 20px;
  color: var(--deep-green);
}

/* The old dropdown styled its last link as the call to action with a
   `:last-child` rule. Every block in the new sheet needs its own colour, so
   that legacy rule is neutralised where it would otherwise leak. */
.mobile-nav .mobile-nav-quick > a {
  color: var(--ink);
  font-weight: 700;
}

.mobile-nav .mobile-nav-foot a {
  color: var(--muted);
  font-weight: 400;
}

.mobile-nav .footer-socials > a {
  color: var(--ink);
  font-weight: 700;
}

.mobile-nav-list a[aria-current='page'] {
  color: var(--deep-green);
}

.mobile-nav-list a[aria-current='page'] > em {
  color: var(--deep-green);
}

/* Two quick actions, sized for a thumb and laid out as tiles. */
.mobile-nav-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.mobile-nav-quick > a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 15px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.mobile-nav-quick > a > em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

.mobile-nav-quick .icon {
  width: 21px;
  height: 21px;
  color: var(--deep-green);
}

.mobile-nav-cta {
  width: 100%;
  min-height: 54px;
  margin-bottom: 22px;
  font-size: 14px;
}

/* The legacy `.mobile-nav a` rule outranks `.button`, so the call to action
   states its own layout instead of inheriting a plain link box. */
.mobile-nav .mobile-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 15px 22px;
  line-height: 1.3;
}

.mobile-nav-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.mobile-nav-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}

.mobile-nav-foot .footer-socials > a {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}

@keyframes mobile-nav-sheet-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Alpine class-based transitions (no Tailwind utilities needed, so the
   compiled bundle stays untouched). */
.mobile-nav-enter {
  transition: opacity 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mobile-nav-enter-start {
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-nav-enter-end {
  opacity: 1;
  transform: none;
}

.mobile-nav-leave {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mobile-nav-leave-start {
  opacity: 1;
  transform: none;
}

.mobile-nav-leave-end {
  opacity: 0;
  transform: translateY(-8px);
}

/* ---------------------------------------------------------------------------
   3. Dock — the thumb-zone action bar
   --------------------------------------------------------------------------- */

.mobile-dock {
  display: none;
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--cream) 93%, transparent);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px #1b1a190f;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease, visibility 0s linear 0s;
}

@media (max-width: 767px) {
  .mobile-dock {
    display: grid;
  }
}

/* Hidden while the footer owns the bottom of the screen (it carries the same
   links), while the navigation sheet or the lightbox is open, and while a form
   field is focused and the keyboard is up. */
.mobile-dock.is-hidden {
  transform: translateY(115%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease, visibility 0s linear 0.32s;
}

.mobile-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--dock-height);
  padding: 8px 4px;
  border-left: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.mobile-dock-item:first-child {
  border-left: 0;
}

.mobile-dock-item .icon {
  width: 20px;
  height: 20px;
  color: var(--deep-green);
}

.mobile-dock-item[aria-current='page'] {
  color: var(--deep-green);
  background: var(--sage-light);
}

/* ---------------------------------------------------------------------------
   4. Rails — full-bleed, snapping scrollers
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .strip-items,
  .gallery-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--mobile-gutter) * -1);
    padding-inline: var(--mobile-gutter);
  }

  .strip-items::-webkit-scrollbar,
  .gallery-grid::-webkit-scrollbar {
    display: none;
  }

  /* The welcome strip becomes three quiet capsules instead of a 2x2 grid, in a
     rail that takes focus as a group so it can be scrolled with a keyboard. */
  .strip-items {
    min-height: 0;
    gap: 9px;
    padding-block: 13px;
  }

  .strip-items:focus-visible {
    outline: 3px solid var(--deep-green);
    outline-offset: -3px;
  }

  .strip-items > span {
    flex: 0 0 auto;
    scroll-snap-align: start;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: #fff;
    font-size: 9px;
    letter-spacing: 0.07em;
    white-space: nowrap;
  }

  .strip-items > span:last-child {
    grid-column: auto;
  }

  /* The gallery becomes a peeking filmstrip: the next photo is always half
     visible, which is what tells a thumb there is more to the right. */
  .gallery-grid {
    gap: 12px;
    padding-block: 4px 12px;
  }

  .gallery-grid > .gallery-item {
    flex: 0 0 auto;
    width: min(72vw, 290px);
    scroll-snap-align: center;
  }
}

/* ---------------------------------------------------------------------------
   5. Sections — one pass of composition polish per homepage block
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Hero ---------------------------------------------------------------- */
  .hero {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .hero-copy > .eyebrow {
    margin-bottom: 18px;
  }

  .hero-description {
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .hero-buttons {
    gap: 10px;
  }

  .hero-buttons .button {
    min-height: 52px;
    padding: 14px 18px;
    font-size: 13px;
  }

  .hero-location {
    align-items: center;
    min-height: 48px;
    margin-top: 18px;
    padding: 4px 2px;
  }

  .hero-main-photo {
    height: var(--hero-photo-height);
    border-radius: 210px 210px 14px 14px;
    /* The horizontal drag belongs to the photo carousel; the page keeps the
       vertical one. */
    touch-action: pan-y;
  }

  /* The photo is absolutely positioned, so this box is what reserves its room:
     without it the arch would paint straight over the welcome strip. */
  .hero-art {
    min-height: var(--hero-photo-height);
    margin-left: 0;
    margin-right: 0;
  }

  .hero-food-controls {
    right: 12px;
    bottom: 12px;
    gap: 6px;
    padding: 5px 8px;
  }

  .food-arrow {
    width: 46px;
    height: 46px;
  }

  .food-arrow .icon {
    width: 17px;
    height: 17px;
  }

  .aroha-seal {
    height: 88px;
    width: 88px;
    right: -10px;
    top: 16px;
  }

  .aroha-seal > svg:not(.icon) {
    height: 88px;
    width: 88px;
  }

  .aroha-seal > .icon {
    left: 33px;
    top: 33px;
    width: 22px;
    height: 22px;
  }

  /* Feature cards ------------------------------------------------------- */
  .section-heading {
    gap: 16px;
    margin-bottom: 26px;
  }

  .offer-grid {
    gap: 34px;
  }

  .offer-image-link {
    height: clamp(228px, 62vw, 264px);
    margin-bottom: 42px;
    border-radius: var(--radius-card);
  }

  .offer-photo-frame {
    border-radius: var(--radius-card);
  }

  /* The label sits on a soft scrim so it stays legible over any photo. The
     scrim is the last thing painted, so it needs an explicit layer of its
     own to sit under the label and the arrow. */
  .offer-photo-frame::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: auto 0 0 0;
    height: 96px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: linear-gradient(to top, #1b1a19a8, #1b1a1900);
    pointer-events: none;
  }

  /* The caption stays in the top corner: the bottom edge belongs to the arrow
     and to the category badge hanging over it. */
  .photo-label {
    left: 16px;
    top: 15px;
    font-size: 9px;
    padding: 8px 11px;
  }

  .photo-arrow {
    z-index: 2;
    bottom: 13px;
    right: 13px;
    width: 48px;
    height: 48px;
  }

  .category-badge {
    width: 112px;
    height: 116px;
    bottom: -36px;
  }

  .offer-content {
    padding-top: 20px;
  }

  .offer-content h3 {
    margin: 8px 0 11px;
    font-size: 24px;
  }

  /* Catering block ------------------------------------------------------ */
  .catering-section {
    padding-block: 44px;
  }

  /* The mobile block used to drop its photo entirely and read as plain text.
     Keeping a short, rounded band of the catering boxes restores the appetite
     appeal while the copy keeps the vertical rhythm tight. */
  .catering-photos {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 0;
  }

  .catering-main {
    height: clamp(190px, 52vw, 230px);
    border-radius: var(--radius-card);
  }

  .catering-main img {
    border-radius: var(--radius-card);
  }

  .handwritten-note {
    right: 6px;
    bottom: -14px;
    font-size: 26px;
    padding: 8px 16px 0;
  }

  .handwritten-note > svg {
    display: none;
  }

  .event-tags {
    margin-top: 18px;
    margin-bottom: 24px;
  }

  .event-tags > span {
    padding: 8px 13px;
    font-size: 11px;
  }

  .catering-copy .button {
    width: 100%;
    min-height: 52px;
  }

  .catering-menu-link {
    justify-content: center;
    width: 100%;
    margin-top: 12px;
  }

  /* Story --------------------------------------------------------------- */
  .story-copy > h2 {
    margin: 16px 0 18px;
  }

  .family-photo {
    margin-top: 30px;
    padding: 11px 11px 0;
    border-radius: 14px;
    transform: rotate(1.4deg);
  }

  .family-photo > img {
    aspect-ratio: 1.35;
    border-radius: 8px;
  }

  .family-photo > figcaption {
    padding: 14px 4px;
  }

  /* Reviews ------------------------------------------------------------- */
  .reviews-section {
    padding: 54px 0 58px;
  }

  .reviews-intro h2 {
    font-size: 38px;
    margin: 14px 0 16px;
  }

  .review-carousel {
    padding-top: 26px;
  }

  .review-slides {
    touch-action: pan-y;
  }

  .review-controls {
    margin-top: 18px;
  }

  /* Bigger, calmer dots; the visual dot stays small but the target does not. */
  .review-dots {
    gap: 0;
  }

  .review-dots > button {
    width: 38px;
    height: 44px;
  }

  .review-dots > button:after {
    width: 7px;
    height: 7px;
    left: 15.5px;
    top: 18.5px;
  }

  .review-dots > button.is-active:after {
    width: 22px;
    border-radius: 4px;
    left: 8px;
    top: 19px;
  }

  .circle-button {
    height: 48px;
    width: 48px;
  }

  /* Gallery ------------------------------------------------------------- */
  .gallery-section {
    padding-block: 46px;
  }

  .gallery-heading {
    margin-bottom: 22px;
  }

  .gallery-item {
    aspect-ratio: 0.94;
    border-radius: 16px;
  }

  /* Visit + hours ------------------------------------------------------- */
  .visit-section {
    padding-block: 48px 52px;
  }

  .visit-copy h2 {
    margin: 14px 0 20px;
  }

  .visit-copy > .button {
    width: 100%;
    min-height: 52px;
  }

  .contact-links {
    gap: 4px 18px;
    margin-top: 16px;
  }

  .hours-card {
    margin-top: 28px;
    padding: 26px 22px 20px;
    border-radius: var(--radius-card);
  }

  .hours-title h3 {
    font-size: 27px;
  }

  .hours-row {
    padding: 13px 0;
  }

  .hours-bottom {
    padding-top: 14px;
  }

  /* The status strip is a row of real targets pressed against the top of the
     screen, so the phone number and the chip both get a full thumb of height
     instead of the thin bar that reads well on a desktop monitor. */
  .topline a,
  .topline .open-status {
    min-height: 44px;
  }

  .topline .container {
    padding-block: 0;
  }

  /* A text link is a line of type, not a button, but a thumb still has to be
     able to hit it. The underline stays exactly where the design put it and
     the touch area grows silently around the words. */
  .text-link {
    position: relative;
  }

  .text-link::before {
    content: '';
    position: absolute;
    inset: -12px 0;
  }

  /* Footer -------------------------------------------------------------- */
  .site-footer {
    padding-top: 40px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding-bottom: 24px;
    text-align: center;
  }

  .footer-top nav {
    justify-content: center;
    gap: 0 20px;
  }

  .footer-socials > a {
    height: 44px;
    width: 44px;
  }

  .footer-bottom {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
}

/* Slightly-under-iPhone widths: the two hero buttons stop competing for one
   row and simply stack, so neither label ever has to shrink. */
@media (max-width: 359px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .button,
  .hero-buttons .reserve-link {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   6. Details — menu plates, forms, focus
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The chips rail keeps its own scrolling, but a visible scrollbar under a
     row of pills reads as a desktop leftover. */
  .menu-control {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .menu-control::-webkit-scrollbar {
    display: none;
  }

  .menu-control-item {
    padding: 11px 17px;
  }

  /* Until the sheet photo arrives, the plate holds its shape with a slow
     sheen instead of a white hole. The image paints straight over it, and the
     run is finite so a long-lived page is not animating offscreen plates. */
  .menu-plate {
    border-radius: 16px;
    background: linear-gradient(100deg, #f1f0ea 30%, #fbfaf6 50%, #f1f0ea 70%) 0 0 / 300% 100%;
    box-shadow: 0 10px 24px #1b1a190f;
    animation: upcafe-plate-sheen 1.6s linear 40;
  }

  @keyframes upcafe-plate-sheen {
    to {
      background-position: -150% 0;
    }
  }

  .menu-page-number,
  .menu-plate-zoom {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }

  .menu-plate-zoom .icon {
    width: 16px;
    height: 16px;
  }

  .menu-panel-footer {
    gap: 12px;
  }

  .menu-panel-footer > button {
    min-height: 46px;
  }

  .menu-helper {
    padding: 20px 20px 22px;
    border-radius: var(--radius-card);
  }

  /* Forms: the field wells are already finger-sized; round them to match the
     cards and give the focused field a soft brand-tinted ring. */
  .enquiry-form,
  .enquiry-notice,
  .enquiry-alert {
    border-radius: var(--radius-card);
  }

  .enquiry-field input,
  .enquiry-field select,
  .enquiry-field textarea {
    border-radius: 12px;
    min-height: 52px;
  }

  .enquiry-field textarea {
    min-height: 96px;
  }

  .enquiry-field input:focus-visible,
  .enquiry-field select:focus-visible,
  .enquiry-field textarea:focus-visible {
    outline: 3px solid #a8cdb2;
    outline-offset: 1px;
    border-color: var(--deep-green);
  }

  .service-items {
    padding: 22px var(--mobile-gutter);
    gap: 16px 18px;
  }

  .service-item strong {
    font-size: 10.5px;
  }
}

/* The whole phone layout is one continuous surface: a fixed dock floating
   over a cream page needs the iPhone home-indicator area to stay cream too. */
@media (max-width: 767px) {
  html {
    background: var(--cream);
  }
}

/* ---------------------------------------------------------------------------
   7. Scroll-in reveals — mobile only, and only when JavaScript is running.
   JS adds `.u-reveal` to a short list of blocks, then `.is-in` the first time
   they come into view. Without JS nothing is ever hidden, and the global
   reduced-motion rule in the compiled sheet turns all of this off.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .u-reveal {
    opacity: 0;
    transform: translateY(16px);
  }

  .u-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}