:root {
  color-scheme: light;
  --deep: #062f35;
  --deepest: #042a31;
  --mint: #98f3d7;
  --mint-hover: #c3fae8;
  --ink: #133638;
  --muted: #4d6463;
  --accent: #126c61;
  --teal: #136f70;
  --line: #dbe8e4;
  --paper: #fbfdfb;
  --wash: #edf7f2;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-space: clamp(3.25rem, 7vw, 6.25rem);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.75; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.35; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); letter-spacing: .018em; text-wrap: balance; }
h3 { font-size: 1.375rem; }
section[id] { scroll-margin-top: 1.25rem; }
:focus-visible { outline: 3px solid #36ab9b; outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.container { width: min(calc(100% - var(--gutter) * 2), 74rem); margin-inline: auto; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; z-index: 10; top: .5rem; left: .5rem; padding: .65rem 1rem; background: var(--mint); color: var(--deep); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { background: white; color: var(--ink); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 4.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand-text { display: grid; font-size: 1.4rem; font-weight: 760; line-height: 1.05; letter-spacing: -.025em; }
.brand-text small { margin-top: .3rem; font-size: .625rem; font-weight: 600; letter-spacing: .14em; color: #b9d5cf; }
.site-header .brand-text small { color: var(--muted); }
.desktop-nav { display: flex; align-items: center; gap: clamp(1rem, 2.7vw, 2.5rem); }
.desktop-nav a, .mobile-nav a { font-size: .9rem; font-weight: 670; text-decoration: none; padding-block: .65rem; }
.desktop-nav a:hover, .mobile-nav a:hover { color: var(--teal); }
.desktop-nav .header-contact { background: var(--teal); color: white; border-radius: .5rem; padding-inline: 1.1rem; }
.desktop-nav .header-contact:hover { background: #095d5d; color: white; }
.mobile-nav { display: none; }

.hero { color: #102f3b; background: white; }
.hero-inner { width: min(100%, 84rem); display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); align-items: center; }
.hero-content { min-width: 0; padding-block: clamp(2.2rem, 3.5vw, 3.4rem); padding-inline: clamp(1.25rem, 5vw, 5rem) 1rem; }
.status { display: inline-flex; align-items: center; gap: .52rem; padding: .26rem .78rem; border: 1px solid #c5e7df; border-radius: 99rem; color: #12635d; background: #f1f9f6; font-size: .79rem; font-weight: 680; letter-spacing: .04em; }
.status span { width: .43rem; height: .43rem; border-radius: 50%; background: #22857a; }
.hero h1 { margin-top: 1.12rem; font-size: clamp(2.35rem, 4.25vw, 4.3rem); font-weight: 850; line-height: 1.23; letter-spacing: .015em; }
.hero h1 span { display: block; }
.hero-definition { margin-top: 1.25rem; max-width: 31rem; font-size: clamp(1.06rem, 1.5vw, 1.25rem); font-weight: 720; }
.hero-intro { margin-top: .8rem; max-width: 29rem; color: var(--muted); font-size: .99rem; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.25rem; margin-top: 1.6rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .62rem; min-height: 3.1rem; padding: .65rem 1.15rem; border-radius: .55rem; font-size: .96rem; font-weight: 760; line-height: 1.5; text-decoration: none; }
.button-primary { color: white; background: var(--teal); border: 1px solid var(--teal); }
.button-primary:hover { background: #095d5d; }
.button-outline { color: #102f3b; background: white; border: 1px solid var(--teal); }
.button-outline:hover { background: var(--wash); }
.button-mint { color: #072f32; background: var(--mint); }
.button-mint:hover { background: var(--mint-hover); }
.hero-photo { position: relative; overflow: hidden; }
.hero-photo img { width: 100%; height: auto; }
.hero-photo::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 11%; background: linear-gradient(90deg, white, #ffffff00); pointer-events: none; }
.hero-photo figcaption { position: absolute; right: .6rem; bottom: .55rem; border-radius: .28rem; padding: .1rem .45rem; background: #fffffff2; color: #102f3b; font-size: .69rem; }

.section { padding-block: var(--section-space); }
.section-heading { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: .62rem; color: var(--accent); font-weight: 750; font-size: .78rem; letter-spacing: .09em; }
.eyebrow span { width: 1.25rem; height: 2px; background: currentColor; border-radius: 1px; }
#features-title span { display: inline-block; max-width: 100%; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.feature-card, .extra-feature { padding: clamp(1.25rem, 3vw, 2.15rem); border: 1px solid var(--line); }
.feature-card { border-radius: 1rem; background: #f0f8f3; }
.feature-card:nth-child(2) { background: #fff; }
.feature-top { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.feature-icon, .extra-icon { display: grid; place-items: center; flex: none; width: 2.85rem; height: 2.85rem; color: var(--accent); }
.feature-icon { border-radius: .78rem; background: #ddf3e9; font-size: 1.28rem; }
.feature-when { font-size: .82rem; font-weight: 750; color: #16635a; }
.feature-card h3, .extra-feature h3 { margin-bottom: .55rem; font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.feature-card p:not(.feature-when) { max-width: 29rem; color: var(--muted); line-height: 1.85; }
.extra-feature { margin-top: 1rem; border-radius: .8rem; }
.extra-icon { font-size: 1.12rem; }
.extra-label { color: var(--accent); font-size: .72rem; font-weight: 750; }
.extra-feature > p { color: var(--muted); font-size: .92rem; }

.scenes { background: #e3f6f2; padding-block: clamp(1.65rem, 2.7vw, 2.4rem); }
.scenes h2 { font-size: clamp(1.45rem, 2.6vw, 2.2rem); text-align: center; }
.scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 1.8vw, 1.4rem); margin-top: 1.2rem; }
.scene-card img { width: 100%; height: auto; aspect-ratio: 1.93; object-fit: cover; border-radius: .55rem; background: #d9ebe1; }
.scene-card figcaption { padding-top: .62rem; text-align: center; }
.scene-card h3 { font-size: clamp(1rem, 1.5vw, 1.23rem); }
.section-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.4rem, 6vw, 5.25rem); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.12rem; list-style: none; font-weight: 720; line-height: 1.55; }
.faq-item summary::-webkit-details-marker, .mobile-nav summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item p { padding: 0 1.5rem 1.25rem 0; color: var(--muted); font-size: .95rem; line-height: 1.85; }
.faq-sign { position: relative; display: grid; place-items: center; flex: none; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #e8f4ef; color: var(--accent); }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; width: .63rem; height: 2px; background: currentColor; border-radius: 2px; }
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { display: none; }

.contact { background: var(--deep); color: white; padding-block: clamp(2.5rem, 5.5vw, 4.75rem); }
.contact-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem 3rem; }
.contact .eyebrow { color: var(--mint); }
.contact h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); }
.contact-inner p:not(.eyebrow) { margin-top: .55rem; color: #c9e1df; }
.contact-action { text-align: center; }
.contact-email { font-size: .85rem; overflow-wrap: anywhere; }
.site-footer { background: var(--deepest); color: #c9e1df; border-top: 1px solid #ffffff1c; }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.6rem; min-height: 5rem; padding-block: .9rem; }
.site-footer .brand-text { color: white; font-size: 1.15rem; }
.copyright { color: #b9d5cf; font-size: .75rem; }
.back-to-top { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; min-height: 2.75rem; font-size: .82rem; text-underline-offset: .22rem; }

@media (max-width: 900px) {
  .header-inner { min-height: 4rem; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary { display: flex; align-items: center; gap: .42rem; padding: .48rem .65rem; border: 1px solid var(--line); border-radius: .45rem; min-height: 2.75rem; cursor: pointer; list-style: none; font-size: .79rem; font-weight: 650; }
  .mobile-nav nav { position: absolute; z-index: 3; top: calc(100% + .5rem); right: 0; display: grid; min-width: 12rem; padding: .45rem .85rem; background: white; border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 .6rem 1.5rem #00181926; }
  .mobile-nav a + a { border-top: 1px solid var(--line); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-content { padding: 1.8rem var(--gutter) 1.45rem; }
  .hero h1 { font-size: clamp(2rem, 10.5vw, 3.7rem); }
  .hero-intro { max-width: 35rem; }
  .hero-photo::after { display: none; }
  .section-split { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .scene-grid { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 540px) {
  .brand-text { font-size: 1.22rem; }
  .hero h1 { margin-top: .9rem; }
  .hero-definition { margin-top: .85rem; }
  .hero-definition span { display: inline-block; max-width: 100%; word-break: keep-all; overflow-wrap: anywhere; }
  .hero-intro { font-size: .94rem; }
  .hero-intro span { display: block; }
  .hero-actions { margin-top: 1.15rem; gap: .55rem; }
  .hero-actions .button { padding-inline: .76rem; font-size: .85rem; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 1.25rem; gap: .75rem; }
  .feature-top { margin-bottom: .75rem; }
  .extra-feature { margin-top: .75rem; }
  .contact-action { text-align: left; }
  .footer-inner { column-gap: .65rem; }
  .back-to-top { font-size: .76rem; }
}

@media (max-width: 360px) {
  #features-title { font-size: min(1.75rem, 8.25vw); }
  .hero-actions .button { gap: .38rem; padding-inline: .56rem; font-size: .82rem; }
}