/* Self-hosted IBM Plex (SIL Open Font License 1.1, see fonts/OFL.txt). Latin subset. No third-party font requests. */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-var-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-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} /* Jundra design system, Round 4 (Direction A "Signal" + venture warmth). Single source of truth. See ../../design-tokens.md for roles and rules. Plain CSS, no framework. Fonts: IBM Plex Sans + IBM Plex Mono (Google Fonts). */ /* ---------- 1. Tokens ---------- */ :root{ /* Core neutrals */ --paper:#F6F6F3; /* page background */ --white:#FFFFFF; /* cards, nav, inputs */ --ink:#14181F; /* headings, body text */ --graphite:#5B6370; /* secondary text */ --mist:#8A919C; /* tertiary text, placeholders (large/meta only) */ --rule:#D9DCE0; /* borders, dividers */ --rule-strong:#B9BEC6;/* input borders */ --night:#14181F; /* dark bands, footer */ /* Brand */ --blue:#2547A0; /* Jundra blue: primary action, links, wordmark square */ --blue-700:#1C3780; /* hover / pressed */ --blue-050:#ECF0F9; /* blue tint surface, focus halo */ --signal:#2FA866; /* status dot only (wordmark dot, "In development") */ /* Venture warmth (surfaces and tints only; never for buttons or body text) */ --sandstone:#F3EDE3; /* warm section surface */ --sand:#E4D6C1; /* warm card border / chip */ --bark:#6E6259; /* warm meta text on sandstone */ --ochre:#C2722C; /* venture accent: small rules and markers only */ --cellar:#1D1814; /* warm dark photographic band */ /* Flags */ --flag-bg:#FFF3C4; --flag-ink:#6B4E00; /* [KEN TO CONFIRM] markers, review only */ /* Type */ --f-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --t-display:64px; --t-h1:48px; --t-h2:36px; --t-h3:24px; --t-h4:19px; --t-lead:20px; --t-body:17px; --t-small:15px; --t-label:12px; /* Spacing (4px base) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; /* Radii, shadows, layout */ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px; --sh-sm:0 1px 2px rgba(20,24,31,.06); --sh-md:0 1px 2px rgba(20,24,31,.05),0 8px 24px rgba(20,24,31,.07); --sh-lg:0 2px 4px rgba(20,24,31,.05),0 24px 48px rgba(20,24,31,.10); --wrap:1200px; --gutter:48px; --nav-h:72px; } @media (max-width:760px){ :root{--t-display:40px;--t-h1:34px;--t-h2:28px;--t-h3:21px;--t-lead:18px;--t-body:16px;--gutter:20px;--nav-h:64px} } /* ---------- 2. Base ---------- */ *,*:before,*:after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-sans);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} h1,h2,h3,h4,p,ul,ol,figure{margin:0} h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance} h3,h4{text-wrap:pretty} .display{font-size:var(--t-display);line-height:1.04;letter-spacing:-.035em} h1,.h1{font-size:var(--t-h1);letter-spacing:-.03em} h2,.h2{font-size:var(--t-h2)} h3,.h3{font-size:var(--t-h3)} h4,.h4{font-size:var(--t-h4);letter-spacing:-.01em} p+p{margin-top:var(--s-4)} a{color:var(--blue);text-underline-offset:3px} a:hover{color:var(--blue-700)} :focus-visible{outline:3px solid var(--blue);outline-offset:2px} .lead{font-size:var(--t-lead);line-height:1.55;color:var(--graphite)} .muted{color:var(--graphite)} .small{font-size:var(--t-small)} .wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)} .section{padding:var(--s-9) 0} .section--tight{padding:var(--s-8) 0} .section--white{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .section--warm{background:var(--sandstone)} .section--dark{background:var(--night);color:#EEF0F3} .section--dark .lead,.section--dark .muted{color:#AEB5BF} .section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);margin-bottom:var(--s-7)} .section__head p{max-width:520px} @media (max-width:760px){.section{padding:var(--s-8) 0}.section--tight{padding:var(--s-7) 0}.section__head{display:block;margin-bottom:var(--s-6)}.section__head p{margin-top:var(--s-3)}} /* Mono label ("eyebrow") */ .label{display:block;font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--s-4)} .label--grey{color:var(--graphite)} .section--dark .label{color:#9FB4EA} .section--warm .label{color:var(--bark)} /* Grids */ .grid{display:grid;gap:var(--s-5)} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center} .split--60{grid-template-columns:1.15fr .85fr} .split--hero{grid-template-columns:1fr 1.05fr} .split--form{grid-template-columns:1.3fr .7fr;align-items:start} .split--cta{grid-template-columns:.8fr 1.2fr;align-items:start} @media (max-width:960px){.grid--4{grid-template-columns:repeat(2,1fr)}} @media (max-width:760px){.grid--2,.grid--3,.grid--4,.split,.split--60,.split--hero,.split--form,.split--cta{grid-template-columns:1fr}.split{gap:var(--s-6)}} /* ---------- 3. Wordmark ---------- */ .wordmark{display:inline-flex;align-items:center;gap:10px;font:600 24px/1 var(--f-sans);letter-spacing:-.03em;color:var(--ink);text-decoration:none} .wordmark:hover{color:var(--ink)} .wordmark__glyph{position:relative;width:18px;height:18px;background:var(--blue);border-radius:3px;flex:none} .wordmark__glyph:after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:var(--signal)} .wordmark--light{color:#fff}.wordmark--light:hover{color:#fff} /* Venture lockup: "FermentSense by Jundra" */ /* ---------- 4. Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:var(--r-sm);border:1px solid var(--blue);background:var(--blue);color:#fff;font:600 16px/1.25 var(--f-sans);text-align:center;text-decoration:none;cursor:pointer;transition:background .15s} .btn:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff} .btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)} .btn--secondary:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .btn--light{background:#fff;color:var(--ink);border-color:#fff}.btn--light:hover{background:#E8EAEE;color:var(--ink);border-color:#E8EAEE} .btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}.btn--ghost-light:hover{background:rgba(255,255,255,.1);color:#fff} .btn--sm{min-height:40px;padding:0 16px;font:500 13px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase} .btn[disabled],.btn--disabled{opacity:.55;cursor:not-allowed} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)} .link-arrow{font-weight:600;text-decoration:none}.link-arrow:after{content:" \2192"} /* ---------- 5. Tags and labels ---------- */ .tag{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r-sm);font:500 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} .tag--status{background:var(--white);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 12px} .tag--status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)} .tag--warm{background:var(--sandstone);color:var(--bark);border:1px solid var(--sand);border-radius:var(--r-pill);padding:6px 12px} .tag--neutral{background:var(--blue-050);color:var(--blue);border-radius:var(--r-pill);padding:6px 12px} .confirm{background:var(--flag-bg);color:var(--flag-ink);font:500 .8em/1.3 var(--f-mono);padding:1px 6px;border-radius:3px;white-space:nowrap} /* ---------- 6. Media ---------- */ .media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#E9E9E4;box-shadow:var(--sh-md)} .media img{width:100%;height:100%;object-fit:cover} .media--flat{box-shadow:none} .media--wide{aspect-ratio:16/9}.media--43{aspect-ratio:4/3}.media--square{aspect-ratio:1/1}.media--tall{aspect-ratio:4/5} .media figcaption,.caption{font-size:13px;line-height:1.5;color:var(--graphite);margin-top:var(--s-3)} /* ---------- 7. Nav ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(246,246,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)} .nav__in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-6)} .nav__links{display:flex;gap:var(--s-6);list-style:none;padding:0} .nav__links a{color:var(--graphite);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent} .nav__links a:hover{color:var(--ink)} .nav__links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)} .nav__cta{display:flex;align-items:center;gap:var(--s-4)} .nav__toggle{display:none;width:44px;height:44px;border:1px solid var(--rule);background:var(--white);border-radius:var(--r-sm);cursor:pointer;padding:0;align-items:center;justify-content:center} .nav__toggle span,.nav__toggle span:before,.nav__toggle span:after{display:block;width:18px;height:2px;background:var(--ink);position:relative;content:""} .nav__toggle span:before{position:absolute;top:-6px}.nav__toggle span:after{position:absolute;top:6px} @media (max-width:760px){ .nav__toggle{display:inline-flex} .nav__cta .btn{display:none} .nav__links{display:none;position:absolute;left:0;right:0;top:var(--nav-h);flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--rule);padding:var(--s-2) var(--gutter) var(--s-5);box-shadow:var(--sh-md)} .nav__links a{display:block;padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink)} .nav__links a[aria-current="page"]{border-bottom-color:var(--rule);color:var(--blue)} .nav.is-open .nav__links{display:flex} } /* ---------- 8. Hero ---------- */ .hero{padding:var(--s-9) 0 var(--s-9)} .hero__copy .lead{margin-top:var(--s-5);max-width:560px} .hero__copy .btn-row{margin-top:var(--s-6)} .page-hero{padding:var(--s-9) 0 var(--s-8);border-bottom:1px solid var(--rule)} .page-hero .lead{margin-top:var(--s-5);max-width:720px} @media (max-width:760px){.hero{padding:var(--s-7) 0 var(--s-8)}.page-hero{padding:var(--s-7) 0 var(--s-7)}} /* ---------- 9. Cards ---------- */ .card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s-6);box-shadow:var(--sh-sm);display:flex;flex-direction:column} .card h3{margin-bottom:var(--s-3)} .card p{color:var(--graphite)} .card .link-arrow{margin-top:auto;padding-top:var(--s-5)} .card__num{font:500 12px var(--f-mono);color:var(--blue);letter-spacing:.1em;margin-bottom:var(--s-6)} .card--venture{padding:0;overflow:hidden} .card--venture .card__media{position:relative;aspect-ratio:16/10;background:var(--sandstone);overflow:hidden} .card--venture .card__media img{width:100%;height:100%;object-fit:cover} .card--venture .card__body{padding:var(--s-6);display:flex;flex-direction:column;flex:1} .card--venture .card__body .tag{align-self:flex-start;margin-bottom:var(--s-4)} .card--warm{background:var(--sandstone);border-color:var(--sand)} .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--s-5);background: repeating-linear-gradient(90deg,rgba(37,71,160,.07) 0 1px,transparent 1px 28px), repeating-linear-gradient(0deg,rgba(37,71,160,.07) 0 1px,transparent 1px 28px),var(--blue-050)} .ph--warm{background:repeating-linear-gradient(90deg,rgba(110,98,89,.09) 0 1px,transparent 1px 28px),repeating-linear-gradient(0deg,rgba(110,98,89,.09) 0 1px,transparent 1px 28px),var(--sandstone)} .ph span{font:600 30px/1 var(--f-sans);letter-spacing:-.03em;color:var(--ink)} .ph small{position:absolute;right:14px;top:14px;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)} /* Spec list (rows with hairlines) */ .specs{list-style:none;padding:0;border-top:1px solid var(--rule)} .specs li{padding:var(--s-4) 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:28px 1fr;gap:var(--s-3)} .specs li:before{content:"";width:8px;height:8px;margin-top:9px;background:var(--blue);border-radius:2px} .section--dark .specs,.section--dark .specs li{border-color:#2A3038} /* Fact strip */ .facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)} .facts>div{padding:var(--s-5) var(--s-5) 0 0} .facts b{display:block;font-size:var(--t-h4);margin-bottom:var(--s-2)} .facts p{color:var(--graphite);font-size:var(--t-small)} @media (max-width:760px){.facts{grid-template-columns:1fr}.facts>div{padding:var(--s-4) 0;border-bottom:1px solid var(--rule)}} /* Steps */ .steps{counter-reset:step} .step{border-top:2px solid var(--ink);padding-top:var(--s-5)} .step__n{font:500 12px var(--f-mono);letter-spacing:.12em;color:var(--blue);text-transform:uppercase} .step h3{margin:var(--s-3) 0 var(--s-3)} .step p{color:var(--graphite)} /* FAQ */ .faq{border-top:1px solid var(--rule)} .faq>div{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s-6);padding:var(--s-5) 0;border-bottom:1px solid var(--rule)} .faq h3,.faq h4{font-size:var(--t-h4);letter-spacing:-.01em} .faq p{color:var(--graphite)} @media (max-width:760px){.faq>div{grid-template-columns:1fr;gap:var(--s-2)}} /* Price panel */ .price{background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--blue);border-radius:var(--r-md);padding:var(--s-6);box-shadow:var(--sh-md)} .price__fig{font:600 56px/1 var(--f-sans);letter-spacing:-.04em} .price__fig small{font:500 15px var(--f-mono);letter-spacing:0;color:var(--graphite);margin-left:6px} .price__rows{list-style:none;padding:0;margin-top:var(--s-5);border-top:1px solid var(--rule)} .price__rows li{padding:var(--s-3) 0;border-bottom:1px solid var(--rule);font-size:var(--t-small)} .price__note{margin-top:var(--s-4);font-size:14px;color:var(--graphite)} /* Quote-free callout */ .callout{border-left:3px solid var(--ochre);padding:var(--s-2) 0 var(--s-2) var(--s-5)} /* ---------- 10. Forms ---------- */ .form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)} .form .full{grid-column:1/-1} .field label{display:block;font-weight:600;font-size:15px;margin-bottom:var(--s-2)} .field .hint{display:block;font-size:13px;color:var(--graphite);margin-top:6px} .input,.select,.textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--rule-strong);border-radius:var(--r-sm);background:var(--white);color:var(--ink);font:400 16px/1.4 var(--f-sans)} .textarea{min-height:120px;resize:vertical} .select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--graphite) 50%),linear-gradient(135deg,var(--graphite) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)} .check{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:500} .check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue);flex:none} .privacy{font-size:14px;line-height:1.55;color:var(--graphite);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:var(--s-4)} .mock-note{display:flex;gap:10px;align-items:center;font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--flag-ink);background:var(--flag-bg);border-radius:var(--r-sm);padding:10px 12px} .form-panel{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s-7);box-shadow:var(--sh-md)} @media (max-width:760px){.form{grid-template-columns:1fr}.form-panel{padding:var(--s-5)}} /* ---------- 11. Footer ---------- */ .footer{background:var(--night);color:#C9CED6;padding:var(--s-8) 0 var(--s-6);font-size:15px} .footer a{color:#E6E9EE;text-decoration:none}.footer a:hover{color:#fff;text-decoration:underline} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s-6)} .footer h4{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#8E96A3;margin-bottom:var(--s-4)} .footer ul{list-style:none;padding:0;display:grid;gap:10px} .footer__base{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid #2A3038;display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;font:500 12px/1.6 var(--f-mono);color:#8E96A3} @media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-column:1/-1}} /* ---------- 12. Venture (FermentSense) page modifiers ---------- */ .venture-hero{position:relative;background:var(--cellar);color:#F4F1EC;overflow:hidden} .venture-hero__img{position:absolute;inset:0 0 0 42%} .venture-hero__img img{width:100%;height:100%;object-fit:cover;object-position:46% 45%} .venture-hero__img:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--cellar) 0%,rgba(29,24,20,.55) 22%,rgba(29,24,20,0) 45%)} .venture-hero__copy{position:relative;z-index:2;max-width:600px;padding:var(--s-9) 0 var(--s-9)} .venture-hero h1{color:#fff} .venture-hero .lead{color:#D9D2C8;margin-top:var(--s-5)} .venture-hero .aud{margin-top:var(--s-4);font:500 14px/1.5 var(--f-mono);color:#BFB6AA} .venture-hero .btn-row{margin-top:var(--s-6)} .venture-hero .tag--status{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;margin-bottom:var(--s-5)} @media (max-width:760px){ .venture-hero__img{position:relative;inset:auto;height:340px} .venture-hero__img:before{background:linear-gradient(0deg,var(--cellar) 0%,rgba(29,24,20,0) 40%)} .venture-hero__copy{padding:var(--s-5) 0 var(--s-8)} } .problem{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)} .problem li{background:var(--white);border:1px solid var(--sand);border-top:3px solid var(--ochre);border-radius:var(--r-md);padding:var(--s-6);font-size:var(--t-body);line-height:1.55} @media (max-width:760px){.problem{grid-template-columns:1fr}} .cta-band{background:var(--blue);color:#fff;border-radius:var(--r-lg);padding:var(--s-8);display:flex;justify-content:space-between;align-items:center;gap:var(--s-6)} .cta-band p{color:#D6DEF3;margin-top:var(--s-3)} @media (max-width:760px){.cta-band{display:block;padding:var(--s-6)}.cta-band .btn{margin-top:var(--s-5)}} /* Utilities */ .mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}.mt-8{margin-top:var(--s-8)} .maxw-640{max-width:640px}.maxw-760{max-width:760px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hide-mobile{}@media (max-width:760px){.hide-mobile{display:none}} .media--hero img{object-position:62% 55%} @media (max-width:760px){.form .btn,.price .btn{width:100%}} /* Round 3: Selected work (two clients approved by Ken, 2 Nov 2026). Logos unaltered, on white. */ .work-card{display:flex;flex-direction:column;gap:var(--s-3)} .work-card__logo{height:96px;display:flex;align-items:center;padding:0 0 var(--s-4);margin-bottom:var(--s-2);border-bottom:1px solid var(--rule)} .work-card__logo img{display:block;width:auto;max-width:100%} .work-card h3{margin:0}.work-card p{margin:0} .work-card .tag{align-self:flex-start} /* Team portraits (r4): small, consistent circular crop on the sandstone panel. Source photos are 155–190 px, so they are shown small rather than full-bleed. */ /* ---------- Round 4 additions ---------- */ .work-card__photo{margin:var(--s-2) 0 0} .work-card__photo img{display:block} .work-card__credit{margin:var(--s-2) 0 var(--s-4)} .card--venture .card__media--shot{background:#ECF0F9} img{height:auto} .media img,.card--venture .card__media img,.venture-hero__img img{height:100%} /* r4: links inside footer text runs need a non-colour cue (WCAG 1.4.1) */ .footer__base a{text-decoration:underline;text-underline-offset:2px} /* ===== Round 4 designer merge (designer/designer-overrides.css §1-4, §6) ===== */ /* 1. FermentSense header: parent wordmark first, then product name (replaces .lockup in the nav) */ .brandbar{display:inline-flex;align-items:center;gap:14px;min-width:0} .brandbar .wordmark{flex:none} .brandbar__rule{width:1px;height:24px;background:var(--rule-strong);flex:none} .brandbar__product{font:600 20px/1 var(--f-sans);letter-spacing:-.025em;color:var(--ink);text-decoration:none;white-space:nowrap} .brandbar__product:hover{color:var(--blue)} @media (max-width:760px){ .brandbar{gap:10px} .brandbar .wordmark{font-size:21px;gap:8px} .brandbar .wordmark__glyph{width:16px;height:16px} .brandbar .wordmark__glyph:after{width:4px;height:4px;right:3px;top:3px} .brandbar__rule{height:20px} .brandbar__product{font-size:17px} } /* 2. Mobile: the header CTA is hidden at <=760px, so put "Register interest" inside the open menu */ .nav__links .nav__menu-cta{display:none} @media (max-width:760px){ .nav__links .nav__menu-cta{display:block;padding-top:var(--s-4)} .nav__links .nav__menu-cta a.btn{display:flex;justify-content:center;border-bottom:0;color:#fff;font-size:15px;padding:14px 18px} } /* 3. Replace inline styles with classes (CSS allows inline styles today, so this is tidiness, not a bug) */ .display--venture{font-size:clamp(38px,4.4vw,58px);text-wrap:balance} /* fermentsense h1.display */ .split--top{align-items:start} /* about + services .split */ .mt-section{margin-top:32px} /* services IoT figure */ .page-hero--warm{border-bottom-color:var(--sand)} /* ventures page-hero */ .lead--bark{color:var(--bark)} /* ventures page-hero lead */ .lead--ink{color:var(--ink)} /* about intro lead */ .footer__blurb{max-width:340px} /* footer brand paragraph, every page */ .work-card__logo img{height:56px;width:auto} /* client logos, home + services */ .section--flush-top{padding-top:0} /* about CTA section */ /* 4. About team cards: own component instead of card--venture + inline aspect-ratio */ .team-card__photo{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--blue-050)} .team-card__photo img{width:176px;height:176px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #fff} /* §6 photo credits */ .media--34{aspect-ratio:3/4;max-width:480px;justify-self:center;width:100%} .footer__credits{flex-basis:100%;margin:0;font:400 11px/1.6 var(--f-mono);color:#8E96A3} .footer__credits a{color:#C9CED6} /* §7 Accessibility fixes (Round 4b, from the axe + manual pass at 390). */ /* 7a Skip link. Needs the HTML in MERGE.md G1: