/* ========================================================================== KY WEB — DIRECTION C: "LOUD" Kinetic brutalism. The brand green is not an accent, it is the surface. Hard-cut colour blocks (green → black → paper), oversized uppercase display type, zero radius, 3px black rules, sticker shadows, flood inversion on interaction, and marquee bands as structural dividers. Self-contained: does NOT import site.css. Type is the self-hosted Plus Jakarta Sans (800) already in /fonts — no Google Font dependency was added. Jakarta at 800 with -0.04em tracking carries the display weight this direction needs. Colour contract: #0A0A0A on #b5d929 = 14.5:1 ✔ body + display #b5d929 on #0A0A0A = 11.7:1 ✔ body + display #b5d929 on white = 1.63:1 ✘ NEVER USED ========================================================================== */ /* ── 1. FONTS ──────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/fonts/inter-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: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/plus-jakarta-sans-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; } /* ── 2. TOKENS ─────────────────────────────────────────────────────────── */ :root { --green: #b5d929; --ink: #0a0a0a; --paper: #f2f0e9; --white: #ffffff; --ink-soft: #2b2b2b; /* 14.0:1 on paper — body copy on light blocks */ --display: 'Plus Jakarta Sans', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; /* 8px rhythm */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --pad: 20px; --rule: 3px; /* Header is sticky and in flow, so the hero subtracts a known height. --nav-h is the whole header including its green rule. */ --hdr-rule: 6px; --nav-h: 72px; --fx: var(--ink); /* focus ring colour, re-set per surface */ --flip: 100ms linear; /* the signature inversion */ } @media (min-width: 640px) { :root { --pad: 32px; } } @media (min-width: 1024px) { :root { --pad: 48px; --nav-h: 86px; } } @media (min-width: 1280px) { :root { --pad: 64px; } } /* ── 3. RESET ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* iOS Safari ignores overflow-x clipping when it lives on alone, so the page still scrolls sideways on iPhone if any child overflows. Clipping at the root as well is what actually holds. `clip` wins where supported (no scroll box, sticky header unaffected); `hidden` is the older fallback. */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; /* `clip` (not `hidden`) so the sticky header is not trapped in a scroll box. */ overflow-x: hidden; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; } body.no-scroll { overflow: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.85; margin: 0; /* Display type is sized in vw, so one long word can be wider than the viewport and push the whole page sideways — "something." in /about/'s final CTA is 22vw x 10 characters and scrolled the desktop page 199px. `break-word` only breaks a word that cannot fit on a line of its own, so headings that already fit are unaffected. */ overflow-wrap: break-word; } p { margin: 0; } [hidden] { display: none; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; } /* Long-form copy stays lower-case, Inter, generous leading, 60–75ch. */ .hero__sub, .work__lede, .svcs__lede, .svc__desc, .guar__body, .why__lede, .card p, .acc__panel p, .areas__lede, .cta__body, .modal__sub, .ftr__brand p, .say blockquote { font-family: var(--body); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.65; max-width: 68ch; } /* ── 4. FOCUS + SKIP ───────────────────────────────────────────────────── */ :focus-visible { outline: 4px solid var(--fx); outline-offset: 3px; } .skip { position: absolute; left: var(--s2); top: -100px; z-index: 200; background: var(--green); color: var(--ink); border: var(--rule) solid var(--ink); padding: 12px 20px; font-family: var(--display); font-weight: 800; text-transform: uppercase; text-decoration: none; } .skip:focus { top: var(--s2); } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ── 5. BUTTONS ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px var(--s3); border: var(--rule) solid var(--ink); border-radius: 0; font-family: var(--display); font-weight: 800; font-size: clamp(0.9375rem, 1.6vw, 1.125rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--flip), color var(--flip), box-shadow var(--flip), transform var(--flip); } .btn--ink { background: var(--ink); color: var(--green); box-shadow: 8px 8px 0 var(--ink); } .btn--outline { background: transparent; color: var(--ink); box-shadow: none; } .btn--green { background: var(--green); color: var(--ink); box-shadow: 8px 8px 0 var(--ink); } .btn--full { width: 100%; } .btn--ink:hover, .btn--ink:focus-visible { background: var(--green); color: var(--ink); } .btn--outline:hover, .btn--outline:focus-visible { background: var(--ink); color: var(--green); } .btn--green:hover, .btn--green:focus-visible { background: var(--ink); color: var(--green); } .btn--ink:active, .btn--green:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); } .btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); } /* ── 6. NAV — solid black bar, thick green underline ───────────────────── */ .hdr { --fx: var(--green); position: sticky; top: 0; z-index: 90; background: var(--ink); border-bottom: var(--hdr-rule) solid var(--green); } .nav { display: flex; align-items: center; gap: var(--s3); padding-inline: var(--pad); height: calc(var(--nav-h) - var(--hdr-rule)); transition: height 150ms linear; } .nav.is-scrolled { height: calc(var(--nav-h) - var(--hdr-rule) - 8px); } .nav__logo { display: flex; align-items: center; margin-right: auto; } .nav__logo img { width: 132px; height: auto; } .nav__list { display: none; } .nav__call { display: none; align-items: center; min-height: 44px; padding: 10px var(--s3); background: var(--green); color: var(--ink); border: var(--rule) solid var(--green); font-family: var(--display); font-weight: 800; font-size: 0.875rem; text-transform: uppercase; text-decoration: none; transition: background-color var(--flip), color var(--flip); } .nav__call:hover, .nav__call:focus-visible { background: var(--ink); color: var(--green); } .burger { display: grid; place-content: center; gap: 5px; width: 48px; height: 48px; padding: 0; background: transparent; border: var(--rule) solid var(--green); cursor: pointer; } .burger span { display: block; width: 22px; height: 3px; background: var(--green); } @media (min-width: 1024px) { .burger { display: none; } .nav__call { display: inline-flex; } .nav__list { display: flex; align-items: center; gap: var(--s1); } .nav__list > li > a, .nav__dropbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; background: transparent; border: 0; color: var(--green); font-family: var(--display); font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background-color var(--flip), color var(--flip); } .nav__list > li > a:hover, .nav__list > li > a:focus-visible, .nav__dropbtn:hover, .nav__dropbtn:focus-visible { background: var(--green); color: var(--ink); } .nav__list > li > a[aria-current="page"] { background: var(--green); color: var(--ink); } .nav__drop { position: relative; } .nav__panel { position: absolute; top: calc(100% + 12px); left: 0; display: none; min-width: 260px; background: var(--green); border: var(--rule) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); } .nav__panel.is-open { display: block; } .nav__panel a { display: block; min-height: 44px; padding: 12px var(--s2); border-bottom: var(--rule) solid var(--ink); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 0.9375rem; text-transform: uppercase; text-decoration: none; transition: background-color var(--flip), color var(--flip); } .nav__panel li:last-child a { border-bottom: 0; } .nav__panel a:hover, .nav__panel a:focus-visible { background: var(--ink); color: var(--green); } } /* ── 7. MOBILE MENU ────────────────────────────────────────────────────── */ .mmenu { --fx: var(--ink); display: none; position: sticky; top: 70px; z-index: 89; background: var(--green); border-bottom: 6px solid var(--ink); } .mmenu.is-open { display: block; } .mmenu__inner { padding: var(--s3) var(--pad) var(--s4); } .mmenu__inner > a, .mmenu__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 12px 0; border: 0; border-bottom: var(--rule) solid var(--ink); background: transparent; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.02em; text-decoration: none; cursor: pointer; } .mmenu__panel { display: none; padding-left: var(--s3); } .mmenu__panel.is-open { display: block; } .mmenu__panel a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--ink); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; text-decoration: none; } .mmenu .btn { margin-top: var(--s4); width: 100%; } .mmenu__note { margin-top: var(--s2); font-family: var(--display); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; } @media (min-width: 1024px) { .mmenu, .mmenu.is-open { display: none; } } /* ── 8. SHARED SURFACE MODIFIERS ───────────────────────────────────────── */ .hero, .guar, .cta { background: var(--green); color: var(--ink); --fx: var(--ink); } .work, .says, .areas { background: var(--ink); color: var(--green); --fx: var(--green); } .svcs, .why, .faq { background: var(--paper); color: var(--ink); --fx: var(--ink); } .hero, .guar, .cta, .work, .says, .areas, .svcs, .why, .faq { padding-block: clamp(var(--s6), 9vw, var(--s8)); } .hero, .guar, .cta, .work, .says, .areas, .why, .faq { padding-inline: var(--pad); } /* Kicker / eyebrow */ .hero__kicker, .guar__kicker, .tech__label, .areas__sub { font-family: var(--display); font-weight: 800; font-size: clamp(0.75rem, 1.6vw, 0.875rem); text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.2; } /* ── 9. HERO ───────────────────────────────────────────────────────────── */ /* One viewport. svh so mobile browser chrome can't push the CTAs under the fold, and the section is a centred flex column rather than a padded block. */ .hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--nav-h)); padding-block: clamp(var(--s4), 4vh, var(--s6)); } .hero__kicker { display: inline-block; padding: 10px var(--s2); background: var(--ink); color: var(--green); margin-bottom: clamp(var(--s2), 2.5vh, var(--s4)); } .hero__h { font-size: min(clamp(2.25rem, 12.5vw, 11rem), 14vh); line-height: 0.85; letter-spacing: -0.04em; margin-bottom: clamp(var(--s3), 3.5vh, var(--s5)); } .hero__foot { display: grid; gap: var(--s4); border-top: var(--rule) solid var(--ink); padding-top: var(--s4); } .hero__sub { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); } .hero__foot .btnrow { margin-top: 0; } .hero__trust { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: clamp(var(--s3), 3vh, var(--s5)); } .hero__trust li { display: flex; align-items: center; min-height: 44px; padding: 8px var(--s2); border: var(--rule) solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; } @media (min-width: 1024px) { .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s6); } .hero__trust li { font-size: 0.875rem; } } /* ── 10. MARQUEE BANDS ─────────────────────────────────────────────────── */ .band { --fx: var(--green); background: var(--ink); color: var(--green); overflow: hidden; padding-block: var(--s2); } .band__track { display: flex; width: max-content; animation: band-slide 34s linear infinite; } .band__track--rev { animation-direction: reverse; } .band__set { display: block; padding-right: var(--s2); white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2.6vw, 1.75rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; } .band__set i { font-style: normal; padding: 0 var(--s2); } @keyframes band-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ── 11. WORK — hard grid on black ─────────────────────────────────────── */ .work__head { display: grid; gap: var(--s3); margin-bottom: var(--s6); } .work__h { font-size: clamp(2.75rem, 13vw, 11rem); } .work__lede { font-size: clamp(1rem, 1.5vw, 1.125rem); } .work__head .btn { justify-self: start; } @media (min-width: 1024px) { .work__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s6); } .work__h { grid-row: span 2; } .work__head .btn { justify-self: start; } } .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); } @media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Three across, not four: the homepage now shows six projects rather than twelve, and four columns left an orphaned row of two. */ @media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); } } .tile a { display: block; border: var(--rule) solid var(--green); background: var(--white); text-decoration: none; transition: transform 120ms linear; } .tile:nth-child(odd) a { transform: rotate(-1.5deg); } .tile:nth-child(even) a { transform: rotate(1.5deg); } .tile a:hover, .tile a:focus-visible { transform: rotate(0deg); } .tile img { width: 100%; /* Matches the thumbnails, which are 840x630. They used to be portrait, and a 4:3 source in a portrait box cropped so hard it cut words in half. */ aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; } .tile__bar { display: flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 8px 10px; border-top: var(--rule) solid var(--green); background: var(--green); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; transition: background-color var(--flip), color var(--flip); } .tile__no { opacity: 1; } .tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Flood inversion */ .tile a:hover .tile__bar, .tile a:focus-visible .tile__bar { background: var(--ink); color: var(--green); } @media (min-width: 640px) { .tile__bar { font-size: 0.8125rem; } } /* ── 12. SERVICES — four huge numbered rows ────────────────────────────── */ .svcs { padding-inline: 0; } .svcs__head, .tech { padding-inline: var(--pad); } .svcs__head { display: grid; gap: var(--s3); margin-bottom: var(--s6); } .svcs__h { font-size: clamp(2.75rem, 13vw, 11rem); } .svcs__lede { font-size: clamp(1rem, 1.5vw, 1.125rem); } @media (min-width: 1024px) { .svcs__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s6); } } .svc { display: grid; grid-template-areas: "no go" "ttl ttl" "desc desc"; grid-template-columns: 1fr auto; align-items: center; gap: var(--s1) var(--s3); padding: var(--s4) var(--pad); border-top: var(--rule) solid var(--ink); color: inherit; text-decoration: none; transition: background-color var(--flip), color var(--flip); } .svc:last-of-type { border-bottom: var(--rule) solid var(--ink); } .svc__no { grid-area: no; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: 0.06em; line-height: 1; } .svc__title { grid-area: ttl; font-family: var(--display); font-weight: 800; font-size: clamp(2.25rem, 10vw, 6rem); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.85; } .svc__desc { grid-area: desc; color: var(--ink-soft); font-size: 1rem; margin-top: var(--s1); transition: color var(--flip); } .svc__go { grid-area: go; font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1; } /* Flood inversion — colour only, no dimension change */ .svc:hover, .svc:focus-visible { background: var(--ink); color: var(--green); } .svc:hover .svc__desc, .svc:focus-visible .svc__desc { color: var(--green); } @media (min-width: 1024px) { .svc { grid-template-areas: "no ttl desc go"; grid-template-columns: 5rem minmax(0, 1fr) 22rem 3rem; gap: var(--s4); padding-block: var(--s5); } .svc__desc { margin-top: 0; max-width: 34ch; } } /* Built-with strip */ .tech { margin-top: var(--s5); } .tech__label { margin-bottom: var(--s3); } .tech__list { display: flex; flex-wrap: wrap; gap: var(--s2); } .tech__list li { display: flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 8px 12px; background: var(--white); /* The chip paints its own white surface, so it must set its own text colour. Without this it inherited green from the black section around it on /seo/ and /app-development/ — green on white is 1.63:1, the one combination the colour contract rules out entirely. */ color: var(--ink); border: var(--rule) solid var(--ink); font-family: var(--display); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em; } .tech__list img { width: 20px; height: 20px; } /* ── 13. STATS — hard alternating blocks ───────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2); min-height: 220px; padding: var(--s4) var(--s3); } .stat--green { background: var(--green); color: var(--ink); } .stat--ink { background: var(--ink); color: var(--green); } .stat__n { font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem, 11vw, 8rem); letter-spacing: -0.05em; line-height: 0.8; } .stat__l { min-height: 2.6em; /* reserves two lines so the numerals align */ font-family: var(--display); font-weight: 800; font-size: clamp(0.75rem, 1.4vw, 0.9375rem); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; } @media (min-width: 1024px) { .stat { min-height: 300px; padding: var(--s5) var(--s4); } /* Hard rule wherever two blocks of the same colour butt together. */ .stat--ink + .stat--ink { border-left: var(--rule) solid var(--green); } .stat--green + .stat--green { border-left: var(--rule) solid var(--ink); } } /* ── 14. GUARANTEE — largest type on the page ──────────────────────────── */ .guar__kicker { display: inline-block; padding: 10px var(--s2); background: var(--ink); color: var(--green); margin-bottom: var(--s4); } .guar__h { font-size: clamp(3rem, 14.5vw, 12rem); margin-bottom: var(--s5); } .guar__body { font-size: clamp(1.0625rem, 1.7vw, 1.375rem); border-top: var(--rule) solid var(--ink); padding-top: var(--s4); } /* ── 15. WHY — bordered blocks on paper ────────────────────────────────── */ .why__head { display: grid; gap: var(--s3); margin-bottom: var(--s6); } .why__h { font-size: clamp(2.75rem, 12vw, 9rem); } .why__lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); } @media (min-width: 1024px) { .why__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--s6); } } .why__grid { display: grid; gap: var(--s3); } @media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .card { padding: var(--s4); background: var(--white); border: var(--rule) solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transition: background-color var(--flip), color var(--flip); } .card h3 { font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1; margin-bottom: var(--s2); } .card p { color: var(--ink-soft); font-size: 0.9375rem; transition: color var(--flip); } .card:hover { background: var(--ink); color: var(--green); } .card:hover p { color: var(--green); } /* ── 16. TESTIMONIALS — on black ───────────────────────────────────────── */ .says__h { font-size: clamp(2.75rem, 13vw, 11rem); margin-bottom: var(--s6); } .says__grid { display: grid; gap: var(--s4); } @media (min-width: 1024px) { .says__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .say { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: var(--s4); border: var(--rule) solid var(--green); } .say blockquote { margin: 0; font-size: clamp(1rem, 1.6vw, 1.125rem); } .say blockquote::before { content: '\201C'; } .say blockquote::after { content: '\201D'; } .say figcaption { display: grid; gap: 4px; margin-top: auto; padding-top: var(--s3); border-top: var(--rule) solid var(--green); } .say__name { font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; } .say__meta { font-family: var(--display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } /* ── 17. FAQ ───────────────────────────────────────────────────────────── */ .faq__h { font-size: clamp(2.75rem, 13vw, 11rem); margin-bottom: var(--s6); } .acc { max-width: 62rem; border-top: var(--rule) solid var(--ink); } .acc__item { border-bottom: var(--rule) solid var(--ink); } .acc__item h3 { margin: 0; } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s3) 0; background: transparent; border: 0; color: inherit; font-family: var(--display); font-weight: 800; font-size: clamp(1.0625rem, 2.6vw, 1.75rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; text-align: left; cursor: pointer; transition: background-color var(--flip), color var(--flip), padding-inline var(--flip); } .accordion__trigger:hover, .accordion__trigger:focus-visible { background: var(--ink); color: var(--green); } .acc__icon { flex: 0 0 auto; display: grid; place-content: center; width: 40px; height: 40px; border: var(--rule) solid currentColor; font-size: 1.5rem; line-height: 1; } .accordion__trigger[aria-expanded="true"] .acc__icon { background: var(--ink); color: var(--green); } .accordion__trigger[aria-expanded="true"]:hover .acc__icon { background: var(--green); color: var(--ink); } .acc__panel { padding: 0 0 var(--s4); } .acc__panel p { color: var(--ink-soft); font-size: 1rem; } .acc__panel a { font-weight: 500; } /* ── 18. AREAS — inverting pills on black ──────────────────────────────── */ .areas__h { font-size: clamp(2.75rem, 13vw, 11rem); margin-bottom: var(--s3); } .areas__lede { font-size: clamp(1rem, 1.6vw, 1.125rem); margin-bottom: var(--s6); } .areas__sub { margin: var(--s5) 0 var(--s3); } .areas__sub:first-of-type { margin-top: 0; } .pills { display: flex; flex-wrap: wrap; gap: var(--s2); } .pills a { display: flex; align-items: center; min-height: 44px; padding: 10px var(--s2); border: var(--rule) solid var(--green); background: var(--green); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; transition: background-color var(--flip), color var(--flip); } .pills a:hover, .pills a:focus-visible { background: var(--ink); color: var(--green); } /* ── 19. FINAL CTA ─────────────────────────────────────────────────────── */ .cta__h { font-size: clamp(4rem, 22vw, 16rem); margin-bottom: var(--s4); } .cta__body { font-size: clamp(1.0625rem, 1.7vw, 1.375rem); border-top: var(--rule) solid var(--ink); padding-top: var(--s4); } /* ── 20. MODAL ─────────────────────────────────────────────────────────── */ .modal { --fx: var(--ink); position: fixed; inset: 0; z-index: 150; display: none; align-items: flex-start; justify-content: center; padding: var(--s3); background: rgba(10, 10, 10, 0.9); overflow-y: auto; } .modal.is-open { display: flex; } .modal__box { position: relative; width: 100%; max-width: 38rem; margin: var(--s5) 0; padding: var(--s5) var(--s4) var(--s4); background: var(--paper); border: var(--rule) solid var(--ink); box-shadow: 12px 12px 0 var(--green); } .modal__close { position: absolute; top: 0; right: 0; width: 48px; height: 48px; background: var(--ink); color: var(--green); border: 0; font-size: 1.125rem; cursor: pointer; transition: background-color var(--flip), color var(--flip); } .modal__close:hover, .modal__close:focus-visible { background: var(--green); color: var(--ink); } .modal__h { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: var(--s2); } .modal__sub { font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: var(--s4); } .field { margin-bottom: var(--s3); } .field label { display: block; margin-bottom: var(--s1); font-family: var(--display); font-weight: 800; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; } .field .opt { font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .field .req { color: var(--ink); } .field input, .field textarea { width: 100%; min-height: 48px; padding: 12px var(--s2); background: var(--white); border: var(--rule) solid var(--ink); border-radius: 0; color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.5; } .field textarea { min-height: 120px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #5a5a5a; } .field input:focus-visible, .field textarea:focus-visible { outline: 4px solid var(--ink); outline-offset: 0; } .alert { padding: var(--s2); margin-bottom: var(--s3); border: var(--rule) solid var(--ink); font-size: 0.9375rem; } .alert--ok { background: var(--green); color: var(--ink); } .alert--err { background: var(--ink); color: var(--green); } .alert--err a { color: var(--green); } .form-note { margin-top: var(--s2); font-size: 0.8125rem; color: var(--ink-soft); } /* ── 20b. ENQUIRY QUIZ ─────────────────────────────────────────────────── */ /* The modal asks two tap-only questions before it asks anyone to type. With JS off all three steps stack into one ordinary form, so nothing here may depend on script to be legible — the step controls ship [hidden] instead. */ /* The reset's [hidden] rule is not !important, so anything here that declares its own display has to opt back out — same as .filters[hidden] elsewhere. */ .prog[hidden], .step[hidden], .stepnav .btn[hidden] { display: none; } /* On a phone the default 72px above the box pushes the first option under the fold, which is exactly the friction this flow exists to remove. The top padding stays — it is what clears the 48px close button. */ @media (max-width: 639px) { .modal { padding: var(--s2); } .modal__box { margin: var(--s3) 0; padding: var(--s5) var(--s3) var(--s3); } } .prog { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .prog__bar { flex: 1; height: 12px; background: var(--white); border: var(--rule) solid var(--ink); } .prog__fill { display: block; height: 100%; background: var(--green); transition: width 180ms linear; } .prog__txt { flex: none; font-family: var(--display); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .step { min-width: 0; margin: 0; padding: 0; border: 0; } .step + .step { margin-top: var(--s5); } .step__q { display: block; width: 100%; padding: 0; margin-bottom: var(--s3); font-family: var(--display); font-weight: 800; font-size: clamp(1.375rem, 4.5vw, 1.75rem); line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; } .step__hint { margin-top: calc(var(--s1) * -1); font-size: 0.8125rem; color: var(--ink-soft); } /* ── Option tiles ── */ .picks { display: grid; gap: var(--s2); } @media (min-width: 480px) { .picks { grid-template-columns: 1fr 1fr; } } .pick { display: block; cursor: pointer; } /* The radio stays in the accessibility tree and keeps the arrow-key group behaviour; the tile beside it is what gets painted. */ .pick input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .pick__in { display: block; height: 100%; padding: var(--s2); background: var(--white); border: var(--rule) solid var(--ink); transition: background-color var(--flip), color var(--flip), box-shadow var(--flip), transform var(--flip); } .pick__t { display: block; font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; } .pick__d { display: block; margin-top: 6px; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-soft); } .pick:hover .pick__in { background: var(--green); box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); } .pick:hover .pick__d { color: var(--ink); } .pick input:focus-visible ~ .pick__in { outline: 4px solid var(--ink); outline-offset: 3px; } .pick input:checked ~ .pick__in { background: var(--ink); box-shadow: 6px 6px 0 var(--green); transform: translate(-2px, -2px); } .pick input:checked ~ .pick__in .pick__t { color: var(--green); } .pick input:checked ~ .pick__in .pick__d { color: var(--green); } /* ── Step navigation ── */ .stepnav { display: flex; gap: var(--s2); margin-top: var(--s3); } .stepnav .btn { flex: 1; } .stepnav .btn--back { flex: none; min-height: 56px; padding: 14px var(--s3); } /* ── 21. FOOTER ────────────────────────────────────────────────────────── */ .ftr { --fx: var(--green); background: var(--ink); color: var(--green); border-top: 6px solid var(--green); padding: var(--s6) var(--pad) var(--s4); } .ftr__main { display: grid; gap: var(--s6); } @media (min-width: 1024px) { .ftr__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } } .ftr__brand img { width: 150px; height: auto; } .ftr__brand p { margin: var(--s3) 0; font-size: 0.9375rem; max-width: 44ch; } /* Sized as a real touch target. It was 31px tall on every page — under the 44px minimum — and it is the one contact link in the footer. The underline stays tight to the text by using a flex box taller than the line. */ .ftr__mail { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; text-decoration: none; border-bottom: var(--rule) solid var(--green); padding-bottom: 2px; } .ftr__social { display: flex; gap: var(--s2); margin-top: var(--s4); } .ftr__social a { display: grid; place-content: center; width: 44px; height: 44px; border: var(--rule) solid var(--green); color: var(--green); transition: background-color var(--flip), color var(--flip); } .ftr__social a:hover, .ftr__social a:focus-visible { background: var(--green); color: var(--ink); } .ftr__cols { display: grid; gap: var(--s4); } @media (min-width: 640px) { .ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ftr__col h2 { font-size: 0.8125rem; letter-spacing: 0.14em; margin-bottom: var(--s2); padding-bottom: var(--s1); border-bottom: var(--rule) solid var(--green); } .ftr__col a { display: flex; align-items: center; min-height: 44px; font-size: 0.9375rem; text-decoration: none; } .ftr__col a:hover, .ftr__col a:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .ftr__bottom { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; margin-top: var(--s6); padding-top: var(--s3); border-top: var(--rule) solid var(--green); font-family: var(--display); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ── 22. REDUCED MOTION ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .band__track { animation: none !important; transform: none !important; } .tile:nth-child(odd) a, .tile:nth-child(even) a { transform: none !important; } }