/* ====================================================================== kit.css — Ecomrazbor website kit, cleaned for post-WP build. Sits on top of colors_and_type.css (provides --er-* tokens). Design rules: - Two breakpoints only: mobile (<= 720) and desktop (>= 721). Tablet midband 721–960 is handled via clamp() inside desktop styles. - Zero border-radius across the board (audit-mandated). - No shadows on surface UI. Drawer / dropdown allowed depth via shadow-2. - All gutters/typography flex via clamp(); no per-bp font-size cascades. Variants (applied via ): - v-cons Conservative — ink-only, monochrome. DEFAULT. - v-med Medium — single tan accent on PRIMARY CTAs. - v-bold Creative — tan + numbered sections + tan dividers. ====================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--er-bg); color: var(--er-ink); overflow-x: hidden; /* hard-stop any rogue horizontal scroll */ } img, svg { max-width: 100%; display: block; } button { font: inherit; color: inherit; } :where(a):focus-visible, :where(button):focus-visible, :where(input):focus-visible, :where(textarea):focus-visible { outline: 2px solid var(--er-ink); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- shared container helpers ---------- */ .er-wrap { max-width: var(--er-container); margin-inline: auto; padding-inline: var(--er-gutter-lg); } @media (max-width: 720px) { .er-wrap { padding-inline: var(--er-gutter); } } /* ===================================================================== HEADER ===================================================================== */ .er-header { position: sticky; top: 0; z-index: 30; background: var(--er-bg); border-bottom: 1px solid var(--er-border); } .er-header__inner { max-width: var(--er-container); margin-inline: auto; height: var(--er-header-h); padding-inline: var(--er-gutter-lg); display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); } .er-header__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--er-ink); flex-shrink: 0; } .er-header__nav { display: flex; gap: clamp(16px, 2.4vw, 40px); margin-left: auto; align-items: center; } .er-header__nav-link { font: var(--er-fw-semibold) 16px/1 var(--er-font-sans); color: var(--er-ink); text-decoration: none; transition: color var(--er-dur) var(--er-ease); padding: 6px 0; white-space: nowrap; } .er-header__nav-link:hover, .er-header__nav-link.is-active { color: var(--er-ink-hover); } .er-header__cta { margin-left: 8px; } .er-header__menu { display: none; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: var(--er-fw-semibold) 13px/1 var(--er-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--er-ink); margin-left: auto; padding: 8px 0; } /* Header CTA needs wide canvas; hide it below this threshold so the nav fits. .er-header descendant selector bumps specificity (0,2,0) above the generic .er-cta { display: inline-flex } rule that appears later in the file. */ @media (max-width: 1320px) { .er-header .er-header__cta { display: none; } } @media (max-width: 880px) { .er-header__inner { height: var(--er-header-h-sm); padding-inline: var(--er-gutter); } .er-header .er-header__nav { display: none; } .er-header .er-header__menu { display: inline-flex; } } /* ===================================================================== MOBILE NAV DRAWER (slides in from the right on mobile) ===================================================================== */ .er-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity var(--er-dur) var(--er-ease); } .er-drawer.is-open { pointer-events: auto; opacity: 1; } .er-drawer__scrim { position: absolute; inset: 0; background: rgba(13, 27, 42, .35); } .er-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: var(--er-bg); display: flex; flex-direction: column; padding: var(--er-gutter) var(--er-gutter) var(--er-space-7); transform: translateX(100%); transition: transform var(--er-dur-slow) var(--er-ease-out); } .er-drawer.is-open .er-drawer__panel { transform: translateX(0); } .er-drawer__top { display: flex; align-items: center; justify-content: space-between; height: var(--er-header-h-sm); margin-bottom: var(--er-space-5); border-bottom: 1px solid var(--er-border); } .er-drawer__close { background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: var(--er-fw-semibold) 13px/1 var(--er-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--er-ink); } .er-drawer__nav { display: flex; flex-direction: column; gap: var(--er-space-3); } .er-drawer__nav a { font: var(--er-fw-bold) clamp(24px, 6.4vw, 32px)/1.1 var(--er-font-display); color: var(--er-ink); text-decoration: none; letter-spacing: -0.01em; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--er-border-soft); } .er-drawer__nav a:last-child { border-bottom: 0; } .er-drawer__nav a:hover { color: var(--er-ink-hover); } .er-drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--er-space-3); padding-top: var(--er-space-5); border-top: 1px solid var(--er-border-soft); } .er-drawer__tel { font: var(--er-fw-bold) 18px/1 var(--er-font-display); color: var(--er-ink); text-decoration: none; font-variant-numeric: tabular-nums; } .er-drawer__label { font: var(--er-fw-semibold) 11px/1 var(--er-font-sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--er-fg-2); } body.er-locked { overflow: hidden; } /* ===================================================================== SECTION (left-third title + body) ===================================================================== */ .er-section { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: clamp(32px, 5vw, 96px); row-gap: var(--er-space-5); padding-block: var(--er-section-y); padding-inline: var(--er-gutter-lg); max-width: var(--er-container); margin-inline: auto; } .er-section.is-dense { padding-block: clamp(32px, 5vw, 64px); } .er-section.is-single { grid-template-columns: 1fr; } .er-section__title h2 { font: var(--er-fw-bold) var(--er-h4) / var(--er-lh-snug) var(--er-font-display); letter-spacing: var(--er-tracking-tight); color: var(--er-ink); margin: 0; text-wrap: balance; } .er-section__eyebrow { font: var(--er-fw-semibold) 12px/1 var(--er-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-fg-2); margin-bottom: var(--er-space-3); } .er-section__body { font-size: var(--er-text-base); line-height: var(--er-lh-loose); color: var(--er-ink); } .er-section__body p { margin: 0 0 var(--er-space-5); } .er-section__body p:last-child { margin-bottom: 0; } /* Big numbered section index (used in v-bold). */ .er-section__num { font: var(--er-fw-bold) clamp(40px, 5vw, 72px)/1 var(--er-font-display); color: var(--er-ink); letter-spacing: -0.02em; margin-bottom: var(--er-space-3); display: none; /* hidden by default, enabled by .v-bold */ font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .er-section { grid-template-columns: 1fr; padding-inline: var(--er-gutter); padding-block: clamp(48px, 12vw, 80px); row-gap: var(--er-space-5); } .er-section__title h2 { font-size: clamp(28px, 7vw, 36px); } } /* ===================================================================== HERO ===================================================================== */ .er-hero { max-width: var(--er-container); margin-inline: auto; padding: clamp(40px, 5vw, 80px) var(--er-gutter-lg) clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 96px); row-gap: var(--er-space-5); align-items: start; } .er-hero h1 { margin: 0; font: var(--er-fw-bold) clamp(40px, 6.4vw, 96px) / 1 var(--er-font-display); letter-spacing: var(--er-tracking-tight); color: var(--er-ink); overflow-wrap: break-word; text-wrap: balance; } .er-hero__copy { font-size: var(--er-text-base); line-height: var(--er-lh-normal); color: var(--er-ink); } .er-hero__copy p { margin: 0 0 var(--er-space-5); } .er-hero__copy .er-cta { margin-top: var(--er-space-4); } .er-hero__photo { margin-top: var(--er-space-5); grid-column: 1 / -1; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 720px) { .er-hero { grid-template-columns: 1fr; padding: var(--er-space-6) var(--er-gutter) var(--er-space-5); } .er-hero__photo { aspect-ratio: 4 / 3; } } /* ===================================================================== CTA ===================================================================== */ .er-cta { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: var(--er-fw-semibold) 13px/1 var(--er-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-ink); background: none; border: 0; cursor: pointer; transition: color var(--er-dur) var(--er-ease), border-color var(--er-dur) var(--er-ease), background-color var(--er-dur) var(--er-ease); white-space: nowrap; } .er-cta--ghost { padding: 12px 0 8px; border-bottom: 1px solid var(--er-ink); } .er-cta--ghost:hover { color: var(--er-ink-hover); border-color: var(--er-ink-hover); } .er-cta--solid { background: var(--er-ink); color: var(--er-ink-on-dark); padding: 16px 26px; border: 1px solid var(--er-ink); } .er-cta--solid:hover { background: var(--er-ink-hover); border-color: var(--er-ink-hover); color: var(--er-ink-on-dark); } .er-cta--outline { padding: 16px 26px; border: 1px solid var(--er-ink); } .er-cta--outline:hover { background: var(--er-ink); color: var(--er-ink-on-dark); } /* Primary CTA — variant-specific styling applied below. */ .er-cta--primary { padding: 16px 26px; border: 1px solid var(--er-ink); background: var(--er-ink); color: var(--er-ink-on-dark); } .er-cta--primary:hover { background: var(--er-ink-hover); border-color: var(--er-ink-hover); } /* Inline link (in body copy). */ .er-inline-link { color: var(--er-ink); text-decoration: none; border-bottom: 1px solid var(--er-ink); padding-bottom: 1px; display: inline-flex; gap: 4px; align-items: baseline; transition: color var(--er-dur) var(--er-ease), border-color var(--er-dur) var(--er-ease); } .er-inline-link:hover { color: var(--er-ink-hover); border-color: var(--er-ink-hover); } /* ===================================================================== STATS ===================================================================== */ .er-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); } .er-stats__num { font: var(--er-fw-bold) clamp(36px, 5vw, 72px)/1 var(--er-font-display); color: var(--er-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: var(--er-space-3); } .er-stats__body { font-size: 15px; line-height: 1.55; color: var(--er-ink); max-width: 36ch; } @media (max-width: 880px) { .er-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .er-stats { grid-template-columns: 1fr; gap: var(--er-space-5); } } /* ===================================================================== TEAM ===================================================================== */ .er-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); } .er-team__card { display: flex; flex-direction: column; gap: var(--er-space-3); } .er-team__photo { aspect-ratio: 1 / 1; background: var(--er-paper-2); background-size: cover; background-position: center; background-repeat: no-repeat; } .er-team__name { font: var(--er-fw-semibold) 18px/1.2 var(--er-font-sans); color: var(--er-ink); padding-top: var(--er-space-2); } .er-team__bio { font-size: 14px; line-height: 1.55; color: var(--er-ink); } @media (max-width: 880px) { .er-team { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .er-team { grid-template-columns: 1fr; } } /* ===================================================================== INFO BOX GRID ===================================================================== */ .er-ibg { display: grid; gap: var(--er-space-7) var(--er-space-5); grid-template-columns: repeat(var(--ibg-cols, 4), 1fr); } .er-ib { display: flex; flex-direction: column; gap: var(--er-space-3); } .er-ib__glyph { width: 56px; height: 56px; border: 1px solid var(--er-ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--er-space-2); color: var(--er-ink); } .er-ib__title { margin: 0; font: var(--er-fw-semibold) 18px/1.3 var(--er-font-sans); color: var(--er-ink); } .er-ib__body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--er-ink); } @media (max-width: 960px) { .er-ibg { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .er-ibg { grid-template-columns: 1fr; gap: var(--er-space-6); } } /* ===================================================================== RULES (numbered category list) ===================================================================== */ .er-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--er-border); } .er-rules li { display: grid; grid-template-columns: 64px 220px 1fr; column-gap: var(--er-space-6); row-gap: var(--er-space-3); padding: var(--er-space-6) 0; border-bottom: 1px solid var(--er-border); align-items: start; } .er-rules__num { font: var(--er-fw-semibold) 13px/1 var(--er-font-sans); color: var(--er-fg-2); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding-top: 8px; } .er-rules__title { font: var(--er-fw-semibold) 20px/1.25 var(--er-font-sans); color: var(--er-ink); } .er-rules__body { font-size: 15px; line-height: 1.55; color: var(--er-ink); max-width: 60ch; } @media (max-width: 720px) { .er-rules li { grid-template-columns: 44px 1fr; padding: var(--er-space-5) 0; } .er-rules__body { grid-column: 1 / -1; } .er-rules__num { padding-top: 4px; } .er-rules__title { font-size: 18px; } } /* ===================================================================== BRAND PAGES — Section head + tabs ===================================================================== */ .er-subhead { max-width: var(--er-container); margin-inline: auto; padding: var(--er-space-5) var(--er-gutter-lg) 0; } @media (max-width: 720px) { .er-subhead { padding-inline: var(--er-gutter); } } .er-subhead__back { font: var(--er-fw-semibold) 13px/1 var(--er-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-ink); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; padding: var(--er-space-2) 0 var(--er-space-5); transition: color var(--er-dur) var(--er-ease); } .er-subhead__back:hover { color: var(--er-ink-hover); } .er-subhead__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--er-space-6); padding-bottom: var(--er-space-4); border-bottom: 1px solid var(--er-border); } .er-subhead__tab { font: var(--er-fw-semibold) 16px/1.2 var(--er-font-sans); color: rgba(13, 27, 42, .4); text-decoration: none; padding: 4px 0; transition: color var(--er-dur) var(--er-ease); display: inline-flex; align-items: baseline; gap: 6px; } .er-subhead__tab:hover { color: var(--er-ink-hover); } .er-subhead__tab.is-active { color: var(--er-ink); } @media (max-width: 540px) { .er-subhead__tabs { grid-template-columns: 1fr; gap: var(--er-space-3); } .er-subhead__tab.is-active::before { content: "→"; margin-right: 6px; } } /* ===================================================================== PHOTO / COLLAGE ===================================================================== */ .er-photo { background: var(--er-paper-2); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; } .er-collage { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--er-space-3); } .er-collage > .er-photo[data-span] { grid-column: span var(--span, 6); } .er-collage > .er-photo[data-span="3"] { --span: 3; } .er-collage > .er-photo[data-span="4"] { --span: 4; } .er-collage > .er-photo[data-span="5"] { --span: 5; } .er-collage > .er-photo[data-span="6"] { --span: 6; } .er-collage > .er-photo[data-span="7"] { --span: 7; } .er-collage > .er-photo[data-span="8"] { --span: 8; } .er-collage > .er-photo[data-span="9"] { --span: 9; } .er-collage > .er-photo[data-span="12"] { --span: 12; } @media (max-width: 720px) { .er-collage { grid-template-columns: repeat(6, 1fr); gap: var(--er-space-2); } .er-collage > .er-photo[data-span] { --span: 6; } .er-collage > .er-photo[data-span="3"], .er-collage > .er-photo[data-span="4"] { --span: 3; } } /* ===================================================================== BRAND CARD (home page teaser & /brendi/ index) ===================================================================== */ .er-brand-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--er-border-soft); align-items: center; } .er-brand-card:first-child { border-top: 0; padding-top: var(--er-space-5); } .er-brand-card__hero { aspect-ratio: 3 / 4; background-size: cover; background-position: center; } .er-brand-card__copy h3 { margin: 0 0 var(--er-space-4); font: var(--er-fw-bold) clamp(28px, 3vw, 44px)/1.05 var(--er-font-display); letter-spacing: -0.01em; color: var(--er-ink); } .er-brand-card__copy p { font-size: 16px; line-height: 1.6; color: var(--er-ink); } @media (max-width: 720px) { .er-brand-card { grid-template-columns: 1fr; gap: var(--er-space-4); } /* Always put photo first regardless of source order — prevents the reverse-layout card from collapsing copy-above-photo on mobile. */ .er-brand-card .er-brand-card__hero { order: -1; aspect-ratio: 4 / 3; } } /* ===================================================================== CONTACT FORM ===================================================================== */ .er-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--er-space-5); } .er-field { display: flex; flex-direction: column; gap: 6px; } .er-field--full { grid-column: 1 / -1; } .er-field__label { font: var(--er-fw-semibold) 11px/1 var(--er-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--er-fg-2); } .er-field__input, .er-field__textarea { font: var(--er-fw-regular) 16px/1.4 var(--er-font-sans); color: var(--er-ink); background: transparent; border: 0; border-bottom: 2px solid var(--er-ink); border-radius: 0; padding: 12px 0; appearance: none; -webkit-appearance: none; transition: border-color var(--er-dur) var(--er-ease); } .er-field__input::placeholder, .er-field__textarea::placeholder { color: var(--er-fg-3); } .er-field__input:focus, .er-field__textarea:focus { outline: 0; border-color: var(--er-ink); } .er-field__textarea { min-height: 96px; resize: vertical; } .er-form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--er-space-4); padding-top: var(--er-space-3); flex-wrap: wrap; } .er-form__fine { font-size: 12px; line-height: 1.5; color: var(--er-fg-2); max-width: 48ch; } .er-form__fine a { color: var(--er-ink); } .er-form__success { grid-column: 1 / -1; padding: var(--er-space-5); border: 1px solid var(--er-ink); font-size: 16px; line-height: 1.5; } @media (max-width: 540px) { .er-form { grid-template-columns: 1fr; } .er-form__foot { flex-direction: column; align-items: flex-start; } } /* ===================================================================== FOOTER ===================================================================== */ .er-mega-wordmark { font: var(--er-fw-extrabold) clamp(40px, 6.5vw, 112px)/0.88 var(--er-font-display); letter-spacing: var(--er-tracking-mega); color: var(--er-ink); text-transform: uppercase; padding: var(--er-space-7) clamp(16px, 3vw, 40px) 0 max(var(--er-gutter-lg), calc((100% - var(--er-container)) / 2 + var(--er-gutter-lg))); white-space: nowrap; overflow: hidden; width: 100%; display: block; } .er-footer { background: var(--er-bg); padding-bottom: var(--er-space-6); } .er-footer__row { max-width: var(--er-container); margin-inline: auto; padding: var(--er-space-5) var(--er-gutter-lg) var(--er-space-3); display: grid; grid-template-columns: 1fr auto; gap: var(--er-space-5); align-items: end; border-top: 1px solid var(--er-border-soft); } .er-footer__menu { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); } .er-footer__menu a { font: var(--er-fw-medium) 14px/1.5 var(--er-font-sans); color: var(--er-fg-2); text-decoration: none; transition: color var(--er-dur) var(--er-ease); } .er-footer__menu a:hover { color: var(--er-ink); } .er-footer__tel { font: var(--er-fw-semibold) 14px/1 var(--er-font-sans); color: var(--er-ink); font-variant-numeric: tabular-nums; text-decoration: none; } .er-footer__fine { max-width: var(--er-container); margin-inline: auto; padding: 0 var(--er-gutter-lg); font-size: 11px; color: var(--er-fg-2); letter-spacing: 0.03em; } @media (max-width: 720px) { .er-footer__row { grid-template-columns: 1fr; align-items: start; padding-inline: var(--er-gutter); } .er-footer__fine { padding-inline: var(--er-gutter); } } /* ===================================================================== VARIANT OVERRIDES ===================================================================== */ /* ---------- v-med — single tan accent on PRIMARY CTAs ---------- */ .v-med .er-cta--primary { background: var(--er-tan); border-color: var(--er-tan); color: var(--er-ink); } .v-med .er-cta--primary:hover { background: var(--er-tan-hover); border-color: var(--er-tan-hover); color: var(--er-ink); } .v-med .er-section__eyebrow { color: var(--er-ink); } /* ---------- v-bold — numbered sections, tan accents, divider stripes ---------- */ .v-bold .er-section__num { display: block; } .v-bold .er-section__title h2 { font-size: var(--er-h3); } .v-bold .er-cta--primary, .v-bold .er-cta--solid { background: var(--er-tan); border-color: var(--er-tan); color: var(--er-ink); } .v-bold .er-cta--primary:hover, .v-bold .er-cta--solid:hover { background: var(--er-tan-hover); border-color: var(--er-tan-hover); } .v-bold .er-cta--ghost:hover { color: var(--er-ink); border-color: var(--er-tan); } .v-bold .er-inline-link { border-bottom-color: var(--er-tan); } .v-bold .er-inline-link:hover { color: var(--er-ink); border-bottom-color: var(--er-tan-hover); } .v-bold .er-section + .er-section { position: relative; } .v-bold .er-section + .er-section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 2px; background: var(--er-tan); } .v-bold .er-rules__num { color: var(--er-tan); font-weight: var(--er-fw-bold); font-size: 15px; } .v-bold .er-stats__num { border-bottom: 2px solid var(--er-tan); display: inline-block; padding-bottom: var(--er-space-2); } /* === post-WP reconciliation additions (monochrome v-cons) === */ .er-ibg.is-numbered .er-ib { gap: var(--er-space-3); } .er-ib__num{ font: var(--er-fw-bold) clamp(28px,3vw,40px)/1 var(--er-font-display); color: var(--er-ink); letter-spacing:-0.01em; font-variant-numeric: tabular-nums; padding-bottom: var(--er-space-3); margin-bottom: var(--er-space-2); border-bottom:1px solid var(--er-border); width:max-content; min-width:1.6em; } .er-collage--three{ grid-template-columns: repeat(3,1fr); } .er-collage--three > .er-photo{ grid-column:auto; } @media (max-width:720px){ .er-collage--three{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .er-collage--three{ grid-template-columns:1fr; } } .er-shots{ display:flex; flex-direction:column; gap:var(--er-space-6); border-top:1px solid var(--er-border); padding-top:var(--er-space-7); margin-top:var(--er-space-8); } .er-shots__lead{ max-width:60ch; } .er-shots__lead p{ margin:0; font-size:15px; line-height:1.55; color:var(--er-ink); } .er-shots__lead .er-section__eyebrow{ margin-bottom:var(--er-space-2); } .er-shots__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--er-space-5) var(--er-space-4); } .er-shots__cell{ margin:0; display:flex; flex-direction:column; gap:var(--er-space-2); } .er-shots__img{ width:100%; aspect-ratio:1/2; background:var(--er-paper-2); background-size:cover; background-position:center; background-repeat:no-repeat; border:1px solid var(--er-border-soft); } .er-shots__cell figcaption{ font-size:12px; line-height:1.4; color:var(--er-fg-2); } @media (max-width:760px){ .er-shots__grid{ grid-template-columns:1fr; max-width:380px; margin-inline:auto; } } @media (max-width:480px){ .er-shots__grid{ grid-template-columns:1fr; } } @media (max-width:720px){ .er-mega-wordmark{ padding-left: var(--er-gutter); } } /* === FOOTER redesign: dark band (V2) === */ .er-footer{ background:var(--er-ink); color:#fff; padding-bottom:0; } .er-footer__in{ max-width:var(--er-container); margin-inline:auto; padding:var(--er-space-8) var(--er-gutter-lg); display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:var(--er-space-7); } .er-footer__brandname{ font:var(--er-fw-extrabold) 24px/1 var(--er-font-display); letter-spacing:-.01em; text-transform:uppercase; color:#fff; } .er-footer__tag{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.6); max-width:34ch; margin:var(--er-space-4) 0 0; } .er-footer__ch{ font:var(--er-fw-semibold) 11px/1 var(--er-font-sans); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:var(--er-space-4); } .er-footer__nav{ display:flex; flex-direction:column; gap:var(--er-space-3); } .er-footer__nav a{ font:var(--er-fw-medium) 15px/1 var(--er-font-sans); color:rgba(255,255,255,.85); text-decoration:none; transition:color var(--er-dur) var(--er-ease); } .er-footer__nav a:hover{ color:#fff; } .er-footer__tel{ font:var(--er-fw-bold) 20px/1 var(--er-font-display); color:#fff; text-decoration:none; font-variant-numeric:tabular-nums; display:block; } .er-footer__cta{ display:inline-flex; gap:8px; align-items:center; margin-top:var(--er-space-4); font:var(--er-fw-semibold) 13px/1 var(--er-font-sans); letter-spacing:.06em; text-transform:uppercase; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:6px; transition:border-color var(--er-dur) var(--er-ease); } .er-footer__cta:hover{ border-color:#fff; } .er-footer__bottom{ border-top:1px solid rgba(255,255,255,.15); } .er-footer__fine{ max-width:var(--er-container); margin-inline:auto; padding:var(--er-space-4) var(--er-gutter-lg); font-size:12px; color:rgba(255,255,255,.5); letter-spacing:.03em; } @media (max-width:880px){ .er-footer__in{ grid-template-columns:1fr 1fr; } .er-footer__brand{ grid-column:1 / -1; } } @media (max-width:720px){ .er-footer__in, .er-footer__fine{ padding-inline:var(--er-gutter); } } @media (max-width:560px){ .er-footer__in{ grid-template-columns:1fr; gap:var(--er-space-6); } } .er-tools{ border-top:1px solid var(--er-border); padding-top:var(--er-space-7); margin-top:var(--er-space-8); } .er-tools .er-section__eyebrow{ margin-bottom:var(--er-space-3); } .er-tools p{ margin:0; font-size:15px; line-height:1.6; color:var(--er-ink); max-width:72ch; }