:root {
  --paper: #f4f1e8; --ink: #11110f; --text: #353735; --accent: #bf432d; --line: #aaa99f;
  --serif: 'Bodoni Moda', Georgia, serif; --sans: 'Inter', Arial, sans-serif;
  --body-size: clamp(16px, 1.8vw, 26px); --heading-size: clamp(48px, 6.1vw, 88px);
  --space: clamp(24px, 3.5vw, 50px); --section-space: clamp(64px, 7vw, 100px); --radius: 0;
  --ease: cubic-bezier(.3,.7,.2,1); --duration: 320ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: var(--body-size); -webkit-font-smoothing: antialiased; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.055em; }
h2 { font-size: var(--heading-size); line-height: .94; }
h3 { font-size: 42px; line-height: 1.03; }
p { color: var(--text); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
button,a,input { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
a,button { transition: color var(--duration) var(--ease), background var(--duration) var(--ease), opacity var(--duration) var(--ease); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.container { width: 86%; max-width: 1320px; margin-inline: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--radius); padding: 19px 30px; font-size: 24px; line-height: 1.3; cursor: pointer; }
.button:hover { background: #9f3322; }
.button--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.button--outline:hover { background: var(--ink); color: var(--paper); }
.skip-link { position: absolute; z-index: 10; top: -100px; left: 16px; padding: 12px; background: var(--paper); }
.skip-link:focus { top: 10px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* === section: header === */
.header { width: 91%; max-width: 1450px; margin: auto; }
.header .header__inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 24px; }
.header .header__brand { font-size: 39px; font-weight: 600; letter-spacing: -.06em; white-space: nowrap; }
.header .header__brand span { color: var(--accent); }
.header nav { display: flex; align-items: center; gap: clamp(22px,3.4vw,50px); font-size: 16px; }
.header nav>a:not(.button):hover { color: var(--accent); }
.header .button { font-size: 16px; padding: 13px 22px; }
.header .header__toggle { display: none; }
@media(min-width:801px) and (max-width:1100px) { .header .header__brand { font-size:30px; } .header nav { gap:20px; font-size:13px; white-space:nowrap; } .header .button { font-size:13px; padding:12px 16px; } }
@media(max-width: 800px) {
 .header .header__inner { min-height: 78px; flex-wrap: wrap; gap: 0; }
 .header .header__brand { font-size: 30px; }
 .header .header__toggle { display: flex; align-items: center; gap: 16px; background: none; border: 0; padding: 15px 0 15px 20px; font-size: 16px; cursor: pointer; }
 .header .header__toggle span { font-size: 26px; transition: transform var(--duration) var(--ease); }
 .header .header__toggle[aria-expanded="true"] span { transform: rotate(45deg); }
 .header .header__navigation { width: 100%; }
 .header.is-enhanced .header__navigation { height: 0; overflow: hidden; transition: height var(--duration) var(--ease); }
 .header nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 5px 0 22px; }
 .header nav>a { padding: 15px 0; }
 .header nav .button { margin-top: 10px; }
}
/* === section: hero === */
.hero { max-width: 1600px; margin: auto; min-height: 770px; display: grid; grid-template-columns: 52% minmax(0, 1fr); padding: 62px 4.5% 60px 0; align-items: center; gap: 70px; }
.hero .hero__art { position: relative; width: 100%; align-self: stretch; display: flex; align-items: center; }
.hero .hero__art img { display: block; width: 100%; height: 650px; object-fit: cover; mix-blend-mode: darken; filter: brightness(1.035); }
.hero .hero__rule { position: absolute; width: 2px; height: 92%; left: 70%; top: 4%; background: var(--accent); }
.hero .hero__eyebrow { font-size: 21px; margin-bottom: 17px; }
.hero h1 { transform:scaleX(.88); transform-origin:left center; width:113.6%; font-size: clamp(60px,7.8vw,116px); line-height: .89; letter-spacing: -.05em; white-space: nowrap; }
/* Optical correction for Bodoni Moda's loose W/e pair. */
.hero .hero__initial { margin-right: -.07em; }
.hero .hero__description { font-size: clamp(18px,1.72vw,25px); line-height: 1.48; margin: 27px 0 34px; }
@media(min-width:1600px) { .hero { padding-inline: 0 45px; } }
@media(max-width:1100px) and (min-width:701px) { .hero { min-height: 610px; gap: 20px; } .hero .hero__art img { height: 500px; } .hero .hero__desktop-break { display: none; } .hero .hero__eyebrow { font-size: 16px; } }
@media(max-width:700px) {
 .hero { display: flex; flex-direction: column; padding: 48px 0 40px; gap: 32px; min-height: 0; }
 .hero .hero__copy { width: 86%; order: -1; }
 .hero h1 { transform:scaleX(.88); transform-origin:left center; width:113.6%; font-size: clamp(50px,14.7vw,100px); }
 .hero .hero__eyebrow { font-size: 16px; margin-bottom: 20px; }
 .hero .hero__description { font-size: 17px; margin: 24px 0; }
 .hero .hero__desktop-break { display: none; }
 .hero .hero__art { width: 94%; align-self: flex-start; }
 .hero .hero__art img { height: auto; aspect-ratio: 1.15; object-fit: cover; }
 .hero .button { font-size: 18px; padding: 16px 24px; }
}
/* === section: connection === */
.connection { padding-top: 40px; padding-bottom: 84px; text-align: center; }
.connection h2 { transform:scaleX(.96); font-size: clamp(48px,6.65vw,96px); white-space: nowrap; }
.connection .connection__terms { display:flex; justify-content:space-between; margin: 14px 3.5% 12px; }
.connection .connection__intro { font-size: 25px; }
.connection .connection__flow { margin-top: 40px; }
.connection .connection__diagram { display:block; width:100%; height:100px; }
.connection .connection__steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); text-align:left; }
.connection .connection__steps li { padding: 17px 10px 10px 0; }
.connection .connection__steps li+li { border-left:1px solid var(--line); padding-left: clamp(20px,3.4vw,49px); }
.connection .connection__steps h3 { font-size:clamp(32px,3.5vw,42px); }
.connection .connection__steps p { font-size:clamp(16px,1.5vw,22px); margin-top: 8px; }
.connection .connection__caption { display:flex; align-items:center; gap:20px; margin-top:30px; font-size:23px; }
.connection .connection__caption::before,.connection .connection__caption::after { content:''; flex:1; height:20px; border-bottom:1px solid var(--line); transform:translateY(-7px); }
.connection .connection__caption::before { border-left:1px solid var(--line); }
.connection .connection__caption::after { border-right:1px solid var(--line); }
@media(max-width:1100px) { .connection h2 { white-space:normal; } .connection .connection__intro { font-size:20px; } .connection .connection__steps li+li { padding-left:22px; } .connection .connection__steps h3 { font-size:clamp(26px,3.4vw,32px); } .connection .connection__steps p { font-size:15px; } .connection .connection__caption { font-size:18px; } }
@media(max-width:760px) {
 .connection { padding-top:24px; padding-bottom:60px; }
 .connection h2 { transform:scaleX(.96); font-size:50px; }
 .connection .connection__terms { flex-direction:column; margin:24px 0 14px; gap:4px; }
 .connection .connection__intro { font-size:16px; }
 .connection .connection__diagram { display:none; }
 .connection .connection__flow { margin:35px 0 0 25px; }
 .connection .connection__steps { display:block; border-left:1px solid var(--line); }
 .connection .connection__steps li,.connection .connection__steps li+li { position:relative; border:0; padding: 0 0 30px 40px; }
 .connection .connection__steps li::before { content:''; position:absolute; width:10px; height:10px; background:var(--accent); border-radius:50%; left:-5.5px; top:12px; }
 .connection .connection__steps li:first-child::before { background:var(--ink); }
 .connection .connection__steps li:not(:last-child)::after { content:''; position:absolute; width:24px; height:100%; left:-25px; top:16px; border-left:1px solid var(--accent); border-radius:100% 0 0 100%; }
 .connection .connection__steps li:last-child { padding-bottom:0; }
 .connection .connection__steps h3 { font-size:36px; }
 .connection .connection__steps p { font-size:16px; margin-top:4px; }
 .connection .connection__caption { font-size:15px; margin-top:35px; gap:10px; }
 .connection .connection__caption span { max-width:240px; }
}
/* === section: standard === */
.standard { text-align:center; padding-bottom:var(--section-space); }
.standard .standard__intro { margin-top:21px; }
.standard .standard__grid { list-style:none; padding:0; margin:57px 0 35px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); text-align:left; row-gap:30px; }
.standard .standard__grid li { position:relative; padding:0 30px 0 0; }
.standard .standard__grid li:not(:nth-child(3n+1)) { border-left:1px solid var(--line); padding-left:48px; }
.standard .standard__number { color:var(--accent); display:block; font-size:25px; margin-bottom:7px; }
.standard h3 { font-size:46px; }
.standard .standard__grid p { margin-top:9px; font-size:21px; letter-spacing:-.03em; }
.standard .standard__grid li:nth-child(-n+3)::after { content:''; position:absolute; height:1px; background:var(--line); left:0; right:45px; bottom:-16px; }
.standard .standard__grid li:nth-child(2)::after { left:48px; }
.standard .standard__grid li:nth-child(3)::after { left:48px; }
.standard .standard__closing { font-family:var(--serif); color:var(--accent); font-size:66px; line-height:1.1; letter-spacing:-.04em; }
@media(max-width:1100px) { .standard h3 { font-size:35px; } .standard .standard__grid p { font-size:17px; } .standard .standard__grid li:not(:nth-child(3n+1)) { padding-left:24px; } .standard .standard__closing { font-size:52px; } }
.standard .standard__grid h3 .keep { white-space:nowrap; }
@media(min-width:761px) and (max-width:1100px) { .standard .standard__grid h3 { font-size:clamp(26px,3.4vw,35px); } }
@media(max-width:760px) {
 .standard h2 { font-size:48px; }
 .standard .standard__intro { margin-top:20px; font-size:16px; }
 .standard .standard__grid { grid-template-columns:1fr; gap:0; margin:32px 0; }
 .standard .standard__grid li,.standard .standard__grid li:not(:nth-child(3n+1)) { padding:22px 0 22px 46px; border:0; border-bottom:1px solid var(--line); }
 .standard .standard__grid li:nth-child(-n+3)::after { display:none; }
 .standard .standard__number { position:absolute; left:0; top:25px; font-size:18px; }
 .standard h3 { font-size:35px; }
 .standard h3 br { display:none; }
 .standard .standard__grid p { font-size:16px; }
 .standard .standard__closing { font-size:43px; }
}
/* === section: possibilities === */
.possibilities { padding-bottom:var(--section-space); }
.possibilities .possibilities__intro { margin:25px 0 13px; }
.possibilities .possibilities__rows { list-style:none; padding:0; margin:0; }
.possibilities .possibilities__rows li { display:grid; grid-template-columns:44% 9% 47%; align-items:center; border-bottom:1px solid var(--line); padding:16px 0; }
.possibilities h3 { font-size:39px; text-wrap:balance; padding-right:20px; }
/* Bodoni Moda has no W/e kerning pair. */
.possibilities .kern-w { margin-right:-.07em; }
.possibilities .possibilities__rows li > span { color:var(--accent); font-size:40px; line-height:1; }
.possibilities .possibilities__rows p { font-size:24px; letter-spacing:-.03em; }
@media(max-width:1100px) { .possibilities h3 { font-size:31px; } .possibilities .possibilities__rows p { font-size:18px; } }
@media(max-width:760px) {
 .possibilities h2 { font-size:49px; }
 .possibilities .possibilities__intro { margin-top:22px; }
 .possibilities .possibilities__rows li { grid-template-columns:35px 1fr; padding:20px 0; gap:9px 0; }
 .possibilities h3 { grid-column:1/-1; font-size:32px; }
 .possibilities .possibilities__rows p { font-size:16px; }
 .possibilities .possibilities__rows li > span { font-size:28px; }
}
/* === section: how-we-work === */
.how-we-work { padding-bottom:var(--section-space); }
.how-we-work .how-we-work__lead { display:grid; grid-template-columns:21% 79%; align-items:center; margin-bottom:35px; }
.how-we-work .how-we-work__lead p { margin-top:18px; font-size:25px; letter-spacing:-.03em; }
.how-we-work .how-we-work__repeat { height:230px; display:flex; align-items:stretch; gap:30px; }
.how-we-work .how-we-work__repeat i:first-child { width:10px; background:var(--accent); }
.how-we-work .how-we-work__repeat i:nth-child(2) { width:46px; background:var(--accent); }
.how-we-work .how-we-work__repeat span { display:flex; flex-direction:column; gap:24px; justify-content:center; margin-left:-7px; }
.how-we-work .how-we-work__repeat b { width:50px; height:50px; background:var(--accent); border-radius:50%; }
.how-we-work .how-we-work__steps,.how-we-work .how-we-work__examples { list-style:none; padding:38px 0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.how-we-work li { padding-right:20px; }
.how-we-work li+li { border-left:1px solid var(--line); padding-left:38px; }
.how-we-work h3 { font-size:29px; letter-spacing:-.065em; }
.how-we-work li p { font-size:20px; margin-top:8px; letter-spacing:-.03em; }
.how-we-work .how-we-work__examples { padding-bottom:0; }
@media(max-width:1100px) { .how-we-work .how-we-work__repeat { transform:scale(.7); transform-origin:left center; } .how-we-work h3 { font-size:25px; } .how-we-work li p { font-size:16px; } .how-we-work li+li { padding-left:24px; } .how-we-work .how-we-work__lead p { font-size:19px; } }
@media(max-width:760px) {
 .how-we-work .how-we-work__lead { display:block; }
 .how-we-work .how-we-work__repeat { height:110px; transform:scale(.6); transform-origin:left top; margin-bottom:-18px; }
 .how-we-work .how-we-work__repeat b { width:40px; height:40px; }
 .how-we-work h2 { font-size:50px; }
 .how-we-work .how-we-work__lead p { font-size:17px; }
 .how-we-work .how-we-work__steps,.how-we-work .how-we-work__examples { grid-template-columns:1fr; padding:10px 0; }
 .how-we-work li,.how-we-work li+li { padding:18px 0; border:0; }
 .how-we-work h3 { font-size:29px; letter-spacing:-.065em; }
 .how-we-work li p { margin-top:6px; }
}
/* === section: cta === */
.cta { display:grid; grid-template-columns:53% 47%; padding-bottom:74px; }
.cta h2 { font-size:76px; width:117%; transform:scaleX(.85); transform-origin:left top; }
.cta .cta__copy { padding:18px 35px 0 0; }
.cta .cta__copy p { margin-top:28px; }
.cta .cta__form-wrap { padding:50px 0 0 58px; border-left:2px solid var(--accent); min-width:0; }
.cta .cta__fields { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.cta .cta__field { min-width:0; }
.cta .cta__field--wide { grid-column:1/-1; }
.cta label { display:block; font-size:20px; color:var(--text); }
.cta input { display:block; width:100%; border:0; border-bottom:1px solid #666a68; border-radius:0; background:transparent; height:38px; font-size:20px; color:var(--ink); transition:border-color var(--duration) var(--ease); }
.cta input:user-invalid { border-bottom-color:var(--accent); }
.cta .button { width:100%; justify-content:flex-start; margin-top:34px; padding:17px 26px; }
.cta .cta__note { font-size:20px; margin-top:16px; letter-spacing:-.02em; }
.cta form { transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease); }
.cta form.is-leaving { opacity:0; transform:translateY(-10px); }
.cta .cta__thanks h3 { font-size:60px; margin-bottom:24px; }
.cta .cta__thanks p { margin-bottom:12px; }
.cta .cta__thanks.is-entering { animation:cta-enter var(--duration) var(--ease); }
@keyframes cta-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) { .cta h2 { font-size:58px; } .cta .cta__form-wrap { padding-left:30px; padding-top:25px; } .cta label,.cta .cta__note { font-size:16px; } .cta .button { font-size:19px; } }
@media(max-width:760px) {
 .cta { grid-template-columns:1fr; padding-bottom:60px; }
 .cta h2 { font-size:51px; }
 .cta .cta__copy { padding:0 0 32px; }
 .cta .cta__copy p { margin-top:22px; font-size:17px; }
 .cta .cta__form-wrap { border-left:0; border-top:1px solid var(--accent); padding:32px 0 0; }
 .cta .cta__fields { gap:25px 20px; }
 .cta input { height:44px; font-size:18px; }
 .cta .button { margin-top:28px; padding:17px; font-size:18px; }
 .cta .cta__note { font-size:14px; line-height:1.6; }
}
/* === section: footer === */
.footer { border-top:1px solid #7e817c; padding-top:38px; padding-bottom:38px; }
.footer .footer__brand { font-size:64px; letter-spacing:-.06em; font-weight:500; line-height:1; }
.footer .footer__brand span { color:var(--accent); }
.footer .footer__tagline { font-family:var(--serif); font-size:38px; letter-spacing:-.035em; color:var(--ink); }
.footer .footer__bottom { border-top:1px solid var(--line); margin-top:28px; padding-top:18px; display:flex; justify-content:space-between; font-size:18px; }
@media(max-width:760px) { .footer { padding-top:28px; padding-bottom:28px; } .footer .footer__brand { font-size:48px; } .footer .footer__tagline { font-size:29px; margin-top:6px; } .footer .footer__bottom { flex-direction:column; gap:8px; font-size:13px; } }




