/* Pugiii — moving company. Layout and motion follow the reference teardown (refs/teardown/teardown.md). */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap;
  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: "Barlow Condensed"; src: url("../fonts/barlow-condensed-900-ext.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap;
  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"; src: url("../fonts/inter-tight-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  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"; src: url("../fonts/inter-tight-var-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  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 {
  --black: #131313; --white: #fefefe; --gray: #d8d3d3; --accent: #4e37ff; --accent-dark: #3a24e6; --placeholder: #424242;
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --ease: cubic-bezier(.3, .4, 0, 1); --ease-out: cubic-bezier(.165, .84, .44, 1); --ease-out4: cubic-bezier(.23, 1, .32, 1);
  --ease-inout: cubic-bezier(.77, 0, .175, 1);
  --t-fast: .25s; --t: .4s; --t-slow: .6s; --t-slower: .8s;
  --margin: 1rem; --gutter: .75rem; --header-h: 4.375rem;
  --r-xs: .25rem; --r-sm: .5rem; --r-md: .875rem; --r-lg: 2.5rem;
  --sp-xs: clamp(.5rem, .4565rem + .2174vw, .625rem);
  --sp-sm: clamp(1rem, .8261rem + .8696vw, 1.5rem);
  --sp-md: clamp(1.5rem, 1.3261rem + .8696vw, 2rem);
  --sp-lg: clamp(2rem, 1.8261rem + .8696vw, 2.5rem);
  --sp-xl: clamp(2.5rem, 2.1522rem + 1.7391vw, 3.5rem);
  --sp-2xl: clamp(3.5rem, 2.7609rem + 3.6957vw, 5.625rem);
  --sp-3xl: clamp(5.625rem, 4.3207rem + 6.5217vw, 9.375rem);
  --sp-4xl: clamp(9.375rem, 8.288rem + 5.4348vw, 12.5rem);
  --fs-huge: clamp(6rem, -1.0435rem + 35.2174vw, 26.25rem);
  --fs-xl: clamp(6rem, 3.0435rem + 14.7826vw, 14.5rem);
  --fs-lg: clamp(4.5rem, 1.7174rem + 13.913vw, 12.5rem);
  --fs-md: clamp(2.25rem, -.2717rem + 12.6087vw, 9.5rem);
  --fs-sm: clamp(2.25rem, 1.4674rem + 3.913vw, 4.5rem);
  --fs-xs: clamp(2rem, 1.587rem + 2.0652vw, 3.1875rem);
  --fs-2xs: clamp(1.5rem, 1.3261rem + .8696vw, 2rem);
  --fs-body-lg: clamp(1.125rem, 1.0815rem + .2174vw, 1.25rem);
  --fs-body: clamp(.875rem, .8315rem + .2174vw, 1rem);
  --fs-small: .75rem;
  --bg: var(--black); --fg: var(--white);
}
@media (max-width: 999.98px) { :root { --margin: .625rem; --gutter: .625rem; --header-h: 3.75rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--black); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; line-height: 1.1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
strong, b { font-weight: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.theme-light :focus-visible, .ftr :focus-visible { outline-color: currentColor; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--margin); top: -100px; z-index: 200; background: var(--accent); color: var(--white); padding: .9rem 1.4rem; border-radius: var(--r-md); }
.skip:focus { top: var(--margin); }

/* type */
.h-cond { font-family: var(--font-cond); font-weight: 900; text-transform: uppercase; line-height: .72; letter-spacing: -.02em; }
.h-huge { letter-spacing: -.03em; }
.h-huge { font-size: var(--fs-huge); }
.h-xl { font-size: var(--fs-xl); }
.h-lg { font-size: var(--fs-lg); }
.h-md { font-size: var(--fs-md); }
.h-sm { font-size: var(--fs-sm); font-weight: 700; line-height: .9; letter-spacing: -.045em; }
.h-xs { font-size: var(--fs-xs); font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.h-2xs { font-size: var(--fs-2xs); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.2; }
.body { font-size: var(--fs-body); line-height: 1.1; }
.small { font-size: var(--fs-small); line-height: 1.1; }
.muted { opacity: .6; }
.container { padding-inline: var(--margin); }
.my-3xl { margin-block: var(--sp-3xl); }

/* theme blocks */
.theme-light { --bg: var(--white); --fg: var(--black); background: var(--bg); color: var(--fg); }
.theme-dark { --bg: var(--black); --fg: var(--white); background: var(--bg); color: var(--fg); }

/* inview rules: a 1px line that draws from the left */
.rule { position: relative; }
.rule::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: currentColor; transform-origin: 0 0; }
.js .rule::before { transform: scaleX(0); transition: transform var(--t-slower) var(--ease-inout); transition-delay: calc(var(--i, 0) * 60ms); }
.js .rule.is-in::before, .js .is-in > .rule::before, .js .is-in .rule::before { transform: scaleX(1); }

/* ---------- page cover (reference: black cover with a spinner, fades when ready) ---------- */
.cover { position: fixed; inset: 0; z-index: 150; background: var(--black); display: none; pointer-events: none; }
.js .cover { display: block; transition: opacity var(--t-slow), visibility 0s var(--t-slow); }
.js.is-ready .cover { opacity: 0; visibility: hidden; }
.cover__spin { position: absolute; left: calc(50% - 18px); top: calc(50% - 18px); width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(254, 254, 254, .2); border-top-color: var(--white); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- header ---------- */
.hdr { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: start; padding: 1.25rem var(--margin) var(--sp-3xl); }
.hdr__col { display: flex; }
.hdr__col:nth-child(2) { justify-content: space-between; }
.hdr__title { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--fs-2xs); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.hdr__title span { position: relative; display: inline-block; }
.hdr__title span::before { content: ""; position: absolute; left: 0; bottom: -.1em; width: 100%; height: .1em; background: currentColor; transform: scaleX(0); transform-origin: 100% 0; }
.hdr__logo { display: block; width: clamp(7rem, 24vw, 21.6rem); margin-left: -5%; }
.hdr__logo .stamp { width: 100%; height: auto; --logo-knock: var(--black); }
.hdr__loc { font-size: var(--fs-body); font-weight: 500; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hdr__title span::before { transition: transform var(--t) var(--ease-out); transition-delay: calc(var(--i, 0) * .1s); }
  .hdr__title:hover span::before { transform: scaleX(1); transform-origin: 0 0; }
  .hdr__logo { transition: transform var(--t) var(--ease-out); }
  .hdr__logo:hover { transform: scale(1.02) rotate(2deg); }
}
@media (max-width: 999.98px) {
  .hdr__title { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; line-height: 1.1; }
  .hdr__col:nth-child(2) { flex-direction: row-reverse; }
  .hdr__logo { width: clamp(6rem, 25vw, 12rem); margin-left: 0; }
}

/* nav bar (hero + sticky) */
.nav { height: var(--header-h); }
.nav__list { display: flex; column-gap: 2.5rem; height: 100%; }
.nav__item { position: relative; display: flex; align-items: center; height: 100%; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.nav__item:last-child { margin-left: auto; }
.nav__item::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: currentColor; transform: scaleY(0); transform-origin: 0 100%; transition: transform var(--t-fast) var(--ease); }
.nav__item.is-active::before, .nav__item:hover::before { transform: scaleY(1); }
.nav__link { display: flex; align-items: center; height: 100%; }

.sticky { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: var(--header-h); padding: 0 var(--margin); background: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: center;
  transition: transform var(--t) var(--ease), background-color var(--t-fast), color var(--t-fast), visibility 0s; }
.sticky[data-theme="light"] { --bg: var(--white); --fg: var(--black); }
.sticky[data-theme="dark"] { --bg: var(--black); --fg: var(--white); }
.sticky__title { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: -.025em; }
.sticky__title a { position: relative; display: inline-block; }
.sticky__title a::before { content: ""; position: absolute; left: 0; bottom: -.1em; width: 100%; height: max(1px, .1em); background: currentColor; transform: scaleX(0); transform-origin: 100% 0; transition: transform var(--t) var(--ease-out); }
.sticky__title a:hover::before { transform: scaleX(1); transform-origin: 0 0; }
@media (min-width: 1000px) {
  .sticky { transform: translateY(-100%); }
  html.show-sticky .sticky { transform: none; }
  .no-js .sticky { display: none; }
}
@media (max-width: 999.98px) {
  .sticky { top: auto; bottom: 0; display: block; }
  .sticky__title { display: none; }
  .sticky .nav__item { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.01em; }
  .sticky .nav__item::before { height: 4px; }
  .sticky .nav__list { column-gap: 2.5rem; }
}

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); padding-inline: var(--margin); }
.hero__col { display: flex; flex-direction: column; row-gap: .5rem; }
.hero__col:nth-child(2) { justify-content: flex-start; }
.hero__img { aspect-ratio: 5 / 3; }
.hero__intro { max-width: 19.25rem; }
.hero .nav { position: relative; z-index: 1; margin-top: -1.25rem; border-bottom: 1px solid; }
.hero__title { display: flex; flex-direction: column; margin-top: .5rem; }
.hero__line { display: flex; align-items: center; column-gap: .04em; clip-path: inset(0 0 -.15em); }
.hero__line > span { display: block; }
.hero__inline { flex-grow: 1; height: .9lh; margin-top: .05em; }
.hero__inline .pic { height: 100%; width: auto; aspect-ratio: 470 / 250; }
.hero__inline img { object-position: 45% 58%; }
.js .hero__line > span { transform: translateY(calc(100% + .2em)); }
.js.is-ready .hero__line > span { transform: none; transition: transform var(--t-slower) var(--ease-out); transition-delay: calc(var(--i, 0) * .1s + .2s); }
@media (max-width: 1199.98px) {
  .hero { display: flex; flex-direction: column-reverse; row-gap: var(--sp-xl); }
  .hero .nav { display: none; }
  .hero__intro { max-width: 22rem; font-size: var(--fs-body); }
}

/* pictures: rounded clip, cover, optional parallax */
.pic { position: relative; overflow: hidden; background: var(--placeholder); clip-path: inset(0 round var(--r-xs)); }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__img > .pic, .step__img > .pic, .hmedia__par > .pic, .hmedia__img > .pic { height: 100%; }
.pic--round { clip-path: inset(0 round var(--r-xs) var(--r-xs) var(--r-lg) var(--r-xs)); }
.pic--par img { transform: scale(1.18); will-change: transform; }
.pic--fill { position: absolute; inset: 0; }

/* ---------- engine / intro ---------- */
.intro { display: flex; flex-direction: column; row-gap: 2.5rem; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.intro__h { grid-column: 1 / 5; max-width: 27.5rem; }
.intro__tile { grid-column: 1 / 5; }
.tile { position: relative; aspect-ratio: 8 / 5; max-width: 37.5rem; clip-path: inset(0 round var(--r-xs) var(--r-xs) var(--r-lg) var(--r-xs)); background: var(--placeholder); }
.tile .pic { position: absolute; inset: 0; clip-path: none; }
.tile__btn { position: absolute; right: .5rem; bottom: .5rem; width: 4.625rem; height: 4.625rem; border-radius: 50%; background: var(--accent); color: var(--white);
  display: grid; place-items: center; transition: background-color var(--t-fast), transform var(--t) var(--ease-out); }
.tile__btn svg { width: 1.1rem; height: 1.1rem; }
.tile__btn:hover { background: var(--white); color: var(--accent); }
.intro__body { grid-column: 7 / 13; display: flex; flex-direction: column; row-gap: var(--sp-xl); padding-top: .5rem; }
.intro__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.intro__cols p { max-width: 17rem; }
@media (max-width: 999.98px) { .intro__h, .intro__tile { grid-column: 1 / 6; } }
@media (max-width: 699.98px) {
  .grid12 { grid-template-columns: 1fr; }
  .intro__h, .intro__tile, .intro__body { grid-column: 1 / -1; }
  .intro__cols { grid-template-columns: 1fr; row-gap: 0; }
  .intro__cols p { max-width: 24rem; }
}

/* ---------- WE MOVE YOU FORWARD ---------- */
.hmedia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: .1875rem; }
.hmedia__row { grid-column: 1 / -1; --p: 1; }
.hmedia__row:nth-child(1) { grid-row: 1; } .hmedia__row:nth-child(2) { grid-row: 2; } .hmedia__row:nth-child(3) { grid-row: 3; } .hmedia__row:nth-child(4) { grid-row: 4; }
.hmedia__row { clip-path: inset(-.06em -2em -.03em -2em); }
.hmedia__line { display: flex; align-items: center; column-gap: .1em; }
.js .hmedia.is-reveal .hmedia__line { animation: hm-rise .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes hm-rise { from { transform: translate3d(0, 100%, 0); } }
.hmedia__line > span { display: block; line-height: .72; padding-top: .02em; }
.hmedia__img { flex-grow: 1; height: .64em; margin-top: .04em; }
.hmedia__img .pic { height: 100%; }
.hmedia__par { grid-column: 2 / 7; grid-row: 5 / 7; margin-top: -15%; position: relative; aspect-ratio: 4 / 3; z-index: 1; }
.hmedia__side { grid-column: 10 / 12; grid-row: 3; place-self: center; text-align: center; font-size: var(--fs-small); line-height: 1.25; }
.hmedia__cap { grid-column: 7 / 9; grid-row: 5; padding-top: .5rem; font-size: var(--fs-small); }
.hmedia__txt { grid-column: 9 / -1; grid-row: 5; padding-top: .5rem; max-width: 35ch; font-size: var(--fs-small); }
@media (min-width: 1000px) {
}
@media (max-width: 1199.98px) { .hmedia__side { display: none; } }
@media (max-width: 999.98px) {
  .hmedia__row.h-huge { font-size: min(var(--fs-lg), 19vw); }
  .hmedia__par { grid-column: 1 / -1; grid-row: 6; margin-top: var(--sp-xl); }
  .hmedia__cap { grid-column: 1 / 7; grid-row: 5; }
  .hmedia__txt { grid-column: 7 / -1; grid-row: 5; }
}
@media (max-width: 699.98px) {
  .hmedia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hmedia__cap { grid-column: 1 / 3; } .hmedia__txt { grid-column: 3 / -1; }
}

/* ---------- numbered steps ---------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: var(--gutter); grid-auto-rows: 1fr; }
.step { display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.25rem; padding-top: .75rem; min-height: 23.75rem; grid-row: span 2; }
.step:nth-child(2) { grid-column: 2; grid-row: 2 / 4; }
.step__title { display: flex; column-gap: 3.75rem; width: 100%; padding-right: var(--gutter); }
.step__title .num { white-space: pre; }
.step__text { max-width: 25rem; }
.step__img { width: 100%; max-width: 21.875rem; aspect-ratio: 4.3 / 3; }
@media (max-width: 699.98px) {
  .steps { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: var(--sp-xl); }
  .step, .step:nth-child(2) { grid-column: 1; grid-row: auto; min-height: 0; }
  .step__title { column-gap: 1.5rem; }
}

/* ---------- splash ---------- */
.splash { position: relative; display: grid; clip-path: inset(0 round var(--r-xs) var(--r-xs) var(--r-lg) var(--r-lg)); color: var(--white); }
.splash__ratio { min-height: 37.5rem; }
.splash__ratio::before { content: ""; float: left; padding-top: 62.5%; }
.splash__ratio::after { content: ""; display: table; clear: both; }
.splash .pic { position: absolute; inset: 0; clip-path: none; }
.splash .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19, 19, 19, .55), rgba(19, 19, 19, .08) 60%); }
.splash__inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; row-gap: var(--sp-2xl); padding: 1rem .5rem; }
.splash__text { white-space: nowrap; }
.splash__text:first-child { margin-right: calc((100% - var(--gutter)) / 2); }
.splash__text:nth-child(2) { margin-left: calc((100% + var(--gutter)) / 2); }
@media (max-width: 999.98px) { .splash__text:first-child, .splash__text:nth-child(2) { margin: 0; } .splash__text:nth-child(2) { text-align: left; } }

/* ---------- services accordion ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); margin-block: 1.25rem var(--sp-3xl); }
.svc__top { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); margin-bottom: var(--sp-4xl); }
.svc__top p:last-child { max-width: 16.75rem; }
.svc__side { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: flex-end; }
.svc__side p { max-width: 16.75rem; }
.svc__list { grid-column: 2; }
.acc { border-top: 1px solid; }
.acc:last-child { border-bottom: 0; }
.acc__btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 1rem 0; text-align: left; cursor: pointer; transition: opacity var(--t-fast) var(--ease); }
@media (hover: hover) { .acc__btn:hover { opacity: .7; } }
.acc__q { display: flex; flex-wrap: wrap; column-gap: .25em; font-size: var(--fs-body-lg); font-weight: 600; letter-spacing: -.01em; }
.acc__q span:last-child { opacity: .55; }
.acc__ico { position: relative; flex-shrink: 0; width: 11px; height: 11px; }
.acc__ico::before, .acc__ico::after { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1.5px; background: currentColor; transition: transform var(--t) var(--ease), opacity var(--t); }
.acc__ico::after { transform: rotate(90deg); }
.acc.is-open .acc__ico::after { transform: rotate(0); opacity: 0; }
.acc__panel { overflow: hidden; }
.js .acc__panel { height: 0; transition: height var(--t) var(--ease); }
.js .acc.is-open .acc__panel { height: auto; }
.acc__panel p { padding-bottom: 1rem; max-width: 37.5rem; }
@media (max-width: 999.98px) {
  .svc { grid-template-columns: 1fr; row-gap: var(--sp-xl); }
  .svc__top, .svc__list, .svc__side { grid-column: 1; grid-row: auto; }
  .svc__top { margin-bottom: var(--sp-xl); }
  .svc__side { order: 3; }
}

/* ---------- light block: huge caption ---------- */
.lightblock { padding-block: 1.25rem; }
.huge { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding-block: var(--sp-xl); --p: 1; }
.huge__text { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.huge__text > span { display: block; line-height: .72; }
.huge__last { position: static; }
.huge__br { position: absolute; bottom: 0; line-height: .72; }
.huge__br--l { left: var(--margin); }
.huge__br--r { right: var(--margin); }
.huge__img { width: 30%; margin-block: .25rem; }
.huge__img .pic { aspect-ratio: 3 / 2; clip-path: inset(0 round var(--r-md)); }
@media (max-width: 699.98px) { .huge__img { width: 60%; } .huge__img .pic { clip-path: inset(0 round var(--r-xs)); } }

/* list (was numbers) */
.list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: var(--sp-2xl); padding-top: .75rem; margin-top: var(--sp-2xl); margin-bottom: 1.25rem; }
.list__head { display: flex; flex-direction: column; justify-content: space-between; }
.list__head p:last-child { max-width: 11rem; }
.list__inner { display: flex; flex-direction: column; row-gap: 1.25rem; }
.list__item { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.list__item:not(:first-child) { padding-top: .75rem; }
.list__item p:last-child { max-width: 18.75rem; padding-top: .3rem; }
@media (max-width: 999.98px) {
  .list { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .list__head { row-gap: 2.5rem; }
  .list__item, .list__item:first-child { padding-block: .75rem; }
  .list__item:first-child { position: relative; }
  .list__item:first-child::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: currentColor; }
}

/* push CTA */
.push { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; gap: var(--gutter); padding-top: 1rem; }
.push__visual { position: relative; overflow: hidden; background: var(--placeholder); grid-area: 1 / 1 / -1 / 2; clip-path: inset(0 round var(--r-xs) var(--r-xs) var(--r-lg) var(--r-xs)); }
.push__visual::before { content: ""; float: left; padding-top: 80%; }
.push__title { grid-area: 1 / 2 / 3 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: subgrid; column-gap: var(--gutter); padding-top: 1rem; row-gap: var(--sp-3xl); }
.push__title span:first-child { grid-area: 1 / 1 / 2 / -1; }
.push__title span:nth-child(2) { grid-area: 2 / 2 / -1 / -1; align-self: flex-end; }
.push__desc { grid-area: 1 / 2 / 3 / -1; align-self: flex-end; max-width: 15rem; position: relative; z-index: 1; }
.push__cta { grid-area: 3 / 2 / 4 / -1; --btn-h: clamp(5.625rem, 4.1033rem + 7.6087vw, 10rem); }
@media (max-width: 1199.98px) {
  .push { grid-template-rows: auto auto 1fr auto; }
  .push__title { grid-area: 1 / 1 / 2 / -1; display: flex; flex-direction: column; row-gap: 0; }
  .push__title span:nth-child(2) { align-self: auto; }
  .push__desc { grid-area: 2 / 1 / 3 / 2; margin-top: var(--sp-2xl); align-self: start; }
  .push__visual { grid-area: 3 / 1 / 4 / -1; aspect-ratio: 5 / 4; }
  .push__visual::before { display: none; }
  .push__cta { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------- buttons (label roll on hover, like the reference) ---------- */
.btn { --btn-bg: var(--accent); --btn-fg: var(--white); --btn-border: var(--accent); --btn-hbg: var(--accent-dark); --btn-hborder: var(--accent-dark);
  display: inline-flex; height: var(--btn-h, 2.5rem); border-radius: var(--btn-r, var(--r-sm)); color: var(--btn-fg); }
.btn__in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; height: 100%; padding: var(--btn-pad, 0 .75rem 0 1rem); overflow: hidden; }
.btn__in::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--btn-border); background: var(--btn-bg); border-radius: var(--btn-r, var(--r-sm));
  transition: background-color var(--t-fast), border-color var(--t-fast); }
.btn__lbl { position: relative; display: inline-block; font-size: var(--fs-body); font-weight: 500; }
.btn__lbl > span { display: inline-block; clip-path: inset(0); }
.btn__lbl::before { content: attr(data-label); position: absolute; left: 0; top: 0; clip-path: inset(0 0 100%); transform: translateY(100%); }
.btn__ico { width: .875rem; height: .875rem; flex-shrink: 0; }
@media (hover: hover) {
  .btn__lbl > span { transition: transform var(--t) var(--ease-out4), clip-path var(--t) var(--ease-out4); transition-delay: .1s; }
  .btn__lbl::before { transition: transform var(--t-slow) var(--ease-out4), clip-path var(--t-slow) var(--ease-out4); }
  .btn:hover .btn__lbl > span, .btn:focus-visible .btn__lbl > span { clip-path: inset(100% 0 0); transform: translateY(-100%); transition-delay: 0s; }
  .btn:hover .btn__lbl::before, .btn:focus-visible .btn__lbl::before { clip-path: inset(0); transform: none; transition-delay: .1s; }
  .btn:hover .btn__in::before, .btn:focus-visible .btn__in::before { background: var(--btn-hbg); border-color: var(--btn-hborder); }
}
.btn--fluid { width: 100%; --btn-pad: 0 3rem; }
.btn--fluid .btn__in { justify-content: space-between; }
.btn--sec { --btn-bg: transparent; --btn-hbg: transparent; --btn-fg: currentColor; --btn-border: color-mix(in srgb, currentColor 20%, transparent);
  --btn-hborder: color-mix(in srgb, currentColor 80%, transparent); --btn-r: var(--r-md); color: inherit; }

/* ---------- request form ---------- */
.req { padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
.req__top { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); margin-bottom: var(--sp-3xl); }
.req__top h2 { white-space: nowrap; }
.req__top p { align-self: end; max-width: 14rem; font-weight: 600; }
.req__block { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); padding-top: .75rem; padding-bottom: var(--sp-2xl); }
.req__bh { display: flex; column-gap: 3.75rem; align-items: flex-start; }
.req__fields { grid-column: 2; display: flex; flex-direction: column; row-gap: var(--sp-xl); padding-top: var(--sp-3xl); }
.field { display: flex; flex-direction: column; }
.field__label { font-size: var(--fs-small); font-weight: 700; }
.field__label em { font-style: normal; opacity: .55; margin-left: .3em; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--fs-body-lg); font-weight: 500; color: var(--fg); background: transparent; border: 0;
  border-bottom: 1px solid currentColor; border-radius: 0; padding: 1.25rem .75rem 1rem; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 7rem; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2rem; }
.field select option { color: var(--black); background: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: #8d8a8a; opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.field [aria-invalid="true"] { border-bottom-color: #ff6b6b; }
.field__err { font-size: var(--fs-small); color: #ff8a8a; min-height: 0; margin-top: .4rem; }
.field__err:empty { display: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; border: 0; padding: 0; }
.seg legend { padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 .5rem; border: 1px solid currentColor; border-radius: var(--r-sm);
  font-size: var(--fs-body); font-weight: 600; text-align: center; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.seg input:checked + span { background: var(--white); color: var(--black); border-color: var(--white); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .seg label:hover span { border-color: var(--accent); } }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req__send { grid-column: 2; display: flex; flex-direction: column; row-gap: 1rem; }
.req__send .btn { --btn-h: clamp(4.5rem, 3.5rem + 4vw, 7.5rem); }
.req__note { font-size: var(--fs-small); opacity: .7; max-width: 32rem; }
.req__note a { text-decoration: underline; }
.req__status { font-size: var(--fs-body-lg); line-height: 1.25; max-width: 36rem; }
.req__status:empty { display: none; }
.req__status a { text-decoration: underline; }
.req__status.is-ok { color: #b7f5c4; }
.req__status.is-err { color: #ffb4b4; }
.btn[disabled] { opacity: .5; pointer-events: none; }
@media (max-width: 999.98px) {
  .req__top, .req__block { grid-template-columns: 1fr; }
  .req__top { row-gap: var(--sp-xl); }
  .req__fields, .req__send { grid-column: 1; padding-top: var(--sp-xl); }
  .seg { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- pre-footer: halftone caption with a spotlight ---------- */
.pre { position: relative; overflow: hidden; margin-bottom: calc(-1 * var(--sp-3xl)); --p: .5; }
.pre__inner { display: flex; align-items: center; will-change: transform; }
.half { position: relative; width: 100%; display: flex; justify-content: center; padding-block: var(--sp-4xl); background: var(--black); overflow: hidden; --mx: 50%; --my: 50%; --dot: 2px; }
.half__title { text-align: center; color: #7a7676; padding-block: 1.25rem; }
.half__title > span { display: block; line-height: .72; }
.half__dots { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: url("../img/dot-5x7.png") 0 0 / 5px 7px repeat; }
.half__spot { position: absolute; left: 0; top: 0; width: 800px; height: 800px; margin: -400px 0 0 -400px; pointer-events: none; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(254, 254, 254, .42), rgba(254, 254, 254, 0)); opacity: 0; transition: opacity var(--t); will-change: transform; transform: translate3d(50vw, 50%, 0); }
.half:hover .half__spot { opacity: 1; }
.half::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 100px 20px var(--black); }
.pre__content { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-content: center; align-items: start; padding-inline: var(--margin); }
.pre__left { grid-column: 5 / 7; }
.pre__right { grid-column: 7 / 9; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-xl); }
.pre__right p { max-width: 14ch; }
@media (min-width: 700px) {
  .pre__inner { margin-top: calc(-1 * var(--sp-3xl)); min-height: calc(100svh + 2 * var(--sp-3xl)); }
}
@media (max-width: 699.98px) {
  .pre__inner { flex-direction: column; justify-content: center; padding-bottom: var(--sp-4xl); }
  .half { --dot: 1px; padding-block: var(--sp-xl); }
  .half__title { color: #8a8686; }
  .half__dots { background-image: url("../img/dot-3x4.png"); background-size: 3px 4px; }
  .half__spot { display: none; }
  .pre__content { position: relative; background: var(--black); grid-template-columns: 1fr 1fr; }
  .pre__left { grid-column: 1; } .pre__right { grid-column: 2; }
}

/* ---------- footer ---------- */
.ftr { position: relative; color: var(--gray); overflow: hidden; background: var(--black); --p: 0; }
.ftr__wrap { padding-top: var(--sp-2xl); }
@media (min-width: 1000px) { .ftr__wrap { clip-path: inset(0 var(--margin) var(--margin) var(--margin) round 0 0 var(--r-sm) var(--r-sm)); } }
.ftr__rails { margin-inline: -5%; }
.rail { display: block; overflow: hidden; background: var(--accent); border-block: 1px solid; padding-block: .5rem; }
.ftr__rail:first-child { transform-origin: 100% 0; transform: rotate(-1.5deg); }
.ftr__rail:nth-child(2) { transform-origin: 0 0; margin-top: clamp(-5.625rem, .2717rem + -7.6087vw, -1.25rem); transform: rotate(1.3deg); position: relative; }
.rail__track { display: flex; align-items: center; white-space: nowrap; width: max-content; will-change: transform; }
.rail__pat { display: flex; align-items: center; gap: clamp(1.25rem, .7283rem + 2.6087vw, 2.75rem); padding-right: clamp(1.25rem, .2935rem + 4.7826vw, 4rem); }
.rail__word { font-family: var(--font-cond); font-weight: 900; font-size: var(--fs-md); text-transform: uppercase; line-height: .8; padding-top: .04em; letter-spacing: -.01em; }
.rail__stamp { width: clamp(5rem, 1.5217rem + 17.3913vw, 15rem); --logo-knock: var(--accent); }
.rail__stamp .stamp { width: 100%; height: auto; }
.rail__note { font-size: var(--fs-body); font-weight: 600; text-transform: uppercase; line-height: 1.15; text-align: center; }
.ftr__inner { background: var(--accent); padding: clamp(2.5rem, 1.6304rem + 4.3478vw, 5rem) var(--margin) var(--margin); }
.ftr__loc { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); margin-block: var(--sp-2xl); }
@media (min-width: 1000px) { .ftr__loc { padding-left: calc((100% + var(--gutter)) / 12 * 4); } }
.ftr__addr { display: flex; flex-direction: column; align-items: flex-start; row-gap: 1rem; }
.ftr__addr a, .ftr__addr span.muted { opacity: .7; transition: opacity var(--t-fast); }
.ftr__addr a:hover { opacity: 1; }
.ftr__main { display: grid; }
.ftr__col { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; row-gap: var(--sp-md); min-height: clamp(6.875rem, 5.788rem + 5.4348vw, 10rem); }
.ftr__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); width: 100%; }
.ftr__head p:last-child { opacity: .7; max-width: 15rem; text-wrap: balance; }
.ftr__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.ftr__btns .btn { --btn-h: 2.5rem; }
.ftr__legal { font-size: var(--fs-small); line-height: 1.45; opacity: .85; }
.ftr__bottom { display: grid; align-items: center; column-gap: var(--gutter); padding-block: 1.25rem; justify-items: start; font-size: var(--fs-small); }
.ftr__bottom a { position: relative; display: inline-block; }
.ftr__bottom a::before { content: ""; position: absolute; left: 0; bottom: -.1em; width: 100%; height: max(1px, .1em); background: currentColor; transform: scaleX(0); transform-origin: 100% 0; transition: transform var(--t) var(--ease-out); }
.ftr__bottom a:hover::before { transform: scaleX(1); transform-origin: 0 0; }
.ftr__bcol { display: flex; gap: 1.5rem; flex-wrap: wrap; }
@media (min-width: 1000px) {
  .ftr__main { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); padding-block: .75rem; position: relative; }
  .ftr__main::before, .ftr__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: currentColor; }
  .ftr__col { padding-right: var(--margin); }
  .ftr__col:first-child { padding-left: var(--margin); }
  .ftr__col:not(:last-child) { border-right: 1px solid; }
  .ftr__bottom { grid-template-columns: repeat(3, 1fr); position: relative; }
  .ftr__bcol:first-child { padding-left: var(--margin); }
  .ftr__bcol:last-child { width: 100%; padding-right: var(--margin); justify-content: space-between; }
}
@media (max-width: 999.98px) {
  .ftr { padding-bottom: var(--header-h); }
  .ftr__main { row-gap: 1.5rem; padding-bottom: 1.25rem; }
  .ftr__col { padding-top: .5rem; border-top: 1px solid; }
  .ftr__bottom { grid-template-columns: 1fr; row-gap: .75rem; }
}

/* ---------- contact panel (modal) ---------- */
.modal { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; transition: visibility 0s var(--t); }
.modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.modal__bg { position: absolute; inset: 0; background: rgba(19, 19, 19, .2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity var(--t-fast); }
.modal.is-open .modal__bg { opacity: 1; }
.modal__close { position: absolute; top: var(--margin); right: var(--margin); z-index: 2; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; color: var(--white); border-radius: 50%; }
.modal__close svg { width: 1.75rem; height: 1.75rem; transition: transform var(--t) var(--ease-out); }
.modal__close:hover svg { transform: rotate(90deg); }
.modal__wrap { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; padding: var(--margin); pointer-events: none; }
.modal__nav { width: calc((100% - var(--gutter)) / 2); }
.modal__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--margin); }
.card { pointer-events: auto; display: flex; flex-direction: column; justify-content: space-between; min-height: 21rem; padding: .25rem; border-radius: var(--r-sm); background: var(--accent); color: var(--white);
  transform: translate3d(0, calc(100% + var(--margin)), 0); transition: transform 0s; }
.modal.is-open .card { transform: none; transition: transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.card__head { display: grid; grid-template-columns: 1fr 2fr; column-gap: var(--gutter); padding-bottom: 2.5rem; }
.card__head p:last-child { text-align: right; font-weight: 700; }
.card__links { display: flex; flex-direction: column; row-gap: .25rem; }
.card__link { display: flex; justify-content: space-between; align-items: flex-end; min-height: 4.1rem; padding: .5rem; border-radius: var(--r-xs); background: rgba(19, 19, 19, .2);
  transition: background-color var(--t-fast), color var(--t-fast); font-size: var(--fs-body); }
.card__link svg { width: .875rem; height: .875rem; }
@media (hover: hover) { .card__link:hover { background: var(--white); color: var(--accent); } }
@media (max-width: 1399.98px) {
  .modal__nav { width: 100%; max-width: 30rem; }
  .modal__list { grid-template-columns: 1fr; }
  .card { min-height: 0; transform: translate3d(calc(100% + var(--margin) * 2), 0, 0); }
  .card__head { padding-bottom: 5.5rem; }
}
@media (max-width: 999.98px) { .modal__wrap { padding-bottom: calc(var(--header-h) + var(--margin)); } }

/* ---------- cookie notice ---------- */
.cookie { position: fixed; z-index: 90; right: var(--margin); bottom: var(--margin); max-width: 22rem; display: flex; align-items: center; gap: 1rem; padding: .75rem .75rem .75rem 1rem;
  border-radius: var(--r-sm); background: var(--black); color: var(--white); border: 1px solid rgba(254, 254, 254, .2); font-size: var(--fs-small); line-height: 1.35; }
.cookie[hidden] { display: none; }
.cookie a { text-decoration: underline; }
.cookie .btn { --btn-h: 2.25rem; flex-shrink: 0; }
@media (max-width: 999.98px) { .cookie { left: var(--margin); right: var(--margin); max-width: none; bottom: calc(var(--header-h) + var(--margin)); } }

/* ---------- legal pages ---------- */
.legal { padding: var(--sp-xl) var(--margin) var(--sp-3xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.legal__head { grid-column: 1 / -1; margin-bottom: var(--sp-2xl); padding-top: .75rem; }
.legal__body { grid-column: 7 / 13; font-size: var(--fs-body-lg); line-height: 1.45; font-weight: 450; }
.legal__body h2 { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin: 2.5rem 0 .9rem; }
.legal__body p, .legal__body ul, .legal__body dl { margin-bottom: 1rem; }
.legal__body ul { list-style: disc; padding-left: 1.2rem; }
.legal__body li { margin-bottom: .45rem; }
.legal__body a { text-decoration: underline; text-underline-offset: .15em; }
.legal__body dl div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: .6rem 0; border-top: 1px solid rgba(254, 254, 254, .2); }
.legal__body dt { opacity: .65; }
.legal__body code { font-size: .9em; }
.legal__upd { font-size: var(--fs-body); opacity: .65; }
.legal__side { grid-column: 1 / 5; position: relative; }
.legal__side p { position: sticky; top: calc(var(--header-h) + 1rem); max-width: 18rem; opacity: .65; }
@media (max-width: 999.98px) {
  .legal { grid-template-columns: 1fr; }
  .legal__body, .legal__side { grid-column: 1; }
  .legal__side { margin-bottom: var(--sp-lg); }
  .legal__body dl div { grid-template-columns: 1fr; gap: .2rem; }
}
.nf { min-height: 60vh; padding: var(--sp-xl) var(--margin) var(--sp-3xl); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xl); }
.nf p { max-width: 24rem; }

/* ---------- reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .hero__line > span { transform: none; }
  .js .rule::before { transform: scaleX(1); }
  .js .hmedia__line { animation: none !important; }
  .pic--par img { transform: none !important; }
  .js .cover { display: none; }
}