/* ============ TOKENS · scene: ein Hoteldirektor geht um 22 Uhr durch die
     frisch übergebene Etage, Messinglicht der Wandleuchten auf neuen Stoffen,
     unten läuft die Bar weiter ============ */
  :root{
    --bg:        oklch(0.165 0.034 268);   /* Mitternachtsblau, Logo-Lapis abgedunkelt */
    --bg-2:      oklch(0.205 0.038 266);   /* Paneel */
    --bg-3:      oklch(0.245 0.04 264);    /* Linienflächen */
    --ink:       oklch(0.928 0.016 86);    /* warmes Elfenbein */
    --muted:     oklch(0.648 0.024 268);   /* blau getöntes Grau */
    --accent:    oklch(0.776 0.112 88);    /* Champagner-Gold */
    --accent-2:  oklch(0.6 0.092 82);      /* tiefes Messing */
    --hair:      oklch(0.34 0.038 266);    /* Haarlinien */
    --halo:      oklch(0.14 0.034 268);
    --serif: "Cinzel", serif;
    --sans: "Jost", sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scrollbar-width:thin;scrollbar-color:var(--accent-2) var(--bg)}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--accent);color:var(--halo)}
  a{color:inherit;text-decoration:none}
  img,video{display:block;width:100%;height:100%;object-fit:cover}

  /* ============ GRAIN + VIGNETTE ============ */
  .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:.055;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    animation:grain 9s steps(6) infinite}
  @keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,1%)}}

  /* ============ HEADER ============ */
  header{
    position:fixed;top:0;left:0;right:0;z-index:80;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,4vw,56px);
    transition:background .5s ease, padding .5s ease, border-color .5s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{background:oklch(0.165 0.034 268 / .94);border-bottom-color:var(--hair);padding-top:10px;padding-bottom:10px}
  .brand{display:flex;align-items:center;gap:14px}
  .brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 8px oklch(0 0 0 / .5))}
  .brand span{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.34em;padding-left:.34em}
  .btn{
    display:inline-block;font-family:var(--sans);font-weight:400;font-size:13px;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent);border:1px solid var(--accent-2);
    padding:13px 26px;position:relative;overflow:hidden;
    transition:color .4s ease;
  }
  .btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.77,0,.18,1);z-index:-1}
  .btn:hover{color:var(--halo)}
  .btn:hover::before{transform:scaleX(1)}
  .hr-right{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
  .lang{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;color:var(--muted)}
  .lang button{background:none;border:none;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--muted);padding:4px 2px;transition:color .3s}
  .lang button:hover{color:var(--ink)}
  .lang button.on{color:var(--accent)}
  .lang i{font-style:normal;color:var(--hair)}

  /* ============ ETAGEN-RAIL (scrollytelling spine) ============ */
  .rail{position:fixed;right:clamp(14px,2.6vw,40px);top:50%;transform:translateY(-50%);z-index:70;
    display:flex;flex-direction:column;align-items:center;gap:0;height:46vh;min-height:300px}
  .rail .line{position:relative;width:1px;flex:1;background:var(--hair)}
  .rail .fill{position:absolute;top:0;left:0;width:1px;height:0%;background:var(--accent)}
  .rail .floors{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
  .rail .floor{position:relative;width:7px;height:7px;border:1px solid var(--hair);border-radius:50%;background:var(--bg);transition:border-color .4s,background .4s}
  .rail .floor span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.28em;color:var(--muted);opacity:0;transition:opacity .4s;white-space:nowrap;text-transform:uppercase}
  .rail .floor.lit{border-color:var(--accent);background:var(--accent)}
  .rail .floor.lit span{opacity:1;color:var(--accent)}
  .rail .cap{font-size:9px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;writing-mode:vertical-rl;margin:12px 0}
  @media(max-width:900px){.rail{display:none}}
  @media(max-width:600px){
    .btn{padding:10px 14px;font-size:11px;letter-spacing:.14em;white-space:nowrap}
    .brand span{display:none}
  }

  /* ============ HERO ============ */
  .hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
  .hero .media{position:absolute;inset:0}
  .hero .media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, oklch(0.14 0.034 268/.55) 0%, oklch(0.14 0.034 268/.18) 38%, oklch(0.14 0.034 268/.62) 78%, var(--bg) 100%)}
  .hero .shade{position:absolute;inset:0;background:var(--halo);opacity:0;z-index:2}
  .hero .content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
  .hero .halo{position:relative;padding:clamp(30px,5vh,60px) clamp(30px,6vw,90px)}
  .hero .halo::before{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse 60% 55% at 50% 50%, oklch(0.13 0.034 268/.78), oklch(0.13 0.034 268/.45) 55%, transparent 75%);z-index:-1}
  .eyebrow{font-size:12px;font-weight:400;letter-spacing:.42em;text-transform:uppercase;color:var(--accent);padding-left:.42em}
  .eyebrow::before,.eyebrow::after{content:"·";margin:0 14px;color:var(--accent-2)}
  .hero h1{
    font-family:var(--serif);font-weight:500;
    font-size:clamp(34px,5.2vw,72px);
    line-height:1.18;letter-spacing:.02em;
    margin:26px 0 24px;text-wrap:balance;
  }
  .hero h1 em{font-style:normal;color:var(--accent)}
  .hero .lede{max-width:560px;margin:0 auto;color:oklch(0.84 0.018 86);font-size:clamp(15px,1.4vw,18px);font-weight:300;text-wrap:balance}
  .hero .mark{width:clamp(72px,8vw,104px);height:auto;margin:0 auto 10px;filter:drop-shadow(0 6px 24px oklch(0 0 0/.55))}
  .scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:10px;letter-spacing:.32em;text-transform:uppercase}
  .scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--accent),transparent);animation:cue 2.2s ease-in-out infinite}
  @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* ============ SHARED SECTION CHROME ============ */
  section{position:relative}
  .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
  .divider{display:flex;align-items:center;gap:18px;max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
  .divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--hair)}
  .divider b{color:var(--accent-2);font-size:11px;transform:rotate(45deg);font-weight:400}

  /* ============ TRUST ============ */
  .trust{padding:64px 0 12px}
  .trust p{ text-align:center;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;padding-left:.34em}
  .trust ul{display:flex;flex-wrap:wrap;justify-content:center;gap:18px clamp(26px,4vw,58px);list-style:none}
  .trust li{font-family:var(--serif);font-size:clamp(14px,1.5vw,17px);letter-spacing:.12em;color:oklch(0.58 0.022 268);white-space:nowrap;transition:color .5s}
  .trust li:hover{color:var(--accent)}

  /* ============ THESIS ============ */
  .thesis{padding:max(20vh,150px) 0}
  .thesis .wrap{text-align:center}
  .thesis h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,7vw,104px);line-height:1.12;letter-spacing:.015em}
  .thesis .w{display:inline-block;margin:0 .14em}
  .thesis .gold{color:var(--accent)}
  .thesis .sub{margin-top:34px;color:var(--muted);font-size:15px;letter-spacing:.06em}

  /* ============ FEATURES ============ */
  .feature{padding:clamp(70px,11vh,130px) 0}
  .feature .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px);align-items:center}
  .feature .visual{grid-column:1/7;position:relative}
  .feature.flip .visual{grid-column:7/13;order:2}
  .feature .copy{grid-column:7/13;padding:0 clamp(0px,2vw,28px)}
  .feature.flip .copy{grid-column:1/7;order:1}
  .frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
  .frame .inner{position:absolute;inset:-8% 0;height:116%}
  .frame::after{content:"";position:absolute;inset:14px;border:1px solid oklch(0.776 0.112 88/.28);pointer-events:none}
  .caption{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
  .caption::before{content:"";width:34px;height:1px;background:var(--accent-2)}
  .caption em{font-style:normal;color:var(--accent)}
  .feature h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,44px);line-height:1.22;margin:20px 0 22px;text-wrap:balance}
  .feature p{color:oklch(0.78 0.02 86);max-width:46ch}
  @media(max-width:900px){
    .feature .wrap{display:block}
    .feature .copy{padding:34px 0 0}
    .feature.flip .visual{order:0}
  }

  /* ============ GALLERY BAND ============ */
  .band{padding:clamp(70px,11vh,130px) 0}
  .band .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,30px);align-items:end}
  .panel{position:relative;overflow:hidden;background:var(--bg-2)}
  .panel.p1{grid-column:1/5;aspect-ratio:4/5}
  .panel.p2{grid-column:5/9;aspect-ratio:4/5;transform:translateY(-7%)}
  .panel.p3{grid-column:9/13;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.4vw,34px);border:1px solid var(--hair);background:linear-gradient(160deg,var(--bg-2),oklch(0.185 0.05 264))}
  .panel .inner{position:absolute;inset:-8% 0;height:116%}
  .panel.p3 svg{width:74%;align-self:flex-end;opacity:.9}
  .lines{list-style:none}
  .lines li{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair);font-family:var(--serif);letter-spacing:.14em;font-size:clamp(15px,1.4vw,19px)}
  .lines li:last-child{border-bottom:none}
  .lines li i{font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.3em;color:var(--accent);min-width:54px}
  .lines li span{color:var(--muted);font-family:var(--sans);font-size:12px;letter-spacing:.08em;margin-left:auto}
  .band .caption{margin-top:16px}
  .band .cap-row{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,30px)}
  .band .cap-row .caption:nth-child(1){grid-column:1/5}
  .band .cap-row .caption:nth-child(2){grid-column:5/9}
  .band .cap-row .caption:nth-child(3){grid-column:9/13}
  @media(max-width:900px){
    .band .wrap{display:block}
    .panel{margin-bottom:42px}
    .panel.p2{transform:none}
    .band .cap-row{display:none}
    .panel.p3{aspect-ratio:auto;min-height:380px;gap:30px}
  }

  /* ============ ROWS ============ */
  .rows{padding:clamp(70px,11vh,130px) 0}
  .rows .head{max-width:680px;margin-bottom:clamp(40px,7vh,80px)}
  .rows h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,50px);margin-top:18px;text-wrap:balance}
  .row{display:grid;grid-template-columns:140px 1fr 1.4fr;gap:clamp(18px,3vw,50px);padding:clamp(30px,4.5vh,50px) 0;position:relative;align-items:baseline}
  .row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left}
  .row .num{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);color:var(--accent);letter-spacing:.08em}
  .row h4{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,27px);letter-spacing:.03em;line-height:1.3}
  .row p{color:oklch(0.78 0.02 86);max-width:52ch}
  @media(max-width:900px){.row{grid-template-columns:64px 1fr;}.row p{grid-column:2}}

  /* ============ CTA ============ */
  .cta{padding:clamp(90px,15vh,170px) 0 clamp(80px,12vh,140px);position:relative;overflow:hidden}
  .cta .arc{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1100px,140vw);opacity:.5;pointer-events:none}
  .cta .wrap{text-align:center;position:relative}
  .cta h3{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.2;margin:24px auto 18px;max-width:18ch;text-wrap:balance}
  .cta .note{color:var(--muted);max-width:46ch;margin:0 auto 44px;font-size:16px}
  .guarantees{display:flex;justify-content:center;gap:clamp(20px,4vw,60px);flex-wrap:wrap;margin-top:74px}
  .g{max-width:240px;text-align:center}
  .g b{display:block;font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
  .g span{font-size:13.5px;color:var(--muted);line-height:1.55;display:block}
  .g::before{content:"◆";display:block;color:var(--accent-2);font-size:9px;margin-bottom:16px}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--hair);padding:60px 0 40px;position:relative;overflow:hidden}
  .marquee{white-space:nowrap;font-family:var(--serif);font-weight:400;font-size:clamp(60px,9vw,130px);letter-spacing:.18em;color:transparent;-webkit-text-stroke:1px oklch(0.32 0.04 266);user-select:none;display:flex;width:max-content}
  .marquee span{padding-right:.6em}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:54px}
  .foot .brand img{width:54px;height:54px}
  .foot .meta{font-size:12.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;text-align:right;line-height:2.1}
  .foot .meta a:hover{color:var(--accent)}
  .smallprint{margin-top:34px;font-size:12px;color:oklch(0.5 0.02 268);letter-spacing:.04em;text-align:center}

  /* reveal default state (no-JS safe: only applied when js class present) */
  .js .rv{opacity:0;transform:translateY(34px)}
  @media (prefers-reduced-motion: reduce){
    .js .rv{opacity:1;transform:none}
    .scrollcue i,.grain{animation:none}
  }

  /* ============ ADDED SECTIONS (same tokens, same idiom) ============ */
  .sec{padding:clamp(70px,11vh,130px) 0}
  .sec-head{max-width:820px;margin:0 0 clamp(40px,6vh,72px)}
  .sec-head.c{text-align:center;margin-left:auto;margin-right:auto}
  .sec-head .eyebrow{padding-left:0}
  .sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.9vw,54px);line-height:1.16;letter-spacing:.015em;margin-top:16px;text-wrap:balance}
  .sec-head p{color:var(--muted);margin-top:18px;font-size:15.5px;line-height:1.7;max-width:62ch}
  .sec-head.c p{margin-left:auto;margin-right:auto}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,46px);align-items:start}
  .card h4{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.1vw,28px);letter-spacing:.02em;margin:18px 0 4px}
  .card .ksub{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
  .card>p{color:oklch(0.78 0.02 86);font-size:14.5px;margin-top:6px;max-width:42ch}
  .card .spec{list-style:none;margin-top:14px}
  .card .spec li{font-size:13px;color:var(--muted);line-height:1.45;padding:9px 0;border-bottom:1px solid var(--hair);display:flex;gap:10px}
  .card .spec li:last-child{border-bottom:none}
  .card .spec li::before{content:"–";color:var(--accent-2);flex:none}
  .card .price{margin-top:16px;font-family:var(--serif);color:var(--accent);font-size:14px;letter-spacing:.08em}
  @media(max-width:900px){.cards{grid-template-columns:1fr;gap:48px}}

  /* proof grid (built-to-last) */
  .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px) clamp(28px,4vw,60px)}
  .proof .pf b{display:block;font-family:var(--serif);font-weight:500;font-size:16px;letter-spacing:.05em;color:var(--accent);margin-bottom:9px}
  .proof .pf b::before{content:"◆";color:var(--accent-2);font-size:8px;margin-right:11px;vertical-align:2px}
  .proof .pf span{font-size:14px;color:oklch(0.78 0.02 86);line-height:1.6}
  @media(max-width:760px){.proof{grid-template-columns:1fr;gap:30px}}

  /* whole-house */
  .wh .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,50px);align-items:start}
  .wh .lead{grid-column:1/5}
  .wh .lead .eyebrow{padding-left:0}
  .wh .lead h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.18;margin-top:16px;text-wrap:balance}
  .wh .lead p{color:var(--muted);margin-top:18px;font-size:15px;line-height:1.7}
  .wh .list{grid-column:6/13}
  .wh .lines li{font-family:var(--serif);letter-spacing:.04em}
  .wh .lines li span{font-family:var(--sans);color:var(--muted);font-size:12.5px;letter-spacing:.06em;margin-left:auto;text-align:right;max-width:58%}
  @media(max-width:900px){.wh .wrap{display:block}.wh .lead{margin-bottom:36px}}

  /* value stat */
  .stat{padding:clamp(70px,12vh,130px) 0;text-align:center}
  .stat .big{font-family:var(--serif);font-weight:500;font-size:clamp(66px,12vw,160px);line-height:1;color:var(--accent);letter-spacing:.01em}
  .stat .cap{margin:24px auto 0;max-width:48ch;color:oklch(0.82 0.02 86);font-size:clamp(16px,1.7vw,21px);line-height:1.55;text-wrap:balance}
  .stat .src{margin-top:18px;color:var(--muted);font-size:12px;letter-spacing:.06em}

  /* timeline calculator */
  .calc .wrap{max-width:1040px}
  .calc-shell{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(26px,4vw,64px);align-items:center;border:1px solid var(--hair);background:linear-gradient(160deg,var(--bg-2),oklch(0.185 0.05 264));padding:clamp(28px,4vw,54px)}
  .calc-control label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
  .calc-roomrow{display:flex;align-items:baseline;gap:14px;margin:10px 0 20px}
  .calc-roomval{font-family:var(--serif);font-size:clamp(42px,5.4vw,68px);color:var(--ink);line-height:1}
  .calc-roomunit{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--hair);outline:none;margin:6px 0;cursor:pointer}
  .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:0;box-shadow:0 2px 10px oklch(0 0 0/.5)}
  .calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:0}
  .calc-range-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);letter-spacing:.12em;margin-top:2px}
  .calc-phases{margin-top:24px;font-size:12.5px;color:var(--muted);line-height:1.7;border-top:1px solid var(--hair);padding-top:18px}
  .calc-phases b{color:oklch(0.84 0.02 86);font-weight:400}
  .calc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,30px)}
  .calc-metric .ml{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
  .calc-metric .mv{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,62px);color:var(--accent);line-height:1.04;margin-top:10px}
  .calc-metric .mv small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--sans);display:block;margin-top:8px;line-height:1.4}
  .calc-metric .ms{font-size:12.5px;color:oklch(0.7 0.02 86);margin-top:8px;min-height:1.2em}
  .calc-disc{margin-top:18px;font-size:12px;color:oklch(0.54 0.02 268);line-height:1.6}
  @media(max-width:760px){.calc-shell{grid-template-columns:1fr;gap:32px}}

/* ===== block ===== */
  /* row hairline draw (class toggled by ScrollTrigger) */
  .row::before{transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
  .row.drawn::before{transform:scaleX(1)}
/* ===== room cards as links ===== */
.card[href]{display:block;color:inherit}
.card[href]:hover h4{color:var(--accent)}
.card .more{display:inline-block;margin-top:16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-2);transition:color .35s}
.card[href]:hover .more{color:var(--accent)}

/* ===== hero/middle slideshow (replaces video) ===== */
.slideshow{position:absolute;inset:0;overflow:hidden}
.slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:0;transition:opacity 2.4s ease-in-out;will-change:opacity}
.slideshow img.on{opacity:1}
@media(max-width:760px){.slideshow img{object-position:50% 47%}}
@media (prefers-reduced-motion: reduce){.slideshow img{transition:opacity 1s}}

/* ===== header scrim so nav stays readable over imagery ===== */
header::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, oklch(0.12 0.03 268/.66), oklch(0.12 0.03 268/.14) 58%, transparent);pointer-events:none;z-index:-1;transition:opacity .5s}
header.scrolled::before{opacity:0}

/* ===== main nav + mobile menu ===== */
.mainnav{display:flex;gap:clamp(16px,2.2vw,36px);align-items:center}
.mainnav a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.85;position:relative;padding:6px 0;transition:color .3s,opacity .3s;white-space:nowrap}
.mainnav a:hover{color:var(--accent);opacity:1}
.mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .35s cubic-bezier(.77,0,.18,1)}
.mainnav a:hover::after{right:0}
.navtoggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative;padding:0}
.navtoggle span{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform .35s,opacity .25s}
.navtoggle span:nth-child(1){top:3px}.navtoggle span:nth-child(2){top:10px}.navtoggle span:nth-child(3){top:17px}
body.menu-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .navtoggle span:nth-child(2){opacity:0}
body.menu-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilemenu{position:fixed;inset:0;z-index:75;background:oklch(0.15 0.034 268/.985);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s}
body.menu-open{overflow:hidden}
body.menu-open .mobilemenu{opacity:1;pointer-events:auto}
.mobilemenu a{font-family:var(--serif);font-weight:500;font-size:clamp(26px,7vw,40px);letter-spacing:.04em;color:var(--ink);padding:9px 0;transition:color .3s}
.mobilemenu a:hover,.mobilemenu a:active{color:var(--accent)}
.mobilemenu .mm-cta{margin-top:26px;font-family:var(--sans);font-size:13px!important}
.mobilemenu .mm-lang{margin-top:22px;display:flex;gap:16px;color:var(--muted);font-size:13px;letter-spacing:.22em}
.mobilemenu .mm-lang button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;letter-spacing:inherit}
.mobilemenu .mm-lang button.on{color:var(--accent)}
@media(max-width:900px){
  .mainnav{display:none}
  .navtoggle{display:block}
  .hr-right .lang{display:none}
  .hr-right>.btn{display:none}
}


/* ===== page hero (sub-pages) + breadcrumb + active nav + overview ===== */
.page-hero{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.14 0.034 268/.5) 0%,transparent 30%,oklch(0.14 0.034 268/.55) 72%,var(--bg) 100%)}
.page-hero .wrap{position:relative;z-index:2;padding-top:clamp(120px,18vh,190px);padding-bottom:clamp(34px,6vh,60px)}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.6vw,78px);line-height:1.08;margin:14px 0 16px;letter-spacing:.01em;text-wrap:balance}
.page-hero .eyebrow{padding-left:0}
.page-hero .lede{max-width:62ch;color:oklch(0.88 0.018 86);font-size:clamp(15px,1.45vw,19px);font-weight:300;text-wrap:balance}
.breadcrumb{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--accent)} .breadcrumb i{font-style:normal;color:var(--accent-2);margin:0 9px}
.mainnav a.active,.mobilemenu a.active{color:var(--accent);opacity:1}
.mainnav a.active::after{right:0}
.ov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,30px)}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ov-grid{grid-template-columns:1fr}}

/* ===== references marquee (infinite slide) ===== */
.trust-marquee{overflow:hidden;width:100%;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.trust-track{display:flex;width:max-content;animation:trustscroll 40s linear infinite}
.trust-marquee:hover .trust-track{animation-play-state:paused}
.trust-track span{font-family:var(--serif);font-size:clamp(22px,3vw,40px);letter-spacing:.08em;color:oklch(0.6 0.022 268);padding:0 clamp(26px,4vw,66px);white-space:nowrap;transition:color .4s}
.trust-track span:hover{color:var(--accent)}
@keyframes trustscroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.trust-track{animation:none;justify-content:center;width:100%;flex-wrap:wrap;gap:16px}}

/* ===== nav rooms dropdown ===== */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop>a{display:inline-flex;align-items:center;gap:7px}
.navdrop>a::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.7;transition:transform .3s}
.navdrop:hover>a::after,.navdrop:focus-within>a::after{transform:rotate(225deg) translateY(-2px)}
.subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:oklch(0.175 0.036 266/.985);border:1px solid var(--hair);padding:8px 0;min-width:200px;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .26s,transform .26s;box-shadow:0 24px 60px oklch(0 0 0/.5);z-index:90}
.navdrop:hover>.subnav,.navdrop:focus-within>.subnav{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.subnav a{padding:10px 24px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.82;white-space:nowrap;transition:color .25s,background .25s,opacity .25s}
.subnav a::after{display:none}
.subnav a:hover{color:var(--accent);opacity:1;background:oklch(0.22 0.04 264)}
/* mobile menu sub-list */
.mobilemenu{justify-content:flex-start;padding:clamp(70px,10vh,104px) 20px max(34px,env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;gap:2px}
.mobilemenu a{font-size:clamp(23px,6vw,34px);padding:7px 0}
.mm-sub{display:flex;flex-direction:column;align-items:center;gap:2px;margin:2px 0 8px}
.mm-sub a{font-family:var(--sans);font-size:15px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:5px 0}
.mm-sub a:hover{color:var(--accent)}
.mobilemenu .mm-cta{margin-top:20px;padding:14px 28px}
.mobilemenu .mm-lang{margin-top:16px;margin-bottom:6px}
@media(max-height:700px){
  .mobilemenu{padding-top:60px;gap:0}
  .mobilemenu a{font-size:clamp(19px,5.2vw,26px);padding:5px 0}
  .mm-sub{margin:0 0 4px}
  .mm-sub a{padding:3px 0!important;font-size:13.5px!important}
  .mobilemenu .mm-cta{margin-top:13px}
  .mobilemenu .mm-lang{margin-top:11px}
}

/* ===== contact form + details ===== */
.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,5vw,68px);align-items:start}
.cform{display:flex;flex-direction:column;gap:18px}
.cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform label{display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform textarea{background:var(--bg-2);border:1px solid var(--hair);color:var(--ink);font-family:var(--sans);font-size:15px;letter-spacing:.01em;padding:13px 15px;outline:none;transition:border-color .3s,background .3s;width:100%;border-radius:0}
.cform textarea{resize:vertical;min-height:120px}
.cform input:focus,.cform textarea:focus{border-color:var(--accent-2);background:oklch(0.215 0.04 264)}
.cform button[type=submit]{align-self:flex-start;margin-top:6px;cursor:pointer}
.cform .hp{position:absolute;left:-9999px}
.fstatus{font-size:14px;letter-spacing:.02em;min-height:1.2em;margin-top:4px}
.fstatus.ok{color:var(--accent)} .fstatus.err{color:oklch(0.7 0.13 35)}
.contact-aside{border-left:1px solid var(--hair);padding-left:clamp(20px,3vw,40px)}
.ca-lbl{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.ca-line{display:block;font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);color:var(--ink);padding:8px 0;letter-spacing:.03em;transition:color .3s}
.ca-line:hover{color:var(--accent)}
.foot .meta .fcontact a:hover{color:var(--accent)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:36px}.cform .frow{grid-template-columns:1fr}.contact-aside{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:28px}}

/* ===== floating WhatsApp button (hosting-agnostic wa.me link) ===== */
.wa-float{position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:79;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px oklch(0 0 0/.45);transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 34px oklch(0 0 0/.55)}
.wa-float svg{width:30px;height:30px;fill:#fff}
body.menu-open .wa-float{opacity:0;pointer-events:none}
@media(max-width:600px){.wa-float{width:52px;height:52px}.wa-float svg{width:28px;height:28px}}

/* ===== homepage final-arc sections ===== */
.hero-cta{margin-top:clamp(24px,4vh,34px)}
.thesis .eyebrow.s1-ey{padding-left:0;margin-bottom:14px}
.thesis .s1-sub{margin-top:28px;max-width:60ch;margin-left:auto;margin-right:auto}
/* §1 hotel video: one floor in renovation (red), the rest in operation (gold) */
.s1-viz{margin:clamp(34px,6vh,60px) auto 0;max-width:880px}
.s1-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2);box-shadow:0 30px 80px oklch(0 0 0/.45)}
.s1-media::after{content:"";position:absolute;inset:12px;border:1px solid oklch(0.776 0.112 88/.28);pointer-events:none;z-index:2}
.s1-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.s1-legend{display:flex;justify-content:center;gap:clamp(22px,4vw,46px);margin-top:20px;flex-wrap:wrap}
.s1-lg{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.s1-lg i{width:9px;height:9px;border-radius:50%;flex:none}
.s1-lg-on i{background:var(--accent);box-shadow:0 0 10px oklch(0.776 0.112 88/.7)}
.s1-lg-reno i{background:oklch(0.62 0.2 25);box-shadow:0 0 10px oklch(0.62 0.2 25/.7)}
/* §2 one-contact: handshake photo + service chips */
.s2 .visual{display:flex;align-items:center;justify-content:center}
.s2-media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);box-shadow:0 24px 64px oklch(0 0 0/.4)}
.s2-media::after{content:"";position:absolute;inset:12px;border:1px solid oklch(0.776 0.112 88/.28);pointer-events:none;z-index:2}
.s2-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.s2:hover .s2-media img{transform:scale(1.04)}
.s2-svc{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.s2-svc li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--hair);padding:8px 15px;border-radius:999px;transition:border-color .3s,color .3s}
.s2-svc li:hover{border-color:var(--accent-2);color:var(--ink)}
.s3 .eyebrow{margin-bottom:12px}
.paylbl{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.whyus{padding:clamp(60px,9vh,110px) 0}
.whyus .wu-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px) clamp(28px,5vw,64px);max-width:940px;margin:0 auto}
.whyus .wu-list li{display:flex;gap:14px;align-items:baseline;font-size:clamp(15px,1.5vw,18px);color:oklch(0.86 0.02 86);line-height:1.45;padding:14px 0;border-bottom:1px solid var(--hair)}
.whyus .wu-list li::before{content:"\2713";color:var(--accent);font-size:16px;flex:none;font-weight:600}
@media(max-width:760px){.whyus .wu-list{grid-template-columns:1fr;gap:0}}
.foot .meta .fdev{color:var(--muted)}
.gband .wrap{text-align:center}
.gband .guarantees{margin-top:34px}
/* completed-projects photo strip (auto-scroll + manual drag) */
.proofstrip{padding:clamp(26px,5vh,52px) 0 0}
.ps-label{text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.ps-marquee{overflow:hidden;width:100%;cursor:grab;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ps-marquee.dragging{cursor:grabbing}
.ps-track{display:flex;width:max-content;gap:clamp(12px,1.5vw,20px);animation:psscroll 70s linear infinite;user-select:none}
.ps-marquee:hover .ps-track{animation-play-state:paused}
.ps-item{flex:0 0 auto;width:clamp(300px,34vw,420px);aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.ps-item img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ps-item:hover img{transform:scale(1.04)}
@keyframes psscroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ps-track{animation:none;overflow-x:auto;width:100%}}
/* mobile hero: force true centering of eyebrow + headline */
@media(max-width:760px){
  .hero .content{justify-content:center;padding:0 18px}
  .hero .halo{width:100%;max-width:none;padding-left:6px;padding-right:6px;box-sizing:border-box}
  .hero .eyebrow{padding-left:0;letter-spacing:.32em;display:block;text-align:center}
  .hero .eyebrow::before,.hero .eyebrow::after{margin:0 8px}
  .hero h1{font-size:clamp(30px,8.4vw,42px)}
  .hero .lede{max-width:100%}
}
/* §2 mobile: visual BELOW the text */
@media(max-width:900px){
  .s2 .wrap{display:flex;flex-direction:column}
  .feature.flip.s2 .copy{order:1;padding-top:0}
  .feature.flip.s2 .visual{order:2;margin-top:30px}
  .s2-media{aspect-ratio:16/10;max-width:580px;margin:0 auto}
}