:root{
  --bg:#070b12;
  --panel:#0d131d;
  --panel2:#111925;
  --text:#f4f7fb;
  --muted:#9aa8b8;
  --line:#243243;
  --accent:#25b8ff;
  --accent2:#6fe0ff;
  --warm:#ffb454;
  --max:1180px;
  --shadow:0 22px 70px rgba(0,0,0,.34);
  --radius:22px;
}


/* =========================================================
   RESET / GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
  z-index:-1;
}

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

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin:auto;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar{
  border-bottom:1px solid var(--line);
  background:#05080d;
  color:var(--muted);
  font-size:12px;
}

.topbar .container{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:9px 0;
}

.topbar a{
  transition:.2s;
}

.topbar a:hover{
  color:var(--text);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,11,18,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.nav .container{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
}

.brand img{
  width:45px;
  height:45px;
  object-fit:contain;
  border-radius:10px;
  flex:0 0 auto;
}

.brand strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.12em;
  white-space:nowrap;
}

.brand small{
  display:block;
  color:var(--muted);
  font-size:9px;
  line-height:1.3;
  letter-spacing:.18em;
  margin-top:3px;
  white-space:nowrap;
}

.navlinks{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  font-size:13px;
  font-weight:700;
  min-width:0;
}

.navlinks a{
  color:#c8d2dd;
  transition:color .2s ease;
  white-space:nowrap;
}

.navlinks a:hover,
.navlinks a.active{
  color:var(--accent);
}

.navcta{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.menu{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:white;
  border-radius:10px;
  padding:9px 11px;
  line-height:1;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  line-height:1.2;
  border:1px solid transparent;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
  cursor:pointer;
}

.btn-primary{
  background:var(--accent);
  color:#00121c;
  box-shadow:0 12px 35px rgba(37,184,255,.18);
}

.btn-primary:hover{
  transform:translateY(-2px);
  background:var(--accent2);
}

.btn-ghost{
  border-color:var(--line);
  color:var(--text);
  background:transparent;
}

.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  padding:90px 0 65px;
  position:relative;
  overflow:hidden;
}

.hero:after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-180px;
  top:-160px;
  border-radius:50%;
  background:rgba(37,184,255,.10);
  filter:blur(30px);
  z-index:-1;
}

.eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.eyebrow:before{
  content:"";
  width:24px;
  height:1px;
  background:currentColor;
  flex:0 0 auto;
}

h1,
h2,
h3{
  font-family:Inter,system-ui,sans-serif;
  line-height:1.12;
  margin:0 0 16px;
  letter-spacing:-.035em;
}

h1{
  font-size:clamp(42px,6vw,76px);
  max-width:900px;
}

h2{
  font-size:clamp(30px,4vw,48px);
}

h3{
  font-size:22px;
}

p{
  margin-top:0;
}

.lead{
  font-size:18px;
  color:#bdc8d4;
  max-width:760px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:55px;
  align-items:center;
}

.hero-grid > *{
  min-width:0;
}

.hero-image{
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:#02050a;
  box-shadow:var(--shadow);
  position:relative;
}

.hero-image img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

.image-tag{
  position:absolute;
  left:16px;
  bottom:16px;
  background:rgba(4,8,14,.86);
  border:1px solid rgba(255,255,255,.12);
  padding:9px 12px;
  border-radius:10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0;
}

.trust{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  margin-top:28px;
}

.trust span{
  font-size:12px;
  color:var(--muted);
  border-left:2px solid var(--accent);
  padding-left:10px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
  width:100%;
  padding:78px 0;
}

.section.alt{
  background:rgba(255,255,255,.018);
  border-block:1px solid rgba(255,255,255,.05);
}


/* =========================================================
   SECTION HEAD
   FIX:
   HEADING ON TOP
   PARAGRAPH BELOW
   FULL AVAILABLE WIDTH
   ========================================================= */

.section-head{
  display:block;
  width:100%;
  margin:0 0 38px;
}

.section-head > div{
  display:block;
  width:100%;
  max-width:100%;
}

.section-head .eyebrow{
  margin-bottom:14px;
}

.section-head h2{
  display:block;
  width:100%;
  max-width:1040px;
  margin:0 0 18px;
  line-height:1.08;
}

.section-head > p{
  display:block;
  width:100%;
  max-width:1040px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}


/* =========================================================
   CARDS
   ========================================================= */

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

.card{
  min-width:0;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:#31516b;
  box-shadow:0 18px 45px rgba(0,0,0,.16);
}

.card .num{
  color:var(--accent);
  font-weight:900;
  font-size:11px;
  letter-spacing:.15em;
  line-height:1.3;
  margin-bottom:8px;
}

.card h3{
  margin-bottom:12px;
}

.card p{
  color:var(--muted);
  font-size:14px;
}

.card ul{
  padding-left:18px;
  color:#b8c4d1;
  font-size:13px;
}

.card-link{
  display:inline-block;
  margin-top:18px;
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  transition:.2s;
}

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


/* =========================================================
   FEATURE
   ========================================================= */

.feature{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:45px;
  align-items:center;
}

.feature > *{
  min-width:0;
}

.feature img{
  width:100%;
  border-radius:24px;
  border:1px solid var(--line);
  aspect-ratio:16/10;
  object-fit:cover;
}

.checklist{
  display:grid;
  gap:10px;
  margin:24px 0;
  padding:0;
  list-style:none;
}

.checklist li{
  color:#cbd5df;
  font-size:14px;
  padding-left:25px;
  position:relative;
}

.checklist li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:900;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
}

.step{
  min-width:0;
  padding:23px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  transition:.25s;
}

.step:hover{
  border-color:#31516b;
  transform:translateY(-3px);
}

.step b{
  font-size:11px;
  color:var(--accent);
  letter-spacing:.16em;
}

.step h3{
  margin-top:10px;
}

.step p{
  font-size:13px;
  color:var(--muted);
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero{
  padding:68px 0 45px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(
    180deg,
    rgba(37,184,255,.06),
    transparent
  );
}

.crumb{
  font-size:11px;
  color:var(--muted);
  margin-bottom:18px;
}

.crumb a{
  color:var(--accent);
}


/* =========================================================
   SERVICES
   ========================================================= */

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

.service-card{
  min-width:0;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  transition:.25s;
}

.service-card:hover{
  border-color:#31516b;
  transform:translateY(-3px);
}

.service-icon{
  width:54px;
  height:54px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(37,184,255,.09);
  border:1px solid rgba(37,184,255,.25);
  color:var(--accent);
  font-weight:900;
}

.service-card p{
  color:var(--muted);
  font-size:14px;
}

.service-card a{
  color:var(--accent);
  font-size:13px;
  font-weight:800;
}


/* =========================================================
   HOME / GENERAL GALLERY
   IMPORTANT:
   USE CSS GRID — NOT COLUMNS
   ========================================================= */

.gallery-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:25px 0;
}

.filter{
  border:1px solid var(--line);
  background:var(--panel);
  color:#b9c5d1;
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:.2s;
}

.filter.active,
.filter:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  width:100%;
  align-items:start;
}

.gallery-item{
  display:flex;
  flex-direction:column;
  min-width:0;
  width:100%;
  margin:0;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:var(--panel);
  cursor:zoom-in;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.gallery-item:hover{
  transform:translateY(-4px);
  border-color:#31516b;
  box-shadow:0 16px 40px rgba(0,0,0,.16);
}

.gallery-item img{
  display:block;
  width:100%;
  height:250px;
  object-fit:cover;
  background:#02050a;
}

.gallery-caption{
  padding:14px 16px;
  min-height:68px;
  font-size:13px;
  color:#dce5ed;
  line-height:1.5;
}

.gallery-caption strong{
  display:block;
  color:#e2eaf2;
  font-size:13px;
  font-weight:800;
}

.gallery-caption span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
}


/* =========================================================
   ARTICLE / CONTENT
   ========================================================= */

.article{
  width:100%;
  max-width:840px;
}

.article p,
.article li{
  color:#c4ced9;
  font-size:16px;
}

.article h2{
  margin-top:40px;
  font-size:32px;
}

.article h3{
  margin-top:28px;
}

.answer{
  border:1px solid rgba(37,184,255,.22);
  background:rgba(37,184,255,.055);
  padding:22px;
  border-radius:18px;
  margin:25px 0;
}

.answer strong{
  color:var(--accent);
}


/* =========================================================
   FAQ
   ========================================================= */

.faq{
  display:grid;
  gap:10px;
}

.faq details{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  padding:18px 20px;
  transition:.2s;
}

.faq details:hover{
  border-color:#31516b;
}

.faq summary{
  cursor:pointer;
  font-weight:800;
  line-height:1.5;
}

.faq p{
  color:var(--muted);
  font-size:14px;
  margin:12px 0 0;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:24px;
  align-items:start;
}

.contact-grid > *{
  min-width:0;
}

.contact-info{
  display:grid;
  gap:12px;
}

.info{
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}

.info b{
  display:block;
  font-size:11px;
  color:var(--accent);
  letter-spacing:.12em;
  margin-bottom:7px;
}

.info span,
.info a{
  color:#c8d2dd;
  font-size:14px;
}

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

.form{
  width:100%;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
}

.form-header{
  margin-bottom:22px;
}

.form-header h3{
  margin-bottom:10px;
}

.form-header p{
  color:var(--muted);
  font-size:14px;
  margin-bottom:0;
}

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

.field{
  display:grid;
  gap:7px;
  min-width:0;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:12px;
  font-weight:800;
  color:#c7d1dc;
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-width:0;
  background:#080d15;
  border:1px solid var(--line);
  color:white;
  border-radius:11px;
  padding:12px 13px;
  outline:none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#657284;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,184,255,.08);
}

.field select{
  appearance:auto;
}

textarea{
  min-height:145px;
  resize:vertical;
}

.status{
  display:none;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:15px;
  background:rgba(37,184,255,.08);
  border:1px solid rgba(37,184,255,.2);
  color:#ccefff;
}

.status.show{
  display:block;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  border-top:1px solid var(--line);
  padding:45px 0 25px;
  background:#05080d;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:35px;
}

.footer p,
.footer a{
  color:var(--muted);
  font-size:13px;
}

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

.footer h3{
  font-size:12px;
  letter-spacing:.12em;
  color:white;
}

.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:18px;
  font-size:11px;
  color:#738091;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}


/* =========================================================
   UTILITIES
   ========================================================= */

.muted{
  color:var(--muted);
}

.center{
  text-align:center;
}

.narrow{
  width:100%;
  max-width:760px;
  margin-inline:auto;
}

.pill{
  display:inline-block;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#aebbc9;
  font-size:11px;
  margin:3px;
}

.notice{
  padding:18px;
  border:1px dashed #34546b;
  border-radius:16px;
  background:rgba(37,184,255,.035);
  color:#bac6d2;
  font-size:13px;
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:.7s;
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* =========================================================
   EXPANDED CONTENT
   ========================================================= */

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

.topic-grid .card{
  min-height:100%;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.stat{
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}

.stat b{
  display:block;
  font-size:30px;
  letter-spacing:-.04em;
  color:var(--text);
}

.stat span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

.prose{
  width:100%;
  max-width:900px;
}

.prose p,
.prose li{
  color:#c4ced9;
  font-size:15px;
}

.prose h2{
  font-size:34px;
  margin-top:0;
}

.prose h3{
  margin-top:26px;
}

.prose ul{
  padding-left:21px;
}


/* =========================================================
   TABLE
   ========================================================= */

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:700px;
}

th,
td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}

th{
  color:var(--accent);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#0a1119;
}

td{
  color:#c4ced9;
}

tr:last-child td{
  border-bottom:0;
}


/* =========================================================
   CALLOUT
   ========================================================= */

.callout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:24px;
  align-items:center;
  padding:28px;
  border:1px solid rgba(37,184,255,.26);
  border-radius:24px;
  background:linear-gradient(
    135deg,
    rgba(37,184,255,.09),
    rgba(255,255,255,.02)
  );
}

.callout > *{
  min-width:0;
}

.callout p{
  color:#c4ced9;
}

.callout .actions{
  justify-content:flex-end;
  margin:0;
}


/* =========================================================
   MEDIA ROW
   ========================================================= */

.media-row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:18px;
  align-items:stretch;
}

.media-row > *{
  min-width:0;
}

.media-row img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:22px;
}

.media-copy{
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
}


/* =========================================================
   PROJECTS / GALLERY UPGRADE
   ========================================================= */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.no-scroll{
  overflow:hidden;
}

.project-hero{
  padding:72px 0 58px;
}

.project-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:48px;
  align-items:center;
}

.project-hero-grid > *{
  min-width:0;
}

.project-points{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}

.project-points span{
  font-size:11px;
  font-weight:800;
  color:#b9c7d5;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:8px 10px;
  border-radius:999px;
}

.project-hero-visual{
  padding:10px;
}

.hero-mosaic{
  position:relative;
  min-height:470px;
}

.hero-mosaic img{
  position:absolute;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  object-fit:cover;
  background:#02050a;
}

.hero-mosaic .mosaic-a{
  width:72%;
  height:290px;
  right:0;
  top:0;
  z-index:3;
}

.hero-mosaic .mosaic-b{
  width:59%;
  height:225px;
  left:0;
  top:125px;
  z-index:2;
}

.hero-mosaic .mosaic-c{
  width:58%;
  height:215px;
  right:5%;
  bottom:0;
  z-index:1;
}

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

.concept-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  transition:.25s;
}

.concept-card:hover{
  transform:translateY(-5px);
  border-color:#31516b;
}

.concept-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#02050a;
}

.concept-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.concept-card:hover .concept-media img{
  transform:scale(1.04);
}

.concept-chip{
  position:absolute;
  left:12px;
  bottom:12px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(3,7,12,.82);
  border-radius:999px;
  color:#d9e5ee;
}

.concept-body{
  padding:18px;
}

.concept-kicker{
  font-size:10px;
  color:var(--accent);
  letter-spacing:.14em;
  font-weight:900;
  margin-bottom:6px;
}

.concept-body h3{
  font-size:18px;
  margin-bottom:8px;
}

.concept-body p{
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  margin:0 0 14px;
}

.text-link{
  font-size:12px;
  font-weight:900;
  color:var(--accent);
}

.gallery-pro{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:100%;
}

.gallery-pro .gallery-item{
  margin:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  cursor:default;
}

.gallery-pro .gallery-item[hidden]{
  display:none;
}

.gallery-media{
  position:relative;
  aspect-ratio:16/10;
  background:#02050a;
  overflow:hidden;
}

.gallery-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#02050a;
  transition:transform .4s ease;
}

.gallery-item:hover .gallery-media img{
  transform:scale(1.025);
}

.image-view{
  position:absolute;
  right:12px;
  bottom:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(3,8,13,.86);
  color:white;
  padding:8px 10px;
  border-radius:9px;
  font-size:11px;
  font-weight:900;
  opacity:0;
  transform:translateY(4px);
  transition:.2s;
}

.gallery-item:hover .image-view,
.gallery-item:focus-within .image-view{
  opacity:1;
  transform:none;
}

.split-callout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:28px;
  align-items:start;
}

.reference-list{
  display:grid;
  gap:10px;
  padding:6px 0;
}

.reference-list > div{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}

.reference-list b{
  color:var(--accent);
  font-size:11px;
}

.reference-list span{
  font-size:13px;
  color:#cbd5df;
}

.reference-list .btn{
  margin-top:8px;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:200;
  display:grid;
  place-items:center;
  padding:24px;
}

.lightbox-frame{
  position:relative;
  width:min(1200px,100%);
  max-height:94vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lightbox-frame img{
  max-width:100%;
  max-height:80vh;
  width:auto;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 25px 80px rgba(0,0,0,.5);
}

.lightbox-frame p{
  max-width:900px;
  color:#c9d4de;
  text-align:center;
  font-size:12px;
  margin:10px 0 0;
}

.lightbox-close{
  position:absolute;
  right:0;
  top:-48px;
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:#101721;
  color:white;
  font-size:25px;
  line-height:1;
}


/* =========================================================
   1100px
   ========================================================= */

@media(max-width:1100px){

  .navlinks{
    gap:16px;
  }

  .brand{
    min-width:220px;
  }

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

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

  .footer-grid{
    grid-template-columns:1.5fr 1fr 1fr;
  }

}


/* =========================================================
   950px
   ========================================================= */

@media(max-width:950px){

  .navlinks{
    position:absolute;
    top:78px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:15px 20px;
    background:#080d14;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 35px rgba(0,0,0,.2);
  }

  .navlinks.open{
    display:flex;
  }

  .navlinks a{
    padding:12px 4px;
    border-bottom:1px solid rgba(255,255,255,.05);
  }

  .navlinks a:last-child{
    border-bottom:0;
  }

  .menu{
    display:block;
  }

  .navcta .btn{
    display:none;
  }

  .hero-grid,
  .feature,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero-image{
    order:2;
  }

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

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

  .service-grid{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .brand{
    min-width:auto;
  }

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

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

  .callout,
  .media-row{
    grid-template-columns:1fr;
  }

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

  .project-hero-grid,
  .split-callout{
    grid-template-columns:1fr;
  }

  .hero-mosaic{
    min-height:400px;
  }

  /*
    GALLERY:
    3 columns on desktop
    2 columns on tablet
  */

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

  .gallery-item img{
    height:240px;
  }

}


/* =========================================================
   620px — MOBILE
   ========================================================= */

@media(max-width:620px){

  .container{
    width:min(calc(100% - 28px),var(--max));
  }

  .topbar .container{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }

  .topbar .mail{
    display:none;
  }

  .nav .container{
    min-height:68px;
  }

  .navlinks{
    top:68px;
  }

  .hero{
    padding:55px 0 50px;
  }

  .section{
    padding:55px 0;
  }

  h1{
    font-size:42px;
  }

  h2{
    font-size:32px;
  }


  /* SECTION HEAD */

  .section-head{
    display:block;
    width:100%;
    margin-bottom:28px;
  }

  .section-head h2{
    width:100%;
    max-width:100%;
    font-size:32px;
    line-height:1.12;
    margin-bottom:14px;
  }

  .section-head > p{
    width:100%;
    max-width:100%;
    margin:0;
    font-size:14px;
    line-height:1.75;
  }


  /* GENERAL GRIDS */

  .cards,
  .process,
  .form-grid,
  .footer-grid,
  .topic-grid,
  .stats,
  .concept-grid,
  .gallery,
  .gallery-pro{
    grid-template-columns:1fr;
  }


  /* FORM */

  .field.full{
    grid-column:auto;
  }

  .form{
    padding:22px;
  }


  /* BRAND */

  .brand strong{
    font-size:11px;
  }

  .brand small{
    font-size:7px;
    letter-spacing:.15em;
  }

  .brand img{
    width:38px;
    height:38px;
  }


  /* BUTTONS */

  .actions{
    margin:22px 0;
  }

  .actions .btn{
    width:100%;
  }


  /* GALLERY */

  .gallery{
    width:100%;
    gap:16px;
  }

  .gallery-item img{
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
  }

  .gallery-caption{
    min-height:auto;
  }


  /* PROJECT HERO */

  .hero-mosaic{
    min-height:330px;
  }

  .hero-mosaic .mosaic-a{
    width:80%;
    height:200px;
  }

  .hero-mosaic .mosaic-b{
    width:64%;
    height:170px;
    top:92px;
  }

  .hero-mosaic .mosaic-c{
    width:65%;
    height:165px;
  }

  .project-hero{
    padding-top:52px;
  }


  /* FILTER */

  .gallery-toolbar{
    gap:6px;
  }

  .filter{
    font-size:11px;
    padding:8px 11px;
  }


  /* SERVICE CARD */

  .service-card{
    grid-template-columns:54px minmax(0,1fr);
    padding:22px;
    gap:14px;
  }

  .service-icon{
    width:48px;
    height:48px;
  }


  /* FOOTER */

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

}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .container{
    width:calc(100% - 22px);
  }

  h1{
    font-size:36px;
  }

  h2{
    font-size:29px;
  }

  .lead{
    font-size:16px;
  }

  .card{
    padding:22px;
  }

  .step{
    padding:20px;
  }

  .form{
    padding:18px;
  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none !important;
    animation:none !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }

}