/* =========================================================================
   SEASZEN — design system, v2
   Andalusian limestone + deep shade + terracotta. The blue stays where the
   logo lives; everything else is warm, so the site reads as a gallery rather
   than an estate agent's catalogue.
   ========================================================================= */

/* --------------------------------------------------------------- tokens */
:root{
  /* Deep sea & antique bronze.
     One blue in three weights, and a bronze that behaves like metal. There is
     no white anywhere — the light surface is a mid-tone blue, never paper. */

  /* The light surface is a pale blue that is lit, never a flat fill: the glow
     below lifts it towards --paper-hi where the light falls and lets it sink
     to --paper-lo at the edges. Bronze reads against it because the values are
     far apart, which matters more than the temperature. */
  --paper:#E4EDF2;
  --paper-hi:#F4F8FA;
  --paper-lo:#D2E0E8;
  --paper-2:#EDF3F6;
  --paper-3:#C0D2DC;
  --paper-4:#A6BECB;

  /* the dark bands */
  --ink:#061A2B;
  --ink-2:#0E2C44;
  --ink-3:#17405C;
  --ink-deep:#030F1B;

  /* sea blue — atmosphere only: glows, the italic hero line, the map */
  --sea:#76ADC2;
  --sea-2:#AFD0DB;
  --sea-3:#3E7E97;

  /* Bronze, not gold. Every value sits at 24–28° hue; gold lives at 43–50°.
     The flat values carry text, the gradients carry light. */
  --bronze:#A8704A;        /* fills and rules */
  --bronze-2:#CE9B72;      /* small labels on the dark bands            7.2:1 */
  --bronze-mid:#8A5B38;    /* large numerals on the stone surface       3.1:1 */
  --bronze-deep:#5A3A20;   /* small labels on the stone surface         5.5:1 */
  --bronze-chip:#7A4A2A;   /* the only bronze that carries white text   7.4:1 */

  /* semantic — the MID surface is the default */
  --bg:var(--paper);
  --fg:#0B1B27;
  --fg-soft:#33495A;
  --fg-mute:#4E6575;
  --line:rgba(11,27,39,.16);
  --line-2:rgba(11,27,39,.3);
  --card:rgba(255,255,255,.5);
  --accent:var(--bronze-mid);
  --accent-ink:var(--bronze-deep);
  --shade:rgba(11,27,39,.06);

  /* type */
  --serif:"the-seasons","Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --fs-colossal:clamp(3.4rem,13vw,15rem);
  --fs-mega:clamp(3rem,9.5vw,9rem);
  --fs-h1:clamp(2.6rem,6.6vw,6.2rem);
  --fs-h2:clamp(2rem,4.6vw,4.2rem);
  --fs-h3:clamp(1.5rem,2.5vw,2.5rem);
  --fs-h4:clamp(1.15rem,1.5vw,1.5rem);
  --fs-lead:clamp(1.05rem,.98rem+.42vw,1.32rem);
  --fs-body:clamp(1rem,.96rem+.16vw,1.075rem);
  --fs-meta:.7rem;

  /* space */
  --gut:clamp(1.25rem,4.4vw,4.5rem);
  --wrap:1560px;
  --sec-y:clamp(4rem,6.5vw,7.5rem);
  --r-sm:6px; --r:14px; --r-lg:22px; --r-xl:34px;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-soft:cubic-bezier(.33,1,.68,1);

  --shadow-sm:0 1px 2px rgba(11,27,39,.08);
  --shadow:0 24px 60px -30px rgba(3,15,27,.45);
  --shadow-lg:0 50px 100px -45px rgba(3,15,27,.6);

  /* The metal. A flat hex is brown; a metal needs a shadow, a body and a
     highlight, and the highlight has to stay warm rather than turn yellow —
     that is the whole difference between bronze and gold.
     `--metal` is the wide range for rules and fills; `--metal-text` has a
     lifted floor so large numerals set in it clear 3:1 on the dark. */
  --metal-angle:118deg;
  --metal:linear-gradient(var(--metal-angle),#4B3119 0%,#8A5C33 15%,#C79367 31%,#9A6840 48%,#6E4726 64%,#D2A379 82%,#7C5130 100%);
  --metal-text:linear-gradient(var(--metal-angle),#8A5C33 0%,#B27E4F 20%,#DCAE84 40%,#A97247 60%,#915F35 80%,#D0A075 100%);
}

/* Everything inside a dark context flips to the inverse set. One rule, so a
   component never has to know which surface it landed on. */
.on-dark,.sec--deep,.coast,.site-foot,.hero,.phero,.mapview,.omenu,.loader,.lb,.tray{
  --fg:var(--paper-2);
  --fg-soft:rgba(237,243,246,.76);
  --fg-mute:rgba(237,243,246,.52);
  --line:rgba(237,243,246,.16);
  --line-2:rgba(237,243,246,.3);
  --card:rgba(237,243,246,.06);
  --accent:var(--bronze-2);
  --accent-ink:var(--bronze-2);
  --shade:rgba(180,201,213,.08);
  color:var(--paper-2);
}

/* ------------------------------------------------------------ the metal
   Only ever at display size, as a rule, or as a fill — the same places a real
   metal would appear on a printed page. Small text uses the flat bronzes. */
/* A metal only exists where there is a shadow to catch. On the mid surface the
   gradient flattens into brown and stops being legible, so `.metal` is the deep
   flat bronze there and only becomes metal inside a dark band. */
.metal{color:var(--bronze-deep)}
.on-dark .metal,.sec--deep .metal,.coast .metal,.hero .metal,.phero .metal,
.site-foot .metal,.mapview .metal,.tray .metal,.lb .metal{
  background-image:var(--metal-text);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.metal-rule{height:1px;border:0;background-image:var(--metal);opacity:.9}
/* a slow sheen, so the metal catches light as you pass it */
.metal-sheen{position:relative;overflow:hidden}
.metal-sheen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-130%);transition:transform 1.1s var(--e-out);
}
.metal-sheen:hover::after{transform:translateX(130%)}
@media (prefers-reduced-motion:reduce){.metal-sheen::after{display:none}}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;background:var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;font-feature-settings:"tnum" 0;
}
body.is-locked{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
img:not([src$=".svg"]){background:var(--shade)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
::selection{background:var(--bronze);color:var(--ink)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:12px;z-index:999;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:var(--r-sm);transition:top .2s}
.skip-link:focus{top:12px}

/* --------------------------------------------------------------- ambient
   A single fixed layer behind the document. Light sections are opaque and hide
   it; the translucent dark bands let it move underneath them, so the navy
   never sits flat. The CSS gradients are the whole effect on their own — the
   canvas on top is an upgrade, not a dependency. */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ink-deep);overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute;inset:-30%;will-change:transform}
.ambient::before{
  background:
    radial-gradient(48% 38% at 24% 20%, rgba(118,173,194,.28), transparent 68%),
    radial-gradient(42% 34% at 80% 30%, var(--sun-cool), transparent 70%),
    radial-gradient(56% 40% at 60% 86%, var(--sun-warm), transparent 72%);
  animation:drift-a 46s var(--e-io) infinite alternate;
}
.ambient::after{
  background:
    radial-gradient(38% 30% at 74% 64%, rgba(175,208,219,.15), transparent 70%),
    radial-gradient(50% 36% at 14% 72%, rgba(3,15,27,.72), transparent 72%);
  animation:drift-b 62s var(--e-io) infinite alternate;
}
.ambient__gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 2s var(--e-out)}
.ambient__gl.is-on{opacity:1}
@keyframes drift-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}
@keyframes drift-b{from{transform:translate3d(3%,2%,0) scale(1.08)}to{transform:translate3d(-4%,-3%,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none}}

/* ------------------------------------------------------------ film grain */
/* The overlay is only a little larger than the viewport: an inset of -120%
   makes a composited layer several times the screen area, which is enough to
   wedge the renderer on a large display. Small offsets read the same. */
.grain{
  position:fixed;inset:-24px;z-index:9000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-8px,-6px)}
  40%{transform:translate(6px,-9px)} 60%{transform:translate(-5px,8px)}
  80%{transform:translate(9px,4px)}  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ----------------------------------------------------------- typography */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--serif);font-weight:300;line-height:1;
  letter-spacing:-.022em;text-wrap:balance;
}
h1,.h1{font-size:var(--fs-h1)}
h2,.h2{font-size:var(--fs-h2)}
h3,.h3{font-size:var(--fs-h3);line-height:1.08}
h4,.h4{font-size:var(--fs-h4);line-height:1.15}
em{font-style:italic}
.lead{font-size:var(--fs-lead);color:var(--fg-soft);line-height:1.55;max-width:56ch}
p{text-wrap:pretty}
strong{font-weight:600}

/* the mono label — the thread that ties the whole site together */
.meta{
  font-family:var(--mono);font-size:var(--fs-meta);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
.eyebrow{
  display:flex;width:fit-content;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:var(--fs-meta);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.eyebrow--num::before{display:none}
.eyebrow--num{color:var(--fg-mute)}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:1100px}
.sec{position:relative;padding-block:var(--sec-y)}
.sec--base+.sec--base,.sec--tint+.sec--tint{padding-top:calc(var(--sec-y)*.72)}

/* Nothing on this site is a flat fill. Both surfaces are lit — the pale one
   from above, the dark one from above and from a low bronze source — so the
   colour has somewhere to go across the height of a section. */
.sec--base,.sec--tint{
  background:
    radial-gradient(120% 78% at 50% -14%, var(--paper-hi) 0%, transparent 62%),
    radial-gradient(70% 62% at 88% 104%, rgba(118,173,194,calc(.2*var(--sun-lift))), transparent 68%),
    radial-gradient(56% 50% at 6% 96%, var(--sun-warm), transparent 72%),
    var(--paper);
}
.sec--tint{background-color:var(--paper-2)}

/* The dark band: translucent so the ambient moves underneath it, with its own
   light thrown in from the top and a bronze warmth low in the frame. */
.sec--deep{
  overflow:hidden;
  background:
    radial-gradient(115% 82% at 50% -12%, var(--sun-cool) 0%, transparent 64%),
    radial-gradient(64% 58% at 86% 96%, var(--sun-warm), transparent 70%),
    radial-gradient(52% 48% at 8% 8%, rgba(118,173,194,.14), transparent 72%),
    linear-gradient(180deg, rgba(6,26,43,.93), rgba(3,15,27,.95) 62%, rgba(6,26,43,.93));
}
/* a hairline of light along both edges, the way a lit surface catches an edge */
.sec--deep::before,.coast::before,.coast::after{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(175,208,219,.34) 30%,rgba(206,155,114,.34) 70%,transparent);
}
.sec--deep::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(206,155,114,.26) 32%,rgba(175,208,219,.26) 68%,transparent);
}
.coast::after{inset:auto 0 0}
.sec--deep>*{position:relative;z-index:1}

/* a hairline that fades out at both ends — the site's quiet signature */
.sec--base+.sec--base::before,.sec--tint+.sec--tint::before{
  content:"";position:absolute;inset:0 var(--gut) auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

.sec-head--center{text-align:center;margin-inline:auto}
.sec-head--center .eyebrow{margin-inline:auto}
.sec-head--center h2{margin-inline:auto}
.sec-head{max-width:60ch;margin-bottom:clamp(2.4rem,4.5vw,4rem)}
.sec h2,.sec-head h2{max-width:17ch}
.sec-head p{max-width:56ch}
.sec-head h2+p,.sec-head h1+p{margin-top:1.4rem}
.sec-head .eyebrow+h2,.sec-head .eyebrow+h1{margin-top:0}
.sec-head--split{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem 2rem;max-width:none}
.sec-head--split>div{max-width:60ch}
.grid{display:grid;gap:clamp(1.1rem,2vw,2rem)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.cols-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}

/* the hairline that runs through the site */
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--wave{height:26px;background:none;overflow:hidden}
.rule--wave svg{width:100%;height:100%;fill:none;stroke:var(--line-2);stroke-width:1}

/* --------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--paper);--btn-line:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.05em 1.8em;border-radius:100px;border:1px solid var(--btn-line);
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--mono);font-size:.74rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color .35s var(--e-out),border-color .35s,transform .5s var(--e-out);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background-image:var(--metal);background-color:var(--bronze);
  transform:translateY(101%);transition:transform .55s var(--e-out);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff}
.btn .i{width:1.15em;height:1.15em;transition:transform .5s var(--e-out)}
.btn:hover .i:last-child{transform:translateX(5px)}
.btn--paper{--btn-bg:var(--paper);--btn-fg:var(--ink)}
.btn--ink{--btn-bg:var(--ink);--btn-fg:var(--paper)}
.btn--bronze{--btn-bg:var(--bronze-chip);--btn-fg:#fff}
.btn--bronze::before{background:var(--ink)}
/* inside a dark band the filled button inverts */
.on-dark .btn--primary,.sec--deep .btn--primary,.hero .btn--primary,.phero .btn--primary,
.coast .btn--primary,.site-foot .btn--primary{--btn-bg:var(--paper);--btn-fg:var(--ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;--btn-line:var(--line-2)}
.btn--ghost:hover{--btn-line:var(--bronze)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--fg);--btn-line:var(--line-2)}
.btn--outline:hover{--btn-line:var(--bronze)}
.btn--sm{padding:.75em 1.3em;font-size:.66rem}
.btn--lg{padding:1.25em 2.3em;font-size:.78rem}
.btn--block{display:flex;width:100%}


/* a link that draws its own underline */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.4em;
}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .5s var(--e-out)}
.tlink:hover::after{transform:scaleX(0);transform-origin:left}
.tlink .i{width:1.1em;height:1.1em;transition:transform .5s var(--e-out)}
.tlink:hover .i{transform:translateX(4px)}

.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i--fill{fill:currentColor;stroke:none}

/* ----------------------------------------------------------------- lists */
.ticks{display:grid;gap:1rem;margin-top:2.2rem}
.ticks li{display:flex;align-items:flex-start;gap:.9rem;font-size:.97rem;color:var(--fg-soft)}
.ticks .i{width:16px;height:16px;margin-top:.34em;color:var(--accent);stroke-width:2}

/* ----------------------------------------------------------------- forms */
.form{display:grid;gap:1.1rem}
.form__title{font-family:var(--serif);font-size:1.6rem;line-height:1.1;margin-bottom:.4rem}
.form--panel{
  background:var(--card);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.8rem);
}

.field{display:grid;gap:.45rem}
.field label{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.field label span{text-transform:none;letter-spacing:.02em;opacity:.75}
.field--row{grid-template-columns:1fr 1fr;gap:1rem}
.field--row>div{display:grid;gap:.45rem}
.field--inline{display:flex;gap:.6rem;align-items:stretch}
.field--inline input{flex:1}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:.9em 0;border:0;border-bottom:1px solid var(--line-2);
  background:transparent;color:var(--fg);border-radius:0;
  transition:border-color .3s,box-shadow .3s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--fg-mute);opacity:.7}
select{appearance:none;padding-right:1.8rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2376ADC2' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;background-size:10px}
select option{color:#00101F;background:#EBF2F6}
textarea{resize:vertical;min-height:76px}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:.8rem;color:var(--fg-soft);line-height:1.5;cursor:pointer}
.check input{appearance:none;width:17px;height:17px;flex:none;margin-top:.16em;border:1px solid var(--line-2);transition:.2s;background:transparent}
.check input:checked{background:var(--bronze-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12.5 5 5L20 6.5' fill='none' stroke='%23001227' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--bronze)}
.check a{text-decoration:underline;text-underline-offset:2px}
.check--sm{font-size:.74rem}
.form__note{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);text-align:center}
.form__status{font-size:.85rem;min-height:0}
.form__status.is-ok{color:var(--accent-ink);min-height:1.4em}
.form__status.is-err{color:#C0553F;min-height:1.4em}

/* --------------------------------------------------------------- reveals
   Keyframe animations, not transitions, and the hidden state only applies while
   `html.js` is set. Two reasons:
   • a transition that starts inside a cross-document view transition never
     advances — the element is painted from the snapshot and stays at its start;
   • an animation restarts cleanly, and if it never runs the element is already
     in its final state rather than stranded at opacity 0.
   With JavaScript off or broken, nothing is hidden. */
.reveal.is-in{animation:reveal-in .95s var(--e-out) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes reveal-in{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:none}}

.split .line{display:block}
.split .line>span{display:block}
.split.is-in .line>span{animation:line-in 1.05s var(--e-out) both;animation-delay:calc(var(--l,0)*110ms)}
@keyframes line-in{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}

/* headings settle into focus, word by word — a lens finding its subject */
.focus-in>i{display:inline-block;font-style:inherit}
.focus-in.is-in>i{animation:focus-in 1.15s var(--e-out) both;animation-delay:calc(var(--w,0)*68ms)}
@keyframes focus-in{
  from{opacity:0;filter:blur(14px);transform:translateY(.2em) scale(1.02)}
  to{opacity:1;filter:blur(0);transform:none}
}

html.js .reveal:not(.is-in){opacity:0}
html.js .split:not(.is-in) .line>span{opacity:0}
html.js .focus-in:not(.is-in)>i{opacity:0}

/* media that is wiped in by a curtain rather than faded */
.wipe{position:relative;overflow:hidden}
.wipe::after{content:"";position:absolute;inset:0;z-index:2;background:var(--paper);transform-origin:right;transform:scaleX(0)}
.sec--deep .wipe::after,.coast .wipe::after,.on-dark .wipe::after{background:var(--ink-deep)}
html.js .wipe>*{transform:scale(1.14)}
html.js .wipe::after{transform:scaleX(1)}
.wipe.is-in>*{animation:wipe-zoom 1.6s var(--e-out) both}
.wipe.is-in::after{animation:wipe-open 1.25s var(--e-io) both}
@keyframes wipe-zoom{from{transform:scale(1.14)}to{transform:none}}
@keyframes wipe-open{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  html.js .reveal:not(.is-in),html.js .split:not(.is-in) .line>span,
  html.js .focus-in:not(.is-in)>i{opacity:1}
  html.js .wipe>*{transform:none}
  html.js .wipe::after{display:none}
  .reveal.is-in,.split.is-in .line>span,.focus-in.is-in>i,
  .wipe.is-in>*,.wipe.is-in::after{animation:none}
  .hero__scroll i,.loader__mark{animation:none}
  .btn::before{transition:none}
}

/* ============================================================= PRELOADER */
.loader{
  position:fixed;inset:0;z-index:9500;background:var(--ink-deep);color:var(--paper);
  display:grid;place-items:center;
  transition:transform 1.1s var(--e-io) .15s;
}
.loader.is-done{transform:translateY(-101%)}
.loader__inner{display:grid;justify-items:center;gap:1.6rem;text-align:center}
.loader__mark{width:clamp(140px,18vw,230px);opacity:0;animation:loaderIn .9s var(--e-out) .1s forwards}
@keyframes loaderIn{to{opacity:1}}
.loader__bar{width:min(46vw,320px);height:1px;background:rgba(220,232,238,.2);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--bronze-2);transition:width .35s var(--e-soft)}
.loader__n{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;color:rgba(220,232,238,.55)}
html.is-loading{overflow:hidden}

/* ------------------------------------------------------ page transition */
/* Departure-only wipe. The resting state is a plain transform rather than the
   end of an animation: if the compositor never runs the transition the page is
   still uncovered, instead of stranded behind a black panel. */
.curtain{position:fixed;inset:0;z-index:9200;background:var(--ink-deep);pointer-events:none;
  transform:translateY(101%);transition:transform .58s var(--e-io)}
.curtain.is-cover{transform:translateY(0)}

/* --------------------------------------------------------- custom cursor */
.cursor{
  position:fixed;top:0;left:0;z-index:9400;pointer-events:none;
  width:10px;height:10px;border-radius:100px;background:var(--bronze);
  transform:translate(-50%,-50%);mix-blend-mode:normal;
  transition:width .4s var(--e-out),height .4s var(--e-out),background .3s,opacity .3s;
  opacity:0;
}
.cursor.is-on{opacity:1}
.cursor__label{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:0;transition:opacity .25s;white-space:nowrap;
}
.cursor.is-big{width:82px;height:82px;background:var(--bronze)}
.cursor.is-big .cursor__label{opacity:1}
.cursor.is-link{width:38px;height:38px;background:color-mix(in srgb,var(--bronze) 32%,transparent);backdrop-filter:blur(2px)}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ================================================================ HEADER */
/* The bar rides over both surfaces, so it watches what is underneath it and
   flips. `is-over-light` is set by app.js from an observer on the dark bands. */
.site-head{position:fixed;inset:0 0 auto;z-index:1000;color:var(--paper);transition:transform .6s var(--e-out),color .45s}
.site-head.is-over-light{color:var(--ink-deep)}
.site-head.is-over-light .site-head__logo img{filter:invert(1) brightness(.16) saturate(1.4)}
.site-head.is-over-light.is-stuck::after{background:color-mix(in srgb,var(--paper) 88%,transparent);border-bottom-color:var(--line)}
.site-head.is-hidden{transform:translateY(-101%)}
.site-head__bar{
  position:relative;display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1rem,1.7vw,1.5rem) var(--gut);
  transition:padding .45s var(--e-out);
}
.site-head::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--ink-deep) 84%,transparent);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(220,232,238,.1);
  opacity:0;transition:opacity .5s var(--e-out);
}
.site-head.is-stuck::after{opacity:1}
.site-head.is-stuck .site-head__bar{padding-block:clamp(.6rem,1vw,.9rem)}
.site-head__logo{position:relative;display:block}
.site-head__logo img{width:clamp(120px,10.5vw,158px);height:auto;transition:width .45s var(--e-out)}
.site-head__logo .logo-on-light{display:none}
/* once the dark bar slides in behind it, the white mark is right again */
.site-head.is-stuck .site-head__logo img{width:clamp(104px,8.5vw,132px)}


.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:clamp(.6rem,2vw,2.2rem)}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.4em;padding:.5rem 0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:currentColor;opacity:.7;transition:opacity .3s;
}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--bronze-2);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out)}
.nav__link:hover,.nav__link.is-active{opacity:1}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.site-head__actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:100px;border:1px solid currentColor;opacity:.55;transition:opacity .3s,background .3s,color .3s}
.icon-btn:hover{opacity:1}
.icon-btn .i{width:17px;height:17px}
.icon-btn__count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:100px;background:var(--bronze-chip);color:#fff;font-family:var(--mono);font-size:.56rem;line-height:1}
.icon-btn--wa{display:none}
.menu-btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:100px;
  border:1px solid currentColor;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .35s,color .35s;
}
.menu-btn:hover{background:currentColor}
.menu-btn:hover span{color:var(--ink)}
.menu-btn i{display:grid;gap:3px}
.menu-btn i b{display:block;width:14px;height:1px;background:currentColor;transition:transform .4s var(--e-out)}
.menu-btn[aria-expanded=true] i b:first-child{transform:translateY(2px) rotate(45deg)}
.menu-btn[aria-expanded=true] i b:last-child{transform:translateY(-2px) rotate(-45deg)}

@media (max-width:1180px){
  .nav{display:none}
  .site-head__actions .btn{display:none}
  .icon-btn--wa{display:grid}
}

/* --------------------------------------------------------- overlay menu */
.omenu{position:fixed;inset:0;z-index:1100;color:var(--paper);pointer-events:none}
.omenu__bg{position:absolute;inset:0;background:var(--ink);transform:translateY(-101%);transition:transform .8s var(--e-io)}
.omenu.is-open{pointer-events:auto}
.omenu.is-open .omenu__bg{transform:translateY(0)}
.omenu__inner{
  position:relative;height:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(6rem,12vh,9rem) var(--gut) clamp(2rem,5vh,3.5rem);
  display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(2rem,6vw,6rem);align-items:center;
  overflow-y:auto;
}
.omenu__nav{display:grid;gap:.1rem}
.omenu__nav a{
  position:relative;display:flex;align-items:baseline;gap:1.2rem;padding:.28rem 0;
  font-family:var(--serif);font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.06;
  opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out),color .35s;
  transition-delay:calc(var(--n,0)*55ms + .25s);
}
.omenu.is-open .omenu__nav a{opacity:1;transform:none}
.omenu__nav a em{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.18em;color:var(--bronze-2);opacity:.8}
.omenu__nav a:hover{color:var(--bronze-2)}
.omenu__side{display:grid;gap:1.6rem;opacity:0;transform:translateY(20px);transition:.9s var(--e-out) .5s}
.omenu.is-open .omenu__side{opacity:1;transform:none}
.omenu__fig{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-lg)}
.omenu__fig img{width:100%;height:100%;object-fit:cover}
.omenu__contact{display:grid;gap:.6rem}
.omenu__contact a{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:rgba(220,232,238,.72);transition:color .3s}
.omenu__contact a:hover{color:var(--paper)}
.omenu__close{position:fixed;top:clamp(1rem,1.7vw,1.5rem);right:var(--gut);z-index:2}
@media (max-width:900px){
  .omenu__inner{grid-template-columns:1fr;align-items:start;gap:2.5rem}
  .omenu__fig{display:none}
}

/* ------------------------------------------------------------ side rail */
/* No mix-blend-mode here: a fixed, blended overlay forces the whole document
   into one composited group and re-blends it on every scroll, which locks up
   the renderer on a long page. A fixed accent colour reads on both surfaces. */
.rail{position:fixed;left:clamp(.9rem,1.5vw,1.7rem);top:50%;transform:translateY(-50%);z-index:500;display:grid;gap:1.2rem;justify-items:center;pointer-events:none;color:var(--bronze);opacity:.65}
.rail__n{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em}
.rail__track{width:1px;height:150px;background:rgba(177,111,79,.28);position:relative;overflow:hidden}
.rail__track i{position:absolute;inset:0 auto auto 0;width:100%;height:0;background:var(--bronze);transition:height .2s linear}
@media (max-width:1500px){.rail{display:none}}

/* ================================================================== HERO */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate}
/* The hero fades into the section below it. This has to sit UNDER .hero__inner
   (z-index 3) — over the top it washed out the finder and its button, which are
   the two things at the foot of the screen a visitor most needs to read. */
.hero::after{content:"";position:absolute;inset:auto 0 0;height:20vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink-deep))}
.hero__stage{position:absolute;inset:0;z-index:0}
.hero__stage canvas,.hero__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__stage img{transition:opacity 1s var(--e-out)}
.hero__veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(3,15,27,.7) 0%,rgba(3,15,27,.2) 28%,rgba(3,15,27,.72) 66%,rgba(3,15,27,.97) 100%),
  linear-gradient(100deg,rgba(6,23,38,.88) 0%,rgba(6,23,38,.52) 30%,rgba(6,23,38,.07) 62%,rgba(6,23,38,0) 82%)}
.hero__grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:repeat(12,1fr);
}
.hero__grid span{border-left:1px solid rgba(220,232,238,.055)}
.hero__grid span:last-child{border-right:1px solid rgba(220,232,238,.055)}
@media (max-width:900px){.hero__grid{display:none}}

.hero__inner{
  position:relative;z-index:3;height:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(7rem,13vh,9rem) var(--gut) clamp(1.6rem,3.4vh,2.6rem);
  display:grid;grid-template-rows:1fr auto;gap:clamp(1.5rem,3vh,2.5rem);
}
.hero__type{align-self:center;max-width:min(100%,760px)}
.hero__title{max-width:11ch}
.hero__title{font-size:var(--fs-mega);line-height:.9;letter-spacing:-.035em}
.hero__title em{display:block;font-style:italic;margin-left:.12em;background-image:var(--metal-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero__lead{margin-top:1.8rem;max-width:38ch;font-size:var(--fs-lead);color:rgba(220,232,238,.8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}

/* the slide counter + caption, bottom right */
.hero__bottom{
  position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem;
  padding-top:clamp(1.2rem,2.4vh,1.8rem);border-top:1px solid rgba(233,242,246,.24);
}
/* The finder sits over whatever photograph happens to be on screen, so it
   carries its own ground rather than trusting the image to be dark there. */
.hero__bottom::before{
  content:"";position:absolute;inset:-1.4rem calc(var(--gut)*-1) calc(var(--gut)*-1);
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,15,27,.55) 26%,rgba(3,15,27,.82) 70%,rgba(3,15,27,.9));
}
.hero__caption{text-align:right;display:grid;gap:.45rem;justify-items:end;max-width:24ch;cursor:pointer}
.hero__caption .meta{color:rgba(233,242,246,.66)}
.hero__caption b{font-family:var(--serif);font-weight:300;font-size:1.35rem;line-height:1.15}
.hero__dots{display:flex;gap:.45rem;margin-top:.5rem}
.hero__dots button{width:26px;height:2px;background:rgba(220,232,238,.3);transition:background .4s}
.hero__dots button[aria-current=true]{background-image:var(--metal);background-color:var(--bronze-2)}
@media (max-width:1024px){
  .hero__caption{display:none}
  .hero__bottom{grid-template-columns:1fr}
}

/* --------------------------------------------------------- search sheet */
.finder{position:relative;z-index:4}
.finder__line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,3.1vw,2.5rem);line-height:1.4;letter-spacing:-.015em;
}
.finder__line>span{color:var(--fg-mute)}
.hero .finder__line>span{color:rgba(233,242,246,.72)}
.finder__slot{
  position:relative;display:inline-flex;align-items:center;gap:.3em;
  color:var(--accent-ink);border-bottom:1px solid currentColor;padding:0 .12em .04em;
  transition:color .3s,border-color .3s;cursor:pointer;
}
.hero .finder__slot{color:var(--bronze-2)}
.finder__slot:hover,.finder__slot.is-open{color:var(--fg)}
.hero .finder__slot:hover,.hero .finder__slot.is-open{color:#fff}
.finder__slot svg{width:.42em;height:.42em;opacity:.6;transition:transform .35s var(--e-out)}
.finder__slot.is-open svg{transform:rotate(180deg)}
.finder__slot select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  background:none;border:0;padding:0;
}

/* ------------------------------------------------------------- the picker
   Our own menu over the native one. Small, mono, and it shows how many homes
   sit behind each choice — the number is the useful part. */
.picker{
  position:absolute;top:calc(100% + .7rem);left:0;z-index:70;min-width:min(20rem,76vw);
  background:color-mix(in srgb,var(--ink-deep) 94%,transparent);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(233,242,246,.16);border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top left;
  transition:opacity .22s var(--e-out),transform .28s var(--e-out);
  overflow:hidden;
}
.picker.is-open{opacity:1;transform:none}
.picker--up{top:auto;bottom:calc(100% + .7rem);transform-origin:bottom left;transform:translateY(8px) scale(.98)}
.picker__head{
  padding:.85rem 1rem .55rem;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-2);
  border-bottom:1px solid rgba(233,242,246,.12);
}
.picker__list{max-height:min(26rem,56vh);overflow-y:auto;padding:.35rem;scrollbar-width:thin}
.picker__list::-webkit-scrollbar{width:3px}
.picker__list::-webkit-scrollbar-thumb{background:rgba(233,242,246,.2)}
.picker__opt{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;width:100%;
  padding:.6rem .75rem;border-radius:calc(var(--r) - 6px);text-align:left;
  font-family:var(--sans);font-size:.9rem;line-height:1.25;color:rgba(233,242,246,.8);
  transition:background .2s,color .2s;
}
.picker__opt em{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.1em;color:rgba(233,242,246,.55)}
.picker__opt:hover,.picker__opt:focus-visible{background:rgba(233,242,246,.09);color:#fff;outline:none}
.picker__opt[aria-selected=true]{color:var(--bronze-2)}
.picker__opt[aria-selected=true] em{color:var(--bronze-2)}
.picker__opt[disabled]{opacity:.3;cursor:default}
@media (prefers-reduced-motion:reduce){.picker{transition:none}}

.finder__go{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:1.4rem}
.finder__count{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.hero .finder__count{color:rgba(233,242,246,.72)}
.finder__count b{color:var(--accent-ink);font-weight:400}
.hero .finder__count b{color:var(--bronze-2)}

.hero__scroll{position:absolute;right:var(--gut);bottom:clamp(2rem,4vh,3rem);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(220,232,238,.45);writing-mode:vertical-rl}
.hero__scroll i{display:block;width:1px;height:48px;background:linear-gradient(rgba(220,232,238,.45),transparent);animation:scrollPulse 2.6s var(--e-io) infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (max-width:1180px){.hero__scroll{display:none}}

/* ====================================================== PROPERTY (card) */
/* No card. Image, hairline, metadata — like a gallery catalogue. */
.pcard{position:relative}
.pcard__link{display:grid;gap:1.1rem}
.pcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--shade)}
.pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e-out),opacity .8s var(--e-out)}
.pcard__img--alt{opacity:0}
.pcard:hover .pcard__img{transform:scale(1.05)}
.pcard:hover .pcard__img--alt{opacity:1}
.pcard__badge{
  position:absolute;left:0;top:0;z-index:2;padding:.5rem .85rem;
  background:var(--bronze-chip);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
}
.pcard__shots{
  position:absolute;right:.8rem;bottom:.8rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .65rem;background:rgba(0,8,20,.5);backdrop-filter:blur(8px);color:var(--paper);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
}
.pcard__shots .i{width:13px;height:13px}
.pcard__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.pcard__ref{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--fg-mute)}
.pcard__place{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.pcard__title{font-size:1.42rem;line-height:1.1;transition:color .3s}
.pcard:hover .pcard__title{color:var(--accent-ink)}
.pcard__foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pcard__price{font-family:var(--serif);font-size:1.4rem;letter-spacing:-.01em;white-space:nowrap}
.pcard__facts{display:flex;gap:.9rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--fg-mute)}
.pcard__fav{
  position:absolute;right:.8rem;top:.8rem;z-index:3;display:grid;place-items:center;
  width:36px;height:36px;border-radius:100px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.4);color:var(--ink);
  transition:transform .45s var(--e-out),background .3s,color .3s;
}
.pcard__fav:hover{transform:scale(1.1)}
.pcard__fav .i{width:16px;height:16px}
.pcard__fav[aria-pressed=true]{background:var(--bronze-chip);border-color:var(--bronze-chip);color:#fff}
.pcard__fav[aria-pressed=true] .i{fill:currentColor}

/* ======================================================= INDEX LIST VIEW */
.index{border-top:1px solid var(--line)}
.index__row{
  position:relative;display:grid;
  grid-template-columns:4.5rem minmax(0,2.1fr) 1fr 8.5rem 9.5rem 3rem;
  align-items:center;gap:1.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--line);
  transition:padding .5s var(--e-out),color .35s;
}
.index__row:hover{padding-left:1.2rem;color:var(--accent-ink)}
.index__row::before{
  content:"";position:absolute;inset:0 -1.2rem;z-index:-1;background:var(--shade);
  opacity:0;transition:opacity .4s;
}
.index__row:hover::before{opacity:1}
.index__n{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--fg-mute)}
.index__name{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.1}
.index__place,.index__spec{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute)}
.index__price{font-family:var(--serif);font-size:1.2rem;text-align:right}
.index__go{display:grid;place-items:center;justify-self:end;width:34px;height:34px;border-radius:100px;border:1px solid var(--line-2);opacity:0;transform:translateX(-8px);transition:.45s var(--e-out)}
.index__row:hover .index__go{opacity:1;transform:none}
.index__go .i{width:15px;height:15px}
@media (max-width:1100px){
  .index__row{grid-template-columns:2.6rem minmax(0,1fr) auto;gap:1rem;row-gap:.3rem}
  .index__place{grid-column:2;font-size:.62rem}
  .index__spec{display:none}
  .index__price{grid-column:3;grid-row:1;font-size:1.05rem}
  .index__go{display:none}
}
/* the image that follows the pointer */
.peek{
  position:fixed;top:0;left:0;z-index:800;width:320px;aspect-ratio:4/3;
  pointer-events:none;overflow:hidden;opacity:0;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .4s var(--e-out),transform .5s var(--e-out);
}
.peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:1100px),(hover:none){.peek{display:none}}

/* ====================================================== COAST (horizontal) */
.coast{position:relative;overflow:hidden;padding-block:var(--sec-y) 0;
  background:
    radial-gradient(110% 70% at 50% -8%, var(--sun-cool) 0%, transparent 62%),
    radial-gradient(60% 55% at 88% 92%, var(--sun-warm), transparent 70%),
    linear-gradient(180deg, rgba(6,26,43,.94), rgba(3,15,27,.97) 60%, rgba(3,15,27,.99));}
.coast__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;max-width:var(--wrap);margin:0 auto clamp(2.4rem,4vw,3.6rem);padding-inline:var(--gut)}
.coast__ctrl{display:flex;gap:.6rem}
.coast__ctrl button{display:grid;place-items:center;width:46px;height:46px;border-radius:100px;border:1px solid var(--line-2);color:var(--paper);transition:background .35s,opacity .3s,border-color .3s}
.coast__ctrl button:hover{background:var(--bronze);border-color:var(--bronze)}
.coast__ctrl button:disabled{opacity:.25;cursor:default;background:none;border-color:var(--line-2)}
.coast__ctrl .i{width:17px;height:17px}
.coast__ctrl button:first-child .i{transform:rotate(180deg)}
.coast__rail{display:flex;gap:clamp(1rem,2vw,2rem);overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 var(--gut) clamp(4rem,7vw,6rem);scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.coast__rail::-webkit-scrollbar{display:none}
.coast__rail.is-drag{cursor:grabbing}
.region{position:relative;flex:0 0 clamp(240px,24vw,330px);scroll-snap-align:start;display:grid;gap:1.1rem}
.region__fig{position:relative;aspect-ratio:4/5;overflow:hidden}
.region__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.region:hover .region__fig img{transform:scale(1.06)}
.region__i{position:absolute;left:0;top:0;z-index:2;padding:.5rem .8rem;background:var(--bronze-chip);color:#fff;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em}
.region__name{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05}
.region__meta{display:flex;gap:.8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);padding-top:.6rem;border-top:1px solid var(--line)}
.region__desc{font-size:.88rem;line-height:1.5;color:var(--fg-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ================================================== STACKED CARDS (sticky) */
/* ------------------------------------------------------------- the prism
   "Three ways we work" as three faces of one solid, rather than three cards.
   Real CSS 3D: the faces share their long edges, so the bronze arrises line
   up and it reads as an object being turned rather than a slideshow. */
.prism{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (max-width:900px){.prism{grid-template-columns:1fr;gap:2.5rem}}

.prism__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.prism__tabs button{
  display:inline-flex;align-items:baseline;gap:.6em;
  padding:.62rem 1.05rem;border-radius:100px;border:1px solid var(--line-2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);transition:color .3s,border-color .3s,background .3s;
}
.prism__tabs button span{font-size:.56rem;opacity:.55}
.prism__tabs button:hover{color:var(--fg);border-color:var(--bronze)}
.prism__tabs button[aria-selected=true]{color:var(--fg);border-color:transparent;background:var(--paper-3)}
.prism__tabs button[aria-selected=true] span{color:var(--bronze-chip);opacity:1}

.prism__copy{display:grid}
.prism__panel{
  grid-area:1/1;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.prism__panel.is-on{opacity:1;transform:none;pointer-events:auto}
.prism__panel h3{font-size:clamp(1.8rem,3.2vw,2.8rem);margin-bottom:1rem}
.prism__panel p{color:var(--fg-soft);max-width:42ch}
.prism__panel .tlink{margin-top:1.8rem}

.prism__stage{
  --ph:clamp(300px,42vh,460px);
  position:relative;height:var(--ph);perspective:1500px;
  cursor:grab;touch-action:pan-y;user-select:none;
}
.prism__stage.is-drag{cursor:grabbing}
/* the ground it sits on — without a shadow it floats and stops reading as solid */
.prism__stage::after{
  content:"";position:absolute;left:10%;right:10%;bottom:-6%;height:12%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(6,23,38,.3),transparent 72%);
  filter:blur(12px);
}
.prism__solid{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--turn,0deg));
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.prism__solid.is-drag{transition:none}
.prism__face{
  position:absolute;inset:0;overflow:hidden;border-radius:var(--r);
  /* an equilateral prism: each face sits one apothem out from the axis */
  transform:rotateX(calc(var(--f) * 120deg)) translateZ(calc(var(--ph) * .28868));
  backface-visibility:hidden;
  box-shadow:inset 0 1px 0 rgba(206,155,114,.5),inset 0 -1px 0 rgba(206,155,114,.5),var(--shadow-lg);
}
.prism__face img{width:100%;height:100%;object-fit:cover}
.prism__face figcaption{
  position:absolute;left:clamp(1.3rem,2.6vw,2.2rem);bottom:clamp(1.1rem,2.4vw,1.9rem);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);
  color:#fff;text-shadow:0 2px 26px rgba(3,15,27,.55);
}
/* whatever is turned away falls into shadow */
.prism__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,15,27,.6),rgba(3,15,27,.1) 45%,rgba(3,15,27,.78));
  opacity:1;transition:opacity 1s cubic-bezier(.16,1,.3,1);
}
.prism__face.is-front::after{opacity:.4}

/* Without scripting there is nothing to turn it with, so it lies flat. */
html:not(.js) .prism__tabs{display:none}
html:not(.js) .prism__copy{gap:2.5rem}
html:not(.js) .prism__panel{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
html:not(.js) .prism__stage{height:auto;perspective:none}
html:not(.js) .prism__solid{position:static;transform:none;display:grid;gap:1.2rem}
html:not(.js) .prism__face{position:relative;inset:auto;transform:none;aspect-ratio:16/9}
html:not(.js) .prism__face::after{opacity:.4}

@media (prefers-reduced-motion:reduce){
  .prism__stage{perspective:none;cursor:default}
  .prism__solid{transform:none;transition:none}
  .prism__face{transform:none;opacity:0;transition:opacity .3s;box-shadow:var(--shadow-lg)}
  .prism__face.is-front{opacity:1}
  .prism__face::after{transition:none}
  .prism__panel{transition:none}
}

/* ========================================================== FILTER SHEET */
.tools{position:sticky;top:0;z-index:600;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--line);transition:top .5s var(--e-out)}
body.head-visible .tools{top:70px}
.tools__bar{display:flex;align-items:center;gap:1.5rem;max-width:var(--wrap);margin-inline:auto;padding:1rem var(--gut)}
.tools__q{flex:1;min-width:0}
.tools__q .finder__line{font-size:clamp(1.05rem,1.75vw,1.45rem);line-height:1.5}
.tools__q .finder__line>span{color:var(--fg-soft)}
.tools__views{display:flex;gap:.2rem;padding:.25rem;border:1px solid var(--line);border-radius:100px;flex:none}
.tools__views button{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55em 1.05em;border-radius:100px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);transition:background .4s var(--e-out),color .3s;
}
.tools__views button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.tools__views .i{width:14px;height:14px}
.tools__meta{display:flex;align-items:center;gap:1.2rem;flex:none}
.tools__count{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.tools__count b{color:var(--fg);font-weight:400}
.tools__reset{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:1100px){
  .tools__bar{flex-wrap:wrap;gap:.9rem}
  .tools__q{flex-basis:100%}
  .tools__meta{margin-left:auto}
  .tools__views button span{display:none}
  .tools__views button{padding:.6em .9em}
}

.sheet{position:fixed;inset:0;z-index:1200;pointer-events:none}
.sheet__bg{position:absolute;inset:0;background:rgba(0,8,20,.7);opacity:0;transition:opacity .5s var(--e-out);backdrop-filter:blur(4px)}
.sheet__panel{
  position:absolute;inset:auto 0 0;max-height:82vh;overflow-y:auto;
  background:var(--paper-2);border-top:1px solid var(--line);
  transform:translateY(101%);transition:transform .65s var(--e-io);
  padding:clamp(1.5rem,3vw,2.6rem) var(--gut) clamp(2rem,4vw,3rem);
}
.sheet.is-open{pointer-events:auto}
.sheet.is-open .sheet__bg{opacity:1}
.sheet.is-open .sheet__panel{transform:translateY(0)}
.sheet__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin:0 auto 1.8rem}
.sheet__head h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.sheet__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:.6rem;max-width:var(--wrap);margin-inline:auto}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.2rem;border:1px solid var(--line);background:var(--card);
  text-align:left;transition:background .35s,border-color .35s,transform .4s var(--e-out);
}
.opt:hover{border-color:var(--bronze);transform:translateY(-2px)}
.opt[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt b{font-family:var(--serif);font-weight:300;font-size:1.15rem;line-height:1.1}
.opt span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;opacity:.6}
.opt[disabled]{opacity:.32;pointer-events:none}

/* ------------------------------------------------------------ shortlist */
.tray{
  position:fixed;right:var(--gut);bottom:clamp(1rem,3vh,2rem);z-index:900;
  transform:translateY(calc(100% + 3rem));
  display:flex;align-items:center;gap:1.2rem;
  padding:.7rem .8rem .7rem 1.4rem;border-radius:100px;
  background:var(--ink);backdrop-filter:blur(18px);border:1px solid rgba(237,242,244,.18);box-shadow:var(--shadow-lg);
  transition:transform .7s var(--e-out);max-width:calc(100vw - 2rem);
}
.tray.is-on{transform:translateY(0)}
.tray__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tray__n b{color:var(--bronze-2);font-weight:400}
.tray__thumbs{display:flex}
.tray__thumbs img{width:34px;height:34px;object-fit:cover;border-radius:100px;border:2px solid var(--ink);margin-left:-10px}
.tray__thumbs img:first-child{margin-left:0}
@media (max-width:640px){.tray__thumbs{display:none}.tray{padding-left:1.1rem}}

/* ================================================================== MAP */
.mapview{position:relative;background:var(--ink-deep);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mapview svg{display:block;width:100%;height:auto}
.map-sea{fill:#000814}
.map-land{fill:#0A2440;stroke:rgba(190,221,233,.22);stroke-width:1}
.map-grid line{stroke:rgba(190,221,233,.05);stroke-width:1}
.map-coast{fill:none;stroke:rgba(190,221,233,.55);stroke-width:1.5}
.map-pin{cursor:pointer}
.map-pin circle.halo{fill:var(--bronze);opacity:.14;transition:opacity .4s,r .4s var(--e-out)}
.map-pin circle.dot{fill:var(--bronze);transition:r .4s var(--e-out)}
.map-pin text{fill:rgba(220,232,238,.85);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:fill .3s;paint-order:stroke;stroke:rgba(0,8,20,.75);stroke-width:3px;stroke-linejoin:round}
.map-pin text.n{fill:var(--bronze-2);font-size:11px}
.map-pin:hover circle.halo,.map-pin.is-on circle.halo{opacity:.3}
.map-pin:hover circle.dot,.map-pin.is-on circle.dot{fill:var(--bronze-2)}
.map-pin:hover text,.map-pin.is-on text{fill:#fff}
.mapview__hint{position:absolute;left:1.4rem;bottom:1.2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,232,238,.45)}
.mapview__legend{position:absolute;right:1.4rem;top:1.2rem;display:grid;gap:.4rem;text-align:right}
.mapview__legend span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(220,232,238,.45)}

/* ========================================================= DETAIL / MISC */
.pdetail{padding-top:clamp(7rem,12vh,9.5rem)}
.pdetail__top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem;padding-bottom:clamp(1.4rem,2.5vw,2rem);border-bottom:1px solid var(--line)}
.pdetail__title{margin:.9rem 0 .6rem;font-size:clamp(2.1rem,4.6vw,4rem)}
.pdetail__loc{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.pdetail__price{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,3rem);letter-spacing:-.02em;text-align:right;color:var(--fg)}
.on-dark .pdetail__price,.sec--deep .pdetail__price{
  background-image:var(--metal-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.pdetail__price small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:.5rem}
@media (max-width:700px){.pdetail__top{grid-template-columns:1fr}.pdetail__price{text-align:left}}

.gal{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.4rem;height:clamp(340px,62vh,680px);margin-top:clamp(1.4rem,2.5vw,2rem)}
.gal__item{position:relative;overflow:hidden;background:var(--shade);cursor:pointer}
.gal__item:first-child{grid-row:1/3}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e-out)}
.gal__item:hover img{transform:scale(1.04)}
.gal__all{position:absolute;right:1rem;bottom:1rem;z-index:3}
@media (max-width:760px){.gal{grid-template-columns:1fr;grid-template-rows:1fr;height:56vh}.gal__item:not(:first-child){display:none}.gal__item:first-child{grid-row:auto}}

.pdetail__grid{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(2rem,5vw,5rem);align-items:start;padding-block:clamp(2.5rem,5vw,4.5rem)}
@media (max-width:1000px){.pdetail__grid{grid-template-columns:1fr}}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line);margin-bottom:2.6rem}
.fact b{display:block;font-family:var(--serif);font-weight:300;font-size:1.9rem;line-height:1}
.fact span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);margin-top:.4rem;display:block}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:.5rem 1rem;margin-top:1.6rem}
.feature-grid li{display:flex;align-items:flex-start;gap:.6rem;font-size:.86rem;color:var(--fg-soft)}
.feature-grid .i{width:13px;height:13px;margin-top:.36em;color:var(--accent);stroke-width:2.4}

.aside{position:sticky;top:110px;display:grid;gap:1rem}
.aside__card{padding:clamp(1.5rem,2.6vw,2rem);border:1px solid var(--line);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.aside__agent{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.aside__agent img{width:56px;height:56px;border-radius:100px;object-fit:cover;object-position:top center}
.aside__agent b{display:block;font-size:.95rem;font-weight:500}
.aside__agent span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.aside__actions{display:grid;gap:.5rem}
.aside__meta{display:grid;gap:.6rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.06em}
.aside__meta div{display:flex;justify-content:space-between;gap:1rem;color:var(--fg-mute)}
.aside__meta b{font-weight:400;color:var(--fg)}
.aside__nudge{padding:1.4rem;border:1px solid rgba(118,173,194,.4);background:rgba(118,173,194,.09);font-size:.87rem;color:var(--fg-soft)}
.aside__nudge b{display:block;color:var(--fg);margin-bottom:.5rem;font-family:var(--serif);font-size:1.15rem;font-weight:300}
.aside__nudge .tlink{display:flex;width:fit-content;margin-top:1rem;color:var(--accent-ink)}

/* --------------------------------------------------------- cost calculator */
.calc{border:1px solid var(--line);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:clamp(1.5rem,2.6vw,2.2rem)}
.calc__rows{display:grid;gap:.85rem;margin-top:1.4rem}
.calc__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.9rem}
.calc__row span{color:var(--fg-soft)}
.calc__row b{font-family:var(--mono);font-size:.85rem;font-weight:400}
.calc__row--total{padding-top:.9rem;margin-top:.4rem;border-top:1px solid var(--line)}
.calc__row--total span{color:var(--fg);font-weight:500}
.calc__row--total b{font-family:var(--serif);font-size:1.5rem}
.calc__note{font-size:.76rem;color:var(--fg-mute);margin-top:1.2rem;line-height:1.5}
.calc__toggle{display:flex;gap:.3rem;padding:.25rem;border:1px solid var(--line);border-radius:100px;width:fit-content;margin-top:1.2rem}
.calc__toggle button{padding:.5em 1em;border-radius:100px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);transition:.35s var(--e-out)}
.calc__toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* =============================================================== LIGHTBOX */
.lb{position:fixed;inset:0;z-index:1300;background:var(--ink);display:grid;grid-template-rows:auto 1fr auto;opacity:0;pointer-events:none;transition:opacity .5s var(--e-out)}
.lb.is-open{opacity:1;pointer-events:auto}
.lb__bar{display:flex;align-items:center;justify-content:space-between;padding:1.2rem var(--gut);color:var(--paper);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em}
.lb__close{display:grid;place-items:center;width:42px;height:42px;border-radius:100px;border:1px solid rgba(220,232,238,.25);color:var(--paper);transition:background .3s}
.lb__close:hover{background:rgba(220,232,238,.12)}
.lb__stage{position:relative;display:grid;place-items:center;overflow:hidden;perspective:1800px;padding-block:1rem}
.lb__slide{position:absolute;inset-block:0;width:min(88vw,1300px);display:flex;align-items:center;justify-content:center;transition:transform .8s var(--e-out),opacity .6s var(--e-out),filter .6s;will-change:transform}
.lb__slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:54px;height:54px;border-radius:100px;background:rgba(220,232,238,.08);border:1px solid rgba(220,232,238,.2);color:var(--paper);transition:background .3s}
.lb__nav:hover{background:var(--bronze);border-color:var(--bronze)}
.lb__nav--prev{left:clamp(.6rem,2vw,2rem)}
.lb__nav--prev .i{transform:rotate(180deg)}
.lb__nav--next{right:clamp(.6rem,2vw,2rem)}
.lb__thumbs{display:flex;gap:.35rem;overflow-x:auto;padding:1rem var(--gut) 1.4rem;scrollbar-width:none}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumbs button{flex:none;width:84px;aspect-ratio:4/3;overflow:hidden;opacity:.35;transition:opacity .3s,transform .35s var(--e-out)}
.lb__thumbs button.is-on{opacity:1;transform:translateY(-3px)}
.lb__thumbs img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.lb__thumbs{display:none}}

/* ================================================================= TOAST */
.toast{position:fixed;left:50%;bottom:5.8rem;z-index:1400;transform:translate(-50%,180%);display:flex;align-items:center;gap:.7rem;padding:.8rem 1.3rem;background:var(--bronze);color:var(--ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;transition:transform .6s var(--e-out)}
.toast.is-on{transform:translate(-50%,0)}
.toast .i{width:15px;height:15px}

/* ================================================================ PIECES */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.media-split--rev .media-split__fig{order:-1}
.media-split__fig{position:relative;aspect-ratio:4/5;overflow:hidden}
.media-split__fig img{width:100%;height:100%;object-fit:cover}
.media-split__fig--wide{aspect-ratio:5/4}
.media-split__body>p{margin-top:1.5rem;color:var(--fg-soft);max-width:50ch}
.media-split__body .btn,.media-split__body .tlink{margin-top:2.2rem}
.media-split__badge{position:absolute;left:0;bottom:0;z-index:3;padding:1.1rem 1.5rem;background:var(--paper);color:var(--ink)}
.media-split__badge b{display:block;font-family:var(--serif);font-weight:300;font-size:2.1rem;line-height:1}
.media-split__badge span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
@media (max-width:860px){.media-split{grid-template-columns:1fr}.media-split--rev .media-split__fig{order:0}}

.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;padding:clamp(1.2rem,2.2vw,1.8rem) 0;text-align:left;font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.15;transition:color .35s,padding-left .5s var(--e-out)}
.acc__btn:hover{color:var(--accent-ink);padding-left:.6rem}
.acc__sign{position:relative;flex:none;width:30px;height:30px;border-radius:100px;border:1px solid var(--line-2);transition:background .35s,border-color .35s,transform .55s var(--e-out)}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;inset:50% 26%;height:1px;background:currentColor;transform:translateY(-50%);transition:transform .45s var(--e-out),opacity .3s}
.acc__sign::after{transform:translateY(-50%) rotate(90deg)}
.acc__item.is-open .acc__sign{background:var(--bronze);border-color:var(--bronze);color:var(--ink);transform:rotate(180deg)}
.acc__item.is-open .acc__sign::after{opacity:0}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e-out)}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding-bottom:1.8rem;color:var(--fg-soft);max-width:62ch}

.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));gap:clamp(1rem,2vw,1.8rem)}
.member{display:grid;gap:.9rem}
.member__ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--shade)}
.member__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.1s var(--e-out),filter .7s}
.member:hover .member__ph img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.member__name{font-family:var(--serif);font-size:1.15rem;line-height:1.1}
.member__role{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);margin-top:.3rem}
.member__links{display:flex;gap:.7rem;margin-top:.7rem;opacity:0;transform:translateY(6px);transition:.45s var(--e-out)}
.member:hover .member__links,.member:focus-within .member__links{opacity:1;transform:none}
.member__links a{color:var(--accent-ink)}
.member__links .i{width:15px;height:15px}

.vcard{position:relative;padding:clamp(1.6rem,2.8vw,2.4rem) 0;border-top:1px solid var(--line)}
.vcard__n{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--accent-ink);display:block;margin-bottom:1.2rem}
.vcard h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.8rem}
.vcard p{font-size:.93rem;color:var(--fg-soft)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--line);padding-top:clamp(2.2rem,4vw,3.4rem)}
.stat__n{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,5.6vw,5rem);line-height:.95;letter-spacing:-.035em;color:var(--accent)}
/* statistics and prices are the two places value is stated, so they are struck
   in metal — on the dark surfaces, where a metal actually reads */
.sec--deep .stat__n,.on-dark .stat__n,.coast .stat__n{
  background-image:var(--metal-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat__l{margin-top:.9rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);max-width:22ch;line-height:1.7}


.artcard{display:grid;gap:1rem}
.artcard__ph{aspect-ratio:16/11;overflow:hidden;background:var(--shade)}
.artcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.artcard:hover .artcard__ph img{transform:scale(1.05)}
.artcard__date{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.artcard__title{font-size:1.35rem;line-height:1.12;transition:color .3s}
.artcard:hover .artcard__title{color:var(--accent-ink)}
.artcard__ex{font-size:.88rem;color:var(--fg-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.phero{position:relative;display:flex;align-items:flex-end;min-height:min(76svh,720px);padding-block:clamp(9rem,17vh,12rem) clamp(3rem,7vh,5rem);color:var(--paper);overflow:hidden;background:var(--ink)}
.phero::after{content:"";position:absolute;inset:auto 0 0;height:16vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--ink-deep))}
.phero--sm{min-height:min(58svh,500px)}
.phero__media{position:absolute;inset:0;overflow:hidden}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,23,38,.66) 0%,rgba(6,23,38,.26) 32%,rgba(6,23,38,.66) 72%,rgba(6,23,38,.96) 100%),
  linear-gradient(96deg,rgba(6,23,38,.9) 0%,rgba(6,23,38,.56) 26%,rgba(6,23,38,.12) 58%,rgba(6,23,38,0) 80%)}
.phero__inner{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.phero__title{max-width:15ch;font-size:var(--fs-h1)}
.phero__title em{display:block;font-style:italic;background-image:var(--metal-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.phero__lead{margin-top:1.5rem;max-width:46ch;font-size:var(--fs-lead);color:rgba(220,232,238,.75)}
.phero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.phero .eyebrow{color:var(--bronze-2)}

.prose{max-width:66ch}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2.8rem 0 1rem}
.prose h3{font-size:clamp(1.3rem,2vw,1.6rem);margin:2.2rem 0 .8rem}
.prose p{margin-bottom:1.15rem;color:var(--fg-soft)}
.prose p:first-of-type{font-size:var(--fs-lead);color:var(--fg);line-height:1.5}
.prose ul{display:grid;gap:.65rem;margin:0 0 1.5rem}
.prose ul li{position:relative;padding-left:1.5rem;color:var(--fg-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--bronze)}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

.tabs{display:inline-flex;gap:.25rem;padding:.28rem;border:1px solid var(--line);border-radius:100px}
.tab{padding:.65em 1.5em;border-radius:100px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);transition:background .45s var(--e-out),color .3s}
.tab[aria-selected=true]{background:var(--ink);color:var(--paper)}
.on-dark .tab[aria-selected=true],.sec--deep .tab[aria-selected=true]{background:var(--paper);color:var(--ink)}

.tabpanel[hidden]{display:none}
.tabpanel{animation:fadeUp .8s var(--e-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.crumbs{display:flex;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.crumbs li{display:flex;gap:.6rem}
.crumbs li:not(:last-child)::after{content:"/";opacity:.5}
.crumbs a:hover{color:var(--accent)}

.jobcard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:clamp(1.4rem,2.6vw,2rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:padding-left .5s var(--e-out)}
.jobcard:hover{padding-left:.8rem}
.jobcard__meta{display:flex;gap:1.2rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);margin-top:.5rem}

.map-embed{overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--shade)}
.map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.1) invert(.92)}

.newsletter__inner{display:grid;grid-template-columns:1fr minmax(320px,.85fr);gap:clamp(1.8rem,5vw,5rem);align-items:center}
.newsletter__form{display:grid;gap:1rem}
@media (max-width:860px){.newsletter__inner{grid-template-columns:1fr}}

.helpstrip__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1.4rem,3vw,3rem);padding-block:clamp(1.6rem,3vw,2.4rem);border-block:1px solid var(--line)}
.helpstrip__person{display:flex;align-items:center;gap:1rem}
.helpstrip__person img{width:64px;height:64px;border-radius:100px;object-fit:cover;object-position:top center}
.helpstrip__name{font-weight:500;font-size:.95rem}
.helpstrip__role{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.helpstrip__copy p{color:var(--fg-soft);margin-top:.5rem;font-size:.94rem}
.helpstrip__actions{display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:940px){.helpstrip__inner{grid-template-columns:1fr}}

.cta-search__grid{display:grid;grid-template-columns:1fr minmax(340px,.85fr);gap:clamp(2.4rem,6vw,6rem);align-items:center}
@media (max-width:1000px){.cta-search__grid{grid-template-columns:1fr}}

.results{padding-block:clamp(2.4rem,5vw,4rem) var(--sec-y)}
.results__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(1.6rem,3vw,3rem) clamp(1.1rem,2vw,2rem)}
.results__more{display:flex;justify-content:center;margin-top:clamp(2.6rem,5vw,4rem)}
.results__empty{text-align:center;padding:clamp(3rem,7vw,6rem) 0;max-width:52ch;margin-inline:auto}
.results__empty h3{margin-bottom:1rem}
.results__empty p{color:var(--fg-soft);margin-bottom:2rem}
.skeleton{background:var(--shade);aspect-ratio:4/3;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ================================================================ FOOTER */
.site-foot{position:relative;padding-top:clamp(4rem,8vw,7rem);overflow:hidden;
  background:
    radial-gradient(100% 60% at 50% 0%, var(--sun-cool) 0%, transparent 60%),
    radial-gradient(58% 60% at 82% 96%, var(--sun-warm), transparent 70%),
    linear-gradient(180deg, rgba(6,26,43,.96), var(--ink-deep) 42%);}
.site-foot__main{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:clamp(2.5rem,6vw,6rem);max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) clamp(3rem,5vw,4.5rem)}
.site-foot__logo img{width:170px}
.site-foot__claim{margin-top:1.6rem;font-family:var(--serif);font-weight:300;font-size:1.5rem;line-height:1.25;color:rgba(220,232,238,.8);max-width:20ch}
.site-foot__social{display:flex;gap:.6rem;margin-top:2rem}
.site-foot__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:100px;border:1px solid var(--line);transition:background .35s,border-color .35s}
.site-foot__social a:hover{background:var(--bronze);border-color:var(--bronze)}
.site-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:clamp(1.8rem,3vw,3rem)}
.site-foot__col h3{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-2);margin-bottom:1.4rem}
.site-foot__col ul{display:grid;gap:.75rem}
.site-foot__col a{font-size:.9rem;color:rgba(220,232,238,.66);transition:color .3s,padding-left .4s var(--e-out)}
.site-foot__col a:hover{color:var(--paper);padding-left:.35rem}
.site-foot__col address{font-style:normal;font-size:.88rem;line-height:1.8;color:rgba(220,232,238,.66);margin-bottom:1.1rem}
.site-foot__link{display:block;font-size:.88rem;color:rgba(220,232,238,.66);transition:color .3s}
.site-foot__link:hover{color:var(--bronze-2)}
.site-foot__mark{overflow:hidden;padding-inline:var(--gut);margin-bottom:-.14em;pointer-events:none}
.site-foot__mark span{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(3.2rem,15.4vw,15rem);line-height:.84;letter-spacing:.01em;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(220,232,238,.14)}
.site-foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin-inline:auto;padding:1.5rem var(--gut);border-top:1px solid var(--line);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(220,232,238,.4)}
.site-foot__legal nav{display:flex;gap:1.4rem}
.site-foot__legal a:hover{color:var(--paper)}
@media (max-width:820px){.site-foot__main{grid-template-columns:1fr}}

@media (max-width:640px){
  :root{--sec-y:clamp(3.6rem,11vw,5.5rem)}
  .sec-head--split{grid-template-columns:1fr}
}

/* --------------------------------------------- small structural helpers */
.artcard__body{display:grid;gap:.55rem}
.cta-search__copy,.cta-search__form{min-width:0}
.feature-more{margin-top:1.6rem}
.stat{min-width:0}
.perks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:0 clamp(1.5rem,3vw,3rem)}

/* a route block — used on the investments index */
.route{position:relative;display:block;padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--line);transition:padding-left .55s var(--e-out),color .35s}
.route:hover{padding-left:1rem;color:var(--accent-ink)}
.route__n{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;color:var(--accent-ink);display:block;margin-bottom:1.1rem}
.route h3{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:.9rem}
.route p{font-size:.95rem;color:var(--fg-soft);max-width:52ch}
.route__go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.route__go .i{width:15px;height:15px;transition:transform .5s var(--e-out)}
.route:hover .route__go .i{transform:translateX(5px)}
.map-pin.is-empty{opacity:.4;pointer-events:none}

/* ---------------------------------------------- where the metal appears
   Value, and only value: prices and figures on the dark bands, the rule under
   a dark section heading, and the wordmark in the footer. Everywhere else the
   bronze stays flat, which is what keeps the metal worth looking at. */
.sec--deep .sec-head::after,.coast__head::after{
  content:"";display:block;height:1px;margin-top:clamp(1.6rem,2.6vw,2.4rem);
  background-image:var(--metal);opacity:.9;
}
.coast__head::after{flex-basis:100%}

.sec--deep .index__price,.on-dark .index__price,
.hero__caption [data-hero-price]{
  background-image:var(--metal-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.hero__caption [data-hero-price]{font-family:var(--serif);font-size:1.05rem;letter-spacing:0}

.region__meta span:last-child{color:var(--bronze-2)}

/* the wordmark is struck rather than outlined — a metal plate, lit from the left */
.site-foot__mark span{
  -webkit-text-stroke:0;
  background-image:var(--metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;opacity:.32;
}

/* a small typed tag on a card date line */
.tag{
  display:inline-block;margin-right:.6rem;padding:.18em .5em;
  border:1px solid currentColor;color:var(--accent-ink);
  font-size:.9em;letter-spacing:.1em;
}

/* ------------------------------------------------------------- live light
   The page keeps Marbella's hours. Each phase shifts the two light sources in
   the dark bands and the warmth of the pale surface — the difference between
   any two is small, but across a day the site is never the same twice. */
:root{
  --sun-cool:rgba(29,84,126,.62);   /* the light from above */
  --sun-warm:rgba(168,112,74,.20);  /* the low bronze source */
  --sun-lift:1;
}
:root[data-sun=night]{
  --sun-cool:rgba(18,56,88,.5);
  --sun-warm:rgba(120,80,56,.13);
  --sun-lift:.9;
}
:root[data-sun=dawn]{
  --sun-cool:rgba(38,92,132,.55);
  --sun-warm:rgba(188,132,104,.2);
  --sun-lift:.96;
}
:root[data-sun=day]{
  --sun-cool:rgba(46,110,158,.66);
  --sun-warm:rgba(160,112,78,.16);
  --sun-lift:1.04;
}
:root[data-sun=golden]{
  --sun-cool:rgba(30,80,118,.5);
  --sun-warm:rgba(206,155,114,.32);
  --sun-lift:1;
}
:root[data-sun=dusk]{
  --sun-cool:rgba(24,68,106,.56);
  --sun-warm:rgba(180,120,88,.24);
  --sun-lift:.95;
}

/* the clock line — small, and only where it belongs */
.clock{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);
}
.clock::before{
  content:"";width:6px;height:6px;border-radius:100px;background:var(--accent);
  box-shadow:0 0 0 0 currentColor;animation:pulse-dot 3.4s var(--e-io) infinite;
}
@keyframes pulse-dot{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.clock::before{animation:none}}
.hero__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.1rem}
.hero__clock{color:rgba(233,242,246,.5)}
@media (max-width:700px){.hero__clock{display:none}}

/* ------------------------------------------------- cross-document transitions
   Opt in for the whole site. The root cross-fades; a property photograph that
   carries the `property-hero` name morphs from the card straight into the
   detail hero. Browsers without the API fall back to the curtain in app.js. */
@view-transition{navigation:auto}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.5s;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
}
::view-transition-group(property-hero){
  animation-duration:.78s;
  animation-timing-function:cubic-bezier(.76,0,.24,1);
}
::view-transition-old(property-hero),
::view-transition-new(property-hero){
  /* hold the frame rather than cross-fading it — the shape does the work */
  mix-blend-mode:normal;
  animation-duration:.78s;
  animation-timing-function:cubic-bezier(.76,0,.24,1);
}
/* the first frame of a property gallery is the landing point of that morph */
.gal__item:first-child img{view-transition-name:property-hero}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ------------------------------------------------------- surface chooser */
.surf{border-top:1px solid var(--line)}
.surf__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.5rem 2rem}
.surf__head>div{max-width:64ch}
.surf__i{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--accent-ink)}
.surf__chips{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem}
.surf__chip{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--fg-mute)}
.surf__chip i{width:30px;height:30px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(11,27,39,.2)}
.surf__chip em{font-style:normal;opacity:.55;text-transform:uppercase;letter-spacing:.14em}
.surf__apply.is-current{--btn-bg:var(--bronze-chip);--btn-fg:#fff}
.surf__reset{font-family:var(--mono);font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.surf__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:1.6rem;margin-top:clamp(2rem,3.5vw,3rem);padding-top:clamp(1.4rem,2.4vw,2rem);border-top:1px solid var(--line)}
.surf__price{font-family:var(--serif);font-weight:300;font-size:1.6rem;color:var(--fg)}
@media (max-width:860px){.surf__head{grid-template-columns:1fr}}

/* ============================================================== BROCHURE
   A4 pages built in the browser and handed to its own PDF writer. The sheet
   is off-screen until printing, so the same stylesheet serves both: on screen
   it is never seen, on paper it is the only thing there. */
.broch{width:210mm}

/* ---------------------------------------------------------- the viewer
   You read the brochure before you save it. The pages are drawn at their true
   210mm and scaled to the column, so what is on screen is what comes out. */
html.brochv-open{overflow:hidden}
.brochv{
  /* above the header (1000) and the grain (9000), below the cursor (9400) */
  position:fixed;inset:0;z-index:9200;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--ink-deep) 96%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transition:opacity .3s var(--e-out);
}
.brochv.is-on{opacity:1}
.brochv__bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(.9rem,2vw,1.3rem) clamp(1rem,3vw,2rem);
  border-bottom:1px solid rgba(233,242,246,.14);
}
.brochv__eyebrow{
  display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronze-2);
}
.brochv__title{
  margin:.25rem 0 0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.5rem);line-height:1.15;color:#fff;
}
.brochv__acts{display:flex;align-items:center;gap:.7rem}
.brochv__pages{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,242,246,.55);
}
@media (max-width:640px){.brochv__pages{display:none}}
.brochv__x{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:100px;
  border:1px solid rgba(233,242,246,.2);color:rgba(233,242,246,.8);
  transition:color .3s,border-color .3s,background .3s;
}
.brochv__x svg{width:1.05rem;height:1.05rem}
.brochv__x:hover{color:#fff;border-color:var(--bronze);background:rgba(233,242,246,.06)}

.brochv__scroll{flex:1 1 auto;overflow:auto;padding:clamp(1rem,3vw,2.4rem) 1rem;display:flex;justify-content:center}
.brochv__stage{position:relative;flex:none}
.brochv__stage .broch{
  transform:scale(var(--k,1));transform-origin:top left;
  display:flex;flex-direction:column;gap:1rem;
}
.brochv__stage .broch__page{box-shadow:0 18px 60px rgba(3,15,27,.6)}
.brochv__hint{
  flex:none;margin:0;padding:0 1.5rem 1.1rem;text-align:center;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,242,246,.45);
}
.brochv__hint b{color:var(--bronze-2);font-weight:400}

.broch__page{
  position:relative;width:210mm;height:297mm;overflow:hidden;
  background:var(--paper-hi);color:var(--fg);
  display:flex;flex-direction:column;
}
.broch__page--cover,.broch__page--dark{background:var(--ink-deep);color:var(--paper)}

.broch__mark{height:9mm;width:auto}
.broch__head{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:12mm 15mm 6mm;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:7pt;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);
}
.broch__head .broch__mark{height:7mm}
.broch__coverhead{position:absolute;top:14mm;left:15mm;z-index:3}

.broch__bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.broch__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,15,27,.6) 0%,rgba(3,15,27,.08) 32%,rgba(3,15,27,.76) 76%,rgba(3,15,27,.96) 100%);
}
.broch__coverfoot{position:absolute;left:15mm;right:15mm;bottom:20mm;z-index:3}
.broch__coverfoot h1{
  font-family:var(--serif);font-weight:300;font-size:34pt;line-height:1.02;
  letter-spacing:-.02em;margin:3mm 0 5mm;color:#fff;
}

.broch__eyebrow{
  font-family:var(--mono);font-size:7.5pt;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze-2);margin:0;
}
.broch__eyebrow--ink{color:var(--bronze-chip)}

.broch__price{
  font-family:var(--serif);font-weight:300;font-size:20pt;letter-spacing:-.01em;margin:0;
  background-image:var(--metal-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* On paper against a pale ground the gradient turns to mud, so it goes solid. */
.broch__price--ink{
  background:none;-webkit-text-fill-color:var(--bronze-deep);color:var(--bronze-deep);
  margin:2mm 0 0;
}
.broch__price--sm{font-size:15pt}

/* clipped, not spilling: a description three paragraphs longer than
   expected must never print over the footer */
.broch__body{flex:1 1 auto;padding:9mm 15mm 0;min-height:0;overflow:hidden}
.broch__body h2{
  font-family:var(--serif);font-weight:300;font-size:25pt;line-height:1.06;
  letter-spacing:-.02em;margin:3mm 0 0;
}
.broch__h3,.broch__body h3{
  font-family:var(--serif);font-weight:300;font-size:15pt;line-height:1.15;margin:0 0 2mm;
}
.broch__h3{margin:9mm 0 3.5mm}

.broch__facts{
  display:flex;gap:9mm;margin:6mm 0;padding:4mm 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.broch__facts b{
  display:block;font-family:var(--serif);font-weight:300;font-size:15pt;line-height:1.1;
}
.broch__facts span{
  font-family:var(--mono);font-size:6.5pt;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}

.broch__lead{font-size:11pt;line-height:1.5;color:var(--fg-soft);margin:0 0 5mm;max-width:62ch}
.broch__prose p{font-size:9.5pt;line-height:1.62;color:var(--fg-soft);margin:0 0 3.4mm}
.broch__prose{max-width:none;column-count:2;column-gap:9mm}

.broch__pair{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:7mm}
.broch__pair img{width:100%;height:52mm;object-fit:cover;border-radius:2mm}
.broch__grid{display:grid;grid-template-columns:1fr 1fr;gap:5mm}
.broch__grid img{width:100%;height:45mm;object-fit:cover;border-radius:2mm}
.broch__grid img:first-child{grid-column:1/-1;height:66mm}

.broch__feats{
  list-style:none;margin:0;padding:0;column-count:3;column-gap:7mm;
  font-size:8.5pt;line-height:1.9;color:var(--fg-soft);
}
.broch__feats li{break-inside:avoid;padding-left:4mm;position:relative}
.broch__feats li::before{
  content:"";position:absolute;left:0;top:1.6mm;width:1.6mm;height:1.6mm;
  border-radius:100px;background:var(--bronze);
}

.broch__foot{
  flex:none;display:flex;justify-content:space-between;gap:6mm;
  margin:0 15mm;padding:5mm 0 12mm;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:6.5pt;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
.broch__foot--dark{border-top-color:rgba(233,242,246,.18);color:rgba(233,242,246,.55)}
/* the closing page stands on a photograph rather than trailing off */
.broch__band{flex:none;height:88mm;margin:0;overflow:hidden}
.broch__band img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------- the closing page */
.broch__contact{flex:1 1 auto;padding:44mm 15mm 0;overflow:hidden}
.broch__contact h2{
  font-family:var(--serif);font-weight:300;font-size:32pt;line-height:1.04;
  letter-spacing:-.02em;margin:3mm 0 6mm;color:#fff;
}
.broch__contact .broch__lead{color:rgba(233,242,246,.78);max-width:56ch}
.broch__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8mm;margin:11mm 0 9mm}
.broch__cols span{
  display:block;font-family:var(--mono);font-size:6.5pt;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-2);margin-bottom:3mm;
}
.broch__cols b{display:block;font-weight:400;font-size:10pt;line-height:1.55;color:#fff}
.broch__url{word-break:break-all}
.broch__small{
  font-size:7.5pt;line-height:1.6;color:rgba(233,242,246,.5);max-width:70ch;margin:0;
}

/* ------------------------------------------------------------- shortlist */
/* two homes should fill the sheet rather than huddle at the top; a lone one
   sits where it would if it had company */
.broch__body--list{display:flex;flex-direction:column;justify-content:space-evenly;gap:14mm;padding-top:10mm;padding-bottom:6mm}
.broch__body--list:has(>:only-child){justify-content:flex-start}
.broch__entry{display:grid;grid-template-columns:88mm 1fr;gap:9mm;align-items:start}
.broch__entryfig{width:100%;height:76mm;object-fit:cover;border-radius:2mm;background:var(--paper-3)}
.broch__entry h3{margin:2.5mm 0 0;font-size:18pt}
.broch__entry .broch__facts{gap:6mm;margin:4mm 0 3mm;padding:3mm 0}
.broch__entry .broch__facts b{font-size:12pt}
.broch__note{font-size:8.5pt;line-height:1.5;color:var(--fg-soft);margin:0 0 2mm}
.broch__link{
  font-family:var(--mono);font-size:6.5pt;letter-spacing:.1em;color:var(--fg-mute);margin:0;
}

.broch__table{width:100%;border-collapse:collapse;margin-top:7mm;font-size:8.5pt}
.broch__table th{
  text-align:left;font-family:var(--mono);font-size:6.5pt;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);
  padding:0 4mm 3mm 0;border-bottom:1px solid var(--line-2);
}
.broch__table td{padding:3mm 4mm 3mm 0;border-bottom:1px solid var(--line);color:var(--fg-soft)}
.broch__table td:last-child,.broch__table th:last-child{text-align:right;padding-right:0;color:var(--fg)}

/* ------------------------------------------------------------ at the printer
   Everything but the sheet goes; the sheet comes back from off-screen and each
   page becomes one sheet of A4. */
@page{size:A4;margin:0}
@media print{
  html.printing,html.printing body{background:#fff;margin:0;padding:0;height:auto;overflow:visible}
  html.printing body>*{display:none !important}
  html.printing body>.brochv{
    display:block !important;position:static;background:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;opacity:1;
  }
  html.printing .brochv__bar,html.printing .brochv__hint{display:none}
  html.printing .brochv__scroll{overflow:visible;padding:0;display:block}
  html.printing .brochv__stage{width:auto !important;height:auto !important}
  html.printing .brochv__stage .broch{transform:none;gap:0;display:block}
  html.printing .brochv__stage .broch__page{box-shadow:none}
  html.printing .broch__page{
    page-break-after:always;break-after:page;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  html.printing .broch__page:last-child{page-break-after:auto;break-after:auto}
  html.printing .broch__entry,html.printing .broch__facts{break-inside:avoid}
}

/* the shortlist's one-click brochure */
.fav__bar{display:grid;justify-items:end;gap:.7rem;text-align:right}
.fav__barnote{margin:0;font-size:.82rem;line-height:1.45;color:var(--fg-mute);max-width:30ch}
@media (max-width:760px){.fav__bar{justify-items:start;text-align:left}}

/* the price and the brochure sit together, top right of a property */
.pdetail__aside{display:grid;justify-items:end;gap:.9rem}
@media (max-width:700px){.pdetail__aside{justify-items:start}}

/* the way into the portal — present for the team, quiet for everyone else */
.site-foot__staff{opacity:.45;transition:opacity .3s,color .3s}
.site-foot__staff::before{content:"● ";color:var(--bronze);font-size:.6em;vertical-align:middle}
.site-foot__staff:hover{opacity:1}