/* Type override for the plain homepage variant. Poppins throughout, headings and body. Both are Google Fonts under the SIL Open Font License. Scoped to this page only. */ :root{ --sans:'Poppins',system-ui,-apple-system,sans-serif; --serif:'Poppins',system-ui,sans-serif; } body{font-family:'Poppins',system-ui,sans-serif} h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif} /* Poppins is a geometric sans, so the display settings the serif needed are wrong for it */ .plain h1 em{font-style:normal;font-weight:600;color:var(--oxblood)} .display,.display em{font-weight:600;letter-spacing:-.015em;line-height:1.15} .display em{font-style:normal;color:var(--oxblood)} .strip__n{font-family:'Poppins',sans-serif;font-weight:600;font-size:21px} .count__n,.wall__num b,.feature-row h2,.report h3,.finding h4,.close h2,.qa__q{font-family:'Poppins',system-ui,sans-serif} .close h2,.close h2 em{font-weight:600;font-style:normal;letter-spacing:-.02em;line-height:1.15} .feature-row h2 em,.wall__num b,.count__n{font-style:normal;font-weight:600} .finding h4,.report h3{font-weight:600;letter-spacing:-.01em} .open__thesis,.said p,.lead-story__standfirst{font-family:'Poppins',system-ui,sans-serif} /* the wordmark stays Archivo — it is fixed by the brand guide and must not follow the page font */ .wordmark{font-family:'Archivo',system-ui,sans-serif;font-size:24px} /* the menu: Poppins, larger, more air */ .nav__links{font-family:'Poppins',system-ui,sans-serif;font-size:16px;font-weight:500;gap:26px} .nav__item{font-weight:500} .nav__bar{padding:24px clamp(20px,3vw,40px)} /* The spacing between menu items is padding on the items themselves, not a gap between them, so there is no dead strip where the cursor drops back to an arrow. */ .nav__links{gap:0} .nav__links>a,.nav__item{padding:12px 13px;margin-block:-12px} @media (max-width:1280px){ .nav__links[data-open="true"]{font-size:18px;gap:0} .nav__links>a,.nav__item{padding:11px 0;margin-block:0;min-height:44px} } /* Sizes and text colour matched to Latacora's stylesheet: body 16px, text #1A1818, largest heading 3.05rem (~49px). */ :root{ --ink:#1A1818; --ink-2:#1A1818; } .said p{font-size:16px;line-height:1.75;color:#1A1818} .said .mono-label{margin-bottom:18px} .plain__act{margin-top:clamp(30px,3.6vw,44px)} .btn{font-size:15px;padding:14px 26px} /* Tighter vertical rhythm */ .nav__bar{padding:18px clamp(20px,3vw,40px)} .plain{padding:clamp(54px,6.5vw,92px) var(--gutter) clamp(40px,4.6vw,62px)} .plain__act{margin-top:clamp(22px,2.4vw,30px)} .said{padding:clamp(38px,4.2vw,56px) var(--gutter)} .said p + p{margin-top:13px} .said .mono-label{margin-bottom:14px} /* Hero back to the larger setting — the tightening applies to the body text only */ .plain{padding:clamp(90px,14vw,170px) var(--gutter) clamp(70px,9vw,110px)} .plain__act{margin-top:clamp(40px,5vw,64px)} .btn{font-size:16px;padding:16px 30px} /* Body text matched to Latacora's measured values: 18px, 28px line spacing. Colour stays near-black rather than their slate grey. */ .said p{font-size:18px;line-height:28px;color:#1A1818} .said p + p{margin-top:20px} /* less air above the pillars heading, now that the eyebrow above it is gone */ .services{padding-top:clamp(38px,4.4vw,58px)} .services h2{margin-bottom:26px} /* everything in Poppins */ .said p,.block p,.builds span,.fit2 span,.step2 p,.proof2 p,.plain__lede,.svc,.card p,.services__lede, .qa__a,.qa__q,.mono-label,.strip__k,.footer,.footer__col,.close p{font-family:'Poppins',system-ui,sans-serif} .said p,.block p,.step2 p,.proof2 p{font-weight:400} /* the headline runs the full width of the column instead of stopping short */ /* two lines at every width: the break is explicit and the size fits the column */ .plain .plain__body{max-width:var(--container)} /* The homepage headline. One rule, so nothing further up the file can win. Sized to fit the column at 1200px and above, with the break forced in the markup. */ .plain h1{font-weight:600;letter-spacing:-.02em;line-height:1.1;max-width:none; font-size:clamp(30px,4.9vw,68px)} /* the wordmark lines up with the hero text, and sits a little larger */ .nav{padding:0 var(--gutter)} .nav__bar{max-width:var(--container);margin:0 auto;padding:20px 0} .wordmark{font-size:28px} /* lighter cream on the about band */ .said{background:#FFFDF4} /* Rounded corners on images and panels, 16px, as on categorynorth */ .shot{border-radius:16px;overflow:hidden} .shot img{border-radius:8px} .shot--photo img{border-radius:16px} .shot--pair figure{border-radius:16px;overflow:hidden} .shot--pair img{border-radius:8px} .drop{border-radius:16px;overflow:hidden} .pricetag{border-radius:12px} .quote{border-radius:0} .hww .dash,.hww .reqcard,.hww .chip,.hww .editor,.hww .editor__ai,.hww .node{border-radius:12px} .hww .hww__bar{border-radius:16px} /* buttons fully rounded, as on categorynorth */ .btn{border-radius:999px} /* no rule under the top bar, and less air above the headline */ .nav{border-bottom:0} .plain{padding-top:clamp(34px,4.4vw,64px)} /* gap above the headline */ .plain{padding-top:150px} /* the hero paragraphs run the full column, like the homepage headline */ .plain__lede{max-width:none} /* no cream anywhere — white throughout */ .cream,.said,.onward,.prod,.section--white,.block{background:#FFFFFF} .card,.drop{background:#FFFFFF} .btn--invert{background:#FFFFFF} .shot,.shot--pair figure,.prod__card{background:#FFFFFF} /* a rule between the hero and the section below it, and a heading on that section */ .said{border-top:1px solid var(--rule)} .said h2{font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 22px} /* every hero occupies the same height as the Application Development one */ .plain{min-height:622px;display:flex;align-items:flex-start;box-sizing:border-box} .plain__body{width:100%} /* case study images at half size */ .case .shot{max-width:590px} /* A UI screenshot is unreadable at 590px, so the panel runs the full column, one per row. A file smaller than the column sits centred at its own size rather than being blown up, and every panel still lines up down the page. */ .case .shot--ui{max-width:none;margin-top:34px} .case .shot--ui img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto} .case .shot--ui + .shot--ui{margin-top:26px} .case .shot--ui figcaption{text-align:left} .case .shot--photo{max-width:380px} /* A screenshot needs to be read, so it runs wider than a supporting photograph. */ .case .shot--photo.shot--wide{max-width:820px} /* Two photographs in one section sit as a level row, not stacked apart at different sizes on the left edge. */ .case .shot--pair{grid-template-columns:1fr 1fr;max-width:920px;gap:clamp(18px,2vw,26px)} .case .shot--pair figure{padding:14px} .case .shot--pair img{height:300px;object-fit:cover;object-position:center} .case .shot--pair figcaption{margin:12px 2px 0;font-size:13.5px;line-height:1.45;color:var(--muted)} @media (max-width:820px){ .case .shot--pair img{height:220px} } /* main screenshot on the left, the two smaller ones stacked beside it */ .case .shot-group{display:grid;grid-template-columns:590px 1fr;gap:20px;align-items:start;margin-top:26px} .case .shot-group .shot{margin-top:0;max-width:590px} .case .shot-stack{display:flex;flex-direction:column;gap:20px} .case .shot-stack figure{margin:0;padding:12px;background:#FFFFFF;border:1px solid var(--rule);border-radius:16px} .case .shot-stack img{display:block;width:100%;height:150px;object-fit:contain;border-radius:8px} @media (max-width:1000px){ .case .shot-group{grid-template-columns:1fr} } /* portrait phone screenshots sit side by side, at their own proportions */ .case .shot-stack--phones{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .case .shot-stack--phones img{height:auto;object-fit:contain} @media (max-width:1000px){ .case .shot-stack--phones{grid-template-columns:1fr 1fr} } /* AI Systems: workshop section */ .ws-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,3vw,48px);align-items:center;margin-top:30px} .ws-photo{margin-top:0;max-width:none} .ws-photo img{border-radius:16px;display:block;width:100%} .ws-list{display:flex;flex-direction:column} .ws-item{padding:16px 0;border-top:1px solid var(--rule)} .ws-item:first-child{border-top:0;padding-top:0} .ws-item b{display:block;font-size:16.5px;font-weight:600;margin-bottom:4px} .ws-item p{font-size:15px;line-height:1.55;color:var(--muted);margin:0;max-width:none} @media (max-width:900px){ .ws-row{grid-template-columns:1fr} } /* AI Systems: evidence strip */ /* Figures — proof form 1 (Part 40). Three numbers, each with one line and a source under a hairline. Ruled columns and a shared baseline for the source line, so a two-line source does not lift its rule out of alignment. Upgraded 4 Sep 2026 from the treatment drawn on proof-forms.html; twelve pages use this markup, so it is one component and not a per-page style. */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px} .stat{display:flex;flex-direction:column;padding:6px 30px 0 26px;border-left:1px solid var(--rule-2)} .stat:first-child{border-left:0;padding-left:0} .stat b{display:block;font-size:clamp(34px,4vw,50px);font-weight:600;letter-spacing:-.03em;line-height:1; margin-bottom:0;color:var(--ink);font-variant-numeric:tabular-nums; min-height:clamp(34px,4vw,50px);display:flex;align-items:flex-end} .stat:first-child b{color:var(--oxblood)} /* A label too long to sit on one line at the full size. Keeps the row aligned. */ .stat--sm b{font-size:clamp(24px,2.5vw,31px);line-height:1.06} .stat b small{font-size:.5em;font-weight:500;letter-spacing:0;margin-left:2px} .stat span{display:flex;flex-direction:column;flex:1;margin-top:18px; font-size:16px;line-height:1.55;color:var(--ink-2);max-width:none} .stat i{display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule-2);font-style:normal; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--label); min-height:52px} /* holds two lines, so the rule sits level across the row */ .stats--two{grid-template-columns:repeat(2,1fr);max-width:820px} @media (max-width:900px){.stats,.stats--two{grid-template-columns:1fr} .stat{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--rule-2);padding-top:22px} .stat:first-child{border-top:0;padding-top:6px}} /* Article page */ .plain--article{min-height:auto;padding-bottom:10px} .art-title{max-width:16ch} .art-meta{margin-top:20px;font-size:21px;line-height:1.5;color:var(--muted);max-width:58ch;text-wrap:balance} .article{padding:clamp(10px,2vw,24px) var(--gutter) clamp(56px,6vw,84px)} .article__in{max-width:880px;margin:0 auto} /* The hero on the older article template, sized to the reading column. */ .art-hero{max-width:880px;margin:6px auto 40px;padding:0 var(--gutter,24px)} .art-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:10px; border:1px solid var(--rule)} .art-lede{font-size:21px;line-height:1.6;color:#1A1818;font-weight:400;margin:0 0 8px} .article h2{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:44px 0 16px} .article p{font-size:18px;line-height:29px;color:#1A1818;margin:0 0 18px} .art-pull{margin:40px 0;padding:6px 0 6px 26px;border-left:3px solid var(--oxblood)} .art-pull p{font-size:22px;line-height:1.5;font-weight:500;margin:0} .art-refs{margin-top:48px;padding-top:22px;border-top:1px solid var(--rule)} .art-refs p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:8px 0 0} .art-next{margin-top:36px;padding:24px 28px;background:#FFFDF4;border:1px solid var(--rule);border-radius:16px} .art-next p{margin:0 0 8px;font-size:15.5px;color:var(--muted)} /* Article: the related grid. Drawn whether or not the articles exist yet — Part 8, "the prototype shows the whole product" (3 Sep 2026). */ .art-rel{margin-top:44px;padding-top:26px;border-top:1px solid var(--rule)} .art-rel__k{margin:0 0 22px;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--oxblood)} .art-rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)} .art-rel__grid a{display:block;padding-top:18px;border-top:1px solid var(--rule-2);color:inherit;text-decoration:none} .art-rel__grid a:hover h3{color:var(--oxblood)} .art-rel__grid h3{margin:0 0 8px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em} .art-rel__grid p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)} @media(max-width:720px){.art-rel__grid{grid-template-columns:1fr;gap:0} .art-rel__grid a{padding:18px 0}.art-rel__grid a+a{border-top:1px solid var(--rule-2)}} /* Article: tables and compare block */ .art-tablewrap{margin:24px 0 26px;overflow-x:auto} .art-table{width:100%;border-collapse:collapse;font-size:16px} .art-table th{text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 16px 10px 0;border-bottom:2px solid #221C1B} .art-table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums} .art-table td:nth-child(2),.art-table td:nth-child(3),.art-table th:nth-child(2),.art-table th:nth-child(3){text-align:right;padding-right:0;padding-left:16px} .art-compare{margin:26px 0 30px;display:grid;gap:12px} .art-compare__was{padding:16px 22px;border:1px solid var(--rule);border-radius:14px;color:var(--muted);font-size:17px} .art-compare__now{padding:16px 22px;border:1px solid var(--oxblood);border-radius:14px;font-size:17px;font-weight:500} /* Article: tags + byline */ .art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .art-byline{margin-top:18px;font-size:15px;color:var(--muted)} .art-byline b{font-weight:600;color:#1A1818} /* article hero shares the reading column */ .plain--article .plain__body{max-width:880px;margin:0 auto} /* Article h3 + wide table cells */ .article h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:32px 0 10px} .art-table--wide td:nth-child(2),.art-table--wide th:nth-child(2){text-align:left;padding-left:24px;padding-right:0} .art-table--wide td:first-child{font-weight:500;white-space:nowrap} /* Article: code block */ .art-code{margin:22px 0 26px;padding:20px 24px;background:#221C1B;border-radius:14px;overflow-x:auto} .art-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;color:#FEF9E7;white-space:pre} /* The archive hero states a name, not a proposition, so it does not need the service-page height. */ .plain--tight{min-height:auto;padding-top:clamp(56px,7vw,86px);padding-bottom:clamp(30px,3.5vw,44px)} /* Contact is the one action in the nav, so it carries the button. */ .nav__cta{background:#8A0609;color:#FEF9E7;border-radius:4px;font-weight:600; padding:9px 18px;margin-left:6px;white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease} .nav__cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(138,6,9,.7);color:#FEF9E7} .nav__cta::after{display:none} /* On a phone the button sits in the bar next to the burger, and leaves the panel. */ .nav__cta--bar{display:none} @media (max-width:1280px){ .nav__cta--bar{display:inline-block;margin-right:14px;padding:10px 20px;font-size:15px} .nav__links .nav__cta{display:none} } /* Address links out to Google Maps */ .addr-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(254,249,231,.28);transition:border-color .18s ease,color .18s ease} .addr-link:hover{color:#fff;border-bottom-color:rgba(254,249,231,.7)} .cf__side .addr-link{border-bottom-color:rgba(26,24,24,.22)} .cf__side .addr-link:hover{color:#8A0609;border-bottom-color:#8A0609} /* Legal pages — privacy, AI policy. The reading column has to start on the same left edge as the hero headline. `.block__in` is `max-width:var(--container);margin:0 auto`, so narrowing it to 760px centres that column in the viewport instead, and the text lands about 200px to the right of the H1 above it. The container keeps its width and the column sits inside it, left-aligned. Replaces the inline max-width these pages carried — see the note at the top of site.css. */ .legal__col{max-width:760px} .legal__col p{max-width:none} /* `.block h2` has no top margin, which is right for a heading that opens a section and wrong for the run of headings on these pages. */ .legal__col h2{margin-top:clamp(34px,3.4vw,46px)} .legal__col > :first-child{margin-top:0} /* Nothing else on the site sets prose lists, so an unstyled