/* AZ Printing & Signs, landing page built to the client's own design
(Awais Muhammad's "TOP BANNER.psd", received 2026-10-04).
Every colour below was sampled from that file; every type size is the
mockup's size at its 1920px artboard turned into a viewport unit, with a
clamp so phones and very wide screens stay readable. The mockup's fonts,
Carter Sans Bold and Gotham, are licensed desktop fonts that cannot be
served on the web without buying webfont licences; Merriweather and
Montserrat are the closest Google Fonts stand-ins and swap for the real
ones by changing the two custom properties and the in the head. */
:root {
--magenta: #9f257d; /* hero, top left of the gradient (the client's PSD) */
/* BRAND PALETTE (AZ Brand Colours.pdf). Fahad 2026-10-06: "purple/pink has
dominated, add the brand colours more". Every accent outside the hero is
now brand red; the hero keeps the client's magenta artwork. Amber on white
fails text contrast (1.9:1): fills and icons on dark only. */
--red: #a01d20;
--red-deep: #8c161a;
--amber: #ffa347;
--gold: #b37b33;
--accent: var(--red);
--pink: #e8286a; /* hero, bottom edge of the gradient */
--plum: #a1297f; /* "we commit we deliver" */
--link: var(--red); /* was the PSD's #ab009e; brand red since 2026-10-06 */
--ink: #0a0a0a; /* headings */
--body: #3b3b3b; /* paragraph text (mockup: 23% grey) */
--tile: #241f21; /* product tile titles */
--band: #e6e6e3; /* the grey slogan band */
--field: #8a8a8a; /* form field borders */
--foot: #000;
--foot-text: #e8e8e8;
--display: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fahad 2026-10-10: sans serif instead of serif, incl. the logo (was Merriweather) */
--sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--gutter: 16px;
--wrap: 1480px;
}
@media (min-width: 900px) { :root { --gutter: 48px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
font-family: var(--sans);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--body);
background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); }
p { margin: 0 0 1.1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* ---------- header: the mockup's white bar with the logo top left ---------- */
.head { background: #fff; }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 48px; height: auto; }
.brand-word { font-family: var(--display); font-weight: 900; font-size: 1.05rem; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.head-contact { display: flex; align-items: center; gap: 1rem; font-weight: 500; font-size: .95rem; }
.head-contact .wa { display: none; text-decoration: none; color: var(--ink); }
.head-contact .btn { white-space: nowrap; }
.call-long { display: none; }
@media (min-width: 480px) { .call-long { display: inline; } .call-short { display: none; } }
.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: .02em; padding: .8rem 1.3rem; min-height: 44px; line-height: 1.6; border: 0; border-radius: 4px; cursor: pointer; font-family: var(--sans); }
.btn:hover { background: var(--red-deep); }
@media (min-width: 700px) {
.head-in { min-height: 90px; }
.brand img { width: 60px; }
.brand-word { font-size: 1.3rem; }
.head-contact .wa { display: inline; }
}
/* ---------- hero ----------
Desktop: the collage (rendered from the PSD without its text layers) is the
section's background at its own 1920x1083 proportion, so it never crops,
and the headline sits over the plain left third exactly where the mockup
puts it. Phone: gradient first with the words, then the product crop,
masked in at the top so there is no seam. */
.hero { position: relative; color: #fff; overflow: hidden; background: linear-gradient(180deg, #93267e 0%, #a6237b 14%, #c52074 30%, #d2326a 42%, #dd3a5a 55%, #ea3558 68%, #e4276a 80%, #cd326b 90%, #b53d6b 100%); }
.hero-text { position: relative; z-index: 2; padding: 2.5rem var(--gutter) 1.5rem; max-width: 34rem; }
.hero h1 { position: relative; color: #fff; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.25rem, 9.5vw, 3.6rem); line-height: 1.02; letter-spacing: .005em; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
/* the two thin corner marks around the headline (desktop only: on a phone the
headline fills the width and the marks would be clipped) */
.hero h1::before, .hero h1::after { content: none; } /* the mockup's corner marks: removed, Fahad 2026-10-05 night */
.hero h1::before { right: -.6em; top: -1.45em; border-left: 0; border-bottom: 0; } /* clears the eyebrow line above the headline */
.hero h1::after { left: -.6em; bottom: -.55em; border-right: 0; border-top: 0; }
.hero-list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; gap: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; line-height: 1.2; }
.hero-list li { text-align: center; }
.hero-art { position: relative; z-index: 1; margin: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); margin-top: -1rem; }
.hero-art img { width: 100%; }
.hero-quality { position: absolute; right: var(--gutter); bottom: .9rem; z-index: 2; margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
@media (min-width: 900px) {
.hero { aspect-ratio: 1920 / 1083; }
.hero-art { display: none; }
/* Merriweather runs wider than the mockup's Carter Sans, so the size is
set from the headline's WIDTH (498px of 1920, five lines), not its cap
height, and the column is held to the mockup's 26% so "TO BE / SEEN"
breaks where the mockup breaks it. */
.hero-text { position: absolute; left: 4.6%; top: 15%; width: 26%; max-width: none; padding: 0; }
.hero h1 { font-size: 3.85vw; line-height: 1.04; }
.hero-list { flex-direction: column; gap: 1.1vw; margin-top: 2.6vw; font-size: 1.15vw; align-items: center; }
.hero-quality { right: 2.4%; bottom: 2.6%; font-size: .85vw; }
}
@media (min-width: 1480px) {
.hero-text { left: calc(50% - 740px + 68px); width: 400px; }
.hero h1 { font-size: 4.6rem; }
.hero-list { font-size: 1.1rem; gap: 1rem; margin-top: 2.4rem; }
.hero-quality { font-size: .8rem; }
}
/* ---------- slogan band ---------- */
/* .slogan: see the banner rules at the end of this file (2026-10-05 evening) */
/* ---------- welcome ---------- */
.welcome { padding: clamp(2.5rem, 5vw, 5rem) 0; }
.welcome-in { display: grid; gap: 2rem; }
.welcome h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.55rem, 3.1vw, 3.5rem); line-height: 1.12; margin-bottom: 1.1rem; }
.welcome p { font-size: clamp(1.0625rem, 1.15vw, 1.3rem); line-height: 1.55; }
.welcome .contact-link { color: var(--link); font-weight: 700; text-decoration: none; display: inline-block; padding: .55em 0; margin: -.55em 0; }
.welcome .contact-link:hover { text-decoration: underline; }
.welcome-photo { margin: 0; }
.welcome-photo img { width: 100%; }
@media (min-width: 760px) {
.welcome-in { grid-template-columns: 1fr .62fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
}
/* ---------- products ---------- */
.products { padding: 0 0 clamp(2.5rem, 5vw, 5rem); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.6vw, 2.8rem) clamp(1rem, 2.6vw, 2.8rem); }
.tile h3 { font-weight: 900; text-transform: uppercase; color: var(--tile); text-align: center; font-size: clamp(.85rem, 1.75vw, 1.7rem); letter-spacing: .01em; line-height: 1.2; margin-bottom: .75em; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
/* ---------- contact ---------- */
.contact { padding: clamp(2.5rem, 5vw, 5rem) 0; }
.contact h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 3.1vw, 3.5rem); line-height: 1.1; margin-bottom: 1.5rem; }
.contact-in { display: grid; gap: 2.5rem; }
.form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.form-field { display: block; }
.form-field span { display: block; font-size: .9rem; color: var(--ink); margin-bottom: .35rem; }
.form-field input, .form-field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--field); border-radius: 0; padding: .7rem .8rem; }
.form-field textarea { min-height: 11rem; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.form-actions .alt { font-size: .95rem; }
.form-actions .alt a { color: var(--link); font-weight: 700; text-decoration: none; display: inline-block; padding: .6em 0; }
.form-actions .alt a:hover { text-decoration: underline; }
.form-sent { display: none; margin: 1rem 0 0; padding: 1rem 1.2rem; background: var(--band); color: var(--ink); font-weight: 500; }
.form-sent.show { display: block; }
.hp { position: absolute; left: -9999px; }
.map { margin: 0; }
.map iframe { display: block; width: 100%; aspect-ratio: 4 / 5; border: 0; background: #e9e9e9; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
.contact-in { grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.map iframe { aspect-ratio: 755 / 979; }
}
/* ---------- footer ---------- */
.foot { background: var(--foot); color: var(--foot-text); padding: clamp(2.5rem, 4vw, 4.5rem) 0 1.5rem; }
.foot-in { display: grid; gap: 2rem; }
.foot .brand-word { color: #fff; }
.foot-text { margin-top: 1.6rem; max-width: 34rem; font-size: clamp(1rem, 1.05vw, 1.2rem); line-height: 1.5; }
.foot p { margin-bottom: .9rem; }
.foot a { color: #fff; display: inline-block; padding: .6em 0; } /* 44px tap targets on a phone */
.foot-base { margin-top: 2.5rem; font-size: .85rem; color: #bdbdbd; }
.foot-base p { margin: 0; }
@media (min-width: 760px) {
.foot-in { grid-template-columns: 1fr auto; align-items: start; }
}
/* ---------- site navigation (added 2026-10-05 when the tiles became pages) ---------- */
.nav { display: none; gap: 1.6rem; font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.nav a { text-decoration: none; color: var(--ink); padding: .5rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
@media (min-width: 760px) { .nav { display: flex; } }
/* tiles are links now */
.tile a { display: block; text-decoration: none; color: inherit; }
.tile a img { transition: transform .35s ease; }
.tile a:hover img, .tile a:focus-visible img { transform: scale(1.03); }
.tile a:hover h3 { color: var(--accent); }
.tile-more { display: block; margin-top: .6rem; text-align: center; font-weight: 700; font-size: .9rem; color: var(--link); }
.tile-more::after { content: " \2192"; }
.tile a { overflow: hidden; }
/* ---------- product pages ---------- */
.page-head { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.crumbs { font-size: .9rem; font-weight: 500; margin-bottom: 1.2rem; color: var(--body); }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs span { margin: 0 .35rem; }
.page-head h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1.08; margin-bottom: .8rem; }
.lede { font-size: clamp(1.0625rem, 1.2vw, 1.3rem); max-width: 40rem; }
.lede a { color: var(--link); font-weight: 700; text-decoration: none; }
.product-top { display: grid; gap: 1.5rem; }
.product-photo { margin: 0; }
.product-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.3rem; margin: 1.3rem 0 0; }
.text-link { color: var(--link); font-weight: 700; text-decoration: none; display: inline-block; padding: .5em 0; }
.text-link:hover { text-decoration: underline; }
.btn-line { background: #fff; color: var(--accent); border: 2px solid var(--accent); }
.btn-line:hover { background: var(--accent); color: #fff; }
@media (min-width: 900px) {
.product-top { grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
}
.product-types { background: var(--band); padding: clamp(2.5rem, 4.5vw, 4.5rem) 0; }
.product-types h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin-bottom: .5rem; }
.types-note { max-width: 40rem; margin-bottom: 1.6rem; }
.set-h { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; color: var(--tile); margin: 1.8rem 0 .8rem; }
.types { display: grid; gap: 1rem; margin: 0 0 .5rem; }
.ty { background: #fff; padding: 1.1rem 1.2rem 1.2rem; border-left: 4px solid var(--accent); }
.ty dt { font-weight: 700; color: var(--ink); font-size: 1.05rem; margin-bottom: .3rem; }
.ty dd { margin: 0; line-height: 1.5; }
@media (min-width: 600px) { .types { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .types { grid-template-columns: repeat(3, 1fr); } }
.product-ask { padding: clamp(2.5rem, 4.5vw, 4.5rem) 0; }
.product-ask-in { text-align: center; }
.product-ask h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin-bottom: .5rem; }
.product-ask p { max-width: 36rem; margin-left: auto; margin-right: auto; }
.product-ask .product-ctas { justify-content: center; }
.others { padding: 0 0 clamp(2.5rem, 4.5vw, 4.5rem); }
.others h2 { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; color: var(--tile); margin-bottom: 1rem; }
.others-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.others-list a { display: block; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.others-list img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .5rem; }
.others-list a:hover { color: var(--accent); }
@media (min-width: 760px) { .others-list { grid-template-columns: repeat(7, 1fr); } }
/* footer product links */
.foot-h { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; color: #fff; margin-bottom: .6rem; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.foot-nav li { break-inside: avoid; font-size: .95rem; }
.foot-nav a { text-decoration: none; font-size: .95rem; }
.foot-nav a:hover { text-decoration: underline; }
/* ======================================================================
MOTION LAYER (2026-10-05). Everything here is additive: with scripting
off, reduced motion on, or ?motion=off, none of it hides anything.
====================================================================== */
/* Lenis base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* sticky header that settles when the page moves */
.head { position: sticky; top: 0; z-index: 50; transition: box-shadow .35s ease, background-color .35s ease; }
.head.is-scrolled { box-shadow: 0 2px 18px rgba(16, 24, 32, .10); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.head-in { transition: min-height .35s ease; }
@media (min-width: 700px) { .head.is-scrolled .head-in { min-height: 72px; } }
/* the layered hero stage: every product is its own cut-out positioned by the
PSD's pixel box as a percentage of the 1920x1083 banner, so the collage
reassembles at any width. On phones the stage is wider than its viewport
and shifted left, which crops the plain headline column away. */
.hero-view { position: relative; overflow: hidden; aspect-ratio: 1590 / 1083; margin-top: -1rem; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%); mask-image: linear-gradient(to bottom, transparent, #000 16%); }
.hero-stage { position: absolute; top: 0; left: -20.755%; width: 120.755%; aspect-ratio: 1920 / 1083; }
.hero-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-item { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; will-change: transform; }
.hero-item img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(60, 0, 40, .28)); }
html.pre .hero-item, html.pre .hero h1 .w, html.pre .hero-list li, html.pre .hero-eyebrow, html.pre .hero-ctas, html.pre .hero-quality { visibility: hidden; }
.hero h1 .w { display: inline-block; }
@media (min-width: 900px) {
.hero { background: none; aspect-ratio: 1920 / 1083; }
.hero-view { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
.hero-stage { left: 0; width: 100%; height: 100%; }
}
/* reveals: the house entrance (ZEF), one item at a time via motion.js */
/* Scroll reveals (blur + fade + rise) REMOVED 2026-10-06, Fahad: "remove this
shading effect". Sections are simply there when you scroll to them. */
.welcome-photo { overflow: hidden; }
html.motion .welcome-photo img { height: 112%; object-fit: cover; }
.slogan .line { display: block; }
/* hover and press states: the page answers the pointer */
.btn { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(160, 29, 32, .28); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.tile a { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.tile a:hover { transform: translateY(-6px); }
.tile a img { box-shadow: 0 0 0 rgba(0,0,0,0); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.tile a:hover img { box-shadow: 0 22px 40px rgba(16, 24, 32, .16); }
.tile-more::after { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.tile a:hover .tile-more::after { transform: translateX(5px); }
.nav a { transition: border-color .25s ease; }
.contact-link, .text-link { transition: color .2s ease; }
/* form: the field tells you it is wrong only after you have been in it */
.form-field input:user-invalid, .form-field textarea:user-invalid { border-color: #b3261e; }
.form-field input:user-valid, .form-field textarea:user-valid { border-color: #2e7d32; }
/* phone bar: call, WhatsApp and the form, always one thumb away */
.phone-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: #d9d9d6; box-shadow: 0 -2px 14px rgba(0,0,0,.12); }
.phone-bar a { display: block; text-align: center; background: #fff; color: var(--ink); font-weight: 700; font-size: .9rem; padding: .95rem .5rem; text-decoration: none; }
.phone-bar a.pb-main { background: var(--accent); color: #fff; }
@media (min-width: 760px) { .phone-bar { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 3.6rem; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html.pre .hero-item, html.pre .hero h1 .w, html.pre .hero-list li, html.pre .hero-eyebrow, html.pre .hero-ctas, html.pre .hero-quality { visibility: visible; }
}
/* ======================================================================
2026-10-05 evening: the banner, the storefront welcome, the grouped catalogue
====================================================================== */
/* the slogan band is a proper banner: brand ground, the promise, one line
of confirmed fact and the way in */
.slogan { background: linear-gradient(100deg, #6a2c87 0%, #9f257d 45%, #c52074 100%); color: #fff; text-align: left; padding: clamp(2.5rem, 5vw, 5.5rem) 0; position: relative; overflow: hidden; }
.slogan::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; right: -18vw; top: -40vw; background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0)); pointer-events: none; }
.slogan-in { display: grid; gap: 1.6rem 3rem; align-items: center; position: relative; }
.slogan h2 { color: #fff; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -.01em; margin: 0; }
.slogan p { margin: 0; }
.slogan-side p:first-child { font-size: clamp(1.0625rem, 1.2vw, 1.3rem); line-height: 1.5; max-width: 30rem; }
.slogan-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.2rem !important; }
.btn-white { background: #fff; color: var(--accent); }
.btn-white:hover { background: #fff; color: var(--red-deep); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.slogan-call { color: #fff; font-weight: 700; text-decoration: none; display: inline-block; padding: .5em 0; border-bottom: 2px solid rgba(255,255,255,.5); }
.slogan-call:hover { border-bottom-color: #fff; }
@media (min-width: 900px) { .slogan-in { grid-template-columns: 1.1fr 1fr; } }
/* the welcome photo is the storefront, landscape */
.welcome-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 760px) { .welcome-in { grid-template-columns: 1fr 1fr; align-items: center; } }
/* the catalogue: three groups of cards, one picture, one sentence each */
.catalog { padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 4rem); }
.catalog-head { max-width: 42rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.catalog-head h2 { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 3.1vw, 3.4rem); line-height: 1.1; margin-bottom: .5rem; }
.catalog-head p { font-size: clamp(1.0625rem, 1.15vw, 1.25rem); margin: 0; }
.group { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; padding-bottom: .8rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--band); }
.group-head h3 { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; color: var(--tile); }
.group-head p { margin: 0; color: var(--body); font-size: .95rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e3e3e0; border-radius: 8px; overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease; }
.card a:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(16,24,32,.12); border-color: #d6d6d2; }
.card-img { display: block; overflow: hidden; }
.card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.card a:hover .card-img img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.card-body strong { font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: .005em; }
.card-body > span { font-size: .93rem; line-height: 1.45; color: var(--body); }
.card-body em { font-style: normal; font-weight: 700; font-size: .85rem; color: var(--link); margin-top: auto; padding-top: .5rem; }
.card-body em::after { content: " \2192"; display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.card a:hover .card-body em::after { transform: translateX(5px); }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } }
/* phones: two cards across and no description, so the catalogue reads as a
menu (one-up with sentences ran the page to 13 screens, rule 26 wants 7-9) */
@media (max-width: 599px) {
.cards { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.card-body { padding: .75rem .8rem .85rem; gap: .25rem; }
.card-body strong { font-size: .95rem; line-height: 1.25; }
.card-body > span { display: none; }
.card-body em { padding-top: .25rem; font-size: .8rem; }
}
/* ======================================================================
2026-10-05 night: the hero answers the pointer. Each cut-out is a link
with a label; hovering lifts and tilts it, dims the rest, and a soft
light follows the cursor across the ground.
====================================================================== */
.hero-item { text-decoration: none; display: block; z-index: 2; }
.hero-item:hover, .hero-item:focus-visible, .hero-item.is-hover { z-index: 20; }
.hero-item:focus-visible { outline: none; }
.hero-float { display: block; perspective: 900px; }
.hero-lift { display: block; transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
.hero-item:hover .hero-lift, .hero-item:focus-visible .hero-lift, .hero-item.is-hover .hero-lift { --lift: -14px; --s: 1.05; }
.hero-item:hover img, .hero-item:focus-visible img, .hero-item.is-hover img { filter: drop-shadow(0 30px 36px rgba(60, 0, 40, .42)); }
.hero-item img { transition: filter .35s ease; }
/* the rest step back while one is held */
.hero-stage:has(.hero-item:hover) .hero-item:not(:hover) .hero-lift,
.hero-stage:has(.hero-item:focus-visible) .hero-item:not(:focus-visible) .hero-lift,
.hero.has-hover .hero-item:not(.is-hover) .hero-lift { opacity: .55; }
/* the label */
.hero-tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px); margin-top: .35vw; white-space: nowrap; background: #fff; color: var(--accent); font-weight: 800; font-size: clamp(.7rem, .95vw, 1rem); letter-spacing: .03em; text-transform: uppercase; padding: .45em .9em; border-radius: 999px; box-shadow: 0 8px 20px rgba(60,0,40,.25); opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.hero-tag::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.hero-item:hover .hero-tag, .hero-item:focus-visible .hero-tag, .hero-item.is-hover .hero-tag { opacity: 1; transform: translate(-50%, 8px); }
/* the cursor light on the ground */
.hero.has-light::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%); mix-blend-mode: soft-light; transition: opacity .4s ease; }
.hero-text, .hero-quality { z-index: 3; }
.hero-view { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.hero-lift { transform: none !important; }
.hero.has-light::after { display: none; }
}
.hero-tag.above { top: auto; bottom: 100%; margin-top: 0; margin-bottom: .35vw; transform: translate(-50%, -2px); }
.hero-tag.above::before { top: auto; bottom: -5px; }
.hero-item:hover .hero-tag.above, .hero-item:focus-visible .hero-tag.above, .hero-item.is-hover .hero-tag.above { transform: translate(-50%, -8px); }
/* ======================================================================
2026-10-05 late: the hero's text takes its position and sizes from
variables, so an edited layout (hero-layout.json via build.py, or the
?edit=1 mode live) can move and scale it the way the products move.
====================================================================== */
@media (min-width: 900px) {
.hero-text { left: var(--tx, 4.6%); top: var(--ty, 15%); width: var(--tw, 26%); }
.hero h1 { font-size: var(--h1, 3.85vw); }
.hero-list { font-size: var(--lsz, 1.15vw); }
.hero-quality { right: var(--qr, 2.4%); bottom: var(--qb, 2.6%); font-size: var(--qs, .85vw); }
}
@media (min-width: 1480px) {
.hero-text { left: var(--tx, calc(50% - 740px + 68px)); width: var(--tw, 400px); }
.hero h1 { font-size: var(--h1, 4.6rem); }
.hero-list { font-size: var(--lsz, 1.1rem); }
.hero-quality { font-size: var(--qs, .8rem); }
}
/* ---------- edit mode (?edit=1): handles, HUD, no motion, no links ---------- */
html.editing .hero-lift { transform: none !important; opacity: 1 !important; }
html.editing .hero-tag { display: none; }
html.editing .hero.has-light::after { display: none; }
html.editing .ed { cursor: move; outline: 1px dashed rgba(255,255,255,.35); outline-offset: 2px; }
html.editing .ed.ed-on { outline: none; }
html.editing .hero-item img { filter: none; }
.ed-box { position: absolute; z-index: 100; border: 2px solid #00e5ff; pointer-events: none; display: none; }
.ed-box i { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #00b8d9; pointer-events: auto; }
.ed-box i[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.ed-box i[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.ed-box i[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.ed-box i[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.ed-box .ed-name { position: absolute; left: -2px; top: -26px; background: #00b8d9; color: #fff; font: 700 11px/1 var(--sans); padding: 5px 7px; border-radius: 3px; letter-spacing: .04em; text-transform: uppercase; }
.ed-panel { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 200; background: #111; color: #eee; font: 13px/1.4 var(--sans); padding: 8px 10px; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.45); max-width: calc(100vw - 32px); }
.ed-panel[style*="left"] { transform: none; }
.ed-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.ed-grip { cursor: grab; color: #777; font-size: 18px; padding: 0 4px; user-select: none; }
.ed-selname { color: #00e5ff; min-width: 110px; }
.ed-panel label { display: inline-flex; align-items: center; gap: 4px; color: #bbb; }
.ed-panel input { width: 62px; background: #222; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 4px 6px; font: inherit; }
.ed-sp { flex: 1; min-width: 6px; }
.ed-panel button { font: 700 12px/1 var(--sans); padding: 8px 10px; border: 0; border-radius: 5px; background: #333; color: #fff; cursor: pointer; }
.ed-panel button.ed-main { background: #00b8d9; }
.ed-panel .ed-more { border-top: 1px solid #333; margin-top: 8px; padding-top: 8px; max-width: 560px; }
.ed-panel .ed-more p { margin: 0 0 8px; color: #bbb; }
.ed-panel .ed-out { width: 100%; font: 11px/1.3 ui-monospace, Menlo, monospace; background: #000; color: #9f9; border: 1px solid #333; border-radius: 4px; padding: 6px; resize: vertical; margin-bottom: 8px; }
.ed-panel code { color: #fff; }
.ed-pill { position: fixed; right: 14px; bottom: 14px; z-index: 200; font: 700 12px/1 var(--sans); padding: 10px 12px; border: 0; border-radius: 999px; background: #111; color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
/* ---------- hero copy elements beyond the client's headline (2026-10-05 night) ---------- */
.hero-eyebrow { margin: 0 0 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.72rem, .85vw, .95rem); color: rgba(255,255,255,.85); }
.hero-sub { margin: 1.3rem 0 0; font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.5; max-width: 28rem; color: #fff; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin: 1.4rem 0 0; }
.hero-ctas .btn-white { background: #fff; color: var(--accent); }
.hero-ctas .hero-call { display: inline-flex; align-items: center; min-height: 44px; padding: .8rem 1.3rem; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; text-decoration: none; border: 2px solid rgba(255,255,255,.7); border-radius: 4px; line-height: 1.6; box-sizing: border-box; transition: background-color .2s ease, border-color .2s ease; }
.hero-ctas .hero-call:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.hero-ctas .btn { display: inline-flex; align-items: center; box-sizing: border-box; border: 2px solid #fff; transition: background-color .2s ease, box-shadow .25s ease; }
/* no transform transition on hero buttons: GSAP animates their transform on
entry and a CSS transition on the same property lags one button behind
the other (Fahad's screenshot, 2026-10-05) */
.hero-ctas .btn:hover { transform: none; }
.hero-ctas .btn:active { transform: none; }
.hero h1.h-long { font-size: clamp(1.9rem, 7.5vw, 2.9rem); }
@media (min-width: 900px) {
.hero-eyebrow { font-size: .85vw; margin-bottom: 1.2vw; }
.hero-sub { font-size: 1.1vw; margin-top: 1.4vw; max-width: none; }
.hero-ctas { margin-top: 1.6vw; gap: .8vw 1.4vw; }
.hero h1.h-long { font-size: var(--h1, 3.1vw); }
}
@media (min-width: 1480px) {
.hero-eyebrow { font-size: .8rem; }
.hero-sub { font-size: 1.05rem; }
.hero h1.h-long { font-size: var(--h1, 3.6rem); }
}
/* ======================================================================
2026-10-05 night: the background moves, the products do not (Fahad).
The ribbon is the PSD's own Layer 10 over the flat gradient. It drifts
on a slow loop; a mirrored, fainter copy drifts the other way behind it.
Transform only, long periods, and still under reduced motion.
====================================================================== */
.hero-swirl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: transform; transform-origin: 50% 50%; }
.hero-swirl-a { animation: swirl-a 16s ease-in-out infinite alternate; }
.hero-swirl-b { opacity: .5; animation: swirl-b 23s ease-in-out infinite alternate; }
/* turned up 2026-10-05 ("moving far too subtly"): 5% of travel, 4deg of
rotation, a 12% breathe, 16s / 23s loops, and the second copy pulsing */
@keyframes swirl-a {
0% { transform: translate(-2%, 2%) rotate(-2deg) scale(1.18); }
35% { transform: translate(3%, -3%) rotate(2.5deg) scale(1.26); }
70% { transform: translate(-1%, -4%) rotate(4deg) scale(1.22); }
100% { transform: translate(5%, 3%) rotate(-3deg) scale(1.3); }
}
@keyframes swirl-b {
0% { transform: scaleX(-1) translate(1%, -2%) rotate(1deg) scale(1.3); opacity: .35; }
40% { transform: scaleX(-1) translate(-5%, 3%) rotate(-4deg) scale(1.38); opacity: .6; }
75% { transform: scaleX(-1) translate(2%, 4%) rotate(3deg) scale(1.32); opacity: .4; }
100% { transform: scaleX(-1) translate(4%, -3%) rotate(-2deg) scale(1.4); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .hero-swirl { animation: none; } }
html.editing .hero-swirl { animation: none; }
/* ======================================================================
2026-10-05 night: PROFESSIONAL NAV (the studio's ZEF pattern) and the
3D CATALOGUE. These rules supersede the earlier .nav / .card rules.
====================================================================== */
/* utility strip: scrolls away, the main bar stays */
.util { background: #000; color: rgba(255,255,255,.82); font-size: .82rem; letter-spacing: .01em; }
.util-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
.util p { margin: 0; display: flex; gap: 1.4rem; align-items: center; }
.util a { color: #fff; text-decoration: none; }
.util a:hover { text-decoration: underline; }
.util-r a { font-weight: 700; }
@media (max-width: 899px) { .util { display: none; } }
/* main bar */
.head { background: #fff; border-bottom: 1px solid #ececea; }
.head-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; min-height: 76px; }
.head .brand img { width: 52px; }
.head .brand-word { font-size: 1.15rem; }
.menu { display: none; justify-self: center; gap: .4rem; }
.menu a, .menu-dd { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .7rem 1rem; border-radius: 6px; font: 700 .97rem/1 var(--sans); letter-spacing: .01em; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.menu a:hover, .menu-dd:hover, .menu-dd[aria-expanded="true"] { background: #fbf1e6; color: var(--accent); }
.menu a::after, .menu-dd::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.menu a[aria-current="page"]::after, .menu-dd[data-current]::after { transform: scaleX(1); }
.menu-dd svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.menu-dd[aria-expanded="true"] svg { transform: rotate(180deg); }
.head-cta { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.head-cta .btn { display: none; }
.btn-ghost { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .65rem 1rem; border: 1.5px solid #dcd6da; border-radius: 6px; color: var(--ink); font: 700 .93rem/1 var(--sans); text-decoration: none; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.btn-ghost svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.burger { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid #dcd6da; border-radius: 8px; background: #fff; cursor: pointer; }
.burger svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; fill: none; }
.burger path { transform-origin: center; transition: transform .3s cubic-bezier(.5,.85,.25,1.1); }
.burger .l1 { transform: translateY(-7px); }
.burger .l3 { transform: translateY(7px); }
.burger[aria-expanded="true"] .l1 { transform: translateY(0) rotate(315deg); }
.burger[aria-expanded="true"] .l2 { transform: scaleX(0); }
.burger[aria-expanded="true"] .l3 { transform: translateY(0) rotate(225deg); }
@media (min-width: 900px) {
.menu { display: flex; }
.head-cta .btn { display: inline-flex; align-items: center; }
.btn-ghost { display: inline-flex; }
.burger { display: none; }
}
@media (max-width: 1099px) and (min-width: 900px) { .btn-ghost span { display: none; } }
@media (max-width: 899px) { .head-in { grid-template-columns: 1fr auto; min-height: 68px; } }
/* the mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #ececea; box-shadow: 0 24px 48px rgba(18, 12, 10, .14); opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.mega.open { opacity: 1; transform: none; }
.mega-in { display: grid; grid-template-columns: 1.9fr 1.05fr .95fr .9fr; gap: 1.8rem; padding-top: 1.8rem; padding-bottom: 2rem; }
.mm-h { margin: 0 0 .7rem; font: 900 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.mm-col { display: grid; align-content: start; gap: .15rem; }
.mm-col:first-child { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.mm-col:first-child .mm-h { grid-column: 1 / -1; }
.mm-col a { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: 8px; text-decoration: none; color: var(--ink); transition: background-color .2s ease; }
.mm-col a:hover { background: #fbf1e6; }
.mm-thumb { flex: none; width: 46px; height: 46px; border-radius: 6px; overflow: hidden; background: #eee; }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.mm-col a:hover .mm-thumb img { transform: scale(1.08); }
.mm-txt { display: grid; gap: .1rem; }
.mm-txt b { font-size: .93rem; font-weight: 800; }
.mm-txt i { font-style: normal; font-size: .8rem; color: #6b6168; }
.mm-side { background: linear-gradient(150deg, #8c161a 0%, #a01d20 60%, #b3352a 100%); color: #fff; border-radius: 12px; padding: 1.4rem; align-self: start; }
.mm-side p { margin: 0 0 1rem; font-size: .93rem; line-height: 1.45; color: rgba(255,255,255,.9); }
.mm-side .mm-side-h { font: 900 1.15rem/1.2 var(--display); color: #fff; margin-bottom: .5rem; }
.mm-side .btn { background: #fff; color: var(--accent); }
.mm-all { display: block; margin-top: .9rem; color: #fff; font-weight: 700; font-size: .9rem; }
.head.mega-open { box-shadow: none; }
/* the phone sheet */
.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(18, 12, 10, .45); opacity: 0; transition: opacity .25s ease; }
.sheet.open { opacity: 1; }
.sheet-in { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: #fff; padding: 84px 22px 28px; overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); }
.sheet.open .sheet-in { transform: none; }
html.sheet-open { overflow: hidden; }
html.sheet-open .head { z-index: 80; }
.sheet-h { margin: 0 0 .5rem; font: 900 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sh-group { border-bottom: 1px solid #ececea; }
.sh-group summary { list-style: none; cursor: pointer; padding: .95rem 0; font-weight: 800; font-size: 1.05rem; color: var(--ink); display: flex; justify-content: space-between; }
.sh-group summary::-webkit-details-marker { display: none; }
.sh-group summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.sh-group[open] summary::after { content: "\2212"; }
.sh-group div { display: grid; padding: 0 0 .8rem; }
.sh-group div a { padding: .55rem 0 .55rem .2rem; color: var(--body); text-decoration: none; font-weight: 500; }
.sheet-link { display: block; padding: .95rem 0; border-bottom: 1px solid #ececea; font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.sheet-cta { display: grid; gap: .7rem; margin: 1.5rem 0 1.2rem; }
.sheet-cta .btn, .sheet-cta .btn-ghost { display: flex; justify-content: center; }
.btn-ghost.dark { border-color: #dcd6da; }
.sheet-meta { margin: 0; font-size: .85rem; color: #6b6168; line-height: 1.5; }
/* ---------- the 3D catalogue ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.8rem; }
.tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid #e2dce0; background: #fff; color: var(--ink); font: 700 .92rem/1 var(--sans); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.tab span { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; border-radius: 999px; background: #f2ecf0; color: var(--accent); font-size: .78rem; }
.tab:hover { border-color: var(--accent); }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(160, 29, 32, .28); }
.tab[aria-selected="true"] span { background: rgba(255,255,255,.22); color: #fff; }
.c3d-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; perspective: 1400px; }
@media (min-width: 760px) { .c3d-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
@media (min-width: 1100px) { .c3d-grid { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } }
.c3d[hidden] { display: none; }
.c3d a { display: block; text-decoration: none; color: #fff; border-radius: 16px; }
.c3d-in { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #14100e; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; box-shadow: 0 10px 24px rgba(18, 12, 10, .14), 0 2px 6px rgba(18, 12, 10, .08); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; will-change: transform; }
.c3d.tilting .c3d-in { transition: transform .08s linear, box-shadow .4s ease; box-shadow: 0 30px 60px rgba(18, 12, 10, .28), 0 8px 16px rgba(18, 12, 10, .12); }
.c3d a:hover .c3d-in, .c3d a:focus-visible .c3d-in { box-shadow: 0 30px 60px rgba(18, 12, 10, .28), 0 8px 16px rgba(18, 12, 10, .12); }
.c3d-img { position: absolute; inset: 0; }
.c3d-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.c3d a:hover .c3d-img img { transform: scale(1.1); }
.c3d-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,12,10,0) 38%, rgba(18,12,10,.55) 68%, rgba(18,12,10,.92) 100%); }
.c3d-chip { position: absolute; left: .9rem; top: .9rem; padding: .38rem .7rem; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--accent); font: 800 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transform: translateZ(30px); }
.c3d-txt { position: absolute; left: 1.1rem; right: 4rem; bottom: 1.1rem; display: grid; gap: .25rem; transform: translateZ(40px); }
.c3d-txt strong { font: 900 1.25rem/1.15 var(--display); color: #fff; letter-spacing: .005em; }
.c3d-txt span { font-size: .86rem; line-height: 1.35; color: rgba(255,255,255,.86); }
.c3d-go { position: absolute; right: 1rem; bottom: 1.1rem; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; transform: translateZ(50px); transition: background-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.c3d-go svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.c3d a:hover .c3d-go { background: var(--accent); }
.c3d a:hover .c3d-go svg { stroke: #fff; transform: translateX(2px); }
.c3d-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.28), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; transition: opacity .3s ease; }
.c3d.tilting .c3d-glare { opacity: 1; }
.c3d.c3d-enter .c3d-in { animation: c3d-in .5s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); }
@keyframes c3d-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
.c3d-in { aspect-ratio: 3 / 4; border-radius: 12px; }
.c3d-txt { left: .8rem; right: .8rem; bottom: .8rem; }
.c3d-txt strong { font-size: 1rem; }
.c3d-txt span, .c3d-go, .c3d-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .c3d-in, .c3d-img img { transition: none; transform: none !important; } }
@media (max-width: 599px) {
.tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }
}
/* ---------- doors + industries (carried over from the shop build, 2026-10-06) ----------
Fahad: "add two sections from the original site". Same interaction as
`05 - Site`: on desktop the hovered card WIDENS (flex accordion) rather than
tilting, so these read as a different kind of thing from the catalogue
cards above. Restyled to this page: the catalogue's radius, shadow and plum
scrim, Merriweather headings, magenta arrows. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.doors { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(2rem, 4vw, 4rem); }
.doors .catalog-head { max-width: none; }
.doors-in { display: flex; flex-direction: column; gap: 1rem; }
.door { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px; padding: clamp(1.4rem, 2.6vw, 2.6rem); border-radius: 16px; text-decoration: none; color: #fff; background: #14100e; box-shadow: 0 10px 24px rgba(18, 12, 10, .14), 0 2px 6px rgba(18, 12, 10, .08); }
.door-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
/* The scrim is contrast, not style: white type over pale photos. */
.door::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18, 12, 10, .95) 0%, rgba(18, 12, 10, .9) 56%, rgba(18, 12, 10, .66) 74%, rgba(18, 12, 10, .2) 90%, rgba(18, 12, 10, 0) 100%); }
.door-body { position: relative; z-index: 1; display: block; max-width: 34rem; }
.door small { display: block; font: 800 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-bottom: .85rem; }
.door h3 { font: 900 clamp(1.7rem, 2.6vw, 2.6rem)/1.1 var(--display); color: #fff; margin: 0 0 .7rem; }
.door-p { display: block; font-size: clamp(1rem, 1.05vw, 1.12rem); line-height: 1.55; color: rgba(255, 255, 255, .92); margin-bottom: 1.3rem; }
.door-go { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; color: #fff; }
.door-arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; transition: background-color .25s ease; }
.door-arrow svg, .ind-go svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.door:hover .door-bg, .door.is-open .door-bg { transform: scale(1.07); }
.door:hover .door-arrow, .door.is-open .door-arrow { background: var(--accent); }
.door:hover .door-arrow svg, .door.is-open .door-arrow svg { stroke: #fff; transform: translateX(2px); }
.door:focus-visible, .ind-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.inds { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(2.5rem, 5vw, 5rem); }
.ind-row { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Phones and tablets: two per row, the fifth alone across the last row. */
.ind-tile { flex: 1 1 calc(50% - .75rem); min-width: 0; min-height: 230px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 16px; text-decoration: none; color: #fff; background: #14100e; box-shadow: 0 10px 24px rgba(18, 12, 10, .14), 0 2px 6px rgba(18, 12, 10, .08); }
.ind-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
/* PIXEL stops (the shop build's lesson): tiles change width on hover, and a
percentage ladder would put different amounts of dark under the same text. */
.ind-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18, 12, 10, .95) 0, rgba(18, 12, 10, .9) 92px, rgba(18, 12, 10, .5) 150px, rgba(18, 12, 10, .1) 200px, rgba(18, 12, 10, 0) 236px); }
.ind-cap { position: relative; z-index: 1; display: block; padding: 1rem 1.1rem 1.1rem; }
.ind-name { display: block; font: 900 1.05rem/1.2 var(--display); color: #fff; }
.ind-more { display: grid; grid-template-rows: 1fr; }
.ind-line { display: block; min-height: 0; overflow: hidden; padding-top: .5rem; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.ind-go { display: block; margin-top: .6rem; font: 800 .74rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ind-go svg { stroke: #fff; width: 15px; height: 15px; display: inline-block; vertical-align: -3px; margin-left: .35rem; }
.ind-tile:hover img, .ind-tile.is-open img { transform: scale(1.06); }
@media (max-width: 599px) {
/* The line would run six lines deep at this width; the name and the
product it opens carry the tile. Same call as the catalogue cards. */
.ind-line { font-size: 0; padding-top: 0; }
.ind-go { font-size: .7rem; margin-top: .45rem; }
.ind-tile { min-height: 200px; }
}
@media (min-width: 900px) {
.doors-in { flex-direction: row; gap: 1.25rem; }
.door { flex: 1; min-width: 0; min-height: 460px; transition: flex .55s cubic-bezier(.3, .8, .3, 1); }
.door:hover, .door:focus-visible, .door.is-open { flex: 1.9; }
}
@media (min-width: 1024px) {
.ind-row { flex-wrap: nowrap; gap: 1rem; }
.ind-tile { flex: 1; min-height: clamp(380px, 30vw, 460px); transition: flex .55s cubic-bezier(.3, .8, .3, 1); }
.ind-tile:hover, .ind-tile:focus-visible, .ind-tile.is-open { flex: 2.2; }
.ind-name { font-size: 1.3rem; }
/* grid 0fr, not opacity: an invisible line would still reserve its height
and lift the five names off one baseline. */
.ind-more { grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.3, .8, .3, 1); }
.ind-line { padding-top: 0; opacity: 0; transition: opacity .3s ease-out .05s, padding-top .4s cubic-bezier(.3, .8, .3, 1); }
.ind-tile:hover .ind-more, .ind-tile:focus-visible .ind-more, .ind-tile.is-open .ind-more { grid-template-rows: 1fr; }
.ind-tile:hover .ind-line, .ind-tile:focus-visible .ind-line, .ind-tile.is-open .ind-line { opacity: 1; padding-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
.door, .ind-tile, .door-bg, .ind-tile img { transition: none !important; }
.door:hover, .door:focus-visible, .ind-tile:hover, .ind-tile:focus-visible { flex: 1; }
.door-bg, .ind-tile img, .door:hover .door-bg, .ind-tile:hover img { transform: none; }
.ind-more { grid-template-rows: 1fr; }
.ind-line { opacity: 1; }
}
/* ---------- nav: variable-font hover (2026-10-06) ----------
Fahad pasted a React "VariableFontHover" nav (wght 400 -> 700, stagger .03s
from the centre). Rebuilt here in CSS on Montserrat's variable axis (the
head requests wght 400..900 so Google serves the variable file). Each letter
is a span with --d = its distance from the centre; .vf-ghost is the word at
700, hidden in the same grid cell, so the link is always its bold width and
nothing beside it moves. The existing hover tint and underline stay. */
.vf { display: inline-grid; }
.vf > * { grid-area: 1 / 1; }
.vf-ghost { visibility: hidden; font-weight: 700; font-variation-settings: 'wght' 700; }
.vf-l { display: inline-flex; justify-content: center; }
.vf-l span { font-weight: 400; font-variation-settings: 'wght' 400; transition: font-variation-settings .35s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--d) * 30ms); }
.menu a:hover .vf-l span, .menu a:focus-visible .vf-l span, .menu a[aria-current="page"] .vf-l span,
.menu-dd:hover .vf-l span, .menu-dd:focus-visible .vf-l span, .menu-dd[aria-expanded="true"] .vf-l span, .menu-dd[data-current] .vf-l span, .menu .vf-on .vf-l span { font-variation-settings: 'wght' 700; }
@media (prefers-reduced-motion: reduce) { .vf-l span { transition: none; } }
/* ---------- second banner (2026-10-06) ----------
Fahad: "another banner similar to we commit, we deliver". Same component,
mirrored: the gradient runs pink to purple and the glow sits on the left,
so the two read as a pair rather than a repeat. Words are the client's own
hero line ("We design ยท We build brands") and their designer sentence. */
.slogan-alt { background: linear-gradient(100deg, #c52074 0%, #9f257d 55%, #6a2c87 100%); }
.slogan-alt::before { right: auto; left: -18vw; top: auto; bottom: -40vw; }
.slogan-alt h2 { font-size: clamp(2.2rem, 5vw, 4.8rem); }
/* ---------- "What we do": shelves (C) and bento (D), 2026-10-06 ----------
Fahad picked both off the layouts board and flips between them with a
localhost-only switch (js/site.js). Both reuse the .c3d tilting cards. */
.cat-view[hidden] { display: none; }
.shelf + .shelf { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.shelf-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .9rem; }
.shelf-h h3 { font: 900 clamp(1.3rem, 1.9vw, 1.75rem)/1.15 var(--display); color: var(--ink); margin: 0; }
.shelf-h h3 span { font: 800 .75rem/1 var(--sans); color: var(--accent); background: #fbeee0; border-radius: 999px; padding: .3rem .55rem; vertical-align: middle; margin-left: .25rem; }
.shelf-arrows { display: none; gap: .5rem; }
@media (hover: hover) and (pointer: fine) { .shelf-arrows { display: flex; } }
.shelf-arrows[data-fits] { visibility: hidden; }
.shelf-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #e2dce0; background: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease; }
.shelf-arrows button svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.shelf-arrows button[data-dir="1"] svg { transform: rotate(180deg); }
.shelf-arrows button:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.shelf-arrows button:hover:not(:disabled) svg { stroke: #fff; }
.shelf-arrows button:disabled { opacity: .35; cursor: default; }
/* The row bleeds to the screen edge on phones so a half card says "swipe".
Vertical padding keeps the cards' shadows from being cut by the scroller. */
.shelf-row { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: .4rem var(--gutter) 1.4rem; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; perspective: 1400px; }
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row .c3d { scroll-snap-align: start; }
@media (min-width: 600px) { .shelf-row { grid-auto-columns: 38%; } }
@media (min-width: 900px) { .shelf-row { grid-auto-columns: 280px; gap: 1.4rem; } }
.bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: .8rem; perspective: 1400px;
grid-template-areas: "bc bc" "bc bc" "fl br" "gc po" "ls rb" "ls rb" "sb sb" "st dh" "lh pc" "ds sp"; }
.bento .c3d, .bento .c3d a { height: 100%; }
.bento .c3d-in { aspect-ratio: auto; height: 100%; }
@media (min-width: 600px) { .bento { grid-auto-rows: 200px; gap: 1rem; } }
@media (min-width: 900px) {
.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(190px, 15.5vw, 250px); gap: 1.4rem;
grid-template-areas: "bc bc fl br" "bc bc gc po" "ls rb sb sb" "ls rb st dh" "lh pc ds sp"; }
.bento .a-bc .c3d-txt strong { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
.bento .a-bc .c3d-txt span { font-size: 1rem; }
}
/* the localhost-only layout switch */
.layout-switch { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 4px; padding: 5px; background: #111; color: #fff; border-radius: 999px; font: 700 12px/1 var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.layout-switch span { padding: 0 6px 0 10px; color: #bbb; }
.layout-switch button { font: inherit; border: 0; border-radius: 999px; padding: 9px 12px; background: transparent; color: #fff; cursor: pointer; }
.layout-switch button[aria-pressed="true"] { background: var(--accent); }
@media (max-width: 759px) { .layout-switch { bottom: calc(3.6rem + 10px); } }
/* "What we do" third layout: circles (round-2 board option B, 2026-10-06).
The photo carries the product; the ring on hover/focus is the focus cue. */
.circles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem .9rem; }
@media (min-width: 600px) { .circles { grid-template-columns: repeat(5, 1fr); gap: 1.8rem 1rem; } }
@media (min-width: 1000px) { .circles { grid-template-columns: repeat(7, 1fr); gap: 2.2rem 1.3rem; } }
.cir a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; text-decoration: none; color: var(--ink); outline: none; }
.cir-i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 3px transparent; transition: box-shadow .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.cir a:hover .cir-i, .cir a:focus-visible .cir-i { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); transform: translateY(-3px); }
.cir-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cir b { font: 800 .82rem/1.25 var(--sans); }
.cir a:hover b { color: var(--accent); }
@media (min-width: 600px) { .cir b { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .cir-i { transition: none; } .cir a:hover .cir-i { transform: none; } }
/* ---------- the two coloured bands (2026-10-06) ----------
Fahad: a coloured gap between the white heading sections; process in one,
a catchphrase in the other. Colours come from html[data-bands] (presets in
build.py BAND_PRESETS, flipped by the localhost switch). Each band reads
--b-bg / --b-fg / --b-muted / --b-accent / --b-card / --b-card-fg. */
.process { --b-bg: #fdf4ea; --b-fg: var(--ink); --b-muted: #4a3f47; --b-accent: var(--accent); --b-card: #fff; --b-card-fg: var(--ink); --b-line: rgba(160, 29, 32, .25); }
html[data-bands="black"] .process { --b-bg: #0d0b0a; --b-fg: #fff; --b-muted: rgba(255, 255, 255, .78); --b-accent: var(--amber); --b-card: rgba(255, 255, 255, .06); --b-card-fg: #fff; --b-line: rgba(255, 163, 71, .35); }
html[data-bands="grey"] .process { --b-bg: #e6e6e3; --b-card: #fff; }
.band { background: var(--b-bg); color: var(--b-fg); position: relative; overflow: hidden; }
.band-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin: 0; }
.band-call { font-weight: 700; color: var(--b-fg); text-decoration: none; display: inline-block; padding: .5em 0; border-bottom: 2px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 45%, transparent); }
.band-call:hover { border-bottom-color: currentColor; }
/* band 1: how it works, COMPACT (Fahad 2026-10-06: "make that smaller, just
logos with small copy"). Centred: heading, then four icon steps in a row
joined by a dashed line on desktop, two by two on phones. */
.process { padding: clamp(2.2rem, 4.5vw, 3.6rem) 0; text-align: center; }
.process h2 { font: 900 clamp(1.5rem, 2.2vw, 2.1rem)/1.1 var(--display); color: var(--b-fg); margin: 0 0 clamp(1.4rem, 2.6vw, 2.2rem); }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.step-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--b-card); display: grid; place-items: center; margin-bottom: .5rem; box-shadow: 0 8px 20px rgba(18, 12, 10, .07); position: relative; z-index: 1; }
.step-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--b-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font: 800 1rem/1.25 var(--sans); color: var(--b-fg); margin: 0; }
.step p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--b-muted); }
html[data-bands="black"] .step-ic { box-shadow: none; border: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 760px) {
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 32px; left: calc(50% + 44px); right: calc(-50% + 44px); border-top: 2px dashed var(--b-line); }
}
/* band 2: four colour tiles, we print / we design / we commit / we deliver
(concept 6a off the Claude Design canvas, Fahad 2026-10-06), restyled the
same night after a paint-palette pin: rounded ink blocks, no frame or label
strip, the name in italic serif (Cormorant Garamond, this band only), the
colour code in small spaced capitals under it. */
/* 2026-10-06, later: names CENTRED and bigger, the code top-left with its #,
and the band on its own background: lilac (Fahad's pick over charcoal and
sand), then WARM STONE #e9e1d6 in the brand-colour pass the same night, when
the tiles became red / amber / bronze / black and lilac was the last purple. Name size follows the tile's width (cqw) so "We
Deliver" fits on one line from a phone to a wide screen. */
/* Backgrounds: html[data-promise] = charcoal (default) / deepred / stone. On the
dark grounds a faint light edge keeps the black (and, on deep red, the red)
tile from melting into the band. */
.promise { --b-bg: radial-gradient(1100px 460px at 50% -10%, rgba(255, 163, 71, .16), transparent 70%), #15110f; --sw-eyebrow: #d9c7b4; --sw-edge: rgba(255, 255, 255, .14); padding: clamp(2.8rem, 5.5vw, 4.8rem) 0; }
.sw-head { margin-bottom: clamp(1.2rem, 2.2vw, 1.7rem); }
.sw-eyebrow { margin: 0; font: 800 .75rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sw-eyebrow); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.sw { position: relative; aspect-ratio: 1 / 1; container-type: inline-size; border-radius: 22px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px var(--sw-edge), 0 22px 40px -20px rgba(10, 4, 9, .6); }
.sw-hex { position: absolute; left: 1.05rem; top: 1rem; font: 600 .66rem/1 var(--sans); letter-spacing: .2em; opacity: .85; }
.sw-name { font: italic 500 1.9rem/1 "Cormorant Garamond", "Cormorant", Georgia, serif; font-size: 19cqw; white-space: nowrap; letter-spacing: -.005em; text-align: center; }
@media (min-width: 600px) { .swatches { gap: 1rem; } .sw { border-radius: 26px; } .sw-hex { left: 1.4rem; top: 1.3rem; font-size: .74rem; } }
@media (min-width: 1000px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .sw { border-radius: 30px; } .sw-hex { left: 1.7rem; top: 1.6rem; font-size: .8rem; } }
html[data-promise="deepred"] .promise { --b-bg: radial-gradient(1100px 460px at 50% -10%, rgba(255, 163, 71, .18), transparent 70%), linear-gradient(135deg, #8c161a 0%, #5c0d10 100%); --sw-eyebrow: #f4d2bf; --sw-edge: rgba(255, 255, 255, .2); }
html[data-promise="stone"] .promise { --b-bg: #e9e1d6; --sw-eyebrow: #5f5346; --sw-edge: rgba(255, 255, 255, 0); }
/* the localhost colour switch sits above the layout switch */
.layout-switch.bands-switch { bottom: 64px; }
@media (max-width: 759px) { .layout-switch.bands-switch { bottom: calc(3.6rem + 60px); } }
.layout-switch.promise-switch { bottom: 114px; }
@media (max-width: 759px) { .layout-switch.promise-switch { bottom: calc(3.6rem + 110px); } }
.layout-switch { max-width: calc(100vw - 28px); overflow-x: auto; scrollbar-width: none; }
.layout-switch::-webkit-scrollbar { display: none; }
.layout-switch button, .layout-switch span { flex: none; }
.layout-switch button { white-space: nowrap; }
/* =====================================================================
PRINT2GO PASS (Fahad 2026-10-06 night: "the page is far too cluttered",
reference print2go.com). Everything below the hero goes light: white and
soft-grey surfaces, centred plain headings, light product / industry /
event cards (photo, name under it, a small red arrow), a light top strip
and footer, more air. The hero is untouched (the client's banner).
This block overrides the earlier section styles; it sits last on purpose.
===================================================================== */
:root { --sec-w: 1240px; --line: #ecebea; --soft: #f5f4f2; --muted: #5a5458; }
.util { background: var(--soft); color: var(--muted); border-bottom: 1px solid var(--line); }
.util a { color: var(--ink); }
.process .wrap, .catalog .wrap, .welcome .wrap, .doors .wrap, .inds .wrap, .contact .wrap { max-width: var(--sec-w); }
.catalog, .welcome, .doors, .inds, .contact { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.doors, .inds { padding-top: 0; }
.catalog-head { max-width: 40rem; margin: 0 auto clamp(1.5rem, 3vw, 2.4rem); text-align: center; }
.catalog-head h2, .process h2, .contact h2, .welcome h2 { font: 700 clamp(1.6rem, 2.4vw, 2.2rem)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.catalog-head p { font-size: 1rem; line-height: 1.55; color: var(--muted); margin: .45rem 0 0; }
.contact h2 { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.welcome h2 { margin-bottom: 1rem; }
.welcome p { font-size: 1.02rem; color: #3d383a; }
.welcome-photo img { border-radius: 16px; }
/* how it works: a white feature row right under the hero */
.process { --b-bg: #fff; padding: clamp(2.6rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--line); }
.process .step-ic { background: #fff; border: 1.5px solid #e6e2e0; box-shadow: none; }
/* what we do: group tabs over one row of light product cards */
.ptabs { display: flex; justify-content: center; flex-wrap: wrap; gap: .2rem 2rem; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); }
.ptab { font: 600 .98rem/1.2 var(--sans); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .9rem .1rem; min-height: 44px; cursor: pointer; }
.ptab:hover { color: var(--ink); }
.ptab[aria-selected="true"] { color: var(--red); border-bottom-color: var(--red); }
/* CARD SIZE: 4 across (Fahad 2026-10-06: "cards are too small", picked B off
04 - Decision Boards/2026-10-06-what-we-do-card-size.html; was 140px in one
row). Rows centred so a short last row sits in the middle. Phones 2 across. */
.pcards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 1rem; }
.pcards[hidden] { display: none; }
.pcard { flex: 0 0 calc((100% - 1rem) / 2); }
@media (min-width: 600px) { .pcards { column-gap: 1.4rem; } .pcard { flex-basis: calc((100% - 2 * 1.4rem) / 3); } }
.pcard a { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; text-decoration: none; color: var(--ink); }
.pcard-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--soft); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.pcard a:hover .pcard-img img, .pcard a:focus-visible .pcard-img img { transform: scale(1.05); }
.pcard b { font: 600 .95rem/1.3 var(--sans); }
.pcard a:hover b { color: var(--red); }
.pcard-go, .dcard-go svg, .icard-go svg { flex: none; }
.pcard-go { width: 30px; height: 30px; border-radius: 50%; background: var(--red); display: grid; place-items: center; transition: background-color .2s ease; }
.pcard a:hover .pcard-go { background: var(--red-deep); }
.pcard-go svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
.pcards { gap: 2.4rem 1.6rem; }
.pcard { flex-basis: calc((100% - 3 * 1.6rem) / 4); }
.pcard a { gap: .9rem; }
.pcard b { font-size: 1.1rem; }
.pcard-img { border-radius: 18px; }
.pcard-go { width: 36px; height: 36px; }
}
.pall { text-align: center; margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; }
.pall a { font-weight: 700; color: var(--red); text-decoration: none; border-bottom: 2px solid rgba(160, 29, 32, .3); padding-bottom: 2px; }
.pall a:hover { border-bottom-color: var(--red); }
/* printing for events and businesses: two light cards */
.dcards { display: grid; gap: 1.2rem; }
@media (min-width: 760px) { .dcards { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.dcard { display: flex; flex-direction: column; background: var(--soft); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.dcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 12, 10, .1); }
.dcard-img { aspect-ratio: 16 / 9; overflow: hidden; }
.dcard-img img { width: 100%; height: 100%; object-fit: cover; }
.dcard-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.5rem 1.6rem; }
.dcard-body small { font: 700 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7a706b; }
.dcard h3 { font: 700 1.35rem/1.25 var(--sans); margin: 0; color: var(--ink); }
.dcard-p { color: #4a4446; line-height: 1.55; }
.dcard-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-weight: 700; color: var(--red); }
.dcard-go svg, .icard-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.dcard:hover .dcard-go svg, .icard:hover .icard-go svg { transform: translateX(3px); }
/* industries we serve: five light cards */
.icards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
.icards > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
@media (min-width: 900px) { .icards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; } .icards > :last-child:nth-child(odd) { grid-column: auto; width: auto; } }
.icard { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; text-decoration: none; color: var(--ink); }
.icard-img { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--soft); margin-bottom: .25rem; }
.icard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.icard:hover .icard-img img { transform: scale(1.05); }
.icard b { font: 700 1rem/1.3 var(--sans); }
.icard-go { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 600; color: var(--red); }
/* light footer */
.foot { background: var(--soft); color: var(--muted); border-top: 1px solid var(--line); }
.foot .brand-word, .foot-h, .foot a { color: var(--ink); }
.foot-base { color: #7a706b; }
@media (prefers-reduced-motion: reduce) { .pcard-img img, .icard-img img, .dcard, .dcard-go svg, .icard-go svg { transition: none; } .dcard:hover { transform: none; } }
@media (max-width: 599px) { .ptabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 1.4rem; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; } .ptabs::-webkit-scrollbar { display: none; } .ptab { flex: none; } }
/* SLIM FOOTER (Fahad 2026-10-06: "fix the fat footer"; it was 529px tall at
1024 wide). The 14-name product list is gone (one-page site: What we do
already shows them, and they are not links). Logo + the client's own line
left, contact right from 900px; phones keep 44px tap targets via .foot a. */
.foot { padding: clamp(2rem, 3vw, 2.75rem) 0 1.25rem; }
.foot-in { gap: 1.25rem; }
.foot-line { margin: .9rem 0 0; max-width: 38rem; font-size: .92rem; line-height: 1.55; }
.foot-contact p { margin: 0; font-size: .95rem; line-height: 1.5; }
.foot-base { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (max-width: 899px) { .foot-contact a { padding: .75em 0; } } /* >= 44px tap targets */
.foot a.brand { display: inline-flex; padding: 0; } /* the lockup as in the header (mark beside the name); the tap-target padding is for text links */
@media (min-width: 900px) {
.foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
.foot-brand { display: flex; align-items: center; gap: 2.5rem; }
.foot-brand .brand { flex: none; }
.foot-line { margin: 0; max-width: 34rem; }
.foot-contact { text-align: right; }
.foot-contact a { padding: .15em 0; }
}
/* TYPES WINDOW (Fahad 2026-10-06: a service tile opens an enlarged window of
its types, text only). Native