/* =========================================================
   ICY BUILDS — portfolio
   ========================================================= */

:root{
  --bg:        #060b12;
  --bg-2:      #0a121c;
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --line:      rgba(146,205,235,.16);
  --line-2:    rgba(146,205,235,.32);

  --ice:       #7fd8f4;
  --ice-hi:    #c4efff;
  --ice-deep:  #1d6d94;

  --text:      #e9f5fb;
  --muted:     #90a8bd;

  --r:   16px;
  --r-lg:22px;

  --shadow: 0 24px 60px -20px rgba(0,0,0,.8);
  --glow:   0 0 0 1px rgba(127,216,244,.25), 0 12px 40px -12px rgba(127,216,244,.35);

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.7,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient glows behind everything */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -5%,  rgba(45,140,190,.22), transparent 60%),
    radial-gradient(800px 600px at 92% 12%,  rgba(90,190,230,.14), transparent 60%),
    radial-gradient(1000px 700px at 50% 105%,rgba(30,110,155,.18), transparent 60%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; line-height:1.05; }
p{ margin:0 0 1.1em; }
button{ font:inherit; color:inherit; }

#snow{
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.55;
}

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ice); color:#03202c; padding:12px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ice); font-weight:600; margin:0 0 14px;
}

h1,h2,.brand__text,.stats b,.marquee span{
  font-family:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  font-weight:400; letter-spacing:.01em;
}

h2{
  font-size:clamp(2rem,5vw,3.4rem);
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff 10%,var(--ice-hi) 55%,var(--ice-deep) 130%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

h3{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; }

.head{ max-width:680px; margin-bottom:44px; }
.head__sub{ color:var(--muted); margin:16px 0 0; font-size:1.05rem; }
.head__link{
  display:inline-block; margin-top:16px; color:var(--ice); font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.head__link:hover{ border-bottom-color:var(--ice); }

/* ---------- buttons ---------- */
.btn{
  --b-bg:linear-gradient(180deg,var(--ice-hi),var(--ice));
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; border:0;
  background:var(--b-bg); color:#042534;
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  box-shadow:0 10px 30px -10px rgba(127,216,244,.6);
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 16px 40px -12px rgba(127,216,244,.8); }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line-2); box-shadow:none;
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:var(--surface-2); box-shadow:none; }

.btn--sm{ padding:10px 20px; font-size:.85rem; }
.btn--full{ width:100%; margin-top:22px; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:16px 0;
  transition:padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:9px 0;
  background:rgba(6,11,18,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* z-index keeps the logo above the mobile menu panel */
.brand{ display:flex; align-items:center; gap:11px; position:relative; z-index:2; }
.brand img{ border-radius:9px; }
.brand__text{ font-size:1.15rem; letter-spacing:.04em; }
.brand__text em{ font-style:normal; color:var(--ice); }

.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a:not(.btn){
  font-size:.92rem; font-weight:500; color:var(--muted);
  position:relative; padding:4px 0; transition:color .2s;
}
.nav__links a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--ice); transition:width .28s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--text); }
.nav__links a:not(.btn):hover::after{ width:100%; }

.burger{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:10px; border-radius:10px;
  position:relative; z-index:2;
}
.burger span{ display:block; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:130px 0 90px; overflow:hidden; isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  filter:saturate(.85) contrast(1.05);
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,11,18,.86) 0%, rgba(6,11,18,.62) 35%, rgba(6,11,18,.94) 88%, var(--bg) 100%),
    radial-gradient(1000px 600px at 20% 50%, rgba(6,11,18,.5), transparent 70%);
}
.hero__inner{ position:relative; z-index:2; }
.hero__inner > *{ max-width:840px; }

.hero__title{
  font-size:clamp(3.6rem,13vw,9.5rem);
  line-height:.86; text-transform:uppercase; margin:0 0 26px;
  display:flex; flex-direction:column;
}
.hero__title span{
  background:linear-gradient(175deg,#fff 8%,var(--ice-hi) 48%,#4fa8ce 105%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 30px rgba(60,160,210,.45));
}
.hero__title .outline{
  -webkit-text-stroke:2px rgba(196,239,255,.55);
  background:linear-gradient(175deg, rgba(127,216,244,.22), rgba(127,216,244,.04));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__sub{
  font-size:clamp(1.02rem,1.9vw,1.28rem);
  color:#c3d6e4; max-width:600px; margin:0 0 34px;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.stats{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 46px;
}
.stats li{ display:flex; flex-direction:column; }
.stats b{
  font-size:clamp(2rem,4.4vw,2.9rem); line-height:1;
  color:var(--ice-hi);
  text-shadow:0 0 28px rgba(127,216,244,.45);
}
.stats span{ font-size:.82rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }

.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid var(--line-2); border-radius:14px; z-index:3;
}
.scroll-hint span{
  position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--ice); transform:translateX(-50%);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,14px)} }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  padding:20px 0; position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 34s linear infinite;
}
.marquee span{
  font-size:clamp(1.2rem,2.6vw,1.9rem); text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1px rgba(196,239,255,.4);
  white-space:nowrap; transition:.3s;
}
.marquee i{ color:var(--ice); font-style:normal; opacity:.6; font-size:.9rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ position:relative; z-index:2; padding:clamp(72px,10vw,130px) 0; }
.section--tight{ padding-top:clamp(48px,6vw,80px); }

/* ---------- about ---------- */
.about{
  display:grid; grid-template-columns:1.35fr .95fr; gap:60px; align-items:start;
}
.about__text h2{ margin-bottom:26px; }
.about__text p{ color:#b9cbd9; font-size:1.05rem; }

.callout{
  border-left:3px solid var(--ice);
  background:linear-gradient(90deg, rgba(127,216,244,.1), transparent);
  padding:14px 18px; border-radius:0 10px 10px 0; color:var(--text) !important;
}
.callout b{ color:var(--ice-hi); }

.sig{ color:var(--ice) !important; font-weight:600; margin-bottom:0 !important; }

.about__card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; text-align:center; backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  position:sticky; top:100px;
}
.about__card img{ margin:0 auto 18px; border-radius:16px; box-shadow:0 12px 34px -12px rgba(127,216,244,.5); }
.about__card h3{ margin-bottom:18px; }

.ticks{ list-style:none; margin:0; padding:0; text-align:left; }
.ticks li{
  position:relative; padding:9px 0 9px 28px; color:#b9cbd9; font-size:.95rem;
  border-bottom:1px solid rgba(146,205,235,.09);
}
.ticks li:last-child{ border-bottom:0; }
.ticks li::before{
  content:'❄'; position:absolute; left:2px; top:9px; color:var(--ice); font-size:.85rem;
}

/* ---------- grid ---------- */
.grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.tile{
  position:relative; margin:0; overflow:hidden; cursor:pointer;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); aspect-ratio:16/10;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .45s var(--ease);
}
.tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(4,10,17,.9) 100%);
  opacity:.75; transition:opacity .4s var(--ease);
}
.tile:hover{
  transform:translateY(-5px);
  border-color:var(--line-2);
  box-shadow:var(--glow), var(--shadow);
}
.tile:hover img{ transform:scale(1.07); filter:saturate(1.12); }
.tile:hover::after{ opacity:.95; }

.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 20px;
  transform:translateY(6px); opacity:0; transition:.4s var(--ease);
}
.tile:hover figcaption, .tile:focus-visible figcaption{ transform:none; opacity:1; }
.tile figcaption b{ font-size:1rem; font-weight:600; }

.grid__note{ margin:34px 0 0; color:var(--muted); text-align:center; }
.grid__note a{ color:var(--ice); font-weight:600; border-bottom:1px solid transparent; transition:.25s; }
.grid__note a:hover{ border-bottom-color:var(--ice); }

/* ---------- client cards ---------- */
/* 3 columns + two span-2 cards = a perfectly filled 3x3 block */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{
  position:relative; padding:28px;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  backdrop-filter:blur(8px);
  transition:.4s var(--ease); overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(400px 200px at 0% 0%, rgba(127,216,244,.14), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.card:hover::before{ opacity:1; }
.card h3{ margin-bottom:10px; position:relative; }
.card p{ margin:0; color:var(--muted); font-size:.95rem; position:relative; }
.card--wide{ grid-column:span 2; }
.card--accent{ border-color:rgba(127,216,244,.35); background:linear-gradient(160deg, rgba(127,216,244,.14), var(--surface)); }
.card__badge{
  display:inline-block; margin-bottom:12px; padding:5px 12px; border-radius:999px;
  background:rgba(127,216,244,.16); border:1px solid var(--line-2);
  font-size:.75rem; font-weight:700; color:var(--ice-hi); letter-spacing:.04em; position:relative;
}

/* ---------- videos ---------- */
.videos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.vid{ display:block; transition:transform .4s var(--ease); }
.vid__thumb{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line); aspect-ratio:16/9;
  background:var(--surface);
}
.vid__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; }
.vid__play{
  position:absolute; inset:0; margin:auto;
  width:62px; height:62px; border-radius:50%;
  background:rgba(6,11,18,.62); border:1.5px solid rgba(196,239,255,.6);
  backdrop-filter:blur(6px);
  transition:.4s var(--ease);
}
.vid__play::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:0; height:0; border-left:16px solid var(--ice-hi);
  border-block:10px solid transparent; transform:translateX(3px);
}
.vid:hover{ transform:translateY(-5px); }
.vid:hover .vid__thumb{ border-color:var(--line-2); box-shadow:var(--glow); }
.vid:hover img{ transform:scale(1.06); filter:brightness(1.05); }
.vid:hover .vid__play{ background:var(--ice); border-color:var(--ice); transform:scale(1.08); }
.vid:hover .vid__play::after{ border-left-color:#042534; }

.vid__meta{ display:block; padding:16px 4px 0; }
.vid__meta b{ display:block; font-size:1rem; font-weight:600; line-height:1.4; }
.vid__sub{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-top:6px;
}
.vid__sub em{ font-style:normal; color:var(--ice); font-size:.82rem; letter-spacing:.04em; }
.vid__sub i{
  flex:none; font-style:normal; color:var(--muted); font-size:.8rem;
  font-variant-numeric:tabular-nums;
}

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact .head{ margin-inline:auto; }
/* explicit columns (4 / 2 / 1) so the four cards never leave an orphan */
.contact__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:14px; max-width:1140px; margin-inline:auto;
}
.link-card{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  padding:18px 18px; border-radius:var(--r); cursor:pointer;
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); backdrop-filter:blur(8px);
  transition:.35s var(--ease);
}
.link-card:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--glow); }
.link-card__ico{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; color:var(--ice);
  background:rgba(127,216,244,.12); border:1px solid var(--line);
}
.link-card__ico svg{ width:22px; height:22px; }
.link-card__body{ flex:1; min-width:0; }
.link-card__body b{ display:block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.link-card__body em{ display:block; font-style:normal; font-size:1.05rem; font-weight:600; margin-top:2px; }
.link-card__act{ flex:none; font-size:.8rem; color:var(--ice); font-weight:600; }

.contact__foot{ margin:40px auto 0; max-width:620px; color:var(--muted); font-size:.95rem; }

/* ---------- footer ---------- */
.footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding:34px 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer p{ margin:0; color:var(--muted); font-size:.87rem; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(3,7,12,.94); backdrop-filter:blur(14px);
  display:grid; place-items:center; padding:70px 20px;
  opacity:0; transition:opacity .3s var(--ease);
}
.lb.is-open{ opacity:1; }
.lb[hidden]{ display:none; }

.lb__stage{ margin:0; max-width:min(1400px,100%); max-height:100%; display:flex; flex-direction:column; gap:14px; }
.lb__stage img{
  max-width:100%; max-height:calc(100svh - 175px);
  object-fit:contain; border-radius:12px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  animation:pop .4s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:scale(.97); } }

.lb__cap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.lb__cap b{ font-size:1.05rem; font-weight:600; }
.lb__cap span{ color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; }

.lb__close,.lb__nav{
  position:absolute; z-index:2; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--text); border-radius:50%; backdrop-filter:blur(8px);
  display:grid; place-items:center; transition:.28s var(--ease);
}
.lb__close{ top:20px; right:20px; width:46px; height:46px; font-size:1.1rem; }
.lb__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2rem; line-height:0; padding-bottom:5px; }
.lb__nav--prev{ left:20px; }
.lb__nav--next{ right:20px; }
.lb__close:hover,.lb__nav:hover{ background:var(--ice); color:#042534; border-color:var(--ice); }
.lb__nav:hover{ transform:translateY(-50%) scale(1.08); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:120;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--ice); color:#042534; font-weight:700; font-size:.9rem;
  padding:12px 24px; border-radius:999px;
  box-shadow:0 16px 40px -12px rgba(127,216,244,.7);
  transition:.35s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .about{ grid-template-columns:1fr; gap:40px; }
  .about__card{ position:static; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card--wide{ grid-column:span 1; }
  .contact__grid{ grid-template-columns:repeat(2,1fr); max-width:660px; }
}

@media (max-width:820px){
  .burger{ display:block; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; top:0;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:92px 24px 32px;
    background:rgba(6,11,18,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-100%); transition:transform .4s var(--ease);
    box-shadow:var(--shadow);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a:not(.btn){ padding:14px 0; font-size:1.05rem; border-bottom:1px solid var(--line); }
  .nav__links .btn{ margin-top:18px; }
  .hero{ min-height:auto; padding:120px 0 70px; }
  .scroll-hint{ display:none; }
  .stats{ gap:22px 34px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .lb{ padding:70px 12px; }
  .lb__nav{ width:44px; height:44px; font-size:1.6rem; }
  .lb__nav--prev{ left:8px; } .lb__nav--next{ right:8px; }
}

@media (max-width:560px){
  .grid,.videos,.cards,.contact__grid{ grid-template-columns:1fr; }
  .tile figcaption{ opacity:1; transform:none; }
  .hero__cta .btn{ flex:1 1 100%; }
  .footer__inner{ justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  #snow{ display:none; }
}