/* ========================================================================== MSH Development — front-end prototype Identity is monochrome (logo, old site, ads): asphalt black, concrete grey, paint white. Signature: "the stripe" — a painted line that draws itself as you scroll. Accent colour is a swappable theme (see data-theme) so the client can choose. ========================================================================== */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/Archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/Archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Regular.woff2") format("woff2"), url("../fonts/Manrope-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Medium.woff2") format("woff2"), url("../fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-SemiBold.woff2") format("woff2"), url("../fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Bold.woff2") format("woff2"), url("../fonts/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/Manrope-ExtraBold.woff2") format("woff2"), url("../fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; } :root { --asphalt: #131313; --asphalt-2: #1b1c1e; --asphalt-3: #26272a; --concrete: #e7e9ea; --concrete-2: #f3f4f4; --slab: #cccccc; --paint: #ffffff; --muted: #565b62; --muted-dark: #a3a9b1; --display: "Archivo", "Arial Narrow", Impact, sans-serif; --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --gut: clamp(20px, 5vw, 72px); --max: 1320px; --slant: clamp(28px, 5vw, 72px); --ease: cubic-bezier(.2, .7, .1, 1); --header-h: 76px; } /* ---- colour themes ------------------------------------------------------- Production is fixed to the brass theme (champagne brass on black / grey / white). . Each theme only defines raw values; "effective" tokens below decide which value applies on light vs dark surfaces. */ :root, :root[data-theme="brass"] { /* client choice: brass is the default */ --a-lt: #a8823f; --a-dk: #d6b46f; --a-text: #7b5d22; --cta-lt: #c9a35b; --cta-lt-ink: #131313; --cta-hover-lt: #ffffff; --cta-dk: #d6b46f; --cta-dk-ink: #131313; --cta-hover-dk: #ffffff; --band: #d6b46f; --band-ink: #131313; --rail: #d6b46f; --rail-blend: normal; --cmp-line: #a8823f; } :root { --accent: var(--a-lt); --accent-text: var(--a-text); --cta: var(--cta-lt); --cta-ink: var(--cta-lt-ink); --cta-hover: var(--cta-hover-lt); } .header, .menu, .hero, .phero, .on-dark, .footer, .pnext, .lb, .callbar, .card--more { --accent: var(--a-dk); --accent-text: var(--a-dk); --cta: var(--cta-dk); --cta-ink: var(--cta-dk-ink); --cta-hover: var(--cta-hover-dk); } .form { /* light card inside a dark section */ --accent: var(--a-lt); --accent-text: var(--a-text); --cta: var(--cta-lt); --cta-ink: var(--cta-lt-ink); --cta-hover: var(--cta-hover-lt); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--asphalt); background: var(--concrete); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4, p, ul { margin: 0; } ul { padding: 0; list-style: none; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #131313; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: fixed; top: -60px; left: 12px; z-index: 200; background: var(--cta-dk); color: var(--cta-dk-ink); padding: 10px 16px; font-weight: 700; transition: top .2s; } .skip:focus { top: 12px; } .wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; } /* ---- type ---- */ .display { font-family: var(--display); font-weight: 800; font-stretch: 68%; text-transform: uppercase; line-height: .9; letter-spacing: .002em; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 34px; height: 5px; background: var(--accent); border-radius: 1px; } .h2 { font-size: clamp(44px, 6.6vw, 96px); } .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 56ch; } .on-dark .lead { color: var(--muted-dark); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 3px; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--ease), background-color .25s, color .25s; } .btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(5px); } .btn--primary { background: var(--cta); color: var(--cta-ink); } .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cta-hover); transform: translateX(-101%); transition: transform .4s var(--ease); } .btn--primary:hover::after { transform: none; } .btn--ghost { color: var(--paint); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); } .btn--ghost:hover { background: var(--paint); color: var(--asphalt); box-shadow: inset 0 0 0 2px var(--paint); } .btn--dark { background: var(--asphalt); color: var(--paint); } .btn--dark:hover { background: var(--band); color: var(--band-ink); } .btn--sm { min-height: 44px; padding: 0 20px; font-size: 13px; } /* ========================================================================== The stripe (signature) — fixed rail that paints as you scroll ========================================================================== */ .rail { position: fixed; z-index: 60; top: 0; bottom: 0; left: calc(var(--gut) / 2 - 5px); width: 10px; pointer-events: none; display: none; mix-blend-mode: var(--rail-blend); } .rail__track { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(140,146,153,.55) 0 22px, transparent 22px 44px); -webkit-mask: linear-gradient(90deg, transparent 3px, #000 3px 7px, transparent 7px); mask: linear-gradient(90deg, transparent 3px, #000 3px 7px, transparent 7px); } .rail__fill { position: absolute; left: 3px; top: 0; width: 4px; height: 100%; background: var(--rail); transform-origin: top; transform: scaleY(0); border-radius: 0 0 2px 2px; } .rail__head { position: absolute; left: -1px; width: 12px; height: 12px; top: 0; background: var(--rail); border-radius: 2px; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rail) 25%, transparent); } @media (min-width: 1100px) { .rail { display: block; } } .progress-bar { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 3px; background: transparent; pointer-events: none; mix-blend-mode: var(--rail-blend); } .progress-bar__fill { height: 100%; background: var(--rail); transform-origin: left; transform: scaleX(0); } @media (min-width: 1100px) { .progress-bar { display: none; } } /* ========================================================================== Header ========================================================================== */ .header { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: var(--header-h); display: flex; align-items: center; color: var(--paint); transition: background-color .3s, backdrop-filter .3s, transform .4s var(--ease); } .header.is-solid { background: rgba(19,19,19,.88); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); } .header.is-hidden { transform: translateY(-100%); } .header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .header__logo { display: block; line-height: 0; } .header__logo img { width: 130px; height: auto; display: block; } .nav { display: none; gap: clamp(20px, 2.6vw, 40px); align-items: center; } .nav a { position: relative; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .header__cta { display: none; align-items: center; gap: 20px; } .header__phone { font-weight: 800; text-decoration: none; letter-spacing: .02em; white-space: nowrap; } .burger { display: grid; place-items: center; width: 46px; height: 46px; background: transparent; border: 0; color: var(--paint); } .burger span, .burger span::before { display: block; width: 26px; height: 3px; background: currentColor; position: relative; transition: transform .3s var(--ease), background-color .3s; } .burger span::before { content: ""; position: absolute; top: -8px; left: 0; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); box-shadow: 0 0 0 0 transparent; } .burger[aria-expanded="true"] span::after { transform: rotate(-45deg); } .burger span::after { content: ""; position: absolute; top: 8px; left: 0; width: 26px; height: 3px; background: currentColor; transition: transform .3s var(--ease); } .burger[aria-expanded="true"] span::after { top: 0; } .menu { position: fixed; inset: 0; z-index: 75; background: var(--asphalt); color: var(--paint); padding: calc(var(--header-h) + 24px) var(--gut) 40px; display: flex; flex-direction: column; gap: 6px; clip-path: circle(0 at calc(100% - 44px) 38px); transition: clip-path .6s var(--ease); visibility: hidden; } .menu.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; } .menu a.menu__link { font-family: var(--display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 13vw, 84px); line-height: 1; text-decoration: none; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.12); } .menu__foot { margin-top: auto; display: grid; gap: 14px; } @media (min-width: 1000px) { .nav, .header__cta { display: flex; } .burger, .menu { display: none; } .header__in { display: grid; grid-template-columns: 1fr auto 1fr; } .header__logo img { width: 162px; } .header__cta { justify-self: end; } } .burger { margin-right: -10px; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; min-height: 100svh; color: var(--paint); background: var(--asphalt); display: flex; align-items: flex-end; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); margin-bottom: calc(var(--slant) * -1); padding-bottom: calc(var(--slant) + 34px); } .hero__slides { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; } .hero__slide.is-on { opacity: 1; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(19,19,19,.9) 0%, rgba(19,19,19,.62) 46%, rgba(19,19,19,.12) 100%), linear-gradient(0deg, rgba(19,19,19,.82) 0%, rgba(19,19,19,0) 42%); } .hero__in { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 60px); width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; } .hero__eyebrow { color: var(--paint); margin-bottom: 26px; } .hero__title { font-size: clamp(60px, 10.2vw, 160px); margin-left: -.02em; } .hero__title .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; } .hero__title .in { display: block; } .hero__title .stripe-word { position: relative; display: inline-block; } .hero__title .stripe-word::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -.04em; height: .11em; background: var(--accent); transform-origin: left; transform: scaleX(var(--w, 1)); border-radius: 2px; } .hero__sub { min-height: 3em; margin-top: 30px; max-width: 54ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: #e9ecef; } .hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } .hero__bar { position: relative; z-index: 2; margin-top: clamp(44px, 7vh, 90px); display: grid; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); } .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; } .fact strong { display: block; font-size: 15px; font-weight: 800; letter-spacing: .02em; } .fact span { display: block; font-size: 13px; color: var(--muted-dark); line-height: 1.4; } .slidebar { display: flex; align-items: center; gap: 18px; } .dashes { display: flex; gap: 8px; } .dash { width: 38px; height: 6px; background: rgba(255,255,255,.25); border: 0; padding: 0; position: relative; overflow: hidden; border-radius: 1px; } .dash i { position: absolute; inset: 0; background: var(--cta); transform: scaleX(0); transform-origin: left; } .slidebar__cap { font-size: 13px; color: #d4d8dd; line-height: 1.35; } .slidebar__cap b { color: var(--paint); } @media (min-width: 900px) { .hero__bar { grid-template-columns: 1fr auto; align-items: end; } .facts { grid-template-columns: repeat(4, auto); gap: 8px 44px; } } /* ========================================================================== Trust strip ========================================================================== */ .trust { background: var(--concrete); padding: calc(var(--slant) + 34px) 0 44px; } .trust__label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; } .marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; align-items: center; gap: clamp(44px, 6vw, 88px); width: max-content; animation: marquee 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track img { height: 62px; width: auto; max-width: 190px; object-fit: contain; flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } /* ========================================================================== Two doors ========================================================================== */ .doors { background: var(--asphalt); color: var(--paint); padding: clamp(80px, 11vw, 150px) 0; } .doors__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); } .doors__grid { display: grid; gap: 14px; } .door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; min-height: 520px; padding: clamp(24px, 3vw, 44px); text-decoration: none; background: var(--asphalt-3); transition: flex-grow .7s var(--ease); } .door__img { position: absolute; inset: 0; z-index: -2; } .door__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.9) brightness(.86); } .door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(19,19,19,.94) 0%, rgba(19,19,19,.35) 55%, rgba(19,19,19,.15) 100%); } .door::after { content: ""; position: absolute; left: 0; bottom: 0; height: 8px; width: 100%; background: var(--accent); transform: scaleX(.14); transform-origin: left; transition: transform .7s var(--ease); z-index: 1; } .door:hover::after, .door:focus-visible::after { transform: scaleX(1); } .door:hover .door__img img { transform: scale(1.07); filter: saturate(1.05) brightness(1); } .door__title { font-size: clamp(52px, 5.4vw, 92px); overflow-wrap: anywhere; } .door__text { margin-top: 14px; max-width: 46ch; color: #dde0e4; font-size: 17px; } .door__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .chip { padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .door__go { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; } .door__go svg { width: 22px; transition: transform .3s var(--ease); } .door:hover .door__go svg { transform: translateX(8px); } @media (min-width: 900px) { .doors__grid { display: flex; height: min(78vh, 720px); min-height: 560px; } .door { flex: 1 1 0; } .doors__grid:hover .door { flex-grow: .78; } .doors__grid .door:hover { flex-grow: 1.5; } } /* ========================================================================== Statement (scrubbed words) ========================================================================== */ .statement { background: var(--concrete); padding: clamp(90px, 12vw, 170px) 0; } .statement__text { font-weight: 800; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; } .statement__text .w { opacity: .16; } .statement__wrap { display: grid; gap: 30px; } @media (min-width: 900px) { .statement__text { max-width: 26ch; } } /* ========================================================================== Projects — horizontal track ========================================================================== */ .work { background: var(--concrete-2); padding: clamp(70px, 9vw, 120px) 0 clamp(70px, 9vw, 110px); } .work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 26px; margin-bottom: 44px; } .work__pin { position: relative; overflow: hidden; padding: 10px 0 30px; } .work__track { display: flex; gap: 22px; padding: 0 var(--gut); width: max-content; } .card { position: relative; flex: none; width: min(78vw, 470px); text-decoration: none; display: flex; flex-direction: column; background: var(--paint); border-radius: 3px; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; } .card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -22px rgba(19,19,19,.5); } .card__img { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--asphalt-3); } .card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .card:hover .card__img img { transform: scale(1.06); } .card__tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--asphalt); color: var(--paint); border-radius: 2px; } .card__body { padding: 22px 24px 26px; display: grid; gap: 6px; } .card__title { font-size: clamp(30px, 2.6vw, 38px); line-height: .95; } .card__city { font-size: 14px; font-weight: 700; color: var(--accent-text); } .card__tags { margin-top: 8px; font-size: 14px; color: var(--muted); } .card--more { background: var(--asphalt); color: var(--paint); justify-content: center; align-items: flex-start; padding: 36px; gap: 22px; } .card--more:hover { background: var(--band); color: var(--band-ink); } .card--more .display { font-size: clamp(48px, 5vw, 76px); } .work__hint { margin-top: 28px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } @media (max-width: 899px) { .work__track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; } .work__track::-webkit-scrollbar { display: none; } .card { scroll-snap-align: start; } .work__hint { display: none; } } /* ========================================================================== Before / after (diagonal compare) ========================================================================== */ .ba { background: var(--asphalt); color: var(--paint); padding: clamp(80px, 10vw, 140px) 0; } .ba__grid { display: grid; gap: clamp(30px, 5vw, 70px); align-items: center; } .ba__copy { display: grid; gap: 24px; align-content: start; } .ba__list { display: grid; gap: 12px; margin: 4px 0 6px; } .ba__list li { display: flex; gap: 12px; align-items: baseline; color: #dfe2e6; } .ba__list li::before { content: ""; flex: none; width: 22px; height: 4px; background: var(--accent); transform: translateY(-4px); } .compare { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--asphalt-3); touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; border-radius: 3px; } .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .compare__before { clip-path: polygon(0 0, calc(var(--p) + var(--s)) 0, calc(var(--p) - var(--s)) 100%, 0 100%); } .compare__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .compare__svg line { stroke: var(--cmp-line); stroke-width: 5; vector-effect: non-scaling-stroke; } .compare__svg line.halo { stroke: rgba(255,255,255,.9); stroke-width: 9; } .compare__knob { position: absolute; top: 50%; left: var(--p); width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0,0,0,.45); pointer-events: none; } .compare__knob svg { width: 30px; } .compare__label { position: absolute; bottom: 16px; padding: 7px 14px; background: rgba(19,19,19,.82); color: var(--paint); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; } .compare__label--b { left: 16px; } .compare__label--a { right: 16px; } .compare input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; } .compare input:focus-visible + .compare__knob { outline: 3px solid var(--paint); outline-offset: 3px; } .ba__cap { margin-top: 14px; font-size: 14px; color: var(--muted-dark); } @media (min-width: 960px) { .ba__grid { grid-template-columns: .82fr 1.18fr; } } /* ========================================================================== Services list with preview ========================================================================== */ .svc { background: var(--concrete); padding: clamp(80px, 10vw, 140px) 0; } .svc__head { display: grid; gap: 20px; margin-bottom: clamp(34px, 5vw, 60px); } .svc__grid { display: grid; gap: 34px; } .svc__group h3 { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); padding-bottom: 14px; border-bottom: 3px solid var(--asphalt); } .svc__group + .svc__group { margin-top: 30px; } .svc__row { display: block; } .svc__row a, .svc__row button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; text-align: left; text-decoration: none; padding: 20px 0; background: none; border: 0; border-bottom: 1px solid var(--slab); position: relative; transition: padding .4s var(--ease), color .3s; } .svc__row a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .svc__row a:hover, .svc__row a:focus-visible, .svc__row a.is-active { padding-left: 14px; } .svc__row a:hover::after, .svc__row a:focus-visible::after, .svc__row a.is-active::after { transform: scaleX(1); } .svc__name { font-family: var(--display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.3vw, 46px); line-height: 1; } .svc__desc { grid-column: 1; font-size: 15px; color: var(--muted); max-width: 52ch; } .svc__arrow { grid-row: 1 / span 2; grid-column: 2; width: 26px; color: var(--accent-text); transition: transform .3s var(--ease); } .svc__row a:hover .svc__arrow { transform: translateX(6px); } .svc__preview { display: none; } @media (min-width: 960px) { .svc__grid { grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .svc__preview { display: block; position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--asphalt-3); border-radius: 3px; } .svc__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .6s var(--ease), transform 1.1s var(--ease); } .svc__preview img.is-on { opacity: 1; transform: none; } .svc__preview figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; font-size: 13px; color: #e8eaed; background: linear-gradient(0deg, rgba(19,19,19,.85), transparent); z-index: 2; } } /* ========================================================================== Process ========================================================================== */ .proc { background: var(--asphalt-2); color: var(--paint); padding: clamp(80px, 10vw, 140px) 0; } .proc__head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 80px); } .proc__line { position: relative; height: 10px; margin-bottom: 40px; display: none; } .proc__line::before { content: ""; position: absolute; inset: 3px 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 22px, transparent 22px 44px); } .proc__line i { position: absolute; left: 0; top: 2px; height: 6px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); border-radius: 2px; } .steps { display: grid; gap: 34px; counter-reset: s; } .step { position: relative; padding-left: 74px; } .step::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -6px; font-family: var(--display); font-stretch: 68%; font-weight: 800; font-size: 60px; line-height: 1; color: var(--accent); } .step h3 { font-family: var(--display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; margin-bottom: 10px; } .step p { color: var(--muted-dark); max-width: 34ch; } @media (min-width: 900px) { .proc__line { display: block; } .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; } .step { padding: 0; } .step::before { position: static; display: block; margin-bottom: 16px; font-size: 72px; } } /* ========================================================================== Credentials ========================================================================== */ .creds { background: var(--concrete); padding: clamp(80px, 10vw, 130px) 0; } .creds__grid { display: grid; gap: 16px; margin-top: 44px; } .cred { background: var(--paint); padding: 30px 30px 34px; border-radius: 3px; border-top: 6px solid var(--accent); display: grid; gap: 10px; align-content: start; } .cred small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .cred strong { font-family: var(--display); font-stretch: 68%; font-weight: 800; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; text-transform: uppercase; } .cred p { color: var(--muted); font-size: 15px; } @media (min-width: 860px) { .creds__grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Estimate form ========================================================================== */ .est { position: relative; background: var(--asphalt); color: var(--paint); padding: calc(var(--slant) + clamp(70px, 9vw, 120px)) 0 clamp(80px, 10vw, 130px); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--slant) * -1); } .est__grid { display: grid; gap: clamp(36px, 6vw, 90px); } .est__copy { display: grid; gap: 26px; align-content: start; } .contact-lines { display: grid; gap: 16px; margin-top: 10px; } .contact-lines a, .contact-lines div { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; text-decoration: none; font-weight: 700; font-size: 18px; } .contact-lines svg { width: 22px; margin-top: 4px; color: var(--accent); } .contact-lines small { display: block; font-weight: 500; color: var(--muted-dark); font-size: 14px; } .form { background: var(--concrete); color: var(--asphalt); border-radius: 4px; padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 20px; position: relative; overflow: hidden; } .form__row { display: grid; gap: 20px; } .field { display: grid; gap: 7px; } .field label, .field legend { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 17px; padding: 14px 16px; background: var(--paint); border: 2px solid transparent; border-bottom-color: var(--slab); border-radius: 3px; color: var(--asphalt); transition: border-color .25s, box-shadow .25s; } .field textarea { min-height: 116px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } .field input:user-invalid { border-color: #c62828; } .types { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; } .types legend { padding: 0; margin-bottom: 9px; float: left; width: 100%; } .type input { position: absolute; opacity: 0; } .type span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 3px; background: var(--paint); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 2px var(--slab); transition: background-color .25s, color .25s, box-shadow .25s; cursor: pointer; } .type input:checked + span { background: var(--asphalt); color: var(--paint); box-shadow: inset 0 0 0 2px var(--asphalt); } .type input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; } .form__note { font-size: 13px; color: var(--muted); } .form__done { position: absolute; inset: 0; background: var(--asphalt); color: var(--paint); display: grid; place-content: center; gap: 14px; text-align: center; padding: 30px; opacity: 0; pointer-events: none; } .form__done.is-on { pointer-events: auto; } .form__done svg { width: 84px; margin-inline: auto; } .form__done path { stroke: var(--cta-dk); stroke-width: 7; fill: none; stroke-linecap: square; } @media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .est__grid { grid-template-columns: .85fr 1.15fr; align-items: start; } } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--asphalt-2); color: var(--paint); padding: 70px 0 30px; } .footer__grid { display: grid; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,.14); } .footer__logo { width: 150px; height: auto; margin-bottom: 22px; } .footer p, .footer li, .footer address { font-size: 15px; color: var(--muted-dark); font-style: normal; } .footer h2, .footer h4 { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; color: var(--paint); } .footer li + li { margin-top: 9px; } .footer a { text-decoration: none; } .footer li a:hover, .footer address a:hover { color: var(--paint); text-decoration: underline; text-underline-offset: 4px; } .footer__legal { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; padding-top: 26px; font-size: 14px; color: var(--muted-dark); } .footer__legal a { color: var(--paint); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } /* mobile sticky call bar */ .callbar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 0; transform: translateY(110%); transition: transform .45s var(--ease); box-shadow: 0 -10px 30px rgba(0,0,0,.35); } .callbar.is-on { transform: none; } .callbar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; text-decoration: none; } .callbar a:first-child { background: var(--asphalt); color: var(--paint); } .callbar a:last-child { background: var(--cta-dk); color: var(--cta-dk-ink); } .callbar svg { width: 18px; } @media (min-width: 900px) { .callbar { display: none; } } @media (max-width: 899px) { body { padding-bottom: 0; } .footer { padding-bottom: 90px; } } /* reveal defaults (JS adds .js) */ .js [data-reveal] { opacity: 0; transform: translateY(34px); } /* ========================================================================== Project page ========================================================================== */ .phero { position: relative; min-height: 88svh; color: var(--paint); display: flex; align-items: flex-end; background: var(--asphalt); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); margin-bottom: calc(var(--slant) * -1); padding-bottom: calc(var(--slant) + 40px); } .phero__img { position: absolute; inset: -6% 0; } .phero__img img { width: 100%; height: 100%; object-fit: cover; } .phero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(19,19,19,.92) 0%, rgba(19,19,19,.35) 55%, rgba(19,19,19,.55) 100%); } .phero__in { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 50px); display: grid; gap: 18px; } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d5d9de; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--paint); text-decoration: underline; } .crumbs span[aria-hidden] { opacity: .5; } .phero__title { font-size: clamp(60px, 11.5vw, 190px); } .phero__title .stripe-word { position: relative; display: inline-block; } .phero__title .stripe-word::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -.04em; height: .1em; background: var(--accent); transform-origin: left; transform: scaleX(var(--w, 1)); border-radius: 2px; } .phero__loc { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; } .phero__loc svg { width: 22px; color: var(--accent); } .pmain { background: var(--concrete); padding: calc(var(--slant) + 60px) 0 90px; } .pmain__grid { display: grid; gap: 40px; } .pmain__sum { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; max-width: 30ch; } .facts-card { background: var(--paint); border-radius: 3px; padding: 26px 28px 30px; border-top: 6px solid var(--accent); display: grid; gap: 0; align-self: start; } .facts-card dl { margin: 0; display: grid; } .facts-card div.row { padding: 15px 0; border-bottom: 1px solid var(--slab); } .facts-card div.row:last-of-type { border-bottom: 0; } .facts-card dt { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .facts-card dd { margin: 0; font-weight: 700; } .facts-card .btn { margin-top: 20px; width: 100%; } @media (min-width: 960px) { .pmain__grid { grid-template-columns: 1.5fr 1fr; gap: 80px; } .facts-card { position: sticky; top: calc(var(--header-h) + 24px); } } .jump { list-style: none; padding: 0; margin: 44px 0 0; max-width: 560px; border-top: 3px solid var(--asphalt); } .jump a { display: grid; grid-template-columns: 54px 1fr 26px; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--slab); text-decoration: none; position: relative; transition: padding .4s var(--ease); } .jump a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .jump a:hover, .jump a:focus-visible { padding-left: 12px; } .jump a:hover::after, .jump a:focus-visible::after { transform: scaleX(1); } .jump__n { font-family: var(--display); font-stretch: 68%; font-weight: 800; font-size: 46px; line-height: 1; color: var(--accent-text); } .jump__t { font-family: var(--display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; } .jump__t small { display: block; font-family: var(--body); font-stretch: 100%; font-weight: 600; font-size: 14px; text-transform: none; color: var(--muted); margin-top: 6px; } .jump svg { width: 24px; color: var(--accent-text); } .scope { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .scope li { padding: 12px 18px; background: var(--paint); border-radius: 3px; font-weight: 800; font-size: 15px; box-shadow: inset 4px 0 0 var(--accent); padding-left: 22px; } .pba { background: var(--asphalt); color: var(--paint); padding: 90px 0; } .pba .h2 { margin-bottom: 30px; } .gal { background: var(--concrete); padding: 84px 0 40px; } .gal__head { display: grid; gap: 18px; margin-bottom: 40px; } .phase { position: relative; display: grid; gap: 26px; margin-bottom: 84px; } .phase__lab { display: grid; gap: 8px; align-content: start; } .phase__lab .display { font-size: clamp(38px, 5vw, 66px); } .phase__lab p { color: var(--muted); max-width: 40ch; } .phase__lab .bar { width: 100%; height: 8px; background: var(--slab); border-radius: 1px; margin-top: 10px; position: relative; overflow: hidden; } .phase__lab .bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); } .masonry { columns: 2; column-gap: 12px; } .masonry figure { margin: 0 0 12px; break-inside: avoid; position: relative; overflow: hidden; border-radius: 3px; background: var(--asphalt-3); cursor: zoom-in; } .masonry img { width: 100%; height: auto; transition: transform .9s var(--ease); } .masonry figure:hover img { transform: scale(1.05); } .masonry button { display: block; width: 100%; padding: 0; border: 0; background: none; } @media (min-width: 700px) { .masonry { columns: 3; column-gap: 14px; } .masonry figure { margin-bottom: 14px; } } @media (min-width: 1000px) { .phase { grid-template-columns: 340px 1fr; gap: 56px; } .phase__lab { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } } .pnext { background: var(--asphalt-2); color: var(--paint); } .pnext__grid { display: grid; } .pnext a { display: grid; gap: 8px; padding: 46px var(--gut); text-decoration: none; position: relative; overflow: hidden; transition: background-color .4s; } .pnext a:hover { background: var(--band); color: var(--band-ink); } .pnext small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); } .pnext a:hover small { color: var(--band-ink); opacity: .7; } .pnext .display { font-size: clamp(34px, 4.6vw, 64px); } .pnext a + a { border-top: 1px solid rgba(255,255,255,.12); } @media (min-width: 800px) { .pnext__grid { grid-template-columns: 1fr 1fr; } .pnext a + a { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); } .pnext a:last-child { text-align: right; } } .related { background: var(--concrete-2); padding: 90px 0; } .related__grid { display: grid; gap: 20px; margin-top: 36px; } .related .card { width: auto; } @media (min-width: 760px) { .related__grid { grid-template-columns: repeat(3, 1fr); } } .cta-band { background: var(--band); color: var(--band-ink); padding: 70px 0; } .cta-band__in { display: grid; gap: 26px; align-items: center; } .cta-band .display { font-size: clamp(42px, 6vw, 88px); } .cta-band__act { display: flex; flex-wrap: wrap; gap: 14px; } .cta-band .btn--ghost { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); } @media (min-width: 900px) { .cta-band__in { grid-template-columns: 1.4fr auto; } } /* lightbox */ .lb { position: fixed; inset: 0; z-index: 300; background: rgba(10,10,10,.96); display: none; align-items: center; justify-content: center; padding: 60px 20px 70px; } .lb.is-open { display: flex; } .lb img { max-width: min(1400px, 100%); max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px; } .lb__btn { position: absolute; width: 56px; height: 56px; border: 0; background: rgba(255,255,255,.1); color: var(--paint); border-radius: 50%; display: grid; place-items: center; } .lb__btn:hover { background: var(--cta-dk); color: var(--cta-dk-ink); } .lb__btn svg { width: 24px; } .lb__close { top: 14px; right: 14px; } .lb__prev { left: 14px; top: 50%; margin-top: -28px; } .lb__next { right: 14px; top: 50%; margin-top: -28px; } .lb__count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: #cfd3d8; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee__track { animation: none; overflow-x: auto; } .js [data-reveal] { opacity: 1; transform: none; } .statement__text .w { opacity: 1; } * { transition-duration: .01ms !important; } } /* ========================================================================== Round 2 additions ========================================================================== */ /* CTA band inherits the theme band colour */ .cta-band { --accent: var(--band-ink); } .cta-band .btn--primary { --cta: var(--band-ink); --cta-ink: #fff; --cta-hover: #3b3b3b; } .cta-band .btn--ghost { color: var(--band-ink); box-shadow: inset 0 0 0 2px var(--band-ink); } .cta-band .btn--ghost:hover { background: var(--band-ink); color: var(--band); box-shadow: inset 0 0 0 2px var(--band-ink); } /* logos sit on a clean white band inside the grey page */ /* residential concept tiles (after-only, clearly labelled) */ .res { background: #fff; padding: clamp(80px, 10vw, 140px) 0; } .res__head { display: grid; gap: 20px; margin-bottom: clamp(30px, 4vw, 52px); } .res__grid { display: grid; gap: 14px; } .tile { position: relative; overflow: hidden; margin: 0; border-radius: 3px; background: var(--asphalt-3); aspect-ratio: 4 / 3; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .tile:hover img { transform: scale(1.05); } .tile__tags { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .tile__tags span { padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(19,19,19,.86); color: #fff; border-radius: 2px; } .res__foot { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .res__foot p { font-size: 14px; color: var(--muted); max-width: 52ch; } @media (min-width: 800px) { .res__grid { grid-template-columns: 1fr 1fr; } } /* hidden categories (only visible with ?showAll=1) */ .is-hidden-cat { opacity: .55; } .hid-badge { display: inline-block; margin-left: 10px; padding: 3px 8px; font-family: var(--body); font-stretch: 100%; font-size: 11px; font-weight: 800; letter-spacing: .1em; vertical-align: middle; background: var(--asphalt); color: #fff; border-radius: 2px; } /* prototype-only colour switcher */ /* hero: per-project meta line */ .pj { font-size: 14px; line-height: 1.5; color: #d4d8dd; } .pj b { display: block; color: var(--paint); font-size: 15px; letter-spacing: .02em; } .pj span { color: var(--accent); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } .badge { display: inline-block; padding: 5px 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--cta); color: var(--cta-ink); border-radius: 2px; margin-right: 8px; } /* ========================================================================== Round 3 ========================================================================== */ /* hero now leads straight into the dark "doors" section */ .hero + .doors { padding-top: calc(var(--slant) + clamp(80px, 11vw, 150px)); } /* clients: uniform white cards on the grey page */ .clients { background: var(--concrete); padding: clamp(80px, 10vw, 140px) 0; } .clients__in { display: grid; gap: clamp(30px, 5vw, 70px); align-items: center; } .clients__copy { display: grid; gap: 22px; align-content: start; } .clients__copy .h2 { font-size: clamp(38px, 4.8vw, 68px); } .clients__in > * { min-width: 0; } .clients__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .logo { min-width: 0; overflow: hidden; background: #fff; border-radius: 3px; aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 22px 26px; box-shadow: inset 0 0 0 1px rgba(19,19,19,.06); transition: transform .4s var(--ease), box-shadow .4s; } .logo:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(19,19,19,.5); } .logo { position: relative; } .logo img { position: absolute; inset: 12px 16px; width: calc(100% - 32px); height: calc(100% - 24px); object-fit: contain; } .logo--cta { background: var(--asphalt); padding: 0; } .logo--cta a { width: 100%; height: 100%; display: grid; place-content: center; gap: 8px; text-align: center; padding: 18px; text-decoration: none; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; transition: background-color .3s, color .3s; } .logo--cta a svg { width: 22px; margin-inline: auto; color: var(--accent); } .logo--cta:hover { background: var(--cta-dk); } .logo--cta:hover a { color: var(--cta-dk-ink); } .logo--cta:hover a svg { color: var(--cta-dk-ink); } @media (min-width: 600px) { .clients__grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px) { .clients__in { grid-template-columns: .8fr 1.2fr; } } /* category tabs + cards */ .tabs { display: inline-flex; gap: 6px; padding: 5px; background: #fff; border-radius: 99px; margin-bottom: 34px; box-shadow: inset 0 0 0 1px rgba(19,19,19,.08); } .tabs button { border: 0; background: transparent; padding: 12px 22px; border-radius: 99px; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; transition: background-color .3s, color .3s; } .tabs button[aria-selected="true"] { background: var(--asphalt); color: #fff; } .tabs__n { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: rgba(127,127,127,.22); } .catgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .catgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .catgrid { grid-template-columns: repeat(3, 1fr); } } .cat { display: block; text-decoration: none; background: #fff; border-radius: 3px; overflow: hidden; height: 100%; transition: transform .5s var(--ease), box-shadow .5s; } .cat:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -24px rgba(19,19,19,.55); } .cat__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--asphalt-3); } .cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .cat:hover .cat__img img { transform: scale(1.07); } .cat__body { display: grid; gap: 8px; padding: 20px 22px 24px; } .cat__name { font-size: clamp(28px, 2.4vw, 34px); line-height: .95; } .cat__desc { font-size: 14.5px; color: var(--muted); line-height: 1.5; } .cat__n { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); } .cat__n svg { width: 18px; transition: transform .3s var(--ease); } .cat:hover .cat__n svg { transform: translateX(6px); } /* residential tiles are links now */ a.tile { display: block; text-decoration: none; } /* category page */ .phero--cat .phero__title { font-size: clamp(50px, 9.4vw, 150px); } .gal--cat { padding-top: 84px; } .masonry--wide { columns: 2; } @media (min-width: 700px) { .masonry--wide { columns: 3; } } @media (min-width: 1100px) { .masonry--wide { columns: 4; } } .jump--plain a { grid-template-columns: 26px 1fr; cursor: default; } .jump--plain a::after { display: none; } .jump--plain li { padding: 16px 0; border-bottom: 1px solid var(--slab); font-weight: 700; display: flex; gap: 14px; align-items: baseline; } .jump--plain li::before { content: ""; flex: none; width: 20px; height: 4px; background: var(--accent); transform: translateY(-4px); } .cats-more { background: var(--concrete); padding: 90px 0; } .cats-more .catgrid { margin-top: 32px; } /* honeypot field (spam trap): visually hidden but not display:none so bots still fill it */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #131313 50%), linear-gradient(135deg, #131313 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; } .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } /* ========================================================================== Multi-page structure additions ========================================================================== */ .phero__sub { max-width: 58ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: #e9ecef; } .phero__in .hero__actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 14px; } .hubwork { padding-top: clamp(70px, 9vw, 110px); } .hubwork .related__grid { margin-top: 0; } .hubwork .res__grid { margin-top: 0; } .est--page { clip-path: none; margin-top: 0; padding-top: calc(var(--header-h) + clamp(50px, 7vw, 100px)); min-height: 100svh; } .est--page h1.h2 { font-size: clamp(44px, 6.6vw, 96px); } .phead { background: var(--asphalt); color: var(--paint); padding: calc(var(--header-h) + 50px) 0 60px; } .phead .stripe-word { position: relative; display: inline-block; } .phead .stripe-word::after { content: ""; position: absolute; left: 1%; right: 1%; bottom: -.06em; height: .1em; background: var(--accent); border-radius: 2px; } .pfilter { background: var(--concrete); padding: 34px 0 10px; position: sticky; top: var(--header-h); z-index: 30; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips--sub { margin-top: 12px; } .fchip { border: 0; padding: 11px 20px; border-radius: 99px; background: #fff; font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(19,19,19,.1); transition: background-color .25s, color .25s; } .fchip:hover { background: var(--slab); } .fchip[aria-pressed="true"] { background: var(--asphalt); color: #fff; box-shadow: none; } .fchip--sm { padding: 8px 14px; font-size: 12px; } .pcount { margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .pgridwrap { background: var(--concrete); padding: 18px 0 90px; } .pgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .pgrid .card { width: auto; } @media (max-width: 640px) { .pfilter { position: static; } } /* ---- phones: tighter rhythm so the page stays short ---- */ @media (max-width: 640px) { .doors { padding-top: calc(var(--slant) + 56px); padding-bottom: 56px; } .door { min-height: 380px; padding: 22px; } .door__text { font-size: 15px; } .clients { padding: 56px 0; } .clients__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .logo { padding: 6px; } .logo img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); } .logo--cta a { font-size: 11px; padding: 8px; } .statement { padding: 56px 0; } .work { padding: 56px 0; } .ba { padding: 56px 0; } .proc, .creds, .svc { padding: 56px 0; } .proc__head { margin-bottom: 30px; } .steps { gap: 22px; } .creds__grid { gap: 10px; margin-top: 26px; } .cred { padding: 20px 22px 24px; } .h2 { font-size: clamp(38px, 11vw, 56px); } .cta-band { padding: 48px 0; } } .pmain__body { margin-top: 26px; max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--muted); } .pmain__body p + p { margin-top: 16px; } /* rich-text intro paragraphs (service areas page) */ .vgrid { display: grid; gap: 14px; margin-top: 40px; } .vcard { background: #fff; border-radius: 3px; padding: 26px 26px 30px; border-top: 6px solid var(--accent); display: grid; gap: 8px; align-content: start; } .vcard h3 { font-family: var(--display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3vw, 42px); line-height: 1; } .vcard p { color: var(--muted); font-size: 15px; } @media (min-width: 700px) { .vgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .vgrid { grid-template-columns: repeat(3, 1fr); } } .about-split { display: grid; gap: 40px; } @media (min-width: 960px) { .about-split { grid-template-columns: 1.5fr 1fr; gap: 80px; } } .mission { background: var(--asphalt-2); color: #fff; padding: clamp(70px, 9vw, 120px) 0; } .mission p.big { font-weight: 800; font-size: clamp(28px, 4vw, 56px); line-height: 1.15; letter-spacing: -.02em; max-width: 26ch; margin-top: 20px; } .why { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 0; max-width: 640px; border-top: 3px solid var(--asphalt); } .why li { padding: 18px 0; border-bottom: 1px solid var(--slab); font-weight: 700; font-size: 18px; display: flex; gap: 14px; align-items: baseline; } .why li::before { content: ""; flex: none; width: 20px; height: 4px; background: var(--accent); transform: translateY(-4px); } /* ---- hero: about 60% smaller text so the photo does the talking ---- */ .hero__title { font-size: clamp(42px, 6.2vw, 100px); max-width: 15em; } .hero__eyebrow { display: none; } /* the project name already sits in the bottom-left caption */ .hero__sub { min-height: 0; margin-top: 18px; max-width: 42ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; } .hero__actions { margin-top: 24px; } .hero__bar { margin-top: clamp(26px, 5vh, 56px); } .hero::before { background: linear-gradient(90deg, rgba(19,19,19,.70) 0%, rgba(19,19,19,.34) 40%, rgba(19,19,19,0) 72%), linear-gradient(0deg, rgba(19,19,19,.62) 0%, rgba(19,19,19,0) 38%); } .phero__title { font-size: clamp(46px, 8vw, 132px); } .phero--cat .phero__title { font-size: clamp(44px, 7.2vw, 112px); } .intro { background: var(--concrete); padding: clamp(56px, 7vw, 90px) 0 0; } .intro__in { display: grid; gap: 22px; max-width: 900px; } .intro__text p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--muted); } .intro__text p + p { margin-top: 16px; } .faqs { margin-top: 34px; max-width: 860px; border-top: 3px solid var(--asphalt); } .faq { border-bottom: 1px solid var(--slab); } .faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 800; font-size: 18px; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 30px; font-weight: 500; color: var(--accent-text); transition: transform .3s var(--ease); } .faq[open] summary::after { transform: rotate(45deg); } .faq p { padding: 0 0 24px; max-width: 70ch; color: var(--muted); } .hero__title, .hero__sub, .pj { text-shadow: 0 1px 22px rgba(0,0,0,.42); } @media (max-width: 640px) { .hero__title { font-size: clamp(38px, 10.5vw, 52px); } .hero__sub { font-size: 15px; } } .legal h2 { font-family: var(--display); font-stretch: 68%; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3vw, 38px); margin: 38px 0 10px; line-height: 1; } .legal p { color: var(--muted); max-width: 70ch; } .legal a { color: var(--asphalt); text-decoration: underline; text-underline-offset: 3px; } /* ---- phones: card grids become compact 2-column tiles ---- */ @media (max-width: 640px) { .catgrid, .pgrid, .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pgrid .card, .related .card { width: auto; } .cat__desc, .card__tags, .card__city { display: none; } .cat__body { padding: 12px 12px 14px; gap: 4px; } .cat__name { font-size: 22px; } .cat__n { font-size: 11px; margin-top: 2px; } .card__img { aspect-ratio: 1 / 1; } .card__tag { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; } .card__body { padding: 12px 12px 14px; } .card__title { font-size: 22px; } .work__track .card { width: min(72vw, 300px); } .work__track .card__tags, .work__track .card__city { display: block; } .res__grid { grid-template-columns: 1fr 1fr; gap: 8px; } } .phero--mid { min-height: 62svh; } .est--page { padding-top: calc(var(--slant) + clamp(50px, 6vw, 90px)); min-height: 0; } .pfilter { padding-top: calc(var(--slant) + 26px); position: static; } @media (min-width: 641px) { .pfilter { position: sticky; top: var(--header-h); padding-top: 30px; } } /* ========================================================================== One header for every inner page: same height, same slanted edge, light section under it ========================================================================== */ .phero, .phero--cat, .phero--mid { min-height: clamp(540px, 74svh, 800px); } .phero + .intro { padding-top: calc(var(--slant) + clamp(50px, 6vw, 80px)); } .phero + .svc { padding-top: calc(var(--slant) + clamp(60px, 8vw, 110px)); } .phero + .pfilter, .phero + .pmain { padding-top: calc(var(--slant) + 40px); } .pfilter { position: sticky; top: var(--header-h); } @media (max-width: 640px) { .pfilter { position: static; } } /* contact: light section under the header like every other page, dark text, white form card */ .est--page { background: var(--concrete); color: var(--asphalt); clip-path: none; margin-top: 0; } .est--page .lead { color: var(--muted); } .est--page .contact-lines svg { color: var(--accent-text); } .est--page .contact-lines small { color: var(--muted); } .est--page .form { background: #fff; box-shadow: 0 30px 60px -40px rgba(19,19,19,.45); } .est--page .eyebrow::before { background: var(--accent); } /* keep the slanted bottom edge of every page header visible: the header always paints above the section under it */ .phero { position: relative; z-index: 35; } .hero { z-index: 35; } /* ========================================================================== Estimate pop-up + field feedback + social icons ========================================================================== */ .emodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; } .emodal[hidden] { display: none; } .emodal__backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .emodal__panel { position: relative; width: min(680px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--concrete); border-radius: 6px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); outline: none; } .emodal__x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--asphalt); color: #fff; display: grid; place-items: center; z-index: 3; } .emodal__x:hover { background: var(--asphalt-3); } .emodal__x svg { width: 18px; } .emodal__head { padding: 30px clamp(20px, 4vw, 40px) 4px; display: grid; gap: 10px; } .emodal__head h2 { font-size: clamp(34px, 5vw, 52px); } .emodal__sub { color: var(--muted); font-size: 15px; max-width: 46ch; } .emodal__form.form { background: transparent; padding: 18px clamp(20px, 4vw, 40px) 30px; } .field__hint[hidden] { display: none; } .field__hint { font-size: 12px; color: var(--muted); line-height: 1.35; } .field__err { color: #b3261e; font-size: 13px; font-weight: 700; line-height: 1.35; } .field__err[hidden] { display: none; } .field__count { font-size: 11px; color: var(--muted); text-align: right; margin-top: -4px; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 4px rgba(179,38,30,.12); } .form .form__done { color: var(--paint); } .form .form__done p { color: var(--muted-dark); } .form .form__done path { stroke: var(--cta-dk); } .emodal .form__done { position: absolute; inset: 0; z-index: 2; } .btn[disabled] { opacity: .6; pointer-events: none; } .social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); transition: background-color .3s, color .3s, transform .3s var(--ease); } .social a:hover, .social a:focus-visible { background: var(--cta-dk); color: var(--cta-dk-ink); box-shadow: none; transform: translateY(-3px); } .social svg { width: 21px; height: 21px; } /* ---- clients: logos about 2x larger. Text on top, a full-width grid of big cards below ---- */ .clients__in { grid-template-columns: 1fr !important; gap: clamp(28px, 4vw, 48px); align-items: start; } .clients__copy { max-width: 62ch; } .clients__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 640px) { .clients__grid { grid-template-columns: repeat(4, 1fr); } } .logo { aspect-ratio: 3 / 2; padding: 0; } .logo img { inset: 10px 14px; width: calc(100% - 28px); height: calc(100% - 20px); } .logo--cta a { font-size: clamp(13px, 1.2vw, 16px); } @media (max-width: 640px) { .clients__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .logo img { inset: 8px 10px; width: calc(100% - 20px); height: calc(100% - 16px); } .logo--cta a { font-size: 13px; } } /* Featured work: whole section pins, sized to the screen; category tags stay visible */ .work__foot { display: flex; align-items: center; gap: 24px; margin-top: 28px; } .work__foot .work__hint { margin: 0; white-space: nowrap; } .work__bar { flex: 1; height: 3px; background: rgba(19,19,19,.14); border-radius: 2px; overflow: hidden; display: none; } .work__bar i { display: block; height: 100%; background: var(--cta); transform: scaleX(0); transform-origin: left; } .card__tag { font-size: 13px; padding: 7px 13px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); } @media (min-width: 900px) { .work.is-pinned { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 18px) 0 28px; box-sizing: border-box; } .work.is-pinned .work__head { margin-bottom: 26px; } .work.is-pinned .work__pin { padding: 6px 0 4px; } .work.is-pinned .work__bar { display: block; } .work.is-pinned .work__track .card { width: clamp(290px, calc(100svh - 470px), 470px); } .work.is-pinned .work__head br { display: none; } .work.is-pinned .work__head { margin-bottom: 20px; } .work.is-pinned .work__head .h2 { margin-top: 10px !important; } .work.is-pinned .card__body { padding: 16px 20px 18px; } .work.is-pinned .card__title { font-size: clamp(24px, 2.2vw, 34px); } .work.is-pinned .card__img { aspect-ratio: 4 / 3.8; } } @media (min-width: 900px) { .work.is-pinned .work__head .h2 { font-size: clamp(40px, 4.4vw, 64px); } .work.is-pinned .work__head { align-items: center; } } @media (min-width: 900px) and (max-height: 900px) { .work.is-pinned .card__tags { display: none; } .work.is-pinned .card__body { padding: 14px 18px 16px; gap: 3px; } .work.is-pinned .card__title { font-size: clamp(22px, 1.9vw, 28px); } .work.is-pinned .work__track .card { width: clamp(300px, calc(100svh - 430px), 470px); } } /* Header slideshow (Commercial, Residential, Projects) */ .phero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.09); transition: opacity 1.4s ease, transform 0s 1.4s; } .phero__slide.is-on { opacity: 1; transform: scale(1); transition: opacity 1.4s ease, transform 8s linear; } .phero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .phero__dots { position: absolute; z-index: 4; right: var(--gut); bottom: clamp(52px, 6vw, 84px); display: flex; gap: 8px; } .phero__dot { width: 34px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .phero__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.4); transition: background .3s; } .phero__dot.is-on::before { background: var(--accent); } .phero__dot:hover::before { background: #fff; } .phero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 640px) { .phero__dot { width: 26px; } .phero__dots { gap: 6px; } } @media (prefers-reduced-motion: reduce) { .phero__slide, .phero__slide.is-on { transition: none; transform: none; } } /* ========================================================================== Laravel build additions (server-rendered pages) ========================================================================== */ .js .hero:not(.is-ready) .hero__in { visibility: hidden; } /* hero text appears with its intro animation */ .menu { overflow-y: auto; } .menu__sub { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .menu__sub a { display: inline-block; padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 700; text-decoration: none; background: rgba(255,255,255,.12); color: var(--paint); } .door__link { color: inherit; text-decoration: none; } .door__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } .door__chips .chip { position: relative; z-index: 3; text-decoration: none; } .door__chips .chip:hover, .door__chips .chip:focus-visible { background: var(--cta-dk); color: var(--cta-dk-ink); } .door:focus-within::after { transform: scaleX(1); } a.fchip { display: inline-block; text-decoration: none; color: inherit; font-family: inherit; } a.fchip[aria-current="true"], a.fchip.is-active { background: var(--asphalt); color: #fff; box-shadow: none; } .preview-ribbon { position: fixed; z-index: 300; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 9px 16px; border-radius: 99px; background: #fff; color: #131313; font-size: 12px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 8px 28px rgba(0,0,0,.35); } .form__status[hidden] { display: none; } /* phone fixes: nothing may push the page wider than the screen */ .hero__bar > *, .slidebar { min-width: 0; } @media (max-width: 480px) { .dash { width: 26px; } .dashes { gap: 6px; } .slidebar { gap: 12px; } } @media (max-width: 640px) { .hubwork .card { width: auto; } } /* ---- Forms: clear boxed fields, everything aligned to the same edges (contact page + estimate pop-up) ---- */ .field input, .field textarea, .field select { background-color: #f3f4f5; border: 1.5px solid #cfd3d7; border-radius: 4px; padding: 14px 16px; min-height: 52px; box-shadow: none; } .field textarea { min-height: 120px; } .est--page .form .field input, .est--page .form .field textarea, .est--page .form .field select { background-color: #f3f4f5; } .emodal .field input, .emodal .field textarea, .emodal .field select { background-color: #fff; } .field input::placeholder, .field textarea::placeholder { color: #8b9096; opacity: 1; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; background-color: #fff6f5; box-shadow: none; } .field input:user-invalid { border-color: #cfd3d7; } .field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179,38,30,.14); } .form__row { align-items: start; } .field { align-content: start; } .field__hint, .field__err { margin: 0; } /* Commercial / Residential switch: two equal buttons */ .types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .types legend { grid-column: 1 / -1; float: none; width: auto; margin-bottom: 2px; } .type { position: relative; display: block; } .type span { display: flex; justify-content: center; width: 100%; min-height: 50px; } .est--page .form .type span, .emodal .type span { background-color: #f3f4f5; box-shadow: inset 0 0 0 1.5px #cfd3d7; } .est--page .form .type input:checked + span, .emodal .type input:checked + span { background: var(--asphalt); color: var(--paint); box-shadow: inset 0 0 0 1.5px var(--asphalt); } .form .btn, .form button[type="submit"] { width: 100%; justify-content: center; } /* readable header over bright photos: soft dark fade until the bar turns solid */ .header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 34px); z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.28) 60%, rgba(10,10,10,0) 100%); transition: opacity .3s; } .header.is-solid::before { opacity: 0; } /* comfortable tap targets on phones (links were ~20px tall) */ @media (max-width: 999px) { .footer li a, .footer address a { display: inline-block; padding-block: 9px; } .footer li + li { margin-top: 0; } .crumbs a { display: inline-block; padding: 10px 0; } .work__hint, .lead a { padding-block: 4px; } } .dash { overflow: visible; } .dash::after { content: ""; position: absolute; inset: -12px -3px; } /* hub "Featured work" grid: cards fill their column instead of keeping the scroller width */ .related__grid > .card, .hubwork .card { width: auto; min-width: 0; } /* small laptops: keep logo, centred menu and estimate button on one line */ @media (min-width: 1000px) and (max-width: 1239px) { .header__logo img { width: 136px; } .header__phone { display: none; } .nav { gap: 22px; } } /* form polish: one-line submit button on phones, counter shares the "Optional" row */ .form button[type="submit"].btn { white-space: nowrap; } @media (max-width: 480px) { .form button[type="submit"].btn { font-size: 14px; letter-spacing: .04em; padding-inline: 16px; gap: 10px; } } .field { position: relative; } .field__count { position: absolute; right: 0; bottom: 1px; margin: 0; } /* footer headings + legal link: comfortable to tap */ @media (max-width: 999px) { .footer h2 a, .footer h4 a, .footer__legal a, .footer span a { display: inline-block; padding-block: 10px; } } /* breadcrumbs: links, separators and the current page always share one baseline */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; row-gap: 0; } .crumbs > * { margin: 0; } @media (max-width: 999px) { .crumbs > span:not([aria-hidden]) { padding-block: 10px; } } /* never let a zooming photo or animation make the page scroll sideways */ html, body { overflow-x: clip; } .hero__slides { overflow: hidden; } .hero { overflow: clip; } /* clients section: two paragraphs (richtext) + a small tagline under them */ .clients__copy .lead p + p { margin-top: 14px; } .clients__tags { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }