:root{
    --navy:#101d2b;
    --navy-soft:#1a2a3d;
    --cream:#faf7f1;
    --cream-2:#f2ede3;
    --gold:#856530;
    --gold-soft:#c9a670;
    --ink:#1f2a37;
    --muted:#6b7280;
    --line:rgba(184,147,90,.35);
    --line-soft:rgba(31,42,55,.10);
    --serif:"Cormorant Garamond", "Playfair Display", Georgia, serif;
    --sans:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --gold-grad:linear-gradient(135deg,#e9d2a6 0%,#d3ac74 50%,#c29c62 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.6;font-weight:300;font-size:16px;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}

  /* type */
  h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:.005em;line-height:1.15}
  .eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500}
  .eyebrow.on-dark{color:var(--gold-soft)}
  .divider{display:inline-block;width:44px;height:1px;background:var(--gold);margin:14px 0 22px;vertical-align:middle}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:14px;padding:15px 28px;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
    border:none;color:#fff;background:var(--gold-grad);
    box-shadow:0 14px 28px -12px rgba(143,106,58,.55);
    transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}
  .btn:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(143,106,58,.65)}
  .btn.light{border:none;color:#fff;background:var(--gold-grad);box-shadow:0 14px 28px -12px rgba(0,0,0,.4)}
  .btn.light:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(0,0,0,.5)}
  .btn .arrow{width:22px;height:1px;background:currentColor;position:relative;transition:width .3s}
  .btn .arrow:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
  .btn:hover .arrow{width:30px}

  /* nav */
  .nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;transition:background .35s ease,padding .35s ease,box-shadow .35s ease}
  .nav.scrolled{background:rgba(16,29,43,.94);backdrop-filter:blur(10px);padding:14px 40px;box-shadow:0 1px 0 rgba(255,255,255,.05)}
  body.nav-open .nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  .brand{display:flex;align-items:center;gap:14px;line-height:1;color:#fff}
  .brand img{height:78px;width:auto;display:block;transition:height .35s ease}
  .nav.scrolled .brand img{height:58px}
  .brand .txt{display:flex;flex-direction:column}
  .brand .name{font-family:var(--serif);font-size:22px;letter-spacing:.02em}
  .brand .tag{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-top:5px;font-weight:400}
  .menu{display:flex;gap:36px;align-items:center}
  .menu a{color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;position:relative;padding:6px 0;opacity:.85;transition:opacity .25s}
  .menu a:hover{opacity:1;color:var(--gold-soft)}
  .menu a.active{color:var(--gold-soft);opacity:1}
  .menu a.active:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold-soft)}
  .burger{display:none;background:none;border:0;width:32px;height:24px;position:relative;cursor:pointer}
  .burger span{position:absolute;left:0;right:0;height:1px;background:#fff;transition:transform .3s,opacity .3s,top .3s}
  .burger span:nth-child(1){top:6px}
  .burger span:nth-child(2){top:12px}
  .burger span:nth-child(3){top:18px}
  .burger.open span:nth-child(1){top:12px;transform:rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){top:12px;transform:rotate(-45deg)}

  /* hero */
  .hero{position:relative;min-height:100vh;min-height:100svh;color:#fff;display:flex;align-items:center;padding:120px 40px 80px;overflow:hidden}
  .hero-bg{position:absolute;inset:0;background:url("img/hero.jpg") center/cover no-repeat;transform:scale(1.05);animation:zoom 18s ease-out forwards}
  @keyframes zoom{to{transform:scale(1)}}
  .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,29,43,.55) 0%,rgba(16,29,43,.35) 40%,rgba(16,29,43,.75) 100%);z-index:1}
  .hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%}
  .hero .kicker{font-family:var(--serif);font-size:48px;letter-spacing:.01em;margin-bottom:8px;font-weight:400}
  .hero h1{font-size:clamp(42px,6.2vw,84px);font-weight:400;line-height:1.05;margin-bottom:28px;max-width:900px;color:#eaf2fa;text-shadow:0 2px 4px rgba(4,10,20,.55),0 6px 26px rgba(4,10,20,.55)}
  .hero h1 em{font-style:italic;color:#f3d194;font-weight:400;text-shadow:0 2px 4px rgba(4,10,20,.55),0 6px 26px rgba(4,10,20,.55)}
  .hero .lead-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#f3d194;margin-bottom:20px;font-weight:500;text-shadow:0 1px 3px rgba(4,10,20,.85),0 2px 10px rgba(4,10,20,.7),0 6px 22px rgba(4,10,20,.55)}
  .hero p{max-width:520px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.95);margin-bottom:36px;font-weight:300;text-shadow:0 1px 3px rgba(4,10,20,.6),0 4px 18px rgba(4,10,20,.5)}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
  .scroll-cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
  .scroll-cue .line{width:1px;height:40px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

  /* sections */
  section{padding:110px 40px}
  .container{max-width:1240px;margin:0 auto}
  .container.narrow{max-width:900px}
  .section-head{text-align:center;margin-bottom:64px}
  .section-head .eyebrow{display:block}
  .section-head .eyebrow:after{content:"";display:block;width:40px;height:1px;background:var(--gold);opacity:.75;margin:18px auto 0}
  .section-head h2{font-size:clamp(32px,4vw,52px);margin-top:14px;font-weight:400}
  .section-head h2 em{font-style:italic;color:var(--gold);font-weight:400}
  .section-head p{color:var(--muted);max-width:640px;margin:22px auto 0;font-size:15px}

  /* intro */
  .intro{background:var(--cream)}
  .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  .intro-copy .eyebrow{display:block}
  .intro-copy h2{font-size:clamp(32px,3.6vw,48px);margin:14px 0 24px;font-weight:400;line-height:1.15}
  .intro-copy h2 em{font-style:italic;color:var(--gold);font-weight:400}
  .intro-copy p{color:var(--muted);margin-bottom:18px;font-size:15.5px;line-height:1.8}
  .intro-copy .focus{color:var(--ink);font-family:var(--serif);font-size:22px;font-style:italic;margin:26px 0 22px;padding-left:22px;border-left:1px solid var(--gold)}
  .intro-copy .places{color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.5;margin:20px 0 30px}
  .intro-visual{position:relative;aspect-ratio:4/5;background:url("img/mig-land-portrait.jpg") center/cover;box-shadow:0 30px 60px -30px rgba(16,29,43,.35)}
  .intro-visual:before{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.4);pointer-events:none}

  /* developments */
  .developments{background:var(--cream-2);padding:110px 40px 130px}
  .developments.alt{background:#fff}
  .dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:24px}
  .dev-card{position:relative;aspect-ratio:5/6;overflow:hidden;background:#000}
  .dev-card .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s ease}
  .dev-card:hover .img{transform:scale(1.06)}
  .dev-card .k{background-image:url("img/kat-card.jpg")}
  .dev-card .a{background-image:url("img/j31-forecourt.jpg")}
  .dev-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,29,43,0) 35%,rgba(16,29,43,.6) 65%,rgba(10,18,32,.96) 100%)}
  .dev-card .body{position:absolute;left:0;right:0;bottom:0;padding:38px;color:#fff;z-index:2}
  .dev-card .body .eyebrow{color:var(--gold-soft);display:block;margin-bottom:12px}
  .dev-card .body h3{color:#fff;font-size:36px;font-weight:400;letter-spacing:.02em;margin-bottom:6px}
  .dev-card .body h3 em{font-style:italic;font-weight:400}
  .dev-card .body .sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:6px}
  .dev-card .body .loc{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .dev-card .body .link{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);font-weight:500}
  .dev-card .body .link .arrow{width:22px;height:1px;background:currentColor;position:relative;transition:width .3s}
  .dev-card .body .link .arrow:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
  .dev-card:hover .link .arrow{width:34px}

  .dev-detail{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .dev-detail + .dev-detail{margin-top:96px}
  .dev-detail.reverse{direction:rtl}
  .dev-detail.reverse > *{direction:ltr}
  .dev-detail .txt .eyebrow{display:block;margin-bottom:12px}
  .dev-detail .txt h3{font-size:clamp(28px,3vw,40px);font-weight:400;margin-bottom:8px}
  .dev-detail .txt .sub{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
  .dev-detail .txt p{color:var(--muted);margin-bottom:16px;font-size:15px;line-height:1.85}
  .dev-detail .txt .tag{font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ink);margin:22px 0 26px}
  .dev-detail .visual{position:relative;aspect-ratio:5/4;background-size:cover;background-position:center;box-shadow:0 40px 78px -38px rgba(16,29,43,.46)}
  /* inset hairline frame — same treatment as .intro-visual, reads as a plate */
  .dev-detail .visual:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.38);pointer-events:none}
  /* wide renders (site plans, aerials) keep their full width — no side crop */
  .dev-detail .visual.wide{aspect-ratio:3/2}

  /* approach */
  .approach{background:var(--cream);padding:120px 40px}
  .principles{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:60px}
  .principle{padding:38px 24px 32px;background:var(--gold-grad);
    box-shadow:0 24px 48px -28px rgba(120,90,40,.5);
    transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
  .principle:hover{transform:translateY(-6px);box-shadow:0 34px 60px -26px rgba(120,90,40,.6)}
  .principle .num{font-family:var(--serif);font-size:16px;color:rgba(255,255,255,.8);letter-spacing:.16em;font-style:italic;margin-bottom:16px}
  .principle h4{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#fff;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.5)}
  .principle p{font-size:14px;color:rgba(255,255,255,.9);line-height:1.7}

  /* cambodia */
  .cambodia{position:relative;color:#fff;padding:150px 40px;background:url("img/cambodia-kohkong.jpg") center/cover fixed}
  .cambodia:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(16,29,43,.85),rgba(16,29,43,.6))}
  .cambodia-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;text-align:center}
  .cambodia h2{color:#fff;font-size:clamp(34px,4.4vw,56px);font-weight:400;margin:14px 0 30px}
  .cambodia h2 em{font-style:italic;color:var(--gold-soft);font-weight:400}
  .cambodia p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.85;max-width:720px;margin:0 auto 18px}
  .cambodia .close{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-soft);margin-top:30px}

  /* philosophy grid */
  .philosophy{background:var(--cream)}
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:60px;background:var(--line-soft)}
  .pillar{background:var(--cream);padding:44px 28px 40px;text-align:center}
  .pillar .icon{width:44px;height:44px;margin:0 auto 22px;color:var(--gold);display:flex;align-items:center;justify-content:center}
  .pillar .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.2}
  .pillar h4{font-family:var(--serif);font-size:19px;font-weight:500;margin-bottom:10px;letter-spacing:.02em}
  .pillar p{font-size:14px;color:var(--muted);line-height:1.65}

  /* journey */
  .journey{position:relative;color:#fff;padding:120px 40px;background:#0f1e2e url("img/mig-land.jpg") center/cover no-repeat;overflow:hidden}
  .journey:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,29,43,.85) 0%,rgba(10,18,32,.92) 100%);z-index:1}
  .journey > *{position:relative;z-index:2}
  .journey-inner{max-width:900px;margin:0 auto;text-align:center}
  .journey h2{color:#fff;font-size:clamp(32px,4vw,50px);font-weight:400;margin:14px 0 34px}
  .journey h2 em{color:var(--gold-soft);font-style:italic;font-weight:400}
  .journey p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.85;margin-bottom:18px}
  .journey .rule{width:60px;height:1px;background:var(--gold-soft);margin:34px auto 24px}
  .journey .focus-line{font-family:var(--serif);font-size:26px;font-style:italic;color:var(--gold-soft);margin:20px 0 6px}
  .journey .focus-sub{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:34px}

  /* impact */
  .impact{background:var(--cream)}
  .impact-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;margin-top:60px;background:var(--line-soft)}
  .imp{background:var(--cream);padding:28px 14px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}
  .imp .icon{width:32px;height:32px;margin:0 auto 14px;color:var(--gold)}
  .imp .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}

  /* leadership */
  .leadership{background:var(--cream)}
  .lead-grid{display:grid;grid-template-columns:190px 1fr;gap:44px;align-items:start;margin-top:8px}
  .lead-portrait{aspect-ratio:4/5;background:url("img/heiko.jpg") center 12%/cover}
  .lead-copy .eyebrow{display:block}
  .lead-copy h3{font-size:26px;font-weight:500;margin:0 0 6px}
  .lead-copy .role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500;line-height:1.7;margin-bottom:8px}
  .lead-copy .rule{width:44px;height:1px;background:var(--gold);margin:16px 0 20px}
  .lead-copy p{color:var(--muted);margin-bottom:14px;font-size:15px;line-height:1.8}
  .lead-copy .note{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink);line-height:1.6;margin:22px 0 24px;padding-left:20px;border-left:1px solid var(--gold)}

  /* compact investor CTA (developments page) */
  .investor-cta{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;max-width:960px;margin:70px auto 0;padding-top:44px;border-top:1px solid var(--line-soft)}
  .ic-portrait{width:88px;height:88px;background:url("img/heiko.jpg") center 12%/cover;flex-shrink:0}
  .ic-body .eyebrow{display:block;margin-bottom:10px}
  .ic-body p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:8px}
  .ic-name{font-family:var(--serif);font-size:19px;color:var(--ink)}
  .ic-name span{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}

  /* partnership */
  .partnership{background:var(--cream-2)}
  .partner-inner{max-width:900px;margin:0 auto;text-align:center}
  .partner-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;margin:34px 0 40px}
  .partner-tags span{padding:0 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-right:1px solid var(--line-soft);font-weight:500}
  .partner-tags span:last-child{border-right:0}

  /* closing */
  .closing{background:#0a1220 url("img/closing-coastline.jpg") center/cover no-repeat;color:#fff;padding:150px 40px;text-align:center;position:relative;overflow:hidden}
  .closing:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,32,.72) 0%,rgba(10,18,32,.9) 100%)}
  .closing-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
  .closing h2{color:#fff;font-size:clamp(36px,5vw,62px);font-weight:400;margin:14px 0 28px}
  .closing h2 em{color:var(--gold-soft);font-style:italic;font-weight:400}
  .closing p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.85;margin-bottom:16px;max-width:720px;margin-left:auto;margin-right:auto}
  .closing .tri{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-soft);margin:38px 0 8px}
  .closing .brandmark{margin:28px 0 34px}
  .closing .brandmark .name{font-family:var(--serif);font-size:34px;color:#fff}
  .closing .brandmark .sub{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-top:8px}
  .closing .cta-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px}

  /* footer */
  footer{background:linear-gradient(180deg,#101d2b 0%,#0a1220 100%);color:rgba(255,255,255,.7);padding:70px 40px 36px;font-size:13px;position:relative}
  footer:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);opacity:.5}
  .foot-logo{margin-bottom:22px}
  .foot-logo img{height:74px;width:auto;display:block}
  .foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px}
  .foot h5{font-family:var(--sans);color:#fff;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;margin-bottom:20px}
  .foot ul{list-style:none}
  .foot li{margin-bottom:10px;font-size:13px}
  .foot li a{color:rgba(255,255,255,.7);transition:color .2s}
  .foot li a:hover{color:var(--gold-soft)}
  .foot .brand-name{font-family:var(--serif);color:#fff;font-size:26px;margin-bottom:6px}
  .foot .brand-sub{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:20px}
  .foot .brand-desc{color:rgba(255,255,255,.6);line-height:1.7;font-size:13px}
  .foot-bottom{max-width:1240px;margin:56px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

  
  .foot-brand .foot-logo{height:96px;width:auto;margin-bottom:14px}
  @media (max-width:900px){
    .foot-brand .foot-logo{height:80px;margin:0 auto 14px}
  }

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  /* keep the 8-up strips readable between tablet and desktop */
  @media (max-width:1180px) and (min-width:901px){
    .impact-grid{grid-template-columns:repeat(4,1fr)}
    .pillars{grid-template-columns:repeat(4,1fr)}
    .principles{grid-template-columns:repeat(3,1fr)}
    .cap-grid{grid-template-columns:repeat(2,1fr)}
  }

  /* mobile */
  @media (max-width: 900px){
    section{padding:72px 22px}
    .nav{padding:14px 22px}
    /* backdrop-filter turns .nav into the containing block for its
       position:fixed children, which clips the slide-out panel to the
       nav's own height once .scrolled is applied. The bar is already
       94% opaque, so the blur buys nothing here. */
    .nav.scrolled{padding:10px 22px;backdrop-filter:none;-webkit-backdrop-filter:none}
    .brand img{height:58px}
    .nav.scrolled .brand img{height:48px}
    .brand .name{font-size:22px}
    .menu{position:fixed;top:0;right:-100%;bottom:0;width:min(86%,360px);
      background:linear-gradient(180deg,#14273b 0%,#0a1420 100%);
      flex-direction:column;justify-content:flex-start;align-items:stretch;
      padding:104px 0 32px;gap:0;overflow-y:auto;z-index:65;
      transition:right .38s cubic-bezier(.4,0,.2,1);
      box-shadow:-30px 0 60px -20px rgba(0,0,0,.55)}
    .menu.open{right:0}
    .menu a{display:flex;align-items:center;justify-content:space-between;
      padding:18px 28px;font-size:12px;letter-spacing:.2em;opacity:1;
      border-bottom:1px solid rgba(255,255,255,.07);transition:background .2s,color .2s}
    .menu a:first-child{border-top:1px solid rgba(255,255,255,.07)}
    .menu a:after{content:"";position:static;width:7px;height:7px;
      border-top:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft);
      border-left:0;border-bottom:0;background:none;transform:rotate(45deg);
      opacity:.45;flex:0 0 auto;transition:opacity .2s,transform .2s}
    .menu a:active{background:rgba(184,147,90,.10)}
    .menu a.active{color:var(--gold-soft);background:rgba(184,147,90,.09)}
    /* the desktop rule paints .active:after as an absolute 1px underline bar;
       it out-specifies .menu a:after, so restate the chevron here in full. */
    .menu a.active:after{content:"";position:static;left:auto;right:auto;bottom:auto;
      width:7px;height:7px;background:none;
      border-top:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft);
      border-left:0;border-bottom:0;transform:rotate(45deg);opacity:1}
    .burger{display:block;z-index:70}
    /* dim + lock the page behind the panel */
    body.nav-open{overflow:hidden}
    body.nav-open:before{content:"";position:fixed;inset:0;z-index:55;
      background:rgba(6,12,22,.55);backdrop-filter:blur(2px)}
    /* top pad clears the fixed logo; bottom pad reserves the band the cards overlay into */
    /* top-aligned: centring floated the copy way down the screen.
       bottom pad reserves the band the cards overlay into. */
    /* flex column + space-between: copy sits at the top, cards at the bottom of the image,
       and the gap between them absorbs whatever height the device has. No pixel math to
       drift between phones, which is what was causing the layout to look different on reload. */
    .hero{padding:104px 22px 22px;min-height:100vh;min-height:100svh;
      flex-direction:column;justify-content:space-between;align-items:stretch;gap:30px}
    .hero-inner{flex:0 0 auto;width:100%}
    /* breathing room above the headline and above the button */
    .hero .lead-label{margin-bottom:30px}
    .hero h1{margin-bottom:24px}
    .hero p{margin-bottom:46px}
    .hero .kicker{font-size:34px}
    .hero p{font-size:14px}
    .scroll-cue{display:none}
    .intro-grid{grid-template-columns:1fr;gap:44px}
    .intro-visual{aspect-ratio:4/3;order:-1}
    .investor-cta{grid-template-columns:1fr;gap:20px;text-align:center;justify-items:center;margin-top:48px;padding-top:34px}
    .ic-portrait{width:76px;height:76px}
    .lead-grid{grid-template-columns:1fr;gap:24px;justify-items:center}
    .lead-portrait{width:160px;aspect-ratio:4/5}
    .lead-copy{text-align:center}
    .lead-copy .rule{margin:16px auto 20px}
    .lead-copy .note{text-align:left;font-size:16px}
    .dev-grid{grid-template-columns:1fr;gap:22px}
    .dev-card{aspect-ratio:4/5}
    .dev-card .body{padding:26px}
    .dev-card .body h3{font-size:28px}
    .dev-detail{grid-template-columns:1fr;gap:30px}
    .dev-detail.reverse{direction:ltr}
    .dev-detail .visual{aspect-ratio:4/3;order:-1}
    .dev-detail .visual-mosaic{order:-1}
    .developments{padding:72px 22px 84px}
    .principles{grid-template-columns:1fr;gap:16px}
    .principle{padding:28px 24px}
    .cambodia{padding:90px 22px;background-attachment:scroll}
    .pillars{grid-template-columns:1fr 1fr;gap:1px}
    .pillar{padding:32px 18px}
    .impact-grid{grid-template-columns:1fr 1fr;gap:1px}
    .imp{padding:22px 10px;font-size:11px}
    .journey{padding:80px 22px}
    .journey .focus-line{font-size:22px}
    .partner-tags{flex-direction:column;gap:14px}
    .partner-tags span{border-right:0;padding:0}
    .closing{padding:88px 22px}
    footer{padding:56px 22px 28px}
    .foot-grid{grid-template-columns:1fr;gap:0;text-align:center}
    .foot-logo img{margin:0 auto}
    .foot .brand-desc{max-width:320px;margin:0 auto}
    /* brand block is not collapsible — it stays open above the accordions */
    .foot-brand-block{padding-bottom:30px}

    /* Navigation / Developments / Contact collapse into accordions */
    .foot.acc{text-align:left;border-top:1px solid rgba(255,255,255,.09)}
    .foot.acc h5{display:flex;align-items:center;justify-content:space-between;
      margin:0;padding:19px 2px;cursor:pointer;-webkit-user-select:none;user-select:none;
      transition:color .2s}
    .foot.acc h5:after{content:"";width:8px;height:8px;flex:0 0 auto;margin-right:5px;
      border-right:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft);
      transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease}
    .foot.acc.open h5{color:var(--gold-soft)}
    .foot.acc.open h5:after{transform:rotate(-135deg) translate(-2px,-2px)}
    .foot.acc ul{max-height:0;overflow:hidden;margin:0;
      transition:max-height .34s ease,opacity .3s ease;opacity:0}
    .foot.acc.open ul{max-height:340px;opacity:1;padding-bottom:14px}
    .foot.acc li{margin-bottom:15px;font-size:13.5px}
    .foot.acc li:last-child{margin-bottom:4px}
    .foot-bottom{flex-direction:column;text-align:center;font-size:10px;letter-spacing:.16em;margin-top:38px}
    .section-head{margin-bottom:44px}
    .btn{padding:13px 22px;font-size:10px}
    .cta-row{justify-content:center}
    .hero .cta-row{justify-content:flex-start}
  }
  @media (max-width: 480px){
    .hero h1{font-size:40px}
    .hero .kicker{font-size:28px}
    .dev-card .body h3{font-size:24px}
  }

  /* -------- page hero (secondary pages) -------- */
  .page-hero{position:relative;min-height:66vh;color:#fff;display:flex;align-items:flex-end;padding:160px 40px 90px;overflow:hidden}
  .page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:zoom 18s ease-out forwards}
  .page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,29,43,.62) 0%,rgba(16,29,43,.48) 40%,rgba(10,18,32,.88) 100%);z-index:1}
  .page-hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%}
  .page-hero .eyebrow{color:#f3d194;display:block;margin-bottom:14px;text-shadow:0 1px 3px rgba(4,10,20,.85),0 2px 10px rgba(4,10,20,.7),0 6px 22px rgba(4,10,20,.55)}
  .page-hero h1{font-family:var(--serif);font-size:clamp(38px,5vw,68px);font-weight:400;line-height:1.08;max-width:900px;color:#eaf2fa;margin-bottom:22px;text-shadow:0 2px 4px rgba(4,10,20,.55),0 6px 26px rgba(4,10,20,.55)}
  .page-hero h1 em{font-style:italic;color:#f3d194;font-weight:400;text-shadow:0 2px 4px rgba(4,10,20,.55),0 6px 26px rgba(4,10,20,.55)}
  .page-hero p.lede{max-width:640px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.95);font-weight:300;text-shadow:0 1px 3px rgba(4,10,20,.6),0 4px 18px rgba(4,10,20,.5)}

  /* long-form content column */
  .content{background:var(--cream)}
  .content .container{max-width:900px}
  .content h2{font-size:clamp(28px,3.4vw,42px);font-weight:400;margin:0 0 22px;line-height:1.15}
  .content h2 em{font-style:italic;color:var(--gold);font-weight:400}
  .content h3{font-family:var(--serif);font-size:26px;font-weight:500;margin:44px 0 14px;color:var(--ink)}
  .content p{color:var(--muted);margin-bottom:18px;font-size:16px;line-height:1.85}
  .content p strong{color:var(--ink);font-weight:500}
  .content .lede{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink);font-style:italic;margin:0 0 32px;padding-left:22px;border-left:1px solid var(--gold)}
  .content ul{list-style:none;padding:0;margin:22px 0 28px}
  .content ul li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line-soft);position:relative;color:var(--ink);font-size:15px}
  .content ul li:before{content:"";position:absolute;left:0;top:22px;width:12px;height:1px;background:var(--gold)}
  .content ul li:last-child{border-bottom:0}

  /* what-we-do grid */
  .capabilities{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 16%,var(--cream-2) 84%,var(--cream) 100%)}
  .cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
  .cap{position:relative;background:#fff;
    box-shadow:0 30px 60px -46px rgba(16,29,43,.36);
    transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
  /* gold hairline draws itself across the top edge on hover */
  .cap:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
    background:linear-gradient(90deg,var(--gold),var(--gold-soft));
    transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
  .cap:hover{transform:translateY(-6px);box-shadow:0 46px 82px -46px rgba(16,29,43,.5)}
  .cap:hover:before{transform:scaleX(1)}
  /* photo plate with scrim; the clip layer crops the zoom, kept separate from the icon so the icon badge isn't cut off */
  .cap-media{position:relative;aspect-ratio:4/3;background:var(--navy)}
  .cap-photo-clip{position:absolute;inset:0;overflow:hidden}
  .cap-photo{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
  .cap:hover .cap-photo{transform:scale(1.06)}
  .cap-media:after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,18,32,0) 45%,rgba(10,18,32,.62) 100%)}
  /* icon badge floats on the seam between photo and body, a small luxury-amenity touch */
  .cap .icon{width:56px;height:56px;padding:12px;color:var(--gold);background:#fff;
    border:1.5px solid var(--gold);border-radius:50%;
    box-shadow:0 0 0 5px rgba(184,147,90,.12);
    transition:background .45s ease,color .45s ease,border-color .45s ease}
  /* photo variant: icon floats as a badge on the seam between photo and body */
  .cap-media .icon{position:absolute;left:28px;bottom:-27px;z-index:2;
    box-shadow:0 14px 30px -12px rgba(16,29,43,.4),0 0 0 5px rgba(184,147,90,.12)}
  /* icon-only variant: icon sits inline at the top of the card body */
  .cap-body > .icon{margin-bottom:22px}
  .cap:hover .icon{background:var(--gold);color:#fff;border-color:var(--gold)}
  .cap .icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.1}
  .cap-body{padding:44px 28px 34px}
  .cap-body h4{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink);letter-spacing:.01em}
  .cap-body h4:after{content:"";display:block;width:26px;height:1px;background:var(--gold);
    margin:13px 0 14px;transition:width .45s cubic-bezier(.2,.7,.3,1)}
  .cap:hover .cap-body h4:after{width:54px}
  .cap-body p{font-size:14.5px;color:var(--muted);line-height:1.75}
  /* gold-gradient variant for icon-only capability cards (no photo) */
  .cap.gold{background:var(--gold-grad)}
  .cap.gold:before{display:none}
  .cap.gold .icon{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);color:#fff}
  .cap.gold:hover .icon{background:#fff;color:var(--gold)}
  .cap.gold .cap-body h4{color:#fff}
  .cap.gold .cap-body h4:after{background:rgba(255,255,255,.7)}
  .cap.gold .cap-body p{color:rgba(255,255,255,.9)}
  @media (hover:none){
    .cap:before{transform:scaleX(1)}
    .cap:hover{transform:none}
    .cap:hover .cap-photo{transform:none}
  }

  /* centred CTA closing out a section */
  .section-cta{text-align:center;margin-top:54px}
  @media (max-width:900px){.section-cta{margin-top:36px}}

  /* two-column feature list inside a development block */
  .dev-list{list-style:none;padding:0;margin:6px 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
  .dev-list li{position:relative;padding:9px 0 9px 22px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line-soft)}
  .dev-list li:before{content:"";position:absolute;left:0;top:18px;width:11px;height:1px;background:var(--gold)}
  @media (max-width:600px){.dev-list{grid-template-columns:1fr}}

  /* ARS31 render gallery — captioned plates below a development block */
  .ars-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px}
  .ars-gallery figure{position:relative;margin:0;overflow:hidden;background:var(--navy);
    box-shadow:0 30px 60px -46px rgba(16,29,43,.42)}
  .ars-gallery .shot{aspect-ratio:3/2;background-size:cover;background-position:center;
    transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
  .ars-gallery figure:hover .shot{transform:scale(1.05)}
  .ars-gallery figure:after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,18,32,0) 42%,rgba(10,18,32,.8) 100%)}
  .ars-gallery figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;
    color:#fff;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
  .ars-gallery figcaption:before{content:"";display:block;width:24px;height:1px;
    background:var(--gold-soft);margin-bottom:12px;transition:width .45s cubic-bezier(.2,.7,.3,1)}
  .ars-gallery figure:hover figcaption:before{width:48px}
  @media (max-width:900px){
    .ars-gallery{grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
    .ars-gallery figcaption{padding:14px 16px;font-size:10px;letter-spacing:.18em}
    .ars-gallery figcaption:before{margin-bottom:9px}
  }
  @media (max-width:520px){.ars-gallery{grid-template-columns:1fr}}

  /* portfolio two-up (About) */
  .portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:34px 0 40px}
  .portfolio-item{position:relative;display:block;background:#fff;overflow:hidden;border:1px solid var(--line-soft);
    box-shadow:0 30px 60px -40px rgba(16,29,43,.22);transition:transform .4s ease,box-shadow .4s ease}
  .portfolio-item:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
    background:linear-gradient(90deg,var(--gold),var(--gold-soft));
    transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
  .portfolio-item:hover:before{transform:scaleX(1)}
  .portfolio-item:hover{transform:translateY(-5px);box-shadow:0 40px 70px -40px rgba(16,29,43,.42)}
  .portfolio-item .pf-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--navy)}
  .portfolio-item .pf-body{padding:30px 30px 32px}
  .portfolio-item .pf-body .eyebrow{display:block;margin-bottom:10px}
  .portfolio-item h4{font-family:var(--serif);font-size:26px;font-weight:500;margin-bottom:6px;color:var(--ink)}
  .portfolio-item .pf-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
  .portfolio-item p{font-size:14.5px;color:var(--muted);line-height:1.75;margin-bottom:18px}
  .portfolio-item .link{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
  .portfolio-item .link .arrow{width:22px;height:1px;background:currentColor;position:relative;transition:width .3s}
  .portfolio-item .link .arrow:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
  .portfolio-item:hover .link .arrow{width:32px}
  @media (max-width:900px){
    .portfolio-grid{grid-template-columns:1fr;gap:24px;margin:26px 0 32px}
    .portfolio-item .pf-body{padding:24px 24px 26px}
  }

  /* timeline */
  .timeline{background:var(--cream)}
  .tl{max-width:820px;margin:40px auto 0;position:relative}
  .tl:before{content:"";position:absolute;left:110px;top:8px;bottom:8px;width:1px;background:var(--line);display:none}
  @media (min-width:720px){.tl:before{display:block}}
  .tl-row{display:grid;grid-template-columns:1fr;gap:14px;padding:26px 0;border-bottom:1px solid var(--line-soft)}
  @media (min-width:720px){.tl-row{grid-template-columns:120px 1fr;gap:40px;padding:34px 0}}
  .tl-row:last-child{border-bottom:0}
  .tl-year{font-family:var(--serif);font-size:22px;font-style:italic;color:var(--gold);position:relative}
  @media (min-width:720px){.tl-year:before{content:"";position:absolute;right:-31px;top:12px;width:10px;height:10px;border:1px solid var(--gold);border-radius:50%;background:var(--cream)}}
  .tl-body h4{font-family:var(--serif);font-size:22px;font-weight:500;margin-bottom:8px}
  .tl-body p{color:var(--muted);font-size:15px;line-height:1.8}

  /* stats strip — dark navy so the gold figures read as a deliberate close, not another cream block */
  .stats{position:relative;background:var(--navy);padding:90px 40px;overflow:hidden}
  .stats:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 100% at 50% 0%,rgba(184,147,90,.16) 0%,rgba(16,29,43,0) 55%)}
  .stats-grid{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
  .stat .n{font-family:var(--serif);font-size:clamp(30px,3vw,44px);color:var(--gold-soft);font-weight:400;line-height:1.05;margin-bottom:10px}
  .stat .l{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:500}

  /* dark gold-accent band — a full-bleed statement close, echoes the homepage journey/closing sections */
  .band{position:relative;background:var(--navy) center/cover no-repeat;color:#fff;padding:130px 40px;text-align:center;overflow:hidden}
  .band:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 100% at 50% 0%,rgba(184,147,90,.18) 0%,rgba(16,29,43,0) 55%),
      linear-gradient(180deg,rgba(10,18,32,.86) 0%,rgba(10,18,32,.93) 100%)}
  .band .container{position:relative;z-index:1}
  .band .rule{width:56px;height:1px;background:var(--gold-soft);margin:26px auto}
  .band h2,.band h3{color:#f3ecdd;font-weight:400;margin:26px 0 10px}
  .band h2 em,.band h3 em{color:var(--gold-soft);font-style:italic}
  .band p{color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.85;max-width:640px;margin:16px auto 0}
  .band .lede{font-family:var(--serif);font-size:22px;line-height:1.5;font-style:italic;color:#f3ecdd;
    text-align:left;max-width:600px;margin:22px auto 0;padding-left:22px;border-left:1px solid var(--gold-soft)}
  .band .btn{margin-top:30px}
  @media (max-width:900px){.band{padding:84px 22px}}

  /* mosaic of six plates filling a dev-detail visual slot, in place of a single image */
  .visual-mosaic{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    box-shadow:0 40px 78px -38px rgba(16,29,43,.46)}
  .visual-mosaic figure{position:relative;margin:0;aspect-ratio:1;overflow:hidden;background:var(--navy)}
  .visual-mosaic .shot{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
  .visual-mosaic figure:hover .shot{transform:scale(1.08)}
  .visual-mosaic figure:after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,18,32,0) 55%,rgba(10,18,32,.72) 100%)}
  .visual-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 12px;
    color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;line-height:1.3}
  .visual-mosaic figcaption:before{content:"";display:block;width:16px;height:1px;background:var(--gold-soft);
    margin-bottom:6px;transition:width .45s cubic-bezier(.2,.7,.3,1)}
  .visual-mosaic figure:hover figcaption:before{width:28px}
  @media (max-width:520px){.visual-mosaic{grid-template-columns:repeat(2,1fr)}}

  /* alternate a content block to pure white against neighbouring cream sections */
  .content.alt{background:#fff}

  /* contact card */
  .contact-card{background:var(--cream);padding:110px 40px}
  .contact-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
  .contact-block{background:#fff;padding:44px 40px;box-shadow:0 30px 60px -40px rgba(16,29,43,.25)}
  .contact-block h3{font-family:var(--serif);font-size:24px;font-weight:500;margin-bottom:6px}
  .contact-block .role{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
  .contact-block p{color:var(--muted);margin-bottom:12px;font-size:15px}
  .contact-block a{color:var(--ink)}
  .contact-block .item{padding:14px 0;border-top:1px solid var(--line-soft);font-size:14px;letter-spacing:.02em;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
  .contact-block .item .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .contact-block .item.address{align-items:flex-start}
  .contact-block .item.address span:last-child{text-align:right;line-height:1.65;font-size:13px}
  .contact-block .item.address .k{padding-top:2px;white-space:nowrap}

  @media (max-width:900px){
    .page-hero{min-height:52vh;padding:120px 22px 60px}
    .content .container{padding:0}
    section.content, section.capabilities, section.timeline, section.contact-card{padding:70px 22px}
    .visual-mosaic{gap:6px}
    .cap-grid{grid-template-columns:1fr;gap:20px;margin-top:34px}
    .cap-body{padding:34px 24px 30px}
    .stats-grid{grid-template-columns:1fr 1fr;gap:28px}
    .stats{padding:50px 22px}
    .contact-grid{grid-template-columns:1fr;gap:26px}
    .contact-block{padding:32px 26px}
  }

  /* mobile-only development cards directly under the hero.
     Same visual language as the desktop .dev-card: photo, gradient, text on top.
     Hidden on desktop. No .reveal class - must be visible the moment the page lands. */
  .dev-peek{display:none}
  @media (max-width:900px){
    .dev-peek{display:grid;gap:16px;padding:0;margin:0;background:transparent;
      position:relative;z-index:5;flex:0 0 auto}
    .peek-card{position:relative;display:block;aspect-ratio:2.2/1;overflow:hidden;border:1px solid var(--gold)}
    .peek-img{position:absolute;inset:0;background-size:cover;background-position:center;display:block}
    .peek-img.k{background-image:url("img/kat-villa.jpg")}
    .peek-img.a{background-image:url("img/j31-forecourt.jpg")}
    .peek-card:after{content:"";position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(8,16,26,0) 34%,rgba(8,16,26,.5) 68%,rgba(8,16,26,.82) 100%)}
    .peek-body{position:absolute;left:16px;right:14px;bottom:12px;z-index:2;display:block}
    .peek-eyebrow{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
      color:var(--gold-soft);font-weight:500;margin-bottom:7px}
    .peek-name{display:block;font-family:var(--serif);font-size:24px;font-weight:500;
      line-height:1;color:#fff;letter-spacing:.01em;margin-bottom:5px}
    .peek-sub{display:block;font-size:11px;letter-spacing:.04em;line-height:1.4;color:rgba(255,255,255,.82)}
    .peek-arrow{position:absolute;right:14px;bottom:18px;z-index:2;width:20px;height:1px;
      background:var(--gold-soft);display:block}
    .peek-arrow:after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
      border-top:1px solid var(--gold-soft);border-right:1px solid var(--gold-soft);transform:rotate(45deg)}
  }

  /* --- open mobile menu: full-width panel, logo centred at top, close button far right --- */
  @media (max-width:900px){
    /* panel was min(86%,360px), which left the logo outside it and clipped */
    .menu{width:100%;max-width:none;padding:108px 0 32px;box-shadow:none}

    body.nav-open .brand{position:fixed;left:50%;top:18px;transform:translateX(-50%);
      z-index:71;margin:0;gap:0}
    body.nav-open .brand img{height:56px}

    body.nav-open .burger{position:fixed;top:32px;right:22px;z-index:72}

    /* kill the tap-highlight / focus box that framed the X */
    .burger{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
      background:none;border:0;outline:none}
    .burger:focus{outline:none}
    .burger:focus-visible{outline:1px solid var(--gold-soft);outline-offset:6px}
  }

  /* --- very narrow screens: Galaxy Fold cover, small Androids --- */
  @media (max-width:400px){
    .hero{padding:94px 16px 16px;gap:24px}
    .hero .lead-label{font-size:9.5px;letter-spacing:.18em;margin-bottom:20px}
    .hero h1{font-size:33px;margin-bottom:18px}
    .hero p{font-size:13.5px;line-height:1.65;margin-bottom:30px}
    .btn{padding:12px 18px;font-size:9.5px;letter-spacing:.16em;gap:10px}
    .dev-peek{gap:12px}
    .peek-card{aspect-ratio:2.5/1}
    .peek-body{left:13px;right:12px;bottom:10px}
    .peek-eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:4px}
    .peek-name{font-size:20px;margin-bottom:3px}
    .peek-sub{font-size:10px}
    .peek-arrow{right:12px;bottom:14px;width:16px}
  }

  /* --- short viewports: keep hero copy + cards on one screen without crowding --- */
  @media (max-width:900px) and (max-height:730px){
    .hero{padding-top:86px;gap:20px}
    .hero .lead-label{margin-bottom:16px}
    .hero h1{margin-bottom:14px}
    .hero p{margin-bottom:24px}
    .dev-peek{gap:10px}
    .peek-card{aspect-ratio:2.8/1}
    .peek-name{font-size:19px}
  }

  /* ===== KATHARENA master plan + KATHARENA Club (v20) ===== */
  .kat-plan{width:100%;max-width:760px;margin:72px auto 0;background:#fff;border:1px solid var(--line-soft);box-shadow:0 40px 78px -44px rgba(16,29,43,.42)}
  .kat-plan a{display:block}
  .kat-plan img{width:100%;height:auto}
  .kat-plan figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px 24px;border-top:1px solid var(--line-soft);
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .kat-plan figcaption span:first-child{color:var(--gold);font-weight:500}
  .portfolio-item .pf-img.pf-plan{background-position:center bottom}

  .club{background:var(--cream);padding:110px 40px 130px;scroll-margin-top:70px}
  .club .section-head p{max-width:700px}
  .club-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}
  .club-card{margin:0;background:#f4f1ea;box-shadow:0 40px 78px -44px rgba(16,29,43,.42)}
  .club-card img,.club-teaser .ct-img img{width:100%;height:auto}
  .club-txt .eyebrow{display:block;margin-bottom:12px}
  .club-txt h3,.club-teaser h3{font-size:clamp(28px,3vw,40px);font-weight:400;margin-bottom:20px}
  .club-txt h3 em,.club-teaser h3 em{font-style:italic;color:var(--gold);font-weight:400}
  .club-txt p{color:var(--muted);margin-bottom:16px;font-size:15px;line-height:1.85}
  .club-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:80px}
  .club-panel{position:relative;background:#fff;border:1px solid var(--line-soft);padding:38px 36px 34px}
  .club-panel:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold-grad)}
  .club-panel.feature{background:var(--navy);border-color:var(--navy)}
  .club-panel .eyebrow{display:block;margin-bottom:10px}
  .club-panel.feature .eyebrow{color:var(--gold-soft)}
  .club-panel h4{font-family:var(--serif);font-size:26px;font-weight:500;margin-bottom:14px;color:var(--ink)}
  .club-panel.feature h4{color:#fff}
  .club-panel p{color:var(--muted);font-size:14.5px;line-height:1.8;margin-bottom:14px}
  .club-panel.feature p{color:rgba(255,255,255,.72)}
  .club-panel p.small{font-size:13px;line-height:1.75;margin-bottom:0}
  .club-list{list-style:none;padding:0;margin:4px 0 0}
  .club-list li{position:relative;padding:11px 0 11px 24px;font-size:14px;line-height:1.7;color:var(--ink);border-bottom:1px solid var(--line-soft)}
  .club-list li:last-child{border-bottom:0}
  .club-list li:before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--gold)}
  .club-panel.feature .club-list li{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.12)}
  .club-panel.feature .club-list li:before{background:var(--gold-soft)}
  .club-fees{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14px}
  .club-fees th,.club-fees td{text-align:left;padding:12px 10px 12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
  .club-fees thead th{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
  .club-fees tbody th{font-weight:500;color:var(--ink)}
  .club-fees tbody th span{display:block;font-weight:300;font-size:12.5px;color:var(--muted)}
  .club-fees td{font-family:var(--serif);font-size:20px;color:var(--ink);white-space:nowrap}
  .club-cta{text-align:center;max-width:780px;margin:80px auto 0}
  .club-cta .eyebrow{display:block;margin-bottom:14px}
  .club-cta > p{color:var(--muted);font-size:15px;line-height:1.85;margin-bottom:28px}
  .club-cta p.club-terms{font-size:12px;line-height:1.75;color:var(--muted);opacity:.85;margin:34px 0 0}

  .club-txt .club-card-benefits{margin:6px 0 14px}
  .club-txt .club-card-benefits li{font-family:var(--serif);font-size:18px}
  .club-txt p.small,.club-teaser p.small.club-note{font-size:12.5px;letter-spacing:.04em;color:var(--muted);opacity:.9;margin-bottom:0}
  .club-teaser p.small.club-note{margin:-12px 0 24px}
  .club-teaser{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;background:#fff;border:1px solid var(--line-soft);padding:40px}
  .club-teaser .ct-img{display:block;background:#f4f1ea}
  .club-teaser .eyebrow{display:block;margin-bottom:12px}
  .club-teaser p{color:var(--muted);margin-bottom:24px;font-size:15px;line-height:1.85}

  @media (max-width:900px){
    .kat-plan{max-width:none;margin-top:48px}
    .kat-plan figcaption{padding:14px 16px;font-size:10px;letter-spacing:.14em}
    .club{padding:72px 22px 84px}
    .club-intro{grid-template-columns:1fr;gap:30px}
    .club-grid{grid-template-columns:1fr;gap:20px;margin-top:48px}
    .club-panel{padding:30px 22px 26px}
    .club-cta{margin-top:52px}
    .club-teaser{grid-template-columns:1fr;gap:26px;padding:20px 20px 28px;margin-top:56px}
  }
  @media (max-width:480px){
    .club-fees td{font-size:17px}
    .club-fees th,.club-fees td{padding-right:6px}
  }