/* AQUATECH - full-page design sample 2026-10-24
   User-confirmed hero typography and logo/subcopy transforms are preserved below.
   Photos: user-supplied original site photos only. No AI imagery. */
:root {
  --nav-h: 94px;
  --frame: clamp(24px, 5.2vw, 92px);
  --ink: #26333d;
  --muted: #697984;
  --navy: #192c37;
  --blue: #315d75;
  --paper: #f6f7f6;
  --rule: #dbe0e2;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior:smooth; scroll-padding-top: 90px; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic", sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid #78c1e3; outline-offset:4px; }
button { font:inherit; }
.container { width:min(1240px, calc(100% - var(--frame) - var(--frame))); margin-inline:auto; }
.section-space { padding:clamp(96px, 11vw, 165px) 0; }

/* Transparent navigation over the actual hero photograph; white after the hero.
   Only the header changes state. Hero's user-adjusted logo/text positions remain untouched. */
.site-header {
  position:fixed; inset:0 0 auto; z-index:50;
  color:#fff; background:transparent;
  box-shadow:none;
  transition:background-color .35s ease,box-shadow .35s ease,color .35s ease;
}
.site-header.is-scrolled {
  color:#35434B;
  background:#fff;
  box-shadow:0 1px 0 rgba(30,45,55,.10),0 4px 22px rgba(22,36,46,.06);
}
.header-inner {
  min-height:var(--nav-h);
  width:min(1520px, calc(100% - var(--frame) - var(--frame)));
  margin:auto; display:flex; align-items:center;
  justify-content:space-between; gap:30px;
}
.site-brand { display:inline-flex; align-items:center; gap:15px; min-width:0; white-space:nowrap; }
/* Both files have exactly the same original outline; swap colors without reshaping. */
.brand-mark { position:relative; width:59px; flex:0 0 59px; aspect-ratio:1734 / 1437; }
.brand-emblem { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .32s ease; }
.brand-emblem-white { opacity:1; }
.brand-emblem-original { opacity:0; }
.site-header.is-scrolled .brand-emblem-white { opacity:0; }
.site-header.is-scrolled .brand-emblem-original { opacity:1; }
.brand-name {
  font-family:"Noto Sans JP","Noto Sans CJK JP","Yu Gothic",sans-serif;
  font-size:clamp(16px, 1.45vw, 21px);
  font-weight:500; letter-spacing:.06em;
}
.main-nav { display:flex; align-items:center; gap:clamp(25px,2.7vw,44px); }
.main-nav a {
  color:inherit; position:relative; display:flex;
  flex-direction:column; align-items:center; gap:5px;
  text-align:center; white-space:nowrap;
  padding:11px 0 9px; text-decoration:none;
}
.main-nav .nav-jp {
  font-family:"Noto Sans CJK JP","Yu Gothic",sans-serif;
  font-weight:400; font-size:14px; letter-spacing:.035em; line-height:1.35;
}
.main-nav .nav-en {
  font-family:Arial,Helvetica,sans-serif; font-weight:400;
  font-size:10px; letter-spacing:.14em; line-height:1.2;
  color:rgba(255,255,255,.79);
}
.site-header.is-scrolled .main-nav .nav-en { color:#687B87; }
.main-nav a::after {
  content:""; position:absolute; bottom:0; left:50%; width:0; height:1px;
  background:currentColor; transition:width .3s ease,left .3s ease;
}
.main-nav a:hover::after,.main-nav a:focus-visible::after { width:100%; left:0; }
.main-nav a:hover,.main-nav a:focus-visible { color:#5CC0E6; }
.site-header.is-scrolled .main-nav a:hover,
.site-header.is-scrolled .main-nav a:focus-visible { color:#007AA7; }
.main-nav a:hover .nav-en,.main-nav a:focus-visible .nav-en { color:inherit; }
.menu-toggle { display:none; }

/* Main visual */
.hero { position:relative; height:100svh; min-height:630px; background:#142633; isolation:isolate; color:#fff; overflow:hidden; }
.hero-slides, .hero-shade { position:absolute; inset:0; }
.hero-slide { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; object-position:center 22%; opacity:0; transition:opacity 1.65s ease; filter:saturate(.85) contrast(.93) brightness(.9); }
.hero-slide.is-active { opacity:1; }
.hero-shade { pointer-events:none; background:linear-gradient(180deg,rgba(7,17,27,.50) 0%,rgba(7,17,27,.19) 30%,rgba(7,17,27,.32) 67%,rgba(7,17,27,.41) 100%), linear-gradient(90deg,rgba(7,16,25,.07),rgba(7,16,25,.02) 55%,rgba(7,16,25,.09)); }
/* Exact values from the user's last hand-adjusted CSS */
.hero-message {
  position: absolute;
  top: 57%;
  left: 50%;
  width: min(92%, 1000px);
  color: #fff;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.hero-enter { width:100%; display:flex; flex-direction:column; align-items:center; }
.hero-emblem {
  width: 54px;
  height: auto;
  display: block;
  margin: 0 auto 22px;
  transform: translate(-30px, 14px);
}
.hero-message h1 {
  margin: 0;
  font-family: "Noto Serif CJK JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(39px, 4.35vw, 70px);
  line-height: 1.53;
  font-weight: 400;
  letter-spacing: .095em;
}
.hero-message h1 span { display:block; }
.hero-subcopy {
  display: inline-block;
  margin: 22px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 1.13vw, 16px);
  letter-spacing: .19em;
  line-height: 1.7;
  text-align: center;
  transform: translate(-0.91em, -10px);
}
/* First-view entrance: two Japanese lines, followed by the English subtitle.
   Transform only the child spans/wrapper: the hand-adjusted .hero-message,
   .hero-message h1 and .hero-subcopy positions are deliberately untouched. */
@keyframes heroLineRise {
  from { opacity:0; transform:translate3d(0,28px,0); filter:blur(3px); }
  to   { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
}
@keyframes heroSubtitleRise {
  from { opacity:0; translate:0 17px; }
  to   { opacity:1; translate:0 0; }
}
@keyframes headerQuietEntrance {
  from { opacity:0; translate:0 -11px; }
  to   { opacity:1; translate:0 0; }
}
.hero-enter-2 { opacity:1; }
.hero-message h1 span {
  opacity:0;
  animation:heroLineRise 1.18s cubic-bezier(.22,1,.36,1) .36s both;
}
.hero-message h1 span + span { animation-delay:.65s; }
.hero-enter-3 {
  opacity:0;
  animation:heroSubtitleRise 1.10s cubic-bezier(.22,1,.36,1) 1.04s forwards;
}
.site-header .header-inner {
  animation:headerQuietEntrance .9s cubic-bezier(.22,1,.36,1) .12s both;
}
.slide-controls {
  animation:heroSubtitleRise .85s ease 1.55s both;
}

.slide-controls { position:absolute; z-index:4; right:var(--frame); bottom:clamp(25px,3.7vw,54px); display:flex; align-items:center; gap:17px; opacity:.83; }
.slide-dots { display:flex; gap:11px; align-items:center; }
.slide-dot { background:transparent; border:0; width:23px; height:22px; padding:0; cursor:pointer; display:grid; place-items:center; }
.slide-dot::after { content:""; display:block; width:23px; height:2px; background:rgba(255,255,255,.36); transition:background .3s ease; }
.slide-dot:hover::after, .slide-dot.is-active::after { background:#fff; }
.slide-pause { background:transparent; border:1px solid rgba(255,255,255,.45); border-radius:50%; width:28px; height:28px; font-size:12px; color:white; cursor:pointer; }
.slide-pause:hover { background:rgba(255,255,255,.15); }

/* Typography for lower sections */
.eyebrow { display:flex; align-items:center; gap:16px; margin:0 0 30px; font-family:Georgia,serif; color:var(--blue); font-size:11px; letter-spacing:.25em; font-weight:600; }
.eyebrow-rule { width:34px; height:1px; background:#88a8b7; display:block; }
.section-title { margin:0 0 34px; font-size:clamp(32px, 3.1vw, 48px); font-family:"Noto Serif CJK JP","Yu Mincho",serif; font-weight:400; line-height:1.75; letter-spacing:.075em; }
.body-copy { font-size:15px; letter-spacing:.025em; line-height:2.35; margin:0 0 16px; max-width:490px; }
.text-link { display:inline-flex; align-items:center; gap:40px; border-bottom:1px solid var(--ink); margin-top:35px; padding:0 4px 14px 0; font-size:13px; letter-spacing:.08em; transition:gap .28s ease; }
.text-link:hover { gap:50px; }
.text-link span { font-size:20px; line-height:1; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:43px; }
.section-heading .section-title { margin-bottom:0; }
.heading-note { margin:0 0 4px; color:var(--muted); font-size:13px; line-height:2.1; text-align:right; letter-spacing:.04em; }

/* About */
.about-section { background:#fff; }
.about-layout { display:grid; grid-template-columns: .91fr 1.09fr; gap:clamp(56px,9vw,140px); align-items:center; }
.about-visual { min-width:0; }
.photo-surface { aspect-ratio: 1.20; overflow:hidden; background:#dce2e4; }
.photo-surface img { width:100%; height:100%; object-fit:cover; object-position:45% center; filter:saturate(.78) contrast(.92); }
.photo-caption { display:block; text-align:right; margin-top:14px; color:#89969e; font-size:10px; letter-spacing:.2em; font-family:Georgia,serif; }

/* Business */
.service-section { background:var(--paper); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.service-card { min-width:0; background:#fff; }
.image-frame { overflow:hidden; aspect-ratio:1.28; background:#d7dcde; }
.image-frame img { width:100%; height:100%; object-fit:cover; filter:saturate(.79) contrast(.93); transition:transform .9s cubic-bezier(.19,1,.22,1); }
.service-card:hover .image-frame img { transform:scale(1.045); }
.service-card-info { padding:27px 27px 35px; }
.card-number { font-size:11px; font-family:Georgia,serif; color:#8e9da6; letter-spacing:.08em; }
.service-card h3 { font-family:"Noto Serif CJK JP",serif; font-size:21px; font-weight:500; line-height:1.4; letter-spacing:.06em; margin:16px 0 16px; }
.service-card p { margin:0; color:#667680; font-size:13px; line-height:2; }

/* Statement dark photo banner */
.statement-section { position:relative; height:clamp(420px,43vw,600px); overflow:hidden; isolation:isolate; color:white; background:#182a33; }
.statement-photo { position:absolute; inset:0; background-image:url('../assets/images/banner.webp'); background-size:cover; background-position:center 56%; filter:saturate(.65) contrast(.88); transform:scale(1.025); }
.statement-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,32,45,.88),rgba(14,32,45,.56)); }
.statement-inner { height:100%; position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.statement-kicker { font-family:Georgia,serif; letter-spacing:.25em; font-size:11px; margin:0 0 28px; color:#c8d4da; }
.statement-text { font-size:clamp(36px,4.0vw,58px); line-height:1.8; font-weight:400; letter-spacing:.08em; font-family:"Noto Serif CJK JP",serif; margin:0; }

/* Works */
.works-section { background:#fff; }
.works-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:34px 30px; }
.work-tile { margin:0; min-width:0; }
.work-photo { aspect-ratio:1.55; overflow:hidden; background:#e0e3e4; }
.work-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(.93); transition:transform .95s cubic-bezier(.19,1,.22,1); }
.work-tile:hover img { transform:scale(1.045); }
.work-tile figcaption { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 3px 0; }
.work-tile figcaption span { font-family:Georgia,serif; font-size:11px; color:#87959e; letter-spacing:.1em; }
.work-tile figcaption strong { font-family:"Noto Serif CJK JP",serif; font-weight:400; font-size:17px; letter-spacing:.08em; }
.work-tile-large .work-photo { aspect-ratio:1.55; }
.work-tile-wide .work-photo { aspect-ratio:1.55; }
.works-note { font-size:11px; margin:45px 0 0; line-height:1.8; color:#89959b; }

/* Company */
.company-section { background:var(--paper); }
.company-layout { display:grid; grid-template-columns:1fr 1.42fr; gap:clamp(50px,8vw,120px); align-items:start; }
.company-aside { line-height:2; color:var(--muted); font-size:13px; margin:0; }
.company-table { margin:0; border-top:1px solid #cdd5d9; }
.company-table div { border-bottom:1px solid #cdd5d9; display:grid; grid-template-columns:130px 1fr; gap:24px; padding:26px 0; }
.company-table dt { font-size:13px; font-weight:600; }
.company-table dd { margin:0; font-size:14px; line-height:1.9; }
.company-table small { display:block; font-size:11px; color:#89949a; }
.company-table .pending { color:#9ba8ac; }

/* Contact */
.contact-section { background:#e5eaec; text-align:center; }
.contact-layout { display:flex; flex-direction:column; align-items:center; }
.contact-section .eyebrow { margin-bottom:36px; }
.contact-section h2 { font-family:"Noto Serif CJK JP",serif; font-size:clamp(29px,3vw,44px); font-weight:400; letter-spacing:.075em; line-height:1.85; margin:0 0 30px; }
.contact-section p:not(.eyebrow) { margin:0; color:#66777f; font-size:13px; letter-spacing:.025em; }
.contact-accent { margin-top:50px; width:60px; height:1px; background:#8198a4; }
.site-footer { background:#192a35; color:#fff; padding:35px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { display:flex; align-items:center; gap:13px; font-family:"Noto Serif CJK JP",serif; letter-spacing:.075em; font-size:15px; }
.footer-brand img { width:40px; height:auto; }
.site-footer small { color:#9cabb4; font-family:Georgia,serif; letter-spacing:.18em; font-size:11px; }

/* Quiet scroll entrance inspired by the timing / stagger of the reference site.
   Do not hide content unless JavaScript and IntersectionObserver are available. */
.motion-enabled .reveal {
  opacity:0;
  transform:translate3d(0,31px,0);
  transition:
    opacity 1.12s cubic-bezier(.22,1,.36,1),
    transform 1.12s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0s);
}
.motion-enabled .reveal.is-visible { opacity:1; transform:translate3d(0,0,0); }
.motion-enabled .reveal-delayed { --reveal-delay:.17s; }
.motion-enabled .reveal-delayed-2 { --reveal-delay:.34s; }

/* An entire text group is not faded as one slab; its parts enter in sequence. */
.motion-enabled .reveal.has-motion-steps { opacity:1; transform:none; }
.motion-enabled .reveal.has-motion-steps .motion-step {
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:
    opacity .98s cubic-bezier(.22,1,.36,1),
    transform 1.07s cubic-bezier(.22,1,.36,1);
}
.motion-enabled .reveal.has-motion-steps.is-visible .motion-step {
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:calc(.045s + var(--motion-index,0) * .13s);
}

/* Photographs appear a little more slowly, as if the frame is gently opening. */
.motion-enabled .reveal.motion-photo {
  clip-path:inset(0 0 10% 0);
  transition:
    clip-path 1.35s cubic-bezier(.22,1,.36,1),
    opacity 1.08s cubic-bezier(.22,1,.36,1),
    transform 1.28s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0s);
}
.motion-enabled .reveal.motion-photo.is-visible { clip-path:inset(0 0 0 0); }

/* The wide construction photograph settles once on entry; no continuous motion. */
.motion-enabled .statement-photo {
  transform:scale(1.045);
  transition:transform 2.15s cubic-bezier(.22,1,.36,1);
}
.motion-enabled .statement-section.is-visible .statement-photo { transform:scale(1); }

/* The small line in each English label quietly grows when text arrives. */
.motion-enabled .has-motion-steps .eyebrow-rule {
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.motion-enabled .has-motion-steps.is-visible .eyebrow-rule {
  transform:scaleX(1); transition-delay:.46s;
}

@media (max-width:650px) {
  .motion-enabled .reveal-delayed,
  .motion-enabled .reveal-delayed-2 { --reveal-delay:.08s; }
  .motion-enabled .reveal.has-motion-steps.is-visible .motion-step {
    transition-delay:calc(.025s + var(--motion-index,0) * .105s);
  }
}


@media(max-width: 1050px) {
  :root { --nav-h:76px; }
  .main-nav { gap:17px; }
  .main-nav a { font-size:12px; }
  .brand-mark { width:50px; flex-basis:50px; }
  .brand-name { font-size:17px; }
  .about-layout { gap:55px; }
}
@media(max-width: 900px) {
  :root { --nav-h:76px; --frame:30px; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; flex-shrink:0; }
  .menu-toggle span { width:28px; height:2px; display:block; background:currentColor; transition:transform .25s ease, background-color .35s ease; }
  .site-header.is-menu-open .menu-toggle span:first-child { transform:translateY(4.5px) rotate(45deg); }
  .site-header.is-menu-open .menu-toggle span:last-child { transform:translateY(-4.5px) rotate(-45deg); }
  .main-nav { display:none; position:absolute; top:var(--nav-h); inset-inline:0; flex-direction:column; align-items:stretch; gap:0; padding:20px var(--frame) 32px; background:#fff; box-shadow:0 14px 22px rgba(22,36,46,.09); }
  .site-header.is-menu-open .main-nav { display:flex; }
  .main-nav a { padding:16px 0; font-size:15px; border-bottom:1px solid rgba(38,51,61,.12); }
  .main-nav a::after { display:none; }
  /* Opened mobile menu is white in both header states. */
  .site-header.is-menu-open { background:#fff; color:#35434B; box-shadow:0 4px 22px rgba(22,36,46,.08); }
  .site-header.is-menu-open .brand-emblem-white { opacity:0; }
  .site-header.is-menu-open .brand-emblem-original { opacity:1; }
  .site-header.is-menu-open .main-nav .nav-en { color:#687B87; }
  .about-layout { grid-template-columns:1fr 1fr; gap:35px; }
  .service-grid { gap:15px; }
  .service-card-info { padding:23px 19px 30px; }
  .service-card h3 { font-size:17px; }
  .company-layout { gap:45px; }
}
@media(max-width: 650px) {
  :root { --nav-h:72px; --frame:22px; }
  .header-inner { gap:12px; }
  .site-brand { gap:9px; }
  .brand-mark { width:42px; flex-basis:42px; }
  .brand-name { font-size:15px; letter-spacing:.06em; }
  .hero { min-height:560px; }
  .hero-slide { object-position:36% center; }
  .hero-message { top:52%; width:94%; }
  .hero-emblem { width:43px; margin-bottom:22px; }
  .hero-message h1 { font-size:clamp(27px,7.5vw,40px); line-height:1.7; letter-spacing:.035em; }
  .hero-subcopy { margin-top:22px; font-size:10px; letter-spacing:.065em; }
  .slide-controls { right:22px; bottom:27px; }
  .section-space { padding:83px 0; }
  .eyebrow { margin-bottom:23px; }
  .section-title { font-size:32px; margin-bottom:22px; }
  .about-layout,.company-layout { grid-template-columns:1fr; gap:42px; }
  .photo-surface { aspect-ratio:1.27; }
  .section-heading { align-items:start; flex-direction:column; margin-bottom:29px; gap:14px; }
  .heading-note { text-align:left; }
  .service-grid { grid-template-columns:1fr; gap:25px; }
  .image-frame { aspect-ratio:1.6; }
  .service-card-info { padding:24px; }
  .service-card h3 { font-size:20px; margin:12px 0; }
  .statement-section { height:410px; }
  .statement-text { font-size:34px; }
  .works-grid { grid-template-columns:1fr; gap:30px; }
  .work-photo { aspect-ratio:1.48 !important; }
  .work-tile figcaption { padding-top:13px; }
  .company-table div { grid-template-columns:112px 1fr; gap:10px; padding:21px 0; }
  .contact-section h2 { font-size:28px; }
  .footer-brand span { font-size:12px; }
  .footer-inner { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .hero-enter { opacity:1 !important; translate:0 0 !important; }
  .hero-message h1 span { opacity:1 !important; transform:none !important; filter:none !important; }
  .site-header .header-inner, .slide-controls { animation:none !important; opacity:1 !important; translate:none !important; }
  .reveal, .motion-step { opacity:1 !important; transform:none !important; clip-path:none !important; }
  .eyebrow-rule { transform:none !important; }
  .statement-photo { transform:none !important; }
}

@media (max-width:1050px){.main-nav{gap:15px}.main-nav .nav-jp{font-size:12px}.main-nav .nav-en{font-size:8px}}
@media (max-width:900px){.main-nav a{align-items:flex-start;text-align:left;gap:4px;padding:13px 0}.main-nav .nav-jp{font-size:15px}.main-nav .nav-en{font-size:10px}}