/* Design tokens copied verbatim from
   ~/work/design-system/mascareignes-realty-invest-design-system/tokens/
   Do not hand-edit a value here — fix it upstream in the design system. */

/* --- materials.css --- */
:root{
  --m-travertine-lit:#F0E7DE; --m-travertine:#E6D8C0; --m-travertine-shade:#C2AE95;
  --m-stone-warm:#B6A89A;
  --m-lava:#2B2A28; --m-lava-deep:#1A1A18; --m-lava-black:#0E0E0C;
  --m-teak-lit:#8C7046; --m-teak:#5A321E; --m-teak-shade:#462814;
  --m-lagoon-shallow:#00AAB4; --m-lagoon:#00A0AA; --m-lagoon-deep:#006E78;
  --m-sky-high:#EEF2F7; --m-sky:#B6D2E0; --m-sky-horizon:#96AABE;
  --m-foliage:#2A382A; --m-foliage-deep:#1C2A1C; --m-lawn:#5A7A32;
  --m-cove-amber:#F2C078; --m-cove-glow:rgba(242,192,120,.55);
}

/* --- colors.css --- */
:root{
  --sand:#D1C19E; --sand-deep:#B9A87F; --sand-tint:#E3D9C2;
  --ivory:#F6EDE0; --paper:#FFFFFF; --ink:#2D2D2D; --graphite:#45433D; --slate:#5E594F; --stone:#D5CFC3;
  --basalt:#1C1B19; --lava:var(--m-lava); --lava-deep:var(--m-lava-deep);
  --travertine:var(--m-travertine); --travertine-lit:var(--m-travertine-lit);
  --teak:var(--m-teak-lit); --teak-deep:var(--m-teak-shade);
  --lagoon:var(--m-lagoon); --lagoon-deep:var(--m-lagoon-deep); --shallows:var(--m-lagoon-shallow);
  --cove:var(--m-cove-amber); --foliage:var(--m-foliage); --road:#DED7C9;

  --hairline-light:rgba(45,45,45,.18); --hairline-dark:rgba(246,237,224,.22);
  --hairline-faint:rgba(45,45,45,.10); --leader-dot:rgba(45,45,45,.30);
  --cove-line:var(--m-cove-amber); --cove-bloom:var(--m-cove-glow);
  --scrim-image:linear-gradient(to top,rgba(14,14,12,.62),rgba(14,14,12,.06) 58%,rgba(14,14,12,0));
  --scrim-image-light:linear-gradient(to top,rgba(14,14,12,.42),rgba(14,14,12,0) 48%);
  --scrim-caption:linear-gradient(to top,rgba(14,14,12,.92),rgba(14,14,12,.50) 60%,rgba(14,14,12,0));
  --scrim-hero:linear-gradient(to top,rgba(14,14,12,.88),rgba(14,14,12,.58) 50%,rgba(14,14,12,.18) 80%,rgba(14,14,12,0));
  --shadow-gap:linear-gradient(to bottom,rgba(14,14,12,.34),rgba(14,14,12,0));

  --surface-page:var(--ivory); --surface-band:var(--sand);
  --surface-immersive:var(--basalt); --surface-clad:var(--lava);
  --surface-card:var(--ivory); --surface-canvas:var(--ivory);
  --surface-label:var(--paper); --surface-input:var(--paper); --surface-disabled:var(--stone);
  --text-body:var(--ink); --text-heading:var(--ink); --text-secondary:var(--slate);
  --text-on-sand:var(--ink); --text-on-basalt:var(--ivory); --text-accent-on-basalt:var(--sand);
  --text-legal:var(--slate);
  --border-hairline:var(--hairline-light); --border-input:var(--graphite);
  --marker-fill:var(--graphite); --marker-numeral:var(--paper); --marker-halo:var(--ivory);
  --interactive:var(--lagoon-deep); --focus-ring:var(--lagoon-deep);
  --highlight-zone:rgba(0,160,170,.20); --highlight-zone-stroke:var(--lagoon-deep);
}

/* --- fonts.css, adapted: real family names instead of next/font variables,
   same deviation src/styles/tokens/fonts.css makes and for the same reason
   (this is a static page with no next/font pipeline) --- */
:root{
  --font-display:"Oswald","Archivo Narrow","Arial Narrow",sans-serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-script:"Jost","Futura",sans-serif;
}

/* --- typography.css --- */
:root{
  --fw-hairline:200; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --t-hero-size:clamp(2.75rem,7.5vw,6rem); --t-hero-lh:.94; --t-hero-track:.02em;
  --t-signature-size:clamp(1.75rem,4.5vw,3.5rem); --t-signature-lh:1.15; --t-signature-track:.03em;
  --t-h1-size:clamp(2rem,4vw,3.25rem); --t-h1-lh:1.05; --t-h1-track:.015em;
  --t-h2-size:clamp(1.5rem,2.6vw,2.25rem); --t-h2-lh:1.1; --t-h2-track:.015em;
  --t-h3-size:1.25rem; --t-h3-lh:1.2; --t-h3-track:.04em;
  --t-eyebrow-size:.8125rem; --t-eyebrow-lh:1.2; --t-eyebrow-track:.16em;
  --t-lead-size:clamp(1.0625rem,1.4vw,1.25rem); --t-lead-lh:1.6;
  --t-body-size:1rem; --t-body-lh:1.65;
  --t-small-size:.875rem; --t-small-lh:1.55; --t-small-track:.01em;
  --t-data-size:.9375rem; --t-data-lh:1.4; --t-data-track:.04em;
  --t-legal-size:.75rem; --t-legal-lh:1.5; --t-legal-track:.01em;
  --measure:68ch;
}

/* --- spacing.css --- */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;
  --gutter:24px; --content-max:1440px;
  --page-margin:64px; --page-margin-tablet:40px; --page-margin-mobile:20px;
  --section-rhythm:128px; --section-rhythm-mobile:80px;
  --panel-pad:64px; --panel-pad-mobile:40px;
  --grid-columns:12; --split-panel:38%; --split-media:62%; --split-stacks-below:900px;
  --hit-min:44px;
}
@media (max-width:1100px){:root{--page-margin:var(--page-margin-tablet)}}
@media (max-width:640px){:root{--page-margin:var(--page-margin-mobile);--section-rhythm:var(--section-rhythm-mobile);--panel-pad:var(--panel-pad-mobile)}}

/* --- shape.css --- */
:root{
  --r-sm:4px; --r-full:999px; --hairline:1px; --rule-wall:1.25px; --elevation:none;
  --underline-idle:1px; --underline-hover:2px; --focus-width:2px; --focus-offset:2px;
}

/* --- motion.css --- */
:root{
  --ease:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:180ms; --dur-default:450ms; --dur-slow:700ms;
  --reveal-rise:24px; --reveal-stagger:60ms; --hover-image-scale:1.02;
}

/* --- base.css --- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--t-body-size);line-height:var(--t-body-lh);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--fw-light);text-transform:uppercase;margin:0}
a{color:var(--interactive);text-decoration-line:underline;text-decoration-thickness:var(--underline-idle);text-underline-offset:3px;transition:text-decoration-thickness var(--dur-fast) var(--ease)}
a:hover{color:var(--interactive);text-decoration-thickness:var(--underline-hover)}
:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
hr{border:0;border-top:var(--hairline) solid var(--border-hairline);margin:0}
img{display:block;max-width:100%}
::selection{background:var(--sand);color:var(--ink)}

/* --- ds-components.css button, verbatim (src/styles/ds-components.css) --- */
.mri-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-track);text-transform:uppercase;text-decoration:none;border-radius:var(--r-sm);border:var(--hairline) solid transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.mri-btn--lg{min-height:48px;padding:0 32px}
.mri-btn--onBasalt{background:var(--ivory);color:var(--ink)}
.mri-btn--onBasalt:hover{background:var(--sand)}
.mri-btn--solid{background:var(--ink);color:var(--ivory)}
.mri-btn--solid:hover{background:var(--graphite)}
.mri-btn[aria-disabled="true"]{background:var(--stone);color:var(--slate);border-color:transparent;pointer-events:none}

/* ============================================================
   Page-specific layout — the teaser holding page itself.
   ============================================================ */

.teaser{position:relative;min-height:100svh;background:var(--basalt);overflow:hidden}

.teaser-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.teaser-scrim{position:absolute;inset:0;background:var(--scrim-hero);pointer-events:none}

.teaser-wordmark{
  position:absolute;top:var(--page-margin-mobile);left:var(--page-margin-mobile);
  font-family:var(--font-display);font-size:21px;font-weight:300;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--ivory);
}
.teaser-wordmark b{font-weight:500}

.teaser-langs{
  position:absolute;top:var(--page-margin-mobile);right:var(--page-margin-mobile);z-index:1;
  display:flex;gap:12px;
  font-family:var(--font-display);font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-track);
  text-transform:uppercase;
}
.teaser-langs a{color:var(--ivory);text-decoration:none}
.teaser-langs a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:var(--underline-hover);text-underline-offset:3px}

.teaser-content{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--page-margin-mobile) 56px;
}
@media (min-width:640px){.teaser-content{padding:120px var(--page-margin) 56px}}

.teaser-eyebrow{color:var(--sand);font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-track);text-transform:uppercase;word-spacing:.04em;margin-bottom:16px}

.teaser-title{color:var(--ivory);font-family:var(--font-display);font-weight:var(--fw-hairline);font-size:clamp(2.5rem,5.4vw,4.5rem);line-height:.938;letter-spacing:var(--t-hero-track);word-spacing:.06em;text-transform:uppercase;max-width:17ch;text-wrap:balance}

.teaser-signature{margin-top:24px;color:var(--ivory);font-family:var(--font-script);font-style:italic;font-size:clamp(1.55rem,3.3vw,2.8rem);line-height:1.15;letter-spacing:var(--t-signature-track);text-transform:uppercase;max-width:34ch;text-wrap:balance}

.teaser-status{margin-top:24px;color:var(--ivory);font-size:var(--t-small-size);line-height:var(--t-small-lh)}

.teaser-cta{margin-top:32px;display:inline-flex;width:fit-content}

.teaser-legal{margin-top:32px;color:var(--ivory);opacity:.7;font-size:var(--t-legal-size);line-height:var(--t-legal-lh);letter-spacing:var(--t-legal-track);max-width:60ch}

/* ============================================================
   Enquiry modal — native <dialog>, top layer, no JS framework.
   ============================================================ */

.enq{
  width:min(560px,100% - 2 * var(--page-margin-mobile));
  max-height:min(720px,90svh);
  margin:auto;padding:0;border:0;border-radius:var(--r-sm);
  background:var(--sand);color:var(--ink);
  overflow-y:auto;
}
@media (min-width:640px){.enq{width:min(560px,100% - 2 * var(--page-margin))}}
.enq::backdrop{background:rgba(14,14,12,.72)}
@media (prefers-reduced-motion:no-preference){
  .enq{transition:opacity var(--dur-default) var(--ease),display var(--dur-default) var(--ease) allow-discrete,overlay var(--dur-default) var(--ease) allow-discrete;opacity:0}
  .enq[open]{opacity:1}
  @starting-style{.enq[open]{opacity:0}}
  .enq::backdrop{transition:background-color var(--dur-default) var(--ease)}
}

.enq-body{padding:var(--panel-pad-mobile)}
@media (min-width:640px){.enq-body{padding:var(--panel-pad)}}

.enq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}

.enq-title{margin:0;font-size:var(--t-h2-size);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-track)}

.enq-close{
  flex:none;width:var(--hit-min);height:var(--hit-min);margin:-8px -8px 0 0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:1.5rem;line-height:1;color:var(--ink);cursor:pointer;
}
.enq-close:hover{background:var(--sand-deep)}

.enq-note{margin:var(--s-3) 0 0;max-width:var(--measure);font-size:var(--t-small-size);line-height:var(--t-small-lh)}

.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-5)}
.enq-field{grid-column:auto}
.enq-field--wide{grid-column:1 / -1}
@media (max-width:520px){.enq-grid{grid-template-columns:1fr}}

.enq-label{display:block;margin-bottom:var(--s-2);font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-track);text-transform:uppercase}

.enq-input{
  width:100%;min-height:var(--hit-min);box-sizing:border-box;padding:0 14px;
  background:var(--surface-input);color:var(--ink);
  border:var(--hairline) solid var(--border-input);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:var(--t-body-size);
}
textarea.enq-input{height:auto;padding:14px;resize:vertical}
select.enq-input{appearance:auto}
.enq-input:invalid{box-shadow:none} /* no native red outline until the user has tried to submit */
.enq-field.enq-field--invalid .enq-input{border-left:2px solid var(--lagoon-deep)}

.enq-actions{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-5);flex-wrap:wrap}

.enq-status{margin:var(--s-4) 0 0;font-size:var(--t-small-size)}
.enq-status[data-state="error"]{color:var(--lagoon-deep)}

.enq-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.enq-success{padding:var(--panel-pad-mobile)}
@media (min-width:640px){.enq-success{padding:var(--panel-pad)}}
.enq-success p{margin:var(--s-3) 0 0;max-width:var(--measure);font-size:var(--t-lead-size);line-height:var(--t-lead-lh)}

/* ============================================================
   Scroll cue — bottom-right of the hero, hidden once the
   viewport is short enough that the content stack fills it.
   ============================================================ */

.teaser-scrollcue{
  position:absolute;bottom:var(--page-margin-mobile);right:var(--page-margin-mobile);z-index:1;
  display:flex;align-items:center;gap:var(--s-2);color:var(--ivory);text-decoration:none;
  font-family:var(--font-display);font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-track);
  text-transform:uppercase;
}
.teaser-scrollcue::after{content:"↓";font-size:1rem;line-height:1}
@media (min-width:640px){.teaser-scrollcue{right:var(--page-margin)}}
@media (max-width:900px){.teaser-scrollcue{display:none}}

/* ============================================================
   Portfolio strip — three CGI views under the hero.
   ============================================================ */

.strip{
  background:var(--surface-page);
  padding:var(--section-rhythm) var(--page-margin-mobile);
}
@media (min-width:640px){.strip{padding:var(--section-rhythm) var(--page-margin)}}

.strip-inner{max-width:var(--content-max);margin:0 auto}

.strip-eyebrow{color:var(--slate);font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--t-eyebrow-size);letter-spacing:var(--t-eyebrow-track);text-transform:uppercase;margin-bottom:16px}

.strip-title{color:var(--ink);font-size:var(--t-h2-size);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-track);max-width:20ch}

.strip-body{margin-top:var(--s-5);max-width:var(--measure);color:var(--text-body);font-size:var(--t-lead-size);line-height:var(--t-lead-lh)}
.strip-body + .strip-body{margin-top:var(--s-4)}

.strip-grid{
  list-style:none;margin:var(--s-8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
}
@media (max-width:900px){.strip-grid{grid-template-columns:1fr;gap:var(--s-6)}}

.strip-figure{margin:0}
.strip-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm)}
.strip-caption{margin-top:var(--s-3);padding-top:var(--s-3);border-top:var(--hairline) solid var(--border-hairline);color:var(--text-secondary);font-size:var(--t-small-size);line-height:var(--t-small-lh)}

.strip-foot{margin-top:var(--s-8);padding-top:var(--s-6);border-top:var(--hairline) solid var(--border-hairline);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5)}

.strip-legal{margin:0;flex:1 1 320px;color:var(--slate);font-size:var(--t-legal-size);line-height:var(--t-legal-lh);letter-spacing:var(--t-legal-track);max-width:60ch}