/* ===== CSS RESET (trimmed) ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
body{min-height:100vh;text-rendering:optimizeLegibility;line-height:1.5}
img,picture,svg,video,canvas{max-width:100%;display:block}
input,button,textarea,select{font:inherit}

/* ===== Theme ===== */
:root{
  --bg: #0e0f12;
  --bg-muted: #15171c;
  --text: #e7e9ee;
  --text-dim: #b8bdc7;
  --accent: #7dd3fc; /* soft cyan */
  --card: #0f1218;
  --border: #222733;
  --maxw: 1100px;
  --radius: 14px;

  --h1: clamp(2rem, 5vw, 3.75rem);
  --h2: clamp(1.5rem, 2.8vw, 2.25rem);
  --h3: clamp(1.1rem, 1.6vw, 1.25rem);
}

@media (prefers-color-scheme: light) {
  :root{
    --bg:#ffffff; --bg-muted:#f6f7f9; --text:#0b1020; --text-dim:#445; --card:#ffffff; --border:#e6e9ef;
  }
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(125,211,252,.12), transparent 40%),
              radial-gradient(900px 500px at 90% 10%, rgba(147,197,253,.12), transparent 40%),
              var(--bg);
}

.container{width:min(100% - 2rem, var(--maxw)); margin-inline:auto}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--bg), transparent 25%);
  border-bottom:1px solid color-mix(in srgb, var(--border), transparent 50%);
  transition: box-shadow .25s ease;
}
.site-header[data-scrolled="true"]{ box-shadow: 0 10px 20px rgba(0,0,0,.08) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0 }
.logo{ font-weight:800; letter-spacing:.5px; color:var(--text); text-decoration:none }

.site-nav ul{ list-style:none; display:flex; gap:1.2rem; align-items:center }
.site-nav a{ text-decoration:none; color:var(--text-dim) }
.site-nav a:hover{ color:var(--text) }

.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:10px; padding:.4rem .6rem; color:var(--text) }
@media (max-width: 860px){
  .nav-toggle{ display:inline-block }
  .site-nav{ position:fixed; inset:64px 1rem auto 1rem; background:var(--card); border:1px solid var(--border);
             border-radius:16px; padding:1rem; transform:scale(.98); opacity:0; pointer-events:none; transition:.2s }
  .site-nav.open{ opacity:1; transform:scale(1); pointer-events:auto }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:.6rem }
  body.nav-open{ overflow:hidden }
}

/* ===== Hero ===== */
.hero{ position:relative; min-height: 92vh; display:grid; align-items:center }
.hero-media{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.08) brightness(.75); transform:scale(1.02) }
.hero-inner{ padding: 5rem 0; }
.hero-title{ font-size: var(--h1); letter-spacing:-.02em; max-width: 20ch }
.hero-subtitle{ margin-top: .75rem; color: var(--text-dim) }
.hero-cta{ margin-top: 1.5rem; display:flex; gap:.8rem; flex-wrap:wrap }

/* ===== Sections ===== */
.section{ padding: clamp(3rem, 6vw, 5rem) 0 }
.section-muted{ background: var(--bg-muted); border-block:1px solid var(--border) }
.section h2{ font-size: var(--h2); margin-bottom: 1.25rem }

.grid-2{ display:grid; gap:1.5rem; grid-template-columns: 1.1fr .9fr }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr } }

.grid-3{ display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr) }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr } }

.card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:1.25rem }
.media-card{ padding:0; overflow:hidden }
.media-card img{ width:100%; height:100%; object-fit:cover }

.cards .card h3{ font-size: var(--h3); margin-bottom:.4rem }
.cards .card p{ color: var(--text-dim) }

/* ===== Portfolio ===== */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem }
.link{ color: var(--accent); text-decoration: none; border-bottom:1px dashed color-mix(in srgb, var(--accent), transparent 40%) }
.link:hover{ border-bottom-style: solid }

.portfolio-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(12, 1fr);
}
.project{
  position:relative; overflow:hidden; border-radius: var(--radius);
  grid-column: span 6; border:1px solid var(--border); background:var(--card)
}
.project:nth-child(3n){ grid-column: span 7 }
.project:nth-child(2n){ grid-column: span 5 }
@media (max-width: 900px){ .project{ grid-column: 1 / -1 } }

.project img{ width:100%; height: 320px; object-fit: cover; transition: transform .5s ease }
.project:hover img{ transform: scale(1.05) }
.project-meta{
  position:absolute; inset:auto 0 0 0; padding: .9rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color:#fff;
}
.tag{ font-size:.75rem; opacity:.9 }

/* ===== Quotes ===== */
.quotes{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr }
@media (max-width: 900px){ .quotes{ grid-template-columns: 1fr } }
.quote{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:1.25rem }
.quote blockquote{ font-size:1.1rem }
.quote figcaption{ color: var(--text-dim); margin-top:.6rem }

/* ===== Form ===== */
.form{ display:grid; gap:.9rem }
label{ display:grid; gap:.3rem; font-weight:600; font-size:.9rem }
input, textarea{
  background: transparent; color: var(--text);
  border:1px solid var(--border); border-radius:12px; padding:.7rem .85rem; resize:vertical
}
input:focus, textarea:focus{ outline:2px solid color-mix(in srgb, var(--accent), transparent 50%) }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--border); padding:1.2rem 0; background: var(--bg) }
.footer-inner{ display:flex; justify-content:space-between; align-items:center }
@media (max-width: 600px){ .footer-inner{ flex-direction:column; gap:.6rem } }

/* ===== UI bits ===== */
.btn{
  display:inline-block; text-decoration:none; color: #0b1020; background: var(--accent);
  border:1px solid transparent; padding:.7rem 1rem; border-radius: 999px; font-weight:700
}
.btn:hover{ filter:brightness(.95) }
.btn-outline{ background: transparent; color: var(--text); border-color: var(--border) }
.btn-sm{ padding:.45rem .75rem; font-weight:700 }
.checklist{ margin-top:.8rem; display:grid; gap:.35rem; color:var(--text-dim) }
.stack{ list-style:none; display:grid; gap:.25rem; margin-top:.6rem }
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--accent);
  color:#04101f; border-radius:10px; z-index:999
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.text-dim{ color: var(--text-dim) }
#services select{ background: transparent; color: var(--text); border:1px solid var(--border); border-radius:12px; padding:.7rem .85rem }
#services .consent{ display:flex; gap:.6rem; align-items:flex-start; font-weight:500 }
#services .consent input{ margin-top:.2rem }


.text-dim{ color: var(--text-dim) }
#services select{ background: transparent; color: var(--text); border:1px solid var(--border); border-radius:12px; padding:.7rem .85rem }
#services .consent{ display:flex; gap:.6rem; align-items:flex-start; font-weight:500 }
#services .consent input{ margin-top:.2rem }
.visually-hidden{ position:absolute !important; left:-9999px !important; }