/* Framilton's brand: white ground, black hierarchy, turquoise actions. */
:root { --ink:#142423; --blue:#09747a; --blue-dark:#07585d; --blue-field:#09747a; --blue-light:#f0f7f5; --blue-mid:#b2d6d0; --body:17px; --small:14px; --title:clamp(30px,3.5vw,48px); --gutter:clamp(24px,5vw,80px); --motion-duration-fast:200ms; --motion-duration-enter:260ms; --motion-duration-reveal:420ms; --motion-duration-page:180ms; }
h1,h2,h3 { font-weight:650; letter-spacing:-.045em; }
p { line-height:1.65; }
.site-header { min-height:80px; padding-block:16px; border-bottom:1px solid #e1e9e6; }
.wordmark,.footer-wordmark,.site-footer .footer-wordmark:hover { color:#111; font-weight:700; }
.wordmark { align-items:center; gap:12px; }
.wordmark svg { width:34px; height:34px; color:#09747a; fill:#09747a; }
.wordmark-name { display:flex; flex-direction:column; font-size:16px; line-height:1.1; letter-spacing:-.04em; }
.wordmark-name>span { display:block; }
.brand-dot { display:inline-block; width:.22em; height:.22em; border-radius:50%; margin-left:.08em; vertical-align:baseline; background:#09747a; font-style:normal; }
.site-nav { font-size:14px; gap:28px; }
.nav-cta,.button { border-radius:6px; font-weight:550; }
.nav-cta { min-height:44px; padding:10px 16px; }
.button { min-height:48px; padding:14px 20px; font-size:15px; gap:24px; }
.hero { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:64px; min-height:0; padding-block:72px; background:#fff; color:var(--ink); }
.hero-copy { padding:0; }
.hero h1 { font-size:clamp(46px,5.4vw,76px); font-weight:650; line-height:1.04; letter-spacing:-.055em; white-space:normal; }
.hero-description { font-size:18px; color:#526562; max-width:44ch; margin-top:26px; padding:0; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:30px; }
.hero-actions .button { margin:0; }
.hero-proof { min-width:0; margin:0; padding:24px; background:#e7f3f2; border-radius:12px; }
.hero-proof img { display:block; width:100%; height:auto; border:1px solid #c9ded9; border-radius:5px; }
.hero-proof figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; font-size:13px; line-height:1.6; color:#526562; }
.hero-proof figcaption strong { color:#142423; font-weight:600; }
.hero-proof figcaption a { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:14px; color:#07585d; font-weight:600; }
.page-hero { padding-block:64px; }
.page-hero h1 { font-size:clamp(42px,5.5vw,76px); }
.page-hero>p { font-size:18px; max-width:58ch; margin-top:24px; }
.section-opening h2,.page-cta h2,.case-section>h2,.case-related h2,.project-enquiry h2 { font-size:clamp(30px,3.5vw,48px); }
.section-opening { margin-bottom:36px; }
.section-opening>p,.project-intro p,.companion-project p,.case-section>p,.case-related p,.project-enquiry p { font-size:17px; }
.project-intro h3,.companion-project h3 { font-size:clamp(30px,4vw,52px); color:#111; }
.ecosystem { padding-block:64px; }
body[data-page=index] .ecosystem { background:#f0f7f5; }
.ecosystem-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.ecosystem-product { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:30px; border:1px solid #dce6e3; border-radius:8px; background:#fff; }
.ecosystem-category { font-size:13px; color:#526562; }
.ecosystem-product h3 { color:#111; font-size:clamp(25px,2.3vw,32px); margin-top:14px; line-height:1.2; }
.ecosystem-product p { font-size:16px; max-width:48ch; margin-top:16px; }
.ecosystem-status { margin-block:18px 22px; font-size:13px; line-height:1.6; color:#526562; }
.ecosystem-product .text-link { margin-top:auto; min-height:44px; font-size:15px; }
.ecosystem-note { margin-top:26px; font-size:14px; color:#526562; max-width:75ch; }
.ecosystem-eyebrow { font-size:14px!important; margin-bottom:20px; color:#09747a; }
.ecosystem-close { padding-block:56px; background:#e7f3f2; }
.ecosystem-close h2 { font-size:clamp(30px,3.5vw,48px); color:#111; }
.ecosystem-close p { max-width:64ch; margin-block:24px; font-size:17px; }
.home-expertise { display:grid; grid-template-columns:1fr 1fr; gap:72px; padding-block:80px; background:#fff; color:var(--ink); }
.home-expertise h2 { font-size:clamp(30px,3.5vw,48px); }
.home-expertise>div>p { margin-block:24px; font-size:17px; max-width:45ch; }
.service-list { list-style:none; margin:0; padding:0; display:grid; gap:28px; }
.service-list h3 { font-size:22px; }
.service-list p { margin-top:10px; font-size:16px; color:#526562; }
.page-cta { padding-block:64px; background:#e7f3f2; border-top:0; gap:48px; }
.page-cta p { font-size:17px; }
.page-cta .button { background:#09747a; color:#fff; }
.site-footer { padding-block:48px 24px; background:#fff; color:var(--ink); }
.footer-wordmark { font-size:52px; letter-spacing:-.055em; line-height:1; }
.footer-wordmark span { font-size:.52em; margin-top:8px; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:28px; font-size:14px; }
.footer-links a { min-height:44px; display:inline-flex; align-items:center; }
.footer-meta { margin-top:28px; font-size:13px; }
.work-showcase { padding-block:64px; }
[data-connected-work] { background:#e7f3f2; color:#142423; }
[data-connected-work] .connected-work-label { fill:#142423; }
[data-connected-work] .connected-work-print { fill:#09747a; }
[data-connected-work] [data-work-select] { border-radius:6px; background:#fff; color:#142423; }
[data-connected-work] [data-work-select][aria-pressed=true] { background:#09747a; color:#fff; }
[data-connected-work] [data-work-stage] h3 { color:#142423; font-size:23px; }
[data-connected-work] [data-work-stage] p,[data-connected-work] [data-work-stage] a { color:#142423; font-size:17px; }
[data-connected-work] figcaption { color:#526562; }
@media(max-width:1000px) { .hero { gap:32px; } .hero-proof { padding:16px; } .home-expertise { gap:36px; } }
@media(max-width:750px) { .site-header { min-height:72px; padding-block:14px; } .wordmark svg { width:32px; height:32px; } .wordmark-name { font-size:15px; } .hero { grid-template-columns:1fr; gap:32px; padding-block:40px; } .hero h1 { font-size:clamp(42px,9.6vw,58px); } .hero-description { font-size:17px; } .hero-actions .text-link { font-size:15px; } .hero-proof figcaption { font-size:13px; } .ecosystem { padding-block:48px; } .ecosystem-grid { grid-template-columns:1fr; gap:16px; } .ecosystem-product { padding:24px; } .ecosystem-product h3 { font-size:27px; } .page-hero { padding-block:40px; } .page-hero h1 { font-size:clamp(38px,8.5vw,58px); } .page-hero>p { font-size:17px; } .home-expertise { grid-template-columns:1fr; padding-block:48px; gap:32px; } .page-cta { padding-block:48px; gap:28px; } .footer-wordmark { font-size:40px; } .footer-links { gap:4px 20px; } .ecosystem-close { padding-block:40px; } }

/* Product-led composition: the brand accent is reserved for actions and selection. */
.hero { display:block; padding-block:64px 56px; }
.hero-copy { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:0 72px; }
.hero h1 { grid-row:1/3; max-width:9ch; }
.hero-description { margin-top:4px; max-width:44ch; }
.hero-actions { margin-top:24px; }
.product-showcase { margin-top:52px; border:1px solid #dce6e3; border-radius:12px; overflow:hidden; background:#f0f7f5; }
.product-tabs { display:flex; gap:8px; padding:12px; background:#fff; border-bottom:1px solid #dce6e3; }
.product-tabs button { min-height:44px; padding:12px 20px; border-radius:6px; background:transparent; color:#526562; font-size:14px; font-weight:550; }
.product-tabs button[aria-selected=true] { background:#09747a; color:#fff; }
.product-tabs button:hover:not([aria-selected=true]) { background:#e7f3f2; color:#142423; }
.product-preview { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr); align-items:center; min-height:560px; gap:36px; padding:40px; }
.preview-copy h2 { font-size:clamp(30px,3.2vw,44px); line-height:1.1; margin-top:16px; }
.preview-copy>p:not(.preview-kind) { font-size:16px; color:#526562; margin-top:20px; max-width:33ch; }
.preview-kind { font-size:13px; color:#07585d; }
.preview-copy .text-link { margin-top:24px; font-size:15px; min-height:44px; }
.preview-copy small { display:block; font-size:13px; color:#526562; line-height:1.6; margin-top:10px; }
.product-preview .hero-proof { padding:0; background:transparent; border-radius:0; }
.product-preview .hero-proof img { max-height:400px; object-fit:contain; background:#fff; }
.product-preview .hero-proof figcaption { display:block; margin-top:12px; }
.flow-preview,.block-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; min-height:350px; background:#fff; border-radius:8px; padding:28px; }
.flow-preview blockquote { margin:26px 0; font-size:clamp(26px,3vw,42px); line-height:1.25; letter-spacing:-.04em; text-align:center; color:#142423; }
.flow-preview figcaption,.block-preview figcaption { font-size:14px; color:#526562; text-align:center; line-height:1.6; }
.block-preview img { max-width:320px; width:100%; height:auto; }
body[data-page=index] .ecosystem { background:#fff; }
.ecosystem-grid { gap:0 40px; }
.ecosystem-product { padding:28px 0; border:0; border-top:1px solid #dce6e3; border-radius:0; }
.ecosystem-product h3 { margin-top:12px; }
.home-expertise { background:#f0f7f5; }
.site-header { position:relative; }
@media(max-width:1000px) { .hero-copy { gap:0 32px; } .product-preview { padding:28px; gap:24px; grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); } }
@media(max-width:750px) { .hero { padding-block:36px; } .hero-copy { display:block; } .hero h1 { max-width:none; } .hero-description { margin-top:24px; } .product-showcase { margin-top:32px; } .product-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:8px; } .product-tabs button { padding:10px; } .product-preview { grid-template-columns:1fr; min-height:0; padding:24px 20px; gap:24px; } .preview-copy h2 { font-size:32px; } .preview-copy>p:not(.preview-kind) { max-width:none; } .flow-preview,.block-preview { min-height:280px; padding:20px; } .ecosystem-product { padding:26px 0; } .ecosystem-grid { gap:0; } }