/* ============ STUDIO72 — shared stylesheet ============ */
:root{
  --ink:#241B10;
  --ink-soft:#332616;
  --paper:#F7F4F2;
  --paper-2:#FFFFFF;
  --line:#E7DFD5;
  --text:#241B10;
  --text-muted:#7A6F60;
  --text-on-dark:#F7F4F2;
  --text-on-dark-muted:#CBBBA3;

  --accent:#DB8404;
  --accent-dim:#B36A03;
  --accent-2:#2F7D6B;
  --coral:#E06A3A;
  --sky:#3E7D9C;
  --pink:#C1638C;

  --t-lavender:#FBEBD2;
  --t-mint:#E6F1EA;
  --t-peach:#FCE8D8;
  --t-blue:#E9EFEE;
  --t-pink:#FBEAE3;

  --radius:14px;
  --disp:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.16,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:none;border:none;background:none;}

::selection{background:var(--accent); color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:#D9D2EF; border-radius:10px; border:2px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
}
@media (hover:none), (pointer:coarse){
  body, button, a{cursor:auto !important;}
  .cursor-dot,.cursor-ring{display:none !important;}
}

/* grain */
.grain{position:fixed; inset:0; z-index:998; pointer-events:none; opacity:.02; mix-blend-mode:multiply;}

/* cursor */
.cursor-dot, .cursor-ring{position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:999; transform:translate(-50%,-50%); will-change:transform;}
.cursor-dot{width:6px; height:6px; background:var(--accent);}
.cursor-ring{width:36px; height:36px; border:1px solid rgba(219,132,4,.5); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s ease, background .25s ease;}
.cursor-ring.hovered{width:64px; height:64px; background:rgba(219,132,4,.08); border-color:var(--accent);}

/* loader */
.loader{position:fixed; inset:0; z-index:1000; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; transition:opacity .7s var(--ease), visibility .7s var(--ease);}
.loader.done{opacity:0; visibility:hidden;}
.loader-mark{font-family:var(--disp); font-weight:700; font-size:15vw; color:#fff; line-height:1; letter-spacing:-.03em; display:flex; overflow:hidden;}
.loader-mark span{display:inline-block; transform:translateY(110%); animation:loaderUp .7s var(--ease) forwards;}
.loader-mark span:nth-child(2){animation-delay:.06s; color:var(--accent);}
.loader-bar{width:180px; height:2px; background:rgba(246,247,249,.15); overflow:hidden; border-radius:2px;}
.loader-bar i{display:block; height:100%; width:0%; background:var(--accent); animation:loaderFill 1.1s .3s var(--ease) forwards;}
@keyframes loaderUp{to{transform:translateY(0);}}
@keyframes loaderFill{to{width:100%;}}

/* reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.97); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal-scale.in{opacity:1; transform:scale(1);}
.split-line{overflow:hidden; display:block;}
.split-line span{display:inline-block; transform:translateY(115%); opacity:0; animation:lineUp .9s var(--ease) forwards;}
@keyframes lineUp{to{transform:translateY(0); opacity:1;}}

/* eyebrow */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dim); font-weight:500;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent);}
.tick{font-family:var(--mono); font-size:12px; color:var(--text-muted); letter-spacing:.02em;}

/* rail */
.rail{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; align-items:center; gap:14px;}
.rail-track{width:1px; height:120px; background:rgba(34,31,53,.12); position:relative; overflow:hidden;}
.rail-track i{position:absolute; top:0; left:0; width:100%; height:0%; background:var(--accent); transition:height .1s linear;}
.rail span{font-family:var(--mono); font-size:10px; color:var(--text-muted); writing-mode:vertical-rl; letter-spacing:.1em;}
@media (max-width:980px){ .rail{display:none;} }

.magnetic{display:inline-block;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:999px; font-weight:600; font-size:15px; font-family:var(--body); transition:transform .3s var(--ease), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease; white-space:nowrap; position:relative;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 12px 24px -12px rgba(219,132,4,.55);}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 18px 34px -12px rgba(219,132,4,.7);}
.btn-ghost-dark{border:1.5px solid var(--line); color:var(--text); background:rgba(255,255,255,.5);}
.btn-ghost-dark:hover{border-color:var(--accent); color:var(--accent-dim); background:#fff;}
.btn-block{width:100%;}
.btn-arrow{transition:transform .3s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(4px);}

/* nav */
header{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(251,249,255,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; padding:20px 32px; max-width:var(--maxw); margin:0 auto;}
.logo{font-family:var(--disp); font-weight:700; font-size:20px; color:var(--text); letter-spacing:-.01em; display:flex; align-items:baseline; gap:2px;}
.logo span{color:var(--accent);}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{font-size:14px; font-weight:500; color:var(--text-muted); position:relative; padding:4px 0; transition:color .2s ease;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease);}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--text);}
.nav-links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-cta .btn{padding:11px 22px; font-size:13.5px;}
.burger{display:none; flex-direction:column; gap:5px; width:26px;}
.burger span{height:2px; background:var(--text); width:100%; transition:transform .3s ease, opacity .3s ease;}

.mobile-menu{display:none; position:fixed; inset:0; z-index:99; background:var(--ink); padding:100px 32px 40px; flex-direction:column; gap:28px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:var(--disp); font-size:26px; color:#fff; font-weight:600;}
.mobile-menu .btn{margin-top:12px;}

/* hero (home) */
.hero{position:relative; background:linear-gradient(155deg, var(--t-lavender) 0%, var(--t-blue) 45%, var(--t-peach) 100%); color:var(--text); padding:140px 0 0; overflow:hidden;}
.hero-grid{position:absolute; inset:0; z-index:0; opacity:.6; will-change:transform; background-image:linear-gradient(rgba(34,31,53,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(34,31,53,.045) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 20%, transparent 75%);}
.hero-glow{position:absolute; top:-220px; right:-160px; width:640px; height:640px; z-index:0; background:radial-gradient(circle, rgba(219,132,4,.28), transparent 70%); filter:blur(10px); will-change:transform;}
.hero-glow-2{position:absolute; bottom:-260px; left:-180px; width:560px; height:560px; z-index:0; background:radial-gradient(circle, rgba(47,125,107,.22), transparent 70%); will-change:transform;}
.hero-blob{position:absolute; top:60px; left:6%; width:120px; height:120px; border-radius:50%; background:var(--coral); opacity:.18; filter:blur(6px); z-index:0;}
.hero-dial{position:absolute; top:120px; right:60px; width:180px; height:180px; z-index:0; opacity:.7; border:1px solid rgba(34,31,53,.14); border-radius:50%;}
.hero-dial::before{content:""; position:absolute; inset:22px; border:1px solid rgba(34,31,53,.1); border-radius:50%;}
.hero-dial .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-size:13px; color:var(--accent-dim); letter-spacing:.1em;}
@media (max-width:980px){ .hero-dial{display:none;} }

.hero-inner{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.hero-mark{font-family:var(--mono); font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:10px; margin-bottom:30px;}
.hero-mark .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 0 4px rgba(47,125,107,.18); animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(47,125,107,.18);} 50%{box-shadow:0 0 0 8px rgba(47,125,107,.06);}}

h1{font-family:var(--disp); font-weight:700; letter-spacing:-.025em; font-size:clamp(38px, 6vw, 80px); line-height:1.02; max-width:960px; color:var(--text);}
h1 .accent{color:var(--accent);}
.hero-sub{margin-top:28px; max-width:600px; font-size:18px; line-height:1.65; color:var(--text-muted); opacity:0; animation:fadeUp .8s .9s var(--ease) forwards;}
.hero-cta{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; opacity:0; animation:fadeUp .8s 1.05s var(--ease) forwards;}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}

.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:64px; border-top:1px solid rgba(34,31,53,.12); padding:28px 0;}
.hero-stats div{padding-right:20px; border-right:1px solid rgba(34,31,53,.1);}
.hero-stats div:last-child{border-right:none;}
.hero-stats b{font-family:var(--disp); font-size:clamp(24px,3vw,34px); font-weight:700; display:block; color:var(--text);}
.hero-stats span{font-size:12.5px; color:var(--text-muted); font-family:var(--mono); letter-spacing:.02em;}

/* marquee */
.marquee-wrap{background:var(--accent); overflow:hidden; padding:16px 0; position:relative; z-index:1;}
.marquee{display:flex; width:max-content; animation:marquee 28s linear infinite;}
.marquee-track{display:flex; align-items:center; gap:0;}
.marquee span.item{font-family:var(--disp); font-weight:600; font-size:16px; color:#fff; padding:0 28px; white-space:nowrap; display:flex; align-items:center; gap:28px;}
.marquee span.item::after{content:"◆"; font-size:9px; color:rgba(255,255,255,.6);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* page header (inner pages) */
.page-header{position:relative; padding:130px 0 56px; overflow:hidden;}
.page-header.tint-lavender{background:linear-gradient(155deg, var(--t-lavender), var(--paper) 70%);}
.page-header.tint-mint{background:linear-gradient(155deg, var(--t-mint), var(--paper) 70%);}
.page-header.tint-blue{background:linear-gradient(155deg, var(--t-blue), var(--paper) 70%);}
.page-header.tint-peach{background:linear-gradient(155deg, var(--t-peach), var(--paper) 70%);}
.page-header.tint-pink{background:linear-gradient(155deg, var(--t-pink), var(--paper) 70%);}
.breadcrumb{font-family:var(--mono); font-size:12.5px; color:var(--text-muted); margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.breadcrumb a{color:var(--text-muted); transition:color .2s ease;}
.breadcrumb a:hover{color:var(--accent-dim);}
.page-header h1.page-title{font-size:clamp(34px,5.5vw,64px); max-width:760px; line-height:1.06;}
.page-header .hero-sub{animation:none; opacity:1;}

/* section shared */
section{padding:96px 0;}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head h2{font-family:var(--disp); font-weight:700; letter-spacing:-.015em; font-size:clamp(30px,4vw,46px); margin-top:16px; line-height:1.1; color:var(--text);}
.section-head p{margin-top:18px; font-size:17px; line-height:1.7; color:var(--text-muted); max-width:560px;}
.section-mint{background:var(--t-mint);}
.section-peach{background:var(--t-peach);}
.section-lavender{background:var(--t-lavender);}

/* about */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start;}
.about-copy p{font-size:16.5px; line-height:1.8; color:var(--text-muted); margin-bottom:18px;}
.about-copy p:first-child{font-size:20px; color:var(--text); line-height:1.6; font-weight:500;}
.about-panel{background:var(--t-lavender); border:1px solid var(--line); border-radius:var(--radius); padding:36px; position:relative; overflow:hidden;}
.about-panel::before{content:"72"; position:absolute; right:-16px; bottom:-40px; font-family:var(--disp); font-weight:700; font-size:180px; color:rgba(219,132,4,.08); line-height:1; pointer-events:none;}
.about-list{display:flex; flex-direction:column; gap:0; position:relative;}
.about-list li{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid rgba(34,31,53,.1); font-family:var(--mono); font-size:14px; color:var(--text-muted); transition:padding-left .3s var(--ease);}
.about-list li:hover{padding-left:6px; color:var(--accent-dim);}
.about-list li:last-child{border-bottom:none;}
.about-list li b{color:var(--text); font-family:var(--body); font-weight:600; font-size:15px;}

.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:64px;}
.value-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;}
.value-card h3{font-family:var(--disp); font-size:17px; font-weight:600; margin-bottom:10px;}
.value-card p{font-size:14.5px; color:var(--text-muted); line-height:1.6;}
@media (max-width:980px){ .value-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .value-grid{grid-template-columns:1fr;} }

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.svc-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:34px 26px; position:relative; transition:background .35s ease, transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease; display:flex; flex-direction:column; gap:18px; min-height:220px; overflow:hidden;}
.svc-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);}
.svc-card:nth-child(4n+1)::before{background:var(--accent);}
.svc-card:nth-child(4n+2)::before{background:var(--accent-2);}
.svc-card:nth-child(4n+3)::before{background:var(--coral);}
.svc-card:nth-child(4n+4)::before{background:var(--sky);}
.svc-card:hover{transform:translateY(-4px); box-shadow:0 20px 32px -20px rgba(34,31,53,.18); border-color:transparent;}
.svc-card:hover::before{transform:scaleX(1);}
.svc-icon{width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background .35s ease, color .35s ease;}
.svc-card:nth-child(4n+1) .svc-icon{background:var(--t-lavender); color:var(--accent);}
.svc-card:nth-child(4n+2) .svc-icon{background:var(--t-mint); color:var(--accent-2);}
.svc-card:nth-child(4n+3) .svc-icon{background:var(--t-peach); color:var(--coral);}
.svc-card:nth-child(4n+4) .svc-icon{background:var(--t-blue); color:var(--sky);}
.svc-card:hover .svc-icon{transform:translateY(-4px) rotate(-4deg);}
.svc-num{font-family:var(--mono); font-size:12px; color:var(--text-muted); opacity:.6;}
.svc-card h3{font-family:var(--disp); font-size:18px; font-weight:600; margin-top:2px; color:var(--text);}
.svc-card p{font-size:14.5px; line-height:1.6; color:var(--text-muted);}
.svc-card .svc-extra{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--accent-dim);}
@media (max-width: 980px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 620px){ .svc-grid{grid-template-columns:1fr;} }

/* why */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.why-card{position:relative; padding:32px 28px 30px; border-radius:var(--radius); background:var(--paper-2); border:1px solid var(--line); transition:border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;}
.why-card:hover{transform:translateY(-4px); box-shadow:0 20px 32px -20px rgba(34,31,53,.16); border-color:transparent;}
.why-card::before{content:""; position:absolute; top:0; left:28px; right:28px; height:3px; border-radius:0 0 3px 3px;}
.why-card:nth-child(6n+1)::before{background:var(--accent);}
.why-card:nth-child(6n+2)::before{background:var(--accent-2);}
.why-card:nth-child(6n+3)::before{background:var(--coral);}
.why-card:nth-child(6n+4)::before{background:var(--sky);}
.why-card:nth-child(6n+5)::before{background:var(--pink);}
.why-card:nth-child(6n+6)::before{background:var(--accent);}
.why-card .idx{font-family:var(--mono); font-size:12px; color:var(--accent-dim); letter-spacing:.05em;}
.why-card h3{font-family:var(--disp); font-size:19px; font-weight:600; margin:14px 0 10px; color:var(--text);}
.why-card p{font-size:14.5px; line-height:1.65; color:var(--text-muted);}
@media (max-width: 980px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 620px){ .why-grid{grid-template-columns:1fr;} }

/* portfolio */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.work-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; transition:transform .4s var(--ease), box-shadow .4s ease;}
.work-card:hover{transform:translateY(-8px); box-shadow:0 30px 50px -24px rgba(34,31,53,.22);}
.work-visual{height:190px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.work-visual::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size:22px 22px; transition:transform .6s var(--ease);}
.work-card:hover .work-visual::before{transform:scale(1.15) rotate(2deg);}
.work-visual span{position:relative; font-family:var(--mono); color:rgba(255,255,255,.95); font-size:13px; letter-spacing:.04em; border:1px solid rgba(255,255,255,.5); padding:6px 14px; border-radius:999px; backdrop-filter:blur(4px); transition:transform .4s var(--ease);}
.work-card:hover .work-visual span{transform:scale(1.06);}
.work-body{padding:24px 26px 28px;}
.work-tag{font-family:var(--mono); font-size:11.5px; color:var(--accent-dim); letter-spacing:.06em; text-transform:uppercase;}
.work-body h3{font-family:var(--disp); font-size:18px; font-weight:600; margin:10px 0 8px; color:var(--text);}
.work-body p{font-size:14px; color:var(--text-muted); line-height:1.6;}
@media (max-width: 980px){ .work-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 620px){ .work-grid{grid-template-columns:1fr;} }

/* CTA strip */
.cta-strip{background:linear-gradient(120deg, var(--accent), var(--accent-dim)); color:#fff; border-radius:20px; padding:64px 56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden;}
.cta-strip::after{content:"72"; position:absolute; right:-10px; bottom:-70px; font-family:var(--disp); font-weight:700; font-size:280px; color:rgba(255,255,255,.1); line-height:1; pointer-events:none;}
.cta-strip h2{font-family:var(--disp); font-size:clamp(26px,3.4vw,38px); font-weight:700; max-width:520px; position:relative; z-index:1;}
.cta-strip .btn-primary{background:#fff; color:var(--accent-dim); position:relative; z-index:1; box-shadow:none;}
.cta-strip .btn-primary:hover{box-shadow:0 18px 30px -12px rgba(0,0,0,.2);}

/* contact */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px;}
.contact-info h2{font-family:var(--disp); font-size:clamp(28px,3.6vw,40px); font-weight:700; line-height:1.15; margin-top:16px; color:var(--text);}
.contact-info p{margin-top:18px; font-size:16px; line-height:1.7; color:var(--text-muted); max-width:420px;}
.contact-channels{margin-top:40px; display:flex; flex-direction:column; gap:0;}
.contact-channels a, .contact-channels div{display:flex; align-items:center; gap:14px; padding:18px 0; border-bottom:1px solid rgba(34,31,53,.1); font-size:15px; color:var(--text-muted); transition:color .2s ease, padding-left .3s var(--ease);}
.contact-channels a:hover{color:var(--accent-dim); padding-left:6px;}
.channel-ic{width:38px; height:38px; border-radius:9px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent-2); flex-shrink:0;}
.channel-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); display:block; margin-bottom:3px;}
.channel-val{color:var(--text); font-weight:500; font-size:15px;}

.form-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:42px; position:relative;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:20px;}
.field label{display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:9px;}
.field input, .field select, .field textarea{width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:9px; font-family:var(--body); font-size:14.5px; color:var(--text); background:var(--paper); transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px rgba(219,132,4,.12);}
.field textarea{resize:vertical; min-height:110px;}
.form-note{font-size:12.5px; color:var(--text-muted); margin-top:16px; line-height:1.5;}

.map-block{margin-top:64px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:320px;}
.map-block iframe{width:100%; height:100%; border:0; display:block;}

@media (max-width: 980px){
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:48px;}
  .form-row{grid-template-columns:1fr;}
  .cta-strip{padding:48px 32px;}
}

/* footer */
footer{background:var(--ink); color:var(--text-on-dark-muted); padding:64px 0 32px; border-top:1px solid rgba(246,247,249,.08);}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid rgba(246,247,249,.08);}
.footer-brand .logo{margin-bottom:14px; color:#fff;}
.footer-brand .logo span{color:var(--accent);}
.footer-brand p{max-width:320px; font-size:14px; line-height:1.7;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:16px;}
.footer-col a{display:block; font-size:14px; margin-bottom:12px; transition:color .2s ease;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:12px;}
.footer-bottom p{font-size:13px; font-family:var(--mono);}
.footer-social{display:flex; gap:14px;}
.footer-social a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(246,247,249,.2); display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, color .2s ease;}
.footer-social a:hover{border-color:var(--accent); color:var(--accent);}

/* whatsapp float */
.wa-float{position:fixed; bottom:26px; right:26px; z-index:90; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.3); transition:transform .3s var(--ease);}
.wa-float:hover{transform:scale(1.08);}

@media (max-width: 860px){
  body{cursor:auto;}
  .nav-links, .nav-cta .btn-ghost-dark{display:none;}
  .burger{display:flex;}
  .hero{padding:104px 0 0;}
  .hero-mark{margin-bottom:18px;}
  .hero-sub{margin-top:16px; font-size:16px;}
  .hero-cta{margin-top:26px; gap:12px;}
  .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:22px; margin-top:40px; padding:22px 0;}
  .hero-stats div:nth-child(2){border-right:none;}
  section{padding:56px 0;}
  .wrap{padding:0 22px;}
  .hero-inner{padding:0 22px;}
  .page-header{padding:104px 0 36px;}
  .section-head{margin-bottom:36px;}
  .about-grid, .work-grid{gap:28px;}
  .value-grid{gap:16px; margin-top:36px;}
  .svc-grid, .why-grid{gap:16px;}
  .cta-strip{padding:40px 24px !important;}
}

/* scroll cue */
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0; animation:fadeUp .8s 1.3s var(--ease) forwards;}
.scroll-cue span{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--text-muted); text-transform:uppercase;}
.scroll-cue i{width:1px; height:26px; background:linear-gradient(var(--text-muted), transparent); position:relative; overflow:hidden;}
.scroll-cue i::after{content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent); animation:scrollDrip 1.8s ease-in-out infinite;}
@keyframes scrollDrip{0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}}
@media (max-width:860px){ .scroll-cue{bottom:14px;} }

/* ============ process page ============ */
.process-tabs{display:inline-flex; gap:6px; padding:6px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; margin-bottom:48px; flex-wrap:wrap;}
.tab-btn{font-family:var(--body); font-weight:600; font-size:14px; color:var(--text-muted); padding:12px 22px; border-radius:999px; transition:background .25s var(--ease), color .25s var(--ease);}
.tab-btn.active{background:var(--accent); color:#fff;}
.tab-btn:not(.active):hover{color:var(--text);}

.process-meta{display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:28px;}
.process-meta > div{flex:1; min-width:160px; padding:20px 24px; border-right:1px solid var(--line);}
.process-meta > div:last-child{border-right:none;}
.process-meta span{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;}
.process-meta b{font-family:var(--disp); font-size:16px; font-weight:600; color:var(--text);}

.process-intro{font-size:17px; line-height:1.7; color:var(--text-muted); max-width:680px; margin-bottom:56px;}

.step-block{border-top:1px solid var(--line); padding:48px 0;}
.step-block:first-of-type{border-top:none; padding-top:0;}
.step-head{display:flex; align-items:baseline; gap:18px; margin-bottom:14px;}
.step-num{font-family:var(--disp); font-weight:700; font-size:15px; color:var(--accent); letter-spacing:.04em;}
.step-head h3{font-family:var(--disp); font-weight:700; font-size:clamp(22px,2.6vw,30px); color:var(--text);}
.step-desc{font-size:16px; line-height:1.7; color:var(--text-muted); max-width:680px; margin-bottom:32px;}

.step-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:start;}
.activity-list{display:flex; flex-direction:column; gap:20px;}
.activity-list li{padding-left:26px; position:relative;}
.activity-list li::before{content:"—"; position:absolute; left:0; top:1px; color:var(--accent);}
.activity-list b{display:block; font-size:15px; font-weight:600; color:var(--text); margin-bottom:3px;}
.activity-list span{font-size:14.5px; line-height:1.6; color:var(--text-muted);}

.expect-box{background:var(--t-lavender); border-radius:var(--radius); padding:26px;}
.expect-box .tick{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent-dim); margin-bottom:10px;}
.expect-box p{font-size:14.5px; line-height:1.7; color:var(--text);}

@media (max-width:760px){
  .step-grid{grid-template-columns:1fr; gap:22px;}
  .process-meta > div{border-right:none; border-bottom:1px solid var(--line);}
  .process-meta > div:last-child{border-bottom:none;}
  .step-block{padding:32px 0;}
  .tab-btn{padding:10px 16px; font-size:13px;}
}