@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg: #FFFFFF;
  --ink: #0F1A16;
  --graphite: #53605A;
  --mist: #F1F5F2;
  --mint: #86E5C8;
  --pine: #06312A;
  --focus: #0A6B56;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1210;
    --ink: #EEF4F1;
    --graphite: #A4B0AB;
    --mist: #1D2622;
    --focus: #86E5C8;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2 { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; margin: 0; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bg); padding: 0.75rem; }
.skip:focus { left: 1rem; z-index: 1; }

.site-header, .studio, .page, .site-footer {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header { padding-block: clamp(12px, 3.5svh, 32px) 0; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; min-height: 44px; }
.brand-name { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-stretch: 125%; font-size: 1.375rem; letter-spacing: -0.03em; }
.mark { width: 40px; height: 40px; flex: none; }
.mark-ring { fill: none; stroke: currentColor; stroke-width: 5; }
.mark-dot { fill: var(--mint); stroke: var(--bg); stroke-width: 2; }

main { display: flex; align-items: center; }
/* Desktop: the headline and pitch on the left, the spinning top beside them, the services in a
   row underneath (DIK-102). Phones have their own layout, at the end. */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: 'headline top' 'pitch top' 'services services';
  align-items: center;
  gap: clamp(12px, 2.6svh, 28px) clamp(24px, 5vw, 80px);
  padding-block: clamp(8px, 2.5svh, 32px);
}
.studio h1 {
  grid-area: headline;
  align-self: end;
  font-stretch: 125%;
  font-size: clamp(2.125rem, min(4.6vw, 8.2svh), 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.pitch { grid-area: pitch; align-self: start; }
.lead {
  max-width: 40ch;
  color: var(--graphite);
  font-size: clamp(1rem, min(1.5vw, 2.6svh), 1.3125rem);
}
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: clamp(14px, 3.5svh, 40px); }

/* The spinning top (assets/top.js): decorative, drawn in a canvas that fills its cell. */
.spinner { grid-area: top; align-self: stretch; min-height: clamp(200px, 40svh, 520px); position: relative; }
.spinner canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 1.875rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--pine);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}
.pill:hover { text-decoration: underline; }
.address { color: var(--graphite); font-weight: 500; }

.services {
  grid-area: services;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2svh, 24px) clamp(16px, 3vw, 40px);
}
.service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 2vw, 28px);
  align-items: center;
  border-radius: 16px;
}
.service h2 { font-size: clamp(1.0625rem, min(1.6vw, 2.9svh), 1.5rem); letter-spacing: -0.01em; line-height: 1.15; align-self: end; }
.service p { color: var(--graphite); align-self: start; font-size: clamp(0.875rem, min(1.15vw, 2.1svh), 1.0625rem); line-height: 1.4; }

/* The drawings: ink lines, 2 px, with mint and mist fills. */
.drawing { grid-row: 1 / span 2; width: clamp(64px, min(7vw, 13svh), 120px); height: auto; overflow: visible; }
.line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.dots { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.mist { fill: var(--mist); }
.mint, .lit { fill: var(--mint); }
.pulse { fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.14 1.2; opacity: 0; }
.fill, .lit { transform-box: fill-box; transform-origin: center; }

/* On load the three draw themselves once, one after another (about 2 seconds): the lines draw,
   then the fills drop in. Hovering or focusing one plays it again (assets/replay.js). */
.service:nth-child(1) { --start: 100ms; }
.service:nth-child(2) { --start: 600ms; }
.service:nth-child(3) { --start: 1100ms; }
.service.replay { --start: 0ms; }
.play .line { animation: draw 600ms cubic-bezier(0.3, 0, 0.2, 1) var(--start) both; }
.play .dots, .play .fill { animation: drop 320ms cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--start) + 420ms) both; }
.play .f2 { animation-delay: calc(var(--start) + 500ms); }
.play .f3 { animation-delay: calc(var(--start) + 580ms); }
.play .f4 { animation-delay: calc(var(--start) + 660ms); }
.play .f5 { animation-delay: calc(var(--start) + 740ms); }
.play .pulse { animation: travel 520ms cubic-bezier(0.3, 0, 0.2, 1) calc(var(--start) + 760ms); }
.play .lit { animation: light 240ms cubic-bezier(0.2, 0.9, 0.3, 1) calc(var(--start) + 1200ms) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes travel { from { opacity: 1; stroke-dashoffset: 0.14; } to { opacity: 1; stroke-dashoffset: -1; } }
@keyframes light { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .play .line, .play .dots, .play .fill, .play .pulse, .play .lit { animation: none; }
}


.page { padding-block: clamp(1.5rem, 6vw, 4rem); }
main:has(.page) { align-items: flex-start; }
.page > * { max-width: 68ch; }
.page > * + * { margin-top: 1rem; }
.page h1 { font-stretch: 125%; font-size: clamp(2.5rem, 7vw, 4.5rem); letter-spacing: -0.03em; line-height: 1; }
.page h2 { font-size: 1.5rem; margin-top: 2rem; }
.page .lead { font-size: clamp(1.1875rem, 2.2vw, 1.5rem); color: var(--ink); max-width: 36ch; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  padding-block: clamp(6px, 2svh, 20px);
  color: var(--graphite);
  font-size: 0.9375rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--graphite); }

/* Phones: one column that scrolls, with room around each part instead of everything squeezed
   into one screen. The headline as large as the width allows, the pitch at reading size,
   Contact us across the width with the address under it, the spinning top on a stage of its
   own, then the services as rows: each drawing beside its name and line. Sizes follow the
   width, never the height, so a short phone gets the same layout and simply scrolls further. */
@media (max-width: 720px) {
  :root { --gutter: clamp(20px, 6vw, 28px); }
  .site-header { padding-top: 1.25rem; }
  main { align-items: stretch; }
  .studio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'headline' 'pitch' 'top' 'services';
    gap: 0;
    padding-block: 2.25rem 0;
  }
  .studio h1 { font-size: clamp(2rem, 10.4vw, 3.25rem); line-height: 1; max-width: none; }
  .pitch { margin-top: 1.25rem; }
  .lead { font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
  .contact { flex-direction: column; align-items: stretch; gap: 0.875rem; margin-top: 2rem; }
  .pill { justify-content: center; padding: 0 1.5rem; }
  .address { text-align: center; font-size: 0.9375rem; }
  /* The top is drawn standing on the stage's floor, as wide as the stage allows; it needs about
     0.76 of the width in height, and the rest is room to wobble. */
  .spinner { margin-top: 1.5rem; min-height: 0; aspect-ratio: 1 / 0.8; max-height: 26rem; }
  .services {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 1rem;
    border-top: 1px solid var(--mist);
  }
  .service {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0.25rem;
    padding-block: 1.375rem;
    border-bottom: 1px solid var(--mist);
    border-radius: 0;
  }
  .service .drawing { width: 100%; }
  .service h2 { font-size: 1.1875rem; }
  .service p { font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; }
  .page { padding-block: 2.25rem 1.5rem; }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding-block: 2rem 1.5rem;
    font-size: 0.9375rem;
  }
}