/* Alpine, refined. An additive layer over the existing Summit components.
   No new palette, fonts, layout framework or page structures. 8 October 2026. */
:root {
  --display-weight: 450;
  --display-tracking: -.048em;
  --display-leading: 1.055;
  --h-tracking: -.032em;
  --radius-l: 12px;
  --section-y: clamp(76px, 7.6vw, 120px);
  --shadow-paper: 0 4px 8px -6px rgb(12 26 35 / .12), 0 24px 60px -34px rgb(12 26 35 / .22);
}
html { scroll-padding-top: 94px; }
body { font-kerning: normal; }
h1, h2, h3, .t-display, .t-h1, .t-h2 { font-optical-sizing: auto; }
.t-h1 { line-height: 1.09; }
.t-h2 { line-height: 1.14; }
.t-lead { line-height: 1.65; }
.s-label { font-size: .8125rem; letter-spacing: .065em; margin-bottom: 20px; }
.s-label::before { flex-basis: 32px; }
.text-link { text-decoration-color: var(--line); transition: color .2s, text-decoration-color .2s; }
@media (hover: hover) and (pointer: fine) { .text-link:hover { color: var(--teal); text-decoration-color: currentColor; } }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
.on-dark :focus-visible, .site-foot :focus-visible, .kc-card :focus-visible { outline-color: var(--mint); }
.btn { min-height: 50px; padding-inline: 1.5em; border-radius: 5px; transition: background .22s, color .22s, border-color .22s, box-shadow .3s, transform .3s var(--ease); }
.btn--primary { box-shadow: 0 2px 2px rgb(12 26 35 / .06); }
.btn-arrow { transition-duration: .35s; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgb(12 26 35 / .45); }
  .btn:hover .btn-arrow { transform: translateX(4px); }
}
/* Press feedback: shrink to 97% on press. Comes after the hover lift so a mouse press is visible too. */
.btn:active, .btn:hover:active { transform: scale(.97); transition-duration: .16s; }
/* Header retains the current full-width bar and all destinations. */
.site-head-shell { background: rgb(243 246 245 / .92); }
.site-head.is-scrolled .site-head-shell { background: rgb(255 255 255 / .95); }
/* Soft edge where the page meets the scrolled header (fades in, never pops). */
.site-head-shell::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; z-index: -1; background: linear-gradient(rgb(12 26 35 / .07), transparent); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.site-head.is-scrolled .site-head-shell::after { opacity: 1; }
.site-head.is-panel .site-head-shell::after, .site-head.is-menu .site-head-shell::after { opacity: 0; }
.site-bar { gap: clamp(24px, 3vw, 44px); }
.site-link { font-size: .875rem; }
.site-link::after { bottom: 16px; height: 1px; }
.site-panel-in { padding-block: 32px; }
.site-svc { transition: color .25s; }
.site-thumb { border-radius: 5px; }
@media (hover: hover) and (pointer: fine) { .site-svc:hover .site-thumb canvas { opacity: .7; } }
.site-thumb canvas { transition: opacity .3s; }
.site-aside { border-radius: 6px; }
.site-menu a:focus-visible { outline-offset: -3px; }
.site-menu { overscroll-behavior: contain; }
@media (hover: hover) and (pointer: fine) { .site-burger:hover { background: var(--paper-2); } }
/* Homepage: same contour field and route, with clearer typographic contrast. */
.hA { overflow: hidden; min-height: min(100svh, 940px); }
.hA-body { align-items: center; padding-top: 36px; padding-bottom: 64px; }
.hA-copy { grid-column: 1 / span 7; }
.hA-id { max-width: 34rem; font-size: .8125rem; line-height: 1.6; letter-spacing: .015em; margin-bottom: 26px; }
.hA-id::before { flex: 0 0 26px; }
.hA h1 { max-width: 16.4ch; font-size: clamp(2.65rem, 4.6vw, 4.65rem); margin-bottom: 28px; }
.hA h1 .second, .sv-hero h1 .second, .hb-hero h1 .second, .kc-intro h1 .second {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.035em; line-height: 1.08; color: var(--teal); margin-top: .13em;
}
.hA-sub { max-width: 31rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); margin-bottom: 30px; }
.hA-actions { gap: 18px 24px; }
.hA-actions .text-link { max-width: none; line-height: 1.55; }
.hA-map { inset: 0 0 0 38%; }
.hA-map canvas { color: rgb(12 26 35 / .095); --contour-strong: rgb(15 118 110 / .4); }
.hA-map::after { background: linear-gradient(90deg, var(--tint), rgb(243 246 245 / .55) 24%, transparent 53%); }
.hA-route path { stroke-width: 1.2; stroke-dasharray: 2 6; }
.hA-pin { gap: 14px; width: max-content; }
.hA-pin span { flex: 0 0 auto; padding: 12px 16px; border-radius: 4px; border-color: rgb(15 118 110 / .2); box-shadow: var(--shadow-paper); font-size: .75rem; line-height: 1.55; background: rgb(255 255 255 / .94); }
.hA-pin b { font-size: .875rem; font-weight: 500; margin-bottom: 2px; }
.hA-pin::before { font: 500 8px/1 var(--f-body); display: grid; place-items: center; color: var(--teal); background: var(--tint); }
.hA-pin.p1::before { content: '01'; }
.hA-pin.p2::before { content: '02'; }
.hA-pin.p3::before { content: '03'; color: white; }
.hA-pin.is-summit span { background: var(--ink); border-color: var(--ink); color: var(--muted-dark); }
.hA-pin.is-summit b { color: var(--on-dark); }
.tsA { padding-block: clamp(44px, 4vw, 64px); }
.tsA-say { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.45; }
.tsA-say span { display: block; margin-top: 8px; font-size: .9375rem; letter-spacing: 0; }
.tsA-cell { color: var(--ink); }
.tsA-cell .ts-mark { opacity: .72; transition: opacity .25s, transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tsA-cell:hover .ts-mark { opacity: 1; transform: translateY(-2px); } }
.fA-list { border-top-color: var(--ink); }
.fA-item { border-radius: 0; }
.fA-title { letter-spacing: -.025em; }
.fA-bridge { border-top-color: var(--line); }
.cC-panel { border-radius: 6px; box-shadow: var(--shadow-paper); }
.cC-before { background: var(--paper-2); }
.cC-after { grid-template-columns: minmax(120px, .8fr) minmax(0, 1.4fr); column-gap: 24px; }
.cC-after h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: var(--teal); }
.cC-knob { background: var(--teal); }
.cC-handle::before { background: var(--teal); }
.qA { padding-block: clamp(80px, 8vw, 128px); }
.qA-text, .sv-quote-lead { line-height: 1.25; }
.qA-cite { padding-top: 22px; border-top: 1px solid var(--line); max-width: 42rem; }
.qA-ini, .sv-ini { font-family: var(--f-body); font-size: .8125rem; }
.hw-steps li, .sv-steps li { position: relative; }
.hw-steps li::after, .sv-steps li::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--teal-bright), transparent 90%); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.hw-steps li.is-seen::after, .sv-steps li.is-seen::after { transform: scaleX(1); }
.hw-n, .sv-steps .n { color: var(--teal-bright); font-size: 3rem; }
.hw-steps h3, .sv-steps h3 { letter-spacing: -.025em; }
.wfA-fit .mark-check { background: var(--teal); color: white; border-color: var(--teal); }
.wfA-not { color: var(--muted); }
.tmA-tab { padding-block: 13px; transition: background .3s, transform .16s var(--ease); }
.tmA-tab[aria-selected="true"] { background: var(--tint); }
.tmA-tab[aria-selected="true"]::before { top: 0; bottom: 0; }
.tmA-panels { padding-top: 28px; border-top: 1px solid var(--teal); }
.tmA-lead { font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.22; }
.tmA-cap { padding-bottom: 4px; }
.fqA-head { max-width: 54rem; }
.fqA-q button { padding-block: 17px; transition: color .2s, transform .16s var(--ease); }
.fqA-q button[aria-expanded="true"] { color: var(--teal); }
.fqA-a { padding: 24px 28px 28px; border-top: 2px solid var(--teal); background: rgb(255 255 255 / .84); }
.fqA-a p { font-size: clamp(1.25rem, 1.9vw, 1.8rem); line-height: 1.5; }
.abA-figure img, .sv-about-fig img { filter: none; }
.abA-pin span, .sv-about-pin span { border-radius: 4px; box-shadow: var(--shadow-paper); }
/* Services: preserve their editorial columns and turn existing facts into route cards. */
.sv-hero { padding-top: calc(var(--nav-h) + 54px); }
.sv-hero h1 { max-width: 16ch; }
.sv-sub { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); max-width: 33rem; }
.sv-crumbs { font-size: .8125rem; gap: 10px; margin-bottom: 28px; }
.sv-crumbs a { text-decoration-color: var(--line); }
.sv-card { position: relative; border-radius: 5px; border-top: 3px solid var(--teal); padding: 30px 32px 24px; box-shadow: var(--shadow-paper); }
.sv-card-head { padding-bottom: 22px; align-items: flex-start; }
.sv-card-head .sv-card-name { max-width: 20ch; line-height: 1.3; }
.sv-card-head > span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; padding-top: 4px; }
.sv-row { padding-block: 15px; grid-template-columns: 96px minmax(0, 1fr); }
.sv-row .big { font-family: var(--f-serif); font-size: 1.85rem; font-weight: 400; letter-spacing: -.035em; }
.sv-card-foot { padding-top: 18px; }
.sv-pain-list li, .hb-principles li { border-top-color: var(--teal); }
.sv-list { border-top-color: var(--teal); }
.sv-list li { padding-block: 26px; }
.sv-price .amt { font-family: var(--f-serif); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.3rem); letter-spacing: -.025em; }
.sv-faq-list { border-top-color: var(--teal); }
.sv-faq-btn { transition: color .2s, transform .16s var(--ease); }
.sv-faq-btn[aria-expanded="true"] { color: var(--teal); }
.sv-faq-a p { line-height: 1.65; }
/* Answers open and close smoothly (alpine.js animates the height); the one closing stays visible while it folds. */
.sv-faq-a.is-closing[hidden] { display: block !important; }
.sv-faq-a.is-moving { overflow: hidden; }
.hb-hero h1 { max-width: 20ch; }
.hb-panel-in { border-radius: 5px; border-top: 3px solid var(--teal); box-shadow: var(--shadow-paper); }
.hb-pin span { border-radius: 4px; box-shadow: var(--shadow-paper); }
.hb-quote { border-top-color: var(--teal); }
.hb-quote blockquote p { line-height: 1.35; }
.ab-story-copy { padding-left: 28px; border-left: 1px solid var(--line); }
.ab-impact .ab-n { font-size: 3.25rem; }
/* Existing tools and resources. Preserve their logic and layouts. */
.kc-head { padding-top: calc(var(--nav-h) + 52px); }
.kc-team, .kc-panel, .rc-card, .cv-quiz, .pt-doc { border-radius: 6px; box-shadow: var(--shadow-paper); }
.kc-team { border-top: 3px solid var(--teal); }
.kc-cat { border-radius: 6px; }
.kc-cat-head { background: var(--tint); padding-block: 16px; }
.kc-row.is-on { background: rgb(225 240 236 / .48); }
.kc-row { transition: background .25s, transform .16s var(--ease); }
.kf input { background: var(--tint); }
.kc-card { border-radius: 6px; padding: 30px; box-shadow: var(--shadow-paper); border-top: 3px solid var(--teal-bright); }
.kc-big strong { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.035em; }
.kc-cost dd { font-size: 2rem; }
.kc-card-note { color: #bac9c9; }
.rc-card, .cv-quiz { border-top: 3px solid var(--teal); }
.rc-opt, .cv-opt { border-radius: 5px; transition: background .25s, border-color .25s, box-shadow .25s, transform .16s var(--ease); }
.rc-opt[aria-pressed="true"], .cv-opt[aria-pressed="true"] { box-shadow: inset 3px 0 var(--teal); }
.rc-bar, .cv-bar { height: 3px; }
.rc-col, .pt-card { border-radius: 6px; }
.pt-doc { border-top: 3px solid var(--teal); }
.pt-doc section { padding-block: 30px; }
.pt-doc .n { font-size: 2rem; }
.bk-top { padding-top: calc(var(--nav-h) + 52px); }
.bk-cal { border-radius: 6px; border-top: 3px solid var(--teal); box-shadow: var(--shadow-paper); }
.bk-cal-head { padding: 24px; background: var(--tint); }
.bk-path li { padding-bottom: 36px; }
.bk-photo { border-radius: 6px; background: var(--tint); }
.site-foot { border-top: 1px solid var(--line-dark); }
.site-foot-tag { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.35; max-width: 21ch; }
.foot-k { color: #a9bcbe; letter-spacing: .06em; }
.foot-list { gap: 12px; }
.foot-list a { transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .foot-list a:hover { color: var(--mint); } }
.site-foot-word { background: rgb(237 243 241 / .25); }
/* Motion is progressive: content is visible before JS and on unsupported browsers. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready { transition: opacity .65s var(--ease), transform .85s var(--ease); }
  .motion-ready:not(.is-seen) { opacity: 0; transform: translateY(18px); }
  .motion-ready.motion-quote:not(.is-seen) { transform: translateY(9px); }
  .motion-ready.motion-card:not(.is-seen) { transform: translateY(12px); }
  .motion-ready.is-seen { opacity: 1; transform: none; }
  .motion-ready:focus-within { opacity: 1; transform: none; }
}
@media (min-width: 861px) and (max-width: 1120px) {
  .site-logo img { height: 18px; }
  .site-bar { gap: 24px; }
  .site-links { gap: 20px; }
  .hA h1 { font-size: clamp(2.65rem, 4.6vw, 3.4rem); }
  .hA-pin span { max-width: 170px; }
  .hA-actions .text-link { max-width: 13rem; }
}
@media (max-width: 960px) {
  .sv-card { max-width: 680px; }
  .ab-story-copy { padding-left: 0; border: 0; }
}
@media (max-width: 860px) {
  :root { --section-y: 72px; --fs-h1: clamp(2rem, 5.5vw, 3rem); --fs-h2: clamp(1.85rem, 4.5vw, 2.65rem); }
  html { scroll-padding-top: 82px; }
  .site-head-shell { background: rgb(243 246 245 / .96); }
  .site-head.is-menu .site-head-shell { background: var(--paper); }
  .site-logo img, .site-head.is-scrolled .site-logo img { height: 13px; }
  .hA { min-height: 0; padding-top: 104px; }
  .hA-body { padding-top: 0; padding-bottom: 16px; }
  .hA-id { font-size: .75rem; max-width: 27rem; margin-bottom: 22px; align-items: flex-start; }
  .hA-id::before { margin-top: 10px; flex-basis: 20px; }
  .hA h1 { max-width: 19ch; font-size: clamp(2.6rem, 6.7vw, 3.8rem); line-height: 1.075; }
  .hA h1 .second { margin-top: .2em; }
  .hA-sub { max-width: 35rem; line-height: 1.65; }
  .hA-actions { gap: 18px; }
  .hA-actions .text-link { max-width: none; }
  .hA-map { position: relative; inset: auto; height: 340px; margin-top: 12px; }
  .hA-map::after { background: linear-gradient(180deg, var(--tint), transparent 35%); }
  .hA-pin { gap: 10px; }
  .hA-pin span { padding: 9px 11px; max-width: 160px; font-size: .6875rem; }
  .hA-pin b { font-size: .75rem; }
  .hA-pin.p1 { left: 15%; top: 84%; }
  .hA-pin.p2 { left: 41%; top: 54%; }
  .hA-pin.p3 { left: 77%; top: 22%; }
  .tsA-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tsA-cell, .tsA-cell:nth-child(7n + 1), .tsA-cell:nth-child(3n + 1) { border-left: 1px solid var(--line-soft); padding: 18px 10px; }
  .tsA-cell:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .cC-after { grid-template-columns: 1fr; }
  .tmA-panels { margin-top: 28px; padding-top: 22px; }
  .tmA-tab { padding-block: 14px; }
  .fqA-q button { padding: 20px 0; }
  .fqA-a { border-top: 0; border-left: 2px solid var(--teal); padding: 0 0 4px 18px; margin-bottom: 20px; background: transparent; }
  .fqA-a p { font-size: 1.2rem; }
  .sv-hero { padding-top: 102px; }
  .sv-hero h1 { max-width: 22ch; }
  .sv-card { padding: 24px 22px 20px; }
  .sv-row { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .sv-row .big { font-size: 1.65rem; }
  .sv-card-head { flex-wrap: wrap; gap: 8px; }
  .sv-card-head .sv-card-name { max-width: none; }
  .sv-hero-map { opacity: .4; -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000); mask-image: linear-gradient(180deg, transparent 10%, #000); }
  .sv-about, .abA { padding-bottom: 72px; }
  .hb-hero { padding-top: 104px; }
  .hb-hero .t-lead { max-width: 37rem; }
  .bk-top, .kc-head { padding-top: 104px; }
}
@media (max-width: 560px) {
  .s-label { margin-bottom: 16px; font-size: .75rem; }
  .hA-actions { align-items: flex-start; flex-direction: column; }
  .hA-actions .btn { min-width: 190px; }
  .hA-actions .text-link { font-size: .875rem; }
  .tsA-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tsA-cell:nth-child(4n + 1) { border-left: 1px solid var(--line-soft); padding-left: 10px; }
  .tsA-cell:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .cC { padding-block: 72px; }
  .cC-after { padding-left: 18px; }
  .sv-card { padding: 22px 20px; }
  .sv-row { grid-template-columns: 1fr; gap: 3px; }
  .sv-row dt { font-size: .75rem; }
  .sv-row dd { font-size: .9375rem; }
  .sv-steps .n, .hw-n { font-size: 2.25rem; }
  .sv-faq-btn { padding-block: 20px; }
  .sv-faq-a p { font-size: 1.125rem; }
  .kc-card { padding: 26px 22px; }
  .rc-card, .cv-quiz { padding: 24px 20px; }
  .pt-doc { padding: 26px 20px; }
  .pt-doc section { grid-template-columns: 28px minmax(0, 1fr); }
  .bk-cal-head { padding: 20px 18px; }
}
@media (max-width: 374px) {
  .hA h1 { font-size: 2.4rem; }
  .site-logo img, .site-head.is-scrolled .site-logo img { height: 12px; }
  .abA-pin, .sv-about-pin { left: 182px; }
  .sv-about-pin span, .abA-pin span { padding: 6px; }
  .hA-pin.p2 { left: 31%; }
}
/* =========================================================
   Motion kit (12 October 2026). Shared pieces from the ek- skills review.
   ========================================================= */
/* Press feedback on the shared controls: a quick shrink so every tap or click visibly lands. */
.sv-faq-btn:active, .fqA-q button:active, .tmA-tab:active, .kc-row:active, .rc-opt:active, .cv-opt:active { transform: scale(.985); }
.sv-more, .tmA-more { transition: color .2s, transform .16s var(--ease); }
.sv-more:active, .tmA-more:active { transform: scale(.97); }
.text-link:active { opacity: .7; }
/* Count-up figures keep fixed-width digits so they don't wobble. */
[data-count-to] { font-variant-numeric: tabular-nums lining-nums; }

/* Phone booking bar (service pages, added by alpine.js below 861px). Slides up from the bottom
   on the iOS sheet curve and leaves the same way, faster. Sits clear of the iPhone home bar. */
.m-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; gap: 14px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-top: 1px solid var(--line-soft); transform: translateY(100%); visibility: hidden; transition: transform .2s var(--ease), visibility 0s linear .2s; }
.m-bar.is-on { transform: none; visibility: visible; transition: transform .32s var(--ease-drawer), visibility 0s; }
.m-bar p { font-size: var(--fs-micro); line-height: 1.35; color: var(--muted); }
.m-bar p b { display: block; font-weight: 500; color: var(--ink); }
.m-bar .btn { margin-left: auto; min-height: 46px; padding-inline: 1.2em; font-size: var(--fs-small); }
@media (min-width: 861px) { .m-bar { display: none; } }

/* Toasts (Sonner-style): rise from the bottom, leave the same way, flick down to dismiss. */
.a-toaster { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.a-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 380px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 14px 34px -16px rgb(12 26 35 / .4); font-size: var(--fs-small); line-height: 1.45; color: var(--ink); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.a-toast svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--teal); }
.a-toast.is-error svg { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .motion-ready, .motion-ready:not(.is-seen) { opacity: 1; transform: none; }
  .hw-steps li::after, .sv-steps li::after { transform: scaleX(1); }
  .hA-map canvas, .sv-hero-map canvas { transform: none !important; }
}
@media print {
  .motion-ready { opacity: 1 !important; transform: none !important; }
}