/* =========================================================
   Jacob Allen — Web Design
   Live-tile theme. Myriad Pro is self-hosted from /fonts,
   with Segoe UI as the fallback.
   ========================================================= */

@font-face { font-family: "Myriad Pro"; src: url("fonts/MyriadPro-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Myriad Pro"; src: url("fonts/MYRIADPRO-REGULAR.OTF") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Myriad Pro"; src: url("fonts/MYRIADPRO-SEMIBOLD.OTF") format("opentype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #000;
  --surface: #0e0e0e;
  --surface-2: #151515;
  --surface-3: #1c1c1c;
  --text: #fff;
  --text-2: rgba(255, 255, 255, 0.62);
  --text-3: rgba(255, 255, 255, 0.38);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.18);
  --ink: #000;
  --font: "Myriad Pro", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --bar-h: 72px;
  --gap: 4px;
  --pad: clamp(20px, 2vw, 32px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-padding-top: calc(var(--bar-h) + 24px); }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 300; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; background: #fff; color: #000; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Top bar: Metro pivot ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.bar.is-scrolled { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--line); }
.bar-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--bar-h); display: flex; align-items: center; gap: clamp(20px, 4vw, 48px);
}
.brand { display: flex; align-items: center; flex: none; }
.brand-name { font-size: 19px; line-height: 1; white-space: nowrap; }
.brand-sep { color: rgba(255, 255, 255, 0.3); margin: 0 4px; }
.brand-sub { color: var(--text-2); transition: color 0.25s; }
.brand:hover .brand-sub { color: #fff; }

.pivot { position: relative; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); flex: 1; height: 100%; }
.pivot a {
  font-size: 21px; font-weight: 300; letter-spacing: -0.01em; text-transform: lowercase;
  color: rgba(255, 255, 255, 0.42); transition: color 0.25s; white-space: nowrap; padding: 6px 0;
}
.pivot a:hover, .pivot a[aria-current="page"] { color: #fff; }
.pivot-ind {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: #fff;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
}

/* Menu button: phones only */
.menu-btn { display: none; }

/* Phones: brand, quote and a menu button; the pivot opens as a full-screen glass menu */
@media (max-width: 860px) {
  :root { --bar-h: 64px; }
  .bar-inner { gap: 12px; }
  .brand { flex: 1; min-width: 0; }
  .bar .quote { height: 36px; padding: 0 14px; font-size: 14px; }
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -10px;
    position: relative; z-index: 2;
  }
  .menu-btn i { position: absolute; width: 22px; height: 1.5px; background: #fff; transition: transform 0.45s var(--ease-out); }
  .menu-btn i:first-child { transform: translateY(-4px); }
  .menu-btn i:last-child { transform: translateY(4px); }
  .menu-open .menu-btn i:first-child { transform: rotate(45deg); }
  .menu-open .menu-btn i:last-child { transform: rotate(-45deg); }

  .pivot {
    position: fixed; inset: 0; z-index: -1; height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    padding: var(--bar-h) var(--gutter) 40px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0.35s;
  }
  .menu-open .pivot { opacity: 1; visibility: visible; }
  .pivot a {
    font-size: clamp(40px, 12vw, 56px); letter-spacing: -0.03em; padding: 2px 0; color: rgba(255, 255, 255, 0.55);
    opacity: 0; transform: translateX(-24px); transition: opacity 0.4s, transform 0.6s var(--ease-out), color 0.25s;
  }
  .pivot a[aria-current="page"] { color: #fff; }
  .menu-open .pivot a { opacity: 1; transform: none; }
  .menu-open .pivot a:nth-child(2) { transition-delay: 0.04s; }
  .menu-open .pivot a:nth-child(3) { transition-delay: 0.08s; }
  .menu-open .pivot a:nth-child(4) { transition-delay: 0.12s; }
  .menu-open .pivot a:nth-child(5) { transition-delay: 0.16s; }
  .menu-open .pivot a:nth-child(6) { transition-delay: 0.2s; }
  .pivot-ind { display: none; }
  /* The glass bar would trap the fixed menu inside it, so drop its blur while open */
  .menu-open .bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-color: transparent; box-shadow: none; }
  .menu-open { overflow: hidden; }
  .pivot { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 420px) { .bar .quote { display: none; } }

/* ---------- Buttons & links ---------- */
.quote, .btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 400;
  border: 1px solid #fff;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.btn { height: 48px; padding: 0 22px; }
.quote:hover, .btn:hover { background: #e6e6e6; border-color: #e6e6e6; }
.quote:active, .btn:active { transform: scale(0.96); }
.btn-ghost { background: transparent; color: #fff; border-color: var(--line-2); }
.btn-ghost:hover { background: transparent; border-color: #fff; }
.btn > span > i { font-style: normal; }
.btn > span > i + i { display: none; }
.quote svg, .btn svg, .link-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease-out); }
.quote:hover svg, .btn:hover svg, .link-arrow:hover svg { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; white-space: nowrap; padding: 8px 0; border-bottom: 1px solid var(--line-2); transition: border-color 0.3s; }
.link-arrow b { font-weight: 400; }
.link-arrow:hover { border-color: #fff; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Text ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label { display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-3); }
.display { font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; font-size: clamp(46px, min(8.2vw, 14vh), 128px); }
.display-md { font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-size: clamp(36px, 5.2vw, 80px); }
.display em, .display-md em, .lit em { font-style: normal; color: var(--text-3); }
.line { display: block; }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--text-2); max-width: 560px; }
.lede strong { color: var(--text); font-weight: 400; }
.lit { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.15; letter-spacing: -0.02em; max-width: 1080px; margin-top: 18px; }

/* Page intro */
.hero, .page-hero { padding-top: clamp(48px, 9vw, 128px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero .label, .page-hero .label { margin-bottom: 24px; }
.hero-foot, .page-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 48px); }
.page-hero-foot { margin-top: 0; }
.page-hero-foot .lede { max-width: 440px; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.section { padding-top: clamp(72px, 10vw, 144px); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head .label { margin-bottom: 18px; }

/* Plain-text band between tile groups */
.band { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.band .label { margin-bottom: 18px; }
.points { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.points li { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; }
.points .n { font-size: 12px; color: var(--text-3); padding-top: 5px; font-variant-numeric: tabular-nums; }
.points h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.25; }
.points p { font-size: 16px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 1000px) { .points { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .band { grid-template-columns: 1fr; } }

/* ---------- Tiles ---------- */
.tiles {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(170px, 17vw, 250px);
  grid-auto-flow: dense;
}
.tiles-5 { grid-template-columns: repeat(5, 1fr); grid-auto-rows: clamp(110px, 11vw, 160px); }
.tiles-roomy { grid-auto-rows: clamp(210px, 19vw, 270px); }
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(150px, 42vw, 240px); }
  .tiles-5 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(96px, 28vw, 150px); }
  .tiles-roomy { grid-auto-rows: clamp(230px, 72vw, 300px); }
}

.mtile {
  position: relative; overflow: hidden; isolation: isolate; display: block;
  background: var(--surface);
  transition: background-color 0.4s, transform 0.25s var(--ease-out);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
}
a.mtile:hover { background: var(--surface-3); }
.mtile-lg { grid-column: span 2; grid-row: span 2; }
.mtile-wide { grid-column: span 2; }
.mtile-tall { grid-row: span 2; }
.mtile-light { background: var(--text); color: var(--ink); }
a.mtile-light:hover { background: #e9e9e9; }

.mtile-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: grayscale(1) brightness(0.5) contrast(1.1); transform: scale(1.04);
  transition: transform 1.4s var(--ease-out), filter 0.8s; z-index: -1;
}
.mtile:hover .mtile-img { transform: scale(1.1); filter: grayscale(1) brightness(0.58) contrast(1.1); }

/* Faces slide up one after another */
.mtile-face {
  position: absolute; inset: 0; padding: var(--pad);
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(100%);
  transition: transform 0.8s var(--ease-out);
}
.mtile-face.is-in, .mtile-face:only-of-type { transform: none; }
.mtile-face.is-out { transform: translateY(-100%); }
.mtile-face.instant { transition: none; }
.mtile-lg .mtile-face-b, .mtile-shot .mtile-face-b { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.mtile-face > svg, .mtile-ico { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.mtile-name { display: block; font-weight: 300; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.02em; line-height: 1.05; }
.mtile-lg .mtile-name { font-size: clamp(36px, 4vw, 64px); }
.mtile-face p { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.4; color: var(--text-2); max-width: 460px; }
.mtile-face p strong { color: var(--text); font-weight: 400; }
.mtile-light .mtile-face p, .mtile-light .label { color: rgba(0, 0, 0, 0.5); }
.mtile-light .mtile-face p strong { color: var(--ink); }
.mtile-more { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; font-weight: 400; }
.mtile-more b { font-weight: 400; }
.mtile-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mtile-count { position: absolute; top: var(--pad); right: var(--pad); z-index: 2; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mtile-light .mtile-count { color: rgba(0, 0, 0, 0.4); }
.mtile-big { display: block; font-weight: 300; font-size: clamp(48px, 5.4vw, 88px); letter-spacing: -0.04em; line-height: 0.9; }
.mtile-big small { font-size: 0.3em; letter-spacing: 0; color: var(--text-2); margin-left: 6px; }
.tprice { display: block; font-weight: 300; font-size: clamp(34px, 3.2vw, 52px); letter-spacing: -0.03em; line-height: 1; }
.tprice small { display: block; font-size: 13px; letter-spacing: 0; color: var(--text-2); margin-top: 8px; }
.mtile-face a { position: relative; z-index: 2; }
.mtile-face .rich a { border-bottom: 1px solid var(--line-2); }

/* Small text-only tiles (styles on the work page) */
.chip { display: flex; align-items: flex-end; padding: 16px 18px; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.01em; }
.chip:nth-child(3n+1) { background: var(--surface-2); }

@media (max-width: 640px) { .mtile-face p { font-size: 15px; } }

/* Turnstile in, per group, as it scrolls into view */
.js .mtile { opacity: 0; }
.loaded .tiles.ready .mtile {
  opacity: 1;
  animation: turn-in 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--col, 0) * 60ms + var(--row, 0) * 40ms);
}
@keyframes turn-in  { from { opacity: 0; transform: perspective(900px) rotateY(-70deg) translateX(-30px); transform-origin: left center; } to { opacity: 1; transform: none; } }

/* ---------- Work ---------- */
.project { padding-top: clamp(56px, 7vw, 96px); }
.project-text { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: var(--pad) 0 var(--pad) clamp(8px, 3vw, 48px); }
.project:nth-child(even) .project-text { order: -1; padding: var(--pad) clamp(8px, 3vw, 48px) var(--pad) 0; }
@media (max-width: 900px) {
  .project-text, .project:nth-child(even) .project-text { order: 0; grid-row: auto; padding: 24px 0 0; }
}

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 36px); background: var(--surface); transition: background-color 0.4s; }
.plan:hover { background: var(--surface-2); }
.plan-featured, .plan-featured:hover { background: var(--text); color: var(--ink); }
.plan h3 { font-weight: 300; font-size: 34px; letter-spacing: -0.02em; }
.plan .tag { margin-top: 10px; font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }
.price { margin: 40px 0 10px; font-weight: 300; font-size: clamp(56px, 5vw, 84px); line-height: 1; letter-spacing: -0.05em; }
.price small { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); }
.price-care { font-size: 17px; }
.price-note { margin: 8px 0 30px; font-size: 14px; line-height: 1.5; color: var(--text-3); }
.plan .btn { align-self: flex-start; }
.plan ul { display: grid; gap: 12px; margin: 32px 0 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.plan li { display: flex; gap: 14px; color: var(--text-2); font-size: 16px; line-height: 1.45; }
.plan li::before { content: ""; flex: none; width: 12px; height: 7px; margin-top: 6px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); color: var(--text); }
.plan-sub { margin-top: -8px; font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); }
.plan ul.plan-care { margin-top: 14px; padding-top: 0; border-top: 0; }
.plan-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.plan-total b { font-weight: 300; font-size: 30px; letter-spacing: -0.03em; text-transform: none; color: var(--text); }
.plan-notice { margin: 4px 0 32px; padding: 18px 20px; border-left: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 14px; line-height: 1.6; color: var(--text-2); }
.plan-notice p + p { margin-top: 10px; }
.plan-notice strong { color: var(--text); font-weight: 400; }
.plan-notice a { color: var(--text); border-bottom: 1px solid var(--line-2); }
.plan-featured .tag, .plan-featured .price small, .plan-featured .price-note, .plan-featured .plan-sub, .plan-featured .plan-total { color: rgba(0, 0, 0, 0.45); }
.plan-featured li { color: rgba(0, 0, 0, 0.7); }
.plan-featured li::before, .plan-featured .plan-total b { color: var(--ink); }
.plan-featured ul, .plan-featured .plan-total { border-color: rgba(0, 0, 0, 0.12); }
.plan-featured .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-featured .btn:hover { background: #222; border-color: #222; }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; } }

.compare { overflow-x: auto; background: var(--surface); }
.compare table { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 24px; text-align: center; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 300; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-size: 24px; letter-spacing: -0.02em; padding-top: 28px; }
.compare thead th small { display: block; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); margin-top: 8px; }
.compare tbody th { text-align: left; color: var(--text-2); }
.compare tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.compare .no { color: var(--text-3); }
.compare-group th { padding: 28px 24px 10px !important; text-align: left !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 48px; }
.facts > div { padding: var(--pad); background: var(--surface); min-height: clamp(220px, 20vw, 280px); display: flex; flex-direction: column; transition: background-color 0.4s; }
.facts > div:hover { background: var(--surface-3); }
.facts dt { font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); }
.facts dd { font-weight: 300; font-size: clamp(40px, 3.4vw, 56px); letter-spacing: -0.04em; line-height: 1; margin: auto 0 14px; }
.facts dd small { font-size: 0.4em; letter-spacing: 0; color: var(--text-3); margin-left: 4px; }
.facts p { color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }

.care-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.care-notes h3 { font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.care-notes p { margin-top: 14px; color: var(--text-2); font-size: 16px; }
@media (max-width: 900px) { .care-notes { grid-template-columns: 1fr; } }

/* FAQ: each question is a tile that opens */
.faq { display: grid; gap: var(--gap); }
.faq details { background: var(--surface); transition: background-color 0.4s; }
.faq details:hover, .faq details[open] { background: var(--surface-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px var(--pad); cursor: pointer; list-style: none; font-weight: 300; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 40px; height: 40px; border: 1px solid var(--line-2); transition: transform 0.6s var(--ease-out), background 0.3s, border-color 0.3s, color 0.3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: -0.5px 0 0 -7px; background: currentColor; }
.faq summary i::after { transform: rotate(90deg); transition: transform 0.6s var(--ease-out); }
.faq details[open] summary i { transform: rotate(180deg); background: var(--text); border-color: var(--text); color: var(--ink); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq details p { padding: 0 var(--pad) 28px; color: var(--text-2); max-width: 820px; }

/* ---------- Contact ---------- */
.contact-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.field { position: relative; padding-top: 22px; }
.field.full { grid-column: 1 / -1; }
.field input, .field textarea, .field select { width: 100%; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; color: var(--text); font: inherit; font-size: 20px; outline: none; appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 150px; resize: vertical; }
.field select { cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") right center / 16px no-repeat; }
.field select option { background: var(--surface); color: var(--text); }
.field label { position: absolute; left: 0; top: 36px; color: var(--text-3); font-size: 20px; pointer-events: none; transform-origin: left top; transition: transform 0.5s var(--ease-out), color 0.3s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { transform: translateY(-30px) scale(0.6); color: var(--text-2); letter-spacing: 0.16em; text-transform: uppercase; }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); }
.field:focus-within::after { transform: scaleX(1); }
.form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 28px; }
.form-done { grid-column: 1 / -1; display: none; padding: 20px 24px; border-left: 2px solid #fff; background: var(--surface); }
.form-done a { text-decoration: underline; }
.form.sent .form-done { display: block; }
.form.sent .btn { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-info { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(140px, 12vw, 180px); }
.contact-info .mtile-face p { font-size: clamp(16px, 1.4vw, 20px); color: var(--text); }
.contact-info .mtile-light .mtile-face p { color: var(--ink); }
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } }

/* ---------- Legal pages ---------- */
.wrap.prose > * { max-width: 820px; }
.prose h2 { font-weight: 300; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.02em; line-height: 1.15; margin: 56px 0 16px; }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: 16px; }
.prose ul { display: grid; gap: 14px; margin-top: 8px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--text-3); }
.prose strong { color: var(--text); font-weight: 400; }
.prose a { color: var(--text); border-bottom: 1px solid var(--line-2); transition: border-color 0.3s; }
.prose a:hover { border-color: var(--text); }

/* ---------- Footer ---------- */
.closing { padding-top: clamp(96px, 12vw, 176px); }
.closing .label { margin-bottom: 20px; }
.closing .display { margin-bottom: clamp(28px, 3.5vw, 48px); }
.page-contact .closing { display: none; }
.footer-main { display: grid; grid-template-columns: 1.2fr 2fr; gap: 56px; margin-top: clamp(64px, 8vw, 112px); padding: 56px 0 48px; border-top: 1px solid var(--line); }
.footer-brand .brand-name { font-size: 22px; }
.footer-brand p { margin-top: 20px; color: var(--text-3); font-size: 14px; max-width: 400px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-cols h5 { font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.footer-cols a { display: block; width: fit-content; padding: 4px 0; font-size: 15px; color: var(--text-2); transition: color 0.3s; }
.footer-cols a:hover { color: var(--text); }
.legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 0 36px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.legal nav { display: flex; gap: 24px; }
.legal a:hover { color: var(--text); }
@media (max-width: 900px) { .footer-main { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .js .mtile, .js .tiles.ready .mtile { opacity: 1; animation: none; }
  .mtile-face, .mtile-img, .faq summary i { transition: none; }
  .pill .dot { animation: none; }
}

/* =========================================================
   Aero layer: aurora + bubbles behind the page, liquid-glass
   surfaces, glossy gel buttons and floor reflections.
   ========================================================= */
:root {
  --aqua: #fff;
  --leaf: #9a9a9a;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --glass-blur: blur(22px) saturate(170%);
}
body { background: transparent; }

/* Aurora, with particles (drawn by metro.js) drifting over it */
body::before, .particles { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.particles { width: 100%; height: 100%; }
body::before {
  background:
    radial-gradient(60vw 45vh at 12% 8%, rgba(255, 255, 255, 0.1), transparent 70%),
    radial-gradient(55vw 45vh at 88% 80%, rgba(255, 255, 255, 0.08), transparent 70%),
    radial-gradient(70vw 50vh at 60% 105%, rgba(255, 255, 255, 0.06), transparent 70%);
  animation: aurora 30s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(-4vw, 3vh, 0) scale(1.08); } }

/* Liquid-glass top bar */
.bar.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.pivot-ind { background: linear-gradient(90deg, var(--aqua), var(--leaf)); box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); border-radius: 2px; }

/* Glossy gel buttons */
.quote, .btn {
  border-radius: 999px; border-color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #d9d9d9, #f7f7f7);
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 6px rgba(255, 255, 255, 0.45), 0 4px 18px rgba(255, 255, 255, 0.3);
}
.quote:hover, .btn:hover {
  border-color: #fff;
  background:
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.8) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #c8c8c8, #ededed);
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 8px rgba(255, 255, 255, 0.6), 0 6px 26px rgba(255, 255, 255, 0.5);
}
.btn-ghost, .btn-ghost:hover {
  color: #fff; border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.02) 51%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 18px rgba(0, 0, 0, 0.25);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); }
.plan-featured .btn, .plan-featured .btn:hover { background: linear-gradient(180deg, #3a3a3a 0%, #1c1c1c 50%, #000 51%, #111 100%); color: #fff; border-color: #000; }

/* "Now booking" capsule with a green Aero light */
.pill {
  padding: 7px 14px 7px 11px; border-radius: 999px;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pill .dot { background: radial-gradient(circle at 35% 30%, #fff, var(--leaf) 55%, #8a8a8a); box-shadow: 0 0 8px var(--leaf); animation: none; }

/* Reflections: hero headline and its buttons on a glossy floor */
.hero .display { -webkit-box-reflect: below -0.06em linear-gradient(transparent 68%, rgba(0, 0, 0, 0.28)); }
.hero .hero-foot { margin-top: clamp(56px, 7vw, 104px); }
.hero .actions .btn { -webkit-box-reflect: below 3px linear-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); }

/* Glass tiles with a specular gloss and a sheen that sweeps on hover */
/* No backdrop blur here: the aurora and particles behind keep moving, so every tile
   would be re-blurred every frame. Over a near-black page the gradient reads the same. */
.mtile, .plan, .facts > div, .faq details, .compare {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
a.mtile:hover, .plan:hover, .facts > div:hover, .faq details:hover, .faq details[open] {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 60%);
}
.chip:nth-child(3n+1) { background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 60%); }
.mtile-light, a.mtile-light:hover, .plan-featured, .plan-featured:hover {
  background: linear-gradient(180deg, #fff, #e6e6e6);
  box-shadow: inset 0 1px 0 #fff, 0 10px 40px rgba(255, 255, 255, 0.25);
}
.mtile::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.16) 48%, transparent 60%) no-repeat;
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 160% 0;
  transition: background-position 1.1s var(--ease-out);
}
.mtile:hover::after { background-position: 0 0, -60% 0; }
.mtile-img { filter: grayscale(1) brightness(0.5) contrast(1.1); }
.mtile:hover .mtile-img { filter: grayscale(1) brightness(0.58) contrast(1.1); }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .mtile::after { transition: none; }
}

/* Lake photo behind the bar and page intro, fading into the page.
   A real element (not ::before) so it can stay put across page transitions. */
body { overflow-x: clip; }
.hero-bg {
  position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: min(100vh, 1000px); pointer-events: none;
  background: url("images/photos/hero-lake.jpg") center 62% / cover no-repeat;
  filter: grayscale(1) brightness(0.5) contrast(1.15);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

/* ---------- Page transitions ----------
   A short loader covers the swap: it fades in on the way out, and on the
   next page it holds until fonts and the photo are in, then lifts and the
   intro rises. The inline script in each page's head lifts it after 4s regardless. */
.loader { display: none; }
.js .loader {
  display: block; position: fixed; inset: 0; z-index: 200; background: var(--bg); pointer-events: none;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.loaded .loader { opacity: 0; visibility: hidden; }
.leaving .loader { opacity: 1; visibility: visible; transition-duration: 0.28s; transition-timing-function: ease-in; }
.loader i {
  position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #fff;
  opacity: 0; animation: dots 2.2s infinite;
}
.loader i:nth-child(2) { animation-delay: 0.1s; }
.loader i:nth-child(3) { animation-delay: 0.2s; }
.loader i:nth-child(4) { animation-delay: 0.3s; }
.loader i:nth-child(5) { animation-delay: 0.4s; }
@keyframes dots {
  0%   { transform: translateX(0);    opacity: 0; animation-timing-function: cubic-bezier(0.1, 0.6, 0.3, 1); }
  25%  { transform: translateX(44vw); opacity: 1; animation-timing-function: linear; }
  65%  { transform: translateX(56vw); opacity: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.4); }
  90%, 100% { transform: translateX(100vw); opacity: 0; }
}

/* Intro text rises once the loader lifts */
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
.js .line > span { display: inline-block; }
.js:not(.loaded) :is(.line > span, .hero-foot > *, .page-hero-foot > *) { opacity: 0; }
.loaded .line > span { animation: rise-in 1.1s var(--ease-out) 0.15s backwards; }
.loaded .line:nth-child(2) > span { animation-delay: 0.23s; }
.loaded .line:nth-child(3) > span { animation-delay: 0.31s; }
.loaded :is(.hero-foot, .page-hero-foot) > * { animation: rise-in 1.1s var(--ease-out) 0.35s backwards; }

@media (prefers-reduced-motion: reduce) {
  .loader i { animation: none; }
  .loaded .line > span, .loaded :is(.hero-foot, .page-hero-foot) > * { animation: none; }
}

/* Full width: the top bar, page intros and section headings run to the screen edges
   (with the usual gutter); tiles and other content keep the max width. */
.bar-inner, .hero.wrap, .page-hero.wrap, .page-hero > .wrap { max-width: none; }
.section-head { margin-inline: calc(50% - 50vw); padding-inline: var(--gutter); }

/* Readability over the photo: brighter intro text and menu, a darker photo */
.pivot a { color: rgba(255, 255, 255, 0.72); }
.hero-bg { filter: grayscale(1) brightness(0.38) contrast(1.15); }
:is(.hero, .page-hero) :is(.display, .lede, .label, .pill) { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); }
:is(.hero, .page-hero) .display em { color: rgba(255, 255, 255, 0.74); }
:is(.hero, .page-hero) .lede { color: rgba(255, 255, 255, 0.86); }
:is(.hero, .page-hero) .label, .hero .pill { color: rgba(255, 255, 255, 0.78); }
/* The home headline runs three lines, so it's set a little smaller */
.page-home .hero .display { font-size: clamp(42px, min(6.6vw, 11vh), 108px); }