/* ==========================================================================
   Page-level styles: hero, overview extras, services, client login & portal
   ========================================================================== */

/* ---- Hero banner ---------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 268px; padding: 34px 38px;
  display: flex; align-items: center;
  border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(100deg, var(--navy-deep) 0%, #0A3965 40%, #0B5678 72%, var(--teal-deep) 100%);
  box-shadow: 0 12px 30px rgba(8, 43, 80, .18);
}
.hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: 0; pointer-events: none; }
.hero-art svg { display: block; width: 100%; height: 100%; }
.hero::after { /* keeps copy legible over the artwork */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 43, 80, .9) 0%, rgba(8, 43, 80, .72) 34%, rgba(8, 43, 80, 0) 64%);
}
/* Photo hero: the aerial image fills the banner; a navy-to-teal tint fades it into the brand colours */
.hero-photo {
  background:
    linear-gradient(100deg, rgba(8, 43, 80, .94) 0%, rgba(8, 43, 80, .82) 38%, rgba(8, 62, 88, .48) 68%, rgba(8, 117, 101, .38) 100%),
    url("../assets/hero-land.jpg") center 58% / cover no-repeat,
    var(--navy-deep);
}
.hero-photo::after { background: linear-gradient(180deg, rgba(8, 43, 80, 0) 70%, rgba(8, 43, 80, .35) 100%); }
.hero-copy { position: relative; z-index: 2; max-width: 500px; }
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #CFE6F5; }
.hero h1 { margin: 14px 0 14px; color: #fff; font-size: clamp(34px, 3.3vw, 48px); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; }
.hero h1 .hl { display: block; color: var(--mint); }
.hero p.lead { max-width: 460px; font-size: var(--fs-md); line-height: 1.6; color: #DCEAF6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero-sm { min-height: 190px; }
.hero-sm h1 { font-size: clamp(28px, 2.6vw, 38px); }

/* Land-parcel artwork (inline SVG): classes so it themes with tokens */
.art-line { stroke: var(--mint); fill: none; }
.art-contour { stroke: var(--mint); fill: none; opacity: .2; stroke-width: 1; }
.art-grid { stroke: #7FE6D0; fill: none; stroke-width: 1; opacity: .38; }
.art-parcel { stroke: #fff; stroke-width: 2; fill: rgba(55, 211, 181, .16); stroke-linejoin: round; }
.art-dot { fill: #fff; stroke: var(--teal-deep); stroke-width: 1.5; }
.art-pin { fill: #fff; }
.art-pin-eye { fill: var(--teal-deep); }
.art-pulse { fill: rgba(55, 211, 181, .28); stroke: var(--mint); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
  .art-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: .5; } }
}

/* ---- Overview extras ------------------------------------------------------- */
.land-sale-table .col-price { font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ---- Services page --------------------------------------------------------- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 4px 20px 20px; }
.contact-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: #FAFCFE; }
.contact-item .ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--teal-light); color: var(--teal-deep); }
.contact-item .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.contact-item .v { margin-top: 2px; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.contact-item .v.todo { color: var(--warn-fg); font-weight: 500; }

/* ---- Client login ---------------------------------------------------------- */
.login-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 980px; margin: 8px auto 0; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-1);
}
.login-brand {
  position: relative; isolation: isolate; padding: 36px 34px; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
  background: linear-gradient(160deg, #0B3563 0%, var(--navy-deep) 55%, var(--navy-dark) 100%);
}
.login-brand img { width: 210px; height: auto; display: block; }
.login-brand h2 { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.login-brand ul { display: grid; gap: 12px; }
.login-brand li { display: flex; gap: 12px; align-items: flex-start; color: #DCEAF6; font-size: var(--fs-base); line-height: 1.5; }
.login-brand li .icon { margin-top: 2px; color: var(--mint); }
.login-brand .login-art { position: absolute; right: -30px; bottom: -20px; width: 300px; opacity: .22; z-index: -1; }
.login-form { padding: 36px 34px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.login-form h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.login-form .lead { color: var(--text-muted); margin-top: -8px; }

/* ---- Client portal --------------------------------------------------------- */
.portal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-fg); font-size: var(--fs-sm); margin-bottom: 16px; }
.portal-bar .btn { margin-left: auto; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.portal-wide { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero { padding: 26px 22px; min-height: 0; }
  .hero-art { width: 100%; opacity: .55; }
  .hero::after { background: linear-gradient(90deg, rgba(8, 43, 80, .92) 0%, rgba(8, 43, 80, .78) 60%, rgba(8, 43, 80, .5) 100%); }
  .hero-photo { background: linear-gradient(90deg, rgba(8, 43, 80, .9), rgba(8, 43, 80, .72)), url("../assets/hero-land.jpg") center / cover no-repeat, var(--navy-deep); }
  .hero-photo::after { background: none; }
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login-brand { padding: 26px 22px; }
  .login-form { padding: 26px 22px; }
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .hero h1 { font-size: 31px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---- Additions used by the shell, forms and pages ----------------------------------------- */
.hero .hero-title { margin: 14px 0 14px; color: #fff; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.hero .hero-title .hl { display: block; color: var(--mint); }
.stack { margin-bottom: 14px; }
.form-note { margin: 14px 0 14px; font-size: var(--fs-sm); color: var(--text-muted); }
.notice + .form-note { margin-top: 12px; }
.confirm-text { color: #2C4059; line-height: 1.6; }
.stat-static, .stat-static:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--border); }
.service-text > span { display: block; }
.sr-text { display: flex; flex-direction: column; min-width: 0; }
.sr-text .sr-main, .sr-text .sr-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill.status-ok { background: var(--ok-bg); color: var(--ok-fg); }
.receipt-note { margin-top: 12px; line-height: 1.55; }
.login-form h2.login-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.page-host:focus { outline: none; }
.detail-section .muted { margin: 0; }
.notif-list .activity-ico { flex: none; }
#toasts:empty { display: none; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* Location pin on the photo hero (decorative) */
.hero-pin { position: absolute; z-index: 1; right: 7%; top: 50%; width: clamp(120px, 12vw, 170px); transform: translateY(-52%); pointer-events: none; filter: drop-shadow(0 10px 14px rgba(6, 39, 70, .45)); }
.hero-pin svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 900px) { .hero-pin { right: 4%; width: 96px; opacity: .85; } }
@media (max-width: 460px) { .hero-pin { display: none; } }


/* ---- Shared helpers for the newer pages ------------------------------------------------ */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sub-line { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.stack-top { margin-top: 14px; }
.name-link { color: var(--navy); text-decoration: none; }
.name-link:hover strong { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.input-file { height: auto; padding: 9px 10px; cursor: var(--cursor-hand); }
.input-file::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 8px; background: var(--teal-light); color: var(--teal-deep); font: inherit; font-weight: 700; cursor: var(--cursor-hand); }
.input-file:hover::file-selector-button { background: #D3EFE7; }

/* ---- Client page ------------------------------------------------------------------------ */
.crumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: var(--fs-sm); color: var(--text-muted); }
.crumbs a { color: var(--action); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.client-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.client-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--teal-deep)); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.client-id { flex: 1 1 260px; min-width: 0; }
.client-id h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.client-id h1:focus { outline: none; }
.client-id p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.client-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.client-contact a:hover { color: var(--action); text-decoration: underline; }
.client-contact svg { color: var(--teal); }
.client-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.chip { padding: 7px 14px; border: 1px solid #B3C2D3; border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: var(--cursor-hand); }
.chip:hover { background: var(--teal-light); border-color: var(--teal); }
.client-sections { display: flex; flex-direction: column; gap: 16px; }
.client-sec h2 .sub { margin-left: 6px; }

/* ---- Documents -------------------------------------------------------------------------------- */
.doc-link { display: inline-flex; align-items: center; gap: 10px; max-width: 320px; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--navy); cursor: var(--cursor-hand); }
.doc-link svg { flex: none; color: var(--teal); }
.doc-link span { min-width: 0; }
.doc-link strong { display: block; overflow-wrap: anywhere; }
.doc-link small { display: block; font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.doc-link:hover strong { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.doc-preview-box { min-height: 60px; }
.doc-preview { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-md); background: #F3F6FA; object-fit: contain; }
.doc-mini { margin: 0; padding-left: 18px; }
.doc-mini li { margin: 4px 0; }

/* ---- Google Maps block ------------------------------------------------------------------------ */
.map-block { display: flex; flex-direction: column; gap: 12px; }
.map-empty { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; border: 1px dashed #9DB0C4; border-radius: var(--r-md); background: #F8FBFD; color: var(--text-muted); }
.map-empty svg { flex: none; color: var(--teal); }
.map-empty strong { color: var(--navy); }
.map-empty p { margin: 4px 0 0; font-size: var(--fs-sm); }
.map-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
.map-facts dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.map-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.map-wide { grid-column: 1 / -1; }
.map-frame { position: relative; height: clamp(240px, 34vw, 400px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: linear-gradient(135deg, #E9F1F8, #E4F5F0); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; color: var(--text-muted); }
.map-placeholder svg { color: var(--teal); }
.map-placeholder p { margin: 0; font-size: var(--fs-sm); }
.map-links { display: flex; gap: 8px; flex-wrap: wrap; }
.map-disclaimer { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- Plot lookup ------------------------------------------------------------------------------- */
.lookup-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 18px 20px; }
.lookup-form .field { flex: 1 1 280px; }
.plot-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plot-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.plot-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plot-id { font-weight: 800; color: var(--navy); font-size: var(--fs-md); text-decoration: none; }
.plot-id:hover { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.plot-main small { color: var(--text-muted); }
.plot-side { display: flex; align-items: center; gap: 10px; }

@media (max-width: 700px) {
  .client-head { padding: 16px; }
  .client-actions .btn { flex: 1 1 auto; }
  .map-facts { grid-template-columns: 1fr; }
  .map-frame { height: 260px; }
  .lookup-form .btn { width: 100%; }
}

.service-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---- Sign-up, country-code picker, application review ---------------------------------------- */
.signup-form { gap: 14px; }
.login-switch { text-align: center; margin: 4px 0 0; font-size: var(--fs-sm); }
.login-switch a { color: var(--action); font-weight: 600; text-decoration: underline; }
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-num { flex: 1; min-width: 0; }
.cc { position: relative; flex: none; }
.cc-btn { height: 100%; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border: 1px solid #B3C2D3; border-radius: var(--r-md); color: var(--navy); font-weight: 600; font-size: var(--fs-base); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cc-btn:hover, .cc-btn[aria-expanded="true"] { border-color: var(--action); box-shadow: 0 0 0 3px rgba(14, 116, 116, .12); }
.cc-btn .chev { color: var(--muted, #5B6B7D); }
.flag { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(11, 36, 71, .14); background: #EEF3F8; }
.cc-pop { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 48px)); padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 14px 36px rgba(11, 36, 71, .22); }
.cc-list { max-height: 260px; overflow: auto; margin: 8px 0 0; padding: 0; list-style: none; overscroll-behavior: contain; }
.cc-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: var(--fs-sm); }
.cc-opt .flag { width: 22px; height: 22px; }
.cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-code { color: var(--muted, #5B6B7D); font-variant-numeric: tabular-nums; }
.cc-opt.is-active, .cc-opt:hover { background: #E8F3F2; }
.cc-opt[aria-selected="true"] { font-weight: 700; color: var(--navy); }
.cc-none { padding: 12px; color: var(--muted, #5B6B7D); font-size: var(--fs-sm); }
.flag-inline { display: inline-flex; align-items: center; gap: 8px; }
.flag-inline .flag { width: 18px; height: 18px; }

.review-card { max-width: 640px; margin: 8px auto 0; padding: 36px 34px 30px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-1); text-align: center; display: grid; gap: 16px; justify-items: center; }
.review-ico { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; }
.review-card h2 { font-size: 24px; letter-spacing: -.02em; color: var(--navy); max-width: 30ch; }
.review-lead { color: var(--text-2, #3B4B5E); max-width: 52ch; line-height: 1.6; margin: 0; }
.review-note { background: var(--warn-bg, #FFF4DB); padding: 10px 14px; border-radius: var(--r-md); margin: 0; }
.review-steps { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 14px; text-align: left; width: 100%; max-width: 420px; }
.review-steps li { display: flex; gap: 12px; align-items: flex-start; }
.review-steps small { display: block; color: var(--muted, #5B6B7D); font-size: var(--fs-sm); margin-top: 2px; }
.rs-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #C5D4E3; display: grid; place-items: center; margin-top: 1px; color: #fff; }
.rs-done .rs-dot { background: var(--action); border-color: var(--action); }
.rs-now .rs-dot { border-color: #E0A100; box-shadow: 0 0 0 4px rgba(224, 161, 0, .18); }
.rs-todo { opacity: .65; }
.review-card .detail-grid { width: 100%; text-align: left; }
.review-foot { font-size: var(--fs-sm); margin: 0; }
@media (max-width: 560px) { .review-card { padding: 28px 20px 24px; } }
@media (prefers-reduced-motion: no-preference) {
  .rs-now .rs-dot { animation: dot-pulse 1.8s ease-in-out infinite; }
  .review-ico { animation: pop-in .5s var(--ease-out) both; }
  .cc-pop:not([hidden]) { animation: drop .16s var(--ease-out) both; transform-origin: top left; }
  .page-host.enter .review-card { animation: rise 420ms var(--ease-out) both; }
}
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(224, 161, 0, .18); } 50% { box-shadow: 0 0 0 7px rgba(224, 161, 0, .05); } }
.login-shell { overflow: visible; }
.login-brand { border-radius: var(--r-xl) 0 0 var(--r-xl); }
@media (max-width: 820px) { .login-brand { border-radius: var(--r-xl) var(--r-xl) 0 0; } }

.sample-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; font-size: var(--fs-sm); color: var(--text-muted); }