

.nagare-hero img,
.nagare-about img,
.nagare-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nagare-hero h1,
.nagare-about h2,
.nagare-services h2,
.nagare-gallery h2,
.nagare-voices blockquote,
.nagare-contact h2 {
  font-family: var(--display);
  line-height: 1.25;
  font-weight: 700;
}

.nagare-wrap { max-width: 1140px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }
.nagare-kicker { font-size: .72rem; letter-spacing: .36em; color: var(--silver); font-family: var(--sans); }

.nagare-btn {
  display: inline-block; padding: .95em 2.6em; border-radius: 999px;
  font-size: .8rem; letter-spacing: .22em; text-decoration: none; transition: .35s;
}
.nagare-btn-fill { background: var(--navy); color: var(--paper); }
.nagare-btn-fill:hover { background: var(--navy-deep); }
.nagare-btn-line { border: 1.5px solid currentColor; color: var(--navy); }
.nagare-btn-line:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }

.nagare-sec { position: relative; }
.nagare-divider { position: absolute; left: 0; width: 100%; line-height: 0; z-index: 1; }
.nagare-divider svg { display: block; width: 100%; height: clamp(60px, 9vw, 130px); }
.nagare-divider.nagare-bot { bottom: -1px; transform: translateY(99%); }

.nagare-hero {
  position: relative; min-height: 92svh; display: flex; align-items: center;
  background: linear-gradient(160deg, var(--navy), var(--navy-deep)); color: var(--paper);
  font-family: var(--sans);
  overflow: hidden; padding-block: clamp(80px, 12vh, 140px);
}
.nagare-hero .nagare-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; mix-blend-mode: screen; }
.nagare-hero .nagare-b1 { width: 46vw; height: 46vw; background: radial-gradient(circle, var(--silver), transparent 70%); top: -12%; right: -8%; }
.nagare-hero .nagare-b2 { width: 38vw; height: 38vw; background: radial-gradient(circle, var(--silver), transparent 70%); bottom: -14%; left: -10%; }
.nagare-hero .nagare-inner { position: relative; z-index: 2; }
.nagare-hero h1 { font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 700; line-height: 1.12; color: var(--paper); }
.nagare-hero p { margin-top: 1.4rem; max-width: 34ch; opacity: .92; font-size: clamp(.95rem, 1.6vw, 1.1rem); }
.nagare-hero .nagare-actions { margin-top: 2.2rem; display: flex; gap: 14px; flex-wrap: wrap; }
.nagare-hero .nagare-btn-line { color: var(--paper); }
.nagare-hero .nagare-kicker { color: var(--silver); }

.nagare-about {
  position: relative; background: var(--paper); color: var(--ink);
  font-family: var(--sans);
  padding-block: clamp(110px, 16vw, 200px);
}
.nagare-about .nagare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.nagare-about .nagare-imgwrap { aspect-ratio: 5/6; border-radius: 22px; overflow: hidden; transform: rotate(-2.5deg); }
.nagare-about .nagare-imgwrap img { transform: rotate(2.5deg) scale(1.12); }
.nagare-about h2 { font-size: clamp(1.8rem, 4.4vw, 3.2rem); margin: 1rem 0 1.4rem; color: var(--ink); }
.nagare-about p { color: var(--silver-2); max-width: 44ch; }
@media (max-width: 760px) {
  .nagare-about .nagare-grid { grid-template-columns: 1fr; }
  .nagare-about .nagare-imgwrap { order: -1; aspect-ratio: 4/3; transform: rotate(-1.5deg); }
}

.nagare-services {
  position: relative; background: var(--navy-deep); color: var(--paper);
  font-family: var(--sans);
  padding-block: clamp(120px, 16vw, 200px);
}
.nagare-services .nagare-kicker { color: var(--silver); }
.nagare-services h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); margin: 1rem 0 clamp(28px, 5vw, 56px); color: var(--paper); }
.nagare-services .nagare-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.nagare-services .nagare-step { position: relative; padding-top: clamp(20px, 4vw, 40px); }
.nagare-services .nagare-step .nagare-dot {
  width: 54px; height: 54px; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.3rem; margin-bottom: 1.2rem;
}
.nagare-services .nagare-step h3 { font-size: 1.25rem; margin-bottom: .6rem; font-family: var(--display); font-weight: 700; }
.nagare-services .nagare-step p { opacity: .78; font-size: .92rem; }
.nagare-services .nagare-step:not(:last-child)::after {
  content: ""; position: absolute; top: calc(clamp(20px, 4vw, 40px) + 27px); left: 54px; right: -20px;
  height: 2px; background: repeating-linear-gradient(90deg, var(--navy) 0 8px, transparent 8px 16px); opacity: .5;
}
@media (max-width: 680px) {
  .nagare-services .nagare-flow { grid-template-columns: 1fr; }
  .nagare-services .nagare-step:not(:last-child)::after { display: none; }
}

.nagare-gallery {
  position: relative; background: var(--paper-2); color: var(--ink);
  font-family: var(--sans);
  padding-block: clamp(120px, 16vw, 200px);
}
.nagare-gallery h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); margin-bottom: clamp(28px, 4vw, 48px); text-align: center; color: var(--ink); }
.nagare-gallery .nagare-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(14px, 2.4vw, 26px); }
.nagare-gallery figure { border-radius: 22px; overflow: hidden; aspect-ratio: 3/4; }
.nagare-gallery figure:first-child { aspect-ratio: auto; }
.nagare-gallery figure img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.nagare-gallery figure:hover img { transform: scale(1.06); }
@media (max-width: 680px) {
  .nagare-gallery .nagare-row { grid-template-columns: 1fr 1fr; }
  .nagare-gallery figure:first-child { grid-column: 1/3; aspect-ratio: 16/10; }
}

.nagare-voices {
  position: relative; background: linear-gradient(120deg, var(--silver), var(--navy)); color: var(--paper);
  font-family: var(--sans);
  padding-block: clamp(120px, 16vw, 190px); text-align: center;
}
.nagare-voices blockquote {
  font-family: var(--display); font-size: clamp(1.5rem, 4.4vw, 3rem); line-height: 1.55;
  max-width: 22ch; margin-inline: auto;
}
.nagare-voices cite { display: block; margin-top: 1.8rem; font-style: normal; font-size: .76rem; letter-spacing: .24em; opacity: .85; }

.nagare-contact {
  position: relative; background: var(--paper); color: var(--ink);
  font-family: var(--sans);
  padding-block: clamp(120px, 16vw, 200px) clamp(60px, 9vw, 110px); text-align: center;
}
.nagare-contact h2 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 1.2rem; color: var(--ink); }
.nagare-contact p { color: var(--silver-2); margin-bottom: 2rem; }

.nagare-hero h1,
.nagare-about h2,
.nagare-services h2,
.nagare-voices blockquote,
.nagare-contact h2 {
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-feature-settings: "palt";
  hanging-punctuation: allow-end;
}
