/* Банда. Heavy type, a marker in the margin, and one idea for motion: a hand drawing on the page. */

:root {
  --orange: #ff542e;
  --ink: #1a1c18;
  --paper: #f3f1e9;
  --mist: #e8e9df;
  --muted: #5f6058;
  --muted-dark: #a5a79c;
  --line: #d4d4c9;

  --font: 'Golos Text', Arial, sans-serif;
  --hand: 'Caveat', cursive;

  /* Type scale. Every text on the page uses one of these. */
  --t-h2: clamp(40px, 5vw, 78px);
  --t-h3: clamp(26px, 2.8vw, 42px);
  --t-title: 22px;
  --t-lead: clamp(19px, 1.6vw, 22px);
  --t-body: 16px;
  --t-small: 14px;
  --t-note: clamp(28px, 2.4vw, 36px);

  --gutter: 4.2%;
  --button: clamp(140px, 10.6vw, 176px);

  /* Motion scale. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .25s;
  --t-enter: .9s;
  --t-draw: 1s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 40px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-body); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; color: inherit; background: none; padding: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }
::selection { background: var(--orange); color: var(--ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.accent { color: var(--orange); }
.section-pad { padding: 90px var(--gutter); }
.eyebrow { font-size: var(--t-small); line-height: 1.5; margin: 0 0 36px; }

h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; margin: 0; }
.h-line { display: block; }

/* ---- Doodles ---- */
.doodle {
  --s: 28;
  --pen: 2.6;
  display: block;
  flex-shrink: 0;
  width: calc(var(--s) * 1px);
  height: calc(var(--s) * 1px);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--pen) * var(--vb, 64) / var(--s));
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rough-s);
}
.logo-word { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; filter: url(#rough-s); }
.logo-letters { stroke-width: 8.5; }
.gang { --vb: 74; --hair: var(--orange); width: calc(var(--s) * 2.865px); }
.hair { stroke: var(--hair, currentColor); }
.curly-fill { fill: var(--ink); stroke: none; }
.curl { stroke: var(--paper); }
.eye { stroke-width: 4.6; }
.big-mark { --s: 124; --pen: 3; margin-right: 8px; filter: url(#rough-a); }
.success-mark { --s: 84; --pen: 2.4; margin: 10px 0 25px; }

/* ---- Header ---- */
.header { height: 102px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--ink); position: relative; z-index: 10; background: var(--paper); }
.logo, .footer-logo { display: flex; --hair: var(--orange); }
.logo .logo-word { height: 82px; width: auto; aspect-ratio: 278 / 116; }
.desktop-nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }
.desktop-nav a { position: relative; padding: 8px 0; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--orange); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5Q40 1 99 4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease-draw); }
.desktop-nav a:hover::after { clip-path: inset(0 0 0 0); }
.nav-cta { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 15px; font-weight: 600; transition: color var(--t-fast); }
.nav-cta .doodle { --s: 24; }
.nav-cta:hover { color: var(--orange); }
.menu-toggle, .mobile-menu { display: none; }

/* ---- Hero ---- */
.hero { height: min(720px, calc(100svh - 102px)); min-height: 620px; background: var(--orange); position: relative; overflow: hidden; }
.hero-photo { position: absolute; inset: 0 0 0 54%; overflow: hidden; background: #27211f; }
.hero-photo img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 53% center; filter: brightness(.7) saturate(.72); translate: 0 calc(var(--hero-p, 0) * 6.8%); }
.photo-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16, 18, 16, .7), transparent 50%); }
.photo-caption { position: absolute; bottom: 29px; left: 34px; right: 35px; color: var(--paper); display: flex; align-items: flex-end; justify-content: space-between; font-size: var(--t-small); line-height: 1.4; }
.photo-caption .doodle { --s: 34; }
.hero-content { position: relative; z-index: 2; padding: 56px 0 0 var(--gutter); pointer-events: none; }
.hero h1 { font-size: clamp(100px, 11.9vw, 198px); font-weight: 900; line-height: .9; letter-spacing: -.015em; margin: 0; }
.hero h1 > span { display: block; width: max-content; clip-path: inset(-.1em -.1em -.16em -.1em); }
.hero h1 > span:nth-child(2) { color: var(--paper); margin-top: 8px; }
.hero h1 i { display: inline-block; font-style: normal; }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 47vw; gap: 24px; align-items: center; margin-top: 32px; }
.hero-bottom p { font-size: clamp(22px, 1.8vw, 29px); line-height: 1.35; font-weight: 500; margin: 0; }
.hero-bottom p > span { display: inline-block; font-size: var(--t-small); font-weight: 400; line-height: 1.5; margin-top: 14px; }
.hero-actions { display: flex; align-items: center; gap: 16px; pointer-events: auto; }
.circle-cta, .hero-scroll { width: var(--button); height: var(--button); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; flex-shrink: 0; translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: scale var(--t-fast) var(--ease), background var(--t-fast); }
.circle-cta { background: var(--ink); color: var(--paper); }
.hero-scroll { background: var(--paper); color: var(--ink); }
.circle-cta:hover { background: #30342b; scale: 1.05; }
.hero-scroll:hover { background: #fff; scale: 1.05; }
.circle-cta .doodle, .hero-scroll .doodle { --s: 36; }
.hero-button-label { display: block; font-size: 16px; font-weight: 500; line-height: 1.25; }
.hero-sticker { position: absolute; right: 5%; top: 38%; z-index: 3; width: 138px; height: 138px; rotate: var(--hero-tilt, 0deg); }
.sticker-in { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(11deg); font-family: var(--hand); color: var(--ink); line-height: .9; }
.sticker-in b { font-size: 40px; }
.sticker-in small { font-size: 17px; font-weight: 700; }
.sticker-burst { position: absolute; inset: 0; z-index: -1; overflow: visible; fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; filter: url(#rough-a); }

/* ---- Handwritten notes, pinned right next to the headings ---- */
.heading-wrap { position: relative; width: max-content; max-width: 100%; }
.note { position: absolute; z-index: 2; margin: 0; width: max-content; font-family: var(--hand); font-size: var(--t-note); font-weight: 700; line-height: 1.02; color: var(--orange); -webkit-text-stroke: .25px currentColor; }
.note > span { display: block; }
.note svg { position: absolute; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough-s); }
.note-line { left: 4px; right: 12px; bottom: -22px; width: calc(100% - 16px); height: 22px; }
.note-arrow { width: 62px; height: 48px; }
.note-about { left: calc(100% + 2px); top: -.18em; rotate: -6deg; }
.note-about .note-arrow { left: -6px; top: calc(100% - 2px); }
.note-services { left: 62%; top: -.28em; rotate: 4deg; }
.note-projects { left: calc(100% + 18px); top: .1em; rotate: -5deg; color: var(--paper); }
.note-projects .note-arrow { left: -16px; top: calc(100% - 6px); transform: rotate(38deg); }
.note-process { left: 80.5%; top: -.46em; rotate: 3deg; }

/* ---- About ---- */
.about h2 { line-height: 1.3; }
.about-grid { display: grid; grid-template-columns: 1.25fr .65fr; gap: 9%; align-items: start; }
.about-copy p { font-size: var(--t-body); line-height: 1.6; margin: 0 0 22px; color: var(--muted); }
.about-copy p:first-child { font-size: var(--t-lead); color: var(--ink); font-weight: 500; line-height: 1.45; }
.about-copy p:last-child { color: var(--ink); margin-bottom: 0; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 1px solid var(--line); margin-top: 72px; padding-top: 30px; }
.principles > div { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.face { --s: 92; --vb: 72; --pen: 2.8; --hair: var(--orange); }
.principles strong { display: block; font-size: var(--t-title); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.principles p { font-size: var(--t-body); line-height: 1.55; color: var(--muted); max-width: 320px; margin: 6px 0 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.burning-word { display: inline-block; vertical-align: baseline; }
.fire-word { display: block; height: 1.34em; width: auto; aspect-ratio: 345 / 110; margin: -.46em 0 -.2em -.03em; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough-s); }
.fire-letters { stroke: var(--orange); stroke-width: 16.5; }
.flame-out { fill: #ffb04d; stroke: var(--orange); stroke-width: 3.6; }
.flame-in { fill: #ffe0a6; }

/* ---- Services ---- */
.services { background: var(--mist); --col-num: 40px; --col-icon: 64px; --col-gap: 20px; }
.services-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.service { border-top: 1px solid #bfc2b4; }
.service:last-child { border-bottom: 1px solid #bfc2b4; }
.service summary { list-style: none; display: grid; grid-template-columns: var(--col-num) var(--col-icon) 1fr auto 44px; gap: var(--col-gap); align-items: center; padding: 22px 0; cursor: pointer; }
.service summary::-webkit-details-marker { display: none; }
.service-num { font-size: var(--t-small); color: var(--muted); }
.service-icon { --s: 60; --pen: 2.8; transition: color var(--t-fast); }
.service h3 { margin: 0; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; transition: color var(--t-fast); }
.service-tags { font-size: var(--t-small); margin-right: 24px; }
.service-plus { --s: 30; --pen: 3; justify-self: end; transition: transform .4s var(--ease), color var(--t-fast); }
.service[open] .service-plus { transform: rotate(45deg); color: var(--orange); }
.service[open] h3, .service[open] .service-icon, .service summary:hover h3, .service summary:hover .service-icon { color: var(--orange); }
.service-body { padding: 0 64px 32px calc(var(--col-num) + var(--col-icon) + var(--col-gap) * 2); display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.service-body p { font-size: var(--t-body); line-height: 1.6; color: var(--muted); max-width: 620px; margin: 0; }
.text-cta { display: inline-flex; align-items: center; gap: 22px; padding: 10px 2px 14px; white-space: nowrap; font-size: var(--t-body); font-weight: 500; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5Q80 1 199 4' fill='none' stroke='%231a1c18' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 8px no-repeat; transition: color var(--t-fast); }
.text-cta .doodle { --s: 24; }
.text-cta:hover { color: var(--orange); }

/* ---- Concepts ---- */
.projects { background: var(--ink); color: var(--paper); }
.projects .eyebrow { color: var(--muted-dark); }
.projects-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.projects-heading > p { font-size: var(--t-small); line-height: 1.6; color: var(--muted-dark); max-width: 260px; margin: 0 0 6px; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.project-card { display: block; width: 100%; text-align: left; color: var(--paper); min-width: 0; }
.project-image { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #32332b; }
.project-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 58%); pointer-events: none; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: scale .9s var(--ease), filter .9s var(--ease); }
.project-card:hover img { scale: 1.05; filter: saturate(1); }
.project-pill { position: absolute; top: 20px; left: 20px; z-index: 2; border: 1px solid #ffffff70; border-radius: 20px; font-size: var(--t-small); padding: 7px 13px; color: #fff; background: #00000022; backdrop-filter: blur(4px); }
.project-open { --s: 32; position: absolute; right: 20px; top: 20px; z-index: 2; color: #fff; transition: translate .4s var(--ease); }
.project-card:hover .project-open { translate: 4px -4px; }
.project-overlay { position: absolute; left: 28px; bottom: 26px; z-index: 2; font-size: clamp(34px, 4vw, 62px); font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.project-info { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; }
.project-title { font-size: var(--t-title); font-weight: 600; letter-spacing: -.01em; }
.project-meta { font-size: var(--t-small); color: var(--muted-dark); white-space: nowrap; }

.full-package { width: 100%; min-height: 250px; margin-top: 40px; padding: 28px 40px; display: flex; align-items: center; gap: 36px; text-align: left; background: var(--orange); color: var(--ink); overflow: hidden; }
.package-mark { --s: 96; --pen: 2.8; --hair: var(--paper); filter: url(#rough-a); }
.package-title { font-size: clamp(28px, 3.3vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }
.seal { position: relative; display: block; width: 214px; height: 214px; margin-left: auto; flex-shrink: 0; transition: scale .5s var(--ease); }
.full-package:hover .seal { scale: 1.06; }
.seal-disc, .seal-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal-disc { fill: var(--ink); filter: url(#rough-a); }
.seal-text { fill: #fff; font-family: var(--font); font-size: 16px; font-weight: 700; }
.seal-arrow { --s: 68; --pen: 3.4; position: absolute; left: calc(50% - 34px); top: calc(50% - 34px); color: var(--orange); transition: rotate .5s var(--ease); }
.full-package:hover .seal-arrow { rotate: 45deg; }

/* ---- Process ---- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 60px; }
.process-grid article { border-top: 1px solid var(--line); padding-top: 16px; }
.process-grid article > span { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-small); }
.process-grid .doodle { --s: 60; --pen: 2.8; color: var(--orange); }
.process-grid h3 { font-size: var(--t-title); font-weight: 600; letter-spacing: -.01em; margin: 28px 0 14px; }
.process-grid p { font-size: var(--t-body); line-height: 1.55; color: var(--muted); margin: 0; }

/* ---- Contact and footer ---- */
.contact { background: var(--orange); padding-top: 60px; padding-bottom: 44px; overflow: hidden; }
.contact .eyebrow { margin-bottom: 0; }
.contact-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 36px; }
.contact h2 { font-size: clamp(60px, 8vw, 126px); line-height: 1.16; letter-spacing: -.03em; }
.contact h2 .h-line:nth-child(3) { color: var(--paper); }
.contact-cta { width: calc(var(--button) + 44px); height: calc(var(--button) + 44px); flex-shrink: 0; background: var(--paper); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: scale var(--t-fast) var(--ease), background var(--t-fast); }
.contact-cta:hover { scale: 1.05; background: #fff; }
.contact-cta .doodle { --s: 52; --pen: 3; }
.contact-cta b { font-size: 17px; font-weight: 500; line-height: 1.25; }
.contact-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 44px; padding-top: 24px; border-top: 1px solid #1a1c1840; }
.contact-bottom p { font-size: var(--t-lead); line-height: 1.5; margin: 0; }
.contact-bottom > span { font-size: var(--t-small); line-height: 1.5; }
footer { background: var(--ink); color: var(--paper); padding: 32px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
footer > span { font-size: var(--t-small); color: var(--muted-dark); }
.footer-logo .logo-word { height: 58px; width: auto; aspect-ratio: 278 / 116; }
.back-top { display: flex; align-items: center; gap: 6px; font-size: var(--t-small); }
.back-top .doodle { --s: 18; }

/* ---- Dialogs ---- */
dialog { background: var(--paper); color: var(--ink); border: 0; padding: 35px; max-height: 90svh; width: calc(100% - 32px); max-width: 650px; overflow: auto; }
dialog::backdrop { background: #11150eaf; backdrop-filter: blur(7px); }
dialog[open] { animation: rise .35s var(--ease); }
.dialog-head { display: flex; justify-content: flex-end; margin: -14px -10px 0 0; }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; }
.dialog-close .doodle { --s: 26; --pen: 3; }
.brief-intro .eyebrow { margin: 0; }
.brief-intro h2 { font-size: 45px; margin: 10px 0 14px; }
.brief-intro > p:last-child { font-size: var(--t-small); line-height: 1.6; color: var(--muted); margin: 0 0 25px; }
fieldset { border: 0; padding: 0; margin: 0 0 25px; }
legend, form > label, .form-row > label { font-size: var(--t-small); font-weight: 500; display: block; }
legend { margin-bottom: 12px; padding: 0; }
.format-options { display: flex; flex-wrap: wrap; gap: 7px; }
.format-options label { position: relative; cursor: pointer; }
.format-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.format-options span { display: block; border: 1px solid var(--line); padding: 10px 14px; font-size: var(--t-small); transition: background .15s; }
.format-options input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.format-options input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
input:not([type=radio]):not([type=range]), textarea { display: block; border: 0; border-bottom: 1px solid #b8bbae; background: transparent; border-radius: 0; padding: 12px 0; width: 100%; font-size: var(--t-body); outline: none; color: var(--ink); resize: vertical; }
input:focus, textarea:focus { border-color: var(--orange) !important; }
.range-label { position: relative; margin-bottom: 25px; }
output { float: right; color: var(--orange); font-size: var(--t-body); font-weight: 700; }
input[type=range] { display: block; width: 100%; accent-color: var(--orange); margin: 17px 0 8px; cursor: pointer; }
.range-limits { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 400; }
.submit-brief { margin-top: 25px; width: 100%; background: var(--orange); padding: 18px 20px; text-align: left; display: flex; align-items: center; justify-content: space-between; font-size: var(--t-body); font-weight: 600; transition: background var(--t-fast); }
.submit-brief:hover { background: #eb4522; }
.form-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 13px 0 0; }
#brief-success h2 { font-size: 58px; margin: 0 0 14px; }
#brief-success p { font-size: var(--t-body); line-height: 1.6; }
.project-dialog { padding: 0; max-width: 850px; }
.project-dialog > .dialog-close { position: absolute; top: 15px; right: 15px; background: var(--paper); border-radius: 50%; z-index: 2; }
.project-dialog img { display: block; width: 100%; height: 280px; object-fit: cover; }
.concept-visual { height: 240px; background: var(--orange); color: var(--ink); display: grid; place-items: center; }
.concept-visual .doodle { --s: 120; --pen: 3; --hair: var(--paper); filter: url(#rough-a); }
.project-dialog-content { padding: 35px; }
.project-dialog-content .eyebrow { margin: 0; }
.project-dialog h2 { font-size: 40px; margin: 15px 0 22px; }
.project-dialog p { font-size: var(--t-body); line-height: 1.6; color: var(--muted); }
.concept-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.concept-pills span { font-size: var(--t-small); border: 1px solid var(--line); padding: 8px 12px; }
.project-dialog-content .concept-note { font-size: 13px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 25px; }
.project-dialog-content button { background: var(--ink); color: var(--paper); padding: 16px 22px; font-size: var(--t-body); font-weight: 500; margin-top: 15px; }

/* ---- Motion ----
   Load: the headline rises, then the buttons pop, then the sticker gets slapped on.
   Scroll: headings rise line by line, then the marker writes its note and draws the doodles.
   Hover: the marker redraws what you touch.
   Always on: only the fire, the seal and a slight boil on the big drawings, all paused off screen. */

/* Load */
.hero h1 i { animation: glyph-rise var(--t-enter) var(--ease) both; animation-delay: calc(var(--i) * 45ms + .1s); }
.hero-photo img { animation: photo-settle 1.6s var(--ease) both; }
.hero-bottom p { animation: rise var(--t-enter) var(--ease) .65s both; }
.circle-cta { animation: pop .7s var(--ease-pop) .9s backwards; }
.hero-scroll { animation: pop .7s var(--ease-pop) 1.02s backwards; }
.sticker-in { animation: slap .55s cubic-bezier(.3, 1.3, .6, 1) 1.25s backwards; }
.hero-scroll .doodle { animation: nudge 2.2s ease-in-out 2.2s infinite; }
.has-scrolled .hero-scroll .doodle { animation: none; }

/* Drawing. Paths get pathLength=1 from app.js, so 1 is always a full stroke. */
.js-motion .doodle, .js-motion .note svg { stroke-dasharray: 1.01 2; stroke-dashoffset: 0; }
.js-motion .logo-letters path { stroke-dasharray: 1.01 2; animation: draw .3s var(--ease-draw) both; animation-delay: calc(var(--i) * 50ms + .1s); }
.peek { animation: peek .6s var(--ease-pop) both; animation-delay: calc(var(--i) * 130ms + .85s); }
.logo:hover .peek, .footer-logo:hover .peek { animation: hop .5s var(--ease-pop); animation-delay: calc(var(--i) * 90ms); }
.js-motion .fire-letters path { stroke-dasharray: 1.01 2; stroke-dashoffset: 1.02; }
.js-motion .reveal.visible .fire-letters path { stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease-draw) calc(var(--i) * 80ms + .35s); }
.js-motion .reveal:not(.visible) .flame { opacity: 0; }
.flame { transition: opacity .4s ease 1.1s; }
.js-motion .big-mark:not(.visible), .js-motion .reveal:not(.visible) .doodle, .js-motion .reveal:not(.visible) .note svg { stroke-dashoffset: 1.02; }
.js-motion .big-mark.visible, .js-motion .reveal.visible .doodle { transition: stroke-dashoffset var(--t-draw) var(--ease-draw) calc(var(--i, 0) * 90ms + .2s); }
.js-motion .reveal.visible .note svg { transition: stroke-dashoffset .7s var(--ease-draw) 1s; }
.js-motion .service-plus, .js-motion .text-cta .doodle, .js-motion .project-open, .js-motion .seal-arrow { stroke-dashoffset: 0 !important; }

/* Hover: the marker goes over the line again. */
.service summary:hover .service-icon, .nav-cta:hover .doodle, .circle-cta:hover .doodle, .contact-cta:hover .doodle, .text-cta:hover .doodle, .project-card:hover .project-open, .full-package:hover .package-mark, .process-grid article:hover .doodle { animation: draw .7s var(--ease-draw); }

/* Reveal */
.js-motion .reveal { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease) calc(var(--i, 0) * 80ms), translate .8s var(--ease) calc(var(--i, 0) * 80ms); }
.js-motion .reveal.visible { opacity: 1; translate: 0 0; }
.js-motion .heading-wrap.reveal, .js-motion h2.reveal { opacity: 1; translate: none; transition: none; }
.js-motion .h-line { clip-path: inset(-.3em -1em 100% -.1em); translate: 0 .55em; }
.js-motion .reveal.visible .h-line { clip-path: inset(-.6em -1em -.4em -.1em); translate: 0 0; transition: clip-path var(--t-enter) var(--ease), translate var(--t-enter) var(--ease); }
.js-motion .reveal.visible .h-line:nth-child(2) { transition-delay: .1s; }
.js-motion .reveal.visible .h-line:nth-child(3) { transition-delay: .2s; }

/* The note is written left to right, one line after another. */
.js-motion .note > span { clip-path: inset(-20% 100% -30% -3%); }
.js-motion .reveal.visible .note > span { clip-path: inset(-20% -3% -30% -3%); transition: clip-path .6s cubic-bezier(.45, .05, .55, .95) .5s; }
.js-motion .reveal.visible .note > span:nth-child(2) { transition-delay: .95s; }

/* Accordion */
.service-body { animation: rise .5s var(--ease) both; }
@supports (interpolate-size: allow-keywords) {
  .services { interpolate-size: allow-keywords; }
  .service::details-content { height: 0; overflow: clip; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
  .service[open]::details-content { height: auto; }
}

/* Always on, only while on screen. */
.seal-text { animation: spin 20s linear infinite; animation-play-state: paused; transform-origin: center; }
.boil { animation: boil .6s steps(1) infinite; animation-play-state: paused; }
.flame { animation: flame-frame .42s steps(1) infinite; animation-play-state: paused; }
.flame:nth-child(2) { animation-delay: -.14s; }
.flame:nth-child(3) { animation-delay: -.28s; }
.motion-active .seal-text, .boil.motion-active, .motion-active .boil, .motion-active .flame { animation-play-state: running; }

@keyframes glyph-rise { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes photo-settle { from { scale: 1.1; opacity: .4; } to { scale: 1; opacity: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes pop { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
@keyframes slap { from { opacity: 0; transform: rotate(-16deg) scale(2.3); } to { opacity: 1; transform: rotate(11deg) scale(1); } }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(6px); } 90% { transform: translateY(-1px); } }
@keyframes draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes boil { 0% { filter: url(#rough-a); } 33% { filter: url(#rough-b); } 66% { filter: url(#rough-c); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes flame-frame { 0% { visibility: visible; } 33.33%, 100% { visibility: hidden; } }
@keyframes peek { from { transform: translateY(68px); } to { transform: translateY(0); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }

/* ---- Layout: wide ---- */
@media (min-width: 1700px) {
  .hero { height: 800px; }
  .hero h1 { font-size: 220px; }
  .hero-bottom { margin-top: 48px; }
}

/* ---- Layout: laptop and tablet ---- */
@media (max-width: 1240px) and (min-width: 761px) {
  .hero { height: 720px; min-height: 0; }
  .hero h1 { font-size: 11.8vw; }
  .hero-bottom { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .about .heading-wrap { margin-bottom: 84px; }
  .note-about { left: auto; right: -24px; top: calc(100% + 8px); }
}
@media (max-width: 1100px) {
  .header { height: 85px; gap: 20px; }
  .logo .logo-word { height: 66px; }
  .desktop-nav { gap: 20px; font-size: 14px; }
  .nav-cta { font-size: 14px; gap: 10px; }
  .section-pad { padding-top: 70px; padding-bottom: 70px; }
  .about-grid { gap: 6%; grid-template-columns: 1.15fr .85fr; }
  .services { --col-icon: 52px; --col-num: 28px; --col-gap: 14px; }
  .service-icon { --s: 50; }
  .service-tags { margin-right: 8px; }
  .big-mark { --s: 92; --pen: 2.4; margin-right: 0; }
  .project-grid { gap: 22px; }
  .project-info { display: block; }
  .project-meta { display: block; margin-top: 6px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 28px; }
  .package-mark { --s: 70; --pen: 2.2; }
  .full-package { padding: 24px 30px; gap: 24px; }
  .seal { width: 170px; height: 170px; }
  .seal-arrow { --s: 52; left: calc(50% - 26px); top: calc(50% - 26px); }
  .note-about .note-arrow { display: none; }
}

/* ---- Layout: phone ---- */
@media (max-width: 760px) {
  :root { --t-small: 13px; --t-note: 28px; --t-title: 20px; --t-h2: 10vw; --t-h3: 23px; --button: 118px; --gutter: 6%; }
  html { scroll-padding-top: 20px; }
  .section-pad { padding: 58px var(--gutter); }
  .eyebrow { margin-bottom: 24px; }

  .header { height: 80px; gap: 16px; }
  .logo .logo-word { height: 62px; }
  .desktop-nav { display: none; }
  .nav-cta { margin-left: auto; font-size: 13px; gap: 8px; }
  .nav-cta .doodle { --s: 20; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; margin-right: -10px; }
  .menu-toggle span { width: 26px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease); }
  .menu-toggle span:first-child { rotate: -1.5deg; }
  .menu-toggle span:last-child { rotate: 1.5deg; width: 22px; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-menu.open { display: flex; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; z-index: 9; padding: 25px 6% 35px; background: var(--paper); border-bottom: 1px solid var(--ink); gap: 23px; font-size: 23px; font-weight: 600; }
  .mobile-menu button { display: flex; align-items: center; justify-content: space-between; background: var(--orange); padding: 15px; font-size: 16px; font-weight: 600; text-align: left; }

  .hero { height: 830px; min-height: 0; }
  .hero-photo { inset: 390px 0 0 32%; }
  .hero-photo img { object-position: 55% center; }
  .hero-content { padding: 40px var(--gutter) 0; }
  .hero h1 { font-size: 17.3vw; }
  .hero h1 > span:nth-child(2) { margin-top: 4px; }
  .hero-bottom { display: block; width: 100%; margin-top: 30px; }
  .hero-bottom p { font-size: 20px; max-width: 290px; }
  .hero-actions { position: absolute; left: var(--gutter); top: 470px; flex-direction: column; gap: 20px; }
  .circle-cta, .hero-scroll { gap: 6px; }
  .circle-cta .doodle, .hero-scroll .doodle { --s: 28; }
  .hero-button-label { font-size: 13px; }
  .hero-sticker { top: 400px; right: 5%; width: 110px; height: 110px; }
  .sticker-in b { font-size: 33px; }
  .sticker-in small { font-size: 14px; }
  .photo-caption { left: 20px; right: 20px; bottom: 22px; }

  .heading-wrap { width: 100%; }
  .note { position: relative; left: auto; top: auto; margin: 14px 8px 12px auto; }
  .note-about { rotate: -3deg; }
  .note-services { rotate: 3deg; }
  .note-projects { rotate: -3deg; }
  .note-process { rotate: 2deg; }
  .note-arrow { display: none; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .burning-word { display: block; }
  .fire-word { height: 2em; margin: .22em 0 0 -.04em; }
  .principles { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; padding-top: 26px; }
  .face { --s: 76; --pen: 2.4; }

  .services { --col-num: 22px; --col-icon: 44px; --col-gap: 10px; }
  .services-heading { position: relative; display: block; margin-bottom: 28px; }
  .big-mark { --s: 46; --pen: 1.9; position: absolute; left: 0; bottom: 2px; }
  .service summary { grid-template-columns: var(--col-num) var(--col-icon) 1fr 30px; padding: 18px 0; }
  .service-icon { --s: 42; --pen: 2.4; }
  .service-tags { display: none; }
  .service-plus { --s: 24; }
  .service-body { display: block; padding: 0 0 24px calc(var(--col-num) + var(--col-icon) + var(--col-gap) * 2); }
  .text-cta { margin-top: 14px; }

  .projects-heading { display: block; margin-bottom: 28px; }
  .projects-heading > p { margin-top: 18px; max-width: none; }
  .project-grid { grid-template-columns: 1fr; gap: 32px; }
  .project-overlay { font-size: 40px; left: 20px; bottom: 20px; }
  .project-pill { top: 16px; left: 16px; }
  .project-open { top: 16px; right: 16px; }
  .full-package { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 10px; margin-top: 32px; padding: 22px 20px; min-height: 0; }
  .package-mark { --s: 50; --pen: 2; }
  .package-title { font-size: 25px; grid-column: 1 / -1; grid-row: 2; }
  .seal { width: 128px; height: 128px; grid-column: 2; grid-row: 1; }
  .seal-text { font-size: 17px; }
  .seal-arrow { --s: 38; --pen: 2.6; left: calc(50% - 19px); top: calc(50% - 19px); }

  .process-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; margin-top: 36px; }
  .process-grid .doodle { --s: 48; --pen: 2.4; }
  .process-grid h3 { line-height: 1.2; margin: 20px 0 10px; }
  .process-grid p { font-size: 15px; }

  .contact { padding-top: 42px; padding-bottom: 32px; }
  .contact-heading { position: relative; display: block; margin-top: 26px; padding-bottom: 150px; }
  .contact h2 { font-size: 12.4vw; }
  .contact-cta { position: absolute; bottom: 0; right: 0; --button: 96px; }
  .contact-cta .doodle { --s: 38; --pen: 2.6; }
  .contact-cta b { font-size: 15px; }
  .contact-bottom { display: block; margin-top: 20px; padding-top: 20px; }
  .contact-bottom > span { display: block; margin-top: 16px; }

  footer { padding: 26px var(--gutter); display: grid; grid-template-columns: 1fr auto; gap: 18px; }
  .footer-logo .logo-word { height: 50px; }
  .back-top { grid-column: 2; grid-row: 1; }
  footer > span:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  footer > span:nth-of-type(2) { grid-column: 2; grid-row: 2; }

  dialog { padding: 24px; max-height: 92svh; }
  .brief-intro h2 { font-size: 35px; }
  .form-row { gap: 15px; grid-template-columns: 1fr; }
  .project-dialog { padding: 0; }
  .project-dialog-content { padding: 24px; }
  .project-dialog h2 { font-size: 32px; }
  .project-dialog img { height: 220px; }
  #brief-success h2 { font-size: 45px; }
}
@media (max-width: 430px) {
  .nav-cta { display: none; }
  .menu-toggle { margin-left: auto; }
}
@media (max-width: 370px) {
  .hero { height: 790px; }
  .hero-photo { top: 360px; }
  .hero-actions { top: 440px; }
  .hero-sticker { top: 370px; }
}

/* The name stays inside the orange half of the first screen. */
.hero h1 { font-size: clamp(96px, 10.9vw, 186px); }
@media (max-width: 1240px) and (min-width: 761px) { .hero h1 { font-size: 10.9vw; } }
@media (max-width: 760px) { .hero h1 { font-size: 15.6vw; } }