/* ===== ROOT ===== */
    :root {
      --gold: #f5c518;
      --gold-deep: #d9a908;
      --gold-soft: #fbe8a6;
      --gold-wash: #fdf6df;
      --gold-line: #efd98a;
      --gold-hi: #ffd94a;
      --ink: #1c1810;
      --ink-2: #5c5545;
      --ink-3: #948b76;
      --ink-4: #b8b09a;
      --ivory: #fbf7ee;
      --cream: #f6efe0;
      --cream-2: #efe6d3;
      --card: #ffffff;
      --line: #e9e0cd;
      --line-2: #f2ebda;
      --red: #e0512a;
      --green: #3c7d53;
      --green-wash: #e7f0e6;
      --r: 20px;
      --r-sm: 13px;
      --sh-sm: 0 1px 2px rgba(28,24,16,.04), 0 8px 20px -12px rgba(28,24,16,.16);
      --sh: 0 2px 4px rgba(28,24,16,.04), 0 20px 44px -22px rgba(28,24,16,.24);
      --sh-lg: 0 40px 80px -44px rgba(28,24,16,.42);
      --sh-gold: 0 24px 54px -26px rgba(217,169,8,.6);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: "Inter", system-ui, sans-serif;
      font-weight: 400;
      color: var(--ink);
      background: var(--ivory);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    .serif { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.01em; }
    h1, h2, h3, h4 { letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-weight: 700; }
    a { text-decoration: none; color: inherit; }
    svg { display: block; }
    ::selection { background: var(--gold); color: var(--ink); }
    .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
    .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
    .rv.in { opacity: 1; transform: none; }

    /* ===== BOUTONS ===== */
    .btn {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: inherit; font-weight: 600; cursor: pointer;
      border-radius: 12px; transition: .2s; border: 1px solid transparent;
      font-size: 14.5px; padding: 13px 24px;
    }
    .btn svg { width: 16px; height: 16px; }
    .b-ink { background: var(--ink); color: var(--ivory); }
    .b-ink:hover { background: #000; transform: translateY(-2px); box-shadow: var(--sh); }
    .b-gold { background: var(--gold); color: var(--ink); border-color: var(--gold-line); }
    .b-gold:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: var(--sh-gold); }
    .b-line { background: var(--card); border-color: var(--line); color: var(--ink); }
    .b-line:hover { border-color: var(--ink); }
    .b-lineInk { background: transparent; border-color: rgba(28,24,16,.28); color: var(--ink); }
    .b-lineInk:hover { background: rgba(28,24,16,.05); }
    .lg { padding: 15px 28px; font-size: 15px; }

    /* ===== NAV ===== */
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: 16px 0; transition: .28s; }
    .nav.stuck { padding: 9px 0; }
    .nav-in {
      max-width: 1200px; margin: 0 auto; padding: 8px 8px 8px 20px;
      display: flex; align-items: center; gap: 14px;
      background: rgba(251, 247, 238, .7);
      backdrop-filter: blur(22px) saturate(150%);
      -webkit-backdrop-filter: blur(22px) saturate(150%);
      border: 1px solid rgba(233, 224, 205, .8);
      border-radius: 100px; box-shadow: var(--sh-sm); transition: .28s;
    }
    .nav.stuck .nav-in { background: rgba(255, 255, 255, .92); box-shadow: var(--sh); }
    .logo { display: flex; align-items: center; gap: 9px; }
    .lb {
      width: 34px; height: 34px; flex: none; display: grid; place-items: center;
      border-radius: 10px;
      background: radial-gradient(120% 120% at 30% 25%, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
      box-shadow: inset 0 0 0 2px var(--card), 0 4px 10px -4px rgba(217, 169, 8, .7);
    }
    .lb img { width: 18px; height: 18px; object-fit: contain; }
    .lt { display: flex; flex-direction: column; line-height: 1.08; }
    .lt b { font-weight: 700; font-size: 14px; letter-spacing: -.02em; }
    .lt small { font-size: 7.5px; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
    .nlinks { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
    .nlinks a {
      font-size: 14px; font-weight: 500; color: var(--ink-2);
      padding: 9px 14px; border-radius: 100px; transition: .15s; white-space: nowrap;
    }
    .nlinks a:hover { background: var(--gold-wash); color: var(--ink); }
    .nlinks a.on { color: var(--ink); font-weight: 600; }
    .nav-act { margin-left: auto; display: flex; align-items: center; gap: 9px; }

    /* ===== HERO (design Ade8) ===== */
    .hero{position:relative;overflow:hidden;display:flex;flex-direction:column;
      height:100vh;                 /* baseline for all browsers */
      height:-webkit-fill-available;/* iOS Safari: excludes the address bar */
      height:100svh;                /* modern: small viewport height, no cutoff */
      min-height:520px;max-height:900px}
    /* animated background layer */
    .hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:0;pointer-events:none;overflow:hidden}
    .hero-bg .blob{position:absolute;border-radius:50%;-webkit-filter:blur(60px);filter:blur(60px);opacity:.9}
    .hero-bg .b1{width:52vw;height:52vw;top:-16vw;right:-10vw;
      background:radial-gradient(circle,rgba(245,197,24,.55),rgba(245,197,24,.10) 55%,transparent 72%);
      animation:drift1 12s ease-in-out infinite}
    .hero-bg .b2{width:34vw;height:34vw;bottom:-10vw;left:-8vw;
      background:radial-gradient(circle,rgba(245,197,24,.30),transparent 66%);
      animation:drift2 14s ease-in-out infinite}
    .hero-bg .b3{width:22vw;height:22vw;top:30%;left:24%;
      background:radial-gradient(circle,rgba(255,217,74,.22),transparent 68%);
      animation:drift3 16s ease-in-out infinite}
    /* faint drifting dot grid */
    .hero-bg .grid{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;inset:-40px;opacity:.5;
      background-image:radial-gradient(rgba(28,24,16,.05) 1px, transparent 1.6px);
      background-size:30px 30px;animation:gridpan 24s linear infinite}
    /* shimmer sweep */
    .hero-bg .sheen{position:absolute;top:0;bottom:0;width:40%;left:-40%;
      background:linear-gradient(105deg,transparent,rgba(255,255,255,.28) 50%,transparent);
      animation:sheen 7s ease-in-out 1.2s infinite}
    @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,4vw) scale(1.08)}}
    @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-3vw) scale(1.1)}}
    @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,3vw) scale(1.14)}}
    @keyframes gridpan{0%{transform:translate(0,0)}100%{transform:translate(30px,30px)}}
    @keyframes sheen{0%{left:-40%}55%,100%{left:120%}}

    /* spacer so content clears the fixed nav */
    .hero-navspace{flex:0 0 auto;height:78px}

    /* content row: text left, building right; both anchored so building base meets the separator */
    .hero-main{flex:1 1 auto;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
      gap:24px;align-items:stretch;max-width:1200px;width:100%;margin:0 auto;padding:0 32px;min-height:0}

    /* left copy, vertically centered */
    .hero-copy{align-self:center;padding-bottom:24px}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--ink-2);
      background:var(--card);border:1px solid var(--gold-line);padding:7px 8px 7px 14px;border-radius:100px;box-shadow:var(--sh-sm)}
    .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--gold-deep);animation:pl 2.2s infinite}
    .eyebrow b{background:var(--ink);color:var(--ivory);padding:3px 11px;border-radius:100px;font-size:11px;font-weight:600}
    @keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
    .hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.03;margin-top:20px;font-weight:400}
    .hero h1 .l1,.hero h1 .l2{display:block;font-family:"Fraunces",Georgia,serif;font-weight:500}
    .hero h1 .l3{display:block;font-family:"Inter",sans-serif;font-weight:800;letter-spacing:-.04em;margin-top:2px}
    .hero p.lead{font-size:clamp(14px,1.15vw,17px);color:var(--ink-2);margin-top:18px;max-width:46ch;line-height:1.6}
    .hero-cta{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap}
    /* inline trust line beside the single CTA */
    .trust{display:flex;align-items:center;gap:11px}
    .trust .stack{display:flex}
    .trust .stack span{width:30px;height:30px;border-radius:50%;border:2px solid var(--ivory);margin-left:-9px;
      display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink);
      background:radial-gradient(120% 120% at 30% 25%,var(--gold-hi),var(--gold) 60%,var(--gold-deep))}
    .trust .stack span:first-child{margin-left:0}
    .trust .stack span.more{background:var(--ink);color:var(--ivory)}
    .trust .tt{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
    .trust .tt b{color:var(--ink);font-weight:700}
    .hero-meta{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}
    .hero-meta .m{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:500}
    .hero-meta .m svg{width:17px;height:17px;color:var(--gold-deep)}
    .hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line)}

    /* right stage: building sits ON the base line */
    .hero-stage{position:relative;align-self:stretch;min-height:0}
    /* decorative small filled dots that fill the space around the building */
    .stage-decor{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:1;pointer-events:none}
    .stage-decor .dot{position:absolute;border-radius:50%;background:var(--gold);opacity:.7}
    .stage-decor .d1{width:7px;height:7px;top:12%;right:10%;animation:floatA 5s ease-in-out infinite}
    .stage-decor .d2{width:5px;height:5px;top:26%;right:34%;animation:floatB 6s ease-in-out infinite .3s}
    .stage-decor .d3{width:6px;height:6px;top:7%;right:44%;animation:floatA 6.5s ease-in-out infinite 1s}
    .stage-decor .d4{width:5px;height:5px;top:40%;right:6%;animation:floatB 5.5s ease-in-out infinite .6s}
    .stage-decor .d5{width:7px;height:7px;top:18%;right:2%;animation:floatA 5.8s ease-in-out infinite .4s}
    .stage-decor .d6{width:4px;height:4px;top:34%;right:22%;animation:floatB 4.8s ease-in-out infinite .2s}
    .stage-decor .d7{width:5px;height:5px;top:20%;right:24%;animation:floatA 6.2s ease-in-out infinite .8s}
    .stage-decor .d8{width:6px;height:6px;top:31%;right:48%;animation:floatB 5.2s ease-in-out infinite 1.1s}
    @keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-11px,-20px)}}
    @keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(13px,-16px)}}
    .hero-photo-glow{position:absolute;right:-12%;bottom:2%;width:108%;padding-bottom:108%;height:0;border-radius:50%;z-index:0;
      background:radial-gradient(circle,rgba(245,197,24,.58),rgba(245,197,24,.12) 46%,transparent 70%);
      filter:blur(38px);-webkit-filter:blur(38px);animation:glowpulse 7s ease-in-out infinite}
    @supports (aspect-ratio:1){.hero-photo-glow{padding-bottom:0;height:auto;aspect-ratio:1}}
    @keyframes glowpulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
    .bld-photo{position:absolute;right:-14%;bottom:0;width:145%;height:auto;max-height:112%;z-index:2;
      object-fit:contain;object-position:right bottom;
      -webkit-filter:drop-shadow(0 24px 26px rgba(28,24,16,.22)) contrast(1.02);
      filter:drop-shadow(0 24px 26px rgba(28,24,16,.22)) contrast(1.02);transform-origin:bottom center}
    /* grounding shadow ellipse under the building, sitting on the line */
    .bld-shadow{position:absolute;right:-6%;bottom:-6px;width:84%;height:30px;z-index:0;border-radius:50%;
      background:radial-gradient(ellipse at center,rgba(28,24,16,.24),transparent 70%);-webkit-filter:blur(6px);filter:blur(6px)}

    /* floating cream/gold chips */
    .chip{position:absolute;background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:13px;
      padding:10px 13px;box-shadow:var(--sh-gold);display:flex;align-items:center;gap:10px;z-index:4;
      opacity:0;transform:translateY(10px);
      /* CSS-only fallback reveal (plays regardless of JS) */
      animation:chin .6s cubic-bezier(.16,1,.3,1) 1.4s forwards;white-space:nowrap}
    .chip .ci{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
    .chip .ci svg{width:15px;height:15px}
    .chip .ci.ok{background:var(--gold);color:var(--ink)}
    .chip .ci.up{background:var(--gold-hi);color:var(--ink)}
    .chip .ci.occ{background:var(--gold);color:var(--ink)}
    .chip b{font-size:12px;font-weight:700;color:var(--ink);display:block}
    .chip span{font-size:10px;color:var(--ink-2)}
    .occbar{display:block;width:96px;height:6px;border-radius:6px;background:var(--gold-soft);margin-top:4px;overflow:hidden}
    .occbar i{display:block;height:100%;width:0;background:var(--gold-deep);border-radius:6px;transition:width 1.6s cubic-bezier(.16,1,.3,1)}
    /* JS-enhanced: staggered entrance + gentle float once .hero.in is set */
    .hero.in .ch1{animation:chin .5s cubic-bezier(.16,1,.3,1) .5s forwards, flt 5s ease-in-out 1.2s infinite}
    .hero.in .ch2{animation:chin .5s cubic-bezier(.16,1,.3,1) .9s forwards, flt 5.4s ease-in-out 1.8s infinite}
    .hero.in .ch3{animation:chin .5s cubic-bezier(.16,1,.3,1) 1.3s forwards, flt 5.8s ease-in-out 2.4s infinite}
    @keyframes chin{to{opacity:1;transform:translateY(0)}}
    @keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    .ch1{top:6%;left:12%}
    .ch2{top:40%;right:-3%}
    .ch3{bottom:9%;left:6%}

    /* ===== SEPARATOR = base of the building (soft, barely-there) ===== */
    .hero-sep{position:relative;z-index:3;flex:0 0 auto;height:1px;margin:0 auto;width:100%;border:0;
      background:linear-gradient(90deg,transparent 0%,rgba(196,182,150,.35) 30%,rgba(196,182,150,.45) 50%,rgba(196,182,150,.35) 70%,transparent 100%)}
    /* small faint node, subtly marking the centre */
    .hero-sep::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:5px;height:5px;border-radius:50%;background:var(--gold-line);opacity:.6;
      box-shadow:0 0 0 3px var(--ivory)}


    @media (prefers-reduced-motion: reduce){
      .hero-bg .b1,.hero-bg .b2,.hero-bg .b3,.hero-bg .grid,.hero-bg .sheen,
      .hero-photo-glow,.eyebrow i,.stage-decor .dot,
      .chip,.hero.in .ch1,.hero.in .ch2,.hero.in .ch3{animation:none}
      .chip{opacity:1;transform:none}
    }

    /* ===== responsive ===== */
    @media (max-width:1080px){
      .hero{height:100svh;min-height:560px}
      .hero-navspace{height:76px}
      .hero-main{grid-template-columns:1fr;gap:6px;padding-top:6px;align-content:center}
      .hero-copy{order:2;align-self:auto;text-align:center;padding-bottom:12px}
      .hero-copy .eyebrow{margin:0 auto}
      .hero h1{margin-top:14px}
      .hero p.lead{margin-left:auto;margin-right:auto;margin-top:12px}
      .hero-cta{margin-top:16px}.hero-meta{margin-top:14px}
      .hero-cta,.hero-meta{justify-content:center}
      .hero-stage{order:1;height:clamp(200px,30vh,340px)}
      .bld-photo{left:50%;right:auto;transform:translateX(-50%);width:min(460px,80%);object-position:center bottom}
      .hero-photo-glow{right:auto;left:50%;transform:translateX(-50%);width:min(380px,72%)}
      .bld-shadow{left:50%;right:auto;transform:translateX(-50%);width:64%}
      .nlinks{display:none}
    }
    @media (max-width:680px){
      .hero-stage{order:1;height:clamp(170px,26vh,260px)}
      .hero h1{font-size:clamp(30px,8.4vw,42px)}
      .hero p.lead{font-size:14px;margin-top:10px}
      .hero-cta{margin-top:14px}.hero-meta{margin-top:12px}
      .ch1{top:2%;left:1%}.ch2{top:38%;right:0}.ch3{bottom:6%;left:2%}
      .chip{padding:8px 11px}
      .nav-act .b-line{display:none}
    }
    /* ===== STRIP ===== */
    .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream); padding: 20px 0; }
    .strip-in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
    .strip-in b { color: var(--ink); font-weight: 700; }
    .strip-in .pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--card); border: 1px solid var(--line);
      padding: 6px 14px; border-radius: 100px;
      font-weight: 600; font-size: 12.5px; box-shadow: var(--sh-sm);
    }
    .strip-in .pill svg { width: 14px; height: 14px; color: var(--gold-deep); }

    /* ===== SECTION ===== */
    .sec { padding: 76px 0; }
    .sec.cream { background: var(--cream); }
    .sec.ivory { background: var(--ivory); }
    .shead { max-width: 600px; margin-bottom: 42px; }
    .shead.ctr { margin-left: auto; margin-right: auto; text-align: center; }
    .kick {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
      text-transform: uppercase; color: var(--gold-deep);
    }
    .kick::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }
    .shead.ctr .kick::before { display: none; }
    .shead h2 {
      font-size: clamp(26px, 3.2vw, 38px);
      margin-top: 14px;
      font-family: "Fraunces", Georgia, serif;
      font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
    }
    .shead h2 b { font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -.04em; }
    .shead p { font-size: 15.5px; color: var(--ink-2); margin-top: 13px; line-height: 1.6; }

    /* ===== FEATURES ===== */
    .fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .fc {
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--r); padding: 28px;
      transition: .24s; position: relative; overflow: hidden;
    }
    .fc::after {
      content: ""; position: absolute; left: 0; top: 0;
      height: 3px; width: 100%; background: var(--gold);
      transform: scaleX(0); transform-origin: left; transition: transform .3s;
    }
    .fc:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--gold-line); }
    .fc:hover::after { transform: scaleX(1); }
    .fc .fi {
      width: 50px; height: 50px; border-radius: 14px;
      background: var(--gold-wash); border: 1px solid var(--gold-line);
      color: var(--gold-deep); display: grid; place-items: center; margin-bottom: 18px;
    }
    .fc .fi svg { width: 24px; height: 24px; }
    .fc h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .fc p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

    /* ===== FEAT SHOWCASE ===== */
    .feat-showcase { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .feat-hero {
      background: linear-gradient(160deg, #fffefb, var(--cream));
      border: 1px solid var(--gold-line); border-radius: 24px;
      padding: 36px; position: relative; overflow: hidden; box-shadow: var(--sh);
    }
    .feat-hero::before {
      content: ""; position: absolute; top: -120px; right: -100px;
      width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 197, 24, .28), transparent 62%);
      filter: blur(20px);
    }
    .fh-tag {
      position: relative; display: inline-flex;
      font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--gold-deep);
      background: var(--gold-wash); border: 1px solid var(--gold-line);
      padding: 6px 13px; border-radius: 100px;
    }
    .feat-hero h3 {
      position: relative; font-family: "Fraunces", serif;
      font-weight: 500; font-size: 25px; margin-top: 16px;
    }
    .feat-hero p { position: relative; font-size: 14.5px; color: var(--ink-2); margin-top: 10px; max-width: 38ch; line-height: 1.6; }
    .feat-hero .btn { position: relative; margin-top: 20px; }
    .fh-preview {
      position: relative; margin-top: 24px;
      background: var(--card); border: 1px solid var(--line);
      border-radius: 16px; padding: 14px; box-shadow: var(--sh-sm);
    }
    .fp-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line-2); }
    .fp-row:nth-child(2) { border-bottom: none; }
    .fp-ch {
      width: 38px; height: 38px; border-radius: 11px;
      display: grid; place-items: center; font-size: 10px; font-weight: 800;
      background: linear-gradient(150deg, var(--gold-hi), var(--gold));
      color: var(--ink); border: 1px solid var(--gold-line); flex: none;
    }
    .fp-ch.pend { background: var(--cream-2); color: var(--ink-3); border-color: var(--line); }
    .fp-b { flex: 1; }
    .fp-b b { font-size: 13px; font-weight: 700; display: block; }
    .fp-b small { font-size: 11px; color: var(--ink-3); }
    .fp-tag { font-size: 10px; font-weight: 800; padding: 5px 11px; border-radius: 100px; }
    .fp-tag.ok { background: var(--green-wash); color: var(--green); }
    .fp-tag.wt { background: var(--gold-wash); color: var(--gold-deep); }
    .fp-bar { padding: 12px 8px 4px; }
    .fp-bar span { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
    .fp-bar i { display: block; height: 8px; border-radius: 8px; background: var(--cream-2); margin-top: 8px; overflow: hidden; }
    .fp-bar i b {
      display: block; height: 100%; border-radius: 8px;
      background: linear-gradient(90deg, var(--gold), var(--gold-deep));
      width: 0 !important; transition: width 1.3s cubic-bezier(.16, 1, .3, 1);
    }
    .feat-hero.in .fp-bar i b { width: 72% !important; }
    /* full-width promo: text left, preview right on wide screens */
    .feat-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
    .feat-hero::before { top: -140px; right: -120px; }
    .fh-tag, .feat-hero h3, .feat-hero p, .feat-hero .btn { grid-column: 1; }
    .feat-hero h3 { margin-top: 14px; }
    .fh-preview { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; }

    /* all feature cards in one uniform, balanced grid (5+5 on desktop) */
    .feat-side { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
    .feat-side .fc { padding: 22px; display: flex; flex-direction: column; }
    .feat-side .fc .fi { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 13px; }
    .feat-side .fc .fi svg { width: 21px; height: 21px; }
    .feat-side .fc h3 { font-size: 15px; margin-bottom: 6px; }
    .feat-side .fc p { font-size: 12.5px; }

    /* ===== SPLIT ===== */
    .split { padding: 76px 0; background: var(--cream); }
    .split-in { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
    .split-l {
      background: var(--card); border: 1px solid var(--line);
      border-radius: 24px; padding: 42px 40px;
      position: relative; overflow: hidden; box-shadow: var(--sh);
    }
    .split-l::before {
      content: ""; position: absolute; left: 0; top: 40px; bottom: 40px;
      width: 4px; background: var(--gold); border-radius: 0 4px 4px 0;
    }
    .split-l h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.8vw, 32px); margin-top: 14px; line-height: 1.12; }
    .split-l p { color: var(--ink-2); font-size: 15px; margin-top: 16px; line-height: 1.65; }
    .split-l .punch {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 22px; background: var(--ink); color: var(--ivory);
      padding: 11px 20px; border-radius: 100px; font-weight: 600; font-size: 13.5px;
    }
    .split-l .punch svg { width: 16px; height: 16px; color: var(--gold); }
    .split-r { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
    .cmp-h { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
    .cmp {
      display: flex; align-items: center; gap: 14px;
      padding: 15px 18px; border-radius: 14px;
      font-size: 13.5px; background: var(--card);
      border: 1px solid var(--line); box-shadow: var(--sh-sm);
    }
    .cmp.bad { color: var(--ink-2); }
    .cmp.bad .ci { background: var(--cream-2); color: var(--red); }
    .cmp.good { color: var(--ink); font-weight: 600; border-color: var(--gold-line); background: var(--gold-wash); }
    .cmp.good .ci { background: var(--gold); color: var(--ink); }
    .cmp .ci { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
    .cmp .ci svg { width: 15px; height: 15px; }

    /* ===== SPACES ===== */
    .sp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .spc { border-radius: var(--r); padding: 36px; position: relative; overflow: hidden; transition: .24s; display: flex; flex-direction: column; }
    .spc:hover { transform: translateY(-4px); box-shadow: var(--sh); }
    .spc.gold {
      background: linear-gradient(155deg, var(--gold-hi), var(--gold) 62%, var(--gold-deep));
      border: 1px solid var(--gold-line); box-shadow: var(--sh-gold);
    }
    .spc.ink { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); position: relative; }
    .spc.ink::before {
      content: ""; position: absolute; left: 36px; right: 36px; top: 0;
      height: 3px; background: var(--gold-line); border-radius: 0 0 3px 3px;
    }
    .spc .badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; padding: 7px 14px;
      border-radius: 100px; margin-bottom: 20px; width: max-content;
    }
    .spc.gold .badge { background: rgba(28, 24, 16, .1); color: var(--ink); }
    .spc.ink .badge { background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold-line); }
    .spc h3 { font-size: 23px; font-family: "Fraunces", Georgia, serif; font-weight: 500; }
    .spc.ink h3 { color: var(--ink); }
    .spc>p { font-size: 14px; margin-top: 8px; line-height: 1.55; }
    .spc.gold>p { color: var(--ink); opacity: .78; }
    .spc.ink>p { color: var(--ink-2); }
    .spc ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 22px 0 26px; }
    .spc li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; }
    .spc.gold li { color: var(--ink); }
    .spc.ink li { color: var(--ink-2); }
    .spc li .ck { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; flex: none; }
    .spc.gold li .ck { background: rgba(28, 24, 16, .12); color: var(--ink); }
    .spc.ink li .ck { background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold-line); }
    .spc li .ck svg { width: 11px; height: 11px; }
    .spc .btn { margin-top: auto; }

    /* ===== STEPS ===== */
    .stepwrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
    .stepwrap::before {
      content: ""; position: absolute; top: 29px; left: 8%; right: 8%;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--gold-line) 0 10px, transparent 10px 18px);
      z-index: 0;
    }
    .stp { position: relative; z-index: 1; text-align: left; }
    .stp .n {
      width: 58px; height: 58px; border-radius: 16px;
      background: var(--card); border: 1px solid var(--line);
      box-shadow: var(--sh-sm); display: grid; place-items: center;
      font-family: "Fraunces", serif; font-weight: 600;
      font-size: 20px; color: var(--gold-deep); margin-bottom: 18px;
    }
    .stp:first-child .n { background: var(--gold); border-color: var(--gold-line); color: var(--ink); }
    .stp h4 { font-size: 16px; font-weight: 700; margin-bottom: 7px; }
    .stp p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

    /* ===== WHY ===== */
    .wgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .wc {
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--r); padding: 28px;
      display: grid; grid-template-columns: auto 1fr;
      gap: 16px; align-items: start; transition: .2s;
    }
    .wc:hover { border-color: var(--gold-line); box-shadow: var(--sh); }
    .wc .wi {
      width: 48px; height: 48px; border-radius: 13px;
      background: var(--gold-wash); border: 1px solid var(--gold-line);
      color: var(--gold-deep); display: grid; place-items: center; flex: none;
    }
    .wc .wi svg { width: 23px; height: 23px; }
    .wc h4 { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
    .wc p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

    /* ===== FAQ ===== */
    .faqwrap { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; align-items: start; }
    .faq-l { position: sticky; top: 120px; }
    .faq-l h2 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(24px, 3vw, 34px); }
    .faq-l p { font-size: 14.5px; color: var(--ink-2); margin-top: 13px; line-height: 1.6; }
    .faq-l .btn { margin-top: 22px; }
    .fq {
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--r-sm); margin-bottom: 11px;
      overflow: hidden; transition: .18s;
    }
    .fq.open { border-color: var(--gold-line); box-shadow: var(--sh-sm); }
    .fq-q {
      width: 100%; text-align: left; background: none; border: none;
      font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
      padding: 20px 24px; cursor: pointer;
      display: flex; align-items: center; gap: 16px;
    }
    .fq-q .ic {
      margin-left: auto; width: 26px; height: 26px;
      border-radius: 8px; background: var(--gold-wash);
      border: 1px solid var(--gold-line); display: grid;
      place-items: center; flex: none; transition: .22s; color: var(--gold-deep);
    }
    .fq-q .ic svg { width: 14px; height: 14px; }
    .fq.open .fq-q .ic { background: var(--gold); transform: rotate(45deg); }
    .fq-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.16, 1, .3, 1); }
    .fq-a p { padding: 0 24px 22px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; max-width: 70ch; }
    .fq.open .fq-a { max-height: 280px; }

    /* ===== CTA ===== */
    .cta { padding: 40px 0 80px; }
    .cta-box {
      background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
      border-radius: 28px; padding: 68px 44px;
      text-align: center; position: relative; overflow: hidden;
    }
    .cta-box::before {
      content: ""; position: absolute; inset: 0; opacity: .35;
      background-image: linear-gradient(rgba(28, 24, 16, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 24, 16, .05) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    .cta-box::after {
      content: ""; position: absolute; right: -90px; bottom: -140px;
      width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 64%);
    }
    .cta-in { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
    .cta-in h2 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
    .cta-in p { font-size: 16px; color: var(--ink); opacity: .82; margin-top: 13px; }
    .cta-b { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

    /* ===== FOOTER ===== */
    .foot { background: var(--ink); color: #a8a091; padding: 64px 0 0; }
    .foot-in { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 42px; }
    .foot .lt b { color: var(--ivory); }
    .foot .lt small { color: #7d7566; }
    .foot-brand p { font-size: 13px; margin-top: 16px; max-width: 34ch; line-height: 1.7; }
    .foot-tag { margin-top: 16px; font-family: "Fraunces", serif; font-weight: 500; font-size: 14.5px; color: var(--gold); }
    .foot-col h5 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--ivory); margin-bottom: 15px; }
    .foot-col a, .foot-col span {
      display: flex; align-items: center; gap: 9px;
      font-size: 13px; color: #a8a091; margin-bottom: 11px; transition: .15s;
    }
    .foot-col a:hover { color: var(--gold); }
    .foot-col svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
    .foot-bar {
      border-top: 1px solid rgba(255, 255, 255, .09);
      padding: 20px 0; display: flex; justify-content: space-between;
      font-size: 12px; color: #7d7566; flex-wrap: wrap; gap: 10px;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1080px) {
      .split-in, .faqwrap { grid-template-columns: 1fr; gap: 40px; }
      .fgrid { grid-template-columns: 1fr 1fr; }
      .sp2 { grid-template-columns: 1fr; }
      .stepwrap { grid-template-columns: 1fr 1fr; gap: 32px; }
      .stepwrap::before { display: none; }
      .wgrid { grid-template-columns: 1fr; }
      .faq-l { position: static; }
      .nlinks { display: none; }
      .feat-hero { grid-template-columns: 1fr; gap: 22px; }
      .fh-preview { grid-column: 1; grid-row: auto; margin-top: 4px; }
      .feat-side { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 680px) {
      .fgrid, .stepwrap, .feat-side { grid-template-columns: 1fr; }
      .spc ul { grid-template-columns: 1fr; }
      .split-in { padding: 32px 24px; }
      .foot-in { grid-template-columns: 1fr 1fr; gap: 26px; }
      .sec, .split, .cta { padding: 50px 0; }
      .cta-box { padding: 40px 22px; }
      .nav-act .btn { padding: 8px 14px; font-size: 12px; }
    }
    /* ============================================================
   COMPLÉMENT RESPONSIVE — à coller à la fin du fichier existant
   N'ajoute que des cas non couverts par les breakpoints actuels
   (1080px / 680px). Aucune règle existante n'est modifiée.
   ============================================================ */


/* ===== PETITS TÉLÉPHONES (<400px) ===== */
@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  .hero-main { padding: 0 18px; }
  .nav-in { padding: 6px 6px 6px 14px; }
  .lb { width: 30px; height: 30px; }
  .lt b { font-size: 12.5px; }
  .hero h1 { font-size: clamp(26px, 9vw, 34px); }
  .hero p.lead { font-size: 13px; }
  .hero-cta { gap: 10px; }
  .trust .tt { font-size: 11px; }
  .btn { padding: 11px 18px; font-size: 13px; }
  .chip { padding: 7px 9px; }
  .chip b { font-size: 11px; }
  .chip span { font-size: 9px; }
  .occbar { width: 76px; }
  .fgrid, .stepwrap, .feat-side, .sp2, .wgrid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .split-l { padding: 28px 22px; }
}

/* ===== MODE PAYSAGE MOBILE (hauteur réduite) ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { height: auto; min-height: 100svh; max-height: none; padding-bottom: 24px; }
  .hero-navspace { height: 64px; }
  .hero-main { grid-template-columns: 1fr 1fr; }
  .hero-copy { text-align: left; padding-bottom: 0; }
  .hero-copy .eyebrow { margin: 0; }
  .hero-cta, .hero-meta { justify-content: flex-start; }
  .hero-stage { height: clamp(160px, 60vh, 320px); }
  .ch1, .ch2, .ch3 { display: none; } /* évite le chevauchement des chips en paysage bas */
}

/* ===== TABLETTES INTERMÉDIAIRES (681px–900px), affinage ===== */
@media (min-width: 681px) and (max-width: 900px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .feat-side { grid-template-columns: repeat(2, 1fr); }
  .stepwrap { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SÉCURITÉ ANTI-DÉBORDEMENT GLOBALE ===== */

.wrap, .hero-main { width: 100%; }
/* ============================================
   SECTION ANNONCES PUBLIQUES - ADEXPER
   À coller à la fin de votre style.css
   ============================================ */

/* ===== SECTION ===== */
.annonces-section {
    position: relative;
    padding: 96px 0 80px;
    background: var(--ivory);
    /* Compense la nav fixe lors du scroll vers #annonces */
    scroll-margin-top: 100px;
}

.annonces-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===== TITRE DE SECTION ===== */
.annonces-section .section-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: clamp(26px, 3.2vw, 38px);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.annonces-section .section-title::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--gold);
    border-radius: 3px;
    margin: 0 auto 18px;
}

.annonces-section .section-subtitle {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.6;
    text-align: center;
    max-width: 560px;
    margin: 14px auto 0;
}

/* ===== GRILLE DES ANNONCES ===== */
.annonces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    min-height: 200px; /* Évite le saut si vide */
}

/* ===== MESSAGE DE CHARGEMENT ===== */
.annonces-grid .loading-text,
.annonces-grid .annonce-loading {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 14.5px;
    color: var(--ink-3);
    padding: 60px 20px;
    font-family: "Inter", sans-serif;
}

.annonce-loading i {
    font-size: 24px;
    color: var(--gold-deep);
    margin-bottom: 12px;
    display: block;
}

.annonce-loading p {
    margin: 0;
}

/* ===== ÉTAT VIDE ===== */
.annonce-empty,
.annonce-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 32px;
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--r);
    max-width: 560px;
    margin: 0 auto;
}

.annonce-empty i,
.annonce-error i {
    font-size: 40px;
    color: var(--gold-deep);
    margin-bottom: 18px;
    display: block;
    opacity: .7;
}

.annonce-error i {
    color: var(--red);
}

.annonce-empty h3,
.annonce-error h3 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -.01em;
}

.annonce-empty p,
.annonce-error p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

.annonce-error .btn {
    margin-top: 6px;
}

/* ===== CARTE D'ANNONCE ===== */
.annonce-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1),
                box-shadow .28s cubic-bezier(.16, 1, .3, 1),
                border-color .2s;
    position: relative;
    box-shadow: var(--sh-sm);
}

.annonce-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh);
    border-color: var(--gold-line);
}

/* ===== IMAGE ===== */
.annonce-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--cream-2);
    overflow: hidden;
}

@supports not (aspect-ratio: 4 / 3) {
    .annonce-image {
        height: 0;
        padding-bottom: 75%;
    }
}

.annonce-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.annonce-card:hover .annonce-image img {
    transform: scale(1.05);
}

/* Badge "Disponible" */
.annonce-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gold);
    color: var(--ink);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 12px -4px rgba(217, 169, 8, .6);
}

.annonce-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}

/* ===== CONTENU ===== */
.annonce-content {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.annonce-content h3 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 10px;
    /* Empêche un titre trop long de casser la grille */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.annonce-location {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-3);
    margin: 0 0 12px;
    line-height: 1.4;
}

.annonce-location i,
.annonce-location svg {
    color: var(--gold-deep);
    font-size: 13px;
    flex: none;
}

.annonce-location-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annonce-price {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
}

.annonce-price::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-2px);
}

.annonce-desc {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== ACTIONS ===== */
.annonce-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.annonce-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 11px 16px;
    font-size: 13.5px;
    gap: 7px;
}

.annonce-actions .btn i {
    font-size: 12px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
    .annonces-section {
        padding: 80px 0 60px;
    }

    .annonces-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 40px;
    }
}

@media (max-width: 680px) {
    .annonces-section {
        padding: 64px 0 48px;
        scroll-margin-top: 80px;
    }

    .annonces-section .container {
        padding: 0 20px;
    }

    .annonces-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 32px;
    }

    .annonce-content {
        padding: 20px 20px 22px;
    }

    .annonce-content h3 {
        font-size: 18px;
    }

    .annonce-price {
        font-size: 18px;
    }

    .annonce-actions {
        flex-direction: column;
    }

    .annonce-actions .btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .annonces-section .container {
        padding: 0 18px;
    }

    .annonce-image {
        aspect-ratio: 5 / 4;
    }
}