@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&display=swap');

html, body { margin: 0; padding: 0; }
:root {
  --rs-accent: #0E7C86;
  --rs-accent-dark: #0a5b62;
  --rs-accent-light: #5FC8D2;
  --rs-ink: #14181b;
  --rs-surface: #f2f5f6;
  --rs-line: #dfe5e7;
  /* single neutral ramp */
  --rs-gray-1: #f2f5f6;
  --rs-gray-2: #dfe5e7;
  --rs-gray-3: #8b969b;
  --rs-gray-4: #5b676c;
}
.hero { position: relative; }
html, body { background: #fff !important; }
body { color: var(--rs-ink); }
#theme-home { background: #fff; }
a { color: var(--rs-accent); }
a:hover { color: var(--rs-accent-dark); }

/* accent replaces the yellow */
.btn-primary, .btn-primary:visited { background-color: var(--rs-accent) !important; border-color: var(--rs-accent) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .card:hover .btn-primary { background-color: var(--rs-accent-dark) !important; border-color: var(--rs-accent-dark) !important; color: #fff !important; }
@media (max-width: 767px) { .container-xl > div[style*="max-content"] { grid-template-columns: minmax(0,1fr) !important; gap: 16px !important; } }
.rs-card { box-shadow: 0 0 0 1px rgba(20,24,27,.10); }
.rs-slot:hover .rs-card { transform: translateY(-6px); box-shadow: 0 18px 44px -24px rgba(0,0,0,.55), 0 0 0 1px var(--rs-accent); }
.rs-slot:hover .rs-tab { width: 84px; }
.rs-slot:hover .rs-tag { border-color: var(--rs-accent); color: var(--rs-accent); }
.rs-slot:hover .rs-more { background: var(--rs-accent); color: #fff !important; border-top-color: var(--rs-accent); }
.rs-slot:hover .rs-more svg { transform: translateX(5px); }
@media (max-width: 991px) { .rs-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 600px) { .rs-cards { grid-template-columns: minmax(0,1fr) !important; } }

/* header: solid white bar */
.navbar { background-color: #fff !important; border-bottom: 1px solid var(--rs-gray-2); }
.navbar-brand, .navbar-brand span { color: var(--rs-ink) !important; }

/* light footer */
.footer-top { background-color: #fff !important; color: var(--rs-ink) !important; border-top: 1px solid var(--rs-line); }
.footer-top .text-white { color: var(--rs-ink) !important; }
.footer-top a:hover { color: var(--rs-accent) !important; opacity: 1 !important; }
.footer-bottom { background-color: var(--rs-surface) !important; }

/* shared page styles */
@media (max-width: 767px) { .rs-prof { grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; } }
.rs-cta:hover { background: var(--rs-accent-dark) !important; }

.navbar-toggler { background: none !important; border: 0 !important; color: var(--rs-ink) !important; }
.navbar-toggler-icon::before, .navbar-toggler-icon::after { background-color: var(--rs-ink) !important; }

#service .rs-card, section[style*="background:var(--rs-gray-1)"] .rs-card { box-shadow: 0 0 0 1px rgba(20,24,27,.10); color: var(--rs-ink); }

.edit.container-xl { padding-bottom: 96px !important; }

/* hero carousel as the hero's backdrop, not a flow sibling */
.hero .carousel { position: absolute !important; inset: 0 !important; z-index: 0; height: 100% !important; }
.hero .carousel-inner, .hero .carousel-item, .hero .hero-image { height: 100% !important; margin: 0 !important; }
.hero .carousel-item img { width: 100% !important; height: 100% !important; object-fit: cover; }

@media (max-width: 767px) {
  .rs-prov { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  .rs-ck { grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
}

/* accent is limited to: eyebrow labels, CTA/number fills, one hairline rule */
.rs-slot:hover .rs-tag { border-color: rgba(20,24,27,.4) !important; color: var(--rs-ink) !important; }

/* --- 1e hairline index rows --- */

/* --- 1b full-bleed bands --- */
.rs-band:hover img { transform: scale(1.045); }

/* --- 1d css tabs --- */
.rs-tabs input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.rs-tabs .rs-panel { display: none; }
#tb1:checked ~ .rs-tablist label[for="tb1"],
#tb2:checked ~ .rs-tablist label[for="tb2"],
#tb3:checked ~ .rs-tablist label[for="tb3"] { background: var(--rs-accent) !important; color: #fff !important; border-color: var(--rs-accent) !important; }
#tb1:checked ~ .rs-panels .rs-p1,
#tb2:checked ~ .rs-panels .rs-p2,
#tb3:checked ~ .rs-panels .rs-p3 { display: grid; }

@media (max-width: 991px) {
  .rs-sticky { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  .rs-sticky > div:first-child { position: static !important; }
  .rs-band { grid-template-columns: minmax(0,1fr) !important; }
  .rs-band > div { order: 0 !important; }
  .rs-band > div:first-child { min-height: 240px !important; }
  .rs-tabs .rs-panel { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  .rs-e-row { grid-template-columns: 72px minmax(0,1fr) !important; gap: 14px 20px !important; padding: 26px 8px !important; align-items: start !important; }
  .rs-e-row > span:nth-child(3) { grid-column: 2; }
  .rs-e-row .rs-e-num { font-size: 34px !important; }
  .rs-e-row .rs-e-arrow { display: none !important; }
}
@media (max-width: 600px) {
  .rs-tablist label { min-width: 0 !important; flex: 1 1 auto; padding: 15px 12px !important; font-size: 12.5px !important; }
}

details[open] .rs-acc-plus { transform: rotate(45deg); }
.rs-acc:hover > summary { background: var(--rs-gray-1); }
@media (max-width: 991px) {
  .rs-cov, .rs-equip { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
}

/* the two photo bands stay the only dark surfaces */
.rs-promise span[style*="letter-spacing:.26em"] { color: var(--rs-accent-light) !important; }
.rs-promise span[style*="height:2px"] { background: var(--rs-accent-light) !important; }
.hero-lead span[style*="height:2px"] { background: var(--rs-accent-light) !important; }

/* --- restored: hero layout --- */
.hero { min-height: min(88vh, 760px) !important; }
.hero-body { display: flex !important; align-items: center !important; }
.hero-block { width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 32px !important; text-align: left !important; }
@media (max-width: 767px) { .hero-block { padding: 0 20px !important; } .hero-lead { max-width: 100% !important; } }

/* --- restored: editorial serif statement --- */
.rs-promise p[style*="clamp(24px,3.4vw,42px)"] {
  font-family: 'Zen Old Mincho', 'Noto Serif JP', serif !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  line-height: 1.85 !important;
}

/* --- restored: forms --- */
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus { outline: none; border-color: var(--rs-accent) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--rs-accent) 18%, transparent); }
.rs-dcard:hover { background: var(--rs-gray-1) !important; }

/* --- restored: responsive collapse --- */
@media (max-width: 1199px) { .rs-ind { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 991px) {
  .rs-why { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
  .rs-why > div { order: 0 !important; }
  .rs-styles, .rs-direct { grid-template-columns: minmax(0,1fr) !important; }
  .rs-flow { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 767px) {
  .rs-form { grid-template-columns: minmax(0,1fr) !important; padding: 32px 22px !important; }
  .rs-field { grid-column: 1 / -1 !important; }
  .rs-flow, .rs-ind { grid-template-columns: minmax(0,1fr) !important; }
}
/* desktop nav colour explicitly from the ramp */
@media (min-width: 992px) { #navbarNav .accordion-button, #navbarNav .accordion-button-link { color: var(--rs-ink) !important; } }

/* --- restored: neutral ramp collapse --- */
#theme-home, #theme-home * { border-color: var(--rs-gray-2); }
#theme-home .card, #theme-home .card-body, #theme-home .card-footer { background-color: transparent; border-color: var(--rs-gray-2); }

/* --- restored: desktop nav dropdown panel --- */
@media (min-width: 992px) {
  #navbarNav .accordion-button, #navbarNav .accordion-button-link {
    background-color: transparent !important; color: var(--rs-ink) !important;
    border: 0 !important; box-shadow: none !important;
  }
  #navbarNav .accordion-button:hover, #navbarNav .accordion-button-link:hover { color: var(--rs-accent) !important; background-color: transparent !important; }
  #navbarNav .accordion-body { background-color: #fff !important; box-shadow: 0 12px 32px -18px rgba(20,24,27,.35), 0 0 0 1px var(--rs-gray-2); }
  #navbarNav .accordion-body a { color: var(--rs-gray-4) !important; }
  #navbarNav .accordion-body a:hover { color: var(--rs-accent) !important; }
}

/* --- restored: mobile drawer on the neutral ramp --- */
@media (max-width: 991px) {
  .offcanvas, .offcanvas-body, .offcanvas .accordion,
  .offcanvas .accordion-item, .offcanvas .accordion-header,
  .offcanvas .accordion-collapse, .offcanvas .accordion-body,
  .offcanvas .list-unstyled, .offcanvas li { background-color: #fff !important; color: var(--rs-ink) !important; }
  .offcanvas .accordion-button, .offcanvas .accordion-button-link { background-color: #fff !important; color: var(--rs-ink) !important; border-color: var(--rs-gray-2) !important; }
  .offcanvas .accordion-button:hover, .offcanvas .accordion-button-link:hover { background-color: var(--rs-gray-1) !important; color: var(--rs-accent) !important; }
  .offcanvas .accordion-body a { color: var(--rs-gray-4) !important; }
  .offcanvas .accordion-body a:hover { color: var(--rs-accent) !important; }
  .offcanvas .btn-close { background-color: #fff !important; color: var(--rs-ink) !important; opacity: 1 !important; }
  .offcanvas .btn-close-icon::before, .offcanvas .btn-close-icon::after { background-color: var(--rs-ink) !important; }
}

/* --- restored: mobile CTA off the raw LINE green --- */
.mobile-footer-cta { background: var(--rs-gray-2) !important; }
.mobile-footer-cta a[href*="lin.ee"] { background: var(--rs-ink) !important; color: #fff !important; }
.mobile-footer-cta a[href^="tel:"] { background: var(--rs-accent) !important; color: #fff !important; }

/* --- SERVICE image mosaic --- */
.rs-tile:hover img { transform: scale(1.06); }
.rs-tile:hover .rs-tile-bar { background: var(--rs-gray-1); }
.rs-tile:hover .rs-tile-arrow { background: var(--rs-accent); border-color: var(--rs-accent); color: #fff; transform: translateX(3px); }
@media (max-width: 991px) {
  .rs-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)) !important; grid-template-areas: 'a a' 'b b' 'c d' 'e e' !important; }
}
@media (max-width: 600px) {
  .rs-mosaic { grid-template-columns: minmax(0,1fr) !important; grid-template-areas: 'a' 'b' 'c' 'd' 'e' !important; }
}

/* --- spec row --- */
@media (max-width: 767px) {
  .rs-spec { grid-template-columns: repeat(2, minmax(0,1fr)) !important; row-gap: 32px !important; }
  .rs-spec > div:nth-child(3) { padding-left: 0 !important; border-left: 0 !important; }
}

/* --- kill the imported yellow marker underline on <strong> --- */
#theme-home strong, #theme-home b { background-image: none !important; }

/* --- FV: per-character reveal (trapatch-style) --- */
@keyframes rs-fv-char { from { transform: translateY(20px) skewX(-40deg); opacity: 0 } to { transform: translateY(0) skewX(0); opacity: 1 } }
@keyframes rs-fv-slide { from { transform: translateX(-20px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes rs-fv-fade { from { opacity: 0 } to { opacity: 1 } }

.rs-fv-ttl { font-family: 'Zen Old Mincho', 'Noto Serif JP', serif !important; font-weight: 500 !important; }
.rs-fv-ttl .rs-fv-line { display: block; white-space: nowrap; }
.rs-fv-ttl .rs-fv-line span { display: inline-block; animation: rs-fv-char .5s cubic-bezier(0,.47,.53,1) both; }
.rs-fv-in { animation: rs-fv-slide .6s cubic-bezier(0,.47,.53,1) both; }

.rs-fv-bg {
  position: absolute; left: 0; right: 0; bottom: clamp(22px,3vh,38px); z-index: 3; text-align: left;
  padding-left: 17px; padding-right: 17px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(11px, 1.15vw, 15px); font-weight: 700; line-height: 1;
  letter-spacing: .42em; color: var(--rs-gray-3); white-space: nowrap;
  pointer-events: none; animation: rs-fv-fade 1.6s ease-out .3s both;
}
@media (max-width: 767px) {
  .rs-fv-bg { letter-spacing: .26em; }
  .hero-lead.rs-fv { max-width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-fv-ttl .rs-fv-line span, .rs-fv-in, .rs-fv-bg { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- FV: two-column with the 3x3 puzzle panel --- */
.hero { background: #fff !important; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; left: -8%; top: -18%; z-index: 0; pointer-events: none;
  width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle at 38% 38%, var(--rs-gray-1), transparent 64%);
}
.hero-block {
  display: flex !important; align-items: center; min-height: 100vh;
  padding-top: clamp(120px,10vw,160px) !important; padding-bottom: clamp(88px,8vw,120px) !important;
}
@media (max-width: 991px) { .hero-block { min-height: 100svh; } }
.hero-lead.rs-fv { max-width: 100% !important; }

.rs-fvpuzzle {
  position: relative; aspect-ratio: 4 / 3.15;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(3, minmax(0,1fr));
  gap: 1px; background: var(--rs-gray-2);
  animation: rs-fv-slide-r .9s cubic-bezier(0,.47,.53,1) 1.6s both;
}
@keyframes rs-fv-slide-r { from { transform: translateX(28px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
.rs-fvcell { position: relative; overflow: hidden; background: var(--rs-gray-1); }
.rs-fvcell > span {
  position: absolute; inset: 0;
  background-size: 300% 300%; background-repeat: no-repeat;
  animation: rs-fvpuz 18s linear infinite both;
}
@keyframes rs-fvpuz {
  0%     { opacity: 0; z-index: 3 }
  2.2%   { opacity: 1; z-index: 3 }
  24.9%  { opacity: 1; z-index: 3 }
  25%    { opacity: 1; z-index: 2 }
  27.2%  { opacity: 1; z-index: 2 }
  27.3%  { opacity: 0; z-index: 1 }
  100%   { opacity: 0; z-index: 1 }
}
.rs-fvpanel-edge {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--rs-gray-2);
}

@media (max-width: 991px) {
  .hero-block { grid-template-columns: minmax(0,1fr) !important; }
  .rs-fvpuzzle { animation-delay: .6s; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-fvcell > span { animation: none !important; }
  .rs-fvcell > span:not(:first-child) { opacity: 0 !important; }
  .rs-fvpuzzle { animation: none !important; }
}

.hero, .hero-body { height: auto !important; min-height: 0 !important; max-height: none !important; }


/* --- COMPANY index: heavier, on the ink ground --- */
.rs-company { background: #fff !important; color: var(--rs-ink); }
.rs-e-row:hover { background: var(--rs-gray-1); }
.rs-e-row:hover .rs-e-num { -webkit-text-stroke-color: var(--rs-accent) !important; }
.rs-e-row:hover .rs-e-arrow { background: var(--rs-accent); border-color: var(--rs-accent); color: #fff; transform: translateX(3px); }

/* --- COMPANY: line-art backdrop --- */
.rs-company-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  opacity: .5; mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 24%);
}
.rs-company-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 32%, rgba(255,255,255,.7) 62%, rgba(255,255,255,.6) 100%);
}
@media (max-width: 991px) { .rs-company-veil { background: rgba(255,255,255,.9) !important; } }

/* --- FV photo --- */
.rs-fv-photo {
  position: absolute; inset: 88px 0 0; z-index: 0; overflow: hidden; pointer-events: none;
  animation: rs-fv-fade 1.8s ease-out .1s both;
}
.rs-fv-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 0;
}
.rs-fv-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 30%, rgba(255,255,255,.4) 56%, rgba(255,255,255,.28) 100%);
}
@keyframes rs-fv-zoom { from { transform: scale(1.08) } to { transform: scale(1) } }
@media (max-width: 991px) { .rs-fv-photo { inset: 72px 0 0; } }
@media (max-width: 767px) {
  .rs-fv-photo::after { background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.7) 100%); }
}
@media (prefers-reduced-motion: reduce) { .rs-fv-photo img { animation: none !important; } }

@media (max-width: 767px) {
  .rs-fv-ttl { font-size: clamp(21px, 5.6vw, 30px) !important; }
}

@media (min-width: 576px) { .rs-fv-bg { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 992px) { .rs-fv-bg { padding-left: 40px; padding-right: 40px; } }

/* --- forms: validation, consent, status --- */
.rs-form { position: relative; }
.rs-form input:focus, .rs-form select:focus, .rs-form textarea:focus { outline: 2px solid var(--rs-accent); outline-offset: -1px; border-color: var(--rs-accent) !important; }
.rs-form .is-invalid { border-color: #b3261e !important; background: #fdf6f5 !important; }
.rs-err { margin: 0; font-size: 12.5px; line-height: 1.6; color: #b3261e; }
.rs-err:empty { display: none; }
.rs-agree { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.rs-agree input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--rs-accent); cursor: pointer; }
.rs-form button[disabled] { opacity: .6; cursor: progress; }
.rs-form-status { margin: 0; font-size: 13.5px; line-height: 1.8; }
.rs-form-status:empty { display: none; }
.rs-form-status.is-error { color: #b3261e; }
.rs-form-done { max-width: 860px; margin: 0 auto; padding: 64px 44px; background: #fff; box-shadow: 0 0 0 1px rgba(20,24,27,.10); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; outline: none; }
.rs-form-done-en { font-size: 11px; font-weight: 700; letter-spacing: .26em; color: var(--rs-accent); }
.rs-form-done-ttl { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: .04em; }
.rs-form-done-txt { margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 2; color: var(--rs-gray-4); }
@media (max-width: 767px) {
  .rs-form { grid-template-columns: minmax(0,1fr) !important; padding: 28px 20px !important; gap: 20px !important; }
  .rs-form > * { grid-column: 1 / -1 !important; }
  .rs-form input, .rs-form select, .rs-form textarea { font-size: 16px !important; }
  .rs-form button[type=submit] { align-self: stretch !important; justify-content: center; }
  .rs-form-done { padding: 44px 22px; }
}

/* --- mobile tap targets / legibility --- */
@media (max-width: 991px) {
  .navbar-toggler { min-height: 44px; min-width: 44px; justify-content: center; }
}
@media (max-width: 767px) {
  a[href^="mailto:"], a[href^="tel:"] { display: inline-block; padding: 8px 0; }
  .mobile-footer-cta a { padding: 0 !important; display: flex !important; }
}