/* Guides, work-with-us and gift-certificate pages. Loaded after /service.css. */

/* Guide pages borrow a service page's colors (body.svc-*) but aren't "in" Services. */
.guide .nav-drop > a{box-shadow:none;}
.guide .hero-grid{grid-template-areas:"text card"; align-items:start;}
@media (max-width:900px){ .guide .hero-grid{grid-template-areas:"text" "card";} .guide .ladder-card{margin-top:8px;} }
.guide .hero p.lead{margin-bottom:24px;}
.meta{font-size:0.88rem; color:rgba(255,255,255,0.7); margin:0;}

/* "In this guide" jump list, in the hero card slot */
.toc{list-style:none; padding:0; margin:0; display:grid; gap:2px;}
.toc a{display:block; padding:7px 0; color:rgba(255,255,255,0.9); text-decoration:none; font-size:0.95rem; border-bottom:1px solid rgba(255,255,255,0.1);}
.toc li:last-child a{border-bottom:0;}
.toc a:hover{color:var(--sun);}

/* Article column */
.article{max-width:720px; margin:0 auto;}
.article > h2{font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:600; margin:56px 0 12px; scroll-margin-top:96px;}
.article > h2:first-child{margin-top:0;}
.article h3{font-size:1.15rem; font-weight:600; margin:30px 0 6px;}
.article p, .article li{font-size:1.04rem; line-height:1.7; color:#2b3c4c;}
.article p{margin:0 0 14px;}
.article ol.order{padding-left:1.4em; margin:0 0 14px;}
.article ol.order li{margin-bottom:6px; padding-left:4px;}
.article a{color:var(--teal-deep); font-weight:600; text-underline-offset:3px;}

/* The checklists: real checkboxes, so you can tick through on a phone */
.tick{list-style:none; padding:0; margin:8px 0 18px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.tick li{border-top:1px solid var(--line);}
.tick li:first-child{border-top:0;}
.tick label{display:flex; gap:14px; align-items:flex-start; padding:12px 18px; cursor:pointer; line-height:1.55;}
.tick input{accent-color:var(--accent, var(--teal-deep)); width:20px; height:20px; margin:3px 0 0; flex:none; cursor:pointer;}
.tick input:checked + span{text-decoration:line-through; text-decoration-color:var(--accent); color:#6b7a88;}
.tick label:hover{background:rgba(18,49,79,0.03);}

.note{background:var(--tint, #E6F0F2); border-left:4px solid var(--accent, var(--teal-deep)); border-radius:0 12px 12px 0; padding:16px 20px; margin:18px 0 22px;}
.note p{margin:0; font-size:0.98rem;}
.note strong{color:var(--navy);}

.sched{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:12px 0 18px;}
.sched > div{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 8px;}
.sched h3{margin:0 0 6px;}
.sched ul{padding-left:1.1em; margin:0;}
.sched li{font-size:0.96rem; margin-bottom:8px;}
@media (max-width:760px){ .sched{grid-template-columns:1fr;} }

.download{display:flex; gap:18px; align-items:center; flex-wrap:wrap; background:var(--navy); color:var(--white); border-radius:var(--radius); padding:20px 22px; margin:18px 0 22px;}
.download .i{width:36px; height:36px; padding:7px; border-radius:10px; background:var(--sun); color:var(--navy);}
.download p{flex:1 1 240px; margin:0; color:rgba(255,255,255,0.88); font-size:0.98rem;}
.download strong{color:var(--white);}
.download .btn{flex:none;}
.article .download a.btn{color:var(--navy-deep);}

/* Guides index */
.guide-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.guide-cards .service-card{display:flex; flex-direction:column;}
.guide-cards .service-card p{flex:1;}
@media (max-width:860px){ .guide-cards{grid-template-columns:1fr;} }

/* Bryce-to-decide placeholders: loud on purpose so none ship by accident */
.tbd{background:#FFF1D6; outline:2px dashed var(--sun-deep); outline-offset:1px; border-radius:4px; padding:0 4px; color:#6a4310; font-weight:600;}

/* Forms (work with us) */
.form-card{background:var(--white); border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:var(--shadow);}
.form-card h2{font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:600; margin-bottom:6px;}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-top:22px;}
.fgrid .full{grid-column:1 / -1;}
.field label, .field legend{display:block; font-weight:600; font-size:0.92rem; color:var(--navy); margin-bottom:6px; padding:0;}
.field fieldset{border:0; padding:0; margin:0; min-width:0;}
.field input[type=text], .field input[type=tel], .field input[type=email], .field select, .field textarea{width:100%; font:inherit; font-size:1rem; padding:11px 13px; border:1.5px solid rgba(18,49,79,0.25); border-radius:10px; background:var(--sand); color:var(--ink);}
.field textarea{min-height:92px; resize:vertical;}
.opts{display:flex; flex-wrap:wrap; gap:8px;}
.opts label{display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:0.94rem; color:var(--ink); padding:8px 13px; border:1.5px solid rgba(18,49,79,0.2); border-radius:999px; margin:0; cursor:pointer; background:var(--white);}
.opts label:has(input:checked){border-color:var(--teal-deep); background:rgba(12,108,122,0.08);}
.opts input{accent-color:var(--teal-deep); margin:0;}
.req{color:#B4361F;}
.form-msg{margin:16px 0 0; padding:12px 14px; border-radius:10px; font-weight:600;}
.form-msg.err{background:#FBE5E1; color:#8A2A18;}
.form-msg.ok{background:#E1EFE5; color:#1F5138;}
.form-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:22px;}
.form-actions small{color:#5b6b7a;}
@media (max-width:640px){ .fgrid{grid-template-columns:1fr;} .form-card{padding:24px 18px;} }

/* Amount choices (gift certificates) */
.amounts{display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 6px;}
.amounts span{font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; color:var(--navy); background:var(--white); border:1.5px solid var(--line); border-radius:12px; padding:12px 20px;}

/* Print: guides print as plain articles */
@media print{
  header.site, footer, .area, .wave, .hero-ctas, .ladder-card, .download, #services{display:none !important;}
  body{background:#fff;}
  .hero{background:none !important; color:#000; padding:0;}
  .hero h1, .hero p.lead, .meta, .crumbs ol, .crumbs a{color:#000 !important;}
  section{padding:12px 0;}
  .tick{border:0;} .tick label{padding:4px 0;} .tick li{break-inside:avoid;}
  .article > h2{margin-top:24px; break-after:avoid;}
}