@charset "UTF-8";
/* ==========================================================================
   Ember & Oak Therapy — forms & content pages
   Palette and type are lifted from index.html so the forms are indivisible
   from the site. Card layout echoes the printed welcome pack.
   ========================================================================== */

@font-face{ font-family:'BitterBold'; src:url('fonts/bitter-bold.ttf') format('truetype'); font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/poppins-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/poppins-500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/poppins-600.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Poppins'; src:url('fonts/poppins-700.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --cream:#F0EADE;
  --brown:#473C38;
  --green:#9AC026;
  --gray:#737373;
  --line:#E4DCCB;
  --white:#fff;
  --err:#C94F3D;
  --err-bg:#FBEEEB;
  --radius:16px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--brown); background:var(--cream);
  font-size:15px; line-height:1.75; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--green); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brown); color:var(--cream); padding:12px 20px; border-radius:0 0 8px 0;
  font-size:13px; font-weight:600;
}
.skip:focus{ left:0; color:var(--cream); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- nav ---------------------------------------------------------- */
.site-nav{
  background:rgba(240,234,222,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(71,60,56,.08); position:sticky; top:0; z-index:50;
}
.nav-inner{
  max-width:1000px; margin:0 auto; padding:16px clamp(20px,5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand img{ height:34px; width:auto; }
.nav-links{ display:flex; gap:clamp(16px,3vw,30px); }
.nav-links a{ font-size:13.5px; font-weight:500; }

/* ---------- page shell --------------------------------------------------- */
.wrap{ max-width:1000px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }

.page-head{ padding:clamp(40px,7vw,72px) 0 clamp(24px,4vw,36px); }
.page-head .eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  color:var(--green); margin-bottom:14px;
}
.page-head h1{
  font-family:'BitterBold',Georgia,serif; font-weight:400;
  font-size:clamp(30px,5vw,46px); line-height:1.2; margin-bottom:18px;
}
.page-head .lede{ font-size:16px; line-height:1.85; max-width:60ch; opacity:.88; }
.page-head .rule{ height:2px; background:var(--green); width:100%; margin-top:32px; opacity:.9; }

/* ---------- cards -------------------------------------------------------- */
.card{
  background:var(--white); border-radius:var(--radius);
  padding:clamp(24px,4vw,38px); margin-bottom:20px;
}
.card-head{
  font-family:'BitterBold',Georgia,serif; font-weight:400;
  font-size:clamp(19px,2.4vw,23px); line-height:1.3;
  display:flex; align-items:baseline; gap:11px; margin-bottom:6px;
}
.dot{
  width:9px; height:9px; border-radius:50%; background:var(--green);
  flex:0 0 9px; transform:translateY(-2px);
}
.card-note{ font-size:14px; color:var(--gray); line-height:1.8; margin:8px 0 4px; max-width:70ch; }
.card-note p + p{ margin-top:12px; }
.sub-head{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
  letter-spacing:.2px; margin:14px 0 -6px;
}

/* ---------- form grid ---------------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:22px 20px; margin-top:22px; }
.col-full{ grid-column:span 12; }
.col-half{ grid-column:span 6; }
.col-third{ grid-column:span 4; }
@media (max-width:680px){
  .col-half,.col-third{ grid-column:span 12; }
  .grid{ gap:20px 14px; }
}

/* ---------- fields ------------------------------------------------------- */
.fld{ border:0; min-width:0; }
.fld-label{
  display:block; font-size:13px; font-weight:600; letter-spacing:.2px;
  margin-bottom:8px; line-height:1.6;
}
.req{ color:var(--green); font-weight:700; }
.fld-help{ font-size:12.5px; color:var(--gray); line-height:1.7; margin:-2px 0 10px; }

.ctl{
  width:100%; display:block; font:inherit; font-size:14.5px; color:var(--brown);
  background:var(--cream); border:1.5px solid transparent; border-radius:8px;
  padding:0 14px; height:48px; outline:none;
  transition:border-color .18s ease, background .18s ease;
}
.ctl:hover{ border-color:rgba(154,192,38,.55); }
.ctl:focus{ border-color:var(--green); background:#F6F2E9; }
.ctl::placeholder{ color:#A69B90; }
.ctl-area{ height:auto; padding:13px 14px; resize:vertical; line-height:1.7; min-height:96px; }
.ctl-select{
  appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23473C38' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px;
}
.ctl-sign{ font-family:'BitterBold',Georgia,serif; font-size:19px; letter-spacing:.4px; }

/* ---------- option groups ------------------------------------------------ */
.opts{ display:grid; gap:9px; }
.opts-stack{ grid-template-columns:1fr; }
.opts-inline{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.opts-grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
@media (max-width:520px){ .opts-grid,.opts-inline{ grid-template-columns:1fr; } }

.opt{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  background:var(--cream); border:1.5px solid transparent; border-radius:10px;
  padding:11px 14px; font-size:14px; line-height:1.55;
  transition:border-color .18s ease, background .18s ease;
}
.opt:hover{ border-color:rgba(154,192,38,.55); }
.opt input{
  appearance:none; -webkit-appearance:none; flex:0 0 18px;
  width:18px; height:18px; margin-top:2px; cursor:pointer;
  border:1.7px solid #B9AE9F; background:var(--white); border-radius:5px;
  transition:border-color .15s ease, background .15s ease;
}
.opt input[type=radio]{ border-radius:50%; }
.opt input:checked{ border-color:var(--green); background:var(--green); }
.opt input:checked + span{ font-weight:500; }
.opt input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l3 3 5-6' fill='none' stroke='%23473C38' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
.opt input[type=radio]:checked{ box-shadow:inset 0 0 0 3.5px var(--white); }
.opt:has(input:checked){ border-color:var(--green); background:#F7F9EE; }
.opt-other{ margin-top:10px; }

/* ---------- acknowledgement ticks ---------------------------------------- */
.fld-ack{ margin:-6px 0; }
.ack{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:14px; line-height:1.7; }
.ack input{
  appearance:none; -webkit-appearance:none; flex:0 0 19px;
  width:19px; height:19px; margin-top:3px; cursor:pointer;
  border:1.7px solid #B9AE9F; background:var(--white); border-radius:5px;
  transition:border-color .15s ease, background .15s ease;
}
.ack input:checked{
  border-color:var(--green); background:var(--green);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l3 3 5-6' fill='none' stroke='%23473C38' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px; background-position:center; background-repeat:no-repeat;
}

/* ---------- errors ------------------------------------------------------- */
.fld-err{ font-size:12.5px; color:var(--err); font-weight:500; margin-top:7px; line-height:1.6; }
.has-error .ctl{ border-color:var(--err); background:var(--err-bg); }
.has-error .opts .opt{ border-color:rgba(201,79,61,.4); }
.has-error .fld-label,.has-error legend{ color:var(--err); }

.alert{
  border-radius:12px; padding:18px 22px; margin-bottom:22px;
  font-size:14px; line-height:1.75; border-left:4px solid var(--err);
  background:var(--err-bg); color:#8E3626;
}
.alert h2{ font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:600; margin-bottom:4px; }
.alert a{ color:inherit; text-decoration:underline; }

/* ---------- prose -------------------------------------------------------- */
.prose{ font-size:14.5px; line-height:1.85; }
.prose h3{
  font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:600;
  margin:22px 0 8px; letter-spacing:.2px;
}
.prose h3:first-child{ margin-top:0; }
.prose p{ margin-bottom:12px; max-width:74ch; }
.prose p:last-child{ margin-bottom:0; }
.prose ul{ list-style:none; margin:0 0 14px; }
.prose li{ position:relative; padding-left:20px; margin-bottom:7px; max-width:72ch; }
.prose li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}
.prose strong{ font-weight:600; }
.prose a{ color:var(--brown); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--green); }
.prose .tight{ font-size:13px; color:var(--gray); }

/* ---------- fee table ---------------------------------------------------- */
.fees{ width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:14px; }
.fees caption{ text-align:left; font-size:12.5px; color:var(--gray); padding-bottom:10px; }
.fees th,.fees td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.fees thead th{
  font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gray); font-weight:600; border-bottom:2px solid var(--green);
}
.fees tbody tr:last-child td{ border-bottom:none; }
.fees .amt{ font-weight:600; white-space:nowrap; }
.fees .note{ color:var(--gray); font-size:13px; }
@media (max-width:560px){
  .fees thead{ position:absolute; left:-9999px; }
  .fees tr{ display:block; border-bottom:1px solid var(--line); padding:12px 0; }
  .fees tr:last-child{ border-bottom:none; }
  .fees td{ display:block; border:0; padding:2px 0; }
  .fees .amt{ color:var(--brown); font-size:16px; }
}

/* ---------- submit bar --------------------------------------------------- */
.submit-card{ background:var(--white); border-radius:var(--radius); padding:clamp(24px,4vw,34px); margin-bottom:20px; }
.submit-card .privacy-line{ font-size:12.5px; color:var(--gray); line-height:1.8; margin-bottom:20px; max-width:70ch; }
.btn{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.3px;
  padding:15px 34px; border-radius:30px; border:none; cursor:pointer;
  display:inline-block; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{ background:var(--green); color:var(--brown); }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(154,192,38,.35); color:var(--brown); }
.btn.outline{ background:transparent; border:1.5px solid var(--brown); color:var(--brown); }
.btn.outline:hover{ background:var(--brown); color:var(--cream); }
.btn[disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- forms hub ---------------------------------------------------- */
.hub{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:20px; }
.hub-card{
  background:var(--white); border-radius:var(--radius); padding:30px 28px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.hub-card:hover{ transform:translateY(-5px); box-shadow:0 16px 32px rgba(71,60,56,.10); color:inherit; }
.hub-card .tag{
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  font-weight:600; color:var(--green);
}
.hub-card h2{ font-family:'BitterBold',Georgia,serif; font-weight:400; font-size:20px; line-height:1.3; }
.hub-card p{ font-size:13.5px; color:var(--gray); line-height:1.75; flex:1; }
.hub-card .go{ font-size:13px; font-weight:600; color:var(--brown); }
.hub-card .go::after{ content:" →"; color:var(--green); }
.hub-card .pdf{ font-size:12.5px; color:var(--gray); }
.hub-card .pdf a{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- confirmation ------------------------------------------------- */
.done{ text-align:center; padding:clamp(40px,7vw,70px) clamp(24px,4vw,50px); }
.done .mark{
  width:64px; height:64px; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center; margin:0 auto 26px;
}
.done .mark svg{ width:30px; height:30px; }
.done h1{ font-family:'BitterBold',Georgia,serif; font-weight:400; font-size:clamp(26px,4vw,36px); margin-bottom:16px; }
.done p{ font-size:15px; line-height:1.85; max-width:52ch; margin:0 auto 14px; opacity:.9; }

/* ---------- footer ------------------------------------------------------- */
.site-foot{ border-top:1px solid var(--line); margin-top:clamp(40px,6vw,70px); padding:clamp(36px,5vw,56px) 0 30px; }
.foot-inner{
  max-width:1000px; margin:0 auto; padding:0 clamp(20px,5vw,40px);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px 30px;
}
@media (max-width:720px){ .foot-inner{ grid-template-columns:1fr; gap:28px; } }
.foot-brand img{ height:30px; width:auto; margin-bottom:14px; }
.foot-person{ font-size:13px; font-weight:600; line-height:1.7; }
.foot-person span{ font-weight:400; color:var(--gray); }
.foot-col h2{
  font-family:'Poppins',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--green); margin-bottom:14px;
}
.foot-col ul{ list-style:none; }
.foot-col li{ font-size:13px; color:var(--gray); margin-bottom:9px; line-height:1.6; }
.foot-col a{ color:var(--gray); }
.foot-col a:hover{ color:var(--green); }

.foot-crisis{
  max-width:1000px; margin:34px auto 0; padding:18px clamp(20px,5vw,40px);
  font-size:12.5px; line-height:1.85; color:var(--gray);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.foot-crisis strong{ color:var(--brown); display:block; font-weight:600; }
.foot-crisis a{ color:var(--brown); text-decoration:underline; text-underline-offset:2px; }

.foot-legal{
  max-width:1000px; margin:0 auto; padding:20px clamp(20px,5vw,40px) 0;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:11.5px; color:var(--gray);
}

/* ---------- conditional blocks -------------------------------------------
   Only hidden when JS is running. Without JS every field stays visible and
   the server sorts out which answers are relevant. -------------------------- */
.js [data-showif]{ display:none; }
.js [data-showif].is-shown{ display:block; }

/* ---------- motion & print ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

@media print{
  .site-nav,.skip,.submit-card,.foot-crisis,.hub-card .go{ display:none !important; }
  body{ background:#fff; font-size:11.5pt; }
  .card{ break-inside:avoid; border:1px solid #ddd; margin-bottom:12px; }
  a{ color:#000; }
  .page-head{ padding-top:0; }
}

/* Line the inputs up across a row. Where one field in a row carries help text
   and its neighbour does not, the help pushes that input down. Fields in a grid
   row are already equal height, so making each a flex column and pushing the
   control to the bottom brings every input in the row back onto the same line.
   Single column below 680px, where there is nothing to line up. */
@media (min-width:681px){
  .grid > .fld{ display:flex; flex-direction:column; }
  .grid > .fld > .ctl,
  .grid > .fld > .opts{ margin-top:auto; }
}