:root{
  --bg:#041826;
  --bg-soft:#07263b;
  --bg-panel:#0a2f48;
  --paper:#0f3d5d;
  --ink:#eaf7ff;
  --muted:#a8c9da;
  --line:rgba(198,233,255,.16);
  --accent:#5fd6ff;
  --accent-soft:#123f5f;
  --salmon:#ff9a76;
  --gold:#ffd76a;
  --aqua:#7ee6ff;
  --deep:#03111d;
  --ocean:#0b5c8d;
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --radius:26px;
  --wrap:min(1180px, calc(100% - 48px));
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(95,214,255,.14), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(126,230,255,.10), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(255,154,118,.08), transparent 22%),
    linear-gradient(180deg, #03111c 0%, #07243a 42%, #041826 100%);
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{
  font:inherit;
  border:none;
}

.grain::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:4px 4px, 4px 4px;
  mix-blend-mode:soft-light;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(12px);
  background:rgba(4,24,38,.72);
  border-bottom:1px solid var(--line);
}

.topbar__inner{
  width:var(--wrap);
  margin:0 auto;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:700;
  color:var(--ink);
}

.brand__mark{
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--aqua), var(--accent), var(--gold));
  box-shadow:0 0 0 8px rgba(95,214,255,.10);
}

.nav{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}

.nav a{
  font-size:14px;
  color:var(--muted);
  position:relative;
  padding:6px 0;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s ease;
}

.nav a:hover{
  color:var(--ink);
}

.nav a:hover::after{
  transform:scaleX(1);
}

.hero{
  width:var(--wrap);
  margin:0 auto;
  padding:56px 0 28px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:start;
}

.hero__copy{
  padding-top:18px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  background:rgba(13,51,77,.56);
}

.title{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(64px, 11vw, 140px);
  line-height:.88;
  letter-spacing:-.04em;
  max-width:8ch;
  color:#f3fbff;
  text-shadow:0 10px 40px rgba(0,0,0,.28);
}

.hero__lede{
  margin:26px 0 0;
  max-width:58ch;
  font-size:18px;
  line-height:1.7;
  color:#d8eefb;
}

.hero__lede strong{
  color:#ffffff;
}

.hero__meta{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.meta{
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(10,47,72,.70);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.meta span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:8px;
}

.meta strong{
  display:block;
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
}

.hero__visual{
  position:relative;
  min-height:780px;
  border-radius:34px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 22% 18%, rgba(126,230,255,.18), transparent 16%),
    radial-gradient(circle at 78% 70%, rgba(95,214,255,.14), transparent 24%),
    linear-gradient(180deg, rgba(8,39,60,.96), rgba(4,24,38,.94));
  overflow:hidden;
  box-shadow:var(--shadow);
}

.hero__visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,92,141,.14) 0 50%, rgba(95,214,255,.08) 50% 100%);
  pointer-events:none;
}

.visual-labels{
  position:absolute;
  top:18px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
  z-index:2;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#d8eefb;
}

.poster{
  position:absolute;
  width:46%;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  border:1px solid rgba(198,233,255,.12);
  cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease;
  background:#08263b;
  padding:0;
}

.poster:hover{
  transform:translateY(-8px) rotate(0deg) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}

.poster img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#08263b;
}

.poster--left{
  left:8%;
  top:15%;
  transform:rotate(-7deg);
}

.poster--right{
  right:8%;
  bottom:12%;
  transform:rotate(7deg);
}

.stamp{
  position:absolute;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(198,233,255,.14);
  background:rgba(8,39,60,.90);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  text-align:center;
  line-height:1.4;
  box-shadow:var(--shadow);
  color:#ecf9ff;
}

.stamp--one{
  right:24px;
  top:94px;
  background:rgba(10,47,72,.92);
}

.stamp--two{
  left:26px;
  bottom:26px;
  background:rgba(16,76,112,.88);
}

.section{
  width:var(--wrap);
  margin:0 auto;
  padding:80px 0;
  border-top:1px solid var(--line);
}

.section__intro{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  margin-bottom:34px;
  align-items:start;
}

.section__intro h2{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;
  letter-spacing:-.04em;
  color:#f3fbff;
}

.section__intro p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
  max-width:62ch;
}

.manifesto{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:20px;
  align-items:stretch;
}

.quote{
  padding:34px;
  border-radius:28px;
  background:
    linear-gradient(180deg, #0f5f8d 0%, #072c45 100%);
  color:#eef9ff;
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:var(--shadow);
  border:1px solid rgba(198,233,255,.10);
}

.quote p{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(34px,4vw,54px);
  line-height:1;
  letter-spacing:-.03em;
  max-width:12ch;
}

.quote small{
  color:rgba(255,255,255,.74);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}

.insights{
  display:grid;
  gap:16px;
}

.insight{
  padding:22px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(10,47,72,.70);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.insight span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#a9d9ee;
  margin-bottom:8px;
}

.insight h3{
  margin:0 0 10px;
  font-size:20px;
  color:#f1fbff;
}

.insight p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.case-card{
  position:relative;
  min-height:620px;
  padding:24px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.case-card--audio{
  background:
    linear-gradient(180deg, #0b3f60 0%, #07283e 100%);
}

.case-card--kids{
  background:
    linear-gradient(180deg, #0d557f 0%, #0a3552 100%);
}

.case-card__top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.case-card__top span,
.case-card__bottom span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#a9d9ee;
}

.case-card h3{
  margin:14px 0 0;
  font-family:"Cormorant Garamond", serif;
  font-size:48px;
  line-height:.95;
  letter-spacing:-.04em;
  max-width:8ch;
  color:#f4fcff;
}

.case-card__image{
  align-self:center;
  width:min(340px, 82%);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  border:1px solid rgba(198,233,255,.10);
  cursor:pointer;
  padding:0;
  background:#08263b;
  transition:transform .3s ease, box-shadow .3s ease;
}

.case-card__image:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(0,0,0,.36);
}

.case-card__image img{
  aspect-ratio:3/4;
  width:100%;
  object-fit:cover;
  background:#08263b;
}

.case-card__bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.mini{
  padding-top:14px;
  border-top:1px solid rgba(198,233,255,.12);
}

.mini strong{
  display:block;
  font-size:15px;
  margin:8px 0 6px;
  color:#f2fbff;
}

.mini p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#d0e9f6;
}

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

.step{
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(10,47,72,.70);
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.step__num{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(198,233,255,.14);
  font-weight:800;
  background:rgba(15,61,93,.9);
  color:#f1fbff;
}

.step h3{
  margin:18px 0 10px;
  font-size:22px;
  color:#f1fbff;
}

.step p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.credits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.credits__panel{
  padding:26px;
  border-radius:28px;
  border:1px solid var(--line);
  background:rgba(10,47,72,.70);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.credits__panel h3{
  margin:0 0 12px;
  font-size:22px;
  color:#f1fbff;
}

.credits__panel p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.7;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}

.tags li{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(15,61,93,.92);
  font-size:13px;
  font-weight:600;
  color:#ecf9ff;
}

.footer{
  width:var(--wrap);
  margin:0 auto;
  padding:24px 0 50px;
  color:var(--muted);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid var(--line);
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  z-index:40;
}

.modal.is-open{
  display:grid;
}

.modal__bg{
  position:absolute;
  inset:0;
  background:rgba(2,8,14,.80);
  backdrop-filter:blur(8px);
}

.modal__panel{
  position:relative;
  width:min(980px, calc(100% - 32px));
  border-radius:28px;
  overflow:hidden;
  background:#07263b;
  box-shadow:0 30px 80px rgba(0,0,0,.48);
  border:1px solid rgba(198,233,255,.12);
  display:grid;
  grid-template-columns:1.05fr .95fr;
}

.modal__media{
  background:#041826;
  padding:20px;
  display:grid;
  place-items:center;
}

.modal__media img{
  max-height:80vh;
  width:100%;
  object-fit:contain;
}

.modal__content{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
}

.modal__kicker{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9fd8ef;
  margin-bottom:12px;
}

.modal__content h3{
  margin:0 0 12px;
  font-family:"Cormorant Garamond", serif;
  font-size:52px;
  line-height:.9;
  letter-spacing:-.04em;
  color:#f3fbff;
}

.modal__content p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:16px;
}

.modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  font-size:18px;
  color:#ffffff;
}

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

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

@media (max-width: 980px){
  .topbar__inner,
  .hero,
  .section,
  .footer{
    width:min(100% - 32px, 1180px);
  }

  .hero,
  .section__intro,
  .manifesto,
  .split-grid,
  .process,
  .credits,
  .modal__panel{
    grid-template-columns:1fr;
  }

  .hero__meta,
  .case-card__bottom{
    grid-template-columns:1fr;
  }

  .hero__visual{
    min-height:620px;
  }

  .nav{
    display:none;
  }

  .modal__media img{
    max-height:50vh;
  }
}

@media (max-width: 680px){
  .title{
    font-size:clamp(54px, 20vw, 88px);
  }

  .hero{
    padding-top:28px;
  }

  .hero__visual{
    min-height:520px;
  }

  .poster{
    width:56%;
  }

  .poster--left{
    left:6%;
    top:16%;
  }

  .poster--right{
    right:6%;
    bottom:14%;
  }

  .stamp{
    width:90px;
    height:90px;
    font-size:10px;
  }

  .section{
    padding:56px 0;
  }

  .case-card{
    min-height:auto;
  }

  .modal__content h3{
    font-size:42px;
  }

  .footer{
    flex-direction:column;
  }
}