:root {
color-scheme: light;
--pearl: #f5f3ee;
--chalk: #fcfbf8;
--paper: #ffffff;
--mineral: #e8e9e5;
--ink: #111722;
--ink-soft: #29313d;
--slate: #5e6875;
--muted: #828a94;
--night: #071521;
--night-soft: #0d202f;
--night-line: rgba(255, 255, 255, 0.12);
--cobalt:#173a3d;
--cobalt-dark:#102b2d;
--champagne: #b7874c;
--champagne-soft: #d5b88c;
--line: #dedfd9;
--line-strong: #c9ccc5;
--focus:#789c97;
--action-obsidian:#173a3d;
--action-obsidian-hover:#1e4949;
--action-obsidian-pressed:#102b2d;
--action-pearl:#f3f0e8;
--action-ivory:#fbf8f1;
--action-champagne:#c3a36f;
--action-titanium:#789c97;
--action-shadow:rgba(10,30,31,.18);
--container: 1480px;
--radius-small: 8px;
--radius-medium: 18px;
--radius-large: 30px;
--shadow-soft:
0 22px 70px rgba(18, 26, 37, 0.08);
--shadow-product:
0 34px 90px rgba(7, 21, 33, 0.18);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-width: 320px;
margin: 0;
background: var(--pearl);
color: var(--ink);
font-family:
"Avenir Next",
Avenir,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
line-height: 1.55;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body,
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
}
img,
svg {
display: block;
max-width: 100%;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
button,
input,
select,
textarea {
color: inherit;
}
.container {
width: min(calc(100% - 64px), var(--container));
margin-inline: auto;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: fixed;
z-index: 1000;
top: 12px;
left: 12px;
padding: 11px 16px;
border-radius: 7px;
background: var(--ink);
color: white;
font-weight: 700;
text-decoration: none;
transform: translateY(-180%);
}
.skip-link:focus {
transform: translateY(0);
}
.eyebrow {
margin: 0;
color: var(--champagne);
font-size: 0.67rem;
font-weight: 750;
letter-spacing: 0.17em;
line-height: 1.4;
text-transform: uppercase;
}
.site-header {
position: sticky;
z-index: 100;
top: 0;
border-bottom: 1px solid rgba(17, 23, 34, 0.08);
background: rgba(245, 243, 238, 0.94);
backdrop-filter: blur(18px);
}
.navigation {
min-height: 78px;
display: grid;
grid-template-columns: minmax(220px, 1fr) auto minmax(300px, 1fr);
align-items: center;
gap: 32px;
}
.brand {
display: inline-grid;
gap: 7px;
justify-self: start;
text-decoration: none;
text-transform: uppercase;
}
.brand-name {
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.18em;
line-height: 1;
}
.brand-subtitle {
color: var(--muted);
font-size: 0.49rem;
font-weight: 750;
letter-spacing: 0.2em;
line-height: 1;
}
.main-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(24px, 3vw, 44px);
}
.main-navigation a {
position: relative;
color: var(--ink-soft);
font-size: 0.73rem;
font-weight: 700;
text-decoration: none;
}
.main-navigation a::after {
position: absolute;
right: 0;
bottom: -10px;
left: 0;
height: 1px;
background: var(--ink);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.main-navigation a:hover::after,
.main-navigation a:focus-visible::after {
transform: scaleX(1);
}
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 17px;
}
.language-navigation {
display: flex;
align-items: center;
}
.language-navigation a {
position: relative;
padding: 6px 7px;
color: var(--muted);
font-size: 0.63rem;
font-weight: 800;
text-decoration: none;
}
.language-navigation a + a::before {
position: absolute;
top: 50%;
left: -1px;
color: #aeb3ba;
content: "/";
transform: translateY(-50%);
}
.language-navigation a[aria-current="page"] {
color: var(--ink);
}
.header-project-button {
min-height: 43px;
display: inline-flex;
align-items: center;
gap: 18px;
padding: 10px 17px 10px 19px;
border-radius: 7px;
background: var(--cobalt);
color: white;
font-size: 0.7rem;
font-weight: 800;
text-decoration: none;
box-shadow: 0 10px 26px rgba(23, 58, 61, 0.2);
transition:
background-color 160ms ease,
transform 160ms ease;
}
.header-project-button i {
font-style: normal;
font-size: 0.85rem;
}
.hero {
position: relative;
padding-block: clamp(46px, 5vw, 78px) clamp(70px, 7vw, 110px);
overflow: hidden;
background:
radial-gradient(
circle at 4% 8%,
rgba(183, 135, 76, 0.1),
transparent 25%
),
linear-gradient(180deg, var(--chalk), var(--pearl));
}
.hero::before {
position: absolute;
top: 9%;
right: -9%;
width: 42vw;
height: 42vw;
border: 1px solid rgba(17, 23, 34, 0.055);
border-radius: 50%;
content: "";
pointer-events: none;
}
.hero-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
align-items: center;
gap: clamp(42px, 5vw, 78px);
}
.hero-copy {
min-width: 0;
}
.hero-index {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 24px;
}
.hero-index > span {
width: 31px;
height: 31px;
display: grid;
place-items: center;
border: 1px solid #d5b98f;
border-radius: 50%;
color: var(--champagne);
font-size: 0.58rem;
font-weight: 800;
}
.hero-title {
margin-bottom: 30px;
font-size: clamp(3.2rem, 4vw, 5.15rem);
line-height: 0.93;
letter-spacing: -0.055em;
}
.hero-title-line {
display: block;
}
.hero-title-line:nth-child(1),
.hero-title-line:nth-child(2) {
font-family:
"Avenir Next",
Avenir,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
font-weight: 600;
}
.hero-title-line:nth-child(2) {
margin-top: 0.04em;
}
.hero-title-line:nth-child(3) {
margin-top: 0.06em;
font-family:
"Iowan Old Style",
Baskerville,
"Palatino Linotype",
Georgia,
serif;
font-size: 1.04em;
font-style: italic;
font-weight: 500;
letter-spacing: -0.045em;
}
.hero-introduction {
max-width: 610px;
margin-bottom: 0;
color: var(--slate);
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: clamp(1rem, 1.25vw, 1.17rem);
line-height: 1.58;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-top: 36px;
}
.button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 26px;
padding: 12px 19px;
border: 1px solid transparent;
border-radius: 7px;
font-size: 0.73rem;
font-weight: 800;
text-decoration: none;
transition:
background-color 160ms ease,
border-color 160ms ease,
color 160ms ease,
transform 160ms ease;
}
.button i {
font-style: normal;
font-size: 0.88rem;
}
.button:hover {
transform: translateY(-2px);
}
.trust-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 34px;
padding-top: 19px;
border-top: 1px solid var(--line);
}
.trust-row span {
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
line-height: 1.45;
}
.hero-product {
position: relative;
min-width: 0;
padding: 17px 0 19px 19px;
isolation: isolate;
}
.hero-product::before {
position: absolute;
z-index: -2;
inset: 0 8% 0 0;
border-radius: 32px;
background:
linear-gradient(145deg, #edf0f2, #e2e4e2);
content: "";
}
.hero-product::after {
position: absolute;
z-index: -1;
top: 9%;
right: 1%;
width: 54%;
height: 82%;
border: 1px solid rgba(23, 58, 61, 0.2);
border-radius: 24px;
content: "";
}
.product-stage-header,
.product-stage-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: var(--slate);
font-size: 0.56rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.product-stage-header {
padding: 0 5% 15px 14px;
}
.product-stage-header > div {
display: flex;
gap: 6px;
}
.product-stage-header i {
padding: 5px 8px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-style: normal;
letter-spacing: 0.08em;
}
.product-stage-media {
position: relative;
}
.hero-product-image {
width: 100%;
height: auto;
border-radius: 25px;
object-fit: contain;
box-shadow: var(--shadow-product);
}
.product-stage-number {
position: absolute;
right: -20px;
bottom: 8%;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.52);
border-radius: 50%;
background: rgba(7, 21, 33, 0.8);
color: white;
font-size: 0.63rem;
font-weight: 800;
backdrop-filter: blur(12px);
}
.product-stage-footer {
padding: 17px 5% 0 14px;
}
.product-stage-footer strong {
color: var(--ink);
font-size: 0.58rem;
}
.benefits-section {
position: relative;
z-index: 3;
background: var(--night);
color: white;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.benefit-card {
min-height: 142px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 16px;
padding: 28px 25px;
border-right: 1px solid var(--night-line);
}
.benefit-card:last-child {
border-right: 0;
}
.benefit-icon {
width: 35px;
height: 35px;
display: grid;
place-items: center;
border: 1px solid rgba(213, 184, 140, 0.48);
border-radius: 50%;
color: var(--champagne-soft);
font-size: 0.58rem;
font-weight: 800;
}
.benefit-card h3 {
margin-bottom: 6px;
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 1.06rem;
font-weight: 500;
}
.benefit-card p {
margin-bottom: 0;
color: rgba(255, 255, 255, 0.55);
font-size: 0.66rem;
line-height: 1.5;
}
.solutions-section,
.partner-section,
.process-section {
padding-block: clamp(92px, 10vw, 148px);
background: var(--chalk);
}
.editorial-heading {
display: grid;
grid-template-columns: 190px minmax(0, 1fr) minmax(260px, 0.52fr);
align-items: end;
gap: clamp(30px, 5vw, 76px);
margin-bottom: clamp(48px, 6vw, 82px);
}
.editorial-heading > div {
align-self: start;
display: grid;
gap: 13px;
}
.editorial-heading > div > span,
.section-number {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid #d6ba91;
border-radius: 50%;
color: var(--champagne);
font-size: 0.6rem;
font-weight: 800;
}
.editorial-heading h2,
.ai-introduction h2,
.project-introduction h2 {
margin: 0;
font-family:
"Iowan Old Style",
Baskerville,
"Palatino Linotype",
Georgia,
serif;
font-size: clamp(2.8rem, 4.5vw, 5rem);
font-weight: 500;
letter-spacing: -0.05em;
line-height: 0.96;
}
.editorial-heading > p {
margin: 0;
color: var(--slate);
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 0.95rem;
line-height: 1.6;
}
.service-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 18px;
}
.service-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--paper);
box-shadow: 0 13px 42px rgba(17, 23, 34, 0.045);
}
.service-card:nth-child(1),
.service-card:nth-child(4) {
grid-column: span 7;
}
.service-card:nth-child(2),
.service-card:nth-child(3) {
grid-column: span 5;
}
.service-visual {
position: relative;
height: clamp(280px, 27vw, 410px);
overflow: hidden;
background: var(--mineral);
}
.service-card:nth-child(2) .service-visual,
.service-card:nth-child(3) .service-visual {
height: clamp(260px, 23vw, 360px);
}
.service-image,
.case-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-card:hover .service-image,
.case-card:hover .case-image {
transform: scale(1.025);
}
.service-path {
position: absolute;
top: 17px;
left: 17px;
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 999px;
background: rgba(7, 21, 33, 0.68);
color: white;
font-size: 0.57rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(12px);
}
.service-content {
padding: clamp(23px, 3vw, 38px);
}
.service-audience,
.case-category {
margin-bottom: 11px;
color: var(--champagne);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.service-content h3,
.case-content h3 {
margin-bottom: 16px;
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: clamp(1.65rem, 2.5vw, 2.55rem);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.04;
}
.service-description {
max-width: 620px;
margin-bottom: 23px;
color: var(--slate);
font-size: 0.81rem;
}
.service-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px 20px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.service-features li {
position: relative;
padding-left: 17px;
color: var(--slate);
font-size: 0.7rem;
}
.service-features li::before {
position: absolute;
top: 0.35em;
left: 0;
width: 7px;
height: 7px;
border: 1px solid var(--champagne);
border-radius: 50%;
content: "";
}
.service-action,
.case-action {
display: inline-flex;
align-items: center;
gap: 18px;
color: var(--ink);
font-size: 0.7rem;
font-weight: 800;
text-decoration: none;
}
.service-action i,
.case-action i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid var(--line-strong);
border-radius: 50%;
font-style: normal;
transition:
background-color 160ms ease,
color 160ms ease;
}
.work-section {
padding-block: clamp(96px, 10vw, 156px);
background: var(--night);
color: white;
}
.editorial-heading-light h2 {
color: white;
}
.editorial-heading-light .eyebrow {
color: var(--champagne-soft);
}
.case-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.case-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--night-line);
border-radius: 24px;
background: var(--night-soft);
}
.case-card:first-child {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
}
.case-card:first-child .case-visual {
min-height: 560px;
}
.case-visual {
height: 360px;
overflow: hidden;
background: #122331;
}
.case-content {
padding: clamp(26px, 4vw, 46px);
}
.case-content h3 {
color: white;
}
.case-details {
display: grid;
gap: 20px;
margin: 0 0 30px;
}
.case-details div {
display: grid;
gap: 6px;
}
.case-details dt {
color: var(--champagne-soft);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.case-details dd {
margin: 0;
color: rgba(255, 255, 255, 0.58);
font-size: 0.73rem;
line-height: 1.55;
}
.case-action {
color: white;
}
.case-action i {
border-color: rgba(255, 255, 255, 0.25);
}
.ai-section {
padding-block: clamp(96px, 10vw, 156px);
background:
radial-gradient(
circle at 10% 10%,
rgba(23, 58, 61, 0.1),
transparent 28%
),
var(--pearl);
}
.ai-layout {
display: grid;
grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
align-items: start;
gap: clamp(50px, 8vw, 120px);
}
.ai-introduction {
position: sticky;
top: 125px;
}
.ai-introduction .eyebrow {
margin: 18px 0;
}
.ai-introduction h2 {
margin-bottom: 25px;
}
.ai-introduction > p:not(.eyebrow) {
color: var(--slate);
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 0.95rem;
line-height: 1.62;
}
.ai-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ai-card {
min-height: 290px;
padding: 22px;
border: 1px solid var(--line);
border-radius: 17px;
background: rgba(255, 255, 255, 0.7);
}
.ai-card:nth-child(1),
.ai-card:nth-child(4) {
transform: translateY(36px);
}
.ai-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.ai-card-top span {
color: var(--champagne);
font-size: 0.59rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ai-card-top i {
color: var(--muted);
font-style: normal;
}
.ai-visual {
height: 108px;
display: flex;
align-items: flex-end;
gap: 8px;
margin-bottom: 22px;
padding: 16px;
border-radius: 10px;
background: #edf0f1;
overflow: hidden;
}
.ai-visual span {
flex: 1;
height: 32%;
border-radius: 4px 4px 0 0;
background: #a4b9ed;
}
.ai-visual span:nth-child(2) {
height: 63%;
}
.ai-visual span:nth-child(3) {
height: 46%;
}
.ai-visual span:nth-child(4) {
height: 82%;
}
.ai-card-conversation .ai-visual,
.ai-card-document .ai-visual {
align-items: center;
flex-direction: column;
justify-content: center;
}
.ai-card-conversation .ai-visual span,
.ai-card-document .ai-visual span {
width: 82%;
height: 7px;
flex: none;
border-radius: 999px;
}
.ai-card-conversation .ai-visual span:nth-child(even) {
width: 58%;
align-self: flex-end;
}
.ai-card h3 {
margin-bottom: 9px;
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 1.32rem;
font-weight: 500;
letter-spacing: -0.025em;
}
.ai-card > p {
margin-bottom: 0;
color: var(--slate);
font-size: 0.7rem;
line-height: 1.55;
}
.partner-section {
border-top: 1px solid var(--line);
}
.partner-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.partner-point {
min-height: 166px;
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
padding: 25px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.25);
}
.partner-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid #d7b98d;
border-radius: 50%;
color: var(--champagne);
font-size: 0.56rem;
font-weight: 800;
}
.partner-point h3 {
margin-bottom: 8px;
font-size: 0.77rem;
}
.partner-point p {
margin-bottom: 0;
color: var(--slate);
font-size: 0.68rem;
line-height: 1.55;
}
.process-section {
border-top: 1px solid var(--line);
background: var(--pearl);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
list-style: none;
}
.process-step {
position: relative;
min-height: 290px;
display: flex;
flex-direction: column;
padding: 28px;
border-right: 1px solid var(--line);
}
.process-step:last-child {
border-right: 0;
}
.process-number {
margin-bottom: 37px;
color: var(--champagne);
font-size: 0.65rem;
font-weight: 800;
}
.process-step h3 {
margin-bottom: 14px;
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 1.55rem;
font-weight: 500;
letter-spacing: -0.025em;
}
.process-step > p {
margin-bottom: 27px;
color: var(--slate);
font-size: 0.72rem;
line-height: 1.55;
}
.process-deliverable {
display: grid;
gap: 5px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.process-deliverable span {
color: var(--champagne);
font-size: 0.56rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.process-deliverable strong {
font-size: 0.72rem;
}
.project-section {
padding-block: clamp(98px, 11vw, 170px);
background:
radial-gradient(
circle at 12% 8%,
rgba(23, 58, 61, 0.17),
transparent 30%
),
var(--night);
color: white;
}
.project-layout {
display: grid;
grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
align-items: start;
gap: clamp(58px, 9vw, 140px);
}
.project-introduction {
position: sticky;
top: 125px;
}
.project-introduction .eyebrow {
margin: 20px 0;
color: var(--champagne-soft);
}
.project-introduction h2 {
margin-bottom: 26px;
color: white;
}
.project-introduction > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.58);
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 0.95rem;
line-height: 1.65;
}
.project-assurance {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 14px;
margin-top: 35px;
padding-top: 23px;
border-top: 1px solid var(--night-line);
}
.project-assurance span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid rgba(213, 184, 140, 0.46);
border-radius: 50%;
color: var(--champagne-soft);
font-size: 0.58rem;
font-weight: 800;
}
.project-assurance p {
margin: 0;
color: rgba(255, 255, 255, 0.5);
font-size: 0.67rem;
}
.project-form {
padding: clamp(24px, 3vw, 40px);
border: 1px solid var(--night-line);
border-radius: 22px;
background: rgba(255, 255, 255, 0.075);
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(18px);
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 21px 16px;
}
.form-field {
min-width: 0;
display: grid;
gap: 8px;
}
.form-field-wide {
grid-column: 1 / -1;
}
.form-field label {
color: rgba(255, 255, 255, 0.76);
font-size: 0.64rem;
font-weight: 800;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.17);
border-radius: 8px;
background: rgba(255, 255, 255, 0.075);
color: white;
font-size: 0.76rem;
transition:
border-color 150ms ease,
background-color 150ms ease,
box-shadow 150ms ease;
}
.form-field input,
.form-field select {
min-height: 51px;
padding: 10px 13px;
}
.form-field textarea {
min-height: 166px;
padding: 13px;
line-height: 1.55;
resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: rgba(255, 255, 255, 0.34);
}
.form-field select option {
color: var(--ink);
}
.consent-field {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 10px;
margin-top: 21px;
color: rgba(255, 255, 255, 0.48);
cursor: pointer;
font-size: 0.65rem;
line-height: 1.5;
}
.consent-field input {
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: var(--cobalt);
}
.form-submit {
min-height: 54px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
padding: 12px 18px;
border: 0;
border-radius: 8px;
background: var(--cobalt);
color: white;
cursor: pointer;
font-size: 0.74rem;
font-weight: 800;
box-shadow: 0 14px 34px rgba(23, 58, 61, 0.22);
transition:
background-color 160ms ease,
transform 160ms ease;
}
.form-submit i {
font-style: normal;
}
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.site-footer {
border-top: 1px solid var(--night-line);
background: var(--night);
color: white;
}
.footer-layout {
min-height: 124px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.footer-layout > div {
display: grid;
gap: 7px;
}
.footer-layout strong {
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-layout span,
.footer-layout p {
margin: 0;
color: rgba(255, 255, 255, 0.42);
font-size: 0.64rem;
}
.error-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 30px;
text-align: center;
}
.error-page h1 {
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: clamp(3rem, 7vw, 6rem);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 4px;
}
@media (max-width: 1180px) {
.navigation {
grid-template-columns: 1fr auto;
}
.main-navigation {
display: none;
}
.hero-layout {
grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
gap: 35px;
}
.hero-title {
font-size: clamp(2.8rem, 4.7vw, 4rem);
}
html[lang="fr"] .hero-title,
html[lang="es"] .hero-title {
font-size: clamp(2.55rem, 4.2vw, 3.55rem);
}
.editorial-heading {
grid-template-columns: 150px minmax(0, 1fr);
}
.editorial-heading > p {
grid-column: 2;
}
.service-card:nth-child(n) {
grid-column: span 6;
}
.partner-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.site-header {
position: relative;
}
.container {
width: min(calc(100% - 36px), var(--container));
}
.hero {
padding-block: 48px 72px;
}
.hero-layout,
.ai-layout,
.project-layout {
grid-template-columns: 1fr;
}
.hero-copy {
max-width: 760px;
}
.hero-title {
font-size: clamp(3rem, 9vw, 5rem);
}
html[lang="fr"] .hero-title,
html[lang="es"] .hero-title {
font-size: clamp(2.7rem, 8.2vw, 4.6rem);
}
.hero-product {
margin-top: 10px;
}
.trust-row {
max-width: 620px;
}
.benefit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.benefit-card:nth-child(2) {
border-right: 0;
}
.benefit-card:nth-child(-n + 2) {
border-bottom: 1px solid var(--night-line);
}
.editorial-heading {
grid-template-columns: 1fr;
gap: 24px;
}
.editorial-heading > p {
grid-column: auto;
max-width: 650px;
}
.service-card:nth-child(n) {
grid-column: 1 / -1;
}
.case-card:first-child {
display: block;
}
.case-card:first-child .case-visual {
min-height: 0;
height: 430px;
}
.ai-introduction,
.project-introduction {
position: static;
}
.ai-grid {
margin-top: 20px;
}
.process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.process-step:nth-child(2) {
border-right: 0;
}
.process-step:nth-child(-n + 2) {
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 620px) {
.navigation {
min-height: 70px;
gap: 12px;
}
.brand-subtitle,
.header-project-button {
display: none;
}
.brand-name {
font-size: 0.8rem;
}
.header-actions {
gap: 0;
}
.hero-title {
font-size: clamp(2.55rem, 12vw, 4rem);
}
html[lang="fr"] .hero-title,
html[lang="es"] .hero-title {
font-size: clamp(2.25rem, 10.5vw, 3.65rem);
}
.hero-title-line:nth-child(3) {
font-size: 1em;
}
.hero-actions {
align-items: stretch;
flex-direction: column;
}
.button {
width: 100%;
}
.trust-row {
grid-template-columns: 1fr;
}
.hero-product {
padding: 12px 0 14px 12px;
}
.product-stage-header,
.product-stage-footer {
align-items: flex-start;
flex-direction: column;
}
.product-stage-header > div {
display: none;
}
.product-stage-number {
right: -8px;
width: 38px;
height: 38px;
}
.benefit-grid,
.case-grid,
.ai-grid,
.partner-grid,
.process-grid,
.form-grid {
grid-template-columns: 1fr;
}
.benefit-card {
border-right: 0;
border-bottom: 1px solid var(--night-line);
}
.benefit-card:last-child {
border-bottom: 0;
}
.service-features {
grid-template-columns: 1fr;
}
.case-card:first-child {
grid-column: auto;
}
.case-visual,
.case-card:first-child .case-visual {
height: 280px;
}
.ai-card:nth-child(n) {
transform: none;
}
.process-step {
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.process-step:last-child {
border-bottom: 0;
}
.form-field-wide {
grid-column: auto;
}
.footer-layout {
min-height: 138px;
align-items: flex-start;
flex-direction: column;
justify-content: center;
gap: 14px;
}
}
@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;
}
}
.service-card .service-visual,
.service-card:nth-child(2) .service-visual,
.service-card:nth-child(3) .service-visual {
position: relative;
width: 100%;
height: auto;
min-height: 0;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #e8e9e5;
}
.service-card .service-image {
position: relative;
inset: auto;
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center center;
transform: none;
}
.case-visual,
.case-card:first-child .case-visual {
position: relative;
width: 100%;
height: auto;
min-height: 0;
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #0b1b28;
}
.case-image,
.case-card:first-child .case-image {
position: relative;
inset: auto;
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center center;
transform: none;
}
.service-visual::after,
.case-visual::after {
position: absolute;
inset: 0;
border: 1px solid rgba(17, 23, 34, 0.07);
content: "";
pointer-events: none;
}
.case-visual::after {
border-color: rgba(255, 255, 255, 0.08);
}
.service-card:hover .service-image,
.case-card:hover .case-image {
transform: none;
}
.service-card,
.case-card {
transition:
transform 220ms ease,
box-shadow 220ms ease,
border-color 220ms ease;
}
.service-card:hover {
border-color: #cdd0ca;
box-shadow: 0 20px 54px rgba(17, 23, 34, 0.075);
transform: translateY(-3px);
}
.case-card:hover {
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
transform: translateY(-3px);
}
.case-card:first-child {
align-items: stretch;
}
.case-card:first-child .case-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.case-card:first-child .case-action {
align-self: flex-start;
}
@media (max-width: 900px) {
.service-card .service-visual,
.service-card:nth-child(2) .service-visual,
.service-card:nth-child(3) .service-visual,
.case-visual,
.case-card:first-child .case-visual {
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 4 / 3;
}
.case-card:first-child .case-content {
display: block;
}
}
.brand {
min-width: 150px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
line-height: 0;
}
.brand-logo {
width: clamp(138px, 9vw, 150px);
height: auto;
max-height: 72px;
display: block;
object-fit: contain;
object-position: left center;
}
@media (max-width: 620px) {
.brand {
min-width: 114px;
}
.brand-logo {
width: 114px;
max-height: 58px;
}
}
.product-stage-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 25px;
background: #0b1823;
box-shadow: var(--shadow-product);
}
.hero-product-video,
.hero-product-poster {
width: 100%;
height: 100%;
display: block;
border: 0;
border-radius: inherit;
background: #0b1823;
object-fit: cover;
object-position: center center;
}
.hero-product-poster {
display: none;
}
@media (max-width: 900px) {
.product-stage-media {
border-radius: 20px;
}
}
@media (max-width: 620px) {
.product-stage-media {
border-radius: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-product-video {
display: none;
}
.hero-product-poster {
display: block;
}
}
.hero-layout {
grid-template-areas:
"hero-copy hero-product"
"hero-supporting hero-product";
grid-template-rows: auto auto;
row-gap: 0;
align-items: start;
}
.hero-copy {
grid-area: hero-copy;
}
.hero-product {
grid-area: hero-product;
align-self: center;
}
.hero-supporting {
grid-area: hero-supporting;
min-width: 0;
}
@media (max-width: 900px) {
.hero-layout {
grid-template-areas:
"hero-copy"
"hero-product"
"hero-supporting";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
row-gap: 0;
align-items: start;
}
.hero-copy {
width: 100%;
max-width: none;
}
.hero-copy h1 {
margin-bottom: clamp(22px, 5vw, 30px);
}
.hero-product {
width: 100%;
align-self: start;
margin: 0 0 clamp(25px, 6vw, 34px);
}
.hero-supporting {
width: 100%;
}
.hero-introduction {
width: 100%;
max-width: none;
margin-bottom: 0;
}
.hero-actions {
margin-top: 28px;
}
.product-stage-footer > span:first-child {
display: none;
}
.product-stage-footer {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
padding-top: 12px;
}
.trust-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
margin-top: 22px;
padding-top: 17px;
}
.trust-row span:last-child {
display: none;
}
}
@media (max-width: 620px) {
.brand {
min-width: 114px;
}
.brand-logo {
width: 114px;
max-height: 58px;
}
.hero {
padding-top: 38px;
}
.hero-product {
margin-bottom: 26px;
}
.product-stage-footer {
align-items: center;
justify-content: flex-end;
flex-direction: row;
}
.product-stage-footer strong {
font-size: 0.54rem;
letter-spacing: 0.1em;
}
.trust-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.benefits-section {
position: relative;
padding-block: clamp(10px, 1.2vw, 16px);
overflow: hidden;
background:
radial-gradient(
circle at 4% 0%,
rgba(183, 135, 76, 0.08),
transparent 28%
),
linear-gradient(
140deg,
#061521 0%,
#081b29 55%,
#061622 100%
);
color: #f7f3eb;
}
.benefits-section::before {
position: absolute;
inset: 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
content: "";
pointer-events: none;
}
.benefits-section .container {
position: relative;
z-index: 1;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
overflow: hidden;
border: 1px solid rgba(213, 184, 140, 0.18);
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.02),
0 10px 24px rgba(0, 0, 0, 0.06);
}
.benefit-card {
min-width: 0;
min-height: 78px;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px 18px 13px;
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
transition: background-color 180ms ease;
}
.benefit-card:last-child {
border-right: 0;
}
.benefit-card:hover {
background: rgba(255, 255, 255, 0.02);
box-shadow: none;
transform: none;
}
.benefit-icon {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid rgba(213, 184, 140, 0.56);
border-radius: 50%;
background: transparent;
color: #d9bb8b;
font-family:
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.benefit-card > div {
min-width: 0;
padding-top: 0;
}
.benefit-card h3 {
margin: 0 0 4px;
color: #faf6ef;
font-family:
"Iowan Old Style",
Baskerville,
"Palatino Linotype",
Georgia,
serif;
font-size: clamp(1.02rem, 1.15vw, 1.22rem);
font-weight: 500;
letter-spacing: -0.035em;
line-height: 1.02;
}
.benefit-card p {
max-width: 22ch;
margin: 0;
color: rgba(239, 236, 228, 0.54);
font-size: 0.58rem;
line-height: 1.36;
}
.solutions-section {
padding-top: clamp(54px, 5.2vw, 74px);
}
@media (max-width: 1080px) {
.benefit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.benefit-card {
min-height: 96px;
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
padding: 16px 16px 15px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.benefit-card:nth-child(2n) {
border-right: 0;
}
.benefit-card:nth-last-child(-n + 2) {
border-bottom: 0;
}
.benefit-icon {
width: 30px;
height: 30px;
font-size: 0.6rem;
}
.benefit-card h3 {
font-size: clamp(1.04rem, 2vw, 1.18rem);
}
.benefit-card p {
font-size: 0.62rem;
line-height: 1.4;
}
}
@media (max-width: 620px) {
.hero {
padding-bottom: 18px;
}
.trust-row {
margin-top: 14px;
padding-top: 12px;
}
.benefits-section {
padding-block: 10px;
}
.benefit-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
border-radius: 14px;
}
.benefit-card {
min-height: 108px;
grid-template-columns: 26px minmax(0, 1fr);
gap: 9px;
padding: 13px 11px 12px;
}
.benefit-icon {
width: 26px;
height: 26px;
font-size: 0.54rem;
}
.benefit-card h3 {
margin-bottom: 4px;
font-size: clamp(0.95rem, 4vw, 1.08rem);
line-height: 1.03;
}
.benefit-card p {
max-width: none;
font-size: clamp(0.58rem, 2.3vw, 0.64rem);
line-height: 1.38;
}
.solutions-section {
padding-top: 44px;
}
.solutions-section .editorial-heading {
gap: 16px;
margin-bottom: 28px;
}
.solutions-section .editorial-heading h2 {
font-size: clamp(2.1rem, 9vw, 3rem);
line-height: 0.97;
}
.solutions-section .editorial-heading > p {
font-size: 0.78rem;
line-height: 1.5;
}
}
@media (max-width: 390px) {
.benefit-card {
min-height: 102px;
grid-template-columns: 24px minmax(0, 1fr);
gap: 8px;
padding: 12px 10px 11px;
}
.benefit-icon {
width: 24px;
height: 24px;
font-size: 0.5rem;
}
.benefit-card h3 {
font-size: 0.92rem;
}
.benefit-card p {
font-size: 0.56rem;
line-height: 1.34;
}
}
.product-stage-media {
position: relative;
isolation: isolate;
box-sizing: border-box;
}
.product-stage-media::after {
position: absolute;
z-index: 5;
inset: 0;
box-sizing: border-box;
border: 1px solid rgba(183, 135, 76, 0.38);
border-radius: inherit;
content: "";
pointer-events: none;
}
.hero-product-video,
.hero-product-poster {
position: relative;
z-index: 1;
}
.product-stage-number {
z-index: 6;
}
@media (min-width: 1181px) {
.hero-layout {
grid-template-columns:
minmax(0, 41fr)
minmax(0, 59fr);
column-gap: clamp(32px, 3.25vw, 54px);
}
.hero-product {
width: 100%;
max-width: none;
}
.product-stage-media {
width: 100%;
}
}
@media (min-width: 901px) and (max-width: 1180px) {
.hero-layout {
grid-template-columns:
minmax(0, 43fr)
minmax(0, 57fr);
column-gap: clamp(24px, 2.8vw, 34px);
}
.hero-product {
width: 100%;
max-width: none;
}
}
@media (max-width: 900px) {
.hero-product {
width: calc(100% + 14px);
max-width: none;
margin-right: -7px;
margin-left: -7px;
}
.product-stage-media::after {
border-color: rgba(213, 184, 140, 0.54);
}
}
@media (max-width: 620px) {
.hero-product {
width: calc(100% + 12px);
margin-right: -6px;
margin-left: -6px;
}
.product-stage-media {
box-shadow:
0 16px 32px rgba(7, 21, 33, 0.15);
}
.product-stage-media::after {
border-width: 1px;
border-color: rgba(213, 184, 140, 0.62);
}
}
.hero-product,
.product-stage,
.product-stage-shell {
overflow: visible;
}
.product-stage-media {
overflow: hidden;
}
.product-stage-number {
position: absolute;
right: 16px;
bottom: 16px;
left: auto;
top: auto;
transform: none;
z-index: 8;
}
@media (max-width: 900px) {
.product-stage-number {
right: 12px;
bottom: 12px;
}
}
/* GEIST HERO TYPOGRAPHY START */
@font-face {
font-family: "Geist Sans Local";
src: url("/assets/fonts/geist/geist-sans-variable.woff2")
format("woff2");
font-display: swap;
font-style: normal;
font-weight: 100 900;
}
@font-face {
font-family: "Instrument Serif Local";
src: url("/assets/fonts/instrument/instrument-serif-italic.woff2")
format("woff2");
font-display: swap;
font-style: italic;
font-weight: 400;
}
.hero-title {
font-kerning: normal;
font-synthesis: none;
text-rendering: geometricPrecision;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(1),
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(2) {
font-family:
"Geist Sans Local",
"Helvetica Neue",
Arial,
sans-serif;
font-size: 62px;
font-style: normal;
font-weight: 520;
font-variation-settings: "wght" 520;
letter-spacing: -2.4px;
line-height: 0.93;
white-space: nowrap;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(2) {
margin-top: 5px;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(3) {
margin-top: 7px;
font-family:
"Instrument Serif Local",
"Iowan Old Style",
Baskerville,
Georgia,
serif;
font-size: 58px;
font-style: italic;
font-weight: 400;
letter-spacing: -1.8px;
line-height: 0.94;
white-space: nowrap;
}
.hero-introduction,
.hero-copy > p {
font-size: 20px;
line-height: 1.58;
}
.benefit-card h3 {
font-size: 18px;
}
.benefit-card p {
font-size: 11px;
line-height: 1.45;
}
@media (min-width: 1081px) and (max-width: 1279px) {
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(1),
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(2) {
font-size: 54px;
letter-spacing: -2px;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(3) {
font-size: 51px;
letter-spacing: -1.5px;
}
.hero-introduction,
.hero-copy > p {
font-size: 18px;
}
}
@media (min-width: 901px) and (max-width: 1080px) {
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(1),
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(2) {
font-size: 46px;
letter-spacing: -1.7px;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(3) {
font-size: 44px;
letter-spacing: -1.3px;
}
.hero-introduction,
.hero-copy > p {
font-size: 17px;
}
}
@media (max-width: 900px) {
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(1),
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(2) {
font-size: 47px;
letter-spacing: -1.8px;
line-height: 0.94;
white-space: normal;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(3) {
margin-top: 6px;
font-size: 44px;
letter-spacing: -1.3px;
line-height: 0.95;
white-space: normal;
}
.hero-introduction,
.hero-copy > p {
font-size: 17px;
line-height: 1.55;
}
.benefit-card h3 {
font-size: 16px;
}
.benefit-card p {
font-size: 11px;
line-height: 1.42;
}
}
@media (max-width: 390px) {
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(1),
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(2) {
font-size: 44px;
letter-spacing: -1.6px;
}
:is(html[lang="en"], html[lang="fr"], html[lang="es"])
.hero-title-line:nth-child(3) {
font-size: 42px;
letter-spacing: -1.2px;
}
.hero-introduction,
.hero-copy > p {
font-size: 16px;
}
}
/* GEIST HERO TYPOGRAPHY END */
/* FINAL HERO PX OVERRIDE START */
.hero-title .hero-title-line:nth-child(1),
.hero-title .hero-title-line:nth-child(2) {
font-size: 60px !important;
font-weight: 520 !important;
letter-spacing: -2.3px !important;
line-height: .93 !important;
}
.hero-title .hero-title-line:nth-child(2) {
margin-top: 5px !important;
}
.hero-title .hero-title-line:nth-child(3) {
margin-top: 7px !important;
font-size: 56px !important;
letter-spacing: -1.7px !important;
line-height: .94 !important;
}
.hero-introduction,
.hero-copy > p {
font-size: 19px !important;
line-height: 1.58 !important;
}
.benefit-card h3 {
font-size: 18px !important;
}
.benefit-card p {
font-size: 11.5px !important;
line-height: 1.44 !important;
}
@media (min-width: 901px) and (max-width: 1279px) {
.hero-title .hero-title-line:nth-child(1),
.hero-title .hero-title-line:nth-child(2) {
font-size: 54px !important;
letter-spacing: -2px !important;
}
.hero-title .hero-title-line:nth-child(3) {
font-size: 51px !important;
letter-spacing: -1.5px !important;
}
.hero-introduction,
.hero-copy > p {
font-size: 18px !important;
}
}
@media (max-width: 900px) {
.hero-title .hero-title-line:nth-child(1),
.hero-title .hero-title-line:nth-child(2) {
font-size: 48px !important;
letter-spacing: -1.8px !important;
line-height: .94 !important;
}
.hero-title .hero-title-line:nth-child(3) {
margin-top: 6px !important;
font-size: 45px !important;
letter-spacing: -1.3px !important;
line-height: .95 !important;
}
.hero-introduction,
.hero-copy > p {
font-size: 17px !important;
line-height: 1.55 !important;
}
.benefit-card h3 {
font-size: 16px !important;
}
.benefit-card p {
font-size: 11px !important;
}
}
@media (max-width: 390px) {
.hero-title .hero-title-line:nth-child(1),
.hero-title .hero-title-line:nth-child(2) {
font-size: 43px !important;
letter-spacing: -1.6px !important;
}
.hero-title .hero-title-line:nth-child(3) {
font-size: 41px !important;
letter-spacing: -1.15px !important;
}
.hero-introduction,
.hero-copy > p {
font-size: 16px !important;
}
}
/* FINAL HERO PX OVERRIDE END */
/* FUTURE LUXURY ACTION SYSTEM START */
.header-project-button,
.button-primary,
.form-submit,
.mobile-navigation-project{
position:relative;
overflow:hidden;
border:1px solid rgba(195,163,111,.42);
background:
radial-gradient(
110% 150% at 100% 0,
rgba(120,156,151,.18),
transparent 48%
),
linear-gradient(
180deg,
#1b4142 0%,
var(--action-obsidian) 100%
);
color:var(--action-ivory);
box-shadow:
0 12px 30px var(--action-shadow),
inset 0 1px 0 rgba(255,255,255,.09),
inset 0 -1px 0 rgba(4,18,19,.2);
transition:
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease;
}
.header-project-button:hover,
.button-primary:hover,
.form-submit:hover,
.mobile-navigation-project:hover{
border-color:rgba(211,184,139,.62);
background:
radial-gradient(
110% 150% at 100% 0,
rgba(120,156,151,.24),
transparent 52%
),
linear-gradient(
180deg,
#235052 0%,
var(--action-obsidian-hover) 100%
);
box-shadow:
0 15px 34px rgba(10,30,31,.22),
inset 0 1px 0 rgba(255,255,255,.11);
transform:translateY(-1px);
}
.header-project-button:active,
.button-primary:active,
.form-submit:active,
.mobile-navigation-project:active{
background:var(--action-obsidian-pressed);
box-shadow:
0 6px 16px rgba(10,30,31,.16),
inset 0 2px 5px rgba(0,0,0,.16);
transform:translateY(0);
}
.header-project-button:focus-visible,
.button:focus-visible,
.form-submit:focus-visible,
.mobile-navigation a:focus-visible,
.mobile-navigation-toggle:focus-visible{
outline:2px solid rgba(120,156,151,.58);
outline-offset:3px;
}
.header-project-button i,
.button-primary i,
.form-submit i,
.mobile-navigation-project i{
color:#dbc194;
}
.header-project-button{
border-radius:11px;
}
.button-primary{
min-width:225px;
border-radius:13px;
}
.form-submit{
border-radius:12px;
}
.button-secondary{
border:1px solid rgba(23,58,61,.2);
border-radius:13px;
background:
radial-gradient(
100% 120% at 100% 0,
rgba(195,163,111,.1),
transparent 52%
),
linear-gradient(
180deg,
rgba(255,255,255,.78),
rgba(243,240,232,.94)
);
color:var(--action-obsidian);
box-shadow:
0 8px 24px rgba(17,39,42,.07),
inset 0 1px 0 rgba(255,255,255,.9);
}
.button-secondary:hover{
border-color:rgba(195,163,111,.48);
background:var(--action-pearl);
color:var(--action-obsidian-pressed);
box-shadow:
0 11px 28px rgba(17,39,42,.1),
inset 0 1px 0 rgba(255,255,255,.96);
transform:translateY(-1px);
}
.service-action i,
.case-action i{
border-color:rgba(23,58,61,.24);
color:var(--action-obsidian);
}
.case-action i{
border-color:rgba(219,193,148,.42);
color:#dbc194;
}
.service-action:hover i,
.case-action:hover i{
border-color:rgba(195,163,111,.58);
background:var(--action-obsidian);
color:var(--action-ivory);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
border-color:rgba(120,156,151,.82);
box-shadow:0 0 0 3px rgba(120,156,151,.16);
}
.consent-field input{
accent-color:var(--action-obsidian-hover);
}
.mobile-navigation{
display:none;
}
@media(max-width:1180px){
.header-actions{
position:relative;
align-items:center;
gap:10px;
}
.mobile-navigation{
position:relative;
z-index:500;
display:block;
flex:0 0 auto;
}
.mobile-navigation-toggle{
width:40px;
height:40px;
display:grid;
place-items:center;
margin:0;
padding:0;
overflow:hidden;
list-style:none;
border:1px solid rgba(195,163,111,.34);
border-radius:13px;
background:rgba(249,247,241,.86);
color:var(--action-obsidian);
box-shadow:
0 7px 20px rgba(17,39,42,.08),
inset 0 1px 0 rgba(255,255,255,.92);
cursor:pointer;
backdrop-filter:
blur(16px)
saturate(108%);
-webkit-backdrop-filter:
blur(16px)
saturate(108%);
}
.mobile-navigation-toggle::-webkit-details-marker{
display:none;
}
.mobile-navigation-toggle::marker{
content:"";
}
.mobile-navigation-icon{
width:18px;
height:12px;
display:flex;
align-items:flex-end;
justify-content:center;
flex-direction:column;
gap:3.5px;
}
.mobile-navigation-icon>span{
width:18px;
height:1px;
flex:0 0 1px;
background:currentColor;
transition:
transform 180ms ease,
opacity 140ms ease,
width 160ms ease;
}
.mobile-navigation-icon>span:nth-child(2){
width:12px;
}
.mobile-navigation-icon>span:nth-child(3){
width:15px;
}
.mobile-navigation[open]
.mobile-navigation-toggle{
border-color:rgba(211,184,139,.56);
background:var(--action-obsidian);
color:var(--action-ivory);
}
.mobile-navigation[open]
.mobile-navigation-icon>span:nth-child(1){
width:18px;
transform:translateY(4.5px) rotate(45deg);
}
.mobile-navigation[open]
.mobile-navigation-icon>span:nth-child(2){
opacity:0;
}
.mobile-navigation[open]
.mobile-navigation-icon>span:nth-child(3){
width:18px;
transform:translateY(-4.5px) rotate(-45deg);
}
.mobile-navigation-panel{
position:absolute;
z-index:510;
top:calc(100% + 11px);
right:0;
width:min(326px,calc(100vw - 28px));
display:grid;
padding:9px;
overflow:hidden;
border:1px solid rgba(195,163,111,.3);
border-radius:19px;
background:
radial-gradient(
120% 140% at 100% 0,
rgba(120,156,151,.1),
transparent 46%
),
rgba(249,247,241,.985);
box-shadow:
0 24px 60px rgba(7,27,42,.18),
inset 0 1px 0 rgba(255,255,255,.98);
backdrop-filter:
blur(28px)
saturate(110%);
-webkit-backdrop-filter:
blur(28px)
saturate(110%);
}
.mobile-navigation:not([open])
.mobile-navigation-panel{
display:none;
}
.mobile-navigation-link,
.mobile-navigation-project{
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:11px 14px;
border-radius:11px;
font-size:14px;
font-weight:520;
text-decoration:none;
}
.mobile-navigation-link{
color:var(--action-obsidian);
}
.mobile-navigation-link+
.mobile-navigation-link{
border-top:1px solid rgba(23,58,61,.08);
border-radius:0;
}
.mobile-navigation-link i,
.mobile-navigation-project i{
color:var(--action-champagne);
font-size:12px;
}
.mobile-navigation-link:hover{
background:rgba(23,58,61,.06);
}
.mobile-navigation-project{
margin-top:8px;
border-radius:12px;
}
}
@media(max-width:620px){
.header-actions{
gap:8px;
}
.mobile-navigation-panel{
width:calc(100vw - 28px);
}
.language-navigation a{
padding-inline:5px;
}
}
@media(prefers-reduced-motion:reduce){
.header-project-button,
.button,
.form-submit,
.mobile-navigation-icon>span,
.mobile-navigation-panel{
transition:none!important;
}
}
/* FUTURE LUXURY ACTION SYSTEM END */

/* HEADER LOGO AND HERO GUTTER FIX START */

@media (min-width: 901px) {
    .hero-layout {
        width: min(
            calc(100% - 72px),
            1600px
        );
        margin-inline: auto;
    }

    .site-header .brand,
    .header-layout .brand {
        min-width: 150px;
    }

    .site-header .brand-logo,
    .header-layout .brand-logo {
        width: 150px;
        max-height: 72px;
    }
}

@media (max-width: 900px) {
    .site-header .brand,
    .header-layout .brand {
        min-width: 114px;
    }

    .site-header .brand-logo,
    .header-layout .brand-logo {
        width: 114px;
        max-height: 58px;
    }
}

/* HEADER LOGO AND HERO GUTTER FIX END */