:root{color-scheme:dark;--bg:#090909;--fg:#f0ece5;--muted:#9b9892;--line:rgba(255,255,255,.13);--gold:#b99b6a}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#000;overflow-x:clip;overscroll-behavior-x:none;width:100%;max-width:100%}body{margin:0;min-width:0;width:100%;max-width:100%;min-height:100%;background:#000;color:var(--fg);font-family:'DM Sans',sans-serif;overflow-x:hidden;overscroll-behavior-x:none;overflow-wrap:anywhere}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");z-index:20}.site-header{height:82px;display:grid;grid-template-columns:170px 1fr 170px;align-items:center;padding:0 5.5%;position:fixed;top:0;left:0;right:0;z-index:30;background:#000;backdrop-filter:blur(7px)}.brand{color:var(--fg);text-decoration:none;letter-spacing:.48em;font-size:18px}.brand small{display:block;font-size:7px;letter-spacing:.55em;margin-top:4px;margin-left:2px;color:#aaa}.site-header nav{display:flex;justify-content:center;gap:42px}.site-header nav a,.talk{color:#bbb;text-decoration:none;font-size:11px;letter-spacing:.2em;position:relative}.site-header nav a.active{color:#fff}.site-header nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:1px;background:#fff}.talk{justify-self:end;border:1px solid #777;border-radius:30px;padding:13px 18px;color:#eee}.talk span{margin-left:15px}.hero{min-height:900px;height:100vh;max-height:1050px;position:relative;padding:150px 5.5% 80px;display:flex;align-items:center}.hero-copy{width:43%;position:relative;z-index:4}.eyebrow{font-size:10px;letter-spacing:.43em;color:#9e9a94;margin:0 0 25px}.hero h1{font-family:'Playfair Display',serif;font-size:clamp(70px,8.2vw,150px);font-weight:500;line-height:.82;letter-spacing:-.055em;margin:0 0 30px}.hero h1 i,.services h2 i,.about h2 i,.contact h2 i{font-style:italic;color:#d8c1a1}.intro{font-size:14px;color:#aaa;letter-spacing:.04em;margin-bottom:42px}.outline-cta{display:inline-flex;align-items:center;gap:24px;color:#eee;text-decoration:none;font-size:11px;letter-spacing:.23em}.outline-cta span{width:40px;height:40px;border:1px solid #888;border-radius:50%;display:grid;place-items:center;font-size:16px}.scene-wrap{position:absolute;inset:82px 3% 0 37%;overflow:hidden;min-height:700px}.scene-wrap:after{content:"";position:absolute;left:12%;right:7%;bottom:12%;height:2px;background:radial-gradient(ellipse,rgba(230,205,166,.45),transparent 65%);filter:blur(8px);pointer-events:none}.scene-wrap #scene{position:absolute;inset:0;touch-action:none;overscroll-behavior-x:none}.mobile-zoom-controls{display:none}.scene-label{position:absolute;top:15%;right:5%;font-size:9px;line-height:1.8;letter-spacing:.38em;color:#999;text-align:right;pointer-events:none}.scene-hint{position:absolute;top:27%;right:5%;font-size:8px;letter-spacing:.26em;line-height:3;color:#9a9894;pointer-events:none}.scene-hint span{color:#666}.project-index{position:absolute;right:5%;bottom:28%;display:grid;grid-template-columns:auto auto;column-gap:15px;align-items:end;color:#777}.project-index b{font-family:'Playfair Display';font-size:25px;font-weight:400;color:#bdb8b0}.project-index small{grid-column:1/-1;margin-top:16px;font-size:8px;line-height:1.7;letter-spacing:.3em;color:#999}.works{padding:80px 5.5% 140px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.section-head p,.section-head a{font-size:9px;letter-spacing:.35em;color:#999;text-decoration:none}.work-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.work-grid article{min-width:0}.mock{height:230px;position:relative;overflow:hidden;background:#161616;border:1px solid #222}.mock:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.11),transparent 65%);transform:translateX(-100%);transition:.7s}.mock:hover:after{transform:translateX(100%)}.mock-1{background:linear-gradient(145deg,#eee,#c8c2b7);color:#111}.card-logo{position:absolute;left:25px;top:45px;font-family:serif;font-size:28px;line-height:.8;letter-spacing:.1em}.card-logo small{font:7px 'DM Sans';letter-spacing:.35em}.mock-2{background:radial-gradient(circle at 65% 40%,#574936,#111 55%)}.box{position:absolute;width:110px;height:145px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);display:grid;place-items:center;border:1px solid #a58d69;box-shadow:12px 16px 30px #000;color:#d7c2a0;letter-spacing:.35em}.mock-3{background:#ddd;color:#111}.poster{font-family:'Playfair Display';font-size:38px;line-height:.75;position:absolute;left:30px;top:30px}.poster em{font:italic 16px serif}.mock-4{background:linear-gradient(135deg,#1d1d1d,#555);}.editorial{font-family:serif;font-size:24px;line-height:.95;position:absolute;left:20px;bottom:25px;color:#eee}.mock-5{background:#111}.phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);width:100px;height:185px;border:5px solid #333;border-radius:17px;display:grid;place-items:center;font-size:9px;letter-spacing:.2em;background:linear-gradient(145deg,#292929,#050505);box-shadow:15px 20px 40px #000}.work-grid article>p{font-size:9px;color:#777;margin:14px 0 8px}.work-grid h3{font-size:10px;letter-spacing:.22em;font-weight:500;margin:0 0 8px}.work-grid article>span{font-size:10px;color:#777;line-height:1.5}.services,.about,.contact{padding:150px 8%;border-top:1px solid var(--line)}.services{display:grid;grid-template-columns:1fr 1fr;gap:12%}.services h2,.about h2,.contact h2{font-family:'Playfair Display';font-weight:500;font-size:clamp(50px,6vw,95px);line-height:.9;letter-spacing:-.04em;margin:0}.service-list{border-top:1px solid var(--line)}.service-list div{display:grid;grid-template-columns:45px 1fr;gap:10px;padding:25px 0;border-bottom:1px solid var(--line)}.service-list b{font-size:9px;color:#777}.service-list span{font-family:serif;font-size:25px}.service-list small{grid-column:2;color:#777;font-size:10px}.about{max-width:1200px}.about p:not(.eyebrow){max-width:480px;color:#888;margin-top:40px;line-height:1.8}.contact{min-height:600px}.contact .outline-cta{margin-top:55px}footer{padding:30px 5.5%;background:#000;display:flex;justify-content:space-between;color:#666;font-size:8px;letter-spacing:.22em;border-top:1px solid var(--line)}@media(max-width:900px){.site-header{grid-template-columns:1fr auto;height:calc(70px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6% 0;background:#000}.site-header nav{display:none}.hero{min-height:900px;height:auto;padding-top:130px;display:block}.hero-copy{width:100%}.hero h1{font-size:20vw}.scene-wrap{position:relative;inset:auto;height:480px;margin-top:-20px;margin-left:0;width:100%;overflow:hidden}.scene-label,.scene-hint{right:8%;font-size:7px}.project-index{right:8%;bottom:10%}.work-grid{grid-template-columns:repeat(2,1fr)}.work-grid article:last-child{grid-column:1/-1}.services{grid-template-columns:1fr;gap:70px;padding-left:7%;padding-right:7%}.about,.contact{padding-left:7%;padding-right:7%}.talk{padding:10px 13px;font-size:9px}.brand{font-size:15px}.works{padding-top:60px}}@media(max-width:520px){.hero{padding-left:6%;padding-right:6%}.hero h1{font-size:19vw}.scene-wrap{height:400px;margin-left:0;width:100%;overflow:hidden}.mobile-zoom-controls{display:flex;position:absolute;right:6%;bottom:17%;z-index:8;gap:6px}.mobile-zoom-controls button{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.72);color:#eee;font:18px 'DM Sans',sans-serif;line-height:1;touch-action:manipulation}.mobile-zoom-controls button:active{background:#171717}.work-grid{grid-template-columns:1fr}.work-grid article:last-child{grid-column:auto}.mock{height:260px}.services h2,.about h2,.contact h2{font-size:48px}footer{display:block;line-height:2.2}.site-header{grid-template-columns:1fr auto}.talk span{display:none}}

/* DEMO006 mobile interaction / edge hardening */
html, body { background:#000 !important; overscroll-behavior-x:none !important; }
body { overflow-x:clip !important; }
main, .hero, .scene-wrap, .works, .services, .about, .contact, footer { max-width:100%; }
footer { background:#000 !important; color:#666; }
@media (max-width:520px){
  html, body { background:#000 !important; width:100%; overflow-x:clip !important; }
  .site-header { background:#000 !important; }
  .hero { position:relative; min-height:100svh; height:auto; padding:calc(82px + env(safe-area-inset-top)) 0 0; margin:0; overflow:clip; }
  .hero-copy { position:absolute; left:6%; right:6%; top:calc(104px + env(safe-area-inset-top)); width:auto; z-index:5; pointer-events:none; }
  .hero-copy .eyebrow, .hero-copy .intro, .hero-copy .outline-cta { display:none; }
  .hero h1 { font-size:13.5vw; line-height:.82; margin:0; max-width:78%; text-shadow:0 3px 22px rgba(0,0,0,.5); opacity:.96; }
  .scene-wrap { position:relative; inset:auto; width:100%; height:calc(100svh - 82px - env(safe-area-inset-top)); min-height:560px; margin:0; overflow:clip; }
  .scene-wrap #scene { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
  .scene-label { top:19%; right:7%; z-index:6; }
  .scene-hint { top:30%; right:7%; z-index:6; }
  .project-index { right:7%; bottom:13%; z-index:6; }
  .mobile-zoom-controls { right:7%; bottom:7%; z-index:10; }
  .works { padding-top:55px; }
  footer { padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
}


/* DEMO006 v5 — mobile one-screen 3D hero */
html, body {
  background:#000 !important;
  overflow-x:hidden !important;
  overscroll-behavior-x:none !important;
}
@media (max-width:520px){
  html, body {
    background:#000 !important;
    color-scheme:dark !important;
  }
  body { min-height:100%; }
  .site-header {
    background:#000 !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    padding-top:env(safe-area-inset-top);
    height:calc(70px + env(safe-area-inset-top));
  }
  main { background:#000 !important; }

  /* The hero is exactly one viewport page on mobile. */
  .hero {
    height:100svh !important;
    min-height:100svh !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    position:relative !important;
    overflow:hidden !important;
    background:#000 !important;
  }
  .hero-copy {
    position:absolute !important;
    left:6% !important;
    right:6% !important;
    top:calc(104px + env(safe-area-inset-top)) !important;
    z-index:7 !important;
    pointer-events:none !important;
  }
  .hero-copy .eyebrow,
  .hero-copy .intro,
  .hero-copy .outline-cta { display:none !important; }
  .hero h1 {
    font-size:13.5vw !important;
    line-height:.82 !important;
    margin:0 !important;
    max-width:78% !important;
  }

  .scene-wrap {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#000 !important;
  }
  .scene-wrap #scene {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }
  .scene-label { top:19% !important; right:7% !important; z-index:8 !important; }
  .scene-hint { top:30% !important; right:7% !important; z-index:8 !important; }
  .project-index { right:7% !important; bottom:13% !important; z-index:8 !important; }

  /* Clean, non-emoji scroll cue. */
  .mobile-scroll-arrow {
    position:absolute;
    left:50%;
    bottom:calc(18px + env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background:rgba(0,0,0,.30);
    color:rgba(255,255,255,.78);
    display:grid;
    place-items:center;
    z-index:15;
    padding:0;
    -webkit-tap-highlight-color:transparent;
    backdrop-filter:blur(4px);
  }
  .mobile-scroll-arrow::before {
    content:"";
    width:9px;
    height:9px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
  }
  .mobile-scroll-arrow:active {
    background:rgba(255,255,255,.08);
    color:#fff;
  }
  .mobile-scroll-arrow span {
    position:absolute;
    width:1px;
    height:8px;
    background:currentColor;
    top:12px;
    opacity:.8;
  }

  .mobile-zoom-controls {
    right:7% !important;
    bottom:calc(17% + env(safe-area-inset-bottom)) !important;
    z-index:14 !important;
  }

  .works { padding-top:60px !important; background:#000 !important; }
  .services,.about,.contact { background:#000 !important; }
  footer {
    background:#000 !important;
    color:#666 !important;
    border-top-color:rgba(255,255,255,.13) !important;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)) !important;
  }
}

/* DEMO006 v6 — clean CSS arrows, true 360° touch rotation + fling */
.arrow-icon{position:relative;width:40px;height:40px;border:1px solid #888;border-radius:50%;display:inline-block;flex:0 0 auto}
.arrow-icon::before{content:"";position:absolute;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;top:14px;left:12px;transform:rotate(45deg)}
.arrow-icon::after{content:"";position:absolute;width:13px;height:1.5px;background:currentColor;top:19px;left:11px;transform:rotate(0deg)}
.talk .arrow-icon{width:13px;height:13px;border:0;border-radius:0;vertical-align:middle;margin-left:15px}
.talk .arrow-icon::before{width:6px;height:6px;top:2px;left:5px;border-width:1px}
.talk .arrow-icon::after{width:8px;height:1px;top:5px;left:1px}
.section-head .link-arrow{position:relative;display:inline-block;width:16px;height:12px;margin-left:8px;vertical-align:-1px}
.section-head .link-arrow::before{content:"";position:absolute;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;right:0;top:1px;transform:rotate(45deg)}
.section-head .link-arrow::after{content:"";position:absolute;width:12px;height:1px;background:currentColor;right:0;top:5px}

@media(max-width:520px){
  .site-header{padding-top:env(safe-area-inset-top);height:calc(70px + env(safe-area-inset-top));background:#000!important}
  .talk .arrow-icon{display:none}
  .outline-cta .arrow-icon{width:40px;height:40px}
  .section-head .link-arrow{width:15px}
}

.zoom-mobile{display:none;}
@media (max-width: 700px){.zoom-desktop{display:none;} .zoom-mobile{display:inline;} .mobile-zoom-controls{display:none !important;}}