/* Layout: alternating Deep Jungle and Aged Linen bands (SevenRooms skeleton). Every block = small caps label, headline, two lines.
   Single committed brand look in both themes. Terracotta only on things people click. */
:root{
  color-scheme: light;
  --jungle:#2D4A3E;
  --jungle-deep:#233B31;
  --linen:#F0E6D3;
  --linen-75:rgba(240,230,211,.75);
  --linen-20:rgba(240,230,211,.2);
  --soft-clay:#C49A78;
  --dark-clay:#8C5E40;
  --sage:#8C5E40;
  --line:#D4CFBD;
  --paper:#F6F0E4;
  --terra:#B5593A;
  --terra-deep:#9A4A2F;
  --turmeric:#8C5E40;
  --indigo:#6B4330;
  --ink:#2D4A3E;
  --ink-soft:rgba(45,74,62,.8);
  --f-logo:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-serif:"EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --f-label:"Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--jungle); scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--linen); color:var(--ink); font:400 1.2rem/1.6 var(--f-serif); -webkit-font-smoothing:antialiased}
.inner{max-width:68rem; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-weight:400; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--turmeric); outline-offset:3px; border-radius:2px}
.label{font:600 .7rem/1.3 var(--f-label); letter-spacing:.2em; text-transform:uppercase}

.green{background:var(--jungle); color:var(--linen)}
.cream{background:var(--linen); color:var(--ink)}
.green .label{color:var(--soft-clay)}
.cream .label{color:var(--dark-clay)}
.band{padding-block:clamp(4rem, 9vw, 6.5rem)}
.head{display:grid; gap:.9rem; max-width:44rem; margin-bottom:clamp(2.25rem, 5vw, 3.5rem)}
.head h2{font-size:clamp(2.1rem, 4.6vw, 3.3rem); line-height:1.06}
.green .head p{color:var(--linen-75)}
.cream .head p{color:var(--ink-soft)}
.head p{max-width:36rem; font-size:1.25rem}

/* buttons: terracotta = do this */
.btn{display:inline-block; font:600 .76rem/1 var(--f-label); letter-spacing:.17em; text-transform:uppercase; text-decoration:none; padding:1.05rem 1.6rem; background:var(--terra); color:var(--linen); border:0; border-radius:20px; cursor:pointer}
.btn:hover{background:var(--terra-deep)}
.textlink{font:600 .76rem/1 var(--f-label); letter-spacing:.17em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--terra); padding-bottom:.35rem}
.green .textlink{color:var(--linen)}
.cream .textlink{color:var(--terra)}

/* logo */
.logo{display:inline-flex; flex-direction:column; align-items:center; text-decoration:none}
.logo .tamu{font:600 1.9rem/.78 var(--f-logo); letter-spacing:.02em; text-align:center}
.logo .house{font:500 .58rem/1 var(--f-label); letter-spacing:.32em; margin-top:.42rem; padding-left:.32em}

/* nav */
.nav{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; padding-block:1.1rem}
.nav .logo{color:var(--jungle)}
.nav-links{display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; align-items:center}
.nav-links a:not(.btn){font:600 .7rem/1 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.nav-links a:not(.btn):hover{color:var(--terra)}
.nav .btn{padding:.85rem 1.2rem}

/* hero: full-width photo with the headline on it */
.hero{position:relative; overflow:hidden; background:var(--jungle)}
.hero-media{position:absolute; inset:0; background:
  radial-gradient(120% 90% at 85% 10%, rgba(196,154,120,.22), transparent 55%),
  radial-gradient(90% 80% at 10% 100%, rgba(107,67,48,.25), transparent 60%),
  var(--jungle);
  background-size:cover; background-position:center}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(35,59,49,.35) 0%, rgba(35,59,49,.78) 70%)}
.hero .inner{position:relative; padding-block:clamp(5rem, 13vw, 9.5rem) clamp(4rem, 9vw, 6.5rem)}
.hero-copy{display:grid; gap:1.5rem; max-width:50rem}
.hero .label{color:var(--soft-clay)}
.hero h1{font-size:clamp(2.6rem, 6.8vw, 5.2rem); line-height:1.03; letter-spacing:-.01em; color:var(--linen)}
.hero .lede{font-size:clamp(1.2rem, 2.1vw, 1.45rem); line-height:1.5; color:var(--linen-75); max-width:36rem}
.actions{display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center; margin-top:.4rem}

/* places strip */
.places{border-block:1px solid var(--line); overflow:hidden; padding-block:1.1rem}
.places-track{display:flex; width:max-content; animation:drift 40s linear infinite}
.places-track span{font:500 .78rem/1 var(--f-label); letter-spacing:.32em; text-transform:uppercase; color:var(--jungle); padding-inline:2.25rem; white-space:nowrap; display:inline-flex; align-items:center; gap:2.25rem}
.places-track span::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--sage)}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .places-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center} .places-track [aria-hidden]{display:none} }

/* problem */
.problem-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:2.5rem clamp(2rem,6vw,5rem); align-items:start}
.problem-grid > *{min-width:0}
.problem-body{display:grid; gap:1.25rem; color:var(--linen-75); max-width:36rem}
.seen{list-style:none; margin:0; padding:0}
.seen li{padding-block:1rem; border-top:1px solid var(--linen-20); font-size:clamp(1.25rem, 2.2vw, 1.5rem); line-height:1.35; color:var(--linen); display:flex; gap:1rem}
.seen li:first-child{border-top:0; padding-top:0}
.seen li::before{content:""; flex:none; width:.5rem; height:.5rem; margin-top:.6em; border-radius:50%; background:var(--turmeric)}
.pullout{margin-top:2.5rem; font:italic 400 clamp(2rem, 4.5vw, 3.2rem)/1.1 var(--f-serif); color:var(--linen)}

/* guest ring */
.ring-wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2.5rem clamp(2rem,5vw,4rem); align-items:center}
.ring-wrap > *{min-width:0}
.ring svg{width:100%; height:auto; max-width:100%; display:block}
.ring .core{cursor:pointer}
.ring .core circle.dot{transition:r .2s}
.ring .core:hover circle.dot, .ring .core.on circle.dot{r:33}
.ring .core:focus-visible{outline:none}
.ring .core:focus-visible circle.dot{stroke:var(--jungle); stroke-width:2}
.big{border-bottom:1px solid var(--line)}
.big-item{border-top:1px solid var(--line)}
.big-item h3{margin:0; font:inherit}
.big-btn{appearance:none; background:none; border:0; padding:.85rem 0; margin:0; width:100%; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; color:inherit}
.big-btn .w{font:400 clamp(2.4rem, 5vw, 3.6rem)/1.08 var(--f-serif); color:var(--ink-soft); transition:color .2s, box-shadow .2s}
.big-btn::after{content:"+"; font:400 1.7rem/1 var(--f-label); color:var(--terra); flex:none; transition:transform .2s}
.big-btn:hover .w, .big-item.open .w{color:var(--jungle)}
.big-item.open .w{box-shadow:inset 0 -.14em 0 color-mix(in srgb, var(--c) 40%, transparent)}
.big-item.open .big-btn::after{transform:rotate(45deg)}
.big-btn:focus-visible{outline:2px solid var(--turmeric); outline-offset:2px}
.big-panel{padding:0 0 1.5rem; display:grid; gap:.45rem; max-width:32rem}
.big-panel p{color:var(--ink-soft); font-size:1.15rem}
.guest-mobile{display:none}

/* add-ons */
.addons{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem 1.25rem}
.group{display:grid; gap:.9rem; align-content:start; min-width:0}
.pill{font:600 .68rem/1 var(--f-label); letter-spacing:.17em; text-transform:uppercase; padding:.8rem 1rem; border-radius:999px; text-align:center}
.pill.indigo{background:var(--indigo); color:var(--linen)}
.pill.turmeric{background:var(--turmeric); color:var(--jungle)}
.pill.terra{background:var(--terra); color:var(--linen)}
.tile{position:relative; padding:1.2rem 1.2rem 1.35rem; border:1px solid var(--line); background:transparent; transition:background-color .2s, border-color .2s, box-shadow .2s; display:grid; gap:.55rem}
.tile .ico{width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 22%, transparent); transition:background-color .2s}
.tile .ico svg{width:1.25rem; height:1.25rem; stroke:var(--jungle); fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}
.tile h3{font:500 1.3rem/1.25 var(--f-serif); color:var(--jungle); margin-top:.25rem}
.tile p{color:var(--ink-soft); font-size:1.08rem; line-height:1.45}
.tile:hover{border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c); background:color-mix(in srgb, var(--c) 18%, transparent)}
.tile:hover .ico{background:color-mix(in srgb, var(--c) 45%, transparent)}
.tile.audit{border-style:dashed; background:none; box-shadow:none}
.tile.audit:hover{background:none; box-shadow:none; border-color:var(--sage)}
.tile.audit a{margin-top:.4rem; justify-self:start}
@media (hover: none){ .tile:not(.audit){border-top:3px solid var(--c)} }

/* services on green */
.svc-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:2.5rem clamp(2rem,6vw,5rem); align-items:start}
.svc-layout > *{min-width:0}
.svc-intro{position:sticky; top:2rem; display:grid; gap:1rem}
.svc-intro h2{font-size:clamp(2.1rem, 4.6vw, 3.3rem); line-height:1.06}
.svc-intro p:not(.label){color:var(--linen-75); font-size:1.2rem}
.svc-intro .start{margin-top:1rem; padding-top:1.25rem; border-top:1px solid var(--linen-20); font-size:1.1rem}
.svc-intro .btn{justify-self:start}
.svc-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 2.5rem}
.svc-grid li{display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:.25rem 1rem; padding-block:1.5rem; border-top:1px solid var(--linen-20); align-content:start}
.svc-grid .ico2{grid-row:span 2; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid rgba(140,94,64,.55); display:grid; place-items:center; transition:background-color .2s, border-color .2s}
.svc-grid .ico2 svg{width:1.2rem; height:1.2rem; stroke:var(--turmeric); fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; transition:stroke .2s}
.svc-grid h3{font:500 1.4rem/1.2 var(--f-serif); color:var(--linen); align-self:center}
.svc-grid p{color:var(--linen-75); font-size:1.08rem; line-height:1.5}
.svc-grid li:hover .ico2{background:var(--turmeric); border-color:var(--turmeric)}
.svc-grid li:hover .ico2 svg{stroke:var(--jungle)}
@media (max-width: 820px){ .svc-layout{grid-template-columns:minmax(0,1fr)} .svc-intro{position:static} }
@media (max-width: 560px){ .svc-grid{grid-template-columns:minmax(0,1fr)} }


/* service tiles on green: title only, description opens on hover */
.green .tile{border-color:var(--linen-20); gap:0}
.green .tile h3{color:var(--linen); margin-top:.85rem}
.green .tile .ico{background:color-mix(in srgb, var(--c) 35%, transparent)}
.green .tile .ico svg{stroke:var(--linen)}
.green .tile p{color:var(--linen-75); max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .2s ease, margin-top .3s ease}
.green .tile:hover p, .green .tile:focus-visible p, .green .tile:focus-within p{max-height:9rem; opacity:1; margin-top:.5rem}
.green .tile:hover, .green .tile:focus-visible{border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c); background:color-mix(in srgb, var(--c) 20%, transparent); outline:none}
.green .tile:hover .ico{background:var(--c)}
.green .tile.audit{border-color:var(--linen-20); background:none; box-shadow:none}
.green .tile.audit h3{margin-top:0}
.green .tile.audit p{max-height:none; opacity:1; margin-top:.5rem}
.green .tile.audit a{margin-top:1rem}
@media (hover: none){ .green .tile p{max-height:none; opacity:1; margin-top:.5rem} }
@media (prefers-reduced-motion: reduce){ .green .tile p{transition:none} }

/* how it starts */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem 1.75rem; position:relative}
.steps-line{position:absolute; left:0; right:0; top:.55rem; height:24px; width:100%; overflow:visible; pointer-events:none}
.steps li{position:relative; display:grid; gap:.7rem; align-content:start; padding-top:2.6rem; min-width:0}
.steps li::before{content:""; position:absolute; top:.25rem; left:0; width:.85rem; height:.85rem; border-radius:50%; background:var(--jungle); box-shadow:0 0 0 5px var(--linen)}
.steps h3{font:500 1.55rem/1.2 var(--f-serif); color:var(--jungle)}
.steps p{color:var(--ink-soft); font-size:1.12rem}
.after-steps{margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--linen-20); font-size:1.3rem; color:var(--linen)}

/* faqs */
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:2rem clamp(2rem,6vw,5rem); align-items:start}
.faq-grid > *{min-width:0}
.faq-grid .head{margin-bottom:0}
.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq-group{font:600 .66rem/1.3 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--dark-clay); margin:2.5rem 0 .6rem}
.faq-group:first-child{margin-top:0}
.faq-more{margin:1.75rem 0 0}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding-block:1.35rem; font:500 1.35rem/1.3 var(--f-serif); color:var(--jungle)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 1.6rem/1 var(--f-label); color:var(--terra); flex:none; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--terra)}
.faq details p{margin:0 0 1.5rem; color:var(--ink-soft); max-width:40rem}

/* closing band */
.closing{padding-block:clamp(4rem, 9vw, 6rem); text-align:left}
.closing .inner{display:flex; flex-wrap:wrap; gap:1.75rem 3rem; align-items:center; justify-content:space-between}
.closing p{font:400 clamp(2rem, 4.6vw, 3.3rem)/1.08 var(--f-serif); color:var(--linen); max-width:38rem; text-wrap:balance}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:2.5rem clamp(2rem,6vw,5rem); align-items:start}
.contact-grid > *{min-width:0}
.contact-grid .head{margin-bottom:0}
.direct{margin:2rem 0 0; display:grid; gap:1.1rem}
.direct dt{font:600 .66rem/1 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--dark-clay)}
.direct dd{margin:.35rem 0 0; font-size:1.2rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .9rem; overflow-wrap:anywhere}
.direct a{color:var(--terra); text-underline-offset:4px}
.copy{font:600 .6rem/1 var(--f-label); letter-spacing:.18em; text-transform:uppercase; background:none; border:0; padding:.3rem 0; color:var(--dark-clay); cursor:pointer}
.copy:hover{color:var(--terra)}
form{display:grid; gap:1.5rem}
.fields{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem}
.field{display:grid; gap:.45rem; min-width:0}
.field label, fieldset legend{font:600 .66rem/1.3 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--dark-clay)}
input[type="text"], input[type="tel"], input[type="email"], textarea{width:100%; font:400 1.15rem/1.35 var(--f-serif); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:0; padding:.75rem .85rem}
textarea{min-height:5.5rem; resize:vertical}
input:focus, textarea:focus{outline:2px solid var(--jungle); outline-offset:0; border-color:var(--jungle)}
fieldset{border:0; margin:0; padding:0; min-width:0}
fieldset legend{margin-bottom:1rem; padding:0}
.check-groups{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem 1.75rem}
.check-group{min-width:0}
.check-group .gname{font:600 .62rem/1.3 var(--f-label); letter-spacing:.17em; text-transform:uppercase; padding-bottom:.4rem; border-bottom:2px solid var(--c); margin-bottom:.15rem; color:var(--jungle)}
.check{display:flex; gap:.7rem; align-items:flex-start; padding-block:.42rem; border-bottom:1px solid var(--line); cursor:pointer; min-width:0}
.check input{accent-color:var(--jungle); width:1.05rem; height:1.05rem; margin-top:.28rem; flex:none}
.check span{font-size:1.1rem; line-height:1.35}
.form-foot{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center}
.error{font-size:1rem; color:var(--terra-deep)}
.sendout{background:var(--jungle); color:var(--linen); padding:1.5rem; display:grid; gap:1rem}
.sendout p{color:var(--linen-75); font-size:1.05rem}
.sendout pre{margin:0; white-space:pre-wrap; font:400 1rem/1.5 var(--f-serif); color:var(--linen); background:var(--jungle-deep); padding:1rem; overflow-wrap:anywhere}
.sendout .row{display:flex; flex-wrap:wrap; gap:.9rem 1.5rem; align-items:center}
.sendout .copy{color:var(--soft-clay)}

/* footer */
footer{padding-block:clamp(3.5rem,8vw,5rem) 2rem}
.foot{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr); gap:2.5rem 3rem; align-items:start}
.foot > *{min-width:0}
.foot-brand{display:grid; gap:1.4rem; justify-items:start}
.foot-brand .logo{color:var(--linen)}
.foot-brand .logo .tamu{font-size:2.7rem}
.foot-brand .logo .house{font-size:.66rem}
.foot-brand p{color:var(--linen-75); max-width:22rem; font-size:1.12rem; line-height:1.5}
.foot h3{font:600 .66rem/1 var(--f-label); letter-spacing:.2em; text-transform:uppercase; color:var(--soft-clay); margin:0 0 1.1rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.foot ul a{color:var(--linen); text-decoration:none; font-size:1.12rem; display:inline-flex; align-items:center; gap:.7rem; transition:color .2s; max-width:100%}
.foot ul a span{overflow-wrap:anywhere; min-width:0}
.foot ul a:hover{color:var(--soft-clay)}
.foot ul a svg{width:1.1rem; height:1.1rem; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; flex:none}
.foot-bottom{margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:1.25rem; border-top:1px solid var(--linen-20); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; font:500 .62rem/1.5 var(--f-label); letter-spacing:.17em; text-transform:uppercase; color:var(--linen-75)}
@media (max-width: 820px){ .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .foot-brand{grid-column:1 / -1} }
@media (max-width: 480px){ .foot{grid-template-columns:minmax(0,1fr)} }

@media (max-width: 900px){
  .addons{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps-line{display:none}
}
@media (max-width: 820px){
  .problem-grid, .faq-grid, .contact-grid, .ring-wrap{grid-template-columns:minmax(0,1fr)}
  .fields{grid-template-columns:minmax(0,1fr)}
  .ring{display:none}
  .guest-mobile{display:grid}
}
@media (max-width: 560px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .check-groups{grid-template-columns:minmax(0,1fr)}
  .nav-links a[href="./"]:not(.btn){display:none}
  .nav-links{gap:1.1rem}
}

/* mobile guest card */
.guest-mobile{gap:.9rem; background:var(--paper); border:1px solid var(--line); padding:1.25rem; margin-bottom:1rem}
.guest-mobile .who{display:flex; gap:.9rem; align-items:center}
.guest-mobile .av{width:2.6rem; height:2.6rem; border-radius:50%; background:var(--indigo); color:var(--linen); display:grid; place-items:center; font:600 1rem/1 var(--f-label)}
.guest-mobile strong{display:block; font-weight:500; color:var(--jungle)}
.guest-mobile small{color:var(--sage); font:500 .8rem/1.3 var(--f-label)}
.tags{display:flex; flex-wrap:wrap; gap:.4rem}
.tags span{font:500 .72rem/1 var(--f-label); padding:.45rem .7rem; border-radius:999px; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--jungle)}


/* slimmer header */
.nav{padding-block:.7rem}
.nav .logo .tamu{font-size:1.55rem}
.nav .logo .house{font-size:.5rem; margin-top:.32rem}
.nav .btn{padding:.75rem 1.2rem; font-size:.68rem}
@media (max-width: 820px){
  .nav{padding-block:.6rem; gap:.5rem 1rem}
  .nav .logo .tamu{font-size:1.35rem}
  .nav .btn{padding:.65rem 1rem; font-size:.62rem; letter-spacing:.15em}
  .nav-links a:not(.btn){font-size:.62rem}
}

/* text highlight colour */
::selection{background:#E9C9A8; color:#2D4A3E}
.green ::selection, .hero-type ::selection, .foot ::selection, .site-foot ::selection{background:#C49A78; color:#F0E6D3}

/* header wordmark */
.nav .nav-word{font:600 .74rem/1 var(--f-label); letter-spacing:.24em; text-transform:uppercase; color:var(--jungle); text-decoration:none; white-space:nowrap}
.nav .nav-word:hover{color:var(--terra)}

:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)} body{margin:0} img{max-width:100%} [hidden]{display:none!important}
/* header image logo */
.nav .nav-mark{display:block; line-height:0}
.nav .nav-mark img{height:2rem; width:auto; display:block}
@media (max-width: 820px){ .nav .nav-mark img{height:1.7rem} }
.nav-links a.on{color:var(--terra)}

@media (max-width: 820px){ .nav{flex-wrap:nowrap !important; gap:.75rem !important} .nav-links{flex-wrap:nowrap !important; gap:.85rem !important} .nav-links a:not(.btn){letter-spacing:.14em} .nav .btn{padding:.62rem .85rem !important; letter-spacing:.12em !important} .nav .nav-mark img{height:1.5rem !important} }

/* Postcard footer */
.pc-foot{background:#2D4A3E;color:#F0E6D3;padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.pc-foot .pc-wrap{max-width:72rem;margin:0 auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.pc-card{background:#F0E6D3;color:#2D4A3E;border:1px solid #D9CDB8;box-shadow:0 30px 60px -28px rgba(0,0,0,.55);display:grid;grid-template-columns:1.2fr 1px 1fr;gap:clamp(1.5rem,4vw,3rem);padding:clamp(1.75rem,4vw,3rem);transform:rotate(-.6deg);max-width:60rem;margin:0 auto}
.pc-msg{display:grid;align-content:space-between;gap:2rem}
.pc-msg img{height:3rem;width:auto;display:block}
.pc-msg p{margin:0;font:400 italic clamp(1.2rem,1.9vw,1.45rem)/1.45 "EB Garamond",Georgia,serif;max-width:21rem;color:rgba(45,74,62,.85)}
.pc-rule{background:#D9CDB8}
.pc-addr{display:grid;gap:1.25rem;align-content:start;position:relative}
.pc-stamp{justify-self:end;width:6.6rem;height:7.9rem;border:1.5px dashed #B5593A;padding:.35rem;margin-bottom:.5rem}
.pc-stamp img{width:100%;height:100%;object-fit:cover;display:block}
.pc-post{position:absolute;right:4.8rem;top:4.6rem;width:4.6rem;height:4.6rem;border:1.5px solid rgba(181,89,58,.55);border-radius:50%;display:grid;place-items:center;text-align:center;font:600 .45rem/1.5 "Montserrat",Arial,sans-serif;letter-spacing:.14em;color:rgba(181,89,58,.8);transform:rotate(-14deg);pointer-events:none}
.pc-line{border-bottom:1px solid #D9CDB8;padding-bottom:.6rem;display:grid;gap:.35rem}
.pc-lbl{font:500 .58rem/1 "Montserrat",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.pc-line a,.pc-line span:not(.pc-lbl){font:600 .7rem/1.3 "Montserrat",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#2D4A3E;text-decoration:none;overflow-wrap:anywhere}
.pc-line a:hover{color:#B5593A}
.pc-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;margin-top:3rem}
.pc-nav a{font:600 .64rem/1.4 "Montserrat",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#F0E6D3;text-decoration:none}
.pc-nav a:hover{color:#C49A78}
.pc-legal{text-align:center;margin-top:1.5rem;font:500 .58rem/1.5 "Montserrat",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,230,211,.6)}
.pc-foot ::selection{background:#C49A78;color:#F0E6D3}
@media (max-width:760px){
  .pc-card{grid-template-columns:1fr;transform:none}
  .pc-rule{height:1px}
  .pc-stamp,.pc-post{display:none}
  .pc-nav{gap:.6rem 1.6rem}
}

/* ==========================================================
   Refinement layer (Nov 2026)
   DM Sans for body and small labels. EB Garamond stays for
   headings and editorial moments. Bodoni stays in the logo.
   ========================================================== */
:root{
  --f-body:"DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-label:var(--f-body);
  --hair:rgba(45,74,62,.16);
}
body{font:400 1.03rem/1.7 var(--f-body); letter-spacing:-.003em; font-optical-sizing:auto}
h1,h2,h3{font-family:var(--f-serif)}
p{text-wrap:pretty}
.label{font-weight:600; letter-spacing:.22em}
.btn{font-weight:600; letter-spacing:.16em}

/* Know your guests: one italic moment on the page is enough, so this one goes upright */
.guests-copy h2{font-size:clamp(2.35rem,5.2vw,3.75rem); letter-spacing:-.012em; line-height:1.04}
.guests-copy h2 em{font-style:normal; color:var(--dark-clay)}
.guests-copy p:not(.label){font-size:clamp(1.02rem,1.25vw,1.1rem); line-height:1.75; max-width:36rem; color:var(--ink-soft)}

/* Guest card */
.gc-body strong{font:500 1.55rem/1.15 var(--f-serif); letter-spacing:-.005em}
.gc-body small{font:400 .86rem/1.45 var(--f-body); color:var(--dark-clay); margin-top:.35rem}
#guests .gc-body .tags span, .tags span{font:500 .74rem/1 var(--f-body); letter-spacing:.01em}
.tag-chip{font:500 .7rem/1 var(--f-body)}

/* Sarah's stay and services */
.stay-cap{font-size:.95rem; line-height:1.6; max-width:19rem}
.svc-group li{font:400 .95rem/1.55 var(--f-body); color:var(--linen-75)}
.svc-group ul{gap:.55rem}
.phone-screen{font-family:var(--f-body)}

/* Contact: a written invitation rather than a form header */
.contact-body .head .label{margin-bottom:1.1rem; font-size:.7rem}
.contact-body .contact-area{font:400 clamp(1.75rem,3.2vw,2.35rem)/1.15 var(--f-serif); color:var(--jungle); letter-spacing:-.01em; max-width:24rem; margin:0 0 1.4rem; text-wrap:balance}
.contact-area em{font-style:italic; color:var(--dark-clay)}
.contact-btns{gap:1.6rem; margin-top:0}
.contact-btns .btn, .contact-btns .btn-outline{background:none; box-shadow:none; padding:0 0 .3rem; border-radius:0; color:var(--jungle); font:600 .7rem/1 var(--f-body); letter-spacing:.18em; border-bottom:1px solid rgba(45,74,62,.35); transition:color .2s, border-color .2s}
.contact-btns .btn::after{content:" \2197"; letter-spacing:0; color:var(--terra)}
.contact-btns .btn:hover{background:none; color:var(--terra); border-color:var(--terra)}
.contact-body .head{margin-bottom:2.4rem !important}

.contact-body form{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:1.75rem; row-gap:1.6rem; max-width:31rem}
.contact-body form > *{grid-column:1 / -1}
.contact-body form > .field:has(#f-wa), .contact-body form > .field:has(#f-email){grid-column:auto}
.contact-body .field{gap:.35rem}
.contact-body .field label, .contact-body .flabel{font:500 .8rem/1.3 var(--f-body); letter-spacing:.01em; color:var(--ink-soft); text-transform:none; transition:color .2s}
.contact-body .field:focus-within > label{color:var(--terra)}
.contact-body input[type="text"], .contact-body input[type="tel"], .contact-body input[type="email"], .contact-body .select select{
  font:400 1.05rem/1.4 var(--f-body); color:var(--ink); background:transparent; border:0; border-bottom:1px solid rgba(45,74,62,.32); border-radius:0; padding:.55rem 0 .65rem; outline:0; transition:border-color .2s, box-shadow .2s}
.contact-body .select select{padding-right:1.8rem}
.contact-body .select::after{right:.2rem; width:.45rem; height:.45rem; border-color:var(--dark-clay)}
.contact-body input:hover, .contact-body .select select:hover{border-bottom-color:rgba(45,74,62,.6)}
.contact-body input:focus, .contact-body .select select:focus{outline:0; border-bottom-color:var(--terra); box-shadow:0 1px 0 0 var(--terra)}
.contact-body input::placeholder{color:rgba(140,94,64,.55); font-size:.95rem}
.contact-body .select select:invalid{color:rgba(140,94,64,.6); font-size:.95rem}
.contact-body .topics{margin-top:.4rem}
.contact-body .topics legend{margin-bottom:.8rem !important}
.contact-body .form-foot{margin-top:.6rem}
.contact-body .form-foot .btn{display:inline-flex; align-items:center; gap:.7rem; padding:1.05rem 1.7rem 1.05rem 1.9rem; border-radius:999px}
.contact-body .form-foot .btn::after{content:"\2192"; font:400 1rem/1 var(--f-body); letter-spacing:0; transition:transform .2s}
.contact-body .form-foot .btn:hover::after{transform:translateX(3px)}
.contact-body .form-foot .btn:focus-visible{outline:2px solid var(--jungle); outline-offset:3px}
.sendout .thanks-h{font:400 1.6rem/1.2 var(--f-serif); color:var(--linen); margin:0 0 .5rem}
@media (max-width:600px){
  .contact-body form{grid-template-columns:minmax(0,1fr); row-gap:1.45rem}
  .contact-body form > .field:has(#f-wa), .contact-body form > .field:has(#f-email){grid-column:1 / -1}
  .contact-body .contact-area{font-size:1.85rem}
}

/* FAQ: serif section titles, capital questions, DM Sans answers */
.faq{border-bottom:0 !important}
.faq-group{font:400 clamp(1.6rem,3vw,2rem)/1.15 var(--f-serif) !important; letter-spacing:-.005em !important; text-transform:none !important; color:var(--jungle) !important; margin:4rem 0 1rem !important; padding-bottom:.9rem; border-bottom:1px solid var(--jungle)}
.faq-group:first-child{margin-top:0 !important}
.faq details{border-top:0 !important; border-bottom:1px solid var(--hair)}
.faq summary{font:600 .76rem/1.6 var(--f-body) !important; letter-spacing:.11em !important; padding-block:1.25rem !important; gap:2rem !important; transition:color .2s}
.faq summary::after{content:"" !important; width:.8rem; height:.8rem; flex:none; background:linear-gradient(var(--terra),var(--terra)) center/100% 1.5px no-repeat, linear-gradient(var(--terra),var(--terra)) center/1.5px 100% no-repeat; transition:transform .25s ease !important}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--terra)}
.faq details p{font:400 1rem/1.75 var(--f-body); color:var(--ink-soft); margin:0 0 1.6rem !important; padding-right:2.8rem; max-width:38rem}
.faq summary:focus-visible{outline:2px solid var(--terra); outline-offset:4px}
@media (max-width:600px){
  .faq summary{font-size:.74rem !important; padding-block:1.15rem !important; gap:1.25rem !important}
  .faq details p{padding-right:0; font-size:.98rem}
  .faq-group{margin-top:3rem !important}
}


.contact-body .contact-area{color:var(--ink) !important}
.contact-body .contact-area em{display:block; margin-bottom:.15rem}
@media (max-width:820px){ .guests-copy p:not(.label){font-size:1rem !important; line-height:1.7 !important} }

/* Form, round two: one spacing rhythm, quieter secondary elements, Send stays the focus */
.contact-body form{row-gap:1.75rem !important}
.contact-body .topics, .contact-body .form-foot{margin-top:0 !important}
.contact-body .field label:not(.ms-opt), .contact-body .flabel, .contact-body .topics legend{font:400 .78rem/1.3 var(--f-body) !important; color:rgba(45,74,62,.62) !important; letter-spacing:.01em !important}
.contact-body .field:focus-within > label:not(.ms-opt){color:var(--terra) !important}
.contact-body input[type="text"], .contact-body input[type="tel"], .contact-body input[type="email"], .contact-body .select select{border-bottom-color:rgba(45,74,62,.2)}
.contact-body input::placeholder{color:rgba(140,94,64,.45)}
.contact-body .select select:invalid{color:rgba(140,94,64,.5)}
.contact-btns .btn, .contact-btns .btn-outline{color:rgba(45,74,62,.75); border-bottom-color:rgba(45,74,62,.22)}
.contact-body .topics legend{margin-bottom:.7rem !important}
.topics{gap:.45rem !important}
.topics .ms-opt{padding:.42rem .8rem !important; gap:.45rem !important; border-color:rgba(45,74,62,.18) !important; color:rgba(45,74,62,.78) !important}
.topics .ms-opt, .topics .ms-opt span{font-size:.6rem !important; font-weight:500 !important; letter-spacing:.13em !important}
.topics .ms-opt::before{width:.32rem !important; height:.32rem !important; border-color:rgba(181,89,58,.6) !important}
.topics .ms-opt:hover{border-color:rgba(181,89,58,.55) !important}
.topics .ms-opt:has(input:checked){background:rgba(181,89,58,.1) !important; border-color:rgba(181,89,58,.7) !important; color:var(--jungle) !important}
.topics .ms-opt:has(input:checked)::before{background:var(--terra) !important; border-color:var(--terra) !important}
.contact-body .form-foot{padding-top:.5rem}
.contact-body .form-foot .btn{font-size:.78rem; padding:1.15rem 2rem 1.15rem 2.2rem; box-shadow:0 10px 24px -14px rgba(154,74,47,.7)}

/* Form, round three: tighter rhythm, clearer fields */
.contact-body form{row-gap:1.2rem !important}
.contact-body .field{gap:.3rem !important}
.contact-body input[type="text"], .contact-body input[type="tel"], .contact-body input[type="email"], .contact-body .select select{
  background:rgba(246,240,228,.75) !important; border-bottom:1px solid rgba(45,74,62,.4) !important; padding:.62rem .75rem !important; line-height:1.3 !important; border-radius:3px 3px 0 0 !important}
.contact-body .select select{padding-right:2rem !important}
.contact-body .select::after{right:.85rem !important}
.contact-body .select{margin:0 !important}
.contact-body input:focus, .contact-body .select select:focus{background:#FBF7EF !important; border-bottom-color:var(--terra) !important}
.contact-body .topics{margin-top:.35rem !important}
.contact-body .topics legend{margin-bottom:.55rem !important}
.topics{gap:.38rem !important}
.topics .ms-opt{padding:.34rem .68rem !important; gap:.4rem !important}
.topics .ms-opt, .topics .ms-opt span{font-size:.57rem !important; letter-spacing:.12em !important}
.topics .ms-opt::before{width:.28rem !important; height:.28rem !important}
.contact-body .form-foot{padding-top:0 !important; margin-top:.35rem !important}

/* Open message field */
.contact-body .fhint{margin:0 0 .35rem; font:400 .82rem/1.55 var(--f-body); color:rgba(45,74,62,.55); max-width:28rem}
.contact-body textarea{font:400 1.02rem/1.6 var(--f-body); color:var(--ink); background:rgba(246,240,228,.75); border:0; border-bottom:1px solid rgba(45,74,62,.4); border-radius:3px 3px 0 0; padding:.7rem .75rem; min-height:8.5rem; resize:vertical; outline:0; transition:border-color .2s, background-color .2s}
.contact-body textarea:hover{border-bottom-color:rgba(45,74,62,.6)}
.contact-body textarea:focus{outline:0; background:#FBF7EF; border-bottom-color:var(--terra); box-shadow:0 1px 0 0 var(--terra)}
.contact-body .field-msg{margin-top:.2rem}
/* Postcard footer uses the same fonts */
.pc-lbl, .pc-line a, .pc-line span:not(.pc-lbl), .pc-nav a, .pc-legal, .pc-post{font-family:var(--f-body) !important}

/* Bigger water stamp */
.pc-stamp{width:9rem !important;height:11rem !important}
.pc-post{display:none !important}

/* Footer: water photo behind the postcard */
.pc-foot{background:linear-gradient(rgba(35,59,49,.15),rgba(35,59,49,.35)), #2D4A3E url(../img/footer-bg-water.jpg) center/cover no-repeat !important}
.pc-stamp{display:none !important}

/* Stop the iPhone bounce from showing cream below the footer */
html,body{overscroll-behavior-y:none}