/* ==========================================================================
   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,.brand img{width:42px;height:32px;flex:0 0 auto;transform:translateY(-3px)}
.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 -------------------------- */
/* Two rules govern every moving photograph.
   1. The picture box is bigger than the frame that holds it (10% wider on each
      side, 8% taller), so no drift or zoom can ever pull an edge into view.
   2. The largest scale in the cycle is exactly 1. The browser rasterises the
      layer once at its full size and only ever scales down, so the picture
      stays sharp all the way through the zoom instead of going soft at the
      close end, which is what the old 1.06 to 1.13 range did.
   Travel is about 8% of the frame width over 46 seconds, roughly 2.5 pixels a
   second on a laptop. Slow enough to be calm, fast enough to read as motion. */
.photo{position:absolute;inset:-8% -10%;background-position:center 45%;
  background-size:cover;background-repeat:no-repeat;
  transform:scale(.965);transform-origin:50% 50%;
  filter:saturate(.74) brightness(1.1)}
.photo.dark{filter:saturate(.9) brightness(.4) contrast(1.05)}

@media (prefers-reduced-motion: no-preference){
  .photo.moves,.photo.fades{will-change:transform;backface-visibility:hidden;
    animation:drift-a 46s cubic-bezier(.36,0,.64,1) infinite alternate}
  /* rev runs the opposite way, so a pair layered together never reads as a loop */
  .photo.moves.rev{animation-name:drift-b}
  /* up leads with vertical travel, for tall frames where a side pan reads oddly */
  .photo.moves.up{animation-name:drift-v}
  .photo.moves.slow{animation-duration:64s}
  .photo.fades{will-change:transform,opacity;
    animation:drift-b 46s cubic-bezier(.36,0,.64,1) infinite alternate,
              xfade 38s ease-in-out infinite}

  @keyframes drift-a{
    from{transform:scale(.93) translate3d(-3.4%,1.1%,0)}
    to{transform:scale(1) translate3d(3.4%,-1.1%,0)}
  }
  @keyframes drift-b{
    from{transform:scale(1) translate3d(3.2%,-1%,0)}
    to{transform:scale(.93) translate3d(-3.2%,1%,0)}
  }
  @keyframes drift-v{
    from{transform:scale(.94) translate3d(1.4%,2.6%,0)}
    to{transform:scale(1) translate3d(-1.4%,-2.6%,0)}
  }
  @keyframes xfade{0%,34%{opacity:0}50%,84%{opacity:1}100%{opacity:0}}
}
@media (prefers-reduced-motion: reduce){.photo{transform:scale(.965);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}
}