/* M&T Collect / Atelier interface — marketing routes only */
:root {
  --at-ink: #15241d;
  --at-ink-soft: #31453c;
  --at-paper: #f8f5ef;
  --at-milk: #fffdf8;
  --at-line: rgba(21, 36, 29, .16);
  --at-peach: #f1ad8c;
  --at-lilac: #d7ccf7;
  --at-lime: #c9e85a;
  --at-blue: #3d65df;
  --at-red: #ed705b;
  --at-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --at-serif: Georgia, 'Times New Roman', serif;
  --at-shadow: 0 18px 50px rgba(26, 43, 33, .12);
}

.studio-route {
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.studio-route .site-header {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.studio-route .site-header.is-scrolled {
  background: rgba(255, 253, 248, .88);
  border-bottom: 1px solid rgba(21, 36, 29, .1);
  box-shadow: 0 5px 24px rgba(21, 36, 29, .05);
  backdrop-filter: blur(18px);
}

.studio-route .site-header .nav { width: min(1340px, calc(100% - 56px)); min-height: 82px; }
.studio-route .site-header .brand-image { width: 128px; height: 39px; }
.studio-route .site-header .nav-links { gap: 30px; font: 700 .68rem/1 var(--at-mono); letter-spacing: .08em; text-transform: uppercase; }
.studio-route .site-header .nav-links a { padding: .7rem 0; }
.studio-route .site-header .nav-links a:hover,
.studio-route .site-header .nav-links a.active { color: var(--at-ink); }
.studio-route .site-header .nav-links a:after { background: var(--at-red); height: 2px; bottom: .35rem; }
.studio-route .site-header .nav-cta {
  padding: .76rem 1rem;
  border-radius: 999px;
  background: var(--at-ink);
  border-color: var(--at-ink);
  color: var(--at-milk);
  font: 700 .69rem/1 var(--at-mono);
  letter-spacing: .06em;
  box-shadow: none;
}
.studio-route .site-header .nav-cta:hover { background: var(--at-red); border-color: var(--at-red); transform: translateY(-2px); }

/* Header contrast follows the section sitting behind it. The glass is intentional:
   it keeps navigation readable without hiding the colour changes in the story. */
.studio-route .site-header.at-theme-light,
.studio-route .site-header.at-theme-light.is-scrolled {
  --at-header-fg: var(--at-ink);
  --at-header-bg: rgba(255, 253, 248, .76);
  --at-header-line: rgba(21, 36, 29, .16);
  --at-header-action: var(--at-ink);
  --at-header-action-fg: var(--at-milk);
  color: var(--at-header-fg);
  background: var(--at-header-bg);
  border-bottom: 1px solid var(--at-header-line);
  box-shadow: 0 5px 24px rgba(21, 36, 29, .06);
  backdrop-filter: blur(18px) saturate(1.08);
}
.studio-route .site-header.at-theme-dark,
.studio-route .site-header.at-theme-dark.is-scrolled {
  --at-header-fg: var(--at-milk);
  --at-header-bg: rgba(17, 29, 23, .78);
  --at-header-line: rgba(255, 253, 248, .19);
  --at-header-action: var(--at-lime);
  --at-header-action-fg: var(--at-ink);
  color: var(--at-header-fg);
  background: var(--at-header-bg);
  border-bottom: 1px solid var(--at-header-line);
  box-shadow: 0 5px 26px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px) saturate(1.08);
}
.studio-route .site-header .brand-image img { transition: filter .28s ease; }
.studio-route .site-header.at-theme-dark .brand-image img { filter: brightness(0) invert(1); }
.studio-route .site-header .nav-links a,
.studio-route .site-header .nav-links a:hover,
.studio-route .site-header .nav-links a.active { color: var(--at-header-fg); }
.studio-route .site-header .nav-links a:after { background: var(--at-lime); }
.studio-route .site-header .nav-cta {
  color: var(--at-header-action-fg);
  background: var(--at-header-action);
  border-color: var(--at-header-action);
}
.studio-route .site-header.at-theme-dark .nav-cta:hover { color: var(--at-milk); background: var(--at-red); border-color: var(--at-red); }
.studio-route .site-header .menu-toggle span { background: var(--at-header-fg); }

.at-shell { width: min(1340px, calc(100% - 56px)); margin-inline: auto; }
.at-eyebrow { margin: 0; color: var(--at-ink-soft); font: 700 .67rem/1.35 var(--at-mono); letter-spacing: .13em; text-transform: uppercase; }
.at-eyebrow span { color: var(--at-red); }
.at-link { display: inline-flex; align-items: center; gap: .55rem; color: inherit; font: 700 .75rem/1 var(--at-mono); letter-spacing: .06em; text-transform: uppercase; }
.at-link b { display: inline-grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 400 1rem/1 Arial, sans-serif; transition: transform .24s ease, background .24s ease, color .24s ease; }
.at-link:hover b { transform: translate(3px, -3px); background: var(--at-ink); color: var(--at-paper); }
.at-button { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.28rem; border-radius: 999px; background: var(--at-ink); color: var(--at-milk); font: 700 .7rem/1 var(--at-mono); letter-spacing: .07em; text-transform: uppercase; transition: background .23s ease, transform .23s ease, box-shadow .23s ease; }
.at-button span { font: 400 1.1rem/1 Arial, sans-serif; }
.at-button:hover { background: var(--at-red); box-shadow: 0 13px 28px rgba(237, 112, 91, .3); transform: translateY(-3px); }
.at-button--quiet { background: transparent; color: var(--at-ink); border: 1px solid var(--at-ink); }
.at-button--quiet:hover { color: var(--at-milk); }

/* M&T Cast — original animal figures with a little western / Yeşilçam energy. */
.at-mascot { --mascot-main: var(--at-ink); --mascot-secondary: var(--at-lilac); --mascot-detail: var(--at-lime); --mascot-card: var(--at-milk); position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; width: min(100%, 270px); padding: 8px 11px 8px 7px; color: var(--at-ink); border: 1px solid var(--at-ink); background: var(--mascot-card); box-shadow: 5px 5px 0 var(--at-ink); transform: rotate(-1.5deg); }
.at-mascot--crow { --mascot-main: #17241d; --mascot-secondary: var(--at-blue); --mascot-detail: var(--at-lime); --mascot-card: #e9e4f7; }
.at-mascot--fox { --mascot-main: var(--at-red); --mascot-secondary: #f7dec2; --mascot-detail: var(--at-ink); --mascot-card: #ffe2d5; }
.at-mascot--cat { --mascot-main: var(--at-lime); --mascot-secondary: #fff5d6; --mascot-detail: var(--at-blue); --mascot-card: #f0edcf; }
.at-mascot--horse { --mascot-main: #56a8a0; --mascot-secondary: var(--at-peach); --mascot-detail: var(--at-ink); --mascot-card: #d6f0ed; }
.at-mascot-art { min-width: 0; line-height: 0; }
.at-mascot-art svg { display: block; width: 70px; height: 70px; overflow: visible; }
.at-mascot .m-main { fill: var(--mascot-main); }.at-mascot .m-secondary { fill: var(--mascot-secondary); }.at-mascot .m-detail { fill: var(--mascot-detail); }.at-mascot .m-eye { fill: var(--at-ink); }.at-mascot .m-shadow { fill: rgba(21,36,29,.16); }.at-mascot .m-line { fill: none; stroke: var(--at-ink); stroke-width: 4; stroke-linecap: round; }
.at-mascot figcaption { display: grid; gap: 4px; min-width: 0; }
.at-mascot figcaption span { color: var(--at-blue); font: 800 .53rem/1.1 var(--at-mono); letter-spacing: .12em; }
.at-mascot figcaption strong { font: 500 .82rem/1.05 var(--at-serif); letter-spacing: -.03em; }
.at-mascot--hero { position: absolute; z-index: 7; right: -2%; bottom: 8%; width: 245px; transform: rotate(2.2deg); }
.at-mascot--chapter { width: min(100%, 306px); margin: 14px 0 7px; }
.at-mascot--chapter figcaption strong { font-size: .88rem; }
.at-mascot--page { position: absolute; z-index: 2; right: max(30px, calc((100vw - 1340px) / 2)); top: 103px; width: 250px; transform: rotate(2deg); }
.at-package-route .at-mascot--page { --mascot-card: #d7ccf7; }

/* Home / opening composition */
.at-home { overflow: clip; }
.at-hero { position: relative; min-height: 100svh; padding: 155px 0 58px; overflow: hidden; isolation: isolate; background: var(--at-paper); }
.at-hero:before { content: ''; position: absolute; z-index: -2; width: 63vw; height: 63vw; min-width: 660px; min-height: 660px; right: -22vw; top: -29vw; border-radius: 50%; background: var(--at-lime); opacity: .75; }
.at-hero:after { content: ''; position: absolute; z-index: -1; width: 36vw; height: 36vw; min-width: 490px; min-height: 490px; left: -15vw; bottom: -24vw; border: 1px solid var(--at-ink); border-radius: 50%; }
.at-hero-grid { position: relative; min-height: calc(100svh - 213px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); align-items: center; gap: clamp(30px, 6vw, 100px); }
.at-hero-copy { position: relative; z-index: 3; padding: 32px 0; }
.at-hero-copy h1 { max-width: 760px; margin: 1.2rem 0 1.5rem; font: 500 clamp(3.35rem, 6.45vw, 7.45rem)/.94 var(--at-serif); letter-spacing: -.052em; }
.at-hero-copy h1 em { color: var(--at-red); font-style: italic; font-weight: 400; }
.at-hero-copy > p:not(.at-eyebrow) { max-width: 510px; margin: 0; color: var(--at-ink-soft); font-size: clamp(1rem, 1.25vw, 1.16rem); line-height: 1.55; }
.at-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 2rem; }
.at-hero-actions .at-link { color: var(--at-ink-soft); }

.at-hero-stage { position: relative; min-height: 570px; transform: perspective(1000px) rotateX(var(--at-tilt-y, 0deg)) rotateY(var(--at-tilt-x, 0deg)); transition: transform .25s ease-out; }
.at-stage-grid { position: absolute; inset: 6% 2% 4% 5%; border: 1px solid var(--at-line); background-image: linear-gradient(var(--at-line) 1px, transparent 1px), linear-gradient(90deg, var(--at-line) 1px, transparent 1px); background-size: 50px 50px; }
.at-stage-type { position: absolute; left: 0; bottom: 3%; z-index: 3; display: grid; width: 45%; aspect-ratio: .86; padding: 24px; align-content: space-between; background: var(--at-blue); color: var(--at-milk); box-shadow: 16px 17px 0 var(--at-ink); transform: rotate(-5deg); }
.at-stage-type b { font: 500 clamp(4.9rem, 8vw, 8.5rem)/.67 var(--at-serif); letter-spacing: -.12em; }
.at-stage-type small, .at-stage-note, .at-stage-browser small { font: 700 .56rem/1.4 var(--at-mono); letter-spacing: .1em; text-transform: uppercase; }
.at-stage-image { position: absolute; z-index: 2; inset: 1% 6% 15% 25%; overflow: hidden; border-radius: 150px 150px 0 0; box-shadow: var(--at-shadow); }
.at-stage-image img { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; filter: saturate(.87) contrast(1.05); transform: scale(1.06); }
.at-stage-note { position: absolute; z-index: 4; top: 4%; right: 0; width: 155px; padding: 17px; background: var(--at-milk); color: var(--at-ink); box-shadow: 8px 8px 0 var(--at-peach); transform: rotate(7deg); }
.at-stage-note strong { display: block; margin-top: 8px; font: 500 1.42rem/.92 var(--at-serif); letter-spacing: -.05em; }
.at-stage-browser { position: absolute; z-index: 5; right: 4%; bottom: 0; width: 55%; padding: 12px; border: 1px solid var(--at-ink); background: var(--at-milk); box-shadow: 12px 12px 0 var(--at-lilac); transform: rotate(3deg); }
.at-stage-browser header { display: flex; align-items: center; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid var(--at-line); }
.at-stage-browser header i { width: 6px; height: 6px; border-radius: 50%; background: var(--at-red); }
.at-stage-browser header i:nth-child(2) { background: var(--at-lime); }.at-stage-browser header i:nth-child(3) { background: var(--at-blue); }
.at-stage-browser header span { margin-left: auto; color: var(--at-ink-soft); font: 600 .55rem/1 var(--at-mono); }
.at-stage-browser main { display: grid; grid-template-columns: 1fr .78fr; min-height: 158px; padding: 16px 3px 3px; gap: 10px; }
.at-stage-browser strong { align-self: center; font: 500 clamp(1.65rem, 2.7vw, 3rem)/.84 var(--at-serif); letter-spacing: -.075em; }.at-stage-browser strong em { color: var(--at-red); font-weight: 400; }
.at-stage-browser figure { position: relative; margin: 0; overflow: hidden; background: var(--at-ink); }.at-stage-browser figure:before { content: ''; position: absolute; width: 120%; height: 75%; left: -20%; bottom: -31%; border-radius: 50%; background: var(--at-lime); }.at-stage-browser figure:after { content: 'M&T'; position: absolute; right: 8px; top: 12px; color: var(--at-milk); font: 500 1.6rem/1 var(--at-serif); letter-spacing: -.08em; }
.at-hero-rail { position: absolute; z-index: 5; left: 50%; bottom: 21px; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); white-space: nowrap; color: var(--at-ink-soft); font: 700 .57rem/1 var(--at-mono); letter-spacing: .13em; text-transform: uppercase; }.at-hero-rail i { display: block; width: 39px; height: 1px; background: var(--at-red); }

.at-ticker { display: flex; width: max-content; gap: 28px; align-items: center; padding: 17px 0; color: var(--at-milk); background: var(--at-ink); font: 700 .67rem/1 var(--at-mono); letter-spacing: .12em; text-transform: uppercase; animation: at-ticker 32s linear infinite; }.at-ticker-wrap { overflow: hidden; background: var(--at-ink); }.at-ticker i { color: var(--at-lime); font-style: normal; }.at-ticker span { white-space: nowrap; }

.at-manifesto { position: relative; padding: clamp(100px, 14vw, 210px) 0; overflow: hidden; background: var(--at-milk); }.at-manifesto:before { content: 'M&T'; position: absolute; right: -1vw; bottom: -4vw; color: rgba(61, 101, 223, .07); font: 500 clamp(15rem, 39vw, 44rem)/.6 var(--at-serif); letter-spacing: -.17em; }.at-manifesto-grid { position: relative; display: grid; grid-template-columns: minmax(170px, .35fr) minmax(0, 1.4fr) minmax(230px, .55fr); gap: 38px; align-items: start; }.at-manifesto h2 { margin: 0; font: 500 clamp(2.8rem, 5.65vw, 6.6rem)/.96 var(--at-serif); letter-spacing: -.05em; }.at-manifesto h2 em { color: var(--at-blue); font-weight: 400; }.at-manifesto aside { padding-top: .7rem; color: var(--at-ink-soft); font-size: .98rem; line-height: 1.65; }.at-manifesto aside p { margin: 0 0 1.6rem; }

/* Scroll-driven service scenes */
.at-services-story { background: var(--at-paper); }.at-chapter { position: relative; min-height: 480vh; --chapter-bg: var(--at-lilac); --chapter-accent: var(--at-blue); --chapter-dark: var(--at-ink); }.at-chapter--brand { --chapter-bg: #d8cdf5; --chapter-accent: #3d65df; }.at-chapter--web { --chapter-bg: #c7e963; --chapter-accent: #ee705b; }.at-chapter--commerce { --chapter-bg: #ffc0ab; --chapter-accent: #17241d; }.at-chapter--studio { --chapter-bg: #97d5cf; --chapter-accent: #3d65df; }
.at-chapter-sticky { position: sticky; top: 0; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .83fr) minmax(520px, 1.17fr); overflow: hidden; background: var(--chapter-bg); }.at-chapter-sticky:after { content: ''; position: absolute; z-index: 0; width: 52vw; height: 52vw; right: -21vw; top: -28vw; border: 1px solid rgba(21, 36, 29, .24); border-radius: 50%; }
.at-chapter-copy { position: relative; z-index: 3; display: flex; flex-direction: column; min-width: 0; padding: clamp(92px, 9vw, 142px) clamp(30px, 6vw, 108px) 55px max(28px, calc((100vw - 1340px) / 2)); background: rgba(255, 253, 248, .18); }.at-chapter-no { display: flex; align-items: center; gap: 10px; color: var(--at-ink-soft); font: 700 .66rem/1 var(--at-mono); letter-spacing: .12em; text-transform: uppercase; }.at-chapter-no b { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--chapter-accent); }
.at-chapter-title { margin: 1.45rem 0 0; font: 500 clamp(2.9rem, 4.5vw, 5.6rem)/.91 var(--at-serif); letter-spacing: -.05em; }.at-chapter-title em { color: var(--chapter-accent); font-style: italic; font-weight: 400; }.at-copy-swap { position: relative; min-height: 150px; margin-top: 1.05rem; }.at-copy-swap article { position: absolute; inset: 0; display: none; max-width: 445px; pointer-events: none; }.at-copy-swap strong { display: block; margin-bottom: .56rem; font: 700 .65rem/1.3 var(--at-mono); letter-spacing: .11em; text-transform: uppercase; }.at-copy-swap p { margin: 0; color: var(--at-ink-soft); font-size: 1rem; line-height: 1.62; }
.at-chapter[data-at-step='1'] .at-copy-swap article[data-at-copy='1'], .at-chapter[data-at-step='2'] .at-copy-swap article[data-at-copy='2'], .at-chapter[data-at-step='3'] .at-copy-swap article[data-at-copy='3'], .at-chapter[data-at-step='4'] .at-copy-swap article[data-at-copy='4'] { display: block; pointer-events: auto; animation: at-copy-in .38s cubic-bezier(.2,.8,.2,1) both; }
.at-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: auto; padding-top: 18px; list-style: none; }.at-stepper li { position: relative; padding-top: 12px; color: rgba(21, 36, 29, .55); border-top: 1px solid rgba(21, 36, 29, .3); font: 700 .55rem/1.3 var(--at-mono); letter-spacing: .04em; text-transform: uppercase; }.at-stepper li:before { content: ''; position: absolute; left: 0; top: -2px; width: 0; height: 3px; background: var(--at-ink); transition: width .3s ease; }.at-chapter[data-at-step='1'] .at-stepper li:nth-child(1), .at-chapter[data-at-step='2'] .at-stepper li:nth-child(-n+2), .at-chapter[data-at-step='3'] .at-stepper li:nth-child(-n+3), .at-chapter[data-at-step='4'] .at-stepper li:nth-child(-n+4) { color: var(--at-ink); }.at-chapter[data-at-step='1'] .at-stepper li:nth-child(1):before, .at-chapter[data-at-step='2'] .at-stepper li:nth-child(-n+2):before, .at-chapter[data-at-step='3'] .at-stepper li:nth-child(-n+3):before, .at-chapter[data-at-step='4'] .at-stepper li:nth-child(-n+4):before { width: 100%; }
.at-chapter-art { position: relative; z-index: 1; min-width: 0; padding: clamp(92px, 10vw, 130px) max(28px, calc((100vw - 1340px) / 2)) 60px clamp(35px, 6vw, 105px); display: grid; place-items: center; }.at-art-window { position: relative; width: min(100%, 720px); min-height: min(66vh, 690px); overflow: hidden; border: 1px solid var(--at-ink); background: var(--at-milk); box-shadow: 20px 21px 0 rgba(21, 36, 29, .17); }.at-art-window > header { position: absolute; z-index: 9; inset: 0 0 auto; display: flex; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--at-line); background: rgba(255, 253, 248, .88); font: 700 .57rem/1 var(--at-mono); letter-spacing: .1em; text-transform: uppercase; }.at-art-window > header:before { content: ''; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--at-red); box-shadow: 12px 0 0 var(--at-lime), 24px 0 0 var(--at-blue); }.at-art-window > header b { margin-left: auto; font-weight: 700; }.at-phase { position: absolute; inset: 42px 0 0; opacity: 0; transform: scale(.96) translateY(18px); pointer-events: none; transition: opacity .46s ease, transform .5s cubic-bezier(.2,.8,.2,1); }.at-chapter[data-at-step='1'] .at-phase[data-at-phase='1'], .at-chapter[data-at-step='2'] .at-phase[data-at-phase='2'], .at-chapter[data-at-step='3'] .at-phase[data-at-phase='3'], .at-chapter[data-at-step='4'] .at-phase[data-at-phase='4'] { opacity: 1; transform: none; pointer-events: auto; }

/* Brand scene */
.at-brand-brief { padding: 52px; background: #f9f4eb; }.at-brand-brief p { margin: 0 0 25px; color: var(--at-ink-soft); font: 700 .65rem/1.3 var(--at-mono); letter-spacing: .12em; }.at-brief-chips { display: flex; flex-wrap: wrap; gap: 8px; }.at-brief-chips span { padding: 9px 12px; border-radius: 100px; background: var(--at-milk); border: 1px solid var(--at-line); font: 700 .64rem/1 var(--at-mono); letter-spacing: .06em; }.at-brief-chips span:nth-child(1) { background: var(--at-blue); color: var(--at-milk); }.at-brief-chips span:nth-child(2) { background: var(--at-red); }.at-brief-swatches { display: flex; gap: 9px; margin-top: 46px; }.at-brief-swatches i { display: block; width: 74px; aspect-ratio: 1; border-radius: 50%; background: var(--at-ink); }.at-brief-swatches i:nth-child(2) { background: var(--at-blue); }.at-brief-swatches i:nth-child(3) { background: var(--at-red); }.at-brief-swatches i:nth-child(4) { background: var(--at-lime); }
.at-brand-grid { display: grid; place-items: center; padding: 12%; background-image: linear-gradient(rgba(21, 36, 29, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 36, 29, .16) 1px, transparent 1px); background-size: 34px 34px; }.at-brand-grid span { position: relative; display: grid; width: 74%; aspect-ratio: 1; place-items: center; border: 1px solid var(--at-ink); border-radius: 50%; font: 500 clamp(8rem, 18vw, 15rem)/.7 var(--at-serif); letter-spacing: -.17em; }.at-brand-grid span:before, .at-brand-grid span:after { content: ''; position: absolute; background: var(--at-red); }.at-brand-grid span:before { width: 1px; height: 118%; }.at-brand-grid span:after { height: 1px; width: 118%; }.at-brand-vector { display: grid; place-items: center; background: var(--at-blue); color: var(--at-milk); }.at-brand-vector svg { width: 79%; overflow: visible; }.at-brand-vector path { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1100; stroke-dashoffset: 0; animation: at-draw 1.4s ease both; }.at-brand-vector circle { fill: var(--at-lime); }.at-brand-application { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; padding: 26px; background: #f7f3ec; }.at-brand-application > div { display: grid; min-height: 185px; padding: 21px; align-content: space-between; color: var(--at-milk); background: var(--at-ink); }.at-brand-application > div:last-child { color: var(--at-ink); background: var(--at-lime); }.at-brand-application b { font: 500 clamp(2.8rem, 5vw, 5rem)/.75 var(--at-serif); letter-spacing: -.1em; }.at-brand-application small { font: 700 .58rem/1.3 var(--at-mono); letter-spacing: .11em; }

/* Web scene */
.at-web-map { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 23px; background: var(--at-ink); }.at-web-map div { position: relative; min-height: 135px; padding: 17px; background: var(--at-milk); font: 700 .65rem/1.3 var(--at-mono); letter-spacing: .07em; }.at-web-map div:first-child { grid-column: 1 / -1; min-height: 100px; background: var(--at-blue); color: var(--at-milk); }.at-web-map div:after { content: ''; position: absolute; left: 50%; bottom: -23px; z-index: 2; height: 23px; border-left: 1px solid var(--at-ink); }.at-web-map div:nth-last-child(-n+2):after { display: none; }.at-web-wire { padding: 9%; background: #e9edda; }.at-wire-browser { height: 100%; min-height: 390px; padding: 18px; border: 2px solid var(--at-ink); background: var(--at-milk); }.at-wire-browser i { display: block; height: 11px; width: 18%; margin-bottom: 18px; background: var(--at-ink); }.at-wire-browser strong { display: block; height: 42%; margin-bottom: 18px; border: 1px solid var(--at-ink); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(21,36,29,.12) 11px 12px); }.at-wire-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.at-wire-row span { height: 92px; border: 1px solid var(--at-ink); }.at-web-code { display: grid; grid-template-columns: 1fr .9fr; gap: 18px; padding: 9%; background: #202c27; color: var(--at-milk); }.at-code-lines { padding-top: 14px; font: 500 clamp(.75rem, 1.35vw, 1rem)/1.9 var(--at-mono); }.at-code-lines i { display: block; color: #d8cdf5; font-style: normal; }.at-code-lines i:nth-child(2) { padding-left: 1rem; color: var(--at-lime); }.at-code-lines i:nth-child(3) { padding-left: 2rem; color: var(--at-peach); }.at-code-lines i:nth-child(4) { padding-left: 1rem; }.at-code-preview { position: relative; overflow: hidden; padding: 18px; background: var(--at-red); color: var(--at-ink); }.at-code-preview:before { content: ''; position: absolute; width: 160%; aspect-ratio: 1; left: -49%; bottom: -60%; border-radius: 50%; background: var(--at-lime); }.at-code-preview span { position: relative; display: block; font: 700 .55rem/1 var(--at-mono); letter-spacing: .1em; }.at-code-preview b { position: absolute; z-index: 1; left: 18px; bottom: 20px; font: 500 clamp(1.9rem, 3.5vw, 3.5rem)/.81 var(--at-serif); letter-spacing: -.08em; }.at-web-launch { padding: 7%; background: var(--at-peach); }.at-launch-browser { position: relative; min-height: 405px; overflow: hidden; padding: 23px; color: var(--at-milk); background: var(--at-ink); box-shadow: 13px 13px 0 var(--at-blue); }.at-launch-browser:before { content: ''; position: absolute; width: 85%; aspect-ratio: 1; right: -20%; top: 20%; border: 1px solid rgba(255,253,248,.5); border-radius: 50%; }.at-launch-browser small { position: relative; font: 700 .58rem/1 var(--at-mono); letter-spacing: .1em; }.at-launch-browser h4 { position: relative; margin: 32px 0 0; font: 500 clamp(3.1rem, 6vw, 6rem)/.77 var(--at-serif); letter-spacing: -.1em; }.at-launch-browser h4 em { color: var(--at-lime); font-weight: 400; }.at-launch-phone { position: absolute; width: 32%; right: 8%; bottom: -5%; padding: 12px; aspect-ratio: .49; border-radius: 18px 18px 0 0; color: var(--at-ink); background: var(--at-milk); box-shadow: 7px 7px 0 var(--at-red); }.at-launch-phone:before { content: 'M'; display: grid; height: 90%; place-items: center; color: var(--at-blue); font: 500 6rem/1 var(--at-serif); }

/* Commerce scene */
.at-commerce-data { display: grid; grid-template-columns: .9fr 1.1fr; gap: 25px; align-items: center; padding: 10%; background: #fcf5e9; }.at-commerce-object { position: relative; aspect-ratio: 1; border-radius: 50% 50% 39% 39%; background: radial-gradient(circle at 60% 25%, #fff, #bfc9cc 56%, #6e858c 100%); box-shadow: inset -18px -20px 30px rgba(0,0,0,.16); }.at-commerce-object:after { content: ''; position: absolute; width: 44%; height: 21%; left: 28%; top: -8%; border: 10px solid #8da0a4; border-bottom: 0; border-radius: 50% 50% 0 0; }.at-commerce-data b { display: block; margin-bottom: 19px; font: 700 .68rem/1.4 var(--at-mono); letter-spacing: .1em; }.at-commerce-data span { display: block; margin-top: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--at-line); color: var(--at-ink-soft); font-size: .86rem; }.at-commerce-collection { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; padding: 24px; background: var(--at-ink); }.at-commerce-collection i { position: relative; display: block; min-height: 225px; overflow: hidden; background: #dfd8c9; }.at-commerce-collection i:after { content: ''; position: absolute; width: 54%; aspect-ratio: 1; left: 23%; bottom: 17%; border-radius: 50% 50% 34% 34%; background: #9badb0; }.at-commerce-collection i:nth-child(2) { background: #e8aca5; }.at-commerce-collection i:nth-child(2):after { background: #f8e6d1; }.at-commerce-collection i:nth-child(3) { background: #b9d698; }.at-commerce-collection i:nth-child(3):after { background: #53756d; }.at-commerce-collection i:nth-child(4) { background: #d8cdf5; }.at-commerce-collection i:nth-child(4):after { background: #ec704f; }.at-commerce-pdp { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 100%; padding: 10%; gap: 20px; background: var(--at-milk); }.at-commerce-pdp-art { position: relative; background: #f0c0ae; }.at-commerce-pdp-art:before { content: ''; position: absolute; width: 63%; aspect-ratio: 1; left: 19%; bottom: 17%; border-radius: 50% 50% 34% 34%; background: #a4b6b9; }.at-commerce-pdp h4 { margin: 9px 0 16px; font: 500 clamp(2rem,3.5vw,3.7rem)/.85 var(--at-serif); letter-spacing: -.07em; }.at-commerce-pdp p { color: var(--at-ink-soft); font-size: .82rem; }.at-commerce-pdp b { display: inline-flex; padding: 11px 12px; color: var(--at-milk); background: var(--at-ink); font: 700 .56rem/1 var(--at-mono); letter-spacing: .07em; }.at-commerce-cart { display: grid; place-content: center; padding: 12%; background: var(--at-blue); }.at-cart-card { width: min(100%, 420px); padding: 25px; color: var(--at-ink); background: var(--at-milk); box-shadow: 10px 10px 0 var(--at-ink); }.at-cart-card header { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--at-line); font: 700 .62rem/1 var(--at-mono); letter-spacing: .1em; }.at-cart-product { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 20px 0; }.at-cart-product i { display: block; height: 72px; background: #f0c0ae; }.at-cart-product b { font: 500 1.15rem/1 var(--at-serif); }.at-cart-card footer { display: flex; justify-content: space-between; padding: 15px; color: var(--at-milk); background: var(--at-ink); font: 700 .6rem/1 var(--at-mono); letter-spacing: .1em; }

/* Studio scene */
.at-studio-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 9%; background: #d5eee9; }.at-studio-plan span { display: grid; min-height: 180px; padding: 18px; align-content: end; background: var(--at-milk); font: 700 .6rem/1.3 var(--at-mono); letter-spacing: .1em; }.at-studio-plan span:first-child { background: var(--at-red); }.at-studio-plan span:nth-child(2) { background: var(--at-lilac); }.at-studio-plan span:nth-child(3) { background: var(--at-lime); }.at-studio-plan span:nth-child(4) { background: var(--at-ink); color: var(--at-milk); }.at-studio-shot { overflow: hidden; background: #382829; }.at-studio-shot img, .at-studio-retouch img, .at-studio-publish img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }.at-studio-shot:after { content: ''; position: absolute; inset: 15% 22%; border: 1px solid rgba(255,253,248,.8); }.at-studio-shot b { position: absolute; z-index: 2; left: 24px; top: 23px; padding: 8px 10px; color: var(--at-milk); background: var(--at-red); font: 700 .57rem/1 var(--at-mono); letter-spacing: .1em; }.at-studio-shot small { position: absolute; z-index: 2; right: 21px; bottom: 20px; color: var(--at-milk); font: 700 .57rem/1 var(--at-mono); letter-spacing: .1em; }.at-studio-retouch { overflow: hidden; background: #382829; }.at-retouch-panel { position: absolute; z-index: 3; right: 0; top: 0; width: 42%; height: 100%; padding: 65px 21px 20px; color: var(--at-milk); background: rgba(21,36,29,.93); }.at-retouch-panel strong { display: block; margin-bottom: 25px; font: 700 .6rem/1.2 var(--at-mono); letter-spacing: .1em; }.at-retouch-panel span { display: block; padding: 10px 0; border-top: 1px solid rgba(255,253,248,.27); color: var(--at-lime); font: 700 .57rem/1.2 var(--at-mono); letter-spacing: .07em; }.at-studio-publish { overflow: hidden; background: #382829; }.at-publish-card { position: absolute; z-index: 3; left: 8%; bottom: 9%; width: 48%; padding: 20px; color: var(--at-ink); background: var(--at-milk); box-shadow: 9px 9px 0 var(--at-lime); }.at-publish-card small { font: 700 .55rem/1 var(--at-mono); letter-spacing: .1em; }.at-publish-card b { display: block; margin: 15px 0 18px; font: 500 clamp(2rem,4vw,4rem)/.79 var(--at-serif); letter-spacing: -.08em; }.at-publish-card span { color: var(--at-ink-soft); font-size: .75rem; }

.at-work { position: relative; padding: clamp(90px, 12vw, 165px) 0; overflow: hidden; background: var(--at-milk); }.at-work-head { display: flex; justify-content: space-between; gap: 35px; align-items: end; margin-bottom: 56px; }.at-work-head h2 { max-width: 700px; margin: .55rem 0 0; font: 500 clamp(3rem,5.4vw,6rem)/.93 var(--at-serif); letter-spacing: -.05em; }.at-work-head h2 em { color: var(--at-red); font-weight: 400; }.at-work-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; }.at-case { position: relative; min-height: 630px; overflow: hidden; display: flex; align-items: end; padding: 32px; color: var(--at-milk); background: var(--at-ink); }.at-case:after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(21,36,29,.94), rgba(21,36,29,.1) 72%); }.at-case-media { position: absolute; inset: 0; background: linear-gradient(150deg, #85c9c0, #d8cdf5); transition: transform .55s cubic-bezier(.2,.8,.2,1); }.at-case-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.75) contrast(1.05); }.at-case:hover .at-case-media { transform: scale(1.045); }.at-case-body { position: relative; z-index: 2; }.at-case-body small { font: 700 .6rem/1.3 var(--at-mono); letter-spacing: .11em; }.at-case-body h3 { max-width: 470px; margin: .65rem 0 1.2rem; font: 500 clamp(2.25rem,3.4vw,3.9rem)/.91 var(--at-serif); letter-spacing: -.055em; }.at-case-body .at-link { color: var(--at-lime); }.at-case--rotam .at-case-media { background: linear-gradient(145deg, #f5ad82, #3d65df); }.at-case--rotam .at-case-media:before { content: 'R'; position: absolute; left: 15%; top: 10%; color: rgba(255,253,248,.75); font: 500 25rem/.7 var(--at-serif); }

/* Shared inner pages */
.at-page { overflow: hidden; background: var(--at-paper); }.at-page-hero { position: relative; padding: 184px 0 92px; overflow: hidden; background: var(--at-milk); }.at-page-hero:before { content: ''; position: absolute; width: min(61vw, 800px); aspect-ratio: 1; right: -19vw; top: -38vw; border-radius: 50%; background: var(--at-lilac); }.at-page-hero:after { content: ''; position: absolute; left: 51%; bottom: 0; width: 42%; height: 1px; background: var(--at-ink); }.at-page-hero .at-shell { position: relative; z-index: 1; padding-right: min(25vw, 310px); }.at-page-hero h1 { max-width: 760px; margin: 1rem 0 1.4rem; font: 500 clamp(3.6rem,7vw,7.4rem)/.93 var(--at-serif); letter-spacing: -.05em; }.at-page-hero h1 em { color: var(--at-red); font-style: italic; font-weight: 400; }.at-page-hero > .at-shell > p:last-child { max-width: 620px; margin: 0; color: var(--at-ink-soft); font-size: 1.07rem; line-height: 1.62; }.at-page-mark { position: absolute; right: max(28px, calc((100vw - 1340px) / 2)); bottom: 47px; color: var(--at-blue); font: 500 clamp(3.4rem,7vw,7rem)/.7 var(--at-serif); letter-spacing: -.15em; }.at-page-mark small { display: block; margin-top: 15px; color: var(--at-ink-soft); font: 700 .55rem/1 var(--at-mono); letter-spacing: .12em; text-align: right; }
.at-section { padding: clamp(90px, 11vw, 150px) 0; }.at-section h2 { margin: .6rem 0 0; font: 500 clamp(2.8rem,4.8vw,5.5rem)/.95 var(--at-serif); letter-spacing: -.05em; }.at-section h2 em { color: var(--at-blue); font-weight: 400; }.at-section-intro { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; }.at-section-intro > p { max-width: 530px; margin: .6rem 0 0; color: var(--at-ink-soft); font-size: 1rem; line-height: 1.65; }

/* Services page */
.at-service-index { padding: 0 0 clamp(80px,11vw,140px); background: var(--at-milk); }.at-service-index-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--at-line); }.at-service-index a { display: flex; min-height: 300px; padding: 25px; border-right: 1px solid var(--at-line); border-bottom: 1px solid var(--at-line); flex-direction: column; justify-content: space-between; transition: background .28s ease, color .28s ease; }.at-service-index a:hover { color: var(--at-milk); background: var(--at-ink); }.at-service-index a > span { color: var(--at-red); font: 700 .62rem/1 var(--at-mono); letter-spacing: .1em; }.at-service-index h2 { margin: 45px 0 7px; font: 500 clamp(1.65rem,2.4vw,2.6rem)/.95 var(--at-serif); letter-spacing: -.045em; }.at-service-index p { margin: 0; color: var(--at-ink-soft); font-size: .87rem; }.at-service-index a:hover p { color: rgba(255,253,248,.72); }.at-service-index b { align-self: end; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.05rem; }
.at-service-deep { position: relative; padding: 120px 0; overflow: hidden; }.at-service-deep:nth-of-type(odd) { background: var(--at-lilac); }.at-service-deep:nth-of-type(even) { background: var(--at-paper); }.at-service-deep--web { background: var(--at-lime)!important; }.at-service-deep--commerce { background: var(--at-peach)!important; }.at-service-deep--studio { background: #96d6d0!important; }.at-service-deep-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(40px,8vw,120px); align-items: center; }.at-service-deep h2 { margin: .85rem 0 1.1rem; font: 500 clamp(3rem,5vw,5.7rem)/.91 var(--at-serif); letter-spacing: -.05em; }.at-service-deep h2 em { color: var(--at-red); font-weight: 400; }.at-service-deep .at-copy { color: var(--at-ink-soft); font-size: 1rem; line-height: 1.65; }.at-deliverable-list { display: grid; gap: 0; margin: 31px 0 0; border-top: 1px solid var(--at-line); }.at-deliverable-list span { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--at-line); font: 700 .68rem/1.35 var(--at-mono); letter-spacing: .05em; }.at-deliverable-list i { color: var(--at-red); font-style: normal; }.at-deep-art { position: relative; min-height: 440px; overflow: hidden; border: 1px solid var(--at-ink); background: var(--at-milk); box-shadow: 16px 17px 0 rgba(21,36,29,.18); }.at-deep-art--brand { display: grid; place-items: center; background-image: linear-gradient(var(--at-line) 1px, transparent 1px), linear-gradient(90deg,var(--at-line) 1px, transparent 1px); background-size: 36px 36px; }.at-deep-art--brand b { position: relative; color: var(--at-blue); font: 500 clamp(8rem,16vw,15rem)/.7 var(--at-serif); letter-spacing: -.17em; }.at-deep-art--brand b:after { content: 'identity / usable / memorable'; position: absolute; left: 5%; bottom: -24px; padding: 9px 10px; color: var(--at-ink); background: var(--at-lime); font: 700 .54rem/1 var(--at-mono); letter-spacing: .08em; white-space: nowrap; }.at-deep-art--web { display: grid; grid-template-columns: .92fr 1.08fr; gap: 1px; background: var(--at-ink); }.at-deep-art--web > div { position: relative; padding: 30px; background: var(--at-milk); }.at-deep-art--web strong { display: block; font: 500 clamp(2.5rem,4vw,4.5rem)/.82 var(--at-serif); letter-spacing: -.08em; }.at-deep-art--web small { display: block; margin-top: 20px; font: 700 .57rem/1.3 var(--at-mono); letter-spacing: .08em; }.at-deep-art--web > div:last-child { color: var(--at-milk); background: var(--at-blue); }.at-deep-art--web > div:last-child:after { content: ''; position: absolute; width: 120%; aspect-ratio: 1; left: -23%; bottom: -43%; border-radius: 50%; background: var(--at-lime); }.at-deep-art--commerce { display: grid; grid-template-columns: 1fr 1fr; }.at-deep-art--commerce i { position: relative; display: block; background: #f3c6b4; }.at-deep-art--commerce i:after { content: ''; position: absolute; width: 55%; aspect-ratio: 1; left: 22%; top: 20%; border-radius: 50% 50% 34% 34%; background: #9aafb1; }.at-deep-art--commerce > div { display: grid; padding: 30px; align-content: end; background: var(--at-ink); color: var(--at-milk); }.at-deep-art--commerce b { font: 500 clamp(2.9rem,4.5vw,4.8rem)/.8 var(--at-serif); letter-spacing: -.08em; }.at-deep-art--studio { background: #302329; }.at-deep-art--studio img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }.at-deep-art--studio:after { content: 'CONTENT THAT SELLS'; position: absolute; left: 24px; bottom: 22px; padding: 12px; color: var(--at-ink); background: var(--at-lime); font: 700 .6rem/1 var(--at-mono); letter-spacing: .09em; }

/* Packages page */
.at-package-route { background: var(--at-ink); color: var(--at-milk); }.at-package-route .at-page-hero { background: var(--at-ink); }.at-package-route .at-page-hero:before { background: var(--at-blue); }.at-package-route .at-page-hero:after { background: rgba(255,253,248,.4); }.at-package-route .at-page-hero h1 { color: var(--at-milk); }.at-package-route .at-page-hero > .at-shell > p:last-child, .at-package-route .at-page-mark { color: rgba(255,253,248,.72); }.at-package-route .at-page-mark { color: var(--at-lime); }.at-package-route .at-eyebrow { color: var(--at-lime); }
.at-package-map { padding: 42px 0 118px; background: var(--at-ink); }.at-package-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1px; background: rgba(255,253,248,.2); }.at-package-tabs button { min-height: 118px; padding: 19px; color: rgba(255,253,248,.65); border: 0; border-right: 1px solid rgba(255,253,248,.2); background: transparent; text-align: left; cursor: pointer; font: 700 .62rem/1.5 var(--at-mono); letter-spacing: .08em; text-transform: uppercase; transition: color .22s ease, background .22s ease; }.at-package-tabs button span { display: block; margin-bottom: 13px; color: var(--at-lime); font-size: .57rem; }.at-package-tabs button.is-active, .at-package-tabs button:hover { color: var(--at-ink); background: var(--at-lime); }.at-package-tabs button.is-active span, .at-package-tabs button:hover span { color: var(--at-blue); }.at-package-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); min-height: 465px; overflow: hidden; color: var(--at-ink); background: var(--at-milk); }.at-package-panel[hidden] { display: none; }.at-package-panel-copy { display: flex; flex-direction: column; padding: clamp(33px,6vw,76px); }.at-package-panel-copy small { color: var(--at-red); font: 700 .62rem/1 var(--at-mono); letter-spacing: .1em; }.at-package-panel-copy h2 { margin: 1.2rem 0 1rem; font: 500 clamp(2.9rem,5vw,5.8rem)/.9 var(--at-serif); letter-spacing: -.06em; }.at-package-panel-copy p { max-width: 470px; margin: 0; color: var(--at-ink-soft); line-height: 1.65; }.at-package-panel-copy .at-button { width: max-content; margin-top: auto; }.at-package-panel-art { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; background: var(--at-ink); }.at-package-panel-art div { display: grid; min-height: 50%; padding: 23px; align-content: end; background: var(--at-lilac); font: 700 .58rem/1.35 var(--at-mono); letter-spacing: .08em; }.at-package-panel-art div:nth-child(2) { background: var(--at-lime); }.at-package-panel-art div:nth-child(3) { background: var(--at-peach); }.at-package-panel-art div:nth-child(4) { color: var(--at-milk); background: var(--at-blue); }.at-package-panel-art b { display: block; margin-bottom: 5px; font: 500 clamp(2.3rem,4vw,4.8rem)/.75 var(--at-serif); letter-spacing: -.1em; }.at-package-assurance { padding: 0 0 130px; color: var(--at-milk); background: var(--at-ink); }.at-assurance-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,253,248,.24); border-left: 1px solid rgba(255,253,248,.24); }.at-assurance-grid div { min-height: 188px; padding: 21px; border-right: 1px solid rgba(255,253,248,.24); border-bottom: 1px solid rgba(255,253,248,.24); }.at-assurance-grid span { color: var(--at-lime); font: 700 .56rem/1 var(--at-mono); letter-spacing: .1em; }.at-assurance-grid h3 { margin: 34px 0 0; font: 500 1.65rem/.95 var(--at-serif); letter-spacing: -.04em; }

/* Portfolio and approach pages */
.at-portfolio-intro { background: var(--at-lilac); }.at-portfolio-intro .at-section-intro h2 em { color: var(--at-red); }.at-portfolio-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }.at-portfolio-grid .at-case:nth-child(3) { grid-column: 1 / -1; min-height: 320px; background: var(--at-blue); }.at-portfolio-grid .at-case:nth-child(3) .at-case-media { background: linear-gradient(110deg, var(--at-blue), var(--at-lilac)); }.at-portfolio-grid .at-case:nth-child(3) .at-case-media:after { content: 'NEXT'; position: absolute; right: 6%; top: 22%; color: rgba(255,253,248,.35); font: 500 clamp(8rem,20vw,20rem)/.7 var(--at-serif); letter-spacing: -.16em; }.at-portfolio-grid .at-case:nth-child(3) h3 { max-width: 620px; }
.at-approach-lead { background: var(--at-lime); }.at-approach-lead .at-section-intro h2 em { color: var(--at-blue); }.at-principles { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--at-line); }.at-principles article { min-height: 330px; padding: 27px; border-right: 1px solid var(--at-line); border-bottom: 1px solid var(--at-line); }.at-principles span { color: var(--at-red); font: 700 .6rem/1 var(--at-mono); letter-spacing: .1em; }.at-principles h3 { margin: 55px 0 10px; font: 500 clamp(1.8rem,2.7vw,3.1rem)/.92 var(--at-serif); letter-spacing: -.045em; }.at-principles p { max-width: 290px; margin: 0; color: var(--at-ink-soft); font-size: .9rem; line-height: 1.6; }.at-method { background: var(--at-ink); color: var(--at-milk); }.at-method-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(350px,1.25fr); gap: 70px; }.at-method h2 { margin: .8rem 0 0; font: 500 clamp(2.9rem,4.9vw,5.6rem)/.92 var(--at-serif); letter-spacing: -.05em; }.at-method h2 em { color: var(--at-lime); font-weight: 400; }.at-method-list { border-top: 1px solid rgba(255,253,248,.3); }.at-method-list article { display: grid; grid-template-columns: 65px 1fr; gap: 14px; padding: 24px 0; border-bottom: 1px solid rgba(255,253,248,.3); }.at-method-list span { color: var(--at-lime); font: 700 .62rem/1 var(--at-mono); }.at-method-list h3 { margin: 0 0 6px; font: 500 1.55rem/1 var(--at-serif); }.at-method-list p { margin: 0; color: rgba(255,253,248,.69); font-size: .91rem; line-height: 1.55; }

/* Contact page */
.at-contact-hero:before { background: var(--at-peach); }.at-contact-hero .at-page-mark { color: var(--at-blue); }.at-contact-main { background: var(--at-paper); }.at-contact-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr); gap: clamp(55px,9vw,150px); align-items: start; }.at-contact-intro { position: sticky; top: 124px; }.at-contact-intro h2 { margin: .8rem 0 1.35rem; font: 500 clamp(3rem,5vw,5.65rem)/.92 var(--at-serif); letter-spacing: -.055em; }.at-contact-intro h2 em { color: var(--at-red); font-weight: 400; }.at-contact-intro > p:not(.at-eyebrow) { max-width: 430px; margin: 0; color: var(--at-ink-soft); font-size: 1rem; line-height: 1.68; }.at-contact-intro .at-button { display: inline-flex; width: max-content; margin-top: 30px; }.at-contact-details { border-top: 1px solid var(--at-ink); border-left: 1px solid var(--at-ink); }.at-contact-card { display: flex; flex-direction: column; min-height: 224px; padding: 25px; color: var(--at-ink); border-right: 1px solid var(--at-ink); border-bottom: 1px solid var(--at-ink); background: var(--at-milk); transition: background .22s ease, color .22s ease, transform .22s ease; }.at-contact-card:is(a):hover { color: var(--at-milk); background: var(--at-blue); transform: translate(-7px,-7px); box-shadow: 7px 7px 0 var(--at-ink); }.at-contact-card span { color: var(--at-red); font: 700 .59rem/1.2 var(--at-mono); letter-spacing: .1em; }.at-contact-card strong { margin: auto 0 10px; font: 500 clamp(1.8rem,3vw,3.2rem)/.9 var(--at-serif); letter-spacing: -.05em; }.at-contact-card i { color: var(--at-ink-soft); font: 700 .62rem/1.35 var(--at-mono); letter-spacing: .05em; font-style: normal; }.at-contact-card:is(a):hover i, .at-contact-card:is(a):hover span { color: var(--at-lime); }.at-contact-card i b { font-size: .95rem; }.at-contact-card--address { min-height: 270px; background: var(--at-lilac); }.at-contact-card--address strong { font-size: clamp(1.7rem,2.5vw,2.65rem); }.at-contact-card--note { color: var(--at-milk); background: var(--at-ink); }.at-contact-card--note span { color: var(--at-lime); }.at-contact-card--note i { color: rgba(255,253,248,.64); }.at-contact-signoff { padding: 56px 0; color: var(--at-milk); background: var(--at-blue); }.at-contact-signoff .at-shell { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.at-contact-signoff .at-eyebrow { color: var(--at-lime); }.at-contact-signoff > .at-shell > p:last-child { max-width: 570px; margin: 0; font: 500 clamp(1.6rem,2.7vw,3rem)/.95 var(--at-serif); letter-spacing: -.04em; text-align: right; }

/* Footer refresh on the marketing routes */
.studio-route .cta-band { padding: clamp(75px, 10vw, 130px) 0; background: var(--at-red); color: var(--at-ink); }.studio-route .cta-band:before { width: 40vw; height: 40vw; border-color: rgba(21,36,29,.38); }.studio-route .cta-band .shell { width: min(1340px, calc(100% - 56px)); }.studio-route .cta-band h2 { max-width: 835px; margin: .5rem 0 0; font: 500 clamp(2.7rem,5.4vw,6rem)/.93 var(--at-serif); letter-spacing: -.05em; }.studio-route .cta-band h2 em { color: var(--at-milk); }.studio-route .cta-band .eyebrow { color: var(--at-ink); }.studio-route .cta-band .button.light { color: var(--at-ink); border-color: var(--at-ink); border-radius: 999px; font: 700 .68rem/1 var(--at-mono); letter-spacing: .06em; text-transform: uppercase; }.studio-route .cta-band .button.light:hover { color: var(--at-milk); background: var(--at-ink); }.studio-route .site-footer { padding: 84px 0 25px; background: var(--at-ink); }.studio-route .site-footer .shell { width: min(1340px, calc(100% - 56px)); }.studio-route .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }.studio-route .footer-brand .brand-image { width: 184px; height: 52px; }.studio-route .site-footer p, .studio-route .site-footer a { color: rgba(255,253,248,.66); }.studio-route .site-footer h4 { color: var(--at-lime); font: 700 .59rem/1 var(--at-mono); letter-spacing: .11em; }.studio-route .footer-start { color: var(--at-lime)!important; font: 700 .67rem/1.2 var(--at-mono); letter-spacing: .06em; text-transform: uppercase; }.studio-route .footer-bottom { color: rgba(255,253,248,.45); border-color: rgba(255,253,248,.2); font: 700 .57rem/1.4 var(--at-mono); letter-spacing: .05em; }

[data-at-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }[data-at-reveal].is-in { opacity: 1; transform: none; }
@keyframes at-ticker { to { transform: translateX(-33%); } }
@keyframes at-draw { from { stroke-dashoffset: 1100; } to { stroke-dashoffset: 0; } }
@keyframes at-copy-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 1020px) {
  .studio-route .site-header .nav, .at-shell, .studio-route .cta-band .shell, .studio-route .site-footer .shell { width: min(100% - 36px, 1340px); }
  .at-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 30px; }.at-hero-stage { min-height: 500px; }
  .at-mascot--page { display: none; }.at-page-hero .at-shell { padding-right: 0; }
  .at-manifesto-grid { grid-template-columns: .42fr 1.3fr; }.at-manifesto-grid aside { grid-column: 2; }
  .at-chapter-sticky { grid-template-columns: minmax(0,.75fr) minmax(410px,1.1fr); }.at-chapter-copy { padding-right: 38px; }.at-chapter-art { padding-left: 35px; }.at-art-window { min-height: min(63vh, 610px); }
  .at-service-index-grid, .at-package-tabs { grid-template-columns: repeat(2,1fr); }.at-service-index a { min-height: 240px; }.at-package-tabs button:nth-child(2) { border-right: 0; }
}

@media (max-width: 760px) {
  .studio-route .site-header .nav { min-height: 68px; width: min(100% - 32px, 1340px); }.studio-route .site-header .brand-image { width: 110px; height: 34px; }.studio-route .site-header .menu-toggle span { background: var(--at-header-fg); }.studio-route .site-header .nav-links { top: 68px; padding: 14px 16px 18px; background: rgba(255,253,248,.98); box-shadow: 0 14px 28px rgba(21,36,29,.12); }.studio-route .site-header .nav-links.is-open a { color: var(--at-ink); }.studio-route .site-header .nav-cta { padding: .65rem .78rem; font-size: .59rem; }
  .at-shell, .studio-route .cta-band .shell, .studio-route .site-footer .shell { width: min(100% - 32px, 1340px); }.at-hero { padding: 122px 0 52px; }.at-hero:before { width: 105vw; height: 105vw; min-width: 0; min-height: 0; right: -45vw; top: -28vw; }.at-hero-grid { min-height: auto; grid-template-columns: 1fr; }.at-hero-copy h1 { font-size: clamp(3.25rem, 15vw, 5.3rem); }.at-hero-stage { min-height: min(92vw, 530px); }.at-stage-grid { background-size: 34px 34px; }.at-stage-type { padding: 15px; box-shadow: 9px 10px 0 var(--at-ink); }.at-stage-note { width: 126px; padding: 12px; font-size: .48rem; }.at-stage-note strong { font-size: 1.1rem; }.at-stage-browser { padding: 9px; box-shadow: 8px 8px 0 var(--at-lilac); }.at-stage-browser main { min-height: 124px; padding: 10px 0 0; }.at-stage-browser strong { font-size: 1.55rem; }.at-hero-rail { position: relative; bottom: auto; left: auto; justify-content: center; margin-top: 40px; transform: none; }.at-mascot--hero, .at-mascot--page { display: none; }
  .at-manifesto { padding: 90px 0; }.at-manifesto-grid { display: block; }.at-manifesto h2 { margin: .8rem 0 1.5rem; font-size: clamp(2.7rem, 12vw, 4.5rem); }.at-manifesto aside { max-width: 500px; padding: 0; }.at-manifesto:before { bottom: -1vw; }
  .at-chapter { min-height: 430vh; }.at-chapter-sticky { height: 100svh; min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: 49% 51%; }.at-chapter-copy { min-height: 0; padding: 76px 26px 12px; overflow: hidden; }.at-chapter-title { margin-top: .55rem; font-size: clamp(2.2rem, 9.2vw, 3.5rem); }.at-mascot--chapter { grid-template-columns: 45px minmax(0,1fr); gap: 7px; width: min(100%, 254px); margin: 7px 0 5px; padding: 4px 7px 4px 4px; box-shadow: 3px 3px 0 var(--at-ink); }.at-mascot--chapter .at-mascot-art svg { width: 45px; height: 45px; }.at-mascot--chapter figcaption { gap: 2px; }.at-mascot--chapter figcaption span { font-size: .43rem; }.at-mascot--chapter figcaption strong { font-size: .63rem; line-height: 1.06; }.at-copy-swap { min-height: 72px; margin-top: .35rem; }.at-copy-swap strong { margin-bottom: .35rem; font-size: .56rem; }.at-copy-swap p { font-size: .78rem; line-height: 1.45; }.at-stepper { margin-top: auto; padding-top: 6px; }.at-stepper li { font-size: .43rem; padding-top: 7px; }.at-chapter-art { min-height: 0; padding: 12px 25px 24px; }.at-art-window { height: 100%; min-height: 0; width: 100%; box-shadow: 10px 11px 0 rgba(21,36,29,.17); }.at-brand-brief { padding: 27px; }.at-brief-swatches { margin-top: 25px; }.at-brief-swatches i { width: 50px; }.at-commerce-collection i { min-height: 145px; }.at-web-wire { padding: 6%; }.at-wire-browser { min-height: 280px; }.at-launch-browser { min-height: 285px; }.at-web-code { padding: 6%; }.at-commerce-data, .at-commerce-pdp { padding: 7%; }.at-retouch-panel { width: 45%; padding: 55px 11px 10px; }.at-publish-card { width: 58%; padding: 14px; }
  .at-work { padding: 85px 0; }.at-work-head { display: block; margin-bottom: 30px; }.at-work-head .at-link { margin-top: 20px; }.at-work-grid, .at-portfolio-grid { grid-template-columns: 1fr; }.at-case { min-height: 500px; padding: 23px; }.at-portfolio-grid .at-case:nth-child(3) { grid-column: auto; }.at-case-body h3 { font-size: 2.5rem; }
  .at-page-hero { padding: 139px 0 68px; }.at-page-hero .at-shell { padding-right: 0; }.at-page-hero h1 { font-size: clamp(3.3rem, 14vw, 5.2rem); }.at-page-mark { right: 18px; bottom: 30px; font-size: 4rem; }.at-page-hero:after { width: 47%; }.at-section { padding: 83px 0; }.at-section-intro { display: block; }.at-section-intro > p { margin-top: 1.6rem; }.at-service-index-grid { grid-template-columns: 1fr 1fr; }.at-service-index a { min-height: 210px; padding: 18px; }.at-service-index h2 { margin-top: 28px; font-size: 1.65rem; }.at-service-index p { display: none; }.at-service-deep { padding: 82px 0; }.at-service-deep-grid, .at-package-panel, .at-method-grid { grid-template-columns: 1fr; gap: 35px; }.at-service-deep h2 { font-size: clamp(3rem,12vw,4.8rem); }.at-deep-art { min-height: 350px; }.at-package-map { padding: 27px 0 85px; }.at-package-tabs { grid-template-columns: 1fr 1fr; }.at-package-tabs button { min-height: 90px; padding: 14px; font-size: .54rem; }.at-package-panel { min-height: auto; }.at-package-panel-copy { min-height: 420px; padding: 31px 23px; }.at-package-panel-copy h2 { font-size: 3.3rem; }.at-package-panel-art { min-height: 300px; }.at-assurance-grid { grid-template-columns: 1fr 1fr; }.at-assurance-grid div { min-height: 145px; }.at-principles { grid-template-columns: 1fr; }.at-principles article { min-height: 250px; }.at-principles h3 { margin-top: 31px; }.at-method-grid { gap: 46px; }.at-method-list article { grid-template-columns: 48px 1fr; }
  .at-contact-hero { padding-bottom: 180px; }.at-contact-hero .at-page-mark { bottom: 36px; font-size: 3.6rem; }.at-contact-grid { grid-template-columns: 1fr; gap: 50px; }.at-contact-intro { position: static; }.at-contact-details { grid-template-columns: 1fr; }.at-contact-card { min-height: 190px; padding: 21px; }.at-contact-card strong { font-size: clamp(1.9rem,9vw,3.1rem); }.at-contact-card--address { min-height: 235px; }.at-contact-signoff { padding: 43px 0; }.at-contact-signoff .at-shell { display: block; }.at-contact-signoff > .at-shell > p:last-child { margin-top: 23px; text-align: left; }
  .studio-route .cta-band { padding: 72px 0; }.studio-route .cta-band .shell { display: grid; }.studio-route .cta-band h2 { font-size: clamp(2.65rem, 12vw, 4.5rem); }.studio-route .footer-grid { grid-template-columns: 1fr; gap: 26px; }.studio-route .footer-bottom { gap: 9px; }.at-ticker { gap: 19px; padding: 14px 0; font-size: .56rem; }
}

@media (prefers-reduced-motion: reduce) {
  .at-ticker { animation: none; transform: none; }.at-phase { transition: none; }.at-hero-stage, [data-at-reveal] { transition: none; }.at-chapter { min-height: 100svh; }.at-chapter[data-at-step='4'] .at-phase[data-at-phase='4'] { opacity: 1; transform: none; }
}