/* ==========================================================================
   PAGES: layout of every section, in the order they appear on the site.
   Design reference: Figma frames are 1440 x 1024, so sizes scale with the
   screen width (vw) and are capped with clamp() for small and huge screens.
   ========================================================================== */

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- Hero: a plain full-window photo that scrolls away normally ---------- */
.hero {
  --brand: 1;
  --zoom: 0;
  position: relative;
  background: #31405f;
  color: #fff;
}
.hero__sticky {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 78%;
  transform: scale(calc(1 + var(--zoom) * 0.06));
}

.hero__brand {
  position: absolute;
  inset: 0;
  opacity: var(--brand);
  pointer-events: none;
}
.hero__logo {
  position: absolute;
  left: 50.5%;
  top: 31%;
  width: clamp(230px, 31vw, 570px);
  transform: translate(-50%, -50%);
}
.hero__tags {
  position: absolute;
  left: clamp(16px, 2.6vw, 44px);
  right: clamp(16px, 2.6vw, 44px);
  top: 57.5%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(17px, 2.5vw, 38px);
  line-height: 1.2;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.28);
}

.hero__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 7vh, 90px);
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(50px, 9vh, 100px);
  opacity: var(--info);
  transform: translateY(calc((1 - var(--info)) * 28px));
  color: #fff;
  text-shadow: 0 1px 18px rgba(25, 38, 74, 0.35);
}
.js .hero__info {
  visibility: hidden;
}
.js .hero.has-info .hero__info {
  visibility: visible;
}
.hero__statement {
  max-width: 1240px;
  font-size: clamp(20px, 3.35vw, 49px);
  text-wrap: balance;
}
.hero__statement strong {
  font-weight: 700;
}
.hero__pecpek {
  font-size: clamp(16px, 2.45vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}
.hero__info .link-arrow {
  align-self: flex-end;
  margin-top: auto;
}


/* ---------- Hero on desktop/tablet: Figma proportions at any window size ----------
   Two scales (1 Figma pixel = this many screen pixels):
   --sc  "cover" scale, used only for the PHOTO so it always fills the window
   --se  "contain" scale = min(width, height), used for logo, taglines and edge
         so they are never larger or more cropped than in the Figma design.
   --hz  screen height of the sea horizon: kept at the Figma ratio (672/1024 of the
         window height) whenever the photo can cover the window. Logo and taglines
         are positioned relative to it, exactly like in the design. */
@media (min-width: 861px) {
  .hero__sticky {
    --vh: 100vh;
    --sc: max(calc(100vw / 1440), calc(var(--vh) / 1024));
    --se: min(calc(100vw / 1440), calc(var(--vh) / 1024));
    --hz: clamp(calc(var(--vh) - var(--sc) * 352), calc(var(--vh) * 0.65625), calc(var(--sc) * 672));
  }
  @supports (height: 100svh) {
    .hero__sticky {
      --vh: 100svh;
    }
  }
  .hero__photo {
    inset: auto;
    left: 50%;
    top: calc(var(--hz) - var(--sc) * 672);
    width: calc(var(--sc) * 1440);
    height: calc(var(--sc) * 1024);
    object-position: 50% 50%;
    transform: translateX(-50%) scale(calc(1 + var(--zoom) * 0.06));
  }
  .hero__logo {
    left: 50%;
    top: calc(var(--hz) - var(--se) * 342.8);
    width: calc(var(--se) * 405);
  }
  .hero__tags {
    left: calc(var(--se) * 37);
    right: calc(var(--se) * 39);
    top: calc(var(--hz) - var(--se) * 72);
    gap: 0;
    font-size: calc(var(--se) * 36);
    line-height: normal;
    text-shadow: none;
  }
}

/* ---------- Intro / About (burgundy) — Figma frame "INTRO/ABOUT" ----------
   Phones: simple stacked layout. From 861px up the section is a 1440 x 1024 frame that
   scales with the window width (aspect-ratio), so every position is a Figma number. */
.intro {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 30vw, 170px) var(--gutter) clamp(70px, 16vw, 110px);
  color: #fff;
}
.intro__edge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100.28%;
  line-height: 0;
  pointer-events: none;
}
.intro__edge img {
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}
.intro__title,
.intro__body {
  letter-spacing: 0;
  line-height: 1.275;
  font-size: clamp(22px, 6.2vw, 34px);
}
.intro__title {
  font-weight: 700;
}
.intro__body .gap::after {
  content: " ";
}
.intro__body .gap {
  display: inline;
}
.intro__pecpek {
  margin-top: clamp(40px, 12vw, 70px);
  font-size: clamp(16px, 4.4vw, 24px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.275;
}
.intro__more {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(40px, 12vw, 80px);
}
@media (max-width: 860px) {
  /* phone: the dark block fills the whole screen, text spread edge to edge like on desktop */
  .intro {
    padding: clamp(84px, 22vw, 110px) var(--gutter) clamp(44px, 11vw, 64px);
  }
  .intro__title,
  .intro__body {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    font-size: clamp(20px, 5.3vw, 30px);
  }
  .intro__title { hyphens: none; }
  .intro__body .ln::after { content: " "; }
}

@media (min-width: 861px) {
  .intro {
    /* The section is exactly one window tall. Horizontally it is the Figma frame (1440 wide)
       scaled to the window width: 1 Figma pixel = --se screen pixels. If the window is too short
       for that, --se shrinks (height / 760) so the text never overflows, and the empty space
       between the blocks is what gets compressed first. Sizes, columns and the horizontal
       relations always stay exactly as in Figma. */
    --vh: 100vh;
    --se: min(calc(100vw / 1440), calc(var(--vh) / 760));
    --fx: calc((100% - var(--se) * 1440) / 2);
    /* vertical room beyond the compressed layout (760) is released up to the Figma layout (1024) */
    --extra: max(0px, calc((var(--vh) - var(--se) * 1024) / 2));
    height: var(--vh);
    padding: 0;
  }
  @supports (height: 100svh) {
    .intro {
      --vh: 100svh;
    }
  }
  .intro__text {
    position: absolute;
    left: calc(var(--fx) + var(--se) * 111);
    top: clamp(calc(var(--se) * 150), calc(var(--se) * 150 + (var(--vh) - var(--se) * 760) * 103 / 264), calc(var(--se) * 253 + var(--extra)));
    width: calc(var(--se) * 1210);
  }
  .intro__title,
  .intro__body {
    font-size: calc(var(--se) * 48);
    line-height: calc(var(--se) * 61);
  }
  /* Figma coordinates: the right-hand half of each line starts at x = 543, 877, 631 and 672
     (of 1440): (x - 111) from the text block's left edge, minus the letters' side-bearing. */
  .intro__body .ln {
    display: block;
    position: relative;
    height: calc(var(--se) * 61);
    white-space: nowrap;
  }
  .intro__body .gap {
    display: none;
  }
  .intro__body .rt {
    position: absolute;
    top: 0;
  }
  .intro__body .rt1 { left: calc(var(--se) * 430); }
  .intro__body .rt2 { left: calc(var(--se) * 762); }
  .intro__body .rt3 { left: calc(var(--se) * 516); }
  .intro__body .rt4 { left: calc(var(--se) * 557); }
  .intro__pecpek {
    position: absolute;
    left: calc(var(--fx) + var(--se) * 111);
    top: clamp(calc(var(--se) * 590), calc(var(--se) * 590 + (var(--vh) - var(--se) * 760) * 208 / 264), calc(var(--se) * 798 + var(--extra)));
    margin: 0;
    font-size: calc(var(--se) * 36);
    line-height: calc(var(--se) * 46);
  }
  .intro__more {
    position: absolute;
    /* ends on the same right margin as CONTACT in the header */
    right: calc(min(calc(100vw / 1440), calc(var(--vh) / 1024)) * 33);
    top: clamp(calc(var(--se) * 700), calc(var(--se) * 700 + (var(--vh) - var(--se) * 760) * 248 / 264), calc(var(--se) * 948 + var(--extra)));
    margin: 0;
    gap: 0;
    letter-spacing: 0;
    font-size: calc(var(--se) * 19);
  }
  .intro__more span {
    margin-left: 0.12em;
  }
}

/* ---------- Services preview (olive + ceremony photo) ---------- */
.svc-preview {
  display: grid;
  grid-template-columns: 56fr 44fr;
  min-height: 100vh;
  min-height: 100svh;
}
.svc-preview__text {
  display: flex;
  align-items: center;
  padding: clamp(110px, 16vh, 170px) var(--gutter) clamp(60px, 10vh, 110px) clamp(20px, 6.2vw, 96px);
}
.svc-list {
  display: grid;
  gap: clamp(44px, 11vh, 120px);
}
.svc-list h3 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.1;
  white-space: nowrap;
}
.svc-list p {
  margin-top: 0.15em;
  font-size: clamp(16px, 1.9vw, 29px);
  line-height: 1.2;
}
.svc-preview__photo {
  position: relative;
  overflow: hidden;
}
.svc-preview__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
.svc-preview__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 16, 28, 0.5), rgba(10, 16, 28, 0) 32%);
  pointer-events: none;
}
.svc-preview__photo .link-arrow {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 3.5vw, 58px);
  bottom: clamp(24px, 5.2vh, 70px);
}

/* Desktop: "Explore services" is the twin of "Know more about me" in the intro above:
   same size, same letter-spacing, and it ends on the same right margin as CONTACT. */
@media (min-width: 861px) {
  .svc-preview__photo .link-arrow {
    --vh: 100vh;
    right: calc(min(calc(100vw / 1440), calc(var(--vh) / 1024)) * 33);
    gap: 0;
    letter-spacing: 0;
    font-size: calc(min(calc(100vw / 1440), calc(var(--vh) / 760)) * 19);
  }
  @supports (height: 100svh) {
    .svc-preview__photo .link-arrow {
      --vh: 100svh;
    }
  }
  .svc-preview__photo .link-arrow span {
    margin-left: 0.12em;
  }
}

@media (max-width: 860px) {
  .svc-preview {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* phone: no olive block; the two services sit on the sky of the photo below */
  .svc-preview {
    position: relative;
    background: none;
  }
  .svc-preview__text {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    padding: clamp(84px, 22vw, 110px) var(--gutter) 0;
  }
  .svc-list {
    gap: clamp(26px, 7vw, 40px);
  }
  .svc-preview__photo {
    aspect-ratio: 4 / 5.6;
  }
  .svc-preview__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(10, 16, 28, 0.38), rgba(10, 16, 28, 0) 45%);
    pointer-events: none;
  }
}

/* ---------- Home: aerial photo that turns blue on scroll, with the footer on top ----------
   The section is two screens tall and its stage is sticky: it starts as the plain photo
   (--p: 0), and as you scroll the semi-transparent blue overlay (--p) and then the text
   (--t) fade in (js/cta-overlay.js). Without JS or with reduced motion: final state. */
.cta {
  --p: 1;
  --t: 1;
  position: relative;
  height: 200vh;
  height: 200svh;
  color: #fff;
  background: var(--blue);
}
.js .cta {
  --p: 0;
  --t: 0;
}
.cta__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding: clamp(110px, 18vh, 200px) var(--gutter) clamp(120px, 16vh, 180px);
  overflow: hidden;
}
.cta__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(99, 123, 172, 0.74);
  opacity: var(--p);
}
.cta__content {
  position: relative;
  z-index: 2;
  opacity: var(--t);
}
.cta .site-footer--overlay {
  position: absolute;
  z-index: 3;
}
.cta__title {
  max-width: 1320px;
  font-size: clamp(34px, 6.4vw, 94px);
  line-height: 1.06;
}
.cta__lead {
  max-width: 1120px;
  margin: clamp(18px, 3vh, 34px) 0 clamp(24px, 5vh, 56px);
  font-family: var(--font-grotesk);
  font-size: clamp(17px, 2.05vw, 30px);
  line-height: 1.25;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* ---------- Bio ---------- */
.bio {
  display: grid;
  grid-template-columns: 1fr 42.3%;
  min-height: 100vh;
  min-height: 100svh;
}
.bio__text {
  padding: clamp(110px, 14vh, 160px) clamp(20px, 3.5vw, 56px) clamp(50px, 8vh, 90px) clamp(20px, 5.1vw, 84px);
}
.bio__title {
  font-family: var(--font-grotesk);
  font-weight: 400;
  font-size: clamp(34px, 5.55vw, 82px);
  line-height: 1.08;
}
.bio__title span {
  display: block;
}
.bio__title .caps {
  text-transform: uppercase;
}
.bio__role {
  margin: clamp(14px, 2.4vh, 28px) 0 clamp(26px, 6vh, 70px);
  font-size: clamp(22px, 2.8vw, 41px);
  line-height: 1.2;
}
.bio__copy {
  max-width: 660px;
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.5;
}
.bio__copy p + p {
  margin-top: 1.05em;
}
.bio__copy strong {
  font-weight: 700;
}
.bio__photo {
  position: relative;
  overflow: hidden;
}
.bio__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
/* Desktop: the whole bio fits in one window, no scrolling. One unit --se = 1 Figma pixel:
   it follows the window width but shrinks when the window is short (height / 760), so the
   type, the spacing and the photo scale together and everything stays on screen. */
@media (min-width: 861px) {
  .bio {
    --vh: 100vh;
    --se: min(calc(100vw / 1440), calc(var(--vh) / 760));
    grid-template-columns: 1fr 31%;
    height: var(--vh);
    min-height: 0;
    overflow: hidden;
  }
  @supports (height: 100svh) {
    .bio {
      --vh: 100svh;
    }
  }
  .bio__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--se) * 96) calc(var(--se) * 56) calc(var(--se) * 28) calc(var(--se) * 84);
  }
  .bio__title {
    font-size: calc(var(--se) * 58);
  }
  .bio__role {
    margin: calc(var(--se) * 12) 0 calc(var(--se) * 24);
    font-size: calc(var(--se) * 28);
  }
  .bio__copy {
    max-width: none;
    font-size: calc(var(--se) * 18);
    line-height: 1.45;
  }
  .bio__copy p + p {
    margin-top: 0.8em;
  }
}
@media (max-width: 860px) {
  /* phone order: name + role, then her photo, then the whole text */
  .bio {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .bio__text { display: contents; }
  .bio__title {
    order: 1;
    padding: clamp(110px, 22vw, 150px) var(--gutter) 0;
  }
  .bio__role {
    order: 2;
    margin: clamp(10px, 3vw, 18px) 0 clamp(22px, 6vw, 36px);
    padding: 0 var(--gutter);
  }
  .bio__photo {
    order: 3;
    aspect-ratio: 4 / 5;
  }
  .bio__copy {
    order: 4;
    max-width: none;
    padding: clamp(30px, 8vw, 48px) var(--gutter) clamp(44px, 10vw, 70px);
  }
}

/* ---------- PEC / PEK: words travel from the headline to under the logos ---------- */
.about2 {
  position: relative;
  --late: 1;
}
.js .about2 {
  height: 260vh;
  height: 260svh;
}
.about2__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 3vh, 40px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(84px, 13vh, 140px) var(--gutter) clamp(22px, 5vh, 60px);
  overflow: hidden;
}
.js .about2__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.about2.is-static {
  --late: 1;
  height: auto;
}
.about2.is-static .about2__stage {
  position: relative;
  height: auto;
}
.about2__title {
  font-size: clamp(24px, 4.7vw, 72px);
  line-height: 1.05;
  text-align: center;
}
.mover {
  display: inline-block;
  position: relative;
  z-index: 6;
  transform-origin: 0 0;
  will-change: transform;
}
.about2__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 4vw, 80px);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.about2__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.8vh, 20px);
  text-align: center;
}
.about2__logobox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(17.5vw, 29vh);
}
.about2__logo {
  width: auto;
  max-width: 85%;
  object-fit: contain;
}
.about2__logo--pec {
  height: min(13.5vw, 23vh);
}
.about2__logo--pek {
  height: min(17.5vw, 29vh);
}
.about2__label {
  display: block;
  font-size: clamp(19px, 3.1vw, 46px);
  line-height: 1.05;
}
.js .about2__label {
  visibility: hidden; /* the travelling word takes this spot */
}
.about2__desc {
  max-width: 28ch;
  font-size: clamp(15px, 1.95vw, 29px);
  line-height: 1.22;
}
.about2__foot {
  text-align: center;
}
.about2__tag {
  font-size: clamp(22px, 3.7vw, 54px);
}
.about2__sub {
  margin-top: 0.25em;
  font-size: clamp(16px, 2.1vw, 31px);
  line-height: 1.25;
}
.js .about2 .keep {
  opacity: var(--rest, 1); /* the rest of the headline softens while its two words travel */
}
.js .about2 [data-late] {
  opacity: var(--late);
  transform: translateY(calc((1 - var(--late)) * 22px));
}

/* Desktop: everything in the stage is sized in one unit (--se = 1 Figma pixel, following the
   window width but shrinking when the window is short) so the whole composition, down to the
   closing line, always fits in one screen while the words travel. */
@media (min-width: 861px) {
  .about2 {
    --vh: 100vh;
    --se: min(calc(100vw / 1440), calc(var(--vh) / 760));
  }
  @supports (height: 100svh) {
    .about2 {
      --vh: 100svh;
    }
  }
  .about2__stage {
    gap: 0;
    padding: calc(var(--se) * 86) calc(var(--se) * 72) calc(var(--se) * 64);
  }
  .about2__title {
    font-size: calc(var(--se) * 66);
    text-align: center;
  }
  .about2__cols {
    max-width: calc(var(--se) * 1240);
    gap: calc(var(--se) * 80);
  }
  .about2__col {
    gap: calc(var(--se) * 12);
  }
  .about2__logobox {
    height: calc(var(--se) * 200);
  }
  .about2__logo--pec {
    height: calc(var(--se) * 150);
  }
  .about2__logo--pek {
    height: calc(var(--se) * 200);
  }
  .about2__label {
    font-size: calc(var(--se) * 44);
  }
  .about2__desc {
    font-size: calc(var(--se) * 26);
  }
  .about2__tag {
    font-size: calc(var(--se) * 50);
  }
  .about2__sub {
    font-size: calc(var(--se) * 28);
  }
}

/* ---------- Process (dark panel + photo) ---------- */
.process {
  display: grid;
  grid-template-columns: 54fr 46fr;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--dark);
  color: #fff;
}
.process__photo {
  position: relative;
  overflow: hidden;
}
.process__photo img,
.process__photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.process__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 28%),
    linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 30%);
  pointer-events: none;
}
.process__title,
.process__lead {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.3vw, 36px);
  right: 20px;
}
.process__title {
  top: clamp(96px, 12vh, 140px);
  font-size: clamp(26px, 3.4vw, 50px);
}
.process__lead {
  bottom: clamp(26px, 5vh, 64px);
  font-size: clamp(18px, 2.4vw, 36px);
  line-height: 1.15;
}
.process__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(110px, 18vh, 200px) var(--gutter) clamp(26px, 5vh, 64px) clamp(20px, 3.4vw, 52px);
}
.steps {
  display: grid;
  gap: clamp(26px, 6vh, 64px);
}
.steps h3 {
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 400;
}
.steps p {
  margin-top: 0.35em;
  padding-left: 2.2em;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.35;
  max-width: 34ch;
}
.process__motto {
  margin-top: 40px;
  font-size: clamp(24px, 3.5vw, 51px);
}
/* Desktop: the process section is the Figma frame "ABOUT 3" (1440 x 1024), every size and position
   multiplied by one unit --se (1 Figma pixel). It is fitted to the window (one screen, with the
   slim footer line under it). */
@media (min-width: 861px) {
  .process {
    --vh: 100vh;
    --foot: 30px;
    --hs: calc(var(--vh) - var(--foot));
    /* width scale, shrunk only when the window is too short for the frame's compressed layout (760 high) */
    --se: min(calc(100vw / 1440), calc(var(--hs) / 760));
    --fx: 0px; /* the frame sits against the left edge: the photo starts at the window edge, spare width is dark panel */
    position: relative;
    display: block;
    height: var(--hs);
    min-height: 0;
    overflow: hidden;
    background: #222020;
  }
  @supports (height: 100svh) {
    .process {
      --vh: 100svh;
    }
  }
  /* the photo box itself disappears from the layout so that the picture and its two captions
     are positioned against the whole section, like in the Figma frame */
  .process__photo {
    display: contents;
  }
  .process::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--fx) + var(--se) * 776);
    height: 100%;
    background: #08090b;
  }
  /* the picture fills its box (776 wide, full height); framed so the face is below the title */
  .process__photo img,
.process__photo video {
    position: absolute;
    inset: 0 auto auto 0;
    width: calc(var(--se) * 776);
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 35%;
  }
  /* soft shade at the top and bottom so the white texts stay readable over the photograph */
  .process__photo::after {
    display: block;
    left: 0;
    top: 0;
    width: calc(var(--se) * 776);
    height: 100%;
    background: linear-gradient(rgba(10,10,10,.5) 0, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 50%, rgba(10,10,10,.72) 100%);
  }
  .process__title,
  .process__lead,
  .process__motto {
    left: auto;
    margin: 0;
    line-height: normal;
    white-space: nowrap;
    text-align: right;
  }
  .process__title {
    right: calc(100% - var(--fx) - var(--se) * 743);
    top: clamp(calc(var(--se) * 96), calc(var(--se) * 96 + (var(--hs) - var(--se) * 760) * 0.0152), calc(var(--se) * 100));
    font-size: calc(var(--se) * 48);
  }
  .process__lead {
    right: calc(100% - var(--fx) - var(--se) * 685);
    top: clamp(calc(var(--se) * 640), calc(var(--se) * 640 + (var(--hs) - var(--se) * 760) * 0.9091), calc(var(--se) * 880));
    bottom: auto;
    font-size: calc(var(--se) * 35);
  }
  .process__panel,
  .steps {
    display: contents;
  }
  .process__motto {
    position: absolute;
    z-index: 2;
    /* ends on the same right margin as CONTACT in the header */
    right: calc(min(calc(100vw / 1440), calc(var(--vh) / 1024)) * 33);
    top: clamp(calc(var(--se) * 640), calc(var(--se) * 640 + (var(--hs) - var(--se) * 760) * 0.9091), calc(var(--se) * 880));
    font-size: calc(var(--se) * 38);
  }
  .steps li {
    position: absolute;
    z-index: 2;
    left: calc(var(--fx) + var(--se) * 716);
    white-space: nowrap;
  }
  .steps li:nth-child(1) { top: clamp(calc(var(--se) * 230), calc(var(--se) * 230 + (var(--hs) - var(--se) * 760) * 0.3409), calc(var(--se) * 320)); }
  .steps li:nth-child(2) { top: clamp(calc(var(--se) * 330), calc(var(--se) * 330 + (var(--hs) - var(--se) * 760) * 0.5417), calc(var(--se) * 473)); }
  .steps li:nth-child(3) { top: clamp(calc(var(--se) * 430), calc(var(--se) * 430 + (var(--hs) - var(--se) * 760) * 0.7386), calc(var(--se) * 625)); }
  .steps h3 {
    margin: 0;
    font-size: calc(var(--se) * 40);
    line-height: normal;
  }
  .steps p {
    position: absolute;
    top: calc(var(--se) * 54);
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: calc(var(--se) * 20);
    line-height: normal;
  }
  .steps li:nth-child(2) { margin-top: calc(var(--se) * 24); }
  .steps li:nth-child(3) { margin-top: calc(var(--se) * 48); }
  .steps li:nth-child(1) p { left: calc(var(--se) * 100); }
  .steps li:nth-child(2) p { left: calc(var(--se) * 95); }
  .steps li:nth-child(3) p { left: calc(var(--se) * 103); }

  /* About: the closing bar is a single, small line */
  body:has(#about2) .site-footer {
    height: 30px;
    padding: 0 var(--gutter);
    font-size: 11px;
    line-height: 30px;
    letter-spacing: 0.02em;
  }
  body:has(#about2) .site-footer__inner {
    flex-wrap: nowrap;
    height: 30px;
    gap: 24px;
  }
  body:has(#about2) .site-footer__links {
    flex-wrap: nowrap;
    gap: 18px;
  }
  body:has(#about2) .site-footer__meta {
    margin: 0;
    opacity: 0.8;
  }

  /* About: sections settle exactly at the top of the window (no strip of the previous one) */
  html:has(#about2) { scroll-snap-type: y proximity; }
  .bio, .about2, .process { scroll-snap-align: start; }
}

@media (max-width: 860px) {
  .process {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .process__photo {
    aspect-ratio: 4 / 5;
  }
  .process__panel {
    padding: clamp(44px, 10vw, 80px) var(--gutter);
    gap: 48px;
  }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */

/* ---------- 1. Statement on blue ---------- */
.svc-intro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(120px, 18vh, 190px) var(--gutter) clamp(90px, 14vh, 160px) clamp(20px, 3.8vw, 60px);
}
.svc-intro__text {
  max-width: 1330px;
  font-size: clamp(30px, 5vw, 73px);
  line-height: 1.12;
  text-wrap: balance;
}
.svc-intro__mark,
.svc-statement__mark {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 4vh, 50px);
  height: clamp(70px, 9vw, 132px);
  width: auto;
}

.svc-intro__text .gap {
  display: inline;
}
.svc-intro__text .gap::after {
  content: " ";
}

/* Desktop: the statement is the Figma frame "SERVICES": 80 px type, 4 lines, the second half of
   lines 1-3 starting at fixed x positions (733, 617, 972 of 1440), 55 px from the left edge.
   One unit --se = 1 Figma pixel (window width / 1440, limited by the window height). */
@media (min-width: 861px) {
  .svc-intro {
    --vh: 100vh;
    --se: min(calc(100vw / 1440), calc(var(--vh) / 600));
    display: block;
    height: var(--vh);
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  @supports (height: 100svh) {
    .svc-intro {
      --vh: 100svh;
    }
  }
  .svc-intro__text {
    position: absolute;
    left: calc(var(--se) * 55);
    top: calc(var(--vh) * 0.503 - var(--se) * 204.5);
    width: calc(var(--se) * 1318);
    max-width: none;
    font-size: calc(var(--se) * 80);
    line-height: calc(var(--se) * 102.1);
    text-wrap: nowrap;
  }
  .svc-intro__text .ln {
    display: block;
    position: relative;
    height: calc(var(--se) * 102.1);
    white-space: nowrap;
  }
  .svc-intro__text .gap {
    display: none;
  }
  .svc-intro__text .rt {
    position: absolute;
    top: 0;
  }
  .svc-intro__text .rt1 { left: calc(var(--se) * 676); }
  .svc-intro__text .rt2 { left: calc(var(--se) * 560); }
  .svc-intro__text .rt3 { left: calc(var(--se) * 915); }

  html:has(.svc-intro) { scroll-snap-type: y proximity; }
  .svc-intro, .svc-duo { scroll-snap-align: start; }
}

/* ---------- 2. Two services side by side ---------- */
.svc-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh;
  background: #111;
  color: #fff;
}
.svc-duo__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(120px, 24vh, 260px) clamp(20px, 3.6vw, 60px) clamp(90px, 20vh, 220px);
  overflow: hidden;
}
.svc-duo__item img {
  position: absolute;
  z-index: 0; /* the dark layer (::after) must sit above the photo */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-duo__item::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  /* soft dark layer over the whole photo, a little deeper behind the paragraph at the bottom */
  background: linear-gradient(rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.4)),
    linear-gradient(to top, rgba(8, 8, 8, 0.55), rgba(8, 8, 8, 0) 55%);
}
.svc-duo__item--right img { object-position: 40% 50%; }
/* the second photograph is very bright (white wall): a deeper dark layer keeps the white text readable */
.svc-duo__item--right::after {
  background: linear-gradient(rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0.6)),
    linear-gradient(to top, rgba(8, 8, 8, 0.45), rgba(8, 8, 8, 0) 55%);
}
.svc-duo__item > * {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.svc-duo__item h2 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 3.5vw, 51px);
  line-height: 1.1;
}
.svc-duo__item p {
  max-width: 34em;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.45;
}
.svc-duo__item--right {
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 860px) {
  .svc-duo {
    grid-template-columns: 1fr;
  }
  .svc-duo__item {
    min-height: 92vw;
    min-height: max(92vw, 520px);
    padding: clamp(60px, 14vw, 100px) var(--gutter) clamp(30px, 8vw, 56px);
  }
  .svc-duo__item--right {
    text-align: left;
    align-items: flex-start;
  }
}

/* ---------- 3. How it works ---------- */
.how {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(110px, 15vh, 170px) var(--gutter) clamp(60px, 10vh, 110px) clamp(20px, 8.4vw, 130px);
}
.how__head {
  position: relative;
}
.how__title {
  font-size: clamp(38px, 6.7vw, 98px);
}
.how__tagline {
  margin-top: -0.15em;
  text-align: right;
  font-size: clamp(16px, 2.8vw, 41px);
  line-height: 1.15;
}
.how__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 29%);
  align-items: start;
  gap: clamp(24px, 5vw, 90px);
  margin-top: clamp(34px, 8vh, 90px);
  padding-left: clamp(0px, 5.4vw, 80px);
}
.how__steps {
  display: grid;
  gap: clamp(22px, 4.6vh, 50px);
}
.how__steps h3 {
  font-family: var(--font-grotesk);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(22px, 2.8vw, 41px);
  line-height: 1.1;
}
.how__steps p {
  font-size: clamp(16px, 1.75vw, 25px);
  line-height: 1.25;
}
.how__photo img,
.how__photo video {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
/* Desktop: "How it works" follows the Figma layout "HOW IT WORKS" (1351 x 607): the photograph stands in the
   centre, full height. On its left: "HOW IT / WORKS" at the top and the tagline at the bottom, all ending
   against the photo; on its right: the four steps. --se is one design pixel for sizes and heights; --sx
   stretches the horizontal distances to the window width. */
@media (min-width: 861px) {
  .how {
    --vh: 100vh;
    --k: 0.84;                            /* whole composition a little smaller than the Figma frame */
    --se: calc(min(calc(100vw / 1351), calc(var(--vh) / 607)) * var(--k));
    --sx: calc(100vw / 1351 * var(--k));
    --sp: calc(100vw / 1351);             /* the photograph keeps its full Figma size */
    --y0: calc((var(--vh) - var(--se) * 607) / 2);
    --L: calc(50% + var(--sp) * 202.5 + var(--sx) * 35);   /* right edge of the titles: 35 before the photo */
    --T: calc(50% + var(--sp) * 202.5 + var(--sx) * 44);   /* right edge of the tagline */
    --R: calc(50% + var(--sp) * 202.5 + var(--sx) * 35);   /* left edge of the steps: 35 after the photo */
    height: var(--vh);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
  }
  @supports (height: 100svh) {
    .how {
      --vh: 100svh;
    }
  }
  .how__head,
  .how__body,
  .how__steps,
  .how__title,
  .how__tagline {
    display: contents;
  }
  .how__title span,
  .how__tagline span {
    position: absolute;
    margin: 0;
    line-height: normal;
    white-space: nowrap;
  }
  .how__title .t1 { left: calc(50% - var(--sp) * 202.5 - var(--sx) * 295); top: calc(var(--y0) + var(--se) * 104); font-size: calc(var(--se) * 80); }
  .how__title .t2 { left: calc(50% - var(--sp) * 202.5 - var(--sx) * 100); top: calc(var(--y0) + var(--se) * 104); font-size: calc(var(--se) * 80); }
  .how__title .t3 { right: var(--L); text-align: right; top: calc(var(--y0) + var(--se) * 183); font-size: calc(var(--se) * 105); }
  .how__tagline .a { right: var(--T); text-align: right; top: calc(var(--y0) + var(--se) * 320); font-size: calc(var(--se) * 32); }
  .how__tagline .b { right: var(--T); text-align: right; top: calc(var(--y0) + var(--se) * 361); font-size: calc(var(--se) * 32); }
  .how__steps li {
    position: absolute;
    left: var(--R);
    margin: 0;
    max-width: calc(var(--sx) * 410);
  }
  .how__steps li:nth-child(1),
  .how__steps li:nth-child(2) { max-width: calc(var(--sx) * 335); }
  .how__steps li:nth-child(1) { top: calc(var(--y0) + var(--se) * 112); }
  .how__steps li:nth-child(2) { top: calc(var(--y0) + var(--se) * 215); }
  .how__steps li:nth-child(3) { top: calc(var(--y0) + var(--se) * 329); }
  .how__steps li:nth-child(4) { top: calc(var(--y0) + var(--se) * 429); }
  .how__steps h3 {
    margin: 0;
    white-space: nowrap;
    font-size: calc(var(--se) * 36);
    line-height: normal;
  }
  .how__steps p {
    margin: 0;
    font-size: calc(var(--se) * 20);
    line-height: normal;
  }
  html[lang="es"] .how__steps p { font-size: calc(var(--se) * 18); }
  html[lang="es"] .how__steps li:nth-child(1),
  html[lang="es"] .how__steps li:nth-child(2) { max-width: calc(var(--sx) * 375); }
  /* Spanish: "CÓMO FUNCIONA" is longer, so the second word is a little smaller */
  html[lang="es"] .how__title .t1 { left: auto; right: var(--L); }
  html[lang="es"] .how__title .t3 { top: calc(var(--y0) + var(--se) * 205); font-size: calc(var(--se) * 72); }
  /* the photograph: centred, full height */
  .how__photo {
    position: absolute;
    left: calc(50% - var(--sp) * 202.5);
    top: 0;
    width: calc(var(--sp) * 405);
    height: 100%;
    margin: 0;
  }
  .how__photo img,
  .how__photo video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

@media (max-width: 760px) {
  .how__body {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .how__photo {
    order: -1;
    max-width: 360px;
  }
}

/* ---------- 4. Closing statement ---------- */
.svc-statement {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 6vh, 70px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(120px, 16vh, 170px) var(--gutter) clamp(90px, 14vh, 150px) clamp(20px, 5vw, 76px);
}
.svc-statement__big {
  max-width: 1300px;
  color: var(--blue);
  font-size: clamp(30px, 5vw, 73px);
  line-height: 1.12;
  text-wrap: balance;
}
.svc-statement__small {
  font-size: clamp(18px, 2.8vw, 41px);
}
.svc-statement .link-arrow {
  margin-top: clamp(6px, 3vh, 30px);
  align-self: flex-start;
}
.svc-statement__big .ln {
  display: inline;
}

/* Desktop: the closing statement is the Figma frame "SERVICES 4": 96 px type on five fixed
   lines, "Where planning meets instinct." at 64 px, the blue monogram bottom right. One unit
   --se is 1 Figma pixel, fitted so everything is on one screen with the slim footer line
   below (same as About). The frame is centred; the burgundy background is continuous. */
@media (min-width: 861px) {
  /* Figma "SERIVCES 5" (1351 x 607): --se is one design pixel for sizes and heights, --sx stretches the
     horizontal positions to the window width. The first half of each line starts at the left margin,
     the second half ends on the right margin (x 112 to 1240 of the frame). */
  .svc-statement {
    --vh: 100vh;
    --foot: 30px;
    --hs: calc(var(--vh) - var(--foot));
    --se: min(calc(100vw / 1351), calc(var(--hs) / 607));
    --sx: calc(100vw / 1351);
    --fx: calc((100% - var(--se) * 1351) / 2);
    --y0: calc((var(--hs) - var(--se) * 607) / 2);
    display: block;
    height: var(--hs);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
  }
  @supports (height: 100svh) {
    .svc-statement {
      --vh: 100svh;
    }
  }
  .svc-statement__big,
  .svc-statement__small,
  .svc-statement .link-arrow,
  .svc-statement__mark {
    position: absolute;
    margin: 0;
  }
  .svc-statement__big {
    left: calc(var(--sx) * 112);
    width: calc(var(--sx) * 1128);
    top: calc(var(--y0) + var(--se) * 69);
    max-width: none;
    font-size: calc(var(--se) * 70);
    line-height: normal;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .svc-statement__big .ln {
    display: block;
    position: relative;
  }
  .svc-statement__big .gap { display: none; }
  .svc-statement__big .rt {
    position: absolute;
    top: 0;
    right: 0;
  }
  .svc-statement__small {
    left: calc(var(--sx) * 112);
    top: calc(var(--y0) + var(--se) * 534);
    font-size: calc(var(--se) * 40);
    line-height: normal;
    white-space: nowrap;
  }
  /* "Get in touch" sits in the bottom-right corner (where the monogram is in Figma), same size
     as the other links of the site and ending on the same right margin as CONTACT */
  .svc-statement .link-arrow {
    right: calc(min(calc(100vw / 1440), calc(var(--vh) / 1024)) * 33);
    bottom: calc(min(calc(100vw / 1440), calc(var(--vh) / 1024)) * 56);
    gap: 0;
    letter-spacing: 0;
    font-size: calc(min(calc(100vw / 1440), calc(var(--vh) / 760)) * 19);
  }
  .svc-statement .link-arrow span {
    margin-left: 0.12em;
  }
  .svc-statement__mark {
    left: calc(var(--fx) + var(--se) * 1308);
    top: calc(var(--y0) + var(--se) * 883);
    right: auto;
    bottom: auto;
    height: calc(var(--se) * 87);
    width: auto;
  }

  /* the closing bar is a single, small line (as in About) */
  body:has(.svc-statement) .site-footer {
    height: 30px;
    padding: 0 var(--gutter);
    font-size: 11px;
    line-height: 30px;
    letter-spacing: 0.02em;
  }
  body:has(.svc-statement) .site-footer__inner {
    flex-wrap: nowrap;
    height: 30px;
    gap: 24px;
  }
  body:has(.svc-statement) .site-footer__links {
    flex-wrap: nowrap;
    gap: 18px;
  }
  body:has(.svc-statement) .site-footer__meta {
    margin: 0;
    opacity: 0.8;
  }
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.pj-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--gutter);
  overflow: hidden;
  background: #222;
  color: #fff;
}
.pj-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.pj-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.12) 65%),
    linear-gradient(to top, rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0) 40%);
}
.pj-hero__text {
  position: relative;
  z-index: 1;
  margin-top: 4vh;
}
.pj-hero h1 {
  font-size: clamp(38px, 5.9vw, 86px);
}
.pj-hero p {
  margin-top: 0.3em;
  font-size: clamp(19px, 2.4vw, 35px);
  line-height: 1.2;
  max-width: 24em;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 58fr 42fr;
  min-height: 100vh;
  min-height: 100svh;
}
.contact__panel {
  padding: clamp(100px, 12vh, 140px) clamp(20px, 5vw, 80px) clamp(40px, 7vh, 80px) clamp(20px, 8.4vw, 130px);
}
.contact__title {
  font-weight: 400;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1;
}
.contact__lead {
  margin: 0.25em 0 clamp(26px, 5vh, 56px);
  font-family: var(--font-grotesk);
  font-size: clamp(18px, 2.2vw, 32px);
  line-height: 1.2;
}
.contact__form-wrap {
  max-width: 800px;
}
.contact__info {
  display: grid;
  justify-items: end;
  gap: 12px;
  max-width: 800px;
  margin-top: clamp(30px, 6vh, 60px);
  font-size: clamp(17px, 1.65vw, 24px);
  text-align: right;
}
.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px clamp(20px, 3vw, 44px);
}
.contact__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.contact__links a:hover {
  border-bottom-color: currentColor;
}
.contact__links svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.contact__where {
  letter-spacing: 0.03em;
}
.contact__photo {
  position: relative;
  overflow: hidden;
  background: #333;
}
.contact__photo > img:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.contact__mono {
  position: absolute;
  left: 50%;
  top: 38%;
  width: clamp(80px, 11vw, 160px);
  transform: translate(-50%, -50%);
}
@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .contact__panel {
    padding: clamp(110px, 22vw, 150px) var(--gutter) clamp(44px, 9vw, 70px);
  }
  .contact__photo {
    aspect-ratio: 4 / 3;
  }
  .contact__info,
  .contact__links {
    justify-items: start;
    justify-content: flex-start;
    text-align: left;
  }
}

/* Home (desktop): the scroll settles with INTRO exactly at the top of the window,
   so the whole composition is visible at once. Gentle "proximity" snapping only. */
@media (min-width: 861px) {
  html:has(#hero) { scroll-snap-type: y proximity; }
  #hero, #intro, .svc-preview, .carousel, .cta { scroll-snap-align: start; }
}

/* Projects and Contact (desktop): the closing bar is a single, small line (as in About and Services) */
@media (min-width: 861px) {
  body:has(.gallery) .site-footer,
  body:has(.wd) .site-footer,
  body:has(.contact) .site-footer {
    height: 30px;
    padding: 0 var(--gutter);
    font-size: 11px;
    line-height: 30px;
    letter-spacing: 0.02em;
  }
  body:has(.gallery) .site-footer__inner,
  body:has(.wd) .site-footer__inner,
  body:has(.contact) .site-footer__inner {
    flex-wrap: nowrap;
    height: 30px;
    gap: 24px;
  }
  body:has(.gallery) .site-footer__links,
  body:has(.wd) .site-footer__links,
  body:has(.contact) .site-footer__links {
    flex-wrap: nowrap;
    gap: 18px;
  }
  body:has(.gallery) .site-footer__meta,
  body:has(.wd) .site-footer__meta,
  body:has(.contact) .site-footer__meta {
    margin: 0;
    opacity: 0.8;
  }
}

/* Contact (desktop): the whole page fits in one window, no scrolling.
   --u is one design pixel; the form, title and links shrink together with the window. */
@media (min-width: 861px) {
  .contact {
    --u: min(calc(100vw / 1440), calc((100svh - 30px) / 740));
    height: calc(100svh - 30px);
    min-height: 0;
  }
  .contact__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--u) * 62) calc(var(--u) * 70) calc(var(--u) * 14) clamp(20px, 8.4vw, 130px);
  }
  .contact__title { font-size: calc(var(--u) * 76); }
  .contact__lead {
    font-size: calc(var(--u) * 24);
    white-space: nowrap;
    margin: 0.15em 0 calc(var(--u) * 22);
  }
  .contact__form-wrap { max-width: none; }
  .contact .form { gap: calc(var(--u) * 14) calc(var(--u) * 36); }
  .contact .field { gap: calc(var(--u) * 5); }
  .contact .field label { font-size: calc(var(--u) * 21); }
  .contact .field input,
  .contact .field select,
  .contact .field textarea {
    min-height: calc(var(--u) * 38);
    padding: calc(var(--u) * 6) calc(var(--u) * 12);
    font-size: max(12px, calc(var(--u) * 18));
    border-width: 1px;
  }
  .contact .field select { padding-right: calc(var(--u) * 34); }
  .contact .field textarea {
    height: calc(var(--u) * 74);
    min-height: 0;
    resize: none;
  }
  .contact .form__actions { margin-top: calc(var(--u) * 2); }
  .contact .btn {
    min-width: calc(var(--u) * 190);
    padding: calc(var(--u) * 10) calc(var(--u) * 32);
    font-size: calc(var(--u) * 22);
  }
  .contact__info {
    max-width: none;
    margin-top: calc(var(--u) * 20);
    gap: calc(var(--u) * 6);
    font-size: max(13px, calc(var(--u) * 22));
  }
  .contact__links svg { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
}

/* Spanish (desktop): the lines are longer, so the big staggered texts are a little smaller
   and their right-hand halves start further right than in English. */
@media (min-width: 861px) {
  html[lang="es"] .intro__title,
  html[lang="es"] .intro__body { font-size: calc(var(--se) * 38); }
  html[lang="es"] .intro__body .rt1 { left: calc(var(--se) * 728); }
  html[lang="es"] .intro__body .rt2 { left: calc(var(--se) * 844); }
  html[lang="es"] .intro__body .rt3 { left: calc(var(--se) * 684); }
  html[lang="es"] .intro__body .rt4 { left: calc(var(--se) * 400); }
  html[lang="es"] .intro__body .rt4b { margin-left: calc(var(--se) * 51); }

  html[lang="es"] .svc-intro__text .rt { left: auto; right: 0; }
  html[lang="es"] .svc-intro__text { font-size: calc(var(--se) * 64); line-height: calc(var(--se) * 120); }
  html[lang="es"] .svc-intro__text .ln { height: calc(var(--se) * 120); }
}
@media (min-width: 861px) {
  html[lang="es"] .svc-statement__small { font-size: calc(var(--se) * 32); }
}

@media (min-width: 861px) {
  .contact .form__actions { gap: calc(var(--u) * 14); }
  .contact .btn--ghost { min-width: 0; padding: calc(var(--u) * 10) calc(var(--u) * 24); font-size: calc(var(--u) * 19); letter-spacing: 0.04em; }
}

/* Contact (desktop): the contact details are spread out and separated from the form by a thin line */
@media (min-width: 861px) {
  .contact__info {
    justify-items: stretch;
    text-align: left;
    margin-top: calc(var(--u) * 18);
    padding-top: calc(var(--u) * 14);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    gap: calc(var(--u) * 4);
  }
  .contact__links { justify-content: space-between; flex-wrap: nowrap; }
  .contact__where {
    font-size: max(11px, calc(var(--u) * 15));
    letter-spacing: 0.12em;
    opacity: 0.65;
  }
}

/* ==========================================================================
   WEDDING PAGE (wedding.html): title, venue, photo selection, viewer
   ========================================================================== */
.wd {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(96px, 13vh, 140px) clamp(18px, 3vw, 48px) clamp(40px, 7vh, 80px);
  background: var(--dark) url("../assets/images/textures/texture-dark.jpg") center / cover;
  color: #fff;
}
.wd__back {
  display: inline-block;
  margin-bottom: clamp(20px, 4vh, 44px);
  font-size: clamp(15px, 1.3vw, 19px);
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.3s;
}
.wd__back:hover,
.wd__back:focus-visible {
  opacity: 1;
}
.wd__head {
  margin-bottom: clamp(26px, 5vh, 56px);
  text-align: center;
}
.wd__names {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.1;
}
.wd__venue {
  margin-top: 0.3em;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 27px);
  opacity: 0.9;
}
.wd__review {
  width: 100%;
  margin: clamp(18px, 2.6vw, 34px) 0 clamp(18px, 2.6vw, 34px);
  text-align: left;
}
.wd__reviewtext {
  position: relative;
  max-height: 7.2em;
  overflow: hidden;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  opacity: 0.92;
}
.wd__reviewtext::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3.2em;
  background: linear-gradient(rgba(46, 44, 45, 0), #2e2c2d);
}
.wd__reviewtext.is-open { max-height: none; }
.wd__reviewtext.is-open::after { display: none; }
.wd__reviewtext p + p { margin-top: 1em; }
.wd__more {
  margin-top: 0.6em;
  padding: 0.4em 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: inherit;
  font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.wd__row {
  display: flex;
  gap: clamp(6px, 0.9vw, 14px);
  margin-bottom: clamp(6px, 0.9vw, 14px);
}
.wd__row .wd__photo {
  width: auto;
  min-width: 0;
}
.wd__photo--wide {
  width: 100%;
}
.wd__photo {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #3b3839;
  cursor: zoom-in;
  overflow: hidden;
}
.wd__photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease), opacity 0.4s;
}
.wd__photo--crop img {
  height: 100%;
  object-fit: cover;
}
.wd__photo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
@media (hover: hover) and (pointer: fine) {
  .wd__photo:hover img {
    transform: scale(1.04);
  }
}
.wd__next {
  display: block;
  margin-top: clamp(30px, 6vh, 64px);
  text-align: right;
  font-size: clamp(17px, 1.6vw, 24px);
  color: #fff;
  text-decoration: none;
}
.wd__next:hover .wd__nextname,
.wd__next:focus-visible .wd__nextname {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.wd__nexttxt {
  opacity: 0.7;
}

/* full-screen photo viewer */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 13, 13, 0.95);
}
.viewer[hidden] {
  display: none;
}
.viewer__img {
  max-width: min(92vw, 1500px);
  max-height: 88vh;
  max-height: 88svh;
  object-fit: contain;
}
.viewer button {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-serif);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.viewer button:hover,
.viewer button:focus-visible {
  opacity: 1;
}
.viewer__close {
  top: 14px;
  right: 22px;
  font-size: 44px;
  line-height: 1;
}
.viewer__prev,
.viewer__next {
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  font-size: 34px;
}
.viewer__prev { left: 8px; }
.viewer__next { right: 8px; }
body.viewer-open {
  overflow: hidden;
}

/* ---- About (ES): match Figma line breaks ---- */
html[lang="es"] .about2__title .keep:nth-of-type(3)::before { content: "\A"; white-space: pre; }
html[lang="es"] .about2__desc { max-width: 25ch; }
html[lang="es"] .about2__col:nth-child(2) .about2__desc { max-width: 34ch; }
@media (min-width: 900px) {
  html[lang="es"] .process__lead { white-space: nowrap; line-height: 1.2; }
}
@media (min-width: 900px) {
  html[lang="es"] .about2__foot { margin-top: calc(var(--se) * 48); }
}
@media (min-width: 861px) {
  html[lang="es"] .svc-duo__item h2 { font-size: clamp(22px, 2.9vw, 44px); white-space: nowrap; }
}
@media (min-width: 861px) {
  /* both paragraphs start at the same height, whatever their length */
  .svc-duo__item { justify-content: flex-start; }
  .svc-duo__item p { margin-top: clamp(80px, 30vh, 340px); }
}

@media (max-width: 860px) {
  /* phone: the blue PEC / PEK block is compact (no full-screen pin): little blue above and below */
  .js .about2 {
    height: auto;
  }
  .js .about2__stage {
    position: relative;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    gap: clamp(30px, 8vw, 44px);
    padding: clamp(60px, 15vw, 84px) var(--gutter) clamp(44px, 11vw, 64px);
  }
}

@media (max-width: 860px) {
  /* Services on the phone: the two statements (dark and burgundy) are compact and justified like on the web */
  .svc-intro,
  .svc-statement {
    min-height: 0;
    padding: clamp(84px, 22vw, 110px) var(--gutter) clamp(44px, 11vw, 64px);
  }
  .svc-statement { gap: clamp(22px, 6vw, 34px); }
  .svc-intro__text,
  .svc-statement__big {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-wrap: wrap;
    font-size: clamp(20px, 5.3vw, 30px);
    line-height: 1.2;
  }
  .svc-intro__text .ln::after,
  .svc-statement__big .ln::after { content: " "; }
  .svc-statement__small { font-size: clamp(15px, 4vw, 20px); }
  .svc-intro__mark,
  .svc-statement__mark { display: none; }

  /* the video keeps its proportions: a calm 4:5 frame, full width */
  .how { min-height: 0; padding-bottom: clamp(44px, 11vw, 64px); }
  .how__photo { max-width: none; width: 100%; margin: 0; }
  .how__photo video,
  .how__photo img { aspect-ratio: 4 / 5; height: auto; }
}
@media (max-width: 860px) {
  .svc-statement__big .gap { display: inline; }
  .svc-statement__big .gap::after { content: " "; }
}
@media (max-width: 860px) {
  /* a bit more air above and below the two text-only slides */
  .svc-intro {
    padding: clamp(110px, 29vw, 140px) var(--gutter) clamp(70px, 18vw, 96px);
  }
  .svc-statement {
    padding: clamp(84px, 22vw, 110px) var(--gutter) clamp(76px, 19vw, 100px);
  }
}