/* Meridian — elemental / minimal / exclusive.
   One stylesheet, shared by the EN page, the TH page, and the Worker's
   enquiry confirmation. No framework, no build step. */

:root{
  --paper:#F5F2EB;   /* warm bone */
  --ink:#1C1B17;     /* warm near-black */
  --muted:#726B5D;   /* stone-taupe */
  --faint:#DAD4C7;   /* hairlines */
  --accent:#8C4A2F;  /* burnt clay — used sparingly */
  --prose:#39372F;   /* body ink, a touch softer than headings */
  --cream:#F3EFE6;   /* text over imagery */

  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --page:clamp(1.4rem, 5vw, 4rem);
  --measure:62ch;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(0.98rem, 0.55vw + 0.9rem, 1.06rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }
::selection{ background:var(--accent); color:var(--paper); }

/* ---- layout primitives ---- */
.wrap{ padding-inline:var(--page); max-width:1240px; margin-inline:auto; }

.eyebrow{
  font-size:0.68rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  margin:0;
}

/* ---- masthead (base: dark on bone; used on the thank-you page) ---- */
.masthead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap;
  padding-block:1.6rem;
  border-bottom:1px solid var(--faint);
}
.wordmark{
  font-weight:500; font-size:0.9rem;
  letter-spacing:0.3em; text-transform:uppercase; padding-left:0.3em; white-space:nowrap;
}
.masthead nav{
  display:flex; gap:1.4rem; align-items:baseline; flex-wrap:wrap;
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.coords{ font-variant-numeric:tabular-nums; }
.lang a{ color:var(--muted); }
.lang a.on{ color:var(--ink); }
.lang span{ opacity:.4; }

/* masthead variant: overlaid on the hero image */
.masthead--over{
  position:absolute; inset:0 0 auto 0; z-index:2;
  border-bottom:0; color:var(--cream);
}
.masthead--over .wordmark{ color:var(--cream); }
.masthead--over nav{ color:rgba(243,239,230,.82); }
.masthead--over .lang a{ color:rgba(243,239,230,.82); }
.masthead--over .lang a.on{ color:#fff; }

/* ---- full-bleed hero ---- */
.hero-full{
  position:relative; overflow:hidden;
  min-height:clamp(560px, 90vh, 880px);
  display:grid; align-items:end;
  background:#1b1a16; color:var(--cream);
}
.hero-full__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-full__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,
    rgba(16,15,11,.52) 0%, rgba(16,15,11,.12) 24%,
    rgba(16,15,11,.18) 55%, rgba(16,15,11,.74) 100%);
}
.hero-copy{
  position:relative; z-index:2;
  padding-block:clamp(2.5rem,7vh,5rem);
  display:grid; gap:1.4rem;
}
.hero-copy .eyebrow{ color:rgba(243,239,230,.85); }
.hero-copy h1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.4rem, 6vw, 5rem);
  line-height:1.04; letter-spacing:-0.01em;
  max-width:19ch; margin:0; color:#F7F3EA; text-wrap:balance;
}
.hero-copy .sub{ max-width:52ch; color:rgba(243,239,230,.92); font-size:1.05rem; margin:0; }

/* meridian motif: a short graduated vertical line */
.meridian{
  height:clamp(48px, 7vh, 80px); width:1px; background:var(--ink);
  position:relative; margin-top:0.4rem;
}
.meridian::before, .meridian::after{
  content:""; position:absolute; left:-4px; width:9px; height:1px; background:var(--ink);
}
.meridian::before{ top:33%; }
.meridian::after{ top:66%; }
.hero-copy .meridian,
.hero-copy .meridian::before,
.hero-copy .meridian::after{ background:rgba(243,239,230,.85); }

/* ---- section block: left label + content ---- */
.block{
  display:grid; grid-template-columns:1fr; gap:1.4rem 3rem;
  padding-block:clamp(3rem, 7vh, 5.5rem);
  border-top:1px solid var(--faint);
}
@media(min-width:800px){
  .block{ grid-template-columns:12rem minmax(0,1fr); }
  .block > .eyebrow{ padding-top:0.35rem; }
}
.block .lead{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.25;
  margin:0 0 1.2rem; max-width:24ch;
}
.block p{ max-width:var(--measure); margin:0 0 1.1rem; color:var(--prose); }
.block p:last-child{ margin-bottom:0; }

/* ---- rows (services) ---- */
.rows{ display:grid; }
.row{
  display:grid; grid-template-columns:1fr; gap:0.35rem 2rem;
  padding-block:1.35rem; border-top:1px solid var(--faint);
}
.row:first-child{ border-top:0; padding-top:0; }
@media(min-width:640px){
  .row{ grid-template-columns:11rem minmax(0,1fr); align-items:baseline; }
}
.row .term{ font-family:var(--display); font-size:1.5rem; line-height:1.1; }
.row .desc{ color:var(--prose); max-width:52ch; }

/* ---- where: lead image + three-tile collage ---- */
.where{ padding-block:clamp(3rem, 7vh, 5.5rem); border-top:1px solid var(--faint); }
.where > .eyebrow{ margin-bottom:2rem; }
.figure{ position:relative; overflow:hidden; background:#e9e4d8; border-radius:2px; }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.2,.7,.2,1); }
.figure:hover img{ transform:scale(1.045); }
.where-lead .figure{ aspect-ratio:16/7; }
.where-grid{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.where-grid .figure{ aspect-ratio:4/5; }
.cap{ margin-top:0.9rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 1.1rem; }
.cap .name{ font-family:var(--display); font-size:1.6rem; line-height:1; }
.cap .th{ color:var(--muted); font-size:0.78rem; letter-spacing:0.06em; }
.cap .note{ flex-basis:100%; margin:0.25rem 0 0; color:var(--prose); max-width:60ch; }
@media(max-width:760px){
  .where-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .where-lead .figure, .where-grid .figure{ aspect-ratio:4/3; }
}

/* ---- full-bleed image break with the pull-quote ---- */
.break-full{
  position:relative; overflow:hidden;
  min-height:clamp(420px, 64vh, 640px);
  display:grid; place-items:center; text-align:center;
  background:#15140f; color:var(--cream);
}
.break-full img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.break-full .break-scrim{ position:absolute; inset:0; z-index:1; background:rgba(16,15,11,.52); }
.break-full blockquote{
  position:relative; z-index:2; margin:0; padding-inline:var(--page); max-width:24ch;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.8rem, 4.2vw, 3rem); line-height:1.2;
}
.break-full blockquote::before{ content:"\201C"; opacity:.7; }
.break-full blockquote::after{ content:"\201D"; opacity:.7; }

/* ---- enquiry (letter) ---- */
.intro{ max-width:var(--measure); color:var(--muted); margin:0 0 2.2rem; }
form.letter{ display:grid; gap:1.8rem; max-width:40rem; }
.field{ display:grid; gap:0.5rem; }
.field label{ font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea{
  font-family:var(--sans); font-size:1.05rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink);
  padding:0.5rem 0; width:100%; border-radius:0;
}
.field textarea{ resize:vertical; min-height:4.5rem; }
.field input:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--accent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:.6; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
button.send{
  justify-self:start; margin-top:0.4rem;
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--accent);
  padding:0.5rem 0 0.35rem; cursor:pointer;
}
button.send:hover{ color:var(--accent); }
.fineprint{ margin:1.8rem 0 0; font-size:0.8rem; color:var(--muted); max-width:var(--measure); }

/* ---- footer ---- */
footer{
  border-top:1px solid var(--faint); padding-block:2.5rem 3.5rem;
  display:flex; flex-wrap:wrap; gap:0.6rem 2rem; justify-content:space-between;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}

/* ---- reveal on scroll (progressive; safe with JS off) ---- */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 1s ease, transform 1s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .js .reveal, .figure img{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   Added with the multi-page build (nav, inner pages, footer).
   ============================================================ */

/* ---- primary navigation (menu in the masthead) ---- */
.nav{
  display:flex; align-items:baseline; gap:1rem 1.5rem; flex-wrap:wrap;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted);
}
.nav a{ color:var(--muted); padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s; }
.nav a:hover, .nav a.on{ color:var(--ink); border-bottom-color:var(--accent); }
.nav .lang{ display:inline-flex; align-items:baseline; gap:.45rem; }
.nav .lang a{ border-bottom:0; }
.nav .lang a.on{ color:var(--ink); }
.nav .sep{ opacity:.4; }
/* nav overlaid on the hero image */
.masthead--over .nav{ color:rgba(243,239,230,.82); }
.masthead--over .nav a{ color:rgba(243,239,230,.82); }
.masthead--over .nav a:hover, .masthead--over .nav a.on{ color:#fff; border-bottom-color:rgba(243,239,230,.7); }
.masthead--over .nav .lang a.on{ color:#fff; }

/* "see more" link (home → journeys) */
.morelink{ margin-top:2.6rem; }
.morelink a{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--accent); padding-bottom:3px; transition:color .3s; }
.morelink a:hover{ color:var(--ink); }

/* ---- inner page head ---- */
.pagehead{ padding-block:clamp(2.6rem,6vh,4.8rem) clamp(1.6rem,4vh,2.8rem); }
.pagehead h1{ font-family:var(--display); font-weight:300;
  font-size:clamp(2.2rem,5.4vw,4rem); line-height:1.05; letter-spacing:-.01em;
  margin:.7rem 0 0; max-width:20ch; text-wrap:balance; }
.pagehead .sub{ margin:1.4rem 0 0; max-width:58ch; color:var(--prose); font-size:1.08rem; }

/* ---- prose (about / privacy / approach copy) ---- */
.prose{ display:grid; gap:1.2rem 3rem; grid-template-columns:1fr;
  padding-block:clamp(2.4rem,5.5vh,4.4rem); border-top:1px solid var(--faint); }
@media(min-width:800px){
  .prose{ grid-template-columns:12rem minmax(0,1fr); }
  .prose > .eyebrow{ padding-top:.4rem; }
}
.prose .body{ max-width:var(--measure); }
.prose h2{ font-family:var(--display); font-weight:400; font-size:1.55rem; line-height:1.2; margin:0 0 .7rem; }
.prose p{ margin:0 0 1.1rem; color:var(--prose); }
.prose p:last-child{ margin-bottom:0; }
.prose .lead{ font-family:var(--display); font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.3; color:var(--ink); max-width:26ch; margin-bottom:1.3rem; }
.prose .sign{ margin-top:1.6rem; font-family:var(--display); font-size:1.15rem; color:var(--ink); }

/* small key/value list (used for accreditation on About) */
.deflist{ display:grid; gap:.8rem; margin:.4rem 0 0; }
.deflist div{ display:grid; grid-template-columns:1fr; gap:.1rem; padding-block:.7rem; border-top:1px solid var(--faint); }
.deflist div:first-child{ border-top:0; padding-top:0; }
@media(min-width:560px){ .deflist div{ grid-template-columns:13rem minmax(0,1fr); align-items:baseline; } }
.deflist dt, .deflist .k{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.deflist .v{ color:var(--prose); }
.deflist .v b{ font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- approach stages ---- */
.stages{ display:grid; }
.stage{ display:grid; grid-template-columns:1fr; gap:.3rem 2rem; padding-block:1.6rem; border-top:1px solid var(--faint); }
.stage:first-child{ border-top:0; padding-top:0; }
@media(min-width:640px){ .stage{ grid-template-columns:3rem 11rem minmax(0,1fr); align-items:baseline; } }
.stage .no{ font-family:var(--display); font-size:1.2rem; color:var(--accent); }
.stage .term{ font-family:var(--display); font-size:1.45rem; }
.stage .desc{ color:var(--prose); max-width:52ch; }

/* ---- journeys index ---- */
.jlist{ display:grid; gap:clamp(2.6rem,6vh,4.5rem); padding-block:clamp(2rem,5vh,3.5rem); }
.jcard{ display:grid; gap:1.2rem 3rem; }
@media(min-width:820px){
  .jcard{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; }
  .jcard.flip .figure{ order:2; }
}
.jcard .figure{ aspect-ratio:3/2; }
.jcard .k{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.jcard h2{ font-family:var(--display); font-weight:300; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.05; margin:.35rem 0 0; }
.jcard p{ color:var(--prose); max-width:54ch; margin:.8rem 0 0; }
.jcard .days{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.jcard .days span{ font-size:.74rem; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--faint); border-radius:999px; padding:.24rem .8rem; }

/* ---- inner-page enquire CTA ---- */
.cta{ padding-block:clamp(2.8rem,6vh,4.6rem); border-top:1px solid var(--faint); }
.cta h2{ font-family:var(--display); font-weight:300; font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.15; margin:0 0 1.1rem; max-width:22ch; }
.cta .btn{ display:inline-block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--accent); padding:.45rem 0 .35rem; transition:color .3s; }
.cta .btn:hover{ color:var(--accent); }

/* ---- credentials footer ---- */
footer.site{ border-top:1px solid var(--faint); padding-block:3rem 3.4rem;
  display:grid; gap:2.2rem; text-transform:none; letter-spacing:normal; color:var(--muted); }
footer.site .frow{ display:grid; gap:1.8rem 2.4rem; grid-template-columns:1fr; }
@media(min-width:760px){ footer.site .frow{ grid-template-columns:1.5fr 1fr 1fr; } }
footer.site .fmark{ font-family:var(--display); font-size:1.35rem; color:var(--ink); letter-spacing:.02em; }
footer.site .flabel{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; }
footer.site address{ font-style:normal; color:var(--prose); font-size:.84rem; line-height:1.75; }
footer.site .creds{ font-size:.8rem; color:var(--muted); line-height:1.95; font-variant-numeric:tabular-nums; }
footer.site .ftag{ color:var(--prose); font-size:.86rem; max-width:34ch; margin:.5rem 0 0; }
footer.site .fnav{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.1rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
footer.site .fnav a{ color:var(--muted); } footer.site .fnav a:hover{ color:var(--ink); }
footer.site .fbot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem;
  border-top:1px solid var(--faint); padding-top:1.4rem;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
footer.site .fbot .lang a{ color:var(--muted); } footer.site .fbot .lang a.on{ color:var(--ink); }
footer.site .fbot .sep{ opacity:.4; }