:root {
  --pink:#df1652;
  --pink-dark:#b90f40;
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --surface:#f5f5f7;
  --line:#dedee3;
  --radius:28px;
  --shell:1240px;
  --ease:cubic-bezier(.2,.7,.2,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}

body {
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.5
}

body.modal-open {
  overflow:hidden
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

img {
  display:block;
  max-width:100%
}

button {
  color:inherit
}

button:disabled {
  opacity:.3;
  cursor:default
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #0b6bd3;
  outline-offset:5px
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  line-height:1.06;
  letter-spacing:-.045em
}

h2 {
  font-size:clamp(32px,3.15vw,46px);
  font-weight:650;
  margin-bottom:20px
}

h3 {
  font-size:25px;
  font-weight:650
}

p {
  margin-bottom:20px
}

button {
  border:0
}

.section-shell {
  width:min(var(--shell),calc(100% - 96px));
  margin-inline:auto
}

.section-pad {
  padding-block:86px
}

.muted {
  color:var(--muted)
}

.accent {
  color:var(--pink)
}

.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.5;
  margin-bottom:18px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50px;
  background:var(--pink);
  color:white;
  padding:14px 25px;
  min-height:48px;
  font-size:15px;
  font-weight:600;
  transition:background .2s,transform .2s;
  line-height:1.3
}

.button:hover {
  background:var(--pink-dark);
  transform:translateY(-2px)
}

.button.small {
  font-size:13px;
  min-height:37px;
  padding:10px 18px
}

.button.white {
  background:#fff;
  color:var(--ink)
}

.button.white:hover {
  background:#eee
}

.text-link {
  font-size:15px;
  font-weight:600;
  color:var(--pink);
  display:inline-flex;
  align-items:center;
  gap:12px
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.round {
  width:42px;
  height:42px;
  border-radius:50%;
  background:#e9e9ec;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  line-height:1;
  transition:background .2s,transform .2s
}

.round:hover:not(:disabled) {
  background:#d5d5db;
  transform:scale(1.05)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  padding:15px;
  background:white;
  z-index:100
}

.skip-link:focus {
  top:8px
}

.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.87);
  backdrop-filter:blur(20px);
  border-bottom:1px solid #e8e8ec
}

.nav-shell {
  width:min(var(--shell),calc(100% - 96px));
  margin:auto;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}

.logo {
  flex-shrink:0
}

.logo img {
  object-fit:contain
}

.site-header nav {
  display:flex;
  gap:30px;
  align-items:center
}

.site-header nav a {
  font-size:14px;
  transition:color .2s
}

.site-header nav a:hover {
  color:var(--pink)
}

.scroll-progress {
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:2px;
  background:var(--pink);
  transform:scaleX(0);
  transform-origin:left
}

.menu-toggle {
  display:none
}

.announcement {
  text-align:center;
  background:white;
  padding:13px 20px;
  font-size:13px;
  color:#4f4f55
}

.announcement a {
  color:var(--pink);
  white-space:nowrap;
  margin-left:6px
}

.hero {
  padding-top:62px
}

.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px
}

.hero h1 {
  font-size:clamp(54px,6vw,86px);
  font-weight:700;
  line-height:.99;
  letter-spacing:-.062em;
  margin-bottom:0
}

.hero h1 span {
  color:var(--pink)
}

.hero-aside {
  max-width:330px;
  padding-top:22px
}

.hero-aside>p:first-child {
  font-size:21px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
  margin-bottom:12px
}

.hero-aside .muted {
  font-size:16px;
  line-height:1.55;
  margin-bottom:19px
}

.category-strip {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:42px 0 32px;
  overflow-x:auto;
  scrollbar-width:none
}

.category-strip::-webkit-scrollbar {
  display:none
}

.category {
  background:none;
  min-width:106px;
  padding:4px 0 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition:transform .25s
}

.category:hover {
  transform:translateY(-5px)
}

.category img {
  width:48px;
  height:48px;
  object-fit:contain
}

.category span {
  font-size:12px;
  font-weight:600;
  white-space:nowrap
}

.hero-gallery {
  display:grid;
  grid-template-columns:1.12fr 1fr 1fr;
  gap:20px
}

.feature {
  position:relative;
  isolation:isolate;
  height:460px;
  border-radius:var(--radius);
  overflow:hidden;
  text-align:left;
  padding:0;
  transition:transform .5s var(--ease),box-shadow .5s;
  background:#e6e6eb
}

.feature:hover {
  transform:translateY(-7px);
  box-shadow:0 18px 32px #16161d1c
}

.feature>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease)
}

.feature:hover>img {
  transform:scale(1.045)
}

.feature-copy {
  position:absolute;
  left:30px;
  top:30px;
  z-index:2
}

.feature-copy .eyebrow {
  font-size:10px;
  letter-spacing:.11em;
  display:block;
  margin-bottom:12px
}

.feature h2 {
  font-size:41px;
  line-height:1.01;
  margin:0
}

.feature-dark,.feature-blue {
  color:white
}

.feature-dark:after,.feature-blue:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0008,transparent 65%,#0009);
  z-index:1;
  pointer-events:none
}

.feature-dark>img {
  object-position:center 70%
}

.feature-pink {
  background:#f7dce5;
  color:#a7113e
}

.feature-pink .feature-product {
  position:absolute;
  left:0;
  top:130px;
  height:300px;
  object-fit:contain;
  padding:14px
}

.feature-pink .feature-copy {
  z-index:3
}

.feature-bottom {
  position:absolute;
  bottom:24px;
  left:26px;
  right:22px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
  font-weight:600
}

.circle-plus {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ffffffde;
  color:var(--ink);
  border-radius:50%;
  width:31px;
  height:31px;
  flex-shrink:0;
  font-size:24px;
  font-weight:400
}

.feature-blue>img {
  object-position:center 60%
}

.hero-caption {
  display:flex;
  justify-content:space-between;
  padding-top:21px;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--muted)
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:32px
}

.section-heading h2 {
  margin-bottom:0
}

.section-heading>p {
  color:var(--muted);
  font-size:16px;
  margin-bottom:4px;
  max-width:360px
}

.slider-controls {
  display:flex;
  gap:10px
}

.services-section {
  padding-top:100px;
  padding-bottom:50px
}

.services-track {
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px max(48px,calc((100vw - var(--shell))/2)) 28px;
  scrollbar-width:none;
  overscroll-behavior-x:contain
}

.services-track::-webkit-scrollbar {
  display:none
}

.service-card {
  flex:0 0 340px;
  height:470px;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-margin-left:48px;
  background:white;
  box-shadow:0 6px 18px #00000008;
  transition:transform .3s
}

.service-card:hover {
  transform:translateY(-5px)
}

.card-copy {
  padding:28px;
  position:relative;
  z-index:2;
  pointer-events:none
}

.card-copy .eyebrow {
  font-size:10px;
  letter-spacing:.07em;
  margin-bottom:10px
}

.card-copy h3 {
  font-size:29px;
  max-width:285px;
  margin-bottom:13px
}

.card-copy>p:last-child {
  font-size:13px
}

.service-card>img {
  position:absolute;
  bottom:0;
  width:100%;
  height:270px;
  object-fit:contain;
  padding:15px 28px 28px
}

.service-card.pink {
  background:#f7e3eb
}

.service-card.dark {
  background:#1c1c1e;
  color:white
}

.service-card.dark>img,.service-card.blue>img {
  height:100%;
  padding:0;
  object-fit:cover
}

.service-card.dark:after,.service-card.blue:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(#000a,transparent 80%);
  pointer-events:none
}

.service-card.blue {
  color:white;
  background:#167ac6
}

.service-card.light {
  background:white
}

.service-card.light>img {
  height:270px
}

.service-card .more {
  position:absolute;
  bottom:20px;
  right:20px;
  z-index:3;
  background:#252529;
  color:white;
  width:35px;
  height:35px;
  font-size:25px
}

.service-card.dark .more,.service-card.blue .more {
  background:#f5f5f7;
  color:var(--ink)
}

.catalog-note {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  color:var(--muted)
}

.catalog-note p {
  margin:0
}

.strategy {
  padding-top:70px
}

.strategy-panel {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  border-radius:32px;
  background:#19191d;
  color:white;
  overflow:hidden;
  min-height:520px
}

.strategy-copy {
  padding:55px 45px
}

.strategy-copy .eyebrow {
  font-size:11px;
  color:#c5c5cb
}

.strategy-copy h2 {
  font-size:48px;
  line-height:1.07
}

.strategy-copy h2 em {
  font-style:normal;
  color:#ff77a0
}

.strategy-copy>p:not(.eyebrow) {
  color:#ceced3;
  max-width:350px;
  line-height:1.6;
  margin:25px 0
}

.strategy-image {
  position:relative;
  overflow:hidden;
  min-height:420px
}

.strategy-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.strategy-image:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#19191d 0%,transparent 35%,#0002),linear-gradient(0deg,#000b,transparent 40%)
}

.image-caption {
  position:absolute;
  z-index:1;
  bottom:35px;
  left:35px;
  right:35px;
  font-size:17px;
  font-weight:500;
  max-width:310px
}

.strategy-benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  padding:40px 10px 55px;
  border-bottom:1px solid var(--line)
}

.strategy-benefits article>span {
  color:var(--pink);
  font-size:13px;
  font-weight:700
}

.strategy-benefits h3 {
  font-size:21px;
  margin:12px 0
}

.strategy-benefits p {
  font-size:15px;
  color:var(--muted);
  margin:0
}

.process {
  padding-top:65px
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  padding-top:20px
}

.process-grid article {
  border-top:2px solid var(--pink);
  padding-top:18px
}

.process-grid span {
  font-size:42px;
  color:#9b9ba3;
  font-weight:300;
  letter-spacing:-.06em
}

.process-grid h3 {
  margin:19px 0 8px;
  font-size:23px
}

.process-grid p {
  font-size:14px;
  color:var(--muted);
  margin:0
}

.details-section {
  background:white
}

.filters {
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:3px 3px 22px
}

.filter {
  padding:10px 20px;
  white-space:nowrap;
  background:var(--surface);
  font-size:14px;
  border-radius:30px;
  border:1px solid transparent
}

.filter.active {
  background:var(--ink);
  color:white
}

.filter:hover:not(.active) {
  border-color:var(--line)
}

.products-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.product {
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:22px;
  border-radius:22px;
  background:var(--surface);
  transition:background .3s,transform .3s;
  min-width:0
}

.product:hover {
  background:#fae7ee;
  transform:translateY(-4px)
}

.product[hidden] {
  display:none
}

.product img {
  height:180px;
  width:100%;
  object-fit:contain;
  padding:6px 8px 20px;
  transition:transform .4s
}

.product:hover img {
  transform:scale(1.04)
}

.product-category {
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px
}

.product strong {
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.025em
}

.product-link {
  font-size:12px;
  color:var(--pink);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-top:auto
}

.product-link>span {
  font-size:17px;
  line-height:1
}

.about-head {
  max-width:850px;
  text-align:center;
  margin:0 auto 46px
}

.about-head h2 {
  font-size:clamp(38px,4.4vw,64px)
}

.about-head>p:last-child {
  font-size:19px;
  line-height:1.65;
  color:var(--muted);
  max-width:750px;
  margin:auto
}

.about-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:24px
}

.experience {
  background:var(--pink);
  color:white;
  border-radius:var(--radius);
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.big-number {
  font-size:clamp(100px,12vw,174px);
  font-weight:650;
  letter-spacing:-.09em;
  line-height:1.2
}

.big-number>span {
  font-size:.55em;
  vertical-align:top;
  line-height:1.8;
  letter-spacing:-.06em
}

.experience h3 {
  font-size:29px;
  line-height:1.18;
  max-width:310px;
  margin-top:15px
}

.experience p {
  font-size:16px;
  color:#ffe1ea;
  margin-top:20px
}

.leadership {
  padding:44px;
  background:white;
  border-radius:var(--radius)
}

.leadership h3 {
  font-size:36px
}

.leader {
  display:flex;
  align-items:center;
  gap:16px;
  margin:25px 0
}

.leader-monogram {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f9e0e9;
  color:var(--pink);
  font-size:21px;
  width:64px;
  height:64px;
  border-radius:50%;
  flex-shrink:0;
  letter-spacing:-.05em
}

.leader strong {
  font-size:19px
}

.leader p {
  font-size:13px;
  color:var(--muted);
  margin:4px 0 0
}

.leadership ul {
  padding-left:18px;
  font-size:14px;
  line-height:1.6
}

.leadership li {
  padding-left:5px;
  margin-bottom:8px
}

.leadership li::marker {
  color:var(--pink)
}

.career {
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:20px;
  margin:22px 0 0
}

.clients {
  padding-top:35px
}

.clients-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden
}

.client {
  height:126px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:var(--surface)
}

.client img {
  width:150px;
  height:65px;
  object-fit:contain;
  opacity:1;
  transition:transform .3s ease
}

.client:hover img {
  transform:scale(1.08)
}

.client-text {
  font-family:Georgia,serif;
  font-size:26px;
  line-height:1;
  text-align:center
}

.maintenance {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:var(--radius);
  overflow:hidden;
  background:white;
  margin-bottom:85px
}

.maintenance>div {
  padding:40px
}

.maintenance h2 {
  font-size:34px
}

.maintenance p:not(.eyebrow) {
  max-width:410px;
  color:var(--muted);
  font-size:15px
}

.maintenance>img {
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:310px
}

.contact {
  background:var(--pink);
  color:white
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}

.contact-copy .eyebrow {
  font-size:10px
}

.contact-copy h2 {
  font-size:clamp(70px,8vw,112px);
  letter-spacing:-.07em;
  line-height:.98
}

.contact-copy>p:not(.eyebrow) {
  font-size:23px;
  line-height:1.4;
  margin-top:30px;
  color:#ffe2eb
}

.contact-phone {
  display:block;
  font-size:28px;
  letter-spacing:-.02em;
  font-weight:500;
  margin:45px 0 8px
}

.contact-phone:hover {
  text-decoration:underline
}

.contact-location {
  font-size:14px
}

.brief-form {
  padding:35px;
  background:white;
  color:var(--ink);
  border-radius:var(--radius)
}

.brief-form h3 {
  font-size:27px;
  margin-bottom:10px
}

.brief-form>p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:23px
}

.brief-form label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:7px
}

.brief-form input,.brief-form select,.brief-form textarea {
  display:block;
  width:100%;
  border:1px solid #d6d6db;
  border-radius:10px;
  padding:12px;
  background:#fafafb;
  color:var(--ink);
  font-size:15px;
  margin-bottom:16px;
  resize:vertical
}

.brief-form input:focus,.brief-form select:focus,.brief-form textarea:focus {
  outline:2px solid var(--pink);
  outline-offset:1px
}

.brief-form .button {
  width:100%;
  font-size:14px
}

.brief-form .form-note {
  font-size:11px;
  margin:13px 0 0;
  line-height:1.6
}

.brief-form #form-result {
  padding-top:20px;
  border-top:1px solid var(--line);
  margin-top:20px
}

.brief-form #form-result p {
  font-size:14px;
  color:var(--pink);
  margin-bottom:10px
}

.footer {
  padding-block:40px 24px
}

.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:30px
}

.footer-top p {
  margin:0;
  font-size:17px;
  letter-spacing:-.02em
}

.footer-top>a:last-child {
  font-size:13px;
  color:var(--muted)
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:22px;
  font-size:12px;
  color:var(--muted)
}

dialog {
  border:0;
  border-radius:28px;
  padding:0;
  width:min(920px,calc(100% - 32px));
  max-height:90dvh;
  overflow:auto;
  color:var(--ink);
  box-shadow:0 35px 100px #0005
}

dialog::backdrop {
  background:#101016a6;
  backdrop-filter:blur(8px)
}

.dialog-close {
  position:absolute;
  right:16px;
  top:16px;
  z-index:4
}

.dialog-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  min-height:540px
}

.dialog-visual {
  background:#f4e6ed;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.dialog-visual img {
  width:100%;
  max-height:600px;
  object-fit:contain;
  padding:25px
}

.dialog-visual.photo img {
  padding:0;
  height:100%;
  object-fit:cover;
  max-height:none
}

.dialog-content {
  padding:65px 40px 40px
}

.dialog-content h2 {
  font-size:35px
}

.dialog-content>p:not(.eyebrow) {
  font-size:16px;
  color:var(--muted)
}

.dialog-content ul {
  padding-left:20px;
  margin:25px 0;
  line-height:1.6;
  font-size:15px
}

.dialog-content li {
  padding-left:4px;
  margin-bottom:9px
}

.dialog-content li::marker {
  color:var(--pink)
}

.reveal {
  opacity:1
}

.motion-enabled .reveal.pending {
  opacity:0;
  transform:translateY(25px)
}

.motion-enabled .reveal {
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}

@media(min-width:1500px) {
  .service-card {
    scroll-margin-left:calc((100vw - var(--shell))/2)
  }

}

@media(max-width:1100px) {
  .section-shell,.nav-shell {
    width:calc(100% - 56px)
  }

  .site-header nav {
    gap:18px
  }

  .site-header nav a {
    font-size:12px
  }

  .hero h1 {
    font-size:68px
  }

  .hero-top {
    gap:24px
  }

  .hero-aside {
    max-width:280px
  }

  .hero-gallery {
    gap:14px
  }

  .feature {
    height:425px
  }

  .feature h2 {
    font-size:34px
  }

  .feature-copy {
    left:24px;
    top:26px
  }

  .feature-bottom {
    left:22px;
    font-size:11px;
    gap:8px
  }

  .services-track {
    padding-inline:28px
  }

  .service-card {
    scroll-margin-left:28px
  }

  .strategy-copy {
    padding:40px 30px
  }

  .strategy-copy h2 {
    font-size:40px
  }

  .contact-grid {
    gap:40px
  }

  .products-grid {
    gap:14px
  }

  .product {
    padding:18px
  }

  .product img {
    height:155px
  }

  .experience {
    padding:34px
  }

  .leadership {
    padding:34px
  }

  .category-strip {
    gap:18px
  }

  .category {
    min-width:96px
  }

}

@media(max-width:800px) {
  .site-header nav {
    gap:15px
  }

  .site-header nav a {
    font-size:11px
  }

  .site-header .button.small {
    font-size:11px;
    padding:10px 12px
  }

  .nav-shell {
    gap:15px
  }

  .hero-top {
    align-items:flex-start
  }

  .hero h1 {
    font-size:58px
  }

  .hero-aside {
    max-width:250px
  }

  .hero-aside>p:first-child {
    font-size:18px
  }

  .hero-aside .muted {
    font-size:14px
  }

  .hero-aside .text-link {
    font-size:13px
  }

  .hero-gallery {
    grid-template-columns:repeat(3,300px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:18px;
    scrollbar-width:none
  }

  .feature {
    scroll-snap-align:start;
    height:420px
  }

  .hero-caption {
    font-size:9px
  }

  .hero-caption span:last-child {
    display:none
  }

  .products-grid {
    grid-template-columns:repeat(3,1fr)
  }

  .strategy-panel {
    grid-template-columns:1fr
  }

  .strategy-copy {
    padding:38px
  }

  .strategy-copy h2 {
    font-size:48px
  }

  .strategy-image {
    height:340px;
    min-height:0
  }

  .strategy-image img {
    object-position:center 50%
  }

  .strategy-image:after {
    background:linear-gradient(0deg,#0009,transparent 50%)
  }

  .strategy-benefits {
    gap:24px
  }

  .section-heading {
    align-items:flex-start
  }

  .section-heading>p {
    max-width:240px;
    font-size:14px
  }

  .about-grid {
    grid-template-columns:.8fr 1.2fr;
    gap:18px
  }

  .experience h3 {
    font-size:23px
  }

  .leadership {
    padding:28px
  }

  .leadership h3 {
    font-size:29px
  }

  .leader {
    gap:10px
  }

  .leader-monogram {
    width:48px;
    height:48px
  }

  .leader p {
    font-size:12px
  }

  .clients-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .maintenance>div {
    padding:30px
  }

  .maintenance h2 {
    font-size:28px
  }

  .contact-grid {
    gap:25px
  }

  .contact-copy h2 {
    font-size:70px
  }

  .brief-form {
    padding:26px
  }

  .contact-copy>p:not(.eyebrow) {
    font-size:20px
  }

  .contact-phone {
    font-size:24px
  }

  .dialog-content {
    padding:65px 28px 30px
  }

  .dialog-content h2 {
    font-size:30px
  }

}

@media(max-width:650px) {
  html {
    scroll-padding-top:82px
  }

  .section-shell,.nav-shell {
    width:calc(100% - 40px)
  }

  .section-pad {
    padding-block:58px
  }

  .nav-shell {
    height:66px;
    gap:10px
  }

  .logo img {
    width:91px;
    height:auto
  }

  .site-header .button.small {
    margin-left:auto;
    font-size:11px;
    padding:9px 12px;
    min-height:34px
  }

  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    align-items:center;
    justify-content:center;
    background:none;
    width:38px;
    height:38px;
    order:3
  }

  .menu-toggle span {
    height:1.5px;
    width:21px;
    background:var(--ink);
    transition:transform .2s
  }

  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(3.25px) rotate(45deg)
  }

  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-3.25px) rotate(-45deg)
  }

  .site-header nav {
    display:none;
    position:absolute;
    top:66px;
    left:0;
    right:0;
    padding:25px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 15px 20px #0001
  }

  .site-header nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:23px
  }

  .site-header nav a {
    font-size:18px
  }

  .announcement {
    font-size:11px;
    line-height:1.8;
    padding:10px 22px
  }

  .announcement a {
    display:inline-block
  }

  .hero {
    padding-top:38px
  }

  .hero-top {
    display:block
  }

  .hero h1 {
    font-size:clamp(46px,10.8vw,68px);
    letter-spacing:-.06em
  }

  .hero .eyebrow {
    font-size:10px;
    margin-bottom:14px
  }

  .hero-aside {
    max-width:100%;
    padding-top:25px
  }

  .hero-aside>p:first-child {
    font-size:18px;
    margin-bottom:8px
  }

  .hero-aside>p:first-child br {
    display:none
  }

  .hero-aside .muted {
    font-size:15px;
    max-width:340px;
    margin-bottom:13px
  }

  .hero-aside .text-link {
    font-size:14px
  }

  .category-strip {
    padding-top:30px;
    padding-bottom:20px;
    gap:17px
  }

  .category {
    min-width:87px;
    gap:10px
  }

  .category img {
    width:40px;
    height:40px
  }

  .category span {
    font-size:10px
  }

  .hero-gallery {
    grid-template-columns:repeat(3,84%);
    gap:14px;
    margin-right:-20px;
    padding-right:20px
  }

  .feature {
    height:405px;
    border-radius:23px
  }

  .feature h2 {
    font-size:37px
  }

  .feature-copy {
    left:24px;
    top:26px
  }

  .feature .eyebrow {
    font-size:10px
  }

  .feature-bottom {
    font-size:12px
  }

  .feature-pink .feature-product {
    top:120px;
    height:280px
  }

  .hero-caption {
    padding-top:6px;
    font-size:8px;
    letter-spacing:.06em
  }

  .section-heading {
    gap:15px;
    margin-bottom:24px
  }

  .section-heading h2 {
    font-size:30px;
    line-height:1.12
  }

  .section-heading .eyebrow {
    font-size:9px
  }

  .section-heading>p {
    display:none
  }

  .slider-controls {
    gap:7px;
    align-self:flex-end
  }

  .slider-controls .round {
    width:32px;
    height:32px;
    font-size:25px
  }

  .services-section {
    padding-top:62px;
    padding-bottom:30px
  }

  .services-track {
    gap:16px;
    padding-inline:20px
  }

  .service-card {
    flex-basis:82vw;
    max-width:340px;
    height:450px;
    scroll-margin-left:20px
  }

  .card-copy h3 {
    font-size:29px
  }

  .catalog-note {
    display:block;
    font-size:13px
  }

  .catalog-note .text-link {
    margin-top:12px;
    font-size:13px
  }

  .strategy {
    padding-top:40px
  }

  .strategy-panel {
    border-radius:24px
  }

  .strategy-copy {
    padding:30px 24px
  }

  .strategy-copy .eyebrow {
    font-size:9px
  }

  .strategy-copy h2 {
    font-size:38px
  }

  .strategy-copy>p:not(.eyebrow) {
    font-size:15px;
    margin:20px 0
  }

  .strategy-image {
    height:280px
  }

  .image-caption {
    font-size:14px;
    left:24px;
    bottom:24px;
    right:24px
  }

  .strategy-benefits {
    grid-template-columns:1fr;
    padding:30px 0;
    gap:25px
  }

  .strategy-benefits article {
    position:relative;
    padding-left:40px
  }

  .strategy-benefits article>span {
    position:absolute;
    left:0;
    top:4px
  }

  .strategy-benefits h3 {
    margin:0 0 9px
  }

  .strategy-benefits p {
    font-size:14px
  }

  .process {
    padding-top:38px
  }

  .process-grid {
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
    padding-top:8px
  }

  .process-grid span {
    font-size:35px
  }

  .process-grid h3 {
    font-size:21px;
    margin-top:10px
  }

  .process-grid p {
    font-size:13px
  }

  .filters {
    gap:8px
  }

  .filter {
    font-size:12px;
    padding:9px 15px
  }

  .products-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }

  .product {
    padding:15px;
    border-radius:18px
  }

  .product img {
    height:150px;
    padding:0 0 15px
  }

  .product strong {
    font-size:15px
  }

  .product-category {
    font-size:10px
  }

  .product-link {
    font-size:10px;
    padding-top:14px
  }

  .about-head {
    text-align:left;
    margin-bottom:30px
  }

  .about-head h2 {
    font-size:39px
  }

  .about-head>p:last-child {
    font-size:16px
  }

  .about-grid {
    grid-template-columns:1fr;
    gap:18px
  }

  .experience {
    padding:32px
  }

  .big-number {
    font-size:116px
  }

  .experience h3 {
    font-size:27px;
    margin-top:0;
    max-width:100%
  }

  .experience p {
    margin-bottom:0;
    margin-top:8px
  }

  .leadership {
    padding:30px
  }

  .leadership h3 {
    font-size:33px
  }

  .leader-monogram {
    width:55px;
    height:55px
  }

  .leader p {
    font-size:13px
  }

  .clients {
    padding-top:15px
  }

  .clients-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .client {
    height:105px;
    padding:22px
  }

  .client img {
    height:55px
  }

  .client-text {
    font-size:23px
  }

  .maintenance {
    grid-template-columns:1fr;
    margin-bottom:58px;
    border-radius:24px
  }

  .maintenance>div {
    padding:28px
  }

  .maintenance>img {
    height:210px;
    min-height:0
  }

  .maintenance h2 {
    font-size:32px
  }

  .contact-grid {
    grid-template-columns:1fr;
    gap:35px
  }

  .contact-copy h2 {
    font-size:78px
  }

  .contact-copy .eyebrow {
    font-size:9px
  }

  .contact-copy>p:not(.eyebrow) {
    font-size:21px;
    margin-top:20px
  }

  .contact-phone {
    margin-top:25px
  }

  .contact-location {
    font-size:13px
  }

  .brief-form {
    padding:25px
  }

  .brief-form input,.brief-form select,.brief-form textarea {
    font-size:16px
  }

  .footer-top {
    flex-wrap:wrap;
    gap:20px
  }

  .footer-top p {
    font-size:14px
  }

  .footer-top>a:last-child {
    width:100%;
    font-size:13px
  }

  .footer-bottom {
    flex-wrap:wrap;
    font-size:11px;
    gap:14px
  }

  .footer-bottom>span {
    flex:1 1 100%
  }

  .dialog-layout {
    grid-template-columns:1fr
  }

  .dialog-visual {
    height:230px
  }

  .dialog-visual img {
    height:100%;
    padding:20px
  }

  .dialog-content {
    padding:30px 25px
  }

  .dialog-content h2 {
    font-size:31px
  }

  .dialog-content .eyebrow {
    font-size:10px
  }

  .dialog-close {
    position:sticky;
    top:12px;
    float:right;
    margin:12px 12px -54px 0;
    right:12px
  }

  .dialog-content .button {
    width:100%
  }

  dialog {
    max-height:90dvh;
    border-radius:22px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

  .motion-enabled .reveal.pending {
    opacity:1;
    transform:none
  }

}

@media(max-width:650px) {
  .hero h1 {
    font-size:clamp(40px,11.8vw,68px)
  }

  .category span {
    font-size:12px
  }

  .category {
    min-width:105px
  }

  .product-category,.product-link {
    font-size:12px
  }

}

@media(max-width:360px) {
  .nav-shell {
    gap:5px
  }

  .site-header .logo img {
    width:80px
  }

  .site-header .button.small {
    font-size:10px;
    padding-inline:10px
  }

  .hero h1 {
    font-size:40px
  }

  .brief-form {
    padding:20px
  }

  .contact-copy h2 {
    font-size:68px
  }

}