/* X-Kitchens — desktop build
   Every size is written in Figma pixels from the 1920px-wide frame and
   multiplied by --u, so the layout scales exactly to any desktop width.
   --u is 1/1920 of the viewport width (set more precisely by main.js). */


:root {
  --u: calc(100vw / 1920);
  --hu: var(--u);
  --g: 0px;
  --W: 100vw;
  --grey: #494949;
  --black: #000;
  --white: #fff;
  --ink: #000;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --lh: 1.21;               /* Figma "auto" line height for Inter */
  --body: calc(34 * var(--u));
  --display: calc(62 * var(--u));
  --spring: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--lh);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, ul, ol, figure, address { margin: 0; padding: 0; }
address { font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: calc(3 * var(--u)) solid #7fb2ff; outline-offset: calc(4 * var(--u)); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; left: calc(24 * var(--u)); top: -200px; z-index: 100;
  background: var(--white); color: var(--black); padding: calc(12 * var(--u)) calc(20 * var(--u));
  font-size: calc(18 * var(--u)); font-weight: 600;
}
.skip-link:focus { top: calc(12 * var(--u)); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(75 * var(--u));
  padding: 0 calc(40 * var(--u)) 0 calc(24 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(calc(4 * var(--u)));
  backdrop-filter: blur(calc(4 * var(--u)));
  transition: transform 350ms var(--spring), background-color 300ms ease;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo img { height: calc(38 * var(--u)); width: auto; }
.nav__links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: calc(62 * var(--u));
}
.nav__links a,
.nav__quote {
  font-size: calc(18 * var(--u)); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--white);
}
.nav__links a { text-underline-offset: calc(6 * var(--u)); text-decoration-thickness: calc(2 * var(--u)); }
.nav__links a:hover { text-decoration: underline; }
.nav__actions { display: flex; align-items: center; }
.nav__quote {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(167 * var(--u)); height: calc(43 * var(--u));
  margin-right: calc(41 * var(--u));
  background: var(--white); color: var(--grey);
}
.nav__quote { transition: background-color 150ms ease, color 150ms ease; }
.nav__quote:hover { background: var(--grey); color: var(--white); }
.nav__icon { display: inline-flex; color: var(--white); }
.nav__icon + .nav__icon { margin-left: calc(24 * var(--u)); }
.nav__icon svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  height: calc(965 * var(--u));
  background: #8a8a8a;
}
.hero__layer {
  --w: 1920;
  position: absolute; top: 0; left: 0;
  width: calc(var(--w) * var(--u)); height: 100%;
  background: 0 0 / 100% 100% no-repeat;
  opacity: 0;
  will-change: transform, opacity;
}
.hero__layer.is-visible { opacity: 1; }
.hero__veil { position: absolute; inset: 0; background: rgba(134, 135, 139, 0.34); }
.hero__title {
  position: absolute; left: calc(72 * var(--hu)); bottom: calc(70 * var(--hu));
  font-size: calc(62 * var(--hu)); font-weight: 700; line-height: var(--lh);
  color: var(--white); white-space: nowrap;
}
.hero__word {
  text-decoration: underline;
  text-decoration-thickness: calc(4 * var(--hu));
  text-underline-offset: calc(10 * var(--hu));
}

/* ---------- Intro ---------- */
.intro__lead {
  margin: calc(73 * var(--u)) calc(76 * var(--u)) 0;
  max-width: calc(1700 * var(--u));
  font-size: var(--display); line-height: var(--lh);
}
.intro__photo {
  position: relative;
  margin: calc(49 * var(--u)) 0 0 calc(480 * var(--u));
  width: calc(997 * var(--u)); height: calc(664 * var(--u));
}
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }
.intro__photo::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.22); }
.intro__body { margin: calc(39 * var(--u)) 0 0 calc(480 * var(--u)); width: calc(1000 * var(--u)); }
.intro__body p + p { margin-top: calc(41 * var(--u)); }

/* ---------- Our Projects ---------- */
.section-label { font-size: var(--body); font-weight: 400; line-height: var(--lh); text-align: center; }
.projects {
  margin-top: calc(82 * var(--u));
  padding: calc(70 * var(--u)) 0 calc(193 * var(--u));
  background: var(--grey); color: var(--white);
  overflow: hidden;
}
.carousel { position: relative; margin-top: calc(86 * var(--u)); height: calc(754 * var(--u)); }
/* Swipe and drag: vertical page scrolling stays with the browser, sideways movement drives the slides */
.carousel, .steps { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.carousel__stage, .steps__track { cursor: grab; }
.carousel.is-dragging .carousel__stage, .steps.is-dragging .steps__track { cursor: grabbing; }
.carousel.is-dragging .carousel__card, .steps.is-dragging .steps__track { transition: none; }
.carousel img, .step { -webkit-user-drag: none; }
.carousel__card {
  --offset: 0;
  --abs: 0;
  position: absolute; top: 0; left: calc(410 * var(--u));
  width: calc(1100 * var(--u)); height: calc(754 * var(--u));
  --c-step: calc(1200 * var(--u));
  --c-drop: calc(105 * var(--u));
  transform: translate(calc(var(--offset) * var(--c-step) + var(--drag, 0px)), calc(var(--abs) * var(--c-drop))) rotate(calc(var(--offset) * 10deg));
  transition: transform 500ms var(--spring);
  z-index: 1;
}
.carousel__card.is-current { z-index: 2; }
.carousel__card.no-anim { transition: none; }
.carousel__card img { width: 100%; height: 100%; object-fit: cover; }
.carousel__arrow {
  position: absolute; top: 50%; z-index: 3;
  width: calc(56 * var(--u)); height: calc(56 * var(--u));
  margin-top: calc(-28 * var(--u));
  display: grid; place-items: center; color: var(--white);
}
.carousel__arrow--prev { left: calc(326 * var(--u)); }
.carousel__arrow--next { left: calc(1526 * var(--u)); }
.carousel__arrow svg,
.steps__arrow svg { width: calc(22 * var(--u)); height: calc(36 * var(--u)); }

/* ---------- Scope + services ---------- */
.scope {
  margin: calc(85 * var(--u)) 0 0 calc(470 * var(--u));
  width: calc(990 * var(--u)); text-align: center;
}
.services__title {
  margin: calc(80 * var(--u)) 0 0 calc(76 * var(--u));
  font-size: var(--display); font-weight: 700; line-height: var(--lh);
}
.services__list { list-style: none; margin: calc(38 * var(--u)) 0 0 calc(488 * var(--u)); }
.services__photo {
  margin: calc(85 * var(--u)) 0 0 calc(492 * var(--u));
  width: calc(997 * var(--u)); height: calc(668 * var(--u));
  object-fit: cover;
}
.services__photo--plans {
  margin: calc(29 * var(--u)) 0 0 calc(490 * var(--u));
  width: calc(995 * var(--u)); height: calc(658 * var(--u));
}
.button-dark {
  display: flex; align-items: center; justify-content: center;
  margin: calc(76 * var(--u)) 0 0 calc(711 * var(--u));
  width: calc(536 * var(--u)); height: calc(72 * var(--u));
  background: var(--grey); color: var(--white);
  font-size: var(--body); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
}
.button-dark { transition: background-color 150ms ease, color 150ms ease; }
.button-dark:hover { background: var(--white); color: var(--grey); box-shadow: inset 0 0 0 1px var(--grey); }

/* ---------- Our Process ---------- */
.process { margin-top: calc(63 * var(--u)); overflow: hidden; }
.process .section-label { padding-left: calc(18 * var(--u)); }
.steps { --step: calc(709 * var(--u)); position: relative; margin-top: calc(35 * var(--u)); height: calc(849 * var(--u)); }
.steps__track {
  list-style: none; position: absolute; top: 0; left: calc(668 * var(--u));
  display: flex; gap: calc(71 * var(--u));
  transition: transform 450ms var(--spring);
}
.step {
  position: relative; flex: none;
  width: calc(638 * var(--u)); height: calc(849 * var(--u));
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 calc(38 * var(--u)) calc(64 * var(--u));
  background: #6f6c68 center / cover no-repeat;
  color: var(--white); text-align: center;
  font-size: calc(32 * var(--u)); line-height: var(--lh);
}
.step::before { content: ""; position: absolute; inset: 0; background: rgba(40, 36, 32, 0.5); }
.step > * { position: relative; }
.step__title { font-size: inherit; font-weight: 700; }
.step__title span { display: block; }
.step p { margin-top: calc(39 * var(--u)); }
.step__note { font-style: italic; }
.steps__arrow {
  position: absolute; top: 50%; z-index: 2;
  width: calc(56 * var(--u)); height: calc(56 * var(--u));
  margin-top: calc(-28 * var(--u));
  display: grid; place-items: center; color: var(--grey);
  transition: opacity 200ms ease;
}
.steps__arrow[disabled] { opacity: 0.25; cursor: default; }
.steps__arrow--prev { left: calc(602 * var(--u)); }
.steps__arrow--next { left: calc(1315 * var(--u)); }

/* ---------- Footer + enquiry form ---------- */
.site-footer {
  margin-top: calc(202 * var(--u));
  padding: calc(88 * var(--u)) 0 calc(52 * var(--u));
  background: var(--grey); color: var(--white);
}
.footer__grid { display: flex; }
.footer__info { margin-left: calc(288 * var(--u)); width: calc(420 * var(--u)); }
.footer__heading {
  font-size: var(--body); font-weight: 700; line-height: var(--lh);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.footer__info address,
.footer__info .footer__text { margin-top: calc(39 * var(--u)); }
.footer__info .footer__heading--phone { margin-top: calc(44 * var(--u)); }
.footer__info .footer__heading--hours { margin-top: calc(39 * var(--u)); }
.footer__info .footer__phone { margin-top: calc(41 * var(--u)); }
.footer__info .footer__hours { margin-top: calc(41 * var(--u)); white-space: nowrap; }
.footer__info a { text-decoration: none; }
.footer__photo { width: calc(420 * var(--u)); object-fit: cover; }
.footer__photo--front { margin-top: calc(39 * var(--u)); height: calc(693 * var(--u)); }
.footer__photo--floor { margin-top: calc(38 * var(--u)); height: calc(706 * var(--u)); }
.footer__credit {
  margin-top: calc(65 * var(--u)); text-align: center;
  font-size: calc(29 * var(--u)); font-style: italic;
}

.enquiry { margin-left: calc(101 * var(--u)); width: calc(770 * var(--u)); margin-top: calc(-2 * var(--u)); }
.enquiry__title { text-align: center; }
.enquiry :where(fieldset) { border: 0; margin: 0; padding: 0; min-width: 0; }
.enquiry :where(legend) { padding: 0; }
.enquiry input[type="text"],
.enquiry input[type="email"],
.enquiry input[type="tel"],
.enquiry textarea {
  display: block; width: 100%;
  height: calc(55 * var(--u));
  border: 0; border-radius: 0; background: var(--white); color: var(--black);
  font: inherit; padding: 0 calc(16 * var(--u));
  transition: background-color 150ms ease;
}
.enquiry input[type="text"]:hover,
.enquiry input[type="email"]:hover,
.enquiry input[type="tel"]:hover,
.enquiry textarea:hover,
.check:hover input { background: #dfdfdf; }
.enquiry textarea { height: calc(200 * var(--u)); padding-top: calc(10 * var(--u)); resize: vertical; }
.enquiry input:focus-visible, .enquiry textarea:focus-visible { outline-offset: 0; }
.field-name { margin-top: calc(39 * var(--u)); }
.field-name__row { display: flex; gap: calc(21 * var(--u)); margin-top: calc(31 * var(--u)); }
.field-name__row > div { flex: 1; }
.field-name__row input { margin-top: calc(16 * var(--u)); }
.field { display: block; }
.field input, .field textarea { margin-top: calc(14 * var(--u)); }
.field--email { margin-top: calc(26 * var(--u)); }
.field--phone { margin-top: calc(35 * var(--u)); }
.field--phone input, .field--message textarea { margin-top: calc(16 * var(--u)); }
.field--message { margin-top: calc(28 * var(--u)); }
.field--location { margin-top: calc(31 * var(--u)); }
.field--location input { margin-top: calc(12 * var(--u)); }
.field--budget { margin-top: calc(41 * var(--u)); }
.field--budget input { margin-top: calc(18 * var(--u)); }
.choices--job { margin-top: calc(31 * var(--u)); }
.choices--contact { margin-top: calc(23 * var(--u)); }
.choices__list { display: grid; row-gap: calc(24 * var(--u)); margin-top: calc(22 * var(--u)); }
.choices--contact .choices__list { margin-top: calc(26 * var(--u)); row-gap: calc(23 * var(--u)); }
.check { display: flex; align-items: center; gap: calc(42 * var(--u)); cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: calc(25 * var(--u)); height: calc(25 * var(--u));
  background: var(--white); border: 0; border-radius: 0; cursor: pointer;
  transition: background-color 150ms ease;
  display: grid; place-items: center;
}
.check input::after {
  content: ""; width: 55%; height: 30%;
  border: solid var(--grey); border-width: 0 0 calc(4 * var(--u)) calc(4 * var(--u));
  transform: translateY(-15%) rotate(-45deg);
  opacity: 0;
}
.check input:checked::after { opacity: 1; }
.enquiry__submit {
  display: block; width: 100%; height: calc(71 * var(--u));
  margin-top: calc(32 * var(--u));
  background: var(--white); color: var(--grey);
  font-size: var(--body); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease;
}
.enquiry__submit:hover { background: var(--black); color: var(--white); }
.enquiry__submit[disabled] { opacity: 0.6; cursor: progress; }
.enquiry__status { margin-top: calc(16 * var(--u)); font-size: calc(28 * var(--u)); min-height: 1.2em; }
.enquiry__status.is-error { color: #ffd2cc; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Confirmation page ---------- */
.confirm {
  position: relative; overflow: hidden;
  height: max(100vh, calc(1080 * var(--u)));
  color: var(--white);
}
.confirm__bg {
  position: absolute; inset: 0;
  background: url("../img/confirm-villa.jpg") 0 0 / cover no-repeat;
}
.confirm__veil { position: absolute; inset: 0; background: rgba(150, 150, 150, 0.42); }
/* Confirmation page: homepage slideshow behind a black 40% overlay so the message stays readable */
.confirm.confirm--hero .confirm__veil { background: rgba(0, 0, 0, 0.4); }
.confirm__content { position: relative; padding: calc(251 * var(--u)) 0 0 calc(503 * var(--u)); width: calc(1478 * var(--u)); }
.confirm__content p + p { margin-top: calc(41 * var(--u)); }
.button-light {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: calc(887 * var(--u)); left: calc(720 * var(--u));
  width: calc(548 * var(--u)); height: calc(73 * var(--u));
  background: var(--white); color: var(--grey);
  font-size: var(--body); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
/* Same as the form's Send button: inverts to black with white text on hover */
.button-light:hover { background: var(--black); color: var(--white); }

/* ---------- Layout: nav and hero span the window, everything else sits in a 1920 column ----------
   --u  = 1 Figma px inside the 1920 column (1px on windows 1920 and wider)
   --g  = white margin either side of the 1920 column
   --W  = full window width in px
   --hu = hero headline unit, grows with the window width */
main > section:not(.hero),
.site-footer { margin-left: var(--g); margin-right: var(--g); }
.confirm__content { margin-left: var(--g); }
.button-light { left: calc(var(--g) + 720 * var(--u)); }

/* Hero keeps the Figma proportion but is never taller than the window */
.hero { height: min(calc(var(--W) * 965 / 1920), 100vh); }

/* Ultrawide option (class "uw-intro" on <html>): on 21:9 and wider windows the hero shortens
   so the whole "From your first chat..." paragraph fits on the first screen.
   413 = 73px gap + 4 lines of 75px + 40px breathing room below. */
@media (min-aspect-ratio: 21/9) {
  .uw-intro .hero { height: min(calc(var(--W) * 965 / 1920), calc(100vh - 413 * var(--u))); }
}


/* ---------- Desktop-only and mobile-only bits ---------- */
.m-br { display: none; }
a.hero-cta { display: none; }
.confirm__credit { display: none; }
.enquiry__status:empty { display: none; }

/* =====================================================================
   MOBILE: drawn from the 402px Figma frame. --m = 1 Figma px.
   Applies below 800px wide, and to phones on their side (column 1/3 wide).
   ===================================================================== */
.is-mobile body { font-size: calc(18 * var(--m)); line-height: calc(22.1 * var(--m)); }
.is-mobile .m-br { display: inline; }
.is-mobile .d-br { display: none; }

/* Nav: logo and icons on top, links on a second row */
.is-mobile .nav { height: calc(97 * var(--m)); padding: 0; display: block; }
.is-mobile .nav__logo { position: absolute; left: calc(26 * var(--m)); top: calc(21 * var(--m)); }
.is-mobile .nav__logo img { height: calc(33 * var(--m)); }
.is-mobile .nav__actions { position: absolute; right: calc(31 * var(--m)); top: calc(26 * var(--m)); }
.is-mobile .nav__quote { display: none; }
.is-mobile .nav__icon svg { width: calc(21 * var(--m)); height: calc(21 * var(--m)); }
.is-mobile .nav__icon + .nav__icon { margin-left: calc(25 * var(--m)); }
.is-mobile .nav__links {
  position: absolute; left: calc(18 * var(--m)); right: calc(15 * var(--m)); top: calc(72.8 * var(--m));
  transform: none; justify-content: space-between; gap: 0;
}
.is-mobile .nav__links a { font-size: calc(12 * var(--m)); line-height: 1.21; }

/* Hero: never taller than the screen, so the headline is always in view */
.is-mobile .hero { height: min(calc(780 * var(--m)), 100vh); height: min(calc(780 * var(--m)), 100svh); }
.is-mobile .hero__title {
  left: calc(26 * var(--m)); bottom: calc(32.8 * var(--m));
  font-size: calc(42 * var(--m)); line-height: calc(51 * var(--m));
}
.is-mobile .hero__word { text-decoration-thickness: calc(3 * var(--m)); text-underline-offset: calc(10 * var(--m)); }
.is-mobile a.hero-cta {
  display: flex; margin: calc(19.3 * var(--m)) 0 0 calc(44.1 * var(--m));
  width: calc(315.3 * var(--m)); height: calc(44.1 * var(--m)); font-size: calc(18 * var(--m));
}

/* Intro */
.is-mobile .intro__lead {
  margin: calc(17.6 * var(--m)) 0 0 calc(14.5 * var(--m)); width: calc(373 * var(--m)); max-width: none;
  font-size: calc(28 * var(--m)); line-height: calc(34 * var(--m));
}
.is-mobile .intro__photo { margin: calc(23.6 * var(--m)) 0 0 calc(15 * var(--m)); width: calc(370.4 * var(--m)); height: calc(246.7 * var(--m)); }
.is-mobile .intro__body { margin: calc(18.4 * var(--m)) 0 0 calc(12 * var(--m)); width: calc(368 * var(--m)); }
.is-mobile .intro__body p + p { margin-top: calc(22.1 * var(--m)); }

/* Our Projects */
.is-mobile .projects { margin-top: calc(21.1 * var(--m)); padding: calc(18 * var(--m)) 0 calc(36.3 * var(--m)); }
.is-mobile .section-label { font-size: calc(18 * var(--m)); line-height: calc(21.8 * var(--m)); }
.is-mobile .carousel { margin-top: calc(18.8 * var(--m)); height: calc(238 * var(--m)); }
.is-mobile .carousel__card {
  left: calc(27.6 * var(--m)); width: calc(347.6 * var(--m)); height: calc(238 * var(--m));
  --c-step: calc(379 * var(--m)); --c-drop: calc(33 * var(--m));
}
.is-mobile .carousel__arrow { width: calc(30 * var(--m)); height: calc(30 * var(--m)); margin-top: calc(-15 * var(--m)); }
.is-mobile .carousel__arrow--prev { left: calc(-3 * var(--m)); }
.is-mobile .carousel__arrow--next { left: calc(375 * var(--m)); }
.is-mobile .carousel__arrow svg,
.is-mobile .steps__arrow svg { width: calc(8 * var(--m)); height: calc(13 * var(--m)); }

/* Scope + services */
.is-mobile .scope { margin: calc(30.2 * var(--m)) 0 0 calc(51 * var(--m)); width: calc(305 * var(--m)); }
.is-mobile .services__title {
  margin: calc(27.4 * var(--m)) 0 0 calc(13 * var(--m));
  font-size: calc(28 * var(--m)); line-height: calc(33.9 * var(--m));
}
.is-mobile .services__list { margin: calc(27.7 * var(--m)) 0 0 calc(14.8 * var(--m)); line-height: calc(21.9 * var(--m)); }
.is-mobile .services__photo { margin: calc(21 * var(--m)) 0 0 calc(15.8 * var(--m)); width: calc(368.9 * var(--m)); height: calc(247.5 * var(--m)); }
.is-mobile .services__photo--plans { margin-top: calc(19 * var(--m)); height: calc(245.1 * var(--m)); }
.is-mobile .button-dark {
  margin: calc(35.5 * var(--m)) 0 0 calc(44.1 * var(--m));
  width: calc(315.3 * var(--m)); height: calc(44.1 * var(--m)); font-size: calc(18 * var(--m));
}
.is-mobile a.hero-cta { margin: calc(19.3 * var(--m)) 0 0 calc(44.1 * var(--m)); }

/* Our Process */
.is-mobile .process { margin-top: calc(32.7 * var(--m)); }
.is-mobile .process .section-label { padding-left: 0; }
.is-mobile .steps { --step: calc(350.6 * var(--m)); margin-top: calc(21.7 * var(--m)); height: calc(419 * var(--m)); }
.is-mobile .steps__track { left: calc(43.4 * var(--m)); gap: calc(35.4 * var(--m)); }
.is-mobile .step {
  width: calc(315.2 * var(--m)); height: calc(419 * var(--m));
  padding: 0 calc(20 * var(--m)) calc(32 * var(--m));
  font-size: calc(16 * var(--m)); line-height: calc(19.2 * var(--m));
}
.is-mobile .step p { margin-top: calc(19.2 * var(--m)); }
.is-mobile .steps__arrow { width: calc(30 * var(--m)); height: calc(30 * var(--m)); margin-top: calc(-15 * var(--m)); }
.is-mobile .steps__arrow--prev { left: calc(10 * var(--m)); }
.is-mobile .steps__arrow--next { left: calc(362 * var(--m)); }

/* Footer: contact details, then the form, then the workshop photos */
.is-mobile .site-footer { margin-top: calc(82 * var(--m)); padding: calc(55.3 * var(--m)) 0 calc(61.2 * var(--m)); }
.is-mobile .footer__grid { flex-direction: column; }
.is-mobile .footer__info { display: contents; }
.is-mobile .footer__info > * { margin-left: calc(25 * var(--m)); }
.is-mobile .footer__heading { font-size: calc(18 * var(--m)); line-height: calc(21.8 * var(--m)); }
.is-mobile .footer__info address { margin-top: calc(22.3 * var(--m)); }
.is-mobile .footer__info .footer__heading--phone { margin-top: calc(22.8 * var(--m)); }
.is-mobile .footer__info .footer__phone { margin-top: calc(21.5 * var(--m)); }
.is-mobile .footer__info .footer__heading--hours { margin-top: calc(19.2 * var(--m)); }
.is-mobile .footer__info .footer__hours { margin-top: calc(23.2 * var(--m)); }
.is-mobile .footer__photo { order: 2; margin-left: calc(82 * var(--m)); width: calc(233.3 * var(--m)); }
.is-mobile .footer__photo--front { margin-top: calc(31.6 * var(--m)); height: calc(383.9 * var(--m)); }
.is-mobile .footer__photo--floor { margin-top: calc(25.2 * var(--m)); height: calc(391 * var(--m)); }
.is-mobile .footer__credit {
  margin: calc(40.5 * var(--m)) calc(51 * var(--m)) 0;
  font-size: calc(18 * var(--m)); line-height: calc(22.1 * var(--m));
}

.is-mobile .enquiry { order: 1; margin: calc(49.6 * var(--m)) 0 0 calc(25 * var(--m)); width: calc(350 * var(--m)); }
.is-mobile .enquiry input[type="text"],
.is-mobile .enquiry input[type="email"],
.is-mobile .enquiry input[type="tel"],
.is-mobile .enquiry textarea { height: calc(49 * var(--m)); padding: 0 calc(8 * var(--m)); font-size: calc(16 * var(--m)); }
.is-mobile .enquiry textarea { height: calc(199.4 * var(--m)); padding-top: calc(8 * var(--m)); }
.is-mobile .field-name { margin-top: calc(19.1 * var(--m)); }
.is-mobile .field-name__row { gap: calc(11 * var(--m)); margin-top: calc(19.2 * var(--m)); }
.is-mobile .field-name__row input { margin-top: calc(7 * var(--m)); }
.is-mobile .field--email { margin-top: calc(17.6 * var(--m)); }
.is-mobile .field--email input { margin-top: calc(7 * var(--m)); }
.is-mobile .field--phone { margin-top: calc(19.2 * var(--m)); }
.is-mobile .field--phone input { margin-top: calc(7.7 * var(--m)); }
.is-mobile .field--message { margin-top: calc(12.1 * var(--m)); }
.is-mobile .field--message textarea { margin-top: calc(11 * var(--m)); }
.is-mobile .field--location { margin-top: calc(19.3 * var(--m)); }
.is-mobile .field--location input { margin-top: calc(8.1 * var(--m)); }
.is-mobile .field--budget { margin-top: calc(29 * var(--m)); }
.is-mobile .field--budget input { margin-top: calc(9.8 * var(--m)); }
.is-mobile .choices--job { margin-top: calc(24 * var(--m)); }
.is-mobile .choices--contact { margin-top: calc(17.5 * var(--m)); }
.is-mobile .choices__list { margin-top: calc(19.2 * var(--m)); row-gap: calc(19.6 * var(--m)); }
.is-mobile .choices--contact .choices__list { margin-top: calc(13.9 * var(--m)); row-gap: calc(19.2 * var(--m)); }
.is-mobile .check { gap: calc(20.5 * var(--m)); }
.is-mobile .check input { width: calc(19.7 * var(--m)); height: calc(19.7 * var(--m)); }
.is-mobile .check input::after { border-width: 0 0 calc(3 * var(--m)) calc(3 * var(--m)); }
.is-mobile .enquiry__submit { margin-top: calc(25.7 * var(--m)); height: calc(44.1 * var(--m)); font-size: calc(18 * var(--m)); }
.is-mobile .enquiry__status { margin-top: calc(10 * var(--m)); font-size: calc(16 * var(--m)); min-height: 0; }

/* Confirmation page */
.is-mobile .confirm__bg { background: url("../img/hero-m-1-villa.jpg") 0 0 / auto 100% no-repeat; }
.is-mobile .confirm__veil { background: rgba(55, 55, 56, 0.73); }
.is-mobile .confirm { height: auto; min-height: max(100vh, calc(874 * var(--m))); }
.is-mobile .confirm__content { padding: calc(233.6 * var(--m)) 0 0 calc(27 * var(--m)); width: calc(375 * var(--m)); }
.is-mobile .confirm__content p + p { margin-top: calc(22.1 * var(--m)); }
.is-mobile .button-light {
  top: calc(630 * var(--m)); left: calc(var(--g) + 26 * var(--m));
  width: calc(349 * var(--m)); height: calc(44 * var(--m)); font-size: calc(18 * var(--m));
}
.is-mobile .confirm__credit {
  display: block; position: absolute; top: calc(714.6 * var(--m)); left: var(--g); right: var(--g);
  padding: 0 calc(51 * var(--m)); text-align: center; font-style: italic;
}

/* =====================================================================
   PHONES ON THEIR SIDE: the desktop layout (nav and hero span the screen),
   with text at the size the phone shows in portrait. --m = 1 mobile Figma px.
   The hero headline keeps its desktop size so it stays on one line.
   ===================================================================== */
.is-land body { font-size: calc(18 * var(--m)); line-height: calc(22.1 * var(--m)); }
.is-land .nav { height: calc(53 * var(--m)); padding: 0 calc(16 * var(--m)); }
.is-land .nav__logo img { height: calc(33 * var(--m)); }
.is-land .nav__links { gap: calc(22 * var(--m)); }
.is-land .nav__links a { font-size: calc(12 * var(--m)); }
.is-land .nav__quote {
  width: auto; height: calc(30 * var(--m)); padding: 0 calc(12 * var(--m));
  margin-right: calc(20 * var(--m)); font-size: calc(12 * var(--m));
}
.is-land .nav__icon svg { width: calc(21 * var(--m)); height: calc(21 * var(--m)); }
.is-land .nav__icon + .nav__icon { margin-left: calc(20 * var(--m)); }
.is-land .intro__lead { margin-top: calc(17.6 * var(--m)); font-size: calc(28 * var(--m)); line-height: calc(34 * var(--m)); }  /* same gap under Get a Quote as portrait */
.is-land .intro__body p + p { margin-top: calc(22.1 * var(--m)); }
.is-land .section-label { font-size: calc(18 * var(--m)); line-height: calc(21.8 * var(--m)); }
.is-land .services__title { font-size: calc(28 * var(--m)); line-height: calc(33.9 * var(--m)); }
.is-land .button-dark,
.is-land .button-light { height: max(calc(72 * var(--u)), calc(44 * var(--m))); font-size: calc(18 * var(--m)); }
.is-land .step { font-size: calc(16 * var(--m)); line-height: calc(19.2 * var(--m)); padding-left: calc(16 * var(--m)); padding-right: calc(16 * var(--m)); }
.is-land .step p { margin-top: calc(19.2 * var(--m)); }
.is-land .footer__heading { font-size: calc(18 * var(--m)); line-height: calc(21.8 * var(--m)); }
.is-land .footer__credit { font-size: calc(18 * var(--m)); }
.is-land .footer__info .footer__hours { white-space: normal; }
.is-land .footer__info .footer__hours .d-br { display: none; }
.is-land .enquiry input[type="text"],
.is-land .enquiry input[type="email"],
.is-land .enquiry input[type="tel"] { height: max(calc(55 * var(--u)), calc(40 * var(--m))); font-size: calc(16 * var(--m)); }
.is-land .enquiry textarea { font-size: calc(16 * var(--m)); }
.is-land .check input { width: max(calc(25 * var(--u)), calc(19.7 * var(--m))); height: max(calc(25 * var(--u)), calc(19.7 * var(--m))); }
.is-land .check { gap: calc(14 * var(--m)); }
.is-land .enquiry__submit { height: max(calc(71 * var(--u)), calc(44 * var(--m))); font-size: calc(18 * var(--m)); }
.is-land .enquiry__status { font-size: calc(16 * var(--m)); }
.is-land .confirm__content p + p { margin-top: calc(22.1 * var(--m)); }
/* Get a Quote moves from the nav to just below the hero, as on portrait mobile */
.is-land .nav__quote { display: none; }
.is-land a.hero-cta {
  display: flex; margin: calc(19.3 * var(--m)) auto 0;
  width: calc(315.3 * var(--m)); height: calc(44.1 * var(--m)); font-size: calc(18 * var(--m));
}

@media (prefers-reduced-motion: reduce) {
  .nav, .carousel__card, .steps__track { transition: none; }
}