:root{
  --bg:#0D0D0D;
  --panel:#141414;
  --text:#F5F2EA;
  --muted:#A6A39B;
  --line:#292929;
  --accent:#C8A96B;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif;font-size:16px;line-height:1.65;max-width:100%;overflow-x:hidden}
h1,h2,h3,.brand,.exp-num,.price{font-family:"Space Grotesk",Inter,system-ui,sans-serif}
a{color:inherit}

.site-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 5vw;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(13,13,13,.94)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.12em}
.brand img{width:36px;height:32px;object-fit:contain}
.nav-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);padding:8px 12px;font:600 .75rem Inter,Arial;cursor:pointer}
nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
nav a{font-size:.88rem;text-decoration:none;color:var(--muted)}
nav a:hover,nav a.active{color:var(--text)}
.hire-link{background:var(--accent)!important;color:#0D0D0D!important;padding:10px 16px;font-size:.82rem!important;font-weight:700}

.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 14px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 18px;border:0;background:var(--accent);color:#0D0D0D;text-decoration:none;font:700 .82rem Inter,Arial;letter-spacing:.04em;cursor:pointer}
.button-line{background:transparent;color:var(--text);border:1px solid var(--accent)}

.hero{min-height:100svh;position:relative;display:grid;align-items:center;padding:130px 6vw 80px;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;pointer-events:none;filter:contrast(1.1) saturate(1.05) brightness(1.04)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.82) 0%,rgba(13,13,13,.45) 55%,rgba(13,13,13,.2) 100%)}
.hero-content{position:relative;z-index:1;width:min(900px,100%)}
.hero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);line-height:1.02;letter-spacing:-.05em;margin:0;max-width:14ch;font-weight:600;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero-line{color:var(--muted);font-size:1.12rem;margin:22px 0 28px;max-width:42ch}
.hero-kicker{margin-top:28px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}

.hero .eyebrow.sub{margin-top:-6px;color:var(--muted);font-weight:600}
.section{padding:100px 6vw;max-width:1180px;margin:0 auto}
.section-head{margin-bottom:40px}
.section h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.04em;margin:8px 0 0;max-width:18ch;font-weight:600}

.case-list{display:grid;gap:72px}
.case{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}
.case:nth-child(even){grid-template-columns:.75fr 1.25fr}
.case:nth-child(even) .shot-wrap{order:2}
.work-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 36px}
.chip{background:transparent;color:var(--muted);border:1px solid var(--line);padding:8px 14px;font:700 .68rem Inter,Arial;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.chip.on,.chip:hover{border-color:var(--accent);color:var(--text)}
.case.hidden-cat{display:none}
.shot{display:block;text-decoration:none;border:1px solid var(--line);background:#111;overflow:hidden;transition:transform .25s ease}
.shot:hover{transform:translateY(-4px) scale(1.02)}
.browser{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:#101010}
.browser i{width:8px;height:8px;border-radius:50%;background:#3a3a3a}
.browser span{margin-left:8px;color:#7a776f;font-size:.68rem}
.shot-photo{display:block;width:100%;height:380px;object-fit:cover;background:#111}
.shot-body{padding:40px 28px;min-height:280px}
.shot-kicker{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;color:var(--accent)}
.shot-body h3{margin:0;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.04em}
.shot-a{background:linear-gradient(165deg,#141414,#1c1a16)}
.shot-b{background:linear-gradient(165deg,#141414,#1a1612)}
.shot-c{background:linear-gradient(165deg,#121212,#161814)}
.shot-d{background:linear-gradient(165deg,#141414,#1a1814)}
.case-copy h3{margin:0 0 8px;font-size:1.5rem}
.case-copy p{color:var(--muted);margin:0 0 12px;overflow-wrap:anywhere}
.role{color:var(--text)!important}
.feats{color:var(--text)!important;font-size:.88rem}
.concept{display:inline-block;border:1px solid var(--accent);color:var(--accent);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;margin-bottom:10px}
.offline-note{color:#c8b48a!important;font-size:.9rem}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card-grid.four{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);background:var(--panel);padding:22px}
.card h3{margin:0 0 8px;font-size:1.05rem}
.card p{margin:0;color:var(--muted)}
.kicker{margin-top:28px;color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

.exp-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.exp-num{font-size:clamp(2.2rem,4vw,3.2rem);margin:0;letter-spacing:-.04em}
.exp-label{color:var(--accent);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:10px 0 4px}
.exp-grid p{color:var(--muted);margin:0}

.about-section{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center}
.about-photo img{display:block;width:100%;max-width:360px;height:auto;object-fit:cover;background:#141414}
.about-copy p:not(.eyebrow){color:var(--muted)}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps span{color:var(--accent);font-weight:800;letter-spacing:.08em}
.steps h3{margin:0 0 4px;font-size:1.05rem}
.steps p{margin:0;color:var(--muted)}

.testimonial-grid{display:grid;gap:22px;max-width:820px}
.quote-card{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.quote-card img{display:block;width:min(100%,520px);height:auto;max-height:360px;object-fit:contain;margin:0 0 18px;background:#111}
.quote-card p{font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.35;letter-spacing:-.03em;margin:0 0 18px}
.quote-card cite{color:var(--muted);font-style:normal;font-size:.95rem}
.quote-card cite span{display:block;color:var(--accent);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.price-card{border:1px solid var(--line);background:var(--panel);padding:26px 22px;display:flex;flex-direction:column;gap:10px}
.price-card.featured{border-color:var(--accent)}
.price-card h3{margin:0;font-size:1.15rem}
.price{font-size:1.7rem;color:var(--accent);margin:0}
.price-card ul{margin:8px 0 16px;padding-left:18px;color:var(--muted);font-size:.9rem}
.price-note{color:var(--muted);font-size:.88rem;margin-top:20px;max-width:52ch}

.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-copy h2{margin-bottom:14px}
.contact-copy>p:not(.eyebrow){color:var(--muted);max-width:38ch}
.reply-time{color:var(--accent)!important}
.contact-email{display:inline-block;margin-top:12px;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:3px}

form{display:grid;gap:16px}
label{display:grid;gap:6px;color:var(--muted);font-size:.75rem;letter-spacing:.08em}
input,select,textarea{background:#111;border:1px solid var(--line);color:var(--text);padding:12px;font:1rem Inter,Arial;outline:0;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select option{background:#111}
form .button{justify-self:start}
#form-status{font-size:.85rem;color:var(--accent);min-height:20px}

.cta-section{text-align:left;border-top:1px solid var(--line)}
.cta-section h2{max-width:16ch;margin:0 0 22px}

footer{border-top:1px solid var(--line);padding:28px 6vw;display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:18px;color:var(--muted);font-size:.85rem}
footer strong{display:block;letter-spacing:.12em;color:var(--text)}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 16px}
.foot-nav a{text-decoration:none}
.copy{margin:10px 0 0;font-size:.75rem}

.blog-list{display:grid;gap:16px;max-width:720px}
.blog-card{display:block;text-decoration:none;border:1px solid var(--line);padding:22px;background:var(--panel)}

.gpt-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;background:#212121;color:#fff;padding:12px 16px;font:600 .88rem Inter,Arial;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.gpt-fab-dot{width:8px;height:8px;border-radius:50%;background:#19c37d}
.gpt-panel{position:fixed;right:16px;bottom:16px;z-index:70;width:min(400px,calc(100vw - 24px));height:min(640px,calc(100dvh - 24px));background:#212121;color:#ececec;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.gpt-panel[hidden]{display:none!important}
.gpt-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #303030}
.gpt-head strong{display:block}
.gpt-head span{display:block;color:#8e8e8e;font-size:.72rem}
.gpt-head-actions{display:flex;align-items:center;gap:8px}
.gpt-head button{background:transparent;border:0;color:#ececec;cursor:pointer}
#gptFormSwitch{font:600 .72rem Inter,Arial;border:1px solid #3f3f3f;border-radius:999px;padding:6px 10px}
.gpt-thread{flex:1;overflow:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px}
.gpt-row{display:flex;gap:10px}
.gpt-row.user{justify-content:flex-end}
.gpt-avatar{width:28px;height:28px;border-radius:50%;background:#19c37d;color:#0b3d2a;display:grid;place-items:center;font:700 .75rem Inter,Arial;flex:none}
.gpt-bubble{max-width:85%;padding:10px 12px;border-radius:18px;line-height:1.45;font-size:.92rem;white-space:pre-wrap}
.gpt-row.bot .gpt-bubble{background:#2f2f2f}
.gpt-row.user .gpt-bubble{background:#fff;color:#0f0f13}
.gpt-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px}
.gpt-chips button{border:1px solid #3f3f3f;background:#2f2f2f;color:#ececec;border-radius:999px;padding:7px 11px;font:600 .75rem Inter,Arial;cursor:pointer}
.gpt-form{display:flex;gap:8px;padding:12px;border-top:1px solid #303030}
.gpt-form input{flex:1;border:0;border-radius:24px;background:#303030;color:#ececec;padding:12px 14px;font:1rem Inter,Arial;outline:0}
.gpt-form button{width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#111;cursor:pointer}

@media(max-width:980px){
  .case,.case:nth-child(even){grid-template-columns:1fr}
  .case:nth-child(even) .shot{order:0}
  .card-grid,.card-grid.four,.price-grid,.exp-grid,.about-section,.contact-section{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
  .shot-photo{height:260px}
}
@media(max-width:860px){
  .nav-toggle{display:block}
  .site-header nav{display:none;width:100%;flex-direction:column;align-items:flex-start;padding-top:10px;gap:12px}
  .site-header.open nav{display:flex}
  .hero{padding-top:120px;min-height:auto}
}
@media(max-width:620px){
  .section{padding:60px 6vw}
  .gpt-fab{width:52px;height:52px;padding:0;justify-content:center}
  .gpt-fab{font-size:0}
  .gpt-fab-dot{font-size:16px}
}