:root{--navy:#052540;--blue:#094369;--sea:#12648c;--ice:#daeff5;--red:#ce2033;--text:#08304b;--muted:#506e7e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ice);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}button{cursor:pointer}a:hover{text-decoration:underline;text-underline-offset:5px}h1,h2,h3{line-height:1.2;margin:0 0 22px;letter-spacing:-.035em}h1{font-size:clamp(2.4rem,4.7vw,4.8rem)}h2{font-size:clamp(1.8rem,3vw,2.8rem)}h3{font-size:1.35rem}p{margin:0 0 22px}.wrap{max-width:1280px;width:calc(100% - 96px);margin:auto}.section{padding:88px 0}.eyebrow{font-size:.86rem;font-weight:700;letter-spacing:.1em;color:var(--red);margin-bottom:25px}.sub{color:var(--muted);margin-bottom:40px}.lead{font-size:1.25rem;max-width:800px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 23px;background:var(--red);color:white;border:1px solid var(--red);border-radius:5px;font-size:1rem;font-weight:700;line-height:1.4;transition:background .2s,transform .2s}.button:hover{background:#ad182a;text-decoration:none;transform:translateY(-2px)}.button.secondary{background:transparent;color:var(--text);border-color:var(--text)}.skip{position:absolute;left:20px;top:-100px;z-index:50;background:white;padding:14px}.skip:focus{top:10px}header{background:var(--navy);color:white;position:relative;z-index:5}.header-wrap{max-width:1440px;margin:auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.brand:hover{text-decoration:none}.brand img{width:68px;height:68px;object-fit:contain;background:white;border-radius:8px;padding:3px}.brand span{font-weight:800;font-size:1.4rem;line-height:1.2}.brand small{display:block;font-size:.75rem;letter-spacing:.12em;color:var(--red);margin-top:8px}#navigation{display:flex;align-items:center;gap:19px;font-size:.88rem;font-weight:600}#navigation a[aria-current]{color:var(--red)}.menu-toggle{display:none;background:transparent;color:white;border:1px solid #7194a7;padding:10px;border-radius:5px}.sea{position:relative;background:linear-gradient(135deg,var(--navy),#0b557c);color:white;overflow:hidden}.sea:before{content:"";position:absolute;inset:auto -3% 0;height:245px;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 280' preserveAspectRatio='none'%3E%3Cpath fill='%2313638d' d='M0 90Q180 170 360 90T720 90T1080 90T1440 90V180Q1260 100 1080 180T720 180T360 180T0 180Z'/%3E%3Cpath fill='%2313799e' d='M0 190Q210 75 440 185T900 185T1440 185V245Q1220 150 970 245T470 245T0 245Z'/%3E%3Cpath fill='none' stroke='%234b9ebe' stroke-width='4' vector-effect='non-scaling-stroke' d='M0 90Q180 170 360 90T720 90T1080 90T1440 90M0 190Q210 75 440 185T900 185T1440 185'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;opacity:.75}.sea>.wrap{position:relative}.hero{padding:64px 0 92px}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:60px}.hero-copy{padding-left:30px;border-left:7px solid var(--red)}.hero .eyebrow{color:#a2d9eb}.hero h1{font-size:clamp(3rem,5.4vw,5rem);line-height:1.16}.hero h1 span{font-size:.66em;display:inline-block}.hero .lead{color:#dceef6;margin-bottom:35px}.hero-photo{aspect-ratio:1;border:10px solid var(--red);border-radius:50%;overflow:hidden}.hero-photo img{height:100%;object-fit:cover}.red-rail{background:var(--red);color:white;padding:10px 0;font-size:.8rem;font-weight:700;letter-spacing:.05em}.red-rail .wrap{display:flex;justify-content:space-between;gap:20px}.mosaic{display:grid;grid-template-columns:1.1fr .5fr .5fr;grid-template-rows:225px 225px;gap:18px;margin:38px 0}.mosaic-item{position:relative;overflow:hidden;border-radius:10px}.mosaic-item img{height:100%;object-fit:cover;transition:transform .35s}.mosaic-item:hover img{transform:scale(1.04)}.mosaic-item span{position:absolute;bottom:0;left:0;right:0;background:var(--navy);color:white;padding:15px 20px;font-weight:700;font-size:1.1rem;display:flex;justify-content:space-between;gap:12px}.mosaic-item b{color:var(--red)}.item-0{grid-column:1;grid-row:1/3}.item-1{grid-column:2/4}.item-2{grid-column:2}.item-3{grid-column:3}.text-link{display:inline-block;color:#b3172a;font-weight:700}.text-link.light{color:white}.split{display:grid;grid-template-columns:1fr 1.25fr;gap:65px;align-items:center}.capability h2{font-size:clamp(1.8rem,2.6vw,2.6rem)}.capability p{max-width:440px}.capability .eyebrow{color:var(--red)}.process-line{border-top:4px solid var(--red);padding:18px 0;color:var(--red);font-size:.86rem;font-weight:700;letter-spacing:.08em;max-width:350px}.process-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px}.process-photos figure:last-child{grid-column:1/3}.process-photos img{height:220px;object-fit:cover}.process-photos figure:last-child img{height:260px}figure{margin:0}figcaption{font-size:.88rem;padding:10px 0;color:inherit}.image-button{padding:0;border:0;display:block;width:100%;background:transparent;overflow:hidden;border-radius:10px}.image-button img{transition:transform .3s}.image-button:hover img{transform:scale(1.025)}.event-strip{background:#08304f;color:white;padding:34px 0}.event-grid{display:grid;grid-template-columns:240px 1fr auto;gap:32px;align-items:center}.event-grid img{height:155px;object-fit:cover;border-radius:8px}.event-grid h2{font-size:1.55rem;margin-bottom:10px}.event-grid p{margin-bottom:8px}.event-grid .eyebrow{color:#b0d5e6;font-size:.75rem}.page-intro{padding:78px 0 90px}.page-intro:before{opacity:.25}.page-intro .eyebrow{color:var(--red)}.page-intro h1{max-width:1000px}.page-intro .lead{margin-bottom:0;color:#dcebf3}.pale{background:#c5e5ef}.two,.three{display:grid;gap:28px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.panel{background:#c8e6ef;padding:34px;border-radius:10px;border-top:4px solid var(--red)}.panel h2{font-size:1.8rem}.article-card:hover{background:#b5dce9;text-decoration:none}.cta{padding:58px 0;background:#0e577a;color:white}.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:35px}.cta .eyebrow{color:var(--red)}.cta h2{font-size:2rem}.cta p{margin-bottom:10px}.cta .button{flex-shrink:0}.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:35px}.filters button{border:1px solid #7ea6b8;border-radius:30px;background:transparent;padding:11px 20px;color:var(--text);font-size:.95rem}.filters button[aria-pressed=true]{background:var(--red);color:white;border-color:var(--red)}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.product-card{background:var(--navy);color:white;border-radius:10px;overflow:hidden}.product-card:hover{text-decoration:none;box-shadow:0 10px 25px #05254025}.product-card img{height:240px;object-fit:cover}.product-card>div{padding:22px}.product-card h3{font-size:1.18rem;margin-bottom:8px;letter-spacing:0}.product-card p{color:#b5d1df;font-size:.9rem;margin-bottom:24px}.product-card span{color:var(--red);font-size:.9rem;font-weight:700}.product-card[hidden]{display:none}.back{display:inline-block;margin-bottom:30px;color:var(--text)}.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:start}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}.gallery figure:first-child{grid-column:1/3}.gallery img{height:200px;object-fit:cover}.gallery figure:first-child img{height:440px}.detail-info{position:sticky;top:25px}table{border-collapse:collapse;width:100%;font-size:1rem;margin-bottom:25px}th,td{text-align:left;padding:15px 12px;border-bottom:1px solid #b0cedb;vertical-align:top}th{width:40%}.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:step}.steps li{counter-increment:step;border-top:2px solid #98bbc9;padding-top:20px}.steps li:before{content:counter(step,decimal-leading-zero);display:block;color:var(--red);font-size:2.5rem;font-weight:700;margin-bottom:16px}.section-heading{display:flex;gap:50px;align-items:start;justify-content:space-between;margin-bottom:30px}.section-heading p{max-width:500px}.photo-grid img{height:280px;object-fit:cover}.story img{height:350px;object-fit:cover;border-radius:10px;margin-bottom:24px}.story h2{font-size:1.8rem}.story:hover{text-decoration:none}.story:hover h2{color:var(--red)}.prose{max-width:850px;font-size:1.12rem}.prose h2{font-size:1.8rem;margin-top:38px}.prose p{margin-bottom:28px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.contact-large{display:block;font-size:1.8rem;font-weight:700;color:var(--red);margin:25px 0 12px}.email{overflow-wrap:anywhere;display:block;margin-bottom:28px}form{padding:36px;background:#c7e5ee;border-radius:12px}label{display:block;font-weight:600;font-size:.95rem;margin-bottom:19px}input,select,textarea{display:block;width:100%;min-width:0;margin-top:8px;padding:12px;background:#f5fbfd;border:1px solid #7fa4b5;border-radius:5px;color:var(--text)}textarea{resize:vertical}.form-note{font-size:.95rem;color:#395a6b}.form-actions{display:flex;flex-wrap:wrap;gap:15px}#form-status{margin-top:18px;font-weight:600}footer{background:var(--navy);color:#c7dfeb;padding:50px 0 20px;font-size:.95rem}.footer-grid{display:grid;grid-template-columns:1fr 1fr .7fr;gap:45px}.brand-name{font-size:1.4rem;font-weight:800;color:white}.footer-grid address{font-style:normal}.footer-grid>div:last-child a{display:block;margin-bottom:13px}.footer-grid p{margin-top:12px}.copyright{margin-top:35px;border-top:1px solid #28506a;padding-top:18px;font-size:.8rem}.lightbox{padding:25px;background:var(--navy);color:white;border:0;border-radius:10px;width:min(1000px,95vw);max-height:94vh}.lightbox::backdrop{background:#001323df}.lightbox img{width:100%;height:75vh;object-fit:contain}.lightbox p{margin:12px 0 0}.lightbox .close{position:absolute;top:9px;right:12px;border:0;background:var(--red);color:white;font-size:1.8rem;border-radius:50%;width:43px;height:43px;line-height:1}
@media(max-width:1420px){.header-wrap{padding:15px 25px}.menu-toggle{display:block}#navigation{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);padding:22px 30px;box-shadow:0 8px 15px #0003;flex-wrap:wrap}#navigation.open{display:flex}.hero-grid{gap:35px}.hero-copy{padding-left:22px}.product-grid{grid-template-columns:repeat(3,1fr)}.event-grid{grid-template-columns:200px 1fr}.event-grid>.button{grid-column:2;justify-self:start}.contact-grid{gap:35px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.section{padding:55px 0}.header-wrap{padding:13px 20px}.brand img{height:52px;width:52px}.brand span{font-size:1.12rem}.hero{padding:40px 0 65px}.hero-grid{grid-template-columns:1fr;gap:38px}.hero h1{font-size:3.1rem}.hero-photo{max-width:390px;width:85%;justify-self:center;border-width:7px}.hero .lead{font-size:1.08rem}.hero-copy{padding-left:18px}.red-rail .wrap{justify-content:center}.red-rail span:last-child{display:none}.split,.detail-grid,.contact-grid,.two,.three{grid-template-columns:1fr;gap:30px}.mosaic{grid-template-columns:1fr 1fr;grid-template-rows:270px 210px 210px;gap:12px}.item-0{grid-column:1/3;grid-row:1}.item-1{grid-column:1/3;grid-row:2}.item-2{grid-column:1;grid-row:3}.item-3{grid-column:2;grid-row:3}.mosaic-item span{font-size:1rem;padding:12px}.mosaic-item .item-2{grid-column:1}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.product-card img{height:190px}.product-card>div{padding:16px}.product-card h3{font-size:1.05rem}.product-card p{font-size:.85rem}.event-grid{grid-template-columns:1fr;gap:22px}.event-grid img{height:230px}.event-grid>.button{grid-column:1}.cta .wrap{display:block}.cta .button{margin-top:22px}.page-intro{padding:50px 0 65px}.section-heading{display:block}.photo-grid{grid-template-columns:1fr 1fr;gap:16px}.photo-grid img{height:220px}.steps{grid-template-columns:1fr 1fr}.detail-info{position:static}.gallery figure:first-child img{height:380px}.gallery img{height:160px}.footer-grid{grid-template-columns:1fr;gap:22px}.footer-grid p{margin-bottom:0}form{padding:24px}.contact-grid aside{padding-bottom:10px}.prose{font-size:1rem}.process-photos img{height:180px}.process-photos figure:last-child img{height:220px}}
@media(max-width:420px){.brand span{font-size:1rem}.product-grid{grid-template-columns:1fr}.product-card img{height:290px}.photo-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.button{padding:12px 18px}.hero h1{font-size:2.7rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Scroll reveal uses translate separately from existing hover transforms. */
.scroll-reveal{opacity:1;translate:0 0;transition:opacity 760ms ease var(--reveal-delay,0ms),translate 760ms cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms)}
.scroll-pending{opacity:0;translate:0 26px}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.scroll-pending{opacity:1;translate:none;transition:none!important}}
@media print{.scroll-reveal,.scroll-pending{opacity:1;translate:none;transition:none!important}}

/* Footer contact and navigation icons, matching the sea blue/red palette. */
.footer-contact{display:grid;gap:15px;align-content:start;min-width:0}
.footer-contact .contact-row{display:flex;align-items:center;gap:13px;min-height:38px;min-width:0}
.contact-row>span:last-child{min-width:0;overflow-wrap:anywhere}
.contact-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;height:38px;background:var(--red);color:#fff;border-radius:10px}
.contact-icon svg{width:20px;height:20px}
.footer-grid .footer-links a{display:flex;align-items:center;gap:12px;min-height:38px;margin-bottom:15px}
.footer-links svg{flex:0 0 21px;width:21px;height:21px;color:#8fd4eb}
.footer-contact a:hover,.footer-links a:hover{color:white}
.footer-contact a:hover .contact-icon{background:#ae192b}

/* Ocean hero: layered photography, slow zoom and drifting wave bands. */
.hero-visual{position:relative;min-width:0;padding:14px 0 48px}
.hero-visual .hero-photo{position:relative;width:100%;max-width:none;box-shadow:0 30px 65px #00172566;border-width:8px;isolation:isolate}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 1.2s;overflow:hidden}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.hero-slide figcaption{position:absolute;bottom:0;left:0;right:0;padding:65px 20px 46px;background:linear-gradient(transparent,#031b31e8);color:white;text-align:center;font-size:.82rem;letter-spacing:.1em;font-weight:700}
.hero-stamp{position:absolute;right:-10px;top:8%;z-index:2;background:var(--red);padding:15px 21px;border-radius:5px;box-shadow:0 12px 35px #00172f40;font-weight:800;letter-spacing:.05em;transform:rotate(5deg)}
.hero-stamp span{display:block;font-size:.7rem;letter-spacing:.13em;margin-top:2px}
.hero-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.hero-controls[hidden]{display:none}.hero-dots{display:flex;gap:2px}.hero-dots button{width:36px;height:40px;border:0;background:transparent;position:relative;padding:0}.hero-dots button:before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:#80b9ce;margin:auto;transition:background .3s,transform .3s}.hero-dots button[aria-pressed=true]:before{background:#fff;transform:scale(1.4);box-shadow:0 0 0 4px var(--red)}
.motion-toggle{background:#052540b3;border:1px solid #81b5ca;color:#e2f5ff;border-radius:30px;font-size:.8rem;padding:9px 15px;min-height:40px}
.hero.motion-ready:before{inset-inline:-12%;animation:ocean-drift 12s ease-in-out infinite alternate;will-change:transform}
.hero.motion-ready .hero-slide.is-active img{animation:hero-zoom 12s ease-in-out infinite alternate}
.hero.motion-ready .hero-stamp{animation:hero-float 6s ease-in-out infinite alternate}
.hero.motion-ready .hero-copy>*{animation:hero-enter .85s both cubic-bezier(.2,.65,.3,1)}
.hero.motion-ready .hero-copy h1{animation-delay:.12s}.hero.motion-ready .hero-copy .lead{animation-delay:.24s}.hero.motion-ready .hero-copy .button{animation-delay:.36s}
.hero.motion-paused:before,.hero.motion-ready.motion-paused .hero-slide.is-active img,.hero.motion-paused .hero-stamp{animation-play-state:paused}
@keyframes ocean-drift{from{transform:translateX(-3%) translateY(6px)}to{transform:translateX(3%) translateY(-8px)}}
@keyframes hero-zoom{from{transform:scale(1.03)}to{transform:scale(1.13)}}
@keyframes hero-float{from{transform:translateY(0) rotate(5deg)}to{transform:translateY(-12px) rotate(2deg)}}
@keyframes hero-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.hero-visual{width:min(100%,420px);justify-self:center;padding-bottom:55px}.hero-visual .hero-photo{width:92%;margin:auto}.hero-stamp{right:0;font-size:.9rem;padding:11px 15px}.hero-slide figcaption{padding-bottom:35px}.hero-controls{gap:10px}.hero-grid{gap:24px}}
@media(prefers-reduced-motion:reduce){.hero.motion-ready:before,.hero.motion-ready .hero-slide img,.hero.motion-ready .hero-stamp,.hero.motion-ready .hero-copy>*{animation:none}.hero-slide{transition:none}}

/* Interior pages share an editorial rhythm and real company photography. */
.breadcrumbs{display:flex;position:static;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;padding:18px 0;background:transparent;box-shadow:none;color:#365e72;font-size:.88rem;font-weight:400}
.breadcrumbs [aria-current]{color:var(--text);font-weight:600}.breadcrumbs a{color:#a71327}
.illustrated-intro{min-height:410px;display:flex;align-items:center;padding:80px 0;isolation:isolate}
.illustrated-intro .intro-photo{position:absolute;right:0;top:0;width:55%;height:100%;object-fit:cover;z-index:-2}
.illustrated-intro:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#052540 0%,#052540 35%,#052540e6 47%,#05254055 73%,#05254015);z-index:-1}
.illustrated-intro:before{z-index:0;opacity:.2}.illustrated-intro h1{max-width:740px;font-size:clamp(2.4rem,4.4vw,4.3rem)}.illustrated-intro .lead{max-width:620px}.illustrated-intro .eyebrow{color:#b9eaf6}
.detail-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.detail-tile{padding:26px 0 0;border-top:2px solid #93bdcf}.detail-index{display:block;font-size:.84rem;letter-spacing:.12em;font-weight:700;color:#b1172b;margin-bottom:20px}.detail-tile h3{font-size:1.35rem;letter-spacing:-.025em}.detail-tile p{color:#3d6073;margin-bottom:0}
.deep-section{background:var(--navy);color:#deeff6}.deep-section .eyebrow{color:#91d5e9}.deep-section .editorial-photo{height:420px;object-fit:cover;border-radius:8px;border-bottom:7px solid var(--red)}.deep-section h2{color:#fff}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.3fr;gap:70px}.faq-wrap details{border-top:1px solid #8ab4c5;padding:22px 0}.faq-wrap details:last-child{border-bottom:1px solid #8ab4c5}.faq-wrap summary{font-weight:700;font-size:1.1rem;cursor:pointer;line-height:1.5;padding-right:20px}.faq-wrap details p{margin:18px 0 0;color:#385c70;max-width:680px}.faq-wrap details[open] summary{color:#ad172a}
.editorial-note{border-left:4px solid var(--red);padding:20px 24px;background:#b5dce9;margin:30px 0}.detail-tiles+.text-link{margin-top:30px}
@media(max-width:760px){.breadcrumbs{padding:14px 0;font-size:.82rem}.illustrated-intro{padding:58px 0 160px;min-height:460px}.illustrated-intro .intro-photo{width:100%;opacity:.55}.illustrated-intro:after{background:linear-gradient(180deg,#052540 5%,#052540e6 45%,#05254060 100%)}.illustrated-intro h1{font-size:2.5rem}.illustrated-intro .lead{font-size:1.1rem}.detail-tiles,.faq-wrap{grid-template-columns:1fr;gap:25px}.deep-section .editorial-photo{height:290px}.detail-tile{padding-top:20px}.detail-index{margin-bottom:12px}}

/* Final interior details and accessible gallery controls. */
.detail-info h2{font-size:clamp(1.65rem,2.3vw,2.25rem)}.detail-info h3{margin-top:30px}.detail-info .eyebrow{margin-bottom:14px}.detail-grid>*{min-width:0}
.article-contents{background:#c0e2ed;border-top:4px solid var(--red);padding:28px 32px;margin-bottom:48px}.article-contents .eyebrow{margin-bottom:12px}.article-contents ol{padding-left:22px;margin:0}.article-contents li{padding:6px 0}.article-contents a{font-weight:600}h2[id]{scroll-margin-top:30px}
.contact-method{display:flex;align-items:flex-start;gap:15px;border-top:1px solid #9fc5d5;padding:22px 0;min-width:0}.contact-method>div{min-width:0}.contact-method h3{font-size:1rem;margin:0 0 7px;letter-spacing:0}.contact-method p{margin:0}.contact-method span{overflow-wrap:anywhere}.contact-method .contact-icon{flex-shrink:0}.contact-method:hover h3{color:var(--red)}.contact-sidebar .editorial-note{font-size:.95rem;margin-top:16px}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}.gallery-controls[hidden]{display:none}.gallery-controls button{min-height:44px;padding:8px 18px;background:#0e5277;border:1px solid #8cc9dd;border-radius:5px;color:white}.gallery-controls button:hover{background:var(--red)}.lightbox img{height:65vh}.gallery-position{font-size:.9rem;white-space:nowrap}.lightbox .close{z-index:2}
@media(max-width:760px){.article-contents{padding:24px}.lightbox{padding:16px}.lightbox img{height:60vh}.gallery-controls button{padding:8px 12px}.contact-sidebar .editorial-note{margin-bottom:0}.detail-info{position:static}}
@media print{header,.breadcrumbs,.cta,.gallery-controls,.menu-toggle{display:none!important}.hero-slide:not(.is-active){display:none}.hero *, .hero:before{animation:none!important}.section{padding:30px 0}.detail-info{position:static}}

/* Fix flexible columns, pause state and progressive enhancement. */
.hero-grid,.split,.contact-grid,.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr)}
.hero-copy,.contact-grid>*{min-width:0}.hero h1 span{max-width:100%;overflow-wrap:break-word}
.hero-controls{position:relative;bottom:auto;margin-top:20px}.hero-visual{padding-bottom:0}
.hero-slide{pointer-events:none}
button:disabled{cursor:not-allowed;opacity:.6}
html:not(.js) .menu-toggle,html:not(.js) .filters{display:none}
@media(max-width:1420px){html:not(.js) .header-wrap{flex-wrap:wrap}html:not(.js) #navigation{display:flex;position:static;width:100%;padding:12px 0;box-shadow:none}}
@media(max-width:760px){.hero-grid,.split,.contact-grid,.footer-grid{grid-template-columns:minmax(0,1fr)}.hero-visual{padding-bottom:0}.hero-controls{gap:8px}.hero h1{font-size:clamp(2rem,9vw,3.1rem)}.header-wrap{gap:12px}.brand{flex-shrink:1}.brand span{overflow-wrap:anywhere}.menu-toggle{flex-shrink:0}.contact-icon{width:38px;min-width:38px}}

/* Company slogan: equal emphasis on both lines, with room for Vietnamese text. */
.hero h1.brand-slogan-hero{font-size:clamp(2.2rem,3.8vw,3.65rem);line-height:1.22;letter-spacing:-.035em;text-wrap:balance}
.hero h1.brand-slogan-hero span{font-size:1em;color:#a7e2f3;display:inline}
.footer-grid .footer-slogan{color:#a7e2f3;font-size:1.15rem;font-weight:700;line-height:1.5;margin:16px 0}
@media(max-width:760px){.hero h1.brand-slogan-hero{font-size:clamp(1.85rem,7.1vw,2.8rem)}}

/* Paired VI / EN navigation stays available alongside the mobile menu. */
.language-switch{display:flex;align-items:center;gap:4px;margin-left:auto;color:#91b7cd;font-size:.88rem;flex-shrink:0}
.language-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:36px;color:#d9edf6;border-radius:4px;font-weight:700}
.language-switch a[aria-current]{background:var(--red);color:#fff}.language-switch a:hover{background:#104d70;text-decoration:none}
html[lang=en] .hero h1.brand-slogan-hero{font-size:clamp(2.1rem,3.8vw,3.55rem)}
html[lang=en] .hero-slide figcaption{letter-spacing:.06em}
@media(max-width:760px){.language-switch{gap:0;font-size:.8rem}.language-switch a{min-width:30px}.header-wrap{gap:8px}.brand small{font-size:.66rem}.brand span{font-size:1rem}.brand img{width:44px;height:44px}.brand{gap:8px}.menu-toggle{padding:8px;font-size:.88rem}html[lang=en] .hero h1.brand-slogan-hero{font-size:clamp(1.9rem,7.1vw,2.8rem)}}
@media(max-width:370px){.header-wrap{flex-wrap:wrap}.brand{flex:1 1 62%}.language-switch{margin-left:0}.menu-toggle{margin-left:auto}.language-switch a{min-width:36px}}
/* Page-intro and capability waves drift like the homepage hero. */
.capability.sea:before{inset-inline:-12%;animation:ocean-drift 12s ease-in-out infinite alternate;will-change:transform}
/* Inner-page intros: waves visible enough to read as motion, still behind the text. */
.page-intro.sea:before{inset-inline:-14%;opacity:.55;animation:ocean-swell 7s ease-in-out infinite alternate;will-change:transform}
.illustrated-intro.sea:before{opacity:.42}
@keyframes ocean-swell{0%{transform:translateX(-5%) translateY(10px)}50%{transform:translateX(0) translateY(-6px)}100%{transform:translateX(5%) translateY(8px)}}
@media(prefers-reduced-motion:reduce){.capability.sea:before,.page-intro.sea:before{animation:none}}
@media print{.capability.sea:before,.page-intro.sea:before{animation:none}}
/* Larger, more prominent header logo. */
.brand img{width:92px;height:92px;padding:4px;border-radius:12px;box-shadow:0 6px 18px #00000040}
.header-wrap{padding-top:12px;padding-bottom:12px}
@media(max-width:1420px){.brand img{width:80px;height:80px}}
@media(max-width:760px){.brand img{width:64px;height:64px;border-radius:10px}}
@media(max-width:420px){.brand img{width:56px;height:56px;padding:3px}}
/* Footer: large logo beside the company name. */
.footer-brand{display:flex;align-items:flex-start;gap:24px;min-width:0}
.footer-logo{flex:0 0 auto;display:block;line-height:0}
.footer-logo img{width:150px;height:150px;object-fit:contain;background:white;border-radius:16px;padding:6px;box-shadow:0 10px 26px #00000055}
.footer-brand .brand-name{display:inline-block;margin-top:6px}
.footer-grid>div.footer-links a{display:flex}
@media(min-width:1101px){.footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.7fr)}}
@media(max-width:1100px){.footer-brand{flex-direction:column;gap:16px}.footer-logo img{width:120px;height:120px}}
@media(max-width:760px){.footer-brand{flex-direction:row;gap:18px}.footer-logo img{width:104px;height:104px;border-radius:14px}}
@media(max-width:370px){.footer-brand{flex-direction:column;gap:14px}}
/* Waves scale with screen width so crests are never clipped. */
.sea:before{height:clamp(245px,15vw,300px)}
/* Ocean photo background for the homepage hero and capability section. */
.hero.sea,.capability.sea{background:linear-gradient(90deg,#041a30e6 0%,#061f38b3 38%,#0a2a4a59 70%,#0a2a4a40 100%),url("ocean-bg.webp") center top/cover no-repeat,var(--navy)}
.capability.sea{background-position:center,center 30%,center}
@media(max-width:760px){.hero.sea,.capability.sea{background:linear-gradient(180deg,#041a30cc 0%,#061f38a6 55%,#0a2a4a73 100%),url("ocean-bg-sm.webp") center top/cover no-repeat,var(--navy)}}
/* Ocean-wave photo behind every light content section; light text on top. */
body{background:var(--navy)}
main{overflow-x:clip}
main>section.section:not(.sea):not(.deep-section),main>article.section{--text:#eef8fc;--muted:#c3dbe6;color:var(--text);background:linear-gradient(#041a30b8,#06203ac4),url("waves-bg.webp") center bottom/cover no-repeat,var(--navy)}
main>article.section{position:relative;background:none;isolation:isolate}
main>article.section:before{content:"";position:absolute;inset:0 50%;width:100vw;margin-left:-50vw;z-index:-1;background:linear-gradient(#041a30b8,#06203ac4),url("waves-bg.webp") center bottom/cover no-repeat,var(--navy)}
@media(max-width:760px){main>section.section:not(.sea):not(.deep-section),main>article.section:before{background:linear-gradient(#041a30b8,#06203ac4),url("waves-bg-sm.webp") center bottom/cover no-repeat,var(--navy)}}
.breadcrumbs{--text:#eef8fc;color:#b9d6e3}
.breadcrumbs a{color:var(--red)}
main>section.section:not(.sea) .eyebrow,main>article.section .eyebrow{color:var(--red)}
main>section.section:not(.sea) .text-link:not(.light),main>article.section .text-link{color:var(--red)}
main .contact-large{color:var(--red)}
main .story:hover h2,main .contact-method:hover h3{color:var(--red)}
main .detail-tile p,main details p,main .faq-wrap details p{color:var(--muted)}
main .detail-index{color:var(--red)}
main details[open] summary,main .faq-wrap details[open] summary{color:var(--red)}
main th,main td{border-bottom-color:#ffffff33}
main .detail-tile,main .steps li,main details,main .contact-method{border-color:#ffffff40}
main .filters button{border-color:#ffffff66}
main .product-card{box-shadow:0 10px 26px #00000059;outline:1px solid #ffffff1f}
/* Light containers keep dark text for readability. */
main :is(.panel,form,.article-contents,.editorial-note){--text:#08304b;--muted:#506e7e;color:var(--text);background:#eef8fce6;backdrop-filter:blur(6px);box-shadow:0 10px 28px #0000004d}
main .editorial-note{background:#d9eef5f0}
main>:is(section,article).section:not(.sea) :is(.panel,form,.article-contents,.editorial-note) .eyebrow{color:var(--red)}
main>:is(section,article).section:not(.sea) :is(.panel,form,.article-contents,.editorial-note) :is(.text-link,a.text-link){color:#b3172a}
main .article-card:hover{background:#ffffff}
/* Sunset fishing-fleet photo for selected sections (partnership, quality, FAQ). */
main>section.section.sunset:not(.sea):not(.deep-section){background:linear-gradient(90deg,#041a30dc 0%,#051c34b0 45%,#0a2a4a6b 100%),url("sunset-bg.webp") center 42%/cover no-repeat,var(--navy)}
@media(max-width:760px){main>section.section.sunset:not(.sea):not(.deep-section){background:linear-gradient(180deg,#041a30d9,#051c34c2 60%,#0a2a4a99),url("sunset-bg-sm.webp") center/cover no-repeat,var(--navy)}}
main>section.section.sunset :is(h2,h3,p,summary){text-shadow:0 1px 3px #000000a6}
/* Seamless joins between photo sections: fade every edge to navy, then mark the join with a wave. */
main>section.section:not(.sea):not(.deep-section){position:relative;isolation:isolate}
main>section.section:not(.sea):not(.deep-section)>*{position:relative;z-index:2}
main>section.section:not(.sea):not(.deep-section):after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--navy) 0,#05254000 120px,#05254000 calc(100% - 120px),var(--navy) 100%)}
main>article.section:before{background:linear-gradient(180deg,var(--navy) 0,#05254000 120px,#05254000 calc(100% - 120px),var(--navy) 100%),linear-gradient(#041a30b8,#06203ac4),url("waves-bg.webp") center bottom/cover no-repeat,var(--navy)}
main>:is(section,article):not(.page-intro):not(.hero):not(.capability)+section.section:not(.sea):not(.deep-section):before{content:"";position:absolute;top:-1px;left:-12%;right:-12%;height:clamp(54px,5.5vw,90px);z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23052540' fill-opacity='.55' d='M0 0H1440V52Q1260 88 1080 58Q900 28 720 58Q540 88 360 58Q180 28 0 52Z'/%3E%3Cpath fill='%23052540' d='M0 0H1440V30Q1260 66 1080 38Q900 10 720 38Q540 66 360 38Q180 10 0 30Z'/%3E%3Cpath fill='none' stroke='%234b9ebe' stroke-opacity='.75' stroke-width='3' vector-effect='non-scaling-stroke' d='M0 30Q180 10 360 38Q540 66 720 38Q900 10 1080 38Q1260 66 1440 30'/%3E%3Cpath fill='none' stroke='%237fc3db' stroke-opacity='.35' stroke-width='2' vector-effect='non-scaling-stroke' d='M0 52Q180 28 360 58Q540 88 720 58Q900 28 1080 58Q1260 88 1440 52'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;animation:ocean-drift 12s ease-in-out infinite alternate}
main>:is(section,article):not(.page-intro):not(.hero):not(.capability)+section.section:not(.sea):not(.deep-section){padding-top:calc(clamp(54px,5.5vw,90px) + 40px)}
@media(max-width:760px){main>section.section:not(.sea):not(.deep-section):after{background:linear-gradient(180deg,var(--navy) 0,#05254000 70px,#05254000 calc(100% - 70px),var(--navy) 100%)}main>article.section:before{background:linear-gradient(180deg,var(--navy) 0,#05254000 70px,#05254000 calc(100% - 70px),var(--navy) 100%),linear-gradient(#041a30b8,#06203ac4),url("waves-bg-sm.webp") center bottom/cover no-repeat,var(--navy)}}
@media(prefers-reduced-motion:reduce){main>section.section:not(.sea):not(.deep-section):before{animation:none}}
/* Capability photo fades into the sections around it. */
main>section.capability.sea{isolation:isolate}
main>section.capability.sea>.wrap{z-index:2}
main>section.capability.sea:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--navy) 0,#05254000 120px,#05254000 calc(100% - 80px),var(--navy) 100%)}
/* Inner-page hero photos: feather every edge so no hard cut shows. */
.illustrated-intro .intro-photo{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 32%),linear-gradient(180deg,#0000 0,#000 16%,#000 70%,#0000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000 0,#000 32%),linear-gradient(180deg,#0000 0,#000 16%,#000 70%,#0000 100%);mask-composite:intersect}
.page-intro.sea{background:linear-gradient(180deg,#05254000 55%,var(--navy) 100%),linear-gradient(135deg,var(--navy),#0b557c)}
@media(max-width:760px){.illustrated-intro .intro-photo{-webkit-mask-image:linear-gradient(180deg,#0000 0,#000 18%,#000 65%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,#000 18%,#000 65%,#0000 100%)}}
/* Keep split-section photos landscape so portrait shots don't stretch the section. */
.split>figure img{aspect-ratio:4/3;object-fit:cover;object-position:center 62%}
/* Call-to-action band: underwater fish-school photo, edges faded into navy. */
main>section.cta{padding:84px 0;background:linear-gradient(180deg,var(--navy) 0,#05254000 70px,#05254000 calc(100% - 70px),var(--navy) 100%),linear-gradient(90deg,#041a30d9 0%,#06203ab3 50%,#0a2a4a73 100%),url("school-bg.webp") center 58%/cover no-repeat,var(--navy)}
main>section.cta :is(h2,p){text-shadow:0 1px 3px #0000008c}
@media(max-width:760px){main>section.cta{padding:64px 0;background:linear-gradient(180deg,var(--navy) 0,#05254000 50px,#05254000 calc(100% - 50px),var(--navy) 100%),linear-gradient(180deg,#041a30cc,#06203aa6),url("school-bg-sm.webp") center 58%/cover no-repeat,var(--navy)}}
/* Large bold step numbers, matching the process steps. */
main .detail-index{font-size:2.5rem;font-weight:800;letter-spacing:0;line-height:1;margin-bottom:16px;text-shadow:0 2px 6px #00000080}
@media(max-width:760px){main .detail-index{font-size:2.1rem}}
/* Homepage exhibition feature: red band, faint fleet photo, photo slideshow. */
.event-feature{position:relative;padding:84px 0;color:#fff;background:linear-gradient(180deg,var(--navy) 0,#05254000 90px,#05254000 calc(100% - 90px),var(--navy) 100%),linear-gradient(90deg,#c91f32c7 0%,#bd1b2da6 50%,#a8162880 100%),url("harbor-bg.webp") center 45%/cover no-repeat,var(--red)}
.event-feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px;align-items:center}
.event-copy h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.15;margin:0 0 14px;color:#fff}
.event-copy h2:before{content:"";display:block;width:56px;height:3px;background:#fff;margin-bottom:26px}
.event-copy p{font-size:1.1rem;color:#ffe9ec;margin:0}
.event-copy .button.outline{margin-top:30px;background:transparent;border:1.5px solid #fff;color:#fff;display:inline-flex;align-items:center;gap:10px}
.event-copy .button.outline:after{content:"→";font-size:1.1em}
.event-copy .button.outline:hover{background:#fff;color:var(--red)}
.event-slides{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px #3d000a73;background:#7e0f1d}
.event-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s}
.event-slide.is-active{opacity:1;visibility:visible}
.event-slide img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.event-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:4px;z-index:2}
.event-dots button{width:30px;height:30px;border:0;background:transparent;padding:0;cursor:pointer}
.event-dots button:before{content:"";display:block;width:9px;height:9px;margin:auto;border-radius:50%;background:#ffffffa6;box-shadow:0 1px 3px #0008;transition:transform .3s,background .3s}
.event-dots button[aria-pressed=true]:before{background:#fff;transform:scale(1.35)}
@media(max-width:900px){.event-feature-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:760px){.event-feature{padding:64px 0}}
@media(prefers-reduced-motion:reduce){.event-slide{transition:none}}
.event-copy :is(h2,p){text-shadow:0 2px 8px #4a000c99}
/* Capability page: "real, unedited photos" emphasis. */
.real-badge{display:inline-flex;align-items:center;gap:10px;margin:26px 0 0;padding:10px 18px;border:1.5px solid #ffffffb3;border-radius:40px;background:#ce203326;color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.08em;backdrop-filter:blur(4px)}
.real-badge span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);font-size:.8rem}
.real-photo{position:relative}
.real-tag{position:absolute;top:12px;left:12px;z-index:2;padding:5px 11px;border-radius:30px;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em;box-shadow:0 3px 10px #0006;pointer-events:none}
main>section.real-note-section{padding-top:70px;padding-bottom:70px}
.real-note{display:flex;gap:22px;align-items:flex-start;max-width:900px;margin:auto;padding:30px 34px;border-radius:12px;border-left:5px solid var(--red);background:#eef8fce6;color:#08304b;box-shadow:0 12px 30px #0000004d}
.real-note h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:0 0 10px;color:#08304b}
.real-note p{margin:0;color:#35566a}
.real-note-icon{flex:0 0 52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:1.5rem;font-weight:800}
@media(max-width:760px){.real-note{flex-direction:column;padding:24px}.real-badge{font-size:.74rem;letter-spacing:.04em}}
.real-badge{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.03em;font-size:.9rem}
@media(max-width:760px){.real-badge{font-size:.78rem;letter-spacing:.02em}}
/* Product image hover: gentle zoom, red frame, "view details" button. */
.card-media{position:relative;display:block;overflow:hidden;line-height:0}
.mosaic-item .card-media{position:absolute;inset:0}
.mosaic-item .card-media img{height:100%;width:100%}
.card-media img{transition:transform .45s ease}
.card-media:after{content:"";position:absolute;inset:0;border:3px solid transparent;transition:border-color .3s,background .3s;pointer-events:none}
.card-media .view-detail{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-30%);opacity:0;padding:11px 22px;border-radius:5px;background:var(--red);color:#fff;font-style:normal;font-weight:700;font-size:.92rem;line-height:1.2;white-space:nowrap;box-shadow:0 8px 20px #0007;transition:opacity .3s,transform .3s;pointer-events:none}
:is(.product-card,.mosaic-item):is(:hover,:focus-visible) .card-media img{transform:scale(1.07)}
:is(.product-card,.mosaic-item):is(:hover,:focus-visible) .card-media:after{border-color:var(--red);background:#05254040}
:is(.product-card,.mosaic-item):is(:hover,:focus-visible) .view-detail{opacity:1;transform:translate(-50%,-50%)}
.mosaic-item:hover img{transform:none}
.mosaic-item:hover .card-media img{transform:scale(1.07)}
.mosaic-item>span{z-index:3}
@media(hover:none){.card-media .view-detail{display:none}}
@media(prefers-reduced-motion:reduce){.card-media img,.card-media .view-detail{transition:none}}
/* Contact buttons: brighter red on hover, arrow slides right. */
:root{--red-bright:#e8293e}
.button:not(.secondary):not(.outline){gap:10px;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.button:not(.secondary):not(.outline):after{content:"→";display:inline-block;font-size:1.1em;line-height:1;transition:transform .25s}
.button:not(.secondary):not(.outline):is(:hover,:focus-visible){background:var(--red-bright);border-color:var(--red-bright);box-shadow:0 8px 22px #e8293e59}
.button:is(:hover,:focus-visible):after{transform:translateX(5px)}
.event-copy .button.outline:after{display:inline-block;transition:transform .25s}
.button:disabled:after{transform:none}
/* Phone / email / address icons follow the same red. */
.contact-icon{transition:background .25s,transform .25s,box-shadow .25s}
:is(a,.contact-method):is(:hover,:focus-visible) .contact-icon{background:var(--red-bright)!important;transform:scale(1.08);box-shadow:0 6px 16px #e8293e66}
.footer-links svg{transition:color .25s,transform .25s}
.footer-links a:is(:hover,:focus-visible) svg{color:var(--red-bright);transform:translateX(3px)}
a:is(:hover,:focus-visible) .contact-icon~span,.footer-links a:is(:hover,:focus-visible) span{color:#fff}
main .contact-method:is(:hover,:focus-visible) h3{color:var(--red-bright)}
@media(prefers-reduced-motion:reduce){.button:after,.contact-icon,.footer-links svg{transition:none}}
/* Section dividers: three blue wave layers drifting at different speeds for depth. */
:is(main>:is(section,article):not(.page-intro):not(.hero):not(.capability)+:is(section.section:not(.sea):not(.deep-section),section.cta,section.event-feature),main>section.capability+section.event-feature){position:relative;padding-top:calc(clamp(64px,6.5vw,104px) + 40px)}
:is(main>:is(section,article):not(.page-intro):not(.hero):not(.capability)+:is(section.section:not(.sea):not(.deep-section),section.cta,section.event-feature),main>section.capability+section.event-feature):before{content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(64px,6.5vw,104px);z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 100' preserveAspectRatio='none'%3E%3Cpath fill='%23052540' fill-opacity='1' d='M0 0H560V34Q420.0 60 280.0 34Q140.0 8 0 34Z'/%3E%3Cpath fill='none' stroke='%236cc0de' stroke-opacity='.85' stroke-width='2.5' vector-effect='non-scaling-stroke' d='M0 34Q140.0 8 280.0 34Q420.0 60 560 34'/%3E%3C/svg%3E") 0 0/560px 100% repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 100' preserveAspectRatio='none'%3E%3Cpath fill='%230e5a82' fill-opacity='0.9' d='M0 0H420V56Q315.0 80 210.0 56Q105.0 32 0 56Z'/%3E%3Cpath fill='none' stroke='%233f97bd' stroke-opacity='.85' stroke-width='2.5' vector-effect='non-scaling-stroke' d='M0 56Q105.0 32 210.0 56Q315.0 80 420 56'/%3E%3C/svg%3E") 0 0/420px 100% repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 100' preserveAspectRatio='none'%3E%3Cpath fill='%232a85ad' fill-opacity='0.6' d='M0 0H320V76Q240.0 96 160.0 76Q80.0 56 0 76Z'/%3E%3C/svg%3E") 0 0/320px 100% repeat-x;animation:wave-layers 14s linear infinite}
@keyframes wave-layers{from{background-position:0 0,0 0,0 0}to{background-position:-1120px 0,-420px 0,-320px 0}}
@media(prefers-reduced-motion:reduce){:is(main>:is(section,article):not(.page-intro):not(.hero):not(.capability)+:is(section.section:not(.sea):not(.deep-section),section.cta,section.event-feature),main>section.capability+section.event-feature):before{animation:none}}
main>section.cta>.wrap,main>section.event-feature>.wrap{position:relative;z-index:2}
/* Header stays pinned to the top while scrolling. */
header{position:sticky;top:0;z-index:50;transition:box-shadow .3s,background .3s}
html{scroll-padding-top:130px}
header.is-scrolled{background:#052540f2;box-shadow:0 6px 20px #0006;backdrop-filter:blur(8px)}
@media(max-width:1420px){header #navigation.open{max-height:calc(100vh - 100px);overflow-y:auto}}
@media(max-width:760px){html{scroll-padding-top:100px}}
/* Red buttons: metallic finish with a light sweep when they first come into view. */
.button:not(.secondary):not(.outline){position:relative;overflow:hidden;isolation:isolate;background-image:linear-gradient(180deg,#ffffff38 0%,#ffffff0d 45%,#00000014 55%,#00000033 100%);box-shadow:inset 0 1px 0 #ffffff59,inset 0 -2px 0 #0000002e,0 4px 12px #6d0a1659}
.button:not(.secondary):not(.outline):before{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#fff0 0%,#ffffff26 30%,#ffffffbf 50%,#ffffff26 70%,#fff0 100%);transform:skewX(-20deg) translateX(0);opacity:0}
.button.shine:not(.secondary):not(.outline):before{animation:metal-shine 1.1s cubic-bezier(.4,0,.2,1) .15s 1 both}
.button:not(.secondary):not(.outline):is(:hover,:focus-visible):before{animation:metal-shine .8s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes metal-shine{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(420%)}}
@media(prefers-reduced-motion:reduce){.button:before{animation:none!important}}
/* Footer contact icons: same metallic finish and light sweep as the red buttons. */
.footer-contact .contact-icon{position:relative;overflow:hidden;isolation:isolate;background-image:linear-gradient(180deg,#ffffff38 0%,#ffffff0d 45%,#00000014 55%,#00000033 100%);box-shadow:inset 0 1px 0 #ffffff59,inset 0 -2px 0 #0000002e,0 4px 12px #6d0a1659}
.footer-contact .contact-icon:before{content:"";position:absolute;top:-20%;bottom:-20%;left:-90%;width:70%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#fff0 0%,#ffffff26 30%,#ffffffbf 50%,#ffffff26 70%,#fff0 100%);transform:skewX(-20deg);opacity:0}
.footer-contact .contact-icon.shine:before{animation:metal-shine-icon 1s cubic-bezier(.4,0,.2,1) .15s 1 both}
.footer-contact a:is(:hover,:focus-visible) .contact-icon:before{animation:metal-shine-icon .8s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes metal-shine-icon{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(330%)}}
@media(prefers-reduced-motion:reduce){.footer-contact .contact-icon:before{animation:none!important}}
/* Menu items bounce up gently on hover. */
#navigation a:not(.button){display:inline-block;transition:color .2s}
#navigation a:not(.button):is(:hover,:focus-visible){color:var(--red-bright);text-decoration:none;animation:nav-bounce .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes nav-bounce{0%{transform:translateY(0)}45%{transform:translateY(-5px)}70%{transform:translateY(-2px)}100%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#navigation a:not(.button):is(:hover,:focus-visible){animation:none}}
/* ===== Homepage intro "Sóng mở màn" ===== */
html{scrollbar-gutter:stable}
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on:not(.intro-built) body:before{content:"";position:fixed;inset:0;z-index:9998;background:#061F35}
html.intro-hold .hero.motion-ready .hero-copy>*{animation-play-state:paused}
.intro{--t:var(--intro-t);position:fixed;inset:0;z-index:9999;pointer-events:auto;will-change:transform;animation:intro-exit calc(.55s*var(--t)) cubic-bezier(.65,0,.35,1) calc(.95s*var(--t)) both}
.intro-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 80% at 50% 18%,#0b3d5e 0%,#061F35 62%)}
.intro-art:before{content:"";position:absolute;left:50%;top:-30%;width:110vmax;height:80vmax;transform:translateX(-50%);background:radial-gradient(closest-side,#7fd1ee2e,#7fd1ee00);pointer-events:none}
.intro-edge{position:absolute;left:0;right:0;top:calc(100% - 1px);height:clamp(60px,9vw,120px);line-height:0}
.intro-edge svg,.intro-wave svg{width:100%;height:100%;display:block}
.intro-wave{position:absolute;left:-15%;width:130%;bottom:-2px;line-height:0;will-change:transform,opacity}
.intro-wave.w1{height:58%;animation:intro-wave-1 calc(.62s*var(--t)) cubic-bezier(.22,.8,.3,1) calc(.3s*var(--t)) both}
.intro-wave.w2{height:44%;animation:intro-wave-2 calc(.7s*var(--t)) cubic-bezier(.22,.8,.3,1) calc(.36s*var(--t)) both}
.intro-wave.w3{height:30%;animation:intro-wave-3 calc(.6s*var(--t)) cubic-bezier(.22,.8,.3,1) calc(.44s*var(--t)) both}
.intro-logo{position:absolute;left:50%;top:46%;width:clamp(180px,19vw,260px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%);z-index:3}
.intro-logo img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:28px;padding:10px;box-shadow:0 22px 54px #0009,0 0 0 2px #CE252D;opacity:0;animation:intro-logo calc(.8s*var(--t)) cubic-bezier(.3,.7,.3,1) calc(.32s*var(--t)) both}
.intro-skip{position:absolute;right:max(16px,3vw);bottom:max(18px,4vh);z-index:4;padding:9px 16px;border:1px solid #ffffff8c;border-radius:30px;background:#061F35b3;color:#fff;font:600 .85rem/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(4px)}
.intro-skip:hover,.intro-skip:focus-visible{background:#CE252D;border-color:#CE252D;outline:2px solid #fff;outline-offset:2px}
.intro.is-skipping{animation:intro-skip .3s ease-out both}
@keyframes intro-wave-1{from{transform:translate3d(-3%,105%,0)}to{transform:translate3d(0,0,0)}}
@keyframes intro-wave-2{from{transform:translate3d(4%,110%,0)}to{transform:translate3d(-2%,0,0)}}
@keyframes intro-wave-3{from{transform:translate3d(-2%,120%,0)}to{transform:translate3d(1.5%,0,0)}}
@keyframes intro-logo{0%{opacity:0;transform:translateY(12px)}55%{opacity:1;transform:translateY(0)}78%{opacity:1;transform:translateY(-2px)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes intro-exit{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-100% - clamp(60px,9vw,120px) - 4px),0)}}
@keyframes intro-skip{to{opacity:0}}
@media(max-width:760px){:root{--intro-t:1.667}.intro-logo{width:min(46vw,190px)}.intro-wave.w3{display:none}.intro-wave.w1{height:50%}.intro-wave.w2{height:36%}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}
/* Intro: the homepage rises with the lifting wave, as if pulled up by it. */
:root{--intro-t:2.667}
@media(max-width:760px){:root{--intro-t:1.667}}
html.intro-built body>:not(.intro):not(.skip):not(dialog){animation:intro-page-rise calc(.55s*var(--intro-t)) cubic-bezier(.65,0,.35,1) calc(.95s*var(--intro-t)) both}
@keyframes intro-page-rise{from{transform:translate3d(0,100vh,0)}to{transform:none}}
/* Logo + company name: grow slightly on hover, logo gets a polished-metal sheen. */
.logo-shine{position:relative;display:inline-block;flex:0 0 auto;line-height:0;overflow:hidden;border-radius:12px;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s}
.footer-logo .logo-shine{border-radius:16px}
.logo-shine img{transition:filter .35s}
.logo-shine:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(160deg,#ffffff8c 0%,#ffffff00 38%,#ffffff00 62%,#00000026 100%);opacity:0;transition:opacity .35s}
.logo-shine:after{content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:55%;z-index:2;pointer-events:none;background:linear-gradient(105deg,#fff0 0%,#ffffff33 30%,#ffffffe6 50%,#ffffff33 70%,#fff0 100%);transform:skewX(-20deg);opacity:0}
.brand span:not(.logo-shine),.footer-brand .brand-name{display:inline-block;transform-origin:left center;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
:is(.brand,.footer-brand):is(:hover,:focus-within) .logo-shine{transform:scale(1.08);box-shadow:0 0 0 2px #ffffff80,0 10px 26px #00000073,0 0 22px #9fdcf066}
:is(.brand,.footer-brand):is(:hover,:focus-within) .logo-shine img{filter:contrast(1.08) saturate(1.12) brightness(1.04)}
:is(.brand,.footer-brand):is(:hover,:focus-within) .logo-shine:before{opacity:1}
:is(.brand,.footer-brand):is(:hover,:focus-within) .logo-shine:after{animation:logo-gleam .9s cubic-bezier(.4,0,.2,1) both}
:is(.brand,.footer-brand):is(:hover,:focus-within) :is(.brand span:not(.logo-shine),.brand-name){transform:scale(1.05)}
@keyframes logo-gleam{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(400%)}}
@media(prefers-reduced-motion:reduce){.logo-shine,.brand span,.footer-brand .brand-name{transition:none}.logo-shine:after{animation:none!important}}
.logo-shine img{box-shadow:none}
.brand .logo-shine{box-shadow:0 6px 18px #00000040}
.footer-logo .logo-shine{box-shadow:0 10px 26px #00000055}
@media(max-width:760px){.brand .logo-shine{border-radius:10px}.footer-logo .logo-shine{border-radius:14px}}
.logo-shine:before{background:linear-gradient(160deg,#ffffff66 0%,#ffffff00 35%,#ffffff00 85%,#00000012 100%)}
.brand .logo-shine{transform-origin:left center}
.footer-logo .logo-shine{transform-origin:left top}
:is(.brand,.footer-brand):is(:hover,:focus-within) .logo-shine{box-shadow:0 0 0 2px #fffffff2,0 10px 26px #00000066,0 0 24px #bfe6f5a6}
:is(.brand,.footer-brand):is(:hover,:focus-within) .logo-shine img{filter:contrast(1.12) saturate(1.2) brightness(1.06)}
header .brand.brand:is(:hover,:focus-within) span:not(.logo-shine):not(.x){transform:translateX(8px) scale(1.05)}
/* Product galleries with many photos: three columns on wide screens. */
@media(min-width:761px){.gallery:has(figure:nth-child(6)){grid-template-columns:repeat(3,1fr)}.gallery:has(figure:nth-child(6)) figure:first-child{grid-column:1/-1}.gallery:has(figure:nth-child(6)) img{height:170px}}
/* Capability page: real processing videos. */
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:24px;justify-content:center;margin-top:36px}
.video-card{margin:0}
.video-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#061F35;border-radius:12px;box-shadow:0 12px 30px #00000066;outline:2px solid #ffffff1f}
.video-card figcaption{margin-top:10px;font-size:.9rem;color:var(--muted);text-align:center}
@media(max-width:760px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.video-card figcaption{font-size:.8rem}}
@media(max-width:420px){.video-grid{grid-template-columns:minmax(0,320px)}}