/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}

/* ---------- tokens ---------- */
:root{
  --navy:#004274; --navy-deep:#002a4a; --gold:#ECD357;
  --highlight:#ECD357; --paper:#FDFAF6; --sand-1:#F7F3EE; --sand-2:#EDE6DA; --ink:#2F2520; --ink-soft:#5B4E45;
  --line:rgba(47,37,32,.16); --line-light:rgba(253,250,246,.22);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",system-ui,sans-serif;
  --gut:clamp(20px,4.4vw,64px);
  /* the hero's edge line: the nav bar, the title, the line and the button all sit on it (computer only) */
  --edge:var(--gut);
  --ease:cubic-bezier(.22,1,.36,1);
  --r-bar:32px; --pad-bar:8px; --r-inner:calc(var(--r-bar) - var(--pad-bar));
}
@media (min-width:900px){:root{--r-bar:999px;--r-inner:999px}}

/* ---------- base ---------- */
html{scroll-behavior:auto}
body{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:hidden}
.intro body{overflow:hidden}
.display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.015em}
h2.display{font-size:clamp(44px,6.4vw,104px)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.hero :focus-visible,.menu :focus-visible,.pill :focus-visible{outline-color:var(--gold)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--navy);padding:12px 18px;border-radius:999px;transition:top .2s}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* press feedback on everything pressable */
a,button{-webkit-tap-highlight-color:transparent}
.press{transition:transform .16s var(--ease),background-color .25s,color .25s,border-color .25s}
.press:active{transform:scale(.96)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font-weight:500;font-size:17px;white-space:nowrap}
.btn--gold{background:var(--gold);color:var(--navy-deep)}
.btn--gold:hover{background:#f3df78}
.btn--navy{background:var(--navy);color:var(--paper)}
.btn--navy:hover{background:var(--navy-deep)}
.btn--ghost{border:1px solid var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--paper)}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:60;top:calc(12px + env(safe-area-inset-top));left:50%;translate:-50% 0;width:fit-content;max-width:calc(100% - 24px);
  display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;min-height:68px;
  background:rgba(0,42,74,.78);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-radius:999px;color:var(--paper)}
.brand{display:flex;align-items:center;gap:10px;height:44px;font-weight:500;letter-spacing:.01em}
.brand{color:var(--paper)}
.nav>.brand{padding-left:12px}@media (max-width:899px){.nav>.brand{padding-inline:12px}}
.logo{display:block;height:36px;width:auto;aspect-ratio:1536/631;overflow:visible}
@media (min-width:900px){.logo{height:40px}}
.logo--nav{aspect-ratio:1443/613;height:36px}
@media (min-width:900px){.logo--nav{height:40px}}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.nav__links{display:none;gap:4px}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px}
.nav__links a:hover{background:rgba(253,250,246,.12)}
.nav .btn{min-height:44px;height:44px;display:none;border-radius:calc(34px - 12px)}
@media (min-width:900px){:root{--edge:max(calc(var(--gut) + 32px),calc((100% - 1720px) / 2))}
  .nav{width:calc(100% - 2 * var(--edge));justify-content:space-between}.nav__links{display:flex}.nav .btn{display:inline-flex}.nav__links a{font-size:19px}}
.motion.intro .nav{opacity:0}
.nav{transition:opacity .3s}.nav.away{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s,visibility 0s .3s}

/* mobile bottom pill (main way in, thumb reach) */
.pill{position:fixed;z-index:70;left:50%;translate:-50% 0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:4px;padding:6px;border-radius:999px;
  background:rgba(0,42,74,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--paper);
  box-shadow:0 0 0 1px rgba(253,250,246,.18),0 8px 24px rgba(0,0,0,.16)} /* the hairline keeps the bar visible over the navy sections */
.pill a,.pill button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;font-weight:500;white-space:nowrap}
.pill .pill__main{background:var(--gold);color:var(--navy-deep)}
@media (min-width:900px){.pill{display:none}}
.motion.intro .pill{opacity:0}
.pill.away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}

.menu{position:fixed;inset:0;z-index:65;background:var(--navy-deep);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:100px var(--gut) 120px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.menu a{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(44px,13vw,72px);line-height:1.2;padding:2px 0}
.menu p{margin-top:28px;color:rgba(253,250,246,.8)}
@media (min-width:900px){.menu{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--navy-deep);color:#fff}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.hero__top,.hero__bot{position:absolute;left:0;right:0;pointer-events:none}
/* scrims sized to where text sits (name and nav at the top, the line and button at the bottom); the bay between stays clean */
.hero__top{top:0;height:46%;background:linear-gradient(to bottom,rgba(0,32,58,.42),rgba(0,32,58,.2) 55%,rgba(0,32,58,0))}
.hero__bot{bottom:0;height:30%;background:linear-gradient(to top,rgba(0,32,58,.55),rgba(0,32,58,0))}
.hero__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:calc(100px + env(safe-area-inset-top)) var(--gut) calc(112px + env(safe-area-inset-bottom))}
.hero h1{width:fit-content;font-family:var(--serif);font-weight:300;will-change:transform}
.hero__name{display:block;font-family:var(--serif);font-weight:300;font-size:min(22vw,13vh*1.9,120px);line-height:.98;letter-spacing:-.025em;margin-left:-.066em}
.hl{display:block}.hl+.hl{text-transform:lowercase}.hl--last{margin-left:.03em} /* "Summer coast realty": capital S only; the lowercase r overhangs, so its ink lines up with the S */
.hero__row{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
@media (max-width:899px){.hero__row .btn{display:none}} /* on a phone the bottom pill is the one way in */
.hero__line{max-width:none;text-wrap:balance;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.005em}
@media (min-width:900px){
  /* the name set like Concrete's line: Summer on the left edge, Coast on the right edge, Realty stepped in below */
  /* title, line and button share one inner column, lined up with the search bar; the nav runs wider than it */
  .hero__in{container-type:inline-size}
  .hero h1,.hero__row{margin-left:max(0px,calc((100% - 1100px) / 2 + 36px));margin-right:max(0px,calc((100% - 1100px) / 2 + 8px))}
  .hero h1{width:auto}
  .hero__name{font-size:min(19vh,14.4cqw,152px);line-height:.9;white-space:nowrap;display:flex;flex-wrap:wrap;justify-content:space-between;margin-left:-.066em;margin-right:0} /* ink of the S and the t on the column lines, measured */
  .hl{display:block}.hl--last{flex-basis:100%;padding-left:40%;margin-top:-.17em}
  .hero__in{padding-left:var(--edge);padding-right:var(--edge)}
  .hero__in{padding-bottom:calc(96px + env(safe-area-inset-bottom));padding-top:calc(112px + env(safe-area-inset-top))}
  .hero__row{flex-direction:row;align-items:flex-end;justify-content:space-between}
}
.hero__kick{display:none}
/* ?hero=center: one centred stack, a small line in the sans above the name, the name on one line, the button under it */
[data-hero=center] .hero__in{justify-content:center;align-items:center;text-align:center;padding-bottom:calc(150px + env(safe-area-inset-bottom))}
[data-hero=center] .hero__kick{display:block;font-family:var(--sans);font-weight:500;font-size:clamp(13px,1.05vw,15px);line-height:1.3;letter-spacing:.22em;text-transform:uppercase;margin:0 0 clamp(14px,1.4vw,22px);color:rgba(255,255,255,.94)}
[data-hero=center] .hero h1{width:auto;margin:0 auto}
[data-hero=center] .hero__name{display:block;white-space:nowrap;margin:0;font-size:calc((100vw - 2 * var(--gut)) / 8.9);line-height:1.02;letter-spacing:-.02em}
[data-hero=center] .hl,[data-hero=center] .hl--last{display:inline;padding:0;margin:0;flex-basis:auto;text-transform:none}
[data-hero=center] .hero__row{margin:clamp(26px,2.8vw,40px) 0 0;justify-content:center;align-items:center}
[data-hero=center] .hero__line{display:none}
/* the text sits over the bay, so the scrim moves to the middle, sized to the text */
[data-hero=center] .hero__top{top:18%;height:56%;background:linear-gradient(to bottom,rgba(0,32,58,0),rgba(0,32,58,.34) 40%,rgba(0,32,58,.34) 60%,rgba(0,32,58,0))}
@media (min-width:900px){[data-hero=center] .hero__name{font-size:min(9cqw,17vh,140px)}}
.motion.intro .hero__kick{opacity:0}
.motion.intro .hero__media{opacity:0}
.motion.intro .hero h1{opacity:0}
.intrologo{display:none;position:fixed;z-index:80;left:50%;translate:-50% 0;width:clamp(170px,20vw,250px);color:var(--paper);opacity:0;pointer-events:none} /* the wave mark alone; the name itself follows */
.intrologo .logo{height:auto;width:100%}.logo--mark{aspect-ratio:1443/447}
.motion.intro .intrologo{display:block}
.introveil{position:fixed;inset:0;z-index:79;background:var(--navy-deep)}
.motion.intro .hero__row{opacity:0}

/* ---------- search ---------- */
.search{position:relative;z-index:5;margin-top:-48px;padding:0 12px}
.bar{max-width:1100px;margin:0 auto;display:grid;gap:0;padding:var(--pad-bar);background:var(--paper);border-radius:var(--r-bar);box-shadow:0 18px 50px -18px rgba(0,42,74,.35)}
/* the whole field is the select (64px target); the label floats inside it */
.field{position:relative;min-height:64px;padding:0 22px;border-bottom:1px solid var(--line)}
.field label{position:absolute;top:11px;left:22px;font-size:16px;color:var(--ink-soft);line-height:1.2;pointer-events:none}
.field select{display:block;appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23004274' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E") no-repeat right 0 top 37px;border:0;padding:30px 26px 9px 0;font-size:17px;font-weight:500;min-height:64px;cursor:pointer;width:100%;color:var(--navy-deep)}
.field select:focus-visible{outline-offset:-4px}
.bar .btn{min-height:56px;border-radius:var(--r-inner);margin-top:var(--pad-bar)}
@media (min-width:900px){
  .bar{grid-template-columns:1.2fr 1fr 1fr auto;align-items:stretch}
  .field{border-bottom:0;border-right:1px solid var(--line);padding-inline:28px}
  .field label{left:28px}
  .field:nth-of-type(3){border-right:0}
  .bar .btn{margin:0;padding:0 36px}
}

/* ---------- statement ---------- */
.ribbon{position:absolute;top:0;left:0;z-index:-1;pointer-events:none;overflow:hidden}
/* the sentence sits visually centred between the search bar and the homes heading (10-25); the gap below is the ribbon's
   room to come off the oval and wrap the heading, so it is a little taller than the one above */
.state{padding:clamp(60px,8vw,112px) var(--gut) 0;display:grid;place-items:center;text-align:center}
.state p{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5.6vw,92px);line-height:1.06;letter-spacing:-.018em;max-width:30ch;margin-inline:auto;text-wrap:balance;color:var(--ink)}

/* ---------- homes ---------- */
.homes{padding:clamp(56px,9vw,140px) 0 clamp(72px,8vw,120px)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gut);margin-bottom:clamp(32px,4vw,56px)}
.head h2{max-width:none;text-wrap:balance}
/* homes heading: one line, a size down from the other section titles, with air before the photos */
.homes h2.display{font-size:clamp(40px,4.8vw,80px)}
.homes .head{margin-bottom:clamp(40px,5.5vw,84px)}
/* Previous / Next: round arrows on the row's edges, centred on the photos (photo = 4:5 of the card width);
   each fades out when there is nowhere left to go that way. Phones swipe instead. */
.rowwrap{position:relative}
.arrow{position:absolute;z-index:3;top:calc(min(80vw,420px) * .625);translate:0 -50%;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:var(--paper);box-shadow:0 10px 28px -12px rgba(0,42,74,.5);
  transition:opacity .25s var(--ease),transform .16s var(--ease),background-color .25s,color .25s;-webkit-user-select:none;user-select:none}
.arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arrow--prev{left:16px}.arrow--next{right:16px}
.arrow:hover{background:var(--navy-deep)}
.arrow[disabled]{opacity:0;pointer-events:none}
@media (max-width:899px),(hover:none){.arrow{display:none}}
.row{display:flex;gap:20px;overflow-x:auto;padding:0 var(--gut) 8px;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.row::-webkit-scrollbar{display:none}
.row.drag{cursor:grabbing;scroll-snap-type:none}
.card{flex:0 0 min(80vw,420px);scroll-snap-align:start;display:block;-webkit-user-drag:none}
.card__media{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--sand-2);transition:transform .2s var(--ease)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);-webkit-user-drag:none;user-select:none}
.card__body{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;padding:18px 4px 0}
.card__name{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.1}
.card__price{font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.1;color:var(--navy);white-space:nowrap}
.card__place,.card__meta{grid-column:1/-1;color:var(--ink-soft);font-size:16px;line-height:1.4}
@media (hover:hover){.card:hover .card__media img{transform:scale(1.05)}}
.card:active .card__media{transform:scale(.985)}
.prog{margin:28px var(--gut) 0;height:1px;background:var(--line);position:relative}
.prog i{position:absolute;inset:0;background:var(--navy);transform:scaleX(.2);transform-origin:0 50%}
.more{padding:36px var(--gut) 0}

/* ---------- zones: shared ---------- */
.zones{background:var(--sand-2);--cover:var(--sand-2);padding:clamp(36px,3.5vw,52px) var(--gut) clamp(88px,11vw,170px)} /* the heading sits right under the curve */
.zones h2{margin-bottom:clamp(28px,4vw,56px)}
.zplain{display:grid;gap:clamp(28px,3vw,44px) 24px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.zplain img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;margin-bottom:14px}
.zplain strong{display:block;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1}
.zplain span{display:block;color:var(--ink-soft);margin-top:4px}
.zx .zplain{display:none}

/* zones: scroll (pinned). Names are real buttons, the current one is large, the others small and dim */
.zones--scroll{height:100vh;height:100svh;min-height:600px;padding-top:calc(104px + env(safe-area-inset-top));padding-bottom:88px;overflow:hidden}
.zones--scroll .zs{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(120px,1fr) auto;gap:14px}
.zones--scroll h2{margin:0;font-size:clamp(30px,8vw,40px)}
.zs-photo{position:relative;border-radius:20px;overflow:hidden;background:var(--sand-1);min-height:0}
.zs-img{position:absolute;inset:0;overflow:hidden}
.zs-img img{width:100%;height:100%;object-fit:cover}
.zs-list{position:relative;margin:0}
.zs-item{position:absolute;left:0;top:0;width:100%;text-align:left;display:block;color:var(--ink);opacity:.5;transition:opacity .35s var(--ease)}
.zs-item[aria-current="true"]{opacity:1}
.zs-name{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--serif);font-weight:300;line-height:1.05;letter-spacing:-.015em;transform-origin:0 0}
.zs-line{position:absolute;left:0;color:var(--ink-soft);opacity:0;max-width:34ch;line-height:1.4}
@media (min-width:900px){
  .zones--scroll{padding-bottom:40px}
  .zones--scroll .zs{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,110px);row-gap:clamp(16px,2vw,28px)}
  .zones--scroll h2{font-size:clamp(40px,4.4vw,64px);grid-column:1;grid-row:1}
  .zs-list{grid-column:1;grid-row:2;align-self:center}
  .zs-photo{grid-column:2;grid-row:1/3;border-radius:24px}
}
@media (hover:hover) and (pointer:fine){.zs-item[aria-current="false"]:hover{opacity:.85}}

/* zones: strips (CRGAR idea). One opens wide, the others stay narrow */
.ss{display:flex;flex-direction:column;gap:6px;height:calc(7*56px + 7*6px + 340px);--ow:100%}
.ss-p{position:relative;display:block;flex:1 1 0;min-height:0;border-radius:18px;overflow:hidden;color:#fff;text-align:left;background:var(--sand-1);transition:flex-grow .8s cubic-bezier(.32,.72,0,1)}
.ss-p[aria-expanded="true"]{flex-grow:6}
.ss-p img{position:absolute;left:0;top:50%;width:100%;height:var(--oh,340px);max-width:none;object-fit:cover;transform:translateY(-50%)}

.ss-p::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(0,32,58,.55),rgba(0,32,58,0) 70%);transition:opacity .5s}
.ss-p[aria-expanded="true"]::after{background:linear-gradient(to top,rgba(0,32,58,.62),rgba(0,32,58,0) 55%)}
.ss-v{position:absolute;z-index:1;left:20px;top:50%;translate:0 -50%;font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.1;white-space:nowrap;transition:opacity .35s}
.ss-p[aria-expanded="true"] .ss-v{opacity:0}
.ss-o{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ss-p[aria-expanded="true"] .ss-o{opacity:1;transform:none;transition-delay:.25s}
.ss-n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(38px,9vw,52px);line-height:1.02;letter-spacing:-.015em}
.ss-l{display:block;margin-top:6px;font-size:17px;line-height:1.4;max-width:34ch}
.ss-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:15px;font-weight:500}
.ss-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
@media (hover:hover){.ss-p[aria-expanded="true"]:hover .ss-go svg{transform:translateX(3px)}}
.zplain a{display:block;color:inherit;text-decoration:none}
@media (min-width:900px){
  .ss{flex-direction:row;height:min(76vh,760px);height:min(76svh,760px)}
  .ss-p{border-radius:22px}
  .ss-p img{top:0;left:50%;width:var(--ow,640px);height:100%;transform:translateX(-50%)}

  .ss-p::after{background:linear-gradient(to top,rgba(0,32,58,.5),rgba(0,32,58,0) 50%)}
  .ss-v{left:50%;top:auto;bottom:22px;translate:-50% 0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:26px}
  .ss-o{left:28px;right:28px;bottom:26px}
  .ss-n{font-size:clamp(44px,5vw,76px)}
}

/* ---------- about (paper, between the zones and the team) ---------- */
.about{background:var(--paper);--cover:var(--paper);padding:clamp(36px,3.5vw,52px) var(--gut) clamp(88px,11vw,170px)} /* heading right under the curve, like the zones */
/* one heading, one sentence: side by side on a computer, the sentence's last line on the heading's baseline */
.about__in{max-width:1240px;margin-inline:auto;display:grid;gap:clamp(20px,2.4vw,32px)}
.about__right{display:grid;gap:clamp(20px,2.4vw,32px);justify-items:start}
.about__lead{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.16;letter-spacing:-.01em;max-width:26ch;text-wrap:pretty;color:var(--ink)}
@media (min-width:900px){
  .about__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);align-items:end}
}

/* ---------- who we are (navy) ---------- */
.who{background:var(--navy);--cover:var(--navy);color:var(--paper);padding:clamp(88px,11vw,170px) var(--gut)}
/* heading and the languages read as one group: the languages a size down, close under it */
.who h2{margin-bottom:clamp(14px,1.6vw,24px);max-width:none;text-align:center}
.langs{font-family:"Cormorant Garamond","Frank Ruhl Libre",Georgia,serif;font-weight:300;font-size:clamp(26px,3.2vw,48px);line-height:1.25;letter-spacing:-.005em;text-align:center;text-wrap:balance;max-width:min(100%,1240px);margin:0 auto clamp(48px,6vw,88px);color:rgba(253,250,246,.9)}
.langs .pr{display:inline-block;white-space:nowrap}
.langs .lg,.langs .dt{display:inline-block}
.langs .lg{margin-inline:.14em;white-space:nowrap}
.langs .lg--he{unicode-bidi:isolate}
.langs .dt{width:.11em;height:.11em;min-width:7px;min-height:7px;border-radius:50%;background:var(--highlight);vertical-align:middle;margin-inline:.22em;position:relative;top:-.04em}
.motion .langs .lg,.motion .langs .dt{opacity:0}
.roster{display:grid;gap:0 clamp(40px,6vw,110px);max-width:1240px;margin-inline:auto}
/* a face, then the name and one line under it: role, a gold dot (the languages line's dot), languages */
.roster li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,1.6vw,22px);row-gap:6px;align-content:center;padding:clamp(16px,1.7vw,22px) 0;border-top:1px solid var(--line-light)}
.roster li:last-child{border-bottom:1px solid var(--line-light)}
.rface{grid-row:1 / span 2;align-self:center;display:block;width:clamp(64px,6vw,84px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--navy-deep)}
[data-shape=square] .rface{border-radius:10px}
.rface--none{display:grid;place-items:center;font-family:var(--serif);font-size:clamp(22px,2vw,28px);color:rgba(253,250,246,.82);background:rgba(253,250,246,.07);box-shadow:inset 0 0 0 1px var(--line-light)}
.rname,.rmeta{grid-column:2}
.rname{align-self:end}
.rmeta{align-self:start}
.rname{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.3vw,32px);line-height:1.1;letter-spacing:-.005em}
.rmeta{display:block;font-size:16px;line-height:1.45}
.rrole{color:var(--paper)}
.rlang{color:rgba(253,250,246,.8)}
.rdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--highlight);vertical-align:middle;margin:0 .7em;position:relative;top:-.08em}
@media (min-width:900px){
  .roster{grid-template-columns:1fr 1fr}
  .roster li:nth-last-child(2){border-bottom:1px solid var(--line-light)}
}
.who__foot{margin-top:clamp(48px,6vw,96px);display:grid;gap:32px;max-width:1240px;margin-inline:auto}
/* the real team photo (agency site, 2025) where the empty slot was */
.teamphoto{position:relative;overflow:hidden;margin:0;border-radius:20px;background:var(--navy-deep)}
[data-shape=square] .teamphoto{border-radius:10px}
.teamphoto img{display:block;width:100%;height:auto;aspect-ratio:1140/557;object-fit:cover}
.who__act{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.who__act p{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,36px);line-height:1.18;max-width:18ch}
@media (min-width:900px){
  .who__foot{grid-template-columns:1.5fr 1fr;gap:clamp(40px,6vw,110px);align-items:end}
}

/* ---------- reviews (paper) ---------- */
.reviews{background:var(--paper);--cover:var(--paper);padding:clamp(36px,3.5vw,52px) var(--gut) clamp(88px,11vw,170px)}
.reviews>*{max-width:1240px;margin-inline:auto}
.reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(36px,4.5vw,72px)}
.reviews__head h2{font-size:clamp(40px,4.8vw,80px)}
.reviews__rating{font-size:17px;color:var(--ink-soft);padding-bottom:.5em}
/* one quote at a time, beside the face of the agent it is about (no client photos exist); moved by hand with the arrows,
   the keys or a swipe, never on a timer. Every quote stays in the HTML; without JS they simply stack. (10-25, his ask) */
.rv{display:grid;gap:clamp(24px,3vw,40px);--face:clamp(104px,22vw,300px);--fgap:clamp(28px,5vw,88px)}
.rv__stage{display:grid;touch-action:pan-y}
.rv__slide{margin:0;display:grid;gap:22px;align-items:center;align-content:start} /* stacked (phone): face and quote stay together, the spare height sits below */
.rv:not(.rv--js) .rv__slide+.rv__slide{padding-top:32px;border-top:1px solid var(--line)}
.rv:not(.rv--js) .rv__ctl{display:none}
.rv--js .rv__slide{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.rv--js .rv__slide.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.rv--js .rv__text{transform:translateY(12px);transition:transform .7s var(--ease)}
.rv--js .is-on .rv__text{transform:none}
.rv__face{display:block;width:var(--face);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--sand-1)}
[data-shape=square] .rv__face{border-radius:10px}
/* the team photo is 2:1: a square would slice someone, so it keeps its own shape (full width above the quote on a phone) */
.rv__face--wide{aspect-ratio:1140/557;width:100%;align-self:start;border-radius:20px}
.rv__text blockquote{margin:0}
.rv__text p{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.5vw,38px);line-height:1.2;letter-spacing:-.005em;color:var(--ink);max-width:42ch;text-wrap:pretty;hanging-punctuation:first}
.rv__text figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:clamp(16px,2vw,26px);font-size:16px;line-height:1.4}
.quote__who{color:var(--ink);font-weight:500}
.quote__on{color:var(--ink-soft)}
.rv__ctl{display:flex;align-items:center;gap:14px}
.rv__btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--paper);border:0;cursor:pointer;transition:transform .16s var(--ease),background-color .25s}
.rv__btn:hover{background:var(--navy-deep)}
.rv__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rv__count{min-width:4.6em;text-align:center;font-size:16px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media (min-width:900px){
  .rv__slide{grid-template-columns:var(--face) minmax(0,1fr);column-gap:var(--fgap);align-content:center}
  .rv__ctl{padding-left:calc(var(--face) + var(--fgap))}
  .rv__face--wide{width:var(--face);align-self:center}
}
@media (prefers-reduced-motion:reduce){.rv--js .rv__slide,.rv--js .rv__slide.is-on,.rv--js .rv__text{transition:none;transform:none}}

/* ---------- contact (sand): the side says how, the form asks the few things the team needs ---------- */
.contact{background:var(--sand-2);--cover:var(--sand-2);padding:clamp(36px,3.5vw,52px) var(--gut) clamp(88px,11vw,170px)}
.contact__in{max-width:1240px;margin-inline:auto;display:grid;gap:clamp(32px,4vw,56px)}
.contact h2{font-size:clamp(40px,4.8vw,80px);text-wrap:balance;max-width:12ch}
/* the other ways in, under the heading: WhatsApp as one tap, the address as plain text */
.contact__alt{display:grid;gap:14px;justify-items:start;margin-top:clamp(24px,3vw,40px)}
.contact__side p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:36ch}
/* his line (10-25): what happens after Send. On a computer it sits at the foot of the column, level with the Send button */
.contact__side{display:flex;flex-direction:column;align-items:flex-start}
.contact__side .contact__note{margin-top:clamp(24px,3vw,40px);color:var(--ink)}
.contact__mail a{color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;display:inline-flex;align-items:center;min-height:44px}
.cform{display:grid;gap:18px;padding:clamp(20px,2.6vw,36px);background:var(--paper);border-radius:var(--r-bar)}
[data-shape=square] .cform{border-radius:16px}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:0;margin:0;padding:0;min-width:0}
.seg legend{float:left;font-size:16px;color:var(--ink-soft);margin-right:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font-size:16px;color:var(--ink);transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
[data-shape=square] .seg span{border-radius:8px}
.seg label:hover span{border-color:rgba(0,66,116,.5)}
.seg input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.seg input:focus-visible+span{outline:2px solid var(--navy);outline-offset:3px}
.cf{display:grid;gap:6px;align-content:start} /* a two-line error in one column never pushes the other column's field down */
.cf label{font-size:16px;color:var(--ink)}
.cf__opt{color:var(--ink-soft);margin-left:6px}
.cf input,.cf select,.cf textarea{width:100%;font:inherit;font-size:17px;color:var(--navy-deep);background:var(--paper);border:1px solid rgba(47,37,32,.5);border-radius:8px;padding:12px 14px;min-height:52px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.cf select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23004274' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer}
.cf textarea{resize:vertical;min-height:120px;line-height:1.5}
.cf input:hover,.cf select:hover,.cf textarea:hover{border-color:rgba(0,66,116,.5)}
/* focus: the page's own 2px navy ring (3:1+ on paper), the same ring as the radios, the button and the links */
.cf input:focus-visible,.cf select:focus-visible,.cf textarea:focus-visible{border-color:var(--navy)}
.cf [aria-invalid=true],.cf [aria-invalid=true]:focus-visible{border-color:#B3261E}
.cf__err{font-size:15px;color:#B3261E}
.cform__send{justify-self:stretch;min-height:52px}
.cform__done{font-size:16px;line-height:1.5;color:var(--ink)}
@media (min-width:900px){
  .contact__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,6vw,110px);align-items:stretch}
  .contact__side .contact__note{margin-top:auto;padding-bottom:clamp(30px,3.6vw,48px)}
  .cform{grid-template-columns:1fr 1fr;column-gap:16px}
  .cform .seg,.cform .cf--wide,.cform__send,.cform__done{grid-column:1 / -1}
  .cform__send{justify-self:start;min-width:220px}
}

/* ---------- footer (10-27, his notes: "not a nav", then "linear, fitting inside the page, more compressed and minimal"):
   a deep-navy panel inside the page margins with straight edges (no dome), the brand and the newsletter on one line,
   the two offices and the contact in three short columns, her accreditations, the legal line ---------- */
.foot{background:var(--foot-ground,var(--sand-2));padding:0 var(--gut) var(--gut);color:rgba(253,250,246,.72)}
.foot__in{max-width:1320px;margin-inline:auto;display:grid;background:var(--navy-deep);border-radius:16px;padding:clamp(28px,3.4vw,48px) clamp(22px,3.6vw,56px) 0}
/* 11-02, his "make it more luxurious": the name set large across the bottom of the panel as a sign-off. Decorative (the logo
   above already says it), so its words are hidden from screen readers with the empty alt after the slash. */
.foot__in{container-type:inline-size}
/* 11-02, his asks: the panel stays a square inside the page, but its edges fade into the ground instead of a hard line;
   and when the page ends the navy takes the whole screen (site.js turns the footer's ground navy as the footer fills the
   screen, so panel and page melt into one). Without motion it stays the soft-edged panel. */
.foot{padding-top:calc(var(--nav,64px) + 24px)} /* room for the bar: at the end of the page nothing of the footer sits under it */
.foot__in{box-shadow:0 0 48px 12px var(--navy-deep)}
.motion:not([data-navs=v1]) .foot{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden} /* the navy grows inside the footer only: it never washes over (and ghosts) the section above */
.motion:not([data-navs=v1]) .foot__in{width:100%}
/* short laptop screens: the footer's rows close up so, at the end of the page, its top row sits below the bar */
@media (min-width:900px) and (max-height:860px){.foot .foot__in{padding-top:24px}.foot .foot__top{padding-bottom:16px}.foot .foot__cols{padding:18px 0}.foot .foot__accr{padding:10px 0}}
@media (max-width:899px){.foot{padding-bottom:calc(var(--gut) + 84px + env(safe-area-inset-bottom))}} /* the phone pill never sits on the name */
.foot__in::after{content:"Summer Coast Realty" / "";display:block;font-family:var(--serif);font-weight:300;font-size:min(11.4cqi,12svh);line-height:.92;
  letter-spacing:-.02em;white-space:nowrap;text-align:center;color:var(--paper);padding:clamp(14px,2.2vw,32px) 0 clamp(14px,1.6vw,24px)}
.foot p{margin:0}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:var(--paper);text-decoration-color:var(--gold);transition:color .2s,opacity .2s}
.foot a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.foot :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.foot__h{font:500 15px/1.3 var(--sans);color:var(--paper);margin:0} /* a plain label, not tracked caps (no eyebrows) */
.foot__top{display:grid;gap:22px;padding-bottom:clamp(24px,2.6vw,32px);border-bottom:1px solid var(--line-light)}
.foot__brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.foot__logo{display:inline-flex;min-height:44px;color:var(--paper)}
.foot__logo .logo{height:44px;width:auto}
.foot__since{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.2;color:var(--paper)}
.foot__news{display:grid;gap:8px;width:100%;max-width:560px}
.foot__field{display:flex;gap:8px}
.foot__field input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid rgba(253,250,246,.32);border-radius:8px;background:transparent;color:var(--paper);font:400 16px var(--sans)}
.foot__field input:hover{border-color:rgba(253,250,246,.55)}
.foot__field input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.foot__field input[aria-invalid=true]{border-color:#f0b4a8}
.foot__field .btn{flex:none;min-height:44px;height:44px;padding:0 22px;border-radius:8px}
.foot__err{font-size:14px;color:#f6c9bf}
.foot__ok{margin:0;font-size:14px;color:var(--paper)} /* the newsletter's thank-you line (site.js) */
.foot__ok a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.cform__done a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.ts-box:empty{display:none} /* the Turnstile check, when it is on: shows only if it needs the visitor */
.foot__cols{display:grid;gap:24px;padding:clamp(24px,2.6vw,32px) 0}
.foot__col{display:grid;gap:2px;align-content:start;font-style:normal;font-size:15px;line-height:1.5}
.foot__col .foot__h{margin-bottom:4px}
.foot__office{max-width:40ch}
.foot__office a{justify-self:start;display:inline-flex;align-items:center;min-height:40px}
.foot__list a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.foot__social{display:flex;gap:2px;margin:4px 0 0 -10px}
.foot__social a{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:8px;color:var(--paper);opacity:.8;transition:opacity .2s,background-color .2s,transform .16s var(--ease)}
.foot__social a:hover{opacity:1;background:rgba(253,250,246,.08)}
.foot__social a:active{transform:scale(.94)}
.foot__social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.foot__social .dot{fill:currentColor;stroke:none}
.foot__accr{padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line-light)}
.foot__accr ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px clamp(24px,4.5vw,64px)} /* centred (his ask 10-27) */
.foot__accr img{display:block;height:30px;width:auto;opacity:.7;transition:opacity .2s}
.foot__accr a{display:inline-flex;min-height:44px;align-items:center}
.foot__accr a:hover img{opacity:1}
.foot .foot__legal{padding:6px 0 8px;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font-size:13px;color:rgba(253,250,246,.66)}
.foot__legal a{display:inline-flex;align-items:center;min-height:44px;color:rgba(253,250,246,.86)}
.foot__legal a:last-child{margin-left:auto}
@media (min-width:700px){
  .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3.4vw,56px)}
}
@media (min-width:900px){
  .foot__top{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center;column-gap:48px}
  .foot__news{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
  .foot__news .foot__err{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.foot__social a,.foot a,.foot__accr img{transition:none}.foot__social a:active{transform:none}}

/* ---------- property by type (10-27): her four sales splits, after the homes, on the same paper ---------- */
.types{background:var(--paper);padding:0 var(--gut) clamp(88px,10vw,150px)}
.types__in{max-width:1240px;margin-inline:auto}
.types .head{padding:0;margin-bottom:clamp(32px,4.5vw,64px)}
.types h2.display{font-size:clamp(40px,4.8vw,80px)}
.types__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
.type{display:grid;gap:14px;color:var(--ink);border-radius:10px}
.type__media{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:var(--sand-2);transition:transform .2s var(--ease)}
.type__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.type__body{display:grid;gap:4px;padding:0 2px}
.type__name{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,30px);line-height:1.1}
.type__line{font-size:15px;line-height:1.4;color:var(--ink-soft)}
@media (hover:hover){.type:hover .type__media img{transform:scale(1.05)}.type:hover .type__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}}
.type:active .type__media{transform:scale(.985)}
.type:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
@media (min-width:900px){.types__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media (prefers-reduced-motion:reduce){.type__media,.type__media img{transition:none}.type:hover .type__media img,.type:active .type__media{transform:none}}

/* curved colour edges: each section with a new ground rises as a soft dome into the bottom padding of the one above (from option C) */
.zones,.about,.who,.reviews,.contact,.foot,.curve{position:relative}
/* ?stack=on: a section stays in the frame once its bottom reaches the bottom of the screen, and the next one (with its
   curved top) slides up over it. --stick is set per block: 0 for a block shorter than the screen, negative for a taller one. */
.stack{position:sticky;top:var(--stick,0px)}
#stackHomes:not(.stack){position:relative}
.bulge{position:absolute;left:0;right:0;top:calc(var(--bulge,clamp(28px,4.5vw,64px)) * -1 + 1px);height:var(--bulge,clamp(28px,4.5vw,64px));z-index:2;border-radius:50% 50% 0 0 / 100% 100% 0 0;transform-origin:50% 100%;pointer-events:none}
/* ---------- reveal system (?reveal=rise|mask|curtain|blur|split, ?speed=) ---------- */
.motion [data-r]{opacity:0}
.motion [data-r=img]{opacity:1} /* 10-28: photos never wait hidden for the scripts; site.js hides the ones below the first screen and fades them in on scroll */
/* calm pages (the listing pages): only photos wait for their short fade; text is there from the first frame */
.motion[data-reveal=calm] [data-r]:not([data-r=img]){opacity:1}
.cv{position:absolute;inset:0;z-index:3;background:var(--cover,var(--paper));pointer-events:none}
.busy,.busy img{transition:none}
.ln-mask,.ln{padding-bottom:.12em;margin-bottom:-.12em}

@media (prefers-reduced-motion:reduce){
  .press,.card__media,.card__media img,.zs-item,.zl li a,.ss-p,.ss-p img,.ss-o{transition:none}
  .motion [data-r]{opacity:1}
  .motion .langs .lg,.motion .langs .dt{opacity:1}
  .press:active,.card:active .card__media,.card:hover .card__media img,.zl li a:hover{transform:none}
}

/* zones scroll: type sizes (set here so the layout code only measures) */
.zs-name{font-size:clamp(40px,11.4vw,52px)}
@media (min-width:900px){.zs-name{font-size:clamp(52px,5.2vw,84px)}}
/* ?shape=square: squares with a small, soft corner instead of pills and circles. One system: 8px on controls, 10px on
   photos; anything holding a control inside its padding derives its corner from it (outer = 8 + gap), so corners nest.
   The ribbon, the curved section edges and the map dots are not part of this. */
[data-shape=square]{--r-bar:16px;--r-inner:8px}
[data-shape=square] .btn,[data-shape=square] .skip,[data-shape=square] .nav__links a,[data-shape=square] .pill a,[data-shape=square] .pill button,[data-shape=square] .arrow,[data-shape=square] .rv__btn{border-radius:8px}
[data-shape=square] .nav{border-radius:20px}            /* padding 12 + 8 */
[data-shape=square] .nav .btn{border-radius:8px}
[data-shape=square] .pill{border-radius:14px}           /* padding 6 + 8 */
[data-shape=square] .bar{border-radius:16px}            /* padding 8 + 8 */
[data-shape=square] .bar .btn{border-radius:8px}
[data-shape=square] .card__media,[data-shape=square] .zplain img,[data-shape=square] .zs-photo,[data-shape=square] .ss-p{border-radius:10px}
/* ?look=luxe: the same fonts and layout, drawn thinner. Hairlines instead of fills and shadows, outlined buttons with
   tracked labels (the Papagayo "Inquiries", Aman "Reserve"), a quieter nav, slower photo hovers. Gold stays for the
   hover and the phone bar. ?look=plain is the page as it was. */
[data-look=luxe] .nav{background:rgba(0,42,74,.6);border:1px solid rgba(253,250,246,.22);min-height:62px;padding:8px 8px 8px 10px}
[data-look=luxe] .nav__links a{font-weight:400;letter-spacing:.015em}
[data-look=luxe] .nav__links a:hover{background:transparent;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
[data-look=luxe] .btn{font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:0 28px}
[data-look=luxe] .nav .btn,[data-look=luxe] #heroRow .btn,[data-look=luxe] .who .btn{background:transparent;border:1px solid rgba(253,250,246,.85);color:var(--paper)}
[data-look=luxe] .nav .btn:hover,[data-look=luxe] #heroRow .btn:hover,[data-look=luxe] .who .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
[data-look=luxe] #heroRow .btn{min-height:52px}
[data-look=luxe] .btn--ghost{border-color:rgba(0,66,116,.55)}
[data-look=luxe] .hero__kick{font-weight:400;letter-spacing:.26em;font-size:clamp(12px,.95vw,14px)}
[data-look=luxe] .bar{box-shadow:none;border:1px solid rgba(0,66,116,.16)}
[data-look=luxe] .bar .btn{letter-spacing:.06em}
[data-look=luxe] .field label{letter-spacing:.02em}
[data-look=luxe] .card__body{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
[data-look=luxe] .card__media img{transition:transform 1.4s var(--ease)}
@media (hover:hover){[data-look=luxe] .card:hover .card__media img{transform:scale(1.03)}}
[data-look=luxe] .card:active .card__media{transform:none}
[data-look=luxe] .card__place{letter-spacing:.02em}
[data-look=luxe] .arrow{box-shadow:none}
[data-look=luxe] .prog{background:rgba(0,66,116,.14)}
/* ?nav=full: the bar runs edge to edge at the top, a hairline under it; the logo and the button keep the hero's edge line.
   ?nav=float is the floating pill. */
[data-nav=full] .nav{top:0;left:0;translate:0;width:100%;max-width:none;border-radius:0;min-height:64px;padding:8px var(--edge);border:0;border-bottom:1px solid rgba(253,250,246,.18)}
[data-nav=full] .nav>.brand{padding-inline:0}
@media (min-width:900px){[data-nav=full] .nav{width:100%}}
/* nav options. ?navc= colour: navy (as is) | paper | clear (nothing over the photo, paper once past the hero) | deep (solid
   deep navy, gold hairline) | sand | ink. ?navl= logo left | center (links left, logo in the middle, button right, the Aman
   layout). ?navt= links normal | caps (small, tracked). The light bars need the navy logo and navy buttons. */
.nav{transition:opacity .3s,background-color .35s,color .35s,border-color .35s}
[data-navc=paper] .nav{background:rgba(253,250,246,.94);color:var(--navy);border-bottom-color:rgba(0,66,116,.14)}
[data-navc=sand] .nav{background:rgba(237,230,218,.95);color:var(--navy);border-bottom-color:rgba(0,66,116,.12)}
[data-navc=paper] .nav .brand,[data-navc=sand] .nav .brand{color:var(--navy)}
[data-navc=paper] .nav :focus-visible,[data-navc=sand] .nav :focus-visible{outline-color:var(--navy)}
[data-navc=paper] .nav__links a:hover,[data-navc=sand] .nav__links a:hover{background:rgba(0,66,116,.07)}
[data-look=luxe][data-navc=paper] .nav .btn,[data-look=luxe][data-navc=sand] .nav .btn{border-color:rgba(0,66,116,.6);color:var(--navy)}
[data-look=luxe][data-navc=paper] .nav .btn:hover,[data-look=luxe][data-navc=sand] .nav .btn:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
[data-look=luxe] .nav__links a:hover{background:transparent}
/* the clear nav: ONE even blur across the whole bar (his ask 10-26: "just make it one blur not that mixed one"), with a
   light tint opposite the ink so the logo, links and button read over a busy photo: navy under white text, paper under
   navy text. The per-item pads (feathered blur patches behind logo, links, button) are gone; backup site.css.bak-2026-10-26-navblur */
[data-navc=clear] .nav{background:rgba(0,42,74,.16);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:rgba(253,250,246,.28)}
[data-navc=clear] .nav[data-ink=dark]{background:rgba(253,250,246,.6)}
/* the clear nav stays clear. Text, clickable boxes, photos and the gold swash fade out as they meet the nav's bottom edge (a
   short mask on each, kept only on the pieces crossing the line), so under the bar there is only the section's ground colour
   (5 Nov, his word). Grounds pass under it, and so does a page's first-screen full-width photo. The nav's ink follows the
   ground under it: light over the photo and the navy team section, navy over paper and sand. */
[data-navc=clear] .fade.fading{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--navh,64px) + 2px),#000 calc(var(--navh,64px) + 12px));mask-image:linear-gradient(to bottom,transparent calc(var(--navh,64px) + 2px),#000 calc(var(--navh,64px) + 12px));-webkit-mask-size:100% calc(100vh + 800px);mask-size:100% calc(100vh + 800px);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* 5 Nov, his word after seeing it: "too strong, should be subtle... very subtle and narrower": the fade is 10px tall now (was 28):
   things simply go, and the ground colour is what is left. */
/* 5 Nov: the fade starts 2px under the bar's line (a mask snapped to a whole pixel let a faint row of a photo through), and a
   piece whose top is already above the line squares its top corners (their rounded edge left specks; they are invisible there) */
[data-navc=clear] .fade.fading.under{border-top-left-radius:0;border-top-right-radius:0}
[data-navc=clear] .fade-own.fading{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--navh,64px) + 2px),#000 calc(var(--navh,64px) + 12px)),var(--own-mask);mask-image:linear-gradient(to bottom,transparent calc(var(--navh,64px) + 2px),#000 calc(var(--navh,64px) + 12px)),var(--own-mask);-webkit-mask-size:100% calc(100vh + 800px),100% 100%;mask-size:100% calc(100vh + 800px),100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect} /* a piece with its own mask keeps it under the bar's fade */
[data-navc=clear] .nav[data-ink=dark]{color:var(--navy);border-bottom-color:rgba(0,66,116,.16)}
[data-navc=clear] .nav[data-ink=dark] .brand{color:var(--navy)}
[data-navc=clear] .nav[data-ink=dark] :focus-visible{outline-color:var(--navy)}
[data-navc=clear] .nav[data-ink=dark] .nav__links a:hover{background:rgba(0,66,116,.07)}
[data-look=luxe][data-navc=clear] .nav[data-ink=dark] .btn{border-color:rgba(0,66,116,.6);color:var(--navy)}
[data-look=luxe][data-navc=clear] .nav[data-ink=dark] .btn:hover{background:var(--navy);border-color:var(--navy);color:var(--paper)}
[data-navc=deep] .nav{background:var(--navy-deep);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(236,211,87,.4)}
[data-navc=ink] .nav{background:rgba(47,37,32,.9);border-bottom-color:rgba(253,250,246,.16)}
[data-navt=caps] .nav__links a{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
@media (min-width:900px){
  [data-navl=center] .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  [data-navl=center] .nav__links{order:1;justify-self:start}
  [data-navl=center] .nav>.brand{order:2;justify-self:center}
  [data-navl=center] .nav .btn{order:3;justify-self:end}
}

/* ---------- the luxury bar (11-02, his ask: "luxury, clean, and aesthetic, like a luxury Costa Rican brand", in Summer
   Coast's own colours and type). More air, a bigger logo, quieter spaced links with a hairline under the one you point at
   and the page you are on, the language switch set off by a thin rule. ?navs=v1 is the bar before this. ---------- */
@media (min-width:900px){
  [data-navs=lux]{--navh:84px;--nav:84px}
  [data-navs=lux] .hxp,[data-navs=lux] .ls{--nav:84px} /* page tops that make room for the bar (they set 64px themselves) */
  [data-navs=lux][data-nav=full] .nav{min-height:84px;padding-block:0}
  [data-navs=lux] .logo--nav{height:50px}
  [data-navs=lux] .nav__links{gap:8px}
  [data-navs=lux] .nav__links a{position:relative;font-size:15.5px;letter-spacing:.06em;padding:0 15px}
  [data-navs=lux][data-look=luxe] .nav__links a:hover{text-decoration:none;background:transparent}
  [data-navs=lux][data-navc] .nav .nav__links a:hover{background:transparent}
  [data-navs=lux] .nav__links a::after{content:"";position:absolute;left:15px;right:15px;bottom:8px;height:1px;background:currentColor;
    transform:scaleX(0);transition:transform .4s var(--ease)}
  [data-navs=lux] .nav__links a:hover::after,[data-navs=lux] .nav__links a:focus-visible::after,[data-navs=lux] .nav__links a[aria-current=page]::after{transform:scaleX(1)}
  [data-navs=lux] .nav[data-ink=light] .nav__links a[aria-current=page]::after{background:var(--gold)}
  [data-navs=lux] .nav .btn{height:42px;min-height:42px;padding:0 22px;font-size:12.5px;letter-spacing:.16em}
  [data-navs=lux] .nav__end{gap:0}
  [data-navs=lux] .langsw{font-size:12.5px;letter-spacing:.16em;padding:0 18px 0 12px;margin-right:16px;border-radius:0;position:relative}
  [data-navs=lux] .langsw::after{content:"";position:absolute;right:0;top:50%;height:18px;width:1px;translate:0 -50%;background:currentColor;opacity:.35}
}
@media (prefers-reduced-motion:reduce){[data-navs=lux] .nav__links a::after{transition:none}}
/* 11-02, his bug: the links sat 32px further left on pages with the ES link ("moves every time I click into Contact and back").
   Three fixed columns: logo at its edge, links dead centre, button at its edge, whatever sits beside the button. */
@media (min-width:900px){
  [data-navs=lux][data-nav=full] .nav{display:grid;grid-template-columns:1fr auto 1fr;justify-content:normal}
  [data-navs=lux] .nav>.brand{justify-self:start}
  [data-navs=lux] .nav__links{justify-self:center}
  [data-navs=lux] .nav>.btn,[data-navs=lux] .nav>.nav__end{justify-self:end}
  /* ?navl=center with the luxury bar (Origins, Aman): links on the left, the logo in the middle, the button on the right */
  [data-navs=lux][data-navl=center] .nav>.brand{justify-self:center}
  [data-navs=lux][data-navl=center] .nav__links{justify-self:start;margin-left:-15px}
  [data-navs=lux][data-navl=center] .logo--nav{height:56px}
}
/* one solid button in the bar (Origins' "Book now"): cream over a photo or navy, navy over paper; gold on hover as before */
[data-navs=lux][data-look=luxe] .nav .btn{background:var(--paper);border-color:var(--paper);color:var(--navy-deep)}
[data-navs=lux][data-look=luxe][data-navc=clear] .nav[data-ink=dark] .btn{background:var(--navy);border-color:var(--navy);color:var(--paper)}
[data-navs=lux][data-look=luxe] .nav .btn:hover,[data-navs=lux][data-look=luxe][data-navc=clear] .nav[data-ink=dark] .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
/* ?navbg=solid (default 11-02): no frosted band. Over a photo or navy the bar is clear with a soft shade behind the logo and
   links; over paper or sand it turns solid paper with a navy hairline, like a printed masthead. ?navbg=blur is the 10-26 bar. */
[data-navbg=solid][data-navc=clear] .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
[data-navbg=solid][data-navc=clear] .nav::before{content:"";position:absolute;inset:0 0 -36px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,22,42,.46),rgba(0,22,42,.18) 62%,rgba(0,22,42,0));transition:opacity .35s}
[data-navbg=solid][data-navc=clear] .nav[data-ink=dark]{background:rgba(253,250,246,.97);border-bottom-color:rgba(0,66,116,.12)}
[data-navbg=solid][data-navc=clear] .nav[data-ink=dark]::before{opacity:0}
/* ?navbg=none (default 11-02, his word "no line also means no color... it's just there"): no bar, no shade, no blur. The
   logo, links and button sit on the page; their ink still follows the ground under them, and text scrolling up fades
   out at the bar's line (the clear nav's mask) so it never runs into the links. */
[data-navbg=none][data-navc=clear] .nav,[data-navbg=none][data-navc=clear] .nav[data-ink]{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the listing and Homes pages lay their own strip of paper (with a hairline) behind the bar: none now */
[data-navbg=none] .ls-navback,[data-navbg=none] .hx-navback,[data-navbg=none] .sr-navback{display:none}
/* 11-02, his word: no line under the bar, in any state (just the logo, the links and the button) */
[data-navs=lux][data-nav=full] .nav,[data-navs=lux][data-nav=full] .nav[data-ink]{border-bottom:0}

/* ---------- About page (10-25). The story is the first sentence (Heath Ceramics), the whole team in one wide photo
   (Snohetta), the agents as a masthead under a hairline (Kinfolk). Grounds alternate like the home, curved tops via .curve ---------- */
.ab-hero{background:var(--paper);padding:calc(var(--nav,64px) + clamp(56px,9vw,136px)) var(--gut) clamp(56px,7vw,112px)}
.ab-hero__in{max-width:1240px;margin-inline:auto}
.ab-hero__h{font-family:var(--serif);font-weight:300;font-size:clamp(42px,6.2vw,100px);line-height:1.03;letter-spacing:-.02em;max-width:20ch;text-wrap:balance;color:var(--ink)}
.ab-hero__img{margin-top:clamp(40px,6vw,88px);overflow:hidden;border-radius:20px;background:var(--sand-1)}
[data-shape=square] .ab-hero__img{border-radius:10px}
.ab-hero__img img{display:block;width:100%;height:auto;aspect-ratio:1140/557;object-fit:cover}
.ab{padding:clamp(36px,3.5vw,52px) var(--gut) clamp(88px,11vw,170px)}
.ab--paper{background:var(--paper);--cover:var(--paper)}
.ab--sand{background:var(--sand-2);--cover:var(--sand-2)}
.ab--navy{background:var(--navy);--cover:var(--navy);color:var(--paper)}
.ab-hero+.ab{padding-top:0}
.ab__in{max-width:1240px;margin-inline:auto;display:grid;gap:clamp(20px,2.4vw,32px)}
.ab h2.display{font-size:clamp(40px,4.8vw,80px)}
.ab__lead{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.7vw,42px);line-height:1.17;letter-spacing:-.008em;max-width:28ch;text-wrap:pretty}
.ab__role{font-size:17px;color:var(--ink);font-weight:500}
.ab__body{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:46ch;text-wrap:pretty}
.ab__more{margin-top:clamp(20px,2.4vw,32px)}
/* the one centred beat on the About page: a heading, one sentence, the button (the home statement's shape) */
.ab__in--center{justify-items:center;text-align:center}
.ab__in--center .ab__lead{margin-inline:auto;max-width:30ch}
.ab__in--center .ab__more{margin-inline:auto}
@media (min-width:900px){.ab__in--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);align-items:start}}
/* Lindsey: her portrait beside the words */
.ab-person{align-items:center}
.ab-person__img{margin:0;overflow:hidden;border-radius:20px;max-width:520px;background:var(--sand-1)}
[data-shape=square] .ab-person__img{border-radius:10px}
.ab-person__img img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ab-person__text{display:grid;gap:14px;align-content:center}
.ab-person__text .ab__body{margin-top:8px}
@media (min-width:900px){.ab-person{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,110px)}}
/* the agents as a masthead: a hairline, then name, role and languages in quiet columns */
.ab-mast{max-width:1240px;margin:clamp(40px,5vw,72px) auto 0;padding:clamp(24px,3vw,36px) 0 0;border-top:1px solid var(--line-light);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(20px,3vw,40px)}
.ab-mast li{display:grid;gap:4px;align-content:start}
.ab-mast strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.12}
.ab-mast span{font-size:16px;line-height:1.45;color:rgba(253,250,246,.8)}
.ab-mast span:nth-of-type(1){color:var(--paper)}
@media (min-width:900px){.ab-mast{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the two offices, with hours and a way there */
.ab-offices{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(12px,2vw,24px)}
.ab-off{display:grid;gap:6px;align-content:start;padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
.ab-off h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin-bottom:6px}
.ab-off p{font-size:17px;line-height:1.55;color:var(--ink-soft)}
.ab-off a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;justify-self:start}
@media (min-width:900px){.ab-offices{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,110px)}}

/* ---------- home About: the looks behind ?about= (10-25, his options round; he leans Apple and Cinematic) ---------- */
.about__photo{display:none;margin:0}
/* Apple: one idea, centred, a lot of room around it */
[data-about=apple] .about{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(136px,15vw,240px)}
[data-about=apple] .about__in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(22px,2.6vw,36px)}
[data-about=apple] .about__right{justify-items:center}
[data-about=apple] .about__lead{font-size:clamp(28px,3.2vw,48px);line-height:1.15;max-width:26ch;margin-inline:auto;text-wrap:balance}
/* Cinematic: the team photo edge to edge, moving slowly with the scroll, its lower edge fading into deep navy; the words sit
   in that navy below the faces (they may overlap only the faded bottom of the photo, never a face) */
[data-about=cinema] .about{display:flow-root;padding:0 0 clamp(96px,11vw,170px);background:var(--navy-deep);--cover:var(--navy-deep);color:var(--paper)} /* flow-root: the photo's lift into the curve must not drag the navy up with it */
[data-about=cinema] .about__photo{display:block;position:relative;z-index:2;width:100%;overflow:hidden;aspect-ratio:4/3;max-height:86vh;
  /* the photo fills the curved top itself (his 10-27 note: a navy dome over a square-cut photo read as badly fitted) */
  margin-top:calc(var(--bulge,clamp(28px,4.5vw,64px)) * -1 + 1px);border-radius:50% 50% 0 0 / var(--bulge,clamp(28px,4.5vw,64px)) var(--bulge,clamp(28px,4.5vw,64px)) 0 0}
[data-about=cinema] #about > .bulge{display:none}
/* 11-02, straight edges: the photo starts flush where the section above ends, edge to edge */
[data-edge=straight][data-about=cinema] .about__photo{margin-top:0;border-radius:0}
[data-about=cinema] .about__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
[data-about=cinema] .about__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,42,74,0) 58%,rgba(0,42,74,.75) 84%,var(--navy-deep) 100%)}
[data-about=cinema] .about__in{position:relative;z-index:3;margin-top:clamp(-120px,-8vw,-40px)}
[data-about=cinema] .about h2,[data-about=cinema] .about__lead{color:var(--paper)}
[data-about=cinema] .about__more{border-color:rgba(253,250,246,.85);color:var(--paper)}
[data-about=cinema] .about__more:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
[data-about=cinema] .about__in{padding-inline:var(--gut)}
@media (min-width:900px){
  [data-about=cinema] .about__photo{aspect-ratio:2280/1114}
  [data-about=cinema] .about__in{padding-inline:max(var(--gut),calc((100% - 1240px) / 2));max-width:none}
}
/* 11-02, his ask: the About photo stays fixed and the page scrolls over it, like a window opening onto the coast. The image
   is fixed to the screen and the figure clips it (clip-path keeps a fixed child inside its box, iPhone Safari included,
   where background-attachment:fixed does nothing); the figure's own fade to navy still travels with the section. */
[data-about=cinema] .about__photo{clip-path:inset(0);aspect-ratio:auto;height:78svh;max-height:none}
[data-about=cinema] .about__photo img{position:fixed;inset:0;width:100%;height:100lvh}
/* the photo itself fades out into the section's navy (a mask, not a navy gradient laid over it): a fixed photo clipped on a
   fraction of a pixel showed a bright hairline at the seam under the overlay */
[data-about=cinema] .about__photo{-webkit-mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.22) 82%,transparent 96%);mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.22) 82%,transparent 96%)}
[data-about=cinema] .about__photo::after{display:none}
@media (min-width:900px){[data-about=cinema] .about__photo{height:min(100vh,1000px)}}
@media (prefers-reduced-motion:reduce){[data-about=cinema] .about__photo img{position:static;height:100%}}
/* 11-02, his "the About on the phone, you can't really see it": on a phone the fixed photo only ever showed its faded top
   and the title landed under the Menu bar. Under 900px the photo is a plain block that scrolls with the page, whole, with
   the title on its faded bottom edge. The team photo is wide (four people), so it keeps a wider frame there. */
[data-about=cinema] .about__photo img{object-position:var(--pos-phone,50% 50%)}
@media (min-width:900px){[data-about=cinema] .about__photo img{object-position:var(--pos-desk,50% 50%)}}
@media (max-width:899px){
  [data-aboutv=window][data-about=cinema] .about__photo{height:auto;aspect-ratio:4/5;
    -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.3) 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.3) 86%,transparent 100%)}
  [data-aboutv=window][data-about=cinema] .about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  [data-aboutimg=marina][data-aboutv=window][data-about=cinema] .about__photo{aspect-ratio:4/3}
}
/* people do not dissolve into the navy at the waist: on a computer the team photo fades only below the knees */
@media (min-width:900px){[data-aboutimg=marina][data-aboutv=window][data-about=cinema] .about__photo{
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.3) 89%,transparent 98%);mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.3) 89%,transparent 98%)}}
@media (prefers-reduced-motion:reduce){.ss-go svg{transition:none}}
/* the intro's name, ?namefx=wash (10-30): a soft edge sweeps it in left to right; the padding gives the descender
   room inside the mask, the negative margin keeps the layout where it was */
#heroName.is-wash{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:calc(var(--wash,0) * 1%) 0;mask-position:calc(var(--wash,0) * 1%) 0;padding-bottom:.22em;margin-bottom:-.22em}
/* the way back (10-30, his rule for every build): a pill naming the page above this one; light on the navy band */
.gp-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-size:15px;font-weight:500;text-decoration:none;justify-self:start;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.gp-back svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.gp-band .gp-back{color:var(--paper);border-color:var(--line-light)}
@media (hover:hover){.gp-back:hover{background:rgba(0,66,116,.06)}.gp-band .gp-back:hover{background:rgba(253,250,246,.1)}.gp-back:hover svg{transform:translateX(-3px)}}
.gp-back:focus-visible svg{transform:translateX(-3px)}
.ab-person__text .gp-back{margin-bottom:18px}
.ls-back{margin:0;padding:14px var(--gut) 14px}
@media (min-width:900px){.ls-back{padding:0 0 16px}}
@media (prefers-reduced-motion:reduce){.gp-back,.gp-back svg{transition:none}}

/* ---------- 11-02 luxury pass (his "sure", on top of the luxury bar; ?navs=v1 shows the look before it) ---------- */
/* links that take you somewhere read as text with a fine line and an arrow, not as outlined boxes; actions (WhatsApp,
   email, form buttons) stay buttons */
[data-navs=lux] a.btn--ghost:not([href^="https://wa.me"]):not([href^="mailto:"]),[data-navs=lux][data-look=luxe] #heroRow .btn{
  min-height:44px;padding:0;gap:10px;border:0;border-radius:0;font-size:16.5px;font-weight:500;letter-spacing:.02em;text-transform:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat}
[data-navs=lux] a.btn--ghost:not([href^="https://wa.me"]):not([href^="mailto:"]):hover,[data-navs=lux][data-look=luxe] #heroRow .btn:hover{
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1px no-repeat;color:inherit;border:0}
[data-navs=lux] .btn--ghost:not([href^="https://wa.me"]):not([href^="mailto:"]):is(a)::after,[data-navs=lux][data-look=luxe] #heroRow .btn::after{
  content:"\2192";transition:transform .35s var(--ease)}
[data-navs=lux] a.btn--ghost:not([href^="https://wa.me"]):not([href^="mailto:"]):hover::after,[data-navs=lux][data-look=luxe] #heroRow .btn:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){[data-navs=lux] a.btn--ghost::after,[data-navs=lux] #heroRow .btn::after{transition:none}}
/* one navy: the team section after the About window is the same deep navy, not a second, brighter blue */
[data-navs=lux] .who{background:var(--navy-deep);--cover:var(--navy-deep)}
/* photos: smaller corners, crisper and more editorial (never sharp: his rule) */
[data-navs=lux] :is(.card__media,.zplain img,.zs-photo,.ss-p,.teamphoto,.rv__face--wide,.gp-teamphoto,.gp-agent__img,.gp-card__img,.gp-zc,.gp-zc__media,.gp-who__img,.gp-wide,.hx-card__media,.hx-feat__media,.hx-row__media,.hx-card,.ls-m,.ls-tile__img,.ls-ph){border-radius:6px}
/* prices one step quieter than the names they follow */
[data-navs=lux] .card__price{font-weight:300;font-size:25px}
[data-navs=lux] .gp-grid .card__price{font-size:21px}
[data-navs=lux] .hx-dprice{font-weight:400}
/* the bar has no ground, so over a bright photo (the About sky) its light text gets a soft shadow to stay readable;
   no shadow over paper, where the ink is navy */
[data-navbg=none] .nav[data-ink=light] :is(.nav__links a,.langsw){text-shadow:0 1px 14px rgba(0,22,42,.6),0 0 2px rgba(0,22,42,.25)}
[data-navbg=none] .nav[data-ink=light] .logo--nav{filter:drop-shadow(0 1px 10px rgba(0,22,42,.45))}
/* 11-02, his "between that section and the next too much dead space": About and the team share one navy now, so their two
   paddings read as one empty band (304px at 1470x830); each side gets about half */
[data-navs=lux][data-about=cinema] .about{padding-bottom:clamp(44px,4.6vw,72px)}
[data-navs=lux] .who{padding-top:clamp(44px,4.6vw,72px)}

/* ---------- 11-02, his "the about summer coast, how the image opens, I don't really like it": ?aboutv=split. The fixed photo
   showed open water first (its bottom) and the coast barely before the words covered it. Here the coast photo stands
   still on one half, cropped on the coastline, straight edges; the words sit on the navy half. Phone: photo, then words. */
[data-aboutv=split][data-about=cinema] .about{display:block;padding:0}
[data-aboutv=split][data-about=cinema] .about__photo{clip-path:none;-webkit-mask-image:none;mask-image:none;margin:0;border-radius:0;aspect-ratio:4/5;height:auto;max-height:none}
[data-aboutv=split][data-about=cinema] .about__photo img{position:static;width:100%;height:100%;object-fit:cover;object-position:38% 58%}
[data-aboutv=split][data-about=cinema] .about__in{margin-top:0;padding:clamp(40px,8vw,64px) var(--gut) clamp(48px,9vw,72px)}
@media (min-width:900px){
  [data-aboutv=split][data-about=cinema] .about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:min(92svh,880px)}
  [data-aboutv=split][data-about=cinema] .about__photo{aspect-ratio:auto;height:100%;min-height:min(92svh,880px)}
  [data-aboutv=split][data-about=cinema] .about__in{grid-template-columns:minmax(0,1fr);align-content:center;align-self:center;max-width:620px;
    padding:clamp(56px,6vw,110px) clamp(40px,5vw,96px);row-gap:clamp(24px,2.6vw,36px)}
  [data-aboutv=split][data-about=cinema] .about__lead{font-size:clamp(26px,2.3vw,36px)}
}
@media (min-width:900px){[data-aboutv=split][data-about=cinema] .about h2{font-size:clamp(48px,4.4vw,72px)}}

/* ---------- 11-02 ?zones=index (site.js buildIndex): the zones as a serif list beside one large photo ---------- */
.zi{display:grid;gap:clamp(24px,3vw,48px);margin-top:clamp(8px,1.5vw,20px)}
.zi-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(47,37,32,.14)}
.zi-row{display:grid;grid-template-columns:64px minmax(0,1fr) 20px;align-items:center;gap:16px;min-height:64px;padding:12px 0;border-bottom:1px solid rgba(47,37,32,.14);color:var(--ink);text-decoration:none}
.zi-thumb{display:block;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--sand-1)}
.zi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.zi-text{display:grid;gap:2px}
.zi-name{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,38px);line-height:1.05;letter-spacing:-.01em;transition:color .35s}
.zi-line{font-size:15px;line-height:1.4;color:var(--ink-soft)}
.zi-go{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.45;transition:opacity .35s,transform .35s var(--ease)}
.zi-row:hover .zi-name{color:var(--navy)}
.zi-row:hover .zi-go{opacity:1;transform:translateX(4px)}
.zi-media{display:none}
@media (min-width:900px){
  .zi{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start;column-gap:clamp(40px,5vw,96px)}
  .zi-row{grid-template-columns:minmax(0,1fr) 20px;min-height:72px;padding:14px 0}
  .zi-thumb{display:none}
  /* the row whose photo is showing; on a phone there is no big photo, so no row is marked */
  .zi-row.is-on .zi-name{color:var(--navy)}
  .zi-row.is-on .zi-go{opacity:1;transform:translateX(4px)}
  .zi-media{display:block;position:sticky;top:calc(var(--nav,64px) + 24px);aspect-ratio:4/5;max-height:calc(100svh - var(--nav,64px) - 64px);width:100%;border-radius:6px;overflow:hidden;background:var(--sand-1)}
  .zi-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
  .zi-img.is-on{opacity:1}
}
@media (prefers-reduced-motion:reduce){.zi-img,.zi-go,.zi-name{transition:none}}
/* 11-02 zone photos: the Flamingo one is a terrace view, framed on the beach crescent so the loungers fall out of frame */
img[src*="zones/flamingo-beach"]{object-position:18% 62%}

/* ---------- 11-02/03, his "the About with no images, just the text, kind of article way like in Why we started", then 11-03
   "literally just the text, no picture, make the section small ... no highlight ... kind of dark, and then it lights up word
   by word as you scroll": ?aboutv=text (the default) on navy (?aboutbg=light puts it on sand). One paragraph, the heading
   floated beside its first lines like the About page; the words light up in site.js aboutSpot(). */
[data-aboutv=text][data-about] .about{display:block;background:var(--navy-deep);--cover:var(--navy-deep);color:var(--paper);
  padding:clamp(64px,8vw,120px) var(--gut) clamp(56px,7vw,104px)}
[data-aboutv=text][data-aboutbg=light][data-about] .about{background:var(--sand-2);--cover:var(--sand-2);color:var(--ink)}
[data-aboutv=text][data-about] .about__photo,[data-aboutv=text][data-about] .about__lead--2{display:none}
[data-aboutv=text][data-about] .about__in{display:flow-root;max-width:1240px;margin:0 auto;padding:0}
[data-aboutv=text][data-about] .about h2{float:left;margin:0 clamp(28px,3.4vw,56px) clamp(4px,.6vw,10px) 0;font-size:clamp(40px,4.8vw,80px);color:inherit}
[data-aboutv=text][data-about] .about__right{display:block}
[data-aboutv=text][data-about] .about__lead{max-width:none;margin:0;color:inherit;--lit:#FDFAF6;--edge:#ECD357;
  font-size:clamp(28px,3vw,46px);line-height:1.18}
[data-aboutv=text][data-aboutbg=light][data-about] .about__lead{--lit:#2F2520;--edge:#2F2520}
@media (max-width:640px){[data-aboutv=text][data-about] .about h2{float:none;margin:0 0 20px}}

/* ---------- 11-03, his "for the footer, take out the Summer Coast Realty and just leave the logo top left next to
   Guanacaste, Costa Rica, since 2000 ... I wanted the footer to stay in the final version: when it's full blue, don't do
   the fade thing, just do it clean": the footer IS its old last frame from the first pixel: navy edge to edge with a
   straight top edge, the screen's height, its rows at the bottom. No panel, no soft edge, nothing grows. */
.foot{background:var(--navy-deep)}
.foot__in{box-shadow:none;border-radius:0;background:transparent;padding-inline:0}
.foot__logo{display:none} /* his correction the same day: the big name across the bottom STAYS (he likes it); the small logo beside "Guanacaste, Costa Rica. Since 2000." goes: at the end of the page it sat next to the nav logo, two logos side by side */

/* ---------- 11-03, About and "Who you'll talk to" as one piece, three options (?aw=). Both on the one navy; the About
   paragraph lights word by word in every option. ---------- */
[data-aw] .who{background:var(--navy-deep);--cover:var(--navy-deep)}
[data-aw] .about__lead{text-wrap:pretty}

/* a: one chapter. Everything on one centred axis: the heading, then the paragraph large and lit, a short gold hairline,
   then the people. Same ground, same axis, the hairline is the hinge. */
[data-aw=a][data-aboutv=text][data-about] .about{padding:clamp(96px,11vw,170px) var(--gut) clamp(44px,5vw,72px)}
[data-aw=a][data-aboutv=text][data-about] .about__in{max-width:980px;text-align:center}
[data-aw=a][data-aboutv=text][data-about] .about h2{float:none;margin:0 0 clamp(24px,2.6vw,36px)}
[data-aw=a][data-aboutv=text][data-about] .about__lead{font-size:clamp(28px,3.1vw,48px);line-height:1.2}
[data-aw=a] .who{padding-top:clamp(44px,5vw,72px)}
[data-aw=a] .who::before{content:"";display:block;width:64px;height:1px;background:var(--gold);margin:0 auto clamp(56px,7vw,104px)}

/* b: a spread. On a computer the heading and paragraph stay pinned on the left while the people scroll on the right,
   and the paragraph lights as they pass; on a phone the two simply follow each other. */
.aw-spread{background:var(--navy-deep);color:var(--paper)}
@media (min-width:1000px){
  .aw-spread{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(56px,7vw,128px);max-width:1240px;margin-inline:auto;
    padding:clamp(96px,10vw,160px) var(--gut);box-sizing:content-box;box-shadow:0 0 0 100vmax var(--navy-deep);clip-path:inset(0 -100vmax)}
  [data-aw=b][data-aboutv=text][data-about] .aw-spread .about{position:sticky;top:calc(var(--nav,64px) + 48px);align-self:start;padding:0;background:none}
  [data-aw=b][data-aboutv=text][data-about] .aw-spread .about h2,[data-aw=b] .aw-spread .who h2{float:none;margin:0 0 clamp(24px,2.4vw,36px);font-size:clamp(40px,3.6vw,58px);white-space:nowrap}
  [data-aw=b][data-aboutv=text][data-about] .aw-spread .about__lead{font-size:clamp(28px,2.5vw,40px);line-height:1.2}
  [data-aw=b] .aw-spread .who{padding:0;background:none}
  [data-aw=b] .aw-spread .who h2,[data-aw=b] .aw-spread .langs{text-align:left;margin-inline:0}
  [data-aw=b] .aw-spread .langs{font-size:clamp(24px,2vw,32px)}
  [data-aw=b] .aw-spread .roster{grid-template-columns:1fr;max-width:none}
  [data-aw=b] .aw-spread .roster li:nth-last-child(2){border-bottom:0}
  [data-aw=b] .aw-spread .who__foot{grid-template-columns:1fr;max-width:none}
}

/* c: credits. The paragraph centred and lit, then the names one per line in the large serif, lighting up one after the
   other as if the paragraph were introducing them; each face sits small beside its name, the role and languages under. */
[data-aw=c][data-aboutv=text][data-about] .about{padding:clamp(96px,11vw,170px) var(--gut) clamp(40px,5vw,64px)}
[data-aw=c][data-aboutv=text][data-about] .about__in{max-width:980px;text-align:center}
[data-aw=c][data-aboutv=text][data-about] .about h2{float:none;margin:0 0 clamp(24px,2.6vw,36px)}
[data-aw=c][data-aboutv=text][data-about] .about__lead{font-size:clamp(28px,3.1vw,48px);line-height:1.2}
[data-aw=c] .who{padding-top:clamp(40px,5vw,64px)}
[data-aw=c] .roster{grid-template-columns:1fr!important;max-width:980px}
[data-aw=c] .roster li{grid-template-columns:auto auto;justify-content:center;column-gap:clamp(16px,1.8vw,24px);border:0!important;padding:clamp(12px,1.4vw,18px) 0}
[data-aw=c] .rface{width:clamp(48px,4vw,60px)}
[data-aw=c] .rname{font-size:clamp(34px,4vw,60px);font-weight:300;line-height:1.05;--lit:#FDFAF6;--edge:#ECD357}
[data-aw=c] .rmeta{font-size:15px;opacity:.72}

/* ---------- 11-03, phone: the menu opens from three lines at the top right (his "people grab the phone more with the right
   hand"); the bottom bar is gone. The button sits on the nav's middle line, 44px, and turns into an X over the open menu. */
.pill{display:none!important}
.burger{display:none}
@media (max-width:899px){
  .burger{position:fixed;z-index:70;top:calc(env(safe-area-inset-top) + (var(--nav,64px) - 44px) / 2);right:max(12px,env(safe-area-inset-right));
    display:grid;place-content:center;gap:6px;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--paper)}
  .burger[data-ink=dark]{color:var(--navy-deep)}
  .burger.is-open{color:var(--paper)}
  .burger span{display:block;width:24px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
  .burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .foot{padding-bottom:calc(var(--gut) + env(safe-area-inset-bottom))} /* no bar to keep clear of any more */
}
@media (prefers-reduced-motion:reduce){.burger span{transition:none}}

/* ---------- 11-03, his "stuff is more centred on the phone ... the picture of my mom should be centred ... some titles should
   be longer but centred": on a phone the home page's section titles run the full width and centre; the reviews centre
   (face, quote, name, arrows). Lists, cards and the form keep their own alignment. */
@media (max-width:899px){
  .homes h2,.types h2,.zones h2,.who h2,.contact h2,.reviews__head h2,[data-aw] .about h2{max-width:none;margin-inline:auto;text-align:center;text-wrap:balance}
  .reviews__head,.homes .head,.types .head{justify-content:center;justify-items:center;align-items:center;text-align:center}
  .homes .head > *,.types .head > *{margin-inline:auto}
  .reviews__head > *{margin-inline:auto}
  .rv__slide{justify-items:center;text-align:center}
  .rv__text p{margin-inline:auto}
  .rv__text figcaption{justify-content:center}
  .rv__ctl{justify-content:center}
  [data-aw] .about__lead{text-align:center}
}

/* ---------- 11-03, his "after clicking into it, it left that ugly thing" (the Budget filter), "make sure that doesn't happen
   in any other area": a dropdown or a text field you click shows no extra ring. Dropdowns ring only for keyboard users
   (html.kbd, set in site-head.js), drawn round the whole field instead of the bare select inside it; text fields show
   focus with their own border colour, not a ring floating outside them. */
html:not(.kbd) select:focus-visible{outline:none}
html.kbd .hx-seg select:focus-visible,html.kbd .hx-sort select:focus-visible{outline:none}
html.kbd .hx-seg:has(select:focus-visible),html.kbd .hx-sort:has(select:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,textarea:focus-visible{outline:none}
.foot__field input:focus-visible{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.cf input:focus-visible,.cf select:focus-visible,.cf textarea:focus-visible{box-shadow:0 0 0 1px var(--navy)}
/* 11-03, his "when you open an agent's profile you zoom in more on the face; keep the same cut as the Team page": the
   profile shows the same head-and-shoulders photo (-780) framed like the Team page card (4:5, anchored near the top) */
.ab-person__img--team img{object-position:50% 22%}

/* 11-03, his "the About one doesn't have the full About thing ... buttons should lead to other pages": the words-only About
   keeps its "More about us" link under the paragraph (cream with the gold line, like the other text links on navy); the
   team section leads to the Team page and Lindsey's page; the zones to the Zones page. */
[data-aboutv=text][data-about] .about__more{display:inline-flex;margin-top:clamp(24px,2.6vw,36px);color:var(--paper);border-color:var(--gold)}
.zones__more{padding:clamp(28px,3vw,40px) 0 0}
.who__act{flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px 28px}
@media (max-width:899px){.who__act{justify-content:center}.zones__more{text-align:center}[data-aw] .about__more{margin-inline:auto}}

/* ---------- zones: the fan (5 Nov, ?zones=fan). Cards on one arc from side to side of the page, each over the next; pointing at
   one opens it and the others part around it. The arc's numbers (--w --h --R --top, each card's --a) come from site.js buildFan.
   A card is a photo with a paper edge, like a print: the edge is what keeps two overlapping photos apart. Radius: the photo
   frames' own (6px in this look), edge 4px, so the photo inside turns its corner at 2px (outer minus the gap). ---------- */
.zf{position:relative;margin-inline:calc(var(--gut) * -1);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.zf-c{position:absolute;left:50%;top:var(--top,56px);width:var(--w,240px);height:var(--h,326px);margin-left:calc(var(--w,240px) / -2);padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform-origin:50% var(--R,1400px);transform:rotate(calc(var(--a,0) * 1deg)) translateY(var(--p,0px));transition:transform .8s cubic-bezier(.32,.72,0,1),opacity .45s var(--ease)}
.zf-c:focus-visible{outline:none}
.zf-k{position:absolute;inset:0;display:block;overflow:hidden;border-radius:16px;border:5px solid var(--paper);background:var(--sand-1);
  box-shadow:0 20px 38px -20px rgba(0,35,62,.42),0 1px 4px rgba(0,35,62,.1);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.32,.72,0,1),box-shadow .7s var(--ease)}
[data-shape=square] .zf-k{border-radius:10px}
[data-navs=lux] .zf-k{border-radius:6px;border-width:4px}
.zf-c:focus-visible .zf-k{outline:2px solid var(--navy);outline-offset:3px}
.zf-k img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.zf-k::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,32,58,.8),rgba(0,32,58,.5) 34%,rgba(0,32,58,0) 64%)}
/* a closed card shows only the side of it that its neighbour leaves free, and that side is narrow: its name runs up that side,
   the way a closed strip carries its name (.ss-v). A closed card is shaded a little further up for those words (::before);
   the open card loses that shade, so it is also the brightest one. */
.zf-k::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,32,58,.46),rgba(0,32,58,0) 80%);transition:opacity .5s var(--ease)}
.zf-c[aria-expanded=true] .zf-k::before{opacity:0}
.zf-v{position:absolute;z-index:2;bottom:16px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);font-weight:400;line-height:1.1;opacity:0;transition:opacity .3s var(--ease)}
.zf-v--l{left:12px}
.zf-v--r{right:12px}
.zf-c[data-side=l] .zf-v--l,.zf-c[data-side=r] .zf-v--r{opacity:1;transition-delay:.2s}
.zf-o{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .6s var(--ease)}
.zf-n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.3vw,38px);line-height:1.04;letter-spacing:-.012em}
.zf-l{display:block;margin-top:6px;font-size:15px;line-height:1.35;text-wrap:pretty}
.zf-go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:15px;font-weight:500}
.zf-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
/* open: the card comes forward and up, out along its own spoke of the arc, and turns most of the way upright so its words read */
.zf-c[aria-expanded=true] .zf-k{transform:translateY(-30px) rotate(calc(var(--a,0) * -.6deg)) scale(1.1);box-shadow:0 38px 64px -26px rgba(0,35,62,.55),0 2px 8px rgba(0,35,62,.12)}
.zf-c[aria-expanded=true] .zf-o{opacity:1;transform:none;transition-delay:.2s}
@media (hover:hover){.zf-c[aria-expanded=true]:hover .zf-go svg{transform:translateX(3px)}}
.zf-c:active .zf-k{transition-duration:.15s}
.zf-c.is-far{opacity:0;pointer-events:none}
/* dealt out from the middle once, when the fan comes into view; after that the cards answer at once */
.zf:not(.is-dealt) .zf-c{transform:rotate(0deg) translateY(36px);opacity:0}
.zf.is-dealt:not(.is-live) .zf-c{transition:transform 1s cubic-bezier(.32,.72,0,1) calc(var(--d,0) * 1ms),opacity .5s var(--ease) calc(var(--d,0) * 1ms)}
@media (max-width:899.98px){
  .zf-k{border-width:4px}
  .zf-c[aria-expanded=true] .zf-k{transform:translateY(-10px) scale(1.04)}
  .zf-v{display:none} /* on the wheel a neighbour shows a sliver of photo, too narrow for its name; the middle card carries the words */
  .zf-n{font-size:clamp(28px,8vw,36px)}
  .zf-k{box-shadow:0 14px 26px -16px rgba(0,35,62,.4),0 1px 3px rgba(0,35,62,.1)}
  .zf-c[aria-expanded=true] .zf-k{box-shadow:0 22px 34px -20px rgba(0,35,62,.5),0 1px 4px rgba(0,35,62,.12)}
}
@media (prefers-reduced-motion:reduce){.zf-c,.zf-k,.zf-o,.zf-v{transition:none!important}.zf:not(.is-dealt) .zf-c{transform:rotate(calc(var(--a,0) * 1deg)) translateY(var(--p,0px));opacity:1}}
/* the fan's link sits in the hollow under the arc, centred (site.js buildFan sets its top); only the link itself takes clicks,
   so the cards beside it stay live */
.zx-fan .zones__more{position:absolute;left:0;right:0;z-index:40;padding:0;text-align:center;pointer-events:none}
.zx-fan .zones__more .btn{pointer-events:auto}

/* opening a zone from the fan: the copy of the card that flies (its words stay visible until they fade), and on the page it
   opens, the same photo over everything, lifting away from the bottom up like a curtain. Set before first paint by site-head.js. */
.zf-fly{pointer-events:none;will-change:left,top,width,height,transform}
.zf-fly::before{opacity:0}
.zf-fly .zf-o{opacity:1;transform:none}
html.zopen::before{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;background:var(--navy-deep) var(--zopen) center/cover no-repeat;animation:zopen-lift .8s cubic-bezier(.65,0,.2,1) .18s both}
@keyframes zopen-lift{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion:reduce){html.zopen::before{display:none}}
/* ---------- NAV-FIT START (5 Nov 2026, his word "add them in the nav bar": Blog and FAQ joined, eight links now). The bar keeps its three
   fixed columns (logo, links dead centre, button). On a narrower screen the links first sit closer, then Home drops out (the logo
   goes home), and below that they fold into the three-line menu the phone already has. Spanish labels are longer, so each step
   comes earlier there. The widths are measured: build/checks/nav-fit.cjs walks every width and must find no overlap. ---------- */
@media (min-width:900px){
  [data-navs=lux]{--nl-pad:15px;--nl-gap:8px;--nl-fs:15.5px;--nl-ls:.06em}
  [data-navs=lux] .nav__links{gap:var(--nl-gap)}
  [data-navs=lux] .nav__links a{padding:0 var(--nl-pad);font-size:var(--nl-fs);letter-spacing:var(--nl-ls);white-space:nowrap}
  [data-navs=lux] .nav__links a::after{left:var(--nl-pad);right:var(--nl-pad)}
}
@media (min-width:900px) and (max-width:1359px){html:not([lang^=es])[data-navs=lux]{--nl-pad:10px;--nl-gap:2px;--nl-fs:15px;--nl-ls:.035em}}
@media (min-width:900px) and (max-width:1179px){html:not([lang^=es])[data-navs=lux]{--nl-pad:9px;--nl-gap:0px;--nl-fs:14.5px;--nl-ls:.03em}html:not([lang^=es])[data-navs=lux] .nav__links a:first-child{display:none}html:not([lang^=es])[data-navs=lux] .logo--nav{height:44px}}
@media (min-width:900px) and (max-width:1099px){
  html:not([lang^=es])[data-navs=lux] .nav__links{display:none}
  html:not([lang^=es]) .menu{display:flex} /* the open menu is switched off from 900px up (site.css, .menu); here it is the menu again */
  html:not([lang^=es]) .burger{position:fixed;z-index:70;top:calc(env(safe-area-inset-top) + (var(--nav,64px) - 44px) / 2);right:max(12px,env(safe-area-inset-right));display:grid;place-content:center;gap:6px;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--paper)}
  html:not([lang^=es]) .burger[data-ink=dark]{color:var(--navy-deep)}
  html:not([lang^=es]) .burger.is-open{color:var(--paper)}
  html:not([lang^=es]) .burger span{display:block;width:24px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
  html:not([lang^=es]) .burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  html:not([lang^=es]) .burger.is-open span:nth-child(2){opacity:0}
  html:not([lang^=es]) .burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  html:not([lang^=es]) .burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}
@media (min-width:900px) and (max-width:1439px){html[lang^=es][data-navs=lux]{--nl-pad:10px;--nl-gap:2px;--nl-fs:15px;--nl-ls:.035em}}
@media (min-width:900px) and (max-width:1269px){html[lang^=es][data-navs=lux]{--nl-pad:9px;--nl-gap:0px;--nl-fs:14.5px;--nl-ls:.03em}html[lang^=es][data-navs=lux] .nav__links a:first-child{display:none}html[lang^=es][data-navs=lux] .logo--nav{height:44px}}
@media (min-width:900px) and (max-width:1179px){
  html[lang^=es][data-navs=lux] .nav__links{display:none}
  html[lang^=es] .menu{display:flex} /* the open menu is switched off from 900px up (site.css, .menu); here it is the menu again */
  html[lang^=es] .burger{position:fixed;z-index:70;top:calc(env(safe-area-inset-top) + (var(--nav,64px) - 44px) / 2);right:max(12px,env(safe-area-inset-right));display:grid;place-content:center;gap:6px;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;color:var(--paper)}
  html[lang^=es] .burger[data-ink=dark]{color:var(--navy-deep)}
  html[lang^=es] .burger.is-open{color:var(--paper)}
  html[lang^=es] .burger span{display:block;width:24px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
  html[lang^=es] .burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  html[lang^=es] .burger.is-open span:nth-child(2){opacity:0}
  html[lang^=es] .burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  html[lang^=es] .burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}
/* nine lines in the open menu now: smaller letters, and it scrolls if a short screen still cannot hold them */
.menu{overflow-y:auto;overscroll-behavior:contain;justify-content:safe center}
.menu a{font-size:clamp(30px,min(10.4vw,5.6vh),60px);line-height:1.16}
@media (max-height:740px){.menu{padding-block:84px 40px}.menu p{margin-top:18px}}
/* NAV-FIT END */

/* ---------- 11 Nov: straight corners on cards, photos and maps ----------
   His word, rooting in parklord.com: "i also want more straight corners. keep it lux on cards and images". Every card,
   photo frame, portrait and map has straight corners now (they were 6px, some 10 to 20px). The search bar on the home page
   and the filter card on Properties stay rounded (his word the same night: "keep the search price bar thingy how it was",
   "i like it like this"). Buttons, fields and the small name tags keep their own shape. */
[data-navs=lux] :is(.card,.card__media,.zplain img,.zs-photo,.ss-p,.teamphoto,.rv__face--wide,.gp-teamphoto,.gp-agent__img,.gp-card__img,.gp-zc,.gp-zc__media,.gp-who__img,.gp-wide,.hx-card,.hx-card__media,.hx-feat__media,.hx-row__media,.ls-m,.ls-tile__img,.ls-ph,.ls-map,.sr-map,.ab-hero__img,.ab-person__img,.type__media,.zi-thumb,.zi-media,.zf-k,.bl-feat,.bl-feat__media,.cp-prose img,.rv__face,.ls-panel,.ls figure,.ls-top figure,.ls-hero,.ls-gal figure){border-radius:0}

/* ---------- 11 Nov: the home page's people as photos, and the reviews ----------
   His words: "let's emphasize the cards and then the text under the card... first, my mom alone, and then 2 cards, 2 cards...
   with the name and their position under it... image-focused mainly, so it's clean, and then you end on the team page, like
   in the team image thing". The list of small round faces with words beside them becomes photos: Lindsey first, alone and
   centred, then two by two, name and role under each; an odd one out at the end is centred too. The About stays beside
   them while they scroll past, and the team photo still closes the section. */
html[data-navs=lux] #team .roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,2.8vw,40px) 10px}
html[data-navs=lux] #team .roster li{display:block;align-content:normal;padding:0;border:0!important} /* align-content: the old list centred each row's words; left on, it pushed a card with a shorter name about 12px below its neighbour (his word: "one is positioned higher than the other") */
html[data-navs=lux] #team .roster li:first-child{grid-column:1 / -1;justify-self:center;width:min(100%,calc(50% + 70px))}
html[data-navs=lux] #team .roster li:last-child:nth-child(even){grid-column:1 / -1;justify-self:center;width:calc(50% - 5px)}
html[data-navs=lux] #team .rface{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:0}
/* someone with no photo yet is a name and a role, centred, with no empty card (his word, for Roselind: "just her name and her position, centered") */
html[data-navs=lux] #team .roster .rface--none{display:none}
html[data-navs=lux] #team .roster li:has(> .rface--none){grid-column:1 / -1;width:auto;justify-self:center;text-align:center}
html[data-navs=lux] #team .roster li:has(> .rface--none) .rname{margin-top:0}
/* a hairline closes the people and sets the team photo apart, as the old list's last line did (his ask: "after roselind add the line that seperated the images from the team picture") */
html[data-navs=lux] #team .roster{padding-bottom:clamp(32px,3.4vw,48px);border-bottom:1px solid var(--line-light)}
html[data-navs=lux] #team .who__foot{margin-top:clamp(32px,3.4vw,48px)}
html[data-navs=lux] #team .rname{margin-top:14px;font-size:clamp(22px,1.9vw,28px)}
html[data-navs=lux] #team .rmeta{margin-top:4px;opacity:.8}
/* "What clients say": her photo as wide as the title above it, so it sits centred under it (site.js measures the title and
   sets --face); the words further right; the arrows centred under the words (the row takes the words' own measure, 42ch
   of the same type). His words: "make my mom's image bigger and center it in regard to 'What the Clients Say'. Move the
   text of the reviews more to the right. Also, 100% center the swiper with the text of the reviews." */
@media (min-width:900px){
  html[data-navs=lux] .rv{--face:clamp(320px,30vw,440px);--fgap:clamp(72px,9vw,150px)}
  html[data-navs=lux] .rv__ctl{padding-left:0;margin-left:calc(var(--face) + var(--fgap));width:min(calc(100% - var(--face) - var(--fgap)),42ch);justify-content:center;
    font:300 clamp(24px,2.5vw,38px)/1 var(--serif);letter-spacing:-.005em}
  html[data-navs=lux] .rv__count{font-family:var(--sans)}
}

/* ---------- 11 Nov: the right side of the About spread is centred; the rating sits under the review's photo ----------
   His words: "Let's grab half the screen, and then let's center everything. All of the right side should be centered" (the
   title, the languages and Lindsey's photo on one centre line; the pairs and their names stay as they are, starting at each
   photo's left edge). And: "For the 4.8 on Google from 29 reviews, put it smaller under my mom's card instead... under the
   card that whatever is playing". */
@media (min-width:900px){html[data-navs=lux] .aw-spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
html[data-navs=lux] #team > h2,html[data-navs=lux] #team .langs{text-align:center;margin-inline:auto}
html[data-navs=lux] #team .who__act{justify-content:center}
/* the whole photo, not a square cut out of a small copy (his word: it looked "zoomed in" and soft): the large portrait, in its own proportions */
html[data-navs=lux] .rv__face:not(.rv__face--wide){aspect-ratio:auto;height:auto}
html[data-navs=lux] .rv__who{display:grid;gap:12px;justify-items:center;min-width:0}
html[data-navs=lux] .rv__rating{margin:0;font-size:14px;line-height:1.4;color:var(--ink-soft);text-align:center}

/* ---------- 11 Nov: a page's closing block belongs to the section above it ----------
   "Tell us what you're looking for" (with its form) and "Talk to us" close many pages. They used to be a section of their
   own in another colour, far below the last one. Now each takes the ground of the section above it and sits close under
   it, so it reads as that section's end; a form card takes the other colour (cream on white, white on cream).
   His words, first for the home page: keep it "in the same white that 'What clients say' is using", "the card is the one
   that becomes cream", "shorten the space between both of them"; then for Zones, where the section above is cream: "keep
   the background cream and switch the color to white for the card"; "do this for any other small sections"; and for
   "Talk to us" on Team and Blog: "keep that in white and shorten that so it's closer to the other section, kind of like an
   end to the other section". */
html[data-navs=lux] main > :is(.contact,.gp-cta){background:var(--paper);--cover:var(--paper)}
html[data-navs=lux] main > .ab--sand + :is(.contact,.gp-cta){background:var(--sand-2);--cover:var(--sand-2)}
html[data-navs=lux] .contact .cform{background:var(--sand-2)}
html[data-navs=lux] .ab--sand + .contact .cform{background:var(--paper)}
html[data-navs=lux] main > :has(+ :is(.contact,.gp-cta)){padding-bottom:clamp(28px,3vw,44px)}
html[data-navs=lux] main > * + :is(.contact,.gp-cta){padding-top:clamp(28px,3vw,44px)}
html[data-navs=lux] main > :is(.contact,.gp-cta){padding-bottom:clamp(40px,4.4vw,64px)} /* and no tall empty band before the footer */

/* ---------- 11 Nov: a smaller, more compact footer ----------
   His word after seeing the new shape: "make the footer smaller, and more compact". Less air above and between its rows,
   slightly smaller words, and no big name at the bottom.
   With a mouse the text links need less height than a finger does, so they are 32px there and stay 44px on touch. */
html[data-navs=lux] .foot{padding-top:clamp(10px,1.2vw,18px);padding-bottom:clamp(10px,1.4vw,20px)}
html[data-navs=lux].motion .foot,html[data-navs=lux] .foot{min-height:0} /* it used to fill a whole screen with navy above its words; now it is only as tall as what it holds */
html[data-navs=lux] .foot .foot__in{padding-top:clamp(18px,2vw,28px)}
html[data-navs=lux] .foot .foot__top{padding-bottom:clamp(12px,1.3vw,18px);row-gap:16px}
html[data-navs=lux] .foot .foot__brand{gap:12px}
html[data-navs=lux] .foot .foot__cols{padding:clamp(12px,1.3vw,18px) 0;gap:14px clamp(24px,3.4vw,56px)}
html[data-navs=lux] .foot .foot__col{font-size:14.5px}
html[data-navs=lux] .foot .foot__accr{padding:clamp(10px,1.2vw,16px) 0}
html[data-navs=lux] .foot .foot__in::after{content:none;display:none} /* the big name across the bottom is out (his word, 11 Nov: "take out the summer coast realty in the footer. and make it smaller"); it had stayed until then */
html[data-navs=lux] .foot .foot__in{padding-top:clamp(14px,1.6vw,22px)}
html[data-navs=lux] .foot .foot__top{padding-bottom:clamp(8px,1vw,12px)}
html[data-navs=lux] .foot .foot__cols{padding:clamp(10px,1.1vw,14px) 0}
html[data-navs=lux] .foot .foot__col{line-height:1.4}
@media (min-width:1340px){html[data-navs=lux] .foot .foot__accr{padding:0}html[data-navs=lux] .foot .foot__legal{padding:4px 0}}
@media (hover:hover) and (pointer:fine){html[data-navs=lux] .foot .foot__list a,html[data-navs=lux] .foot .foot__office a,html[data-navs=lux] .foot .foot__legal a{min-height:32px}}

/* ---------- 11 Nov: the footer's dividing lines ----------
   His word: "the footer lines that seperate make them stronger and fully touching each side". The lines between the
   footer's rows used to stop at the page margins and were faint; they now run from one edge of the screen to the other
   and are more than twice as strong. Each row keeps its own (now invisible) border so nothing moves. */
html[data-navs=lux] .foot{overflow-x:clip}
html[data-navs=lux] .foot :is(.foot__top,.foot__accr,.foot__legal){position:relative;border-color:transparent}
html[data-navs=lux] .foot .foot__top::after,html[data-navs=lux] .foot .foot__accr::before,html[data-navs=lux] .foot .foot__legal::before{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;height:1px;background:rgba(253,250,246,.45);pointer-events:none}
html[data-navs=lux] .foot .foot__top::after{bottom:-1px}
html[data-navs=lux] .foot .foot__accr::before,html[data-navs=lux] .foot .foot__legal::before{top:-1px}
@media (min-width:1340px){html[data-navs=lux] .foot .foot__accr::before{display:none}} /* there the logos share the closing row, which has the line */

/* ---------- 11 Nov: the footer's offices row, three centred blocks ----------
   The two offices and Contact. Three tries the same morning: equal columns with the words starting at each column's left
   ("the last contact is too to the left"); then spread to both margins ("now contact is too close to the right"); now
   what he asked for in the end: "visually center them as they are three not mathematically". Each block sits in the
   middle of its third and its lines are centred on that middle, so the eye sees three balanced groups whatever the
   length of each line. On a phone they stack as before. */
@media (min-width:900px){
  html[data-navs=lux] .foot .foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;text-align:center;column-gap:clamp(24px,3.4vw,56px)}
  html[data-navs=lux] .foot .foot__col{justify-items:center;max-width:none}
  html[data-navs=lux] .foot .foot__office a{justify-self:center}
}

/* ---------- 11 Nov: less air between cards and photos ----------
   His word: "how many pixels are in between each. i want less. like in between images". Measured before: 16 to 46px
   between columns and 36 to 63px between rows, a different number on every page. Now 10px between columns everywhere, and
   rows just far enough apart for the words under a card. */
html[data-navs=lux] :is(.hx-grid,.gp-grid,.gp-zgrid,.gp-team,.types__grid,.ls-tiles){column-gap:10px}
html[data-navs=lux] :is(.hx-grid,.gp-zgrid,.gp-team){row-gap:clamp(28px,2.6vw,36px)}
html[data-navs=lux] .gp-grid{row-gap:28px}
html[data-navs=lux] .ls-tiles{row-gap:10px}
html[data-navs=lux] main .row{gap:10px}
html[data-navs=lux] .hx-card__body{padding-right:14px} /* with photos 10px apart, a price at a card's right edge ran into the next card's name */

/* ---------- 11 Nov: the footer's newsletter and icons, rooted in parklord.com ----------
   His words: "yes the footer we can fix also the newsleter cleaner". The email field is a line to write on, not a box; its
   button is an outlined pill, not a gold block; the five links are outlined rounds. The footer was already flat and edge
   to edge, and the big name across the bottom stays (his word, earlier). */
.foot .foot__field{gap:16px;align-items:flex-end}
.foot .foot__field input{border:0;border-bottom:1px solid rgba(253,250,246,.5);border-radius:0;padding:0 2px;background:transparent}
.foot .foot__field input:hover{border-bottom-color:var(--paper)}
.foot .foot__field input:focus-visible{outline:0;border-bottom-color:var(--gold);box-shadow:0 1px 0 0 var(--gold)}
.foot .foot__field input[aria-invalid=true]{border-bottom-color:#f0b4a8}
.foot .foot__field .btn{background:transparent;color:var(--paper);border:1px solid rgba(253,250,246,.7);border-radius:999px;padding:0 26px;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.foot .foot__field .btn:hover{background:var(--paper);color:var(--navy-deep);border-color:var(--paper)}
.foot .foot__social{gap:10px;margin:12px 0 0}
.foot .foot__social a{border:1px solid rgba(253,250,246,.45);border-radius:50%;opacity:1;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .16s var(--ease)}
.foot .foot__social a:hover{background:var(--paper);color:var(--navy-deep);border-color:var(--paper)}
@media (prefers-reduced-motion:reduce){.foot .foot__field .btn,.foot .foot__social a{transition:none}}

/* ---------- 11 Nov: the footer's shape, rooted in parklord.com ----------
   His words: "let's fix up the footer. Yeah, 100%. Also add my design by Swell in the left corner and the socials, of
   course". Top row: the brand line with the round icons under it on the left, the newsletter on the right with its
   label above the line (the page links that sat between them for a few hours are out: "no need to add the pages in the
   footer"). Then the two offices and the ways to reach them. Then one closing row: the
   design credit first, in the left corner, and the association logos on the right. The big name still closes the page.
   build/footer_shape.py adds the credit and moves the icons, on every page. */
.foot .foot__brand{display:grid;gap:18px;align-content:start;justify-items:start}
.foot .foot__brand .foot__social{margin:0}
.foot .foot__news{grid-template-columns:minmax(0,1fr);row-gap:10px;max-width:none}
.foot .foot__news .foot__err{grid-column:1}
.foot .foot__credit{color:var(--paper)}
.foot .foot__office a{min-height:44px} /* the Directions links were 40px, under the 44px floor */
@media (min-width:900px){
  .foot .foot__top{grid-template-columns:minmax(0,1fr) minmax(300px,430px);column-gap:clamp(32px,5vw,88px);align-items:start} /* the brand line and icons on the left, the newsletter at the right margin */
}
@media (min-width:1340px){
  .foot .foot__accr{grid-row:3;grid-column:1;justify-self:end;align-self:center;border-top:0;padding:0;position:relative;z-index:1}
  .foot .foot__accr ul{justify-content:flex-end;gap:6px clamp(20px,2.4vw,36px)}
  .foot .foot__legal{grid-row:3;grid-column:1;padding:clamp(10px,1.2vw,16px) 0}
  .foot .foot__legal a:last-child{margin-left:0}
}

/* ---------- 11 Nov: the bar takes a colour on scroll ----------
   Clear at the very top of a page, over the photo or the navy band; once the page is scrolled it becomes a slim bar in the
   deep navy, edge to edge, words light (his word on parklord.com: "i love how the nav gets a color on scroll instead of
   the fade thing. and that its clear at the beginning"). site.js sets html.nav-solid; the page no longer fades under a
   clear bar. */
/* The change is slow and even, the way theirs is (measured 11 Nov: 0.7s ease-in-out for the bar, 0.6s for the logo; his
   word on our first try at 0.35s: "ours kind of jumps into it and it's very fast, theirs is smooth... it accommodates
   itself"). The bar's height, its colour, and the colour of everything in it move together; the slow timing is only on
   while the bar is changing (html.nav-moving), so a hover on a link stays quick. */
html.nav-moving[data-nav=full] .nav{transition:background-color .7s ease-in-out,min-height .7s ease-in-out,color .7s ease-in-out,border-color .7s ease-in-out}
html.nav-moving .nav :is(a,.btn,.langsw,.brand,span),html.nav-moving .burger,html.nav-moving .burger *{transition:color .7s ease-in-out,background-color .7s ease-in-out,border-color .7s ease-in-out,text-shadow .7s ease-in-out}
html.nav-moving .logo--nav{transition:height .6s ease-in-out,filter .7s ease-in-out}
html.nav-moving .logo--nav *{transition:fill .7s ease-in-out,stroke .7s ease-in-out,color .7s ease-in-out}
html.nav-solid[data-nav=full] .nav,html.nav-solid[data-nav=full] .nav[data-ink]{background:var(--navy-deep)}
html.nav-solid .nav[data-ink=light] :is(.nav__links a,.langsw){text-shadow:none}
html.nav-solid .nav[data-ink=light] .logo--nav{filter:none}
@media (min-width:900px){
  html.nav-solid[data-navs=lux][data-nav=full] .nav{min-height:64px}
  html.nav-solid[data-navs=lux] .logo--nav{height:40px}
}
@media (prefers-reduced-motion:reduce){html.nav-moving .nav,html.nav-moving .nav *,html.nav-moving .burger,html.nav-moving .burger *{transition:none}}
/* ---------- 10 Nov: between pages, a slow dissolve ----------
   Third try the same day. A navy sheet rising over the page came first; he liked it, then: "too strong and clashy...
   more of a fade. gotta give lux". Now the browser dissolves one page into the next (a cross-fade of the two pages, no
   colour in between), so whatever both pages share, the bar or a navy title band, simply stays where it is and only what
   differs melts over. Slow and even on purpose (0.6s). Browsers that cannot do this between pages (Firefox today) change
   page plainly; so does anyone who asked for reduced motion. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* the footer's top: on a computer the footer is shorter than the screen, so it never needs the bar's room (10 Nov) */
@media (min-width:900px){.foot{padding-top:clamp(20px,2.4vw,32px)}}