/* Shared palette, foundations, components, then responsive rules. */
@font-face {
  font-family:Pretendard;
  src:url('assets/PretendardVariable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}

@font-face {
  font-family:QuietSerif;
  src:url('assets/serif.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}

:root {
  --blue-950:#0b2438;
  --blue-900:#172c46;
  --blue-700:#2867ab;
  --blue-600:#62758a;
  --blue-400:#9aa9b6;
  --blue-300:#c4cfd8;
  --blue-200:#d9e6ef;
  --blue-100:#e8eef4;
  --blue-50:#f4f6f8;
  --accent:#a8d5f5;
  --white:#fff;
  --paper:var(--blue-50);
  --ink:var(--blue-900);
  --muted:var(--blue-600);
  --brand:var(--blue-700);
  --line:var(--blue-200);
  --radius:48px;
  --gutter:clamp(25px,6.3vw,112px);
  --serif:QuietSerif,'Noto Serif KR','AppleMyungjo',serif;
  --sans:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:85px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color:transparent
}

button, input, select, textarea {
  font:inherit
}

button, a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button {
  color:inherit
}

a {
  color:inherit;
  text-decoration:none
}

button {
  border:0;
  background:none
}

img {
  display:block;
  max-width:100%;
  object-fit:cover
}

figure, p, h1, h2, h3, h4 {
  margin:0
}

h1, h2, h3 {
  font-weight:400;
  word-break:keep-all;
  text-wrap:balance
}

h1, h2 {
  font-family:var(--serif);
  line-height:1.5;
  letter-spacing:-.055em
}

h2 {
  font-size:clamp(34px,3.3vw,53px)
}

p {
  word-break:keep-all
}

em {
  font-style:normal;
  color:var(--brand)
}

svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  flex-shrink:0;
  stroke-linecap:round;
  stroke-linejoin:round
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.reverse {
  transform:rotate(180deg)
}

button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--brand);
  outline-offset:6px
}

button:disabled {
  opacity:.32;
  cursor:default
}

[hidden] {
  display:none!important
}

.skip-link {
  position:fixed;
  z-index:100;
  left:20px;
  top:-100px;
  background:var(--paper);
  padding:12px 22px
}

.skip-link:focus {
  top:15px
}

.eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:500;
  line-height:1.8
}

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-height:46px;
  padding:10px 22px;
  border-radius:50px;
  background:var(--white);
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  transition:background .25s,transform .25s
}

.pill:hover {
  background:var(--blue-100);
  transform:translateY(-2px)
}

.pill.dark {
  background:var(--brand);
  color:var(--white)
}

.pill.dark:hover {
  background:var(--blue-700)
}

.pill.outline {
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--line)
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid currentColor;
  padding:10px 0;
  font-size:13px;
  line-height:1.5;
  transition:gap .2s
}

.text-link:hover {
  gap:52px
}

.paper {
  background:var(--paper)
}

.rounded {
  border-radius:var(--radius) var(--radius) 0 0
}

.small-note {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}

.chapter {
  position:relative;
  scroll-margin-top:0
}

.header {
  position:absolute;
  z-index:30;
  top:0;
  left:0;
  width:100%;
  height:110px;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:var(--white)
}

.brand {
  width:104px;
  flex-shrink:0
}

.brand img {
  width:104px;
  height:48px;
  object-fit:contain;
  filter:brightness(0) invert(1)
}

.nav {
  display:flex;
  gap:7px;
  align-items:center;
  padding:5px;
  border:1px solid #ffffff20;
  background:#0b243820;
  border-radius:50px;
  backdrop-filter:blur(10px)
}

.nav a {
  font-size:12px;
  white-space:nowrap;
  padding:10px 19px;
  border-radius:30px;
  transition:background .2s,color .2s
}

.nav a:hover {
  background:#ffffff18
}

.nav a.active {
  background:var(--white);
  color:var(--ink)
}

.header-consult {
  min-height:42px;
  padding:10px 19px;
  font-size:12px
}

.header-actions {
  display:flex;
  gap:12px;
  align-items:center
}

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  position:relative
}

.menu-toggle span {
  position:absolute;
  width:22px;
  height:1px;
  background:currentColor;
  left:11px;
  top:17px;
  transition:transform .2s
}

.menu-toggle span+span {
  top:25px
}

.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(4px) rotate(45deg)
}

.menu-toggle[aria-expanded=true] span+span {
  transform:translateY(-4px) rotate(-45deg)
}

.mobile-menu {
  position:absolute;
  inset:90px 16px auto;
  z-index:40;
  background:var(--paper);
  border-radius:20px;
  box-shadow:0 20px 80px #0005;
  padding:18px
}

.mobile-menu a {
  display:block;
  padding:12px 16px;
  border-bottom:1px solid var(--line)
}

.mobile-menu a:last-child {
  border-bottom:0
}

.cover, .scene-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}

@keyframes arrive {
  from{
    opacity:0;
    transform:translateY(18px)
  }

  to{
    opacity:1;
    transform:translateY(0)
  }

}

.about {
  margin-top:-38px;
  padding:60px var(--gutter) 48px;
  z-index:2
}

.section-label {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  letter-spacing:.13em;
  margin-bottom:38px
}

.label-line {
  width:30px;
  height:1px;
  background:var(--ink)
}

.about-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:9%;
  align-items:center
}

.about-copy h2 {
  font-size:clamp(32px,3vw,46px);
  margin-bottom:27px
}

.about-copy p {
  font-size:14px;
  color:var(--muted);
  line-height:1.95;
  margin-bottom:18px
}

.about-copy .text-link {
  margin-top:10px
}

.about-image {
  padding-top:3px
}

.about-image img {
  width:100%;
  height:340px;
  border-radius:14px;
  object-position:65% 50%
}

.about-image figcaption {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:9px;
  letter-spacing:.08em;
  margin-top:17px;
  color:var(--muted)
}

.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
  margin-top:78px;
  border-top:1px solid var(--line);
  padding-top:26px
}

.principles>div {
  display:flex;
  gap:25px;
  align-items:center
}

.principles span {
  font-family:Georgia,serif;
  font-size:13px;
  color:var(--blue-600)
}

.principles p {
  font-size:14px
}

.management {
  padding:70px 24px 0
}

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:45px;
  align-items:flex-end
}

.management>.section-heading {
  padding:0 calc(var(--gutter) - 24px) 52px
}

.section-heading .eyebrow {
  margin-bottom:23px
}

.section-heading>p {
  font-size:14px;
  line-height:1.95;
  color:var(--muted);
  margin-bottom:9px
}

.building-slider {
  position:relative;
  isolation:isolate;
  height:730px;
  border-radius:32px 32px 0 0;
  overflow:hidden;
  background:var(--blue-900);
  color:var(--white);
  touch-action:pan-y
}

.building-scene {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .65s ease
}

.building-scene.scene-active {
  opacity:1
}

.building-scene img {
  width:100%;
  height:100%;
  object-position:center
}

.scene-shade {
  background:linear-gradient(90deg,#0b2438ba 0%,#0b243870 36%,#0b243800 75%),linear-gradient(0deg,#0b24389e,transparent 50%);
  pointer-events:none
}

.building-tabs {
  position:absolute;
  top:40px;
  left:calc(var(--gutter) - 24px);
  display:flex;
  gap:10px
}

.building-tabs button {
  padding:10px 18px;
  border:1px solid #ffffff66;
  border-radius:30px;
  color:#fff;
  font-size:12px;
  min-height:44px;
  transition:background .2s
}

.building-tabs button:hover {
  background:#ffffff20
}

.building-tabs button[aria-selected=true] {
  background:var(--white);
  color:var(--ink);
  border-color:var(--white)
}

.building-content {
  position:absolute;
  left:calc(var(--gutter) - 24px);
  top:200px;
  max-width:620px
}

.building-content .eyebrow {
  color:var(--blue-100);
  font-size:10px;
  letter-spacing:.22em;
  margin-bottom:20px
}

.building-content h3 {
  font-family:var(--serif);
  font-size:clamp(35px,3.3vw,52px);
  line-height:1.5;
  letter-spacing:-.055em
}

.building-content>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.9;
  color:var(--blue-100);
  margin-top:22px
}

.service-tags {
  display:flex;
  gap:12px;
  margin:20px 0 28px
}

.service-tags span {
  font-size:10px;
  border-bottom:1px solid #ffffff55;
  padding-bottom:4px
}

.slider-bottom {
  position:absolute;
  bottom:38px;
  left:calc(var(--gutter) - 24px);
  right:calc(var(--gutter) - 24px);
  display:flex;
  justify-content:space-between;
  align-items:center
}

.slider-note {
  font-size:10px;
  letter-spacing:.12em;
  color:var(--blue-100)
}

.slider-control {
  display:flex;
  align-items:center;
  gap:12px
}

.slider-control>span {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  margin-right:18px
}

.slider-control i {
  font-style:normal;
  color:var(--blue-200);
  padding-left:10px
}

.circle {
  border:1px solid #ffffff80;
  border-radius:50%;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:var(--white);
  transition:background .2s
}

.circle:hover {
  background:#fff;
  color:var(--ink)
}

.maintenance {
  min-height:800px;
  color:var(--white);
  overflow:hidden;
  margin-top:-1px;
  background:var(--blue-900);
  isolation:isolate
}

.maintenance .cover {
  object-position:center
}

.repair-copy {
  position:relative;
  padding:100px var(--gutter) 0
}

.repair-copy .eyebrow {
  margin-bottom:25px
}

.repair-copy h2 {
  font-size:clamp(35px,3.6vw,56px)
}

.repair-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.95;
  color:var(--blue-100);
  margin:25px 0 30px
}

.repair-bottom {
  position:relative;
  margin:80px var(--gutter) 70px;
  max-width:880px
}

.repair-bottom>p {
  font-size:12px;
  margin-bottom:16px;
  color:var(--blue-100)
}

.repair-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.repair-links button {
  border:1px solid #ffffff70;
  padding:9px 18px;
  min-height:44px;
  border-radius:30px;
  color:var(--white);
  font-size:12px;
  background:#0b24384d;
  backdrop-filter:blur(10px);
  transition:background .2s
}

.repair-links button:hover {
  background:var(--white);
  color:var(--ink)
}

.repair-links button span {
  margin-left:18px;
  font-size:16px
}

.repair-bottom .small-note {
  display:block;
  color:var(--blue-200);
  margin-top:18px;
  font-size:11px
}

.app-section {
  margin-top:-42px;
  z-index:2;
  padding:100px var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  align-items:center
}

.app-copy>.eyebrow {
  margin-bottom:26px
}

.app-copy>p:not(.eyebrow):not(.small-note) {
  font-size:14px;
  color:var(--muted);
  line-height:1.95;
  margin:28px 0
}

.app-tabs {
  margin:35px 0 21px
}

.app-tabs button {
  display:flex;
  width:100%;
  align-items:center;
  gap:25px;
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:20px 0;
  font-size:15px;
  color:var(--muted)
}

.app-tabs button span {
  font-size:10px
}

.app-tabs button svg {
  margin-left:auto;
  width:17px;
  opacity:0
}

.app-tabs button[aria-selected=true] {
  color:var(--ink);
  font-weight:600
}

.app-tabs button[aria-selected=true] svg {
  opacity:1
}

.app-tabs button:hover {
  color:var(--ink)
}

.app-copy .small-note {
  margin-top:25px;
  font-size:10px
}

.app-visual {
  position:relative;
  border-radius:200px 200px 12px 12px;
  overflow:hidden;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--blue-200);
  padding:54px 20px 72px
}

.app-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-position:75% 50%
}

.app-veil {
  position:absolute;
  inset:0;
  background:#c4cfd8b3;
  backdrop-filter:blur(3px)
}

.app-floating {
  position:absolute;
  top:28px;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--blue-900);
  z-index:2
}

.phone {
  position:relative;
  background:var(--blue-50);
  flex-shrink:0;
  width:272px;
  height:550px;
  border:6px solid var(--blue-900);
  outline:1px solid var(--blue-600);
  border-radius:37px;
  box-shadow:15px 28px 60px #172c4647;
  overflow:hidden;
  color:var(--blue-900)
}

.phone-status {
  height:41px;
  padding:7px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  position:relative
}

.phone-island {
  position:absolute;
  width:73px;
  height:18px;
  top:7px;
  left:calc(50% - 36px);
  border-radius:20px;
  background:var(--blue-900)
}

.phone-logo {
  font-size:19px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 20px 17px
}

.phone-logo>span {
  font-size:9px;
  font-weight:500;
  padding:4px 7px;
  border:1px solid var(--blue-200);
  border-radius:5px
}

.phone #app-panel {
  padding:12px 19px 16px;
  height:389px;
  overflow:auto;
  scrollbar-width:thin
}

.phone h3 {
  font:500 20px/1.5 var(--sans);
  letter-spacing:-.03em;
  word-break:keep-all
}

.phone-lead {
  font-size:9px;
  color:var(--blue-600);
  margin:8px 0 19px
}

.phone-card {
  padding:15px;
  background:var(--blue-100);
  border-radius:12px
}

.phone-card>span {
  font-size:10px
}

.phone-card>strong {
  display:block;
  font-size:29px;
  font-weight:600;
  line-height:1.5;
  margin:6px 0 10px
}

.phone-card strong small {
  font-size:13px;
  margin-left:3px
}

.phone-card>div {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  padding-top:9px;
  border-top:1px solid var(--blue-200)
}

.phone-list {
  margin-top:17px
}

.phone-list p {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  padding:8px 0;
  border-bottom:1px solid var(--blue-100)
}

.phone-list b {
  font-weight:500;
  color:var(--blue-700)
}

.phone-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50px;
  background:var(--blue-50);
  border-top:1px solid var(--blue-100);
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  font-size:9px;
  color:var(--blue-600)
}

.phone-footer .selected {
  color:var(--blue-900);
  font-weight:700
}

.app-caption {
  position:absolute;
  bottom:26px;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--blue-900)
}

.request-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}

.request-grid div {
  border:1px solid var(--blue-200);
  background:var(--blue-50);
  border-radius:9px;
  padding:17px 6px;
  text-align:center;
  font-size:11px
}

.phone-help {
  background:var(--blue-100);
  padding:12px 10px;
  border-radius:8px;
  font-size:9px;
  margin-top:16px
}

.calendar-strip {
  display:flex;
  justify-content:space-between;
  margin:19px 0;
  font-size:9px
}

.calendar-strip span {
  text-align:center;
  width:29px;
  border-radius:20px;
  padding:6px 0
}

.calendar-strip b {
  display:block;
  font-weight:500;
  margin-top:3px
}

.calendar-strip .selected {
  background:var(--blue-700);
  color:#fff
}

.automation {
  background:var(--blue-900);
  color:var(--white);
  padding:95px var(--gutter) 90px
}

.automation .section-heading>p {
  color:var(--blue-200)
}

.status-tag {
  font-size:10px;
  letter-spacing:0;
  border:1px solid var(--blue-400);
  border-radius:20px;
  padding:5px 10px;
  white-space:nowrap;
  margin-left:15px;
  display:inline-block
}

.workflow {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:62px;
  border-bottom:1px solid var(--blue-600)
}

.workflow button {
  color:var(--blue-300);
  text-align:left;
  padding:22px 15px 24px;
  border-bottom:2px solid transparent;
  position:relative;
  transition:color .2s,background .2s
}

.workflow button:first-child {
  padding-left:0
}

.workflow button span {
  display:block;
  font:13px/1.5 Georgia,serif;
  color:var(--blue-400);
  margin-bottom:19px
}

.workflow button strong {
  font-size:19px;
  font-weight:500
}

.workflow button small {
  display:block;
  font-size:10px;
  margin-top:8px;
  font-weight:400
}

.workflow button[aria-selected=true] {
  color:var(--accent);
  border-color:var(--accent)
}

.workflow button:hover {
  background:#ffffff08
}

.flow-panel {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:90px;
  padding:32px 0;
  min-height:130px
}

.flow-panel h3 {
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:-.03em;
  line-height:1.6
}

.flow-panel p {
  font-size:13px;
  line-height:1.95;
  color:var(--blue-200)
}

.flow-panel small {
  font-size:10px;
  color:var(--blue-300);
  display:block;
  margin-top:10px
}

.automation-note {
  font-size:10px;
  color:var(--blue-300);
  line-height:1.8;
  border-top:1px solid var(--blue-600);
  padding-top:20px
}

.guide {
  margin-top:-35px;
  z-index:2;
  padding:95px var(--gutter) 80px
}

.story-disclosure {
  font-size:10px;
  color:var(--muted);
  margin:24px 0 22px
}

.stories {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}

.story {
  position:relative;
  height:370px;
  border-radius:14px;
  overflow:hidden;
  color:var(--white);
  background:var(--blue-900)
}

.story>img {
  width:100%;
  height:100%;
  transition:transform .8s
}

.story:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0b243855,#0b2438cb)
}

.story>div {
  position:absolute;
  inset:auto 35px 32px;
  z-index:1
}

.story span {
  font-size:10px;
  letter-spacing:.04em;
  color:var(--blue-100)
}

.story h3 {
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:-.04em;
  line-height:1.6;
  margin:17px 0
}

.story p {
  font-size:12px;
  color:var(--blue-200);
  line-height:1.9
}

.story:hover>img {
  transform:scale(1.035)
}

.start-heading {
  margin:80px 0 30px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.start-heading h2 {
  font-size:23px;
  font-family:var(--serif);
  letter-spacing:-.04em
}

.start-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:0;
  margin:0;
  list-style:none;
  border-top:1px solid var(--line)
}

.start-steps li {
  padding:25px 20px 0;
  border-left:1px solid var(--line);
  margin-top:25px
}

.start-steps li:first-child {
  padding-left:0;
  border-left:0
}

.start-steps span {
  font:13px/1.4 Georgia,serif;
  color:var(--muted)
}

.start-steps h4 {
  font-size:17px;
  font-weight:500;
  margin:15px 0 10px
}

.start-steps p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9
}

.faq {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:80px;
  padding:65px var(--gutter) 110px
}

.faq h2 {
  font-size:35px;
  margin:20px 0
}

.faq>div>p:not(.eyebrow) {
  font-size:13px;
  color:var(--muted)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  cursor:pointer;
  padding:21px 0;
  font-size:14px;
  font-weight:500
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary svg {
  width:17px;
  transition:transform .2s
}

.faq-list details[open] summary svg {
  transform:rotate(45deg)
}

.faq-list details>p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  padding:0 30px 24px 0
}

.contact-banner {
  position:relative;
  min-height:610px;
  overflow:hidden;
  color:var(--white);
  background:var(--blue-900)
}

.contact-banner .cover {
  object-position:70% center
}

.contact-copy {
  position:relative;
  padding:105px var(--gutter)
}

.contact-copy .eyebrow {
  margin-bottom:25px
}

.contact-copy h2 {
  font-size:clamp(37px,4vw,60px)
}

.contact-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.9;
  color:var(--blue-100);
  margin:25px 0 30px
}

footer {
  background:var(--blue-950);
  color:var(--blue-100);
  padding:65px var(--gutter) 100px
}

.footer-top {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:50px
}

.footer-brand {
  font-size:32px;
  font-weight:700
}

.footer-brand span {
  display:block;
  font:14px/1.8 var(--serif);
  margin-top:13px;
  color:var(--blue-300)
}

.footer-top .eyebrow {
  font-size:9px;
  color:var(--blue-300);
  margin-bottom:16px
}

.footer-top a {
  display:block;
  font-size:12px;
  line-height:1.9
}

.footer-top .phone-number {
  font-family:Georgia,serif;
  font-size:25px;
  letter-spacing:.02em;
  margin-bottom:5px
}

.footer-top>div>p:not(.eyebrow) {
  font-size:12px;
  line-height:1.9
}

.footer-top .small-note {
  font-size:10px;
  color:var(--blue-300);
  margin-top:9px;
  display:block
}

.footer-bottom {
  border-top:1px solid var(--blue-700);
  padding-top:24px;
  margin-top:50px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  letter-spacing:.05em;
  color:var(--blue-300)
}

.image-disclosure {
  font-size:9px;
  color:var(--blue-400);
  line-height:1.9;
  margin-top:24px
}

.chapter-count {
  font-size:10px;
  color:var(--blue-600);
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.chapter-count b {
  color:var(--ink);
  font-weight:500
}

dialog {
  border:0;
  padding:52px;
  max-height:88svh;
  width:min(690px,calc(100vw - 32px));
  border-radius:25px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 30px 100px #0003;
  overflow:auto
}

dialog::backdrop {
  background:#0b243899;
  backdrop-filter:blur(5px)
}

body:has(dialog[open]) {
  overflow:hidden
}

.dialog-close {
  position:absolute;
  right:18px;
  top:13px;
  width:44px;
  height:44px;
  font-size:30px;
  line-height:1;
  border-radius:50%
}

.dialog-close:hover {
  background:var(--blue-100)
}

dialog h2 {
  font-size:34px;
  margin:15px 0 20px
}

dialog p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9
}

dialog ul {
  padding-left:22px;
  font-size:14px;
  margin:25px 0;
  line-height:2.2
}

.service-ask {
  padding:18px;
  background:var(--blue-100);
  border-radius:10px;
  margin-bottom:25px
}

#service-detail>small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:24px
}

.consult-note {
  margin-bottom:28px
}

.consult-note strong {
  font-weight:500;
  font-size:11px
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.form-grid label {
  font-size:12px;
  font-weight:500;
  display:block
}

.form-grid label>span {
  color:var(--muted);
  font-size:10px;
  margin-left:5px;
  font-weight:400
}

.form-grid input, .form-grid select, .form-grid textarea {
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid var(--blue-200);
  border-radius:7px;
  background:var(--blue-50);
  padding:12px;
  font-size:13px;
  color:var(--ink);
  min-height:46px
}

.form-grid textarea {
  resize:vertical
}

.form-grid .full {
  grid-column:1/-1
}

.form-error {
  color:#aa362d;
  min-height:24px;
  margin:12px 0
}

#consult-form>.pill {
  width:100%
}

#consult-review h3 {
  font-size:22px;
  margin:25px 0
}

#review-data {
  font-size:13px
}

#review-data>div {
  display:grid;
  grid-template-columns:95px 1fr;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  gap:20px
}

#review-data dt {
  color:var(--muted)
}

#review-data dd {
  margin:0;
  overflow-wrap:anywhere;
  white-space:pre-wrap
}

.form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:25px 0
}

.download-status {
  margin-top:18px
}

@media(min-width:1700px) {
  .about-image img {
    height:410px
  }

  .building-slider {
    height:830px
  }

  .building-content {
    top:240px
  }

  .maintenance {
    min-height:850px
  }

  .repair-bottom {
    margin-top:110px
  }

  .app-visual {
    min-height:720px
  }

  .phone {
    transform:scale(1.12)
  }

}

@media(max-width:1100px) {
  :root {
    --blue-950:#0b2438;
    --blue-900:#172c46;
    --blue-700:#2867ab;
    --blue-600:#62758a;
    --blue-400:#9aa9b6;
    --blue-300:#c4cfd8;
    --blue-200:#d9e6ef;
    --blue-100:#e8eef4;
    --blue-50:#f4f6f8;
    --accent:#a8d5f5;
    --white:#fff;
    --gutter:48px;
    --radius:36px
  }

  .header {
    padding:0 35px;
    gap:16px
  }

  .nav a {
    padding:10px 13px;
    font-size:11px
  }

  .header-consult {
    gap:15px
  }

  .about-grid {
    gap:6%
  }

  .about-copy h2 {
    font-size:34px
  }

  .about-image img {
    height:320px
  }

  .about-image figcaption {
    display:block
  }

  .about-image figcaption span {
    display:block;
    margin-bottom:5px
  }

  .about-copy p {
    font-size:13px
  }

  .building-slider {
    height:720px
  }

  .building-content {
    top:190px
  }

  .app-section {
    gap:6%;
    padding-top:85px;
    padding-bottom:85px
  }

  .app-visual {
    min-height:600px;
    padding-left:12px;
    padding-right:12px
  }

  .phone {
    width:255px
  }

  .app-floating {
    font-size:9px
  }

  .flow-panel {
    gap:40px
  }

  .story>div {
    left:25px;
    right:25px
  }

  .story h3 {
    font-size:22px
  }

  .faq {
    gap:40px
  }

  .footer-top {
    gap:28px
  }

  .footer-top .phone-number {
    font-size:21px
  }

}

@media(max-width:800px) {
  :root {
    --blue-950:#0b2438;
    --blue-900:#172c46;
    --blue-700:#2867ab;
    --blue-600:#62758a;
    --blue-400:#9aa9b6;
    --blue-300:#c4cfd8;
    --blue-200:#d9e6ef;
    --blue-100:#e8eef4;
    --blue-50:#f4f6f8;
    --accent:#a8d5f5;
    --white:#fff;
    --gutter:26px;
    --radius:30px
  }

  .header {
    height:90px;
    padding:0 26px
  }

  .brand, .brand img {
    width:88px
  }

  .brand img {
    height:42px
  }

  .nav {
    display:none
  }

  .menu-toggle {
    display:block
  }

  .header-consult {
    min-height:40px;
    font-size:11px;
    gap:13px
  }

  .about {
    padding-top:40px;
    padding-bottom:40px;
    margin-top:-30px
  }

  .section-label {
    font-size:9px;
    margin-bottom:30px
  }

  .about-grid {
    grid-template-columns:1fr;
    gap:40px
  }

  .about-copy h2 {
    font-size:35px
  }

  .about-copy p {
    font-size:14px
  }

  .about-image img {
    height:320px
  }

  .about-image figcaption {
    display:flex;
    font-size:8px
  }

  .principles {
    gap:20px;
    margin-top:42px;
    padding-top:22px
  }

  .principles>div {
    display:block
  }

  .principles span {
    font-size:12px
  }

  .principles p {
    font-size:12px;
    margin-top:10px
  }

  .management {
    padding:50px 12px 0
  }

  .management>.section-heading {
    padding:0 14px 32px
  }

  .section-heading {
    display:block
  }

  .section-heading h2 {
    font-size:35px
  }

  .section-heading .eyebrow {
    margin-bottom:18px;
    font-size:10px
  }

  .section-heading>p {
    font-size:13px;
    margin-top:22px
  }

  .building-slider {
    height:720px;
    border-radius:24px 24px 0 0
  }

  .building-tabs {
    left:22px;
    right:22px;
    top:28px;
    gap:6px
  }

  .building-tabs button {
    font-size:10px;
    padding:9px 11px;
    min-height:42px;
    white-space:nowrap
  }

  .building-scene img {
    object-position:66% center
  }

  .scene-shade {
    background:linear-gradient(90deg,#0b24389e,#0b243826),linear-gradient(0deg,#0b2438bd,transparent 100%)
  }

  .building-content {
    left:24px;
    right:24px;
    top:auto;
    bottom:138px
  }

  .building-content .eyebrow {
    font-size:9px;
    margin-bottom:16px
  }

  .building-content h3 {
    font-size:36px
  }

  .building-content>p:not(.eyebrow) {
    font-size:13px;
    margin-top:20px
  }

  .building-content p br {
    display:none
  }

  .service-tags {
    gap:12px
  }

  .service-tags span {
    font-size:9px
  }

  .slider-bottom {
    left:24px;
    right:24px;
    bottom:40px
  }

  .slider-note {
    font-size:9px
  }

  .slider-control {
    gap:8px
  }

  .slider-control>span {
    margin-right:7px
  }

  .circle {
    width:42px;
    height:42px
  }

  .maintenance {
    min-height:800px
  }

  .maintenance .cover {
    object-position:63% center
  }

  .repair-copy {
    padding-top:76px
  }

  .repair-copy .eyebrow {
    font-size:9px
  }

  .repair-copy h2 {
    font-size:35px
  }

  .repair-copy>p:not(.eyebrow) {
    font-size:13px
  }

  .repair-bottom {
    margin-top:60px;
    margin-bottom:70px
  }

  .repair-links {
    gap:8px
  }

  .repair-links button {
    padding:9px 13px;
    font-size:11px
  }

  .repair-links button span {
    margin-left:10px
  }

  .repair-bottom .small-note {
    font-size:10px
  }

  .app-section {
    grid-template-columns:1fr;
    gap:50px;
    padding-top:70px;
    padding-bottom:65px;
    margin-top:-30px
  }

  .app-copy h2 {
    font-size:36px
  }

  .app-copy>.eyebrow {
    font-size:10px;
    margin-bottom:20px
  }

  .app-copy>p:not(.eyebrow):not(.small-note) {
    font-size:13px;
    margin:24px 0
  }

  .app-tabs {
    margin-top:28px
  }

  .app-tabs button {
    font-size:15px;
    padding:18px 0
  }

  .app-copy .small-note {
    font-size:11px
  }

  .app-visual {
    min-height:620px;
    border-radius:180px 180px 12px 12px;
    max-width:480px;
    width:100%;
    margin:auto
  }

  .phone {
    width:272px;
    height:550px
  }

  .app-floating {
    top:25px
  }

  .automation {
    padding-top:70px;
    padding-bottom:75px
  }

  .automation .section-heading h2 {
    font-size:35px
  }

  .automation .section-heading>p {
    font-size:13px
  }

  .status-tag {
    font-size:9px;
    margin-left:7px
  }

  .workflow {
    margin-top:40px;
    gap:0;
    overflow-x:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--blue-400) var(--blue-900)
  }

  .workflow button {
    padding:16px 10px 20px;
    min-width:104px
  }

  .workflow button span {
    font-size:11px;
    margin-bottom:15px
  }

  .workflow button strong {
    font-size:16px;
    white-space:nowrap
  }

  .workflow button small {
    font-size:9px;
    white-space:nowrap
  }

  .flow-panel {
    display:block;
    min-height:210px;
    padding:28px 0
  }

  .flow-panel h3 {
    font-size:22px;
    margin-bottom:18px
  }

  .flow-panel p {
    font-size:13px
  }

  .flow-panel small {
    font-size:10px
  }

  .automation-note {
    font-size:10px
  }

  .guide {
    padding-top:70px;
    padding-bottom:60px;
    margin-top:-30px
  }

  .story-disclosure {
    font-size:10px;
    line-height:1.8
  }

  .stories {
    grid-template-columns:1fr;
    gap:20px
  }

  .story {
    height:360px
  }

  .story>div {
    left:27px;
    right:27px;
    bottom:28px
  }

  .story h3 {
    font-size:26px
  }

  .story p {
    font-size:12px
  }

  .start-heading {
    display:block;
    margin-top:55px
  }

  .start-heading .eyebrow {
    font-size:9px;
    margin-bottom:15px
  }

  .start-heading h2 {
    font-size:23px
  }

  .start-steps {
    grid-template-columns:1fr 1fr;
    gap:25px 0
  }

  .start-steps li {
    padding-top:10px;
    margin-top:20px
  }

  .start-steps li:nth-child(3) {
    padding-left:0;
    border-left:0
  }

  .start-steps h4 {
    font-size:16px
  }

  .start-steps p {
    font-size:12px
  }

  .faq {
    grid-template-columns:1fr;
    padding-top:35px;
    padding-bottom:65px;
    gap:24px
  }

  .faq h2 {
    font-size:31px;
    margin:15px 0
  }

  .faq-list summary {
    font-size:13px;
    padding:21px 0
  }

  .faq-list details>p {
    font-size:13px
  }

  .contact-banner {
    min-height:600px
  }

  .contact-copy {
    padding-top:90px;
    padding-bottom:90px
  }

  .contact-copy h2 {
    font-size:38px
  }

  .contact-copy .eyebrow {
    font-size:9px
  }

  .contact-copy>p:not(.eyebrow) {
    font-size:13px
  }

  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:40px 20px
  }

  .footer-brand {
    grid-column:1/-1;
    font-size:30px
  }

  .footer-brand span {
    font-size:12px;
    margin-top:8px
  }

  .footer-top .phone-number {
    font-size:19px
  }

  .footer-top a {
    font-size:11px
  }

  .footer-top>div>p:not(.eyebrow) {
    font-size:11px
  }

  .footer-top .small-note {
    font-size:9px
  }

  .footer-bottom {
    flex-wrap:wrap;
    gap:15px;
    font-size:8px
  }

  .footer-bottom a {
    margin-left:auto
  }

  .image-disclosure {
    font-size:9px
  }

  .chapter-count {
    font-size:10px
  }

  dialog {
    padding:43px 25px 30px;
    border-radius:20px
  }

  dialog h2 {
    font-size:29px
  }

  .form-grid {
    gap:14px
  }

  .form-grid label {
    font-size:11px
  }

  .form-grid label>span {
    font-size:9px
  }

  .form-grid input, .form-grid select, .form-grid textarea {
    font-size:16px;
    padding:10px
  }

  .form-grid .full {
    grid-column:1/-1
  }

  .consult-note {
    font-size:12px
  }

  .desktop-only {
    display:none
  }

}

@media(max-width:390px) {
  .header {
    padding:0 20px
  }

  .header-consult {
    padding:10px 14px
  }

  .building-tabs {
    left:16px;
    right:16px;
    gap:4px
  }

  .building-tabs button {
    font-size:9px;
    padding:9px 9px
  }

  .building-content h3 {
    font-size:32px
  }

  .slider-note {
    max-width:80px
  }

  .about-copy h2 {
    font-size:31px
  }

  .repair-copy h2, .app-copy h2, .section-heading h2 {
    font-size:32px
  }

  .story h3 {
    font-size:23px
  }

  .footer-top {
    grid-template-columns:1fr
  }

  .form-grid {
    grid-template-columns:1fr
  }

  .phone {
    width:254px
  }

  .contact-copy h2 {
    font-size:34px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *, *:before, *:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }

  .story:hover>img {
    transform:none
  }

}

@media(max-width:800px) {
  .building-scene[data-scene="1"] img {
    object-position:82% center
  }

}

/* Hero: one source for layout, typography and breakpoints. */
.hero-stack {
  position:relative;
  display:flow-root;
  isolation:isolate;
}

.hero-stack > .hero {
  position:sticky;
  top:0;
  z-index:0;
}

.hero-stack > .about {
  min-height:0;
  background:#fff;
  box-shadow:0 -18px 48px #00000014;
}

.hero {
  --hero-type-size:clamp(42px,4.5vw,68px);
  height:100svh;
  min-height:700px;
  max-height:1300px;
  overflow:hidden;
  color:var(--white);
  background:var(--blue-900);
}

.hero-image,.hero-shade,.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero-image,.hero-video {
  object-fit:cover;
  object-position:50% 45%;
}

.hero-video {
  opacity:0;
  pointer-events:none;
  transition:opacity .8s;
}

.hero-video.is-ready {
  opacity:1;
}

.hero-shade {
  background:linear-gradient(180deg,#0b243850 0%,#0b243810 30%,#0b243838 55%,#0b2438ba 100%);
}

.hero-copy {
  position:absolute;
  top:165px;
  left:var(--gutter);
  width:calc(100% - 2 * var(--gutter));
  text-align:left;
  animation:arrive 1s .15s both;
}

.hero-copy .eyebrow {
  font-size:10px;
  letter-spacing:.18em;
  margin-bottom:18px;
}

.hero h1 {
  font-family:var(--serif);
  font-size:var(--hero-type-size);
  font-weight:400;
  line-height:1;
  letter-spacing:-.055em;
  text-wrap:initial;
  text-shadow:0 2px 22px #0002;
}

.hero-description {
  font-size:14px;
  margin-top:20px;
  color:var(--blue-100);
}

.hero-explore {
  display:inline-flex;
  align-items:center;
  margin-top:26px;
  padding:11px 16px 11px 20px;
  gap:24px;
  background:var(--white);
  color:var(--ink);
  border-radius:40px;
  font-size:11px;
}

.hero-explore svg {
  width:26px;
  height:26px;
  padding:5px;
  border-radius:50%;
  background:var(--brand);
  color:white;
}

.side-caption {
  position:absolute;
  right:30px;
  top:46%;
  writing-mode:vertical-rl;
  font-size:9px;
  letter-spacing:.2em;
}

.hero-stats {
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:112px;
  margin:0;
  padding-top:26px;
  border-top:1px solid #ffffff36;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
}

.hero-stats > div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.hero-stats dd,.hero-stats dt {
  width:100%;
  margin:0;
  text-align:left;
}

.hero-stats dd {
  font-family:var(--serif);
  order:-1;
  font-size:var(--hero-type-size);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.hero-stats dt {
  font-size:12px;
  font-weight:400;
  color:var(--blue-100);
  line-height:1.6;
  word-break:keep-all;
}

@media(max-width:800px) {
  .hero {
    --hero-type-size:clamp(34px,7vw,48px);
    min-height:720px;
    max-height:1000px;
  }

  .hero-image,.hero-video {
    object-position:60% 50%;
  }

  .hero-copy {
    top:140px;
    left:26px;
    width:calc(100% - 52px);
  }

  .hero h1 {
    line-height:1;
  }

  .hero-copy .eyebrow {
    font-size:8px;
  }

  .hero-description {
    font-size:12px;
    max-width:280px;
  }

  .hero-explore {
    margin-top:22px;
  }

  .side-caption {
    right:12px;
    top:42%;
    font-size:8px;
  }

  .hero-stats {
    left:26px;
    right:26px;
    bottom:155px;
    gap:22px;
    padding-top:22px;
  }

  .hero-stats dt {
    font-size:10px;
  }

}

@media(max-width:600px) {
  .hero {
    --hero-type-size:clamp(28px,7.5vw,34px);
    min-height:100svh;
    max-height:none;
  }

  .hero-copy {
    top:115px;
  }

  .hero-stats {
    grid-template-columns:1fr;
    gap:12px;
    bottom:86px;
    padding-top:16px;
  }

  .hero-stats > div {
    gap:7px;
    align-items:center;
  }

  .hero-stats dd,.hero-stats dt {
    text-align:center;
  }

  .hero-stats dd {
    line-height:1.15;
  }

  .hero-stats dt {
    font-size:12px;
  }

}

@media(prefers-reduced-motion:reduce) {
  .hero-stack > .hero {
    position:relative;
  }

  .hero-stack > .about {
    min-height:0;
  }

}

/* Navigation is anchored within the hero stacking context. */
.header { transition:background .2s,color .2s; }
@media(max-width:600px) {
 .hero-stats dt { font-size:11px; }
 .hero-stats>div { gap:4px; }
 .hero-copy .eyebrow { margin-bottom:12px; }
 .hero-description { margin-top:14px; }
 .hero-explore { margin-top:16px; }
}
@media(max-width:600px) and (max-height:650px) {
 .hero { --hero-type-size:26px; }
 .hero-copy { top:100px; }
 .hero-copy .eyebrow { font-size:7px; margin-bottom:8px; }
 .hero-description { font-size:11px; margin-top:10px; }
 .hero-explore { margin-top:12px; padding:6px 12px 6px 16px; }
 .hero-stats { gap:8px; padding-top:10px; bottom:82px; }
}
/* Fine rules frame the hero metrics without obscuring the video. */
.hero-stats {
  padding-bottom:22px;
  border-bottom:1px solid #ffffff36;
}
.hero-stats>div {
  position:relative;
}
.hero-stats>div+div::before {
  content:"";
  position:absolute;
  left:-20px;
  top:0;
  bottom:0;
  width:1px;
  background:#ffffff36;
}
@media(max-width:800px) {
  .hero-stats>div+div::before { left:-11px; }
}
@media(max-width:600px) {
  .hero-stats { padding-bottom:10px; }
  .hero-stats>div+div::before {
    left:0;
    right:0;
    top:-6px;
    bottom:auto;
    width:auto;
    height:1px;
  }
}
@media(max-width:600px) and (max-height:650px) {
  .hero-stats>div+div::before { top:-4px; }
}

/* Keep the copy and metrics in flow so short desktop windows cannot overlap. */
@media(min-width:601px) {
  .hero {
    display:flex;
    flex-direction:column;
    gap:32px;
    height:auto;
    min-height:max(700px,100svh);
    max-height:none;
    padding:clamp(120px,18svh,165px) var(--gutter) clamp(80px,12svh,112px);
  }
  .hero-copy {
    position:relative;
    inset:auto;
    width:100%;
    flex:none;
  }
  .hero-stats {
    position:relative;
    inset:auto;
    width:100%;
    margin-top:auto;
    flex:none;
  }
}
@media(min-width:601px) and (max-width:800px) {
  .hero { padding-inline:26px; }
}

/* Center each metric and its caption within the ruled columns. */
.hero-stats > div { align-items:center; }
.hero-stats dd,.hero-stats dt { text-align:center; }

/* The company story pairs with a connected, three-step process diagram. */
.care-process { padding:30px 32px 26px; border:1px solid var(--line); border-radius:24px; background:var(--blue-50); }
.process-heading { display:flex; justify-content:space-between; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.process-heading>span:first-child { letter-spacing:.13em; color:var(--brand); }
.care-process ol { list-style:none; padding:0; margin:0; }
.care-process li { position:relative; display:grid; grid-template-columns:32px 64px 1fr; align-items:center; gap:18px; padding:26px 0; }
.care-process li+li { border-top:0; }

.process-number { font-family:var(--serif); font-size:23px; color:var(--brand); }
.process-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--white); border:1px solid var(--line); color:var(--brand); }
.process-icon svg { width:40px; height:40px; }
.care-process h3 { font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.65vw,25px); letter-spacing:-.04em; word-break:keep-all; }
.process-end { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; color:var(--muted); font-size:11px; }
.process-end span { width:20px; height:1px; background:var(--line); }
@media(max-width:1000px) and (min-width:801px) {
 .care-process { padding:24px 20px; }
 .care-process li { grid-template-columns:26px 52px 1fr; gap:12px; }
 .process-icon { width:52px; height:52px; }
 
}
@media(max-width:600px) {
 .care-process { padding:24px 20px; border-radius:20px; }
 .process-heading { font-size:10px; }
 .care-process li { grid-template-columns:26px 52px 1fr; gap:12px; padding:24px 0; }
 .process-icon { width:52px; height:52px; }
 .process-icon svg { width:34px; height:34px; }
 
 .care-process h3 { font-size:19px; }
}

/* Vertical document travel drives three full-width horizontal scenes. */
.management { padding:0; height:600svh; position:relative; }
.management .building-slider { position:sticky; top:0; height:100svh; border-radius:0; width:100%; }
.building-track { display:flex; width:100%; height:100%; will-change:transform; }
.building-slide { position:relative; flex:0 0 100%; width:100%; height:100%; overflow:hidden; }
.building-slide>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.building-slide>.scene-shade { position:absolute; inset:0; }
.building-slide .building-content { left:var(--gutter); top:50%; bottom:auto; transform:translateY(-45%); right:var(--gutter); }
.management .building-tabs { left:var(--gutter); right:var(--gutter); top:32px; }
.management .slider-bottom { left:var(--gutter); right:var(--gutter); bottom:28px; }
#building-panel-1>img { object-position:65% center; }
@media(max-width:800px) {
 .management { height:550svh; }
 .building-slide .building-content { left:26px; right:26px; }
 .management .building-tabs,.management .slider-bottom { left:26px; right:26px; }
 .management .slider-note { max-width:110px; line-height:1.6; }
 .building-slide .building-content h3 { font-size:clamp(28px,7vw,36px); }
 #building-panel-1>img { object-position:82% center; }
}
@media(max-height:650px) {
 .building-slide .building-content h3 { font-size:clamp(25px,4vw,36px); line-height:1.3; }
 .building-slide .building-content .eyebrow { margin-bottom:10px; }
 .building-slide .building-content>p:not(.eyebrow) { margin-top:12px; font-size:12px; }
 .building-slide .service-tags { margin:12px 0 16px; }
 .management .slider-bottom { bottom:16px; }
 .management .building-tabs { top:20px; }
}

/* Review ribbon: seamless drift, soft edge fades and lifted hover cards. */
.best-reviews { background:#fff; padding:40px 0 36px; overflow:hidden; position:relative; }
.reviews-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 var(--gutter); }
.reviews-heading .eyebrow { color:var(--brand); margin-bottom:18px; }
.reviews-heading h2 { font-size:clamp(30px,3.3vw,48px); }
.reviews-heading em { color:var(--brand); font-style:normal; }
.review-window { position:relative; overflow:hidden; scrollbar-width:none; padding:28px 0 24px; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.review-track { display:flex; width:max-content; animation:review-drift 100s linear infinite; }
.review-group { display:flex; flex-shrink:0; gap:20px; padding-right:20px; }
.review-card { flex:0 0 344px; width:344px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 8px 25px #172c460d; transition:transform .3s,box-shadow .3s; }
.review-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 16px 32px #172c461a; }
.review-photo { height:150px; position:relative; background:var(--blue-100); }
.review-photo img { width:100%; height:100%; object-fit:cover; }
.review-photo span { position:absolute; bottom:14px; left:22px; border-radius:20px; padding:7px 12px; font-size:11px; color:var(--ink); background:#fffffff0; }
.review-body { padding:22px 24px 24px; }
.review-quote { display:block; font:42px/1 var(--serif); height:35px; color:var(--brand); }
.review-body h3 { font-family:var(--serif); font-size:19px; line-height:1.6; font-weight:400; letter-spacing:-.04em; min-height:61px; }
.review-body>p { margin-top:12px; font-size:13px; line-height:1.8; color:var(--muted); min-height:130px; word-break:keep-all; }
.review-author { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); margin-top:20px; padding-top:17px; font-size:11px; color:var(--muted); }

.reviews-disclosure { padding:0 var(--gutter); text-align:center; font-size:12px; line-height:1.8; color:var(--muted); }
.review-window:hover .review-track,.review-window:focus-within .review-track,.best-reviews.is-paused .review-track,.best-reviews.is-offscreen .review-track { animation-play-state:paused; }
@keyframes review-drift { to { transform:translateX(-50%); } }
@media(max-width:600px) {
 .best-reviews { padding:28px 0 28px; }
 .reviews-heading { align-items:flex-start; flex-direction:column; gap:18px; }
 .review-card { width:290px; flex-basis:290px; }
 .review-group { gap:18px; padding-right:18px; }
 .review-body { padding:20px; }
 .review-body h3 { font-size:20px; }
 .review-body>p { min-height:156px; }
 .review-window { mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); padding-top:30px; }
}
@media(prefers-reduced-motion:reduce) {
 .review-track { animation:none; }
 .review-window { overflow-x:auto; }
 .review-group[aria-hidden] { display:none; }
 .review-card:hover { transform:none; }
}
/* Full supplied reviews remain readable without truncation. */
.review-card { display:flex; flex-basis:320px; width:320px; }
.review-body { display:flex; flex-direction:column; width:100%; padding:22px; }
.review-body>p { min-height:0; flex:1; }
.review-author { line-height:1.7; }
.review-track { animation-duration:135s; }
@media(max-width:600px) { .review-card { flex-basis:280px; width:280px; } .review-body { padding:20px; } .review-body>p { min-height:0; } }

/* Nine services share one architectural photograph and fine grid rules. */
.maintenance { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); min-height:760px; border-radius:0; }
.maintenance .cover { width:100%; height:100%; object-fit:cover; }
.maintenance>.scene-shade { background:linear-gradient(90deg,#0b2438bf,#0b24386b); }
.maintenance .repair-copy { padding:76px 42px 70px var(--gutter); align-self:center; }
.maintenance .repair-copy h2 { font-size:clamp(28px,2.5vw,42px); }
.maintenance .repair-copy>p:not(.eyebrow) { font-size:13px; }
.maintenance .repair-bottom { margin:0; max-width:none; display:flex; flex-direction:column; border-left:1px solid #ffffff66; }
.maintenance .repair-bottom>p { padding:24px 28px; margin:0; border-bottom:1px solid #ffffff66; }
.maintenance .repair-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; flex:1; }
.maintenance .repair-links button { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-height:210px; padding:24px; border:0; border-radius:0; border-right:1px solid #ffffff66; border-bottom:1px solid #ffffff66; background:transparent; backdrop-filter:none; text-align:left; transition:background .3s,color .3s; }
.maintenance .repair-links button:nth-child(3n) { border-right:0; }
.maintenance .repair-links button span { margin:0; }
.maintenance .repair-links .repair-service-name { font-size:clamp(15px,1.4vw,21px); letter-spacing:-.03em; }
.maintenance .repair-links .repair-detail { align-self:flex-end; display:flex; flex-direction:column; align-items:center; justify-content:center; width:76px; height:76px; border:1px solid #ffffff70; border-radius:50%; font-size:25px; line-height:1.2; transition:border-color .3s,transform .3s; }
.repair-detail small { font-size:10px; margin-bottom:6px; }
.maintenance .repair-links button:hover,.maintenance .repair-links button:focus-visible { background:white; color:var(--ink); }
.maintenance .repair-links button:hover .repair-detail,.maintenance .repair-links button:focus-visible .repair-detail { border-color:var(--blue-400); transform:rotate(-5deg); }
.maintenance .repair-bottom .small-note { margin:0; padding:20px 28px 52px; }
@media(max-width:1000px) {
 .maintenance { grid-template-columns:1fr; }
 .maintenance .repair-copy { padding:48px var(--gutter) 40px; }
 .maintenance .repair-bottom { border-left:0; border-top:1px solid #ffffff66; }
 .maintenance .repair-links button { min-height:190px; }
}
@media(max-width:600px) {
 .maintenance .repair-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .maintenance .repair-links button { padding:20px; min-height:170px; }
 .maintenance .repair-links button:nth-child(3n) { border-right:1px solid #ffffff66; }
 .maintenance .repair-links button:nth-child(2n),.maintenance .repair-links button:last-child { border-right:0; }
 .maintenance .repair-links button:last-child { grid-column:1 / -1; min-height:145px; flex-direction:row; align-items:center; }
 .maintenance .repair-links .repair-detail { width:65px; height:65px; }
 .maintenance .repair-bottom>p,.maintenance .repair-bottom .small-note { padding-inline:26px; }
}

/* Edge-to-edge service mosaic with large, fine-line pictograms. */
.maintenance { display:block; min-height:0; }
.maintenance .repair-bottom { border:0; }
.maintenance .repair-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
.maintenance .repair-links button { min-height:250px; height:30svh; padding:28px 32px; position:relative; justify-content:flex-start; }
.maintenance .repair-links .repair-service-name { font-size:clamp(17px,1.6vw,23px); }
.maintenance .repair-links .repair-icon { position:absolute; width:clamp(84px,8vw,118px); height:clamp(84px,8vw,118px); top:53%; left:50%; transform:translate(-50%,-40%); transition:transform .3s; }
.maintenance .repair-links button:hover .repair-icon { transform:translate(-50%,-40%) scale(1.06); }
.maintenance .repair-links button:nth-child(n) { border-right:1px solid #ffffff66; grid-column:auto; flex-direction:column; align-items:flex-start; }
.maintenance .repair-links button:nth-child(3n) { border-right:0; }
.maintenance .repair-links button:nth-last-child(-n+3) { border-bottom:0; }
@media(max-width:600px) {
 .maintenance .repair-links button { min-height:165px; height:23svh; padding:18px 12px; }
 .maintenance .repair-links .repair-service-name { font-size:13px; }
 .maintenance .repair-links .repair-icon { width:68px; height:68px; top:56%; }
}

/* Twelve-cell maintenance grid: title and eleven photo reveals. */
.maintenance .repair-links { grid-template-columns:repeat(4,minmax(0,1fr)); }
.maintenance .repair-links > :nth-child(n) { border-right:1px solid #ffffff66; border-bottom:1px solid #ffffff66; }
.maintenance .repair-links > :nth-child(4n) { border-right:0; }
.maintenance .repair-links > :nth-last-child(-n+4) { border-bottom:0; }
.repair-title { padding:32px; background:#fff; color:var(--ink); display:flex; flex-direction:column; justify-content:center; }
.repair-title > span { font-size:10px; letter-spacing:.12em; }
.repair-title h2 { font-size:clamp(23px,2.4vw,38px); margin:22px 0 14px; }
.repair-title p { font-size:16px; line-height:1.7; margin:0; }
.maintenance .repair-links button { overflow:hidden; isolation:isolate; }
.maintenance .repair-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:-1; transition:opacity .7s ease; }
.maintenance .repair-links button::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#07172499,transparent 55%); opacity:0; transition:opacity .7s ease; }
.maintenance .repair-service-name { position:relative; z-index:1; }
.maintenance .repair-links .repair-icon { transition:opacity .25s ease,transform .3s; }
.maintenance .repair-links button:is(:hover,:focus-visible) { background:white; color:white; transition:background .15s,color .6s .2s; }
.maintenance .repair-links button:is(:hover,:focus-visible) .repair-photo,
.maintenance .repair-links button:is(:hover,:focus-visible)::after { opacity:1; transition-delay:.2s; }
.maintenance .repair-links button:is(:hover,:focus-visible) .repair-icon { opacity:0; }
@media(max-width:900px) {
 .maintenance .repair-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .maintenance .repair-links > :nth-child(n) { border-right:1px solid #ffffff66; border-bottom:1px solid #ffffff66; }
 .maintenance .repair-links > :nth-child(3n) { border-right:0; }
 .maintenance .repair-links > :nth-last-child(-n+3) { border-bottom:0; }
 .repair-title { padding:22px; }
}
@media(max-width:600px) {
 .maintenance .repair-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .maintenance .repair-links > :nth-child(n) { border-right:1px solid #ffffff66; border-bottom:1px solid #ffffff66; }
 .maintenance .repair-links > :nth-child(2n) { border-right:0; }
 .maintenance .repair-links > :nth-last-child(-n+2) { border-bottom:0; }
 .repair-title { padding:18px 12px; }
 .repair-title h2 { font-size:22px; margin:14px 0 8px; }
 .repair-title p { font-size:13px; }
 .repair-title > span { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
 .maintenance .repair-links button,.maintenance .repair-photo,.maintenance .repair-links button::after,.maintenance .repair-links .repair-icon { transition:none!important; }
}

/* Keep the complete maintenance mosaic within one viewport. */
.maintenance .repair-links {
 height:calc(100svh - 120px);
 grid-template-rows:repeat(3,minmax(0,1fr));
}
.maintenance .repair-links > :nth-child(n) {
 min-height:0; height:auto; padding:clamp(12px,2.4svh,24px);
}
.maintenance .repair-links .repair-icon {
 width:clamp(44px,10svh,88px); height:clamp(44px,10svh,88px); top:56%;
}
.repair-title h2 { font-size:clamp(22px,3.8svh,34px); margin:14px 0 8px; }
.repair-title p { font-size:14px; line-height:1.6; }
@media(max-width:900px) {
 .maintenance .repair-links { grid-template-rows:repeat(4,minmax(0,1fr)); }
 .maintenance .repair-links .repair-icon { width:clamp(36px,8svh,64px); height:clamp(36px,8svh,64px); }
 .repair-title > span { font-size:8px; }
 .repair-title h2 { font-size:22px; margin:8px 0; }
 .repair-title p { font-size:12px; }
}
@media(max-width:600px) {
 .maintenance .repair-links { grid-template-rows:repeat(6,minmax(0,1fr)); }
 .maintenance .repair-links > :nth-child(n) { padding:10px 12px; }
 .maintenance .repair-links .repair-icon { width:clamp(28px,5.8svh,48px); height:clamp(28px,5.8svh,48px); top:58%; }
 .maintenance .repair-links .repair-service-name { font-size:12px; }
 .repair-title h2 { font-size:19px; margin:6px 0 0; }
 .repair-title p { display:none; }
 .repair-title > span { font-size:7px; letter-spacing:.05em; }
}
@media(max-height:560px) and (min-width:601px) {
 .repair-title p { display:none; }
 .maintenance .repair-links .repair-icon { width:36px; height:36px; top:61%; }
 .maintenance .repair-links .repair-service-name { font-size:14px; }
}
/* Leave room for the following rounded panel without covering service icons. */
.maintenance { padding-bottom:52px; }

.maintenance > .scene-shade { background:linear-gradient(90deg,#10253655,#10253645); }
.maintenance .repair-links { flex:none; min-height:0; }
.maintenance .repair-links button:nth-child(n) { min-height:0; }

/* Preserve the morning scene while keeping labels and fine icons legible. */
.maintenance > .scene-shade { background:rgba(12,27,40,.12); }
.maintenance .repair-links button { background:rgba(12,27,40,.58); color:#fff; }
.maintenance .repair-links .repair-service-name { color:inherit; text-shadow:0 1px 5px #0007; }
.maintenance .repair-links .repair-icon { color:#fff; filter:drop-shadow(0 1px 3px #0005); }
.maintenance .repair-links button:is(:hover,:focus-visible) { background:#fff; color:#fff; }
.maintenance .repair-links button::after { background:linear-gradient(180deg,#071724c7, #07172430 60%,transparent); }

/* Carry the service tint underneath the following rounded section. */
.maintenance { padding-bottom:42px; }
.maintenance > .scene-shade { background:rgba(12,27,40,.63); }
.maintenance .repair-links button { background:transparent; }
.maintenance .repair-links button:is(:hover,:focus-visible) { background:#fff; }

.guide .start-heading { margin-top:0; padding-top:0; border-top:0; }

/* A light line illustration balances the customer-review heading. */
.reviews-heading .review-line-art { display:block; flex:0 0 auto; width:clamp(190px,23vw,300px); height:auto; color:var(--brand); margin:0 2vw 4px 0; }
@media(max-width:600px) {
 .reviews-heading { flex-direction:row; align-items:center; gap:12px; }
 .reviews-heading .review-line-art { width:82px; margin:0; }
 .reviews-heading h2 { font-size:clamp(24px,6.3vw,30px); }
}

.reviews-heading .review-line-art { color:#202421; }

.care-process .process-arrow { position:absolute; left:70px; bottom:-12px; width:24px; height:24px; color:var(--brand); }
@media(max-width:1000px) and (min-width:801px), (max-width:600px) { .care-process .process-arrow { left:52px; } }

/* Match the hero leading across the landing-page display headings. */
.about-copy h2,
.management .building-slide .building-content h3,
.reviews-heading h2,
.app-copy h2,
.automation h2,
.start-heading h2,
.faq h2,
.contact-copy h2 {
  line-height:1;
}