:root { --ink:#110f0d; --wine:#441018; --cream:#eee5d3; --gold:#b99459; --line:rgba(185,148,89,.48); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:Georgia,"Times New Roman",serif; }
body.modal-open { overflow:hidden; }
button,a { color:inherit; font:inherit; }
button { cursor:pointer; }

.hero { min-height:1030px; position:relative; overflow:hidden; isolation:isolate; padding-bottom:42px; background-image:url('images/roman-retreat-hero.jpg'); background-position:left calc(100% - 70px); background-size:125% auto; background-repeat:no-repeat; background-attachment:fixed; background-color:#100f0d; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(12,11,9,.78) 0%,rgba(12,10,8,.38) 40%,rgba(10,9,7,.08) 72%),linear-gradient(0deg,rgba(10,8,7,.88) 0%,transparent 54%),linear-gradient(180deg,rgba(8,8,7,.52),transparent 28%); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 190px rgba(0,0,0,.48); }
.topbar { height:116px; display:flex; justify-content:space-between; align-items:center; padding:0 4.5vw; border-bottom:1px solid rgba(218,193,151,.16); position:relative; z-index:3; }
.brand { display:flex; align-items:center; gap:24px; text-decoration:none; letter-spacing:.28em; font-size:17px; white-space:nowrap; }
.monogram { width:58px; height:58px; display:block; object-fit:contain; }
nav { display:flex; gap:38px; align-items:center; }
nav a,nav button { text-decoration:none; border:0; background:none; padding:12px 0; font:11px Arial,sans-serif; letter-spacing:.2em; }
nav a:last-child { border:1px solid var(--gold); padding:14px 25px; color:#dfc08d; }
.hero-copy { position:relative; top:auto; left:auto; z-index:2; width:min(660px,43vw); margin:84px 0 78px 9vw; isolation:isolate; }
.hero-copy::before { content:""; position:absolute; z-index:-1; inset:-32px -46px; background:radial-gradient(ellipse at 22% 48%,rgba(8,7,6,.72) 0%,rgba(8,7,6,.5) 42%,rgba(8,7,6,.18) 68%,transparent 82%); filter:blur(7px); pointer-events:none; }
.eyebrow { margin:0 0 30px; color:#e1be7f; font:10px Arial,sans-serif; letter-spacing:.32em; text-shadow:0 2px 8px #000,0 0 18px #000; }
h1 { margin:0; font:normal clamp(70px,6.2vw,112px)/.89 Georgia,"Times New Roman",serif; letter-spacing:.035em; color:#f6eddd; text-shadow:0 2px 3px rgba(0,0,0,.96),0 8px 28px rgba(0,0,0,.9); }
.intro { margin:38px 0 35px; width:470px; max-width:100%; font:italic 22px/1.45 Georgia,serif; color:#f4ead8; text-shadow:0 2px 3px #000,0 5px 18px rgba(0,0,0,.95); }
.primary { display:inline-flex; align-items:center; gap:30px; padding:20px 29px; background:rgba(68,16,24,.92); border:1px solid #c8a56c; text-decoration:none; font-size:13px; letter-spacing:.16em; }
.primary span { color:#d2ae72; }

.email-banner { min-height:112px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:34px; padding:24px 7vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#25130f; }
.email-banner>span { color:var(--gold); font:10px Arial,sans-serif; letter-spacing:.28em; }
.email-address { color:#f0dfc1; font-size:clamp(18px,2vw,29px); letter-spacing:.04em; text-decoration:none; }
.email-action { justify-self:end; color:#d9b879; font:10px Arial,sans-serif; letter-spacing:.2em; text-decoration:none; border-bottom:1px solid var(--gold); padding:10px 0; }

.scout-panel { position:relative; z-index:2; left:auto; right:auto; bottom:auto; margin:0 7vw; border:1px solid var(--line); background:rgba(11,10,9,.64); backdrop-filter:blur(4px); padding:23px 30px 18px; }
.scout-panel>p { margin:0 0 20px; color:#d4b274; font-size:13px; letter-spacing:.25em; }
.scout-panel>p span { display:inline-block; width:70px; border-top:1px solid var(--gold); margin:0 0 4px 22px; }
.scout-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:min(850px,72%); }
.scout-card { height:176px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; border:1px solid rgba(197,167,113,.43); background:rgba(14,13,11,.67); text-decoration:none; }
button.scout-card { width:100%; }
.scout-card.featured { background:linear-gradient(rgba(84,17,27,.88),rgba(56,12,20,.88)); border-color:#c3a06a; }
.scout-card>b { font-size:17px; font-weight:normal; letter-spacing:.2em; color:#ddbf8c; }
.scout-card>i { width:84%; border-top:1px solid rgba(189,152,90,.65); position:relative; }
.scout-card>i::after { content:"◇"; position:absolute; left:50%; top:-11px; transform:translateX(-50%); color:#c09a5d; font-style:normal; background:#1b1512; padding:0 6px; }
.scout-card.featured>i::after { background:#4b121c; }
.scout-icon { height:50px; width:115px; display:block; position:relative; color:#b89358; }
.house-icon { border-bottom:1px solid #b89358; }
.house-icon::before { content:""; position:absolute; left:15px; bottom:0; width:84px; height:30px; border:1px solid #b89358; border-bottom:0; }
.house-icon::after { content:""; position:absolute; left:9px; bottom:30px; width:96px; height:1px; background:#b89358; transform:skewY(-8deg); }
.house-icon i,.house-icon b,.house-icon em { position:absolute; bottom:0; width:12px; height:20px; border:1px solid #b89358; }
.house-icon i { left:28px; }.house-icon b { left:51px; height:25px; }.house-icon em { left:76px; }
.grounds-icon { font-size:45px; line-height:1; letter-spacing:-12px; width:130px; }
.grounds-icon i,.grounds-icon b,.grounds-icon em { font-style:normal; position:absolute; bottom:-5px; }
.grounds-icon i { left:3px; font-size:47px; }.grounds-icon b { left:39px; font-size:58px; }.grounds-icon em { left:83px; font-size:44px; }
.production-icon { display:flex; justify-content:center; gap:20px; align-items:center; font-size:42px; }
.production-icon i,.production-icon b { font-style:normal; font-weight:normal; }

.what-we-do { padding:120px 7vw; background:radial-gradient(circle at 80% 15%,#2c1712 0%,#15110e 38%,#0d0d0c 72%); }
.section-heading { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; padding-bottom:38px; border-bottom:1px solid var(--line); }
.section-heading p { margin:0; color:var(--gold); font:10px Arial,sans-serif; letter-spacing:.3em; }
.section-heading h2 { margin:0; font:normal clamp(55px,7vw,108px)/.8 Georgia,serif; letter-spacing:.04em; }
.section-heading span { color:#af9f8c; font-style:italic; font-size:17px; text-align:right; }
.service-grid { display:grid; grid-template-columns:repeat(5,1fr); margin-top:48px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-grid article { min-height:305px; padding:28px 25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }
.service-grid small { color:var(--gold); font-size:11px; letter-spacing:.2em; }
.service-grid h3 { margin:65px 0 18px; color:#e2c38f; font:normal 25px/1.05 Georgia,serif; }
.service-grid p { color:#aa9f92; font:14px/1.65 Georgia,serif; margin:0; }
.spaces { margin-top:110px; display:grid; grid-template-columns:44% 56%; min-height:560px; background:#25130f; border:1px solid var(--line); }
.spaces>div { padding:70px 5vw; align-self:center; }
.spaces span,.coming-soon>div>p { color:var(--gold); font:10px Arial,sans-serif; letter-spacing:.32em; }
.spaces h2 { font:normal clamp(52px,5vw,82px)/.92 Georgia,serif; margin:22px 0 28px; }
.spaces p { color:#b4a697; font:16px/1.7 Georgia,serif; max-width:490px; }
.spaces button { margin-top:20px; border:0; border-bottom:1px solid var(--gold); background:none; color:#d8ba84; padding:12px 0; letter-spacing:.2em; font-size:11px; }
.spaces img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.08) sepia(.14) brightness(.78); }

.coming-soon { min-height:640px; display:grid; grid-template-columns:1.1fr .9fr; background:#080908; border-top:1px solid rgba(185,148,89,.35); }
.soon-image { background:linear-gradient(90deg,transparent 63%,#080908),linear-gradient(0deg,rgba(8,9,8,.22),transparent 45%),url('images/sauna-garden-luxury.png') center/cover; filter:saturate(.82) sepia(.07) brightness(.82); }
.coming-soon>div:last-child { padding:90px 7vw 70px 4vw; align-self:center; }
.coming-soon h2 { margin:20px 0 30px; font:normal clamp(55px,5.5vw,90px)/.9 Georgia,serif; color:#e7dbc6; }
.coming-soon span { display:block; color:#ad9f90; font:18px/1.6 Georgia,serif; max-width:480px; }
.coming-soon i { display:block; margin-top:36px; color:#c4a46e; font-size:13px; letter-spacing:.16em; }
.contact-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:7vw; padding:110px 7vw; background:radial-gradient(circle at 15% 20%,#32181a,#130f0e 52%,#0b0b0a); border-top:1px solid var(--line); }
.contact-intro>p { margin:0; color:var(--gold); font:10px Arial,sans-serif; letter-spacing:.3em; }
.contact-intro h2 { margin:24px 0 26px; font:normal clamp(55px,6vw,94px)/.9 Georgia,serif; }
.contact-intro>span { display:block; max-width:430px; color:#b8a99a; font:17px/1.65 Georgia,serif; }
.contact-intro>a { display:inline-block; margin-top:34px; color:#e0c28d; font-size:20px; text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:8px; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:28px 24px; }
.contact-form label { color:#c8a96f; font:9px Arial,sans-serif; letter-spacing:.22em; }
.contact-form label small { color:#756b61; font-size:8px; }
.contact-form input,.contact-form select,.contact-form textarea { display:block; width:100%; margin-top:10px; border:0; border-bottom:1px solid rgba(185,148,89,.5); border-radius:0; background:rgba(255,255,255,.025); color:var(--cream); padding:14px 12px; font:16px Georgia,serif; outline:none; }
.contact-form select option { background:#17120f; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-bottom-color:#d8b474; background:rgba(255,255,255,.05); }
.contact-form .message-field { grid-column:1/-1; }
.contact-form textarea { resize:vertical; min-height:135px; }
.contact-form button { grid-column:1/-1; justify-self:start; border:1px solid var(--gold); background:var(--wine); color:#e4c68f; padding:18px 28px; font:11px Arial,sans-serif; letter-spacing:.2em; }
.contact-form button span { margin-left:28px; }
.honeypot { position:absolute !important; left:-9999px !important; }
footer { min-height:230px; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; background:#2b0e14; padding:50px; }
footer p { letter-spacing:.27em; } footer a { margin-left:50px; border:1px solid var(--gold); padding:17px 24px; text-decoration:none; color:#dfc08d; font-size:11px; letter-spacing:.18em; }

.lightbox { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(8,7,6,.97); backdrop-filter:blur(12px); animation:fade .25s ease both; }
.lightbox[hidden] { display:none; }
.lightbox figure { margin:0; width:min(1180px,82vw); }.lightbox img { display:block; width:100%; height:min(68vh,720px); object-fit:cover; border:1px solid var(--line); filter:saturate(1.08) contrast(1.07) brightness(.91) sepia(.06); box-shadow:0 30px 100px #000; }
.lightbox figcaption { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-top:22px; }.lightbox figcaption small { color:#c5a66e; font-size:9px; letter-spacing:.3em; }.lightbox figcaption h2 { font:36px/1 Georgia,serif; margin:9px 0 6px; }.lightbox figcaption p { color:#a89c91; font:14px Georgia,serif; margin:0; }
.close { position:absolute; right:34px; top:25px; background:none; border:0; font:42px/1 Georgia,serif; color:#d6bb88; }.arrow { position:absolute; top:48%; width:54px; height:70px; background:rgba(63,18,29,.72); border:1px solid var(--line); font:44px/1 Georgia,serif; color:#e0c38b; }.previous { left:3vw; }.next { right:3vw; }.dots { display:flex; gap:8px; padding-bottom:8px; }.dots button { width:27px; height:2px; padding:0; background:#655a50; border:0; }.dots button.active { background:#d6b373; }
@keyframes fade { from { opacity:0; } }

/* Compact computer screens and browser zoom: keep every hero element in its own space. */
@media (min-width:901px) and (max-width:1500px) {
  .hero { min-height:0; background-position:left calc(100% - 45px); }
  .topbar { height:100px; padding:0 4vw; }
  .brand { gap:18px; font-size:15px; }
  nav { gap:24px; }
  .hero-copy { top:auto; left:auto; width:min(590px,52vw); margin:55px 0 70px 7vw; }
  .hero-copy::before { inset:-25px -35px; }
  h1 { font-size:clamp(62px,6.4vw,88px); line-height:.9; }
  .eyebrow { margin-bottom:22px; }
  .intro { margin:25px 0 28px; font-size:19px; line-height:1.4; width:440px; }
  .primary { padding:17px 23px; }
  .scout-panel { left:auto; right:auto; bottom:auto; margin:0 5vw; padding:20px 24px 17px; }
  .scout-grid { width:min(760px,100%); }
  .scout-card { height:150px; gap:14px; }
  .scout-card>b { font-size:14px; }
  .scout-icon { transform:scale(.82); margin:-4px 0; }
}

/* Short/wide computer windows: place the scout panel after the introduction
   instead of allowing it to float over the copy and Explore button. */
@media (min-width:901px) and (max-height:900px) {
  .hero { min-height:auto; overflow:visible; padding-bottom:0; background-position:center 42%; background-size:cover; background-attachment:scroll; }
  .hero-copy { position:relative; top:auto; left:auto; width:min(620px,52vw); margin:70px 0 70px 7vw; }
  .scout-panel { position:relative; left:auto; right:auto; bottom:auto; margin:0 5vw; }
}

@media (max-width:900px) {
  .topbar { height:88px; padding:0 20px; }.brand { gap:13px; font-size:12px; letter-spacing:.18em; }.monogram { width:47px; height:47px; } nav a,nav button { display:none; } nav a:last-child { display:block; padding:12px 16px; }
  .hero { min-height:1080px; padding-bottom:0; background-image:url('images/roman-retreat-mobile-hero.jpg'); background-position:center 410px; background-size:100% auto; background-repeat:no-repeat; background-attachment:scroll; background-color:#100f0d; }.hero::before { background:linear-gradient(180deg,transparent 36%,rgba(10,9,8,.08) 62%,#100f0d 88%); }.hero-copy { position:absolute; top:88px; left:0; width:100%; min-height:322px; margin:0; padding:34px 24px 30px; background:#171411; border-top:1px solid rgba(185,148,89,.2); border-bottom:1px solid rgba(185,148,89,.38); }.hero-copy::before { display:none; }.eyebrow { font-size:8px; margin-bottom:17px; line-height:1.5; text-shadow:none; }.hero h1 { font-size:45px; line-height:.92; letter-spacing:.02em; max-width:390px; text-shadow:none; }.intro { font-size:16px; line-height:1.45; margin:22px 0 0; width:90%; max-width:430px; text-shadow:none; }.primary { position:absolute; top:690px; left:24px; font-size:10px; padding:16px 18px; text-shadow:none; }
  .scout-panel { position:absolute; left:16px; right:16px; bottom:0; margin:0; padding:20px 14px; }.scout-panel>p { font-size:9px; }.scout-grid { width:100%; grid-template-columns:repeat(3,1fr); gap:7px; }.scout-card { height:120px; gap:10px; }.scout-card>b { font-size:10px; letter-spacing:.11em; }.scout-icon { transform:scale(.65); margin:-8px 0; }.scout-card>i { width:80%; }
  .email-banner { display:block; min-height:0; padding:25px 22px; text-align:center; }.email-banner>span { display:block; margin-bottom:13px; font-size:8px; }.email-address { display:block; font-size:18px; overflow-wrap:anywhere; }.email-action { display:inline-block; margin-top:15px; }
  .what-we-do { padding:80px 22px; }.section-heading { display:block; }.section-heading h2 { margin:22px 0; font-size:58px; }.section-heading span { display:block; text-align:left; }.service-grid { grid-template-columns:1fr; }.service-grid article { min-height:0; padding:26px; }.service-grid h3 { margin:28px 0 12px; }.spaces { grid-template-columns:1fr; margin-top:70px; }.spaces>div { padding:55px 28px; }.spaces img { min-height:320px; grid-row:1; }.coming-soon { grid-template-columns:1fr; }.soon-image { min-height:390px; background:linear-gradient(0deg,#080908,transparent 45%),url('images/sauna-garden-luxury.png') 58% center/cover; filter:saturate(.84) sepia(.05) brightness(.86); }.coming-soon>div:last-child { padding:20px 24px 70px; }.coming-soon h2 { font-size:58px; }.coming-soon span { font-size:16px; }.contact-section { grid-template-columns:1fr; padding:75px 22px; gap:55px; }.contact-intro h2 { font-size:58px; }.contact-intro>a { font-size:17px; overflow-wrap:anywhere; }.contact-form { grid-template-columns:1fr; }.contact-form .message-field,.contact-form button { grid-column:1; } footer { display:block; text-align:center; } footer .monogram { margin:0 auto 20px; } footer a { display:inline-block; margin:30px 0 0; }
  .lightbox figure { width:100vw; }.lightbox img { height:60vh; border:0; }.lightbox figcaption { padding:18px 20px; display:block; }.dots { margin-top:20px; }.dots button { flex:1; }.arrow { z-index:2; top:44%; width:42px; height:58px; }.previous { left:0; }.next { right:0; }.close { right:14px; top:12px; z-index:3; }
}

@media (orientation:landscape) and (max-height:650px) {
  .topbar { height:64px; padding:0 28px; }
  .brand { font-size:11px; }.monogram { width:42px; height:42px; }
  .hero { min-height:auto; overflow:visible; background-image:url('images/roman-retreat-hero.jpg'); background-position:center 46%; background-size:cover; background-attachment:scroll; padding-top:64px; }
  .hero::before { background:linear-gradient(90deg,rgba(8,8,7,.76),rgba(8,8,7,.23) 45%,rgba(8,8,7,.03) 72%),linear-gradient(0deg,rgba(9,8,7,.52),transparent 55%); }
  .hero-copy { position:relative; top:auto; left:auto; width:48%; min-width:430px; margin:38px 0 36px 7.5vw; text-shadow:0 3px 16px rgba(0,0,0,.68); }
  .eyebrow { font-size:8px; margin-bottom:13px; white-space:nowrap; }
  .hero h1 { font-size:clamp(46px,7.2vh,68px); line-height:.9; max-width:610px; white-space:nowrap; }
  .intro { margin:18px 0 16px; font-size:15px; line-height:1.35; max-width:520px; }
  .primary { position:static; display:inline-flex; font-size:9px; padding:13px 16px; }
  .scout-panel { position:relative; left:auto; right:auto; bottom:auto; margin:0; border-left:0; border-right:0; padding:16px 7vw 18px; background:#100e0c; }
  .scout-panel>p { margin-bottom:12px; }.scout-grid { width:min(760px,100%); }.scout-card { height:118px; }.scout-card>b { font-size:12px; }.scout-icon { transform:scale(.68); }
}