/* Archivo variable (width + weight axes), self-hosted - SIL Open Font License */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2'); }

/* =========================================================
   Landing page - CMYK process-ink palette, Archivo variable
   ========================================================= */
:root {
    --c: #00AEEF;          /* process cyan    */
    --m: #EC008C;          /* process magenta */
    --y: #FFF200;          /* process yellow  */
    --k: #231F20;          /* process black   */
    --paper: #FFFFFF;
    --tint: #EFF2F5;
    --mute: #565B63;
    --line: #D9DEE4;
    --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--k); font-family: 'Archivo', 'Segoe UI', Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--k); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--y); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--y); color: var(--k); padding: 10px 16px; font-weight: 700; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
.cond { font-stretch: 75%; font-variation-settings: 'wdth' 75; font-weight: 800; letter-spacing: -0.005em; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 1.45rem; line-height: 1; min-width: 0; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--m); }
.nav a.btn { border-bottom: 0; padding: 9px 18px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 2px solid var(--k); border-radius: 8px; padding: 7px 12px; font: inherit; font-weight: 700; cursor: pointer; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border: 2px solid var(--k); border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; background: var(--paper); color: var(--k); line-height: 1.1; transition: background .15s, transform .15s; }
.btn:hover { background: var(--tint); }
.btn:active { transform: translateY(1px); }
.btn-y { background: var(--y); }
.btn-y:hover { background: #ffe800; }
.btn-sm { padding: 9px 18px; font-size: .92rem; }
.dark .btn { border-color: #fff; background: transparent; color: #fff; }
.dark .btn:hover { background: rgba(255,255,255,.1); }
.dark .btn-y { background: var(--y); color: var(--k); border-color: var(--y); }
.dark .btn-y:hover { background: #fff; border-color: #fff; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero h1 { position: relative; margin: 0; font-size: clamp(3.4rem, 9.4vw, 8rem); line-height: .9; isolation: isolate; text-wrap: balance; }
/* misregistered colour plates that slide into register once on load */
.hero h1::before, .hero h1::after { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; content: attr(data-text); content: attr(data-text) / ""; }
.hero h1::before { color: var(--c); --x0: -.2em; --y0: .1em; --x1: -.028em; --y1: .014em; animation: register 1.5s cubic-bezier(.18,.8,.22,1) .2s both; }
.hero h1::after  { color: var(--m); --x0: .18em; --y0: -.09em; --x1: .028em; --y1: -.014em; animation: register 1.5s cubic-bezier(.18,.8,.22,1) .2s both; }
@keyframes register { from { transform: translate(var(--x0), var(--y0)); opacity: .0; } 15% { opacity: 1; } to { transform: translate(var(--x1), var(--y1)); opacity: 1; } }
.hero .lede { max-width: 33em; margin: 26px 0 0; font-size: 1.2rem; color: #3a3d42; }
.hero .tagline { margin: 12px 0 0; color: var(--mute); font-weight: 600; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.sheet-wrap { position: relative; }
.sheet { width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(35,31,32,.18)); }

/* ---------- colour-bar divider ---------- */
.colorbar { display: flex; height: 22px; width: 100%; }
.colorbar i { flex: 1; }
.colorbar i:nth-child(1) { background: var(--c); } .colorbar i:nth-child(2) { background: var(--m); }
.colorbar i:nth-child(3) { background: var(--y); } .colorbar i:nth-child(4) { background: var(--k); }
.colorbar i:nth-child(5) { background: var(--c); opacity: .5; } .colorbar i:nth-child(6) { background: var(--m); opacity: .5; }
.colorbar i:nth-child(7) { background: var(--y); opacity: .5; } .colorbar i:nth-child(8) { background: var(--k); opacity: .5; }
.colorbar i:nth-child(9) { background: var(--c); opacity: .22; } .colorbar i:nth-child(10) { background: var(--m); opacity: .22; }
.colorbar i:nth-child(11) { background: var(--y); opacity: .22; } .colorbar i:nth-child(12) { background: var(--k); opacity: .22; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tint { background: var(--tint); }
.section h2 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: .95; text-wrap: balance; }
.section .intro { max-width: 34em; margin: 18px 0 0; color: var(--mute); font-size: 1.1rem; }

/* services as a price-list catalogue */
.catalog { margin-top: 44px; border-top: 3px solid var(--k); }
.row { display: grid; grid-template-columns: 14px minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 8px 28px; align-items: center; padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); transition: background .15s, padding .15s; }
.row:hover { background: #fff; padding-left: 14px; }
.row .sw { width: 14px; height: 44px; background: var(--c); }
.row:nth-child(4n+2) .sw { background: var(--m); } .row:nth-child(4n+3) .sw { background: var(--y); } .row:nth-child(4n+4) .sw { background: var(--k); }
.row h3 { margin: 0; font-size: 1.75rem; line-height: 1.05; }
.row p { margin: 0; color: var(--mute); }
.unit { font-size: .85rem; font-weight: 600; border: 1.5px solid var(--k); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.catalog-foot { margin-top: 26px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--mute); }

/* promises */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.promise { border-top: 8px solid var(--c); padding-top: 18px; }
.promise:nth-child(2) { border-color: var(--m); } .promise:nth-child(3) { border-color: var(--y); }
.promise h3 { margin: 0 0 8px; font-size: 1.9rem; line-height: 1; }
.promise p { margin: 0; color: #3a3d42; }

/* steps (a true sequence) */
.steps { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.steps li { position: relative; padding: 0 28px 0 0; }
.steps li::before { counter-increment: s; content: counter(s); display: block; font-size: 6.2rem; line-height: .85; font-stretch: 75%; font-variation-settings: 'wdth' 75; font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--k); margin-bottom: 14px; }
.steps h3 { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.15; }
.steps p { margin: 0; color: var(--mute); font-size: 1rem; }

/* ---------- contact (dark) ---------- */
.dark { background: var(--k); color: #fff; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); align-items: start; }
.dark h2 { color: #fff; }
.dark .intro { color: #C9CBCF; }
.quote { margin-top: 32px; display: grid; gap: 16px; }
.quote label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.quote input, .quote textarea { width: 100%; padding: 13px 14px; border: 2px solid #6b6568; border-radius: 10px; background: #2f2b2c; color: #fff; font: inherit; }
.quote input::placeholder, .quote textarea::placeholder { color: #9b9599; }
.quote input:focus, .quote textarea:focus { outline: none; border-color: var(--y); box-shadow: 0 0 0 3px rgba(255,242,0,.25); }
.quote textarea { min-height: 110px; resize: vertical; }
.quote .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote small { color: #B5B0B3; }
.details { display: grid; gap: 28px; }
.details dt { color: #B5B0B3; font-size: .95rem; margin-bottom: 2px; }
.details dd { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.details .phone { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; text-decoration: none; display: inline-block; }
.details .phone:hover { color: var(--y); }
.details a { text-decoration-color: var(--m); text-underline-offset: 4px; }
.details a:hover { color: var(--y); }
.map-link { display: inline-block; margin-top: 8px; font-size: 1rem; }

.site-foot { background: var(--k); color: #B5B0B3; border-top: 1px solid #4a4446; padding: 26px 0 34px; font-size: .95rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.site-foot a { color: #fff; text-decoration-color: var(--m); text-underline-offset: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .hero-grid, .contact-grid { grid-template-columns: 1fr; }
    .sheet-wrap { max-width: 460px; margin: 10px auto 0; }
    .promises { grid-template-columns: 1fr; gap: 28px; }
    .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .row { grid-template-columns: 14px 1fr; }
    .row p, .row .unit { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
    .menu-btn { display: block; }
    .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 18px; margin: 0; }
    .nav.open { display: flex; }
    .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .nav a.btn { margin-top: 14px; border: 2px solid var(--k); text-align: center; padding: 13px 18px; }
    .steps { grid-template-columns: 1fr; }
    .quote .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero h1::before, .hero h1::after { animation: none; transform: translate(var(--x1), var(--y1)); }
    .row, .btn { transition: none; }
}
@media print { .site-head, .quote, .menu-btn { display: none; } }