/* Hallmark · shape: Maker's house · genre: editorial · posture: calm B2B craft */
/* Self-hosted production font files */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-regular-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-mono-medium-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/newsreader-latin.woff2") format("woff2"); }

/* Metaledge brand system · quiet confidence / Moradabad craft / B2B custom development */
:root {
  --paper-rule: rgba(244,241,234,.22);
  --paper-copy: #c5ccca;
  --paper-muted: #bdc6c4;
  --paper-link: #dfe4e2;
  --paper-faint: #aeb8b6;
  --dark-overlay: rgba(32,42,45,.7);
  --dialog-shadow: 0 25px 80px rgba(32,42,45,.24);
  --paper: #f4f1ea;
  --paper-warm: #ebe5da;
  --paper-deep: #ddd4c5;
  --ink: #202a2d;
  --ink-soft: #526064;
  --ink-faint: #7a8585;
  --line: #c9c9c0;
  --line-strong: #949f9e;
  --copper: #a95f43;
  --copper-dark: #7f4533;
  --copper-soft: #e8cfc3;
  --sage: #d9e0d7;
  --blue-soft: #d8e1e6;
  --panel: #fbf9f5;
  --display: "Hanken Grotesk", Arial, sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
  --icon: Arial, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-smooth: cubic-bezier(.65,0,.35,1);
  --shadow: 0 20px 60px rgba(32,42,45,.08);
  --max: 1760px;
  --gutter: clamp(20px, 4vw, 72px);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.menu-open, body.modal-open { overflow: clip; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
h1 { font-size: clamp(3.3rem, 6.8vw, 6.2rem); }
h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
h3 { font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.08; }
p { text-wrap: pretty; }
::selection { color: var(--paper); background: var(--copper); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.wrap { width: min(var(--max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.kicker, .meta, .button, .nav-link, .product-tag, .product-code, .label, .admin-link { font-family: var(--display); font-size: .76rem; font-weight: 600; letter-spacing: 0; }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--copper-dark); text-transform: none; }
.kicker::before { width: 28px; height: 1px; content: ""; background: currentColor; }
.meta, .product-code, .label { color: var(--ink-faint); font-family: var(--mono); font-size: .68rem; letter-spacing: 0; text-transform: none; }
.muted { color: var(--ink-soft); }
.small-copy { max-width: 42ch; font-size: 1.08rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 48px; padding: 0 17px; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink); background: transparent; transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease), border-color 180ms var(--ease); }
.button span { color: var(--copper); font-size: 1.05rem; }
.button:hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }
.button:hover span { color: var(--paper); }
.button-primary { border-color: var(--copper); color: var(--paper); background: var(--copper); }
.button-primary:hover { border-color: var(--copper-dark); background: var(--copper-dark); }
.button-light { border-color: var(--paper); color: var(--paper); }.button-light:hover { color: var(--ink); background: var(--paper); }
.text-link { display: inline-flex; align-items: center; gap: 14px; width: fit-content; padding-bottom: 5px; border-bottom: 1px solid var(--copper); color: var(--ink); font-family: var(--display); font-size: .8rem; font-weight: 600; transition: gap 180ms var(--ease), color 180ms ease; }.text-link::after { content: "→"; color: var(--copper); transition: transform 180ms var(--ease); }.text-link:hover { gap: 21px; color: var(--copper-dark); }.text-link:hover::after { transform: translateX(4px); }
.section { padding-block: clamp(72px, 8vw, 118px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); align-items: end; gap: 40px; margin-bottom: 48px; }.section-head h2 { max-width: 12ch; margin-top: 18px; }.section-head > p { color: var(--ink-soft); }

.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(16px); }.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 28px; }.brand { display: inline-flex; align-items: center; gap: 12px; }.brand-seal { display: block; flex-shrink: 0; width: 43px; height: 43px; border: 0; border-radius: 0; background: url("logo.svg") center / contain no-repeat; font-size: 0; }.brand-name { font-family: var(--display); font-size: .9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }.brand-name small { display: block; margin-top: 3px; color: var(--ink-soft); font-family: var(--body); font-size: .75rem; font-weight: 400; letter-spacing: 0; }.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); margin-left: auto; }.nav-link { color: var(--ink-soft); transition: color 160ms ease; }.nav-link:hover, .nav-link.is-active { color: var(--copper-dark); }.header-cta { min-height: 40px; padding-inline: 13px; border: 1px solid var(--ink); border-radius: 3px; font-size: .75rem; }.header-cta:hover { color: var(--paper); background: var(--ink); }.menu-button { display: none; width: 44px; height: 44px; border: 0; background: transparent; }.menu-button span { display: block; width: 24px; height: 1px; margin: 6px auto; background: var(--ink); transition: transform 180ms var(--ease); }.menu-button.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-button.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-nav { position: fixed; z-index: 19; inset: 78px 0 0; display: none; padding-block: 34px; overflow-y: auto; background: var(--paper); }.mobile-nav.is-open { display: block; }.mobile-nav a { display: block; padding-block: 18px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 2.5rem; letter-spacing: -.06em; }.mobile-nav a span { display: inline-block; width: 36px; color: var(--copper); font-family: var(--mono); font-size: .72rem; letter-spacing: 0; vertical-align: middle; }.mobile-nav-note { margin-top: 40px; color: var(--ink-soft); font-size: 1.1rem; }

.page-progress { position: fixed; z-index: 25; top: 0; left: 0; width: 0; height: 3px; background: var(--copper); pointer-events: none; }
.announcement-bar { min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 5px var(--gutter); color: var(--ink-soft); background: var(--paper-warm); font-family: var(--display); font-size: .68rem; text-align: center; }
.hero { position: relative; min-height: calc(100dvh - 180px); display: grid; align-items: center; overflow: clip; background: var(--paper); }.hero::before { position: absolute; right: 0; bottom: 0; width: 42%; height: 80%; content: ""; background: var(--blue-soft); clip-path: polygon(22% 0, 100% 12%, 100% 100%, 0 100%); }.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(44px, 7vw, 104px); min-height: calc(100dvh - 250px); }.hero-copy { padding-block: 60px; }.hero h1 { max-width: 15ch; font-size: clamp(3.4rem, 5.6vw, 5.4rem); margin-block: 24px 25px; }.hero h1 em { color: var(--copper-dark); font-style: normal; }.hero-intro { max-width: 31ch; color: var(--ink-soft); font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.4; }.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 36px; }.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 62px; color: var(--ink-faint); font-family: var(--mono); font-size: .66rem; text-transform: none; }.hero-note::before { width: 48px; height: 1px; content: ""; background: var(--ink); }.hero-art { position: relative; min-width: 0; height: min(640px, 70dvh); }.hero-art-main { position: absolute; inset: 5% 8% 5% 0; overflow: clip; border-radius: 2px; background: var(--paper-deep); }.hero-art-main img { filter: saturate(.68) contrast(1.03); transform: scale(1.03); transition: filter 500ms ease, transform 900ms var(--ease); }.hero-art:hover .hero-art-main img { filter: saturate(.9); transform: scale(1); }.hero-art-side { position: absolute; right: 0; bottom: 7%; width: 33%; height: 43%; overflow: clip; border: 12px solid var(--paper); background: var(--paper-warm); box-shadow: var(--shadow); }.hero-art-side img { filter: saturate(.6); }.hero-art-caption { display: none !important; position: absolute; right: 3%; top: 4%; gap: 5px; color: var(--ink); font-size: .82rem; text-align: right; }.hero-art-caption strong { font-family: var(--display); font-size: 1.2rem; }.hero-art-caption span { color: var(--ink-soft); }.hero-stamp { position: absolute; left: -18px; bottom: 11%; display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid var(--copper); border-radius: 50%; color: var(--copper-dark); font-family: var(--mono); font-size: .62rem; line-height: 1.25; text-align: center; transform: rotate(-12deg); }.hero-index { display: none; position: absolute; right: 8%; bottom: -4%; color: var(--ink-soft); font-family: var(--mono); font-size: .65rem; }

.promise { background: var(--ink); color: var(--paper); }.promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }.promise-item { min-height: 210px; padding: 26px 28px 20px 0; border-right: 1px solid var(--paper-rule); }.promise-item + .promise-item { padding-left: 28px; }.promise-item:last-child { border-right: 0; }.promise-item small { display: block; margin-bottom: 28px; color: var(--copper-soft); font-family: var(--mono); font-size: .68rem; }.promise-item h3 { max-width: 9ch; color: var(--paper); font-size: 2rem; }.promise-item p { max-width: 25ch; margin-top: 18px; color: var(--paper-copy); font-size: .98rem; }

.family-section { background: var(--paper-warm); }.family-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: clamp(42px, 7vw, 100px); }.family-intro h2 { margin-top: 18px; }.family-intro p:not(.kicker) { max-width: 31ch; margin-top: 22px; color: var(--ink-soft); }.family-list { border-top: 1px solid var(--line-strong); }.family-item { display: grid; grid-template-columns: 1fr 1.3fr 30px; align-items: center; gap: 24px; min-height: 94px; border-bottom: 1px solid var(--line); transition: padding 180ms var(--ease), background 180ms ease; }.family-item:hover { padding-inline: 14px; background: var(--paper); }.family-item h3 { font-size: 1.55rem; }.family-item p { color: var(--ink-soft); font-size: .98rem; }.family-item span { color: var(--copper); font-size: 1.4rem; }

.featured-section { background: var(--paper); }.featured-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; }.featured-large, .featured-small { position: relative; overflow: clip; }.featured-large { min-height: 580px; background: var(--paper-deep); }.featured-small { min-height: 280px; background: var(--paper-warm); }.featured-stack { display: grid; gap: 28px; }.featured-large img, .featured-small img { filter: saturate(.65); transition: filter 500ms ease, transform 900ms var(--ease); }.featured-large:hover img, .featured-small:hover img { filter: saturate(.9); transform: scale(1.025); }.featured-label { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; justify-content: space-between; gap: 15px; padding-top: 12px; border-top: 1px solid var(--paper); color: var(--paper); font-family: var(--display); font-size: .85rem; }.featured-label strong { font-size: 1.4rem; }.featured-label span { color: var(--paper-warm); }

.custom-band { color: var(--paper); background: var(--copper-dark); }.custom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .65fr); align-items: end; gap: 60px; }.custom-band h2 { overflow-wrap: break-word; max-width: 9ch; color: var(--paper); margin-top: 20px; }.custom-band p { max-width: 39ch; margin-top: 24px; color: var(--copper-soft); font-size: 1.12rem; }.custom-actions { display: flex; align-items: end; justify-content: end; gap: 14px; }

.process-section { background: var(--blue-soft); }.flow-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(50px, 10vw, 150px); }.flow-copy h2 { max-width: 10ch; margin-top: 18px; }.flow-copy > p:not(.kicker) { max-width: 33ch; margin-top: 22px; color: var(--ink-soft); }.flow-steps { position: relative; margin: 0; padding: 0 0 0 35px; list-style: none; }.flow-steps::before, .flow-steps::after { position: absolute; top: 10px; bottom: 10px; left: 9px; width: 1px; content: ""; background: var(--line-strong); }.flow-steps::after { bottom: 10px; height: auto; background: var(--copper); transform: scaleY(var(--flow-progress, 0)); transform-origin: top; transition: transform 120ms linear; }.flow-step { position: relative; min-height: 150px; padding: 0 0 38px; }.flow-step::before { position: absolute; top: 3px; left: -31px; width: 11px; height: 11px; content: ""; border: 2px solid var(--ink-soft); border-radius: 50%; background: var(--blue-soft); transition: background 180ms ease, border-color 180ms ease, transform 180ms var(--ease); }.flow-step.is-current::before { border-color: var(--copper); background: var(--copper); transform: scale(1.18); }.flow-step a { display: inline-block; margin-bottom: 10px; color: var(--copper-dark); font-family: var(--mono); font-size: .68rem; }.flow-step h3 { font-size: 1.7rem; }.flow-step p { max-width: 36ch; margin-top: 10px; color: var(--ink-soft); }.flow-step.is-current h3 { color: var(--copper-dark); }

.trust-section { background: var(--paper); }.trust-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 100px; align-items: start; }.trust-copy h2 { max-width: 11ch; margin-top: 18px; }.trust-copy > p:not(.kicker) { max-width: 38ch; margin-top: 22px; color: var(--ink-soft); }.trust-table { border-top: 1px solid var(--line-strong); }.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }.trust-row dt { color: var(--ink-soft); }.trust-row dd { margin: 0; font-family: var(--display); font-weight: 600; }

.site-footer { color: var(--paper); background: var(--ink); }.footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 60px; padding-block: 70px; }.site-footer .brand-seal { border: 0; }.site-footer .brand-name { color: var(--paper); }.site-footer .brand-name small { color: var(--paper-muted); }.footer-intro { color: var(--paper-copy); font-size: 1.05rem; }.footer-links { display: grid; align-content: start; gap: 11px; }.footer-links a { color: var(--paper-link); font-family: var(--display); font-size: .78rem; }.footer-links a:hover { color: var(--copper-soft); }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 16px 22px; border-top: 1px solid var(--paper-rule); color: var(--paper-faint); font-family: var(--mono); font-size: .62rem; }

.page-hero { padding-block: 88px 72px; background: var(--paper-warm); }.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .6fr); gap: 70px; align-items: end; }.page-hero h1 { max-width: 12ch; margin-top: 20px; }.page-hero p:not(.kicker) { max-width: 34ch; color: var(--ink-soft); font-size: 1.2rem; }.page-hero-note { justify-self: end; max-width: 230px; padding-top: 16px; border-top: 1px solid var(--ink); color: var(--ink-soft); font-size: .95rem; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 38px; }.filter-tabs { display: flex; flex-wrap: wrap; gap: 7px; }.filter-tab { min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-soft); background: transparent; font-family: var(--display); font-size: .77rem; }.filter-tab.is-active, .filter-tab:hover { border-color: var(--copper); color: var(--paper); background: var(--copper); }.catalog-count { color: var(--ink-soft); font-family: var(--mono); font-size: .68rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }.catalog-card { min-width: 0; }.catalog-image { position: relative; aspect-ratio: 4 / 4.8; overflow: clip; background: var(--paper-deep); }.catalog-image img { filter: saturate(.65); transition: filter 400ms ease, transform 750ms var(--ease); }.catalog-card:hover .catalog-image img { filter: saturate(.9); transform: scale(1.025); }.catalog-image-badge { position: absolute; top: 12px; left: 12px; padding: 5px 7px; color: var(--paper); background: var(--ink); font-family: var(--mono); font-size: .62rem; }.catalog-body { display: flex; justify-content: space-between; gap: 15px; padding-top: 13px; border-top: 1px solid var(--ink); }.catalog-body h3 { font-size: 1.45rem; }.catalog-body p { margin-top: 5px; color: var(--ink-soft); font-size: .92rem; }.catalog-body .product-code { padding-top: 4px; white-space: nowrap; }.catalog-cta { margin-top: 64px; padding: 36px; border: 1px solid var(--line-strong); background: var(--paper-warm); }.catalog-cta h2 { max-width: 10ch; font-size: 2.8rem; }.catalog-cta p { max-width: 43ch; margin-top: 12px; color: var(--ink-soft); }.catalog-cta .button { margin-top: 23px; }

.about-layout, .contact-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 90px; align-items: start; }.story-copy h2, .contact-copy h2 { max-width: 10ch; margin-top: 18px; }.story-copy > p:not(.kicker), .contact-copy > p:not(.kicker) { max-width: 44ch; margin-top: 22px; color: var(--ink-soft); font-size: 1.08rem; }.story-figure { min-height: 540px; overflow: clip; background: var(--paper-deep); }.story-figure img { filter: saturate(.62); }.fact-list { display: grid; margin-top: 43px; border-top: 1px solid var(--line-strong); }.fact-row { display: flex; justify-content: space-between; gap: 20px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }.fact-row dd { min-width: 0; overflow-wrap: break-word; }.fact-row strong { font-family: var(--display); }.contact-form, .brief-panel { padding: 30px; border: 1px solid var(--line-strong); background: var(--panel); }.contact-form { display: grid; gap: 18px; }.contact-form .admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.contact-form .admin-form-grid .full { grid-column: 1 / -1; }.field { display: grid; gap: 7px; }.field label { color: var(--ink-soft); font-family: var(--display); font-size: .78rem; font-weight: 600; }.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 2px; outline: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 1rem; }.field textarea { min-height: 125px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--copper); outline-offset: 2px; }.form-note { overflow-wrap: break-word; color: var(--ink-faint); font-family: var(--mono); font-size: .65rem; }.form-success { display: none; padding: 12px 0 0; color: var(--copper-dark); font-family: var(--display); font-weight: 600; }.form-success.is-visible { display: block; }

.modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 20px; visibility: hidden; }.modal.is-open { visibility: visible; }.modal-backdrop { position: absolute; inset: 0; background: var(--dark-overlay); opacity: 0; transition: opacity 240ms ease; }.modal.is-open .modal-backdrop { opacity: 1; }.modal-panel { position: relative; z-index: 1; width: min(620px, 100%); max-height: 90dvh; overflow: auto; padding: 34px; border-top: 3px solid var(--copper); background: var(--paper); opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }.modal.is-open .modal-panel { opacity: 1; transform: none; }.modal-close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border: 0; color: var(--ink); background: transparent; font-size: 1.5rem; }.modal-panel h2 { max-width: 10ch; margin-top: 15px; }.modal-panel > p { max-width: 43ch; margin-top: 12px; color: var(--ink-soft); }.modal-form { display: grid; gap: 15px; margin-top: 25px; }

.toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: 330px; padding: 14px 16px; border-left: 3px solid var(--copper); color: var(--ink); background: var(--panel); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 200ms ease, transform 200ms var(--ease); }.toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) { .site-nav, .header-cta { display: none; }.menu-button { display: block; }.hero-grid, .page-hero-grid, .family-grid, .flow-layout, .trust-grid, .about-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 50px; }.hero { min-height: auto; padding-block: 60px 100px; }.hero-grid { min-height: auto; }.hero-art { height: min(560px, 72vw); }.promise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.family-intro h2, .flow-copy h2, .trust-copy h2 { max-width: 13ch; }.custom-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }.custom-actions { justify-content: start; }.featured-grid { grid-template-columns: minmax(0, 1fr); }.featured-large { min-height: 500px; }.footer-top { grid-template-columns: 1fr 1fr; }.footer-top .brand { grid-column: 1 / -1; }.page-hero-note { justify-self: start; }.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.story-figure { min-height: 440px; }.about-layout, .contact-layout { gap: 60px; } }
@media (max-width: 560px) { body { font-size: 16px; }.wrap { width: min(var(--max), calc(100% - 32px)); }.header-inner { min-height: 70px; }.mobile-nav { inset-block-start: 70px; }.announcement-bar { min-height: 44px; }.hero h1 { max-width: 11ch; font-size: clamp(3.25rem, 14vw, 5rem); }.hero-art { height: 420px; }.hero-art-main { inset: 5% 0 8% 0; }.hero-art-side { right: 4%; bottom: 0; width: 35%; height: 36%; border-width: 7px; }.hero-stamp { left: 3px; bottom: 13%; width: 70px; height: 70px; font-size: .54rem; }.promise-grid { grid-template-columns: minmax(0, 1fr); }.promise-item, .promise-item + .promise-item { min-height: auto; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--paper-rule); }.promise-item:last-child { border-bottom: 0; }.family-item { grid-template-columns: 1fr 24px; gap: 12px; padding-block: 18px; }.family-item p { grid-column: 1 / -1; }.featured-large { min-height: 390px; }.featured-small { min-height: 230px; }.custom-actions { align-items: stretch; flex-direction: column; }.flow-steps { padding-left: 27px; }.flow-step::before { left: -23px; }.catalog-toolbar { display: grid; align-items: start; }.catalog-grid { grid-template-columns: minmax(0, 1fr); }.catalog-cta { padding: 24px; }.footer-top { grid-template-columns: minmax(0, 1fr); gap: 34px; }.footer-top .brand { grid-column: auto; }.footer-bottom { display: grid; gap: 8px; }.modal-panel { padding: 25px 20px; }.contact-form, .brief-panel { padding: 22px; }.contact-form .admin-form-grid { grid-template-columns: minmax(0,1fr); }.contact-form .admin-form-grid .full { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }.modal-backdrop, .modal-panel { transition: none; } }


/* Release components */
.header-cta { white-space: nowrap; }
.legal-layout { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: clamp(44px, 8vw, 120px); align-items: start; }
.legal-layout aside { position: sticky; top: 110px; display: grid; gap: 18px; }
.legal-layout aside .muted { max-width: 27ch; font-size: .98rem; }
.legal-copy { max-width: 72ch; }
.legal-copy section + section { margin-top: 46px; }
.legal-copy h2 { max-width: none; margin-bottom: 12px; font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.025em; }
.legal-copy p { color: var(--ink-soft); }
.legal-copy a { color: var(--copper-dark); text-decoration: underline; text-underline-offset: 3px; }
.enquiry-dialog { width: min(620px, calc(100% - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 0; border-top: 3px solid var(--copper); color: var(--ink); background: var(--paper); box-shadow: var(--dialog-shadow); }
.enquiry-dialog::backdrop { background: var(--dark-overlay); backdrop-filter: blur(4px); }
.enquiry-dialog[open] { animation: dialog-in 220ms var(--ease) both; }
.enquiry-dialog-inner { padding: clamp(22px, 5vw, 36px); }
.enquiry-dialog h2 { max-width: 13ch; margin-top: 12px; font-size: clamp(2.3rem, 5vw, 4rem); }
.enquiry-dialog-intro { max-width: 48ch; margin-top: 12px; color: var(--ink-soft); }
.enquiry-dialog-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; color: var(--ink); background: transparent; font-size: 1.5rem; }
.enquiry-form { display: grid; gap: 15px; margin-top: 25px; }
.enquiry-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.enquiry-form .field.full { grid-column: 1 / -1; }
.enquiry-form .field input, .enquiry-form .field select, .enquiry-form .field textarea { font-size: 1rem; }
.enquiry-form textarea { min-height: 112px; }
.dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-note { color: var(--ink-faint); font-family: var(--mono); font-size: .64rem; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .brand-seal { width: 38px; height: 38px; }.legal-layout { grid-template-columns: 1fr; gap: 30px; }.legal-layout aside { position: static; }.legal-copy section + section { margin-top: 34px; }.enquiry-form-grid { grid-template-columns: 1fr; }.enquiry-form .field.full { grid-column: auto; }.dialog-footer { align-items: stretch; flex-direction: column; }.dialog-footer .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .enquiry-dialog[open] { animation: none; } }

/* Astro surface additions */
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 12px; color: var(--paper); background: var(--ink); transform: translateY(-160%); transition: transform 160ms ease; }
.skip-link:focus { transform: none; }
.contact-rail a { grid-template-columns: 1fr; min-width: 52px; min-height: 52px; place-items: center; padding: 11px; }
.contact-rail a svg { width: 20px; height: 20px; }
.contact-rail a:hover { padding-right: 13px; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.capability-grid { gap: 22px; }
.capability-panel { min-height: 330px; padding: clamp(28px, 5vw, 58px); border: 1px solid var(--line); background: var(--paper-warm); }
.capability-panel h2 { max-width: 10ch; margin-top: 18px; font-size: clamp(2rem, 4vw, 3.8rem); }
.capability-panel p:not(.kicker) { max-width: 42ch; margin-top: 20px; color: var(--ink-soft); font-size: 1.08rem; }
.capability-panel.dark { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.capability-panel.dark h2 { color: var(--paper); }
.capability-panel.dark p:not(.kicker) { color: var(--paper-copy); }
.capability-panel.dark .kicker { color: var(--copper-soft); }
.fact-row a { color: var(--copper-dark); text-decoration: underline; text-decoration-color: var(--copper-soft); text-underline-offset: 3px; }
.story-figure { position: relative; }
.story-figure figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 10px 12px; color: var(--paper); background: rgba(32,42,45,.78); font-family: var(--mono); font-size: .62rem; }
.product-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(40px, 8vw, 120px); align-items: start; }
.product-detail-image { min-height: 640px; overflow: hidden; background: var(--paper-deep); }
.product-detail-image img { filter: saturate(.78); }
.product-detail-copy { padding-top: 14px; }
.product-detail-copy h2 { max-width: 11ch; margin-top: 16px; font-family: var(--body); font-size: clamp(2.6rem, 5vw, 5rem); font-weight: 500; letter-spacing: -.035em; }
.product-detail-meta { margin-top: 14px; color: var(--copper-dark); font-family: var(--display); font-size: .88rem; font-weight: 600; }
.product-detail-description { max-width: 42ch; margin-top: 24px; color: var(--ink-soft); font-size: 1.1rem; }
.product-detail-copy .fact-list { margin-top: 34px; }
.product-detail-copy .button { margin-top: 28px; }
.product-detail-copy .text-link { margin-top: 20px; }
@media (max-width: 900px) { .product-detail { grid-template-columns: minmax(0, 1fr); gap: 42px; }.product-detail-image { min-height: min(640px, 84vw); } }


/* Expanded trade layout */
.contact-rail { position: fixed; z-index: 15; right: 0; top: 50%; display: grid; transform: translateY(-50%); }
.contact-rail a { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 12px; min-width: 116px; padding: 11px 13px; border: 1px solid var(--line); border-right: 0; color: var(--ink-soft); background: color-mix(in srgb, var(--paper) 92%, transparent); font-family: var(--display); font-size: .68rem; font-weight: 600; transition: color 160ms ease, background 160ms ease, padding 160ms var(--ease); }
.contact-rail a + a { border-top: 0; }
.contact-rail a:hover { padding-right: 18px; color: var(--paper); background: var(--ink); }
.contact-rail b { color: var(--copper); font-size: .9rem; font-weight: 500; text-align: center; }
.contact-rail a:hover b { color: var(--paper); }
.catalog-directory-section { padding-top: clamp(46px, 6vw, 80px); padding-bottom: 0; }
.catalog-directory-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); align-items: end; gap: 44px; margin-bottom: 34px; }
.catalog-directory-intro h2 { max-width: 11ch; margin-top: 16px; }
.catalog-directory-intro p { max-width: 46ch; color: var(--ink-soft); }.catalog-directory-brief { display: grid; justify-items: start; gap: 18px; }
.catalog-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.catalog-directory-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--line); background: var(--panel); transition: border-color 160ms ease, background 160ms ease, transform 180ms var(--ease); }
.catalog-directory-item:hover { border-color: var(--copper); background: var(--paper-warm); transform: translateY(-2px); }
.catalog-directory-item img { width: 72px; height: 72px; object-fit: cover; }
.catalog-directory-item strong { display: block; color: var(--ink); font-family: var(--display); font-size: .9rem; line-height: 1.1; }
.catalog-directory-item span { display: block; margin-top: 6px; color: var(--ink-faint); font-family: var(--mono); font-size: .62rem; }
.catalog-products-section { padding-top: clamp(56px, 7vw, 96px); }
.catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; align-items: end; gap: 22px; }
.catalog-search { display: grid; gap: 7px; color: var(--ink-soft); font-family: var(--display); font-size: .74rem; font-weight: 600; }
.catalog-search input { min-height: 40px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink); background: var(--panel); font-family: var(--body); font-size: .95rem; }
.catalog-search input:focus { outline: 2px solid var(--copper); outline-offset: 2px; }
.catalog-empty { grid-column: 1 / -1; padding: 48px 0; border-top: 1px solid var(--line); color: var(--ink-soft); }
.catalog-card-action { display: inline-block; margin-top: 12px; color: var(--copper-dark); font-family: var(--display); font-size: .74rem; font-weight: 600; }
.catalog-card-action::after { content: " →"; color: var(--copper); }
@media (max-width: 1180px) { .contact-rail { display: none; }.catalog-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .catalog-directory-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; }.catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); }.catalog-toolbar .catalog-count { grid-column: 1 / -1; }.catalog-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-directory { grid-template-columns: minmax(0, 1fr); }.catalog-directory-item { grid-template-columns: 84px minmax(0, 1fr); }.catalog-directory-item img { width: 84px; height: 84px; }.catalog-toolbar { grid-template-columns: minmax(0, 1fr); }.catalog-toolbar .catalog-count { grid-column: auto; } }


.button span, .text-link::after, .family-item > span, .catalog-card-action::after, .contact-rail b { font-family: var(--icon); }

.button span, .contact-rail b, .admin-button span { position: relative; display: inline-block; width: 12px; height: 12px; font-size: 0; }
.button span::before, .contact-rail b::before, .admin-button span::before { position: absolute; top: 1px; right: 0; width: 6px; height: 6px; content: ""; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.button span::after, .contact-rail b::after, .admin-button span::after { position: absolute; top: 6px; left: 1px; width: 10px; height: 1.5px; content: ""; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }

.link-arrow { position: relative; display: inline-block; width: 12px; height: 12px; font-size: 0; vertical-align: -1px; }
.link-arrow::before { position: absolute; top: 1px; right: 0; width: 6px; height: 6px; content: ""; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.link-arrow::after { position: absolute; top: 6px; left: 1px; width: 10px; height: 1.5px; content: ""; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }

/* Premium catalogue polish: larger navigation, warmer supporting tones, and
   controlled image scale so product labels remain calm and readable. */
:root {
  --blue-soft: #e3e1d6;
  --olive-soft: #e6e6dc;
  --brass: #ad8450;
  --brass-soft: #eadfca;
}

.header-inner { min-height: 88px; }
.site-nav { gap: clamp(24px, 3vw, 46px); }
.nav-link { font-size: .82rem; letter-spacing: .015em; }
.header-cta { min-height: 44px; padding-inline: 16px; font-size: .78rem; }

.featured-section { background: linear-gradient(180deg, var(--paper) 0%, #f0ece3 100%); }
.featured-grid { gap: 22px; }
.featured-large, .featured-small { isolation: isolate; overflow: hidden; }
.featured-large { min-height: 520px; }
.featured-small { min-height: 252px; }
.featured-large img, .featured-small img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; }
.featured-large:hover img, .featured-small:hover img { transform: scale(1.012); }
.featured-label { z-index: 2; right: 16px; bottom: 16px; left: 16px; align-items: end; padding: 15px 16px 13px; border: 1px solid rgba(244,241,234,.58); background: rgba(32,42,45,.84); backdrop-filter: blur(5px); }
.featured-label strong { max-width: 15ch; color: var(--paper); font-family: var(--body); font-size: clamp(1.22rem, 1.7vw, 1.7rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.05; }
.featured-label > span { flex-shrink: 0; color: var(--paper-warm); font-size: .72rem; }
.featured-label .link-arrow { margin-left: 5px; }

.catalog-grid { gap: 30px 22px; }
.catalog-image { aspect-ratio: 1 / 1.08; max-height: 430px; overflow: hidden; }
.catalog-image img { transition: filter 400ms ease, transform 550ms var(--ease); }
.catalog-card:hover .catalog-image img { transform: scale(1.012); }
.catalog-body { padding-top: 17px; }
.catalog-body h3 { color: var(--ink); font-family: var(--body); font-size: clamp(1.28rem, 1.55vw, 1.7rem); font-weight: 500; letter-spacing: -.018em; line-height: 1.08; }
.catalog-body p { margin-top: 7px; font-size: .88rem; }
.catalog-card-action { margin-top: 14px; font-size: .72rem; letter-spacing: .01em; }
.catalog-card:hover .catalog-body h3 { color: var(--copper-dark); }

.family-item h3 { letter-spacing: -.025em; }
.family-item { grid-template-columns: minmax(0, 1fr) 76px 30px; gap: 22px; min-height: 116px; }
.family-copy { display: block; min-width: 0; color: inherit !important; font-size: inherit !important; }
.family-copy p { margin-top: 7px; }
.family-media { display: block; width: 76px; height: 76px; overflow: hidden; color: inherit !important; font-size: inherit !important; background: var(--paper-deep); }
.family-media img { filter: saturate(.7); transition: filter 400ms ease, transform 600ms var(--ease); }
.family-item:hover .family-media img { filter: saturate(.95); transform: scale(1.02); }
.family-arrow { color: var(--brass) !important; font-size: 1.35rem; }
.kicker { color: var(--brass); }
.text-link::after, .catalog-card-action::after { color: var(--brass); }

@media (max-width: 900px) {
  .header-inner { min-height: 78px; }
  .featured-large { min-height: 460px; }
  .featured-small { min-height: 230px; }
}

@media (max-width: 560px) {
  .family-item { grid-template-columns: minmax(0, 1fr) 58px 24px; gap: 12px; min-height: 94px; }
  .family-media { width: 58px; height: 58px; }
  .featured-large { min-height: 360px; }
  .featured-small { min-height: 205px; }
  .featured-label { right: 10px; bottom: 10px; left: 10px; padding: 12px; }
  .featured-label strong { font-size: 1.16rem; }
  .featured-label > span { font-size: .66rem; }
  .catalog-image { max-height: none; }
}