/* Caspera Partners — site styles */
:root {
  --navy: #0E2233; --navy-2: #172B39; --teal: #1F6F78; --brass: #C8963E; --brass-2: #E4BB6A;
  --mist: #EEF2F4; --paper: #F7F8F6; --ink: #13202B; --steel: #5B6B78; --line: rgba(14,34,51,.14);
  --sans: "DM Sans", system-ui, sans-serif; --display: "Manrope", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--mist); font: 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.05em; }
h1 em, h2 em { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; color: var(--brass); }
h2 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.04; margin-bottom: 24px; }
h3 { font-family: var(--display); font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 12px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.wrap { width: min(1200px, calc(100% - 9vw)); margin-inline: auto; }
.section { padding: 120px 0; }
.section--dark { background: var(--navy); color: #fff; }
.section--paper { background: var(--paper); }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 700 10.5px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
.section--dark .kicker, .hero .kicker, .pagehead .kicker { color: rgba(255,255,255,.75); }
.lead { max-width: 470px; font-size: 17px; color: var(--steel); margin-bottom: 32px; }
.section--dark .lead { color: rgba(255,255,255,.7); }
.note { font-size: 13px; color: var(--steel); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 26px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 4px 24px 4px 24px;
  font: 700 12px/1 var(--sans); cursor: pointer; transition: transform .3s, box-shadow .3s, background .3s, color .3s; }
.btn .ar, .tlink .ar { font-size: 17px; transition: transform .3s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14,34,51,.22); }
.btn:hover .ar, .tlink:hover .ar { transform: translate(3px,-3px); }
.btn--brass { background: var(--brass); color: var(--navy); }
.btn--brass:hover { background: var(--brass-2); }
.btn--line { background: transparent; color: var(--navy); border: 1px solid rgba(14,34,51,.25); }
.btn--line:hover { background: var(--navy); color: #fff; }
.tlink { display: inline-flex; align-items: center; gap: 14px; font: 700 12px/1 var(--sans); color: #fff; }
.tlink:hover { color: var(--brass); }
.tlink--dark { color: var(--navy); }

/* Header */
.header { position: absolute; z-index: 50; top: 0; left: 0; right: 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,.16); transition: background .3s, box-shadow .3s; }
.header.is-fixed { position: fixed; background: rgba(14,34,51,.95); backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(14,34,51,.18); }
.nav { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.mark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--brass); border-radius: 50% 50% 50% 8px;
  color: var(--brass); font: 500 18px/1 var(--serif); transform: rotate(-8deg); }
.mark i { position: absolute; font: 600 11px/1 var(--serif); color: #fff; font-style: normal; transform: translate(8px, 8px); }
.brand b { display: block; font: 800 15px/1 var(--display); letter-spacing: .14em; }
.brand small { display: block; margin-top: 5px; font: 600 9px/1 var(--sans); letter-spacing: .32em; opacity: .7; }
.menu { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 500; }
.menu a { position: relative; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu .cta { padding: 14px 20px; border: 1px solid var(--brass); border-radius: 4px 18px 4px 18px; font-weight: 700; }
.menu .cta::after { display: none; }
.menu .cta:hover { background: var(--brass); color: var(--navy); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.burger span { display: block; width: 16px; height: 1.5px; margin: 4px auto; background: currentColor; }

/* Hero slider */
.hero { touch-action: pan-y; position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: var(--navy); color: #fff; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; }
.slide.is-on { opacity: 1; visibility: visible; }
.slide .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 7s ease; }
.slide.is-on .bg { transform: scale(1.13); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,34,51,.9) 0%, rgba(14,34,51,.62) 48%, rgba(14,34,51,.25) 100%); }
.slide .wrap { position: relative; z-index: 2; padding-top: 50px; }
.slide h1 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: .98; margin: 0 0 26px; }
.slide h1 em { display: block; }
.slide p { max-width: 470px; font-size: 17px; color: rgba(255,255,255,.82); margin-bottom: 34px; }
.slide .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.slide .tag { margin-top: 64px; font: 700 10px/1 var(--sans); letter-spacing: .2em; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 12px; }
.slide .tag::before { content: ""; width: 34px; height: 1px; background: var(--brass); }
.slide .kicker, .slide h1, .slide p, .slide .acts { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.slide.is-on .kicker { opacity: 1; transform: none; transition-delay: .2s; }
.slide.is-on h1 { opacity: 1; transform: none; transition-delay: .35s; }
.slide.is-on p { opacity: 1; transform: none; transition-delay: .5s; }
.slide.is-on .acts { opacity: 1; transform: none; transition-delay: .65s; }
.hero-ctrl { position: absolute; z-index: 5; right: 4.5vw; bottom: 46px; display: flex; align-items: center; gap: 14px; }
.hero-ctrl button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.hero-ctrl button:hover { border-color: var(--brass); color: var(--brass); }
.hero-ctrl .count { margin-left: 12px; font: 600 26px/1 var(--serif); }
.hero-ctrl .count small { font: 500 12px var(--sans); opacity: .6; }
.hero-bar { position: absolute; z-index: 5; right: 4.5vw; bottom: 110px; display: flex; gap: 6px; }
.hero-bar span { width: 46px; height: 2px; background: rgba(255,255,255,.25); }
.hero-bar span.is-on { background: var(--brass); }

/* Page head (inner pages) */
.pagehead { position: relative; padding: 210px 0 120px; color: #fff; background: var(--navy); overflow: hidden; }
.pagehead .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
.pagehead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,34,51,.95), rgba(14,34,51,.55)); }
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 1; margin-bottom: 24px; }
.pagehead h1 em { display: block; }
.pagehead p { max-width: 560px; color: rgba(255,255,255,.78); font-size: 17px; margin-bottom: 32px; }

/* Layout helpers */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.split--center { align-items: center; }
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.points li { display: flex; gap: 22px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font: 600 18px/1.4 var(--display); letter-spacing: -.01em; }
.points li span { font: 600 13px var(--serif); color: var(--brass); }
.section--dark .points, .section--dark .points li { border-color: rgba(255,255,255,.14); }
.figure { position: relative; border-radius: 4px 60px 4px 60px; overflow: hidden; min-height: 480px; background: var(--navy) center/cover; }
.figure .chip { position: absolute; left: 24px; bottom: 24px; padding: 14px 18px; background: rgba(14,34,51,.88); color: #fff; border-left: 2px solid var(--brass); font: 600 13px/1.5 var(--sans); max-width: 300px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; background: #fff; border: 1px solid var(--line); border-radius: 4px 32px 4px 32px; transition: transform .35s, box-shadow .35s, border-color .35s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(14,34,51,.12); border-color: rgba(200,150,62,.5); }
.card .num { font: 700 11px/1 var(--sans); letter-spacing: .18em; color: var(--brass); margin-bottom: 40px; }
.card p { color: var(--steel); font-size: 15px; }
.card ul { margin: 0 0 22px; padding: 0; list-style: none; }
.card ul li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.card .tlink { margin-top: auto; }
.section--dark .card { background: var(--navy-2); border-color: rgba(255,255,255,.1); }
.section--dark .card p { color: rgba(255,255,255,.66); }
.card--img { padding: 0; overflow: hidden; }
.card--img .ph { height: 220px; background: center/cover; transition: transform .6s; }
.card--img:hover .ph { transform: scale(1.06); }
.card--img .in { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 30px; font-size: 13px; font-weight: 600; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); counter-reset: s; }
.step { padding: 36px 28px 10px 0; border-right: 1px solid var(--line); }
.step + .step { padding-left: 28px; }
.step:last-child { border-right: 0; }
.step .n { display: block; font: 500 44px/1 var(--serif); color: var(--brass); margin-bottom: 26px; }
.step p { color: var(--steel); font-size: 15px; }
.section--dark .steps, .section--dark .step { border-color: rgba(255,255,255,.14); }
.section--dark .step p { color: rgba(255,255,255,.66); }

/* Ports */
.ports { list-style: none; margin: 0; padding: 0; }
.ports li { display: grid; grid-template-columns: 50px 1fr auto; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.ports li span { font: 600 13px var(--serif); color: var(--brass); }
.ports li b { font: 600 clamp(22px, 2.6vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.ports li small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile { position: relative; min-height: 380px; border-radius: 4px 40px 4px 40px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; }
.tile .ph { position: absolute; inset: 0; background: center/cover; transition: transform .8s; }
.tile:hover .ph { transform: scale(1.07); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,34,51,0) 35%, rgba(14,34,51,.9)); }
.tile .in { position: relative; z-index: 2; padding: 28px; }
.tile .in small { font: 700 10.5px/1 var(--sans); letter-spacing: .18em; color: var(--brass); }
.tile h3 { margin: 12px 0 6px; font-size: 26px; }
.tile p { margin: 0; color: rgba(255,255,255,.75); font-size: 14px; }
.gallery--big .tile { min-height: 440px; }
.gallery--big .tile:nth-child(4n+1) { grid-column: span 2; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font: 600 19px/1.4 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--sans); color: var(--brass); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; max-width: 640px; color: var(--steel); }

/* CTA band */
.band { position: relative; padding: 110px 0; background: var(--navy) center/cover; color: #fff; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,34,51,.95), rgba(14,34,51,.7)); }
.band .wrap { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.band h2 { margin: 0; max-width: 640px; }

/* Form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: 44px; background: #fff; border: 1px solid var(--line); border-radius: 4px 40px 4px 40px; }
.form label { display: flex; flex-direction: column; gap: 8px; font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(14,34,51,.2); border-radius: 4px; background: var(--paper); font: 15px/1.4 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(200,150,62,.18); }
.form textarea { min-height: 120px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form .send { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.aside { padding: 44px; background: var(--navy); color: #fff; border-radius: 4px 40px 4px 40px; }
.aside .points li { font-size: 16px; }
.aside a { color: var(--brass); }

/* Footer */
.footer { background: #0A1A27; color: rgba(255,255,255,.72); padding: 90px 0 36px; font-size: 14px; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer .brand { color: #fff; margin-bottom: 22px; }
.footer h4 { margin: 0 0 18px; font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 5px 0; }
.footer a:hover { color: var(--brass); }
.footer .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 28px; font-size: 12.5px; }

/* Scroll reveal */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s ease; }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; }

/* Back to top */
.totop { position: fixed; z-index: 40; right: 26px; bottom: 26px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--brass); background: var(--navy); color: #fff; font-size: 20px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.totop.on { opacity: 1; pointer-events: auto; }
.totop:hover { transform: translateY(-3px); }

@media (max-width: 1020px) {
  .menu { position: fixed; inset: 0; z-index: 60; flex-direction: column; justify-content: center; gap: 26px; font-size: 22px; background: var(--navy); transform: translateX(100%); transition: transform .4s; }
  .menu.open { transform: none; }
  /* backdrop-filter on the fixed header makes it the containing block for the
     fixed menu, so the open menu shrank to the header strip and the page showed
     through. Drop the filter while the menu is open. */
  .header:has(.menu.open) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--navy); }
  .burger { display: block; position: relative; z-index: 70; }
  .split { grid-template-columns: 1fr; gap: 50px; }
  .cards, .cards--4, .gallery { grid-template-columns: 1fr 1fr; }
  .gallery--big .tile:nth-child(4n+1) { grid-column: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(3) { padding-left: 0; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .section { padding: 84px 0; }
  .cards, .cards--4, .gallery, .steps, .form { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 28px 0 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .form, .aside { padding: 28px 22px; }
  .hero-ctrl { left: 16px; right: auto; bottom: 26px; }
  .hero-bar { display: none; }
  .slide .tag { display: none; }
  .pagehead { padding: 160px 0 84px; }
  .footer .cols { grid-template-columns: 1fr; gap: 34px; }
  .ports li { grid-template-columns: 40px 1fr; }
  .ports li small { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rv { opacity: 1; transform: none; }
  .slide .kicker, .slide h1, .slide p, .slide .acts { opacity: 1; transform: none; }
}

/* Hero slide text: sizes taken from the reference design */
.slide h1 { font-size: clamp(3.4rem, 7.1vw, 6.7rem); line-height: .99; letter-spacing: -.055em; max-width: 900px; margin-bottom: 28px; }
.slide .kicker { font-size: 10px; letter-spacing: .2em; gap: 11px; margin-bottom: 24px; }
.slide .kicker::before { width: 27px; }
.slide p { font-size: 15px; line-height: 1.9; max-width: 510px; margin-bottom: 32px; }
.slide .btn { font-size: 11px; letter-spacing: .015em; gap: 28px; padding: 0 25px; }
.slide .tlink { font-size: 11px; gap: 16px; }
.slide .tlink .ar { font-size: 18px; }
.slide .tag { font-size: 8px; letter-spacing: .18em; margin-top: 72px; }
.hero-ctrl .count { font-size: 32px; font-weight: 500; }
.hero-ctrl .count small { font-size: 11px; }

/* Type scale matched to the reference design (sizes, weights, tracking) */
h1, h2 { letter-spacing: -.055em; }
h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.03; margin-bottom: 25px; }
.kicker { font-size: 10px; letter-spacing: .2em; gap: 11px; margin-bottom: 24px; }
.kicker::before { width: 27px; }
.lead { font-size: 13px; line-height: 1.8; max-width: 440px; margin-bottom: 28px; }
.lead--big { font: 400 27px/1.4 var(--serif); color: var(--navy); max-width: 430px; }
.note { font-size: 10px; line-height: 1.7; }
.btn { font-size: 11px; letter-spacing: .015em; gap: 28px; padding: 0 25px; }
.tlink { font-size: 11px; gap: 16px; }
.tlink .ar { font-size: 18px; }
.brand b { font-size: 13px; letter-spacing: .16em; }
.brand small { font-size: 8px; font-weight: 500; letter-spacing: .38em; color: #D4DDE2; opacity: 1; margin-top: 4px; }
.menu { font-size: 11px; gap: 32px; }
.menu a { color: rgba(255,255,255,.8); padding: 10px 0; }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; }
.menu .cta { font-size: 10px; padding: 13px 18px; border-radius: 3px 18px 3px 18px; color: #fff; }
.pagehead h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 1.02; max-width: 850px; margin-bottom: 25px; }
.pagehead p { font-size: 15px; line-height: 1.9; max-width: 510px; }
.points li { font-size: 16px; padding: 18px 0; }
.points li span { font: 700 9px var(--sans); letter-spacing: .1em; }
.card .num { font-size: 8px; letter-spacing: .18em; margin-bottom: 34px; }
.card h3 { font-size: 25px; letter-spacing: -.04em; line-height: 1.2; margin-bottom: 15px; }
.card p { font-size: 11px; line-height: 1.8; max-width: 280px; margin-bottom: 24px; }
.card ul li { font-size: 11px; padding: 7px 0; }
.card .tlink { font-size: 10px; border-bottom: 1px solid rgba(200,150,62,.65); padding-bottom: 8px; width: fit-content; }
.chips li { font-size: 11px; }
.step .n { font-size: 22px; margin-bottom: 18px; }
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 11px; line-height: 1.8; }
.ports li { padding: 16px 0; grid-template-columns: 40px 1fr auto; }
.ports li span { font: 400 9px var(--sans); }
.ports li b { font: 600 14px/1.3 var(--sans); letter-spacing: 0; }
.ports li small { font-size: 10px; letter-spacing: 0; text-transform: none; color: #a9a4c0; opacity: 1; }
.tile h3 { font-size: 25px; letter-spacing: -.04em; }
.tile p { font-size: 11px; }
.tile .in small { font-size: 8px; }
.faq summary { font-size: 14px; font-weight: 700; padding: 22px 0; }
.faq summary i { font: 700 9px var(--sans); letter-spacing: .1em; color: var(--brass); font-style: normal; margin-right: 14px; }
.faq details p { font-size: 12px; line-height: 1.9; }
.band h2 { font-size: clamp(2.5rem, 5.5vw, 5rem); }
.band .lead { font-size: 14px; color: #d7dfe4; max-width: 700px; }
.band small { display: block; margin-top: 16px; font-size: 9px; color: #a8b4bc; }
.form label { font-size: 10px; }
.form input, .form select, .form textarea { font-size: 13px; }
.aside .points li { font-size: 14px; }
.footer { font-size: 11px; }
.footer p { font-size: 12px; max-width: 290px; }
.footer h4 { font-size: 11px; letter-spacing: .16em; color: var(--brass); margin-bottom: 8px; }
.footer li a, .footer li { color: #D4DDE2; }
.footer .motto { font: italic 15px/1.5 var(--serif); color: #D4DDE2; }
.footer .legal { font-size: 14px; font-weight: 600; color: #aab4af; }
@media (max-width: 1020px) { .menu { font-size: 20px; } }

/* Closing band: centred, heading clear of the copy below it */
.band .wrap { flex-direction: column; justify-content: center; text-align: center; gap: 34px; }
.band .wrap > div { display: flex; flex-direction: column; align-items: center; }
.band .kicker { justify-content: center; }
.band h2 { max-width: 900px; margin: 0 0 22px; line-height: 1.05; }
.band .lead { margin: 0 auto !important; }
/* Four principles as a strip under the approach section */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillars div { padding: 28px 26px; border-right: 1px solid var(--line); }
.pillars div:last-child { border-right: 0; }
.pillars span { display: block; margin-bottom: 14px; font: 500 22px/1 var(--serif); color: var(--brass); }
.pillars b { font: 600 16px/1.35 var(--display); letter-spacing: -.01em; }
@media (max-width: 1020px) { .pillars { grid-template-columns: 1fr 1fr; } .pillars div:nth-child(2) { border-right: 0; } .pillars div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } .pillars div { border-right: 0; border-bottom: 1px solid var(--line); } .pillars div:last-child { border-bottom: 0; } }
/* Product chips: fixed height, text centred inside the pill */
.chips { gap: 8px; }
.chips li, .card ul.chips li { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border: 1px solid rgba(14,34,51,.18); border-radius: 16px; background: var(--paper); font: 600 12px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; color: var(--navy); }