/* Waler — site styles. Layout and rhythm follow the reference teardown (refs/teardown/teardown.md). */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-tight-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #FAFAFA;
  --stone: #F4F5EB;
  --ink: #1D2018;
  --mut: #4F584F;
  --lime: #E2F99C;
  --line: #E0E4E0;
  --grid: #EDEFEA;
  --pad: 72px;
  --hdr: 73px;
  --col: calc((100vw - var(--scrollbar, 0px) - 2 * var(--pad)) / 8);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.33, 1, .68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
body { margin: 0; background: var(--bg); color: var(--mut); font: 400 16px/1.46 var(--sans); letter-spacing: -.2px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--lime); color: var(--ink); padding: 12px 16px; font-weight: 500; }
.skip:focus { top: 12px; }

/* fixed hairline grid that shows through transparent sections */
.bg-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--col) 91px, var(--col) 91px;
  background-position: var(--pad) var(--hdr), var(--pad) var(--hdr); }

/* type */
.eyebrow { font: 600 12px/1.15 var(--sans); letter-spacing: .36px; text-transform: uppercase; color: var(--mut); }
.h1 { font: 400 clamp(46px, 5.84vw, 84px)/1.04 var(--serif); letter-spacing: -.022em; color: var(--ink); }
.h2 { font: 400 clamp(42px, 5vw, 72px)/1.04 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.h3 { font: 400 clamp(30px, 2.78vw, 40px)/1.12 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.t26 { font: 400 clamp(22px, 1.81vw, 26px)/1.25 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.lead { font-size: 20px; line-height: 1.46; color: var(--mut); }
.body { font-size: 16px; line-height: 1.46; }
.body + .body { margin-top: 16px; }
mark { color: inherit; background: linear-gradient(rgba(243, 252, 178, 0), #F3FCB4 12%, #F3FCB4 88%, rgba(243, 252, 178, 0)) no-repeat 0 78% / 100% 68%; padding: 0 .02em; }
.js mark.sweep { background-size: 0% 68%; transition: background-size .9s var(--ease); }
.js mark.sweep.on { background-size: 100% 68%; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; height: 48px; color: var(--ink); font-weight: 500;
  font-size: 16px; letter-spacing: -.32px; cursor: pointer; background: none; border: 0; padding: 0; }
.btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 48px; border-radius: 2px; background: var(--lime);
  transition: width .25s ease-out; }
.btn__ic { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; transition: transform .25s ease-out; }
.btn__ic svg { width: 14px; height: 12px; }
.btn__tx { position: relative; z-index: 1; padding: 0 16px; transition: transform .25s ease-out; white-space: nowrap; }
.btn:hover::before, .btn:focus-visible::before { width: 100%; }
.btn:hover .btn__ic, .btn:focus-visible .btn__ic { transform: translateX(4px); }
.btn:hover .btn__tx, .btn:focus-visible .btn__tx { transform: translateX(-4px); }

.btn-full { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--lime); color: var(--ink); border: 0; border-radius: 2px; font-weight: 500; font-size: 16px; letter-spacing: -.32px;
  cursor: pointer; padding: 0 32px; min-height: 48px; }
.btn-full::before { content: ""; position: absolute; inset: 0 -1px; background: var(--ink); border-radius: 2px;
  transform: translateX(-100%); transition: transform .3s ease-out; }
.btn-full > * { position: relative; z-index: 1; transition: color .3s ease-out; }
.btn-full svg { width: 14px; height: 12px; flex: none; }
.btn-full svg path { transition: stroke .3s ease-out; }
.btn-full span { white-space: nowrap; }
.btn-full:hover::before, .btn-full:focus-visible::before { transform: translateX(0); }
.btn-full:hover > *, .btn-full:focus-visible > * { color: var(--bg); }
.btn-full:hover svg path, .btn-full:focus-visible svg path { stroke: var(--bg); }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); display: flex; align-items: stretch;
  background: rgba(250, 250, 250, .88); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--line); }
.hdr__logo { display: flex; align-items: center; padding: 0 4px 0 8px; margin-left: calc(var(--pad) - 8px); }
.hdr__logo img { width: 138px; height: auto; }
.hdr__nav { margin-left: auto; display: flex; align-items: stretch; }
.hdr__link { display: flex; align-items: center; gap: 10px; padding: 0 32px; font-weight: 500; font-size: 16px; letter-spacing: -.32px;
  color: var(--ink); background: none; border: 0; cursor: pointer; position: relative; }
.hdr__link::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 22px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hdr__link:hover::after { transform: scaleX(1); }
.hdr__link svg { width: 12px; height: 6px; transition: transform .35s var(--ease); }
.hdr__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr__cta { margin: 4px 4px 4px 28px; min-height: 0; padding: 0 32px; }
.hdr__toggle { display: none; }

.dd { display: flex; }
.dd__panel { position: absolute; top: calc(100% + 1px); right: 0; width: min(810px, 100%);
  background: var(--bg); border: 1px solid var(--line); border-top: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.dd.open .dd__panel { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.dd__col { border-left: 1px solid var(--line); }
.dd__col:first-child { border-left: 0; }
.dd__col .eyebrow { display: block; padding: 24px 40px; border-bottom: 1px solid var(--line); }
.dd__col a { display: block; padding: 22px 40px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink);
  letter-spacing: -.32px; transition: background-color .25s ease-out; }
.dd__col a:hover { background: var(--stone); }
.dd-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(29, 32, 24, .4); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease) .1s; }
.dd-overlay.on { opacity: 1; }

.mnav { display: none; }

/* layout helpers */
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split > :last-child { border-left: 1px solid var(--line); }
.sec { background: var(--bg); position: relative; z-index: 2; }
.sec--stone { background: var(--stone); }
.bt { border-top: 1px solid var(--line); }

/* hero */
.hero { position: relative; }
.hero__inner { position: sticky; top: var(--hdr); z-index: 0; display: grid; grid-template-columns: calc(5 * var(--col)) 1fr; align-items: center;
  min-height: 545px; padding-top: 32px; padding-bottom: 32px; }
.hero__title { max-width: 800px; padding-right: 24px; }
.hero__side { max-width: 486px; width: 100%; }
.hero__side .lead { margin-bottom: 40px; }
.js .hero__inner { opacity: 0; transition: opacity .7s ease-out; }
.js .is-ready .hero__inner { opacity: 1; }
.hero__track { position: relative; z-index: 1; height: calc(100vh - var(--hdr) + 320px); }
.hero__media { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow: hidden; }
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) { .js .hero__track { margin-bottom: calc(-.3 * (100vh - var(--hdr))); } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* intro split */
.intro { min-height: 289px; }
.intro > div { display: flex; flex-direction: column; justify-content: center; padding: 72px var(--pad); }
.intro p { max-width: 510px; margin-bottom: 24px; }
.lockup { display: flex; align-items: center; justify-content: center; gap: 36px; }
.lockup img { width: 128px; }
.lockup__x { width: 14px; height: 14px; color: var(--mut); }
.lockup__plate { background: var(--ink); color: var(--bg); font: 400 24px/1 var(--serif); letter-spacing: -.02em; padding: 10px 14px 9px; }

/* building types grid */
.types { display: grid; grid-template-columns: calc(var(--pad) + 2 * var(--col)) 1fr; }
.types__lab { padding: 32px 32px 32px var(--pad); }
.types__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--line); margin-right: var(--pad); border-right: 1px solid var(--line); }
.types__grid li { list-style: none; display: grid; place-items: center; min-height: 105px; padding: 24px; text-align: center;
  font: 400 28px/1.1 var(--serif); letter-spacing: -.005em; color: var(--ink); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.types__grid li:nth-child(-n+3) { border-top: 0; }
.types__grid li:nth-child(3n+1) { border-left: 0; }
.types__grid { margin-top: 0; margin-bottom: 0; padding: 0; }

/* list sections (why / what we look at) */
.list > div:first-child { padding: 120px var(--pad) 72px; }
.list .h3 { margin-top: 24px; max-width: 486px; }
.list .body { max-width: 486px; margin-top: 24px; }
.rows { margin: 0; padding: 0; }
.row { list-style: none; display: grid; grid-template-columns: 1fr 64px; gap: 24px; padding: 40px var(--pad) 40px var(--pad);
  border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; padding-top: 120px; }
.row .t26 { margin-bottom: 24px; }
.row p { max-width: 413px; }
.row svg { width: 34px; height: 34px; justify-self: end; color: var(--ink); }

/* marquee */
.marq { overflow: hidden; padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marq__track { display: flex; width: max-content; animation: marq 60s linear infinite; }
.marq__set { display: flex; gap: 64px; padding-right: 64px; margin: 0; }
.marq__item { list-style: none; }
.marq__big { font: 400 84px/1.04 var(--serif); letter-spacing: -.022em; color: var(--ink); white-space: nowrap; }
.marq__lab { margin-top: 8px; }
@keyframes marq { to { transform: translateX(-50%); } }

/* services scroller */
.svc__head { padding: 160px var(--pad) 56px; border-bottom: 1px solid var(--line); }
.svc__head .h3 { margin-top: 24px; max-width: 648px; }
.svc__body { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.svc__media { position: relative; border-right: 1px solid var(--line); }
.svc__stick { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); display: flex; align-items: center; padding: 16px 30px 16px var(--pad); }
.svc__frame { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--hdr) - 32px); overflow: hidden; background: var(--stone); }
.svc__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .svc__frame img + img { clip-path: inset(100% 0 0 0); }
.svc__items { margin: 0; padding: 0; }
.svc__item { list-style: none; min-height: calc(100vh - var(--hdr)); display: flex; flex-direction: column; justify-content: center;
  padding: 64px calc(var(--col) * .75) 64px calc(var(--col) * .75); }
.svc__item .h2 { margin-bottom: 24px; max-width: 420px; }
.svc__item p { max-width: 406px; margin-bottom: 32px; }
.svc__item picture { display: none; }
.ticks { position: absolute; right: 0; top: 0; bottom: 0; width: 28px; pointer-events: none; }
.ticks__in { position: sticky; top: 50vh; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ticks i { display: block; width: 28px; height: 2px; border-radius: 2em 0 0 2em; background: rgba(29, 32, 24, .2);
  transition: background-color .45s var(--ease), width .45s var(--ease); }
.ticks i.on { width: 44px; background: var(--ink); }
.svc__more { display: flex; justify-content: center; padding: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* how we work */
.how__head { padding: 160px var(--pad) 72px; }
.how__head .h3 { margin: 24px 0; }
.how__head .body { max-width: 486px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 var(--pad); padding: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.steps li { list-style: none; padding: 33px 33px 40px; border-left: 1px solid var(--line); }
.steps li:first-child { border-left: 0; }
.steps .n { font: 400 40px/1.12 var(--serif); letter-spacing: -.03em; color: var(--mut); opacity: .8; margin-bottom: 56px; }
.steps .t26 { margin-bottom: 24px; }
.steps-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* image strip with parallax */
.strip { padding: 18px var(--pad); }
.strip__in { position: relative; height: 378px; overflow: hidden; }
.strip__in img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; }
.strip--text .strip__in { height: 398px; display: grid; place-items: center; text-align: center; }
.strip--text .strip__in::after { content: ""; position: absolute; inset: 0; background: rgba(29, 32, 24, .38); }
.strip__copy { position: relative; z-index: 1; padding: 24px; }
.strip__copy .h1 { color: var(--bg); max-width: 760px; margin: 0 auto 32px; }

/* split text + card / image */
.baf > div { padding: 72px var(--pad); display: flex; flex-direction: column; justify-content: center; }
.baf .h3 { margin: 24px 0; max-width: 520px; }
.baf .h3:first-child { margin-top: 0; }
.baf .body { max-width: 510px; }
.baf .btn { margin-top: 32px; align-self: flex-start; }
.card-lime { background: var(--lime); padding: 32px 32px 40px; min-height: 272px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.card-lime .eyebrow { color: var(--ink); }
.card-lime__row { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.card-lime__big { font: 400 84px/1 var(--serif); letter-spacing: -.034em; }
.card-lime__row p:not(.card-lime__big) { font-size: 18px; line-height: 1.4; max-width: 220px; padding-bottom: 8px; }
.baf__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* schematic card */
.scheme { border: 1px solid var(--line); background: #fff; }

/* company / case layout */
.co__head { display: grid; grid-template-columns: 1fr calc(2 * var(--col) + var(--pad)); border-bottom: 1px solid var(--line); }
.co__head > div:first-child { padding: 160px var(--pad) 40px; }
.co__head .h2 { margin-top: 24px; }
.co__logo { border-left: 1px solid var(--line); display: flex; align-items: flex-end; padding: 0 var(--pad) 48px 40px; }
.co__logo img { width: 110px; }
.co__body { display: grid; grid-template-columns: calc(var(--pad) + 3 * var(--col)) 1fr calc(2 * var(--col) + var(--pad)); }
.co__img { padding: 56px 0 56px var(--pad); }
.co__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.co__txt { padding: 56px 56px 56px 60px; }
.co__txt .btn { margin-top: 32px; }
.co__facts { border-left: 1px solid var(--line); padding: 56px var(--pad) 56px 40px; display: flex; flex-direction: column; gap: 40px; }
.co__fact b { display: block; font: 400 52px/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.co__fact span { display: block; margin-top: 8px; font-size: 14px; }

/* details link list */
.det > div:first-child { padding: 72px var(--pad); }
.det .h3 { margin: 24px 0 32px; }
.det__rows { margin: 0; padding: 0; }
.det__row { list-style: none; display: grid; grid-template-columns: 1fr 96px; border-top: 1px solid var(--line); transition: background-color .35s ease-in-out; }
.det__row:first-child { border-top: 0; }
.det__row > div:first-child, .det__link > div { padding: 28px 40px; }
.det__row .eyebrow { display: block; margin-bottom: 8px; }
.det__row .t26 { word-break: break-word; }
.det__go { display: grid; place-items: center; border-left: 1px solid var(--line); }
.det__go svg { width: 14px; height: 12px; }
.det__row:has(a:hover) { background: rgba(226, 249, 156, .5); }
a.det__link { display: contents; }
.det__row:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.det__link:focus-visible { outline: none; }

/* CTA + form */
.sock { padding: 140px var(--pad) 120px; text-align: center; }
.sock .h1 { max-width: 980px; margin: 0 auto 24px; }
.sock .lead { max-width: 620px; margin: 0 auto 56px; }
.sock .lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form { max-width: 972px; margin: 0 auto; text-align: left; background: var(--bg); border: 1px solid var(--line); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; }
.fld { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border-top: 1px solid var(--line); }
.fld:nth-child(even) { border-left: 1px solid var(--line); }
.fld:nth-child(-n+2) { border-top: 0; }
.fld--wide { grid-column: 1 / -1; border-left: 0 !important; }
.fld label, .fld legend { font: 600 12px/1.2 var(--sans); letter-spacing: .36px; text-transform: uppercase; color: var(--mut); }
.fld input, .fld select, .fld textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(29, 32, 24, .2); background: transparent;
  padding: 8px 0 10px; font-size: 18px; color: var(--ink); border-radius: 0; appearance: none; -webkit-appearance: none; }
.fld select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M1 .5l5 5 5-5' fill='none' stroke='%231D2018'/%3E%3C/svg%3E") no-repeat right 4px center / 12px 6px; padding-right: 24px; cursor: pointer; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--ink); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { box-shadow: 0 2px 0 0 var(--ink); }
.fld.err input, .fld.err select { border-bottom-color: #A1261B; }
.fld .hint { font-size: 13px; color: var(--mut); }
.fld.err .hint { color: #A1261B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding: 0 0 0 24px; }
.form__note { font-size: 13px; line-height: 1.5; max-width: 480px; padding: 16px 0; }
.form__note a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink); }
.form__send { min-height: 91px; min-width: 323px; font-size: 16px; }
.form__send[disabled] { opacity: .6; cursor: progress; }
.form__msg { margin: 0; padding: 0 24px; }
.form__msg:not(:empty) { padding: 20px 24px; border-top: 1px solid var(--line); color: var(--ink); background: var(--stone); }
.form__msg.ok { background: var(--lime); }
.form__msg a { text-decoration: underline; text-underline-offset: 2px; }

/* footer */
.ftr { display: grid; grid-template-columns: calc(var(--pad) + 2 * var(--col)) 1fr; border-top: 1px solid var(--line); background: var(--bg); }
.ftr__mark { padding: 88px 56px 64px var(--pad); border-right: 1px solid var(--line); }
.ftr__mark img { width: 150px; }
.ftr__main { padding: 88px var(--pad) 48px 56px; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ftr__cols .eyebrow { display: block; margin-bottom: 20px; }
.ftr__cols ul { margin: 0; padding: 0; }
.ftr__cols li { list-style: none; margin-bottom: 12px; color: var(--ink); font-size: 15px; }
.ftr__cols a { transition: color .2s ease-out; }
.ftr__cols a:hover { color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.ftr__legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 28px var(--pad); font-size: 13px; line-height: 1.6; display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; }
.ftr__legal p { max-width: 980px; }

/* cookie notice */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 420px; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: stretch; box-shadow: 0 8px 30px rgba(29, 32, 24, .08); }
.cookie p { padding: 16px 20px; font-size: 14px; line-height: 1.45; }
.cookie a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink); }
.cookie .btn-full { min-height: 0; padding: 0 26px; border-radius: 0; }
.cookie[hidden] { display: none; }

/* legal pages */
.legal { max-width: 860px; padding: 120px var(--pad) 120px; margin: 0 auto 0 0; }
.legal .h1 { margin: 24px 0 16px; }
.legal .upd { margin-bottom: 56px; }
.legal h2 { font: 400 32px/1.15 var(--serif); letter-spacing: -.02em; margin: 56px 0 16px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; color: var(--mut); }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 20px; margin: 14px 0; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal dl { display: grid; grid-template-columns: 240px 1fr; margin: 0; border-top: 1px solid var(--line); }
.legal dt, .legal dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.legal dt { color: var(--mut); padding-right: 20px; }
.legal dd { color: var(--ink); }
.legal-wrap { background: var(--bg); border-bottom: 1px solid var(--line); }
.nf { min-height: calc(100vh - var(--hdr)); display: grid; place-items: center; text-align: center; padding: 80px var(--pad); }
.nf .h1 { margin: 24px 0; }
.nf .lead { margin-bottom: 40px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  :root { --pad: 40px; }
  .hdr__link { padding: 0 18px; }
  .hdr__link::after { left: 18px; right: 18px; }
  .hdr__cta { margin-left: 12px; padding: 0 22px; }
  .marq__big { font-size: 64px; }
  .co__body { grid-template-columns: 1fr 1fr; }
  .co__facts { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); flex-direction: row; padding-left: var(--pad); }
}

@media (max-width: 960px) {
  :root { --hdr: 70px; }
  .hdr { height: var(--hdr); }
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__toggle { display: grid; place-items: center; margin: 4px 4px 4px auto; width: 72px; background: var(--lime); border: 0; border-radius: 2px; cursor: pointer;
    transition: background-color .25s var(--ease); }
  .hdr__toggle svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
  .hdr__toggle svg path { stroke: var(--ink); transition: stroke .35s var(--ease); }
  .hdr__toggle[aria-expanded="true"] { background: var(--ink); }
  .hdr__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
  .hdr__toggle[aria-expanded="true"] svg path { stroke: var(--bg); }
  .mnav { display: block; position: fixed; inset: var(--hdr) 0 0 0; z-index: 49; background: var(--bg); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
  .mnav.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
  .mnav a:not(.btn-full) { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--pad); border-bottom: 1px solid var(--line);
    font-weight: 500; font-size: 17px; color: var(--ink); }
  .mnav a.sub { padding-left: calc(var(--pad) + 16px); font-weight: 400; color: var(--mut); font-size: 16px; }
  .mnav .btn-full { display: flex; margin: 24px var(--pad); min-height: 64px; }

  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 96px; padding-bottom: 72px; gap: 40px; }
  .hero__side { margin-left: 0; max-width: 560px; }
  .hero__track { height: calc(100vh - var(--hdr) + 160px); }
  .split, .svc__body { grid-template-columns: 1fr; }
  .split > :last-child { border-left: 0; border-top: 1px solid var(--line); }
  .types { grid-template-columns: 1fr; }
  .types__grid { margin: 0 var(--pad); border-top: 1px solid var(--line); }
  .types__lab { padding-bottom: 24px; }
  .list > div:first-child { padding-top: 88px; padding-bottom: 48px; }
  .row, .row:first-child { padding: 32px var(--pad); }
  .svc__media, .ticks { display: none; }
  .svc__item { min-height: 0; padding: 48px var(--pad); border-top: 1px solid var(--line); }
  .svc__item:first-child { border-top: 0; }
  .svc__item picture { display: block; margin-bottom: 32px; }
  .svc__item picture img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  .svc__head, .how__head { padding-top: 104px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .co__head { grid-template-columns: 1fr; }
  .co__head > div:first-child { padding-top: 104px; }
  .co__logo { display: none; }
  .co__body { grid-template-columns: 1fr; }
  .co__img { padding: 40px var(--pad) 0; }
  .co__txt { padding: 40px var(--pad); }
  .ftr { grid-template-columns: 1fr; }
  .ftr__mark { border-right: 0; border-bottom: 1px solid var(--line); padding: 56px var(--pad) 40px; }
  .ftr__main { padding: 48px var(--pad) 32px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --pad: 24px; }
  /* reference mobile: section headings switch to the grotesk, services titles shrink */
  .h3 { font: 400 30px/1.18 var(--sans); letter-spacing: -.035em; }
  .h2 { font-size: 34px; }
  .intro > div:last-child { order: -1; border-top: 0; border-bottom: 1px solid var(--line); padding: 48px var(--pad); }
  .types__grid { margin: 0; border-left: 0; border-right: 0; }
  .steps { margin: 0; border: 0; }
  .steps li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t n" "p p"; column-gap: 16px; }
  .steps .n { grid-area: n; font-size: 30px; margin: 0; }
  .steps .t26 { grid-area: t; margin-bottom: 16px; }
  .steps .body { grid-area: p; }

  body { font-size: 16px; }
  .lead { font-size: 18px; }
  .hero__inner { padding-top: 88px; }
  .hero__track { height: calc(85vh - var(--hdr) + 120px); }
  .hero__media { height: calc(85vh - var(--hdr)); }
  .intro > div { padding: 56px var(--pad); }
  .lockup { gap: 20px; }
  .lockup img { width: 104px; }
  .lockup__plate { font-size: 20px; }
  .types__grid { grid-template-columns: 1fr 1fr; }
  .types__grid li { font-size: 21px; min-height: 88px; padding: 16px; }
  .types__grid li:nth-child(n) { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .types__grid li:nth-child(-n+2) { border-top: 0; }
  .types__grid li:nth-child(2n+1) { border-left: 0; }
  .row { grid-template-columns: 1fr 40px; gap: 12px; }
  .row svg { width: 28px; height: 28px; }
  .marq { padding: 40px 0; }
  .marq__big { font-size: 52px; }
  .marq__set { gap: 40px; padding-right: 40px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-left: 0 !important; border-top: 1px solid var(--line); padding: 28px 24px 32px; }
  .steps li:first-child { border-top: 0; }
  .steps .n { margin-bottom: 24px; }
  .strip { padding: 12px var(--pad); }
  .strip__in { height: 240px; }
  .strip--text .strip__in { height: 420px; }
  .baf > div { padding: 56px var(--pad); }
  .card-lime__big { font-size: 64px; }
  .co__facts { flex-direction: column; gap: 28px; }
  .co__fact b { font-size: 44px; }
  .det > div:first-child { padding: 56px var(--pad); }
  .det__row { grid-template-columns: 1fr 64px; }
  .det__row > :first-child { padding: 22px var(--pad); }
  .sock { padding: 96px var(--pad) 80px; }
  .form__grid { grid-template-columns: 1fr; }
  .fld:nth-child(even) { border-left: 0; }
  .fld:nth-child(2) { border-top: 1px solid var(--line); }
  .form__foot { flex-direction: column; align-items: stretch; padding: 0; }
  .form__note { padding: 16px 24px 0; }
  .form__send { min-width: 0; min-height: 72px; }
  .ftr__cols { grid-template-columns: 1fr; gap: 8px; }
  .ftr__cols > div { margin-bottom: 20px; }
  .legal { padding: 72px var(--pad); }
  .legal dl { grid-template-columns: 1fr; }
  .legal dt { border-bottom: 0; padding-bottom: 0; }
  .cookie { left: 12px; right: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .hero__inner { opacity: 1; }
  .js mark.sweep { background-size: 100% 68%; }
  .js .svc__frame img + img { clip-path: none; opacity: 0; }
  .js .svc__frame img.on { opacity: 1; }
  .hero__track { height: auto; }
  .hero__media { position: relative; top: 0; height: 70vh; }
  .marq__track { animation: none; }
}
.mnav a svg { width: 12px; height: 6px; transform: rotate(-90deg); }