/* ==========================================================================
   Callaghan Decorators — mockup stylesheet
   Built on the in-house editorial template (demo-sites/hotlab-clone),
   retokenised to the Callaghan brand. Structure and animation are the
   template's; palette, type sizing and components below are this build's.
   ========================================================================== */

/* ---------- fonts (Google Fonts, OFL) ---------- */
@font-face {
  font-family: "Encode Sans";
  src: url("../fonts/EncodeSans-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair";
  src: url("../fonts/PlayfairDisplay-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair";
  src: url("../fonts/PlayfairDisplay-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--hH) * 1px); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; }
menu, ol, ul { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; vertical-align: middle; }
button { background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
u { text-decoration: none; }

/* ---------- design tokens ---------- */
html {
  --container-maxWidth: 75rem;
  --container-pad: var(--vpad);
  --vpad: 1.6rem;
  --titleSize: 3.75rem;
  --lineHeight: 1.6;
  --hH: 76;
  --header-height: var(--hH);
  --easeSmall: cubic-bezier(.445, .05, .55, .95);   /* sine-ish, UI details */
  --easeBig: cubic-bezier(.645, .045, .355, 1);     /* big element moves    */
}
@media screen and (min-width: 36rem) { html { --vpad: 2.56rem; --hH: 106; } }
@media screen and (min-width: 50rem) { html { --vpad: 3.52rem; } }
@media screen and (min-width: 60rem) { html { --vpad: 3.84rem; } }

/* Callaghan Decorators palette.
   Their mark is pure black + white writing; the brief was "softer, with
   DECORATORS kept the same" — so the lockup is unchanged and the black
   and white are warmed into ink and chalk, with a heritage-paint sage
   as the single accent. */
html {
  --colInk: #23211e;          /* softened black  */
  --colChalk: #faf8f4;        /* softened white  */
  --colStone: #e7e1d7;
  --colSage: #8a9a8b;
  --colSageDeep: #5f6e61;

  --colBg: var(--colChalk);
  --colNero: var(--colInk);
  --colBianco: var(--colChalk);
  --colPrimario: var(--colInk);
  --colPrimarioLeggero: #f1ede6;
  --colPrimarioChiaro: #6e6a63;
  --colPrimarioScuro: #1a1917;
  --colContrasto: var(--colSage);
  --colContrastoLeggero: #eef1ec;
  --colContrastoChiaro: #c3cec2;
  --colContrastoScuro: var(--colSageDeep);
  --colGrigio: #cfc9bf;
  --colGrigioLeggero: #f1ede6;
  --colGrigioChiaro: var(--colStone);
  --colGrigioMedio: #8d877d;
  --colGrigioScuro: #6e6a63;
  --colBurger: var(--colChalk);
  --colText: var(--colInk);
  --colLink: var(--colSageDeep);
  --colLinkHover: var(--colSage);
}

/* ---------- base ---------- */
body {
  background: var(--colBg);
  color: var(--colText);
  font-family: "Encode Sans", sans-serif;
  font-weight: 400;
  line-height: var(--lineHeight);
}
body.m-open { overflow: hidden; }
.page-wrapper {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  overflow: clip;
}
a { color: inherit; text-decoration: underline; text-underline-offset: .3em; }
a:hover { color: var(--colLinkHover); }
strong { font-weight: 600; }
em, i { font-style: normal; font-weight: 500; }

@media screen and (prefers-reduced-motion: no-preference) {
  a, .burger__lines, .burger__lines::before, .burger__lines::after,
  .header__logo a::before, .header__logo a::after,
  .site-header::before, .loading-screen {
    transition: all .3s var(--easeSmall);
  }
  .menu-overlay, .showcase__figure,
  .showcase__name, .rollover span, .read-more, .read-more svg,
  .spotlight__icon img, .splide__arrow {
    transition: all .3s var(--easeSmall);
  }
}

/* ---------- utilities ---------- */
.container {
  margin: 0 auto;
  max-width: calc(var(--container-maxWidth) + var(--container-pad) * 2);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  width: 100%;
}
.visual-hide, .skip-main {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-main:focus {
  background: #000; color: #fff; clip-path: none; width: auto; height: auto;
  left: 50%; transform: translateX(-50%); padding: .5em 1em; z-index: 999;
}
.text-center { text-align: center; }
.mt-xs { margin-top: calc(var(--vpad) / 4); } .mb-xs { margin-bottom: calc(var(--vpad) / 4); }
.mt-sm { margin-top: calc(var(--vpad) / 2); } .mb-sm { margin-bottom: calc(var(--vpad) / 2); }
.mt-md { margin-top: var(--vpad); }           .mb-md { margin-bottom: var(--vpad); }
.mt-lg { margin-top: calc(var(--vpad) * 2); } .mb-lg { margin-bottom: calc(var(--vpad) * 2); }
.pt-sm { padding-top: calc(var(--vpad) / 2); } .pb-sm { padding-bottom: calc(var(--vpad) / 2); }
.pt-md { padding-top: var(--vpad); }           .pb-md { padding-bottom: var(--vpad); }

/* ---------- strip layout system ---------- */
.strip { position: relative; }
.strip--normal  { --container-maxWidth: 75rem; }
.strip--narrow  { --container-maxWidth: 50rem; }
.strip--xnarrow { --container-maxWidth: 33.3333rem; }
.strip--wide .container { max-width: none; padding-left: 0; padding-right: 0; }

.strip__title2, .strip__title4, .footer__contacts {
  font-family: "Playfair", serif;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.strip__title2 {
  font-size: clamp(calc(var(--titleSize) / 1.5), 4.2vw, var(--titleSize));
  margin-bottom: calc(var(--vpad) / 4);
}
.strip__title4 {
  font-size: clamp(calc(var(--titleSize) / 2.6), 2.2vw, calc(var(--titleSize) / 2.15));
  margin-bottom: calc(var(--vpad) / 4);
}
.strip__pretitle { font-size: .85em; font-weight: 500; margin-bottom: .25em; }
.strip__title2 + .text-decorated, .strip__title2 + p { margin-top: calc(var(--vpad) / 3); }
.strip__image { margin: 0 auto; }
.strip__image img { width: 100%; }
/* square-ish photos in the feature slot: hold at a sane width, do not stretch */
.strip__image.feature-square { max-width: min(100%, 44rem); }

/* ---------- loading screen ---------- */
.loading-screen {
  background: var(--colBg);
  position: fixed; inset: 0; z-index: 9999;
}
.loading-screen.off, .no-js .loading-screen { opacity: 0; visibility: hidden; }
.loading-screen__inner {
  left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);
}
.loader { position: relative; width: 8px; height: 8px; }
.loader::before, .loader::after {
  border-radius: 50%; content: ""; display: block; width: 8px; height: 8px;
  position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -4px;
}
/* two counter-rotating dotted rings, drawn with box-shadow dots */
.loader::after {
  animation: loader-spin 1.8s linear infinite reverse;
  box-shadow:
    20px 0 0 0 var(--colContrasto), 12.47px 15.64px 0 0 var(--colContrasto),
    -4.45px 19.5px 0 0 var(--colContrasto), -18.02px 8.68px 0 0 var(--colContrasto),
    -18.02px -8.68px 0 0 var(--colContrasto), -4.45px -19.5px 0 0 var(--colContrasto),
    12.47px -15.64px 0 0 var(--colContrasto);
}
.loader::before {
  animation: loader-spin 2s linear infinite;
  box-shadow:
    35px 0 0 0 var(--colContrasto), 21.82px 27.36px 0 0 var(--colContrasto),
    -7.79px 34.12px 0 0 var(--colContrasto), -31.53px 15.19px 0 0 var(--colContrasto),
    -31.53px -15.19px 0 0 var(--colContrasto), -7.79px -34.12px 0 0 var(--colContrasto),
    21.82px -27.36px 0 0 var(--colContrasto);
}
@keyframes loader-spin { to { transform: rotate(1turn); } }

/* ---------- header ---------- */
.site-header {
  font-size: 1em;
  left: 0; right: 0; top: 0; position: fixed; z-index: 100;
}
.site-header::before {
  background: var(--colBg);
  content: ""; position: absolute; inset: 0; opacity: 0; z-index: -1;
  box-shadow: 0 1px 0 rgba(13, 40, 49, .06);
}
.opaque .site-header::before { opacity: 1; }
.header__inner {
  align-items: center; display: flex; justify-content: space-between;
  padding: .75rem var(--container-pad);
  position: relative; z-index: 6;
}
.header__tools, .header__switcher { min-width: 20%; }
.header__switcher { display: flex; justify-content: flex-end; }
.header__logo { position: relative; z-index: 101; }
/* The wordmark is inline SVG using currentColor, so the scroll-state swap
   is a colour change rather than two images. */
.wordmark { display: block; width: 100%; height: auto; }
.header__logo a { display: block; width: 108px; color: var(--colChalk); }
@media screen and (min-width: 36rem) { .header__logo a { width: 150px; } }
.opaque:not(.m-open) .header__logo a { color: var(--colInk); }
.m-open .header__logo a { color: var(--colChalk); }
.header__logo a:hover { color: var(--colSage); }

/* burger */
.burger {
  align-items: center; display: flex; justify-content: center;
  pointer-events: all; position: relative; z-index: 1;
}
.burger__lines {
  display: block; margin: 8px 0; position: relative; width: 2em; user-select: none;
}
.burger__lines u, .burger__lines::before, .burger__lines::after {
  background-color: var(--colBurger);
  border-radius: 1px; display: block; height: 2px; width: 100%;
  transform-origin: 50% 50%;
  transition: background-color .3s var(--easeSmall), transform .3s var(--easeSmall), opacity .3s var(--easeSmall);
}
.burger__lines u { background: var(--colBurger); position: relative; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; }
.burger__lines::before { top: -8px; }
.burger__lines::after { top: 8px; }
.opaque:not(.m-open) .burger__lines u,
.opaque:not(.m-open) .burger__lines::before,
.opaque:not(.m-open) .burger__lines::after { background-color: var(--colPrimario); }
.is-mouse body:not(.m-open) .burger:hover .burger__lines::before { transform: translate3d(0, 8px, 0); }
.is-mouse body:not(.m-open) .burger:hover .burger__lines::after { transform: translate3d(0, -8px, 0); }
.m-open .burger__lines { transform: rotate(-45deg); }
.m-open .burger__lines u { opacity: 0; }
.m-open .burger__lines::before { transform: translate3d(0, 8px, 0); background-color: var(--colBianco); }
.m-open .burger__lines::after { transform: translate3d(0, -8px, 0) rotate(90deg); background-color: var(--colBianco); }

/* ---------- fullscreen menu ---------- */
.menu-overlay {
  align-items: center;
  background: var(--colPrimario);
  color: var(--colBianco);
  display: flex; flex-flow: column nowrap; justify-content: center;
  inset: 0; position: fixed; z-index: 5;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale3d(.8, .8, 1);
  transition: all .6s var(--easeBig);
  padding: var(--vpad);
  padding-top: calc(var(--header-height) * 1px + var(--vpad) / 2);
  text-align: center; text-transform: uppercase;
}
@media screen and (min-width: 50rem) { .menu-overlay { text-align: unset; } }
.m-open .menu-overlay { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.menu__bg { inset: 0; position: absolute; z-index: 0; pointer-events: none; }
.menu__bg img {
  filter: grayscale(1);
  height: 100%; width: 100%; object-fit: cover;
  inset: 0; position: absolute;
  opacity: 0; transition: opacity .3s var(--easeSmall);
}
.menu__bg img.on { opacity: .5; }
.menu__row {
  display: grid; gap: var(--vpad); margin: 0 auto; max-width: 75rem;
  position: relative; width: 100%; z-index: 1;
}
@media screen and (min-width: 50rem) { .menu__row { grid-template-columns: 2fr 1fr; align-items: center; } }
.menu__row ul { display: grid; gap: .5em; }
.menu-overlay a { color: inherit; display: inline-block; line-height: 1.2; text-decoration: none; }
.is-mouse .menu-overlay a:hover { color: var(--colContrasto); }
.menu__primary { font-family: "Playfair", serif; font-size: clamp(1.6em, 4.5vw, 3.8em); }
.menu__secondary { font-family: "Playfair", serif; font-size: clamp(1.4em, 2.5vw, 2.5em); }
.menu__secondary ul + ul { margin-top: .5em; }
.menu__socials { font-size: 1.2em; margin-top: var(--vpad); }
.menu__socials a { display: block; }

/* dual-span rollover (socials, footer links) */
.rollover {
  display: inline-grid; grid-template-areas: "main";
  overflow: hidden; text-decoration: none;
}
.rollover span {
  grid-area: main; display: block; white-space: nowrap;
  transition: all .3s var(--easeSmall);
}
.rollover span + span { opacity: 0; transform: translate3d(0, -100%, 0); }
.rollover:hover span { opacity: 0; transform: translate3d(0, 100%, 0); }
.rollover:hover span + span { opacity: 1; transform: none; }

/* ---------- banner ---------- */
.banner {
  --colDots: #fff;
  background: var(--colPrimarioScuro);
  overflow: hidden; position: relative;
}
.banner__slider, .banner__slide { height: 100dvh; }
.banner__slide { overflow: hidden; position: relative; }
.banner__media { display: block; height: 100%; }
.banner__media img, .banner__media video {
  height: 130%; width: 100%; left: 0; top: -15%; position: absolute;
  object-fit: cover; max-width: none;
}
.banner__gradient {
  background-image: linear-gradient(0deg, var(--colBg) 5%, transparent 100%);
  bottom: 0; left: 0; right: 0; height: 50%;
  pointer-events: none; position: absolute; z-index: 5;
  transform: translate3d(0, 100%, 0); /* scrubbed up by JS on scroll */
}

/* ---------- splide chrome ---------- */
.splide__pagination {
  bottom: calc(var(--vpad) / 2); left: 50%; position: absolute;
  transform: translateX(-50%); z-index: 10;
  display: flex; gap: .6em; padding: 0;
}
.splide__pagination li { display: flex; }
.splide__pagination__page {
  background: var(--colDots, var(--colGrigioMedio));
  border-radius: 50%; height: 8px; width: 8px; opacity: .5; padding: 0;
  transition: opacity .3s var(--easeSmall), transform .3s var(--easeSmall);
}
.splide__pagination__page.is-active { opacity: 1; transform: scale(1.3); }
.splide-arrows--below { display: flex; flex-direction: column; }
.splide-arrows--below .splide__track { order: 1; }
.splide-arrows--below .splide__arrows {
  display: flex; gap: 1rem; justify-content: center; margin-top: calc(var(--vpad) / 2);
  order: 2;
}
.splide__arrow {
  align-items: center; color: var(--colContrasto); display: inline-flex;
  height: 2.4em; width: 2.4em; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%;
}
.splide__arrow svg { fill: currentColor; height: 1em; width: 1em; }
.splide__arrow--prev svg { transform: scaleX(-1); }
.splide__arrow:hover { background: var(--colContrasto); color: var(--colPrimario); }
.splide__arrow[disabled] { opacity: .2; pointer-events: none; }

/* full-bleed crossfade slider */
.hero-strip__slider { width: 100%; }
.hero-strip__figure { position: relative; }
.hero-strip__figure { height: min(80vh, 56.25vw); }
.hero-strip__figure img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- featured projects showcase ---------- */
.showcase { display: grid; }
@media screen and (min-width: 50rem) {
  .showcase { grid-template-columns: minmax(24rem, 2fr) 3fr; min-height: 100vh; }
}
.showcase__panel {
  background: var(--colPrimario); color: var(--colBianco);
  display: flex; flex-direction: column;
  padding: var(--vpad) var(--container-pad) calc(var(--vpad) / 2);
}
@media screen and (min-width: 50rem) {
  .showcase__panel { padding: var(--vpad) calc(var(--vpad) / 1.5) var(--vpad) max(var(--container-pad), calc(50vw - 37.5rem)); }
}
.showcase__panel .strip__title2 { margin-bottom: calc(var(--vpad) / 2); }
.showcase__menu {
  display: flex; gap: 1em; overflow: auto; padding-bottom: .5em;
}
@media screen and (min-width: 50rem) {
  .showcase__menu { display: block; overflow: visible; padding-bottom: 0; }
}
.showcase__menu a {
  align-items: center; color: inherit; display: flex; gap: 1em;
  opacity: .7; padding: .75em 0; text-decoration: none;
  text-transform: uppercase; white-space: nowrap;
}
@media screen and (min-width: 50rem) {
  .showcase__menu a { border-top: 1px solid; border-bottom: 1px solid; white-space: normal; }
  .showcase__menu li + li a { border-top: 0; }
}
.showcase__menu a.active, .showcase__menu a:hover { opacity: 1; }
.showcase__name { transition: transform .3s var(--easeSmall); }
.showcase__meta { display: none; margin-left: auto; font-size: .85em; opacity: .8; }
@media screen and (min-width: 50rem) { .showcase__meta { display: block; } }
.showcase__footer { display: none; margin-top: auto; padding-top: 1em; }
@media screen and (min-width: 50rem) { .showcase__footer { display: block; } }
.showcase__panel .read-more { color: var(--colBianco); }
.showcase__panel .read-more:hover { color: var(--colContrasto); }
.showcase__stage { position: relative; }
.showcase__figures { display: grid; grid-template-areas: "main"; height: 100%; }
.showcase__figure {
  grid-area: main; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--easeSmall);
}
.showcase__figure.active { opacity: 1; pointer-events: all; }
.showcase__figure a { display: flex; height: 100%; }
.showcase__figure img { height: 100%; width: 100%; object-fit: cover; max-width: none; }
.showcase__mobile-footer { padding: calc(var(--vpad) / 2) var(--container-pad) 0; text-align: center; }
@media screen and (min-width: 50rem) { .showcase__mobile-footer { display: none; } }

/* ---------- awards ---------- */
.award-slider .splide__slide { padding: 0 .5em; }
.award-card__figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.award-card__text { padding-top: 1em; }
.award-card__text p { margin: 0; }

/* ---------- spotlight (press band) ---------- */
.band-grey { background: var(--colGrigioLeggero); }
.spotlight__item { padding-right: 1em; }
.spotlight__link {
  color: inherit; display: flex; flex-direction: column; gap: 1em; height: 100%;
  text-decoration: none;
}
.spotlight__link:hover { color: inherit; }
.spotlight__icon img { aspect-ratio: 3 / 4; filter: grayscale(1); object-fit: cover; width: 100%; }
.spotlight__link:hover .spotlight__icon img { filter: none; }
.spotlight__footer { margin-top: auto; padding-top: .5em; }

/* ---------- counters ---------- */
.counters {
  display: flex; flex-flow: row wrap; gap: calc(var(--vpad) / 2); justify-content: center;
}
.counters__item { flex: 1 1 18em; max-width: 28em; }
.counters__item {
  align-items: center; display: grid; gap: 1em;
  grid-template-columns: minmax(1em, 1fr) 8em;
}
.counters__value {
  font-family: "Playfair", serif;
  font-size: clamp(5.5em, 12vw, 12.5em);
  font-weight: 400; line-height: 1.1; text-align: right;
}
.counters__label { text-transform: uppercase; font-size: .95em; }

/* ---------- read-more link ---------- */
.read-more {
  align-items: center; cursor: pointer; display: inline-flex; flex-flow: row nowrap;
  gap: .6em; line-height: 1.2; padding-bottom: .2em;
  position: relative; text-decoration: none; text-transform: uppercase;
  color: inherit;
}
.read-more::before {
  border-bottom: 1px solid; content: ""; left: 0; position: absolute; top: 100%; width: 100%;
}
.read-more svg {
  height: .8em; width: .8em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
.read-more:hover { color: var(--colContrasto); }
.read-more:hover svg { transform: rotate(45deg); }

/* ---------- footer ---------- */
.site-footer { margin-top: auto; }
.footer__contacts {
  display: inline-block;
  font-size: clamp(2.2em, 9vw, calc(var(--titleSize) * 2));
  margin-bottom: calc(var(--vpad) / 2);
}
.footer__intro { text-align: center; }
@media screen and (min-width: 50rem) { .footer__intro { text-align: left; } }
.footer__grid { display: grid; gap: var(--vpad); text-align: center; }
@media screen and (min-width: 50rem) {
  .footer__grid { grid-template-columns: 20% 20% 20% minmax(1em, 1fr); text-align: unset; }
}
.footer__shortcuts, .footer__socials { text-transform: uppercase; }
@media screen and (min-width: 50rem) { .footer__shortcuts, .footer__socials { font-size: 1.2em; } }
.footer__address a { text-decoration: none; }
.footer__group { text-align: center; }
@media screen and (min-width: 50rem) { .footer__group { text-align: right; } }
.footer__group img { width: 8em; display: inline-block; }
.footer__bottom { font-size: .8em; line-height: 1.2; padding: calc(var(--vpad) / 2) 0; }
.footer__bar {
  align-items: flex-end; display: flex; flex-wrap: wrap; gap: var(--vpad);
  justify-content: space-between;
}
@media screen and (min-width: 50rem) { .footer__bar { flex-wrap: nowrap; } }
.footer__menu ul { display: flex; gap: .5em; line-height: 1.2; }
.footer__menu li { border-left: 1px solid; padding-left: .5em; }
.footer__menu li:first-child { border: 0; padding-left: 0; }
.footer__menu a, .footer__credits a { text-decoration: none; }
.site-footer .rollover span + span { color: var(--colContrastoScuro); }

/* ---------- scroll reveals ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  [data-reveal] { transition: opacity .6s var(--easeBig), transform .6s var(--easeBig); }
  [data-reveal].waiting { opacity: 0; }
  [data-reveal="bottom"].waiting { transform: translate3d(0, 5vh, 0); }
  [data-reveal="top"].waiting { transform: translate3d(0, -5vh, 0); }
  [data-reveal="left"].waiting { transform: translate3d(-5vh, 0, 0); }
  [data-reveal="right"].waiting { transform: translate3d(5vh, 0, 0); }
}

/* SplitText helpers */
.js-main-title .line { overflow: hidden; }

/* static screenshot mode: every element rests in its final state */
.static-mode *, .static-mode *::before, .static-mode *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Callaghan Decorators — components beyond the base template
   ========================================================================== */

/* ---------- header phone ---------- */
.header__phone {
  color: inherit; font-size: .85em; letter-spacing: .06em;
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
  color: var(--colChalk);
}
.opaque:not(.m-open) .header__phone { color: var(--colInk); }
.header__phone:hover { color: var(--colSage); }
@media screen and (max-width: 36rem) { .header__phone { display: none; } }

/* ---------- hero wordmark + tagline ---------- */
/* scrim so the chalk wordmark reads over any hero photo, light or dark */
.banner__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(20, 19, 17, .58), rgba(20, 19, 17, .30) 45%, transparent 72%),
    linear-gradient(180deg, rgba(20, 19, 17, .34), rgba(20, 19, 17, .12) 30%, rgba(20, 19, 17, .28));
}
.banner__text {
  left: 0; right: 0; top: 50%; position: absolute; z-index: 5;
  transform: translate3d(0, -50%, 0);
  color: var(--colChalk); text-align: center;
  padding: 0 var(--container-pad);
}
.banner__wordmark {
  display: block; margin: 0 auto;
  width: min(78vw, 34rem); height: auto;
}
.banner__tagline {
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  letter-spacing: .16em; margin-top: 1.6em;
  opacity: .85; text-transform: uppercase;
}

/* ---------- lede paragraphs ---------- */
.lede {
  font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  line-height: 1.85;
}

/* ---------- testimonial band ---------- */
.rating-line {
  align-items: center; display: flex; gap: .6em; justify-content: center;
  letter-spacing: .12em; margin-bottom: 1.4em; text-transform: uppercase;
}
.stars { color: var(--colSageDeep); letter-spacing: .12em; }
.quote { margin: 0; }
.quote p {
  font-family: "Playfair", serif;
  font-size: clamp(1.35rem, 3.6vw, 2.15rem);
  line-height: 1.35; text-wrap: balance;
}
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }
.quote__by {
  font-size: .82rem; letter-spacing: .14em; margin-top: 1.6em;
  color: var(--colGrigioScuro); text-transform: uppercase;
}

/* ---------- call to action ---------- */
.cta {
  background: var(--colInk); color: var(--colChalk);
  padding: calc(var(--vpad) * 1.5) 0;
}
.cta__inner { text-align: center; }
.cta__sub { margin-top: .6em; opacity: .82; }
.cta__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: calc(var(--vpad) / 1.5);
}
.button {
  border: 1px solid var(--colChalk);
  color: var(--colChalk); display: inline-block;
  font-size: .92rem; letter-spacing: .12em;
  padding: 1em 2.2em; text-decoration: none; text-transform: uppercase;
  transition: background .3s var(--easeSmall), color .3s var(--easeSmall),
              border-color .3s var(--easeSmall);
}
.button:hover { background: var(--colChalk); border-color: var(--colChalk); color: var(--colInk); }
.button--ghost { border-color: rgba(250, 248, 244, .4); }
.button--ghost:hover { background: var(--colSage); border-color: var(--colSage); color: var(--colInk); }

/* ---------- footer additions ---------- */
.footer__contacts { line-height: 1.05; }
.footer__hours .muted { color: var(--colGrigioScuro); }
.footer__wordmark { color: var(--colInk); margin-left: auto; width: 11em; }
@media screen and (max-width: 50rem) { .footer__wordmark { margin: 0 auto; } }
.footer__address a { text-decoration: none; }
.footer__address a:hover { color: var(--colSage); }

/* showcase stage images are plain <img> here (no anchor wrapper) */
.showcase__figure img { height: 100%; width: 100%; object-fit: cover; max-width: none; }

/* ==========================================================================
   Scroll-effect support
   ========================================================================== */

/* clip-path reveal frames need their own stacking/overflow context */
.js-image-anime { overflow: hidden; will-change: clip-path; }
.js-image-anime img, .js-image-anime video { will-change: transform; }

/* parallax frames clip their drifting child */
.parallax { overflow: hidden; }

/* rounded reveal */
.js-image-rounded figure, .js-image-rounded .strip__image { overflow: hidden; }

/* SplitText mask lines */
.split-line { overflow: hidden; }

/* ---------- marquee ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  font-family: "Playfair", serif;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  gap: 1.2em;
  padding-right: 1.2em;
}
.marquee__track > span { display: block; }
.marquee__track .sep { color: var(--colSage); font-size: .6em; }
.marquee.activated .marquee__track { animation: marquee-run 26s linear infinite; }
.marquee.activated:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-run { to { transform: translate3d(-100%, 0, 0); } }

.marquee-band {
  border-bottom: 1px solid var(--colStone);
  border-top: 1px solid var(--colStone);
  padding: calc(var(--vpad) / 1.5) 0;
}

/* ---------- splide arrow icon slide on hover ---------- */
.splide__arrow { position: relative; overflow: hidden; }
.splide__arrow svg { transition: transform .4s var(--easeBig); }
.splide__arrow--next:hover svg { animation: arrow-run-next .7s forwards; }
.splide__arrow--prev:hover svg { animation: arrow-run-prev .7s forwards; }
@keyframes arrow-run-next {
  0%   { transform: translate3d(0, 0, 0); opacity: 1; }
  45%  { transform: translate3d(220%, 0, 0); opacity: 0; }
  55%  { transform: translate3d(-220%, 0, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes arrow-run-prev {
  0%   { transform: scaleX(-1) translate3d(0, 0, 0); opacity: 1; }
  45%  { transform: scaleX(-1) translate3d(220%, 0, 0); opacity: 0; }
  55%  { transform: scaleX(-1) translate3d(-220%, 0, 0); opacity: 0; }
  100% { transform: scaleX(-1) translate3d(0, 0, 0); opacity: 1; }
}

/* ---------- footer title rollover (dual span, like the socials) ---------- */
.footer__contacts .roll {
  display: block; overflow: hidden; padding-bottom: .1em; position: relative;
}
.footer__contacts .roll span { display: block; transition: all .45s var(--easeBig); }
.footer__contacts .roll span + span {
  height: 100%; left: 0; top: 0; position: absolute; width: 100%;
  opacity: 0; pointer-events: none; transform: translate3d(0, -100%, 0);
}
.site-footer:hover .footer__contacts .roll span { opacity: 0; transform: translate3d(0, 100%, 0); }
.site-footer:hover .footer__contacts .roll span + span { opacity: 1; transform: none; }

/* zoom-out needs a solid backdrop while pinned */
.js-scroll-zoomout { background: var(--colBg); }

/* ==========================================================================
   Mobile / narrow-screen pass
   ========================================================================== */

/* Services list becomes a proper stacked list rather than a strip that runs
   off the side of the screen. */
@media screen and (max-width: 50rem) {
  .showcase__menu { display: block; overflow: visible; padding-bottom: 0; }
  .showcase__menu a {
    align-items: flex-start; border-top: 1px solid; flex-direction: column;
    gap: .1em; padding: .85em 0; white-space: normal;
  }
  .showcase__menu li:last-child a { border-bottom: 1px solid; }
  .showcase__meta { display: block; font-size: .76em; margin-left: 0; opacity: .75; }
  /* keep the call-to-action inside the dark panel, under the list, rather
     than orphaned on the page background below the image */
  .showcase__footer { display: block; margin-top: calc(var(--vpad) / 2); padding-top: 0; }
  .showcase__mobile-footer { display: none; }
  .showcase__panel { padding-bottom: var(--vpad); }
  /* the horizontal title slide is disorienting on a narrow screen */
  .js-scroll-title [class*="strip__title"] { transform: none !important; }
}

@media screen and (max-width: 36rem) {
  .strip__title2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .strip__title4 { font-size: clamp(1.1rem, 4.6vw, 1.35rem); }
  .lede { font-size: 1rem; line-height: 1.75; }

  .banner__wordmark { width: min(82vw, 20rem); }
  .banner__tagline { font-size: .74rem; letter-spacing: .12em; margin-top: 1.2em; }

  /* counters stay side by side, number over label */
  .counters { flex-flow: row nowrap; gap: .75rem; }
  .counters__item {
    flex: 1 1 0; min-width: 0; max-width: none;
    grid-template-columns: 1fr; gap: .1em; text-align: center;
  }
  .counters__value { font-size: clamp(2.6rem, 15vw, 4.2rem); text-align: center; }
  .counters__label { font-size: .72rem; line-height: 1.3; text-align: center; }

  /* footer keeps two columns rather than one long ribbon */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--vpad) calc(var(--vpad) / 2); text-align: left; }
  .footer__group { grid-column: 1 / -1; text-align: center; }
  .footer__wordmark { margin: 0 auto; width: 9em; }
  .footer__contacts { font-size: clamp(2rem, 11vw, 3rem); }
  .footer__bar { align-items: baseline; flex-direction: row; gap: 1rem; text-align: left; }
  .footer__copy { flex: 1 1 auto; }

  .cta__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .button { text-align: center; padding: 1em 1.2em; }

  .marquee__track { font-size: clamp(1.35rem, 7vw, 2rem); gap: .9em; }
}

/* ==========================================================================
   Enquiry form (sits on the ink call-to-action band)
   ========================================================================== */
.enquiry {
  margin: calc(var(--vpad) / 1.2) auto 0;
  max-width: 34rem;
  text-align: left;
}
.enquiry__row { display: grid; gap: 0 1rem; }
@media screen and (min-width: 30rem) {
  .enquiry__row { grid-template-columns: 1fr 1fr; }
}

.field { margin: 0 0 1.1rem; }
.field label {
  display: block;
  font-size: .74rem;
  letter-spacing: .13em;
  margin-bottom: .5em;
  text-transform: uppercase;
  opacity: .85;
}
.field__opt { opacity: .6; text-transform: none; letter-spacing: .06em; }

.enquiry input,
.enquiry select,
.enquiry textarea {
  background: transparent;
  border: 1px solid rgba(250, 248, 244, .32);
  color: var(--colChalk);
  font-family: inherit;
  font-size: 1rem;
  padding: .85em 1em;
  width: 100%;
  transition: border-color .3s var(--easeSmall), background .3s var(--easeSmall);
}
.enquiry textarea { resize: vertical; min-height: 6em; }
.enquiry input::placeholder,
.enquiry textarea::placeholder { color: rgba(250, 248, 244, .45); }
.enquiry input:hover,
.enquiry select:hover,
.enquiry textarea:hover { border-color: rgba(250, 248, 244, .55); }
.enquiry input:focus,
.enquiry select:focus,
.enquiry textarea:focus {
  background: rgba(250, 248, 244, .05);
  border-color: var(--colSage);
  outline: none;
}

/* native select arrow replaced with one that matches the palette */
.enquiry select {
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--colSage) 50%),
    linear-gradient(135deg, var(--colSage) 50%, transparent 50%);
  background-position: right 1.15em top 55%, right .8em top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6em;
}
.enquiry select option { background: var(--colInk); color: var(--colChalk); }
.enquiry select:invalid { color: rgba(250, 248, 244, .55); }

/* a field the visitor still needs to fill */
.field.is-missing input,
.field.is-missing select { border-color: #c98d7a; }
.field__error {
  color: #e0a695;
  display: block;
  font-size: .74rem;
  letter-spacing: .06em;
  margin-top: .45em;
}

.enquiry__submit { margin: calc(var(--vpad) / 2) 0 0; }
.enquiry__submit .button { width: 100%; }
@media screen and (min-width: 30rem) {
  .enquiry__submit .button { width: auto; min-width: 14em; }
}
.enquiry__note {
  font-size: .85rem;
  margin-top: 1.1rem;
  opacity: .72;
}
.enquiry__note a { text-decoration: none; border-bottom: 1px solid rgba(250, 248, 244, .4); }
.enquiry__note a:hover { color: var(--colSage); border-color: var(--colSage); }

/* confirmation shown in the form's place */
.enquiry__done {
  margin: calc(var(--vpad) / 1.2) auto 0;
  max-width: 34rem;
}
.enquiry__done__title {
  font-family: "Playfair", serif;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.25;
}
.enquiry__done__sub { margin-top: .6em; opacity: .82; }
.enquiry__demo {
  font-size: .74rem;
  letter-spacing: .12em;
  margin-top: 1.6em;
  opacity: .5;
  text-transform: uppercase;
}

/* honeypot: off-screen, not display:none, so bots still fill it */
.field--hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* send failure notice under the button */
.enquiry__fail { color: #e0a695; font-size: .9rem; margin-top: 1rem; }