/* ==========================================================================
   Vesper Psych design system
   Derived from the approved home page mockup at
   reference/vesper-psych-REFERENCE-MOCKUP.html. Palette, type, motion, and
   components are shared by every page. Page layout is deliberately varied,
   and each page adds only its own arrangement rules on top of this file.
   ========================================================================== */

:root{
  --paper:#fbfdfa; --sage:#eef2ec; --sage-2:#e4eae1; --sage-3:#dae3d6;
  --ink:#1e2c22; --ink-2:#55685c; --ink-3:#86988c;
  --forest:#2c4433; --forest-2:#1f3226; --leaf:#4a6b53; --leaf-soft:#dfe9dd;
  --heather:#6d6280; --heather-2:#544a66; --heather-soft:#efecf3;
  --hairline:#d5ded1;
  --display:'Marcellus',Georgia,serif; --body:'Jost',-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sage);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:var(--leaf)}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 30px}
.caps{letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- type ------------------------------------------------------------- */
h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.7vw,3rem);
  letter-spacing:.005em;line-height:1.2;margin:0 0 20px;color:var(--ink)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.2vw,2.5rem);
  letter-spacing:.02em;line-height:1.25;margin:0 0 12px;text-wrap:balance}
h3{font-family:var(--display);font-weight:400;font-size:1.22rem;letter-spacing:.03em;margin:0}
.lede{font-size:1.1rem;color:#3f5145;max-width:640px;margin:0 0 26px;letter-spacing:.01em}
.lede b{font-weight:500;color:var(--leaf)}
.sub{color:var(--ink-2);font-weight:300;max-width:600px;margin:0 0 38px}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}
.rule{width:100%;max-width:660px;height:1px;background:rgba(30,44,34,.4);margin:0 0 20px}
.fine{font-size:.78rem;color:var(--ink-2);font-weight:300;margin:12px 0 0}

/* --- buttons ---------------------------------------------------------- */
.btn{display:inline-block;background:var(--forest);color:#f2f7f0;padding:16px 34px;
  letter-spacing:.22em;text-transform:uppercase;font-size:.75rem;font-weight:500;border:0;
  cursor:pointer;font-family:var(--body);
  transition:background .25s ease,letter-spacing .25s ease}
.btn:hover{background:var(--forest-2);color:#fff;letter-spacing:.28em}
.btn.line{background:transparent;border:1px solid var(--leaf);color:var(--leaf);margin-left:14px}
.btn.line:hover{background:var(--leaf);color:var(--paper)}
.btn.pale{background:transparent;border:1px solid #a8ceb0;color:#d6e7d6;margin-left:0}
.btn.pale:hover{background:#a8ceb0;color:var(--forest-2)}

/* --- masthead --------------------------------------------------------- */
.head{padding:0}
.head .hin{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:22px;padding-bottom:22px}
.head.plain{background:var(--sage);border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand svg{width:32px;height:32px;flex:0 0 auto}
.brand .wm{font-family:var(--display);font-size:1.16rem;letter-spacing:.06em;line-height:1.1}
.brand .wm em{font-style:normal;color:var(--leaf)}
.head nav{display:flex;align-items:center;gap:26px}
.head nav a{color:var(--ink);font-size:.78rem}
.head nav a:hover{color:var(--leaf)}
.head nav a.on{border-bottom:1px solid var(--leaf);padding-bottom:3px}
.head .navbtn{border:1px solid var(--leaf);padding:9px 18px;color:var(--leaf)}
.head .navbtn:hover{background:var(--leaf);color:var(--paper)}

/* --- photography and the one authored motion -------------------------- */
.photo{position:absolute;inset:-6% -9%;background-position:center 45%;
  background-size:cover;background-repeat:no-repeat;filter:saturate(.74) brightness(1.1)}
.photo.dark{filter:saturate(.9) brightness(.4) contrast(1.05)}
@media (prefers-reduced-motion: no-preference){
  /* One long, shallow drift. 72 seconds end to end, a 7% zoom rather than 11%,
     and the second image drifts the opposite way so the pair never reads as a
     loop. The crossfade runs on its own 50 second cycle so the two never turn
     around together. */
  .photo.moves{animation:driftzoom 72s cubic-bezier(.37,0,.63,1) infinite alternate;
    will-change:transform;backface-visibility:hidden}
  .photo.moves.slow{animation-duration:88s}
  .photo.fades{animation:driftzoom-rev 72s cubic-bezier(.37,0,.63,1) infinite alternate,
                          xfade 50s ease-in-out infinite;
    will-change:transform,opacity;backface-visibility:hidden}
  @keyframes driftzoom{
    from{transform:scale(1.06) translate3d(-2.2%,.5%,0)}
    to{transform:scale(1.13) translate3d(2.2%,-.5%,0)}
  }
  @keyframes driftzoom-rev{
    from{transform:scale(1.13) translate3d(2.2%,-.5%,0)}
    to{transform:scale(1.06) translate3d(-2.2%,.5%,0)}
  }
  @keyframes xfade{0%,36%{opacity:0}50%,86%{opacity:1}100%{opacity:0}}
}
@media (prefers-reduced-motion: reduce){.photo{transform:scale(1.06);animation:none}}

/* --- shared sections -------------------------------------------------- */
section{position:relative}
.band{background:var(--sage);padding:64px 0 76px}
.band.paper{background:var(--paper)}
.dark{position:relative;overflow:hidden;background:var(--forest);color:#e8efe5;padding:96px 0}
.dark::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(22,36,26,.9) 0%,rgba(34,54,40,.78) 50%,rgba(22,36,26,.92) 100%)}
.dark>.wrap{position:relative;z-index:2}
.dark h2{color:#f4f8f2}
.dark .sub{color:#c3d5c5}
.dark a{color:#cfe3cf}
.pullline{text-align:center;font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.5rem);
  color:#e0ece0;max-width:34ch;margin:0 auto 46px;line-height:1.5}

/* --- accordion -------------------------------------------------------- */
.acc{max-width:770px;margin:0 auto}
.acc details{border-top:1px solid var(--hairline)}
.acc details:last-of-type{border-bottom:1px solid var(--hairline)}
.acc summary{cursor:pointer;list-style:none;padding:23px 8px;font-family:var(--display);
  font-size:1.13rem;letter-spacing:.02em;display:flex;justify-content:space-between;
  align-items:center;gap:16px;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';color:var(--leaf);font-size:1.5rem;transition:transform .25s ease}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .body{padding:0 8px 26px;color:var(--ink-2);font-weight:300;max-width:650px}
.dark .acc details{border-top-color:rgba(244,248,242,.24)}
.dark .acc details:last-of-type{border-bottom-color:rgba(244,248,242,.24)}
.dark .acc summary{color:#f4f8f2}
.dark .acc summary::after{color:#a8ceb0}
.dark .acc .body{color:#d2e0d2}

/* --- product mock (walkthrough cards) --------------------------------- */
.mock{background:var(--paper);border:1px solid var(--hairline);padding:14px;font-size:.84rem}
.mhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;
  font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--leaf)}
.badge{font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;white-space:nowrap;border:1px solid}
.b-done{border-color:#8aa78f;color:#3f6349;background:#e7f0e6}
.b-wait{border-color:#c4cec0;color:var(--ink-2);background:#eef2ec}
.b-you{border-color:var(--heather);color:var(--heather-2);background:var(--heather-soft)}
.field{background:#fff;border:1px solid var(--hairline);padding:8px 12px;margin-bottom:7px;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.field .lab{color:var(--leaf);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;flex:0 0 auto}
.field b{font-weight:500;text-align:right}
.quote{background:var(--heather-soft);padding:9px 12px;margin-bottom:7px;font-weight:300}
.tstamp{display:block;font-size:.65rem;color:var(--ink-3);letter-spacing:.1em;margin-bottom:3px}
.decide{display:flex;gap:7px;margin-top:10px}
.decide span{flex:1;text-align:center;padding:8px 0;border:1px solid var(--hairline);background:#fff;
  font-weight:500;font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.decide span.sel{background:var(--heather);border-color:var(--heather);color:#fff}
.skel{height:8px;background:var(--sage-3)}
.src{display:inline-block;font-size:.62rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  background:var(--leaf-soft);color:#3f6349;border:1px solid #bed3bd;padding:2px 9px;margin:6px 5px 0 0}
.mnote{margin-top:12px;font-size:.76rem;color:var(--ink-2);font-weight:300}

/* --- screenshots ------------------------------------------------------ */
figure{margin:0}
.shot{border:1px solid var(--hairline);background:var(--paper);padding:10px}
.shot img{width:100%;filter:saturate(.82) contrast(.98)}
figcaption{font-size:.78rem;color:var(--ink-2);font-weight:300;margin-top:10px}

/* --- lightbox: a screenshot opens at full size ------------------------- */
.shot.zoom{cursor:zoom-in}
.shot.zoom img{transition:opacity .2s ease}
.shot.zoom:hover img{opacity:.9}
.shot .tap{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leaf);margin-top:8px;font-weight:500}
dialog.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;color:#e8efe5}
dialog.lb::backdrop{background:rgba(20,32,24,.92)}
dialog.lb .in{background:var(--paper);border:1px solid var(--hairline);padding:12px}
dialog.lb img{max-width:92vw;max-height:82vh;width:auto;height:auto;filter:saturate(.82) contrast(.98)}
dialog.lb .cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-top:10px;font-size:.85rem;color:var(--ink-2);font-weight:300}
dialog.lb button{background:none;border:0;font-family:var(--body);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leaf);cursor:pointer;padding:4px 0;font-weight:500}
dialog.lb button:hover{color:var(--ink)}
/* --- forms ------------------------------------------------------------ */
label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leaf);margin:0 0 6px;font-weight:500}
input,select,textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--hairline);padding:12px 14px;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--leaf);outline-offset:-2px}
textarea{min-height:120px;resize:vertical}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.formrow.one{grid-template-columns:1fr}

/* --- footer ----------------------------------------------------------- */
.foot{background:var(--sage-2);padding:70px 30px 34px;color:var(--ink-2);font-size:.95rem}
.fwrap{max-width:1080px;margin:0 auto}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.fbrand p{margin:16px 0 0;max-width:310px;color:var(--ink-2);font-weight:300;font-size:.93rem}
.fbrand .dom{display:inline-block;margin-top:14px;font-size:.82rem;letter-spacing:.1em;color:var(--leaf)}
.foot h5{font-family:var(--display);font-weight:400;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leaf);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot li a{color:var(--ink-2);font-weight:300}
.foot li a:hover{color:var(--leaf)}
.fbottom{border-top:1px solid var(--hairline);padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.84rem;font-weight:300}

@media(max-width:900px){
  .formrow{grid-template-columns:1fr}
}
@media(max-width:760px){
  .fgrid{grid-template-columns:1fr 1fr}
  .btn.line{margin:14px 0 0}
  .head .hin{padding-top:18px;padding-bottom:18px}
  .head nav a:not(.navbtn){display:none}
}