/* ========================================================================== Evolve Studio — main stylesheet 1. Fonts & tokens 2. Base 3. Layout & type 4. Buttons & links 5. Header & menu 6. Footer 7. Shared sections 8. Home 9. Work 10. Expertise 11. Contact 12. Studio 13. Blog & articles 14. Case study 15. Motion helpers 16. Responsive ========================================================================== */ /* 1. Fonts & tokens ------------------------------------------------------- */ @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/mrs-saint-delafield-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } :root { --bg: #fcfbf9; --sand: #f7f6f2; --cream: #fdf5e9; --ink: #0f0f0f; --text: #1c1c1b; --muted: #6f6c66; --soft: #9a968f; --line: #e6e2db; --line-strong: #d6d1c8; --sun: #fbb437; --sun-deep: #e99e14; --sun-soft: #fde9c3; --dark: #0b0b0b; --white: #fff; --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --serif: "Instrument Serif", "Times New Roman", serif; --script: "Mrs Saint Delafield", "Brush Script MT", cursive; --gutter: clamp(20px, 5.3vw, 84px); --max: 1380px; --header-h: clamp(76px, 7.6vw, 104px); --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --shadow-card: 0 30px 80px -30px rgba(40, 30, 10, .18), 0 2px 8px rgba(40, 30, 10, .04); } /* 2. Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } ::selection { background: var(--sun); color: var(--ink); } :focus-visible { outline: 2px solid var(--sun-deep); outline-offset: 3px; border-radius: 4px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; } .skip-link:focus { top: 12px; } [hidden] { display: none !important; } /* 3. Layout & type -------------------------------------------------------- */ .container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .section { padding-block: clamp(56px, 7vw, 110px); } .section--sand { background: var(--sand); } .section--line { border-top: 1px solid var(--line); } .display { font-family: var(--sans); font-weight: 600; color: var(--ink); letter-spacing: -0.035em; line-height: .94; } .display--xl { font-size: clamp(3.1rem, 7.6vw, 7.6rem); } .display--lg { font-size: clamp(2.5rem, 5.3vw, 5.4rem); line-height: .98; } .display--md { font-size: clamp(2.1rem, 4.1vw, 4.2rem); line-height: 1; } .display--sm { font-size: clamp(1.8rem, 2.8vw, 2.9rem); line-height: 1.02; letter-spacing: -0.035em; } .display--light { font-weight: 500; letter-spacing: -0.028em; } .display--serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1; } .display .line { display: block; } .display .line__inner { display: inline-block; } .display em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; padding-right: .04em; } .display .accent { color: var(--sun); } .display .accent em { color: var(--sun); } .display--serif em { letter-spacing: -0.01em; } .lead { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.5; color: var(--muted); } .muted { color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(11px, .85vw, 12.5px); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text); margin-bottom: clamp(18px, 2vw, 28px); } .eyebrow__dash { display: block; width: clamp(30px, 2.6vw, 40px); height: 2px; background: var(--sun); transform-origin: left center; } .eyebrow--plain .eyebrow__dash { display: none; } /* Guard against section paragraph rules (eyebrows are

). */ p.eyebrow { font-size: clamp(11px, .85vw, 12.5px) !important; line-height: 1.4 !important; letter-spacing: .2em !important; max-width: none !important; padding: 0 !important; } .small-caps { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } /* 4. Buttons & links ------------------------------------------------------ */ .btn { --btn-h: clamp(48px, 3.9vw, 58px); display: inline-flex; align-items: center; gap: 18px; height: var(--btn-h); padding: 0 6px 0 26px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: clamp(14.5px, 1.1vw, 16px); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); } .btn__icon { display: grid; place-items: center; width: calc(var(--btn-h) - 12px); height: calc(var(--btn-h) - 12px); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 15, 15, .07); transition: transform .35s var(--ease-out), background-color .3s var(--ease); } .btn__icon .icon { width: 17px; height: 17px; } .btn:hover { background: #ffc24f; box-shadow: 0 10px 24px -12px rgba(233, 158, 20, .7); } .btn:hover .btn__icon { transform: translateX(4px); } .btn--ghost { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); padding-left: 24px; } .btn--ghost .btn__icon { background: var(--sun); box-shadow: none; } .btn--ghost:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); } .btn--block { width: 100%; justify-content: center; padding: 0 26px; } .btn--block .btn__icon { box-shadow: none; width: auto; } .btn--dark { background: var(--ink); color: #fff; } .btn--dark .btn__icon { background: var(--sun); color: var(--ink); } .arrow-link { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(11.5px, .9vw, 13px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .arrow-link .icon { width: 18px; height: 18px; transition: transform .35s var(--ease-out); } .arrow-link:hover .icon { transform: translateX(5px); } .arrow-link--plain { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; } .circle-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); background: transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease-out), color .3s; } .circle-btn .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-out); } .circle-btn:hover { background: var(--sun); border-color: var(--sun); } .circle-btn--light { border-color: rgba(255, 255, 255, .7); color: #fff; } .circle-btn--light:hover { color: var(--ink); } .play-link { display: inline-flex; align-items: center; gap: 16px; } .play-link__circle { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .3s var(--ease), border-color .3s, color .3s, transform .4s var(--ease-out); } .play-link__circle .icon { width: 18px; height: 18px; margin-left: 2px; } .play-link__label { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; } .play-link:hover .play-link__circle { background: var(--sun); border-color: var(--sun); color: var(--ink); transform: scale(1.06); } .down-link { display: inline-flex; align-items: center; gap: 16px; } .down-link .play-link__circle .icon { margin: 0; } .down-link:hover .play-link__circle { background: var(--sun); border-color: var(--sun); } .down-link:hover .icon { animation: nudge-down 1s var(--ease) infinite; } @keyframes nudge-down { 50% { transform: translateY(3px); } } /* 5. Header & menu -------------------------------------------------------- */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); transition: transform .5s var(--ease-out), background-color .4s var(--ease), box-shadow .4s var(--ease); } .site-header.is-fixed { position: fixed; height: 76px; background: rgba(252, 251, 249, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05); } .site-header.is-hidden { transform: translateY(-100%); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; } .site-logo { display: block; color: var(--ink); flex: none; } .logo-mark { display: inline-grid; justify-items: end; color: var(--ink); line-height: 1; font-size: clamp(25px, 2.35vw, 34px); } .logo-mark__word { display: flex; align-items: baseline; font-weight: 700; letter-spacing: -0.055em; } .logo-mark__rings { position: relative; display: inline-block; width: 1.04em; height: .58em; margin: 0 .005em 0 .02em; } .logo-mark__rings span { position: absolute; top: 0; width: .58em; height: .58em; border-radius: 50%; border: .135em solid currentColor; } .logo-mark__rings span:first-child { left: 0; } .logo-mark__rings span:last-child { left: .44em; border-color: var(--sun); border-left-color: transparent; transform: rotate(-20deg); } .logo-mark__rings span:last-child::before { content: ""; position: absolute; inset: -.135em; border-radius: 50%; border: .135em solid transparent; border-left-color: var(--sun-deep); transform: rotate(40deg); } .logo-mark__sub { margin-top: .16em; padding-right: .1em; font-size: .27em; font-weight: 600; letter-spacing: .66em; text-transform: uppercase; margin-right: -.66em; } .site-logo { line-height: 0; } .site-logo__img { width: auto; max-height: 52px; } .site-nav { position: absolute; left: 50%; transform: translateX(-50%); } .site-nav ul { display: flex; gap: clamp(28px, 3.3vw, 52px); } .site-nav a { position: relative; display: block; padding: 8px 0; font-size: clamp(14px, 1.08vw, 15.5px); color: #55524d; transition: color .25s; } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sun); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); transform-origin: left; } .site-nav a.is-current { color: var(--ink); } .site-header__actions { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); } .site-header .btn { --btn-h: 46px; font-size: 14px; } .menu-toggle { width: 34px; height: 34px; display: grid; place-items: center; } .menu-toggle__bars { display: grid; gap: 6px; width: 22px; } .menu-toggle__bars span { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease-out), opacity .3s; } .menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; } .menu-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .site-menu { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; align-items: center; padding-top: var(--header-h); opacity: 0; transition: opacity .45s var(--ease); } .site-menu.is-open { opacity: 1; } .site-menu__inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6vw; align-items: end; } .site-menu__nav a { display: flex; align-items: baseline; gap: 18px; font-size: clamp(2.4rem, 6vw, 5.4rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.06; color: var(--ink); transition: color .3s, transform .5s var(--ease-out); } .site-menu__nav a:hover { color: var(--sun-deep); transform: translateX(10px); } .site-menu__nav a.is-current { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .site-menu__num { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--sun-deep); font-family: var(--sans); font-style: normal; } .site-menu__aside { display: grid; gap: 10px; color: var(--muted); padding-bottom: 14px; } .site-menu__aside a:hover { color: var(--ink); } .site-menu__note { color: var(--ink); font-size: 18px; line-height: 1.4; margin-bottom: 14px; } .site-menu__aside .socials { margin: 12px 0 18px; } .site-menu__aside .btn { justify-self: start; } .site-menu li { overflow: hidden; } .menu-open { overflow: hidden; } .menu-open .site-header { position: fixed; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; } /* 6. Footer --------------------------------------------------------------- */ .site-footer { background: #fbfaf8; border-top: 1px solid var(--line); padding: clamp(40px, 4.6vw, 64px) 0 clamp(28px, 3vw, 44px); } .site-footer__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; } .site-footer .logo-mark { font-size: clamp(24px, 2.1vw, 30px); } .site-footer__nav ul { display: flex; gap: clamp(22px, 3.2vw, 46px); } .site-footer__nav a { position: relative; font-size: clamp(13.5px, 1.05vw, 15px); color: #3c3a37; padding: 6px 0; } .site-footer__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sun); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); } .site-footer__nav a:hover::after, .site-footer__nav a.is-current::after { transform: scaleX(1); transform-origin: left; } .site-footer .socials { justify-self: end; } .site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(28px, 4vw, 52px); font-size: clamp(12.5px, 1vw, 14px); color: var(--soft); } .site-footer__bottom span { margin: 0 8px; } .socials { display: flex; gap: clamp(18px, 2vw, 30px); align-items: center; } .socials a { display: block; color: var(--ink); transition: color .25s, transform .35s var(--ease-out); } .socials a:hover { color: var(--sun-deep); transform: translateY(-2px); } .socials .icon { width: 21px; height: 21px; } /* 7. Shared sections ------------------------------------------------------ */ /* Hero base */ .hero { position: relative; padding-top: var(--header-h); overflow: hidden; } .hero__inner { position: relative; z-index: 2; } .hero__copy { max-width: 620px; } .hero__title { margin-bottom: clamp(20px, 2.2vw, 30px); } .hero__text { font-size: clamp(1.02rem, 1.42vw, 1.36rem); color: var(--muted); max-width: 520px; line-height: 1.5; } .hero__actions { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(26px, 3vw, 40px); flex-wrap: wrap; } .hero-side { position: absolute; display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid var(--sun); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; line-height: 1.35; color: var(--text); z-index: 3; } .hero-side--light { color: #fff; border-left-color: transparent; padding-left: 0; } /* Organic image shape */ .blob { position: relative; width: 100%; height: 100%; overflow: hidden; } .blob img { width: 100%; height: 100%; object-fit: cover; } /* Gold line */ .gold-line { position: absolute; pointer-events: none; overflow: visible; } .gold-line path { fill: none; stroke: var(--sun); stroke-width: 1.6; vector-effect: non-scaling-stroke; } /* Section head row */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 2.4vw, 32px); } .section-head .eyebrow { margin: 0; } /* Logo strip */ .logos { border-bottom: 1px solid var(--line); background: var(--bg); } .logos__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-block: clamp(24px, 3vw, 40px); } .logos__label { flex: none; font-size: clamp(10.5px, .85vw, 12px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; padding-right: clamp(20px, 3vw, 44px); border-right: 1px solid var(--line-strong); } .logos__viewport { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .logos__track { display: flex; align-items: center; gap: clamp(36px, 5vw, 76px); width: max-content; will-change: transform; } .logos__item { flex: none; } .logos__logo { display: flex; align-items: center; height: 54px; color: #6b6964; filter: grayscale(1); opacity: .85; transition: color .4s, opacity .4s, filter .4s; } .logos__logo img { max-height: 48px; width: auto; } .logos__logo:hover { color: var(--ink); filter: none; opacity: 1; } .logos__word { white-space: nowrap; font-size: clamp(18px, 1.9vw, 26px); line-height: 1; } .logos__logo--0 .logos__word { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 26px; transform: scaleY(1.15); } .logos__logo--1 .logos__word { font-weight: 300; letter-spacing: .06em; text-transform: uppercase; font-size: 20px; } .logos__logo--2 .logos__word { font-family: var(--serif); font-style: italic; font-size: 30px; letter-spacing: -0.02em; } .logos__logo--3 .logos__word { font-weight: 400; letter-spacing: .32em; text-transform: uppercase; font-size: 19px; } .logos__logo--4 .logos__word { font-family: var(--serif); font-style: italic; font-size: 27px; font-weight: 400; } .logos__arrows { display: flex; gap: 10px; flex: none; } .logos__arrows .circle-btn { width: 36px; height: 36px; } /* Work card */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.3vw, 20px); } .work-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #ddd; } .work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); } .work-card:hover .work-card__media img { transform: scale(1.05); } .work-card__body { padding-top: 16px; } .work-card__num { display: block; font-size: clamp(11px, .9vw, 12.5px); font-weight: 500; color: var(--text); margin-bottom: 8px; letter-spacing: .04em; } .work-card__label { display: block; font-size: clamp(10.5px, .85vw, 12px); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; } .work-card__title { font-size: clamp(1.3rem, 2.05vw, 1.95rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 8px; } .work-card__text { color: var(--soft); font-size: clamp(14.5px, 1.25vw, 17.5px); max-width: 400px; margin-bottom: 18px; line-height: 1.5; } /* Dark project card (Expertise featured / related) */ .dark-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.1vw, 16px); } .dark-card { position: relative; display: block; min-height: clamp(140px, 11.8vw, 180px); border-radius: 4px; overflow: hidden; color: #fff; isolation: isolate; background: #111; } .dark-card__media { position: absolute; inset: 0; z-index: -2; } .dark-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); } .dark-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .05) 100%); } .dark-card__body { position: relative; display: flex; flex-direction: column; height: 100%; min-height: inherit; padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px); } .dark-card__num { font-size: 11px; font-weight: 500; margin-bottom: 6px; } .dark-card__title { font-size: clamp(1.15rem, 1.7vw, 1.55rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 8px; } .dark-card__text { font-size: clamp(12.5px, 1.05vw, 14.5px); line-height: 1.35; color: rgba(255, 255, 255, .85); max-width: 230px; } .dark-card .circle-btn { margin-top: auto; width: 28px; height: 28px; border-color: rgba(255, 255, 255, .8); color: #fff; } .dark-card .circle-btn .icon { width: 13px; height: 13px; } .dark-card:hover .dark-card__media img { transform: scale(1.06); } .dark-card:hover .circle-btn { background: var(--sun); border-color: var(--sun); color: var(--ink); } /* Closing CTA */ .cta { position: relative; overflow: hidden; background: var(--bg); } .cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(24px, 4vw, 60px); padding-block: clamp(60px, 7vw, 110px); } .cta__title { font-size: clamp(2.5rem, 5.2vw, 5.3rem); font-weight: 500; letter-spacing: -0.045em; } .cta__body p { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.32rem); max-width: 420px; margin-bottom: 22px; line-height: 1.5; } .cta--blob-left .cta__inner { grid-template-columns: .9fr 1fr .8fr; } .cta--blob-left .cta__head { grid-column: 2; } .cta--blob-left .cta__body { grid-column: 3; } .cta__blob { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; z-index: 1; } .cta__blob img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); -webkit-mask: url("../img/blob-cta.svg") left center / 100% 100% no-repeat; mask: url("../img/blob-cta.svg") left center / 100% 100% no-repeat; } .cta--image-right .cta__inner { grid-template-columns: auto 1px minmax(0, 1fr) clamp(180px, 21vw, 300px); padding-block: 0; min-height: clamp(220px, 16vw, 250px); } .cta--image-right .cta__head { padding-block: clamp(40px, 4vw, 60px); } .cta--image-right .cta__inner::before { content: ""; grid-column: 2; grid-row: 1; height: 96px; background: var(--line-strong); } .cta--image-right .cta__head { grid-column: 1; grid-row: 1; } .cta--image-right .cta__body { grid-column: 3; grid-row: 1; } .cta--image-right .cta__title { font-size: clamp(2.2rem, 4.2vw, 4.4rem); font-weight: 600; } .cta--image-right .cta__title em { font-weight: 400; } .cta__image { grid-column: 4; grid-row: 1; align-self: stretch; margin-right: calc(-1 * var(--gutter)); overflow: hidden; } .cta__image img { width: 100%; height: 100%; object-fit: cover; } .cta--plain .cta__inner { grid-template-columns: 1.5fr .7fr; padding-block: clamp(26px, 2.2vw, 36px) clamp(34px, 3.4vw, 50px); } .cta--plain .cta__head .eyebrow { margin-bottom: 10px; } .cta--plain .cta__title { font-size: clamp(2.2rem, 4.4vw, 4.5rem); font-weight: 600; white-space: nowrap; } .cta--plain .cta__title .line { display: inline; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vw; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(8, 8, 8, .88); } .lightbox__frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; } .lightbox__media, .lightbox__media iframe, .lightbox__media video { width: 100%; height: 100%; border: 0; } .lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; } /* Page transition curtain */ .page-curtain { position: fixed; inset: 0; z-index: 300; background: var(--bg); pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); } .is-leaving .page-curtain { opacity: 1; } /* 8. Home ----------------------------------------------------------------- */ .hero--home { min-height: clamp(560px, 69vw, 1000px); display: flex; align-items: center; padding-bottom: clamp(40px, 5vw, 70px); } .hero--home .hero__copy { padding-top: clamp(20px, 3vw, 50px); max-width: 560px; } .hero--home .hero__title { font-size: clamp(3.1rem, 7.5vw, 7.6rem); line-height: .93; } .hero-home__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50.5%; z-index: 1; } .blob--home { -webkit-clip-path: url(#blob-home); clip-path: url(#blob-home); } .hero-home__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); } .hero-home__slide.is-active { opacity: 1; } .hero-home__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; } .hero-home__slide.is-active img { transform: scale(1); } .gold-line--home { left: -22%; top: 44%; width: 58%; height: 56%; } .hero--home .hero-side { right: 7.5%; top: 52%; } .slide-counter { position: absolute; right: 6.6%; bottom: 7%; z-index: 3; display: grid; justify-items: center; gap: 10px; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .08em; } .slide-counter__bar { position: relative; width: 2px; height: 74px; background: rgba(255, 255, 255, .3); overflow: hidden; } .slide-counter__bar span { position: absolute; inset: 0; background: var(--sun); transform-origin: top; transform: scaleY(0); } .featured-work { padding-top: clamp(40px, 4.4vw, 64px); } .home-expertise { background: var(--sand); } .home-expertise__inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 4vw, 60px); align-items: start; } .home-expertise__intro h2 { font-size: clamp(2.6rem, 6.4vw, 6.5rem); line-height: .94; margin-bottom: clamp(18px, 2vw, 26px); } .home-expertise__intro .lead { max-width: 500px; font-size: clamp(1rem, 1.45vw, 1.38rem); margin-bottom: clamp(24px, 3vw, 38px); color: var(--muted); } .pillar-list { margin-top: clamp(4px, 1vw, 12px); } .pillar-list__item + .pillar-list__item { border-top: 1px solid var(--line-strong); } .pillar-list a { display: grid; grid-template-columns: clamp(44px, 5.4vw, 72px) 1fr auto; align-items: center; gap: 12px; padding: clamp(16px, 1.75vw, 26px) 0; } .pillar-list__num { align-self: start; padding-top: 6px; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; } .pillar-list__title { display: block; font-size: clamp(1.2rem, 1.95vw, 1.9rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; } .pillar-list__text { display: block; color: var(--soft); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.4; max-width: 470px; margin-top: 4px; } .pillar-list .circle-btn { width: clamp(40px, 3.4vw, 50px); height: clamp(40px, 3.4vw, 50px); } .pillar-list a:hover .circle-btn { background: var(--sun); border-color: var(--sun); } .pillar-list a:hover .circle-btn .icon { transform: translateX(2px); } .pillar-list a:hover .pillar-list__title { color: var(--ink); } .perspective { position: relative; background: var(--dark); color: #fff; overflow: hidden; } .perspective__media { position: absolute; top: 0; bottom: 0; right: 0; width: 59%; } .perspective__media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); } .perspective__inner { position: relative; z-index: 2; min-height: clamp(420px, 36vw, 560px); display: flex; align-items: center; padding-block: clamp(50px, 5vw, 80px); } .perspective__copy { max-width: 560px; } .perspective .eyebrow { color: #fff; } .perspective .display { color: #fff; font-size: clamp(2.5rem, 5.2vw, 5.2rem); margin-bottom: clamp(16px, 1.6vw, 22px); } .perspective p { color: rgba(255, 255, 255, .82); font-size: clamp(1rem, 1.45vw, 1.36rem); line-height: 1.5; margin-bottom: clamp(22px, 2.6vw, 34px); } .perspective .play-link__circle { width: 48px; height: 48px; border-color: rgba(255, 255, 255, .7); } .perspective__caption { position: absolute; right: 0; bottom: clamp(20px, 2.4vw, 34px); display: flex; align-items: center; gap: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; } .perspective__rule { display: block; width: clamp(120px, 19vw, 280px); height: 1px; background: rgba(255, 255, 255, .7); } /* 9. Work ----------------------------------------------------------------- */ .hero--work { min-height: clamp(520px, 43vw, 700px); display: flex; align-items: center; } .hero--work .hero__copy { padding-block: clamp(20px, 3vw, 50px); max-width: 560px; } .hero--work .hero__title { font-size: clamp(3.2rem, 8.9vw, 8.8rem); font-weight: 600; line-height: .9; letter-spacing: -0.06em; } .hero--work .hero__title em { color: #3a3835; letter-spacing: -0.03em; } .hero__art { position: absolute; top: 0; right: 0; bottom: 0; width: 57%; z-index: 1; } .hero__art img { width: 100%; height: 100%; object-fit: contain; object-position: right center; mix-blend-mode: multiply; } .hero--work .hero-side--top { right: 5.5%; top: calc(var(--header-h) + 6px); } .hero--work .hero-side--bottom { right: 5.5%; bottom: 4%; color: var(--muted); border-left-color: var(--text); border-left-width: 1px; } .down-link { margin-top: clamp(22px, 2.4vw, 36px); } .down-link .play-link__circle { width: 46px; height: 46px; } .work-filter { padding-top: clamp(12px, 1.5vw, 20px); } .work-filter__bar { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: clamp(20px, 5vw, 76px); padding-bottom: clamp(18px, 2vw, 28px); } .work-filter__bar .eyebrow { margin: 0; } .toggle { display: inline-flex; gap: 6px; padding: 0; } .toggle__btn { height: 40px; padding: 0 clamp(22px, 3vw, 38px); border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--line-strong); background: var(--white); transition: background-color .35s var(--ease), border-color .35s, color .3s; } .toggle__btn:hover { border-color: var(--ink); } .toggle__btn[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); } .work-filter__note { justify-self: end; max-width: 300px; padding-left: 16px; border-left: 1px solid var(--line-strong); font-size: 12px; line-height: 1.5; color: var(--muted); } .tiles-wrap { position: relative; padding-inline: clamp(8px, 1.4vw, 16px); } .tiles { display: flex; flex-wrap: wrap; gap: 8px; } .tiles[hidden] { display: none !important; } .tiles__row { display: flex; gap: 8px; width: 100%; } .tile { position: relative; flex: var(--grow, 1) 1 0; min-width: 0; height: clamp(220px, 20vw, 300px); overflow: hidden; color: #fff; isolation: isolate; background: #1a1a1a; } .tile__media { position: absolute; inset: 0; z-index: -2; } .tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .22) 50%, rgba(0, 0, 0, 0) 80%); transition: background-color .4s; } .tile--light { color: var(--ink); } .tile--light::before { background: linear-gradient(100deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 60%); } .tile__link { display: flex; flex-direction: column; height: 100%; padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.6vw, 22px); } .tile__num { font-size: 11px; font-weight: 500; margin-bottom: 10px; } .tile__title { font-size: clamp(1.3rem, 2.15vw, 2.1rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; max-width: 220px; } .tile__text { margin-top: auto; font-size: clamp(12px, 1vw, 14.5px); line-height: 1.35; max-width: 210px; opacity: .92; } .tile .circle-btn { margin-top: 12px; width: 32px; height: 32px; border-color: currentColor; color: inherit; } .tile .circle-btn .icon { width: 14px; height: 14px; } .tile:hover .tile__media img { transform: scale(1.06); } .tile:hover .circle-btn { background: var(--sun); border-color: var(--sun); color: var(--ink); } .tile__count { position: absolute; top: clamp(14px, 1.5vw, 22px); right: clamp(14px, 1.5vw, 22px); font-size: 11px; opacity: .8; } .featured-project { position: relative; margin-top: clamp(10px, 1.2vw, 14px); min-height: clamp(460px, 37vw, 600px); overflow: hidden; } .featured-project__slides { position: relative; min-height: inherit; } .fp-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 38% 62%; visibility: hidden; } .fp-slide.is-active { visibility: visible; position: relative; } .fp-slide { min-height: clamp(460px, 37vw, 600px); } .fp-slide__copy { position: relative; z-index: 2; align-self: center; padding: clamp(28px, 3vw, 50px) 0 clamp(50px, 6vw, 90px) var(--fp-left, var(--gutter)); max-width: 470px; } .fp-slide__copy .eyebrow { margin-bottom: clamp(10px, 1.2vw, 16px); } .fp-slide__big { position: absolute; left: calc(var(--fp-left, var(--gutter)) - .05em); top: clamp(36px, 4vw, 60px); font-size: clamp(5rem, 11vw, 10rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(15, 15, 15, .06); background: linear-gradient(180deg, rgba(15, 15, 15, .11), rgba(15, 15, 15, .02)); -webkit-background-clip: text; background-clip: text; pointer-events: none; z-index: -1; } .fp-slide__title { font-size: clamp(2.2rem, 3.8vw, 3.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin-bottom: 10px; } .fp-slide__sub { font-size: clamp(1.1rem, 1.9vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 14px; color: var(--ink); } .fp-slide__text { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-bottom: clamp(20px, 2.4vw, 30px); max-width: 400px; } .fp-slide__media { position: relative; overflow: hidden; -webkit-clip-path: url(#curve-left); clip-path: url(#curve-left); margin-left: -6%; } .fp-slide__wipe { position: absolute; inset: 0; } .fp-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fp-slide__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35)); } .fp-slide .hero-side { right: 4%; top: 12%; color: #fff; } .fp-slide .play-link { position: absolute; right: 4%; bottom: 31%; z-index: 3; color: #fff; } .fp-slide .play-link__circle { width: 50px; height: 50px; } .fp-dots { position: absolute; left: var(--fp-left, var(--gutter)); bottom: clamp(26px, 3vw, 44px); z-index: 4; display: flex; gap: 10px; } .fp-dots button { width: 18px; height: 14px; position: relative; } .fp-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: #cfcac2; transition: background-color .3s; } .fp-dots button[aria-current="true"]::before { background: var(--sun); } /* 10. Expertise ----------------------------------------------------------- */ .hero--expertise { min-height: clamp(500px, 36vw, 560px); display: flex; align-items: center; } .hero--expertise .hero__copy { max-width: 600px; padding-block: clamp(20px, 2vw, 40px); } .hero--expertise .hero__title { font-size: clamp(3rem, 7.5vw, 7.4rem); line-height: .92; letter-spacing: -0.055em; } .hero--expertise .hero__title em, .contact-hero__copy .display em, .hero--studio .hero__title em { font-size: 1.12em; line-height: .8; } .hero--expertise .hero__title em { letter-spacing: -0.03em; } .hero--expertise .hero__art { width: 60%; } .hero--expertise .hero-side { right: 3.5%; bottom: 13%; } .gold-line--exp { left: 38%; top: 34%; width: 62%; height: 36%; z-index: 2; } .pillars { border-top: 1px solid var(--line); padding-block: clamp(10px, 1.4vw, 16px); } .pillars__inner { display: grid; grid-template-columns: 31% minmax(0, 1fr) 26.5%; gap: clamp(14px, 1.4vw, 22px); align-items: stretch; } .pillars__tabs { display: grid; align-content: start; } .pillar-tab { position: relative; display: grid; grid-template-columns: 34px 1px 1fr auto; align-items: center; gap: 16px; width: 100%; padding: clamp(18px, 1.9vw, 26px) 12px clamp(18px, 1.9vw, 26px) 12px; text-align: left; border-radius: 10px; transition: background-color .45s var(--ease); } .pillar-tab + .pillar-tab::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--line); transition: opacity .3s; } .pillar-tab[aria-selected="true"], .pillar-tab[aria-selected="true"] + .pillar-tab::before { } .pillar-tab[aria-selected="true"] { background: var(--cream); } .pillar-tab[aria-selected="true"]::before, .pillar-tab[aria-selected="true"] + .pillar-tab::before { opacity: 0; } .pillar-tab__num { align-self: start; font-size: 10.5px; font-weight: 500; color: var(--sun-deep); padding-top: 2px; } .pillar-tab__rule { width: 1px; height: 100%; min-height: 50px; background: var(--line-strong); } .pillar-tab__title { max-width: 6.6em; font-size: clamp(1.15rem, 1.9vw, 1.85rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.06; color: var(--ink); } .pillar-tab .circle-btn { width: clamp(34px, 3.5vw, 50px); height: clamp(34px, 3.5vw, 50px); border-color: #3a3835; } .pillar-tab:hover .circle-btn, .pillar-tab[aria-selected="true"] .circle-btn { border-color: var(--ink); } .pillar-tab[aria-selected="true"] .circle-btn { background: var(--white); } .pillar-tab:hover .circle-btn .icon { transform: translateX(2px); } .pillars__stage { position: relative; min-height: clamp(380px, 39.5vw, 600px); border-radius: 4px; overflow: hidden; background: #ddd; } .pillar-image { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); } .pillar-image.is-active { opacity: 1; } .pillar-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease-out); } .pillar-image.is-active img { transform: scale(1); } .pillars__panels { position: relative; } .pillar-panel { padding: clamp(14px, 1.6vw, 24px) 0 clamp(14px, 1.6vw, 24px) clamp(6px, 1.4vw, 20px); } .pillar-panel[hidden] { display: none !important; } .pillar-panel__eyebrow { display: block; font-size: clamp(10.5px, .85vw, 12.5px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(12px, 1.4vw, 20px); } .pillar-panel__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.75vw, 3.6rem); line-height: .95; letter-spacing: -0.02em; color: var(--ink); margin-bottom: clamp(14px, 1.6vw, 22px); } .pillar-panel__title em { color: var(--sun); } .pillar-panel__title .line { display: block; } .pillar-panel__text { color: var(--muted); font-size: clamp(.95rem, 1.45vw, 1.35rem); line-height: 1.38; padding-bottom: clamp(16px, 1.8vw, 24px); border-bottom: 1px solid var(--line-strong); margin-bottom: clamp(14px, 1.5vw, 20px); } .pillar-panel__label { display: block; font-size: clamp(10px, .8vw, 12px); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .pillar-panel__list { display: grid; gap: 6px; margin-bottom: clamp(18px, 2vw, 28px); } .pillar-panel__list li { display: flex; align-items: center; gap: 12px; color: #4a4843; font-size: clamp(.92rem, 1.38vw, 1.3rem); } .pillar-panel__list .icon { width: 17px; height: 17px; color: var(--sun-deep); flex: none; } .pillar-panel .btn { --btn-h: 46px; } .approach { border-top: 1px solid var(--line); } .approach__inner { display: grid; grid-template-columns: 28% 1fr; gap: clamp(20px, 3vw, 50px); align-items: center; padding-block: clamp(26px, 2.4vw, 36px); } .approach__copy .display { font-size: clamp(2.2rem, 4.1vw, 4rem); line-height: .92; margin-bottom: clamp(12px, 1.4vw, 18px); } .approach__copy .display em { font-weight: 400; background: linear-gradient(90deg, #6a655c 0%, #8a7a58 22%, var(--sun) 46%, var(--sun-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .approach__copy p { color: var(--muted); font-size: clamp(14px, 1.3vw, 17.5px); line-height: 1.42; margin-bottom: clamp(16px, 1.8vw, 24px); } .approach__copy .btn { --btn-h: 44px; } .approach-cards { display: grid; grid-template-columns: 1.06fr .66fr 1fr 1.48fr; gap: clamp(8px, 1vw, 14px); perspective: 1400px; align-items: end; } .approach-card { display: grid; gap: clamp(12px, 1.6vw, 22px); } .approach-card__media { height: clamp(170px, 19.6vw, 290px); transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease-out), box-shadow .6s; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); will-change: transform; } .approach-card__media img { width: 100%; height: 100%; object-fit: cover; } .approach-card:nth-child(1) { --ry: 28deg; } .approach-card:nth-child(2) { --ry: 8deg; } .approach-card:nth-child(3) { --ry: -4deg; } .approach-card:nth-child(4) { --ry: -24deg; } .approach-card:nth-child(1) .approach-card__media { transform-origin: right center; } .approach-card:nth-child(4) .approach-card__media { transform-origin: left center; } .approach-card:nth-child(2) .approach-card__media { border-radius: 14px; } .approach-card__caption { display: grid; gap: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .approach-card__caption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); } .ways { padding-block: clamp(10px, 1.6vw, 20px) clamp(24px, 2.6vw, 36px); } .ways__inner { display: grid; grid-template-columns: 22% repeat(3, 1fr); } .ways__head { padding-right: clamp(14px, 2vw, 30px); border-right: 1px solid var(--line); } .ways__head .eyebrow { white-space: nowrap; } .ways__head .display { font-size: clamp(1.7rem, 2.75vw, 2.7rem); line-height: .97; letter-spacing: -0.04em; } .way { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; padding: clamp(14px, 1.4vw, 20px) clamp(14px, 2vw, 26px); border-right: 1px solid var(--line); } .way:last-child { border-right: 0; } .way__icon { grid-row: 1 / span 4; color: var(--ink); } .way__icon .icon { width: 34px; height: 34px; stroke-width: 1.2; } .way__num { font-size: 10px; color: var(--muted); } .way__title { font-size: clamp(1rem, 1.45vw, 1.35rem); font-weight: 500; letter-spacing: -0.02em; } .way__text { font-size: clamp(12.5px, 1.08vw, 15px); line-height: 1.45; color: var(--muted); } .way .arrow-link { margin-top: 12px; } .exp-work { padding-block: clamp(8px, 1vw, 14px) 0; } .exp-work .section-head { margin-bottom: 14px; } /* 11. Contact ------------------------------------------------------------- */ .contact-hero { position: relative; padding-top: var(--header-h); padding-bottom: clamp(30px, 3.6vw, 50px); overflow: hidden; } .contact-hero__bg { position: absolute; left: 0; bottom: 0; width: 54%; height: 64%; z-index: 0; } .contact-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent), linear-gradient(90deg, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(0deg, #000 75%, transparent 100%); } .contact-hero::after { content: ""; position: absolute; right: 0; top: 0; width: 45%; height: 40%; background: radial-gradient(ellipse at 90% 0%, rgba(160, 140, 110, .16), transparent 60%); pointer-events: none; } .contact-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 50%; gap: clamp(24px, 3vw, 48px); align-items: start; padding-top: clamp(16px, 2.6vw, 36px); } .contact-hero__copy { padding-top: clamp(14px, 2vw, 28px); } .contact-hero__copy .display { font-size: clamp(3rem, 6.7vw, 6.6rem); line-height: .92; letter-spacing: -0.06em; margin-bottom: clamp(18px, 2.2vw, 30px); } .contact-hero__copy .display em { letter-spacing: -0.035em; } .contact-hero__copy p { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.32rem); line-height: 1.4; max-width: 440px; } .enquiry { position: relative; background: rgba(255, 255, 255, .97); border-radius: 18px; box-shadow: var(--shadow-card); padding: clamp(24px, 3.3vw, 46px) clamp(20px, 3.3vw, 46px) clamp(20px, 2.4vw, 30px); } .enquiry__step { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(20px, 2.6vw, 34px); font-size: clamp(10.5px, .9vw, 12.5px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .enquiry__step-num { color: var(--sun-deep); letter-spacing: .06em; } .enquiry__progress { position: relative; flex: 0 0 38%; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .enquiry__progress span { position: absolute; inset: 0; background: var(--sun); transform-origin: left; transform: scaleX(var(--progress, .25)); transition: transform .6s var(--ease-out); } .enquiry__step-label { margin-left: auto; } .service-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .service-fieldset legend { padding: 0; display: block; width: 100%; } .enquiry__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.3vw, 3.15rem); letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin-bottom: 8px; } .enquiry__sub { color: var(--muted); font-size: clamp(.9rem, 1.4vw, 1.12rem); margin-bottom: clamp(18px, 2.2vw, 28px); } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 12px); padding-bottom: clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--line); margin-bottom: clamp(20px, 2.6vw, 28px); } .service-opt { position: relative; } .service-opt input { position: absolute; opacity: 0; pointer-events: none; } .service-opt label { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: clamp(92px, 9.6vw, 140px); padding: clamp(12px, 1.6vw, 22px); border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease-out); } .service-opt label:hover { border-color: var(--line-strong); transform: translateY(-1px); } .service-opt .icon { width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); color: var(--sun-deep); stroke-width: 1.3; } .service-opt__name { font-size: clamp(.92rem, 1.45vw, 1.3rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); } .service-opt__check { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-items: center; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); } .service-opt__check .icon { width: 13px; height: 13px; stroke-width: 2.4; color: var(--ink); } .service-opt input:checked + label { border-color: var(--sun); background: #fdf5e6; } .service-opt input:checked + label .service-opt__check { transform: scale(1); } .service-opt input:focus-visible + label { outline: 2px solid var(--sun-deep); outline-offset: 2px; } .service-opt--plain .icon { color: var(--ink); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px) clamp(14px, 1.8vw, 18px); } .field { display: grid; gap: 8px; min-width: 0; } .field--full { grid-column: 1 / -1; } .field label, .field__label { font-size: clamp(11.5px, .95vw, 13.5px); font-weight: 500; letter-spacing: .08em; color: #3d3b37; } .field label small { font-size: inherit; color: var(--soft); font-weight: 400; letter-spacing: .04em; } .field input, .field textarea, .phone { width: 100%; height: clamp(44px, 3.7vw, 54px); padding: 0 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font-size: clamp(14px, 1.1vw, 15.5px); transition: border-color .25s, box-shadow .25s; } .field textarea { height: clamp(118px, 10vw, 150px); padding: 12px 14px; resize: vertical; line-height: 1.5; } .field input::placeholder, .field textarea::placeholder { color: #b5b1aa; } .field input:focus, .field textarea:focus, .phone:focus-within { outline: none; border-color: var(--sun); box-shadow: 0 0 0 3px rgba(251, 180, 55, .18); } .field__count { justify-self: end; font-size: 11px; color: var(--soft); margin-top: -2px; } .field.has-error input, .field.has-error textarea { border-color: #d0573b; } .field__error, .form-error { font-size: 12px; color: #c0462a; } .phone { display: flex; align-items: center; padding: 0; } .phone__code { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px 0 12px; border-right: 1px solid var(--line); flex: none; } .phone__flag { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex: none; } .phone__code select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-size: clamp(13px, 1.05vw, 15px); padding-right: 14px; cursor: pointer; } .phone__code select:focus { outline: none; } .phone__code .icon { position: absolute; right: 8px; width: 13px; height: 13px; pointer-events: none; } .phone input { border: 0; height: 100%; box-shadow: none !important; } .attach { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 8px; background: var(--white); } .attach__toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: clamp(13px, 1.2vw, 17px) 18px; font-size: clamp(13.5px, 1.05vw, 15px); text-align: left; } .attach__toggle .icon { width: 20px; height: 20px; } .attach__toggle small { color: var(--soft); font-size: inherit; } .attach__toggle .icon--chevron-down { margin-left: auto; transition: transform .4s var(--ease-out); } .attach.is-open .attach__toggle .icon--chevron-down { transform: rotate(180deg); } .attach__panel { padding: 0 16px 16px; } .dropzone { position: relative; display: grid; place-items: center; gap: 6px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: 8px; text-align: center; color: var(--muted); font-size: 13px; transition: border-color .3s, background-color .3s; } .dropzone.is-over { border-color: var(--sun); background: #fdf7ea; } .dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone .icon { width: 22px; height: 22px; color: var(--sun-deep); } .dropzone strong { color: var(--ink); font-weight: 500; } .file-list { display: grid; gap: 6px; margin-top: 10px; } .file-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--sand); border-radius: 6px; font-size: 13px; } .file-list button { font-size: 12px; color: var(--muted); text-decoration: underline; } .enquiry__submit { margin-top: clamp(16px, 2vw, 22px); } .enquiry__submit .btn { --btn-h: clamp(50px, 4.1vw, 60px); font-size: clamp(15px, 1.25vw, 17px); } .enquiry__submit .btn[disabled] { opacity: .7; cursor: progress; } .enquiry__privacy { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: clamp(11.5px, .9vw, 13px); color: var(--soft); text-align: center; } .enquiry__privacy .icon { width: 12px; height: 12px; flex: none; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-error { margin-top: 12px; text-align: center; } .enquiry__success { display: grid; justify-items: center; text-align: center; gap: 16px; padding: clamp(40px, 6vw, 90px) clamp(10px, 2vw, 30px); } .enquiry__success-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; } .enquiry__success-mark .icon { width: 34px; height: 34px; stroke-width: 2; } .enquiry__success h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.02; color: var(--ink); } .enquiry__success p { color: var(--muted); max-width: 400px; } .reach { border-top: 1px solid var(--line); padding-block: clamp(34px, 3vw, 44px) clamp(50px, 5vw, 80px); } .reach__head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-bottom: clamp(26px, 3.4vw, 50px); } .reach__head .display { font-size: clamp(2.3rem, 4.5vw, 4.5rem); line-height: .98; } .reach__head p { color: var(--muted); font-size: clamp(.95rem, 1.45vw, 1.28rem); line-height: 1.45; max-width: 440px; padding-top: clamp(8px, 1.6vw, 22px); } .reach__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .reach-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 4px; padding-right: clamp(14px, 2.4vw, 34px); padding-left: clamp(14px, 2.4vw, 34px); border-left: 1px solid var(--line); } .reach-card:first-child { padding-left: 0; border-left: 0; } .reach-card__icon { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; margin-bottom: clamp(14px, 1.8vw, 22px); transition: background-color .3s, border-color .3s; } .reach-card__icon .icon { width: 21px; height: 21px; } .reach-card h3 { font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; } .reach-card p { color: var(--soft); font-size: clamp(.9rem, 1.35vw, 1.2rem); line-height: 1.3; } .reach-card a.reach-card__link { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(18px, 2.4vw, 32px); font-size: clamp(.92rem, 1.4vw, 1.2rem); color: var(--ink); letter-spacing: -0.01em; } .reach-card a.reach-card__link .icon { width: 18px; height: 18px; transition: transform .35s var(--ease-out); } .reach-card:hover .reach-card__icon { background: var(--sun); border-color: var(--sun); } .reach-card:hover a.reach-card__link .icon { transform: translateX(5px); } /* 12. Studio -------------------------------------------------------------- */ .script { font-family: var(--script); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; } .script__line { display: block; width: 1.9em; height: 2px; margin-top: .2em; background: var(--sun); transform-origin: left center; } .studio-h2 { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.02; letter-spacing: -0.035em; } .studio-h2 em { font-size: 1.08em; letter-spacing: -0.01em; } .flow .studio-h2 { font-size: clamp(1.9rem, 2.55vw, 2.45rem); } .studio-hero { position: relative; min-height: calc(var(--header-h) + clamp(380px, 31.5vw, 470px)); padding-top: var(--header-h); display: flex; align-items: center; } .studio-hero__media { position: absolute; top: var(--header-h); right: 0; bottom: 0; width: 56.5%; -webkit-clip-path: polygon(14.5% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(14.5% 0, 100% 0, 100% 100%, 0 100%); background: #ddd; } .studio-hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 12%; } .studio-hero__inner { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--max)); } .studio-hero__copy { max-width: min(560px, 44%); padding-block: clamp(30px, 3.4vw, 50px); } .studio-hero__copy .eyebrow { margin-bottom: clamp(16px, 1.8vw, 24px); } .studio-hero__title { font-size: clamp(2.9rem, 5.6vw, 5.3rem); font-weight: 600; letter-spacing: -0.03em; line-height: .98; margin-bottom: clamp(16px, 1.6vw, 22px); } .studio-hero__title em { font-size: 1.1em; letter-spacing: -0.02em; } .studio-hero__text { color: #4a4844; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.5; max-width: 470px; margin-bottom: clamp(24px, 2.4vw, 34px); } .studio-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 2vw, 30px); } .studio-hero__story { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; } .studio-hero__story > span:last-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .studio-hero__play { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ink); transition: background-color .3s, border-color .3s, transform .4s var(--ease-out); } .studio-hero__play .icon { width: 16px; height: 16px; margin-left: 2px; } .studio-hero__story:hover .studio-hero__play { background: var(--sun); border-color: var(--sun); transform: scale(1.06); } .studio-hero__script { position: absolute; left: 10.5%; top: 52%; color: #fff; font-size: clamp(1.8rem, 2.9vw, 2.75rem); line-height: .98; transform: rotate(-9deg); transform-origin: left top; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); } .studio-hero__script .script__line { width: 2.4em; margin-top: .3em; transform: rotate(-6deg) translateX(.3em); } .studio-badge { position: absolute; right: clamp(16px, 3.3vw, 50px); bottom: 0; width: clamp(180px, 15.5vw, 226px); border-radius: 10px 10px 0 0; overflow: hidden; background: rgba(240, 242, 244, .55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: #1d1d1c; } .studio-badge__head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; } .studio-badge__head .icon { width: 26px; height: 26px; flex: none; stroke-width: 1.2; } .studio-badge__img { display: block; height: clamp(40px, 3.6vw, 52px); overflow: hidden; } .studio-badge__img img { width: 100%; height: 100%; object-fit: cover; } .logos--underline .logos__label { border-right: 0; position: relative; padding-bottom: 14px; } .logos--underline .logos__label::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--sun); } .who { padding-top: clamp(36px, 3.6vw, 56px); } .who__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .5fr); gap: clamp(24px, 3.2vw, 48px); align-items: start; } .who__collage { position: relative; padding-bottom: 2%; } .who__main { position: relative; width: 85%; aspect-ratio: 1.36; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 50px -36px rgba(20, 30, 40, .5); } .who__main img { width: 100%; height: 100%; object-fit: cover; } .who__main figcaption { position: absolute; left: 8%; bottom: 9%; color: #fff; font-size: clamp(10px, .85vw, 12.5px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.6; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); } .who__small { position: absolute; right: 0; top: 34%; width: 41.5%; aspect-ratio: 1.06; border-radius: 9px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 24px 44px -20px rgba(20, 20, 20, .45); } .who__small img { width: 100%; height: 100%; object-fit: cover; } .who__copy { padding-top: 4px; } .who__copy .eyebrow { font-size: 10px !important; } .who__copy .studio-h2 { margin-bottom: clamp(18px, 2vw, 28px); } .who__text p { color: #5b5853; font-size: clamp(.86rem, .98vw, .94rem); line-height: 1.55; max-width: 430px; } .who__text p + p { margin-top: 1em; } .who__side { padding-top: 10px; } .who__palm { position: relative; width: 88%; margin-left: auto; aspect-ratio: .8; } .who__palm::before { content: ""; position: absolute; left: -12%; top: 24%; bottom: 0; width: 14%; background: var(--sun); opacity: .85; } .who__palm img { position: relative; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } .who__quote { display: flex; gap: 14px; margin-top: clamp(24px, 3vw, 40px); font-size: clamp(.92rem, 1.05vw, 1rem); font-style: italic; line-height: 1.4; color: #2a2926; } .who__dash { flex: none; width: 30px; height: 2px; margin-top: .7em; background: var(--sun); } .numbers { display: grid; grid-template-columns: minmax(0, .95fr) repeat(4, minmax(0, 1fr)); padding-block: clamp(36px, 4vw, 60px) clamp(20px, 2.4vw, 36px); } .numbers__label { position: relative; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.7; padding-top: 6px; } .numbers__label::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 12px; background: var(--sun); } .number { display: flex; flex-direction: column; padding: 0 clamp(12px, 2vw, 30px); } .number + .number { border-left: 1px solid var(--line-strong); } .number:first-of-type { padding-left: 0; } .number__value { font-size: clamp(2rem, 2.6vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin-bottom: 14px; } .number__label { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; } .number__text { color: #6f6c66; font-size: 13.5px; line-height: 1.45; } .studio-row { padding-block: clamp(26px, 2.8vw, 42px); } .studio-row__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 2.3fr); gap: clamp(24px, 3.4vw, 50px); align-items: start; } .studio-row__head .eyebrow { font-size: 10px !important; margin-bottom: clamp(14px, 1.4vw, 20px); } .studio-row__text { color: #5b5853; font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.55; max-width: 360px; margin: clamp(16px, 1.6vw, 24px) 0 clamp(22px, 2.2vw, 30px); } .btn--small { --btn-h: 44px; font-size: 14px; padding-left: 22px; } .diff__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, .9vw, 14px); } .diff-card { padding: clamp(18px, 1.8vw, 26px) clamp(14px, 1.4vw, 20px) clamp(20px, 2vw, 28px); background: #f5f4f0; border-radius: 6px; transition: background-color .4s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .diff-card__icon { display: block; width: clamp(28px, 2.4vw, 36px); height: clamp(28px, 2.4vw, 36px); margin-bottom: clamp(16px, 1.8vw, 24px); transition: color .3s, transform .5s var(--ease-out); } .diff-card__icon .icon { width: 100%; height: 100%; stroke-width: 1.3; } .diff-card h3 { font-size: clamp(.92rem, 1.04vw, 1rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: clamp(12px, 1.3vw, 18px); } .diff-card p { color: #6f6c66; font-size: clamp(.78rem, .86vw, .84rem); line-height: 1.5; } .diff-card:hover { background: var(--white); transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(40, 30, 10, .45); } .diff-card:hover .diff-card__icon { color: var(--sun-deep); transform: scale(1.08) rotate(-4deg); } .people__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px); } .member__photo { position: relative; aspect-ratio: .87; border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, #efe6d6, #e3d6bf); display: grid; place-items: center; } .member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .member:hover .member__photo img { transform: scale(1.05); } .member__initials { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 6vw, 5rem); color: #c9b48f; } .member__name { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 500; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease-out); } .member:hover .member__name, .member:focus-within .member__name { opacity: 1; transform: none; } .member figcaption { display: flex; gap: 10px; margin-top: 14px; color: #6f6c66; font-size: 12.5px; line-height: 1.45; padding-left: 6px; } .member__dash { flex: none; width: 12px; height: 1.5px; margin-top: .7em; background: var(--sun); } .flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 14px; } .flow-step { position: relative; padding: 0 clamp(14px, 1.6vw, 24px); } .flow-step:first-child { padding-left: 0; } .flow-step + .flow-step { border-left: 1px solid var(--line-strong); } .flow-step__num { display: block; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; } .flow-step__title { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .flow-step__text { color: #6f6c66; font-size: 12.5px; line-height: 1.5; } .flow-step__arrow { position: absolute; right: 8px; top: calc(clamp(1.25rem, 1.6vw, 1.5rem) + 14px); width: 13px; height: 13px; color: #6f6c66; transition: transform .6s var(--ease-out), opacity .6s; } .flow-step__arrow .icon { width: 100%; height: 100%; } .js.motion .flow-step__arrow { opacity: 0; transform: translateX(-10px); } .js.motion .flow-step.is-in .flow-step__arrow { opacity: 1; transform: none; } .local { display: grid; grid-template-columns: 43% minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 2.6vw, 40px); margin-top: clamp(10px, 1.2vw, 20px); padding-right: var(--gutter); min-height: clamp(240px, 16vw, 260px); } .local__media { position: relative; align-self: stretch; min-height: 230px; } .local__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 98%); mask-image: linear-gradient(to right, #000 62%, transparent 98%); } .local__caption { position: absolute; left: max(var(--gutter), 6%); bottom: 18%; color: #fff; font-size: clamp(10.5px, .95vw, 13px); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.7; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .seal { position: absolute; right: 2%; top: 5%; width: clamp(96px, 8.7vw, 128px); aspect-ratio: 1; display: grid; place-items: center; color: var(--ink); } .seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .seal__ring text { font-size: 9.6px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; fill: currentColor; } .motion .seal__ring { animation: seal-spin 28s linear infinite; } @keyframes seal-spin { to { transform: rotate(360deg); } } .seal__icon { width: 36%; color: var(--sun-deep); } .seal__icon .icon { width: 100%; height: 100%; stroke-width: 1.6; } .local__copy { padding-block: clamp(20px, 2vw, 30px); } .local__copy .studio-h2 { margin-bottom: clamp(14px, 1.5vw, 22px); } .local__text p { color: #5b5853; font-size: clamp(.8rem, .9vw, .88rem); line-height: 1.55; max-width: 470px; } .local__text p + p { margin-top: .9em; } .local__side { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); } .local__img { width: clamp(150px, 14vw, 205px); aspect-ratio: 1.1; border-radius: 4px; overflow: hidden; box-shadow: 0 24px 40px -28px rgba(20, 20, 20, .5); } .local__img img { width: 100%; height: 100%; object-fit: cover; } .local__script { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: .95; transform: rotate(-6deg); color: var(--ink); } .local__script .script__line { margin-top: .5em; width: 2em; } .cta-row { margin-top: clamp(30px, 3vw, 46px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cta-row__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; align-items: end; gap: clamp(20px, 3vw, 50px); padding-block: clamp(22px, 2.4vw, 34px); } .cta-row .eyebrow { font-size: 10px !important; margin-bottom: 12px; } .cta-row__title { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -0.035em; line-height: 1.05; } .cta-row__text { color: #6f6c66; font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.5; padding-bottom: 4px; } .cta-row .btn { margin-right: clamp(0px, 3vw, 50px); } /* 13. Blog & articles ----------------------------------------------------- */ .page-hero { padding-top: calc(var(--header-h) + clamp(30px, 5vw, 80px)); padding-bottom: clamp(30px, 4vw, 60px); } .page-hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; } .page-hero .display { font-size: clamp(2.8rem, 6.6vw, 6.6rem); line-height: .92; letter-spacing: -0.055em; } .page-hero p { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.18rem); max-width: 430px; padding-bottom: 8px; } .filters { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 0 clamp(26px, 3vw, 40px); } .filters a { display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; background: var(--white); transition: background-color .3s, border-color .3s; } .filters a:hover { border-color: var(--ink); } .filters a.is-current { background: var(--sun); border-color: var(--sun); } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px) clamp(14px, 1.6vw, 24px); } .pagination { display: flex; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 70px); } .pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; } .pagination .page-numbers.current { background: var(--sun); border-color: var(--sun); } .pagination a.page-numbers:hover { border-color: var(--ink); } .empty-state { padding: 60px 0; color: var(--muted); font-size: 1.1rem; } /* Journal (posts page) */ .journal-hero { position: relative; padding-top: calc(var(--header-h) - clamp(0px, 1.6vw, 24px)); } .journal-hero__art { position: absolute; top: 0; right: 0; width: 27%; max-width: 520px; height: clamp(240px, 23vw, 400px); z-index: 0; pointer-events: none; } .journal-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: left top; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to top, transparent, #000 35%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to top, transparent, #000 35%); mask-composite: intersect; } .journal-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px); } .journal-hero__main { padding-block: clamp(8px, 1vw, 16px) 0; } .journal-hero__main .eyebrow { margin-bottom: clamp(10px, 1.2vw, 18px); } .journal-hero__title { font-size: clamp(3.3rem, 9.6vw, 9.2rem); font-weight: 700; letter-spacing: -0.07em; line-height: .9; } .journal-hero__title em { font-size: 1.06em; letter-spacing: -0.035em; padding-left: .04em; } .journal-hero__tagline { margin-top: clamp(10px, 1.2vw, 18px); font-size: clamp(1.05rem, 1.75vw, 1.55rem); font-weight: 300; color: #85817b; letter-spacing: -0.015em; line-height: 1.25; } .journal-hero__side { position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-left: clamp(24px, 3.4vw, 50px); border-left: 1px solid var(--line-strong); min-height: clamp(90px, 8.5vw, 125px); } .journal-hero__side p { flex: 1; max-width: 300px; color: #85817b; font-weight: 300; font-size: clamp(.98rem, 1.3vw, 1.18rem); line-height: 1.42; } .journal-hero__jump { flex: none; display: grid; place-items: center; width: clamp(54px, 5vw, 72px); height: clamp(54px, 5vw, 72px); border-radius: 50%; background: var(--sun); color: var(--ink); box-shadow: 0 16px 30px -14px rgba(233, 158, 20, .8); transition: transform .4s var(--ease-out), background-color .3s; } .journal-hero__jump .icon { width: 20px; height: 20px; transition: transform .4s var(--ease-out); } .journal-hero__jump:hover { background: #ffc24f; } .journal-hero__jump:hover .icon { transform: rotate(90deg); } .journal-featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(14px, 1.5vw, 22px); margin-top: clamp(20px, 2vw, 30px); } .journal-featured__media { position: relative; display: block; min-height: clamp(300px, 24vw, 350px); overflow: hidden; border-radius: 4px; background: #ddd; } .journal-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); } .journal-featured__media:hover img { transform: scale(1.03); } .journal-badge { position: absolute; left: clamp(14px, 2.2vw, 30px); bottom: clamp(14px, 2.2vw, 30px); display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px 0 9px; border-radius: 999px; background: rgba(20, 18, 15, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .journal-badge__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--sun); } .journal-featured__card { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) clamp(18px, 1.6vw, 24px); background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 24px 50px -36px rgba(40, 30, 10, .35); } .journal-featured__title { font-size: clamp(2.3rem, 4.2vw, 3.85rem); line-height: .95; letter-spacing: -0.025em; margin: clamp(12px, 1.4vw, 20px) 0 clamp(14px, 1.5vw, 22px); } .journal-featured__title a:hover { color: #3a3835; } .journal-featured__text { color: #85817b; font-weight: 300; font-size: clamp(1rem, 1.38vw, 1.25rem); line-height: 1.4; max-width: 420px; } .journal-featured__foot { margin-top: auto; padding-top: clamp(18px, 2vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .journal-featured__link { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; white-space: nowrap; } .journal-featured__link .circle-btn { width: 52px; height: 52px; border-color: var(--ink); } .journal-featured__link:hover .circle-btn { background: var(--sun); border-color: var(--sun); } .journal-featured__link:hover .circle-btn .icon { transform: translateX(3px); } .journal-featured__thumbs { display: flex; gap: 12px; } .journal-featured__thumbs span { width: clamp(52px, 5vw, 72px); aspect-ratio: .9; border-radius: 4px; overflow: hidden; background: #ddd; } .journal-featured__thumbs img { width: 100%; height: 100%; object-fit: cover; } .story-meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: clamp(9px, .7vw, 10px); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--soft); } .story-meta__cat { color: var(--sun-deep); } .journal-bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-block: clamp(30px, 3vw, 44px) clamp(18px, 1.8vw, 26px); scroll-margin-top: 20px; } .journal-bar .eyebrow { margin: 0; font-size: 10.5px !important; letter-spacing: .24em !important; color: var(--muted); } .journal-filters { display: flex; gap: clamp(6px, .8vw, 12px); } .journal-filters a { display: inline-flex; align-items: center; height: 42px; padding: 0 clamp(16px, 1.6vw, 22px); border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 14px; white-space: nowrap; transition: background-color .3s, border-color .3s, box-shadow .3s; } .journal-filters a:hover { border-color: var(--ink); } .journal-filters a.is-current { background: var(--sun); border-color: var(--sun); font-weight: 500; box-shadow: 0 10px 22px -14px rgba(233, 158, 20, .9); } .journal-search { justify-self: end; display: flex; align-items: center; height: 46px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); transition: border-color .3s; } .journal-search input { width: 0; padding: 0; border: 0; background: none; outline: none; font-size: 14px; transition: width .45s var(--ease-out), padding .45s var(--ease-out); } .journal-search.is-open input { width: clamp(150px, 15vw, 220px); padding-left: 18px; } .journal-search.is-open, .journal-search:hover { border-color: var(--ink); } .journal-search__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; } .journal-search__btn .icon { width: 16px; height: 16px; } .journal-results { transition: opacity .26s var(--ease); } .journal-results.is-loading { opacity: 0; } .journal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.4vw, 36px) clamp(14px, 2.2vw, 34px); } .journal-grid--lead { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.24fr); } .post-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); } .post-card:hover { box-shadow: 0 26px 50px -30px rgba(40, 30, 10, .4); } .post-card__media { height: clamp(150px, 12.7vw, 190px); overflow: hidden; background: #ddd; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); } .post-card:hover .post-card__media img { transform: scale(1.05); } .post-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(14px, 1.3vw, 20px) clamp(14px, 1.3vw, 20px) clamp(16px, 1.4vw, 22px); } .post-card .story-meta { margin-bottom: clamp(8px, .8vw, 12px); } .post-card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 10px; } .post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .post-card__text { color: #8a867f; font-weight: 300; font-size: clamp(.88rem, 1.05vw, .98rem); line-height: 1.38; margin-bottom: 16px; } .post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 500; } .post-card__more .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-out); } .post-card:hover .post-card__more .icon { transform: translateX(4px); } .post-card--compact .post-card__media { height: clamp(90px, 7.3vw, 106px); } .post-card--compact .post-card__title { font-size: clamp(1.25rem, 1.6vw, 1.45rem); line-height: 1.04; margin-bottom: 14px; } .post-card--compact .post-card__body { padding-bottom: 14px; } .quote-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.2vw, 32px); background: var(--sun); border-radius: 4px; overflow: hidden; color: var(--ink); transition: box-shadow .5s var(--ease-out); } .quote-card:hover { box-shadow: 0 26px 50px -26px rgba(233, 158, 20, .8); } .quote-card__art { position: absolute; top: 0; right: 0; width: 44%; height: 58%; pointer-events: none; } .quote-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: left top; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to left, #000 50%, transparent), linear-gradient(to top, transparent, #000 45%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 50%, transparent), linear-gradient(to top, transparent, #000 45%); mask-composite: intersect; transition: transform 1.4s var(--ease-out); transform-origin: top right; } .quote-card:hover .quote-card__art img { transform: rotate(-3deg) scale(1.05); } .quote-card > span:not(.quote-card__art) { position: relative; } .quote-card__dash { width: 36px; height: 2px; background: var(--ink); margin: clamp(14px, 1.6vw, 22px) 0 clamp(18px, 2vw, 28px); } .quote-card__eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: clamp(12px, 1.2vw, 16px); } .quote-card__title { display: block; font-size: clamp(2rem, 2.85vw, 2.55rem); line-height: .97; color: var(--ink); margin-bottom: clamp(18px, 2vw, 28px); } .quote-card__text { font-size: clamp(.92rem, 1.1vw, 1.02rem); line-height: 1.42; max-width: 250px; margin-bottom: clamp(20px, 2vw, 30px); } .quote-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 600; } .quote-card__link .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-out); } .quote-card:hover .quote-card__link .icon { transform: translateX(4px); } .journal-banner { position: relative; display: flex; align-items: center; min-height: clamp(230px, 18.5vw, 270px); margin-top: clamp(22px, 2.2vw, 32px); border-radius: 4px; overflow: hidden; background: #0c0c0b; color: #fff; isolation: isolate; } .journal-banner__media { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: -1; } .journal-banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0c0c0b 0%, rgba(12, 12, 11, .6) 18%, rgba(12, 12, 11, 0) 45%); } .journal-banner__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 1.6s var(--ease-out); } .journal-banner:hover .journal-banner__media img { transform: scale(1.04); } .journal-banner__copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2.2vw, 30px) clamp(24px, 4.4vw, 62px); max-width: 520px; } .journal-banner__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-bottom: clamp(10px, 1.1vw, 16px); } .journal-banner__eyebrow .eyebrow__dash { width: 36px; } .journal-banner__title { display: block; color: #fff; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: .98; margin-bottom: clamp(10px, 1.2vw, 16px); } .journal-banner__title em { color: var(--sun); } .journal-banner__text { font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.38; letter-spacing: .05em; color: rgba(255, 255, 255, .9); max-width: 340px; margin-bottom: clamp(8px, 1vw, 12px); } .journal-banner__link { display: inline-flex; align-items: center; gap: 22px; font-size: 13.5px; font-weight: 500; } .journal-banner__link .circle-btn { width: 44px; height: 44px; border-color: var(--sun); color: var(--sun); } .journal-banner:hover .journal-banner__link .circle-btn { background: var(--sun); color: var(--ink); } .journal-more { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); align-items: start; margin-top: clamp(22px, 2.2vw, 30px); } .journal-more__intro { padding-top: clamp(14px, 2vw, 30px); } .journal-more__intro h2 { font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: .98; margin-bottom: clamp(12px, 1.4vw, 20px); } .journal-more__intro p { color: #85817b; font-weight: 300; font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height: 1.4; max-width: 300px; margin-bottom: clamp(18px, 2vw, 28px); } .pill-link { display: inline-flex; align-items: center; gap: 18px; height: 46px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); font-size: 14px; font-weight: 500; transition: border-color .3s, background-color .3s; } .pill-link .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-out); } .pill-link:hover { border-color: var(--ink); } .pill-link:hover .icon { transform: translateX(4px); } .journal-end { height: clamp(50px, 5vw, 80px); } .article-hero { padding-top: calc(var(--header-h) + clamp(30px, 4vw, 70px)); } .article-hero__inner { max-width: 940px; } .article-hero .post-card__meta { margin-bottom: 20px; } .article-hero h1 { font-size: clamp(2.4rem, 5.4vw, 5.2rem); font-weight: 600; letter-spacing: -0.05em; line-height: .98; color: var(--ink); margin-bottom: clamp(20px, 2.4vw, 30px); } .article-hero__excerpt { font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--muted); line-height: 1.45; max-width: 720px; } .article-cover { margin-block: clamp(30px, 4vw, 60px); } .article-cover .container > div { aspect-ratio: 16 / 8; overflow: hidden; border-radius: 6px; } .article-cover img { width: 100%; height: 115%; object-fit: cover; } .article-layout { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: clamp(30px, 6vw, 100px); justify-content: center; padding-bottom: clamp(50px, 6vw, 90px); } .article-aside { position: sticky; top: 100px; align-self: start; display: grid; gap: 22px; font-size: 13px; color: var(--muted); } .article-aside strong { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; font-weight: 600; } .share { display: flex; gap: 10px; } .share a, .share button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background-color .3s, border-color .3s; } .share a:hover, .share button:hover { background: var(--sun); border-color: var(--sun); } .share .icon { width: 16px; height: 16px; } .prose { font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.75; color: #33312d; } .prose > * + * { margin-top: 1.25em; } .prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); margin-top: 1.8em; } .prose h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-top: 1.6em; } .prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: .4em; } .prose li::marker { color: var(--sun-deep); } .prose blockquote { padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--sun); font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.2; color: var(--ink); } .prose blockquote p { margin: 0; } .prose img, .prose figure { border-radius: 6px; } .prose figcaption { font-size: 13px; color: var(--soft); margin-top: 8px; } .prose .alignwide { margin-inline: calc(-1 * clamp(0px, 8vw, 140px)); } .prose .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; } .prose pre { background: var(--sand); padding: 16px; border-radius: 6px; overflow: auto; font-size: 14px; } .prose hr { border: 0; border-top: 1px solid var(--line); } .prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .prose td, .prose th { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; } .related { border-top: 1px solid var(--line); } /* 14. Case study ---------------------------------------------------------- */ .case-hero { padding-top: calc(var(--header-h) + clamp(30px, 4vw, 70px)); } .case-hero__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; padding-bottom: clamp(30px, 4vw, 60px); } .case-hero h1 { font-size: clamp(3rem, 7.6vw, 7.6rem); font-weight: 600; letter-spacing: -0.06em; line-height: .9; color: var(--ink); margin-bottom: 18px; } .case-hero__sub { font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); max-width: 620px; } .case-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; border-top: 1px solid var(--line); padding-top: 22px; } .case-meta dt { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; } .case-meta dd { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.5; } .case-meta dd a:hover { color: var(--sun-deep); } .case-cover { position: relative; height: clamp(360px, 52vw, 820px); overflow: hidden; } .case-cover img { width: 100%; height: 118%; object-fit: cover; } .case-cover .play-link { position: absolute; right: var(--gutter); bottom: clamp(24px, 3vw, 44px); color: #fff; } .case-body { padding-block: clamp(50px, 6vw, 100px); } .case-body__inner { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 6vw, 100px); } .case-body__intro { position: sticky; top: 100px; align-self: start; } .case-body__intro p { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4; color: var(--ink); letter-spacing: -0.02em; } .next-case { position: relative; display: block; overflow: hidden; color: #fff; background: #111; isolation: isolate; } .next-case__media { position: absolute; inset: 0; z-index: -1; opacity: .6; transition: opacity .6s, transform 1.4s var(--ease-out); } .next-case__media img { width: 100%; height: 100%; object-fit: cover; } .next-case:hover .next-case__media { opacity: .75; transform: scale(1.04); } .next-case__inner { display: flex; align-items: end; justify-content: space-between; gap: 20px; min-height: clamp(260px, 26vw, 400px); padding-block: clamp(30px, 4vw, 60px); } .next-case .eyebrow { color: #fff; } .next-case h2 { font-size: clamp(2.6rem, 6.4vw, 6.4rem); font-weight: 600; letter-spacing: -0.055em; line-height: .92; } .next-case .circle-btn { width: 64px; height: 64px; border-color: #fff; color: #fff; } .next-case:hover .circle-btn { background: var(--sun); border-color: var(--sun); color: var(--ink); } .term-hero .display { font-size: clamp(2.8rem, 6.4vw, 6.4rem); } .back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 26px; } .back-link .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-out); } .back-link:hover .icon { transform: translateX(-4px); } .error-hero { min-height: 80vh; display: grid; align-items: center; padding-top: var(--header-h); } .error-hero .display { font-size: clamp(3.4rem, 10vw, 10rem); margin-bottom: 20px; } .error-hero p { color: var(--muted); font-size: 1.15rem; margin-bottom: 30px; max-width: 460px; } .search-form { display: flex; gap: 8px; max-width: 520px; margin-top: 20px; } .search-form input[type="search"] { flex: 1; height: 50px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; } .search-form button { height: 50px; padding: 0 24px; border-radius: 999px; background: var(--sun); font-weight: 500; } /* 15. Motion helpers ------------------------------------------------------ */ /* Starting states are only applied when JS (and motion) is on, so content never hides without it. */ .js.motion [data-reveal="fade"], .js.motion [data-reveal="card"], .js.motion [data-reveal="image"], .js.motion [data-reveal="wipe"] { opacity: 0; } .js.motion [data-reveal="script"] { -webkit-clip-path: inset(-20% 100% -20% 0); clip-path: inset(-20% 100% -20% 0); } .js.motion [data-reveal="lines"] .line__inner { transform: translateY(105%); } .js.motion [data-reveal="lines"] .line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } .js.motion [data-reveal="eyebrow"] .eyebrow__dash { transform: scaleX(0); } .js.motion [data-reveal="eyebrow"] > span:last-child { opacity: 0; } .js.motion [data-reveal="stagger"] > * { opacity: 0; } .js.motion .tiles.is-loading .tile { opacity: 0; } .js.motion .gold-line path[data-draw] { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .approach-card__media { transform: none !important; } .hero-home__slide img { transform: none !important; } } /* 16. Responsive ---------------------------------------------------------- */ @media (max-width: 1100px) { .who__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .who__side { grid-column: 1 / -1; display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: end; } .who__palm { width: 100%; margin: 0; } .studio-row__inner { grid-template-columns: 1fr; } .diff__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .local { grid-template-columns: 1fr 1fr; padding-right: 0; } .local__copy { padding-right: var(--gutter); } .local__side { grid-column: 1 / -1; padding-inline: var(--gutter); } .journal-grid, .journal-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journal-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } .journal-more__intro { grid-column: 1 / -1; padding-top: 10px; } .journal-bar { grid-template-columns: 1fr auto; } .journal-bar .eyebrow { grid-column: 1 / -1; } .journal-filters { overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 4px; } .journal-filters::-webkit-scrollbar { display: none; } .site-nav { display: none; } .pillars__inner { grid-template-columns: 36% 1fr; } .pillars__panels { grid-column: 1 / -1; } .pillar-panel { padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .pillar-panel__eyebrow, .pillar-panel__title { grid-column: 1; } .pillar-panel__text { grid-column: 1; } .pillar-panel__label, .pillar-panel__list, .pillar-panel .btn { grid-column: 2; } .pillar-panel__label { grid-row: 1; align-self: end; } .pillar-panel__list { grid-row: 2 / span 2; align-content: start; } .pillar-panel .btn { grid-row: 4; justify-self: start; } .approach__inner { grid-template-columns: 1fr; } .ways__inner { grid-template-columns: repeat(3, 1fr); } .ways__head { grid-column: 1 / -1; border-right: 0; padding-bottom: 20px; } .way:first-of-type { padding-left: 0; } .cta--image-right .cta__inner { grid-template-columns: 1fr 1px 1fr; } .cta__image { display: none; } .reach__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } .reach-card:nth-child(3) { padding-left: 0; border-left: 0; } .team__grid { grid-template-columns: repeat(2, 1fr); } .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__nav { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 860px) { .studio-hero { flex-direction: column-reverse; align-items: stretch; min-height: 0; } .studio-hero__media { position: relative; top: 0; width: 100%; height: clamp(320px, 70vw, 460px); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .studio-hero__copy { max-width: none; padding-block: 10px 30px; } .studio-hero__script { left: 6%; top: 40%; } .who__inner { grid-template-columns: 1fr; } .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; } .numbers__label { grid-column: 1 / -1; } .number:nth-of-type(3) { padding-left: 0; border-left: 0; } .people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .flow-step:nth-child(odd) { padding-left: 0; border-left: 0; } .flow-step__arrow { display: none; } .local { grid-template-columns: 1fr; } .local__media { min-height: 260px; } .local__media > img { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); } .local__copy { padding-inline: var(--gutter); } .cta-row__inner { grid-template-columns: 1fr; align-items: start; } .journal-hero__art { width: 46%; opacity: .7; } .journal-hero__inner, .journal-featured { grid-template-columns: 1fr; } .journal-hero__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-strong); padding-top: 22px; min-height: 0; } .journal-featured__media { aspect-ratio: 16 / 10; min-height: 0; } .journal-banner { flex-direction: column; align-items: stretch; } .journal-banner__media { position: relative; width: 100%; height: 220px; } .journal-banner__media::after { background: linear-gradient(0deg, #0c0c0b 0%, rgba(12, 12, 11, 0) 55%); } .journal-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root { --header-h: 76px; } .site-header .btn { display: none; } .hero--home { min-height: 0; display: block; padding-bottom: 0; } .hero-home__media { position: relative; width: 100%; height: 118vw; max-height: 640px; margin-top: 10px; } .hero--home .hero__inner { padding-bottom: 36px; } .blob--home { -webkit-clip-path: none; clip-path: none; border-radius: 40% 0 0 0 / 22% 0 0 0; } .hero--home { display: flex; flex-direction: column-reverse; } .gold-line--home { display: none; } .hero--work, .hero--expertise, .hero--studio { min-height: 0; display: flex; flex-direction: column-reverse; } .hero__art { position: relative; width: 100% !important; height: 72vw; } .hero--work .hero-side, .hero--expertise .hero-side, .hero--studio .hero-side { display: none; } .hero__copy { padding-bottom: 40px !important; } .work-grid, .post-grid, .dark-cards, .values__grid { grid-template-columns: 1fr; } .post-grid { grid-template-columns: 1fr 1fr; } .home-expertise__inner, .story__inner, .careers__inner, .page-hero__inner, .case-hero__inner, .case-body__inner, .reach__head, .contact-hero__inner { grid-template-columns: 1fr; } .case-body__intro { position: static; } .perspective__media { width: 100%; opacity: .55; } .perspective__caption { display: none; } .cta__inner, .cta--blob-left .cta__inner, .cta--image-right .cta__inner, .cta--plain .cta__inner { grid-template-columns: 1fr; padding-block: 60px; } .cta--blob-left .cta__head, .cta--blob-left .cta__body { grid-column: 1; } .cta__blob { position: relative; width: 70%; height: 220px; } .cta--image-right .cta__inner::before { display: none; } .cta--image-right .cta__head, .cta--image-right .cta__body { grid-column: 1; grid-row: auto; padding: 0; } .cta--plain .cta__title { white-space: normal; } .logos__inner { flex-wrap: wrap; } .logos__label { border-right: 0; padding-right: 0; } .logos__viewport { order: 3; flex-basis: 100%; } .logos__arrows { margin-left: auto; } .work-filter__bar { grid-template-columns: 1fr; gap: 16px; } .work-filter__note { justify-self: start; } .tiles__row { flex-wrap: wrap; } .tile { flex: 1 1 calc(50% - 4px) !important; height: 230px; } .fp-slide { grid-template-columns: 1fr; } .fp-slide__copy { padding: 30px var(--gutter) 70px; order: 2; } .fp-slide__media { margin: 0; height: 70vw; -webkit-clip-path: none; clip-path: none; } .fp-slide .hero-side { display: none; } .fp-slide .play-link { bottom: auto; top: calc(70vw - 80px); } .pillars__inner { grid-template-columns: 1fr; } .pillars__stage { min-height: 70vw; order: -1; } .pillars__tabs { order: 0; } .pillar-panel { display: block; } .approach-cards { grid-template-columns: 1fr 1fr; } .approach-card__media { transform: none !important; height: 50vw; } .ways__inner { grid-template-columns: 1fr; } .way { border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 0; } .contact-hero__bg { width: 100%; height: 40%; opacity: .5; } .service-grid { grid-template-columns: 1fr 1fr; } .field-grid { grid-template-columns: 1fr; } .stats, .process__grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(3), .step:nth-child(3) { padding-left: 0; border-left: 0; } .step { padding-bottom: 30px; } .article-layout { grid-template-columns: 1fr; } .article-aside { position: static; grid-auto-flow: column; justify-content: start; } .site-menu__inner { grid-template-columns: 1fr; gap: 40px; align-self: start; padding-top: 30px; } .site-menu { align-items: start; overflow-y: auto; } .site-footer__top { grid-template-columns: 1fr; justify-items: start; } .site-footer .socials { justify-self: start; } .site-footer__nav ul { flex-wrap: wrap; gap: 14px 24px; } .site-footer__bottom { flex-direction: column; gap: 6px; } } @media (max-width: 600px) { .diff__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .number { padding-inline: 0 14px !important; border-left: 0 !important; } .flow__steps { grid-template-columns: 1fr; } .flow-step { padding-left: 0 !important; border-left: 0 !important; } .who__side { grid-template-columns: 110px 1fr; } .studio-badge { width: 196px; right: 14px; } .studio-badge__head { font-size: 9px; padding: 12px; gap: 10px; } .journal-grid, .journal-grid--lead, .journal-more { grid-template-columns: 1fr; } .journal-featured__thumbs span { width: 46px; } .journal-featured__thumbs { gap: 8px; } .journal-featured__link .circle-btn { width: 44px; height: 44px; } .journal-search.is-open input { width: 130px; } .post-grid, .team__grid { grid-template-columns: 1fr; } .tile { flex: 1 1 100% !important; } .reach__grid { grid-template-columns: 1fr; } .reach-card { padding-left: 0 !important; border-left: 0 !important; } .service-grid { grid-template-columns: 1fr 1fr; } .enquiry__progress { flex-basis: 26%; } .approach-card__media { height: 56vw; } .stats, .process__grid { grid-template-columns: 1fr; } .stat, .step { padding-left: 0 !important; border-left: 0 !important; } .case-meta { grid-template-columns: 1fr; } .hero__actions { gap: 18px; } } /* Comments */ .comments { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--line); } .comment-list { list-style: none !important; padding: 0 !important; } .comment-list .comment { padding: 1em 0; border-bottom: 1px solid var(--line); } .comment-list .avatar { border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 10px; } .comment-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; } .comment-form .submit { height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--sun); font-weight: 500; cursor: pointer; }