/* =========================================================
   ORVEXA — Design Tokens
   ========================================================= */
:root{
  /* Brand palette (fixed) */
  --navy:        #0F172A;
  --violet:      #7C3AED;
  --cyan:        #22D3EE;
  --surface:     #1E293B;
  --bg-light:    #F8FAFC;
  --white:       #FFFFFF;

  --gradient-brand: linear-gradient(135deg, #0F172A, #4F46E5, #22D3EE);
  --gradient-text:  linear-gradient(120deg, #7C3AED, #22D3EE);

  /* Neutrals derived from navy for light-mode text */
  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #CBD5E1;
  --line-light: rgba(15,23,42,0.08);
  --line-dark:  rgba(255,255,255,0.10);

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Scale */
  --fs-h1: clamp(2.4rem, 5.6vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.8rem);
  --fs-h3: 1.15rem;
  --fs-lead: clamp(1.02rem, 1.4vw, 1.2rem);

  /* Spacing / shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-section: clamp(4.5rem, 9vw, 8rem);
  --container-w: 1240px;

  --shadow-soft: 0 1px 2px rgba(15,23,42,0.04), 0 20px 40px -20px rgba(15,23,42,0.18);
  --shadow-lift: 0 30px 60px -25px rgba(76,29,149,0.35);

  --ease: cubic-bezier(.22,.9,.3,1);
  --dur: .7s;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width:100%;
  max-width: var(--container-w);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--navy); color:var(--white);
  padding:.7rem 1.1rem; border-radius:8px; z-index:999;
  transition: top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* =========================================================
   Loader
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:1000;
  background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark{ display:flex; gap:10px; }
.loader__node{
  width:12px; height:12px; border-radius:50%;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  animation: loaderPulse 1s ease-in-out infinite;
}
.loader__node:nth-child(2){ animation-delay:.15s; }
.loader__node:nth-child(3){ animation-delay:.3s; }
@keyframes loaderPulse{
  0%,80%,100%{ transform:scale(.5); opacity:.4; }
  40%{ transform:scale(1); opacity:1; }
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:500;
  padding-block:1.1rem;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  padding-block:.7rem;
  background: rgba(248,250,252,0.75);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 var(--line-light), 0 12px 30px -20px rgba(15,23,42,0.25);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand__mark{
  width:30px;
  height:30px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand__mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.footer__brand .brand__mark{
  width:26px;
  height:26px;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color: var(--white);
  transition: color .3s var(--ease);
}
.brand__tagline{
  display:none;
  font-family: var(--font-mono); font-size:.6rem; letter-spacing:.03em;
  color: rgba(255,255,255,0.55); margin-top:2px; white-space:nowrap;
  transition: color .3s var(--ease);
}
.site-header.is-scrolled .brand__name{ color: var(--ink-900); }
.site-header.is-scrolled .brand__tagline{ color: var(--ink-500); }
@media (min-width:640px){ .brand__tagline{ display:block; } }

.nav__list{ display:flex; gap:2rem; }
.nav__list a{
  font-size:.92rem; font-weight:500; color: rgba(255,255,255,0.82);
  position:relative; padding-block:.25rem;
  transition: color .3s var(--ease);
}
.nav__list a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transition: right .3s var(--ease);
}
.nav__list a:hover{ color:#fff; }
.nav__list a:hover::after{ right:0; }
.site-header.is-scrolled .nav__list a{ color: var(--ink-700); }
.site-header.is-scrolled .nav__list a:hover{ color: var(--ink-900); }

.header__actions{ display:flex; align-items:center; gap:1rem; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  width:34px; height:34px; align-items:center; justify-content:center;
  background:transparent; border:none; padding:0;
}
.nav-toggle span{
  width:20px; height:2px; background:#fff; border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled .nav-toggle span{ background: var(--ink-900); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  font-weight:600; font-size:.95rem;
  border:1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

.btn--primary{
  background: linear-gradient(120deg, var(--violet), #6D28D9 40%, var(--cyan));
  background-size:180% 180%;
  color:#fff;
  box-shadow: var(--shadow-lift);
}
.btn--primary:hover{ transform: translateY(-2px); background-position: 100% 0; }
.btn--primary:active{ transform: translateY(0); }

.btn--small{ padding:.65rem 1.25rem; font-size:.88rem; }

.btn--ghost{
  color:#fff; border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ border-color:#fff; background: rgba(255,255,255,0.1); transform: translateY(-2px); }

.btn--full{ width:100%; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background: var(--navy);
  overflow:hidden;
  padding-top: 6rem;
}
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.9;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 20%, rgba(124,58,237,0.25), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 75%, rgba(34,211,238,0.18), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.2), rgba(15,23,42,0.75) 85%);
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; padding-block: 3rem 4rem; }

.eyebrow{
  font-family: var(--font-mono);
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--cyan);
  margin-bottom:1.1rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background: currentColor; opacity:.6;
}
.eyebrow--dark{ color: var(--violet); }

.hero__title{
  color:#fff;
  font-size: var(--fs-h1);
  font-weight:700;
  max-width: 15ch;
  margin-bottom:1.5rem;
}
.text-gradient{
  background: var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{
  color: rgba(255,255,255,0.72);
  font-size: var(--fs-lead);
  max-width: 46ch;
  margin-bottom:2.2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.5rem; }

.hero__trust{
  display:flex; flex-direction:column;
  gap: 1.4rem;
  max-width: 640px;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,0.12);
}
.trust-item{
  display:flex; align-items:center; gap:.85rem;
}
.trust-item__num{
  font-family: var(--font-display); font-weight:700;
  font-size:1.5rem; color:#fff; white-space:nowrap;
  min-width:3ch;
}
.trust-item__icon{ flex-shrink:0; display:flex; }
.trust-item__label{
  font-size:.88rem; color:rgba(255,255,255,0.65); max-width:38ch;
}
.stat__num{ font-family:var(--font-display); }

@media (min-width:640px){
  .hero__trust{ flex-direction:row; flex-wrap:wrap; gap:2.5rem; }
}

.hero__scroll-cue{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,0.35); border-radius:20px;
  z-index:2;
}
.hero__scroll-cue span{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{
  0%{ opacity:1; top:7px; } 70%{ opacity:0; top:20px; } 100%{ opacity:0; top:7px; }
}

/* =========================================================
   Section shells
   ========================================================= */
.section{ padding-block: var(--space-section); position:relative; }
.section--light{ background: var(--bg-light); }
.section--dark{
  background: var(--navy);
  color: #fff;
}
.section--dark::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 45% 60% at 90% 0%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(ellipse 40% 50% at 5% 100%, rgba(34,211,238,0.12), transparent 60%);
  pointer-events:none;
}
.section--tech{ background: var(--surface); }

.section__head{ max-width: 720px; margin-bottom: 3.5rem; }
.section__title{ font-size: var(--fs-h2); font-weight:700; color:var(--ink-900); }
.section__title--light{ color:#fff; }
.section__lead{ margin-top:1rem; font-size:1.05rem; color: var(--ink-500); max-width:56ch; }
.section--dark .section__lead{ color: rgba(255,255,255,0.65); }

/* =========================================================
   About
   ========================================================= */
.grid-2{
  display:grid; grid-template-columns: 1fr; gap:2.5rem;
  margin-bottom: 3.5rem;
}
.about__copy p{ color: var(--ink-700); font-size:1.02rem; line-height:1.7; margin-bottom:1.1rem; }
.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; color: var(--violet);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow svg{ transition: transform .3s var(--ease); }
.link-arrow:hover{ border-color: currentColor; }
.link-arrow:hover svg{ transform: translateX(3px); }

.pillars{
  display:grid; grid-template-columns: 1fr; gap:1.5rem;
  border-top:1px solid var(--line-light); padding-top:2.5rem;
}
.pillar{ padding: 0 1.75rem 0 0; }
.pillar__num{
  font-family:var(--font-mono); font-size:.8rem; font-weight:600;
  color: var(--cyan); background: var(--navy);
  display:inline-block; padding:.3rem .6rem; border-radius:6px; margin-bottom:1rem;
}
.pillar h3{ font-size:1.1rem; margin-bottom:.5rem; }
.pillar p{ color: var(--ink-500); font-size:.95rem; line-height:1.6; }

/* =========================================================
   Services
   ========================================================= */
.services-grid{
  display:grid; grid-template-columns: 1fr; gap:1.25rem;
}
.service-card{
  background:#fff;
  border:1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(124,58,237,0), rgba(34,211,238,0));
  transition: background .4s var(--ease);
  pointer-events:none;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(124,58,237,0.25);
}
.service-card__icon{ width:40px; height:40px; margin-bottom:1.25rem; }
.service-card h3{ font-size:1.08rem; margin-bottom:.6rem; }
.service-card p{ font-size:.92rem; color: var(--ink-500); line-height:1.6; }

.additional-services{
  margin-top: 3rem; padding-top: 2.5rem; border-top:1px solid var(--line-light);
}
.additional-services__title{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-500); font-weight:600; margin-bottom:1.25rem;
}
.chip-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.chip{
  font-size:.88rem; font-weight:500; color: var(--ink-700);
  background:#fff; border:1px solid var(--line-light);
  padding:.55rem 1.1rem; border-radius:999px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover{ border-color: rgba(124,58,237,0.35); transform: translateY(-2px); }

/* =========================================================
   Why choose us
   ========================================================= */
.why-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
.why-card{
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 2rem;
  backdrop-filter: blur(6px);
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.why-card:hover{
  transform: translateY(-5px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(34,211,238,0.35);
}
.why-card h3{ color:#fff; font-size:1.08rem; margin-bottom:.65rem; }
.why-card p{ color: rgba(255,255,255,0.62); font-size:.92rem; line-height:1.6; }

/* =========================================================
   Process
   ========================================================= */
.process-list{ display:flex; flex-direction:column; gap:0; }
.process-item{
  display:grid; grid-template-columns: auto 1fr; gap:1.5rem;
  padding-block: 2rem;
  border-top:1px solid var(--line-light);
  align-items:start;
}
.process-item:last-child{ border-bottom:1px solid var(--line-light); }
.process-list--compact .process-item{ padding-block: 1.35rem; }
.process-list--compact .process-item p{ font-size:.9rem; }
.process-item__num{
  font-family: var(--font-display); font-weight:700; font-size:1.6rem;
  background: var(--gradient-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.process-item h3{ font-size:1.15rem; margin-bottom:.5rem; }
.process-item p{ color: var(--ink-500); font-size:.96rem; line-height:1.65; max-width:60ch; }

/* =========================================================
   Technologies
   ========================================================= */
.tech-columns{
  display:grid; grid-template-columns: 1fr; gap:2rem;
}
.tech-col h4{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--cyan); margin-bottom:1.1rem; font-weight:600;
}
.tech-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.tech-col li{
  color: rgba(255,255,255,0.78); font-size:.98rem; font-weight:500;
  padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,0.08);
}

/* =========================================================
   Portfolio
   ========================================================= */
.portfolio-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
.portfolio-card{
  background:#fff; border:1px solid var(--line-light); border-radius: var(--radius-md);
  padding:2rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.portfolio-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.tag{
  display:inline-block; margin-bottom:1.25rem;
  font-family: var(--font-mono); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color: var(--violet); background: rgba(124,58,237,0.09); padding:.35rem .7rem; border-radius:999px;
}
.portfolio-card h3{ font-size:1.12rem; margin-bottom:.6rem; }
.portfolio-card p{ font-size:.92rem; color: var(--ink-500); line-height:1.6; }

/* =========================================================
   Contact
   ========================================================= */
.contact-panel{
  display:grid; grid-template-columns:1fr; gap:3rem;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  position:relative; overflow:hidden;
}
.contact-panel::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 50% 60% at 100% 0%, rgba(34,211,238,0.16), transparent 60%),
              radial-gradient(ellipse 50% 60% at 0% 100%, rgba(124,58,237,0.2), transparent 60%);
  pointer-events:none;
}
.contact-panel .eyebrow--dark{ color: var(--cyan); }
.contact-panel .section__title{ color:#fff; }
.contact-panel .section__lead{ color: rgba(255,255,255,0.65); }
.contact-panel__intro{ position:relative; z-index:1; }

.contact-info{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1rem; }
.contact-info li{ display:flex; flex-direction:column; gap:.15rem; }
.contact-info__label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,0.45); }
.contact-info a, .contact-info span{ color:#fff; font-weight:500; }
.contact-info a:hover{ color: var(--cyan); }

.contact-form{
  position:relative; z-index:1;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  backdrop-filter: blur(8px);
}
.form-row{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
.field{ margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.82rem; font-weight:600; color: rgba(255,255,255,0.75); }
.field input, .field select, .field textarea{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius: 10px; padding:.8rem .9rem; color:#fff;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field select{ appearance:none; }
.field select option{ color: var(--ink-900); }
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,0.35); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--cyan); background: rgba(255,255,255,0.09);
}
.field.has-error input, .field.has-error textarea{ border-color:#F87171; }
.field__error{ font-size:.78rem; color:#FCA5A5; min-height:1em; }

.form-status{ margin-top:1rem; font-size:.9rem; color: var(--cyan); min-height:1.2em; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--surface); color: rgba(255,255,255,0.7); padding-top: 4rem; }
.footer__inner{
  display:grid; grid-template-columns: 1fr; gap:2.5rem;
  padding-bottom: 3rem; border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer__brand p{ margin-top:.9rem; font-size:.9rem; color: rgba(255,255,255,0.45); max-width:26ch; }
.footer__col h4{ color:#fff; font-size:.85rem; margin-bottom:1rem; }
.footer__col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer__col a{ font-size:.9rem; color: rgba(255,255,255,0.55); transition: color .25s var(--ease); }
.footer__col a:hover{ color: var(--cyan); }
.footer__bottom{
  display:flex; flex-direction:column; gap:.5rem;
  padding-block:1.5rem 2rem; font-size:.8rem; color: rgba(255,255,255,0.4);
}

.to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:400;
  width:46px; height:46px; border-radius:50%;
  background: var(--navy); color:#fff; border:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background: var(--violet); }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }

/* =========================================================
   Responsive — Tablet and up
   ========================================================= */
@media (min-width: 720px){
  .grid-2{ grid-template-columns: 1fr 1.15fr; align-items:start; }
  .pillars{ grid-template-columns: repeat(3, 1fr); }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .tech-columns{ grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-row{ grid-template-columns: 1fr 1fr; }
  .footer__inner{ grid-template-columns: 1.4fr repeat(3, 1fr); }
}

@media (min-width: 980px){
  .nav-toggle{ display:none; }
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .why-grid{ grid-template-columns: repeat(3, 1fr); }
  .tech-columns{ grid-template-columns: repeat(6, 1fr); }
  .portfolio-grid{ grid-template-columns: repeat(3, 1fr); }
  .contact-panel{ grid-template-columns: .9fr 1.1fr; }
}

/* =========================================================
   Responsive — Mobile nav
   ========================================================= */
@media (max-width: 979px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw, 340px);
    background: var(--navy);
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    z-index:400;
    box-shadow: -20px 0 50px rgba(0,0,0,0.3);
  }
  .nav.is-open{ transform:none; }
  .nav__list{ flex-direction:column; gap:1.5rem; }
  .nav__list a{ font-size:1.05rem; color:#fff; }
  .header__actions .btn--small{ display:none; }
}