/* =========================================================
   SNAG_DESIGN color palette adaptation for Rainbow
   Keeps Rainbow layout/content; changes only visual palette.
   Palette: paper #f7f6f0 / white #fffefa / mint #dce9df /
            mint-2 #cddfd2 / forest #183b2f / ink #111113
   ========================================================= */
:root{
  --green:#183b2f;
  --green-deep:#111113;
  --green-light:#dce9df;
  --ink:#111113;
  --ink-2:#183b2f;
  --paper:#f7f6f0;
  --paper-2:#fffefa;
  --line:rgba(17,17,19,.18);
  --white-line:rgba(255,255,255,.16);
}
html{background:#f7f6f0}
body,.subpage,.product-page-v2,.contact-page-v2{background:#f7f6f0;color:#111113}
::selection{background:#183b2f;color:#fffefa}
.pointer-glow{background:radial-gradient(circle,rgba(24,59,47,.12),transparent 68%)}

/* Header — light, quiet, SNAG-like */
.site-header,.contact-page-v2 .contact-header{color:#111113}
.site-header.is-scrolled,.contact-page-v2 .contact-header.is-scrolled{
  color:#111113;
  background:rgba(247,246,240,.94);
  border-color:rgba(17,17,19,.10);
  backdrop-filter:blur(18px) saturate(115%);
}
.global-nav a,
.subpage .global-nav a,
.contact-page-v2 .contact-header:not(.is-scrolled) .global-nav a{color:rgba(17,17,19,.62)}
.global-nav a:hover,
.subpage .global-nav a.is-current,
.contact-page-v2 .contact-header:not(.is-scrolled) .global-nav a.is-current{color:#111113}
.nav-contact,
.contact-page-v2 .contact-header:not(.is-scrolled) .nav-contact{border-color:rgba(17,17,19,.24);background:transparent}
.nav-contact:hover,.subpage .nav-contact.is-current{background:#183b2f;border-color:#183b2f;color:#fffefa}
.logo-symbol i{border-color:#183b2f}

/* HOME hero — paper + pale mint instead of dark green */
.hero{background:#f7f6f0;color:#111113}
.hero::before{
  background:
    radial-gradient(circle at 72% 35%,rgba(205,223,210,.78),transparent 34%),
    radial-gradient(circle at 13% 86%,rgba(220,233,223,.56),transparent 28%),
    linear-gradient(120deg,#f7f6f0 0%,#fffefa 58%,#f5f4ee 100%);
}
.hero-grid{
  background-image:
    linear-gradient(rgba(17,17,19,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,19,.045) 1px,transparent 1px);
}
.hero-green{background:#cddfd2;opacity:.58;filter:blur(105px)}
.hero-green--two{opacity:.36}
.ring-one{border-color:rgba(24,59,47,.35);box-shadow:inset 0 0 70px rgba(24,59,47,.025)}
.ring-one::before,.ring-one::after{background:#183b2f}
.ring-two{border-color:rgba(17,17,19,.16)}
.ring-dot{border-color:rgba(17,17,19,.14);background:radial-gradient(circle,rgba(24,59,47,.12),rgba(24,59,47,.02) 62%,transparent 63%)}
.eyebrow{color:#183b2f}
.company-ja{color:rgba(17,17,19,.62)}
.rainbow-word{color:#111113}
.rainbow-word::after{-webkit-text-stroke-color:rgba(24,59,47,.34)}
.hero-index{border-color:rgba(17,17,19,.23)}
.hero-index a{border-color:rgba(17,17,19,.23)}
.hero-index a:hover{border-color:rgba(24,59,47,.58)}
.hero-index span{color:#183b2f}
.hero-index i{color:rgba(17,17,19,.45)}
.hero-index a:hover i{color:#183b2f}
.hero-bottom{color:rgba(17,17,19,.42)}

/* Home content */
.intro-panel{background:#fffefa}
.intro-panel::before{-webkit-text-stroke-color:rgba(17,17,19,.07)}
.intro-kicker{color:#183b2f}
.round-link{border-color:rgba(17,17,19,.26)}
.round-link:hover{background:#183b2f;border-color:#183b2f;color:#fffefa}
.page-links{background:#dce9df}
.section-head{color:rgba(17,17,19,.48)}
.page-card{background:#fffefa;border-color:rgba(17,17,19,.08)}
.page-card:hover{background:#183b2f;color:#fffefa}
.page-card--green{background:#cddfd2;color:#111113}
.page-card--green:hover{background:#183b2f;color:#fffefa}
.page-card--contact{background:#111113;color:#f7f6f0}
.page-card--contact:hover{background:#183b2f}
.card-orbit,.card-orbit::before,.card-orbit::after{border-color:rgba(24,59,47,.26)}
.card-orbit::after{background:rgba(24,59,47,.035)}
.message-strip{background:#111113;color:#f7f6f0}
.message-track{-webkit-text-stroke-color:rgba(220,233,223,.24)}
.message-track i{background:#dce9df}
.message-inner p:first-child{color:#dce9df}
.message-inner a i{color:#dce9df}
.site-footer,.sub-footer{background:#111113;color:#f7f6f0}
.footer-nav a:hover{color:#cddfd2}
.footer-bottom{border-color:rgba(255,255,255,.16);color:rgba(247,246,240,.56)}

/* Generic subpage hero — light editorial surface */
.sub-hero,.sub-hero--message,.sub-hero--company{
  background:
    radial-gradient(circle at 82% 18%,rgba(205,223,210,.72),transparent 29%),
    linear-gradient(120deg,#f7f6f0 0%,#fffefa 70%);
  color:#111113;
}
.sub-grid{
  background-image:
    linear-gradient(rgba(17,17,19,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,19,.04) 1px,transparent 1px);
}
.sub-index{color:#183b2f}
.sub-watermark{-webkit-text-stroke-color:rgba(17,17,19,.10)}
.sub-hero--message{background:radial-gradient(circle at 79% 22%,rgba(205,223,210,.68),transparent 30%),#f7f6f0}
.company-content,.message-content{background:#fffefa}
.company-sticky>p{color:#183b2f}
.company-list dt{color:rgba(17,17,19,.58)}

/* Product — pale mint hero + dark editorial interludes */
.product-v2-hero{
  background:#dce9df;
  color:#111113;
}
.product-v2-hero::before{
  background:
    radial-gradient(circle at 76% 38%,rgba(255,254,250,.78),transparent 30%),
    linear-gradient(115deg,#f7f6f0 0 58%,#dce9df 100%);
}
.product-v2-hero-field{background:#cddfd2;opacity:.88}
.product-v2-hero-field::before{
  background:
    linear-gradient(115deg,rgba(17,17,19,.055) 1px,transparent 1px),
    linear-gradient(25deg,rgba(17,17,19,.04) 1px,transparent 1px);
}
.product-v2-orbit{border-color:rgba(24,59,47,.30)}
.product-v2-orbit i{border-color:rgba(17,17,19,.14)}
.product-v2-watermark{-webkit-text-stroke-color:rgba(17,17,19,.10)}
.product-page-v2 .sub-index{color:#183b2f}
.insurance-origin{background:#fffefa}
.insurance-origin-body{color:rgba(17,17,19,.70)}
.insurance-origin-art>span{background:#183b2f;box-shadow:0 0 0 16px rgba(24,59,47,.07),0 0 40px rgba(24,59,47,.18)}
.insurance-origin-mark i{border-color:#183b2f}
.insurance-concept{background:#111113;color:#f7f6f0}
.insurance-concept::before{background:#183b2f}
.insurance-concept::after{background:#17231f}
.insurance-concept-rule span{background:#dce9df;box-shadow:0 0 28px rgba(220,233,223,.45)}
.insurance-perspective{background:#dce9df}
.insurance-perspective-card--light{background:#fffefa;color:#111113}
.insurance-perspective-card--green{background:#183b2f;color:#fffefa}
.insurance-closing{background:#cddfd2;color:#111113}
.insurance-closing::before{background:linear-gradient(115deg,rgba(17,17,19,.08),transparent 48%)}
.insurance-closing-lines{background-image:linear-gradient(rgba(17,17,19,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,19,.10) 1px,transparent 1px)}
.insurance-closing-brand{-webkit-text-stroke-color:rgba(17,17,19,.32)}
.insurance-closing-orbit{border-color:rgba(17,17,19,.20)}
.insurance-closing-orbit i{border-color:rgba(17,17,19,.12)}

/* Partner — light hero; Roasso red stays intact */
.partner-page-v2,.partner-page-v2 .partner-hero{background:#f7f6f0;color:#111113}
.partner-page-v2 .partner-hero::before{background:radial-gradient(circle at 70% 30%,rgba(205,223,210,.72),transparent 35%)}
.partner-page-v2 .partner-hero:after{border-color:rgba(24,59,47,.22);box-shadow:0 0 0 90px rgba(24,59,47,.025),0 0 0 180px rgba(24,59,47,.018)}
.partner-page-v2 .partner-rainbow{-webkit-text-stroke-color:rgba(17,17,19,.22)}
.partner-page-v2 .pitch,.partner-page-v2 .pitch-center,.partner-page-v2 .pitch-box{border-color:rgba(24,59,47,.20)}
.partner-page-v2 .pitch::before{background:rgba(24,59,47,.18)}
.partner-page-v2 .partner-feature{background:#fffefa;color:#111113}
.partner-page-v2 .roasso-visual:before{background:#111113}
.partner-page-v2 .roasso-word{color:#111113}
.partner-page-v2 .roasso-word span{background:#fffefa}
.partner-page-v2 .roasso-arrow{background:#f7f6f0;color:#111113}
.partner-page-v2 .partner-band{background:#111113;color:#f7f6f0}
.next-links--dark{background:#183b2f;color:#fffefa}

/* Contact — light mint hero, dark side panel, paper form */
.contact-page-v2 .contact-header{color:#111113}
.contact-v2-hero{color:#111113;background:#dce9df}
.contact-v2-hero::before{
  background:
    radial-gradient(circle at 72% 22%,rgba(255,254,250,.80),transparent 27%),
    radial-gradient(circle at 12% 85%,rgba(205,223,210,.70),transparent 25%),
    linear-gradient(120deg,#f7f6f0 0%,#dce9df 54%,#cddfd2 100%);
}
.contact-v2-grid{
  background-image:
    linear-gradient(rgba(17,17,19,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,19,.055) 1px,transparent 1px);
}
.contact-v2-hero::after{background:linear-gradient(to bottom,transparent,rgba(24,59,47,.08))}
.contact-v2-halo{border-color:rgba(24,59,47,.28)}
.contact-v2-halo::before,.contact-v2-halo::after{border-color:rgba(24,59,47,.15)}
.contact-v2-kicker{color:rgba(17,17,19,.58)}
.contact-v2-kicker i{background:rgba(17,17,19,.35)}
.contact-v2-title::after{background:#183b2f;box-shadow:0 0 25px rgba(24,59,47,.18)}
.contact-v2-rainbow{-webkit-text-stroke-color:rgba(17,17,19,.10)}
.contact-v2-scroll{border-color:rgba(17,17,19,.36);background:rgba(255,254,250,.30)}
.contact-v2-scroll:hover{background:#111113;color:#fffefa}
.contact-v3-stage{background:#f7f6f0}
.contact-v3-shell{box-shadow:0 30px 80px rgba(17,17,19,.08)}
.contact-v3-side{background:#111113;color:#f7f6f0}
.contact-v3-side::before{background:#183b2f}
.contact-v3-side::after{background:radial-gradient(circle at 110% -10%,rgba(220,233,223,.14),transparent 35%)}
.contact-v3-side-no{color:#dce9df}
.contact-v3-form-wrap{background:#fffefa}
.contact-v3-label{color:rgba(17,17,19,.70)}
.contact-v3-form input,.contact-v3-form textarea{background:#f5f4ee;color:#111113}
.contact-v3-form input:focus,.contact-v3-form textarea:focus{background:#fffefa;border-color:#183b2f;box-shadow:0 0 0 4px rgba(24,59,47,.07)}
.contact-v3-submit{background:#183b2f;color:#fffefa}
.contact-v3-submit:hover{background:#111113}
.contact-v2-next{background:#111113;color:#f7f6f0}
.contact-v2-next a:hover{background:#183b2f}
.contact-v3-confirm-label{color:#183b2f!important}
.contact-v3-confirm-value{color:#111113!important}
.contact-v3-back{background:#f5f4ee!important;color:#111113!important}
.contact-v3-back:hover{background:#dce9df!important}
.contact-v3-final{background:#183b2f!important;color:#fffefa!important}
.contact-v3-final:hover{background:#111113!important}
.contact-v3-result-mark{border-color:rgba(24,59,47,.30)!important;color:#183b2f!important;box-shadow:0 0 0 18px rgba(24,59,47,.05)!important}
.contact-v3-result .brand{color:#183b2f!important}
.contact-v3-result-home{border-color:rgba(17,17,19,.18)!important;color:#111113!important}
.contact-v3-result-home:hover{background:#111113!important;color:#fffefa!important}

@media(max-width:860px){
  .site-header .menu-button,.contact-page-v2 .contact-header .menu-button{color:#111113}
  .site-header .menu-button.is-open,.contact-page-v2 .contact-header .menu-button.is-open{color:#fffefa}
  .global-nav,
  .contact-page-v2 .contact-header:not(.is-scrolled) .global-nav{
    background:
      radial-gradient(circle at 82% 18%,rgba(220,233,223,.13),transparent 28%),
      linear-gradient(145deg,#111113 0%,#183b2f 100%);
  }
  .global-nav a,.nav-contact,
  .subpage .global-nav a,
  .contact-page-v2 .contact-header:not(.is-scrolled) .global-nav a{
    color:#fffefa;
    border-color:rgba(255,255,255,.14);
  }
  .subpage .global-nav a.is-current{color:#fffefa}
  .contact-v2-scroll:hover{background:transparent;color:#111113}
}
/* Philosophy light-hero legibility */
.message-hero-quote{color:rgba(17,17,19,.68)}
.message-arc{border-color:rgba(24,59,47,.28)}
.message-arc::before{border-color:rgba(17,17,19,.08)}

/* =========================================================
   2026-09-04 refinement requested from SNAG_DESIGN reference
   Flat sampled backgrounds / no grid / no blur / stronger type
   ========================================================= */
:root{
  --snag-paper:#f6f5f0; /* sampled from supplied SNAG main visual */
  --snag-mint:#dce9df;  /* sampled from supplied SNAG service visual */
  --snag-forest:#183b2f;
  --snag-ink:#111113;
}

html,
body,
.subpage,
.product-page-v2,
.contact-page-v2{
  background:var(--snag-paper);
}

/* Keep the supplied colors visually flat and exact. */
.grain,
.pointer-glow,
.hero-green,
.hero-grid,
.sub-grid,
.contact-v2-grid{
  display:none !important;
}

.site-header.is-scrolled,
.contact-page-v2 .contact-header.is-scrolled{
  background:rgba(246,245,240,.98) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Header: slightly larger, calmer and closer to SNAG_DESIGN. */
.header-inner{
  width:min(calc(100% - 64px),var(--shell));
  min-height:104px;
}
.logo{
  gap:14px;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.045em;
  color:var(--snag-ink);
}
.logo-symbol{
  width:35px;
  height:27px;
}
.logo-symbol i:nth-child(1){width:35px;height:25px}
.logo-symbol i:nth-child(2){width:26px;height:18px;left:4.5px}
.logo-symbol i:nth-child(3){width:17px;height:11px;left:9px}
.global-nav{gap:clamp(22px,2.3vw,40px)}
.global-nav a,
.subpage .global-nav a,
.contact-page-v2 .contact-header:not(.is-scrolled) .global-nav a{
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.10em;
  color:rgba(17,17,19,.72);
}
.global-nav a:hover,
.global-nav a.is-current,
.subpage .global-nav a.is-current,
.contact-page-v2 .contact-header:not(.is-scrolled) .global-nav a.is-current{
  color:var(--snag-forest) !important;
}
.global-nav a:not(.nav-contact)::after{
  background:var(--snag-forest);
}
/* HOME has no is-current class in the original markup; keep this CSS-only. */
body:not(.subpage):not(.contact-page-v2) > .site-header .global-nav > a:first-child{
  color:var(--snag-forest);
}
body:not(.subpage):not(.contact-page-v2) > .site-header .global-nav > a:first-child::after,
.global-nav a.is-current:not(.nav-contact)::after{
  transform:scaleX(1);
  transform-origin:left;
}
.nav-contact,
.contact-page-v2 .contact-header:not(.is-scrolled) .nav-contact{
  padding:14px 21px;
  border-color:rgba(24,59,47,.32);
}
.nav-contact:hover,
.nav-contact.is-current,
.subpage .nav-contact.is-current,
.contact-page-v2 .contact-header:not(.is-scrolled) .nav-contact.is-current{
  background:var(--snag-forest) !important;
  border-color:var(--snag-forest) !important;
  color:#f6f5f0 !important;
}

/* HOME main visual: exact SNAG paper, no graph paper, no glow/blur. */
.hero{
  background:var(--snag-paper) !important;
}
.hero::before{
  background:var(--snag-paper) !important;
}
.hero-green{filter:none !important;background:none !important}
.ring-dot{background:transparent !important}

/* Main pale surface: exact SNAG service mint, without gradients. */
.page-links,
.product-v2-hero,
.contact-v2-hero{
  background:var(--snag-mint) !important;
}
.product-v2-hero::before,
.contact-v2-hero::before,
.partner-page-v2 .partner-hero::before,
.sub-hero,
.sub-hero--message,
.sub-hero--company{
  background:var(--snag-paper) !important;
}
.product-v2-hero-field{
  background:transparent !important;
  opacity:0 !important;
  filter:none !important;
}
.product-v2-hero-field::before,
.insurance-closing-lines{
  background-image:none !important;
}
.contact-v2-halo,
.contact-v2-halo::before,
.contact-v2-halo::after{
  filter:none !important;
}

/* "Rainbow" alphabet styling: same modern sans-serif language as SNAG_DESIGN. */
.rainbow-word,
.sub-watermark,
.message-climax::before,
.partner-rainbow,
.contact-watermark-big,
.contact-v2-rainbow,
.product-v2-watermark,
.insurance-closing-brand,
.contact-v3-side-brand,
.contact-v3-result .brand,
.footer-logo,
.footer-main .footer-logo{
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif !important;
  font-style:normal !important;
  font-weight:500 !important;
  letter-spacing:-.065em !important;
}
.rainbow-word{
  font-weight:500 !important;
  letter-spacing:-.075em !important;
}

/* Remove the remaining soft-focus effects from large visual surfaces. */
.hero::before,
.sub-hero,
.sub-hero--message,
.sub-hero--company,
.product-v2-hero::before,
.contact-v2-hero::before,
.partner-page-v2 .partner-hero::before,
.contact-v3-side::after{
  box-shadow:none !important;
  filter:none !important;
}
.contact-v3-side::after{background:none !important}

@media(max-width:860px){
  .header-inner{
    width:calc(100% - 36px);
    min-height:82px;
  }
  .logo{
    font-size:20px;
    gap:10px;
  }
  .logo-symbol{width:30px;height:23px}
  .logo-symbol i:nth-child(1){width:30px;height:21px}
  .logo-symbol i:nth-child(2){width:22px;height:15px;left:4px}
  .logo-symbol i:nth-child(3){width:14px;height:9px;left:8px}
  .global-nav a,
  .subpage .global-nav a,
  .contact-page-v2 .contact-header:not(.is-scrolled) .global-nav a{
    font-size:18px;
  }
  body:not(.subpage):not(.contact-page-v2) > .site-header .global-nav > a:first-child{
    color:#f6f5f0;
  }
  body:not(.subpage):not(.contact-page-v2) > .site-header .global-nav > a:first-child::after{
    transform:scaleX(0);
  }
}

/* Use only the two supplied light tones for the light surfaces. */
.intro-panel,
.page-card,
.company-content,
.message-content,
.insurance-origin,
.partner-page-v2 .partner-feature,
.contact-v3-form-wrap,
.contact-v3-stage,
.insurance-perspective-card--light{
  background:var(--snag-paper) !important;
}
.page-links,
.insurance-perspective,
.insurance-closing{
  background:var(--snag-mint) !important;
}
.partner-page-v2 .partner-hero{
  background:var(--snag-paper) !important;
}
.ring-one::before{box-shadow:none !important}

/* Complete the Rainbow wordmark typography conversion. */
.intro-panel::before,
.message-track{
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif !important;
  font-style:normal !important;
  font-weight:500 !important;
  letter-spacing:-.065em !important;
}
.rainbow-word::after{
  display:none !important;
}

/* =========================================================
   2026-09-04 HOME link cards — THREE-COLOR interaction
   Uses only the existing three visual colors:
   paper #f6f5f0 / mint #dce9df / ink #111113
   No white-text inversion, no army/forest fill.
   ========================================================= */
:root{
  --card-paper:#f6f5f0;
  --card-mint:#dce9df;
  --card-ink:#111113;
}

/* All five boxes stay visually unified at rest. */
.page-card,
.page-card--green,
.page-card--contact{
  background:var(--card-paper) !important;
  color:var(--card-ink) !important;
  border-color:rgba(17,17,19,.09) !important;
  box-shadow:none !important;
}

/* Every piece of text / icon remains black. */
.page-card .card-number,
.page-card .card-title,
.page-card .card-title h2,
.page-card .card-title span,
.page-card .card-arrow,
.page-card--green .card-number,
.page-card--green .card-title,
.page-card--green .card-title h2,
.page-card--green .card-title span,
.page-card--green .card-arrow,
.page-card--contact .card-number,
.page-card--contact .card-title,
.page-card--contact .card-title h2,
.page-card--contact .card-title span,
.page-card--contact .card-arrow{
  color:var(--card-ink) !important;
}

/* Make the accent appear only where the eye naturally lands. */
.page-card .card-number{
  transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease;
}
.page-card .card-title span{
  display:inline-block;
  margin-left:-8px;
  padding:5px 8px;
  background:transparent;
  transition:background .28s ease,transform .28s ease;
}
.page-card .card-arrow{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  transition:transform .35s var(--ease),background .28s ease,color .28s ease;
}

/* CONTACT watermark is also part of the same three-color system. */
.page-card--contact .contact-watermark{
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif !important;
  font-style:normal !important;
  font-weight:500 !important;
  letter-spacing:-.065em !important;
  -webkit-text-stroke-color:rgba(17,17,19,.12) !important;
}

/* GCLI decorative lines use the mint accent instead of white. */
.page-card--green .card-lines{
  opacity:.26 !important;
  background-image:repeating-linear-gradient(
    115deg,
    transparent 0 22px,
    var(--card-mint) 23px,
    transparent 24px 46px
  ) !important;
}

/* Desktop hover: use the SAME three colors only.
   Rest  = paper box + black text.
   Hover = black box + mint text. */
@media (hover:hover){
  .page-card:hover,
  .page-card--green:hover,
  .page-card--contact:hover{
    background:var(--card-ink) !important;
    color:var(--card-mint) !important;
    border-color:var(--card-ink) !important;
    transform:translateY(-5px);
  }

  .page-card:hover .card-number,
  .page-card:hover .card-title,
  .page-card:hover .card-title h2,
  .page-card:hover .card-title span,
  .page-card:hover .card-arrow,
  .page-card--green:hover .card-number,
  .page-card--green:hover .card-title,
  .page-card--green:hover .card-title h2,
  .page-card--green:hover .card-title span,
  .page-card--green:hover .card-arrow,
  .page-card--contact:hover .card-number,
  .page-card--contact:hover .card-title,
  .page-card--contact:hover .card-title h2,
  .page-card--contact:hover .card-title span,
  .page-card--contact:hover .card-arrow{
    color:var(--card-mint) !important;
  }

  .page-card:hover .card-number{
    background:transparent !important;
    border-color:var(--card-mint) !important;
    transform:scale(1.04);
  }
  .page-card:hover .card-title span{
    background:transparent !important;
    transform:translateX(3px);
  }
  .page-card:hover .card-arrow{
    background:transparent !important;
    border:1px solid var(--card-mint) !important;
    transform:translate(4px,-4px);
  }
  .page-card:hover .card-orbit,
  .page-card:hover .card-orbit::before,
  .page-card:hover .card-orbit::after{
    border-color:rgba(220,233,223,.72) !important;
  }
  .page-card--green:hover .card-lines{
    opacity:.34 !important;
    background-image:repeating-linear-gradient(
      115deg,
      transparent 0 22px,
      rgba(220,233,223,.7) 23px,
      transparent 24px 46px
    ) !important;
  }
  .page-card--contact:hover .contact-watermark{
    color:transparent !important;
    -webkit-text-stroke-color:rgba(220,233,223,.22) !important;
  }
}

/* Touch / keyboard: same three-color inversion while pressed/focused. */
.page-card:active,
.page-card--green:active,
.page-card--contact:active,
.page-card:focus-visible,
.page-card--green:focus-visible,
.page-card--contact:focus-visible{
  background:var(--card-ink) !important;
  color:var(--card-mint) !important;
  border-color:var(--card-ink) !important;
}
.page-card:active .card-number,
.page-card:active .card-title,
.page-card:active .card-title h2,
.page-card:active .card-title span,
.page-card:active .card-arrow,
.page-card:focus-visible .card-number,
.page-card:focus-visible .card-title,
.page-card:focus-visible .card-title h2,
.page-card:focus-visible .card-title span,
.page-card:focus-visible .card-arrow{
  color:var(--card-mint) !important;
}
.page-card:active .card-number,
.page-card:focus-visible .card-number{
  background:transparent !important;
  border-color:var(--card-mint) !important;
}
.page-card:active .card-title span,
.page-card:focus-visible .card-title span,
.page-card:active .card-arrow,
.page-card:focus-visible .card-arrow{
  background:transparent !important;
}

/* =========================================================
   HOME MV — BLACK EMPHASIS
   ========================================================= */

/* RAINBOWを大きく・黒を主役に */
.hero .rainbow-word{
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: clamp(100px, 11.2vw, 180px) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: .82 !important;
  letter-spacing: -.025em !important;
  color: #111113 !important;
}

/* Rainbow Inc. */
.hero .company-ja{
  margin-bottom: 16px !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: clamp(16px, 1.35vw, 21px) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: #111113 !important;
}

/* RAINBOWのズレ文字も黒系で控えめに */
.hero .rainbow-word::after{
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(17,17,19,.18) !important;
}

/* 右側メニュー：線を濃く */
.hero .hero-index{
  border-top-color: rgba(17,17,19,.65) !important;
}

.hero .hero-index a{
  border-bottom-color: rgba(17,17,19,.65) !important;
}

/* 右側メニュー：文字も黒を強く */
.hero .hero-index span,
.hero .hero-index strong,
.hero .hero-index i{
  color: #111113 !important;
}

/* ホバーだけ深緑をアクセントに */
.hero .hero-index a:hover span,
.hero .hero-index a:hover strong,
.hero .hero-index a:hover i{
  color: #183b2f !important;
}

/* 円を黒系へ */
.hero .ring-one{
  border-color: rgba(17,17,19,.72) !important;
  box-shadow: none !important;
}

.hero .ring-two{
  border-color: rgba(17,17,19,.42) !important;
}

.hero .ring-dot{
  border-color: rgba(17,17,19,.28) !important;
  background: transparent !important;
}

/* 円を回る点を完全な黒へ */
.hero .hero-ring .ring-tracker i{
  width: 10px !important;
  height: 10px !important;
  background: #111113 !important;
  box-shadow: none !important;
}

/* スマホだけRAINBOWを収める */
@media (max-width: 760px){
  .hero .rainbow-word{
    font-size: clamp(68px, 21vw, 108px) !important;
    letter-spacing: -.025em !important;
  }

  .hero .company-ja{
    font-size: 14px !important;
  }
}

/* =========================================================
   HOME MV / SNAG_DESIGN SCALE
   ========================================================= */

/* SNAGと同じくらい左から大きく使う */
.hero .hero-inner{
  width: calc(100% - 160px) !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, .65fr) !important;
  gap: 70px !important;
}

/* 左側の文字エリア */
.hero .hero-copy{
  width: 100% !important;
}

/* Rainbow / Inc. */
.hero .hero-brand-title{
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(190px, 15.4vw, 296px) !important;
  font-weight: 500 !important;
  font-style: normal !important;

  line-height: .76 !important;
  letter-spacing: -.065em !important;

  color: #111113 !important;
  white-space: nowrap !important;
}

.hero .hero-brand-title span{
  display: block !important;
}

/* SNAG → DESIGN と同じように2段目を右へずらす */
.hero .hero-brand-title span:nth-child(2){
  margin-left: .72em !important;
}

/* スマホ */
@media (max-width: 860px){

  .hero .hero-inner{
    width: calc(100% - 44px) !important;
    grid-template-columns: 1fr !important;
    gap: 58px !important;
  }

  .hero .hero-brand-title{
    font-size: clamp(78px, 23vw, 150px) !important;
    line-height: .80 !important;
    letter-spacing: -.055em !important;
  }

  .hero .hero-brand-title span:nth-child(2){
    margin-left: .55em !important;
  }
}

.hero .hero-brand-title{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #111113;
}

/* GROUP CREDIT LIFE INSURANCE */
.hero .hero-business{
  display: block;
  margin-bottom: 48px;

  font-family: Arial, "Segoe UI", sans-serif;
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;

  color: #111113;
}

/* Rainbow */
.hero .hero-name{
  display: block;

  font-family: Arial, "Segoe UI", sans-serif;
  font-size: clamp(135px, 12vw, 215px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.055em;
}

/* Inc. */
.hero .hero-inc{
  display: block;
  margin-top: .08em;

  font-family: Arial, "Segoe UI", sans-serif;
  font-size: clamp(135px, 12vw, 215px);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.055em;
}

/* SP */
@media (max-width: 760px){
  .hero .hero-business{
    margin-bottom: 30px;
    font-size: 15px;
    letter-spacing: .07em;
  }

  .hero .hero-name,
  .hero .hero-inc{
    font-size: clamp(72px, 22vw, 115px);
  }
}

.hero .hero-brand-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  color:#111113;
}

.hero .hero-name{
  display:block;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:clamp(155px,14vw,250px);
  font-weight:700;
  line-height:.76;
  letter-spacing:-.06em;
}

.hero .hero-inc{
  display:block;
  margin-top:.05em;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:clamp(150px,13vw,235px);
  font-weight:700;
  line-height:.74;
  letter-spacing:-.055em;
}

.hero .hero-business{
  display:block;
  margin-top:28px;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:clamp(22px,2vw,34px);
  font-weight:800;
  line-height:1;
  letter-spacing:.055em;
  white-space:nowrap;
}

@media(max-width:760px){
  .hero .hero-name{
    font-size:clamp(80px,22vw,130px);
  }

  .hero .hero-inc{
    font-size:clamp(76px,21vw,124px);
  }

  .hero .hero-business{
    margin-top:18px;
    font-size:clamp(13px,3.6vw,18px);
    letter-spacing:.04em;
  }
}

/* =========================================
   HOME HERO BRAND LOCKUP
   reference: supplied image
   ========================================= */

.hero .hero-brand-lockup{
  width:min(54vw, 900px) !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  font-family:Arial, "Segoe UI", sans-serif !important;
  color:#111113 !important;
}

/* Rainbow */
.hero .hero-name{
  display:block !important;
  margin:0 !important;

   font-size: 18vw !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:.78 !important;
  letter-spacing:-.06em !important;

  white-space:nowrap !important;
}

/* Inc. */
.hero .hero-inc{
  display:block !important;
  margin:0 !important;

  font-size: 17vw !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:.78 !important;
  letter-spacing:-.055em !important;

  white-space:nowrap !important;
}

/* GROUP CREDIT LIFE INSURANCE */
.hero .hero-business{
  display:block !important;
  margin-top:24px !important;

  font-family:Arial, "Segoe UI", sans-serif !important;
  font-size:3.4vw !important;
  font-weight:800 !important;
  line-height:1 !important;

  letter-spacing:.01em !important;
  word-spacing:.12em !important;

  white-space:nowrap !important;
  color:#111113 !important;
}

/* SP */
@media(max-width:760px){

  .hero .hero-brand-lockup{
    width:100% !important;
  }

  .hero .hero-name{
    font-size:clamp(78px, 22vw, 120px) !important;
  }

  .hero .hero-inc{
    font-size:clamp(74px, 21vw, 114px) !important;
  }

  .hero .hero-business{
    margin-top:16px !important;
    font-size:clamp(10px, 10vw, 15px) !important;
  }
}