/* Marino Wellness — split layout: stacked photos left, content + contact form right.
   Estate design: warm espresso-black background, gold woven through, with the
   contact block set inside a layered double-gold frame. */
:root{
  --bg:#111010;
  --ink:#ede3cf;
  --gold:#d2a85c;
  --line:rgba(210,168,92,.32);
  --muted:#a8997e;
  --placeholder:#7c6f59;
  --input-bg:rgba(210,168,92,.07);
  --input-focus-bg:rgba(210,168,92,.13);
  --btn-bg:#d2a85c;
  --btn-ink:#1a150f;
  --btn-border:#d2a85c;
  --btn-hover-bg:#e0bb74;
  --btn-hover-ink:#1a150f;
  --footer-bg:#120f0c;
  --footer-label:#d2a85c;
  --footer-muted:rgba(237,227,207,.55);
  --footer-strong:#ede3cf;
  --footer-border:rgba(210,168,92,.35);
  --shot-border:rgba(210,168,92,.42);
  --tagline:#d2a85c;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
}
img{display:block;max-width:100%}

/* ---------- Split shell ---------- */
.split{
  display:flex;
  align-items:flex-start;
}

/* ---------- LEFT: stacked photos at full natural size, white gap ---------- */
.gallery{
  flex:0 0 54%;
  display:flex;
  flex-direction:column;
  gap:24px;                 /* the white space between the two photos */
  padding:24px;
  background:var(--bg);
  transition:background-color .35s ease;
}
.shot{
  margin:0;
  border:1px solid var(--shot-border);
  transition:border-color .35s ease;
}
/* show each photo whole — no crop, no squish; column grows to fit */
.shot img{
  width:100%;
  height:auto;
  display:block;
}

/* ---------- RIGHT: content panel (stays in view while photos scroll) ---------- */
.panel{
  flex:1 1 46%;
  align-self:flex-start;
  position:sticky;
  top:0;
  height:100svh;            /* one viewport tall -> content stays centered in view while photos scroll */
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;       /* horizontal centering */
  overflow-y:auto;
  padding:48px clamp(28px,4.5vw,84px);
  transition:background-color .35s ease;
}
.panel__inner{
  width:100%;
  max-width:460px;
  margin:auto 0;            /* vertical centering; collapses to 0 when taller than the viewport, so it scrolls from the top with no cutoff */
  text-align:center;
  animation:rise 1s cubic-bezier(.22,.61,.36,1) both;
  /* the whole content block sits in a layered frame:
     inner gold border + a fainter outer gold line offset around it */
  padding:clamp(28px,4.2vh,44px) clamp(20px,2.4vw,32px) clamp(26px,3.8vh,38px);
  border:1px solid rgba(210,168,92,.6);
  outline:1px solid rgba(210,168,92,.28);
  outline-offset:6px;
  border-radius:2px;
  background:rgba(210,168,92,.04);
}

/* wordmark logo */
.wordmark-img{
  display:block;
  width:clamp(240px,76%,360px);
  height:auto;
  margin:0 auto clamp(22px,3.5vh,40px);
}
/* heading */
.title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(46px,5.4vw,68px);line-height:1.03;
  margin:0;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;
  transition:color .35s ease;
}
.tagline{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.9vw,25px);color:var(--tagline);
  margin:13px 0 0;
  transition:color .35s ease;
}

/* ---------- contact form ---------- */
.contact{
  margin-top:clamp(22px,3.2vh,34px);
  padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--line);
  transition:border-color .35s ease;
}
.contact__lead{
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--muted);
  margin:0 0 20px;
}
.field{margin-bottom:11px}
.field input,
.field textarea{
  width:100%;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:2px;
  padding:15px 17px;
  outline:none;
  transition:border-color .18s ease, background .18s ease, color .35s ease;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:var(--placeholder)}
.field input:focus,
.field textarea:focus{border-color:var(--gold);background:var(--input-focus-bg)}

.btn{
  width:100%;
  margin-top:8px;
  font-family:var(--sans);font-size:13.5px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--btn-ink);background:var(--btn-bg);
  border:1px solid var(--btn-border);border-radius:2px;
  padding:17px 18px;cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-bg);color:var(--btn-hover-ink)}
.btn:disabled{background:var(--btn-hover-bg);border-color:var(--btn-hover-bg);color:var(--btn-hover-ink);cursor:default;opacity:1}

.contact__note{
  margin:14px 0 0;
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold);
  text-align:center;
}

/* ---------- contact meta: phone / social / address ---------- */
.meta{margin-top:clamp(18px,2.6vh,26px)}
.meta__phone{
  display:inline-block;
  font-family:var(--sans);font-size:clamp(15px,1.5vw,18px);font-weight:500;
  letter-spacing:.16em;color:var(--ink);text-decoration:none;
  transition:color .35s ease;
}
.meta__phone:hover{color:var(--gold)}

.socials{margin:13px 0 2px;display:flex;justify-content:center;gap:14px}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  color:var(--ink);transition:color .18s ease,border-color .18s ease;
}
.social:hover{color:var(--gold);border-color:var(--gold)}

.addr{
  margin-top:14px;font-style:normal;
  font-family:var(--sans);font-size:14px;line-height:1.7;color:var(--muted);
}
.directions{
  display:inline-block;margin-top:8px;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;
}
.directions:hover{border-bottom-color:var(--gold)}

/* ---------- hours footer (full width, very bottom) ---------- */
.hours{
  background:var(--footer-bg);color:var(--footer-strong);
  border-top:1px solid var(--footer-border);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:34px 24px 38px;text-align:center;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.hours__label{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--footer-label);
}
.hours__rows{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 44px;
}
.hours__rows span{
  display:flex;flex-direction:column;gap:5px;
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--footer-muted);
}
.hours__rows b{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;letter-spacing:.01em;text-transform:none;color:var(--footer-strong);
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel__inner{animation:none}}

/* ---------- iPad / tablet: keep the split; equalize the two photos ---------- */
@media (max-width:1024px) and (min-width:701px){
  .panel{padding:40px clamp(24px,3.5vw,48px)}
  .panel__inner{max-width:420px}
  /* two equal-height halves filling the viewport -> uniform & symmetrical */
  .gallery{height:100svh}
  .shot{flex:1 1 0;min-height:0;overflow:hidden}
  .shot img{width:100%;height:100%;object-fit:cover}
  .shot--top img{object-position:center 40%}
  .shot--bottom img{object-position:center 50%}
}

/* ---------- phones: images first, then the contact panel ---------- */
@media (max-width:700px){
  .split{flex-direction:column;align-items:stretch}
  .gallery{flex:none;gap:18px;padding:18px}
  .panel{
    flex:none;position:static;min-height:0;
    height:auto;overflow:visible;   /* reset the desktop sticky 100svh scroll box so the panel flows normally on phones */
    padding:44px 24px 56px;
  }
  .panel__inner{max-width:480px;margin:0 auto}
  .hours__rows{flex-direction:column;gap:14px}
}