/* Brightside Cleaning, round 2. Concept: wiping glass. Everything starts fogged and is wiped clear.
   Tokens first: colour, type scale, spacing scale, grid. */
:root {
  --white: #FFFFFF;
  --blue: #1E6BFF;
  --blue-d: #1556D6;
  --mint: #00C2A8;
  --ink: #0A2540;
  --mist: #E9F1FF;
  --ink-2: #44607F;      /* secondary text, 6.4:1 on white */
  --line: #D9E4F3;
  --line-2: #B4C7E3;
  --fog: #EDF3FB;

  --f: 'Rethink Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* type scale */
  --fs-d: clamp(2.6rem, .9rem + 5.6vw, 6.1rem);
  --fs-1: clamp(2.05rem, 1.15rem + 2.8vw, 4rem);
  --fs-2: clamp(1.32rem, 1.08rem + .75vw, 1.8rem);
  --fs-l: clamp(1.1rem, 1rem + .36vw, 1.34rem);
  --fs-b: 1.0625rem;
  --fs-s: .9375rem;
  --fs-xs: .8125rem;

  /* spacing scale */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px;
  --sec: clamp(96px, 10vw, 152px);   /* the one gap between sections */
  --hd-gap: clamp(36px, 4.4vw, 64px); /* section heading to content */

  /* grid */
  --m: clamp(20px, 4.4vw, 64px);
  --g: clamp(16px, 1.7vw, 28px);
  --maxw: 1520px;

  --hd: 76px;
  --ease: cubic-bezier(.65, 0, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 900px) { :root { --hd: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--fs-b)/1.6 var(--f); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { max-width: 62ch; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* grid */
.w { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--m); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
@media (max-width: 900px) { .g { grid-template-columns: repeat(6, minmax(0, 1fr)); } .g > * { grid-column: 1 / -1 !important; } }

/* type */
.h-d { font-size: var(--fs-d); font-weight: 600; letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.h-1 { font-size: var(--fs-1); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.h-2 { font-size: var(--fs-2); font-weight: 600; letter-spacing: -.02em; line-height: 1.16; text-wrap: balance; }
.lead { font-size: var(--fs-l); line-height: 1.45; max-width: 34em; text-wrap: pretty; }
.ln { padding-bottom: .06em; margin-bottom: -.06em; }

/* buttons and links */
.btn { position: relative; isolation: isolate; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: 600 1rem/1.1 var(--f); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.btn::after { content: ''; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.08) 54%, transparent 60%); transform: translateX(-110%); transition: transform .7s var(--ease); }
.btn:hover::after { transform: translateX(110%); }
.btn:hover { background: var(--blue-d); }
.btn-o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-o:hover { background: var(--ink); color: #fff; }
.btn-o::after { background: linear-gradient(105deg, transparent 38%, rgba(30,107,255,.16) 48%, transparent 58%); }
.btn-s { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn-w { background: #fff; color: var(--blue); }
.btn-w:hover { background: var(--ink); color: #fff; }
.btn-w:focus-visible { outline-color: #fff; }
.lnk { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(30,107,255,.35); transition: text-decoration-color .3s, gap .3s; }
.lnk::after { content: ''; width: 18px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h15.5M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h15.5M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.lnk:hover { text-decoration-color: currentColor; gap: 14px; }

/* ---------------------------------------------------------------- header */
.hd { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hd); transition: background-color .4s, box-shadow .4s; }
.hd.is-solid, body:not(.p-home) .hd { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.hd-in { height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--m); display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.logo-m { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 30px; }
.nav a { position: relative; padding-block: 10px; color: var(--ink); font-weight: 500; text-decoration: none; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd-tel { color: var(--ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-tel:hover { color: var(--blue); }
.menu-b { display: none; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 0 4px 0 10px; border: 0; background: none; cursor: pointer; font-weight: 600; }
.menu-i { position: relative; width: 22px; height: 12px; }
.menu-i i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-i i:first-child { top: 0; } .menu-i i:last-child { top: 10px; }
.menu-b[aria-expanded="true"] .menu-i i:first-child { top: 5px; transform: rotate(45deg); }
.menu-b[aria-expanded="true"] .menu-i i:last-child { top: 5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 55; background: #fff; padding: calc(var(--hd) + 32px) var(--m) 96px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); }
.menu[hidden] { display: none; }
.menu ul { list-style: none; }
.menu li a { display: block; padding: 10px 0; font-size: clamp(2rem, 1.2rem + 4vw, 2.75rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu li a[aria-current] { color: var(--blue); }
.menu-f { display: grid; gap: 6px; margin-top: 40px; color: var(--ink-2); }
.menu-f a { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 1060px) { .hd-tel { display: none; } }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu-b { display: inline-flex; }
  .hd-in { gap: 10px; }
  .hd-cta { min-height: 40px; padding: 0 14px; }
}
@media (max-width: 440px) { .brand .b-2 { display: none; } }
@media (max-width: 360px) { .hd-cta { padding: 0 11px; } .menu-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------------------------------------------------------------- sections */
main { padding-bottom: var(--sec); }
.sec { padding-top: var(--sec); }
.sec-hd { align-items: end; row-gap: 24px; margin-bottom: var(--hd-gap); }
.sec-h { grid-column: 1 / span 7; }
.sec-p { grid-column: 9 / -1; color: var(--ink-2); }
.sec-p.lead { color: var(--ink); }
@media (max-width: 1100px) { .sec-h { grid-column: 1 / span 8; } .sec-p { grid-column: 1 / span 8; } }

/* entrance states, only when motion is allowed and JS runs */
.js.motion [data-in] { opacity: 0; transform: translateY(22px); }
.js.motion [data-split] { visibility: hidden; }

/* ---------------------------------------------------------------- wipe panes: photos that start fogged */
.wp { position: relative; }
.wp-f { position: relative; overflow: hidden; background: var(--mist); }
.wp-f img { width: 100%; height: 100%; object-fit: cover; }
.js.motion .wp:not(.is-clear) .wp-f img { transform: scale(calc(1.07 - var(--p, 0) * .07)); }
.js.motion .wp:not(.is-clear) .wp-f::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(16px) saturate(.5) brightness(1.06); backdrop-filter: blur(16px) saturate(.5) brightness(1.06);
  background: rgba(236, 243, 252, .5);
  clip-path: polygon(calc(var(--p, 0) * 130%) 0, 101% 0, 101% 101%, calc(var(--p, 0) * 130% - 30%) 101%); }
.js.motion .wp:not(.is-clear) .wp-f::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--bo, 0);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.7) 70%, #fff);
  clip-path: polygon(calc(var(--p, 0) * 130% - .7%) 0, calc(var(--p, 0) * 130%) 0, calc(var(--p, 0) * 130% - 30%) 100%, calc(var(--p, 0) * 130% - 30.7%) 100%); }
.wp figcaption { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-s); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1080px; overflow: hidden; background: var(--fog); touch-action: pan-y; }
.hero-img, .hero-img picture { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.js.motion .hero:not(.fog-off):not(.fog-on) .hero-img img { filter: blur(18px) saturate(.55) brightness(1.12); transform: scale(1.06); }
.js.motion .hero:not(.fog-off):not(.fog-on) .hero-img::after { content: ''; position: absolute; inset: 0; background: rgba(234, 241, 251, .58); }
.hero-fog { position: absolute; inset: 0; z-index: 1; }
.hero-fog canvas { opacity: 0; transition: opacity .6s; }
.fog-on .hero-fog canvas { opacity: 1; }
.hero-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 150px), linear-gradient(90deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.26) 34%, rgba(255,255,255,0) 58%); }
.fog-off .hero-veil, .no-js .hero-veil { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 66%); }
.p-home:has(.fog-off) .hd, .no-js .p-home .hd { background: rgba(255,255,255,.94); box-shadow: 0 1px 0 var(--line); }
.hero-c { position: relative; z-index: 3; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-content: end; padding-bottom: clamp(36px, 6.5vh, 76px); }
.hero-h { grid-column: 1 / span 9; max-width: 11.5em; }
.hero-p { grid-column: 1 / span 6; margin-top: clamp(20px, 3vh, 30px); }
.hero-b { grid-column: 1 / span 6; display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.6vh, 36px); }
.hero-b .btn-o { background: rgba(255,255,255,.55); }
.hero-b .btn-o:hover { background: var(--ink); }
.hero-x { grid-column: 8 / -1; grid-row: 3; align-self: end; justify-self: end; display: flex; align-items: center; gap: 18px; }
.hero-hint { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: var(--fs-s); opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s var(--out); }
.hero.hint-on .hero-hint { opacity: 1; transform: none; }
.hero.is-wiped .hero-hint { opacity: 0; transform: translateX(14px); }
.hint-i { width: 40px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hint-on:not(.is-wiped) .hint-i { animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.wipe-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1.5px solid rgba(10,37,64,.28); border-radius: 10px; background: rgba(255,255,255,.62); color: var(--ink); font-weight: 600; font-size: var(--fs-s); cursor: pointer; transition: background-color .3s, border-color .3s; }
.wipe-b:hover { background: #fff; border-color: var(--ink); }
.wipe-b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fog-off .hero-x, .no-js .hero-x { display: none; }
.sq { position: absolute; left: 0; top: 0; z-index: 2; width: auto; height: 400px; opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.sq-c { fill: #EEF3FA; stroke: #8FA6C4; stroke-width: 2; }
.sq-k { fill: #C9D6E8; stroke: #8FA6C4; stroke-width: 2; }
.sq-r { fill: var(--ink); }
.sq-h { stroke: var(--blue); stroke-width: 15; stroke-linecap: round; }
.sq-g { stroke: var(--ink); stroke-width: 17; stroke-linecap: round; }
@media (max-width: 900px) {
  .hero { min-height: 600px; }
  .hero-c { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-bottom: 84px; }
  .hero-h, .hero-p, .hero-b { grid-column: 1 / -1; }
  .hero-x { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; justify-content: space-between; margin-top: 16px; gap: 14px; white-space: nowrap; }
  .hero-veil { background: linear-gradient(0deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.4) 46%, rgba(255,255,255,0) 72%); }
  .fog-off .hero-veil, .no-js .hero-veil { background: linear-gradient(0deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.8) 52%, rgba(255,255,255,0) 74%); }
}
@media (max-width: 520px) {
  .hero-b .btn { flex: 1 1 auto; padding: 0 16px; }
}

/* ---------------------------------------------------------------- services, sticky window */
.svc-g { align-items: start; --fh: min(calc(100vh - var(--hd) - 132px), 720px); }
.svc-fr { grid-column: 1 / span 7; position: sticky; top: calc(var(--hd) + 24px); height: var(--fh); display: flex; flex-direction: column; }
.svc-win { position: relative; flex: 1; overflow: hidden; background: var(--mist); }
.svc-ph { position: absolute; inset: 0; --p: 0; clip-path: polygon(0 0, calc(var(--p) * 130%) 0, calc(var(--p) * 130% - 30%) 100%, 0 100%); }
.svc-ph[data-i="0"] { --p: 1; }
.svc-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 - var(--p) * .06)); }
.svc-blade { position: absolute; inset: 0; z-index: 3; pointer-events: none; --p: 0; opacity: 0; background: #fff;
  clip-path: polygon(calc(var(--p) * 130% - .5%) 0, calc(var(--p) * 130% + .2%) 0, calc(var(--p) * 130% - 29.8%) 100%, calc(var(--p) * 130% - 30.5%) 100%); }
.svc-caps { display: grid; margin-top: 14px; }
.svc-cap { grid-area: 1 / 1; color: var(--ink-2); font-size: var(--fs-s); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--out); }
.svc-cap.is-on { opacity: 1; transform: none; }
.svc-l { grid-column: 9 / -1; }
.svc-b { min-height: calc(var(--fh) * .84); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.svc-b:first-child { min-height: calc(var(--fh) - 34px); justify-content: flex-start; padding-top: 0; }
.svc-b:last-child { min-height: calc(var(--fh) - 34px); justify-content: flex-end; padding-bottom: 0; }
.svc-b > p:not(.svc-n) { color: var(--ink); }
.svc-n { color: var(--ink-2); font-size: var(--fs-s); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.svc-b h3 { margin-bottom: 18px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem); letter-spacing: -.03em; }
.svc-m { display: none; }
.spec { margin: 28px 0 30px; border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.spec dt { color: var(--ink-2); }
.spec dd { font-weight: 500; }
@media (max-width: 1100px) { .svc-fr { grid-column: 1 / span 6; } .svc-l { grid-column: 8 / -1; } }
@media (max-width: 900px) {
  .svc-fr { display: none; }
  .svc-l { grid-column: 1 / -1; display: grid; gap: 72px; }
  .svc-b { min-height: 0; padding: 0; }
  .svc-m { display: block; margin-bottom: 24px; }
  .svc-m .wp-f { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- checklists */
.chk { list-style: none; }
.chk-i { display: grid; grid-template-columns: 28px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.chk-t { color: var(--ink-2); transition: color .4s; }
.chk-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--blue); white-space: nowrap; }
.tk { width: 28px; height: 28px; overflow: visible; }
.tk-b { fill: #fff; stroke: var(--line-2); stroke-width: 1.5; transition: fill .35s, stroke .35s; }
.tk-p { fill: none; stroke: #fff; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: var(--t, 1); }
.chk-i.is-on .tk-b { fill: var(--mint); stroke: var(--mint); }
.chk-i.is-on .chk-t { color: var(--ink); }
html:not(.motion) .chk .tk-b, .no-js .chk .tk-b { fill: var(--mint); stroke: var(--mint); }
html:not(.motion) .chk .tk-p, .no-js .chk .tk-p { stroke-dashoffset: 0; }
html:not(.motion) .chk-t, .no-js .chk-t { color: var(--ink); }
.chk-lg .chk-i { padding: 19px 0; font-size: var(--fs-l); line-height: 1.35; gap: 20px; }
.chk-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.chk-name { font-weight: 600; font-size: 1.125rem; }
.chk-cnt { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.chs-g { align-items: start; }
.chs-t { grid-column: 1 / span 5; }
.chs-t .lead { margin-top: 24px; }
.chs-t .lnk { margin-top: 24px; }
.chs-ph { margin-top: 48px; }
.chs-ph .wp-f { aspect-ratio: 5 / 4; }
.chs-l { grid-column: 7 / -1; padding-top: 10px; }
@media (max-width: 900px) {
  .chs-l { margin-top: 40px; padding: 0; }
  .chs-ph { margin-top: 40px; }
  .chs-g .chs-t { display: contents; }
  .chs-t > * { grid-column: 1 / -1; }
  .chs-t .h-1 { order: 1; } .chs-t .lead { order: 2; } .chs-l { order: 3; } .chs-t .lnk { order: 4; justify-self: start; margin-top: 28px; } .chs-ph { order: 5; }
}

/* ---------------------------------------------------------------- segmented controls */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--mist); }
.seg-b { min-height: 44px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-weight: 500; font-size: var(--fs-s); cursor: pointer; transition: background-color .3s, color .3s; }
.seg-b:hover { background: rgba(10,37,64,.07); }
.seg-b[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- prices */
.prs-hd .sec-p { grid-column: 1 / span 6; grid-row: 2; }
.prs-seg { grid-column: 9 / -1; grid-row: 2; justify-self: end; align-self: end; }
.pr-row { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.pr-c { display: flex; flex-direction: column; padding: 32px 20px 30px; border-right: 1px solid var(--line); }
.pr-c:first-child { padding-left: 0; }
.pr-c:last-child { border-right: 0; padding-right: 0; }
.pr-pl { height: 150px; display: flex; align-items: flex-end; margin-bottom: 28px; }
.pr-pl .plan { width: calc(var(--pw) * 1.12px); }
.plan { height: auto; max-width: 100%; overflow: visible; }
.pl-o { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.pl-bed { fill: var(--mist); stroke: var(--ink); stroke-width: 1.1; }
.pl-bath { fill: rgba(0,194,168,.24); stroke: var(--ink); stroke-width: 1.1; }
.pl-l { stroke: var(--ink); stroke-width: 1.1; }
.pr-n { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.pr-t { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-s); }
.pr-v { margin-top: auto; padding-top: 22px; font-size: clamp(1.7rem, 1.25rem + 1vw, 2.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-u { font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
[data-mode="reg"] .m-deep, [data-mode="deep"] .m-reg { display: none; }
.pr-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 22px; max-width: none; color: var(--ink-2); font-size: var(--fs-s); }
.pr-key span { display: inline-flex; align-items: center; gap: 8px; }
.pr-key i { width: 14px; height: 14px; border: 1.1px solid var(--ink); }
.k-bed { background: var(--mist); }
.k-bath { background: rgba(0,194,168,.24); }
.prs-f { margin-top: 16px; max-width: none; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.pr-row.is-swap .pr-v, .pr-row.is-swap .pr-t { animation: swap .5s var(--out); }
@keyframes swap { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
@media (max-width: 1100px) { .prs-hd .sec-p { grid-column: 1 / span 7; } .prs-seg { grid-column: 8 / -1; } }
@media (max-width: 900px) {
  .prs-hd .sec-p, .prs-seg { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .pr-row { grid-template-columns: 1fr; }
  .pr-c { display: grid; grid-template-columns: 76px 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .pr-c + .pr-c { padding-left: 0; }
  .pr-pl { grid-row: 1 / span 2; height: auto; margin: 0; justify-content: flex-start; }
  .pr-pl .plan { width: calc(var(--pw) * .4px); }
  .pr-n { grid-column: 2; }
  .pr-t { grid-column: 2; grid-row: 2; margin: 0; }
  .pr-v { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; text-align: right; font-size: 1.5rem; }
  .pr-u { display: block; }
}

/* ---------------------------------------------------------------- team */
.tm-g { align-items: end; }
.tm-t { grid-column: 1 / span 5; padding-bottom: 8px; }
.tm-t .lead { margin-top: 26px; }
.tm-t p:not(.lead) { margin-top: 18px; color: var(--ink-2); }
.tm-ph { grid-column: 7 / -1; margin-right: calc(var(--m) * -1); }
.tm-ph .wp-f { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .tm-ph { order: -1; margin: 0 calc(var(--m) * -1) 40px; } }

/* ---------------------------------------------------------------- estimate panel */
.p-home main { padding-bottom: 0; }
.est { background: var(--blue); color: #fff; margin-top: var(--sec); padding-top: 0; }
.est-p { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; padding-block: clamp(72px, 8vw, 128px); }
.est-t { grid-column: 1 / span 6; }
.est-t p { margin-top: 20px; }
.est-f { grid-column: 1 / span 7; display: grid; gap: 22px; }
.est-q { display: grid; gap: 10px; }
.est-l { font-weight: 600; font-size: var(--fs-s); }
.seg-w { background: rgba(255,255,255,.14); justify-self: start; }
.seg-w .seg-b { color: #fff; }
.seg-w .seg-b:hover { background: rgba(255,255,255,.16); }
.seg-w .seg-b[aria-pressed="true"] { background: #fff; color: var(--ink); }
.seg-w .seg-b:focus-visible { outline-color: #fff; }
.est-o { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; display: grid; gap: 10px; justify-items: start; }
.est-v { font-size: clamp(3.4rem, 2rem + 4.4vw, 6.4rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.est-u { font-size: 1.125rem; font-weight: 500; letter-spacing: 0; }
.est-n { font-weight: 700; }
.est-o .btn { margin-top: 12px; }
@media (max-width: 1100px) { .est-f { grid-column: 1 / span 8; } .est-o { grid-column: 9 / -1; } }
@media (max-width: 900px) {
  .est-p { grid-template-columns: 1fr; padding-block: 64px 72px; }
  .est-t, .est-f, .est-o { grid-column: 1; grid-row: auto; }
  .seg-w { display: flex; width: 100%; }
  .seg-w .seg-b { flex: 1 1 auto; padding: 0 12px; }
}

/* ---------------------------------------------------------------- footer */
.ft { background: var(--ink); color: #fff; padding: 80px 0 104px; }
.ft-g { row-gap: 40px; }
.ft-brand { grid-column: 1 / span 4; }
.brand-ft { color: #fff; margin: 0; }
.ft-brand p { margin-top: 20px; color: rgba(255,255,255,.82); max-width: 30em; }
.ft-col { grid-column: span 2; }
.ft-col:nth-of-type(2) { grid-column: 7 / span 2; }
.ft-col:last-child { grid-column: 10 / -1; }
.ft-col h2 { font-size: var(--fs-s); font-weight: 600; color: var(--mint); margin-bottom: 14px; }
.ft-col ul { list-style: none; display: grid; gap: 8px; color: rgba(255,255,255,.86); }
.ft a { color: #fff; text-decoration: none; }
.ft a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft :focus-visible { outline-color: var(--mint); }
.ft-b { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.ft-cr summary { cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.ft-cr p { margin-top: 10px; color: rgba(255,255,255,.78); font-size: var(--fs-s); max-width: 70ch; }
.ft-sb { color: rgba(255,255,255,.78); font-size: var(--fs-s); padding-top: 11px; white-space: nowrap; }
@media (max-width: 1100px) { .ft-brand { grid-column: 1 / span 5; } .ft-col { grid-column: span 2 !important; } }
@media (max-width: 900px) { .ft-brand { grid-column: 1 / -1; } .ft-col, .ft-col:nth-of-type(2), .ft-col:last-child { grid-column: span 3 !important; } .ft-b { flex-direction: column; } }
@media (max-width: 520px) { .ft-col, .ft-col:nth-of-type(2), .ft-col:last-child { grid-column: 1 / -1 !important; } }

/* ---------------------------------------------------------------- inner page head */
.ph { padding-top: calc(var(--hd) + clamp(56px, 8vw, 120px)); }
.ph-g { row-gap: 0; }
.ph-h { grid-column: 1 / span 8; }
.ph-p { grid-column: 1 / span 6; margin-top: 28px; }
.ph-seg { grid-column: 1 / span 6; justify-self: start; margin-top: 36px; }
.ph-ph { grid-column: 9 / -1; grid-row: 1 / span 3; align-self: end; }
.ph-ph .wp-f { aspect-ratio: 1 / 1; }
.ph-c-t { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; padding-top: 22px; border-top: 1.5px solid var(--ink); }
.ph-c-t .eo-h { color: var(--ink); }
.ph-c-t p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-s); }
.ph-c-t a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ph-c-t a:hover { color: var(--blue); }
.ph-c-t .ph-tel { margin-top: 12px; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); letter-spacing: -.03em; color: var(--ink); }
.band { background: var(--blue); color: #fff; margin-top: var(--sec); padding-block: clamp(72px, 8vw, 128px); }
.band :focus-visible { outline-color: #fff; }
.p-how main { padding-bottom: 0; }
.btn-ow { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.btn-ow:hover { background: #fff; color: var(--blue); }
@media (max-width: 900px) {
  .ph-ph { grid-row: auto; margin-top: 40px; }
  .ph-ph .wp-f { aspect-ratio: 3 / 2; }
  .ph-c-t { grid-row: auto; margin-top: 36px; }
}

/* ---------------------------------------------------------------- cleans page */
.cl-g { align-items: start; padding-top: clamp(56px, 6vw, 96px); }
.cl-nav { grid-column: 1 / span 3; position: sticky; top: calc(var(--hd) + 32px); }
.cl-nav ol { list-style: none; border-top: 1.5px solid var(--ink); }
.cl-nav a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0 15px; text-decoration: none; border-bottom: 1px solid var(--line); }
.cn-t { font-weight: 600; transition: color .3s; }
.cn-c { color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.cn-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.cn-bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(var(--cp, 0)); transition: transform .3s; }
.cl-nav a.is-on .cn-t, .cl-nav a:hover .cn-t { color: var(--blue); }
.cl-rooms { grid-column: 5 / -1; }
.room + .room { margin-top: var(--sec); }
.room-hd .lead { margin-top: 20px; }
.room-g { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); margin-top: 40px; align-items: start; }
.room-ph { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 32px); padding-bottom: 14%; }
.room-m .wp-f { aspect-ratio: 4 / 5; }
.room-in { position: absolute; right: 0; bottom: 0; width: 50%; border: 6px solid #fff; border-right: 0; border-bottom: 0; background: #fff; }
.room-in .wp-f { aspect-ratio: 4 / 3; }
.room-l { grid-column: 5 / -1; }
.room-l .chk { border-top: 1.5px solid var(--ink); }
.room-n { margin-top: 20px; color: var(--ink-2); font-size: var(--fs-s); }
[data-mode="reg"] .chk-i[data-deep] { display: none; }
.xs-g { row-gap: 56px; }
.xs-a { grid-column: 1 / span 6; }
.xs-a > p { margin-top: 20px; color: var(--ink-2); }
.xs-b { grid-column: 8 / -1; padding-top: 12px; }
.xs-b p { margin-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.xs-b .h-2 { margin-bottom: 8px; }
.xs-b .btn { margin-top: 28px; }
.ex { list-style: none; margin-top: 28px; border-top: 1.5px solid var(--ink); }
.ex li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ex-p { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .cl-nav { grid-column: 1 / span 3; } .cl-rooms { grid-column: 4 / -1; } .room-ph { grid-column: 1 / span 3; } .room-l { grid-column: 4 / -1; } }
@media (max-width: 900px) {
  .cl-g { padding-top: 32px; }
  .cl-nav { position: sticky; top: var(--hd); z-index: 20; margin-inline: calc(var(--m) * -1); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .cl-nav ol { display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--m); border: 0; scrollbar-width: none; }
  .cl-nav ol::-webkit-scrollbar { display: none; }
  .cl-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 9px; white-space: nowrap; gap: 8px; }
  .cl-nav a.is-on { border-color: var(--ink); }
  .cn-c { display: none; }
  .cn-bar { left: 10px; right: 10px; bottom: 5px; }
  .cl-rooms { grid-column: 1 / -1; margin-top: 40px; }
  .room-g { grid-template-columns: 1fr; row-gap: 28px; margin-top: 28px; }
  .room-ph, .room-l { grid-column: 1; position: static; }
  .room-ph { padding-bottom: 18%; }
  .room-m .wp-f { aspect-ratio: 4 / 3; }
  .room-in { width: 46%; border-width: 5px 0 0 5px; }
  .xs-a, .xs-b { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- how page */
.sts-g { align-items: start; }
.sts-h { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 32px); }
.steps { grid-column: 6 / -1; list-style: none; position: relative; counter-reset: st; }
.st { display: grid; grid-template-columns: 48px 1fr 8em; gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.st:first-of-type { padding-top: 6px; }
.st-n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; font-weight: 600; transition: background-color .4s, color .4s, border-color .4s; }
.st.is-on .st-n { background: var(--blue); border-color: var(--blue); color: #fff; }
.st-b p { margin-top: 10px; color: var(--ink-2); }
.st-w { text-align: right; color: var(--ink-2); font-size: var(--fs-s); padding-top: 4px; }
.st-line { position: absolute; left: 21px; top: 30px; bottom: 60px; width: 2px; background: var(--line); }
.st-line i { display: block; height: 100%; background: var(--blue); transform-origin: top; transform: scaleY(var(--sp, 1)); }
.tb-w { overflow-x: auto; }
.tb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tb th, .tb td { text-align: left; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb thead th { padding-block: 0 14px; font-weight: 500; color: var(--ink-2); font-size: var(--fs-s); border-bottom: 1.5px solid var(--ink); }
.tb th[scope="row"] { font-weight: 600; font-size: 1.0625rem; }
.tb td strong { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.tb td span { color: var(--ink-2); font-size: var(--fs-s); }
.tb-home th[scope="row"] { display: flex; align-items: center; gap: 20px; }
.tb-pl { width: 96px; flex: none; display: flex; align-items: flex-end; }
.pt-g { margin-top: 72px; row-gap: 56px; }
.pt-c { grid-column: span 4; }
.pt-c > p { margin-top: 12px; color: var(--ink-2); }
.pt-c .tb, .pt-c .ex { margin-top: 24px; }
.tb-s td strong { font-size: 1.125rem; display: inline; margin-right: 8px; }
.br-g { align-items: start; }
.br-t { grid-column: 1 / span 5; }
.br-t .lead { margin-top: 24px; }
.br-ph { margin-top: 44px; }
.br-ph .wp-f { aspect-ratio: 4 / 5; }
.br-l { grid-column: 7 / -1; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); border-top: 1.5px solid var(--ink); }
.br-l li { padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.br-l h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.br-l p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-s); }
.fq-g { align-items: start; }
.fq-t { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 32px); }
.fq-t p { margin-top: 20px; color: var(--ink-2); }
.fq-t a { color: var(--blue); font-weight: 600; }
.fq-l { grid-column: 6 / -1; border-top: 1.5px solid var(--ink); }
.fq { border-bottom: 1px solid var(--line); }
.fq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 68px; padding: 14px 0; cursor: pointer; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary i { position: relative; width: 18px; height: 18px; flex: none; }
.fq summary i::before, .fq summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink); transition: transform .4s var(--ease); }
.fq summary i::after { transform: rotate(90deg); }
.fq[open] summary i::after { transform: rotate(0); }
.fq summary:hover { color: var(--blue); }
.fq-a { padding: 0 0 24px; }
.fq-a p { color: var(--ink-2); }
.motion .fq[open] .fq-a { animation: fq .5s var(--out); }
@keyframes fq { from { opacity: 0; transform: translateY(-6px); filter: blur(4px); } }
.cta-g { align-items: end; row-gap: 24px; }
.cta-g .h-1 { grid-column: 1 / span 6; }
.cta-g p { grid-column: 1 / span 6; grid-row: 2; }
.cta-b { grid-column: 8 / -1; grid-row: 1 / span 2; justify-self: end; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1100px) { .steps { grid-column: 5 / -1; } .pt-c { grid-column: span 6; } .br-l { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .sts-h, .fq-t { position: static; }
  .steps { margin-top: 40px; }
  .st { grid-template-columns: 44px 1fr; gap: 18px; }
  .st-w { grid-column: 2; text-align: left; padding: 0; margin-top: -8px; }
  .tb-pl { display: none; }
  .tb th, .tb td { padding-right: 12px; }
  .tb td strong { font-size: 1.125rem; }
  .tb-home td span { display: block; font-size: var(--fs-xs); line-height: 1.35; }
  .tb th[scope="row"] { font-size: var(--fs-s); }
  .pt-c { grid-column: 1 / -1; }
  .br-l { margin-top: 40px; grid-template-columns: 1fr; }
  .fq-l { margin-top: 36px; }
  .cta-b { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* ---------------------------------------------------------------- contact page */
.qf-s { padding-top: clamp(48px, 5vw, 80px); }
.qf-g { align-items: start; }
.qf { grid-column: 1 / span 7; }
.qf-f { border: 0; padding: 0; margin: 0 0 56px; min-width: 0; }
.qf-f[hidden] { display: none; }
.qf-f legend { padding: 0; margin-bottom: 18px; }
.tcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tc { position: relative; display: grid; align-content: start; border: 1.5px solid var(--line-2); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.tc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tc-i { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.tc-i img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(1.08) blur(1.5px); opacity: .75; transition: filter .5s, opacity .5s, transform .6s var(--out); }
.tc:hover .tc-i img { opacity: .9; }
.tc:has(input:checked) .tc-i img { filter: none; opacity: 1; }
.tc-t { padding: 14px 16px 0; font-weight: 600; }
.tc-s { padding: 2px 16px 16px; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.4; }
.tc:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.tc:has(input:focus-visible) { outline: 2.5px solid var(--blue); outline-offset: 3px; }
.qf-r { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.qf-r:first-of-type { border-top: 1.5px solid var(--ink); }
.qf-l { font-weight: 600; }
.seg-f { justify-self: start; }
.seg-r { position: relative; cursor: pointer; }
.seg-r input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-r span { display: grid; place-items: center; min-width: 50px; min-height: 44px; padding: 0 14px; border-radius: 9px; font-weight: 500; transition: background-color .3s, color .3s; }
.seg-r:hover span { background: rgba(10,37,64,.07); }
.seg-r input:checked + span { background: var(--ink); color: #fff; }
.seg-r input:focus-visible + span { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.sel { position: relative; justify-self: start; }
.sel::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sel select { -webkit-appearance: none; appearance: none; min-height: 48px; min-width: 15em; padding: 0 44px 0 14px; border: 1.5px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.rl { border-top: 1.5px solid var(--ink); }
.rd, .ck { position: relative; display: grid; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rd { grid-template-columns: 24px 1fr; }
.rd input, .ck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rd-b { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; transition: border .25s; }
.rd input:checked + .rd-b { border: 7px solid var(--blue); }
.rd input:focus-visible + .rd-b, .ck input:focus-visible + .ck-b { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 50%; }
.ck input:focus-visible + .ck-b { border-radius: 8px; }
.rd:hover .rd-t, .ck:hover .ck-t { color: var(--blue); }
.cks { border-top: 1.5px solid var(--ink); }
.ck { grid-template-columns: 28px 1fr auto; }
.ck-1 { border: 0; padding: 0; }
.qf-r:has(.ck-1) { grid-template-columns: 1fr; }
.ck-b .tk-p { stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--ease); }
.ck input:checked + .ck-b .tk-b { fill: var(--mint); stroke: var(--mint); }
.ck input:checked + .ck-b .tk-p { stroke-dashoffset: 0; }
.ck-p { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: var(--fs-s); }
.fl-g { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fl-w { grid-column: 1 / -1; }
.fl label { display: block; margin-bottom: 8px; font-weight: 600; font-size: var(--fs-s); }
.fl input, .fl textarea { width: 100%; min-height: 52px; padding: 13px 14px; border: 1.5px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; transition: border-color .25s, box-shadow .25s; }
.fl textarea { resize: vertical; }
.fl input:focus, .fl textarea:focus, .sel select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,107,255,.2); }
.fl input::placeholder, .fl textarea::placeholder { color: #6E84A0; }
.fl input[aria-invalid="true"] { border-color: #C2253C; }
.qf-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.qf-demo { color: var(--ink-2); font-size: var(--fs-s); }
.qf-ok { margin-top: 32px; padding: 32px; background: var(--ink); color: #fff; }
.qf-ok p { margin-top: 12px; color: rgba(255,255,255,.86); }
.qf-ok:focus { outline: none; }
.eo { grid-column: 9 / -1; position: sticky; top: calc(var(--hd) + 24px); }
.eo-in { padding: clamp(24px, 2.6vw, 36px); background: var(--ink); color: #fff; }
.eo-h { font-size: 1rem; font-weight: 600; color: var(--mint); }
.eo-v { margin-top: 18px; font-size: clamp(3rem, 2rem + 2.6vw, 4.75rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.eo-u { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; }
.eo-d { margin-top: 14px; }
.eo-x { list-style: none; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }
.eo-x:empty { display: none; }
.eo-x li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: var(--fs-s); }
.eo-n { margin-top: 20px; font-weight: 700; }
.eo-m { display: none; }
.eo-v.is-swap { animation: swap .45s var(--out); }
@media (max-width: 1100px) { .qf { grid-column: 1 / span 7; } .eo { grid-column: 8 / -1; } .tcs { grid-template-columns: 1fr; } .tc { grid-template-columns: 120px 1fr; } .tc-i { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; } .tc-t { padding-top: 16px; } }
@media (max-width: 900px) {
  .qf, .eo { grid-column: 1 / -1; }
  .eo { position: static; margin-top: 8px; }
  .eo-m { position: sticky; top: var(--hd); z-index: 20; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 calc(var(--m) * -1) 40px; padding: 12px var(--m); background: var(--ink); color: #fff; }
  .eo-m strong { font-size: 1.5rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .eo-m span { font-size: var(--fs-s); }
  .qf-r { grid-template-columns: 1fr; gap: 10px; }
  .fl-g { grid-template-columns: 1fr; }
  .sel select { min-width: 0; width: 100%; }
  .sel { justify-self: stretch; }
}

/* ---------------------------------------------------------------- page transitions: one diagonal wipe */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-fog .75s var(--ease) both; }
::view-transition-new(root) { animation: vt-wipe .75s var(--ease) both; }
@keyframes vt-wipe {
  from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
  to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); }
}
@keyframes vt-fog { to { filter: blur(10px) saturate(.5) brightness(1.08); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.est :focus-visible { outline-color: #fff; }