:root{ --bg:#0b0d12; --bg-soft:#0f1219; --card:#121623; --text:#e7eaf0; --muted:#aab3c2; --brand:#4ea5ff; --border:#1f2432; --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px; --radius-lg:22px; --maxw:1200px; }
:root[data-theme="light"]{ --bg:#ffffff; --bg-soft:#f6f8fc; --card:#ffffff; --text:#0d1422; --muted:#51607a; --brand:#2d7fff; --border:#dfe6f2; --shadow:0 10px 30px rgba(15,35,78,.10); }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wrap{max-width:var(--maxw); margin-inline:auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:1000; background:color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.3px;}
.brand-logo{width:34px; height:34px; border-radius:10px; background:var(--card); border:1px solid var(--border); display:grid; place-items:center; box-shadow:var(--shadow); font-weight:900;}
.brand-logo span{font-size:14px}
.nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600;}
.nav a:hover{color:var(--text)}
.theme-toggle{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:10px; padding:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; width:36px; height:36px}
.theme-toggle img{width:18px; height:18px; display:none}
.theme-toggle .icon-dark{display:block}
:root[data-theme="light"] .theme-toggle .icon-dark{display:none}
:root[data-theme="light"] .theme-toggle .icon-light{display:block}

/* Hero */
.hero{position:relative; min-height:65vh; display:grid; place-items:center; border-bottom:1px solid var(--border);}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 6%, transparent), color-mix(in oklab, var(--bg) 70%, transparent) 50%);} /* reduced overlay to ~30-40% */
.hero-inner{position:relative; z-index:1; text-align:center; padding:80px 20px}
.hero h1{font-size:clamp(28px,4vw,48px); margin:0 0 10px}
.hero p{max-width:850px; margin:0 auto 20px; color:var(--muted)}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:6px 14px; border-radius:12px; text-decoration:none; font-weight:700; border:3px solid var(--border); background:color-mix(in oklab, var(--card) 90%, transparent);} /* padding -25%, thicker outline */
.btn-primary{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, white), var(--brand)); color:#061324; border-color:color-mix(in oklab, var(--brand) 60%, black); border-width:3px;}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
:root:not([data-theme="light"]) .btn-ghost{color:#fff;}
:root[data-theme="light"] .btn-ghost{color:var(--brand);}

/* Sections */
section{padding:64px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px}
.section-head h2{margin:0; font-size:clamp(22px,3vw,32px)}
.section-head p{margin:6px 0 0; color:var(--muted)}

/* Portfolio grid */
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:260px; box-shadow:var(--shadow); isolation:isolate;}
.card::before{content:""; position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.05) brightness(.9); transform:scale(1.02);}
.card::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(0,0,0,.0), color-mix(in oklab, var(--bg) 85%, transparent) 65%);}
.card[style]::before{ background-image:var(--bgimg) !important; }
/* ensure background works regardless of inline attr */
.card::before{ background-image: var(--bgimg) !important; }
.card a.card-link{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; text-decoration:none;}

/* Logo centered and scaled */
.logo-wrap{display:flex; align-items:center; justify-content:center; width:82%; height:72%;}
.logo-wrap img{width:100%; height:100%; object-fit:contain;}
.logo-light{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:block}

/* Bottom label strip */
.badge{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:10px 14px;
  color:var(--text);
  background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg) 90%, black));
  border-top:1px solid var(--border);
  font-weight:700;
  letter-spacing:.3px;
}

/* Logo-text for items without logos */
.logo-text{
  font-size:clamp(22px,3.2vw,34px); font-weight:900; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45);
}
:root[data-theme="light"] .logo-text{ color:#0b0d12; text-shadow:none;}

/* Responsive columns */
@media(min-width:768px){ .card{grid-column:span 6} }
@media(min-width:1100px){ .card{grid-column:span 3} }

/* Contact */
.contact{background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.shell{display:grid; gap:22px; grid-template-columns:1fr;}
@media(min-width:900px){ .shell{grid-template-columns:1.1fr .9fr} }
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
form .row{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:700px){ form .row.two{grid-template-columns:1fr 1fr} }
label{display:block; font-weight:600; margin-bottom:6px}
input,textarea{width:100%; padding:12px 12px; border-radius:12px; border:1px solid color-mix(in oklab, var(--border) 80%, #243047); background:color-mix(in oklab, var(--card) 95%, transparent); color:var(--text);}
textarea{min-height:140px; resize:vertical}
.note{color:var(--muted); font-size:14px}
/* .turnstile-space{margin-top:8px} */
.turnstile-space {
  width: 100%;
  display: flex;
  justify-content: center;   /* centers horizontally */
  margin: 1rem 0;            /* space above/below */
}

/* Footer */
.site-footer{border-top:1px solid var(--border); color:var(--muted); font-size:14px;}
.foot{display:flex; gap:14px; align-items:center; justify-content:space-between; padding:18px 0; flex-wrap:wrap;}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--text)}

/* Smooth anchors */
html{scroll-behavior:smooth}
.sr-only{position:absolute; left:-9999px}

/* header right group (was inline) */
.nav-right{display:flex;gap:10px;align-items:center}

/* per-card backgrounds (replaces inline style="--bgimg:url(...)") */
.bg-shaz{ --bgimg: url('assets/portfolio/shaz-bg.jpg'); }
.bg-cnt{  --bgimg: url('assets/portfolio/cnt-bg.jpg'); }
.bg-mvmg{ --bgimg: url('assets/portfolio/mvmg-bg.jpg'); }
.bg-sd{   --bgimg: url('assets/portfolio/sdholdings-bg.jpg'); }

/* form utilities (replace inline styles) */
.form-max{max-width:820px;width:100%}
.note-ok{display:none;color:#42d392}
.note-bad{display:none;color:#ff6b6b}
.mt0{margin-top:0}
.cap-list{margin:0; padding-left:18px; line-height:1.6}

/* Form validation + alerts */
.form-alert{
  margin-bottom:12px;
}
.form-alert .note{
  margin:0 0 8px;
}

.field{}

/* inline field error text */
.field-error{
  color:#e55353;
  font-size:13px;
  margin:4px 0 0;
  min-height:1em;
}

/* red border on invalid fields */
input.field-error-border,
textarea.field-error-border{
  border-color:#e55353;
}