.koru-naval { --koru-bg:#ffffff; --koru-ink:#15212e; --koru-muted:#5a6674;
  --koru-line:#e5e9ef; --koru-accent:#1c4e80; --koru-accent-soft:#eaf1f8;
  --mx:-400px; --my:-400px;
  font-family:'Inter',sans-serif; color:var(--koru-ink);
  background: transparent;
  padding:48px 24px;
  /* break out of container to full width */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; }

/* dot-grid spotlight */
.koru-naval::after{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(15,24,33,0.18) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(
    circle 240px at var(--mx) var(--my),
    rgba(0,0,0,1), rgba(0,0,0,0.50) 45%, transparent 80%);
          mask-image: radial-gradient(
    circle 240px at var(--mx) var(--my),
    rgba(0,0,0,1), rgba(0,0,0,0.50) 45%, transparent 80%);
  pointer-events:none; z-index:1;
}

.koru-naval > *{ position:relative; z-index:2; }

.koru-naval *{box-sizing:border-box;}

.koru-header{text-align:center; max-width:820px; margin:0 auto;}
.koru-header h2{
  /* must match .koru-data-header h2 */
  font-family:'Fraunces', Georgia, serif;
  font-size: clamp(34px, 4.5vw, 48px);
  font-weight: 500;
  color: #0f1821;
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin:0 0 22px;
}
.koru-header h2::after{content:""; display:block; width:48px; height:2px;
  background:var(--koru-accent); margin:18px auto 0;}
.koru-header p{
  /* must match .koru-data-pitch p */
  text-align: justify;
  text-align-last: center;
  font-family:'Inter', system-ui, sans-serif;
  font-size: clamp(14.5px, 1.6vw, 20px);
  line-height: 1.75;
  font-weight: 400;
  color: rgba(15, 24, 33, 0.82);
  margin:0;
}

.koru-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin:0 auto; padding:6px;
  width:40%; max-width:40%;
  border-top:1px solid var(--koru-line);
  border-bottom:1px solid var(--koru-line);}
@media (max-width:1200px){
  .koru-filters{width:60%; max-width:60%;}
}
@media (max-width:800px){
  .koru-filters{width:85%; max-width:85%;}
  .koru-header p{text-align:center; text-align-last:center;}
}
.koru-filters button{appearance:none; border:1px solid transparent;
  background:transparent; font-family:inherit; font-size:12px; font-weight:500;
  letter-spacing:.8px; text-transform:uppercase; color:var(--koru-muted);
  padding:8px 16px; border-radius:999px; cursor:pointer;
  transition:all .25s ease;}
.koru-filters button:hover{color:var(--koru-accent);}
.koru-filters button.is-active{background:var(--koru-accent); color:#fff;
  border-color:var(--koru-accent);}

/* large-screen scaling */
@media (min-width: 1720px){
  .koru-header{max-width:1000px;}
  .koru-header h2{font-size:56px;}
  .koru-header p{font-size:21px;}
  .koru-filters button{font-size:13.5px; padding:10px 20px;}
}
@media (min-width: 2400px){
  .koru-header{max-width:1160px;}
  .koru-header h2{font-size:64px;}
  .koru-header p{font-size:24px;}
  .koru-filters button{font-size:15px;}
}

.koru-grid{display:grid;
  /* force 3 cols regardless of fitGrid() */
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--koru-gap, 14px);
  width: 40%; max-width: 40%; margin: 0 auto;}
@media (max-width:1200px){
  .koru-grid{width: 60%; max-width: 60%;}
}
@media (max-width:800px){
  .koru-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: 85%; max-width: 85%;
  }
}
@media (max-width:520px){
  .koru-grid{grid-template-columns: 1fr !important;}
}

.koru-card{position:relative;
  height: auto !important;
  aspect-ratio: 4 / 3;
  border-radius:6px; overflow:hidden;
  cursor:pointer; background:#0d1620;
  transition:filter .35s ease, opacity .35s ease,
             box-shadow .35s ease, transform .35s cubic-bezier(0.2,0.9,0.3,1);
  box-shadow:0 1px 2px rgba(0,0,0,.06); will-change:transform;
  --card-mx:-200px; --card-my:-200px;}

.koru-card::before{content:''; position:absolute; inset:0;
  pointer-events:none; z-index:1;
  background: radial-gradient(
    circle 160px at var(--card-mx) var(--card-my),
    rgba(255,255,255,0.20), rgba(255,255,255,0.05) 40%, transparent 75%);
  opacity:0; transition:opacity 260ms ease;}
.koru-card:hover::before{opacity:1;}
.koru-card .koru-card-overlay{z-index:2;}
.koru-card .koru-card-tags{z-index:3;}

.koru-card img,
.koru-card video{
  width:100%; height:100%;
  object-fit: contain;
  display:block;
  background:#0a1219;
}
.koru-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,.28),
             0 6px 14px rgba(0,0,0,.18);
}
.koru-card .koru-card-overlay{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px 14px; color:#fff;}
.koru-naval .koru-card .koru-card-title,
.koru-naval .koru-card p.koru-card-title,
.koru-naval .koru-card h4.koru-card-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-size:18px !important; font-weight:600 !important;
  line-height:1.2 !important; margin:0 0 3px !important;
  color:#ffffff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.55) !important;
  padding:0 !important; letter-spacing:0 !important;}
.koru-naval .koru-card .koru-card-client{
  font-size:11px !important; letter-spacing:1.4px !important;
  text-transform:uppercase !important;
  color:#ffffff !important; opacity:1 !important; margin:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
  font-weight:500 !important;}
.koru-card .koru-card-tags{position:absolute; top:8px; left:8px;
  display:flex; flex-wrap:wrap; gap:3px;}
.koru-card .koru-card-tags span{font-size:9px; letter-spacing:.5px;
  text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--koru-ink);
  padding:2px 7px; border-radius:99px; font-weight:500;}

.koru-card.is-dimmed{filter:grayscale(.85) brightness(.85); opacity:.45;}
.koru-card.is-dimmed:hover{filter:grayscale(0) brightness(1); opacity:.85;}

.koru-card.is-moving{z-index:5;}

@media (max-width:720px){
  .koru-naval{padding:32px 16px;}
  .koru-header h2{font-size:30px;}
  .koru-filters{flex-wrap:wrap; justify-content:center;
    width:100%; max-width:100%; row-gap:8px;}
  .koru-filters button{flex-shrink:0;}

  .koru-card .koru-card-overlay{padding:8px 10px;
    background:linear-gradient(to top,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.35) 35%,
      rgba(0,0,0,0)   65%) !important;}
  .koru-naval .koru-card .koru-card-title,
  .koru-naval .koru-card p.koru-card-title,
  .koru-naval .koru-card h4.koru-card-title{
    font-size:13px !important; margin:0 0 1px !important;}
  .koru-naval .koru-card .koru-card-client{
    font-size:9px !important; letter-spacing:1px !important;}
  .koru-card .koru-card-tags{top:6px; left:6px; gap:2px;}
  .koru-card .koru-card-tags span{font-size:8px; padding:1px 5px;}
}

/* full-screen lightbox.
   sibling of .koru-naval, so no --koru-* vars -- colours are literal here */
.koru-modal{position:fixed; inset:0; z-index:9999;
  display:none; opacity:0;
  background:rgba(7,11,17,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:opacity .4s ease;}
.koru-modal.is-open{display:block; opacity:1;}
/* overflow:clip so focus jumps can't shift the panel sideways.
   --panel-w: fixed left info panel; picture area gets the rest */
.koru-lightbox{position:absolute; inset:0; overflow:hidden; overflow:clip;
  --panel-w:max(25vw, 300px);}

/* slides */
.koru-stage{position:absolute; inset:0 0 0 var(--panel-w);}
.koru-slide{position:absolute; inset:0; opacity:0;
  transform:scale(1.03);
  transition:opacity .6s ease, transform .8s cubic-bezier(.2,.9,.3,1);
  display:flex; align-items:center; justify-content:center;
  padding:56px 3.5vw 168px; box-sizing:border-box;
  pointer-events:none;}
.koru-slide.is-active{opacity:1; transform:scale(1); pointer-events:auto;}
.koru-slide-bg{position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(36px) brightness(.4) saturate(1.1);
  transform:scale(1.2);}
.koru-slide-media{position:relative; z-index:1;
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);}
.koru-slide.is-active .koru-slide-media{
  animation:koruKenBurns 18s ease-out forwards;}
@keyframes koruKenBurns{from{transform:scale(1);} to{transform:scale(1.06);}}
@media (prefers-reduced-motion: reduce){
  .koru-slide{transition:opacity .2s ease; transform:none;}
  .koru-slide.is-active{transform:none;}
  .koru-slide.is-active .koru-slide-media{animation:none;}
  .koru-card, .koru-card img, .koru-card video{transition:none;}
}

/* info panel type */
.koru-details .koru-modal-client{margin:0 0 8px; font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:600;}
.koru-details h3{margin:0 0 14px; font-family:'Fraunces',Georgia,serif;
  font-size:clamp(24px,1.9vw,34px); font-weight:500; color:#fff;
  line-height:1.15;}
.koru-details .koru-modal-tags{display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 28px;}
.koru-details .koru-modal-tags span{font-size:10px; letter-spacing:.9px;
  text-transform:uppercase; color:#fff; font-weight:500;
  background:rgba(255,255,255,.14);
  padding:4px 11px; border-radius:99px;}

/* controls */
.koru-controls{position:absolute; top:22px; right:26px; z-index:8;
  display:flex; align-items:center; gap:10px;}
.koru-counter{font-family:'Inter',sans-serif; font-size:11px;
  letter-spacing:1.4px; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  padding:7px 12px; border-radius:99px;}
.koru-ctrl-btn{appearance:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.5px;
  color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
  padding:8px 16px; border-radius:99px;
  transition:background .2s, transform .2s;}
.koru-ctrl-btn:hover{background:rgba(255,255,255,.26); transform:translateY(-1px);}
.koru-close{width:38px; height:38px; padding:0; font-size:20px;
  line-height:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;}

/* prev / next */
.koru-carousel-nav{position:absolute; top:0; bottom:0; width:18%;
  z-index:4; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; color:#fff;}
.koru-carousel-nav.prev{left:var(--panel-w); justify-content:flex-start; padding-left:22px;}
.koru-carousel-nav.next{right:0; justify-content:flex-end; padding-right:22px;}
.koru-carousel-nav::before{content:attr(data-chev);
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; font-size:28px; line-height:1;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
  opacity:0; transform:scale(.8);
  transition:opacity .25s, transform .25s, background .2s;}
.koru-carousel-nav:hover::before{opacity:1; transform:scale(1);
  background:rgba(255,255,255,.26);}

/* bottom rails */
.koru-rails{position:absolute; left:var(--panel-w); right:0; bottom:12px;
  z-index:6; display:flex; flex-direction:column; align-items:center;
  gap:8px; pointer-events:none;}
.koru-carousel-thumbs{
  display:flex; gap:8px; max-width:min(86%, 980px); overflow-x:auto;
  padding:8px 10px; border-radius:14px; pointer-events:auto;
  background:rgba(0,0,0,.4); backdrop-filter:blur(10px);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.koru-carousel-thumbs::-webkit-scrollbar{display:none;}
.koru-carousel-thumb{flex:0 0 auto; width:66px; height:46px; border:none;
  padding:0; border-radius:7px; overflow:hidden; cursor:pointer;
  position:relative; background:#0a1219; opacity:.5; transform:scale(.94);
  transition:opacity .2s, transform .2s, box-shadow .2s;}
.koru-carousel-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.koru-carousel-thumb:hover{opacity:.85;}
.koru-carousel-thumb.is-active{opacity:1; transform:scale(1);
  box-shadow:0 0 0 2px #4a8fd6;}
.koru-thumb-play{position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:14px; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  background:rgba(0,0,0,.2); pointer-events:none;}

/* project switcher rail */
.koru-project-rail{display:flex; gap:8px; max-width:min(86%, 980px);
  overflow-x:auto; padding:8px 10px; border-radius:14px; pointer-events:auto;
  background:rgba(0,0,0,.55); backdrop-filter:blur(10px);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.koru-project-rail::-webkit-scrollbar{display:none;}
.koru-project-chip{flex:0 0 auto; position:relative; width:96px; height:58px;
  border:none; padding:0; border-radius:8px; overflow:hidden; cursor:pointer;
  background:#0a1219; opacity:.55; transform:scale(.96);
  transition:opacity .2s, transform .2s, box-shadow .2s;}
.koru-project-chip img{width:100%; height:100%; object-fit:cover; display:block;}
.koru-project-chip-label{position:absolute; left:0; right:0; bottom:0;
  font-family:'Inter',sans-serif; font-size:8.5px; letter-spacing:.4px;
  color:#fff; padding:10px 5px 4px; text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));}
.koru-project-chip:hover{opacity:.85;}
.koru-project-chip.is-active{opacity:1; transform:scale(1);
  box-shadow:0 0 0 2px #7fb1e6;}

/* info panel */
.koru-details{position:absolute; top:0; left:0; bottom:0; z-index:7;
  width:var(--panel-w); box-sizing:border-box;
  background:rgba(12,19,28,.94);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:24px 0 70px rgba(0,0,0,.35);
  overflow-y:auto; padding:34px 28px 40px;
  scrollbar-width:thin;}
.koru-details .koru-d-label{font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin:0 0 14px;}
.koru-modal-desc{font-family:'Inter',sans-serif; font-size:clamp(14.5px, 1.15vw, 18.5px);
  line-height:1.8; color:rgba(255,255,255,.9); font-weight:400; margin:0;}
.koru-modal-desc p{margin:0 0 14px;}
.koru-modal-desc p:last-child{margin-bottom:0;}
.koru-modal-desc a{color:#7fb1e6; text-decoration:none;
  border-bottom:1px solid rgba(127,177,230,.5);}
.koru-highlights{display:grid; grid-template-columns:1fr; gap:10px;
  margin:24px 0 0;}
.koru-highlights div{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:14px 15px;}
.koru-highlights strong{display:block; font-size:12px; letter-spacing:.5px;
  text-transform:uppercase; color:#7fb1e6; margin-bottom:6px; font-weight:600;}
.koru-highlights span{font-size:18px; font-weight:500; color:rgba(255,255,255,.94); line-height:1.3;}

body.koru-noscroll{overflow:hidden;}

@media (max-width:820px){
  .koru-lightbox{--panel-w:0px;}
  .koru-details{left:0; right:0; bottom:auto; width:100%; height:34%;
    border-right:none; border-bottom:1px solid rgba(255,255,255,.08);
    padding:16px 64px 18px 18px;}
  .koru-details h3{font-size:20px; margin-bottom:8px;}
  .koru-stage{inset:34% 0 0 0;}
  .koru-slide{padding:14px 12px 150px;}
  .koru-controls{top:12px; right:12px; gap:8px;}
  .koru-ctrl-btn{padding:7px 12px; font-size:11px;}
  .koru-carousel-nav{width:26%; top:34%;}
  .koru-carousel-nav::before{width:44px; height:44px; font-size:24px;
    opacity:.65;}  /* visible on touch */
  .koru-rails{left:0; bottom:10px;}
}
@media (max-width:520px){
  .koru-highlights{grid-template-columns:1fr;}
}

/* standalone page backdrop.
   scoped to .koru-standalone so it stays inert on the combined page */
html.koru-standalone, body.koru-standalone {
  min-height: 100vh;
}
body.koru-standalone {
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 45%,
      rgba(255, 255, 255, 0.93) 0%,
      rgba(255, 255, 255, 0.80) 60%,
      rgba(250, 248, 242, 0.68) 100%
    ),
    url('background.jpg') center center / cover no-repeat fixed;
}

.koru-credit {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: rgba(15, 24, 33, 0.55);
  padding: 14px 0 20px 0;
}