:root {
  --paper: #FDFCDC;
  --ink: #214748;
  --teal: #00AFB9;
  --teal-dark: #008f98;
  --peach: #FED9B7;
  --coral: #F07167;
  --muted: #607471;
  font-family: "Nunito", "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--paper); }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
::selection { background: rgba(0,175,185,.2); color: var(--ink); }

.site-shell { position: relative; isolation: isolate; display: flex; min-height: 100vh; flex-direction: column; overflow: clip; background: var(--paper); }
.site-shell::before { position: fixed; z-index: 10; inset: 0; pointer-events: none; content: ""; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); }
.skip-link { position: absolute; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-160%); border: 1px solid rgba(0,175,185,.45); border-radius: 8px; color: var(--ink); background: var(--paper); font-size: 12px; text-decoration: none; transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header, .site-footer { width: min(1480px, 100%); margin-inline: auto; padding-inline: clamp(22px, 5.6vw, 84px); }
.site-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding-top: 26px; padding-bottom: 20px; border-bottom: 1px solid rgba(33,71,72,.14); }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; transform: rotate(-8deg); border: 1px solid rgba(0,175,185,.42); border-radius: 12px 12px 12px 4px; color: white; background: var(--teal); }
.brand-mark svg { width: 19px; height: 19px; transform: rotate(8deg); }
.brand-name { font-size: 11px; font-weight: 900; letter-spacing: .12em; line-height: 1.25; }
.brand-name span { display: block; margin-top: 4px; color: #7c9290; font-size: 8px; font-weight: 700; letter-spacing: .2em; }
.top-nav { display: flex; align-items: center; gap: clamp(8px, 1.7vw, 25px); }
.nav-button { position: relative; padding: 9px 2px; border: 0; color: #6f8583; background: transparent; font: 800 10px/1 "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .09em; cursor: pointer; transition: color .22s ease; }
.nav-button::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; transform: scaleX(0); transform-origin: left; border-radius: 2px; background: var(--coral); content: ""; transition: transform .22s ease; }
.nav-button:hover, .nav-button[aria-current="page"] { color: var(--ink); }
.nav-button:hover::after, .nav-button[aria-current="page"]::after { transform: scaleX(1); }
.header-index { color: #7c9290; font: 700 10px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .1em; white-space: nowrap; }
.header-index b { color: var(--coral); }

.main-stage { position: relative; display: flex; width: min(1480px,100%); min-height: 590px; flex: 1; flex-direction: column; justify-content: center; margin: 0 auto; padding: 28px clamp(22px,5.6vw,84px) 30px; }
.orbital { position: absolute; top: 8%; right: -4%; width: clamp(190px,25vw,330px); aspect-ratio: 1.15; transform: rotate(20deg); border: 1px solid rgba(0,175,185,.15); border-radius: 49% 51% 44% 56% / 58% 41% 59% 42%; pointer-events: none; }
.orbital::before, .orbital::after { position: absolute; inset: 12%; border: 1px solid rgba(0,175,185,.12); border-radius: inherit; content: ""; }
.orbital::after { inset: 26%; background: rgba(254,217,183,.24); }
.orbital-dot { position: absolute; top: 26%; right: 13%; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.section-screen { position: relative; z-index: 1; width: 100%; animation: section-in .55s cubic-bezier(.2,.75,.2,1) both; }
.section-screen[hidden] { display: none; }
.section-screen.reverse { animation-name: section-in-reverse; }
@keyframes section-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes section-in-reverse { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--teal-dark); font: 900 10px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { display: block; width: 24px; height: 2px; border-radius: 9px; background: var(--coral); content: ""; }
.home-intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(240px,.65fr); align-items: end; gap: 5vw; margin: 8px 0 31px; }
.hero-title, .detail-title { margin: 16px 0 0; color: var(--ink); font-family: "Nunito", "Avenir Next", Avenir, "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.065em; }
.hero-title { max-width: 840px; font-size: clamp(49px,7.1vw,94px); line-height: .97; }
.hero-title .accent, .detail-title em { color: var(--coral); font-style: normal; }
.hero-summary { max-width: 360px; margin: 0 0 7px; color: #657777; font-size: clamp(13px,1.1vw,15px); font-weight: 500; line-height: 1.85; }
.hero-summary strong { color: var(--ink); font-weight: 900; }

.glass-row { display: grid; max-width: 1210px; grid-template-columns: 1.12fr .9fr 1.03fr; align-items: start; gap: 16px; }
.glass-card { position: relative; display: flex; min-height: 230px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(19px,2.2vw,28px); border: 1px solid rgba(33,71,72,.1); border-radius: 24px 24px 24px 8px; color: var(--ink); background: #fff9e9; box-shadow: 0 14px 38px rgba(70,90,68,.055); font: inherit; text-align: left; cursor: pointer; transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.card-about { min-height: 255px; background: #fff9e9; }
.card-services { min-height: 215px; margin-top: 34px; background: #e1f3ed; }
.card-contact { min-height: 240px; margin-top: 3px; background: #fbe2d3; }
.glass-card:hover { transform: translateY(-5px); border-color: rgba(0,175,185,.48); box-shadow: 0 18px 44px rgba(70,90,68,.12); }
.card-about:hover { background: #fff9e9; }
.card-services:hover { background: #e1f3ed; }
.card-contact:hover { background: #fbe2d3; }
.card-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.card-number { color: #65807c; font: 900 9px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .11em; }
.card-symbol { display: grid; color: var(--teal-dark); place-items: center; }
.card-symbol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.card-art { position: absolute; top: 0; right: 0; width: 54%; height: 46%; overflow: hidden; transform-origin: 75% 20%; border-radius: 0 22px 0 50%; pointer-events: none; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.glass-card:hover .card-art { transform: scale(1.06); }
.card-art::before, .card-art::after { position: absolute; display: block; content: ""; }
.card-art-about { background: var(--peach); }
.card-art-about::before { top: -34px; right: 19px; width: 116px; height: 116px; border: 1px solid rgba(33,71,72,.34); border-radius: 50%; box-shadow: 0 0 0 13px rgba(255,249,233,.34), 0 0 0 27px rgba(255,249,233,.22); }
.card-art-about::after { right: 73px; bottom: -16px; width: 58px; height: 58px; transform: rotate(28deg); border-radius: 55% 45% 47% 53%; background: var(--coral); }
.card-art-services { width: 70%; height: 60%; border-radius: 0 22px 0 62%; background: #bde8df; }
.card-art-services::before { top: -14px; right: -35px; width: 130px; height: 130px; transform: rotate(-26deg); border-radius: 50%; background: repeating-linear-gradient(0deg,transparent 0 8px,rgba(0,143,152,.38) 8px 9px); }
.card-art-services::after { top: 31px; right: 85px; width: 57px; height: 57px; transform: rotate(34deg); border-radius: 17px 50% 50%; background: var(--coral); }
.card-art-contact { width: 59%; height: 48%; background: #f6cdb7; }
.card-art-contact::before { top: -21px; right: -17px; width: 112px; height: 112px; border-radius: 50%; background: repeating-conic-gradient(from 12deg,var(--teal) 0deg 9deg,transparent 9deg 20deg); }
.card-art-contact::after { top: 31px; right: 54px; width: 52px; height: 52px; border: 1px solid rgba(33,71,72,.22); border-radius: 50%; background: var(--paper); }
.card-copy { position: relative; z-index: 1; }
.card-title { display: block; margin: 22px 0 8px; font-size: 21px; font-weight: 900; letter-spacing: -.045em; }
.card-description { display: block; max-width: 275px; color: #607471; font-size: 11px; font-weight: 600; line-height: 1.75; }
.card-link { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; color: #315d5b; font: 900 9px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .1em; }
.arrow { color: var(--teal); font-size: 16px; transition: transform .2s ease; }
.glass-card:hover .arrow { transform: translate(3px,-2px); }
.stage-footnote { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 43px; color: #748784; font: 900 9px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .1em; }
.stage-footnote::before { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); content: ""; }
.stage-note { margin-left: 12px; color: #637976; font: 600 11px/1.7 "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .015em; }

.detail-layout { display: grid; max-width: 1190px; grid-template-columns: minmax(0,1.05fr) minmax(310px,.72fr); align-items: start; gap: clamp(36px,8vw,118px); padding: 42px 0 50px; }
.detail-title { max-width: 690px; margin: 21px 0 24px; font-size: clamp(49px,6.6vw,82px); line-height: 1; }
.detail-copy { max-width: 530px; margin: 0; color: #5d7471; font-size: 14px; font-weight: 500; line-height: 1.9; }
.detail-copy + .detail-copy { margin-top: 15px; }
.detail-aside { min-height: 260px; padding: 27px; border: 1px solid rgba(33,71,72,.11); border-radius: 28px 28px 28px 8px; background: #e2f3ee; box-shadow: 0 15px 36px rgba(70,90,68,.055); }
.aside-index, .address-label { color: var(--teal-dark); font: 900 9px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .14em; }
.aside-heading { margin: 30px 0 13px; color: var(--ink); font-size: 22px; font-weight: 900; letter-spacing: -.045em; }
.aside-copy, .principle-list li small { margin: 0; color: #627b76; font-size: 12px; font-weight: 600; line-height: 1.85; }
.principle-list { margin: 27px 0 0; padding: 0; list-style: none; }
.principle-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(33,71,72,.14); color: var(--ink); font-size: 12px; }
.principle-list li > div { display: grid; gap: 6px; }
.principle-list li strong { color: var(--ink); font-size: 12px; font-weight: 900; }
.principle-list li small { max-width: 280px; font-size: 10px; line-height: 1.7; }
.principle-list li > span { flex: 0 0 auto; color: var(--teal-dark); font: 900 10px "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.contact-mail { display: inline-flex; align-items: center; gap: 11px; margin-top: 30px; padding: 11px 15px; border: 1px solid rgba(0,175,185,.35); border-radius: 999px; color: var(--ink); background: rgba(0,175,185,.07); font-size: 14px; font-weight: 900; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.contact-mail:hover { border-color: var(--teal); color: #007f87; }
.mail-arrow { color: var(--teal-dark); }
.address-label { display: block; margin-top: 28px; }
.address-text { margin: 13px 0 0; color: #5d7471; font-size: 12px; font-weight: 600; line-height: 1.9; }
.contact-aside { min-height: 310px; }
.location-mark { position: relative; height: 110px; overflow: hidden; margin: 19px 0 0; border: 1px solid rgba(33,71,72,.1); border-radius: 19px 19px 19px 5px; background: var(--peach); }
.location-mark::before, .location-mark::after { position: absolute; inset: -50% 35%; transform: rotate(36deg); border: 1px solid rgba(0,143,152,.28); content: ""; }
.location-mark::after { inset: -30% 50%; transform: rotate(-36deg); }
.location-pin { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 8px rgba(240,113,103,.16); }
.contact-kicker { margin-top: 20px; color: #748784; font: 900 9px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .13em; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 17px; padding-bottom: 23px; border-top: 1px solid rgba(33,71,72,.14); color: #748784; font: 800 9px "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: .035em; }
.footer-rule { height: 1px; flex: 1; background: linear-gradient(90deg,rgba(33,71,72,.16),transparent); }

@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 18px; padding-top: 18px; padding-bottom: 15px; }
  .brand-mark { width: 31px; height: 31px; }
  .header-index { display: none; }
  .top-nav { order: 2; width: 100%; justify-content: space-between; gap: 4px; padding-top: 9px; border-top: 1px solid rgba(33,71,72,.12); }
  .nav-button { font-size: 8px; letter-spacing: .045em; }
  .main-stage { min-height: unset; justify-content: flex-start; padding-top: 32px; padding-bottom: 27px; }
  .orbital { top: 30px; right: -80px; width: 180px; }
  .home-intro { display: block; margin: 4px 0 28px; }
  .hero-title { max-width: 560px; font-size: clamp(51px,14.5vw,76px); }
  .hero-summary { max-width: 400px; margin: 23px 0 0; font-size: 13px; }
  .glass-row { grid-template-columns: 1fr 1fr; gap: 11px; }
  .glass-card { min-height: 196px; margin-top: 0; padding: 17px 16px; }
  .card-contact { min-height: 170px; grid-column: 1 / -1; }
  .glass-card:hover { transform: translateY(-3px); }
  .card-title { margin: 13px 0 5px; font-size: 19px; }
  .card-link { margin-top: 13px; font-size: 8px; }
  .card-art { width: 64%; height: 43%; }
  .stage-footnote { margin-top: 26px; }
  .detail-layout { grid-template-columns: 1fr; gap: 25px; padding: 22px 0 25px; }
  .detail-title { margin: 17px 0; font-size: clamp(49px,13vw,70px); }
  .detail-copy { font-size: 13px; }
  .detail-aside { min-height: 0; padding: 20px; }
  .aside-heading { margin-top: 19px; }
  .address-text { font-size: 11px; }
  .site-footer { padding-top: 14px; padding-bottom: 18px; font-size: 8px; line-height: 1.7; }
}
@media (max-width: 380px) {
  .glass-card { min-height: 208px; padding: 15px 13px; }
  .card-title { font-size: 17px; }
  .card-link { letter-spacing: .04em; }
  .site-footer { letter-spacing: .01em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}