@font-face{font-family:'Darumadrop One';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cY9cfjeIW11dpCKgRLi675a87IhH.ttf') format('truetype')}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/o-0XIpIxzW5b-RxT-6A8jWAtCp-cGWtCPA.ttf') format('truetype')}
@font-face{font-family:'Zen Maru Gothic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/o-0XIpIxzW5b-RxT-6A8jWAtCp-cUW1CPA.ttf') format('truetype')}
:root{--site-width:480px;--header-height:64px;--gutter:20px;--ink:#010d15;--base:#303ec9;--accent:#10c6b1;--blue:var(--base);--pale:#e7f7f5;--ease:cubic-bezier(.25,1,.5,1);color:var(--ink);font-family:'Zen Maru Gothic',serif;font-size:14px;font-weight:500;line-height:1.81;letter-spacing:.05em;scroll-padding-top:var(--header-height);overscroll-behavior-y:none}
*{box-sizing:border-box}body{margin:0;background:var(--pale);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}h1,h2,p,figure,dl,dd{margin:0}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}img{display:block;max-width:100%;height:auto}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a{color:var(--accent)}button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-wrapper{width:100%;max-width:var(--site-width);margin:0 auto;background:#fff;padding-top:var(--header-height)}
.site-header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--site-width);height:var(--header-height);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;z-index:20}
.site-header::after{content:'';position:absolute;top:100%;left:0;width:100%;height:12px;background:url('images/assets/imgs/common/h_border_bottom_sp.webp') center/100% 100% no-repeat;pointer-events:none}
.brand{border:0;background:none;padding:0;text-align:center;font-weight:700;line-height:1.3;letter-spacing:.02em}.brand span{display:block}.brand small{display:block;font-size:10px;letter-spacing:.12em}.brand--header{flex:0 0 116px;width:116px;font-size:18px;text-align:left}.brand--header small{text-align:center}.header-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;flex-shrink:0}
/* Official white SVG stays unmodified; blue backing provides contrast. */
.brand img{background:var(--blue);height:auto;object-fit:contain}.brand--header{display:flex;align-items:center;gap:6px;font-size:12px}.brand--header img{width:38.58px;flex:none}.brand--side img{width:100%}
/* Background and arrow retain the supplied c-link artwork and hover grammar. */
.cta{display:inline-flex;align-items:center;justify-content:center;position:relative;isolation:isolate;width:fit-content;border:0;background:none;margin:0;padding:12px 43px 12px 16px;text-decoration:none;line-height:1.4;white-space:nowrap;font-family:'Zen Maru Gothic',serif;font-size:18px;font-weight:700;letter-spacing:.02em}
.cta::before{content:'';position:absolute;inset:0;background:url('images/assets/imgs/home/more_frame.svg') center/100% 100% no-repeat;z-index:-1;transition:scale .45s var(--ease)}
.cta::after{content:'';position:absolute;right:16px;top:50%;width:18px;height:11px;margin-top:-5.5px;background:url('images/assets/imgs/common/icon_arw_b.svg') center/contain no-repeat}
.cta--blue{color:#fff;width:206px;max-width:100%}.cta--blue::before{background-image:url('images/assets/imgs/common/f_contact_bg_sp.svg')}.cta--blue::after{background-image:url('images/assets/imgs/common/icon_arw_w.svg')}
.header-actions>.header-cta{font-family:'Zen Maru Gothic',serif;font-size:13px;font-weight:700;line-height:1.4;padding:3px 8px;width:auto;height:auto;min-width:0;min-height:0;max-width:none;max-height:none;flex:0 0 auto;letter-spacing:0}
.header-cta::after{content:none}
@media(hover:hover){.cta:hover::before{scale:1.03}.cta:hover::after{animation:link-arrow .45s var(--ease)}}
@keyframes link-arrow{50%{translate:4px 0}}
.desktop-brand,.desktop-actions{display:none}
@media(min-width:1024px){
  .desktop-brand,.desktop-actions{position:fixed;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:10}
  .desktop-brand{left:calc((100% - var(--site-width))/4);width:calc((100% - var(--site-width))/2 - 32px)}
  .brand--side{width:150.8px;max-width:100%;font-size:23.4px}.brand--side small{font-size:13px}.brand--side em{display:block;font-style:normal;font-size:12px;margin-top:16px;letter-spacing:.12em}
  .desktop-actions{left:calc(100% - (100% - var(--site-width))/4);width:calc((100% - var(--site-width))/2 - 32px);flex-direction:column;gap:14px}
  .desktop-actions>.cta{width:206px;max-width:100%;min-height:52.44px;font-size:18px;padding-block:12px}
}
.swipe-section{height:calc(100dvh - var(--header-height));min-height:calc(100dvh - var(--header-height));max-height:calc(100dvh - var(--header-height));position:relative;scroll-snap-align:start;scroll-snap-stop:always;touch-action:pan-x pinch-zoom}
.section-inner{height:100%;padding:32px var(--gutter);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;line-height:1.61}
h1,h2{font-family:'Zen Maru Gothic',serif;font-weight:700;line-height:1.4;letter-spacing:.02em}h1{font-size:36px}h2{font-size:30px}
.lead{color:var(--accent);font-size:18px;line-height:1.41;font-weight:700;letter-spacing:.05em}.story-text{font-size:14px;line-height:1.81;letter-spacing:.05em}
.hero{background:var(--blue);display:flex;flex-direction:column;justify-content:space-between;padding-bottom:24px;color:#fff}
.hero-scenes{position:relative;width:100%;aspect-ratio:1.5;flex-shrink:0;background:var(--accent);overflow:hidden}.hero-scene{width:100%;height:auto}.hero-scene+img{position:absolute;inset:0;animation:scene-fade 8s linear infinite}
.hero-boat{position:absolute;top:36%;right:20px;width:138px;height:auto;pointer-events:none}
.hero-video[hidden]{display:none}.hero-video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}.hero.has-video{padding:0}.hero.has-video>.hero-scenes,.hero.has-video>.hero-boat,.hero.has-video>.hero-copy{display:none}.hero.has-video>.scroll-cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink)}
@keyframes scene-fade{0%,32%,100%{opacity:0}50%,82%{opacity:1}}
.hero-copy{padding:12px var(--gutter);display:grid;gap:16px}.hero-copy h1{color:#fff}.hero-copy h1 span{color:#fff}.hero-copy>p:last-child{font-size:16px;line-height:1.81}.scroll-cue{align-self:center;border:0;background:none;color:#fff;font-size:12px;letter-spacing:.08em;line-height:1.6;padding:8px 16px}.scroll-cue span{display:block;font-size:22px;line-height:1.2}
.story--first{background:#fff url('images/assets/imgs/home/about_bg_sp.webp') center/100% 100% no-repeat}.story--experienced{background:var(--pale)}
.story-image{width:138px;max-height:22dvh;object-fit:contain;align-self:center}.landscape{width:100%;max-height:27dvh;object-fit:contain;align-self:center}
.reveal{opacity:0;scale:.9;transition:opacity .45s var(--ease),scale .45s var(--ease)}.reveal.is-visible{opacity:1;scale:1}
.requirements{background:#fff}.job-facts{width:100%;border-top:1px solid #ced5da}.job-facts>div{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #ced5da}.job-facts dt{font-weight:700}.draft-note{font-size:13px;line-height:1.81;color:#53616a}
.copy-section .section-inner{gap:20px}.copy-stack{display:grid;gap:14px;line-height:1.81}.point-block{display:grid;gap:12px}.point-block h3{margin:0}.fact-list>div{padding-block:12px}.fact-list dd{min-width:0}.fact-list small{font-size:12px}.timeline dd strong{display:block;margin-bottom:4px}.qualification-list>div{grid-template-columns:126px 1fr}.copy-section .eyebrow{flex-shrink:0}
.is-long-section{height:auto;min-height:calc(100dvh - var(--header-height));max-height:none;scroll-snap-stop:normal;touch-action:auto}
.entry{background:var(--pale)}.entry .section-inner{height:auto;gap:24px;padding-top:48px;padding-bottom:32px}.entry-intro{line-height:1.81}
.contact-form{width:100%;padding:32px 20px;background:#fff;border-radius:20px;box-shadow:5px 5px 0 rgba(132,169,183,.259)}
.form-notice{font-size:12px;line-height:1.81;margin-bottom:32px;color:#53616a}.form-fields{display:grid;gap:32px;margin-bottom:32px}.field{display:grid;gap:16px;min-width:0}.field label{display:flex;align-items:center;gap:4px;font-weight:700;line-height:1.4;flex-wrap:wrap}.required{font-size:10px;line-height:17px;background:#a1adb5;color:#fff;border-radius:50px;padding:0 8px;letter-spacing:0}.optional{font-size:10px;color:#53616a;font-weight:500}
.field input,.field select,.field textarea{display:block;width:100%;min-width:0;border:1px solid #ced5da;border-radius:5px;background:#fff;padding:12px 19px;font-size:16px;line-height:1.5;letter-spacing:.025em;appearance:none}
.field input,.field select{height:50px}.field textarea{min-height:160px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#788690;font-size:14px;opacity:1}.select-wrap{position:relative}.select-wrap::after{content:'';position:absolute;right:18px;top:21px;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}.field select{padding-right:48px}.form-submit{margin:0 auto;display:flex}.form-status{font-size:13px;line-height:1.81;margin-top:20px}.form-status:empty{display:none}.contact-details{align-self:center;text-align:center;font-size:13px;overflow-wrap:anywhere}.site-footer{padding:24px 0 8px;align-self:center;text-align:center;font-weight:700}.site-footer small{font-size:12px;font-weight:500}
@media(max-height:740px){.section-inner{gap:18px;padding-block:24px}.hero{padding-bottom:12px}.hero-scenes{max-height:32dvh;aspect-ratio:auto;overflow:visible}.hero-scene{height:32dvh;object-fit:contain;background:var(--blue)}.hero-copy{gap:12px}h1{font-size:36px}h2{font-size:30px}.story-image{max-height:17dvh}.landscape{max-height:23dvh}}
@media(max-height:740px){.copy-section .section-inner{gap:14px;padding-block:24px}.copy-section .copy-stack{gap:10px}.copy-section .fact-list>div{padding-block:9px}.copy-section .point-block{gap:8px}}
/* Measured reference header: 60px bar, 26px brand, 32px pill buttons. */
:root{--header-height:60px}
.site-header{padding:0 10px 1px;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(20,39,75,.12);gap:8px}
.site-header::after{display:none}
.brand--header{flex:0 1 182px;width:182px;height:44px;gap:7px;font-family:'Hiragino Kaku Gothic ProN',sans-serif;font-size:clamp(13px,calc(6.667vw - 11px),15px);line-height:1;white-space:nowrap;color:var(--base)}
.brand--header img{width:auto;height:44px;flex:none}.brand--header small{font-size:6px;line-height:1.1;letter-spacing:.1em;text-align:left;margin-top:3px}
.header-actions>.header-cta{height:32px;padding:0 11px;border:1px solid rgba(20,39,75,.22);border-radius:999px;background:rgba(20,39,75,.04);font-family:'Hiragino Kaku Gothic ProN',sans-serif;font-size:13.5px;line-height:1;font-weight:700;color:#14274b;gap:5px;width:80.17px}
.header-actions>.header-cta::before{display:none}
.header-actions>.cta--blue{width:87.56px;color:#fff;border-color:var(--base);background:linear-gradient(color-mix(in srgb,var(--base),white 12%),var(--base))}
.header-actions>.cta--blue::after{content:'›';display:block;position:static;width:auto;height:auto;margin:0;background:none;font-size:18px;line-height:1}
@media(max-width:350px){.brand--header{font-size:10px;gap:5px;flex-basis:122px}.header-actions{gap:6px}.header-actions>.header-cta{padding-inline:8px;width:73px}.header-actions>.cta--blue{width:78px}}
/* Layered mechanic opening, with vector artwork in its original proportions. */
.hero:not(.has-video){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:46% 1fr 58px;padding:0;overflow:hidden;isolation:isolate}
.hero:not(.has-video) .hero-scenes{height:100%;max-height:none;aspect-ratio:auto;background:var(--accent);overflow:hidden;border-radius:0 0 48% 7% / 0 0 9% 3%}
.hero-island-label{position:absolute;top:14px;left:20px;font-size:10px;letter-spacing:.15em;color:var(--base);font-weight:700;z-index:3}
.hero-only{position:absolute;top:25px;left:20px;z-index:3;font-family:'Darumadrop One',sans-serif;font-size:clamp(66px,18vw,88px);line-height:1;letter-spacing:-.045em;color:#fff;text-shadow:3px 4px 0 var(--base);transform:rotate(-5deg);animation:hero-title-in .85s var(--ease) both}
.hero-only span{display:inline-block;color:var(--base);text-shadow:2px 2px 0 #fff;animation:hero-exclaim 3.2s ease-in-out infinite}
.hero-landscapes{position:absolute;top:90px;left:0;width:100%;height:calc(100% - 90px)}
.hero-landscapes .hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top center;background:none}
.hero-landscapes .hero-scene:first-child{animation:hero-land-a 14s ease-in-out infinite}
.hero-landscapes .hero-scene+img{animation:hero-land-b 14s ease-in-out infinite}
.hero-vessel{position:absolute;width:132px;bottom:32px;right:24px;z-index:4;animation:hero-sail 8s ease-in-out infinite}
.hero-vessel img{width:100%;animation:hero-bob 2.4s ease-in-out infinite;transform-origin:50% 75%}
.hero-fish{position:absolute;width:76px;bottom:27px;left:27px;z-index:4;animation:hero-fish 4.8s ease-in-out infinite;transform-origin:50% 90%}
.hero-wave{position:absolute;width:76px;z-index:2;animation:hero-wave 3.8s ease-in-out infinite}.hero-wave--one{bottom:14px;right:55px}.hero-wave--two{bottom:74px;left:48%;width:48px;animation-delay:-1.8s}
.hero:not(.has-video) .hero-copy{padding:20px;gap:18px;align-content:center;position:relative}
.hero-copy>.eyebrow{font-size:11px;animation:hero-copy-in .7s .15s var(--ease) both}
.hero-copy h1{font-size:clamp(30px,8.9vw,42px);line-height:1.55;letter-spacing:.01em}
.hero-line{display:block;animation:hero-copy-in .85s .3s var(--ease) both}
.hero-line--accent{position:relative;width:fit-content;isolation:isolate;animation-delay:.48s}
.hero-line--accent::after{content:'';position:absolute;bottom:3px;left:0;right:0;height:11px;background:var(--accent);z-index:-1;transform:rotate(-1.5deg);animation:hero-underline .75s .9s var(--ease) both;transform-origin:left}
.hero-copy>p:last-child{font-size:14px;line-height:1.85;animation:hero-copy-in .8s .65s var(--ease) both}
.hero:not(.has-video)>.scroll-cue{justify-self:center;align-self:center;padding:4px 16px;font-size:10px}.hero .scroll-cue span{animation:hero-cue 1.7s ease-in-out infinite}
.hero.has-video .hero-scenes{display:none}
.hero.is-paused *,.hero.is-paused *::after{animation-play-state:paused!important}
@keyframes hero-title-in{from{opacity:0;transform:translateY(24px) rotate(-10deg)}to{opacity:1;transform:translateY(0) rotate(-5deg)}}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-underline{from{scale:0 1}to{scale:1 1}}
@keyframes hero-exclaim{0%,75%,100%{transform:rotate(0)}82%{transform:rotate(12deg)}90%{transform:rotate(-8deg)}}
@keyframes hero-land-a{0%,36%,100%{opacity:1;transform:translateY(0)}44%,90%{opacity:0;transform:translateY(8px)}}
@keyframes hero-land-b{0%,36%,100%{opacity:0;transform:translateY(8px)}44%,90%{opacity:1;transform:translateY(0)}}
@keyframes hero-sail{0%,100%{transform:translateX(0)}50%{transform:translateX(-36px)}}
@keyframes hero-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes hero-fish{0%,60%,100%{transform:translateY(0) rotate(-5deg)}30%{transform:translateY(-20px) rotate(10deg)}}
@keyframes hero-wave{0%,100%{transform:translateX(-7px);opacity:.65}50%{transform:translateX(7px);opacity:1}}
@keyframes hero-cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(max-height:740px){.hero:not(.has-video){grid-template-rows:43% 1fr 44px}.hero-only{font-size:64px;top:24px}.hero-landscapes{top:73px;height:calc(100% - 73px)}.hero:not(.has-video) .hero-copy{padding:12px 20px;gap:10px}.hero-copy h1{font-size:clamp(30px,8.5vw,38px)}.hero-vessel{width:108px;bottom:20px}.hero-fish{width:61px;bottom:16px}.hero-wave--one{bottom:5px}.hero-wave--two{bottom:57px}}
.hero-landscapes .hero-garage:first-child{animation:hero-copy-in 1s .15s var(--ease) both;object-position:center}
.hero-vehicle{position:absolute;width:148px;bottom:12px;right:24px;z-index:4;animation:hero-drive 7s ease-in-out infinite}.hero-vehicle img{width:100%;animation:hero-engine .8s ease-in-out infinite}
.hero-spark{position:absolute;z-index:4;color:var(--base);font-size:38px;line-height:1;animation:hero-exclaim 4s ease-in-out infinite}.hero-spark--one{right:28px;top:103px}.hero-spark--two{left:26px;bottom:33px;font-size:28px;animation-delay:-2s}
.hero-copy>.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.hero-job{display:inline-block;background:var(--accent);color:var(--ink);padding:4px 10px;transform:rotate(-2deg);font-size:12px}
@keyframes hero-drive{0%,100%{transform:translateX(0)}50%{transform:translateX(-44px)}}
@keyframes hero-engine{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@media(max-height:740px){.hero-vehicle{width:118px;bottom:4px}.hero-spark--one{top:80px;font-size:27px}.hero-copy>.eyebrow{gap:6px;font-size:10px}.hero-job{font-size:11px;padding:3px 8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-scene+img{opacity:0}.reveal{opacity:1;scale:1}}