/* ==========================================================================
   Lolly Massage — Design System
   Deep-teal "neo" base, frosted glass surfaces, clay-rose + gold accents.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --bg-deep:   #12211D;
  --bg-deep-2: #0D1A16;
  --ink:       #1F3B36;
  --ink-light: #2C4C46;
  --sand:      #EDE3D3;
  --rose:      #C98A77;
  --rose-2:    #DE9F89;
  --gold:      #C9A44C;
  --gold-2:    #E3C077;
  --cream:     #F7F2E9;

  --glass-bg:     rgba(247,242,233,0.06);
  --glass-bg-2:   rgba(247,242,233,0.02);
  --glass-border: rgba(247,242,233,0.16);
  --glass-blur:   18px;

  --shadow-soft: 0 20px 60px rgba(0,0,0,0.35);
  --shadow-lift: 0 30px 80px rgba(0,0,0,0.45);

  --ease: cubic-bezier(.16,.8,.24,1);
  --font-display: 'Fraunces', serif;
  --font-body: 'Jost', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, input, select, textarea, button{ max-width: 100%; }
body{ overflow-wrap: break-word; word-break: break-word; }
body{
  margin:0;
  background: var(--bg-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; margin:0; }
p{ margin:0; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Ambient background orbs (the "neo / motion" atmosphere) ---------- */
.orb-field{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: drift 26s ease-in-out infinite;
}
.orb.rose{ width: 480px; height: 480px; background: var(--rose); top: -120px; left: -100px; animation-duration: 30s; }
.orb.gold{ width: 380px; height: 380px; background: var(--gold); bottom: -140px; right: -80px; animation-duration: 34s; animation-delay: -8s; }
.orb.ink{  width: 560px; height: 560px; background: var(--ink-light); top: 30%; right: 20%; animation-duration: 40s; animation-delay: -16s; opacity: 0.4;}

@keyframes drift{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(40px,-30px) scale(1.08); }
  66%{ transform: translate(-30px,20px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce){
  .orb{ animation: none; }
  html{ scroll-behavior: auto; }
}

/* ---------- Glass surfaces ---------- */
.glass{
  background: linear-gradient(160deg, var(--glass-bg), var(--glass-bg-2));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: 18px;
}

/* ---------- Nav ---------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  padding: 12px 0;
  background: rgba(18,33,29,0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--glass-border);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand svg{ width:40px; height:40px; flex-shrink:0; transition: transform .5s var(--ease); }
.brand:hover svg{ transform: rotate(8deg) scale(1.05); }
.brand-text{ display:flex; flex-direction:column; }
.brand-word{ font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--cream); line-height:1; }
.brand-sub{ font-size: 9px; letter-spacing: .32em; text-transform: uppercase; color: var(--rose-2); margin-top:3px; }

.nav-links{ display:flex; align-items:center; gap: 38px; }
.nav-links a{
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); opacity: .78; position: relative; padding: 4px 0;
  transition: opacity .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--gold-2); transition: width .35s var(--ease);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ opacity:1; }

.nav-cta{
  padding: 11px 26px; border-radius: 999px;
  border:1px solid var(--glass-border);
  font-size: 12px; letter-spacing:.1em; text-transform: uppercase;
  transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
.nav-cta:hover{ background: var(--rose); border-color: var(--rose); transform: translateY(-2px); }

.nav-toggle{ display:none; width:26px; height:20px; position:relative; cursor:pointer; }
.nav-toggle span{ position:absolute; left:0; right:0; height:1.5px; background:var(--cream); transition: all .3s var(--ease); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.nav-toggle.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-links{
    position: fixed; top:0; right:0; height:100vh; width: min(78vw, 340px);
    background: rgba(18,33,29,0.92); backdrop-filter: blur(24px);
    flex-direction: column; justify-content:center; align-items:flex-start;
    gap: 28px; padding: 40px; transform: translateX(100%);
    transition: transform .45s var(--ease);
    border-left: 1px solid var(--glass-border);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-cta{ margin-top: 10px; }
  .nav-toggle{ display:block; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 34px; border-radius: 999px;
  font-size: 12.5px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; border:none; transition: all .4s var(--ease);
}
.btn-primary{ background: var(--rose); color: var(--bg-deep-2); }
.btn-primary:hover{ background: var(--gold-2); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }
.btn-ghost{ background: transparent; border:1px solid var(--glass-border); color: var(--cream); }
.btn-ghost:hover{ border-color: var(--gold-2); color: var(--gold-2); }

/* ---------- Section rhythm ---------- */
section{ position:relative; padding: 130px 0; }
section.tight{ padding: 90px 0; }
.eyebrow{
  font-size: 12px; letter-spacing:.38em; text-transform:uppercase;
  color: var(--rose-2); margin-bottom: 18px; display:block;
}
.section-head{ max-width: 620px; margin-bottom: 64px; }
.section-head h2{ font-size: clamp(32px, 4.4vw, 52px); font-style: italic; line-height:1.12; }
.section-head p{ margin-top: 18px; opacity:.75; font-size:16px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- Ensō divider (signature motif reused as a section break) ---------- */
.enso-divider{ display:flex; justify-content:center; margin: 8px 0 40px; opacity:.5; }
.enso-divider svg{ width:54px; height:54px; }

/* ---------- Cards ---------- */
.card{
  padding: 40px 32px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: rgba(201,164,76,0.4); }
.card .num{ font-family: var(--font-display); font-style:italic; font-size:14px; color: var(--gold-2); opacity:.8; }
.card h3{ font-size: 24px; margin: 18px 0 12px; }
.card p{ opacity:.72; font-size: 14.5px; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-delay-1.in{ transition-delay: .1s; }
.reveal-delay-2.in{ transition-delay: .2s; }
.reveal-delay-3.in{ transition-delay: .3s; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--glass-border);
  padding: 70px 0 34px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 50px;
}
.footer-grid > *{ min-width: 0; }
.footer-grid h4{ font-family: var(--font-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.55; margin-bottom:18px; }
.footer-grid a, .footer-grid p{ font-size: 14px; opacity:.8; display:block; margin-bottom:10px; }
.footer-grid a:hover{ opacity:1; color: var(--gold-2); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 26px; border-top: 1px solid var(--glass-border);
  font-size:12px; opacity:.5; flex-wrap:wrap; gap:10px;
}
@media (max-width: 820px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Grid utilities ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-split{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center; }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-split > *, .row-2 > *{ min-width: 0; }
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .grid-split{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Loading screen
   ========================================================================== */
#loader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-deep-2);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity .8s var(--ease), transform .9s var(--ease), visibility .8s;
}
#loader.hide{ opacity:0; transform: scale(1.06); visibility:hidden; pointer-events:none; }
.loader-mark{ width:104px; height:104px; }
.loader-mark .loader-L{
  stroke-dasharray: 140; stroke-dashoffset: 140;
  animation: loaderDraw 1s var(--ease) forwards;
}
.loader-mark .loader-L2{ animation-delay: .16s; }
.loader-mark .loader-ring{ opacity:0; animation: loaderFade .6s ease forwards .85s; }
.loader-mark .loader-dot{ opacity:0; transform-origin:center; transform:scale(0); animation: loaderPop .45s ease forwards 1s; }
@keyframes loaderDraw{ to{ stroke-dashoffset:0; } }
@keyframes loaderFade{ to{ opacity:.4; } }
@keyframes loaderPop{ to{ opacity:1; transform:scale(1); } }

.loader-word{
  margin-top:20px; font-family: var(--font-display); font-style:italic; font-size:22px;
  opacity:0; transform: translateY(10px);
  animation: loaderUp .6s var(--ease) forwards 1.05s;
}
.loader-progress{
  width:150px; height:2px; border-radius:2px; overflow:hidden;
  background: rgba(247,242,233,.12); margin-top:24px;
  opacity:0; animation: loaderUp .5s var(--ease) forwards 1.15s;
}
.loader-bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--rose), var(--gold-2)); }
.loader-pct{
  margin-top:10px; font-size:10.5px; letter-spacing:.24em; color: var(--cream); opacity:0;
  animation: loaderUp .5s var(--ease) forwards 1.25s;
}
@keyframes loaderUp{ to{ opacity:.6; transform:translateY(0); } }

/* Cinematic content entrance beneath the loader */
.page-shell{ transition: opacity 1.1s var(--ease) .05s, transform 1.2s var(--ease) .05s; }
body.loading .page-shell{ opacity:0; transform: scale(1.025); }
body.loading{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  #loader{ transition: opacity .3s linear, visibility .3s; }
  .page-shell{ transition: opacity .3s linear; }
  .loader-mark .loader-L, .loader-mark .loader-ring, .loader-mark .loader-dot,
  .loader-word, .loader-progress, .loader-pct{ animation-duration: .01s; animation-delay: 0s; }
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */
body.cursor-active, body.cursor-active *{ cursor: none !important; }

.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index: 10000;
  border-radius: 50%; pointer-events:none;
  transform: translate(-50%,-50%);
}
.cursor-dot{
  width:6px; height:6px; background: var(--gold-2);
  transition: opacity .25s ease, width .3s var(--ease), height .3s var(--ease);
}
.cursor-ring{
  width:38px; height:38px;
  border:1px solid rgba(247,242,233,.5);
  background: rgba(247,242,233,.04);
  display:flex; align-items:center; justify-content:center;
  transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cursor-ring.hover{
  width:70px; height:70px;
  border-color: var(--rose-2);
  background: rgba(201,138,119,.14);
}
.cursor-ring.has-label{ background: var(--ink); border-color: var(--gold-2); }
.cursor-label{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream);
  opacity:0; transition: opacity .25s ease;
}
.cursor-ring.has-label .cursor-label{ opacity:1; }

/* Magnetic buttons — fast, independent transform transition */
.btn, .nav-cta{ transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .18s ease-out; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-group{ margin-bottom: 54px; }
.faq-group-title{
  font-size: 12px; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-2); opacity:.85; margin-bottom: 18px;
}
.faq-item{
  border-bottom: 1px solid var(--glass-border);
}
.faq-item:first-child{ border-top: 1px solid var(--glass-border); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 24px 4px; color: var(--cream); font-family: var(--font-body);
}
.faq-q h4{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size:18px; line-height:1.4; }
.faq-q .icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--glass-border); position:relative;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.faq-q .icon::before, .faq-q .icon::after{
  content:''; position:absolute; background: var(--gold-2);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-q .icon::before{ width:10px; height:1.5px; }
.faq-q .icon::after{ width:1.5px; height:10px; transition: opacity .3s var(--ease); }
.faq-item.open .faq-q .icon{ transform: rotate(180deg); border-color: var(--gold-2); }
.faq-item.open .faq-q .icon::after{ opacity:0; }

.faq-a{
  max-height:0; overflow:hidden;
  transition: max-height .5s var(--ease);
}
.faq-a p{
  padding: 0 4px 26px; opacity:.72; font-size:14.5px; line-height:1.8; max-width:640px;
}

/* ==========================================================================
   Menu / price list (expanded services)
   ========================================================================== */
.menu-panel{ padding: 36px 38px; }
.menu-panel-title{
  font-family: var(--font-display); font-style:italic; font-size:21px;
  margin-bottom: 4px;
}
.menu-panel-note{ font-size:12.5px; opacity:.55; margin-bottom: 20px; }
.menu-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding: 15px 0; border-bottom: 1px solid var(--glass-border);
}
.menu-row:last-child{ border-bottom:none; padding-bottom:0; }
.menu-row:first-of-type{ padding-top:0; }
.menu-row h4{ font-family: var(--font-body); font-weight:400; font-size:15px; }
.menu-row .price{ font-family: var(--font-display); font-style:italic; color: var(--gold-2); font-size:15px; white-space:nowrap; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.stars{ color: var(--gold-2); font-size:15px; letter-spacing:2px; }
.stars .empty{ color: rgba(247,242,233,.25); }

.pinned-review{
  padding: 52px 56px;
  border-color: rgba(201,164,76,0.4);
  position: relative;
}
.pinned-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-2); margin-bottom:18px;
}
.pinned-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-2); }
.pinned-review p.review-text{ font-size:18px; line-height:1.75; font-family:var(--font-display); font-style:italic; opacity:.9; margin-top:20px; max-width:680px; }
.review-name{ margin-top:22px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }

.review-card{ display:flex; flex-direction:column; gap:14px; }
.review-card .review-text{ font-size:14.5px; line-height:1.75; opacity:.78; }
.review-card .review-name{ margin-top:auto; padding-top:10px; }
.review-card.new-review{ border-color: rgba(201,164,76,0.45); }

/* Rating widget for the form */
.rating-widget{ display:flex; gap:8px; }
.rating-star{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--glass-border); background:transparent;
  color: rgba(247,242,233,.4); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s var(--ease);
}
.rating-star.active{ color: var(--gold-2); border-color: var(--gold-2); background: rgba(201,164,76,.12); }

/* ==========================================================================
   Form fields (shared by Booking and Reviews)
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.65; }
.field input, .field select, .field textarea{
  width:100%;
  min-width: 0;
  background: rgba(247,242,233,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--gold-2);
  background: rgba(247,242,233,0.08);
}
.field select option{ background: var(--ink); color: var(--cream); }
.field textarea{ resize: vertical; min-height: 100px; font-family: var(--font-body); line-height:1.6; }
.char-count{ font-size:11px; opacity:.4; text-align:right; margin-top:-2px; }

.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .row-2{ grid-template-columns:1fr; } }

#toast{
  position:fixed; bottom:28px; right:28px; z-index:200;
  padding:18px 26px; border-radius:14px; max-width:320px;
  transform: translateY(140%); transition: transform .5s var(--ease);
}
#toast.show{ transform: translateY(0); }

/* ==========================================================================
   Review form panel
   ========================================================================== */
.review-form-panel{ padding: 48px; }
.review-form-panel .form-eyebrow{
  font-size: 11px; letter-spacing:.24em; text-transform:uppercase;
  color: var(--rose-2); margin-bottom: 8px;
}
.review-form-panel h3{ font-size: 24px; font-style:italic; margin-bottom: 30px; }

.rating-widget{ display:flex; align-items:center; gap:10px; }
.rating-star{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--glass-border); background:rgba(247,242,233,0.03);
  color: rgba(247,242,233,.35); font-size:19px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s var(--ease);
}
.rating-star:hover{ border-color: rgba(201,164,76,.5); color: rgba(227,192,119,.7); transform: translateY(-2px); }
.rating-star.active{ color: var(--gold-2); border-color: var(--gold-2); background: rgba(201,164,76,.14); box-shadow: 0 6px 18px rgba(201,164,76,.18); }
.rating-hint{ font-size:12.5px; opacity:.55; margin-left:6px; min-width:78px; }
.rating-error{
  font-size:12.5px; color: var(--rose-2); margin-top:8px; opacity:0; height:0;
  transition: opacity .3s var(--ease);
}
.rating-error.show{ opacity:1; height:auto; }

#review-submit .btn-state{ display:inline-flex; align-items:center; gap:8px; }
@keyframes newReviewGlow{
  0%{ box-shadow: 0 0 0 0 rgba(201,164,76,.5); border-color: var(--gold-2); }
  100%{ box-shadow: 0 0 0 24px rgba(201,164,76,0); border-color: rgba(201,164,76,0.45); }
}
.review-card.new-review{ animation: newReviewGlow 1.8s var(--ease) forwards; }

/* ---------- Utility ---------- */
.tag-line{ font-family: var(--font-display); font-style: italic; opacity:.8; }
.pill{
  display:inline-block; padding:6px 16px; border-radius:999px;
  border:1px solid var(--glass-border); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--gold-2);
}


/* Empty replacement image slots. They become visible when images are inserted. */
.image-slot{display:none;}


/* Inserted website photography */
.site-photo{overflow:hidden;border-radius:24px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04);}
.site-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.content-photo{min-height:420px;}
.content-photo img{min-height:420px;max-height:700px;object-position:center;}
.mood.site-photo{display:block;padding:0;min-height:360px;}
.mood.site-photo.tall{min-height:560px;}
.mood.site-photo img{min-height:inherit;}
@media(max-width:700px){.content-photo{min-height:360px}.content-photo img{min-height:360px}.mood.site-photo,.mood.site-photo.tall{min-height:420px;}}

/* ========================================================================
   Compact page flow — prevent empty-looking scroll areas
   ======================================================================== */
html, body{
  min-height:100%;
  overscroll-behavior-y:none;
}
body{
  display:flex;
  flex-direction:column;
}
.page-shell{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-shell > footer{
  margin-top:auto;
}

/* Keep the page visually full without oversized blank gaps. */
section{ padding:82px 0; }
section.tight{ padding:58px 0; }
.section-head{ margin-bottom:44px; }
footer{ padding:48px 0 26px; }
.footer-grid{ padding-bottom:34px; }

/* Hidden image positions must not reserve a column or section width. */
.image-slot{ display:none !important; }
.grid-split.single-column{
  grid-template-columns:minmax(0, 760px);
  justify-content:center;
}
.grid-split.single-column > *{
  width:100%;
}

@media (max-width:700px){
  section{ padding:54px 0; }
  section.tight{ padding:40px 0; }
  .section-head{ margin-bottom:32px; }
  footer{ padding:38px 0 22px; }
  .footer-grid{ padding-bottom:26px; }
  .container{ padding-left:20px; padding-right:20px; }
}