*{box-sizing:border-box}
/* SuratX — The Boat and About pages (loaded after main.css). */
html,body{height:auto;overflow:auto}
body{background:#070A0D}
.pg{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background-color:#070A0D;background-image:linear-gradient(rgba(244,244,242,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,242,.045) 1px,transparent 1px);background-size:170px 172px;background-position:-20px -36px}
.phead{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1440px;margin:0 auto;padding:22px clamp(16px,3.9vw,56px) 0}
.phead .logo{display:inline-flex;align-items:center;min-height:44px}
.phead nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);font-size:15px;font-weight:500}
.phead nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.phead nav a[aria-current]{color:#F4F4F2;box-shadow:inset 0 -2px 0 #FF5B1F}
.pill{padding:0 20px;border:1px solid rgba(244,244,242,.32);border-radius:999px;color:#F4F4F2}
.pmain{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:clamp(40px,5vw,84px);width:100%;max-width:1440px;margin:0 auto;padding:clamp(32px,6vh,64px) clamp(20px,3.9vw,56px) 56px;align-items:start}
.pcol{display:flex;flex-direction:column;min-width:0}
.kick{margin:0;font-size:11px;letter-spacing:.14em;color:#FF5B1F}
.ph1{margin:16px 0 0;font-weight:800;font-stretch:125%;font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.03em}
.plede{margin:18px 0 0;max-width:540px;font-size:clamp(15px,1.15vw,17px);line-height:1.58;color:rgba(244,244,242,.8)}
.label2{margin:0;font-size:11px;letter-spacing:.14em;color:rgba(244,244,242,.5)}
.in{animation:sx-in .7s cubic-bezier(.2,.7,.2,1) both}

/* boat */
.play{display:inline-flex;align-items:center;gap:14px;min-height:48px;margin-top:22px;padding:0 22px 0 6px;border:1px solid rgba(244,244,242,.3);border-radius:999px;background:transparent;color:#F4F4F2;font-size:15px;font-weight:600;cursor:pointer;align-self:flex-start}
.play:hover{border-color:#F4F4F2}
.feat{margin-top:30px;display:flex;flex-direction:column}
.frow{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;width:100%;min-height:62px;padding:8px 0;border:0;border-top:1px solid rgba(244,244,242,.1);background:transparent;color:rgba(244,244,242,.88);text-align:left;cursor:pointer;transition:color .2s}
.frow:last-child{border-bottom:1px solid rgba(244,244,242,.1)}
.frow .n{font-size:11px;color:rgba(244,244,242,.55);transition:color .2s}
.frow.on{color:#fff}
.frow.on .n,.frow:hover .n{color:#FF5B1F}
.frow .t{display:flex;flex-direction:column;gap:3px}
.frow .t b{font-size:16px;font-weight:600}
.frow .t span{font-size:13px;line-height:1.45;color:rgba(244,244,242,.62)}
.bp{margin:0}
.bp svg{display:block;width:100%;height:auto;overflow:visible}
.bpm{display:none;margin:0}
.boatmain{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:center}
.bp-sheet,.bp-view,.bp-sect{display:block;overflow:visible;font-family:'IBM Plex Mono',ui-monospace,monospace}
.bp-frame{fill:none;stroke:rgba(244,244,242,.32);stroke-width:1}
.bp-frame2{fill:none;stroke:rgba(244,244,242,.14);stroke-width:1}
.bp-tick{stroke:rgba(244,244,242,.3);stroke-width:1}
.bp-grid path{stroke:rgba(244,244,242,.06);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.bp-cl{stroke:rgba(244,244,242,.22);stroke-width:1;stroke-dasharray:14 4 2 4;fill:none;vector-effect:non-scaling-stroke}
.bp-wl{stroke:rgba(140,182,210,.45);stroke-width:1;stroke-dasharray:8 5;fill:none;vector-effect:non-scaling-stroke}
.bp-tx{fill:rgba(244,244,242,.62);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bp-tx.sm{font-size:8.5px;fill:rgba(244,244,242,.42)}
.bp-tx.hd{font-size:10px;fill:rgba(244,244,242,.78);letter-spacing:.18em}
.bp-tx.tb{font-size:9.5px;fill:rgba(244,244,242,.85)}
.bp-tx.acc{fill:#FF5B1F;font-size:13px}
.bp-val{fill:#F4F4F2;font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:600}
.bp-th{fill:none;stroke:rgba(244,244,242,.3);stroke-width:1.3}
.bp-base{fill:none;stroke:rgba(244,244,242,.72);stroke-width:1.7;stroke-linejoin:round}
.bp-base2 .ln{fill:none;stroke:rgba(244,244,242,.8);stroke-width:2}
.bp-acc{fill:none;stroke:#FF5B1F;stroke-width:1.6}
.bp-sec path{stroke:rgba(244,244,242,.5);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.bp-dim path{stroke:rgba(244,244,242,.45);stroke-width:1;fill:rgba(244,244,242,.45);vector-effect:non-scaling-stroke}
.bp-p{transition:opacity .3s ease}
.bp-p.dim{opacity:.35}
.bp-p .ln{fill:none;stroke:rgba(244,244,242,.88);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;transition:stroke .25s}
.bp-p .fl{fill:rgba(244,244,242,.03);stroke:none;transition:fill .25s;animation:bp-fade .8s ease 1.3s both}
.bp-p .hatch{animation:bp-fade .8s ease 1.3s both}
.bp-p.on .ln{stroke:#FF5B1F}
.bp-p.on .fl{fill:rgba(255,91,31,.16)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:bp-draw 1.5s cubic-bezier(.6,0,.2,1) both}
.bp-co{animation:bp-in .45s ease both}
.bp-co .lead{stroke:rgba(244,244,242,.38);stroke-width:1;vector-effect:non-scaling-stroke}
.bp-co .dot{fill:rgba(244,244,242,.8)}
.bp-co .bub{fill:#070A0D;stroke:rgba(244,244,242,.6);stroke-width:1.2;transition:stroke .2s,fill .2s;vector-effect:non-scaling-stroke}
.bp-co text{fill:rgba(244,244,242,.85);font-family:'IBM Plex Mono',ui-monospace,monospace;transition:fill .2s}
.bp-co.on .bub{stroke:#FF5B1F;fill:rgba(255,91,31,.16)}
.bp-co.on .lead{stroke:#FF5B1F}
.bp-co.on .dot,.bp-co.on text{fill:#FF5B1F}
.wake{fill:none;stroke:rgba(244,244,242,.5);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:bp-wake 2.6s ease 1.2s both}
@keyframes bp-draw{to{stroke-dashoffset:0}}
@keyframes bp-fade{from{opacity:0}to{opacity:1}}
@keyframes bp-in{from{opacity:0}to{opacity:1}}
@keyframes bp-wake{0%{stroke-dashoffset:1;opacity:0}15%{opacity:.8}55%{stroke-dashoffset:0;opacity:.6}100%{stroke-dashoffset:0;opacity:0}}
@media (prefers-reduced-motion: reduce){.draw,.wake,.bp-co,.bp-p .fl,.bp-p .hatch{animation:none;stroke-dashoffset:0}.wake{display:none}}

.seg{display:flex;padding:3px;border-radius:12px;background:rgba(244,244,242,.07)}
.seg button{flex:1 1 0;min-height:38px;padding:0;border:0;border-radius:9px;background:transparent;color:rgba(244,244,242,.7);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.seg button.on{background:rgba(244,244,242,.14);color:#F4F4F2}
.bpm-h{display:flex;align-items:center;justify-content:space-between;font-size:9.5px;letter-spacing:.18em;color:rgba(244,244,242,.75)}
.bpm-h .dim{color:rgba(244,244,242,.42)}
.bpm .seg{margin-top:12px}
.bpm-v{margin-top:14px;min-height:150px;display:flex;align-items:center}
.bpm-v>div{width:100%}
.bpm-v svg{width:100%;height:auto}
.bpm-s{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid rgba(244,244,242,.12)}
.bpm-s span{display:block;margin-bottom:4px;font-size:8.5px;letter-spacing:.16em;color:rgba(244,244,242,.6)}
.bpm-s p{margin:0;font-size:13px;line-height:1.5;color:rgba(244,244,242,.7)}
.bpm-p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(244,244,242,.12)}
.bpm-p div{display:flex;flex-direction:column;gap:3px}
.bpm-p span{font-size:9px;letter-spacing:.14em;color:rgba(244,244,242,.5)}
.bpm-p b{font-size:15px;font-weight:600}
.play[hidden]{display:none}
.player{position:fixed;inset:0;z-index:20;background:rgba(4,6,8,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:sx-fade .3s ease both}
.player[hidden]{display:none}
.player .pv{position:absolute;inset:0;margin:auto;width:min(1040px,92vw,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;height:auto;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6);animation:sx-grow .5s cubic-bezier(.2,.8,.2,1) both}
.player .pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.player .px{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#F4F4F2;cursor:pointer}
.player.out{animation:sx-fadeout .24s ease both}
.player.out .pv{animation:sx-shrink .24s cubic-bezier(.4,0,1,1) both}
@keyframes sx-fade{from{opacity:0}to{opacity:1}}
@keyframes sx-fadeout{to{opacity:0}}
@keyframes sx-grow{from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.25)}to{opacity:1;transform:none}}
@keyframes sx-shrink{to{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.25)}}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(244,244,242,.12)}
.specs div{display:flex;flex-direction:column;gap:6px}
.specs span{font-size:10px;letter-spacing:.16em;color:rgba(244,244,242,.5)}
.specs b{font-size:20px;font-weight:600}
.ctarow{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.ctarow p{margin:0;max-width:380px;font-size:14px;line-height:1.5;color:rgba(244,244,242,.62)}
.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:#FF5B1F;color:#0A0C0D;font-weight:700;font-size:16px;white-space:nowrap}
.btn-o:hover{color:#0A0C0D;background:#FF6E38}

.film[hidden]{display:none}
.film .fbox{position:absolute;inset:clamp(70px,12vh,110px) clamp(16px,8vw,120px) clamp(110px,16vh,140px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 20px;border:1px dashed rgba(244,244,242,.18);text-align:center}
.film .fbox span:last-child{font-size:clamp(17px,1.6vw,22px);color:rgba(244,244,242,.85)}
.film .fclose{position:absolute;left:clamp(16px,8vw,120px);bottom:clamp(40px,6vh,64px)}

/* about */
.prin{margin-top:36px;display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:36px minmax(0,1fr);padding:16px 0;border-top:1px solid rgba(244,244,242,.1)}
.prow:last-child{border-bottom:1px solid rgba(244,244,242,.1)}
.prow .n{padding-top:4px;font-size:11px;color:#FF5B1F}
.prow .t{display:flex;flex-direction:column;gap:4px}
.prow .t b{font-size:18px;font-weight:600}
.prow .t span{font-size:14px;line-height:1.5;color:rgba(244,244,242,.66)}
.crew{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:18px}
.crew .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:29/33;border:1px dashed rgba(244,244,242,.18);background:#0B0F12}
.crew .ph span{font-size:11px;letter-spacing:.14em;color:rgba(244,244,242,.45)}
.crew h3{margin:16px 0 0;font-size:20px;font-weight:600}
.crew .role{margin:6px 0 0;font-size:11px;letter-spacing:.12em;color:#FF5B1F}
.crew p.d{margin:10px 0 0;font-size:14px;line-height:1.5;color:rgba(244,244,242,.66)}
.pfoot{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.9vw,56px) 40px}
.pfoot .in2{display:flex;align-items:flex-start;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(244,244,242,.12)}
.pfoot .co{display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.1em;color:rgba(244,244,242,.55)}
.pfoot .co a{color:rgba(244,244,242,.65);text-decoration:underline}
.pfoot .ct{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pfoot .links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;font-weight:500}
.pfoot .links a{display:inline-flex;align-items:center;min-height:44px}
.clock{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.1em;color:rgba(244,244,242,.62)}
.tick{display:inline-block;width:7px;height:7px;margin-right:10px;background:#FF5B1F;animation:ax-blink 2s steps(1) infinite}
@keyframes ax-blink{0%{opacity:1}50%{opacity:.25}}

@media (max-width: 899px){
  .phead nav .pill{display:none}
  .phead nav{gap:20px;font-size:14px}
  .phead .logo{font-size:20px}
  .pmain{display:flex;flex-direction:column;gap:0;padding-top:26px}
  .pcol{display:contents}
  .o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}
  .bp{padding-top:30px}
  .bp-d{display:none !important}
  .bpm{display:block;margin-top:26px;padding:14px 14px 16px;border:1px solid rgba(244,244,242,.18)}
  .boatmain{display:flex}
  @media (max-width: 899px){.player .pv{width:100vw;border-radius:0}}
  .feat{margin-top:30px}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px;border-top:0;padding-top:0}
  .specs b{font-size:18px}
  .ctarow{flex-direction:column;align-items:stretch;gap:16px;margin-top:36px}
  .ctarow p{font-size:15px}
  .crew{gap:14px;margin-top:14px}
  .crew h3{font-size:16px;margin-top:12px}
  .crew p.d{font-size:13px}
  .aboutcrew{margin-top:36px}
  .pfoot .ct{align-items:flex-start}
  .pfoot .links{flex-direction:column;gap:0;font-size:16px}
}
@media (prefers-reduced-motion: reduce){.draw,.bp-co,.bp-p .fl,.in{animation:none;stroke-dashoffset:0}.wake{display:none}.tick{animation:none}}