/* ==========================================================================
   RP Project — Design System
   Palette: warm travertine neutrals + bronze accent + near-black for
   low-light interiors (drawn directly from the studio's own renders).
   Typography: Helvetica Neue / Helvetica / Arial — a neutral, Swiss,
   architectural grotesk used at restrained weights throughout.
   Signature device: the crosshair/registration mark from the RP logo,
   reused as a focus indicator on images and a meta-divider in text —
   an architect's plotting mark, not decoration.
   ========================================================================== */

:root{
  --bg:            #EEE9DF;
  --bg-alt:        #E3DBCB;
  --paper:         #F6F3EC;
  --ink:           #1C1815;
  --ink-soft:      #58514A;
  --ink-faint:     #8B8276;
  --line:          #CBC1AE;
  --line-soft:     #DAD2C1;
  --accent:        #92703F;
  --accent-soft:   #B08F5C;
  --dark:          #14161A;
  --dark-2:        #1D2024;
  --on-dark:       #EEE9DF;
  --on-dark-soft:  #A9A499;

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container: 1440px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --section-pad: clamp(72px, 11vw, 168px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- Type scale ------------------------------------------------------ */
.display-1{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.6vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
}
.display-2{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
}
.display-3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.18;
}
.eyebrow{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow--on-dark{ color: var(--on-dark-soft); }
.body-lg{
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}
.body-md{
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.serif-note{ color: var(--ink-faint); font-size: 0.85rem; }

/* ---- Crosshair signature mark ----------------------------------------- */
.crosshair{
  --s: 18px;
  width: var(--s);
  height: var(--s);
  position: relative;
  flex-shrink: 0;
  opacity: 0.85;
}
.crosshair::before,
.crosshair::after{
  content: "";
  position: absolute;
  background: currentColor;
}
.crosshair::before{ left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.crosshair::after{ top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.crosshair .crosshair__box{
  position: absolute;
  left: 25%; top: 25%; width: 50%; height: 50%;
  border: 1px solid currentColor;
}

/* Only two marks — top-right and bottom-left — so they never compete with
   the logo (top-left) or the scroll indicator (bottom-right). Asymmetric
   on purpose: a drafting registration pair, not a full decorative frame. */
.reg-marks span{
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(255,255,255,.6);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 3;
}
.reg-marks .tr{ top: 104px; right: var(--gutter); border-top-width: 1px; border-right-width: 1px; }
.reg-marks .bl{ bottom: 36px; left: var(--gutter); border-bottom-width: 1px; border-left-width: 1px; }

/* ---- Header ------------------------------------------------------------ */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--gutter);
  transition: background-color .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
}
.site-header.is-solid{
  background: rgba(238,233,223,0.3);
  backdrop-filter: blur(2px);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
body[data-header="solid"] .site-header{
  background: rgba(238,233,223,0.3);
  backdrop-filter: blur(2px);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.logo-link{ display: block; width: 132px; transition: width .5s var(--ease); }
body[data-header="solid"] .logo-link,
.site-header.is-solid .logo-link{ width: 92px; }
.logo-mark{ width: 100%; height: auto; transition: opacity .4s var(--ease); }
body[data-header="solid"] .logo-mark--dark,
.site-header.is-solid .logo-mark--dark{ filter: drop-shadow(0 1px 4px rgba(238,233,223,.95)) drop-shadow(0 0 8px rgba(238,233,223,.7)); }
.logo-mark--dark{ display: none; }
body[data-header="overlay"] .site-header:not(.is-solid) .logo-mark--light{ display: block; }
body[data-header="overlay"] .site-header:not(.is-solid) .logo-mark--dark{ display: none; }
body[data-header="overlay"] .site-header.is-solid .logo-mark--light,
body[data-header="solid"] .logo-mark--light{ display: none; }
body[data-header="overlay"] .site-header.is-solid .logo-mark--dark,
body[data-header="solid"] .logo-mark--dark{ display: block; }

.header-right{ display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }

.main-nav{ display: flex; gap: clamp(20px, 3vw, 44px); align-items: center; }
.main-nav a{
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--on-dark);
  position: relative;
  padding-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
body[data-header="solid"] .main-nav a,
.site-header.is-solid .main-nav a{ color: var(--ink); text-shadow: 0 1px 4px rgba(238,233,223,.95), 0 0 8px rgba(238,233,223,.7); }
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .35s var(--ease);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{ right: 0; }

/* ---- Language switch — deliberately quieter than the main nav, so it
   never reads as a third nav item. ------------------------------------ */
.lang-switch{
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(255,255,255,0.28);
}
body[data-header="solid"] .lang-switch,
.site-header.is-solid .lang-switch{ border-left-color: var(--line); }
.lang-switch span{
  font-size: 0.68rem;
  color: var(--on-dark-soft);
  opacity: .75;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
body[data-header="solid"] .lang-switch span,
.site-header.is-solid .lang-switch span{ color: var(--ink-faint); opacity: 1; text-shadow: 0 1px 4px rgba(238,233,223,.95), 0 0 8px rgba(238,233,223,.7); }
.lang-btn{
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--on-dark-soft);
  opacity: .75;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: opacity .25s var(--ease);
  padding: 2px 1px;
}
.lang-btn:hover{ opacity: 1; }
.lang-btn[aria-current="true"]{
  color: var(--on-dark);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-header="solid"] .lang-btn,
.site-header.is-solid .lang-btn{ color: var(--ink-faint); text-shadow: 0 1px 4px rgba(238,233,223,.95), 0 0 8px rgba(238,233,223,.7); }
body[data-header="solid"] .lang-btn[aria-current="true"],
.site-header.is-solid .lang-btn[aria-current="true"]{ color: var(--ink); }

/* Prevents a flash of the previous language while i18n.js applies the
   stored preference on load. */
html.lang-loading body{ visibility: hidden; }

/* ---- Buttons / links ---------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn--dark{ color: var(--ink); }
.btn--dark:hover{ background: var(--ink); color: var(--paper); }
.btn--light{ color: var(--on-dark); }
.btn--light:hover{ background: var(--on-dark); color: var(--dark); }

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.text-link:hover{ border-color: var(--ink); }

/* ---- Hero ---------------------------------------------------------------- */
.hero{
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: var(--dark);
}
/* .hero__media wraps either the fallback <img> or, later, a <video> —
   both are styled identically so the swap is a markup-only change.
   See README for how to enable the video. */
.hero__media{ position: absolute; inset: 0; }
.hero__media img,
.hero__media video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(1.04);
}
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,9,7,.68) 0%, rgba(10,9,7,.24) 40%, rgba(10,9,7,.03) 60%),
    linear-gradient(100deg, rgba(10,9,7,.4) 0%, rgba(10,9,7,0) 46%),
    linear-gradient(180deg, rgba(8,7,6,.62) 0, rgba(8,7,6,.62) 56px, rgba(8,7,6,0) 150px);
}
.hero__content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(56px, 8vw, 96px);
}
.hero__intro{
  max-width: 460px;
  color: var(--on-dark);
}
.hero__intro .eyebrow{ margin-bottom: 18px; }
.hero__intro p{
  margin-top: 20px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 40ch;
}
.hero__scroll{
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--on-dark-soft);
}
.hero__scroll span{ font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__scroll .crosshair{ animation: pulse-cross 2.8s ease-in-out infinite; }
@keyframes pulse-cross{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } }

/* ---- Section scaffolding -------------------------------------------------- */
section{ position: relative; }
.section-pad{ padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section-head{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  margin-bottom: clamp(40px, 6vw, 84px);
}
.hr{ height: 1px; background: var(--line); border: none; width: 100%; }

/* ---- Studio intro block (home, below hero) --------------------------------- */
.intro-block{
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 860px){
  .intro-block{ grid-template-columns: 1fr; }
}

/* ---- Audience columns ------------------------------------------------------ */
.audience-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 860px){
  .audience-grid{ grid-template-columns: 1fr; }
}
.audience-col{
  padding: clamp(32px, 4vw, 52px) clamp(20px, 2.6vw, 40px);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 320px;
}
.audience-col:last-child{ border-right: none; }
@media (max-width: 860px){
  .audience-col{ border-right: none; min-height: 0; }
}
.audience-col h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
}
.audience-col p{ color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.audience-col__bottom{ margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Reserves consistent vertical space for the "for X" label above the
   See Example link, regardless of whether it wraps to one or two lines
   (English and French wrap differently). Without this, the link's
   position shifts per column since the block is bottom-anchored. */
.audience-col__for{
  color: var(--ink-faint);
  line-height: 1.3;
  min-height: 1.9rem;
  display: flex;
  align-items: flex-end;
}
.audience-col__meta{
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---- Project index rows ---------------------------------------------------- */
.project-row{
  display: block;
  padding: clamp(28px, 4.6vw, 56px) 0;
  border-bottom: 1px solid var(--line);
}
.project-row:first-child{ border-top: 1px solid var(--line); }
.project-row__link{
  display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.project-row:nth-child(even) .project-row__link{ grid-template-columns: 1.5fr 0.9fr; }
.project-row:nth-child(even) .project-row__media{ order: 2; }
.project-row:nth-child(even) .project-row__meta{ order: 1; }
@media (max-width: 860px){
  .project-row__link, .project-row:nth-child(even) .project-row__link{ grid-template-columns: 1fr; }
  .project-row:nth-child(even) .project-row__media,
  .project-row:nth-child(even) .project-row__meta{ order: initial; }
}
.project-row__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-alt);
}
.project-row__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.project-row__link:hover .project-row__media img{ transform: scale(1.045); }
.project-row__mark{
  position: absolute;
  top: 18px; left: 18px;
  color: var(--on-dark);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.project-row__link:hover .project-row__mark{ opacity: .9; transform: translateY(0); }
.project-row__meta{
  max-width: 400px;
}
.project-row__meta .eyebrow{ margin-bottom: 14px; }
.project-row__meta h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 14px;
  max-width: 21ch;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
}
.project-row__meta p{
  color: var(--ink-soft);
  max-width: 42ch;
  margin-bottom: 20px;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
}
.project-row__year{ color: var(--ink-faint); font-size: 0.85rem; letter-spacing: 0.06em; }

/* ---- Project detail --------------------------------------------------------- */
.detail-hero{
  position: relative;
  height: 82vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--dark);
}
.detail-hero img{ width: 100%; height: 100%; object-fit: cover; }
.detail-hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,9,7,.55), rgba(10,9,7,0) 55%),
    linear-gradient(180deg, rgba(8,7,6,.62) 0, rgba(8,7,6,.62) 56px, rgba(8,7,6,0) 150px);
}
.detail-hero__caption{
  position: absolute; left: var(--gutter); bottom: 32px; z-index: 2;
  color: var(--on-dark-soft); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}

.detail-meta{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px){ .detail-meta{ grid-template-columns: 1fr; } }
.detail-meta__facts{ display: flex; flex-direction: column; gap: 18px; }
.fact{ display: flex; gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.fact:last-child{ border-bottom: none; }
.fact dt{ font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); width: 120px; flex-shrink: 0; }
.fact dd{ margin: 0; font-size: 0.98rem; color: var(--ink); }
.fact--award dd{ color: var(--accent); font-weight: 500; }

.gallery{
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 4vw, 40px);
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(56px, 8vw, 100px);
}
.gallery__item{ width: min(1180px, 100%); margin: 0 auto; }
.gallery__item--wide{ width: 100%; }
.gallery__item img{ width: 100%; height: auto; }
.gallery__caption{
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 14px; font-size: 0.8rem; color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.gallery__pair{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(16px, 2.4vw, 28px);
  width: min(1180px, 100%);
  margin: 0 auto;
  align-items: end;
}
@media (max-width: 760px){ .gallery__pair{ grid-template-columns: 1fr; } }

/* ---- Large sectioned galleries (comprehensive project archives) -------------
   Used when a project's full image set is shown grouped by theme (exterior,
   bedrooms, spa, etc.) rather than a hand-picked editorial sequence. Each
   image keeps its own intrinsic aspect ratio, no cropping and no forced
   identical rectangles, the grid just wraps naturally. */
.gallery-section{ width: 100%; }
.gallery-section__title{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.gallery-section__title h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}
.gallery-section__title span{ color: var(--ink-faint); font-size: 0.78rem; letter-spacing: 0.04em; }
.gallery-grid{
  --g-gap: clamp(16px, 2.2vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap);
}
.gallery-grid figure{ margin: 0; }
.gallery-grid img{ width: 100%; height: auto; display: block; }
.gallery-grid .gi-full{ width: 100%; }
.gallery-grid .gi-half{ width: calc(50% - (var(--g-gap) / 2)); }
@media (max-width: 760px){
  .gallery-grid .gi-half{ width: 100%; }
}
.gallery-grid figcaption{
  margin-top: 8px; font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.02em;
}

.detail-next{
  border-top: 1px solid var(--line);
  padding: clamp(48px, 8vw, 100px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.detail-next__label{ display: flex; flex-direction: column; gap: 10px; }
.detail-next a{ display: flex; align-items: center; gap: 18px; }
.detail-next h4{ font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* ---- Dark section (used on contact + footer) --------------------------------- */
.on-dark{ background: var(--dark); color: var(--on-dark); }
.on-dark .body-lg, .on-dark .body-md{ color: var(--on-dark-soft); }
.on-dark .hr{ background: rgba(238,233,223,0.18); }

/* ---- Partners ------------------------------------------------------------ */
.partners{
  padding: clamp(56px, 9vw, 120px) 0;
  border-top: 1px solid var(--line);
}
.partners__title{ text-align: center; margin-bottom: clamp(36px, 6vw, 64px); }
.partners__grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(48px, 9vw, 140px);
}
.partner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.partner img{
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.partner span{ color: var(--ink-faint); }

/* ---- Placeholder visual (used where real project imagery isn't in yet) --- */
.placeholder-visual{
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.placeholder-visual__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}
.placeholder-visual .crosshair{ --s: 30px; color: var(--ink-faint); }
.placeholder-visual__label{
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: 34ch;
  line-height: 1.5;
}
.detail-hero .placeholder-visual{ border: none; }
/* The hero sits behind a light-on-dark header (logo/nav in white until
   scrolled). A plain travertine placeholder there would leave that text
   nearly illegible, so the hero variant goes dark instead — every other
   detail-hero is a photo dark enough for the same white text to read. */
.placeholder-visual--dark{
  background: var(--dark-2);
  border: none;
}
.placeholder-visual--dark .crosshair{ color: var(--on-dark-soft); }
.placeholder-visual--dark .placeholder-visual__label{ color: var(--on-dark-soft); }

/* ---- Contact form ---------------------------------------------------------- */
.contact-form{
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 34px);
  max-width: 640px;
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-field label{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.form-field input,
.form-field textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-dark);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(238,233,223,0.3);
  padding: 8px 2px;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.form-field textarea{ resize: vertical; min-height: 96px; line-height: 1.5; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color: var(--on-dark-soft); opacity: .5; }
.form-field input:focus,
.form-field textarea:focus{ outline: none; border-bottom-color: var(--on-dark); }

.form-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit-row{ display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.form-note{ font-size: 0.8rem; color: var(--on-dark-soft); }

.form-success{
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 28px 0;
  border-top: 1px solid rgba(238,233,223,0.2);
}
.form-success.is-visible{ display: flex; }
.form-success h3{ font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--on-dark); }
.form-success p{ color: var(--on-dark-soft); }
.contact-form.is-hidden{ display: none; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer{
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(56px, 8vw, 96px) 0 32px;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(32px, 5vw, 60px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-top h4{ font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 14ch; }
.footer-col{ display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ color: var(--on-dark-soft); font-size: 0.95rem; transition: color .3s var(--ease); }
.footer-col a:hover{ color: var(--on-dark); }
.footer-bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; border-top: 1px solid rgba(238,233,223,0.14);
  font-size: 0.78rem; color: var(--on-dark-soft); letter-spacing: 0.02em;
}
.footer-bottom__left{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.social-links{ display: flex; align-items: center; gap: 14px; }
.social-links a{ color: var(--on-dark-soft); display: flex; transition: color .3s var(--ease); }
.social-links a:hover{ color: var(--on-dark); }
.social-links svg{ width: 17px; height: 17px; }

/* ---- Reveal-on-scroll ------------------------------------------------------ */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---- Contact page ---------------------------------------------------------- */
.contact-hero{
  padding-top: clamp(150px, 18vw, 220px);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.contact-hero .display-1{ max-width: 16ch; }
.contact-links{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 80px);
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid rgba(238,233,223,0.18);
  border-bottom: 1px solid rgba(238,233,223,0.18);
}
.contact-link-item{ display: flex; flex-direction: column; gap: 10px; }
.contact-links a{ font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 400; }
.contact-links a:hover{ color: var(--accent-soft); }
.contact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 40px);
  padding-top: clamp(48px, 6vw, 72px);
}
@media (max-width: 760px){ .contact-grid{ grid-template-columns: 1fr; } }

/* generic page hero (projects index) */
.page-hero{
  padding-top: clamp(150px, 18vw, 210px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.page-hero .display-1{ max-width: 14ch; }

@media (max-width: 560px){
  .fact dt{ width: 96px; }
}

@media (max-width: 480px){
  .site-header{ padding-left: 18px; padding-right: 18px; }
  .header-right{ gap: 14px; }
  .main-nav{ gap: 14px; }
  .main-nav a{ font-size: 0.7rem; letter-spacing: 0.06em; }
  .lang-switch{ padding-left: 12px; gap: 4px; }
  .lang-btn{ font-size: 0.66rem; }
  .logo-link{ width: 104px; }
  body[data-header="solid"] .logo-link,
  .site-header.is-solid .logo-link{ width: 72px; }
}

@media (max-width: 760px){
  .partners__grid{ gap: 48px; }
}