/* ========================================================================== Novamar Tech - shared site stylesheet (2026 redesign) Linked from every page through src/_includes/layouts/base.njk, under a content-hashed file name (see .eleventy.js), so it can be cached forever. Paired with assets/site.js (loaded in , no defer, so it can set the "js" class on before first paint). ONE ACCENT The only accent colour is blue. Use --accent on dark backgrounds and --accent-l on light ones. Never introduce a second accent hue. TWO SURFACES Dark sections are --deep, light sections are --paper. The older --ink and --paper-alt surfaces are kept as tokens but no longer used for section backgrounds. BREAKPOINTS (inherited by every page) 1100px and below : edge-bleeding photos drop into the page flow 1024px and below : multi-column grids drop to 2 columns, two-column splits stack, the header nav becomes a menu button, the header position label hides, ruled grids switch to simple top rules 820px and below : content-heavy 2-up grids drop to 1 column 640px and below : every grid is 1 column, section padding drops to 64px, container side padding becomes 22px CLASS REFERENCE (for page builders) -------------------------------------------------------------------------- Layout .wrap centred container, max 1160px (1092px of content) .wrap.wide wider container used by the Solutions area sections .sec page section, 104px vertical rhythm (116px from 1440px) .sec.dark / .sec.deeper deep navy background, white text .sec.light / .sec.light-alt cool light background, ink text .sec.rule-b hairline on the section's bottom edge .split two-column section body (narrow intro + wide content) Media .hero-media full-bleed photo or video behind a hero or a section .bleed photo pinned to the left or right page edge (.bleed.r / .bleed.l), absolutely positioned from 1101px up, in normal flow below that .band full-width photo strip between two sections .rule-dot hairline with a small square marker (.rule-dot.r puts the marker at the right end) Ruled grids (light sections) .lined vertical accent rules between columns, with a square marker at heading height (.panels, .steps) .cross crosshair rules with square markers where they meet (.areas, .grid6, .svc) Components .hbox translucent panel used in heroes .flow .flow-k .flow-list operational flow schematic .stack .stack-row .stack-k .stack-v key / value rows .areas .area .area-n .clist numbered areas with comma lists .panels .panel .slist panel grid with small tick lists .steps .step .step-n numbered outcomes row .timeline .tl-item .tl-n numbered process timeline .dotlist vertical list on a dotted rule .grid6 .adv three-up card grid .proof .proof-cell .proof-n large numbers with captions .cards .card .field case-study cards .ways .way two-up call-to-action panels .btn .btn.ghost .link-more buttons and links Motion .rv reveal on scroll; only hides while ========================================================================== */ /* ── fonts: self-hosted, so no visitor data goes to Google ──────────────── */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/archivo-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/archivo-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap; src:url(/assets/fonts/archivo-latin-600-normal.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap; src:url(/assets/fonts/archivo-latin-700-normal.woff2) format('woff2')} @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap; src:url(/assets/fonts/archivo-latin-800-normal.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')} @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap; src:url(/assets/fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2-variations'), url(/assets/fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2')} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap; src:url(/assets/fonts/source-serif-4-latin-opsz-italic.woff2) format('woff2-variations'), url(/assets/fonts/source-serif-4-latin-opsz-italic.woff2) format('woff2')} :root{ --deep:#04121F; --ink:#071E31; --paper:#F4F7FB; /* light sections: cool blue-tinted neutral */ --paper-alt:#E9EFF6; --accent:#4FA3FF; /* accent on dark: 7.2:1 on --deep */ --accent-hi:#8CC4FF; /* hover of the above */ --accent-l:#1A5FB4; /* accent on light: 5.9:1 on --paper */ --accent-l-hi:#0E4A93; /* hover of the above */ --rule-l:rgba(26,95,180,.5); /* structural rules on light: accent-l at 50% */ --rule-d:rgba(79,163,255,.55); /* structural rules on dark */ --line-d:rgba(255,255,255,.14); --line-l:rgba(7,30,49,.12); --glass:rgba(4,18,31,.72); --sans:'Archivo',system-ui,sans-serif; --serif:'Source Serif 4',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{margin:0;background:var(--deep);color:#fff;font-family:var(--sans); -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-wrap:break-word} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none;transition:color .2s ease,opacity .2s ease} a:hover{color:var(--accent)} p{margin:0 0 18px} h1,h2,h3{text-wrap:balance} button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0; cursor:pointer;-webkit-appearance:none;appearance:none} input,select,textarea{font:inherit;color:inherit;background:transparent; border:1px solid var(--line-d);border-radius:0;padding:12px 14px;min-height:44px; -webkit-appearance:none;appearance:none;width:100%} .sec.light input,.sec.light select,.sec.light textarea, .sec.light-alt input,.sec.light-alt select,.sec.light-alt textarea{ background:#fff;border-color:var(--line-l)} input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none} .sec.light input:focus,.sec.light textarea:focus,.sec.light-alt input:focus{border-color:var(--accent-l)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .sec.light :focus-visible,.sec.light-alt :focus-visible{outline-color:var(--accent-l)} [id]{scroll-margin-top:86px} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--deep); font-weight:600;font-size:14px;padding:14px 18px;z-index:80} .skip:focus{left:0;color:var(--deep)} /* ── layout ─────────────────────────────────────────────────────────────── */ .wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 34px;position:relative;z-index:1} .wrap.wide{max-width:1204px} .sec{padding:104px 0;position:relative} .sec.dark,.sec.deeper{background:var(--deep)} .sec.light,.sec.light-alt{background:var(--paper);color:var(--ink)} .sec.light a:hover,.sec.light-alt a:hover{color:var(--accent-l)} .sec.rule-b{border-bottom:1px solid var(--line-l)} .split{display:grid;grid-template-columns:.85fr 1.15fr; gap:clamp(36px,4.6vw,66px);align-items:start;margin-top:46px} .split.flush{margin-top:0} /* ── type ───────────────────────────────────────────────────────────────── */ .eyebrow{font-family:var(--mono);font-size:clamp(12px,1.05vw,14px);font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0} .sec.light .eyebrow,.sec.light-alt .eyebrow{color:var(--accent-l)} .h-xl{font-size:clamp(34px,6.2vw,60px);line-height:1.18;letter-spacing:-.028em; font-weight:700;margin:0} .h-lg{font-size:clamp(27px,3.4vw,42px);line-height:1.12;letter-spacing:-.02em; font-weight:700;margin:0} .h-sm{font-size:clamp(17.5px,1.4vw,19px);line-height:1.28;letter-spacing:-.01em; font-weight:600;margin:0} .lede{font-family:var(--serif);font-size:clamp(16.5px,1.3vw,18px);line-height:1.755; font-weight:300} .lede.lg,.head-l{font-size:clamp(17px,1.45vw,19.5px);line-height:1.62} .dim{opacity:.78} .mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase} .mono.accent{color:var(--accent)} .sec.light .mono.accent,.sec.light-alt .mono.accent{color:var(--accent-l)} .head-h{margin-top:18px;max-width:600px} .head-h.wide{max-width:none} .head-l{margin-top:24px;max-width:none} .quote{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,20px); line-height:1.5;opacity:.82;margin:32px 0 0;padding-left:18px; border-left:2px solid var(--accent);max-width:409px} .sec.light .quote,.sec.light-alt .quote{border-left-color:var(--accent-l)} .note{font-size:12.5px;line-height:1.65;opacity:.64;margin:26px 0 0;max-width:78ch} /* ── prose: legal pages, articles, long copy ────────────────────────────── */ .prose{max-width:72ch;font-size:clamp(15.5px,1.2vw,16.5px);line-height:1.75} .prose h2{font-size:clamp(21px,2.1vw,26px);line-height:1.2;letter-spacing:-.015em; font-weight:700;margin:44px 0 14px} .prose h3{font-size:clamp(17px,1.5vw,19px);line-height:1.25;letter-spacing:-.01em; font-weight:600;margin:30px 0 10px} .prose h2:first-child,.prose h3:first-child{margin-top:0} .prose p{margin:0 0 18px} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px} .prose li{margin:0 0 9px} .prose li::marker{color:var(--accent-l)} .sec.dark .prose li::marker,.sec.deeper .prose li::marker{color:var(--accent)} .prose a{border-bottom:1px solid currentColor} .prose strong{font-weight:600} .prose .kv{margin:0 0 18px;border-top:1px solid var(--line-l)} .prose .kv > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 20px;padding:10px 0;border-bottom:1px solid var(--line-l)} .prose .kv dt{font-weight:600} .prose .kv dd{margin:0} .prose code{font-family:var(--mono);font-size:.9em} @media (max-width:640px){.prose .kv > div{grid-template-columns:minmax(0,1fr)}} .prose hr{border:0;border-top:1px solid var(--line-l);margin:38px 0} .sec.dark .prose hr,.sec.deeper .prose hr{border-top-color:var(--line-d)} /* ── header ─────────────────────────────────────────────────────────────── */ .hdr{position:sticky;top:0;z-index:50;background:rgba(4,18,31,.86); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--line-d);transition:background .3s ease} .hdr.stuck{background:rgba(4,18,31,.97)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px; min-height:70px;flex-wrap:wrap} .hdr-prog{display:none;position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--accent);transform:scaleX(0);transform-origin:0 50%} .js .hdr-prog{display:block} .hdr-pos{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:#fff;opacity:.6;white-space:nowrap; transition:opacity .25s ease} .hdr-pos.swap{opacity:0} .wordmark{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font-size:16px; font-weight:800;letter-spacing:-.01em;white-space:nowrap} .wordmark em{font-style:normal;color:var(--accent)} .nav{display:flex;align-items:center} .nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap; justify-content:flex-end} .nav-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px; opacity:.82} .nav-links a:hover{opacity:1} .nav-links a[aria-current="page"]{opacity:1;color:var(--accent)} .nav-links a.cta{opacity:1;color:var(--deep);background:var(--accent);padding:0 18px; font-weight:600;font-size:13px} .nav-links a.cta:hover,.nav-links a.cta[aria-current="page"]{color:var(--deep); background:var(--accent-hi)} .nav-toggle{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px; padding:0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase} .nav-toggle:hover{color:var(--accent)} .nav-toggle .bars{display:inline-block;position:relative;width:20px;height:2px; background:currentColor} .nav-toggle .bars::before,.nav-toggle .bars::after{content:'';position:absolute; left:0;width:20px;height:2px;background:currentColor} .nav-toggle .bars::before{top:-6px} .nav-toggle .bars::after{top:6px} /* ── full-bleed media behind a hero or section ──────────────────────────── */ .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--deep)} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover; object-position:50% 50%} .hero-media video{position:absolute;inset:0} /* ── hero ───────────────────────────────────────────────────────────────── */ .hero{position:relative;background:var(--deep);padding:clamp(64px,8vw,116px) 0; border-bottom:1px solid var(--line-d);overflow:hidden} .hero.home{padding:clamp(64px,6vw,92px) 0} .hero-grid{display:grid;grid-template-columns:1.12fr .88fr; gap:clamp(36px,4.6vw,64px);align-items:start} .hero h1,.hero h2.h-xl{max-width:576px;margin:22px 0 0} /* Home headline: Figma sets it smaller (52px on a 70.72px line) because it is longer than the other page headlines. */ .hero h1.h-home{font-size:52px;line-height:70.72px;letter-spacing:-1.7px} @media (max-width:1024px){.hero h1.h-home{font-size:clamp(31px,4.25vw,44px);line-height:1.18;letter-spacing:-.028em}} .hero .lede{max-width:465px;margin-top:26px} .hero .case-tags{margin-top:20px;font-size:11px;opacity:.78} .hero-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px} .hero-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;opacity:.6;line-height:1.75;margin:26px 0 0} .hero-aside{display:flex;flex-direction:column;align-items:flex-end;gap:74px;min-width:0} /* translucent hero panel */ .hbox{width:var(--w,452px);max-width:none;flex-shrink:0;background:var(--glass); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border:1px solid var(--line-d);padding:24px} .hbox .side-k{color:var(--accent);font-size:10.5px;margin:0 0 14px} .hbox .stack{margin-top:0} .hbox .stack-v{color:#fff} .hbox .link-more{margin-top:0} .hbox .hbox-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;opacity:.65;margin:16px 0 0} .hbox.flowbox{padding:24px 26px} .hbox.areasbox{padding:24px 0} .hbox.areasbox .side-k,.hbox.areasbox .stack-row,.hbox.areasbox .hero-note{padding-left:24px} .hbox.areasbox .hero-note{max-width:401px} /* ── operational flow schematic ─────────────────────────────────────────── */ .flow-k{font-family:var(--mono);font-size:10px;letter-spacing:.17em; text-transform:uppercase;opacity:.6;margin:0 0 20px} .flow-list{list-style:none;margin:0;padding:0 0 0 24px;position:relative} .flow-list::before{content:'';position:absolute;left:3px;top:14px;bottom:16px;width:1px; background:var(--rule-d)} .flow-list li{position:relative;display:grid;grid-template-columns:92px 1fr;gap:14px; padding:8px 0;align-items:baseline} .flow-list li::before{content:'';position:absolute;left:-23px;top:14px;width:5px; height:5px;background:var(--accent)} .flow-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--accent)} .flow-v{font-size:13.2px;line-height:1.5;opacity:.76} /* ── ticker ─────────────────────────────────────────────────────────────── */ .ticker{background:var(--deep);border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);overflow:hidden;padding:15px 0} .ticker-in{display:flex;gap:40px;white-space:nowrap;width:max-content; animation:slide 44s linear infinite} .ticker span{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;opacity:.58} @keyframes slide{to{transform:translateX(-50%)}} /* ── edge-bleeding photos, photo bands, marker rules ────────────────────── */ .bleed{margin:0;pointer-events:none;z-index:0} .bleed img{width:100%;height:auto} .band{margin:0;background:var(--deep)} .band img{width:100%;height:auto;aspect-ratio:1638/358;object-fit:cover;object-position:50% 100%} .rule-dot{display:block;position:relative;height:5px;width:414px;max-width:100%} .rule-dot::before{content:'';position:absolute;left:0;right:0;top:2px;height:1px; background:var(--rule-l)} .rule-dot::after{content:'';position:absolute;left:20px;top:0;width:5px;height:5px; background:var(--accent-l)} .rule-dot.r::after{left:auto;right:15px} .rule-dot.c::after{left:50%;margin-left:-2.5px} .sec.dark .rule-dot::after,.sec.deeper .rule-dot::after{background:var(--accent)} .sec.dark .rule-dot::before,.sec.deeper .rule-dot::before{background:var(--rule-d)} /* ── proof row ──────────────────────────────────────────────────────────── */ .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d); border:1px solid var(--line-d);margin-top:46px;position:relative} .proof.cols-3{grid-template-columns:repeat(3,1fr)} .proof-cell{background:var(--deep);padding:32px 26px 34px} .proof-n{font-size:clamp(36px,3.6vw,44px);font-weight:800;letter-spacing:-.035em; color:var(--accent);line-height:1} .proof-cell p{font-size:14px;line-height:1.55;opacity:.78;margin:14px 0 0} /* ── two-column text block with a data stack ────────────────────────────── */ .model-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start; margin-top:38px} .model-grid .lede{max-width:64ch} .model-grid > *{min-width:0} .stack-v a{overflow-wrap:anywhere} .side-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--accent-l);margin:0 0 12px} .side-k.lg{font-size:14.5px;line-height:1.62;opacity:.84;margin:0} .sec.dark .side-k,.sec.deeper .side-k{color:var(--accent)} .side h3,.side .side-h{margin:20px 0 0;font-size:clamp(20px,1.8vw,23px);line-height:1.2; letter-spacing:-.015em;font-weight:700} .side p{font-size:14.5px;line-height:1.62;opacity:.84;margin:14px 0 0} .side .link-more{margin-top:20px} .side > .side-k:first-child{margin-top:0} .stack{border-top:1px solid var(--line-l);margin-top:34px} .sec.dark .stack,.sec.deeper .stack{border-top-color:var(--line-d)} .stack-row{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:11px 0; border-bottom:1px solid var(--line-l);margin:0} .stack.narrow .stack-row{grid-template-columns:36px 1fr} .sec.dark .stack-row,.sec.deeper .stack-row{border-bottom-color:var(--line-d)} .stack-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--accent-l);padding-top:3px} .sec.dark .stack-k,.sec.deeper .stack-k,.hero .stack-k{color:var(--accent)} .stack-v{font-size:13.5px;line-height:1.5;opacity:.84;margin:0} a.stack-row:hover .stack-v{opacity:1} /* ── numbered areas (Home): crosshair rules ─────────────────────────────── */ .areas{display:grid;grid-template-columns:repeat(2,1fr);margin-top:46px;position:relative; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)} .area{padding:30px 28px 32px;position:relative} .area-n{font-family:var(--mono);font-size:12px;letter-spacing:.117em;color:var(--accent-l)} .area h3{margin:12px 0 14px} .clist{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:12px; line-height:1.8;letter-spacing:.02em;opacity:.72} .clist li{display:inline} .clist li::after{content:', '} .clist li:last-child::after{content:''} .areas .clist{font-family:var(--sans);font-size:14px;line-height:1.54;letter-spacing:.017em} /* ── ruled grids: shared markers ────────────────────────────────────────── */ .lined > *,.cross > *{position:relative} .lined > *::before,.cross .mk::before,.cross .mk2::after,.cross .mkbr::after{content:'';position:absolute; width:5px;height:5px;background:var(--accent-l);z-index:1} /* .lined: a rule on the left of every column, marker at heading height */ .lined > *{border-left:1px solid var(--rule-l)} .sec.dark .lined > *,.sec.deeper .lined > *{border-left-color:var(--rule-d)} .sec.dark .lined > *::before,.sec.deeper .lined > *::before{background:var(--accent)} .lined.plain > *::before{display:none} .lined > *::before{left:-3px;top:40px} /* .cross: rules between cells only; .mk puts a marker on a cell's top-left corner, .mk2 on its top-right corner */ .cross .mk::before{left:-3px;top:-3px} .cross .mk2::after{right:-3px;top:-3px} .cross .mkbr::after{right:-3px;bottom:-3px} .areas.cross > :nth-child(odd){border-right:1px solid var(--rule-l)} .areas.cross > :nth-child(n+3){border-top:1px solid var(--rule-l)} /* ── panel grid ─────────────────────────────────────────────────────────── */ .panels{display:grid;grid-template-columns:repeat(4,1fr);margin-top:46px} .panels.p3{grid-template-columns:repeat(3,1fr)} .panel{padding:30px 26px 32px} @media (min-width:1025px){ .panels.p3 .panel{padding-bottom:45px} .panels.tight .panel{padding:25px 26px 16px} } .panel h3{margin:0 0 16px;font-size:clamp(16.5px,1.35vw,17.5px);line-height:1.28; letter-spacing:-.01em;font-weight:700} .slist{list-style:none;padding:0;margin:0} .slist li{font-size:13.5px;line-height:1.5;padding:8px 0 8px 16px;position:relative; opacity:.84;border-top:1px solid var(--line-l)} .slist li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:1px; background:var(--accent-l)} .sec.dark .slist li,.sec.deeper .slist li{border-top-color:var(--line-d)} .sec.dark .slist li::before,.sec.deeper .slist li::before{background:var(--accent)} /* ── outcome steps ──────────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:46px} .step{padding:28px 24px 30px} .step-n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent-l)} .step h3{margin:10px 0 10px;font-size:clamp(16px,1.35vw,17px);line-height:1.28; letter-spacing:-.01em;font-weight:700} .step p{font-size:13.8px;line-height:1.6;opacity:.78;margin:0} .steps.lined > *::before{top:31px} /* ── process timeline, vertical ─────────────────────────────────────────── */ .timeline{list-style:none;margin:0;padding:0;border-top:1px solid rgba(79,163,255,.6)} .tl-item{display:grid;grid-template-columns:60px 1fr;gap:24px;padding:26px 0; border-bottom:1px solid rgba(79,163,255,.6)} .tl-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent); padding-top:4px} .tl-item h3{margin:0 0 9px;font-size:clamp(17.5px,1.6vw,20px);line-height:1.22; letter-spacing:-.015em;font-weight:700} .tl-item p{margin:0;font-size:14.6px;line-height:1.62;opacity:.8} /* ── vertical list on a dotted rule (Home: systems we connect) ──────────── */ .dotlist{list-style:none;margin:20px 0 0 17px;padding:0;position:relative;width:220px} .dotlist::before{content:'';position:absolute;left:-15px;top:25px;bottom:25px;width:1px; background:var(--rule-l)} .dotlist li{position:relative;display:flex;align-items:center;min-height:50px; padding:0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.09em; text-transform:uppercase;line-height:1.5;opacity:.86;white-space:nowrap} .dotlist li::before{content:'';position:absolute;left:-17px;top:50%;margin-top:-2.5px; width:5px;height:5px;background:var(--accent-l)} /* ── three-up card grid ─────────────────────────────────────────────────── */ .grid6{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px} .adv{padding:30px 28px 32px} .adv h3{margin:0 0 12px} .adv p{font-size:14.5px;line-height:1.62;opacity:.82;margin:0} .adv .num{font-family:var(--mono);font-size:14px;letter-spacing:.145em;line-height:1.62; color:var(--accent-l);opacity:.82;margin:0 0 12px} /* crosshair: first row ruled underneath, rules between columns */ .grid6.cross > :nth-child(-n+3){border-bottom:1px solid var(--rule-l)} .grid6.cross > :not(:nth-child(3n)){border-right:1px solid var(--rule-l)} .grid6.cross.span-last > :last-child{grid-column:span 2;border-right:0} .grid6.cross.edge > :nth-child(3n+1){border-left:1px solid var(--rule-l)} /* ── services list (Retail): two columns, crosshair rules ───────────────── */ .svc{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);margin:18px 0 0;padding:0} .svc li{padding:15px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.09em; text-transform:uppercase;line-height:1.5;opacity:.86; border-bottom:1px solid var(--rule-l)} .svc li:nth-child(even){border-left:1px solid var(--rule-l)} .svc li:nth-last-child(-n+2){border-bottom:0} @media (min-width:821px){.svc li:nth-child(odd){text-align:right}} /* ── case-study cards ───────────────────────────────────────────────────── */ .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);margin-top:46px; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:relative} .card{background:var(--glass);padding:30px 28px 32px;display:flex;flex-direction:column; transition:background .3s ease;color:#fff} .card:hover,.card:focus-visible{background:rgba(10,43,71,.86);color:#fff} .card-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--accent);margin-bottom:16px;line-height:1.7} .card h3{color:#fff;font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.015em; line-height:1.18;margin:0 0 20px} .field{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0; border-top:1px solid rgba(255,255,255,.18)} .field-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;opacity:.64;padding-top:4px} .field-v{font-size:14.5px;line-height:1.6;opacity:.92;margin:0} .card-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase; opacity:.78;border-top:1px solid rgba(255,255,255,.24);padding-top:16px;margin-top:auto} .card-foot .go{color:var(--accent)} /* ── two ways in ────────────────────────────────────────────────────────── */ .ways{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-d); border:1px solid var(--line-d);margin-top:46px;position:relative} .way{background:var(--glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:36px 32px 38px;display:flex;flex-direction:column} .way .mono{font-size:15px;letter-spacing:.14em;line-height:1.6;opacity:.84;margin:14px 0 0} .way h3{margin:14px 0 0;font-size:clamp(20px,1.9vw,23px);line-height:1.22; letter-spacing:-.015em;font-weight:700} .way p{margin:14px 0 0;opacity:.84;font-size:15px} .way ul{list-style:none;padding:0;margin:22px 0 26px} .way li{font-size:14.3px;line-height:1.5;padding:11px 0 11px 22px;position:relative; opacity:.84;border-bottom:1px solid var(--line-d)} .way li::before{content:'\2014';position:absolute;left:0;color:var(--accent)} .way .btn{align-self:flex-start;margin-top:auto} .ways.short .way .btn{margin-top:22px} /* ── buttons and links ──────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px; background:var(--accent);color:var(--deep);font-weight:600;font-size:14px; padding:12px 24px;transition:background .2s ease,transform .2s ease,color .2s ease} .btn:hover{background:var(--accent-hi);color:var(--deep);transform:translateY(-2px)} .sec.light .btn,.sec.light-alt .btn{background:var(--accent-l);color:#fff} .sec.light .btn:hover,.sec.light-alt .btn:hover{background:var(--accent-l-hi);color:#fff} .btn.ghost{background:none;border:1px solid currentColor;color:inherit} .btn.ghost:hover{background:none;color:var(--accent)} .sec.light .btn.ghost,.sec.light-alt .btn.ghost{background:none;color:inherit} .sec.light .btn.ghost:hover,.sec.light-alt .btn.ghost:hover{background:none; color:var(--accent-l)} .link-more{display:inline-flex;align-items:center;min-height:44px;margin-top:26px; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent)} .link-more span{border-bottom:1px solid currentColor;padding-bottom:5px} .link-more:hover{color:var(--accent-hi)} .sec.light .link-more,.sec.light-alt .link-more{color:var(--accent-l)} .sec.light .link-more:hover,.sec.light-alt .link-more:hover{color:var(--accent-l-hi)} /* ── footer ─────────────────────────────────────────────────────────────── */ .foot{background:var(--deep);padding:80px 0 46px} .foot-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px); align-items:start} .foot .lede{max-width:440px;margin-top:22px} .foot-cta{margin-top:26px;margin-bottom:0} .foot-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .foot-col h3{font-family:var(--mono);font-size:10px;letter-spacing:.17em; text-transform:uppercase;font-weight:500;color:var(--accent);opacity:.9;margin:0 0 4px} .foot-col ul{list-style:none;margin:0;padding:0} .foot-col a{display:inline-flex;align-items:center;min-height:44px;font-size:13.5px; opacity:.82} .foot-col a:hover{opacity:1} @media (min-width:821px){.foot-col a{white-space:nowrap}} .foot-bot{display:flex;justify-content:space-between;gap:14px 20px;flex-wrap:wrap; margin-top:48px;padding-top:24px;border-top:1px solid var(--line-d); font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase} .foot-bot span:first-child{opacity:.64} .foot-bot span:last-child{color:var(--accent);opacity:.8} /* ── reveal on scroll (progressive enhancement) ─────────────────────────── */ .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .js .rv.in{opacity:1;transform:none} /* ========================================================================== Page sections ========================================================================== */ /* Home: operational systems */ .what{padding-bottom:85px} .what-grid{display:grid;grid-template-columns:minmax(0,531px) minmax(0,434px); justify-content:space-between;column-gap:56px} .what-grid .head-h{width:600px;max-width:none} .what-grid .side{grid-column:2;grid-row:1 / span 2} .what-grid .body{grid-column:1;margin-top:38px} .what-grid .body .lede{max-width:527px} /* Home: where we build (follows the section above on the same surface) */ .areas-sec{padding:64px 0 44px} @media (min-width:1101px){.areas-sec .areas{margin-top:17px} .areas-sec .areas > :nth-child(-n+2){padding-bottom:49px}} .areas-sec .link-more{display:flex;width:max-content;margin:13px auto 0} /* Home: intelligence automation (the design leaves extra air under the heading) */ .auto-sec{padding:64px 0 167px} .auto-sec .head-l{margin-top:73px;max-width:1065px} /* Home: process */ .process .bleed.l{left:-5px} /* Home: case studies over the aerial photo */ .work-sec .proof,.work-sec .cards{position:relative;z-index:1} .work-media{position:absolute;left:0;right:0;bottom:0;top:307px;z-index:0;overflow:hidden} .work-media img{width:100%;height:100%;object-fit:cover;object-position:50% 100%} /* the stat row sits lower so a strip of the aerial photo shows above it */ @media (min-width:1101px){.work-sec .proof{margin-top:138px}} /* Home: company */ .co-grid{display:grid;grid-template-columns:minmax(0,621.6px) auto; justify-content:space-between;gap:56px;align-items:start} .co-grid .head-h{max-width:600px} .co-grid .lede{max-width:619px} .co-side{padding-top:0} /* Home: contact */ .contact-sec .bleed{bottom:0} /* Solutions: the four area sections */ .sol-grid{display:grid;grid-template-columns:414px 590px;justify-content:space-between; align-items:start} .sol-grid.flip{grid-template-columns:590px 414px} .sol-grid .area-n{display:block;line-height:1.33} .sol-grid.flip .sol-head{grid-column:2;grid-row:1} .sol-grid.flip .sol-text{grid-column:1;grid-row:1} .sol-grid .eyebrow{max-width:437px;line-height:1.6} .sol-grid .h-lg{margin-top:18px} .sol-grid .cap{margin:18px 0 0;font-size:11px;letter-spacing:.14em} .sol-grid .clist{margin-top:18px;max-width:414px;line-height:1.8} .sol-grid .lede{max-width:590px} .sol-area{padding-top:46px} .sol-area.first{padding-top:162px} .sol-rule{position:absolute;left:0;right:0;bottom:116px;pointer-events:none} /* Company: who we are / approach */ .who-sec{padding-top:162px} /* Contact: form */ .c-form{margin-top:32px} .c-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .c-field{margin-bottom:20px} .c-field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em; text-transform:uppercase;opacity:.7;margin-bottom:8px} .c-field textarea{resize:vertical;min-height:153px} .c-form .btn{margin-top:6px} /* consent checkbox under the comments field */ .c-consent{display:flex;align-items:flex-start;gap:8px;margin-top:14px} .c-form .c-consent input{appearance:none;-webkit-appearance:none;flex:none;width:12px;height:12px;min-height:0; margin:4px 0 0;padding:0;border:1px solid var(--accent-l);border-radius:0;background:#fff;cursor:pointer} .c-form .c-consent input:checked{background:var(--accent-l);box-shadow:inset 0 0 0 2px #fff} .c-form .c-consent input:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px} .c-field .c-consent label{display:block;margin:0;font-family:var(--mono);font-size:12px;line-height:1.6; letter-spacing:0;text-transform:none;opacity:.8;cursor:pointer} .c-consent a{text-decoration:underline;text-underline-offset:2px} /* contact form sending states (site.js section 5) */ .c-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .c-form{position:relative} .c-form .btn[disabled]{opacity:.7;cursor:progress;transform:none} .c-status{margin:16px 0 0;font-size:15px;line-height:1.6} .c-status:empty{display:none} .c-status.err{color:#B3261E} .c-status a{text-decoration:underline;text-underline-offset:2px} .c-done{margin-top:32px;padding:28px 0 0;border-top:1px solid var(--rule-l);outline:none} .c-done-h{margin:14px 0 12px;font-size:clamp(24px,2.4vw,30px);line-height:1.2;font-weight:700;letter-spacing:-.015em} .c-done p:last-child{margin:0;max-width:52ch;font-size:17px;line-height:1.65} .form-sec{padding-top:154px} .side .rule-dot{margin:36px 0 30px} .side .side-k.lg + .slist{margin-top:20px} /* Case studies */ .stack-sec .bleed.r{top:-41px;bottom:auto} .stack-sec .bleed.l{top:-87px;bottom:auto} .stack-sec .tech-head{display:flex;flex-direction:column;align-items:flex-end} .stack-sec .tech-head > div{min-width:0} .stack-sec .tech-head .cap{margin:18px 0 0} .stack-sec .tech-head + .svc{margin-top:21px} /* Case studies: a 24px breath above and below the bullet list in the challenge and solution columns */ .split > div > .slist{margin:24px 0} .split > div > .slist + p:last-child{margin-bottom:0} @media (min-width:1025px){ /* testimonial facts sit in a narrower column, flush with the right edge */ .split > .side{justify-self:end;width:min(466px,100%)} /* Retail: the technology block sits 40px lower in its section */ .stack-sec.low{padding-top:156px} } .panels.tight.lined > *::before{top:31px} .quote.testi{max-width:60ch;margin-bottom:20px} .show-sec{overflow:hidden} .show-sec .wrap{position:relative;z-index:1} .show-sec .ways{background:transparent;border-color:transparent} .show-sec .head-l{max-width:var(--lw,600px)} /* legal pages: article plus "On this page" list */ .legal-grid{display:grid;grid-template-columns:1fr;gap:34px} .legal-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-l)} .legal-toc li{margin:0;border-bottom:1px solid var(--line-l)} .legal-toc a{display:block;padding:11px 0 11px 16px;font-size:14.5px;line-height:1.4; color:var(--ink);opacity:.72;border-left:2px solid transparent;transition:opacity .2s,border-color .2s} .legal-toc a:hover{opacity:1} .legal-toc a[aria-current="true"]{opacity:1;border-left-color:var(--accent-l);font-weight:600} .legal-toc .eyebrow{margin-bottom:14px} .legal-date{margin-top:20px} .prose h2[id]{scroll-margin-top:96px} /* ========================================================================== Responsive ========================================================================== */ @media (min-width:821px){ .card-tag{min-height:3.4em} .card h3{min-height:2.36em} .legal-grid{grid-template-columns:minmax(0,72ch) minmax(220px,1fr);gap:clamp(40px,5vw,72px);align-items:start} .legal-toc{order:2;position:sticky;top:96px} } @media (min-width:1025px){ .js .hdr-pos{display:block} } /* edge photos: pinned to the page edge on wide screens */ @media (min-width:1101px){ .bleed{position:absolute;bottom:0} .bleed.r{right:0} .bleed.l{left:0} .sec.has-bleed{padding-bottom:var(--pb,116px)} } @media (min-width:1440px){ .sec{padding:116px 0} .foot{padding:92px 0 52px} .what{padding-bottom:85px} .areas-sec{padding:64px 0 44px} .auto-sec{padding:64px 0 167px} .work-sec{padding-bottom:106px} /* section heights taken from the design frame */ .mh{min-height:var(--mh)} .sol-area{padding-top:46px} .sol-area.first{padding-top:162px} .who-sec{padding-top:162px} .form-sec{padding-top:154px} } /* below the design width: keep the Solutions columns proportional */ @media (max-width:1200px){ .sol-grid{grid-template-columns:minmax(0,.41fr) minmax(0,.59fr);gap:clamp(40px,6vw,90px)} .sol-grid.flip{grid-template-columns:minmax(0,.59fr) minmax(0,.41fr)} .what-grid{column-gap:40px} .what-grid .head-h{width:auto;max-width:600px} } /* edge photos join the page flow */ @media (max-width:1100px){ .bleed{position:static;width:auto !important;max-width:min(100%,760px);margin-top:48px} .bleed.r{margin-left:auto} .bleed.l{margin-right:auto} .has-bleed{padding-bottom:0} .sol-rule{display:none} .hbox{width:100%;max-width:var(--w,452px)} .stack-sec .bleed{display:none} } @media (max-width:1024px){ .proof{grid-template-columns:repeat(2,1fr)} .proof.cols-3{grid-template-columns:repeat(3,1fr)} .panels,.panels.p3,.steps,.grid6{grid-template-columns:repeat(2,1fr)} .model-grid,.co-grid{grid-template-columns:1fr;gap:36px} .split{grid-template-columns:1fr;gap:38px} .hero-grid{grid-template-columns:1fr 1fr;gap:40px} .hero h1{font-size:clamp(36px,4.9vw,50px);max-width:none} .what-grid{grid-template-columns:1fr} .what-grid .side{grid-column:1;grid-row:auto;margin-top:40px} .what-grid .body{grid-row:2} .what-grid .head-h{width:auto} .sol-grid,.sol-grid.flip{grid-template-columns:1fr;gap:34px} .sol-grid.flip .sol-head,.sol-grid.flip .sol-text{grid-column:auto;grid-row:auto} .stack-sec .tech-head{align-items:flex-start} .co-side{justify-self:start} /* ruled grids: plain top rules, no markers */ .lined > *,.cross > *,.grid6.cross > *,.areas.cross > *{border:0 !important; border-top:1px solid var(--rule-l) !important} .lined > *::before,.cross .mk::before,.cross .mk2::after,.cross .mkbr::after{display:none} .grid6.cross.span-last > :last-child{grid-column:auto} .js .nav-toggle{display:inline-flex} .js .nav-links{display:none;position:absolute;left:0;right:0;top:100%; flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; background:var(--deep);-webkit-backdrop-filter:none;backdrop-filter:none; border-bottom:1px solid var(--line-d);padding:8px 0 18px} .js .nav-links.open{display:flex;min-height:calc(100dvh - 100%);overflow-y:auto} .js .nav-links a{min-height:52px;padding:0 34px;font-size:15px;opacity:.9} .js .nav-links a.cta{margin:12px 34px 0;padding:0 18px;min-height:48px; justify-content:center} .hero-aside{gap:28px} } @media (max-width:820px){ /* the hero copy stacks over the brighter parts of the photo: darken it */ .hero-media::after{content:'';position:absolute;inset:0;background:rgba(4,18,31,.42)} .hero-grid{grid-template-columns:1fr;gap:38px} .hero-aside{align-items:stretch} .hbox{width:100%;max-width:none} .cards,.ways,.areas,.svc{grid-template-columns:1fr} .areas.cross > *{border-right:0} .svc li{border:0 !important;border-top:1px solid var(--rule-l) !important} .foot-grid{grid-template-columns:1fr;gap:40px} } @media (max-width:640px){ .wrap{padding:0 22px} .sec,.what,.areas-sec,.auto-sec,.sol-area,.sol-area.first,.who-sec,.form-sec{padding:64px 0} .has-bleed{padding-bottom:0} .foot{padding:58px 0 36px} .hdr .wrap{min-height:64px} .js .hdr .wrap{flex-wrap:nowrap} .nav-toggle{min-height:44px} .nav-toggle span.bars{width:18px} .nav-toggle .bars::before,.nav-toggle .bars::after{width:18px} .hero .quote{padding-left:14px} .hero-act{gap:14px} .hero-act .btn{flex:1 1 100%} .proof,.proof.cols-3,.panels,.panels.p3,.steps,.grid6{grid-template-columns:1fr} .proof{margin-top:38px} .areas,.panels,.grid6,.cards,.ways{margin-top:34px} .steps{margin-top:32px} .split{margin-top:34px} .proof-cell{padding:26px 22px 28px} .area,.panel,.adv,.card,.step{padding:26px 4px 28px} .card{padding:26px 22px 28px} .way{padding:28px 22px 30px} .hbox{padding:20px} .hbox.areasbox{padding:20px 0} .hbox.areasbox .side-k,.hbox.areasbox .stack-row,.hbox.areasbox .hero-note{padding-left:20px} .flow-list li{grid-template-columns:78px 1fr;gap:10px} .tl-item{grid-template-columns:44px 1fr;gap:14px;padding:22px 0} .field{grid-template-columns:1fr;gap:6px} .stack-row{grid-template-columns:1fr;gap:4px} .head-h,.head-l{max-width:none} .foot-nav{grid-template-columns:1fr;gap:22px} .c-row{grid-template-columns:1fr} .dotlist{width:auto} .bleed{margin-top:40px} .js .nav-links a,.js .nav-links a.cta{padding-left:22px;padding-right:22px} .js .nav-links a.cta{margin-left:22px;margin-right:22px} } /* ── reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .rv{opacity:1;transform:none;transition:none} .ticker-in{animation:none} .btn:hover{transform:none} .hdr-pos{transition:none} } /* ── cookie consent (Figma 136:3 banner, 137:50 settings) ────────────────── Markup: partials/cookies.njk (a