/* The product deck continues the fleet's sea-blue studio, without a white cut. */
.korel-systems { color:#edf1ed; background:linear-gradient(#152831,#112b36 55%,#18232c); padding:90px 7vw 110px; }
.korel-systems__top,.korel-harbor__top { display:flex; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:1px solid #b3cbd22b; color:#a5bdc6; font-size:14px; letter-spacing:.08em; }
.korel-systems__top>span:first-child,.korel-harbor__top>span:first-child { color:#e5b88e; }
.korel-systems__intro { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin:65px 0 35px; }
.korel-systems__intro h3 { margin:0; font:400 clamp(40px,5.4vw,88px)/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing:-.035em; }
.korel-systems__intro h3 span { color:#a4c0ca; }
.korel-systems__intro>p { max-width:320px; font-size:13px; line-height:1.9; color:#adc1c8; margin:0 0 8px; }
.korel-systems__intro-copy { max-width:340px; font-size:12px; line-height:1.9; color:#adc1c8; }
.korel-systems__intro-copy>a { display:block; width:fit-content; margin-top:18px; padding-bottom:8px; border-bottom:1px solid #bda08270; color:#e5b88e; font-size:10px; }
.korel-systems__intro-copy>a span { margin-left:20px; }
.korel-systems__layout { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:7%; align-items:start; }
.korel-systems__vessel { position:sticky; top:120px; margin-top:45px; min-width:0; }
.korel-systems__instrument { display:flex; justify-content:flex-end; color:#96b3be; font-size:8px; letter-spacing:.12em; padding:0 8px; }
.korel-systems__instrument>span:last-child { color:#e5b88e; font-size:13px; font-variant-numeric:tabular-nums; }
.korel-systems__viewer { position:relative; height:clamp(280px,43vh,480px); isolation:isolate; }
.korel-systems__viewer::before { content:""; position:absolute; inset:10% 0; background:radial-gradient(ellipse,#41677550,transparent 65%); }
.korel-systems__canvas { position:absolute; inset:0; opacity:0; transition:opacity 1.2s; }
.korel-systems__canvas canvas { width:100%; height:100%; display:block; }
.korel-systems__fallback { position:absolute; inset:12% 4%; width:92%; height:76%; object-fit:cover; border-radius:4px; opacity:.6; transition:opacity 1s; }
.korel-systems.is-model-ready .korel-systems__canvas { opacity:1; }
.korel-systems.is-model-ready .korel-systems__fallback { opacity:0; }
.korel-systems__guides { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#a6c8d2; stroke-width:.65; opacity:.35; pointer-events:none; }
.korel-systems__guides ellipse { stroke-dasharray:3 8; }
.korel-systems__guides circle { fill:#e5b88e; stroke:#e5b88e; }
.korel-systems__pins { position:absolute; inset:0; opacity:0; pointer-events:none; }
.is-model-ready .korel-systems__pins { opacity:1; }
.korel-systems__pins a { position:absolute; display:grid; place-items:center; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; border:1px solid #d4b19188; background:#102c38e8; color:#ecd0b4; font-size:9px; pointer-events:auto; z-index:4; transition:background .4s,border-color .4s; }
.korel-systems__pins a[aria-current],.korel-systems__pins a:hover,.korel-systems__pins a:focus-visible { color:#122b34; background:#ebbf96; border-color:#ebbf96; }
.korel-systems__pins a::before { content:""; position:absolute; inset:-8px; border-radius:50%; }
.korel-systems__catalog-link { display:flex; justify-content:space-between; margin-top:12px; padding:10px 0; color:#e5b88e!important; font-size:10px; }
.korel-system-signal { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .7s; }
.is-model-ready .korel-system-signal.is-projected { opacity:1; }
.korel-system-signal__line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.korel-system-signal__line path { fill:none; stroke:#e5b88e; stroke-width:1; opacity:.65; vector-effect:non-scaling-stroke; }
.korel-system-signal__point { position:absolute; width:0; height:0; }
.korel-system-signal__point b { position:absolute; width:8px; height:8px; left:-4px; top:-4px; border-radius:50%; background:#ffe2b9; box-shadow:0 0 16px 4px #e5b88e65; }
.korel-system-signal__point i { position:absolute; width:30px; height:30px; left:-15px; top:-15px; border:1px solid #edc59e; border-radius:50%; opacity:.6; animation:korel-system-ping 2.8s ease-out infinite; animation-play-state:paused; }
.korel-system-signal__point i:nth-child(2) { animation-delay:-1.4s; }
.is-system-visible:not(.is-system-paused) .korel-system-signal__point i { animation-play-state:running; }
.korel-system-signal__label { position:absolute; top:20px; right:8px; width:154px; padding:12px 14px; overflow:hidden; border:1px solid #b4cbd21c; border-left:1px solid #e5b88e; background:linear-gradient(110deg,#18333fc2,#102b3680); box-shadow:0 8px 24px #06192220,inset 0 1px #ffffff08; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transform:translateY(5px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.korel-system-signal.is-projected .korel-system-signal__label { opacity:1; transform:translateY(0); }
.korel-system-signal__label>span { display:flex; align-items:center; gap:7px; color:#e5b88e; font-size:8px; letter-spacing:.08em; }
.korel-system-signal__label>span::before { content:""; width:4px; height:4px; flex:none; border-radius:50%; background:#e5b88e; box-shadow:0 0 8px #e5b88e70; }
.korel-system-signal__label strong { display:block; color:#eaf1ed; font-size:11px; font-weight:500; margin-top:7px; line-height:1.4; }
@keyframes korel-system-ping { 0% { transform:scale(.4); opacity:.85; } 100% { transform:scale(1.9); opacity:0; } }
.korel-systems__readout { display:flex; align-items:center; gap:18px; padding:17px 0; border-top:1px solid #b3cbd22b; }
.korel-systems__readout>span:first-child { color:#e5b88e; font-size:11px; }
.korel-systems__readout>span:nth-child(2) { font-size:20px; }
.korel-systems__readout button { margin-left:auto; font:inherit; font-size:13px; color:#a6bec7; border:0; background:none; cursor:pointer; padding:12px 0; }
.korel-systems__nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 14px; }
.korel-systems__nav a { padding:14px 0; border-bottom:1px solid #aac4cd38; font-size:13px; color:#a0b8c2; transition:color .5s,border-color .5s; }
.korel-systems__nav a span { margin-left:8px; }
.korel-systems__nav a[aria-current],.korel-systems__nav a:hover { color:#e5b88e; border-color:#e5b88e; }
.korel-system { position:relative; padding:45px 0 60px; scroll-margin-top:115px; border-bottom:1px solid #b3cbd230; }
.korel-system::before { content:""; position:absolute; left:-24px; top:45px; bottom:60px; width:1px; background:linear-gradient(transparent,#e5b88e,transparent); opacity:0; transform:scaleY(.5); transition:opacity .9s,transform 1.2s; }
.korel-system.is-active::before,.korel-system:focus-within::before { opacity:.75; transform:scaleY(1); }
.korel-system__label { display:flex; gap:20px; font-size:12px; letter-spacing:.08em; color:#aac1cb; margin-bottom:16px; }
.korel-system__image { position:relative; display:grid; place-items:center; height:clamp(230px,26vw,360px); overflow:hidden; background:radial-gradient(ellipse at 40% 30%,#e1e8e3,#aabec3); border:1px solid #abc5ca66; border-radius:4px; }
.korel-system__image img { width:80%; height:82%; object-fit:contain; mix-blend-mode:multiply; transform:translateY(var(--system-drift,0px)); transition:transform 1s cubic-bezier(.22,1,.36,1),filter .6s; }
.korel-system__image>span { position:absolute; right:20px; bottom:20px; display:grid; place-items:center; width:40px; height:40px; border:1px solid #284c5655; border-radius:50%; color:#24414b; transition:transform .6s,background .6s; }
.korel-system__image:hover img,.korel-system__image:focus-visible img { transform:translateY(-5px) scale(1.06); }
.korel-system__image:hover>span,.korel-system__image:focus-visible>span { background:#e5b88e; transform:rotate(45deg); }
.korel-system h4 { font:400 clamp(26px,2.5vw,40px)/1.25 'Plus Jakarta Sans',sans-serif; margin:28px 0 16px; letter-spacing:-.02em; color:#edf1ed; }
.korel-system>p { max-width:370px; font-size:13px; line-height:1.9; color:#a9c0ca; }
.korel-system p.korel-system__region { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:0 0 20px; font-size:12px; color:#e4be9c; letter-spacing:0; }
.korel-system__region>span { display:block; color:#89a7b5; font-size:10px; }
.korel-system__link { display:flex; justify-content:space-between; padding:17px 0; margin-top:20px; font-size:13px; transition:color .4s; }
.korel-system__link span { color:#e5b88e; transition:transform .5s; }
.korel-system__link:hover { color:#e5b88e; }
.korel-system__link:hover span { transform:translate(4px,-4px); }
.korel-systems__end { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; margin-top:75px; padding-top:35px; border-top:1px solid #b3cbd22b; }
.korel-systems__end p { font-size:clamp(23px,3vw,42px); line-height:1.5; letter-spacing:-.025em; margin:0; }
.korel-systems__end p span { color:#9bb8c4; }
.korel-systems__end>a { flex-shrink:0; padding-bottom:10px; border-bottom:1px solid #d2b19155; font-size:11px; }
.korel-systems__end>a span { color:#e5b88e; margin-left:25px; }
.korel-systems a:focus-visible,.korel-systems button:focus-visible,.korel-harbor a:focus-visible,.korel-harbor button:focus-visible { outline:2px solid #e5b88e; outline-offset:6px; }
.korel-catalog { margin-top:65px; border-block:1px solid #b3cbd245; scroll-margin-top:115px; }
.korel-catalog__summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; cursor:pointer; list-style:none; }
.korel-catalog__summary::-webkit-details-marker { display:none; }
.korel-catalog__summary>span:first-child { display:grid; gap:9px; font-size:clamp(21px,2.2vw,30px); }
.korel-catalog__eyebrow { font-size:8px; letter-spacing:.12em; color:#8da7b3; }
.korel-catalog__action { display:flex; align-items:center; gap:20px; color:#e5b88e; font-size:11px; white-space:nowrap; }
.korel-catalog__toggle { display:grid; place-items:center; width:38px; height:38px; border:1px solid #d4b19166; border-radius:50%; font-size:22px; transition:transform .45s,background .45s; }
.korel-catalog__summary:hover .korel-catalog__toggle { background:#b3886025; }
.korel-catalog__summary:focus-visible { outline:2px solid #e5b88e; outline-offset:6px; }
.korel-catalog__close-label,.korel-catalog__disclosure[open] .korel-catalog__open-label { display:none; }
.korel-catalog__disclosure[open] .korel-catalog__close-label { display:inline; }
.korel-catalog__disclosure[open] .korel-catalog__toggle { transform:rotate(45deg); }
.korel-catalog__body { padding:12px 0 30px; }
.korel-catalog__tools { display:grid; grid-template-columns:260px 1fr; align-items:end; gap:30px; }
.korel-catalog__tools>label { display:grid; gap:10px; font-size:10px; color:#aac1ca; }
.korel-catalog input { width:100%; min-width:0; background:#0e2632; color:#edf1ed; border:1px solid #adc5cb55; border-radius:3px; padding:14px; font:inherit; font-size:12px; }
.korel-catalog input:focus-visible { outline:2px solid #e5b88e; outline-offset:3px; }
.korel-catalog__filters { display:flex; flex-wrap:wrap; gap:8px; }
.korel-catalog__filters button { padding:10px 12px; color:#a9c0ca; background:transparent; border:1px solid #adc5cb40; border-radius:3px; font:inherit; font-size:10px; cursor:pointer; transition:background .4s,border-color .4s; }
.korel-catalog__filters button span { color:#e5b88e; margin-left:6px; }
.korel-catalog__filters button[aria-pressed="true"],.korel-catalog__filters button:hover { color:#eee9e1; border-color:#e5b88e; background:#b3886030; }
.korel-catalog__count { font-size:10px; color:#a9c0ca; margin:26px 0 20px; }
.korel-catalog__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 22px; }
.korel-catalog__image { display:grid; place-items:center; position:relative; aspect-ratio:1; overflow:hidden; background:#d2dfe0; border-radius:3px; }
.korel-catalog__image img { width:86%; height:86%; object-fit:contain; mix-blend-mode:multiply; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.korel-catalog__image>span { position:absolute; right:12px; bottom:10px; color:#2a4c58; font-size:18px; }
.korel-catalog__image:hover img,.korel-catalog__image:focus-visible img { transform:scale(1.06); }
.korel-catalog__item a.korel-catalog__zone { display:block; margin-top:16px; font-size:8px; line-height:1.7; color:#e5b88e; }
.korel-catalog__item h5 { margin:8px 0 0; font:400 12px/1.7 'Plus Jakarta Sans',sans-serif; color:#e9efed; }
.korel-catalog__item h5 a:hover { color:#e5b88e; }
.korel-catalog__more { display:block; width:fit-content; margin:35px auto 0; padding:15px 25px; border:1px solid #d1ac8980; background:#b3886015; color:#e5b88e; font:inherit; font-size:11px; cursor:pointer; }
.korel-catalog__more span { margin-left:20px; }
.korel-catalog__empty { padding:30px 0; color:#b8c9d0; font-size:13px; }
.korel-catalog__source { color:#7f9ba9; font-size:9px; line-height:1.8; margin-top:30px; }
.korel-catalog__source a { text-decoration:underline; }
.korel-catalog [hidden] { display:none!important; }

/* Quiet harbor: the same route resolves into a nautical contact/footer. */
.korel-harbor { --harbor-swell-duration:12s; position:relative; isolation:isolate; overflow:hidden; padding:80px 7vw 28px; font-family:'Plus Jakarta Sans',sans-serif; color:#edf1ed; background:linear-gradient(#18232c,#112e3c 40%,#081e29 75%); scroll-margin-top:70px; }
.korel-harbor a { color:inherit; text-decoration:none; }
.korel-harbor__sea { position:absolute; z-index:-1; top:100px; left:0; width:100%; height:460px; pointer-events:none; mask-image:linear-gradient(to bottom,#000 65%,transparent); }
.korel-harbor__sea>svg { position:absolute; inset:0; height:100%; width:100%; overflow:visible; }
.korel-harbor__wave { fill:#7399ab; opacity:.13; animation:korel-harbor-tide var(--harbor-swell-duration) ease-in-out infinite; animation-play-state:paused; }
.korel-harbor__wave--two { fill:#a4c1c9; opacity:.085; animation-name:korel-harbor-tide-back; animation-duration:16s; }
.korel-harbor__ship { position:absolute; left:70%; top:250px; width:140px; transform:translateX(calc(var(--harbor-progress,0) * 80px)); transition:transform 1s ease-out; }
.korel-harbor__ship svg { display:block; width:100%; fill:#102b38; stroke:#9abac6; stroke-width:1; opacity:.68; transform-origin:50% 76%; animation:korel-harbor-bob var(--harbor-swell-duration) ease-in-out infinite; animation-play-state:paused; }
.korel-harbor.is-visible:not(.is-paused) .korel-harbor__wave,.korel-harbor.is-visible:not(.is-paused) .korel-harbor__ship svg { animation-play-state:running; }
.korel-harbor__invitation { display:grid; grid-template-columns:1.4fr 1fr; align-items:end; gap:60px; padding:65px 0 110px; }
.korel-harbor__invitation h2 { margin:0; font:400 clamp(48px,7.3vw,120px)/1.16 'Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }
.korel-harbor__invitation h2 span { display:inline-block; color:#e5b88e; }
.korel-harbor.has-motion .korel-harbor__invitation h2 span { transform:translateY(20px); transition:transform 1.8s cubic-bezier(.22,1,.36,1); }
.korel-harbor.has-entered .korel-harbor__invitation h2 span { transform:translateY(0); }
.korel-harbor__invitation>div { padding-bottom:7px; position:relative; }
.korel-harbor__invitation p { font-size:15px; line-height:1.9; color:#b0c5cd; }
.korel-harbor a.korel-harbor__cta { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:22px 0; margin-top:24px; border-bottom:1px solid #d4b79c99; color:#e8c6a7; font-size:15px; }
.korel-harbor__cta span { display:grid; place-items:center; height:46px; width:46px; border:1px solid #d4b79c66; border-radius:50%; transition:background .5s,transform .5s,color .5s; }
.korel-harbor__cta:hover span { background:#e5b88e; color:#102935; transform:rotate(45deg); }
.korel-harbor__directory { display:grid; grid-template-columns:1.2fr 1fr .8fr 1.3fr; gap:45px; padding:45px 0 55px; border-top:1px solid #b3cbd22b; }
.korel-harbor__about .brand { display:flex; width:max-content; }
.korel-harbor__about>p { font-size:15px; line-height:1.8; color:#98b3bf; max-width:260px; margin-top:22px; }
.korel-harbor__directory h3 { font:500 8px/1.6 'Plus Jakarta Sans',sans-serif; letter-spacing:.13em; color:#d0b196; margin:0 0 20px; }
.korel-harbor__directory nav>a { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:15px; color:#b9ccd2; transition:color .4s,translate .4s; }
.korel-harbor__directory nav>a span { color:#7898a8; }
.korel-harbor__directory nav>a:hover { color:#e5b88e; translate:3px 0; }
.korel-harbor address { font-style:normal; font-size:15px; line-height:1.8; color:#b9ccd2; }
.korel-harbor address p { margin:0 0 17px; }
.korel-harbor address>a { display:block; width:fit-content; padding-block:3px; transition:color .4s; }
.korel-harbor address>a:hover { color:#e5b88e; }
.korel-harbor__email { overflow-wrap:anywhere; }
.korel-harbor__bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; border-top:1px solid #b3cbd22b; font-size:9px; color:#8cabb9; }
.korel-harbor__bottom button { font:inherit; padding:10px; color:inherit; background:none; border:0; cursor:pointer; }
.korel-harbor__bottom>a { color:#e4b991; }
.korel-harbor__bottom>a span { margin-left:18px; }
@keyframes korel-harbor-tide { 0%,100% { transform:translate3d(-44px,0,0); } 25% { transform:translate3d(-12px,-5px,0); } 50% { transform:translate3d(24px,0,0); } 75% { transform:translate3d(-6px,5px,0); } }
@keyframes korel-harbor-tide-back { 0%,100% { transform:translate3d(32px,2px,0); } 25% { transform:translate3d(0,5px,0); } 50% { transform:translate3d(-36px,-2px,0); } 75% { transform:translate3d(0,-5px,0); } }
@keyframes korel-harbor-bob { 0%,100% { transform:translate3d(0,2px,0) rotate(-.45deg); } 25% { transform:translate3d(0,-3px,0) rotate(.55deg); } 50% { transform:translate3d(0,1px,0) rotate(.25deg); } 75% { transform:translate3d(0,5px,0) rotate(-.55deg); } }
@media (max-width:1100px) { .korel-harbor__directory { grid-template-columns:1fr 1fr; gap:40px 60px; } .korel-catalog__tools { grid-template-columns:1fr; gap:20px; } .korel-catalog__tools>label { max-width:350px; } .korel-catalog__grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .korel-systems { padding:70px 24px; }
  .korel-systems__top { font-size:8px; }
  .korel-systems__nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .korel-systems__nav a { font-size:12px; }
  .korel-systems__intro { display:block; margin-top:40px; }
  .korel-systems__intro>p { margin-top:24px; }
  .korel-systems__intro-copy { margin-top:24px; }
  .korel-systems__layout { grid-template-columns:1fr; gap:25px; }
  .korel-systems__vessel { position:relative; top:auto; margin-top:15px; }
  .korel-systems__viewer { height:300px; }
  .korel-system { padding:35px 0 45px; }
  .korel-system::before { left:-12px; }
  .korel-system__image { height:280px; }
  .korel-systems__end { align-items:flex-start; flex-direction:column; margin-top:40px; }
  .korel-catalog { margin-top:60px; }
  .korel-catalog__action { gap:10px; font-size:9px; }
  .korel-catalog__summary { gap:12px; }
  .korel-catalog__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 14px; }
  .korel-catalog__filters button { font-size:9px; }
  .korel-catalog__item h5 { font-size:11px; }
  .korel-harbor { padding:70px 24px 30px; }
  .korel-harbor__top { align-items:flex-start; flex-wrap:wrap; row-gap:12px; }
  .korel-harbor__top>span:last-child { max-width:48%; margin-left:auto; text-align:right; line-height:1.5; }
  .korel-harbor__invitation { grid-template-columns:1fr; gap:50px; padding:50px 0 70px; }
  .korel-harbor__invitation h2 { font-size:clamp(45px,10vw,74px); }
  .korel-harbor__sea { top:100px; }
  .korel-harbor__ship { top:170px; left:60%; width:85px; }
  .korel-harbor__directory { gap:35px 24px; }
  .korel-harbor__about,.korel-harbor__contact { grid-column:1/-1; }
  .korel-harbor__about>p { max-width:320px; }
  .korel-harbor__bottom { flex-wrap:wrap; font-size:8px; padding-bottom:35px; }
}
@media (prefers-reduced-motion:reduce) {
  .korel-systems *,.korel-harbor * { animation:none!important; transition:none!important; }
  .korel-system__image img,.korel-harbor__ship,.korel-harbor.has-motion .korel-harbor__invitation h2 span { transform:none!important; }
}