/* ═══════════════════════════════════════════════════════════════
   AREA PAGES — mobile-first redesign (Al Barq Real Estate)
   Scope: body.area-page only. Desktop (≥860px) keeps the existing
   layout; everything below is confined to the mobile experience,
   so no other page or breakpoint is affected.
   ═══════════════════════════════════════════════════════════════ */
.area-page{
  --brand-gold:#C8953E;
  --brand-gold-light:#E2B95F;
  --brand-brown:#2A1A12;
  --brand-brown-medium:#5A3824;
  --brand-cream:#F5F0E6;
  --surface-w:#FFFFFF;
  --text-primary:#17130F;
  --text-secondary:#70665D;
  --border-soft:rgba(42,26,18,.10);
  --shadow-soft:0 8px 30px rgba(42,26,18,.08);
  --am-nav-h:64px;
  --am-bottomnav-h:64px;
}

/* shared bits that are safe at every width */
.area-page .am-ico{width:1em;height:1em;flex:none}
.area-page .am-more,.area-page .am-share{font:inherit}
.area-page .am-bottom-nav{display:none}
.area-page .am-chips{display:none}
.area-page .am-share{display:none}
.area-page .am-rail-wrap{margin-top:var(--sp-6)}
.area-page .am-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.area-page .am-rail-card{display:block;background:var(--surface-w);border:1px solid var(--border-soft);border-radius:18px;overflow:hidden;color:var(--text-primary);box-shadow:var(--shadow-soft);transition:transform .2s ease}
.area-page .am-rail-card:hover{transform:translateY(-3px)}
.area-page .am-rail-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.area-page .am-rail-card .am-rc-body{padding:12px 14px}
.area-page .am-rail-card b{display:block;font-size:15px;color:var(--brand-brown)}
.area-page .am-rail-card small{display:block;margin-top:3px;color:var(--text-secondary);font-size:12.5px}
.area-page .am-rail-card .am-rc-price{display:inline-block;margin-top:8px;font-weight:800;font-size:13px;color:var(--brand-gold);background:rgba(200,149,62,.10);border-radius:999px;padding:3px 10px}
.area-page .am-rail-more{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;color:var(--brand-brown-medium);background:var(--surface-w);border:1px dashed rgba(42,26,18,.22)}

/* ─────────────────────────────────────────────
   MOBILE + SMALL TABLET  (matches header breakpoint)
   ───────────────────────────────────────────── */
@media (max-width:859.98px){

  /* ── page ground ─────────────────────────── */
  .area-page{background:var(--brand-cream);color:var(--text-primary)}
  .area-page body,.area-page main{background:transparent}
  .area-page .wrap{padding-inline:16px}
  .area-page section{padding-block:28px}
  .area-page main{padding-bottom:calc(var(--am-bottomnav-h) + env(safe-area-inset-bottom,0px) + 20px)}

  /* kill the old dark sticky bar — replaced by the bottom nav */
  .area-page .sticky-cta{display:none !important}

  /* ── 1 · header: light, sticky, safe-area ── */
  .area-page .site-head{
    position:sticky;top:0;z-index:80;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
    box-shadow:none;
    padding-top:env(safe-area-inset-top,0px);
  }
  .area-page .site-head .wrap{min-height:var(--am-nav-h);gap:10px}
  .area-page .brand{color:var(--brand-brown);font-weight:800;font-size:15px}
  .area-page .brand .logo-img{height:38px;width:auto;object-fit:contain;filter:none;background:none;border-radius:0;box-shadow:none}
  .area-page .menu-toggle{border-color:rgba(42,26,18,.22);background:var(--surface-w)}
  .area-page .menu-toggle>span:not(.sr-only){background:var(--brand-brown)}
  .area-page .lang{border-color:rgba(42,26,18,.22);color:var(--brand-brown-medium);background:var(--surface-w)}
  /* light dropdown instead of the old near-black one */
  .area-page .nav{
    inset-block-start:calc(var(--am-nav-h) + env(safe-area-inset-top,0px));
    background:var(--surface-w);
    border:1px solid var(--border-soft);
    box-shadow:0 24px 60px rgba(42,26,18,.16);
  }
  .area-page .nav a{color:var(--brand-brown);font-weight:600;border-radius:10px;min-height:44px;display:flex;align-items:center}
  .area-page .nav a:hover{background:rgba(200,149,62,.10);color:var(--brand-brown)}

  /* breadcrumbs: quieter, single line */
  .area-page .crumbs{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:10px}
  .area-page .crumbs::-webkit-scrollbar{display:none}
  .area-page .crumbs a{color:var(--brand-brown-medium)}

  /* ── 2 · hero: image first, rounded, overlaid share ── */
  .area-page .hero{padding-block:4px 20px !important;background:transparent}
  .area-page .hero .wrap{display:flex;flex-direction:column}
  .area-page .hero .area-photo{order:0;position:relative;margin:0}
  .area-page .hero .badge{order:1}
  .area-page .hero h1{order:2}
  .area-page .am-lead{order:3}
  .area-page .am-chips{order:4}
  .area-page .hero .grid{order:5}
  .area-page .hero .src{order:6}

  .area-page .hero .area-photo img{
    width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;
    border-radius:20px;box-shadow:var(--shadow-soft);
  }
  .area-page .hero .area-photo::after{ /* soft legibility gradient */
    content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
    background:linear-gradient(180deg,rgba(23,19,15,.18),transparent 34%,transparent 72%,rgba(23,19,15,.16));
  }
  .area-page .hero .area-photo figcaption{font-size:11px;color:var(--text-secondary);margin-top:6px !important}
  .area-page .am-share{
    display:flex;align-items:center;justify-content:center;
    position:absolute;z-index:2;inset-block-start:12px;inset-inline-end:12px;
    width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
    background:rgba(255,255,255,.92);color:var(--brand-brown);
    box-shadow:0 4px 14px rgba(23,19,15,.18);
  }
  .area-page .am-share:active{background:var(--brand-gold);color:#fff}
  .area-page .am-share .am-ico{width:19px;height:19px}

  .area-page .hero .badge{
    align-self:flex-start;margin-top:14px;
    background:rgba(200,149,62,.12);color:var(--brand-brown-medium);
    border:1px solid rgba(200,149,62,.4);font-weight:700;
  }
  .area-page .hero h1{
    font-size:26px;line-height:1.35;color:var(--brand-brown);
    margin-top:10px !important;letter-spacing:0;
  }

  /* ── 3 · intro: clamp + read-more ── */
  .area-page .am-lead{margin-top:10px}
  .area-page .am-lead .lead{
    font-size:16px;line-height:1.8;color:var(--text-secondary);margin:0 !important;
  }
  .area-page .am-lead .lead strong{color:var(--brand-brown)}
  .area-page .am-lead[data-clamped] .lead{
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  }
  .area-page .am-more{
    display:inline-flex;align-items:center;gap:6px;margin-top:8px;
    min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;
    color:var(--brand-gold);font-weight:700;font-size:14px;
  }
  .area-page .am-more::after{content:"▾";transition:transform .2s ease}
  .area-page .am-more[aria-expanded="true"]::after{transform:rotate(180deg)}
  .area-page .am-more[hidden]{display:none}

  /* ── 5 · quick highlight chips ── */
  .area-page .am-chips{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    margin-top:14px;padding-bottom:2px;
  }
  .area-page .am-chips::-webkit-scrollbar{display:none}
  .area-page .am-chip{
    flex:none;display:inline-flex;align-items:center;gap:7px;
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:999px;padding:9px 14px;
    font-size:13px;font-weight:600;color:var(--brand-brown);white-space:nowrap;
  }
  .area-page .am-chip .am-ico{color:var(--brand-gold);width:15px;height:15px}

  /* ── 4 · statistics cards ── */
  .area-page .hero .grid.g4{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px !important;
  }
  .area-page .hero .grid.g4 .card.stat:nth-child(odd):last-child{grid-column:1/-1}
  .area-page .card.stat{
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:20px;box-shadow:0 4px 16px rgba(42,26,18,.05);
    padding:16px;text-align:center;
  }
  .area-page .card.stat .v{
    font-size:24px;font-weight:800;color:var(--brand-brown);
    font-family:var(--font-data),monospace;letter-spacing:-.3px;
  }
  .area-page .card.stat .l{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--text-secondary)}
  .area-page .src{font-size:11.5px;color:var(--text-secondary);margin-top:14px}

  /* section headers */
  .area-page .kicker{color:var(--brand-gold);font-size:12px;letter-spacing:.06em}
  .area-page h2{font-size:22px;line-height:1.4;color:var(--brand-brown);margin-top:4px}
  .area-page h3{font-size:16.5px;color:var(--brand-brown)}

  /* ── 6 · audience cards: swipeable rail ── */
  .area-page .grid.g3{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;margin-inline:-16px;padding-inline:16px;padding-block:4px 8px;
    scrollbar-width:none;
  }
  .area-page .grid.g3::-webkit-scrollbar{display:none}
  .area-page .grid.g3>.card{
    flex:0 0 78%;max-width:320px;scroll-snap-align:start;
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:20px;box-shadow:0 4px 16px rgba(42,26,18,.05);padding:18px;
  }
  .area-page .grid.g3>.card h3{
    display:flex;align-items:center;gap:9px;font-size:15.5px;
  }
  .area-page .grid.g3>.card h3::before{
    content:"";flex:none;width:8px;height:8px;border-radius:99px;
    background:var(--brand-gold);box-shadow:0 0 0 4px rgba(200,149,62,.15);
  }
  .area-page .grid.g3>.card p{font-size:14px !important;line-height:1.75;color:var(--text-secondary) !important;margin-top:8px}

  /* ── 7+8 · price tables → readable stat rows ── */
  .area-page .grid.g2{display:grid;grid-template-columns:1fr;gap:22px}
  .area-page .tbl-scroll{overflow:visible;border:0;background:none}
  .area-page .tbl{display:block;border:0;font-size:inherit}
  .area-page .tbl thead{display:none}
  .area-page .tbl tbody{display:flex;flex-direction:column;gap:10px}
  .area-page .tbl tr{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:16px;padding:13px 16px;
  }
  .area-page .tbl tr:hover td{background:transparent}
  .area-page .tbl td{display:block;padding:0;border:0;background:none !important}
  .area-page .tbl td:first-child{
    flex:1 1 46%;font-size:13.5px;font-weight:600;color:var(--brand-brown);line-height:1.5;
  }
  .area-page .tbl td.num{
    font-size:17px;font-weight:800;color:var(--brand-gold);
    font-family:var(--font-data),monospace;white-space:nowrap;
  }
  .area-page .tbl td.up{color:#1d7648;font-weight:700;font-size:13px}
  .area-page .tbl td.down{color:#ae4141;font-weight:700;font-size:13px}
  /* plain-note cells (notes column) drop to a second line, small */
  .area-page .tbl td:not(.num):not(:first-child){
    flex:1 1 100%;font-size:12.5px;color:var(--text-secondary);line-height:1.6;
  }
  /* cells that contain only "—" are hidden by JS */
  .area-page .tbl td.am-dash{display:none}

  /* ── projects & generic cards ── */
  .area-page .card{
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:20px;box-shadow:0 4px 16px rgba(42,26,18,.05);
  }
  .area-page .grid:not(.g4):not(.g3){display:grid;grid-template-columns:1fr;gap:12px}

  /* ── buttons / CTA ── */
  .area-page .btn{min-height:48px;border-radius:16px;font-weight:700}
  .area-page .btn-wa{
    min-height:50px;background:var(--brand-gold);border-color:var(--brand-gold);
    color:#fff;box-shadow:0 6px 18px rgba(200,149,62,.35);
  }
  .area-page .btn-wa:hover,.area-page .btn-wa:active{background:var(--brand-brown);border-color:var(--brand-brown);color:#fff}
  .area-page .btn-ghost{border-color:rgba(42,26,18,.22);color:var(--brand-brown-medium);background:var(--surface-w)}
  .area-page .btn:focus-visible{outline:3px solid var(--brand-gold-light);outline-offset:2px}

  /* ── 9 · FAQ accordion ── */
  .area-page details.faq{
    background:var(--surface-w);border:1px solid var(--border-soft);
    border-radius:16px;margin-bottom:10px;overflow:hidden;
  }
  .area-page details.faq summary{
    min-height:52px;padding:14px 16px;font-size:14.5px;font-weight:700;color:var(--brand-brown);
  }
  .area-page details.faq summary::after{
    content:"";flex:none;width:9px;height:9px;margin-inline-start:auto;
    border-inline-end:2px solid var(--brand-gold);border-block-end:2px solid var(--brand-gold);
    transform:rotate(45deg);transition:transform .25s ease;
  }
  .area-page details.faq[open] summary::after{transform:rotate(225deg)}
  .area-page details.faq summary:focus-visible{outline:3px solid var(--brand-gold-light);outline-offset:-3px}
  .area-page details.faq .a{
    padding:0 16px 16px;font-size:14px;line-height:1.8;color:var(--text-secondary);
  }
  .area-page details.faq[open] .a{animation:am-fade .28s ease}
  @keyframes am-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .area-page details.faq .a a{color:var(--brand-gold);font-weight:600}

  /* ── 10 · related areas rail ── */
  .area-page .am-rail{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;margin-inline:-16px;padding-inline:16px;padding-bottom:6px;
    scrollbar-width:none;grid-template-columns:none;
  }
  .area-page .am-rail::-webkit-scrollbar{display:none}
  .area-page .am-rail-card{flex:0 0 62%;max-width:250px;scroll-snap-align:start}
  .area-page .am-rail-more{min-height:150px;flex-basis:38%}
  .area-page .am-tools{margin-top:14px;font-size:13px;color:var(--text-secondary);line-height:2}
  .area-page .am-tools a{color:var(--brand-brown-medium);font-weight:600}

  /* ── 12 · bottom navigation ── */
  .area-page .am-bottom-nav{
    display:flex;position:fixed;z-index:90;inset-inline:0;inset-block-end:0;
    background:var(--surface-w);border-top:1px solid var(--border-soft);
    box-shadow:0 -6px 24px rgba(42,26,18,.07);
    padding-bottom:env(safe-area-inset-bottom,0px);
    height:calc(var(--am-bottomnav-h) + env(safe-area-inset-bottom,0px));
  }
  .area-page .am-bottom-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:44px;color:var(--text-secondary);font-size:11px;font-weight:600;
  }
  .area-page .am-bottom-nav .am-ico{width:21px;height:21px}
  .area-page .am-bottom-nav a[aria-current="page"]{color:var(--brand-gold)}
  .area-page .am-bottom-nav a[aria-current="page"] .am-ico{color:var(--brand-gold)}
  .area-page .am-bottom-nav a:focus-visible{outline:3px solid var(--brand-gold-light);outline-offset:-3px}

  /* footer breathing room above the fixed nav */
  .area-page .site-foot{padding-bottom:18px}

  /* guards */
  .area-page img{max-width:100%}
  .area-page .wrap,.area-page section{overflow-x:clip}
}

/* very narrow phones */
@media (max-width:359.98px){
  .area-page .hero h1{font-size:23px}
  .area-page .card.stat .v{font-size:20px}
  .area-page .grid.g3>.card{flex-basis:88%}
}

/* small-tablet: give rails more room */
@media (min-width:640px) and (max-width:859.98px){
  .area-page .grid.g3>.card{flex-basis:44%}
  .area-page .am-rail-card{flex-basis:32%}
  .area-page .hero .grid.g4{grid-template-columns:repeat(4,1fr)}
  .area-page .hero .grid.g4 .card.stat:nth-child(odd):last-child{grid-column:auto}
}

/* Desktop: the new blocks integrate quietly with the existing layout */
@media (min-width:860px){
  .area-page .am-bottom-nav{display:none}
  .area-page .am-share{display:none}
  .area-page .am-more{display:none}
  .area-page .am-lead[data-clamped] .lead{display:block;overflow:visible;-webkit-line-clamp:unset}
  .area-page .am-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .area-page .am-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-glass);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink)}
  .area-page .am-chip .am-ico{color:var(--signal);width:15px;height:15px}
}