:root {
--ink: #122023;
--ink-deep: #091315;
--ink-soft: #263437;
--paper: #f3efe6;
--paper-light: #fbf8f1;
--white: #fffdf8;
--yellow: #f0b515;
--yellow-light: #ffca43;
--sage: #52635e;
--muted: #667174;
--line: rgba(18, 32, 35, 0.16);
--line-light: rgba(255, 255, 255, 0.18);
--shell: 1480px;
--gutter: clamp(22px, 5vw, 76px);
--display: Bahnschrift, "DIN Alternate", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
--sans: Aptos, "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--ink-deep);
}
body {
margin: 0;
color: var(--ink);
background: var(--paper-light);
font-family: var(--sans);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.menu-open {
overflow: hidden;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--yellow-light);
outline-offset: 4px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
blockquote {
margin-top: 0;
}
h1,
h2,
h3 {
text-wrap: balance;
}
svg {
display: block;
}
.shell {
width: min(100%, var(--shell));
margin-inline: auto;
padding-inline: var(--gutter);
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
position: fixed;
z-index: 9999;
top: 14px;
left: 14px;
width: auto;
height: auto;
padding: 12px 18px;
clip: auto;
color: var(--ink);
background: var(--yellow-light);
border-radius: 999px;
}
.skip-link {
position: absolute;
left: -9999px;
}
.site-main {
overflow: clip;
}
.overline {
margin-bottom: 22px;
color: var(--sage);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
line-height: 1.3;
text-transform: uppercase;
}
.overline::before {
display: inline-block;
width: 34px;
height: 2px;
margin: 0 13px 3px 0;
background: var(--yellow);
content: "";
}
.overline--light {
color: #afbab8;
}
.button {
position: relative;
min-height: 58px;
padding: 0 10px 0 23px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 14px 14px 14px 4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.018em;
line-height: 1;
transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.button::after,
.header-contact::after,
.nav-contact-mobile::after {
position: absolute;
top: 1px;
right: 1px;
left: 1px;
height: 42%;
border-radius: 12px 12px 50% 50% / 12px 12px 18% 18%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
content: "";
pointer-events: none;
}
.button svg,
.text-link svg,
.header-contact svg,
.nav-contact-mobile svg,
.expertise-row__link svg,
.journal-card__link svg {
width: 36px;
height: 36px;
padding: 9px;
border-radius: 10px 10px 10px 3px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 180ms ease;
}
.button:hover svg,
.header-contact:hover svg,
.text-link:hover svg,
.expertise-row__link:hover svg,
.journal-card__link:hover svg {
transform: translateX(2px);
}
.button:hover,
.button:focus-visible {
transform: translateY(-2px);
}
.button:active {
transform: translateY(1px);
}
.button--primary {
color: var(--ink-deep);
background: linear-gradient(145deg, #ffd96d 0%, #ffca43 55%, #efb51e 100%);
border-color: rgba(255, 244, 199, 0.72);
border-bottom-color: #ca920d;
box-shadow: 0 8px 18px rgba(155, 109, 8, 0.22), inset 0 1px rgba(255, 255, 255, 0.52);
}
.button--primary svg {
color: var(--yellow-light);
background: linear-gradient(145deg, #1a2b2e, #071113);
box-shadow: 0 3px 7px rgba(9, 19, 21, 0.24), inset 0 1px rgba(255, 255, 255, 0.11);
}
.button--primary:hover,
.button--primary:focus-visible {
background: linear-gradient(145deg, #ffe18b 0%, #ffd05a 58%, #f2ba26 100%);
box-shadow: 0 11px 23px rgba(155, 109, 8, 0.26), inset 0 1px rgba(255, 255, 255, 0.58);
}
.button--primary:active {
box-shadow: 0 4px 10px rgba(155, 109, 8, 0.2), inset 0 1px rgba(255, 255, 255, 0.42);
}
.button--dark {
color: var(--white);
background: linear-gradient(145deg, #1b2d30 0%, #122023 58%, #091315 100%);
border-color: rgba(255, 255, 255, 0.1);
border-bottom-color: #03090a;
box-shadow: 0 8px 18px rgba(9, 19, 21, 0.18), inset 0 1px rgba(255, 255, 255, 0.09);
}
.button--dark svg {
color: var(--ink-deep);
background: linear-gradient(145deg, #ffe188, #ffca43 64%, #e8a90f);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.19), inset 0 1px rgba(255, 255, 255, 0.55);
}
.button--dark:hover,
.button--dark:focus-visible {
background: linear-gradient(145deg, #22363a 0%, #14272a 58%, #091315 100%);
box-shadow: 0 11px 23px rgba(9, 19, 21, 0.22), inset 0 1px rgba(255, 255, 255, 0.11);
}
.button--dark:active {
box-shadow: 0 4px 10px rgba(9, 19, 21, 0.17), inset 0 1px rgba(255, 255, 255, 0.07);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding-block: 8px;
border-bottom: 1px solid currentColor;
color: var(--ink);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.015em;
}
.text-link span {
font-size: 18px;
line-height: 1;
}
.text-link svg {
width: 28px;
height: 28px;
padding: 7px;
border: 1px solid currentColor;
border-radius: 8px 8px 8px 3px;
}
.expertise-row__link svg,
.journal-card__link svg {
width: 26px;
height: 26px;
padding: 5px;
border-radius: 0;
}
.text-link--dark {
color: var(--ink-deep);
}
.text-link--light {
color: var(--white);
} .site-header {
position: fixed;
z-index: 100;
top: 16px;
left: 0;
width: 100%;
pointer-events: none;
}
.site-header__inner {
position: relative;
width: min(calc(100% - 40px), 1380px);
min-height: 72px;
margin-inline: auto;
padding: 8px 8px 8px 22px;
border: 1px solid rgba(18, 32, 35, 0.12);
border-radius: 22px 22px 22px 7px;
display: grid;
grid-template-columns: 250px 1fr auto;
align-items: center;
gap: 24px;
background: rgba(255, 253, 248, 0.95);
box-shadow: 0 12px 32px rgba(9, 19, 21, 0.15), inset 0 1px rgba(255, 255, 255, 0.84);
backdrop-filter: blur(22px);
pointer-events: auto;
transition: min-height 180ms ease, box-shadow 180ms ease;
}
.site-header__inner::before {
position: absolute;
top: 0;
left: 58px;
width: 86px;
height: 3px;
background: var(--yellow);
content: "";
}
.site-header.is-scrolled .site-header__inner {
min-height: 66px;
box-shadow: 0 10px 26px rgba(9, 19, 21, 0.18), inset 0 1px rgba(255, 255, 255, 0.8);
}
.site-brand {
display: inline-flex;
width: 226px;
}
.site-brand img {
width: 100%;
}
.main-navigation .menu {
width: max-content;
max-width: 100%;
min-height: 44px;
margin: 0 auto;
padding: 3px 5px;
border: 1px solid rgba(18, 32, 35, 0.08);
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
background: linear-gradient(180deg, rgba(248, 247, 242, 0.86), rgba(232, 231, 225, 0.72));
box-shadow: inset 0 1px 2px rgba(18, 32, 35, 0.055), 0 1px rgba(255, 255, 255, 0.72);
list-style: none;
}
.main-navigation a {
position: relative;
font-size: 12px;
font-weight: 760;
letter-spacing: 0.025em;
}
.main-navigation .menu > li > a {
padding: 9px 13px;
border-radius: 8px 8px 8px 3px;
display: block;
transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus-visible,
.main-navigation .current-menu-item > a {
background: rgba(255, 253, 248, 0.9);
box-shadow: 0 2px 7px rgba(18, 32, 35, 0.08), inset 0 1px rgba(255, 255, 255, 0.82);
}
.main-navigation .menu > li > a::after {
position: absolute;
right: 13px;
bottom: 3px;
left: 13px;
height: 2px;
border-radius: 2px;
background: var(--yellow);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.main-navigation .menu > li > a:hover::after,
.main-navigation .menu > li > a:focus-visible::after,
.main-navigation .current-menu-item > a::after {
transform: scaleX(1);
}
.header-contact {
position: relative;
overflow: hidden;
min-height: 52px;
padding: 0 9px 0 21px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px 14px 14px 4px;
display: inline-flex;
align-items: center;
gap: 16px;
color: var(--white);
background: linear-gradient(145deg, #1b2d30 0%, #122023 58%, #091315 100%);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.018em;
box-shadow: 0 6px 14px rgba(9, 19, 21, 0.18), inset 0 1px rgba(255, 255, 255, 0.1);
transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.header-contact:hover,
.header-contact:focus-visible {
background: linear-gradient(145deg, #22363a, #091315);
box-shadow: 0 9px 19px rgba(9, 19, 21, 0.23), inset 0 1px rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
.header-contact:active {
box-shadow: 0 3px 8px rgba(9, 19, 21, 0.16), inset 0 1px rgba(255, 255, 255, 0.08);
transform: translateY(1px);
}
.header-contact svg {
width: 34px;
height: 34px;
padding: 8px;
border-radius: 9px 9px 9px 3px;
color: var(--ink-deep);
background: linear-gradient(145deg, #ffe188, #ffca43 64%, #e8a90f);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.55);
}
.menu-toggle,
.nav-contact-mobile {
display: none;
} .home-hero {
position: relative;
min-height: 850px;
padding: 154px 0 126px;
color: var(--white);
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
radial-gradient(circle at 8% 2%, rgba(82, 99, 94, 0.3), transparent 30%);
background-size: 72px 72px, 72px 72px, auto;
}
.home-hero::before {
position: absolute;
top: -160px;
right: -140px;
width: 560px;
height: 560px;
border: 1px solid rgba(255, 202, 67, 0.16);
border-radius: 50%;
content: "";
}
.home-hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(500px, 0.76fr);
align-items: center;
gap: clamp(50px, 7vw, 120px);
}
.home-hero .overline {
color: #aeb9b7;
}
.home-hero__copy h1 {
max-width: 690px;
margin-bottom: 27px;
font-family: var(--display);
font-size: clamp(50px, 4.2vw, 68px);
font-stretch: condensed;
font-weight: 760;
letter-spacing: -0.035em;
line-height: 1.03;
}
.home-hero__copy h1 em {
display: inline;
margin-top: 0;
color: var(--yellow-light);
font-family: var(--display);
font-style: normal;
font-weight: 650;
letter-spacing: -0.025em;
}
.home-hero__lead {
max-width: 620px;
margin-bottom: 30px;
color: #c5cecc;
font-size: clamp(17px, 1.05vw, 19px);
line-height: 1.55;
}
.home-hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 28px;
}
.home-hero .text-link {
color: var(--white);
}
.home-hero__signals {
margin: 38px 0 0;
padding: 21px 0 0;
border-top: 1px solid var(--line-light);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
color: #aeb9b7;
font-size: 11px;
font-weight: 750;
letter-spacing: 0.1em;
list-style: none;
text-transform: uppercase;
}
.home-hero__signals li {
min-height: 34px;
padding-left: 12px;
border-left: 2px solid var(--yellow-light);
display: flex;
align-items: center;
gap: 10px;
}
.home-hero__signals li::before {
display: none;
}
.home-hero__visual {
position: relative;
z-index: 1;
isolation: isolate;
width: 100%;
max-width: 610px;
justify-self: end;
}
.home-hero__visual::before {
position: absolute;
z-index: -1;
top: 18px;
right: -18px;
bottom: -18px;
left: 18px;
border: 1px solid rgba(255, 202, 67, 0.72);
border-radius: 150px 18px 18px 18px;
content: "";
}
.home-hero__arch {
z-index: 1;
position: relative;
min-height: 600px;
overflow: hidden;
border-radius: 150px 18px 18px 18px;
background: var(--ink-soft);
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.34);
}
.home-hero__arch::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(9, 19, 21, 0.04), transparent 45%, rgba(9, 19, 21, 0.33));
content: "";
}
.home-hero__arch img {
width: 100%;
height: 600px;
object-fit: cover;
object-position: 64% center;
}
.home-hero__note {
position: absolute;
z-index: 3;
right: -30px;
bottom: 34px;
min-width: 205px;
padding: 19px 25px;
border: 1px solid rgba(18, 32, 35, 0.1);
border-radius: 14px 14px 14px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
color: var(--ink);
background: var(--paper-light);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}
.home-hero__note span {
color: var(--muted);
font-size: 11px;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.home-hero__note strong {
font-size: 12px;
}
.home-hero__seal {
position: absolute;
z-index: 3;
top: 76px;
left: -38px;
width: 78px;
height: 118px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 15px 15px 5px 15px;
display: grid;
place-content: center;
justify-items: center;
gap: 5px;
color: var(--ink-deep);
background: var(--yellow-light);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
font-size: 9px;
font-weight: 850;
letter-spacing: 0.13em;
}
.home-hero__seal i {
width: 25px;
height: 1px;
background: rgba(9, 19, 21, 0.42);
}
.home-hero__curve {
position: absolute;
z-index: 1;
right: -5%;
bottom: -1px;
left: -5%;
height: 72px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
background: var(--paper-light);
} .references {
padding: 32px 0 88px;
background: var(--paper-light);
}
.references__inner > p {
margin-bottom: 22px;
color: var(--muted);
font-size: 10px;
font-weight: 780;
letter-spacing: 0.14em;
text-align: left;
text-transform: uppercase;
}
.references__logos {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
align-items: center;
gap: 12px;
}
.references__logo {
min-height: 84px;
border-right: 1px solid var(--line);
display: grid;
place-items: center;
opacity: 0.5;
transition: opacity 180ms ease, transform 180ms ease;
}
.references__logo:last-child {
border-right: 0;
}
.references__logo:hover {
opacity: 0.82;
transform: translateY(-2px);
}
.references__logo img {
width: min(100%, 190px);
max-height: 58px;
object-fit: contain;
filter: grayscale(1) contrast(1.08);
} .choice-section {
position: relative;
padding: 96px 0 140px;
background: var(--paper-light);
}
.choice-section__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(430px, 0.64fr);
gap: clamp(50px, 8vw, 140px);
align-items: center;
}
.section-number {
position: absolute;
top: -48px;
left: var(--gutter);
margin: 0;
color: transparent;
-webkit-text-stroke: 1px rgba(18, 32, 35, 0.1);
font-family: var(--display);
font-size: clamp(96px, 10vw, 148px);
line-height: 1;
}
.choice-section__title,
.choice-section__copy {
position: relative;
}
.choice-section__title h2 {
max-width: 690px;
margin-bottom: 0;
font-family: var(--display);
font-size: clamp(46px, 4.2vw, 64px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.035em;
line-height: 1.03;
}
.choice-section__copy {
padding: 0;
border-left: 0;
}
.choice-section__intro,
.choice-section__result {
color: #3f4b4d;
font-size: 15px;
line-height: 1.6;
}
.choice-section__intro {
margin-bottom: 18px;
font-weight: 700;
}
.choice-proofs {
margin: 0 0 18px;
padding: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 20px 20px 20px 6px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
list-style: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28));
box-shadow: 0 8px 20px rgba(18, 32, 35, 0.07), inset 0 1px rgba(255, 255, 255, 0.72);
}
.choice-proofs li {
min-height: 62px;
padding: 15px 18px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 750;
}
.choice-proofs li:nth-child(2n) {
border-right: 0;
}
.choice-proofs li:nth-last-child(-n + 2) {
border-bottom: 0;
}
.choice-proofs span {
color: #8a6b17;
font-family: var(--display);
font-size: 11px;
font-weight: 800;
}
.choice-section__copy .text-link {
margin-top: 10px;
} .expertises {
position: relative;
padding: 130px 0 122px;
color: var(--white);
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
radial-gradient(circle at 96% 8%, rgba(82, 99, 94, 0.28), transparent 28%);
background-size: 78px 78px, 78px 78px, auto;
}
.expertises__curve {
position: absolute;
top: 0;
left: var(--gutter);
width: min(220px, 22vw);
height: 5px;
background: var(--yellow-light);
}
.expertises__head {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.55fr);
gap: clamp(50px, 8vw, 135px);
align-items: end;
margin-bottom: 68px;
}
.expertises__head h2 {
margin-bottom: 0;
font-family: var(--display);
font-size: clamp(48px, 4.3vw, 66px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.035em;
line-height: 1.02;
}
.expertises__head > p {
margin: 0 0 8px;
color: #b9c3c1;
font-size: 17px;
}
.expertise-list {
border-bottom: 0;
}
.expertise-row {
position: relative;
margin-bottom: 14px;
padding: 30px 28px;
border: 1px solid var(--line-light);
border-radius: 26px 26px 26px 7px;
display: grid;
grid-template-columns: 74px minmax(0, 1fr) 62px;
gap: 28px;
align-items: center;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
transition: border-color 180ms ease, background 180ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.expertise-row::before {
position: absolute;
z-index: 0;
top: 0;
right: auto;
bottom: 0;
left: 0;
width: 4px;
border-radius: 4px 0 0 4px;
background: var(--yellow-light);
content: "";
opacity: 0;
transform: scaleY(0.45);
transition: opacity 180ms ease, transform 220ms ease;
}
.expertise-row:hover::before {
opacity: 1;
transform: scaleY(1);
}
.expertise-row:hover {
border-color: rgba(255, 202, 67, 0.34);
background: rgba(255, 255, 255, 0.045);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.13), inset 0 1px rgba(255, 255, 255, 0.05);
transform: translateX(5px);
}
.expertise-row > * {
position: relative;
z-index: 1;
}
.expertise-row__number {
width: 56px;
height: 56px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 14px 14px 4px 14px;
display: grid;
place-items: center;
color: var(--yellow-light);
font-family: var(--display);
font-size: 22px;
font-weight: 750;
line-height: 1;
}
.expertise-row__copy {
display: grid;
grid-template-columns: minmax(240px, 0.7fr) minmax(300px, 1fr);
gap: 5px clamp(30px, 5vw, 90px);
align-items: start;
}
.expertise-row__label {
grid-column: 1 / -1;
margin-bottom: 12px;
color: #8e9b99;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.expertise-row h3 {
margin-bottom: 0;
font-family: var(--display);
font-size: clamp(31px, 2.5vw, 42px);
font-stretch: condensed;
font-weight: 720;
letter-spacing: -0.025em;
line-height: 1.04;
}
.expertise-row__copy > p:not(.expertise-row__label) {
margin-bottom: 18px;
color: #bec7c5;
line-height: 1.7;
}
.expertise-row ul {
grid-column: 2;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
}
.expertise-row li {
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 7px 7px 7px 2px;
color: #d5dcda;
font-size: 11px;
}
.expertise-row__link {
width: 56px;
height: 56px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 14px 14px 14px 4px;
display: grid;
place-items: center;
color: var(--white);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15), inset 0 1px rgba(255, 255, 255, 0.06);
transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.expertise-row__link:hover,
.expertise-row__link:focus-visible {
color: var(--ink-deep);
background: var(--yellow-light);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.46);
transform: translate(3px, -3px);
}
.expertise-row__link:active {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.3);
transform: translateY(1px);
} .founder-section {
position: relative;
padding: 126px 0;
background-color: var(--paper);
background-image: linear-gradient(90deg, transparent 49.95%, rgba(18, 32, 35, 0.035) 50%, transparent 50.05%);
}
.founder-section__inner {
display: grid;
grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1fr);
gap: clamp(60px, 9vw, 150px);
align-items: center;
}
.founder-section__portrait {
position: relative;
max-width: 540px;
isolation: isolate;
}
.founder-section__portrait::before {
position: absolute;
z-index: -1;
top: 18px;
right: -18px;
bottom: -18px;
left: 18px;
border: 1px solid rgba(240, 181, 21, 0.7);
border-radius: 130px 18px 18px 18px;
content: "";
}
.founder-section__arch {
position: relative;
min-height: 620px;
overflow: hidden;
border-radius: 130px 18px 18px 18px;
background: #1b2c3e;
}
.founder-section__arch::after {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: inherit;
content: "";
}
.founder-section__arch img {
width: 100%;
height: 620px;
object-fit: cover;
object-position: center;
}
.founder-section__portrait > p {
position: absolute;
right: -36px;
bottom: 34px;
min-width: 218px;
margin: 0;
padding: 18px 22px;
border: 1px solid rgba(18, 32, 35, 0.1);
border-radius: 14px 14px 14px 4px;
color: var(--ink);
background: linear-gradient(145deg, #ffdc76, #ffca43 62%, #eeb31c);
box-shadow: 0 9px 20px rgba(39, 29, 8, 0.18), inset 0 1px rgba(255, 255, 255, 0.5);
}
.founder-section__portrait > p strong,
.founder-section__portrait > p span {
display: block;
}
.founder-section__portrait > p strong {
font-size: 16px;
}
.founder-section__portrait > p span {
color: #4b4a3f;
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.founder-section__copy h2 {
max-width: 790px;
margin-bottom: 30px;
font-family: var(--display);
font-size: clamp(48px, 4.2vw, 64px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.035em;
line-height: 1.02;
}
.founder-section__lead {
max-width: 720px;
margin-bottom: 39px;
color: #3e4a4c;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.65;
}
.founder-section__facts {
margin-bottom: 38px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 18px 18px 18px 5px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.28));
box-shadow: 0 8px 20px rgba(18, 32, 35, 0.065), inset 0 1px rgba(255, 255, 255, 0.76);
}
.founder-section__facts p {
margin: 0;
padding: 19px 17px;
border-right: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr;
gap: 5px;
}
.founder-section__facts p:last-child {
border-right: 0;
}
.founder-section__facts strong {
font-family: var(--display);
font-size: 21px;
font-weight: 700;
}
.founder-section__facts span {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
} .method-section {
position: relative;
padding: 126px 0 146px;
background: var(--paper-light);
}
.method-section::before {
position: absolute;
top: 0;
right: var(--gutter);
width: 120px;
height: 5px;
background: var(--ink);
content: "";
}
.method-section__head {
position: relative;
max-width: 920px;
margin-bottom: 68px;
}
.method-section__head h2 {
margin-bottom: 28px;
font-family: var(--display);
font-size: clamp(48px, 4.1vw, 62px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.035em;
line-height: 1.02;
}
.method-section__head > p:last-child {
max-width: 690px;
margin-bottom: 0;
color: var(--muted);
font-size: 18px;
}
.method-flow {
position: relative;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
list-style: none;
}
.method-flow::before {
display: none;
}
.method-flow li {
position: relative;
min-height: 220px;
padding: 28px 24px 26px;
border: 1px solid var(--line);
border-radius: 20px 20px 20px 6px;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
box-shadow: 0 8px 18px rgba(18, 32, 35, 0.075), inset 0 1px rgba(255, 255, 255, 0.82);
transition: border-color 180ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.method-flow li:hover {
border-color: rgba(240, 181, 21, 0.62);
box-shadow: 0 12px 24px rgba(18, 32, 35, 0.11), inset 0 1px rgba(255, 255, 255, 0.86);
transform: translateY(-5px);
}
.method-flow li > span {
position: relative;
z-index: 1;
width: auto;
height: auto;
margin-bottom: 48px;
border: 0;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 9px;
color: #826315;
background: transparent;
font-family: var(--display);
font-size: 12px;
font-weight: 800;
transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.method-flow li > span::before {
width: 22px;
height: 7px;
border-radius: 2px 2px 2px 1px;
background: var(--yellow);
content: "";
}
.method-flow li:hover > span {
color: #826315;
background: transparent;
transform: none;
}
.method-flow h3 {
margin-bottom: 9px;
font-family: var(--display);
font-size: 25px;
font-weight: 750;
}
.method-flow p {
max-width: 260px;
margin-bottom: 0;
color: var(--muted);
} .journal-section {
padding: 130px 0 150px;
color: var(--white);
background-color: var(--ink);
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 80px 80px;
}
.journal-section__head {
margin-bottom: 56px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.journal-section__head h2 {
margin-bottom: 0;
font-family: var(--display);
max-width: 780px;
font-size: clamp(47px, 4vw, 62px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.035em;
line-height: 1.02;
}
.journal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(22px, 3vw, 42px);
}
.journal-card {
position: relative;
min-width: 0;
padding: 10px 10px 72px;
overflow: hidden;
border: 1px solid var(--line-light);
border-radius: 28px 28px 28px 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.018));
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.11), inset 0 1px rgba(255, 255, 255, 0.04);
transition: border-color 180ms ease, transform 220ms ease, background 180ms ease, box-shadow 220ms ease;
}
.journal-card:hover {
border-color: rgba(255, 202, 67, 0.42);
background: rgba(255, 255, 255, 0.045);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.055);
transform: translateY(-5px);
}
.journal-card__image,
.journal-card__placeholder {
min-height: 300px;
margin-bottom: 25px;
overflow: hidden;
border-radius: 20px 20px 20px 5px;
display: block;
background:
radial-gradient(circle at 68% 32%, rgba(242, 196, 79, 0.55), transparent 14%),
linear-gradient(145deg, #334744, #142326 62%);
}
.journal-card__image img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 500ms ease;
}
.journal-card:hover .journal-card__image img {
transform: scale(1.025);
}
.journal-card__meta,
.journal-card__topic {
display: block;
margin-bottom: 13px;
padding-inline: 14px;
color: var(--yellow-light);
font-size: 10px;
font-weight: 780;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.journal-card__meta a {
color: inherit;
}
.journal-card h3 {
padding: 0 62px 0 14px;
margin-bottom: 0;
font-family: var(--display);
font-size: clamp(25px, 2vw, 32px);
font-stretch: condensed;
font-weight: 680;
letter-spacing: -0.018em;
line-height: 1.18;
}
.journal-card__link {
position: absolute;
right: 20px;
bottom: 20px;
width: 44px;
height: 44px;
border: 1px solid var(--line-light);
border-radius: 12px 12px 12px 4px;
display: grid;
place-items: center;
color: var(--yellow-light);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.05);
transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.journal-card__link:hover,
.journal-card__link:focus-visible {
color: var(--ink-deep);
background: linear-gradient(145deg, #ffe188, #ffca43 64%, #e8a90f);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.journal-card__link:active {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.3);
transform: translateY(1px);
}
.journal-card--fallback {
min-height: 360px;
padding: 42px 30px 72px;
border: 1px solid var(--line-light);
border-radius: 28px 28px 28px 8px;
background: rgba(255, 255, 255, 0.035);
} .closing-section {
position: relative;
margin-top: 0;
padding: 104px 0;
color: var(--ink-deep);
background: var(--paper-light);
border-radius: 0;
}
.closing-section__inner {
position: relative;
overflow: hidden;
min-height: 380px;
padding-top: clamp(58px, 6vw, 86px);
padding-bottom: clamp(58px, 6vw, 86px);
border: 1px solid rgba(18, 32, 35, 0.11);
border-radius: 38px 38px 38px 10px;
display: grid;
grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.64fr);
gap: clamp(50px, 8vw, 135px);
align-items: end;
background: linear-gradient(105deg, var(--yellow-light) 0 57%, var(--ink) 57% 100%);
box-shadow: 0 30px 84px rgba(18, 32, 35, 0.16);
}
.closing-section__inner::after {
position: absolute;
top: -150px;
right: -100px;
width: 360px;
height: 360px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
content: "";
pointer-events: none;
}
.closing-section__inner > * {
position: relative;
z-index: 1;
}
.closing-section .overline {
color: #5d543b;
}
.closing-section .overline::before {
background: var(--ink);
}
.closing-section h2 {
max-width: 850px;
margin-bottom: 0;
font-family: var(--display);
font-size: clamp(47px, 4vw, 62px);
font-stretch: condensed;
font-weight: 760;
letter-spacing: -0.035em;
line-height: 1.02;
}
.closing-section__copy > p {
margin-bottom: 30px;
color: #d0d8d6;
font-size: 17px;
}
.closing-section__copy {
color: var(--white);
}
.closing-section__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.closing-section__phone {
display: flex;
flex-direction: column;
}
.closing-section__phone span {
color: #96a3a1;
font-size: 10px;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.closing-section__phone strong {
color: var(--white);
font-family: var(--display);
font-size: 23px;
font-weight: 700;
}
.closing-section .button--dark {
color: var(--ink-deep);
background: linear-gradient(145deg, #ffd96d 0%, #ffca43 55%, #efb51e 100%);
border-color: rgba(255, 255, 255, 0.18);
border-bottom-color: #ca920d;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.52);
}
.closing-section .button--dark svg {
color: var(--yellow-light);
background: linear-gradient(145deg, #1a2b2e, #071113);
}
.closing-section .button--dark:hover,
.closing-section .button--dark:focus-visible {
background: linear-gradient(145deg, #ffe18b 0%, #ffd05a 58%, #f2ba26 100%);
box-shadow: 0 11px 23px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.58);
}
.closing-section .button--dark:active {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.42);
} .site-footer {
position: relative;
padding: 86px 0 28px;
color: var(--white);
background: var(--ink-deep);
}
.site-footer::before {
position: absolute;
top: 0;
left: var(--gutter);
width: 96px;
height: 4px;
background: var(--yellow-light);
content: "";
}
.site-footer__main {
display: grid;
grid-template-columns: 1.1fr 0.55fr 0.72fr;
gap: clamp(45px, 7vw, 110px);
padding-bottom: 52px;
}
.footer-brand img {
width: 250px;
margin-bottom: 22px;
}
.footer-brand p {
max-width: 420px;
margin-bottom: 0;
color: #aab5b3;
}
.footer-label {
margin-bottom: 19px;
color: #788684;
font-size: 10px;
font-weight: 780;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.footer-links .menu {
margin: 0;
padding: 0;
display: grid;
gap: 8px;
list-style: none;
}
.footer-links a,
.footer-contact a {
transition: color 180ms ease;
}
.footer-links a:hover,
.footer-contact a:hover,
.site-footer__bottom a:hover {
color: var(--yellow-light);
}
.footer-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-contact > a:first-of-type {
margin-bottom: 3px;
font-family: var(--display);
font-size: 25px;
font-weight: 700;
}
.footer-contact > a:nth-of-type(2) {
margin-bottom: 16px;
color: #c2ccca;
}
.footer-contact > span {
color: #7e8c8a;
font-size: 12px;
}
.site-footer__bottom {
padding-top: 26px;
border-top: 1px solid var(--line-light);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 25px;
color: #73817f;
font-size: 11px;
}
.site-footer__bottom > div {
display: flex;
gap: 22px;
}
.site-footer__bottom > a {
justify-self: end;
} .page-hero,
.archive-hero {
position: relative;
padding: 180px 0 100px;
color: var(--white);
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 74px 74px;
}
.page-hero::after,
.archive-hero::after {
position: absolute;
bottom: 0;
left: var(--gutter);
width: min(210px, 22vw);
height: 5px;
background: var(--yellow-light);
content: "";
}
.page-hero__inner,
.archive-hero__inner {
max-width: 1050px;
padding-left: calc(var(--gutter) + 26px);
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.page-hero h1,
.archive-hero h1 {
margin-bottom: 26px;
font-family: var(--display);
font-size: clamp(48px, 5vw, 76px);
font-stretch: condensed;
font-weight: 760;
letter-spacing: -0.038em;
line-height: 1.01;
}
.page-hero__lead,
.archive-hero__lead {
max-width: 750px;
margin-bottom: 0;
color: #bdc7c5;
font-size: 20px;
}
.content-shell {
width: min(100%, 1240px);
margin-inline: auto;
padding: 100px var(--gutter) 140px;
}
.entry-content {
max-width: 840px;
font-size: 18px;
}
.entry-content > * {
margin-right: auto;
margin-left: auto;
}
.entry-content h2,
.entry-content h3 {
font-family: var(--display);
font-stretch: condensed;
font-weight: 720;
letter-spacing: -0.022em;
}
.entry-content h2 {
margin-top: 2.1em;
font-size: clamp(34px, 3.4vw, 48px);
line-height: 1.08;
}
.entry-content h3 {
margin-top: 1.8em;
font-size: 27px;
}
.entry-content a {
text-decoration: underline;
text-decoration-color: var(--yellow);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.entry-content blockquote {
margin: 2.2em 0;
padding: 26px 0 26px 34px;
border-left: 4px solid var(--yellow);
font-family: var(--display);
font-size: 24px;
line-height: 1.35;
}
.entry-content img {
border-radius: 28px;
}
.entry-content .alignwide {
width: min(1120px, 100vw - (2 * var(--gutter)));
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
}
.entry-content .alignfull {
width: 100vw;
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
}
.posts-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px 24px;
}
.post-card {
min-width: 0;
padding: 10px 10px 26px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 26px 26px 26px 7px;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.4));
box-shadow: 0 8px 18px rgba(18, 32, 35, 0.07), inset 0 1px rgba(255, 255, 255, 0.82);
transition: border-color 180ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.post-card:hover {
border-color: rgba(240, 181, 21, 0.55);
box-shadow: 0 12px 24px rgba(18, 32, 35, 0.11), inset 0 1px rgba(255, 255, 255, 0.86);
transform: translateY(-5px);
}
.post-card__image {
min-height: 290px;
margin-bottom: 22px;
overflow: hidden;
border-radius: 18px 18px 18px 5px;
display: block;
background: var(--paper);
}
.post-card__image img {
width: 100%;
height: 290px;
object-fit: cover;
transition: transform 400ms ease;
}
.post-card:hover .post-card__image img {
transform: scale(1.025);
}
.post-card__meta,
.single-meta {
margin-bottom: 11px;
color: var(--muted);
font-size: 10px;
font-weight: 780;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.post-card__meta,
.post-card h2,
.post-card > p {
padding-right: 14px;
padding-left: 14px;
}
.post-card__meta {
color: #8a6811;
}
.post-card h2 {
margin-bottom: 12px;
font-family: var(--display);
font-size: 28px;
font-stretch: condensed;
font-weight: 700;
letter-spacing: -0.018em;
line-height: 1.14;
}
.post-card p {
color: var(--muted);
}
.pagination {
margin-top: 70px;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.page-numbers {
min-width: 44px;
min-height: 44px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
display: grid;
place-items: center;
}
.page-numbers.current {
background: var(--yellow-light);
border-color: var(--yellow-light);
}
.single-hero {
position: relative;
padding: 180px 0 70px;
color: var(--white);
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 74px 74px;
}
.single-hero__inner {
max-width: 1120px;
}
.single-hero h1 {
margin-bottom: 32px;
font-family: var(--display);
font-size: clamp(48px, 5vw, 74px);
font-stretch: condensed;
font-weight: 760;
letter-spacing: -0.038em;
line-height: 1.02;
}
.single-hero .single-meta {
color: #9da9a7;
}
.single-featured {
width: min(100%, 1320px);
max-height: 720px;
margin: 0 auto 0;
overflow: hidden;
border-radius: 0 0 32px 10px;
background: var(--ink-deep);
}
.single-featured img {
width: 100%;
max-height: 720px;
object-fit: cover;
}
.post-navigation {
margin-top: 80px;
padding-top: 34px;
border-top: 1px solid var(--line);
}
.nav-links .nav-previous,
.nav-links .nav-next {
flex: 1;
}
.nav-links .nav-next {
text-align: right;
}
.error-page {
min-height: 760px;
padding: 200px var(--gutter) 120px;
display: grid;
place-items: center;
text-align: center;
background: var(--paper-light);
}
.error-page h1 {
margin-bottom: 18px;
font-family: var(--display);
font-size: clamp(100px, 18vw, 250px);
font-weight: 400;
line-height: 0.75;
} .entry-content input:not([type="submit"]),
.entry-content select,
.entry-content textarea,
.contact-form input:not([type="submit"]),
.contact-form select,
.contact-form textarea {
width: 100%;
min-height: 54px;
padding: 13px 0;
border: 0;
border-bottom: 1px solid rgba(18, 32, 35, 0.35);
border-radius: 0;
outline: 0;
color: var(--ink);
background: transparent;
}
.entry-content input:focus,
.entry-content select:focus,
.entry-content textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--yellow);
box-shadow: 0 2px 0 var(--yellow);
}
.entry-content input[type="submit"],
.entry-content button[type="submit"],
.contact-form input[type="submit"],
.contact-form button[type="submit"] {
min-height: 56px;
padding: 0 28px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom-color: #03090a;
border-radius: 14px 14px 14px 4px;
color: var(--white);
background: linear-gradient(145deg, #1b2d30 0%, #122023 58%, #091315 100%);
box-shadow: 0 8px 18px rgba(9, 19, 21, 0.18), inset 0 1px rgba(255, 255, 255, 0.09);
font-weight: 800;
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.entry-content input[type="submit"]:hover,
.entry-content button[type="submit"]:hover,
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
background: linear-gradient(145deg, #22363a 0%, #14272a 58%, #091315 100%);
box-shadow: 0 11px 23px rgba(9, 19, 21, 0.22), inset 0 1px rgba(255, 255, 255, 0.11);
transform: translateY(-2px);
}
.entry-content input[type="submit"]:active,
.entry-content button[type="submit"]:active,
.contact-form input[type="submit"]:active,
.contact-form button[type="submit"]:active {
box-shadow: 0 4px 10px rgba(9, 19, 21, 0.16), inset 0 1px rgba(255, 255, 255, 0.08);
transform: translateY(1px);
} .service-page-hero .page-hero__inner,
.about-page-hero .page-hero__inner,
.contact-page-hero .page-hero__inner {
max-width: 1240px;
}
.service-detail {
position: relative;
padding: 140px 0;
}
.service-detail--light {
background: var(--paper-light);
}
.service-detail--dark {
color: var(--white);
background: var(--ink);
border-radius: 42px 42px 0 0;
}
.service-detail--yellow {
color: var(--ink-deep);
background: var(--yellow-light);
}
.service-detail__inner {
display: grid;
grid-template-columns: minmax(340px, 0.77fr) minmax(0, 1fr);
gap: clamp(60px, 9vw, 150px);
align-items: start;
}
.service-detail__intro {
position: sticky;
top: 125px;
}
.service-detail__number {
width: 60px;
height: 60px;
margin-bottom: 24px;
border: 1px solid var(--line);
border-radius: 15px 15px 5px 15px;
display: grid;
place-items: center;
color: #856515;
font-family: var(--display);
font-size: 21px;
font-weight: 800;
line-height: 1;
}
.service-detail--dark .service-detail__number {
border-color: var(--line-light);
color: var(--yellow-light);
}
.service-detail__intro h2 {
margin-bottom: 28px;
font-family: var(--display);
font-size: clamp(42px, 4.2vw, 58px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.032em;
line-height: 1.04;
}
.service-detail__intro > p:last-child {
margin-bottom: 0;
color: var(--muted);
font-size: 18px;
}
.service-detail--dark .service-detail__intro > p:last-child {
color: #bdc7c5;
}
.service-detail--yellow .service-detail__intro > p:last-child {
color: #514d40;
}
.service-detail__list {
border-top: 1px solid var(--line);
}
.service-detail--dark .service-detail__list {
border-top-color: var(--line-light);
}
.service-detail__list article {
padding: 25px 18px;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: minmax(200px, 0.65fr) 1fr;
gap: 28px;
transition: background 180ms ease, padding 180ms ease;
}
.service-detail__list article:hover {
padding-right: 22px;
padding-left: 22px;
background: rgba(255, 255, 255, 0.34);
}
.service-detail--dark .service-detail__list article:hover {
background: rgba(255, 255, 255, 0.035);
}
.service-detail--yellow .service-detail__list article:hover {
background: rgba(255, 255, 255, 0.18);
}
.service-detail--dark .service-detail__list article {
border-bottom-color: var(--line-light);
}
.service-detail__list h3 {
margin-bottom: 0;
font-family: var(--display);
font-size: 25px;
font-stretch: condensed;
font-weight: 700;
line-height: 1.14;
}
.service-detail__list p {
margin-bottom: 0;
color: var(--muted);
}
.service-detail--dark .service-detail__list p {
color: #aeb9b7;
}
.service-detail--yellow .service-detail__list p {
color: #514d40;
}
.closing-section--standalone {
margin-top: 0;
} .about-story {
padding: 145px 0;
background: var(--paper);
}
.about-story__inner {
display: grid;
grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1fr);
gap: clamp(60px, 9vw, 150px);
align-items: center;
}
.about-story__portrait {
position: relative;
min-height: 660px;
overflow: hidden;
border-radius: 130px 18px 18px 18px;
background: #1b2c3e;
box-shadow: 0 28px 66px rgba(18, 32, 35, 0.16);
}
.about-story__portrait img {
width: 100%;
height: 660px;
object-fit: cover;
}
.about-story__copy h2 {
margin-bottom: 31px;
font-family: var(--display);
font-size: clamp(43px, 4.2vw, 58px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.032em;
line-height: 1.04;
}
.about-story__copy > p:not(.overline) {
color: #3e4a4c;
font-size: 18px;
}
.about-story__facts {
margin-top: 40px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 18px 18px 18px 5px;
}
.about-story__facts p {
margin: 0;
padding: 17px 18px;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: 145px 1fr;
gap: 25px;
}
.about-story__facts strong {
font-family: var(--display);
font-size: 19px;
font-weight: 700;
}
.about-story__facts span {
color: var(--muted);
}
.about-principles {
padding: 145px 0 155px;
color: var(--white);
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 78px 78px;
}
.about-principles__head {
max-width: 940px;
margin-bottom: 80px;
}
.about-principles__head h2 {
margin-bottom: 26px;
font-family: var(--display);
font-size: clamp(45px, 4.5vw, 62px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.034em;
line-height: 1.03;
}
.about-principles__head > p:last-child {
max-width: 720px;
color: #aeb9b7;
font-size: 18px;
}
.about-principles__list {
gap: 14px;
border-top: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-principles__list article {
min-height: 270px;
padding: 30px;
border: 1px solid var(--line-light);
border-radius: 22px 22px 22px 6px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.018));
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1), inset 0 1px rgba(255, 255, 255, 0.04);
}
.about-principles__list article + article {
padding-left: 30px;
}
.about-principles__list article:last-child {
border-right: 1px solid var(--line-light);
}
.about-principles__list span {
display: block;
margin-bottom: 38px;
color: var(--yellow-light);
font-family: var(--display);
font-size: 25px;
font-weight: 700;
}
.about-principles__list h3 {
margin-bottom: 13px;
font-family: var(--display);
font-size: 27px;
font-stretch: condensed;
font-weight: 700;
line-height: 1.12;
}
.about-principles__list p {
color: #aeb9b7;
}
.agency-bridge {
padding: 130px 0;
background-color: var(--yellow-light);
background-image: linear-gradient(90deg, transparent 49.9%, rgba(18, 32, 35, 0.08) 50%, transparent 50.1%);
}
.agency-bridge__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr);
gap: clamp(55px, 9vw, 150px);
align-items: start;
}
.agency-bridge h2 {
max-width: 760px;
margin-bottom: 0;
font-family: var(--display);
font-size: clamp(44px, 4.4vw, 60px);
font-stretch: condensed;
font-weight: 740;
letter-spacing: -0.033em;
line-height: 1.04;
}
.agency-bridge__inner > div:last-child > p {
font-size: 17px;
} .contact-page {
padding: 135px 0 150px;
background: var(--paper-light);
}
.contact-page__inner {
display: grid;
grid-template-columns: minmax(320px, 0.68fr) minmax(0, 1fr);
gap: clamp(60px, 9vw, 150px);
align-items: start;
}
.contact-page__details {
position: sticky;
top: 125px;
}
.contact-page__phone,
.contact-page__email {
display: block;
}
.contact-page__phone {
margin-bottom: 6px;
font-family: var(--display);
font-size: clamp(36px, 3.5vw, 50px);
font-weight: 720;
letter-spacing: -0.028em;
line-height: 1;
}
.contact-page__email {
margin-bottom: 38px;
color: var(--muted);
}
.contact-page__details > ul {
margin: 0 0 42px;
padding: 0;
border-top: 1px solid var(--line);
list-style: none;
}
.contact-page__details > ul li {
padding: 14px 0;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: 90px 1fr;
gap: 18px;
}
.contact-page__details > ul strong {
font-size: 12px;
}
.contact-page__details > ul span {
color: var(--muted);
}
.contact-page__agency {
padding: 26px 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px 18px 18px 5px;
color: var(--white);
background: linear-gradient(145deg, #1b2d30 0%, #122023 58%, #091315 100%);
box-shadow: 0 9px 20px rgba(9, 19, 21, 0.16), inset 0 1px rgba(255, 255, 255, 0.06);
}
.contact-page__agency > span {
display: block;
margin-bottom: 5px;
color: #91a09d;
font-size: 10px;
font-weight: 780;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.contact-page__agency > strong {
font-family: var(--display);
font-size: 25px;
font-weight: 700;
}
.contact-page__agency p {
margin: 8px 0 13px;
color: #aeb9b7;
}
.contact-page__agency a {
color: var(--yellow-light);
font-size: 12px;
font-weight: 750;
}
.contact-page__form {
padding: clamp(35px, 5vw, 70px);
border: 1px solid var(--line);
border-radius: 30px 30px 30px 8px;
background: var(--paper);
box-shadow: 0 12px 30px rgba(18, 32, 35, 0.11), inset 0 1px rgba(255, 255, 255, 0.7);
}
.contact-page__form h2 {
margin-bottom: 40px;
font-family: var(--display);
font-size: clamp(39px, 3.8vw, 54px);
font-stretch: condensed;
font-weight: 740;
}
.contact-form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
.contact-form label {
margin-bottom: 25px;
display: block;
color: #4a5658;
font-size: 12px;
font-weight: 700;
}
.contact-form__note {
margin: 4px 0 24px;
color: var(--muted);
font-size: 11px;
}
@media (max-width: 920px) {
.service-detail__inner,
.about-story__inner,
.agency-bridge__inner,
.contact-page__inner {
grid-template-columns: 1fr;
}
.service-detail__intro,
.contact-page__details {
position: static;
}
.about-story__portrait {
width: min(100%, 560px);
}
.about-principles__list {
grid-template-columns: 1fr;
}
.about-principles__list article,
.about-principles__list article + article {
min-height: 0;
padding: 28px;
border: 1px solid var(--line-light);
}
.about-principles__list span {
margin-bottom: 15px;
}
}
@media (max-width: 640px) {
.service-detail,
.about-story,
.about-principles,
.agency-bridge,
.contact-page {
padding-top: 95px;
padding-bottom: 100px;
}
.service-detail__number {
width: 56px;
height: 56px;
font-size: 20px;
}
.service-detail__intro h2,
.about-story__copy h2,
.about-principles__head h2,
.agency-bridge h2 {
font-size: clamp(38px, 11vw, 50px);
}
.service-detail__list article {
grid-template-columns: 1fr;
gap: 8px;
}
.about-story__portrait,
.about-story__portrait img {
min-height: 450px;
height: 450px;
}
.about-story__facts p {
grid-template-columns: 115px 1fr;
}
.contact-page__form {
padding: 34px 22px;
border-radius: 24px 24px 24px 7px;
}
.contact-form__row {
grid-template-columns: 1fr;
gap: 0;
}
} .js [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
} @media (max-width: 1120px) {
.site-header__inner {
grid-template-columns: 210px 1fr auto;
}
.site-brand {
width: 205px;
}
.main-navigation .menu {
padding: 3px 4px;
gap: 1px;
}
.main-navigation .menu > li > a {
padding-right: 10px;
padding-left: 10px;
}
.main-navigation a,
.header-contact {
font-size: 12px;
}
.home-hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(400px, 0.75fr);
gap: 45px;
}
.home-hero__arch,
.home-hero__arch img {
height: 580px;
min-height: 580px;
}
.references__logos {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.references__logo:nth-child(4n) {
border-right: 0;
}
.references__logo:nth-child(-n + 4) {
border-bottom: 1px solid var(--line);
}
.expertise-row__copy {
grid-template-columns: minmax(230px, 0.8fr) minmax(300px, 1fr);
}
.founder-section__arch,
.founder-section__arch img {
height: 540px;
min-height: 540px;
}
}
@media (max-width: 920px) {
body.menu-open::before {
position: fixed;
z-index: 90;
inset: 0;
background: rgba(9, 19, 21, 0.56);
backdrop-filter: blur(4px);
content: "";
}
.site-header {
top: 12px;
}
.site-header__inner {
width: calc(100% - 24px);
min-height: 66px;
padding: 7px 8px 7px 18px;
border-radius: 18px 18px 18px 6px;
grid-template-columns: 1fr auto;
backdrop-filter: none;
}
.site-brand {
width: 192px;
}
.header-contact {
display: none;
}
.menu-toggle {
position: relative;
z-index: 3;
width: 50px;
height: 50px;
padding: 0;
border: 0;
border-radius: 13px 13px 13px 4px;
display: grid;
place-content: center;
gap: 7px;
background: linear-gradient(145deg, #1b2d30 0%, #122023 58%, #091315 100%);
box-shadow: 0 6px 14px rgba(9, 19, 21, 0.18), inset 0 1px rgba(255, 255, 255, 0.09);
cursor: pointer;
}
.menu-toggle i {
width: 21px;
height: 2px;
border-radius: 99px;
display: block;
background: var(--white);
transition: transform 180ms ease;
}
.menu-toggle[aria-expanded="true"] i:first-of-type {
transform: translateY(4.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] i:last-of-type {
transform: translateY(-4.5px) rotate(-45deg);
}
.main-navigation {
position: fixed;
z-index: 2;
top: 0;
right: 0;
width: min(88vw, 470px);
height: 100dvh;
padding: 118px 34px 38px;
color: var(--white);
background: var(--ink-deep);
border-left: 1px solid rgba(255, 202, 67, 0.26);
border-radius: 0 0 0 28px;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
transform: translateX(105%);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.main-navigation::before {
position: absolute;
top: 0;
left: 34px;
width: 92px;
height: 4px;
background: var(--yellow-light);
content: "";
}
.main-navigation.is-open {
transform: translateX(0);
}
.main-navigation .menu {
width: 100%;
max-width: none;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
align-items: flex-start;
flex-direction: column;
gap: 18px;
background: transparent;
}
.main-navigation .menu > li {
width: 100%;
}
.main-navigation .menu > li > a {
padding: 7px 0;
display: block;
font-family: var(--display);
font-size: 34px;
font-weight: 700;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus-visible,
.main-navigation .current-menu-item > a {
color: var(--yellow-light);
background: transparent;
box-shadow: none;
}
.main-navigation .menu > li > a::after {
right: auto;
bottom: 0;
left: 0;
width: 38px;
}
.nav-contact-mobile {
position: relative;
overflow: hidden;
margin-top: 42px;
padding: 16px 21px;
border-radius: 14px 14px 14px 4px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink-deep);
background: linear-gradient(145deg, #ffd96d 0%, #ffca43 55%, #efb51e 100%);
border: 1px solid rgba(255, 243, 191, 0.58);
border-bottom-color: #ca920d;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.52);
font-family: var(--sans);
font-size: 13px;
font-weight: 780;
}
.nav-contact-mobile svg {
color: var(--yellow-light);
background: linear-gradient(145deg, #1a2b2e, #071113);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.11);
}
.nav-contact-mobile:active,
.menu-toggle:active {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.08);
transform: translateY(1px);
}
.home-hero {
min-height: 0;
padding: 135px 0 125px;
}
.home-hero__inner {
grid-template-columns: 1fr;
}
.home-hero__visual {
width: min(100%, 650px);
margin-top: 18px;
justify-self: center;
}
.home-hero__seal {
left: -18px;
}
.choice-section__inner,
.expertises__head,
.founder-section__inner,
.closing-section__inner {
grid-template-columns: 1fr;
}
.choice-section__copy {
max-width: 700px;
}
.expertise-row {
grid-template-columns: 75px 1fr 64px;
}
.expertise-row__copy {
grid-template-columns: 1fr;
}
.expertise-row ul {
grid-column: 1;
}
.founder-section__portrait {
width: min(100%, 560px);
margin-inline: auto;
}
.method-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 52px 28px;
}
.method-flow::before {
display: none;
}
.closing-section__inner {
min-height: 0;
padding-top: 0;
padding-bottom: 0;
gap: 0;
background: var(--ink);
}
.closing-section__inner > div:first-child {
margin-inline: calc(-1 * var(--gutter));
padding: 58px var(--gutter);
background: var(--yellow-light);
}
.closing-section__copy {
padding: 44px 0 56px;
}
.journal-grid,
.posts-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__main {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
.site-footer__bottom {
grid-template-columns: 1fr auto;
}
.site-footer__bottom > a {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 640px) {
:root {
--gutter: 20px;
}
.site-header__inner {
min-height: 62px;
}
.site-brand {
width: 172px;
}
.menu-toggle {
width: 46px;
height: 46px;
}
.home-hero {
padding-top: 123px;
}
.home-hero__copy h1 {
font-size: clamp(43px, 12vw, 56px);
}
.home-hero__lead {
font-size: 17px;
}
.home-hero__actions {
align-items: stretch;
flex-direction: column;
gap: 15px;
}
.home-hero__actions .button {
width: 100%;
}
.home-hero__actions .text-link {
align-self: center;
}
.home-hero__signals {
grid-template-columns: 1fr;
}
.home-hero__arch,
.home-hero__arch img {
height: 445px;
min-height: 445px;
}
.home-hero__arch {
border-radius: 92px 15px 15px 15px;
}
.home-hero__visual::before {
top: 12px;
right: -10px;
bottom: -12px;
left: 12px;
border-radius: 92px 15px 15px 15px;
}
.home-hero__seal {
top: 50px;
left: -7px;
width: 70px;
height: 102px;
}
.home-hero__note {
right: -4px;
bottom: 25px;
min-width: 190px;
padding: 15px 20px;
}
.references {
padding-bottom: 50px;
}
.references__logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.references__logo,
.references__logo:nth-child(4n) {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.references__logo:nth-child(2n),
.references__logo:last-child {
border-right: 0;
}
.references__logo:last-child {
grid-column: 1 / -1;
border-bottom: 0;
}
.choice-section {
padding: 78px 0 120px;
}
.choice-section__inner {
gap: 42px;
}
.choice-section__title h2,
.expertises__head h2,
.founder-section__copy h2,
.method-section__head h2,
.journal-section__head h2,
.closing-section h2 {
font-size: clamp(39px, 11vw, 52px);
}
.choice-section__copy {
padding-left: 0;
}
.choice-proofs {
grid-template-columns: 1fr;
}
.choice-proofs li,
.choice-proofs li:nth-child(2n),
.choice-proofs li:nth-last-child(-n + 2) {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.choice-proofs li:last-child {
border-bottom: 0;
}
.expertises {
padding: 105px 0 95px;
}
.expertises__head {
margin-bottom: 55px;
}
.expertise-row {
padding: 28px 20px;
grid-template-columns: 1fr 54px;
gap: 26px 16px;
}
.expertise-row__number {
grid-column: 1 / -1;
font-size: 40px;
}
.expertise-row h3 {
font-size: 33px;
}
.expertise-row ul {
margin-top: 5px;
}
.expertise-row__link {
width: 52px;
height: 52px;
}
.founder-section,
.method-section,
.journal-section {
padding-top: 105px;
padding-bottom: 115px;
}
.founder-section__arch,
.founder-section__arch img {
height: 440px;
min-height: 440px;
}
.founder-section__portrait > p {
right: -4px;
bottom: 20px;
}
.founder-section__facts p {
grid-template-columns: 95px 1fr;
}
.founder-section__facts {
grid-template-columns: 1fr;
}
.founder-section__facts p,
.founder-section__facts p:last-child {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.founder-section__facts p:last-child {
border-bottom: 0;
}
.method-section__head {
margin-bottom: 55px;
}
.method-flow {
grid-template-columns: 1fr;
gap: 26px;
}
.method-flow li {
min-height: 0;
padding: 26px 22px;
display: block;
}
.method-flow li > span {
width: auto;
height: auto;
margin: 0 0 34px;
}
.journal-section__head {
align-items: flex-start;
flex-direction: column;
}
.journal-grid,
.posts-grid {
grid-template-columns: 1fr;
}
.journal-card__image,
.journal-card:first-child .journal-card__image,
.journal-card__placeholder,
.journal-card:first-child .journal-card__placeholder {
min-height: 310px;
}
.journal-card__image img,
.journal-card:first-child .journal-card__image img {
height: 310px;
}
.closing-section {
margin-top: 0;
padding: 62px 0;
border-radius: 0;
}
.closing-section__inner {
padding-top: 0;
padding-bottom: 0;
border-radius: 34px 34px 34px 10px;
}
.site-footer {
padding-top: 80px;
}
.site-footer__main,
.site-footer__bottom {
grid-template-columns: 1fr;
}
.site-footer__bottom > a,
.site-footer__bottom > div {
justify-self: start;
}
.page-hero,
.archive-hero,
.single-hero {
padding-top: 145px;
}
.page-hero h1,
.archive-hero h1,
.single-hero h1 {
font-size: clamp(42px, 11.5vw, 56px);
}
.content-shell {
padding-top: 70px;
padding-bottom: 100px;
}
.entry-content {
font-size: 17px;
}
} .main-navigation .menu > li {
position: relative;
}
.main-navigation .sub-menu {
position: absolute;
z-index: 20;
top: calc(100% + 13px);
left: 50%;
width: 310px;
margin: 0;
padding: 8px;
border: 1px solid rgba(18, 32, 35, 0.12);
border-radius: 20px 20px 20px 6px;
background: rgba(255, 253, 248, 0.98);
box-shadow: 0 20px 46px rgba(9, 19, 21, 0.17), inset 0 1px rgba(255, 255, 255, 0.9);
list-style: none;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -7px);
transition: opacity 180ms ease, transform 180ms ease;
}
.main-navigation .sub-menu::before {
position: absolute;
top: -14px;
right: 0;
left: 0;
height: 14px;
content: "";
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.main-navigation .sub-menu a {
padding: 13px 14px;
border-radius: 12px 12px 12px 4px;
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
gap: 10px;
color: var(--ink);
font-family: var(--sans);
font-size: 12px;
font-weight: 760;
line-height: 1.25;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
background: var(--paper);
}
.main-navigation .sub-menu span {
color: #8b6400;
font-family: var(--display);
font-size: 11px;
} .single-article .single-hero {
padding: 174px 0 78px;
}
.single-article .single-hero__inner {
width: min(100%, 1040px);
margin-inline: auto;
}
.single-article .single-hero h1 {
max-width: 960px;
margin-bottom: 24px;
font-size: clamp(45px, 4.15vw, 64px);
letter-spacing: -0.035em;
line-height: 1.025;
}
.single-article .single-hero .page-hero__lead {
max-width: 790px;
font-size: clamp(18px, 1.3vw, 21px);
line-height: 1.55;
}
.single-byline {
margin-top: 37px;
padding-top: 23px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
display: grid;
grid-template-columns: 52px auto 1fr;
align-items: center;
gap: 14px;
}
.single-byline__portrait {
width: 52px;
height: 52px;
overflow: hidden;
border: 1px solid rgba(255, 202, 67, 0.45);
border-radius: 50% 50% 50% 13px;
background: #1d3553;
}
.single-byline__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.single-byline__author span,
.single-byline__author a {
display: block;
}
.single-byline__author span {
color: #91a09d;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.single-byline__author a {
color: var(--white);
font-size: 14px;
font-weight: 800;
}
.single-byline__facts {
justify-self: end;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px 0;
color: #aeb9b7;
font-size: 10px;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.single-byline__facts > * {
display: inline-flex;
align-items: center;
}
.single-byline__facts > * + *::before {
width: 4px;
height: 4px;
margin-inline: 12px;
border-radius: 50%;
background: var(--yellow-light);
content: "";
}
.single-byline__categories a {
color: inherit;
}
.single-article .single-featured {
width: min(calc(100% - 40px), 1320px);
max-height: 680px;
border-radius: 0 0 34px 10px;
box-shadow: 0 22px 55px rgba(9, 19, 21, 0.12);
}
.single-article .single-featured img {
max-height: 680px;
}
.single-content-shell {
width: min(100%, 1120px);
margin-inline: auto;
padding: 82px var(--gutter) 130px;
}
.single-article .entry-content {
width: min(100%, 820px);
max-width: none;
margin-inline: auto;
color: #263538;
font-size: 18px;
line-height: 1.75;
}
.single-article .entry-content > p:first-child {
margin-bottom: 24px;
}
.single-article .entry-content > p:first-child strong {
color: var(--ink);
font-size: 19px;
line-height: 1.58;
}
.single-article .entry-content p,
.single-article .entry-content ul,
.single-article .entry-content ol {
margin-bottom: 1.35em;
}
.single-article .entry-content h2 {
position: relative;
margin-top: 1.42em;
margin-bottom: 0.62em;
padding-top: 20px;
font-size: clamp(32px, 2.75vw, 42px);
letter-spacing: -0.03em;
line-height: 1.08;
}
.single-article .entry-content h2::before {
position: absolute;
top: 0;
left: 0;
width: 54px;
height: 4px;
border-radius: 4px;
background: var(--yellow);
content: "";
}
.single-article .entry-content h3 {
margin-top: 1.42em;
margin-bottom: 0.55em;
padding-left: 17px;
border-left: 3px solid var(--yellow);
font-size: clamp(24px, 2vw, 29px);
letter-spacing: -0.018em;
line-height: 1.16;
}
.single-article .entry-content h4 {
margin-top: 1.55em;
margin-bottom: 0.45em;
color: var(--ink);
font-family: var(--sans);
font-size: 19px;
font-weight: 800;
}
.single-article .entry-content ul,
.single-article .entry-content ol {
padding-left: 1.25em;
}
.single-article .entry-content li {
padding-left: 0.3em;
}
.single-article .entry-content li::marker {
color: #a77800;
font-weight: 800;
}
.single-article .entry-content blockquote {
position: relative;
margin: 2.25em 0;
padding: 30px 34px 30px 40px;
border: 1px solid var(--line);
border-left: 5px solid var(--yellow);
border-radius: 0 24px 24px 0;
background: linear-gradient(145deg, var(--white), var(--paper));
box-shadow: 0 12px 28px rgba(18, 32, 35, 0.06);
font-size: 23px;
}
.single-article .wp-block-table {
width: min(980px, calc(100vw - (2 * var(--gutter))));
max-width: none;
margin: 2.2em 0 2.4em 50%;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 22px 22px 22px 7px;
background: var(--white);
box-shadow: 0 14px 32px rgba(18, 32, 35, 0.08);
transform: translateX(-50%);
}
.single-article .entry-content > table {
width: 100%;
margin: 2.2em 0 2.4em;
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 22px 22px 22px 7px;
display: block;
background: var(--white);
box-shadow: 0 14px 32px rgba(18, 32, 35, 0.08);
}
.single-article .wp-block-table table,
.single-article .entry-content > table {
width: 100%;
min-width: 660px;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
line-height: 1.48;
}
.single-article .entry-content > table {
min-width: 0;
}
.single-article .wp-block-table th,
.single-article .entry-content > table th {
padding: 17px 19px;
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.12);
color: var(--white);
background: var(--ink);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
vertical-align: bottom;
}
.single-article .wp-block-table th:first-child,
.single-article .entry-content > table th:first-child {
border-radius: 20px 0 0 0;
}
.single-article .wp-block-table th:last-child,
.single-article .entry-content > table th:last-child {
border-right: 0;
border-radius: 0 20px 0 0;
}
.single-article .wp-block-table td,
.single-article .entry-content > table td {
padding: 17px 19px;
border: 0;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.single-article .wp-block-table td:first-child,
.single-article .entry-content > table td:first-child {
color: var(--ink);
font-weight: 760;
}
.single-article .wp-block-table td:last-child,
.single-article .entry-content > table td:last-child {
border-right: 0;
}
.single-article .wp-block-table tr:nth-child(even) td,
.single-article .entry-content > table tr:nth-child(even) td {
background: rgba(243, 239, 230, 0.66);
}
.single-article .wp-block-table tr:last-child td,
.single-article .entry-content > table tr:last-child td {
border-bottom: 0;
}
.single-article .wp-block-table figcaption {
margin: 0;
padding: 12px 18px;
border-top: 1px solid var(--line);
color: var(--muted);
background: var(--paper);
font-size: 12px;
text-align: left;
}
.single-author {
width: min(100%, 900px);
margin: 84px auto 0;
padding: 34px;
border: 1px solid var(--line);
border-radius: 34px 34px 34px 9px;
display: grid;
grid-template-columns: 150px 1fr;
align-items: center;
gap: 34px;
background: linear-gradient(145deg, var(--white), var(--paper));
box-shadow: 0 18px 42px rgba(18, 32, 35, 0.08), inset 0 1px white;
}
.single-author__portrait {
width: 150px;
height: 180px;
overflow: hidden;
border-radius: 72px 18px 18px 18px;
background: #1d3553;
}
.single-author__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.single-author > div:last-child > p:first-child,
.single-hubs > p {
margin-bottom: 8px;
color: #80620e;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.single-author h2 {
margin-bottom: 10px;
font-family: var(--display);
font-size: 32px;
letter-spacing: -0.025em;
line-height: 1.05;
}
.single-author > div:last-child > p:not(:first-child) {
margin-bottom: 16px;
color: #4b5a5d;
font-size: 15px;
line-height: 1.6;
}
.single-hubs {
width: min(100%, 900px);
margin: 26px auto 0;
padding: 30px 32px 32px;
border-radius: 28px 28px 28px 8px;
color: var(--white);
background: var(--ink);
}
.single-hubs > p {
color: var(--yellow-light);
}
.single-hubs > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.single-hubs a {
min-height: 112px;
padding: 17px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 17px 17px 17px 5px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.025);
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.single-hubs a:hover {
border-color: rgba(255, 202, 67, 0.5);
background: rgba(255, 255, 255, 0.055);
transform: translateY(-2px);
}
.single-hubs a span {
margin-bottom: auto;
color: var(--yellow-light);
font-family: var(--display);
font-size: 11px;
}
.single-hubs a strong {
font-family: var(--display);
font-size: 18px;
letter-spacing: -0.01em;
line-height: 1.15;
}
.single-article .post-navigation {
width: min(100%, 900px);
margin: 54px auto 0;
}
@media (max-width: 920px) {
.main-navigation .sub-menu {
position: static;
width: 100%;
margin: 7px 0 0;
padding: 0 0 0 18px;
border: 0;
border-left: 1px solid rgba(255, 202, 67, 0.28);
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 1;
pointer-events: auto;
transform: none;
}
.main-navigation .sub-menu li + li {
margin-top: 2px;
}
.main-navigation .sub-menu a {
padding: 8px 0;
color: #b7c2c0;
background: transparent;
font-size: 13px;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
color: var(--white);
background: transparent;
}
.single-byline {
grid-template-columns: 52px 1fr;
}
.single-byline__facts {
grid-column: 1 / -1;
justify-self: start;
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.single-article .single-hero {
padding: 138px 0 62px;
}
.single-article .single-hero h1 {
font-size: clamp(39px, 11vw, 52px);
}
.single-byline__facts {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
.single-byline__facts > * + *::before {
display: none;
}
.single-content-shell {
padding-top: 62px;
padding-bottom: 90px;
}
.single-article .entry-content h2 {
margin-top: 1.35em;
font-size: 32px;
}
.single-article .entry-content h3 {
margin-top: 1.35em;
font-size: 25px;
}
.single-article .wp-block-table,
.single-article .entry-content > table {
width: calc(100vw - 24px);
border-radius: 17px 17px 17px 5px;
}
.single-author {
padding: 24px;
grid-template-columns: 1fr;
align-items: start;
gap: 18px;
}
.single-author__portrait {
width: 86px;
height: 106px;
border-radius: 42px 12px 12px 12px;
}
.single-author h2 {
font-size: 27px;
}
.single-hubs {
padding: 25px 22px;
}
.single-hubs > div {
grid-template-columns: 1fr;
}
.single-hubs a {
min-height: 92px;
}
} .home-strategy {
padding: clamp(90px, 9vw, 145px) 0;
background: radial-gradient(circle at 87% 15%, rgba(246, 195, 55, 0.12), transparent 28%), var(--paper);
}
.home-strategy__inner {
display: grid;
gap: 58px;
}
.home-strategy__head {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.65fr);
align-items: end;
gap: clamp(42px, 8vw, 120px);
}
.home-strategy__head .overline {
grid-column: 1 / -1;
margin-bottom: -28px;
}
.home-strategy__head h2 {
max-width: 820px;
font-family: var(--display);
font-size: clamp(42px, 4.8vw, 72px);
font-weight: 740;
letter-spacing: -0.045em;
line-height: 1.02;
}
.home-strategy__head > p:last-child,
.home-strategy__note {
color: #465356;
font-size: 17px;
line-height: 1.7;
}
.home-strategy__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.home-strategy__grid article {
min-height: 360px;
padding: 38px 34px 34px 0;
display: flex;
flex-direction: column;
}
.home-strategy__grid article + article {
padding-left: 34px;
border-left: 1px solid var(--line);
}
.home-strategy__grid span {
margin-bottom: auto;
color: #976b00;
font-family: var(--display);
font-size: 15px;
}
.home-strategy__grid h3 {
max-width: 310px;
margin: 48px 0 18px;
font-family: var(--display);
font-size: 30px;
font-weight: 730;
letter-spacing: -0.025em;
line-height: 1.1;
}
.home-strategy__grid p {
margin-bottom: 26px;
color: #465356;
font-size: 15px;
line-height: 1.65;
}
.home-strategy__grid a {
width: fit-content;
padding-bottom: 8px;
border-bottom: 1px solid var(--ink);
display: inline-flex;
align-items: center;
gap: 16px;
font-size: 13px;
font-weight: 800;
}
.home-strategy__grid a svg {
width: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.home-strategy__note {
max-width: 820px;
padding-left: 30px;
border-left: 3px solid var(--yellow);
} .expert-hero {
position: relative;
padding: 190px 0 105px;
overflow: hidden;
color: var(--white);
background-color: var(--ink-deep);
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
radial-gradient(circle at 92% 8%, rgba(82, 99, 94, 0.3), transparent 32%);
background-size: 72px 72px, 72px 72px, auto;
}
.expert-hero::after {
position: absolute;
top: -210px;
right: -150px;
width: 560px;
height: 560px;
border: 1px solid rgba(255, 202, 67, 0.2);
border-radius: 50%;
content: "";
}
.expert-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
align-items: end;
gap: clamp(56px, 9vw, 150px);
}
.expert-hero__copy h1 {
max-width: 920px;
margin-bottom: 27px;
font-family: var(--display);
font-size: clamp(50px, 5vw, 76px);
font-weight: 760;
letter-spacing: -0.04em;
line-height: 1.01;
}
.expert-hero__lead {
max-width: 770px;
margin-bottom: 34px;
color: #c5cecc;
font-size: clamp(18px, 1.35vw, 22px);
line-height: 1.55;
}
.expert-hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 26px;
}
.expert-hero__index {
position: relative;
padding: 28px 28px 30px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 34px 34px 34px 9px;
background: linear-gradient(145deg, rgba(38, 52, 55, 0.95), rgba(12, 25, 27, 0.92));
box-shadow: 18px 18px 0 -17px var(--yellow), 0 22px 44px rgba(0, 0, 0, 0.2);
}
.expert-hero__index span {
display: block;
margin-bottom: 32px;
color: var(--yellow-light);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.17em;
}
.expert-hero__index strong {
display: block;
padding-bottom: 24px;
border-bottom: 1px solid var(--line-light);
font-family: var(--display);
font-size: 28px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.expert-hero__index p {
margin: 22px 0 0;
color: #b7c0be;
font-size: 14px;
line-height: 1.55;
}
.expert-body {
position: relative;
padding: 110px 0 130px;
background: var(--paper-light);
}
.expert-body::before {
position: absolute;
top: 0;
right: var(--gutter);
left: var(--gutter);
height: 1px;
background: var(--line);
content: "";
}
.expert-layout {
display: grid;
grid-template-columns: 280px minmax(0, 820px);
justify-content: space-between;
gap: clamp(60px, 9vw, 150px);
}
.expert-summary {
position: sticky;
top: 115px;
align-self: start;
padding: 24px 0;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--line);
}
.expert-summary > p {
margin-bottom: 18px;
color: var(--sage);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.expert-summary ol {
margin: 0;
padding: 0;
counter-reset: summary;
list-style: none;
}
.expert-summary li {
counter-increment: summary;
}
.expert-summary li a {
position: relative;
padding: 10px 0 10px 34px;
display: block;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.expert-summary li a::before {
position: absolute;
left: 0;
color: var(--yellow);
content: "0" counter(summary);
font-family: var(--display);
font-size: 12px;
}
.expert-summary li a:hover {
color: #8b6400;
}
.expert-summary__hub {
margin-top: 24px;
padding: 16px 18px;
border-radius: 18px 18px 18px 5px;
display: block;
background: var(--paper);
box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px rgba(18, 32, 35, 0.05);
}
.expert-summary__hub span,
.expert-summary__hub strong {
display: block;
}
.expert-summary__hub span {
margin-bottom: 5px;
color: var(--sage);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.expert-summary__hub strong {
font-family: var(--display);
font-size: 16px;
line-height: 1.25;
}
.expert-content {
max-width: 790px;
margin: 0 auto;
font-size: 17px;
line-height: 1.72;
}
.expert-intro {
max-width: 730px;
margin: 0 0 58px;
color: var(--ink);
font-size: clamp(18px, 1.35vw, 20px);
letter-spacing: -0.008em;
line-height: 1.68;
}
.expert-intro p {
margin-bottom: 18px;
}
.expert-intro p:last-child {
margin-bottom: 0;
}
.expert-section {
position: relative;
padding: 0 0 54px 68px;
scroll-margin-top: 120px;
}
.expert-section + .expert-section {
padding-top: 54px;
border-top: 1px solid var(--line);
}
.expert-section__number {
position: absolute;
top: 5px;
left: 0;
width: 46px;
height: 46px;
border: 1px solid var(--line);
border-radius: 50% 50% 50% 12px;
display: grid;
place-items: center;
color: #8b6400;
background: linear-gradient(145deg, var(--white), var(--paper));
font-family: var(--display);
font-size: 14px;
box-shadow: 0 7px 17px rgba(18, 32, 35, 0.07), inset 0 1px white;
}
.expert-section + .expert-section .expert-section__number {
top: 59px;
}
.expert-section h2 {
max-width: 650px;
margin-bottom: 22px;
font-family: var(--display);
font-size: clamp(29px, 2.5vw, 40px);
font-weight: 720;
letter-spacing: -0.028em;
line-height: 1.1;
}
.expert-section p {
color: #39474a;
}
.expert-section p:last-child {
margin-bottom: 0;
}
.expert-checklist {
margin-top: 8px;
padding: 36px 40px;
border: 1px solid rgba(18, 32, 35, 0.12);
border-radius: 34px 34px 34px 9px;
background: linear-gradient(145deg, #f6c43b, var(--yellow));
box-shadow: 0 18px 36px rgba(136, 96, 4, 0.14), inset 0 1px rgba(255, 255, 255, 0.45);
}
.expert-checklist > p {
margin-bottom: 20px;
font-family: var(--display);
font-size: 28px;
font-weight: 760;
letter-spacing: -0.02em;
}
.expert-checklist ul {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 28px;
list-style: none;
}
.expert-checklist li {
position: relative;
padding: 13px 0 13px 23px;
border-top: 1px solid rgba(18, 32, 35, 0.18);
font-size: 14px;
font-weight: 680;
line-height: 1.45;
}
.expert-checklist li::before {
position: absolute;
top: 20px;
left: 2px;
width: 8px;
height: 8px;
border: 2px solid var(--ink);
border-top: 0;
border-left: 0;
content: "";
transform: rotate(45deg);
}
.expert-sources {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--line);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 28px;
}
.expert-sources > span {
color: var(--sage);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.expert-sources ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px 20px;
list-style: none;
}
.expert-sources a {
border-bottom: 1px solid currentColor;
color: #46575a;
font-size: 12px;
font-weight: 700;
}
.expert-related {
padding: 105px 0 120px;
color: var(--white);
background: var(--ink);
}
.expert-related__head {
margin-bottom: 48px;
display: grid;
grid-template-columns: 1fr 420px;
align-items: end;
gap: 60px;
}
.expert-related__head h2 {
margin: 0;
font-family: var(--display);
font-size: clamp(40px, 4vw, 62px);
letter-spacing: -0.04em;
line-height: 1;
}
.expert-related__head > p {
margin: 0;
color: #b6c0be;
}
.expert-related__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.expert-related__card {
min-height: 270px;
padding: 26px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 26px 26px 26px 7px;
display: flex;
flex-direction: column;
background: linear-gradient(145deg, rgba(38, 52, 55, 0.8), rgba(9, 19, 21, 0.78));
box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.expert-related__card:hover {
border-color: rgba(255, 202, 67, 0.55);
background: linear-gradient(145deg, #2a3b3e, #0b1719);
transform: translateY(-4px);
}
.expert-related__card > span {
margin-bottom: 34px;
color: #aab6b4;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.expert-related__card strong {
font-family: var(--display);
font-size: 23px;
letter-spacing: -0.02em;
line-height: 1.13;
}
.expert-related__card em {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--yellow-light);
font-size: 11px;
font-style: normal;
font-weight: 800;
}
.expert-related__card svg {
width: 30px;
height: 30px;
padding: 7px;
border-radius: 9px 9px 9px 3px;
color: var(--ink);
background: var(--yellow-light);
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.expert-cta {
padding: 100px 0;
background: var(--yellow-light);
}
.expert-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.7fr);
align-items: end;
gap: clamp(60px, 10vw, 170px);
}
.expert-cta h2 {
max-width: 870px;
margin: 0;
font-family: var(--display);
font-size: clamp(43px, 4.6vw, 70px);
letter-spacing: -0.045em;
line-height: 1;
}
.expert-cta__inner > div:last-child > p {
margin-bottom: 26px;
font-size: 17px;
}
@media (max-width: 1080px) {
.expert-hero__grid,
.expert-layout,
.expert-related__head,
.expert-cta__inner {
grid-template-columns: 1fr;
}
.expert-hero__index {
max-width: 520px;
}
.expert-summary {
position: static;
display: none;
}
.expert-content {
max-width: 820px;
}
.expert-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.expert-related__head > p {
max-width: 620px;
}
}
@media (max-width: 700px) {
.home-strategy__head,
.home-strategy__grid {
grid-template-columns: 1fr;
}
.home-strategy__head .overline {
grid-column: auto;
margin-bottom: -18px;
}
.home-strategy__grid article,
.home-strategy__grid article + article {
min-height: 0;
padding: 32px 0;
border-left: 0;
}
.home-strategy__grid article + article {
border-top: 1px solid var(--line);
}
.home-strategy__grid span {
margin-bottom: 0;
}
.home-strategy__grid h3 {
margin-top: 24px;
}
.expert-hero {
padding: 145px 0 72px;
}
.expert-hero__grid {
gap: 45px;
}
.expert-hero__copy h1 {
font-size: clamp(42px, 12vw, 58px);
}
.expert-hero__lead {
font-size: 18px;
}
.expert-hero__actions {
align-items: stretch;
flex-direction: column;
}
.expert-hero__actions .button,
.expert-hero__actions .text-link {
width: 100%;
}
.expert-hero__actions .text-link {
justify-content: space-between;
}
.expert-body,
.expert-related,
.expert-cta {
padding-top: 72px;
padding-bottom: 80px;
}
.expert-intro {
margin-bottom: 58px;
font-size: 22px;
}
.expert-section,
.expert-section + .expert-section {
padding: 70px 0 56px;
}
.expert-section:first-child {
padding-top: 64px;
}
.expert-section__number,
.expert-section + .expert-section .expert-section__number {
top: 0;
}
.expert-section h2 {
font-size: 35px;
}
.expert-content {
font-size: 17px;
}
.expert-checklist {
padding: 28px 24px;
}
.expert-checklist ul,
.expert-related__grid {
grid-template-columns: 1fr;
}
.expert-sources {
align-items: flex-start;
flex-direction: column;
}
.expert-sources ul {
justify-content: flex-start;
}
.expert-related__card {
min-height: 230px;
}
.expert-cta h2 {
font-size: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.js [data-reveal] {
opacity: 1;
transform: none;
}
} .expert-inline-link{margin-top:24px!important;padding:17px 20px;border-left:3px solid var(--yellow);background:#f7f5ef;font-size:14px;line-height:1.45}.expert-inline-link span{display:block;margin-bottom:4px;color:#718084;font-size:11px;font-weight:760;letter-spacing:.09em;text-transform:uppercase}.expert-inline-link a{color:var(--ink);font-weight:760;text-decoration:none}.expert-inline-link a:hover{text-decoration:underline}.expert-section p+p{margin-top:16px}.home-diagnostic{padding:110px 0;background:#f4f1e9}.home-diagnostic__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);gap:28px 70px;align-items:end;margin-bottom:48px}.home-diagnostic__head .overline{grid-column:1/-1}.home-diagnostic__head h2{margin:0;font-family:var(--display);font-size:clamp(38px,4.6vw,66px);line-height:1;letter-spacing:-.04em}.home-diagnostic__head>p:last-child{margin:0;color:#526064;line-height:1.7}.home-diagnostic__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.home-diagnostic__grid>a{display:flex;min-height:330px;flex-direction:column;padding:30px;border:1px solid rgba(18,32,35,.12);border-radius:28px 28px 28px 8px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.home-diagnostic__grid>a:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,32,35,.08)}.home-diagnostic__grid span{font-family:var(--display);font-weight:760;color:#8b6400}.home-diagnostic__grid h3{margin:44px 0 14px;font-family:var(--display);font-size:27px;line-height:1.08}.home-diagnostic__grid p{color:#526064;line-height:1.6}.home-diagnostic__grid strong{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;font-size:13px}.home-diagnostic__grid svg{width:19px}.service-map{padding:110px 0;background:#f4f1e9}.service-map__head{max-width:820px;margin-bottom:50px}.service-map__head h2{font-family:var(--display);font-size:clamp(38px,4vw,58px);line-height:1.04;letter-spacing:-.035em}.service-map__head>p:last-child{max-width:680px;color:#526064;line-height:1.7}.service-map__groups{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-map__group{padding:28px;border:1px solid rgba(18,32,35,.12);border-radius:26px 26px 26px 8px;background:#fff}.service-map__group h3{margin:0 0 18px;font-family:var(--display);font-size:25px}.service-map__group ul{margin:0;padding:0;list-style:none}.service-map__group li+li{border-top:1px solid var(--line)}.service-map__group a{display:block;padding:16px 0;color:var(--ink);text-decoration:none}.service-map__group strong,.service-map__group span{display:block}.service-map__group strong{font-size:14px;line-height:1.35}.service-map__group span{margin-top:5px;color:#6c797c;font-size:12px;line-height:1.45}.service-map__group a:hover strong{text-decoration:underline}@media(max-width:900px){.home-diagnostic__head{grid-template-columns:1fr}.home-diagnostic__head .overline{grid-column:auto}.home-diagnostic__grid,.service-map__groups{grid-template-columns:1fr}.home-diagnostic,.service-map{padding:78px 0}.home-diagnostic__grid>a{min-height:0}.home-diagnostic__grid h3{margin-top:28px}} .expert-points {
margin: 26px 0 0;
padding: 24px 26px;
border: 1px solid var(--line);
border-radius: 22px 22px 22px 7px;
background: var(--paper);
}
.expert-points__title {
margin: 0 0 15px !important;
color: var(--ink) !important;
font-weight: 780;
}
.expert-points ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 26px;
margin: 0;
padding: 0;
list-style: none;
}
.expert-points li {
position: relative;
padding-left: 18px;
color: #39474a;
font-size: 15px;
line-height: 1.55;
}
.expert-points li::before {
position: absolute;
top: 0.66em;
left: 0;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--yellow);
content: "";
transform: translateY(-50%);
}
.expert-example {
margin: 28px 0 0;
padding: 26px 28px;
border-left: 4px solid var(--yellow);
border-radius: 0 22px 22px 0;
background: #fff;
box-shadow: 0 14px 34px rgba(18, 32, 35, 0.06);
}
.expert-example__title {
margin: 0 0 12px !important;
color: var(--ink) !important;
font-family: var(--display);
font-size: 20px;
font-weight: 780;
line-height: 1.2;
}
.expert-example p + p {
margin-top: 12px;
}
.expert-inline-link {
margin: 24px 0 0 !important;
padding: 1px 0 1px 18px;
border-left: 2px solid var(--yellow);
background: transparent;
color: #39474a;
font-size: 15px;
line-height: 1.65;
}
.expert-inline-link span {
display: inline;
margin: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: normal;
text-transform: none;
}
.expert-inline-link a {
color: var(--ink);
font-weight: 780;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.home-deliverables {
padding: 110px 0;
background: var(--yellow-light);
}
.home-deliverables__head {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
align-items: end;
gap: 28px 70px;
margin-bottom: 48px;
}
.home-deliverables__head .overline {
grid-column: 1 / -1;
}
.home-deliverables__head h2 {
margin: 0;
font-family: var(--display);
font-size: clamp(38px, 4.6vw, 66px);
line-height: 1;
letter-spacing: -0.04em;
}
.home-deliverables__head > p:last-child {
margin: 0;
color: #3d4a4d;
line-height: 1.7;
}
.home-deliverables__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.home-deliverables__grid article {
min-height: 285px;
padding: 28px;
border: 1px solid rgba(18, 32, 35, 0.14);
border-radius: 26px 26px 26px 8px;
background: rgba(255, 255, 255, 0.34);
}
.home-deliverables__grid span {
color: #765800;
font-family: var(--display);
font-weight: 780;
}
.home-deliverables__grid h3 {
margin: 54px 0 14px;
font-family: var(--display);
font-size: 25px;
line-height: 1.08;
}
.home-deliverables__grid p {
margin: 0;
color: #3d4a4d;
line-height: 1.62;
}
@media (max-width: 1050px) {
.home-deliverables__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-deliverables__grid article {
min-height: 250px;
}
}
@media (max-width: 700px) {
.expert-points {
padding: 22px;
}
.expert-points ul {
grid-template-columns: 1fr;
}
.expert-example {
padding: 23px 22px;
}
.home-deliverables {
padding: 78px 0;
}
.home-deliverables__head,
.home-deliverables__grid {
grid-template-columns: 1fr;
}
.home-deliverables__head .overline {
grid-column: auto;
}
.home-deliverables__grid article {
min-height: 0;
}
.home-deliverables__grid h3 {
margin-top: 34px;
}
} .expert-inline-link {
display: grid;
gap: 8px;
margin: 34px 0 0 !important;
padding: 20px 22px;
border: 1px solid var(--line);
border-left: 4px solid var(--yellow);
border-radius: 0 18px 18px 0;
background: #fbfaf6;
color: #39474a;
font-size: 15px;
line-height: 1.65;
}
.expert-inline-link .expert-inline-link__label {
display: block;
margin: 0;
color: #6b787b;
font-size: 11px;
font-weight: 780;
letter-spacing: 0.09em;
line-height: 1.2;
text-transform: uppercase;
}
.expert-inline-link p {
margin: 0 !important;
}
.expert-inline-link p a {
margin-inline: 0.12em;
color: var(--ink);
font-weight: 780;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.expert-inline-link p a:hover,
.expert-inline-link p a:focus-visible {
text-decoration-thickness: 2px;
}
.expert-table-wrap {
margin-top: 30px;
}
.expert-points,
.expert-example,
.expert-note {
margin-top: 30px;
}
@media (max-width: 700px) {
.expert-inline-link {
margin-top: 28px !important;
padding: 18px 19px;
}
}  .home-strategy__grid a > svg {
flex: 0 0 auto;
width: 17px;
height: 17px;
max-width: 17px;
max-height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-diagnostic__grid strong > svg {
flex: 0 0 auto;
width: 19px;
height: 19px;
max-width: 19px;
max-height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
} .home-strategy__grid--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
} .entry-content,
.expert-content,
.service-detail__copy,
.about-story__copy,
.contact-page__details,
.contact-page__form {
min-width: 0;
overflow-wrap: anywhere;
}
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object,
.expert-content iframe,
.expert-content video,
.expert-content embed,
.expert-content object {
display: block;
max-width: 100%;
}
.entry-content pre,
.expert-content pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 1080px) and (min-width: 701px) {
.home-strategy__grid--four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-strategy__grid--four article {
min-height: 330px;
padding: 34px 28px;
border-left: 0;
border-bottom: 1px solid var(--line);
}
.home-strategy__grid--four article:nth-child(even) {
border-left: 1px solid var(--line);
}
.home-strategy__grid--four article:nth-last-child(-n + 2) {
border-bottom: 0;
}
}
@media (max-width: 920px) { .main-navigation {
max-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-bottom: max(38px, env(safe-area-inset-bottom));
}
.main-navigation .menu,
.main-navigation .menu > li,
.main-navigation .sub-menu {
min-width: 0;
} .page-hero__inner,
.archive-hero__inner {
max-width: 100%;
padding-left: 0;
border-left: 0;
} .single-article .wp-block-table {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-left: 0;
transform: none;
}
.single-article .wp-block-table table {
min-width: 620px;
}
}
@media (max-width: 700px) {
.home-strategy__grid--four {
grid-template-columns: 1fr;
}
.home-strategy__grid--four article,
.home-strategy__grid--four article:nth-child(even),
.home-strategy__grid--four article:nth-last-child(-n + 2) {
min-height: 0;
padding: 32px 0;
border-left: 0;
border-bottom: 1px solid var(--line);
}
.home-strategy__grid--four article:last-child {
border-bottom: 0;
}
.main-navigation {
width: min(91vw, 430px);
padding: 104px 24px max(28px, env(safe-area-inset-bottom));
}
.main-navigation::before {
left: 24px;
}
.main-navigation .menu {
gap: 11px;
}
.main-navigation .menu > li > a {
padding: 6px 0;
font-size: clamp(25px, 7.5vw, 31px);
line-height: 1.08;
}
.main-navigation .sub-menu {
margin-top: 4px;
padding-left: 14px;
}
.main-navigation .sub-menu a {
padding: 7px 0;
font-size: 12px;
line-height: 1.3;
}
.nav-contact-mobile {
margin-top: 26px;
}
.home-strategy__note {
padding-left: 18px;
}
.contact-page__details > ul li {
grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
}
}
@media (max-width: 480px) {
:root {
--gutter: 18px;
}
.site-header {
top: 10px;
}
.site-header__inner {
width: calc(100% - 20px);
min-height: 60px;
padding: 6px 7px 6px 14px;
gap: 12px;
}
.site-header__inner::before {
left: 52px;
width: 76px;
}
.site-brand {
width: min(158px, calc(100vw - 104px));
min-width: 0;
}
.menu-toggle {
width: 44px;
height: 44px;
}
.main-navigation {
width: min(94vw, 410px);
padding-right: 20px;
padding-left: 20px;
}
.main-navigation::before {
left: 20px;
}
.page-hero,
.archive-hero,
.single-hero {
padding-top: 128px;
}
.page-hero__lead,
.archive-hero__lead {
font-size: 18px;
}
.entry-content blockquote,
.single-article .entry-content blockquote {
padding-right: 20px;
padding-left: 24px;
}
.contact-page__details > ul li,
.about-story__facts p {
grid-template-columns: 1fr;
gap: 4px;
}
.single-article .wp-block-table table {
min-width: 560px;
}
} @media (max-width: 640px) {
body.menu-open::before {
display: none;
}
.main-navigation {
top: 0;
right: 0;
width: 100vw;
max-width: none;
height: 100svh;
height: 100dvh;
max-height: 100dvh;
padding: 82px 20px max(18px, env(safe-area-inset-bottom));
border-left: 0;
border-radius: 0;
display: flex;
flex-direction: column;
background: var(--ink-deep);
box-shadow: none;
}
.main-navigation::before {
left: 20px;
width: 78px;
}
.main-navigation .menu {
flex: 0 0 auto;
gap: 2px;
}
.main-navigation .menu > li {
width: 100%;
margin: 0;
}
.main-navigation .menu > li > a {
width: 100%;
padding: 6px 0;
font-size: clamp(23px, 6.8vw, 28px);
line-height: 1.08;
white-space: nowrap;
}
.main-navigation .menu > li > a::after {
display: none;
}
.main-navigation .sub-menu {
width: 100%;
margin: 3px 0 3px;
padding: 2px 0 2px 12px;
border-left-color: rgba(255, 202, 67, 0.22);
list-style: none !important;
}
.main-navigation .sub-menu li,
.main-navigation .sub-menu li + li {
margin: 0;
padding: 0;
list-style: none !important;
}
.main-navigation .sub-menu li::marker {
content: "";
}
.main-navigation .sub-menu a {
min-width: 0;
padding: 5px 0;
display: flex;
align-items: baseline;
gap: 8px;
color: #c4cecc;
font-size: clamp(11px, 3.2vw, 13px);
font-weight: 720;
line-height: 1.25;
}
.main-navigation .sub-menu span {
flex: 0 0 22px;
margin: 0;
color: var(--yellow-light);
font-size: 10px;
}
.nav-contact-mobile {
width: 100%;
min-height: 52px;
margin-top: 14px;
padding: 8px 8px 8px 16px;
flex: 0 0 auto;
font-size: 13px;
}
.nav-contact-mobile svg {
width: 36px;
height: 36px;
flex: 0 0 36px;
}
.menu-toggle[aria-expanded="true"] {
position: relative;
z-index: 5;
}
}
@media (max-width: 380px), (max-height: 700px) and (max-width: 640px) {
.main-navigation {
padding-top: 74px;
padding-right: 16px;
padding-left: 16px;
}
.main-navigation::before {
left: 16px;
}
.main-navigation .menu > li > a {
padding: 4px 0;
font-size: 22px;
}
.main-navigation .sub-menu a {
padding: 4px 0;
font-size: 11px;
}
.nav-contact-mobile {
min-height: 48px;
margin-top: 10px;
}
} @media (max-width: 640px) {
body.menu-open {
overflow: hidden !important;
}
body.menu-open::before {
display: none !important;
}
.main-navigation {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
max-width: none !important;
height: 100dvh !important;
max-height: 100dvh !important;
padding: 74px 22px max(18px, env(safe-area-inset-bottom)) !important;
border: 0 !important;
border-radius: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: var(--ink-deep) !important;
box-shadow: none !important;
}
.main-navigation::before {
left: 22px !important;
width: 68px !important;
}
.main-navigation .menu {
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
display: flex !important;
align-items: stretch !important;
flex-direction: column !important;
}
.main-navigation .menu > li {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.main-navigation .menu > li > a {
width: 100% !important;
margin: 0 !important;
padding: 9px 0 !important;
display: block !important;
color: var(--white) !important;
background: transparent !important;
box-shadow: none !important;
font-family: var(--sans) !important;
font-size: 19px !important;
font-weight: 680 !important;
letter-spacing: 0 !important;
line-height: 1.25 !important;
white-space: normal !important;
}
.main-navigation .menu > li > a::after {
display: none !important;
}
.main-navigation .sub-menu {
position: static !important;
width: 100% !important;
margin: 1px 0 7px !important;
padding: 2px 0 2px 12px !important;
border: 0 !important;
border-left: 1px solid rgba(255, 202, 67, 0.28) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
list-style: none !important;
}
.main-navigation .sub-menu li,
.main-navigation .sub-menu li + li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.main-navigation .sub-menu li::marker {
content: '' !important;
}
.main-navigation .sub-menu a {
width: 100% !important;
margin: 0 !important;
padding: 6px 0 !important;
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
color: #c3cdcb !important;
background: transparent !important;
font-family: var(--sans) !important;
font-size: 12.5px !important;
font-weight: 620 !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
}
.main-navigation .sub-menu span {
flex: 0 0 20px !important;
margin: 0 !important;
color: var(--yellow-light) !important;
font-family: var(--sans) !important;
font-size: 10px !important;
font-weight: 760 !important;
}
.nav-contact-mobile {
width: 100% !important;
min-height: 48px !important;
margin-top: 14px !important;
padding: 7px 7px 7px 15px !important;
font-size: 13px !important;
}
.nav-contact-mobile svg {
width: 34px !important;
height: 34px !important;
flex: 0 0 34px !important;
}
.menu-toggle[aria-expanded="true"] {
position: fixed !important;
z-index: 110 !important;
top: 20px !important;
right: 20px !important;
width: 44px !important;
height: 44px !important;
}
}
@media (max-width: 390px), (max-height: 720px) and (max-width: 640px) {
.main-navigation {
padding-top: 66px !important;
padding-right: 18px !important;
padding-left: 18px !important;
}
.main-navigation .menu > li > a {
padding: 7px 0 !important;
font-size: 17px !important;
}
.main-navigation .sub-menu a {
padding: 5px 0 !important;
font-size: 11.5px !important;
}
.nav-contact-mobile {
min-height: 44px !important;
margin-top: 9px !important;
}
}