/*
  Loomwest private site study (2026-10-12): layout replica stylesheet.
  Written by Loomwest. Geometry and timing values are the measurements recorded in STUDY.md.
  Fonts: Montserrat (as studied) and Google substitutes for the studied licensed family:
    light body   -> Red Hat Display 300  (width error 1.0 %)
    regular      -> Urbanist 400         (0.9 %)
    bold labels  -> Urbanist 700         (1.6 %)
    narrow       -> Asap Condensed 400 / 600 (1.1 %)
*/

/* In-flow sections never size from the viewport without a cap (min(100vh, 980px)), so a frame that sizes itself
   to its content cannot grow without end. Fixed, viewport-pinned layers keep plain vh. */
/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #111111;          /* body text */
  --char: #1f1e1d;         /* dark panels, buttons */
  --char-2: #171615;       /* footer */
  --char-3: #1d1c1b;
  --smoke: #2b2a2c;        /* menu ghost text */
  --paper: #ffffff;
  --mist: #f9f9f9;         /* light section ground */
  --fog: #f2f2f2;          /* image cover, form fields */
  --fog-2: #f6f6f6;        /* giant background words */
  --gray-1: #464646;
  --gray-2: #5b5b5a;
  --gray-3: #9c9c9c;
  --gray-4: #bbbbbb;
  --muted: #6f6f6f;        /* secondary copy */
  --line: #eaeaea;
  --flame: #f84525;        /* the one accent */
  --flame-2: #ff6b50;      /* accent hover fill */

  --e1: cubic-bezier(.475, .425, 0, .995);  /* primary: long soft tail */
  --e2: cubic-bezier(.835, -.005, .06, 1);  /* late, decisive */
  --e3: cubic-bezier(.19, 1, .22, 1);       /* expo out */
  --e4: cubic-bezier(.63, .03, .21, 1);     /* CSS in-out */
  --e4js: cubic-bezier(.63, .03, 0, 1);     /* the split-text curve */
  --btn-d: .45s;

  --wrap: 1200px;
  --f-light: "Red Hat Display", "Neue Plak Light", sans-serif;
  --f-reg: "Urbanist", sans-serif;
  --f-bold: "Urbanist", sans-serif;
  --f-narrow: "Asap Condensed", sans-serif;
  --f-head: "Montserrat", sans-serif;
}
@media (max-width: 1440px) { :root { --wrap: 1080px; } }
@media (max-width: 1280px) { :root { --wrap: 960px; } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-light); font-weight: 300; font-size: 20px; line-height: 36px; letter-spacing: .03em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.is-mobile body { overflow: auto; }
@media (max-width: 768px) { body { font-size: 16px; line-height: 26px; } }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* momentum scroll shell: content is fixed and moved by motion.js; the spacer gives the page its height */
.is-browser .ms-content { position: fixed; top: 0; left: 0; width: 100vw; z-index: 1; will-change: transform; }
.is-mobile .ms-content { position: relative; overflow: hidden; }
.ms-spacer { width: 1px; }
.is-mobile .ms-spacer { display: none; }

/* page fade between pages: 500 ms, primary curve */
.page-fade { opacity: 0; transition: opacity .5s var(--e1); }
.page-fade.is-in { opacity: 1; }

/* ------------------------------------------------------------------ type scale */
.t-h1, .t-h2, .t-h3, .t-h4, .t-bg1, .t-bg2 { font-family: var(--f-head); font-weight: 700; transform: scaleX(.98); transform-origin: left; }
.t-h1 { font-size: 54px; line-height: 74px; letter-spacing: 0; }
.t-h2 { font-size: 75px; line-height: 95px; letter-spacing: -.01em; }
.t-h3 { font-size: 72px; line-height: 90px; letter-spacing: -.01em; }
.t-h4 { font-size: 100px; line-height: 130px; letter-spacing: 0; }
.t-h5 { font-family: var(--f-head); font-weight: 700; font-size: 46px; line-height: 58px; letter-spacing: .02em; }
.t-h6 { font-family: var(--f-head); font-weight: 700; font-size: 30px; line-height: 44px; letter-spacing: .02em; }
.t-h7 { font-family: var(--f-head); font-weight: 700; font-size: 26px; line-height: 40px; letter-spacing: .02em; }
.t-h8 { font-family: var(--f-head); font-weight: 500; font-size: 26px; line-height: 40px; letter-spacing: .02em; }
.t-h9 { font-family: var(--f-head); font-weight: 400; font-size: 26px; line-height: 40px; letter-spacing: .02em; }
.t-h10 { font-family: var(--f-head); font-weight: 500; font-size: 22px; line-height: 36px; letter-spacing: .02em; }
.t-ribbon { font-family: var(--f-narrow); font-weight: 600; font-size: 16px; line-height: 32px; letter-spacing: .6em; text-transform: uppercase; }
.t-sub1 { font-family: var(--f-light); font-weight: 300; font-size: 20px; line-height: 36px; letter-spacing: .03em; }
.t-sub2 { font-family: var(--f-head); font-weight: 700; font-size: 36px; line-height: 70px; letter-spacing: .02em; }
.t-sub3 { font-family: var(--f-reg); font-weight: 400; font-size: 16px; line-height: 32px; letter-spacing: .05em; }
.t-sub4 { font-family: var(--f-narrow); font-weight: 400; font-size: 14px; line-height: 28px; letter-spacing: .16em; }
.t-sub5 { font-family: var(--f-reg); font-weight: 400; font-size: 14px; line-height: 28px; letter-spacing: .15em; }
.t-tab1 { font-family: var(--f-reg); font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: .05em; }
.t-comp1 { font-family: var(--f-bold); font-weight: 700; font-size: 14px; line-height: 28px; letter-spacing: .15em; }
.t-comp2 { font-family: var(--f-bold); font-weight: 700; font-size: 12px; line-height: 24px; letter-spacing: .25em; }
.t-comp3 { font-family: var(--f-narrow); font-weight: 400; font-size: 12px; line-height: 24px; letter-spacing: .6em; }
.t-comp4 { font-family: var(--f-narrow); font-weight: 400; font-size: 12px; line-height: 24px; letter-spacing: .25em; }
.t-bg1 { font-size: 200px; line-height: 210px; }
.t-bg2 { font-size: 250px; line-height: 290px; }
@media (max-width: 1440px) {
  .t-h2 { font-size: 67px; line-height: 87px; }
  .t-bg2 { font-size: 240px; line-height: 280px; }
}
@media (max-width: 1280px) {
  .t-h2 { font-size: 59px; line-height: 79px; }
  .t-bg2 { font-size: 220px; line-height: 260px; }
}
@media (max-width: 768px) {
  .t-h1 { font-size: 28px; line-height: 34px; }
  .t-h2 { font-size: 40px; line-height: 55px; }
  .t-h3 { font-size: 38px; line-height: 44px; }
  .t-h4 { font-size: 42px; line-height: 52px; }
  .t-h5 { font-size: 26px; line-height: 32px; }
  .t-h6 { font-size: 20px; line-height: 26px; }
  .t-h7, .t-h8 { font-size: 20px; line-height: 27px; }
  .t-h9 { font-size: 18px; line-height: 26px; }
  .t-h10 { font-size: 14px; line-height: 24px; }
  .t-ribbon { font-size: 14px; line-height: 24px; }
  .t-sub1 { font-size: 16px; line-height: 26px; }
  .t-sub2 { font-size: 26px; line-height: 30px; }
  .t-sub3 { line-height: 26px; }
  .t-sub4 { font-size: 16px; line-height: 26px; }
  .t-sub5 { line-height: 24px; }
  .t-comp1 { line-height: 24px; }
  .t-comp2, .t-comp3, .t-comp4 { font-size: 14px; }
  .t-bg1 { font-size: 80px; line-height: 90px; }
  .t-bg2 { font-size: 120px; line-height: 120px; }
}
.c-flame { color: var(--flame); }
.c-white { color: var(--paper); }
.c-muted { color: var(--muted); }
.c-ink { color: var(--ink); }

/* ------------------------------------------------------------------ layout */
.wrap { max-width: var(--wrap); width: 100%; margin: 0 auto; position: relative; }
@media (max-width: 768px) { .wrap { max-width: calc(100% - 40px); } }
.blk { margin-bottom: 240px; }
.blk:last-of-type { margin-bottom: 0; }
@media (max-width: 768px) { .blk { margin-bottom: 120px; } .blk.m-flush { margin-bottom: 0; } }
.top { padding-top: 180px; }
@media (max-width: 768px) { .top { padding-top: 116px; } }

/* colour fields that wipe in left to right when their sensor fires (1.25 s, primary curve) */
.field { position: relative; }
.field::before { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; transition: transform 1.25s var(--e1); }
.field.in::before { transform: scaleX(1); }
.field--char::before { background: var(--char); }
.field--flame::before { background: var(--flame); }
.field > * { position: relative; }
/* the home hero field wipes with origin right when leaving and left when arriving */
.field--hero::before { background: var(--char); transform-origin: right; }
.field--hero.in::before { transform-origin: left; }
.is-mobile .field::before { transform: scaleX(1); }

/* page header used by most inner pages */
.phead { display: flex; justify-content: space-between; padding: 70px 0 180px; }
.phead__left { width: 55%; }
.phead__ribbon { text-transform: uppercase; }
.phead__title { margin: 40px 0 0 35px; }
.phead__right { display: flex; align-items: flex-end; }
.phead__desc { max-width: 240px; color: var(--muted); }
.phead__desc::after { content: ""; display: block; width: 10px; height: 1px; background: var(--ink); margin-top: 30px; opacity: .5; }
@media (max-width: 1280px) { .phead__left { width: 70%; } }
@media (max-width: 768px) {
  .phead { padding: 30px 0 40px; flex-direction: column; }
  .phead__left { width: 100%; }
  .phead__title { margin: 40px 0 0; }
  .phead__desc { margin-top: 17px; max-width: 100%; }
  .phead__desc::after { display: none; }
}

/* ------------------------------------------------------------------ placeholder imagery */
.ph { position: relative; overflow: hidden; background: linear-gradient(135deg, #d9d4cc 0%, #b9b2a7 55%, #9d958a 100%); }
.ph::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(120% 80% at 20% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
  repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 48px); }
.ph--a { background: linear-gradient(140deg, #e9c46a 0%, #f4a259 50%, #e76f51 100%); }
.ph--b { background: linear-gradient(140deg, #dfe7ee 0%, #b8c6d4 60%, #8fa3b8 100%); }
.ph--c { background: linear-gradient(140deg, #d4d4d4 0%, #a6a6a6 55%, #6e6e6e 100%); }
.ph--d { background: linear-gradient(140deg, #6c63ff 0%, #4b44c8 60%, #2d2a7a 100%); }
.ph--e { background: linear-gradient(140deg, #cfe3d9 0%, #8fbfaa 60%, #4f8a74 100%); }
.ph--f { background: linear-gradient(140deg, #f3d9d2 0%, #d8a79a 60%, #a96d5f 100%); }
.ph--g { background: linear-gradient(140deg, #2f2e2d 0%, #4a4846 60%, #6b6865 100%); }
.ph--h { background: linear-gradient(140deg, #e8e2f5 0%, #b9a8e0 60%, #7d63c2 100%); }
.ph--logo { background: none; display: flex; align-items: center; justify-content: center; }
.ph--logo::after { display: none; }
.ph--logo span { display: block; height: 22px; width: 70%; border-radius: 11px; background: currentColor; opacity: .85; }

/* ------------------------------------------------------------------ header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 21; max-width: calc(100% - 100px); height: 150px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none; transition: opacity .55s var(--e1); }
.hdr__logo, .hdr__nav { transition: transform 1.25s var(--e1); }
.hdr__logo { width: 165px; pointer-events: all; transition-delay: .15s; }
.hdr__nav { display: flex; align-items: center; pointer-events: all; transition-delay: .3s; }
.hdr.is-hidden .hdr__logo, .hdr.is-hidden .hdr__nav { transform: translate3d(0, -200px, 0); }
@media (max-width: 768px) { .hdr { max-width: calc(100% - 40px); height: 116px; } }
/* the header's bar (Andre 2026-10-12: "Book a walk" and the mark sat straight on photos and headlines once a page moved):
   clear at the very top, then a full-width white bar, or a dark one over dark sections, once html.is-scrolled is set */
.hdr::before { content: ""; position: absolute; top: 0; left: -50px; right: -50px; height: 112px; z-index: -1; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0, 0, 0, .07);
  transition: opacity .35s var(--e1), background-color .45s var(--e1); }
.is-scrolled .hdr::before { opacity: 1; }
[data-theme="black"] .hdr::before, [data-theme="red"] .hdr::before { background: rgba(31, 30, 29, .94); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
@media (max-width: 768px) { .hdr::before { left: -20px; right: -20px; height: 100px; } }

/* wordmark (placeholder letters) that collapses into a ringed symbol past 180 px of scroll */
.mark { position: relative; display: flex; height: 28px; transform: translate3d(0, -15px, 0) scale(.9); transform-origin: left center; color: var(--ink); transition: opacity .85s var(--e1), color .45s var(--e1); }
.mark__l { position: relative; display: block; font-family: var(--f-head); font-weight: 700; font-size: 26px; line-height: 28px; letter-spacing: .02em;
  transition: opacity .45s var(--e1), transform .45s var(--e1); }
.mark__ring { position: absolute; left: 20px; top: 0; width: 45px; height: 45px; border: 3px solid currentColor; border-radius: 50%;
  transform: translate3d(-16px, -7px, 0); opacity: 0; transition: opacity .45s var(--e1); }
.hdr.is-symbol .mark__l:not(:first-child) { opacity: 0; transform: translate3d(-10px, 0, 0); }
.hdr.is-symbol .mark__l:first-child { transform: translate3d(10px, 0, 0); opacity: 1; }
.hdr.is-symbol .mark__ring { opacity: 1; }
.hdr.is-symbol .mark__l:nth-child(2) { transition-delay: 75ms; } .hdr.is-symbol .mark__l:nth-child(3) { transition-delay: 150ms; }
.hdr.is-symbol .mark__l:nth-child(4) { transition-delay: 225ms; } .hdr.is-symbol .mark__l:nth-child(5) { transition-delay: 300ms; }
.hdr.is-symbol .mark__l:nth-child(6) { transition-delay: 375ms; } .hdr.is-symbol .mark__l:nth-child(7) { transition-delay: 450ms; }
.hdr.is-symbol .mark__l:nth-child(8) { transition-delay: 525ms; }
@media (max-width: 768px) {
  .mark { transform: translate3d(0, -12px, 0) scale(.8); }
  .hdr.is-symbol .mark { opacity: 0; }
}
[data-theme="black"] .mark, [data-theme="red"] .mark { color: var(--paper); }
.menu-open .mark { color: var(--paper); }
[data-theme="black"].menu-open .mark, [data-theme="red"].menu-open .mark { color: var(--ink); }

/* text CTA with an underline that swipes out and back in on hover (0.75 s) */
.talk { display: block; margin-right: 30px; text-transform: uppercase; transition: color .45s var(--e1); }
.talk::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 5px; background: currentColor; }
.talk .c { display: inline-block; }
.talk:hover .c { animation: hop .45s var(--e1) both; animation-delay: inherit; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.talk:hover::after { animation: swipe .75s var(--e1) forwards; }
@keyframes swipe { 0% { transform-origin: right; transform: scaleX(1); } 33% { transform-origin: right; transform: scaleX(0); }
  66% { transform-origin: left; transform: scaleX(0); } 100% { transform-origin: left; transform: scaleX(1); } }
[data-theme="black"] .talk, [data-theme="red"] .talk { color: var(--paper); }
.menu-open .talk { color: var(--paper); }
[data-theme="black"].menu-open .talk, [data-theme="red"].menu-open .talk { color: var(--char); }
.menu__talk { display: none; }
@media (max-width: 768px) { .hdr .talk { display: none; } .menu__talk { display: inline-block; margin-top: 10px; } }

/* round menu button: dark disc on light pages, light disc on dark pages, magnetic on desktop */
.burger { position: relative; width: 40px; height: 40px; }
.burger__wrap { position: relative; width: 100%; height: 100%; pointer-events: none; }
.burger__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--char); transition: transform .35s var(--e1), background-color .45s var(--e1); }
.burger__disc--alt { background: var(--paper); transform: scale(0); }
.burger__lines { position: absolute; left: 12px; top: 20px; width: 17px; height: 1px; }
.burger__lines i, .burger__lines::before, .burger__lines::after { content: ""; display: block; position: absolute; right: 0; width: 17px; height: 1px; background: var(--paper);
  transition: transform .45s var(--e1), background-color .45s var(--e1), opacity .45s var(--e1); transform-origin: right; }
.burger__lines::before { top: -4px; } .burger__lines::after { top: 4px; }
.burger__lines i { top: 0; transform: scaleX(.71); }
.burger__x { position: absolute; inset: 0; transform: scale(0); transition: transform .45s var(--e1); }
.burger__x::before, .burger__x::after { content: ""; position: absolute; top: 20px; left: 12px; width: 17px; height: 1px; background: var(--ink); transform: rotate(45deg); }
.burger__x::after { transform: rotate(-45deg); }
.burger__hit { position: absolute; inset: 0; transform: scale(1.5); border-radius: 50%; }
.burger:hover .burger__lines i { transform: scaleX(1); }
.is-browser .burger:hover .burger__disc:not(.burger__disc--alt) { transform: scale(1.3); }
.menu-open .burger__disc:not(.burger__disc--alt) { transform: scale(0); }
.menu-open .burger__disc--alt { transform: scale(1); }
.is-browser.menu-open .burger:hover .burger__disc--alt { transform: scale(1.3); }
.menu-open .burger__lines { opacity: 0; }
.menu-open .burger__x { transform: scale(1); }
[data-theme="black"] .burger__disc, [data-theme="red"] .burger__disc { background: var(--paper); }
[data-theme="black"] .burger__disc--alt, [data-theme="red"] .burger__disc--alt { background: var(--char); }
[data-theme="black"] .burger__lines i, [data-theme="black"] .burger__lines::before, [data-theme="black"] .burger__lines::after { background: var(--char); }
[data-theme="red"] .burger__lines i, [data-theme="red"] .burger__lines::before, [data-theme="red"] .burger__lines::after { background: var(--flame); }
[data-theme="black"] .burger__x::before, [data-theme="black"] .burger__x::after, [data-theme="red"] .burger__x::before, [data-theme="red"] .burger__x::after { background: var(--paper); }
@media (max-width: 768px) { .burger { width: 44px; height: 44px; } .burger__lines { left: 13px; top: 22px; } .burger__x::before, .burger__x::after { top: 22px; left: 13px; } }

/* ------------------------------------------------------------------ menu overlay */
.menu { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 20; pointer-events: none; overflow: hidden; transform: translate3d(100vw, 0, 0); color: #6f6f6f; }
.menu.is-open { pointer-events: all; }
.menu__bg { position: absolute; top: calc(90px - 112vw); right: calc(100px - 112vw); width: 224vw; height: 224vw; border-radius: 50%; background: var(--char); transform: translate3d(0, 0, 0) scale(0); }
[data-theme="black"] .menu__bg, [data-theme="red"] .menu__bg { background: var(--paper); }
[data-theme="black"] .menu, [data-theme="red"] .menu { color: var(--smoke); }
.menu__in { position: relative; height: 100%; display: flex; align-items: center; }
.menu__row { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.menu__nav { opacity: 0; transition: opacity .45s var(--e1); }
.menu.is-open .menu__nav { opacity: 1; }
.menu__label { display: inline-block; text-transform: uppercase; transform: rotate(-90deg) translate3d(-45px, 0, 0); transform-origin: bottom left; }
.menu__list { margin-left: 60px; transform: translate3d(0, -20px, 0); display: flex; flex-direction: column; align-items: flex-start; color: var(--paper); }
[data-theme="black"] .menu__list, [data-theme="red"] .menu__list { color: var(--ink); }
.menu__item { position: relative; opacity: 0; transform: translate3d(-100px, 0, 0) skewX(5deg);
  transition: opacity .55s var(--e1), transform .55s var(--e1), color .45s var(--e1); }
.menu.is-open .menu__item { opacity: 1; transform: none; transition-duration: .95s, .95s, .45s; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: 50ms; } .menu.is-open .menu__item:nth-child(3) { transition-delay: 100ms; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: 150ms; } .menu.is-open .menu__item:nth-child(5) { transition-delay: 200ms; }
.menu__word { display: block; position: relative; z-index: 3; clip-path: inset(0 0 0 0); transition: all .75s var(--e4); }
.menu__ghost { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; color: var(--smoke); transition: transform .75s var(--e4); }
[data-theme="black"] .menu__ghost, [data-theme="red"] .menu__ghost { color: #eeeeee; }
.menu__num { position: absolute; top: 10px; left: 0; z-index: 1; pointer-events: none; opacity: 0; transform: translate3d(20px, 0, 0); transition: all .85s var(--e4); }
.menu__item.is-dim .menu__word { clip-path: inset(0 100% 0 0); }
.menu__item.is-focus .menu__word { clip-path: inset(0 0 0 0); transform: translate3d(35px, 0, 0); }
.menu__item.is-focus .menu__ghost { transform: translate3d(35px, 0, 0); }
.menu__item.is-focus .menu__num { transform: none; opacity: 1; }
.menu__info { align-self: flex-end; margin-bottom: -38px; position: relative; z-index: 22; opacity: 0; transition: opacity .45s var(--e1); }
.menu.is-open .menu__info { opacity: 1; }
.menu__info a { display: inline-block; color: var(--flame); }
.menu__info a::after { content: ""; display: block; width: 100%; height: 1px; background: var(--flame); margin-top: -2px; }
.menu__info .c { display: inline-block; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .25s var(--e1), transform .25s var(--e1); }
.menu.is-open .menu__info .c { opacity: 1; transform: none; }
.menu__mail { font-size: 17px; margin-bottom: 6px; }
.menu__addr { max-width: 250px; margin-top: 20px; }
.menu__social { margin-top: 35px; display: flex; gap: 22px; }
.menu__social li { width: 24px; height: 24px; opacity: .7; border-radius: 50%; border: 1px solid currentColor; transition: opacity .55s var(--e1); }
.menu__social li:hover { opacity: 1; }
@media (max-width: 768px) {
  .menu__bg { top: calc(60px - 224vw); right: calc(40px - 224vw); width: 448vw; height: 448vw; }
  .menu__in { padding: 0 20px; }
  .menu__row { flex-direction: column; align-items: flex-start; }
  .menu__nav { margin-bottom: 80px; }
  .menu__label { display: none; }
  .menu__list { margin-left: 0; transform: none; }
  .menu__item:last-child { display: none; }
  .menu__info { align-self: flex-start; margin-bottom: 0; }
  .menu__addr { max-width: 70%; margin-top: 10px; }
  .menu__social { display: none; }
}

/* ------------------------------------------------------------------ cursor, scroll bar, labels */
.cursor { position: fixed; top: -2px; left: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--flame); z-index: 100; pointer-events: none; }
.cursor__ring { position: absolute; top: -18px; left: -18px; width: 40px; height: 40px; border: 1px solid var(--gray-3); border-radius: 50%; opacity: .2; transition: transform .75s var(--e1); }
.cursor__disc { position: absolute; top: -38px; left: -38px; width: 80px; height: 80px; border-radius: 50%; background: var(--gray-4); opacity: .12; transform: scale(0); transition: transform .75s var(--e1); }
.cursor.is-link .cursor__ring { transform: scale(0); }
.cursor.is-link .cursor__disc { transform: scale(1); }

.scrollbar { position: fixed; top: 0; right: 0; width: 4px; height: 100vh; z-index: 19; transform-origin: left top; transform: scale(1, 0); background: var(--char); }
[data-theme="black"] .scrollbar, [data-theme="red"] .scrollbar { background: var(--paper); }
.is-mobile .scrollbar { display: none; }

.scroll-label { position: fixed; right: 52px; bottom: 78px; z-index: 5; display: flex; align-items: center; text-transform: uppercase;
  transform: rotate(90deg) translate3d(20px, 0, 0); transform-origin: right top; transition: all .45s var(--e1); }
.scroll-label.is-hidden { opacity: 0; }
.scroll-label__line { display: inline-block; width: 51px; height: 1px; margin-right: 12px; background: #1a1918; transform: scaleX(0); transition: background-color .45s var(--e1); }
.scroll-label__l { display: inline-block; opacity: 0; transform: translate3d(-10px, 0, 2000px) rotateY(-90deg); }
[data-theme="black"] .scroll-label, [data-theme="red"] .scroll-label { color: var(--paper); }
[data-theme="black"] .scroll-label__line, [data-theme="red"] .scroll-label__line { background: var(--paper); }
.is-mobile .scroll-label { display: none; }

.side-label { position: fixed; top: 50%; right: 50px; z-index: 7; text-transform: uppercase; transform: rotate(90deg) translate3d(50%, 0, 0);
  transform-origin: top right; transition: color .85s var(--e1); white-space: nowrap; }
[data-theme="black"] .side-label, [data-theme="red"] .side-label { color: var(--paper); }
.is-mobile .side-label { display: none; }

/* thin line circle that draws itself over 15.25 s */
.ring-wrap { width: 100vw; position: fixed; top: 0; left: 0; overflow: visible; opacity: 0; pointer-events: none; }
.ring-wrap.is-loaded { opacity: 1; }
.ring { position: fixed; top: -120px; right: calc(50vw - 780px); transform: rotate(90deg) scaleX(-1); opacity: .15; transition: stroke .65s ease-out; }
@media (max-width: 768px) { .ring-wrap { overflow: hidden; } .ring { right: calc(-50vw - 180px); top: -100px; transform: scale(.5); } }
.ring-wrap--abs { position: absolute; overflow: visible; }
.ring-wrap--abs .ring { position: absolute; }

/* plus-mark sparks */
[data-spark] { pointer-events: none; line-height: 0; }
.spark-dim { opacity: .15; }

/* ------------------------------------------------------------------ motion primitives */
/* text that motion.js will split stays hidden until it is split, so it never flashes (no JS: always visible) */
.js [data-anim="arise"]:not(.is-split), .js [data-anim="slide"]:not(.is-split), .js [data-anim="arise-manual"]:not(.is-split) { visibility: hidden; }
/* ARISE: each word clips up from its baseline, rises 20 px and fades in, 1.45 s, 100 ms per word */
[data-anim="arise"] .w { display: inline-block; opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 20px, 0);
  transition-property: opacity, clip-path, transform; transition-duration: 1.45s; transition-timing-function: var(--e4js); }
[data-anim="arise"].in .w { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
[data-anim="arise-manual"] .w { display: inline-block; opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 20px, 0);
  transition-property: opacity, clip-path, transform; transition-duration: .9s; transition-timing-function: var(--e4js); }
/* SLIDE: each word fades in and slides 20 px from the left, 1.45 s, 100 ms per word */
[data-anim="slide"] .w { display: inline-block; opacity: 0; transform: translate3d(-20px, 0, 0);
  transition-property: opacity, transform; transition-duration: 1.45s; transition-timing-function: var(--e4js); }
[data-anim="slide"].in .w { opacity: 1; transform: none; }
/* UP: fade and rise 20 px, 0.95 s after a 0.4 s wait */
[data-anim="up"] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .95s var(--e1), transform .95s var(--e1); }
[data-anim="up"].in { opacity: 1; transform: none; transition-delay: .4s; }
[data-anim="up"].in.d27 { transition-delay: 2.7s; }
/* FADE: plain opacity (home hero lines, 0.85 s) */
[data-anim="fade"] { opacity: 0; transition: opacity .85s var(--e1); }
[data-anim="fade"].in { opacity: 1; }

/* image reveal: holder rises 100 px (0.95 s); inner scales 1.1 to 1 and a pale cover lifts off upward (1.25 s) */
.reveal { position: relative; z-index: 1; perspective: 1000px; transform: translate3d(0, 100px, 0); transition: transform .95s var(--e1); }
.reveal__in { width: 100%; position: relative; overflow: hidden; opacity: 0; transform: scale(1.1); transition: all 1.25s var(--e1); }
.reveal__in::after { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 100%; z-index: 3; background: var(--fog);
  transform: scale(1.12); transform-origin: top; transition: transform 1.25s var(--e1); }
.reveal__in > .ph { transition: transform 4s var(--e3); }
.reveal.in { transform: none; }
.reveal.in .reveal__in { opacity: 1; transform: scale(1); }
.reveal.in .reveal__in::after { transform: scaleY(0); }
@media (min-width: 769px) {
  .reveal.is-hover .reveal__in, .reveal:not(.no-hover):hover .reveal__in { transform: scale(.95) rotateY(-9deg); }
  .reveal.is-hover .reveal__in > .ph, .reveal:not(.no-hover):hover .reveal__in > .ph { transform: scale(1.1); }
}

/* wide detail images: rise 100 px and fade (1.25 s) while a pale cover lifts off */
.dimg { opacity: 0; transform: translate3d(0, 100px, 0); transition: all 1.25s var(--e1); position: relative; }
.dimg::after { content: ""; position: absolute; inset: 0; background: var(--fog); transform: scale(1); transform-origin: top; transition: transform 1.25s var(--e1); }
.dimg.in { opacity: 1; transform: none; }
.dimg.in::after { transform: scaleY(0); }
.dimg .ph { position: absolute; inset: 0; }
@media (max-width: 768px) { .wrap .dimg { width: calc(100% + 40px); transform: translate3d(-20px, 100px, 0); } .wrap .dimg.in { transform: translate3d(-20px, 0, 0); } }

/* hero image wipe: the frame opens left to right (1.25 s) while the picture settles from 1.1 */
.wipe { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--e1); }
.wipe .ph { width: 100%; height: 100%; transform: scale(1.1); opacity: 0; transition: all 1.25s var(--e1); }
.wipe.in { clip-path: inset(0 0 0 0); }
.wipe.in .ph { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------------ pill button */
.btn { position: relative; display: inline-flex; align-items: center; height: 48px; text-transform: uppercase; cursor: pointer; transform: translate3d(20px, 0, 0); }
.btn__bg > i { position: absolute; top: 0; left: 0; height: 100%; z-index: 1; }
.btn__l, .btn__r { width: 48px; display: flex; justify-content: flex-end; transform: translate3d(-20px, 0, 0); }
.btn__l::before, .btn__r::before { content: ""; display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--fog); transform: scale(0); transition: transform .45s var(--e1); }
.btn__l { transition: all var(--btn-d) var(--e1); }
.btn__r { transition: all var(--btn-d) var(--e1) var(--btn-d); }
.btn__c { right: 0; width: 0; background: var(--fog); transform-origin: right; transition: width var(--btn-d) var(--e1) var(--btn-d), transform var(--btn-d) var(--e1); }
.btn__t { display: inline-block; position: relative; z-index: 3; opacity: 0; transform: translate3d(-20px, 0, 0); transition: all .75s var(--e1); }
.btn__plus { position: relative; z-index: 2; width: 7px; height: 7px; margin-left: 28px; opacity: 0; transition: opacity .85s var(--e1); }
.btn__plus::before, .btn__plus::after { content: ""; position: absolute; top: calc(50% - 2px); left: 0; width: 100%; height: 1px; background: var(--ink); }
.btn__plus::after { transform: rotate(90deg); }
.btn.in .btn__l::before, .btn.in .btn__r::before { transform: scale(1); }
.btn.in .btn__t { opacity: 1; transform: none; }
.btn.in .btn__plus { opacity: 1; }
.btn.in.d3 .btn__l::before, .btn.in.d3 .btn__r::before, .btn.in.d3 .btn__t, .btn.in.d3 .btn__plus { transition-delay: 3s; }
@media (min-width: 769px) {
  .btn:hover .btn__l { transform: translate3d(20px, 0, 0); width: 100%; transition-duration: calc(var(--btn-d) - .15s); transition-timing-function: var(--e3); transition-delay: var(--btn-d); }
  .btn:hover .btn__c { width: 100%; transform: scaleX(0); transition: width var(--btn-d) var(--e1), transform calc(var(--btn-d) - .15s) var(--e3) var(--btn-d); }
  .btn:hover .btn__r { transform: translate3d(20px, 0, 0); width: 100%; transition-delay: 0s; }
}
.btn--white { color: var(--paper); }
.btn--white .btn__c, .btn--white .btn__l::before, .btn--white .btn__r::before { background: #323135; }
.btn--white .btn__plus::before, .btn--white .btn__plus::after { background: var(--paper); }
.btn--flame { color: var(--paper); }
.btn--flame .btn__c, .btn--flame .btn__l::before, .btn--flame .btn__r::before { background: var(--flame-2); }
.btn--flame .btn__plus::before, .btn--flame .btn__plus::after { background: var(--paper); }

/* underline link that swipes on hover (1.25 s) */
.uline { display: inline-block; color: var(--flame); }
.uline::after { content: ""; display: block; width: 100%; height: 1px; background: var(--flame); margin-top: -2px; }
@media (min-width: 769px) { .uline:hover::after { animation: swipe 1.25s var(--e1) forwards; } }

/* ------------------------------------------------------------------ cards */
/* project card: tall image with the title hanging over its lower right corner */
.pcard { display: block; position: relative; max-width: 560px; max-height: 758px; }
.pcard .reveal__in .ph { aspect-ratio: 504 / 673; }
.pcard__label { position: absolute; right: -20px; bottom: 50px; text-align: right; z-index: 2; transform: translateZ(0); transform-style: preserve-3d; }
.pcard__title { margin-bottom: -10px; }
.pgrid { display: grid; grid-template-columns: auto auto; column-gap: 6.666%; row-gap: 160px; margin-bottom: 215px; }
.pgrid > *:nth-child(even) .pcard, .pgrid > .pcard:nth-child(even) { transform: translate3d(0, 100px, 0); }
@media (max-width: 768px) {
  .pgrid { display: block; margin-top: 41px; width: calc(100% + 40px); transform: translate3d(-20px, 0, 0); margin-bottom: 60px; }
  .pcard { max-width: calc(100% - 32px); width: 100%; margin-bottom: 33px; }
  .pgrid > *:nth-child(even) .pcard, .pgrid > .pcard:nth-child(even) { transform: none; }
  .pcard__label { bottom: 29px; }
  .pcard__title { margin-bottom: 0; }
}

/* article card: 4:3 picture, small category, light title */
.acard { position: relative; max-width: 560px; }
.acard .ph { padding-top: 75%; }
.acard__label { padding: 50px 20px; }
.acard__cat { text-transform: uppercase; margin-bottom: 20px; }
.agrid { display: grid; grid-template-columns: calc(50% - 40px) calc(50% - 40px); column-gap: 6.666%; row-gap: 150px; }
.agrid > *:nth-child(even) .acard, .agrid > .acard:nth-child(even) { transform: translate3d(0, 100px, 0); }
@media (max-width: 768px) {
  .acard { max-width: 100%; margin-bottom: 20px; }
  .acard__label { padding: 25px 20px; }
  .acard__cat { margin-bottom: 10px; }
  .agrid { display: block; width: calc(100% + 40px); transform: translate3d(-20px, 0, 0); }
  .agrid > *:nth-child(even) .acard, .agrid > .acard:nth-child(even) { transform: none; }
}

/* ------------------------------------------------------------------ footer */
.foot { height: 698px; background: var(--char-2); display: flex; align-items: center; color: var(--paper); }
.foot__row { display: flex; justify-content: space-between; }
.foot__col { width: 50%; }
.foot__left { display: flex; flex-direction: column; }
.foot__sym { width: 56px; height: 65px; position: relative; }
.foot__sym::before { content: ""; position: absolute; left: 0; top: 4px; width: 56px; height: 56px; border: 3px solid var(--paper); border-radius: 50%; }
.foot__sym::after { content: "L"; position: absolute; left: 0; top: 4px; width: 56px; line-height: 56px; text-align: center; font: 700 26px/56px var(--f-head); }
.foot__line { font-family: var(--f-head); font-weight: 500; font-size: 20px; line-height: 36px; max-width: 240px; margin: 30px 0 0; }
.foot__social { display: flex; align-items: flex-end; flex: 2; }
.foot__social li { margin-right: 35px; opacity: .7; transition: opacity .85s var(--e1); }
.foot__social li:hover { opacity: 1; }
.foot__social span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; margin-bottom: 9px; }
.foot__title { text-transform: uppercase; margin-bottom: 30px; }
.foot__title.last { margin-top: 85px; }
.foot__links { display: flex; flex-direction: column; align-items: flex-start; color: var(--gray-3); }
.foot__links .uline { margin-bottom: 12px; font-size: 17px; }
.foot__links .uline + .uline { margin-bottom: 0; font-size: 16px; }
.foot__menu { display: flex; }
.foot__menu li { display: inline-block; margin-right: 25px; }
.foot__menu li::after { content: ""; display: block; width: 100%; height: 1px; background: var(--gray-3); transform: scaleX(0); transform-origin: right; transition: transform .85s var(--e1); }
@media (min-width: 769px) { .foot__menu li:hover::after { transform: scaleX(1); transform-origin: left; } }
.foot__addr { margin-top: 15px; color: var(--muted); opacity: .7; }
@media (max-width: 768px) {
  .foot { height: auto; padding: 80px 0; }
  .foot__row { flex-direction: column; }
  .foot__col { width: 100%; }
  .foot__left { display: none; }
  .foot__title { margin-bottom: 30px; }
  .foot__title.last { margin-top: 40px; }
  .foot__links .uline { margin-bottom: 12px; }
  .foot__links .uline + .uline { margin-bottom: 25px; }
  .foot__menu { display: block; }
  .foot__menu li { display: block; }
  .foot__menu li:not(:last-of-type) { margin-bottom: 20px; }
  .foot__addr { display: none; }
}

/* ------------------------------------------------------------------ shared closing call to action (flame band) */
.cta-band { position: relative; margin: 100px auto 0; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform 1.25s var(--e1); }
.cta-band.in::before { transform: scaleX(1); }
.is-mobile .cta-band::before { transform: scaleX(1); }
.cta-band__sec { display: flex; justify-content: center; align-items: center; padding: 190px 0; position: relative; }
.cta { position: relative; width: 100%; }
.cta__ring .ring-wrap { position: absolute; overflow: visible; }
.cta__ring .ring { position: absolute; }
.cta__spark { position: absolute; top: 350px; right: -80px; opacity: .25; }
.cta__ribbon { text-transform: uppercase; margin-bottom: 40px; }
.cta__text { max-width: 60%; transform: translate3d(40px, 0, 0); }
.cta__go { transform: translate3d(40px, 0, 0); margin-top: 60px; color: var(--paper); }
@media (max-width: 768px) {
  .cta-band { margin: 50px auto 0; }
  .cta__spark { top: 50px; right: 0; }
  .cta__text { transform: none; line-height: 38px; max-width: 100%; }
  .cta__go { transform: none; }
}

/* ================================================================== HOME */
.hero { min-height: calc(min(100vh, 980px) + 4px); display: flex; align-items: center; overflow: hidden; padding-top: 0; }
.hero__sec { overflow: hidden; height: 100%; margin-bottom: 0; transition: opacity .65s var(--e1); }
.hero__bg { position: absolute; top: -180px; right: 0; transform: translate3d(-70px, 0, 0); }
.hero__words { clip-path: inset(0 100% 0 0); transition: clip-path .85s var(--e4); }
.hero__words.in { clip-path: inset(-100% -100% -100% -100%); }
.hero__words[data-anim="fade"] { opacity: 1; }
.hero__letters { position: relative; }
.hl { display: flex; flex-direction: column-reverse; width: 352px; transform: translate3d(0, -180px, 0); transition: clip-path .85s var(--e4); }
.hl__g { width: 352px; position: relative; overflow: hidden; }
.hl__g span { position: absolute; left: 50%; top: 50%; font: 700 520px/1 var(--f-head); transform: translate(-50%, -54%) rotate(-90deg); }
.hl--light { clip-path: inset(0 100% 0 0); color: #f9f9f9; }
.hl--light .hl__g:nth-child(2) { color: var(--ink); }
.hl--dark { position: absolute; top: 0; left: 0; clip-path: inset(0 0 0 0); color: #272628; }
.is-browser[data-theme="white"] .hl--light { clip-path: inset(0 0 0 0); }
.is-browser[data-theme="white"] .hl--dark { clip-path: inset(0 0 0 100%); }
.hero__spark1 { position: absolute; top: 407px; right: -145px; }
.hero__spark2 { position: absolute; top: 800px; right: 293px; }
.hero__copy { margin-top: 100px; width: 52%; }
.hero__ribbon { text-transform: uppercase; }
.hero__inner { padding-top: 45px; transform: translate3d(40px, 0, 0); }
.hero__desc { margin-top: 20px; }
.hero__btn { margin-top: 60px; }
.home-loading .hero__desc.in { transition-delay: 2.7s; }
.home-load-late .hero__desc.in { transition-delay: 2.7s; }
.home-load-late .hero__btn.in .btn__l::before, .home-load-late .hero__btn.in .btn__r::before,
.home-load-late .hero__btn.in .btn__t, .home-load-late .hero__btn.in .btn__plus { transition-delay: 3s; }
.home-loading .hdr__logo, .home-loading .hdr__nav { transform: translate3d(0, -200px, 0); }
@media (max-width: 1440px) { .hero__copy { width: 70%; } .hero__desc { width: 70%; } }
@media (max-width: 768px) {
  .hero__bg { transform: translate3d(30vw, 0, 0); }
  .hl { transform: translate3d(0, -280px, 0) scale(.5); }
  .hero__spark1 { top: 620px; right: -100px; }
  .hero__spark2 { display: none; }
  .hero__copy { padding-top: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
  .hero__inner { padding-top: 33px; transform: none; }
  .hero__desc { width: 80%; }
  .hero__btn { margin-top: 45px; }
  .hero__sec { padding: 0; overflow: visible; }
}

.works { min-height: min(100vh, 980px); padding: 200px 0 0; margin-bottom: 0; transition: opacity .65s var(--e1), transform .65s var(--e1); }
.works__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 110px; }
.works__title { margin-bottom: 8px; }
.works__more { display: flex; justify-content: center; margin-bottom: 215px; }
@media (max-width: 768px) {
  .works { padding: 100px 0 0; }
  .works__head { margin-bottom: 55px; }
  .works__title { margin-bottom: 10px; }
  .works__more { margin-bottom: 90px; }
}

.intro__sec { min-height: min(100vh, 980px); display: flex; justify-content: center; align-items: center; padding: 200px 0; margin-bottom: 0; }
.intro__box { max-width: calc(100% - 160px); position: relative; margin: 0 auto; }
.intro__spark { position: absolute; top: -165px; right: -80px; }
.intro__ribbon { text-transform: uppercase; transform: translate3d(-40px, 0, 0); margin-bottom: 40px; }
@media (max-width: 768px) {
  .intro__box { max-width: 100%; }
  .intro__spark { top: auto; bottom: -200px; right: 0; }
  .intro__ribbon { transform: none; }
  .intro__text { line-height: 38px; }
}

/* services: tall in-flow blocks give the scroll distance; on desktop a fixed overlay shows them */
.svc { margin-bottom: 0; }
.is-browser .svc__inflow { opacity: 0; }
.svc__head { transform: translate3d(0, 260px, 0); }
.svc-blk { position: relative; height: min(200vh, 1960px); display: flex; align-items: center; justify-content: center; }
.svc-blk--svc-creative { height: min(300vh, 2940px); }
.svc-blk__word { position: absolute; top: 50%; left: 0; display: none; transform: translate3d(0, calc(-50% - 30px), 0); color: var(--fog-2); }
.svc-blk--svc-web .svc-blk__word { left: -90px; } .svc-blk--svc-creative .svc-blk__word { left: -80px; } .svc-blk--svc-strategy .svc-blk__word { left: -100px; }
.svc-key { height: 650px; }
.svc-key__img { width: 320px; height: 650px; overflow: hidden; clip-path: inset(0 100% 0 0); transform: rotate(30deg); transition: clip-path 1.55s var(--e1); }
.svc-key__img .ph { width: 625px; height: 815px; transform: rotate(-30deg) translate3d(-15%, -20%, 0) scale(1.1); opacity: 0; transition: all 1.75s var(--e1); }
.svc-key__img.is-on { clip-path: inset(0 0 0 0); }
.svc-key__img.is-on .ph { transform: rotate(-30deg) translate3d(-15%, -20%, 0) scale(1); opacity: 1; }
.svc-blk__text { position: absolute; color: var(--muted); }
.svc-blk--svc-web .svc-blk__text { top: calc(min(50vh, 490px) - 220px); right: 0; max-width: 400px; }
.svc-blk--svc-creative .svc-blk__text { top: calc(min(50vh, 490px) + 290px); right: 0; max-width: 400px; }
.svc-blk--svc-strategy .svc-blk__text { top: calc(min(50vh, 490px) + 255px); right: 60px; max-width: 340px; }
.svc__mmore { display: none; text-align: center; }
@media (max-width: 1440px) {
  .svc-key { transform: scale(.7); }
  .svc-blk--svc-web .svc-blk__text { top: calc(min(50vh, 490px) - 100px); }
}
@media (max-width: 1280px) { .svc-blk--svc-strategy .svc-blk__text { top: calc(min(50vh, 490px) + 340px); } }
@media (max-width: 768px) {
  .svc__head { transform: translate3d(0, 40px, 0); margin-top: 50px; }
  .svc__title { margin-bottom: 10px; }
  .svc-blk, .svc-blk--svc-creative { height: 570px; }
  .svc-blk__word { display: block; }
  .svc-key { transform: scale(.5); }
  .svc-blk__text { position: static; transform: translate3d(0, -120px, 0); }
  .svc__mmore { display: block; }
}

.svc-floatwrap { position: fixed; pointer-events: none; top: 0; left: 0; right: 0; width: 100vw; height: 100vh; z-index: 2; }
.is-mobile .svc-floatwrap { display: none; }
.svc-float { opacity: 0; transition: opacity .85s var(--e1); display: flex; flex-direction: column; justify-content: center; height: 100vh; }
.svc-float.is-on { opacity: 1; }
.sf-title { text-transform: uppercase; transform: translate3d(50px, 80px, 0); }
.svc-float .sf-title .w { opacity: 0; transform: translate3d(-20px, 0, 0); transition-duration: .3s; }
.svc-float.is-on .sf-title .w { opacity: 1; transform: none; transition-duration: 1.45s; }
.sf-sections { position: relative; height: 650px; transform: translate3d(0, -32px, 0); }
.sf-blk { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
.sf-word { position: absolute; width: 100%; top: 50%; left: 0; right: 0; transform: translate3d(0, -50%, 0); color: var(--fog-2); white-space: nowrap; text-align: center;
  opacity: 0; transition: opacity .95s var(--e1); }
.sf-word.is-on { opacity: 1; transition-delay: .4s; }
.sf-word__in { display: flex; justify-content: center; }
.sf-word--front { z-index: 3; }
.sf-hide { display: inline-block; visibility: hidden; }
.sf-key { width: 320px; height: 650px; transform: scale(.9); }
.sf-key__img { width: 320px; height: 650px; overflow: hidden; clip-path: inset(0 100% 0 0); transform: rotate(30deg); transition: clip-path 1.55s var(--e1); }
.sf-key__img .ph { width: 625px; height: 815px; transform: rotate(-30deg) translate3d(-15%, -20%, 0) scale(1.1); opacity: 0; transition: all 1.75s var(--e1); }
.sf-key__img.is-on { clip-path: inset(0 0 0 0); transition-delay: .8s; }
.sf-key__img.is-on .ph { transform: rotate(-30deg) translate3d(-15%, -20%, 0) scale(1); opacity: 1; }
.sf-text { position: absolute; z-index: 4; color: var(--muted); top: calc(50vh + 20px); right: 60px; max-width: 380px;
  opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .95s var(--e1), transform .95s var(--e1); }
.sf-text.is-on { opacity: 1; transform: none; transition-delay: .4s; }
.sf-more-wrap { height: 650px; }
.sf-more { margin-top: 40px; position: absolute; top: calc(50vh + 80px); right: 242px; display: flex; }
.svc-float.is-on .sf-more { pointer-events: all; }
.svc-float.is-on .sf-more .btn__l::before, .svc-float.is-on .sf-more .btn__r::before { transform: scale(1); }
.svc-float.is-on .sf-more .btn__t { opacity: 1; transform: none; }
.svc-float.is-on .sf-more .btn__plus { opacity: 1; }
.svc-dots { position: fixed; right: 80px; top: 50%; transform: translate3d(0, calc(-50% - 40px), 0); display: flex; flex-direction: column; opacity: 0; transition: opacity .75s var(--e1); z-index: 5; }
.svc-dots.is-on { opacity: 1; }
.svc-dots li { display: flex; justify-content: flex-end; margin: 40px 0; }
.svc-dots li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); opacity: .15; transition: all .65s var(--e1); }
.svc-dots li.is-on::after { opacity: 1; transform: scale(2); }
@media (max-width: 1440px) {
  .sf-title { transform: translate3d(10px, 120px, 0); }
  .sf-sections { transform: translate3d(0, -16px, 0); }
  .sf-key { transform: scale(.85); }
  .sf-text { top: calc(50vh + 100px); right: 30px; }
  .sf-more { right: 210px; top: calc(50vh + 160px); }
  .svc-dots { display: none; }
}
@media (max-width: 1280px) {
  .sf-title { transform: translate3d(10px, 170px, 0); }
  .sf-key { transform: scale(.75); }
  .sf-text { right: 10px; }
  .sf-more { right: 190px; }
}

.ins { margin-bottom: 0; }
.ins__inner { margin-top: 500px; }
.ins__head { display: flex; justify-content: space-between; align-items: flex-end; }
.ins__title { margin-bottom: 10px; }
[data-theme="black"] .ins__head, [data-theme="red"] .ins__head { color: var(--paper); }
.ins__grid { margin: 115px 0 120px; }
.ins__more { display: flex; justify-content: center; margin-bottom: 215px; }
@media (max-width: 768px) {
  .ins__inner { margin-top: 0; }
  .ins__head { margin-top: 100px; }
  .ins__grid { margin: 55px 0 0; }
  .ins__more { width: calc(100% + 40px); transform: translate3d(-20px, 0, 0); background: var(--mist); margin-bottom: 0; padding: 40px 0; }
}

/* ================================================================== SHARED INNER-PAGE PARTS */
.pspark { position: absolute; top: 320px; right: -55px; }
.pspark--high { top: 30px; }
@media (max-width: 768px) { .pspark, .pspark--high { top: 85px; right: 0; } }

/* head image: pushes up 100 px over the first viewport while a white cover grows over the left gutter */
.head-img { position: relative; overflow: hidden; margin-bottom: -100px; }
.head-img__img { margin-bottom: 80px; position: relative; }
.head-img__img > .ph { aspect-ratio: 1440 / 960.09; width: 100%; }
.head-img__cover { position: absolute; width: calc(50% - 600px); height: 100%; top: 0; left: 0; transform: scaleX(0); transform-origin: left; background: var(--paper); }
@media (max-width: 1440px) { .head-img__cover { width: calc(50% - 540px); } }
@media (max-width: 768px) { .head-img__cover { display: none; } }

/* light grey band with a large statement and a right-aligned paragraph */
.hl-band { background: var(--mist); padding: 180px 0; }
.hl-band .wrap { display: flex; flex-direction: column; }
.hl-band__title { max-width: 60%; }
.hl-band__desc { max-width: 57%; align-self: flex-end; margin-top: 75px; }
@media (max-width: 1280px) { .hl-band--post .hl-band__title { max-width: 70%; } }
@media (max-width: 768px) { .hl-band { padding: 90px 0; } .hl-band__title, .hl-band__desc, .hl-band--post .hl-band__title { max-width: 100%; } }

/* long-form body copy column */
.prose { background: var(--paper); padding: 130px 0 135px; }
.prose .wrap { padding: 0 20% 0 0; }
.prose p { margin-bottom: 40px; }
.prose a { color: var(--flame); }
.prose h2, .prose h3 { margin: 80px 0 40px; font-weight: 700; }
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 23.4px; }
.prose hr { margin: 10px 0; border: 1px inset #808080; height: 0; }
.prose li { padding-left: 22px; position: relative; margin-bottom: 20px; }
.prose li::before { content: ""; position: absolute; top: 19px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--flame); }
.prose--job { padding: 80px 0 135px; }
@media (max-width: 768px) {
  .prose { padding: 90px 0 75px; }
  .prose--job { padding: 0 0 75px; }
  .prose .wrap { padding: 0; }
  .prose li::before { top: 14px; }
}

/* scroll-grown circle behind a fixed title (about values, careers benefits) */
.grow-bg { position: fixed; top: 0; left: 0; right: 0; pointer-events: none; width: 200vw; height: 200vh; transform: translate3d(-50vw, -50vh, 0);
  display: flex; justify-content: center; align-items: center; opacity: 0; z-index: 0; }
.grow-bg.is-ready { opacity: 1; }
.grow-bg__circlebox { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity .9s var(--e1); }
.grow-bg.is-on .grow-bg__circlebox { opacity: 1; }
.grow-bg__circle { width: 100px; height: 100px; border-radius: 50%; background: #f4f4f4; }
.grow-bg--mist .grow-bg__circle { background: var(--mist); }
.grow-bg__assets { display: flex; align-items: center; height: 100vh; }
.grow-bg__title { max-width: 36%; }
.grow-bg__title .w { transition-duration: .9s; }
.grow-bg.is-on .grow-bg__title .w { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition-duration: 1.45s; }
.is-mobile .grow-bg { display: none; }
.values { padding: 370px 0 180px; position: relative; }
.values .wrap { display: flex; justify-content: flex-end; position: relative; z-index: 4; }
.values__spark { position: absolute; top: 555px; left: 0; }
.values__mtitle { display: none; margin-bottom: 60px; }
.values__list { max-width: 47%; margin-right: 40px; }
.values__name { margin-bottom: 15px; }
.values__desc { margin-bottom: 60px; }
.values--benefits { padding: 180px 0; }
@media (max-width: 768px) {
  .values { padding: 40px 0; }
  .values .wrap { flex-direction: column; }
  .values__mtitle { display: block; }
  .values__list { max-width: 100%; }
  .values--benefits { padding: 90px 0 0; }
  .values--benefits .wrap { margin-bottom: 90px; }
}

/* dark field with a big statement, used on about and careers */
.statement-dark { position: relative; margin: 70px auto 0; }
.statement-dark--careers { margin-top: 100px; }
.statement-dark__sec { display: flex; justify-content: center; align-items: center; padding: 400px 0; }
.statement-dark__box { position: relative; width: 100%; }
.statement-dark__spark { position: absolute; top: 0; right: -80px; transform: translate3d(40px, 0, 0); }
.statement-dark__ribbon { text-transform: uppercase; margin-bottom: 40px; }
.statement-dark__text { max-width: 80%; transform: translate3d(40px, 0, 0); }
.page-about .statement-dark__text { max-width: 70%; }
@media (max-width: 768px) {
  .statement-dark { margin: 50px auto 0; }
  .statement-dark__spark { transform: translate3d(80px, 0, 0); top: auto; bottom: 0; right: 0; }
  .statement-dark__text { transform: none; line-height: 38px; max-width: 100%; }
  .page-about .statement-dark__text { max-width: 100%; }
}

/* studio carousel */
.studio { padding-top: 200px; }
.studio--careers { padding-top: 180px; background: var(--mist); }
.studio__row { display: flex; justify-content: space-between; padding: 0 0 100px; }
.studio__info { max-width: 35%; flex: 1; align-self: center; }
.studio__desc { margin: 20px 0 70px; }
.studio__ind { display: flex; align-content: center; }
.studio__arrow { position: relative; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; transform: translate3d(0, 1px, 0); align-self: center; margin-right: 6px; }
.studio__arrow::before, .studio__arrow::after { content: ""; display: block; width: 5px; height: 1px; background: var(--muted); transform-origin: left; }
.studio__arrow::before { transform: rotate(39deg); } .studio__arrow::after { transform: rotate(-39deg); }
.studio__arrow--r { transform: scaleX(-1); margin: 0; }
.studio__cur { font-family: var(--f-narrow); font-weight: 600; width: 27px; }
.studio__timer { width: 62px; height: 1px; background: #eeeeee; position: relative; margin: 0 10px; align-self: center; }
.carousel__bar { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--flame); transform: scaleX(0); transform-origin: left; transition-property: transform; transition-timing-function: linear; transition-duration: 0s; }
.studio__total { color: var(--gray-4); }
.studio__car { max-width: 50%; flex: 1; position: relative; }
.studio__spark { position: absolute; bottom: -120px; left: -85px; }
.carousel { height: 750px; position: relative; opacity: 0; transition: opacity .85s var(--e1); }
.carousel::after { content: ""; position: absolute; top: -2px; left: 0; width: 200%; height: 100%; z-index: 8; background: var(--fog); transform: scale(1); transform-origin: top; transition: transform .85s var(--e1); }
.carousel.in { opacity: 1; }
.carousel.in::after { transform: scaleY(0); }
.carousel__now { position: relative; width: 100%; height: 100%; overflow: hidden; }
.carousel__next { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; transform: translate3d(80px, 0, 0); overflow: hidden; }
.carousel__next::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .5); z-index: 6; }
.carousel__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.2); opacity: 0; transition: all 1.25s var(--e1); }
.carousel__img .ph { width: 100%; aspect-ratio: 540 / 676; }
.carousel__img.is-on { transform: scale(1); opacity: 1; z-index: 5; }
.carousel__nums { position: relative; transform: translate3d(15px, -90px, 0); z-index: 8; }
.carousel__nums ul { position: relative; }
.carousel__num { position: absolute; top: 0; right: 0; overflow: hidden; }
.carousel__num span { display: inline-block; opacity: 0; transform: translate3d(-100%, 0, 0); transition: opacity .9s var(--e1), transform .9s var(--e1); }
.carousel__num.is-on span { opacity: 1; transform: none; }
@media (max-width: 1440px) {
  .studio__row { padding: 0 0 30px; }
  .studio__info { transform: translate3d(0, -30px, 0); }
  .carousel__nums { transform: translate3d(15px, -190px, 0); }
  .studio__spark { bottom: -70px; }
}
@media (max-width: 1280px) {
  .studio__info { transform: translate3d(0, -50px, 0); }
  .carousel__nums { transform: translate3d(15px, -270px, 0); }
  .studio__spark { bottom: 0; }
}
@media (max-width: 768px) {
  .studio { padding-top: 90px; }
  .studio__row { flex-direction: column; justify-content: flex-start; padding: 0 0 90px; }
  .studio__info { transform: none; max-width: 100%; }
  .studio__desc { margin: 20px 0 35px; }
  .studio__ind { margin-bottom: 40px; }
  .studio__car { max-width: calc(100% - 35px); }
  .carousel { height: 375px; }
  .carousel__next { display: none; }
  .carousel__nums { transform: translate3d(15px, -60px, 0); }
}

/* ================================================================== ABOUT */
body[data-page="about"] { background: var(--mist); }   /* the fixed growing circle shows through the values band */
.page-case { background: var(--mist); }
.white-ground { background: var(--paper); }
.statement { display: flex; justify-content: center; align-items: center; padding: 300px 0; background: var(--paper); position: relative; }
.statement__ring .ring-wrap { position: absolute; overflow: visible; }
.statement__ring .ring { position: absolute; top: -180px; right: calc(50vw - 780px); }
.statement__spark { position: absolute; top: 0; right: 90px; transform: translate3d(40px, 0, 0); }
.statement__ribbon { text-transform: uppercase; margin-bottom: 40px; }
.statement__text { max-width: 70%; transform: translate3d(40px, 0, 0); }
.statement__more { margin-top: 75px; transform: translate3d(40px, 0, 0); display: flex; }
@media (max-width: 1440px) { .statement__text { max-width: 75%; } }
@media (max-width: 768px) {
  .statement { padding: 200px 0; }
  .statement__spark { transform: none; top: auto; bottom: -200px; right: 0; }
  .statement__text { transform: none; line-height: 38px; }
  .statement__more { transform: none; }
}
.awards { position: relative; }
.awards__in { position: relative; padding: 400px 0; text-align: center; }
.awards__spark { position: absolute; top: 220px; right: 0; }
.awards__list { display: flex; justify-content: space-between; margin-top: 95px; }
.awards__list li { max-width: 200px; width: 200px; }
.awards__logo { width: 200px; height: 106px; color: rgba(255, 255, 255, .85); }
@media (max-width: 768px) {
  .awards__in { padding: 200px 0; }
  .awards__list { flex-wrap: wrap; justify-content: center; width: calc(100% + 40px); transform: translate3d(-20px, 0, 0); }
  .awards__list li { max-width: 50%; }
  .awards__logo { width: 135px; height: 72px; }
}
.quotes { display: flex; flex-direction: column; padding-top: 180px; }
.quotes__spark { position: absolute; top: 370px; left: 0; }
.quotes__key { max-width: 66.7%; }
.quotes__key .ph { aspect-ratio: 720 / 480.23; }
.quotes__block { max-width: 56.7%; margin-right: 10%; align-self: flex-end; position: relative; transform: translate3d(0, -40px, 0); z-index: 2; }
.quotes__list { margin-top: 140px; position: relative; z-index: 3; }
.quotes__item { display: flex; margin-bottom: 90px; }
.quotes__logo { max-width: 120px; flex: 1; }
.quotes__logo .ph { aspect-ratio: 2 / 1; color: var(--gray-2); }
.quotes__q { flex: 2; padding-left: 80px; }
.quotes__by { margin-top: 20px; color: var(--muted); position: relative; }
.quotes__by::before { content: ""; position: absolute; top: 17px; left: -30px; width: 20px; height: 1px; background: var(--muted); opacity: .5; }
@media (max-width: 1280px) { .quotes__block { max-width: 67.7%; } }
@media (max-width: 768px) {
  .quotes { padding-top: 90px; }
  .quotes__key, .quotes__block { max-width: 100%; }
  .quotes__block { transform: translate3d(0, -20px, 0); }
  .quotes__list { margin-top: 70px; }
  .quotes__item { flex-direction: column; margin-bottom: 45px; }
  .quotes__q { padding: 0; }
  .quotes__by::before { left: 0; }
}

/* ================================================================== SERVICES LANDING */
.page-services .phead__left { width: 70%; }
@media (max-width: 768px) { .page-services .phead__left { width: 100%; } }
.slist { margin: 80px 0 200px; }
.slist__title { max-width: 57%; margin-bottom: 120px; }
.slist__wrap { display: flex; justify-content: flex-end; }
.slist__grid { display: grid; grid-template-columns: auto auto; column-gap: 120px; row-gap: 20px; }
.slist__grid li { display: flex; justify-content: space-between; align-items: center; }
.slist__lab { position: relative; }
.slist__lab a { position: relative; z-index: 2; display: block; }
.slist__bar { position: absolute; bottom: -5px; right: -20px; width: 100%; height: 20px; background: #eeeeee; z-index: 1; transform-origin: right; transform: scaleX(0); transition: transform .85s var(--e2); }
@media (min-width: 769px) { .slist__grid li:hover .slist__bar { transform: scaleX(1); } }
.plus { display: block; position: relative; width: 7px; height: 7px; margin-left: 50px; z-index: 2; transform: translate3d(0, 3px, 0); }
.plus::before, .plus::after { content: ""; position: absolute; top: calc(50% - 2px); left: 0; width: 100%; height: 1px; background: var(--flame); }
.plus::after { transform: rotate(90deg); }
@media (max-width: 768px) {
  .slist { margin: 60px 0; }
  .slist__title { max-width: 100%; margin-bottom: 40px; }
  .slist__wrap { justify-content: flex-start; }
  .slist__grid { display: block; }
  .slist__grid li { margin-bottom: 20px; }
}
.clients { background: var(--mist); padding: 180px 0 150px; }
.clients__title { max-width: 50%; margin: 0 auto 90px; text-align: center; }
.clients__list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.clients__list li { max-width: 170px; width: 100%; margin: 0 40px 80px; }
.clients__logo { height: 73px; color: var(--gray-1); }
@media (max-width: 1440px) { .clients__title { max-width: 60%; } }
@media (max-width: 768px) {
  .clients { padding: 90px 0 75px; }
  .clients__title { max-width: 100%; }
  .clients__list li { margin: 0 15px 40px; max-width: 120px; }
  .clients__logo { height: 45px; }
}
.approach { padding-top: 100px; position: relative; }
.approach::before { background: var(--char); }
.approach__sec { position: relative; color: var(--paper); }
.approach__ring .ring-wrap { position: relative; overflow: visible; }
.approach__ring .ring { position: absolute; top: 70px; left: -400px; right: auto; transform: scaleX(-1); }
.approach__spark { position: absolute; top: 640px; left: 485px; }
.approach__mtitle { display: none; }
.approach__list { display: flex; justify-content: flex-end; margin-top: 120px; padding-bottom: 50px; }
.approach__items { max-width: 440px; margin-right: 120px; }
.approach__icon { margin-bottom: 30px; transform: translate3d(-30px, 0, 0); height: 150px; }
.approach__icon[data-anim="up"] { transform: translate3d(-30px, 20px, 0); }
.approach__icon[data-anim="up"].in { transform: translate3d(-30px, 0, 0); }
.loop { width: 150px; height: 150px; position: relative; }
.loop i { position: absolute; border-radius: 50%; background: var(--flame); }
.loop i:nth-child(1) { width: 26px; height: 26px; left: 62px; top: 62px; animation: loopA 3.2s var(--e4) infinite; }
.loop i:nth-child(2) { width: 10px; height: 10px; left: 70px; top: 30px; background: var(--paper); opacity: .6; animation: loopB 3.2s var(--e4) infinite; }
@keyframes loopA { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
@keyframes loopB { 0% { transform: rotate(0deg) translateX(40px); } 100% { transform: rotate(360deg) translateX(40px); } }
.approach__name { margin-bottom: 10px; }
.approach__desc { margin-bottom: 150px; }
.approach-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }
.approach-fixed .wrap { display: flex; height: 100%; margin-top: 180px; }
.approach-fixed__title { max-width: 50%; }
.approach-fixed__title .w { transition-duration: .9s; }
.approach-fixed.is-on .approach-fixed__title .w { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition-duration: 1.45s; }
.is-mobile .approach-fixed { display: none; }
@media (max-width: 1440px) { .approach__spark { left: 430px; } }
@media (max-width: 768px) {
  .approach { padding-top: 90px; }
  .approach__spark { left: auto; top: 140px; right: -120px; }
  .approach__mtitle { display: block; }
  .approach__desc { margin-bottom: 90px; }
}
.collab { padding: 130px 0 0; }
.collab__sec { position: relative; z-index: 3; }
.collab__title { width: 40%; position: relative; z-index: 3; }
.collab__content { display: flex; transform: translate3d(0, -35px, 0); }
.collab__img { max-width: 680px; flex: 2; margin-left: 40px; }
.collab__img .reveal { z-index: 3; }
.collab__img .ph { aspect-ratio: 640 / 433; }
.collab__text { flex: 1; padding-left: 120px; }
.collab__mtitle { display: none; }
.collab__name { margin-bottom: 15px; }
.collab__desc { margin-bottom: 55px; }
@media (max-width: 1440px) { .collab__title { width: 50%; } .collab__text { padding-left: 80px; } }
@media (max-width: 1280px) { .collab__img { max-width: 500px; } }
@media (max-width: 768px) {
  .collab { padding: 90px 0 0; }
  .collab__title { display: none; }
  .collab__content { flex-direction: column; transform: none; }
  .collab__img { margin-left: 0; margin-bottom: 45px; position: relative; width: 100vw; transform: translate3d(-20px, 0, 0); }
  .collab__text { padding-left: 0; }
  .collab__mtitle { display: block; margin-bottom: 50px; }
}

/* ================================================================== DETAIL HEADS (service, case, contact) */
.dhead { padding-top: 180px; }
.dhead--service { background: var(--mist); }
.dhead__b1 { display: flex; width: 100%; padding-left: calc(50% - 600px); overflow: hidden; }
.dhead--case .dhead__b1 { box-sizing: border-box; }
.dhead--service .dhead__b1 { box-sizing: content-box; }
.dhead__spark { position: absolute; top: 100px; right: calc(50% - 670px); }
.dhead__info { max-width: 500px; width: 500px; }
.dhead--case .dhead__info { max-width: 400px; width: 400px; margin-right: 8%; }
.dhead__ribbon { text-transform: uppercase; margin: 40px 0 50px; }
.dhead__detail { transform: translate3d(40px, 0, 0); }
.dhead__project { margin-bottom: 225px; }
.dhead--case .dhead__project { margin-bottom: 130px; }
.dhead__mimg { display: none; width: calc(100% + 40px); height: 290px; transform: translate3d(-20px, 0, 0); margin-bottom: 30px; position: relative; }
.dhead__dt { text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.dhead--service .dhead__dt { margin-bottom: 20px; }
.dhead__svc { margin-bottom: 50px; }
.dhead__imgbox { flex: 1; height: 720px; position: relative; z-index: 2; overflow: visible; }
.dhead--service .dhead__imgbox { margin-left: 60px; }
.dhead--case .dhead__imgbox { padding-top: 20px; height: 740px; }
.dhead__b2 { padding: 180px 0; }
.dhead__b2 > div { display: flex; justify-content: flex-end; }
.dhead__headline { max-width: 53.33%; }
.dhead--case .dhead__headline { max-width: 56.66%; }
.dhead__htitle { margin-bottom: 50px; }
@media (max-width: 1440px) {
  .dhead__b1 { padding-left: calc(50% - 540px); }
  .dhead__headline, .dhead--case .dhead__headline { max-width: 65%; }
}
@media (max-width: 1280px) {
  .dhead__b1 { padding-left: calc(50% - 480px); }
  .dhead__project, .dhead--case .dhead__project { margin-bottom: 100px; }
  .dhead__imgbox { height: 600px; }
  .dhead--case .dhead__imgbox { height: 620px; }
}
@media (max-width: 768px) {
  .dhead { padding-top: 116px; }
  .dhead__b1 { padding-left: 0; flex-direction: column; }
  .dhead__spark { top: 200px; right: 20px; }
  .dhead__info, .dhead--case .dhead__info { max-width: 100%; width: 100%; padding: 0 20px; margin-right: 0; }
  .dhead__ribbon { margin: 0 0 32px; }
  .dhead__detail { transform: none; }
  .dhead__project, .dhead--case .dhead__project { margin-bottom: 42px; }
  .dhead__mimg { display: block; }
  .dhead__dt { margin-bottom: 16px; }
  .dhead__svc { margin-bottom: 30px; }
  .dhead__imgbox { display: none; }
  .dhead__b2 { padding: 90px 0; }
  .dhead__headline, .dhead--case .dhead__headline { max-width: 100%; }
  .dhead__htitle { margin-bottom: 30px; }
}

/* service detail body */
.sbody { display: flex; margin: 180px 0 200px; }
.sbody__side { width: 30%; }
.sbody__points li { margin-bottom: 12px; }
.sbody__points li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--flame); margin-right: 20px; transform: translate3d(0, calc(-50% - 2px), 0); }
.sbody__related { margin-top: 250px; }
.sbody__rtitle { text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.sbody__rlist { color: var(--muted); text-decoration: underline; }
.sbody__main { width: 70%; padding-top: 180px; position: relative; }
.sbody__main p { margin-bottom: 45px; }
.sbody__spark { position: absolute; top: 45px; right: -50px; }
.sbody__cta { margin: 160px 0 0; display: flex; }
.sbody__related--m { display: none; }
@media (max-width: 768px) {
  .sbody { flex-direction: column; margin: 90px 0; }
  .sbody__side { width: 100%; }
  .sbody__related { margin-top: 50px; }
  .sbody__side .sbody__related { display: none; }
  .sbody__related--m { display: block; }
  .sbody__rlist li { margin-bottom: 10px; }
  .sbody__main { width: 100%; padding-top: 10px; }
  .sbody__main p { margin-bottom: 20px; }
  .sbody__spark { top: -200px; }
  .sbody__cta { margin: 80px 0 0; }
}
.more-works { background: var(--mist); padding: 180px 0; margin-bottom: -180px; }
.more-works .pgrid { padding-top: 120px; }
.more-works--case { background: none; padding: 0 0 180px; }
@media (max-width: 768px) {
  .more-works { padding: 90px 0; margin-bottom: -90px; }
  .more-works .pgrid { padding-top: 40px; }
  .more-works--case { padding: 0 0 90px; }
  .more-works--case .pgrid { padding-top: 20px; }
}

/* ================================================================== CASE STUDY BODY */
.page-case { background: var(--mist); }
.case-tb { display: flex; }
.case-tb--right { justify-content: flex-end; }
.case-tb__host { flex: 1 1 auto; }
.case-tb__box { width: 50%; box-sizing: content-box; }
.case-tb--right .case-tb__box { padding-right: 40px; }
.case-tb__title { margin-bottom: 20px; }
.case-flex { display: flex; justify-content: space-between; }
.case-flex__col { flex: 1; max-width: 47.16%; }
.case-flex__col--r { text-align: right; }
.case-flex .case-tb { padding-right: 120px; flex-direction: column; margin: 120px 0 250px; }
.case-flex .case-tb .case-tb__box { width: auto; padding: 0; }
.pad-reg { padding: 180px 0; }
.pad-bot { padding-bottom: 180px; }
.case-img { margin: 0 auto; }
.case-mob { background: var(--paper); padding: 160px 0; }
.case-mob .wrap { display: flex; justify-content: space-between; }
.case-mob__col { width: 43.5%; display: flex; flex-direction: column; }
.case-mob__text { max-width: 80%; margin: 90px 0 280px; }
.case-mob__toR { max-width: 400px; width: 100%; align-self: flex-end; }
.case-mob__toL { max-width: 400px; width: 100%; align-self: flex-start; }
.case-mob__col--r { text-align: right; }
.case-mob__col--r .case-mob__toL:first-child { margin-bottom: 120px; }
.next-case { padding-top: 180px; }
@media (max-width: 1440px) { .case-flex .case-tb { padding-right: 80px; } }
@media (max-width: 1280px) { .case-flex .case-tb { padding-right: 60px; } }
@media (max-width: 768px) {
  .case-tb__box { width: 100%; }
  .case-flex { flex-direction: column; }
  .case-flex__col { max-width: 100%; }
  .case-flex__col:first-child { margin-bottom: 30px; }
  .case-flex .case-tb { padding-right: 0; margin: 0 0 60px; }
  .pad-reg { padding: 90px 0; }
  .pad-bot { padding-bottom: 90px; }
  .case-mob { padding: 90px 0; }
  .case-mob .wrap { flex-direction: column; }
  .case-mob__col { width: 100%; }
  .case-mob__col--l { margin-bottom: 90px; }
  .case-mob__text { margin: 0 0 80px; }
  .case-mob__col--r .case-mob__toL:first-child { margin-bottom: 90px; }
  .next-case { padding-top: 90px; }
}

/* ================================================================== POST */
.post-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; transform: scale(1.1); }
.post-bg .ph { position: absolute; inset: 0; }
.post-bg::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .65; }
.is-mobile .post-bg { position: absolute; transform: scale(1); z-index: -1; }
.post-head { min-height: min(100vh, 980px); display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.post-head .phead { margin: 0; }
.post-head .phead__left { width: 60%; }
.post-share { display: flex; justify-content: flex-end; align-self: flex-end; margin-bottom: 100px; }
.post-share span { width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-left: 24px; position: relative; transition: border-color .85s var(--e1); }
.post-share span::before { content: ""; position: absolute; top: -5px; left: -5px; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .15); transform: scale(.84375); opacity: 0; transition: all .85s var(--e1); }
.post-share span:hover { border-color: transparent; }
.post-share span:hover::before { transform: scale(1); opacity: 1; }
.post-share i { width: 14px; height: 14px; border-radius: 3px; background: var(--paper); opacity: .85; }
.page-post .wrap { z-index: 2; }
.post-other { background: var(--mist); padding: 180px 0; }
.post-other .agrid { margin: 115px 0 0; }
@media (max-width: 1280px) { .post-head .phead__left { width: 70%; } }
@media (max-width: 768px) {
  .post-head { height: min(100vh, 980px); }
  .post-head .phead__left { width: 100%; }
  .post-share { flex: 2; align-items: flex-end; }
  .post-other { padding: 90px 0 0; }
  .post-other .agrid { margin: 55px 0 0; }
}

/* ================================================================== BLOG + WORK LANDINGS */
.landing { position: relative; }
.landing .agrid { margin: 0 0 120px; }
@media (max-width: 768px) { .landing .agrid { margin: 55px 0 0; } }

/* ================================================================== CAREERS */
.jobs { display: flex; justify-content: flex-end; margin-bottom: 110px; margin-top: 100px; }
.jobs__wrap { max-width: 56.66%; }
.jobs__list { margin: 20px 0; }
.jobs__list li { display: block; height: 145px; }
.jobs__list li:not(:last-of-type)::after { content: ""; display: block; width: 100%; height: 1px; background: var(--line); }
.jobs__pos { display: flex; height: 100%; }
.jobs__info { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.jobs__title { position: relative; flex: none; align-self: flex-start; }
.jobs__title span { position: relative; z-index: 2; }
.jobs__bar { position: absolute; bottom: 0; right: -20px; width: 100%; height: 26px; background: #eeeeee; z-index: 1; transform-origin: right; transform: scaleX(0); transition: transform .85s var(--e2); }
@media (min-width: 769px) { .jobs__pos:hover .jobs__bar { transform: scaleX(1); } }
.jobs__dept { margin-top: 10px; }
.jobs__plus { position: relative; width: 11px; height: 11px; display: inline-block; z-index: 2; margin-top: 50px; }
.jobs__plus::before, .jobs__plus::after { content: ""; position: absolute; top: calc(50% - 2px); left: 0; width: 100%; height: 1px; background: var(--flame); }
.jobs__plus::after { transform: rotate(90deg); }
@media (max-width: 1280px) { .jobs__wrap { max-width: 65%; } }
@media (max-width: 768px) {
  .jobs { margin-bottom: 0; }
  .jobs__wrap { max-width: 100%; }
  .jobs__list li { height: 100px; }
  .jobs__plus { margin-top: 28px; }
}

/* application and inquiry forms (visual only; nothing is sent) */
.apply { position: relative; padding-top: 140px; }
.apply__fill { position: absolute; inset: 0; background: var(--mist); z-index: 1; }
.is-mobile .apply__fill { display: none; }
.apply__wrap { position: relative; z-index: 2; }
.apply__wrap .wrap { display: flex; }
.apply__form-box { max-width: 68.33%; }
.apply__form { margin: 100px 0 245px; }
.frow { display: flex; justify-content: space-between; width: 100%; margin-bottom: 20px; }
.fhalf { width: calc(50% - 20px); }
.ffull { width: 100%; }
.fsub { margin-top: 60px; }
.field-in input { box-sizing: content-box; border: none; width: 100%; height: 70px; background: none; font: inherit; line-height: 1.15; caret-color: var(--flame); padding: 1px 2px; }
.field-in input:focus, .field-in textarea:focus { outline: none; }
.field-in textarea { border: none; display: block; width: 100%; resize: none; min-height: 70px; padding: 25px 2px 2px; background: none; font: inherit; line-height: 1.15; }
.field-in .uline-in { display: block; width: 100%; height: 1px; background: #bcbcbc; position: relative; }
.field-in .uline-in::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--char); transform: scaleX(0); transform-origin: left; transition: transform .85s var(--e1); }
.field-in input:focus + .uline-in::after, .field-in textarea:focus + .uline-in::after { transform: scaleX(1); }
.fbtn-row { padding-top: 50px; }
.fcomment { align-self: flex-end; text-align: right; color: #999999; transform: translate3d(0, -10px, 0); }
@media (max-width: 1280px) { .fcomment { width: calc(60% - 20px); } }
@media (max-width: 768px) {
  .apply { padding-top: 20px; }
  .apply__wrap { background: var(--mist); padding-top: 90px; }
  .apply__form-box { max-width: 100%; }
  .apply__form { margin: 50px 0 120px; }
  .frow { flex-wrap: wrap; margin-bottom: 0; }
  .fhalf { width: 100%; }
  .field-in input, .field-in textarea { margin-top: 10px; }
  .fbtn-row { order: 2; padding-top: 30px; }
  .fcomment { order: 1; text-align: left; width: 100%; margin-top: 35px; }
}

/* ================================================================== CONTACT */
.contact { padding-top: 180px; }
.contact__page { position: relative; display: flex; }
.contact__b1 { display: flex; width: 100%; padding-left: calc(50% - 600px); overflow: hidden; margin-bottom: 240px; }
.contact__spark { position: absolute; top: -30px; right: calc(50% - 670px); z-index: -1; }
.contact__info { max-width: 760px; width: 50%; margin-right: 2%; }
.contact__title { margin-top: 40px; max-width: 70%; }
.contact__sub { width: 400px; margin-top: 10px; }
.contact__sub a { color: var(--flame); }
.contact__form { max-width: 80%; margin-top: 50px; }
.contact__form .ffull { background: var(--fog); }
.contact__form input { padding: 0 20px; box-sizing: border-box; }
.contact__form .fbtn-row { padding-top: 50px; }
.contact__form textarea { padding: 25px 20px; height: 280px; }
.contact__form .uline-in { background: var(--fog); }
.pill { display: flex; align-items: center; height: 48px; padding: 0 25px 0 30px; border-radius: 30px; background: var(--char); color: var(--fog); text-transform: uppercase; transition: background-color .85s var(--e1); cursor: pointer; }
.pill:hover { background: var(--flame); }
.pill span:first-child { transform: translate3d(0, -1px, 0); }
.pill .btn__plus { opacity: 1; }
.pill .btn__plus::before, .pill .btn__plus::after { background: var(--paper); }
.contact__imgbox { box-sizing: content-box; flex: 1; height: 940px; position: relative; z-index: 2; overflow: visible; padding-top: 20px; }
.contact__ring { z-index: -1; }
.info3 { background: var(--fog); padding: 170px 0; }
.info3 .wrap { display: flex; justify-content: space-between; }
.info3__col { max-width: 300px; display: flex; flex-direction: column; }
.info3__up { min-height: 140px; }
.info3__low { align-self: flex-start; }
.info3__col:last-child .info3__desc { width: 280px; }
@media (max-width: 1440px) { .contact__b1 { padding-left: calc(50% - 540px); } .contact__title { max-width: 80%; } }
@media (max-width: 1280px) { .contact__b1 { padding-left: calc(50% - 480px); } .contact__imgbox { height: 600px; } }
@media (max-width: 768px) {
  .contact { padding-top: 30px; }
  .contact__page { padding: 90px 0 60px; }
  .contact__b1 { padding-left: 0; flex-direction: column; margin-bottom: 0; }
  .contact__spark { top: 150px; right: -140px; }
  .contact__info { max-width: 100%; width: 100%; padding: 0 20px; margin-right: 0; }
  .contact__sub { width: 100%; }
  .contact__form { max-width: 100%; margin-top: 18px; margin-bottom: 60px; }
  .contact__form .ffull { margin-bottom: 15px; }
  .contact__form input { margin-top: 0; }
  .contact__imgbox { display: none; }
  .info3 { padding: 90px 0; }
  .info3 .wrap { flex-direction: column; }
  .info3__col { max-width: 100%; }
  .info3__col:not(:last-of-type) { margin-bottom: 60px; }
  .info3__up { min-height: 0; margin-bottom: 10px; }
}

/* ================================================================== THANK YOU + 404 */
.thanks { position: relative; padding-top: 200px; }
.thanks__spark { position: absolute; top: 35px; right: 0; }
.thanks__title { padding-top: 180px; }
.thanks__sub { margin-top: 25px; }
.thanks__sub a { font-family: var(--f-bold); font-weight: 700; font-size: 16px; line-height: 32px; letter-spacing: .05em; color: var(--flame); }
@media (max-width: 768px) { .thanks__title { padding-top: 116px; } .thanks__sub a { line-height: 26px; } }
.nf { display: flex; align-items: center; min-height: min(100vh, 980px); background: var(--char); color: var(--paper); }
.nf .wrap { height: 100%; display: flex; align-items: center; text-align: right; }
.nf__col { flex: 1; max-width: 50%; }
.nf__ribbon { text-transform: uppercase; margin-bottom: 20px; }
.nf__num { margin-bottom: 30px; transform-origin: right; }
.nf__msg { opacity: .3; }
.nf__spark { position: absolute; left: 60%; bottom: -300px; }
.nf__mmsg { display: none; }
@media (max-width: 768px) {
  .nf .wrap { flex-direction: column; }
  .nf__col { width: 100%; max-width: 100%; text-align: center; }
  .nf__col--msg { display: none; }
  .nf__mmsg { display: flex; justify-content: center; }
  .nf__mmsg .nf__msg { max-width: 50%; margin-bottom: 30px; }
  .nf__num { transform-origin: center; }
}

/* ================================================================== REDUCED MOTION (the studied site has none; the replica honours it) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-anim]:not(.is-split) { visibility: visible; }
  .cursor { display: none; }
}