@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/Manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/Manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/Montserrat-wordmark.woff2) format("woff2")}

/* Family Konnect website, October 2026 mockups: the shared shell.
   Tokens from fk-design-system.html (the FK palette). 13 Oct: Plus Jakarta Sans, Joel's choice from the font study; the
   text sizes are scaled for its larger small letters (the study's 0.935), and the word gaps opened a little.
   Single look by design: the website looks the same whatever the viewer's theme.
   11 Oct (late, Joel's review): button radius 20px; the header logo is the crane beside live text, as in the email
   signature; a Services mega menu; the partner logo line centred and larger.
   13 Oct (round 5, Joel's review of round 3): at phone width a hamburger icon, the dark green phone bar at the very top,
   a compact intake button beside the hamburger, and a sheet led by the intake button.
   14 Oct (Joel's review of the sixth release on his phone): the bands 64px not 80 (44 not 52 on a phone); the fact strip
   redrawn with an icon tile per fact and teal labels; the band under the strip takes the next section's colour; the
   wordmark set in Montserrat, the lockup's own face, with the lockup's tracking; the header and top bar able to shrink so
   nothing can push a phone page sideways; the body text one pixel smaller at phone width; Contact in the nav.
   14 Oct (later, Joel's go-ahead on the navigation): six words and the intake button, with Services, Who we help and About
   as small menus under their words (the service icon cards kept, the full-width panel and its photo gone); the live site's
   clips as streamed video on more pages; the site's own form controls (a list box, a calendar, a drop zone) in place of
   the system's; long forms one step at a time.
   14 Oct (late, Joel): the lockup's name smaller (15px, 13 on a phone) and closer to the tagline (3px), the tagline unchanged;
   the second nav word is "Who it's for".
   15 Oct (Joel's picks): the second nav word is "Who we work with"; the footer links the Instagram and Facebook accounts
   (LinkedIn for a few hours, then off at Joel's ask); a light scroll reveal on cards, tiles, steps and the fact strip, never
   the hero (.js, .is-in); the icons are served from /icons/, since the Wix host answers /favicon.ico with a blank icon of its
   own. 15 Oct, later (Joel): the button radius 15px; the footer's fifth column, Where we work (the four region pages), and
   the privacy policy in its bottom line; the line the build writes under every form (.form-privacy).
   15 Oct, late (the manager's review, via Joel): the site font is Manrope (the four-font study's pick); the big text smaller on a
   phone (h1 four pixels, h2 two, titles two, subtitles one).
   16 Oct (Joel: the menu bar had empty space at its sides): the header runs the full width of the screen, the logo at the
   left edge and the intake button at the right, the nav centred between them; the page's content keeps its 1240px column.
   Not the floating pill he showed (a bar inside a bar is a shape the site has nowhere else, and a sticky pill shows the
   page through its gaps as it scrolls); the same spread of logo, nav and button, in the site's own plain bar. */
:root{
  --fk-paper:#FBFAF7; --fk-cream:#F5F1E8; --fk-white:#FFFFFF;
  --fk-deep:#244C45; --fk-deeper:#1E4039; --fk-teal:#2F9A8F; --fk-teal-text:#22766D;
  --fk-ink:#333435; --fk-grey:#666768; --fk-line:#E4E1D8; --fk-line-strong:#D7D2C4;
  --fk-teal-pale:#E7F0EE; --fk-on-deep:#FFFFFF; --fk-on-deep-soft:#C8D2D0;
  --fk-logo-grey:#45494A;
  --scrim:rgba(27,58,52,.82);
  --f-sans:"Manrope","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif; /* Manrope since 15 Oct late (Joel, from the four-font study); Plus Jakarta Sans from 13 Oct, Figtree before it */
  --wrap:1240px; --gutter:24px;
  --body:18px; --small:15px; --caption:13px;
  --radius-btn:15px; /* 20px from 11 Oct until 15 Oct, when Joel asked for 15 */
  --ease:cubic-bezier(.2,.6,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--fk-paper);color:var(--fk-ink);font-family:var(--f-sans);font-size:var(--body);line-height:1.6;word-spacing:.05em;-webkit-font-smoothing:antialiased;text-align:left}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance;color:var(--fk-deep)}
p,ul,ol,dl{margin:0}
ul,ol{padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a.inline{color:var(--fk-teal-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a.inline:hover{color:var(--fk-deep)}
:focus-visible{outline:2px solid var(--fk-teal-text);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--fk-white);color:var(--fk-deep);padding:10px 14px;border-radius:8px;font-weight:700;z-index:50}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
/* type scale */
.display-xl{font-size:48px;line-height:1.05;letter-spacing:-.03em}
.display-lg{font-size:38px;line-height:1.1;letter-spacing:-.025em}
.display-md{font-size:30px;line-height:1.15;letter-spacing:-.02em}
.heading{font-size:24px;line-height:1.25;letter-spacing:-.015em}
.small{font-size:var(--small);line-height:1.55}
.caption{font-size:var(--caption);line-height:1.45;color:var(--fk-grey)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fk-teal-text);line-height:1.4}
.on-deep .eyebrow{color:var(--fk-on-deep-soft)}
.lede{font-size:20px;line-height:1.5;color:var(--fk-grey);max-width:62ch}
.measure{max-width:66ch}
.muted{color:var(--fk-grey)}
.num{font-variant-numeric:tabular-nums}
/* bands: two consecutive sections never share a background */
.band{padding-block:64px}
.band--paper{background:var(--fk-paper)}
.band--cream{background:var(--fk-cream)}
.band--deep{background:var(--fk-deep);color:var(--fk-on-deep)}
.band--deep h1,.band--deep h2,.band--deep h3{color:var(--fk-on-deep)}
.band--deep .muted,.band--deep .lede{color:var(--fk-on-deep-soft)}
.band-head{display:grid;gap:12px;max-width:66ch;margin-bottom:32px}
/* a hero's clip (the live site's, streamed from the Wix media CDN; 14 Oct): the first child of the hero section, over the
   photo and under the scrim; the photo stays as the poster and as the picture under reduced motion, data saver or no script.
   The footer script loads a clip only when it is near the screen, 720p on a desktop and 480p on a phone. */
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--video-pos,center 40%)}
@media (prefers-reduced-motion:reduce){.hero-video,.hm-hero-video{display:none}}
/* the band under a hero that holds the fact strip has no padding of its own and takes the colour of the section that
   follows it, so the strip's lower half and that section read as one surface (Joel, 14 Oct); where it also carries a jump
   row it stays paper, with room under the pills before the next band */
.strip-host--jump{padding-bottom:28px}
/* buttons: one primary per screen, teal never carries words; radius 15px (Joel, 15 Oct; 20px before) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--radius-btn);font-size:15px;font-weight:700;letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--fk-deep);color:#fff}
.btn--primary:hover{background:#1B3A34}
.btn--secondary{background:transparent;color:var(--fk-deep);border-color:var(--fk-line-strong)}
.btn--secondary:hover{border-color:var(--fk-deep);background:#F0EDE4}
.btn--quiet{background:transparent;color:var(--fk-teal-text);padding:0 6px;height:auto;border-radius:6px}
.btn--quiet:hover{color:var(--fk-deep);text-decoration:underline;text-underline-offset:3px}
.btn--ondark{background:#fff;color:var(--fk-deep)}
.btn--ondark:hover{background:var(--fk-cream)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--fk-paper);border-bottom:1px solid var(--fk-line)}
.hdr-in{position:relative;padding-inline:clamp(24px,3vw,56px);height:76px;display:flex;align-items:center;gap:20px} /* full width since 16 Oct (max-width:var(--wrap) before): the logo and the button at the edges, the gutter growing with the screen */
/* the logo: the crane as a picture, the words as text, so the name reads at any size (the signature's lockup) */
.hdr-logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--fk-logo-grey)}
.hdr-bird{height:48px;width:auto;flex:none}
.hdr-word{display:flex;flex-direction:column;gap:3px;line-height:1;white-space:nowrap;padding-top:2px;font-family:"Montserrat",var(--f-sans)}
.hdr-name{font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase} /* 16.5 until 14 Oct late: Joel wanted the name smaller, the tagline as it was */
.hdr-tag{font-size:7.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase} /* close to the name's width, as in the lockup */
.hdr-nav{display:flex;align-items:center;gap:20px;margin-inline:auto} /* centred between the logo and the actions (16 Oct); margin-left:8px before */
.hdr-nav > a,.hdr-nav-btn{font-size:15px;font-weight:600;text-decoration:none;color:var(--fk-ink);padding:6px 0;position:relative;background:none;border:0;font-family:inherit;cursor:pointer;line-height:1.4;white-space:nowrap}
.hdr-nav > a:hover,.hdr-nav-btn:hover,.hdr-nav-btn[aria-expanded="true"]{color:var(--fk-teal-text)}
.hdr-nav > a[aria-current="page"]{color:var(--fk-deep)}
.hdr-nav > a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--fk-teal)}
.hdr-nav-btn{display:inline-flex;align-items:center;gap:6px}
.hdr-nav-btn .caret{width:12px;height:12px;flex:none;transition:transform .18s var(--ease)}
.hdr-nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* the menus (option A, Joel's go-ahead of 14 Oct): Services, Who we work with and About each open a small panel under their
   word: white, the shell's radius and shadow, a hairline. The Services panel keeps the live site's icon cards and adds the
   venues as a row; the other two are rows. A panel is a child of its nav item, so the footer script keeps it open while
   the pointer is on the word or the panel, and the bridge above the panel covers the gap between them. */
.hdr-item{position:relative}
.menu{position:absolute;left:-18px;top:calc(100% + 10px);z-index:30;background:var(--fk-white);border:1px solid var(--fk-line);border-radius:16px;box-shadow:0 1px 2px rgba(31,42,39,.05),0 24px 48px -24px rgba(31,42,39,.35);padding:12px}
.menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu[hidden]{display:none}
.menu--services{width:400px}
.menu--who{width:380px;padding:6px 18px}
.menu--about{width:272px;padding:6px 18px}
.menu-row{display:flex;gap:12px;align-items:center;margin-top:10px;padding:14px 16px 6px;border-top:1px solid var(--fk-line);font-size:15px;font-weight:600;text-decoration:none;color:var(--fk-deep);line-height:1.3}
.menu-row:hover{color:var(--fk-teal-text)}
.menu-row:hover .mega-arrow{background:var(--fk-deep)}
.menu--about .mega-link + .mega-link{border-top:1px solid var(--fk-line)}
.menu a[aria-current="page"],.menu a[aria-current="page"] strong{color:var(--fk-teal-text)}
.mega-card[aria-current="page"]{background:var(--fk-teal-pale);border-color:transparent}
.hdr-item:has(a[aria-current="page"]) > .hdr-nav-btn{color:var(--fk-deep)}
.hdr-item:has(a[aria-current="page"]) > .hdr-nav-btn::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--fk-teal)}
.mega-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--fk-paper);border:1px solid var(--fk-line);text-decoration:none;color:var(--fk-ink);transition:background .18s var(--ease),border-color .18s var(--ease)}
.mega-card + .mega-card{margin-top:10px}
.mega-card:hover,.mega-card:focus-visible{background:var(--fk-teal-pale);border-color:transparent}
.mega-ico{width:44px;height:44px;border-radius:11px;background:var(--fk-white);border:1px solid var(--fk-line);display:grid;place-items:center;color:var(--fk-teal)}
.mega-card:hover .mega-ico{border-color:transparent}
.mega-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mega-card-text{display:grid;gap:3px;padding-top:2px}
.mega-card-text strong{font-size:16px;font-weight:700;color:var(--fk-deep);line-height:1.3}
.mega-card-text span{font-size:14px;line-height:1.45;color:var(--fk-grey)}
.mega-arrow{flex:none;width:22px;height:22px;border-radius:50%;background:var(--fk-teal);color:#fff;display:grid;place-items:center;transition:background .18s var(--ease)}
.mega-arrow svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mega-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;text-decoration:none;color:var(--fk-ink)}
.mega-row + .mega-row{border-top:1px solid var(--fk-line)}
.mega-row .mega-arrow{margin-top:2px}
.mega-row-text{display:grid;gap:2px}
.mega-row-text strong{font-size:16px;font-weight:700;color:var(--fk-deep);line-height:1.3}
.mega-row-text span{font-size:14px;line-height:1.45;color:var(--fk-grey)}
.mega-row:hover strong,.mega-link:hover{color:var(--fk-teal-text)}
.mega-row:hover .mega-arrow,.mega-link:hover .mega-arrow{background:var(--fk-deep)}
.mega-link{display:flex;gap:12px;align-items:center;padding:11px 0;font-size:16px;font-weight:600;text-decoration:none;color:var(--fk-deep);line-height:1.3}
.hdr-actions{display:flex;align-items:center;gap:14px;flex:none}
.hdr-phone{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.hdr-phone small{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fk-grey)}
.hdr-phone strong{font-size:17px;font-weight:700;color:var(--fk-deep);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* phone-only pieces of the header (round 5): the dark green bar at the very top, the compact intake button, the hamburger
   (three lines that become a cross), and the sheet; all display:none until the phone query */
.topbar{display:none;background:var(--fk-deep);color:#fff}
.topbar-in{height:40px;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap}
.topbar-in span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar-in a{flex:none}
.topbar a{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.01em}
.hdr-cta-sm{display:none;align-items:center;height:36px;padding:0 13px;border-radius:var(--radius-btn);background:var(--fk-deep);color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.hdr-cta-sm:hover{background:#1B3A34}
.hdr-menu{display:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--fk-deep);cursor:pointer;place-items:center}
.hdr-menu-ico{position:relative;display:block;width:24px;height:18px}
.hdr-menu-ico span{position:absolute;left:0;top:8px;width:24px;height:2px;border-radius:2px;background:currentColor}
.hdr-menu-ico span:nth-child(1){transform:translateY(-8px)}
.hdr-menu-ico span:nth-child(3){transform:translateY(8px)}
.hdr-menu[aria-expanded="true"] .hdr-menu-ico span:nth-child(1){transform:rotate(45deg)}
.hdr-menu[aria-expanded="true"] .hdr-menu-ico span:nth-child(2){opacity:0;transform:scaleX(.3)}
.hdr-menu[aria-expanded="true"] .hdr-menu-ico span:nth-child(3){transform:rotate(-45deg)}
.hdr-sheet{display:none}
html.sheet-open{overflow:hidden}
/* fact strip (redrawn 14 Oct on Joel's review: an icon tile per fact beside the words, the label in teal). The icon is
   named by data-ico on the cell and drawn by the rules below as a mask over a pale teal tile; a cell without one has no tile. */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--fk-white);border-radius:16px;box-shadow:0 1px 2px rgba(31,42,39,.06),0 18px 40px -24px rgba(31,42,39,.35)}
.facts > div{display:grid;grid-template-columns:minmax(0,1fr);gap:5px 14px;align-content:start;padding:24px 26px;border-left:1px solid var(--fk-line)}
.facts > div:first-child{border-left:0}
.facts > [data-ico]{grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 1fr}
.facts > [data-ico]::before,.facts > [data-ico]::after{content:"";grid-area:1/1/3/2;width:40px;height:40px;border-radius:11px}
.facts > [data-ico]::before{background:var(--fk-teal-pale)}
.facts > [data-ico]::after{background:var(--fk-teal-text);-webkit-mask:var(--ico) center/22px 22px no-repeat;mask:var(--ico) center/22px 22px no-repeat}
.facts > [data-ico] dt,.facts > [data-ico] dd{grid-column:2}
.facts dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fk-teal-text);line-height:1.4;padding-top:1px}
.facts dd{margin:0;font-size:17px;font-weight:600;color:var(--fk-deep);line-height:1.35}
.facts > [data-ico="clock"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.facts > [data-ico="calendar"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3Cpath d='M9 14.5l2 2 4-4'/%3E%3C/svg%3E")}
.facts > [data-ico="pin"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-6 6.5-11a6.5 6.5 0 0 0-13 0c0 5 6.5 11 6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E")}
.facts > [data-ico="document"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10.5a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M14 3.5v4h4M9.5 12h5M9.5 15.5h5'/%3E%3C/svg%3E")}
.facts > [data-ico="shield"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.5v5.5c0 4.2-2.9 7.4-7 9-4.1-1.6-7-4.8-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.facts > [data-ico="people"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Cpath d='M3.5 19c.5-3.5 2.6-5.5 5.5-5.5s5 2 5.5 5.5'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.4'/%3E%3Cpath d='M15.5 13.6c2.6.2 4.4 2 4.9 5.4'/%3E%3C/svg%3E")}
.facts > [data-ico="phone"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.facts > [data-ico="receipt"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8.5h6M9 12h6'/%3E%3C/svg%3E")}
.facts > [data-ico="card"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 14.5h4'/%3E%3C/svg%3E")}
.facts > [data-ico="car"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l1.8-4.5A2 2 0 0 1 7.7 7h8.6a2 2 0 0 1 1.9 1.5L20 13'/%3E%3Cpath d='M3.5 13h17v4.5h-2.5a1.5 1.5 0 0 1-3 0h-6a1.5 1.5 0 0 1-3 0H3.5z'/%3E%3C/svg%3E")}
.facts > [data-ico="briefcase"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2'/%3E%3Cpath d='M9 7.5V5.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3.5 12.5h17'/%3E%3C/svg%3E")}
.facts > [data-ico="badge"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='M8.5 13.5L7 21l5-2.5 5 2.5-1.5-7.5'/%3E%3C/svg%3E")}
.facts > [data-ico="video"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-2.5v9L16 14'/%3E%3C/svg%3E")}
.facts > [data-ico="globe"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.5 2.5 14.5 0 17M12 3.5c-2.5 2.5-2.5 14.5 0 17'/%3E%3C/svg%3E")}
.facts > [data-ico="scale"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M5 20h14M4 8h16'/%3E%3Cpath d='M7 8l-3 6a3 3 0 0 0 6 0zM17 8l-3 6a3 3 0 0 0 6 0z'/%3E%3C/svg%3E")}
.facts > [data-ico="arrows"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13'/%3E%3Cpath d='M14 5l3 3-3 3'/%3E%3Cpath d='M20 16H7'/%3E%3Cpath d='M10 13l-3 3 3 3'/%3E%3C/svg%3E")}
.facts > [data-ico="chat"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E")}
.facts > [data-ico="book"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2 2 0 0 1 6 3.5h13v15H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 20.5A2 2 0 0 1 6 18.5h13M8 7.5h7'/%3E%3C/svg%3E")}
.facts > [data-ico="mail"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.facts > [data-ico="home"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 9.5V20h12V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E")}
.facts > [data-ico="room"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.5V4.5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M4 20.5h16M14.5 12.5h.01'/%3E%3C/svg%3E")}
.facts > [data-ico="tree"]{--ico: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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l5 7h-2.5l3.5 5H14v4h-4v-4H6l3.5-5H7z'/%3E%3C/svg%3E")}
/* form controls drawn by the site, not the system (Joel, 14 Oct): a list box in place of the system's select menu, a
   calendar in place of the system's date picker, a drop zone in place of the bare file button, and a long form shown one
   step at a time. The footer script builds each over the native control, which stays in the form (hidden) and carries
   the value; without script the native control shows, styled. */
.hm-form select,.in-form select{appearance:none;-webkit-appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23666768' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") right 14px center/14px 14px no-repeat}
.hm-form select:invalid,.in-form select:invalid{color:var(--fk-grey)}
/* the list box */
.sel{position:relative}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;padding:0 14px;border:1.5px solid var(--fk-line-strong);border-radius:10px;background:#fff;font:inherit;font-size:16px;color:var(--fk-ink);text-align:left;cursor:pointer;transition:border-color .18s var(--ease)}
.sel-btn:hover,.sel-btn[aria-expanded="true"]{border-color:var(--fk-deep)}
.sel-btn.is-empty .sel-val{color:var(--fk-grey)}
.sel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn .caret{width:14px;height:14px;flex:none;color:var(--fk-grey);transition:transform .18s var(--ease)}
.sel-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:15;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--fk-line);border-radius:12px;box-shadow:0 1px 2px rgba(31,42,39,.05),0 18px 40px -20px rgba(31,42,39,.35);max-height:300px;overflow:auto;outline:0}
.sel-list[hidden]{display:none}
.sel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px 12px;border-radius:8px;font-size:16px;line-height:1.3;color:var(--fk-ink);cursor:pointer}
.sel-opt.is-active{background:var(--fk-cream)}
.sel-opt[aria-selected="true"]{color:var(--fk-deep);font-weight:600}
.sel-opt[aria-selected="true"]::after{content:"";flex:none;width:7px;height:12px;margin:0 6px 3px 0;border-right:2px solid var(--fk-teal);border-bottom:2px solid var(--fk-teal);transform:rotate(45deg)}
/* the date field and its calendar */
.dp{position:relative}
.hm-form .dp-in,.in-form .dp-in{padding-right:48px}
.dp-btn{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--fk-grey);display:grid;place-items:center;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.dp-btn:hover,.dp-btn[aria-expanded="true"]{background:var(--fk-teal-pale);color:var(--fk-deep)}
.dp-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dp-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:15;width:316px;max-width:100%;padding:14px;background:#fff;border:1px solid var(--fk-line);border-radius:14px;box-shadow:0 1px 2px rgba(31,42,39,.05),0 18px 40px -20px rgba(31,42,39,.35)}
.dp-pop[hidden]{display:none}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dp-title{font-size:15px;font-weight:700;color:var(--fk-deep);font-variant-numeric:tabular-nums}
.dp-nav{width:34px;height:34px;border:1px solid var(--fk-line-strong);border-radius:9px;background:#fff;color:var(--fk-deep);display:grid;place-items:center;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.dp-nav:hover{border-color:var(--fk-deep);background:#F0EDE4}
.dp-nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fk-grey);text-align:center;padding:6px 0 8px}
.dp-day{height:38px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:15px;color:var(--fk-ink);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .12s var(--ease)}
.dp-day:hover{background:var(--fk-cream)}
.dp-day.is-out{color:var(--fk-line-strong)}
.dp-day.is-today{box-shadow:inset 0 0 0 1.5px var(--fk-teal)}
.dp-day[aria-pressed="true"]{background:var(--fk-deep);color:#fff}
.dp-day:disabled{color:var(--fk-line-strong);cursor:default;background:transparent}
.dp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--fk-line)}
.dp-foot button{border:0;background:transparent;padding:6px 4px;font:inherit;font-size:14px;font-weight:600;color:var(--fk-teal-text);cursor:pointer;border-radius:6px}
.dp-foot button:hover{color:var(--fk-deep);text-decoration:underline;text-underline-offset:3px}
.dp-in[aria-invalid="true"]{border-color:#B4443C}
/* the file drop zone */
.up{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:76px;padding:14px 16px;border:1.5px dashed var(--fk-line-strong);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.up:hover,.up.is-over{border-color:var(--fk-deep);background:#F0EDE4}
.up:focus-within{outline:2px solid var(--fk-teal-text);outline-offset:3px}
.up.has-file{border-style:solid;border-color:var(--fk-deep)}
.up-ico{width:44px;height:44px;border-radius:11px;background:var(--fk-teal-pale);color:var(--fk-teal-text);display:grid;place-items:center}
.up-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.up-text{display:grid;gap:2px;min-width:0}
.up-text strong{font-size:15px;font-weight:700;color:var(--fk-deep);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-text strong u{color:var(--fk-teal-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.up-text span{font-size:13px;line-height:1.4;color:var(--fk-grey)}
.up-x{border:1.5px solid var(--fk-line-strong);border-radius:var(--radius-btn);background:transparent;height:36px;padding:0 14px;font:inherit;font-size:14px;font-weight:700;color:var(--fk-deep);cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.up-x:hover{border-color:var(--fk-deep);background:#F0EDE4}
/* the signature pad (step 8, 15 Oct): a white box to sign in with a dashed baseline, Clear, and a typed-name alternative */
.sig{position:relative;display:grid;gap:10px;max-width:640px}
.sig-canvas{display:block;width:100%;height:160px;border:1.5px solid var(--fk-line-strong);border-radius:12px;background:#fff;touch-action:none;cursor:crosshair}
.sig.has-sig .sig-canvas{border-color:var(--fk-deep)}
.sig-line{position:absolute;left:24px;right:24px;top:118px;border-top:1px dashed var(--fk-line-strong);pointer-events:none}
.sig-tools{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sig-tools button{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--fk-teal-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sig-tools button:hover{color:var(--fk-deep)}
.sig-tools button[hidden],.sig-typed[hidden],.sig-note[hidden]{display:none}
.sig-note,.in-choices-note{margin:0;font-size:14px;font-weight:600;color:#B4443C}
.in-choices-note[hidden]{display:none}
/* a sent form (assets/js/forms.js): the note that takes its place */
/* the line the build writes under every form since 15 Oct: a link to the privacy policy */
.form-privacy{font-size:14px;line-height:1.5;color:var(--fk-grey);max-width:60ch;margin-top:4px}
.form-privacy a{color:var(--fk-teal-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-sent{padding:22px 26px;border-radius:14px;background:var(--fk-white);box-shadow:0 1px 2px rgba(31,42,39,.05),0 14px 32px -20px rgba(31,42,39,.25);font-size:17px;line-height:1.55}
.form-sent strong{color:var(--fk-deep)}
.up-x[hidden]{display:none}
.hm-form input[type="file"].up-in,.in-form input[type="file"].up-in{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
/* a long form one step at a time (Joel, 14 Oct: as the live site's forms, Next to see the next step, Submit on the last) */
.steps-head{display:grid;gap:10px;scroll-margin-top:calc(var(--stack,76px) + 24px)}
.steps-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:600;color:var(--fk-grey)}
.steps-line strong{font-size:17px;font-weight:700;color:var(--fk-deep);line-height:1.3}
.steps-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.steps-bar span{height:5px;border-radius:999px;background:var(--fk-line)}
.steps-bar span.is-done{background:var(--fk-teal)}
.steps-bar span.is-now{background:var(--fk-deep)}
.steps-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.steps-nav .btn{margin-top:0}
.steps-nav .btn[hidden]{display:none}
.steps-nav .btn--primary,.steps-nav .btn[type="submit"]{margin-left:auto}
.steps-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* cards */
.card{background:var(--fk-white);border-radius:14px;padding:28px;box-shadow:0 1px 2px rgba(31,42,39,.05),0 14px 32px -20px rgba(31,42,39,.25)}
.card h3{margin-bottom:10px}
.card p{font-size:17px;line-height:1.55;color:var(--fk-ink)}
.card .btn--quiet{margin-top:14px;padding:0}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
/* accordion */
.acc{border-top:1px solid var(--fk-line-strong)}
.acc-item{border-bottom:1px solid var(--fk-line-strong)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;background:none;border:0;font:inherit;font-size:19px;font-weight:600;color:var(--fk-deep);text-align:left;cursor:pointer}
.acc-btn .caret{width:14px;height:14px;flex:none;transition:transform .18s var(--ease)}
.acc-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.acc-body{display:none;padding:0 0 20px;font-size:17px;line-height:1.6;color:var(--fk-ink);max-width:70ch}
.acc-body.is-open{display:block}
/* trust band: the label above, the logos centred on one line, each sized by eye to read as one row */
.trust{display:grid;gap:24px;justify-items:center;text-align:center}
.trust .lab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fk-grey);line-height:1.4}
.trust .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 48px;width:100%}
.trust .logos img{height:40px;width:auto;max-width:170px;object-fit:contain}
.trust .logos img.lg-wide{height:34px;max-width:200px}
/* four logos sit in padded canvases: a cover-fit box sized from the ink, so each mark shows at the row's height */
.trust .logos img[src*="nsw-cj"]{aspect-ratio:109/34;object-fit:cover;object-position:50% 50.1%}
.trust .logos img[src*="kari"]{aspect-ratio:111/34;object-fit:cover;object-position:50% 48.7%}
.trust .logos img[src*="legal-aid"]{aspect-ratio:138/34;object-fit:cover;object-position:50% 65.2%}
.trust .logos img[src*="accsa"]{aspect-ratio:87/34;object-fit:cover;object-position:50% 21.0%}
/* closing block: CTA and footer merged, one teal hairline on top */
.close{background:var(--fk-deep);color:#fff;border-top:3px solid var(--fk-teal);padding-block:64px 36px}
.close-cta{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
.close-cta h2{color:#fff;font-size:34px;letter-spacing:-.025em}
.close-cta p{color:var(--fk-on-deep-soft);font-size:17px;max-width:52ch;margin-top:10px}
.close-cta .btn-row{justify-content:flex-end}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:28px;padding-top:44px} /* five columns since 15 Oct: Where we work, the four region pages */
.foot h3{color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:14px} /* h3 since 15 Oct: the close block's heading is an h2 (Lighthouse heading-order) */
.foot ul{list-style:none;display:grid;gap:10px}
.foot a{color:#fff;font-size:15px;font-weight:500;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .tag{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:12px}
.foot .fine{color:var(--fk-on-deep-soft);font-size:15px;max-width:40ch;line-height:1.5}
.foot .foot-links{margin-top:14px}
/* the social accounts (Joel, 15 Oct): three round icon links under the first column */
.foot .foot-social{list-style:none;display:flex;gap:10px;margin-top:18px}
.foot .foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .18s var(--ease),border-color .18s var(--ease)}
.foot .foot-social a:hover,.foot .foot-social a:focus-visible{background:rgba(255,255,255,.1);border-color:#fff;text-decoration:none}
.foot .foot-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:var(--fk-on-deep-soft);font-size:14px}
.foot-bottom a{color:#fff;text-decoration:none}
/* motion: one motif, stopped under reduced motion; never the hero */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .24s var(--ease) both}
  @keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
  .hdr-menu-ico span{transition:transform .22s var(--ease),opacity .15s var(--ease)}
}
/* the scroll reveal (Joel's yes, 15 Oct): cards, tiles, steps and the fact strip rise 12px once as they come into view, 0.24s,
   siblings 50ms apart, never the hero. The page's head adds .js only where IntersectionObserver exists and the footer script
   adds .is-in as each element appears, so without script, under reduced motion or in print everything simply shows. */
@media screen and (prefers-reduced-motion:no-preference){
  .js :is(.card,.in-tile,.sv-tile,.hm-step,.lw-step,.in-step,.sv-step,.lw-setting,.facts):not(.is-in){opacity:.001;transform:translateY(12px)}
  .js :is(.card,.in-tile,.sv-tile,.hm-step,.lw-step,.in-step,.sv-step,.lw-setting,.facts).is-in{animation:rise .24s var(--ease) both;animation-delay:var(--rv-d,0ms)}
}
/* narrow desktops and iPads in landscape (901 to 1260px): the desktop header, tightened, so it never spills past the edge
   (found 14 Oct: at 1024px it overflowed by 80px; the range grew to 1260 when Contact joined the nav). The phone number
   text goes; the button and the links stay. */
@media (max-width:1260px) and (min-width:901px){
  .hdr-in{gap:16px}
  .hdr-nav{gap:14px}
  .hdr-nav > a,.hdr-nav-btn{font-size:14px}
  .hdr-phone{display:none}
  .hdr-actions{gap:10px}
  .hdr-actions .btn{padding:0 16px;font-size:14px}
}
/* phone */
@media (max-width:900px){
  :root{--body:15px;--small:14px;--gutter:16px;--stack:105px} /* the bar (40) + the header (64) + its rule; the text one pixel smaller than before (Joel, 14 Oct) */
  /* 15 Oct late (the manager, via Joel): the big text smaller on a phone: h1 four pixels less, h2 two, titles (h3) two, subtitles one */
  .display-xl{font-size:32px}
  .display-lg{font-size:28px}
  .display-md{font-size:24px}
  .heading{font-size:19px}
  .lede{font-size:15px}
  .band{padding-block:44px}
  .band-head{margin-bottom:28px}
  .strip-host--jump{padding-bottom:24px}
  .topbar{display:block}
  .hdr-in{height:64px;gap:8px}
  .hdr-bird{height:40px}
  .hdr-word{gap:3px}
  .hdr-name{font-size:13px}
  .hdr-tag{font-size:7px;letter-spacing:.03em}
  /* the logo may shrink and the words be cut short before anything pushes the page sideways (Joel, 14 Oct: a sideways scroll on his phone) */
  .hdr-logo{flex:0 1 auto;min-width:0}
  .hdr-word{min-width:0;overflow:hidden}
  .hdr-name,.hdr-tag{overflow:hidden;text-overflow:ellipsis}
  .hdr-nav,.hdr-phone,.hdr-actions .btn,.menu{display:none}
  .hdr-actions{gap:6px}
  .hdr-cta-sm{display:inline-flex;padding:0 12px}
  .hdr-menu{display:grid}
  /* the sheet: fixed under the sticky stack, scrolls on its own; the intake button leads, the contact strip closes */
  .hdr-sheet{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--stack));bottom:0;overflow-y:auto;overscroll-behavior:contain;background:var(--fk-paper);padding:16px var(--gutter) 28px;z-index:19}
  .hdr-sheet.is-open{display:block}
  .sheet-cta{display:flex;width:100%;height:52px;font-size:16px}
  .sheet-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sheet-nav{margin-top:16px;border-top:1px solid var(--fk-line)}
  .sheet-nav > a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;font-size:17px;font-weight:700;color:var(--fk-deep);text-decoration:none;border-bottom:1px solid var(--fk-line)}
  .sheet-nav > a::after{content:"";width:8px;height:8px;margin-right:5px;border-right:2px solid var(--fk-line-strong);border-top:2px solid var(--fk-line-strong);transform:rotate(45deg);flex:none}
  .sheet-nav > a[aria-current="page"],.sheet-who[aria-current="page"]{color:var(--fk-teal-text)}
  .sheet-group{padding:12px 0 8px;border-bottom:1px solid var(--fk-line)}
  .sheet-lab{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fk-grey);padding-bottom:6px;line-height:1.4}
  .sheet-svc{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:7px 0;text-decoration:none;color:var(--fk-ink)}
  .sheet-svc .mega-ico{width:40px;height:40px;border-radius:10px}
  .sheet-svc .mega-ico svg{width:22px;height:22px}
  .sheet-svc-text{display:grid;gap:1px}
  .sheet-svc-text strong{font-size:16px;font-weight:700;color:var(--fk-deep);line-height:1.3}
  .sheet-svc-text span{font-size:13px;line-height:1.4;color:var(--fk-grey)}
  .sheet-who{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:16px;font-weight:600;color:var(--fk-deep);text-decoration:none}
  .sheet-contact{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--fk-cream);display:grid;gap:10px}
  .sheet-contact a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--fk-deep);text-decoration:none}
  .sheet-contact svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--fk-teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .sheet-contact p{font-size:13px;color:var(--fk-grey);line-height:1.4}
  .dp-pop{width:100%}
  .steps-nav .btn{flex:1 1 auto}
  .steps-nav .btn--primary,.steps-nav .btn[type="submit"]{margin-left:0}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts > div{padding:16px 16px 18px;gap:6px 0}
  .facts > [data-ico]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr} /* the tile above the words: side by side it squeezed them */
  .facts > [data-ico]::before,.facts > [data-ico]::after{grid-area:1/1/2/2;width:32px;height:32px;border-radius:9px}
  .facts > [data-ico]::after{-webkit-mask-size:18px 18px;mask-size:18px 18px}
  .facts > [data-ico] dt,.facts > [data-ico] dd{grid-column:1}
  .facts > [data-ico] dt{margin-top:4px}
  .facts dd{font-size:15px}
  .facts > div:nth-child(3){border-left:0}
  .facts > div:nth-child(n+3){border-top:1px solid var(--fk-line)}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;gap:16px}
  .card{padding:22px}
  .card p{font-size:16px}
  .acc-btn{font-size:18px}
  .acc-body{font-size:16px}
  .close-cta p{font-size:16px}
  .close{padding-block:44px 36px} /* 15 Oct later, Joel: a tighter top on a phone (64 on a desktop) */
  .close-cta h2{font-size:30px} /* 15 Oct later, Joel: two pixels smaller on a phone; 15 Oct late, the manager: two more (34 on a desktop) */
  .foot a,.foot .fine{font-size:14px}
  .close-cta{grid-template-columns:1fr}
  .close-cta .btn-row{justify-content:flex-start}
  .foot{grid-template-columns:1fr;gap:28px}
  .trust{gap:18px}
  .trust .logos{gap:18px 26px}
  .trust .logos img{height:30px;max-width:130px}
  .trust .logos img.lg-wide{height:24px;max-width:120px}
}