/* ==========================================================================
   Verapex Maldives — maison stylesheet
   Restrained luxury: generous whitespace, hairline rules, serif display,
   gold used sparingly as an accent rather than a fill.
   ========================================================================== */

/* Colour scheme (1.13.0). Light by default (html[data-scheme="light"], which
   also stops in-app browsers from force-darkening it). When Customize →
   Verapex Content → Look is set to follow the device (data-scheme="auto"),
   the dark palette below — the Vera app's — applies in dark mode. */
:root{
  color-scheme: light dark;

  --ink:        #14120E;
  --ink-soft:   #4A463C;
  --ink-mute:   #6F695B;   /* 1.13.0: was #857F70 (3.99:1); now 5.46:1 on white for small text */

  --paper:      #FFFFFF;
  --bone:       #FAF7F1;
  --sand:       #F2EDE2;
  --shell:      #E8E0D0;

  --gold:       #A8802C;
  --gold-deep:  #8A6720;

  --rule:       rgba(20,18,14,0.12);
  --rule-soft:  rgba(20,18,14,0.07);

  --on-ink:     #FFFFFF;   /* text on an --ink fill */
  --on-gold:    #FFFFFF;   /* text on a --gold fill */
  --veil-a:     rgba(255,255,255,.90);   /* hero photo wash */
  --veil-b:     rgba(255,255,255,.72);
  --hatch:      rgba(255,255,255,.42);   /* empty image plate texture */
  --plate-line: rgba(168,128,44,.22);
  --shadow:     rgba(20,18,14,.05);
  --ok-bg:#F4F7F3; --ok-line:#CBDBC6; --ok-ink:#395233;
  --err-bg:#FBF3F2; --err-line:#E4C9C6; --err-ink:#7A3830;

  --maxw:       1280px;
  --gutter:     40px;
  --header-h:   96px;

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

  /* Shared spacing rhythm — used by every major block. */
  --inset-x: clamp(0px, 2.4vw, 52px);
  --pad-y:   clamp(104px, 11vw, 176px);
}

*,*::before,*::after{box-sizing:border-box;}

html[data-scheme="light"]{color-scheme: only light;}

/* Dark palette — the Vera app's. */
@media (prefers-color-scheme: dark){
  :root:not([data-scheme="light"]){
    color-scheme: dark;
    --ink:        #F3EEE3;
    --ink-soft:   #D6CFBF;
    --ink-mute:   #A39C8C;
    --paper:      #17150F;
    --bone:       #1D1B15;
    --sand:       #221F18;
    --shell:      #2C2923;
    --gold:       #D8B25C;
    --gold-deep:  #E2BF6E;
    --rule:       rgba(243,238,227,0.16);
    --rule-soft:  rgba(243,238,227,0.08);
    --on-ink:     #17150F;
    --on-gold:    #17150F;
    --veil-a:     rgba(23,21,15,.90);
    --veil-b:     rgba(23,21,15,.74);
    --hatch:      rgba(243,238,227,.05);
    --plate-line: rgba(216,178,92,.26);
    --shadow:     rgba(0,0,0,.35);
    --ok-bg:#1B2419; --ok-line:#34472F; --ok-ink:#B9D3B1;
    --err-bg:#2A1A18; --err-line:#5A322D; --err-ink:#F0BDB6;
  }
}

html{
  background:var(--paper);
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden;}

h1,h2,h3,h4,.display{
  font-family:'Cormorant Garamond', Garamond, Georgia, serif;
  font-weight:500;
  color:var(--ink);
  margin:0;
  letter-spacing:0;
  text-wrap:balance;
}

/* Optical sizing: the larger the type, the tighter it needs to sit. */
h1{letter-spacing:-0.018em; line-height:1.02;}
h2{letter-spacing:-0.012em; line-height:1.12;}
h3{letter-spacing:-0.006em; line-height:1.22;}

p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
ul{margin:0; padding:0; list-style:none;}

:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:1px;}  /* 1.13.0: was a 1px gold hairline */

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 var(--gutter);}

/* Small letterspaced caps — the workhorse label style. */
.label{
  font-size:0.66rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:400;
  line-height:1.6;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--on-ink); padding:14px 22px; font-size:0.8rem;
}
.skip-link:focus{left:16px; top:16px;}

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:120;
  background:var(--paper);
  border-bottom:1px solid var(--rule-soft);
  transition:box-shadow .4s var(--ease);
}
.masthead.is-stuck{box-shadow:0 1px 20px var(--shadow);}

.masthead-inner{
  height:var(--header-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  transition:height .4s var(--ease);
}
.masthead.is-stuck .masthead-inner{height:72px;}

.masthead-logo{justify-self:center; display:block;}

/* Single source of truth for logo size — no competing selectors. */
.masthead-logo img{
  height:38px;
  width:auto;
  transition:height .4s var(--ease);
}
.masthead.is-stuck .masthead-logo img{height:30px;}

.nav-desktop{display:flex; gap:34px; align-items:center;}
.nav-desktop.left{justify-self:start;}
.nav-desktop.right{justify-self:end;}

.nav-desktop a{
  font-size:0.68rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding-bottom:5px;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-desktop a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-desktop a:hover{color:var(--ink);}
.nav-desktop a:hover::after{width:100%;}

.menu-btn{
  display:none;
  justify-self:start;
  background:none; border:0; padding:8px; cursor:pointer;
  width:40px; height:40px;
  align-items:center; justify-content:center;
}
.menu-btn i{
  display:block; position:relative;
  width:22px; height:1px; background:var(--ink);
  transition:background .2s var(--ease);
}
.menu-btn i::before,.menu-btn i::after{
  content:''; position:absolute; left:0; width:22px; height:1px; background:var(--ink);
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.menu-btn i::before{top:-7px;}
.menu-btn i::after{top:7px;}
.menu-btn[aria-expanded="true"] i{background:transparent;}
.menu-btn[aria-expanded="true"] i::before{top:0; transform:rotate(45deg);}
.menu-btn[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg);}

/* Full-screen overlay menu */
.overlay-menu{
  position:fixed; inset:0; z-index:110;
  background:var(--paper);
  padding: calc(var(--header-h) + 40px) var(--gutter) 40px;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.overlay-menu.open{opacity:1; visibility:visible;}
.overlay-menu ul{display:flex; flex-direction:column; gap:6px; max-width:520px; margin:0 auto; width:100%;}
.overlay-menu a{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(1.9rem,7vw,2.6rem);
  color:var(--ink);
  padding:16px 0;
  border-bottom:1px solid var(--rule-soft);
  display:block;
  transition:color .3s var(--ease);
}
.overlay-menu a:hover{color:var(--gold-deep);}
.overlay-foot{
  max-width:520px; margin:48px auto 0; width:100%;
  display:flex; flex-direction:column; gap:10px;
}
.overlay-foot a{font-size:0.92rem; color:var(--ink-soft);}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  min-height:100vh;
  min-height:100svh;
  /* Bottom padding must clear the scroll cue (its offset + ~74px height) with
     room to spare, or on short windows the buttons slide under it. */
  padding: calc(var(--header-h) + 80px) 0 180px;
  display:flex; align-items:center;
  position:relative;
  background:var(--bone);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--veil-a), var(--veil-b));
}
.hero-inner{
  position:relative; z-index:2;
  text-align:center;
  max-width:900px; margin:0 auto;
}
.hero .label{margin-bottom:36px;}
.hero h1{
  font-size:clamp(2.9rem, 7.4vw, 5.8rem);
  line-height:1.0;
  font-weight:500;
}
.hero h1 em{font-style:italic; color:var(--gold-deep);}
.hero-line{width:64px; height:1px; background:var(--gold); margin:44px auto;}
.hero .lede{
  max-width:56ch; margin:0 auto;
  color:var(--ink-soft);
  font-size:1.02rem; line-height:1.9;
}
.hero-actions{margin-top:52px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.scroll-cue{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-cue span{font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute);}
.scroll-cue i{display:block; width:1px; height:46px; background:var(--rule); position:relative; overflow:hidden;}
.scroll-cue i::after{
  content:''; position:absolute; top:-46px; left:0; width:1px; height:46px; background:var(--gold);
  animation: vpx-cue 2.6s var(--ease) infinite;
}
@keyframes vpx-cue{ 0%{top:-46px;} 60%{top:46px;} 100%{top:46px;} }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-block;
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  padding:17px 40px;
  border:1px solid var(--ink);
  color:var(--ink);
  background-color:transparent;
  cursor:pointer;
}
.btn-gold{border-color:var(--gold); color:var(--gold-deep);}

.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:1px solid var(--rule);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.arrow-link svg{width:16px; height:8px; transition:transform .35s var(--ease); flex:none;}
.arrow-link:hover{border-color:var(--gold); color:var(--gold-deep);}
.arrow-link:hover svg{transform:translateX(5px);}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:var(--pad-y) 0; background:var(--paper);}
.section-tight{padding:clamp(76px, 8vw, 120px) 0; background:var(--paper);}
.section-bone{background:var(--bone);}
.section-sand{background:var(--sand);}

.section-intro{text-align:center; max-width:660px; margin:0 auto clamp(72px, 8vw, 118px);}
.section-intro .label{margin-bottom:26px; display:block;}
.section-intro h2{font-size:clamp(2.1rem, 4.4vw, 3.3rem); line-height:1.1; margin-bottom:26px; font-weight:500;}
.section-intro p{color:var(--ink-soft); font-size:1rem; line-height:1.9;}

/* Manifesto */
.manifesto{text-align:center;}
.manifesto .label{margin-bottom:clamp(32px, 4vw, 54px); display:block;}
.manifesto p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:clamp(1.6rem, 3.6vw, 2.5rem);
  line-height:1.42;
  letter-spacing:-0.008em;
  color:var(--ink);
  max-width:24ch;
  margin:0 auto;
}
.manifesto .sig{margin-top:clamp(36px, 4vw, 58px); display:block;}

/* Mission & Vision — two manifesto columns under the hero */
.purpose{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:1080px;
  margin:0 auto;
}
.purpose.is-single{grid-template-columns:1fr; max-width:760px;}
.purpose-col{padding:0 clamp(28px, 5vw, 80px);}
.purpose-col + .purpose-col{border-left:1px solid var(--rule);}
.purpose .manifesto p,
.purpose-col p{
  font-size:clamp(1.35rem, 2.3vw, 1.9rem);
  line-height:1.45;
  max-width:26ch;
}
.purpose-sig{display:block; text-align:center; margin-top:clamp(48px, 5vw, 76px);}

/* ==========================================================================
   Services — horizontal carousel
   ========================================================================== */
.collection-viewport{
  position:relative;
  margin-top:clamp(56px, 6vw, 96px);
}

.collection{
  display:flex;
  align-items:flex-start;
  gap:clamp(28px, 2.6vw, 44px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gutter);
  padding-inline:var(--gutter);
  padding-bottom:8px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* Phones: a vertical swipe that starts on a card must scroll the page.
     The browser picks the axis from the first movement of the finger.
     No overscroll-behavior here: iPhone Safari can let it hold vertical
     swipes inside the row, which is what made the page feel stuck. */
  touch-action:pan-x pan-y pinch-zoom;
}
.collection::-webkit-scrollbar{display:none;}

.piece{
  display:flex;
  flex-direction:column;
  flex:0 0 clamp(268px, 30vw, 388px);
  scroll-snap-align:start;
}

.piece-plate{
  position:relative;
  aspect-ratio:4 / 3;
  background:linear-gradient(148deg, var(--sand) 0%, var(--shell) 58%, var(--sand) 100%);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep);
  overflow:hidden;
  background-size:cover; background-position:center;
}
/* Fine diagonal texture so an empty plate reads as intentional. */
.piece-plate::before{
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 13px);
  opacity:.7;
}
.piece-plate::after{
  content:'';
  position:absolute; inset:26px;
  border:1px solid var(--plate-line);
  pointer-events:none;
}
.piece-plate.has-image::before{display:none;}
.piece-plate svg{position:relative; z-index:2; width:88px; height:88px; opacity:.62;}

.piece-index{font-size:0.66rem; letter-spacing:0.22em; color:var(--gold-deep); display:block; margin-bottom:24px;}
.piece-body{padding-top:28px;}
.piece-body h3{font-size:clamp(1.5rem, 2vw, 1.9rem); line-height:1.15; margin-bottom:16px; font-weight:500;}
.piece-body p{color:var(--ink-soft); line-height:1.85; margin-bottom:28px; font-size:0.94rem;}

/* Nav arrows, vertically centred on the plate row by JS (main.js) */
.collection-arrow{
  position:absolute;
  top:50%;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:0;
  cursor:pointer;
  z-index:3;
  transition:border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.collection-prev{left:clamp(6px, 1.6vw, 20px); transform:translateY(-50%);}
.collection-next{right:clamp(6px, 1.6vw, 20px); transform:translateY(-50%);}
.collection-prev svg{transform:rotate(180deg);}
.collection-arrow svg{width:16px; height:8px;}
.collection-arrow:hover{border-color:var(--gold); color:var(--gold-deep);}
.collection-arrow:disabled{opacity:.32; cursor:default; pointer-events:none;}

/* ==========================================================================
   Maison / expertise
   ========================================================================== */
.maison{
  display:grid; grid-template-columns:0.8fr 1.2fr;
  gap:clamp(56px, 6vw, 110px);
  padding-inline:var(--inset-x);
  align-items:start;
}
.maison-lede h2{font-size:clamp(1.95rem, 3.6vw, 2.8rem); line-height:1.1; margin-bottom:30px; font-weight:500; max-width:16ch;}
.maison-lede p{color:var(--ink-soft); line-height:1.95; margin-bottom:22px;}
.profile + .profile{
  margin-top:clamp(72px, 8vw, 128px);
  padding-top:clamp(72px, 8vw, 128px);
  border-top:1px solid var(--rule);
}
.maison.is-solo{grid-template-columns:1fr;}
.maison-lede .profile-pending{display:block; margin-top:4px; color:var(--ink-mute);}
.maison-lede .maison-standfirst{
  font-family:'Cormorant Garamond', Garamond, Georgia, serif;
  font-weight:500;
  font-size:clamp(1.3rem, 2vw, 1.6rem);
  line-height:1.42;
  color:var(--ink);
  max-width:30ch;
  margin-bottom:26px;
}

.ledger{border-top:1px solid var(--rule);}
.ledger-row{
  display:grid; grid-template-columns:64px 1fr; gap:28px;
  padding:40px 0; border-bottom:1px solid var(--rule-soft);
}
.ledger-row .num{font-size:0.66rem; letter-spacing:0.18em; color:var(--gold-deep); padding-top:7px;}
.ledger-row h3{font-size:1.38rem; margin-bottom:12px; line-height:1.25; font-weight:500;}
.ledger-row p{color:var(--ink-soft); font-size:0.94rem; line-height:1.85;}

/* ==========================================================================
   Partners
   ========================================================================== */
.house-group{margin-bottom:clamp(64px, 7vw, 104px); padding-inline:var(--inset-x);}
.house-group:last-child{margin-bottom:0;}
.house-group > .label{display:block; padding-bottom:22px; margin-bottom:clamp(40px, 4.5vw, 60px); border-bottom:1px solid var(--rule);}
.houses{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(48px, 5.5vw, 84px); align-items:start;}
.house{border-bottom:1px solid var(--rule);}
.house-toggle{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:20px 0; background:none; border:none; margin:0; text-align:left; cursor:pointer; font-family:inherit; color:inherit; -webkit-appearance:none; appearance:none;}
.house-toggle h3{font-size:1.8rem; margin-bottom:0; font-weight:500; line-height:1.15; transition:color .3s var(--ease);}
.house-toggle:hover h3{color:var(--gold-deep);}
.house-toggle-icon{position:relative; flex:0 0 auto; width:16px; height:16px;}
.house-toggle-icon::before,
.house-toggle-icon::after{content:''; position:absolute; top:50%; left:50%; background:var(--gold); transition:transform .35s var(--ease), opacity .35s var(--ease);}
.house-toggle-icon::before{width:16px; height:1px; transform:translate(-50%,-50%);}
.house-toggle-icon::after{width:1px; height:16px; transform:translate(-50%,-50%);}
.house-toggle[aria-expanded="true"] .house-toggle-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.house-panel{max-height:0; overflow:hidden; transition:max-height .5s var(--ease);}
.house-panel-inner{padding-bottom:28px;}
.house .house-meta{display:block; margin-bottom:20px; font-size:0.72rem; letter-spacing:0.1em; color:var(--ink-mute);}
.house p{color:var(--ink-soft); line-height:1.95; margin-bottom:20px; font-size:0.95rem;}
.house ul{display:flex; flex-direction:column; gap:12px;}
.house ul li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:0.93rem; line-height:1.8;}
.house ul li::before{content:''; position:absolute; left:0; top:12px; width:9px; height:1px; background:var(--gold);}
.house.solo{grid-column:1 / -1; max-width:560px;}

/* ==========================================================================
   Enquiries
   ========================================================================== */
.enquiry{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(56px, 6vw, 110px);
  padding-inline:var(--inset-x);
  align-items:start;
}
.enquiry-aside h2{font-size:clamp(1.95rem,3.6vw,2.8rem); line-height:1.1; margin-bottom:26px; font-weight:500;}
.enquiry-aside p{color:var(--ink-soft); line-height:1.95; margin-bottom:44px; max-width:40ch;}
.enquiry-details{display:flex; flex-direction:column; gap:26px; border-top:1px solid var(--rule); padding-top:36px;}
.enquiry-details .label{display:block; margin-bottom:9px;}
.enquiry-details a, .enquiry-details span{color:var(--ink); font-size:0.98rem;}
.enquiry-details a:hover{color:var(--gold-deep);}

/* Underline-only fields */
.form{display:flex; flex-direction:column; gap:34px; max-width:560px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:34px;}
.field{display:flex; flex-direction:column;}
.field label{
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:12px;
}
.field input,
.field select,
.field textarea{
  font-family:inherit; font-size:0.98rem; font-weight:300; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  border-radius:0;
  padding:10px 0;
  width:100%;
  transition:border-color .35s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),
                   linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%);
  background-position:calc(100% - 12px) 18px, calc(100% - 7px) 18px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:26px;
}
.field textarea{min-height:150px; resize:vertical; line-height:1.7;}
.field input:focus,
.field select:focus,
.field textarea:focus{border-bottom-color:var(--gold); outline:none;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);}

.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}

.notice{padding:16px 20px; font-size:0.9rem; margin-bottom:8px; border:1px solid;}
.notice.ok{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink);}
.notice.err{background:var(--err-bg); border-color:var(--err-line); color:var(--err-ink);}
.form-note{font-size:0.75rem; color:var(--ink-mute); letter-spacing:0.04em;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{background:var(--bone); border-top:1px solid var(--rule-soft); padding:clamp(80px, 8vw, 118px) 0 48px;}
.foot-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:56px; padding-bottom:clamp(56px, 6vw, 80px);}
.foot-mark img{height:32px; width:auto; margin-bottom:24px;}
.foot-mark p{color:var(--ink-soft); font-size:0.9rem; line-height:1.9; max-width:32ch;}
.foot-col h2{
  font-family:'Inter',sans-serif; font-weight:400;
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:22px;
}
.foot-col li{margin-bottom:13px;}
.foot-col a, .foot-col span{font-size:0.92rem; color:var(--ink-soft); transition:color .3s var(--ease);}
.foot-col a:hover{color:var(--gold-deep);}
.foot-base{
  border-top:1px solid var(--rule-soft); padding-top:34px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-mute);
}

/* ==========================================================================
   Interior pages
   ========================================================================== */
.page-head{
  padding: calc(var(--header-h) + 110px) 0 90px;
  background:var(--bone); text-align:center;
  border-bottom:1px solid var(--rule-soft);
}
.page-head .label{margin-bottom:24px; display:block;}
.page-head h1{font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.04; font-weight:500;}
.page-intro{max-width:54ch; margin:30px auto 0; color:var(--ink-soft); font-size:1.02rem; line-height:1.9;}

/* About page */
.prose-tight{padding-top:0;}
.about-cta .section-intro{margin-bottom:0;}
.cta-actions{margin-top:44px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* Current page in the nav */
.nav-desktop a[aria-current="page"]{color:var(--ink);}
.nav-desktop a[aria-current="page"]::after{width:100%;}
.overlay-menu a[aria-current="page"]{color:var(--gold-deep);}
.prose{padding:clamp(76px, 8vw, 112px) 0 clamp(96px, 10vw, 140px);}
.prose p,.prose li{color:var(--ink-soft); line-height:1.95; margin-bottom:22px;}
.prose h2{font-size:1.9rem; margin:54px 0 20px;}
.prose h3{font-size:1.45rem; margin:40px 0 14px;}
.prose img{margin:36px 0;}
.prose ul{list-style:disc; padding-left:22px;}
.prose blockquote{
  border-left:1px solid var(--gold); padding-left:28px; margin:38px 0;
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:1.35rem; color:var(--ink);
}

/* ==========================================================================
   Reveal
   ========================================================================== */
/* Only hidden once main.js has run (it adds .has-anim to <html>), so the page
   is fully readable if scripts are blocked, fail, or haven't loaded yet. */
.has-anim .rise{opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.has-anim .rise.seen{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .rise{opacity:1 !important; transform:none !important; transition:none;}
  .scroll-cue i::after{animation:none; top:0;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  :root{--gutter:32px;}
  .maison,.enquiry{gap:64px;}
  .houses{gap:48px;}
}

@media (max-width:980px){
  .purpose{grid-template-columns:1fr; max-width:640px;}
  .purpose-col{padding:0;}
  .purpose-col + .purpose-col{border-left:0; border-top:1px solid var(--rule); margin-top:clamp(48px, 8vw, 64px); padding-top:clamp(48px, 8vw, 64px);}
  :root{--header-h:76px;}
  .nav-desktop{display:none;}
  .menu-btn{display:flex;}

  .section{padding:clamp(76px, 12vw, 104px) 0;}
  .section-tight{padding:68px 0;}
  .section-intro{margin-bottom:60px;}
  .maison{padding-inline:0;}
  .house-group{padding-inline:0;}

  /* Arrows give way to native swipe on touch-sized viewports. */
  .collection-arrow{display:none;}
  .piece{flex-basis:min(78vw, 360px);}

  .maison,.enquiry{grid-template-columns:1fr; gap:56px;}
  .enquiry{padding-inline:0;}
  .form{max-width:none;}
  .houses{grid-template-columns:1fr; gap:56px;}
  .house.solo{max-width:none;}

  .foot-top{grid-template-columns:1fr 1fr; gap:44px;}
  .foot-mark{grid-column:1 / -1;}
}

@media (max-width:620px){
  :root{--gutter:22px;}
  body{font-size:15px;}

  .hero{padding: calc(var(--header-h) + 56px) 0 150px;}
  .hero-line{margin:32px auto;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .btn{width:100%; text-align:center;}
  .scroll-cue{bottom:28px;}

  .section{padding:72px 0;}
  .piece{flex-basis:82vw;}
  .collection{gap:20px;}
  .piece-plate::after{inset:16px;}
  .piece-plate{aspect-ratio:3/2;}
  .piece-plate svg{width:64px; height:64px;}

  .ledger-row{grid-template-columns:1fr; gap:10px;}
  .ledger-row .num{padding-top:0;}

  .form-row{grid-template-columns:1fr; gap:34px;}

  .foot-top{grid-template-columns:1fr; gap:40px;}
  .foot-base{flex-direction:column; gap:10px;}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .masthead,.overlay-menu,.scroll-cue,.form,.btn{display:none !important;}
  body{background:#fff; color:#000;}
  .rise{opacity:1 !important; transform:none !important;}
  .piece{page-break-inside:avoid;}
}


/* ==========================================================================
   The Vera app (1.13.0)
   ========================================================================== */
.app-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(40px,7vw,120px); align-items:center; max-width:1040px; margin:0 auto;}
.app-copy .label{display:block; margin-bottom:24px;}
.app-copy h2{font-size:clamp(2.1rem, 4.4vw, 3.3rem); line-height:1.1; margin-bottom:24px;}
.app-copy .lede{color:var(--ink-soft); max-width:560px; margin-bottom:40px;}
.app-actions{display:flex; flex-wrap:wrap; gap:14px;}
.app-qr{margin:0; text-align:center;}
/* Always dark modules on a light tile, so phones can read it in either scheme. */
.app-qr-code{width:184px; height:184px; padding:12px; background:#FFFFFF; border:1px solid var(--rule); margin:0 auto 16px;}
.app-qr-code svg{display:block; width:100%; height:100%;}
@media (max-width: 900px){
  .app-grid{grid-template-columns:1fr; text-align:center;}
  .app-copy .lede{margin-left:auto; margin-right:auto;}
  .app-actions{justify-content:center;}
  .app-qr{display:none;}   /* on a phone the button is the way in */
}

/* ==========================================================================
   Motion
   Everything here is gated behind .has-anim, which JavaScript adds to <html>
   only when motion is allowed. If JS fails or the visitor prefers reduced
   motion, the class never lands and all content renders plainly visible.
   ========================================================================== */

.has-anim .hero .label,
.has-anim .hero .lede,
.has-anim .hero-actions,
.has-anim .scroll-cue{
  opacity:0;
  transform:translateY(16px);
}

/* Masked type: each word sits inside a clipped box and rises into place. */
.word-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.08em;
  margin-bottom:-0.08em;
}
.word-mask > span{
  display:inline-block;
  will-change:transform;
}
.has-anim .word-mask > span{
  transform:translateY(110%);
}
.has-anim .lift .word-mask > span{
  transform:translateY(0);
  transition:transform 1.05s var(--ease);
}

/* Hero sequence */
.has-anim .hero.lift .label{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease) .05s, transform .9s var(--ease) .05s;
}
.has-anim .hero .hero-line{width:0; transition:width 1s var(--ease) .75s;}
.has-anim .hero.lift .hero-line{width:64px;}
.has-anim .hero.lift .lede{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) .9s, transform 1s var(--ease) .9s;
}
.has-anim .hero.lift .hero-actions{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease) 1.05s, transform 1s var(--ease) 1.05s;
}
.has-anim .hero.lift .scroll-cue{
  opacity:1; transform:translateY(0);
  transition:opacity 1.2s var(--ease) 1.4s, transform 1.2s var(--ease) 1.4s;
}
.has-anim .scroll-cue{transform:translateX(-50%) translateY(16px);}
.has-anim .hero.lift .scroll-cue{transform:translateX(-50%) translateY(0);}

/* Masthead settles in on load */
.has-anim .masthead{opacity:0; transform:translateY(-8px);}
.has-anim .masthead.lift{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* Section headings: masked words, staggered */
.has-anim .section-intro h2 .word-mask > span,
.has-anim .maison-lede h2 .word-mask > span,
.has-anim .enquiry-aside h2 .word-mask > span,
.has-anim .manifesto p .word-mask > span,
.has-anim .piece-body h3 .word-mask > span{
  transition:transform 1s var(--ease);
}

/* Hairline rules draw outward rather than appearing */
.has-anim .section-head,
.has-anim .house-group > .label,
.has-anim .ledger,
.has-anim .enquiry-details{
  position:relative;
}
.has-anim .rule-draw{
  position:relative;
}
.has-anim .rule-draw::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--rule);
  transition:width 1.1s var(--ease) .15s;
}
.has-anim .rule-draw.lift::after{width:100%;}

/* Service plates wipe in, then the icon settles */
.has-anim .piece-plate{
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.15s var(--ease);
}
.has-anim .piece.lift .piece-plate{
  clip-path:inset(0 0 0 0);
}
.has-anim .piece-plate svg{
  opacity:0; transform:scale(.94);
  transition:opacity .9s var(--ease) .5s, transform 1.1s var(--ease) .5s;
}
.has-anim .piece.lift .piece-plate svg{opacity:.62; transform:none;}

/* Plate frame draws after the wipe */
.has-anim .piece-plate::after{
  opacity:0;
  transition:opacity .8s var(--ease) .75s;
}
.has-anim .piece.lift .piece-plate::after{opacity:1;}

/* Service copy rises behind the plate */
.has-anim .piece-body > *{
  opacity:0; transform:translateY(18px);
}
.has-anim .piece.lift .piece-body > *{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.has-anim .piece.lift .piece-body > *:nth-child(1){transition-delay:.25s;}
.has-anim .piece.lift .piece-body > *:nth-child(2){transition-delay:.35s;}
.has-anim .piece.lift .piece-body > *:nth-child(3){transition-delay:.45s;}
.has-anim .piece.lift .piece-body > *:nth-child(4){transition-delay:.55s;}

/* Ledger rows and partner cards stagger in */
.has-anim .ledger-row,
.has-anim .house,
.has-anim .foot-col,
.has-anim .foot-mark{
  opacity:0; transform:translateY(18px);
}
.has-anim .ledger-row.lift,
.has-anim .house.lift,
.has-anim .foot-col.lift,
.has-anim .foot-mark.lift{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

/* Form fields */
.has-anim .form .field,
.has-anim .form > div,
.has-anim .form .form-note{
  opacity:0; transform:translateY(14px);
}
.has-anim .form.lift .field,
.has-anim .form.lift > div,
.has-anim .form.lift .form-note{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.has-anim .form.lift .form-row:nth-child(2){transition-delay:.08s;}
.has-anim .form.lift .form-row:nth-child(3){transition-delay:.16s;}
.has-anim .form.lift .field:last-of-type{transition-delay:.24s;}

/* Button fill wipes up from the baseline. Using a background image keeps
   the fill behind the label without needing an extra wrapper element. */
.btn{
  background-image:linear-gradient(var(--ink), var(--ink));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100% 0;
  transition:background-size .45s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{
  background-color:transparent;
  background-size:100% 100%;
  color:var(--paper);
}
.btn-gold{background-image:linear-gradient(var(--gold), var(--gold));}
.btn-gold:hover{color:var(--on-gold); border-color:var(--gold);}

/* Logo gets a gentle lift on hover */
.masthead-logo img{transition:opacity .4s var(--ease);}
.masthead-logo:hover img{opacity:.72;}

@media (prefers-reduced-motion: reduce){
  .has-anim *,
  .has-anim *::before,
  .has-anim *::after{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    width:auto;
  }
  .has-anim .hero .hero-line{width:64px;}
}


/* ==========================================================================
   Hero scene
   Hand-drawn island vignette: beach, palm, overwater villa, dhoni and water.
   Stroke width and opacity are set per path in the markup, so the rules here
   only set inherited defaults — declaring stroke-width on .hero-scene path
   would flatten every line to the same weight.
   ========================================================================== */
.hero-scene{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 42% 46% at 50% 40%, transparent 0%, transparent 44%, #000 84%);
  mask-image:radial-gradient(ellipse 42% 46% at 50% 40%, transparent 0%, transparent 44%, #000 84%);
}
.hero-scene svg{
  width:100%; height:100%; display:block;
  stroke:var(--gold);
  stroke-width:1;          /* inherited; per-path attributes still win */
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  overflow:visible;
}
.hero-scene path{vector-effect:non-scaling-stroke;}

.scene-beach{opacity:.6;}
.scene-palm{opacity:.7;}
.scene-villa{opacity:.58;}
.scene-dhoni{opacity:.66;}
.scene-birds{opacity:.5;}
.water{opacity:.85;}
.glints{opacity:.7;}
.glint{stroke:var(--gold);}

.hero-inner{z-index:3;}
.scroll-cue{z-index:3;}

/* Parallax offsets written by JS, so each layer can drift at its own depth. */
.scene-palm, .scene-villa, .dhoni-voyage, .birds-drift, .water, .scene-beach{
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}

/* ---- Draw-in on load ---- */
/* Every path carries pathLength="1", so one dash rule covers them all. */
.has-anim .hero-scene path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.has-anim .hero.lift .hero-scene path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 2.6s var(--ease);
}
.has-anim .hero.lift .hero-scene .d1{transition-delay:.2s;}
.has-anim .hero.lift .hero-scene .d2{transition-delay:.45s;}
.has-anim .hero.lift .hero-scene .d3{transition-delay:.7s;}
.has-anim .hero.lift .hero-scene .d4{transition-delay:.95s;}
.has-anim .hero.lift .hero-scene .d5{transition-delay:1.2s;}

/* ---- Ambient motion ---- */
@keyframes vpx-drift{
  from{ transform:translateX(0); }
  to  { transform:translateX(-1440px); }
}
/* A slow rise and fall layered under the drift, so the surface breathes. */
@keyframes vpx-swell{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}
@keyframes vpx-bob{
  0%,100%{ transform:translateY(0) rotate(-.5deg); }
  50%    { transform:translateY(-11px) rotate(.7deg); }
}
/* The dhoni crosses the whole scene, then resets far off-screen. */
@keyframes vpx-voyage{
  0%   { transform:translateX(170px); }
  100% { transform:translateX(-1750px); }
}
@keyframes vpx-sway{
  0%,100%{ transform:rotate(-1.1deg); }
  50%    { transform:rotate(1.4deg); }
}
@keyframes vpx-trunk{
  0%,100%{ transform:rotate(-.35deg); }
  50%    { transform:rotate(.5deg); }
}
@keyframes vpx-flap{
  0%,100%{ transform:scaleY(1); }
  50%    { transform:scaleY(.45); }
}
@keyframes vpx-glide{
  0%   { transform:translate(-240px, 40px); }
  100% { transform:translate(1500px, -70px); }
}
@keyframes vpx-glint{
  0%, 72%, 100%{ opacity:0; }
  18%, 44%     { opacity:.85; }
}

.has-anim .wave{will-change:transform;}
/* Drift on the band, swell on its wrapper, so the two compose. */
.has-anim .w1{animation:vpx-drift 22s linear infinite;}
.has-anim .w2{animation:vpx-drift 31s linear infinite;}
.has-anim .w3{animation:vpx-drift 42s linear infinite;}
.has-anim .water{animation:vpx-swell 9s ease-in-out infinite;}
.has-anim .glints{animation:vpx-swell 11s ease-in-out infinite -3s;}

/* Dhoni: long crossing on the outer group, bob on the inner one. */
.has-anim .dhoni-voyage{animation:vpx-voyage 150s linear infinite;}
.has-anim .scene-dhoni{
  transform-origin:1244px 802px;   /* waterline under the hull */
  animation:vpx-bob 6.5s ease-in-out infinite;
}

/* Palm: trunk barely moves, each frond has its own timing. */
.has-anim .scene-palm{
  transform-origin:172px 748px;    /* foot of the trunk on the sandbank */
  animation:vpx-trunk 14s ease-in-out infinite;
}
.has-anim .frond{
  transform-origin:233px 476px;   /* collar where the fronds wrap the stem */
  transform-box:view-box;
}
.has-anim .frond.f0{animation:vpx-sway 6.5s ease-in-out infinite;}
.has-anim .frond.f1{animation:vpx-sway 8.2s ease-in-out infinite -1.4s;}
.has-anim .frond.f2{animation:vpx-sway 7.1s ease-in-out infinite -3.1s;}
.has-anim .frond.f3{animation:vpx-sway 9.4s ease-in-out infinite -2.2s;}

/* Birds: the flock crosses the sky while the wings beat. */
.has-anim .birds-drift{animation:vpx-glide 70s linear infinite;}
.has-anim .scene-birds path{
  transform-box:fill-box;
  transform-origin:center;
  animation:vpx-flap 1.1s ease-in-out infinite;
}
.has-anim .scene-birds path:nth-child(2){animation-duration:.95s;}
.has-anim .scene-birds path:nth-child(3){animation-duration:1.25s;}
.has-anim .scene-birds path:nth-child(4){animation-duration:1.05s;}
.has-anim .scene-birds path:nth-child(5){animation-duration:1.35s;}

/* Glints: catch the light, fade, repeat on staggered cycles. */
.has-anim .glint{opacity:0; animation:vpx-glint 9s ease-in-out infinite;}
.has-anim .glint.g1{animation-duration:11s; animation-delay:-2.5s;}
.has-anim .glint.g2{animation-duration:13s; animation-delay:-5s;}
.has-anim .glint.g3{animation-duration:10s; animation-delay:-7.5s;}

/* ---- Responsive ---- */
@media (max-width:980px){
  .scene-palm, .scene-villa, .dhoni-voyage, .birds-drift{display:none;}
  .hero-scene{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 58%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 58%);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-scene path{stroke-dasharray:none !important; stroke-dashoffset:0 !important;}
  .wave, .scene-dhoni, .dhoni-voyage, .scene-palm, .frond,
  .birds-drift, .scene-birds path, .glint{animation:none !important;}
  .glint{opacity:.5;}
  .scene-palm, .scene-villa, .dhoni-voyage, .birds-drift, .water, .scene-beach{
    transform:none !important; transition:none !important;
  }
}

/* ==========================================================================
   Service cards: company name next to the number (1.11.0)
   ========================================================================== */
.piece-brand{
  margin-left:12px; padding-left:12px; border-left:1px solid rgba(168,128,44,.45);
  letter-spacing:0.22em; text-transform:uppercase;
}
@media (max-width:620px){
  .piece-brand{margin-left:10px; padding-left:10px;}
}