:root {
  --paper: #f3f1ec;
  --ink: #3d3a37;
  --ink-soft: #55504b;
  --brick: #a3301c;
  --brick-dark: #7d2414;
  --umber: #3a2f2b;
  --serif: Castoro, serif;
  --sans: 'DM Sans', sans-serif;
  --ease: cubic-bezier(.16,.84,.3,1);
  --gutter: clamp(20px,5vw,80px);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--brick); text-decoration: none; }
a:hover { color: var(--brick-dark); }
::selection { background: var(--brick); color: var(--paper); }

.page { font-family: var(--sans); background: var(--paper); color: var(--ink); overflow-x: clip; }
.wrap { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding-left: var(--gutter); padding-right: var(--gutter); }

.h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px,4.4vw,66px); line-height: 1.04; letter-spacing: -.012em; color: var(--ink); max-width: 12ch; }
.h2.narrow { max-width: 13ch; }
.body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }
.split { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: clamp(28px,5vw,96px); }
.eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #6f6862; margin-bottom: clamp(36px,5vw,72px); }

/* Buttons: on hover only the background grows, the label and icon stay the same size */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 11px; border-radius: 6px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-bg); transition: transform .35s var(--ease); }
.btn:hover::before { transform: scale(1.06,1.12); }
.btn-red { --btn-bg: var(--brick); height: 48px; padding: 0 24px; font-size: 12.5px; }
.btn-red, .btn-red:hover { color: #f6f3ee; }
.btn-light { --btn-bg: #faf6f0; height: 52px; padding: 0 26px; font-size: 13px; }
.btn-light, .btn-light:hover { color: var(--umber); }

/* Hero */
.hero { padding-top: clamp(40px,6vw,88px); padding-bottom: clamp(72px,8vw,128px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,480px),1fr)); align-items: start; gap: clamp(40px,5vw,96px); min-height: min(calc(100vh - 72px),880px); }
/* sits above the painting's glow, which reaches up over the button when the hero stacks on phones */
.hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px,2.6vw,36px); max-width: 640px; }
.hero-logo { display: block; height: clamp(40px,3.8vw,56px); width: auto; margin-bottom: clamp(40px,6vh,84px); flex: none; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px,6vw,90px); line-height: 1.02; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
.accent { color: var(--brick); }
.hero-sub { margin: 0; font-size: clamp(17px,1.35vw,20px); line-height: 1.55; color: var(--ink-soft); max-width: 34ch; text-wrap: pretty; }
.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-glow { position: absolute; inset: -6% -12% 8% -12%; background: radial-gradient(ellipse at 50% 42%,rgba(255,252,244,.95),rgba(243,241,236,0) 68%); pointer-events: none; }
.hero-art-frame { position: relative; height: clamp(420px,72vh,640px); display: flex; justify-content: center; }
/* no will-change here: Safari paints the drop-shadowed painting as a blank box inside a promoted layer until the next scroll */
.hero-art-layer { height: 100%; display: flex; justify-content: center; }
.hero-art img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; filter: drop-shadow(0 22px 22px rgba(58,47,43,.2)); }
/* desktop: the painting reaches past the top and bottom of the hero content, into the padding */
@media (min-width: 1100px) {
  /* capped so it doesn't tower over the text on tall, large screens */
  .hero-art-frame { height: min(calc(clamp(420px,72vh,640px) + 2 * clamp(32px,4vw,64px)), 720px); margin: calc(-1 * clamp(32px,4vw,64px)) 0; }
}

/* Business model */
/* divider runs the full width of the screen, like the one above the role cards */
.model-section { border-top: 1px solid rgba(61,58,55,.14); }
.model { padding-top: clamp(72px,10vw,150px); padding-bottom: clamp(72px,10vw,150px); }
.model-copy { display: flex; flex-direction: column; gap: 22px; max-width: 520px; padding-top: 8px; }
.model-lead { margin: 0; font-size: clamp(18px,1.45vw,21px); line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }

/* Roles: stacking cards with a synced counter (desktop), simple list (mobile) */
.roles { background: var(--paper); border-top: 1px solid rgba(61,58,55,.12); }
.roles-inner { padding-top: clamp(72px,9vw,140px); padding-bottom: clamp(56px,8vw,120px); }
.roles-desk { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: clamp(32px,5vw,96px); align-items: start; }
.roles-mob { display: none; flex-direction: column; gap: 10px; }
/* on desktop the cards' own bottom padding is enough space before "Everything in one place" */
@media (min-width: 900px) { .roles-inner { padding-bottom: 0; } }
@media (max-width: 899.98px) {
  .roles-desk { display: none; }
  .roles-mob { display: flex; }
}
.counter-col { position: sticky; top: 96px; height: calc(100vh - 150px); min-height: 420px; }
.counter { position: absolute; left: 0; top: 50%; height: clamp(150px,15vw,230px); margin-top: calc(clamp(150px,15vw,230px) / -2); width: 100%; font-family: var(--serif); font-size: clamp(150px,15vw,230px); line-height: 1; color: var(--brick); letter-spacing: -.04em; }
.counter span { position: absolute; left: 0; top: 0; will-change: opacity; }
.cards { display: flex; flex-direction: column; gap: 28px; padding-bottom: 10vh; }
.card { position: sticky; height: clamp(340px,54vh,470px); background: #ece7dd; overflow: hidden; border: 1px solid rgba(61,58,55,.12); box-sizing: border-box; padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; transform-origin: center top; will-change: transform; }
.card img, .mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card-copy { position: relative; align-self: flex-start; max-width: min(100%,560px); box-sizing: border-box; padding: clamp(20px,2vw,28px) clamp(22px,2.2vw,32px); background: rgba(243,241,236,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 14px; }
.card-copy h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px,4vw,62px); line-height: 1; letter-spacing: -.012em; color: #34302d; }
.card-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: #3f3a36; max-width: 46ch; text-wrap: pretty; }
.mcard { position: relative; overflow: hidden; background: #241d1a; padding: 14px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.mcard-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(36,29,26,.5),rgba(36,29,26,0) 70%); }
.mcard-num { position: relative; align-self: flex-start; padding: 8px 12px; background: rgba(243,241,236,.92); font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--brick); }
.mcard-copy { position: relative; box-sizing: border-box; padding: 20px; background: rgba(243,241,236,.93); display: flex; flex-direction: column; gap: 12px; }
.mcard-copy h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 34px; color: #34302d; }
.mcard-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: #3f3a36; max-width: 34em; }

/* Everything in one place */
/* no divider above this section, so it starts close to the role cards */
.one-place { padding-top: clamp(24px,3vw,48px); padding-bottom: clamp(88px,11vw,170px); }
.one-place-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: clamp(52px,6vw,96px); }
.one-place-head .h2 { max-width: none; }
.one-place-sub { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px,1.6vw,23px); color: var(--ink-soft); }
/* 1, 2 or 4 across, never 3 + 1 leaving one pillar on its own */
.pillars { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(36px,3.4vw,56px); }
@media (min-width: 560px) { .pillars { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.pillar { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(61,58,55,.22); }
.pillar::after { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: var(--brick); }
.pillar h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px,2.2vw,32px); color: var(--ink); }
.pillar p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* Your data */
.your-data { background: #ebe5da; }
.your-data-inner { padding-top: clamp(80px,10vw,150px); padding-bottom: clamp(80px,10vw,150px); }
.your-data-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; max-width: 540px; padding-top: 8px; }
.your-data-intro p { margin: 0; font-size: clamp(17px,1.35vw,19px); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.points { display: grid; grid-template-columns: minmax(0,1fr); column-gap: clamp(28px,4vw,72px); padding-top: clamp(40px,5vw,72px); }
@media (min-width: 900px) { .points { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.point { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 8px; padding: 26px 0; border-top: 1px solid rgba(61,58,55,.18); }
.point span { font-family: var(--serif); font-size: 18px; color: var(--brick); }
.point p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; max-width: 34em; }
.point strong { font-weight: 500; color: var(--ink); }

/* Pilot program: full width, straight after "Your data", text on the left and the drapery filling the right */
.pilot { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); background: var(--umber); color: var(--paper); }
.pilot-text { box-sizing: border-box; padding: clamp(48px,6vw,96px) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
/* the banner runs full width, but on screens wider than the 1440px content column its text lines up with everything above (100% here is the half-width column) */
@media (min-width: 1441px) { .pilot-text { padding-left: calc(100% - 720px + var(--gutter)); } }
.pilot h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px,4.4vw,66px); line-height: 1.02; letter-spacing: -.012em; color: var(--paper); max-width: 14ch; }
.pilot-body { margin: 0; font-size: clamp(16px,1.25vw,18px); line-height: 1.6; color: #e9e4dc; max-width: 46ch; text-wrap: pretty; }
.pilot-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(243,241,236,.22); }
.pilot-closing { margin: 0; font-size: clamp(15px,1.15vw,17px); line-height: 1.45; color: #e9e4dc; max-width: 30ch; }
.pilot-art { position: relative; min-height: clamp(320px,44vw,720px); overflow: hidden; }
.pilot-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); will-change: transform; }

/* Footer */
.footer { padding-top: clamp(40px,5vw,64px); padding-bottom: clamp(40px,5vw,64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer a { font-size: 14px; color: var(--ink-soft); }
.footer a:hover { color: var(--brick); }
.footer-tile img { display: block; width: 44px; height: auto; }

/* Phones: tighter, even spacing in the hero */
@media (max-width: 759.98px) {
  .hero { padding-top: 28px; gap: 56px; }
  .hero-logo { margin-bottom: 16px; }
  /* let the frame hug the painting, otherwise it keeps empty space above it */
  .hero-art-frame, .hero-art-layer { height: auto; }
  .hero-art img { width: 100%; height: auto; max-height: 72vh; }
}