:root {
  --paper: #ece7de;
  --paper-soft: #f3efe8;
  --ink: #191a17;
  --ink-soft: #5c5b53;
  --deep: #15211e;
  --sea: #243d3a;
  --line: rgba(25, 26, 23, 0.18);
  --line-light: rgba(255,255,255,.28);
  --white: #f7f4ed;
  --serif: "Italiana", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(22px, 4.6vw, 76px);
  --section: clamp(92px, 13vw, 190px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input, select, textarea { font: inherit; }
::selection { background: #263d38; color: #fff; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
}

.page-progress {
  position: fixed;
  left: 0; top: 0;
  height: 2px; width: 100%;
  z-index: 180;
  pointer-events: none;
}
.page-progress span { display:block; height:100%; width:100%; background: var(--white); transform-origin:left; transform:scaleX(0); }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 150;
  height: 92px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: height .45s ease, background .45s ease, color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
.site-header.scrolled {
  height: 74px;
  background: rgba(236,231,222,.9);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border-color: rgba(25,26,23,.1);
}
.brand { display: inline-flex; align-items: center; width: fit-content; gap: 13px; }
.brand-mark {
  width: 36px; height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
}
.brand-wording { display: grid; gap: 2px; }
.brand-wording strong { font-size: 12px; letter-spacing: .32em; font-weight: 400; }
.brand-wording small { font-size: 8px; letter-spacing: .29em; font-weight: 300; opacity: .72; }
.desktop-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.desktop-nav a, .header-cta { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.desktop-nav a { position: relative; padding: 10px 0; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px; background:currentColor; transition:right .35s ease; }
.desktop-nav a:hover::after { right:0; }
.header-cta { justify-self: end; display: flex; gap: 12px; align-items: center; }
.header-cta span { font-size: 14px; }
.menu-toggle { display:none; background:none; border:0; width:38px; height:38px; padding:8px; }
.menu-toggle span { display:block; height:1px; background:currentColor; margin:7px 0; transition: transform .3s ease; }

.mobile-menu {
  position: fixed; inset:0;
  background: var(--deep);
  color: var(--white);
  z-index: 140;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu-inner { height:100%; padding: 130px var(--pad) 34px; display:flex; flex-direction:column; }
.mobile-menu a { font-family:var(--serif); font-size:clamp(42px, 10vw, 70px); line-height:1.08; padding: 6px 0; }
.mobile-menu-foot { margin-top:auto; border-top:1px solid var(--line-light); padding-top:18px; display:flex; justify-content:space-between; gap:18px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; opacity:.65; }

.hero {
  min-height: 100svh;
  position: relative;
  color: var(--white);
  overflow: hidden;
  background: #273b37;
}
.hero-media { position:absolute; inset:-5%; transform:translate3d(0,0,0) scale(1.03); will-change:transform; }
.hero-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(.94) brightness(.76); position:relative; z-index:1; }
.hero-fallback { position:absolute; inset:0; background:linear-gradient(150deg,#64736b 0%,#2a3f3b 35%,#1b2f2e 100%); }
.hero-shade { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(12,18,16,.42) 0%,rgba(12,18,16,.06) 34%,rgba(12,18,16,.18) 58%,rgba(10,16,14,.62) 100%), linear-gradient(90deg, rgba(0,0,0,.22), transparent 45%); }
.hero-location { position:absolute; z-index:3; top:50%; right: calc(var(--pad) - 15px); transform:translateY(-50%) rotate(90deg); transform-origin:center; font-size:9px; letter-spacing:.25em; text-transform:uppercase; opacity:.68; }
.hero-copy { position:relative; z-index:4; min-height:100svh; padding: 0 var(--pad) clamp(40px, 6vw, 76px); display:flex; flex-direction:column; justify-content:flex-end; }
.eyebrow { margin:0 0 22px; font-size:9px; letter-spacing:.25em; text-transform:uppercase; font-weight:400; }
.eyebrow.dark { color:var(--ink-soft); }
.hero-kicker { margin-bottom: clamp(18px,2vw,28px); }
h1,h2,h3,p { margin-top:0; }
.hero h1 { font-family:var(--serif); font-weight:400; font-size:clamp(64px, 9.2vw, 158px); line-height:.86; letter-spacing:-.045em; margin:0; max-width:1200px; }
.hero h1 em, .intro h2 em, .principles h2 em, .quote-band em, .dida-world h2 em, .location h2 em, .fullbleed h2 em, .enquire h2 em { font-style:italic; font-weight:400; }
.hero-lower { margin-top: clamp(34px, 5vw, 70px); display:grid; grid-template-columns:minmax(240px,440px) auto; justify-content:space-between; align-items:end; gap:40px; }
.hero-lower p { max-width:440px; font-size:clamp(13px,1.2vw,17px); line-height:1.75; color:rgba(255,255,255,.76); margin:0; }
.text-link { display:inline-flex; align-items:center; gap:26px; padding-bottom:8px; border-bottom:1px solid currentColor; font-size:9px; letter-spacing:.17em; text-transform:uppercase; }
.text-link.light { color:rgba(255,255,255,.88); }
.text-link span { font-size:14px; }
.hero-signature { position:absolute; z-index:4; right:var(--pad); bottom:clamp(38px,5vw,68px); display:flex; align-items:center; gap:12px; font-size:8px; letter-spacing:.12em; opacity:.68; }
.hero-signature i { display:block; width:36px; height:1px; background:currentColor; opacity:.5; }

.section { padding: var(--section) var(--pad); }
.section-tight { margin: 0 var(--pad); }
.section-number { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:clamp(52px,7vw,96px); }
.section-number.light { color:rgba(255,255,255,.54); }

.intro { background:var(--paper); }
.intro-grid { display:grid; grid-template-columns:1.15fr .72fr; gap:clamp(60px,10vw,180px); align-items:start; }
.intro h2, .principles h2, .dida-world h2, .location h2, .enquire h2 { font-family:var(--serif); font-size:clamp(54px,7vw,112px); line-height:.94; letter-spacing:-.035em; font-weight:400; margin:0; }
.intro-copy { padding-top:52px; max-width:520px; }
.intro-copy p { font-size:14px; line-height:1.9; color:var(--ink-soft); }
.intro-copy .lead { font-size:clamp(18px,1.75vw,26px); line-height:1.5; color:var(--ink); margin-bottom:28px; }
.intro-copy .quiet-note { margin-top:38px; padding-top:28px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.02em; }

.editorial-image { position:relative; }
.editorial-frame { position:relative; overflow:hidden; aspect-ratio: 16/9; background: #9a9d94; }
.editorial-frame img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(.95); transition:transform 1.5s cubic-bezier(.2,.7,.2,1); }
.editorial-frame:hover img { transform:scale(1.02); }
.image-caption { position:absolute; left:0; right:0; bottom:0; padding:16px 18px; display:flex; justify-content:space-between; background:linear-gradient(180deg,transparent,rgba(0,0,0,.42)); color:rgba(255,255,255,.82); font-size:8px; letter-spacing:.15em; text-transform:uppercase; }

.principles { padding-bottom: calc(var(--section) * .85); }
.principles-head { max-width:850px; margin-bottom:clamp(70px,10vw,140px); }
.principle-list { border-top:1px solid var(--line); }
.principle { display:grid; grid-template-columns:80px 1fr 1fr; gap:clamp(20px,5vw,90px); align-items:start; padding:32px 0 34px; border-bottom:1px solid var(--line); }
.principle-index { font-family:var(--serif); font-size:18px; }
.principle h3 { font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,44px); margin:0; line-height:1.05; }
.principle p { color:var(--ink-soft); line-height:1.8; font-size:13px; max-width:520px; margin:2px 0 0; }

.gallery { display:grid; grid-template-columns: 1.08fr .72fr; grid-template-rows:auto auto; gap:clamp(22px,4vw,62px); align-items:start; }
.gallery-a { grid-row:1 / span 2; aspect-ratio: .79; overflow:hidden; background:#aaa; }
.gallery-b { aspect-ratio: 1.3; overflow:hidden; background:#aaa; margin-top:12%; }
.gallery-a img, .gallery-b img { width:100%; height:100%; object-fit:cover; filter:saturate(.68); transition:transform 1.3s ease; }
.gallery-a:hover img, .gallery-b:hover img { transform:scale(1.025); }
.gallery-copy { max-width:520px; padding:18px 0 0; }
.gallery-copy h3 { font-family:var(--serif); font-weight:400; font-size:clamp(38px,4.2vw,66px); line-height:1; letter-spacing:-.03em; margin:0 0 28px; }
.gallery-copy p:last-child { font-size:13px; line-height:1.9; color:var(--ink-soft); }

.quote-band { text-align:center; position:relative; padding-top:calc(var(--section)*1.15); padding-bottom:calc(var(--section)*1.15); }
.quote-mark { position:absolute; left:50%; top:clamp(50px,7vw,95px); transform:translateX(-50%); font-family:var(--serif); font-size:96px; opacity:.09; }
.quote-band blockquote { margin:0 auto; font-family:var(--serif); font-size:clamp(50px,7.2vw,112px); line-height:.96; letter-spacing:-.04em; max-width:1250px; }
.quote-source { margin:34px 0 0; font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); }

.dida-world { min-height:920px; background:var(--deep); color:var(--white); display:grid; grid-template-columns:1.05fr .95fr; }
.dida-world-media { min-height:860px; overflow:hidden; background:#314842; }
.dida-world-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.58) contrast(.96) brightness(.72); }
.dida-world-copy { padding:clamp(80px,10vw,150px) var(--pad); display:flex; flex-direction:column; justify-content:center; }
.dida-world h2 { margin-bottom:44px; }
.dida-world-copy > p:not(.eyebrow) { max-width:600px; color:rgba(255,255,255,.64); font-size:13px; line-height:1.9; }
.dida-links { margin-top:40px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.dida-links a { font-size:9px; letter-spacing:.15em; text-transform:uppercase; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.35); display:flex; gap:28px; }

.location-grid { display:grid; grid-template-columns:.82fr 1fr; gap:clamp(70px,11vw,180px); align-items:center; }
.location-copy p:not(.eyebrow) { max-width:560px; color:var(--ink-soft); font-size:13px; line-height:1.9; margin-top:34px; }
.location-copy p + p { margin-top:18px !important; }
.location-card { aspect-ratio:1.08; background:#d6d3c8; padding:26px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.location-card-top, .location-card-bottom { position:relative; z-index:2; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
.location-card-bottom { align-items:end; }
.location-card-bottom strong { font-family:var(--serif); font-size:clamp(32px,4vw,54px); font-weight:400; letter-spacing:-.02em; }
.location-horizon { position:absolute; inset:0; overflow:hidden; }
.sun { position:absolute; width:clamp(90px,13vw,200px); aspect-ratio:1; border-radius:50%; background:#ebe2c4; left:53%; top:18%; transform:translateX(-50%); }
.sea-line { position:absolute; left:0; right:0; top:58%; height:1px; background:rgba(25,26,23,.25); }
.land { position:absolute; bottom:31%; background:#66766d; opacity:.78; filter:blur(.2px); }
.land-1 { left:-7%; width:72%; height:15%; clip-path:polygon(0 68%,18% 55%,30% 61%,44% 37%,60% 56%,72% 35%,88% 54%,100% 70%,100% 100%,0 100%); }
.land-2 { right:-4%; width:48%; height:10%; clip-path:polygon(0 76%,22% 47%,48% 65%,69% 35%,100% 61%,100% 100%,0 100%); background:#809087; }

.fullbleed { height:min(880px,82vw); min-height:560px; position:relative; overflow:hidden; color:var(--white); background:#4d6864; }
.fullbleed img { width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(.95) brightness(.82); }
.fullbleed-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,20,18,.52),rgba(11,20,18,.04) 64%),linear-gradient(180deg,transparent 40%,rgba(11,20,18,.35)); }
.fullbleed-copy { position:absolute; left:var(--pad); bottom:clamp(56px,8vw,120px); }
.fullbleed h2 { font-family:var(--serif); font-size:clamp(70px,10vw,150px); font-weight:400; line-height:.86; letter-spacing:-.045em; margin:0; }

.enquire { background:var(--paper-soft); }
.enquire-grid { display:grid; grid-template-columns:.85fr 1fr; gap:clamp(70px,12vw,190px); align-items:start; }
.enquire-copy p:not(.eyebrow,.microcopy) { color:var(--ink-soft); line-height:1.85; max-width:520px; margin-top:36px; font-size:13px; }
.microcopy { margin-top:26px; font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-soft); }
.enquiry-form { border-top:1px solid var(--line); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.enquiry-form label { display:block; position:relative; border-bottom:1px solid var(--line); padding:24px 0 12px; }
.enquiry-form label > span { display:block; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.enquiry-form label small { font-size:7px; opacity:.6; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width:100%; border:0; outline:0; background:transparent; color:var(--ink); border-radius:0; padding:4px 0; font-family:var(--serif); font-size:22px; font-weight:400; resize:vertical; }
.enquiry-form select { appearance:none; cursor:pointer; }
.consent { display:flex !important; gap:12px; align-items:center; border-bottom:0 !important; padding-top:20px !important; }
.consent input { width:14px; height:14px; accent-color:var(--deep); }
.consent span { margin:0 !important; font-size:8px !important; line-height:1.4; }
.submit-button { margin-top:26px; width:100%; border:1px solid var(--ink); background:transparent; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:background .35s ease,color .35s ease; }
.submit-button span { font-size:9px; text-transform:uppercase; letter-spacing:.18em; }
.submit-button b { font-weight:300; }
.submit-button:hover { background:var(--ink); color:var(--white); }
.form-status { min-height:20px; margin-top:14px; font-size:9px; letter-spacing:.06em; color:var(--ink-soft); }

.footer { background:#111714; color:rgba(255,255,255,.8); padding:clamp(70px,9vw,130px) var(--pad) 28px; }
.footer-top { display:grid; grid-template-columns:1fr 1fr; align-items:end; padding-bottom:clamp(70px,8vw,120px); }
.footer-brand { color:var(--white); }
.footer-top > p { font-family:var(--serif); font-size:clamp(28px,3vw,48px); max-width:520px; line-height:1.18; margin:0; justify-self:end; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:20px; display:flex; justify-content:space-between; gap:30px; font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
.footer-bottom > div { display:flex; gap:28px; }
.footer-meta { opacity:.58; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-image { opacity:0; transform:translateY(28px); clip-path:inset(0 0 13% 0); transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.2,.7,.2,1),clip-path 1.2s cubic-bezier(.2,.7,.2,1); }
.reveal-image.visible { opacity:1; transform:none; clip-path:inset(0 0 0 0); }

@media (max-width: 1020px) {
  .site-header { grid-template-columns:1fr auto; }
  .desktop-nav, .header-cta { display:none; }
  .menu-toggle { display:block; color:inherit; justify-self:end; }
  .intro-grid, .location-grid, .enquire-grid { grid-template-columns:1fr; gap:60px; }
  .intro-copy { padding-top:0; max-width:640px; }
  .principle { grid-template-columns:50px 1fr; }
  .principle p { grid-column:2; }
  .gallery { grid-template-columns:1fr 1fr; }
  .gallery-a { grid-row:auto; }
  .gallery-copy { grid-column:1 / -1; padding-top:16px; }
  .dida-world { grid-template-columns:1fr; }
  .dida-world-media { min-height:64vw; max-height:720px; }
  .dida-world-copy { padding-top:90px; padding-bottom:100px; }
  .location-card { width:min(760px,100%); }
}

@media (max-width: 700px) {
  :root { --pad: 20px; --section: 92px; }
  .grain { opacity:.035; }
  .site-header { height:74px; }
  .site-header.scrolled { height:66px; }
  .brand-mark { width:31px; height:31px; font-size:17px; }
  .brand-wording strong { font-size:10px; }
  .brand-wording small { font-size:7px; }
  .hero-media { inset:0; transform:none !important; }
  .hero-media img { object-position:58% center; }
  .hero-copy { min-height:100svh; padding-bottom:34px; }
  .hero-location, .hero-signature { display:none; }
  .hero h1 { font-size:clamp(58px,19vw,92px); line-height:.89; }
  .hero-lower { grid-template-columns:1fr; gap:24px; margin-top:34px; }
  .hero-lower p { font-size:12px; line-height:1.65; max-width:340px; }
  .hero-lower .text-link { width:max-content; }
  .section-number { margin-bottom:44px; }
  .intro h2, .principles h2, .dida-world h2, .location h2, .enquire h2 { font-size:clamp(49px,14vw,74px); }
  .intro-copy .lead { font-size:18px; }
  .editorial-frame { aspect-ratio:4/5; }
  .image-caption { gap:16px; }
  .image-caption span:last-child { display:none; }
  .principles-head { margin-bottom:62px; }
  .principle { grid-template-columns:32px 1fr; gap:16px; padding:24px 0; }
  .principle-index { font-size:14px; }
  .principle h3 { font-size:31px; }
  .principle p { font-size:12px; }
  .gallery { grid-template-columns:1fr; gap:22px; }
  .gallery-a { aspect-ratio:.82; }
  .gallery-b { aspect-ratio:1.1; margin:0 0 18px 18%; }
  .gallery-copy { grid-column:auto; }
  .quote-band blockquote { font-size:clamp(44px,13vw,70px); }
  .dida-world { min-height:0; }
  .dida-world-media { min-height:72vw; }
  .dida-world-copy { padding:80px var(--pad) 90px; }
  .location-card { aspect-ratio:.9; padding:18px; }
  .location-card-bottom { flex-direction:column; align-items:flex-start; gap:4px; }
  .location-card-bottom strong { font-size:36px; }
  .fullbleed { min-height:610px; height:78svh; }
  .fullbleed img { object-position:65% center; }
  .fullbleed h2 { font-size:clamp(64px,20vw,100px); }
  .field-row { grid-template-columns:1fr; gap:0; }
  .footer-top { grid-template-columns:1fr; gap:64px; }
  .footer-top > p { justify-self:start; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .footer-bottom > div { flex-direction:column; gap:10px; }
  .mobile-menu-foot { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal, .reveal-image { opacity:1; transform:none; clip-path:none; }
  .hero-media { transform:none !important; }
}