:root{
  --bg:#f3efe7; --ink:#131312; --muted:#6b675f; --line:rgba(19,19,18,.13); --soft:#e9e3d8; --card:#fbf9f5;
  --accent:#d9481f; --accent-ink:#fff; --radius:18px;
  --wrap:min(1180px, 100% - 2*clamp(16px, 4vw, 48px));
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#111110; --ink:#efebe3; --muted:#9a958c; --line:rgba(239,235,227,.14); --soft:#1c1b19; --card:#181715; --accent:#ff6a3d; --accent-ink:#140a05; }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }
body{ margin:0; background:var(--bg); color:var(--ink); font:17px/1.5 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom); }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.wrap{ width:var(--wrap); margin-inline:auto; }
.muted{ color:var(--muted); }
.skip{ position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--bg); padding:8px 14px; border-radius:999px; z-index:99; }
.skip:focus{ left:12px; }
.label{ margin:0 0 18px; font:500 12px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* header */
.top{ position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px clamp(16px, 4vw, 48px); padding-top:calc(14px + env(safe-area-inset-top)); background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.logo{ font-weight:600; font-size:20px; letter-spacing:-.02em; text-decoration:none; }
.top nav{ display:flex; align-items:center; gap:18px; }
.room-link{ font-size:15px; text-decoration:none; color:var(--muted); }
.room-link:hover{ color:var(--ink); }

/* buttons */
.btns{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; background:var(--ink); color:var(--bg); font-weight:500; font-size:16px; text-decoration:none; border:1px solid var(--ink); transition:background .2s, color .2s; }
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:none; color:var(--ink); border-color:var(--line); }
.btn-sm{ min-height:40px; padding:0 16px; font-size:15px; }

/* hero */
.hero{ padding-block:clamp(40px, 9vh, 110px) clamp(40px, 8vh, 90px); }
.hero h1, .svc-head h1{ margin:0; font-weight:500; font-size:clamp(46px, 9.4vw, 136px); line-height:.92; letter-spacing:-.05em; text-wrap:balance; }
.lead{ margin:28px 0 30px; max-width:36ch; font-size:clamp(19px, 1.8vw, 24px); line-height:1.35; letter-spacing:-.01em; color:var(--muted); text-wrap:pretty; }
.room-card{ margin-top:clamp(36px, 6vh, 64px); display:grid; grid-template-columns:minmax(120px, 220px) 1fr; align-items:center; gap:20px; max-width:560px; padding:10px; padding-right:20px; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; background:var(--card); transition:transform .3s cubic-bezier(.2,.9,.25,1), border-color .2s; }
.room-card:hover{ transform:translateY(-3px); border-color:var(--ink); }
.room-card img{ aspect-ratio:16/10; object-fit:cover; object-position:50% 58%; border-radius:12px; width:100%; }
.room-card b{ display:block; font-size:19px; font-weight:500; letter-spacing:-.01em; }
.room-card small{ display:block; color:var(--muted); font-size:14px; margin-top:4px; line-height:1.35; }

/* services rows */
.group{ padding-block:clamp(28px, 5vh, 56px); border-top:1px solid var(--line); }
.rows{ list-style:none; margin:0; padding:0; }
.rows li + li{ border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) 16ch 28px; align-items:baseline; gap:20px; padding:20px 0; text-decoration:none; }
.row-t{ font-size:clamp(24px, 3.3vw, 42px); font-weight:500; letter-spacing:-.035em; line-height:1.05; transition:transform .35s cubic-bezier(.2,.9,.25,1), color .2s; }
.row-d{ color:var(--muted); font-size:15.5px; line-height:1.4; }
.row-n{ font:12px 'Geist Mono', ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; text-align:right; }
.arr{ font-size:24px; transition:transform .35s cubic-bezier(.2,.9,.25,1); justify-self:end; }
.row:hover .row-t{ transform:translateX(10px); color:var(--accent); }
.row:hover .arr{ transform:translateX(4px); color:var(--accent); }
@media (max-width:760px){
  .row{ grid-template-columns:1fr 24px; gap:6px 12px; padding:18px 0; }
  .row-t{ grid-column:1; }
  .row-d{ grid-column:1; grid-row:2; }
  .row-n{ grid-column:1; grid-row:3; }
  .arr{ grid-column:2; grid-row:1; }
}

/* featured cards */
.featured{ padding-block:clamp(28px, 5vh, 56px); border-top:1px solid var(--line); }
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; background:var(--card); transition:transform .3s cubic-bezier(.2,.9,.25,1), border-color .2s; }
.card:hover{ transform:translateY(-3px); border-color:var(--ink); }
.card-visual{ aspect-ratio:4/3; background:var(--soft); display:grid; place-items:center; overflow:hidden; }
.card-visual img{ width:100%; height:100%; object-fit:cover; }
.card-metric{ font-size:clamp(26px, 3vw, 38px); letter-spacing:-.03em; padding:16px; text-align:center; }
.card-metric s{ color:var(--muted); text-decoration-thickness:2px; }
.card-metric b{ font-weight:500; color:var(--accent); }
.card-txt{ padding:14px 16px 16px; }
.card-txt small{ display:block; font:11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.card-txt b{ display:block; font-weight:500; font-size:17px; margin-top:4px; letter-spacing:-.01em; }

/* facts */
.facts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; padding-block:clamp(32px, 6vh, 64px); border-top:1px solid var(--line); }
.facts b{ font-weight:500; font-size:19px; letter-spacing:-.01em; }
.facts p{ margin:6px 0 0; color:var(--muted); font-size:15.5px; }
@media (max-width:760px){ .facts{ grid-template-columns:1fr; gap:20px; } }

/* service page */
.svc-head{ padding-block:clamp(24px, 5vh, 56px) clamp(32px, 6vh, 64px); }
.svc-head h1{ font-size:clamp(40px, 7.5vw, 104px); margin-top:4px; }
.back{ display:inline-block; margin-bottom:clamp(20px, 5vh, 48px); color:var(--muted); text-decoration:none; font-size:15px; }
.back:hover{ color:var(--ink); }
.price{ margin:-12px 0 24px; color:var(--muted); }
.price b{ color:var(--ink); font-weight:500; font-size:22px; }
.room-inline{ display:inline-block; margin-top:22px; color:var(--muted); font-size:15px; }
.works, .sib{ padding-block:clamp(28px, 5vh, 56px); border-top:1px solid var(--line); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:10px 16px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-size:15px; }
.chip:hover{ background:var(--ink); color:var(--bg); }

/* projects */
.pj{ padding-block:clamp(24px, 4vh, 44px); max-width:880px; }
.pj + .pj{ border-top:1px solid var(--line); }
.pj header{ margin-bottom:20px; }
.pj h3{ margin:0; font-size:clamp(26px, 3.2vw, 40px); font-weight:500; letter-spacing:-.035em; line-height:1.05; text-wrap:balance; }
.pj-meta{ margin:0 0 8px; font:12px 'Geist Mono', ui-monospace, monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pj-sum{ margin:18px 0 0; max-width:62ch; color:var(--muted); font-size:17px; }
.pj-empty{ padding:40px 16px; text-align:center; color:var(--muted); background:var(--soft); border-radius:12px; margin:0; }
.pj-link{ display:inline-block; margin-top:8px; font-weight:500; }
.pj-quote{ margin:24px 0 0; padding:18px 22px; border-left:3px solid var(--accent); background:var(--card); border-radius:0 12px 12px 0; }
.pj-quote p{ margin:0; font-size:18px; line-height:1.45; letter-spacing:-.01em; }
.pj-quote cite{ display:block; margin-top:8px; color:var(--muted); font-style:normal; font-size:14.5px; }

.pj-metric{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin-bottom:24px; }
.pj-metric s{ font-size:clamp(28px, 4vw, 48px); color:var(--muted); letter-spacing:-.03em; text-decoration-thickness:3px; }
.pj-metric span{ font-size:28px; color:var(--muted); }
.pj-metric b{ font-size:clamp(40px, 6.5vw, 80px); font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--accent); }
.pj-metric small{ flex-basis:100%; color:var(--muted); font-size:15px; }
.pj-steps{ margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.pj-steps div{ padding:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.pj-steps dt{ font:11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.pj-steps dd{ margin:0; font-size:16px; line-height:1.45; }
.pj-steps div:last-child dt{ color:var(--accent); }
@media (max-width:760px){ .pj-steps{ grid-template-columns:1fr; } }
.pj-strip{ margin-top:14px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.pj-strip img{ border-radius:10px; aspect-ratio:4/3; object-fit:cover; width:100%; }

.pj-gallery{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:18px; }
.pj-gallery .g-item:first-child{ grid-column:1 / -1; }
.pj-gallery.n1 .g-item{ grid-column:1 / -1; }
.pj-gallery img{ width:100%; height:100%; object-fit:cover; border-radius:12px; aspect-ratio:4/3; }
.pj-gallery .g-item:first-child img{ aspect-ratio:16/10; }
.g-item{ display:block; cursor:zoom-in; }

/* before / after */
.ba{ position:relative; overflow:hidden; border-radius:14px; background:var(--soft); touch-action:pan-y; user-select:none; }
.ba-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ba-before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.4); pointer-events:none; }
.ba-handle::after{ content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; font-size:18px; box-shadow:0 4px 18px rgba(0,0,0,.3); }
.ba-range:focus-visible ~ .ba-handle::after{ outline:2px solid var(--accent); outline-offset:3px; }
.ba-tag{ position:absolute; top:12px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; font:11px 'Geist Mono', ui-monospace, monospace; letter-spacing:.1em; text-transform:uppercase; pointer-events:none; }
.ba-tag-l{ left:12px; } .ba-tag-r{ right:12px; }

/* device frames */
.frame{ margin-inline:auto; background:#1a1a1a; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); }
.frame-browser{ border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.frame-bar{ display:flex; align-items:center; gap:6px; padding:10px 12px; background:#2a2a2a; }
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:#555; }
.frame-bar span{ flex:1; margin-left:10px; padding:4px 12px; border-radius:999px; background:#1a1a1a; color:#aaa; font:12px 'Geist Mono', ui-monospace, monospace; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.frame-screen img{ width:100%; }
.frame-phone{ position:relative; width:min(300px, 80%); padding:12px; border-radius:40px; }
.frame-phone .frame-screen{ border-radius:30px; overflow:hidden; aspect-ratio:9/19.5; background:#000; }
.frame-phone .frame-screen img{ height:100%; object-fit:cover; object-position:top; }
.notch{ position:absolute; top:22px; left:50%; transform:translateX(-50%); width:22%; height:18px; border-radius:999px; background:#000; z-index:1; }

/* youtube facade */
.yt{ position:relative; margin-inline:auto; background:#000; border-radius:14px; overflow:hidden; }
.yt-v{ width:min(360px, 100%); aspect-ratio:9/16; }
.yt-h{ aspect-ratio:16/9; }
.yt img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:0; background:var(--accent); cursor:pointer; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.yt-play::after{ content:''; position:absolute; left:29px; top:22px; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent #fff; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.92); display:grid; place-items:center; padding:16px; cursor:zoom-out; }
.lb img{ max-height:92vh; width:auto; border-radius:8px; }

/* footer */
.foot{ margin-top:clamp(40px, 8vh, 96px); padding-block:clamp(48px, 10vh, 120px) calc(40px + env(safe-area-inset-bottom)); background:var(--ink); color:var(--bg); }
.foot-big{ margin:0 0 28px; font-size:clamp(52px, 11vw, 160px); font-weight:500; letter-spacing:-.055em; line-height:.9; }
.foot .btn{ background:var(--bg); color:var(--ink); border-color:var(--bg); }
.foot .btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.foot .btn-ghost{ background:none; color:var(--bg); border-color:color-mix(in srgb, var(--bg) 30%, transparent); }
.foot-info{ display:flex; flex-wrap:wrap; gap:14px 48px; margin-top:44px; font-size:15px; opacity:.7; }
.foot-info p{ margin:0; }
.foot .muted{ color:inherit; opacity:.6; }

/* floating whatsapp (mobile) */
.fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30; width:58px; height:58px; border-radius:50%; display:none; place-items:center; background:#25d366; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); }
@media (max-width:760px){ .fab{ display:grid; } .top .btn-sm{ display:none; } }