/* Hand in Hand Consulting design tokens, taken from the live callback-questions page. */
:root{
  --cream:#F6F0E5; --cream-2:#FFFDF8; --ink:#1D2621; --green:#123D31; --green-2:#0C2E25;
  --gold:#B07D2B; --gold-soft:#D9B26A; --sand:#EFE6D3; --line:#DED4C0; --muted:#5C6660; --error:#9B2C1F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 16px/1.6 "DM Sans", system-ui, -apple-system, sans-serif;
  overflow-wrap:anywhere;
}
img{max-width:100%}
a{color:var(--green); text-decoration-color:var(--gold); text-underline-offset:2px}
.wrap{max-width:720px; margin:0 auto; padding:0 20px}
header.top{padding:28px 0 0}
.brand,.eyebrow{
  font:600 11px/1 "DM Sans",sans-serif; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
h1{
  font:600 clamp(28px,6.2vw,40px)/1.18 Fraunces, Georgia, serif;
  color:var(--green); margin:14px 0 0; letter-spacing:-.01em;
}
.lede{font-size:17px; color:var(--muted); margin:16px 0 0; max-width:58ch}
.rule{height:1px;background:var(--line);border:0;margin:32px 0 0}
h2{font:600 clamp(21px,4.4vw,26px)/1.25 Fraunces, Georgia, serif; color:var(--green); margin:0}
h3{font:600 17px/1.35 "DM Sans",sans-serif; color:var(--green); margin:0}
section{margin:40px 0 0}
.sec-intro{font-size:16px; color:var(--muted); margin:8px 0 0; max-width:58ch}

/* Hero with portrait. Photo comes from the copy tab key hero_image_url. */
.hero{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "photo" "title" "lede" "cta"}
.hero .brand{grid-area:brand}
.hero h1{grid-area:title}
.hero .lede{grid-area:lede}
.hero .btn{grid-area:cta; justify-self:start}
.portrait{grid-area:photo; margin:16px 0 0; position:relative; isolation:isolate}
.portrait img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; max-height:320px;
  object-fit:cover; object-position:50% 18%; border-radius:6px; background:var(--sand);
  box-shadow:0 1px 2px rgba(18,61,49,.08), 0 10px 28px rgba(18,61,49,.10);
}
.portrait figcaption{
  position:absolute; left:10px; bottom:10px; padding:5px 10px; border-radius:4px;
  background:rgba(255,253,248,.94); color:var(--green); font:600 12px/1.2 "DM Sans",sans-serif; letter-spacing:.02em;
}
.hero.no-photo .portrait{display:none}
@media (min-width:700px){
  .hero{
    grid-template-columns:minmax(0,1fr) 230px; column-gap:40px;
    grid-template-rows:auto auto auto 1fr;
    grid-template-areas:"brand photo" "title photo" "lede photo" "cta photo";
  }
  .hero.no-photo{grid-template-columns:minmax(0,1fr); grid-template-areas:"brand" "title" "lede" "cta"}
  .portrait{margin:4px 10px 10px 0; align-self:start}
  .portrait::after{
    content:""; position:absolute; inset:10px -10px -10px 10px; z-index:-1;
    border:1px solid var(--gold-soft); border-radius:6px;
  }
  .portrait img{aspect-ratio:4/5; max-height:none; object-position:50% 20%}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  min-height:50px; padding:12px 26px; border:0; border-radius:6px; cursor:pointer; text-decoration:none;
  background:var(--green); color:var(--cream-2);
  font:600 16px/1.2 "DM Sans",sans-serif; letter-spacing:.01em;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:var(--green-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6; cursor:default}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
header .btn{margin:24px 0 0}
.btn-outline{background:transparent; color:var(--green); box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-outline:hover{background:#F1EADB}

.steps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.steps li{
  background:var(--cream-2); border:1px solid var(--line); border-radius:6px; padding:18px 18px 16px;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start;
}
.steps .num{
  width:30px; height:30px; border-radius:50%; background:var(--green); color:var(--cream-2);
  display:grid; place-items:center; font:600 14px/1 "DM Sans",sans-serif; grid-row:span 2;
}
.steps p{margin:4px 0 0; color:var(--muted); font-size:15px}

/* How to write: the KING framework */
.king{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.king li{
  background:var(--cream-2); border:1px solid var(--line); border-radius:6px; padding:16px 18px;
  display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; align-items:start;
}
.king .letter{
  width:40px; height:40px; border-radius:50%; background:var(--green); color:var(--gold-soft);
  display:grid; place-items:center; font:600 20px/1 Fraunces, Georgia, serif;
}
.king h3{margin-top:1px}
.king p{margin:4px 0 0; color:var(--muted); font-size:15px}
.fence{margin:12px 0 0; padding:18px 20px; background:var(--sand); border-radius:6px; text-align:center}
.fence p{margin:4px 0 0; color:var(--muted); font-size:15px}
.fence .fence-title{margin:0; font:600 19px/1.3 Fraunces, Georgia, serif; color:var(--green)}

.sample{
  margin:18px 0 0; background:var(--cream-2); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:16px; padding:18px 16px;
  box-shadow:0 1px 2px rgba(18,61,49,.06), 0 8px 24px rgba(18,61,49,.05);
}
.sample-img{display:block; align-self:start}
.sample-img img{display:block; width:100%; height:auto; aspect-ratio:5/8; object-fit:cover; border-radius:3px; box-shadow:0 4px 14px rgba(29,38,33,.18)}
.sample-body p{margin:6px 0 0; color:var(--muted); font-size:15px}
.sample-body .btn{margin:14px 0 0}
@media (max-width:559px){
  .sample-body{display:contents}
  .sample-img{grid-column:1; grid-row:1 / span 2}
  .sample-body h3,.sample-body p{grid-column:2}
  .sample-body .btn{grid-column:1 / -1; width:100%; padding:12px 14px}
}
@media (min-width:560px){
  .sample{grid-template-columns:minmax(0,1fr); padding:0}
  .sample-img{background:#1B1B1B}
  .sample-img img{aspect-ratio:auto; border-radius:0; box-shadow:none}
  .sample-body{padding:18px 20px 20px}
}

.send{margin:12px 0 0; padding:14px 16px; border-left:3px solid var(--gold); background:#FBF7EF; border-radius:0 6px 6px 0}
.send p{margin:4px 0 0; color:var(--muted); font-size:15px}
.send a,.sec-intro a,.success a,.msg a{font-weight:600}

.card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:6px; margin:18px 0 0; padding:22px 20px;
  box-shadow:0 1px 2px rgba(18,61,49,.06), 0 8px 24px rgba(18,61,49,.05);
}
.grid2{display:grid; gap:14px}
@media (min-width:560px){ .grid2{grid-template-columns:1fr 1fr} }
.field{display:block; margin:0}
.field + .field, .grid2 + .field, .field + .grid2, .picker + .field, .field + .picker{margin-top:16px}
.grid2 > .field + .field{margin-top:0}
.lbl{display:block; font:600 14px/1.3 "DM Sans",sans-serif; color:var(--green); margin:0 0 6px}
.opt{font-weight:400; color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=search],textarea{
  width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--line); border-radius:6px;
  background:#fff; color:var(--ink); font:400 16px/1.4 "DM Sans",sans-serif; appearance:none;
}
textarea{min-height:104px; resize:vertical}
input::placeholder,textarea::placeholder{color:#8A918C}

.picker{margin-top:16px}
.verse-list{
  margin:10px 0 0; border:1px solid var(--line); border-radius:6px; background:#fff;
  max-height:440px; overflow-y:auto; overscroll-behavior:contain;
}
.cat{border-bottom:1px solid var(--line)}
.cat:last-child{border-bottom:0}
.cat summary{
  list-style:none; cursor:pointer; padding:14px 44px 14px 14px; position:relative;
  font:600 15px/1.3 "DM Sans",sans-serif; color:var(--green); min-height:48px;
}
.cat summary::-webkit-details-marker{display:none}
.cat summary::after{
  content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); transition:transform .15s ease;
}
.cat[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.cat .count{display:block; font-weight:400; font-size:13px; color:var(--muted); margin-top:2px}
.verse{
  display:grid; grid-template-columns:22px 1fr; column-gap:10px; padding:12px 14px; cursor:pointer;
  border-top:1px solid #EFE8DA;
}
.verse:hover{background:#FBF7EF}
.verse input{width:18px; height:18px; margin:3px 0 0; accent-color:var(--green)}
.verse .ref{font-weight:600; color:var(--ink)}
.verse .vt{grid-column:2; font-size:14px; color:var(--muted); line-height:1.5}
.verse:has(input:checked){background:#F1EADB}
.list-note{padding:16px 14px; color:var(--muted); font-size:15px; margin:0}

.chosen{margin:12px 0 0; padding:14px 16px; border-left:3px solid var(--gold); background:#FBF7EF; border-radius:0 6px 6px 0}
.chosen strong{display:block; color:var(--green); font-size:16px; margin-top:6px}
.chosen p{margin:4px 0 0; font-size:15px; color:var(--muted)}

.check{display:grid; grid-template-columns:24px 1fr; column-gap:10px; align-items:start; margin-top:18px; cursor:pointer}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--green)}
.submit-row{margin-top:20px}
.submit-row .btn{width:100%}
@media (min-width:560px){ .submit-row .btn{width:auto} }
.msg{margin:14px 0 0; padding:12px 14px; border-radius:6px; background:#F8E9E4; color:var(--error); font-size:15px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.success h2{margin-top:6px}
.success p{margin:10px 0 0; color:var(--muted)}

footer{
  margin:52px 0 0; padding:22px 0 44px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
footer p{margin:0}
footer .tag{color:var(--green); font-weight:600}
@media (min-width:700px){
  .steps{grid-template-columns:repeat(3,1fr)} .steps li{grid-template-columns:1fr} .steps .num{grid-row:auto; margin-bottom:10px}
  .king{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){ .wrap{padding:0 16px} .card{padding:18px 14px} .king li{padding:14px} }