/* Selldom v2 — mobile first. Desktop widens at 900px. */

:root{
  /* Phone browsers with "dark mode for websites" repaint pages that do not declare dark support:
     light backgrounds go dark, gold goes brown. Declaring both schemes makes them leave the page alone;
     there are no dark-only rules, so the page looks the same everywhere. */
  color-scheme:light dark;
  --cream:#F7F5F1;
  --ink:#2A2520;
  --soft:#6B645A;
  --gold:#C4A362;
  /* the same gold written four more ways, so changing the line above moves
     every gold thing on the page at once. Before this, twelve gold things
     were written out by hand and a change to the line above missed them all.
     lift = the lighter one under the big title; hover = finger held on the
     phone button; press = the moment a button is pushed; rgb = the number
     form, the only form a see-through version can be built from. */
  --gold-rgb:196,163,98;
  --gold-lift:#E3C88C;
  --gold-hover:#D6B677;
  --gold-press:#b3934f;
  /* the little WhatsApp mark sitting inside the gold call button. Set to the
     same depth and strength as the deep blue of the writing beside it, so it
     reads as part of the button rather than a bright sticker stuck on it.
     Evan, 22 Sep 2026: the true WhatsApp green was too bright against gold. */
  --whatsapp:#1B4A2E;
  --navy:#1B2A4A;
  /* the deep blue in its other forms, same idea as the gold above: one place
     to change, so a lighter blue lifts the band under the water, the see-
     through blue behind a property popup and the shadows all together. */
  --navy-rgb:27,42,74;
  --navy-top:#2B3854;
  --navy-mid:#223354;
  --cream-rgb:247,245,241;
  --ink-rgb:42,37,32;
  --sand:#e8e4dd;
  /* The six accent colours, one for each thing we do. They are taken from
     what Asturias actually looks like: the red roof tiles, the Atlantic, the
     grey stone of the old towns, the wine, the green hills and late sun. All
     six are deliberately set to the same depth as one another, so no card
     shouts louder than the one beside it and the row still reads as one set.
     Each is written twice: the colour itself, and the same colour in the
     number form, which is the only form a see-through tint can be built from. */
  --c-clay:#A85D42;   --c-clay-rgb:168,93,66;
  --c-sea:#1E6E72;    --c-sea-rgb:30,110,114;
  --c-slate:#3F5E8C;  --c-slate-rgb:63,94,140;
  --c-plum:#76384F;   --c-plum-rgb:118,56,79;
  --c-forest:#4B6B44; --c-forest-rgb:75,107,68;
  --c-amber:#B08128;  --c-amber-rgb:176,129,40;
  --line:rgba(var(--ink-rgb),.14);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --pad:20px;
  /* the one spacing ladder. Every gap on the page is one of these nine
     steps and nothing in between, so the whole page keeps one rhythm:
     4 8 12 16 24 32 48 64 96. Inside a group is always smaller than
     around it, which is what tells the eye where a group ends. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}

/* THE PAGE'S OWN DARK LOOK — identical to the light one, on purpose.
   Samsung's browser (and the "darken websites" switch in some iPhone browsers)
   only leaves a page alone when the page carries alternate rules for a dark
   theme; the color-scheme line above merely announces support, and on 22 Sep
   2026 a client's Samsung repainted the page anyway (gold button -> brown
   #331200, navy band -> #000B2B, measured off her picture). These rules ARE
   the dark theme: every colour restated, so the phone uses them instead of
   inventing its own. Change a colour above -> change it here too. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:light dark;
    --cream:#F7F5F1; --ink:#2A2520; --soft:#6B645A;
    --gold:#C4A362; --gold-rgb:196,163,98; --gold-lift:#E3C88C; --gold-hover:#D6B677; --gold-press:#b3934f;
    --whatsapp:#1B4A2E;
    --navy:#1B2A4A; --navy-rgb:27,42,74; --navy-top:#2B3854; --navy-mid:#223354;
    --cream-rgb:247,245,241; --ink-rgb:42,37,32; --sand:#e8e4dd;
    --c-clay:#A85D42;   --c-clay-rgb:168,93,66;
    --c-sea:#1E6E72;    --c-sea-rgb:30,110,114;
    --c-slate:#3F5E8C;  --c-slate-rgb:63,94,140;
    --c-plum:#76384F;   --c-plum-rgb:118,56,79;
    --c-forest:#4B6B44; --c-forest-rgb:75,107,68;
    --c-amber:#B08128;  --c-amber-rgb:176,129,40;
  }
  html,body{background:var(--cream);color:var(--ink)}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Jumping to a section must not park it under the floating bar. The bar's
   lowest edge measured 122px at the top of the page and 92px once shrunk,
   so 128px clears both with a little air. Nothing visible moves: this only
   decides where a jump comes to rest. */
#top,#featured,#sell,#valuation,#about,#invest,#why,#contact{scroll-margin-top:128px}
#top{scroll-margin-top:0}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- top bar ----------
   Copied whole, with nothing changed, from the effects library's
   "liquid-glass-prism-nav-v5" demo: a full-width see-through strip that
   floats over the page, which — at exactly 64 pixels of scroll, over
   .42s of the same easing curve — shrinks into a centred, rounded, frosted
   pill with a light bend in whatever sits behind it. Only the three things
   inside it are swapped for Selldom's own: the logo where the demo's name
   sat on the left, the menu in the demo's centred-link spot, and the
   language buttons where the demo's button sat on the right. */
.bar{
  position:fixed;top:0;left:0;width:100%;z-index:40;
  display:flex;justify-content:center;pointer-events:none;
}
/* The circle, the gap and the pill stand side by side on this rail.
   Shrunk, the rail is the demo's own min(880px, 100% - 28px), and inside it
   the circle is 76, the gap is 7 and the pill takes the 797 that are left. */
.rail{
  display:flex;align-items:center;gap:7px;
  width:100%;margin-top:18px;padding:0 40px;
  transition:width .42s cubic-bezier(.22,.61,.36,1),margin .42s cubic-bezier(.22,.61,.36,1),
             padding .42s cubic-bezier(.22,.61,.36,1);
}
.bar.condensed .rail{width:min(880px,calc(100% - 28px));margin-top:16px;padding:0}

/* ---- the pill: liquid-glass-prism-nav-v5's .glass, copied as written ----
   Every value below is the demo's own. The only thing not copied is its
   width and margin, which now belong to the rail above so that the circle
   can stand beside it. */
.glass{
  pointer-events:auto;position:relative;overflow:hidden;
  flex:1 1 auto;min-width:0;
  border-radius:0;border:1px solid transparent;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:border-radius .42s cubic-bezier(.22,.61,.36,1),background .26s ease,
             border-color .26s ease,box-shadow .26s ease;
}
.nav{
  position:relative;z-index:2;display:flex;align-items:center;gap:8px;
  height:76px;padding:0;padding-top:env(safe-area-inset-top);
  transition:height .42s cubic-bezier(.22,.61,.36,1),padding .42s cubic-bezier(.22,.61,.36,1);
}
/* the demo's two overlays, hidden until it shrinks */
.glass .grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;mix-blend-mode:overlay;transition:opacity .26s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
.glass .sheen{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;opacity:0;transition:opacity .26s ease;
  background:radial-gradient(140% 180% at 50% -30%,rgba(255,255,255,.35),transparent 55%)}

/* the shrunk pill — the demo's .nav-wrap.is-condensed .glass, value for value */
.bar.condensed .glass{
  border-radius:999px;
  border-color:rgba(255,255,255,.30);background:rgba(255,255,255,0.08);
  /* Plain frosting is the floor every browser can draw. The bending-light
     recipe is added on top only where it is known to work, further down. */
  -webkit-backdrop-filter:blur(3px) saturate(1.35);
          backdrop-filter:blur(3px) saturate(1.35);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.6), inset 0 0 8px 2px rgba(255,255,255,.12),
             0 8px 24px rgba(17,17,26,.10), 0 16px 44px rgba(17,17,26,.08);
}

/* ---- the bending-light bar, only where a browser can draw it ----
   Chrome and its relatives get the real thing: the picture drawn at the
   pill's own size, which pushes the red, green and blue parts of whatever
   is behind it apart and puts a true rainbow along the rim. */
html.prism-live .bar.condensed .glass{
  -webkit-backdrop-filter:url(#nav-liquid-glass) blur(2px) saturate(1.3);
          backdrop-filter:url(#nav-liquid-glass) blur(2px) saturate(1.3);
}

/* ---- the painted stand-in, for every other browser, phones included ----
   Nothing here is worked out while the page runs: it is three soft washes of
   colour laid over the pill, dense at the two rounded ends and along the
   lower lip, clear through the middle. Screened over the frosting behind it,
   that reads as the same rainbow rim the real one produces, and because it is
   only paint it costs nothing and can never fail to show up. */
html.prism-baked .bar.condensed .glass::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;mix-blend-mode:screen;opacity:.85;
  background:
    /* the left rounded end, where light gathers hardest */
    radial-gradient(42% 120% at 0% 52%,
      rgba(120,205,255,.70) 0%, rgba(150,255,225,.42) 30%,
      rgba(255,214,140,.22) 55%, rgba(255,255,255,0) 78%),
    /* the right rounded end, warmer, so the two ends do not look stamped */
    radial-gradient(42% 120% at 100% 48%,
      rgba(255,196,120,.66) 0%, rgba(255,246,190,.36) 28%,
      rgba(140,225,255,.24) 54%, rgba(255,255,255,0) 78%),
    /* the lower lip: the thin colour band the real one leaves under the glass */
    linear-gradient(180deg,
      rgba(255,255,255,0) 66%, rgba(120,200,255,.40) 82%,
      rgba(190,255,220,.26) 90%, rgba(255,204,140,.30) 96%,
      rgba(255,255,255,0) 100%);
}
/* the bright hairline along the very top of the pill, which on the real one
   comes from the glass curving over; here it is simply drawn */
html.prism-baked .bar.condensed .glass::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 14%);
}

.bar.condensed .nav{height:52px;padding:0 14px}
.bar.condensed .glass .sheen{opacity:1}

/* ---- the logo's own circle ----
   Plain frosted glass: blur and tint only. The bending recipe is never
   pointed at it, so the logo inside stays sharp and colourless. */
.mark{
  pointer-events:auto;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:104px;height:104px;border-radius:50%;
  border:1px solid transparent;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:width .42s cubic-bezier(.22,.61,.36,1),height .42s cubic-bezier(.22,.61,.36,1),
             background .26s ease,border-color .26s ease,box-shadow .26s ease,opacity .25s ease;
}
.bar.condensed .mark{
  width:76px;height:76px;
  border-color:rgba(255,255,255,.30);background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(2px) saturate(1.3);
          backdrop-filter:blur(2px) saturate(1.3);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.6), inset 0 0 8px 2px rgba(255,255,255,.12),
             0 8px 24px rgba(17,17,26,.10), 0 16px 44px rgba(17,17,26,.08);
}
.mark-img{height:72px;width:auto;transition:height .42s cubic-bezier(.22,.61,.36,1)}
.mark-pale{display:none}
.mark-navy{display:block}
.bar.condensed .mark-img{height:52px}

/* the centred menu — same font stack, size, weight, colour, spacing and
   hover as the demo's own centred links, only the words are Selldom's */
.nav-desk{
  display:none;margin:0 auto;gap:2px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
}
.nav-desk a{
  color:rgba(20,20,30,.82);font-size:14px;font-weight:550;
  /* 11 either side of each word, not 13. Six words now sit here instead of
     five, and in Russian the six only fit inside the shrunk menu shape once
     each one gives up two of the spaces around it. Measured 22 Sep 2026. */
  padding:8px 11px;border-radius:13px;transition:background .2s,color .2s;
}
.nav-desk a:hover{color:#000;background:rgba(255,255,255,.5)}
/* Evan, 23 Sep: one folding language button instead of four. Closed, the
   bar shows only the two letters of the language in use, in a small gold
   ring. Open, an ivory card rolls down from it: a gold hairline at its
   edge, four rows each with a round flag, the two letters and the
   language's own name, and a gold dot beside the one in use. The rows rise
   out of a soft blur one after another, as the phone menu's words do. */
.lang-switch{display:inline-flex;align-items:center}
.lang-now{
  font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:1.4px;line-height:1;
  min-width:42px;height:32px;padding:0 10px;border-radius:999px;cursor:pointer;
  color:rgb(21,17,9);background:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(var(--gold-rgb),.25);
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background .2s ease;
}
.lang-now:hover{background:var(--gold-hover)}
.lang-now:active{transform:scale(.94)}
.lang-now.is-open{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 3px rgba(var(--gold-rgb),.22),0 2px 8px rgba(var(--gold-rgb),.25);
}
.lang-fold{
  position:fixed;z-index:45;top:0;right:0;min-width:196px;padding:8px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(var(--cream-rgb),.97);border-radius:16px;
  border:1px solid rgba(var(--gold-rgb),.55);
  box-shadow:inset 0 0 0 3px rgba(var(--cream-rgb),1),inset 0 0 0 4px rgba(var(--gold-rgb),.22),
             0 18px 40px rgba(12,18,34,.18),0 4px 12px rgba(12,18,34,.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transform-origin:top right;
  clip-path:inset(0 0 100% 0 round 16px);opacity:0;visibility:hidden;pointer-events:none;
  transition:clip-path .32s cubic-bezier(.4,0,.2,1),opacity .2s ease .12s,visibility 0s linear .34s;
}
.lang-fold.is-open{
  clip-path:inset(0 0 0 0 round 16px);opacity:1;visibility:visible;pointer-events:auto;
  transition:clip-path .45s cubic-bezier(.2,.7,.2,1),opacity .15s ease,visibility 0s;
}
.lang-fold button{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 30px 10px 10px;border:0;border-radius:10px;background:none;cursor:pointer;
  position:relative;text-align:left;color:var(--ink);font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
  opacity:0;filter:blur(4px);transform:translateY(-6px);
  transition:opacity .15s ease,filter .15s ease,transform .15s ease,background .2s ease;
}
.lang-fold.is-open button{
  opacity:1;filter:none;transform:none;
  transition:opacity .4s ease calc(.08s + var(--i) * .05s),filter .4s ease calc(.08s + var(--i) * .05s),
             transform .45s cubic-bezier(.2,.7,.2,1) calc(.08s + var(--i) * .05s),background .2s ease;
}
.lang-fold button:hover{background:rgba(var(--gold-rgb),.12)}
.lang-fold button + button::before{
  content:"";position:absolute;left:44px;right:10px;top:-1px;height:1px;
  background:rgba(var(--gold-rgb),.22);
}
.lang-flag{
  width:22px;height:22px;flex:none;border-radius:50%;
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.7),0 0 0 3px rgba(var(--cream-rgb),1),0 0 0 4px rgba(var(--gold-rgb),.25);
}
.lang-code{font-size:.66rem;font-weight:600;letter-spacing:1.4px;color:rgba(var(--gold-rgb),1);width:20px}
.lang-name{font-family:var(--serif);font-size:1.12rem;line-height:1.1;color:var(--ink)}
.lang-fold button.on::after{
  content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18);
}
.lang-fold button.on .lang-name{font-weight:600}
@media (max-width:899px){
  :root{--bar-h:calc(72px + env(safe-area-inset-top))}
  /* on a phone the bar is the same height at the top as when scrolled:
     circle 58 tall, 12 down from the top, so nothing jumps when it shrinks.
     Evan, 23 Sep: the white bar was a quarter too tall, so it went from 94
     to 72 and the logo shrank with it. */
  .rail{margin-top:12px}
  .bar.condensed .rail{margin-top:12px}
  .mark,.bar.condensed .mark{width:58px;height:58px}
  .mark-img{height:54px}
  .bar.condensed .mark-img{height:40px}
  .nav{height:58px}
  .nav .lang-switch{margin-left:auto;margin-right:6px}
  .nav .burger{margin-left:0;flex:none}

  /* ---- on a phone, scrolling leaves two frosted circles and nothing else ----
     Evan, 2026-09-19. The wide frosted panel goes, because it was landing on
     the first flat's photo, and the four language buttons go with it — the
     menu carries those anyway. What stays, the whole way down every page, is
     the logo in its own frosted circle and the menu lines in a matching one,
     so both are readable over any photo. The computer version is untouched.

     First: every part that draws the wide panel is switched off — its tint,
     rim, frosting, shadow, rounded shape, the sheen and grain laid over it,
     and the painted rainbow that stands in for bending light on iPhones. */
  .bar.condensed .glass{
    border-radius:0;border-color:transparent;background:transparent;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    /* the circle round the menu lines stands taller than this strip, so it
       must be allowed to sit outside it instead of being cut off */
    overflow:visible;
  }
  .bar.condensed .glass .sheen,
  .bar.condensed .glass .grain{opacity:0}
  html.prism-live .bar.condensed .glass{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  html.prism-baked .bar.condensed .glass::before,
  html.prism-baked .bar.condensed .glass::after{display:none}

  /* the four language buttons leave with the panel */
  .bar.condensed .nav .lang-switch{opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .28s ease,visibility 0s linear .28s}
  .nav .lang-switch{transition:opacity .28s ease}
  /* Evan, 23 Sep: "the hamburger is missing language selection". The menu
     no longer carries its own language buttons, so while the navy menu is
     open the gold language button comes back beside the cross, scrolled or not */
  .bar.condensed.menu-live .nav .lang-switch{opacity:1;pointer-events:auto;visibility:visible;
    transition:opacity .28s ease .2s,visibility 0s}
  /* Evan, 24 Sep: while the menu is open the gold language button sits
     under the cross, centred on it, not to its left, to leave more room */
  .bar.menu-live .nav .lang-switch{position:absolute;top:calc(100% + 10px);right:-4px;margin:0}
  .bar.condensed.menu-live .nav .lang-switch{right:8px}
  .bar.menu-live .nav .lang-now{width:42px;padding:0}
  .bar.menu-live .nav .burger{margin-left:auto}
  .bar.menu-live .glass{overflow:visible}

  /* The menu lines get the same frosted circle the logo has: the same size,
     the same tint, rim, frosting and shadow, so the two read as a pair at the
     two ends of the screen. The lines themselves are re-centred, since on the
     bare strip they used to hang off the right edge. */
  /* the strip's own side padding goes, so the two circles sit the same
     distance in from their own edge of the screen — 14 each, not 14 and 29 */
  .bar.condensed .nav{padding:0}
  .bar.condensed .nav .burger{
    width:58px;height:58px;flex:0 0 auto;border-radius:50%;
    align-items:center;
    border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,0.32);
    -webkit-backdrop-filter:blur(6px) saturate(1.3);
            backdrop-filter:blur(6px) saturate(1.3);
    box-shadow:inset 0 1px 0 0 rgba(255,255,255,.6), inset 0 0 8px 2px rgba(255,255,255,.12),
               0 8px 24px rgba(17,17,26,.10), 0 16px 44px rgba(17,17,26,.08);
  }

  /* Evan, 2026-09-22: on a phone, once the page starts moving, the two round
     patches behind the logo and behind the menu lines were so see-through
     that a busy photo showed straight through them and the lines were hard to
     pick out. Both are now a good deal whiter and the picture behind them is
     blurred harder, so what sits on top stands away from whatever is under it.
     The computer version keeps the lighter look it always had. */
  .bar.condensed .mark{
    border-color:rgba(255,255,255,.42);background:rgba(255,255,255,0.32);
    -webkit-backdrop-filter:blur(6px) saturate(1.3);
            backdrop-filter:blur(6px) saturate(1.3);
  }

  /* With the panel invisible, its own area must stop catching taps, or a
     see-through strip right across the top of the page would swallow every
     tap meant for the flat underneath it. Taps go back to the two circles. */
  .bar.condensed .glass{pointer-events:none}
  .bar.condensed .nav .burger{pointer-events:auto}
}
.burger{
  width:34px;height:34px;border:0;background:none;padding:0;cursor:pointer;margin-left:auto;
  display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end;
  position:relative;-webkit-tap-highlight-color:transparent;
  /* let go: it springs back past its size and settles, like something alive */
  transition:scale .55s cubic-bezier(.3,1.9,.45,1);
}
/* Evan, 23 Sep: a press should answer the finger, like a ripple on water,
   but premium. The button gives under the finger, then two hairline gold
   rings and a faint breath of light spread out from it and fade. */
.burger.pressing{scale:.86;transition:scale .12s cubic-bezier(.3,0,.3,1)}
.burger-wave{
  /* drawn on the page itself, over the bar: inside the button the frosted
     strip it sits in cut the rings off at its edge */
  position:fixed;z-index:41;
  border-radius:50%;pointer-events:none;border:1px solid rgba(var(--gold-rgb),.85);
  animation:burger-wave .8s cubic-bezier(.16,.8,.3,1) forwards;
}
/* Evan, 23 Sep: a double ripple — a second ring follows the first a beat
   later, a little fainter, like the second ring on water */
.burger-wave.late{animation-delay:.24s;opacity:0;border-color:rgba(var(--gold-rgb),.6)}
.burger-wave.glow{border:0;background:radial-gradient(circle,rgba(var(--gold-rgb),.28),rgba(var(--gold-rgb),0) 68%);
  animation:burger-glow .7s ease-out forwards}
@keyframes burger-wave{
  0%{transform:scale(.55);opacity:0}
  12%{opacity:1}
  100%{transform:scale(2.9);opacity:0;border-width:.3px}
}
@keyframes burger-glow{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.4);opacity:0}}
.burger span{
  display:block;width:24px;height:1.5px;background:var(--navy);box-shadow:0 0 4px rgba(255,255,255,.55);
  /* closing: the cross first unturns, then the lines slide apart */
  transition:rotate .32s cubic-bezier(.6,0,.2,1),translate .3s cubic-bezier(.6,0,.2,1) .22s,
             opacity .2s .26s,scale .3s cubic-bezier(.6,0,.2,1) .22s,background .3s;
}
/* Three lines, not two. Evan, 2026-09-18: with two it did not read as the
   menu button people already know. Three lines of 1.5px with a 6px gap stand
   16.5px tall, so the outer two are 7.5px from the middle — that is the
   number the open state moves them by to make the cross. The middle line has
   nowhere to go in a cross, so it fades out as the other two turn. */
/* Evan, 23 Sep: open and close should feel premium. Opening happens in two
   beats: the three lines slide together into one, then turn into the cross
   with the faintest overshoot. Closing is the same film run backwards. */
.burger[aria-expanded="true"] span{
  transition:translate .17s cubic-bezier(.6,0,.2,1),scale .17s cubic-bezier(.6,0,.2,1),opacity .12s,
             rotate .3s cubic-bezier(.34,1.45,.5,1) .12s,background .3s;
}
.burger[aria-expanded="true"] span:first-of-type{translate:0 7.5px;rotate:45deg}
.burger[aria-expanded="true"] span:nth-of-type(2){opacity:0;scale:.2 1}
.burger[aria-expanded="true"] span:last-of-type{translate:0 -7.5px;rotate:-45deg}

/* ---------- letters that flip colour under them ----------
   The bar floats over the page, and the page has both light stretches
   (cream, white) and dark ones (the opening picture, the bottom panel).
   app.js watches what is behind the bar right now and adds "on-dark" to
   it when that is one of the dark stretches, so the menu words, the small
   lines, and the mark swap to the light versions and stay readable —
   never the same dark letters sitting on a dark picture. */
.bar.on-dark .nav-desk a{color:rgba(255,255,255,.92)}
.bar.on-dark .nav-desk a:hover{color:#fff;background:rgba(255,255,255,.18)}
.bar.on-dark .burger span{background:#fff}
.bar.on-dark .mark-pale{display:block}
.bar.on-dark .mark-navy{display:none}

.sheet{
  position:fixed;inset:0;z-index:39;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
}
.sheet a{font-family:var(--serif);font-size:32px;padding:10px 0;border-bottom:1px solid var(--line)}
.sheet[hidden]{display:none}
/* Evan, 23 Sep: the phone menu, "old money". A deep navy page like the
   blue under the front photograph, the words in ivory in the site's serif,
   each with a small gold numeral above it (I to VI), a gold double line at
   the top and bottom like the one under the photograph, and a short gold
   hairline between the words. No bright colours and no drawings: richness
   here comes from restraint, spacing and gold. */
.sheet{
  align-items:center;gap:0;counter-reset:sheet;
  padding:calc(var(--bar-h) + 28px) var(--pad) 40px;
  /* the navy itself is drawn by .sheet-disc and .sheet-tone below; the
     page only dims a little behind the circle as it grows */
  background:rgba(8,13,28,0);isolation:isolate;overflow:hidden;
  transition:background .5s ease-in .1s;
}
.sheet.is-open{background:rgba(8,13,28,.28);transition:background .5s ease-out}
.sheet::after{
  content:"";position:absolute;left:50%;width:120px;margin-left:-60px;height:4px;
  border-top:1px solid rgba(var(--gold-rgb),.75);border-bottom:1px solid rgba(var(--gold-rgb),.75);
}
/* Evan, 23 Sep: open and close must be smooth and premium. The navy is a
   real disc, grown with a plain scale so the phone's graphics chip does the
   work and no frame is ever redrawn by hand, which is what made the first
   version (a cut-out circle) catch on phones. nav.js sets its size and
   where it sits (centred on the menu button). A soft dark shade lies just
   outside its edge; the finished navy of the approved menu (.sheet-tone)
   fades in over it once the circle has filled the screen. */
.sheet-disc,.sheet-ring{
  position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  left:var(--ox,100%);top:var(--oy,0px);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
}
.sheet-disc{
  background:radial-gradient(closest-side,#2b3a5e,var(--navy) 55%,#16213b);
  box-shadow:0 0 70px 18px rgba(6,10,22,.45);
  transform:scale(.001);will-change:transform;
  transition:transform .8s cubic-bezier(.7,0,.2,1) .12s;
}
.sheet.is-open .sheet-disc{
  transform:scale(1);
  transition:transform .6s cubic-bezier(.76,0,.24,1);
}
.sheet-tone{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(var(--gold-rgb),.10),transparent 60%),
    linear-gradient(180deg,var(--navy-top),var(--navy) 55%,#141f38);
  transition:opacity .3s ease-in;
}
.sheet.is-open .sheet-tone{opacity:1;transition:opacity .4s ease-out .56s}
.sheet a,.sheet-foot{z-index:1}
.sheet::after,.sheet-logo{z-index:2}
/* Evan, 23 Sep: a very thin gold ring rides the edge of the growing and
   shrinking circle, so the circle itself can be seen. It is its own
   element (nav.js makes it), grown to exactly the size of the circle with
   the same timing, and it simply leaves the screen once the navy is full. */
.sheet-ring{
  /* grown by its real width rather than a scale, so the line stays one
     hair thin at every size; the same curve and length as the disc keeps
     it exactly on the disc's edge */
  z-index:3;margin:0;width:0;height:0;transform:translate(-50%,-50%);
  border:1px solid rgba(var(--gold-rgb),.9);
  box-shadow:0 0 16px rgba(var(--gold-rgb),.35),inset 0 0 12px rgba(var(--gold-rgb),.2);
  transition:width .8s cubic-bezier(.7,0,.2,1) .12s,height .8s cubic-bezier(.7,0,.2,1) .12s,opacity .2s;
}
.sheet-ring[hidden]{display:none}
.sheet.is-open .sheet-ring{
  width:var(--d);height:var(--d);opacity:0;
  transition:width .6s cubic-bezier(.76,0,.24,1),height .6s cubic-bezier(.76,0,.24,1),opacity .3s .52s;
}
@media (prefers-reduced-motion:reduce){.sheet-ring{display:none}.sheet-disc,.sheet-tone{transition:none!important}}
/* the gold double line at the foot draws outwards from its middle */
.sheet::after{transform:scaleX(0);transition:transform .2s ease-in}
.sheet.is-open::after{transform:none;transition:transform .55s cubic-bezier(.2,.7,.2,1) .3s}
/* Evan, 23 Sep: the Selldom logo at the top instead of the gold double
   line — bare (no circle), in its light version, with a soft dark shadow
   so it stands clear of the navy. It rises out of a blur like the words. */
.sheet-logo{
  position:absolute;left:50%;top:calc(var(--bar-h) + 10px);width:62px;margin-left:-31px;height:auto;
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(0,0,0,.35)) blur(5px);
  opacity:0;transform:translateY(12px);
  transition:opacity .2s,transform .2s ease-in,filter .2s;
}
.sheet.is-open .sheet-logo{
  opacity:1;transform:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(0,0,0,.35)) blur(0);
  transition:opacity .4s ease-out .2s,transform .5s cubic-bezier(.2,.7,.2,1) .2s,filter .4s ease-out .2s;
}
.sheet::after{bottom:64px}
.sheet a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:100%;max-width:360px;text-align:center;counter-increment:sheet;
  font-family:var(--serif);font-size:31px;font-weight:400;letter-spacing:.6px;line-height:1.1;
  padding:13px 0 15px;border-bottom:0;position:relative;color:#F4EEE2;
  /* each word rises into place out of a soft blur, one after another;
     on closing they all fade together, quickly, before the circle shrinks */
  opacity:0;transform:translateY(16px);filter:blur(5px);
  transition:opacity .2s,transform .25s ease-in,filter .2s,color .25s;
}
.sheet.is-open a{
  opacity:1;transform:none;filter:none;
  transition:opacity .4s ease-out,transform .5s cubic-bezier(.2,.7,.2,1),filter .4s ease-out,color .25s;
  transition-delay:calc(.24s + var(--i,0) * .04s);
}
.sheet a::after{
  content:counter(sheet,upper-roman);order:-1;
  font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:2px;
  color:var(--gold);
}
.sheet a+a::before{
  content:"";position:absolute;top:0;left:50%;width:22px;height:1px;margin-left:-11px;
  background:rgba(var(--gold-rgb),.45);
}
.sheet a:active{color:var(--gold-lift)}
.sheet-foot{
  position:absolute;left:0;right:0;bottom:30px;margin:0;text-align:center;
  font-family:var(--sans);font-size:10px;letter-spacing:3.2px;text-transform:uppercase;
  color:rgba(var(--gold-rgb),.75);
  opacity:0;transition:opacity .2s;
}
.sheet.is-open .sheet-foot{opacity:1;transition:opacity .5s ease-out .45s}
.sheet a:nth-of-type(2){--i:1}
.sheet a:nth-of-type(3){--i:2}
.sheet a:nth-of-type(4){--i:3}
.sheet a:nth-of-type(5){--i:4}
.sheet a:nth-of-type(6){--i:5}
/* the logo turns pale once the navy has reached it, the cross stays white
   for as long as any navy is on screen; nav.js times both */
.bar.menu-open .mark-pale{display:block}
.bar.menu-open .mark-navy{display:none}
.bar.menu-live .burger span{background:#fff}
/* Evan, 23 Sep: the big logo now sits at the top of the menu, so the small
   one in the corner steps out of the way while the menu is open */
.bar.menu-live .mark{opacity:0;pointer-events:none}
/* a short phone: the bottom double line would run into the last word */
@media (max-height:720px){
  .sheet::after{display:none}
  .sheet a{padding:9px 0 11px;font-size:28px}
  /* the logo at the top would sit on the first word: smaller, and the
     words start below it */
  .sheet{padding-top:calc(var(--bar-h) + 74px)}
  .sheet-logo{width:42px;margin-left:-21px;top:calc(var(--bar-h) + 6px)}
}
@media (max-height:600px){
  .sheet{padding-top:calc(var(--bar-h) + 16px)}
  .sheet-logo{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sheet,.sheet a,.sheet-foot,.sheet-logo,.sheet::after,.burger span{transition:none!important}
  .burger,.burger.pressing{transition:none!important}
  .burger-wave{display:none}
  .sheet a{filter:none}
}

/* ---------- hero ---------- */
/* Phone: the picture is a band across the top so the WHOLE scene shows —
   the round building, the sculpture, the cathedral. The words sit below it
   on a panel that carries the water colour down, so there is no hard seam. */
/* The top bar no longer floats over the picture at the top of the page.
   Evan, 2026-09-22: the menu button was landing on the sky. The picture
   now starts one bar-height down, and the page's own cream shows in that
   strip, so the logo, the language buttons and the menu button all sit on
   plain cream, just above the moving picture. --bar-h is the bar's real
   height on each layout: 16 above + 78 circle-with-rim on a phone, 18 + 104 on a
   computer, plus whatever a notch phone adds at the top. */
.hero{
  position:relative;overflow:hidden;margin-top:var(--bar-h);
  background:linear-gradient(180deg,var(--navy-top) 0%,var(--navy-mid) 45%,var(--navy) 100%);
}
.hero-pic{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero-pic::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:74px;
  background:linear-gradient(180deg,rgba(var(--navy-rgb),0),var(--navy-top));
}
/* ---------- hero seam — a thin gold double line between the moving
   water and the blue panel below it. Evan picked this one, 2026-09-17,
   out of four tried live on the page. Fades to nothing at both edges so
   it reads as a glow, not a bar stretched to the screen's edges. */
.hero-seam{position:relative;width:100%;height:10px}
.hero-seam::before,.hero-seam::after{
  content:"";position:absolute;left:10%;right:10%;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),0) 0%,var(--gold) 20%,var(--gold) 80%,rgba(var(--gold-rgb),0) 100%);
}
.hero-seam::before{top:0;height:3px;opacity:.95}
.hero-seam::after{top:7px;height:1px;opacity:.55}

/* ---------- the four things to do, on the blue ----------
   Phone only. Sits just under the gold double line, centred, above the
   title (Evan moved it off the water, 23 Sep). White letters on a faint
   pane with a gold rim, the same look as the town buttons, so nothing up
   here competes with the one solid gold thing on the page. */
.hero-acts{
  position:relative;z-index:2;margin-top:14px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  /* On a narrow phone the group is allowed closer to the edge of the picture
     than the rest of the page is, which is where the room for the fourth
     button comes from. 20 across at 430 and wider, 12 at 390, 8 at 360 and
     below. Measured 22 Sep: Russian is the longest of the four languages and
     needs 349 of the 366 it gets on a 390-wide phone, so 17 are spare. The
     earlier 20-everywhere version left only 1 spare there and would have cut
     the last word on any phone that draws letters a hair wider. */
  padding:0 clamp(8px, calc(20vw - 66px), var(--pad));
  /* All four buttons step down in size together as the screen narrows, so the
     longest word in any language keeps every letter instead of being cut.
     At 390 across and wider these land on exactly the size Evan approved:
     14 for the word, 7 of space on all four sides, 6 between buttons. */
  --act-fs:clamp(10.5px, 3.59vw, 14px);
  --act-pad:clamp(4.5px, 1.795vw, 7px);
  --act-gap:clamp(3.5px, 1.538vw, 6px);
}
.hero-acts-row{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;
  gap:var(--act-gap);width:100%;max-width:420px;font-size:var(--act-fs);
}
.hero-act{
  font:inherit;font-family:var(--sans);font-size:1em;font-weight:500;letter-spacing:.3px;
  cursor:pointer;text-decoration:none;
  flex:0 0 auto;min-width:0;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1.1;
  padding:var(--act-pad);border-radius:9px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(var(--gold-rgb),.55);
  color:#fff;
  transition:background .2s,border-color .2s,transform .15s;
}
.hero-act.wide{width:auto;max-width:100%;flex:none;font-size:.96em;padding:var(--act-pad)}
.hero-act:active{transform:translateY(1px)}
.hero-act.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* the open "other services" button must not turn gold as well — the page's
   standing rule is one gold thing in a row, never two. It darkens instead. */
.hero-act.wide.on{
  background:rgba(var(--navy-rgb),.72);border-color:rgba(var(--gold-rgb),.5);color:#fff;
}

/* The short list behind "other services". One row of small buttons, not a
   stack: a stack made the group taller than the picture and pushed Buy,
   Sell and Rent up behind the top bar. Wraps to a second row by itself if
   more services are ever added. */
.hero-more{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--act-gap);
  width:100%;max-width:420px;
}
.hero-more[hidden]{display:none}
.hero-more a{
  font-family:var(--sans);font-size:calc(var(--act-fs) * .93);color:var(--ink);text-decoration:none;
  flex:0 0 auto;min-width:0;text-align:center;line-height:1.1;
  padding:var(--act-pad);border-radius:9px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(var(--gold-rgb),.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}

/* the line under the town buttons saying which kind of property is showing,
   with the way back to all of them. Only there while a kind is chosen. */
.deal-note{
  margin:0 0 22px;font-family:var(--sans);font-size:13px;color:#fff;opacity:.9;
}
.deal-note[hidden]{display:none}
.deal-note button{
  font:inherit;cursor:pointer;background:none;border:0;padding:0 0 0 8px;
  color:var(--gold-lift);text-decoration:underline;
}

.hero-mid{position:relative;text-align:center;color:#fff;padding:22px var(--pad) 34px}
.hero-mid h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(32px,8.8vw,48px);
  line-height:1.06;margin:0 0 12px;
}
.hero-sub{
  font-family:var(--serif);font-size:26px;color:var(--gold-lift);margin:0 0 var(--s5);
  letter-spacing:2px;text-shadow:0 1px 10px rgba(0,0,0,.4);
}
/* ---------- the call button in the hero. The one solid gold thing on the
   whole moving picture, so it cannot be missed, and the only place gold is
   used as a fill up there — the same rule the town pills follow: one gold
   thing in a row, never two. Sits under the subtitle, above "Featured
   Properties", so the number is read before anything is scrolled. */
.hero-call{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 var(--s6);padding:12px 22px;border-radius:999px;
  background:var(--gold);color:var(--navy);
  font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.hero-call svg{width:18px;height:18px;flex:none;stroke:none;
  /* the mark is drawn in its own green, named once at the top of this file. */
  fill:var(--whatsapp);}
.hero-call:hover{background:var(--gold-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.hero-call:active{transform:translateY(0);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.hero-mid .head{margin:0}
.hero-mid .rule{margin:14px auto 22px}
/* "Available Properties" names the row of towns under it rather than titling
   the whole picture, so it is set smaller than a section title and pushed
   against the left edge, with its short gold line moved left to match. */
.hero-mid .head#featured{font-size:clamp(21px,5.4vw,27px);text-align:left}
.hero-mid .head#featured + .rule{margin-left:0;margin-right:auto}
.hero-mid .pills{margin-bottom:6px}

/* ---------- blocks ---------- */
.block{padding:56px var(--pad)}
.block.tight{padding-top:40px}
#properties{padding-top:24px}
.head{font-family:var(--serif);font-weight:400;font-size:clamp(30px,8vw,40px);text-align:center;margin:0}
.head.light{color:var(--cream)}
.rule{width:56px;height:1px;background:var(--gold);margin:var(--s4) auto var(--s7);opacity:.8}
.rule.light{opacity:.6}

/* town pills — same pattern as the first version: resting pills are frosted
   glass, and only the chosen town turns gold. Evan, 2026-09-01: a resting
   gold row was rejected outright — one gold thing in a clear row cannot be
   missed, so it must never be more than one. */
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 30px}
.pill{
  font:inherit;font-size:13px;cursor:pointer;
  /* all the same width — app.js measures the widest label and sets --pill-w,
     so the row splits evenly and every row shares one middle line. */
  width:var(--pill-w,auto);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(var(--gold-rgb),.3);
  color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.pill span{margin-left:6px;color:var(--soft);font-size:11.5px}
.pill:hover{border-color:rgba(var(--gold-rgb),.55)}
.pill.on{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  box-shadow:0 4px 14px rgba(var(--gold-rgb),.4);
}
.pill.on span{color:var(--ink);opacity:.66}

/* why */
.why{padding:48px var(--pad);background:#fff}
.why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s7) var(--s5)}
.why-grid li{text-align:center}
.why-grid li:last-child{grid-column:1/-1}
.why-grid svg{width:40px;height:40px;margin:0 auto var(--s4);fill:none;stroke:var(--gold);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;display:block}
.why-grid h3{font-family:var(--sans);font-weight:500;font-size:14px;margin:0 0 var(--s3);letter-spacing:.2px}
.why-grid p{margin:0;font-size:12.5px;color:var(--soft);line-height:1.5}

/* cards */
.cards{display:grid;gap:22px}
.card{background:#fff;border-radius:4px;overflow:hidden;border:1px solid rgba(var(--gold-rgb),.675);box-shadow:0 2px 8px rgba(var(--ink-rgb),.065)}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;min-height:0;background:#fff;cursor:pointer;box-sizing:border-box;padding:7px}
.card-img img{width:100%;height:100%;object-fit:cover;border-radius:2px}
/* All the flat's photos sit side by side in the card. On a wide screen only
   the first is shown and nothing scrolls, so the card looks as it always
   did; on a phone the strip slides sideways under a finger. */
.card-strip{display:flex;width:100%;height:100%;overflow:hidden}
.card-strip img{flex:0 0 100%}
.card-strip img+img{display:none}
.card-dots{display:none}
@media (max-width:899px){
  /* the swipe itself, plus the row of small marks showing which photo of
     the flat is in front */
  .card-strip{
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .card-strip::-webkit-scrollbar{display:none}
  .card-strip img+img{display:block}
  .card-strip img{scroll-snap-align:start}
  .card-dots{
    display:flex;position:absolute;left:0;right:0;bottom:14px;
    justify-content:center;gap:6px;pointer-events:none;
  }
  .card-dot{
    width:6px;height:6px;border-radius:999px;
    background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(var(--ink-rgb),.35);
  }
  .card-dot.on{background:#fff}
}
.tag{
  position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:2px;color:var(--ink);
}
/* A sold flat still shows in the list, so a visitor can see what SELLDOM has
   handled, but the badge is a different colour and the whole card is dimmed
   a touch so it never reads as something still on offer. */
.tag-sold{background:#B4483C;color:#fff}
.card.is-sold .card-img{opacity:.78}
.card-body{padding:16px 16px 18px}
.card-title{font-family:var(--serif);font-size:21px;margin:0 0 2px;line-height:1.25}
.card-city{font-size:12px;color:var(--soft);margin:0 0 10px;letter-spacing:.3px}
.card-facts{display:flex;gap:14px;font-size:12px;color:var(--soft);margin:0 0 12px;flex-wrap:wrap}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.price{font-family:var(--serif);font-size:22px;color:var(--ink)}
.price span{font-family:var(--sans);font-size:12px;color:var(--soft)}
.btn-detail{font:inherit;font-size:12px;color:inherit;background:none;cursor:pointer;border:1px solid var(--line);border-radius:2px;padding:9px 16px;letter-spacing:.4px;white-space:nowrap}
.btn-detail:active{background:var(--ink);color:var(--cream)}
.empty{text-align:center;color:var(--soft);font-size:14px}

/* about */
.about{max-width:620px;margin:0 auto}
#sell .lead{max-width:620px;margin-left:auto;margin-right:auto}
.lead{font-family:var(--serif);font-size:20px;line-height:1.5;text-align:center;margin:0 0 var(--s7)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7) var(--s5)}
.about-grid h4{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--gold);margin:0 0 var(--s3);font-weight:600}
.about-grid p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.6}
/* The company history brought over from the old site: a short line, then
   the team's own background as a plain list, sitting under the four-box
   grid rather than inside it, since it reads as prose, not a fact box. */
.about-history{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.about-history h4{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--gold);margin:0 0 var(--s3);font-weight:600;text-align:center}
.about-history p{margin:0 0 var(--s3);font-size:14.5px;color:var(--soft);line-height:1.6;text-align:center}
.about-history ul{margin:0 auto;max-width:560px;padding-left:1.2em;font-size:13.5px;color:var(--soft);line-height:1.7}
.about-history li{margin:0 0 var(--s2)}
.about-history li::marker{color:var(--gold-press)}

/* footer */
footer{background:var(--navy);color:var(--cream);padding:var(--s8) var(--pad);text-align:center;padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom))}
.c-line{font-family:var(--serif);font-size:24px;margin:0 0 var(--s3)}
.c-line a{border-bottom:1px solid rgba(var(--cream-rgb),.35);padding-bottom:2px}
.c-line.small{font-family:var(--sans);font-size:13px;opacity:.7}
.c-note{font-size:11px;opacity:.5;margin:var(--s7) 0 0;letter-spacing:.5px}
.c-note a{border-bottom:1px solid rgba(var(--cream-rgb),.4)}
/* The row of social icons in every footer. Small circles so they never
   compete with the phone number and email above them. */
.social-row{display:flex;justify-content:center;gap:14px;margin:var(--s5) 0 0}
.social-row a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(var(--cream-rgb),.32);border-radius:50%;color:var(--cream);
  transition:border-color .2s,color .2s;
}
.social-row svg{width:18px;height:18px;fill:currentColor}
.social-row a:hover,.social-row a:focus-visible{border-color:var(--gold);color:var(--gold)}



/* ---------- sell ----------
   The three steps and the short form. Phone: steps first, then the form.
   Desktop: steps on the left, form on the right. */
.sell-grid{display:grid;gap:var(--s7);max-width:1080px;margin:0 auto}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
/* the number sits in a narrow first column and spans both text rows, so the
   heading and the sentence both use the wide column beside it */
.steps li{display:grid;grid-template-columns:38px 1fr;column-gap:var(--s4);align-items:start}
.steps li > h4,.steps li > p{grid-column:2}
.step-n{
  grid-column:1;grid-row:1 / span 2;
  width:38px;height:38px;border-radius:999px;border:1px solid var(--gold);
  color:var(--gold);font-family:var(--serif);font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.steps h4{font-family:var(--sans);font-weight:500;font-size:15px;margin:var(--s2) 0 var(--s2)}
.steps p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.55}

.valuation{background:#fff;border:1px solid var(--line);border-radius:4px;padding:var(--s6) var(--s5)}
.valuation h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0}
.val-sub{font-size:12.5px;color:var(--soft);margin:var(--s2) 0 var(--s6)}
.valuation label{display:block;font-size:12px;color:var(--soft);letter-spacing:.3px;margin:0 0 var(--s5)}
.valuation label span{opacity:.65}
.valuation input[type=text],.valuation input[type=tel],.valuation input[type=email]{
  display:block;width:100%;margin-top:var(--s2);
  font:inherit;font-size:15px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:2px;padding:var(--s3) var(--s4);
}
.valuation input:focus{outline:2px solid var(--gold);outline-offset:-1px;background:#fff}
.valuation input.bad{border-color:#B4483C;background:#fdf3f2}
.val-ok{display:flex;gap:var(--s3);align-items:flex-start;margin:var(--s6) 0 0;line-height:1.45}
/* The consent box is drawn by the page itself, so a phone in dark mode cannot paint it as a dark square that looks already ticked. */
.val-ok input{margin:2px 0 0;width:17px;height:17px;flex:0 0 auto;appearance:none;-webkit-appearance:none;border:1px solid #8a8378;border-radius:3px;background:#fff;cursor:pointer;position:relative}
.val-ok input:checked{background:var(--gold);border-color:var(--gold)}
.val-ok input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg)}
.val-ok input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.valuation input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--ink)}
.val-err{color:#B4483C;font-size:12.5px;margin:var(--s4) 0 0}
.val-err[hidden]{display:none}
.val-go{
  display:block;width:100%;margin:var(--s5) 0 0;font:inherit;cursor:pointer;
  background:var(--gold);color:var(--ink);border:0;border-radius:2px;
  padding:var(--s4) var(--s5);font-size:13.5px;letter-spacing:.5px;
}
.val-go:active{background:var(--gold-press)}
.val-note{font-size:12px;color:var(--soft);text-align:center;margin:var(--s4) 0 0}
.val-note a{border-bottom:1px solid var(--line)}
.val-done{text-align:center;margin:var(--s5) 0 0;padding:var(--s5) 0 var(--s2);border-top:1px solid var(--line)}
.val-done[hidden]{display:none}
.val-done h3{margin:0 0 var(--s3)}
.val-done p{font-size:14px;color:var(--soft);margin:0;line-height:1.6}

/* ---------- one property, in full ----------
   Phone: covers the screen and scrolls on its own. Desktop: a panel in the
   middle with the page dimmed behind it. */
.detail{position:fixed;inset:0;z-index:60}
.detail[hidden]{display:none}
.detail-scrim{position:absolute;inset:0;background:rgba(var(--navy-rgb),.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.detail-panel{
  position:absolute;inset:0;background:var(--cream);
  display:flex;flex-direction:column;overflow:hidden;
}
.detail-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.detail-gal{position:relative}
.detail-x{
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:3;
  width:42px;height:42px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(var(--cream-rgb),.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(var(--navy-rgb),.22);
  display:flex;align-items:center;justify-content:center;
}
.detail-x svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}

/* the photo strip — one photo wide, slides sideways, snaps into place */
.detail-shots{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;background:var(--sand);
}
.detail-shots::-webkit-scrollbar{display:none}
.detail-shots[hidden]{display:none}
.detail-shots img{flex:0 0 100%;width:100%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;box-sizing:border-box;padding:8px;background:#fff;border-radius:2px}
.shot-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(var(--cream-rgb),.9);box-shadow:0 2px 10px rgba(var(--navy-rgb),.2);
  display:none;align-items:center;justify-content:center;z-index:2;
}
.shot-arrow svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shot-arrow[hidden]{display:none!important}
/* a row of small preview pictures under the main photo, one for every
   photo in the strip above — press one to jump straight to it */
.detail-dots{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:12px var(--pad) 0}
.detail-dots::-webkit-scrollbar{display:none}
.detail-dots[hidden]{display:none}
.thumb{
  width:60px;height:44px;flex:0 0 auto;object-fit:cover;border-radius:3px;cursor:pointer;
  opacity:.55;transition:opacity .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;
  box-sizing:border-box;padding:3px;background:#fff;
}
.thumb.on,.thumb:hover{opacity:1}
.thumb.on{box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--gold)}

/* Photos and the map take the same spot; the tabs below the strip pick
   which one is showing. */
.detail-map{aspect-ratio:4/3;background:var(--sand)}
/* The walk-through film sits in the same box the photographs use. It was
   shot on a phone, standing up, so it is taller than it is wide: it is fitted
   whole inside the box on black rather than cropped, which would cut the
   ceiling and the floor out of every room. */
.detail-video{aspect-ratio:4/3;background:#000}
.detail-video video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.detail-video[hidden]{display:none!important}
.detail-map[hidden]{display:none}
.detail-map iframe{width:100%;height:100%;border:0;display:block}
.detail-map .d-where{padding:8px 0 0}

.detail-tabs{display:flex;gap:8px;justify-content:center;padding:14px 0 0}
.d-tab{
  font:inherit;font-size:12.5px;letter-spacing:.3px;color:var(--soft);
  background:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;
  padding:7px 18px;-webkit-tap-highlight-color:transparent;
}
.d-tab.on{color:var(--ink);border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}
.d-tab[hidden]{display:none}

.detail-body{padding:18px var(--pad) calc(86px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}
.d-tag{display:inline-block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:4px 10px;border-radius:2px}
.d-tag-sold{color:#fff;background:#B4483C;border-color:#B4483C}
.d-title{font-family:var(--serif);font-weight:400;font-size:clamp(26px,7vw,34px);line-height:1.2;margin:14px 0 2px}
.d-city{font-size:13px;color:var(--soft);letter-spacing:.3px;margin:0 0 16px}
.d-price{font-family:var(--serif);font-size:32px;margin:0}
.d-price span{font-family:var(--sans);font-size:13px;color:var(--soft)}
.d-alt{font-size:13px;color:var(--soft);margin:4px 0 0}
.d-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 0}
.d-facts li{font-size:12.5px;color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.d-note{font-size:14.5px;line-height:1.65;color:var(--ink);margin:20px 0 0}
.d-where{font-size:12px;color:var(--soft);margin:0;text-align:center}
.d-ask{
  display:block;text-align:center;margin:var(--s6) 0 0;
  background:var(--gold);color:var(--ink);border-radius:2px;
  padding:var(--s4) var(--s5);font-size:13.5px;letter-spacing:.5px;
}
.d-ask:active{background:var(--gold-press)}

/* the two property-to-property jump buttons — phone: two short pills pinned
   to the bottom corners of the screen, above the home-bar area, since a phone
   popup has no open space at its sides to float over. Evan, 2026-09-18: they
   used to run half the screen wide each and sat on top of the gold "ask about
   this flat" button, so they are now short enough to leave the middle of the
   row clear, and the text above them ends high enough that nothing scrolls
   underneath them. */
.jump{
  position:absolute;z-index:4;border:0;cursor:pointer;font:inherit;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(var(--navy-rgb),.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:96px;padding:13px 10px;border-radius:999px;
}
.jump[hidden]{display:none!important}
.jump.prev{left:12px}
.jump.next{right:12px;flex-direction:row-reverse}
.jump svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jump img{display:none}
.jump-txt{display:none}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--pad:48px;--bar-h:92px}
  /* Evan, 23 Sep: the white bar on a computer is a quarter shorter too,
     122 to 92, with the logo and the shrunk scrolling bar scaled to match. */
  .rail{margin-top:14px}
  .bar.condensed .rail{margin-top:12px}
  .nav{height:58px}
  .bar.condensed .nav{height:42px}
  .mark{width:78px;height:78px}
  .mark-img{height:54px}
  .bar.condensed .mark{width:58px;height:58px}
  .bar.condensed .mark-img{height:40px}
  body{font-size:16px}
  .burger{display:none}
  /* logo left, menu centred, language buttons right — the demo's own
     layout, with the demo's own font/size/colour/hover on the menu words */
  .nav-desk{display:flex}
  .lang-switch{display:inline-flex}

  /* Desktop: same two-part shape as the phone — the picture stays a band of
     its own across the top, and a solid dark-blue panel with the title,
     "Spain", and the button sits below it, in the normal flow of the page.
     The picture gets a wider ratio than the phone so the whole scene still
     fits without the band going very tall. */
  /* The band keeps its wide 2.35-to-1 shape, but never grows so tall that
     the telephone number falls off the bottom of the window. Evan,
     2026-09-18: on a desktop the number has to be there to click without
     scrolling. The 300 is everything that sits between the bottom of the
     band and the bottom of the window, measured on the running page:
     10 seam + 38 above the title + 78 title + 8 + 48 "Spain" + 18
     + 60 button + 40 of clear space under it. Whatever height is left is
     the band's, so the number is always in view on any desktop window
     (392 since 23 Sep: the same 300 plus the 92 cream strip the bar now
     sits on above the band),
     and on a tall screen the band keeps exactly the shape it was drawn in. */
  .hero-pic{aspect-ratio:auto;height:clamp(320px,calc(100vh - 392px),calc(100vw / 2.35))}
  .hero-acts{display:none}
  .hero-mid{padding:38px var(--pad) 70px}
  .hero-mid h1{font-size:clamp(50px,5.2vw,74px);margin-bottom:8px}
  .hero-mid h1 br{display:none}
  .hero-sub{font-size:30px;margin-bottom:18px}
  .hero-call{font-size:19px;padding:14px 28px;gap:12px}
  .hero-call svg{width:20px;height:20px}

  .block{padding:84px var(--pad)}
  #properties{padding-top:36px}
  .pills{gap:12px;margin-bottom:40px}
  .hero-mid .pills{margin-bottom:10px}
  .pill{font-size:14px;padding:10px 20px}
  .why{padding:var(--s9) var(--pad)}
  .why-grid{grid-template-columns:repeat(3,1fr);gap:var(--s8);max-width:960px;margin:0 auto}
  .why-grid li:last-child{grid-column:auto}
  .why-grid svg{width:46px;height:46px}
  .why-grid h3{font-size:16px}
  .why-grid p{font-size:13px}

  /* laid out side by side rather than in fixed columns, so a row that is not
     full — five properties means two on the second row — sits in the middle
     instead of hugging the left edge. */
  .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;max-width:1280px;margin:0 auto}
  .card{flex:0 1 calc((100% - 52px)/3);min-width:0;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
  /* the navy part fills the card to the bottom, so every card in a row ends
     level, and the price line sits on the same line across the row */
  .card-img{flex:none}
  .card-body{flex:1;display:flex;flex-direction:column}
  .card-foot{margin-top:auto}
  .card:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),1);box-shadow:0 12px 28px rgba(var(--ink-rgb),.12)}
  .btn-detail:hover{background:var(--ink);color:var(--cream)}

  .sell-grid{grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
  .steps{gap:var(--s7)}
  .steps h4{font-size:16px}
  .valuation{padding:var(--s7)}
  .val-go{transition:background .2s}
  .val-go:hover{background:var(--gold-press)}

  /* four columns need real room, so the About band opens out wider than
     the 620px reading width the paragraph above it keeps. */
  .about{max-width:920px}
  .about-grid{grid-template-columns:repeat(4,1fr);gap:var(--s7)}
  .lead{font-size:24px;margin-bottom:var(--s8)}

  /* the property popup becomes a panel in the middle of a dimmed page */
  .detail-panel{
    inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(840px,calc(100vw - 80px));max-height:88vh;
    border-radius:4px;box-shadow:0 30px 80px rgba(var(--navy-rgb),.35);
  }
  .detail-x{position:absolute;top:14px;right:14px}
  .detail-shots img{aspect-ratio:16/9}
  .detail-map{aspect-ratio:16/9}
  .detail-video{aspect-ratio:16/9}
  .shot-arrow{display:flex}
  .shot-arrow.prev{left:14px}
  .shot-arrow.next{right:14px}
  .detail-body{padding:24px 44px 52px}
  .d-ask{display:inline-block;padding:14px 34px;transition:background .2s}
  .d-ask:hover{background:var(--gold-press)}

  /* the jump buttons float beside the centered card instead of sitting in
     a bottom row — there is open, dimmed background there to float over */
  .jump{
    top:50%;bottom:auto;transform:translateY(-50%);
    width:44px;height:44px;padding:0;
    background:rgba(255,255,255,.18);
  }
  .jump.prev{left:14px}
  .jump.next{right:14px}
}

/* enough room beside the card for a small picture of the flat being
   jumped to */
@media (min-width:1365px){
  .jump{width:auto;height:auto;padding:8px 16px 8px 8px;gap:10px}
  .jump.next{padding:8px 8px 8px 16px}
  .jump.prev{left:24px}
  .jump.next{right:24px}
  .jump img{display:block;width:60px;height:46px;border-radius:3px;object-fit:cover;flex:0 0 auto}
}

/* enough room to also show the flat's name and town */
@media (min-width:1500px){
  .jump-txt{display:flex;flex-direction:column;line-height:1.3;max-width:120px}
  .jump-txt b{font-size:12.5px;font-weight:600}
  .jump-txt i{font-size:11px;font-style:normal;opacity:.75}
  .jump.next .jump-txt{text-align:right}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-vid{display:none}
  .hero-pic{background:var(--navy) url(assets/video/hero-poster.jpg) center/cover}
}

/* ==========================================================================
   The "Other services" page (services.html).
   It carries the same top bar, the same fonts and the same colours as the
   front page. The headings, the short gold line, the four-box grid and the
   bottom panel are the front page's own and are not restated here.

   Since 23 Sep it wears the "private bank stationery" of the front page's
   lower half; the shared rules are in that block at the end of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The opening block. It stands where the moving water stands
   on the front page, so it needs the same gap above it for the floating bar
   and the mark that tells the bar to turn its letters white. The Asturias
   photograph sits behind it with the deep blue laid over the top: enough blue
   that white writing stays easy to read, little enough that the buildings and
   the water still show through.
   -------------------------------------------------------------------------- */
.svc-top{
  position:relative;margin-top:var(--bar-h);overflow:hidden;
  background:var(--navy);
  color:#fff;text-align:center;padding:56px var(--pad) 64px;
}
.svc-top::before{
  content:"";position:absolute;inset:0;
  background:url(assets/video/hero-poster.jpg) center 58%/cover no-repeat;
}
.svc-top::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(var(--navy-rgb),.90) 0%,
    rgba(var(--navy-rgb),.76) 42%,
    rgba(var(--navy-rgb),.93) 100%);
}
/* the writing has to sit on top of both of those */
.svc-top > *{position:relative;z-index:1}

.svc-badge{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--gold-lift);
  margin:0 0 var(--s4);
}
.svc-top h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,9.5vw,52px);
  line-height:1.06;margin:0 0 var(--s4);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.svc-top .svc-sub{
  font-family:var(--sans);font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.88);margin:0 auto var(--s6);max-width:560px;
}
/* Same gold pill as the number on the front page, so a visitor meets one
   button shape across the whole site rather than two. */
.svc-top .hero-call{margin-bottom:0}



/* PROPERTY CARDS in deep blue — Evan chose this on 2026-09-23 (look B of
   four): the lower half of every card is deep blue, ivory words, gold price,
   gold-edged button; the photo keeps its white mat. */
.card-body{background:linear-gradient(180deg,var(--navy-mid),var(--navy));color:var(--cream)}
.card-title{color:var(--cream)}
.card-city,
.card-facts{color:rgba(var(--cream-rgb),.72)}
.card-foot{border-top-color:rgba(var(--gold-rgb),.35)}
.price{color:var(--gold-lift)}
.price span{color:rgba(var(--cream-rgb),.6)}
.btn-detail{border-color:rgba(var(--gold-rgb),.7);color:var(--cream)}
.btn-detail:active{background:var(--gold);color:var(--navy)}
@media (hover:hover){.btn-detail:hover{background:var(--gold);color:var(--navy)}}

/* THE OPEN PROPERTY in the same deep blue as the cards (Evan, 23 Sep): the
   photos keep their white mat, everything under them — the small pictures,
   the Photos / Map buttons and the words — sits on the navy of the card the
   visitor pressed. */
.detail-panel{background:linear-gradient(180deg,var(--navy-mid),var(--navy));color:var(--cream)}
.detail-gal{background:#fff}
.detail-dots{padding-bottom:2px}
.thumb.on{box-shadow:0 0 0 2px var(--navy-mid),0 0 0 3px var(--gold)}
.d-tab{color:rgba(var(--cream-rgb),.72);border-color:rgba(var(--gold-rgb),.35)}
.d-tab.on{color:var(--cream);border-color:var(--gold);background:rgba(var(--gold-rgb),.16)}
.d-tag{color:var(--gold-lift);border-color:rgba(var(--gold-rgb),.5)}
.d-title{color:var(--cream)}
.d-city,.d-alt,.d-price span{color:rgba(var(--cream-rgb),.72)}
.d-price{color:var(--gold-lift)}
.d-facts li{color:rgba(var(--cream-rgb),.85);background:rgba(var(--cream-rgb),.05);border-color:rgba(var(--gold-rgb),.35)}
.d-note{color:rgba(var(--cream-rgb),.9);border-top:1px solid rgba(var(--gold-rgb),.35);padding-top:20px}
.d-where{color:rgba(var(--cream-rgb),.6)}
.detail-map .d-where{color:var(--soft)}
.jump{box-shadow:0 0 0 1px rgba(var(--gold-rgb),.55),0 6px 18px rgba(0,0,0,.25)}


/* LOWER FRONT PAGE — "private bank stationery", Evan chose it on 23 Sep
   (look C, B taken to a premium finish): engraved navy bands with double
   gold edges, roman numerals over headings, ivory letterhead form, ledger
   About, pull-quote Invest, hairline-parted "why" row. */

/* Words on deep blue — shared by B and C. */
:is(#sell,#invest,.svc-net){color:var(--cream)}
:is(#sell,#invest,.svc-net) :is(.head,.lead,.steps h4){color:var(--cream)}
:is(#sell,#invest) .steps p{color:rgba(var(--cream-rgb),.72)}
:is(#sell,#invest) .step-n{color:var(--gold-lift)}

/* C — private bank stationery. */
html{
  --ivory:#FBF8F1;
  --engrave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18'%3E%3Cg fill='none' stroke='%23C4A362' stroke-width='.7' stroke-opacity='.075'%3E%3Cpath d='M0 9C15 0 15 0 30 9S45 18 60 9 75 0 90 9 105 18 120 9'/%3E%3Cpath d='M0 9C15 18 15 18 30 9S45 0 60 9 75 18 90 9 105 0 120 9'/%3E%3C/g%3E%3C/svg%3E");
  --double:3px double #B39457;
}
/* the navy bands: lit from above, engraved like a banknote, double gold edges */
:is(#sell,#invest,.svc-net),
footer{
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(var(--gold-rgb),.09),transparent 70%),
    var(--engrave),
    linear-gradient(180deg,var(--navy-mid),var(--navy) 70%);
  border-top:var(--double);border-bottom:var(--double);
}
footer{border-bottom:0}
#sell{padding-top:88px;padding-bottom:96px}
#about{padding-top:88px;padding-bottom:88px}
#invest{padding-top:88px;padding-bottom:96px}
footer{padding-top:88px}

/* headings: larger, with a small gold roman numeral between two hairlines above */
:is(#sell,#about,#invest,#contact,.svc-help,.svc-net,.svc-why) .head{font-size:clamp(36px,9.5vw,52px);letter-spacing:.3px;line-height:1.05}
:is(#sell,#about,#invest,#contact,.svc-help,.svc-net,.svc-why) .head::before{
  display:block;width:max-content;margin:0 auto 18px;padding:0 36px;
  font:500 13px/1 var(--sans);letter-spacing:4px;color:var(--gold);
  background:linear-gradient(currentColor,currentColor) left center/24px 1px no-repeat,
             linear-gradient(currentColor,currentColor) right center/24px 1px no-repeat;
}
#sell .head::before{content:"I"}
#about .head::before{content:"II"}
#invest .head::before{content:"III"}
#contact .head::before{content:"IV"}
:is(#sell,#invest,#contact,.svc-net) .head::before{color:var(--gold-lift)}
.rule{width:64px;height:4px;background:none;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);opacity:.75}
:is(#sell,#about,#invest,.svc-help,.svc-net,.svc-why) .lead{font-size:21px;line-height:1.55}

/* Sell: the three steps as numbered lines of a letter, not circles */
.steps{gap:0}
.steps li{grid-template-columns:52px 1fr;padding:var(--s5) 0;border-top:1px solid rgba(var(--gold-rgb),.22)}
.steps li:last-child{border-bottom:1px solid rgba(var(--gold-rgb),.22)}
.step-n{width:auto;height:auto;border:0;border-radius:0;justify-content:flex-start;align-items:flex-start;
  font-size:0;line-height:1;padding-top:2px}
.step-n::before{font:400 30px/1 var(--serif);color:var(--gold-lift);letter-spacing:.5px}
.steps li:nth-child(1) .step-n::before{content:"I"}
.steps li:nth-child(2) .step-n::before{content:"II"}
.steps li:nth-child(3) .step-n::before{content:"III"}
.steps h4{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.25;margin:0 0 var(--s2);letter-spacing:.2px}
.steps p{font-size:14px;line-height:1.65}

/* the form as ivory letterhead: double gold frame, written-on lines, navy seal button */
#sell .valuation{
  position:relative;color:var(--ink);background:var(--ivory);border:1px solid rgba(var(--gold-rgb),.7);border-radius:2px;
  outline:1px solid rgba(var(--gold-rgb),.45);outline-offset:-9px;
  padding:var(--s7) var(--s6) var(--s6);
  box-shadow:0 2px 0 rgba(255,255,255,.04),0 40px 70px -24px rgba(0,0,0,.6),0 12px 24px -12px rgba(0,0,0,.35);
}
.valuation h3{font-size:34px;text-align:center;line-height:1.1}
.valuation h3::after{content:"";display:block;width:40px;height:1px;background:var(--gold);margin:var(--s4) auto 0}
.val-sub{text-align:center;font:400 17px/1.4 var(--serif);color:var(--soft);margin:var(--s3) 0 var(--s7)}
.valuation label{font-size:10.5px;text-transform:uppercase;letter-spacing:1.8px;color:var(--soft);margin-bottom:var(--s6)}
.valuation label span{opacity:1}
.valuation label.val-ok{text-transform:none;letter-spacing:.2px;font-size:12.5px}
.valuation :is(input[type=text],input[type=tel],input[type=email]){
  background:transparent;border:0;border-bottom:1px solid rgba(var(--ink-rgb),.28);border-radius:0;
  padding:var(--s2) 0 var(--s2);margin-top:var(--s1);font-family:var(--serif);font-size:20px;letter-spacing:.2px;
  caret-color:var(--gold-press);transition:border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.valuation input:focus{outline:0;background:transparent;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.valuation input.bad{background:transparent;border-bottom-color:#B4483C;box-shadow:0 1px 0 #B4483C}
.valuation input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--ivory) inset}
.val-ok input{background:transparent;border-color:var(--gold-press)}
.val-go{
  background:var(--navy);color:var(--gold-lift);border:1px solid var(--navy);border-radius:1px;
  text-transform:uppercase;letter-spacing:2.4px;font-size:12px;font-weight:500;padding:18px var(--s5);margin-top:var(--s6);
  box-shadow:inset 0 0 0 3px var(--navy),inset 0 0 0 4px rgba(var(--gold-rgb),.55);
  transition:background .35s cubic-bezier(.22,1,.36,1),color .35s cubic-bezier(.22,1,.36,1);
}
.val-go:active{background:var(--gold);color:var(--navy);box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(var(--navy-rgb),.5)}
@media (hover:hover){
  .val-go:hover{background:var(--gold);color:var(--navy);box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(var(--navy-rgb),.5)}
}
.val-go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.val-note{font-size:12.5px;margin-top:var(--s5)}
.valuation a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(var(--gold-rgb),.8)}

/* About: a ledger — gold label on the left, the fact on the right, ruled lines between */
#about .lead{font-size:23px;max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:var(--s8)}
.about{max-width:760px}
.about-grid{grid-template-columns:1fr;gap:0;border-top:3px double #CDB27C;border-bottom:3px double #CDB27C}
.about-grid > div{display:grid;grid-template-columns:118px 1fr;gap:var(--s4);padding:var(--s5) var(--s1);align-items:baseline}
.about-grid > div + div{border-top:1px solid rgba(var(--gold-rgb),.3)}
.about-grid h4{margin:0;font-size:10.5px;letter-spacing:2px;color:var(--gold-press)}
.about-grid p{font:400 18px/1.45 var(--serif);color:var(--ink)}

/* Invest: one statement, set like a quotation between two double rules */
#invest .about{max-width:820px;padding:var(--s6) 0;border-top:3px double #8C7A55;border-bottom:3px double #8C7A55}
#invest .lead{font-size:clamp(24px,6.4vw,34px);line-height:1.4;margin:0;font-weight:400;letter-spacing:.1px}

/* Why: three plain columns parted by gold hairlines, serif titles */
.why{background:var(--cream);padding:var(--s8) var(--pad) 88px}
.why-grid{grid-template-columns:1fr;gap:0;max-width:1000px;margin:0 auto}
.why-grid li{padding:var(--s6) var(--s4)}
.why-grid li + li{border-top:1px solid rgba(var(--gold-rgb),.35)}
.why-grid svg{width:44px;height:44px;stroke:var(--gold-press);stroke-width:1}
.why-grid h3{font:400 24px/1.2 var(--serif);letter-spacing:.2px;margin-bottom:var(--s3)}
.why-grid p{font-size:14px;max-width:34ch;margin:0 auto}

/* Contact */
footer .c-line:not(.small){font-size:28px}
footer .c-line a{border-bottom-color:rgba(var(--gold-rgb),.55)}
::selection{background:rgba(var(--gold-rgb),.35);color:inherit}

@media (min-width:900px){
  #sell{padding-top:120px;padding-bottom:128px}
  #about,#invest{padding-top:120px;padding-bottom:120px}
  footer{padding-top:112px}
  .sell-grid{grid-template-columns:1fr 1fr;gap:96px;max-width:1080px;align-items:center}
  #sell .lead{margin-bottom:var(--s8)}
  .steps h4{font-size:24px}
  #sell .valuation{padding:56px 48px 44px}
  .about-grid{grid-template-columns:1fr 1fr;column-gap:56px}
  .about-grid > div{grid-template-columns:1fr;gap:var(--s2);padding:var(--s6) 0;align-items:start;align-content:start}
  .about-grid > div:nth-child(2){border-top:0}
  .about-grid p{font-size:20px}
  #invest .about{padding:var(--s7) 0}
  .why{padding:112px var(--pad) 120px}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid li:last-child{grid-column:auto}
  .why-grid li{padding:var(--s4) var(--s7)}
  .why-grid li + li{border-top:0;border-left:1px solid rgba(var(--gold-rgb),.35)}
  .why-grid h3{font-size:26px}
}


/* OTHER SERVICES PAGE in the same stationery (23 Sep, Evan: "do a similar
   design"). Page order: navy opening, I ivory list on cream, II navy band
   with two framed plates, III ledger on cream, IV navy contact. */
.svc-top{border-bottom:var(--double)}
.svc-help .head::before{content:"I"}
.svc-net .head::before{content:"II"}
.svc-why .head::before{content:"III"}
.svc-help,.svc-why{background:var(--cream)}
.svc-help{padding-top:88px;padding-bottom:96px}
.svc-why{padding-top:88px;padding-bottom:96px}
.svc-help .lead,.svc-net .lead{max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:var(--s8)}

/* the gold line drawings: one weight, one colour, never filled */
.svc-ico{fill:none;stroke:var(--gold-press);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;display:block}

/* I — the six services. Evan, 23 Sep: the ivory sheet on cream was light on
   light, washed out. Three replacements to choose from with ?look=1:
   A (this one, the default) one navy engraved sheet in a double gold frame;
   B six separate navy tiles; C no box, each line opened by a navy seal. */
.svc-list{
  list-style:none;margin:0 auto;max-width:620px;
  background:
    radial-gradient(90% 50% at 50% 0%,rgba(var(--gold-rgb),.10),transparent 70%),
    var(--engrave),
    linear-gradient(180deg,var(--navy-mid),var(--navy) 75%);
  border:1px solid rgba(var(--gold-rgb),.75);border-radius:2px;
  outline:1px solid rgba(var(--gold-rgb),.45);outline-offset:-9px;
  padding:var(--s4) var(--s5);
  box-shadow:0 40px 70px -28px rgba(var(--navy-rgb),.6),0 12px 24px -12px rgba(var(--navy-rgb),.35);
}
.svc-list li{display:grid;grid-template-columns:44px 1fr 34px;gap:var(--s3);align-items:start;padding:var(--s5) 0}
.svc-list li + li{border-top:1px solid rgba(var(--gold-rgb),.25)}
.svc-n{font:400 26px/1 var(--serif);color:var(--gold-lift);letter-spacing:.5px;padding-top:2px}
.svc-list h3{font:500 23px/1.2 var(--serif);color:var(--cream);letter-spacing:.2px;margin:0 0 var(--s2)}
.svc-list p{margin:0;font-size:14px;line-height:1.65;color:rgba(var(--cream-rgb),.74)}
.svc-list .svc-ico{width:34px;height:34px;margin-top:2px;stroke:var(--gold-lift)}

/* II — two ivory plates in double gold frames on the engraved navy */
.svc-net{padding:88px var(--pad) 96px;text-align:center}
.svc-plates{display:grid;grid-template-columns:1fr;gap:var(--s6);max-width:620px;margin:0 auto}
.svc-plate{
  color:var(--ink);background:var(--ivory);border:1px solid rgba(var(--gold-rgb),.7);border-radius:2px;
  outline:1px solid rgba(var(--gold-rgb),.45);outline-offset:-9px;
  padding:var(--s7) var(--s6) var(--s6);text-align:center;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.6),0 12px 24px -12px rgba(0,0,0,.35);
}
.svc-plate .svc-ico{width:40px;height:40px;margin:0 auto var(--s4)}
.svc-plate h3{font:500 26px/1.15 var(--serif);margin:0;letter-spacing:.2px}
.svc-plate h3::after{content:"";display:block;width:40px;height:1px;background:var(--gold);margin:var(--s4) auto}
.svc-plate .where{font-size:10.5px;text-transform:uppercase;letter-spacing:1.8px;line-height:1.7;color:var(--gold-press);font-weight:600;margin:0 0 var(--s3)}
.svc-plate p{margin:0;font-size:14px;line-height:1.65;color:var(--soft)}

/* IV — the invitation above the number and email at the foot of this page */
.svc-invite{
  font-family:var(--serif);font-size:19px;line-height:1.5;
  max-width:520px;margin:0 auto var(--s7);color:rgba(var(--cream-rgb),.88);
}

/* III — the "why" ledger stays one column with the label on the left */
.svc-why .lead{margin-bottom:var(--s8)}

@media (min-width:900px){
  .svc-help,.svc-why{padding-top:120px;padding-bottom:120px}
  .svc-net{padding:120px var(--pad)}
  .svc-list{max-width:1040px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;padding:var(--s5) 56px}
  .svc-list li{grid-template-columns:52px 1fr 38px;gap:var(--s4);padding:var(--s6) 0}
  .svc-list li:nth-child(2){border-top:0}
  .svc-n{font-size:30px}
  .svc-list h3{font-size:25px}
  .svc-list p{font-size:14.5px}
  .svc-list .svc-ico{width:38px;height:38px}
  .svc-plates{grid-template-columns:1fr 1fr;gap:56px;max-width:1000px}
  .svc-plate{padding:56px 48px 44px}
  .svc-why .about-grid{grid-template-columns:1fr}
  .svc-why .about-grid > div{grid-template-columns:180px 1fr;gap:var(--s5);padding:var(--s5) var(--s1);align-items:baseline}
  .svc-why .about-grid > div:nth-child(2){border-top:1px solid rgba(var(--gold-rgb),.3)}
}

/* The six services — Evan chose look C on 23 Sep: no box, each line opened
   by a navy seal with a gold numeral (overrides the navy sheet above). */
.svc-list{background:none;border:0;outline:0;box-shadow:none;padding:0;
  border-top:3px double #CDB27C;border-bottom:3px double #CDB27C;border-radius:0}
.svc-list li{grid-template-columns:58px 1fr 34px;gap:var(--s4);align-items:center}
.svc-list li + li{border-top:1px solid rgba(var(--gold-rgb),.35)}
.svc-n{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:radial-gradient(circle at 50% 30%,var(--navy-mid),var(--navy));
  box-shadow:inset 0 0 0 3px var(--navy),inset 0 0 0 4px rgba(var(--gold-rgb),.75),0 8px 16px -8px rgba(var(--navy-rgb),.6);
  font-size:21px;color:var(--gold-lift)}
.svc-list h3{color:var(--navy);font-weight:600}
.svc-list p{color:rgba(var(--ink-rgb),.8)}
.svc-list .svc-ico{stroke:var(--navy);margin-top:0}

@media (min-width:900px){
  .svc-list{padding:0}
  .svc-list li:nth-child(2){border-top:0}
  .svc-list li{grid-template-columns:64px 1fr 38px}
  .svc-n{width:64px;height:64px;font-size:23px}
}


/* THE OPEN PROPERTY — Evan chose look D on 23 Sep: a white page; the first
   thing under the photos is a navy strip edge to edge with a small gold
   drawing, the figure and its word for size, bedrooms, bathrooms and floor.
   Title and price below on white; a gold Ask button only as wide as its words. */
/* the figure and its words, in the plain (live) version: "52 m²" */
.d-facts li b{font-weight:600;margin-right:.3em}
.d-kind{display:inline-block;margin-left:10px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:inherit;opacity:.75}

/* shared by all four: a light page, dark words, gold kept for rules */
.detail-panel{background:#fff;color:var(--ink)}
.thumb.on{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--gold)}
.d-tab{color:var(--soft);border-color:rgba(var(--navy-rgb),.2);background:none}
.d-tab.on{color:#fff;background:var(--navy);border-color:var(--navy)}
.d-tag{color:#8a6c30;border-color:rgba(var(--gold-rgb),.7);background:none}
.d-kind{color:var(--soft);opacity:1}
.d-title{color:var(--navy)}
:is(.d-city,.d-alt,.d-price span,.d-where){color:var(--soft)}
.d-price{color:var(--navy)}
.d-note{color:var(--ink);border-top:0;padding-top:0}
.d-facts{gap:0}
.d-facts li{background:none;border:0;border-radius:0;padding:0;color:var(--ink);font-size:inherit}
.d-facts b{margin:0;font-weight:inherit;font-variant-numeric:lining-nums}
.d-price,.d-facts{font-variant-numeric:lining-nums}
/* the Ask button: gold, only as wide as its words, a navy hairline inside the edge */
.d-ask{align-self:center;display:inline-block;margin-top:28px;padding:15px 30px;
  background:var(--gold);color:var(--navy);border-radius:1px;
  font-size:11.5px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;
  box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(var(--navy-rgb),.45),0 10px 22px -12px rgba(var(--navy-rgb),.55);
  transition:background .3s cubic-bezier(.22,1,.36,1)}
.d-ask:active{background:var(--gold-press);box-shadow:inset 0 0 0 3px var(--gold-press),inset 0 0 0 4px rgba(var(--navy-rgb),.45)}
/* next / previous: solid navy with a gold ring on the phone … */
.jump{background:var(--navy);color:#fff;box-shadow:0 0 0 1px var(--gold),0 8px 20px rgba(0,0,0,.3)}
@media (min-width:900px){
  /* … and solid ivory on the dimmed page on a computer, so they never vanish */
  .jump{background:var(--ivory);color:var(--navy);box-shadow:0 0 0 1px var(--gold),0 10px 26px rgba(0,0,0,.35)}
  .jump-txt i{color:var(--soft);opacity:1}
  .jump:hover{background:#fff}
}

/* D — ICON STRIP. White page; the first thing under the photos is a navy
   strip edge to edge: a small gold drawing, the figure in ivory, the word
   under it. Then the title and price below on white. */
.detail-body{display:flex;flex-direction:column}
.d-facts{order:-1;margin:4px calc(-1*var(--pad)) 20px;padding:14px var(--pad);
  background:linear-gradient(180deg,var(--navy-mid),var(--navy));border-bottom:2px solid var(--gold);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.d-facts li{display:grid;grid-template-columns:auto;justify-items:center;text-align:center;color:var(--cream);padding:0 4px}
.d-facts li::before{content:"";width:22px;height:22px;margin-bottom:6px;background:var(--gold-lift);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.d-facts b{font:600 23px/1 var(--serif);font-variant-numeric:lining-nums}
.d-facts span{margin-top:3px;font-size:11px;line-height:1.25;color:rgba(var(--cream-rgb),.72);letter-spacing:.4px}
.d-facts [data-k=size]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17'/%3E%3Cpath d='M7 17l10-10M13 7h4v4M11 17H7v-4'/%3E%3C/svg%3E")}
.d-facts [data-k=bed]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V6M3 14h18v4M21 14v-2a3 3 0 0 0-3-3h-7v5'/%3E%3Ccircle cx='7' cy='11' r='1.8'/%3E%3C/svg%3E")}
.d-facts [data-k=bath]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5zM6 12V6a2 2 0 0 1 4 0M7 19l-1 2M17 19l1 2'/%3E%3C/svg%3E")}
.d-facts [data-k=floor]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-5h5v-5h5V5h3'/%3E%3C/svg%3E")}
.d-tag{align-self:flex-start}
.d-kind{align-self:flex-start;margin:8px 0 0}
.d-price{font-size:34px;padding-bottom:16px;border-bottom:1px solid rgba(var(--gold-rgb),.55)}
.d-note{margin-top:18px}
@media (min-width:900px){
  .d-facts{margin:6px -44px 24px;padding:18px 44px}
  .d-facts li{grid-template-columns:auto auto;column-gap:10px;justify-content:center;align-items:center;text-align:left}
  .d-facts li::before{grid-row:1/3;margin:0;width:26px;height:26px}
  .d-facts span{margin-top:2px}
  .d-ask{align-self:flex-start}
  .d-ask:hover{background:var(--gold-hover)}
}


/* THE BLOG (24 Sep): blog.html lists the articles, post.html shows one.
   Same stationery as the Other services page: navy opening, then cream with
   each article opened by the navy seal and its gold numeral. */
.sheet a:nth-of-type(7){--i:6}
.blog-list{background:var(--cream);padding-top:72px;padding-bottom:88px}
.blog-cards{list-style:none;margin:0 auto;padding:0;max-width:760px;
  border-top:3px double #CDB27C;border-bottom:3px double #CDB27C}
.blog-card + .blog-card{border-top:1px solid rgba(var(--gold-rgb),.35)}
.blog-card a{display:grid;grid-template-columns:40px 1fr 20px;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;color:inherit;text-decoration:none}
.blog-card .svc-n{width:40px;height:40px;font-size:15px}
.blog-card h3{font:600 21px/1.2 var(--serif);color:var(--navy);margin:0 0 4px}
.blog-lead{margin:0;font-size:14px;line-height:1.45;color:rgba(var(--ink-rgb),.72)}
.blog-go{font:400 20px/1 var(--serif);color:var(--gold-press);justify-self:end;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.blog-card a:hover .blog-go{transform:translateX(4px)}
.blog-card a:hover h3{color:var(--navy-mid)}

/* one article */
.post-top{padding-bottom:56px}
.post-back{display:inline-block;margin:0 0 var(--s5);font:600 11px/1 var(--sans);letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold-lift);text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid rgba(var(--gold-rgb),.6)}
.post-back::before{content:"\2190  "}
.post-top h1{max-width:760px;margin-left:auto;margin-right:auto}
.post-top .svc-sub{margin-bottom:var(--s4)}
.post-meta{margin:0;font:600 11px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-lift)}
.post-body{background:var(--cream);padding-top:56px;padding-bottom:72px}
.post-col{max-width:680px;margin:0 auto;font-size:17px;line-height:1.75;color:var(--ink)}
.post-col h2{font:600 28px/1.2 var(--serif);color:var(--navy);margin:var(--s7) 0 var(--s3)}
.post-col h2:first-child{margin-top:0}
.post-col p{margin:0 0 var(--s4)}
.post-col ul,.post-col ol{margin:0 0 var(--s5);padding-left:1.4em}
.post-col li{margin:0 0 var(--s2)}
.post-col li::marker{color:var(--gold-press)}
.post-note{margin:var(--s5) 0;padding:var(--s4) var(--s5);background:#fff;
  border-left:3px double #CDB27C;border-left-width:4px;font-size:16px;line-height:1.65;color:var(--navy)}
.post-sources{margin-top:var(--s8);padding-top:var(--s5);border-top:3px double #CDB27C}
.post-sources h2{font-size:22px;margin-top:0}
.post-sources ul{padding-left:1.1em;font-size:14px;line-height:1.6}
.post-sources a{color:var(--navy);word-break:break-word}
.post-checked{margin:var(--s4) 0 0;font:600 11px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--soft)}
.post-more{padding-top:72px;border-top:1px solid rgba(var(--gold-rgb),.35)}
.post-more .head{color:var(--navy)}

@media (min-width:900px){
  .blog-card a{grid-template-columns:48px 1fr 24px;gap:var(--s5);padding:var(--s5) 0}
  .blog-card .svc-n{width:48px;height:48px;font-size:17px}
  .blog-card h3{font-size:25px}
  .blog-lead{font-size:15px}
  .post-col{font-size:18px}
  .post-col h2{font-size:32px}
}
/* seven words in the phone menu now: on a short phone they are set a little
   tighter so the last one never runs into "Selldom · Asturias" at the foot */
@media (max-height:720px){
  .sheet a{padding:6px 0 8px;font-size:26px}
}

/* BLOG PICTURES (24 Sep): free photographs of Asturias from Wikimedia
   Commons, each credited under it as its licence asks. The article opens
   with a wide picture that straddles the navy and the ivory; the cards on
   the list carry no picture, so the titles can be read at a glance. */
.post-cover{background:linear-gradient(var(--navy) 0 50%,var(--cream) 50% 100%);padding:0 var(--s4)}
.post-cover:empty{display:none}
.post-cover-pic{max-width:1040px;margin:0 auto;padding:6px;background:#fff;border:3px double #CDB27C}
.post-cover-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-cover-pic figcaption,.post-pic figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px var(--s3);
  padding:var(--s2) 2px 0;font:500 12px/1.45 var(--sans);color:var(--soft)}
.pic-place{font:italic 500 15px/1.35 var(--serif);color:var(--navy)}
.pic-credit{color:var(--soft);text-decoration:none;font-size:11px;letter-spacing:.2px}
.pic-credit:hover{color:var(--gold-press);text-decoration:underline}
.post-cover + .post-body{padding-top:40px}
.post-pic{margin:var(--s6) 0 var(--s6);padding:5px;background:#fff;border:1px solid rgba(var(--gold-rgb),.5)}
.post-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (min-width:900px){
  .post-pic{margin-left:-60px;margin-right:-60px}
  .post-cover-pic{padding:8px}
}