@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Montserrat:wght@600;700;800;900&family=Oswald:wght@500;600;700&display=swap");

:root{
--bg:#231F20;
--bg-soft:#333333;
--bg-muted:#3E454C;
--accent:#FF4500;
--accent-2:#FFA500;
--text:#CCCCCC;
--text-strong:#F0F0F0;
--muted:#787878;
--line:rgba(255,255,255,0.06);
}

html{
scroll-behavior:smooth;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:"Manrope", "Segoe UI", sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

a{
color:inherit;
}

body.nav-open{
overflow:hidden;
}

.container{
width:100%;
padding:0 5%;
margin:auto;
}

.header{
position:fixed;
top:0;
width:100%;
height:88px;
background:rgba(35,31,32,0.96);
border-bottom:1px solid var(--line);
backdrop-filter:blur(10px);
z-index:100;
display:flex;
align-items:stretch;
padding:0 5%;
gap:18px;
}

.logo{
display:flex;
flex-direction:column;
justify-content:space-between;
font-family:"Montserrat", "Segoe UI", sans-serif;
font-weight:800;
letter-spacing:3px;
font-size:22px;
text-transform:uppercase;
color:var(--text-strong);
white-space:nowrap;
padding:18px 0;
}

.logo-name{
display:block;
white-space:nowrap;
letter-spacing: 9.7px;
}

.logo-name span{
color:var(--accent);
}

.logo .tag{
font-size:10px;
letter-spacing:3px;
color:var(--muted);
white-space:nowrap;
}

a.logo {
  text-decoration: none;
  color: inherit;
}

.nav-right{
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-end;
flex:1;
padding:18px 0;
}

.site-nav{
display:flex;
align-items:center;
}

.site-nav a{
margin-left:26px;
color:var(--muted);
font-size:11px;
letter-spacing:2.6px;
text-transform:uppercase;
text-decoration:none;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.site-nav a:hover{
color:var(--text-strong);
}

.site-nav a.active{
color:var(--accent);
text-shadow:0 0 12px rgba(255,69,0,0.35);
}

.site-nav a.active::before{
content:"[ ";
}

.site-nav a.active::after{
content:" ]";
}

.nav-contact{
display:none;
}

.nav-toggle{
display:none;
width:44px;
height:44px;
border:1px solid var(--line);
background:rgba(0,0,0,.6);
border-radius:10px;
padding:10px;
cursor:pointer;
}

.nav-actions{
display:flex;
align-items:center;
gap:10px;
}

.nav-icon{
width:38px;
height:38px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(0,0,0,.3);
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--text-strong);
transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}

.nav-icon svg{
width:18px;
height:18px;
stroke:currentColor;
}

.nav-icon:hover{
transform:translateY(-1px);
color:var(--accent);
border-color:rgba(255,69,0,.5);
background:rgba(255,69,0,.12);
}

.nav-toggle span{
display:block;
width:22px;
height:2px;
background:var(--text-strong);
margin:0;
opacity:.9;
transition:transform 0.25s ease, opacity 0.2s ease;
}

.nav-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.78);
backdrop-filter:blur(6px);
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
z-index:90;
}

body.nav-open .nav-overlay{
opacity:1;
pointer-events:auto;
}

main{
padding-top:88px;
}

.hero{
min-height:calc(100vh - 88px);
display:flex;
align-items:center;
position:relative;
overflow:hidden;
background-image:url("images/profile-header-left.webp");
background-size:cover;
background-position:left center;
}

.hero::before{
content:"";
position:absolute;
inset:-30% -10% -20% -10%;
background:
radial-gradient(900px 600px at 12% 40%, rgba(255,69,0,.26), transparent 60%),
radial-gradient(700px 480px at 80% 10%, rgba(255,165,0,.18), transparent 55%),
radial-gradient(900px 500px at 40% 110%, rgba(0,0,0,.7), transparent 65%);
opacity:0.95;
z-index:0;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.45'/></svg>\");
background-size:140px 140px;
opacity:0.08;
mix-blend-mode:screen;
animation:noiseShift 6s steps(8) infinite;
pointer-events:none;
z-index:2;
}

.hero-grid{
display:flex;
justify-content:flex-end;
align-items:center;
position:relative;
z-index:3;
}

.hero-content{
max-width:560px;
width:50%;
}

.hero-content h1{
font-family:"Oswald", "Montserrat", "Segoe UI", sans-serif;
font-size:clamp(40px, 6.2vw, 96px);
line-height:0.88;
text-transform:uppercase;
margin:0;
letter-spacing:1.6px;
color:#E8E8E8;
font-weight:700;
}

.hero-content h1 span{
display:block;
}

.hero-content h1 .outline{
color:transparent;
-webkit-text-stroke:2px var(--accent);
text-shadow:0 0 18px rgba(255,69,0,.32);
}

@supports not (-webkit-text-stroke: 1px #000){
.hero-content h1 .outline{
color:var(--accent);
}
}

.hero-content .accent{
color:var(--accent-2);
}

.hero-content p{
margin-top:26px;
color:var(--text);
max-width:520px;
font-size:18px;
line-height:1.7;
}

.eyebrow{
font-size:11px;
letter-spacing:4px;
color:var(--accent);
margin-bottom:20px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.hero-actions{
display:flex;
gap:14px;
margin-top:26px;
flex-wrap:wrap;
}

.page-hero{
padding:70px 0 10px;
}

.page-title{
margin:0;
font-size:56px;
letter-spacing:1px;
text-transform:uppercase;
line-height:1.05;
font-family:"Montserrat", "Segoe UI", sans-serif;
color:var(--text-strong);
}

.page-intro{
margin-top:18px;
color:var(--text);
max-width:820px;
font-size:18px;
line-height:1.7;
}

.section{
padding:74px 0;
}

.section--alt{
background:linear-gradient(180deg, rgba(255,69,0,.08), rgba(35,31,32,0));
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.section--cta{
background:
radial-gradient(1000px 500px at 10% 0%, rgba(255,69,0,.2), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.8));
border-top:1px solid var(--line);
}

.section-title{
margin:0;
font-size:28px;
letter-spacing:1px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
color:var(--text-strong);
}

.section-intro{
margin-top:22px;
max-width:1000px;
}

.section-intro p{
margin:0 0 14px;
color:var(--text);
font-size:18px;
line-height:1.7;
}

.grid{
display:grid;
gap:18px;
margin-top:26px;
}

.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.grid-4{grid-template-columns:repeat(4, minmax(0, 1fr));}

.card{
background:rgba(51,51,51,.6);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
padding:22px;
box-shadow:0 18px 50px rgba(0,0,0,.35);
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(600px 250px at 0% 0%, rgba(255,69,0,.22), transparent 55%);
opacity:.85;
pointer-events:none;
}

.card h3{
margin:0 0 10px;
font-size:15px;
letter-spacing:1px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.card p{
margin:0;
color:var(--text);
line-height:1.65;
font-size:15px;
}

.clients-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:14px;
margin-top:26px;
}

.client{
border:1px solid rgba(255,255,255,0.08);
background:rgba(51,51,51,.35);
border-radius:14px;
padding:16px 14px;
color:var(--text-strong);
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 18px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.1);
text-decoration:none;
font-size:11px;
letter-spacing:2.2px;
text-transform:uppercase;
color:var(--text-strong);
background:rgba(0,0,0,.35);
transition:transform .15s ease, background .15s ease, border-color .15s ease;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.btn:hover{
transform:translateY(-1px);
border-color:rgba(255,255,255,0.2);
}

.btn--primary{
background:linear-gradient(135deg, var(--accent), var(--accent-2));
border-color:transparent;
color:#fff;
font-weight:700;
box-shadow:0 14px 30px rgba(255,69,0,.28);
}

.btn--primary:hover{
background:linear-gradient(135deg, var(--accent-2), var(--accent));
}

.btn--ghost{
background:rgba(0,0,0,.2);
}

.cta{
text-align:left;
max-width:980px;
}

.cta h2{
margin:0;
font-size:42px;
text-transform:uppercase;
letter-spacing:1px;
line-height:1.05;
font-family:"Montserrat", "Segoe UI", sans-serif;
color:var(--text-strong);
}

.cta p{
margin:18px 0 0;
color:var(--text);
font-size:18px;
line-height:1.7;
}

.cta .btn{
margin-top:22px;
}

.footer{
border-top:1px solid var(--line);
background:var(--bg);
}

.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:26px 0;
}

.footer-brand{
font-weight:800;
letter-spacing:3px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.footer-brand span{
color:var(--accent);
}

.footer-links a,
.footer-links button{
color:var(--text);
text-decoration:none;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
background:none;
border:none;
padding:0;
cursor:pointer;
}

.footer-links a:hover,
.footer-links button:hover{
color:var(--accent);
}

.footer-meta{
color:var(--muted);
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
}

.coming-soon{
padding:26px;
border:1px dashed rgba(255,255,255,0.18);
border-radius:18px;
background:rgba(0,0,0,.35);
}

.coming-soon h2{
margin:0;
font-size:34px;
letter-spacing:1px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
}

#particles{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
opacity:0.6;
}

@keyframes noiseShift{
0%{background-position:0 0;}
20%{background-position:20px -30px;}
40%{background-position:-40px 20px;}
60%{background-position:30px 40px;}
80%{background-position:-20px -20px;}
100%{background-position:0 0;}
}

@media(max-width:1050px){
.hero-grid{
grid-template-columns:1fr;
}
}

@media(max-width:1279px){
.hero-grid{
text-align:left;
justify-content:flex-start;
}

.hero-content{
width:100%;
max-width:100%;
}

.hero-content h1{
font-size:clamp(36px, 9vw, 72px);
}

.nav-toggle{
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
align-self:center;
margin-right:14px;
}

.nav-actions{
display:none;
}

body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;transform:scaleX(0);}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-overlay{
display:flex;
align-items:flex-start;
justify-content:center;
padding:calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
background:rgba(4,4,8,.88);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
z-index:99999;
overflow:hidden;
}

.mobile-menu-panel{
position:relative;
width:min(88vw,320px);
max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px);
overflow-y:auto;
border-radius:24px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(15,15,20,.82);
box-shadow:0 24px 80px rgba(0,0,0,.45);
padding:20px 18px 18px;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
transform:translateY(10px) scale(.98);
opacity:0;
transition:transform .28s ease, opacity .28s ease;
}

body.nav-open .mobile-menu-panel{
transform:translateY(0) scale(1);
opacity:1;
}

.mobile-menu-header{
position:sticky;
top:0;
display:flex;
justify-content:flex-end;
align-items:center;
margin-bottom:14px;
padding-bottom:6px;
background:linear-gradient(180deg, rgba(15,15,20,.95) 0%, rgba(15,15,20,.7) 60%, transparent 100%);
z-index:1;
}

.mobile-menu-close{
width:44px;
height:44px;
border:1px solid rgba(255,255,255,0.12);
border-radius:12px;
background:rgba(255,255,255,0.04);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible{
transform:translateY(-1px);
border-color:rgba(255,69,0,.4);
color:var(--accent);
background:rgba(255,69,0,.12);
}

.site-nav{
position:static;
width:100%;
height:auto;
display:flex;
flex-direction:column;
gap:12px;
margin:0;
padding:0;
background:transparent;
border:0;
box-shadow:none;
transform:none;
opacity:1;
pointer-events:auto;
}

.mobile-menu-nav a{
margin-left:0;
width:100%;
min-height:54px;
padding:0 16px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.035);
display:flex;
align-items:center;
justify-content:center;
text-transform:uppercase;
letter-spacing:0.18em;
font-size:0.82rem;
text-decoration:none;
color:rgba(255,255,255,0.88);
transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible{
border-color:rgba(255,69,0,.35);
background:rgba(255,69,0,.1);
color:#fff;
}

.mobile-menu-nav a.active,
.mobile-menu-nav a[aria-current="page"]{
border-color:rgba(255,69,0,.65);
background:rgba(255,69,0,.12);
color:#fff;
box-shadow:0 0 0 1px rgba(255,69,0,.18), 0 10px 22px rgba(0,0,0,.35);
}

.mobile-menu-divider{
height:1px;
margin:18px 0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}

.mobile-menu-contact{
display:flex;
flex-direction:column;
gap:12px;
}

.mobile-menu-contact a{
margin-left:0;
width:100%;
min-height:54px;
padding:0 16px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.03);
display:flex;
align-items:center;
justify-content:center;
text-transform:uppercase;
letter-spacing:0.18em;
font-size:0.82rem;
text-decoration:none;
color:rgba(255,255,255,0.75);
transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.mobile-menu-contact a:hover,
.mobile-menu-contact a:focus-visible{
border-color:rgba(255,69,0,.3);
background:rgba(255,69,0,.08);
color:#fff;
}

.mobile-menu-nav a[href*="contact"]{
display:none;
}

.hero-actions{
justify-content:flex-start;
}

.page-title{
font-size:40px;
}

.section{
padding:56px 0;
}

.grid-2,.grid-3,.grid-4{
grid-template-columns:1fr;
}

.clients-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.footer-inner{
flex-direction:column;
align-items:flex-start;
}
}

@media(max-width:520px){
.clients-grid{
grid-template-columns:1fr;
}

.nav-icon{
width:34px;
height:34px;
}
}

/* ── Contact form ─────────────────────────────────── */

.contact-form{
margin-top:32px;
max-width:860px;
}

.form-row{
display:grid;
gap:18px;
margin-bottom:18px;
}

.form-row--2{
grid-template-columns:1fr 1fr;
}

.form-group{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:18px;
}

.form-row .form-group{
margin-bottom:0;
}

.form-group label{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--muted);
font-family:"Montserrat", "Segoe UI", sans-serif;
}

.form-group label span{
color:var(--accent);
}

.contact-form input,
.contact-form select,
.contact-form textarea{
background:rgba(51,51,51,.5);
border:1px solid rgba(255,255,255,0.1);
border-radius:12px;
padding:12px 16px;
color:var(--text-strong);
font-size:15px;
font-family:"Manrope", "Segoe UI", sans-serif;
outline:none;
transition:border-color .15s ease;
width:100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
color:var(--muted);
}

.contact-form select option{
background:var(--bg-soft);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
border-color:rgba(255,69,0,.5);
}

.contact-form textarea{
resize:vertical;
min-height:130px;
}

.form-submit{
margin-top:8px;
padding:14px 32px;
font-size:12px;
}

.form-notice{
padding:14px 18px;
border-radius:12px;
margin-bottom:26px;
font-size:14px;
font-family:"Manrope", "Segoe UI", sans-serif;
}

.form-notice--success{
background:rgba(0,200,80,.12);
border:1px solid rgba(0,200,80,.3);
color:#5ef0a0;
}

.form-notice--error{
background:rgba(255,69,0,.12);
border:1px solid rgba(255,69,0,.3);
color:#ff8060;
}

@media(max-width:640px){
.form-row--2{
grid-template-columns:1fr;
}
}

/* ── Card enhancements ──────────────────────────────────────── */

.card{
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 28px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,69,0,.18);
border-color:rgba(255,69,0,.22);
}

.card-icon{
width:42px;
height:42px;
border-radius:11px;
background:rgba(255,69,0,.14);
border:1px solid rgba(255,69,0,.22);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px;
color:var(--accent);
flex-shrink:0;
transition:background .25s ease, transform .25s ease;
}

.card-icon svg{
width:20px;
height:20px;
stroke:currentColor;
fill:none;
}

.card:hover .card-icon{
background:rgba(255,69,0,.26);
transform:scale(1.1);
}

/* ── Client tile hover ──────────────────────────────────────── */

.client{
transition:transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.client:hover{
transform:translateY(-3px);
border-color:rgba(255,69,0,.3);
background:rgba(51,51,51,.6);
color:var(--text-strong);
}

/* ── Footer layout ──────────────────────────────────────────── */

.footer .container{
padding-left:8%;
padding-right:8%;
}

/* ── Header nav contact links ───────────────────────────────── */

.nav-actions a{
color:var(--muted);
text-decoration:none;
font-size:10px;
letter-spacing:2.2px;
text-transform:uppercase;
font-family:"Montserrat", "Segoe UI", sans-serif;
transition:color .15s ease;
}

.nav-actions a:hover{
color:var(--accent);
}

.nav-sep{
color:var(--accent);
font-size:12px;
line-height:1;
opacity:0.6;
}

/* ── Button svg icon ────────────────────────────────────────── */

.btn svg{
width:15px;
height:15px;
stroke:currentColor;
fill:none;
flex-shrink:0;
}

/* ── Nav link hover ─────────────────────────────────────────── */

.site-nav a{
transition:color .2s ease;
}

.site-nav a:hover{
text-shadow:0 0 10px rgba(255,255,255,0.1);
}

/* ── Cinematic Introduction ─────────────────────────────────── */

.intro-section{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
padding:100px 0;
background:linear-gradient(180deg, var(--bg) 0%, #171416 50%, var(--bg) 100%);
}

.intro-bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}

.intro-glow{
position:absolute;
border-radius:50%;
filter:blur(90px);
}

.intro-glow--a{
width:600px;
height:400px;
background:rgba(255,69,0,.2);
top:-10%;
left:-8%;
animation:introGlowA 8s ease-in-out infinite alternate;
}

.intro-glow--b{
width:500px;
height:350px;
background:rgba(255,165,0,.12);
bottom:5%;
right:-5%;
animation:introGlowB 10s ease-in-out infinite alternate;
}

@keyframes introGlowA{
from{transform:translate(0,0) scale(1);}
to{transform:translate(40px,30px) scale(1.12);}
}

@keyframes introGlowB{
from{transform:translate(0,0) scale(1);}
to{transform:translate(-30px,-20px) scale(1.09);}
}

.intro-section::after{
content:"";
position:absolute;
inset:0;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
background-size:140px 140px;
opacity:0.05;
mix-blend-mode:screen;
pointer-events:none;
z-index:1;
}

.intro-ghost{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(110px,18vw,260px);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,0.04);
text-stroke:1px rgba(255,255,255,0.04);
white-space:nowrap;
pointer-events:none;
z-index:1;
opacity:0;
user-select:none;
}

.intro-layout{
display:grid;
grid-template-columns:44px 1fr;
gap:48px;
position:relative;
z-index:2;
width:100%;
}

.intro-aside{
display:flex;
flex-direction:column;
align-items:center;
padding-top:6px;
}

.intro-aside-line{
width:2px;
height:120px;
background:linear-gradient(180deg, var(--accent), transparent);
transform-origin:top center;
transform:scaleY(0);
flex-shrink:0;
}

.intro-aside-label{
margin-top:12px;
font-size:10px;
letter-spacing:3px;
color:var(--muted);
font-family:"Montserrat",sans-serif;
text-transform:uppercase;
writing-mode:vertical-rl;
transform:rotate(180deg);
}

.intro-kicker{
margin-bottom:24px;
opacity:0;
}

.intro-heading{
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(38px,5.5vw,80px);
font-weight:700;
text-transform:uppercase;
line-height:0.96;
letter-spacing:1px;
margin:0 0 40px;
color:var(--text-strong);
}

.intro-line{
overflow:hidden;
display:block;
}

.intro-line span{
display:block;
transform:translateY(108%);
}

.intro-line--outline span{
color:transparent;
-webkit-text-stroke:2px var(--accent);
text-shadow:0 0 22px rgba(255,69,0,.28);
}

.intro-copy{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
}

.intro-copy p{
margin:0;
font-size:17px;
line-height:1.75;
color:var(--text);
opacity:0;
}

@media(max-width:900px){
.intro-layout{
grid-template-columns:1fr;
gap:0;
}

.intro-aside{
display:none;
}

.intro-copy{
grid-template-columns:1fr;
gap:18px;
}

.intro-section{
padding:74px 0;
min-height:auto;
}
}

/* ── Experience Highlights ──────────────────────────────────── */

.exp-section{
position:relative;
padding:100px 0;
overflow:hidden;
background:linear-gradient(180deg, var(--bg) 0%, #1a1618 55%, var(--bg) 100%);
border-top:1px solid var(--line);
}

.exp-bg{
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}

.exp-glow{
position:absolute;
border-radius:50%;
filter:blur(110px);
}

.exp-glow--a{
width:540px;
height:320px;
background:rgba(255,69,0,.13);
top:-8%;
right:8%;
animation:expGlowA 10s ease-in-out infinite alternate;
}

.exp-glow--b{
width:420px;
height:280px;
background:rgba(255,165,0,.08);
bottom:-5%;
left:2%;
animation:expGlowB 13s ease-in-out infinite alternate;
}

@keyframes expGlowA{
from{transform:translate(0,0) scale(1);}
to{transform:translate(-28px,18px) scale(1.1);}
}

@keyframes expGlowB{
from{transform:translate(0,0) scale(1);}
to{transform:translate(22px,-14px) scale(1.08);}
}

.exp-header{
position:relative;
z-index:1;
margin-bottom:52px;
}

.exp-title{
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(34px,5vw,66px);
font-weight:700;
text-transform:uppercase;
line-height:0.94;
letter-spacing:1px;
margin:16px 0 0;
color:var(--text-strong);
}

.exp-title em{
display:block;
font-style:normal;
color:transparent;
-webkit-text-stroke:2px var(--accent);
text-shadow:0 0 22px rgba(255,69,0,.22);
}

.exp-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
position:relative;
z-index:1;
}

.exp-card{
position:relative;
padding:32px 26px;
border-radius:20px;
background:rgba(20,17,19,.72);
border:1px solid rgba(255,255,255,0.07);
overflow:hidden;
backdrop-filter:blur(8px);
transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.exp-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg, transparent 10%, rgba(255,69,0,.55) 50%, transparent 90%);
opacity:0;
transition:opacity .3s ease;
}

.exp-card::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(400px 200px at 50% 0%, rgba(255,69,0,.1), transparent 70%);
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}

.exp-card:hover{
transform:translateY(-6px);
border-color:rgba(255,69,0,.22);
box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,69,0,.1);
}

.exp-card:hover::before,
.exp-card:hover::after{
opacity:1;
}

.exp-card-badge{
width:44px;
height:44px;
border-radius:12px;
background:rgba(255,69,0,.12);
border:1px solid rgba(255,69,0,.2);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
margin-bottom:20px;
transition:background .3s ease, transform .3s ease;
flex-shrink:0;
}

.exp-card-badge svg{
width:20px;
height:20px;
stroke:currentColor;
fill:none;
}

.exp-card:hover .exp-card-badge{
background:rgba(255,69,0,.22);
transform:scale(1.08);
}

.exp-card-stat{
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(26px,3.2vw,42px);
font-weight:700;
color:var(--accent);
letter-spacing:1px;
line-height:1;
margin-bottom:10px;
text-transform:uppercase;
}

.exp-card h3{
font-family:"Montserrat",sans-serif;
font-size:13px;
letter-spacing:1.2px;
text-transform:uppercase;
color:var(--text-strong);
margin:0 0 10px;
font-weight:700;
}

.exp-card p{
margin:0;
font-size:14px;
line-height:1.72;
color:var(--muted);
}

/* ── Services / What I Do ───────────────────────────────────── */

.services-section{
position:relative;
padding:100px 0;
overflow:hidden;
background:linear-gradient(180deg, var(--bg) 0%, #171315 55%, var(--bg) 100%);
border-top:1px solid var(--line);
}

.services-section::before{
content:"";
position:absolute;
inset:0;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.4'/></svg>");
background-size:180px 180px;
opacity:0.04;
pointer-events:none;
z-index:0;
}

.services-header{
position:relative;
z-index:1;
margin-bottom:52px;
}

.services-title{
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(34px,5vw,66px);
font-weight:700;
text-transform:uppercase;
line-height:0.94;
letter-spacing:1px;
margin:16px 0 0;
color:var(--text-strong);
display:flex;
align-items:baseline;
gap:16px;
flex-wrap:wrap;
}

.services-title em{
font-style:normal;
color:transparent;
-webkit-text-stroke:2px var(--accent);
text-shadow:0 0 22px rgba(255,69,0,.22);
}

.services-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
position:relative;
z-index:1;
}

.service-card{
position:relative;
display:flex;
flex-direction:column;
padding:36px 32px;
border-radius:22px;
background:rgba(18,15,17,.78);
border:1px solid rgba(255,255,255,0.07);
overflow:hidden;
backdrop-filter:blur(10px);
transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
min-height:340px;
}

.service-card-accent{
position:absolute;
left:0;
top:18%;
bottom:18%;
width:2px;
background:linear-gradient(180deg, var(--accent), var(--accent-2));
border-radius:0 2px 2px 0;
transform:scaleY(0);
transform-origin:center;
transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}

.service-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg, transparent 10%, rgba(255,69,0,.5) 50%, transparent 90%);
opacity:0;
transition:opacity .35s ease;
}

.service-card::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(500px 280px at 50% 110%, rgba(255,69,0,.09), transparent 70%);
opacity:0;
transition:opacity .35s ease;
pointer-events:none;
}

.service-card:hover{
transform:translateY(-8px);
border-color:rgba(255,69,0,.22);
box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,69,0,.1), 0 0 50px rgba(255,69,0,.05);
}

.service-card:hover::before,
.service-card:hover::after{
opacity:1;
}

.service-card:hover .service-card-accent{
transform:scaleY(1);
}

.service-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom:28px;
}

.service-card-num{
font-family:"Oswald","Montserrat",sans-serif;
font-size:11px;
letter-spacing:3px;
color:var(--muted);
text-transform:uppercase;
padding-top:2px;
}

.service-card-icon{
width:52px;
height:52px;
border-radius:14px;
background:rgba(255,69,0,.12);
border:1px solid rgba(255,69,0,.2);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
flex-shrink:0;
transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.service-card-icon svg{
width:22px;
height:22px;
stroke:currentColor;
fill:none;
}

.service-card:hover .service-card-icon{
background:rgba(255,69,0,.22);
transform:scale(1.1) rotate(-3deg);
box-shadow:0 8px 22px rgba(255,69,0,.18);
}

.service-card-body{
flex:1;
}

.service-card-body h3{
font-family:"Montserrat",sans-serif;
font-size:16px;
letter-spacing:0.8px;
text-transform:uppercase;
color:var(--text-strong);
margin:0 0 12px;
font-weight:700;
}

.service-card-body p{
margin:0;
font-size:15px;
line-height:1.75;
color:var(--text);
}

.service-card-footer{
margin-top:28px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,0.06);
}

.service-card-link{
display:inline-flex;
align-items:center;
gap:8px;
font-family:"Montserrat",sans-serif;
font-size:10px;
letter-spacing:2.2px;
text-transform:uppercase;
text-decoration:none;
color:var(--muted);
transition:color .25s ease, gap .25s ease;
}

.service-card-link svg{
width:14px;
height:14px;
stroke:currentColor;
fill:none;
transition:transform .25s ease;
}

.service-card:hover .service-card-link{
color:var(--accent);
}

.service-card:hover .service-card-link svg{
transform:translateX(4px);
}

@media(max-width:900px){
.exp-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.services-grid{
grid-template-columns:1fr;
}
.exp-section,
.services-section{
padding:70px 0;
}
}

@media(max-width:520px){
.exp-grid{
grid-template-columns:1fr;
}
.service-card{
min-height:auto;
}
}

/* ── Cinematic CTA ──────────────────────────────────────────── */

.cta-cinematic{
position:relative;
overflow:hidden;
padding:clamp(100px,12vw,180px) 20px;
background:
radial-gradient(circle at 16% 10%, rgba(255,80,20,.22), transparent 28%),
radial-gradient(circle at 78% 30%, rgba(255,130,70,.07), transparent 30%),
linear-gradient(180deg, #070707 0%, #050505 100%);
color:#f5efe7;
isolation:isolate;
}

.cta-cinematic__inner{
position:relative;
z-index:2;
width:min(900px,100%);
margin:0 auto;
text-align:center;
}

.cta-cinematic__eyebrow{
margin:0 0 18px;
font-size:0.82rem;
letter-spacing:0.22em;
font-weight:700;
color:rgba(255,220,195,.72);
text-transform:uppercase;
font-family:"Montserrat",sans-serif;
}

.cta-cinematic__title{
margin:0;
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(2.8rem,7vw,5.8rem);
line-height:0.95;
font-weight:700;
letter-spacing:0.5px;
text-transform:uppercase;
color:#f5efe7;
}

.cta-cinematic__copy{
width:min(720px,100%);
margin:28px auto 0;
font-size:clamp(1rem,1.4vw,1.2rem);
line-height:1.8;
color:rgba(245,239,231,.8);
}

.cta-cinematic__actions{
margin-top:44px;
}

.cta-cinematic__button{
display:inline-flex;
align-items:center;
gap:14px;
padding:18px 30px;
border:0;
border-radius:999px;
cursor:pointer;
font-family:"Montserrat",sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:#fff8f2;
background:linear-gradient(180deg, #ff9b17 0%, #ff7b00 55%, #f05d00 100%);
box-shadow:0 18px 38px rgba(255,102,0,.28), 0 0 30px rgba(255,115,20,.18);
transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

.cta-cinematic__button:hover{
transform:translateY(-3px);
box-shadow:0 24px 50px rgba(255,102,0,.34), 0 0 42px rgba(255,115,20,.24);
filter:brightness(1.04);
}

.cta-cinematic__button-arrow{
font-size:1.1rem;
transition:transform .3s ease;
display:inline-block;
}

.cta-cinematic__button:hover .cta-cinematic__button-arrow{
transform:translateX(4px);
}

.cta-cinematic__bg,
.cta-cinematic__halo{
position:absolute;
border-radius:999px;
pointer-events:none;
z-index:0;
}

.cta-cinematic__bg--one{
width:500px;
height:500px;
top:-120px;
left:-120px;
background:rgba(255,86,0,.11);
filter:blur(120px);
}

.cta-cinematic__bg--two{
width:380px;
height:380px;
right:-60px;
bottom:-80px;
background:rgba(255,140,70,.07);
filter:blur(120px);
}

.cta-cinematic__halo{
inset:auto;
width:560px;
height:200px;
left:50%;
bottom:30px;
transform:translateX(-50%);
background:radial-gradient(circle, rgba(255,120,35,.13), transparent 70%);
filter:blur(50px);
}

.cta-cinematic__grain{
position:absolute;
inset:0;
opacity:0.05;
pointer-events:none;
z-index:1;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,255,255,.18) 0.5px, transparent 0.8px),
radial-gradient(circle at 80% 40%, rgba(255,255,255,.12) 0.5px, transparent 0.8px),
radial-gradient(circle at 35% 75%, rgba(255,255,255,.12) 0.5px, transparent 0.8px);
background-size:140px 140px, 180px 180px, 220px 220px;
mix-blend-mode:soft-light;
}

/* ── Contact Modal ──────────────────────────────────────────── */

.contact-modal{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .35s ease, visibility .35s ease;
}

.contact-modal.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.contact-modal__backdrop{
position:absolute;
inset:0;
background:
radial-gradient(circle at top, rgba(255,85,20,.1), transparent 32%),
rgba(5,5,7,.82);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.contact-modal__dialog{
position:relative;
width:min(760px,100%);
max-height:min(90vh,900px);
overflow-y:auto;
overflow-x:hidden;
padding:clamp(28px,4vw,44px);
border-radius:28px;
background:
linear-gradient(145deg, rgba(255,110,35,.07), rgba(255,255,255,.025) 32%, rgba(255,255,255,.015) 100%),
rgba(12,11,13,.93);
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 90px rgba(0,0,0,.55),
0 0 60px rgba(255,106,30,.07),
inset 0 1px 0 rgba(255,255,255,.04);
transform:translateY(28px) scale(0.98);
transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .42s ease;
z-index:2;
color:#f5efe7;
}

.contact-modal.is-open .contact-modal__dialog{
transform:translateY(0) scale(1);
}

.contact-modal__glow{
position:absolute;
width:280px;
height:280px;
top:-70px;
right:-20px;
background:radial-gradient(circle, rgba(255,110,35,.14), transparent 70%);
filter:blur(40px);
pointer-events:none;
z-index:0;
}

.contact-modal__close{
position:absolute;
top:18px;
right:18px;
width:44px;
height:44px;
border:1px solid rgba(255,255,255,.09);
border-radius:50%;
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.85);
font-size:1.5rem;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
transition:transform .3s ease, background .3s ease, border-color .3s ease;
}

.contact-modal__close:hover{
transform:rotate(90deg);
background:rgba(255,110,35,.12);
border-color:rgba(255,110,35,.26);
}

.contact-modal__header{
position:relative;
z-index:2;
margin-bottom:28px;
padding-right:54px;
}

.contact-modal__eyebrow{
margin:0 0 12px;
font-size:0.78rem;
letter-spacing:0.2em;
text-transform:uppercase;
color:rgba(255,214,184,.7);
font-weight:700;
font-family:"Montserrat",sans-serif;
}

.contact-modal__title{
margin:0;
font-family:"Oswald","Montserrat",sans-serif;
font-size:clamp(1.8rem,4vw,3rem);
line-height:1;
letter-spacing:0.5px;
font-weight:700;
text-transform:uppercase;
color:#f5efe7;
}

.contact-modal__intro{
margin:14px 0 0;
max-width:52ch;
font-size:0.96rem;
line-height:1.75;
color:rgba(245,239,231,.72);
}

.contact-modal__form{
position:relative;
z-index:2;
}

.contact-modal__success{
padding:18px 22px;
border-radius:14px;
background:rgba(0,200,100,.1);
border:1px solid rgba(0,200,100,.25);
color:#6ef5b0;
font-size:14px;
margin-bottom:20px;
}

.contact-modal__success[hidden]{
display:none;
}

.contact-modal__grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}

.contact-field{
display:flex;
flex-direction:column;
gap:9px;
}

.contact-field--full{
margin-top:18px;
}

.contact-field label{
font-size:0.82rem;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(255,228,206,.88);
font-family:"Montserrat",sans-serif;
}

.contact-field label span{
color:var(--accent);
}

.contact-field input,
.contact-field select,
.contact-field textarea{
width:100%;
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
padding:14px 16px;
background:rgba(255,255,255,.04);
color:#fff7f0;
font-family:"Manrope","Segoe UI",sans-serif;
font-size:15px;
outline:none;
transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
color:rgba(255,255,255,.35);
}

.contact-field select{
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}

.contact-field select option{
background:#231F20;
color:#f5efe7;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
border-color:rgba(255,125,45,.55);
box-shadow:0 0 0 4px rgba(255,115,35,.1);
background:rgba(255,255,255,.055);
}

.contact-field textarea{
resize:vertical;
min-height:140px;
}

.contact-modal__footer{
margin-top:24px;
}

.contact-modal__submit{
display:inline-flex;
align-items:center;
gap:12px;
border:0;
border-radius:999px;
padding:16px 26px;
cursor:pointer;
font-family:"Montserrat",sans-serif;
font-weight:700;
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:#fff8f2;
background:linear-gradient(180deg, #ff9b17 0%, #ff7b00 55%, #f05d00 100%);
box-shadow:0 16px 36px rgba(255,102,0,.26), 0 0 24px rgba(255,120,35,.16);
transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

.contact-modal__submit:hover{
transform:translateY(-2px);
box-shadow:0 20px 44px rgba(255,102,0,.32), 0 0 34px rgba(255,120,35,.2);
filter:brightness(1.04);
}

.contact-modal__submit:disabled{
opacity:0.6;
cursor:not-allowed;
transform:none;
}

@media(max-width:768px){
.cta-cinematic__inner{
text-align:left;
}
.contact-modal{
padding:14px;
align-items:flex-end;
}
.contact-modal__dialog{
max-height:92vh;
border-radius:22px 22px 18px 18px;
padding:28px 20px;
}
.contact-modal__grid{
grid-template-columns:1fr;
}
}

@media(prefers-reduced-motion:reduce){
.cta-cinematic__button,
.contact-modal,
.contact-modal__dialog,
.contact-modal__close,
.contact-modal__submit{
transition:none !important;
}
}