/* Humakini theme styles. One block per part of the page, in page order:
   1 Base · 2 Type by tag · 3 Header · 4 Opening · 5 Services · 6 Clients · 7 How we work · 8 Projects · 9 Start a conversation · 10 Services page
   Where values come from:
   - Colors: theme.json palette (--wp--preset--color--*).
   - Settings screens (Appearance menu) print their values as CSS variables on every page and in the editor:
     --op-* Opening settings (inc/opening-settings.php), --sv-* Services settings, --pj-* Projects settings,
     --f-* font, --w-* weight and --c-clients from Fonts (inc/fonts-settings.php).
     Their defaults live only in those files; this file has no copies.
   - Movement lives in assets/js, never in page content. A section's parts hide for a reveal only after the script marks it
     (impact-anim), so without the script, or in the editor, everything shows.
   !important is used only where WordPress itself uses it (layout margins, the size classes of the editor) or for motion off. */

/* ---------- 1 Base ---------- */
:root{--sv-scale:1;--gap-h:3rem;--item-size:calc(var(--sv-title-size) * var(--sv-scale));--text-size:calc(var(--sv-text-size) * var(--sv-scale))}
@media(max-width:640px){:root{--sv-scale:.85}}
body{font-weight:var(--w-text)}
/* section tones: light is the default, "Dark" is a block style on a Group (Styles panel) */
.impact-section{padding-block:7rem}
.is-style-impact-dark{background:var(--wp--preset--color--ink);color:var(--wp--preset--color--base)}
.is-style-impact-dark :where(h1,h2,h3,a){color:inherit}
/* section label: handwriting, terracotta. Block style "Section label" on a Paragraph */
.is-style-impact-label{font:var(--w-label) 1.7rem/1 var(--f-label);color:var(--wp--preset--color--terracotta);margin-bottom:.6rem}
/* buttons: pill outline (theme.json), fill terracotta (the KINI color) on hover */
.wp-block-button .wp-block-button__link:hover{background:var(--wp--preset--color--terracotta);border-color:var(--wp--preset--color--terracotta);color:var(--wp--preset--color--base);text-decoration:none}
/* the Home sections start flush; each part sets its own space */
.impact-services :where(p,h2,h3),.impact-principles :where(p,h2,h3),.impact-projects :where(p,h2,h3){margin-block:0}
.impact-more a{color:var(--wp--preset--color--terracotta);font-weight:600;text-decoration:none}
.impact-more a:hover{text-decoration:underline}

/* ---------- 2 Type by tag (owner 2026-10-11; table in themes/build-brief.md, "Type tags") ----------
   New headings follow the tags through theme.json (elements h1 to h6). The rules here give the theme's own texts their role.
   H1 tagline   --f-tagline (weight and size: Opening settings)
   H2 lead      --f-lead    section sentences and the Services page heading; size: Services settings
   H3 item      --f-item    service, principle and project names; services and principles share one size
   H4 end       --f-end     the last section line
   H6 name      --f-name    HUMAKINI in the header and the opening
   p  text      --f-text    all running text, small labels, buttons, menu
   p  label / caption / numbers, li clients: their own roles */
.wp-block-site-title,.impact-brand,.impact-logo{margin:0}
.impact-lede,.impact-principles .impact-pr-intro{font-family:var(--f-lead);font-weight:var(--w-lead);font-size:calc(var(--sv-lede-size) * var(--sv-scale)) !important;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
/* width: one setting (Description width) for the two section sentences on Home; the other pages keep their own fixed widths */
.impact-services:not(.impact-svcpage) .impact-lede,.impact-principles .impact-pr-intro{max-width:var(--sv-lede-width)}
.impact-svcpage .impact-lede{max-width:60ch}
/* the three-line breaks of the Home sentences are for laptops; on a phone the text just wraps */
@media(max-width:640px){.impact-services .impact-lede br,.impact-principles .impact-pr-intro br{display:none}}
.impact-aboutpage .impact-lede{max-width:40ch}
.impact-svc h3,.impact-pr h3,.impact-prow h3{font-family:var(--f-item);font-weight:var(--w-item);letter-spacing:-.01em}
.impact-svc h3,.impact-pr h3{font-size:var(--item-size);line-height:1.1}
.impact-pr h3{letter-spacing:.04em;text-transform:uppercase}
body,.impact-svc p,.impact-pr p,.impact-prow p,.impact-chip,.impact-prog-pct,.impact-prog-status,.impact-prog-note,.impact-num-label,.wp-block-button__link,.impact-banner .wp-block-navigation a{font-family:var(--f-text)}
.impact-svc p:not(.impact-svc-num),.impact-pr p,.impact-prow p,.impact-chip,.impact-prog-note{font-size:var(--text-size);line-height:1.5}

/* ---------- 3 Header (parts/header.html; assets/js/banner.js) ----------
   No background, words are solid. Without the script it is a normal bar at the top of the page. */
.impact-banner{position:relative;z-index:50;align-items:center;padding:1rem var(--wp--custom--side);color:inherit}
.impact-banner .wp-block-site-title,.impact-banner .impact-logo{font:var(--w-name) 1.3rem/1.2 var(--f-name);letter-spacing:.12em}
/* the logo: HUMA takes the text color, KINI is terracotta (lighter on dark). It is the Highlight format (mark) so the owner can still edit the name. */
.impact-brand mark,.impact-logo mark{background:none;color:var(--wp--preset--color--terracotta)}
.impact-banner.on-dark .impact-logo mark{color:#EE8A70}
.impact-banner a{color:inherit;text-decoration:none}
.impact-banner .wp-block-navigation{font-size:.95rem;gap:1.6rem}
.impact-banner .wp-block-navigation__container{gap:1.6rem}
.impact-banner .impact-nav-cta > a{padding:.45rem 1.1rem;border:1.5px solid currentColor;border-radius:999px;font-weight:600}
.impact-banner .impact-nav-cta > a:hover{background:var(--wp--preset--color--terracotta);border-color:var(--wp--preset--color--terracotta);color:var(--wp--preset--color--base)}
.impact-banner.on-dark{color:var(--wp--preset--color--base)}
.impact-banner.on-dark .impact-nav-cta > a:hover{background:var(--wp--preset--color--terracotta);border-color:var(--wp--preset--color--terracotta);color:var(--wp--preset--color--base)}
/* with the script: fixed, hidden until the visitor scrolls up */
html.impact-js .impact-banner{position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 auto 0;transform:translateY(calc(-110% - var(--wp-admin--admin-bar--height,0px)));transition:transform var(--op-header-slide),color .4s}
html.impact-js .impact-banner.show{transform:none}
/* phone (layout brief N9, option A): the site name and a menu icon; the icon opens a full-screen list (the navigation block's own overlay, phones only: WordPress switches at 600px) */
.impact-banner .wp-block-navigation__responsive-container-open{padding:.4rem;margin-right:-.4rem}
.impact-banner .wp-block-navigation__responsive-container.is-menu-open{padding:1.4rem var(--wp--custom--side) 2rem;background-color:var(--sv-section-bg,var(--wp--preset--color--base))}
.impact-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{align-items:flex-start;justify-content:center}
.impact-banner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{align-items:flex-start;gap:1.6rem;font-size:1.6rem}
.impact-banner .wp-block-navigation__responsive-container.is-menu-open .impact-nav-cta > a{font-size:1.2rem;padding:.6rem 1.4rem}

/* ---------- 4 Opening (markup: functions.php humakini_opening(); movement: assets/js/opening.js) ----------
   Without the script, or with motion off: the finished daytime look (dawn sky, dark words, red second line).
   With the script: the section is a tall scroll track and the stage is pinned inside it. */
.impact-opening{--arc:var(--op-arc);--dot:var(--op-dot);--red:var(--op-red);--dawn:linear-gradient(var(--op-dawn-1) 0%,var(--op-dawn-2) 52%,var(--op-dawn-3) 100%);position:relative}
@media(max-width:640px){.impact-opening{--arc:var(--op-arc-phone);--dot:var(--op-dot-phone)}}
.impact-stage{position:relative;height:100vh;min-height:100vh;overflow:hidden;background:var(--dawn);color:var(--wp--preset--color--ink)}
.impact-stage::after{content:'';position:absolute;z-index:3;left:-20%;width:140%;top:80%;bottom:-10%;background:var(--wp--preset--color--base);border-radius:50% 50% 0 0 / var(--arc) var(--arc) 0 0}
html.impact-js .impact-stage::after{display:none}
.impact-brand{position:absolute;z-index:6;top:1rem;left:var(--wp--custom--side);font:var(--w-name) 1.3rem/1.2 var(--f-name);letter-spacing:.12em;transition:opacity .2s}
.impact-tag{position:absolute;z-index:5;left:0;right:0;top:var(--op-tag-top);transform:translateY(-50%)}
.impact-tag > *{width:min(1140px,100% - 2 * var(--wp--custom--side));margin-inline:auto !important}
/* the tagline starts at the left edge of the 1140 column (as in the mockup), or in line with the name, or centered (Opening settings) */
.impact-tag > .impact-tagline{margin-left:var(--op-tag-ml) !important;margin-right:auto !important;text-align:var(--op-tag-text)}
.impact-tagline{font-family:var(--f-tagline);font-size:clamp(var(--op-tag-min),var(--op-tag-size),var(--op-tag-max));max-width:var(--op-tag-width);font-weight:var(--op-tag-weight);margin:0}
.impact-tagline mark{display:var(--op-l2-phone);background:none;color:var(--red);text-shadow:none}
@media(min-width:641px){.impact-tagline mark{display:var(--op-l2-laptop)}}
.impact-cue{position:absolute;z-index:5;left:0;right:0;bottom:3vh;margin:0;text-align:center;font:600 .85rem var(--f-text);letter-spacing:.1em;color:var(--op-text-night)}
/* still page for visitors without scripts: the name is in the banner and the scroll cue is pointless */
html:not(.impact-js) body:not(.editor-styles-wrapper) :is(.impact-brand,.impact-cue){display:none}
/* live: night sky, pinned stage, layers added by opening.js */
html.impact-js .impact-opening:not(.is-static) .impact-stage{position:sticky;top:0;background:linear-gradient(var(--op-night-1) 0%,var(--op-night-2) 55%,var(--op-night-3) 100%);color:var(--op-text-night)}
html.impact-js .impact-opening:not(.is-static) .impact-stage.day{color:var(--wp--preset--color--ink)}
html.impact-js .impact-opening:not(.is-static) .impact-tagline{color:inherit;transition:color var(--op-text-fade);text-shadow:0 2px 22px rgba(0,0,0,.4)}
html.impact-js .impact-opening:not(.is-static) .impact-tagline mark{color:var(--op-l2-night);transition:color var(--op-text-fade);text-shadow:0 2px 24px rgba(0,0,0,.35)}
html.impact-js .impact-opening:not(.is-static) .impact-stage.day .impact-tagline,
html.impact-js .impact-opening:not(.is-static) .impact-stage.day .impact-tagline mark{text-shadow:0 2px 20px rgba(250,247,240,.6)}
html.impact-js .impact-opening:not(.is-static) .impact-stage.day .impact-tagline mark{transition:none}
html.impact-js .impact-opening:not(.is-static) .impact-brand{color:inherit;transition:opacity .2s,color var(--op-text-fade)}
html.impact-js .impact-opening:not(.is-static) .impact-brand mark{color:#EE8A70;transition:color var(--op-text-fade)}
html.impact-js .impact-opening:not(.is-static) .impact-stage.day .impact-brand mark{color:var(--wp--preset--color--terracotta)}
body.banner-took-over .impact-brand{opacity:0}
.impact-sky,.impact-stars,.impact-tint{position:absolute;inset:0;pointer-events:none}
.impact-sky{background:var(--dawn);opacity:0}
.impact-stars{inset:0 0 40% 0}
.impact-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff}
.impact-tint{background:var(--op-tint-color);opacity:0}
.impact-ground{position:absolute;z-index:3;left:-20%;width:140%;top:0;height:100%;background:var(--op-soil-night);border-radius:50% 50% 0 0 / var(--arc) var(--arc) 0 0;will-change:transform;pointer-events:none}
.impact-dot{position:absolute;left:50%;top:0;width:var(--dot);height:var(--dot);margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);border-radius:50%;background:var(--red);opacity:0;box-shadow:0 0 0 calc(var(--dot) * .7) color-mix(in srgb,var(--red) 14%,transparent)}
/* the next section starts under the bottom of the stage (cream soil, the same color), so no empty stretch follows the tagline */
html.impact-js .impact-opening:not(.is-static) + *{position:relative;margin-top:calc(-1 * var(--op-overlap))}

/* ---------- 5 Services on Home (markup: inc/sections.php humakini_services(); look: Services settings) ----------
   Description on top, then the cards; the eighth card links to the Services page. */
.impact-services{padding-top:7rem;background:var(--sv-section-bg)}
.impact-lead{margin-bottom:var(--gap-h)}
.impact-lede{color:var(--sv-lede-color)}
.impact-cards{display:grid;grid-template-columns:repeat(var(--sv-cols),minmax(0,1fr));gap:var(--sv-card-gap)}
.impact-svc{display:flex;flex-direction:column;padding:var(--sv-pad);border-radius:var(--sv-radius);min-width:0;background:var(--sv-box);box-shadow:var(--sv-shadow);border:var(--sv-border)}
.impact-svc-top{height:var(--sv-gap);display:flex;align-items:flex-start;margin:0}
.impact-svc-top .wp-block-image{margin:0}
.impact-svc-top img{display:block;width:auto;height:calc(var(--sv-logo) * var(--sv-scale));max-width:100%}
.impact-svc-num{font-family:var(--f-text);font-weight:600;letter-spacing:.1em;font-size:calc(var(--sv-num-size) * var(--sv-scale));color:var(--sv-num-color);font-variant-numeric:tabular-nums}
.impact-svc h3{color:var(--sv-title-color);margin-bottom:.9rem;text-wrap:balance}
.impact-svc p:not(.impact-svc-num){color:var(--sv-text-color)}
.impact-svc-more{justify-content:flex-end;background:var(--sv-more-bg);border:var(--sv-more-border);box-shadow:none}
.impact-svc-more .impact-svc-link{margin:0}
.impact-svc-more .impact-svc-link a{font-family:var(--f-lead);font-weight:var(--w-lead);font-size:calc(var(--sv-more-size) * var(--sv-scale));line-height:1.15;color:var(--sv-more-color);text-decoration:none}
.impact-svc-more .impact-svc-link a:hover{text-decoration:underline}
html.impact-js .impact-services.impact-anim .impact-lead > *{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
html.impact-js .impact-services.impact-anim .impact-cards > *{opacity:0;transform:translateY(22px);transition:opacity .5s,transform .5s}
html.impact-js .impact-services.in .impact-lead > *,html.impact-js .impact-services.in .impact-cards > *{opacity:1;transform:none}
.impact-services.in .impact-cards > *{transition-delay:calc(.3s + var(--i, 0) * .07s)}
@media(max-width:1040px){.impact-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.impact-cards{grid-template-columns:1fr}.impact-svc-top{height:var(--sv-gap-phone)}}

/* ---------- 6 Clients band: names slide right to left only while the visitor scrolls; logos stand still ---------- */
.impact-clients{margin-top:6rem;padding:2.4rem 0 2.8rem;background:var(--wp--preset--color--sand);border-block:1.5px solid var(--wp--preset--color--line);overflow:hidden}
.impact-clients-title{text-align:center;margin-bottom:1.5rem;font:var(--w-caption) .75rem var(--f-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.impact-ticker{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0}
.impact-ticker li{font:var(--w-clients) 1.2rem/1 var(--f-clients);letter-spacing:.18em;text-transform:uppercase;color:var(--c-clients);white-space:nowrap;padding:.3rem 2.6rem;margin:.2rem 0}
.impact-tick{overflow:hidden;padding:.4rem 0}
.impact-track{display:flex;width:max-content;will-change:transform}
.impact-track .impact-ticker{flex-wrap:nowrap}
.impact-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem clamp(2.5rem,7vw,5.5rem);width:min(1140px,100% - 2 * var(--wp--custom--side));margin:1.8rem auto 0;padding-top:1.8rem;border-top:1px solid var(--wp--preset--color--line)}
.impact-logos .wp-block-image{margin:0}
.impact-logos img{display:block;width:auto;height:clamp(58px,7vw,84px)}

/* ---------- 7 How we work and the numbers: a dark section; eight principles in a 4 x 2 grid with thin dividers ---------- */
.impact-principles{--rule:color-mix(in srgb,var(--wp--preset--color--base) 22%,transparent);padding-top:7rem}
.impact-principles h2{max-width:34ch;margin-bottom:3.5rem}
/* the sentence sits on the left edge of the 1140 column, with the same gap as the Services description */
.impact-principles .impact-pr-intro{margin:0 auto 3rem calc((100% - min(100%, var(--wp--style--global-wide-size,1140px))) / 2) !important}
.impact-grid8{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:3.5rem 0;padding-top:2.6rem;border-top:1px solid var(--rule)}
.impact-grid8::before{content:'';position:absolute;left:0;top:-2px;width:38px;height:3px;background:var(--wp--preset--color--terracotta)}
.impact-pr{padding:0 1.6rem;border-left:1px solid var(--rule)}
.impact-pr:nth-child(4n+1){padding-left:0;border-left:0}
.impact-pr h3{margin-bottom:.8rem}
.impact-pr p{color:color-mix(in srgb,var(--wp--preset--color--base) 72%,transparent)}
.impact-pr .impact-root{font-size:calc(var(--text-size) * .9);font-style:italic;line-height:1.5;margin-bottom:.9rem}
html.impact-js .impact-principles.impact-anim .impact-pr{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.2s ease}
html.impact-js .impact-principles.in .impact-pr{opacity:1;transform:none;transition-delay:calc(var(--i, 0) * .14s)}
.impact-principles{padding-bottom:7rem}
/* the figures band: a softer ink than the dark sections (one value; owner can compare shades with ?nb=a|b|c|d while logged in) */
.impact-numsband{--nums-bg:#384B57;background:var(--nums-bg);padding-block:4rem 4.5rem}
.impact-nums-title{margin:0 0 2.2rem;font:var(--w-caption) .75rem var(--f-caption);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--wp--preset--color--base) 90%,transparent)}
.impact-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;width:100%}
/* more visible (owner 2026-10-17): figures in the light terracotta of KINI (#EE8A70, about 3.9:1 on this ink; the normal terracotta is too dim here), labels and title brighter */
.impact-numsband .impact-num{color:#EE8A70}
.impact-num{font:var(--w-numbers) 2.6rem/1 var(--f-numbers)}
.impact-num-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--wp--preset--color--base) 92%,transparent)}
@media(max-width:900px){.impact-nums,.impact-grid8{grid-template-columns:repeat(2,1fr)}.impact-pr:nth-child(4n+1){padding-left:1.6rem;border-left:1px solid var(--rule)}.impact-pr:nth-child(2n+1){padding-left:0;border-left:0}}
@media(max-width:520px){.impact-grid8{grid-template-columns:1fr;gap:0}.impact-pr,.impact-pr:nth-child(n){padding:1.4rem 0;border-left:0;border-top:1px solid var(--rule)}.impact-pr:first-child{border-top:0;padding-top:0}.impact-pr h3{margin-bottom:.4rem}}

/* ---------- 8 Projects: story rows (markup: inc/sections.php humakini_projects(); look: Projects settings) ----------
   A photo frame (pinned print, slideshow) beside the words, figures as buttons, a progress line. */
.impact-projects{padding-block:7rem 8rem}
.impact-projects h2{max-width:16ch;margin-bottom:2rem}
.impact-projects .is-style-impact-label{font-size:1.5rem;margin-bottom:2.4rem}
.impact-prow{display:grid;grid-template-columns:minmax(0,min(var(--pj-share),var(--pj-max))) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:3rem 3.5rem;border-top:1px solid var(--wp--preset--color--line)}
.impact-prow:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,min(var(--pj-share),var(--pj-max)))}
.impact-prow:nth-child(even) .impact-photo{order:2;transform:rotate(var(--pj-tilt-even))}
.impact-photo{position:relative;padding:var(--pj-pad) var(--pj-pad) var(--pj-pad-bottom);background:var(--pj-bg);border-radius:var(--pj-radius);box-shadow:var(--pj-shadow);transform:rotate(var(--pj-tilt))}
.impact-photo::before{content:"";display:var(--pj-tape);position:absolute;top:-11px;left:50%;width:92px;height:24px;background:color-mix(in srgb,var(--pj-tape-color) 60%,transparent);transform:translateX(-50%) rotate(-3deg);z-index:3}
.impact-slides{overflow:hidden;aspect-ratio:var(--pj-ratio);border-radius:2px;background:var(--wp--preset--color--teal)}
.impact-slides .wp-block-image{margin:0}
.impact-slides .wp-block-gallery{display:contents}
.impact-slides .wp-block-gallery .wp-block-image{width:100%;margin:0}
.impact-slides img{display:block;width:100%;height:100%;object-fit:cover}
/* with the script the pictures sit side by side and slide; without it (or in the editor) the first shows, the rest are listed below it */
.impact-photo.is-show .impact-slides{display:flex}
.impact-photo.is-show .impact-slide{flex:0 0 100%;height:100%;transition:transform 1s cubic-bezier(.6,.05,.2,1)}
body:not(.editor-styles-wrapper) .impact-photo:not(.is-show) .impact-slide ~ .impact-slide{display:none}
.editor-styles-wrapper .impact-slides{aspect-ratio:auto}
.impact-photo-cap{margin-top:.7rem;font-size:.85rem;color:var(--wp--preset--color--muted)}
.impact-photo-cap:empty{display:none}
.editor-styles-wrapper .impact-photo-cap:empty{display:block;min-height:1.2em;opacity:.5}
.impact-ptext h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.12}
.impact-plead{margin-top:.8rem}
.impact-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.impact-chip{margin:0;font-weight:600;background:var(--wp--preset--color--sand);border-radius:999px;padding:.35rem .9rem}
.impact-chip strong{font-weight:700}
/* the progress line: a thin line, filled up to the dot. Made by the block "Project progress" (inc/progress-block.php; the number is a field in the editor). Old pages still have it as a group whose first paragraph is the number (hidden on the page, shown in the editor): kept working. */
.impact-prog{box-sizing:border-box;position:relative;display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem;padding-top:.8rem;font-size:.82rem;color:var(--wp--preset--color--muted)}
.impact-prog::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:color-mix(in srgb,var(--wp--preset--color--ink) 28%,transparent)}
.impact-prog::after{content:'';position:absolute;left:0;top:-5px;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:var(--wp--preset--color--terracotta)}
.impact-prog.has-pct::before{background:linear-gradient(to right,var(--wp--preset--color--ink) var(--p),color-mix(in srgb,var(--wp--preset--color--ink) 28%,transparent) var(--p))}
.impact-prog.has-pct::after{left:var(--p)}
.impact-prog:not(.has-pct)::after{display:none}
.impact-prog p{margin:0}
.impact-prog-status strong{color:var(--wp--preset--color--ink);font-weight:600}
.impact-prog-pct{display:none}
.editor-styles-wrapper .impact-prog{display:block}
.editor-styles-wrapper .impact-prog::before,.editor-styles-wrapper .impact-prog::after{display:none}
.editor-styles-wrapper .impact-prog-pct{display:block}
.editor-styles-wrapper .impact-prog-pct::before{content:'Progress, 0 to 100: ';opacity:.6}
/* the block's editor view: a number field with a small bar, then the status and the note */
.impact-prog-edit{display:grid;gap:.7rem;margin-top:1.8rem;padding:.8rem 1rem;border:1px dashed color-mix(in srgb,var(--wp--preset--color--ink) 35%,transparent);border-radius:6px;font-size:.82rem}
.impact-prog-edit-field label{display:flex;align-items:center;gap:.6rem;font-weight:600}
.impact-prog-edit-field input{width:5.5rem;padding:.25rem .5rem;font:inherit}
.impact-prog-edit-track{display:block;height:3px;margin-top:.5rem;background:color-mix(in srgb,var(--wp--preset--color--ink) 20%,transparent)}
.impact-prog-edit-track i{display:block;height:100%;background:var(--wp--preset--color--terracotta)}
.impact-prog-edit p{margin:0}
@media(max-width:760px){.impact-prow,.impact-prow:nth-child(even){grid-template-columns:minmax(0,1fr);gap:2rem}.impact-prow:nth-child(even) .impact-photo{order:0}.impact-photo{max-width:var(--pj-max)}}
@media(prefers-reduced-motion:reduce){.impact-photo,.impact-prow:nth-child(even) .impact-photo{transform:none}.impact-photo.is-show .impact-slide{transition:none}}

/* ---------- 9 Start a conversation: last section of every page (parts/start-conversation.html) ----------
   With the script: a dark soil with a soft curve (the same arc as the Opening), the seed on its edge and a small sprout
   (stem, two leaves, a bud) that grows once, in about three seconds (assets/js/sections.js). */
.impact-start{position:relative;min-height:60vh;padding:13vh var(--wp--custom--side) 6rem;text-align:center;overflow:hidden;background:linear-gradient(var(--sv-section-bg,var(--wp--preset--color--base)) 0%,#F3E9D3 55%,#EBD7B0 100%)}
.impact-start h4{font-family:var(--f-end);font-weight:var(--w-end);max-width:22ch;margin-inline:auto;margin-bottom:2.6rem}
.impact-start.has-soil{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:0;padding-bottom:0}
.impact-start.has-soil > *{position:relative;z-index:2}
.impact-start > .impact-soil{--pw:min(clamp(90px,9vw,130px),14vh);position:absolute;z-index:1;left:-20%;width:140%;max-width:none;bottom:0;height:6vh;background:var(--wp--preset--color--ink);border-radius:50% 50% 0 0 / 3vh 3vh 0 0}
@media(max-width:640px){.impact-start > .impact-soil{border-radius:50% 50% 0 0 / 2.5vh 2.5vh 0 0}}
.impact-seed{position:absolute;z-index:3;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#B8472D;box-shadow:0 0 0 10px rgba(184,71,45,.14);opacity:0;transition:opacity 1.6s ease}
.impact-plant{position:absolute;z-index:2;left:50%;bottom:100%;width:var(--pw);transform:translate(-50%,7px);overflow:hidden;pointer-events:none}
.impact-plant .stem{fill:none;stroke:var(--wp--preset--color--ink);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.impact-plant .leaf{fill:var(--wp--preset--color--teal);transform:scale(0);transform-box:fill-box}
.impact-plant .leaf.l{transform-origin:100% 100%}
.impact-plant .leaf.r{transform-origin:0 100%}
.impact-plant .vein{fill:none;stroke:#fff;stroke-opacity:.45;stroke-width:1.4;stroke-linecap:round}
.impact-plant .bud{fill:var(--wp--preset--color--terracotta);transform:scale(0);transform-box:fill-box;transform-origin:50% 100%}
.impact-start.in .impact-seed{opacity:1}
.impact-start.in .impact-plant .stem{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1) .6s}
.impact-start.in .impact-plant .leaf,.impact-start.in .impact-plant .bud{transform:scale(1);transition:transform 1s cubic-bezier(.3,1.3,.5,1)}
.impact-start.in .impact-plant .l1{transition-delay:1.5s}
.impact-start.in .impact-plant .r1{transition-delay:1.75s}
.impact-start.in .impact-plant .bud{transition-delay:2.2s}
@media(prefers-reduced-motion:reduce){.impact-seed,.impact-plant .stem,.impact-plant .leaf,.impact-plant .bud{transition:none !important}}
/* actions: pill buttons with an icon (WhatsApp, email) in the text color. Class on the button block: impact-btn-wa, impact-btn-mail */
.impact-actions{gap:1rem 1.1rem}
.impact-btn-wa .wp-block-button__link,.impact-btn-mail .wp-block-button__link{display:inline-flex;align-items:center;gap:.65rem;padding:.85rem 1.6rem .85rem 1.35rem}
.impact-btn-wa .wp-block-button__link::before,.impact-btn-mail .wp-block-button__link::before{content:'';flex:none;width:1.3rem;height:1.3rem;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.impact-btn-wa{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zM8.6 7.4c.3-.3.8-.3 1 .1l.8 1.7c.1.3 0 .5-.2.7l-.5.5c.5 1.1 1.4 2 2.5 2.5l.5-.5c.2-.2.5-.3.7-.2l1.7.8c.4.2.4.7.1 1-.7.8-1.7 1-2.7.7-2.6-.9-4.4-2.6-5.2-5.1-.3-1 0-1.9.8-2.7z'/%3E%3C/svg%3E")}
.impact-btn-mail{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6.5L20.5 7'/%3E%3C/svg%3E")}

/* ---------- 10 Services page, layout B (markup: inc/sections.php humakini_services_list_page()) ----------
   The first four cards are big, two across, with bullets; the last three are the same card, smaller, three across. */
.impact-svcpage{padding-top:9rem;padding-bottom:7rem}
.impact-svcpage .impact-cards-big,.impact-svcpage .impact-cards-sm{display:grid;gap:var(--sv-card-gap)}
.impact-svcpage .impact-cards-big{grid-template-columns:repeat(2,minmax(0,1fr))}
.impact-svcpage .impact-cards-sm{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--sv-card-gap)}
.impact-svcpage .impact-cards-big .impact-svc{padding:calc(var(--sv-pad) * 1.3)}
.impact-svc-list{list-style:none;margin:1.1rem 0 0;padding:0}
.impact-svc-list li{position:relative;padding:.45rem 0 .45rem 1.3rem;border-top:1px solid color-mix(in srgb,var(--sv-text-color) 20%,transparent);font-family:var(--f-text);font-size:calc(var(--text-size) * .86);line-height:1.45;color:var(--sv-text-color)}
.impact-svc-list li:last-child{border-bottom:1px solid color-mix(in srgb,var(--sv-text-color) 20%,transparent)}
.impact-svc-list li::before{content:"";position:absolute;left:0;top:1rem;width:7px;height:7px;border-radius:50%;background:var(--wp--preset--color--marigold)}
@media(max-width:860px){.impact-svcpage .impact-cards-big,.impact-svcpage .impact-cards-sm{grid-template-columns:1fr}}

/* ---------- 11 About us page (markup: inc/sections.php humakini_about_page()) ----------
   Three blocks: the text (statement, paragraphs, run-in sub-titles), the people in a dark band, three slow bands in the client names look.
   Sizes come from the same variables as Home and Services (statement = --sv-lede-size, sub-title = --item-size, paragraph = --text-size). */
.impact-aboutpage{padding-top:9rem;padding-bottom:5rem;background:var(--sv-section-bg)}
.impact-aboutpage .impact-lede{margin:0 0 var(--gap-h)}
.impact-aboutpage p,.impact-people p{max-width:62ch;font-family:var(--f-text);font-size:var(--text-size);line-height:1.5;margin:0 0 1.2rem}
.impact-aboutpage p{color:var(--sv-text-color)}
.impact-aboutpage h3{font-size:var(--item-size);line-height:1.3;margin:2rem 0 .35rem;color:var(--sv-title-color)}
.impact-about-team{margin-top:2.4rem}
.impact-about-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin-top:2rem}
.impact-about-point{border-top:1px solid var(--wp--preset--color--line);padding-top:1.6rem}
.impact-aboutpage .impact-about-point h3{margin:0 0 .5rem}
.impact-aboutpage .impact-about-point p{margin:0}
.impact-aboutpage .impact-about-point p{max-width:none}
@media(max-width:760px){.impact-about-points{grid-template-columns:1fr;gap:1.5rem}}
/* closing sentence: starts at 1.4 rem in the statement font; the editor's Font size control on this paragraph overrides it */
.impact-aboutpage .impact-about-close{margin-top:3rem;color:var(--sv-lede-color);font-family:var(--f-lead);font-weight:var(--w-lead);font-size:var(--close,1.4rem);line-height:1.3;max-width:40ch}
.impact-people{padding-block:4rem}
.impact-about-person{background:color-mix(in srgb,var(--wp--preset--color--base) 8%,var(--wp--preset--color--ink));border:1px solid color-mix(in srgb,var(--wp--preset--color--base) 14%,transparent);border-radius:18px;padding:1.8rem 2rem;margin-bottom:1rem}
.impact-people h3.wp-block-heading{font-family:var(--f-lead);font-weight:var(--w-lead);font-size:calc(var(--sv-lede-size) * var(--sv-scale) * .8);line-height:1.2;margin:0 0 .6rem;color:var(--wp--preset--color--marigold)}
.impact-people .impact-about-person p{margin:0;max-width:60ch}
.impact-sectors{padding-block:3rem;background:var(--wp--preset--color--sand);border-block:1.5px solid var(--wp--preset--color--line)}
.impact-band{overflow:hidden;padding-block:1.1rem;border-block:1px solid var(--wp--preset--color--line)}
.impact-band + .impact-band{margin-top:.9rem}
.impact-band-list{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0 var(--wp--custom--side)}
.impact-band-list li{font:var(--w-clients) 1.2rem/1 var(--f-clients);letter-spacing:.18em;text-transform:uppercase;color:var(--c-clients);white-space:nowrap;padding:.3rem 0;margin:.15rem 0}
.impact-band-list li::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--marigold);margin-inline:2rem;vertical-align:middle}
.impact-band-list li strong{font-weight:inherit;color:var(--wp--preset--color--terracotta)}
/* script on and motion allowed: one strip that moves slowly and stops under the mouse; otherwise the names simply wrap */
.impact-band.impact-run{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.impact-btrack{display:flex;width:max-content;animation:impact-band var(--dur,110s) linear infinite}
.impact-band.rev .impact-btrack{animation-direction:reverse}
.impact-band:hover .impact-btrack,.impact-band:focus-within .impact-btrack{animation-play-state:paused}
.impact-run .impact-band-list{flex-wrap:nowrap;justify-content:flex-start;padding:0}
@keyframes impact-band{to{transform:translateX(-50%)}}