/* Northloop, theme styles.
   Tokens, type and layout follow the Figma file ZJlV6LFRenqEgaoTFZYsZ5 (its colour and text styles), and the hero
   motion follows the spike in mikeuico/northloop. Home sections and pages are added here as they are built. */

/* Figtree, the Figma typeface, self-hosted as one variable font (npm run vendor). */
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #ffffff;               /* white */
	--ink-muted: #b2b2b2;         /* gray */
	--bg: #0c0c0c;                /* black */
	--accent: #d02301;            /* primary */
	--accent-deep: #201715;       /* on-primary-dark, icon discs */
	--graphite: #2a2a2a;          /* loader panel */
	--line: rgb(255 255 255 / 12%); /* border */
	--font-sans: "Figtree", "Helvetica Neue", Arial, sans-serif;
	/* Sections run full width and scale from the 1440 Figma frame, so 1vw is 14.4 px of Figma. Headlines, gutters
	   and section spacing use vw, while body copy, buttons and icons keep their px sizes. */
	--gutter: 2.778vw;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.4 var(--font-sans); letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { width: 100%; padding-inline: var(--gutter); }

/* Loader. Hidden unless the head script asked for it. */
/* The cover is in place from the first paint. GSAP alone moves the panels, so CSS sets no transform on them. */
.loader { display: none; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--bg); overflow: hidden; }
.loader-pending .loader { display: block; }
.loader__panel { position: absolute; inset: 0; visibility: hidden; }
.loader.is-running .loader__panel { visibility: visible; }
.loader__panel:nth-child(1) { background: var(--graphite); }
.loader__panel:nth-child(2) { background: var(--accent); }
.loader__panel:nth-child(3) { background: var(--bg); display: grid; place-items: center; }
.loader__mark { display: block; width: 320px; opacity: 0; }
.loader__mark svg { display: block; width: 100%; height: auto; }
/* Safety net. If the script never runs, the loader steps aside on its own. */
.loader-pending .loader:not(.is-running) { animation: loader-failsafe 0s 4s forwards; }
@keyframes loader-failsafe { to { visibility: hidden; } }

/* Intro. Elements wait hidden for their timeline, with the same safety net. */
.intro-pending [data-intro-title], .intro-pending [data-intro-valve], .intro-pending [data-intro-nav],
.intro-pending [data-intro-copy], .intro-pending [data-intro-cta], .intro-pending [data-intro-arrow] {
	visibility: hidden; animation: intro-failsafe 0s 4s forwards;
}
@keyframes intro-failsafe { to { visibility: visible; } }

/* Header. Static on inner pages, laid over the hero on the front page. */
/* Three columns with equal outer tracks, so the nav sits on the page centre whatever the logo and button widths. */
.header { position: relative; z-index: 3; height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	gap: 24px; padding: 0 var(--gutter); }
.header > :last-child { justify-self: end; }
.header__actions { display: flex; align-items: center; gap: 12px; }
/* The menu toggle, two lines that cross when the panel is open. It shows once the nav links no longer fit. */
.header__toggle { display: none; position: relative; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.header__toggle::before, .header__toggle::after { content: ""; position: absolute; left: 8px; width: 20px; height: 1.5px; background: currentColor; transition: transform 0.25s, top 0.25s; }
.header__toggle::before { top: 13px; }
.header__toggle::after { top: 21px; }
.is-menu-open .header__toggle::before { top: 17px; transform: rotate(45deg); }
.is-menu-open .header__toggle::after { top: 17px; transform: rotate(-45deg); }
.hero .header { position: absolute; inset: 0 0 auto; }
.header__logo { display: block; justify-self: start; color: var(--ink); }
.header__logo svg { display: block; width: 200px; height: 33px; }
.header__nav { display: flex; gap: 32px; font-size: 17px; align-items: center; }

/* One button spec site-wide, from Figma's prim-btn and outline-btn. */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 48px; border-radius: 4px;
	font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: inherit; color: var(--ink); cursor: pointer;
	border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s; }
.btn--primary { background: var(--accent); border-color: var(--accent); }
.btn--primary:hover { background: #b51e00; border-color: #b51e00; }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: rgb(255 255 255 / 40%); }
.header .btn { padding: 0 32px; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero__glow { position: absolute; left: 50%; top: 26.39vw; width: 62.5vw; height: 62.5vw; translate: -50% -50%;
	background: radial-gradient(closest-side, rgb(255 120 40 / 22%), transparent); pointer-events: none; }
/* The titles and the valve sit where the Figma frame puts them, in vw, and the copy and buttons follow in the flow
   below the valve, so the hero grows with the window and the px copy never runs into the titles. */
.hero__inner { position: relative; padding: 49.375vw var(--gutter) 40px; }
/* The titles run large and centre on the valve down the page (its middle sits at 26.458vw), stacked behind it. At
   9.8vw "Precision" (3.662em) ends at 38.7vw, so only a sliver of its last letter passes behind the coil (37 to
   38.6vw) and every word stays whole. */
.hero__title { position: absolute; z-index: 1; top: 16.658vw; margin: 0; font-size: 9.8vw; line-height: 1; font-weight: 400; letter-spacing: -0.045em; }
.hero__title--left { left: var(--gutter); }
.hero__title--right { right: var(--gutter); text-align: right; color: var(--ink-muted); }
/* Headline entrances clip each line to a mask (animations.js and heroIntro.js), and at line heights of 1 to 1.1 the
   descenders of g, p and y fall just below the line. The masks reach 0.15em lower, with the same negative margin so
   nothing moves, which keeps every letter whole while the rising words still start out of sight. */
.headline-line-mask, .intro-line-mask { padding-bottom: 0.15em; margin-bottom: -0.15em; }
.hero__copy { max-width: 431px; }
.hero__copy strong { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 12px; }
.hero__copy p { margin: 0; color: var(--ink-muted); }
.hero__cta { margin-top: 24px; display: flex; gap: 12px; }
.hero__arrow { position: absolute; right: var(--gutter); bottom: 50px; color: var(--ink); }

.hero-valve { position: absolute; z-index: 2; left: 50%; top: 7.083vw; width: 38.75vw; height: 38.75vw; margin-left: -19.375vw; }
.hero-valve img, .hero-valve-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (max-width: 1100px) {
	.header { grid-template-columns: 1fr auto; }
	.header__nav { display: none; }
	.header__toggle { display: block; }
	.is-menu-open { overflow: hidden; }
	.is-menu-open .header { position: fixed; z-index: 60; background: var(--bg); }
	.is-menu-open .header__logo, .is-menu-open .header__actions { position: relative; z-index: 51; }
	.is-menu-open .header__nav { display: flex; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: flex-start;
		justify-content: center; gap: 8px; padding: 0 var(--gutter); background: var(--bg); font-size: 9.77vw; letter-spacing: -0.04em; }
}

/* Home, The Work Behind the Parts You Trust */
.work__inner { padding: 8.333vw var(--gutter); display: flex; flex-direction: column; gap: 5.556vw; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.778vw; padding-bottom: 5.556vw; border-bottom: 1px solid var(--line); }
.work__title { margin: 0; font-size: 6.389vw; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.work__text { margin: 0; max-width: clamp(280px, 26.74vw, 480px); color: var(--ink-muted); }
.work__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; column-gap: 7.639vw; }
.work__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5.556vw; }
.work-card { display: flex; gap: 24px; }
.work-card__icon { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-deep); color: var(--accent); display: grid; place-items: center; }
.work-card__icon svg { display: block; width: 32px; height: 32px; }
.work-card__title { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.2; }
.work-card__text { margin: 0; color: var(--ink-muted); }
.work__photo { margin: 0; aspect-ratio: 380 / 560; border-radius: 4px; overflow: hidden; }
.work__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
	.work__head { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 56px; }
	.work__text { max-width: 420px; }
	.work__body { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
	.work__photo { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 380px); }
	.work__cards { gap: 48px; }
}

@media (max-width: 700px) {
	.work__inner { padding: 80px var(--gutter); gap: 56px; }
	.work__title { font-size: 10vw; }
	.work__body { grid-template-columns: 1fr; gap: 48px; }
	.work__cta .btn { padding: 0 20px; }
}

/* Home, Why Teams Rely on Us. A light card on the dark page, Figma's surface colour. */
.why { padding: 0 var(--gutter); }
.why__card { background: #f8f8f8; color: var(--bg); border-radius: 8px; padding: 5.556vw; display: flex; flex-direction: column; gap: 5.556vw; }
.why__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.why__text { order: -1; margin: 0; max-width: clamp(236px, 16.39vw, 360px); }
.why__title { margin: 0; flex: 1; text-align: right; font-size: 6.389vw; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.why__body { display: grid; grid-template-columns: minmax(0, 608fr) minmax(0, 512fr); align-items: center; gap: 5.556vw; }
.why__photo { margin: 0; aspect-ratio: 608 / 648; border-radius: 4px; overflow: hidden; }
.why__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.why__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.why-point { display: flex; align-items: center; gap: 24px; }
.why-point__num { flex: none; width: 60px; height: 60px; border: 1px solid var(--ink-muted); border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.why-point__title { margin: 0 0 8px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.why-point__text { margin: 0; }

@media (max-width: 1100px) {
	.why__card { padding: 56px 40px; gap: 56px; }
	.why__head { flex-direction: column; }
	.why__text { order: 0; max-width: 420px; }
	.why__title { text-align: left; }
	.why__body { grid-template-columns: 1fr; gap: 48px; }
	.why__photo { width: min(100%, 608px); justify-self: center; }
}

@media (max-width: 700px) {
	.why__card { padding: 40px 20px; gap: 40px; }
	.why__title { font-size: 10vw; }
	.why-point { align-items: flex-start; gap: 16px; }
	.why-point__num { width: 48px; height: 48px; }
	.why-point__title { font-size: 20px; }
}

/* Home, Explore our Catalog. The large photo spans both rows, and the title block and small photo share the right
   column, so the gap between them flexes with the photo's height. */
.explore { padding: 2.778vw var(--gutter); display: grid; grid-template-columns: minmax(0, 688fr) minmax(0, 632fr);
	grid-template-rows: auto 1fr; grid-template-areas: "large head" "large small"; column-gap: 2.778vw; row-gap: 24px; }
.explore__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.explore__title { margin: 0; font-size: 6.389vw; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.explore__photo { margin: 0; border-radius: 4px; overflow: hidden; }
.explore__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.explore__photo--large { grid-area: large; aspect-ratio: 688 / 814; }
.explore__photo--small { grid-area: small; align-self: end; aspect-ratio: 632 / 452; }

@media (max-width: 700px) {
	.explore { padding: 40px var(--gutter) 56px; grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "large" "small"; row-gap: 32px; }
	.explore__head { margin-bottom: 8px; }
	.explore__title { font-size: 10vw; }
}

/* Home, Built for the People Who Build Everything Else. The card row runs to the right edge of the screen, four
   full cards and a third of the fifth at any desktop width, and scrolls sideways. */
.industries { padding: 8.333vw 0 8.333vw var(--gutter); display: flex; flex-direction: column; gap: 5.556vw; }
.industries__head { padding-right: var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.industries__title { margin: 0; font-size: 6.389vw; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.industries__text { margin: 0; color: var(--ink-muted); }
.industries__row { list-style: none; margin: 0; padding: 0 var(--gutter) 0 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
	scrollbar-width: none; cursor: grab; }
.industries__row::-webkit-scrollbar { display: none; }
.industries__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.industry { flex: 0 0 21.67vw; scroll-snap-align: start; }
.industry__photo { margin: 0; aspect-ratio: 330 / 460; border-radius: 4px; overflow: hidden; background: #1a1a1a; }
.industry__photo img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.industry__name { margin: 24px 0 0; font-size: 20px; font-weight: 600; line-height: 1.2; }
.industries__cta { padding-right: var(--gutter); display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
	.industry { flex-basis: 30vw; }
}

/* Light header, for the light pages such as the Catalog. */
.header--light { background: #f8f8f8; color: var(--bg); }
.header--light .header__logo { color: var(--bg); }
.header__nav .is-current { color: var(--accent); }

/* Catalog, from the Figma Catalog page. A light page with a filter sidebar beside the product list. */
/* Figma's gray (#b2b2b2) is 1.9:1 on this light page, so muted text here uses #6b6b6b (5:1, WCAG AA). */
.catalog-page { --ink-muted: #6b6b6b; background: #f8f8f8; color: var(--bg); }
.catalog-head { padding: 5.556vw var(--gutter); border-bottom: 1px solid rgb(0 0 0 / 12%); }
.catalog-head__title { margin: 0; font-size: 8.333vw; font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.catalog { display: grid; grid-template-columns: 28.125vw minmax(0, 1fr); border-bottom: 1px solid rgb(0 0 0 / 12%); }
.catalog-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.catalog__filters { padding: 2.778vw; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.catalog .catalog__drawer-head, .catalog .catalog__filters-open, .catalog .catalog-search--main, .catalog .catalog-sort--drawer { display: none; }
.catalog-search { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border: 1px solid rgb(0 0 0 / 12%); border-radius: 4px; background: #fff; margin-bottom: 12px; }
.catalog-search svg { flex: none; width: 20px; height: 20px; color: #121212; }
.catalog-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 14px; color: var(--bg); letter-spacing: inherit; }
.catalog-search input::placeholder { color: #848484; opacity: 1; }
.catalog-search input:focus { outline: none; }
.catalog-search:focus-within { border-color: var(--bg); }
.catalog-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.catalog-chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--bg); border-radius: 120px; font-size: 14px; }
.catalog-chip svg { width: 16px; height: 16px; }
.catalog__clear { align-self: flex-start; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.catalog-filter-groups { display: flex; flex-direction: column; }
.catalog-filter { border-bottom: 1px solid rgb(0 0 0 / 12%); }
.catalog-filter summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; list-style: none; }
.catalog-filter summary::-webkit-details-marker { display: none; }
.catalog-filter__icon svg { display: block; width: 24px; height: 24px; }
.catalog-filter__icon svg + svg, .catalog-filter[open] .catalog-filter__icon svg:first-child { display: none; }
.catalog-filter[open] .catalog-filter__icon svg + svg { display: block; }
.catalog-filter ul { list-style: none; margin: 0; padding: 0 0 12px; }
.catalog-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.catalog-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.catalog-check__box svg { display: block; width: 24px; height: 24px; color: rgb(0 0 0 / 24%); }
.catalog-check__box svg + svg { display: none; color: var(--accent); }
.catalog-check input:checked + .catalog-check__box svg:first-child { display: none; }
.catalog-check input:checked + .catalog-check__box svg + svg { display: block; }
.catalog-check input:focus-visible + .catalog-check__box { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.js .catalog__apply { display: none; }
.catalog__main { padding: 2.778vw 2.778vw 8.333vw; border-left: 1px solid rgb(0 0 0 / 12%); display: flex; flex-direction: column; gap: 20px; }
.catalog__toolbar { display: flex; align-items: center; gap: 12px; }
.catalog-sort { display: flex; align-items: center; gap: 12px; }
.catalog-sort__control { position: relative; display: block; }
.catalog-sort select { appearance: none; height: 40px; min-width: 189px; padding: 0 44px 0 12px; border: 1px solid rgb(0 0 0 / 12%); border-radius: 4px; background: #fff;
	font: inherit; color: var(--bg); letter-spacing: inherit; cursor: pointer; }
.catalog-sort__control svg { position: absolute; right: 12px; top: 8px; width: 24px; height: 24px; pointer-events: none; }
.catalog-view { margin-left: auto; display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--accent-deep); }
.catalog-view a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; color: var(--ink); }
.catalog-view a[aria-current] { background: var(--ink); color: var(--bg); }
.catalog-view svg { width: 36px; height: 36px; }
.catalog__count { margin: 0; font-weight: 600; }
.catalog-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.product-card { display: grid; grid-template-columns: minmax(0, 390fr) minmax(0, 525fr); gap: 40px; }
.product-card__media { position: relative; display: block; aspect-ratio: 390 / 241; border-radius: 4px; overflow: hidden; background: #fff; }
/* Product photos are cutouts on white, so the whole product shows, centred, as in Figma. */
.product-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-card__stock { position: absolute; top: 20px; right: 20px; padding: 4px 12px; border-radius: 120px; background: rgb(18 18 18 / 50%); color: var(--ink);
	font-size: 12px; font-weight: 600; line-height: 1.4; backdrop-filter: blur(6px); }
.product-card__body { display: flex; flex-direction: column; align-items: flex-start; }
.product-card__chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product-card__chips li { padding: 6px 8px; border-radius: 4px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.4; }
.product-card__title { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.2; }
.product-card__summary { margin: 0; }
.product-card__specs { margin: auto 0 0; padding-top: 24px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.product-card__links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; font-weight: 600; }
.product-card__links a { display: inline-flex; align-items: center; gap: 10px; }
.product-card__links a:hover, .product-card__title a:hover { color: var(--accent); }
.product-card__links svg { width: 24px; height: 24px; }
.catalog-list--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.catalog-list--grid .product-card { grid-template-columns: 1fr; gap: 20px; }
.catalog-pages { margin-top: 40px; display: flex; justify-content: center; gap: 24px; font-size: 17px; color: var(--ink-muted); }
.catalog-pages .current { color: var(--accent); }
.catalog-pages a:hover { color: var(--bg); }
.catalog-empty { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.catalog-empty p { margin: 0; }
/* The chosen chips and the results are wrappers main.js swaps, so their children keep the parent's flex layout. While
   the next results load in the background the current ones dim, after a short pause so a quick answer never flickers. */
.catalog-chosen, .catalog-results { display: contents; }
.catalog-results > *, .catalog__count { transition: opacity 0.2s; }
.catalog.is-loading .catalog-results > *, .catalog.is-loading .catalog__count { opacity: 0.4; transition-delay: 0.15s; }
.catalog__count:focus { outline: none; }

@media (max-width: 1100px) {
	.catalog { grid-template-columns: minmax(0, 1fr); }
	.catalog__main { border-left: 0; padding: 40px var(--gutter) 80px; }
	.catalog .catalog-search--main { display: flex; margin-bottom: 0; }
	.catalog__filters .catalog-search { display: none; }
	.catalog .catalog__filters-open { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 12%);
		border-radius: 4px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; letter-spacing: inherit; cursor: pointer; }
	.catalog__filters-open svg { width: 20px; height: 20px; }
	.catalog-sort--toolbar { display: none; }
	.catalog .catalog-sort--drawer { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px; }
	.catalog-sort--drawer select { width: 100%; }
	.catalog__filters { position: fixed; z-index: 70; inset: 0 auto 0 0; width: min(372px, 86vw); padding: 20px; overflow-y: auto; background: #f8f8f8;
		transform: translateX(-100%); transition: transform 0.3s ease; visibility: hidden; }
	.is-filters-open .catalog__filters { transform: none; visibility: visible; }
	.is-filters-open { overflow: hidden; }
	.catalog .catalog__drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
	.catalog__drawer-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--bg); cursor: pointer; }
	.catalog__drawer-close svg { width: 20px; height: 20px; }
	.catalog__scrim { position: fixed; z-index: 65; inset: 0; background: rgb(0 0 0 / 20%); }
	.catalog-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inner page header, from the What We Do header. The photo fills the section under a dark gradient that runs from
   solid on the left to half on the right (Figma's fill on #121212), and the crop keeps the subject's face in view. */
.page-hero { position: relative; min-height: 71.11vw; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.page-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgb(18 18 18 / 100%), rgb(18 18 18 / 50%)); }
.page-hero .header { position: absolute; inset: 0 0 auto; }
.page-hero__inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 8.333vw var(--gutter) 2.778vw; }
.page-hero__title { margin: 0; font-size: 8.333vw; font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.page-hero__bar { display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 580fr) minmax(0, 270fr); align-items: start;
	column-gap: 5.556vw; padding-top: 20px; border-top: 1px solid var(--line); }
.page-hero__eyebrow { display: none; }
.page-hero__label { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.page-hero__intro { margin: 0; }
.page-hero__bar .btn { justify-self: end; padding: 0 32px; }

/* What We Do, Our Approach. A light card like Why Teams, with the title left and the line right. */
.approach { padding: 8.333vw var(--gutter); }
.approach__card { background: #f8f8f8; color: var(--bg); border-radius: 8px; padding: 5.556vw; display: flex; flex-direction: column; gap: 5.556vw; }
.approach__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.approach__title { margin: 0; font-size: 6.389vw; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.approach__text { margin: 0; max-width: clamp(280px, 26.8vw, 480px); }
.approach__list { list-style: none; margin: 0; padding: 2.778vw 0 0; border-top: 1px solid rgb(0 0 0 / 12%); display: flex; flex-direction: column; gap: 2.778vw; }
.approach-row { display: flex; justify-content: space-between; gap: 2.778vw; padding-bottom: 2.778vw; border-bottom: 1px solid rgb(0 0 0 / 12%); }
.approach-row:last-child { padding-bottom: 0; border-bottom: 0; }
.approach-row__copy { flex: 0 0 33.9%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.approach-row__num { display: block; margin-bottom: 24px; font-size: 20px; font-weight: 600; line-height: 1.2; }
.approach-row__title { margin: 0; font-size: 2.5vw; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; }
.approach-row__text { margin: 0; max-width: 340px; }
.approach-row__photo { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: var(--ratio); }
.approach-row__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.approach-row--1 .approach-row__photo { flex: 0 0 66.08%; --ratio: 793 / 400; }
.approach-row--2 .approach-row__photo { flex: 0 0 55%; --ratio: 660 / 400; }
.approach-row--3 .approach-row__photo { flex: 0 0 43.33%; --ratio: 520 / 400; }

/* What We Do, Our Services. Six rows, each a large light number, the service name, then the statement with its
   thumbnail and a list of points marked with accent dots. */
.services { padding: 4.167vw var(--gutter); display: flex; flex-direction: column; gap: 5.556vw; }
.services__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.services__tagline { margin: 0 0 10px; font-size: 16px; font-weight: 400; letter-spacing: 0; }
.services__title { margin: 0; max-width: 62.9vw; font-size: 6.389vw; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; }
.services__text { margin: 0; max-width: clamp(280px, 23.2vw, 420px); color: var(--ink-muted); }
.services__list { list-style: none; margin: 0; padding: 0; }
.service { display: grid; grid-template-columns: 17.36vw 28.75vw minmax(0, 1fr); column-gap: 0; padding: 2.778vw 0 12.5vw; border-top: 1px solid var(--line); }
.service:last-child { padding-bottom: 2.778vw; }
.service__num { font-size: 12.5vw; font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.service__name { margin: 0; padding-right: 5.556vw; font-size: 17px; font-weight: 500; line-height: 1.4; }
.service__body { display: flex; flex-direction: column; gap: 2.778vw; }
.service__lead { display: flex; flex-direction: column; gap: 24px; padding-bottom: 2.778vw; border-bottom: 1px solid var(--line); }
.service__statement { margin: 0; text-indent: 2.9em; font-size: 2.5vw; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; }
.service__thumb { position: relative; align-self: flex-end; width: 40.4%; aspect-ratio: 281 / 166; margin: 0; border-radius: 4px; overflow: hidden; }
.service__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(18 18 18 / 100%), rgb(18 18 18 / 50%)); opacity: 0.5; }
.service__play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 42px; height: 42px; translate: -50% -50%; color: var(--ink); }
.service__play svg { display: block; width: 100%; height: 100%; }
.service__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ink-muted); }
.service__points li { display: flex; align-items: baseline; gap: 8px; }
.service__points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-3px); }

@media (max-width: 1100px) {
	.page-hero { min-height: 640px; }
	.page-hero__bar { grid-template-columns: 1fr; row-gap: 16px; }
	.page-hero__bar .btn { justify-self: start; }
	.approach__card { padding: 56px 40px; gap: 48px; }
	.approach__head, .services__head { flex-direction: column; align-items: flex-start; }
	.approach-row { flex-direction: column; }
	.approach-row__photo { flex-basis: auto !important; width: 100%; }
	.approach-row__title { font-size: 4vw; }
	.service { grid-template-columns: 1fr; row-gap: 16px; padding-bottom: 56px; }
	.service__num { font-size: 16vw; }
	.service__statement { font-size: 4vw; }
	.service__thumb { width: min(100%, 420px); }
}

@media (max-width: 700px) {
	.page-hero__inner { padding: 120px var(--gutter) 32px; }
	.page-hero__title { font-size: 10vw; }
	.approach { padding: 56px var(--gutter); }
	.approach__card { padding: 40px 20px; gap: 40px; }
	.approach__title, .services__title { font-size: 10vw; max-width: none; }
	.approach-row__title { font-size: 7vw; }
	.services { padding: 56px var(--gutter); gap: 40px; }
	.service__num { font-size: 22vw; }
	.service__statement { font-size: 6.5vw; text-indent: 0; }
}

/* Footer, from the Figma footer. Full width like the sections, with the card title in vw. */
.site-footer { padding: 2.778vw var(--gutter); }
.site-footer__inner { border-top: 1px solid rgb(255 255 255 / 20%); padding-top: 2.778vw; display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8.333vw; row-gap: 8.333vw; }
.site-footer__cta { background: var(--accent); border-radius: 4px; padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.site-footer__cta-title { margin: 0; font-size: 2.5vw; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; }
.site-footer__cta-text { margin: -12px 0 0; }
.btn--light { background: var(--ink); color: var(--bg); border-color: var(--line); }
.btn--light:hover { background: #e6e6e6; }
.btn--compact { height: 48px; padding: 0 24px; }
.site-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-self: start; }
.site-footer__links ul { list-style: none; margin: 0; padding: 0; }
.site-footer__links a { display: block; padding: 8px 0; }
.site-footer__links a:hover, .site-footer__credits a:hover { color: var(--ink-muted); }
.site-footer__logo { align-self: end; justify-self: start; color: var(--ink); }
.site-footer__logo svg { display: block; width: 25vw; height: auto; }
.site-footer__news { align-self: end; display: flex; flex-direction: column; gap: 12px; }
.site-footer__news-label { font-weight: 600; }
.site-footer__news-row { display: flex; gap: 12px; }
.site-footer__news-row input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--line);
	border-radius: 0; background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; }
.site-footer__news-row input::placeholder { color: var(--ink-muted); opacity: 1; }
.site-footer__news-row input:focus { outline: none; border-bottom-color: var(--ink); }
.site-footer__news-status { margin: 0; min-height: 1.4em; color: var(--ink-muted); font-size: 14px; }
.site-footer__credits { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--ink-muted); }
.site-footer__credits-start { display: flex; align-items: center; gap: 24px; }
.site-footer__credits p { margin: 0; }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.site-footer__social a { display: block; color: var(--ink-muted); }
.site-footer__social a:hover { color: var(--ink); }
.site-footer__social svg { display: block; width: 24px; height: 24px; }

@media (max-width: 1100px) {
	.site-footer__inner { grid-template-columns: 1fr; row-gap: 56px; }
	.site-footer__cta-title { font-size: 4.5vw; }
	.site-footer__logo svg { width: 40vw; }
}

@media (max-width: 700px) {
	:root { --gutter: 20px; }
	.header__logo svg { width: 160px; height: 26px; }
	.hero { min-height: 0; }
	.hero__glow { top: 420px; width: 600px; height: 600px; }
	.hero__inner { display: flex; flex-direction: column; padding: 120px var(--gutter) 56px; }
	.hero__title { position: relative; top: auto; left: auto; right: auto; font-size: 15vw; }
	.hero__title--right { text-align: left; }
	.hero-valve { position: relative; left: auto; top: auto; margin: -6vw auto 0; width: min(100%, 360px); height: auto; aspect-ratio: 1; }
	.hero__copy { position: static; margin-top: 24px; }
	.hero__cta { position: static; margin-top: 24px; flex-wrap: wrap; }
	.hero__cta .btn { padding: 0 20px; }
	.hero__arrow { display: none; }
	.site-footer { padding: 40px var(--gutter) 32px; }
	.site-footer__inner { padding-top: 40px; row-gap: 48px; }
	.site-footer__cta { padding: 24px; }
	.site-footer__cta-title { font-size: 7.5vw; }
	.site-footer__logo svg { width: 60vw; }
	.site-footer__credits, .site-footer__credits-start { flex-direction: column; align-items: flex-start; }
}

/* Phones, from the Figma 430 frames (Home 1:1002, What We Do 12839:2239). Their sizes scale from 430, so 64 px is
   14.88vw, 42 px is 9.77vw, 36 px is 8.37vw and 28 px is 6.51vw, while body copy and buttons keep px. Hand line breaks
   give way to the natural wrap at this width. */
@media (max-width: 700px) {
	.header { height: 56px; }
	.header__logo svg { width: 140px; height: 23px; }
	.header .btn { height: 33px; padding: 0 12px; font-size: 12px; }
	h1 br, h2 br, .hero__title br { display: none; }
	h1, h2 { text-wrap: balance; }

	.hero__inner { padding: 116px var(--gutter) 60px; }
	.hero__title { font-size: 14.88vw; line-height: 1.1; text-align: center; }
	.hero__title--right { text-align: center; }
	.hero-valve { margin: 24px auto 0; width: 86.7vw; max-width: 373px; }
	.hero__copy { margin-top: 40px; max-width: none; }
	.hero__cta { flex-direction: column; margin-top: 24px; }
	.hero__cta .btn { width: 100%; padding: 0 20px; }

	.work__inner { padding: 60px var(--gutter); gap: 40px; }
	.work__head { padding-bottom: 0; border-bottom: 0; gap: 24px; }
	.work__title { font-size: 9.77vw; }
	.work__text { max-width: none; }
	.work__body { display: flex; flex-direction: column; gap: 40px; }
	.work__cards { gap: 40px; }
	.work__photo { order: 1; width: 100%; aspect-ratio: 390 / 320; justify-self: auto; }
	.work__cta, .industries__cta { flex-direction: column; }
	.work__cta .btn, .industries__cta .btn { width: 100%; }

	.industries { padding: 60px 0 60px var(--gutter); gap: 40px; }
	.industries__head { align-items: flex-start; text-align: left; }
	.industries__title { font-size: 9.77vw; }
	.industry { flex-basis: 76.7vw; }

	.why { padding: 0 var(--gutter); }
	.why__card { padding: 20px; gap: 40px; border-radius: 4px; }
	.why__head { gap: 24px; }
	.why__title { font-size: 9.77vw; }
	.why__body { gap: 40px; }
	.why__photo { width: 100%; aspect-ratio: 350 / 431; }
	.why__points { gap: 48px; }
	.why-point { gap: 24px; }
	.why-point__num { width: 48px; height: 48px; }
	.why-point__title { font-size: 20px; }

	.explore { padding: 60px var(--gutter) 0; row-gap: 40px; }
	.explore__head { margin-bottom: -20px; }
	.explore__title { font-size: 9.77vw; }
	.explore__photo--large, .explore__photo--small { aspect-ratio: 390 / 380; }

	.site-footer__cta { padding: 20px; }
	.site-footer__cta-title { font-size: 6.51vw; line-height: 1.1; }
	.site-footer__credits, .site-footer__credits-start { align-items: center; text-align: center; }
	.site-footer__credits { flex-direction: column; }

	.page-hero { min-height: 0; }
	.page-hero__inner { padding: 136px var(--gutter) 24px; gap: 40px; justify-content: flex-start; }
	.page-hero__eyebrow { display: block; margin: 0 0 24px; }
	.page-hero__title { font-size: 14.88vw; line-height: 1.1; }
	.page-hero__bar { row-gap: 24px; }
	.approach { padding: 60px var(--gutter); }
	.approach__card { padding: 20px; gap: 40px; border-radius: 4px; }
	.approach__title, .services__title { font-size: 9.77vw; }
	.approach__text, .services__text, .why__text, .work__text { max-width: none; }
	.approach-row__copy { gap: 40px; }
	.approach-row__title { font-size: 8.37vw; }
	.approach-row__photo { aspect-ratio: 350 / 320 !important; }
	.services { padding: 60px var(--gutter); }
	.service { row-gap: 20px; padding: 40px 0 80px; }
	.service__num { font-size: 9.3vw; }
	.service__statement { font-size: 8.37vw; text-indent: 2.9em; }
	.service__thumb { width: 72%; align-self: flex-end; }

	.catalog-head { padding: 80px var(--gutter) 60px; }
	.catalog-head__title { font-size: 14.88vw; line-height: 1.1; }
	.catalog__main { padding: 40px var(--gutter) 60px; }
	.product-card, .catalog-list--grid { grid-template-columns: 1fr; }
	.product-card { gap: 24px; }
	.product-card__specs { margin-top: 0; padding-top: 24px; }
}