/* Self-hosted fonts (latin subset, SIL Open Font License). Files live in assets/fonts. */ @font-face{font-family:"Roboto Slab"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/roboto-slab-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Roboto Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/roboto-slab-latin-700-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("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("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")} /* Jay Kay Tools, shared design system Blue and white, red logo as the single warm accent. See project docs: claude/jay_kay_tools_business_data.md section 7 for the confirmed palette. */ :root{ color-scheme: light; --white:#FFFFFF; --grey:#F1F4F9; --line:#DBE3EE; --ink:#0F1B2E; --ink-soft:#46586F; --steel:#6E7E94; --blue:#14509B; --blue-hover:#0F3F7C; --blue-dark:#0B2A57; --blue-tint:#E8F0FB; --red:#D9010F; --red-hover:#B60110; --on-dark:#FFFFFF; --on-dark-soft:#B8CBE6; --shadow:0 1px 2px rgba(11,42,87,.06), 0 10px 30px rgba(11,42,87,.07); --shadow-lg:0 2px 8px rgba(11,42,87,.10), 0 24px 60px rgba(11,42,87,.22); } *{box-sizing:border-box} /* Guards the browser's default [hidden]{display:none} rule from being beaten by an author rule of equal specificity (e.g. .drawer{display:flex}). Without this, any page that isn't wrapped by the Artifact tool's own reset (every page here except the homepage) would render the quote drawer open by default on load. */ [hidden]{display:none !important} /* Anyone with "reduce motion" set at the OS level gets near-instant transitions everywhere; count-up numbers still skip straight to their final value (see site.js), since that's driven by JS math, not CSS, and this rule can't reach it. */ @media (prefers-reduced-motion: reduce){ *{transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important} } html{scroll-padding-top:84px} body{ margin:0; background:var(--white); color:var(--ink); font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap{max-width:1080px; margin:0 auto; padding-inline:16px} @media (min-width:600px){ .wrap{padding-inline:24px} } h1,h2,h3{font-family:"Roboto Slab", Georgia, serif; text-wrap:balance; margin:0} a{color:inherit} .mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums} .logo{fill:var(--red); display:block} /* ---------- buttons ---------- */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:3px; font:inherit; font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .1s ease-out; } .btn:active{transform:scale(.96)} .btn-primary{background:var(--red); color:#fff} .btn-primary:hover{background:var(--red-hover)} .btn-blue{background:var(--blue); color:#fff} .btn-blue:hover{background:var(--blue-hover)} .btn-ghost{border-color:var(--line); background:var(--white); color:var(--ink)} .btn-ghost:hover{border-color:var(--blue); color:var(--blue)} .btn-onblue{background:var(--white); color:var(--blue-dark)} .btn-onblue:hover{background:var(--blue-tint)} /* Click/tap feedback: a short-lived ripple from the point of contact, added by site.js to any .btn or .cat-quickquote. Colour flips for light-background buttons so it stays visible against white or the pale blue tint. */ .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0); animation:ripple-anim .5s ease-out forwards; pointer-events:none; } .btn-ghost .ripple, .btn-onblue .ripple{background:rgba(20,80,155,.18)} @keyframes ripple-anim{ to{transform:scale(2.6); opacity:0} } .pending{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; border:1px dashed currentColor; opacity:.85; padding:1px 7px; border-radius:3px; } /* ---------- top bar ---------- */ .topbar{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; transition:box-shadow .2s ease-out; } .topbar.scrolled{box-shadow:0 2px 10px rgba(11,42,87,.12)} .topbar .wrap{display:flex; align-items:center; gap:10px 14px; padding-block:10px; flex-wrap:wrap} .brand{display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; order:0} .brand .logo{width:36px; height:36px; flex:0 0 auto} .brand .name{font-family:"Roboto Slab",serif; font-weight:700; font-size:18px; letter-spacing:.2px; line-height:1.1} .brand .sub{display:none; font-size:10.5px; color:var(--steel); letter-spacing:.09em; text-transform:uppercase} nav.sitenav{ display:flex; gap:6px; font-size:13.5px; font-weight:500; align-items:center; order:3; width:100%; position:relative; } nav.sitenav a{ text-decoration:none; color:var(--ink-soft); white-space:nowrap; position:relative; padding:7px 11px; border-radius:5px; transition:background .15s, color .15s; } nav.sitenav a:hover{background:var(--blue-tint); color:var(--blue)} nav.sitenav a:active{background:#DCE9FA} nav.sitenav a[aria-current="page"]{background:var(--blue-tint); color:var(--blue); font-weight:700} /* A single red bar that site.js slides between links: it rests under whichever page you're on, and slides to follow your cursor on hover, then slides back. Kept as a plain absolutely-positioned span rather than a per-link underline so the motion itself, not just the endpoint, reads as intentional. */ .nav-underline{ position:absolute; bottom:1px; height:2px; background:var(--red); border-radius:2px; opacity:0; transition:left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1), opacity .15s; pointer-events:none; } .navcta{order:2; padding:9px 16px; font-size:14px; white-space:nowrap} @media (min-width:560px){ .brand .sub{display:block} } /* Phones and small tablets: the header wraps to two or three rows, so it scrolls away with the page instead of sticking and covering a big part of the screen. */ @media (max-width:839px){ .topbar{position:static} html{scroll-padding-top:16px} } @media (min-width:840px){ .topbar .wrap{padding-block:11px} .brand .logo{width:40px; height:40px} .brand .name{font-size:19px} nav.sitenav{order:1; width:auto; font-size:14.5px; gap:8px} } /* ---------- sections ---------- */ section .wrap{padding-block:clamp(38px, 6vw, 58px)} .bg-white{background:var(--white)} .bg-grey{background:var(--grey)} .bg-blue{background:var(--blue-dark); color:var(--on-dark)} .bg-blue h2, .bg-blue h3{color:var(--on-dark)} .sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px} .sec-head h2{font-size:clamp(22px, 3.2vw, 29px)} .sec-head p{margin:0; color:var(--steel); font-size:14.5px} .bg-blue .sec-head p{color:var(--on-dark-soft)} /* ---------- generic page hero (About / Locations / Catalog / Contact / Privacy) ---------- */ .page-hero .wrap{padding-block:clamp(34px,5vw,50px) clamp(26px,4vw,34px)} .page-hero h1{font-size:clamp(27px, 4.4vw, 40px); line-height:1.12; margin-block:10px 12px} .page-hero p.lede{font-size:16.5px; color:var(--ink-soft); max-width:none; margin:0} .page-hero-doc .wrap{padding-block:clamp(34px,5vw,50px) clamp(40px,6vw,60px)} .page-hero-doc .prose{margin-top:24px} /* Catalog hero: two drill-bit corner clusters as a quiet accent, kept behind the text and clear of the lede's reading column. */ .page-hero-accent{position:relative; overflow:hidden} .page-hero-accent .wrap{position:relative; z-index:2} .page-hero-accent h1, .page-hero-accent .lede{max-width:62ch} /* Reserve room on the image's side so the heading/lede text wraps before it would run under the corner image, instead of overlapping it, at the widths where the image shows. */ @media (min-width:901px){ .page-hero-accent .wrap{padding-right:clamp(170px,20vw,270px)} } .page-hero-corner{position:absolute; z-index:1; width:clamp(130px,15vw,230px); height:auto; pointer-events:none; opacity:0; animation:page-corner-in .85s cubic-bezier(.16,.8,.4,1) forwards; animation-delay:.12s} .page-hero-corner.tr{top:-10px; right:0; --cx:18px; --cy:-14px} .page-hero-corner.tl{top:-10px; left:0; --cx:-18px; --cy:-14px} .page-hero-corner.bl{bottom:-6px; left:0; --cx:-18px; --cy:14px} @keyframes page-corner-in{ from{opacity:0; transform:translate(var(--cx,0), var(--cy,0)) scale(.93)} to{opacity:.95; transform:translate(0,0) scale(1)} } @media (prefers-reduced-motion:reduce){ .page-hero-corner{animation:none; opacity:.95} } /* Tablet and phone: keep the corner tools visible, smaller, and let the text wrap around them (a floated spacer the same size as the image) instead of hiding the image. */ @media (max-width:900px){ .page-hero-corner{width:clamp(84px,19vw,150px)} .page-hero-accent .wrap::before{content:""; float:right; width:clamp(84px,19vw,150px); height:calc(clamp(84px,19vw,150px) * 1.446 - 40px); margin-left:10px} } .breadcrumb{font-size:13px; color:var(--steel); margin-bottom:10px} .breadcrumb a{color:var(--blue); text-decoration:none} .breadcrumb a:hover{text-decoration:underline} /* ---------- hero (home) ---------- Classic two-column hero: text on the left, photo filling the entire right-hand column edge-to-edge (flush top/right/bottom of the section, hard rectangular edges, no fade). The row has no explicit height — the image's own natural aspect ratio at its rendered width drives the row's height via flex stretch, and the text column stretches/centers to match. */ .hero{overflow:hidden} .hero-row{display:flex; align-items:stretch} .hero-copy-wrap{flex:0 0 clamp(46%, calc(max(0px, (100vw - 1080px) / 2) + 24px + 500px), 52%); display:flex; align-items:center; box-sizing:border-box; padding-block:clamp(14px,2vw,22px); padding-left:max(24px, calc((100vw - 1080px) / 2 + 24px)); padding-right:clamp(20px,4vw,40px)} .hero-copy{max-width:580px} .eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:600} .hero h1{font-size:clamp(31px, 4.4vw, 50px); line-height:1.08; margin-block:12px 14px} .hero p.lede{font-size:18.5px; color:var(--ink-soft); max-width:56ch; margin:0} .hero-img{flex:1 1 0; min-width:0; display:flex; align-items:stretch} .hero-img img{width:100%; height:100%; object-fit:fill; display:block} @media (max-width:700px){ .hero-row{display:block} .hero-copy-wrap{padding-left:16px; padding-right:16px; padding-block:18px} .hero-copy{max-width:none} .hero-img{order:-1; width:100%} .hero-img img{height:auto; object-fit:initial} } /* ---------- Homepage: hero fades/slides in on load ---------- */ .hero h1, .hero p.lede, .hero .hero-mini-stats{ opacity:0; animation:hero-in .75s cubic-bezier(.16,.8,.4,1) forwards; } .hero h1{animation-delay:.05s} .hero p.lede{animation-delay:.16s} .hero .hero-mini-stats{animation-delay:.27s} @keyframes hero-in{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} } @media (prefers-reduced-motion:reduce){ .hero h1, .hero p.lede, .hero .hero-mini-stats{animation:none; opacity:1} } /* ---------- Homepage hero: small "at a glance" line under the lede ---------- */ .hero-mini-stats{display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-top:14px} .hero-mini-stat{display:flex; align-items:center; gap:6px; padding-right:15px; margin-right:15px; border-right:1px solid var(--line); font-weight:600; color:var(--ink); font-size:11px} .hero-mini-stat:last-child{border-right:0; padding-right:0; margin-right:0} .hero-mini-stat-icon{display:inline-flex; width:13px; height:13px; color:var(--blue); flex:0 0 auto} .hero-mini-stat-icon svg{width:100%; height:100%} @media (max-width:480px){ .hero-mini-stats{flex-direction:column; align-items:flex-start; gap:8px} .hero-mini-stat{border-right:0; padding-right:0; margin-right:0} } /* ---------- category grid ---------- */ .cats{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr))} @media (min-width:600px){ .cats{gap:14px; grid-template-columns:repeat(3, minmax(0,1fr))} } @media (min-width:920px){ .cats{grid-template-columns:repeat(4, minmax(0,1fr))} } .cat{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:14px; display:flex; flex-direction:column; gap:8px; text-align:left; font:inherit; color:inherit; cursor:pointer; text-decoration:none; transition:border-color .15s ease-out, box-shadow .15s ease-out, transform .18s cubic-bezier(.2,.8,.3,1.2); } @media (min-width:600px){ .cat{padding:18px; gap:9px} } .cat:hover{border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-4px)} .cat .glyph{ width:26px; height:26px; stroke:var(--blue); fill:none; stroke-width:1.6; transition:transform .22s cubic-bezier(.34,1.56,.64,1); } .cat:hover .glyph{transform:scale(1.12) rotate(-4deg)} @media (min-width:600px){ .cat .glyph{width:30px; height:30px} } .cat h3{font-size:15px; line-height:1.25} @media (min-width:600px){ .cat h3{font-size:16.5px} } .cat .items{font-size:12.5px; color:var(--ink-soft); line-height:1.45} @media (min-width:600px){ .cat .items{font-size:13.5px; line-height:1.5} } .cat .sizes{font-size:11px; color:var(--steel); letter-spacing:.01em; line-height:1.4} @media (min-width:600px){ .cat .sizes{font-size:12px} } .cat .ask{ margin-top:auto; padding-top:9px; font-size:12.5px; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:6px; } .cat:hover .ask{color:var(--red)} /* Hybrid card (catalog.html only): the card body is a link to the category page, PLUS its own separate "Ask for a price" button, so browsing and quoting are two distinct, honestly-labelled actions instead of one overloaded click. */ .cat-hybrid{padding:0; cursor:default; overflow:hidden} .cat-hybrid .cat-linkarea{ display:flex; flex-direction:column; flex:1; gap:8px; text-align:left; color:inherit; text-decoration:none; padding:14px; cursor:pointer; } @media (min-width:600px){ .cat-hybrid .cat-linkarea{padding:18px; gap:9px} } .cat-quickquote{ position:relative; overflow:hidden; display:block; width:100%; border:0; border-top:1px solid var(--line); background:var(--blue-tint); color:var(--blue); font:inherit; font-weight:600; font-size:12.5px; text-align:left; padding:10px 14px; cursor:pointer; transition:background .15s, color .15s, transform .1s ease-out; } .cat-quickquote:hover{background:var(--blue); color:#fff} .cat-quickquote:active{transform:scale(.98)} @media (min-width:600px){ .cat-quickquote{padding:10px 18px} } /* ---------- facts on blue ---------- */ .facts{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(210px,1fr))} .fact{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-left:3px solid var(--red); border-radius:4px; padding:16px 18px} .fact .big{font-family:"Roboto Slab",serif; font-size:22px; font-weight:700; line-height:1.2} .fact .lbl{font-size:13.5px; color:var(--on-dark-soft); margin-top:4px} /* ---------- "Grown, not changed" teaser (homepage, blue band) ---------- */ .grown-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; align-items:center} .grown-lede{font-size:15.5px; color:var(--on-dark-soft); line-height:1.6; margin:0} .grown-facts{display:flex; gap:28px} .grown-facts .stat .big{font-family:"Roboto Slab",serif; font-size:32px; font-weight:700; line-height:1.15} .grown-facts .stat .lbl{font-size:12.5px; color:var(--on-dark-soft); margin-top:3px; max-width:17ch} @media (max-width:700px){ .grown-grid{grid-template-columns:1fr; gap:22px} } /* ---------- locations ---------- */ .locs{display:grid; gap:14px; grid-template-columns:1fr} .loc{background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column} .loc-body{padding:19px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0} .loc-photo{flex:0 0 auto; background:var(--blue-tint)} .loc-photo img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/10} .loc-photo img.pos-top{object-position:center 6%} .loc-photo img.pos-right{object-position:82% center} @media (min-width:700px){ .loc{flex-direction:row} .loc-body{justify-content:center; padding:24px 28px} .loc-photo{flex:0 0 42%; max-width:42%} .loc-photo{position:relative; min-height:270px} .loc-photo img{position:absolute; inset:0; aspect-ratio:auto} } @media (max-width:699px){ .loc-photo img.pos-top{aspect-ratio:4/3; object-position:center 0%} } .loc h2{font-size:16.5px} .loc .tag{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); font-weight:600} .loc address{font-style:normal; font-size:14px; color:var(--ink-soft); line-height:1.5} .loc .phone{font-size:15px; font-weight:600} .loc .phone a{text-decoration:none} .loc .dir{font-size:13.5px; color:var(--blue); text-decoration:none; font-weight:600; margin-top:auto; padding-top:6px} .loc .dir:hover{text-decoration:underline} .loc .hours{font-size:13px; color:var(--ink-soft)} /* ---------- contact form ---------- */ .contact-grid{display:grid; gap:30px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} .field{display:grid; gap:5px; margin-bottom:13px} .field label{font-size:13px; font-weight:600; color:var(--ink-soft)} .field .opt{font-weight:400; color:var(--steel)} .req{color:var(--red); font-weight:700} .field .err{color:var(--red-hover); font-size:12.5px; line-height:1.35; min-height:0} .field .err:empty{display:none} input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]{border-color:var(--red); background:#FFF6F6} input, textarea, select{ font:inherit; font-size:15px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:3px; padding:10px 12px; width:100%; } input:focus, textarea:focus, select:focus{outline:2px solid var(--blue); outline-offset:-1px; border-color:var(--blue)} textarea{resize:vertical; min-height:96px} .consent{font-size:12.5px; color:var(--steel); margin:4px 0 14px; line-height:1.5} .form-card{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:22px; box-shadow:var(--shadow)} .sent{border:1px solid var(--blue); background:var(--blue-tint); border-radius:4px; padding:16px 18px; font-size:14px} .sent h4{margin:0 0 8px; font-family:"Roboto Slab",serif; font-size:16px} .sent pre{white-space:pre-wrap; font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--white); border:1px solid var(--line); border-radius:3px; padding:11px; margin:10px 0; overflow-x:auto} .why{list-style:none; margin:0; padding:0; display:grid; gap:14px} .why li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft)} .why b{color:var(--ink); font-weight:600} .tick{flex:0 0 auto; width:20px; height:20px; margin-top:2px; stroke:var(--blue); fill:none; stroke-width:2} /* ---------- drawer (quote panel), injected by site.js on every page ---------- */ .backdrop{position:fixed; inset:0; background:rgba(11,42,87,.42); z-index:60; opacity:0; transition:opacity .2s} .backdrop.open{opacity:1} .drawer{ position:fixed; z-index:61; top:0; right:0; height:100%; width:min(410px, 100%); background:var(--white); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease-out; } .drawer.open{transform:none} .drawer-head{ padding:16px 18px 14px; border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; padding-top:calc(16px + env(safe-area-inset-top, 0px)); background:var(--grey); } .drawer-head h3{font-size:18px; line-height:1.2} .drawer-head .chip{ display:inline-block; margin-top:6px; font-size:12px; font-weight:600; color:var(--blue); background:var(--blue-tint); border:1px solid #CBDDF5; border-radius:99px; padding:2px 10px; } .x{margin-left:auto; background:none; border:0; font-size:24px; line-height:1; color:var(--steel); cursor:pointer; padding:0 2px; font-family:inherit} .x:hover{color:var(--red)} .drawer-body{padding:16px 18px; overflow-y:auto; flex:1} .drawer-foot{ border-top:1px solid var(--line); padding:14px 18px; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); background:var(--grey); display:grid; gap:9px; } .hint{font-size:12px; color:var(--steel); line-height:1.45; margin:0} .or{display:flex; align-items:center; gap:10px; color:var(--steel); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin:2px 0} .or::before, .or::after{content:""; height:1px; background:var(--line); flex:1} .bulk{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--blue); border-radius:99px; padding:1px 7px; vertical-align:2px; margin-left:7px; } .reveal{border:1px solid var(--line); border-radius:3px; padding:12px; margin-top:10px; background:var(--grey); font-size:13px} .reveal pre{white-space:pre-wrap; font-family:"IBM Plex Mono",monospace; font-size:12px; background:var(--white); border:1px solid var(--line); border-radius:3px; padding:10px; margin:8px 0; overflow-x:auto} .copyrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px} .copyrow .addr{font-family:"IBM Plex Mono",monospace; font-size:12.5px; word-break:break-all} .mini{padding:8px 13px; font-size:13px} @media (max-width:640px){ .drawer{ top:auto; bottom:0; right:0; left:0; width:100%; height:min(88%, 640px); border-left:0; border-top:1px solid var(--line); border-radius:12px 12px 0 0; transform:translateY(100%); } .drawer.open{transform:none} .drawer-head{border-radius:12px 12px 0 0; padding-top:16px} } /* ---------- footer ---------- */ footer{background:var(--blue-dark); color:var(--on-dark-soft); font-size:13.5px} footer .wrap{padding-block:34px; display:grid; gap:26px} .logomark{background:#fff; border-radius:50%; width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center} footer .logo{width:38px; height:38px} .foot-brand{display:flex; gap:11px; align-items:center; margin-bottom:12px} .foot-brand .name{font-family:"Roboto Slab",serif; font-weight:700; font-size:17px; color:#fff; line-height:1.15} .foot-top{display:grid; gap:24px; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr)} .foot-top:has(.foot-addrs-single){grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .foot-addrs{display:grid; gap:20px 28px; grid-template-columns:repeat(auto-fit, minmax(190px,1fr))} .foot-addrs-single{grid-template-columns:minmax(190px,280px)} .foot-addrs h2{margin:0 0 5px; font-family:"IBM Plex Sans",sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff; font-weight:600} .foot-addrs address{font-style:normal; line-height:1.55; font-size:13px} .foot-addrs a{color:#fff; text-decoration:none; font-weight:600; display:inline-block; margin-top:4px} .foot-addrs a:hover{text-decoration:underline} .foot-links{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px} .foot-links a{color:#fff; text-decoration:none; font-size:12.5px; opacity:.9} .foot-links a:hover{text-decoration:underline} .legal{border-top:1px solid rgba(255,255,255,.18); padding-top:16px; display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; font-size:12.5px} /* ---------- About page hero: tool clusters framing the intro ---------- */ .about-hero{position:relative; background:var(--white); overflow:hidden} .about-hero-inner.wrap{position:relative; z-index:2; padding-block:clamp(14px,2.4vw,24px); margin-inline:auto; text-align:left} @media (min-width:761px){ .about-hero-inner.wrap{padding-right:max(24px, calc(clamp(190px,24vw,360px) - max(0px, (100vw - 1080px) / 2) + 16px))} } .about-hero-inner .eyebrow{display:block} .about-hero-inner h1{font-size:clamp(30px,5.4vw,50px); line-height:1.12; margin-block:12px 14px} .about-hero-inner .lede{font-size:17.5px; color:var(--ink-soft); margin:0; max-width:560px} .about-hero-corner{ position:absolute; z-index:1; width:clamp(190px,24vw,360px); height:auto; pointer-events:none; user-select:none; opacity:0; animation:about-corner-in .85s cubic-bezier(.16,.8,.4,1) forwards; } .about-hero-corner.tr{top:0; right:0; --cx:16px; --cy:-14px; animation-delay:.1s} .about-hero-corner.br{bottom:0; right:0; --cx:16px; --cy:14px; animation-delay:.24s} @keyframes about-corner-in{ from{opacity:0; transform:translate(var(--cx,0), var(--cy,0)) scale(.93)} to{opacity:1; transform:translate(0,0) scale(1)} } @media (prefers-reduced-motion:reduce){ .about-hero-corner{animation:none; opacity:1} } @media (max-width:760px){ /* Phone: the two tool clusters sit above and below the intro text instead of being hidden. */ .about-hero{display:flex; flex-direction:column} .about-hero-corner{position:relative; top:auto; right:auto; bottom:auto; width:min(62vw,280px)} .about-hero-corner.tr{order:0; align-self:flex-end} .about-hero-inner.wrap{order:1; width:100%; box-sizing:border-box; padding-block:10px 14px; text-align:center; max-width:640px; margin-inline:auto} .about-hero-corner.br{order:2; align-self:flex-end} .about-hero-inner .lede{margin-inline:auto} } /* ---------- About page ---------- */ .timeline{list-style:none; margin:0; padding:0; display:grid; gap:0; border-left:2px solid var(--line); margin-left:6px} .timeline li{position:relative; padding:0 0 26px 24px} .timeline li::before{content:""; position:absolute; left:-7px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--blue); border:2px solid var(--white); box-shadow:0 0 0 2px var(--blue)} .timeline li:last-child{padding-bottom:0} .timeline .yr{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--blue); font-size:13.5px} .timeline .ev{font-size:15px; color:var(--ink-soft); margin-top:2px} .story-card{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:4px; padding:22px; box-shadow:var(--shadow)} .story-card p{margin:0 0 12px; font-size:16px; color:var(--ink-soft); line-height:1.65} .story-card p:last-child{margin-bottom:0} .draft-flag{display:flex; gap:8px; align-items:flex-start; background:var(--blue-tint); border:1px solid #CBDDF5; border-radius:4px; padding:10px 13px; font-size:12.5px; color:var(--blue-dark); margin-bottom:16px} .quote-block{background:var(--blue-tint); border-left:3px solid var(--blue); border-radius:4px; padding:26px 28px} .quote-block blockquote{margin:0; font-family:"Roboto Slab",serif; font-weight:500; font-size:19px; line-height:1.55; color:var(--blue-dark); font-style:normal} .quote-block cite{display:block; margin-top:14px; font-size:13.5px; font-style:normal; color:var(--ink-soft)} /* ---------- About page: "Our Story" (owner letter + photo + condensed timeline strip) ---------- */ .story-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px; align-items:stretch} .story-eyebrow{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); font-weight:600; margin-bottom:12px} .story-eyebrow .dash{width:26px; height:2px; background:var(--red); display:inline-block; flex:0 0 auto} .story-h2{font-size:clamp(26px,3.6vw,34px); line-height:1.15; color:var(--blue-dark); margin-bottom:16px} .story-copy p{margin:0 0 14px; font-size:15.5px; color:var(--ink-soft); line-height:1.7} .story-copy p:last-child{margin-bottom:0} .story-photo{border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); height:100%; min-height:320px} .story-photo img{width:100%; height:100%; object-fit:cover; display:block} .story-stats{display:flex; flex-wrap:wrap; background:var(--blue-tint); border-radius:10px; margin-top:36px; padding:22px 8px} .story-stat{display:flex; align-items:center; gap:14px; flex:1 1 220px; padding:6px 24px; border-right:1px solid #CBDDF5} .story-stat:last-child{border-right:0} .story-stat-icon{width:38px; height:38px; border-radius:8px; background:var(--white); display:flex; align-items:center; justify-content:center; color:var(--red); flex:0 0 auto; box-shadow:var(--shadow)} .story-stat-icon svg{width:19px; height:19px} .story-stat .big{font-family:"Roboto Slab",serif; font-weight:700; font-size:19px; color:var(--blue-dark)} .story-stat .lbl{font-size:13.5px; color:var(--ink-soft); margin-top:1px} @media (max-width:860px){ .story-split{grid-template-columns:1fr; gap:26px} .story-photo{height:auto; min-height:0; aspect-ratio:3/2} } @media (max-width:620px){ .story-stat{flex:1 1 100%; border-right:0; border-bottom:1px solid #CBDDF5; padding-block:14px} .story-stat:last-child{border-bottom:0} } /* ---------- About page: "Service first. Always." (quote + actions) ---------- */ .service-h2{font-size:clamp(22px,3.2vw,28px)} .service-underline{width:46px; height:3px; background:var(--red); border-radius:2px; margin:12px 0 28px} .service-row{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap} .service-row .quote-block{flex:1 1 440px; margin:0} .service-actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap} .link-accent{background:none; border:0; padding:0; font:inherit; font-size:15px; font-weight:600; color:var(--red); text-decoration:underline; text-underline-offset:4px; cursor:pointer} .link-accent:hover{color:var(--red-hover)} /* ---------- "also stocked" callout (catalog page) ---------- */ .also-stocked{ display:flex; gap:14px; align-items:flex-start; margin:28px 0 0; background:var(--blue-tint); border:1px solid #CBDDF5; border-left:4px solid var(--blue); border-radius:6px; padding:18px 20px; box-shadow:var(--shadow); } .also-stocked .glyph{flex:0 0 auto; width:26px; height:26px; stroke:var(--blue); fill:none; stroke-width:1.6; margin-top:1px} .also-stocked p{margin:0; font-size:15px; line-height:1.55; color:var(--blue-dark)} .also-stocked strong{color:var(--blue-dark)} /* ---------- category photo tiles + lightbox ---------- */ .cat-list .photo-tile{ flex:0 0 auto; width:44px; height:44px; border-radius:6px; object-fit:cover; border:1px solid var(--line); background:var(--white); cursor:zoom-in; } .photo-lightbox{ position:fixed; inset:0; background:rgba(11,27,46,.82); z-index:70; display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; } .photo-lightbox.open{display:flex} .photo-lightbox img{max-width:min(480px,92vw); max-height:80vh; border-radius:6px; box-shadow:var(--shadow-lg)} .photo-lightbox .cap{position:absolute; bottom:28px; left:0; right:0; text-align:center; color:#fff; font-size:13.5px} /* ---------- category detail page ---------- */ .cat-hero{display:grid; gap:22px; grid-template-columns:minmax(0,auto) minmax(0,1fr); align-items:start} .cat-hero .glyphbox{width:64px; height:64px; border-radius:8px; background:var(--blue-tint); display:grid; place-items:center; flex:0 0 auto} .cat-hero .glyphbox svg{width:34px; height:34px; stroke:var(--blue); fill:none; stroke-width:1.5} .cat-detail-grid{display:grid; gap:24px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); margin-top:8px} .cat-list{list-style:none; margin:0; padding:0; display:grid; gap:12px} .cat-list li{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--ink-soft)} .cat-list .icon-tile{ flex:0 0 auto; width:36px; height:36px; border-radius:6px; background:var(--blue-tint); display:grid; place-items:center; } .cat-list .icon-tile svg{width:20px; height:20px; stroke:var(--blue); fill:none; stroke-width:1.6} .brand-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px} .brand-chips span{font-size:12.5px; font-family:"IBM Plex Mono",monospace; background:var(--grey); border:1px solid var(--line); border-radius:99px; padding:3px 11px; color:var(--ink-soft)} .cat-sidebar{background:var(--grey); border:1px solid var(--line); border-radius:4px; padding:20px; align-self:start} .cat-sidebar h3{font-family:"IBM Plex Sans",sans-serif; margin-top:1.33em; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); font-weight:600; margin-bottom:10px} .cat-nav{display:grid; gap:6px; margin-top:16px} .cat-nav a{font-size:13px; color:var(--ink-soft); text-decoration:none; padding:5px 0} .cat-nav a:hover, .cat-nav a[aria-current="page"]{color:var(--blue); font-weight:600} .no-price-note{font-size:13px; color:var(--steel); margin-top:16px; padding-top:14px; border-top:1px dotted var(--line)} /* ---------- prose (Privacy Policy etc.) ---------- */ .prose{max-width:74ch} .prose h2{font-size:20px; margin-top:34px; margin-bottom:10px} .prose h2:first-child{margin-top:0} .prose p{margin:0 0 14px; color:var(--ink-soft); font-size:15.5px; line-height:1.7} .prose ul, .prose ol{margin:0 0 14px; padding-left:22px; color:var(--ink-soft); font-size:15.5px; line-height:1.7} .prose li{margin-bottom:6px} .prose strong{color:var(--ink)} .updated{font-size:13px; color:var(--steel); margin-bottom:26px} @media (max-width:800px){ .hero .wrap{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr} .cat-detail-grid{grid-template-columns:1fr} .cat-hero{grid-template-columns:1fr} } /* ---------- category photo gallery ---------- */ .g-wrap{margin-top:26px} .g-title{font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-bottom:4px} .gsub{font-size:13px; color:var(--steel); margin:0 0 12px} .g-mosaic{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px} .g-mosaic .gi{grid-column:span 2} .g-n2 .gi, .g-n4 .gi, .g-mosaic.g-n5 .gi:nth-child(n+4), .g-mosaic.g-n8 .gi:nth-child(n+7){grid-column:span 3} .gi{display:block; padding:0; margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--white); cursor:zoom-in; aspect-ratio:16/9; font:inherit} .gi img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s} .gi:hover img{transform:scale(1.03)} .gi:hover{border-color:var(--blue)} .gi:focus-visible{outline:2px solid var(--blue); outline-offset:2px} .jk-lb{position:fixed; inset:0; background:rgba(11,27,46,.86); z-index:95; display:none; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; flex-direction:column; gap:12px} .jk-lb.open{display:flex} .jk-lb img{max-width:min(980px,94vw); max-height:78vh; width:auto; height:auto; border-radius:6px; background:#fff} .jk-lb .cap{color:#fff; font-size:13.5px; text-align:center; max-width:90vw} .jk-lb .nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--blue-dark); font-size:20px; cursor:pointer} .jk-lb .prev{left:14px} .jk-lb .next{right:14px} .jk-lb .close{position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--blue-dark); font-size:20px; cursor:pointer} @media (prefers-reduced-motion:reduce){ .gi img{transition:none} } @media (max-width:800px){ .g-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))} .g-mosaic .gi, .g-n2 .gi, .g-n4 .gi, .g-mosaic.g-n5 .gi:nth-child(n+4), .g-mosaic.g-n8 .gi:nth-child(n+7){grid-column:span 1} .g-mosaic.g-n5 .gi:first-child{grid-column:span 2} } @media (max-width:520px){ .g-n2{grid-template-columns:1fr} } .form-note{color:var(--red-hover); font-size:13px; font-weight:600; margin:0 0 10px} .form-note:empty{display:none} /* Shown only when JavaScript is switched off (see