@layer reset,base,components,utilities;
@layer reset{*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,h3,p,ul,ol,figure{margin:0}img{display:block;max-width:100%}button,input{font:inherit}a{color:inherit}ul{padding-left:1.1rem}}
@layer base{:root{--navy:#082f52;--navy-2:#0c416e;--blue:#0f6fa4;--teal:#1595aa;--gold:#c79245;--ink:#152b3b;--muted:#5d7180;--line:#dbe5eb;--pale:#f3f7f9;--white:#fff;--shadow:0 20px 50px rgba(8,47,82,.12);--radius:18px;--max:1180px}html{font-size:16px}body{font-family:Inter,"Noto Sans JP","Yu Gothic",Meiryo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:"Arial Narrow",Inter,"Noto Sans JP",sans-serif;color:var(--navy);line-height:1.12;text-wrap:balance}h1{font-size:clamp(2.6rem,5.4vw,5.1rem);letter-spacing:-.035em}h2{font-size:clamp(2rem,3.2vw,3.2rem);letter-spacing:-.025em}h3{font-size:clamp(1.15rem,1.7vw,1.45rem)}p{max-width:72ch}.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}.section{padding:clamp(72px,9vw,118px) 0}.section-sm{padding:52px 0}.eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--blue);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.eyebrow::before{content:"";width:28px;height:2px;background:var(--teal)}.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--muted);line-height:1.75}.muted{color:var(--muted)}.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:14px;top:14px;z-index:9999;background:white;color:var(--navy);padding:.75rem 1rem;border-radius:8px}.icon{width:1.55rem;height:1.55rem;flex:0 0 auto}.pill{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.35);padding:.45rem .8rem;border-radius:999px;font-size:.78rem;font-weight:700}.grid{display:grid;gap:24px}}
@layer components{.topbar{background:var(--navy);color:#e8f4f7;font-size:.78rem}.topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar-links{display:flex;align-items:center;gap:20px}.topbar a{text-decoration:none}.topbar a:hover{text-decoration:underline}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(8,47,82,.08)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);flex:0 0 auto}.brand img{width:70px;height:auto;display:block}.brand-name{font-family:"Arial Narrow",Inter,"Noto Sans JP",sans-serif;font-size:1.03rem;font-weight:800;letter-spacing:.085em;white-space:nowrap}.main-nav{display:flex;align-items:center;gap:27px}.main-nav a{text-decoration:none;font-size:.9rem;font-weight:720;color:#254255;position:relative}.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--teal);transition:.25s}.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0}.lang-switch{display:flex;align-items:center;gap:5px;border-left:1px solid var(--line);padding-left:20px}.lang-switch a{padding:.38rem .46rem;border-radius:6px}.lang-switch a[aria-current="true"]{background:var(--pale);color:var(--navy)}.menu-toggle{display:none;border:0;background:transparent;color:var(--navy);padding:8px;cursor:pointer}.menu-toggle span{display:block;width:25px;height:2px;background:currentColor;margin:5px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:7px;padding:.86rem 1.15rem;text-decoration:none;font-size:.83rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase;transition:.22s;border:1px solid transparent}.btn-primary{background:var(--blue);color:white;box-shadow:0 12px 28px rgba(15,111,164,.24)}.btn-primary:hover{background:var(--navy-2);transform:translateY(-2px)}.btn-ghost{border-color:rgba(255,255,255,.7);color:white;background:rgba(0,0,0,.08)}.btn-ghost:hover{background:white;color:var(--navy)}.hero{min-height:730px;position:relative;display:grid;align-items:end;color:white;isolation:isolate;background:#092c4a}.hero::before{content:"";position:absolute;inset:0;background:url('../images/hero-port.jpg') center/cover no-repeat;z-index:-2}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,28,50,.93) 0%,rgba(4,35,60,.77) 42%,rgba(4,30,49,.2) 78%),linear-gradient(0deg,rgba(3,25,43,.55),transparent 55%);z-index:-1}.hero-inner{padding:120px 0 88px;display:grid;grid-template-columns:minmax(0,730px) 1fr;gap:50px;align-items:end}.hero h1{color:white;margin:.9rem 0 1.25rem}.hero-copy{font-size:1.13rem;color:#dce9ef;max-width:650px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}.hero-aside{justify-self:end;max-width:300px;padding:24px;border-left:1px solid rgba(255,255,255,.38);background:rgba(6,34,56,.24);backdrop-filter:blur(8px)}.hero-aside strong{display:block;font-size:1.65rem;color:white}.hero-aside span{font-size:.85rem;color:#d5e6ed}.trust-strip{margin-top:-1px;background:white;border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-item{padding:27px 24px;border-right:1px solid var(--line);display:flex;gap:13px;align-items:center}.trust-item:first-child{border-left:1px solid var(--line)}.trust-item strong{display:block;color:var(--navy);font-size:1rem}.trust-item span{display:block;color:var(--muted);font-size:.78rem}.section-head{display:grid;grid-template-columns:1fr minmax(320px,520px);gap:50px;align-items:end;margin-bottom:46px}.section-head h2{margin-top:.75rem}.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,90px);align-items:center}.image-frame{position:relative}.image-frame img{width:100%;aspect-ratio:1.35/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}.image-frame::after{content:"";position:absolute;right:-18px;bottom:-18px;width:38%;height:43%;border:2px solid var(--teal);border-radius:14px;z-index:-1}.stat-note{position:absolute;left:-28px;bottom:28px;background:white;padding:20px 24px;border-radius:12px;box-shadow:var(--shadow);max-width:220px}.stat-note strong{font-size:1.6rem;color:var(--navy);display:block}.copy-stack>*+*{margin-top:1.25rem}.service-grid{grid-template-columns:repeat(4,1fr)}.service-card{padding:27px 24px;border:1px solid var(--line);border-radius:14px;background:white;min-height:230px;display:flex;flex-direction:column;transition:.25s}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}.service-card .icon-wrap{width:48px;height:48px;border-radius:12px;background:#e9f4f7;color:var(--blue);display:grid;place-items:center;margin-bottom:23px}.service-card h3{margin-bottom:.65rem}.service-card p{font-size:.91rem;color:var(--muted)}.service-card a{margin-top:auto;padding-top:1rem;color:var(--blue);font-weight:800;font-size:.78rem;text-decoration:none;text-transform:uppercase;letter-spacing:.04em}.service-feature{grid-column:span 2;background:var(--navy);color:white;border-color:var(--navy);position:relative;overflow:hidden}.service-feature h3{color:white}.service-feature p{color:#cfe0e8}.service-feature::after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-80px;bottom:-95px}.process{background:var(--pale)}.process-grid{grid-template-columns:repeat(3,1fr)}.step{padding:34px;border-top:3px solid var(--teal);background:white}.step-no{font-size:.75rem;letter-spacing:.15em;font-weight:800;color:var(--teal)}.step h3{margin:.6rem 0}.step p{color:var(--muted);font-size:.94rem}.global-section{background:var(--navy);color:white;position:relative;overflow:hidden}.global-section h2,.global-section h3{color:white}.global-section .lead,.global-section .muted{color:#c9dce5}.global-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.global-photo{border-radius:var(--radius);overflow:hidden;position:relative}.global-photo img{width:100%;height:520px;object-fit:cover}.global-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,47,82,.55),transparent 70%)}.office-tabs{margin-top:34px}.tab-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.tab-button{border:1px solid rgba(255,255,255,.28);background:transparent;color:white;padding:.65rem .9rem;border-radius:999px;cursor:pointer;font-weight:700}.tab-button[aria-selected="true"]{background:white;color:var(--navy)}.tab-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:25px;border-radius:14px}.tab-panel[hidden]{display:none}.tab-panel h3{margin-bottom:.5rem}.contact-line{display:flex;align-items:flex-start;gap:.6rem;margin-top:.65rem;color:#dcebf0}.contact-line a{text-decoration:none}.contact-line a:hover{text-decoration:underline}.cta-band{background:linear-gradient(110deg,#0f6fa4,#1595aa);color:white}.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:40px}.cta-grid h2{color:white;max-width:760px}.cta-grid p{color:#e2f3f6;margin-top:.75rem}.site-footer{background:#061f35;color:#c8dae4;padding:64px 0 25px}.footer-grid{display:grid;grid-template-columns:1.25fr repeat(3,.8fr);gap:44px}.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}.footer-logo{background: #ffffff;;width:76px;height:auto}.footer-brand span{color:white;font-family:"Arial Narrow",Inter,"Noto Sans JP",sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:.09em;white-space:nowrap}.site-footer h3{font-size:.95rem;color:white;margin-bottom:1rem}.site-footer a{color:#d7e6ec;text-decoration:none}.site-footer a:hover{text-decoration:underline}.footer-list{list-style:none;padding:0;display:grid;gap:.55rem;font-size:.88rem}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:21px;display:flex;justify-content:space-between;gap:20px;font-size:.78rem}.page-hero{position:relative;min-height:430px;display:grid;align-items:end;color:white;isolation:isolate;background:#082f52}.page-hero::before{content:"";position:absolute;inset:0;background:var(--hero-image) center/cover no-repeat;z-index:-2}.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,51,.9),rgba(5,32,54,.35));z-index:-1}.page-hero-inner{padding:110px 0 66px;max-width:760px}.page-hero h1{color:white;margin:.7rem 0 1rem;font-size:clamp(2.5rem,4.5vw,4.5rem)}.breadcrumbs{font-size:.8rem;color:#d7e8ef}.breadcrumbs a{text-decoration:none}.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}.quote-card{background:var(--pale);border-left:4px solid var(--teal);padding:32px;border-radius:0 14px 14px 0}.quote-card p{font-size:1.15rem;color:var(--navy)}.values-grid{grid-template-columns:repeat(3,1fr)}.value-card{border-top:1px solid var(--line);padding-top:24px}.value-card .icon-wrap{color:var(--teal);margin-bottom:14px}.timeline{position:relative;margin-top:46px}.timeline::before{content:"";position:absolute;left:95px;top:0;bottom:0;width:1px;background:var(--line)}.timeline-item{display:grid;grid-template-columns:70px 1fr;gap:55px;padding:0 0 36px}.timeline-year{color:var(--blue);font-weight:800;font-size:1.1rem;text-align:right}.timeline-body{position:relative;padding-left:28px}.timeline-body::before{content:"";position:absolute;left:-11px;top:.4rem;width:13px;height:13px;border-radius:50%;background:var(--teal);border:3px solid white;box-shadow:0 0 0 1px var(--teal)}.timeline-body h3{margin-bottom:.45rem}.timeline-body p{color:var(--muted)}.gallery{grid-template-columns:1.2fr .8fr .8fr}.gallery img{width:100%;height:330px;object-fit:cover;border-radius:14px}.service-detail{display:grid;grid-template-columns:.75fr 1.25fr;gap:55px;padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:110px}.service-detail:first-of-type{border-top:0}.service-visual img{width:100%;height:300px;object-fit:cover;border-radius:14px}.service-label{display:flex;align-items:center;gap:14px;color:var(--blue);margin-bottom:1rem}.service-label .icon-wrap{width:48px;height:48px;border-radius:12px;background:#e9f4f7;display:grid;place-items:center}.service-content h2{font-size:clamp(1.8rem,2.7vw,2.65rem);margin-bottom:1rem}.service-content p{color:var(--muted)}.service-points{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin-top:1.4rem;padding:0;list-style:none}.service-points li{display:flex;gap:.55rem;font-size:.91rem;color:#385264}.service-points .icon{width:1.1rem;color:var(--teal);margin-top:.2rem}.notice{background:#f6f0e7;border:1px solid #ead8ba;padding:24px;border-radius:12px}.faq details{border-top:1px solid var(--line);padding:20px 0}.faq summary{cursor:pointer;font-weight:800;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary::after{content:"+";font-size:1.4rem}.faq details[open] summary::after{content:"–"}.faq details p{padding-top:12px;color:var(--muted)}.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.is-visible{opacity:1;transform:none}}
@layer utilities{.bg-pale{background:var(--pale)}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-1{margin-bottom:1rem}.text-white{color:white!important}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
@media(max-width:980px){.topbar{display:none}.menu-toggle{display:block}.main-nav{position:absolute;top:78px;left:0;right:0;background:white;display:none;flex-direction:column;align-items:stretch;padding:24px 30px 30px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.main-nav.open{display:flex}.lang-switch{border-left:0;padding-left:0;padding-top:10px}.hero{min-height:650px}.hero-inner{grid-template-columns:1fr}.hero-aside{justify-self:start}.trust-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.intro-grid,.global-grid,.story-grid{grid-template-columns:1fr}.image-frame{max-width:720px}.section-head{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.service-detail{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery img:first-child{grid-column:span 2}}
@media(max-width:640px){.container{width:min(var(--max),calc(100% - 28px))}.nav-wrap{height:68px}.brand img{width:58px}.brand{gap:9px}.brand-name{font-size:.88rem;letter-spacing:.065em}.main-nav{top:68px}.hero{min-height:680px}.hero-inner{padding:88px 0 55px}.hero-aside{display:none}.hero h1{font-size:clamp(2.35rem,13vw,3.5rem)}.hero-actions{align-items:stretch;flex-direction:column}.btn{width:100%}.trust-grid{grid-template-columns:1fr 1fr}.trust-item{padding:18px 12px}.trust-item .icon{display:none}.section{padding:70px 0}.section-head{gap:18px;margin-bottom:34px}.service-grid,.process-grid,.values-grid,.footer-grid{grid-template-columns:1fr}.service-feature{grid-column:span 1}.stat-note{position:relative;left:auto;bottom:auto;margin:-28px 18px 0}.global-photo img{height:360px}.cta-grid,.footer-bottom{align-items:flex-start;flex-direction:column}.timeline::before{left:17px}.timeline-item{grid-template-columns:1fr;gap:7px;padding-left:42px}.timeline-year{text-align:left}.timeline-body{padding-left:0}.timeline-body::before{left:-31px}.gallery{grid-template-columns:1fr}.gallery img,.gallery img:first-child{grid-column:auto;height:250px}.service-points{grid-template-columns:1fr}.page-hero{min-height:370px}.page-hero-inner{padding:90px 0 50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.service-card{transition:none}}

/* Root-level contact pages */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.contact-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 10px 30px rgba(8,47,82,.06)}.contact-card h3{margin:.65rem 0 .35rem}.contact-card .company-name{font-weight:800;color:var(--navy);margin-bottom:1rem}.contact-card address{font-style:normal;color:var(--muted);margin-bottom:1.4rem}.contact-details{list-style:none;padding:0;display:grid;gap:.8rem}.contact-details li{display:grid;gap:.18rem}.contact-details strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.contact-details a{color:var(--blue);font-weight:700;text-decoration:none;overflow-wrap:anywhere}.contact-details a:hover{text-decoration:underline}.enquiry-list{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.65rem;color:var(--navy)}@media(max-width:980px){.contact-grid{grid-template-columns:1fr 1fr}.contact-card:last-child{grid-column:1/-1}}@media(max-width:640px){.contact-grid{grid-template-columns:1fr}.contact-card:last-child{grid-column:auto}}

/* 2026-06 hero and loading reliability fixes
   Hero images are defined in the external stylesheet so restrictive CSP rules
   cannot block an inline custom-property value. */
.hero,
.page-hero {
  background-color: #082f52;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero {
  background-image:
    linear-gradient(90deg, rgba(4,28,50,.93) 0%, rgba(4,35,60,.77) 42%, rgba(4,30,49,.2) 78%),
    linear-gradient(0deg, rgba(3,25,43,.55), transparent 55%),
    url('../images/hero-port.jpg');
}

.page-hero,
.page-hero--about,
.page-hero--contact {
  background-image:
    linear-gradient(90deg, rgba(5,30,51,.90), rgba(5,32,54,.35)),
    url('../images/global-port.jpg');
}

.page-hero--services {
  background-image:
    linear-gradient(90deg, rgba(5,30,51,.90), rgba(5,32,54,.35)),
    url('../images/hero-port.jpg');
}

/* Disable the old pseudo-element image layers; the section itself now owns
   the complete, dependable background stack. */
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
  content: none;
  display: none;
}

/* Progressive enhancement: content remains readable even when JavaScript,
   IntersectionObserver or an asset request is unavailable. */
.reveal,
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Layout stability fixes found during desktop and mobile rendering QA. */
.gallery {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr);
}

.gallery > img {
  min-width: 0;
}

@media (max-width: 980px) {
  .gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .image-frame::after {
    right: 0;
  }
}

/* 2026-06 caption frame alignment fix
   Place the teal frame directly on the "Since 1987" caption so it cannot
   drift away from the text box at desktop, tablet or mobile widths. */
.image-frame::after {
  content: none;
  display: none;
}

.stat-note {
  z-index: 2;
  border: 2px solid var(--teal);
}

/* 2026-06 Regional Contacts image selector
   The English and Japanese homepages share these local, responsive assets. */
.global-photo {
  background: #061f35;
  min-height: 360px;
}

.global-photo img[data-regional-image] {
  transition: opacity .24s ease, transform .34s ease;
  will-change: opacity, transform;
}

.global-photo img[data-regional-image].is-changing {
  opacity: .18;
  transform: scale(1.015);
}

.global-photo-caption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(6,31,53,.78);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.tab-button {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.tab-button:hover {
  border-color: rgba(255,255,255,.7);
  transform: translateY(-1px);
}

.tab-button:focus-visible {
  outline: 3px solid #8edce7;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .global-photo {
    min-height: 260px;
  }

  .global-photo-caption {
    left: 14px;
    bottom: 14px;
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-photo img[data-regional-image],
  .tab-button {
    transition: none;
  }
}