/* Black Trident v2  -  editorial motion and visual refinement.
   Progressive enhancement: every word and section stays readable if JS is disabled. */
:root{--premium-ease:cubic-bezier(.22,1,.36,1);--gold-line:rgba(239,198,93,.64)}

/* Visual direction: blackened ocean, warmth of the horizon, and controlled depth. */
.site-header{isolation:isolate;background:rgba(6,25,37,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(244,203,99,.13)}
.desktop-nav a::after{height:2px;bottom:21px}
.brand-link img{filter:drop-shadow(0 3px 7px rgba(0,0,0,.12))}
.premium-home-hero{isolation:isolate;background:#081f2d}
.premium-home-hero .hero-bg{
  inset:-2%;
  background:
    linear-gradient(90deg,rgba(3,19,30,.98) 0%,rgba(3,19,30,.89) 22%,rgba(3,19,30,.50) 47%,rgba(3,19,30,.07) 75%),
    linear-gradient(0deg,rgba(5,22,34,.65),transparent 53%),
    url('../images/hero-platform.webp') 58% 53%/cover no-repeat;
  will-change:transform;
  filter:saturate(.91) contrast(1.025);
}
.premium-home-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(100deg,transparent 46%,rgba(235,177,76,.04) 60%,transparent 82%),repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(246,216,137,.045) calc(25% - 1px),rgba(246,216,137,.045) 25%)}
.hero-copy{max-width:680px}
.hero-copy h1{letter-spacing:-.055em;line-height:1.035;font-size:clamp(3.35rem,5.25vw,5.75rem)}
.hero-eyebrow{letter-spacing:.2em;position:relative;display:inline-flex;align-items:center;gap:18px}
.hero-eyebrow::after{content:"";display:inline-block;width:36px;height:1px;background:var(--gold);flex:none}
.hero-indicator{letter-spacing:.23em}
.hero-lead{letter-spacing:-.015em}
.hero-copy .btn{min-height:55px;padding:16px 26px}
.hero-edge{opacity:1;background:linear-gradient(90deg,transparent 1%,rgba(230,190,78,.78) 44%,transparent 100%);height:2px}

/* Oculus-inspired kinetic headline, but calibrated to Black Trident's more serious identity. */
.word-reveal{font-kerning:normal}
.motion-enhanced .word-reveal .word-clip{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em;white-space:nowrap}
.motion-enhanced .word-reveal .word-inside{display:inline-block;opacity:0;transform:translate3d(0,105%,0) rotate(1.1deg);filter:blur(2px);transition:transform .95s var(--premium-ease),opacity .74s ease,filter .9s ease;transition-delay:calc(var(--word-index,0)*58ms)}
.motion-enhanced .word-reveal.word-visible .word-inside{opacity:1;transform:translate3d(0,0,0) rotate(0);filter:none}
/* Inline em and line wraps continue to behave like regular text. */
.word-reveal .word-clip{max-width:100%}

/* Section enters: a slight blur clears as elements settle, with curated stagger. */
.motion-enhanced .reveal:not(.in-view){opacity:0;transform:translate3d(0,32px,0);filter:blur(4px)}
.motion-enhanced .reveal{transition:opacity .9s ease,transform 1s var(--premium-ease),filter .9s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-enhanced .reveal.in-view{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.motion-enhanced .service-card:nth-child(2){--reveal-delay:65ms}
.motion-enhanced .service-card:nth-child(3){--reveal-delay:130ms}
.motion-enhanced .service-card:nth-child(4){--reveal-delay:195ms}
.motion-enhanced .service-card:nth-child(5){--reveal-delay:260ms}
.motion-enhanced .ribbon-item:nth-child(2),.motion-enhanced .why-item:nth-child(2){--reveal-delay:65ms}
.motion-enhanced .ribbon-item:nth-child(3),.motion-enhanced .why-item:nth-child(3){--reveal-delay:130ms}
.motion-enhanced .ribbon-item:nth-child(4),.motion-enhanced .why-item:nth-child(4){--reveal-delay:195ms}

/* Atmospheric energy that moves slowly, not a gimmicky parallax carousel. */
@media(prefers-reduced-motion:no-preference){
  .premium-home-hero .hero-bg{animation:premiumPan 24s ease-in-out infinite alternate}
  .premium-home-hero .hero-bg::after{animation:horizonLight 10s ease-in-out infinite alternate}
  .hero-edge{background-size:170% 100%;animation:goldDrift 11s linear infinite alternate}
  .eyebrow.gold,.hero-eyebrow{animation:introCaption 1.1s var(--premium-ease) both}
  .hero-actions{animation:introCTA 1.05s var(--premium-ease) .32s both}
  .hero-indicator .indicator-line{transform-origin:left center;animation:indicatorGrow 1.4s var(--premium-ease) .8s both}
}
@keyframes premiumPan{0%{transform:scale(1.02) translate3d(-.4%,0,0)}100%{transform:scale(1.095) translate3d(.9%,.8%,0)}}
@keyframes horizonLight{0%{opacity:.28}100%{opacity:.8}}
@keyframes goldDrift{to{background-position:100% center}}
@keyframes introCaption{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes introCTA{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes indicatorGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Premium interaction details */
.btn,.header-cta{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 13px 35px rgba(0,0,0,.09)}
.btn::after,.header-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-150%);transition:transform .7s var(--premium-ease);pointer-events:none}
.btn:hover::after,.header-cta:hover::after{transform:translateX(150%)}
.btn svg,.header-cta svg,.service-link svg,.text-link svg{transition:transform .35s var(--premium-ease)}
.btn:hover svg,.header-cta:hover svg,.service-card:hover .service-link svg{transform:translateX(5px)}
.service-card{position:relative;overflow:hidden;border:1px solid rgba(233,194,94,.16)!important;transition:transform .55s var(--premium-ease),box-shadow .55s var(--premium-ease),border-color .38s ease!important}
.service-card::after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--gold),#fff2b1);transition:width .65s var(--premium-ease)}
.service-card:hover{transform:translateY(-9px)!important;box-shadow:0 30px 65px rgba(0,0,0,.24);border-color:rgba(239,198,93,.6)!important}
.service-card:hover::after,.service-card:focus-visible::after{width:100%}
.service-image{position:relative;overflow:hidden;background:#163443}
.service-image img{height:100%;width:100%;object-fit:cover;object-position:center;transition:transform 1.35s var(--premium-ease),filter .8s ease}
.service-card:hover .service-image img{transform:scale(1.085);filter:saturate(1.07) contrast(1.04)}
.service-line svg{transition:transform .6s var(--premium-ease)}
.service-card:hover .service-line svg{transform:rotate(-8deg) translateY(-2px)}
.about-photo img,.image-copy-visual img{transition:transform 1.75s var(--premium-ease),filter 1s ease}
.about-photo:hover img,.image-copy-visual:hover img{transform:scale(1.055);filter:saturate(1.05)}
.title-decoration span{transform-origin:left;transition:transform .7s var(--premium-ease)}
.title-decoration:hover span{transform:scaleX(1.45)}
.why-item{transition:transform .55s var(--premium-ease)}.why-item:hover{transform:translateY(-6px)}
.why-item>svg,.mini-value>svg,.ribbon-item>svg{transition:transform .6s var(--premium-ease),color .4s ease}
.why-item:hover>svg,.mini-value:hover>svg,.ribbon-item:hover>svg{transform:translateY(-5px) rotate(-5deg);color:var(--goldlight)}
.page-hero-photo{background-size:cover;will-change:transform}
@media(prefers-reduced-motion:no-preference){.page-hero-photo{animation:pagePictureZoom 18s ease-in-out infinite alternate}}
@keyframes pagePictureZoom{from{transform:scale(1.015)}to{transform:scale(1.09)}}
/* Intentional visual assets across the site. */
.services-section::before{background-image:url('../images/service-marine.webp');background-position:center 47%;opacity:.065}
.philosophy-band{background-image:linear-gradient(90deg,rgba(5,23,35,.98),rgba(6,31,46,.89),rgba(6,24,37,.72)),url('../images/tanks-wide.webp')}
.final-cta::before{background-image:linear-gradient(90deg,rgba(5,23,34,.99),rgba(5,23,34,.84),rgba(5,23,34,.48)),url('../images/service-haulage.webp')}
/* Distinct company story visual with restrained corner caption */
.about-photo img{object-position:42% 48%}
/* Nav drawer reuses native dialog, adds Oculus-style staggered link entrances. */
.menu-toggle{position:relative;transition:border-color .3s,background .3s}
.menu-toggle:hover{background:rgba(239,198,93,.085);border-color:var(--gold)}
.menu-toggle span{transition:transform .35s var(--premium-ease),opacity .22s ease}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-drawer[open] .drawer-link{animation:panelWordIn .65s var(--premium-ease) both;animation-delay:calc(var(--menu-index,0)*68ms + 140ms)}
.mobile-drawer[open] .drawer-top{animation:panelWordIn .6s var(--premium-ease) 70ms both}
.mobile-drawer[open] .drawer-cta{animation:panelWordIn .65s var(--premium-ease) .55s both}
@keyframes panelWordIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.drawer-link{transition:padding-left .25s,color .22s}.drawer-link:hover{padding-left:12px}
.drawer-close{transition:transform .38s var(--premium-ease),background .3s}
.drawer-close:hover{transform:rotate(90deg);background:rgba(239,198,93,.08)}
.back-to-top{transition:opacity .3s,transform .4s var(--premium-ease),background .3s,box-shadow .3s}
.back-to-top:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(0,0,0,.24)}
/* Quiet closing movement when following internal links. */
body.page-departing main{opacity:.8;filter:blur(2px);transform:translateY(-4px);transition:opacity .23s ease,filter .23s ease,transform .23s ease}

@media(max-width:760px){
.premium-home-hero .hero-bg{
  background:
    linear-gradient(180deg,rgba(5,22,36,.94) 0%,rgba(5,22,36,.73) 42%,rgba(5,22,36,.35) 68%,rgba(5,22,36,.10) 100%),
    url('../images/hero-platform.webp') 70% 50%/cover no-repeat;
}
.hero-copy h1{font-size:clamp(2.75rem,8.7vw,4.6rem)}
.hero-copy{position:relative;z-index:2}
}
@media(max-width:540px){
.premium-home-hero .hero-bg{background-position:center,68% center}
.hero-copy{padding-top:59px;padding-bottom:148px}
.hero-copy h1{font-size:clamp(2.64rem,10.6vw,3.42rem);line-height:1.08}
.hero-copy .btn{padding:13px 18px}
.service-card{min-height:188px}
.service-image img{min-height:188px}
.motion-enhanced .service-card:nth-child(n){--reveal-delay:0ms}
}
@media(prefers-reduced-motion:reduce){
.motion-enhanced .word-reveal .word-inside{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
.motion-enhanced .reveal{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
.premium-home-hero .hero-bg,.page-hero-photo,.hero-edge{animation:none!important;transform:none!important}
.mobile-drawer[open] .drawer-link,.mobile-drawer[open] .drawer-top,.mobile-drawer[open] .drawer-cta{animation:none!important}
}
/* Kinetic word wrappers must not inherit the accent assigned only to the original hero span. */
.hero-copy h1 .word-clip,.hero-copy h1 .word-inside{color:inherit}
/* Content before the inline accent remains white; accent phrase inherits gold from its parent. */