/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #FAF7F1;
  --bg-alt: #F3EDE3;
  --ink: #241A12;
  --ink-alt: #32241A;
  --text: #3B2A1E;
  --text-muted: rgba(59, 42, 30, 0.78);
  --accent: #f15922;
  --accent-dark: #f15922;
  --accent-gold: #f15922;
  --accent-gold-dark: #f15922;
  /* headings + sub-headings (all var(--font-serif) users) */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchor jumps land below the fixed nav bar, not under it */
  scroll-padding-top: 84px;
}

section[id],
footer[id] {
  scroll-margin-top: 88px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: clip;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-dark);
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--accent-dark);
  color: var(--bg);
}

.btn--outline {
  border: 1px solid rgba(59, 42, 30, 0.38);
  color: var(--text);
}

.btn--outline:hover {
  background: rgba(59, 42, 30, 0.06);
}

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px clamp(20px, 4vw, 60px);
  transition: padding 0.4s ease, background 0.4s ease, transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
  filter: drop-shadow(0 2px 10px rgba(59, 42, 30, 0.45)) drop-shadow(0 1px 2px rgba(59, 42, 30, 0.35));
  background: rgba(255, 255, 255, 0);
  /* background fades in via JS (frame() in script.js), only once the hero's
     banner animation completes — it must stay hidden on first load.
     backdrop-filter is intentionally left off — it blurred the mark as it
     passed behind the nav during the park animation */
}

/* a subtle glowing wash behind the logo/menu, only meant to show once the
   hero's background photo has revealed behind the fixed nav (see frame()
   in script.js); sits behind the nav content, never above it */
.nav__glow {
  position: absolute;
  inset: -14px -24px;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(241, 89, 34, 0.07), rgba(241, 89, 34, 0) 72%);
  filter: blur(22px);
  pointer-events: none;
  will-change: opacity;
}

/* scrolled past the hero banner (script.js toggles .is-solid): a flat,
   semi-transparent white bar — no gradient — with dark menu text. The
   !important beats the inline gradient frame() writes while over the
   banner; the text drop-shadow/glow were only for legibility over photos */
.nav.is-solid {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  filter: none;
  box-shadow: 0 1px 0 rgba(36, 26, 18, 0.08), 0 10px 30px -18px rgba(36, 26, 18, 0.3);
}

/* scrolling down past the banner tucks the bar away (script.js) */
.nav.is-hidden {
  transform: translateY(-110%);
}

.nav.is-solid .nav__glow {
  visibility: hidden;
}

.nav.is-solid .nav__menu {
  color: var(--ink);
}

.nav__logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav__logo img {
  height: 54px; /* 43px + 25% */
  width: auto;
  display: block;
}

.nav__menu {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.nav__menu a {
  color: inherit;
  padding: 10px 10px;
}

/* hover: an orange line draws in left to right, 10px below the text
   (the link's bottom padding), and retracts the same way on leave */
.nav__menu a:not(.nav__cta) {
  position: relative;
}

.nav__menu a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__menu a:not(.nav__cta):hover::after,
.nav__menu a:not(.nav__cta):focus-visible::after {
  transform: scaleX(1);
}

.nav__menu a:not(.nav__cta):hover {
  color: inherit;
}

.nav__cta {
  color: var(--bg) !important;
  background: var(--accent);
  padding: 18px 48px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.nav__cta:hover {
  background: var(--accent-dark);
  border-bottom: none;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  height: 2px;
  background: var(--text);
}

/* ===== Mobile drawer ===== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(250, 247, 241, 0.97);
  backdrop-filter: blur(20px);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 7vw, 56px);
}

.drawer.is-open {
  display: flex;
}

.drawer a {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(30px, 8.5vw, 44px);
  padding: 15px 0;
  border-bottom: 1px solid rgba(59, 42, 30, 0.2);
}

.drawer__enquire,
.drawer__visit {
  color: var(--accent) !important;
  border-bottom: none !important;
}

.drawer__close {
  position: absolute;
  top: 16px;
  right: clamp(18px, 4vw, 56px);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(59, 42, 30, 0.3);
  border-radius: 2px;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

/* ===== Hero / Banner — scroll-scrubbed cinematic sequence =====
   The section is 260vh tall; its inner .hero__sticky pins at 100vh via
   position:sticky while js/script.js drives every layer's transform as a
   function of scroll progress through that span (see frame() in script.js).
   All keyframes in frame() are fractions of this span, so shortening the
   height compresses the whole sequence without touching the JS. */
.hero {
  position: relative;
  height: 260vh;
  /* background: var(--bg); */
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
  perspective: 1500px;
  perspective-origin: 50% 48%;
}

/* logo stages */
.hero__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__old-mark {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(380px, 52vw);
  height: auto;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
}

.hero__now {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* same geometric bold caps as the old SOLARIS wordmark; size, spacing
     and position are fitted to that wordmark by fitNow() in script.js */
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(38px, 7.4vw, 104px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0B0B0B;
  will-change: transform, opacity, filter;
}

/* background reveal — the site's hero image + a translucent panel, both
   fading in as soon as the video's reveal reaches its final frame and drops
   its own background (see frame() in script.js) */
/* line grid shown on white between the video and the photo (script.js
   fades + draws it in top-to-bottom); pulses pause once the photo covers it */
.hero__field {
  opacity: 0;
  background-image:
    linear-gradient(rgba(241, 89, 34, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 89, 34, 0.16) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 44%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 44%, #000 25%, transparent 80%);
}

.hero__field.is-covered .values__pulse {
  animation-play-state: paused;
}

/* the photo rises from the bottom edge, small, and grows to full-bleed */
.hero__bgreveal {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}

.hero__bgreveal-img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  display: block;
}

/* dark wash behind the bottom-left copy so the white title and orange
   "Lives Better" read over the bright sunset photo */
.hero__bgreveal-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 14, 9, 0.62) 0%, rgba(20, 14, 9, 0.34) 0%, rgba(20, 14, 9, 0) 30%),
    linear-gradient(0deg, rgba(20, 14, 9, 0.5) 0%, rgba(20, 14, 9, 0) 55%);
}

/* the reference video itself — scrubbed frame-by-frame to scroll position
   (see frame() in script.js). Once it reaches its final frame it simply
   fades out in place (its own background never travels anywhere) — the
   transparent .hero__new-mark below is what parks into the nav icon */
.hero__logo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  display: block;
  pointer-events: none;
  will-change: opacity;
}

/* the transparent logo mark — crossfades in over the video's last frame
   once the reveal completes, then alone does the parking motion into the
   nav icon (see frame() in script.js). No background/container of its
   own, so only the mark is ever visible as it travels */
.hero__new-mark {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(380px, 52vw);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: none;
  pointer-events: none;
  will-change: transform, opacity;
}

/* resolve — eyebrow / title / desc / actions */
.hero__lede {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 50px clamp(18px, 5vw, 72px) 150px;
  opacity: 0;
  pointer-events: none;
}

.hero__lede-fade {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

.hero__lede-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: auto;
  position: relative;
  max-width: clamp(350px, 54vw, 780px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.92);
  text-shadow: 0 1px 10px rgba(20, 14, 9, 0.35);
  margin-bottom: 18px;
}

.hero__eyebrow-rule {
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

/* "Lives Better": light serif italic in Solaris orange under the sans line */
.hero__title em {
  display: inline-block;
  margin-top: 0.08em;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  font-style: italic;
  font-weight: 500;
  font-size: 1.12em;
  letter-spacing: -0.01em;
  color: var(--accent-gold);
}

.hero__title {
font-family: var(--font-sans);
    font-weight: 900;
    font-size: 45px;
    line-height: 51px;
    letter-spacing: -0.015em;
    color: var(--bg);
}

.hero__desc {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.85);
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero__actions .btn--outline {
  border-color: rgba(250, 247, 241, 0.55);
  color: var(--bg);
}

.hero__actions .btn--outline:hover {
  background: rgba(250, 247, 241, 0.12);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(59, 42, 30, 0.78);
  animation: sol-hint 2.6s ease-in-out infinite;
}

@keyframes sol-hint {

  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.45;
  }

  50% {
    transform: translate(-50%, 8px);
    opacity: 0.95;
  }
}

/* ===== Marquee ===== */
.marquee {
  border-top: 1px solid rgba(59, 42, 30, 0.16);
  border-bottom: 1px solid rgba(59, 42, 30, 0.16);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: sol-drift 44s linear infinite;
  padding: 15px 0;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.marquee .dot {
  color: var(--accent);
}

@keyframes sol-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =====================================================================
   Shared scaffolding for the content sections below the banner:
   .section (padding/rhythm), .parallax (JS-driven depth layers, see
   updateParallax() in script.js), .reveal (IntersectionObserver fade-up).
   ===================================================================== */
.section {
  position: relative;
  padding: clamp(80px, 12vw, 80px) clamp(20px, 5vw, 72px);
  overflow: hidden;
}

.section--alt {
  background: var(--bg-alt);
}

.section--dark {
  background: var(--ink);
  color: var(--bg);
}

.section--dark .section__desc {
  color: rgba(250, 247, 241, 0.72);
}

.section__head {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto clamp(44px, 6vw, 80px);
}

.section__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* Bodoni Moda is a variable font with an optical-size axis; letting it
     auto-scale ("auto", the default) at this large a size pushes it into
     glyphs so thin/tight that adjacent letters visually merge. Pin it to a
     fixed, smaller optical size instead. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}

.section__desc {
  margin-top: 20px;
  max-width: 58ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--text-muted);
}

/* parallax scaffolding — host clips, .parallax__layer is the piece JS moves */
.parallax {
  position: relative;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  inset: -16% -6%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* text elements that drift on scroll without leaving normal flow */
[data-parallax-text] {
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* left-to-right wipe reveal: [data-wipe] text is clipped from the right
   and opens when script.js adds .is-wiped (once, on first view). The
   negative insets keep italic overhangs and descenders unclipped.
   --wd staggers items */
[data-wipe] {
  clip-path: inset(-25% 100% -25% -6%);
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.18, 1) var(--wd, 0s);
}

[data-wipe].is-wiped {
  clip-path: inset(-25% -6% -25% -6%);
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 {
  transition-delay: 0.08s;
}

.reveal--delay-2 {
  transition-delay: 0.16s;
}

.reveal--delay-3 {
  transition-delay: 0.24s;
}

.reveal--delay-4 {
  transition-delay: 0.32s;
}

/* ===== Four addresses, building now =====
   a grid of project cards: a framed photo (a parallax layer, host clips
   via .parallax, see updateParallax() in script.js, that drifts gently as
   the page scrolls) with chip badges over it, sitting inside a white card
   whose lower half holds the name/CTA/location. Each card reveals in via
   the shared .reveal fade-up (IntersectionObserver-driven, see script.js) */
.addr {
  position: relative;
}


.section__eyebrow-rule {
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  background: currentColor;
  vertical-align: middle;
  transform: translateY(-2px);
}

.addr .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

/* title on top, description on its own line below it (user asked) */
.addr__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

.addr__desc {
  margin-top: 0;
  max-width: none;
}

/* one line where there's room; phones wrap normally */
@media (min-width: 600px) {
  .addr__desc {
    white-space: nowrap;
  }
}

/* two lines in Playfair Display: dark first line, orange italic second */
.addr__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  font-weight: 400;
  font-size: clamp(22px, 3.73vw, 47px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #1A1410;
}

.addr__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-gold);
}

.addr__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.addr__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  max-width: 1180px;
  margin: 0 auto;
}

.addr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(340px, 32vw, 460px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(36, 26, 18, 0.16);
  /* fallback so any residual sub-pixel edge (or a slow-loading image) never
     shows the page's cream background behind it */
  background: var(--ink);
}

.addr-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.addr-card__media .parallax__layer {
  /* overrides the shared .parallax__layer inset: top/left (not margin —
     margin-top/bottom would resolve against the container's *width*, not
     height) are set to exactly half of the width/height overhang below,
     which centres the oversized image and keeps it covering the card
     through its full ±18px drift range (see data-range on the host, and
     drift() in script.js) regardless of translate direction */
  top: -10%;
  left: -3%;
  width: 106%;
  height: 120%;
  object-fit: cover;
  display: block;
}

/* see-through frosted pill: a light tint + blur of the photo behind, a
   hairline edge, and white text (with a soft shadow for legibility) */
.addr-card__loc {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(20, 14, 9, 0.45);
  box-shadow: 0 4px 14px rgba(20, 14, 9, 0.18);
}

.addr-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 18px 0;
}

/* crisp white sans title over a soft dark shade at the photo's top (see
   .addr-card__media::after) — replaces the dark serif + white glow, which
   read blurry. Legible whatever sits behind it in the photo */
.addr-card__name {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(20, 14, 9, 0.35);
}

.addr-card__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 9, 0.5) 0%, rgba(20, 14, 9, 0.18) 22%, transparent 42%);
  pointer-events: none;
}

.addr-card__arrow {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(36, 26, 18, 0.28);
  transition: background 0.3s ease, transform 0.3s ease;
}

.addr-card__arrow svg {
  width: 16px;
  height: 16px;
}

.addr-card__arrow:hover {
  /* explicit color needed here — the global a:hover{color} rule has higher
     specificity than a plain single-class base rule, so without this the
     icon would flip to --accent-dark instead of staying cream */
  background: var(--accent-gold-dark);
  color: var(--bg);
  transform: scale(1.08);
}

.addr-card__loc {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  gap: 8px;
  margin: auto 18px 18px;
  font-weight: 500;
  /* never under the 42px arrow button (18px card inset + 12px breathing
     room); a long address wraps instead */
  max-width: calc(100% - 36px - 54px);
  border-radius: 18px;
}

/* keeps each address part whole, so a wrap falls after the comma */
.addr-card__loc-part {
  white-space: nowrap;
}

/* very narrow phones: the longest part (Serampore's street) can't fit
   whole, so let it wrap like normal text */
@media (max-width: 360px) {
  .addr-card__loc-part {
    white-space: normal;
  }
}

/* map-pin icon (inline SVG): thin white outline, matching the text */
.addr-card__pin {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: -2px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(20, 14, 9, 0.45));
}

/* ===== Solaris Values =====
   light "bento" grid on a champagne backdrop: a wide feature tile, four
   icon tiles and one tall photo tile. Hover effects live on
   pseudo-elements/children only — the tiles themselves carry .reveal,
   whose transition (and per-tile delay) a `transition` declared here
   would otherwise overwrite */
.values {
  --gold: #f15922;
  --gold-soft: rgba(241, 89, 34, 0.22);
  isolation: isolate;
  padding-top: clamp(44px, 5.7vw, 80px);
  padding-bottom: clamp(44px, 5.7vw, 80px);
  background:
    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(214, 181, 128, 0.28), transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(214, 181, 128, 0.18), transparent 70%),
    linear-gradient(180deg, #F4ECDF 0%, #FBF8F2 55%, #F6EFE4 100%);
  border-top: 1px solid rgba(241, 89, 34, 0.14);
}

/* fine architectural grid in Solaris orange, faded out toward the edges.
   The pulses inside ride exactly on its lines (multiples of 64px) */
.values__field {
  --cell: 64px;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(241, 89, 34, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 89, 34, 0.09) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* a short orange light travelling along one grid line. Only `transform`
   animates; paused off-screen via .is-offscreen (set in script.js) */
.values__pulse {
  position: absolute;
  box-shadow: 0 0 8px 1px rgba(241, 89, 34, 0.35);
  animation: var(--dur, 12s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

.values__pulse--h {
  top: calc(var(--row) * var(--cell));
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, rgba(241, 89, 34, 0), rgba(241, 89, 34, 0.95), rgba(241, 89, 34, 0));
  animation-name: values-pulse-x;
}

.values__pulse--v {
  top: 0;
  left: calc(var(--col) * var(--cell));
  width: 1px;
  height: 180px;
  background: linear-gradient(180deg, rgba(241, 89, 34, 0), rgba(241, 89, 34, 0.95), rgba(241, 89, 34, 0));
  animation-name: values-pulse-y;
}

@keyframes values-pulse-x {
  from {
    transform: translateX(-200px);
  }

  to {
    transform: translateX(100vw);
  }
}

@keyframes values-pulse-y {
  from {
    transform: translateY(-200px);
  }

  to {
    transform: translateY(1600px);
  }
}

.values.is-offscreen .values__pulse {
  animation-play-state: paused;
}

.values__sun {
  position: absolute;
  z-index: 0;
  top: clamp(-160px, -10vw, -80px);
  right: clamp(-160px, -10vw, -80px);
  width: clamp(280px, 34vw, 480px);
  height: auto;
  fill: none;
  stroke: rgba(241, 89, 34, 0.22);
  stroke-width: 1;
  pointer-events: none;
  animation: values-spin 90s linear infinite;
}

.values__sun circle:nth-child(2) {
  stroke-dasharray: 2 12;
}

@keyframes values-spin {
  to {
    transform: rotate(360deg);
  }
}

.values__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 48px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto clamp(20px, 2.4vw, 34px);
}

.values .section__eyebrow {
  color: var(--gold);
  margin-bottom: 12px;
}

.values .section__title {
  color: var(--ink);
}

.values__lead {
  max-width: 30ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--text-muted);
}

.values__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "v1 v1 img"
    "v2 v3 img"
    "v4 v5 img";
  gap: clamp(12px, 1.2vw, 16px);
  max-width: 1180px;
  margin: 0 auto;
}

.value-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* icon sits beside the title (not above it); description spans below */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  column-gap: 14px;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 1.8vw, 26px);
  border-radius: 20px;
  /* frosted peach glass inside a gold gradient hairline border (the
     border-box layer shows only through the transparent 1px border) */
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(255, 251, 248, 0.94) 0%, rgba(253, 243, 236, 0.9) 100%) padding-box,
    linear-gradient(135deg, rgba(241, 89, 34, 0.55), rgba(241, 89, 34, 0.06) 38%, rgba(241, 89, 34, 0.06) 62%, rgba(241, 89, 34, 0.4)) border-box;
  box-shadow:
    0 1px 2px rgba(36, 26, 18, 0.04),
    0 30px 60px -30px rgba(90, 50, 20, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* smooths the mouse tilt (--rx/--ry, set in script.js and applied in
     the scroll-slide transform) */
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.5s ease;
}

.value-tile:hover,
.value-tile.is-current {
  box-shadow:
    0 1px 2px rgba(36, 26, 18, 0.04),
    0 40px 70px -30px rgba(241, 89, 34, 0.35);
}

/* gold rule that draws across the top edge on hover */
.value-tile::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(241, 89, 34, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* champagne wash + gold hairline border, faded in on hover */
.value-tile::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  /* a soft light that follows the cursor (--lx/--ly from script.js) */
  background:
    radial-gradient(260px circle at var(--lx, 20%) var(--ly, 0%), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    radial-gradient(420px circle at var(--lx, 20%) var(--ly, 0%), rgba(241, 89, 34, 0.12), rgba(241, 89, 34, 0) 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.value-tile:hover::before,
.value-tile.is-current::before {
  transform: scaleX(1);
}

.value-tile:hover::after,
.value-tile.is-current::after {
  opacity: 1;
}

.value-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: #FFFFFF;
  color: var(--gold);
  box-shadow: 0 6px 16px -8px rgba(241, 89, 34, 0.45);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.value-tile__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-tile:hover .value-tile__icon,
.value-tile.is-current .value-tile__icon {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFFFFF;
}

.value-tile__title {
  /* clear of the outlined numeral in the top-right corner */
  padding-right: clamp(44px, 4.4vw, 64px);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 23px);
  line-height: 1.2;
  color: var(--ink);
}

.value-tile__desc {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* outlined numeral in the corner — Playfair rather than Bodoni, whose
   optical-size axis misbehaves at display sizes (see .section__title) */
.value-tile__num {
  position: absolute;
  z-index: -1;
  top: 14px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 4.6vw, 66px);
  line-height: 1;
  /* outlined numeral with a faint gold gradient fill */
  background: linear-gradient(160deg, rgba(241, 89, 34, 0.16), rgba(241, 89, 34, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 89, 34, 0.3);
  transition: -webkit-text-stroke-color 0.4s ease, transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.value-tile:hover .value-tile__num,
.value-tile.is-current .value-tile__num {
  -webkit-text-stroke-color: rgba(241, 89, 34, 0.65);
  transform: translateY(-4px);
}

/* the feature tile gets a warmer champagne surface to lead the grid */
.value-tile--feature {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(241, 89, 34, 0.07), transparent 60%) padding-box,
    linear-gradient(135deg, #FFFAF6 0%, #FDF0E8 100%) padding-box,
    linear-gradient(135deg, rgba(241, 89, 34, 0.6), rgba(241, 89, 34, 0.08) 40%, rgba(241, 89, 34, 0.08) 60%, rgba(241, 89, 34, 0.45)) border-box;
}

.value-tile--feature .value-tile__title {
  font-size: clamp(24px, 2.3vw, 31px);
}

.value-tile--feature .value-tile__desc {
  max-width: 62ch;
  font-size: clamp(14.5px, 1.1vw, 16px);
}

.value-tile--feature .value-tile__num {
  font-size: clamp(64px, 7vw, 108px);
}

.values__visual {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  /* warm "matte" behind the uncropped photo (see .values__visual img) —
     a deliberate cream/champagne mount, not a placeholder gray */
  background:
    radial-gradient(ellipse at 100% 0%, rgba(241, 89, 34, 0.07), transparent 60%),
    linear-gradient(165deg, #FFFAF6 0%, #FDF0E8 100%);
  box-shadow: 0 24px 50px -22px rgba(90, 62, 28, 0.35);
}

/* Uncropped: object-fit: contain (no part of any photo is ever cut off),
   anchored to the bottom so the dark caption gradient (::after) and the
   white figcaption always sit over real photo, never the matte above.
   Any letterboxing lands at the TOP instead, under the golden glow
   (::before), where it reads as an intentional mount, not a gap.
   --py is the ScrollMagic parallax offset (script.js); it rides on the
   separate `translate` property so it neither fights nor inherits the
   hover zoom's slow `transform` transition. No oversize scale is needed
   here any more — contain can't reveal a "missing" edge the way cover
   could, so pan/zoom reuses the same plain scale/translate every other
   [data-mzoom] image on the site uses. */
.values__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  translate: 0 var(--py, 0px);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  scale: calc(var(--sz, 1) * var(--mz, 1));
  transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1), scale 0.4s ease-out, opacity 0.9s ease;
  /* one photo per value — only the current one shows (script.js) */
  opacity: 0;
}

.values__visual img.is-active {
  opacity: 1;
}

/* soft golden-hour light: a diffuse warm bloom from the top-right corner
   (screen-blended, no hard edges) that slowly drifts and breathes.
   Only transform/opacity animate */
.values__visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -35%;
  right: -35%;
  width: 110%;
  height: 90%;
  background:
    radial-gradient(closest-side, rgba(255, 214, 160, 0.15), rgba(255, 190, 130, 0.06) 45%, rgba(255, 170, 110, 0) 100%);
  mix-blend-mode: screen;
  transform-origin: 70% 30%;
  animation: values-glow 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes values-glow {
  /* peak strength breathes 10% -> 15% (0.15 x 0.67 ... 0.15 x 1) */
  0%,
  100% {
    opacity: 0.67;
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate3d(-6%, 5%, 0) scale(1.12);
  }
}

.values__visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 9, 0) 45%, rgba(20, 14, 9, 0.8) 100%);
  pointer-events: none;
}

.values__visual figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 2.4vw, 32px);
  right: clamp(22px, 2.4vw, 32px);
  bottom: clamp(22px, 2.4vw, 32px);
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  color: var(--bg);
  z-index: 3;
}

.values__visual figcaption em {
  color: #f15922;
}

/* ===== Values v3: editorial list (overrides the card styles above) =====
   hairline-divided rows — number | title + description | icon — beside a
   full-height photo. No card boxes */
.values .values__grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "v1 img" "v2 img" "v3 img" "v4 img" "v5 img";
  gap: 0 clamp(32px, 5vw, 72px);
  align-items: stretch;
}

.values .value-tile,
.values .value-tile--feature {
  grid-template-columns: clamp(64px, 6vw, 92px) minmax(0, 1fr) auto;
  grid-template-areas: "num title icon" "num desc icon";
  align-items: start;
  column-gap: clamp(14px, 2vw, 28px);
  overflow: visible;
  padding: clamp(18px, 2vw, 26px) 0;
  border: 0;
  border-top: 1px solid rgba(36, 26, 18, 0.12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.values .value-tile:last-of-type {
  border-bottom: 1px solid rgba(36, 26, 18, 0.12);
}

.values .value-tile:hover,
.values .value-tile.is-current {
  box-shadow: none;
}

/* orange rule draws across the top edge on hover */
.values .value-tile::before {
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(241, 89, 34, 0.15));
}

/* soft warm wash on hover, fading out to the right */
.values .value-tile::after {
  inset: 0 0 0 -18px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(241, 89, 34, 0.07), rgba(241, 89, 34, 0) 70%);
}

.values .value-tile__num {
  position: static;
  z-index: auto;
  grid-area: num;
  font-size: clamp(44px, 4vw, 60px);
  line-height: 0.9;
  background: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 89, 34, 0.5);
  transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}

.values .value-tile:hover .value-tile__num,
.values .value-tile.is-current .value-tile__num {
  color: var(--gold);
  -webkit-text-stroke-color: var(--gold);
  transform: none;
}

.values .value-tile__title,
.values .value-tile--feature .value-tile__title {
  grid-area: title;
  padding-right: 0;
  font-size: clamp(21px, 1.9vw, 27px);
}

.values .value-tile__desc,
.values .value-tile--feature .value-tile__desc {
  grid-area: desc;
  grid-column: auto;
  margin-top: 6px;
  max-width: 54ch;
  font-size: 14.5px;
}

/* text slides a touch right on hover; keep the wipe transition too */
.values .value-tile__title,
.values .value-tile__desc {
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.18, 1) var(--wd, 0s), translate 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.values .value-tile:hover .value-tile__title,
.values .value-tile.is-current .value-tile__title,
.values .value-tile:hover .value-tile__desc,
.values .value-tile.is-current .value-tile__desc {
  translate: 8px 0;
}

.values .value-tile__icon {
  grid-area: icon;
  align-self: center;
}

/* Desktop only: as in the design (Option 2 css/style.css) the photo fills the
   full height of the five value rows beside it (min-height: 100%) and covers
   its box; the 1.14 oversize leaves room for the scroll parallax. The
   location infographic (portrait, about the box's own shape) shows whole,
   without the oversize or the drift. Tablet / phone sizing is below. */
@media (min-width: 1025px) {
  .values .values__visual {
    align-self: stretch;
    min-height: 100%;
  }

  .values .values__visual img {
    object-fit: cover;
    object-position: center;
    transform: scale(1.14) translate(var(--mx, 0px), var(--my, 0px));
  }

  .values .values__visual img[data-i="2"] {
    translate: none;
    transform: translate(var(--mx, 0px), var(--my, 0px));
  }
}

@media (max-width: 1024px) {
  .values .values__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "v1" "v2" "v3" "v4" "v5";
  }

  .values .values__visual {
    /* a bounded box (photo's own shape), not an open-ended min-height - a
       floor with no ceiling can end up taller than its photo for reasons
       unrelated to the photo itself (grid/row sizing), leaving a stretch
       of empty matte below the image before the next value tile */
    aspect-ratio: 1358 / 1159;
    min-height: 0;
    margin-bottom: clamp(20px, 3vw, 32px);
  }
}

@media (max-width: 640px) {
  .values .value-tile,
  .values .value-tile--feature {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas: "num title" "num desc";
  }

  .values .value-tile__icon {
    display: none;
  }

  .values .value-tile__num {
    font-size: 38px;
  }
}

/* heading: italic orange "Values" + a gold rule that draws in after
   the wipe reveal */
.values__title {
  position: relative;
  display: block;
  width: fit-content;
  padding-bottom: 10px;
  /* 10% under the shared clamp(30px, 4.6vw, 58px) */
  font-size: clamp(27px, 4.14vw, 52px);
}

.values__title em {
  font-style: italic;
  color: var(--gold);
}

/* intro line under "The Solaris Promise": sits close to the title */
.values__intro {
  margin-top: 4px;
}

.values__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(241, 89, 34, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.18, 1) 0.9s;
}

.values__title.is-wiped::after {
  transform: scaleX(1);
}

@media (max-width: 1024px) {
  .values__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "v1 v1"
      "img img"
      "v2 v3"
      "v4 v5";
  }

  .values__visual {
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .values__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "v1"
      "img"
      "v2"
      "v3"
      "v4"
      "v5";
  }

  .values__visual {
    min-height: 340px;
  }
}

/* ===== In Their Words =====
   editorial split: quote rotator on the left, a framed resident film on
   the right. Quotes stack in one grid cell (height = tallest quote) and
   crossfade; rotation lives in script.js */
.words {
  isolation: isolate;
  padding-top: calc(clamp(48px, 6vw, 84px) + 40px);
  padding-bottom: calc(clamp(48px, 6vw, 84px) + 40px);
  overflow: hidden;
  background: #FAF7F1;
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

/* the reused grid is a touch fainter here, behind the copy */
.words__field {
  opacity: 0.8;
}

.words.is-offscreen .values__pulse {
  animation-play-state: paused;
}

/* oversized quotation mark */
.words__mark {
  position: absolute;
  z-index: 0;
  right: clamp(8px, 3vw, 40px);
  bottom: clamp(-190px, -14vw, -110px);
  font-family: var(--font-display);
  font-size: clamp(220px, 26vw, 380px);
  line-height: 1;
  color: rgba(241, 89, 34, 0.08);
  pointer-events: none;
  user-select: none;
}

.words__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
}

.words .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.words__title {
  color: var(--ink);
}

.words__lead {
  margin-top: 10px;
  max-width: 38ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--text-muted);
}

.words__quotes {
  display: grid;
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-left: 22px;
  border-left: 2px solid var(--accent-gold);
}

.words__quote {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.7s;
}

.words__quote.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s ease 0.15s, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0.15s, visibility 0s;
}

.words__quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}

/* curly quote marks around each testimonial */
.words__quote blockquote::before {
  content: "\201C";
}

.words__quote blockquote::after {
  content: "\201D";
}

.words__quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.words__name {
  font-weight: 600;
  color: var(--ink);
}

.words__project {
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 600;
}

.words__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(20px, 2.4vw, 30px);
}

.words__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(241, 89, 34, 0.35);
  background: transparent;
  color: var(--accent-gold);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.words__arrow:hover,
.words__arrow:focus-visible {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #FFFFFF;
}

.words__arrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.words__dots {
  display: flex;
  gap: 8px;
}

/* the active dot stretches into a bar that fills over the slide's time */
.words__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(241, 89, 34, 0.22);
  cursor: pointer;
  overflow: hidden;
  transition: width 0.4s ease;
}

.words__dot.is-active {
  width: 36px;
}

.words__dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-gold);
  transform-origin: left;
  animation: words-fill var(--words-interval, 7s) linear forwards;
}

.words.is-paused .words__dot.is-active::after {
  animation-play-state: paused;
}

@keyframes words-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* the film (the offset orange outline behind it was removed on request) */
.words__media {
  position: relative;
}

.words__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 28px 60px -28px rgba(90, 45, 20, 0.45);
}

.words__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.words__play {
  position: absolute;
  inset: 0;
  /* play button + "Watch their story" side by side in the bottom-left
     corner, off the speaker's face */
  display: grid;
  grid-template-columns: auto auto;
  align-content: end;
  justify-content: start;
  align-items: center;
  padding: 0 0 22px 22px;
  gap: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(20, 14, 9, 0) 40%, rgba(20, 14, 9, 0.55) 100%);
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.words__play-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 12px 30px -8px rgba(241, 89, 34, 0.7);
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* soft pulsing ring — one transform/opacity animation */
.words__play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: words-ring 2.4s ease-out infinite;
}

.words__play-btn svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: #FFFFFF;
}

.words__play:hover .words__play-btn {
  transform: scale(1.08);
}

.words__play-label {
  position: static;
  text-align: left;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* two lines: "Watch their story" / "1 min" */
.words__play-label em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.75;
}

@keyframes words-ring {
  from {
    transform: scale(1);
    opacity: 0.9;
  }

  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

.words.is-playing .words__play {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .words__inner {
    grid-template-columns: 1fr;
  }

  .words__media {
    width: 100%;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .words__play-btn {
    width: 50px;
    height: 50px;
  }

  .words__play {
    padding: 0 0 16px 16px;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .words__quote,
  .words__quote.is-active {
    transition: none;
  }

  .words__play-btn::before {
    animation: none;
  }

  .words .values__pulse {
    display: none;
  }
}

/* ===== Cinematic scene (after "Your own home.") =====
   a 260vh section; its 100vh stage pins with position:sticky while
   script.js scrubs every layer to scroll progress. Final (unanimated)
   values are the CSS defaults, so it reads correctly without JS or with
   reduced motion */
.scene {
  position: relative;
  height: 153vh; /* was 180vh: ~50% faster */
  /* light page tone around the expanding circle (matches the section above) */
  background: #F8F1E7;
}

.scene__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* small-viewport fallback: on phones, 100vh is the browser-chrome-hidden
     height, taller than what's actually visible while the address bar is
     shown, which can push .scene__content's bottom-anchored copy/button
     out of view. 100svh matches the guaranteed-visible area instead (same
     pattern as .hb in hero-slider4.css) */
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* the photo "window": a small circle that expands past the corners.
   circle(75%) already covers the whole stage, so that is the final state */
.scene__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  clip-path: circle(75% at 50% 50%);
  will-change: clip-path;
}

.scene__img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

.scene__shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 14, 9, 0.78) 0%, rgba(20, 14, 9, 0.45) 45%, rgba(20, 14, 9, 0.05) 100%),
    linear-gradient(0deg, rgba(20, 14, 9, 0.55) 0%, rgba(20, 14, 9, 0) 45%);
  pointer-events: none;
}

/* opening words either side of the small circle. Hidden by default
   (the final state); script.js positions and fades them while scrolling */
.scene__intro {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.scene__intro-word {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  font-weight: 500;
  font-size: clamp(44px, 7vw, 112px);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  will-change: transform, opacity;
}

.scene__intro-word--r {
  font-style: italic;
  color: var(--accent-gold);
}

/* huge outlined word gliding horizontally behind the copy */
.scene__word {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 6vh;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(110px, 19vw, 300px);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 247, 241, 0.22);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* our four projects: a staggered 2x2 set on the right (second column
   sits lower). script.js slides each in from the right and gives the two
   columns different parallax speeds */
.scene__projects {
  position: absolute;
  z-index: 3;
  right: calc(clamp(20px, 5vw, 80px) + 100px);
  top: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  width: clamp(300px, 32vw, 480px);
  /* centred, then pushed 100px down for breathing room under the nav */
  translate: 0 calc(-54% + 100px);
}

.scene__proj {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  border: 5px solid rgba(250, 247, 241, 0.95);
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.6);
  will-change: transform, opacity;
}

.scene__proj:nth-child(even) {
  top: 44px;
}

.scene__proj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.scene__proj:hover img {
  scale: 1.08;
}

.scene__proj span b {
  font-weight: inherit;
}

/* smaller cards: just the place name, so it never truncates */
@media (max-width: 1100px) {
  .scene__proj span b {
    display: none;
  }
}

.scene__proj span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250, 247, 241, 0.94);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.scene__content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
  color: var(--bg);
  /* nudged 100px left on wide screens, easing to 0 as the side margin runs
     out, so the copy never hugs the viewport edge */
  left: calc(-1 * clamp(0px, (100vw - 1180px) / 2 + 20px, 100px));
}

.scene__eyebrow {
  display: block;
  overflow: hidden;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: #f15922;
}

.scene__title {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  font-weight: 500;
  font-size: clamp(34.2px, 4.86vw, 70.2px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--bg);
}

.scene__title em {
  font-style: italic;
  color: #f15922;
}

/* each line sits in its own clip so the inner span can slide up into it */
.scene__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.scene__line-in {
  display: inline-block;
  will-change: transform;
}

.scene__text {
  margin-top: 22px;
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(250, 247, 241, 0.82);
}

.scene__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 15px 28px;
  background: var(--bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}

.scene__btn:hover {
  background: var(--accent-gold);
  color: #FFFFFF;
}

.scene__btn span {
  transition: transform 0.3s ease;
}

.scene__btn:hover span {
  transform: translateX(4px);
}

/* thin scroll-progress line along the bottom of the pinned stage */
.scene__progress {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(250, 247, 241, 0.12);
}

.scene__progress span {
  position: absolute;
  inset: 0;
  background: var(--accent-gold);
  transform-origin: left;
  transform: scaleX(var(--p, 1));
}

@media (max-width: 760px) {
  .scene {
    height: 127vh; /* was 140vh */
  }

  .scene__stage {
    align-items: flex-end;
    padding-bottom: 12vh;
  }

  .scene__shade {
    background: linear-gradient(0deg, rgba(20, 14, 9, 0.88) 0%, rgba(20, 14, 9, 0.5) 55%, rgba(20, 14, 9, 0.15) 100%);
  }

  /* four small cards in a row across the top */
  .scene__projects {
    left: 5vw;
    right: 5vw;
    top: 12vh;
    width: auto;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    translate: none;
  }

  .scene__proj {
    border-width: 3px;
    border-radius: 10px;
  }

  .scene__proj:nth-child(even) {
    top: 18px;
  }

  .scene__proj span {
    left: 4px;
    right: 4px;
    bottom: 4px;
    padding: 3px 4px;
    font-size: 8px;
    letter-spacing: 0.02em;
  }

  /* between the photo card (top) and the copy (bottom) */
  .scene__word {
    bottom: auto;
    top: 30vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene {
    height: auto;
  }

  .scene__stage {
    position: relative;
    min-height: 100vh;
  }
}

/* ===== Credibility =====
   an architectural drawing: stone-paper background, crop marks, a title
   block of numbers, a dimension-line timeline whose orange fill is
   scrubbed to scroll (script.js), and a recognition schedule */
.cred {
  isolation: isolate;
  padding-top: clamp(52px, 6vw, 88px);
  padding-bottom: clamp(52px, 6vw, 88px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(ellipse 45% 40% at 100% 100%, rgba(241, 89, 34, 0.07), transparent 70%),
    linear-gradient(180deg, #F3EEE6 0%, #F7F3ED 100%);
  border-top: 1px solid rgba(36, 26, 18, 0.08);
}

/* crop marks in the four corners, like the edge of a drawing sheet */
.cred__crop {
  position: absolute;
  z-index: 0;
  width: 28px;
  height: 28px;
  border: 0 solid rgba(241, 89, 34, 0.45);
  pointer-events: none;
}

.cred__crop--tl { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
.cred__crop--tr { top: 22px; right: 22px; border-top-width: 1px; border-right-width: 1px; }
.cred__crop--bl { bottom: 22px; left: 22px; border-bottom-width: 1px; border-left-width: 1px; }
.cred__crop--br { bottom: 22px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }

.cred__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.cred__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px clamp(28px, 4vw, 64px);
}

.cred .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.cred__title {
  font-size: clamp(27px, 4.14vw, 52.2px); /* 10% under .section__title */
  color: var(--ink);
}

.cred__title em {
  font-style: italic;
  color: var(--accent-gold);
}

.cred__lead {
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.65;
  color: var(--text-muted);
}

/* title block: one ruled frame, cells split by hairlines */
.cred__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(26px, 3vw, 40px) 0 0;
  border: 1px solid rgba(36, 26, 18, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
}

.cred__stat {
  position: relative;
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 2vw, 28px);
}

.cred__stat + .cred__stat {
  border-left: 1px solid rgba(36, 26, 18, 0.14);
}

/* micro-interaction: an orange rule draws in under the cell on hover */
.cred__stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.cred__stat:hover::after {
  transform: scaleX(1);
}

.cred__stat dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cred__stat dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* dimension-line timeline */
.cred__timeline {
  --node: 13px;
  position: relative;
  margin-top: clamp(30px, 3.6vw, 48px);
}

/* the rail: a dimension line with measuring ticks, end stops at both ends */
.cred__rail {
  position: absolute;
  top: calc(var(--node) / 2);
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(36, 26, 18, 0.2);
}

.cred__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 9px;
  background: repeating-linear-gradient(90deg, rgba(36, 26, 18, 0.18) 0 1px, transparent 1px 24px);
}

.cred__rail::after {
  content: "";
  position: absolute;
  inset: -8px 0;
  border-left: 1px solid rgba(36, 26, 18, 0.35);
  border-right: 1px solid rgba(36, 26, 18, 0.35);
}

.cred__rail-fill {
  position: absolute;
  inset: 0;
  height: 2px;
  top: -0.5px;
  background: linear-gradient(90deg, rgba(241, 89, 34, 0.6), var(--accent-gold));
  box-shadow: 0 0 10px rgba(241, 89, 34, 0.45);
  transform-origin: left;
  transform: scaleX(var(--p, 1));
}

.cred__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cred__step {
  position: relative;
  padding-top: calc(var(--node) + 18px);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.cred__step:hover {
  transform: translateY(-4px);
}

/* diamond node on the rail; fills orange once the line reaches it */
.cred__node {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--node);
  height: var(--node);
  border: 1px solid rgba(36, 26, 18, 0.45);
  background: #F7F3ED;
  transform: rotate(45deg);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.cred__step.is-reached .cred__node {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 5px rgba(241, 89, 34, 0.14);
}

/* photo mounted like a plate on a drawing sheet: white mat, hairline
   frame, figure number. Muted until the orange line reaches the step */
.cred__plate {
  position: relative;
  margin: 0 0 16px;
  padding: 5px;
  background: #FFFFFF;
  border: 1px solid rgba(36, 26, 18, 0.12);
  border-radius: 6px;
  box-shadow: 0 14px 30px -20px rgba(60, 35, 15, 0.45);
}

.cred__plate img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
  filter: grayscale(1) contrast(0.92) brightness(1.05);
  opacity: 0.75;
  transition: filter 0.9s ease, opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.cred__step.is-reached .cred__plate img {
  filter: none;
  opacity: 1;
}

.cred__plate figcaption {
  position: absolute;
  left: 13px;
  bottom: 13px;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.cred__plate {
  overflow: hidden;
}

.cred__step:hover .cred__plate img {
  transform: scale(1.04);
}

.cred__tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.4s ease;
}

.cred__step.is-reached .cred__tag {
  color: var(--accent-gold);
}

.cred__step-title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  color: var(--ink);
}

.cred__step-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* recognition schedule: a ruled list, like a drawing's revision table */
.cred__awards {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px clamp(24px, 3vw, 48px);
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(36, 26, 18, 0.14);
}

.cred__awards-label {
  padding-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold);
  white-space: nowrap;
}

.cred__award-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px clamp(18px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cred__award-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(241, 89, 34, 0.4);
  font-size: 13px;
  line-height: 1.45;
}

.cred__award-list li > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cred__award-img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(36, 26, 18, 0.1);
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.cred__award-list li:hover .cred__award-img {
  transform: scale(1.08) rotate(-2deg);
}

.cred__award-list strong {
  font-weight: 600;
  color: var(--ink);
}

.cred__award-list span {
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .cred__head {
    grid-template-columns: 1fr;
  }

  .cred__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cred__stat:nth-child(3) {
    border-left: 0;
  }

  .cred__stat:nth-child(n + 3) {
    border-top: 1px solid rgba(36, 26, 18, 0.14);
  }

  .cred__awards {
    grid-template-columns: 1fr;
  }

  /* four steps no longer fit one horizontal rail — switch to a vertical
     dimension line on the left */
  .cred__timeline {
    padding-left: 30px;
  }

  .cred__rail {
    top: 0;
    bottom: 0;
    left: calc(var(--node) / 2);
    right: auto;
    width: 1px;
    height: auto;
  }

  .cred__rail::before {
    left: -4px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 9px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(36, 26, 18, 0.18) 0 1px, transparent 1px 24px);
  }

  .cred__rail::after {
    inset: 0 -8px;
    border: 0;
    border-top: 1px solid rgba(36, 26, 18, 0.35);
    border-bottom: 1px solid rgba(36, 26, 18, 0.35);
  }

  .cred__rail-fill {
    width: 2px;
    height: auto;
    left: -0.5px;
    top: 0;
    background: linear-gradient(180deg, rgba(241, 89, 34, 0.6), var(--accent-gold));
    transform-origin: top;
    transform: scaleY(var(--p, 1));
  }

  .cred__steps {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  /* photo beside the text, so each step stays compact */
  .cred__step {
    display: grid;
    grid-template-columns: clamp(170px, 30%, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 22px;
    align-content: start;
    padding-top: 0;
  }

  .cred__plate {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    align-self: start;
  }

  .cred__tag,
  .cred__step-title,
  .cred__step-desc {
    grid-column: 2;
  }

  .cred__node {
    top: 4px;
    left: -30px;
  }
}

@media (max-width: 640px) {
  .cred__step {
    display: block;
  }

  .cred__plate {
    margin-bottom: 14px;
  }

  .cred__plate img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .cred__award-list {
    grid-template-columns: 1fr;
  }

  .cred__crop {
    width: 18px;
    height: 18px;
  }

  .cred__crop--tl, .cred__crop--tr { top: 12px; }
  .cred__crop--bl, .cred__crop--br { bottom: 12px; }
  .cred__crop--tl, .cred__crop--bl { left: 12px; }
  .cred__crop--tr, .cred__crop--br { right: 12px; }
}

/* ===== Credibility (v3) — pinned horizontal "handover story" =====
   base styles are a plain vertical stack (no JS / reduced motion).
   script.js adds .is-pinned, sets the section height, and scrubs the
   track sideways; per-chapter reveals are set per frame there too */
.hs {
  position: relative;
  background: #F4EEE5;
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

.hs__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* fine vertical architectural lines, drifting slower than the track */
.hs__lines {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(241, 89, 34, 0.08) 0 1px, transparent 1px 140px);
  background-position: var(--lx, 0px) 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}

/* orange glow travelling down the lines: the same 140px line pattern with
   a soft halo baked into the gradient (core sits 5px into each tile, hence
   the -5px offset), revealed by a band of mask that sweeps top to bottom */
.hs__lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg,
      rgba(241, 89, 34, 0.02) 0 3px,
      rgba(241, 89, 34, 0.06) 3px 5px,
      rgba(241, 89, 34, 0.2) 5px 6px,
      rgba(241, 89, 34, 0.06) 6px 8px,
      rgba(241, 89, 34, 0.02) 8px 11px,
      transparent 11px 140px);
  background-position: calc(var(--lx, 0px) - 5px) 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
  -webkit-mask-size: 100% 34%;
  mask-size: 100% 34%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: hs-glow 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hs-glow {
  from {
    -webkit-mask-position: 0 -60%;
    mask-position: 0 -60%;
  }

  to {
    -webkit-mask-position: 0 160%;
    mask-position: 0 160%;
  }
}

.hs__track {
  position: relative;
  z-index: 1;
}

.hs__panel {
  position: relative;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 72px);
}

/* intro */
.hs__intro .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 18px;
}

.hs__title {
  max-width: 12ch;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  font-weight: 500;
  /* a further 10% under clamp(39px, 6.4vw - 5px, 99px) */
  font-size: clamp(35px, calc(5.76vw - 4.5px), 89px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* words rise into place, staggered, once the intro is in view */
.hs__w {
  display: inline-block;
  transform: translateY(40%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 1s ease;
  transition-delay: calc(var(--i) * 0.08s);
}

.hs__intro.is-in .hs__w {
  transform: none;
  opacity: 1;
}

.hs__w--em {
  font-style: italic;
  color: var(--accent-gold);
}

.hs__lead {
  margin-top: 22px;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--text-muted);
}

.hs__stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
}

.hs__stats > div {
  padding: 0 clamp(18px, 2.2vw, 34px);
  border-left: 1px solid rgba(36, 26, 18, 0.14);
}

.hs__stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.hs__stats dd {
  margin: 0;
  /* sans-serif, not the Playfair display font: a serif digit's shape
     varies a lot between numbers (e.g. "1" is much narrower than "0"),
     which at this size reads as if some figures were a different scale
     even though every <dd> here shares the exact same font-size - the
     hero's own stats bar had the same issue, fixed the same way */
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.hs__stats dt {
  margin-top: 8px;
  max-width: 11ch;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.hs__cue {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.hs__cue span {
  animation: hs-nudge 1.6s ease-in-out infinite;
}

@keyframes hs-nudge {
  50% {
    transform: translateX(6px);
  }
}

/* chapters: big photo + text, alternating sides */
.hs-ch {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

/* every chapter reads image first, then text, and all chapter photos
   are the same size (.hs-ch--flip no longer changes anything) */
.hs-ch__media {
  position: relative;
  margin: 0;
  /* one landscape shape for every chapter photo, close to the photos' own
     (1.46-2:1), so each shows whole instead of a tall centre crop */
  aspect-ratio: 16 / 10;
  max-height: 70vh;
  border-radius: 18px;
  overflow: hidden;
  background: #E6DCCD;
  box-shadow: 0 30px 60px -36px rgba(60, 35, 15, 0.22);
  will-change: clip-path;
}

.hs-ch__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hs-ch__body {
  position: relative;
}

/* huge outlined chapter number drifting behind the text */
.hs-ch__num {
  position: absolute;
  z-index: -1;
  left: -0.08em;
  top: -0.62em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 15vw, 240px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 89, 34, 0.28);
  pointer-events: none;
  will-change: transform;
}

.hs-ch__tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.hs-ch__title {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.08;
  color: var(--ink);
}

.hs-ch__desc {
  margin-top: 16px;
  max-width: 38ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--text-muted);
}

.hs-ch__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: linear-gradient(var(--accent-gold), var(--accent-gold)) left bottom / 100% 1px no-repeat;
}

.hs-ch__link:hover {
  color: var(--accent-gold);
}

.hs-ch__link span {
  color: var(--accent-gold);
  transition: transform 0.3s ease;
}

.hs-ch__link:hover span {
  transform: translateX(4px);
}

/* outro */
.hs__outro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hs__outro-text {
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18;
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 72px);
  line-height: 1.05;
  color: var(--ink);
}

.hs__outro-text em {
  font-style: italic;
  color: var(--accent-gold);
}

.hs__outro-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 16px 30px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.3s ease;
}

.hs__outro-btn:hover {
  background: var(--accent-gold);
  color: #FFFFFF;
}

.hs__timeline {
  display: none;
}

/* ---------- pinned (horizontal) mode ---------- */
.hs.is-pinned .hs__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  /* phones also pin (pin(true), .is-phone): 100svh keeps the sticky
     stage within the guaranteed-visible area instead of the taller
     chrome-hidden 100vh, so the bottom timeline/cue never sit under the
     mobile browser's address bar (same pattern as .hb / .scene__stage) */
  height: 100svh;
}

.hs.is-pinned .hs__track {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.hs.is-pinned .hs__panel {
  flex: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 62.5vw (was 78vw): halves the empty space between the intro text and
   the first chapter photo */
.hs.is-pinned .hs__intro {
  width: 62.5vw;
  padding-left: max(clamp(20px, 5vw, 72px), calc((100vw - 1180px) / 2));
}

.hs.is-pinned .hs-ch {
  display: grid;
  width: 76vw;
}

.hs.is-pinned .hs__outro {
  width: 70vw;
}

.hs.is-pinned .hs__cue {
  display: inline-flex;
}

/* bottom timeline: one labelled segment per chapter — number + short name
   above a hairline that fills orange (--f, set in script.js) while its
   chapter comes to centre stage; the current chapter's label darkens */
.hs.is-pinned .hs__timeline {
  display: flex;
  gap: clamp(10px, 1.6vw, 24px);
  position: absolute;
  z-index: 2;
  left: max(clamp(20px, 5vw, 72px), calc((100vw - 1180px) / 2));
  /* stays clear of the floating WhatsApp button */
  right: max(92px, calc((100vw - 1180px) / 2));
  bottom: clamp(22px, 4vh, 40px);
}

.hs__seg {
  flex: 1;
  min-width: 0;
}

.hs__seg-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(36, 26, 18, 0.38);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.hs__seg-label b {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.04em;
  color: rgba(36, 26, 18, 0.3);
  transition: color 0.4s ease;
}

.hs__seg-label span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs__seg-bar {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(36, 26, 18, 0.12);
  overflow: hidden;
}

.hs__seg-bar i {
  position: absolute;
  inset: 0;
  background: var(--accent-gold);
  transform-origin: left;
  transform: scaleX(var(--f, 0));
}

.hs__seg.is-done .hs__seg-label,
.hs__seg.is-done .hs__seg-label b {
  color: rgba(36, 26, 18, 0.55);
}

.hs__seg.is-active .hs__seg-label {
  color: var(--ink);
}

.hs__seg.is-active .hs__seg-label b {
  color: var(--accent-gold);
}

/* laptops (e.g. 1366px): chapters 15% larger, then a further 10% (x1.265)
   — wider panel so the photo grows, title / text / tag scaled to match */
@media (min-width: 1200px) and (max-width: 1599px) {
  .hs.is-pinned .hs-ch {
    width: 92.5vw;
  }

  .hs-ch__title {
    font-size: calc(3.4vw * 1.265);
  }

  .hs-ch__desc {
    font-size: calc(1.15vw * 1.265);
  }

  .hs-ch__tag {
    font-size: 13.5px;
  }

  .hs-ch__link {
    font-size: 16.5px;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .hs__stats {
    grid-template-columns: repeat(2, auto);
    row-gap: 20px;
  }

  .hs__stats > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .hs-ch {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hs-ch__media {
    width: 100%;
  }

  .hs-ch__num {
    font-size: 110px;
    top: -0.5em;
  }

  .hs.is-pinned .hs__intro {
    width: 92vw;
  }

  .hs.is-pinned .hs-ch {
    display: grid;
    align-content: center;
    width: 88vw;
  }

  .hs.is-pinned .hs__outro {
    width: 88vw;
  }

  .hs__seg-label span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs__w {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .hs__cue span {
    animation: none;
  }

  .hs__lines::after {
    display: none;
  }
}

/* ===== Credibility (v2) =====
   header + icon stats, then an editorial grid of image cards: two on the
   top row (wide + narrow), three below. Each card's photo fills one side
   and fades into the warm card background behind the text */
.trust {
  isolation: isolate;
  padding-top: clamp(48px, 5.6vw, 80px);
  padding-bottom: clamp(48px, 5.6vw, 80px);
  background: #FFFFFF;
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

.trust__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.trust__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(28px, 4vw, 64px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.trust .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.trust__title {
  max-width: 16ch;
  font-size: 31.5px;
  color: var(--ink);
}

.trust__lead {
  margin-top: 14px;
  max-width: 56ch;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.65;
  color: var(--text-muted);
}

.trust__stats {
  display: flex;
  margin: 0;
}

.trust__stat {
  display: flex;
  flex-direction: column;
  padding: 4px clamp(16px, 1.8vw, 26px);
}

.trust__stat + .trust__stat {
  border-left: 1px solid rgba(36, 26, 18, 0.12);
}

.trust__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.trust__stat:hover .trust__icon {
  transform: translateY(-3px);
}

.trust__stat dd {
  order: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.trust__stat dt {
  order: 3;
  margin-top: 8px;
  max-width: 11ch;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}

.trust__stat .trust__icon {
  order: 1;
}

/* card grid */
.trust__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}

.trust-card {
  --card-bg: #FFFFFF;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: span 4;
  min-height: 250px;
  display: flex;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid rgba(241, 89, 34, 0.12);
  box-shadow: 0 2px 6px rgba(90, 50, 20, 0.05), 0 22px 44px -24px rgba(90, 50, 20, 0.35);
}

.trust-card--wide {
  grid-column: span 7;
  min-height: 300px;
}

.trust-card:nth-child(2) {
  grid-column: span 5;
  min-height: 300px;
}

.trust-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
  padding: clamp(20px, 2.2vw, 30px);
}

.trust-card--wide .trust-card__body {
  width: 52%;
}

.trust-card__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.trust-card__tag em {
  font-style: normal;
  margin-right: 10px;
  color: var(--accent-gold);
}

.trust-card__title {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.2;
  color: var(--ink);
}

.trust-card--wide .trust-card__title {
  font-size: clamp(22px, 2vw, 28px);
}

.trust-card__desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.trust-card__btn,
.trust-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.trust-card__btn {
  margin-top: 22px;
  padding: 10px 20px;
  border: 1px solid rgba(241, 89, 34, 0.5);
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease;
}

.trust-card__btn:hover {
  background: var(--accent-gold);
  color: #FFFFFF;
}

.trust-card__link {
  padding-bottom: 4px;
  background: linear-gradient(var(--accent-gold), var(--accent-gold)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.3s ease, color 0.3s ease;
}

.trust-card__link:hover {
  color: var(--accent-gold);
}

.trust-card__btn span,
.trust-card__link span {
  color: var(--accent-gold);
  transition: transform 0.3s ease;
}

.trust-card__btn:hover span {
  color: #FFFFFF;
}

.trust-card__btn:hover span,
.trust-card__link:hover span {
  transform: translateX(4px);
}

/* photo fills the right side and fades into the card behind the text */
.trust-card__media {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  margin: 0;
  /* keeps the hover zoom inside the frame, under the fade */
  overflow: hidden;
}

.trust-card--wide .trust-card__media {
  width: 58%;
}

.trust-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the photo fades itself out toward the text with a mask (not an
   overlay), so no hard edge can show through while the card slides or
   the image zooms */
.trust-card__media {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 25%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 25%, #000 55%);
}

/* bottom row, cards 4–5: photo on the left, text on the right */
.trust-card--media-left {
  justify-content: flex-end;
}

.trust-card--media-left .trust-card__media {
  right: auto;
  left: 0;
  width: 44%;
}

.trust-card--media-left .trust-card__media {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 40%);
}

@media (max-width: 1024px) {
  .trust__head {
    grid-template-columns: 1fr;
  }

  .trust__stat:first-child {
    padding-left: 0;
  }

  .trust__grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-card,
  .trust-card--wide,
  .trust-card:nth-child(2) {
    grid-column: span 1;
  }

  .trust-card--wide {
    grid-column: 1 / -1;
  }
}

/* phones: photo on top, text below, one column */
@media (max-width: 640px) {
  .trust__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }

  .trust__stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .trust__grid {
    grid-template-columns: 1fr;
  }

  .trust-card,
  .trust-card--wide,
  .trust-card:nth-child(2) {
    grid-column: 1 / -1;
    flex-direction: column;
    min-height: 0;
  }

  .trust-card__media,
  .trust-card--wide .trust-card__media,
  .trust-card--media-left .trust-card__media {
    position: relative;
    width: 100%;
    height: 170px;
    order: -1;
  }

  .trust-card__media,
  .trust-card--media-left .trust-card__media {
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 45%);
  }

  .trust-card__body,
  .trust-card--wide .trust-card__body {
    width: 100%;
    padding-top: 6px;
  }
}

/* ===== About Eden Solaris =====
   gallery (crossfading photo stage + thumbnail rail, sand block offset
   behind for depth) beside editorial text. Rotation is in script.js */
.about {
  isolation: isolate;
  padding-top: 130px;
  padding-bottom: 100px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F1 100%);
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  max-width: 1320px;
  margin: 0 auto;
}

.about__gallery {
  position: relative;
  padding: 0 0 0 22px;
}

/* dot-grid illustration peeking out from behind the photo's top-left
   corner, fading out toward its far corner */
.about__dots {
  position: absolute;
  z-index: 0;
  /* stays inside the section's 40px top padding (overflow is hidden) */
  top: -32px;
  left: 0;
  width: clamp(165px, 18vw, 240px);
  height: clamp(165px, 18vw, 240px);
  background-image: radial-gradient(circle, #858585 1.6px, transparent 2.2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, #000 35%, transparent 90%);
  mask-image: linear-gradient(135deg, #000 35%, transparent 90%);
  pointer-events: none;
}

.about__stage {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 30px 60px -30px rgba(80, 45, 20, 0.5);
}

.about__stage[data-mzoom] .about__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: calc(var(--sz, 1) * var(--mz, 1));
  translate: var(--mx, 0px) var(--my, 0px);
  transition: opacity 1s ease, scale 0.4s ease-out, translate 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.about__stage[data-mzoom] .about__slide.is-active {
  opacity: 1;
}

.about .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.about__title {
  color: var(--ink);
}

.about__title em {
  font-style: italic;
  color: var(--accent-gold);
}

.about__text {
  margin-top: 16px;
  max-width: 50ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--text-muted);
}

.about__places {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.about__places li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(241, 89, 34, 0.3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.about__places li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
}

@media (max-width: 900px) {
  .about__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about__gallery {
    max-width: 650px;
  }
}

@media (max-width: 480px) {
  .about__gallery {
    padding: 0 0 0 14px;
  }

  .about__dots {
    top: -27px;
    width: 156px;
    height: 156px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__stage[data-mzoom] .about__slide {
    transition: none;
  }
}

/* ===== Awards (v2) — spotlight showcase =====
   heading + selectable award list on the left, a lit stage on the right:
   one trophy at a time, inside a slowly turning inscribed
   ring, over a big outlined award number. script.js ("Awards showcase")
   switches .is-active on the slides/items and restarts the progress bar */
.honours {
  isolation: isolate;
  padding-top: 80px;
  padding-bottom: 80px;
  background: #fffdf9;
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

.honours__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "head stage"
    "list stage";
  /* heading row hugs its content so the heading stays at the top; the
     list row takes whatever height the (taller, pushed-down) stage adds */
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: clamp(28px, 3vw, 40px);
  max-width: 1180px;
  margin: 0 auto;
}

.honours__head {
  grid-area: head;
  align-self: start;
}

/* one line: "Awards & recognition." — sized so it fits the left column
   (~9.9x the font size wide) at every width */
.honours__title {
  white-space: nowrap;
  font-size: clamp(28px, 4vw, 52px);
}

.honours__title em {
  font-style: italic;
  color: var(--accent-gold);
}

.honours__lead {
  margin-top: 14px;
  max-width: 36ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---- the list ---- */
.honours__list {
  grid-area: list;
  align-self: start;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(36, 26, 18, 0.12);
}

.honours__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 20px 0 22px;
  border: 0;
  border-bottom: 1px solid rgba(36, 26, 18, 0.12);
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.honours__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: lining-nums;
  color: rgba(36, 26, 18, 0.3);
  transition: color 0.4s ease;
}

.honours__org {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.honours__name {
  display: block;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.25;
  color: rgba(36, 26, 18, 0.5);
  transition: color 0.4s ease;
}

.honours__item:focus-visible .honours__name {
  color: var(--ink);
}

/* real hover only — on touch, :hover sticks to the last tapped item and
   would look like a second active one */
@media (hover: hover) {
  .honours__item:hover .honours__name {
    color: var(--ink);
  }
}

.honours__item.is-active .honours__num {
  color: var(--accent-gold);
}

.honours__item.is-active .honours__name {
  color: var(--ink);
}

/* orange progress line along the active item's bottom edge, timed to the
   auto-advance (--honours-interval, set in script.js) */
.honours__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}

.honours__bar i {
  position: absolute;
  inset: 0;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
}

.honours__item.is-active .honours__bar i {
  animation: honours-fill var(--honours-interval, 5s) linear forwards;
}

.honours.is-paused .honours__item.is-active .honours__bar i {
  animation-play-state: paused;
}

@keyframes honours-fill {
  to {
    transform: scaleX(1);
  }
}

/* ---- the stage ---- */
.honours__stage {
  grid-area: stage;
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  width: 100%;
  justify-self: end;
  /* extra 80px above the circle only (the heading keeps the section's
     80px top padding); reset on small screens below */
  margin-top: 80px;
  /* no panel of its own — the trophy, ring and plinth sit straight on the
     section background (and the trophies blend onto it) */
}

.honours__bignum {
  position: absolute;
  z-index: 0;
  right: 6%;
  top: 6%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(110px, 13vw, 190px);
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 89, 34, 0.3);
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.honours__bignum.is-swap {
  opacity: 0;
  transform: translateY(14px);
}

/* inscribed ring, turning slowly around the trophy */
.honours__ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  /* 15% larger than the original 78% */
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  overflow: visible;
  animation: honours-turn 60s linear infinite;
  pointer-events: none;
}

.honours__ring circle {
  fill: none;
  stroke: rgba(241, 89, 34, 0.22);
  stroke-width: 1;
}

.honours__ring circle + circle {
  stroke-dasharray: 2 6;
}

.honours__ring text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  fill: rgba(36, 26, 18, 0.42);
}

@keyframes honours-turn {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* one trophy at a time: rises and settles in, the outgoing one sinks out */
.honours__slide {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  margin: 0;
  /* a fixed box inside the ring; each award (tall trophy or wide framed
     certificate, all transparent PNGs) is fitted into it whole */
  width: 58%;
  height: 56%;
  transform: translate(-50%, -50%) translateY(28px) scale(0.94);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
  pointer-events: none;
}

.honours__slide.is-active {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.honours__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(60, 35, 15, 0.22));
}

.honours__cap {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 78%;
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 16px -8px rgba(80, 45, 20, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  white-space: nowrap;
}

.honours__cap.is-active {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.25s;
}

@media (max-width: 900px) {
  .honours__stage {
    margin-top: 0;
  }

  .honours__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "stage"
      "list";
  }

  .honours__stage {
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .honours__slide {
    width: 52%;
  }

  .honours__cap {
    top: 79%;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .honours__ring {
    animation: none;
  }

  .honours__slide,
  .honours__cap,
  .honours__bignum,
  .honours__name {
    transition: none;
  }
}

/* ===== Awards & recognition =====
   an exhibition wall: heading on the left, three framed awards each on a
   lit plinth, over a large outlined "2025" watermark */
.awards {
  isolation: isolate;
  padding-top: clamp(52px, 6vw, 88px);
  padding-bottom: clamp(52px, 6vw, 88px);
  background:
    radial-gradient(ellipse 60% 70% at 70% 40%, rgba(241, 89, 34, 0.06), transparent 70%),
    #FFFFFF;
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

.awards__year {
  position: absolute;
  z-index: 0;
  right: clamp(-20px, 1vw, 20px);
  bottom: clamp(-40px, -2vw, -10px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(140px, 22vw, 320px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 89, 34, 0.16);
  pointer-events: none;
  user-select: none;
}

.awards__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
}

.awards .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.awards__title {
  color: var(--ink);
}

.awards__title em {
  font-style: italic;
  color: var(--accent-gold);
}

.awards__lead {
  margin-top: 14px;
  max-width: 30ch;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.65;
  color: var(--text-muted);
}

.awards__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.award {
  display: flex;
  flex-direction: column;
}

/* the frame: champagne mat with an inner hairline, spotlight from above */
.award__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 16%;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #FBF4EA 0%, #F1E3D0 100%);
  box-shadow:
    inset 0 0 0 10px #FFFFFF,
    inset 0 0 0 11px rgba(241, 89, 34, 0.18),
    0 22px 44px -26px rgba(90, 50, 20, 0.45);
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.6s ease;
}

/* soft plinth shadow under the trophy */
.award__frame::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 13%;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(60, 35, 15, 0.28), transparent 70%);
  pointer-events: none;
}

.award__img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  /* the award photos have white backgrounds — multiply drops the white
     into the champagne mat so only the trophy shows */
  mix-blend-mode: multiply;
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.award__num {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-gold);
}

.award:hover .award__frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 10px #FFFFFF,
    inset 0 0 0 11px rgba(241, 89, 34, 0.45),
    0 30px 54px -26px rgba(90, 50, 20, 0.5);
}

.award:hover .award__img {
  transform: scale(1.08);
}

.award__body {
  display: flex;
  flex-direction: column;
  padding: 16px 4px 0;
}

.award__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.award__title {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  color: var(--ink);
}

.award__tag {
  align-self: flex-start;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(241, 89, 34, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
}

@media (max-width: 960px) {
  .awards__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .awards__list {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* compact rows on phones: frame beside the text */
  .award {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }

  .award__frame {
    padding: 18%;
    border-radius: 12px;
    box-shadow:
      inset 0 0 0 6px #FFFFFF,
      inset 0 0 0 7px rgba(241, 89, 34, 0.18),
      0 16px 30px -20px rgba(90, 50, 20, 0.45);
  }

  .award__num {
    top: 10px;
    left: 12px;
    font-size: 10px;
  }

  .award__body {
    padding: 0;
  }
}

/* ===== Press (Solaris in the news) =====
   a newspaper-style index: ruled rows of date | thumbnail | headline +
   outlet | type | arrow. On hover the row warms, an orange rule draws
   along its base and the arrow fills */
.press {
  isolation: isolate;
  padding-top: clamp(52px, 6vw, 88px);
  padding-bottom: clamp(52px, 6vw, 88px);
  background: linear-gradient(180deg, #FBF7F1 0%, #F7F0E6 100%);
  border-top: 1px solid rgba(241, 89, 34, 0.1);
}

.press__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.press__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 48px;
  padding-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 2px solid var(--ink);
}

.press .section__eyebrow {
  color: var(--accent-gold);
  margin-bottom: 12px;
}

.press__title {
  color: var(--ink);
}

.press__title em {
  font-style: italic;
  color: var(--accent-gold);
}

/* outlet names set like a masthead strip */
.press__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 168px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(16px, 1.8vw, 22px) clamp(8px, 1vw, 14px);
  border-bottom: 1px solid rgba(36, 26, 18, 0.14);
  color: var(--ink);
  transition: background 0.4s ease;
}

.press-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.press-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}

.press-item:hover::after {
  transform: scaleX(1);
}

.press-item__date {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.press-item__date b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 2.8vw, 40px);
  color: var(--ink);
}

.press-item__date span {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.press-item__thumb {
  position: relative;
  display: block;
  aspect-ratio: 296 / 211;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 10px 22px -14px rgba(60, 35, 15, 0.5);
}

.press-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.press-item:hover .press-item__thumb img {
  transform: scale(1.08);
}

/* small play badge on video coverage */
.press-item__thumb.is-video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat,
    rgba(241, 89, 34, 0.92);
  box-shadow: 0 6px 16px -4px rgba(241, 89, 34, 0.6);
}

.press-item__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.press-item__title {
  font-family: var(--font-serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.25;
}

/* just a large thin diagonal arrow: soft grey at rest, dark ink and
   nudged up-right on row hover */
.press-item__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.press-item__more svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgba(36, 26, 18, 0.28);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1), stroke 0.3s ease;
}

.press-item:hover .press-item__more svg {
  stroke: var(--ink);
  transform: translate(4px, -4px);
}

@media (max-width: 900px) {
  .press-item {
    grid-template-columns: 64px 140px minmax(0, 1fr) auto;
  }

}

/* phones: thumbnail on top, date + text below */
@media (max-width: 600px) {
  .press-item {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "thumb thumb"
      "date body"
      "date more";
    row-gap: 14px;
    padding: 18px 0;
  }

  .press-item__thumb {
    grid-area: thumb;
    /* same shape as the clippings (296x211) - 16/9 cropped the headline off */
    aspect-ratio: 296 / 211;
  }

  .press-item__date {
    grid-area: date;
    align-self: start;
  }

  .press-item__body {
    grid-area: body;
  }

  .press-item__more {
    grid-area: more;
    justify-self: start;
  }
}

/* ===== Mouse-driven image zoom (all sections after the banner) =====
   script.js sets --mz (scale) and --mx/--my (pan toward the cursor) on
   each [data-mzoom] element while the mouse moves over it, and resets
   them on leave. They ride on the individual `scale`/`translate`
   properties, so they stack with — instead of replacing — any scroll
   parallax that uses `transform` */
[data-mzoom] .addr-card__media img,
[data-mzoom] .trust-card__media img,
[data-mzoom] .words__video {
  /* --sz = scroll zoom (1 at viewport centre, larger at the edges),
     --mz = mouse zoom; the short scale transition just smooths the
     scroll scrub, the longer translate one eases the mouse pan */
  scale: calc(var(--sz, 1) * var(--mz, 1));
  translate: var(--mx, 0px) var(--my, 0px);
  transition: scale 0.4s ease-out, translate 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* once the film plays its native controls show - no zoom/pan then, or the
   frame's rounded clip cuts off the play/pause button and the bar */
.is-playing [data-mzoom] .words__video,
[data-mzoom] .words__video[controls] {
  scale: none;
  translate: none;
}

/* ===== Your own home ===== */
.home__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1180px;
  margin: 0 auto;
}

.home__visual {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home__tint {
  background: linear-gradient(165deg, #f15922 0%, #f15922 46%, #3B2A1E 100%);
}

.home__mark {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(30px, 4vw, 46px);
  color: rgba(250, 247, 241, 0.92);
}

.home__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ===== Where we are ===== */
.where {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.where__bgwrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.where__bg {
  background: url("../images/hero-bg.jpeg") center / cover no-repeat;
}

.where__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(36, 26, 18, 0.78), rgba(36, 26, 18, 0.55) 40%, rgba(36, 26, 18, 0.85));
}

.where__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.where__inner .section__desc {
  margin-left: auto;
  margin-right: auto;
}

.where .home__actions {
  justify-content: center;
}

/* ===== Footer (v2) =====
   a deep warm-charcoal footer over the site's orange line grid: logo +
   three link columns, then the legal line. Anchors #contact and #enquire
   (nav links) land here */
.foot {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, rgba(241, 89, 34, 0.14), transparent 70%),
    #1F1610;
  color: rgba(250, 247, 241, 0.62);
}

/* body */
.foot__body {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 88px) clamp(20px, 5vw, 72px) 0;
}

.foot__field {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}

.foot__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
}

.foot__logo {
  display: block;
  /* max-height + max-width (both width/height auto) instead of a flat
     height:60px: the footer grid narrows to 2-3 columns on phones/tablets
     (≤1060px) and a fixed 60px-tall logo renders ~172px wide at this
     mark's aspect ratio — wider than those columns (as little as ~131px
     at 320px) — so it was overlapping the next column. This scales the
     logo down to fit whichever constraint is tighter, full size wherever
     there's room */
  height: auto;
  max-height: 90px; /* 50% bigger than the original 60px */
  width: auto;
  max-width: 100%;
  /* the logo file has blank space on its left; pull it flush */
  margin-left: -13px;
}

.foot__brand p {
  margin-top: 18px;
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.65;
}

.foot__col h3 {
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.foot__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}

.foot__col a {
  color: rgba(250, 247, 241, 0.88);
  background: linear-gradient(var(--accent-gold), var(--accent-gold)) left bottom / 0 1px no-repeat;
  transition: color 0.3s ease, background-size 0.3s ease;
}

.foot__col a:hover {
  color: #f15922;
  background-size: 100% 1px;
}

.foot__contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.foot__contact svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foot__contact span {
  max-width: 26ch;
  color: rgba(250, 247, 241, 0.62);
}

.foot__partners {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(250, 247, 241, 0.1);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(250, 247, 241, 0.5);
}

/* legal line */
.foot__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 40px;
  margin-top: clamp(44px, 5vw, 72px);
  padding: 20px 0 28px;
  border-top: 1px solid rgba(250, 247, 241, 0.12);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.45);
}

.foot__legal {
  max-width: 64ch;
  text-align: right;
}

.foot__legal a {
  color: rgba(250, 247, 241, 0.75);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.foot__legal a:hover {
  color: #f15922;
}

/* floating back-to-top, bottom-left: icon only, fades in once scrolled */
.to-top {
  position: fixed;
  z-index: 50;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: #FFFFFF;
  box-shadow: 0 10px 24px -8px rgba(241, 89, 34, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s, background 0.3s ease;
}

.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s, background 0.3s ease;
}

.to-top:hover {
  background: var(--accent-gold-dark);
  color: #FFFFFF;
  transform: translateY(-3px);
}

.to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* floating WhatsApp button */
.whatsapp {
  position: fixed;
  z-index: 50;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}

.whatsapp:hover {
  color: #FFFFFF;
  transform: scale(1.08);
}

.whatsapp svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@media (max-width: 900px) {
  .foot__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .foot__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .foot__bottom {
    flex-direction: column;
    /* clear of the floating WhatsApp button */
    padding-bottom: 88px;
  }

  .foot__legal {
    text-align: left;
  }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nav__menu a:not(.nav__cta) {
    display: none;
  }

  .nav__cta {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  .hero__lede-text {
    max-width: 90vw;
  }

  /* phones: a soft dark wash at the bottom of the photo so the white copy
     reads over bright sky, and a headline that scales with the screen
     (the fixed 45px wrapped to five lines and rose under the nav) */
  .hero__bgreveal-scrim {
    /* background: linear-gradient(0deg, rgba(20, 14, 9, 0.33) 0%, rgba(20, 14, 9, 0.32) 0%, rgba(20, 14, 9, 0) 1%); */
  }

  .hero__title {
    font-size: clamp(28px, 8.6vw, 40px);
    line-height: 1.12;
  }

  .hero__lede {
    padding-bottom: clamp(96px, 15vh, 150px);
  }

}

/* bigger touch targets without changing the look. Chapter links: an
   invisible hit area around them. Quote dots clip their overflow (for the
   progress fill), so they get a transparent border instead, painted
   inside only (padding-box) and cancelled out with a negative margin */
.hs-ch__link {
  position: relative;
}

.hs-ch__link::before {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

.words__dot {
  box-sizing: content-box;
  border: 12px solid transparent;
  /* -12px on every side cancels the border, so dots keep their 8px gap */
  margin: -12px;
  background-clip: padding-box;
}

@media (max-width: 700px) {
  .addr__grid {
    grid-template-columns: 1fr;
  }

  .home__grid {
    grid-template-columns: 1fr;
  }

  .home__visual {
    aspect-ratio: 16 / 11;
  }



}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }

  .values__sun {
    animation: none;
  }

  [data-wipe] {
    clip-path: none;
    transition: none;
  }

  .values__visual::before {
    animation: none;
  }

  .values__pulse {
    display: none;
  }

  .hero__scroll {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .parallax__layer,
  [data-parallax-text] {
    transform: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ===== Request Site Visit: slide-in form (opened by [data-open-sv]) ===== */
.sv-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16, 18, 21, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
}
.sv-overlay.is-open { opacity: 1; pointer-events: auto; }

.sv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(440px, 92vw); overflow-y: auto;
  padding: clamp(28px, 4vw, 40px);
  background: #FFF9F7;
  box-shadow: -20px 0 60px rgba(16, 18, 21, 0.25);
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font-sans);
}
.sv-drawer.is-open { transform: translateX(0); }

.sv-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(26, 20, 16, 0.06); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background 200ms ease;
}
.sv-close:hover { background: rgba(26, 20, 16, 0.12); }

.sv-title {
  margin: 0; padding-right: 28px;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.2;
  color: var(--accent-gold);
  text-wrap: balance;
}
.sv-required { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--accent-gold); }

.sv-field { margin-top: 18px; }
.sv-sub { margin: 8px 0 0; padding-right: 44px; font-size: 13px; line-height: 1.55; color: rgb(90, 72, 60); }
.sv-field select,
.sv-field textarea,
.sv-field input {
  width: 100%; padding: 8px 2px;
  border: none; border-bottom: 1px solid rgba(26, 20, 16, 0.16); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 14px;
}
.sv-field input:focus,
.sv-field select:focus,
.sv-field textarea:focus { outline: none; border-bottom-color: var(--accent-gold); }
.sv-field input::placeholder,
.sv-field textarea::placeholder { color: rgb(140, 122, 110); }
.sv-field textarea { resize: vertical; min-height: 56px; }
.sv-field select { cursor: pointer; }
.sv-field select:invalid { color: rgb(140, 122, 110); }
.sv-field select option { color: var(--ink); }
.sv-field input[type="date"] { color: rgb(140, 122, 110); }

.sv-captcha-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.sv-captcha-code {
  font-family: Georgia, serif; font-style: italic; font-size: 22px;
  letter-spacing: 4px; color: var(--ink); user-select: none;
}
.sv-captcha-refresh {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent-gold);
}

.sv-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  font-size: 12px; line-height: 1.5; color: rgb(90, 72, 60);
}
.sv-consent input { margin-top: 3px; flex: 0 0 auto; }

.sv-submit {
  margin-top: 22px; min-height: 46px; padding: 0 28px;
  border: none; border-radius: 99px; cursor: pointer;
  background: var(--accent-gold); color: #FFFFFF;
  font-family: inherit; font-weight: 600; font-size: 14px;
  transition: background 200ms ease, transform 200ms ease;
}
.sv-submit:hover { background: var(--accent-gold-dark); color: #FFFFFF; transform: translateY(-1px); }

.sv-disclaimer { margin: 14px 0 0; font-size: 11px; font-style: italic; line-height: 1.5; color: rgb(140, 122, 110); }
.sv-success {
  display: none; margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(120, 170, 110, 0.15); color: rgb(60, 110, 50);
  font-size: 13px; font-weight: 600;
}
.sv-form.is-submitted .sv-success { display: block; }

@media (max-width: 480px) {
  .sv-drawer { width: 100vw; }
}

/* ===== Buttons: one orange, white sweep on hover =====
   every button is solid #f15922 with white text/icon. On hover a white
   fill sweeps in left to right (background-size on a white gradient
   layer) and the text/icon turns orange; a 1px orange border keeps the
   button's shape visible once it's white. Placed last so it overrides
   each button's own earlier colour / hover rules */
:is(.btn--primary, .nav__cta, .sv-submit, .hs__outro-btn, .scene__btn, .addr-card__arrow, .to-top, .words__play-btn) {
  background: linear-gradient(#FFFFFF, #FFFFFF) left center / 0% 100% no-repeat, var(--accent-gold);
  border: 1px solid var(--accent-gold);
  color: #FFFFFF;
  transition: background-size 0.45s cubic-bezier(0.16, 0.84, 0.44, 1), color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.nav__cta {
  color: #FFFFFF !important;
}

.to-top.is-shown {
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s, background-size 0.45s cubic-bezier(0.16, 0.84, 0.44, 1), color 0.3s ease;
}

:is(.btn--primary, .nav__cta, .sv-submit, .hs__outro-btn, .scene__btn, .addr-card__arrow, .to-top):hover,
.words__play:hover .words__play-btn {
  background: linear-gradient(#FFFFFF, #FFFFFF) left center / 100% 100% no-repeat, var(--accent-gold);
  color: var(--accent-gold);
}

.nav__cta:hover {
  color: var(--accent-gold) !important;
}

.words__play-btn svg {
  fill: currentColor;
}

/* ===== One heading style everywhere =====
   every section heading matches "Distinct addresses. One standard of
   exceptional living." (the #projects title): Playfair Display 400, same
   size / line-height / tracking, near-black, with the <em> phrase in
   orange italic. Sub-headings (the small eyebrow labels) share one style
   too. Placed last so it overrides each section's own heading rules.
   The only colour exception: the scene title sits on a dark photo, so it
   stays light */
:is(.section__title, .values__title, .words__title, .hs__title, .honours__title, .press__title, .about__title, .scene__title, .hs__outro-text) {
  font-family: 'Playfair Display', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(22px, 3.73vw, 47px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #1A1410;
}

:is(.section__title, .values__title, .words__title, .hs__title, .honours__title, .press__title, .about__title, .scene__title, .hs__outro-text) :is(em, .hs__w--em) {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent-gold);
}

.scene__title {
  color: #FAF7F1;
}

/* the Credibility heading was capped at 12ch for its old, much larger
   size; at the shared size it can run wider (fewer, longer lines) */
.hs__title {
  max-width: 18ch;
}

/* beats the Values section's own `.values .section__title` colour */
.values .section__title {
  color: #1A1410;
}

/* sub-headings: the small label above each heading */
:is(.section__eyebrow, .scene__eyebrow) {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* the two big statement headings ("We believe a home is where life
   begins." and "Trust was earned, one handover at a time.") run 10px
   larger than the shared heading size */
.scene__title,
.hs__title {
  font-size: clamp(32px, calc(3.73vw + 10px), 57px);
}

/* ===== Scene: awards & achievements showcase =====
   five dark-glass "vitrines" on the right of the photo: a tall featured
   trophy plus four smaller ones, each on a soft orange glow, with a light
   sheen that sweeps across on hover. They reuse .scene__proj so the scene
   script slides them in and drifts the two columns */
.scene__awards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a b"
    "a c"
    "d e";
  grid-auto-rows: clamp(118px, 10.4vw, 150px);
  width: clamp(320px, 33vw, 500px);
}

.scene__awards .scene__proj:nth-child(1) { grid-area: a; }
.scene__awards .scene__proj:nth-child(2) { grid-area: b; }
.scene__awards .scene__proj:nth-child(3) { grid-area: c; }
.scene__awards .scene__proj:nth-child(4) { grid-area: d; }
.scene__awards .scene__proj:nth-child(5) { grid-area: e; }

.scene__award {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  aspect-ratio: auto;
  top: 0 !important;
  padding: 14px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(241, 89, 34, 0.28), rgba(241, 89, 34, 0) 70%),
    linear-gradient(160deg, rgba(40, 28, 20, 0.62), rgba(16, 11, 8, 0.72));
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  text-align: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.scene__award:hover {
  color: #FFFFFF;
  border-color: rgba(241, 89, 34, 0.7);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(241, 89, 34, 0.25), 0 0 40px -6px rgba(241, 89, 34, 0.45);
}

/* sheen sweeping across the glass on hover */
.scene__award::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.scene__award:hover::after {
  left: 130%;
}

.scene__award .scene__award-media {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  white-space: normal;
  font-size: inherit;
  letter-spacing: normal;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene__award-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.55));
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.scene__award:hover .scene__award-media img,
.scene__award:hover .scene__award-icon {
  transform: translateY(-4px) scale(1.05);
}

.scene__award--plaque .scene__award-media img {
  max-height: 88%;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.scene__award-icon {
  width: auto;
  height: 88%;
  max-height: 84px;
  overflow: visible;
  color: var(--accent-gold);
  filter: drop-shadow(0 0 14px rgba(241, 89, 34, 0.45));
  transition: transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.scene__award .scene__award-txt {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  border-radius: 0;
  font-size: inherit;
  letter-spacing: normal;
  display: block;
  padding: 0;
  background: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: inherit;
}

.scene__award-txt b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}

.scene__award-txt em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.scene__award--feature .scene__award-txt b {
  font-size: 14px;
}

.scene__award--feature {
  padding-top: 22px;
}

/* phones / small tablets: the five in one row at the top, trophy only */
@media (max-width: 760px) {
  .scene__awards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-areas: "a b c d e";
    grid-auto-rows: 92px;
    width: auto;
    gap: 6px;
  }

  .scene__award {
    padding: 8px 4px;
    border-radius: 12px;
  }

  .scene__award .scene__award-txt {
    display: none;
  }
}

/* every award icon is exactly the same size (the featured card too) */
.scene__award .scene__award-icon,
.scene__award--feature .scene__award-icon {
  width: 64px;
  height: 64px;
  max-height: none;
  flex: none;
}

@media (max-width: 760px) {
  .scene__award .scene__award-icon,
  .scene__award--feature .scene__award-icon {
    width: 40px;
    height: 40px;
  }
}

/* award cards: no background panel (transparent, no glass / glow / shadow),
   just a hairline outline, with white icons */
.scene__award {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.28);
}

.scene__award:hover {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.scene__award-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

/* no panel behind them, so the labels carry their own soft shadow to stay
   readable over the photo */
.scene__award .scene__award-txt b,
.scene__award .scene__award-txt em {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
}

/* award showcase, refined: no borders; an even 2-column grid (featured
   card no longer spans two rows) with generous, equal gaps; each award is
   icon + name + label stacked and centred, separated by a thin orange
   rule; text 15% larger */
.scene__awards {
  grid-template-areas:
    "a a"
    "b c"
    "d e";
  grid-auto-rows: auto;
  column-gap: clamp(20px, 2.4vw, 36px);
  row-gap: clamp(26px, 3vw, 44px);
  width: clamp(340px, 34vw, 520px);
}

.scene__award,
.scene__award:hover {
  border: 0;
  padding: 0;
  gap: 12px;
  justify-content: flex-start;
  border-radius: 0;
  overflow: visible;
}

.scene__award::after {
  display: none;
}

.scene__award .scene__award-media {
  flex: none;
}

/* thin orange rule between icon and text */
.scene__award .scene__award-txt::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 0 auto 12px;
  background: var(--accent-gold);
}

.scene__award .scene__award-txt b,
.scene__award--feature .scene__award-txt b {
  font-size: 13.8px;
}

.scene__award .scene__award-txt em {
  margin-top: 6px;
  font-size: 10.9px;
}

.scene__award--feature {
  padding-top: 0;
}

@media (max-width: 760px) {
  .scene__awards {
    grid-template-areas: "a b c d e";
    column-gap: 6px;
    row-gap: 0;
  }
}

/* a soft, borderless dark haze behind the awards (not a box) so the
   white icons and labels read cleanly over the busy photo */
.scene__awards::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -22%;
  background: radial-gradient(closest-side, rgba(12, 8, 5, 0.62), rgba(12, 8, 5, 0.34) 55%, rgba(12, 8, 5, 0) 100%);
  pointer-events: none;
}

.scene__awards {
  isolation: isolate;
}

/* ===== Award showcase v3: 3 + 2 medallions =====
   a 6-track grid: the first three awards take two tracks each, the last
   two are centred beneath them. Each icon sits in a deep medallion (dark
   radial fill, a fine orange-to-gold gradient ring, inner glow), with a
   Playfair name and small spaced label below */
.scene__awards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: none;
  grid-auto-rows: auto;
  column-gap: clamp(14px, 1.6vw, 26px);
  row-gap: clamp(28px, 3.2vw, 46px);
  width: clamp(460px, 42vw, 640px);
  right: clamp(20px, 5vw, 80px);
}

.scene__awards .scene__proj:nth-child(1) { grid-area: auto; grid-column: 1 / span 2; }
.scene__awards .scene__proj:nth-child(2) { grid-area: auto; grid-column: 3 / span 2; }
.scene__awards .scene__proj:nth-child(3) { grid-area: auto; grid-column: 5 / span 2; }
.scene__awards .scene__proj:nth-child(4) { grid-area: auto; grid-column: 2 / span 2; }
.scene__awards .scene__proj:nth-child(5) { grid-area: auto; grid-column: 4 / span 2; }

.scene__award,
.scene__award:hover {
  gap: 16px;
}

.scene__award .scene__award-media {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, rgba(241, 89, 34, 0.32), rgba(241, 89, 34, 0) 62%),
    radial-gradient(circle at 50% 50%, #2A1D14 0%, #120C08 78%);
  box-shadow:
    0 22px 40px -16px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 22px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.5s ease;
}

/* fine gradient ring: orange into warm gold, masked to a 1.5px band */
.scene__award .scene__award-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  background: conic-gradient(from 210deg, #f15922, #F6C58A 25%, #f15922 50%, #7A2A10 75%, #f15922);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* a second, faint outer halo ring */
.scene__award .scene__award-media::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(241, 89, 34, 0.22);
  pointer-events: none;
  transition: inset 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), border-color 0.5s ease;
}

.scene__award:hover .scene__award-media {
  transform: translateY(-4px);
  box-shadow:
    0 26px 44px -14px rgba(0, 0, 0, 0.85),
    0 0 34px -4px rgba(241, 89, 34, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 22px rgba(0, 0, 0, 0.55);
}

.scene__award:hover .scene__award-media::after {
  inset: -11px;
  border-color: rgba(241, 89, 34, 0.45);
}

.scene__award .scene__award-icon,
.scene__award--feature .scene__award-icon {
  width: 52px;
  height: 52px;
  color: #FFFFFF;
  filter: drop-shadow(0 0 10px rgba(241, 89, 34, 0.55));
}

.scene__award:hover .scene__award-icon {
  transform: none;
}

/* text: Playfair name, spaced orange label, no rule line */
.scene__award .scene__award-txt::before {
  display: none;
}

.scene__award .scene__award-txt b,
.scene__award--feature .scene__award-txt b {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: 0;
}

.scene__award .scene__award-txt em {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
}

/* laptops: slightly tighter so the three fit beside the heading */
@media (max-width: 1440px) {
  .scene__awards {
    width: clamp(440px, 40vw, 560px);
  }

  .scene__award .scene__award-txt b {
    font-size: 14.5px;
  }
}

@media (max-width: 760px) {
  .scene__awards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: auto;
    right: 5vw;
    column-gap: 8px;
    row-gap: 0;
  }

  .scene__awards .scene__proj:nth-child(n) {
    grid-column: auto;
  }

  .scene__award .scene__award-media {
    width: 54px;
    height: 54px;
  }

  .scene__award .scene__award-media::after {
    inset: -4px;
  }

  .scene__award .scene__award-icon,
  .scene__award--feature .scene__award-icon {
    width: 28px;
    height: 28px;
  }
}

/* the drawings only fill ~70% of their square: size up to sit fuller
   inside the medallion */
.scene__award .scene__award-icon,
.scene__award--feature .scene__award-icon {
  width: 66px;
  height: 66px;
}

@media (max-width: 760px) {
  .scene__award .scene__award-icon,
  .scene__award--feature .scene__award-icon {
    width: 38px;
    height: 38px;
  }
}

/* medallion removed on request: icons sit directly on the photo, no
   circle fill / ring / halo / shadow */
.scene__award .scene__award-media,
.scene__award:hover .scene__award-media {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.scene__award .scene__award-media::before,
.scene__award .scene__award-media::after {
  display: none;
}

.scene__award .scene__award-icon {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.scene__award:hover .scene__award-icon {
  transform: translateY(-4px);
}

/* award icons 15% larger (66px -> 76px; phones 38px -> 44px) */
.scene__award .scene__award-icon,
.scene__award--feature .scene__award-icon {
  width: 76px;
  height: 76px;
}

@media (max-width: 760px) {
  .scene__award .scene__award-icon,
  .scene__award--feature .scene__award-icon {
    width: 44px;
    height: 44px;
  }
}

/* closing line: 15px larger than the shared heading size, left-aligned
   (text and button) */
.hs__outro-text {
  font-size: clamp(37px, calc(3.73vw + 15px), 62px);
  text-align: left;
}

.hs__outro {
  align-items: flex-start;
  text-align: left;
}

/* decorative ampersand: Great Vibes script (only the "&" glyph is
   loaded), orange, larger and sitting low like a swash & */
.amp {
  display: inline-block;
  font-family: 'Great Vibes', 'Playfair Display', Georgia, cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 0;
  color: var(--accent-gold);
  transform: translateY(0.06em);
  padding: 0 0.2em 0 0.04em;
}

/* nav: "Book a site visit" sits right beside "Enquire" (same orange
   button style; the menu's gap would push them too far apart) */
.nav__cta--visit {
  margin-right: calc(-1 * clamp(18px, 2.6vw, 42px) + 10px);
}

/* laptops: the two buttons + four links get tight — trim the padding */
@media (max-width: 1280px) {
  .nav__menu .nav__cta {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* 900–1199px: tighter menu so four links + two buttons stay on one line */
@media (min-width: 901px) and (max-width: 1199px) {
  .nav__menu {
    gap: 12px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }

  .nav__menu a {
    white-space: nowrap;
  }

  .nav__menu .nav__cta {
    padding-left: 14px;
    padding-right: 14px;
  }

  .nav__cta--visit {
    margin-right: -4px;
  }
}

/* closed drawers sit just off the right edge: their shadow was spilling
   back onto the page as a grey band. Park them fully out of reach and
   hide them when closed; the shadow only exists while open */
.sv-drawer {
  box-shadow: none;
  visibility: hidden;
  transform: translateX(calc(100% + 40px));
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 350ms, box-shadow 350ms ease;
}

.sv-drawer.is-open {
  visibility: visible;
  transform: translateX(0);
  box-shadow: -20px 0 60px rgba(16, 18, 21, 0.25);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s, box-shadow 350ms ease;
}

/* no underline under "What Defines Solaris" */
.values__title::after {
  display: none;
}

/* ===== Scene photo cards: hover =====
   lift (on the separate `translate` property, so it stacks with the
   script's slide/drift transform), orange frame + glow, slow photo zoom,
   and a light sheen sweeping across */
.scene__projects .scene__proj {
  translate: 0 0;
  transition: translate 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.scene__projects .scene__proj img {
  transition: scale 1.1s cubic-bezier(0.16, 0.84, 0.44, 1), filter 0.6s ease;
}

.scene__projects .scene__proj::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -70%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

@media (hover: hover) {
  .scene__projects .scene__proj:hover {
    translate: 0 -8px;
    border-color: var(--accent-gold);
    box-shadow: 0 34px 60px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(241, 89, 34, 0.35), 0 0 36px -6px rgba(241, 89, 34, 0.55);
  }

  .scene__projects .scene__proj:hover img {
    scale: 1.1;
    filter: brightness(1.06) saturate(1.08);
  }

  .scene__projects .scene__proj:hover::after {
    left: 130%;
  }
}

/* the text block spans the full stage width at a higher z-index and was
   swallowing the pointer over the photo cards: let clicks/hover pass
   through it, except on its own text and button */
.scene__content {
  pointer-events: none;
}

.scene__content > * {
  pointer-events: auto;
}

/* the eyebrow / title lines / paragraph are full-width blocks that sat
   over the photo cards and swallowed their hover: only the button takes
   the pointer, the text lets it through to the cards behind */
.scene__content > :not(.scene__btn) {
  pointer-events: none;
}

/* desktop: the intro panel is as wide as its content plus 150px of
   right padding */
@media (min-width: 761px) {
  .hs.is-pinned .hs__intro {
    width: auto;
    padding-right: 150px;
  }
}

/* phones: the four photo cards as two rows of two (was one row of four),
   shorter landscape tiles so the pair of rows clears the copy below */
@media (max-width: 760px) {
  .scene__projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 8vw;
    right: 8vw;
    gap: 10px;
  }

  .scene__projects .scene__proj {
    aspect-ratio: 4 / 3;
  }

  .scene__projects .scene__proj:nth-child(even) {
    top: 0;
  }
}

/* mobile menu: slides in from the right edge (right to left), links
   follow in a short stagger; slides back out to the right on close */
.drawer {
  display: flex;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s;
}

.drawer.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.drawer > a {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer.is-open > a {
  opacity: 1;
  transform: none;
}

.drawer.is-open > a:nth-child(1) { transition-delay: 0.12s; }
.drawer.is-open > a:nth-child(2) { transition-delay: 0.17s; }
.drawer.is-open > a:nth-child(3) { transition-delay: 0.22s; }
.drawer.is-open > a:nth-child(4) { transition-delay: 0.27s; }
.drawer.is-open > a:nth-child(5) { transition-delay: 0.32s; }
.drawer.is-open > a:nth-child(6) { transition-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer > a {
    transition: none;
  }
}

/* mobile menu open: the top bar gets its own solid white background (the
   drawer below is cream), with a hairline edge; the burger turns into an
   orange x and the drawer's duplicate close button is hidden */
.nav.is-menu-open {
  background: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(36, 26, 18, 0.08);
  transform: none;
  filter: none;
}

.nav.is-menu-open .nav__glow {
  visibility: hidden;
}

.nav__burger span {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.nav.is-menu-open .nav__burger span {
  background: var(--accent-gold);
}

.nav.is-menu-open .nav__burger span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav.is-menu-open .nav__burger span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.drawer__close {
  display: none;
}

/* phones: size the 2x2 cards from the screen height so they always end
   above the copy (short phones were overlapping "Always coming home").
   --ch = the height left after the top offset, the copy block (~330px)
   and its bottom padding, split between two rows */
@media (max-width: 760px) {
  .scene__projects {
    --ch: clamp(64px, calc((100vh - 24vh - 380px) / 2), 150px);
    left: 50%;
    right: auto;
    width: calc(var(--ch) * 4 / 3 * 2 + 10px);
    translate: -50% 0;
    grid-auto-rows: var(--ch);
  }

  .scene__projects .scene__proj {
    aspect-ratio: auto;
    height: var(--ch);
  }
}

/* ==========================================================
   HERO SLIDER (option 6) — replaces the old scroll-scrubbed
   logo sequence. Animation is driven by js/script.js
   ========================================================== */
/* the bar's logo + menu are always visible now (the old hero faded them
   in at the end of its outro); light logo over the photos, the dark
   logo-new.png on the white bar / open mobile menu */
.nav__logo,
.nav__menu {
  opacity: 1;
}

.nav__logo img {
  transition: opacity 0.3s ease;
}

.nav__logo-dark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.nav.is-solid .nav__logo-light,
.nav.is-menu-open .nav__logo-light {
  opacity: 0;
}

.nav.is-solid .nav__logo-dark,
.nav.is-menu-open .nav__logo-dark {
  opacity: 1;
}

.shero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: min(620px, 100vh);
  overflow: hidden;
  background: #0E0906;
  color: #FAF7F1;
}

.shero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}

.shero__slide:first-child {
  opacity: 1;
}

.shero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
}

.shero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(14, 9, 6, 0.35) 0%, rgba(14, 9, 6, 0.15) 40%, transparent 65%),
    linear-gradient(180deg, rgba(14, 9, 6, 0.225) 0%, transparent 22%, transparent 50%, rgba(14, 9, 6, 0.44) 100%);
  pointer-events: none;
}

/* the overlay is half as dark as the design's, so a soft shadow keeps the
   copy legible on the brighter photos */
.shero__texts,
.shero__tabs {
  text-shadow: 0 1px 2px rgba(14, 9, 6, 0.35), 0 2px 18px rgba(14, 9, 6, 0.45);
}

.shero__texts {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 5vw, 88px);
  right: clamp(24px, 5vw, 88px);
  top: 100px;
  bottom: 144px;
  pointer-events: none;
}

.shero__txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
}

.shero__txt:first-child {
  opacity: 1;
}

.shero__eye {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F2BB9C;
}

.shero__eye span {
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.shero__title {
  margin: 20px 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 6.2vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #FAF7F1;
}

.shero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.shero__line > * {
  display: block;
  will-change: transform;
}

.shero__line em {
  font-style: italic;
  color: var(--accent);
}

.shero__copy {
  max-width: 42ch;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: #FAF7F1;
}

.shero__tabs {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 5vw, 88px);
  right: clamp(24px, 5vw, 88px);
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(250, 247, 241, 0.25);
}

.shero__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 18px 4px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: #FAF7F1;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

.shero__tab:hover,
.shero__tab:focus-visible,
.shero__tab.is-active {
  opacity: 1;
}

.shero__bar {
  position: absolute;
  left: 0;
  right: 12px;
  top: -1px;
  height: 2px;
  overflow: hidden;
}

.shero__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.shero__cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.shero__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  color: #FAF7F1;
  transition: color 0.4s ease;
}

.shero__tab.is-active .shero__num {
  color: var(--accent);
}

.shero__name {
  overflow: hidden;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(14px, 1.3vw, 19px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shero__place {
  overflow: hidden;
  padding-left: 28px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* phones: tabs shrink to number + timer bar, text sits above them */
@media (max-width: 760px) {
  .shero__texts {
    top: 90px;
    bottom: 112px;
  }

  .shero__tabs {
    right: 84px; /* clear of the floating WhatsApp button */
    bottom: 20px;
  }

  .shero__tab {
    padding: 14px 10px 4px 0;
  }

  .shero__name,
  .shero__place {
    display: none;
  }

  .shero__num {
    font-size: 15px;
  }

  .shero__copy {
    font-size: 14px;
  }
}

/* burger: light over the slider, dark on the white bar (default) */
.nav:not(.is-solid):not(.is-menu-open) .nav__burger span {
  background: #FAF7F1;
}

@media (prefers-reduced-motion: reduce) {
  .shero__img {
    transform: none;
  }
}

/* ==========================================================
   Menu dropdowns (same panels as the inner pages' header)
   ========================================================== */
.nav__item {
  position: relative;
}

.nav__menu .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav__caret {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 0.3s ease;
}

.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret {
  transform: rotate(180deg);
}

/* keep the top link's underline drawn while its panel is open */
.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after {
  transform: scaleX(1);
}

.nav__drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 240px;
  padding: 10px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 24px 50px -20px rgba(36, 26, 18, 0.4), 0 0 0 1px rgba(36, 26, 18, 0.06);
  text-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.35s;
}

/* bridge the gap so the pointer can travel into the panel */
.nav__drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s;
}

.nav__drop--wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  min-width: 460px;
}

.nav__drop-head {
  grid-column: 1 / -1;
}

.nav__drop-group {
  display: flex;
  flex-direction: column;
}

/* panel links: undo the bar's uppercase/white link styling */
.nav__menu .nav__drop a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
}

.nav__menu .nav__drop a::after {
  display: none;
}

.nav__menu .nav__drop a:hover {
  background: #F8EFE6;
  color: var(--accent);
}

.nav__menu .nav__drop .nav__drop-label {
  padding: 10px 14px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(59, 42, 30, 0.55);
}

.nav__menu .nav__drop .nav__drop-all {
  font-weight: 600;
  border-bottom: 1px solid rgba(36, 26, 18, 0.12);
  border-radius: 6px 6px 0 0;
}

/* phones/tablets use the slide-in drawer instead */
@media (max-width: 900px) {
  .nav__item {
    display: none;
  }
}

/* ==========================================================
   MENU v2 — glass pill + gliding highlight, rich dropdowns,
   numbered mobile drawer. Overrides the earlier menu rules.
   ========================================================== */
/* the pill gives the links their own backing over the photos, so the bar's
   text drop-shadow filter is no longer needed (and a filter on the bar
   would stop the pill's backdrop blur from working) */
.nav {
  filter: none;
}

.nav__menu {
  gap: 10px;
}

.nav__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 14px;
  padding: 4px;
  border-radius: 999px;
  /* no backing of its own (removed on request) — only the hover
     highlight shows */
  background: transparent;
  border: 0;
}

.nav__glider {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.5, 1), width 0.45s cubic-bezier(0.34, 1.3, 0.5, 1), opacity 0.3s ease, background 0.4s ease;
  pointer-events: none;
}

.nav__pill.has-glide .nav__glider {
  opacity: 1;
}

.nav.is-solid .nav__glider {
  background: #FFFFFF;
  box-shadow: 0 4px 14px -6px rgba(36, 26, 18, 0.25);
}

.nav__menu .nav__pill .nav__link {
  position: relative;
  z-index: 1;
  padding: 11px 18px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 8px rgba(14, 9, 6, 0.35);
}

.nav.is-solid .nav__pill .nav__link {
  text-shadow: none;
}

/* the glider replaces the underline */
.nav__menu .nav__pill .nav__link::after {
  display: none;
}

.nav.is-solid .nav__item:hover > .nav__link {
  color: var(--accent);
}

/* ---- dropdown panels ---- */
.nav__drop {
  top: calc(100% + 16px);
  padding: 8px;
  border-radius: 16px;
  transform: translate(-50%, 10px) scale(0.98);
  transform-origin: 50% 0;
}

.nav__drop::before {
  top: -20px;
  height: 20px;
}

.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  transform: translate(-50%, 0) scale(1);
}

/* list panels: numbered rows; on hover the row warms up, the title slides
   right and an orange arrow chip slides in from the left */
.nav__drop--list {
  min-width: 320px;
  counter-reset: navdl;
}

.nav__menu .nav__drop a.nav__dl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px 13px 16px;
  border-radius: 12px;
  white-space: normal;
  counter-increment: navdl;
  transition: background 0.3s ease;
}

.nav__menu .nav__drop a.nav__dl + a.nav__dl {
  margin-top: 2px;
}

.nav__menu .nav__drop a.nav__dl::before {
  content: counter(navdl, decimal-leading-zero);
  flex: none;
  width: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  color: rgba(59, 42, 30, 0.38);
  transition: color 0.3s ease;
}

.nav__menu .nav__drop a.nav__dl::after {
  /* reset the menu's underline geometry this pseudo-element inherits */
  display: block;
  content: "";
  position: static;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 6px 14px -6px rgba(241, 89, 34, 0.7);
  opacity: 0;
  transform: translateX(-10px) scale(0.8);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__menu .nav__drop a.nav__dl:hover {
  background: linear-gradient(90deg, #F8EFE6 0%, rgba(248, 239, 230, 0.35) 100%);
}

.nav__menu .nav__drop a.nav__dl:hover::before {
  color: var(--accent);
}

.nav__menu .nav__drop a.nav__dl:hover::after {
  opacity: 1;
  transform: none;
}

.nav__dl b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 17px;
  white-space: nowrap;
  color: var(--ink);
  transition: color 0.25s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__menu .nav__drop a.nav__dl:hover b {
  color: var(--accent);
  transform: translateX(4px);
}

/* projects mega panel: photo cards + quick links */
.nav__drop--mega {
  width: min(800px, calc(100vw - 40px));
  padding: 10px;
}

/* projects panel: category rail (left) + preview pane (right) */
.nav__mega {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  text-transform: none;
  letter-spacing: 0;
}

.nav__rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: #FAF7F1;
}

.nav__menu .nav__drop a.nav__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  border-radius: 9px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* orange edge marks the active category */
.nav__menu .nav__drop a.nav__tab::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__menu .nav__drop a.nav__tab.is-active,
.nav__menu .nav__drop a.nav__tab:hover {
  background: #FFFFFF;
  box-shadow: 0 6px 18px -10px rgba(36, 26, 18, 0.35);
}

.nav__menu .nav__drop a.nav__tab.is-active::before {
  transform: scaleY(1);
}

.nav__tab-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.nav__tab-txt b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.1;
  color: var(--ink);
  transition: color 0.25s ease;
}

.nav__tab.is-active .nav__tab-txt b {
  color: var(--accent);
}

.nav__tab-txt span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.nav__tab em {
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(59, 42, 30, 0.45);
}

.nav__tab.is-active em {
  color: var(--accent);
}

.nav__menu .nav__drop a.nav__rail-all {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 12px 18px 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

.nav__menu .nav__drop a.nav__rail-all:hover {
  background: transparent;
  color: var(--accent);
}

.nav__rail-all span,
.nav__fact i span,
.nav__teaser i span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.nav__rail-all:hover span,
.nav__fact:hover i span,
.nav__teaser:hover i span {
  transform: translateX(3px);
}

/* preview panes: all stacked in one cell; only the active one shows */
.nav__panes {
  display: grid;
  min-width: 0;
}

.nav__pane {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  padding: 6px 4px 4px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.3s;
}

.nav__pane.is-active {
  opacity: 1;
  /* inherit, not visible: a visible child of the closed (hidden) panel
     would still catch clicks on the page below the menu */
  visibility: inherit;
  transform: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s;
}

/* project card */
.nav__menu .nav__drop a.nav__pc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  border-radius: 12px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.nav__menu .nav__drop a.nav__pc:hover {
  background: transparent;
}

.nav__pc-img {
  display: block;
  aspect-ratio: 4 / 3.4;
  margin-bottom: 9px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
}

.nav__pc-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__pc:hover .nav__pc-img img {
  transform: scale(1.07);
}

.nav__pc b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.25s ease;
}

.nav__pc:hover b {
  color: var(--accent);
}

.nav__pc > span:last-child {
  font-size: 12px;
  color: var(--text-muted);
}

/* completed: a highlight tile fills the third slot */
.nav__menu .nav__drop a.nav__fact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border-radius: 12px;
  background: #FAF7F1;
  border: 1px solid rgba(36, 26, 18, 0.08);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  transition: border-color 0.25s ease;
}

.nav__menu .nav__drop a.nav__fact:hover {
  background: #FAF7F1;
  border-color: rgba(241, 89, 34, 0.4);
}

.nav__fact b {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}

.nav__fact > span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}

.nav__fact i,
.nav__teaser i {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

/* upcoming: one wide teaser card across the pane */
.nav__menu .nav__drop a.nav__teaser {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  min-height: 196px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: #FFFFFF;
}

.nav__teaser img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__teaser:hover img {
  transform: scale(1.05);
}

/* (more specific than the dropdown rule that hides link ::after) */
.nav__menu .nav__drop a.nav__teaser::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  /* reset the menu's underline geometry this pseudo-element inherits */
  height: auto;
  transform: none;
  transition: none;
  background: linear-gradient(90deg, rgba(20, 14, 9, 0.82) 0%, rgba(20, 14, 9, 0.5) 55%, rgba(20, 14, 9, 0.15) 100%);
}

.nav__teaser-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 330px;
  padding: 24px 26px;
}

.nav__teaser-eye {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F2BB9C;
}

.nav__teaser-body b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #FFFFFF;
}

.nav__teaser-body > span:not(.nav__teaser-eye) {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.nav__teaser i {
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
}

/* main action: solid orange pill, arrow nudges on hover */
.nav__menu .nav__drop a.nav__mega-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}

.nav__menu .nav__drop a.nav__mega-all:hover {
  background: var(--accent);
  color: #FFFFFF;
}

.nav__mega-all span {
  transition: transform 0.3s ease;
}

.nav__mega-all:hover span {
  transform: translateX(3px);
}

/* ---- buttons: a little rounder to sit with the pill ---- */
.nav__menu .nav__cta {
  border-radius: 999px;
  padding: 15px 26px;
}

/* the menu's 10px gap now separates the two buttons (an older rule pulled
   them together for the previous, wider-gapped menu) */
.nav__menu .nav__cta--visit {
  margin-right: 0;
}

@media (max-width: 1280px) {
  .nav__menu .nav__pill .nav__link {
    padding: 10px 13px;
  }

  .nav__menu .nav__cta {
    padding: 14px 20px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .nav__menu .nav__pill .nav__link {
    padding: 9px 10px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .nav__pill {
    margin-right: 4px;
  }

  .nav__menu .nav__cta {
    padding: 12px 14px;
  }
}

@media (max-width: 900px) {
  .nav__pill {
    display: none;
  }
}

/* ---- mobile drawer: numbered, expandable ---- */
.drawer {
  justify-content: flex-start;
  overflow-y: auto;
  padding: 110px clamp(24px, 7vw, 56px) 40px;
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
}

.drawer .drawer__grp {
  border-bottom: 1px solid rgba(59, 42, 30, 0.14);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer.is-open .drawer__grp,
.drawer.is-open .drawer__ctas,
.drawer.is-open .drawer__contact {
  opacity: 1;
  transform: none;
}

.drawer.is-open .drawer__grp:nth-child(1) { transition-delay: 0.12s; }
.drawer.is-open .drawer__grp:nth-child(2) { transition-delay: 0.17s; }
.drawer.is-open .drawer__grp:nth-child(3) { transition-delay: 0.22s; }
.drawer.is-open .drawer__grp:nth-child(4) { transition-delay: 0.27s; }

.drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer a.drawer__main {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex: 1;
  padding: 18px 0;
  border: 0;
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.1;
  color: var(--ink);
}

.drawer__num {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.drawer__tog {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(59, 42, 30, 0.2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.drawer__tog span::before,
.drawer__tog span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--ink);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.drawer__tog span::after {
  transform: rotate(90deg);
}

.drawer__grp.is-open .drawer__tog {
  background: var(--accent);
  border-color: var(--accent);
}

.drawer__grp.is-open .drawer__tog span::before,
.drawer__grp.is-open .drawer__tog span::after {
  background: #FFFFFF;
}

.drawer__grp.is-open .drawer__tog span::after {
  transform: rotate(0deg);
}

.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer__sub > * {
  min-height: 0;
}

.drawer__grp.is-open .drawer__sub {
  grid-template-rows: 1fr;
}

/* one grid row (the inner <div>) animates 0fr -> 1fr */
.drawer__sub > div {
  overflow: hidden;
}

.drawer__sub a {
  display: block;
  padding: 9px 0 9px 40px;
  border: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
}

.drawer__sub a:last-child {
  margin-bottom: 14px;
}

.drawer__sub a:hover {
  color: var(--accent);
}

.drawer__ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease 0.32s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.32s;
}

.drawer a.drawer__visit,
.drawer a.drawer__enquire {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border: 1px solid var(--accent) !important;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.drawer a.drawer__visit {
  background: var(--accent);
  color: #FFFFFF !important;
}

.drawer a.drawer__enquire {
  background: transparent;
}

.drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 26px;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease 0.37s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.37s;
}

.drawer .drawer__contact a {
  padding: 0;
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .nav__glider,
  .drawer .drawer__grp,
  .drawer__ctas,
  .drawer__contact,
  .drawer__sub {
    transition: none;
  }
}

/* phone menu: Projects pages grouped under coloured category labels */
.drawer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 2px 40px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.drawer__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.drawer__label:first-child {
  margin-top: 2px;
}

.drawer__label--done {
  color: #3E8E5A;
}

.drawer__label--soon {
  color: #B9831F;
}

/* ==========================================================
   MENU v3 polish (same block at the end of css/style.css and css/base.css)
   No numbers anywhere in the menu (dropdown rows, Projects tabs, mobile
   drawer); more room between the top links and between dropdown rows; a
   slim orange bar slides in beside the hovered row in place of the number
   ========================================================== */
.nav__pill {
  gap: 12px;
}

.nav__drop {
  padding: 10px;
  border: 1px solid rgba(36, 26, 18, 0.06);
  border-radius: 18px;
  box-shadow: 0 30px 60px -28px rgba(36, 26, 18, 0.35), 0 6px 18px -10px rgba(36, 26, 18, 0.12);
}

.nav__drop--list {
  min-width: 300px;
  padding-top: 0;
  padding-bottom: 0;
  counter-reset: none;
}

/* no gap above the first row or below the last: those rows round off
   with the panel's corners so the hover highlight sits flush */
.nav__menu .nav__drop--list a.nav__dl:first-child {
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.nav__menu .nav__drop--list a.nav__dl:last-child {
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
}

.nav__menu .nav__drop a.nav__dl {
  gap: 0;
  padding: 9px 14px 9px 20px;
  border-radius: 12px;
  counter-increment: none;
}

.nav__menu .nav__drop a.nav__dl + a.nav__dl {
  margin-top: 0;
}

/* the number becomes a slim accent bar that grows in on hover */
.nav__menu .nav__drop a.nav__dl::before,
.nav__menu .nav__drop a.nav__dl:hover::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__menu .nav__drop a.nav__dl:hover::before,
.nav__menu .nav__drop a.nav__dl.is-current::before {
  transform: scaleY(1);
}

.nav__dl b {
  letter-spacing: 0.005em;
}

/* Completed has two projects: they share the full width (no empty third
   column), with wider 16:9 photos so the panel keeps the same height
   as the three-card Ongoing tab */
.nav__pane[data-pane="done"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav__pane[data-pane="done"] .nav__pc-img {
  aspect-ratio: 16 / 9;
}

/* Projects tabs: no project counts */
.nav__tab em {
  display: none;
}

/* mobile drawer: no numbers, a little more air between the links */
.drawer__num {
  display: none;
}

.drawer__main {
  padding: 22px 0;
}

/* its sub-links sit under the title (the old indent was the number column),
   on a fine orange guide line */
.drawer__sub > div {
  margin: 0 0 14px 2px;
  border-left: 1px solid rgba(241, 89, 34, 0.3);
}

.drawer__sub a {
  padding: 10px 0 10px 18px;
}

@media (max-width: 1280px) {
  .nav__pill {
    gap: 6px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .nav__pill {
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__menu .nav__drop a.nav__dl::before {
    transition: none;
  }
}

/* the Projects category tabs only switch the preview (hover / focus);
   they are not links */
.nav__menu .nav__drop a.nav__tab {
  cursor: default;
}

/* About / Media rows: no background on hover or on the current page —
   the orange bar, text and arrow mark the row instead */
.nav__menu .nav__drop a.nav__dl:hover,
.nav__menu .nav__drop a.nav__dl.is-current {
  background: transparent;
}

/* ==========================================================
   MENU v4 — About / Media list panels (same block at the end of
   css/style.css and css/base.css; overrides the earlier list rules).
   Each row: a soft icon tile + a clean sans title, hairline dividers.
   Hover: the tile fills orange, the title warms, a slim arrow slides in
   ========================================================== */
.nav__drop--list {
  min-width: 290px;
  padding: 6px;
}

.nav__menu .nav__drop--list a.nav__dl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
}

.nav__menu .nav__drop--list a.nav__dl + a.nav__dl {
  margin-top: 0;
}

/* hairline between rows, inset from the tile */
.nav__menu .nav__drop--list a.nav__dl + a.nav__dl::before {
  content: "";
  display: block;
  position: absolute;
  left: 60px;
  right: 12px;
  top: 0;
  width: auto;
  height: 1px;
  margin: 0;
  border-radius: 0;
  background: rgba(36, 26, 18, 0.07);
  transform: none;
  transition: none;
}

.nav__menu .nav__drop--list a.nav__dl:first-child::before {
  display: none;
}

.nav__menu .nav__drop--list a.nav__dl:first-child,
.nav__menu .nav__drop--list a.nav__dl:last-child {
  border-radius: 12px;
}

.nav__dl-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #F7EEE4;
  color: var(--accent);
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__dl-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__menu .nav__drop--list .nav__dl b {
  font-family: var(--font-sans, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink, #1A1410);
  transform: none;
  transition: color 0.25s ease;
}

/* the arrow: slim, no disc */
.nav__menu .nav__drop--list a.nav__dl::after {
  display: block;
  content: "";
  position: static;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f15922' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.nav__menu .nav__drop--list a.nav__dl:hover,
.nav__menu .nav__drop--list a.nav__dl.is-current {
  background: transparent;
}

.nav__menu .nav__drop--list a.nav__dl:hover .nav__dl-ic,
.nav__menu .nav__drop--list a.nav__dl.is-current .nav__dl-ic {
  background: var(--accent);
  color: #FFFFFF;
  transform: scale(1.05);
}

.nav__menu .nav__drop--list a.nav__dl:hover b,
.nav__menu .nav__drop--list a.nav__dl.is-current b {
  color: var(--accent);
  transform: none;
}

.nav__menu .nav__drop--list a.nav__dl:hover::after,
.nav__menu .nav__drop--list a.nav__dl.is-current::after {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav__dl-ic,
  .nav__menu .nav__drop--list a.nav__dl::after {
    transition: none;
  }
}

/* ==========================================================
   FOOTER — responsive (same block at the end of css/style.css and
   css/base.css). Tablet: brand across the top, then three even columns.
   Phone: brand on top, Explore + Projects side by side, Contact in a soft
   card, a centred bottom bar with room for the floating buttons
   ========================================================== */
@media (min-width: 601px) and (max-width: 1060px) {
  .foot__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
  }

  .foot__brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(250, 247, 241, 0.1);
  }

  .foot__brand p {
    margin-top: 0;
    max-width: 40ch;
  }

  /* room below the bar for the floating back-to-top / WhatsApp buttons */
  .foot__bottom {
    padding-bottom: 96px;
  }
}

@media (max-width: 600px) {
  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }

  .foot__brand {
    grid-column: 1 / -1;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(250, 247, 241, 0.1);
  }

  .foot__brand p {
    margin-top: 14px;
    font-size: 14px;
  }

  .foot__col h3 {
    margin-bottom: 14px;
  }

  .foot__col ul {
    gap: 11px;
    font-size: 14px;
  }

  .foot__contact {
    grid-column: 1 / -1;
    padding: 20px 20px 22px;
    border: 1px solid rgba(250, 247, 241, 0.1);
    border-radius: 16px;
    background: rgba(250, 247, 241, 0.04);
  }

  .foot__contact ul {
    gap: 14px;
  }

  .foot__bottom {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 20px 0 104px;
    text-align: center;
  }

  .foot__legal {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================
   FOOTER — compact (same block at the end of css/style.css and
   css/base.css): less padding and tighter gaps at every size
   ========================================================== */
.foot {
  padding-top: clamp(36px, 4vw, 56px);
}

.foot .foot__body {
  padding-top: clamp(36px, 4vw, 56px);
}

footer.foot:has(.foot__body) {
  padding-top: 0;
}

.foot__col ul {
  gap: 9px;
}

.foot__bottom {
  margin-top: clamp(28px, 3vw, 40px);
  padding: 16px 0 20px;
}

@media (min-width: 601px) and (max-width: 1060px) {
  .foot__grid {
    gap: 28px 28px;
  }

  .foot__brand {
    padding-bottom: 22px;
  }

  .foot__bottom {
    padding-bottom: 84px;
  }
}

@media (max-width: 600px) {
  .foot__grid {
    gap: 22px 18px;
  }

  .foot__brand {
    padding-bottom: 18px;
  }

  .foot__brand p {
    margin-top: 10px;
    font-size: 13.5px;
  }

  .foot__col h3 {
    margin-bottom: 10px;
  }

  .foot__col ul {
    gap: 8px;
  }

  .foot__contact {
    padding: 16px 16px 18px;
  }

  .foot__contact ul {
    gap: 10px;
  }

  .foot__bottom {
    gap: 6px;
    margin-top: 24px;
    padding: 14px 0 84px;
  }
}

/* ==========================================================
   BURGER — 3 lines (keep identical in style.css and base.css)
   3 × 2px lines, 6px apart (18px tall). Open: the outer two
   lines meet in the middle (±8px) and cross into an X, the
   middle one fades out.
   ========================================================== */
.nav__burger {
  gap: 6px;
}

.nav__burger span {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background 0.3s ease;
}

.nav.is-menu-open .nav__burger span:first-child {
  transform: translateY(8px) rotate(45deg);
}

.nav.is-menu-open .nav__burger span:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

.nav.is-menu-open .nav__burger span:nth-child(2) {
  opacity: 0;
}

/* ==========================================================
   CREDIBILITY — phones (≤760px)
   Same pinned sideways story as desktop (scroll down → the track
   moves right-to-left), but ONE full-width chapter per screen and
   each chapter comes in image first, then text: script.js
   (pin(true), .is-phone) scales the photo into focus (0.86x and
   faded at the edge, 1x near the centre), then the text rises in
   once the photo has settled; when the scroll rests the page eases
   to the nearest chapter.
   No glow / curtain / title wipe / number drift on phones.
   .hs__chapters only groups the chapters (display: contents).
   .hs__down: a thin gold arrow inside the stage (part of the
   section, never position: fixed): white arrow on a solid #f15922 disc,
   gently bobbing up and down (hs-bob). script.js
   adds .has-cue while the section is on screen and the story has
   not finished; it fades out once the user moves past.
   ========================================================== */
.hs__chapters {
  display: contents;
}

.hs__down {
  display: none;
}

@media (max-width: 760px) {
  /* no travelling glow on phones: the chapter scale is the motion */
  .hs__lines::after {
    display: none;
  }

  .hs.is-pinned .hs__intro,
  .hs.is-pinned .hs-ch,
  .hs.is-pinned .hs__outro {
    width: 100vw;
  }

  .hs.is-phone .hs-ch {
    align-content: center;
    gap: 18px;
    /* clear of the header (top) and the chapter timeline (bottom) */
    padding: 72px 20px 84px;
  }

  .hs.is-phone .hs-ch__media,
  .hs.is-phone .hs-ch__body {
    will-change: transform, opacity;
  }

  .hs-ch__media {
    aspect-ratio: 4 / 3;
    max-height: 44vh;
  }

  .hs-ch__title {
    margin-top: 10px;
    font-size: 26px;
  }

  .hs-ch__desc {
    margin-top: 10px;
  }

  /* the closing line's <br> is for desktop only: on phones the words
     wrap naturally */
  .hs__outro-text br {
    display: none;
  }

  /* chapter timeline: clear of the round to-top button floating over
     the bottom-left corner (the WhatsApp button on the right is gone) */
  .hs.is-pinned .hs__timeline {
    left: 78px;
    right: 20px;
    gap: 8px;
  }

  /* subtle scroll hint: a thin white arrow above the timeline on a
     solid #f15922 disc; the link fades in / out (.has-cue), the icon inside it
     drifts gently down and back */
  .hs__down {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 73px; /* 15px higher (was 58px) */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    /* solid orange disc (user asked: #f15922, not transparent) */
    border-radius: 50%;
    background: #f15922;
    box-shadow: 0 8px 18px -8px rgba(241, 89, 34, 0.55);
    /* no grey/blue flash behind it when tapped */
    -webkit-tap-highlight-color: transparent;
    color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  }

  .hs.has-cue .hs__down {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s;
  }

  /* the whole button bobs (disc + arrow), with a soft ripple ring */
  .hs.has-cue .hs__down {
    animation: hs-bob-btn 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .hs__down::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(241, 89, 34, 0.7);
    animation: hs-ripple 2.2s ease-out infinite;
    pointer-events: none;
  }

  /* no JS story (reduced motion / no ScrollMagic): a plain arrow at the
     foot of the stacked section */
  .hs:not(.is-pinned) .hs__down {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 0 auto 20px;
    opacity: 1;
    visibility: visible;
  }

  /* beats the global a:hover colour; same disc in every state */
  .hs__down:hover,
  .hs__down:focus,
  .hs__down:active,
  .hs__down:focus-visible {
    background: #f15922;
    color: #FFFFFF;
  }

  .hs__down:focus:not(:focus-visible) {
    outline: none;
  }
}

/* gentle bob: 6px down while it brightens, then back up softer */
@keyframes hs-bob {
  0%,
  100% {
    transform: translateY(-3px);
    opacity: 0.7;
  }

  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}

/* the whole scroll-hint button: 8px down and back */
@keyframes hs-bob-btn {
  0%,
  100% {
    transform: translateY(-4px);
  }

  50% {
    transform: translateY(4px);
  }
}

/* ripple ring grows out of the disc and fades */
@keyframes hs-ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hs__down svg,
  .hs.has-cue .hs__down,
  .hs__down::after {
    animation: none;
    opacity: 0.9;
  }

  .hs__down::after {
    display: none;
  }
}

/* ==========================================================
   BACK TO TOP — glass, PHONES ONLY (≤760px; keep identical in
   style.css and base.css). Desktop keeps the solid orange button.
   50%-transparent white disc (user asked: #fff at 50%), soft blur,
   orange arrow and hairline; hover/focus fills it solid orange with
   a white arrow. Placed last to beat the shared button-fill rules.
   ========================================================== */
@media (max-width: 760px) {
  .to-top {
    border: 1px solid rgba(241, 89, 34, 0.25);
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #f15922;
    box-shadow: 0 8px 20px -10px rgba(36, 26, 18, 0.35);
    -webkit-tap-highlight-color: transparent;
  }

  .to-top.is-shown {
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .to-top:hover,
  .to-top:focus-visible {
    border-color: #f15922;
    background: #f15922;
    color: #FFFFFF;
  }
}

/* ==========================================================
   SOLARIS PROMISE (#values) — phones (≤760px)
   No photo slider on phones: the shared auto-sliding photo
   (.values__visual) is hidden and every value shows ITS OWN photo
   (.value-tile__media, hidden on desktop so it never loads there)
   first, then its number / title / text. All five photos share one
   frame (1358:1159, the landscape photos' own shape, so they fill it
   uncropped); the location value uses a landscape version of its
   infographic on phones (value-location-mobile.webp, 1356x1159).
   script.js stops the tile highlight cycling on phones.
   ========================================================== */
.value-tile__media {
  display: none;
}

@media (max-width: 760px) {
  .values .values__visual {
    display: none;
  }

  .values .value-tile,
  .values .value-tile--feature {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas: "media media" "num title" "num desc";
    padding: 24px 0 28px;
  }

  .values .value-tile__icon {
    display: none;
  }

  .value-tile__media {
    grid-area: media;
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    aspect-ratio: 1358 / 1159;
    margin: 0 0 20px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-alt);
    box-shadow: 0 18px 36px -22px rgba(90, 62, 28, 0.4);
  }

  .value-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* the big outlined number sits beside the title, under the photo */
  .values .value-tile__num {
    font-size: 38px;
    align-self: start;
  }

  /* no hover nudge on touch screens */
  .values .value-tile:hover .value-tile__title,
  .values .value-tile:hover .value-tile__desc,
  .values .value-tile.is-current .value-tile__title,
  .values .value-tile.is-current .value-tile__desc {
    translate: none;
  }
}

/* ==========================================================
   LIFE AT SOLARIS (#scene) — phones (≤760px)
   The four amenity photos were a cramped 2x2 grid; on phones they
   are now a fanned "hand" of overlapping portrait prints, centred
   above the copy: tilted -9 / -3 / 3 / 9deg on a gentle arc (the
   middle two on top), at most 86vw wide. Tilt + arc ride on the separate rotate /
   translate properties, so script.js's slide-in transform still
   works on top of them. Card height comes from the screen height
   so the fan always clears "Always coming home" below it.
   ========================================================== */
@media (max-width: 760px) {
  .scene__projects {
    /* --free: the band between the header (~100px) and the copy, which
       fills the bottom 12vh + ~360px of the stage. Card width: from
       that band (3:4 portrait) but never so wide that the fan (4 cards,
       38% overlap = 2.86 card widths) passes 86vw. The fan is centred
       in the band (never above 100px, so the header can't cover it) */
    --free: calc(88vh - 480px);
    --cw: min(calc(clamp(76px, var(--free), 230px) * 0.75), 30vw); /* --free is measured on phones (script.js) */
    --ch: calc(var(--cw) * 4 / 3);
    left: 50%;
    right: auto;
    top: max(100px, calc(100px + (var(--free) - var(--ch)) / 2));
    display: flex;
    justify-content: center;
    width: calc(var(--cw) * 2.86);
    gap: 0;
    translate: -50% 0;
  }

  .scene__projects .scene__proj,
  .scene__projects .scene__proj:nth-child(even) {
    flex: none;
    top: 0;
    width: var(--cw);
    height: var(--ch);
    aspect-ratio: auto;
    border-width: 3px;
    border-radius: 12px;
    box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.65);
  }

  .scene__projects .scene__proj + .scene__proj {
    margin-left: calc(var(--cw) * -0.38);
  }

  .scene__projects .scene__proj:nth-child(1) {
    z-index: 1;
    rotate: -9deg;
    translate: 0 14px;
  }

  .scene__projects .scene__proj:nth-child(2) {
    z-index: 2;
    rotate: -3deg;
    translate: 0 0;
  }

  .scene__projects .scene__proj:nth-child(3) {
    z-index: 3;
    rotate: 3deg;
    translate: 0 0;
  }

  .scene__projects .scene__proj:nth-child(4) {
    z-index: 2;
    rotate: 9deg;
    translate: 0 14px;
  }
}

/* ==========================================================
   USER QUERY — phones only (≤760px; keep identical in style.css
   and base.css). An orange quarter-circle query button tucked flush
   into the bottom-right corner of the screen (user's reference),
   its icon sitting in the visible quarter. Tapping it (script.js /
   base.js "User query") toggles .is-open: a soft dark backdrop
   fades in and two pill buttons rise above the button, one after
   the other, under a small "How can we help?" caption —
   Book a Site Visit (solid orange) / Enquire (white) — each opening
   its slide-in form ([data-open-sv] / [data-open-enq]). Tapping the
   backdrop closes it.
   ========================================================== */
.uq {
  display: none;
}

@media (max-width: 760px) {
  .uq {
    position: fixed;
    z-index: 55;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
  }

  /* backdrop (taps on it reach .uq itself, which closes the menu) */
  .uq::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 18, 12, 0.15) 0%, rgba(26, 18, 12, 0.55) 100%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .uq.is-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* quarter circle: 66px radius, only its top-left corner rounded, so it
     reads as a circle centred on the screen corner; the corner's own
     safe-area inset (home bar) is added under / beside it */
  .uq__btn {
    position: relative;
    display: block;
    width: calc(66px + env(safe-area-inset-right, 0px));
    height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    border: 0;
    border-radius: 66px 0 0 0;
    background: #f15922;
    color: #FFFFFF;
    box-shadow: -6px -6px 24px -8px rgba(241, 89, 34, 0.55);
    transform-origin: 100% 100%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.3s ease;
  }

  .uq__btn:active {
    transform: scale(0.94);
  }

  /* icon centred on the quarter's visual centre (~0.42 r from the
     corner along each edge, plus the safe-area inset) */
  .uq__btn svg {
    position: absolute;
    right: calc(28px + env(safe-area-inset-right, 0px) - 14.3px);
    bottom: calc(28px + env(safe-area-inset-bottom, 0px) - 14.3px);
    width: 28.6px; /* 26px + 10% (user asked) */
    height: 28.6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* the envelope icon: a further 15% up (user asked); same centre */
  .uq__btn .uq__i-open {
    right: calc(28px + env(safe-area-inset-right, 0px) - 16.45px);
    bottom: calc(28px + env(safe-area-inset-bottom, 0px) - 16.45px);
    width: 32.9px;
    height: 32.9px;
  }

  .uq__i-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }

  .uq.is-open .uq__btn {
    background: #FFFFFF;
    color: #241A12;
    box-shadow: -6px -6px 24px -10px rgba(0, 0, 0, 0.45);
  }

  .uq.is-open .uq__i-open {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }

  .uq.is-open .uq__i-close {
    opacity: 1;
    transform: none;
  }

  /* the options: a right-aligned stack of pills, no card */
  .uq__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-right: 14px;
    visibility: hidden;
    transition: visibility 0s linear 0.35s;
  }

  .uq.is-open .uq__menu {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }

  .uq__menu::before {
    content: "How can we help?";
    margin: 0 6px 2px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .uq.is-open .uq__menu::before {
    opacity: 1;
    transition-delay: 0.12s;
  }

  .uq__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 7px 0 22px;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #241A12;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    transform-origin: 100% 50%;
    transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* rise one after the other: the lower pill (Enquire) first */
  .uq.is-open .uq__item {
    opacity: 1;
    transform: none;
  }

  .uq.is-open .uq__item:last-child {
    transition-delay: 0.03s;
  }

  .uq.is-open .uq__item:first-child {
    transition-delay: 0.09s;
  }

  .uq__item:active {
    transform: scale(0.97);
  }

  /* Book a Site Visit: the solid orange one */
  .uq__item[data-open-sv] {
    background: #f15922;
    color: #FFFFFF;
  }

  /* beats the global a:hover colour */
  .uq__item:hover,
  .uq__item:focus-visible {
    color: #241A12;
  }

  .uq__item[data-open-sv]:hover,
  .uq__item[data-open-sv]:focus-visible {
    color: #FFFFFF;
  }

  /* icon chip on the right end of each pill, next to the button */
  .uq__ic {
    order: 2;
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(241, 89, 34, 0.12);
    color: #f15922;
  }

  .uq__item[data-open-sv] .uq__ic {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
  }

  .uq__ic svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .uq::before,
  .uq__btn,
  .uq__btn svg,
  .uq__menu::before,
  .uq__item {
    transition: none;
  }
}

/* ==========================================================
   SOLARIS IN THE NEWS (#news) — row text (user asked):
   1. project name (the serif title), 2. newspaper name (small orange
   caps), 3. a one-line summary — always a single line, ending in an
   ellipsis if it runs long
   ========================================================== */
.press-item__body {
  gap: 0;
}

.press-item__pub {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.press-item__text {
  margin-top: 6px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .press-item__pub {
    margin-top: 6px;
    font-size: 10px;
  }

  .press-item__text {
    font-size: 14px;
  }
}

/* ==========================================================
   FOUR ADDRESSES — cards link to the projects (user asked): each card
   opens its project site in a new tab, the same URL as the Projects
   menu. .addr-card__cover is a full-card link layer (mouse / touch;
   hidden from keyboard + screen readers, which use the labelled arrow)
   under the arrow button
   ========================================================== */
.addr-card__cover {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
}

.addr-card__arrow {
  z-index: 3;
}