/* ──────────────────────────────────────────────── Farlane Consulting · "Modern boutique" Production stylesheet — tokens ported verbatim from design_system/styles.css + tokens/*.css (values are final). ──────────────────────────────────────────────── */ /* Self-hosted variable fonts (no third-party requests; see /trust) */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans-latin.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); } :root { /* Type */ --f-display: "Hanken Grotesk", -apple-system, sans-serif; --f-body: "Instrument Sans", -apple-system, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; --t-display-xl: clamp(56px, 7vw, 120px); --t-display-lg: clamp(40px, 4.5vw, 68px); --t-display-md: clamp(28px, 3vw, 44px); --t-lead: 19px; --t-body: 15.5px; --t-small: 13px; --t-label: 11.5px; /* Palette */ --porcelain: #F5F4F0; --porcelain-2: #ECEAE3; --teal: #063A38; --teal-2: #0B4A47; --teal-3: #11605C; --coral: #FF6B4A; --coral-deep: #D14A2C; --mist: #C9D6D2; --ink: #131A18; --ink-muted: #4E5A56; --ink-faint: #8C9793; --paper: #F2F1EB; --paper-muted: #9FB4AF; --line: rgba(6, 58, 56, 0.14); --line-strong: rgba(6, 58, 56, 0.3); --line-on-dark: rgba(242, 241, 235, 0.14); --ok: #2E7D5B; --warn: #C07A2A; --risk: #C24A33; /* Radius */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Shadow */ --sh-1: 0 1px 3px rgba(6,58,56,0.07), 0 0 0 1px var(--line); --sh-2: 0 10px 30px rgba(6,58,56,0.10), 0 0 0 1px var(--line); --sh-3: 0 28px 64px rgba(6,58,56,0.16); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur-base: 300ms; --dur-slow: 500ms; /* Layout */ --w-text: 720px; --w-default: 1240px; --w-wide: 1400px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--porcelain); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); -webkit-font-smoothing: antialiased; } ::selection { background: var(--coral); color: #fff; } /* ── Language switching (dual NL/EN markup, toggled on ) ── */ html[data-lang="en"] .nl { display: none !important; } html[data-lang="nl"] .en { display: none !important; } a { color: var(--coral-deep); text-decoration: none; transition: color var(--dur-fast); } a:hover { color: var(--teal); } @keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .container { max-width: var(--w-default); margin: 0 auto; padding: 0 28px; } .container--text { max-width: var(--w-text); } /* ── Header ── */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(245,244,240,0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; } .header__brand { display: flex; align-items: center; gap: 12px; } a.header__brand:hover .header__name { color: var(--ink); } .header__icon { width: 30px; height: 30px; display: block; flex: none; } .header__name { font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .nav { display: flex; align-items: center; gap: 32px; } .nav__link { font-size: 14.5px; font-weight: 500; color: var(--ink-muted); } .nav__link:hover { color: var(--ink); } /* ── Language flip button ── */ .lang-toggle { display: inline-flex; align-items: center; padding: 3px; margin: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; transition: border-color var(--dur-fast) var(--ease); } .lang-toggle:hover { border-color: var(--line-strong); } .lang-toggle__opt { padding: 5px 11px; border-radius: var(--r-pill); color: var(--ink-faint); transition: all var(--dur-fast) var(--ease); } html[data-lang="en"] .lang-toggle__opt--en, html[data-lang="nl"] .lang-toggle__opt--nl { background: var(--teal); color: var(--paper); } /* ── Buttons (pills) ── */ .btn { display: inline-block; font-family: var(--f-display); font-weight: 600; border-radius: var(--r-pill); transition: all var(--dur-fast) var(--ease); } .btn:active { transform: scale(0.98); } .btn--nav { background: var(--teal); color: var(--paper); font-size: 14px; padding: 11px 24px; } .btn--nav:hover { background: var(--teal-3); color: var(--paper); } .btn--primary { background: var(--teal); color: var(--paper); font-size: 15px; padding: 15px 32px; } .btn--primary:hover { background: var(--teal-3); color: var(--paper); transform: translateY(-1px); } .btn--primary:active { transform: scale(0.98); } .btn--outline { background: transparent; color: var(--teal); border: 1.5px solid var(--line-strong); font-size: 15px; padding: 13.5px 32px; } .btn--outline:hover { border-color: var(--teal); color: var(--teal); } .btn--coral { background: var(--coral); color: #fff; font-size: 15px; padding: 15px 34px; } .btn--coral:hover { background: var(--coral-deep); color: #fff; transform: translateY(-1px); } .btn--coral:active { transform: scale(0.98); } /* ── Shared text styles ── */ .eyebrow { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 14px; } .mono-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .accent { color: var(--coral); } /* ── Hero ── */ .hero { padding: 176px 28px 96px; } .hero .container { padding: 0; } .hero__title { margin: 0; max-width: 1060px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-display-xl); line-height: 0.95; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; animation: fadeup var(--dur-slow) var(--ease) 70ms both; } .hero__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; margin-top: 56px; align-items: end; animation: fadeup var(--dur-slow) var(--ease) 140ms both; } .hero__lead { margin: 0; max-width: 580px; font-size: var(--t-lead); line-height: 1.62; color: var(--ink-muted); text-wrap: pretty; } .hero__ctas { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; } /* ── Bento stat grid ── */ .bento { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 80px; animation: fadeup var(--dur-slow) var(--ease) 210ms both; } .bento__card { border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; } .bento__card--teal { background: var(--teal); padding: 36px; min-height: 260px; } .bento__card--photo { padding: 0; overflow: hidden; border: 1px solid var(--line); min-height: 260px; } .bento__card--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .bento__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .bento__card--teal .bento__label { color: var(--paper-muted); } .bento__stat { font-family: var(--f-display); font-weight: 700; font-size: 64px; letter-spacing: -0.03em; line-height: 1; color: var(--paper); } .bento__stat-sub { font-size: 14px; color: var(--paper-muted); margin-top: 8px; } /* ── Positioning ── */ .positioning { padding: 0 28px 128px; } .positioning .container { padding: 0; } .positioning__panel { background: var(--porcelain-2); border-radius: var(--r-xl); padding: 72px 64px; } .positioning__title { margin: 0 0 24px; font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.5vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); } .positioning__intro { margin: 0 0 28px; max-width: 640px; font-size: var(--t-lead); line-height: 1.62; color: var(--ink-muted); text-wrap: pretty; } .positioning__quote { margin: 0 0 40px; max-width: 820px; font-family: var(--f-display); font-weight: 650; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } .positioning__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; } .positioning__body { margin: 0; font-size: var(--t-body); line-height: 1.62; color: var(--ink-muted); text-wrap: pretty; } /* ── Services ── */ .services { padding: 96px 28px 128px; } .services .container { padding: 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; } .section-head__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--t-display-lg); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); } .section-head__lead { margin: 0; max-width: 420px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; } .services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .service-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; transition: all var(--dur-fast) var(--ease); } .service-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .service-card__meta { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; } .service-card__reg { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .service-card__title { margin: 0 0 12px; font-family: var(--f-display); font-weight: 650; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .service-card__tagline { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--ink); text-wrap: pretty; } .service-card--teal .service-card__tagline { color: var(--paper); } .service-card__body { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-muted); text-wrap: pretty; } .service-card__body + .service-card__body { margin-top: 12px; } .service-card--teal { background: var(--teal); border: none; } .service-card--teal:hover { box-shadow: var(--sh-3); } .service-card--teal .service-card__reg { color: var(--paper-muted); } .service-card--teal .service-card__title { color: var(--paper); } .service-card--teal .service-card__body { color: var(--paper-muted); } /* ── Instruments strip ── */ .instruments { margin-top: 20px; background: var(--porcelain-2); border-radius: var(--r-lg); padding: 44px 48px; } .instruments__role { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 12px; } .instruments__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; } .instruments__title { margin: 0; font-family: var(--f-display); font-weight: 650; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); } .instruments__lead { margin: 0; font-size: 14px; color: var(--ink-muted); } .instruments__lead--mono, .instruments__lead { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } .instruments__body { margin: 0; max-width: 720px; font-size: 14.5px; line-height: 1.62; color: var(--ink-muted); text-wrap: pretty; } /* ── Section CTA row ── */ .section-cta { margin-top: 28px; } /* ── Showcase (full-width image panel) ── */ .showcase { padding: 0 28px 128px; } .showcase .container { padding: 0; } .showcase__panel { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); } .showcase__panel img { width: 100%; height: clamp(260px, 40vw, 480px); object-fit: cover; display: block; } /* ── Approach ── */ .approach { padding: 0 28px 128px; } .approach .container { padding: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .approach__sticky { position: sticky; top: 120px; } .approach__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.5vw, 52px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); } .approach__photo { margin-top: 36px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); } .approach__photo img { width: 100%; height: 300px; object-fit: cover; display: block; } .approach__cards { display: flex; flex-direction: column; gap: 20px; } .approach__principles-label { margin-top: 16px; font-size: var(--t-label); letter-spacing: 0.16em; color: var(--coral-deep); } .approach-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; } .approach-card__body--follow { margin-top: 14px; } .approach-card__title { margin: 0 0 10px; font-family: var(--f-display); font-weight: 650; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); } .approach-card__body { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-muted); text-wrap: pretty; } /* ── Profile ── */ .profile { padding: 0 28px 128px; } .profile .container { padding: 0; } .profile__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; } .profile__role { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 12px; } .profile__name { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; color: var(--ink); } .profile__body { margin: 20px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-muted); text-wrap: pretty; } .profile__rows { display: flex; flex-direction: column; } .fact-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; } .fact-row:last-child { border-bottom: 1px solid var(--line); } .fact-row__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); flex: none; } .fact-row__value { font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: right; } /* ── Contact ── */ .contact { padding: 0 28px 96px; } .contact .container { padding: 0; } .contact__panel { background: var(--teal); border-radius: var(--r-xl); padding: 80px 64px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } .contact__eyebrow { color: var(--coral); margin-bottom: 16px; } .contact__title { margin: 0 0 20px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-display-lg); line-height: 0.98; letter-spacing: -0.03em; color: var(--paper); text-wrap: balance; } .contact__lead { margin: 0 0 40px; max-width: 480px; font-size: var(--t-body); line-height: 1.62; color: var(--paper-muted); text-wrap: pretty; } .contact__rows { display: flex; flex-direction: column; gap: 16px; } .contact-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-on-dark); padding-bottom: 14px; } .contact-row:last-child { border-bottom: none; padding-bottom: 0; } .contact-row__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted); } .contact-row__value { font-size: 14.5px; font-weight: 500; color: var(--paper); } .contact-row__value--right { text-align: right; } .contact-row__value--mono { font-family: var(--f-mono); font-size: 13px; font-weight: 400; } a.contact-row__value:hover { color: var(--coral); } /* ── Contact form (on teal) ── */ .form { display: flex; flex-direction: column; gap: 14px; } .form__field { display: flex; flex-direction: column; gap: 6px; } .form__field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-muted); } .form__field input, .form__field textarea { background: rgba(242, 241, 235, 0.06); border: 1px solid var(--line-on-dark); border-radius: var(--r-sm); padding: 11px 14px; font-family: var(--f-body); font-size: 14.5px; color: var(--paper); transition: border-color var(--dur-fast) var(--ease); resize: vertical; } .form__field input:focus, .form__field textarea:focus { outline: none; border-color: var(--coral); } .form__hp { position: absolute; left: -9999px; top: auto; height: 1px; overflow: hidden; } .form__submit { align-self: flex-start; margin-top: 6px; border: none; cursor: pointer; } .form__submit:disabled { opacity: 0.6; cursor: wait; } .form__note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--paper-muted); } .form__note a { color: var(--paper); text-decoration: underline; } .form__note a:hover { color: var(--coral); } .form__status { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 500; } .form__status--ok { color: var(--mist); } .form__status--error, .form__status--captcha { color: var(--coral); } /* Full width of the fields; the widget hides itself once it has solved. */ .form__turnstile { width: 100%; } .form__turnstile[hidden] { display: none; } .form__status a { color: var(--paper); text-decoration: underline; } /* ── Footer ── */ .footer { padding: 0 28px 48px; } .footer .container { padding: 0; } /* Three equal thirds: address, company details, site links. */ .footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--line); padding-top: 36px; margin-bottom: 36px; } .footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .footer__icon { width: 24px; height: 24px; display: block; flex: none; } .footer__name { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .footer__text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); } .footer__text a { color: var(--ink-muted); } .footer__text a:hover { color: var(--teal); } .footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; } .footer__copy { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); } /* ── Insights ── */ .insights { padding: 0 28px 128px; } .insights .container { padding: 0; } .insights__lead { display: block; max-width: 640px; margin: 0 0 40px; } .insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .insight-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: all var(--dur-fast) var(--ease); } a.insight-card { color: inherit; } a.insight-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); color: inherit; } .insight-card__title { margin: 0 0 10px; font-family: var(--f-display); font-weight: 650; font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); text-wrap: balance; } .insight-card__body { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; } .insight-card__more { margin-top: auto; font-family: var(--f-display); font-weight: 600; font-size: 14.5px; color: var(--teal); } .insight-card--soon { background: var(--porcelain-2); border: none; } .insight-card--soon .insight-card__title { color: var(--ink-muted); } /* ── Download panel (on insight pages) ── */ .download-panel { margin-top: 56px; background: var(--teal); border-radius: var(--r-lg); padding: 44px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; } .download-panel__title { margin: 0 0 10px; font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--paper); } .download-panel__lead { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--paper-muted); } .form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--paper-muted); cursor: pointer; } .form__consent input { margin-top: 2px; accent-color: var(--coral); } /* ── Page banner image ── */ .page-banner { margin: 0 0 40px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); } .page-banner img { width: 100%; height: clamp(180px, 26vw, 300px); object-fit: cover; display: block; } /* ── Trust strip (mono badges) ── */ .trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; } .trust-strip__item { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); background: var(--porcelain-2); border-radius: var(--r-pill); padding: 8px 16px; } /* ── Footer link row (subpages) ── */ .footer__links { font-size: 12.5px; color: var(--ink-muted); } .footer__links a { color: var(--ink-muted); } .footer__links a:hover { color: var(--teal); } /* ── Prose page (privacy) ── */ .prose-page { padding: 152px 28px 96px; } .prose-page__title { margin: 0 0 32px; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); } .prose h2 { margin: 32px 0 10px; font-family: var(--f-display); font-weight: 650; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); } .prose p { margin: 0 0 14px; font-size: var(--t-body); line-height: 1.65; color: var(--ink-muted); text-wrap: pretty; } .prose__standfirst { font-size: var(--t-lead); font-weight: 500; color: var(--ink); } .prose__updated { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); margin-top: 36px; } .profile__cta { margin-top: 24px; } /* ── Responsive (README: collapse to single column below ~900px; use judgment) ── */ @media (max-width: 900px) { .nav { gap: 12px; } .nav__link { display: none; } .hero { padding: 144px 28px 72px; } .hero__row { grid-template-columns: 1fr; gap: 32px; } .hero__ctas { justify-content: flex-start; } .bento { grid-template-columns: 1fr; margin-top: 56px; } .bento__card--photo { min-height: 220px; } .services { padding: 72px 28px 96px; } .services__grid { grid-template-columns: 1fr; } .instruments { padding: 32px 28px; } .showcase { padding: 0 28px 96px; } .profile { padding: 0 28px 96px; } .profile__panel { grid-template-columns: 1fr; padding: 48px 28px; gap: 32px; } .approach { padding: 0 28px 96px; } .approach__photo { display: none; } .approach .container { grid-template-columns: 1fr; gap: 32px; } .approach__sticky { position: static; } .positioning { padding: 0 28px 96px; } .positioning__panel { padding: 48px 28px; } .positioning__cols { grid-template-columns: 1fr; gap: 20px; } .insights { padding: 0 28px 96px; } .insights__grid { grid-template-columns: 1fr; } .download-panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; } .footer__grid { grid-template-columns: 1fr; gap: 20px; } .contact__panel { grid-template-columns: 1fr; padding: 48px 28px; gap: 40px; } } /* ── Small phones ── */ @media (max-width: 560px) { .header .container { padding: 0 20px; } .btn--nav { font-size: 13px; padding: 9px 16px; } .lang-toggle__opt { padding: 4px 9px; } .hero { padding: 124px 20px 64px; } .hero__title { font-size: clamp(38px, 12.5vw, 56px); } .hero__lead { font-size: 17px; } .hero__ctas .btn { flex: 1 1 auto; text-align: center; } .bento { gap: 16px; } .bento__card--teal { padding: 28px; min-height: 0; } .bento__card { padding: 26px; } .bento__card--photo { padding: 0; min-height: 180px; } .bento__stat { font-size: 52px; } .services { padding: 64px 20px 80px; } .section-head { margin-bottom: 36px; } .service-card { padding: 28px; } .instruments { padding: 28px 20px; } .showcase { padding: 0 20px 80px; } .profile { padding: 0 20px 80px; } .profile__panel { padding: 36px 22px; border-radius: var(--r-lg); } .fact-row { flex-direction: column; gap: 2px; } .fact-row__value { text-align: left; } .showcase__panel { border-radius: var(--r-lg); } .approach { padding: 0 20px 80px; } .approach-card { padding: 28px; } .positioning { padding: 0 20px 80px; } .positioning__panel { padding: 40px 22px; border-radius: var(--r-lg); } .prose-page { padding: 124px 20px 72px; } .contact { padding: 0 20px 72px; } .contact__panel { padding: 40px 22px; border-radius: var(--r-lg); gap: 32px; } .contact-row { flex-direction: column; gap: 4px; } .contact-row__value--right { text-align: left; } .footer { padding: 0 20px 40px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__title, .hero__row, .bento { animation: none; } }