/* Brand, Build and How we work menus: every panel takes the height of the tallest (Build, five links),
   links share it evenly, and the drawing fills the left column top to bottom. */
.nav-panel-wide { grid-template-columns: 330px auto; align-items: stretch; }
.nav-panel-wide .np-secs { min-height: 21.1rem; grid-auto-rows: 1fr; }
.nav-panel-wide .np-secs a { align-content: center; }
.nav-panel-wide .np-art { margin-top: 0; padding: 0; display: flex; align-items: center; }
.nav-panel-wide .np-art .lane-crop { width: 100%; height: 100%; aspect-ratio: auto; }
.nav-panel-wide .np-tl { padding: 18px 16px; }
.nav-panel-wide .np-tl svg { width: 100%; height: auto; }
/* The wider panel would run off the right edge under How we work; anchor it further left. */
.nav-item:nth-child(4) .nav-panel-wide { transform: translate(-52%, 8px); }
.nav-item:nth-child(4):hover .nav-panel-wide, .nav-item:nth-child(4):focus-within .nav-panel-wide, .nav-item.open:nth-child(4) .nav-panel-wide { transform: translate(-52%, 0); }
.nav-panel-wide .np-tl .mt-label { font-size: 13.5px; }
.nav-panel-wide .np-tl .mt-cap { font-size: 13px; }

/* Site-wide: no single orphan word on the last line of body copy. Headings already balance. */
p, li, blockquote, dd, figcaption, cite { text-wrap: pretty; }
.case-headline, .work-head, .lead-dark { text-wrap: balance; }

/* Work menu: a little more room above the thumbnails and between the two rows. */
.nav-panel-work { padding-top: 30px; padding-bottom: 26px; }
.nav-panel-work .np-cards { row-gap: 22px; }

/* Home hero: the scroll button breathes. The arrow nudges down and a soft ring ripples out,
   then it rests for a beat. Stops on hover and for anyone who prefers less motion. */
.hero-skip { position: relative; }
.hero-skip svg { animation: skipNudge 3.2s ease-in-out 1.2s infinite; }
.hero-skip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(75,63,209,.5); pointer-events: none; opacity: 0; animation: skipRing 3.2s ease-out 1.2s infinite; }
.hero-skip:hover svg, .hero-skip:focus-visible svg, .hero-skip:hover::after, .hero-skip:focus-visible::after { animation: none; }
@keyframes skipNudge { 0%, 40%, 100% { transform: translateY(0); } 15% { transform: translateY(5px); } 28% { transform: translateY(0); } 34% { transform: translateY(2px); } }
@keyframes skipRing { 0% { transform: scale(1); opacity: .8; } 55%, 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-skip svg, .hero-skip::after { animation: none; } }

/* Desktop nav: larger links and button. The homepage logo is bigger, which sets the height of the bar;
   inner pages use a smaller logo but keep the same bar height, so the links sit in the same place everywhere.
   Sizes ease down toward the 920px breakpoint so the row never overflows. */
@media (min-width: 921px) {
  .nav { font-size: clamp(17px, 1.4vw + 1px, 21.5px); gap: clamp(12px, 2.1vw, 36px); }
  .nav .nav-cta { padding: clamp(8px, .75vw, 12px) clamp(14px, 1.6vw, 26px); }
  body:not(.scrolled) .top-row { min-height: clamp(48px, 4.4vw, 62px); }
  body.home:not(.scrolled) .logo-mark { height: clamp(46px, 4.4vw, 62px); }
  /* Once scrolled, every page (homepage included) uses the inner-page logo size. */
  body:not(.home) .logo-mark, body.scrolled .logo-mark, body.home.scrolled .logo-mark { height: clamp(36px, 3.1vw, 46px); }
}

/* Page headers stay hidden until site.js has split the headline into letters and set up the fade-ins,
   so the text never paints plain and then snaps away to build in. Falls back to showing after 2.5s. */
.js:not(.ready) :is(.page-head, .case-head, .lane-hero, .post-head) .wrap { opacity: 0; animation: headFallback 0s 2.5s forwards; }
@keyframes headFallback { to { opacity: 1; } }

/* Headlines: a single fade and slide in from the left (replaces the letter-by-letter type-in). */
.tw { opacity: 0; transform: translateX(-28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.tw.typed { opacity: 1; transform: none; }

/* Home teaser: the timeline sits in a clean card inside its column, no fade and no bleed off the edge. */
.teaser-crop { margin-right: 0; -webkit-mask-image: none; mask-image: none; }

/* Text links ("View the work", "All projects"…): no underline, followed by a violet circle with an arrow. */
.work-more, .text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none !important; }
.work-more::after, .text-link::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--vio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12H19M13 6L19 12L13 18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s ease; }
a:hover .work-more::after, a:focus-visible .work-more::after, .text-link:hover::after, .text-link:focus-visible::after { transform: translateX(4px); background-color: var(--vio-700); }