/* =========================================================
   Skiathos Homes — Production Styles
========================================================= */

.sh-single-public{
  --sp-bg: var(--navy, #05080E);
  --sp-text: rgba(255,255,255,0.85);
  --sp-gold: var(--gold, #C9AE78);

  /* --- POLISH TOKENS (Consistency) --- */
  --sp-surface: rgba(255,255,255,0.03);
  --sp-border: rgba(255,255,255,0.08);
  --r-card: 6px;
  --r-btn: 4px;

  /* --- STATUS COLORS --- */
  --st-ok:  #A8C6A0;
  --st-pen: #C9AE78;
  --st-err: #e57373;
  --st-mis: #d4a373;

  background: var(--sp-bg);
  color: var(--sp-text);
  overflow-x: clip;
}

.sh-single-public .sh-sp-container{ max-width: var(--max, 1140px); margin: 0 auto; padding: 0 20px; }

/* =========================================================
   HERO
========================================================= */
.sh-single-public .sh-sp-hero.sh-hero-arch{
  min-height: 95vh;      /* fallback */
  min-height: 100svh;    /* immersive, mobile-safe */
  position: relative;
  overflow: hidden;
}

.sh-single-public .sh-sp-hero__bg.sh-hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Center the cover-crop so the middle of the photo shows (desktop + mobile). */
  background-position: center center;
  opacity: 0.68;
  filter: contrast(1.1) saturate(0.9);
  transform: none;

}
.sh-single-public .sh-hero-bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* =========================================================
   HERO LOADING STATE (LQIP)
   The hero photograph is ~844KB. It is requested 19ms after the HTML (the
   preload scanner and fetchpriority are both already working), but on mobile
   data it still takes 0.6-2s to arrive — during which the hero text has painted
   over an empty navy rectangle. .has-lqip is added server-side only when a
   ~1KB blurred micro-preview of THIS property's own photograph could be inlined
   (see sh_hero_lqip() in functions.php), so the first frame already shows the
   real colours and composition, and the full image resolves into it.

   Layering, explicitly: ::before = blurred preview (0) · img (1) · ::after =
   sheen (2). The img needs its own stacking position or the sheen would sit
   under it.
========================================================= */
/* .sh-hero-lqip / .sh-hero-sheen are real elements, NOT ::before/::after.
   Both pseudo-elements on .sh-hero-bg are already used by the desktop editorial
   spread — ::before is the left-edge dissolve into the data panel (width
   clamp(88px,15%,220px)) and ::after is the bottom fade into the section. An
   earlier draft of this feature used ::before and was silently clipped to 15%
   of the column; that is why these are elements. */
.sh-single-public .sh-hero-lqip {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* scale(1.12) pushes the soft blurred edge outside the frame, so the crop
     never shows a pale border where the blur runs out of pixels. */
  filter: blur(28px) saturate(1.15);
  transform: scale(1.12);
  transition: opacity .8s var(--ease);
  pointer-events: none;
}

/* Faded out rather than simply left underneath. The base .sh-hero-bg rule sets
   opacity:.68 on the whole group (some layouts override it back to 1), and where
   that applies the group is translucent — so a blurred copy left sitting behind
   the real photograph would blend through it and muddy the image instead of
   being hidden by it. Fading it out makes the end state identical either way. */
.sh-single-public .sh-hero-bg.is-ready .sh-hero-lqip { opacity: 0; }

.sh-single-public .sh-hero-bg.has-lqip .sh-hero-bg__img {
  position: relative;
  z-index: 1;
  opacity: 0;
  /* Fallback path: if the JS below never runs, this still reveals the image.
     Without it a failed script would leave the hero permanently blank — a far
     worse outcome than an un-animated reveal. */
  animation: shHeroReveal .9s var(--ease) 2.2s forwards;
}
.sh-single-public .sh-hero-bg.has-lqip.is-ready .sh-hero-bg__img {
  animation: none;
  opacity: 1;
  transition: opacity .9s var(--ease);
}
@keyframes shHeroReveal { to { opacity: 1; } }

/* A slow gold sheen, so the wait reads as deliberate rather than as a stall.
   z-index 1 (same as the photograph) and placed after it in source order, so it
   sits over the image but still UNDER the edge dissolve at z-index 2. */
.sh-single-public .sh-hero-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(201,174,120,.12) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: shHeroSheen 2.1s ease-in-out infinite;
  transition: opacity .5s ease;
}
.sh-single-public .sh-hero-bg.is-ready .sh-hero-sheen { opacity: 0; animation: none; }
@keyframes shHeroSheen {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}

/* REQUIRED, not a nicety. The global reduced-motion rule in sh-core.css is
   `*{animation:none!important;transition:none!important}` — it would kill both
   the reveal animation AND the .is-ready transition, stranding the image at
   opacity:0 forever. So under reduced motion the whole treatment is switched
   off and the photograph is simply shown. */
@media (prefers-reduced-motion: reduce) {
  .sh-single-public .sh-hero-bg.has-lqip .sh-hero-bg__img { opacity: 1; }
  .sh-single-public .sh-hero-lqip,
  .sh-single-public .sh-hero-sheen { display: none; }
}

/* --- CINEMATIC HERO OVERLAY (Vignette + Depth) --- */
.sh-single-public .sh-sp-hero__overlay.sh-hero-overlay {
    position: absolute;
    inset: 0;
    
    /* Καθαρίζουμε τυχόν πλέγματα/grids */
    background-image: none; 
    
    /* Refined cinematic stack (less “burnt”, more clarity) */
    background: 
        linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(5,8,14,0.72) 22%, rgba(5,8,14,0.28) 48%, transparent 70%),
        linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, transparent 28%),
        radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,0.35) 92%);
        
    mix-blend-mode: normal; 
    z-index: 1;
}
.sh-single-public .sh-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
}

.sh-single-public .sh-hero-meta{
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin-bottom: 0;
  display: inline-block;
}
.sh-hero-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sh-single-public .sh-hero-title{
  font-family: var(--font-head);
  font-size: clamp(3rem, 6.4vw, 5.8rem);
  line-height: .96;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
  max-width: 14ch;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}

/* Vision subtitle + "Ideal For" line — desktop hero only; ≤880px keeps
   both in .sh-vision-stage, so they stay hidden here */
.sh-single-public .sh-hero-vision,
.sh-single-public .sh-hero-buyer { display: none; }

.sh-hero-status-row {
  margin-top: 16px;
}

.sh-single-public .sh-hero-line{
  width: 60px;
  height: 1px;
  background: #fff;
  margin: 40px 0 30px;
  opacity: 0.5;
}

/* =========================================
   HERO TYPOGRAPHY & META (QUIET LUXURY)
========================================= */

/* --- 1. The Lock State (Elegant Text + Glowing Icon, NO Box) --- */
.sh-hero-clearance {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sh-hc-icon {
    font-size: 0.85rem;
}
.sh-hc-text {
    font-family: var(--font-body, sans-serif);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.28em; /* Πάρα πολύς "αέρας" στα γράμματα */
    font-weight: 500;
}

/* Κλειδωμένο: Χρυσό με διακριτικό βάθος (glow) */
.sh-hero-clearance.is-locked .sh-hc-icon {
    color: var(--sp-gold);
    filter: drop-shadow(0 0 10px rgba(201,174,120,0.6));
}
.sh-hero-clearance.is-locked .sh-hc-text {
    color: rgba(201,174,120, 0.9);
}

/* Ξεκλείδωτο: Απαλό, σοβαρό πράσινο */
.sh-hero-clearance.is-unlocked .sh-hc-icon {
    color: #8FE39A;
    filter: drop-shadow(0 0 10px rgba(143,227,154,0.4));
}
.sh-hero-clearance.is-unlocked .sh-hc-text {
    color: #8FE39A;
}

/* --- 2. Editorial Meta Row (Thin fonts, vertical hairlines) --- */
.sh-hero-meta-editorial {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 30px; /* Μεγάλες αποστάσεις */
    flex-wrap: wrap;
}
.sh-hme-item {
    font-family: var(--font-body, sans-serif);
    font-size: 1.3rem;  /* boutique boost: λίγο μεγαλύτερο */
    font-weight: 400;   /* boutique boost: από 300 (Light) → 400, λιγότερο "φάντασμα" */
    color: rgba(255,255,255,0.95);
    letter-spacing: 0.5px;
}
.sh-hme-item.sh-hme-type {
    color: rgba(255,255,255,0.45); /* Το "Classified" πιο ξεθωριασμένο */
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    font-weight: 500;
}
.sh-hme-item.sh-hme-price {
    font-weight: 500; /* Η τιμή = κύριο στοιχείο· λίγο πιο βαρύ για ιεραρχία */
    color: #fff;
}

/* Η Κάθετη Γραμμή (Hairline Fade) */
.sh-hme-divider {
    width: 1px;
    height: 32px; /* Ψηλή γραμμή */
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.35), transparent);
}

/* --- Mobile Tweaks --- */
@media (max-width: 768px) {
    .sh-hero-meta-editorial { gap: 18px; margin-top: 25px; }
    .sh-hme-item { font-size: 1.05rem; }
    .sh-hme-divider { height: 24px; }
    .sh-hc-text { font-size: 0.65rem; letter-spacing: 0.2em; }
    .sh-hero-clearance { gap: 10px; margin-bottom: 15px; }
}

/* --- Hero entrance — self-contained on-load cascade.
   Deliberately NOT the .sh-reveal/IO system: this is above-the-fold (the H1),
   so it must never depend on JS/observer timing. The opacity:0 base lives
   inside (prefers-reduced-motion: no-preference), so reduced-motion users —
   and anything without CSS animation — always see the hero fully visible. */
@media (prefers-reduced-motion: no-preference) {
    .sh-single-public .sh-doss-ref,
    .sh-single-public .sh-doss-status,
    .sh-single-public .sh-doss-loc,
    .sh-single-public .sh-hero-title,
    .sh-single-public .sh-hero-vision,
    .sh-single-public .sh-hero-buyer,
    .sh-single-public .sh-doss-spec {
        opacity: 0;
        animation: sh-hero-enter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .sh-single-public .sh-doss-ref,
    .sh-single-public .sh-doss-status { animation-delay: 0.06s; }
    .sh-single-public .sh-doss-loc    { animation-delay: 0.16s; }
    .sh-single-public .sh-hero-title  { animation-delay: 0.24s; }
    .sh-single-public .sh-hero-vision { animation-delay: 0.30s; }
    .sh-single-public .sh-hero-buyer  { animation-delay: 0.34s; }
    .sh-single-public .sh-doss-spec   { animation-delay: 0.40s; }
}
@keyframes sh-hero-enter {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================
   HERO — THE DOSSIER (2026)
   archival frame + gold crop-marks · ref/status header ·
   title-block "cartouche" (Specification) instead of a keys strip
   (old kicker/price/band + .sh-hero-meta-editorial CSS now inert)
========================================================= */

/* content pad — fills the hero inside the frame */
.sh-single-public .sh-hero-doss {
    position: absolute;
    inset: clamp(46px, 5vw, 82px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* archival frame + gold crop-marks */
.sh-single-public .sh-hero-frame {
    position: absolute;
    inset: clamp(22px, 2.6vw, 44px);
    border: 1px solid rgba(255,255,255,.24);
    z-index: 3;
    pointer-events: none;
}
.sh-single-public .sh-hf-c {
    position: absolute;
    width: 15px; height: 15px;
    border: 0 solid rgba(201,174,120,.75);
}
.sh-single-public .sh-hf-tl { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.sh-single-public .sh-hf-tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.sh-single-public .sh-hf-bl { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.sh-single-public .sh-hf-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* vertical rail (non-sensitive brand line — never coordinates) */
.sh-single-public .sh-hero-rail {
    position: absolute;
    right: clamp(30px, 3vw, 52px);
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 9.5px;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    z-index: 4;
}

/* header: ref + status + rule */
.sh-single-public .sh-doss-headrow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.sh-single-public .sh-doss-ref {
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sp-gold);
    line-height: 1.7;
}
.sh-single-public .sh-doss-ref small {
    display: block;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    letter-spacing: .2em;
    margin-top: 5px;
}
.sh-single-public .sh-doss-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.28);
    padding: 8px 15px;
    white-space: nowrap;
}
.sh-single-public .sh-doss-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sp-gold);
    flex-shrink: 0;
}
.sh-single-public .sh-doss-status.is-classified {
    border-color: rgba(201,174,120,.7);
    color: rgba(201,174,120,.95);
}
.sh-single-public .sh-doss-status.is-classified .sh-doss-dot {
    box-shadow: 0 0 9px rgba(201,174,120,.85);
}
.sh-single-public .sh-doss-status.is-cleared {
    border-color: rgba(143,227,154,.55);
    color: #8FE39A;
}
.sh-single-public .sh-doss-status.is-cleared .sh-doss-dot { background: #8FE39A; }
.sh-single-public .sh-doss-rule {
    height: 1px;
    background: rgba(255,255,255,.16);
    margin-top: 22px;
}

/* footer: title-block left + spec cartouche right */
.sh-single-public .sh-doss-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
}
.sh-single-public .sh-doss-loc {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    margin-bottom: 16px;
}
.sh-single-public .sh-doss-loc .ln {
    width: 30px; height: 1px;
    background: var(--sp-gold);
}

/* spec cartouche — the architectural title-block */
.sh-single-public .sh-doss-spec { min-width: 266px; }
.sh-single-public .sh-doss-spec__hd {
    font-size: 9.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    margin-bottom: 4px;
}
.sh-single-public .sh-doss-spec__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.11);
}
.sh-single-public .sh-doss-spec__row .k {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.52);
}
.sh-single-public .sh-doss-spec__row .v {
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: #fff;
}
.sh-single-public .sh-doss-spec__row.is-price .v {
    font-size: 1.5rem;
    color: var(--sp-gold);
}

/* Mobile — flow layout (pad grows with content), rail + crop-marks hidden */
@media (max-width: 880px) {
    .sh-single-public .sh-hero-rail,
    .sh-single-public .sh-hf-c { display: none; }
    .sh-single-public .sh-hero-doss {
        position: relative;
        inset: auto;
        min-height: 100svh;
        padding: clamp(72px,18vw,104px) clamp(24px,7vw,40px) clamp(44px,11vw,60px);
    }
    .sh-single-public .sh-doss-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .sh-single-public .sh-doss-spec { min-width: 0; width: 100%; }
    .sh-single-public .sh-hero-title { font-size: clamp(2.6rem, 11vw, 3.4rem); }
}

/* =========================================================
   HERO — DESKTOP EDITORIAL STACK (≥881px only)
   One focal block, bottom-left: location → title → vision
   subtitle → bare gold price. The frosted spec cartouche is
   retired on desktop (panel + rows hidden, price kept) — the
   same reduction the mobile split applies at ≤880px, so the
   markup stays shared. Mobile is intentionally left untouched.
========================================================= */
@media (min-width: 881px) {

    /* Footer: side-by-side row → single left-aligned column */
    .sh-single-public .sh-doss-foot {
        position: relative;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 26px;
    }

    /* Title — bigger, more confident on the desktop stack (mobile keeps
       the base clamp() untouched) */
    .sh-single-public .sh-hero-title {
        font-size: clamp(4.4rem, 7.2vw, 7.4rem);
        text-shadow: 0 6px 40px rgba(0,0,0,.6);
    }

    /* Vision subtitle — echoes the .sh-vision-quote voice (italic Playfair),
       with the same decorative gold quote mark used in .sh-vision-quote so
       the motif reads as one deliberate brand voice, not two treatments */
    .sh-single-public .sh-hero-vision {
        display: block;
        position: relative;
        font-family: var(--font-head);
        font-style: italic;
        font-weight: 400;
        font-size: 1.3rem;
        line-height: 1.55;
        color: rgba(255,255,255,.88);
        max-width: 50ch;
        margin: 30px 0 0;
        padding-left: 32px;
        text-shadow: 0 2px 18px rgba(0,0,0,.55);
    }
    /* Mark sits beside the text, not into the title's line-box above —
       titles can wrap to 2 lines, so nothing here reaches upward */
    .sh-single-public .sh-hero-vision::before {
        content: "\201C";
        position: absolute;
        left: -4px;
        top: -6px;
        font-family: var(--font-head);
        font-style: normal;
        font-size: 3.4rem;
        line-height: 1;
        color: var(--sp-gold);
        opacity: .5;
        pointer-events: none;
    }

    /* "Ideal For" — quiet caption between the vision line and the price,
       reusing the .sh-vision-label / .sh-vision-buyer typography from the
       stage below (same voice) but scaled down and left-aligned so it
       reads as a footnote, not a second headline */
    .sh-single-public .sh-hero-buyer {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin: 20px 0 0 32px;
    }
    .sh-single-public .sh-hero-buyer .sh-vision-label {
        font-size: .68rem;
        letter-spacing: .2em;
        color: rgba(255,255,255,.58);
    }
    .sh-single-public .sh-hero-buyer .sh-vision-buyer {
        font-size: .92rem;
        color: rgba(201,174,120,.85);
        text-shadow: none;
    }

    /* Spec cartouche → bare gold price line, closed with a thin gold rule
       as the stack's final beat */
    .sh-single-public .sh-doss-spec { min-width: 0; }
    .sh-single-public .sh-doss-spec__hd,
    .sh-single-public .sh-doss-spec__row:not(.is-price) { display: none; }
    .sh-single-public .sh-doss-spec__row.is-price {
        border-bottom: none;
        border-top: 1px solid rgba(201,174,120,.4);
        padding: 18px 0 0;
        margin-top: 6px;
    }
    .sh-single-public .sh-doss-spec__row.is-price .k { display: none; }
    .sh-single-public .sh-doss-spec__row.is-price .v {
        font-size: 1.9rem;
        letter-spacing: .03em;
        text-shadow: 0 2px 20px rgba(0,0,0,.5);
    }

    /* Soft scrim behind the whole stack (location → price) for
       legibility on bright photos; replaces the old footleft scrim */
    .sh-single-public .sh-doss-foot::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: -36px;
        right: -48px;
        bottom: -30px;
        top: -20px;
        background: radial-gradient(115% 130% at 6% 100%,
            rgba(5,8,14,0.62) 0%,
            rgba(5,8,14,0.30) 46%,
            transparent 72%);
        pointer-events: none;
    }

    /* Vision stage (unlocked variant only): the quote + "Ideal For" now live
       in the hero, so hide only the stage's CONTENT — but keep the element as
       a short strip. Its base black→transparent gradient bridges the dark hero
       into the navy page; a full display:none would kill that fade and leave a
       hard edge. Height is small enough to avoid the earlier empty-box feel.
       The parent rule targets both classes (.sh-vision-stage.sh-vision-stage
       --open, specificity 0,3,0) so it out-specifies the later base
       `.sh-vision-stage{min-height;padding;display:flex}` regardless of order. */
    .sh-single-public .sh-vision-stage--open .sh-vision-quote,
    .sh-single-public .sh-vision-stage--open .sh-vision-connector,
    .sh-single-public .sh-vision-stage--open .sh-vision-meta-block { display: none; }
    .sh-single-public .sh-vision-stage.sh-vision-stage--open {
        min-height: 0;
        padding: 0;
        height: clamp(120px, 15vh, 180px);
    }
}



/* .sh-hero-class is a desktop-only element (styled inside the block below);
   hidden by default so ≤880px is byte-for-byte unchanged. */
.sh-single-public .sh-hero-class { display: none; }

/* =========================================================
   HERO — EDITORIAL SPREAD  (≥881px · 2026-08-29, rev.5)
   Auction-house spread: an ink type-panel on the LEFT on the
   same ground as the page, the photo at full strength on the
   RIGHT. The photo dissolves into the page at its FOOT and into
   the panel at its LEFT edge — no hard seams either side. Panel
   opens with property type + circulation tier; then title +
   vision; then a "Specification" title-block (gold heading)
   with the fact rows and the gold price. Desktop only — the
   ≤880px split and landscape fallback are untouched.
   Rollback: delete this block + the `.sh-hero-class` rule above
   + the `.sh-hero-class` markup in single-property.php. The
   frame/rail div removal and the !$is_public wrap on
   .sh-doss-status revert independently.
========================================================= */
@media (min-width: 881px) {

    .sh-single-public .sh-sp-hero.sh-hero-arch {
        min-height: 84svh;
        display: grid;
        grid-template-columns: minmax(388px, 31rem) 1fr;
        align-items: stretch;
    }

    /* ---- right column: the photograph ----
       Image out of flow so the panel alone sets the row height
       (min 84svh, taller if the panel needs it); the photo fills
       whatever that is. No inner scrollbar. */
    .sh-single-public .sh-sp-hero__bg.sh-hero-bg {
        position: relative;
        inset: auto;
        grid-column: 2;
        grid-row: 1;
        opacity: 1;
        filter: none;
        animation: none;
        overflow: hidden;
    }
    .sh-single-public .sh-hero-bg__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* slim top scrim for nav legibility — photo column only */
    .sh-single-public .sh-sp-hero__overlay.sh-hero-overlay {
        display: block;
        grid-column: 2;
        grid-row: 1;
        background: linear-gradient(to bottom,
            rgba(4,7,12,.62) 0%, rgba(4,7,12,.16) 15%, transparent 32%);
    }
    /* foot: melt the photo into the page bg so the next section
       (usually the gallery) doesn't butt in photo-to-photo */
    .sh-single-public .sh-sp-hero__bg.sh-hero-bg::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: clamp(130px, 26%, 300px);
        background: linear-gradient(to bottom, transparent, var(--sp-bg));
        pointer-events: none;
    }
    /* left edge: the photo dissolves into the panel colour, so
       there's no hard seam between the data panel and the image
       (z-index lifts it above the <img>, which sits at auto) */
    .sh-single-public .sh-sp-hero__bg.sh-hero-bg::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: clamp(88px, 15%, 220px);
        background: linear-gradient(to right,
            var(--sp-bg) 0%, rgba(15,25,34,.55) 34%, transparent 100%);
        pointer-events: none;
        z-index: 2;
    }
    .sh-single-public .sh-sp-hero::after { opacity: 0; }   /* film grain off */

    /* ---- left column: the ink panel (same ground as the page) ---- */
    .sh-single-public .sh-hero-doss {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        background: var(--sp-bg);
        box-shadow: 40px 0 90px -50px rgba(0,0,0,.6);
        /* equal left/right; top clears the transparent header */
        padding: clamp(88px, 6.5vw, 116px) clamp(46px, 3.8vw, 64px)
                 clamp(44px, 3.6vw, 64px);
        gap: 0;
        justify-content: flex-start;
        overflow-y: auto;   /* only ever engages under heavy zoom */
    }

    /* Header retired here — kept only as an anchor for the admin
       "Presentation" control, floated top-right of the panel.
       Two things used to make that control unclickable (fixed 2026-08-30):
       1. .sh-doss-foot is position:relative on desktop and comes later in the
          DOM, so with both at z-index:auto it painted over this box. Hence
          the explicit z-index.
       2. At the old top offset the control sat at y≈101-135px, inside the
          reach of the transparent site header. Measured: a header ≥120px tall
          swallowed the click. The larger offset clears that. */
    .sh-single-public .sh-doss-head {
        position: absolute;
        top: clamp(132px, 10vw, 164px);
        right: clamp(46px, 3.8vw, 64px);
        margin: 0;
        z-index: 6;
    }
    .sh-single-public .sh-doss-ref,
    .sh-single-public .sh-doss-rule,
    .sh-single-public .sh-doss-status,
    .sh-single-public .sh-doss-loc { display: none; }

    /* body — identity block + spec title-block, as one group
       centred in the panel (equal air top and bottom) */
    .sh-single-public .sh-doss-foot {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(34px, 5vh, 60px);
    }
    .sh-single-public .sh-doss-foot::after { display: none; }
    .sh-single-public .sh-doss-footleft {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* Opening line — the circulation tier as an oversized editorial eyebrow:
       widely tracked caps, no rule and no dot, sitting directly above the
       title. The property type (House / Villa) was dropped here 2026-08-30.
       Colour alone codes the tier: gold = classified / off-market,
       green = cleared, muted white = public. The access state trails the
       name after a middot, one step quieter. */
    .sh-single-public .sh-hero-class {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0;
        margin-bottom: 13px;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: rgba(255,255,255,.6);
    }
    /* Each half stays intact: the panel is ~368px of content at its tightest,
       and the longest label ("Classified Property · Access granted") only just
       clears it. If a longer one ever appears it breaks between the two parts
       rather than mid-word. */
    .sh-single-public .sh-hero-class__name,
    .sh-single-public .sh-hero-class__state { white-space: nowrap; }
    .sh-single-public .sh-hero-class__state {
        color: rgba(255,255,255,.42);
        font-weight: 400;
    }
    /* Letter-spacing lands after every character, the separator included, so
       the gap after "·" is already one tracking unit wider than the gap before
       it. These margins even that out optically. */
    .sh-single-public .sh-hero-class__state::before {
        content: "·";
        margin: 0 .3em 0 .35em;
        opacity: .55;
    }

    .sh-single-public .sh-hero-class.is-classified,
    .sh-single-public .sh-hero-class.is-offmarket { color: rgba(201,174,120,.92); }
    .sh-single-public .sh-hero-class.is-cleared { color: #8FE39A; }
    .sh-single-public .sh-hero-class.is-cleared .sh-hero-class__state { color: rgba(143,227,154,.62); }

    .sh-single-public .sh-hero-title {
        font-size: clamp(2.7rem, 3.4vw, 4.2rem);
        line-height: .98;
        letter-spacing: -.02em;
        color: #fff;
        text-shadow: none;
        max-width: 13ch;
        text-wrap: balance;
    }

    .sh-single-public .sh-hero-vision {
        display: block;
        position: relative;
        font-family: var(--font-head);
        font-style: italic;
        font-weight: 400;
        font-size: 1.08rem;
        line-height: 1.62;
        color: rgba(255,255,255,.66);
        max-width: none;
        margin: 4px 0 0;
        padding: 0;
        text-shadow: none;
    }
    .sh-single-public .sh-hero-vision::before { content: none; }

    .sh-single-public .sh-hero-buyer {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin: 4px 0 0;
    }
    .sh-single-public .sh-hero-buyer .sh-vision-label {
        font-size: .58rem;
        letter-spacing: .24em;
        color: rgba(255,255,255,.4);
    }
    .sh-single-public .sh-hero-buyer .sh-vision-buyer {
        font-family: var(--font-head);
        font-style: italic;
        font-size: .88rem;
        color: rgba(201,174,120,.82);
        text-shadow: none;
    }

    /* spec → architectural title-block; fills the panel width; the
       "Specification" heading is gold so it reads as the title of
       the block, distinct from the white fact rows under it */
    .sh-single-public .sh-doss-spec {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .sh-single-public .sh-doss-spec__hd {
        display: block;
        font-size: 9.5px;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: rgba(201,174,120,.9);
        padding-bottom: 12px;
        margin-bottom: 2px;
        border-bottom: 1px solid rgba(201,174,120,.28);
    }
    .sh-single-public .sh-doss-spec__row:not(.is-price) { display: flex; }
    .sh-single-public .sh-doss-spec__row {
        justify-content: space-between;
        align-items: baseline;
        gap: 20px;
        padding: 11px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .sh-single-public .sh-doss-spec__row:not(.is-price):last-of-type { border-bottom: none; }
    .sh-single-public .sh-doss-spec__row .k {
        font-size: 9.5px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(255,255,255,.44);
    }
    .sh-single-public .sh-doss-spec__row .v {
        font-family: var(--font-head);
        font-size: 1rem;
        color: rgba(255,255,255,.92);
        font-variant-numeric: tabular-nums;
    }
    .sh-single-public .sh-doss-spec__row.is-price {
        order: 1;
        border-bottom: none;
        border-top: 1px solid rgba(201,174,120,.38);
        margin-top: 12px;
        padding: 18px 0 0;
    }
    .sh-single-public .sh-doss-spec__row.is-price .k { display: none; }
    .sh-single-public .sh-doss-spec__row.is-price .v {
        font-size: 1.9rem;
        color: var(--sp-gold);
        letter-spacing: .02em;
    }

    /* soften the hero → next-section handoff */
    .sh-single-public .sh-vision-stage.sh-vision-stage--open { background-image: none; }
    .sh-single-public .sh-sp-main { padding-top: clamp(36px, 4vh, 60px); }
}

/* Available: Απλό κείμενο με τελεία */
.st-avail-pill {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Under Offer: Χρυσό */
.st-offer-pill {
    background: var(--sp-gold);
    color: #05080E;
    border: 1px solid var(--sp-gold);
}

/* Sold: Διακριτικό γκρι/κόκκινο */
.st-sold-pill {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* MOBILE TWEAKS */
@media (max-width: 768px) {
    .sh-hero-meta-row {
        gap: 15px; /* Πιο κοντά στο κινητό */
        font-size: 0.9rem; /* Λίγο μικρότερα γράμματα */
        margin-top: 20px;
    }
    
    .sh-hm-sep { display: none; } /* Κρύβουμε τις γραμμές στο κινητό για να χωράνε άνετα */
    
    .sh-hm-item i { font-size: 1rem; }
    
    /* Το badge να μην πιάνει πολύ χώρο */
    .sh-stat-pill { padding: 3px 8px; font-size: 0.65rem; }
}

.sh-single-public .sh-hero-val{
  color: #fff;
  font-weight: 500;
}

@media (max-width: 768px){
  .sh-single-public .sh-hero-title{ font-size: 3.2rem; }
  .sh-single-public .sh-hero-details{ gap: 24px; }
}

.sh-single-public .sh-sp-stats__grid {
	  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: transparent; box-shadow: none; border: none;
  border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
	 border-radius: 4px;
  backdrop-filter: blur(0);
}
.sh-single-public .sh-sp-stats__grid--count-1 { grid-template-columns: minmax(0, 1fr); }
.sh-single-public .sh-sp-stats__grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-single-public .sh-sp-stats__grid--count-3,
.sh-single-public .sh-sp-stats__grid--count-5,
.sh-single-public .sh-sp-stats__grid--count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sh-single-public .sh-sp-stats__grid--count-2 .sh-sp-stat:nth-child(2n),
.sh-single-public .sh-sp-stats__grid--count-3 .sh-sp-stat:nth-child(3n),
.sh-single-public .sh-sp-stats__grid--count-5 .sh-sp-stat:nth-child(3n),
.sh-single-public .sh-sp-stats__grid--count-6 .sh-sp-stat:nth-child(3n) { border-right: none; }
	.sh-sp-stat {
  padding: 10px 15px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.03); /* Very subtle divider */
}
.sh-sp-stat:last-child { border-right: none; }
.sh-single-public .sh-sp-stat__val{ font-family: var(--font-head); font-size: 2.2rem; font-weight: 300; color:#fff; margin-bottom: -2px; margin-top: 5px; }
.sh-single-public .sh-sp-stat__lbl{ font-size: .68rem; text-transform: uppercase; letter-spacing: 2px; color: var(--sp-gold); margin-bottom: 15px; }

/* MAIN CONTENT */
.sh-single-public .sh-sp-main{ padding-bottom: 60px; }
.sh-single-public .sh-sp-grid{ display:grid; grid-template-columns: 1fr 380px; gap: 70px; }

/* =========================================================
   VISION — Editorial pull-quote (premium)
========================================================= */
.sh-single-public .sh-vision-stage {
    position: relative;
    /* Gradient: Σβήνει απαλά προς τα κάτω */
    background-image: linear-gradient(to bottom, #000000 0%, transparent 95%);
    padding: clamp(96px, 12vw, 140px) 20px clamp(104px, 13vw, 150px);
    min-height: clamp(320px, 45vh, 500px);
    display: flex;
    flex-direction: column; /* Στοίχιση κάθετα */
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* Gold spotlight removed for a cleaner, more discreet stage */
.sh-single-public .sh-vision-stage::before {
    display: none;
}

/* Keep the quote / file-index above the spotlight */
.sh-single-public .sh-vision-stage > .sh-sp-container {
    position: relative;
    z-index: 1;
}

/* The quote */
.sh-single-public .sh-vision-stage .sh-vision-quote {
    position: relative;
    font-family: var(--font-head);
    font-style: italic;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.34;
    color: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding-top: clamp(50px, 6vw, 80px); /* room for the decorative quote mark */
    text-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* Decorative opening quotation mark (gold, Playfair) */
.sh-single-public .sh-vision-quote::before {
    content: "\201C";
    position: absolute;
    top: clamp(-14px, -0.5vw, 2px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-head);
    font-style: normal;
    font-size: clamp(5rem, 9vw, 8rem);
    line-height: 1;
    color: var(--sp-gold);
    opacity: 0.30;
    pointer-events: none;
}

/* Locked vision wrapper — hosts the dossier-cover file index */
.sh-single-public .sh-vision-lock {
    max-width: 900px;
    margin: 0 auto;
}

.sh-single-public .sh-vision-connector {
    width: 1px;
    height: 15px; 
	background: var(--sp-gold);
    margin: 15px auto 15px; /* Απόσταση από το quote και το label */
    opacity: 0.6;
}

/* Το Wrapper για το κάτω μέρος */
.sh-single-public .sh-vision-meta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Απόσταση μεταξύ Ideal For και Buyer */
}

/* IDEAL FOR — eyebrow with flanking hairlines */
.sh-single-public .sh-vision-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 500;
}

/* BUYER PROFILE (ACF) — editorial serif, echoes the quote */
.sh-single-public .sh-vision-buyer {
    font-family: var(--font-head);
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    letter-spacing: 0.4px;
    color: var(--sp-gold);
    font-weight: 400;
    text-shadow: 0 10px 24px rgba(0,0,0,0.5);
}

/* Mobile Tweaks */
@media (max-width: 768px){
    .sh-single-public .sh-vision-stage {
        padding: 64px 20px 76px;
        min-height: auto;
    }
    .sh-single-public .sh-vision-stage .sh-vision-quote {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
        padding-top: 46px;
    }
    .sh-single-public .sh-vision-quote::before {
        font-size: 4.6rem;
    }
    .sh-single-public .sh-vision-connector {
        height: 20px; /* Λίγο πιο κοντή γραμμή στο κινητό */
        margin: 20px auto 10px;
    }
}
/* SECTIONS */
.sh-single-public .sh-section{ margin-bottom: 70px; }
.sh-single-public .sh-sp-kicker{
  color: var(--sp-gold); text-transform: uppercase; letter-spacing: 2.5px;
  font-size: .8rem; font-weight: 600; margin-bottom: 10px; display:block;
}
.sh-single-public h2.h2-underline {
  display:block;
  width:auto;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201,174,120,0.92);
  margin: 0 0 16px;
  white-space: normal;
}
.sh-single-public .sh-sp-rich{ color: rgba(255,248,238,0.72); line-height: 1.86; font-size: 1.05rem; }
.sh-single-public .sh-sp-rich p { margin-bottom: 1.5rem; }
/* Το γενικό p/li του sh-core.css (--text) είναι για ανοιχτό φόντο: η περιγραφή έβγαινε #4F5561 (2.4:1).
   Επιλογή ιδιοκτήτη 14/09/2026: στη μέση ανάμεσα σε εκείνο και στο .62 (7.1:1, πολύ λευκό) → .48 (4.7:1). */
.sh-single-public .sh-sp-rich p,
.sh-single-public .sh-sp-rich li { color: rgba(255,248,238,0.48); }
	
	/* Editorial initial: το μεγάλο γράμμα κάθεται στη βάση της πρώτης σειράς και υψώνεται από πάνω
	   (όχι float/drop cap σε δύο σειρές). Επιλογή ιδιοκτήτη 14/09/2026· μέγεθος 3.5rem, ανάμεσα στο 4.2rem (πολύ μεγάλο) και στο 2.8rem (πολύ μικρό). */
.sh-sp-rich p:first-of-type::first-letter {
    font-family: var(--font-head); /* Η Playfair γραμματοσειρά σου */
    font-size: 3.5rem;
    line-height: 0.8;
    margin-right: 0.04em;
    color: var(--sp-gold); /* Το χρυσό σου */
    font-weight: 400;
}


/* =========================================
   LEGAL DOSSIER — TRIGGER CARD
   ========================================= */
.sh-dossier-trigger-wrap { margin: 48px 0 44px; }

.sh-dossier-trigger {
    position: relative;
    background: rgba(255,250,240,0.03);
    border: 1px solid rgba(201,174,120,0.7);
    border-radius: 0;
    padding: 36px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
}
.sh-dossier-trigger::before,
.sh-dossier-trigger::after { display: none; }
.sh-dossier-trigger:hover {
    background: rgba(201,174,120,0.06);
    border-color: rgba(201,174,120,0.8);
}
.sh-dossier-trigger--locked { cursor: default; 
	border: 1px solid rgba(201,174,120,0.2);
    border-radius: 0;}
.sh-dossier-trigger--locked:hover {
    background: rgba(255,250,240,0.03);
    border-color: rgba(201,174,120,0.3);
}

.sh-dt-body { flex: 1; min-width: 0; }

.sh-dt-eyebrow {
    display: block;
    font-size: 0.50rem;
    color: rgba(201,174,120,0.50);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 600;
}
.sh-dt-title {
    margin: 0 0 10px;
    font-size: 1.55rem;
    color: rgba(255,250,242,0.88);
    font-weight: 400;
    font-family: var(--font-head);
    line-height: 1.18;
}
.sh-dt-sub {
    margin: 0;
    font-size: 0.79rem;
    color: rgba(255,255,255,0.36);
    line-height: 1.56;
    font-style: italic;
}
.sh-dt-hook {
    margin: 13px 0 0;
    font-size: 0.70rem;
    font-style: italic;
    color: rgba(201,174,120,0.38);
    line-height: 1.5;
}
.sh-dt-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.sh-dt-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 18px;
}
.sh-dt-cta {
    background: none;
    border: 1px solid rgba(201,174,120,0.28);
    color: rgba(201,174,120,0.72);
    font-size: 0.52rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: 11px 20px;
    cursor: pointer;
    font-family: var(--font-body, sans-serif);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    font-weight: 600;
}
.sh-dt-cta:hover {
    color: rgba(201,174,120,0.97);
    border-color: rgba(201,174,120,0.55);
    background: rgba(201,174,120,0.06);
}
.sh-dt-lock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,0.20);
    font-size: 0.52rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.sh-dt-lock i { font-size: 1.0rem; color: rgba(255,255,255,0.12); margin-bottom: 2px; }

/* Click cue — replaces the boxed "Review File" button; the whole card is the click target */
.sh-dt-cue {
    background: none; border: none; padding: 0; margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(201,174,120,0.85);
    font-family: var(--font-body, sans-serif);
    font-size: 0.62rem; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: color 0.2s ease;
}
/* Slow, gentle drift on the arrow to draw the eye to the click cue */
.sh-dt-cue i {
    font-size: 0.72rem;
    animation: sh-cue-drift 2.4s ease-in-out infinite;
}
@keyframes sh-cue-drift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}
.sh-dt-cue:hover,
.sh-dossier-trigger:hover .sh-dt-cue { color: rgba(201,174,120,1); }
.sh-dt-cue:focus-visible { outline: 2px solid rgba(201,174,120,0.6); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .sh-dt-cue i { animation: none; }
}

@media (max-width: 640px) {
    .sh-dossier-trigger { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 24px; }
    .sh-dt-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .sh-dt-title { font-size: 1.30rem; }
}

/* Old / narrow phones: stack the status badge above the click cue (the whole card is the click target) */
@media (max-width: 460px) {
    .sh-dt-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sh-dc-badge { white-space: normal; line-height: 1.35; }
    .sh-dossier-trigger--locked .sh-dt-lock { align-self: center; }
}

/* Badge — dark surface (trigger card): pill with colored border */
.sh-dc-badge {
    display: inline-block;
    font-size: 0.48rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 11px;
    border: 1px solid currentColor;
    line-height: 1;
}
.sh-dc-badge.b-verified   { color: rgba(140,195,140,0.80); border-color: rgba(140,195,140,0.22); background: rgba(140,195,140,0.04); }
.sh-dc-badge.b-progress   { color: rgba(210,168,90,0.80);  border-color: rgba(210,168,90,0.22);  background: rgba(210,168,90,0.04);  }
.sh-dc-badge.b-incomplete { color: rgba(200,100,90,0.80);  border-color: rgba(200,100,90,0.22);  background: rgba(200,100,90,0.04);  }
.sh-dc-badge.b-pending    { color: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }
.sh-dc-badge.b-partial    { color: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }

/* =========================================
   LEGAL DOSSIER — SLIDE-OUT DRAWER
   ========================================= */
.sh-dossier-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sh-dossier-overlay.is-open {
    pointer-events: auto;
    opacity: 1;
}
.sh-do-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 16, 12, 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.sh-do-drawer {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 640px;
    background: #F5EFE4;
    border-left: 1px solid rgba(120, 95, 55, 0.18);
    color: #1C1A17;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    box-shadow: -24px 0 60px rgba(0,0,0,0.26);
}
.sh-dossier-overlay.is-open .sh-do-drawer { transform: translateX(0); }
.sh-do-drawer::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #A8883E, #D4BC82, #C9AE78, #A8883E);
    flex-shrink: 0;
}
.sh-do-drawer::-webkit-scrollbar { width: 4px; }
.sh-do-drawer::-webkit-scrollbar-track { background: transparent; }
.sh-do-drawer::-webkit-scrollbar-thumb { background: rgba(140,110,70,0.22); border-radius: 4px; }

.sh-do-header {
    flex-shrink: 0;
    padding: 30px 36px 26px;
    border-bottom: 1px solid rgba(100, 78, 45, 0.12);
    background: #EDE5D6;
}
.sh-do-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.sh-do-eyebrow {
    display: block;
    font-size: 0.50rem;
    color: #9A7B4F;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 9px;
    font-weight: 600;
}
.sh-do-title {
    margin: 0;
    font-size: 1.48rem;
    color: #17150F;
    font-weight: 400;
    font-family: var(--font-head);
    line-height: 1.18;
}
.sh-do-lead {
    margin: 9px 0 0;
    font-size: 0.78rem;
    color: #9A8870;
    line-height: 1.54;
    font-style: italic;
    font-weight: 400;
}
.sh-do-close {
    background: none;
    border: 1px solid rgba(140,110,70,0.18);
    color: #B8A898;
    font-size: 1.1rem;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1; padding: 0;
    margin-top: 2px;
}
.sh-do-close:hover {
    color: #2C2A22;
    opacity: 1;
    border-color: rgba(140,110,70,0.4);
}
.sh-do-disclaimer {
    font-size: 0.68rem;
    color: #9E9282;
    line-height: 1.62;
    margin: 0 36px;
    padding: 13px 0 16px;
    border-bottom: 1px solid rgba(100, 78, 45, 0.08);
    flex-shrink: 0;
    font-style: italic;
}
.sh-do-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 52px;
}
.sh-do-body::-webkit-scrollbar { width: 4px; }
.sh-do-body::-webkit-scrollbar-track { background: transparent; }
.sh-do-body::-webkit-scrollbar-thumb { background: rgba(140,110,70,0.20); border-radius: 4px; }

.sh-do-list { padding: 0 36px; }
.sh-do-list--cond {
    margin-top: 4px;
    padding-top: 0;
}
.sh-do-group-title {
    padding: 26px 36px 12px;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #B09060;
}
.sh-do-group-title--secondary {
    border-top: 1px solid rgba(100, 78, 45, 0.10);
    margin-top: 8px;
    padding-top: 26px;
}
.sh-do-footnote {
    padding: 6px 36px 20px;
    font-size: 0.70rem;
    color: #8A8074;
    line-height: 1.68;
    font-style: italic;
}

/* =========================================
   LEGAL DOSSIER — ROWS (paper surface)
   Reverted to the Desktop reference look 2026-07-13:
   bordered uppercase status chips (+ icon, via the
   readability block below), colored left rails, meter-bar
   summary. Colour families are aligned to the 3 status
   labels the PHP prints: green = Confirmed, amber = Under
   review, red = Action needed.
   ========================================= */
.sh-dc-row {
    padding: 18px 0;
    border-bottom: 1px solid rgba(100, 78, 45, 0.08);
}
.sh-dc-row:last-child { border-bottom: none; }

.sh-dc-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sh-dc-lbl {
    color: #1A1810;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.005em;
    flex: 1;
    min-width: 0;
}

/* Plain-language question under each row label — whisper register.
   Kept (the PHP still emits .sh-dc-q); without this it would render
   inline against the title. */
.sh-dc-q {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    color: #9A9284;
}

.sh-dc-status {
    font-size: 0.46rem;
    line-height: 1;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    padding: 5px 10px;
    border: 1px solid currentColor;
    flex-shrink: 0;
}

.sh-dc-subnote {
    margin-top: 9px;
    max-width: 58ch;
    color: #706A60;
    font-size: 0.76rem;
    line-height: 1.74;
    font-style: italic;
}

/* Status colour families, matching $dossier_val_map in single-property.php:
   green = Confirmed, amber = In progress, red = Action needed, grey = Not
   applicable. Red is reserved for a genuine open issue (is-err) — routine
   steps still running (is-upd update, is-fix formal act, is-mis awaiting a
   document) share the amber "In progress" family on purpose. */
.sh-dc-row.is-ok  .sh-dc-status { color: #4A7A52; border-color: rgba(74,122,82,0.35); background: rgba(74,122,82,0.06); }
.sh-dc-row.is-pen .sh-dc-status,
.sh-dc-row.is-na  .sh-dc-status,
.sh-dc-row.is-upd .sh-dc-status,
.sh-dc-row.is-fix .sh-dc-status,
.sh-dc-row.is-mis .sh-dc-status { color: #9C6726; border-color: rgba(156,103,38,0.35); background: rgba(156,103,38,0.06); }
.sh-dc-row.is-err .sh-dc-status { color: #8A332E; border-color: rgba(138,51,46,0.35); background: rgba(138,51,46,0.06); }
.sh-dc-row.is-nap .sh-dc-status { color: #8A8D93; border-color: rgba(138,141,147,0.30); background: rgba(138,141,147,0.05); }

.sh-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.sh-dc-note {
    padding: 4px 36px 22px;
    color: #8A8074;
    font-size: 0.78rem;
    line-height: 1.7;
    font-style: italic;
}

@media (max-width: 560px) {
    .sh-dc-lbl { font-size: 0.84rem; }
    .sh-dc-status { font-size: 0.44rem; padding: 4px 8px; }
    .sh-dc-subnote { font-size: 0.73rem; }
}

/* =========================================
   LEGAL DOSSIER — VERDICT (closing assessment)
   ========================================= */
.sh-dc-verdict {
    margin: 8px 36px 0;
    padding: 22px 26px 24px;
    border: none;
    border-left: 3px solid;
    border-radius: 0;
    display: block;
}
.sh-dc-verdict.v-review   { background: rgba(74,122,82,0.07);  border-left-color: rgba(74,122,82,0.55);  }
.sh-dc-verdict.v-prep     { background: rgba(156,103,38,0.07); border-left-color: rgba(156,103,38,0.55); }
.sh-dc-verdict.v-obstacle { background: rgba(138,51,46,0.07);  border-left-color: rgba(138,51,46,0.55);  }

.sh-v-icon { display: none; }
.sh-v-content { display: block; }

.sh-v-lbl {
    display: block;
    font-size: 0.47rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: 9px;
    text-transform: uppercase;
}
.sh-dc-verdict.v-review   .sh-v-lbl { color: #4A7A52; }
.sh-dc-verdict.v-prep     .sh-v-lbl { color: #9C6726; }
.sh-dc-verdict.v-obstacle .sh-v-lbl { color: #8A332E; }

.sh-v-content strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 500;
    font-family: var(--font-head);
    margin-bottom: 10px;
    letter-spacing: 0.005em;
    line-height: 1.26;
}
.sh-dc-verdict.v-review   strong { color: #2C4C30; }
.sh-dc-verdict.v-prep     strong { color: #5A3C14; }
.sh-dc-verdict.v-obstacle strong { color: #5C2218; }

.sh-v-content p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.68;
    color: #6A6460;
}

@media (max-width: 600px) {
    .sh-do-drawer { max-width: 100%; }
    .sh-do-header { padding: 24px 22px 20px; }
    .sh-do-disclaimer { margin: 0 22px; }
    .sh-do-list { padding: 0 22px; }
    .sh-do-group-title { padding: 22px 22px 10px; }
    .sh-do-group-title--secondary { padding-top: 22px; }
    .sh-dc-note, .sh-do-footnote { padding: 4px 22px 18px; }
    .sh-dc-verdict { margin: 8px 22px 0; padding: 18px 20px 20px; }
    .sh-dc-lbl { font-size: 0.84rem; }
    .sh-dc-status { font-size: 0.44rem; }
    .sh-dc-subnote { font-size: 0.73rem; }

    /* Kept from the last iteration: on narrow phones the status chip
       drops below the title instead of squeezing to the right. */
    .sh-dc-topline { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* dossier legacy shared row styles removed */

/* VERDICT — secondary block: rules defined above, this block resolves any legacy overrides */
.sh-dc-verdict { display: block; padding: 30px 34px 36px; border: none; border-top: 1px solid rgba(100, 78, 45, 0.14); }
.sh-v-icon { display: none; }
.sh-v-content { display: block; }

/* Other Components */
.sh-specs-list .row{ display:flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sh-specs-list span{ color: rgba(255,255,255,0.6); } .sh-specs-list strong{ color:#fff; font-weight: 500; }
.sh-amenities-grid{ 
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.sh-amenity{ display:flex; align-items:center; gap: 12px; color: rgba(255,255,255,0.9); }
.sh-amenity i{ color: var(--sp-gold); font-size: .9em; }

/* MAP */
.sh-single-public #propertyMap {
  width: 100%; height: 450px; background: #070D16; border-radius: 2px; margin-top: 15px; overflow:hidden; z-index:1; border: 1px solid rgba(255,255,255,0.1);
}
.sh-single-public #propertyMap.sh-map--light {
  background: #eef3ee;
}


	
/* =========================================================
   MOSAIC TEASER (BENTO - 3 PHOTOS)
========================================================= */
.sh-gal-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom: 20px; }

/* Desktop Bento Grid */
.sh-mosaic-grid.layout-bento {
    display: grid;
    grid-template-columns: 65% 35%; /* Μια μεγάλη, μια μικρότερη στήλη */
    grid-template-rows: 200px 200px;
    gap: 8px; /* Κομψό μικρό κενό */
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}
.mobile-only { display: none !important; }
.desktop-only { display: flex !important; }

.sh-mos-item { position: relative; cursor: pointer; overflow: hidden; background: #070D16; }
.sh-mos-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; opacity: 1; }
.sh-mos-item:hover img { transform: scale(1.03); }
/* No dimming veil — gallery photos render at full brightness */
.sh-mos-overlay { position: absolute; inset:0; background: transparent; pointer-events: none; }

/* Τοποθέτηση 3 εικόνων Desktop */
.sh-mos-item.item-0 { grid-column: 1 / 2; grid-row: 1 / 3; } /* Η μεγάλη αριστερά */
.sh-mos-item.item-1 { grid-column: 2 / 3; grid-row: 1 / 2; } /* Πάνω δεξιά */
.sh-mos-item.item-2 { grid-column: 2 / 3; grid-row: 2 / 3; } /* Κάτω δεξιά */

.sh-mos-more {
    position: absolute; inset:0; background: rgba(5,8,14,0.6); backdrop-filter: blur(4px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; font-family: var(--font-head); border: none; cursor: pointer; width: 100%;
}
.sh-mos-more:hover { background: rgba(5,8,14,0.4); }
.sh-mos-more span { font-size: 2.2rem; font-weight:300; }
.sh-mos-more small { text-transform:uppercase; letter-spacing:2px; font-size:.7rem; color: var(--sp-gold); }

/* Mobile Grid Override (1 Photo Only with Centered Button) */
@media (max-width: 768px) {
    .sh-mosaic-grid.layout-bento {
        display: block;
        margin: 0 -20px 30px; /* Full width edge-to-edge */
        border-radius: 0;
    }
    .sh-mos-item.item-0 { display: block; aspect-ratio: 4 / 3; } /* Λίγο πιο τετράγωνη για να δείχνει ωραία */
    .sh-mos-item.item-1, .sh-mos-item.item-2 { display: none; }
    
    .mobile-only { display: flex !important; }
    .desktop-only { display: none !important; }

    /* Το Όμορφο Κουμπί πάνω στη Φωτό */
    .sh-mos-mobile-btn {
        position: absolute;
        bottom: 20px; /* Χαμηλά στο κέντρο για να μη κρύβει το σπίτι */
        left: 50%;
        transform: translateX(-50%);
        background: rgba(5, 8, 14, 0.75);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 10px 20px;
        border-radius: 30px; /* Στρογγυλεμένο Pill */
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        pointer-events: none; /* Το κλικ πάει στο parent (sh-mos-item) για να ανοίξει την Gallery */
    }
}

/* =========================================================
   POPUP GALLERY — EDITORIAL PATTERN (1 BIG, 2 SMALL, REPEAT)
   NO BORDERS / NO RADIUS / NO FRAMES
========================================================= */
.sh-fs-view{
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(5,8,14,0.98);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.sh-fs-view.is-active{
  opacity: 1;
  pointer-events: all;
}

/* 50% width centered on desktop */
.sh-fs-panel{
  width: min(980px, 50vw);
  height: 88vh;
  overflow-y: auto;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  padding: 18px;

  transform: translateY(10px);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.sh-fs-view.is-active .sh-fs-panel{ transform: translateY(0); }

/* ONLY X top-right */
.sh-fs-x{
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 9992;

  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.9);

  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;

  opacity: .85;
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.sh-fs-x:hover{
  opacity: 1;
  color: var(--sp-gold);
  transform: translateY(-1px);
}

/* THE EXACT PATTERN:
   item 1 big (span 2 cols), item 2+3 small, item 4 big, etc.
   => every 3rd starting from 1 is big: (3n+1)
*/
.sh-fs-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* default = small */
.sh-fs-item{
  position: relative;
  overflow: hidden;
  background: #070D16;
  cursor: pointer;

  grid-column: span 1;
  aspect-ratio: 4 / 3; /* small tiles */
}

.sh-fs-item:nth-child(3n + 1){
  grid-column: 1 / -1;   /* big tile spans both columns */
  aspect-ratio: 16 / 9;  /* big hero tile */
}

.sh-fs-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  opacity: 0.92;
  transition: transform .28s ease, opacity .18s ease;
}
.sh-fs-item:hover img{
  transform: scale(1.02);
  opacity: 1;
}

/* Tablet: make it wider (still centered) */
@media (max-width: 1200px){
  .sh-fs-panel{ width: min(920px, 70vw); }
}

/* Mobile: full width + one column (still keeps rhythm) */
@media (max-width: 768px){
  .sh-fs-panel{
    width: 100vw;
    height: 100vh;
    padding: 16px;
  }
  .sh-fs-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sh-fs-item{
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
  .sh-fs-item:nth-child(3n + 1){
    aspect-ratio: 16 / 9;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sh-fs-view, .sh-fs-panel, .sh-fs-item img, .sh-fs-x { transition: none !important; }
}


/* =========================================================
   GALLERY CAPTIONS — hybrid editorial, kept small + discreet so the
   photo leads. Gold sans eyebrow (room label) + display-serif subline
   (the hook). Shared type system, two light-touch treatments:
   - .sh-fs-cap : fullscreen grid, sits ON a photo -> a short soft scrim.
   - .sh-lb-cap : lightbox -> the same full-width bottom scrim as the
                  grid, with the title centered on it.
   Markup: the grid caption is server-rendered in single-property.php;
   the lightbox caption is built by sh-single.js and appended to
   #modalGallery, then updated per slide.
========================================================= */

/* ---- Fullscreen grid: small caption over a short soft scrim ---- */
.sh-fs-cap{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 24px 16px 11px;
  text-align: left;
  pointer-events: none; /* clicks pass through to open the lightbox */
  background: linear-gradient(to top,
              rgba(5,8,14,.82) 0%,
              rgba(5,8,14,.52) 40%,
              rgba(5,8,14,0)   100%);
}

/* ---- Lightbox: full-width bottom scrim, centered text (matches grid) ---- */
.sh-lb-cap{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 24px 16px;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(5,8,14,.82) 0%,
              rgba(5,8,14,.52) 40%,
              rgba(5,8,14,0)   100%);
}

/* Eyebrow — room label: small, gold, uppercase, tracked. */
.sh-fs-cap__eyebrow,
.sh-lb-cap__eyebrow{
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .12rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Subline — the hook: small display serif, near-white. */
.sh-fs-cap__subline,
.sh-lb-cap__subline{
  display: block;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.sh-lb-cap__eyebrow{
  font-size: .68rem;
  margin-bottom: .5rem;             /* modest lift so the photo edge sits roughly between the two lines */
  text-shadow: 0 1px 5px rgba(0,0,0,.75);
}
.sh-lb-cap__subline{ font-size: .95rem; }

@media (max-width: 768px){
  .sh-fs-cap{ padding: 20px 12px 10px; }
  .sh-lb-cap{ padding: 24px 16px 13px; }
  .sh-fs-cap__eyebrow,
  .sh-lb-cap__eyebrow{ font-size: .68rem; letter-spacing: .14em; }
  .sh-lb-cap__eyebrow{ margin-bottom: .3rem; }
  .sh-fs-cap__subline{ font-size: .84rem; }
  .sh-lb-cap__subline{ font-size: .9rem; }
}


/* SIDEBAR & FORM */
.sh-single-public .sh-sp-side{ align-self:start; position: sticky; top: 120px; }
.sh-single-public .sh-side-card{
  background: rgba(0,0,0,0.09);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  border-radius: var(--r-card);
  padding: 35px;
}

.sh-single-public .sh-form{
  display:flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 25px;
}

.sh-form-field{
  display:flex;
  flex-direction:column;
  gap: 7px;
}

.sh-form-label{
  display:block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.54);
}

/* --- FORM INPUTS --- */
.sh-single-public .sh-form input,
.sh-single-public .sh-form textarea,
.sh-single-public .sh-form select{
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  padding: 15px 16px;
  font-size: 0.95rem;
  border-radius: calc(var(--r-card) - 2px);
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: none;
}

.sh-single-public .sh-form ::placeholder{
  color: rgba(255,255,255,0.40);
}

.sh-single-public .sh-form input:focus,
.sh-single-public .sh-form textarea:focus,
.sh-single-public .sh-form select:focus{
  border-color: rgba(201,174,120,0.58);
  background: rgba(255,255,255,0.055);
  box-shadow: 0 0 0 1px rgba(201,174,120,0.20);
}

.sh-single-public .sh-form textarea{
  resize: vertical;
  min-height: 110px;
}

.sh-single-public .sh-gdpr-row { display: flex; gap: 12px; align-items: flex-start; font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.4; margin: 15px 0; }
.sh-single-public .sh-gdpr-row input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--sp-gold); cursor: pointer; border: 1px solid rgba(255,255,255,0.3) !important; background: transparent !important; appearance: auto !important; }

.sh-single-public .sh-msg-ok{ color: #4ade80; background: rgba(74,222,128,0.1); padding: 15px; margin-bottom:20px; border: 1px solid rgba(74,222,128,0.2); }
.sh-single-public .sh-msg-err{ color: #f87171; background: rgba(248,113,113,0.1); padding: 15px; margin-bottom:20px; border: 1px solid rgba(248,113,113,0.2); }
.sh-honey{ position:absolute; opacity:0; pointer-events:none; }

/* LIGHTBOX & MOBILE BAR */
.sh-modal-wrap{ position: fixed; inset:0; z-index: 10000; display:none; align-items:center; justify-content:center; }
.sh-modal-wrap.is-open{ display:flex; }
.sh-modal-bg{ position:absolute; inset:-60vh 0 -100vh; background: rgba(0,0,0,0.96); backdrop-filter:blur(5px); }
.sh-modal-panel{ position:relative; z-index:2; width:100%; display:flex; justify-content:center; }
.sh-lb-img{ max-height: 90vh; max-width: 95vw; box-shadow: 0 0 50px black; border: 1px solid rgba(255,255,255,0.1); }
.sh-lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; padding:20px; transition: color .2s; } .sh-lb-nav:hover{ color: var(--sp-gold); }
.sh-lb-nav.prev{ left: 20px; } .sh-lb-nav.next{ right: 20px; }
.sh-lb-close{ position:absolute; top:-60px; right:30px; background:none; border:none; color:#fff; font-size:1.8rem; cursor:pointer; transition: color .2s; } .sh-lb-close:hover{ color: var(--sp-gold); }
.sh-single-public .sh-mobile-bar{ display:none; }

/* RESPONSIVE */
@media (max-width: 900px){
  .sh-single-public .sh-sp-grid{ display:flex; flex-direction:column; gap: 50px; }
  .sh-single-public .sh-sp-side{ order: 10; position: static; width: 100%; padding-bottom: 60px; }

  .sh-single-public .sh-side-card {
    margin: 0 15px; background: #0f1a2a;
    border: 1px solid rgba(255,255,255,0.1); border-top: 1px solid var(--sp-gold);
    padding: 30px 20px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }

  .sh-dc-verdict { text-align: left; }
  .sh-v-stamp { display: none; }

  .sh-single-public .sh-sp-stats__grid{ grid-template-columns: 1fr 1fr; }
  .sh-single-public .sh-sp-stat{ border-bottom: 1px solid rgba(255,255,255,0.1); }
  .sh-single-public .sh-sp-stat:not(:last-child)::after { display: none; }
  .sh-single-public .sh-sp-stat:nth-child(2n){ border-right: none; }
  .sh-single-public .sh-sp-stat:nth-child(2n-1){ border-right: 1px solid rgba(255,255,255,0.1); }
  .sh-single-public .sh-sp-stat:last-child{ border-right: none; }

/* =========================================================
   MOBILE ACTION BAR — price · request · WA / token
========================================================= */
.sh-single-public .sh-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9991;
    background: rgba(5, 8, 14, 0.98);
    border-top: 1px solid rgba(201, 174, 120, 0.22);
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
    box-shadow: 0 -14px 28px rgba(0,0,0,0.22);
}
.sh-single-public .sh-mobile-bar.is-hidden {
    transform: translateY(110%);
    opacity: 0;
}
.sh-mbar-price {
    flex-shrink: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sh-mbar-price__eyebrow {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255,255,255,0.34);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}
.sh-mbar-price__value {
    display: block;
    font-family: var(--font-head, serif);
    font-size: 0.96rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}
.sh-btn-access {
    flex: 1 1 0;
    min-width: 0;
    background: var(--sp-gold);
    color: #05080E;
    font-family: var(--font-body, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.74rem;
    border: none;
    border-radius: var(--r-btn);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sh-btn-access:active { opacity: .9; }
	.sh-btn-access:hover { 

    color: var(--sp-bg);
    background: var(--sp-gold); }
.sh-btn-secondary-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.78);
    border-radius: var(--r-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.sh-btn-secondary-icon--wa:active,
.sh-btn-secondary-icon--wa:hover {
    border-color: rgba(37,211,102,0.5);
    color: #25D366;
    background: rgba(37,211,102,0.05);
}
.sh-btn-secondary-icon--token {
    width: auto;
    padding: 0 16px;
    gap: 8px;
    border-radius: 40px;
    background: rgba(201,174,120,0.1);
}
.sh-btn-secondary-icon--token i { font-size: 0.85rem; }
.sh-btn-secondary-icon--token span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sh-btn-secondary-icon--token:active,
.sh-btn-secondary-icon--token:hover {
    border-color: rgba(201,174,120,0.45);
    color: var(--sp-gold);
    background: rgba(201,174,120,0.06);
}
.sh-single-public .sh-sp-side { display:none; }
.sh-single-public .sh-sp-main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   MOBILE SHEETS — WhatsApp / Token
========================================================= */
.sh-wa-sheet,
.sh-token-sheet {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    /* WhatsApp retains its top-sheet layout; token overrides below. */
    align-items: flex-start;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .22s ease, visibility 0s linear .22s;
}
.sh-wa-sheet.is-open,
.sh-token-sheet.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity .22s ease, visibility 0s linear 0s;
}
.sh-wa-sheet__backdrop,
.sh-token-sheet__backdrop {
    position: absolute;
    /* Extended far past the viewport: when the mobile keyboard opens, iOS
       pans the visual viewport below the overlay's bounds — without this the
       raw page shows through in the strip between panel and keyboard. */
    inset: -60vh 0 -100vh;
    background: rgba(0,0,0,0.72);
}
.sh-wa-sheet__panel,
.sh-token-sheet__panel {
    position: relative;
    z-index: 2;
    width: 100%;
    background: var(--sp-bg);
    border-bottom: 1px solid rgba(201,174,120,0.18);
    padding: 22px 20px;
    padding-top: max(22px, calc(env(safe-area-inset-top) + 12px));
    transform: translateY(-20px);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 16px 34px rgba(0,0,0,.26);
}
.sh-wa-sheet.is-open .sh-wa-sheet__panel,
.sh-token-sheet.is-open .sh-token-sheet__panel { transform: translateY(0); }

/* Token only: mask the document itself, not just a fixed scrim. Some mobile
   browser keyboard controls expose document pixels outside fixed overlays. */
html.sh-token-surface,
body.sh-token-surface { background: var(--navy, #05080E); }
.sh-token-obscured { opacity: 0 !important; pointer-events: none !important; }
.sh-token-sheet {
    align-items: flex-end;
    top: var(--sh-token-top, 0px);
    bottom: auto;
    height: var(--sh-token-height, 100dvh);
}
.sh-token-sheet__backdrop { background: var(--sp-bg); }
.sh-token-sheet__panel {
    border-bottom: 0;
    border-top: 1px solid var(--sp-border);
    padding-top: 22px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(20px);
}
@media (prefers-reduced-motion: reduce) {
    .sh-token-sheet__panel { transition: none; transform: none; }
}
.sh-wa-sheet__title,
.sh-token-sheet__title {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--sp-gold);
    margin-bottom: 4px;
}
.sh-wa-sheet__helper,
.sh-token-sheet__helper {
    display: block;
    font-size: .8rem;
    color: rgba(255,255,255,.45);
    line-height: 1.45;
    margin-bottom: 14px;
}
.sh-wa-sheet__textarea,
.sh-token-sheet__input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(5,8,14,.7);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-card);
    color: #fff;
    font-size: .88rem;
    line-height: 1.55;
    padding: 13px 14px;
    outline: none;
}
.sh-wa-sheet__textarea {
    min-height: 110px;
    resize: none;
}
.sh-token-sheet__input { text-transform: uppercase; }
.sh-wa-sheet__textarea:focus,
.sh-token-sheet__input:focus {
    border-color: rgba(201,174,120,.5);
    box-shadow: 0 0 0 1px rgba(201,174,120,.2);
}
.sh-wa-sheet__actions,
.sh-token-sheet__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.sh-wa-sheet__cancel,
.sh-token-sheet__cancel {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.55);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 11px 18px;
    border-radius: var(--r-btn);
    cursor: pointer;
}
.sh-wa-sheet__send,
.sh-token-sheet__send {
    flex: 1;
    border: none;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 11px 14px;
    border-radius: var(--r-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.sh-wa-sheet__send { background: #25D366; color:#fff; }
.sh-token-sheet__send { background: var(--sp-gold); color:#05080E; }
.sh-token-sheet__error {
    margin-top: 10px;
    font-size: .78rem;
    color: #fca5a5;
}
.sh-token-sheet__note {
    margin-top: 10px;
    font-size: .75rem;
    color: rgba(255,255,255,.36);
    line-height: 1.5;
}
 
/* --- DISTANCES (STRAIGHT ARCHITECTURAL) --- */
/* =========================================================
   LOCATION & AREA INTELLIGENCE - WITH EDITORIAL CONTENT
========================================================= */
.sh-location-intel-section {
    padding: 48px 0 52px;
}

.sh-li-title {
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 3.2px;
    color: rgba(201,174,120,0.4);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 24px;
}

.sh-li-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
}

.sh-li-intro p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.48);
    margin: 0;
}

/* Inline Distance Badges */
.sh-li-distances {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto 36px;
    max-width: 700px;
}

.sh-li-dist-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255,248,238,0.7);
    white-space: nowrap;
}

.sh-li-dist-badge i {
    font-size: 0.85rem;
    color: rgba(201,174,120,0.5);
}

.sh-li-dist-badge .sh-dist-label {
    color: rgba(201,174,120,0.65);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sh-li-dist-badge .sh-dist-value {
    color: rgba(255,248,238,0.85);
    font-weight: 400;
}

.sh-li-dist-separator {
    color: rgba(255,255,255,0.15);
    margin: 0 -8px;
}

/* Action Buttons */
.sh-li-context {
    text-align: center;
    max-width: 620px;
    margin: 32px auto 28px;
}

.sh-li-context p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.42);
    margin: 0;
    font-style: italic;
}

.sh-li-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

/* Buttons - Based on Legal Position .sh-dt-cta style */
.sh-li-btn-primary,
.sh-li-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(201,174,120,0.28);
    font-size: 0.52rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: 11px 20px;
    cursor: pointer;
    font-family: var(--font-body, sans-serif);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    font-weight: 600;
}

.sh-li-btn-primary i,
.sh-li-btn-secondary i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Primary - Slight emphasis */
.sh-li-btn-primary {
    background: rgba(201,174,120,0.06);
    color: rgba(201,174,120,0.82);
    border-color: rgba(201,174,120,0.32);
}

.sh-li-btn-primary:hover {
    color: rgba(201,174,120,0.97);
    border-color: rgba(201,174,120,0.55);
    background: rgba(201,174,120,0.1);
}

/* Secondary - Standard */
.sh-li-btn-secondary {
    background: none;
    color: rgba(201,174,120,0.72);
}

.sh-li-btn-secondary:hover {
    color: rgba(201,174,120,0.97);
    border-color: rgba(201,174,120,0.55);
    background: rgba(201,174,120,0.06);
}

.sh-li-btn-primary:hover i,
.sh-li-btn-secondary:hover i {
    opacity: 1;
}

/* Locked State Box */
.sh-li-locked {
    max-width: 600px;
    margin: 36px auto 0;
    padding: 24px 28px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(201,174,120,0.12);
    text-align: center;
}

.sh-li-locked-icon {
    font-size: 1.1rem;
    color: rgba(201,174,120,0.3);
    margin-bottom: 12px;
}

.sh-li-locked-title {
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(201,174,120,0.5);
    font-weight: 700;
    margin-bottom: 8px;
}

.sh-li-locked-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.32);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .sh-li-intro {
        font-size: 0.82rem;
        padding: 0 20px;
    }
    .sh-li-distances {
        gap: 16px;
        padding: 0 20px;
    }
    .sh-li-dist-badge {
        font-size: 0.72rem;
    }
    .sh-li-actions {
        flex-direction: column;
        gap: 14px;
        padding: 0 20px;
    }
    .sh-li-btn-primary,
    .sh-li-btn-secondary {
        width: 100%;
        max-width: 320px;
    }
    .sh-li-locked {
        margin: 28px 20px 0;
        padding: 20px 24px;
    }
}

/* =========================================================
   MAP MODAL — LOCATION DOSSIER
   Header: kicker + area title + property subline + mode chip.
   Body: Leaflet map. Footer: real distance chips (+ privacy
   note in approx mode). Leaflet skin lives further below.
========================================================= */
.sh-map-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* visibility (not just pointer-events) — Leaflet layers and controls
       re-enable their own pointer-events, so a merely transparent modal
       still swallows clicks meant for the page underneath. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    padding: 20px;
}

.sh-map-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease;
}

.sh-map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    cursor: pointer;
}

.sh-map-panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(155deg, rgba(13,16,22,0.97), rgba(6,8,14,0.96));
    border: 1px solid rgba(201,174,120,0.16);
    border-radius: 6px;
    width: 100%;
    max-width: 1040px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    transform: translateY(18px) scale(0.99);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-map-modal.is-open .sh-map-panel { transform: translateY(0) scale(1); }

.sh-map-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 76px 20px 32px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.sh-map-kicker {
    display: block;
    font-size: 0.6rem;
    color: rgba(201,174,120,0.6);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.sh-map-title {
    font-family: var(--font-head, serif);
    font-size: 1.55rem;
    color: rgba(255,250,242,0.92);
    margin: 0;
    font-weight: 400;
    line-height: 1.15;
}

.sh-map-subline {
    margin: 7px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
}

.sh-map-mode {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.sh-map-mode i { font-size: 0.72rem; }
.sh-map-mode.is-exact {
    color: rgba(201,174,120,0.95);
    border: 1px solid rgba(201,174,120,0.35);
    background: rgba(201,174,120,0.07);
}
.sh-map-mode.is-approx {
    color: rgba(201,174,120,0.8);
    border: 1px dashed rgba(201,174,120,0.4);
    background: rgba(201,174,120,0.04);
}

.sh-map-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    width: 38px;
    height: 38px;
    background: rgba(5,8,14,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 999px;
}

.sh-map-close:hover,
.sh-map-close:focus-visible {
    background: rgba(201,174,120,0.14) !important;
    border-color: var(--sp-gold) !important;
    color: var(--sp-gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

.sh-map-body {
    padding: 0;
    flex: 1;
    min-height: 0;
}

.sh-map-body #propertyMap {
    height: min(58vh, 560px);
    width: 100%;
    margin-top: 0;
    border: none;
    border-radius: 0;
}

.sh-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    flex-wrap: wrap;
    padding: 14px 32px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(5,8,14,0.55);
    flex-shrink: 0;
}

.sh-map-dist {
    display: flex;
    align-items: center;
    gap: 10px 26px;
    flex-wrap: wrap;
}
.sh-map-dist__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
}
.sh-map-dist__chip i {
    font-size: 0.7rem;
    color: rgba(201,174,120,0.55);
    align-self: center;
}
.sh-map-dist__lbl {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
}
.sh-map-dist__val {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
}

.sh-map-note {
    margin: 0;
    font-size: 0.68rem;
    font-style: italic;
    color: rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
    .sh-map-panel {
        max-height: 92vh;
    }
    .sh-map-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 64px 16px 20px;
    }
    .sh-map-title { font-size: 1.3rem; }
    .sh-map-body #propertyMap {
        height: min(52vh, 420px);
    }
    .sh-map-footer {
        padding: 12px 20px;
    }
    .sh-map-dist { gap: 8px 18px; }
}

/* =========================================================
   DISTANCES — REFINED SVG TIMELINE
========================================================= */
.sh-section.sh-distances {
    padding: 40px 0 45px;
    background: transparent;
}

.sh-flow-container {
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 20px;
}

.sh-flow-title {
    text-align: center;
    font-size: 0.58rem; 
    letter-spacing: 3.2px; 
    color: rgba(201,174,120,0.4);
    text-transform: uppercase; 
    font-weight: 700; 
    margin-bottom: 28px;
}

/* SVG SETUP - Compact */
.sh-svg-canvas {
    width: 100%; 
    height: auto;
    overflow: visible; 
    display: block;
}

/* TRACK - Thinner, more elegant */
.track-base {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 0.8;
}

/* DOTS - Smaller, refined */
.pt-dot {
    fill: var(--sp-gold);
    stroke: var(--sp-bg);
    stroke-width: 1.5;
    r: 4;
}

/* TYPOGRAPHY - Compact */
.pt-val {
    font-family: var(--font-head);
    font-size: 32px;
    fill: rgba(255,248,238,0.88);
    font-weight: 300;
    transform: translateY(-6px);
}

.pt-unit {
    font-size: 18px;
    fill: rgba(255,255,255,0.4);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

.pt-lbl {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    letter-spacing: 1.8px;
    fill: rgba(201,174,120,0.7);
    font-weight: 600;
    text-transform: uppercase;
    transform: translateY(12px);
}

/* Icons - Smaller, subtle */
.pt-ico-s {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    fill: rgba(255,255,255,0.3);
    transform: translateY(26px);
}


/* --- MOBILE DISTANCES --- */
.sh-mobile-dist { display: none; }

@media (max-width: 850px) {
    .sh-svg-canvas { display: none; }
    
    .sh-mobile-dist {
        position: relative;
        margin-top: 24px;
        display: flex; 
        flex-direction: column; 
        gap: 32px;
        padding-bottom: 16px;
        padding-top: 32px;
    }

    /* Spine line */
    .sh-spine-line {
        position: absolute; 
        left: 50%; 
        top: 0; 
        bottom: 0;
        width: 1px; 
        background: rgba(255,255,255,0.08);
        transform: translateX(-50%); 
        z-index: 0;
        overflow: hidden;
    }
    
    .sh-m-row {
        position: relative; 
        width: 100%;
        display: flex; 
        align-items: flex-start; 
        z-index: 2;
    }

    .sh-m-center-dot {
        position: absolute; 
        left: 50%; 
        transform: translateX(-50%);
        margin-top: 4px; 
        width: 10px; 
        height: 10px;
        display: flex; 
        align-items: center; 
        justify-content: center;
        background: transparent;
    }
    
    .m-dot {
        width: 6px; 
        height: 6px; 
        background: var(--sp-gold);
        border-radius: 50%;
    }

    .sh-m-content { 
        width: 45%; 
        display: flex; 
        flex-direction: column; 
        gap: 2px; 
    }
    
    .sh-m-row.is-left { justify-content: flex-start; }
    .sh-m-row.is-left .sh-m-content { 
        text-align: right; 
        margin-right: auto; 
        padding-right: 18px; 
    }
    
    .sh-m-row.is-right { justify-content: flex-end; }
    .sh-m-row.is-right .sh-m-content { 
        text-align: left; 
        margin-left: auto; 
        padding-left: 18px; 
    }

    .sh-m-lbl {
        font-family: var(--font-body); 
        font-size: 0.72rem;
        color: rgba(201,174,120,0.7); 
        text-transform: uppercase; 
        font-weight: 600;
        letter-spacing: 1.2px; 
        display: flex; 
        align-items: center; 
        gap: 6px; 
        line-height: 1.2;
    }
    
    .sh-m-val {
        font-family: var(--font-head); 
        font-size: 1rem;
        color: rgba(255,255,255,0.75); 
        font-weight: 300;
    }

    .is-left .sh-m-lbl { justify-content: flex-end; }
    .is-right .sh-m-lbl { justify-content: flex-start; }
    .sh-m-lbl i { 
        font-size: 0.8rem; 
        color: rgba(255,255,255,0.45); 
    }
}
	


/* =========================================================
   Mobile Inquiry: fullscreen dossier panel (no page scroll)
   ========================================================= */
html.sh-lock, body.sh-lock { overflow: hidden !important; }

@media (max-width: 900px){

  /* make the sidebar inquiry a hidden fullscreen panel */
  #inquiryForm{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    /* "closed" state */
    transform: translateY(110%);
    transition: transform 260ms ease;
    will-change: transform;

    /* panel backdrop */
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* safe area */
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  }

  #inquiryForm.is-open{ transform: translateY(0); }

  /* full-height card, edge-to-edge */
  #inquiryForm .sh-side-card{
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 22px 18px 18px 18px;
    display: flex;
    flex-direction: column;
  }

  .sh-mobile-close {
    display: flex !important;
    margin-top: 12px;
  }

  /* keep content inside viewport without page scroll */
  #inquiryForm .sh-side-card .h2-underline{ margin-bottom: 14px; }
  #inquiryForm .sh-side-card p{ margin-bottom: 16px; }

  #inquiryForm .sh-form{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: auto; /* allows tiny screens to still work */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #inquiryForm .sh-form::-webkit-scrollbar{ width: 0; height: 0; }

  #inquiryForm .sh-form textarea{ flex: 1; min-height: 92px; resize: none; }

  /* ensure CTA buttons stay visible */
  #inquiryForm .sh-form button.btn,
  #inquiryForm .sh-form a.btn{ flex: 0 0 auto; }

  /* mobile bar always present (except hero / open panel) is handled by JS */
}

/* --- PREMIUM LOCK OVERLAYS --- */
.sh-locked-wrapper {
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    margin-bottom: 40px;
    border: 1px solid rgba(201, 174, 120, 0.15);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.sh-locked-bg {
    width: 100%;
    height: 350px;
    object-fit: cover;
    filter: blur(10px) grayscale(52%) contrast(1.08);
    opacity: 0.44;
    display: block;
}
.sh-locked-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(5, 8, 14, 0.28), rgba(5, 8, 14, 0.68));
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 26px;
}
.sh-locked-content i {
    display: block;
    font-size: 1.08rem;
    color: var(--sp-gold);
    margin-bottom: 14px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}
.sh-locked-content h3 {
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.8rem;
    margin: 0 0 10px;
}
.sh-locked-content p {
    color: rgba(255,255,255,0.72);
    font-size: 0.9rem;
    max-width: 420px;
    margin: 0;
}

.sh-gallery-vault {
    position: relative;
    min-height: 410px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-card);
    overflow: hidden;
    background: #060b13;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
.sh-gallery-vault__bg {
    position: absolute;
    inset: -10px;
}
.sh-gallery-vault__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(12px) brightness(0.32);
    transform: scale(1.05);
}
.sh-gallery-vault::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,8,14,0.28), rgba(5,8,14,0.6));
    z-index: 1;
}
.sh-gallery-vault__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 28px;
    max-width: 460px;
}
.sh-gallery-vault__content h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
}
.sh-gallery-vault__content p {
    margin: 0 auto;
    color: rgba(255,255,255,0.74);
    max-width: 36ch;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================================
   CLASSIFIED PREVIEW (teaser grid — locked selective only)
   1-2 owner-curated photos + a veiled "+N photos" vault tile
   that opens the clearance request modal (js-open-request).
========================================================= */
/* Locked state reuses the unlocked bento geometry (.sh-mosaic-grid.layout-bento):
   teaser 1 big left, teaser 2 top right, vault tile bottom right.
   Teasers are stills — no lightbox, no hover, no pointer. */
.sh-mos-item--still { cursor: default; }
.sh-mos-item--still:hover img { transform: none; }
/* Single-teaser case: the vault fills the whole right column */
.sh-teaser-bento .sh-teaser-vault.item-1 { grid-row: 1 / 3; }
/* Locked item-0: the whole photo opens the preview popup (pill is decorative,
   clicks land on the parent — same pattern as unlocked).
   Until 2026-08-30 desktop was deliberately inert (pointer-events:none), so a
   desktop visitor clicked the teaser and nothing happened — the popup existed
   but was reachable on phones only. Now both breakpoints behave the same. */
.sh-teaser-tap { cursor: pointer; }
/* Locked preview popup (#fsView variant): teaser stills keep full brightness, no zoom */
.sh-fs-item--still { cursor: default; }
.sh-fs-item--still img { opacity: 1; }
.sh-fs-item--still:hover img { transform: none; }
.sh-teaser-vault {
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.sh-teaser-vault__bg {
    display: block;
    position: absolute;
    inset: -10px;
}
.sh-teaser-vault__bg img {
    filter: blur(12px) brightness(0.32);
    transform: scale(1.05);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.sh-teaser-vault:hover .sh-teaser-vault__bg img,
.sh-teaser-vault:focus-visible .sh-teaser-vault__bg img,
.sh-teaser-vault:active .sh-teaser-vault__bg img {
    transform: scale(1.12);
}
.sh-teaser-vault::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,8,14,0.28), rgba(5,8,14,0.6));
    z-index: 1;
    transition: background .3s ease;
}
.sh-teaser-vault:hover::after,
.sh-teaser-vault:focus-visible::after {
    background: linear-gradient(180deg, rgba(5,8,14,0.18), rgba(5,8,14,0.5));
}
.sh-teaser-vault:focus-visible {
    outline: 1px solid var(--sp-gold);
    outline-offset: -1px;
}
.sh-teaser-vault__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 0 16px;
}
.sh-teaser-vault__content i {
    color: var(--sp-gold);
    font-size: 0.75rem;
    opacity: 0.9;
}
@keyframes shVaultLockBreath {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.sh-teaser-vault:hover .sh-teaser-vault__content i,
.sh-teaser-vault:focus-visible .sh-teaser-vault__content i {
    animation: shVaultLockBreath .9s ease 1;
}
.sh-teaser-vault__seal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.66rem;
    color: var(--sp-gold);
}
.sh-teaser-vault__row {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 2px;
}
.sh-teaser-vault__num {
    font-family: var(--font-head);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1;
    color: #fff;
}
.sh-teaser-vault__lbl {
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.85);
}
.sh-teaser-vault__sub {
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .sh-teaser-vault__bg img { transition: none; }
    .sh-teaser-vault:hover .sh-teaser-vault__content i,
    .sh-teaser-vault:focus-visible .sh-teaser-vault__content i { animation: none; }
}

.sh-clearance-box {
    background: rgba(255,255,255,0.02);
    padding: 16px;
    border-radius: calc(var(--r-card) - 6px);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 24px;
}
.sh-clearance-box__label {
    font-size: 0.72rem;
    color: var(--sp-gold);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.sh-token-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.sh-token-form input {
    padding: 13px 14px !important;
    flex: 1;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 12px !important;
    background: #05080E !important;
    color: #fff !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sh-token-form input:focus {
    border-color: var(--sp-gold) !important;
    box-shadow: 0 0 0 3px rgba(201,174,120,.15);
    outline: none;
}
.sh-token-error-msg {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #fca5a5;
}

.sh-token-error-msg:empty {
    display: none;
}
.sh-form-steps {
    margin-bottom: 20px;
}
.sh-form-steps__meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
}
.sh-step-count {
    color: rgba(255,255,255,0.5);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.sh-step-nodes { display:flex; align-items:center; gap:7px; }
.sh-step-node {
    width:25px; height:25px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.14);
    display:flex; align-items:center; justify-content:center;
    font-size:0.72rem; color:rgba(255,255,255,0.5);
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.sh-step-node.is-on { border-color:var(--sp-gold); background:var(--sp-gold); color:#0A1320; font-weight:600; }
.sh-step-node.is-done { border-color:var(--sp-gold); color:var(--sp-gold); }
.sh-step-bar { width:26px; height:1px; background:rgba(255,255,255,0.14); transition: background .25s ease; }
.sh-step-bar.is-on { background:var(--sp-gold); }
.sh-rq-h {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 500;
    color:#fff;
    margin: 0 0 4px;
    line-height: 1.2;
}
.sh-rq-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.56);
    line-height: 1.55;
    margin: 0 0 18px;
}
.sh-form-step {
    display:none;
}
.sh-form-step.is-active {
    display:block;
}
.sh-form-grid {
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.sh-form-grid > * {
    min-width: 0;
}
.sh-form-grid .is-full {
    grid-column: auto;
}
.sh-field-note {
    color: rgba(255,255,255,0.44);
    font-size: 0.74rem;
    line-height: 1.5;
    margin: 8px 0 0;
}
.sh-step-actions {
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
}
.sh-step-actions .btn {
    width: 100%;
}
.sh-step-actions--split {
    grid-template-columns: auto 1fr;
}

/* Step entrance + intra-step spacing */
.sh-form-step.is-active {
    animation: shStepIn .32s ease both;
}
.sh-form-step > * + * {
    margin-top: 16px;
}
.sh-form-step > .sh-rq-sub {
    margin-top: 0;
}
@keyframes shStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Selectable chips (buyer type / timeline / purpose) */
.sh-chip-field {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.sh-chip-field legend.sh-form-label {
    padding: 0;
    margin-bottom: 10px;
}
.sh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sh-chip {
    position: relative;
    display: inline-flex;
}
.sh-single-public .sh-form .sh-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.sh-chip span {
    display: block;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.2;
    color: rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.sh-chip:hover span {
    border-color: rgba(201,174,120,0.40);
    color: #fff;
}
.sh-chip input:checked + span {
    border-color: var(--sp-gold);
    background: rgba(201,174,120,0.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(201,174,120,0.50);
}
.sh-chip input:focus-visible + span {
    box-shadow: 0 0 0 2px rgba(201,174,120,0.45);
}

/* "optional" tag inside a label */
.sh-opt {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .sh-form-step.is-active { animation: none; }
}

.sh-form .is-hidden {
    display:none !important;
}
.sh-mobile-close {
    display: none !important;
}
@media (max-width: 768px) {
    .sh-gallery-vault {
        min-height: 320px;
    }
    .sh-gallery-vault__content {
        padding: 0 20px;
    }
    .sh-gallery-vault__content h3 {
        font-size: 1.5rem;
    }
    .sh-gallery-vault__content p {
        font-size: 0.9rem;
    }
    .sh-token-form {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   1. LOCAL INTELLIGENCE - THE TEASER (ON PAGE)
========================================================= */
/* =========================================================
   1. LOCAL INTELLIGENCE - TEASER (LEGAL POSITION STYLE)
========================================================= */
.sh-intel-teaser {
    position: relative;
    background: rgba(255,250,240,0.03);
    border: 1px solid rgba(201,174,120,0.14);
    border-radius: 0;
    padding: 36px 40px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.sh-intel-teaser::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,174,120,0.55) 25%, rgba(201,174,120,0.55) 75%, transparent);
    pointer-events: none;
}

.sh-intel-kicker {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.50rem;
    color: rgba(201,174,120,0.50);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 600;
}

.sh-intel-title {
    font-family: var(--font-head, serif);
    font-size: 1.55rem;
    color: rgba(255,250,242,0.88);
    margin: 0 0 10px 0;
    font-weight: 400;
    line-height: 1.18;
}

.sh-intel-desc {
    font-family: var(--font-body, sans-serif);
    font-size: 0.79rem;
    color: rgba(255,255,255,0.36);
    margin: 0 0 18px 0;
    line-height: 1.56;
    font-style: italic;
}

.sh-btn-reveal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: 1px solid rgba(201,174,120,0.28);
    color: rgba(201,174,120,0.72);
    font-size: 0.52rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: 11px 20px;
    cursor: pointer;
    font-family: var(--font-body, sans-serif);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    font-weight: 600;
}

.sh-btn-reveal::after {
    content: '→';
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.sh-btn-reveal:hover {
    color: rgba(201,174,120,0.97);
    border-color: rgba(201,174,120,0.55);
    background: rgba(201,174,120,0.06);
}

.sh-btn-reveal:hover::after {
    transform: translateX(3px);
}

/* =========================================================
   2. LOCAL INTELLIGENCE - THE CENTERED MODAL (POPUP) - PREMIUM DOSSIER
========================================================= */
.sh-intel-modal {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease; padding: 20px;
}
.sh-intel-modal.is-open { opacity: 1; pointer-events: auto; }
.sh-im-overlay {
    position: absolute; inset: 0; background: rgba(6, 8, 12, 0.78); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); cursor: pointer;
}

/* --- THE AGED PAPER PANEL --- */
.sh-im-panel {
    position: relative; z-index: 2; width: 100%; max-width: 700px; max-height: 86vh;
    overflow-y: auto; 
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.015)), #F4EFE4; 
    color: #1A202C;
    border: 1px solid rgba(140, 112, 72, 0.16); 
    border-radius: 4px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.42), 0 0 0 1px rgba(201,174,120,0.06);
    padding: 0; transform: translateY(22px) scale(0.985);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}
.sh-intel-modal.is-open .sh-im-panel { transform: translateY(0) scale(1); }
.sh-im-panel:focus { box-shadow: 0 40px 100px rgba(0,0,0,0.42), 0 0 0 1px rgba(201,174,120,0.06), 0 0 0 2px rgba(201,174,120,0.18); }
.sh-im-panel::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg, #B89B5E, #D4BC82, #B89B5E);
}
.sh-im-panel::-webkit-scrollbar { width: 5px; }
.sh-im-panel::-webkit-scrollbar-track { background: transparent; }
.sh-im-panel::-webkit-scrollbar-thumb { background: rgba(180,160,120,0.25); border-radius: 10px; }

/* --- CLOSE BUTTON --- */
.sh-im-close {
    position: absolute; top: 18px; right: 18px; z-index: 5;
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 999px;
    color: #A89678; font-size: 1.7rem; line-height: 1; cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.sh-im-close:hover { color: #2A2318; background: rgba(42,35,24,0.06); transform: scale(1.04); }
.sh-im-close:focus-visible { outline: none; color: #2A2318; background: rgba(42,35,24,0.08); box-shadow: 0 0 0 2px rgba(201,174,120,0.24); }

/* --- TYPOGRAPHY & HEADER --- */
.sh-im-header { padding: 46px 50px 28px; text-align: center; }
.sh-im-kicker {
    display: inline-block; font-family: var(--font-body); font-size: 0.62rem; color: #9A7B4F;
    text-transform: uppercase; letter-spacing: 3px; margin-bottom: 16px; font-weight: 700;
}
.sh-im-title {
    font-family: var(--font-head); font-size: 2.15rem; color: #111827; margin: 0 0 14px 0;
    font-weight: 400; line-height: 1.15; letter-spacing: 0.02em;
}
.sh-im-lead {
    font-size: 1rem; color: #6B7280; line-height: 1.78; font-style: italic; margin: 0 auto;
    max-width: 520px;
}
.sh-im-divider {
    display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 0;
}
.sh-im-divider::before, .sh-im-divider::after {
    content: ''; width: 62px; height: 1px; background: rgba(154,123,79,0.28);
}
.sh-im-divider-dot {
    width: 5px; height: 5px; background: #B89B5E; transform: rotate(45deg); flex-shrink: 0;
}

/* --- BODY & ROWS --- */
.sh-im-body { padding: 0 50px; }
.sh-im-row {
    display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: baseline;
    padding: 20px 0; border-bottom: 1px solid rgba(42,35,24,0.08);
}
.sh-im-label {
    font-family: var(--font-body); font-size: 0.62rem; color: #9A7B4F;
    text-transform: uppercase; letter-spacing: 2px; font-weight: 700; padding-top: 2px;
}
.sh-im-val { font-size: 0.96rem; color: #463C31; line-height: 1.72; }

/* --- FIT COLUMNS --- */
.sh-im-fit {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid rgba(42,35,24,0.08);
}
.sh-im-fit-col { padding: 24px 0; }
.sh-im-fit-col.is-for { padding-right: 24px; border-right: 1px solid rgba(42,35,24,0.08); }
.sh-im-fit-col.is-not { padding-left: 24px; }
.sh-im-fit-label {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.62rem;
    text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 12px;
}
.sh-im-fit-label::before {
    content: ''; width: 6px; height: 6px; border-radius: 999px; display: inline-block; flex-shrink: 0;
}
.sh-im-fit-col.is-for .sh-im-fit-label { color: #5E8A62; }
.sh-im-fit-col.is-for .sh-im-fit-label::before { background: #5E8A62; }
.sh-im-fit-col.is-not .sh-im-fit-label { color: #A65D5D; }
.sh-im-fit-col.is-not .sh-im-fit-label::before { background: #A65D5D; }
.sh-im-fit-col .sh-im-val { font-size: 0.92rem; color: #463C31; line-height: 1.66; }

/* --- THE EXECUTIVE MEMO --- */
.sh-im-honest {
    margin: 35px 0 10px; 
    padding: 22px 26px; 
    background: #ECE3CF; 
    border-left: 2px solid #B8924F; 
    border-radius: 0 4px 4px 0;
}
.sh-im-honest-label {
    display: block; font-family: var(--font-body); font-size: 0.62rem; color: #9A7B4F;
    text-transform: uppercase; letter-spacing: 2.5px; font-weight: 700; margin-bottom: 8px;
}
.sh-im-honest p { font-size: 1.02rem; color: #463C31; line-height: 1.7; margin: 0; font-style: italic; }

/* --- FOOTER --- */
.sh-im-footer {
    margin-top: 30px; padding: 0 50px 36px; display: flex; justify-content: space-between; align-items: baseline;
}
.sh-im-sig { font-family: var(--font-head); font-size: 1.12rem; font-style: italic; color: #8A7D6B; }
.sh-im-date {
    font-family: var(--font-body); font-size: 0.56rem; color: #B5A68A;
    text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600;
}

/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
    .sh-intel-teaser { 
        padding: 28px 20px;
        margin: 0 16px;
    }
    .sh-intel-title {
        font-size: 1.35rem;
    }
    .sh-intel-desc {
        font-size: 0.82rem;
    }
    .sh-im-panel { max-height: 88vh; }
    .sh-im-header { padding: 38px 28px 24px; }
    .sh-im-title { font-size: 1.85rem; }
    .sh-im-divider::before, .sh-im-divider::after { width: 42px; }
    .sh-im-body { padding: 0 28px; }
    .sh-im-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
    .sh-im-fit { grid-template-columns: 1fr; }
    .sh-im-fit-col.is-for { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(42,35,24,0.08); }
    .sh-im-fit-col.is-not { padding-left: 0; }
    .sh-im-honest { margin-top: 30px; padding: 20px 22px; }
    .sh-im-footer { padding: 0 28px 30px; flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* =========================================================
   BEACH ROUTE — link on the Area Brief's Beach row + full-screen photo
   The link is styled for the cream "aged paper" panel it sits on; the photo
   opens above that panel (z-index 10050 vs the Area Brief modal's 10000).
   Both only exist when the file is open — the gate lives in PHP.
========================================================= */
/* The link is a horizontal echo of the hero scroll cue (.sh-scroll-cue in
   sh-core.css): a hairline track with a gold dash travelling along it, plus an
   arrow that nudges on hover. No box, no fill — it reads as editorial, not as a
   form control, which is what the cream panel needs. */
.sh-br-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: 0;
    color: #9A7B4F;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s ease;
}
.sh-br-link:hover,
.sh-br-link:focus-visible {
    color: #2A2318;
    outline: none;
}

.sh-br-link__track {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 46px;
    height: 1px;
    background: rgba(154, 123, 79, 0.22);
    overflow: hidden;
    transition: background 0.3s ease;
}
.sh-br-link__dash {
    position: absolute;
    inset: 0;
    background: #B89B5E;
    animation: shBrDash 2.2s ease-in-out infinite;
}
@keyframes shBrDash {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.sh-br-link:hover .sh-br-link__track,
.sh-br-link:focus-visible .sh-br-link__track { background: rgba(154, 123, 79, 0.42); }

.sh-br-link__arw {
    font-size: 0.64rem;
    opacity: 0.55;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.sh-br-link:hover .sh-br-link__arw,
.sh-br-link:focus-visible .sh-br-link__arw {
    transform: translateX(3px);
    opacity: 1;
}

.sh-br-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
}
.sh-br-modal.is-open { display: block; }

.sh-br-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 10, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

/* The viewport is the scroller. The figure centres with margin:auto rather than
   justify-content, because a flex item wider than its container gets its left
   edge clipped when centred that way — and a zoomed map is exactly that. */
.sh-br-modal__viewport {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: 26px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    outline: none;
    animation: sh-br-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sh-br-in {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

/* Fixed, not absolute: the viewport scrolls when a zoomed map is panned, and the
   close button must not scroll away with it. */
.sh-br-modal__close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.sh-br-modal__close:hover,
.sh-br-modal__close:focus-visible {
    color: var(--sp-gold);
    background: rgba(201, 174, 120, 0.12);
    border-color: rgba(201, 174, 120, 0.5);
    outline: none;
}

.sh-br-fig { margin: auto; }

/* Default state always shows the WHOLE route — a path that runs off the screen
   tells the reader nothing. Zooming is then opt-in for the small labels. */
.sh-br-fig__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 78vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
}
.sh-br-modal.is-zoomed .sh-br-fig__img {
    max-width: none;
    max-height: none;
    width: 150vw;
    cursor: zoom-out;
}

.sh-br-fig__cap {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.62);
}

.sh-br-fig__hint {
    display: none;
    margin-top: 9px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

/* Zoomed, the caption and hint would sit off to one side of a very wide map, so
   they step aside and give the photo the whole viewport. */
.sh-br-modal.is-zoomed .sh-br-fig__cap,
.sh-br-modal.is-zoomed .sh-br-fig__hint { display: none; }

@media (max-width: 700px) {
    .sh-br-modal__viewport { padding: 12px; }
    /* A route map carries small labels (distance, walking time), unreadable at
       phone width. Fit it whole first, then zoom further than on desktop. */
    .sh-br-modal.is-zoomed .sh-br-fig__img { width: 265vw; }
    .sh-br-fig__cap { font-size: 0.7rem; }
    .sh-br-fig__hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-br-modal__viewport { animation: none; }
    .sh-br-link__dash { animation: none; }
}

/* =========================================================
   ADVISOR'S ASSESSMENT (INSET EDITORIAL LAYER)
========================================================= */

.sh-advisor-inset {
    margin: 42px 0 14px;
    padding-left: 24px;
    border-left: 1px solid rgba(201,174,120,0.24);
    max-width: 760px;
}

.sh-advisor-kicker {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.56rem;
    color: rgba(201,174,120,0.92);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 600;
    margin-bottom: 14px;
}

.sh-advisor-locked-txt {
    margin: 0;
    color: rgba(255,248,238,0.46);
    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.72;
    max-width: 46ch;
}

.sh-advisor-text {
    color: rgba(255,248,238,0.76);
    font-size: 1.02rem;
    line-height: 1.9;
    margin: 0 0 16px;
    max-width: 60ch;
    font-style: italic;
}
.sh-advisor-sig {
    font-family: var(--font-head, serif);
    font-size: 0.96rem;
    font-style: italic;
    color: rgba(201,174,120,0.62);
    margin-bottom: 24px;
}

/* =========================================================
   ASSET PROFILE - PROGRESS BARS REDESIGN
========================================================= */
.sh-ap-matrix {
    max-width: 580px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 44px;
}
.sh-ap-matrix.has-top-border {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.045);
}

.sh-ap-row {
    margin-bottom: 0;
}
.sh-ap-row:last-child {
    margin-bottom: 0;
}

.sh-ap-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.sh-ap-lbl {
    font-family: var(--font-body, sans-serif);
    font-size: 0.7rem;
    color: rgba(255,248,238,0.65);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.sh-ap-score {
    font-family: var(--font-body, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,248,238,0.34);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.sh-ap-row.tone-0 .sh-ap-score { color: rgba(255,255,255,0.24); }
.sh-ap-row.tone-1 .sh-ap-score { color: rgba(158,134,102,0.60); }
.sh-ap-row.tone-2 .sh-ap-score { color: rgba(177,149,109,0.70); }
.sh-ap-row.tone-3 .sh-ap-score { color: rgba(193,164,118,0.80); }
.sh-ap-row.tone-4 .sh-ap-score { color: rgba(205,176,124,0.90); }
.sh-ap-row.tone-5 .sh-ap-score { color: rgba(212,187,136,0.96); }

.sh-ap-score.is-exceptional {
    color: #C9AE78;
    text-shadow: 0 0 12px rgba(201,174,120,0.35);
    font-weight: 800;
    letter-spacing: 0.14em;
}

/* Asset Profile meter — a calibrated hairline with a luminous node at the score.
   --ap-pct (0–100%) drives both the gold fill length and the node position. */
.sh-ap-meter {
    position: relative;
    height: 16px;
}
/* full-scale hairline (the "potential") */
.sh-ap-meter__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.10);
}
/* gold gradient line up to the score */
.sh-ap-meter__fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    width: var(--ap-pct, 0%);
    transform: translateY(-50%) scaleX(1);
    transform-origin: left center;
    background: linear-gradient(to right, rgba(201,174,120,0.20), var(--sp-gold));
}
/* luminous node that lands on the score position */
.sh-ap-meter__node {
    position: absolute;
    top: 50%;
    left: var(--ap-pct, 0%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(201,174,120,0.12), 0 0 10px 2px rgba(201,174,120,0.45);
}

/* Exceptional — the node becomes a diamond with a stronger aura,
   so it reads apart from a plain 5/5 even though both sit at 100%. */
.sh-ap-row.is-exceptional .sh-ap-meter__fill {
    background: linear-gradient(to right, rgba(201,174,120,0.35), var(--sp-gold));
}
.sh-ap-row.is-exceptional .sh-ap-meter__node {
    width: 9px;
    height: 9px;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 0 3px rgba(201,174,120,0.16), 0 0 14px 3px rgba(201,174,120,0.6);
}

/* Per-row stagger (inherited delay token) */
.sh-ap-row:nth-child(2) { --row-delay: 0.08s; }
.sh-ap-row:nth-child(3) { --row-delay: 0.16s; }
.sh-ap-row:nth-child(4) { --row-delay: 0.24s; }

/* Animated entrance — only when JS adds .sh-ap-anim (motion allowed).
   Default state is the final state, so no-JS / reduced-motion render correctly.
   The line draws in first, then the node lights up and lands. */
.sh-ap-anim .sh-ap-meter__fill {
    transform: translateY(-50%) scaleX(0);
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--row-delay, 0s);
}
.sh-ap-anim.is-charged .sh-ap-meter__fill {
    transform: translateY(-50%) scaleX(1);
}
.sh-ap-anim .sh-ap-meter__node {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--row-delay, 0s) + 0.5s);
}
.sh-ap-anim.is-charged .sh-ap-meter__node {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.sh-ap-anim .sh-ap-row.is-exceptional .sh-ap-meter__node {
    transform: translate(-50%, -50%) rotate(45deg) scale(0.2);
}
.sh-ap-anim.is-charged .sh-ap-row.is-exceptional .sh-ap-meter__node {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

@media (max-width: 768px) {
    .sh-advisor-inset {
        padding-left: 18px;
        margin: 34px 0 10px;
    }
    .sh-advisor-text {
        font-size: 0.98rem;
        line-height: 1.82;
    }
    .sh-ap-matrix {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =========================================================
   v8 Conservative Concept Pass — Overrides
========================================================= */

.sh-single-public h2.h2-underline::before{ content:none !important; display:none !important; }
.sh-single-public h2.h2-underline::after{
  display:none;
  content:none;
}
.sh-gal-head .h2-underline{ margin-bottom:0; }

/* Quieter aside */
.sh-single-public .sh-sp-grid{ grid-template-columns:1fr 350px; gap:56px; }
.sh-single-public .sh-sp-side{ align-self:start; }
.sh-side-stack{
  display:grid;
  gap:12px;
  position:static;
  top:auto;
  max-height:none;
}
.sh-side-card{ padding:26px; }
.sh-side-card h3{ color:#fff; font-size:1.1rem; margin:0 0 14px; }
.sh-side-price{ font-family:var(--font-head); font-size:2rem; line-height:1; color:rgba(255,248,238,0.92); margin:8px 0 10px; }
.sh-side-sub{ color:rgba(255,255,255,.58); font-size:.88rem; line-height:1.6; }
.sh-side-specs{ display:grid; gap:12px; }
.sh-side-spec{ display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.sh-side-spec:last-child{ border-bottom:none; padding-bottom:0; }
.sh-side-spec span{ color:rgba(255,255,255,.44); font-size:.72rem; text-transform:uppercase; letter-spacing:1.2px; }
.sh-side-spec strong{ color:#fff; font-weight:500; text-align:right; }
.sh-side-wa-copy{ color:rgba(255,255,255,.58); font-size:.86rem; line-height:1.6; margin:0 0 12px; }
.sh-side-wa-box textarea{
  width:100%; min-height:110px; resize:vertical;
  background:rgba(5,8,14,.62); border:1px solid rgba(255,255,255,.1); color:#fff;
  padding:14px 15px; border-radius:4px; outline:none;
}
.sh-side-wa-box textarea:focus{ border-color:rgba(201,174,120,.56); box-shadow:0 0 0 1px rgba(201,174,120,.22); }
.sh-side-note{ margin-top:10px; color:rgba(255,255,255,.35); font-size:.75rem; line-height:1.5; }


/* Amenities as rectangular tags */

.sh-amenity{
border:1px solid rgba(255,255,255,0.08);
padding:12px 16px;
font-size:14px;
color:#fff;
background:rgba(255,255,255,0.02);
}
.sh-amenity i{ display:none; }



/* Mobile/desktop form placement */
@media (max-width:900px){
  .sh-single-public .sh-sp-grid{ display:flex; flex-direction:column; gap:50px; }
  .sh-side-stack{ position:static; }
  .sh-request-section{ margin-top:44px; }
}

/* =========================================================
   v9 Final structure pass — sidebar + request modal
========================================================= */
.st-circulation-pill{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.sh-side-stack{
  gap:12px;
  top:108px;
}
.sh-side-card{ padding:22px; }
.sh-side-primary .sh-side-ref{
  margin:10px 0 14px;
  color:rgba(255,255,255,.34);
  font-size:.72rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.sh-side-specs--compact{ margin-top:2px; }
.sh-side-primary .sh-side-cta-wrap{ margin-top:16px; }
.sh-side-token-box .sh-token-form{ margin-top:12px; }
.sh-side-note--error{ color:#fca5a5; margin-bottom:10px; }
.sh-side-wa-box textarea{ min-height:96px; }

.sh-request-modal .sh-modal-bg{ background:rgba(0,0,0,0.82); backdrop-filter:blur(8px); }
.sh-request-modal__panel{
  align-items:center;
  width:100%;
  padding:28px 20px;
}
.sh-request-modal__card{
  position:relative;
  width:min(820px, 100%);
  max-height:90vh;
  max-height:90dvh; /* dynamic viewport: avoids the Android address-bar cutting off the close button */
  overflow:hidden;
  background: var(--sp-bg);
  border:1px solid rgba(201,174,120,.22);
  border-radius:18px;
  padding:0;
  display:grid;
  grid-template-columns:212px 1fr;
}
.sh-request-modal__close{
  position:absolute;
  top:12px; right:14px;
  z-index:5;
  display:none;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
  padding:0;
}
.sh-request-modal__close:hover{ opacity:1; color:var(--sp-gold); }
.sh-rq-done__close{ margin-top:22px; }
@media (max-width:600px){
  .sh-request-modal__close{ display:flex; }
  .sh-form-step[data-step="1"] .js-cancel{ display:none; }
  .sh-form-step[data-step="1"] .sh-step-actions{ grid-template-columns:1fr; }
}
.sh-request-modal #formAJAXWrapper{ max-width:none; }
/* Inside the request modal the side-card is only a wrapper — the modal itself
   already provides the surface. The reset here used to clear background, border
   and padding but NOT box-shadow, border-radius or backdrop-filter, all three of
   which .sh-single-public .sh-side-card also sets. A transparent element still
   casting `0 18px 40px rgba(0,0,0,.34)` and blurring what is behind it reads as
   a second, empty card floating inside the first — most visible on the "Request
   received" confirmation, where the wrapper is nearly the only thing rendered. */
.sh-request-modal .sh-side-card{
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Two-pane dossier: context rail + form pane */
.sh-rq-rail{
  background:#0A1320;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
}
.sh-rq-pane{ padding:26px 26px 28px; min-width:0; max-height:90vh; max-height:90dvh; overflow-y:auto; }
.sh-rq-pane .sh-form input:not([type=checkbox]):not([type=radio]),
.sh-rq-pane .sh-form select,
.sh-rq-pane .sh-form textarea{
  width:100% !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.16) !important;
  border-radius:12px !important;
  color:#fff !important;
  font-family:var(--font-body) !important;
  font-size:0.95rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:13px 15px !important;
  line-height:1.4 !important;
  box-shadow:none !important;
}

/* iOS focus zooms any control whose computed font-size is below 16px. This
   module's legacy !important declaration above outranks the shared safeguard,
   so repeat the 16px floor at the same local specificity on touch devices. */
@media (hover: none) and (pointer: coarse) {
  .sh-rq-pane .sh-form input:not([type=checkbox]):not([type=radio]),
  .sh-rq-pane .sh-form select,
  .sh-rq-pane .sh-form textarea {
    font-size:16px !important;
  }
}

/* The module's short background transition otherwise replaces the shared
   WebKit autofill safeguard and exposes Safari's yellow fill. Restore that
   same proven behaviour only inside the property request pane. Matching the
   two :not() clauses also keeps this rule above the field rule's specificity. */
.sh-rq-pane .sh-form input:not([type=checkbox]):not([type=radio]):-webkit-autofill,
.sh-rq-pane .sh-form input:not([type=checkbox]):not([type=radio]):-webkit-autofill:hover,
.sh-rq-pane .sh-form input:not([type=checkbox]):not([type=radio]):-webkit-autofill:focus {
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  transition:background-color 600000s 0s, color 600000s 0s !important;
}
.sh-rq-pane .sh-form textarea{ min-height:90px !important; resize:vertical; }
.sh-rq-pane .sh-form input:focus,
.sh-rq-pane .sh-form select:focus,
.sh-rq-pane .sh-form textarea:focus{
  border-color:var(--sp-gold) !important;
  background:rgba(255,255,255,0.07) !important;
  box-shadow:0 0 0 3px rgba(201,174,120,0.15) !important;
  outline:none !important;
}
.sh-rq-pane .sh-form ::placeholder{
  color:rgba(255,255,255,0.34) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  opacity:1;
}
.sh-rq-pane .sh-form select{
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C9AE78' stroke-width='1.6'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  padding-right:38px !important;
}
.sh-rq-pane .sh-form input[type=checkbox]{ accent-color:var(--sp-gold); width:16px; height:16px; }
.sh-rq-kicker{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sp-gold); margin-bottom:10px; }
.sh-rq-pname{ font-family:var(--font-head); font-size:1.4rem; font-weight:500; color:#fff; line-height:1.18; margin:0 0 7px; }
.sh-rq-ref{ font-size:.72rem; color:rgba(255,255,255,.5); letter-spacing:.04em; margin:0 0 18px; }
.sh-rq-rdiv{ height:1px; background:rgba(255,255,255,.1); margin:2px 0 15px; }
.sh-rq-rl{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.60); margin-bottom:12px; display:block; }
.sh-rq-item{ font-size:.78rem; color:rgba(255,255,255,.74); margin-bottom:11px; }
.sh-rq-railcopy{ font-size:.8rem; color:rgba(255,255,255,.6); line-height:1.6; margin:0 0 16px; }
.sh-rq-trust{ margin-top:auto; padding-top:18px; font-size:.68rem; line-height:1.5; color:rgba(255,255,255,.5); }
.sh-rq-done{ text-align:center; padding:28px 8px; }
.sh-rq-done i{ font-size:2.6rem; color:var(--sp-gold); }
.sh-rq-done h3{ font-family:var(--font-head); font-weight:500; font-size:1.3rem; color:#fff; margin:14px 0 8px; }
.sh-rq-done p{ font-size:.85rem; color:rgba(255,255,255,.56); line-height:1.6; margin:0 auto; max-width:300px; }

@media (max-width:900px){
  .sh-request-modal__panel{ padding:0; }
  .sh-request-modal__card{
    width:100vw;
    max-height:100vh; max-height:100dvh;
    height:100vh; height:100dvh;
    border:none; border-radius:0;
  }
}
@media (max-width:600px){
  /* grid-template-rows is load-bearing, not cosmetic. The card is height:100dvh,
     and stacking it into one column leaves it with two implicit AUTO rows — a
     grid with a definite height stretches auto rows to share the leftover space.
     So the rail, whose content is cut down to three short lines at this width,
     was being inflated to ~369px of an 844px screen: an all-but-empty box across
     the top 44% of the phone, a divider, then the real content adrift in the
     lower half. Measured before/after: rail 369px -> 135px.
     auto        = rail takes exactly what its content needs.
     minmax(0,1fr) = pane takes the rest AND may shrink below its content so it
     scrolls instead of overflowing the card (a bare 1fr refuses to). */
  .sh-request-modal__card{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .sh-rq-rail{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding:20px 18px; }
  .sh-rq-rl, .sh-rq-item, .sh-rq-trust, .sh-rq-rdiv, .sh-rq-railcopy{ display:none; }
  .sh-rq-seal{ margin-bottom:12px; }
  .sh-rq-pname{ font-size:1.25rem; }
  .sh-rq-pane{ padding:20px 18px 24px; }
  /* The confirmation is a few lines inside a now full-height pane, so centre it
     rather than pinning it to the top above a large void. Scoped with :has() so
     the FORM state keeps its normal top alignment; where :has() is unsupported
     this degrades to exactly that same top alignment. */
  .sh-rq-pane:has(.sh-rq-done){ display:flex; flex-direction:column; justify-content:center; }
}
/* =========================================================
   TECHNICAL APPENDIX (BOTTOM SPECS TABLE)
========================================================= */
.sh-appendix-wrap {
    border-top: 2px solid var(--sp-gold);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.01);
    padding: 0;
}
.sh-appendix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 στήλες στα Desktop */
}
.sh-appendix-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.sh-appendix-row:nth-child(even) {
    border-right: none;
}
/* Διορθώνει το border-bottom για τα 2 τελευταία στοιχεία */
.sh-appendix-row:nth-last-child(-n+2) {
    border-bottom: none;
}
.sh-apx-lbl {
    font-family: var(--font-body, sans-serif);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.sh-apx-val {
    font-family: var(--font-head, serif);
    font-size: 1.1rem;
    color: rgba(255,248,238,0.88);
    font-weight: 400;
}
.sh-apx-energy {
    font-family: var(--font-body, sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    color: #000;
    padding: 2px 10px;
    border-radius: 2px;
    white-space: nowrap;
}
/* Energy certificate: neutral states (Not required / In progress / not stated).
   These are not grades, so they get no traffic-light fill -- and the black text
   of .sh-apx-energy is unreadable on a dark neutral swatch anyway. */
.sh-apx-energy-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
    min-width: 0;
}
.sh-apx-energy--na {
    background: transparent;
    color: rgba(255, 248, 238, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-weight: 600;
    letter-spacing: 0.4px;
}
.sh-apx-note {
    font-family: var(--font-body, sans-serif);
    font-size: 0.62rem;
    line-height: 1.45;
    color: rgba(255, 248, 238, 0.45);
    letter-spacing: 0.3px;
    max-width: 30ch;
}

@media (max-width: 768px) {
    .sh-appendix-grid { grid-template-columns: 1fr; /* 1 στήλη στα κινητά */ }
    .sh-appendix-row { border-right: none; padding: 18px 20px; }
    .sh-appendix-row:nth-last-child(2) { border-bottom: 1px solid rgba(255,255,255,0.06); }
}

/* =========================================================
   PRIVATE GATE — sealed-file experience (private tier, locked)
   No property media is rendered here by design. The only image
   is a decorative chart of the whole island (no marker), so the
   gate never hints at the protected location.
   Mobile: one scrolling column. Laptop (≥1024px): one screen —
   identity + access on the left, island plate on the right,
   file index and compact legal links along the bottom.
========================================================= */
.sh-private-gate {
    --pg-gold: var(--gold, #C9AE78);
    --pg-ink: #070D15;
    --pg-text: #F4F1EA;
    --pg-muted: #AEB6BF;
    --pg-faint: #8E98A4;
    --pg-hair: rgba(201,174,120,.2);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    padding: 124px 20px 56px;
    color: var(--pg-text);
    background:
        radial-gradient(90% 55% at 50% 12%, #142233 0%, transparent 70%),
        linear-gradient(180deg, #08111B 0%, var(--navy-dark, #0A1320) 55%, #060A11 100%);
}

.sh-pg-stage {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

/* Island chart plate. The plate must never become a stacking context
   (no z-index/opacity/transform on it), so the map stays behind the text.
   Coastline derived from skiathos-island.svg; offset lines are decorative. */
.sh-pg-plate {
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
/* Phones: island ≈ 90% of the screen width, behind the eyebrow and title only. */
.sh-pg-plate__map {
    position: absolute;
    z-index: -2;
    left: 0; top: 34px;
    width: max(200vw, 720px);
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -54.8%);
    background: url("../maps/skiathos-coast.svg") center / 100% 100% no-repeat;
    opacity: .42;
    -webkit-mask-image: radial-gradient(34% 44% at 50% 54.8%, #000 55%, transparent 100%);
            mask-image: radial-gradient(34% 44% at 50% 54.8%, #000 55%, transparent 100%);
}
.sh-pg-plate__tag,
.sh-pg-plate__north,
.sh-pg-seal { display: none; }

.sh-pg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body, sans-serif);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--pg-gold);
    margin-bottom: 20px;
}
.sh-pg-eyebrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid rgba(201,174,120,.45);
    border-radius: 50%;
    font-size: .64rem;
    letter-spacing: 0;
    background: rgba(7,13,21,.6);
    box-shadow: 0 0 22px rgba(201,174,120,.18);
}
.sh-pg-title {
    font-family: var(--font-head, serif);
    font-weight: 400;
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.01em;
    color: #fff;
    margin: 0 0 16px;
    overflow-wrap: break-word;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(7,13,21,.65);
}
.is-title-long .sh-pg-title  { font-size: clamp(2.1rem, 9vw, 2.9rem); }
.is-title-xlong .sh-pg-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
.sh-pg-ref {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-body, sans-serif);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pg-faint);
    margin: 0 0 22px;
}
.sh-pg-ref::before,
.sh-pg-ref::after {
    content: "";
    width: 28px; height: 1px;
    background: rgba(201,174,120,.5);
}
.sh-pg-lead {
    font-family: var(--font-body, sans-serif);
    font-size: .95rem;
    line-height: 1.75;
    color: var(--pg-muted);
    max-width: 46ch;
    margin: 0 auto;
}

/* Access console */
.sh-pg-access {
    margin: 32px auto 0;
    max-width: 520px;
    text-align: left;
}
.sh-pg-access__label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--pg-gold);
    margin: 0 0 10px;
}
.sh-private-gate .sh-pg-form:not(.sh-token-form--ready) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
.sh-private-gate .sh-pg-form:not(.sh-token-form--ready) input {
    min-width: 0;
    width: 100%;
    height: 54px;
    padding: 0 18px !important;
    background: rgba(4,8,13,.78) !important;
    border: 1px solid rgba(201,174,120,.32) !important;
    border-radius: 2px !important;
    font-family: var(--font-body, sans-serif);
    font-size: .92rem;
    letter-spacing: .2em;
    color: #fff !important;
}
.sh-private-gate .sh-pg-form:not(.sh-token-form--ready) input::placeholder {
    color: #7E8894;
    letter-spacing: .12em;
    text-transform: none;
}
.sh-private-gate .sh-pg-form:not(.sh-token-form--ready) input:focus {
    outline: none;
    border-color: rgba(201,174,120,.85) !important;
    box-shadow: 0 0 0 4px rgba(201,174,120,.13);
}
.sh-private-gate .sh-pg-form .btn {
    min-height: 54px;
    padding: 0 26px;
    border-radius: 2px;
    font-size: .72rem;
    letter-spacing: .18em;
    white-space: nowrap;
}
.sh-private-gate .sh-pg-form .btn:hover { transform: none; filter: brightness(1.06); }
.sh-private-gate .sh-token-error-msg { margin: 4px 0 0 !important; }

.sh-pg-note {
    margin: 12px 0 0;
    font-family: var(--font-body, sans-serif);
    font-size: .8rem;
    line-height: 1.55;
    color: var(--pg-muted);
}
.sh-pg-note.is-error { color: #F2A7A7; }
.sh-pg-note.is-ok { color: #8FE39A; }
.sh-pg-keynote {
    margin: 6px 0 0;
    font-family: var(--font-body, sans-serif);
    font-size: .72rem;
    line-height: 1.6;
    color: var(--pg-faint);
    text-wrap: pretty;
}

/* Secondary paths */
.sh-pg-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 30px auto 0;
    max-width: 520px;
}
.sh-private-gate .sh-pg-actions__request {
    width: 100%;
    gap: 12px;
    padding: 16px 24px;
    font-size: .72rem;
    letter-spacing: .17em;
    border-radius: 2px;
    background-color: rgba(7,13,21,.55) !important;
    border-color: rgba(201,174,120,.7) !important;
}
.sh-private-gate .sh-pg-actions__request:hover { background-color: var(--pg-gold) !important; border-color: var(--pg-gold) !important; }
.sh-pg-actions__request i,
.sh-pg-actions__back i { font-size: .72rem; transition: transform .3s ease; }
.sh-pg-actions__request:hover i { transform: translateX(4px); }
.sh-pg-actions__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--font-body, sans-serif);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pg-muted);
    text-decoration: none;
    transition: color .25s ease;
}
.sh-pg-actions__back:hover { color: var(--pg-gold); }
.sh-pg-actions__back:hover i { transform: translateX(-4px); }
.sh-pg-actions__back:focus-visible { outline: 2px solid var(--pg-gold); outline-offset: 3px; }

/* File index */
.sh-pg-manifest {
    max-width: 520px;
    margin: 40px auto 0;
    padding: 18px 20px 6px;
    border: 1px solid rgba(201,174,120,.14);
    background: rgba(255,255,255,.02);
    border-radius: 4px;
    text-align: left;
}
.sh-pg-manifest__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, sans-serif);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--pg-gold);
    margin-bottom: 4px;
}

.sh-pg-manifest__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sh-pg-manifest__row:last-child { border-bottom: 0; }
.sh-pg-manifest__num {
    font-family: var(--font-head, serif);
    font-style: italic;
    font-size: .8rem;
    color: rgba(201,174,120,.7);
    min-width: 18px;
}
.sh-pg-manifest__label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body, sans-serif);
    font-size: .84rem;
    color: #D5D9DE;
}
.sh-pg-manifest__label i { display: none; }
.sh-pg-manifest__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body, sans-serif);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(201,174,120,.8);
    white-space: nowrap;
}
.sh-pg-manifest__status i { font-size: .56rem; }

.sh-pg-bottom { display: none; }

/* Ready state (valid link) inside the gate */
.sh-private-gate .sh-ready-card {
    max-width: none;
    margin: 0;
    padding: 22px 22px 18px;
    text-align: left;
    border: 1px solid rgba(201,174,120,.35);
    border-top: 2px solid var(--pg-gold);
    background: linear-gradient(160deg, rgba(24,36,50,.82), rgba(7,13,21,.9));
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.sh-private-gate .sh-ready-card__eyebrow { color: var(--pg-gold); letter-spacing: .24em; font-size: .62rem; }
.sh-private-gate .sh-ready-card__title { font-size: 1.35rem; font-weight: 400; margin-bottom: 8px; }
.sh-private-gate .sh-ready-card__copy { margin: 0 0 8px; max-width: none; color: var(--pg-muted); font-size: .8rem; }
.sh-private-gate .sh-ready-card__expiry { margin: 0 0 12px; }
.sh-private-gate .sh-ready-card__cta { gap: 12px; min-height: 54px; margin-top: 4px; }
.sh-private-gate .sh-ready-card__alt { margin-top: 12px; }
.sh-private-gate .sh-ready-card__alt summary { color: var(--pg-muted); }

/* Entrance cascade — reduced-motion always sees content */
@media (prefers-reduced-motion: no-preference) {
    .sh-pg-eyebrow,
    .sh-pg-title,
    .sh-pg-ref,
    .sh-pg-lead,
    .sh-pg-access,
    .sh-pg-actions,
    .sh-pg-manifest,
    .sh-pg-bottom {
        animation: sh-hero-enter .9s cubic-bezier(.22,.61,.36,1) both;
    }
    .sh-pg-eyebrow  { animation-delay: .05s; }
    .sh-pg-title    { animation-delay: .12s; }
    .sh-pg-ref      { animation-delay: .2s; }
    .sh-pg-lead     { animation-delay: .26s; }
    .sh-pg-access   { animation-delay: .34s; }
    .sh-pg-actions  { animation-delay: .42s; }
    .sh-pg-plate__tag,
    .sh-pg-plate__north,
    .sh-pg-seal     { animation: sh-pg-fade 1.4s ease .6s both; }
    .sh-pg-manifest { animation-delay: .5s; }
    .sh-pg-bottom   { animation-delay: .58s; }
    .sh-pg-plate__map { animation: sh-pg-fade 1.8s ease both; }
    .sh-pg-seal__ring--spin { animation: sh-pg-spin 46s linear infinite; }
}
/* The chart draws itself once (animation inside the SVG); #static shows it finished. */
@media (prefers-reduced-motion: reduce) {
    .sh-pg-plate__map { background-image: url("../maps/skiathos-coast.svg#static"); }
}
@keyframes sh-pg-fade { from { opacity: 0; } }
@keyframes sh-pg-spin { to { transform: rotate(360deg); } }

@media (max-width: 479px) {
    .sh-pg-manifest { padding-inline: 16px; }
    .sh-pg-manifest__status span {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@media (min-width: 560px) {
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready) { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready) input { border-right: 0 !important; }
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready) .btn { border-radius: 0 2px 2px 0; }
    .sh-private-gate .sh-token-error-msg { grid-column: 1 / -1; }
}

/* ---------- Laptop: a single composed screen ---------- */
@media (min-width: 1024px) {
    .sh-private-gate {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        padding: 96px clamp(40px, 5.6vw, 110px) 0;
        background:
            radial-gradient(60% 80% at 72% 52%, #12202F 0%, transparent 70%),
            linear-gradient(115deg, #070D15 0%, #09121C 45%, #060B12 100%);
    }
    /* Legibility scrim over the chart, on the text side only */
    .sh-private-gate::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg, #070D15 0%, rgba(7,13,21,.94) 28%, rgba(7,13,21,.45) 48%, rgba(7,13,21,0) 64%);
    }
    .sh-private-gate ~ .sh-footer { display: none; }


    .sh-pg-stage {
        display: grid;
        grid-template-columns: minmax(0, clamp(550px, 40vw, 720px)) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto auto 1fr;
        column-gap: clamp(40px, 5vw, 110px);
        max-width: none;
        width: 100%;
        margin: 0;
        padding-block: clamp(10px, 2.4vh, 28px);
        text-align: left;
        min-height: 0;
    }
    .sh-pg-identity { grid-column: 1; grid-row: 2; min-width: 0; }
    .sh-pg-access   { grid-column: 1; grid-row: 3; margin: clamp(22px, 3.6vh, 38px) 0 0; }
    .sh-pg-actions  { grid-column: 1; grid-row: 4; }
    .sh-pg-plate    { grid-column: 2; grid-row: 1 / -1; }

    .sh-pg-eyebrow { margin-bottom: clamp(14px, 2.6vh, 26px); }
    .sh-pg-title {
        font-size: clamp(3rem, min(5.3vw, 10.5vh), 5.6rem);
        line-height: 1.01;
        margin-bottom: clamp(12px, 2.2vh, 22px);
    }
    .is-title-long .sh-pg-title  { font-size: clamp(2.6rem, min(4.3vw, 8.6vh), 4.5rem); }
    .is-title-xlong .sh-pg-title { font-size: clamp(2.2rem, min(3.4vw, 7vh), 3.6rem); }
    .sh-pg-ref { justify-content: flex-start; margin-bottom: clamp(14px, 2.4vh, 24px); }
    .sh-pg-ref::after { display: none; }
    .sh-pg-lead { margin: 0; max-width: 52ch; font-size: clamp(.88rem, .95vw, 1rem); }

    .sh-pg-access { max-width: 540px; }
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready) {
        padding: 5px;
        gap: 0;
        border: 1px solid rgba(201,174,120,.34);
        background: rgba(4,8,13,.72);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
        transition: border-color .25s ease, box-shadow .25s ease;
    }
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready):focus-within {
        border-color: rgba(201,174,120,.85);
        box-shadow: 0 0 0 4px rgba(201,174,120,.12), 0 24px 60px rgba(0,0,0,.4);
    }
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready) input {
        height: 50px;
        border: 0 !important;
        background: transparent !important;
    }
    .sh-private-gate .sh-pg-form:not(.sh-token-form--ready) input:focus { box-shadow: none; }
    .sh-private-gate .sh-pg-form .btn { min-height: 50px; border-radius: 1px; }
    .sh-private-gate .sh-token-error-msg { margin: 6px 13px 8px !important; }

    .sh-pg-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px 24px;
        margin: clamp(18px, 3.2vh, 32px) 0 0;
        max-width: none;
    }
    .sh-private-gate .sh-pg-actions__request { width: auto; padding: 15px 24px; }

    /* Plate */
    .sh-pg-plate {
        --pg-mark: rgba(201,174,120,.55);
        position: relative;
        top: auto; left: auto;
        width: auto; height: auto;
        min-height: 260px;
        margin: clamp(14px, 3vh, 34px) 0 clamp(14px, 3vh, 34px) clamp(0px, 4vw, 70px);
        background:
            linear-gradient(var(--pg-mark), var(--pg-mark)) left top / 26px 1px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) left top / 1px 26px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) right top / 26px 1px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) right top / 1px 26px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) left bottom / 26px 1px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) left bottom / 1px 26px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) right bottom / 26px 1px,
            linear-gradient(var(--pg-mark), var(--pg-mark)) right bottom / 1px 26px;
        background-repeat: no-repeat;
    }
    /* Island ≈ 90% of the plate width, centred; offset lines bleed outside. */
    .sh-pg-plate__map {
        left: 50%; top: 50%;
        height: auto;
        width: 205%;
        opacity: .92;
        -webkit-mask-image: radial-gradient(50% 50% at 50% 54.8%, #000 62%, transparent 100%);
                mask-image: radial-gradient(50% 50% at 50% 54.8%, #000 62%, transparent 100%);
    }
    .sh-pg-plate__tag,
    .sh-pg-plate__north,
    .sh-pg-seal { display: flex; }
    .sh-pg-plate__tag {
        position: absolute;
        top: 16px; left: 22px;
        font-family: var(--font-body, sans-serif);
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: rgba(201,174,120,.8);
    }
    .sh-pg-plate__north {
        position: absolute;
        top: 14px; right: 20px;
        width: 12px; height: 22px;
        fill: none;
        stroke: rgba(201,174,120,.7);
        stroke-width: 1.3;
        stroke-linejoin: round;
    }
    .sh-pg-plate__north path:first-child { fill: rgba(201,174,120,.35); }
    .sh-pg-seal {
        position: absolute;
        left: 24px; bottom: 22px;
        width: 58px; height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--pg-gold);
        font-size: .9rem;
    }
    .sh-pg-seal i { filter: drop-shadow(0 0 12px rgba(201,174,120,.55)); }
    .sh-pg-seal__ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(201,174,120,.35);
        background: rgba(7,13,21,.55);
    }
    .sh-pg-seal__ring--spin {
        inset: -8px;
        background: none;
        border: 1px dashed rgba(201,174,120,.3);
    }

    /* File index strip */
    .sh-private-gate > * { min-width: 0; }
    .sh-pg-manifest {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px clamp(16px, 2.2vw, 40px);
        max-width: none;
        margin: 0;
        padding: clamp(12px, 2vh, 20px) 0;
        border: 0;
        border-top: 1px solid var(--pg-hair);
        border-radius: 0;
        background: none;
    }
    .sh-pg-manifest__head { margin: 0 auto 0 0; padding-right: clamp(8px, 1.5vw, 28px); white-space: nowrap; }
    .sh-pg-manifest__row {
        flex: 0 1 auto;
        min-width: 0;
        padding: 0;
        gap: 9px;
        border: 0;
    }
    .sh-pg-manifest__num { min-width: 0; }
    .sh-pg-manifest__label { font-size: .78rem; line-height: 1.35; min-width: 0; white-space: nowrap; }
    .sh-pg-manifest__status i { display: none; }
    .sh-pg-manifest__status span {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .sh-pg-manifest__status { color: rgba(201,174,120,.65); }

    .sh-pg-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 12px 0 16px;
        border-top: 1px solid rgba(255,255,255,.06);
        font-family: var(--font-body, sans-serif);
        font-size: .68rem;
        color: var(--pg-faint);
    }
    .sh-pg-bottom > span { font-family: var(--font-head, serif); font-style: italic; }
    .sh-pg-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
    .sh-pg-bottom a { color: #A1AAB5; text-decoration: none; }
    .sh-pg-bottom a:hover { color: var(--pg-gold); }

    /* Ready state: the confirmation replaces the lead on short screens */
    .sh-private-gate .sh-ready-card { max-width: 540px; padding: 18px 24px 16px; }
    .sh-private-gate .sh-ready-card__title { font-size: 1.25rem; margin-bottom: 6px; }
    .sh-private-gate .sh-ready-card__copy { font-size: .78rem; line-height: 1.55; margin-bottom: 4px; }
    .sh-private-gate .sh-token-form--ready { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
    .sh-private-gate .sh-ready-card__cta { width: auto; min-height: 50px; padding: 0 30px; margin: 0; }
    .sh-private-gate .sh-ready-card__alt { margin: 0; }
    .sh-private-gate .sh-ready-card__alt[open] { flex-basis: 100%; }
    .is-ready .sh-pg-access { margin-top: clamp(16px, 2.6vh, 32px); }
}
@media (min-width: 1024px) {
    /* With a confirmed link, opening the file is the one primary action. */
    .is-ready .sh-pg-actions__request {
        padding: 0 !important;
        min-height: 44px;
        border: 0 !important;
        background: none !important;
        color: var(--pg-muted) !important;
        font-size: .7rem;
    }
    .is-ready .sh-pg-actions__request:hover { color: var(--pg-gold) !important; transform: none; }
    .is-ready .sh-pg-actions { margin-top: clamp(10px, 2vh, 22px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
    .is-ready .sh-pg-lead { display: none; }
    .is-ready .sh-pg-title { font-size: clamp(2.6rem, min(4.6vw, 8.6vh), 4.6rem); }
    .is-ready .sh-pg-stage { padding-block: 6px; }
    .sh-pg-keynote { display: none; }
}

/* ---------------------------------------------------------
   Private unlock reveal (assets/js/sh-unlock.js)
   Runs only after a verified key; reduced motion never gets here.
--------------------------------------------------------- */
html.sh-ux-active { overflow: hidden; }
html.sh-ux-active #sh-nav2-header { opacity: 0; transition: opacity .45s ease; }
.is-unlocking .sh-pg-eyebrow,
.is-unlocking .sh-pg-ref,
.is-unlocking .sh-pg-lead,
.is-unlocking .sh-pg-access,
.is-unlocking .sh-pg-actions,
.is-unlocking .sh-pg-manifest,
.is-unlocking .sh-pg-bottom,
.is-unlocking .sh-pg-plate__tag,
.is-unlocking .sh-pg-plate__north {
    animation: sh-ux-out .45s ease .12s both !important;
}
.is-unlocking .sh-pg-seal { animation: sh-ux-out .4s ease .38s both !important; }
.is-unlocking .sh-pg-seal::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(201,174,120,.8);
    animation: sh-ux-burst .7s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes sh-ux-out { to { opacity: 0; } }
@keyframes sh-ux-burst { to { transform: scale(2.2); opacity: 0; } }

.sh-ux {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    cursor: pointer;
    contain: strict;
}
.sh-ux__backdrop,
.sh-ux__fade {
    position: absolute;
    inset: 0;
    background: #070D15;
    opacity: 0;
}
.sh-ux__backdrop { animation: sh-ux-in .55s ease .35s forwards; }
@keyframes sh-ux-in { to { opacity: 1; } }

.sh-ux__chart {
    position: absolute;
    transform-origin: 0 0;
    background: url("../maps/skiathos-coast.svg#static") center / 100% 100% no-repeat;
    will-change: transform, opacity;
}
.sh-ux__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    --sh-map-sea: transparent;
    --sh-map-grid: transparent;
    --sh-map-land: #101B27;
    --sh-map-residential: rgba(201,174,120,.07);
    --sh-map-forest: rgba(63,91,74,.24);
    --sh-map-beach: rgba(201,174,120,.3);
    --sh-map-water: #263b4d;
    --sh-map-road-local: rgba(255,255,255,.2);
    --sh-map-road-major: rgba(201,174,120,.55);
    --sh-map-runway: rgba(255,255,255,.28);
    --sh-map-coast: rgba(201,174,120,.8);
}
.sh-ux__trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.sh-ux__trail path {
    fill: none;
    stroke: rgba(226,200,148,.8);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 6px rgba(201,174,120,.55));
}
.sh-ux__letters { position: absolute; inset: 0; }
.sh-ux__ch {
    position: absolute;
    display: block;
    white-space: pre;
    text-align: center;
    will-change: transform, opacity;
}
.sh-ux__dot {
    position: absolute;
    left: 0; top: 0;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #FBF1D6 0%, #E6CD9A 22%, #C9AE78 50%, #8E7243 100%);
    box-shadow: 0 0 0 1px rgba(255,236,190,.35), 0 0 26px rgba(201,174,120,.6), 0 0 80px rgba(201,174,120,.28);
    opacity: 0;
    will-change: transform;
}
.sh-ux__pulse { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sh-ux__pulse::before,
.sh-ux__pulse::after {
    content: "";
    position: absolute;
    left: -22px; top: -22px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(226,200,148,.75);
    opacity: 0;
}
.sh-ux__pulse.is-on::before,
.sh-ux__pulse.is-on::after { animation: sh-ux-ring 1.3s cubic-bezier(.2,.6,.3,1) infinite; }
.sh-ux__pulse.is-on::after { animation-delay: .42s; }
@keyframes sh-ux-ring {
    0%   { transform: scale(.3); opacity: .9; }
    100% { transform: scale(2.4); opacity: 0; }
}
.sh-ux__area {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    border-radius: 50%;
    border: 1px dashed rgba(226,200,148,.65);
    background: radial-gradient(circle, rgba(201,174,120,.16) 0%, rgba(201,174,120,.04) 70%, transparent 100%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .5s ease;
}
.sh-ux__area.is-on { opacity: 1; }

/* Unlocked page: opens once from the point where the animation ended.
   The class is set in <head> only when sh-unlock.js left the one-time flag. */
html.sh-unlock-enter { background: #070D15; }
html.sh-unlock-enter body {
    clip-path: circle(0px at var(--sh-ux, 50%) var(--sh-uy, 50%));
    animation: sh-unlock-open .95s cubic-bezier(.6,0,.25,1) .08s forwards;
}
html.sh-unlock-enter::after {
    content: "";
    position: fixed;
    z-index: 2147483000;
    left: var(--sh-ux, 50%);
    top: var(--sh-uy, 50%);
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #E6CD9A;
    box-shadow: 0 0 26px rgba(201,174,120,.7);
    pointer-events: none;
    animation: sh-unlock-dot .55s ease .08s forwards;
}
@keyframes sh-unlock-open { to { clip-path: circle(var(--sh-ur, 150vmax) at var(--sh-ux, 50%) var(--sh-uy, 50%)); } }
@keyframes sh-unlock-dot { to { transform: scale(5); opacity: 0; } }

/* One-tap unlock — ready-state confirmation card.
   Shared across three contexts: hero/full gate (.sh-private-gate), the
   selective sidebar box (.sh-side-token-box) and the mobile sheet
   (.sh-token-sheet__panel). .sh-token-form--ready overrides the normal
   input+button grid (used by the manual-entry form) so the CTA and the
   collapsed disclosure stack vertically instead. */
.sh-token-form--ready { display: block; }

.sh-ready-card { max-width: 430px; margin: 0 auto; text-align: center; }
.sh-side-token-box .sh-ready-card,
.sh-token-sheet__panel .sh-ready-card { max-width: none; text-align: left; margin: 0; }

.sh-ready-card__eyebrow {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--sp-gold);
    margin-bottom: 6px;
}
.sh-ready-card__title {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px;
}
.sh-ready-card__copy {
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(255,255,255,.58);
    max-width: 48ch;
    margin: 0 auto 8px;
}
.sh-side-token-box .sh-ready-card__copy,
.sh-token-sheet__panel .sh-ready-card__copy { margin-left: 0; margin-right: 0; }

.sh-ready-card__expiry {
    display: block;
    font-size: .72rem;
    color: rgba(201,174,120,.85);
    margin: 0 0 14px;
}

.sh-ready-card__cta { width: 100%; justify-content: center; margin-top: 4px; }

.sh-ready-card__alt { margin-top: 14px; text-align: left; }
.sh-ready-card__alt summary {
    cursor: pointer;
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    text-decoration: underline;
    text-underline-offset: 2px;
    list-style: none;
}
.sh-ready-card__alt summary::-webkit-details-marker { display: none; }
.sh-ready-card__alt[open] summary { color: rgba(255,255,255,.6); margin-bottom: 8px; }
.sh-ready-card__alt input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(5,8,14,.7);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-card);
    color: #fff;
    font-size: .85rem;
    letter-spacing: .08em;
    padding: 11px 13px;
    outline: none;
}
.sh-ready-card__alt input:focus {
    border-color: rgba(201,174,120,.5);
    box-shadow: 0 0 0 1px rgba(201,174,120,.2);
}

/* Narrow phones (360px-class Androids, e.g. Huawei P30 Pro): the tracked
   uppercase labels and the sticky bar need tighter sizes or they wrap/clip. */
@media (max-width: 380px) {
    .sh-mbar-price__value { font-size: 0.88rem; }
    .sh-btn-access { font-size: 0.68rem; letter-spacing: 0.08em; padding: 11px 10px; white-space: nowrap; }
    .sh-btn-secondary-icon--token { width: 42px; padding: 0; gap: 0; }
    .sh-btn-secondary-icon--token span { display: none; }
}

/* =========================================================
   LEGAL DOSSIER — READABILITY UPGRADE
   Summary meter + legend, status icons, colored row rails.
   Reverted to the Desktop reference look 2026-07-13. Sits
   after the base rows block so the cascade produces the
   icon chip + rails. Rail / meter / legend colours are
   grouped to match the 4 labels the PHP prints.
========================================================= */
.sh-do-summary {
    padding: 24px 36px 0;
}
.sh-do-meter {
    display: flex;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(100,78,45,0.10);
}
.sh-do-meter__seg { display: block; height: 100%; }
.sh-do-meter__seg.seg-good { background: #4A7A52; }
.sh-do-meter__seg.seg-work { background: #C09040; }
.sh-do-meter__seg.seg-risk { background: #A04640; }
.sh-do-summary__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 12px;
}
.sh-do-sum {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sh-do-sum strong {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
}
.sh-do-sum.sum-good { color: #4A7A52; }
.sh-do-sum.sum-work { color: #9C6726; }
.sh-do-sum.sum-risk { color: #8A332E; }

/* Group titles were nearly unreadable at 0.48rem */
.sh-do-group-title { font-size: 0.6rem; }

/* Status chips: icon + larger type, soft radius */
.sh-dc-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.52rem;
    padding: 5px 11px;
    border-radius: 3px;
}
.sh-dc-status i { font-size: 0.66rem; }

/* Colored rail per row — status is scannable without reading.
   Grouping aligned to the 4 labels (green / amber / red). */
.sh-do-list .sh-dc-row {
    border-left: 2px solid rgba(100,78,45,0.12);
    padding-left: 16px;
}
.sh-do-list .sh-dc-row.is-ok  { border-left-color: rgba(74,122,82,0.5); }
.sh-do-list .sh-dc-row.is-pen,
.sh-do-list .sh-dc-row.is-na,
.sh-do-list .sh-dc-row.is-upd,
.sh-do-list .sh-dc-row.is-fix,
.sh-do-list .sh-dc-row.is-mis { border-left-color: rgba(156,103,38,0.45); }
.sh-do-list .sh-dc-row.is-err { border-left-color: rgba(138,51,46,0.5); }
.sh-do-list .sh-dc-row.is-nap { border-left-color: rgba(138,141,147,0.35); }

@media (max-width: 560px) {
    .sh-do-summary { padding: 20px 22px 0; }
    .sh-do-summary__legend { gap: 6px 16px; }
    .sh-dc-status { font-size: 0.48rem; padding: 4px 9px; gap: 6px; }
}

/* =========================================================
   LEGAL DOSSIER — FILE CHECK (Claude, 17/09/2026)
   First opening only (sh-single.js adds .is-auditing): the
   verdict settles, the readiness bar is revealed while its
   real counts tick up, and each row is "stamped" as it comes
   into view. Without JS or with reduced motion none of these
   states apply, so the drawer always reads in its final form.
========================================================= */
@media (prefers-reduced-motion: no-preference) {
    .is-auditing .sh-dc-verdict {
        transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
    }
    .is-auditing .sh-dc-verdict:not(.is-in) {
        opacity: 0;
        transform: translateY(10px);
    }

    .is-auditing .sh-do-meter { clip-path: inset(0 100% 0 0); }
    .is-auditing .sh-do-meter.is-in {
        clip-path: inset(0 0 0 0);
        transition: clip-path 1s cubic-bezier(.33,1,.68,1);
    }
    .is-auditing .sh-do-sum strong { font-variant-numeric: tabular-nums; }

    .is-auditing .sh-do-list .sh-dc-row { transition: border-left-color .45s ease .28s; }
    .is-auditing .sh-do-list .sh-dc-row:not(.is-stamped) { border-left-color: rgba(100,78,45,0.12); }
    .is-auditing .sh-dc-row:not(.is-stamped) .sh-dc-status { opacity: 0; }

    /* A soft gold pass across the row, then the status lands like a stamp. */
    .is-auditing .sh-dc-row.is-stamped {
        background-image: linear-gradient(100deg, transparent 35%, rgba(201,174,120,0.22) 50%, transparent 65%);
        background-repeat: no-repeat;
        background-size: 260% 100%;
        animation: sh-audit-sheen .6s ease-out both;
    }
    .is-auditing .sh-dc-row.is-stamped .sh-dc-status {
        position: relative;
        animation: sh-audit-stamp .5s cubic-bezier(.2,.9,.3,1.2) .22s both;
    }
    .is-auditing .sh-dc-row.is-stamped .sh-dc-status::after {
        content: "";
        position: absolute;
        inset: -5px;
        border: 1px solid currentColor;
        border-radius: 5px;
        pointer-events: none;
        animation: sh-audit-ink .65s ease-out .38s both;
    }

    /* Card on the page: the badge is stamped once when first seen. */
    .sh-dc-badge.is-armed { opacity: 0; }
    .sh-dc-badge.is-armed.is-stamped { animation: sh-audit-stamp .55s cubic-bezier(.2,.9,.3,1.2) both; }
}
@keyframes sh-audit-sheen {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}
@keyframes sh-audit-stamp {
    0%   { opacity: 0; transform: scale(1.7) rotate(-9deg); }
    55%  { opacity: 1; transform: scale(.93) rotate(1deg); }
    78%  { opacity: 1; transform: scale(1.04) rotate(0deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes sh-audit-ink {
    0%   { opacity: .6; transform: scale(.86); }
    100% { opacity: 0;  transform: scale(1.35); }
}

/* =========================================================
   LOCKED-STATE POLISH (selective)
   Vault tile lift + lock glow, hero badge breathing,
   sidebar token box in the gold "access" language.
========================================================= */

/* Teaser vault tile — content lifts gently on hover */
.sh-teaser-vault__content { transition: transform 0.35s ease; }
.sh-teaser-vault:hover .sh-teaser-vault__content,
.sh-teaser-vault:focus-visible .sh-teaser-vault__content { transform: translateY(-3px); }

/* Sidebar token box — reads as the "key slot" of the page */
.sh-single-public .sh-side-token-box {
    border: 1px solid rgba(201,174,120,0.22);
    background: linear-gradient(180deg, rgba(201,174,120,0.05), rgba(201,174,120,0.015));
}
.sh-single-public .sh-side-token-box .sh-sp-kicker { color: rgba(201,174,120,0.9); }
.sh-single-public .sh-side-token-box .sh-token-form input:focus {
    outline: none;
    border-color: rgba(201,174,120,0.6) !important;
    box-shadow: 0 0 0 3px rgba(201,174,120,0.1);
}

/* =========================================================
   2026 MOTION LAYER
   Scroll-driven hero parallax via animation-timeline
   (progressive enhancement behind @supports), film grain,
   and a rotating conic gold edge on the price card.
   Every effect is inert under prefers-reduced-motion.
========================================================= */

/* Hero — scroll-driven parallax: the photo sinks slower than the
   page and the title block fades as the hero exits the viewport. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sh-single-public .sh-sp-hero__bg.sh-hero-bg {
            animation: sh-hero-drift linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }
        .sh-single-public .sh-hero-doss {
            animation: sh-hero-content-fade linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 85%;
        }
    }
}
@keyframes sh-hero-drift {
    to { translate: 0 14%; }
}
@keyframes sh-hero-content-fade {
    to { translate: 0 60px; opacity: 0; }
}

/* Hero — fine film grain for an editorial print feel */
.sh-single-public .sh-sp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Price card — a slow gold light tracing the card's edge.
   @property makes --sh-angle interpolable; without it the
   gradient would step instead of rotating. */
@property --sh-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.sh-single-public .sh-side-primary { position: relative; }
@media (prefers-reduced-motion: no-preference) {
    .sh-single-public .sh-side-primary::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: var(--r-card);
        padding: 1px;
        background: conic-gradient(from var(--sh-angle, 0deg),
            transparent 0%, rgba(201,174,120,0.65) 10%, transparent 22%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: sh-border-spin 8s linear infinite;
        pointer-events: none;
    }
}
@keyframes sh-border-spin {
    to { --sh-angle: 360deg; }
}

/* =========================================================
   HERO — MOBILE SPLIT (≤880px)
   Photo occupies the top half of the screen; the dossier details sit
   below it on a solid panel, then the page scrolls on. Overrides the
   earlier full-height overlay layout (photo behind the text) and the
   scroll-driven parallax — both broke on small screens. Placed last so
   it wins the cascade without !important.
   ========================================================= */
@media (max-width: 880px) {
    .sh-single-public .sh-sp-hero.sh-hero-arch {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Photo = top portion, shown at full strength (no dimming/desaturation) */
    .sh-single-public .sh-sp-hero__bg.sh-hero-bg {
        position: relative;
        height: 50vh;        /* fallback */
        height: 50svh;       /* mobile-safe */
        opacity: 1;
        filter: none;
        background-position: center;  /* hero crop centered on all sizes */
        animation: none;     /* disable scroll-parallax drift on mobile */
    }

    /* Confine the cinematic overlay to the photo, as a soft bottom fade
       that blends the image into the solid panel below */
    .sh-single-public .sh-sp-hero__overlay.sh-hero-overlay {
        inset: 0 0 auto 0;
        height: 50vh;
        height: 50svh;
        background: linear-gradient(to bottom, transparent 58%, var(--sp-bg) 100%);
    }

    /* Decorative archival frame off on mobile (corners already hidden) */
    .sh-single-public .sh-hero-frame { display: none; }

    /* Details = solid panel under the photo, in normal flow */
    .sh-single-public .sh-hero-doss {
        position: relative;
        inset: auto;
        min-height: 0;
        background: var(--sp-bg);
        justify-content: flex-start;
        gap: clamp(22px, 6vw, 34px);
        padding: clamp(26px, 7vw, 38px) clamp(22px, 6vw, 34px) clamp(40px, 11vw, 54px);
        animation: none;     /* disable scroll-driven content fade on mobile */
    }

    /* Hero spec: keep only the price on mobile (hide the "Specification"
       label and the Bedrooms/Bathrooms/Interior/Land/View rows) */
    .sh-single-public .sh-doss-spec__hd,
    .sh-single-public .sh-doss-spec__row:not(.is-price) { display: none; }

    /* Location/type line: remove the decorative dash prefix, switch text to gold */
    .sh-single-public .sh-doss-loc .ln { display: none; }
    .sh-single-public .sh-doss-loc { color: var(--sp-gold); }

    /* Price row: drop the redundant "Price" label — the number speaks for itself */
    .sh-single-public .sh-doss-spec__row.is-price .k { display: none; }
    .sh-single-public .sh-doss-spec__row.is-price {
        border-bottom: none;
        padding-top: 0;
    }
    .sh-single-public .sh-doss-spec__row.is-price .v {
        font-size: 1.5rem;
    }

    /* Vision: drop the black top-gradient on mobile so the section
       continues straight out of the navy hero panel instead of a hard
       black edge (the gradient still blends with the dark hero on desktop) */
    .sh-single-public .sh-vision-stage { background-image: none; }
}

/* =========================================================
   HERO — LANDSCAPE PHONE (rotated, short viewport)
   The mobile split above (photo occupies the top 50%, dossier details
   flow below it) is sized for portrait's generous height. Rotate a
   phone and the same ≤880px width still matches, but height collapses
   to ~350-430px — the split then renders as two illegibly short strips
   that need scrolling to read anything (reported on both Android and
   iPhone). Below this height, go back to the desktop overlay treatment
   (single full-bleed photo, dossier text over it) regardless of width,
   with sizing scaled down to fit the short viewport. Placed last so it
   wins the cascade without !important.
   ========================================================= */
@media (max-width: 880px) and (max-height: 560px) and (orientation: landscape) {
    .sh-single-public .sh-hero-rail,
    .sh-single-public .sh-hf-c,
    .sh-single-public .sh-hero-frame { display: none; }

    .sh-single-public .sh-sp-hero.sh-hero-arch { min-height: 100svh; display: block; }
    .sh-single-public .sh-sp-hero__bg.sh-hero-bg {
        position: absolute; inset: 0; height: auto;
        opacity: 0.68; animation: none;
    }
    .sh-single-public .sh-sp-hero__overlay.sh-hero-overlay {
        inset: 0; height: auto;
        background:
            linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(5,8,14,0.75) 26%, rgba(5,8,14,0.3) 52%, transparent 72%),
            linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%);
    }
    .sh-single-public .sh-hero-doss {
        position: absolute;
        /* extra top clearance keeps the ref/status row clear of the transparent nav bar */
        inset: 68px 18px 16px 18px;
        min-height: 0;
        background: transparent;
        justify-content: space-between;
        gap: 0;
        padding: 0;
        animation: none;
    }
    .sh-single-public .sh-doss-headrow { gap: 10px; }
    .sh-single-public .sh-doss-ref { font-size: 9px; line-height: 1.3; }
    .sh-single-public .sh-doss-ref small { font-size: 8px; margin-top: 2px; }
    .sh-single-public .sh-doss-status { font-size: 8px; padding: 5px 9px; letter-spacing: .15em; }
    .sh-single-public .sh-doss-rule { margin-top: 10px; }
    .sh-single-public .sh-doss-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sh-single-public .sh-doss-loc { margin-bottom: 4px; font-size: 10px; }
    .sh-single-public .sh-hero-title { font-size: clamp(1.3rem, 3.4vw, 1.8rem); max-width: 16ch; margin: 0; line-height: 1.05; }
    /* Same simplification as the portrait split above: price only, no full spec grid */
    .sh-single-public .sh-doss-spec { min-width: 0; width: auto; }
    .sh-single-public .sh-doss-spec__row.is-price .v { font-size: 1.15rem; }
}

/* =========================================================
   PROPERTY FILM — compact trigger next to "View All Photos"
   (or standalone next to the Gallery/Property Film heading
   when a property has a film but no photos). No large media
   band; the film only appears once the modal is opened.
========================================================= */
.sh-gal-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sh-gal-head__actions .btn i { margin-right: 6px; }

@media (max-width: 480px) {
    .sh-gal-head__actions { width: 100%; }
    .sh-gal-head__actions .btn { flex: 1 1 auto; }
}

/* =========================================================
   FLOOR PLANS — bordered feature card. Left: kicker + title +
   description. Right: a single "View Plan(s)" button, vertically
   centered against the copy block. On mobile the button drops
   below the copy as a full-width row.
========================================================= */
.sh-plan-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(24px, 4vw, 48px);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    background: var(--sp-surface);
}
.sh-plan-feature__copy { min-width: 0; }
.sh-plan-feature__kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--sp-gold);
    font-family: var(--font-body, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.sh-plan-feature h2 {
    margin: 0 0 8px;
    color: rgba(255,248,238,0.92);
    font-family: var(--font-head, serif);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}
.sh-plan-feature p {
    margin: 0;
    max-width: 560px;
    color: rgba(255,248,238,0.52);
    font-size: 0.86rem;
    line-height: 1.62;
}
.sh-plan-feature__btn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(201,174,120,0.32);
    background: rgba(201,174,120,0.07);
    color: rgba(201,174,120,0.9);
    font-family: var(--font-body, sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sh-plan-feature__btn:hover {
    color: #fff;
    border-color: rgba(201,174,120,0.62);
    background: rgba(201,174,120,0.13);
}

/* Mobile: copy stacks above a full-width button. */
@media (max-width: 640px) {
    .sh-plan-feature {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .sh-plan-feature p { font-size: 0.8rem; }
    .sh-plan-feature__btn {
        width: 100%;
        justify-self: stretch;
        justify-content: center;
    }
}

/* =========================================================
   FILM MODAL — lazy video lightbox (structure mirrors the
   Map Modal; iframe/<video> is injected only when opened)
========================================================= */
.sh-film-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    padding: 20px;
}
.sh-film-modal.is-open { opacity: 1; pointer-events: auto; }

.sh-film-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 8, 0.9);
    cursor: pointer;
}

.sh-film-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    transform: translateY(18px) scale(0.99);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-film-modal.is-open .sh-film-modal__panel { transform: translateY(0) scale(1); }

.sh-film-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,174,120,0.16);
}
.sh-film-modal__frame iframe,
.sh-film-modal__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.sh-film-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.sh-film-modal__kicker {
    color: var(--sp-gold);
    font-family: var(--font-body, sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}
.sh-film-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(201,174,120,0.35);
    border-radius: 50%;
    background: rgba(10,12,16,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.82);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.sh-film-modal__close span { display: block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.sh-film-modal__close:hover {
    border-color: rgba(201,174,120,0.85);
    background: rgba(201,174,120,0.16);
    color: #fff;
}
.sh-film-modal__close:hover span { transform: rotate(90deg); }
.sh-film-modal__close:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 3px; }

@media (max-width: 640px) {
    .sh-film-modal { padding: 0; }
    .sh-film-modal__panel { max-width: 100%; }
    .sh-film-modal__bar { padding: 12px 14px; margin-bottom: 0; }
    .sh-film-modal__frame { border-radius: 0; }
}

/* =========================================================
   FLOOR PLAN MODAL — full-size reference (tabs per level)
========================================================= */
.sh-fp-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    padding: 20px;
}
.sh-fp-modal.is-open { opacity: 1; pointer-events: auto; }

.sh-fp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    cursor: pointer;
}

.sh-fp-panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(155deg, rgba(13,16,22,0.97), rgba(6,8,14,0.96));
    border: 1px solid rgba(201,174,120,0.16);
    border-radius: 6px;
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    transform: translateY(18px) scale(0.99);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 32px;
}
.sh-fp-modal.is-open .sh-fp-panel { transform: translateY(0) scale(1); }

.sh-fp-header { margin-bottom: 20px; }
.sh-fp-kicker {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(201,174,120,0.6);
    margin-bottom: 8px;
}
.sh-fp-title {
    font-family: var(--font-head, serif);
    font-size: 1.3rem;
    color: rgba(255,248,238,0.92);
    margin: 0;
}

/* All plans stack in one scrollable column, each in its own frame
   with a caption underneath. */
.sh-fp-body { display: flex; flex-direction: column; gap: 36px; }
.sh-fp-item { margin: 0; }

/* Matted frame — warm paper tone instead of a stark white rectangle
   butted against the dark modal chrome. */
.sh-fp-item__frame {
    padding: clamp(14px, 3vw, 28px);
    background: #F4EFE4;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.3);
}
.sh-fp-item__frame img {
    width: 100%;
    height: auto;
    display: block;
}
.sh-fp-item figcaption {
    margin-top: 10px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
}

.sh-fp-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(201,174,120,0.3);
    border-radius: 50%;
    background: rgba(6,8,12,0.6);
    color: rgba(255,255,255,0.8);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    z-index: 2;
}
.sh-fp-close:hover { border-color: rgba(201,174,120,0.7); color: #fff; }

@media (max-width: 640px) {
    .sh-fp-panel { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; padding: 24px 20px; }
    .sh-fp-item__frame { padding: 14px; }
}

/* =========================================================
   FLOOR PLANS — dossier drawer variant. Re-houses the stacked
   plan figures inside the Legal Position drawer shell
   (.sh-dossier-overlay / .sh-do-*), re-toned for the light
   parchment. Same #floorplanModal JS drives it — the
   .sh-fp-modal / .sh-fp-panel lightbox rules above are now
   unused (the markup no longer references them).
========================================================= */
.sh-fp-drawer .sh-do-body { padding: 24px 0 48px; }
.sh-fp-drawer .sh-fp-body { padding: 0 36px; }
.sh-fp-drawer .sh-fp-item__frame {
    background: #fff;
    border: 1px solid rgba(120,95,55,0.18);
    box-shadow: 0 10px 30px rgba(40,30,15,0.10);
}
.sh-fp-drawer .sh-fp-item figcaption { color: #9A8870; }

/* ── Floor plan: click to enlarge ─────────────────────────────────────────
   The frame became a <button> so the drawing is reachable by keyboard and
   announces itself; it must therefore be stripped of button chrome and keep
   the frame styling it had as a <div>. ── */
.sh-fp-item__zoom {
    display: block;
    width: 100%;
    position: relative;
    font: inherit;
    color: inherit;
    text-align: inherit;
    border-radius: 0;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
}
.sh-fp-item__zoom:focus-visible {
    outline: 2px solid var(--sp-gold, #c9ae78);
    outline-offset: 3px;
}
/* Affordance: a plan looks like a picture, not a control, so say so. */
.sh-fp-item__cue {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(8, 11, 17, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0.75;
    transition: opacity 0.2s ease, background 0.2s ease;
    pointer-events: none;
}
.sh-fp-item__zoom:hover .sh-fp-item__cue,
.sh-fp-item__zoom:focus-visible .sh-fp-item__cue {
    opacity: 1;
    background: rgba(8, 11, 17, 0.8);
}

/* 10060: above the Floor Plans drawer (.sh-dossier-overlay = 9999) and above the
   beach-route viewer (10050), so no stacking context can ever bury it. */
.sh-fpz-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
}
.sh-fpz-modal.is-open { display: block; }

.sh-fpz-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 10, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: zoom-out;
}

/* The viewport is the scroller; the figure centres with margin:auto because a
   flex item wider than its container gets its left edge clipped when centred
   with justify-content — and a zoomed plan is exactly that. */
.sh-fpz-modal__viewport {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: 26px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    outline: none;
    animation: sh-fpz-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sh-fpz-in {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

/* Fixed, not absolute: the viewport scrolls when a zoomed plan is panned, and
   the close button must not scroll away with it. */
.sh-fpz-modal__close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.sh-fpz-modal__close:hover,
.sh-fpz-modal__close:focus-visible {
    color: var(--sp-gold, #c9ae78);
    background: rgba(201, 174, 120, 0.12);
    border-color: rgba(201, 174, 120, 0.5);
    outline: none;
}

.sh-fpz-fig { margin: auto; }

/* Opens fitted — a plan cropped at the edges tells you nothing about the layout.
   Magnifying is then a deliberate second action, for the dimensions and labels. */
.sh-fpz-fig__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    cursor: zoom-in;
}
/* Zoomed width is set inline by JS from the drawing's own natural size: plans
   arrive both portrait and landscape, so a fixed vw factor would either barely
   magnify a tall plan or explode a wide one. */
.sh-fpz-modal.is-zoomed .sh-fpz-fig__img {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

.sh-fpz-fig__cap {
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.74rem;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.62);
}
.sh-fpz-fig__hint {
    display: none;
    margin: 9px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}
/* Zoomed, caption and hint would sit off to one side of a very wide drawing. */
.sh-fpz-modal.is-zoomed .sh-fpz-fig__cap,
.sh-fpz-modal.is-zoomed .sh-fpz-fig__hint { display: none; }

@media (max-width: 700px) {
    .sh-fpz-modal__viewport { padding: 12px; }
    .sh-fpz-fig__hint { display: block; }
    .sh-fp-item__cue { right: 10px; bottom: 10px; width: 34px; height: 34px; }
}
@media (max-width: 640px) {
    .sh-fp-drawer .sh-fp-body { padding: 0 22px; }
}

/* =========================================================
   ADMIN — "Presentation Mode" trigger. A discreet eye icon
   beside the hero status chip (manage_options only, normal
   page view). Opens ?sh_present=1, a client-chrome-free view
   styled by assets/css/sh-present.css.
========================================================= */
.sh-single-public .sh-doss-headrow__end {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.sh-single-public .sh-present-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(201,174,120,0.35);
    background: rgba(201,174,120,0.10);
    color: var(--sp-gold, #C9AE78);
    font-size: 0.82rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sh-single-public .sh-present-launch:hover,
.sh-single-public .sh-present-launch:focus-visible {
    background: rgba(201,174,120,0.20);
    border-color: rgba(201,174,120,0.6);
}

/* =========================================================
   MOBILE VIEWPORT COMPACTION
   Shared phone behavior stays model-agnostic. Body copy and 44px touch
   targets remain readable; the reclaimed space comes from chrome, display
   type and vertical rhythm. This block is last by design so it wins the
   older mobile layers without changing desktop or landscape-phone rules.
========================================================= */
@media (max-width: 900px) {
    .sh-single-public .sh-mobile-bar {
        left: 12px;
        right: 12px;
        bottom: max(8px, env(safe-area-inset-bottom));
        max-width: 360px;
        margin-inline: auto;
        padding: 6px;
        gap: 8px;
        background: var(--sp-bg);
        border: 1px solid var(--sp-border);
        border-radius: 18px;
        box-shadow: 0 6px 22px rgba(0,0,0,0.28);
    }

    /* Price remains in the property presentation; this surface is actions only. */
    .sh-single-public .sh-mobile-bar .sh-mbar-price { display: none; }
    .sh-single-public .sh-mobile-bar .sh-btn-access {
        border-radius: 12px;
        white-space: normal;
        line-height: 1.25;
    }
    .sh-single-public .sh-mobile-bar .sh-btn-secondary-icon {
        border-radius: 12px;
    }
    .sh-single-public .sh-mobile-bar .sh-btn-secondary-icon--token {
        width: auto;
        padding-inline: 10px;
        gap: 6px;
    }

    .sh-btn-access {
        min-height: 44px;
        padding: 9px 12px;
    }

    .sh-btn-secondary-icon {
        height: 44px;
    }
    .sh-btn-secondary-icon--wa { width: 44px; }
    .sh-btn-secondary-icon--token { width: auto; min-height: 44px; }

    .sh-single-public .sh-sp-main {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }

    /* Upward scrolling expands Safari/Chrome browser chrome. At that moment
       the compact top nav is useful and this lower bar yields the viewport. */
    body.sh-scroll-up .sh-single-public .sh-mobile-bar,
    body.sh-nav2-locked .sh-single-public .sh-mobile-bar {
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
    }
}

/* Width is stable while mobile browser toolbars animate, unlike viewport
   height. 410px captures standard/small phones without targeting any model. */
@media (max-width: 410px) {
    .sh-single-public .sh-sp-container { padding-inline: 18px; }

    .sh-single-public .sh-sp-hero__bg.sh-hero-bg,
    .sh-single-public .sh-sp-hero__overlay.sh-hero-overlay {
        height: 46vh;
        height: 46svh;
    }

    .sh-single-public .sh-hero-doss {
        gap: 18px;
        padding: 22px 20px 38px;
    }

    .sh-single-public .sh-doss-foot { gap: 18px; }
    .sh-single-public .sh-hero-title {
        font-size: clamp(2.15rem, 9.5vw, 2.4rem);
        line-height: 0.98;
    }
    .sh-single-public .sh-doss-spec__row.is-price .v { font-size: 1.35rem; }

    .sh-single-public .sh-vision-stage { padding: 52px 18px 60px; }
    .sh-single-public .sh-vision-stage .sh-vision-quote {
        font-size: 1.5rem;
        padding-top: 40px;
    }
    .sh-single-public .sh-vision-quote::before { font-size: 4.2rem; }

    .sh-single-public .sh-section { margin-bottom: 56px; }
    .sh-single-public .sh-sp-grid { gap: 40px; }
    .sh-single-public .sh-sp-stat { padding: 8px 10px; }
    .sh-single-public .sh-sp-stat__val { font-size: 1.95rem; }
    .sh-single-public .sh-sp-stat__lbl {
        font-size: 0.64rem;
        margin-bottom: 11px;
    }

    .sh-mbar-price__eyebrow { display: none; }
    .sh-mbar-price__value { font-size: 0.9rem; }
    .sh-btn-access {
        font-size: 0.7rem;
        letter-spacing: 0.09em;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .sh-btn-secondary-icon--token { width: 44px; padding-inline: 0; }
}

@media (max-width: 900px) and (prefers-reduced-transparency: reduce) {
    .sh-single-public .sh-mobile-bar {
        background: var(--sp-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .sh-single-public .sh-mobile-bar { transition: none; }
}

/* Set before opening by the shared property scroll lock. Pixel measurements
   follow browser chrome/rotation; native pinch zoom is left to the browser. */
.sh-property-viewport {
    top: var(--sh-overlay-top, 0px);
    bottom: auto;
    height: var(--sh-overlay-height, 100dvh);
}
html.sh-property-scroll-locked { overscroll-behavior: none; }
/* These buttons are siblings of the inner scrollers. Anchor to the measured
   overlay so they remain visible when the visual viewport has a top offset. */
.sh-property-viewport > .sh-fpz-modal__close,
.sh-property-viewport > .sh-br-modal__close { position: absolute; }
.sh-property-viewport .sh-map-panel { max-height: min(90vh, 100%); }
.sh-property-viewport .sh-im-panel { max-height: min(86vh, 100%); }
.sh-property-viewport .sh-fs-panel { max-height: 100%; }


/* =========================================================
   PROPERTY PERSPECTIVE — ΣΥΝΕΧΕΙΑ ΑΝΑΓΝΩΣΗΣ
   Απόφαση ιδιοκτήτη 21/09/2026 («προχώρα με το 1»): οι μεγάλες περιγραφές
   κλείνουν στις ~12 γραμμές, σε όλα τα πλάτη. Οι σύντομες δεν αγγίζονται:
   το ύψος μετριέται στο sh-single.js και το κουμπί δεν δημιουργείται καν αν
   δεν κρύβονται πάνω από 20 γραμμές.
   Η σύμπτυξη μπαίνει από JavaScript. Χωρίς αυτό το κείμενο μένει ολόκληρο,
   άρα δεν κρύβεται τίποτα από μηχανές αναζήτησης ή από no-JS επισκέπτες.
   Το χρυσό αρχικό γράμμα (14/09) και το χρώμα .48 δεν θίγονται — η πρώτη
   παράγραφος είναι πάντα μέσα στο ορατό τμήμα.
   ========================================================= */
.sh-single-public div.sh-sp-rich.is-collapsible{
  overflow: hidden;
  max-height: var(--sh-rich-max, 22em);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5em), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5em), transparent 100%);
  transition: max-height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sh-single-public div.sh-sp-rich.is-collapsible.is-open{
  -webkit-mask-image: none;
          mask-image: none;
}
/* Χωρίς αυτό, το κάτω περιθώριο της τελευταίας παραγράφου μετράει στο ύψος
   και το κείμενο δείχνει να κόβεται νωρίτερα από όσο πρέπει. */
.sh-single-public div.sh-sp-rich.is-collapsible > *:last-child{ margin-bottom: 0; }

.sh-single-public .sh-rich-more{
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 10px 0 38px;
}
.sh-single-public .sh-rich-more[hidden]{ display: none; }
.sh-single-public .sh-rich-more::before,
.sh-single-public .sh-rich-more::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,174,120,0.26), transparent);
}
.sh-single-public .sh-rich-more__btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201,174,120,0.92);
  transition: color 0.22s ease;
}
.sh-single-public .sh-rich-more__btn:hover{ color: rgba(201,174,120,1); }
.sh-single-public .sh-rich-more__btn:focus-visible{
  outline: 1px solid rgba(201,174,120,0.7);
  outline-offset: 6px;
}
.sh-single-public .sh-rich-more__chev{
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}
.sh-single-public .sh-rich-more__btn[aria-expanded="true"] .sh-rich-more__chev{
  transform: translateY(1px) rotate(-135deg);
}
@media (max-width: 768px){
  .sh-single-public .sh-rich-more{ gap: 14px; margin: 8px 0 30px; }
  .sh-single-public .sh-rich-more__btn{ font-size: 10px; letter-spacing: 0.2em; }
}
@media (prefers-reduced-motion: reduce){
  .sh-single-public div.sh-sp-rich.is-collapsible{ transition: none; }
  .sh-single-public .sh-rich-more__chev{ transition: none; }
}