/* =====================================================================
   EverVita Wellness
   Palette sampled from the logo: deep teal ("Ever"), sage ("Vita"), mist
   green and blush leaves on a warm off-white. Text colours are the darker
   variants — the logo's sage and blush are too light to carry small text
   (sage is ~2.8:1 on the paper), so they stay decorative.
   ===================================================================== */
:root{
  --paper:#F7F4EE;
  --paper-2:#EFEBE3;
  --surface:rgba(255,255,255,.68);
  --surface-strong:rgba(255,255,255,.86);

  --teal:#3F6277;        /* 5.9:1 on paper — body links, buttons */
  --teal-deep:#2C4A5C;   /* headings */
  --sage:#7E9A83;        /* decorative only */
  --sage-text:#56715C;   /* 4.7:1 — italic accents in headings */
  --mist:#DCE6D8;
  --blush:#E4A98F;       /* decorative only — hairlines, rings */
  --blush-soft:#F4E1D7;

  --ink:#2E3B40;
  --ink-soft:#56646A;    /* 5.6:1 */
  --line:rgba(63,98,119,.14);

  --radius:20px;
  --maxw:1160px;
  --ease-calm:cubic-bezier(.22,.8,.3,1);
}

/* ===== BASE ===== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
main{flex:1; position:relative; z-index:1;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
strong{font-weight:500;}
h1,h2,h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  color:var(--teal-deep);
  line-height:1.12;
  letter-spacing:-.005em;
}
h1 em, h2 em{font-style:italic; color:var(--sage-text);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

.eyebrow{
  font-size:12px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--sage-text);
  margin-bottom:18px;
}
.lead{font-size:19px; color:var(--ink-soft); max-width:34em;}

:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--teal); color:#fff; padding:12px 20px;
}
.skip-link:focus{left:0;}

.text-link{color:var(--teal); border-bottom:1px solid rgba(63,98,119,.3); transition:border-color .2s;}
.text-link:hover{border-color:var(--teal);}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Jost',sans-serif; font-weight:400;
  font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 30px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ease-calm), box-shadow .3s ease;
}
.btn-sm{padding:10px 22px; font-size:12.5px;}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:hover{background:var(--teal-deep); transform:translateY(-1px); box-shadow:0 8px 22px -12px rgba(44,74,92,.6);}
.btn-ghost{background:rgba(255,255,255,.5); color:var(--teal); border-color:rgba(63,98,119,.3);}
.btn-ghost:hover{border-color:var(--teal); background:rgba(255,255,255,.85);}

/* ===== BRANCHES (background) =====
   Markup from Rendering/BranchArt.cs. Three phases:
     1. grow   — each stem's stroke draws from base to tip (dashoffset 1 -> 0)
     2. unfurl — each leaf scales up from its base as the stem reaches it
     3. sway   — once grown, each whole spray drifts a degree or so, forever
   Sway is applied to the <svg> element itself (not shapes inside it) so the
   browser can hand it to the compositor instead of repainting the SVG each
   frame. */
.branches{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.branch-defs{position:absolute; width:0; height:0;}
.branch{position:absolute; height:auto; opacity:.62; overflow:visible;}
.branch--top-left{
  top:78px; left:0; width:clamp(200px,30vw,440px);
  transform-origin:0 35%;
  animation:sway 17s ease-in-out 5s infinite;
}
.branch--bottom-right{
  bottom:0; right:0; width:clamp(240px,36vw,540px);
  transform-origin:100% 100%;
  animation:sway 21s ease-in-out 6s infinite reverse;
}
.branch--bottom-left{
  bottom:0; left:0; width:clamp(130px,16vw,250px);
  transform-origin:0 100%;
  animation:sway 14s ease-in-out 6.5s infinite;
}

.stem{
  fill:none; stroke:#8FA894; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:stem-grow var(--dur) cubic-bezier(.45,0,.55,1) var(--d) forwards;
}
.leaf{
  transform-box:fill-box; transform-origin:0 50%;
  opacity:0; transform:scale(0);
  animation:leaf-unfurl 1.9s var(--ease-calm) var(--d) forwards;
}
.leaf-vein{fill:none; stroke:rgba(255,255,255,.6); stroke-width:.8; stroke-linecap:round;}

@keyframes stem-grow{to{stroke-dashoffset:0;}}
@keyframes leaf-unfurl{
  0%{opacity:0; transform:scale(0) rotate(-26deg);}
  35%{opacity:1;}
  100%{opacity:1; transform:scale(1) rotate(0);}
}
@keyframes sway{
  0%,100%{rotate:0deg;}
  30%{rotate:1.1deg;}
  70%{rotate:-.8deg;}
}

/* Already grown this session (set in <head> before first paint) — show the
   finished branches immediately and just let them sway. */
.branches-grown .stem{animation:none; stroke-dashoffset:0;}
.branches-grown .leaf{animation:none; opacity:1; transform:none;}
.branches-grown .branch{animation-delay:0s;}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,238,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:28px; height:78px;}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto;}
.brand-mark{width:62px; height:auto;}
.brand-type{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:27px; letter-spacing:-.01em;}
.ever{color:var(--teal);}
.vita{color:var(--sage-text);}
.brand-sub{
  font-size:10px; font-weight:400; letter-spacing:.46em; text-transform:uppercase;
  color:var(--teal); margin-top:4px; padding-left:2px;
}
.navlinks{display:flex; gap:26px;}
.navlinks a{
  font-size:13.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 0; position:relative; transition:color .25s;
}
.navlinks a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:var(--blush); transition:left .35s var(--ease-calm), right .35s var(--ease-calm);
}
.navlinks a:hover{color:var(--teal);}
.navlinks a:hover::after, .navlinks a[aria-current="page"]::after{left:0; right:0;}
.navlinks a[aria-current="page"]{color:var(--teal);}
.navcta{display:flex; align-items:center; gap:14px;}
/* Portal sits in the nav for existing patients; the lock marks it as the
   secure, sign-in link without competing with the Book button. */
.navlinks a.nav-portal{display:inline-flex; align-items:center; gap:6px;}
.nav-portal svg{opacity:.75;}
.label-short{display:none;}

.navburger{display:none; background:none; border:0; width:40px; height:40px; padding:9px 8px; cursor:pointer; border-radius:8px;}
.navburger span{display:block; height:1.5px; background:var(--teal); margin:5px 0; transition:transform .3s, opacity .3s;}
.navburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.navburger.open span:nth-child(2){opacity:0;}
.navburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ===== SECTIONS ===== */
.section{padding:88px 0;}
.section-tight{padding-top:24px;}
.section-soft{
  background:linear-gradient(180deg, rgba(220,230,216,0) 0%, rgba(220,230,216,.42) 18%, rgba(220,230,216,.42) 82%, rgba(220,230,216,0) 100%);
}
.section-head{text-align:center; margin-bottom:48px;}
.section-head h2{font-size:clamp(32px,4vw,44px);}

/* Three-leaf divider between two blush hairlines, as on the card. */
.sprig{display:flex; align-items:center; justify-content:center; gap:14px; margin:14px auto 0;}
.sprig::before, .sprig::after{content:''; width:64px; height:1px; background:var(--blush); opacity:.8;}

/* ===== HERO ===== */
.hero{padding:72px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(44px,6vw,74px); margin-bottom:22px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.hero-ctas.centered{justify-content:center;}
/* Quiet phone fallback under the hero buttons, for people who'd rather talk. */
.call-alt{margin-top:18px; font-size:15px; color:var(--ink-soft);}
.call-alt a{color:var(--teal); font-weight:400; border-bottom:1px solid rgba(63,98,119,.3);}
.call-alt a:hover{border-color:var(--teal);}
.hero-art{position:relative; justify-self:center; width:min(100%,440px);}
/* Soft white glow behind the medallion so it sits on the page rather than
   on top of it. */
.hero-art::before{
  content:''; position:absolute; inset:-8%;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.6) 70%, rgba(255,255,255,0));
  border-radius:50%; z-index:-1;
}
.hero-art img{width:100%; height:auto;}

/* ===== PAGE HEAD (inner pages) ===== */
.page-head{padding:72px 0 40px;}
.page-head h1{font-size:clamp(40px,5.2vw,62px); margin-bottom:18px;}
.book-prompt{margin-top:14px; font-size:16px; color:var(--ink-soft);}
.page-head .cred{color:var(--sage-text); font-style:italic;}

/* ===== CARDS ===== */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card{
  display:flex; flex-direction:column;
  background:var(--surface);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px 30px;
  transition:transform .5s var(--ease-calm), box-shadow .5s ease, background .5s ease;
}
.card:hover{transform:translateY(-4px); background:var(--surface-strong); box-shadow:0 24px 40px -28px rgba(44,74,92,.4);}
.card h3{font-size:28px; margin:18px 0 10px;}
.card p{color:var(--ink-soft); flex:1;}
.card-more{
  margin-top:22px; font-size:12.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
}
.card-more::after{content:' \2192'; display:inline-block; transition:transform .4s var(--ease-calm);}
.card:hover .card-more::after{transform:translateX(4px);}

.card-icon, .contact-icon{
  display:inline-grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(145deg, var(--mist), var(--blush-soft));
  color:var(--teal);
  flex-shrink:0;
}

/* ===== STEPS ===== */
.steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; counter-reset:none;}
.steps li{text-align:center; padding:0 10px;}
.step-num{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--blush); color:var(--teal);
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500;
  background:rgba(255,255,255,.7);
}
.steps h3{font-size:26px; margin:16px 0 8px;}
.steps p{color:var(--ink-soft); max-width:22em; margin:0 auto;}

/* ===== VISIT BAND ===== */
.visit{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  background:var(--surface-strong);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:28px;
  padding:44px 52px;
  position:relative; overflow:hidden;
}
.visit::before{
  content:''; position:absolute; inset:0 auto 0 0; width:5px;
  background:linear-gradient(var(--sage), var(--blush));
}
.visit h2{font-size:clamp(30px,3.4vw,40px); margin-bottom:6px;}
.visit p{color:var(--ink-soft); max-width:34em;}
.visit-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ===== SERVICES ===== */
.services{display:grid; gap:26px;}
.service{
  display:grid; grid-template-columns:300px 1fr; gap:40px;
  background:var(--surface);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:44px 48px;
  scroll-margin-top:110px;
}
.service-title{display:flex; flex-direction:column; gap:16px;}
.service h2{font-size:34px;}
.service-body p{color:var(--ink-soft); margin-bottom:18px; max-width:40em;}

/* Emphasis inside service copy: a touch more weight and the darker teal, same
   treatment as the Coming Soon page. */
.service-body strong{font-weight:500; color:var(--teal-deep);}
.ticks{list-style:none; display:grid; gap:10px;}
.ticks li{position:relative; padding-left:30px;}
/* Small leaf in place of a bullet. */
.ticks li::before{
  content:''; position:absolute; left:2px; top:.5em; width:14px; height:9px;
  background:linear-gradient(90deg, var(--sage), #B9CCB8);
  border-radius:0 100% 0 100%;
  transform:rotate(-24deg);
}

/* ===== ABOUT ===== */
.about{display:grid; grid-template-columns:320px 1fr; gap:64px; align-items:start;}
.about-art{
  aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(closest-side, #fff, rgba(255,255,255,.7));
  border:1px solid var(--line);
  box-shadow:0 0 0 10px rgba(255,255,255,.5), 0 0 0 11px rgba(228,169,143,.35);
}
.about-art img{width:64%;}
.about-copy p{margin-bottom:18px; max-width:38em; color:var(--ink-soft);}
.about-copy .lead{color:var(--ink);}
.about-copy .sprig{justify-content:flex-start; margin:30px 0 20px;}
.philosophy{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:27px; line-height:1.35;
  color:var(--teal-deep); max-width:22em;
}

/* ===== CONTACT ===== */
.contact-layout{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:40px; align-items:start;}

.contact-aside{display:grid; gap:18px;}
.contact-item{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--surface);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 26px;
}
.contact-item > div{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0;}
.contact-item h2{font-size:24px;}
.contact-item .contact-icon{width:50px; height:50px;}
.contact-value{font-size:18px; font-weight:400; font-style:normal; color:var(--teal); line-height:1.5;}
a.contact-value:hover{color:var(--teal-deep);}
.contact-email{font-size:15.5px; word-break:break-word;}
.contact-note{font-size:14.5px; color:var(--ink-soft);}

/* ----- Form ----- */
.form-card{
  background:var(--surface-strong);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:28px;
  padding:44px 44px 40px;
  scroll-margin-top:100px;
}
.form-card > h2{font-size:34px; margin-bottom:20px;}

.privacy-notice{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(135deg, rgba(220,230,216,.55), rgba(244,225,215,.55));
  border-radius:14px;
  padding:14px 18px;
  font-size:14.5px; line-height:1.55; color:var(--ink-soft);
  margin-bottom:26px;
}
.privacy-notice svg{color:var(--teal); flex-shrink:0; margin-top:2px;}
.privacy-notice strong{color:var(--ink);}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:20px;}
.field label{
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep);
}
.optional{font-weight:300; letter-spacing:.04em; text-transform:none; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  font:inherit; font-size:16px; font-weight:400; color:var(--ink);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(63,98,119,.24);
  border-radius:12px;
  padding:12px 14px;
  width:100%;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{resize:vertical; min-height:130px; line-height:1.55;}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233F6277' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.field ::placeholder{color:#8A969A; font-weight:300;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(63,98,119,.14);
}
.field .input-validation-error{border-color:#A4503A;}
.field-error{font-size:13.5px; color:#9A4632;}  /* 5.3:1 on white */
.field-error:empty{display:none;}

.validation-summary{
  background:#FBEDE7; border:1px solid rgba(164,80,58,.3); border-radius:14px;
  padding:12px 18px; margin-bottom:22px; font-size:14.5px; color:#7F3A28;
}
.validation-summary ul{margin:0; padding-left:18px;}
.validation-summary .validation-summary-valid{display:none;}

.form-status{
  border-radius:14px; padding:16px 20px; margin-bottom:26px; font-size:15.5px; line-height:1.6;
}
.form-status strong{display:block; font-weight:500; margin-bottom:2px;}
.form-status a{color:inherit; text-decoration:underline; text-underline-offset:3px;}
.form-status:focus{outline:none;}
.form-status.ok{background:#E6EFE4; border:1px solid rgba(86,113,92,.35); color:#2F4A36;}
.form-status.warn{background:#FBEDE7; border:1px solid rgba(164,80,58,.3); color:#7F3A28;}

/* Honeypot: off-screen, not display:none, since some bots skip hidden fields. */
.hp-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

/* ===== NOTICE PAGES (portal, 404, error) ===== */
.notice-page{padding:96px 0 110px;}
.notice{
  max-width:640px; margin:0 auto; text-align:center;
  background:var(--surface-strong);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:28px;
  padding:52px 44px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.notice h1{font-size:clamp(34px,4.4vw,46px);}
.notice p{color:var(--ink-soft);}
.notice .hero-ctas{margin-top:12px;}
.request-id{font-size:13px;}

/* /book fallback — two side-by-side ways to schedule. */
.notice-wide{max-width:760px;}
.book-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; width:100%; margin-top:14px;}
.book-option{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 22px;
}
.book-option h2{font-size:26px;}
.book-option p{font-size:15px;}
.book-option .btn{margin-top:auto;}

/* ===== FOOTER ===== */
.site-footer{
  position:relative; z-index:1;
  background:var(--paper-2);
  border-top:1px solid var(--line);
  padding:64px 0 36px;
  font-size:15px;
}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.foot-brand{display:flex; flex-direction:column; line-height:1;}
.foot-brand .brand-name{font-size:34px;}
.foot-services{
  margin-top:22px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); line-height:1.8;
}
.foot-services i{font-style:normal; color:var(--blush); margin:0 6px;}
.foot-h{
  font-family:'Jost',sans-serif; font-size:12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sage-text); margin-bottom:14px;
}
.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.foot-col address{font-style:normal; color:var(--ink);}
.foot-link{color:var(--teal); transition:color .2s;}
.foot-link:hover{color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px;}
.foot-note{font-size:13.5px; color:var(--ink-soft);}
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-soft);
}
/* Developer credit: same muted tone as the copyright, no colour of its own,
   so it reads as a signature rather than a link competing for attention. */
.foot-credit{font-size:12.5px; letter-spacing:.02em;}
.foot-credit a{color:inherit; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;}
.foot-credit a:hover{color:var(--teal); border-color:rgba(63,98,119,.35);}
.foot-legal{margin-top:16px; font-size:12.5px; line-height:1.6; color:var(--ink-soft); max-width:62em;}

/* ===== REVEAL =====
   Content eases up into place as it scrolls into view. Only hidden when JS is
   running (site.js adds .js), so without JS everything is simply there. */
.js .reveal{opacity:0;}
.js .reveal.in{animation:rise 1.1s var(--ease-calm) var(--reveal-delay,0s) both;}
/* Above-the-fold content fades in on a pure CSS timer instead of waiting for
   site.js and the observer. The hero heading is usually the page's Largest
   Contentful Paint, which Google scores — gating it on script would push that
   back for no visual gain. */
.reveal-now{animation:rise 1.1s var(--ease-calm) var(--reveal-delay,0s) both;}
/* Failsafe: .js is set in <head>, but .js-ok only once site.js runs. If the
   script fails to load, show everything after a beat rather than never. */
.js:not(.js-ok) .reveal{animation:rise .8s ease 1.5s forwards;}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

/* ===== COMING SOON =====
   Pre-launch landing page (Views/Home/ComingSoon). One screen, centred, with
   the branches carried at full strength behind it — there is no other content
   competing with them here, and the growth is the point of the page. */
.coming-soon-body{display:flex; flex-direction:column; min-height:100vh;}
.coming-soon-body main{display:flex; flex:1;}

/* Stronger and larger than on the main site, where they sit behind text. */
.branches--feature .branch{opacity:.82;}
.branches--feature .branch--top-left{top:0; width:clamp(240px,34vw,520px);}
.branches--feature .branch--bottom-right{width:clamp(280px,42vw,640px);}
.branches--feature .branch--bottom-left{width:clamp(160px,20vw,310px);}

.cs{display:flex; flex:1; align-items:center; justify-content:center; padding:32px 24px 28px;}
.cs-inner{
  max-width:640px; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.cs-logo{width:min(56%,206px); height:auto; margin-bottom:12px;}
.cs-eyebrow{margin-bottom:14px;}
.cs h1{font-size:clamp(34px,4.6vw,52px); margin-bottom:12px;}
.cs-lead{max-width:30em; margin:0 auto;}
.cs .sprig{margin:18px auto 16px;}

/* The client's body copy. Narrow measure, centred, with the opening date
   lifted into the display face so it reads at a glance. */
.cs-body{max-width:33em; display:flex; flex-direction:column; gap:15px;}
.cs-body p{font-size:16.5px; color:var(--ink-soft); line-height:1.75;}
/* Beats .cs-body p on specificity — as a bare .cs-date it lost, and the one
   line that has to stand out rendered at body size. */
.cs-body p.cs-date{
  font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-style:italic;
  color:var(--teal-deep); line-height:1.35; margin:2px 0;
}
/* The three services, lifted out of the paragraph: a touch more weight and the
   darker teal, no colour shout. <strong> rather than a span so the emphasis is
   in the markup too, not only the styling. */
.cs-service{font-weight:500; color:var(--teal-deep);}

.cs-address{
  font-style:normal; font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin-top:18px;
}
.cs-credit{font-size:12.5px; color:var(--ink-soft); margin-top:20px;}
.cs-credit a{color:inherit; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;}
.cs-credit a:hover{color:var(--teal); border-color:rgba(63,98,119,.35);}

@media (max-width:560px){
  .cs{padding:40px 20px 36px;}
  .cs-logo{width:min(66%,220px);}
  .cs-body p{font-size:16px;}
  .cs-body p.cs-date{font-size:23px;}
  /* Keep the corner sprays clear of the text on a narrow screen. */
  .branches--feature .branch{opacity:.5;}
  .branches--feature .branch--top-left{display:none;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:36px; text-align:center;}
  .hero .lead{margin:0 auto;}
  .hero-ctas{justify-content:center;}
  .hero-art{width:min(80%,340px); grid-row:1;}
  .cards, .steps{grid-template-columns:1fr; max-width:560px; margin-left:auto; margin-right:auto;}
  .contact-layout{grid-template-columns:1fr; max-width:680px; margin:0 auto; gap:26px;}
  .service{grid-template-columns:1fr; gap:18px; padding:36px 32px;}
  .service-title{flex-direction:row; align-items:center;}
  .about{grid-template-columns:1fr; gap:40px;}
  .about-art{width:220px; margin:0 auto;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
}

@media (max-width:960px){
  .navburger{display:block;}
  .navlinks{
    position:absolute; top:78px; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(247,244,238,.97);
    border-bottom:1px solid var(--line);
    padding:8px 32px 20px;
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .navlinks.open{visibility:visible; opacity:1; transform:none; transition:opacity .3s ease, transform .3s ease;}
  .navlinks a{padding:14px 0; border-bottom:1px solid var(--line);}
  .navlinks a:last-child{border-bottom:0;}
  .navlinks a::after{display:none;}
  /* Branches recede on small screens, where they would sit behind text. */
  .branch{opacity:.4;}
}

@media (max-width:560px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .form-card{padding:30px 22px 28px; border-radius:22px;}
  .form-row{grid-template-columns:1fr;}
  .contact-item{padding:22px 20px;}
  .nav{gap:12px;}
  .brand-mark{width:46px;}
  .brand-name{font-size:23px;}
  .navcta .btn-sm{padding:9px 18px; font-size:12px; letter-spacing:.1em;}
  .label-long{display:none;}
  .label-short{display:inline;}
  .section{padding:64px 0;}
  .visit{padding:34px 28px;}
  .notice{padding:40px 24px;}
  .foot-grid{grid-template-columns:1fr;}
  .branch--top-left{display:none;}
}

/* Motion off: everything rendered in its final state, nothing drifts. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .stem{animation:none; stroke-dashoffset:0;}
  .leaf{animation:none; opacity:1; transform:none;}
  .branch{animation:none;}
  .js .reveal, .js .reveal.in, .reveal-now{opacity:1; animation:none;}
  *{transition-duration:.01ms !important;}
}