@layer atlas-case-study {
  .atlas-case-study {
    --atlas-forest: #18261e;
    --atlas-clay: #c95b36;
    --atlas-olive: #607a4b;
    --atlas-oat: #f1e5ca;
    --atlas-cream: #fbf6ea;
    --atlas-line: rgba(24, 38, 30, .24);
  }

  .atlas-case-study main {
    overflow: clip;
  }

  .atlas-hero {
    padding-block: clamp(3rem, 6vw, 6.5rem) 0;
    border-bottom: var(--line);
    background: var(--paper);
  }

  .atlas-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    gap: clamp(2rem, 7vw, 8rem);
    align-items: end;
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
  }

  .atlas-hero-copy .eyebrow {
    margin-bottom: 1rem;
    color: var(--red);
  }

  .atlas-hero h1 {
    max-width: none;
    font-size: clamp(5rem, 12vw, 12rem);
    line-height: .72;
  }

  .atlas-hero-copy .lede {
    justify-self: end;
    max-width: 26ch;
  }

  .atlas-hero-visual {
    position: relative;
    min-height: clamp(35rem, 63vw, 61rem);
    overflow: hidden;
    border: var(--line);
    border-bottom: 0;
    background: var(--atlas-oat);
    color: var(--atlas-forest);
    isolation: isolate;
  }

  .atlas-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
      linear-gradient(var(--atlas-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--atlas-line) 1px, transparent 1px);
    background-size: clamp(3rem, 7vw, 7rem) clamp(3rem, 7vw, 7rem);
    opacity: .55;
  }

  .atlas-hero-index,
  .atlas-hero-location {
    position: absolute;
    z-index: 5;
    top: 1.3rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
  }

  .atlas-hero-index { left: 1.3rem; }
  .atlas-hero-location { right: 1.3rem; }

  .atlas-sun {
    position: absolute;
    z-index: -1;
    top: 7%;
    right: 9%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--atlas-clay);
  }

  .atlas-mountain {
    position: absolute;
    left: 50%;
    width: 64%;
    aspect-ratio: 1.9 / 1;
    border: clamp(1.1rem, 2.5vw, 2.75rem) solid var(--atlas-forest);
    border-right: 0;
    border-bottom: 0;
    transform: translateX(-50%) rotate(45deg) skew(-12deg, -12deg);
  }

  .atlas-mountain--back {
    z-index: 0;
    top: 18%;
    opacity: .16;
  }

  .atlas-mountain--front {
    z-index: 1;
    top: 31%;
    width: 48%;
  }

  .atlas-wordmark {
    position: absolute;
    z-index: 3;
    right: 4%;
    bottom: 11%;
    left: 4%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .atlas-wordmark strong {
    font: 900 clamp(6.7rem, 19vw, 19rem)/.63 var(--display);
    font-stretch: 66%;
    letter-spacing: -.1em;
  }

  .atlas-wordmark span {
    padding-bottom: .65rem;
    font: 780 clamp(2.2rem, 6vw, 6rem)/.8 var(--display);
    font-stretch: 72%;
    letter-spacing: -.055em;
  }

  .atlas-hero-caption {
    position: absolute;
    z-index: 5;
    right: 1.3rem;
    bottom: 1.3rem;
    left: 1.3rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .8rem;
    border-top: 1px solid currentColor;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .atlas-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-inline: var(--line);
  }

  .atlas-meta > div {
    padding: 1.15rem;
    border-right: var(--line);
  }

  .atlas-meta > div:last-child {
    border-right: 0;
  }

  .atlas-meta dt {
    color: var(--muted);
    font-size: .66rem;
    font-weight: 760;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .atlas-meta dd {
    margin-top: .45rem;
    font-weight: 670;
  }

  .atlas-section {
    padding-block: clamp(5rem, 9vw, 9rem);
    border-bottom: var(--line);
  }

  .atlas-intro-grid,
  .atlas-delivery-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(22rem, 1.18fr);
    gap: clamp(3rem, 10vw, 11rem);
    align-items: start;
  }

  .atlas-intro h2,
  .atlas-delivery-section h2 {
    max-width: 9ch;
    margin-top: 1rem;
    font-size: clamp(3.6rem, 7vw, 7.5rem);
  }

  .atlas-intro-copy .lede {
    max-width: 31ch;
  }

  .atlas-brief-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: clamp(3rem, 5vw, 5rem);
    padding-top: 1.2rem;
    border-top: var(--line);
  }

  .atlas-brief-grid h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.8rem, 2.5vw, 2.7rem);
  }

  .atlas-brief-grid p,
  .atlas-section-head > p {
    color: var(--muted);
  }

  .atlas-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr);
    gap: clamp(2rem, 8vw, 9rem);
    align-items: end;
    margin-bottom: clamp(3rem, 6vw, 6rem);
  }

  .atlas-section-head h2 {
    max-width: 10ch;
    margin-top: .9rem;
    font-size: clamp(3.8rem, 7vw, 7.4rem);
  }

  .atlas-section-head > p {
    justify-self: end;
    max-width: 34ch;
  }

  .atlas-brand-section {
    background: var(--atlas-cream);
  }

  .atlas-brand-board {
    display: grid;
    grid-template-columns: 1.15fr .55fr .65fr;
    grid-template-rows: minmax(23rem, auto) minmax(13rem, auto);
    border: 1px solid var(--atlas-forest);
    background: var(--atlas-oat);
    color: var(--atlas-forest);
  }

  .atlas-brand-board > div {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: clamp(1.2rem, 2.5vw, 2.25rem);
    border-right: 1px solid var(--atlas-forest);
    border-bottom: 1px solid var(--atlas-forest);
  }

  .atlas-brand-primary {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .atlas-brand-compact {
    display: grid;
    place-items: center;
    background: var(--atlas-forest);
    color: var(--atlas-oat);
  }

  .atlas-brand-type {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-right: 0 !important;
    background: var(--atlas-clay);
  }

  .atlas-brand-colours {
    grid-column: 2 / 4;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .atlas-brand-code {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .atlas-symbol {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 48%;
    aspect-ratio: 1;
    transform: translateX(-50%);
  }

  .atlas-symbol::before,
  .atlas-symbol::after,
  .atlas-symbol i,
  .atlas-symbol b {
    content: "";
    position: absolute;
    border: clamp(.7rem, 1.4vw, 1.3rem) solid currentColor;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg) skew(-12deg, -12deg);
  }

  .atlas-symbol::before { inset: 15% 21% 21% 15%; opacity: .22; }
  .atlas-symbol::after { inset: 29% 12% 12% 29%; }
  .atlas-symbol i { inset: 43% 33% 0 43%; border-width: clamp(.45rem, .8vw, .75rem); }
  .atlas-symbol b { display: none; }

  .atlas-brand-primary > strong {
    font: 900 clamp(5rem, 10vw, 10rem)/.65 var(--display);
    font-stretch: 66%;
    letter-spacing: -.1em;
  }

  .atlas-brand-primary > small {
    margin-top: 1rem;
    font-size: .67rem;
    font-weight: 760;
    letter-spacing: .16em;
  }

  .atlas-compact-symbol {
    font: 900 clamp(9rem, 18vw, 17rem)/.75 var(--display);
    font-stretch: 66%;
    letter-spacing: -.12em;
  }

  .atlas-brand-type > strong {
    font: 900 clamp(6rem, 12vw, 11rem)/.65 var(--display);
    font-stretch: 75%;
    letter-spacing: -.08em;
  }

  .atlas-brand-type > p {
    margin-top: 1rem;
    font-size: .85rem;
  }

  .atlas-brand-colours ul {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
  }

  .atlas-brand-colours li {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
    padding: 2.2rem 1rem 0;
    border-right: 1px solid var(--atlas-forest);
  }

  .atlas-brand-colours li:last-child {
    border-right: 0;
  }

  .atlas-brand-colours i {
    display: block;
    min-height: 4.5rem;
    background: var(--swatch);
    border: 1px solid rgba(24, 38, 30, .35);
  }

  .atlas-brand-colours span {
    font-size: .64rem;
    font-weight: 730;
    letter-spacing: .06em;
  }

  .atlas-application {
    padding-block: clamp(5rem, 9vw, 9rem);
    border-bottom: var(--line);
    background: var(--atlas-forest);
    color: var(--atlas-oat);
  }

  .atlas-section-head--light > p {
    color: rgba(241, 229, 202, .7);
  }

  .atlas-storefront {
    position: relative;
    min-height: clamp(31rem, 56vw, 54rem);
    overflow: hidden;
    border: 1px solid rgba(241, 229, 202, .45);
    background: #9eb0a2;
  }

  .atlas-storefront-sky {
    position: absolute;
    inset: 0 0 40%;
    background: linear-gradient(#b6c5b6, #869a8b);
  }

  .atlas-building {
    position: absolute;
    right: 5%;
    bottom: 11%;
    left: 5%;
    height: 69%;
    display: grid;
    grid-template-columns: 1.25fr .45fr 1fr;
    grid-template-rows: 27% 73%;
    border: .7rem solid #d8c8a6;
    background: #d8c8a6;
  }

  .atlas-fascia {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2rem;
    align-items: center;
    padding: 1rem 1.4rem;
    background: var(--atlas-forest);
    color: var(--atlas-oat);
  }

  .atlas-fascia strong {
    font: 900 clamp(2.1rem, 5.3vw, 5.5rem)/.7 var(--display);
    font-stretch: 70%;
    letter-spacing: -.07em;
  }

  .atlas-fascia small {
    font-size: clamp(.48rem, .75vw, .72rem);
    font-weight: 760;
    letter-spacing: .14em;
  }

  .atlas-mini-mark {
    display: grid;
    width: clamp(2.8rem, 5vw, 5rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid currentColor;
    font: 900 clamp(2rem, 4vw, 4rem)/1 var(--display);
  }

  .atlas-window,
  .atlas-door {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-top: .7rem solid #d8c8a6;
    border-right: .7rem solid #d8c8a6;
    background:
      linear-gradient(135deg, rgba(255,255,255,.2), transparent 45%),
      #31443b;
    color: var(--atlas-oat);
  }

  .atlas-window--right {
    border-right: 0;
  }

  .atlas-window span,
  .atlas-door span {
    position: relative;
    z-index: 2;
    padding: 1rem;
    font: 800 clamp(1.7rem, 3.5vw, 3.8rem)/.85 var(--display);
    font-stretch: 74%;
    letter-spacing: -.045em;
    text-align: center;
  }

  .atlas-door span {
    font-size: clamp(.8rem, 1.5vw, 1.4rem);
    line-height: 1.3;
    letter-spacing: .12em;
  }

  .atlas-window-mark {
    font-size: clamp(8rem, 18vw, 18rem) !important;
    color: var(--atlas-clay);
  }

  .atlas-pavement {
    position: absolute;
    inset: auto 0 0;
    height: 18%;
    background: #887e6b;
  }

  .atlas-pavement span {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: .58rem;
    font-weight: 760;
    letter-spacing: .1em;
  }

  .atlas-menu-section {
    background: var(--paper);
  }

  .atlas-menu-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: stretch;
  }

  .atlas-menu-spread {
    min-height: clamp(33rem, 52vw, 50rem);
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1rem, 3vw, 3rem);
    border: var(--line);
    background: var(--paper-2);
  }

  .atlas-menu-page {
    position: relative;
    min-width: 0;
    padding: clamp(1.2rem, 2.5vw, 2.2rem);
    border: 1px solid var(--atlas-forest);
    background: var(--atlas-oat);
    color: var(--atlas-forest);
  }

  .atlas-menu-cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
      linear-gradient(145deg, transparent 0 53%, var(--atlas-clay) 53.2% 68%, transparent 68.2%),
      var(--atlas-oat);
  }

  .atlas-menu-cover::before {
    content: "";
    position: absolute;
    top: 21%;
    right: 15%;
    width: 46%;
    aspect-ratio: 1;
    border: 1.1rem solid var(--atlas-forest);
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg) skew(-12deg, -12deg);
  }

  .atlas-menu-cover > span,
  .atlas-menu-cover > small {
    position: relative;
    z-index: 2;
    font-size: .63rem;
    font-weight: 780;
    letter-spacing: .14em;
  }

  .atlas-menu-cover strong {
    position: relative;
    z-index: 2;
    font: 900 clamp(4rem, 8vw, 8rem)/.68 var(--display);
    font-stretch: 68%;
    letter-spacing: -.08em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .atlas-menu-inside header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid currentColor;
  }

  .atlas-menu-inside header:first-child {
    margin-top: 0;
  }

  .atlas-menu-inside header strong {
    font: 850 clamp(2rem, 4vw, 4rem)/.8 var(--display);
    letter-spacing: -.05em;
  }

  .atlas-menu-inside header span {
    font-size: .7rem;
    font-weight: 800;
  }

  .atlas-menu-inside ul {
    list-style: none;
  }

  .atlas-menu-inside li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding-block: .8rem;
    border-bottom: 1px solid var(--atlas-line);
    font-size: clamp(.75rem, 1.05vw, 1rem);
  }

  .atlas-menu-inside b {
    font-weight: 690;
  }

  .atlas-menu-notes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 3vw, 2.7rem);
    border: var(--line);
    background: var(--atlas-forest);
    color: var(--atlas-oat);
  }

  .atlas-menu-notes dl {
    margin-top: 5rem;
  }

  .atlas-menu-notes dl > div {
    padding-block: 1rem;
    border-top: 1px solid rgba(241, 229, 202, .35);
  }

  .atlas-menu-notes dt {
    color: rgba(241, 229, 202, .62);
    font-size: .62rem;
    font-weight: 760;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .atlas-menu-notes dd {
    margin-top: .45rem;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    font-weight: 650;
  }

  .atlas-packaging-section {
    background: var(--atlas-cream);
  }

  .atlas-packaging-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr 1fr;
    border: 1px solid var(--atlas-forest);
  }

  .atlas-packaging-card {
    position: relative;
    min-height: clamp(30rem, 43vw, 43rem);
    overflow: hidden;
    border-right: 1px solid var(--atlas-forest);
    background: var(--atlas-oat);
    color: var(--atlas-forest);
  }

  .atlas-packaging-card:last-child {
    border-right: 0;
  }

  .atlas-object-label {
    position: absolute;
    z-index: 5;
    top: 1rem;
    left: 1rem;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .atlas-cup {
    position: absolute;
    top: 17%;
    left: 13%;
    width: 44%;
    height: 58%;
    border: 1px solid var(--atlas-forest);
    border-radius: 8% 8% 19% 19% / 3% 3% 7% 7%;
    background: #f8f3e8;
    transform: rotate(-4deg);
  }

  .atlas-cup::before {
    content: "";
    position: absolute;
    top: -5%;
    left: -4%;
    width: 108%;
    height: 9%;
    border: 1px solid var(--atlas-forest);
    background: var(--atlas-forest);
  }

  .atlas-cup > span {
    position: absolute;
    top: 28%;
    left: 50%;
    font: 900 clamp(5rem, 9vw, 9rem)/1 var(--display);
    transform: translateX(-50%);
  }

  .atlas-cup > i {
    position: absolute;
    right: 0;
    bottom: 9%;
    left: 0;
    height: 17%;
    background: var(--atlas-clay);
  }

  .atlas-sleeve {
    position: absolute;
    right: 8%;
    bottom: 13%;
    width: 57%;
    padding: 1.1rem;
    border: 1px solid var(--atlas-forest);
    background: var(--atlas-olive);
    color: var(--atlas-oat);
    transform: rotate(7deg);
  }

  .atlas-sleeve strong {
    display: block;
    font: 900 clamp(2rem, 4vw, 4rem)/.75 var(--display);
    letter-spacing: -.06em;
  }

  .atlas-sleeve small {
    display: block;
    margin-top: .7rem;
    font-size: .5rem;
    font-weight: 780;
    letter-spacing: .1em;
  }

  .atlas-bag {
    position: absolute;
    right: 11%;
    bottom: 8%;
    left: 11%;
    height: 74%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    border: 1px solid var(--atlas-forest);
    background: #caa66d;
  }

  .atlas-bag::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 17%;
    width: 66%;
    height: 25%;
    border: .5rem solid var(--atlas-forest);
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
  }

  .atlas-bag > i {
    position: absolute;
    top: 17%;
    left: 50%;
    width: 46%;
    aspect-ratio: 1;
    border: .8rem solid var(--atlas-forest);
    border-right: 0;
    border-bottom: 0;
    transform: translateX(-50%) rotate(45deg) skew(-12deg, -12deg);
  }

  .atlas-bag strong {
    font: 900 clamp(3rem, 6vw, 6rem)/.7 var(--display);
    letter-spacing: -.07em;
  }

  .atlas-bag small {
    margin-top: .55rem;
    font-size: .58rem;
    font-weight: 760;
    letter-spacing: .14em;
  }

  .atlas-bag > span {
    align-self: flex-end;
    margin-top: 1.7rem;
    padding: .45rem .65rem;
    border: 1px solid currentColor;
    font-size: .52rem;
    font-weight: 780;
    letter-spacing: .12em;
  }

  .atlas-label-card {
    background: var(--atlas-clay);
  }

  .atlas-label {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid var(--atlas-forest);
    background: var(--atlas-oat);
  }

  .atlas-label--round {
    top: 17%;
    left: 13%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    font: 900 clamp(5rem, 10vw, 9rem)/1 var(--display);
    transform: rotate(-9deg);
  }

  .atlas-label--wide {
    right: 7%;
    bottom: 18%;
    width: 70%;
    min-height: 8rem;
    display: block;
    padding: 1rem;
    transform: rotate(6deg);
  }

  .atlas-label--wide strong {
    display: block;
    font: 900 clamp(1.8rem, 3.6vw, 3.5rem)/.75 var(--display);
    letter-spacing: -.06em;
  }

  .atlas-label--wide small {
    display: block;
    margin-top: 1rem;
    font-size: .55rem;
    font-weight: 780;
    letter-spacing: .13em;
  }

  .atlas-label--small {
    right: 9%;
    top: 26%;
    width: 27%;
    aspect-ratio: 1.3;
    background: var(--atlas-forest);
    color: var(--atlas-oat);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    transform: rotate(12deg);
  }

  .atlas-digital-section {
    background: #101511;
  }

  .atlas-digital-grid {
    display: grid;
    grid-template-columns: 1fr 1fr .8fr;
    gap: clamp(1rem, 2vw, 1.8rem);
    align-items: center;
  }

  .atlas-social-card {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(1.2rem, 2.5vw, 2.2rem);
    border: 1px solid rgba(241, 229, 202, .4);
  }

  .atlas-social-card::after {
    content: "A";
    position: absolute;
    z-index: 0;
    right: -.09em;
    bottom: -.2em;
    font: 900 clamp(11rem, 22vw, 21rem)/.75 var(--display);
    font-stretch: 66%;
    opacity: .13;
  }

  .atlas-social-card > * {
    position: relative;
    z-index: 2;
  }

  .atlas-social-card--one {
    background: var(--atlas-clay);
    color: var(--atlas-oat);
  }

  .atlas-social-card--two {
    background: var(--atlas-olive);
    color: var(--atlas-oat);
  }

  .atlas-social-card > span {
    align-self: flex-start;
    padding: .45rem .6rem;
    border: 1px solid currentColor;
    font-size: .6rem;
    font-weight: 780;
    letter-spacing: .13em;
  }

  .atlas-social-card > strong {
    font: 900 clamp(3.3rem, 7vw, 7.3rem)/.7 var(--display);
    font-stretch: 70%;
    letter-spacing: -.075em;
  }

  .atlas-social-card > small {
    font-size: .58rem;
    font-weight: 760;
    letter-spacing: .11em;
  }

  .atlas-phone {
    position: relative;
    width: min(100%, 23rem);
    aspect-ratio: 9 / 18;
    justify-self: center;
    overflow: hidden;
    padding: 1rem;
    border: .45rem solid #050706;
    border-radius: 2.5rem;
    background: var(--atlas-oat);
    color: var(--atlas-forest);
  }

  .atlas-phone-top {
    display: flex;
    justify-content: space-between;
    font-size: .5rem;
    font-weight: 780;
  }

  .atlas-profile-mark {
    width: 30%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 12% auto 6%;
    border-radius: 50%;
    background: var(--atlas-clay);
    color: var(--atlas-oat);
    font: 900 clamp(2.5rem, 5vw, 5rem)/1 var(--display);
  }

  .atlas-phone > strong,
  .atlas-phone > small {
    display: block;
    text-align: center;
  }

  .atlas-phone > strong {
    font-size: clamp(.75rem, 1.1vw, 1rem);
  }

  .atlas-phone > small {
    margin-top: .25rem;
    font-size: .55rem;
  }

  .atlas-profile-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    margin-block: 1rem;
  }

  .atlas-profile-actions i {
    height: 1.5rem;
    border: 1px solid var(--atlas-forest);
    border-radius: .3rem;
  }

  .atlas-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .15rem;
  }

  .atlas-profile-grid b {
    aspect-ratio: 1;
    background: var(--atlas-olive);
  }

  .atlas-profile-grid b:nth-child(2),
  .atlas-profile-grid b:nth-child(5) { background: var(--atlas-clay); }

  .atlas-profile-grid b:nth-child(3),
  .atlas-profile-grid b:nth-child(4) { background: var(--atlas-forest); }

  .atlas-delivery-section {
    background: var(--paper);
  }

  .atlas-delivery-grid .lede {
    max-width: 34ch;
  }

  .atlas-deliverables {
    margin-top: clamp(2.5rem, 5vw, 5rem);
    list-style: none;
    border-top: var(--line);
  }

  .atlas-deliverables li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: var(--line);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 640;
  }

  .atlas-deliverables span {
    color: var(--red);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
  }

  @media (hover: hover) and (pointer: fine) {
    .atlas-packaging-card,
    .atlas-social-card {
      transition: transform 300ms var(--ease);
    }

    .atlas-packaging-card:hover,
    .atlas-social-card:hover {
      z-index: 3;
      transform: translateY(-.45rem);
    }
  }

  @media (max-width: 68rem) {
    .atlas-hero-copy,
    .atlas-section-head,
    .atlas-intro-grid,
    .atlas-delivery-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .atlas-hero-copy .lede,
    .atlas-section-head > p {
      justify-self: start;
    }

    .atlas-brand-board {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(28rem, auto) minmax(18rem, auto) auto;
    }

    .atlas-brand-primary {
      grid-column: 1 / 3;
      grid-row: auto;
      border-right: 0 !important;
    }

    .atlas-brand-type {
      border-right: 0 !important;
    }

    .atlas-brand-colours {
      grid-column: 1 / 3;
    }

    .atlas-menu-layout {
      grid-template-columns: 1fr;
    }

    .atlas-menu-notes dl {
      margin-top: 2rem;
    }

    .atlas-packaging-grid {
      grid-template-columns: 1fr 1fr;
    }

    .atlas-packaging-card:nth-child(2) {
      border-right: 0;
    }

    .atlas-packaging-card:last-child {
      grid-column: 1 / 3;
      border-top: 1px solid var(--atlas-forest);
    }

    .atlas-digital-grid {
      grid-template-columns: 1fr 1fr;
    }

    .atlas-phone {
      grid-column: 1 / 3;
      width: min(62%, 21rem);
    }
  }

  @media (max-width: 38rem) {
    .atlas-hero {
      padding-top: 2.5rem;
    }

    .atlas-hero h1 {
      font-size: clamp(4.8rem, 24vw, 7.2rem);
    }

    .atlas-hero-visual {
      min-height: 32rem;
    }

    .atlas-hero-location {
      display: none;
    }

    .atlas-sun {
      top: 11%;
      right: -3%;
      width: 52%;
    }

    .atlas-mountain--back {
      top: 24%;
      width: 87%;
    }

    .atlas-mountain--front {
      top: 35%;
      width: 67%;
    }

    .atlas-wordmark {
      display: block;
      bottom: 13%;
    }

    .atlas-wordmark strong {
      display: block;
      font-size: clamp(6rem, 27vw, 8rem);
    }

    .atlas-wordmark span {
      display: block;
      margin-top: 1rem;
      font-size: 2.6rem;
    }

    .atlas-hero-caption {
      font-size: .48rem;
    }

    .atlas-meta {
      grid-template-columns: repeat(2, 1fr);
    }

    .atlas-meta > div:nth-child(2) {
      border-right: 0;
    }

    .atlas-meta > div:nth-child(-n+2) {
      border-bottom: var(--line);
    }

    .atlas-brief-grid {
      grid-template-columns: 1fr;
    }

    .atlas-brand-board {
      display: block;
    }

    .atlas-brand-board > div {
      min-height: 18rem;
      border-right: 0;
      border-bottom: 1px solid var(--atlas-forest) !important;
    }

    .atlas-brand-primary {
      min-height: 30rem !important;
    }

    .atlas-brand-colours {
      min-height: 25rem !important;
    }

    .atlas-brand-colours ul {
      grid-template-columns: repeat(2, 1fr);
    }

    .atlas-brand-colours li {
      border-bottom: 1px solid var(--atlas-forest);
    }

    .atlas-brand-colours li:nth-child(2) {
      border-right: 0;
    }

    .atlas-brand-colours li:nth-child(n+3) {
      border-bottom: 0;
    }

    .atlas-building {
      right: 3%;
      left: 3%;
      grid-template-columns: 1fr .48fr;
    }

    .atlas-fascia {
      grid-column: 1 / 3;
      grid-template-columns: auto 1fr;
    }

    .atlas-fascia small {
      display: none;
    }

    .atlas-window--right {
      display: none;
    }

    .atlas-door {
      border-right: 0;
    }

    .atlas-menu-spread {
      min-height: 37rem;
      grid-template-columns: .68fr 1.32fr;
      padding: .7rem;
    }

    .atlas-menu-page {
      padding: 1rem;
    }

    .atlas-menu-inside header strong {
      font-size: 1.7rem;
    }

    .atlas-menu-inside li {
      font-size: .64rem;
    }

    .atlas-packaging-grid {
      display: block;
    }

    .atlas-packaging-card,
    .atlas-packaging-card:nth-child(2),
    .atlas-packaging-card:last-child {
      min-height: 31rem;
      border-right: 0;
      border-bottom: 1px solid var(--atlas-forest);
    }

    .atlas-digital-grid {
      grid-template-columns: 1fr;
    }

    .atlas-phone {
      grid-column: auto;
      width: min(76%, 20rem);
    }
  }
}