/* ============================================================
   GLASS — the platform surface system
   ------------------------------------------------------------
   Loaded last. Retunes the surfaces the editorial layer draws on
   dark ground, and imposes a symmetrical, grid-aligned rhythm.

   Budget: backdrop-filter is expensive. It is used on floating
   chrome only (masthead, filter bar, panels, overlays). Panels
   that sit on the flat page ground use translucency alone.
   ============================================================ */

/* ---- Atmospheric ground ------------------------------------ */
body{
  background:var(--paper);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(40,86,70,.34) 0%, transparent 62%),
    radial-gradient(90% 55% at 12% 22%, rgba(24,58,64,.26) 0%, transparent 60%),
    radial-gradient(85% 60% at 88% 78%, rgba(88,74,50,.18) 0%, transparent 62%);
  background-attachment:fixed;
}

/* Grain must lighten on a dark ground, not multiply away. */
.grain{ mix-blend-mode:overlay; opacity:.085; }

::selection{ background:var(--sand); color:#0A1411; }

/* ---- The glass primitive ----------------------------------- */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-glass);
}
.glass::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 42%);
}
.glass--blur{ backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.glass--raised{ background:var(--glass-2); border-color:var(--glass-edge-2); }

/* ---- Floating chrome --------------------------------------- */
.masthead.is-solid{
  background:rgba(10,20,17,.62);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  color:var(--ink);
  border-bottom-color:var(--glass-edge);
}

.filters{
  background:rgba(10,20,17,.58);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-top-color:var(--glass-edge);
  border-bottom-color:var(--glass-edge);
}

.pview__bar{
  background:rgba(8,16,14,.70);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom-color:var(--glass-edge);
}

.panel{
  background:rgba(9,18,15,.82);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-left:1px solid var(--glass-edge);
}
.panel__head,.panel__foot{ border-color:var(--glass-edge); }
.panel-scrim{ background:rgba(3,8,7,.62); backdrop-filter:blur(6px); }

.dock__group{
  background:rgba(10,20,17,.70);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}
.dock__group button + button{ border-left-color:var(--glass-edge); }
.dock__group button[data-dock-primary]{ background:var(--sand); color:#0A1411; }
.dock__group button[data-dock-primary]:hover{ background:#EFE5D1; }

.toast{
  background:rgba(12,24,20,.86);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}

/* ---- Badges, saves, pills ---------------------------------- */
.tag{
  background:rgba(12,24,20,.55);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}
.tag--dark{ background:rgba(4,10,8,.72); color:var(--ink); }
.tag--clay{ background:rgba(212,144,111,.22); border-color:rgba(212,144,111,.55); color:#F0C4AC; }

.save{
  background:rgba(12,24,20,.5);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-edge);
  color:var(--ink);
}
.save[aria-pressed="true"]{ background:var(--sand); border-color:var(--sand); color:#0A1411; }

.pill{ border-color:var(--glass-edge-2); color:var(--ink-70); background:var(--glass); }
.pill:hover{ border-color:var(--sand); color:var(--ink); background:var(--glass-2); }
.pill.is-on{ background:var(--sand); border-color:var(--sand); color:#0A1411; }

.status-dot[data-status="verified"]{ color:#7FC4A0; }
.status-dot[data-status="review"]{ color:#E2A883; }
.status-dot[data-status="pending"]{ color:var(--ocean-2); }

/* ---- Buttons ----------------------------------------------- */
.btn{ --btn-bg:var(--glass-2); --btn-fg:var(--ink); border-color:var(--glass-edge-2); }
.btn::after{ background:var(--sand); }
.btn:hover{ color:#0A1411; border-color:var(--sand); }

.btn--light,.btn--sand{ --btn-bg:var(--sand); --btn-fg:#0A1411; border-color:var(--sand); }
.btn--light::after,.btn--sand::after{ background:#F2E9D7; }
.btn--light:hover,.btn--sand:hover{ color:#0A1411; }

.btn--ghost,.btn--outline-light{ --btn-bg:transparent; --btn-fg:var(--ink); border-color:var(--glass-edge-2); }
.btn--ghost::after,.btn--outline-light::after{ background:var(--sand); }
.btn--ghost:hover,.btn--outline-light:hover{ color:#0A1411; border-color:var(--sand); }

.icon-btn{ border-color:var(--glass-edge-2); background:var(--glass); }
.icon-btn:hover,.icon-btn--light:hover{ background:var(--sand); color:#0A1411; border-color:var(--sand); }

.active-filters button{ border-color:var(--glass-edge-2); background:var(--glass); }
.active-filters button:hover{ background:var(--sand); color:#0A1411; border-color:var(--sand); }

/* Select arrows must be light on a dark field. */
.field select,.filters__select select,.brief .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23EFEADF' stroke-width='1'/%3E%3C/svg%3E");
}
.field select option,.filters__select select option{ background:#0B1512; color:#EFEADF; }
.field input,.field textarea,.field select{ background:transparent; }
.field input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 40px #0B1512 inset; }

/* ---- Panels that were solid on light ----------------------- */
.pview__price{
  background:var(--glass-2);
  border-color:var(--glass-edge);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  box-shadow:var(--shadow-glass);
}
.empty{
  background:var(--glass);
  border-color:var(--glass-edge);
  box-shadow:var(--shadow-glass);
}
.invest{
  background:var(--glass-2);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-glass);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
}
.brief__success{ background:var(--glass); border-color:var(--glass-edge); }
.pmap{ background:var(--glass); border:1px solid var(--glass-edge); }

/* Sections sit on one continuous ground; the glass does the work. */
.statement,.discovery,.journal,.regions,.why,.brief,.footer,.rail-section,.related{
  background:transparent;
}
.rail-section,.related{ background:rgba(233,242,238,.02); }
.footer{ background:rgba(3,8,7,.55); border-top:1px solid var(--glass-edge); }

/* ---- Property card as glass -------------------------------- */
.card{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  padding:10px 10px 18px;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover{
  background:var(--glass-2);
  border-color:var(--glass-edge-2);
  transform:translateY(-3px);
}
.card__media{ background:rgba(0,0,0,.35); }
.card__body{
  /* Flush with the photograph above it. An inset here put every line of
     type 8px out of line with the image edge. */
  padding-inline:0;
  border-top-color:var(--glass-edge);
}
.card__link{ inset:-1px; }

.mini{ border-bottom-color:var(--glass-edge); }
.note__media{ background:rgba(0,0,0,.3); border:1px solid var(--glass-edge); }

/* ---- Symmetry ---------------------------------------------- */
/* The brief asked for symmetrical and aligned: section headers are
   centred on the shell axis, and the results grid is uniform rather
   than editorially staggered. */
.sym-head{
  display:grid; justify-items:center; text-align:center;
  gap:clamp(16px,2vw,24px);
  max-width:74ch; margin-inline:auto;
  padding-bottom:clamp(30px,4vw,56px);
}
.sym-head .label--rule::before{ display:none; }
.sym-head .label--rule{ justify-content:center; }
.sym-head p{ max-width:56ch; }

.discovery__head,.regions__head,.rail__head,.journal .rail__head{
  display:grid; justify-items:center; text-align:center;
  gap:clamp(14px,1.8vw,22px);
  max-width:80ch; margin-inline:auto;
}
.discovery__head p,.regions__head p,.rail__head p{ max-width:54ch; }
.regions__head .label--rule::before,
.discovery__head .label--rule::before,
.rail__head .label--rule::before{ display:none; }
.regions__head .label--rule,
.discovery__head .label--rule,
.rail__head .label--rule{ justify-content:center; }

/* Uniform card grid — equal cells, equal gutters. */
.grid .card,
.grid .card:nth-child(9n+1),
.grid .card:nth-child(9n+2){ grid-column:span 4; }
.grid .card .card__media,
.grid .card:nth-child(9n+1) .card__media,
.grid .card:nth-child(9n+2) .card__media{ aspect-ratio:4/5; }

.results-bar{ justify-content:center; text-align:center; }
.results-bar__right{ justify-content:center; }

/* Controls sit on a rail, not on the centre axis: two centred runs of
   different widths (the intent row and the type row) never line up with
   each other. Both rows now start at the same x as the first card, and the
   selects close flush with the last card's right edge. */
.filters__row{ justify-content:flex-start; }
.filters__group > .label{
  width:56px; flex:none;          /* INTENT and TYPE share a column, so the
                                     first pill in each row starts level */
}
.filters__selects{ margin-left:auto; }

/* ---- Regions on glass -------------------------------------- */
.regions__stage{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-glass);
}
.region-row{ border-bottom-color:var(--glass-edge); }
.regions__list{ border-top-color:var(--glass-edge); }
.cap,.cap__item{ border-color:var(--glass-edge); }
.specs,.specs__row,.diligence,.diligence__row,.features li,.rule{ border-color:var(--glass-edge); }
.rule{ background:var(--glass-edge); }

/* ---- Tablet + phone ---------------------------------------- */
@media (max-width:1180px){
  .grid .card,
  .grid .card:nth-child(9n+1),
  .grid .card:nth-child(9n+2){ grid-column:span 6; }
}
@media (max-width:768px){
  .grid .card,
  .grid .card:nth-child(9n+1),
  .grid .card:nth-child(9n+2){ grid-column:1/-1; }
  /* Blur is the first thing to go on phones. */
  .card,.tag,.save{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .masthead.is-solid,.filters,.pview__bar,.panel,.dock__group{
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
}

/* Older engines without backdrop-filter get opaque panels rather than
   unreadable transparent ones. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .masthead.is-solid{ background:rgba(8,16,14,.96); }
  .filters{ background:rgba(8,16,14,.96); }
  .pview__bar{ background:rgba(8,16,14,.97); }
  .panel{ background:rgba(8,16,14,.98); }
  .dock__group,.toast,.tag,.save{ background:rgba(8,16,14,.92); }
}


/* ---- Sri Lanka ---------------------------------------------
   Carried quietly rather than flown: a small flag beside the
   wordmark, in the gate's mark, and on the footer baseline. */
.lk-flag{
  flex:none; display:block;
  border-radius:1px;
  opacity:.82;
  transition:opacity var(--dur-fast) var(--ease);
}
.brand:hover .lk-flag{ opacity:1; }
.masthead .lk-flag{ margin-left:4px; align-self:center; }
.entry__mark .lk-flag{ width:28px; height:14px; margin-left:2px; opacity:.72; }
.abar__brand .lk-flag{ width:26px; height:13px; }
.footer__flag{ display:inline-flex; align-items:center; gap:9px; }
.footer__flag .lk-flag{ width:24px; height:12px; }
@media (max-width:480px){
  .masthead .lk-flag{ display:none; }
}

/* ---- Location rail ------------------------------------------
   The first real choice a guest makes is a place, so it is the
   first control they meet — photographed, counted, one tap. */
.locations{
  display:flex; gap:10px;
  overflow-x:auto; scroll-snap-type:x proximity;
  padding:clamp(22px,2.6vw,34px) var(--gutter) 6px;
  margin-inline:calc(var(--gutter) * -1);
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.locations::-webkit-scrollbar{ display:none; }

.loc{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; align-items:center; gap:10px;
  padding:7px 14px 7px 7px;
  background:var(--glass); border:1px solid var(--glass-edge);
  color:var(--ink-70);
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.loc:hover:not(:disabled){ background:var(--glass-2); border-color:var(--glass-edge-2); color:var(--ink); }
.loc.is-on{ background:var(--sand); border-color:var(--sand); color:#0A1411; }
.loc:disabled{ opacity:.38; cursor:default; }

.loc__shot{
  width:36px; height:36px; flex:none; overflow:hidden;
  background:rgba(0,0,0,.35);
}
.loc__shot img{ width:100%; height:100%; object-fit:cover; }
.loc[data-loc="all"]{ padding-left:14px; }
.loc__name{
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; white-space:nowrap;
}
.loc__count{
  font-size:10px; font-weight:500; opacity:.6;
  padding-left:8px; margin-left:2px;
  border-left:1px solid currentColor;
}
.loc.is-on .loc__count{ opacity:.75; }

/* ---- Card: price and place carry the decision ---------------- */
.card__where{
  position:absolute; left:14px; bottom:14px; z-index:2;
  pointer-events:none;
}
.card__where span{
  display:inline-block; padding:6px 10px;
  background:rgba(4,10,8,.62);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  border:1px solid var(--glass-edge);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--ink);
}
.card:hover .card__where{ opacity:0; transition:opacity var(--dur) var(--ease); }

.card__price{
  font-size:1rem; font-weight:500; letter-spacing:-.01em;
  text-align:right;
}
.card__price small{
  display:block; margin-top:4px;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:400; color:var(--ink-38);
}
.card__head{ align-items:flex-start; }
.card__title{ padding-top:2px; }

@media (max-width:768px){
  .locations{ padding-top:18px; }
  .loc__shot{ width:32px; height:32px; }
  .card__price{ font-size:.95rem; }
}


/* The console is for the office, not for visitors: last item on the footer
   baseline, legible only if you are looking for it. */
.footer__console{
  color:var(--ink-on-dark-40);
  transition:color var(--dur-fast) var(--ease);
}
.footer__console:hover{ color:var(--sand); }