/* ============================================================
   Mary Ann Morris - shared site styles
   Used by: index.html, method.html, about.html, work-with-me.html
   ============================================================ */

:root{
  --clay:#F2EFEC;
  --clay-deep:#E2DCD8;
  --paper:#FAF8F6;
  --white:#FFFFFF;
  --earth:#2E2F36;
  --stone:#6D6A6E;
  --line:#D8D0CC;
  --ember:#844D36;
  --slate:#474853;
  --sky:#86B3D1;
  --ash:#AAA0A0;
  --olive:#8E8268;
  --display:'Newsreader',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--clay);
  color:var(--earth);
  font-family:var(--body);
  font-size:17px;
  line-height:1.75;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.narrow{max-width:680px;margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.14;letter-spacing:-0.015em}
h1{font-size:clamp(2.7rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem)}
em{font-style:italic}
.eyebrow{
  font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--stone);font-weight:400;
}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:22px 0;
  transition:background .5s ease,padding .5s ease,box-shadow .5s ease;
}
nav.solid{background:rgba(250,248,246,.93);backdrop-filter:blur(14px);padding:14px 0;box-shadow:0 1px 0 rgba(201,187,168,.6)}
/* interior pages have no full-bleed hero, so nav needs a surface from the start */
nav.always-solid{background:rgba(250,248,246,.93);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(201,187,168,.6)}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.18rem;letter-spacing:.02em;text-decoration:none}
.brand img{width:42px;height:42px;object-fit:contain;transition:width .5s,height .5s}
nav.solid .brand img{width:34px;height:34px}
.brand-txt{display:block;line-height:1.15;white-space:nowrap}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:.83rem;text-decoration:none;color:var(--stone);transition:color .3s}
.nav-links a:hover{color:var(--earth)}
.nav-links a.here{color:var(--earth)}
.nav-cta{
  border:1px solid var(--line);border-radius:100px;white-space:nowrap;
  padding:9px 20px;font-size:.83rem;color:var(--earth)!important;
  transition:background .4s,border-color .4s;
}
.nav-cta:hover{background:var(--ember);color:#FFFFFF!important;border-color:var(--ember)}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none}}
@media(max-width:480px){.brand{font-size:1rem;gap:9px}.brand img{width:34px;height:34px}.nav-cta{padding:8px 15px;font-size:.78rem}.wrap{padding:0 20px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--ember);color:#FFFFFF;
  padding:15px 30px;border-radius:100px;font-size:.9rem;
  text-decoration:none;transition:transform .4s cubic-bezier(.19,1,.22,1),background .4s;
}
.btn:hover{background:var(--slate);transform:translateY(-2px)}
.btn-ghost{background:none;color:var(--earth);border:1px solid var(--ash)}
.btn-ghost:hover{background:var(--clay-deep);color:var(--earth)}
.arw{transition:transform .4s}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- portraits ---------- */
.portrait{position:relative;aspect-ratio:4/5;border-radius:220px 220px 14px 14px;overflow:hidden;background:var(--clay-deep)}
.portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 40%,rgba(46,47,54,.20))}
.portrait::before{content:'';position:absolute;inset:-1px;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(71,72,83,.18);z-index:2;pointer-events:none}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:52% 32%;display:block;transform:scale(1.02);transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.portrait:hover img{transform:scale(1.05)}
/* soft rectangular frame, for secondary imagery */
.frame{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--clay-deep)}
.frame.wide{aspect-ratio:3/2}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame::before{content:'';position:absolute;inset:-1px;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(71,72,83,.14);z-index:2;pointer-events:none}
.cap{margin-top:16px;text-align:center;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:130px 0}
.pad-sm{padding:90px 0}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- interior page header ---------- */
.page-head{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:190px 0 96px;position:relative;overflow:hidden;
}
.page-head::before{
  content:'';position:absolute;top:-24%;right:-10%;
  width:58vw;height:58vw;max-width:760px;max-height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(170,160,160,.26) 0%,rgba(170,160,160,.08) 48%,transparent 72%);
  pointer-events:none;
}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{margin-top:20px;max-width:17ch}
.page-head .lede{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.42;
  color:var(--stone);margin-top:28px;max-width:46ch;
}
@media(max-width:640px){.page-head{padding:150px 0 72px}}

/* ---------- prose ---------- */
.prose p{margin-top:24px;color:var(--stone)}
.prose p.first{font-size:1.22rem;color:var(--earth);font-family:var(--display);line-height:1.55;margin-top:0}
.prose h3{margin-top:60px;color:var(--earth)}
.prose h3 + p{margin-top:18px}
.prose .pull{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.42;
  color:var(--earth);margin:52px 0;padding-left:26px;
  border-left:2px solid var(--ember);
}
.prose ul{margin-top:22px;padding-left:0;list-style:none}
.prose ul li{color:var(--stone);padding-left:24px;position:relative;margin-top:11px}
.prose ul li::before{content:'';position:absolute;left:2px;top:.72em;width:6px;height:1px;background:var(--ash)}
.sig{margin-top:34px;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--olive)}

/* short stacked lines, used a lot in Mary Ann's voice */
.stack{margin-top:26px}
.stack span{display:block;color:var(--stone);line-height:1.85}

/* ---------- testimonial cards ---------- */
.testi-head{text-align:center;margin-bottom:64px}
.testi-head h2{margin-top:16px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi-grid.two{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto}
@media(max-width:900px){.testi-grid,.testi-grid.two{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.testi{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:34px 30px 30px;display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s;
}
.testi:hover{transform:translateY(-3px);box-shadow:0 10px 34px rgba(46,47,54,.07)}
.testi .mark{
  font-family:var(--display);font-size:2.6rem;line-height:.6;
  color:var(--ember);opacity:.35;margin-bottom:14px;display:block;
}
.testi blockquote{
  font-size:.95rem;line-height:1.72;color:var(--earth);
  font-weight:300;flex:1;
}
.testi .who{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
}
.testi .who .nm{font-size:.86rem;color:var(--earth);line-height:1.4;display:block}
.testi .who .nm em{display:block;font-style:normal;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);margin-top:3px}
/* on clay backgrounds the white card needs no border shift, but on white sections it does */
.on-white .testi{background:var(--paper)}

/* ---------- pull quote band ---------- */
.quote{background:var(--slate);color:var(--clay);text-align:center}
.quote blockquote{font-family:var(--display);font-size:clamp(1.5rem,3.1vw,2.3rem);line-height:1.42;max-width:24ch;margin:0 auto;font-weight:300}
.quote cite{display:block;margin-top:30px;color:#C6BDBD;font-style:normal;font-size:.78rem;letter-spacing:.19em;text-transform:uppercase}

/* ---------- CTA band ---------- */
.cta-band{background:var(--clay);border-top:1px solid var(--line);text-align:center}
.cta-band h2{margin-top:16px}
.cta-band p{color:var(--stone);max-width:48ch;margin:22px auto 0}
.cta-band .btn{margin-top:38px}
.cta-note{font-size:.8rem;color:var(--stone);margin-top:18px}

/* ---------- offer cards ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
@media(max-width:820px){.offer-grid{grid-template-columns:1fr}}
.card{background:var(--white);padding:44px 34px;transition:background .5s;display:flex;flex-direction:column}
.card:hover{background:var(--clay)}
.card .eyebrow{display:block;margin-bottom:16px}
.card h3{font-size:1.34rem;margin-bottom:14px}
.card p{font-size:.94rem;color:var(--stone);flex:1}
.card .card-cta{margin-top:26px;min-height:48px;display:flex;align-items:center}
.card .btn{padding:13px 26px;font-size:.85rem}
.card a.txt-link{display:inline-block;font-size:.86rem;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .4s}
.card a.txt-link:hover{border-color:var(--ember)}

/* ---------- footer ---------- */
footer{background:var(--clay);padding:80px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:34px}}
footer h4{font-family:var(--display);font-size:1.3rem;font-weight:300;margin-bottom:12px}
footer p,footer a{font-size:.88rem;color:var(--stone);text-decoration:none}
footer a{display:block;margin-bottom:9px;transition:color .3s}
footer a:hover{color:var(--earth)}
.foot-bot{margin-top:60px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:.76rem;color:var(--stone);flex-wrap:wrap;gap:12px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .fade{opacity:1}
}

/* ---------- offer grid: 4 across ---------- */
.offer-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.offer-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.offer-grid.four{grid-template-columns:1fr}}
.offer-grid.four .card{padding:38px 28px}
.offer-grid.four .card h3{font-size:1.2rem}
.card.feature{background:var(--paper)}
.card.feature .eyebrow{color:var(--ember)}
.price{
  display:block;margin-top:14px;font-family:var(--display);
  font-size:1.5rem;line-height:1;color:var(--ember);font-weight:300;
}
.price em{display:block;font-family:var(--body);font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-top:8px}

/* ---------- inline testimonial band ---------- */
.testi-solo{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.testi-solo blockquote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.62;
  color:var(--earth);max-width:62ch;margin:0 auto;text-align:center;
}
.testi-solo .who{
  display:block;margin-top:26px;text-align:center;
  font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;color:var(--stone);
}
.testi-solo .mark{
  display:block;text-align:center;font-family:var(--display);
  font-size:2.6rem;line-height:.6;color:var(--ember);opacity:.35;margin-bottom:26px;
}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.on{display:block}
.modal-veil{
  position:absolute;inset:0;background:rgba(46,47,54,.52);
  backdrop-filter:blur(3px);opacity:0;animation:mv .4s ease forwards;
}
@keyframes mv{to{opacity:1}}
.modal-card{
  position:relative;z-index:1;background:var(--clay);
  width:min(640px,calc(100% - 32px));max-height:calc(100svh - 48px);
  margin:24px auto;border-radius:10px;overflow-y:auto;
  box-shadow:0 24px 80px rgba(46,47,54,.24);
  opacity:0;transform:translateY(18px) scale(.985);
  animation:mc .55s cubic-bezier(.19,1,.22,1) .06s forwards;
}
@keyframes mc{to{opacity:1;transform:none}}
.modal-x{
  position:absolute;top:14px;right:16px;font-size:1.7rem;line-height:1;
  color:var(--stone);padding:6px 10px;border-radius:50%;transition:color .3s,background .3s;z-index:2;
}
.modal-x:hover{color:var(--earth);background:var(--clay-deep)}
.modal-body{padding:46px 44px 40px}
@media(max-width:560px){.modal-body{padding:38px 22px 30px}}
.modal-card h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-top:14px}
.modal-lede{color:var(--stone);font-size:.95rem;line-height:1.65;margin-top:16px;max-width:52ch}
.modal-card form{margin-top:34px}
.fld{margin-bottom:26px}
.fld label,.fld .fld-lab{
  display:block;font-size:.9rem;color:var(--earth);
  line-height:1.55;margin-bottom:10px;font-weight:400;
}
.fld-opt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.fld input,.fld textarea{
  width:100%;font-family:inherit;font-size:.96rem;color:var(--earth);
  background:var(--white);border:1px solid var(--line);border-radius:5px;
  padding:13px 16px;line-height:1.6;transition:border-color .3s,box-shadow .3s;
}
.fld textarea{resize:vertical;min-height:92px}
.fld input:focus,.fld textarea:focus{
  outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(132,77,54,.09);
}
.fld.bad input,.fld.bad textarea{border-color:#A6584A}
.fld.bad .choices{border-color:#A6584A}
.fld-err{font-size:.8rem;color:#A6584A;margin-top:7px;min-height:0}
.choices{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.choice{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  background:var(--white);padding:13px 16px;font-size:.92rem;line-height:1.5;
  color:var(--earth);transition:background .3s;margin:0;
}
.choice:hover{background:var(--paper)}
.choice input{width:auto;margin:0;flex:0 0 auto;accent-color:var(--ember);margin-top:3px}
.choice:has(input:checked){background:#FAF5F2}
.modal-submit{width:100%;justify-content:center;margin-top:6px}
.modal-note{font-size:.78rem;color:var(--stone);text-align:center;margin-top:16px}
.modal-thanks{display:none;padding:76px 44px;text-align:center}
.modal.done .modal-body{display:none}
.modal.done .modal-thanks{display:block;animation:qin .6s ease}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.thanks-mark{display:block;font-size:1.9rem;color:var(--ember);opacity:.6;margin-bottom:20px}
.modal-thanks h2{margin-bottom:16px}
.modal-thanks p{color:var(--stone);max-width:40ch;margin:0 auto 32px}