/* Four vessel classes — faithful premium showcase */
.record#record{
  --class-blue:#3d8cff;
  min-height:100vh;
  padding:clamp(7.5rem,9vw,10rem) 6vw 2.5rem;
  background:#06172a;
}
.record#record:before{
  background-image:linear-gradient(rgba(107,164,205,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(107,164,205,.08) 1px,transparent 1px);
  background-size:21vw 21vw;
  mask-image:none;
}
.record#record:after{
  left:auto;right:1.5vw;top:-33vw;width:70vw;height:70vw;
  border-color:rgba(76,143,194,.22);box-shadow:0 0 0 7vw rgba(42,105,157,.022),0 0 0 15vw rgba(42,105,157,.016);
}
.record#record .record-blueprint{
  inset:0 0 auto auto;width:min(58vw,1100px);height:clamp(230px,29vw,430px);
  background:url('./assets/classes-blueprint.png') right top/contain no-repeat;
  opacity:.58;
}
.record#record .record-blueprint i{display:none}
.record#record .section-label{display:none}
.record#record .record-head{position:relative;z-index:2;max-width:min(900px,56vw);padding:0 0 clamp(2.4rem,4vw,4.2rem)}
.record#record .record-head .eyebrow{display:flex;align-items:center;gap:1.35rem;margin:0 0 1.4rem;color:#83c0f2;font:650 clamp(.62rem,.75vw,.78rem)/1.2 'Inter',sans-serif;letter-spacing:.25em;text-transform:uppercase}
.record#record .record-head .eyebrow:before{content:"";width:38px;height:2px;background:#d9a34a;box-shadow:0 0 12px rgba(217,163,74,.35)}
.record#record .record-head h2{font-family:'Montserrat',sans-serif;font-size:clamp(3.6rem,6.25vw,7.7rem);font-weight:850;line-height:.86;letter-spacing:-.075em}
.record#record .record-head h2 span,.record#record .record-head h2 em{font-style:normal;color:#f5f3ee!important}
.record#record .record-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;min-height:clamp(470px,55vh,650px);margin:0 auto;
  border:1px solid rgba(129,187,226,.25);border-top:2px solid var(--class-blue);background:#071421;
  box-shadow:0 25px 70px rgba(0,0,0,.28),0 -8px 30px rgba(49,129,255,.08);
}
.record#record .vessel-class{
  min-width:0;min-height:0;padding:0;border:0;border-right:1px solid rgba(157,201,228,.36)!important;
  overflow:hidden;background:#071421;opacity:0;transform:translateY(60px);clip-path:inset(12% 0 0);
  transition:opacity .75s ease,transform 1s cubic-bezier(.16,.8,.22,1),clip-path 1s cubic-bezier(.16,.8,.22,1);
}
.record#record .vessel-class:last-child{border-right:0!important}
.record#record.is-visible .vessel-class{opacity:1;transform:none;clip-path:inset(0)}
.record#record .vessel-class:hover{background:#071421}
.record#record .vessel-class img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.08) brightness(.82);transform:scale(1.025);transition:filter .7s ease,transform 1.1s cubic-bezier(.16,.8,.22,1)}
.record#record .vessel-class:hover img{filter:saturate(.96) contrast(1.06) brightness(.94);transform:scale(1.075)}
.record#record .vessel-class:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,11,20,.02) 35%,rgba(3,13,24,.44) 64%,rgba(3,13,24,.96) 100%);pointer-events:none}
.record#record .vessel-class>div:first-of-type{position:absolute;z-index:2;left:1.65rem;right:1.65rem;top:1.65rem;display:flex;align-items:center;gap:1rem;color:#eef3f6;font:650 clamp(.55rem,.65vw,.69rem)/1.2 'Inter',sans-serif;letter-spacing:.14em}
.record#record .vessel-class>div:first-of-type:before{content:"";width:46px;height:1px;background:#d5e5ef}
.record#record .vessel-index{position:absolute;z-index:2;left:1.65rem;bottom:clamp(7rem,10vw,9.5rem);margin:0;color:rgba(200,223,238,.72);-webkit-text-stroke:0;font:500 clamp(.72rem,.8vw,.9rem)/1 'Inter',sans-serif;letter-spacing:.1em}
.record#record .vessel-class:not(:first-child) .vessel-index{bottom:clamp(5.5rem,8vw,7.4rem);font:300 clamp(4rem,5.2vw,6.4rem)/.8 'Montserrat',sans-serif;color:transparent;-webkit-text-stroke:1px rgba(191,218,234,.35);letter-spacing:-.08em}
.record#record .vessel-copy{position:absolute;z-index:2;left:1.65rem;right:1.65rem;bottom:1.55rem!important;display:block!important;color:#fff!important;text-transform:none!important}
.record#record .vessel-copy h3{margin:0 0 .55rem;color:#f5f3ee;font-family:'Montserrat',sans-serif;font-size:clamp(1.45rem,1.85vw,2.35rem);font-weight:800;line-height:.94;letter-spacing:-.06em}
.record#record .vessel-class:first-child .vessel-copy h3{font-size:clamp(1.8rem,2.2vw,2.8rem)}
.record#record .vessel-copy p{max-width:550px;min-height:0!important;margin:0!important;color:#a9c7dc!important;font:400 clamp(.72rem,.85vw,.95rem)/1.5 'Inter',sans-serif!important;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.record#record .vessel-class:first-child .vessel-copy p,.record#record .vessel-class:hover .vessel-copy p{opacity:1;transform:none}
.record#record .vessel-arrow{position:absolute;right:0;bottom:0;color:#78b9ff;font:300 2.25rem/1 'Inter',sans-serif;transition:transform .35s ease}
.record#record .vessel-class:hover .vessel-arrow{transform:translateX(6px)}

@media(max-width:1050px){
  .record#record{padding:7rem 5vw 2rem}
  .record#record .record-head{max-width:72vw}
  .record#record .record-grid{min-height:620px}
}
@media(max-width:760px){
  .record#record{padding:5.5rem 5vw 1.2rem}
  .record#record .record-blueprint{width:100%;height:220px;opacity:.45}
  .record#record .record-head{max-width:100%;padding-bottom:2.5rem}
  .record#record .record-head h2{font-size:clamp(3rem,14vw,5.2rem);line-height:.88}
  .record#record .record-grid{display:grid;grid-template-columns:1fr 1fr;min-height:0}
  .record#record .vessel-class{height:54vw;min-height:260px;border-bottom:1px solid rgba(157,201,228,.36)!important}
  .record#record .vessel-class:nth-child(2){border-right:0!important}
  .record#record .vessel-class>div:first-of-type{left:1rem;right:1rem;top:1rem}
  .record#record .vessel-copy{left:1rem;right:1rem;bottom:1rem!important}
  .record#record .vessel-class:not(:first-child) .vessel-index{left:1rem;bottom:5.2rem;font-size:3.6rem}
  .record#record .vessel-index{left:1rem;bottom:6.4rem}
  .record#record .vessel-copy p{display:none}
}
@media(max-width:520px){
  .record#record .record-grid{grid-template-columns:1fr}
  .record#record .vessel-class{height:72vw;min-height:300px;border-right:0!important}
}
@media(prefers-reduced-motion:reduce){.record#record .vessel-class,.record#record .vessel-class img,.record#record .vessel-copy p{transition:none!important}}