/* Telos Counseling — site styles (static build). Tokens live in colors_and_type.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--harbor-deep)}a:hover{color:var(--pine)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
p{text-wrap:pretty}
.skip{position:absolute;left:-9999px;top:10px}.skip:focus{left:16px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.surface{background:var(--surface)}.sagewash{background:var(--sage-wash)}.pine{background:var(--pine)}
.eyebrow{font-family:var(--font-label);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0}
.dark .eyebrow{color:var(--on-pine-muted)}
.serif{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.1;color:var(--ink);margin:0;text-wrap:balance}
.serif em{font-style:italic}
.h2{font-size:clamp(30px,3.6vw,42px)}
.lead{font-size:20px;line-height:1.55;color:var(--ink-2)}
.body{font-size:18px;line-height:1.65;color:var(--ink-2);margin:0}
.ink{color:var(--ink);font-weight:600}
.ref{color:var(--harbor-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--sage-soft);font-weight:500}

/* Buttons */
.btns{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn{font-family:var(--font-sans);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:9px;line-height:1;white-space:nowrap;text-decoration:none;border:0;cursor:pointer;transition:all var(--dur) var(--ease);background:var(--harbor);color:#fff;padding:15px 28px;border-radius:var(--r-pill)}
.btn:hover{background:var(--harbor-deep);color:#fff}
.btn-light{background:var(--canvas);color:var(--pine)}.btn-light:hover{background:#fff;color:var(--pine)}
.btn-text{background:none;color:var(--ink);padding:6px 2px;border-radius:0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--sage-soft)}
.btn-text:hover{background:none;color:var(--pine)}
.dark .btn-text{color:var(--on-pine);text-decoration-color:rgba(244,239,230,.4)}.dark .btn-text:hover{color:#fff}
.btn-outline{background:none;border:1.5px solid var(--ink);color:var(--ink);padding:13px 26px;font-weight:500}.btn-outline:hover{background:var(--ink);color:var(--canvas)}

/* Header */
.announce{background:var(--pine-deep);color:var(--on-pine);font-size:13px;text-align:center;padding:9px 16px;letter-spacing:.01em}
.announce .m{color:var(--on-pine-muted)}.announce .d{margin:0 10px;color:var(--sage)}
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:all var(--dur) var(--ease)}
.site-header.scrolled{background:rgba(247,242,234,.88);-webkit-backdrop-filter:saturate(120%) blur(10px);backdrop-filter:saturate(120%) blur(10px);border-bottom-color:var(--hairline)}
.site-header.menu-open{background:var(--canvas)}
.hdr{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{font-size:15.5px;font-weight:500;color:var(--ink-2);padding:4px 0;border-bottom:2px solid transparent;text-decoration:none}
.navlinks a:hover{color:var(--pine)}
.navlinks a[aria-current]{font-weight:600;color:var(--pine);border-bottom-color:var(--sage)}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--pine);padding:4px}
.burger .i-x,.menu-open .burger .i-menu{display:none}.menu-open .burger .i-x{display:block}
.mobilemenu{display:none;flex-direction:column;background:var(--canvas);border-bottom:1px solid var(--hairline);padding:8px 28px 20px}
.mobilemenu .m{padding:12px 0;font-size:17px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--hairline);text-decoration:none}
.mobilemenu .m[aria-current]{color:var(--pine);font-weight:600}
.wordmark{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;line-height:1}
.wm-top{display:flex;align-items:flex-end}
.wm-tag{font-family:var(--font-label);font-weight:500;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;line-height:1}
.wm-name{font-family:var(--font-display);font-weight:400;letter-spacing:-.005em;white-space:nowrap;line-height:1}

/* Media & layout */
.photo{display:block;width:100%;height:auto;object-fit:cover;object-position:center 22%;border-radius:var(--r-lg);border:1px solid var(--card-border)}
.grid2{display:grid;gap:56px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.badge{position:absolute;left:-18px;bottom:26px;background:var(--surface);border:1px solid var(--card-border);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:14px 18px;display:flex;align-items:center;gap:13px}
.badge b{display:block;font-weight:600;font-size:14.5px;color:var(--ink)}.badge span{display:block;font-size:13px;color:var(--slate)}

/* Marquee */
@keyframes telos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{overflow:hidden;background:var(--pine);padding:20px 0}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:telos-scroll 38s linear infinite}
.marquee .w{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:26px;font-style:italic;color:var(--on-pine);padding:0 4px}
.marquee .st{margin:0 26px;color:var(--sage-soft);font-style:normal}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}html{scroll-behavior:auto}}

/* Cards */
.card{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.svc-card{display:block;text-decoration:none;color:inherit;padding:30px 26px;transition:all var(--dur) var(--ease)}
.svc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);color:inherit}
.svc-card h3{font-size:24px;letter-spacing:-.01em;margin:18px 0 8px}
.svc-card p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 16px}
.more{font-size:14.5px;font-weight:600;color:var(--harbor-deep);display:inline-flex;align-items:center;gap:7px}
.icon-tile{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-md);background:var(--sage-wash);color:var(--pine);flex:none}

/* Emergency note */
.emergency{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-md);text-align:left}
.emergency p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.emergency strong{color:var(--ink);font-weight:600}
.emergency .ic{flex:none;color:var(--error);margin-top:2px;display:flex}
.dark .emergency{background:var(--on-pine-fill);border-color:var(--on-pine-border)}
.dark .emergency p{color:var(--on-pine-muted)}.dark .emergency strong{color:var(--on-pine)}.dark .emergency .ic{color:var(--sage-soft)}

/* Endorsements */
.endorse-in{max-width:var(--maxw);margin:0 auto;padding:88px 0 92px}
.e-head{padding:0 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.arrows{display:flex;gap:12px}
.arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--on-pine-border);background:var(--on-pine);color:var(--pine);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);flex:none}
.arrow:disabled{background:transparent;color:var(--on-pine-muted);opacity:.4;cursor:default}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 28px 18px;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.e-card{flex:0 0 auto;width:min(420px,82vw);scroll-snap-align:start;background:var(--canvas);border-radius:var(--r-lg);padding:32px 32px 28px;box-shadow:0 18px 40px -22px rgba(20,42,34,.55);display:flex;flex-direction:column;margin:0}
.e-card blockquote{margin:16px 0 0;flex:1}
.e-card blockquote p{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.46;letter-spacing:-.008em;color:var(--pine);margin:0}
.e-by{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline);line-height:1.3}
.e-init{flex:none;width:46px;height:46px;border-radius:50%;background:var(--sage-wash);border:1px solid var(--sage-soft);color:var(--pine);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:17px;letter-spacing:.02em}
.e-name{display:block;font-weight:600;font-size:16px;color:var(--ink)}.e-cred{display:block;font-size:13px;color:var(--slate);margin-top:3px}
.e-foot{padding:0 28px;margin:10px 0 0;font-size:13.5px;color:var(--on-pine-muted);letter-spacing:.04em}

/* Services */
.approach{padding:34px 32px;display:flex;flex-direction:column}
.approach h3{font-size:27px;line-height:1.14;letter-spacing:-.01em;margin:12px 0 0}
.approach .paras{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.approach .paras p{font-size:16.5px;line-height:1.68;color:var(--ink-2);margin:0}
.approach .src{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--harbor-deep);text-decoration:none}
.focus-row{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;padding:26px 0;border-bottom:1px solid var(--hairline)}
.focus-ic{width:56px;height:56px;border-radius:50%;background:var(--canvas);border:1px solid var(--sage-soft);display:flex;align-items:center;justify-content:center;color:var(--pine)}
.focus-row h3{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.01em}
.focus-row p{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:7px 0 0;max-width:60ch}
.focus-row p.who{font-size:15.5px;font-style:italic;line-height:1.55;color:var(--sage);margin-top:8px}
.alsohelp{list-style:none;margin:0;padding:0;column-count:2;column-gap:40px}
.alsohelp li{break-inside:avoid;display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--hairline);font-size:16.5px;line-height:1.4;color:var(--ink)}
.alsohelp li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none;transform:translateY(-2px)}
.fee{flex:1 1 240px;display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:20px 24px}
.fee h3{font-weight:600;font-size:15.5px;color:var(--ink);margin:0}.fee .meta{font-size:13px;color:var(--slate);margin-top:3px}
.fee .price{flex:none;font-family:var(--font-display);font-size:22px;letter-spacing:-.01em;color:var(--pine)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--font-sans);font-weight:600;font-size:18px;color:var(--ink);margin:0}
.faq .chev{color:var(--sage);transition:transform var(--dur) var(--ease);flex:none;display:flex}
.faq details[open] .chev{transform:rotate(180deg)}
.faq details p{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin:0 0 24px;max-width:64ch}

/* About */
.value{background:var(--canvas);border:1px solid var(--card-border);border-radius:var(--r-lg);padding:28px 26px}
.value h3{font-weight:600;font-size:19px;color:var(--ink);margin:16px 0 7px}.value p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0}
.cred{display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:baseline}
.cred .yr{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--sage)}
.cred h3{font-weight:600;font-size:17px;color:var(--ink);margin:0}.cred p{font-size:14.5px;color:var(--ink-2);margin:3px 0 0}

/* Contact */
.c-row{display:flex;align-items:center;gap:16px}
.c-ic{width:46px;height:46px;border-radius:50%;background:var(--on-pine-fill);border:1px solid var(--on-pine-border);display:flex;align-items:center;justify-content:center;color:var(--sage-soft);flex:none}
.c-lbl{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-pine-muted);margin-bottom:2px}
.c-val{display:block;font-size:17px;color:var(--on-pine);font-weight:500;text-decoration:none}a.c-val:hover{color:#fff;text-decoration:underline}
.form-card{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:34px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:block}
.field .lbl{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px}.req{color:var(--lavender-deep)}
.field input,.field textarea{width:100%;font-family:var(--font-sans);font-size:16px;color:var(--ink);background:var(--surface);border-radius:var(--r-sm);padding:13px 15px;outline:none;border:1.5px solid var(--border-soft);transition:all var(--dur) var(--ease)}
.field input:focus,.field textarea:focus{border-color:var(--harbor);box-shadow:var(--focus-ring)}
.field textarea{resize:vertical;min-height:110px}
.sent{text-align:center;padding:48px 40px}
.sent-ic{width:60px;height:60px;border-radius:50%;background:var(--sage-wash);color:var(--pine);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}

/* Policies */
.toc{display:flex;flex-wrap:wrap;gap:10px}
.toc a{font-size:14px;padding:8px 16px;border-radius:var(--r-pill);font-weight:500;background:var(--sage-wash);color:var(--pine);border:1px solid var(--sage-soft);text-decoration:none}
.toc a:hover{background:var(--pine);color:var(--on-pine)}
.legal{padding-top:44px;border-top:1px solid var(--hairline)}
.legal h2{font-size:clamp(26px,3vw,36px);line-height:1.12;margin-top:12px}
.legal .txt{margin-top:18px;display:flex;flex-direction:column;gap:14px;max-width:68ch}
.legal .txt p{margin:0;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.legal .txt a{color:var(--harbor-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--sage-soft);font-weight:500}

/* Footer */
.site-footer{background:var(--pine);color:var(--on-pine);padding-top:64px}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--on-pine-border)}
.f-h{font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-pine-muted);margin:0 0 18px}
.f-link{display:block;color:var(--on-pine);font-size:15px;padding:7px 0;opacity:.92;text-decoration:none}
.f-link:hover{opacity:1;color:var(--on-pine);text-decoration:underline;text-underline-offset:3px}
.f-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;color:var(--on-pine);opacity:.92;text-decoration:none}
a.f-row:hover{opacity:1;color:var(--on-pine);text-decoration:underline;text-underline-offset:3px}
.f-row svg{color:var(--sage-soft)}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 24px;padding:22px 0 4px}
.legal-links a{font-size:13px;color:var(--on-pine-muted);text-underline-offset:3px;text-decoration-color:var(--on-pine-border)}
.legal-links a:hover{color:var(--on-pine)}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 0 30px;font-size:13px;color:var(--on-pine-muted)}

@media (max-width:920px){
.grid2{grid-template-columns:1fr!important;gap:36px!important}
.grid3{grid-template-columns:1fr 1fr}
.footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.navlinks,.navcta{display:none}
.burger{display:block}
.menu-open .mobilemenu{display:flex}
.grid3,.footgrid{grid-template-columns:1fr}
.startband{flex-direction:column;align-items:flex-start!important}
.alsohelp{column-count:1}
.form-2{grid-template-columns:1fr}
.form-card{padding:26px 22px}
.badge{left:12px}
}