:root {
      --bg: #f6f4ef;
      --paper: #fbfaf7;
      --ink: #111210;
      --muted: #6a6963;
      --line: #d9d7d0;
      --line-strong: #b8b5ad;
      --accent: #df6036;
      --accent-dark: #b84726;
      --accent-soft: #f2e3db;
      --green: #287158;
      --shadow: none;
      --radius: 10px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
      letter-spacing: -0.006em;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }

    .wrap {
      width: min(1220px, calc(100% - 40px));
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(244, 240, 232, 0.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(212, 206, 195, 0.88);
    }

    .nav {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.03em;
      white-space: nowrap;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      background: var(--ink);
      color: #fff;
      font-size: 18px;
      font-weight: 900;
    }

    .nav-actions {
      display: flex;
      gap: 9px;
      align-items: center;
    }

    .btn {
      border: 0;
      border-radius: 14px;
      min-height: 44px;
      padding: 0 18px;
      cursor: pointer;
      font-weight: 720;
      transition: 160ms ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
    }

    .btn:hover { transform: translateY(-1px); }
    .btn-light { background: transparent; border: 1px solid var(--line); color: var(--ink); }
    .btn-dark { background: var(--ink); color: #fff; }
    .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(228, 90, 50, .16); }
    .btn-accent:hover { background: var(--accent-dark); }
    .btn-instagram { background: #fff; color: var(--ink); border: 1px solid var(--line); }

    .insta-dot {
      width: 19px;
      height: 19px;
      display: inline-grid;
      place-items: center;
      border-radius: 6px;
      background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
      color: white;
      font-size: 12px;
      font-weight: 900;
    }

    .hero { padding: 0 0 66px; }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr);
      gap: 48px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.55);
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
      margin-bottom: 22px;
    }

    .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

    h1 {
      margin: 0;
      max-width: 720px;
      font-size: clamp(48px, 6.5vw, 82px);
      line-height: .97;
      letter-spacing: -0.065em;
      font-weight: 860;
    }

    h1 em { color: var(--accent); font-style: normal; }

    .hero-copy {
      max-width: 680px;
      margin-top: 26px;
      color: var(--muted);
      font-size: clamp(18px, 2vw, 21px);
      line-height: 1.55;
    }

    .search-card {
      margin-top: 32px;
      background: var(--paper);
      border: 1px solid var(--line);
      padding: 9px;
      border-radius: 18px;
      display: flex;
      gap: 10px;
      box-shadow: var(--shadow);
      max-width: 760px;
    }

    .search-card input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      padding: 0 10px 0 14px;
      color: var(--ink);
      min-height: 52px;
    }

    .search-card input::placeholder { color: #918c81; }

    .microcopy {
      color: var(--muted);
      font-size: 13px;
      margin: 12px 0 0 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .hero-contact { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .hero-contact small { color: var(--muted); }

    /* MAP */
    .map-column {
      min-width: 0;
    }

    .map-shell {
      position: relative;
      height: 585px;
      border: 1px solid var(--line);
      border-radius: 22px;
      overflow: hidden;
      background: #e9e6df;
      box-shadow: var(--shadow);
    }

    .map-caption {
      color: var(--muted);
      font-size: 13px;
      margin: 12px 8px 0;
    }

    #map { position: absolute; inset: 0; }

    .map-topbar {
      position: absolute;
      z-index: 4;
      top: 16px;
      left: 16px;
      right: 64px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      pointer-events: none;
    }

    .map-hint, .map-demo-label {
      pointer-events: auto;
      background: rgba(255,253,248,.95);
      border: 1px solid rgba(222,216,204,.9);
      backdrop-filter: blur(12px);
      box-shadow: 0 6px 18px rgba(0,0,0,.07);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 800;
    }

    .map-hint { max-width: 250px; }
    .map-hint span { color: var(--accent); }
    .map-demo-label { color: var(--muted); }

    .map-sheet {
      position: absolute;
      z-index: 5;
      left: 16px;
      right: 16px;
      bottom: 16px;
      background: rgba(255,253,248,.97);
      border: 1px solid rgba(222,216,204,.95);
      border-radius: 14px;
      padding: 17px;
      box-shadow: 0 10px 28px rgba(0,0,0,.12);
      backdrop-filter: blur(16px);
      max-height: calc(100% - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      transform: translateY(calc(100% + 34px));
      opacity: 0;
      transition: 220ms ease;
    }

    .map-sheet.show { transform: translateY(0); opacity: 1; }

    .map-sheet-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .map-sheet-kicker { color: var(--green); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
    .map-sheet h3 { margin: 3px 0 4px; font-size: 20px; letter-spacing: -.03em; }
    .map-sheet-address { color: var(--muted); font-size: 13px; }

    .sheet-close {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: white;
      cursor: pointer;
    }

    .map-sheet-body {
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
    }

    .map-sheet-copy { color: #4b4740; font-size: 13px; max-width: 330px; }
    .map-sheet .btn { min-height: 42px; padding: 0 15px; font-size: 13px; }

    .rating-row { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
    .rating-chip { border-radius: 9px; padding: 5px 9px; background: #f1ece4; font-size: 11px; font-weight: 800; }

    .maplibregl-ctrl-top-right { top: 58px; right: 4px; }
    .maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.12) !important; }
    .maplibregl-ctrl-attrib { font-size: 10px; }

    .section { padding: 72px 0; }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: end;
      margin-bottom: 28px;
    }

    .section h2 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(34px, 5vw, 54px);
      letter-spacing: -.05em;
      line-height: 1.02;
    }

    .section-intro { max-width: 520px; color: var(--muted); font-size: 16px; }

    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

    .step {
      background: rgba(255,253,249,.72);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      min-height: 230px;
    }

    .step-num {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      background: var(--ink);
      color: #fff;
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 34px;
    }

    .step h3 { font-size: 21px; margin: 0 0 9px; letter-spacing: -.025em; }
    .step p { margin: 0; color: var(--muted); line-height: 1.6; }

    .criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .criterion {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,253,249,.68);
    }
    .criterion-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 900; }
    .criterion strong { display: block; margin-bottom: 3px; }
    .criterion span { color: var(--muted); font-size: 13px; }

    .manifesto {
      background: var(--ink);
      color: white;
      border-radius: 22px;
      padding: clamp(34px, 6vw, 70px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .manifesto h2 { color: white; }
    .manifesto p { color: #c7c2b9; font-size: 18px; line-height: 1.65; margin: 0; }
    .manifesto strong { color: white; }

    .contact-strip {
      margin-top: 26px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .cta { text-align: center; padding: 88px 0 96px; }
    .cta-inner { background: var(--accent); color: var(--ink); border: 1px solid rgba(22,21,20,.28); border-radius: 22px; padding: 64px 24px; box-shadow: 0 14px 36px rgba(45,30,20,.10); }
    .cta h2 { margin: 0 auto; max-width: 740px; font-size: clamp(38px, 6vw, 62px); line-height: 1.03; letter-spacing: -.055em; }
    .cta p { max-width: 650px; margin: 18px auto 28px; color: rgba(22,21,20,.76); font-size: 18px; }
    .cta .btn { background: var(--ink); color: white; min-height: 52px; padding: 0 24px; }



    .contact-section {
      padding: 0 0 96px;
      scroll-margin-top: 92px;
    }

    .contact-card {
      position: relative;
      overflow: hidden;
      min-height: 300px;
      border: 1px solid rgba(22,21,20,.36);
      border-radius: 22px;
      background: linear-gradient(135deg, var(--accent), #ea704d);
      color: var(--ink);
      display: grid;
      grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
      align-items: center;
      gap: 34px;
      padding: clamp(34px, 6vw, 68px);
      box-shadow: 0 14px 36px rgba(45,30,20,.11);
    }

    .contact-question {
      font-size: clamp(150px, 22vw, 280px);
      line-height: .72;
      font-weight: 950;
      letter-spacing: -.08em;
      color: transparent;
      -webkit-text-stroke: 2px var(--ink);
      text-stroke: 2px var(--ink);
      user-select: none;
      justify-self: center;
      transform: translateY(-4px);
    }

    .contact-copy { position: relative; z-index: 1; }
    .contact-kicker {
      display: inline-flex;
      border: 1px solid rgba(22,21,20,.72);
      border-radius: 10px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .contact-copy h2 {
      margin: 16px 0 10px;
      font-size: clamp(38px, 6vw, 64px);
      line-height: 1;
      letter-spacing: -.055em;
    }
    .contact-copy p {
      margin: 0;
      max-width: 560px;
      font-size: 18px;
      font-weight: 650;
    }
    .contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
    .contact-choice {
      min-width: 132px;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid rgba(22,21,20,.72);
    }
    .contact-choice:hover { background: var(--ink); color: white; }


    /* REVIEW OF THE YEAR */
    .award-section { padding: 0 0 96px; }
    .award-shell {
      width: min(900px, 100%);
      margin: 0 auto;
      background: rgba(255,255,255,.5);
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .award-head { padding: 28px 30px 22px; border-bottom: 1px solid var(--line); }
    .award-head h2 { margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.02; letter-spacing: -.045em; }
    .award-head p { color: var(--muted); margin: 10px 0 0; max-width: 690px; }
    .award-list { display: grid; }
    .award-item {
      display: grid;
      grid-template-columns: 76px 1fr;
      min-height: 94px;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }
    .award-item:last-child { border-bottom: 0; }
    .award-votes {
      border-right: 1px solid var(--line);
      display: grid;
      grid-template-rows: 1fr 1fr;
      align-items: stretch;
      background: rgba(244,240,232,.78);
    }
    .award-vote {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-weight: 900;
      font-size: 13px;
      transition: 150ms ease;
    }
    .award-vote:first-child { border-bottom: 1px solid var(--line); }
    .award-vote .arrow { font-size: 18px; line-height: 1; }
    .award-vote:hover { background: rgba(23,23,23,.05); color: var(--ink); }
    .award-vote.active-up { color: var(--accent); background: rgba(228,90,50,.08); }
    .award-vote.active-down { color: #53657a; background: rgba(83,101,122,.08); }
    .award-location {
      appearance: none;
      width: 100%;
      border: 0;
      background: transparent;
      padding: 20px 24px;
      cursor: pointer;
      text-align: left;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .award-location:hover { background: rgba(228,90,50,.045); }
    .award-place { min-width: 0; }
    .award-place strong { display: block; font-size: 17px; letter-spacing: -.02em; }
    .award-place span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
    .award-open { color: var(--muted); font-size: 20px; flex: 0 0 auto; }
    .demo-pill {
      display: inline-flex !important;
      width: fit-content;
      margin: 6px 0 0 !important;
      padding: 4px 8px;
      border-radius: 999px;
      background: #f0ece3;
      color: #6a675f !important;
      font-size: 10px !important;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .award-empty, .award-loading { padding: 34px 30px; color: var(--muted); }
    .award-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
    .award-detail-chip { padding: 7px 10px; background: #f0ece3; border-radius: 999px; font-size: 12px; font-weight: 800; }
    .award-detail-review { font-size: 17px; line-height: 1.7; color: #302e2a; white-space: pre-wrap; }
    .award-demo-note { margin-top: 18px; padding: 13px 14px; border-radius: 14px; background: #fff3d8; color: #70541f; font-size: 12px; line-height: 1.5; }

    @media (max-width: 600px) {
      .award-section { padding-bottom: 64px; }
      .award-head { padding: 24px 20px 18px; }
      .award-item { grid-template-columns: 66px 1fr; }
      .award-location { padding: 18px 16px; }
    }

    footer { padding: 26px 0 38px; color: var(--muted); font-size: 13px; }
    .footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
    .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
    .footer-links a { font-weight: 800; color: var(--ink); }

    /* MODALS */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(20,20,20,.55);
      backdrop-filter: blur(8px);
    }
    .modal.open { display: grid; }

    .modal-card {
      width: min(620px, 100%);
      max-height: min(90vh, 760px);
      overflow: auto;
      background: var(--paper);
      border-radius: 26px;
      padding: 28px;
      box-shadow: 0 30px 90px rgba(0,0,0,.25);
      position: relative;
    }

    .modal-card h3 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.04em; }
    .modal-card > p { color: var(--muted); margin: 0 0 22px; }

    .close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      font-size: 20px;
    }

    .form-field { display: grid; gap: 7px; margin-bottom: 14px; }
    .form-field label { font-size: 13px; font-weight: 800; }
    .form-field input, .form-field textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: white;
      border-radius: 14px;
      min-height: 50px;
      padding: 12px 14px;
      outline: 0;
      resize: vertical;
    }
    .form-field textarea { min-height: 110px; }
    .form-field input:focus, .form-field textarea:focus { border-color: var(--ink); }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-field select {
      width: 100%;
      border: 1px solid var(--line);
      background: white;
      border-radius: 14px;
      min-height: 50px;
      padding: 10px 14px;
      outline: 0;
    }
    .form-field input[type="file"] { padding: 10px; background: #fff; }
    .form-help { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .verification-box { border: 1px dashed #b8b0a2; background: #faf7f0; border-radius: 16px; padding: 16px; margin: 16px 0; }
    .verification-box strong { display: block; margin-bottom: 5px; }
    .verification-box p { margin: 0; color: var(--muted); font-size: 13px; }
    .submit-status { min-height: 22px; margin-top: 12px; font-size: 13px; color: var(--muted); }
    .submit-status.success { color: var(--green); font-weight: 800; }
    .submit-status.error { color: #b42318; font-weight: 800; }

    /* TURNSTILE */
    .captcha-block {
      margin-top: 18px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.45);
    }
    .captcha-help { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
    #turnstile-container { min-height: 65px; }
    #reviewSubmitButton:disabled { opacity: .5; cursor: not-allowed; }

    /* MAP FULLSCREEN */
    .map-fullscreen-btn {
      position: absolute; top: 16px; right: 16px; z-index: 20;
      width: 44px; height: 44px; border: 1px solid rgba(222,216,204,.95);
      border-radius: 14px; background: rgba(255,253,248,.96); color: #1d1c19;
      font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer;
      box-shadow: 0 8px 30px rgba(0,0,0,.10); backdrop-filter: blur(12px);
    }
    .map-fullscreen-btn:hover { transform: scale(1.04); }
    .map-shell.is-fullscreen {
      position: fixed; inset: 0; width: 100vw; height: 100dvh !important;
      z-index: 99999; border: 0; border-radius: 0 !important; box-shadow: none;
    }
    body.map-fullscreen-open { overflow: hidden; }
    .review-list { display: grid; gap: 12px; margin-top: 10px; }
    .review-card { border: 1px solid var(--line); border-radius: 16px; padding: 15px; background: #fff; }
    .review-card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; }
    .review-card-score { font-weight: 900; color: var(--green); }
    .review-card p { margin: 0; color: #45413b; font-size: 13px; line-height: 1.55; }

    .review-card-head > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
    .lease-status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .02em; }
    .lease-status-confirmed { background: #e8f4ee; color: #176248; }
    .lease-status-unconfirmed { background: #f0ece3; color: #625c52; }
    .review-detail-grid { display: grid; gap: 12px; }
    .review-detail-meta { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #faf7f0; color: #5d584f; font-size: 12px; }
    .review-ratings { display: grid; gap: 7px; }
    .review-rating-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(222,216,204,.7); font-size: 12px; }
    .review-rating-row:last-child { border-bottom: 0; }
    .review-rating-label { color: #45413b; font-weight: 750; }
    .review-rating-score { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 800; }
    .review-stars { color: #d79213; letter-spacing: 1px; font-size: 13px; }
    .review-comment { padding-top: 2px; }
    .review-comment > strong { display: block; margin-bottom: 5px; font-size: 12px; }
    .review-comment p { margin: 0; color: #45413b; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
    .review-report { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    .review-report:hover { color: var(--ink); }
    .legal-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #45413b; }
    .legal-check input { margin-top: 3px; flex: 0 0 auto; }
    .report-legal-note { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fffaf1; font-size: 12px; color: #5b554b; line-height: 1.5; }
    .honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

    .notice { background: #f0ece3; border-radius: 14px; padding: 13px 14px; color: #5a554d; font-size: 13px; margin: 16px 0; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
    .result { display: none; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
    .result.show { display: block; }

    .search-status { margin-top: 12px; min-height: 20px; color: var(--muted); font-size: 13px; }

    @media (max-width: 1020px) {
      .hero-grid, .manifesto { grid-template-columns: 1fr; }
      .hero-grid { gap: 34px; }
      .hero { padding-top: 0; }
      .map-shell { height: 560px; }
      .steps, .criteria-grid { grid-template-columns: 1fr; }
      .section-head { display: block; }
      .section-intro { margin-top: 18px; }
    }

    @media (max-width: 760px) {
      .contact-card { grid-template-columns: 1fr; gap: 18px; }
      .contact-question { justify-self: start; font-size: 150px; }

      .nav-actions .nav-search { display: none; }
    }

    @media (max-width: 600px) {
      .wrap { width: min(100% - 24px, 1220px); }
      .nav { min-height: 64px; }
      .brand { font-size: 16px; }
      .brand-mark { width: 32px; height: 32px; }
      .nav-actions .btn-dark { min-height: 40px; padding: 0 13px; font-size: 12px; }
      .hero { padding-top: 0; }
      h1 { font-size: 48px; }
      .search-card { border-radius: 20px; display: grid; }
      .search-card .btn { width: 100%; min-height: 50px; }
      .map-shell { height: 540px; border-radius: 22px; }
      .map-topbar { top: 12px; left: 12px; right: 54px; }
      .map-demo-label { display: none; }
      .map-sheet { left: 10px; right: 10px; bottom: 10px; }
      .map-sheet-body { display: grid; }
      .map-sheet .btn { width: 100%; }
      .section { padding: 54px 0; }
      .manifesto { padding: 32px 24px; gap: 30px; }
      .cta { padding-top: 54px; }
      .cta-inner { padding: 46px 20px; }
      .form-row { grid-template-columns: 1fr; }
      .modal-actions { display: grid; }
      .modal-actions .btn { width: 100%; }
    }

.award-auth-turnstile {
  min-height: 1px;
  margin: 14px 0;
}
.eyebrow-modal { margin-bottom: 14px; }
.demo-pill-inline {
  display: inline-flex !important;
  margin-left: 6px !important;
}


/* Formal dispute review */
.review-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: start;
  margin-top: 12px;
}
.review-card-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  min-width: 0;
}
.review-dispute {
  min-height: 38px;
  align-self: start;
  justify-self: end;
}
.review-report {
  min-height: 0;
}
.review-dispute {
  border: 1px solid var(--border, #d9d9d9);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.review-dispute:hover,
.review-dispute:focus-visible {
  background: rgba(127,127,127,.08);
}
.review-edit,
.review-qa-ask {
  margin-top: 0;
}
@media (max-width: 720px) {
  .review-card-actions {
    grid-template-columns: 1fr;
  }
  .review-dispute {
    justify-self: start;
  }
}
.review-dispute-note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #d9d9d9);
  border-radius: 14px;
  background: rgba(127,127,127,.06);
}
.review-dispute-note strong {
  display: block;
  margin-bottom: 5px;
  font-size: .9rem;
}
.review-dispute-note p {
  margin: 0;
  white-space: pre-wrap;
}
.dispute-modal-card {
  width: min(780px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dispute-access-card {
  width: min(900px, calc(100vw - 32px));
}
.dispute-fee-notice {
  margin: 14px 0;
}
.modal-actions-left {
  justify-content: flex-start;
}
.btn-compact {
  min-height: 34px;
  padding: 7px 12px;
}
.dispute-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.dispute-summary-grid > div {
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  padding: 12px;
}
.dispute-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted, #666);
  font-size: .8rem;
}
.dispute-section {
  margin-top: 22px;
}
.dispute-section h4 {
  margin: 0 0 10px;
}
.dispute-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dispute-submission-card,
.dispute-evidence-item,
.dispute-determination {
  border: 1px solid var(--border, #ddd);
  border-radius: 14px;
  padding: 13px 14px;
  margin: 9px 0;
}
.dispute-submission-card p,
.dispute-determination p {
  white-space: pre-wrap;
}
.dispute-submission-head,
.dispute-evidence-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.dispute-evidence-item {
  flex-wrap: wrap;
}
.dispute-arguments {
  margin-top: 10px;
}
.dispute-determination {
  margin-top: 20px;
  background: rgba(127,127,127,.06);
}
.dispute-legal-limit {
  margin-top: 22px;
  padding: 13px 14px;
  border-left: 3px solid currentColor;
  color: var(--muted, #555);
  font-size: .88rem;
  line-height: 1.55;
}
@media (max-width: 680px) {
  .dispute-summary-grid { grid-template-columns: 1fr; }
  .dispute-submission-head { flex-direction: column; gap: 4px; }
}

/* Luminous Product — final visual system */
:root {
  --surface-base: #f4f7fb;
  --surface-soft: #eef2f7;
  --surface-paper: #f8fafc;
  --surface-raised: #ffffff;
  --surface-raised-strong: #ffffff;
  --surface-recessed: #e9eef5;
  --surface-dark: #11141a;
  --graphite: #11141a;
  --graphite-2: #252a33;
  --graphite-3: #424955;
  --text-muted: #6c7480;
  --hairline: rgba(17, 20, 26, .09);
  --hairline-strong: rgba(17, 20, 26, .15);
  --brand-coral: #ff5b3d;
  --brand-coral-deep: #e54528;
  --brand-coral-soft: #fff0eb;
  --status-green: #238764;
  --glass: rgba(255,255,255,.68);
  --glass-strong: rgba(255,255,255,.82);
  --edge-light: rgba(255,255,255,.92);
  --shadow-1: 0 1px 2px rgba(15,23,42,.045), 0 8px 22px rgba(15,23,42,.055);
  --shadow-2: 0 10px 30px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);
  --shadow-3: 0 24px 70px rgba(15,23,42,.13), 0 8px 24px rgba(15,23,42,.07);
  --shadow-coral: 0 10px 26px rgba(255,91,61,.22);
  --radius-control: 14px;
  --radius-panel: 24px;
  --radius-large: 30px;
  --header-h: 70px;

  /* Compatibility with the original component tokens. */
  --bg: var(--surface-base);
  --paper: var(--surface-raised);
  --ink: var(--graphite);
  --muted: var(--text-muted);
  --line: var(--hairline);
  --line-strong: var(--hairline-strong);
  --accent: var(--brand-coral);
  --accent-dark: var(--brand-coral-deep);
  --accent-soft: var(--brand-coral-soft);
  --green: var(--status-green);
  --shadow: var(--shadow-1);
  --radius: 18px;
}

html { background: var(--surface-base); }
body {
  margin: 0;
  color: var(--graphite);
  letter-spacing: -.01em;
  background:
    radial-gradient(900px 520px at 86% 2%, rgba(122, 162, 255, .11), transparent 62%),
    radial-gradient(700px 460px at 12% 10%, rgba(255, 91, 61, .07), transparent 60%),
    linear-gradient(180deg, #f8faff 0%, var(--surface-base) 34%, #f6f8fb 100%);
}
body::before { content: none; }

.wrap { width: min(1240px, calc(100% - 48px)); }

header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  background: rgba(248,250,253,.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 1px 0 rgba(17,20,26,.07), 0 8px 30px rgba(15,23,42,.045);
}
header::after { content: none; }
.nav { min-height: var(--header-h); gap: 24px; }
.brand {
  gap: 11px;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.035em;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(145deg, #252a34 0%, #0f1217 72%);
  border: 1px solid rgba(0,0,0,.72);
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px rgba(15,23,42,.18);
}
.nav-actions { gap: 8px; }

.btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-weight: 720;
  letter-spacing: -.018em;
  transition: transform 120ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-light {
  color: var(--graphite);
  background: rgba(255,255,255,.60);
  border-color: rgba(17,20,26,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 1px 2px rgba(15,23,42,.03);
}
.btn-light:hover {
  background: rgba(255,255,255,.92);
  border-color: rgba(17,20,26,.13);
  box-shadow: var(--shadow-1), inset 0 1px 0 #fff;
}
.btn-dark {
  color: #fff;
  background: #13171e;
  border-color: #13171e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 7px 18px rgba(15,23,42,.18);
}
.btn-dark:hover { background: #1e232c; border-color: #1e232c; }
.btn-accent {
  color: #fff;
  background: linear-gradient(180deg, #ff674b 0%, var(--brand-coral) 54%, #f45134 100%);
  border-color: rgba(205,61,34,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-coral);
}
.btn-accent:hover {
  background: linear-gradient(180deg, #ff7258 0%, #ff6042 52%, #e94a2f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 12px 30px rgba(255,91,61,.26);
}

.hero {
  position: relative;
  padding: 0 0 96px;
  border-bottom: 1px solid rgba(17,20,26,.055);
  overflow: visible;
}
.hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0,.94fr) minmax(500px,1.06fr);
  gap: 56px;
  align-items: start;
}
.hero-grid > :first-child {
  padding-top: clamp(54px, 7vh, 82px);
  padding-bottom: 24px;
}
.eyebrow {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 9px;
  margin: 0 0 30px;
  padding: 9px 12px;
  border: 1px solid rgba(17,20,26,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  color: #5f6875;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 4px 14px rgba(15,23,42,.035);
  font-family: inherit;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: -.005em;
  text-transform: none;
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-green);
  box-shadow: 0 0 0 4px rgba(35,135,100,.10);
}
h1 {
  max-width: 720px;
  font-size: clamp(52px, 6vw, 80px);
  line-height: .98;
  letter-spacing: -.058em;
  font-weight: 790;
}
h1 em { color: var(--brand-coral); }
.hero-copy {
  max-width: 620px;
  margin-top: 26px;
  color: #66707d;
  font-size: clamp(18px,1.65vw,20px);
  line-height: 1.58;
  font-weight: 440;
}
.search-card {
  margin-top: 32px;
  padding: 7px;
  gap: 8px;
  max-width: 760px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 16px 42px rgba(15,23,42,.10), 0 2px 7px rgba(15,23,42,.05), inset 0 0 0 1px rgba(17,20,26,.055);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.search-card:focus-within {
  border-color: rgba(255,91,61,.33);
  box-shadow: 0 18px 46px rgba(15,23,42,.11), 0 0 0 4px rgba(255,91,61,.08), inset 0 0 0 1px rgba(255,91,61,.12);
}
.search-card input {
  min-height: 56px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(247,249,252,.76);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.055);
}
.search-card input::placeholder { color: #8b94a1; }
.search-card input:focus { box-shadow: inset 0 1px 2px rgba(15,23,42,.04); }
.search-card .btn { min-height: 56px; padding-inline: 20px; }
.microcopy {
  margin: 13px 0 0 2px;
  color: #7a8390;
  font-size: 12px;
  line-height: 1.55;
}

.map-column { position: relative; min-width: 0; }
.map-shell {
  position: relative;
  isolation: isolate;
  height: clamp(540px, calc(100svh - 104px), 660px);
  border-radius: var(--radius-large);
  overflow: hidden;
  background: var(--surface-recessed);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(17,20,26,.08);
}
.map-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(15,23,42,.07);
}
.maplibregl-canvas { filter: saturate(.84) contrast(.97) brightness(1.035); }
.map-topbar { top: 18px; left: 18px; right: 66px; }
.map-hint,
.map-demo-label,
.map-fullscreen-btn,
.maplibregl-ctrl-group {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  background: var(--glass) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.map-hint,
.map-demo-label {
  padding: 10px 12px;
  color: #4f5966;
  font-size: 12px;
  font-weight: 700;
}
.map-hint { max-width: 270px; }
.map-demo-label,
.map-sheet-kicker { font-family: inherit; letter-spacing: -.005em; }
.map-hint span { color: var(--brand-coral); }
.map-fullscreen-btn { width: 44px; height: 44px; font-weight: 760; color: var(--graphite); }
.map-fullscreen-btn:hover { transform: none; background: rgba(255,255,255,.90) !important; }
.map-caption {
  margin: 10px 5px 0;
  color: #7c8591;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0;
}
.map-sheet {
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 22px 56px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.map-sheet-kicker { color: var(--status-green); font-weight: 780; text-transform: none; font-size: 11px; }
.map-sheet h3 { font-size: 21px; font-weight: 760; }
.map-sheet-address { color: #6e7783; }
.sheet-close {
  border-radius: 12px;
  background: rgba(255,255,255,.70);
  border-color: rgba(17,20,26,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.rating-chip {
  border-radius: 10px;
  background: rgba(245,247,250,.82);
  border: 1px solid rgba(17,20,26,.06);
  color: #3f4854;
}
.map-sheet-body { border-top-color: rgba(17,20,26,.08); }
.map-sheet-copy { color: #4f5966; }

.section { padding: 88px 0; }
.section-head {
  align-items: end;
  margin-bottom: 30px;
  padding-top: 0;
  border-top: 0;
}
.section h2 {
  font-size: clamp(36px,4.5vw,56px);
  line-height: 1.04;
  letter-spacing: -.052em;
  font-weight: 760;
}
.section-intro { color: #707986; font-size: 15px; line-height: 1.65; }

.manifesto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-large);
  padding: clamp(48px,6vw,76px);
  background:
    radial-gradient(480px 300px at 88% 10%, rgba(255,91,61,.20), transparent 66%),
    linear-gradient(145deg, #1a1f28 0%, #101319 74%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 68px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.manifesto h2,
.manifesto p { position: relative; z-index: 1; }
.manifesto h2 { font-weight: 760; }
.manifesto p { color: #c9d0d9; font-size: 17px; line-height: 1.68; }
.manifesto strong { color: #fff; }

.steps,
.criteria-grid {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.steps { gap: 16px; }
.step {
  min-height: 238px;
  padding: 28px;
  border: 1px solid rgba(17,20,26,.075);
  border-radius: var(--radius-panel);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.step + .step { border-left: 1px solid rgba(17,20,26,.075); }
.step:hover {
  transform: translateY(-2px);
  border-color: rgba(17,20,26,.11);
  box-shadow: var(--shadow-2), inset 0 1px 0 #fff;
  background: rgba(255,255,255,.82);
}
.step-num {
  width: 40px;
  height: 40px;
  margin: 0 0 36px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--brand-coral-soft);
  color: var(--brand-coral-deep);
  font-family: inherit;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(255,91,61,.12);
}
.step h3 { font-size: 21px; font-weight: 750; }
.step p { color: #6b7480; font-size: 14px; line-height: 1.62; }

.criteria-grid { gap: 12px; }
.criterion {
  padding: 21px;
  border: 1px solid rgba(17,20,26,.07);
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.90);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 130ms ease;
}
.criterion:nth-child(n+4),
.criterion:nth-child(3n+2),
.criterion:nth-child(3n+3) { border-top: 1px solid rgba(17,20,26,.07); border-left: 1px solid rgba(17,20,26,.07); }
.criterion:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.80);
  border-color: rgba(17,20,26,.11);
  box-shadow: var(--shadow-2), inset 0 1px 0 #fff;
}
.criterion-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border: 1px solid rgba(255,91,61,.12);
  border-radius: 12px;
  background: var(--brand-coral-soft);
  color: var(--brand-coral-deep);
  font-size: 16px;
  font-weight: 800;
}
.criterion strong { font-weight: 750; }
.criterion span { color: #707986; line-height: 1.58; }

.cta { padding: 76px 0 94px; text-align: center; }
.cta-inner {
  position: relative;
  overflow: hidden;
  padding: clamp(52px,6vw,76px) 28px;
  border-radius: var(--radius-large);
  color: #fff;
  background:
    radial-gradient(520px 340px at 82% -20%, rgba(255,91,61,.30), transparent 66%),
    linear-gradient(145deg, #1a1f28, #101318 76%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 68px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.cta h2 { max-width: 780px; font-weight: 760; }
.cta p { color: #c6ced8; }
.cta .btn {
  min-height: 50px;
  background: var(--brand-coral);
  color: #fff;
  border-color: rgba(214,63,35,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), var(--shadow-coral);
}

.contact-section { padding: 0 0 96px; }
.contact-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: clamp(42px,5vw,64px);
  gap: 44px;
  border-radius: var(--radius-large);
  background:
    radial-gradient(360px 260px at 8% 20%, rgba(255,91,61,.12), transparent 72%),
    rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(17,20,26,.06), inset 0 1px 0 #fff;
}
.contact-question {
  color: #ffd6cb;
  opacity: .92;
  font-size: clamp(132px,18vw,230px);
  font-weight: 840;
  letter-spacing: -.08em;
}
.contact-kicker {
  padding: 7px 10px;
  width: fit-content;
  border: 1px solid rgba(255,91,61,.12);
  border-radius: 999px;
  background: var(--brand-coral-soft);
  color: var(--brand-coral-deep);
  font-family: inherit;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: -.005em;
  text-transform: none;
}
.contact-copy h2 { font-weight: 760; }
.contact-copy p { color: #6a7380; font-weight: 440; }
.contact-choice {
  min-width: 124px;
  background: rgba(255,255,255,.82);
  border-color: rgba(17,20,26,.09);
  box-shadow: var(--shadow-1), inset 0 1px 0 #fff;
}
.contact-choice:hover { background: #151922; border-color: #151922; color: #fff; }

.award-shell {
  width: min(980px,100%);
  border-radius: var(--radius-large);
  overflow: hidden;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(17,20,26,.055), inset 0 1px 0 #fff;
}
.award-head { padding: 30px 30px 24px; background: rgba(248,250,253,.62); border-bottom: 1px solid var(--hairline); }
.award-head h2 { font-weight: 760; }
.award-item { min-height: 92px; background: rgba(255,255,255,.36); }
.award-item:hover { background: rgba(255,255,255,.72); }
.award-item + .award-item { border-top-color: var(--hairline); }
.award-votes { background: #f1f4f8; box-shadow: inset 0 1px 2px rgba(15,23,42,.055); }
.award-vote { font-weight: 740; }
.demo-pill,
.award-detail-chip,
.lease-status {
  border-radius: 999px;
  font-family: inherit;
  font-weight: 720;
}

.review-card {
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,20,26,.075);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.92);
}
.review-card:hover { border-color: rgba(17,20,26,.12); box-shadow: var(--shadow-2), inset 0 1px 0 #fff; }
.review-detail-meta,
.review-dispute,
.verification-box,
.captcha-block,
.notice,
.result,
.report-legal-note,
.dispute-summary-grid > div,
.dispute-submission-card,
.dispute-evidence-item,
.dispute-determination {
  border-radius: 16px;
  background: #f7f9fc;
  border-color: rgba(17,20,26,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}

.modal {
  background: rgba(15,18,24,.48);
  backdrop-filter: blur(10px) saturate(105%);
  -webkit-backdrop-filter: blur(10px) saturate(105%);
}
.modal-card {
  border-radius: var(--radius-panel);
  background: #fff;
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(17,20,26,.06), inset 0 1px 0 #fff;
}
.close {
  border-radius: 12px;
  background: #f5f7fa;
  border-color: rgba(17,20,26,.08);
}
.form-field label { font-weight: 700; }
.form-field input,
.form-field textarea,
.form-field select {
  border-radius: 14px;
  background: #f8fafc;
  border-color: rgba(17,20,26,.10);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.045);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: rgba(255,91,61,.48);
  box-shadow: 0 0 0 4px rgba(255,91,61,.08), inset 0 1px 2px rgba(15,23,42,.035);
}

footer {
  padding: 32px 0 44px;
  border-top: 1px solid rgba(17,20,26,.07);
  background: rgba(247,249,252,.58);
}
.footer-row { padding-top: 0; }
.footer-links a { font-weight: 650; color: #626c79; }
.footer-links a:hover { color: var(--graphite); }

@media (max-width: 1020px) {
  .hero { padding: 0 0 82px; }
  .hero-grid { gap: 38px; }
  .hero-grid > :first-child { padding-top: 44px; }
  .map-shell { height: min(570px, calc(100svh - 96px)); }
  .step + .step { border-left: 1px solid rgba(17,20,26,.075); }
  .criterion:nth-child(3n+2),
  .criterion:nth-child(3n+3) { border-left: 1px solid rgba(17,20,26,.07); }
  .criterion { border-bottom: 1px solid rgba(17,20,26,.07); }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1240px); }
  .contact-card { grid-template-columns: 1fr; gap: 18px; }
  .contact-question { justify-self: start; font-size: 128px; }
}

@media (max-width: 600px) {
  :root { --header-h: 60px; --radius-panel: 20px; --radius-large: 24px; }
  .wrap { width: min(100% - 22px, 1240px); }
  .nav { min-height: var(--header-h); }
  .brand { font-size: 15px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 11px; }
  .nav-actions .btn-dark { min-height: 40px; padding: 0 13px; font-size: 12px; }
  .hero { padding: 0 0 68px; }
  .hero-grid > :first-child { padding-top: 36px; }
  h1 { font-size: 48px; }
  .eyebrow { margin-bottom: 24px; }
  .search-card { display: grid; border-radius: 20px; padding: 6px; }
  .search-card .btn { width: 100%; min-height: 50px; }
  .map-shell { height: min(540px, calc(100svh - 80px)); border-radius: 24px; }
  .map-topbar { top: 12px; left: 12px; right: 56px; }
  .map-sheet { left: 10px; right: 10px; bottom: 10px; border-radius: 18px; }
  .section { padding: 66px 0; }
  .step,
  .criterion,
  .manifesto,
  .cta-inner,
  .contact-card,
  .award-shell,
  .modal-card { border-radius: 20px; }
}

/* === 2026 material pass — validated adjustments === */
:root {
  --bg: #eeede8;
  --paper: #f9f8f4;
  --paper-2: #f3f1eb;
  --ink: #111216;
  --muted: #636b77;
  --muted-2: #7b818a;
  --hero-shell: #d6d3cd;
  --hero-shell-deep: #ccc9c1;
  --glass-1: rgba(255,255,255,.34);
  --glass-2: rgba(255,255,255,.62);
  --glass-line: rgba(255,255,255,.72);
  --glass-shadow: 0 18px 45px rgba(22,28,38,.12), 0 4px 12px rgba(22,28,38,.06);
  --panel-shadow: 0 30px 70px rgba(20,26,36,.12), 0 8px 22px rgba(20,26,36,.06);
  --soft-shadow: 0 16px 34px rgba(20,26,36,.08), 0 3px 8px rgba(20,26,36,.05);
  --accent: #ff5a3a;
  --accent-2: #ff7a50;
  --accent-deep: #ef4b2b;
  --green: #1d9a6c;
  --radius-xl: 40px;
  --radius-lg: 30px;
  --radius-md: 24px;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(1200px 520px at 12% -8%, rgba(255,255,255,.45), transparent 58%),
    linear-gradient(180deg, #f2f1ec 0%, var(--bg) 22%, #ecebe6 100%);
  color: var(--ink);
}

.wrap { width: min(1240px, calc(100% - 40px)); }

header {
  top: 0;
  padding: 14px 0 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav {
  min-height: 72px;
  padding: 0 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.42));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(95,105,118,.12);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}

.brand { font-size: 18px; font-weight: 800; }
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1b1d22, #0f1014);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.16);
  font-size: 23px;
}

.btn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 18px;
  font-weight: 760;
  transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-light {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,245,240,.92));
  border: 1px solid rgba(17,18,22,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 18px rgba(20,26,36,.05);
  color: #22252c;
}
.btn-dark {
  background: linear-gradient(180deg, #16181d 0%, #0f1116 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 24px rgba(15,17,22,.18);
  color: #fff;
}
.btn-accent {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 38%, var(--accent-deep) 100%);
  border: 1px solid rgba(166,39,13,.28);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 18px 28px rgba(255,90,58,.24), 0 6px 10px rgba(180,52,23,.18);
}
.btn-accent:hover { background: linear-gradient(180deg, #ff8660 0%, #ff6442 40%, #f44a28 100%); }

.hero {
  padding: 18px 0 22px;
}

.hero-grid {
  position: relative;
  gap: 28px;
  align-items: stretch;
  padding: 22px 22px 18px;
  border-radius: 42px;
  background: linear-gradient(180deg, var(--hero-shell) 0%, var(--hero-shell-deep) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.85), var(--panel-shadow);
  overflow: hidden;
}
.hero-grid::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 41px;
  background:
    radial-gradient(700px 240px at 18% 0%, rgba(255,255,255,.38), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 32%, rgba(255,255,255,.04) 100%);
  pointer-events: none;
}
.hero-grid > :first-child,
.map-column { position: relative; z-index: 1; }
.hero-grid > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 26px 12px 18px 10px;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 18px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .01em;
  border-radius: 999px;
  color: #59616d;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px rgba(22,28,38,.05);
}
.eyebrow .dot {
  width: 9px;
  height: 9px;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(29,154,108,.10);
}

h1 {
  max-width: 680px;
  font-size: clamp(54px, 6.2vw, 96px);
  line-height: .93;
  letter-spacing: -.072em;
  font-weight: 860;
}
h1 em { color: var(--accent); }

.hero-copy {
  max-width: 640px;
  margin-top: 28px;
  color: #5b6472;
  font-size: clamp(18px, 1.65vw, 20px);
  line-height: 1.58;
}

.search-card {
  position: relative;
  margin-top: 28px;
  max-width: 760px;
  padding: 10px;
  gap: 12px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.28));
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(89,96,108,.08);
  backdrop-filter: blur(26px) saturate(175%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
}
.search-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 29px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 48%, rgba(255,255,255,.10) 100%);
  pointer-events: none;
}
.search-card input {
  min-height: 60px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,242,237,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(98,106,120,.05), 0 4px 12px rgba(17,18,22,.04);
  color: #1b1d22;
}
.search-card input::placeholder { color: #868d97; }
.search-card .btn {
  min-height: 60px;
  padding-inline: 26px;
  border-radius: 22px;
  position: relative;
  z-index: 1;
}
.search-card .btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 46%, rgba(255,255,255,.06));
  pointer-events: none;
}

.microcopy {
  margin: 12px 0 0 8px;
  color: #606873;
  font-size: 12.5px;
  line-height: 1.55;
}

.map-column {
  min-width: 0;
  padding-top: 58px;
}

.map-shell {
  position: relative;
  height: 575px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 38px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.26));
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(92,99,110,.08);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
}
.map-shell::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 37px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 40%, rgba(255,255,255,.06) 100%);
  pointer-events: none;
  z-index: 1;
}
#map {
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  overflow: hidden;
}
.maplibregl-canvas-container,
.maplibregl-canvas { border-radius: 28px; }

.map-topbar {
  top: 28px;
  left: 28px;
  right: 88px;
  gap: 14px;
  z-index: 4;
}
.map-hint,
.map-demo-label,
.map-fullscreen-btn,
.maplibregl-ctrl-group,
.map-sheet {
  border: 1px solid rgba(255,255,255,.74) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.30)) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(91,99,112,.07) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
}
.map-hint,
.map-demo-label {
  padding: 12px 16px;
  border-radius: 20px !important;
  font-size: 12px;
  font-weight: 760;
  color: #59606b;
}
.map-hint { max-width: 304px; }
.map-demo-label { color: #525b67; }
.map-fullscreen-btn {
  top: 28px;
  right: 28px;
  width: 50px;
  height: 50px;
  border-radius: 18px !important;
  color: #171a1f;
}
.maplibregl-ctrl-top-right { top: 86px; right: 28px; }
.maplibregl-ctrl-group { border-radius: 18px !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 46px; height: 46px; }
.map-sheet {
  left: 28px;
  right: 28px;
  bottom: 28px;
  border-radius: 26px !important;
}
.map-caption {
  margin: 8px 4px 0;
  padding-left: 4px;
  color: #606873;
  font-size: 12px;
}

.section {
  padding: 22px 0;
}
.section + .section,
.cta,
.contact-section,
.award-section { margin-top: 0; }
.section-head {
  margin-bottom: 16px;
  gap: 18px;
}
.section h2 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.056em;
}
.section-intro {
  color: #606873;
  font-size: 15px;
  line-height: 1.62;
}

.manifesto {
  position: relative;
  padding: 36px 42px 36px 52px;
  border-radius: 34px;
  background: linear-gradient(145deg, #171a1f 0%, #0e1116 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 26px 60px rgba(13,18,26,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.manifesto::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  bottom: 20px;
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-deep));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(255,90,58,.24);
}
.manifesto::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,58,.20), transparent 66%);
  pointer-events: none;
}
.manifesto h2 { position: relative; z-index: 1; margin-bottom: 10px; }
.manifesto p { position: relative; z-index: 1; color: #d0d7e0; font-size: 17px; }
.manifesto strong { color: #fff; }

#fonctionnement .wrap {
  padding: 18px 22px 22px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 18px 34px rgba(17,18,22,.05);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(209,205,196,.52), rgba(222,219,212,.28));
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(95,103,116,.05);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.step {
  min-height: 220px;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.40));
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.94);
  scroll-snap-align: start;
}
.step + .step { border-left: 1px solid rgba(255,255,255,.76); }
.step-num {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,242,236,.92));
  border: 1px solid rgba(255,255,255,.85);
  color: var(--accent-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 18px rgba(17,18,22,.05);
}
.step h3,
.criterion strong { color: #161a21; }
.step p { color: #58606a; }

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.criterion {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.76);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(250,249,245,.48));
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.95);
}
.criterion:nth-child(n+4),
.criterion:nth-child(3n+2),
.criterion:nth-child(3n+3) {
  border-top: 1px solid rgba(255,255,255,.76);
  border-left: 1px solid rgba(255,255,255,.76);
}
.criterion-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.84);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,241,235,.92));
  color: #12151c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 16px rgba(17,18,22,.05);
}
.criterion:nth-child(1) .criterion-icon { color: #ff6237; }
.criterion:nth-child(2) .criterion-icon { color: #447dff; }
.criterion:nth-child(3) .criterion-icon { color: #26a96d; }
.criterion:nth-child(4) .criterion-icon { color: #7c60ff; }
.criterion:nth-child(5) .criterion-icon { color: #dd6c10; }
.criterion:nth-child(6) .criterion-icon { color: #0d99c0; }
.criterion span { color: #525b67; }

.cta {
  padding: 24px 0 20px;
}
.cta-inner {
  padding: 42px 28px 48px;
  border-radius: 34px;
  background: linear-gradient(180deg, #ff6a45 0%, #ff5a3a 55%, #ef4c2a 100%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 26px 54px rgba(255,90,58,.22), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(127,27,9,.18);
}
.cta h2 {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(17,18,22,.72);
  text-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.cta p { color: rgba(17,18,22,.76); max-width: 740px; }
.cta .btn {
  min-height: 52px;
  background: linear-gradient(180deg, #171a1f, #0f1116);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 22px rgba(17,18,22,.14);
}

.contact-section { padding: 20px 0 20px; }
.contact-card {
  min-height: 280px;
  grid-template-columns: minmax(160px, 220px) 1fr;
  align-items: center;
  padding: 34px 36px;
  gap: 28px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.24));
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(95,103,116,.06);
}
.contact-question {
  font-size: clamp(148px, 18vw, 210px);
  color: rgba(255,90,58,.18);
  line-height: .9;
}
.contact-kicker {
  background: rgba(255,255,255,.64);
  border-color: rgba(255,255,255,.76);
  color: #505865;
}
.contact-copy p { color: #59626f; }
.contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  max-width: 560px;
}
.contact-choice {
  position: relative;
  min-height: 110px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  justify-content: flex-start;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,241,236,.82));
  border: 1px solid rgba(255,255,255,.84);
  color: #151920;
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.98);
  font-size: 18px;
}
.contact-choice::before {
  position: absolute;
  top: 16px;
  left: 18px;
  font-size: 28px;
  line-height: 1;
}
.contact-actions .contact-choice:first-child::before { content: "✉"; }
.contact-actions .contact-choice:last-child::before { content: "◉"; color: #f14f31; }
.contact-choice:hover { transform: translateY(-2px); }

.award-section { padding: 18px 0 22px; }
.award-shell {
  width: min(100%, 1020px);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(251,248,242,.72));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(95,103,116,.06);
}
.award-head {
  padding: 28px 30px 22px;
  background: linear-gradient(180deg, rgba(255,116,82,.18), rgba(255,255,255,.24));
  border-bottom: 1px solid rgba(255,255,255,.74);
}
.award-head h2 { color: #171a1f; }
.award-head p { color: #5c6470; }
.award-item {
  min-height: 94px;
  background: rgba(255,255,255,.34);
}
.award-item:hover { background: rgba(255,255,255,.62); }
.award-votes {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,241,236,.92));
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}
.demo-pill,
.award-detail-chip,
.lease-status {
  background: rgba(255,255,255,.70);
}

footer {
  padding: 36px 0 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  border-top: 1px solid rgba(255,255,255,.72);
}
.footer-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px 40px;
  align-items: start;
}
.footer-row > div:first-child {
  color: #3f4651;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 560;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 18px rgba(17,18,22,.04);
  color: #242b34;
  font-weight: 700;
}
.footer-links a:hover { color: #111216; }

@media (max-width: 1020px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px 18px 16px;
  }
  .hero-grid > :first-child { padding: 18px 6px 10px; }
  .map-column { padding-top: 0; }
  .map-shell { height: 540px; }
  .section { padding: 18px 0; }
  #fonctionnement .wrap { padding: 18px; }
  .steps,
  .criteria-grid { grid-template-columns: 1fr; }
  .footer-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 24px, 1240px); }
  .nav-actions .nav-search { display: none; }
  .nav { min-height: 66px; }
  h1 { font-size: 48px; }
  .eyebrow { margin-bottom: 14px; }
  .search-card {
    display: grid;
    grid-template-columns: 1fr;
  }
  .search-card input,
  .search-card .btn { width: 100%; }
  .map-shell { height: 500px; border-radius: 30px; }
  #map { inset: 10px; border-radius: 22px; }
  .map-topbar { top: 18px; left: 18px; right: 72px; }
  .map-fullscreen-btn { top: 18px; right: 18px; }
  .map-sheet { left: 18px; right: 18px; bottom: 18px; }
  .manifesto,
  #fonctionnement .wrap,
  .cta-inner,
  .contact-card,
  .award-shell { border-radius: 26px; }
  .contact-card { grid-template-columns: 1fr; padding: 28px; }
  .contact-question { justify-self: start; font-size: 120px; }
  .contact-actions,
  .footer-links { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  header { padding-top: 10px; }
  .nav { padding: 0 12px; border-radius: 22px; }
  .brand { font-size: 15px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 14px; }
  .btn { min-height: 42px; padding-inline: 16px; font-size: 13px; }
  .hero { padding: 14px 0 18px; }
  .hero-grid { border-radius: 28px; }
  .hero-grid::before { border-radius: 27px; }
  h1 { font-size: 44px; }
  .hero-copy { font-size: 17px; }
  .search-card,
  .map-shell,
  .manifesto,
  #fonctionnement .wrap,
  .step,
  .criterion,
  .cta-inner,
  .contact-card,
  .award-shell,
  .footer-links a { border-radius: 22px; }
  .map-hint { max-width: 210px; }
  .section h2 { font-size: 34px; }
  .cta h2 { -webkit-text-stroke: 1.1px rgba(17,18,22,.68); }
}

/* === 2026 motion + usability pass — safe CSS-only version === */

/* Decorative motion stays in CSS so app.js remains untouched. */
.hero-grid::before { z-index: 0; }
.hero-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: .42;
  background-image:
    radial-gradient(circle at center, rgba(255,90,58,.44) 0 1.6px, transparent 1.9px),
    radial-gradient(circle at center, rgba(67,76,88,.32) 0 1.2px, transparent 1.5px),
    linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,.20) 18.2% 18.45%, transparent 18.7% 100%),
    linear-gradient(72deg, transparent 0 61%, rgba(72,80,92,.08) 61.15% 61.35%, transparent 61.55% 100%);
  background-size: 180px 120px, 240px 160px, 100% 100%, 100% 100%;
  background-position: 0 0, 72px 40px, 0 0, 0 0;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.16) 48%, rgba(0,0,0,.52));
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.16) 48%, rgba(0,0,0,.52));
  animation: jtbs-route-drift 28s linear infinite;
}
.hero-grid > :first-child,
.hero-grid > .map-column { z-index: 2; }
@keyframes jtbs-route-drift {
  from { background-position: 0 0, 72px 40px, 0 0, 0 0; }
  to { background-position: 180px 120px, -168px 200px, 0 0, 0 0; }
}

/* Fullscreen: keep the original JS/DOM intact and fix stacking entirely in CSS. */
body.map-fullscreen-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.map-fullscreen-open header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.map-fullscreen-open .hero {
  position: relative;
  z-index: 2147482000;
}
body.map-fullscreen-open .hero-grid {
  z-index: 2147482000;
  overflow: visible;
}
.map-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh !important;
  z-index: 2147483000;
  margin: 0;
  border: 0;
  border-radius: 0 !important;
  background: #e9ecef;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.map-shell.is-fullscreen::before { content: none; }
.map-shell.is-fullscreen #map {
  inset: 0;
  border-radius: 0;
}
.map-shell.is-fullscreen .maplibregl-canvas-container,
.map-shell.is-fullscreen .maplibregl-canvas { border-radius: 0; }
.map-shell.is-fullscreen .map-fullscreen-btn {
  z-index: 2147483640;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
}
.map-shell.is-fullscreen .map-topbar {
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  right: 88px;
}
.map-shell.is-fullscreen .maplibregl-ctrl-top-right {
  top: calc(max(18px, env(safe-area-inset-top)) + 60px);
  right: max(18px, env(safe-area-inset-right));
}
.map-shell.is-fullscreen .map-sheet {
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}

/* Manifesto: no orange rail on the left; keep the small signature on the opposite side. */
.manifesto::before { content: none; }
.manifesto::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 28px;
  width: 72px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7a50, #ff5a3a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 7px 18px rgba(255,90,58,.18);
  opacity: .92;
}

/* Product-explanation heading gets more breathing room and the intro stays legible. */
#fonctionnement .section-head {
  align-items: center;
  gap: 34px;
  margin-bottom: 22px;
  padding: 18px 10px 8px;
}
#fonctionnement .section-head h2 {
  max-width: 650px;
  padding-right: 8px;
}
#fonctionnement .section-intro {
  max-width: 520px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 18px;
  background: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
  color: #4e5764;
  font-weight: 560;
}

/* Criteria: darker copy, clean icons, no black icon tiles. */
.criteria-grid .criterion strong { color: #151920; }
.criteria-grid .criterion span { color: #4c5561; font-size: 13.5px; }
.criteria-grid .criterion-icon {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,243,238,.88));
  border-color: rgba(255,255,255,.86);
}

/* CTA outline remains legible while preserving the orange through the glyphs. */
.cta h2 {
  -webkit-text-stroke: 2.35px rgba(17,18,22,.78);
  paint-order: stroke fill;
  letter-spacing: -.055em;
}

/* Contact: no emoji pseudo-icons; text itself is centered and visible. */
.contact-choice::before { content: none !important; }
.contact-actions { max-width: 620px; }
.contact-choice {
  min-height: 72px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 17px;
  letter-spacing: -.02em;
}

/* Mobile navigation and horizontal product-flow usability. */
@media (max-width: 760px) {
  .nav-actions > a.btn-light { display: none; }
  .nav-actions { flex: 0 0 auto; }
  .nav-actions .btn-dark {
    max-width: 132px;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
  }

  #fonctionnement .section-head {
    display: grid;
    gap: 14px;
    padding: 14px 4px 6px;
  }
  #fonctionnement .section-intro {
    margin-top: 0;
    max-width: none;
  }
  #fonctionnement .steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 84vw);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 30px 10px 10px;
  }
  #fonctionnement .steps::-webkit-scrollbar { display: none; }
  #fonctionnement .step { scroll-snap-align: start; }

  .contact-card { grid-template-columns: 1fr; }
  .contact-question { display: none; }
  .contact-copy { text-align: center; }
  .contact-kicker { margin-inline: auto; }
  .contact-actions { margin-inline: auto; width: 100%; }
}

@media (max-width: 430px) {
  .nav { gap: 8px; padding-inline: 10px; }
  .brand { min-width: 0; }
  .brand > span:last-child { display: none; }
  .brand-mark { flex: 0 0 auto; }
  .nav-actions .btn-dark {
    max-width: none;
    min-height: 40px;
    padding-inline: 12px;
    font-size: 12px;
  }
  .map-shell.is-fullscreen .map-hint { display: none; }
  .map-shell.is-fullscreen .map-topbar { right: 74px; }
  .cta h2 { -webkit-text-stroke: 1.8px rgba(17,18,22,.78); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid::after { animation: none; opacity: .24; }
}

/* === UI pass 6 — background route texture, editorial hero, tighter map glass === */

/* The route language lives on the page background only: a thin PCB / transit-map
   texture with rounded right-angle turns and occasional branches. Main surfaces
   always paint above it, so the route never crosses content. */
main {
  position: relative;
  isolation: isolate;
}
main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 330'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='1' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='4 9'%3E%3Cpath d='M-30 70H126Q138 70 138 82V158Q138 170 150 170H330Q342 170 342 182V286Q342 298 354 298H590'/%3E%3Cpath d='M138 118H236Q248 118 248 106V26'/%3E%3Cpath d='M248 170V232Q248 244 236 244H98Q86 244 86 256V350'/%3E%3Cpath d='M342 226H452Q464 226 464 214V118Q464 106 476 106H590'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 520'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='1' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='3.5 10'%3E%3Cpath d='M74-28V118Q74 130 86 130H214Q226 130 226 142V332Q226 344 238 344H458'/%3E%3Cpath d='M226 218H118Q106 218 106 230V548'/%3E%3Cpath d='M328-30V70Q328 82 316 82H226'/%3E%3Cpath d='M226 344V430Q226 442 214 442H-24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 330px, 430px 520px;
  background-position: 0 120px, 110px 30px;
  background-repeat: repeat;
  opacity: .16;
  animation: jtbs-route-field 34s linear infinite;
}
@keyframes jtbs-route-field {
  from { background-position: 0 120px, 110px 30px; }
  to   { background-position: 560px 120px, 110px 550px; }
}
/* Old in-card decorative layer is explicitly disabled: routes belong behind cards. */
.hero-grid::after { content: none !important; display: none !important; }

/* Every principal surface sits over the background texture. */
.hero,
.section,
.cta,
.contact-section,
.award-section,
footer { position: relative; z-index: 1; }
.hero-grid,
.manifesto,
.steps,
.criteria-grid,
.cta-inner,
.contact-card,
.award-shell { position: relative; z-index: 1; }

/* Desktop hero: keep the successful proportions, but use a less generic editorial
   type language. Bahnschrift is local on Windows; the stack degrades gracefully. */
@media (min-width: 1021px) {
  .wrap { width: min(1540px, calc(100% - 48px)); }
  .hero { padding-top: 12px; padding-bottom: 20px; }
  .hero-grid {
    grid-template-columns: minmax(0, .84fr) minmax(700px, 1.16fr);
    gap: 28px;
    min-height: clamp(650px, calc(100svh - 132px), 730px);
    padding: 20px 22px 16px;
  }
  .hero-grid > :first-child {
    --hero-gap: 22px;
    justify-content: center;
    padding: 20px 10px 14px 8px;
  }
  .eyebrow { margin-bottom: 16px; }
  h1 {
    font-family: Bahnschrift, "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(48px, 4.55vw, 74px);
    line-height: .99;
    letter-spacing: -.048em;
    font-weight: 690;
    font-stretch: condensed;
  }
  h1 em {
    display: block;
    margin-top: 14px;
    color: #d63c1c;
    font-style: normal;
    font-weight: 650;
    letter-spacing: -.052em;
  }
  .hero-copy {
    margin-top: var(--hero-gap);
    max-width: 650px;
    font-family: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    font-size: clamp(16px, 1.24vw, 18.5px);
    line-height: 1.58;
    letter-spacing: -.012em;
    color: #4f5965;
  }
  .search-card { margin-top: var(--hero-gap); max-width: 720px; }
  .search-card input,
  .search-card .btn { min-height: 58px; }
  .microcopy {
    margin-top: var(--hero-gap);
    max-width: 720px;
    font-size: 11.5px;
    line-height: 1.55;
  }
  .map-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: stretch;
    min-height: 0;
    padding-top: 38px;
  }
  .map-shell {
    height: clamp(560px, calc(100svh - 210px), 650px);
    min-height: 0;
  }
  .map-caption { margin-top: 9px; }
}

/* Make the glass rim around the map about two-thirds of its former thickness. */
#map { inset: 9px; border-radius: 30px; }
.map-shell::before { inset: 1px; }
.maplibregl-canvas-container,
.maplibregl-canvas { border-radius: 30px; }
.map-topbar { top: 23px; left: 23px; right: 83px; }
.map-fullscreen-btn { top: 23px; right: 23px; }
.maplibregl-ctrl-top-right { top: 81px; right: 23px; }
.map-sheet { left: 23px; right: 23px; bottom: 23px; }

/* 30% more breathing room between opening chassis and manifesto. */
.hero + .section { padding-top: 30px; }

/* Manifesto: remove all orange atmosphere from the reading edge. Keep only the
   subtle signature glow at the far right. */
.manifesto {
  background:
    radial-gradient(360px 250px at 102% 6%, rgba(255,104,69,.14), transparent 71%),
    linear-gradient(145deg, #171a1f 0%, #0e1116 100%);
}
.manifesto::before { content: none !important; }
.manifesto::after {
  content: "";
  position: absolute;
  right: -64px;
  top: -78px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,68,.16), rgba(255,102,68,.045) 44%, transparent 70%);
  filter: blur(4px);
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
}

/* Function section remains open: no large wrapper, same text placement and two
   compact solid markers between the texts. The page route texture lives behind. */
#fonctionnement > .wrap {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#fonctionnement .section-head {
  position: relative;
  align-items: center;
  gap: 34px;
  margin-bottom: 24px;
  padding: 22px 10px 12px;
}
#fonctionnement .section-head h2 { max-width: 650px; padding-right: 8px; }
#fonctionnement .section-intro {
  max-width: 520px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 10px 24px rgba(17,18,22,.045);
  color: #343c47;
  font-weight: 610;
}
#fonctionnement .section-head::before,
#fonctionnement .section-head::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  width: 42px;
  height: 17px;
  border-radius: 6px;
  background: rgba(17,18,22,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px rgba(17,18,22,.10);
  pointer-events: none;
}
#fonctionnement .section-head::before { transform: translate(-52px, -22px); }
#fonctionnement .section-head::after {
  width: 28px;
  height: 13px;
  opacity: .52;
  transform: translate(4px, 10px);
}
#fonctionnement,
main > section.section:nth-of-type(4) { background: transparent; }
#fonctionnement::before,
main > section.section:nth-of-type(4)::before { content: none; }

/* CTA: thinner pure-black outline, still fully opaque. */
.cta h2 {
  color: transparent;
  font-weight: 520;
  -webkit-text-stroke: 1.25px #000;
  paint-order: stroke fill;
  text-shadow: none;
  letter-spacing: -.035em;
}
.cta p { color: #000; max-width: 740px; font-weight: 500; }

/* Mobile order stays CSS-only; app.js and HTML remain untouched. */
@media (max-width: 760px) {
  .hero-grid { display: flex; flex-direction: column; }
  .hero-grid > :first-child { display: contents; }
  .hero-grid > :first-child > .eyebrow { order: 1; align-self: flex-start; }
  .hero-grid > :first-child > h1 { order: 2; width: 100%; }
  .hero-grid > :first-child > .hero-copy { order: 3; width: 100%; }
  .hero-grid > :first-child > .search-card { order: 4; width: 100%; }
  .hero-grid > .map-column { order: 5; width: 100%; }
  .hero-grid > :first-child > .microcopy {
    order: 6;
    width: 100%;
    margin: 3px 6px 4px;
    padding: 10px 2px 0;
    color: #59616d;
    font-size: 11.5px;
    line-height: 1.52;
  }
  .map-caption { margin-bottom: 4px; }
  h1 {
    font-family: Bahnschrift, "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.04em;
    font-weight: 690;
    line-height: 1;
  }
  h1 em {
    color: #d63c1c;
    font-weight: 650;
    display: block;
    margin-top: 10px;
  }
  .hero-copy {
    font-family: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", sans-serif;
    color: #4f5965;
    line-height: 1.58;
  }
  #map { inset: 7px; border-radius: 19px; }
  .maplibregl-canvas-container,
  .maplibregl-canvas { border-radius: 19px; }
  .map-topbar { top: 15px; left: 15px; right: 69px; }
  .map-fullscreen-btn { top: 15px; right: 15px; }
  .map-sheet { left: 15px; right: 15px; bottom: 15px; }
  #fonctionnement .section-head { display: grid; gap: 14px; padding: 16px 4px 8px; }
  #fonctionnement .section-head::before,
  #fonctionnement .section-head::after { display: none; }
  #fonctionnement .section-intro { margin-top: 0; max-width: none; }
  .cta h2 {
    font-weight: 520;
    -webkit-text-stroke: 1px #000;
  }
}

@media (prefers-reduced-motion: reduce) {
  main::before { animation: none; }
}

/* === pass 5: human typography + viewport-fit hero + precise glass rim === */

/* A more characterful display face for the editorial statements; body copy stays
   calmer and more readable. */
h1,
.manifesto h2,
#fonctionnement .section-head h2,
main > section.section:nth-of-type(4) .section-head h2,
.contact-copy h2,
.cta h2 {
  font-family: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
}

.hero-copy,
.section-intro,
.manifesto p,
.contact-copy p {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

h1 {
  font-weight: 760;
  letter-spacing: -.055em;
}
h1 em {
  font-weight: 745;
  letter-spacing: -.052em;
  color: #de3f21;
}
.hero-copy {
  font-weight: 450;
  letter-spacing: -.018em;
}

.manifesto h2,
#fonctionnement .section-head h2,
main > section.section:nth-of-type(4) .section-head h2 {
  font-weight: 710;
  letter-spacing: -.045em;
}

/* The map should start with the chassis, not 38px lower. The whole opening module
   is sized against the actual viewport so the user sees the complete first card. */
@media (min-width: 1021px) {
  .hero {
    padding-top: 8px;
    padding-bottom: 12px;
  }
  .hero-grid {
    height: clamp(590px, calc(100svh - 116px), 680px);
    min-height: 0;
    max-height: 680px;
    padding: 16px 18px 14px;
    align-items: stretch;
  }
  .hero-grid > :first-child {
    justify-content: center;
    padding: 10px 10px 10px 8px;
  }
  .map-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    padding-top: 0;
  }
  .map-shell {
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }
}

/* Only the narrow glass lip is reduced. The map itself keeps the same footprint. */
#map {
  inset: 6px;
  border-radius: 32px;
}
.maplibregl-canvas-container,
.maplibregl-canvas { border-radius: 32px; }

/* Contact is now a single centered object. The decorative question mark is gone. */
.contact-question { display: none !important; }
.contact-card {
  grid-template-columns: 1fr !important;
  justify-items: center;
}
.contact-copy {
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
}
.contact-copy h2 {
  font-weight: 710;
  letter-spacing: -.043em;
  text-align: center;
}
.contact-copy p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.contact-kicker { margin-inline: auto; }
.contact-actions {
  width: min(560px, 100%);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  #map {
    inset: 5px;
    border-radius: 21px;
  }
  .maplibregl-canvas-container,
  .maplibregl-canvas { border-radius: 21px; }
  .contact-copy h2 { font-weight: 710; }
}

/* === pass 7: stronger Bricolage + branching route texture === */

/* Hero typography: keep the character of Bricolage, but give it enough mass to
   feel deliberate rather than delicate. */
h1 {
  font-weight: 790;
  letter-spacing: -.049em;
}
h1 em {
  font-weight: 785;
  letter-spacing: -.047em;
}

/* The manifesto keeps the same display face, with more breathing room between
   glyphs so the long sentence remains immediately legible. */
.manifesto h2 {
  font-weight: 720;
  letter-spacing: -.018em;
  word-spacing: .012em;
  line-height: 1.03;
}

/* Retire the old translated texture completely. The route is now a real SVG
   network beneath the content; only branches animate. */
main::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
.hero-grid::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

main {
  position: relative;
  isolation: isolate;
}
.route-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
main > section {
  position: relative;
  z-index: 1;
}
.route-path {
  fill: none;
  stroke: #000;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 11;
  vector-effect: non-scaling-stroke;
}
.route-base { opacity: 1; }
.route-branch { opacity: 1; }
.route-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

/* Each cycle waits roughly 3–5 seconds before the line actually splits. The
   branch then grows from the junction, bends with a rounded corner, and where
   applicable curves back into another established route. Nothing translates. */
.route-reveal-a { animation: route-branch-grow 14s cubic-bezier(.42,0,.18,1) infinite; }
.route-reveal-b { animation: route-branch-grow 15.5s cubic-bezier(.42,0,.18,1) 1.1s infinite; }
.route-reveal-c { animation: route-branch-grow 16.5s cubic-bezier(.42,0,.18,1) .4s infinite; }
.route-reveal-d { animation: route-branch-grow 13.5s cubic-bezier(.42,0,.18,1) 1.8s infinite; }

@keyframes route-branch-grow {
  0%, 26% { stroke-dashoffset: 1; }
  48%, 92% { stroke-dashoffset: 0; }
  99.99% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

@media (max-width: 760px) {
  .route-path { stroke-width: 1; stroke-dasharray: 4 10; }
}

@media (prefers-reduced-motion: reduce) {
  .route-reveal { animation: none !important; stroke-dashoffset: 0; }
}

/* === pass 8: stronger hero + scroll-built route network === */

/* Keep the same display language, but give the opening statement more authority. */
h1 {
  font-weight: 880;
  letter-spacing: -.052em;
}
h1 em {
  font-weight: 870;
  letter-spacing: -.050em;
}

/* The manifesto was slightly over-opened in pass 7. Tighten it just enough to
   keep the character while improving word-shape continuity. */
.manifesto h2 {
  letter-spacing: -.028em;
  word-spacing: 0;
}

/* Fallback: branches grow slowly and continuously instead of waiting 3–5 s.
   There is still no translation of the network itself. */
.route-reveal-a { animation: route-branch-grow-continuous 11s cubic-bezier(.35,0,.2,1) infinite; }
.route-reveal-b { animation: route-branch-grow-continuous 12.5s cubic-bezier(.35,0,.2,1) .8s infinite; }
.route-reveal-c { animation: route-branch-grow-continuous 14s cubic-bezier(.35,0,.2,1) 1.5s infinite; }
.route-reveal-d { animation: route-branch-grow-continuous 15s cubic-bezier(.35,0,.2,1) 2.2s infinite; }

@keyframes route-branch-grow-continuous {
  0%, 4% { stroke-dashoffset: 1; }
  64%, 94% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

/* Chromium/Brave: the network now reveals as the visitor moves down the page.
   Each branch owns a different slice of scroll progress, so the drawing keeps
   happening lower in the page instead of all finishing near the hero. */
@supports (animation-timeline: scroll()) {
  .route-reveal {
    animation-name: route-scroll-grow;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-timeline: scroll(root block);
  }

  .route-reveal-a { animation-range: 4% 24%; }
  .route-reveal-b { animation-range: 20% 44%; }
  .route-reveal-c { animation-range: 40% 70%; }
  .route-reveal-d { animation-range: 60% 92%; }

  @keyframes route-scroll-grow {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-reveal {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}

/* === pass 9: heavier opening + slow viewport-confined route propagation === */

/* Bricolage Grotesque tops out at 800 in the loaded variable font. The tiny
   same-colour stroke adds real visual mass without changing the face. */
h1,
h1 em {
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 100, "opsz" 72;
  -webkit-text-stroke: .55px currentColor;
  paint-order: stroke fill;
}

/* Slightly tighter than pass 8; still open enough for the long sentence. */
.manifesto h2 {
  letter-spacing: -.034em;
}

/* The route network is a viewport texture, not a page-sized grid. It stays
   behind the content and slowly constructs itself while the visitor browses. */
.route-texture {
  position: fixed !important;
  inset: 88px 0 0 0 !important;
  width: 100vw !important;
  height: calc(100svh - 88px) !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.route-path {
  fill: none;
  stroke: #000;
  stroke-opacity: 1;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 11;
  vector-effect: non-scaling-stroke;
}
.route-base,
.route-branch { opacity: 1; }

.route-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

/* Main routes start immediately but take a long time to grow. */
.route-reveal-trunk-a { animation: route-trunk-grow 26s cubic-bezier(.23,.62,.28,1) 0s 1 forwards; }
.route-reveal-trunk-b { animation: route-trunk-grow 30s cubic-bezier(.23,.62,.28,1) 1.2s 1 forwards; }
.route-reveal-trunk-c { animation: route-trunk-grow 34s cubic-bezier(.23,.62,.28,1) 2.4s 1 forwards; }

/* Ramifications begin early, but each one grows slowly. This makes the network
   feel alive during the descent instead of appearing already completed. */
.route-reveal-a { animation: route-branch-grow-slow 18s cubic-bezier(.28,.62,.22,1) 1.1s 1 forwards; }
.route-reveal-b { animation: route-branch-grow-slow 20s cubic-bezier(.28,.62,.22,1) 2.4s 1 forwards; }
.route-reveal-c { animation: route-branch-grow-slow 22s cubic-bezier(.28,.62,.22,1) 3.8s 1 forwards; }
.route-reveal-d { animation: route-branch-grow-slow 19s cubic-bezier(.28,.62,.22,1) 5.0s 1 forwards; }
.route-reveal-e { animation: route-branch-grow-slow 23s cubic-bezier(.28,.62,.22,1) 6.4s 1 forwards; }
.route-reveal-f { animation: route-branch-grow-slow 20s cubic-bezier(.28,.62,.22,1) 7.8s 1 forwards; }
.route-reveal-g { animation: route-branch-grow-slow 24s cubic-bezier(.28,.62,.22,1) 9.2s 1 forwards; }
.route-reveal-h { animation: route-branch-grow-slow 21s cubic-bezier(.28,.62,.22,1) 10.8s 1 forwards; }
.route-reveal-i { animation: route-branch-grow-slow 25s cubic-bezier(.28,.62,.22,1) 12.2s 1 forwards; }
.route-reveal-j { animation: route-branch-grow-slow 22s cubic-bezier(.28,.62,.22,1) 13.8s 1 forwards; }

@keyframes route-trunk-grow {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes route-branch-grow-slow {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Remove pass-8 scroll timeline: it was making long routes look effectively
   pre-drawn as soon as the page moved. */
@supports (animation-timeline: scroll()) {
  .route-reveal {
    animation-timeline: auto !important;
    animation-range: normal !important;
  }
}

/* Opaque principal surfaces keep the black route strictly in the background. */
#fonctionnement .section-intro {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,247,243,.88)), #f3f2ee;
}
.step {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(249,248,244,.58)), #f2f1ed;
}
.criterion {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(249,248,244,.60)), #f2f1ed;
}

@media (max-width: 760px) {
  .route-texture {
    inset: 76px 0 0 0 !important;
    height: calc(100svh - 76px) !important;
  }
  .route-path {
    stroke-width: 1;
    stroke-dasharray: 4 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-reveal {
    animation: none !important;
    stroke-dashoffset: .52;
  }
}

/* === pass 10: living street-network background + heavier hero === */

/* Bricolage Grotesque is already at its maximum font weight. Increase the
   actual painted mass instead of swapping away from the approved typeface. */
h1,
h1 em {
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 101, "opsz" 72;
  -webkit-text-stroke: 1.05px currentColor;
  paint-order: stroke fill;
}

/* Retire the previous pre-drawn SVG network. The new network is generated in
   an isolated visual-only script; app.js remains untouched. */
.route-texture {
  display: none !important;
}

.ambient-route-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .88;
}

.ambient-route-network {
  isolation: isolate;
}

.ambient-route-segment {
  fill: none;
  stroke: #8a8f96;
  stroke-opacity: .58;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 9;
  vector-effect: non-scaling-stroke;
  transition: opacity 1.2s ease;
}

.ambient-route-piece.is-retiring .ambient-route-segment {
  opacity: 0;
}

.ambient-route-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ambient-route-junction {
  fill: #8a8f96;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.6);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.75,.25,1);
}
.ambient-route-junction.is-settled {
  opacity: .34;
  transform: scale(1);
}
.ambient-route-junction.is-merge.is-settled {
  opacity: .48;
}

/* Put the living texture below the actual product surfaces. */
header,
main,
footer {
  position: relative;
}
header { z-index: 30; }
main,
footer { z-index: 1; }

.hero-grid,
.manifesto,
.step,
.criterion,
.cta-inner,
.contact-card,
.award-shell,
#fonctionnement .section-intro,
.search-card,
.map-shell {
  position: relative;
  z-index: 2;
}

/* The introductory text cards need enough opacity that streets feel behind
   them instead of being printed across the copy. */
#fonctionnement .section-intro {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,243,.95)), #f3f2ee;
}

@media (max-width: 760px) {
  h1,
  h1 em {
    -webkit-text-stroke: .82px currentColor;
  }
  .ambient-route-segment {
    stroke-width: 1;
    stroke-dasharray: 4 9;
    stroke-opacity: .50;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-route-layer { opacity: .50; }
}

/* === pass 10.1: more assertive hero + softer, visibly propagating routes === */
h1,
h1 em {
  -webkit-text-stroke: 1.35px currentColor;
}

.ambient-route-segment {
  stroke: #92979e;
  stroke-opacity: .52;
  stroke-width: 1.12;
  stroke-dasharray: 4.5 8.5;
  transition: opacity 1.2s ease, stroke-opacity 1.2s ease;
}

.ambient-route-piece.is-settled .ambient-route-segment {
  stroke-opacity: .34;
}

.ambient-route-head {
  fill: #858b92;
  opacity: .52;
  vector-effect: non-scaling-stroke;
}

.ambient-route-junction {
  fill: #92979e;
}

@media (max-width: 760px) {
  h1,
  h1 em {
    -webkit-text-stroke: .98px currentColor;
  }
  .ambient-route-segment {
    stroke-opacity: .46;
    stroke-dasharray: 4 8;
  }
  .ambient-route-piece.is-settled .ambient-route-segment {
    stroke-opacity: .30;
  }
}

/* === pass 11: sequential dotted routes + softened depth === */
.ambient-route-layer {
  opacity: .66;
  filter: blur(.65px);
  -webkit-filter: blur(.65px);
  transform: translateZ(0);
}

.ambient-route-segment,
.ambient-route-head,
.ambient-route-reveal {
  display: none !important;
}

.ambient-route-measure {
  fill: none;
  stroke: none;
  pointer-events: none;
}

.ambient-route-dash {
  fill: none;
  stroke: #a0a3a7;
  stroke-opacity: .56;
  stroke-width: 1.45;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity .72s cubic-bezier(.2,.7,.25,1), stroke-opacity 1.2s ease;
}

.ambient-route-dash.is-visible {
  stroke-opacity: .56;
}

.ambient-route-piece.is-settled .ambient-route-dash {
  stroke-opacity: .36;
}

.ambient-route-piece.is-retiring .ambient-route-dash {
  opacity: 0 !important;
  stroke-opacity: 0;
}

.ambient-route-junction {
  fill: #9da1a5;
  opacity: 0;
}

.ambient-route-junction.is-settled {
  opacity: .24;
}

.ambient-route-junction.is-merge.is-settled {
  opacity: .34;
}

@media (max-width: 760px) {
  .ambient-route-layer {
    opacity: .58;
    filter: blur(.55px);
    -webkit-filter: blur(.55px);
  }
  .ambient-route-dash {
    stroke-width: 1.25;
    stroke-opacity: .50;
  }
  .ambient-route-piece.is-settled .ambient-route-dash {
    stroke-opacity: .30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-route-layer {
    opacity: .42;
    filter: blur(.6px);
    -webkit-filter: blur(.6px);
  }
}

/* === pass 12: balanced branching street grammar === */
.ambient-route-layer {
  opacity: .82;
  filter: blur(.35px);
  -webkit-filter: blur(.35px);
}

.ambient-route-dash {
  stroke: #858b92;
  stroke-opacity: .62;
  stroke-width: 1.55;
  stroke-linecap: round;
  transition: opacity .58s cubic-bezier(.2,.7,.25,1), stroke-opacity 1.1s ease;
}

.ambient-route-dash.is-visible {
  stroke-opacity: .62;
}

.ambient-route-piece.is-settled .ambient-route-dash {
  stroke-opacity: .46;
}

.ambient-route-junction {
  fill: #858b92;
}

.ambient-route-junction.is-settled {
  opacity: .28;
}

.ambient-route-junction.is-merge.is-settled {
  opacity: .40;
}

@media (max-width: 760px) {
  .ambient-route-layer {
    opacity: .74;
    filter: blur(.3px);
    -webkit-filter: blur(.3px);
  }

  .ambient-route-dash {
    stroke-width: 1.35;
    stroke-opacity: .58;
  }

  .ambient-route-piece.is-settled .ambient-route-dash {
    stroke-opacity: .42;
  }
}

/* === pass 13: final predesigned dotted network + diffuse reveal === */
.ambient-route-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .72;
  filter: blur(.85px);
  -webkit-filter: blur(.85px);
  transform: translateZ(0);
}

.ambient-route-network-static {
  isolation: isolate;
}

.ambient-route-zone {
  opacity: 0;
  filter: blur(8px);
  transform-box: fill-box;
  transform-origin: center;
}

.ambient-route-grid-path {
  fill: none;
  stroke: #92979d;
  stroke-opacity: .48;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5.2 10.8;
  vector-effect: non-scaling-stroke;
}

.ambient-route-layer.is-revealing .ambient-route-zone {
  animation: ambient-zone-reveal 7.2s cubic-bezier(.18,.62,.24,1) var(--zone-delay, 0s) 1 forwards;
}

.ambient-route-layer.is-static .ambient-route-zone {
  opacity: .62;
  filter: blur(1.2px);
}

@keyframes ambient-zone-reveal {
  0% {
    opacity: 0;
    filter: blur(9px);
  }
  28% {
    opacity: .14;
    filter: blur(6px);
  }
  62% {
    opacity: .46;
    filter: blur(2.6px);
  }
  100% {
    opacity: .68;
    filter: blur(1px);
  }
}

/* Legacy procedural-route shapes are intentionally suppressed. */
.ambient-route-segment,
.ambient-route-head,
.ambient-route-reveal,
.ambient-route-measure,
.ambient-route-dash,
.ambient-route-junction,
.ambient-route-piece {
  display: none !important;
}

@media (max-width: 760px) {
  .ambient-route-layer {
    opacity: .60;
    filter: blur(.75px);
    -webkit-filter: blur(.75px);
  }

  .ambient-route-grid-path {
    stroke-width: 1.25;
    stroke-opacity: .42;
    stroke-dasharray: 4.6 9.8;
  }

  .ambient-route-layer.is-revealing .ambient-route-zone {
    animation-duration: 6.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-route-zone {
    animation: none !important;
    opacity: .50 !important;
    filter: blur(1.4px) !important;
  }
}

/* === MOBILE PASS — phone-only hero flow ===
   Desktop/tablet above 760px intentionally unchanged. */
@media (max-width: 760px) {
  /* Top bar: keep Contact visible, hide only the redundant search shortcut. */
  header { padding-top: 8px; }
  .nav {
    min-height: 62px;
    gap: 6px;
    padding-inline: 8px;
  }
  .brand {
    flex: 0 0 auto;
    min-width: 0;
  }
  .brand > span:last-child { display: none; }
  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
  .nav-actions {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }
  .nav-actions .nav-search { display: none !important; }
  .nav-actions > a.btn-light { display: inline-flex !important; }
  .nav-actions > a.btn-light,
  .nav-actions .btn-dark {
    min-height: 40px;
    max-width: none;
    padding-inline: 11px;
    border-radius: 15px;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Mobile hero becomes one deliberate reading sequence:
     eyebrow -> title -> copy -> map -> search -> proof note. */
  .hero {
    padding-top: 10px;
    padding-bottom: 18px;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px 14px 14px;
  }
  .hero-grid > :first-child { display: contents; }
  .hero-grid > :first-child > .eyebrow {
    order: 1;
    align-self: flex-start;
    margin-bottom: 12px;
  }
  .hero-grid > :first-child > h1 {
    order: 2;
    width: 100%;
    font-size: clamp(50px, 13.6vw, 60px);
    line-height: .90;
    letter-spacing: -.055em;
  }
  .hero-grid > :first-child > h1 em {
    display: block;
    margin-top: 4px;
    line-height: .92;
  }
  .hero-grid > :first-child > .hero-copy {
    order: 3;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.48;
  }

  /* Map comes before the address module and is close to square on phones. */
  .hero-grid > .map-column {
    order: 4;
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }
  .map-shell {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.04 / 1;
    border-radius: 27px;
  }
  #map {
    inset: 5px;
    border-radius: 22px;
  }
  .maplibregl-canvas-container,
  .maplibregl-canvas { border-radius: 22px; }
  .map-topbar {
    top: 14px;
    left: 14px;
    right: 66px;
  }
  .map-fullscreen-btn {
    top: 14px;
    right: 14px;
  }
  .map-sheet {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
  .map-caption {
    margin: 7px 4px 0;
    font-size: 11.5px;
  }

  /* Search sits directly under the map so the orange action is the next visible cue. */
  .hero-grid > :first-child > .search-card {
    order: 5;
    width: 100%;
    margin-top: 10px;
    padding: 6px;
    border-radius: 22px;
  }
  .search-card input,
  .search-card .btn {
    min-height: 50px;
  }
  .search-card .btn {
    width: 100%;
    border-radius: 17px;
  }

  .hero-grid > :first-child > .microcopy {
    order: 6;
    width: 100%;
    margin: 8px 4px 2px;
    padding-top: 0;
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-width: 390px) {
  .nav-actions > a.btn-light,
  .nav-actions .btn-dark {
    padding-inline: 9px;
    font-size: 11.5px;
  }
  .hero-grid > :first-child > h1 {
    font-size: clamp(48px, 13.2vw, 54px);
  }
  .hero-grid > :first-child > .hero-copy {
    font-size: 15.5px;
  }
}

/* === final polish: support card + mobile fullscreen alignment === */
.api-support-card {
  width: min(760px, 100%);
  min-height: 74px;
  margin: 14px auto 0;
  padding: 14px 16px 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(247,245,240,.58));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 14px 34px rgba(19,23,31,.07), inset 0 1px 0 rgba(255,255,255,.96);
  color: #17191f;
  transition: transform 150ms ease, box-shadow 170ms ease, background 170ms ease;
}
.api-support-card:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(249,247,242,.72));
  box-shadow: 0 18px 40px rgba(19,23,31,.10), inset 0 1px 0 rgba(255,255,255,.98);
}
.api-support-label {
  font-family: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -.02em;
}
.api-support-price {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 46px;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff754f, #ff5736);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 20px rgba(255,87,54,.20);
}

@media (max-width: 760px) {
  .map-fullscreen-btn {
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center;
    text-indent: 0;
  }
  .api-support-card {
    width: 100%;
    min-height: 68px;
    margin-top: 10px;
    padding: 10px 10px 10px 16px;
    border-radius: 20px;
  }
  .api-support-label { font-size: 15.5px; }
  .api-support-price {
    min-width: 82px;
    min-height: 44px;
    border-radius: 14px;
    font-size: 14px;
  }
}

/* === close-control collision + precisely centered mobile fullscreen icon === */
/* In fullscreen, reserve breathing room between the map close control and the
   close control of the review sheet. The sheet keeps its full width; only its
   own close button shifts left. */
/* Any true modal opened from a fullscreen map must sit above the map layer. */
body.map-fullscreen-open .modal.open {
  z-index: 2147483646;
}

@media (max-width: 760px) {
  .map-fullscreen-btn {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* The unicode fullscreen glyph has asymmetric font metrics on mobile.
     Replace it visually with a geometric icon drawn around the exact center. */
  .map-fullscreen-btn[aria-pressed="false"] {
    font-size: 0 !important;
    color: transparent !important;
  }
  .map-fullscreen-btn[aria-pressed="false"]::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background:
      linear-gradient(#17191f, #17191f) left top / 7px 2px no-repeat,
      linear-gradient(#17191f, #17191f) left top / 2px 7px no-repeat,
      linear-gradient(#17191f, #17191f) right top / 7px 2px no-repeat,
      linear-gradient(#17191f, #17191f) right top / 2px 7px no-repeat,
      linear-gradient(#17191f, #17191f) left bottom / 7px 2px no-repeat,
      linear-gradient(#17191f, #17191f) left bottom / 2px 7px no-repeat,
      linear-gradient(#17191f, #17191f) right bottom / 7px 2px no-repeat,
      linear-gradient(#17191f, #17191f) right bottom / 2px 7px no-repeat;
  }

  /* Draw the exit X geometrically too, so both states share the same center. */
  .map-fullscreen-btn[aria-pressed="true"] {
    position: absolute;
    font-size: 0 !important;
    color: transparent !important;
  }
  .map-fullscreen-btn[aria-pressed="true"]::before,
  .map-fullscreen-btn[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2.5px;
    border-radius: 999px;
    background: #17191f;
    transform-origin: center;
  }
  .map-fullscreen-btn[aria-pressed="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .map-fullscreen-btn[aria-pressed="true"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  }

/* === MOBILE HEADER BRAND + FULLSCREEN REVIEW CLOSE FIX === */
@media (max-width: 760px) {
  /* Keep the site name visible in the compact phone header. */
  .brand {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 820;
    letter-spacing: -.035em;
  }
  .brand > span:last-child {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    font-size: 18px;
  }

  /* Leave room for the visible brand without losing Contact / Donner un avis. */
  .nav {
    gap: 5px;
    padding-inline: 7px;
  }
  .nav-actions {
    flex: 0 0 auto;
    gap: 5px;
  }
  .nav-actions > a.btn-light,
  .nav-actions .btn-dark {
    padding-inline: 9px;
    font-size: 11.5px;
  }

  /* When a review modal is opened on top of a fullscreen map, its close
     control must not occupy the same top-right position as the map exit. */
  body.map-fullscreen-open .modal.open .close {
    right: 72px !important;
    top: 14px !important;
    transform: none !important;
  }

  /* The map information-sheet close control needs the same separation on phones. */
  }

@media (max-width: 390px) {
  .brand {
    gap: 5px;
    font-size: 11.8px;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 17px;
  }
  .nav-actions > a.btn-light,
  .nav-actions .btn-dark {
    padding-inline: 7px;
    font-size: 10.8px;
  }
}

/* === FINAL MOBILE ICON + STICKY GLASS HEADER === */
/* Restore the navigation as a true sticky glass layer. A later ambient-route
   rule had reset header to position:relative, which disabled the sticky state. */
header {
  position: sticky !important;
  top: 0;
  z-index: 40;
  background: rgba(239, 238, 233, .62);
  border-bottom: 1px solid rgba(26, 30, 38, .055);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 8px 24px rgba(18, 22, 30, .035);
}

@media (max-width: 760px) {
  /* Use the mathematical center of the button, then lower the icon by 2 px
     to compensate for its optical weight on small screens. */
  .map-fullscreen-btn[aria-pressed="false"]::before {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) translateY(2px);
  }
}

/* === HEADER GLASS BUBBLE + COLLAPSED MAP ATTRIBUTION === */
/* Keep the sticky header's outer strip completely transparent; only the
   rounded navigation bubble carries the frosted/opaque material. */
header {
  position: sticky !important;
  top: 0;
  z-index: 40;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header .nav {
  background: rgba(246, 245, 241, .72);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(18,22,30,.075), inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

/* Force MapLibre attribution into its compact disclosure state on first load.
   The built-in attribution button remains available and MapLibre toggles the
   compact-show class when the user opens it. */
.maplibregl-ctrl-attrib {
  min-height: 24px;
  min-width: 24px;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 4px 14px rgba(18,22,30,.08) !important;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
  display: none !important;
}

.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button {
  display: block !important;
}

.maplibregl-ctrl-attrib.maplibregl-compact-show {
  padding: 4px 30px 4px 8px !important;
  max-width: min(70vw, 620px);
}

.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
  display: block !important;
}


/* === MOBILE HEADER / HERO FINAL TUNE === */
@media (max-width: 760px) {
  /* Keep the title itself fully black; the emphasized second line keeps its orange rule. */
  .hero-grid > :first-child > h1 {
    color: #000000;
  }

  /* Keep the full site name visible inside the mobile glass bubble. */
  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .brand > span:last-child {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 390px) {
  /* Preserve the full brand on narrow phones by tightening only the header typography. */
  .brand {
    font-size: 11.2px;
    gap: 4px;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .nav-actions > a.btn-light,
  .nav-actions .btn-dark {
    padding-inline: 6px;
    font-size: 10.3px;
  }
}

/* === MOBILE PASS — true black hero + collapsed attribution at rest === */
@media (max-width: 760px) {
  /* Brave/Chromium can keep an inherited/text-rendered gray on this heading.
     Lock the actual glyph fill, not only the CSS color property. */
  .hero-grid > :first-child > h1 {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* Preserve the orange emphasized line. */
  .hero-grid > :first-child > h1 em {
    color: #de3f21 !important;
    -webkit-text-fill-color: #de3f21 !important;
    opacity: 1 !important;
  }

  /* Attribution stays collapsed when the map first appears. The native
     attribution button remains tappable; focus/MapLibre's open state reveals it. */
  .maplibregl-ctrl-attrib {
    width: 28px !important;
    max-width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
    display: none !important;
  }

  .maplibregl-ctrl-attrib.maplibregl-compact-show,
  .maplibregl-ctrl-attrib:focus-within {
    width: auto !important;
    max-width: min(82vw, 520px) !important;
    height: auto !important;
    min-height: 28px !important;
    padding: 5px 30px 5px 8px !important;
    overflow: visible !important;
  }

  .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner,
  .maplibregl-ctrl-attrib:focus-within .maplibregl-ctrl-attrib-inner {
    display: block !important;
  }
}

/* === MOBILE HERO STACKING FIX ===
   On mobile the left hero wrapper is display:contents, so its z-index no longer
   creates a painted box. Give the actual text nodes their own stacking layer so
   the translucent hero-grid::before material stays behind the glyphs. */
@media (max-width: 760px) {
  .hero-grid > :first-child > h1,
  .hero-grid > :first-child > .hero-copy {
    position: relative;
    z-index: 3;
  }

  .hero-grid > :first-child > h1 {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }

  .hero-grid > :first-child > h1 em {
    position: relative;
    z-index: 3;
  }
}

/* === MOBILE HERO — remove top wash completely ===
   The opening sentence is the key message. On mobile, remove every translucent
   highlight layer from the hero chassis so nothing can visually wash the glyphs. */
@media (max-width: 760px) {
  .hero-grid {
    background: #d1cec7 !important;
    isolation: isolate;
  }

  .hero-grid::before,
  .hero-grid::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  .hero-grid > :first-child,
  .hero-grid > :first-child > h1,
  .hero-grid > :first-child > h1 * {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
  }

  .hero-grid > :first-child > h1 {
    position: relative;
    z-index: 20;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-text-stroke: 1.35px #000000 !important;
    paint-order: stroke fill;
    text-shadow: none !important;
  }

  .hero-grid > :first-child > h1 em {
    color: #de3f21 !important;
    -webkit-text-fill-color: #de3f21 !important;
    -webkit-text-stroke: 1.15px #de3f21 !important;
  }
}

/* === MOBILE FULLSCREEN MAP — hide hero copy completely ===
   On phones the left hero wrapper uses display:contents, so its title can sit in
   a higher stacking layer than the fullscreen map. When fullscreen is active,
   remove every non-map hero item from painting and raise the map column above
   the rest of the hero. */
@media (max-width: 760px) {
  body.map-fullscreen-open .hero-grid > .map-column {
    position: relative;
    z-index: 2147483500 !important;
  }

  body.map-fullscreen-open .hero-grid > :first-child > .eyebrow,
  body.map-fullscreen-open .hero-grid > :first-child > h1,
  body.map-fullscreen-open .hero-grid > :first-child > .hero-copy,
  body.map-fullscreen-open .hero-grid > :first-child > .search-card,
  body.map-fullscreen-open .hero-grid > :first-child > .microcopy {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* === FINAL BUGFIX — desktop logo shell + mobile fullscreen hero === */
/* The SVG already contains the black house and orange checklist. The old
   .brand-mark material was still painting a dark rounded tile behind it on
   desktop. Keep the mark itself completely unframed. */
.brand-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  /* The left hero wrapper becomes display:contents in the mobile layout.
     Hiding only its individual children proved fragile across the many
     mobile overrides. Hide the wrapper itself whenever fullscreen is active.
     :has() is the state-source fallback if the body class ever lags a frame. */
  body.map-fullscreen-open .hero-grid > :first-child,
  .hero-grid:has(.map-shell.is-fullscreen) > :first-child {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.map-fullscreen-open .hero-grid,
  .hero-grid:has(.map-shell.is-fullscreen) {
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  body.map-fullscreen-open .hero-grid > .map-column,
  .hero-grid:has(.map-shell.is-fullscreen) > .map-column {
    order: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2147483500 !important;
  }
}

/* Fullscreen mobile: lift the entire map column into the viewport. This avoids
   the fixed map being trapped below the title's own stacking context. */
@media (max-width: 760px) {
  body.map-fullscreen-open .hero-grid > .map-column,
  body:has(.map-shell.is-fullscreen) .hero-grid > .map-column {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483600 !important;
    overflow: hidden !important;
  }

  body.map-fullscreen-open .map-shell.is-fullscreen,
  body:has(.map-shell.is-fullscreen) .map-shell.is-fullscreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
  }

  body.map-fullscreen-open .hero h1,
  body.map-fullscreen-open .hero .hero-copy,
  body.map-fullscreen-open .hero .search-card,
  body.map-fullscreen-open .hero .microcopy,
  body:has(.map-shell.is-fullscreen) .hero h1,
  body:has(.map-shell.is-fullscreen) .hero .hero-copy,
  body:has(.map-shell.is-fullscreen) .hero .search-card,
  body:has(.map-shell.is-fullscreen) .hero .microcopy {
    display: none !important;
  }
}

.review-edit { margin-top:10px; padding:0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.review-edit:hover,.review-edit:focus-visible { color:var(--ink); }
.review-edit-page { min-height:100vh; background:var(--bg); }
.review-edit-main { width:min(900px,calc(100% - 28px)); margin:0 auto; padding:40px 0 80px; }
.review-edit-panel { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,5vw,46px); }
.review-edit-back { display:inline-block; margin-bottom:24px; font-weight:800; }
.review-edit-panel h1 { margin-top:8px; }
.review-edit-panel fieldset label { display:block; margin:9px 0; }

/* === iPad/tablet refinement: original hero proportions, stacked address action === */
@media (min-width: 761px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  #fonctionnement .section-head::before,
  #fonctionnement .section-head::after {
    display: none !important;
  }

  .hero-grid > :first-child {
    --hero-gap: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .eyebrow {
    margin-bottom: 10px;
  }

  .hero-copy {
    margin-top: var(--hero-gap);
    font-size: 15.5px;
    line-height: 1.45;
  }

  .search-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: var(--hero-gap);
    padding: 6px;
    gap: 6px;
  }

  .search-card input,
  .search-card .btn {
    width: 100%;
    min-height: 48px;
  }

  .microcopy {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.42;
  }

  .map-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 5px;
    min-height: 0;
  }

  .map-shell {
    height: auto !important;
    min-height: 0;
    align-self: stretch;
  }

  .map-caption {
    margin-top: 2px;
    line-height: 1.3;
  }
}

/* Review questions: supplemental factual Q&A, deliberately not a social feed. */
.review-qa { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.review-qa-inner { display: grid; gap: 9px; }
.review-qa-title { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.review-qa-empty,.review-qa-status { font-size: 12px; color: var(--muted); }
.review-qa-question { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: rgba(255,255,255,.7); transition: border-color .2s ease, box-shadow .2s ease; }
.review-qa-question-head { margin-bottom: 5px; font-size: 12px; }
.review-qa-question > p,.review-qa-answer > p { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-qa-waiting { margin-top: 8px; font-size: 11px; font-weight: 800; color: var(--muted); }
.review-qa-answer { margin-top: 9px; padding: 9px 10px; border-left: 3px solid var(--green); background: rgba(0,0,0,.025); border-radius: 8px; }
.review-qa-answer > strong { display: block; margin-bottom: 4px; font-size: 11px; }
.review-qa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.review-qa-actions button,.review-qa-answer button,.review-qa-ask { padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-qa-actions button:hover,.review-qa-actions button:focus-visible,.review-qa-answer button:hover,.review-qa-answer button:focus-visible,.review-qa-ask:hover,.review-qa-ask:focus-visible { color: var(--ink); }
.qa-deep-link-target { border-color: var(--green); box-shadow: 0 0 0 3px rgba(18,91,75,.12); }
.review-qa-modal-card { width: min(620px, calc(100vw - 28px)); }
.review-qa-modal-card .modal-description { color: var(--muted); }
@media (max-width: 760px) { .review-qa-question { padding: 10px; } .review-qa-modal-card { width: calc(100vw - 20px); } }

@media (max-width: 760px) {
  .map-sheet-closebar { padding-right: 12px; }
  .map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar { padding-right: 50px; }
}

/* === mobile review close placement + action alignment === */
.review-card-action-links .review-report,
.review-card-action-links .review-qa-ask,
.review-card-action-links .review-edit {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar {
    top: 58px;
    padding-right: 0;
  }
  .map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar .sheet-close {
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: #1f6feb;
    transform: translateX(8px) !important;
  }
}

/* Phase 4 member experience */
.member-panel{position:fixed;inset:0;z-index:10050;display:none;place-items:center;padding:24px;background:rgba(12,12,12,.42);backdrop-filter:blur(14px)}
.member-panel.open{display:grid}.member-panel-card{position:relative;width:min(760px,100%);max-height:min(88vh,900px);overflow:auto;background:#fffdf8;border:1px solid rgba(23,23,23,.18);border-radius:28px;padding:clamp(24px,4vw,42px);box-shadow:0 30px 90px rgba(0,0,0,.24)}
.member-panel-close{position:absolute;right:18px;top:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(23,23,23,.18);background:#fff;cursor:pointer;font-size:25px}.member-auth-tabs{display:flex;gap:8px;margin:18px 0}.member-auth-tabs button{border:1px solid rgba(23,23,23,.18);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800}.member-auth-tabs button[aria-pressed="true"]{background:#171717;color:#fff}.member-panel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.member-status{min-height:24px;margin-top:14px;color:var(--muted,#555)}.member-status.error{color:#a62d1b}.member-status.success{color:#176b43}#memberImproveComment{width:100%;min-height:140px;margin:12px 0}.member-panel-open{overflow:hidden}
.member-nav{display:none;align-items:center;gap:8px}.member-active .member-nav{display:flex}.member-bottom-nav{display:none}
body.map-fullscreen-open .hero-grid>div:first-child,body.map-fullscreen-open .hero-copy,body.map-fullscreen-open .hero>.eyebrow,body.map-fullscreen-open .microcopy{display:none!important}
@media(max-width:720px){.member-panel{padding:0;align-items:stretch}.member-panel-card{width:100%;height:100dvh;max-height:none;border-radius:0;padding:calc(22px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));}.member-active .nav-actions .member-nav{display:none}.member-active .member-bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:8000;background:rgba(255,253,248,.94);backdrop-filter:blur(16px);border:1px solid rgba(23,23,23,.16);border-radius:18px;padding:8px}.member-bottom-nav button{border:0;background:transparent;padding:10px 4px;font-weight:800;font-size:12px}.member-active{padding-bottom:92px}}
.member-drawer{position:fixed;inset:0;z-index:10020;display:none;justify-content:flex-end;background:rgba(12,12,12,.25);backdrop-filter:blur(8px)}.member-drawer.open{display:flex}.member-drawer-card{position:relative;width:min(560px,100%);height:100%;overflow:auto;background:#fffdf8;border-left:1px solid rgba(23,23,23,.16);padding:36px 26px}.member-owned-list,.member-activity-list{display:grid;gap:12px}.member-owned-card,.member-activity-list article{border:1px solid rgba(23,23,23,.13);border-radius:16px;padding:16px;background:#fff}.member-delete-box{margin-top:22px;padding:14px;border:1px solid rgba(140,30,20,.22);border-radius:14px}.member-delete-box label{display:block;margin:10px 0}.member-delete-box input[type="password"],#memberPreferredLocale{width:100%;margin-top:6px;padding:12px;border:1px solid rgba(23,23,23,.18);border-radius:10px}

/* Phase 4 mobile/header state fit: preserve Contact without horizontal overflow. */
[data-member-public-only][hidden],
[data-member-locked-only][hidden],
[data-member-active-only][hidden],
.member-panel [hidden] { display: none !important; }
body[data-member-route="contribute"] .nav-actions [data-member-action="open-contribution"],
body[data-member-route="processing"] .nav-actions [data-member-action="open-contribution"] { display: none !important; }
@media (max-width: 760px) {
  .nav-actions > [data-member-action="signup"] { display: none !important; }
  .nav-actions { min-width: 0; max-width: calc(100% - 44px); }
  .nav-actions .member-auth-link,
  .nav-actions .nav-contact,
  .nav-actions .nav-review {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 8px;
    font-size: 11.5px;
  }
  body[data-member-route="contribute"] .nav-actions,
  body[data-member-route="processing"] .nav-actions { max-width: calc(100% - 44px); }
  body[data-member-route="contribute"] .nav-actions [data-member-action="open-contribution"],
  body[data-member-route="processing"] .nav-actions [data-member-action="open-contribution"] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* Phase 4 tablet header fit. */
@media (max-width: 1020px) { .nav-actions .nav-search { display: none !important; } }

/* === Phase 4 review details + action bar === */
.review-card {
  padding: 18px;
}
.review-card-head {
  align-items: flex-start;
  margin-bottom: 14px;
}
.review-card-score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 850;
}
.review-card .review-detail-grid {
  gap: 14px;
}
.review-card .review-ratings {
  padding: 10px 12px;
  border: 1px solid rgba(17,20,26,.07);
  border-radius: 15px;
  background: rgba(248,250,253,.78);
}
.review-card .review-rating-row {
  min-height: 34px;
  padding: 6px 0;
}
.review-card .review-stars {
  color: #d79213;
  letter-spacing: 1.3px;
}
.review-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17,20,26,.075);
}
.review-action-button {
  appearance: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(17,20,26,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.96);
  font: inherit;
  font-size: 12px;
  font-weight: 790;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.review-action-button:hover,
.review-action-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(15,23,42,.085), inset 0 1px 0 rgba(255,255,255,.96);
  outline: none;
}
.review-action-question {
  border-color: #171b23;
  background: #171b23;
  color: #fff;
  box-shadow: 0 7px 18px rgba(17,20,26,.16);
}
.review-action-question:hover,
.review-action-question:focus-visible {
  background: #252a34;
  border-color: #252a34;
}
.review-action-dispute {
  border-color: rgba(255,90,54,.25);
  background: #fff5f0;
  color: #9a3c26;
}
.review-action-dispute:hover,
.review-action-dispute:focus-visible {
  border-color: rgba(255,90,54,.42);
  background: #ffede5;
}
.review-action-report {
  margin-left: auto;
  min-height: 36px;
  padding-inline: 9px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
.review-action-report:hover,
.review-action-report:focus-visible {
  background: rgba(17,20,26,.045);
  box-shadow: none;
  color: var(--ink);
}
.review-action-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.review-qa-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  background: #fff8f4;
  border: 1px solid rgba(255,90,54,.14);
}
.review-action-retry {
  min-height: 34px;
  padding: 7px 10px;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: none;
}
.review-qa-actions button,
.review-qa-answer button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(17,20,26,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.review-qa-actions button:hover,
.review-qa-actions button:focus-visible,
.review-qa-answer button:hover,
.review-qa-answer button:focus-visible {
  background: #fff;
  border-color: rgba(17,20,26,.14);
  color: var(--ink);
}
@media (max-width: 600px) {
  .review-card { padding: 15px; }
  .review-card-actions { gap: 7px; }
  .review-action-question,
  .review-action-dispute { flex: 1 1 calc(50% - 4px); }
  .review-action-report { margin-left: 0; }
  .review-action-button { min-height: 42px; }
  .review-qa-load-error { align-items: flex-start; flex-direction: column; }
}

/* === Account consolidation + locked map preview + tablet/mobile auth === */
.member-mobile-account{display:none}
.member-account-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 22px;padding:5px;border:1px solid rgba(23,23,23,.10);border-radius:16px;background:rgba(255,255,255,.72)}
.member-account-tabs button{min-width:0;border:0;border-radius:12px;background:transparent;padding:11px 10px;font:inherit;font-weight:820;color:rgba(23,23,23,.66);cursor:pointer}
.member-account-tabs button[aria-current="page"]{background:#171717;color:#fff;box-shadow:0 7px 18px rgba(23,23,23,.14)}
.member-account-view{min-width:0}
.locked-review-preview{display:grid;gap:7px;padding:16px;border:1px solid rgba(23,23,23,.10);border-radius:17px;background:rgba(255,255,255,.78)}
.locked-review-preview p{margin:0;color:rgba(23,23,23,.72)}
.locked-review-message{margin-top:7px;padding:12px 13px;border-radius:13px;background:rgba(255,90,54,.10);color:#542416;font-weight:820;line-height:1.4}
[data-member-signedin-only][hidden]{display:none!important}

@media (max-width:1024px){
  .nav-actions .nav-search,.nav-actions [data-member-action="open-contribution"]{display:none!important}
  .member-desktop-auth{display:none!important}
  .member-mobile-account{display:inline-flex!important}
  .member-panel{padding:0;align-items:stretch;place-items:stretch;background:rgba(12,12,12,.30)}
  .member-panel-card{width:100%;height:100svh;height:100dvh;min-height:100svh;min-height:100dvh;max-height:100svh;max-height:100dvh;border-radius:0;border:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(24px + env(safe-area-inset-top)) clamp(18px,4vw,34px) calc(30px + env(safe-area-inset-bottom))}
  .member-panel-close{top:calc(12px + env(safe-area-inset-top));right:clamp(14px,3vw,26px)}
  .member-auth-tabs{padding-right:48px;flex-wrap:wrap}
  .member-drawer{align-items:stretch;background:rgba(12,12,12,.24)}
  .member-drawer-card{width:100%;height:100svh;height:100dvh;max-height:100dvh;border-left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(28px + env(safe-area-inset-top)) clamp(18px,4vw,34px) calc(30px + env(safe-area-inset-bottom))}
  .member-account-tabs{position:sticky;top:0;z-index:2;background:rgba(255,253,248,.94);backdrop-filter:blur(12px)}
  .member-active{padding-bottom:0!important}
}

@media (max-width:760px){
  .nav-actions [data-member-action="open-contribution"]{display:none!important}
  .member-account-tabs{gap:5px}
  .member-account-tabs button{padding:10px 6px;font-size:12px}
}

/* === Mobile header menu + single review-sheet close glyph === */
.mobile-menu-wrap{position:relative;display:none;flex:0 0 auto}
.mobile-menu-toggle{display:none;width:40px;height:40px;border:1px solid rgba(17,20,26,.10);border-radius:12px;background:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.92);place-content:center;gap:4px;padding:0;cursor:pointer;color:var(--ink)}
.mobile-menu-bar{display:block;width:17px;height:2px;border-radius:999px;background:currentColor}
.mobile-header-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:10020;width:min(250px,calc(100vw - 24px));padding:8px;border:1px solid rgba(17,20,26,.10);border-radius:16px;background:rgba(255,253,248,.97);box-shadow:0 20px 50px rgba(17,20,26,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.mobile-header-menu.open{display:grid;gap:4px}
.mobile-header-menu[hidden]{display:none!important}
.mobile-menu-item{display:flex;width:100%;min-height:44px;align-items:center;border:0;border-radius:11px;background:transparent;padding:0 12px;color:var(--ink);font:inherit;font-size:13px;font-weight:780;text-align:left;text-decoration:none;cursor:pointer}
.mobile-menu-item:hover,.mobile-menu-item:focus-visible{background:rgba(17,20,26,.055);outline:none}
.mobile-menu-item[hidden]{display:none!important}

@media (max-width:760px){
  .nav-actions>.nav-search,
  .nav-actions>.nav-contact,
  .nav-actions>.member-auth-link{display:none!important}
  .mobile-menu-wrap{display:block}
  .mobile-menu-toggle{display:inline-grid}
  .nav-actions{gap:7px;max-width:none!important;overflow:visible}
  .nav-actions .nav-review{display:inline-flex!important;white-space:nowrap;min-height:40px;padding:0 12px;font-size:12px}
  .map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar .sheet-close{
    display:grid;place-items:center;padding:0;font-size:24px;line-height:1;color:#1f6feb;transform:translateX(8px)!important;text-align:center
  }
  .map-sheet-closebar .sheet-close::before,
  .map-sheet-closebar .sheet-close::after{content:none!important;display:none!important}
}
@media (min-width:761px){
  .mobile-menu-wrap,.mobile-menu-toggle,.mobile-header-menu{display:none!important}
}

/* === Locked-state clarity + mobile header dedupe === */
body[data-member-route="active"] [data-member-locked-map-hint]{display:none!important}
.map-sheet-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:2px}
.map-sheet-actions>.btn{margin:0}
@media (max-width:760px){
  .nav-actions > :not(.mobile-menu-wrap):not(.nav-review){display:none!important}
  .map-sheet-actions{display:grid;grid-template-columns:1fr 1fr}
  .map-sheet-actions>.btn{width:100%;justify-content:center}
}

/* === Review V2 unit identification + private photo gallery === */
.review-unit-meta{padding:10px 12px;border:1px solid rgba(255,90,54,.16);border-radius:13px;background:rgba(255,90,54,.07);color:#543226;font-size:12px;line-height:1.45}
.review-photo-block{display:grid;gap:10px}
.review-photo-toggle{appearance:none;justify-self:start;min-height:38px;padding:8px 12px;border:1px solid rgba(17,20,26,.10);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(15,23,42,.05)}
.review-photo-toggle:hover,.review-photo-toggle:focus-visible{border-color:rgba(255,90,54,.35);outline:none}
.review-photo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.review-photo-item{margin:0;overflow:hidden;border-radius:13px;background:#f4f1eb;aspect-ratio:4/3}
.review-photo-item img{display:block;width:100%;height:100%;object-fit:cover}
.review-photo-empty{grid-column:1/-1;color:var(--muted)}
.address-grid-v2{grid-template-columns:minmax(0,1fr) minmax(110px,.28fr)}
.address-grid-v2 .address-number{min-width:0}
@media (max-width:600px){.address-grid-v2{grid-template-columns:1fr}.review-photo-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.review-photo-item{flex:0 0 min(82vw,320px);scroll-snap-align:start}}

/* === Neutral unit metadata + clean central address CTA === */
.review-unit-meta {
  padding: 10px 12px;
  border: 1px solid rgba(17,20,26,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.68);
  color: #3f4650;
  font-size: 12px;
  line-height: 1.45;
}

.search-card .btn.btn-accent {
  background: #20242a;
  border: 1px solid #171a1f;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15,17,22,.14);
  transform: none;
}
.search-card .btn.btn-accent::before {
  content: none !important;
  display: none !important;
}
.search-card .btn.btn-accent:hover {
  background: #2a2f36;
  border-color: #20242a;
  box-shadow: 0 5px 14px rgba(15,17,22,.16);
  transform: none;
}
.search-card .btn.btn-accent:active {
  background: #171a1f;
  box-shadow: 0 2px 7px rgba(15,17,22,.14);
  transform: none;
}
.search-card .btn.btn-accent:focus-visible {
  outline: 3px solid rgba(32,36,42,.18);
  outline-offset: 2px;
  box-shadow: 0 4px 12px rgba(15,17,22,.14);
}

/* === Member review photo UX + connected sheet cleanup === */
#sheetSecondaryAction[hidden]{display:none!important}
.review-photo-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.review-photo-preview[hidden]{display:none!important}
.review-photo-preview-item{position:relative;margin:0;min-width:0;border:1px solid rgba(17,20,26,.10);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.05)}
.review-photo-preview-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#f2f3f5}
.review-photo-preview-item figcaption{padding:8px 10px 42px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.review-photo-remove{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:4px 9px;border:1px solid rgba(17,20,26,.12);border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.review-photo-remove:hover{background:#f5f6f8}
.review-photo-block{display:grid;gap:8px}
.review-photo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-height:92px}
.review-photo-gallery[data-photo-count="1"]{grid-template-columns:minmax(0,min(100%,360px))}
.review-photo-gallery[data-photo-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
.review-photo-skeleton{display:block;aspect-ratio:4/3;border-radius:12px;background:linear-gradient(100deg,#f0f1f3 20%,#f8f8f8 38%,#f0f1f3 56%);background-size:200% 100%;animation:review-photo-pulse 1.2s ease-in-out infinite}
@keyframes review-photo-pulse{to{background-position:-200% 0}}
.review-photo-item{position:relative;display:block;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#eef0f2;aspect-ratio:4/3;cursor:zoom-in}
.review-photo-item:nth-child(n+4){display:none}
.review-photo-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .18s ease}
.review-photo-item:hover img{transform:scale(1.015)}
.review-photo-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,15,19,.48);color:#fff;font-size:22px;font-weight:800}
.review-photo-empty{grid-column:1/-1;color:var(--muted);font-size:12px;margin:0}
.review-photo-lightbox[hidden]{display:none!important}
.review-photo-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px}
.review-photo-lightbox-backdrop{position:absolute;inset:0;background:rgba(8,10,13,.82);backdrop-filter:blur(8px)}
.review-photo-lightbox-dialog{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;width:min(1120px,94vw);height:min(82vh,820px);border-radius:18px;overflow:hidden;background:#11151a;box-shadow:0 24px 70px rgba(0,0,0,.38)}
.review-photo-lightbox-image{grid-column:2;display:block;max-width:100%;max-height:78vh;width:auto;height:auto;justify-self:center;object-fit:contain}
.review-photo-lightbox-close{position:absolute;z-index:2;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#15181d;font-size:26px;line-height:1;cursor:pointer}
.review-photo-lightbox-nav{width:42px;height:42px;border:0;border-radius:999px;background:rgba(255,255,255,.9);color:#15181d;font-size:30px;line-height:1;cursor:pointer;justify-self:center}
.review-photo-lightbox-prev{grid-column:1}.review-photo-lightbox-next{grid-column:3}
.review-photo-lightbox-count{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px}
body.review-photo-lightbox-open{overflow:hidden}
@media (max-width:760px){
  .review-photo-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-photo-gallery,.review-photo-gallery[data-photo-count="1"],.review-photo-gallery[data-photo-count="2"]{display:flex;max-width:none;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;padding-bottom:3px;min-height:0}
  .review-photo-item,.review-photo-item:nth-child(n+4){display:block;flex:0 0 min(76vw,280px);scroll-snap-align:start}
  .review-photo-more{display:none}
  .review-photo-lightbox{padding:0}
  .review-photo-lightbox-dialog{width:100vw;height:100dvh;border-radius:0;grid-template-columns:42px minmax(0,1fr) 42px}
  .review-photo-lightbox-image{max-height:88dvh}
}


/* === Connected review sheet — authoritative layout ===
   Keep the sheet proportional to the map, allow real scrolling,
   keep the close button inside the sheet, and show photos first. */

/* Restore the sheet's natural full width. Earlier "compact 640px" rules are removed. */
.map-sheet,
.map-shell.is-fullscreen .map-sheet {
  width: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y pinch-zoom !important;
  pointer-events: auto !important;
  box-sizing: border-box;
}

/* Normal map proportions. */
.map-sheet {
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  max-height: calc(100% - 36px) !important;
}

/* Fullscreen proportions, still using both left and right edges. */
.map-shell.is-fullscreen .map-sheet {
  left: max(18px, env(safe-area-inset-left)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  max-height: calc(100% - 36px) !important;
}

/* The review content uses the full width of the sheet. */
.map-sheet-body {
  display: block !important;
  min-width: 0;
}
.map-sheet-copy {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
.review-list,
.review-card,
.review-detail-grid {
  min-width: 0;
}

/* Close control:
   - inside the sheet
   - top-right
   - stays visible while the reviews scroll
   - no vertical offset, no translate hacks. */
.map-sheet-closebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  height: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.map-sheet-closebar .sheet-close,
.map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar .sheet-close,
.map-shell.is-fullscreen .map-sheet.show .sheet-close {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  text-align: center !important;
}

/* Reserve just the button width in the heading; review cards below remain full width. */
.map-sheet-head {
  padding-right: 46px !important;
}

/* In fullscreen the map's own fullscreen-exit button is at the far top-right.
   Keep the review close at the same vertical level but move it horizontally left,
   never below it. */
.map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar {
  top: 0 !important;
  padding-right: 48px !important;
}

/* Review photos are visually first inside each review. */
.review-card > .review-photo-block {
  margin: 0 0 14px !important;
  order: -1;
}
.review-card > .review-photo-block .review-photo-gallery {
  width: 100%;
  max-width: none;
}
.review-card > .review-photo-block .review-photo-gallery[data-photo-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}
.review-card > .review-photo-block .review-photo-gallery[data-photo-count="1"] .review-photo-item {
  width: 100%;
  max-height: 340px;
}
.review-card > .review-photo-block .review-photo-item img {
  object-fit: cover;
}

/* Horizontal photo browsing must not prevent vertical scrolling of the review sheet. */
.review-photo-gallery {
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y !important;
}

/* The primary action stays below the content without squeezing the review list. */
#sheetAction {
  margin-top: 14px;
}

@media (max-width: 760px) {
  .map-sheet,
  .map-shell.is-fullscreen .map-sheet {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-height: calc(100% - 20px) !important;
  }

  .map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar {
    top: 0 !important;
    padding-right: 46px !important;
  }

  .map-sheet-closebar .sheet-close,
  .map-shell.is-fullscreen .map-sheet.show .map-sheet-closebar .sheet-close {
    width: 38px !important;
    height: 38px !important;
    transform: none !important;
  }

  .map-sheet-head {
    padding-right: 48px !important;
  }

  .review-card > .review-photo-block {
    margin-bottom: 12px !important;
  }

  .review-card > .review-photo-block .review-photo-gallery,
  .review-card > .review-photo-block .review-photo-gallery[data-photo-count="1"],
  .review-card > .review-photo-block .review-photo-gallery[data-photo-count="2"] {
    display: flex;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 3px;
  }

  .review-card > .review-photo-block .review-photo-item,
  .review-card > .review-photo-block .review-photo-item:nth-child(n+4) {
    display: block;
    flex: 0 0 min(76vw, 280px);
  }
}


/* === Tiny final UI adjustments — isolated and non-structural === */

/* Phone + compact map only:
   keep the review close button at the same height, but move it left
   so it never overlaps the map fullscreen button. */
@media (max-width: 760px) {
  .map-shell:not(.is-fullscreen) .map-sheet.show .map-sheet-closebar {
    top: 0 !important;
    padding-right: 48px !important;
  }

  .map-shell:not(.is-fullscreen) .map-sheet.show .map-sheet-closebar .sheet-close {
    top: 0 !important;
    transform: none !important;
  }
}

/* Desktop hero only: stronger weight, no size/layout change. */
@media (min-width: 761px) {
  .hero-grid > :first-child > h1,
  .hero-grid > :first-child > h1 em {
    font-weight: 900 !important;
  }
}


/* === Final visual polish v2 — isolated changes only === */

/* Header logo:
   flat single-colour background, no darker rim, much less rounding. */
.brand-mark {
  background: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Desktop hero: genuinely heavier glyphs.
   font-weight alone was not visibly changing enough with the current font stack,
   so add a controlled 1px glyph stroke without changing size or layout. */
@media (min-width: 1021px) {
  .hero-grid > :first-child > h1 {
    font-weight: 1000 !important;
    -webkit-text-stroke: 1px #000000 !important;
    paint-order: stroke fill;
  }

  .hero-grid > :first-child > h1 em {
    font-weight: 1000 !important;
    -webkit-text-stroke: 0.9px currentColor !important;
    paint-order: stroke fill;
  }
}


/* Header brand mark only: transparent variant on the page.
   Favicons remain unchanged and keep their background. */
.brand-mark {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

.brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}



/* === International layer v1 === */
.jtms-language-switch {
  appearance: none;
  min-width: 42px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
}
.jtms-language-switch:hover { transform: translateY(-1px); }
.mobile-header-menu .jtms-language-switch {
  width: 100%;
  min-height: 44px;
  height: auto;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
}
@media (max-width: 760px) {
  .nav-actions > .jtms-language-switch { display: none; }
}


/* Remove locale switch buttons from the UI */
.jtms-language-switch {
  display: none !important;
}



/* === Final hero weight correction ===
   Both languages, desktop only.
   Deliberately does NOT change font size, line-height, spacing or layout. */
@media (min-width: 761px) {
  .hero-grid > :first-child > h1,
  .hero-grid > :first-child > h1 em {
    font-weight: 800 !important;
    font-variation-settings: "wght" 800 !important;
    paint-order: stroke fill !important;
  }

  .hero-grid > :first-child > h1 {
    -webkit-text-stroke: 2px currentColor !important;
  }

  .hero-grid > :first-child > h1 em {
    -webkit-text-stroke: 1.8px currentColor !important;
  }
}

/* === EN HERO AUTHORITATIVE RESET V4 ===
   Fixes the accidental oversized English hero.
   The size is explicitly restored to the normal desktop hero size.
   No grid, map, form, spacing, or other layout rules are changed. */
@media (min-width: 1021px) {
  .hero-grid > :first-child > h1 {
    font-size: clamp(48px, 4.55vw, 74px) !important;
    line-height: .99 !important;
    letter-spacing: -.048em !important;
    font-weight: 800 !important;
    font-variation-settings: "wght" 800 !important;
    -webkit-text-stroke: 2px currentColor !important;
    paint-order: stroke fill !important;
  }

  .hero-grid > :first-child > h1 em {
    font-size: inherit !important;
    line-height: .99 !important;
    letter-spacing: -.048em !important;
    font-weight: 800 !important;
    font-variation-settings: "wght" 800 !important;
    -webkit-text-stroke: 1.8px currentColor !important;
    paint-order: stroke fill !important;
  }
}


/* v41 — Keep mandatory map attribution discreet: only the native info button
   is visible at rest. Full data/licence credits open on demand. */
.maplibregl-ctrl-attrib.maplibregl-compact{
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 2px 9px rgba(17,24,39,.09)!important;
}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none!important}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{
  display:block!important;
  width:24px!important;
  height:24px!important;
  opacity:.64;
}
.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show,
.maplibregl-ctrl-attrib.maplibregl-compact:focus-within{
  width:auto!important;
  height:auto!important;
  max-width:min(78vw,620px)!important;
  min-height:24px!important;
  padding:4px 28px 4px 8px!important;
  overflow:visible!important;
}
.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show .maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib.maplibregl-compact:focus-within .maplibregl-ctrl-attrib-inner{display:block!important}


/* === 2026-08-26 v43 — cleaner review contribution controls === */
#memberPanel .member-panel-close{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  aspect-ratio:1/1;
  padding:0!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  font-size:0!important;
  flex:0 0 42px!important;
}
#memberPanel .member-panel-close::before{
  content:"×";
  display:block;
  font-size:26px;
  font-weight:500;
  line-height:1;
  transform:translateY(-1px);
}
#memberPanel [data-member-screen="contribute"]>h2{
  padding-right:52px;
}
#memberPanel .review-unlock-hint[hidden]{display:none!important}
@media(max-width:600px){
  #memberPanel [data-member-screen="contribute"] .modal-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    align-items:stretch!important;
  }
  #memberPanel [data-member-screen="contribute"] .modal-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    padding:8px 4px!important;
    border-radius:11px!important;
    font-size:10.5px!important;
    line-height:1.12!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

/* === 2026-08-26 v45 — iPhone account close + map credits only in fullscreen === */
@media(max-width:760px){
  /* Account drawer: same compact square close control as the contribution panel. */
  #memberDrawer .member-panel-close{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    font-size:0!important;
    flex:0 0 42px!important;
  }
  #memberDrawer .member-panel-close::before{
    content:"×";
    display:block;
    font-size:26px;
    font-weight:500;
    line-height:1;
    transform:translateY(-1px);
  }

  /* On phone the cartographic attribution control stays out of the normal map.
     The full credits remain in Conditions; the native disclosure control is
     exposed only once the main map enters fullscreen. */
  body:not(.map-fullscreen-open) .maplibregl-ctrl-attrib{
    display:none!important;
  }
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact{
    display:block!important;
  }
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show),
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact:focus-within:not(.maplibregl-compact-show){
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner,
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact:focus-within:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner{
    display:none!important;
  }
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show{
    width:auto!important;
    height:auto!important;
    max-width:min(82vw,620px)!important;
    max-height:none!important;
    min-height:24px!important;
    padding:4px 28px 4px 8px!important;
    overflow:visible!important;
  }
  body.map-fullscreen-open .map-shell.is-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{
    display:block!important;
  }
}

/* V55 — locked review: actions first, equal alignment, masked preview below */
.map-sheet.locked-review-sheet .map-sheet-body{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
}
.map-sheet.locked-review-sheet .map-sheet-actions{
  order:-1!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:10px!important;
  width:100%!important;
  margin:0!important;
}
.map-sheet.locked-review-sheet .map-sheet-actions:has(#sheetSecondaryAction[hidden]){
  grid-template-columns:1fr!important;
}
.map-sheet.locked-review-sheet .map-sheet-actions>.btn,
.map-sheet.locked-review-sheet #sheetAction,
.map-sheet.locked-review-sheet #sheetSecondaryAction{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0 14px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.1!important;
}
.map-sheet.locked-review-sheet .map-sheet-copy{
  order:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
@media(max-width:480px){
  .map-sheet.locked-review-sheet .map-sheet-actions{gap:8px!important}
  .map-sheet.locked-review-sheet .map-sheet-actions>.btn,
  .map-sheet.locked-review-sheet #sheetAction,
  .map-sheet.locked-review-sheet #sheetSecondaryAction{
    min-height:42px!important;
    height:42px!important;
    padding-inline:8px!important;
    font-size:12px!important;
  }
}

/* === 2026-08-26 v68 — Mobile/tablet account navigation scrolls away ===
   The account tabs stay at the top of the drawer content initially, but no longer
   remain pinned to the screen while scrolling sections such as My Reviews. */
@media (max-width:1024px){
  .member-drawer .member-account-tabs{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}


/* === V94 — Listing actions above rent history / similar properties === */
.owner-listing-primary-actions{
  display:grid;
  gap:10px;
  margin:16px 0 18px;
  align-items:stretch;
}
.owner-listing-primary-actions .btn,
.owner-listing-primary-actions .property-follow-button{
  width:100%;
  min-width:0;
  min-height:44px;
  margin:0!important;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
}
.owner-listing-primary-actions .owner-listing-contact-app{
  border:0;
}
.owner-listing-primary-actions a.btn{
  text-decoration:none;
}
.map-sheet.listing-detail-sheet > .map-sheet-body > .map-sheet-actions{
  display:none!important;
}
@media (min-width:761px){
  .owner-listing-primary-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
  }
  .owner-listing-primary-actions > *{
    height:100%;
  }
}
@media (max-width:760px){
  .owner-listing-primary-actions{
    grid-template-columns:1fr;
    gap:8px;
    margin:14px 0 16px;
  }
}

/* === Owner listing contact preference: platform-only contact === */
.owner-listing-contact.is-platform-only{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.owner-listing-contact.is-platform-only>span{
  color:rgba(23,23,23,.62);
  font-size:13px;
  line-height:1.45;
}
@media (min-width:761px){
  .owner-listing-primary-actions.is-platform-only{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* === v59 — small account-creation email reassurance under Cloudflare === */
.member-auth-commercial-note{
  margin:7px 2px 2px!important;
  padding:0!important;
  color:rgba(23,23,23,.58)!important;
  font-size:.78rem!important;
  line-height:1.35!important;
  text-align:left!important;
}
body[data-member-auth-mode="signin"] .member-auth-commercial-note{
  display:none!important;
}