/* ===== GAINESVILLE WEB DESIGN — styles.css ===== */
:root{
  --base:#0A0C0B;--base-2:#101413;--base-3:#161B19;--base-4:#1C2321;
  --green:#1FC168;--green-2:#3BE089;--gold:#D3A747;--gold-2:#F0D08A;
  --paper:#F4F7F5;--muted:#94A29C;--muted-2:#6E7A75;
  --line:rgba(244,247,245,.08);--line-2:rgba(244,247,245,.14);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--paper);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:linear-gradient(90deg,var(--green),var(--gold-2));transition:width .1s linear;box-shadow:0 0 10px var(--green)}

/* ===== HEADER / NAV ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .45s var(--ease)}
header.scrolled{background:rgba(10,12,11,.72);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;position:relative;z-index:2}
.logo{display:flex;align-items:center}
.logo-img{height:42px;width:auto}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks>a,.mega-trigger{font-size:14.5px;font-weight:500;color:var(--muted);position:relative;transition:color .25s;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.navlinks>a::after,.mega-trigger::after{content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .35s var(--ease)}
.navlinks>a:hover,.mega-trigger:hover{color:var(--paper)}
.navlinks>a:hover::after,.has-mega:hover .mega-trigger::after,.has-mega.open .mega-trigger::after{width:100%}
.caret{font-size:9px;opacity:.7;transition:transform .3s}
.has-mega:hover .caret,.has-mega.open .caret{transform:rotate(180deg)}
.btn{font-family:'Inter';font-weight:600;font-size:14.5px;padding:13px 25px;border-radius:100px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#04140b;display:inline-flex;align-items:center;gap:9px;position:relative;overflow:hidden;cursor:pointer;border:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:0 6px 24px -8px rgba(31,193,104,.7)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4),transparent 70%);transform:translateX(-120%);transition:transform .65s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px rgba(31,193,104,.85)}
.btn:hover::before{transform:translateX(120%)}
.btn .arrow{transition:transform .3s var(--ease)}.btn:hover .arrow{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--green);background:rgba(31,193,104,.06)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1204;box-shadow:0 6px 24px -8px rgba(211,167,71,.7)}
.menu-btn{display:none;background:none;border:none;color:var(--paper);cursor:pointer}

/* ===== MEGA MENU ===== */
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(10px);width:min(920px,calc(100vw - 48px));opacity:0;visibility:hidden;transition:all .35s var(--ease);z-index:120}
.has-mega::after{content:"";position:absolute;top:100%;left:0;right:0;height:26px}
.has-mega:hover .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-inner{background:linear-gradient(165deg,var(--base-3),var(--base-2));border:1px solid var(--line-2);border-radius:20px;padding:26px;display:grid;grid-template-columns:.85fr 1.4fr;gap:26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.mega-col-head .eyebrow{margin-bottom:12px}
.mega-col-head h4{font-size:1.3rem;margin-bottom:10px}
.mega-col-head p{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.mega-all{font-size:13.5px;font-weight:600;color:var(--gold-2)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mega-item{display:flex;gap:13px;padding:13px;border-radius:13px;transition:background .25s}
.mega-item:hover{background:rgba(31,193,104,.07)}
.mega-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(31,193,104,.16),rgba(211,167,71,.1));border:1px solid var(--line-2)}
.mega-ic svg{width:19px;height:19px;stroke:var(--green-2)}
.mega-txt b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.mega-txt small{font-size:12px;color:var(--muted);line-height:1.4}
.mega-areas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-content:start}
.area-link{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:11px;font-size:14px;font-weight:500;color:var(--muted);transition:all .25s}
.area-link:hover{background:rgba(31,193,104,.07);color:var(--paper)}
.area-dot{color:var(--gold);font-size:8px}

/* ===== MOBILE DRAWER ===== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:all .4s var(--ease);z-index:190}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--base-2);border-left:1px solid var(--line-2);transform:translateX(100%);transition:transform .4s var(--ease);z-index:200;padding:22px;overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.drawer-logo{height:34px}
.drawer-close{background:none;border:none;color:var(--paper);font-size:22px;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;gap:4px}
.drawer-link{padding:15px 4px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc-head{width:100%;background:none;border:none;color:var(--paper);font-size:16px;font-weight:500;padding:15px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:'Inter'}
.acc-head span{color:var(--gold);transition:transform .3s}
.acc.open .acc-head span{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-body a{display:block;padding:11px 16px;font-size:14.5px;color:var(--muted)}
.acc-body a:hover{color:var(--paper)}

/* ===== HERO ===== */
.hero{position:relative;padding:172px 0 96px;overflow:hidden}
.aurora{position:absolute;inset:-25% -10% auto;height:700px;z-index:0;filter:blur(80px);opacity:.5;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 18s var(--ease) infinite alternate}
.aurora .a{width:560px;height:560px;background:radial-gradient(circle,rgba(31,193,104,.55),transparent 65%);top:-80px;left:6%}
.aurora .b{width:520px;height:520px;background:radial-gradient(circle,rgba(211,167,71,.45),transparent 65%);top:30px;right:8%;animation-delay:-6s}
.aurora .c{width:440px;height:440px;background:radial-gradient(circle,rgba(59,224,137,.35),transparent 65%);top:140px;left:40%;animation-delay:-11s}
@keyframes drift{to{transform:translate(46px,34px) scale(1.14)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.9rem,6vw,5rem);font-weight:600;margin:22px 0 20px;letter-spacing:-.03em}
.hero .sub{font-family:'Fraunces';font-size:clamp(1.2rem,2vw,1.5rem);font-weight:500;color:var(--paper);margin-bottom:18px}
.hero .sub .accent{font-style:italic;font-weight:500;background:linear-gradient(120deg,var(--green-2),var(--gold-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{font-size:1.16rem;color:var(--muted);max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.trust{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.stars{color:var(--gold-2);letter-spacing:2px}
.stats{display:flex;gap:40px;flex-wrap:wrap;margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.stat .num{font-family:'Fraunces';font-size:2.4rem;font-weight:600;line-height:1}
.stat .num .u{color:var(--gold-2)}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:7px}
.hero-visual{position:relative}
.hero-img{border-radius:20px;overflow:hidden;border:1px solid var(--line-2);position:relative;box-shadow:0 50px 90px -40px rgba(0,0,0,.85);aspect-ratio:4/3;background:linear-gradient(150deg,var(--base-3),var(--base-2))}
.hero-img img{width:100%;height:100%;object-fit:cover}
.img-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted-2);font-size:12.5px;background:linear-gradient(150deg,var(--base-3),var(--base-2));gap:8px}
.img-ph .ico{font-size:26px;opacity:.5}
.serp{position:absolute;bottom:-26px;right:-18px;width:290px;background:linear-gradient(160deg,var(--base-3),var(--base-2));border:1px solid var(--line-2);border-radius:16px;padding:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.85);transform-style:preserve-3d;transition:transform .3s var(--ease)}
.serp::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(140deg,rgba(31,193,104,.5),transparent 40%,rgba(211,167,71,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.serp-bar{background:var(--base);border:1px solid var(--line);border-radius:100px;padding:7px 12px;font-size:11.5px;color:var(--muted);margin-bottom:12px;display:flex;gap:7px}
.serp-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;margin-bottom:6px}
.serp-row.hot{background:linear-gradient(100deg,rgba(31,193,104,.14),transparent);border:1px solid rgba(31,193,104,.3)}
.serp-rank{font-family:'Fraunces';font-weight:700;font-size:13px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--base);color:var(--muted);flex:none}
.serp-row.hot .serp-rank{background:linear-gradient(135deg,var(--green),var(--green-2));color:#04140b}
.serp-txt .t{font-size:12px;font-weight:600}.serp-txt .d{font-size:10px;color:var(--muted)}
.serp-row.hot .serp-txt .t{color:var(--green-2)}
.serp-badge{position:absolute;top:-11px;left:16px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1204;font-size:10.5px;font-weight:700;padding:5px 12px;border-radius:100px;letter-spacing:.03em;box-shadow:0 8px 20px -8px rgba(211,167,71,.7)}

/* ===== LOGO MARQUEE ===== */
.logos-sec{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--base-2)}
.logos-label{text-align:center;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:22px}
.marquee{display:flex;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;gap:52px;padding-right:52px;white-space:nowrap;animation:scrollL 38s linear infinite}
.marquee:hover .logo-track{animation-play-state:paused}
.logo-track .li{display:flex;align-items:center;gap:11px;color:var(--muted);font-family:'Fraunces';font-weight:600;font-size:1.1rem;opacity:.75;transition:opacity .3s}
.logo-track .li:hover{opacity:1;color:var(--paper)}
.logo-track .li .mk{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,rgba(31,193,104,.2),rgba(211,167,71,.15));border:1px solid var(--line-2);display:grid;place-items:center;font-size:13px;color:var(--gold-2)}
@keyframes scrollL{to{transform:translateX(-50%)}}
.shot-marquee{margin-top:6px}
.shot-track{display:flex;gap:26px;padding-right:26px;animation:scrollL 55s linear infinite}
.shot-marquee:hover .shot-track{animation-play-state:paused}
.shot-track .shot-card{position:relative;flex:0 0 auto;width:480px;height:300px;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 20px 40px rgba(0,0,0,.25);display:block}
.shot-track .shot-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s}
.shot-track .shot-card:hover img{transform:scale(1.06)}
.shot-track .shot-card .shot-label{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);color:#fff;font-family:'Fraunces';font-weight:600;font-size:.95rem}


/* ===== SECTIONS ===== */
.pad{padding:104px 0}
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head.center{margin:0 auto 56px;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4vw,3.1rem);margin:16px 0 16px}
.sec-head p{color:var(--muted);font-size:1.1rem}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* intro */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.intro .imgcol{border-radius:20px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:5/4;position:relative;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.intro h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:20px}
.intro p{color:var(--muted);margin-bottom:16px}
.intro .checks{list-style:none;margin-top:24px}
.intro .checks li{display:flex;gap:12px;margin-bottom:13px;color:var(--paper);font-size:.98rem}
.intro .checks li .c{color:var(--green-2);flex:none;margin-top:2px}

/* premium service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;border-radius:20px;padding:1px;background:linear-gradient(160deg,var(--line-2),transparent 45%);transition:transform .45s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(140deg,var(--green),var(--gold-2));opacity:0;transition:opacity .45s;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card:hover{transform:translateY(-8px)}
.card:hover::after{opacity:1}
.card-inner{position:relative;border-radius:19px;padding:34px 30px;height:100%;background:linear-gradient(170deg,var(--base-3),var(--base-2));overflow:hidden;display:block}
.card-inner::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(460px circle at var(--mx,50%) var(--my,-10%),rgba(31,193,104,.16),transparent 55%);transition:opacity .45s}
.card:hover .card-inner::before{opacity:1}
.card .num-tag{position:absolute;top:22px;right:26px;font-family:'Fraunces';font-size:2.6rem;font-weight:600;color:var(--line-2);line-height:1;transition:color .4s}
.card:hover .num-tag{color:rgba(211,167,71,.35)}
.card .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:24px;position:relative;background:linear-gradient(135deg,rgba(31,193,104,.18),rgba(211,167,71,.1));border:1px solid var(--line-2);transition:transform .4s var(--ease)}
.card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.card .ic svg{width:26px;height:26px;stroke:var(--green-2)}
.card h3{font-size:1.36rem;margin-bottom:12px;position:relative}
.card p{color:var(--muted);font-size:.96rem;position:relative}
.card .more{margin-top:22px;font-size:13.5px;font-weight:600;color:var(--gold-2);display:inline-flex;align-items:center;gap:7px;position:relative}
.card .more .arrow{transition:transform .3s var(--ease)}.card:hover .more .arrow{transform:translateX(5px)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gitem{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:3/4;position:relative;transition:transform .4s var(--ease)}
.gitem:hover{transform:translateY(-5px)}
.gitem:nth-child(even){margin-top:28px}

/* process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:1px solid var(--line-2);padding-top:24px;position:relative}
.step .n{font-family:'Fraunces';font-size:.85rem;font-weight:700;color:var(--gold);letter-spacing:.1em}
.step h3{font-size:1.22rem;margin:14px 0 10px}.step p{color:var(--muted);font-size:.93rem}
.step::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--green);transition:width .8s var(--ease) .2s}
.step.in::before{width:40px}

/* case study cards / showcase */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--base-3);transition:transform .4s var(--ease),border-color .4s}
.case:hover{transform:translateY(-6px);border-color:rgba(31,193,104,.35)}
.case .shot{aspect-ratio:16/10;background:linear-gradient(150deg,var(--base-3),var(--base-2));position:relative;overflow:hidden}
.case .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.case .shot .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted-2);font-size:12px;text-align:center;gap:6px;padding:14px}
.case .niche{position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:5px 11px;border-radius:100px;background:rgba(31,193,104,.16);color:var(--green-2);border:1px solid rgba(31,193,104,.3);z-index:2}
.case-body{padding:22px}
.case-body h3{font-size:1.24rem;margin-bottom:8px}
.case-body p{font-size:.93rem;color:var(--muted);margin-bottom:14px}
.case-body .result{font-size:12.5px;font-weight:600;color:var(--gold-2);display:flex;align-items:center;gap:7px}
.case-body .visit{margin-top:14px;font-size:13px;font-weight:600;color:var(--paper);display:inline-flex;gap:6px;align-items:center}
.case-body .visit .arrow{transition:transform .3s var(--ease)}
.case:hover .visit .arrow{transform:translateX(4px)}

/* showcase marquee (home) */
.showcase{overflow:hidden;padding:20px 0}
.show-track{display:flex;gap:22px;animation:scrollShow 44s linear infinite}
.showcase:hover .show-track{animation-play-state:paused}
.shotc{flex:none;width:340px;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--base-3);position:relative;transition:transform .4s var(--ease)}
.shotc:hover{transform:scale(1.03)}
.shotc .bar{height:34px;background:var(--base-2);display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line)}
.shotc .bar i{width:9px;height:9px;border-radius:50%;background:#2a322e;display:block}
.shotc .body{height:200px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--base-3),var(--base-2))}
.shotc .body .k{font-family:'Fraunces';font-weight:600;font-size:1.18rem;text-align:center;padding:0 18px}
.shotc .body .k small{display:block;font-family:'Inter';font-size:.8rem;color:var(--muted);font-weight:400;margin-top:7px}
.shotc .tag{position:absolute;top:44px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:100px;background:rgba(31,193,104,.15);color:var(--green-2);border:1px solid rgba(31,193,104,.3);z-index:2}
@keyframes scrollShow{to{transform:translateX(calc(-50% - 11px))}}

/* testimonials dual scroll */
.test-sec{overflow:hidden}
.tcol{display:flex;gap:20px;padding:10px 0;width:max-content}
.tcol.right{animation:tRight 60s linear infinite}
.tcol.left{animation:tLeft 60s linear infinite;margin-top:20px}
.test-sec:hover .tcol{animation-play-state:paused}
@keyframes tRight{from{transform:translateX(calc(-16.6667% - 3.3333px))}to{transform:translateX(0)}}
@keyframes tLeft{from{transform:translateX(0)}to{transform:translateX(calc(-16.6667% - 3.3333px))}}
.tcard{flex:none;width:400px;background:linear-gradient(165deg,var(--base-3),var(--base-2));border:1px solid var(--line);border-radius:18px;padding:26px;transition:border-color .3s}
.tcard:hover{border-color:rgba(211,167,71,.35)}
.tcard .stars{color:var(--gold-2);font-size:13px;letter-spacing:2px;margin-bottom:14px}
.tcard p{font-size:.98rem;line-height:1.6;margin-bottom:18px;color:var(--paper)}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--gold));display:grid;place-items:center;font-family:'Fraunces';font-weight:700;color:#04140b;flex:none}
.tcard .who .nm{font-size:14px;font-weight:600}.tcard .who .rl{font-size:12px;color:var(--muted)}

/* band */
.band{background:linear-gradient(150deg,var(--base-3),var(--base));border:1px solid var(--line-2);border-radius:26px;padding:52px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.band h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:18px}
.band p{color:var(--muted);margin-bottom:14px}
.band-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bstat{background:var(--base-4);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .4s var(--ease),border-color .4s}
.bstat:hover{transform:translateY(-4px);border-color:rgba(211,167,71,.35)}
.bstat .num{font-family:'Fraunces';font-size:2.2rem;font-weight:600;color:var(--gold-2)}
.bstat .lbl{font-size:13px;color:var(--muted);margin-top:7px}

/* service area + map */
.area{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.area h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:18px}
.area p{color:var(--muted);margin-bottom:22px}
.area-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:100px;background:var(--base-3);border:1px solid var(--line-2);color:var(--paper);transition:all .3s var(--ease)}
.chip:hover{border-color:var(--green);background:rgba(31,193,104,.08);transform:translateY(-2px)}
.chip.star{background:linear-gradient(135deg,rgba(31,193,104,.16),rgba(211,167,71,.12));border-color:rgba(31,193,104,.4)}
.map-wrap{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);aspect-ratio:4/3}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05) brightness(.92)}

/* FAQ */
.faq-grid{max-width:880px;margin:0 auto}
.faq{border-bottom:1px solid var(--line-2)}
.faq h3{font-size:1.16rem;font-weight:600;padding:24px 46px 24px 0;cursor:pointer;position:relative;transition:color .3s}
.faq h3:hover{color:var(--green-2)}
.faq h3::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:'Inter';font-weight:400;font-size:1.7rem;color:var(--gold);transition:transform .35s var(--ease)}
.faq.open h3::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq .a p{color:var(--muted);padding:0 40px 24px 0}
.faq.open .a{max-height:320px}

/* CTA + booking */
.cta-box{background:linear-gradient(140deg,rgba(31,193,104,.14),rgba(211,167,71,.08)),var(--base-3);border:1px solid rgba(31,193,104,.25);border-radius:28px;padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;top:-40%;left:50%;width:640px;height:640px;transform:translateX(-50%);background:radial-gradient(circle,rgba(31,193,104,.18),transparent 65%);pointer-events:none}
.cta-box h2{font-size:clamp(2.1rem,4vw,3.1rem);margin-bottom:16px;position:relative}
.cta-box p{color:var(--muted);max-width:560px;margin:0 auto 30px;position:relative;font-size:1.1rem}
.booking-embed{position:relative;z-index:2;max-width:820px;margin:0 auto;background:var(--base-2);border:1px solid var(--line-2);border-radius:20px;padding:14px;overflow:hidden}
.booking-embed iframe{width:100%;border:none;border-radius:12px;min-height:750px}

/* generic page hero + breadcrumbs + prose */
.page-hero{position:relative;padding:150px 0 60px;overflow:hidden}
.page-hero .aurora{opacity:.35}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);margin:14px 0 16px;position:relative}
.page-hero p{color:var(--muted);font-size:1.14rem;max-width:640px;position:relative}
.crumbs{font-size:13px;color:var(--muted-2);margin-bottom:8px;position:relative}
.crumbs a{color:var(--muted);transition:color .25s}.crumbs a:hover{color:var(--gold-2)}
.crumbs span{margin:0 8px;opacity:.5}
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:44px 0 16px}
.prose h3{font-size:1.3rem;margin:32px 0 12px;color:var(--paper)}
.prose p{color:var(--muted);margin-bottom:16px}
.prose ul{list-style:none;margin:16px 0}
.prose ul li{display:flex;gap:11px;margin-bottom:11px;color:var(--paper);font-size:.98rem}
.prose ul li::before{content:"✓";color:var(--green-2);font-weight:700}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px}
.cc{background:linear-gradient(165deg,var(--base-3),var(--base-2));border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;transition:transform .4s var(--ease),border-color .4s}
.cc:hover{transform:translateY(-5px);border-color:rgba(31,193,104,.35)}
.cc .ic{width:48px;height:48px;margin:0 auto 14px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(31,193,104,.16),rgba(211,167,71,.1));border:1px solid var(--line-2)}
.cc .ic svg{width:22px;height:22px;stroke:var(--green-2)}
.cc h3{font-size:1.05rem;margin-bottom:6px}
.cc a,.cc p{color:var(--muted);font-size:.92rem}

/* footer */
footer{border-top:1px solid var(--line);background:var(--base-2);padding:62px 0 120px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot-grid h4{font-family:'Inter';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.foot-grid a{display:block;color:var(--muted);font-size:14px;margin-bottom:11px;transition:color .25s}
.foot-grid a:hover{color:var(--paper)}
.foot-logo{height:38px;margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:14px;max-width:290px;margin-bottom:14px}
.foot-phone{font-family:'Fraunces';font-size:1.3rem;font-weight:600;color:var(--gold-2)!important}
.foot-bottom{border-top:1px solid var(--line);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:12px}
.foot-bottom a{color:var(--gold-2)}

/* mobile call bar */
.callbar{position:fixed;bottom:0;left:0;right:0;z-index:150;display:none;background:rgba(10,12,11,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);padding:10px 14px;gap:10px}
.callbar a{flex:1;text-align:center;padding:13px;border-radius:12px;font-weight:600;font-size:14.5px}
.callbar .call{background:linear-gradient(135deg,var(--green),var(--green-2));color:#04140b}
.callbar .quote{border:1px solid var(--gold);color:var(--gold-2)}

/* ===== RESPONSIVE ===== */
@media(max-width:1080px){.mega{width:min(720px,calc(100vw - 48px))}}
@media(max-width:920px){
  .hero-grid,.intro,.band,.area{grid-template-columns:1fr;gap:40px}
  .svc-grid,.case-grid{grid-template-columns:1fr 1fr}
  .proc,.contact-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}.gitem:nth-child(even){margin-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .navlinks,.nav-cta{display:none}.menu-btn{display:block}.callbar{display:flex}
  .serp{width:250px;right:0}
}
@media(max-width:560px){
  .svc-grid,.case-grid,.proc,.band-stats,.foot-grid,.gallery,.contact-grid{grid-template-columns:1fr}
  .hero{padding-top:128px}.stats{gap:26px}.tcard{width:300px}
  .cta-box{padding:40px 22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* browser-chrome frame for screenshot images (gallery + case studies) */
.browser-frame{display:flex;flex-direction:column;width:100%;height:100%;background:var(--base-2);border-radius:inherit}
.browser-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(180deg,#2a2f2c,#20241f);border-bottom:1px solid var(--line-2);flex:0 0 auto}
.browser-dots{display:flex;gap:5px}
.browser-dots i{width:8px;height:8px;border-radius:50%;display:block;background:#5a5f5a}
.browser-dots i:nth-child(1){background:#e0605a}
.browser-dots i:nth-child(2){background:#e0b95a}
.browser-dots i:nth-child(3){background:#5ec96b}
.browser-url{flex:1;font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:100px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Inter'}
.browser-body{position:relative;flex:1 1 auto;overflow:hidden}
.browser-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.shot-track .shot-card .browser-body{overflow:hidden}
.shot-track .shot-card .browser-bar .browser-url{max-width:220px}

/* ===== DECORATIVE SITE / CODE MOCKUPS (no stock photography) ===== */
.site-mock{display:flex;flex-direction:column;height:100%;background:linear-gradient(165deg,var(--base-3),var(--base-2))}
.site-mock-nav{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.site-mock-nav i{width:9px;height:9px;border-radius:50%;background:var(--gold-2);display:block}
.site-mock-nav span{height:7px;border-radius:4px;background:rgba(244,247,245,.10);display:block}
.site-mock-nav span:nth-child(2){width:46px}
.site-mock-nav span:nth-child(3){width:34px}
.site-mock-nav span:nth-child(4){width:34px}
.site-mock-nav span:last-child{margin-left:auto;width:64px;height:20px;border-radius:100px;background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.site-mock-hero{flex:1;padding:26px 24px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.site-mock-hero .ln{height:11px;border-radius:5px;background:rgba(244,247,245,.16)}
.site-mock-hero .ln.w1{width:78%}
.site-mock-hero .ln.w2{width:58%}
.site-mock-hero .ln.w3{width:40%;height:8px;background:rgba(244,247,245,.09);margin-bottom:6px}
.site-mock-hero .btn-ln{margin-top:10px;width:120px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.site-mock-cards{display:flex;gap:10px;padding:0 24px 24px}
.site-mock-cards i{flex:1;height:52px;border-radius:10px;background:rgba(244,247,245,.05);border:1px solid var(--line-2);display:block}
.code-mock{display:flex;flex-direction:column;height:100%;background:linear-gradient(165deg,var(--base-3),var(--base-2));padding:24px 22px;gap:11px}
.code-mock .cl{display:flex;align-items:center;gap:10px}
.code-mock .cl .bar{height:9px;border-radius:4px;background:rgba(244,247,245,.13);display:block}
.code-mock .cl.i1 .bar{width:38%;background:rgba(240,208,138,.55)}
.code-mock .cl.i2 .bar{width:60%;margin-left:18px}
.code-mock .cl.i3 .bar{width:48%;margin-left:18px}
.code-mock .cl.i4 .bar{width:28%;margin-left:18px;background:rgba(59,224,137,.5)}
.code-mock .cl.i5 .bar{width:44%}
.code-mock .cl.i6 .bar{width:52%;margin-left:18px}
.code-mock .swatches{display:flex;gap:8px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line-2)}
.code-mock .swatches i{width:22px;height:22px;border-radius:6px;display:block}
.code-mock-bar{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.code-mock-bar i{width:8px;height:8px;border-radius:50%;display:block;background:#5a5f5a}
.code-mock-bar i:nth-child(1){background:#e0605a}
.code-mock-bar i:nth-child(2){background:#e0b95a}
.code-mock-bar i:nth-child(3){background:#5ec96b}
.code-mock-bar span{margin-left:6px;font-size:10.5px;color:var(--muted);font-family:'Inter'}




/* ===== BLOG ===== */
.blog-feature{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;isolation:isolate}
.blog-feature::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 22% 24%, rgba(255,255,255,.10) 0, transparent 42%), radial-gradient(circle at 82% 78%, rgba(255,255,255,.07) 0, transparent 45%);pointer-events:none;z-index:0}
.blog-feature.accent-green{background:linear-gradient(135deg,#0c2417,#123a22 45%,#1b4c2d)}
.blog-feature.accent-gold{background:linear-gradient(135deg,#2a2110,#3a2e12 45%,#4d3c17)}
.blog-feature::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px;pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(ellipse at center,black,transparent 75%);mask-image:radial-gradient(ellipse at center,black,transparent 75%)}
.blog-feature .bf-ring{position:relative;z-index:1;width:88px;height:88px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.blog-feature .bf-icon{position:relative;z-index:1;width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;box-shadow:0 22px 44px -14px rgba(0,0,0,.55)}
.blog-feature .bf-icon svg{width:30px;height:30px;stroke:var(--paper)}
.blog-feature .bf-cat{position:relative;z-index:1;font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(244,247,245,.8)}
.blog-feature.small{aspect-ratio:16/10}
.blog-feature.small .bf-ring{width:64px;height:64px}
.blog-feature.small .bf-icon{width:46px;height:46px}
.blog-feature.small .bf-icon svg{width:22px;height:22px}
.blog-feature.hero{aspect-ratio:21/9}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blog-card{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:var(--base-3);transition:transform .4s var(--ease),border-color .4s}
.blog-card:hover{transform:translateY(-6px);border-color:rgba(31,193,104,.35)}
.blog-card-body{padding:20px 22px 22px}
.blog-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted-2);margin-bottom:10px}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.blog-card h3{font-size:1.15rem;margin-bottom:8px;line-height:1.25}
.blog-card p{font-size:.92rem;color:var(--muted);line-height:1.55}
.blog-card .rm{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--gold-2)}

.blog-post-top{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:20px}
.blog-post-top .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}

.blog-related{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}

@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr}
  .blog-related{grid-template-columns:1fr}
}