/* The Oxford Estates — quiet luxury design system */
:root {
  --cream: #f6f2ea;
  --paper: #efe9dd;
  --ink: #23211d;
  --soft: #6e675c;
  --line: #d8d0c0;
  --accent: #8a7350;
  --dark: #221f1a;
  --max: 1280px;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-weight: 300; line-height: 1.7; font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); }
h1, h2, h3, h4, .serif { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(38px, 5vw, 72px); font-weight: 300; }
h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.25; }
h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; }
h4 { font-size: 23px; font-weight: 500; }
p { margin: 0 0 1.1em; }
em { font-style: italic; }

.skip-link { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: .5rem; top: .5rem; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 48px; }

.label, .eyebrow {
  display: block; font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--soft); font-weight: 400; margin-bottom: 24px;
}
.rule { width: 56px; height: 1px; background: var(--accent); margin: 46px auto 0; }

/* ---------- nav ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  mix-blend-mode: difference; color: #fff;
}
.site-header .wrap {
  max-width: none; display: flex; justify-content: space-between; align-items: center;
  padding: 26px 48px; gap: 24px;
}
.brand {
  font-family: var(--serif); font-size: 20px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.brand small { display: none; }
.site-nav { display: flex; align-items: center; }
.site-nav a {
  color: #fff; text-decoration: none; font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; margin-left: 38px; font-weight: 400;
}
.site-nav a.active { border-bottom: 1px solid #fff; padding-bottom: 3px; }
.site-nav a.btn { margin-left: 38px; }
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; padding: 8px; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
  display: block; width: 26px; height: 1px; background: #fff; position: relative; content: "";
}
.nav-toggle-label span::before { position: absolute; top: -8px; }
.nav-toggle-label span::after { position: absolute; top: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 1px solid currentColor; background: transparent;
  padding: 15px 38px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  text-decoration: none; color: inherit; transition: .3s; cursor: pointer; font-family: var(--sans);
  font-weight: 400;
}
.btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn.big { padding: 17px 46px; }
.btn.ghost { }
main .btn { color: var(--ink); }
.quote .btn, .fin.dark .btn { color: inherit; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; background: var(--dark); overflow: hidden; color: #fff; }
.hero picture, .hero picture img, .hero .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero picture img { object-fit: cover; filter: brightness(.82); }
.hero .hero-video { object-fit: cover; opacity: 0; transition: opacity 1.2s ease; filter: brightness(.82); }
.hero .hero-video.playing { opacity: 1; }
.hero picture { transition: opacity 1.2s ease; }
.hero.video-live picture { opacity: 0; }
.hero .wrap {
  position: absolute; inset: 0; max-width: none; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; padding: 0 48px 72px; text-align: left;
}
.hero h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.04; font-weight: 300; max-width: 13ch; color: #fff; }
.hero .sub, .hero .eyebrow { margin: 22px 0 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; color: #fff; }
.hero .actions { margin-top: 36px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero .btn { color: #fff; }
.hero .btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* page hero (interior pages) */
.page-head { padding: 170px 0 90px; text-align: center; }
.page-head h1 { max-width: 20ch; margin: 0 auto; }
.page-head .lead { margin: 26px auto 0; }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 10vw, 130px) 0; }
.section.alt { background: var(--paper); }
.section.brick, .quote-block { background: var(--dark); color: var(--paper); }
.section.brick h2 { color: var(--paper); }
.center { text-align: center; }
.center .label, .center .eyebrow { text-align: center; }
.lead { color: var(--soft); font-size: 17px; max-width: 62ch; }
.center .lead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 56px; }
@media (min-width: 900px) {
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* editorial split */
.split { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; background: var(--paper); }
.split .ph { min-height: 640px; position: relative; overflow: hidden; }
.split .ph img, .split .ph picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.split .ph img { object-fit: cover; }
.split .tx { padding: 90px 78px; display: flex; flex-direction: column; justify-content: center; }
.split .tx h3 { font-size: 38px; line-height: 1.25; margin: 0 0 22px; }
.split .tx p { color: var(--soft); max-width: 46ch; }
.split .tx .btn { align-self: flex-start; margin-top: 40px; }
.split.rev { grid-template-columns: .85fr 1.15fr; }
.split.rev .tx { order: 1; } .split.rev .ph { order: 2; }

/* numbered features */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 56px; margin-top: 70px; }
.features-grid h4 { margin-bottom: 10px; }
.features-grid p { color: var(--soft); font-size: 15px; margin: 0; }
.num { font-size: 12px; color: var(--accent); letter-spacing: .2em; margin-bottom: 14px; display: block; }

/* simple feature list (suite pages) */
.features { list-style: none; padding: 0; margin: 1rem 0; }
.features li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.features li::before { content: "—"; color: var(--accent); margin-right: 14px; }

/* ---------- quote ---------- */
.quote-block, .section.brick .quote { padding: 140px 48px; text-align: center; }
.quote { max-width: none; margin: 0 auto; text-align: center; }
.quote blockquote {
  font-family: var(--serif); font-size: clamp(24px, 2.9vw, 38px); line-height: 1.5;
  max-width: 30ch; margin: 0 auto; font-weight: 300; font-style: italic;
}
.quote cite { display: block; margin-top: 36px; font-style: normal; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #9b9181; }
.section.brick { padding: 0; }
.section.brick .wrap { max-width: none; }

/* ---------- gallery ---------- */
.gallery-grid, .strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0; }
.gallery-grid figure, .strip > div { margin: 0; overflow: hidden; position: relative; }
.gallery-grid img, .strip img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .8s; }
.gallery-grid figure:hover img, .strip div:hover img { transform: scale(1.04); }
.gallery-grid figcaption { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); padding: 10px 2px 0; }

/* ---------- cards (suites index, blog) ---------- */
.card {
  background: transparent; border: 0; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
}
.card .thumb-wrap { overflow: hidden; }
.card .thumb { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .8s; }
.card:hover .thumb { transform: scale(1.04); }
.card .pad { padding: 22px 0 0; }
.card h3 { font-size: 24px; margin: 0 0 6px; }
.card .meta { color: var(--soft); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.card p { color: var(--soft); font-size: 15px; }

/* ---------- suite detail ---------- */
.crumbs { position: relative; z-index: 2; padding: 120px 0 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
.crumbs a { color: var(--soft); text-decoration: none; }
.facts { display: flex; flex-wrap: wrap; gap: 34px 64px; padding: 36px 0; margin: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { min-width: 110px; }
.facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--soft); margin-bottom: 6px; }
.facts dd { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 400; }
.tour-embed { aspect-ratio: 16/9; width: 100%; border: 0; background: var(--paper); }
.plan-figure { background: #fff; border: 1px solid var(--line); padding: 26px; margin: 0; }
.plan-figure figcaption { text-align: center; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); padding-top: 18px; }

/* ---------- CTA band ---------- */
.cta-band, .fin { text-align: center; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { color: var(--soft); margin: 0 0 42px; }
.section.brick.cta-band { background: var(--dark); color: var(--paper); padding: 130px 48px; }
.section.brick.cta-band p { color: #9b9181; }
.section.brick.cta-band .btn { color: var(--paper); }
.section.brick.cta-band .btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- form ---------- */
.form-grid { display: grid; gap: 30px; max-width: 640px; }
@media (min-width: 640px) { .form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } }
label { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); display: block; margin-bottom: 10px; }
input, select, textarea {
  width: 100%; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; background: transparent; color: var(--ink); border-radius: 0;
}
select { padding: 14px 0; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); }
.hp { position: absolute; left: -9999px; }

/* ---------- prose / history / timeline ---------- */
.prose { max-width: 46rem; }
.prose img { margin: 2.4rem 0; }
.prose h2 { margin: 2.6rem 0 1rem; }
.timeline { list-style: none; padding: 0; max-width: 46rem; }
.timeline li { padding: 14px 0 14px 96px; position: relative; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--soft); }
.timeline b { position: absolute; left: 0; font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 400; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 54px 48px 60px; color: var(--soft); font-size: 13px; letter-spacing: .06em; }
.site-footer .grid { max-width: var(--max); margin: 0 auto; gap: 40px; }
.site-footer h3 { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); font-family: var(--sans); font-weight: 400; margin-bottom: 16px; }
.site-footer a { color: var(--soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .fine { max-width: var(--max); margin: 40px auto 0; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: space-between; }
address { font-style: normal; }

/* ---------- misc ---------- */
.phone-link { white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .site-header .wrap { padding: 20px 24px; }
  .nav-toggle-label { display: block; }
  .site-nav {
    display: none; position: fixed; inset: 0; background: var(--ink);
    flex-direction: column; justify-content: center; align-items: center; gap: 30px;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { margin-left: 0; font-size: 14px; }
  .nav-toggle:checked ~ .nav-toggle-label { position: fixed; right: 24px; top: 20px; z-index: 50; }
  .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; }
  .hero .wrap { padding: 0 24px 56px; }
  .split, .split.rev { grid-template-columns: 1fr; }
  .split .ph { min-height: 380px; position: relative; }
  .split .ph img, .split .ph picture { position: absolute; }
  .split .tx { padding: 56px 28px; }
  .features-grid { grid-template-columns: 1fr; gap: 44px; }
  .gallery-grid, .strip { grid-template-columns: 1fr; }
  .page-head { padding: 140px 0 60px; }
  .facts { gap: 22px 36px; }
  .site-footer .fine { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .gallery-grid img, .strip img, .card .thumb { transition: none; }
}

/* ---------- google reviews ---------- */
.reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px 40px; justify-content: space-between; margin-bottom: 60px; }
.reviews-head h2 { max-width: 18ch; }
.rating-line { font-family: var(--serif); font-size: 54px; font-weight: 300; line-height: 1; }
.rating-line .stars { display: block; margin-top: 10px; }
.stars { color: var(--accent); font-size: 15px; letter-spacing: .35em; }
.rating-line small { display: block; margin-top: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-card { background: #fff; border: 1px solid var(--line); padding: 40px 36px; display: flex; flex-direction: column; }
.review-card p { color: var(--soft); font-size: 15px; flex: 1; margin: 20px 0 26px; }
.review-card .who { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.review-card .who span { color: var(--soft); }
.reviews-actions { margin-top: 54px; text-align: center; }
.reviews-actions .btn { margin: 0 9px 12px; }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } .rating-line { font-size: 42px; } }

/* ---------- contact / location ---------- */
.map-embed { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(.35) sepia(.08); }
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 60px; }
.score-card { background: #fff; border: 1px solid var(--line); padding: 44px 36px; text-align: center; }
.score-card .big { font-family: var(--serif); font-size: 64px; font-weight: 300; line-height: 1; }
.score-card h4 { margin: 14px 0 8px; }
.score-card p { color: var(--soft); font-size: 14px; margin: 0; }
.attr { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); margin-top: 26px; text-align: center; }
.attr a { color: var(--soft); }
.contact-rail h3 { margin-bottom: 8px; }
.contact-rail p { color: var(--soft); }
.contact-rail .block { padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-rail .block:first-child { padding-top: 0; }
@media (max-width: 900px) { .score-grid { grid-template-columns: 1fr; } }

/* ---------- page hero (interior pages) ---------- */
.page-hero { position: relative; height: 56vh; min-height: 420px; max-height: 640px; background: var(--dark); overflow: hidden; color: #fff; }
.page-hero picture, .page-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero picture img { object-fit: cover; filter: brightness(.72); }
.page-hero .inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; padding: 0 48px 56px;
}
.page-hero .crumbs { position: static; padding: 0 0 18px; color: rgba(255,255,255,.75); }
.page-hero .crumbs a { color: rgba(255,255,255,.75); }
.page-hero .label { color: rgba(255,255,255,.8); margin-bottom: 14px; }
.page-hero h1 { color: #fff; font-size: clamp(38px, 5vw, 68px); font-weight: 300; max-width: 16ch; }
.page-hero .lead { color: rgba(255,255,255,.85); margin-top: 18px; max-width: 52ch; }
@media (max-width: 900px) { .page-hero .inner { padding: 0 24px 40px; } .page-hero { min-height: 360px; } }

/* ---------- suite sample: carousel + overview ---------- */
.suite-overview { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; }
.carousel .main { position: relative; overflow: hidden; background: var(--paper); }
.carousel .main img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.carousel .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.carousel .thumbs button { border: 0; padding: 0; cursor: pointer; background: none; opacity: .55; transition: opacity .25s; }
.carousel .thumbs button.on, .carousel .thumbs button:hover { opacity: 1; }
.carousel .thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.suite-info h2 { margin-bottom: 14px; }
.suite-info .facts { margin: 30px 0; }
.suite-info .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hist-loc { display: inline-block; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; padding: 8px 18px; margin-bottom: 22px; }

/* 360 tours */
.tour-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.tour-tabs button {
  border: 1px solid var(--line); background: transparent; color: var(--soft);
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 11px 22px; cursor: pointer; transition: .25s;
}
.tour-tabs button.on { border-color: var(--ink); color: var(--ink); }
@media (max-width: 900px) {
  .suite-overview { grid-template-columns: 1fr; gap: 44px; }
  .carousel .thumbs { grid-template-columns: repeat(5, 1fr); }
}

/* iOS viewport fix */
@supports (height: 100dvh) {
  .hero { height: 100dvh; }
  .page-hero { height: 56dvh; }
}