@import url('/demo.css');
:root {
  --sheet:#f3f4f1;
  --panel:#e9ebe7;
  --raised:#fff;
  --ink:#1b2223;
  --ink-2:#535d5c;
  --ink-3:#63716a;
  --rule:#cdd2cd;
  --rule-2:#dce0da;
  --oxide:#a83e22;
  --on-accent:#fff;
  --control-border:#68766d;
  --oxide-tint:#e9dcd3;
  --gut:clamp(1.5rem,5vw,6rem);
  --max:1680px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:'Archivo';
  --font-body:'Newsreader';
  --font-mono:'Martian Mono';
  --paper:var(--sheet);
  --paper-2:var(--panel);
  --paper-3:var(--panel);
  --surface:var(--raised);
  --inset:var(--panel);
  --line:var(--rule-2);
  --line-strong:var(--rule);
  --font-bricolage:var(--font-display);
  --font-geist:var(--font-display);
  --font-geist-sans:var(--font-display);
  --font-jetbrains:var(--font-mono);
  --font-jetbrains-mono:var(--font-mono);
  --ember:var(--oxide);
  --ember-ink:var(--oxide);
  --ember-tint:var(--oxide-tint);
  --violet:var(--oxide);
  --violet-ink:var(--oxide);
  --violet-tint:var(--oxide-tint);
  --cyan:var(--oxide);
  --cyan-ink:var(--oxide);
  --cyan-tint:var(--oxide-tint);
  --pink:var(--oxide);
  --pink-ink:var(--oxide);
  --pink-tint:var(--oxide-tint);
  --amber:var(--oxide);
  --amber-ink:var(--oxide);
  --amber-tint:var(--oxide-tint);
  --c:var(--oxide);
  --ci:var(--oxide);
  color-scheme:light;
  scroll-padding-top:100px;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:auto
}

body {
  margin:0;
  background:var(--sheet);
  color:var(--ink);
  font:400 1rem/1.6 'Archivo',Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

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

button {
  font:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button {
  color:inherit
}

p,h1,h2,h3,h4,figure {
  margin:0
}

h1,h2,h3 {
  overflow-wrap:break-word
}

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

svg {
  display:block
}

/* Vector arrows keep the same shape on every platform, including iOS. */
.ui-arrow {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  flex-shrink:0;
  overflow:visible
}
.circle-arrow>span {
  display:grid;
  place-items:center
}
.circle-arrow .ui-arrow {
  display:block
}

::selection {
  background:var(--oxide);
  color:var(--on-accent)
}

:focus-visible {
  outline:2px solid var(--oxide);
  outline-offset:6px
}

[tabindex="-1"]:focus {
  outline:none
}

[hidden] {
  display:none!important
}

.wrap {
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut)
}

.skip-link {
  position:fixed;
  z-index:110;
  top:-100px;
  left:1rem;
  background:var(--ink);
  color:var(--sheet);
  padding:1rem
}

.skip-link:focus {
  top:1rem
}

.mono {
  font:400 .75rem/1.5 'Archivo',Arial,sans-serif;
  letter-spacing:0;
  text-transform:none
}

.mast {
  position:fixed;
  inset:0 0 auto;
  z-index:60;
  transition:background .5s var(--ease),color .5s var(--ease),transform .55s var(--ease);
  background:var(--sheet);
  color:var(--ink)
}

.mast-inner {
  height:104px;
  display:flex;
  align-items:center;
  gap:3rem
}

.wordmark {
  font-size:1.9rem;
  line-height:1;
  font-weight:700;
  letter-spacing:-.07em
}

.desktop-nav {
  display:flex;
  gap:2.6rem;
  margin-left:auto;
  align-items:center;
  font-size:.875rem
}

.nav-link {
  position:relative;
  padding:.5rem 0
}

.nav-link::after {
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .55s var(--ease)
}

.nav-link:hover::after,.nav-link:focus-visible::after {
  transform:scaleX(1);
  transform-origin:left
}

.header-contact {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:.875rem;
  margin-left:1rem
}

.circle-arrow {
  display:inline-grid;
  place-items:center;
  position:relative;
  width:56px;
  height:56px;
  border:1px solid currentColor;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  transition:background .4s,color .4s,transform .45s var(--ease);
  transform:translate(var(--mx,0px),var(--my,0px))
}

.circle-arrow>span {
  grid-area:1/1;
  font-size:1.4rem;
  line-height:1;
  transition:transform .65s var(--ease)
}

.circle-arrow>span+span {
  transform:translate(-150%,150%)
}

a:hover .circle-arrow>span:first-child {
  transform:translate(150%,-150%)
}

a:hover .circle-arrow>span+span {
  transform:translate(0,0)
}

.circle-arrow.small {
  height:38px;
  width:38px
}

.circle-arrow.small>span {
  font-size:1.1rem
}

.home .mast:not(.has-scrolled) {
  background:transparent;
  color:#f4f4ee
}

.home .mast.has-scrolled {
  background:var(--sheet);
  color:var(--ink)
}

.mast.has-scrolled .mast-inner {
  height:82px
}

.mast-inner {
  transition:height .4s var(--ease)
}

.menu-toggle {
  display:none
}

.mobile-menu {
  display:none
}

.cover {
  height:100svh;
  min-height:max(720px,48rem);
  max-height:1200px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#161918;
  color:#f4f4ee
}

.cover-image {
  position:absolute;
  inset:-5% 0;
  z-index:-3;
  will-change:transform
}

.cover-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  animation:image-arrive 2.2s var(--ease) both
}

.cover-shade {
  position:absolute;
  inset:0;
  background:rgba(7,13,14,.22);
  z-index:-2
}

.cover-content {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:160px;
  padding-bottom:clamp(2rem,4vw,4rem)
}

.cover h1 {
  font-size:clamp(4rem,9.8vw,10.5rem);
  font-weight:400;
  letter-spacing:-.075em;
  line-height:1.02;
  margin-left:-.04em;
  max-width:1350px
}

.cover h1 em {
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.05
}

.line-mask {
  display:block;
  overflow:hidden;
  padding-bottom:.12em;
  margin-bottom:-.12em
}

.line-mask>span,.line-mask>em {
  display:block;
  animation:line-arrive 1.25s var(--ease) both;
  animation-delay:.12s
}

.line-mask+ .line-mask>em {
  animation-delay:.27s
}

.cover-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:4rem;
  padding-top:clamp(2.5rem,5vw,5rem);
  animation:soft-arrive 1.2s .5s var(--ease) both
}

.cover-bottom p {
  font-size:clamp(1rem,1.25vw,1.2rem);
  line-height:1.65;
  max-width:48ch;
  color:#e3e7e2
}

.cover-discover {
  display:flex;
  align-items:center;
  gap:2rem;
  font-size:.875rem;
  flex-shrink:0
}

.cover-discover .circle-arrow>span+span {
  transform:translateY(-180%)
}

.cover-discover:hover .circle-arrow>span:first-child {
  transform:translateY(180%)
}

.cover-discover:hover .circle-arrow>span+span {
  transform:translateY(0)
}

html:not(.menu-open) .home .mast:not(.has-scrolled) :focus-visible,.cover :focus-visible {
  outline-color:#e4ae95
}

.reveal-pending {
  opacity:0;
  transform:translateY(35px)
}

.reveal-visible {
  opacity:1;
  transform:translateY(0);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease)
}

@keyframes line-arrive {
  from {
    transform:translateY(115%) rotate(2deg)
  }
  to {
    transform:translateY(0) rotate(0)
  }
}

@keyframes image-arrive {
  from {
    transform:scale(1.07)
  }
  to {
    transform:scale(1)
  }
}

@keyframes soft-arrive {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media(max-width:900px) {
  .mast-inner {
    height:86px;
    gap:1.5rem
  }
  .desktop-nav {
    gap:1.5rem
  }
  .header-contact {
    margin-left:0
  }
  .cover {
    min-height:max(700px,46rem)
  }
  .cover h1 {
    font-size:clamp(4.5rem,11vw,7rem)
  }
  .cover-bottom {
    gap:2rem
  }
  .cover-discover {
    gap:1rem
  }
  .cover-image img {
    object-position:58% center
  }
  .cover-bottom p {
    max-width:38ch
  }
  .desktop-break {
    display:none
  }
}

@media(max-width:700px) {
  :root {
    scroll-padding-top:80px
  }
  .mast-inner,.mast.has-scrolled .mast-inner {
    height:80px;
    gap:1.4rem
  }
  .wordmark {
    font-size:1.65rem
  }
  .desktop-nav {
    display:none
  }
  .header-contact {
    margin-left:auto;
    font-size:.8125rem;
    gap:.65rem
  }
  .circle-arrow.small {
    width:32px;
    height:32px
  }
  .menu-toggle {
    display:flex;
    width:32px;
    height:44px;
    position:relative;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    align-items:flex-end;
    border:0;
    background:none;
    padding:0;
    z-index:2
  }
  .menu-toggle span {
    height:1px;
    width:24px;
    background:currentColor;
    transition:transform .4s var(--ease)
  }
  .menu-toggle span+span {
    width:18px
  }
  .menu-toggle[aria-expanded=true] span {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span+span {
    transform:translateY(-3.5px) rotate(-45deg);
    width:24px
  }
  .mobile-menu {
    position:fixed;
    inset:0;
    z-index:50;
    background:var(--sheet);
    color:var(--ink);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:110px var(--gut) 3rem;
    overflow:auto;
    opacity:0;
    transition:opacity .4s var(--ease)
  }
  .mobile-menu.is-open {
    opacity:1
  }
  .mobile-menu nav {
    display:flex;
    flex-direction:column;
    gap:1.2rem
  }
  .mobile-menu nav a {
    font-size:clamp(2.4rem,8vw,4rem);
    line-height:1.25;
    letter-spacing:-.055em;
    transform:translateY(18px);
    opacity:0;
    transition:transform .6s var(--ease),opacity .5s
  }
  .mobile-menu.is-open nav a {
    transform:none;
    opacity:1
  }
  .mobile-menu nav a:nth-child(2) {
    transition-delay:.05s
  }
  .mobile-menu nav a:nth-child(3) {
    transition-delay:.1s
  }
  .mobile-menu nav a:nth-child(4) {
    transition-delay:.15s
  }
  .mobile-menu-location {
    position:absolute;
    bottom:2rem;
    left:var(--gut);
    font-size:.875rem;
    color:var(--ink-2)
  }
  .menu-open .mast {
    background:var(--sheet)!important;
    color:var(--ink)!important
  }
  .menu-open {
    overflow:hidden
  }
  .cover {
    min-height:max(620px,40rem);
    max-height:1000px
  }
  .cover h1 {
    font-size:clamp(3.15rem,12.6vw,5.5rem);
    letter-spacing:-.07em
  }
  .cover-content {
    padding-top:130px;
    padding-bottom:2rem
  }
  .cover-image img {
    object-position:59% center
  }
  .cover-shade {
    background:rgba(6,12,13,.35)
  }
  .cover-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:2rem;
    padding-top:2rem
  }
  .cover-bottom p {
    max-width:35ch;
    font-size:1rem
  }
  .cover-discover {
    width:100%;
    justify-content:space-between;
    font-size:.8125rem
  }
  .cover-discover .circle-arrow {
    width:42px;
    height:42px
  }
  .cover-discover .circle-arrow>span {
    font-size:1.2rem
  }
}

@media(max-width:370px) {
  .header-contact {
    font-size:.75rem
  }
  .header-contact .circle-arrow {
    display:none
  }
  .cover h1 {
    font-size:12.3vw
  }
  .cover-bottom p {
    font-size:.9375rem
  }
  .mast-inner {
    gap:1rem
  }
}

@media(prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --sheet:#192223;
    --panel:#202c2d;
    --raised:#273638;
    --ink:#edf1ec;
    --ink-2:#c1ccc5;
    --ink-3:#a4b5ac;
    --rule:#3e514c;
    --rule-2:#314541;
    --oxide:#e6a087;
    --on-accent:#192223;
    --control-border:#849a8e;
    --oxide-tint:#493b34
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .reveal-pending {
    opacity:1;
    transform:none
  }
  .cover-image {
    will-change:auto
  }
}

@view-transition {
  navigation:auto
}

::view-transition-old(root) {
  animation:page-away .22s ease both
}

::view-transition-new(root) {
  animation:page-in .35s ease both
}

@keyframes page-away {
  to {
    opacity:0
  }
}

@keyframes page-in {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}

/* A short story, with room to read. */
.section-space {
  padding-block:clamp(6rem,11vw,12rem)
}

.section-kicker {
  font-size:.875rem;
  line-height:1.5;
  color:var(--ink-2)
}

h2 {
  font-size:clamp(2.4rem,4.8vw,5rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.065em
}

h2 em {
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;
  letter-spacing:-.045em
}

.intro-section {
  padding-top:clamp(7rem,13vw,14rem);
  padding-bottom:clamp(6rem,10vw,10rem)
}

.intro-grid {
  display:grid;
  grid-template-columns:.75fr 2fr;
  gap:4rem
}

.intro-grid>.section-kicker {
  padding-top:.75rem
}

.intro-statement {
  font-size:clamp(2.6rem,4.7vw,5rem);
  line-height:1.13;
  letter-spacing:-.06em;
  max-width:26ch
}

.intro-bottom {
  margin-top:3rem;
  max-width:540px
}

.intro-bottom>p {
  font-size:1.125rem;
  line-height:1.8;
  color:var(--ink-2)
}

.inline-link {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:2rem;
  font-size:.9375rem;
  margin-top:2rem;
  padding-bottom:.4rem
}

.inline-link::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
  transform-origin:left;
  transition:transform .5s var(--ease)
}

.inline-link:hover::after {
  transform:scaleX(.65)
}

.inline-link span {
  transition:transform .4s var(--ease)
}

.inline-link:hover span {
  transform:translate(3px,-3px)
}

.work-section {
  padding-top:0
}

.work-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:3rem;
  margin-bottom:3.5rem
}

.work-heading h2 {
  font-size:clamp(2rem,3vw,3rem);
  letter-spacing:-.055em
}

.work-heading p {
  max-width:340px;
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.75
}

.featured-systems {
  border-top:1px solid var(--rule)
}

.system-feature {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 60px;
  gap:3rem;
  align-items:center;
  padding:2.65rem 0;
  border-bottom:1px solid var(--rule);
  position:relative
}

.system-feature::after {
  content:'';
  position:absolute;
  height:1px;
  background:var(--oxide);
  left:0;
  right:0;
  bottom:-1px;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .7s var(--ease)
}

.system-feature:hover::after {
  transform:scaleX(1);
  transform-origin:left
}

.system-name {
  transition:transform .6s var(--ease)
}

.system-name h3 {
  font-size:clamp(2rem,4.2vw,4.5rem);
  letter-spacing:-.055em;
  font-weight:400;
  line-height:1.14;
  transition:color .45s
}

.system-name p {
  color:var(--ink-2);
  font-size:1rem;
  margin-top:.85rem;
  max-width:60ch
}

.system-price {
  font-size:1rem;
  white-space:nowrap
}

.system-feature:hover .system-name {
  transform:translateX(12px)
}

.system-feature:hover h3 {
  color:var(--oxide)
}

.system-feature:hover .circle-arrow {
  background:var(--ink);
  border-color:var(--ink);
  color:var(--sheet)
}

.all-systems {
  margin-top:1.5rem;
  border-bottom:1px solid var(--rule)
}

.all-systems>summary {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  cursor:pointer;
  padding:1.4rem 0 2.4rem;
  list-style:none;
  font-size:1rem
}

.all-systems>summary:hover {
  color:var(--oxide)
}

summary::-webkit-details-marker {
  display:none
}

.plus {
  display:inline-block;
  width:16px;
  height:16px;
  position:relative;
  flex-shrink:0;
  transition:transform .5s var(--ease)
}

.plus::before,.plus::after {
  content:'';
  position:absolute;
  left:0;
  top:7px;
  right:0;
  height:1px;
  background:currentColor
}

.plus::after {
  transform:rotate(90deg);
  transition:transform .5s var(--ease)
}

details[open]>summary .plus::after {
  transform:rotate(0)
}

.when-open {
  display:none
}

details[open]>summary .when-open {
  display:inline
}

details[open]>summary .when-closed {
  display:none
}

.catalog {
  padding:0 0 2.5rem
}

.catalog-row {
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(200px,1.5fr) minmax(140px,.7fr) 22px;
  align-items:center;
  gap:2rem;
  padding:1.65rem 0;
  border-top:1px solid var(--rule);
  transition:color .3s
}

.catalog-row h3 {
  font-weight:400;
  font-size:1.25rem;
  line-height:1.25;
  letter-spacing:-.035em
}

.catalog-row p {
  font-size:.875rem;
  color:var(--ink-2);
  line-height:1.65;
  max-width:50ch
}

.catalog-price {
  font-size:.875rem;
  text-align:right
}

.catalog-row:hover {
  color:var(--oxide)
}

.catalog-row>span:last-child {
  transition:transform .4s var(--ease)
}

.catalog-row:hover>span:last-child {
  transform:translate(3px,-3px)
}

/* The method opens at the visitor's pace. */
.method-section {
  background:#1b282b;
  color:#ecf0e9;
  --ink:#ecf0e9;
  --ink-2:#b5c3bc;
  --rule:#52615b;
  --oxide:#d59b80
}

.method-grid {
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:clamp(4rem,10vw,10rem);
  align-items:start
}

.method-intro {
  position:sticky;
  top:145px
}

.method-intro>.section-kicker {
  color:#b5c3bc;
  margin-bottom:2.5rem
}

.method-intro h2 {
  font-size:clamp(3rem,4.7vw,5rem);
  line-height:1.02
}

.method-intro h2 em {
  color:#d59b80
}

.method-intro>p:last-child {
  max-width:33ch;
  font-size:1.0625rem;
  line-height:1.75;
  color:#b5c3bc;
  margin-top:2rem
}

.method-list {
  border-top:1px solid var(--rule);
  padding-top:0
}

.method-item {
  border-bottom:1px solid var(--rule)
}

.method-item>summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  list-style:none;
  cursor:pointer;
  padding:1.8rem 0;
  transition:color .35s
}

.method-item h3 {
  font-size:clamp(1.8rem,3vw,3rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.045em
}

.method-item>summary:hover,.method-item[open]>summary {
  color:#d59b80
}

.method-item .plus {
  width:22px;
  height:22px
}

.method-item .plus::before,.method-item .plus::after {
  top:10px
}

.accordion-body {
  display:block
}

.method-item .accordion-body>p {
  padding:0 3rem 2rem 0;
  font-size:1.0625rem;
  color:#b5c3bc;
  line-height:1.75;
  max-width:43ch
}

/* The firm. */
.firm-grid {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:clamp(3rem,10vw,10rem)
}

.image-window {
  height:clamp(450px,49vw,760px);
  overflow:hidden;
  background:var(--panel)
}

.firm-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 15%;
  filter:grayscale(100%);
  transform:scale(1.13);
  will-change:transform
}

.firm-grid figcaption {
  font-size:.75rem;
  line-height:1.6;
  color:var(--ink-2);
  margin-top:1.1rem
}

.firm-grid figcaption a {
  text-decoration:underline;
  text-underline-offset:3px
}

.credit-adaptation {
  display:block;
  font-size:.75rem;
  opacity:.85
}

.firm-copy h2 {
  font-size:clamp(3rem,5.3vw,5.8rem);
  line-height:1.08;
  margin-bottom:2.6rem
}

.firm-copy h2 em {
  color:var(--oxide)
}

.firm-copy>p {
  font-size:1.0625rem;
  line-height:1.8;
  color:var(--ink-2);
  max-width:36ch
}

.firm-copy>p+p {
  margin-top:1.2rem
}

.partner-link {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-size:.875rem;
  line-height:1.5;
  max-width:370px
}

.partner-link>span:last-child {
  margin-left:auto;
  font-size:1.2rem;
  transition:transform .4s var(--ease)
}

.partner-link:hover>span:last-child {
  transform:translate(4px,-4px)
}

/* A single, direct invitation. */
.foot {
  background:#121b1d;
  color:#ecf0e9;
  --ink:#ecf0e9;
  --ink-2:#b5c3bc;
  --sheet:#121b1d;
  --rule:#3f504c;
  padding-top:clamp(5rem,9vw,9rem)
}

.footer-prompt {
  font-size:1.0625rem;
  color:#b5c3bc;
  margin-bottom:3rem
}

.contact-invitation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3rem;
  max-width:1250px
}

.contact-invitation h2 {
  font-size:clamp(4.5rem,11.5vw,12rem);
  line-height:.99;
  letter-spacing:-.075em
}

.contact-arrow {
  height:clamp(90px,11vw,160px);
  width:clamp(90px,11vw,160px);
  border-color:#70827b
}

.contact-arrow>span {
  font-size:clamp(2.5rem,4.5vw,5rem);
  font-weight:300
}

.contact-invitation:hover .contact-arrow {
  background:#ecf0e9;
  color:#121b1d;
  border-color:#ecf0e9
}

.footer-email {
  display:inline-block;
  margin-top:2rem;
  font-size:1.0625rem;
  color:#b5c3bc;
  position:relative
}

.footer-email:hover {
  color:#ecf0e9
}

.footer-bottom {
  display:flex;
  align-items:center;
  gap:3rem;
  padding:2rem 0;
  border-top:1px solid var(--rule);
  margin-top:clamp(4rem,7vw,7rem);
  font-size:.8125rem;
  color:#b5c3bc
}

.footer-bottom .wordmark {
  color:#ecf0e9;
  font-size:1.6rem;
  margin-right:auto
}

.footer-bottom a:hover {
  color:#ecf0e9
}

.foot :focus-visible {
  outline-color:#e0a68d
}

@media(max-width:1100px) {
  .intro-grid {
    grid-template-columns:.5fr 2fr;
    gap:2rem
  }
  .system-feature {
    gap:2rem;
    grid-template-columns:minmax(0,1fr) auto 56px
  }
  .system-name h3 {
    font-size:3.5vw
  }
  .system-name p {
    font-size:.9375rem
  }
  .method-grid {
    gap:4rem
  }
  .firm-grid {
    gap:4rem
  }
  .catalog-row {
    grid-template-columns:1.1fr 1.3fr 140px 20px;
    gap:1rem
  }
  .catalog-row h3 {
    font-size:1.1rem
  }
  .footer-bottom {
    gap:2rem
  }
}

@media(max-width:800px) {
  .section-space {
    padding-block:5rem
  }
  .intro-section {
    padding-top:6rem
  }
  .intro-grid {
    grid-template-columns:1fr;
    gap:1.75rem
  }
  .intro-grid>.section-kicker {
    padding:0
  }
  .intro-statement {
    font-size:clamp(2.65rem,6vw,3.6rem)
  }
  .intro-bottom {
    margin-top:2rem
  }
  .intro-bottom>p {
    font-size:1.0625rem
  }
  .work-section {
    padding-top:1rem
  }
  .work-heading {
    gap:1.5rem;
    flex-direction:column;
    margin-bottom:2.5rem
  }
  .work-heading h2 {
    font-size:2.5rem
  }
  .system-feature {
    grid-template-columns:minmax(0,1fr) 48px;
    gap:1rem;
    padding:2rem 0
  }
  .system-name {
    grid-column:1;
    grid-row:1
  }
  .system-name h3 {
    font-size:clamp(1.8rem,4.5vw,2.8rem)
  }
  .system-name p {
    font-size:.9375rem;
    max-width:45ch;
    margin-top:.6rem
  }
  .system-price {
    grid-column:1;
    grid-row:2;
    font-size:.9375rem
  }
  .system-feature>.circle-arrow {
    grid-column:2;
    grid-row:1/3;
    width:46px;
    height:46px
  }
  .system-feature:hover .system-name {
    transform:none
  }
  .catalog-row {
    grid-template-columns:minmax(0,1fr) 24px;
    gap:.7rem 1rem;
    padding:1.3rem 0
  }
  .catalog-row h3 {
    grid-column:1;
    grid-row:1;
    font-size:1.2rem
  }
  .catalog-row p {
    grid-column:1;
    grid-row:2;
    font-size:.9375rem
  }
  .catalog-price {
    grid-column:1;
    grid-row:3;
    text-align:left;
    font-size:.875rem
  }
  .catalog-row>span:last-child {
    grid-column:2;
    grid-row:1
  }
  .method-grid {
    grid-template-columns:1fr;
    gap:3rem
  }
  .method-intro {
    position:static
  }
  .method-intro>.section-kicker {
    margin-bottom:1.8rem
  }
  .method-intro h2 {
    font-size:3.5rem
  }
  .method-intro>p:last-child {
    max-width:42ch
  }
  .method-item h3 {
    font-size:2rem
  }
  .method-item .accordion-body>p {
    font-size:1rem;
    max-width:52ch
  }
  .firm-grid {
    grid-template-columns:1fr 1fr;
    gap:2rem
  }
  .image-window {
    height:490px
  }
  .firm-copy h2 {
    font-size:3rem;
    margin-bottom:1.8rem
  }
  .firm-copy>p {
    font-size:1rem
  }
  .partner-link {
    margin-top:2rem;
    font-size:.8125rem;
    gap:.8rem
  }
  .firm-grid figcaption {
    font-size:.75rem
  }
  .footer-prompt {
    margin-bottom:2rem
  }
  .contact-invitation h2 {
    font-size:clamp(4.5rem,11vw,7rem)
  }
  .footer-bottom {
    gap:1.5rem;
    font-size:.75rem
  }
  .footer-bottom .wordmark {
    font-size:1.35rem
  }
}

@media(max-width:580px) {
  .section-space {
    padding-block:4rem
  }
  .intro-section {
    padding-top:5rem
  }
  .intro-statement {
    font-size:clamp(2.25rem,8vw,3rem);
    line-height:1.18
  }
  .intro-bottom {
    margin-top:1.6rem
  }
  .intro-bottom>p {
    font-size:1rem;
    line-height:1.8
  }
  .section-kicker {
    font-size:.875rem
  }
  .work-section {
    padding-top:1rem
  }
  .work-heading h2 {
    font-size:2.25rem
  }
  .work-heading p {
    font-size:.9375rem
  }
  .system-feature {
    padding:1.7rem 0;
    gap:.8rem 1rem
  }
  .system-name h3 {
    font-size:1.95rem;
    letter-spacing:-.05em;
    line-height:1.15
  }
  .system-name p {
    font-size:.9375rem;
    line-height:1.65
  }
  .system-price {
    font-size:.875rem;
    color:var(--ink-2)
  }
  .system-feature>.circle-arrow {
    width:38px;
    height:38px
  }
  .system-feature .circle-arrow>span {
    font-size:1.2rem
  }
  .system-feature {
    grid-template-columns:minmax(0,1fr) 38px
  }
  .all-systems>summary {
    font-size:.9375rem;
    padding:1.3rem 0 1.6rem
  }
  .catalog-row h3 {
    font-size:1.15rem
  }
  .method-intro h2 {
    font-size:3.15rem
  }
  .method-intro>p:last-child {
    font-size:1rem
  }
  .method-item>summary {
    padding:1.5rem 0
  }
  .method-item h3 {
    font-size:1.9rem
  }
  .method-item .accordion-body>p {
    padding-right:.3rem;
    font-size:1rem
  }
  .firm-grid {
    grid-template-columns:1fr;
    gap:2.5rem
  }
  .firm-grid figure {
    grid-row:2
  }
  .firm-copy h2 {
    font-size:3.6rem
  }
  .firm-copy>p {
    max-width:43ch
  }
  .partner-link {
    max-width:none;
    margin-top:1.7rem
  }
  .image-window {
    height:400px
  }
  .firm-grid figcaption {
    margin-top:.8rem
  }
  .credit-adaptation {
    display:inline;
    margin-left:.4rem
  }
  .foot {
    padding-top:4rem
  }
  .footer-prompt {
    font-size:.9375rem;
    margin-bottom:2rem
  }
  .contact-invitation {
    gap:1.5rem
  }
  .contact-invitation h2 {
    font-size:clamp(3.5rem,13vw,4.8rem)
  }
  .contact-arrow {
    width:65px;
    height:65px
  }
  .contact-arrow>span {
    font-size:2rem
  }
  .footer-email {
    font-size:1rem;
    margin-top:1.7rem
  }
  .footer-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.4rem 1rem;
    padding:1.5rem 0 2rem;
    margin-top:3.5rem
  }
  .footer-bottom .wordmark {
    margin:0;
    font-size:1.4rem
  }
  .footer-bottom>span {
    text-align:right
  }
  .footer-bottom>.back-top {
    text-align:right
  }
}

/* Native content remains usable if enhancements do not load. */
@media(scripting:none) {
  .menu-toggle {
    display:none
  }
  .desktop-nav {
    display:flex;
    gap:1rem;
    flex-wrap:wrap
  }
  .mast-inner {
    height:auto;
    min-height:80px;
    flex-wrap:wrap;
    padding-block:1rem
  }
  .header-contact {
    margin-left:auto
  }
  .desktop-nav {
    order:3;
    width:100%;
    font-size:.875rem
  }
}

/* The same restrained system carries through the service pages. */
.detail-page main {
  padding-top:104px
}

.detail-page main>section {
  padding-block:clamp(4rem,7vw,7rem)
}

.detail-page main>.hero {
  padding-top:2.5rem;
  padding-bottom:5rem
}

.back {
  display:inline-block;
  color:var(--ink-2);
  font-size:.875rem;
  margin-bottom:3.5rem;
  padding:.5rem 0
}

.back:hover {
  color:var(--oxide)
}

.project-heading {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);
  gap:6rem;
  align-items:start
}

.project-heading .k {
  font-size:.875rem;
  color:var(--ink-2);
  margin-bottom:1.5rem
}

.project-heading h1 {
  font-size:clamp(3rem,5.8vw,6.4rem);
  font-weight:400;
  letter-spacing:-.065em;
  line-height:1.04
}

.project-heading h1 .l {
  display:block
}

.project-heading h1 em {
  font-family:'Newsreader',Georgia,serif;
  font-weight:400;
  letter-spacing:-.045em;
  color:var(--oxide)
}

.lead {
  font-size:1.125rem;
  line-height:1.75;
  max-width:53ch;
  color:var(--ink-2)
}

.project-heading .lead {
  margin-top:2rem
}

.project-brief {
  padding:0 0 1.5rem 2.5rem;
  border-left:1px solid var(--rule)
}

.project-brief>.mono {
  font-size:.875rem;
  color:var(--ink-2)
}

.project-price {
  font-size:clamp(2.4rem,3.2vw,3.4rem);
  line-height:1.2;
  font-weight:400;
  letter-spacing:-.055em;
  margin:1.2rem 0 .8rem
}

.project-term {
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink-2)
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:54px;
  background:var(--ink);
  color:var(--sheet);
  padding:.9rem 1.2rem;
  border:1px solid var(--ink);
  font-size:.9375rem;
  line-height:1.4;
  transition:background .4s,color .4s,border-color .4s
}

.btn:hover {
  background:var(--oxide);
  border-color:var(--oxide);
  color:var(--on-accent)
}

.btn span {
  font-size:1.3rem;
  transition:transform .5s var(--ease)
}

.btn:hover span {
  transform:translate(3px,-3px)
}

.btn-ghost {
  background:transparent;
  color:var(--ink);
  border-color:var(--rule)
}

.project-brief .btn {
  width:100%;
  margin-top:1.5rem
}

.ownership {
  font-size:.8125rem;
  color:var(--ink-2);
  margin-top:1rem
}

.who {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 4rem;
  border-top:1px solid var(--rule);
  padding-top:2rem;
  margin-top:4rem
}

.who p {
  font-size:1rem;
  line-height:1.8;
  color:var(--ink-2)
}

.who .mono {
  display:block;
  font-size:.875rem;
  color:var(--ink);
  margin-bottom:.5rem
}

.who p:last-child:nth-child(3) {
  grid-column:1/-1;
  max-width:82ch
}

.who a {
  text-decoration:underline;
  text-underline-offset:4px
}

.band-2 {
  background:var(--panel)
}

.band-3 {
  background:#1b282b;
  color:#ecf0e9;
  --ink:#ecf0e9;
  --ink-2:#b5c3bc;
  --ink-3:#afc1b7;
  --sheet:#1b282b;
  --panel:#253536;
  --rule:#52615b;
  --rule-2:#3c5149;
  --oxide:#e1a085
}

.band-3 .btn {
  background:#ecf0e9;
  color:#1b282b;
  border-color:#ecf0e9
}

.band-3 .btn:hover {
  background:#d59b80;
  border-color:#d59b80
}

.display {
  font-family:'Archivo',Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.1
}

.display.big {
  font-size:clamp(2.5rem,4.2vw,4.5rem)
}

.display.mid {
  font-size:clamp(2rem,3vw,3rem)
}

.project-problem {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:4rem
}

.project-problem p {
  font-family:'Newsreader',Georgia,serif;
  font-size:clamp(1.8rem,2.8vw,3rem);
  line-height:1.35;
  letter-spacing:-.025em
}

.project-section-label {
  display:block;
  font-size:.875rem;
  color:var(--ink-2);
  margin-bottom:2.5rem
}

.rows {
  border-top:1px solid var(--rule)
}

.rows>.row {
  display:grid;
  grid-template-columns:42px minmax(170px,.7fr) 1.5fr;
  gap:2rem;
  padding:2rem 0;
  border-bottom:1px solid var(--rule);
  align-items:start
}

.rows .n {
  color:var(--ink-2);
  font-size:.875rem;
  padding-top:.2rem
}

.rows h3 {
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:-.04em
}

.rows p {
  font-size:1rem;
  line-height:1.8;
  color:var(--ink-2)
}

.go {
  display:inline-block;
  width:24px;
  color:var(--ink)
}

.go svg {
  width:24px;
  height:10px
}

.go path {
  stroke:currentColor;
  stroke-width:1.4;
  fill:none
}

.go:empty {
  display:none
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3rem
}

.cards .card {
  padding:1.7rem 0 1rem;
  border-top:1px solid var(--rule)
}

.cards .k {
  display:block;
  font-size:.8125rem;
  margin-bottom:1.4rem;
  color:var(--ink-2)
}

.cards h3 {
  font-weight:400;
  font-size:1.7rem;
  line-height:1.2;
  letter-spacing:-.045em;
  margin-bottom:1rem
}

.cards p {
  font-size:1rem;
  line-height:1.75;
  color:var(--ink-2)
}

.cards .go {
  margin-top:1.8rem;
  transition:transform .5s var(--ease)
}

.cards a:hover .go {
  transform:translateX(8px)
}

.cards a:hover h3 {
  color:var(--oxide)
}

.cards-4 {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.proof {
  display:flex;
  justify-content:space-between;
  gap:3rem;
  border-top:1px solid var(--rule);
  padding-top:2rem
}

.proof .k {
  font-size:.875rem;
  color:var(--ink-2)
}

.proof .fig {
  font-size:clamp(4rem,7vw,7rem);
  line-height:1.1;
  letter-spacing:-.065em;
  margin:1.2rem 0
}

.proof .cap {
  max-width:55ch;
  font-size:1rem;
  color:var(--ink-2)
}

.project-cta-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:6rem;
  align-items:center
}

.project-cta-layout .project-section-label {
  color:#b5c3bc;
  margin-bottom:1.5rem
}

.project-cta-layout .lead {
  font-size:1.0625rem
}

.project-cta-layout .btn {
  margin-top:1.8rem
}

.sec-title {
  margin-bottom:3rem
}

.detail-page .hero>h1 {
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.065em;
  margin:1.5rem 0 2rem
}

.detail-page .hero>h1 .l {
  display:block
}

.detail-page .hero>h1 .l:last-child {
  font-family:'Newsreader',Georgia,serif;
  font-style:italic
}

.detail-page .hero-cta {
  display:flex;
  gap:1rem;
  margin-top:2rem
}

.v3 .brain-svg text {
  font-family:'Archivo',Arial,sans-serif
}

.v3 .brain-ask .n {
  font-size:.875rem
}

.v3 .brain-ask .a {
  font-size:1rem
}

.v3 .brain-ask .cite-chip {
  background:transparent;
  min-width:32px;
  min-height:32px
}

.v3 .brain-svg .node:focus-visible {
  outline:2px solid var(--oxide);
  outline-offset:5px
}

@media(max-width:1100px) {
  .project-heading {
    gap:3rem
  }
  .project-brief {
    padding-left:1.7rem
  }
  .project-price {
    font-size:2.4rem
  }
  .project-problem {
    gap:2rem
  }
  .cards {
    gap:2rem
  }
  .project-cta-layout {
    gap:4rem
  }
}

@media(max-width:800px) {
  .detail-page main {
    padding-top:86px
  }
  .detail-page main>section {
    padding-block:3.5rem
  }
  .detail-page main>.hero {
    padding-top:1.5rem;
    padding-bottom:3rem
  }
  .back {
    margin-bottom:2.5rem
  }
  .project-heading {
    grid-template-columns:1fr;
    gap:3rem
  }
  .project-heading h1 {
    font-size:clamp(3rem,7vw,4.8rem)
  }
  .project-brief {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem 2rem;
    border-left:0;
    border-top:1px solid var(--rule);
    padding:1.6rem 0 0
  }
  .project-brief>.mono {
    grid-column:1/-1
  }
  .project-price {
    grid-column:1;
    grid-row:2;
    margin:.5rem 0 0
  }
  .project-term {
    grid-column:1;
    grid-row:3
  }
  .project-brief .btn {
    grid-column:2;
    grid-row:2/4;
    margin-top:0;
    align-self:center
  }
  .project-brief .ownership {
    grid-column:1/-1;
    margin-top:.5rem
  }
  .who {
    gap:1.5rem 2.5rem;
    margin-top:2.5rem
  }
  .project-problem {
    grid-template-columns:1fr;
    gap:1rem
  }
  .project-problem .project-section-label {
    margin-bottom:.5rem
  }
  .rows>.row {
    grid-template-columns:28px 1fr;
    gap:.8rem 1rem;
    padding:1.7rem 0
  }
  .rows>.row>p,.rows>.row>div:nth-child(3) {
    grid-column:2
  }
  .rows h3 {
    font-size:1.5rem
  }
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2rem
  }
  .project-cta-layout {
    grid-template-columns:1fr;
    gap:1.5rem
  }
  .detail-page .hero>h1 {
    font-size:clamp(3rem,7vw,5rem)!important
  }
  .v3 .brain {
    overflow:hidden
  }
}

@media(max-width:500px) {
  .detail-page main {
    padding-top:80px
  }
  .project-heading h1 {
    font-size:2.9rem
  }
  .project-heading .lead,.lead {
    font-size:1rem;
    line-height:1.8
  }
  .project-brief {
    display:block
  }
  .project-price {
    margin:1rem 0 .7rem
  }
  .project-brief .btn {
    margin-top:1.5rem
  }
  .project-brief .ownership {
    margin-top:1rem
  }
  .who {
    grid-template-columns:1fr;
    gap:1.7rem
  }
  .who p:last-child:nth-child(3) {
    grid-column:1
  }
  .who p {
    font-size:1rem
  }
  .cards {
    grid-template-columns:1fr;
    gap:1.5rem
  }
  .rows h3 {
    font-size:1.3rem
  }
  .rows p {
    font-size:1rem
  }
  .detail-page .hero-cta {
    flex-direction:column;
    align-items:stretch
  }
  .detail-page .hero>h1 {
    font-size:2.75rem!important
  }
  .sec-title {
    margin-bottom:2rem
  }
  .project-section-label {
    margin-bottom:1.7rem
  }
}

.connected-note {
  font-size:1rem;
  line-height:1.8;
  color:var(--ink-2);
  max-width:70ch;
  margin:0 0 2.5rem
}

.connected-note a {
  text-decoration:underline;
  text-underline-offset:4px
}

.cards .k {
  font-family:'Archivo',Arial,sans-serif;
  text-transform:none
}

@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root) {
    animation:none!important
  }
  .circle-arrow {
    transform:none!important
  }
  .firm-photo {
    will-change:auto
  }
}

/* The catalogue continues in the same visual language. */
.continuous-catalog {margin-top:0;border-bottom:0}
.continuous-catalog>summary {padding:2.3rem 0;border-bottom:1px solid var(--rule)}
.continuous-catalog .more-systems {padding:0}
.method-destination {display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.4rem 0;border-bottom:1px solid var(--rule)}
.method-destination h3 {font-size:clamp(1.8rem,3vw,3rem);font-weight:400;line-height:1.2;letter-spacing:-.045em;transition:color .4s,transform .6s var(--ease)}
.method-destination p {color:var(--ink-2);font-size:1rem;line-height:1.6;margin-top:.65rem}
.method-destination .circle-arrow {width:46px;height:46px;border-color:var(--rule)}
.method-destination:hover h3 {color:var(--oxide);transform:translateX(8px)}
.method-destination:hover .circle-arrow {color:#1b282b;background:#d59b80;border-color:#d59b80}
.firm-copy>.section-kicker {font-size:.875rem;margin-bottom:2rem}
.story-image-link {display:block}
.story-image-link img {transition:filter .7s var(--ease)}
.story-image-link:hover img {filter:grayscale(35%)}
.anthropic-section {background:#eadbd0;color:#352b25}
.anthropic-grid {display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(3rem,8vw,8rem)}
.anthropic-signature>span {font-size:.875rem}
.anthropic-signature>div {display:flex;align-items:center;gap:1.2rem;margin-top:2rem}
.anthropic-signature>div>span {font:400 clamp(3.4rem,6vw,6rem)/1 'Newsreader',Georgia,serif;letter-spacing:-.04em}
.anthropic-signature img {width:clamp(48px,5vw,72px);height:auto;mix-blend-mode:multiply}
.anthropic-intro h2 {margin-bottom:2rem}
.anthropic-intro>p {font-size:1.0625rem;line-height:1.8;max-width:39ch}
.anthropic-intro .partnership-attribution {font-size:.875rem;margin-top:2rem;max-width:43ch;color:#615047}
.vibelab-credit {display:block;font-size:.75rem;margin-top:.4rem;color:#b5c3bc}
@media(max-width:700px){.anthropic-grid{grid-template-columns:1fr;gap:4rem}.method-destination{gap:1rem;padding:1.8rem 0}.method-destination p{font-size:.9375rem}.method-destination .circle-arrow{width:40px;height:40px}}
/* The actual 100 Vandam building carries the story. */
.firm-photo {object-position:50% 50%;filter:saturate(.55);transform:none;will-change:auto}
.firm-grid figcaption>span {display:block}
.story-image-link:hover img {filter:saturate(.8)}

/* A quiet studio signature, and a clear way back. */
.brand-lockup {display:inline-flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.brand-lockup>.brand-descriptor {font:400 .6875rem/1.25 'Archivo',Arial,sans-serif;letter-spacing:.015em;white-space:nowrap}
.mast .brand-lockup {font-size:2rem}
.footer-bottom .brand-lockup {gap:.55rem}
.breadcrumb {display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8125rem;line-height:1.6;color:var(--ink-2)}
.breadcrumb>a {display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 0;transition:color .3s}
.breadcrumb-turn {font-size:1.2rem;transition:transform .45s var(--ease)}
.breadcrumb>a:hover {color:var(--oxide)}
.breadcrumb>a:hover .breadcrumb-turn {transform:translate(-3px,-2px)}
.breadcrumb-rule {width:36px;height:1px;background:var(--rule);flex-shrink:0}
.breadcrumb>[aria-current] {color:var(--ink)}
.detail-page .hero>.breadcrumb {margin-bottom:3.3rem}
.method-destination .circle-arrow {border-color:var(--control-border,#849a8e)}
@media(max-width:900px){.mast .brand-lockup{font-size:1.75rem}.mast-inner{gap:1.4rem}.desktop-nav{gap:1.4rem}}
@media(max-width:700px){.mast .brand-lockup{font-size:1.55rem}.brand-lockup>.brand-descriptor{font-size:.6875rem;letter-spacing:0}.mast-inner,.mast.has-scrolled .mast-inner{height:86px}.breadcrumb{gap:.7rem;font-size:.75rem}.breadcrumb-rule{width:24px}}

/* Finish the approach before opening the catalogue. */
.work-section {background:var(--sheet);padding-top:clamp(5rem,9vw,10rem);padding-bottom:clamp(5rem,9vw,10rem);border-top:1px solid var(--rule)}
.work-section .work-heading {margin-bottom:4rem}
.work-section .work-heading h2 {font-size:clamp(2.6rem,5vw,5.2rem)}
.intro-section {padding-bottom:clamp(5rem,8vw,9rem)}
@media(max-width:650px){.work-section .work-heading{margin-bottom:2.5rem}.work-section .work-heading h2{font-size:2.75rem}}