/* ========================================================================== VyroPlus — shared design system (DESIGN.md §0–§6) Owned by the foundation agent. Page CSS (css/.css) may EXTEND these classes; it never renames them and never adds ad-hoc text colours. ========================================================================== */ /* ---------- 1. Tokens (§2 + §0.3) ---------- */ :root{ /* Brand board (do not alter) */ --brand-white:#FDFDFD; --brand-light:#8BC53F; --brand-mid:#6D9B31; --brand-deep:#3B541A; --brand-black:#000000; /* Surfaces */ --white:#FDFDFD; --card:#FFFFFF; --paper:#F4F6F0; --tint:#EEF6E2; --tint-2:#E2EFCB; --green-surface:#3B541A; --ink:#000000; --ink-soft:#0D110B; /* Dark opening act (§0.3) */ --ink-0:#050B06; --ink-1:#0A150C; --ink-2:#10200F; --hero-grad:radial-gradient(90% 70% at 80% 10%,rgba(139,197,63,.28),transparent 60%),radial-gradient(60% 50% at 15% 80%,rgba(109,155,49,.22),transparent 65%),linear-gradient(180deg,#0A150C 0%,#050B06 100%); /* Text */ --text:#000000; --text-2:#3A3F35; --text-3:#6B7164; --text-green:#3B541A; --text-on-dark:#FDFDFD; --text-2-on-dark:#C9CFC2; --text-3-on-dark:#B5BCAD; --green-on-dark:#8BC53F; --green-on-deep:#C9E59F; --error:#9B1C1C; --error-on-dark:#FFB4B4; /* Accents */ --g1:#8BC53F; --g2:#6D9B31; --g3:#3B541A; --g1-hover:#97D14A; /* Borders */ --line:#E3E8DC; --line-strong:#CFDCBB; --line-on-dark:#262A22; --line-green-on-dark:rgba(139,197,63,.22); --line-field:#8C9384; /* form-field outline: 3.2:1 on white (WCAG 1.4.11); hairlines stay on --line */ /* Gradients */ --grad-cta:linear-gradient(135deg,#8BC53F 0%,#6D9B31 100%); --grad-glow:radial-gradient(120% 90% at 100% 0%,var(--tint),transparent 60%); --grad-glow-dark:radial-gradient(120% 90% at 100% 0%,rgba(139,197,63,.22),transparent 60%); --grad-hero-fallback:radial-gradient(60% 50% at 78% 18%,rgba(139,197,63,.22),transparent 70%),radial-gradient(45% 40% at 18% 75%,rgba(109,155,49,.14),transparent 70%),radial-gradient(50% 35% at 60% 100%,rgba(59,84,26,.10),transparent 70%); --hatch:repeating-linear-gradient(135deg,var(--g1) 0 6px,#fff 6px 10px); /* Type scale */ --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --fs-display:clamp(2.6rem,6vw,4.75rem); --fs-h1:clamp(2.3rem,4.8vw,3.6rem); --fs-h2:clamp(1.9rem,3.6vw,2.9rem); --fs-h3:1.2rem; --fs-h4:1.02rem; --fs-lead:clamp(1.05rem,1.4vw,1.25rem); --fs-body:1rem; --fs-small:.92rem; --fs-caption:.85rem; --fs-eyebrow:.78rem; --fs-tag:.72rem; --fs-big:clamp(2.2rem,3.6vw,3.2rem); --fs-numeral:clamp(2.8rem,4.5vw,4rem); --lh-tight:1.05; --lh-heading:1.12; --lh-body:1.6; --lh-lead:1.55; --ls-display:-.035em; --ls-heading:-.02em; --ls-h3:-.01em; --ls-eyebrow:.14em; --ls-tag:.1em; /* Spacing */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --gap:14px; --section:clamp(56px,8vw,104px); --section-tight:clamp(40px,6vw,72px); --cell-pad:clamp(22px,3vw,40px); --card-pad:26px; /* Radii */ --r-lg:28px; --r-md:20px; --r-sm:14px; --r-xs:8px; --r-drop:6px; --r-pill:999px; /* Shadows */ --shadow-card:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(59,84,26,.18); --shadow-lift:0 2px 4px rgba(0,0,0,.05),0 22px 44px -20px rgba(59,84,26,.28); --shadow-menu:0 8px 24px -8px rgba(0,0,0,.18); --shadow-btn:0 10px 24px -10px rgba(139,197,63,.7); --shadow-focus:0 0 0 4px rgba(109,155,49,.28); /* Motion */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-soft:cubic-bezier(.4,0,.2,1); --ease-spring:cubic-bezier(.16,1,.3,1); --t-fast:180ms; --t-base:320ms; --t-slow:700ms; --t-draw:2200ms; --t-line:1400ms; --stagger:80ms; /* Containers */ --w:1200px; --w-narrow:68ch; --w-form:760px; --gutter:clamp(16px,4vw,40px); --header-h:76px; /* Z layers */ --z-bg:-1; --z-base:0; --z-raised:1; --z-sticky:20; --z-header:50; --z-menu:60; --z-skip:100; } @media (max-width:640px){:root{--gap:12px;--card-pad:20px}} /* ---------- 2. Base + typography (§3) ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-synthesis:none} body{margin:0;background:var(--white);color:var(--text-2);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:450;overflow-x:hidden} img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit} p{margin:0} ul,ol{margin:0;padding:0} address{font-style:normal} h1,h2,h3,h4{color:var(--text);margin:0;font-weight:800;line-height:var(--lh-heading);letter-spacing:var(--ls-heading);overflow-wrap:break-word} h1{font-size:var(--fs-h1);letter-spacing:-.03em;line-height:1.08;max-width:16ch;text-wrap:balance} h2{font-size:var(--fs-h2);max-width:18ch;text-wrap:balance} h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--ls-h3);line-height:1.25} h4{font-size:var(--fs-h4);font-weight:700;line-height:1.3} .lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-2);max-width:56ch;font-weight:450} .caption,.note{font-size:var(--fs-caption);line-height:1.5;color:var(--text-3);font-weight:500} .small{font-size:var(--fs-small)} .accent-italic{font-style:italic;font-weight:600} .wrap-narrow p,.wrap-narrow li{max-width:68ch} ::selection{background:var(--tint-2);color:var(--text)} /* Eyebrow + leaf-dot (§5.4) */ .eyebrow{display:inline-flex;align-items:flex-start;gap:.5rem;margin:0;line-height:1.45;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-green);max-width:none;text-wrap:initial} .eyebrow::before{content:"";flex:none;margin-top:.3em;width:10px;height:10px;border-radius:50% 50% 50% 0;background:var(--g1);transform:rotate(-45deg)} .eyebrow--rule::before{width:22px;height:2px;border-radius:2px;transform:none;margin-top:.55em;background:currentColor;opacity:.75} @media (max-width:430px){.eyebrow{font-size:.7rem}.eyebrow-x{display:none}} /* .eyebrow-x: the optional tail of an eyebrow ("…, Northern Cape") that would orphan on phones */ /* Accent word in h1 (§5.4) */ h1 .accent{font-style:normal;color:var(--text-green);position:relative;z-index:0;white-space:nowrap;isolation:isolate} h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.16em;background:var(--g1);border-radius:999px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:underline .9s var(--ease-out) .55s forwards} @keyframes underline{to{transform:scaleX(1)}} /* Tag / chip */ .tag{display:inline-block;font-size:var(--fs-tag);font-weight:700;letter-spacing:var(--ls-tag);text-transform:uppercase;line-height:1;color:var(--text-green);background:var(--tint);padding:.42rem .65rem;border-radius:var(--r-pill);white-space:nowrap} .chips{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem} .chips li{font-size:.74rem;font-weight:700;padding:.3rem .55rem;border-radius:var(--r-pill);background:var(--tint);color:var(--text-green)} /* Hollow numeral (§3) */ .numeral{font-size:var(--fs-numeral);font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(139,197,63,.75)} /* On the black bands the numeral is filled with the band colour and painted OVER a double-width stroke: the fill hides the inner half of the stroke together with the variable font's overlapping inner contours (boxes in the 4, a tick in the 1), so the visible outline is still 1.5px. */ .section.ink .numeral{color:var(--ink);-webkit-text-stroke-width:3px;paint-order:stroke fill} /* ---------- 3. Global scaffolding (§5.0) ---------- */ .skip{position:absolute;left:-999px;top:12px;z-index:var(--z-skip);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-pill);font-weight:700} .skip:focus{left:12px} :focus-visible{outline:3px solid var(--g2);outline-offset:3px;border-radius:6px} .hero.dark :focus-visible,.cell--black :focus-visible,.band :focus-visible,.footer :focus-visible,.section.ink :focus-visible,.header:not(.scrolled) :focus-visible{outline-color:var(--g1)} /* …but the header is LIGHT without JS and while html.deep pre-lights it: keep the darker ring there (--g1 is 2.1:1 on white) */ html:not(.js) .header :focus-visible,html.deep .header :focus-visible{outline-color:var(--g2)} .vp-sprite{position:absolute;width:0;height:0;overflow:hidden} /* Dark surfaces: text tokens only (§0.3) */ .hero.dark,.cell--black,.band,.footer,.section.ink{color:var(--text-2-on-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .hero.dark h1,.hero.dark h2,.hero.dark h3,.cell--black h2,.cell--black h3,.band h2,.band h3,.footer h2,.footer h3,.section.ink h2,.section.ink h3{color:var(--text-on-dark)} .hero.dark .eyebrow,.cell--black .eyebrow,.band .eyebrow,.footer .eyebrow,.section.ink .eyebrow{color:var(--green-on-dark)} .hero.dark .lead,.section.ink .lead,.cell--black .lead,.band .lead{color:var(--text-2-on-dark)} .hero.dark .caption,.hero.dark .note,.section.ink .caption,.cell--black .caption{color:var(--text-3-on-dark)} .hero.dark h1 .accent,.section.ink h1 .accent{color:var(--green-on-dark)} .hero.dark h1 .accent::after{opacity:.35} .hero.dark .tag,.cell--black .tag,.section.ink .tag{color:var(--green-on-dark);background:rgba(139,197,63,.12);border:1px solid var(--line-green-on-dark)} /* ---------- 4. Layout (§4) ---------- */ .wrap{width:min(var(--w),100% - 2*var(--gutter));margin-inline:auto} .wrap-narrow{max-width:var(--w-narrow)} .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)} .cell{position:relative;isolation:isolate;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-lg);padding:var(--cell-pad);overflow:hidden} .cell--white{background:var(--card)} .cell--green{background:var(--green-surface);border-color:var(--green-surface);color:var(--green-on-deep)} .cell--green h2,.cell--green h3,.cell--green p,.cell--green .big{color:#fff} .cell--green .eyebrow{color:var(--green-on-deep)} .cell--black{background:var(--ink);border-color:var(--ink)} .cell--clear{border:0;background:transparent;overflow:visible;padding:0} /* Dark-glass cell for cells that sit inside a dark band (Services rings cell); same surface as the dark compass card */ .cell--glass{background:rgba(255,255,255,.06);border-color:var(--line-green-on-dark);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);color:var(--text-2-on-dark)} .cell--glass h2,.cell--glass h3{color:var(--text-on-dark)} .cell--glass .legend{color:var(--text-2-on-dark);border-top-color:rgba(255,255,255,.1)} .drop{border-top-right-radius:var(--r-drop)!important} .cell-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .cell-title{font-size:1.05rem;font-weight:700;letter-spacing:var(--ls-h3);line-height:1.3;max-width:none} .section{padding:var(--section) 0} .section--tight{padding:var(--section-tight) 0} .section.paper{background:var(--paper)} .section.ink{background:var(--ink);position:relative;isolation:isolate;overflow:hidden} .section.ink.no-clip{overflow:visible} /* for bands with a sticky child and no watermark to clip (About appointment band) */ .sec-head{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(28px,4vw,48px)} .sec-head h2{margin-top:.75rem} .sec-head .lead{font-size:1.05rem} @media (max-width:860px){.sec-head{grid-template-columns:1fr;gap:1rem}} /* ---------- 5.1 Header: transparent over the dark hero → light glass (§0.2) ---------- */ .header{position:sticky;top:0;z-index:var(--z-header);margin-bottom:calc(-1 * var(--header-h));background:transparent;border-bottom:1px solid transparent;color:var(--text-on-dark);transition:background-color var(--t-base) var(--ease-soft),border-color var(--t-base) var(--ease-soft),color var(--t-base) var(--ease-soft)} /* html.deep: set by the inline head script on a #fragment landing so the very first paint is already the glass header (the page lands scrolled). .no-trans: on until main.js has synced the real scroll state, so that sync never cross-fades. */ .header.no-trans,.header.no-trans *{transition:none!important} .header.scrolled,html:not(.js) .header,html.deep .header{background:rgba(253,253,253,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:var(--line);color:var(--text)} .header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:1rem} .brand{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;color:inherit;flex:none} .brand .mark{height:40px;width:auto;flex:none} .brand .word{height:21px;width:auto;margin-top:6px} .nav{display:flex;align-items:center;gap:.25rem} .nav a{display:inline-flex;align-items:center;padding:.55rem .9rem;border-radius:var(--r-pill);font-weight:600;font-size:.95rem;line-height:1;color:inherit;transition:background-color var(--t-fast),color var(--t-fast)} .nav a:hover{background:rgba(255,255,255,.08)} .nav a[aria-current="page"]{background:rgba(139,197,63,.16);color:var(--green-on-dark)} .header.scrolled .nav a:hover,html:not(.js) .nav a:hover,html.deep .nav a:hover{background:var(--paper)} .header.scrolled .nav a[aria-current="page"],html:not(.js) .nav a[aria-current="page"],html.deep .nav a[aria-current="page"]{background:var(--tint);color:var(--text-green)} .head-cta{display:flex;align-items:center;gap:.75rem} .head-btn{background:var(--g1);color:var(--ink);border-color:transparent} .head-btn:hover{background:var(--g1-hover);box-shadow:var(--shadow-btn);transform:translateY(-1px)} .header.scrolled .head-btn,html:not(.js) .head-btn,html.deep .head-btn{background:var(--ink);color:#fff;box-shadow:none} .header.scrolled .head-btn:hover,html:not(.js) .head-btn:hover,html.deep .head-btn:hover{background:var(--ink-soft)} .burger{display:none;width:48px;height:48px;flex:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);border-radius:var(--r-sm);cursor:pointer;place-items:center;align-content:center;padding:0;transition:background-color var(--t-base),border-color var(--t-base)} .header.scrolled .burger,html:not(.js) .burger,html.deep .burger{border-color:var(--line);background:#fff} .burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast)} .burger span+span{margin-top:5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav .nav-cta{display:none} @media (max-width:860px){ .nav{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 8px);z-index:var(--z-menu);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:.5rem;flex-direction:column;align-items:stretch;gap:.15rem;box-shadow:var(--shadow-menu)} .nav.open{display:flex} .nav a{min-height:48px;padding:.85rem 1rem;font-size:1.05rem;border-radius:var(--r-sm)} .nav a:hover,.header.scrolled .nav a:hover{background:var(--paper)} .nav a[aria-current="page"],.header.scrolled .nav a[aria-current="page"]{background:var(--tint);color:var(--text-green)} .nav .nav-cta{display:inline-flex;margin:.35rem .25rem .25rem;justify-content:center;background:var(--g1);color:var(--ink);border-radius:var(--r-pill);font-weight:700;min-height:52px} .nav .nav-cta:hover{background:var(--g1-hover)} .header .nav.open a:focus-visible{outline-color:var(--g2)} /* the menu card is always light, also over the dark hero */ .burger{display:grid} .head-cta .head-btn{display:none} /* Without JavaScript the burger cannot open anything: drop it and lay the links out in the (light) header itself */ html:not(.js) .burger,html:not(.js) .head-cta,html:not(.js) .nav .nav-cta{display:none} html:not(.js) .header{position:static;margin-bottom:0} html:not(.js) .header .wrap{height:auto;min-height:var(--header-h);flex-wrap:wrap;gap:0 1rem;padding-block:.75rem .6rem} html:not(.js) .nav{display:flex;position:static;flex:1 1 100%;flex-direction:row;flex-wrap:wrap;gap:.15rem;padding:0;border:0;background:transparent;box-shadow:none} html:not(.js) .nav a{padding:.6rem .7rem;font-size:.95rem} } /* ---------- 5.2 Buttons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 1.5rem;border-radius:var(--r-pill);font-weight:700;font-size:.98rem;letter-spacing:-.005em;line-height:1;border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--t-base) var(--ease-out),background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-base)} .btn .ic{width:20px;height:20px;flex:none;transition:transform var(--t-base) var(--ease-out)} .btn:hover .ic{transform:translateX(4px)} .btn-primary{background:var(--g1);color:var(--ink)} .btn-primary:hover{background:var(--g1-hover);box-shadow:var(--shadow-btn);transform:translateY(-1px)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--ink-soft)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff} .btn-ghost.on-dark{color:var(--text-on-dark);border-color:var(--text-on-dark)} .btn-ghost.on-dark:hover{background:var(--text-on-dark);color:var(--ink)} .btn-light{background:#fff;color:var(--ink)} .btn-light:hover{background:var(--g1)} .btn-sm{min-height:44px;padding:.6rem 1.15rem;font-size:.9rem} .btn[disabled],.btn.is-sending{opacity:.6;cursor:progress;pointer-events:none} .btn .spinner{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite} .btn.is-sending .spinner{display:inline-block} .btn.is-sending .ic{display:none} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- 5.3 Cards + tiles ---------- */ .card{position:relative;isolation:isolate;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--card-pad);overflow:hidden;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)} .card::before{content:"";position:absolute;inset:0;background:var(--grad-glow);opacity:0;transition:opacity var(--t-base);pointer-events:none;z-index:-1} .card:hover,.card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-strong)} .card:hover::before,.card:focus-within::before{opacity:1} .stretched::after{content:"";position:absolute;inset:0;z-index:1} .tile{width:52px;height:52px;flex:none;border-radius:var(--r-sm);border-top-right-radius:var(--r-drop);background:var(--tint);color:var(--text-green);display:grid;place-items:center;transition:background-color var(--t-fast),color var(--t-fast)} .tile svg{width:24px;height:24px} .card:hover .tile,.svc:hover .tile{background:var(--g1);color:var(--ink)} /* ---------- 5.5 Trust devices ---------- */ .b-fsp{display:flex;flex-direction:column;justify-content:space-between;gap:.75rem} .fsp-num{font-size:var(--fs-big);font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1} .fsp-num small{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-green);margin-bottom:.5rem} .fsp-reg{font-size:.92rem;font-weight:600;color:var(--text);margin-top:.45rem} .b-fsp .caption{margin-top:.1rem} .fsp-loc{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-small);font-weight:600;color:var(--text)} .fsp-loc svg{width:18px;height:18px;color:var(--g2);flex:none} .reg-block{display:grid;gap:1.4rem} .reg-block .reg-rows{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .reg-block .reg-k{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3-on-dark)} .reg-block .reg-k svg{width:18px;height:18px;color:var(--green-on-dark)} .reg-block .reg-v{font-size:var(--fs-big);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text-on-dark);margin-top:.5rem;overflow-wrap:anywhere} .reg-block .reg-addr{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line-on-dark)} .reg-block .reg-addr h3{font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-dark);margin-bottom:.5rem} .reg-block .reg-addr address{color:var(--text-2-on-dark);line-height:1.6} .reg-block .reg-line{font-size:.9rem;line-height:1.6;color:var(--text-3-on-dark)} .reg-block .reg-line strong{color:var(--text-on-dark);font-weight:600} @media (max-width:560px){.reg-block .reg-rows,.reg-block .reg-addr{grid-template-columns:1fr}} .trust{border-block:1px solid var(--line);background:var(--card)} .trust .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .trust-item{display:flex;align-items:center;gap:.9rem;padding:1.1rem 0;font-weight:600;font-size:var(--fs-small);color:var(--text)} .trust-item+.trust-item{border-left:1px solid var(--line);padding-left:1.5rem} .trust-item .ico{flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--tint);display:grid;place-items:center;color:var(--text-green)} .trust-item .ico svg{width:22px;height:22px} .trust-item small{display:block;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)} @media (max-width:860px){ .trust .wrap{grid-template-columns:1fr;gap:0} .trust-item{padding:.9rem 0} .trust-item+.trust-item{border-left:0;border-top:1px solid var(--line);padding-left:0} } /* ---------- 5.6 Compass card (light base + dark-glass variant §0.1) ---------- */ .compass{position:relative;isolation:isolate;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:28px} .compass-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px} .compass-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .compass-tile{padding:16px;border-radius:var(--r-sm);background:var(--paper);border:1px solid transparent;transition:border-color var(--t-fast),background-color var(--t-fast)} .compass-tile h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.6rem;letter-spacing:0} .compass-tile h3 i{width:10px;height:10px;flex:none;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--g1)} .compass-tile ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column} .compass-tile li a{display:flex;align-items:center;min-height:32px;font-size:.92rem;font-weight:500;color:var(--text-2);transition:color var(--t-fast)} .compass-tile li a:hover{color:var(--text-green)} .compass-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;font-weight:500;color:var(--text-3);display:flex;justify-content:space-between;gap:12px;align-items:center} .compass-foot a{color:var(--text-green);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;margin:-.6rem 0} /* 44px hit area, foot rhythm unchanged */ /* Touch widths / touch devices: the eight service links are the first tappable things after the hero, so ≥ 44px (BRIEF §4) */ @media (max-width:980px),(hover:none) and (pointer:coarse){.compass-tile li a{min-height:44px}} .hero.dark .compass{background:rgba(255,255,255,.06);border-color:var(--line-green-on-dark);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)} .hero.dark .compass-tile{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.06)} .hero.dark .compass-tile:hover{border-color:var(--line-green-on-dark)} .hero.dark .compass-tile h3{color:var(--text-on-dark)} .hero.dark .compass-tile li a{color:var(--text-2-on-dark)} .hero.dark .compass-tile li a:hover{color:var(--green-on-dark)} .hero.dark .compass-foot{border-top-color:rgba(255,255,255,.1);color:var(--text-3-on-dark)} .hero.dark .compass-foot a{color:var(--green-on-dark)} /* Load-time stagger: card, then tiles (900ms + 80ms steps). JS-only; visible without JS. */ .js .compass{opacity:0;transform:translateY(24px);animation:rise var(--t-slow) var(--ease-out) 240ms forwards} .js .compass-tile{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)} .js .compass.is-live .compass-tile{opacity:1;transform:none;transition-delay:calc(900ms + var(--i,0) * var(--stagger))} @media (max-width:640px){.compass{padding:22px}} @media (max-width:480px){.compass-grid{grid-template-columns:1fr}.compass-head{flex-wrap:wrap}.compass-foot{flex-direction:column;align-items:flex-start}} /* ---------- 5.7 Service card ---------- */ .services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);perspective:900px} .svc{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.9rem;padding:var(--card-pad);min-height:270px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transform:translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-spring),box-shadow var(--t-base),border-color var(--t-base)} .svc::before{content:"";position:absolute;inset:0;background:var(--grad-glow);opacity:0;transition:opacity var(--t-base);pointer-events:none;z-index:-1} .svc::after{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),var(--tint),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1} .svc:hover,.svc:focus-within{--ty:-4px;box-shadow:var(--shadow-card);border-color:var(--line-strong)} .svc:hover::before,.svc:focus-within::before,.svc:hover::after{opacity:1} .svc.is-tilting{transition:transform .08s linear,box-shadow var(--t-base),border-color var(--t-base)} .svc .svc-cat{font-size:var(--fs-tag);font-weight:700;letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--text-green);line-height:1} .svc .num{position:absolute;top:var(--card-pad);right:var(--card-pad);line-height:1;font-size:var(--fs-tag);font-weight:700;letter-spacing:.1em;color:var(--text-3)} .svc h3{font-size:1.15rem} .svc h3 a{color:inherit} .svc p{font-size:var(--fs-small);color:var(--text-2);line-height:1.55;flex:1} .svc .more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;color:var(--text-green)} .svc .more svg{width:18px;height:18px;transition:transform var(--t-base) var(--ease-out)} .svc:hover .more svg{transform:translateX(4px)} .svc-foot{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between} @media (max-width:1100px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Phones: one column, and the icon tile moves beside the category + title so eight cards are ~25 % shorter to scroll */ @media (max-width:520px){ .services{grid-template-columns:1fr} .svc{min-height:0;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;align-items:center} .svc .tile{grid-column:1;grid-row:1 / span 2;width:44px;height:44px} .svc .svc-cat{grid-column:2;grid-row:1;align-self:end} .svc h3{grid-column:2;grid-row:2;align-self:start} .svc p{grid-column:1 / -1;margin-top:.55rem} .svc .more{grid-column:1 / -1;margin-top:.25rem} } /* ---------- 5.8 Process steps (black band) ---------- */ .steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0} .steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:30px;height:2px;border-radius:2px;pointer-events:none} .steps::before{background:var(--line-green-on-dark)} .steps::after{background:var(--g1);transform-origin:left;transition:transform var(--t-line) var(--ease-out)} .js .steps:not(.is-in)::after{transform:scaleX(0)} /* initial state gated on .js so the line is drawn without JavaScript */ .step{position:relative;padding-top:64px} .step-node{position:absolute;left:0;top:25px;width:12px;height:12px;border-radius:50%;background:var(--g1);box-shadow:0 0 0 4px rgba(139,197,63,.18);transition:transform .35s var(--ease-spring)} .js .steps:not(.is-in) .step-node{transform:scale(0)} .steps.is-in .step:nth-child(2) .step-node{transition-delay:.15s} .steps.is-in .step:nth-child(3) .step-node{transition-delay:.3s} .steps.is-in .step:nth-child(4) .step-node{transition-delay:.45s} .step .numeral{margin-bottom:.8rem} .step h3{font-size:1.2rem;color:var(--text-on-dark)} .step p{margin-top:.6rem;font-size:.95rem;color:var(--text-2-on-dark);line-height:1.55} @media (max-width:1000px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .steps::before,.steps::after{display:none} } /* 2 × 2 tablet grid: one drawn line per row (each step carries its own segment; the odd step bridges the column gap) so the nodes never float without a line. The About page's .steps--vertical variant keeps its own rail. */ @media (max-width:1000px) and (min-width:561px){ .steps:not(.steps--vertical) .step::before,.steps:not(.steps--vertical) .step::after{content:"";position:absolute;left:0;right:0;top:30px;height:2px;border-radius:2px;pointer-events:none} .steps:not(.steps--vertical) .step:nth-child(odd)::before,.steps:not(.steps--vertical) .step:nth-child(odd)::after{right:-24px} .steps:not(.steps--vertical) .step::before{background:var(--line-green-on-dark)} .steps:not(.steps--vertical) .step::after{background:var(--g1);transform-origin:left;transition:transform var(--t-line) var(--ease-out)} .js .steps:not(.steps--vertical):not(.is-in) .step::after{transform:scaleX(0)} .steps:not(.steps--vertical).is-in .step:nth-child(even)::after{transition-delay:.7s} .steps:not(.steps--vertical).is-in .step:nth-child(2) .step-node{transition-delay:.7s} .steps:not(.steps--vertical).is-in .step:nth-child(3) .step-node{transition-delay:.15s} .steps:not(.steps--vertical).is-in .step:nth-child(4) .step-node{transition-delay:.85s} } @media (max-width:560px){ .steps{grid-template-columns:1fr;gap:8px;padding-left:52px} .steps::before,.steps::after{display:block;left:22px;right:auto;top:0;bottom:0;height:auto;width:2px} .steps::after{transform-origin:top} .js .steps:not(.is-in)::after{transform:scaleY(0)} .step{padding:8px 0 28px} .step-node{left:-35px;top:22px} } /* ---------- 5.9 Life-stage timeline (paper band) ---------- */ .tl-svg{width:100%;height:auto;display:block;margin:0 0 -8px} .tl-svg .path{fill:none;stroke:var(--g2);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))} html:not(.js) .tl-svg .path{stroke-dashoffset:0} html:not(.js) .tl-svg .node{fill:var(--g1)} .tl-svg .ghost{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round} .tl-svg .node{fill:#fff;stroke:var(--g2);stroke-width:3;transition:fill var(--t-base),transform var(--t-base) var(--ease-spring);transform-origin:center;transform-box:fill-box} .tl-svg .node.lit{fill:var(--g1);transform:scale(1.15)} .tl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)} .stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:.6rem;transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)} .stage:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-strong)} .stage .k{font-size:var(--fs-tag);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-green)} .stage h3{font-size:1.05rem} .stage p{font-size:.88rem;line-height:1.5} @media (max-width:860px){ .tl-svg{display:none} .tl-grid{grid-template-columns:1fr;position:relative;padding-left:34px} .tl-grid::before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--line)} .tl-grid::after{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--g2);transform-origin:top;transform:scaleY(var(--p,0))} html:not(.js) .tl-grid::after{transform:none} html:not(.js) .stage::before{background:var(--g1)} .stage{position:relative} .stage::before{content:"";position:absolute;left:-30px;top:22px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--g2);transition:background-color var(--t-base)} .stage.lit::before{background:var(--g1)} } /* ---------- 5.10 Checklist + callout ---------- */ .checks{margin:0;padding:0;list-style:none;display:grid;gap:.8rem} .checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;color:var(--text-2)} .checks li strong{color:var(--text);display:block;font-weight:700} .checks .tick{flex:none;width:26px;height:26px;border-radius:50%;background:var(--g1);color:var(--ink);display:grid;place-items:center;margin-top:.1rem} .checks .tick svg{width:15px;height:15px} .callout{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--g1);border-radius:var(--r-md);padding:clamp(20px,2.5vw,28px);display:grid;gap:.6rem} .callout p{font-size:var(--fs-small);color:var(--text-2)} /* The promise cell is stretched to the checks cell's height: centre the group and let the quote carry the cell rather than pinning the button to the floor with empty paper above it. */ .callout--promise{display:flex;flex-direction:column;justify-content:center;gap:1.25rem} .callout--promise .quote{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600;color:var(--text);line-height:1.35;letter-spacing:-.01em;margin-top:.8rem;max-width:22ch;text-wrap:balance} .callout--promise .support{font-size:var(--fs-small);max-width:44ch} .callout--promise .btn{align-self:flex-start} .why-cell{display:flex;flex-direction:column;gap:1rem;justify-content:center} .why-cell h2{margin-top:-.25rem} /* ---------- 5.11 FAQ accordion ---------- */ .faq{display:grid;gap:.5rem} .faq-item{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);padding:0 1rem} .faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:.7rem 0;font-size:1rem;font-weight:700;color:var(--text);cursor:pointer;list-style:none} .faq-item summary::-webkit-details-marker{display:none} .faq-icon{flex:none;width:24px;height:24px;border-radius:7px;background:var(--tint);color:var(--text-green);display:grid;place-items:center;transition:transform var(--t-base) var(--ease-out)} .faq-icon svg{width:14px;height:14px} .faq-item[open] summary .faq-icon{transform:rotate(45deg)} .faq-body{font-size:.95rem;color:var(--text-2);max-width:62ch;padding:.5rem 0 1rem} .faq-body p+p{margin-top:.5rem} /* ---------- 5.12 Form fields ---------- */ .field{display:grid;gap:.4rem;margin-bottom:1.1rem} .field label{font-size:var(--fs-small);font-weight:600;color:var(--text)} .field .hint{font-size:var(--fs-caption);color:var(--text-3);font-weight:500} .field input,.field select,.field textarea{width:100%;min-height:52px;padding:0 1rem;font:inherit;font-size:1rem;color:var(--text);background:#fff;border:1px solid var(--line-field);border-radius:var(--r-sm);transition:border-color var(--t-fast),box-shadow var(--t-fast)} .field textarea{padding:.9rem 1rem;resize:vertical;min-height:9rem} .field select{appearance:none;-webkit-appearance:none;padding-right:2.8rem;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1rem center} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--g2);box-shadow:var(--shadow-focus)} .field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea,.field [aria-invalid="true"]{border-color:var(--error)} .field-error{font-size:var(--fs-caption);color:var(--error);font-weight:600;min-height:0} .field-error:empty{display:none} .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .form-alert{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--error);border-radius:var(--r-sm);padding:.9rem 1rem;font-size:var(--fs-small);color:var(--error);font-weight:600;margin-bottom:1rem} .form-alert[hidden],.form-success[hidden]{display:none} /* author display values would otherwise beat the UA [hidden] rule */ .form-consent{font-size:var(--fs-caption);color:var(--text-3);font-weight:500;margin:.25rem 0 1.2rem} .form-consent a{color:var(--text-green);font-weight:700;text-decoration:underline;text-underline-offset:2px} .form-success{display:grid;gap:1rem;justify-items:start} .form-success h2{font-size:clamp(1.5rem,2.6vw,2rem)} .form-success .drop-tile{width:64px;height:64px;border-radius:var(--r-sm);border-top-right-radius:var(--r-drop);background:var(--tint);display:grid;place-items:center} .form-success .drop-tile svg{width:34px;height:34px;overflow:visible} .form-success .leaf{fill:var(--g1);transform-origin:50% 60%;animation:leafLand .42s var(--ease-spring) forwards} .form-success .tick{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tickDraw .6s var(--ease-out) .3s forwards} @keyframes leafLand{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}} @keyframes tickDraw{to{stroke-dashoffset:0}} @media (max-width:560px){.form-submit{width:100%}} /* ---------- 5.13 CTA band ---------- */ .cta{padding:0 0 var(--section)} .cta .band{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);border-radius:var(--r-lg);padding:clamp(36px,6vw,72px);display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center} .cta h2{color:var(--text-on-dark);max-width:16ch} .cta .band p{color:var(--text-2-on-dark);max-width:48ch;margin-top:.8rem} .cta .band p a{color:var(--text-on-dark);font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--g1);text-decoration-thickness:2px;text-underline-offset:3px;display:inline-block;padding:.3rem 0} .cta .band p a:hover{color:var(--green-on-dark)} .cta .actions{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;justify-self:end} .cta .grid-lines{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(60% 80% at 80% 50%,#000,transparent);mask-image:radial-gradient(60% 80% at 80% 50%,#000,transparent)} .cta .motif{position:absolute;left:52%;top:-30%;width:34%;opacity:.35;pointer-events:none;z-index:-1;overflow:visible} .cta .motif use{fill:none;stroke:var(--g1);stroke-width:1.1;stroke-linejoin:round} @media (max-width:860px){.cta .band{grid-template-columns:1fr}.cta .actions{justify-self:start;flex-direction:row;flex-wrap:wrap}.cta .motif{display:none}} /* ---------- 5.14 Footer ---------- */ .footer{background:var(--ink);padding:clamp(40px,6vw,64px) 0 28px;font-size:.9rem} .footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line-on-dark)} .footer .brand{color:var(--text-on-dark)} .footer .footer-h{color:var(--text-on-dark);font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .9rem;font-weight:700;line-height:1.3} .footer ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem} /* Explore links: 44px hit area (BRIEF §4) with the visual pitch unchanged; on touch widths the rows open to the full 44px so targets never overlap */ .footer ul li a{display:inline-flex;align-items:center;min-height:44px;padding:0 .25rem;margin:-.6rem -.25rem} @media (max-width:900px),(hover:none) and (pointer:coarse){.footer ul{gap:0}.footer ul li a{margin:0 -.25rem}} .footer a{transition:color var(--t-fast)} .footer a:hover{color:var(--green-on-dark)} .footer a[aria-current="page"]{color:var(--green-on-dark)} /* pages without a header nav item (Privacy) mark their footer link */ .footer address{line-height:1.6} /* Contact details (added 18 Sep 2026): office hours under the address, phones + e-mail above the postal address */ .footer .hours{margin:1rem 0 0;line-height:1.6} .footer .hours-k,.footer ul li a .k{color:var(--text-3-on-dark);font-weight:500} .footer ul li a .k{display:inline-block;min-width:3.6rem} .footer .top > div > ul + .footer-h{margin-top:1.6rem} .footer .blurb{display:block;margin-top:1rem;font-size:.9rem;color:var(--text-3-on-dark);max-width:34ch;font-weight:500} .footer .reg{padding-top:1.5rem;font-size:.9rem;line-height:1.6;color:var(--text-3-on-dark);font-weight:500;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end} .footer .reg strong{color:var(--text-on-dark);font-weight:600} .footer .reg .copy{white-space:nowrap;color:var(--text-3-on-dark)} @media (max-width:900px){.footer .top{grid-template-columns:1fr 1fr}} @media (max-width:560px){.footer .top{grid-template-columns:1fr}.footer .reg{grid-template-columns:1fr}} /* ---------- 5.15 Reveal utility ---------- */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)} .js .reveal.is-in{opacity:1;transform:none} .js .svc.reveal.is-in{transform:translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .reveal[data-d="1"]{transition-delay:calc(1 * var(--stagger))} .reveal[data-d="2"]{transition-delay:calc(2 * var(--stagger))} .reveal[data-d="3"]{transition-delay:calc(3 * var(--stagger))} .reveal[data-d="4"]{transition-delay:calc(4 * var(--stagger))} /* ---------- 6.0/6.1 Dark cinematic hero band (§0.1) ---------- */ .hero.dark{position:relative;isolation:isolate;overflow:hidden;background:var(--hero-grad);background-color:var(--ink-0);min-height:min(88svh,920px);display:flex;align-items:center;padding:calc(var(--header-h) + clamp(24px,4vw,48px)) 0 clamp(40px,6vw,72px)} .hero.dark > .wrap{width:min(var(--w),100% - 2*var(--gutter));position:relative;z-index:1} .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-4;pointer-events:none} .hero-leaves{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none} .hero-wm{position:absolute;z-index:-2;right:-6%;top:6%;width:clamp(460px,58vw,900px);height:auto;opacity:.085;pointer-events:none;will-change:transform;overflow:visible} .hero-wm .wm-mid{fill:var(--g2)} .hero-wm .wm-light{fill:var(--g1)} .hero-grain{position:absolute;inset:0;z-index:-1;opacity:.045;pointer-events:none;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,")} .hero-vignette{position:absolute;inset:auto 0 0 0;height:36%;z-index:-1;background:linear-gradient(to top,var(--ink-0),transparent);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:center} .hero-copy{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem} .hero.dark h1{margin:0;color:var(--text-on-dark);letter-spacing:var(--ls-display);line-height:var(--lh-tight);max-width:13ch;text-wrap:balance} .hero.dark.hero--home h1{font-size:var(--fs-display)} .hero.dark h1 .hl{color:var(--green-on-dark)} .hero.dark .lead{max-width:56ch} .hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem} .hero-note{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:var(--fs-caption);color:var(--text-3-on-dark);font-weight:600;margin:0;list-style:none;padding:0} .hero-note li,.hero-note span{display:inline-flex;align-items:center;gap:.4rem} .hero-note svg{width:16px;height:16px;color:var(--g1);flex:none} /* Hero copy reveal: 700ms total, 80ms steps, never later than 320ms (§8) */ .js .hero-copy > :not(.hero-mark){opacity:0;transform:translateY(18px);animation:rise var(--t-slow) var(--ease-out) forwards} .js .hero-copy > :nth-child(2){animation-delay:80ms} .js .hero-copy > :nth-child(3){animation-delay:160ms} .js .hero-copy > :nth-child(4){animation-delay:240ms} .js .hero-copy > :nth-child(5){animation-delay:320ms} .js .hero-copy > :nth-child(n+6){animation-delay:320ms} @keyframes rise{to{opacity:1;transform:none}} /* Compact inner-page band (§0.1). Selectors carry .hero.dark so they outrank the (0,2,0) base band rule above. */ .hero.dark.hero--compact{min-height:clamp(320px,46svh,520px);padding:calc(var(--header-h) + clamp(28px,4vw,48px)) 0 clamp(36px,5vw,56px)} .hero--compact .hero-grid{grid-template-columns:1.1fr .9fr} .hero.dark.hero--compact.hero--slim{min-height:240px} .hero--compact.hero--slim .hero-grid{grid-template-columns:1fr} .hero.dark.hero--compact h1{font-size:var(--fs-h1);max-width:16ch} /* Full-viewport band (404): capped so tall monitors / full-page captures do not stretch it */ .hero.dark.hero--full{min-height:min(100svh,960px)} @media (max-width:980px){ .hero.dark,.hero.dark.hero--compact,.hero.dark.hero--compact.hero--slim{min-height:0;align-items:flex-start} .hero-grid,.hero--compact .hero-grid{grid-template-columns:1fr} .hero-wm{display:none} .hero-aside{max-width:640px;margin-inline:auto;width:100%} /* centred in the band on tablets instead of left-aligned with an empty right third */ /* One column: the copy now spans the brightest part of the aurora (lead fell to ~2.7:1). A soft scrim behind the copy only, under the self-drawing mark (z -1) and above the canvas, restores >= 4.5:1; the canvas engine is untouched. */ .hero--home .hero-copy::before{content:"";position:absolute;z-index:-2;inset:-24px calc(-1 * var(--gutter)) -32px;pointer-events:none;background:linear-gradient(180deg,rgba(5,11,6,0),rgba(5,11,6,.62) 14%,rgba(5,11,6,.62) 90%,rgba(5,11,6,0))} } @media (max-width:430px){.hero-ctas .btn{width:100%}} /* ---------- 6.2 Self-drawing mark (home, services, about, 404) ---------- */ .hero-mark{position:absolute;right:-6%;bottom:-14%;width:min(46%,420px);height:auto;z-index:-1;pointer-events:none;overflow:visible;will-change:transform} .hero-mark use{stroke-linejoin:round;stroke-linecap:round} .hero-mark .f1{fill:var(--g2);opacity:0} .hero-mark .f2{fill:var(--g1);opacity:0} .hero-mark .m1,.hero-mark .m2{fill:none;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;opacity:0} .hero-mark .m1{stroke:var(--g2)} .hero-mark .m2{stroke:var(--g1)} .hero-mark .glow{fill:none;stroke:var(--g1);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;opacity:0} .hero-mark .m1,.hero-mark .glow{animation:markDraw var(--t-draw) var(--ease-io) forwards,markSettle 1.6s linear 2.2s forwards} .hero-mark .m2{animation:markDraw var(--t-draw) var(--ease-io) .35s forwards,markSettle 1.6s linear 2.55s forwards} /* The glow is a soft halo, never a second line: it draws at .14 (at opacity 1 the 5-unit stroke was a ~13px neon band across the hero copy for the whole draw). The light path's glow shares its line's .35s delay. */ .hero-mark .glow{animation-name:markDrawGlow,markGlow} .hero-mark .glow + .glow{animation-delay:.35s,2.55s} .hero-mark .f1,.hero-mark .f2{animation:markFill 1.6s var(--ease-soft) 1.8s forwards} .hero-mark .f2{animation-delay:2.15s} @keyframes markDraw{0%{opacity:.75;stroke-dashoffset:1}100%{opacity:.75;stroke-dashoffset:0}} @keyframes markDrawGlow{0%{opacity:.14;stroke-dashoffset:1}100%{opacity:.14;stroke-dashoffset:0}} @keyframes markSettle{to{opacity:.35}} @keyframes markGlow{to{opacity:.08}} @keyframes markFill{to{opacity:.07}} /* Light-surface variant (fills win, strokes fade out) */ .hero-mark.on-light .m1,.hero-mark.on-light .m2{animation-name:markDraw,markFade} .hero-mark.on-light .glow{display:none} @keyframes markFade{to{opacity:0}} .hero--compact .hero-mark{width:min(38%,360px);right:2%;bottom:auto;top:50%;transform:translateY(-50%)} @media (max-width:980px){ .hero-mark,.hero--compact .hero-mark{width:52vw;right:-14%;bottom:-10%;top:auto;transform:none} /* Compact bands are short, so here the mark ends up behind the lead paragraph: the strokes draw once, softly, and fade right out, leaving only the 7% fill (§6.2: on phones it never competes with text). */ .hero--compact .hero-mark .m1,.hero--compact .hero-mark .m2{animation-name:markDrawSoft,markFade} .hero--compact .hero-mark .glow{display:none} } @keyframes markDrawSoft{0%{opacity:.4;stroke-dashoffset:1}100%{opacity:.4;stroke-dashoffset:0}} /* ---------- 6.3 Infographics ---------- */ .gapbars{display:grid;gap:.7rem} .gapbar{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:.75rem;font-size:.82rem;font-weight:600;color:var(--text-2)} /* 132px keeps "Family would need" on one line */ .gapbar .track{height:18px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);overflow:hidden;position:relative} .gapbar .fill{height:100%;border-radius:var(--r-pill);transition:width 1.2s var(--ease-out)} .gapbar.need .fill{background:var(--ink);width:100%} .gapbar.have .fill{background:var(--g2);transition-delay:.2s;width:58%} .gapbar.gap .fill{background:var(--hatch);transition-delay:.4s;width:42%;margin-left:58%} .js [data-anim]:not(.is-in) .gapbar .fill{width:0} /* initial state gated on .js: bars are full without JavaScript */ @media (max-width:640px){.gapbar{grid-template-columns:96px 1fr;font-size:.78rem}} .rings{display:grid;place-items:center;flex:1} .rings svg{width:min(100%,256px);height:auto} .ring{fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:var(--c);stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out)} .js [data-anim]:not(.is-in) .ring{stroke-dashoffset:var(--c)} /* initial state gated on .js: rings are full without JavaScript */ .ring-track{fill:none;stroke:#fff;stroke-width:14} .hero.dark .ring-track,.cell--glass .ring-track{stroke:rgba(255,255,255,.08)} .ring-doc{stroke:var(--ink)} .hero.dark .ring-doc,.cell--glass .ring-doc{stroke:var(--text-on-dark)} .hero.dark .ring.k-life,.cell--glass .ring.k-life{stroke:var(--text-2-on-dark)} /* softer than pure white so the outer ring reads as one of four layers, not a plate */ .is-in .ring:nth-child(2){transition-delay:.1s} .is-in .ring:nth-child(4){transition-delay:.25s} .is-in .ring:nth-child(6){transition-delay:.4s} .is-in .ring:nth-child(8){transition-delay:.55s} .legend{font-size:.82rem;font-weight:600;color:var(--text-2)} .hero.dark .legend{color:var(--text-2-on-dark)} .legend ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem} /* the grid lives on the