/* Consortium Collection: the website, and the design itself (Hampus, 2026-10-19: the live site is the design; the
   design system is remade from it). The tokens in :root below are the source for colour, type and motion.
   Raihanna's warm site: one cream ground with brown text (Hampus, 2026-10-19: keep the brown and the cream, no dark
   panels), wine as the one accent; Hanken Grotesk with an Instrument Serif italic turn; glass pills in the header.
   Its motion: the wine line writes the CC, then pulls the picture into the film (Lusion's, our mark); the 3D coast is
   coast3d.css. */
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --cream:#F0EEE6; --mist:#E4E1DB; --greige:#D4D0C8; --sand-1:#E8E6E1; --sand-2:#D6D2CB; --sand-3:#C8C3BB;
  --ink:#5E4535; --brown:#6B4F3E; --taupe:#7A6150; --copper:#A87B61;
  --espresso:#634A3A; --cocoa:#5D4635; --night:#4A3529; --champagne:#FBEED8;
  --wine:#731412;
  /* --ink was #3E2C22, then #4F3527, until 2026-10-20 (Hampus: the upright half of the headings still read black next to
     the taupe italic; "a bit more brown than black"). 7.6:1 on cream, 6.8:1 on mist. */
  --ash:#AFA295;   /* light ash brown (Hampus and Raihanna, 2026-10-19): the ground of the reviews; text on it in ink */
  --f-sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --gut:clamp(16px,3.9vw,56px);
  /* content lines up on a centred 1440 px column on wide screens, as in Raihanna's canvas; backgrounds stay full width */
  --pad-l:max(var(--gut),calc((100vw - 1440px) / 2 + 20px),env(safe-area-inset-left,0px));
  --pad-r:max(var(--gut),calc((100vw - 1440px) / 2 + 20px),env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.19,1,.22,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background-color:var(--cream)}   /* iOS 26 Safari tints its status-bar area from the page's own background */
/* the strip behind a phone's status bar: solid cream, the height of the safe area (zero on a desktop). Safari 26 colours
   that area from a fixed element at the top edge, and without this one it found our transparent header and drew a grey
   band (Hampus, 2026-10-20) */
.safe-top{position:fixed;inset:0 0 auto;z-index:49;height:env(safe-area-inset-top,0px);background-color:var(--cream);pointer-events:none}
html,body{overflow-x:clip;overscroll-behavior-x:none}   /* no sideways swipe or bounce: the page only moves up and down */
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
figure{margin:0}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* the italic turn in taupe, as in Raihanna's Färgtest canvas (Hampus, 2026-10-19: the text read too dark). Where the turn
   sits on film, a band, the ash or the menu, or inks in with a statement, it keeps the colour around it. */
em{color:var(--taupe)}
.ink em,.menu nav em,.hero-cap em,.flow-words em,.flow-foot em,.strip em,.fz-firm em,.fz-method em,.ftr em,.areas em{color:inherit}
.wrap{padding-left:var(--pad-l);padding-right:var(--pad-r)}
.lbl{font:600 11px/1.7 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brown)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.lk{display:block;width:auto;fill:currentColor}

/* pills and the rolling label (Raihanna) */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 24px;border-radius:999px;font:600 12px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.pill.dark{background:var(--ink);color:var(--cream)}
.pill.dark:hover{background:var(--espresso)}
.pill.light{background:var(--cream);color:var(--ink)}
.pill.light:hover{background:var(--champagne)}
.pill.line{border:1px solid currentColor;padding:0 7px 0 24px}
.pill.line:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill .dot{width:38px;height:38px;border-radius:50%;background:var(--taupe);color:#fff;display:grid;place-items:center;flex:none}
.pill .dot svg{width:15px;height:10px}
.glass{background:rgba(240,238,230,.62);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.7)}
.roll{display:inline-block;overflow:hidden;height:1.12em;line-height:1.12;vertical-align:top}
.roll>span{display:flex;flex-direction:column;transition:transform .7s var(--ease)}
.roll>span>span{display:block;height:1.12em}
a:hover .roll>span,button:hover .roll>span,a:focus-visible .roll>span,button:focus-visible .roll>span{transform:translateY(-50%)}

/* loader: the old site's CC loader with the name, on frosted glass (intro A from the Franclizer study, 2026-10-18).
   3.6 s: the CC holds, a second CC turns out of it and the two part, they close into the link,
   CONSORTIUM then COLLECTION rise in beneath, the logo leaves, then the glass clears from blurred to sharp. */
.loader{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 64%,rgba(255,255,255,.06) 100%),linear-gradient(rgba(240,238,230,.5),rgba(240,238,230,.62));-webkit-backdrop-filter:blur(34px) saturate(1.25);backdrop-filter:blur(34px) saturate(1.25);color:var(--wine);cursor:pointer;animation:ld-out 3.6s linear forwards}
.loader::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
@keyframes ld-out{0%,81.94%{opacity:1;visibility:visible;-webkit-backdrop-filter:blur(34px) saturate(1.25);backdrop-filter:blur(34px) saturate(1.25);animation-timing-function:cubic-bezier(.45,0,.55,1)}97.22%{opacity:0;visibility:visible;-webkit-backdrop-filter:blur(0px) saturate(1);backdrop-filter:blur(0px) saturate(1)}100%{opacity:0;visibility:hidden;-webkit-backdrop-filter:blur(0px) saturate(1);backdrop-filter:blur(0px) saturate(1)}}
.ld-stage{position:relative;width:0;height:0;flex:none;scale:.82}
.ld-group{position:absolute;left:0;top:0;filter:drop-shadow(0 6px 22px rgba(62,44,34,.14));animation:ld-group 3.6s linear forwards}
@keyframes ld-group{0%,76.39%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}87.5%,100%{opacity:0;transform:translateY(-10px)}}
.ld-box{position:absolute;left:-152.5px;top:-150px;width:200px;height:200px;will-change:transform,opacity;animation:3.6s linear forwards}
.ld-box svg{position:absolute;left:0;top:14px;width:200px;height:171.4px;fill:currentColor}
.ld-a{animation-name:ld-a}
.ld-b{opacity:0;animation-name:ld-b}
@keyframes ld-a{
  0%,4.17%{transform:translateX(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  29.17%{transform:translateX(-118px);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  47.22%,100%{transform:translateX(-42px)}
}
@keyframes ld-b{
  0%,4.17%{opacity:0;transform:perspective(900px) translateX(0) rotateY(0deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  20.83%{opacity:1}
  29.17%{opacity:1;transform:perspective(900px) translateX(256px) rotateY(180deg);animation-timing-function:cubic-bezier(.45,0,.2,1)}
  47.22%,100%{opacity:1;transform:perspective(900px) translateX(147px) rotateY(180deg)}
}
.ld-name{position:absolute;left:-150px;top:-27.7px;width:300px;height:166.1px;fill:currentColor;opacity:0;will-change:transform,opacity;animation:3.6s linear forwards}
.ld-n1{animation-name:ld-n1}
.ld-n2{animation-name:ld-n2}
@keyframes ld-n1{0%,43.06%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.22,1,.36,1)}59.72%,100%{opacity:1;transform:translateY(0)}}
@keyframes ld-n2{0%,46.39%{opacity:0;transform:translateY(14px);animation-timing-function:cubic-bezier(.22,1,.36,1)}63.06%,100%{opacity:1;transform:translateY(0)}}
@media (max-width:900px){.ld-stage{scale:.7}}
@media (max-width:600px){.ld-stage{scale:.58}}
@media (max-width:380px){.ld-stage{scale:.5}}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;pointer-events:none;padding-top:env(safe-area-inset-top,0px)}
.hdr-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px}
.brand{pointer-events:auto;display:flex;align-items:center;min-height:58px;padding:0 24px 0 20px;border-radius:999px;color:var(--ink)}
.brand .lk{height:38px}
.hdr-r{pointer-events:auto;display:flex;align-items:center;gap:8px}
.menu-btn svg{width:22px;height:10px;flex:none}
/* the four pages, out of the menu on a wide screen (Sam, 2026-10-21); a phone or a narrower window keeps them in it */
.hdr-nav{display:none;align-items:center;gap:2px;min-height:52px;padding:0 6px;border-radius:999px}
.hdr-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font:600 12px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .3s}
.hdr-nav a:hover,.hdr-nav a:focus-visible{background:rgba(255,255,255,.55)}
.hdr-nav a[aria-current=page]{background:rgba(255,255,255,.88)}
@media (min-width:1200px){.hdr-nav{display:flex}}

/* menu */
.veil{position:fixed;inset:0;z-index:60;background:rgba(62,44,34,.25)}
.veil[hidden],.menu[hidden]{display:none}
.menu{position:fixed;z-index:61;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));left:max(12px,env(safe-area-inset-left,0px));margin-left:auto;max-width:460px;max-height:calc(100svh - 24px);overflow:auto;border-radius:26px;background:rgba(240,238,230,.93);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 80px rgba(62,44,34,.22);padding:12px 12px 20px;display:flex;flex-direction:column;gap:6px;animation:menu-in .5s var(--ease) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.menu-top{display:flex;justify-content:flex-end}
.menu-close{background:var(--mist);min-height:48px}
.menu-close svg{width:14px;height:14px}
.menu nav{display:flex;flex-direction:column;padding:4px 14px 14px}
.menu nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;font:500 clamp(30px,5vw,44px)/1 var(--f-sans);letter-spacing:-.03em;text-transform:uppercase;border-bottom:1px solid var(--greige)}
.menu nav a:last-child{border-bottom:0}
.menu nav a[aria-current=page]{color:var(--wine)}
.menu nav a[aria-current=page] small::before{content:"\B7  "}
.menu nav small{font:600 11px/1 var(--f-sans);letter-spacing:.14em;color:var(--brown);font-variant-numeric:tabular-nums}
.menu nav em{text-transform:none}
.list{margin:0 2px;padding:18px 16px;border-radius:18px;background:var(--mist);display:grid;gap:8px}
.list b{font-weight:500;font-size:18px;letter-spacing:-.01em}
.list label{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--copper)}
.list input{flex:1;min-width:0;min-height:46px;background:transparent;border:0;font:400 16px var(--f-sans);color:var(--ink);padding:0}
.list input:focus{outline:0}
.go{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;flex:none}
.go svg{width:15px;height:10px}
.list small{font-size:13px;color:var(--brown);min-height:1.4em}

/* the opening: the place name in giant type with the coast film inside the letters; scrolling flies into the C
   of "Costa" until the film fills the screen, then three promises rise in and the closing caption. */
.pm{position:relative;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;height:1.1em;font:500 clamp(32px,4.6vw,76px)/1 var(--f-sans);letter-spacing:-.04em;width:100%}
.pm+.pm{margin-top:-1.1em}
.pm>span{display:block;white-space:nowrap;transform:translateY(110%);will-change:transform}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--night)}
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--night)}
/* the opening after normafranck.com's (Sam, 2026-10-21): the film fills the screen from the first frame, the title and
   "Our collection" sit on it at the bottom left, the ring turns at the right; as the page scrolls on, the film drifts
   down and the words lift away (home.js) */
.hero-film{position:absolute;inset:0;will-change:transform}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(62,44,34,.3) 0%,rgba(62,44,34,0) 22%,rgba(62,44,34,0) 44%,rgba(62,44,34,.62) 100%)}
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:30px;padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));color:var(--champagne);will-change:transform,opacity}
.hero-h{margin:0;max-width:14em;font:500 clamp(36px,4.4vw,66px)/1.04 var(--f-sans);letter-spacing:-.035em}
.hero-h em{letter-spacing:-.01em}
.hero-go{animation:rise 1s var(--ease) 3.3s both}
.no-intro .hero-go{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-ring{position:absolute;right:var(--pad-r);bottom:calc(40px + env(safe-area-inset-bottom,0px));z-index:2;width:112px;height:112px;will-change:transform}
.hero-ring svg{display:block;width:100%;height:100%;overflow:visible}
/* the ring always turns, slowly, and the scroll turns it further (Hampus, 2026-10-20: "should always spin, not only when
   you scroll"; the one piece of the site that moves by the clock) */
@keyframes ring-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.hero-ring svg{animation:ring-spin 24s linear infinite}}
.hero-ring text{font:600 10px/1 var(--f-sans);text-transform:uppercase;fill:var(--champagne)}
.hero-ring i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--champagne)}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-h .ln>span{display:block;animation:up 1.2s var(--ease) both}
.hero-h .ln:nth-child(1)>span{animation-delay:2.95s}
.hero-h .ln:nth-child(2)>span{animation-delay:3.05s}
.no-intro .hero-h .ln:nth-child(1)>span{animation-delay:.1s}
.no-intro .hero-h .ln:nth-child(2)>span{animation-delay:.2s}
@keyframes up{from{transform:translateY(106%)}to{transform:none}}

/* the line: write the CC, pull the picture out (Lusion's motion, our mark) */
.flow{position:relative;height:560svh;background:var(--cream)}
.flow-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.flow-line,.flow-gl,.flow-mark{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.flow-line{z-index:1;overflow:visible}
.flow-line path{fill:none;stroke:var(--wine);stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.flow-copy{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:opacity,transform}
.flow-h{position:absolute;left:var(--pad-l);top:calc(env(safe-area-inset-top,0px) + 104px);margin:0;font:500 clamp(34px,4.7vw,74px)/1 var(--f-sans);letter-spacing:-.04em;max-width:11.5em}
.flow-side{position:absolute;right:var(--pad-r);top:calc(env(safe-area-inset-top,0px) + 118px);width:min(460px,34vw);display:grid;gap:26px;justify-items:start;pointer-events:auto}
.flow-side p{margin:0;font:400 clamp(17px,1.45vw,21px)/1.5 var(--f-sans)}
.flow-gl{z-index:3}
.flow-pic{position:absolute;z-index:3;left:0;top:0;width:100px;height:100px;overflow:hidden;border-radius:12px;transform-origin:0 0;display:none}
.flow-pic img{width:100%;height:100%;object-fit:cover}
.flow-mark{z-index:4;overflow:visible}
.flow-words{position:absolute;z-index:5;left:0;right:0;top:50%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none;color:var(--champagne);opacity:0;transform:translateY(-50%)}
#wL{justify-self:end}
#wR{justify-self:start}
.flow-words span{font:500 clamp(34px,8.2vw,138px)/1 var(--f-sans);letter-spacing:-.05em;text-transform:uppercase;will-change:transform}
.flow-words em{display:block;text-transform:none;font-size:1.08em;letter-spacing:-.03em}
.flow-words i{display:block;flex:none}
.flow-foot{position:absolute;z-index:6;left:0;right:0;display:flex;justify-content:center;color:var(--champagne);opacity:0;pointer-events:none}
/* under "Our values", in the middle, in glass so the film shows through (Hampus, 2026-10-21) */
.flow-foot .pill.glass{color:var(--ink)}   /* the header's frosted glass: it reads on the light frames and the dark ones */
.flow-foot .pill.glass:hover{background:rgba(240,238,230,.82)}
.flow-foot.on{pointer-events:auto}

/* the firm: three pictures that open upward as they scroll in, then settle (the 1.0 canvas's reveal) */
.reveal{position:relative;aspect-ratio:3/4;max-width:100%;overflow:hidden;border-radius:24px;background:var(--greige)}
.reveal img{width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease)}

/* how a search runs: picture windows, one open; hover, tap or focus opens another (the 1.0 canvas's area strips) */
.brief-sec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:center;padding-block:clamp(90px,10vw,150px) clamp(60px,7vw,110px)}
.bs-media .reveal{aspect-ratio:4/5;border-radius:24px;overflow:hidden}
.bs-media img{width:100%;height:100%;object-fit:cover}
.bs-text{display:grid;gap:22px;justify-items:start}
.bs-text h2{margin:0;font:500 clamp(38px,4.6vw,76px)/1 var(--f-sans);letter-spacing:-.045em;max-width:14em}
.bs-text p{margin:0;max-width:44ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--brown)}
.brief-vals{padding-block:clamp(70px,8vw,120px) clamp(90px,10vw,150px)}
.vwords{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3.2vw,48px) clamp(18px,2.4vw,34px);margin:clamp(34px,4vw,56px) 0 0;padding:0;list-style:none}
.vwords li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:1px solid rgba(62,44,34,.16)}
.vwords b{font:500 clamp(40px,4.8vw,80px)/.95 var(--f-sans);letter-spacing:-.05em}
.vwords li:nth-child(even) b{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
.vwords li>span:last-child{font-size:16px;line-height:1.5;color:var(--brown);max-width:28ch}
.vclose{margin:clamp(56px,7vw,100px) auto 0;max-width:20em;text-align:center;font:500 clamp(28px,3.4vw,54px)/1.08 var(--f-sans);letter-spacing:-.04em}
.how{padding-block:clamp(56px,6vw,96px) clamp(100px,11vw,170px)}
.how-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:clamp(40px,5vw,60px)}
.how-head h2{margin:14px 0 0;font:500 clamp(46px,6.4vw,104px)/.92 var(--f-sans);letter-spacing:-.05em}
.how-side{display:grid;gap:22px;justify-items:start;max-width:380px}
.how-side p{margin:0;font-size:17px;line-height:1.6;color:var(--espresso)}
/* "Location is key", on the cream between the five steps and the map (Hampus, 2026-10-21) */
.coast-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;padding-top:clamp(70px,8vw,130px)}
.coast-intro h2{margin:0;font:500 clamp(46px,6.4vw,104px)/.92 var(--f-sans);letter-spacing:-.05em}
.coast-intro p{margin:0;max-width:34ch;font-size:17px;line-height:1.6;color:var(--espresso)}
.strips{display:flex;gap:10px;height:clamp(480px,44vw,660px)}
.strip{position:relative;flex:1 1 0;min-width:0;min-height:0;border-radius:24px;overflow:hidden;background:var(--sand-3);color:var(--champagne);transition:flex .9s var(--ease)}
.strip.open{flex:5 1 0}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.12;transition:scale 1.2s var(--ease)}
.strip.open img{scale:1}
.strip-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,53,41,0) 36%,rgba(74,53,41,.34) 62%,rgba(58,40,31,.8) 100%);-webkit-backdrop-filter:blur(3px) saturate(110%);backdrop-filter:blur(3px) saturate(110%);-webkit-mask-image:linear-gradient(180deg,transparent 48%,#000 86%);mask-image:linear-gradient(180deg,transparent 48%,#000 86%)}
.strip::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(62,44,34,.36);transition:opacity .6s}
.strip.open::after{opacity:0}
.vlabel{position:absolute;left:20px;bottom:22px;z-index:2;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);font:600 12px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;transition:opacity .3s}
.strip.open .vlabel{opacity:0}
.strip-t{position:absolute;left:28px;bottom:26px;z-index:2;width:min(520px,60vw);display:grid;gap:10px;justify-items:start;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .7s var(--ease);pointer-events:none}
.strip.open .strip-t{opacity:1;transform:none;transition-delay:.28s}
.strip-t .lbl{color:var(--champagne)}
.strip-t h3{margin:0;font:500 clamp(34px,3.6vw,58px)/1 var(--f-sans);letter-spacing:-.045em;color:var(--champagne)}
.strip-t p{margin:0;max-width:38ch;font:400 clamp(16px,1.25vw,19px)/1.55 var(--f-sans);color:#FFF8EC;text-shadow:0 1px 14px rgba(30,20,14,.35)}
.strip-btn{position:absolute;inset:0;z-index:3;width:100%;height:100%;border-radius:inherit;cursor:pointer}
.strip.open .strip-btn{cursor:default}
.strip-btn:focus-visible{outline:2px solid var(--champagne);outline-offset:-5px}

/* homes (Raihanna's featured homes, Lusion's featured-work grid) */
.homes{padding-block:clamp(100px,11vw,160px) clamp(80px,9vw,130px)}
.homes-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.homes-head h2{margin:0;font:500 clamp(56px,9vw,150px)/.88 var(--f-sans);letter-spacing:-.055em}
.homes-note{max-width:36ch;margin:0;font-size:15px;line-height:1.55;color:var(--brown)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(16px,2vw,28px);margin-top:clamp(48px,5vw,80px)}
.card{display:flex;flex-direction:column;gap:16px;min-width:0}
.card-fig{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:24px;overflow:hidden;background:var(--greige)}
.card-fig img{width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease)}
.card:hover .card-fig img{scale:1.05}
.status{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 14px;border-radius:999px;background:rgba(240,238,230,.93);font:700 10px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.status svg{height:9px;width:auto;fill:currentColor}
.status.sold{background:var(--wine);color:var(--champagne)}
.card-meta{font:600 11px/1.6 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brown);font-variant-numeric:tabular-nums}
.card-name{font:500 clamp(30px,3.4vw,54px)/1.04 var(--f-sans);letter-spacing:-.045em}
.homes-more{display:flex;justify-content:center;margin-top:clamp(56px,6vw,90px)}

/* talk + brief, on the same ground as the rest */
.talk{padding-block:clamp(110px,12vw,170px)}
.talk-in{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.talk-big{display:block;font:500 clamp(68px,14.5vw,250px)/1 var(--f-sans);letter-spacing:-.065em;color:var(--ink)}
.talk-big em{color:var(--wine)}
.talk-big.on .roll>span{transform:translateY(-50%)}   /* rolled by the scroll, as by the pointer (site.js) */
.brief{width:100%;max-width:1080px;margin-top:clamp(20px,3vw,40px);display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px 12px;align-items:end;text-align:left}
.brief .full{grid-column:1/-1}
.brief-go{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:4px}
.brief-go .tick{flex:1 1 320px;max-width:62ch}
.fld{display:grid;gap:10px;min-width:0}
.fld .lbl{padding-left:22px}
.inp{width:100%;min-width:0;min-height:58px;padding:0 22px;border-radius:999px;border:1px solid rgba(62,44,34,.16);background-color:rgba(255,255,255,.5);color:var(--ink);font:400 17px/1.2 var(--f-sans);-webkit-appearance:none;appearance:none;transition:border-color .25s,background-color .25s,box-shadow .25s}
.inp::placeholder{color:rgba(62,44,34,.42)}
.inp:hover{background-color:rgba(255,255,255,.72)}
.inp:focus{outline:0;border-color:var(--ink);background-color:#fff;box-shadow:0 0 0 4px rgba(115,20,18,.1)}
select.inp{padding-right:48px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 28px) 52%,calc(100% - 23px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.pill.send{min-height:58px;padding:0 7px 0 26px}
.pill.dark .dot{background:var(--cream);color:var(--ink)}
.pill.dark:hover .dot{background:#fff}
.pill .dot svg{transition:transform .35s var(--ease)}
.pill:hover .dot svg{transform:translateX(2px)}
.brief-note{max-width:60ch;margin:4px 0 0;font-size:15px;line-height:1.6;color:var(--brown)}
/* the newsletter under Let's talk: the menu's form, quieter (Sam, 2026-10-21: "a discreet CTA") */
.list.news{width:min(100%,420px);margin:clamp(8px,2vw,24px) auto 0;padding:0;background:transparent;text-align:left;gap:6px}
.list.news b{font-size:16px}
.news-note{font-size:14px;line-height:1.5;color:var(--brown)}

/* footer: the film behind everything, the text over it */
/* the page sits on the footer: the cream page rounds its bottom corners into the footer, whose film runs on beneath
   them, and the footer has no corners of its own (Hampus, 2026-10-20: "the footer's angles at the corners can go in the
   opposite direction ... for the bottom of it, there should be no corners at all"). main is not clipped: inside a
   rounded clip, Chrome drops a backdrop blur's mask, and the step pictures blurred from top to bottom (found by the
   design-system session, 2026-10-20). No page's last section paints into the corners (every panel rounds its own),
   and a new one with its own ground must round its bottom corners too. */
main:has(+ .ftr){position:relative;z-index:1;background:var(--cream);border-radius:0 0 28px 28px}
main:has(+ .ftr) + .ftr{margin-top:-28px}
.ftr{position:relative;z-index:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(660px,100svh,1000px);color:var(--champagne);background:var(--night)}   /* z-index 0: its shade and words stay under the page's rounded edge */
.ftr-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(74,53,41,.22) 0%,rgba(74,53,41,.08) 22%,rgba(66,46,36,.6) 46%,rgba(62,44,34,.8) 70%,rgba(58,40,31,.92) 100%);pointer-events:none}
.ftr-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(34px,4vw,52px);padding-block:clamp(120px,14vw,200px) calc(26px + env(safe-area-inset-bottom,0px));text-shadow:0 1px 16px rgba(30,20,14,.35)}
.ftr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ftr-top .lk{height:clamp(52px,6vw,92px);color:var(--champagne)}
.ftr-top em{font-size:clamp(22px,2.2vw,32px);max-width:20ch;text-align:right;color:var(--champagne)}
.ftr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:36px 24px;font-size:15px;line-height:1.75}
.ftr-cols div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ftr-cols .lbl{color:rgba(251,238,216,.78);margin-bottom:8px}
.ftr-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr-legal{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font:500 11px/1.6 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(251,238,216,.78)}
.ftr-legal nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.ftr-legal a{padding:6px 0}
.ftr-legal a:hover{color:#fff}

@media (max-width:1000px){
  .flow-side{width:min(420px,40vw)}
}
@media (max-width:760px){
  .hero-cap{gap:22px;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
  .hero-h{font-size:clamp(30px,8.4vw,40px)}
  .hero-ring{width:76px;height:76px;bottom:calc(22px + env(safe-area-inset-bottom,0px))}   /* beside the button, under the title */
  .hdr-in{padding-top:10px}
  .brand{min-height:50px;padding:0 18px 0 15px;min-width:0}
  .brand .lk{width:174px;max-width:100%;height:auto}   /* 30 px high, and it gives way before the buttons do */
  .menu-btn{padding:0 12px!important}
  .menu-btn .roll{display:none}   /* the button keeps its two lines; the word goes, to make room for the logo */
  .hide-s{display:none!important}
  .hdr-r .pill{min-height:46px;padding:0 18px}
  .flow-h{top:calc(env(safe-area-inset-top,0px) + 80px);font-size:clamp(30px,8.6vw,40px)}
  .flow-side{left:var(--pad-l);right:var(--pad-r);width:auto;top:calc(env(safe-area-inset-top,0px) + 80px + 2 * clamp(30px,8.6vw,40px) + 18px);gap:16px}
  .flow-side p{font-size:15.5px}
  .flow-side .pill{min-height:46px}
  .flow-side .pill .dot{width:34px;height:34px}
  .flow-words span{font-size:clamp(26px,7.2vw,40px)}
  .brief-sec{grid-template-columns:1fr}
  .bs-media .reveal{aspect-ratio:4/3}
  .vwords{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strips{flex-direction:column;height:660px}
  .vlabel{writing-mode:horizontal-tb;transform:none;bottom:auto;top:50%;translate:0 -50%}
  .strip-t{left:20px;right:20px;bottom:20px;width:auto}
  .strip-t h3{font-size:32px}
  .strip-t p{font-size:16px}
  .grid{grid-template-columns:1fr}
  .brief{grid-template-columns:1fr}
  .pill.send{justify-self:start}
  .ftr-top em{text-align:left}
  .ftr-shade{background:linear-gradient(180deg,rgba(62,44,34,.5) 0%,rgba(62,44,34,.72) 40%,rgba(58,40,31,.9) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-h .ln>span,.hero-go{animation:none}
  .loader{display:none}
  .menu{animation:none}
  .roll>span{transition:none}
}

/* ---------- the site around the pages ---------- */
[hidden]:not([hidden=until-found i]){display:none!important}
html{scroll-padding-top:96px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--cream);font:600 12px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:12px}
.devbar{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:55;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;font:600 10px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);pointer-events:none}
.devbar i{width:7px;height:7px;border-radius:50%;background:var(--wine)}

/* page openings: a label, a big title with the serif turn, an intro, and a picture that opens as it scrolls in */
.ph{padding-top:calc(env(safe-area-inset-top,0px) + clamp(120px,14vw,190px));padding-bottom:clamp(40px,5vw,70px)}
.ph-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px clamp(28px,5vw,80px);align-items:end}
.ph-title{margin:16px 0 0;font:500 clamp(58px,11vw,186px)/.86 var(--f-sans);letter-spacing:-.06em}
.ph-title em{letter-spacing:-.03em}
.ph-intro{margin:0;max-width:40ch;font:400 clamp(19px,1.65vw,24px)/1.45 var(--f-sans);color:var(--ink)}
.ph-media{margin-top:clamp(40px,5vw,72px)}
.ph-media .reveal{aspect-ratio:21/9}
/* Contact: the ways to reach us, and the people (Hampus, 2026-10-20) */
.ct-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px clamp(18px,2.4vw,36px);padding-bottom:clamp(20px,3vw,40px)}
.ct-way{display:grid;align-content:start;gap:12px;min-width:0;padding-top:22px;border-top:1px solid rgba(62,44,34,.18)}
.ct-v{font:500 clamp(21px,1.75vw,27px)/1.2 var(--f-sans);letter-spacing:-.02em;color:var(--ink)}
.ct-way p{margin:0;font-size:15px;line-height:1.6;color:var(--brown)}
.ct-person{display:grid;align-content:start;gap:clamp(22px,2.4vw,32px);min-width:0;padding:clamp(22px,2.4vw,34px);border-radius:28px;background:var(--mist)}
.ct-top{display:flex;align-items:center;gap:16px}
.ct-top .av{width:64px;height:64px;font-size:36px}
.ct-top h3{margin:0 0 6px;font:500 clamp(30px,2.6vw,40px)/1 var(--f-sans);letter-spacing:-.04em}
.ct-lines{display:grid;margin:0}
.ct-lines div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:16px;align-items:baseline;padding:13px 0;border-top:1px solid rgba(62,44,34,.14)}
.ct-lines dt{font:600 10.5px/1.7 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.ct-lines dd{margin:0;min-width:0;font-size:15.5px;line-height:1.45}
:is(.ct-way,.ct-lines) a{text-decoration:underline;text-decoration-color:rgba(62,44,34,.28);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .25s}
:is(.ct-way,.ct-lines) a:hover{text-decoration-color:currentColor}
@media (max-width:760px){.ct-ways{grid-template-columns:1fr}.ct-lines div{grid-template-columns:1fr;gap:2px}}
.sec{padding-block:clamp(80px,9vw,140px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,60px)}
.sec-head h2{margin:12px 0 0;font:500 clamp(40px,5.6vw,92px)/.94 var(--f-sans);letter-spacing:-.05em}
.sec-head p{margin:0;max-width:38ch;font-size:17px;line-height:1.6;color:var(--brown)}

/* a statement that inks in as it scrolls up the screen */
.statement{margin:0;font:500 clamp(34px,4.8vw,80px)/1.05 var(--f-sans);letter-spacing:-.045em;max-width:17em}
.statement span{display:block}
.ink{--k:1;color:color-mix(in srgb,var(--ink) calc(var(--k) * 100%),#CFC8BE)}
.statement-note{margin:clamp(24px,3vw,40px) 0 0;max-width:46ch;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--brown)}

/* habits, people and partners */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.habit{display:grid;gap:14px;align-content:start;padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--mist)}
.habit .num{font:400 clamp(44px,4.4vw,70px)/1 var(--f-serif);font-style:italic;color:var(--wine)}
.habit h3{margin:0;font:500 clamp(26px,2.4vw,36px)/1.05 var(--f-sans);letter-spacing:-.03em}
.habit p{margin:0;color:var(--brown);font-size:17px;line-height:1.55}
.founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,72px);align-items:center}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:24px;background:var(--mist);display:grid;place-items:center;overflow:hidden}
.portrait svg{width:34%;height:auto;color:rgba(62,44,34,.12)}
.portrait span{position:absolute;left:0;right:0;bottom:22px;text-align:center}
.founder h3{margin:0;font:500 clamp(36px,4vw,64px)/1 var(--f-sans);letter-spacing:-.045em}
.founder .role{margin:12px 0 0}
.founder p{margin:22px 0 0;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--brown)}
.founder blockquote{margin:28px 0 0;font:400 clamp(26px,2.6vw,40px)/1.2 var(--f-serif);font-style:italic;color:var(--wine)}
.person{display:grid;gap:14px}
.person .portrait{aspect-ratio:3/4}
.person b{font:500 22px/1.2 var(--f-sans);letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,44px)}
.chip{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(62,44,34,.18);font-size:15px}

/* what you get, fees and questions */
.gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.get{display:grid;gap:10px;padding:22px 24px;border-radius:20px;background:var(--mist)}
.get b{font:500 21px/1.25 var(--f-sans);letter-spacing:-.015em}
.fee{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;margin-top:12px;padding:26px 28px;border-radius:20px;border:1px solid rgba(62,44,34,.18)}
.fee b{font:500 clamp(22px,2vw,30px)/1.1 var(--f-sans);letter-spacing:-.02em}
.faq{display:grid;gap:10px}
.faq details{border-radius:20px;background:var(--mist);transition:background .3s}
.faq details[open]{background:#fff}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 26px;cursor:pointer;list-style:none;font:500 clamp(19px,1.6vw,24px)/1.25 var(--f-sans);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary small{font:600 11px/1 var(--f-sans);letter-spacing:.18em;color:var(--brown);margin-right:14px;font-variant-numeric:tabular-nums}
.faq summary i{position:relative;width:16px;height:16px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{margin:0;padding:0 26px 24px;max-width:62ch;font-size:17px;line-height:1.6;color:var(--brown)}

/* values: six words that ink in one by one */
.values{display:grid}
.val{display:grid;grid-template-columns:5.5em minmax(0,1fr) minmax(0,1fr);gap:12px clamp(20px,3vw,48px);align-items:baseline;padding-block:clamp(26px,3vw,44px)}
.val .lbl{color:var(--brown)}
.val h3{margin:0;font:500 clamp(50px,7.4vw,124px)/.9 var(--f-sans);letter-spacing:-.055em}
.val:nth-child(even) h3{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.val p{margin:0;max-width:34ch;font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--brown)}
.closing{padding-block:clamp(90px,10vw,150px);text-align:center}
.closing p{margin:0 auto;max-width:18em;font:500 clamp(34px,4.6vw,76px)/1.05 var(--f-sans);letter-spacing:-.045em}

/* the next page, as one big link */
.next{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 30px;padding-block:clamp(60px,7vw,110px)}
/* an inner page ends as one passage: its closing line, then "Let's talk" and the brief, then the next page under a hairline
   (Hampus, 2026-10-20: "the text that comes there doesn't flow naturally") */
.closing:has(+ .talk){padding-bottom:0}
.closing + .talk{padding-top:clamp(48px,6vw,90px)}
.talk:has(+ .next){padding-bottom:clamp(56px,6vw,96px)}
.talk + .next{background:linear-gradient(rgba(62,44,34,.16),rgba(62,44,34,.16)) var(--pad-l) 0/calc(100% - var(--pad-l) - var(--pad-r)) 1px no-repeat}
.next .lbl{line-height:1.8}
.next-big{font:500 clamp(48px,8vw,128px)/1 var(--f-sans);letter-spacing:-.055em}

/* the listing feed */
.feed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(28px,3vw,44px)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(62,44,34,.16);background:rgba(255,255,255,.4)}
.seg button{min-height:44px;padding:0 18px;border-radius:999px;font:600 11px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;transition:background .25s,color .25s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.feed-bar .inp{min-height:50px;width:auto;font-size:15px}
.feed-bar select.inp{padding-right:44px}
.feed-bar .q{flex:1 1 220px;min-width:0}
.feed-bar label{display:contents}
.feed-note{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:10px 16px;border-radius:16px;background:var(--mist);font-size:14px;color:var(--brown)}
.feed-note i{width:7px;height:7px;border-radius:50%;background:var(--wine);flex:none}
.feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,60px) clamp(14px,1.6vw,24px)}
.feed-grid .card-name{font-size:clamp(26px,2.4vw,38px)}
.feed-foot{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:clamp(44px,5vw,70px)}
.feed-count{font-variant-numeric:tabular-nums}
.feed-empty{padding:60px 0;text-align:center;color:var(--brown);font-size:18px}
.notlisted{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-top:clamp(70px,8vw,120px);padding:clamp(30px,4vw,56px);border-radius:28px;background:var(--mist)}
.notlisted h2{margin:12px 0 0;font:500 clamp(34px,4vw,62px)/1 var(--f-sans);letter-spacing:-.045em}
.notlisted h2 em{color:var(--wine)}

/* one property */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.crumbs a:hover{color:var(--wine)}
.pd-loc{margin:0;color:var(--brown);font-size:16px}
.pd-price{font:500 clamp(28px,2.6vw,40px)/1 var(--f-sans);letter-spacing:-.03em}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fact{display:grid;gap:8px;padding:20px 22px;border-radius:18px;background:var(--mist)}
.fact b{font:500 24px/1.1 var(--f-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.view p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--brown)}
.marks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.marks li{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:14px;min-height:64px;padding:12px 18px;border-radius:18px;background:var(--mist);font-size:16px}
.marks li b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cream);font:500 22px/1 var(--f-sans);color:var(--wine)}
.feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--brown)}
.noimg svg{width:30%;height:30%;opacity:.2}
.pd-desc{max-width:72ch}
.pd-desc p{margin:0 0 1em;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:var(--brown)}
.fgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 24px;margin-top:clamp(36px,4vw,56px)}
.fgroup>.lbl{display:block;margin-bottom:12px}
.fgroup .feats,.fgroups>.feats{margin-top:0}
.fgroups>.feats{grid-column:1/-1}
.fgroup .chip{min-height:38px;padding:0 15px;font-size:14px}
.pd-desc.folded{max-height:17em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.pd-more{margin-top:14px}
.view-cta{display:flex;align-items:center}
.fact b small{font-size:.6em;color:var(--brown);letter-spacing:0}
.feed-grid[aria-busy=true]{opacity:.55;transition:opacity .2s}
.drive{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

@media (max-width:1000px){
  .feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html{scroll-padding-top:76px}
  .ph-row,.founder,.view,.notlisted{grid-template-columns:1fr}
  .ph-media .reveal{aspect-ratio:4/3}
  .trio,.gets,.drive{grid-template-columns:1fr}
  .val{grid-template-columns:1fr;gap:8px}
  .feed-grid{grid-template-columns:1fr}
  .feed-bar .inp{flex:1 1 140px}
  .seg{width:100%;justify-content:space-between}
  .seg button{flex:1;padding:0 8px}
  .devbar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ink{--k:1!important}
}

/* the public legal pages (layout "plain") */
.legal{max-width:780px;padding-block:calc(env(safe-area-inset-top,0px) + clamp(120px,13vw,170px)) clamp(60px,8vw,110px)}
.legal h1{margin:14px 0 12px;font:500 clamp(44px,6vw,84px)/.95 var(--f-sans);letter-spacing:-.05em}
.legal .updated{margin:0 0 clamp(30px,4vw,48px);font-size:15px;color:var(--brown)}
.legal .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink)}
.legal h2{margin:clamp(40px,5vw,58px) 0 14px;font:500 clamp(24px,2.2vw,32px)/1.15 var(--f-sans);letter-spacing:-.03em}
.legal h3{margin:26px 0 8px;font:600 12px/1.4 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.legal p,.legal li{font-size:17px;line-height:1.7;color:var(--espresso)}
.legal ul{margin:10px 0;padding-left:1.15em}
.legal li{margin:4px 0}
.legal a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.legal address{font-style:normal;font-size:17px;line-height:1.8;color:var(--ink)}
.legal .tbl{overflow-x:auto;margin:14px 0 6px}
.legal table{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px;line-height:1.55}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid rgba(62,44,34,.14)}
.legal th{font:600 11px/1.4 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.legal td code{font:500 14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.plain-ftr{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;padding-block:24px 44px;font:500 11px/1.6 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.plain-ftr nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.plain-ftr a:hover,.plain-ftr a[aria-current=page]{color:var(--wine)}

/* a review card: its headline, the buyer's words, and a small face beside the name (the reviews section uses the five
   areas' frame further down: .areas.rv) */
.v3-card{margin:0;padding:clamp(24px,2.6vw,38px);border-radius:26px;background:var(--mist)}
.v3-pull{display:block;font:500 clamp(28px,2.9vw,46px)/1.02 var(--f-sans);letter-spacing:-.04em}
.v3-pull em{letter-spacing:-.02em}
.v3-card blockquote{margin:16px 0 0;font:400 clamp(16px,1.25vw,19px)/1.55 var(--f-sans);color:var(--brown)}
.v3-card .lbl{display:block;margin-top:18px}

/* the trust band: Sam's three figures, on the cream ground like the rest (Hampus, 2026-10-19: no dark panels) */
.proof{padding-block:clamp(80px,9vw,140px)}
.proof-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.proof-head .lbl{grid-column:1/-1}
.proof-head h2{margin:0;font:500 clamp(44px,6.4vw,104px)/.92 var(--f-sans);letter-spacing:-.055em}
.proof-head p{margin:0;max-width:40ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--brown)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(200px,19vw,270px);padding:clamp(22px,2.2vw,32px);border-radius:24px;background:var(--mist)}
.stat-n{font:500 clamp(54px,6vw,96px)/.9 var(--f-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat>span:last-child{font-size:15px;line-height:1.5;color:var(--brown);max-width:24ch}
@media (max-width:760px){
  .proof-head{grid-template-columns:1fr}
  .stats{gap:8px;grid-template-columns:1fr 1fr}
  .stat:first-child{grid-column:1/-1}   /* the money across the top, the other two side by side */
  .stat{min-height:0;gap:16px;padding:18px 14px;border-radius:18px}
  .stat-n{font-size:clamp(34px,10.5vw,46px)}
  .stat>span:last-child{font-size:13px}
}

/* ---------- listings (2026-10-19): the card, the feed's filters and views, the property page, photos full screen,
   the coast map, enquiries, my list, the agent and the brochure ---------- */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
[aria-pressed=true]>.ic,.hdr-list .ic{fill:currentColor}

/* the card: the photo and the body both lead to the home; save, the photo arrows and the agent sit beside them */
.card-pic{position:absolute;inset:0;display:block;touch-action:pan-y}
.card-pic img{-webkit-user-drag:none;user-select:none}
/* the badges on a card's photo are solid, not frosted: a page of cards would otherwise ask the graphics card for dozens
   of blurred copies of what is behind them, and run it short (Hampus, 2026-10-19: parts of the page went blank) */
.card .status{z-index:1;pointer-events:none}
.save{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(240,238,230,.93);color:var(--ink);transition:background .25s,color .25s,transform .35s var(--ease)}
.save:hover{background:#fff;transform:scale(1.06)}
.save[aria-pressed=true]{background:var(--wine);color:#fff}
.pic-nav{position:absolute;top:50%;z-index:2;translate:0 -50%;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(240,238,230,.93);color:var(--ink);opacity:0;transition:opacity .25s,background .25s}
.pic-nav .arw{width:14px;height:auto}
.pic-prev{left:12px}.pic-next{right:12px}
.card:hover .pic-nav,.pic-nav:focus-visible{opacity:1}
.pic-nav:hover{background:#fff}
@media (hover:none){.pic-nav{opacity:.92;width:36px;height:36px}}
.pic-n{position:absolute;right:12px;bottom:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(40,28,20,.5);color:#fff;font:600 10px/1 var(--f-sans);letter-spacing:.14em;font-variant-numeric:tabular-nums;pointer-events:none}
.pic-n:empty{display:none}
.card-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.card:hover .card-name .roll>span{transform:translateY(-50%)}
.av{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--champagne);font:italic 400 17px/1 var(--f-serif)}
.was{margin-left:4px;color:var(--brown);text-decoration-thickness:1px}
.card.sk .card-fig{background:var(--mist)}
.sk-l{height:11px;width:78%;border-radius:6px;background:var(--mist)}
.sk-l.s{height:30px;width:56%}
@media (prefers-reduced-motion:no-preference){.card.sk{animation:skp 1.2s ease-in-out infinite alternate}}
@keyframes skp{to{opacity:.45}}

/* the feed: search and view on one row, the filters below (folded away on a phone) */
.feed-sec{padding-bottom:clamp(80px,9vw,140px)}
.anchor{display:block;position:relative;top:-110px}
.feed-bar{display:block}   /* the old bar was one flex row; it now holds two rows */
.feed-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.feed-bar .qbox{position:relative;display:block;flex:1 1 240px;min-width:0}
.qbox .ic{position:absolute;left:18px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--brown);pointer-events:none}
.feed-bar .qbox .inp{width:100%;padding-left:46px}
.feed-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.togs{display:flex;flex-wrap:wrap;gap:6px}
.tog{min-height:50px;padding:0 18px;border-radius:999px;border:1px solid rgba(62,44,34,.16);background:rgba(255,255,255,.45);font-size:15px;transition:background .25s,color .25s,border-color .25s}
.tog:hover{background:#fff}
.tog[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.views button{display:grid;place-items:center;width:46px;padding:0}
.fbtn{display:none}
.mylist,.fbtn{min-height:50px;padding:0 20px;gap:10px}
.mylist .ic,.fbtn .ic{width:18px;height:18px}
.clear{min-height:50px;padding:0 10px;font:600 11px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--wine);text-decoration:underline;text-underline-offset:4px}
.cur-note,.map-note{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--brown)}
.map-note{margin-top:12px}
.feed-map{height:clamp(380px,50vw,620px);border-radius:clamp(20px,2.4vw,28px)}
.feed-grid.as-list{grid-template-columns:1fr;gap:14px}
.as-list .card{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);column-gap:clamp(18px,2.6vw,40px);padding:12px;border-radius:28px;background:var(--mist)}
.as-list .card-fig{border-radius:18px}
.as-list .card-body{align-self:center;padding-right:12px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pager:empty{display:none}
.pager a,.pager span{display:grid;place-items:center;min-width:48px;height:48px;padding:0 14px;border-radius:999px;font-size:15px;font-variant-numeric:tabular-nums}
.pager a{border:1px solid rgba(62,44,34,.16);transition:background .25s,color .25s}
.pager a:hover{background:#fff}
.pager a[aria-current=page]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pager .arw{width:14px;height:auto}
.notlisted-go{display:flex;flex-wrap:wrap;gap:10px}
.notlisted-go .pill.line{gap:10px}
.notlisted-go .ic{width:18px;height:18px}

/* one property: the head and its actions, the bento, the facts beside a sticky price card */
.pd-top{padding-top:calc(env(safe-area-inset-top,0px) + clamp(110px,12vw,160px))}
.pd-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px 40px;margin-bottom:clamp(22px,2.6vw,34px)}
.pd-title h1{margin:10px 0 8px;font:500 clamp(42px,5.6vw,92px)/.92 var(--f-sans);letter-spacing:-.055em}
.pd-acts{display:flex;flex-wrap:wrap;gap:8px}
.pd-acts .pill{min-height:46px;padding:0 18px;gap:10px}
.pd-acts .ic{width:18px;height:18px}
.pd-save{display:contents}
.save-pill .sv-on,.save-pill[aria-pressed=true] .sv-off{display:none}
.save-pill[aria-pressed=true] .sv-on{display:inline}
.save-pill[aria-pressed=true]{background:var(--wine);border-color:var(--wine);color:#fff}
.bento-wrap{position:relative}
.bento{display:grid;gap:8px;height:clamp(380px,44vw,640px);grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;border-radius:clamp(20px,2.4vw,28px);overflow:hidden}
.bento .tile{position:relative;overflow:hidden;min-height:0;background:var(--greige);cursor:zoom-in}
.bento .tile img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.bento .tile:hover img{scale:1.045}
.bento .tile:first-child{grid-row:1/3}
.bento.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.bento.n2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.bento.n2 .tile:first-child{grid-row:auto}
.bento.n3{grid-template-columns:2fr 1fr}
.bento.n4 .tile:nth-child(4){grid-column:2/4}
.bento-all{position:absolute;right:16px;bottom:16px;min-height:46px;padding:0 18px;gap:10px;color:var(--ink)}
.bento-all .ic{width:18px;height:18px}
.pd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4vw,72px);align-items:start;padding-top:clamp(28px,3.4vw,48px)}
.pd-main{min-width:0}
.pd-main .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.pd-pay{margin-top:24px}
.pd-pay>.lbl{display:block;margin-bottom:10px}
.pd-sec{padding-top:clamp(56px,6vw,90px)}
.pd-sec>h2{margin:10px 0 clamp(20px,2.4vw,30px);font:500 clamp(34px,3.8vw,58px)/.96 var(--f-sans);letter-spacing:-.045em}
.pd-view{margin:0;max-width:62ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--brown)}
.pd-side{position:sticky;top:96px}
.pd-card{display:grid;gap:14px;padding:clamp(22px,2.2vw,30px);border-radius:26px;background:var(--mist)}
.pd-card .pd-price{font:500 clamp(32px,2.8vw,44px)/1 var(--f-sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pd-card .pd-price .was{display:block;margin:8px 0 0;font-size:.42em;letter-spacing:0}
.pd-cur .inp{min-height:42px;width:auto;padding:0 40px 0 16px;font-size:14px;background-position:calc(100% - 22px) 52%,calc(100% - 17px) 52%}
.pd-card .cur-note{margin:0;font-size:13px}
.agent{display:flex;align-items:center;gap:12px}
.agent .av{width:46px;height:46px;font-size:26px}
.agent b{display:block;font-weight:600;font-size:16px}
.agent div>span{font-size:14px;color:var(--brown)}
.agent.big .av{width:64px;height:64px;font-size:36px}
.agent-line{margin:0;font-size:15px;line-height:1.55;color:var(--brown)}
.pd-card .pill.send{justify-content:space-between}
.pd-card .feed-note{margin:0;font-size:13px}
.pd-map{height:clamp(300px,34vw,440px);border-radius:24px}
.docs{display:flex;flex-wrap:wrap;gap:10px}
.docs .pill{min-height:46px;padding:0 18px;gap:10px;font:500 15px/1 var(--f-sans);letter-spacing:0;text-transform:none}
.docs .ic{width:18px;height:18px}
#pd[data-state=loading] :is(.pd-body,#enquire,#pdSimilarSec,.pd-acts){visibility:hidden}
#pd:is([data-state=paused],[data-state=missing]) :is(.bento-wrap,.pd-body,#pdSimilarSec,.pd-acts){display:none}
#pd[data-state=missing] #enquire{display:none}

/* photos full screen */
html.dlg{overflow:hidden}
dialog.viewer,dialog.sheet{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0}
dialog.viewer{background:var(--night);color:var(--champagne);overflow:hidden}
dialog.viewer::backdrop,dialog.sheet::backdrop{background:rgba(40,28,20,.6)}
dialog[open].viewer,dialog[open].sheet{animation:dlg-in .45s var(--ease)}
@keyframes dlg-in{from{opacity:0}to{opacity:1}}
.v-top{position:absolute;inset:0 0 auto;z-index:2;display:flex;justify-content:space-between;align-items:center;height:calc(env(safe-area-inset-top,0px) + 68px);padding:env(safe-area-inset-top,0px) var(--pad-r) 0 var(--pad-l)}
.v-n{color:rgba(251,238,216,.8)}
.v-close{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--champagne);transition:background .25s}
.v-close:hover{background:rgba(255,255,255,.2)}
.v-fig{position:absolute;inset:calc(env(safe-area-inset-top,0px) + 68px) 0 calc(env(safe-area-inset-bottom,0px) + 24px);margin:0;display:grid;place-items:center;touch-action:pan-y pinch-zoom}
.v-fig img{max-width:calc(100% - 2 * var(--gut) - 120px);max-height:100%;object-fit:contain;border-radius:10px;user-select:none;-webkit-user-drag:none}
.v-nav{position:absolute;top:50%;z-index:2;translate:0 -50%;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--champagne);transition:background .25s}
.v-nav:hover{background:rgba(255,255,255,.22)}
.v-nav .arw{width:16px;height:auto}
.v-prev{left:var(--pad-l)}.v-next{right:var(--pad-r)}
dialog.sheet{background:var(--cream);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.s-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 12px) var(--pad-r) 12px var(--pad-l);background:rgba(240,238,230,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.s-top b{display:block;font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em}
.s-top .v-close{background:var(--mist);color:var(--ink)}
.s-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:1180px;margin:0 auto;padding:8px var(--pad-r) 80px var(--pad-l)}
.s-pic{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--greige);cursor:zoom-in}
.s-pic.wide{grid-column:1/-1;aspect-ratio:16/9}
.s-pic img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
.s-pic:hover img{scale:1.03}

/* the coast map */
.cmap{position:relative;overflow:hidden;isolation:isolate;background:#26354B;user-select:none}
.cmap-img{position:absolute;left:0;top:0;width:2048px;height:1708px;max-width:none;transform-origin:0 0}
.cmap-layer{position:absolute;inset:0;pointer-events:none}
.cmap-town{position:absolute;translate:-50% -50%;padding:4px 7px 4px 8px;border-radius:6px;background:rgba(240,238,230,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font:600 9.5px/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:rgba(62,44,34,.78)}
.cmap-area{position:absolute;translate:-50% -50%;border-radius:50%;border:2px solid var(--wine);background:rgba(115,20,18,.16);box-shadow:0 0 0 6px rgba(115,20,18,.08)}
.cmap-tag{position:absolute;translate:-50% calc(-100% - 10px);padding:8px 12px;border-radius:999px;background:var(--ink);color:var(--cream);font:600 10px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(40,28,20,.5)}
.cmap-pin{position:absolute;translate:-50% -50%;pointer-events:auto;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--wine);color:#fff;font:700 13px/1 var(--f-sans);font-variant-numeric:tabular-nums;border:2px solid var(--cream);box-shadow:0 8px 20px -8px rgba(40,28,20,.6);transition:transform .25s var(--ease),background .25s}
.cmap-pin:hover{transform:scale(1.12)}
.cmap-pin[aria-pressed=true]{background:var(--ink)}
.cmap-credit{position:absolute;right:10px;bottom:8px;z-index:1;padding:3px 8px;border-radius:6px;background:rgba(240,238,230,.82);font-size:10px;color:var(--brown)}

/* a note at the foot of the screen */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:10px 10px 10px 20px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:14px;line-height:1.35;box-shadow:0 20px 40px -20px rgba(40,28,20,.6);opacity:0;translate:-50% 16px;pointer-events:none;visibility:hidden;transition:opacity .3s,translate .45s var(--ease),visibility 0s .45s}
.toast.on{opacity:1;translate:-50% 0;pointer-events:auto;visibility:visible;transition:opacity .3s,translate .45s var(--ease)}   /* hidden, not only clear, so Safari doesn't tint its bottom bar from it */
.toast:empty{display:none}
.toast span:only-child{padding-right:10px}
.toast a{flex:none;padding:10px 14px;border-radius:999px;background:var(--cream);color:var(--ink);font:600 10.5px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}

/* the header's list pill and the menu's two extra links */
.hdr-list{min-height:52px;padding:0 18px;gap:8px;font-weight:600;font-variant-numeric:tabular-nums}
.hdr-list .ic{width:18px;height:18px}
.menu-more{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.menu-more .pill{flex:1 1 auto;min-height:46px;padding:0 18px;gap:10px}
.menu-more .ic{width:18px;height:18px}

/* enquiries */
.enq-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);padding:clamp(26px,3.6vw,56px);border-radius:clamp(24px,2.6vw,34px);background:var(--mist)}
.enq-side h2{margin:12px 0 14px;font:500 clamp(40px,4.6vw,72px)/.94 var(--f-sans);letter-spacing:-.05em}
.enq-side p{margin:0 0 26px;max-width:40ch;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--brown)}
.enq{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;align-content:start}
.enq .full{grid-column:1/-1}
.enq .inp{background-color:rgba(255,255,255,.62)}
textarea.inp{min-height:132px;padding:16px 22px;border-radius:24px;resize:vertical;line-height:1.5}
.opt{text-transform:none;letter-spacing:0;font-weight:400}
.tick{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.5;color:var(--brown);cursor:pointer}
.tick input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--wine);cursor:pointer}
.tick a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.enq-status{margin:0;font:italic 400 18px/1.35 var(--f-serif);color:var(--wine)}
.enq-status:empty{display:none}

/* my list */
.ml{padding-bottom:clamp(60px,7vw,110px)}
.ml-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-bottom:clamp(24px,3vw,40px)}
.ml-acts{display:flex;flex-wrap:wrap;gap:8px}
.ml-acts .pill{min-height:46px;padding:0 18px;gap:10px}
.ml-acts .ic{width:18px;height:18px}
.ml-acts .inp{min-height:46px;width:auto;font-size:14px}
.ml-empty{display:grid;justify-items:start;gap:14px;padding:clamp(30px,4vw,56px);border-radius:28px;background:var(--mist)}
.ml-empty h2{margin:0;font:500 clamp(36px,4.4vw,64px)/.95 var(--f-sans);letter-spacing:-.045em}
.ml-empty p{margin:0;font-size:17px;color:var(--brown)}
.ml-empty p .ic{width:18px;height:18px;vertical-align:-3px}
.ml-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ml-go .pill.line{gap:10px}
.ml-go .ic{width:18px;height:18px}

/* the agent */
.ag{padding-bottom:clamp(70px,8vw,120px)}
.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-width:900px;height:min(78svh,820px);margin:0 auto;border-radius:clamp(24px,2.6vw,34px);background:var(--mist);overflow:hidden;box-shadow:0 40px 80px -50px rgba(40,28,20,.45)}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 18px;border-bottom:1px solid var(--greige)}
.chat-head b{display:block;font-weight:600}
.chat-head .lbl{line-height:1.2}
.chat-head .pill{margin-left:auto;min-height:42px;padding:0 16px;gap:8px;font-size:11px}
.chat-head .ic{width:16px;height:16px}
.av.mark{width:42px;height:42px}
.av.mark svg{width:24px;height:auto;fill:#E6E8EA}
.chat-log{display:flex;flex-direction:column;gap:12px;padding:clamp(16px,2.6vw,28px);overflow-y:auto;overscroll-behavior:contain}
.msg{max-width:min(90%,640px);padding:14px 18px;border-radius:22px;font-size:16px;line-height:1.55}
.msg.bot{align-self:flex-start;background:var(--cream);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--cream);border-bottom-right-radius:6px}
.msg b{font-weight:600}
.msg .aside{display:block;margin-top:6px;font-size:13.5px;color:var(--brown)}
.qr{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qr .chip{min-height:40px;padding:0 14px;font-size:14px;background:rgba(255,255,255,.6);transition:background .2s,border-color .2s}
.qr .chip:hover{background:#fff;border-color:var(--ink)}
.minis{display:grid;gap:8px;margin:12px 0 4px}
.mini{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 8px 6px 6px;border-radius:16px;background:var(--mist)}
.mini-pic{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--greige)}
.mini-pic img{width:100%;height:100%;object-fit:cover}
.mini-txt{display:grid;gap:2px;min-width:0;font-size:14px}
.mini-txt b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-txt span{color:var(--brown);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-txt .mini-price{color:var(--ink)}
.mini .save{position:static;width:40px;height:40px;background:var(--cream)}
.mini .save[aria-pressed=true]{background:var(--wine)}
.dots{display:inline-flex;gap:5px;padding:4px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--brown);opacity:.4}
@media (prefers-reduced-motion:no-preference){.dots i{animation:dot 1s ease-in-out infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}}
@keyframes dot{50%{opacity:1;transform:translateY(-3px)}}
.chat-in{display:flex;gap:10px;padding:12px;border-top:1px solid var(--greige);background:rgba(255,255,255,.35)}
.chat-in .inp{flex:1;min-height:52px}
.chat-in .go{width:52px;height:52px}
.chat-in .inp:disabled{opacity:.6}
.mini-enq{margin-top:12px}

/* the brochure: two A4 pages; on screen they shrink to fit (brochure.js), printed they are their real size */
@page{size:A4;margin:0}
.bro-body{background:var(--mist)}
.bro-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:12px 16px;background:rgba(228,225,219,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bro-bar .pill{min-height:46px;gap:10px}
.bro-bar svg{width:15px;height:auto}
.bro-bar .ic{width:18px;height:18px}
.bro-bar .pill[disabled]{opacity:.45;cursor:default}
.bro{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 12px 60px}
.bro-wait{padding:60px 16px;font-size:18px;color:var(--brown);text-align:center}
.bro-wait a{color:var(--wine);text-decoration:underline}
.sheet{position:relative;display:flex;flex-direction:column;gap:7mm;width:210mm;height:297mm;padding:13mm 14mm 11mm;overflow:hidden;background:var(--cream);color:var(--ink);box-shadow:0 24px 60px -24px rgba(40,28,20,.35)}
.sheet .lbl{font-size:2.6mm}
.b-head{display:flex;justify-content:space-between;align-items:center;gap:10mm}
.b-head .lk{width:52mm;height:auto;color:var(--ink)}
.b-hero{flex:1 1 auto;min-height:0;border-radius:5mm;overflow:hidden;background:var(--greige)}
.b-hero img{width:100%;height:100%;object-fit:cover}
.b-title h1{margin:2.5mm 0 3mm;font:500 15mm/.95 var(--f-sans);letter-spacing:-.05em}
.b-price{font:500 8mm/1 var(--f-sans);letter-spacing:-.03em}
.b-price s{margin-left:3mm;font-size:.55em;color:var(--brown)}
.b-facts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2.5mm}
.b-facts div{display:grid;gap:1.5mm;padding:4mm;border-radius:3.5mm;background:var(--mist)}
.b-facts b{font:500 5.6mm/1.1 var(--f-sans);letter-spacing:-.02em}
.b-foot{display:flex;justify-content:space-between;align-items:center;gap:6mm;margin-top:auto;padding-top:4mm;border-top:.3mm solid rgba(62,44,34,.16);font-size:3.2mm}
.b-foot .agent .av{width:9mm;height:9mm;font-size:5mm}
.b-foot .agent b{font-size:3.6mm}
.b-foot .agent div>span{font-size:3mm}
.b-url{color:var(--brown)}
.b-pics{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5mm;height:62mm;flex:none}
.b-pics img{width:100%;height:100%;object-fit:cover;border-radius:3.5mm}
.b-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:8mm;flex:1 1 auto;min-height:0;overflow:hidden}
.b-text p{margin:2mm 0 0;font-size:3.4mm;line-height:1.55;color:var(--espresso)}
.b-fl{margin:2.5mm 0 0}
.b-fl div{display:grid;grid-template-columns:24mm 1fr;gap:3mm}
.b-fl dd{font-weight:400;line-height:1.4}
.b-side>.b-more:not(.b-fl){margin-top:5mm}
.b-more{display:grid;gap:1.6mm;margin:0}
.b-more div{display:flex;justify-content:space-between;gap:4mm;padding-bottom:1.6mm;border-bottom:.25mm solid rgba(62,44,34,.12);font-size:3.1mm}
.b-more dt{color:var(--brown)}
.b-more dd{margin:0;font-weight:500}
.b-loc{display:grid;grid-template-columns:90mm 1fr;gap:6mm;align-items:center;flex:none}
.b-map{width:90mm;height:53mm;border-radius:3.5mm}
.b-loc p{margin:0;font-size:3.2mm;line-height:1.5;color:var(--brown)}
.b-loc b{display:block;margin-bottom:1mm;font-size:4.2mm;color:var(--ink)}
.b-legal{margin:0;font-size:2.7mm;line-height:1.5;color:var(--brown);flex:none}
@media print{
  html,body,.bro-body{background:#fff!important}
  .bro-bar,.toast,.skip{display:none!important}
  .bro{display:block;padding:0;zoom:1!important}
  .sheet{box-shadow:none;break-after:page}
  .sheet:last-child{break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (max-width:1000px){
  .pd-body{grid-template-columns:1fr}
  .pd-side{position:static;order:-1}
}
@media (max-width:760px){
  .fbtn{display:inline-flex}
  .feed-row .seg:not(.views){width:100%}
  .feed-row .views{width:auto}
  .feed-row .views button{flex:none}
  .feed-bar .qbox{flex:1 1 100%}
  .feed-row .mylist{display:none}   /* the header's list pill does this on a phone */
  .feed-row .fbtn{flex:1;justify-content:center}
  .pd-acts{width:100%}
  .pd-acts .pill{flex:1;justify-content:center;padding:0 10px;gap:8px;font-size:11px}
  .feed-more{display:none}
  .feed-bar.open .feed-more{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .feed-bar.open .feed-more :is(.togs,#feedWhere){grid-column:1/-1}
  .feed-bar.open .feed-more .inp{width:100%}
  .as-list .card{grid-template-columns:118px minmax(0,1fr);padding:8px;border-radius:20px}
  .as-list .card-fig{aspect-ratio:1;border-radius:14px}
  .as-list .card-name{font-size:21px}
  .as-list .card-meta{font-size:10px;letter-spacing:.14em}
  .as-list :is(.pic-nav,.status,.pic-n){display:none}
  .as-list .save{top:6px;right:6px;width:34px;height:34px}
  .pd-main .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento,.bento.n1,.bento.n2,.bento.n3,.bento.n4{display:flex;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:0;margin-inline:calc(-1 * var(--pad-l)) calc(-1 * var(--pad-r));padding-inline:var(--pad-l) var(--pad-r);scroll-padding-inline:var(--pad-l);scrollbar-width:none}
  .bento::-webkit-scrollbar{display:none}
  .bento .tile{flex:0 0 86%;aspect-ratio:4/3;border-radius:18px;scroll-snap-align:start}
  .bento.n1 .tile{flex-basis:100%}
  .bento-all{right:calc(var(--pad-r) + 10px);bottom:10px;min-height:40px;padding:0 14px;font-size:11px}
  .v-fig{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
  .v-fig img{max-width:100%;border-radius:0}
  .v-nav{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);translate:none;width:52px;height:52px}
  .v-prev{left:calc(50% - 64px)}.v-next{right:calc(50% - 64px)}
  .s-grid{grid-template-columns:1fr}
  .s-pic.wide{aspect-ratio:4/3}
  .hdr-list{min-height:46px;padding:0 14px}
  .enq-wrap,.enq{grid-template-columns:1fr}
  .chat{height:min(80svh,760px);border-radius:22px}
  .chat-head .ml-t{display:none}
  .chat-head b{font-size:15px}
  .msg{max-width:94%}
  .mini{grid-template-columns:64px minmax(0,1fr) auto}
}

/* the journal: an index of articles, and articles set for reading with their questions and sources */
.journal{padding-bottom:clamp(70px,8vw,120px)}
.jlist{margin:0;padding:0;list-style:none;border-top:1px solid rgba(62,44,34,.14)}
.jl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta go" "title go" "desc go";gap:10px 40px;align-items:center;padding:clamp(26px,3vw,42px) 0;border-bottom:1px solid rgba(62,44,34,.14);transition:padding .6s var(--ease)}
.jl .lbl{grid-area:meta}
.jl b{grid-area:title;font:500 clamp(28px,3.4vw,52px)/1.02 var(--f-sans);letter-spacing:-.04em}
.jl-d{grid-area:desc;max-width:70ch;font-size:16px;line-height:1.55;color:var(--brown)}
.jl-go{grid-area:go;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid currentColor;transition:background .3s,color .3s}
.jl-go svg{width:16px}
.jl:hover{padding-left:14px}
.jl:hover .jl-go{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.article{padding-top:calc(env(safe-area-inset-top,0px) + clamp(120px,13vw,170px));padding-bottom:clamp(60px,7vw,100px)}
.art-head,.art-body,.art-faq,.art-src{max-width:760px;margin-inline:auto}
.art-head h1{margin:18px 0;font:500 clamp(40px,5.4vw,80px)/.98 var(--f-sans);letter-spacing:-.05em}
.art-lead{margin:0 0 26px;font-size:clamp(19px,1.6vw,23px);line-height:1.5}
.art-draft{margin:18px 0 0}
.art-body{margin-top:clamp(36px,4vw,56px);padding-top:clamp(30px,3.4vw,44px);border-top:1px solid rgba(62,44,34,.14)}
.art-body p,.art-body li{font-size:18px;line-height:1.72;color:var(--espresso)}
.art-body p{margin:0 0 1.15em}
.art-body h2{margin:1.9em 0 .55em;font:500 clamp(28px,2.6vw,38px)/1.1 var(--f-sans);letter-spacing:-.035em}
.art-body h3{margin:1.6em 0 .4em;font:600 20px/1.3 var(--f-sans)}
.art-body ul,.art-body ol{margin:0 0 1.2em;padding-left:1.2em}
.art-body li{margin:.3em 0}
.art-body strong{font-weight:600;color:var(--ink)}
.cite{margin-left:1px;font-size:.62em;line-height:0;vertical-align:super}
.cite a{font-weight:600;color:var(--wine)}
.art-body .tbl{overflow-x:auto;margin:1.4em 0 1.8em}
.art-body table{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.art-body th,.art-body td{padding:12px 16px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid rgba(62,44,34,.14)}
.art-body th{font:600 11px/1.4 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.art-faq,.art-src{margin-top:clamp(50px,6vw,80px)}
.art-faq h2,.art-src h2{margin:0 0 18px;font:500 clamp(28px,2.6vw,38px)/1.1 var(--f-sans);letter-spacing:-.035em}
.art-faq details{border-top:1px solid rgba(62,44,34,.14)}
.art-faq details:last-of-type{border-bottom:1px solid rgba(62,44,34,.14)}
.art-faq summary{display:flex;justify-content:space-between;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:500}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"+";font:300 28px/.8 var(--f-sans);color:var(--wine);transition:transform .35s var(--ease)}
.art-faq details[open] summary::after{transform:rotate(45deg)}
.art-faq details p{margin:0 0 22px;font-size:17px;line-height:1.7;color:var(--espresso)}
.art-src ol{margin:0;padding-left:1.4em}
.art-src li{margin:.5em 0;padding:2px 6px;border-radius:6px;font-size:14.5px;line-height:1.55;color:var(--brown)}
.art-src li:target{background:rgba(199,174,142,.28)}
.art-src a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(62,44,34,.3);text-underline-offset:3px}
@media (max-width:760px){
  .jl{grid-template-columns:1fr;grid-template-areas:"meta" "title" "desc"}
  .jl-go{display:none}
  .art-body p,.art-body li{font-size:17px}
}

/* Two sections from the Franclizer study (Hampus, 2026-10-19: "these section designs we also want on the website"),
   set in our own type: Instrument Serif capitals, because the study's Marcellus is close to the old brand's Optima
   (agreement clause 4 keeps the new core pages clear of the old design). */
.fz-disp{margin:0;font:500 1em/.95 var(--f-sans);letter-spacing:-.045em;text-wrap:balance}   /* our type: sentence case, the italic turn (Hampus: no serif capitals, no square boxes) */
.fz-lead{margin:0;max-width:34em;font:400 clamp(17px,1.45vw,21px)/1.5 var(--f-sans);text-wrap:pretty}
/* no square corners (Hampus, 2026-10-20): the dark sections round off where they meet the cream page, 28px like the
   footer, and a picture inside them sits in the usual 24px frame. overflow:clip keeps the pinned sections pinned. */
/* "We work for the buyer, not the seller": warm brown ground, the lines slide apart and together with the scroll */
/* every panel runs the full width of the page with its corners rounded (Hampus, 2026-10-20: "increase all of it so it
   goes full width of the page ... every corner could still be rounded"): the bands, the reviews, the footer, the film card
   at the top (home.js) and the coast's frame */
.fz-firm{position:relative;overflow:clip;border-radius:28px;color:var(--cream);background:radial-gradient(120% 90% at 82% 22%,#9C7A62 0%,#84654F 38%,#634A3A 100%);padding-block:clamp(84px,10vw,150px) clamp(64px,8vw,120px)}
.fz-firm-h{font-size:clamp(40px,5.6vw,92px);text-align:right}
.fz-firm-h .ln{display:block;will-change:transform}
.fz-firm-fig{width:min(56vw,780px);aspect-ratio:16/9;overflow:hidden;border-radius:24px;margin:clamp(40px,5vw,72px) auto 0}
.fz-firm-fig img{width:100%;height:118%;object-fit:cover;filter:sepia(.82) saturate(.7) brightness(.92) contrast(.94);will-change:transform}
.fz-firm-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:40px;margin-top:clamp(40px,5vw,64px)}
.fz-firm-body{display:grid;gap:26px;justify-items:start;flex:1 1 520px;min-width:0}
.fz-triad{display:grid;gap:4px;margin:0;padding:0;list-style:none;text-align:right}
.fz-triad li{font:italic 400 clamp(22px,1.9vw,30px)/1.25 var(--f-serif)}
.fz-triad b{margin-right:12px;font:400 .72em/1 var(--f-serif);font-style:normal;color:#E2CDBE}
/* the call to talk (until 2026-10-21 "We see every home before you do"): the coast towards Gibraltar, the CC turning slowly behind the words with the scroll */
.fz-method{position:relative;overflow:clip;border-radius:28px;min-height:clamp(560px,92vh,900px);display:grid;place-items:center;text-align:center;color:var(--cream);background:#3A2C24}
.fz-method-media{position:absolute;inset:-8% 0}
.fz-method-media img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) saturate(.7) brightness(.42);will-change:transform}
.fz-method::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(58,44,36,.15),rgba(58,44,36,.6));pointer-events:none}
.fz-mark{position:absolute;left:50%;top:50%;z-index:1;width:min(130vh,130vw);height:auto;translate:-50% -50%;color:var(--cream);opacity:.08;pointer-events:none;will-change:transform}
.fz-method-in{position:relative;z-index:2;display:grid;justify-items:center;gap:26px;padding-block:96px}
.fz-method h2{font-size:clamp(40px,5.2vw,80px)}
.fz-method .fz-lead{max-width:28em}
/* the call to talk after the five steps (Sam, 2026-10-21): Let's talk, or the AI agent */
.fz-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fz-acts .pill{gap:10px}
.fz-acts .pill.line:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
@media (max-width:1000px){.fz-firm-fig{width:min(76vw,700px)}}
@media (max-width:760px){
  .fz-firm-h,.fz-triad{text-align:left}
  .fz-firm-fig{width:auto;margin-inline:var(--pad-l) var(--pad-r)}   /* framed inside the page margins, like every picture */
}

/* the homes you have viewed: the button beside My list, the head above them, and a tag on every card you have opened */
.seenbtn{min-height:50px;padding:0 20px;gap:10px}
.seenbtn .ic{width:18px;height:18px}
.seenbtn[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.seenbtn[aria-pressed=true]>.ic{fill:none}   /* the pressed-button fill is for the save mark, not this clock */
.seen-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 24px;margin:0 0 clamp(22px,2.6vw,34px)}
.seen-head h2{margin:0;font:500 clamp(30px,3.2vw,48px)/1 var(--f-sans);letter-spacing:-.04em}
.seen-head p{grid-column:1;margin:0;font-size:15px;line-height:1.5;color:var(--brown)}
.seen-head .clear{grid-column:2;grid-row:1/3;align-self:end}
.feed-grid .seen-day{grid-column:1/-1;margin:clamp(8px,1.2vw,16px) 0 0;padding-top:14px;border-top:1px solid rgba(62,44,34,.16)}
.feed-grid .seen-day:first-child{margin-top:0}
.feed-grid .seen-day{margin-bottom:calc(14px - clamp(40px,4vw,60px))}   /* the day sits on its homes, not a row gap away */
.feed-grid.as-list .seen-day{margin-bottom:0}
.seen-tag{position:absolute;left:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(240,238,230,.93);font:700 9.5px/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);pointer-events:none}
.seen-tag .ic{width:13px;height:13px}
@media (max-width:760px){
  .feed-row .seenbtn{padding:0 14px}   /* it shares the row with the filters and the views */
  .feed-row .fbtn{padding:0 16px}
  .feed-row .views button{width:40px}
  .feed-row .seenbtn .sn-t{display:none}
  .as-list .seen-tag{display:none}
}

/* My list: Saved and Viewed, one tap apart */
.ml-tabs{margin:0 0 clamp(18px,2.2vw,28px)}
.ml-tabs button{display:inline-flex;align-items:center;gap:9px;padding:0 22px}
.ml-tabs .ic{width:16px;height:16px}
.ml-tabs [aria-pressed=true]>.ic{fill:none}
.ml-more{display:flex;justify-content:center;margin-top:clamp(28px,3vw,44px)}

/* a pinned frame with a sepia photograph behind (after the Franclizer study's area slider, which was on the home page
   from 2026-10-19 until Hampus removed it on 2026-10-20). The reviews use it: .areas.rv below, run by voices3d.js. */
.areas{position:relative;overflow:clip;border-radius:28px;height:calc(100svh + (var(--n,5) - 1) * 72svh);background:#3A2C24}
.areas-pin{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--cream)}
.a-bgs,.a-bg{position:absolute;inset:0}
.a-bg{opacity:0}
.a-bg:first-child{opacity:1}
.a-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:sepia(.85) saturate(.6) brightness(.6) contrast(.94)}
.areas-pin::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(58,44,36,.58) 0%,rgba(58,44,36,0) 34%,rgba(58,44,36,.1) 60%,rgba(58,44,36,.74) 100%);pointer-events:none}
.a-top{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 112px);z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.a-head .lbl{color:var(--champagne)}
.a-head h2{margin:10px 0 0;font-size:clamp(36px,4vw,64px)}
.a-head .fz-lead{margin-top:14px;max-width:30em;font-size:clamp(15px,1.15vw,17px);opacity:.92}
.a-nav{display:flex;gap:8px}
.a-nav .pill{min-height:46px;padding:0 22px;color:var(--cream)}
.a-nav .pill:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.a-meta{position:absolute;left:0;right:0;bottom:calc(clamp(26px,6svh,64px) + env(safe-area-inset-bottom,0px));z-index:3;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px}
.a-names,.a-times{position:relative;min-height:100px}
.a-i{position:absolute;inset:auto 0 0 0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.a-i.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.a-names b,.a-times b{display:block;margin:0;font-size:clamp(34px,4.4vw,72px);color:var(--cream)}
.a-i .lbl{margin:10px 0 0;color:var(--champagne)}
.a-times{text-align:right}
.areas.still{height:auto}
.areas.still .areas-pin{position:relative}
.areas.still .a-bg{transition:opacity .45s var(--ease)}
@media (max-width:760px){
  .areas{height:calc(100svh + (var(--n,5) - 1) * 80svh)}
  .a-top{flex-direction:column;top:calc(env(safe-area-inset-top,0px) + 84px);gap:14px}
  .a-head .fz-lead{display:none}
}

/* the faces beside the sample reviews are made up (Higgsfield, Hampus's exception of 2026-10-20 for these placeholders
   only) and live in img/samples/, which the live build refuses and drops: real clients' photos, with permission, first */
.v3-card{color:var(--ink);box-shadow:0 40px 80px -46px rgba(20,12,8,.8)}
.v3-by{display:flex;align-items:center;gap:14px;margin-top:20px}
.v3-card .v3-by .lbl{margin:0}
.v3-face{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;
  background:radial-gradient(circle at 50% 38%,rgba(62,44,34,.3) 0 20%,transparent 21%),radial-gradient(ellipse 62% 46% at 50% 102%,rgba(62,44,34,.3) 0 97%,transparent 100%),var(--greige)}
@media (max-width:760px){.v3-face{width:40px;height:40px}}

/* the reviews (Hampus, 2026-10-20: "the review card in the middle ... a random home in the background that's scrolling
   ... combining how it currently is with how it was previously, with the animation"): the pinned frame above and
   sepia homes, which change with each review and drift with the scroll, and the earlier stream of cards through the
   middle: each rises from below and behind, faces you, floats up and away. Where the buyer was buying from bottom left,
   where they bought bottom right. voices3d.js. */
.areas.rv .v3-stage{position:absolute;inset:0;z-index:2;overflow:hidden;perspective:1600px;-webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 24%,#000 76%,transparent 96%);mask-image:linear-gradient(180deg,transparent 4%,#000 24%,#000 76%,transparent 96%)}
.areas.rv .v3-list{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-style:preserve-3d}
.areas.rv .v3-card{position:absolute;left:50%;top:50%;width:min(600px,calc(100% - 2 * var(--gut)));backface-visibility:hidden;will-change:transform,opacity}
.areas.rv.still .v3-card{transform:translate(-50%,-50%)}
.areas.rv .a-nav{align-items:center}
.rv-count{margin-right:12px;color:var(--champagne);white-space:nowrap;font-variant-numeric:tabular-nums}
.rv-count b{font-weight:inherit}
.rv-bought{display:none}
@media (max-height:760px) and (min-width:761px){.areas.rv .a-head .fz-lead{display:none}}
@media (max-width:760px){
  .areas.rv .v3-stage{top:calc(env(safe-area-inset-top,0px) + 200px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}
  .areas.rv .v3-card{width:calc(100% - 32px)}
  .areas.rv .a-meta,.areas.rv .a-nav{display:none}   /* on a phone the scroll moves the reviews, and the card names both places */
  .rv-bought{display:inline}
  .areas.rv .v3-pull{font-size:clamp(24px,7vw,30px)}
  .areas.rv .v3-card blockquote{font-size:15px}
}

/* between the film and the brown band, a pause on the cream (Hampus, 2026-10-20: "add some kind of section that goes in
   between there to even it out"): one statement that inks in as it scrolls up, in the words of the values page */
.choose{padding-block:clamp(96px,11vw,180px) clamp(90px,10vw,160px)}
.choose .lbl{display:block;margin-bottom:clamp(18px,2vw,28px)}
.choose .statement{max-width:15em}
.choose .statement-note{margin-left:auto;margin-right:0;text-align:left}
@media (max-width:760px){.choose .statement-note{margin-left:0}}

/* trial:display-font — Optima-style headings in Belleza (free, SIL Open Font License), to see Aesop's kind of display
   type on our pages (Hampus, 2026-10-19: "put the font behind the lock so we can see it"). Behind the lock only, and
   not in the design system until Hampus decides. Remove this block to go back to Hanken Grotesk headings. */
@font-face{font-family:"Belleza";src:url(/fonts/belleza-400.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--f-display:"Belleza","Hanken Grotesk","Helvetica Neue",Arial,sans-serif}
.hero-h,.ph-title,.homes-head h2,.next-big,.val h3,.how-head h2,.proof-head h2,.sec-head h2,.pd-title h1,.statement,.vwords b,
.v3-head h2,.art-head h1,.bs-text h2,.closing p,.flow-h,.enq-side h2,.founder h3,.ml-empty h2,.coast-head h2,.notlisted h2,
.hero-cap p,.strip-t h3,.pd-sec>h2,.card-name,.vclose,.jl b,.coast-tx h3,.art-body h2,.habit h3,.fz-disp,.v3-pull,.legal h1,
.legal h2,.talk-big,.menu nav a,.coast-guide h3,.coast-intro h2,.flow-words span,.ct-v,.ct-top h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em}
/* end trial:display-font */