/* RHZ Tech Studio: pure black (#000000) and white (#FFFFFF) only. Dark is primary; light via prefers-color-scheme.
   Mobile-first: base rules are for phones; min-width queries at 600px, 761px (menu) and 1024px scale up. */
:root{--bg:#000000;--fg:#FFFFFF;--pad:max(20px,env(safe-area-inset-left),env(safe-area-inset-right));--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.25rem;--s5:3.5rem;--ease:cubic-bezier(.2,.7,.2,1);
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color-scheme:dark}
@media (prefers-color-scheme:light){:root{--bg:#FFFFFF;--fg:#000000;color-scheme:light}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--font);letter-spacing:-.005em;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--fg);color:var(--bg)}
.wrap{width:100%;padding-left:var(--pad);padding-right:var(--pad)}
a{color:var(--fg);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-6rem;background:var(--fg);color:var(--bg);padding:.75rem 1rem;z-index:50;font-weight:600}
.skip:focus{top:calc(.5rem + env(safe-area-inset-top))}
/* header (logo 120px; clear space = padding + built-in SVG margin >= 0.618 of the wordmark cap height) */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--fg);padding-top:env(safe-area-inset-top)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.brand{display:inline-block;line-height:0;flex:none}
.brand-head{padding:10px 10px 10px 0}.brand-foot{padding:11px 11px 11px 0}
.logo{display:block;height:auto}.brand-head .logo{width:120px}.brand-foot .logo{width:124px}
nav ul{list-style:none;margin:0;padding:0}
nav a{color:var(--fg);text-decoration:none;display:flex;align-items:center;min-height:44px;min-width:44px;font-weight:500}
.menu-btn{display:none;background:var(--bg);border:1px solid var(--fg);width:44px;height:44px;color:var(--fg);cursor:pointer;padding:0;border-radius:8px}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:var(--fg);margin:auto;position:relative;transition:transform .25s var(--ease)}
.burger::before,.burger::after{content:"";position:absolute;left:0}.burger::before{top:-6px}.burger::after{top:6px}
.menu-open .burger{background:var(--bg)}.menu-open .burger::before{transform:translateY(6px) rotate(45deg)}.menu-open .burger::after{transform:translateY(-6px) rotate(-45deg)}
/* phone menu: full-width sheet under the header */
.js .menu-btn{display:inline-block}
.js #site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--fg);padding:var(--s1) var(--pad) var(--s3)}
.js.menu-open #site-nav{display:block}
.js #site-nav a{font-size:17px;font-weight:600;letter-spacing:-.01em;min-height:52px;border-bottom:1px solid var(--fg)}
html:not(.js) .bar{flex-wrap:wrap;padding-bottom:.5rem}html:not(.js) #site-nav ul{display:flex;flex-wrap:wrap;gap:0 1.25rem}
@media (min-width:761px){
 .js .menu-btn{display:none}
 .js #site-nav,#site-nav{display:block;position:static;padding:0;border:0;background:none}
 #site-nav ul{display:flex;align-items:center;gap:1.5rem}
 #site-nav a{justify-content:center}
 .js #site-nav a,#site-nav a{font-size:14px;font-weight:500;min-height:44px;border:0;letter-spacing:0}
 #site-nav a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
 #site-nav a:hover{text-decoration:underline;text-underline-offset:.35em}
 .nav-cta a{border:1px solid var(--fg)!important;border-radius:999px;padding:0 1rem}
 .nav-cta a:hover{background:var(--fg);color:var(--bg);text-decoration:none!important}}
/* type: smaller, refined, Apple-like */
h1,h2,h3{font-weight:700;text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-size:34px;line-height:1.07}
h2{font-size:24px;line-height:1.12;margin-bottom:var(--s1)}
h3{font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 var(--s2);max-width:62ch}
.eyebrow,.foot-h,.mail-label,.meta dt,.badge,.pill,.chips li,figcaption{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s2)}
.eyebrow::before{content:"";width:1.5rem;height:1px;background:var(--fg);flex:none}
.lead{font-size:17px;line-height:1.45;max-width:34ch;margin-top:var(--s2)}
.body-l{font-size:17px}
.tag{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s1)}
.display{font-size:40px;line-height:1.02;letter-spacing:-.03em}
/* hero: full viewport */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--fg)}
.hero-grid{display:grid;gap:var(--s4);width:100%}
.pill{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--fg);border-radius:999px;padding:.45rem .9rem;margin-bottom:var(--s3);letter-spacing:.03em;text-transform:none;font-size:13px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--fg);flex:none}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s3);max-width:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;background:var(--fg);color:var(--bg);font-weight:600;font-size:15px;text-decoration:none;padding:0 1.25rem;border:1px solid var(--fg);border-radius:999px;transition:transform .2s var(--ease);flex:1 1 100%}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--bg);color:var(--fg)}.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.arr{display:inline-block;transition:transform .2s var(--ease)}a:hover .arr{transform:translateX(3px)}
.hero-art{order:-1}
.eq{display:flex;align-items:center;justify-content:center;gap:8px;height:clamp(120px,22svh,180px);padding:16px;border:1px solid var(--fg);border-radius:16px}
.eq span{width:6px;border-radius:3px;background:var(--fg);height:40%;transform-origin:center}
.eq span:nth-child(1),.eq span:nth-child(9){height:22%}.eq span:nth-child(2),.eq span:nth-child(8){height:42%}.eq span:nth-child(3),.eq span:nth-child(7){height:68%}.eq span:nth-child(4),.eq span:nth-child(6){height:52%}.eq span:nth-child(5){height:88%}
@media (prefers-reduced-motion:no-preference){.eq span{animation:eq 1.6s ease-in-out infinite}.eq span:nth-child(odd){animation-delay:-.8s}.eq span:nth-child(3n){animation-delay:-.4s}}
@keyframes eq{50%{transform:scaleY(.6)}}
/* sections */
.section{padding-top:var(--s5);padding-bottom:var(--s5);border-top:1px solid var(--fg)}
.hero+.section{border-top:0}
.sec-head{margin-bottom:var(--s3)}
.card{background:var(--bg);border:1px solid var(--fg);border-radius:16px;padding:var(--s3);transition:transform .25s var(--ease)}
.principles{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.principles h3{margin:var(--s2) 0 .35rem}.principles p{margin:0}
.ico{display:block;width:36px;height:36px;border:1px solid var(--fg);border-radius:8px;position:relative}
.ico::after{content:"";position:absolute;inset:30%;background:var(--fg)}
.ico-1::after{border-radius:50%}.ico-2::after{inset:22% 34%}.ico-3::after{transform:rotate(45deg);inset:33%}.ico-4::after{inset:30% 26%;clip-path:polygon(0 50%,35% 85%,100% 10%,100% 30%,35% 100%,0 70%)}
.showcase{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:var(--s5) 0;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);scroll-margin-top:4rem}
.feature{display:grid;gap:var(--s4);align-items:center;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:var(--s2) 0 var(--s3)}
.chips li{border:1px solid var(--fg);border-radius:999px;padding:.3rem .75rem;letter-spacing:.03em;text-transform:none}
.chips li:first-child{background:var(--fg);color:var(--bg)}
.more{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--fg)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);border-top:1px solid var(--fg);padding-top:var(--s3);margin:var(--s3) 0 0}
.meta dt{margin-bottom:.15rem}.meta dd{margin:0}
.phone{width:min(62vw,240px);margin:0 auto}
.phone svg{width:100%;height:auto;display:block}
.ph-body{fill:var(--fg)}.ph-screen{fill:var(--bg)}.ph-island{fill:var(--fg)}.ph-pic{fill:var(--bg);stroke:var(--fg);stroke-width:2}.ph-play{fill:var(--fg)}.ph-tri{fill:var(--bg)}
.ph-beats rect{fill:var(--fg)}.ph-clips rect{fill:var(--bg);stroke:var(--fg);stroke-width:2}.ph-clips rect:nth-child(2){fill:var(--fg)}
.ph-wave{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linecap:round}.ph-head{fill:var(--fg)}.ph-flash{display:none}
@media (prefers-reduced-motion:no-preference){.ph-beats rect{animation:pulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.ph-beats rect:nth-child(2n){animation-delay:.6s}.ph-head{animation:sweep 5s linear infinite}}
@keyframes pulse{50%{transform:scaleY(.6)}}@keyframes sweep{from{transform:translateX(-80px)}to{transform:translateX(80px)}}
figcaption{text-align:center;margin-top:var(--s2);letter-spacing:.03em;text-transform:none}
.grid{display:grid;gap:12px}
.soon{border-style:dashed}
.soon-art{height:96px;margin-bottom:var(--s3);border:1px solid var(--fg);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:.5rem}
.soon-art span{width:6px;height:6px;border-radius:50%;background:var(--fg)}
@media (prefers-reduced-motion:no-preference){.soon-art span{animation:bob 1.6s ease-in-out infinite}.soon-art span:nth-child(2){animation-delay:.2s}.soon-art span:nth-child(3){animation-delay:.4s}}
@keyframes bob{50%{transform:translateY(-4px)}}
.badge{display:inline-block;margin:var(--s1) 0 0;border:1px solid var(--fg);border-radius:999px;padding:.25rem .7rem}
.slot{border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:140px}
.slot-plus{width:32px;height:32px;position:relative}.slot-plus::before,.slot-plus::after{content:"";position:absolute;background:var(--fg);left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}.slot-plus::after{transform:translateX(-50%) rotate(90deg)}
.band{padding-top:var(--s5);padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);text-align:center}
.band h2{margin-bottom:var(--s1)}.band p{margin-left:auto;margin-right:auto;max-width:40ch}
.band a{color:var(--bg)}.band .cta{justify-content:center;max-width:28rem}.band .btn{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.band .btn.ghost{background:var(--fg);color:var(--bg);border-color:var(--bg)}
.band :focus-visible{outline-color:var(--bg)}
.head{padding-top:var(--s5);padding-bottom:var(--s4)}
.toc{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:var(--s3) 0 0}
.toc a{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--fg);border-radius:999px;padding:0 1rem;text-decoration:none;font-weight:600}.toc a:hover{background:var(--fg);color:var(--bg)}
.two-col{display:grid;gap:var(--s2)}
.prose{padding-bottom:var(--s5)}.prose h2{font-size:20px;margin-top:var(--s4)}.prose ul{padding-left:1.2rem;max-width:62ch}.prose li{margin:.3rem 0}
.contact-grid{display:grid;gap:var(--s3);padding-bottom:var(--s5)}
.h3{font-size:18px;margin:0 0 var(--s2)}.contact-grid .card .h3+ul+.h3{margin-top:var(--s3)}
.mail-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem var(--s2);border:1px solid var(--fg);border-radius:16px;padding:var(--s3);text-decoration:none;color:var(--fg);margin-bottom:var(--s3);transition:transform .2s var(--ease)}
.mail-card:hover{transform:translateY(-2px)}
.mail-label{grid-column:1}.mail-addr{grid-column:1;font-size:19px;font-weight:600;letter-spacing:-.01em;word-break:break-all}
.mail-go{grid-column:2;grid-row:1/3;font-size:22px;transition:transform .2s var(--ease)}.mail-card:hover .mail-go{transform:translateX(4px)}
.ticks{list-style:none;padding:0;margin:0 0 var(--s3)}.ticks li{padding:.3rem 0 .3rem 1.6rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.7rem;width:.8rem;height:.4rem;border-left:2px solid var(--fg);border-bottom:2px solid var(--fg);transform:rotate(-45deg)}
.nf-num{font-size:96px;font-weight:700;letter-spacing:-.04em;line-height:1;margin:0 0 var(--s2)}
/* footer */
.foot{border-top:1px solid var(--fg);background:var(--bg);padding-bottom:env(safe-area-inset-bottom)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding:var(--s4) 0 var(--s2)}
.foot-brand{grid-column:1/-1}
.foot-h{margin:0 0 .25rem}
.foot nav a{font-size:14px;font-weight:400}.foot nav a:hover{text-decoration:underline}
.foot-brand p{margin-top:var(--s1);font-size:14px}
.foot .copy{max-width:none;border-top:1px solid var(--fg);padding:var(--s2) 0 var(--s3);margin:0;font-size:13px}
/* reveal: transform only, text always fully solid */
.rv .reveal{transform:translateY(14px);transition:transform .6s var(--ease)}
.rv .reveal.in{transform:none}
/* small tablets */
@media (min-width:600px){
 :root{--pad:max(32px,env(safe-area-inset-left),env(safe-area-inset-right))}
 h1{font-size:44px}h2{font-size:30px}.display{font-size:52px}
 .btn{flex:0 0 auto}
 .principles{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr 1fr}
 .eq{height:140px;gap:12px}.eq span{width:8px}
 .meta{grid-template-columns:repeat(4,1fr)}}
/* desktop: full-bleed sections, wider grids; body text keeps a readable measure */
@media (min-width:1024px){
 :root{--pad:max(64px,4.5vw);--s5:5rem}
 body{font-size:17px}
 h1{font-size:clamp(48px,4.4vw,64px)}h2{font-size:clamp(32px,2.8vw,40px)}h3{font-size:20px}.display{font-size:clamp(56px,5vw,72px)}
 .lead{font-size:21px}.tag{font-size:24px}.body-l{font-size:19px}
 .hero-grid{grid-template-columns:1.4fr 1fr;align-items:center;gap:var(--s5)}
 .hero-art{order:0}.eq{height:clamp(220px,26vw,360px);gap:16px;padding:32px;border-radius:24px}.eq span{width:12px;border-radius:6px}
 .principles{grid-template-columns:repeat(4,1fr);gap:16px}
 .feature{grid-template-columns:1.2fr 1fr;gap:var(--s5)}.phone{width:min(26vw,320px)}
 .grid{grid-template-columns:repeat(3,1fr);gap:16px}
 .two-col{grid-template-columns:1fr 2fr;gap:var(--s5)}
 .contact-grid{grid-template-columns:1.2fr 1fr;gap:var(--s5);align-items:start}
 .mail-addr{font-size:28px}
 .foot-grid{grid-template-columns:2fr 1fr 1fr}.foot-brand{grid-column:auto}
 .nf-num{font-size:160px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}