/* Combination Technologies - replica of the 2025 site.
   Breakpoints match the original: desktop >= 1100, tablet 768-1099.98, phone <= 767.98. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 500 18px/1.4 Manrope, "Manrope Placeholder", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg, iframe { display: block; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
.xb { font-weight: 800; }
.br-p, .br-tp { display: none; }

.wrap { display: flex; flex-direction: column; align-items: center; min-height: 100vh; background: #fff; overflow: hidden; }

/* ---------- Header ---------- */
.hdr { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; }
.hdr-bar { background: #fff; padding: 6px 80px; display: flex; justify-content: center; align-items: center; overflow: hidden;
  transition: transform .6s cubic-bezier(.35, 0, 0, 1); }
.hdr.is-hidden .hdr-bar { transform: translateY(-86px); }
.hdr-nav { flex: 1 1 0; min-width: 0; max-width: 1800px; display: flex; justify-content: space-between; align-items: center; }
.hdr-left { flex: 1 1 0; min-width: 0; display: flex; }
.logo { display: flex; align-items: center; height: 38px; }
.logo img { width: 34px; height: 34px; object-fit: cover; }
.logo span { font: 600 32px/1.1 "Maven Pro", "Maven Pro Placeholder", sans-serif; letter-spacing: 2px; color: #000; white-space: nowrap; }
.hdr-links { flex: 1 1 0; min-width: 0; height: 22px; display: flex; justify-content: center; align-items: center; gap: 40px; overflow: hidden; }
.roll { display: block; height: 22px; overflow: hidden; cursor: pointer; }
.roll span { display: block; height: 25.2px; white-space: nowrap; transition: transform .2s cubic-bezier(.12, .23, .5, 1); }
.roll span + span { opacity: .6; }
.roll:hover span { transform: translateY(-28.4px); }
.btn-call { position: relative; flex: none; display: flex; align-items: center; justify-content: center; padding: 7px 16px; background: #000; color: #fff;
  border-radius: 5px; overflow: hidden; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.btn-call::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; transition: border-color .25s ease; pointer-events: none; }
.btn-call:hover { background: #fff; color: #000; }
.btn-call:hover::after { border-color: #000; }
.menu-btn { display: none; position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 64px; background: rgba(255, 255, 255, .9); overflow: hidden; cursor: pointer; }
.menu-btn i { position: absolute; left: 11px; width: 19px; height: 2px; border-radius: 2px; background: #000; transition: transform .3s ease, top .3s ease, width .3s ease, left .3s ease; }
.menu-btn i:nth-child(1) { top: 14px; }
.menu-btn i:nth-child(2) { top: 19px; }
.menu-btn i:nth-child(3) { top: 24px; }

/* ---------- Shared pieces ---------- */
.main { position: relative; z-index: 2; width: 100%; background: #fff; display: flex; flex-direction: column; align-items: center; padding: 0 80px 91px; }
.col { width: 100%; max-width: 1800px; display: flex; flex-direction: column; align-items: flex-start; gap: 220px; }
.label { position: relative; width: 100%; padding-bottom: 2px; font: 500 18px/1.4 Manrope, sans-serif; }
.label::after { content: ""; position: absolute; inset: 0; border-bottom: 2px solid #222; pointer-events: none; }
.t-xl { font: 500 64px/1.2 Manrope, sans-serif; }
.t-m { font: 500 40px/1.4 Manrope, sans-serif; }
.t-s { font: 500 32px/1.4 Manrope, sans-serif; }
.mute { color: #969696; }
.btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; background: #f0f0f0; color: #000;
  border-radius: 5px; overflow: hidden; white-space: nowrap; cursor: pointer; font: 500 18px/1.4 Manrope, sans-serif; transition: background-color .25s ease, color .25s ease; }
.btn::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; transition: border-color .25s ease; pointer-events: none; }
.btn:hover { background: #fff; color: #000; }
.btn:hover::after { border-color: #000; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--dark { background: #000; color: #fff; }

/* ---------- Motion (only when JavaScript is running) ---------- */
html.js .fx-in { opacity: 0; transform: translateX(30px); }
html.js .fx-in20 { opacity: 0; transform: translateX(20px); }
html.js .fx-in.is-in { opacity: 1; transform: none; transition: opacity 1.5s cubic-bezier(.35, 0, 0, 1) .2s, transform 1.5s cubic-bezier(.35, 0, 0, 1) .2s; }
html.js .fx-in20.is-in { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.35, 0, 0, 1) .2s, transform 1s cubic-bezier(.35, 0, 0, 1) .2s; }
html.js .fx-drop { opacity: 0; transform: translateY(-32px); }
html.js .fx-drop.is-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1) .1s, transform .9s cubic-bezier(.16, 1, .3, 1) .1s; }
html.js .fx-fade { opacity: 0; }
html.js .fx-fade.is-in { opacity: 1; transition: opacity .4s ease; }
html.js .fx-lines { opacity: 0; }
html.js .fx-lines.is-split { opacity: 1; }
.fx-lines .w { display: inline-block; opacity: 0; transform: translateX(50px); white-space: pre; }
.fx-lines.is-in .w { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(0, .46, .56, 1), transform .5s cubic-bezier(0, .46, .56, 1); transition-delay: calc(.2s + var(--line, 0) * .05s); }

/* ---------- Home: hero ---------- */
.hero { position: relative; z-index: 1; width: 100%; height: 100vh; display: flex; overflow: hidden; }
.hero video { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; z-index: 2; background: #000; opacity: .31; mix-blend-mode: multiply; }
.hero-h { position: absolute; z-index: 2; width: 80%; top: 10%; left: 51%; transform: translate(-50%, -50%); }
.hero-h h1 { font: 800 80px/1.2 Manrope, sans-serif; color: #fff; text-align: center; }
.hero-cta { position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% - 400.5px); height: 801px; overflow: hidden; pointer-events: none; }
.hero-cta .btn { position: absolute; bottom: 291px; left: calc(50.3191% - 82.5px); pointer-events: auto; }
.cta-phone { display: none; }

.intro { position: relative; z-index: 1; width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 88px; }
.intro .lead { font: 500 40px/1.4 Manrope, sans-serif; }
.only-phone-b { font-weight: inherit; }

/* ---------- Home: tech stack ---------- */
.tech { width: 100%; padding: 0 10px 0 0; }
.tech-in { width: 100%; display: flex; flex-direction: column; gap: 42px; }
.tools { width: 100%; display: grid; grid-template-columns: minmax(200px, 1fr); gap: 23px; overflow: hidden; }
.tool { display: flex; align-items: flex-start; gap: 21px; height: 100%; background: #fff; border-radius: 24px; overflow: hidden; }
.tool img { flex: none; width: 124px; height: 124px; object-fit: cover; border-radius: 24px; }
.tool-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; overflow: hidden; }
.tool p { font: 500 18px/1.4 Manrope, sans-serif; }

/* ---------- Slideshow (home carousel and project photos) ---------- */
.ss { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.ss-track { display: flex; gap: 10px; height: 100%; will-change: transform; }
.ss-item { position: relative; flex: 0 0 100%; height: 100%; min-width: 0; }
.ss[data-per="2"] .ss-item { flex-basis: calc((100% - 10px) / 2); }
.ss-item > img, .ss-item > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss.is-drag { cursor: grab; }
.ss.is-dragging { cursor: grabbing; }
.ss.is-dragging * { pointer-events: none; user-select: none; }
.ss-arrows { position: absolute; inset: 10px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.ss-arrow { display: block; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 40px; background: rgba(0, 0, 0, .2); overflow: hidden; cursor: pointer; pointer-events: auto; }
.ss-arrow img { width: 100%; height: 100%; }
.ss-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; border-radius: 50px; background: rgba(0, 0, 0, .2); overflow: hidden; }
.ss-dot { display: flex; padding: 10px 5px; border: 0; background: none; cursor: pointer; }
.ss-dot:first-child { padding-left: 10px; }
.ss-dot:last-child { padding-right: 10px; }
.ss-dot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .5; transition: opacity .2s; }
.ss-dot.is-active i { opacity: 1; }

.past { width: 100%; display: flex; flex-direction: column; gap: 52px; overflow: hidden; }
.past-box { width: 100%; height: 80vh; }
.slide { display: flex; align-items: center; width: 100%; height: 100%; background: #fff; overflow: hidden; cursor: pointer; -webkit-user-drag: none; }
.slide-l { width: 50%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.slide-c { width: 85%; max-width: 2018px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.fit { width: 100%; height: auto; overflow: visible; }
.fit foreignObject { overflow: visible; }
.fit h3 { font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 700; line-height: 1.2; letter-spacing: -2px; color: #333; white-space: nowrap; }
.fit p { font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 500; line-height: 1.5; letter-spacing: -.5px; color: #888; white-space: nowrap; }
.slide-btn { display: flex; align-items: center; justify-content: center; height: 40px; padding: 15px; border-radius: 8px; background: #ebebeb;
  font: 700 14px/1.2 Inter, "Inter Placeholder", sans-serif; color: #333; white-space: nowrap; }
.slide-r { position: relative; width: 50%; height: 100%; overflow: hidden; }
.slide-r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* ---------- Home: services, designing success, FAQ ---------- */
.services { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.acc { width: 100%; }
.acc-item { display: flex; align-items: flex-start; gap: 24px; padding: 24px 0; box-shadow: 0 1px 0 0 #d9d9d9; overflow: hidden; cursor: pointer; }
.acc-l { flex: 1 1 0; min-width: 0; }
.acc-name { height: 48px; display: flex; flex-direction: column; justify-content: center; }
.acc-fold { overflow: hidden; transition: height .45s cubic-bezier(.25, 1, .35, 1); }
.acc-body { padding: 26px 0 16px; }
.acc-body p { font: 500 18px/1.4 Manrope, sans-serif; }
.acc-ico { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transform: rotate(180deg); transition: transform .45s cubic-bezier(.25, 1, .35, 1); }
.acc-ico svg { width: 24px; height: 24px; }
.acc-item.is-closed .acc-ico { transform: rotate(0deg); }

.design, .faq { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.design-row { width: 100%; display: flex; align-items: flex-end; gap: 48px; }
.design-row h2 { flex: 1 1 0; min-width: 0; color: #969696; }
.design-row h2 span { color: #000; }
.faq-panel { width: 100%; padding: 0 20px; border-radius: 20px; background: #f2f2f2; overflow: hidden; }
.faq-q { position: relative; display: flex; align-items: center; padding: 20px 0 20px 40px; cursor: pointer; font: 600 16px/1.5 Inter, "Inter Placeholder", sans-serif; color: #333; }
.faq-plus { position: absolute; left: 0; top: calc(50% - 8px); width: 16px; height: 16px; opacity: .3; transition: transform .35s cubic-bezier(.25, 1, .35, 1); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: #000; border-radius: 10px; }
.faq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item.is-open .faq-plus { transform: rotate(45deg); }
.faq-fold { height: 0; overflow: hidden; transition: height .4s cubic-bezier(.25, 1, .35, 1); }
.faq-a { padding: 0 24px 20px 40px; font: 600 16px/1.5 Inter, "Inter Placeholder", sans-serif; color: #666; }
.faq-a p + p { margin-top: 24px; }
.faq-line { height: 1px; background: rgba(0, 0, 0, .05); }

/* ---------- Footer ---------- */
.ftr-wrap { position: relative; z-index: 1; width: 100%; height: 90vh; max-height: 1000px; will-change: transform; }
.ftr { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 46px; padding: 2px 40px 80px 80px; background: #000; color: #fff; overflow: hidden; }
.ftr-top { width: 100%; max-width: 1800px; display: flex; justify-content: space-between; align-items: flex-start; }
.ftr-keep { flex: 1 1 0; min-width: 0; max-width: 550px; display: flex; flex-direction: column; align-items: flex-start; gap: 43px; }
.ftr-text { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.ftr-text p { font: 500 16px/1.4 Manrope, sans-serif; }
.ftr-right { flex: 1 1 0; min-width: 0; max-width: 440px; }
.ftr-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ftr-bottom { width: 100%; max-width: 1800px; }
.ftr-bottom p { font: 500 16px/1.4 Manrope, sans-serif; text-align: right; opacity: .5; }

/* ---------- Projects page ---------- */
.main--work { padding: 100px 80px 240px; }
.rows { width: 100%; max-width: 3000px; display: flex; flex-direction: column; gap: 147px; overflow: hidden; }
.prow { width: 100%; display: flex; align-items: center; background: #fff; overflow: hidden; }
.prow-l { width: 40%; }
.prow-c { width: 95%; max-width: 2018px; display: flex; flex-direction: column; gap: 21px; }
.prow-txt p { font: 500 16px/1.4 Manrope, sans-serif; color: #666; }
.prow-txt p + p { margin-top: 20px; }
.prow-r { width: 60%; }
.prow-ss { width: 100%; height: 361px; }
.prow .ss-arrows { inset: 20px; }
.prow .ss-arrow { width: 40px; height: 40px; }

/* ---------- Why Us page ---------- */
.main--about { padding: 160px 80px 0; }
.main--about .col { gap: 96px; }
.about-intro { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.rt-18 p { font: 500 18px/1.4 Manrope, sans-serif; }
.rt-18 .ib { margin-top: 43px; }
.rt-18 .ip2 { margin-top: 40px; }
.two { width: 100%; display: flex; align-items: flex-start; gap: 16px; overflow: hidden; }
.two-label { width: 20%; flex: none; font: 500 16px/1.4 Manrope, sans-serif; }
.two-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 80px; }
.list { width: 100%; display: flex; flex-direction: column; gap: 32px; }
.li { display: flex; flex-direction: column; gap: 16px; }
.li-h { display: flex; gap: 16px; }
.li-h h3:last-child { flex: 1 1 0; min-width: 0; }
.li h3 { font: 500 24px/1.4 Manrope, sans-serif; }
.li p { font: 500 16px/1.4 Manrope, sans-serif; color: #666; }
.team { width: 100%; padding: 23px 40px; display: flex; flex-direction: column; gap: 3px; background: #fff; overflow: hidden; }
.team-gap { height: 27px; }
.cards { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
.card { width: 47%; min-width: 100px; border-radius: 20px; background: #fff; overflow: hidden;
  box-shadow: rgba(0, 0, 0, .05) 0 .796192px 2.38858px -.625px, rgba(0, 0, 0, .05) 0 2.41451px 7.24352px -1.25px, rgba(0, 0, 0, .05) 0 6.38265px 19.148px -1.875px, rgba(0, 0, 0, .05) 0 20px 60px -2.5px; }
.card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-b { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.card h3 { font: 600 20px/1.4 Inter, "Inter Placeholder", sans-serif; letter-spacing: -.5px; color: #012; }
.card-bio p { font: 500 16px/1.6 Inter, "Inter Placeholder", sans-serif; color: #666; min-height: 25.6px; }

/* ---------- Contact page ---------- */
.main--contact { padding: 160px 80px 48px; }
.contact { width: 100%; max-width: 1800px; display: flex; flex-direction: column; }
.c-intro { display: flex; flex-direction: column; gap: 6px; }
.c-intro h4 { font: 500 18px/1.4 Manrope, sans-serif; color: #666; }
.c-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; overflow: hidden; }
.c-info { flex: 1 1 0; min-width: 0; padding-top: 50px; display: flex; flex-direction: column; gap: 48px; }
.c-info h3 { font: 500 24px/1.4 Manrope, sans-serif; max-width: 607px; }
.c-block { display: flex; flex-direction: column; gap: 16px; }
.c-block p { font: 500 16px/1.4 Manrope, sans-serif; color: #666; }
.c-block h4, .c-block a { font: 500 18px/1.4 Manrope, sans-serif; color: #000; }
.c-cal { width: 50%; height: 600px; flex: none; }
.c-map { width: 100%; height: 400px; }
.c-cal iframe, .c-map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 404 page ---------- */
.main--404 { padding: 160px 80px 240px; }
.nf { width: 100%; max-width: 800px; display: flex; flex-direction: column; align-items: flex-start; gap: 80px; }

/* ================= Tablet ================= */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .hdr-bar { padding: 6px 60px; }
  .hdr-links { gap: 32px; }
  .main { padding: 0 64px 62px; }
  .col { gap: 120px; }
  .t-xl { font-size: 52px; }
  .t-m { font-size: 32px; }
  .t-s { font-size: 26px; }
  .hero-cta { top: calc(66.0185% - 367px); height: 734px; display: flex; justify-content: center; align-items: center; }
  .hero-cta .btn { position: relative; bottom: auto; left: auto; }
  .intro .lead { font-size: 32px; }
  .tech { padding: 36px 10px 40px 0; }
  .tech-in { gap: 44px; max-width: 768px; }
  .past-box { height: 378px; }
  .design-row { flex-direction: column; }
  .design-row h2 { flex: none; width: 100%; }
  .ftr-wrap { height: auto; max-height: none; }
  .ftr { height: auto; padding: 64px; }
  .ftr-top { flex-direction: column; justify-content: flex-start; gap: 40px; }
  .ftr-keep, .ftr-right { flex: none; width: 100%; max-width: none; }
  .main--work { padding: 80px 64px 160px; }
  .rows { gap: 75px; }
  .prow { flex-direction: column; height: 696px; }
  .prow-l { order: 1; width: 100%; padding-top: 7px; }
  .prow-c { width: 100%; padding: 15px 0 10px; text-align: center; }
  .prow-r { order: 0; width: 100%; flex: 1 1 0; min-height: 0; display: flex; justify-content: center; }
  .prow-ss { width: 95%; height: 100%; }
  .main--about { padding: 126px 64px; }
  .main--about .col { gap: 120px; }
  .br-tp { display: inline; }
  .rt-18 .ip2 { margin-top: 0; }
  .li h3 { font-size: 22px; }
  .team { padding: 80px 0; }
  .cards { gap: 9px; }
  .card { width: 49%; }
  .card-b { padding: 30px 15px; }
  .main--contact { padding: 160px 80px 80px; }
  .contact { gap: 52px; }
  .c-row { flex-direction: column; }
  .c-info { flex: none; width: 100%; }
  .c-info h3 { max-width: none; }
  .c-block h4, .c-block a { font-size: 16px; }
  .c-cal { width: 100%; }
  .main--404 { padding: 160px 64px; }
}

/* ================= Phone ================= */
@media (max-width: 767.98px) {
  .hdr-bar { height: 72px; padding: 16px; flex-direction: column; justify-content: flex-start; transition: transform .6s cubic-bezier(.35, 0, 0, 1), height .4s cubic-bezier(.25, 1, .35, 1), border-radius .4s; }
  .hdr-nav { flex: none; width: 100%; gap: 10px; }
  .hdr-left { align-items: center; }
  .logo img { width: 40px; height: 40px; }
  .hdr-links, .btn-call { display: none; }
  .menu-btn { display: block; }
  .hdr.is-open .hdr-bar { height: 401px; border-radius: 0 0 16px 16px; }
  .hdr.is-open .hdr-nav { flex-direction: column; align-items: center; gap: 0; }
  .hdr.is-open .menu-btn { order: -1; align-self: flex-start; }
  .hdr.is-open .hdr-left { flex: none; width: 100%; justify-content: center; margin-top: 10px; }
  .hdr.is-open .hdr-links { display: flex; flex: none; flex-direction: column; gap: 24px; width: 100%; height: auto; padding: 24px 0 40px; overflow: visible; }
  .hdr.is-open .btn-call { display: flex; }
  .hdr.is-open .menu-btn i:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .hdr.is-open .menu-btn i:nth-child(2) { left: 19.5px; width: 1px; opacity: 0; }
  .hdr.is-open .menu-btn i:nth-child(3) { top: 19px; transform: rotate(-45deg); }
  .main { padding: 120px 16px 26px; }
  .col { gap: 34px; align-items: center; }
  .t-xl { font-size: 32px; }
  .t-m { font-size: 26px; }
  .t-s { font-size: 22px; }
  .hero { height: 229px; }
  .hero-h { top: auto; bottom: 24px; left: 50%; width: 350px; transform: translateX(-50%); }
  .hero-h h1 { font-size: 50px; }
  .hero-h h1 br { display: none; }
  .hero-cta { display: none; }
  .cta-phone { display: block; }
  .intro { gap: 48px; }
  .intro .lead { font-size: 26px; }
  .only-phone-b { font-weight: 700; }
  .tech { padding: 60px 20px 30px; }
  .tech-in { gap: 38px; }
  .tools { gap: 52px; }
  .tool img { width: 30%; height: auto; aspect-ratio: 1 / 1; }
  .tool-txt { padding: 11px 0; overflow: visible; }
  .tool:nth-child(2) .tool-txt { padding: 12px 0; }
  .tool:nth-child(3) .tool-txt { padding: 7px 0; }
  .tool:nth-child(4) .tool-txt { padding: 8px 0; }
  .tool:nth-child(-n+2) p { font-size: 15px; }
  .tool .p18 { font-size: 18px; }
  .br-p, .br-tp { display: inline; }
  .past-box { height: 200px; }
  .services { gap: 16px; }
  .design-row { flex-direction: column; }
  .design-row h2 { flex: none; width: 100%; }
  .ftr-wrap { height: auto; max-height: none; }
  .ftr { height: auto; padding: 48px 24px; }
  .ftr-top { flex-direction: column; justify-content: flex-start; gap: 40px; }
  .ftr-keep, .ftr-right { flex: none; width: 100%; max-width: none; }
  .ftr-keep { gap: 40px; }
  .ftr-text { gap: 12px; }
  .ftr-bottom p { font-size: 11px; }
  .main--work { padding: 80px 16px 160px; }
  .rows { gap: 103px; }
  .prow { flex-direction: column; }
  .prow-l { order: 1; width: 100%; }
  .prow-c { width: 100%; gap: 10px; padding: 12px 40px 0 0; }
  .prow-r { order: 0; width: 100%; height: 190px; }
  .prow-ss { height: 100%; }
  .main--about { padding: 120px 16px 0; }
  .main--about .col { gap: 80px; align-items: flex-start; }
  .two { flex-direction: column; }
  .two-label { width: 100%; }
  .two-body { flex: none; width: 100%; }
  .li h3 { font-size: 20px; }
  .list { gap: 24px; }
  .rt-18 .ip2 { margin-top: 0; }
  .team { padding: 60px 0; }
  .cards { flex-direction: column; align-items: stretch; }
  .card { width: 100%; min-width: 0; }
  .card-b { padding: 30px 0; }
  .card:nth-child(n+3) .card-bio { width: 112%; }   /* as on the live site: these four bios overflow their cards on phones */
  .main--contact { padding: 88px 16px 40px; }
  .c-row { flex-direction: column; gap: 0; margin-top: 38px; }
  .c-info { display: contents; }
  .c-info h3 { order: 1; margin-bottom: 48px; }
  .c-info .c-block:nth-of-type(1) { order: 2; margin-bottom: 10px; }
  .c-cal { order: 3; width: 100%; }
  .c-info .c-block:nth-of-type(2) { order: 4; margin: 38px 0 10px; }
  .main--404 { padding: 120px 16px 160px; }
  .nf { gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .fx-in, html.js .fx-in20, html.js .fx-drop, html.js .fx-fade, html.js .fx-lines, .fx-lines .w { opacity: 1 !important; transform: none !important; transition: none !important; }
}