/* Five type sizes. All page text inherits or uses one of these shared roles. */
:root {
  --type-label: 12px;
  --type-body: 16px;
  --type-title: clamp(24px, 2vw, 32px);
  --type-heading: clamp(32px, 3.6vw, 64px);
  --type-display: clamp(49px, 6.65vw, 120px);
  --button-height: 56px;
  --button-width: 264px;
}

body, button, input { font-size: var(--type-body); }
body { font-family: Inter, Arial, sans-serif; }
button, input, textarea, select { font-family: inherit; }
.dc-page:not(.page-index) { --type-display: clamp(49px, 7.78vw, 112px); }
.section-shell { max-width: 1216px; }
.site-header { max-width: 1280px; }
h1, .work h2, .ghost-type, .portfolio-backdrop { font-size: var(--type-display); }
h2, .project-copy h3, .quote-mark, .closing-quote blockquote > span { font-size: var(--type-heading); }
h3, .team-tile strong, .hero-seal, .ticker-track > span,
.proof-strip strong, .closing-quote blockquote { font-size: var(--type-title); }
.eyebrow, .client p, .client-avatar, .founder-proof, .founder-avatars,
.craft-label strong, .craft-label small, .team-tile > span,
.project-tags > span, .proof-strip span, .quote-label, .form-hint,
.footer-top nav h3, .footer-bottom, .motion-toggle { font-size: var(--type-label); }
.client h3 { font-size: var(--type-body); }
.team-tile > span { line-height: 1.3; letter-spacing: .02em; }
.eyebrow { letter-spacing: .05em; }
.proof-strip span { letter-spacing: .03em; }
.project-tags > span { letter-spacing: 0; }
.outline-word { line-height: .98; }
.desktop-nav { gap: 24px; }
.card-link { text-transform: none; letter-spacing: 0; }
.client p { overflow-wrap: anywhere; }

/* Two founders and the studio dog form one overlapping avatar stack. */
.founder-avatars { padding-left: 0; flex-shrink: 0; isolation: isolate; }
.founder-avatars > span { position: relative; margin-left: 0; flex-shrink: 0; }
.founder-avatars > span + span { margin-left: -8px; }
.founder-avatars > span:first-child { z-index: 3; }
.founder-avatars > span:nth-child(2) { z-index: 2; }
.founder-avatars > .founder-mascot { z-index: 1; background: var(--orange); color: var(--navy); }
.founder-mascot .icon { width: 20px; height: 20px; }

/* Text CTAs share their geometry; icon-only carousel/menu controls remain compact. */
.button,
.hero-actions .button,
.nav-cta,
.archive-action .button,
.contact-card .button {
  width: var(--button-width);
  max-width: 100%;
  min-width: 0;
  height: var(--button-height);
  min-height: var(--button-height);
  padding: 12px;
  gap: 8px;
  border: 1px solid transparent;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-transform: none;
  text-decoration: none;
  flex-shrink: 0;
}
.button .icon,
.hero-actions .button .icon,
.contact-card .button > .icon,
.project-text-link .icon { width: 20px; height: 20px; }
.contact-card .button > span, .contact-card .button > .icon { margin: 0; }
.button-ghost { background: transparent; border-color: #f7f1ebb3; color: var(--paper); }
.button-ghost::before { background: var(--orange); }
.button.button-ghost { border-color: #f7f1ebb3; }
.button-ghost:is(:hover, :focus-visible) { color: var(--navy); border-color: var(--orange); }
.project-text-link { margin-top: 28px; }
.project-text-link .icon { transform-origin: center; transition: transform .3s var(--ease); }
.project-text-link:is(:hover, :focus-visible) .icon { transform: rotate(45deg); }
.button .icon { transition: transform .3s var(--ease); }
.button:is(:hover, :focus-visible) .icon:has(use[href="#arrow-up-right"]) { transform: rotate(45deg); }
.nav-cta { width: 160px; height: 44px; min-height: 44px; }
.services-action { margin-top: 48px; text-align: center; }
.services-heading { display: block; }
.contact-card input { height: var(--button-height); }
.contact-grid > *, .contact-card form, .contact-card input { min-width: 0; }
.contact-card form { grid-template-columns: minmax(0, 1fr); }

/* Preserve the original two-column tall-photo/short-tile composition. */
.team-composition {
  --photo-height: 345px;
  --tile-height: 158px;
  --collage-gap: 24px;
  --collage-offset: 42px;
  height: calc(var(--photo-height) + var(--tile-height) + var(--collage-gap) + var(--collage-offset));
}
.team-photo { height: var(--photo-height); }
.team-photo img { object-position: 50% 35%; }
.team-tile { height: var(--tile-height); }
.team-photo, .team-tile {
  transition: transform .65s var(--spring), translate .65s var(--spring);
}
.photo-architecture { top: var(--collage-offset); }
.photo-office { top: calc(var(--tile-height) + var(--collage-gap)); }
.team-small { top: calc(var(--photo-height) + var(--collage-gap) + var(--collage-offset)); }
.team-composition:hover .team-photo, .team-composition:hover .team-tile { transform: rotate(0); }
/* Meet halfway so both columns share their top/bottom edges without shifting the section. */
.team-composition:hover :is(.photo-architecture, .team-small) { translate: 0 calc(var(--collage-offset) / -2); }
.team-composition:hover :is(.designer-tile, .photo-office) { translate: 0 calc(var(--collage-offset) / 2); }
.motion-paused .team-composition > :is(.team-photo, .team-tile) { transform: none; }
.motion-paused .team-composition > :is(.photo-architecture, .team-small) { translate: 0 calc(var(--collage-offset) / -2); }
.motion-paused .team-composition > :is(.designer-tile, .photo-office) { translate: 0 calc(var(--collage-offset) / 2); }

/* Pointer depth is independent from each layer's existing straighten rotation. */
.hero-portrait-wrap { translate: calc(var(--hero-pointer-x, 0) * 7px) calc(var(--hero-pointer-y, 0) * 7px); }
.hero-seal { translate: calc(var(--hero-pointer-x, 0) * 14px) calc(var(--hero-pointer-y, 0) * 14px); }
.hero-seal > span { display:block; scale:.8; }
.craft-label { translate: calc(var(--hero-pointer-x, 0) * -10px) calc(var(--hero-pointer-y, 0) * -10px); }

@media (min-width: 1700px) {
  .team-composition { --photo-height: 395px; }
}
@media (max-width: 1200px) {
  .team-composition { --photo-height: 295px; --collage-offset: 35px; --collage-gap: 20px; }
  .service-card { padding: 28px; }
}
@media (max-width: 900px) {
  :root { --type-display: clamp(49px, 12vw, 96px); }
  .team-composition { --photo-height: 345px; --collage-offset: 42px; --collage-gap: 24px; }
  .hero-seal { width: 150px; }
  .hero-art { min-width: 0; }
}
@media (max-width: 800px) {
  .dc-page:not(.page-index) { --type-display: clamp(49px, 11.5vw, 88px); }
}
@media (max-width: 600px) {
  :root { --type-display: clamp(49px, 13.2vw, 79px); }
  .founder-avatars > span + span { margin-left: -6px; }
  .team-composition { --photo-height: 245px; --tile-height: 150px; --collage-offset: 38px; --collage-gap: 18px; }
  .team-tile { padding: 16px; }
  .team-tile > span { margin-top: 8px; }
  .hero-seal { width: 112px; }
  .craft-label { left: -7%; padding: 12px; gap: 8px; }
  .craft-label > span:last-child { max-width: 165px; }
  .hero-actions { margin-left: 0; }
  .contact-card { padding: 30px 16px; }
  .contact-card form { justify-items: center; }
  .services-action { margin-top: 32px; }
  .testimonial-card { min-height: 320px; }
  .proof-strip { column-gap: 12px; }
  .footer-top { column-gap: 20px; }
}
@media (max-width: 360px) {
  .team-composition { --photo-height: 208px; --tile-height: 154px; --collage-offset: 30px; --collage-gap: 16px; }
  .team-tile { padding: 14px 12px; }
  .craft-label > span:last-child { max-width: 145px; }
  .founder-proof { gap: 10px; }
  .testimonial-card { padding: 22px; }
  .contact-card .button { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait-wrap, .hero-seal, .craft-label { translate: none; }
  .team-composition > :is(.photo-architecture, .team-small) { translate: 0 calc(var(--collage-offset) / -2); }
  .team-composition > :is(.designer-tile, .photo-office) { translate: 0 calc(var(--collage-offset) / 2); }
}

@media (max-width: 900px) {
  #motion-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #motion-toggle [data-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}