/*
Theme Name:   IdeaToWeb
Theme URI:    https://ideatoweb.com/
Description:  Fully custom theme for IdeaToWeb. No parent theme, no page builders, no frameworks.
Author:       IdeaToWeb
Author URI:   https://ideatoweb.com/
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Tags:         custom-menu, translation-ready, block-styles
Text Domain:  ideatoweb
*/


/* ==========================================================================
   1. FONTS
   Self hosted only. Files go in /assets/fonts/ inside this child theme.
   Variable fonts used so one file covers every weight.
   ========================================================================== */

@font-face {
	font-family: "Satoshi";
	src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2-variations"),
	     url("assets/fonts/Satoshi-Variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/InterVariable.woff2") format("woff2-variations"),
	     url("assets/fonts/InterVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   2. BRAND TOKENS
   Single source of truth. Nothing below this block hardcodes a colour.
   ========================================================================== */

:root {

	/* ---- Core palette ---- */
	--itw-midnight:        #101014;
	--itw-cream:           #FAF8F5;
	--itw-white:           #FFFFFF;
	--itw-body:            #3F3F46;
	--itw-muted:           #71717A;
	--itw-line:            #E4E0D8;

	/* ---- Amber ----
	   accent      : fills, buttons, icons, decorative shapes
	   accent-text : darker amber for links and small text on light
	                 backgrounds, because #D97706 fails contrast at
	                 body size. Do not swap these two around.
	*/
	--itw-accent:          #D97706;
	--itw-accent-hover:    #B45309;
	--itw-accent-text:     #B45309;
	--itw-accent-text-hv:  #92400E;

	/* ---- Amber tints, for soft backgrounds only ---- */
	--itw-accent-soft:     #FDF3E7;
	--itw-accent-border:   #F3D9B5;

	/* ---- Dark section palette ---- */
	--itw-dark-bg:         #101014;
	--itw-dark-surface:    #1A1A20;
	--itw-dark-text:       #D4D4D8;

	/* Dark surfaces need their own muted grey. The light surface value
	   above only reaches 3.8 against midnight, which is not readable. */
	--itw-dark-muted:      #A1A1AA;
	--itw-dark-heading:    #FAF8F5;
	--itw-dark-line:       #2A2A32;

	/* ---- Semantic roles ---- */
	--itw-bg:              var(--itw-cream);
	--itw-surface:         var(--itw-white);
	--itw-heading:         var(--itw-midnight);
	--itw-text:            var(--itw-body);
	--itw-text-muted:      var(--itw-muted);
	--itw-border:          var(--itw-line);
	--itw-link:            var(--itw-accent-text);
	--itw-link-hover:      var(--itw-accent-text-hv);
	--itw-on-accent:       var(--itw-midnight);
	--itw-focus:           var(--itw-midnight);

	/* ---- Logo ---- */
	--itw-logo-accent:     var(--itw-accent);

	/* ---- Feedback ---- */
	--itw-success:         #15803D;
	--itw-error:           #B91C1C;
	--itw-error-soft:      #FEF2F2;


	/* ==== TYPOGRAPHY ==== */

	--itw-font-heading: "Satoshi", ui-sans-serif, system-ui, -apple-system,
	                    "Segoe UI", Roboto, Arial, sans-serif;
	--itw-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system,
	                    "Segoe UI", Roboto, Arial, sans-serif;
	--itw-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
	                    Consolas, monospace;

	/* Fluid scale. Min values are the 360px sizes, max are desktop. */
	--itw-fs-display: clamp(2.5rem,  1.55rem + 4.2vw,  4.75rem);
	--itw-fs-h1:      clamp(2.125rem, 1.5rem + 2.8vw,  3.5rem);
	--itw-fs-h2:      clamp(1.75rem,  1.35rem + 1.8vw, 2.625rem);
	--itw-fs-h3:      clamp(1.375rem, 1.15rem + 1vw,   1.875rem);
	--itw-fs-h4:      clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
	--itw-fs-lead:    clamp(1.0625rem, 1rem + 0.35vw,  1.25rem);
	--itw-fs-body:    1.0625rem;
	--itw-fs-sm:      0.9375rem;
	--itw-fs-xs:      0.8125rem;

	--itw-lh-tight:   1.08;
	--itw-lh-heading: 1.18;
	--itw-lh-snug:    1.4;
	--itw-lh-body:    1.7;

	--itw-ls-tight:   -0.03em;
	--itw-ls-heading: -0.02em;
	--itw-ls-normal:  0;
	--itw-ls-wide:    0.08em;

	--itw-fw-regular: 400;
	--itw-fw-medium:  500;
	--itw-fw-semi:    600;
	--itw-fw-bold:    700;


	/* ==== SPACING ==== */

	--itw-space-2xs:  0.25rem;
	--itw-space-xs:   0.5rem;
	--itw-space-sm:   0.75rem;
	--itw-space-md:   1rem;
	--itw-space-lg:   1.5rem;
	--itw-space-xl:   2rem;
	--itw-space-2xl:  3rem;
	--itw-space-3xl:  4rem;
	--itw-space-4xl:  6rem;

	/* Vertical rhythm between page sections */
	--itw-section-y:  clamp(4rem, 2.5rem + 6vw, 7.5rem);


	/* ==== LAYOUT ==== */

	--itw-container:      1280px;
	--itw-container-wide: 1400px;
	--itw-container-text: 68ch;
	--itw-gutter:         clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
	/* Fallback only. main.js measures the bar and overwrites this on the
	   root element, so anything depending on header height stays correct
	   when the bar shrinks or the layout changes. */
	--itw-header-h:       63px;

	/* Header shell. Padding and logo width animate between the two states. */
	--itw-hd-pad:         0.72rem;
	--itw-hd-pad-sm:      0.5rem;
	--itw-hd-top:         1.5rem;
	--itw-hd-top-sm:      0.75rem;
	--itw-hd-logo:        152px;
	--itw-hd-logo-sm:     132px;
	--itw-hd-max:         1280px;

	/* Every control inside the bar is pinned to this height. Matching them
	   through padding never holds, because the pill and the button carry
	   different font sizes and border widths. */
	--itw-hd-control:     38px;


	/* ==== RADIUS ==== */

	--itw-radius-sm:   6px;
	--itw-radius:      10px;
	--itw-radius-lg:   16px;
	--itw-radius-xl:   24px;
	--itw-radius-full: 999px;


	/* ==== SHADOWS ==== */

	--itw-shadow-sm: 0 1px 2px rgba(16, 16, 20, 0.05);
	--itw-shadow:    0 2px 8px rgba(16, 16, 20, 0.06),
	                 0 1px 2px rgba(16, 16, 20, 0.04);
	--itw-shadow-lg: 0 12px 32px rgba(16, 16, 20, 0.09),
	                 0 4px 10px rgba(16, 16, 20, 0.05);


	/* ==== MOTION ==== */

	--itw-ease:       cubic-bezier(0.4, 0, 0.2, 1);
	--itw-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--itw-dur-fast:   150ms;
	--itw-dur:        250ms;
	--itw-dur-slow:   500ms;
	--itw-reveal-y:   24px;


	/* ==== Z INDEX ==== */

	--itw-z-base:    1;
	--itw-z-sticky:  100;
	--itw-z-header:  200;
	--itw-z-overlay: 300;
	--itw-z-modal:   400;

	/* Tells the browser this site is light, so it stops auto darkening
	   form controls and scrollbars. */
	color-scheme: light;
}


/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--itw-header-h) + var(--itw-hd-top) + var(--itw-space-lg));
}

body {
	min-height: 100vh;
	background-color: var(--itw-bg);
	color: var(--itw-text);
	font-family: var(--itw-font-body);
	font-size: var(--itw-fs-body);
	line-height: var(--itw-lh-body);
	font-weight: var(--itw-fw-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Only fill icons that have not stated a fill of their own. A bare
   svg { fill: currentColor } beats the fill="none" attribute on outline
   marks, because CSS always outranks a presentation attribute, and it was
   turning the Instagram glyph into a solid square. */
svg:not([fill]) {
	fill: currentColor;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Browsers give buttons a border, a padding and a system background.
   Stripping them here means every component starts from nothing. */
button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--itw-border);
	margin-block: var(--itw-space-2xl);
}


/* ==========================================================================
   4. BASE TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--itw-font-heading);
	color: var(--itw-heading);
	font-weight: var(--itw-fw-bold);
	line-height: var(--itw-lh-heading);
	letter-spacing: var(--itw-ls-heading);
	text-wrap: balance;
}

h1 {
	font-size: var(--itw-fs-h1);
	line-height: var(--itw-lh-tight);
	letter-spacing: var(--itw-ls-tight);
}

h2 { font-size: var(--itw-fs-h2); }
h3 { font-size: var(--itw-fs-h3); }

h4 {
	font-size: var(--itw-fs-h4);
	font-weight: var(--itw-fw-semi);
}

h5,
h6 {
	font-size: var(--itw-fs-body);
	font-weight: var(--itw-fw-semi);
	letter-spacing: var(--itw-ls-normal);
}

p {
	text-wrap: pretty;
}

/* :where() contributes nothing to specificity, so this stays at 0,0,1 and
   every component class outranks it. Written as a:hover it would score
   0,1,1 and quietly beat rules like .itw-header__logo, which is the exact
   trap the parent theme used to spring. */
a {
	color: var(--itw-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--itw-dur-fast) var(--itw-ease);
}

a:where(:hover, :focus) {
	color: var(--itw-link-hover);
}

strong,
b {
	font-weight: var(--itw-fw-semi);
	color: var(--itw-heading);
}

small {
	font-size: var(--itw-fs-sm);
}

code,
kbd,
pre,
samp {
	font-family: var(--itw-font-mono);
	font-size: 0.9em;
}

code {
	background-color: var(--itw-accent-soft);
	border: 1px solid var(--itw-accent-border);
	border-radius: var(--itw-radius-sm);
	padding: 0.1em 0.4em;
}

pre {
	background-color: var(--itw-dark-bg);
	color: var(--itw-dark-text);
	padding: var(--itw-space-lg);
	border-radius: var(--itw-radius);
	overflow-x: auto;
	line-height: 1.6;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

blockquote {
	border-inline-start: 3px solid var(--itw-accent);
	padding-inline-start: var(--itw-space-lg);
	font-size: var(--itw-fs-lead);
	color: var(--itw-heading);
}

::selection {
	background-color: var(--itw-accent);
	color: var(--itw-on-accent);
}


/* ==========================================================================
   5. FOCUS AND ACCESSIBILITY
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--itw-focus);
	outline-offset: 3px;
	border-radius: var(--itw-radius-sm);
}

:focus:not(:focus-visible) {
	outline: none;
}

.itw-skip-link {
	position: fixed;
	inset-inline-start: var(--itw-space-md);
	inset-block-start: -100px;
	z-index: var(--itw-z-modal);
	background-color: var(--itw-midnight);
	color: var(--itw-cream);
	padding: var(--itw-space-sm) var(--itw-space-lg);
	border-radius: var(--itw-radius);
	font-weight: var(--itw-fw-medium);
	text-decoration: none;
	transition: inset-block-start var(--itw-dur) var(--itw-ease);
}

.itw-skip-link:focus {
	inset-block-start: var(--itw-space-md);
	color: var(--itw-cream);
}

.itw-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   6. LAYOUT PRIMITIVES
   ========================================================================== */

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

.itw-container--wide {
	max-width: var(--itw-container-wide);
}

.itw-container--text {
	max-width: var(--itw-container-text);
}

.itw-section {
	padding-block: var(--itw-section-y);
}

.itw-section--tight {
	padding-block: calc(var(--itw-section-y) * 0.6);
}

/* Dark section. Drop this class on any section and every child
   colour flips, including the inline logo through currentColor. */
.itw-section--dark {
	background-color: var(--itw-dark-bg);
	color: var(--itw-dark-text);
	--itw-heading: var(--itw-dark-heading);
	--itw-text: var(--itw-dark-text);
	--itw-text-muted: #A1A1AA;
	--itw-border: var(--itw-dark-line);
	--itw-surface: var(--itw-dark-surface);
	--itw-link: var(--itw-accent);
	--itw-link-hover: #F0A64A;
}

.itw-stack > * + * {
	margin-block-start: var(--itw-space-md);
}

.itw-stack--lg > * + * {
	margin-block-start: var(--itw-space-xl);
}


/* ==========================================================================
   7. FORM ELEMENTS
   Defined once here so later pages and tools inherit them for free.
   ========================================================================== */

.itw-field {
	display: block;
	margin-block-end: var(--itw-space-lg);
}

.itw-label {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: var(--itw-fs-sm);
	font-weight: var(--itw-fw-medium);
	color: var(--itw-heading);
	margin-block-end: var(--itw-space-xs);
}

.itw-input,
.itw-textarea,
.itw-select {
	width: 100%;
	background-color: var(--itw-surface);
	color: var(--itw-heading);
	border: 1px solid var(--itw-border);
	border-radius: var(--itw-radius);
	padding: 0.75rem 1rem;
	font-size: var(--itw-fs-body);
	line-height: 1.5;
	transition: border-color var(--itw-dur-fast) var(--itw-ease),
	            box-shadow var(--itw-dur-fast) var(--itw-ease);
}

.itw-textarea {
	min-height: 9rem;
	resize: vertical;
}

.itw-select {
	appearance: none;
	padding-inline-end: 2.75rem;
	cursor: pointer;
}

.itw-input::placeholder,
.itw-textarea::placeholder {
	color: var(--itw-text-muted);
	opacity: 1;
}

.itw-input:hover,
.itw-textarea:hover,
.itw-select:hover {
	border-color: var(--itw-muted);
}

.itw-input:focus,
.itw-textarea:focus,
.itw-select:focus {
	outline: none;
	border-color: var(--itw-accent);
	box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}

.itw-input[aria-invalid="true"],
.itw-textarea[aria-invalid="true"] {
	border-color: var(--itw-error);
	background-color: var(--itw-error-soft);
}

.itw-input:disabled,
.itw-textarea:disabled,
.itw-select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.itw-help {
	display: block;
	font-size: var(--itw-fs-xs);
	color: var(--itw-text-muted);
	margin-block-start: var(--itw-space-2xs);
}

.itw-error-text {
	display: block;
	font-size: var(--itw-fs-xs);
	color: var(--itw-error);
	margin-block-start: var(--itw-space-2xs);
	font-weight: var(--itw-fw-medium);
}


/* ==========================================================================
   8. BUTTONS
   Amber background always carries Midnight text, never white, because
   white on amber does not reach a safe contrast ratio.
   ========================================================================== */

.itw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--itw-space-xs);
	font-family: var(--itw-font-heading);
	font-size: var(--itw-fs-sm);
	font-weight: var(--itw-fw-semi);
	letter-spacing: var(--itw-ls-normal);
	line-height: 1;
	text-decoration: none;
	text-align: center;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--itw-radius);
	cursor: pointer;
	min-height: 48px;
	transition: background-color var(--itw-dur-fast) var(--itw-ease),
	            border-color var(--itw-dur-fast) var(--itw-ease),
	            color var(--itw-dur-fast) var(--itw-ease),
	            transform var(--itw-dur-fast) var(--itw-ease);
}

.itw-btn:active {
	transform: translateY(1px);
}

.itw-btn:disabled,
.itw-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.itw-btn--primary {
	background-color: var(--itw-accent);
	color: var(--itw-on-accent);
}

.itw-btn--primary:hover {
	background-color: var(--itw-accent-hover);
	color: var(--itw-cream);
}

.itw-btn--dark {
	background-color: var(--itw-midnight);
	color: var(--itw-cream);
}

.itw-btn--dark:hover {
	background-color: #26262E;
	color: var(--itw-cream);
}

.itw-btn--ghost {
	background-color: transparent;
	color: var(--itw-heading);
	border-color: var(--itw-border);
}

.itw-btn--ghost:hover {
	background-color: var(--itw-surface);
	border-color: var(--itw-heading);
	color: var(--itw-heading);
}

.itw-btn--lg {
	font-size: var(--itw-fs-body);
	padding: 1.05rem 2rem;
	min-height: 54px;
}

.itw-btn--block {
	width: 100%;
}


/* ==========================================================================
   9. CARDS
   ========================================================================== */

.itw-card {
	background-color: var(--itw-surface);
	border: 1px solid var(--itw-border);
	border-radius: var(--itw-radius-lg);
	padding: var(--itw-space-xl);
	transition: transform var(--itw-dur) var(--itw-ease-out),
	            box-shadow var(--itw-dur) var(--itw-ease-out),
	            border-color var(--itw-dur) var(--itw-ease-out);
}

.itw-card--lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--itw-shadow-lg);
	border-color: transparent;
}


/* ==========================================================================
   10. MOTION PRIMITIVES
   Elements start hidden only when JS is present, so a JS failure never
   leaves the page blank.
   ========================================================================== */

.js .itw-reveal {
	opacity: 0;
	transform: translateY(var(--itw-reveal-y));
	transition: opacity var(--itw-dur-slow) var(--itw-ease-out),
	            transform var(--itw-dur-slow) var(--itw-ease-out);
	will-change: opacity, transform;
}

.js .itw-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.js .itw-reveal--delay-1 { transition-delay: 80ms; }
.js .itw-reveal--delay-2 { transition-delay: 160ms; }
.js .itw-reveal--delay-3 { transition-delay: 240ms; }
.js .itw-reveal--delay-4 { transition-delay: 320ms; }


/* ==========================================================================
   11. UTILITIES
   ========================================================================== */

.itw-eyebrow {
	display: inline-block;
	font-family: var(--itw-font-heading);
	font-size: var(--itw-fs-xs);
	font-weight: var(--itw-fw-semi);
	letter-spacing: var(--itw-ls-wide);
	text-transform: uppercase;
	color: var(--itw-accent-text);
}

.itw-section--dark .itw-eyebrow {
	color: var(--itw-accent);
}

.itw-lead {
	font-size: var(--itw-fs-lead);
	line-height: var(--itw-lh-snug);
	color: var(--itw-text);
}

.itw-muted {
	color: var(--itw-text-muted);
}

.itw-text-center {
	text-align: center;
}

.itw-no-scroll {
	overflow: hidden;
}


/* ==========================================================================
   11a. COMPONENT RESET
   Only text-decoration, and nothing else.

   An earlier version of this block also reset colour, padding and
   background. Every one of those selectors scored 0,1,1 while the component
   rules below score 0,1,0, so the reset quietly won every conflict: nav
   links and the wordmark fell back to the body colour, the nav link lost
   its vertical padding and panel rows lost their hover. Anything a
   component sets for itself must not appear here.

   Buttons are already stripped by the global rule in section 3, which
   scores 0,0,1 and therefore loses to every component class as intended.
   ========================================================================== */

.itw-header a,
.itw-mobile a,
.itw-end a {
	text-decoration: none;
}

/* The legal row sits in the muted tone with the rest of the bar, rather than
   inheriting the content link colour from the base layer. */
.itw-footer__legal a { color: var(--itw-dark-muted); }
.itw-footer__legal a:hover,
.itw-footer__legal a:focus-visible { color: var(--itw-accent); }


/* ==========================================================================
   11b. HEADER COMPONENT
   Converted from the approved header draft. Nothing here restates a token.
   ========================================================================== */

/* =========================================================================
   WORD SWAP
   The label is printed twice inside a clipped box exactly one line tall.
   On hover the stack slides up by half its height, so the first copy leaves
   as the second arrives. Only transform moves, so it stays on the
   compositor and never touches layout.
   ========================================================================= */
.itw-swap {
	display: inline-block;
	block-size: 1.25em;
	overflow: hidden;
	vertical-align: top;
}

.itw-swap__stack {
	display: block;
	transition: transform 460ms var(--itw-ease-out);
}

.itw-swap__stack > span {
	display: block;
	block-size: 1.25em;
	line-height: 1.25;
	white-space: nowrap;
}

.itw-nav__link:hover .itw-swap__stack,
.itw-nav__link[aria-expanded="true"] .itw-swap__stack,
.itw-nav__link:focus-visible .itw-swap__stack,
.itw-cta:hover .itw-swap__stack,
.itw-cta:focus-visible .itw-swap__stack,
.itw-panel__all:hover .itw-swap__stack,
.itw-panel__all:focus-visible .itw-swap__stack {
	transform: translateY(-50%);
}

/* The second copy carries the accent, so the word arrives already lit
   rather than changing colour separately. */
.itw-swap__stack > span:last-child { color: var(--itw-cream); }
.itw-panel__all .itw-swap__stack > span:last-child { color: var(--itw-accent-text); }
.itw-cta .itw-swap__stack > span:last-child { color: var(--itw-cream); }

/* =========================================================================
   HEADER SHELL
   A sentinel div at the very top of the page drives the shrink, watched by
   IntersectionObserver. No scroll listener runs, so nothing fires on every
   frame and the header can never fall behind the scroll position.
   ========================================================================= */
.itw-sentinel {
	position: absolute;
	inset-block-start: 0;
	block-size: 1px;
	inline-size: 100%;
	pointer-events: none;
}

.itw-header {
	position: fixed;
	inset-block-start: var(--itw-hd-top);
	inset-inline: 0;
	z-index: var(--itw-z-header);
	padding-inline: var(--itw-gutter);
		transition: inset-block-start var(--itw-dur) var(--itw-ease-out),
	            transform 420ms var(--itw-ease-out),
	            opacity 260ms var(--itw-ease);
}

.itw-header.is-stuck { inset-block-start: var(--itw-hd-top-sm); }

/* Once the footer is properly in view there are two midnight cards on screen
   with the same shape, and the same navigation twice over. The header steps
   out rather than competing: everything it offers is already in the footer by
   that point, so nothing is lost.

   Transform only, so it stays on the compositor and tracks the scroll. */
.itw-header.is-hidden {
	transform: translateY(calc(-100% - var(--itw-hd-top) - 1rem));
	opacity: 0;
	pointer-events: none;
}

/* A keyboard user tabbing backwards must not land inside a header that is
   off screen, so focus brings it straight back. */
.itw-header.is-hidden:focus-within {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.itw-header__bar {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	inline-size: 100%;
	max-inline-size: var(--itw-hd-max);
	margin-inline: auto;
	padding: var(--itw-hd-pad) clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
	background-color: var(--itw-midnight);
	border: 1px solid var(--itw-dark-line);
	border-radius: var(--itw-radius-xl);
	box-shadow: 0 2px 10px rgba(16, 16, 20, 0.06);
	transition: padding var(--itw-dur) var(--itw-ease-out),
	            box-shadow var(--itw-dur) var(--itw-ease-out),
	            border-radius var(--itw-dur) var(--itw-ease-out),
	            background-color var(--itw-dur) var(--itw-ease);
}

/* Frosted glass, but only once the page is actually moving underneath.
   At rest there is nothing behind the bar except cream, so a translucent
   midnight just reads as a washed out grey. The bar therefore sits solid at
   the top and only opens up after the shrink, which is where the effect was
   working before. The blur is constant so nothing has to animate it. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.itw-header__bar {
		background-color: rgba(16, 16, 20, 0.98);
		-webkit-backdrop-filter: blur(20px) saturate(1.7);
		backdrop-filter: blur(20px) saturate(1.7);
	}
	.itw-header.is-stuck .itw-header__bar {
		/* 0.76 looked right against the cream page and turned mid grey once
		   the light footer scrolled under it: at that alpha the surface
		   behind contributes a quarter of the colour. This still reads as
		   glass while staying unmistakably midnight. */
		background-color: rgba(16, 16, 20, 0.9);
	}
}

/* A hairline along the top edge only. A full border reads flat, a lit top
   edge reads like a solid object under light from above. */
.itw-header__bar::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 12%;
	block-size: 1px;
	background: linear-gradient(90deg,
		transparent,
		rgba(250, 248, 245, 0.22) 20%,
		rgba(250, 248, 245, 0.28) 50%,
		rgba(250, 248, 245, 0.22) 80%,
		transparent);
	pointer-events: none;
}

.itw-header.is-stuck .itw-header__bar {
	padding-block: var(--itw-hd-pad-sm);
	border-radius: var(--itw-radius-lg);
	box-shadow: 0 10px 30px rgba(16, 16, 20, 0.16),
	            0 2px 6px rgba(16, 16, 20, 0.08);
}

/* Logo sits in the middle grid track. Because the outer tracks are both 1fr
   it stays optically centred no matter how wide the nav gets. */
.itw-header__logo {
	display: block;
	inline-size: var(--itw-hd-logo);
	color: var(--itw-cream);
	transition: inline-size var(--itw-dur) var(--itw-ease-out),
	            opacity var(--itw-dur-fast) var(--itw-ease);
}
.itw-header.is-stuck .itw-header__logo { inline-size: var(--itw-hd-logo-sm); }
.itw-header__logo:hover { opacity: 0.85; }
.itw-header__logo svg { inline-size: 100%; block-size: auto; }

/* The full lockup is the default. Below the breakpoint the icon takes over
   and the wordmark is set in live text in the middle of the bar instead, so
   the name still reads at full size without the lockup driving the height. */
.itw-logo--mark { display: none; }

/* Shown only when the SVG files are absent, so the header still reads as
   the brand rather than collapsing to nothing. */
.itw-logo-fallback {
	display: inline-block;
	font-family: var(--itw-font-heading);
	font-size: 1.125rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: var(--itw-ls-heading);
	line-height: 1;
	color: var(--itw-cream);
	white-space: nowrap;
}

.itw-header__word {
	display: none;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1;
	color: var(--itw-cream);
	white-space: nowrap;
	user-select: none;
}


.itw-header__left,
.itw-header__right {
	display: flex;
	align-items: center;
	min-inline-size: 0;
}
.itw-header__left  { justify-content: flex-start; gap: clamp(1rem, 0.4rem + 1.4vw, 2rem); }
.itw-header__right { justify-content: flex-end;   gap: clamp(0.9rem, 0.4rem + 1.2vw, 1.75rem); }

/* =========================================================================
   NAV
   ========================================================================= */
.itw-nav { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.4vw, 2rem); }

.itw-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--itw-dark-text);
	padding-block: 0.55rem;
	white-space: nowrap;
	transition: color var(--itw-dur-fast) var(--itw-ease);
}

/* Underline grows from the start edge rather than fading in. Reads as
   deliberate instead of decorative. */
.itw-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	block-size: 1.5px;
	inline-size: 100%;
	background-color: var(--itw-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--itw-dur) var(--itw-ease-out);
}
.itw-nav__link:hover,
.itw-nav__link[aria-expanded="true"] { color: var(--itw-cream); }
.itw-nav__link:hover::after,
.itw-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }

.itw-nav__chevron {
	inline-size: 10px;
	block-size: 10px;
	transition: transform var(--itw-dur) var(--itw-ease-out);
}
.itw-nav__link[aria-expanded="true"] .itw-nav__chevron { transform: rotate(180deg); }

/* =========================================================================
   SERVICES PANEL
   A light panel on the dark bar. The contrast flip is what makes it feel
   like a separate surface rather than a list hanging off the header.
   ========================================================================= */
.itw-has-panel { position: relative; }

.itw-panel {
	position: absolute;
	inset-block-start: calc(100% + 1.15rem);
	inset-inline-start: -1rem;
	inline-size: min(840px, calc(100vw - 3rem));
	padding: 1.35rem;
	background-color: var(--itw-cream);
	border: 1px solid rgba(217, 119, 6, 0.22);
	border-radius: var(--itw-radius-lg);

	/* The amber ring is a second shadow at zero blur rather than a thicker
	   border, so it can be tinted independently of the frame and does not
	   add a pixel to the box. */
	box-shadow:
		0 0 0 1px rgba(217, 119, 6, 0.07),
		0 20px 48px rgba(16, 16, 20, 0.16),
		0 4px 12px rgba(16, 16, 20, 0.07);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--itw-dur) var(--itw-ease-out),
	            transform var(--itw-dur) var(--itw-ease-out),
	            visibility 0s linear var(--itw-dur);
}

.itw-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* Invisible bridge so the pointer can cross the gap without the panel
   closing underneath it. */
.itw-panel::before {
	content: "";
	position: absolute;
	inset-block-start: -1.15rem;
	inset-inline: 0;
	block-size: 1.15rem;
}

/* An amber filament along the top edge. It fades out at both ends so it
   reads as light catching the rim rather than as a drawn line. */
.itw-panel::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 10%;
	block-size: 1px;
	background: linear-gradient(90deg,
		transparent,
		rgba(217, 119, 6, 0.55) 30%,
		rgba(217, 119, 6, 0.8) 50%,
		rgba(217, 119, 6, 0.55) 70%,
		transparent);
	pointer-events: none;
}

/* Frosted, so the dark bar and the page tint the panel instead of it
   sitting on top as an opaque card. Applied only where support exists;
   everywhere else the solid cream above stays in place. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.itw-panel {
		background-color: rgba(250, 248, 245, 0.88);
		-webkit-backdrop-filter: blur(40px) saturate(1.9);
		backdrop-filter: blur(40px) saturate(1.9);
	}
	.itw-panel__item:hover { background-color: rgba(255, 255, 255, 0.72); }
}

.itw-panel__body {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 1.35rem;
}

.itw-panel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.15rem 0.6rem;
	align-content: start;
}

/* Items rise in sequence once the panel is open. The delays are short and
   close together, so the group still reads as one movement rather than six
   separate entrances. */
.itw-panel__item {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 340ms var(--itw-ease-out),
	            transform 340ms var(--itw-ease-out),
	            background-color var(--itw-dur) var(--itw-ease),
	            box-shadow var(--itw-dur) var(--itw-ease);
}
.itw-panel.is-open .itw-panel__item { opacity: 1; transform: none; }
.itw-panel.is-open .itw-panel__item:nth-child(1) { transition-delay: 60ms; }
.itw-panel.is-open .itw-panel__item:nth-child(2) { transition-delay: 100ms; }
.itw-panel.is-open .itw-panel__item:nth-child(3) { transition-delay: 140ms; }
.itw-panel.is-open .itw-panel__item:nth-child(4) { transition-delay: 180ms; }
.itw-panel.is-open .itw-panel__item:nth-child(5) { transition-delay: 220ms; }
.itw-panel.is-open .itw-panel__item:nth-child(6) { transition-delay: 260ms; }

/* ---- Feature column ---- */
.itw-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.15rem;
	border-radius: var(--itw-radius);
	background-color: var(--itw-midnight);
	color: var(--itw-dark-text);
	overflow: hidden;
	isolation: isolate;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 380ms var(--itw-ease-out), transform 380ms var(--itw-ease-out);
}
.itw-panel.is-open .itw-feature { opacity: 1; transform: none; transition-delay: 120ms; }

/* Two layers behind the card. A fixed grid gives the surface something to
   measure the movement against, and an amber light drifts across it on a
   long loop. Either one alone reads as flat; together the card has depth.
   Both animate on transform only, so neither costs layout. */
.itw-feature::after {
	content: "";
	position: absolute;
	inset: -20%;
	background-image:
		linear-gradient(to right, rgba(250, 248, 245, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(250, 248, 245, 0.05) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 72%);
	animation: itw-grid 24s linear infinite;
	z-index: -2;
	pointer-events: none;
}

.itw-feature::before {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-start: -20%;
	inline-size: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.45) 0%, transparent 68%);
	animation: itw-drift 14s var(--itw-ease) infinite;
	z-index: -1;
	pointer-events: none;
}

@keyframes itw-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(38%, 26%) scale(1.25); }
}

/* One full tile of travel, then it repeats seamlessly. */
@keyframes itw-grid {
	from { transform: translate(0, 0); }
	to   { transform: translate(26px, 26px); }
}

.itw-feature__eyebrow {
	font-family: var(--itw-font-heading);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--itw-accent);
}

.itw-feature__title {
	font-family: var(--itw-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--itw-dark-heading);
	margin-block-start: 0.5rem;
}

.itw-feature__text {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--itw-dark-text);
	margin-block-start: 0.45rem;
}

.itw-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--itw-accent);
}
.itw-feature__link svg {
	inline-size: 12px;
	block-size: 12px;
	transition: transform var(--itw-dur) var(--itw-ease-out);
}
.itw-feature:hover .itw-feature__link svg { transform: translate(2px, -2px); }

.itw-panel__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.7rem;
	align-items: start;
	padding: 0.65rem 0.7rem;
	border-radius: var(--itw-radius);
	transition: background-color var(--itw-dur) var(--itw-ease),
	            box-shadow var(--itw-dur) var(--itw-ease);
}
.itw-panel__item:hover { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.18); }

/* ---- Service icons ----
   Each mark sits on its own tile so the column has a hard left edge to read
   down. The tile carries the colour change, which means the icon itself only
   ever has to move. */
.itw-panel__icon {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 9px;
	background-color: rgba(16, 16, 20, 0.05);
	color: var(--itw-midnight);
	transition: background-color var(--itw-dur) var(--itw-ease),
	            color var(--itw-dur) var(--itw-ease);
}

.itw-panel__icon svg {
	inline-size: 17px;
	block-size: 17px;
	overflow: visible;
}

.itw-panel__item:hover .itw-panel__icon {
	background-color: var(--itw-accent);
	color: var(--itw-cream);
}

/* Every mark is drawn from the same two primitives: one part that travels
   and one that stays. Giving each icon its own gesture stops the row from
   feeling like six copies of a single hover. */
.itw-panel__icon [data-slide],
.itw-panel__icon [data-rise],
.itw-panel__icon [data-turn],
.itw-panel__icon [data-grow],
.itw-panel__icon [data-pulse] {
	transition: transform 420ms var(--itw-ease-out), opacity 420ms var(--itw-ease-out);
	transform-origin: center;
}

.itw-panel__item:hover [data-slide]  { transform: translateX(2.4px); }
.itw-panel__item:hover [data-rise]   { transform: translateY(-2.4px); }
.itw-panel__item:hover [data-turn]   { transform: rotate(90deg); }
.itw-panel__item:hover [data-grow]   { transform: scale(1.18); }
.itw-panel__item:hover [data-pulse]  { opacity: 1; transform: scale(1.1); }

.itw-panel__icon [data-pulse] { opacity: 0.45; }

/* Bars that stagger upward, used by the ranking mark. */
.itw-panel__icon [data-bar] {
	transition: transform 420ms var(--itw-ease-out);
	transform-origin: bottom;
}
.itw-panel__item:hover [data-bar="1"] { transform: scaleY(1.5); }
.itw-panel__item:hover [data-bar="2"] { transform: scaleY(1.3); transition-delay: 60ms; }
.itw-panel__item:hover [data-bar="3"] { transform: scaleY(1.15); transition-delay: 120ms; }
.itw-panel__item:hover { background-color: var(--itw-white); }

.itw-panel__name {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-block-size: 1.2rem;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--itw-midnight);
	line-height: 1.3;
}

.itw-panel__arrow {
	inline-size: 12px;
	block-size: 12px;
	color: var(--itw-accent);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--itw-dur) var(--itw-ease-out),
	            transform var(--itw-dur) var(--itw-ease-out);
}
.itw-panel__item:hover .itw-panel__arrow { opacity: 1; transform: translateX(0); }

.itw-panel__desc {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--itw-muted);
	margin-block-start: 0.15rem;
}

.itw-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 1.1rem;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var(--itw-line);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 340ms var(--itw-ease-out), transform 340ms var(--itw-ease-out);
}
.itw-panel.is-open .itw-panel__foot {
	opacity: 1;
	transform: none;
	transition-delay: 300ms;
}

.itw-panel__note {
	font-size: 0.8125rem;
	color: var(--itw-muted);
}

.itw-panel__all {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--itw-accent-text);
	white-space: nowrap;
}
.itw-panel__all svg { inline-size: 12px; block-size: 12px; transition: transform var(--itw-dur) var(--itw-ease-out); }
.itw-panel__all:hover svg { transform: translateX(3px); }

/* =========================================================================
   AVAILABILITY PILL
   ========================================================================= */
.itw-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	block-size: var(--itw-hd-control);
	padding: 0 0.95rem 0 0.8rem;
	border-radius: var(--itw-radius-full);
	background-color: rgba(250, 248, 245, 0.03);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	color: var(--itw-dark-text);
	white-space: nowrap;

	/* The ring is drawn as a shadow rather than a border so it can carry a
	   warmer tint on the leading edge, where the dot sits, and cool off
	   toward the end of the label. A flat border cannot do that. */
	box-shadow:
		inset 1px 0 0 rgba(217, 119, 6, 0.3),
		inset 0 0 0 1px rgba(250, 248, 245, 0.09);
}

/* One colour, one weight. Splitting the label into a bright state and a
   muted qualifier looked correct on paper and failed in practice: the eye
   compares the two halves against each other, so the quieter half reads as
   faded no matter what its measured contrast against the pill is. */

.itw-status__dot {
	position: relative;
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background-color: var(--itw-accent);
	box-shadow: 0 0 10px rgba(217, 119, 6, 0.7);
}

/* One ring, slow, on a long rest. The earlier version stacked a pulsing
   glow, two rings and a sheen across the pill, which is a lot of movement
   for an element this size. A single ring on a quiet dot reads as live
   without asking for attention. */
.itw-status__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--itw-accent);
	animation: itw-radar 4s var(--itw-ease-out) infinite;
}

@keyframes itw-radar {
	0%           { transform: scale(1); opacity: 0.65; }
	45%          { opacity: 0; }
	45.01%, 100% { transform: scale(3.2); opacity: 0; }
}

/* =========================================================================
   CTA
   Amber fill always carries midnight text. White on amber does not reach a
   safe contrast ratio.
   ========================================================================= */
.itw-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	color: var(--itw-midnight);
	background-color: var(--itw-accent);
	block-size: var(--itw-hd-control);
	padding: 0 1.15rem 0 0.28rem;
	border-radius: var(--itw-radius-full);
	white-space: nowrap;

	box-shadow:
		inset 0 1px 0 rgba(255, 252, 245, 0.22),
		0 1px 2px rgba(120, 63, 4, 0.14),
		0 4px 10px rgba(120, 63, 4, 0.12),
		0 10px 24px rgba(120, 63, 4, 0.1);

	transition: box-shadow var(--itw-dur) var(--itw-ease-out);
}

/* The badge is a dark disc carrying the mark, the same trick that makes the
   reference button read as an object rather than a label. Sizing it from the
   control height keeps it centred no matter what that height becomes. */
.itw-cta__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: calc(var(--itw-hd-control) - 10px);
	block-size: calc(var(--itw-hd-control) - 10px);
	border-radius: 50%;
	background-color: var(--itw-midnight);
	color: var(--itw-accent);
}

.itw-cta__badge svg {
	inline-size: 13px;
	block-size: 13px;
}

/* Nothing on the button moves and nothing changes colour. The whole hover
   is carried by the word sliding up, which is why the incoming copy has to
   arrive in a different colour to register at all. */
.itw-cta:active {
	box-shadow:
		inset 0 1px 0 rgba(255, 252, 245, 0.16),
		0 1px 2px rgba(120, 63, 4, 0.14);
	transition-duration: var(--itw-dur-fast);
}

/* The label is one flex item, so the gap only ever sits between text and
   arrow. Keeping it a single element also stops the words drifting apart
   when the responsive rule hides part of the label. */
.itw-cta__label {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}

/* =========================================================================
   BURGER
   ========================================================================= */
.itw-burger {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	margin-inline-start: -0.4rem;
	border-radius: var(--itw-radius-full);
	color: var(--itw-cream);
	border: 1px solid rgba(250, 248, 245, 0.12);
	background-color: rgba(250, 248, 245, 0.04);
	transition: border-color var(--itw-dur) var(--itw-ease),
	            background-color var(--itw-dur) var(--itw-ease);
}

.itw-burger:hover,
.itw-burger[aria-expanded="true"] {
	border-color: rgba(217, 119, 6, 0.5);
	background-color: rgba(217, 119, 6, 0.1);
}

.itw-burger__box { position: relative; inline-size: 20px; block-size: 14px; }

.itw-burger__box span {
	position: absolute;
	inset-inline: 0;
	block-size: 1.5px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--itw-dur) var(--itw-ease-out),
	            opacity var(--itw-dur-fast) var(--itw-ease);
}
.itw-burger__box span:nth-child(1) { inset-block-start: 0; }
.itw-burger__box span:nth-child(2) { inset-block-start: 6.25px; }
.itw-burger__box span:nth-child(3) { inset-block-start: 12.5px; }

.itw-burger[aria-expanded="true"] .itw-burger__box span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.itw-burger[aria-expanded="true"] .itw-burger__box span:nth-child(2) { opacity: 0; }
.itw-burger[aria-expanded="true"] .itw-burger__box span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* =========================================================================
   MOBILE MENU
   ========================================================================= */
/* The menu used to fade in, which reads as thin because nothing actually
   moves. A downward wipe gives it a direction and an edge, so it arrives as
   a surface rather than appearing out of nowhere. clip-path is animated
   here, which stays off the layout path. */
.itw-mobile {
	position: fixed;
	inset: 0;
	z-index: calc(var(--itw-z-header) - 10);
	display: flex;
	flex-direction: column;
	padding: calc(var(--itw-header-h, 56px) + var(--itw-hd-top) + 1.5rem) var(--itw-gutter) 2rem;
	background-color: #131318;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 620ms var(--itw-ease-out),
	            visibility 0s linear 620ms;
}

.itw-mobile.is-open {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path 620ms var(--itw-ease-out),
	            visibility 0s linear 0s;
}

/* A single soft amber wash in the upper corner. Flat black reads heavy and
   cheap. One barely visible light source is enough to give the panel depth
   without becoming a gradient. */
.itw-mobile::before {
	content: "";
	position: absolute;
	inset-block-start: -20%;
	inset-inline-end: -25%;
	inline-size: 85%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.13) 0%, transparent 68%);
	pointer-events: none;
}

.itw-mobile > * { position: relative; }

.itw-mobile__list { list-style: none; padding: 0; }

.itw-mobile__list > li {
	border-block-end: 1px solid rgba(250, 248, 245, 0.07);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 460ms var(--itw-ease-out), transform 460ms var(--itw-ease-out);
}
.itw-mobile.is-open .itw-mobile__list > li { opacity: 1; transform: none; }

/* Items trail the wipe instead of racing it. The first one starts once the
   surface is roughly a third of the way down, which is why the sequence
   feels like one movement rather than two. */
.itw-mobile.is-open .itw-mobile__list > li:nth-child(1) { transition-delay: 170ms; }
.itw-mobile.is-open .itw-mobile__list > li:nth-child(2) { transition-delay: 235ms; }
.itw-mobile.is-open .itw-mobile__list > li:nth-child(3) { transition-delay: 300ms; }
.itw-mobile.is-open .itw-mobile__list > li:nth-child(4) { transition-delay: 365ms; }

.itw-mobile__foot {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 460ms var(--itw-ease-out), transform 460ms var(--itw-ease-out);
}
.itw-mobile.is-open .itw-mobile__foot {
	opacity: 1;
	transform: none;
	transition-delay: 430ms;
}

.itw-mobile__link {
	display: flex;
	align-items: center;
	gap: 0;
	inline-size: 100%;
	padding: 0.95rem 0;
	font-family: var(--itw-font-heading);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--itw-dark-heading);
	text-align: start;
}

/* The numbers sit in a fixed column rather than a flex gap. A gap lets each
   label start wherever its number happens to end, so the words drift out of
   line with one another. A set width gives every row the same start edge. */
.itw-mobile__num {
	flex: none;
	inline-size: 2.35rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--itw-accent);
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
	align-self: center;
}

.itw-mobile__label { flex: 1 1 auto; }

.itw-mobile__link svg {
	flex: none;
	align-self: center;
	inline-size: 12px;
	block-size: 12px;
	color: var(--itw-dark-muted);
	transition: transform var(--itw-dur) var(--itw-ease-out),
	            color var(--itw-dur-fast) var(--itw-ease);
}
.itw-mobile__link[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--itw-accent); }

.itw-mobile__sub {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--itw-dur) var(--itw-ease-out);
}
.itw-mobile__sub > div { overflow: hidden; min-block-size: 0; }

/* inert only blocks interaction, it does not hide anything, so the closed
   state still needs its own visual rule. */
[inert] { cursor: default; }
.itw-mobile__sub.is-open { grid-template-rows: 1fr; }

.itw-mobile__subinner {
	padding: 0.2rem 0 1rem 1.15rem;
	border-inline-start: 1px solid rgba(250, 248, 245, 0.08);
	margin-inline-start: 1.2rem;
}

.itw-mobile__sublink {
	display: block;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	color: var(--itw-dark-text);
	transition: color var(--itw-dur-fast) var(--itw-ease),
	            transform var(--itw-dur) var(--itw-ease-out);
}
.itw-mobile__sublink:hover,
.itw-mobile__sublink:focus-visible { color: var(--itw-accent); transform: translateX(3px); }

/* auto pushed the block to the very bottom of the viewport, which on a tall
   phone left a large dead gap under four short items. A clamped gap keeps
   the group together while still separating it from the list. */
.itw-mobile__foot {
	margin-block-start: clamp(2rem, 7vh, 3.75rem);
	padding-block-start: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.itw-mobile__foot .itw-cta {
	justify-content: center;
	block-size: auto;
	padding: 0.5rem 1.4rem 0.5rem 0.5rem;
	font-size: 0.9375rem;
}
.itw-mobile__foot .itw-cta__badge { inline-size: 34px; block-size: 34px; }
.itw-mobile__foot .itw-cta__badge svg { inline-size: 15px; block-size: 15px; }

.itw-mobile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid rgba(250, 248, 245, 0.07);
}

.itw-mobile__mail { font-size: 0.875rem; color: var(--itw-dark-text); }
.itw-mobile__mail:hover { color: var(--itw-accent); }

.itw-mobile__status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.75rem;
	color: var(--itw-dark-muted);
	white-space: nowrap;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1180px) {
	.itw-panel { inline-size: min(680px, calc(100vw - 3rem)); }
	.itw-panel__body { grid-template-columns: minmax(0, 1fr); }
	.itw-feature { flex-direction: row; align-items: center; gap: 1.25rem; }
}

@media (max-width: 1080px) {
	.itw-header__left .itw-nav { display: none; }
	.itw-header__right .itw-status { display: none; }
	.itw-burger { display: inline-flex; }
}

/* Below this width the full lockup plus a full CTA label cannot share a
   line at 360px without crowding, so the lockup steps aside for the icon. */
@media (max-width: 620px) {
	:root {
		--itw-hd-logo: 30px;
		--itw-hd-logo-sm: 27px;
		--itw-hd-pad: 0.5rem;
		--itw-hd-pad-sm: 0.4rem;
		--itw-hd-top: 0.9rem;
		--itw-hd-top-sm: 0.55rem;
	}

	/* Two elements instead of three. Grid placement moves the icon to the
	   start edge and the burger to the end edge without touching source
	   order. The CTA leaves the bar and lives in the menu, where it gets
	   full width and reads as the closing action. */
	.itw-header__bar {
		grid-template-columns: auto 1fr auto;
		gap: 0.75rem;
		padding-inline: 0.85rem;
		border-radius: var(--itw-radius-lg);
	}
	.itw-logo--full { display: none; }
	.itw-logo--mark { display: block; }

	/* Both tracks must name their row. The burger comes first in the source,
	   so once it is placed in column 3 the auto placement cursor has already
	   moved past column 1, and the logo gets pushed onto a second row. That
	   is what was making the bar tall with the mark sitting low. */
	.itw-header__logo { grid-area: 1 / 1; justify-self: start; }
	.itw-header__left { grid-area: 1 / 3; justify-self: end; }

	/* The middle track was reading as a hole. A lone status dot floating in
	   it looked like a stray element, so the name goes there instead. Set as
	   live text rather than a second SVG, it stays crisp at any size and
	   costs nothing to render. */
	.itw-header__word {
		display: block;
		grid-area: 1 / 2;
		justify-self: center;
	}
	.itw-header__right { display: none; }

	.itw-burger { inline-size: 36px; block-size: 36px; margin-inline: 0 -0.2rem; }
}

@media (max-width: 380px) {
	.itw-header__word { font-size: 0.875rem; }
}

/* =========================================================================
   PAGE TRANSITIONS
   Handled by the browser through the View Transitions API, so there is no
   library and no JavaScript involved. The old page lifts and fades, the new
   one rises into place, and the header is pinned by its own transition name
   so it never blinks between pages.

   Browsers without support simply navigate normally and pick up the
   fallback below instead.
   ========================================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root) {
	animation: itw-page-out 200ms var(--itw-ease) both;
}
::view-transition-new(root) {
	animation: itw-page-in 460ms var(--itw-ease-out) both;
}

@keyframes itw-page-out {
	to { opacity: 0; transform: translateY(-10px); }
}
@keyframes itw-page-in {
	from { opacity: 0; transform: translateY(18px); }
}

/* Pinning the header. Giving it its own name lifts it out of the root
   snapshot, and killing its animation keeps it perfectly still. */
.itw-header { view-transition-name: itw-header; }

::view-transition-old(itw-header),
::view-transition-new(itw-header) {
	animation: none;
	mix-blend-mode: normal;
}

/* Fallback for browsers with no View Transitions support. Content rises on
   load, which reads as the same movement without the crossfade. This targets
   the real page element, not the placeholder the draft used. */
@supports not (view-transition-name: none) {
	.itw-site {
		animation: itw-page-in 500ms var(--itw-ease-out) both;
	}
}

/* ==========================================================================
   11c. TAP HIGHLIGHT
   ========================================================================== */

.itw-header,
.itw-mobile { -webkit-tap-highlight-color: transparent; }


/* ==========================================================================
   11d. PAGE SHELL
   The header is fixed, so the document needs clearance for it. Using the
   measured height rather than a guess keeps the gap correct when the bar
   shrinks or the CTA label wraps at a narrow width.
   ========================================================================== */

/* Opaque and above the pinned band at the end of the document, or the
   wordmark would show through the page the whole way down. */
.itw-site {
	position: relative;
	z-index: 2;
	display: block;
	background-color: var(--itw-cream);
	padding-block-start: calc(var(--itw-header-h) + var(--itw-hd-top) + var(--itw-space-xl));
}


/* ==========================================================================
   11g. FOOTER
   Converted from the approved footer draft. Nothing here restates a token.
   ========================================================================== */

/* =========================================================================
   REVEAL MECHANISM

   Only the wordmark is pinned. It sits fixed at the bottom of the viewport
   behind everything, and the page and the footer panel above it are both
   opaque, so it stays hidden until they scroll clear of it. A spacer at the
   end of the document, sized to the strip, is what gives them room to move.

   The result reads as a curtain drawing back off something that was already
   there, and it works in both directions because nothing is being animated.
   ========================================================================= */
/* The header is a floating midnight pill with rounded corners and a lit top
   edge. The footer answers it: same surface, same radius, same hairline,
   arriving from the other end of the page. */
/* The light surface the card sits on. Its top corners are the ones that
   round against the page, at the outer edges, which is the only place a
   curve has anything different behind it to read against. The band below
   carries no corners at all: it runs to the bottom of the screen. */
.itw-end {
	position: relative;
	z-index: 2;
	padding-block: var(--itw-gutter) 0;
	border-start-start-radius: 28px;
	border-start-end-radius: 28px;
	background: linear-gradient(180deg, #EFEAE1 0%, #F3EFE7 100%);
}

.itw-footer {
	position: relative;
	z-index: 2;
	background: var(--itw-midnight);
	color: var(--itw-dark-text);

	/* Inset on every side, so all four corners have something different
	   behind them. Full bleed hides the top pair: a rounded corner only
	   exists where the surface behind it differs, and behind a full width
	   footer there was only more of the same colour. */
	inline-size: min(var(--itw-container), 100% - (var(--itw-gutter) * 2));
	margin-inline: auto;
	border-radius: 28px;

	/* Wide and soft, so the card sits above the paper rather than being
	   pressed onto it. */
	box-shadow:
		0 2px 6px rgba(16, 16, 20, 0.06),
		0 18px 50px rgba(16, 16, 20, 0.16);
}

/* Same filament as the header bar. A full border reads flat; a lit top edge
   reads like a solid object under light from above. */
.itw-footer::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 16%;
	block-size: 1px;
	background: linear-gradient(90deg,
		transparent,
		rgba(250, 248, 245, 0.22) 20%,
		rgba(250, 248, 245, 0.28) 50%,
		rgba(250, 248, 245, 0.22) 80%,
		transparent);
	pointer-events: none;
	z-index: 4;
}

.itw-stage-spacer {
	/* Exactly the band, nothing more. The extra gutter that used to be here
	   is what left a pale gap between the card and the letters. */
	block-size: var(--itw-stage-h, 200px);
	pointer-events: none;
}

.itw-stage {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	pointer-events: none;

	/* Full width and flush to the bottom edge, rounded only where it meets
	   the page: the two upper corners. The lower pair sits off screen and
	   the sides have nothing beside them to curve away from.

	   No height of its own either. The band is exactly as tall as the word
	   inside it, so nothing sits below the letters. */
	/* The wordmark is sized from this box, so the container has to be the
	   band rather than the card above it. */
	container-type: inline-size;

	/* Picks up exactly where the section above leaves off, so the two read
	   as one surface with the card lying on it. */
	background: linear-gradient(180deg,
		#F3EFE7 0%,
		#F8F4EC 45%,
		#FBF3E6 100%);
}

/* Fine static grain, behind the letters. It was sitting at z-index 2, on
   top of them, and multiplying: that is what was making the word look soft
   and dragging the amber toward brown. Grain belongs on the surface, not on
   the type. */
.itw-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.3;
	mix-blend-mode: multiply;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* Below this the strip is a fixed height rather than a share of the screen.
   dvh moves as the address bar does, the spacer is measured from the strip,
   and a spacer that changes height mid scroll makes the document jump under
   your finger. A constant sidesteps it, and the effect itself stays on. */
@media (max-width: 700px) {
	.itw-end { border-start-start-radius: 22px; border-start-end-radius: 22px; }
	.itw-footer { border-radius: 22px; }
}

/* =========================================================================
   WORD SWAP IN THE FOOTER
   The component itself already exists in section 11b for the header nav.
   Only the pieces specific to this context are added here.
   ========================================================================= */
.itw-footer .itw-swap__stack > span:last-child { color: var(--itw-dark-heading); }

.itw-footer__link:hover .itw-swap__stack,
.itw-footer__link:focus-visible .itw-swap__stack { transform: translateY(-50%); }


/* =========================================================================
   FOOTER CONTENT
   ========================================================================= */
.itw-footer__inner { position: relative; z-index: 3; padding-block-start: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); }

.itw-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem);
	padding-block-end: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}

/* ---- Brand column ---- */
/* The same lockup the header uses, so the two ends of the page carry the
   identical mark. The wordmark inherits currentColor, so cream here and
   midnight up there without a second file. */
.itw-footer__mark {
	display: block;
	inline-size: 158px;
	max-inline-size: 100%;
	margin-block-end: 1rem;
	color: var(--itw-cream);
	transition: opacity var(--itw-dur) var(--itw-ease);
}
.itw-footer__mark:hover { opacity: 0.85; }
.itw-footer__mark svg { inline-size: 100%; block-size: auto; }

.itw-footer__blurb {
	max-inline-size: 36ch;
	font-size: 0.8125rem;
	line-height: 1.65;
	margin-block-start: 0.7rem;
	color: var(--itw-dark-muted);
}

.itw-dot {
	position: relative;
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--itw-accent);
	box-shadow: 0 0 10px rgba(217, 119, 6, 0.7);
}
.itw-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--itw-accent);
	animation: itw-radar 4s var(--itw-ease-out) infinite;
}
@keyframes itw-radar {
	0%           { transform: scale(1); opacity: 0.65; }
	45%          { opacity: 0; }
	45.01%, 100% { transform: scale(3.2); opacity: 0; }
}

/* ---- Tagline, blurb and proof ----
   Three plain statements of fact where the countdown was. They fill the
   space without asserting anything that has to be kept true later, which is
   the trap with urgency: a visitor who returns a week on, finds the same
   offer still running, and stops believing the rest of the page. */
.itw-footer__tagline {
	font-family: var(--itw-font-heading);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--itw-dark-heading);
	margin-block-start: 1.4rem;
}

.itw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block-start: 1.2rem;
}

.itw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--itw-radius-full);
	background: rgba(250, 248, 245, 0.03);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.08);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--itw-dark-muted);
	white-space: nowrap;
}

.itw-chip svg {
	inline-size: 11px;
	block-size: 11px;
	color: var(--itw-accent);
	flex: none;
}


/* ---- Link columns ---- */
.itw-footer__col h3 {
	font-family: var(--itw-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--itw-dark-muted);
	margin-block-end: 0.7rem;
}

.itw-footer__list { list-style: none; padding: 0; }

.itw-footer__link {
	position: relative;
	display: inline-block;
	padding-block: 0.2rem;
	font-size: 0.9rem;
	color: var(--itw-dark-text);
}

/* Underline grows from the start edge rather than fading in, matching the
   header nav so the two read as one system. */
.itw-footer__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0.15rem;
	inset-inline-start: 0;
	block-size: 1px;
	inline-size: 100%;
	background: var(--itw-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--itw-dur) var(--itw-ease-out);
}
.itw-footer__link:hover::after,
.itw-footer__link:focus-visible::after { transform: scaleX(1); }

/* A flex column rather than inline flow. As inline elements the email and
   the phone sat side by side wherever they happened to fit, which put them
   on one line on a phone. */
.itw-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
	font-size: 0.9rem;
	color: var(--itw-dark-text);
	line-height: 1.7;
}
.itw-footer__meta span { color: var(--itw-dark-muted); font-size: 0.875rem; }

/* ---- Social ---- */
.itw-social { display: flex; gap: 0.45rem; margin-block-start: 1rem; }

.itw-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: var(--itw-radius-full);
	color: var(--itw-dark-muted);
	background: rgba(250, 248, 245, 0.04);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.09);
	overflow: hidden;
	transition: background-color var(--itw-dur) var(--itw-ease),
	            box-shadow var(--itw-dur) var(--itw-ease);
}
.itw-social a:hover,
.itw-social a:focus-visible {
	background: rgba(217, 119, 6, 0.1);
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.45);
}

/* The same slide the links use, applied to a mark instead of a word. Two
   copies stacked in a clipped box, the second already amber, so the icon is
   replaced rather than recoloured. */
.itw-social__swap {
	display: block;
	block-size: 16px;
	overflow: hidden;
}

.itw-social__stack {
	display: block;
	transition: transform 460ms var(--itw-ease-out);
}

.itw-social__stack svg {
	inline-size: 16px;
	block-size: 16px;
}

.itw-social__stack svg:last-child { color: var(--itw-accent); }

.itw-social a:hover .itw-social__stack,
.itw-social a:focus-visible .itw-social__stack { transform: translateY(-50%); }

/* ---- Bottom bar ---- */
.itw-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-block: 1rem;
	border-block-start: 1px solid var(--itw-dark-line);
	font-size: 0.8125rem;
	color: var(--itw-dark-muted);
}

.itw-clocks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.35rem; }
.itw-clock { display: inline-flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; }
.itw-clock__city { font-family: var(--itw-font-heading); font-weight: 600; color: var(--itw-dark-text); }
/* Tabular figures are not optional once seconds are running: proportional
   digits change width as they tick and the whole row jitters. */
.itw-clock__time {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	color: var(--itw-dark-muted);
}
.itw-clock--home .itw-clock__time { color: var(--itw-cream); }
.itw-clock--home .itw-dot { align-self: center; }
.itw-clocks__sep { inline-size: 1px; block-size: 13px; background: var(--itw-dark-line); }

.itw-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.itw-footer__legal a { transition: color var(--itw-dur-fast) var(--itw-ease); }
.itw-footer__legal a:hover { color: var(--itw-accent); }

/* =========================================================================
   WORDMARK AND GLOW

   The glow sits behind the letters rather than on them. Putting the light
   on the type itself gives a neon sign; putting it behind makes the type
   stand in front of a light source, which is the difference between loud
   and cinematic.
   ========================================================================= */

.itw-glow {
	position: absolute;
	z-index: 0;
	inset-inline: -14%;
	inset-block-end: -30%;
	block-size: 165%;

	/* On paper the glow works by warming rather than lighting, so it is
	   deeper in colour than the dark version was. Raising the brightness
	   here would only wash the surface out. */
	background: radial-gradient(ellipse 56% 100% at 50% 100%,
		rgba(217, 119, 6, 0.30) 0%,
		rgba(180, 83, 9, 0.14) 40%,
		rgba(120, 63, 4, 0.05) 62%,
		transparent 78%);
	filter: blur(36px);
	pointer-events: none;
	animation: itw-breathe 22s var(--itw-ease) infinite;
	will-change: transform, opacity;
}

.itw-stage:not(.is-live) .itw-glow,
.itw-stage:not(.is-live) .itw-wordmark { animation-play-state: paused; }

@keyframes itw-breathe {
	0%, 100% { transform: scale(1) translateY(0);     opacity: 0.8; }
	50%      { transform: scale(1.1) translateY(-2%); opacity: 1; }
}

.itw-wordmark {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	font-family: var(--itw-font-heading);
	font-weight: 900;
	/* Sized against the card, not the viewport. The card is narrower than
	   the screen, so a vw value overflowed it and clipped the last letter.
	   cqw measures the container instead.

	   The multiplier here is a starting point; the script below corrects it
	   from the real rendered width, because the exact figure depends on the
	   font's metrics and cannot be known until Satoshi has actually loaded. */
	font-size: var(--itw-mark-size, 17cqw);
	line-height: 0.78;
	letter-spacing: -0.045em;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	/* No negative pull any more. The band is sized by this box, so trimming
	   the bottom here would simply make the band shorter and cut the
	   letters rather than crop them against an edge. */
	margin-block: 0;

	/* The letters are filled with light rather than colour: brightest along
	   the top edge and falling away toward the baseline, so they read as
	   catching the glow below rather than being painted on. The extruded
	   version this replaces was doing the opposite, drawing attention to
	   the effect instead of the word.

	   The first layer is a slow highlight travelling across; the second is
	   the standing gradient. */
	/* Inverted for the light surface: the letters are now a shade pressed
	   into the paper rather than light lifted out of the dark. Deepest along
	   the top edge and lightening toward the baseline, which is the same
	   falloff read the other way round.

	   The first layer is a slow highlight travelling across; the second is
	   the standing gradient. */
	color: transparent;
	background-image:
		linear-gradient(100deg,
			transparent 38%,
			rgba(255, 255, 255, 0.3) 50%,
			transparent 62%),
		linear-gradient(180deg,
			rgba(16, 16, 20, 0.23) 0%,
			rgba(16, 16, 20, 0.235) 52%,
			rgba(16, 16, 20, 0.25) 100%);
	background-size: 220% 100%, 100% 100%;
	background-position: -110% 0, 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	animation: itw-sheen 11s var(--itw-ease-out) infinite;
}

/* Long pause between passes. A highlight that comes round often stops
   reading as light and starts reading as a loop. */
@keyframes itw-sheen {
	0%        { background-position: -110% 0, 0 0; }
	38%, 100% { background-position:  210% 0, 0 0; }
}

/* Full strength #D97706, the logo amber itself. Both earlier attempts went
   wrong in opposite directions: #D97706 held back to 56% lightens into a
   tan, and #B45309 pushed to 80% renders around #C0722F, which is brown.
   At full strength the accent renders as exactly the brand value, and
   measures about 1.8 times the grey letters around it. */
/* Solid, and painted as a colour rather than a clipped background.

   Every alpha version of this leaked. The parent clips its own background to
   all of its text, descendants included, so anything left transparent in the
   accent let the sheen and the glow behind show through the letterforms.
   That is why the o kept looking lighter than the T and picked up an edge.
   A flat colour cannot leak, and it renders as the exact brand value. */
.itw-wordmark em {
	font-style: normal;
	color: var(--itw-accent);
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

/* The wordmark rises as the footer comes clear, then stays put. */
.js .itw-wordmark {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 900ms var(--itw-ease-out), transform 900ms var(--itw-ease-out);
}
.js .itw-wordmark.is-visible { opacity: 1; transform: none; }
.js .itw-wordmark.is-visible {
	opacity: 1;
	transform: perspective(1400px) rotateX(9deg) translateY(0);
}

.itw-footer:not(.is-live) .itw-dot::after { animation-play-state: paused; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
	.itw-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 560px) {
	/* Two columns keeps the height roughly halved. The brand block spans
	   both because its paragraph needs the full measure. */
	.itw-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
	.itw-footer__top > div:first-child { grid-column: 1 / -1; }
	.itw-footer__bar { flex-direction: column; align-items: flex-start; }
	.itw-clocks { gap: 0.35rem 1rem; }
	.itw-clocks__sep { display: none; }
}


/* ==========================================================================
   11e. PROSE
   Styling for editor output: post bodies, page content, anything coming
   through the_content(). Scoped to .itw-prose so it can never leak into the
   hand built sections, which set their own type.
   ========================================================================== */

.itw-prose {
	max-inline-size: var(--itw-container-text);
	margin-inline: auto;
}

.itw-prose > * + * {
	margin-block-start: var(--itw-space-lg);
}

.itw-prose > h2 { margin-block-start: var(--itw-space-3xl); }
.itw-prose > h3 { margin-block-start: var(--itw-space-2xl); }
.itw-prose > h4 { margin-block-start: var(--itw-space-xl); }

.itw-prose h2 { font-size: var(--itw-fs-h2); }
.itw-prose h3 { font-size: var(--itw-fs-h3); }
.itw-prose h4 { font-size: var(--itw-fs-h4); }

.itw-prose > :first-child { margin-block-start: 0; }

.itw-prose ul,
.itw-prose ol {
	padding-inline-start: 1.35rem;
}

.itw-prose li + li {
	margin-block-start: var(--itw-space-xs);
}

.itw-prose li::marker {
	color: var(--itw-accent);
}

.itw-prose a {
	color: var(--itw-link);
	text-decoration: underline;
}

.itw-prose img,
.itw-prose figure img,
.itw-prose video {
	border-radius: var(--itw-radius-lg);
}

.itw-prose figure {
	margin-inline: 0;
}

.itw-prose figcaption {
	margin-block-start: var(--itw-space-sm);
	font-size: var(--itw-fs-sm);
	color: var(--itw-text-muted);
	text-align: center;
}

.itw-prose blockquote {
	margin-inline: 0;
}

.itw-prose blockquote cite {
	display: block;
	margin-block-start: var(--itw-space-sm);
	font-size: var(--itw-fs-sm);
	font-style: normal;
	color: var(--itw-text-muted);
}

.itw-prose table {
	font-size: var(--itw-fs-sm);
}

.itw-prose th,
.itw-prose td {
	padding: var(--itw-space-sm);
	border: 1px solid var(--itw-border);
	text-align: start;
}

.itw-prose th {
	font-family: var(--itw-font-heading);
	font-weight: var(--itw-fw-semi);
	color: var(--itw-heading);
	background-color: var(--itw-surface);
}

/* Core block widths. The editor offers wide and full alignment, so the
   theme has to say what those mean rather than letting the block escape
   the measure. */
.itw-prose .alignwide {
	max-inline-size: min(var(--itw-container), 100%);
	margin-inline: auto;
	inline-size: 100%;
}

.itw-prose .alignfull {
	max-inline-size: none;
	inline-size: calc(100vw - var(--itw-scrollbar, 0px));
	margin-inline: calc(50% - 50vw + (var(--itw-scrollbar, 0px) / 2));
}

.itw-prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.itw-prose .wp-block-image,
.itw-prose .wp-block-embed,
.itw-prose .wp-block-gallery {
	margin-block: var(--itw-space-2xl);
}

.itw-prose .wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--itw-border);
	margin-block: var(--itw-space-3xl);
}

.itw-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding: 0.9rem 1.6rem;
	background-color: var(--itw-accent);
	color: var(--itw-on-accent);
	border-radius: var(--itw-radius);
	font-family: var(--itw-font-heading);
	font-weight: var(--itw-fw-semi);
	text-decoration: none;
}

.itw-prose .wp-block-code,
.itw-prose .wp-block-preformatted {
	font-size: var(--itw-fs-sm);
}

.itw-prose .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.itw-prose .wp-caption { max-inline-size: 100%; }

/* WordPress emits these on floated images. */
.itw-prose .alignleft {
	float: inline-start;
	margin-inline-end: var(--itw-space-lg);
	margin-block-end: var(--itw-space-md);
}

.itw-prose .alignright {
	float: inline-end;
	margin-inline-start: var(--itw-space-lg);
	margin-block-end: var(--itw-space-md);
}

@media (max-width: 600px) {
	.itw-prose .alignleft,
	.itw-prose .alignright {
		float: none;
		margin-inline: 0;
	}
}


/* ==========================================================================
   11f. STRUCTURAL TEMPLATES
   Styling for the templates WordPress requires: listings, single posts,
   search, 404. These are structural rather than designed, and each one can
   be replaced later without touching anything above.
   ========================================================================== */

/* ---- Page and post headers ---- */
.itw-page__head,
.itw-archive__head {
	max-inline-size: var(--itw-container-text);
	margin-inline: auto;
	margin-block-end: var(--itw-space-2xl);
}

.itw-page__title,
.itw-archive__title {
	font-size: var(--itw-fs-h1);
	line-height: var(--itw-lh-tight);
	letter-spacing: var(--itw-ls-tight);
}

.itw-page__head .itw-eyebrow {
	margin-block-end: var(--itw-space-sm);
}

.itw-archive__desc,
.itw-archive__search {
	margin-block-start: var(--itw-space-md);
}

.itw-page__media {
	max-inline-size: var(--itw-container);
	margin-inline: auto;
	margin-block-end: var(--itw-space-2xl);
}

.itw-page__media img {
	inline-size: 100%;
	border-radius: var(--itw-radius-lg);
}

/* ---- Listings ---- */
.itw-postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--itw-space-xl);
}

.itw-postcard {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.itw-postcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--itw-bg);
}

.itw-postcard__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.itw-postcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--itw-space-sm);
	padding: var(--itw-space-lg);
}

.itw-postcard__meta {
	font-size: var(--itw-fs-xs);
	color: var(--itw-text-muted);
}

.itw-postcard__title {
	font-size: var(--itw-fs-h4);
	line-height: var(--itw-lh-snug);
}

.itw-postcard__title a {
	color: var(--itw-heading);
	text-decoration: none;
}

.itw-postcard__title a:where(:hover, :focus) {
	color: var(--itw-accent-text);
}

.itw-postcard__excerpt {
	font-size: var(--itw-fs-sm);
	color: var(--itw-text);
}

/* ---- Pagination ---- */
.itw-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--itw-space-xs);
	margin-block-start: var(--itw-space-3xl);
}

.itw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--itw-space-sm);
	border: 1px solid var(--itw-border);
	border-radius: var(--itw-radius);
	background-color: var(--itw-surface);
	font-family: var(--itw-font-heading);
	font-size: var(--itw-fs-sm);
	font-weight: var(--itw-fw-medium);
	color: var(--itw-heading);
	text-decoration: none;
	transition: border-color var(--itw-dur-fast) var(--itw-ease);
}

.itw-pagination .page-numbers:where(:hover, :focus) {
	border-color: var(--itw-accent);
	color: var(--itw-heading);
}

.itw-pagination .page-numbers.current {
	background-color: var(--itw-accent);
	border-color: var(--itw-accent);
	color: var(--itw-on-accent);
}

.itw-pagination .dots {
	border-color: transparent;
	background: none;
}

/* ---- Post navigation ---- */
.itw-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--itw-space-md);
	max-inline-size: var(--itw-container-text);
	margin-inline: auto;
	margin-block-start: var(--itw-space-3xl);
	padding-block-start: var(--itw-space-xl);
	border-block-start: 1px solid var(--itw-border);
}

.itw-postnav__link {
	display: flex;
	flex-direction: column;
	gap: var(--itw-space-2xs);
	padding: var(--itw-space-md);
	border: 1px solid var(--itw-border);
	border-radius: var(--itw-radius);
	background-color: var(--itw-surface);
	text-decoration: none;
	transition: border-color var(--itw-dur-fast) var(--itw-ease);
}

.itw-postnav__link:where(:hover, :focus) {
	border-color: var(--itw-accent);
}

.itw-postnav__link--next {
	text-align: end;
}

.itw-postnav__label {
	font-family: var(--itw-font-heading);
	font-size: var(--itw-fs-xs);
	font-weight: var(--itw-fw-semi);
	letter-spacing: var(--itw-ls-wide);
	text-transform: uppercase;
	color: var(--itw-accent-text);
}

.itw-postnav__title {
	font-family: var(--itw-font-heading);
	font-weight: var(--itw-fw-semi);
	color: var(--itw-heading);
	line-height: var(--itw-lh-snug);
}

/* ---- Search form ---- */
.itw-search {
	display: flex;
	gap: var(--itw-space-xs);
	flex-wrap: wrap;
}

.itw-search__input {
	flex: 1 1 12rem;
	inline-size: auto;
}

.itw-search__submit {
	flex: none;
}

/* ---- No results ---- */
.itw-noresults {
	max-inline-size: var(--itw-container-text);
	margin-inline: auto;
	text-align: center;
}

.itw-noresults__title {
	font-size: var(--itw-fs-h3);
	margin-block-end: var(--itw-space-sm);
}

.itw-noresults__search {
	margin-block-start: var(--itw-space-xl);
}

.itw-noresults__search .itw-search {
	justify-content: center;
}

/* ---- 404 ---- */
.itw-404 {
	display: flex;
	align-items: center;
	min-block-size: 60vh;
}

.itw-404__title {
	font-size: var(--itw-fs-h1);
	line-height: var(--itw-lh-tight);
	letter-spacing: var(--itw-ls-tight);
	margin-block: var(--itw-space-sm) var(--itw-space-md);
}

.itw-404__search {
	margin-block-start: var(--itw-space-xl);
}

.itw-404__search .itw-search {
	justify-content: center;
}

.itw-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--itw-space-sm);
	margin-block-start: var(--itw-space-xl);
}

/* ---- Paginated single posts ---- */
.itw-linkpages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--itw-space-xs);
	margin-block-start: var(--itw-space-xl);
	font-family: var(--itw-font-heading);
	font-size: var(--itw-fs-sm);
	font-weight: var(--itw-fw-medium);
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js .itw-reveal {
		opacity: 1;
		transform: none;
	}

	.itw-card--lift:hover {
		transform: none;
	}

	.itw-btn:active {
		transform: none;
	}
	
	.itw-header.is-hidden { transform: none; visibility: hidden; }
	.itw-header.is-hidden:focus-within { visibility: visible; }
	/* Footer component */
	.itw-dot::after,
	.itw-glow { animation: none; }
	.js .itw-wordmark { opacity: 1; transform: none; }
	.itw-wordmark { animation: none; background-position: 210% 0, 0 0; }

	/* Header component */
	.itw-status__dot::after { display: none; }
	.itw-swap__stack { transform: none !important; }
	.itw-feature::before,
	.itw-feature::after { animation: none; }
	.itw-panel__item,
	.itw-feature,
	.itw-panel__foot { opacity: 1 !important; transform: none !important; }
	.itw-mobile { clip-path: none; }
	.itw-mobile:not(.is-open) { visibility: hidden; display: none; }
	.itw-mobile__list > li,
	.itw-mobile__foot { opacity: 1 !important; transform: none !important; }

	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }

	@supports not (view-transition-name: none) {
		.itw-site { animation: none; }
	}
}


/* ==========================================================================
   13. PRINT
   ========================================================================== */

@media print {

	body {
		background: #FFFFFF;
		color: #000000;
	}

	.itw-header,
	.itw-mobile,
	.itw-skip-link,
	.itw-btn,
	.itw-cta {
		display: none;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}
/* ==========================================================================
   HOME PAGE
   ==========================================================================

   Everything below is added to the end of style.css. Nothing in the file
   above it needs editing: where a value already set further up has to change,
   it is simply set again here, and the later declaration is the one that
   applies. That keeps this a single paste rather than a hunt through a file
   that is already several thousand lines long.

   Paste all of it at the very bottom of style.css and save.

   ========================================================================== */


/* ==========================================================================
   A. TOKENS

   Two of these change values already set at the top of the file. The rest are
   new.
   ========================================================================== */

:root {
	/* The old cream carried five points of warmth, which reads as a neutral
	   white with a cast rather than as cream. This is the same colour with
	   the warmth actually visible. */
	--itw-cream:           #FAF7F0;

	/* The step between cream and midnight. The page had only those two, with
	   nothing in between, so every section sat on one plane and large areas
	   of a single tone read as empty rather than spacious. Alternating
	   sections and the band at the end of the document use this. */
	--itw-paper:           #F1ECE3;
	--itw-paper-deep:      #EAE3D7;

	/* How far one section rounds over the one before it. */
	--itw-band-r:          34px;
}


/* ==========================================================================
   B. PAGE WIDE

   Grain, the pace every arrival on the page runs at, the rounded joins
   between sections, and the drifting light used by three of them.
   ========================================================================== */

/* ---- Grain ----
   A very fine noise over the whole page. It is the difference between a flat
   digital colour and something that looks like it was printed, and it is the
   single change that does most to stop large areas of one tone reading as
   empty rather than spacious.

   Two layers, because one cannot do both ends. multiply can only darken, so
   it is the only mode that shows on cream and it does nothing at all on
   midnight. screen can only lighten, so it is the reverse. Each is set where
   it works and is invisible where it does not, which is why the second one
   costs nothing on the light sections.

   Fixed rather than scrolled, so it behaves like the surface the page is
   printed on rather than a texture travelling with the content.

   z-index 3 puts them above the content, which sits at 2, and below the
   header at 200. At 1 the layer was underneath the main element and painted
   nothing whatsoever: it was there the whole time, covered by the very page
   it was meant to cover.

   pointer-events: none matters. Without it these sheets lie over the whole
   document and nothing underneath can be clicked. */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
}

/* The light surfaces. Measured: about one grey level of variation on cream,
   which is where grain wants to sit. Past that it stops being texture and
   starts being dirt. */
body::after {
	opacity: 0.08;
	mix-blend-mode: multiply;
}

/* The dark ones. */
/* ---- Timing ----
   Every arrival on the page reads these, so the pace can be changed in one
   place rather than in nine.

   Quicker on a phone. People scroll faster on a phone than they do with a
   trackpad, and a curve that feels considered on a wide screen feels slow
   when the thing it is moving is only a few hundred pixels across. */
:root {
	--itw-in-fade: 760ms;
	--itw-in-move: 1000ms;
	--itw-in-step: 110ms;

	/* The arc draws itself, which takes longer than a thing that simply
	   moves into place. It gets its own value so it can be cut back on a
	   phone without dragging every other arrival down with it. */
	--itw-in-draw: 1900ms;
}

@media (max-width: 700px) {
	:root {
		--itw-in-fade: 300ms;
		--itw-in-move: 420ms;
		--itw-in-step: 40ms;
		--itw-in-draw: 900ms;
	}
}


/* ---- Bands ----
   Every section after the hero rounds its top two corners and is pulled up
   over the one before it by the same amount. The corner notches then show
   the section above rather than the page behind, which is what makes the
   join look drawn rather than accidental.

   The reason this exists: two flat colours meeting edge to edge leave a hard
   line across the page, and at the point where two close tones meet it reads
   as a rendering seam. The same shape is already at the foot of the page
   above the footer card, so this is the page repeating something it does
   rather than borrowing an idea.

   The pull up is taken out of the section's own top padding, which is large
   enough everywhere that losing this much of it changes nothing. */
.itw-band {
	position: relative;
	border-start-start-radius: var(--itw-band-r);
	border-start-end-radius: var(--itw-band-r);
	margin-block-start: calc(var(--itw-band-r) * -1);
}

/* Its own stacking context, so a section always sits over the one before it
   whatever is going on inside either of them. */
.itw-band { isolation: isolate; }

/* Not every join takes it. The strip between the hero and the services is
   53px tall, and a section rounding 34px over it left 19px showing, which
   reads as a sliver rather than a band. Those two are left square. */

/* ---- Drifting light ----
   Two soft fields that move slowly behind a section. Applied by adding the
   class, not to every section: motion everywhere makes a page restless and
   tiring to read, which is the opposite of what this is for.

   Long cycles, and different lengths, so the two never line up the same way
   twice and the surface never settles into a still.

   Transform only. Animating position would lay the section out again on
   every frame, and this runs for as long as the section is on screen. */
.itw-air {
	position: relative;
	isolation: isolate;
}

.itw-air > .itw-air__field {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: clip;
	pointer-events: none;
}

.itw-air__field i {
	position: absolute;
	display: block;
	inline-size: 46vmax;
	block-size: 46vmax;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
}

.itw-air__field i:nth-child(1) {
	inset-block-start: -18%;
	inset-inline-end: -14%;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.16) 0%, transparent 68%);
	animation: itw-air-a 29s ease-in-out infinite;
}

.itw-air__field i:nth-child(2) {
	inset-block-end: -22%;
	inset-inline-start: -18%;
	background: radial-gradient(circle, rgba(16, 16, 20, 0.08) 0%, transparent 66%);
	animation: itw-air-b 37s ease-in-out infinite;
}

/* On the dark sections the light has to be the thing that shows, not a
   shadow, so the second field turns warm as well. */
.itw-air--dark .itw-air__field i:nth-child(1) {
	background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, transparent 68%);
}

.itw-air--dark .itw-air__field i:nth-child(2) {
	background: radial-gradient(circle, rgba(180, 83, 9, 0.14) 0%, transparent 66%);
}

@keyframes itw-air-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-6%, 8%, 0) scale(1.12); }
}

@keyframes itw-air-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
	50%      { transform: translate3d(7%, -6%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.itw-air__field i:nth-child(n) { animation: none; }
}


body::before {
	/* Measured: at 0.14 this lifted midnight from 16 to 28, which is not
	   grain, it is a wash. This holds the black and still gives it about a
	   grey level of texture. */
	opacity: 0.05;
	mix-blend-mode: screen;
}

/* Clip rather than hide, and on the root rather than the body. hidden turns
   the element into a scroll container, which is why a stray pixel from a
   marquee could still drag the whole page sideways; clip refuses the scroll
   outright. It also leaves position: sticky working, which overflow: hidden
   on an ancestor quietly breaks. */
html {
	overflow-x: clip;
}


/* ==========================================================================
   11h. HERO
   ========================================================================== */

.itw-hero {
	/* The warm light behind the panel sits on negative insets, so it reaches
	   past the column it belongs to. Clipped here rather than made smaller,
	   because the reach is what stops it reading as depth. */
	overflow-x: clip;

	/* The strip below already separates this from what follows, so the hero
	   does not need to end with a screen of air as well. */
	padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(2.5rem, 1.8rem + 2.4vw, 4.25rem);
}

.itw-hero__grid {
	display: grid;
	/* The copy column carries more weight than the panel. The changing word
	   is held at the width of the longest option, which makes the second
	   sentence wider than its natural length, and an even split forced it
	   to wrap. */
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

/* Each sentence owns a line. Left to wrap on its own the heading broke into
   four uneven lines, which is what made it read as filler rather than a
   written headline. */
.itw-hero__title {
	font-size: clamp(1.55rem, 0.95rem + 2.3vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.itw-hero__title > span { display: block; }

/* The closing word carries the accent, so the line has a point to land on
   without anything having to move. */
.itw-hero__title em {
	font-style: normal;
	color: var(--itw-accent-text);
}

.itw-hero__lead {
	max-inline-size: 48ch;
	margin-block-start: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-text);
}

.itw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	margin-block-start: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
}

/* ---- What the studio does ----
   The four lines the headline used to cycle, sitting still where they can be
   read rather than caught. They also settle the column, which the taller
   panel beside it was leaving short. */
.itw-hero__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	margin-block-start: clamp(1.6rem, 1.2rem + 1vw, 2.25rem);
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.02em;
	color: var(--itw-text-muted);
}

/* A dot between the words rather than a slash or a pipe, drawn rather than
   typed so it sits on the optical centre of the line. */
.itw-hero__list span { display: inline-flex; align-items: center; }

.itw-hero__list span + span::before {
	content: "";
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: var(--itw-accent);
	margin-inline-end: 0.9rem;
}


/* ---- Primary action ----
   Deliberately not the header's control. That one is an amber pill with a
   dark badge; repeating it here would make the page feel like it owns one
   idea. This is its inverse, midnight on cream, with the amber on the mark.

   No pill, no gloss, no lift. A full radius with a soft coloured shadow is
   the shape every template ships with, and it was the reason these read as
   generic. A squarer corner and a flat surface read as a studio control. */
.itw-start {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	block-size: 52px;
	padding-inline: 1.5rem;
	border-radius: 12px;
	background: var(--itw-midnight);
	color: var(--itw-cream);
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-semi);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--itw-dur) var(--itw-ease);
}

.itw-start:hover,
.itw-start:focus-visible { background: #1C1C22; }

.itw-start svg {
	inline-size: 13px;
	block-size: 13px;
	color: var(--itw-accent);
	transition: transform var(--itw-dur) var(--itw-ease-out);
}

.itw-start:hover svg,
.itw-start:focus-visible svg { transform: translate(2px, -2px); }

.itw-start .itw-swap__stack > span:last-child { color: var(--itw-cream); }

.itw-start:hover .itw-swap__stack,
.itw-start:focus-visible .itw-swap__stack { transform: translateY(-50%); }

/* ---- Secondary action ----
   An outlined control rather than a line of text. Sitting on the background
   with only a small mark beside it, it did not read as something to press. */
.itw-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	block-size: 52px;
	padding-inline: 1.35rem;
	border-radius: 12px;
	background: var(--itw-surface);
	box-shadow: inset 0 0 0 1px var(--itw-border);
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-semi);
	line-height: 1;
	color: var(--itw-heading);
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow var(--itw-dur) var(--itw-ease),
	            background-color var(--itw-dur) var(--itw-ease);
}

.itw-ghost:hover,
.itw-ghost:focus-visible {
	background: var(--itw-white);
	box-shadow: inset 0 0 0 1px rgba(16, 16, 20, 0.22);
}

.itw-ghost svg {
	inline-size: 12px;
	block-size: 12px;
	color: var(--itw-accent-text);
	transition: transform var(--itw-dur) var(--itw-ease-out);
}

.itw-ghost:hover svg,
.itw-ghost:focus-visible svg { transform: translateX(3px); }

.itw-ghost .itw-swap__stack > span:last-child { color: var(--itw-accent-text); }

.itw-ghost:hover .itw-swap__stack,
.itw-ghost:focus-visible .itw-swap__stack { transform: translateY(-50%); }


/* ==========================================================================
   11i. THE BUILD PANEL

   An idea is typed, it resolves into a wireframe, the wireframe becomes a
   site, and the next idea builds something different. Four ideas, four
   layouts: a clinic gets a booking screen, a law firm gets practice areas,
   an accountant gets pricing, an agency gets work. If every idea produced
   the same page the panel would be arguing the opposite of the pitch.

   Every block is a div. No images, no canvas, no library.
   ========================================================================== */

.itw-build { position: relative; perspective: 1500px; }

/* Warm light behind the panel, the same idea as the band at the end of the
   page. It lifts the card off the cream without a heavier shadow, which at
   this size would read as a drop rather than depth. */
.itw-build::before {
	content: "";
	position: absolute;
	inset: 8% -6% -12%;
	z-index: -1;
	border-radius: 40px;
	background: radial-gradient(ellipse 62% 70% at 50% 78%,
		rgba(217, 119, 6, 0.16) 0%,
		rgba(180, 83, 9, 0.07) 45%,
		transparent 72%);
	filter: blur(28px);
	pointer-events: none;
}

.itw-build__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(0.9rem, 0.6rem + 0.9vw, 1.35rem);
	border-radius: 20px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.04),
		0 22px 50px rgba(16, 16, 20, 0.08);

	/* A couple of degrees, so the panel sits in space rather than flat on
	   the page. More than that and the mock inside starts to distort. */
	transform: rotateY(-3deg) rotateX(1.5deg);
	transform-origin: 60% 50%;
}

/* ---- The typed idea ---- */
.itw-build__prompt {
	display: flex;
	align-items: center;
	min-block-size: 1.5em;
	font-family: var(--itw-font-mono);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--itw-text-muted);
}

.itw-build__prompt::before {
	content: "";
	flex: none;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--itw-accent);
	margin-inline-end: 0.6rem;
}

.itw-build__caret {
	inline-size: 1.5px;
	block-size: 1.05em;
	margin-inline-start: 2px;
	background: var(--itw-accent);
	animation: itw-caret 1s steps(2, end) infinite;
}

@keyframes itw-caret {
	0%, 50%   { opacity: 1; }
	51%, 100% { opacity: 0; }
}

.itw-build:not(.is-typing) .itw-build__caret { opacity: 0; animation: none; }

/* ---- Browser chrome ----
   Three dots and an address bar. Without them the panel is an abstract
   arrangement of blocks; with them it is unmistakably a website, which is
   the whole point of showing it. */
.itw-build__chrome {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding-inline: 0.1rem;
	flex: none;
}

.itw-build__chrome span {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: rgba(16, 16, 20, 0.13);
}

.itw-build__chrome span:first-child { background: rgba(217, 119, 6, 0.55); }

.itw-build__bar {
	flex: 1;
	block-size: 15px;
	margin-inline-start: 0.45rem;
	border-radius: 999px;
	background: rgba(16, 16, 20, 0.05);
	box-shadow: inset 0 0 0 1px rgba(16, 16, 20, 0.05);
}

/* ---- The code stage ----
   Between the idea and the wireframe, the markup for that page is written
   out. It is the step the whole pitch rests on, and leaving it invisible
   made the panel look like a template being picked rather than a site being
   written. */
.itw-build__stage { position: relative; }

.itw-build__code {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	padding: 0.75rem;
	border-radius: 12px;
	background: var(--itw-midnight);
	color: rgba(250, 248, 245, 0.72);
	font-family: var(--itw-font-mono);
	font-size: 9.5px;
	line-height: 1.85;
	white-space: pre;
	overflow: hidden;

	/* Not a flex box. Making it one turned every tag name inside into its
	   own flex item and broke each line into pieces. */
	display: block;
	padding-block-start: 1.4rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 320ms var(--itw-ease);
}

.itw-build.is-coding .itw-build__code { opacity: 1; }

.itw-build__code b { color: var(--itw-accent); font-weight: 400; }

/* ---- The mock ---- */
.itw-build__site {
	transform: scale(0.985);
	transition: transform 620ms var(--itw-ease-out);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.55rem;
	border-radius: 12px;
	background: var(--itw-bg);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.itw-build__site > div { display: flex; }

/* Blocks arrive in sequence once the wireframe stage begins. Transform and
   opacity only, so the sequence stays on the compositor. */
/* display sits in its own rule wrapped in :where(), which contributes no
   specificity at all. Set alongside the rest it scored 0,1,1 and beat every
   primitive below that needs to be a flex box, which is what was throwing
   the labels outside their blocks. */
.itw-build__site :where(span, i) { display: block; }

.itw-build__site span,
.itw-build__site i {
	border-radius: 4px;
	background: rgba(16, 16, 20, 0.09);
	opacity: 0;
	transform: translateY(9px);
	transition: opacity 380ms var(--itw-ease-out),
	            transform 380ms var(--itw-ease-out),
	            background-color 500ms var(--itw-ease);
}

.itw-build.is-wireframe .itw-build__site span,
.itw-build.is-wireframe .itw-build__site i,
.itw-build.is-built .itw-build__site span,
.itw-build.is-built .itw-build__site i {
	opacity: 1;
	transform: none;
}

/* ---- Words ----
   Real labels rather than more grey bars, because a page of blocks reads as
   a wireframe forever. They arrive only in the built stage: structure
   first, content after, which is the order it actually happens in. */
.m-t {
	display: block;
	font-family: var(--itw-font-body);
	font-size: 9px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 420ms var(--itw-ease) 260ms;
}

.itw-build.is-built .m-t { opacity: 1; }

/* ---- Primitives ---- */
.m-nav {
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.5rem;
	border-radius: 8px;
	background: rgba(16, 16, 20, 0.04);
	transition: background-color 500ms var(--itw-ease);
	flex: none;
}
.m-logo { inline-size: 20px; block-size: 7px; }
.itw-build .m-links { display: flex; gap: 0.3rem; margin-inline-start: 0.45rem; }
.m-links i { inline-size: 16px; block-size: 4px; }
.m-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 34px;
	block-size: 15px;
	padding-inline: 5px;
	border-radius: 999px;
	margin-inline-start: auto;
}
.m-btn .m-t { color: var(--itw-cream); }

.m-hero {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 0.75rem 0.5rem 0.85rem;
	flex: none;
}
.m-h1 {
	display: flex;
	align-items: center;
	min-inline-size: 60%;
	block-size: 15px;
	padding-inline: 3px;
}
.m-h1 .m-t { font-size: 11px; font-weight: 700; color: var(--itw-heading); }
.m-sub { inline-size: 46%; block-size: 7px; }
.m-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 17px;
	padding-inline: 8px;
	border-radius: 999px;
	margin-block-start: 0.3rem;
}
.m-cta .m-t { color: var(--itw-midnight); }

.m-row { gap: 0.4rem; flex: none; }


.m-row--slots .m-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	block-size: 20px;
	border-radius: 6px;
}
.m-row--slots .m-t { font-size: 8px; color: var(--itw-text-muted); }

.m-card {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	block-size: 40px;
	border-radius: 8px;
}
.m-card .m-t { color: var(--itw-heading); }

.m-card--tall { block-size: 58px; align-items: flex-end; padding: 6px; justify-content: flex-start; }

.m-quote {
	display: flex;
	align-items: center;
	inline-size: 100%;
	block-size: 34px;
	padding-inline: 8px;
	border-radius: 8px;
}
.m-quote .m-t { font-size: 8px; font-weight: 500; color: var(--itw-text-muted); }

.m-price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	flex: 1;
	block-size: 62px;
	padding: 7px;
	border-radius: 8px;
}
.m-price .m-t { font-size: 8px; color: var(--itw-text-muted); }
.m-price .m-t--big { font-size: 13px; font-weight: 700; color: var(--itw-heading); }

.m-img { flex: 1; block-size: 52px; border-radius: 8px; }

.m-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; justify-content: center; }
.itw-build .m-lines { background: none; }
.m-lines i:nth-child(1) { inline-size: 88%; block-size: 6px; }
.m-lines i:nth-child(2) { inline-size: 70%; block-size: 6px; }
.m-lines i:nth-child(3) { inline-size: 44%; block-size: 6px; }

.m-foot {
	align-items: center;
	gap: 0.45rem;
	margin-block-start: auto;
	padding: 0.45rem 0.5rem;
	border-radius: 8px;
	background: rgba(16, 16, 20, 0.04);
	transition: background-color 500ms var(--itw-ease);
	flex: none;
}
.m-foot__mark { inline-size: 16px; block-size: 6px; }
.m-foot__line { inline-size: 38%; block-size: 4px; }

/* ---- Stagger. Short gaps, so it reads as one build rather than a queue ---- */
.itw-build__site > div:nth-child(1) span,
.itw-build__site > div:nth-child(1) i { transition-delay: 40ms; }
.itw-build__site > div:nth-child(2) span,
.itw-build__site > div:nth-child(2) i { transition-delay: 120ms; }
.itw-build__site > div:nth-child(3) span,
.itw-build__site > div:nth-child(3) i { transition-delay: 210ms; }
.itw-build__site > div:nth-child(4) span,
.itw-build__site > div:nth-child(4) i { transition-delay: 290ms; }
.itw-build__site > div:nth-child(5) span,
.itw-build__site > div:nth-child(5) i { transition-delay: 370ms; }

/* ---- Built. The wireframe takes the brand on ---- */
.itw-build.is-built .itw-build__site { transform: none; }

.itw-build.is-built .m-nav,
.itw-build.is-built .m-foot { background: var(--itw-midnight); }

.itw-build.is-built .m-logo,
.itw-build.is-built .m-btn,
.itw-build.is-built .m-cta,
.itw-build.is-built .m-foot__mark { background: var(--itw-accent); }

.itw-build.is-built .m-links i    { background: rgba(250, 248, 245, 0.5); }
.itw-build.is-built .m-foot__line { background: rgba(250, 248, 245, 0.28); }

.itw-build.is-built .m-h1  { background: none; }
.itw-build.is-built .m-sub { background: rgba(16, 16, 20, 0.22); }

.itw-build.is-built .m-card,
.itw-build.is-built .m-slot,
.itw-build.is-built .m-price,
.itw-build.is-built .m-quote {
	background: var(--itw-white);
	box-shadow: inset 0 0 0 1px var(--itw-border);
}

.itw-build.is-built .m-img { background: rgba(217, 119, 6, 0.2); }
.itw-build.is-built .m-lines i { background: rgba(16, 16, 20, 0.18); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.itw-hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.itw-build__frame { transform: none; }
	.itw-build { max-inline-size: 460px; inline-size: 100%; }

	/* Centred on a narrow screen. Ranged left it sat against one edge with
	   the panel below it, and the column read as two unrelated pieces. */
	.itw-hero__copy { text-align: center; }
	.itw-hero__lead { margin-inline: auto; }
	.itw-hero__actions,
	.itw-hero__list { justify-content: center; }
}

@media (max-width: 560px) {
	/* Both actions stay on one line. Stacked, the second one reads as an
	   afterthought sitting under the first.

	   flex: none matters here. Flex items shrink below their content by
	   default, and with nowrap the labels were quietly cut off at the
	   narrowest sizes rather than the row ever admitting it did not fit. */
	.itw-hero__actions { flex-wrap: nowrap; gap: 1rem; }

	.itw-start,
	.itw-ghost {
		flex: none;
		block-size: 48px;
		padding-inline: 1.05rem;
		font-size: 0.875rem;
	}
}

/* The last stop where two full labels still fit side by side. */
@media (max-width: 400px) {
	.itw-hero__actions { gap: 0.7rem; }

	.itw-start,
	.itw-ghost {
		block-size: 46px;
		padding-inline: 0.85rem;
		font-size: 0.8125rem;
		gap: 0.45rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* No sequence. The finished state is the point, so it starts there. */
	.itw-build__site span,
	.itw-build__site i,
	.m-t { opacity: 1; transform: none; transition: none; }
	.itw-build__caret { display: none; }
	.itw-build__code { display: none; }
}


/* ==========================================================================
   11j. SECTION HEADER
   Shared by every section below the hero, so the page keeps one rhythm.
   ========================================================================== */

.itw-sec__head {
	max-inline-size: 62ch;
	margin-inline: auto;
	margin-block-end: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
	text-align: center;
}

/* ---- Arriving ----
   Each line comes up from behind a mask rather than fading in. Nothing is
   ever half transparent and nothing is ever out of focus: the words are
   either behind the edge or fully on the page.

   The blur this replaces was the problem. Softened type reads as a rendering
   fault for the moment it lasts, which is the opposite of what a heading
   should do on arrival.

   Only once. A heading that replays on every pass turns into a tic. */
.js .itw-sec__head > * {
	overflow: hidden;
	/* Room for descenders, taken back off the layout, so the mask never
	   crops the tail of a g or a p once the line has settled. */
	padding-block-end: 0.14em;
	margin-block-end: -0.14em;
}

.js .itw-rise {
	display: block;
	transform: translateY(105%);
	transition: transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

/* The eyebrow is a flex row. Dropping a block wrapper inside it put the rule
   and the words on separate lines, and the mask then cropped the words away
   entirely. The wrapper takes over the row instead of interrupting it. */
.js .itw-sec__eyebrow .itw-rise {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.js .itw-sec__head.is-in .itw-rise { transform: none; }

/* Enough of a gap that the three read as a sequence, not enough to make
   anyone wait for the last one. */
.js .itw-sec__head > *:nth-child(2) .itw-rise { transition-delay: var(--itw-in-step); }
.js .itw-sec__head > *:nth-child(3) .itw-rise { transition-delay: calc(var(--itw-in-step) * 2); }

.itw-sec__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--itw-font-heading);
	font-size: 0.6875rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--itw-text-muted);
	margin-block-end: 0.9rem;
	justify-content: center;
}

/* The rule is its own element and the label is its own element. A bare text
   node beside it contributes no height once it becomes an anonymous item in
   a flex row, which collapsed the whole line to the height of the rule. */
.itw-sec__rule {
	flex: none;
	inline-size: 18px;
	block-size: 1px;
	background: var(--itw-accent);
}

.itw-sec__title {
	font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.itw-sec__lead {
	max-inline-size: 56ch;
	margin-inline: auto;
	margin-block-start: 0.9rem;
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-text);
}


/* ==========================================================================
   11k. THE STRIP

   A band of plain facts between the hero and the services. White rather than
   midnight: it lands as a bright line between two warm surfaces, and it
   leaves midnight free for the section that comes after, where it counts.
   ========================================================================== */

.itw-strip {
	overflow: hidden;
	padding-block: 0.9rem;
	background: var(--itw-white);
	border-block: 1px solid var(--itw-border);
	/* Fades at both ends, so the line arrives and leaves rather than being
	   cut off against the edge of the screen. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.itw-strip__track {
	display: flex;
	align-items: center;
	gap: 0;
	inline-size: max-content;
	animation: itw-strip 42s linear infinite;
	will-change: transform;
}

/* Slow. A strip that hurries reads as a ticker on a news channel; this one
   is meant to be caught in passing rather than watched. */
@keyframes itw-strip {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.itw-strip:hover .itw-strip__track { animation-play-state: paused; }

.itw-strip__track span {
	flex: none;
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.01em;
	color: var(--itw-heading);
	white-space: nowrap;
}

.itw-strip__track i {
	flex: none;
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--itw-accent);
	margin-inline: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
}


/* ==========================================================================
   11l. SERVICES

   A list on one side, one service open on the other. Only on click: left to
   advance by itself it would change under someone who was reading it.
   ========================================================================== */

.itw-services {
	padding-block: clamp(2rem, 1.5rem + 1.8vw, 3.25rem) clamp(2.75rem, 2rem + 2.4vw, 4.5rem);
	background: var(--itw-paper);
}

.itw-tabs {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
	align-items: start;
}

/* ---- The list ---- */
.itw-tabs__list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Each one carries its own surface and edge. Left transparent, only the
   selected tab looked like something you could press and the other five
   read as a list sitting on the background. */
.itw-tabs__tab {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	inline-size: 100%;
	padding: 0.8rem 0.9rem;
	border: 0;
	border-radius: 12px;
	background: var(--itw-surface);
	color: inherit;
	text-align: start;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 1px 2px rgba(16, 16, 20, 0.04);
	transition: background-color var(--itw-dur) var(--itw-ease),
	            box-shadow var(--itw-dur) var(--itw-ease),
	            transform var(--itw-dur-fast) var(--itw-ease-out);
}

.itw-tabs__tab:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(16, 16, 20, 0.16),
		0 4px 14px rgba(16, 16, 20, 0.06);
	transform: translateY(-1px);
}

/* Pressing has to be felt as well as seen. */
.itw-tabs__tab:active { transform: translateY(1px); }

.itw-tabs__tab.is-on {
	background: var(--itw-midnight);
	color: var(--itw-cream);
	transform: none;
	box-shadow:
		inset 0 1px 0 rgba(250, 248, 245, 0.12),
		inset 0 0 0 1px rgba(16, 16, 20, 1),
		0 2px 4px rgba(16, 16, 20, 0.14),
		0 12px 28px rgba(16, 16, 20, 0.14);
}

.itw-tabs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 9px;
	background: rgba(217, 119, 6, 0.1);
	color: var(--itw-accent-text);
	transition: background-color var(--itw-dur) var(--itw-ease),
	            color var(--itw-dur) var(--itw-ease);
}

.itw-tabs__icon svg { inline-size: 17px; block-size: 17px; }

.itw-tabs__tab.is-on .itw-tabs__icon {
	background: rgba(217, 119, 6, 0.18);
	color: var(--itw-accent);
}

.itw-tabs__text { display: block; min-inline-size: 0; }

/* The colour is stated rather than inherited. The base layer gives every b
   and strong the heading colour, which is midnight, and on the selected tab
   that is the same as the surface behind it: the name simply vanished. */
.itw-tabs__text b {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-semi);
	line-height: 1.3;
	color: var(--itw-heading);
}

.itw-tabs__tab.is-on .itw-tabs__text b { color: var(--itw-dark-heading); }

/* The one line under each name is what stops five of the six being a
   mystery until they are clicked. */
.itw-tabs__text i {
	display: block;
	font-style: normal;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--itw-text-muted);
	margin-block-start: 0.1rem;
}

.itw-tabs__tab.is-on .itw-tabs__text i { color: var(--itw-dark-muted); }

.itw-tabs__mark {
	flex: none;
	inline-size: 12px;
	block-size: 12px;
	margin-inline-start: auto;
	color: var(--itw-text-muted);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--itw-dur) var(--itw-ease),
	            transform var(--itw-dur) var(--itw-ease-out);
}

.itw-tabs__tab:hover .itw-tabs__mark { opacity: 0.7; transform: none; }

.itw-tabs__tab.is-on .itw-tabs__mark {
	opacity: 1;
	transform: none;
	color: var(--itw-accent);
}

/* ---- The panel ----
   Every panel occupies the same grid cell, so the box is as tall as the
   longest one and nothing jumps as the service changes. */
/* A lit top edge, a hairline, and two shadows at different distances. One
   flat border reads as a box drawn on the page; these read as a card lying
   on it. */
.itw-tabs__panels {
	display: grid;
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	border-radius: 20px;
	background:
		linear-gradient(180deg, var(--itw-white) 0%, var(--itw-surface) 62%, #FBF8F3 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 1px 2px rgba(16, 16, 20, 0.04),
		0 10px 22px rgba(16, 16, 20, 0.05),
		0 28px 60px rgba(16, 16, 20, 0.06);
}

.itw-tab {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.itw-tab[hidden] { display: none; }

.itw-tab__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 12px;
	background: var(--itw-midnight);
	color: var(--itw-accent);
	margin-block-end: 1.1rem;
}

.itw-tab__i svg { inline-size: 22px; block-size: 22px; }

.itw-tab h3 {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
	letter-spacing: -0.02em;
	margin-block-end: 0.65rem;
}

.itw-tab p {
	max-inline-size: 54ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--itw-text);
}

.itw-tab__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	padding: 0;
	margin-block-start: 1.25rem;
}

.itw-tab__chips li {
	padding: 0.35rem 0.75rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-paper);
	box-shadow: inset 0 0 0 1px var(--itw-border);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--itw-text-muted);
	white-space: nowrap;
}

.itw-tab__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 1.5rem;
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-accent-text);
	text-decoration: none;
}

.itw-tab__link svg {
	inline-size: 12px;
	block-size: 12px;
	transition: transform var(--itw-dur) var(--itw-ease-out);
}

.itw-tab__link:hover svg,
.itw-tab__link:focus-visible svg { transform: translateX(3px); }

/* ---- The change ----
   The panel arrives a piece at a time rather than as one block. A whole
   panel fading in reads as a slide changing; parts arriving in order reads
   as something being assembled, which is what the page is about. */
.js .itw-tab.is-on > * {
	animation: itw-tab-in var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.js .itw-tab.is-on > *:nth-child(1) { animation-delay: 0ms; }
.js .itw-tab.is-on > *:nth-child(2) { animation-delay: var(--itw-in-step); }
.js .itw-tab.is-on > *:nth-child(3) { animation-delay: calc(var(--itw-in-step) * 2); }
.js .itw-tab.is-on > *:nth-child(4) { animation-delay: calc(var(--itw-in-step) * 3); }
.js .itw-tab.is-on > *:nth-child(5) { animation-delay: calc(var(--itw-in-step) * 4); }

@keyframes itw-tab-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.itw-tabs { grid-template-columns: minmax(0, 1fr); }

	/* Two columns of names above the panel. A single column of six would
	   push the panel most of a screen down the page. */
	.itw-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.itw-tabs__mark { display: none; }

}

@media (max-width: 560px) {
	/* Two columns, not one. Six full width rows took most of a phone screen
	   and pushed the panel below the fold, which defeats the point of
	   showing the panel at all. */
	.itw-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }

	.itw-tabs__tab {
		gap: 0.55rem;
		padding: 0.6rem 0.65rem;
		border-radius: 10px;
	}

	.itw-tabs__icon { inline-size: 28px; block-size: 28px; border-radius: 8px; }
	.itw-tabs__icon svg { inline-size: 15px; block-size: 15px; }

	/* The sub line goes and the name is allowed to wrap, so a long one does
	   not force the column wider than half the screen. */
	.itw-tabs__text i { display: none; }
	.itw-tabs__text b { font-size: 0.8125rem; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
	.itw-strip__track { animation: none; }
	.js .itw-rise { transform: none; transition: none; }
	.js .itw-tab.is-on > * { animation: none; }
}


/* ==========================================================================
   11m. WHY IT IS WRITTEN IN CODE

   The first dark section on the page. Everything above it has been the
   studio talking; this is the part that shows its working, so it gets the
   change of surface.
   ========================================================================== */

.itw-why {
	padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
	background: var(--itw-midnight);
	color: var(--itw-dark-text);
}

/* The shared header, inverted. Written here rather than as a modifier class
   because the section it sits in is enough to know from. */
.itw-why .itw-sec__title { color: var(--itw-dark-heading); }
.itw-why .itw-sec__lead { color: var(--itw-dark-text); }
.itw-why .itw-sec__eyebrow { color: var(--itw-dark-muted); }

/* The eyebrow needed air under it. At the shared spacing it read as part of
   the heading rather than a label above it, and the amber rule beside it
   made the two look joined. */
.itw-why .itw-sec__eyebrow { margin-block-end: 1.4rem; }

.itw-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	align-items: stretch;
}

.itw-why__col {
	padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
	border-radius: 18px;
}

/* Each column comes in from the side it sits on, so the comparison assembles
   itself rather than appearing whole. Slow on purpose: at a normal speed the
   two crossed the distance before the eye had found either of them. */
.js .itw-why__grid .itw-why__col {
	opacity: 0;
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

.js .itw-why__col--them { transform: translateX(-44px); }
.js .itw-why__col--us   { transform: translateX(44px); }

/* The grid clips its own children while they are travelling. Without it the
   right hand card sits past the edge of the page until it settles, and a few
   pixels there are enough to make the whole document scroll sideways. */
.js .itw-why__grid { overflow-x: clip; }

/* The second one follows rather than mirroring exactly, which reads as a
   pair arriving instead of two halves snapping together. */
.js .itw-why__col--us { transition-delay: var(--itw-in-step); }

.js .itw-why__grid.is-in .itw-why__col {
	opacity: 1;
	transform: none;
}

/* The one being argued against is stated plainly and left quiet. Drawn in
   red, or crossed out, it would read as a swipe at other studios rather
   than a description of a trade off. */
.itw-why__col--them {
	background: rgba(250, 248, 245, 0.03);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.08);
}

.itw-why__col--us {
	background: rgba(217, 119, 6, 0.07);
	box-shadow:
		inset 0 1px 0 rgba(250, 248, 245, 0.08),
		inset 0 0 0 1px rgba(217, 119, 6, 0.3);
}

.itw-why__tag {
	font-family: var(--itw-font-heading);
	font-size: 0.6875rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--itw-dark-muted);
	margin-block-end: 0.7rem;
}

.itw-why__col--us .itw-why__tag { color: var(--itw-accent); }

.itw-why__col h3 {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	letter-spacing: -0.02em;
	color: var(--itw-dark-heading);
	margin-block-end: 1.1rem;
}

.itw-why__col ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.itw-why__col li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--itw-dark-text);
}

/* A small mark rather than a bullet, so the two columns read as two
   descriptions instead of a scorecard. */
.itw-why__col li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.6em;
	inset-inline-start: 0.15rem;
	inline-size: 6px;
	block-size: 1px;
	background: rgba(250, 248, 245, 0.35);
}

.itw-why__col--us li::before {
	inline-size: 6px;
	block-size: 6px;
	inset-block-start: 0.45em;
	border-radius: 50%;
	background: var(--itw-accent);
}


/* ---- The reading ---- */
.itw-score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.25rem, 0.8rem + 2vw, 3rem);
	margin-block-start: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.35rem, 1rem + 1.2vw, 2rem);
	border-radius: 18px;
	background: rgba(250, 248, 245, 0.03);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.08);
}

.itw-score__nums {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
	flex: none;
}

.itw-score__n {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
}

/* Out of a hundred, not a plus. A plus would read as "95 or better", and
   the number is a single measurement rather than a floor. */
.itw-score__n b::after {
	content: "/100";
	font-size: 0.42em;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0;
	color: var(--itw-dark-muted);
	margin-inline-start: 0.12em;
}

.itw-score__n b {
	font-family: var(--itw-font-heading);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
	font-weight: var(--itw-fw-bold);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--itw-accent);
	/* Tabular figures, or the number jitters as it counts. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.itw-score__n i {
	font-style: normal;
	font-family: var(--itw-font-heading);
	font-size: 0.75rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--itw-dark-muted);
}

.itw-score__sep {
	inline-size: 1px;
	block-size: 34px;
	background: rgba(250, 248, 245, 0.12);
}

.itw-score__note {
	flex: 1;
	min-inline-size: 22ch;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--itw-dark-muted);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 780px) {
	.itw-why__grid { grid-template-columns: minmax(0, 1fr); }

	/* Stacked, they arrive from below rather than from the sides. Sideways
	   on a narrow screen pushed the right hand card past the edge of the
	   page before it settled, which is enough to make the whole document
	   scrollable horizontally. */
	.js .itw-why__col--them,
	.js .itw-why__col--us { transform: translateY(24px); }

	/* The numbers get their own row and sit together, with the note under
	   them. Side by side they were fighting the note for the same line. */
	.itw-score {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.1rem;
	}

	.itw-score__nums { inline-size: 100%; justify-content: space-between; }
	.itw-score__note { flex: none; min-inline-size: 0; }
}

@media (max-width: 420px) {
	.itw-score__n { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
	.itw-score__nums { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.js .itw-why__grid .itw-why__col { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   11n. RECENT WORK

   Two projects, then the way through to the rest. The screenshot carries the
   card: a visitor decides whether to look closer from the picture, not from
   the paragraph under it.
   ========================================================================== */

.itw-work {
	padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
	background: var(--itw-bg);
}

.itw-work__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
}

.itw-work__card {
	display: flex;
	flex-direction: column;
}

/* ---- The shot ---- */
.itw-work__shot {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: var(--itw-paper);
	box-shadow:
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.05),
		0 16px 34px rgba(16, 16, 20, 0.07);
	transition: transform var(--itw-in-fade) var(--itw-ease-out),
	            box-shadow 520ms var(--itw-ease-out);
}

.itw-work__card:hover .itw-work__shot,
.itw-work__shot:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px rgba(16, 16, 20, 0.14),
		0 4px 10px rgba(16, 16, 20, 0.06),
		0 26px 54px rgba(16, 16, 20, 0.1);
}

/* A framed page rather than a bare image. The frame is what tells a visitor
   at a glance that they are looking at a website and not a photograph. */
.itw-work__frame {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.7rem;
	aspect-ratio: 16 / 11;
}

.itw-work__chrome {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	flex: none;
}

.itw-work__chrome i {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: rgba(16, 16, 20, 0.13);
}

.itw-work__chrome i:first-child { background: rgba(217, 119, 6, 0.5); }

.itw-work__chrome b {
	flex: 1;
	block-size: 13px;
	margin-inline-start: 0.4rem;
	border-radius: 999px;
	background: rgba(16, 16, 20, 0.05);
}

/* The page inside. Replaced by the real screenshot once the projects have
   one; the shape is the same either way. */
.itw-work__page {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	padding: 0.5rem;
	border-radius: 10px;
	background: var(--itw-bg);
}

.itw-work__page span { display: flex; }

.itw-work__page i,
.itw-work__page b {
	display: block;
	border-radius: 3px;
	background: rgba(16, 16, 20, 0.09);
}

.w-nav {
	align-items: center;
	gap: 0.3rem;
	padding: 0.35rem 0.4rem;
	border-radius: 6px;
	background: var(--itw-midnight);
	flex: none;
}
.w-nav i { inline-size: 14px; block-size: 4px; background: rgba(250, 248, 245, 0.45); }
.w-nav i:first-child { inline-size: 16px; background: var(--itw-accent); }
.w-nav b { inline-size: 24px; block-size: 10px; border-radius: 999px; margin-inline-start: auto; background: var(--itw-accent); }

.w-hero {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.7rem 0.4rem 0.8rem;
	flex: none;
}
.w-hero i:nth-child(1) { inline-size: 62%; block-size: 9px; background: rgba(16, 16, 20, 0.6); }
.w-hero i:nth-child(2) { inline-size: 42%; block-size: 6px; }
.w-hero b { inline-size: 38px; block-size: 12px; border-radius: 999px; margin-block-start: 0.25rem; background: var(--itw-accent); }

.w-row { gap: 0.35rem; flex: none; }
.w-row i { flex: 1; block-size: 34px; border-radius: 6px; background: var(--itw-white); box-shadow: inset 0 0 0 1px var(--itw-border); }

.w-band {
	align-items: center;
	gap: 0.35rem;
	margin-block-start: auto;
	padding: 0.35rem 0.4rem;
	border-radius: 6px;
	background: var(--itw-midnight);
	flex: none;
}
.w-band i { inline-size: 12px; block-size: 4px; background: var(--itw-accent); }
.w-band b { inline-size: 40%; block-size: 3px; background: rgba(250, 248, 245, 0.3); }

/* ---- The words ---- */
.itw-work__body { padding-block-start: 1.1rem; }

.itw-work__meta {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--itw-text-muted);
}

.itw-work__dot {
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: var(--itw-accent);
}

.itw-work__card h3 {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
	letter-spacing: -0.02em;
	margin-block-start: 0.5rem;
}

.itw-work__card h3 a { color: inherit; text-decoration: none; }
.itw-work__card h3 a:hover { color: var(--itw-accent-text); }

.itw-work__card p {
	max-inline-size: 44ch;
	margin-block-start: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--itw-text-muted);
}

.itw-work__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin-block-start: 0.9rem;
}

.itw-work__chips li {
	padding: 0.3rem 0.65rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-surface);
	box-shadow: inset 0 0 0 1px var(--itw-border);
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--itw-text-muted);
	white-space: nowrap;
}

.itw-work__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 1rem;
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-accent-text);
	text-decoration: none;
}

.itw-work__live svg {
	inline-size: 12px;
	block-size: 12px;
	transition: transform var(--itw-dur) var(--itw-ease-out);
}

.itw-work__live:hover svg,
.itw-work__live:focus-visible svg { transform: translate(2px, -2px); }

.itw-work__more {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}

/* ---- Arriving ---- */
.js .itw-work__card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

.js .itw-work__grid.is-in .itw-work__card { opacity: 1; transform: none; }
.js .itw-work__grid.is-in .itw-work__card:nth-child(2) { transition-delay: var(--itw-in-step); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 780px) {
	.itw-work__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.js .itw-work__card { opacity: 1; transform: none; transition: none; }
	.itw-work__shot { transition: none; }
}


/* ==========================================================================
   11o. THE PROCESS

   Four things in order, set in type. No stack, no pinning, no scroll trick.

   Three of those were tried here and all three read as a performance put on
   over a list. The page already has its one piece of theatre in the hero,
   and a second one further down does not double the effect, it halves both.
   What is left is the part that was always doing the work: a number, a line,
   and enough room around them.
   ========================================================================== */

.itw-flow {
	padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
	background: var(--itw-paper);
}

.itw-flow__list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-inline-size: 56rem;
	margin-inline: auto;
}

/* A hairline between steps rather than a card around each one. Boxes would
   make four small things where the page wants one calm one. */
.itw-flow__step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
	align-items: start;
	padding-block: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
	border-block-start: 1px solid var(--itw-border);
}

.itw-flow__step:first-child { border-block-start: 0; padding-block-start: 0; }
.itw-flow__step:last-child { padding-block-end: 0; }

/* Large, quiet, and set in the mono face so it reads as a marker rather than
   as a heading competing with the one beside it. */
.itw-flow__n {
	font-family: var(--itw-font-mono);
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--itw-accent);
	opacity: 0.42;
	/* Optically aligned with the cap height of the heading beside it, which
	   sits a little lower than the top of its line box. */
	padding-block-start: 0.06em;
	min-inline-size: 2.4ch;
}

.itw-flow__say h3 {
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
	line-height: 1.16;
	letter-spacing: -0.025em;
	margin-block-end: 0.6rem;
}

.itw-flow__say > p:not(.itw-flow__note) {
	max-inline-size: 62ch;
	font-size: var(--itw-fs-lead);
	line-height: 1.7;
	color: var(--itw-text-muted);
}

/* Only the two facts worth stating sit here, and both are the studio's own. */
.itw-flow__note {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: 1.1rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-surface);
	box-shadow: inset 0 0 0 1px var(--itw-border);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--itw-text-muted);
}

.itw-flow__note::before {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--itw-accent);
}

.itw-flow__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
}

/* ---- Arriving ----
   The same rise the section headings use, so the page has one way of
   introducing things rather than a different idea in every section. */
.js .itw-flow__step > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

.js .itw-flow__step.is-on > * { opacity: 1; transform: none; }

/* The number leads, the words follow. */
.js .itw-flow__step > *:nth-child(2) { transition-delay: var(--itw-in-step); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 620px) {
	/* The number moves above the heading. Beside it on a narrow screen it
	   takes a quarter of the width and leaves the sentence in a gutter. */
	.itw-flow__step {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
	}

	.itw-flow__n { min-inline-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.js .itw-flow__step > * { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   11q. QUESTIONS

   Two columns of questions that open where they stand. Any number can be
   open at once: people rarely want one answer, they want to check two or
   three before they decide, and closing the last one for them is a small
   rudeness.
   ========================================================================== */

.itw-faq {
	padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
	background: var(--itw-bg);
}

.itw-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
	align-items: start;
}

.itw-faq__item {
	border-radius: 16px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border);
	transition: box-shadow var(--itw-dur) var(--itw-ease);
}

.itw-faq__item:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(16, 16, 20, 0.16);
}

.itw-faq__item.is-open {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(217, 119, 6, 0.35),
		0 8px 22px rgba(16, 16, 20, 0.05);
}

/* The heading carries the button rather than the other way round, so the
   questions are still a list of headings to anything reading the page
   without styles. */
.itw-faq__item h3 { margin: 0; font-size: inherit; }

.itw-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	inline-size: 100%;
	padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.15rem) clamp(1rem, 0.8rem + 0.7vw, 1.35rem);
	border: 0;
	background: none;
	color: var(--itw-heading);
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-semi);
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: start;
	cursor: pointer;
}

/* ---- The sign ----
   Two bars. The upright one turns a quarter and disappears into the flat
   one, so a plus becomes a minus rather than a cross. */
.itw-faq__sign {
	position: relative;
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: 0.15rem;
}

.itw-faq__sign::before,
.itw-faq__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1.8px;
	margin-block-start: -0.9px;
	border-radius: 2px;
	background: var(--itw-accent);
	transition: transform 420ms var(--itw-ease-out);
}

.itw-faq__sign::after { transform: rotate(90deg); }

.itw-faq__item.is-open .itw-faq__sign::after { transform: rotate(0deg); }

/* ---- The answer ----
   Opened with a grid row rather than a height, so the animation works
   without measuring the text or fixing a number that will be wrong the
   moment the copy changes. */
.itw-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 460ms var(--itw-ease-out);
}

.itw-faq__a[hidden] { display: none; }

.itw-faq__item.is-open .itw-faq__a { grid-template-rows: 1fr; }

.itw-faq__a > p {
	overflow: hidden;
	margin: 0;
	padding-inline: clamp(1rem, 0.8rem + 0.7vw, 1.35rem);
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--itw-text-muted);
	opacity: 0;
	transition: opacity 320ms var(--itw-ease);
}

.itw-faq__item.is-open .itw-faq__a > p {
	/* The padding arrives with the row so the text is never cramped against
	   the question on the way open. */
	padding-block-end: clamp(1rem, 0.8rem + 0.7vw, 1.35rem);
	opacity: 1;
	transition-delay: 120ms;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 780px) {
	.itw-faq__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.itw-faq__a,
	.itw-faq__a > p,
	.itw-faq__sign::before,
	.itw-faq__sign::after { transition: none; }
}


/* ==========================================================================
   11p. THE WAY IN

   The last thing on the page, so the eye has one place to land: a round
   button, large enough that it reads as an object rather than a control.

   Everything else here is quiet on purpose. Seven sections have already had
   something happening in them, and the closing ask is worth more when it is
   the calm one.
   ========================================================================== */

.itw-ask {
	padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
	/* Paper, because the questions above it are on cream and two of the same
	   surface running together makes one long section out of two. */
	background: var(--itw-paper);
}

/* The same floating card as the end of the document, so the last two things
   on the page belong to each other. */
.itw-ask__card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
	padding: clamp(2rem, 1.4rem + 2.6vw, 4rem) clamp(1.5rem, 1rem + 2.6vw, 3.5rem);
	border-radius: 28px;
	background: var(--itw-midnight);
	color: var(--itw-dark-text);
	overflow: clip;
}

/* ---- The turning mark ----
   The one moving thing in the section, small and off to the side, asking
   for nothing. */
.itw-ask__mark {
	position: relative;
	inline-size: clamp(7rem, 5rem + 6vw, 11rem);
	aspect-ratio: 1;
	flex: none;
}

.itw-ask__ring {
	inline-size: 100%;
	block-size: 100%;
	animation: itw-ask-turn 26s linear infinite;
}

.itw-ask__ring text {
	font-family: var(--itw-font-heading);
	font-size: 14px;
	font-weight: var(--itw-fw-semi);
	fill: var(--itw-accent);
}

@keyframes itw-ask-turn {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.itw-ask__dot {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 7px;
	block-size: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--itw-accent);
}

/* ---- The words ---- */
.itw-ask__say h2 {
	font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--itw-dark-heading);
}

.itw-ask__say p {
	max-inline-size: 44ch;
	margin-block-start: clamp(0.9rem, 0.7rem + 0.6vw, 1.4rem);
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-dark-text);
}

/* ---- The button ---- */
.itw-ask__go {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
}

.itw-ask__btn {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: clamp(9rem, 7rem + 7vw, 13rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--itw-accent);
	color: var(--itw-midnight);
	font-family: var(--itw-font-heading);
	/* Larger than a normal button label. In a circle this size the old
	   setting left the words floating in the middle of a lot of amber. */
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
	font-weight: var(--itw-fw-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	text-decoration: none;
	transition: transform 320ms var(--itw-ease-out),
	            background-color 320ms var(--itw-ease);
}

.itw-ask__btn span { max-inline-size: 8ch; }

.itw-ask__btn:hover,
.itw-ask__btn:focus-visible { background: #E8880A; }

/* Pressed, not lifted. A round control that sinks reads as something being
   pushed; one that rises reads as a card. */
.itw-ask__btn:active { transform: scale(0.955); }

/* The ring. It leaves from the edge of the button and fades as it goes, the
   way a press spreads rather than a border appearing. */
.itw-ask__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--itw-accent);
	opacity: 0;
	transform: scale(1);
	pointer-events: none;
}

.itw-ask__btn:hover::after,
.itw-ask__btn:focus-visible::after {
	animation: itw-ask-ripple 1.9s var(--itw-ease-out) infinite;
}

/* On a touch screen there is no hover, so the ring answers the press. */
.itw-ask__btn:active::after {
	animation: itw-ask-ripple 700ms var(--itw-ease-out);
}

@keyframes itw-ask-ripple {
	0%   { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.42); }
}

/* Part of the sentence block rather than a row of its own. On its own row it
   forced the card taller than the button, and the extra height showed as a
   band of empty midnight along the bottom. */
.itw-ask__note {
	margin-block-start: clamp(0.9rem, 0.7rem + 0.6vw, 1.4rem);
	font-size: 0.8125rem;
	color: var(--itw-dark-muted);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	/* Turned rather than rearranged: the same four things in the same order,
	   stacked and centred. */
	.itw-ask__card {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
	}

	.itw-ask__say p { margin-inline: auto; }
	.itw-ask__note { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.itw-ask__ring { animation: none; }

	.itw-ask__btn:hover::after,
	.itw-ask__btn:focus-visible::after,
	.itw-ask__btn:active::after { animation: none; }
}


/* ==========================================================================
   11r. THE ARC

   A line that goes up and over, with a word at each end. It says the whole
   business in one shape: something arrives, it is worked on, it lands.

   It also does a job between two dark cards. The closing panel and the
   footer are both midnight and both rounded, and set straight on top of one
   another they read as one broken thing rather than two. This is the light
   between them.
   ========================================================================== */

.itw-arc {
	padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
	background: var(--itw-bg);
	overflow: clip;
}

.itw-arc__draw {
	position: relative;
	max-inline-size: 54rem;
	margin-inline: auto;
}

.itw-arc__draw svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

.itw-arc__line {
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
}

/* Three lines rather than one. A single stroke reads as a diagram; three at
   slightly different radii read as a path with some air around it. */
.itw-arc__line:nth-of-type(2) { stroke-width: 1.2; }
.itw-arc__line:nth-of-type(3) { stroke-width: 1; }

/* Drawn as the section arrives, left to right. The dash length is set from
   the path's own measured length in the script, because a guessed number is
   wrong the moment the curve changes. */
.js .itw-arc__line {
	stroke-dasharray: var(--itw-arc-len, 1400);
	stroke-dashoffset: var(--itw-arc-len, 1400);
	transition: stroke-dashoffset var(--itw-in-draw) cubic-bezier(0.33, 0, 0.2, 1);
}

.js .itw-arc__draw.is-in .itw-arc__line { stroke-dashoffset: 0; }

.js .itw-arc__line:nth-of-type(2) { transition-delay: calc(var(--itw-in-step) * 1.4); }
.js .itw-arc__line:nth-of-type(3) { transition-delay: calc(var(--itw-in-step) * 2.8); }

/* ---- The marks on the line ---- */
.itw-arc__pin {
	position: absolute;
	display: grid;
	place-items: center;
	inline-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--itw-surface);
	box-shadow:
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.06),
		0 10px 24px rgba(16, 16, 20, 0.06);
	color: var(--itw-accent-text);
	translate: -50% -50%;
}

.itw-arc__pin svg { inline-size: 45%; block-size: 45%; }

/* Read off the curve rather than nudged into place: these are the points at
   a quarter, a half and three quarters along it, worked out from the control
   points. Placed by eye they drift the moment the curve is edited. */
.itw-arc__pin--1 { inset-inline-start: 26%; inset-block-start: 35%; }
.itw-arc__pin--2 { inset-inline-start: 50%; inset-block-start: 15%; }
.itw-arc__pin--3 { inset-inline-start: 74%; inset-block-start: 35%; }

.js .itw-arc__pin {
	opacity: 0;
	scale: 0.7;
	transition: opacity var(--itw-in-fade) var(--itw-ease), scale var(--itw-in-move) var(--itw-ease-out);
}

.js .itw-arc__draw.is-in .itw-arc__pin { opacity: 1; scale: 1; }

/* Each one lands as the line reaches it. */
.js .itw-arc__pin--1 { transition-delay: calc(var(--itw-in-draw) * 0.3); }
.js .itw-arc__pin--2 { transition-delay: calc(var(--itw-in-draw) * 0.5); }
.js .itw-arc__pin--3 { transition-delay: calc(var(--itw-in-draw) * 0.7); }

/* ---- The words at the ends ---- */
/* Large enough to carry the shape. At label size the two ends read as
   captions on a diagram and left the middle of the curve empty. */
.itw-arc__end {
	position: absolute;
	inset-block-end: -0.5rem;
	font-family: var(--itw-font-heading);
	font-size: clamp(0.9375rem, 0.75rem + 0.9vw, 1.5rem);
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
}

/* The word the whole shape is: from idea, over the arc, to a live web site,
   which is the studio's name written out as a picture. It sits where the eye
   was finding nothing. */
.itw-arc__to {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 56%;
	translate: -50% -50%;
	margin: 0;
	font-family: var(--itw-font-heading);
	font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);
	font-weight: var(--itw-fw-black);
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--itw-accent);
}

.js .itw-arc__to {
	opacity: 0;
	scale: 0.86;
	transition: opacity var(--itw-in-fade) var(--itw-ease), scale var(--itw-in-move) var(--itw-ease-out);
	transition-delay: calc(var(--itw-in-draw) * 0.45);
}

.js .itw-arc__draw.is-in .itw-arc__to { opacity: 1; scale: 1; }

.itw-arc__end--start { inset-inline-start: 0; color: var(--itw-heading); }
.itw-arc__end--finish { inset-inline-end: 0; color: var(--itw-heading); }

.js .itw-arc__end {
	opacity: 0;
	transition: opacity var(--itw-in-fade) var(--itw-ease);
}

.js .itw-arc__draw.is-in .itw-arc__end { opacity: 1; }
.js .itw-arc__end--finish { transition-delay: calc(var(--itw-in-draw) * 0.78); }

/* ---- Underneath ---- */
/* One quiet line, not a heading. Sitting directly above the footer, anything
   larger would be a third voice competing with the panel above it and the
   tagline below it, and all three would lose. */
.itw-arc__say {
	max-inline-size: 46ch;
	margin: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) auto 0;
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-text-muted);
	text-align: center;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 620px) {
	/* The end words move under the arc rather than beside it, where at this
	   width they would run into the curve. */
	.itw-arc__to { inset-block-start: 60%; }
	.itw-arc__pin { box-shadow: inset 0 0 0 1px var(--itw-border), 0 4px 12px rgba(16, 16, 20, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
	.js .itw-arc__line { stroke-dashoffset: 0; transition: none; }
	.js .itw-arc__pin { opacity: 1; scale: 1; transition: none; }
	.js .itw-arc__end { opacity: 1; transition: none; }
	.js .itw-arc__to { opacity: 1; scale: 1; transition: none; }
}
/* ==========================================================================
   PORTFOLIO PAGE
   ==========================================================================

   Added to the end of style.css, below the home page block. Nothing above it
   needs editing.

   It expects the tokens and the shared pieces the home page block already
   sets up: the surfaces, the timing values every arrival on the site runs at,
   the rounded joins, and the drifting light.

   ========================================================================== */


/* ==========================================================================
   12a. PORTFOLIO: THE OPENING

   Small on purpose. People arrive here to look at work, and a full screen of
   type between them and it is a door they have to open. The home page has a
   large hero because there it has something to explain; here it has only to
   name the room.
   ========================================================================== */

.itw-pf {
	position: relative;
	overflow: clip;
	padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) 0;
	background: var(--itw-bg);
}

/* Short on purpose. People come here to look at work, so the type at the top
   names the room and gets out of the way. Aligned to the top, not the bottom:
   set to end, the words sank to the floor of the column and left a hundred
   pixels of nothing above them. */
.itw-pf__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.5rem, 0.9rem + 3vw, 3.5rem);
	align-items: start;
	padding-block-end: clamp(1.1rem, 0.85rem + 1.2vw, 1.9rem);
}

.itw-pf__say { min-inline-size: 0; }

/* The second half in the muted tone: the claim, then the thing that makes the
   claim worth anything. */
.itw-pf__title {
	font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.9rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
	max-inline-size: 22ch;
}

.itw-pf__title em { font-style: normal; color: var(--itw-text-muted); }

.itw-pf__lead {
	max-inline-size: 44ch;
	margin-block-start: clamp(0.8rem, 0.65rem + 0.5vw, 1.1rem);
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-text-muted);
}


/* ---- The frame ----
   This site's own front page, running. It is the one thing on a portfolio
   page that can be shown without asking permission or waiting for a
   screenshot, and it is the strongest thing available: the page being looked
   at, looking at itself.

   Drawn rather than captured, so it costs no image, never blurs, and updates
   the moment the palette does. */
/* The buttons the line leads to. */
.itw-pf__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-block-start: clamp(1rem, 0.8rem + 0.7vw, 1.4rem);
}

.itw-pf__glass { perspective: 1600px; }

.itw-pf__frame {
	display: block;
	padding: 0.6rem;
	border-radius: 16px;
	background: var(--itw-surface);
	transform: rotateY(-4deg) rotateX(1.5deg);
	transform-origin: 30% 40%;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.05),
		0 16px 36px rgba(16, 16, 20, 0.07),
		0 40px 80px rgba(16, 16, 20, 0.07);
}

.itw-pf__chrome { display: flex; align-items: center; gap: 0.3rem; margin-block-end: 0.5rem; }

.itw-pf__chrome i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgba(16, 16, 20, 0.13); }
.itw-pf__chrome i:first-child { background: rgba(217, 119, 6, 0.5); }
.itw-pf__chrome b { flex: 1; block-size: 12px; margin-inline-start: 0.4rem; border-radius: 999px; background: rgba(16, 16, 20, 0.05); }

.itw-pf__view {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: var(--itw-bg);
	aspect-ratio: 16 / 10;
}

/* Runs down the page and starts again. The copy is duplicated by the script,
   so the loop distance is exactly half and there is no jump at the seam. */
.itw-pf__roll {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	/* The real page is far taller than the drawing it replaced, so the
	   duration is set from its own height rather than kept from before.
	   Measured at the old value it travelled 27 pixels a second, which is
	   movement nobody registers: the frame read as a still. */
	animation: itw-pf-roll 60s linear infinite;
}

.itw-pf__glass:hover .itw-pf__roll { animation-play-state: paused; }

@keyframes itw-pf-roll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -50%, 0); }
}

/* The page itself. It is this site's own front page, captured whole, which
   is the one thing a portfolio can show without asking anyone's permission.

   Lazy and async, because it is decorative and well below the fold on a
   phone. Width and height are stated so the frame has its shape before the
   file arrives and nothing jumps when it does. */
.itw-pf__roll img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}


/* ---- The band ----
   Where the work goes. The strip on the home page carries how the studio
   works; repeating that here would say nothing new, and on a portfolio page
   the question people actually have is whether you work where they are. */
.itw-pf__band {
	overflow: hidden;
	padding-block: clamp(0.75rem, 0.6rem + 0.5vw, 1.1rem);
	background: var(--itw-midnight);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.itw-pf__track {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 1rem + 1vw, 2rem);
	inline-size: max-content;
	animation: itw-pf-band 34s linear infinite;
}

.itw-pf__band:hover .itw-pf__track { animation-play-state: paused; }

@keyframes itw-pf-band {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.itw-pf__track span {
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.04em;
	color: var(--itw-dark-text);
	white-space: nowrap;
}

.itw-pf__track i {
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--itw-accent);
	flex: none;
}


/* ==========================================================================
   12b. THE WORK

   Two cards, the same size, side by side. A pinned column with the site
   scrolling past it was tried here three times and read as a trick each
   time. With two projects the plain version is also the honest one: two
   equal cards say the two pieces of work are equal, which they are.

   When there are five or six, this becomes a staggered grid. Not before:
   with two, uneven sizes read as one project mattering less.
   ========================================================================== */

/* No rounded join here. The country band above it is a thin strip, and a
   section rounding 34px over a strip that height leaves a sliver rather than
   a band. Same reason the marquee on the home page is left square. */
.itw-cases {
	padding-block: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
	background: var(--itw-paper);
}

.itw-cases__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
}

.itw-case { display: flex; flex-direction: column; }

/* The real screenshot, once a project has one. It fills the same box the
   drawn frame does, so a project with a picture and one without still line
   up in the grid. */
.itw-case__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	object-position: 50% 0;
}


/* ---- The shot ---- */
.itw-case__shot {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: var(--itw-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.05),
		0 16px 34px rgba(16, 16, 20, 0.07);
	transition: transform 520ms var(--itw-ease-out),
	            box-shadow 520ms var(--itw-ease-out);
}

.itw-case:hover .itw-case__shot,
.itw-case__shot:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(16, 16, 20, 0.14),
		0 4px 10px rgba(16, 16, 20, 0.06),
		0 26px 54px rgba(16, 16, 20, 0.1);
}

.itw-case__frame {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.7rem;
	aspect-ratio: 16 / 11;
}

.itw-case__chrome { display: flex; align-items: center; gap: 0.3rem; flex: none; }
.itw-case__chrome i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgba(16, 16, 20, 0.13); }
.itw-case__chrome i:first-child { background: rgba(217, 119, 6, 0.5); }
.itw-case__chrome b { flex: 1; block-size: 13px; margin-inline-start: 0.4rem; border-radius: 999px; background: rgba(16, 16, 20, 0.05); }

.itw-case__page {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	padding: 0.5rem;
	border-radius: 10px;
	background: var(--itw-bg);
	overflow: hidden;
}

.itw-case__page > span { display: flex; }
.itw-case__page :where(i, b) { display: block; border-radius: 3px; background: rgba(16, 16, 20, 0.09); }

.p-nav {
	align-items: center; gap: 0.3rem; padding: 0.35rem 0.4rem;
	border-radius: 6px; background: var(--itw-midnight); flex: none;
}
.p-nav i { inline-size: 14px; block-size: 4px; background: rgba(250, 248, 245, 0.45); }
.p-nav i:first-child { inline-size: 16px; background: var(--itw-accent); }
.p-nav b { inline-size: 24px; block-size: 10px; border-radius: 999px; margin-inline-start: auto; background: var(--itw-accent); }

.p-hero { flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.7rem 0.4rem 0.8rem; flex: none; }
.p-hero i:nth-child(1) { inline-size: 62%; block-size: 9px; background: rgba(16, 16, 20, 0.6); }
.p-hero i:nth-child(2) { inline-size: 42%; block-size: 6px; }
.p-hero b { inline-size: 38px; block-size: 12px; border-radius: 999px; margin-block-start: 0.25rem; background: var(--itw-accent); }

.p-row { gap: 0.35rem; flex: none; }
.p-row i { flex: 1; block-size: 34px; border-radius: 6px; background: var(--itw-white); box-shadow: inset 0 0 0 1px var(--itw-border); }

.p-split { gap: 0.4rem; align-items: center; flex: none; }
.p-split > i { inline-size: 44%; block-size: 44px; border-radius: 6px; background: rgba(217, 119, 6, 0.16); }
.itw-case__page .p-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; background: none; }
.p-lines b:nth-child(1) { inline-size: 84%; block-size: 5px; }
.p-lines b:nth-child(2) { inline-size: 66%; block-size: 5px; }
.p-lines b:nth-child(3) { inline-size: 46%; block-size: 5px; }

.p-wide { block-size: 40px; border-radius: 6px; background: rgba(16, 16, 20, 0.06); flex: none; }

.p-band {
	align-items: center; gap: 0.35rem; margin-block-start: auto;
	padding: 0.35rem 0.4rem; border-radius: 6px; background: var(--itw-midnight); flex: none;
}
.p-band i { inline-size: 12px; block-size: 4px; background: var(--itw-accent); }
.p-band b { inline-size: 40%; block-size: 3px; background: rgba(250, 248, 245, 0.3); }

/* ---- The words ---- */
.itw-case__body { padding-block-start: 1.1rem; }

.itw-case__meta {
	display: flex; align-items: center; gap: 0.55rem;
	font-size: 0.75rem; font-weight: 500; color: var(--itw-text-muted);
}

.itw-case__dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--itw-accent); }

.itw-case__body h2 {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-block-start: 0.5rem;
}

.itw-case__line {
	max-inline-size: 44ch;
	margin-block-start: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--itw-text-muted);
}

.itw-case__chips {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	list-style: none; padding: 0; margin-block-start: 0.9rem;
}

.itw-case__chips li {
	padding: 0.3rem 0.65rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-surface);
	box-shadow: inset 0 0 0 1px var(--itw-border);
	font-size: 0.6875rem; font-weight: 500; color: var(--itw-text-muted);
	white-space: nowrap;
}

.itw-case__live {
	display: inline-flex; align-items: center; gap: 0.4rem;
	margin-block-start: 1rem;
	font-family: var(--itw-font-heading);
	font-size: 0.875rem; font-weight: var(--itw-fw-semi);
	color: var(--itw-accent-text); text-decoration: none;
}

.itw-case__live svg { inline-size: 12px; block-size: 12px; transition: transform var(--itw-dur) var(--itw-ease-out); }
.itw-case__live:hover svg, .itw-case__live:focus-visible svg { transform: translate(2px, -2px); }

/* ---- Nothing to show yet ----
   A page that simply stops looks broken. This says why and offers the way
   on, and it disappears the moment the first project exists. */
.itw-cases__none {
	max-inline-size: 52ch;
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-text-muted);
}

.itw-cases__act { margin-block-start: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem); }


/* ---- Arriving ---- */
.js .itw-case {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

.js .itw-case.is-in { opacity: 1; transform: none; }
.js .itw-case:nth-child(2) { transition-delay: var(--itw-in-step); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.itw-pf__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.itw-pf__title { max-inline-size: none; }
	.itw-pf__frame { transform: none; }
}

@media (max-width: 780px) {
	.itw-cases__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.itw-pf__roll,
	.itw-pf__track { animation: none; }

	.js .itw-case { opacity: 1; transform: none; transition: none; }
	.itw-case__shot { transition: none; }
}
/* ==========================================================================
   CONTACT PAGE
   ==========================================================================

   Added to the end of style.css, below the home page and portfolio blocks.
   Nothing above it needs editing.

   It expects what those blocks already set up: the surfaces, the timing
   values every arrival on the site runs at, and the drifting light.

   ========================================================================== */


/* ==========================================================================
   13. CONTACT

   The whole page is one midnight card. Everywhere else on the site the dark
   arrives as a section inside a light page; here it is the page. That is
   what stops this reading as another stop on the tour: it is the end of one.

   Two things only, and no more. Every extra section on a contact page is
   another reason not to fill the form in, and the decision has already been
   made by the time anyone arrives here.
   ========================================================================== */

.itw-say {
	padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
	background: var(--itw-bg);
}

.itw-say__card {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);

	/* Larger than the 28px used elsewhere. At this size a corner reads as a
	   sheet laid on the page; at 28 it reads as a box with the corners taken
	   off. The difference is most of what makes a card look soft. */
	border-radius: 40px;
	background: var(--itw-midnight);
	color: var(--itw-dark-text);
}

/* The same drifting light the other dark sections use, so this belongs to
   the site rather than looking like a page from somewhere else. */
.itw-say__air {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.itw-say__air i {
	position: absolute;
	inline-size: 44vmax;
	block-size: 44vmax;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
}

.itw-say__air i:nth-child(1) {
	inset-block-start: -22%;
	inset-inline-end: -16%;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, transparent 68%);
	animation: itw-air-a 31s ease-in-out infinite;
}

.itw-say__air i:nth-child(2) {
	inset-block-end: -24%;
	inset-inline-start: -18%;
	background: radial-gradient(circle, rgba(180, 83, 9, 0.13) 0%, transparent 66%);
	animation: itw-air-b 39s ease-in-out infinite;
}

/* The form gets the wider half. It is the thing this page is for. */
/* Four pieces rather than two columns of stacked content, so each can be
   put where it belongs on a narrow screen instead of the whole left hand
   side moving as one lump. */
.itw-say__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 1.2rem + 3.5vw, 5rem);
	row-gap: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
	align-items: start;
}

.itw-say__head   { grid-column: 1; grid-row: 1; }
/* Back at the top of its row. Measured both ways: pushed to the foot it left
   200px between the sentence and the reasons, which reads worse than the
   same space below them, because a gap between two blocks of text looks like
   a mistake and a gap at the end of a column looks like the column ending. */
.itw-say__points { grid-column: 1; grid-row: 2; align-self: stretch; }
.itw-say__right  { grid-column: 2; grid-row: 1 / span 2; }

/* Across the foot of the card, not stacked under the shorter column. The
   form is the taller of the two, so anything left in the left hand column
   below the reasons sat above two hundred pixels of nothing. Full width it
   fills that, and the two direct ways of writing get more weight than they
   had buried in a corner. */
.itw-say__direct {
	grid-column: 1 / -1;
	grid-row: 3;
	display: grid;
	grid-template-columns: auto repeat(2, minmax(0, auto));
	align-items: center;
	gap: 0.75rem 1.5rem;
	justify-content: start;
}

/* ---- The reasons ---- */
.itw-say__title {
	font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.375rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
	color: var(--itw-dark-heading);
	max-inline-size: 18ch;
}

.itw-say__lead {
	max-inline-size: 42ch;
	margin-block-start: clamp(0.85rem, 0.7rem + 0.5vw, 1.2rem);
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-dark-text);
}

/* Three answers to the three things that stop people writing: that they are
   not ready, that they cannot afford it, and that nobody will reply. */
/* Boxes rather than a bulleted list. Two things at once: the padding fills
   the 151px the form is taller than this column, so the left hand side no
   longer ends halfway up; and it answers the panel on the right, which was
   a surface facing plain text.

   space-between rather than a fixed gap, so whatever is left over after the
   three boxes is shared between them instead of collecting at the bottom. */
.itw-say__points {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.6rem;
	block-size: 100%;
}

.itw-say__points li {
	position: relative;
	padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem) clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
	padding-inline-start: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	border-radius: 16px;
	background: rgba(250, 248, 245, 0.035);
	box-shadow:
		inset 0 1px 0 rgba(250, 248, 245, 0.07),
		inset 0 0 0 1px rgba(250, 248, 245, 0.08);
}

/* Beside the words, on the first line, wherever the box is. It was moved
   above the text on narrow screens on the theory that a bullet beside text
   in a narrow box leaves the words in a gutter. The boxes are not that
   narrow, and a dot on its own line reads as belonging to nothing. */
.itw-say__points li::before {
	content: "";
	position: absolute;
	inset-block-start: 1.55em;
	inset-inline-start: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--itw-accent);
}

.itw-say__points b {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: -0.01em;
	color: var(--itw-dark-heading);
}

.itw-say__points span {
	display: block;
	margin-block-start: 0.2rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--itw-dark-muted);
}

/* For anyone who would rather not use a form at all. Leaving this out is a
   small piece of rudeness that costs real enquiries. */
.itw-say__direct {
	margin-block-start: clamp(0.5rem, 0.4rem + 0.4vw, 1rem);
	padding-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-block-start: 1px solid rgba(250, 248, 245, 0.1);
}

.itw-say__direct p {
	font-family: var(--itw-font-heading);
	font-size: 0.6875rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--itw-dark-muted);
	margin-block-end: 0;
}

.itw-say__mail,
.itw-say__tel {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: 1rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: -0.01em;
	color: var(--itw-dark-heading);
	text-decoration: none;
	transition: color var(--itw-dur) var(--itw-ease);
}

.itw-say__tel { color: var(--itw-dark-text); }

.itw-say__mail:hover,
.itw-say__tel:hover { color: var(--itw-accent); }

/* The form sits on something rather than straight on the card. Without it
   the fields float on the dark with nothing holding them together, and the
   right hand side reads as three boxes rather than one thing to fill in.

   A panel a shade lighter than the card, with the same lit top edge every
   raised surface on the site has. */
.itw-say__right {
	min-inline-size: 0;
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
	border-radius: 24px;
	background: rgba(250, 248, 245, 0.035);
	box-shadow:
		inset 0 1px 0 rgba(250, 248, 245, 0.08),
		inset 0 0 0 1px rgba(250, 248, 245, 0.08);
}

/* The fields sit on the panel, so they need to be darker than it rather than
   lighter, or the whole side flattens into one tone. */
.itw-say__right .itw-field input,
.itw-say__right .itw-field textarea {
	background: rgba(10, 10, 14, 0.4);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.1);
}

.itw-say__right .itw-field input:hover,
.itw-say__right .itw-field textarea:hover {
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.18);
}

.itw-say__right .itw-field input:focus-visible,
.itw-say__right .itw-field textarea:focus-visible {
	background: rgba(10, 10, 14, 0.55);
	box-shadow:
		inset 0 0 0 1px var(--itw-accent),
		0 0 0 3px rgba(217, 119, 6, 0.22);
}


/* ---- The form ----
   Three fields. Every extra one costs replies, and none of the others tell
   us anything the first message will not. */
/* display: flex beats the browser's own rule for the hidden attribute, so
   without this the form stayed on screen after being sent and the
   confirmation appeared underneath it. */
.itw-form[hidden] { display: none; }

.itw-form {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 0.75rem + 0.5vw, 1.1rem);
}

.itw-field { display: flex; flex-direction: column; gap: 0.5rem; }

/* A real label above the field, not placeholder text inside it. Placeholders
   vanish the moment someone types, so a person checking their answers has
   nothing left to check them against. */
.itw-field label {
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.01em;
	color: var(--itw-dark-heading);
}

.itw-field input,
.itw-field textarea {
	inline-size: 100%;
	padding: 0.75rem 0.95rem;
	border: 0;
	border-radius: 12px;
	background: rgba(250, 248, 245, 0.05);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.12);
	color: var(--itw-dark-heading);
	font-family: var(--itw-font-body);
	font-size: 1rem;
	line-height: 1.5;
	transition: box-shadow var(--itw-dur) var(--itw-ease),
	            background-color var(--itw-dur) var(--itw-ease);
}

/* Measured against the other column rather than picked. At six lines the form
   stood 199px taller than everything beside it, and that difference is the
   empty space at the foot of the left hand side. This closes most of it, and
   the box can still be dragged by anyone who wants more room. */
.itw-field textarea { resize: vertical; min-block-size: 4.5rem; }

.itw-field input:hover,
.itw-field textarea:hover {
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.2);
}

/* The focused field is the brightest thing on the card, because it is the
   thing being used. */
.itw-field input:focus-visible,
.itw-field textarea:focus-visible {
	outline: 0;
	background: rgba(250, 248, 245, 0.07);
	box-shadow:
		inset 0 0 0 1px var(--itw-accent),
		0 0 0 3px rgba(217, 119, 6, 0.22);
}

.itw-field__hint {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--itw-dark-muted);
}

.itw-form__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: flex-start;
	padding: 0.9rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: var(--itw-accent);
	color: var(--itw-midnight);
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: transform 320ms var(--itw-ease-out),
	            background-color 320ms var(--itw-ease);
}

.itw-form__send svg { inline-size: 14px; block-size: 14px; }

.itw-form__send:hover,
.itw-form__send:focus-visible { background: #E8880A; }

.itw-form__send:active { transform: translateY(1px); }

.itw-form__note {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--itw-dark-muted);
	max-inline-size: 46ch;
}

/* ==========================================================================
   13b. THE OTHER WAY IN

   Below the card, not inside it. Next to the form it would compete with the
   form, and people would take the easier of the two: a message with none of
   the detail the form asks for, which costs a round trip to get back.

   Down here it catches the people who were never going to fill the form in
   at all, which is who it is for.
   ========================================================================== */

.itw-wa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
	margin-block-start: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
	border-radius: 28px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 1px 2px rgba(16, 16, 20, 0.04),
		0 10px 24px rgba(16, 16, 20, 0.05);
}

.itw-wa__say { flex: 1; min-inline-size: 18ch; }

.itw-wa__title {
	font-family: var(--itw-font-heading);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	font-weight: var(--itw-fw-semi);
	letter-spacing: -0.02em;
	color: var(--itw-heading);
}

.itw-wa__line {
	max-inline-size: 52ch;
	margin-block-start: 0.35rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--itw-text-muted);
}

/* Green, not amber. It is the one control on the site that leaves for
   somewhere else, and it should look like the place it goes to rather than
   like the buttons that keep you here. */
.itw-wa__go {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	flex: none;
	padding: 0.85rem 1.35rem;
	border-radius: 12px;
	background: #1FA855;
	color: #FFFFFF;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 320ms var(--itw-ease-out),
	            background-color 320ms var(--itw-ease);
}

.itw-wa__go svg { inline-size: 18px; block-size: 18px; flex: none; }

.itw-wa__go:hover,
.itw-wa__go:focus-visible { background: #199247; }

.itw-wa__go:active { transform: translateY(1px); }


/* ---- When something is wrong ----
   Under the field it belongs to, tied to it with aria-describedby so it is
   read out with the field rather than as a loose sentence somewhere on the
   page. Amber rather than red: the brand has no red, and one is not needed
   to say a name is missing. */
.itw-field__bad {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--itw-accent);
}

.itw-say__right .itw-field input[aria-invalid="true"],
.itw-say__right .itw-field textarea[aria-invalid="true"] {
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.55);
}

/* For the failures that belong to no single field: a refused nonce, a
   tripped honeypot, a mail server that would not take it. */
.itw-form__bad {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	background: rgba(217, 119, 6, 0.1);
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.35);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--itw-dark-heading);
}

/* The honeypot. Out of sight and out of the tab order, but not display:none
   and not hidden: some bots skip anything a browser would not render, and
   the whole point is that they fill it in. */
.itw-trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ---- Once it has gone ----
   The form is replaced rather than left sitting there with a note under it.
   A form still on screen after it has been sent invites a second send, and
   people do it.

   role="status" and aria-live mean a screen reader hears the confirmation
   without the focus being moved out from under anyone. */
.itw-sent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(0.5rem, 0.4rem + 0.5vw, 1rem) 0;
}

.itw-sent[hidden] { display: none; }

.itw-sent__mark {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: 1.1rem;
	border-radius: 50%;
	background: rgba(217, 119, 6, 0.14);
	color: var(--itw-accent);
}

.itw-sent__mark svg { inline-size: 1.75rem; block-size: 1.75rem; }

/* The ring closes, then the tick is drawn inside it. Both are one path each
   with its own length hidden and then given back, which is the cheapest
   drawing there is and the only one that cannot go out of step with itself. */
.itw-sent__ring {
	stroke-dasharray: 88;
	stroke-dashoffset: 88;
	transform-origin: 50% 50%;
	transform: rotate(-90deg);
}

.itw-sent__tick {
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
}

.itw-sent.is-in .itw-sent__ring {
	animation: itw-sent-draw 620ms var(--itw-ease-out) forwards;
}

.itw-sent.is-in .itw-sent__tick {
	animation: itw-sent-draw 420ms var(--itw-ease-out) 480ms forwards;
}

@keyframes itw-sent-draw {
	to { stroke-dashoffset: 0; }
}

.itw-sent__title {
	font-family: var(--itw-font-heading);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.025em;
	color: var(--itw-dark-heading);
}

.itw-sent__line {
	max-inline-size: 46ch;
	margin-block-start: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--itw-dark-text);
}

.js .itw-sent.is-in .itw-sent__title,
.js .itw-sent.is-in .itw-sent__line {
	animation: itw-sent-rise var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.js .itw-sent.is-in .itw-sent__line { animation-delay: var(--itw-in-step); }

@keyframes itw-sent-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}


/* ---- Arriving ----
   The same rise the rest of the site uses. The form does not wait for it:
   anything that delays the field someone came here to type in is a cost with
   nothing bought. */
.js .itw-say__left > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

.js .itw-say__left.is-in > * { opacity: 1; transform: none; }

.js .itw-say__left > *:nth-child(2) { transition-delay: var(--itw-in-step); }
.js .itw-say__left > *:nth-child(3) { transition-delay: calc(var(--itw-in-step) * 2); }
.js .itw-say__left > *:nth-child(4) { transition-delay: calc(var(--itw-in-step) * 3); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	/* Heading, then the form, then the rest. Everything that was above the
	   form was pushing the thing this page exists for off the first screen.
	   Now only the heading sits above it. */
	.itw-say__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }

	.itw-say__head   { grid-column: 1; grid-row: 1; }
	.itw-say__right  { grid-column: 1; grid-row: 2; }
	.itw-say__points { grid-column: 1; grid-row: 3; }
	.itw-say__direct { grid-column: 1; grid-row: 4; }
	.itw-say__direct { justify-content: stretch; }

	/* Centred, because a single column of ranged left text beside nothing
	   reads as a column that lost its other half. */
	.itw-say__head { text-align: center; }
	.itw-say__title { max-inline-size: none; }
	.itw-say__lead { margin-inline: auto; }

	.itw-field label { text-align: start; }

	/* Full width, so the two things a person can press are the two widest
	   things on the screen and neither can be missed. */
	.itw-form__send { align-self: stretch; }
	.itw-sent { align-items: center; text-align: center; }

	/* The panel keeps its edges on a phone but loses most of its padding.
	   At this width the card is already a frame; a second one inside it just
	   takes room away from the fields. */
	.itw-say__right {
		padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem);
		border-radius: 20px;
	}

	/* Three across, which is one band instead of three stacked boxes. The
	   dot stays beside the words. */
	.itw-say__points {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.6rem;
		block-size: auto;
	}

	.itw-say__points b { font-size: 0.875rem; }
	.itw-say__points span { font-size: 0.8125rem; }

	.itw-say__direct {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
		text-align: center;
	}

	.itw-say__direct p { grid-column: 1 / -1; margin-block-end: 0; }

	.itw-say__mail,
	.itw-say__tel {
		margin-block-start: 0;
		padding: 0.75rem 0.9rem;
		border-radius: 12px;
		background: rgba(250, 248, 245, 0.04);
		box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.09);
		font-size: 0.875rem;
		overflow-wrap: anywhere;
	}

	/* The other way in, also full width and centred. */
	.itw-wa { text-align: center; justify-content: center; }
	.itw-wa__say { flex-basis: 100%; }
	.itw-wa__line { margin-inline: auto; }
	.itw-wa__go { flex: 1; justify-content: center; }
}

@media (max-width: 620px) {
	/* Three across stops working once each box is a few words wide. */
	.itw-say__points { grid-template-columns: minmax(0, 1fr); }
	.itw-say__direct { grid-template-columns: minmax(0, 1fr); }

	/* Corners come in with the card. A 40px radius on a 340px wide card eats
	   the corner of the content inside it. */
	.itw-say__card { border-radius: 26px; }
	.itw-wa { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.itw-say__air i:nth-child(n) { animation: none; }

	/* The confirmation still arrives, it just does not draw itself. */
	.itw-sent.is-in .itw-sent__ring,
	.itw-sent.is-in .itw-sent__tick { animation: none; stroke-dashoffset: 0; }

	.js .itw-sent.is-in .itw-sent__title,
	.js .itw-sent.is-in .itw-sent__line { animation: none; }
	.js .itw-say__left > * { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
   SERVICE PAGES
   ==========================================================================

   Added to the end of style.css, below the home, portfolio and contact
   blocks. Nothing above it needs editing.

   Two class names here were renamed after a collision with the theme's own:
   the arrival class is itw-up, not itw-rise, and the card is itw-inc, not
   itw-card. Both of those names already belong to something else in
   style.css, and reusing them broke the layout in ways that were hard to
   trace back.

   ========================================================================== */


/* ==========================================================================
   THE HERO: A FORM, AND A ROOM TO PUT IT IN
   ==========================================================================

   The visual on this side was five different objects before this one, and
   none of them did anything. A form does: somebody reading about the service
   can ask for it without going anywhere, and the answer arrives with the
   service already named.

   ========================================================================== */


/* ==========================================================================
   THE BACKGROUND

   One flat colour reads as an empty wall. This is three things at three
   depths, which is what a room is: light at the back, a floor under it, and
   a field of dots in front.

   The floor is the part that makes it 3D rather than decorated. It is a real
   plane, laid down in perspective and receding to a horizon, so everything
   standing on it has somewhere to stand.
   ========================================================================== */

.itw-svc {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem) 0;
	background: var(--itw-bg);
}

/* Words on one side, the form on the other. The form gets a shade less room
   because three fields need less than a heading and a paragraph do. */
.itw-svc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);
	align-items: center;
	padding-block-end: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.itw-svc__say { min-inline-size: 0; }


/* ---- The badge ----
   Names the service before the heading does, which lets the heading be a
   claim rather than a label. */
.itw-svc__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-surface);
	box-shadow: inset 0 0 0 1px var(--itw-border), 0 4px 14px rgba(16, 16, 20, 0.05);
	font-family: var(--itw-font-heading);
	font-size: 0.75rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: -0.005em;
	color: var(--itw-heading);

	/* Clear of the heading. There was no gap at all: the badge and the first
	   line of the h1 were touching. */
	margin-block-end: clamp(0.7rem, 0.6rem + 0.5vw, 1.1rem);
}

.itw-svc__badge i {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--itw-accent);
}

/* ---- What you get ----
   Two across rather than a row of pills. Pills hold two or three words;
   these say something, and side by side four of them cost the height of
   two. */
.itw-svc__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin-block-start: clamp(1rem, 0.85rem + 0.7vw, 1.4rem);
}

.itw-svc__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 0.55rem;
	padding: 0.6rem 0.75rem;
	border-radius: 12px;
	background: var(--itw-surface);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px var(--itw-border);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--itw-text-muted);
}

.itw-svc__tick {
	display: grid;
	place-items: center;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	margin-block-start: 0.05rem;
	border-radius: 50%;
	background: rgba(217, 119, 6, 0.14);
	color: var(--itw-accent-text);
}

.itw-svc__tick svg { inline-size: 0.6rem; block-size: 0.6rem; }

.itw-svc__see {
	align-self: center;
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-text-muted);
	text-decoration: none;
	text-underline-offset: 4px;
	transition: color var(--itw-dur) var(--itw-ease);
}

.itw-svc__see:hover { color: var(--itw-accent-text); text-decoration: underline; }


/* ---- Light at the back ---- */
.itw-mesh {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: clip;
	pointer-events: none;
}

.itw-mesh i {
	position: absolute;
	inline-size: 54vmax;
	block-size: 54vmax;
	border-radius: 50%;
	filter: blur(80px);
}

.itw-mesh i:nth-child(1) {
	inset-block-start: -28%;
	inset-inline-end: -14%;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.22) 0%, transparent 66%);
	animation: itw-mesh-a 27s ease-in-out infinite;
}

.itw-mesh i:nth-child(2) {
	inset-block-end: -32%;
	inset-inline-start: -18%;
	background: radial-gradient(circle, rgba(180, 83, 9, 0.14) 0%, transparent 64%);
	animation: itw-mesh-b 35s ease-in-out infinite;
}

.itw-mesh i:nth-child(3) {
	inset-block-start: 12%;
	inset-inline-start: 30%;
	inline-size: 36vmax;
	block-size: 36vmax;
	background: radial-gradient(circle, rgba(16, 16, 20, 0.06) 0%, transparent 62%);
	animation: itw-mesh-c 31s ease-in-out infinite;
}

@keyframes itw-mesh-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-7%, 9%, 0) scale(1.15); }
}

@keyframes itw-mesh-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
	50%      { transform: translate3d(8%, -7%, 0) scale(1); }
}

@keyframes itw-mesh-c {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(6%, 5%, 0); }
}

/* ---- The floor ----
   A plane tipped away from the eye. The lines converge because the plane is
   actually turned in space, not because they were drawn narrowing, and that
   is the difference between depth and a picture of depth.

   It runs towards the viewer for ever: the grid is twice as tall as it needs
   to be and slides by exactly one square, so the loop has no seam. */
.itw-floor {
	position: absolute;
	inset-inline: -30%;
	inset-block-end: 0;
	block-size: 52%;
	z-index: -2;
	overflow: clip;
	pointer-events: none;
	perspective: 340px;
	perspective-origin: 50% 0%;
	/* Held to the lower part of the room. Run further up it crosses the
	   heading, and a grid behind type makes the type harder to read for
	   nothing gained. */
	mask-image: linear-gradient(180deg, transparent, #000 55%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, #000 88%, transparent);
}

.itw-floor i {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 200%;
	transform-origin: 50% 0%;
	transform: rotateX(72deg);
	background-image:
		repeating-linear-gradient(90deg, rgba(16, 16, 20, 0.1) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(180deg, rgba(16, 16, 20, 0.1) 0 1px, transparent 1px 64px);
	animation: itw-floor-run 9s linear infinite;
}

@keyframes itw-floor-run {
	from { transform: rotateX(72deg) translateY(0); }
	to   { transform: rotateX(72deg) translateY(64px); }
}

/* ---- Dots in front ----
   Three sheets at different sizes and speeds. Two things moving at different
   rates is the oldest way of saying one is nearer than the other. */
.itw-dots {
	position: absolute;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 66% 58% at 50% 40%, #000 26%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 66% 58% at 50% 40%, #000 26%, transparent 76%);
}

.itw-dots i {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(16, 16, 20, 0.2) 1px, transparent 1px);
}

.itw-dots i:nth-child(1) { background-size: 26px 26px; opacity: 0.45; animation: itw-dots-a 24s linear infinite; }
.itw-dots i:nth-child(2) { background-size: 44px 44px; opacity: 0.3;  animation: itw-dots-b 34s linear infinite; }
.itw-dots i:nth-child(3) { background-size: 78px 78px; opacity: 0.2;  animation: itw-dots-c 46s linear infinite; }

@keyframes itw-dots-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(26px, 26px, 0); } }
@keyframes itw-dots-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-44px, 44px, 0); } }
@keyframes itw-dots-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(78px, -78px, 0); } }


/* ==========================================================================
   THE PANEL

   Midnight, so it stands off the room rather than sitting in it, and so the
   form fields can be the dark boxes they already are everywhere else on the
   site rather than a second set of light ones.
   ========================================================================== */

.itw-svc__panel {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
	border-radius: 26px;
	background: var(--itw-midnight);
	color: var(--itw-dark-text);
	box-shadow:
		inset 0 1px 0 rgba(250, 248, 245, 0.06),
		0 2px 6px rgba(16, 16, 20, 0.06),
		0 22px 50px rgba(16, 16, 20, 0.13),
		0 52px 96px rgba(16, 16, 20, 0.09);
}

/* The same drifting light the other dark panels have, so this belongs to the
   site rather than being a black box dropped on it. */
.itw-svc__air { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.itw-svc__air i {
	position: absolute;
	inline-size: 34vmax;
	block-size: 34vmax;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
}

.itw-svc__air i:nth-child(1) {
	inset-block-start: -30%;
	inset-inline-end: -20%;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.24) 0%, transparent 68%);
	animation: itw-mesh-a 29s ease-in-out infinite;
}

.itw-svc__air i:nth-child(2) {
	inset-block-end: -32%;
	inset-inline-start: -22%;
	background: radial-gradient(circle, rgba(180, 83, 9, 0.15) 0%, transparent 66%);
	animation: itw-mesh-b 37s ease-in-out infinite;
}

.itw-svc__ask {
	font-family: var(--itw-font-heading);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.025em;
	color: var(--itw-dark-heading);
}

.itw-svc__note {
	margin-block: 0.35rem clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--itw-dark-muted);
}

/* ---- The form ----
   Same three fields, same labels above rather than inside, same focus ring
   as the contact page. A visitor who has seen one has seen both.
   ========================================================================== */

.itw-form[hidden] { display: none; }

.itw-form {
	display: flex;
	flex-direction: column;
	gap: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
}

/* Name and email side by side. On their own rows they cost an extra field's
   height for two answers that are each a few characters long. */
.itw-form__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
}

.itw-field { display: flex; flex-direction: column; gap: 0.45rem; }

.itw-field label {
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-dark-heading);
}

.itw-field input,
.itw-field textarea {
	inline-size: 100%;
	padding: 0.7rem 0.9rem;
	border: 0;
	border-radius: 12px;
	background: rgba(10, 10, 14, 0.45);
	box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.11);
	color: var(--itw-dark-heading);
	font-family: var(--itw-font-body);
	/* Sixteen pixels or a phone zooms the page when the field is tapped. */
	font-size: 1rem;
	line-height: 1.5;
	transition: box-shadow var(--itw-dur) var(--itw-ease),
	            background-color var(--itw-dur) var(--itw-ease);
}

.itw-field textarea { resize: vertical; min-block-size: 4.5rem; }

.itw-field input:hover,
.itw-field textarea:hover { box-shadow: inset 0 0 0 1px rgba(250, 248, 245, 0.2); }

.itw-field input:focus-visible,
.itw-field textarea:focus-visible {
	outline: 0;
	background: rgba(10, 10, 14, 0.6);
	box-shadow:
		inset 0 0 0 1px var(--itw-accent),
		0 0 0 3px rgba(217, 119, 6, 0.22);
}

.itw-form__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: stretch;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: var(--itw-accent);
	color: var(--itw-midnight);
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: transform 320ms var(--itw-ease-out), background-color 320ms var(--itw-ease);
}

.itw-form__send svg { inline-size: 14px; block-size: 14px; }
.itw-form__send:hover, .itw-form__send:focus-visible { background: #E8880A; }
.itw-form__send:active { transform: translateY(1px); }

/* ---- Once it has gone ---- */
.itw-sent { display: flex; flex-direction: column; align-items: flex-start; }
.itw-sent[hidden] { display: none; }

.itw-sent__mark {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: 0.9rem;
	border-radius: 50%;
	background: rgba(217, 119, 6, 0.14);
	color: var(--itw-accent);
}

.itw-sent__mark svg { inline-size: 1.6rem; block-size: 1.6rem; }

.itw-sent__ring { stroke-dasharray: 88; stroke-dashoffset: 88; transform-origin: 50% 50%; transform: rotate(-90deg); }
.itw-sent__tick { stroke-dasharray: 22; stroke-dashoffset: 22; }

.itw-sent.is-in .itw-sent__ring { animation: itw-sent-draw 620ms var(--itw-ease-out) forwards; }
.itw-sent.is-in .itw-sent__tick { animation: itw-sent-draw 420ms var(--itw-ease-out) 480ms forwards; }

@keyframes itw-sent-draw { to { stroke-dashoffset: 0; } }

.itw-sent__title {
	font-family: var(--itw-font-heading);
	font-size: 1.125rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.025em;
	color: var(--itw-dark-heading);
}

.itw-sent__line {
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--itw-dark-text);
}


/* ==========================================================================
   RESPONSIVE AND REDUCED MOTION
   ========================================================================== */

@media (max-width: 620px) {
	/* Two across stops working once each is three words on four lines. */
	.itw-svc__points { grid-template-columns: minmax(0, 1fr); }
	.itw-form__pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.itw-svc__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

	/* Centred. A single column of ranged left text with nothing beside it
	   reads as a column that lost its other half, and the badge and buttons
	   look stranded at one edge. */
	.itw-svc__say { text-align: center; }
	.itw-svc__title,
	.itw-svc__lead { max-inline-size: none; margin-inline: auto; }
	.itw-svc__actions { justify-content: center; }
	.itw-svc__points { text-align: start; }

	/* Labels stay ranged left inside the panel: a centred form label sits
	   nowhere near the box it names. */
	.itw-svc__panel { text-align: start; }
	.itw-svc__title { max-inline-size: none; }

	/* The floor is a wide shallow plane. On a narrow screen it is mostly
	   horizon and reads as a smudge, so it goes. */
	.itw-floor,
	.itw-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.itw-mesh i:nth-child(n),
	.itw-dots i:nth-child(n),
	.itw-floor i:nth-child(n),
	.itw-svc__air i:nth-child(n) { animation: none; }

	.itw-sent.is-in .itw-sent__ring,
	.itw-sent.is-in .itw-sent__tick { animation: none; stroke-dashoffset: 0; }
}


/* ==========================================================================
   THE SCENE

   A desk, a screen, a phone, a plant, a mug. Flat shapes, drawn in the
   brand's own colours, in place of the stock illustration the reference
   uses.

   It is not a person. Five attempts at a figure were made and every one
   looked cheap, which is the risk with a drawn character: it is either very
   good or it is obviously not, and there is nothing in between. A workspace
   carries the same warmth and cannot fail that way.

   Everything reads one 16 second loop, so nothing drifts out of step.
   ========================================================================== */

.itw-scene {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 0.86;
}

.itw-scene__glow {
	position: absolute;
	inset: 10% 4%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 55%, rgba(217, 119, 6, 0.2), transparent 66%);
	filter: blur(46px);
}

.itw-scene__art {
	position: relative;
	inline-size: min(94%, 30rem);
	aspect-ratio: 1 / 0.82;
}

.itw-scene__art > span { position: absolute; }
/* The strike element is used for the To in the wordmark, so it has to stay
   inline. As a block it put Idea, To and Web on three lines. */
.itw-scene__art :where(i, b, u) { display: block; }
.itw-scene__art s { display: inline; }

/* ---- The wall behind ---- */
.sc-wall { inset: 0 6% 22% 6%; }

.sc-wall i {
	position: absolute;
	border-radius: 50%;
	background: rgba(217, 119, 6, 0.09);
}

.sc-wall i:nth-child(1) {
	inline-size: 46%;
	aspect-ratio: 1;
	inset-block-start: 4%;
	inset-inline-end: 2%;
	animation: itw-sc-breathe 16s ease-in-out infinite;
}

.sc-wall i:nth-child(2) {
	inline-size: 26%;
	aspect-ratio: 1;
	inset-block-start: 30%;
	inset-inline-start: 4%;
	background: rgba(16, 16, 20, 0.05);
	animation: itw-sc-breathe 16s ease-in-out -6s infinite;
}

@keyframes itw-sc-breathe {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

/* ---- A shelf, because a wall with nothing on it is a wall ---- */
.sc-shelf {
	display: flex;
	align-items: flex-end;
	gap: 4%;
	inset: 6% 8% auto auto;
	inline-size: 30%;
	block-size: 12%;
}

.sc-shelf b {
	inline-size: 16%;
	border-radius: 2px 2px 0 0;
	background: var(--itw-midnight);
	opacity: 0.85;
}

.sc-shelf b:nth-child(1) { block-size: 74%; }
.sc-shelf b:nth-child(2) { block-size: 92%; background: var(--itw-accent); }
.sc-shelf b:nth-child(3) { block-size: 62%; }

.sc-shelf u {
	position: absolute;
	inset: auto 0 -8% 0;
	block-size: 4px;
	border-radius: 2px;
	background: rgba(16, 16, 20, 0.16);
}

/* ---- The plant ---- */
.sc-plant {
	inset: auto auto 19.5% 6%;
	inline-size: 13%;
	aspect-ratio: 1 / 1.5;
}

.sc-plant i {
	position: absolute;
	inset-block-end: 34%;
	inset-inline-start: 50%;
	inline-size: 22%;
	block-size: 52%;
	border-radius: 60% 0 60% 0;
	background: #4F7A52;
	transform-origin: bottom center;
}

.sc-plant i:nth-child(1) { rotate: -26deg; animation: itw-sc-leaf 16s ease-in-out infinite; }
.sc-plant i:nth-child(2) { rotate: 4deg; block-size: 62%; animation: itw-sc-leaf 16s ease-in-out -5s infinite; }
.sc-plant i:nth-child(3) { rotate: 30deg; background: #5E8C61; animation: itw-sc-leaf 16s ease-in-out -10s infinite; }

@keyframes itw-sc-leaf {
	0%, 100% { transform: translateX(-50%) rotate(0deg); }
	50%      { transform: translateX(-50%) rotate(4deg); }
}

.sc-plant b {
	position: absolute;
	inset: auto 12% 0 12%;
	block-size: 34%;
	border-radius: 4px 4px 40% 40%;
	background: var(--itw-accent);
}

/* ---- The screen, and the page being built on it ---- */
.sc-screen {
	/* Sitting on the desk, not above it. The base has to meet the top of the
	   desk bar or the whole thing reads as floating, which is the first
	   thing the eye catches in a flat scene. */
	inset: 14% auto 19.5% 22%;
	inline-size: 52%;
}

.sc-screen__glass {
	display: flex;
	flex-direction: column;
	gap: 5%;
	position: relative;
	overflow: hidden;
	padding: 5%;
	border-radius: 10px;
	background: var(--itw-white);
	aspect-ratio: 4 / 3;
	box-shadow:
		inset 0 0 0 2px var(--itw-midnight),
		0 12px 26px rgba(16, 16, 20, 0.14);
}

.sc-ui { display: flex; align-items: center; gap: 4%; flex: none; }
.sc-ui :where(i, b, u) { border-radius: 3px; background: rgba(16, 16, 20, 0.14); }

/* The page draws itself: grey blocks, then colour, then the grid goes. */
.sc-ui :where(i, b) { animation: itw-sc-ink 16s var(--itw-ease) infinite; }
.sc-ui u { animation: itw-sc-amber 16s var(--itw-ease) infinite; }

@keyframes itw-sc-ink {
	0%, 12%  { background: rgba(16, 16, 20, 0.12); }
	26%, 90% { background: rgba(16, 16, 20, 0.36); }
	100%     { background: rgba(16, 16, 20, 0.12); }
}

@keyframes itw-sc-amber {
	0%, 18%  { background: rgba(16, 16, 20, 0.16); }
	32%, 90% { background: var(--itw-accent); }
	100%     { background: rgba(16, 16, 20, 0.16); }
}

.sc-ui--nav { padding: 3% 4%; border-radius: 5px; background: var(--itw-midnight); }
.sc-ui--nav i { inline-size: 18%; block-size: 4px; background: var(--itw-accent) !important; animation: none !important; }
.sc-ui--nav b { inline-size: 10%; block-size: 3px; }
.sc-ui--nav u { inline-size: 22%; block-size: 8px; border-radius: 999px; margin-inline-start: auto; }

.sc-ui--hero { flex-direction: column; align-items: flex-start; gap: 5%; padding: 6% 2% 4%; }
.sc-ui--hero i:nth-child(1) { inline-size: 68%; block-size: 8px; }
.sc-ui--hero i:nth-child(2) { inline-size: 44%; block-size: 5px; }
.sc-ui--hero u { inline-size: 30%; block-size: 11px; border-radius: 999px; }

.sc-ui--row { gap: 4%; }
.sc-ui--row i { flex: 1; block-size: 30px; border-radius: 5px; }

.sc-ui--band { margin-block-start: auto; padding: 3% 4%; border-radius: 5px; background: var(--itw-midnight); }
.sc-ui--band i { inline-size: 44%; block-size: 4px; }
.sc-ui--band u { inline-size: 18%; block-size: 8px; border-radius: 999px; margin-inline-start: auto; }

/* The guides the layout is set on, gone once it is designed. */
.sc-grid {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, rgba(217, 119, 6, 0.45) 0 1px, transparent 1px 25%),
		repeating-linear-gradient(180deg, rgba(217, 119, 6, 0.3) 0 1px, transparent 1px 25%);
	animation: itw-sc-grid 16s var(--itw-ease) infinite;
}

@keyframes itw-sc-grid {
	0%, 10%   { opacity: 0.55; }
	24%, 100% { opacity: 0; }
}

.sc-screen__foot {
	inline-size: 12%;
	block-size: 12px;
	margin: 0 auto;
	background: var(--itw-midnight);
}

.sc-screen__base {
	inline-size: 34%;
	block-size: 5px;
	margin: 0 auto;
	border-radius: 3px;
	background: var(--itw-midnight);
}

/* ---- The phone, showing the same page narrow ---- */
.sc-phone {
	inset: auto 8% 19.5% auto;
	inline-size: 13%;
	rotate: 6deg;
	animation: itw-sc-tilt 16s ease-in-out infinite;
}

@keyframes itw-sc-tilt {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-4%) rotate(-3deg); }
}

.sc-phone__glass {
	display: flex;
	flex-direction: column;
	gap: 7%;
	padding: 9%;
	border-radius: 7px;
	background: var(--itw-white);
	aspect-ratio: 1 / 1.9;
	box-shadow:
		inset 0 0 0 2px var(--itw-midnight),
		0 8px 18px rgba(16, 16, 20, 0.14);
}

.sc-phone__glass i { block-size: 14%; border-radius: 3px; background: var(--itw-midnight); }
.sc-phone__glass b { block-size: 5%; border-radius: 2px; background: rgba(16, 16, 20, 0.16); }
.sc-phone__glass u { block-size: 10%; margin-block-start: auto; border-radius: 999px; background: var(--itw-accent); }

/* ---- The mug, with something rising off it ---- */
.sc-mug {
	inset: auto 26% 19.5% auto;
	inline-size: 8%;
	aspect-ratio: 1 / 1.1;
}

.sc-mug i {
	position: absolute;
	inset: 34% 0 0 0;
	border-radius: 3px 3px 40% 40%;
	background: var(--itw-accent);
}

.sc-mug b {
	position: absolute;
	inset: 46% -26% auto auto;
	inline-size: 30%;
	block-size: 30%;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--itw-accent);
}

.sc-mug s {
	position: absolute;
	inset: 0 auto auto 40%;
	inline-size: 3px;
	block-size: 30%;
	border-radius: 3px;
	background: rgba(16, 16, 20, 0.16);
	animation: itw-sc-steam 4s ease-in-out infinite;
}

@keyframes itw-sc-steam {
	0%, 100% { opacity: 0; transform: translateY(4px) scaleY(0.6); }
	40%      { opacity: 1; transform: translateY(-2px) scaleY(1); }
	70%      { opacity: 0; transform: translateY(-8px) scaleY(1.2); }
}

/* A card lifted off the screen and held in front of it. It gives the scene
   something in the foreground, which is what stops a flat drawing reading as
   one plane with objects painted on it. */
.sc-card {
	/* Clear of the screen's own text. Sat higher it covered the line the
	   screen is in the middle of writing, which is the one thing in the
	   scene worth reading. */
	inset: auto auto 44% 0;
	inline-size: 21%;
	padding: 7%;
	border-radius: 8px;
	background: var(--itw-white);
	box-shadow:
		inset 0 0 0 2px var(--itw-midnight),
		0 14px 24px rgba(16, 16, 20, 0.16);
	rotate: -5deg;
	animation: itw-sc-float 16s ease-in-out infinite;
}

@keyframes itw-sc-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-8%) rotate(2deg); }
}

.sc-card i { block-size: 7px; border-radius: 3px; background: var(--itw-accent); }
.sc-card b { block-size: 4px; margin-block-start: 16%; border-radius: 2px; background: rgba(16, 16, 20, 0.18); }
.sc-card u { block-size: 4px; inline-size: 62%; margin-block-start: 8%; border-radius: 2px; background: rgba(16, 16, 20, 0.12); }


/* ---- The desk everything stands on ---- */
.sc-desk { inset: auto 0 8% 0; block-size: 14%; }

.sc-desk i {
	position: absolute;
	inset: 0 0 auto 0;
	block-size: 9px;
	border-radius: 4px;
	background: var(--itw-midnight);
}

.sc-desk b {
	position: absolute;
	inset-block: 9px 0;
	inline-size: 8px;
	border-radius: 0 0 3px 3px;
	background: var(--itw-midnight);
	opacity: 0.85;
}

.sc-desk b:nth-child(2) { inset-inline-start: 12%; }
.sc-desk b:nth-child(3) { inset-inline-end: 12%; }


@media (prefers-reduced-motion: reduce) {
	.sc-wall i:nth-child(n),
	.sc-plant i:nth-child(n),
	.sc-phone,
	.sc-mug s,
	.sc-card,
	.sc-grid,
	.sc-ui :where(i, b, u) { animation: none; }

	/* Shown finished. */
	.sc-grid { opacity: 0; }
	.sc-ui :where(i, b) { background: rgba(16, 16, 20, 0.36); }
	.sc-ui u { background: var(--itw-accent); }
}


/* ---- Words in the scene ----
   The screen shows this site being made, so it carries this site's name. It
   is the one detail that turns a generic workspace into ours. */
.sc-mark {
	font-family: var(--itw-font-heading);
	font-size: clamp(0.4375rem, 1.9cqw, 0.625rem);
	font-weight: var(--itw-fw-black);
	font-style: normal;
	letter-spacing: -0.02em;
	color: var(--itw-dark-heading);
	white-space: nowrap;
}

.sc-mark s { text-decoration: none; color: var(--itw-accent); }

.sc-line {
	font-family: var(--itw-font-heading);
	font-size: clamp(0.5rem, 2.4cqw, 0.8125rem);
	font-weight: var(--itw-fw-bold);
	font-style: normal;
	letter-spacing: -0.025em;
	color: var(--itw-heading);
	opacity: 0;
	animation: itw-sc-say 16s var(--itw-ease) infinite;
}

/* The line arrives with the colour, so the page reads as being written
   rather than as having always said this. */
@keyframes itw-sc-say {
	0%, 20%  { opacity: 0; transform: translateY(4px); }
	32%, 90% { opacity: 1; transform: none; }
	100%     { opacity: 0; transform: translateY(4px); }
}

.sc-screen__glass { container-type: inline-size; }

.sc-card em {
	display: block;
	margin-block-end: 12%;
	font-family: var(--itw-font-heading);
	font-size: clamp(0.4375rem, 1.6cqw, 0.5625rem);
	font-weight: var(--itw-fw-bold);
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--itw-accent-text);
}

.sc-phone__glass em {
	font-family: var(--itw-font-heading);
	font-size: clamp(0.4375rem, 1.4cqw, 0.5625rem);
	font-weight: var(--itw-fw-black);
	font-style: normal;
	color: var(--itw-accent);
}

.itw-scene__art { container-type: inline-size; }


/* The words were written after the reduced motion block above, so the rules
   that stop them have to come after the words. Same block, moved to the end
   of the file rather than left where it no longer reached. */
@media (prefers-reduced-motion: reduce) {
	.sc-line { animation: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   15a. WHAT IS INCLUDED

   Four cards across, the shape the reference uses for its services row. What
   is different is what is in them: a sentence that says something, rather
   than a line of filler and a button that goes nowhere.
   ========================================================================== */

/* The highlighted half of a heading. On the home page these headings carry
   no em, so the rule never existed and the browser fell back to italic. */
.itw-sec__title em,
.itw-svc__title em {
	font-style: normal;
	color: var(--itw-accent-text);
}


.itw-incs {
	padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
	background: var(--itw-bg);
}

.itw-inc__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.6rem + 0.7vw, 1.1rem);
	margin-block-start: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}

/* Named itw-inc, not itw-card. The theme already owns itw-card for its own
   card, so a second rule under the same name is a collision waiting for
   whichever file happens to load last. That is exactly what went wrong with
   itw-rise, and it is worth not repeating.

   A card at the level of the reference: the icon on a tile turned on its
   corner, the text centred under it, and a button at the foot so the card
   has somewhere to go rather than just something to say.

   The turned tile is the detail that does most of the work. A square tile
   reads as an icon in a box; the same tile on its corner reads as a mark. */
.itw-inc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border-radius: 20px;
	background: var(--itw-surface);
	text-align: center;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 1px 2px rgba(16, 16, 20, 0.04),
		0 10px 24px rgba(16, 16, 20, 0.05);
	transition: transform 420ms var(--itw-ease-out), box-shadow 420ms var(--itw-ease);
}

.itw-inc:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(217, 119, 6, 0.3),
		0 3px 6px rgba(16, 16, 20, 0.05),
		0 22px 44px rgba(16, 16, 20, 0.09);
}

/* Turned on its corner, and the icon turned back so it stays upright. */
.itw-inc__tile {
	display: grid;
	place-items: center;
	inline-size: 3.1rem;
	block-size: 3.1rem;
	margin-block-end: 0.35rem;
	border-radius: 14px;
	rotate: 45deg;
	color: var(--itw-white);
	box-shadow: 0 10px 20px rgba(16, 16, 20, 0.14);
	transition: rotate 520ms var(--itw-ease-out);
}

.itw-inc:hover .itw-inc__tile { rotate: 135deg; }

.itw-inc__ic {
	display: grid;
	place-items: center;
	rotate: -45deg;
	transition: rotate 520ms var(--itw-ease-out);
}

.itw-inc:hover .itw-inc__ic { rotate: -135deg; }

.itw-inc__ic svg { inline-size: 1.3rem; block-size: 1.3rem; }

/* Four tones from one accent rather than four unrelated colours. The
   reference uses a different hue per card, which works there because it has
   no single brand colour to protect. */
.itw-inc--a .itw-inc__tile { background: linear-gradient(145deg, #E8880A, #B45309); }
.itw-inc--b .itw-inc__tile { background: linear-gradient(145deg, #D97706, #92400E); }
.itw-inc--c .itw-inc__tile { background: linear-gradient(145deg, #2A2A33, #101014); }
.itw-inc--d .itw-inc__tile { background: linear-gradient(145deg, #F0A03A, #D97706); }

.itw-inc h3 {
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: -0.022em;
}

.itw-inc p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--itw-text-muted);
}

/* A button, because the reference has one and because a card that says
   something and offers nothing is a dead end. */
.itw-inc__go {
	margin-block-start: auto;
	/* Forty pixels tall. Measured at 38, which is under the size a thumb
	   reliably hits, and this is the only thing to press on the card. */
	padding: 0.6rem 1.2rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-accent);
	color: var(--itw-midnight);
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background-color var(--itw-dur) var(--itw-ease);
}

.itw-inc__go:hover,
.itw-inc__go:focus-visible { background: #E8880A; }

.itw-inc--c .itw-inc__go { background: var(--itw-midnight); color: var(--itw-dark-heading); }
.itw-inc--c .itw-inc__go:hover { background: #22222A; }


/* ==========================================================================
   15b. HOW IT GOES

   A drawn scene on one side, numbered steps on the other. The numbers are
   filled circles because that is the one detail in the reference that makes
   its steps read as a sequence rather than a list.
   ========================================================================== */

.itw-steps {
	padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
	background: var(--itw-paper);
}

.itw-steps__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.75rem, 1rem + 3vw, 4rem);
	align-items: center;
}

.itw-steps__say { min-inline-size: 0; }

.itw-steps__lead {
	max-inline-size: 46ch;
	margin-block-start: 0.85rem;
	font-size: var(--itw-fs-lead);
	line-height: 1.6;
	color: var(--itw-text-muted);
}

.itw-steps__list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 1.85rem);
}

.itw-steps__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
}

.itw-steps__n {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--itw-accent);
	color: var(--itw-midnight);
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-bold);
}

.itw-steps__list b {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: -0.01em;
	color: var(--itw-heading);
}

.itw-steps__list span:last-child {
	display: block;
	margin-block-start: 0.2rem;
	max-inline-size: 48ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--itw-text-muted);
}

.itw-steps__act {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 1.85rem);
}

/* ---- The board ----
   Columns of cards with two notes stuck on it and a line being drawn. It is
   the planning stage, which is what these steps are about.
   ========================================================================== */

.itw-board {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 0.84;
}

.itw-board__glow {
	position: absolute;
	inset: 12% 6%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, rgba(217, 119, 6, 0.18), transparent 66%);
	filter: blur(42px);
}

.itw-board__art {
	container-type: inline-size;
	position: relative;
	inline-size: min(92%, 26rem);
	aspect-ratio: 1 / 0.78;
}

.bd-frame {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 4%;
	padding: 6%;
	border-radius: 16px;
	background: var(--itw-white);
	box-shadow:
		inset 0 0 0 2px var(--itw-midnight),
		0 14px 32px rgba(16, 16, 20, 0.12);
}

.bd-col {
	display: flex;
	flex-direction: column;
	gap: 7%;
	flex: 1;
}

/* Each column named, so the board is a plan rather than three stacks of
   grey. */
.bd-col em {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: clamp(0.5rem, 2.6cqw, 0.6875rem);
	font-weight: var(--itw-fw-bold);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itw-text-muted);
}

.bd-col:nth-child(2) em { color: var(--itw-accent-text); }

.bd-col i {
	display: block;
	block-size: 16%;
	border-radius: 7px;
	background: rgba(16, 16, 20, 0.09);
	animation: itw-bd-fill 16s var(--itw-ease) infinite;
}

/* The cards fill in one column at a time, which is what planning looks like
   from the outside. */
.bd-col:nth-child(1) i { animation-delay: 0s; }
.bd-col:nth-child(2) i { animation-delay: -11s; }
.bd-col:nth-child(3) i { animation-delay: -6s; }

.bd-col:nth-child(1) i:nth-child(3),
.bd-col:nth-child(2) i:nth-child(4) { background: rgba(217, 119, 6, 0.24); }

@keyframes itw-bd-fill {
	0%, 8%   { opacity: 0.3; transform: translateY(4px); }
	18%, 90% { opacity: 1; transform: none; }
	100%     { opacity: 0.3; transform: translateY(4px); }
}

/* Two notes, stuck on at a slight angle because nobody sticks them straight. */
.bd-note {
	position: absolute;
	display: grid;
	place-items: center;
	inline-size: 19%;
	aspect-ratio: 1;
	border-radius: 3px;
	background: var(--itw-accent);
	box-shadow: 0 6px 14px rgba(16, 16, 20, 0.14);
	font-family: var(--itw-font-heading);
	font-size: clamp(0.5rem, 2.2cqw, 0.6875rem);
	font-weight: var(--itw-fw-bold);
	line-height: 1.15;
	text-align: center;
	color: var(--itw-midnight);
}

.bd-note--b { color: var(--itw-dark-heading); }

.bd-note--a {
	/* Below the row of headings and hanging off the left edge. Measured: the
	   headings sit in a band across the top of the board, so any corner up
	   there covers one of them. Stuck lower, a note overlaps a card, which is
	   what a note stuck on a board does anyway. */
	inset-block-start: 34%;
	inset-inline-start: -8%;
	inset-inline-end: auto;
	rotate: 7deg;
	animation: itw-bd-note 16s ease-in-out infinite;
}

.bd-note--b {
	inset-block-end: -8%;
	inset-inline-end: -6%;
	inset-inline-start: auto;
	rotate: -6deg;
	background: var(--itw-midnight);
	animation: itw-bd-note 16s ease-in-out -8s infinite;
}

@keyframes itw-bd-note {
	0%, 100% { transform: rotate(0deg) translateY(0); }
	50%      { transform: rotate(-3deg) translateY(-4px); }
}

/* A line being drawn across the board and rubbed out again. */
.bd-pen {
	position: absolute;
	inset-block-end: 16%;
	inset-inline-start: 10%;
	inline-size: 62%;
	block-size: 3px;
}

.bd-pen i {
	display: block;
	block-size: 100%;
	border-radius: 3px;
	background: var(--itw-accent);
	transform-origin: left center;
	animation: itw-bd-draw 16s var(--itw-ease) infinite;
}

.bd-pen b {
	position: absolute;
	inset-block-start: -6px;
	inline-size: 15px;
	block-size: 15px;
	border-radius: 50%;
	background: var(--itw-midnight);
	animation: itw-bd-tip 16s var(--itw-ease) infinite;
}

@keyframes itw-bd-draw {
	0%, 6%   { transform: scaleX(0); }
	34%, 86% { transform: scaleX(1); }
	100%     { transform: scaleX(0); }
}

@keyframes itw-bd-tip {
	0%, 6%   { inset-inline-start: 0; opacity: 1; }
	34%      { inset-inline-start: calc(100% - 15px); opacity: 1; }
	44%, 100% { inset-inline-start: calc(100% - 15px); opacity: 0; }
}


/* ==========================================================================
   15c. OVERVIEW

   Words one side, a stack of pages the other. The same idea as the guide it
   replaces, in the space of one section rather than six screens of scroll.
   ========================================================================== */

.itw-about {
	padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
	background: var(--itw-bg);
}

.itw-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 1rem + 3vw, 4rem);
	align-items: center;
}

.itw-about__say { min-inline-size: 0; }

.itw-about__say > p {
	max-inline-size: 56ch;
	margin-block-start: clamp(0.75rem, 0.65rem + 0.5vw, 1.1rem);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--itw-text-muted);
}

.itw-stack {
	/* Clipped, and padded so the clip never has anything to bite on.

	   The sheets are offset outward and the whole stack is turned on two
	   axes, so the projected width is not a percentage anyone can predict:
	   three different widths were tried and each one cut a corner at some
	   window size. Room on all four sides is the fix that does not need to
	   be right. */
	overflow: clip;
	padding: 9%;
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 0.84;
	perspective: 1100px;
	perspective-origin: 50% 40%;
}

.itw-stack__glow {
	position: absolute;
	inset: 14% 8%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 55%, rgba(217, 119, 6, 0.18), transparent 66%);
	filter: blur(42px);
}

.itw-stack__art {
	container-type: inline-size;
	position: relative;
	/* Narrower than the box it sits in, by more than the offset carries the
	   outermost sheet. Measured at the old size the top sheet reached 52px
	   past the right edge and the clip cut its corner off. */
	inline-size: min(72%, 19rem);
	aspect-ratio: 4 / 3;
	transform-style: preserve-3d;
	transform: rotateX(46deg) rotateZ(-26deg);
}

/* Three sheets at three heights, rising and settling. A page is a stack of
   decisions, and this is the stack. */
.st-sheet {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 7%;
	padding: 7%;
	border-radius: 10px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 0 0 1px var(--itw-border),
		0 12px 26px rgba(16, 16, 20, 0.11);
	animation: itw-st-rise 16s ease-in-out infinite;
	animation-delay: calc(var(--n) * -2.4s);
}

/* Offset as well as raised. Stacked squarely only the top sheet could be
   read, so the other two were three labels nobody would ever see. */
@keyframes itw-st-rise {
	0%, 100% { transform: translate3d(calc(var(--n) * 6%), calc(var(--n) * 6%), calc(var(--n) * 26px)); }
	50%      { transform: translate3d(calc(var(--n) * 6%), calc(var(--n) * 6%), calc(var(--n) * 54px)); }
}

.st-sheet :where(b, i, u) { display: block; border-radius: 4px; background: rgba(16, 16, 20, 0.13); }
.st-sheet em {
	font-family: var(--itw-font-heading);
	font-size: clamp(0.5rem, 3cqw, 0.75rem);
	font-weight: var(--itw-fw-bold);
	font-style: normal;
	letter-spacing: -0.01em;
	color: var(--itw-heading);
}

/* Only the top sheet is labelled. The stack is turned on two axes, so an
   offset that clears a label in flat space does not clear it once the whole
   thing is rotated: three tries, three labels still half covered. One that
   reads beats three that do not. */
.st-sheet:nth-child(1) em,
.st-sheet:nth-child(2) em { visibility: hidden; }
.st-sheet i { block-size: 6px; }
.st-sheet i:last-of-type { inline-size: 62%; }
.st-sheet u { block-size: 13px; inline-size: 34%; margin-block-start: auto; border-radius: 999px; background: var(--itw-accent); }


/* ==========================================================================
   RESPONSIVE AND REDUCED MOTION
   ========================================================================== */

@media (max-width: 1000px) {
	.itw-inc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.itw-steps__grid,
	.itw-about__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

	/* Headings and their lead centred, the way the four cards above them
	   already are. The steps and the paragraphs stay ranged left, because
	   centred body text is hard to read once it runs past two lines. */
	.itw-steps__say > .itw-sec__eyebrow,
	.itw-about__say > .itw-sec__eyebrow { justify-content: center; }

	.itw-steps__say > .itw-sec__title,
	.itw-about__say > .itw-sec__title,
	.itw-steps__lead { text-align: center; margin-inline: auto; }

	.itw-steps__lead { max-inline-size: none; }
	.itw-steps__act { justify-content: center; }

	/* Narrower again on a phone. The offset is a percentage of the art, so
	   the outermost sheet still reached 18px past the box at the width that
	   worked on a laptop. */
	.itw-stack__art { inline-size: min(64%, 15rem); }

	/* Words first on a phone. The drawing is worth having but it is not what
	   somebody came to read. */
	.itw-board { order: 2; }
	.itw-steps__say { order: 1; }
}

@media (max-width: 560px) {
	.itw-inc__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.bd-col i:nth-child(n),
	.bd-note:nth-child(n),
	.bd-pen i,
	.bd-pen b,
	.st-sheet { animation: none; }

	.bd-pen i { transform: scaleX(1); }
	.bd-pen b { opacity: 0; }
	.st-sheet { transform: translate3d(calc(var(--n) * 6%), calc(var(--n) * 6%), calc(var(--n) * 26px)); }
}

/* ==========================================================================
   15d. THE PIECES THE HERO STILL NEEDS

   These came from the file that held the guide. The guide is gone, so they
   are carried over here rather than keeping a stylesheet alive for four
   rules.
   ========================================================================== */

.itw-svc__lead {
	max-inline-size: 52ch;
	margin-block-start: clamp(0.85rem, 0.7rem + 0.5vw, 1.2rem);
	font-size: var(--itw-fs-lead);
	line-height: 1.65;
	color: var(--itw-text-muted);
}

.itw-svc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
}

/* The strip. What this service covers, in the words somebody would search
   for, moving so it reads as a set rather than a paragraph of keywords. */
.itw-svc__band {
	overflow: hidden;
	padding-block: clamp(0.7rem, 0.6rem + 0.4vw, 1rem);
	background: var(--itw-midnight);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.itw-svc__track {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 1rem + 1vw, 2rem);
	inline-size: max-content;
	animation: itw-svc-band 32s linear infinite;
}

.itw-svc__band:hover .itw-svc__track { animation-play-state: paused; }

@keyframes itw-svc-band {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.itw-svc__track span {
	font-family: var(--itw-font-heading);
	font-size: 0.8125rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-dark-text);
	white-space: nowrap;
}

.itw-svc__track i {
	flex: none;
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--itw-accent);
}

/* The questions sit on paper, so the section before them is not the same
   surface twice. */
.itw-faq { background: var(--itw-paper); }

@media (prefers-reduced-motion: reduce) {
	.itw-svc__track { animation: none; }
}


/* ==========================================================================
   15e. READY WHEN YOU ARE

   The band the reference ends on, before the footer. One line, one number,
   and the two ways of getting in touch. Amber, because it is the last thing
   on the page and it should be the loudest.
   ========================================================================== */

.itw-ready {
	padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
	background: var(--itw-paper);
}

.itw-ready__bar {
	position: relative;
	overflow: clip;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
	padding: clamp(1.35rem, 1.1rem + 1.4vw, 2.25rem) clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem);
	border-radius: 24px;
	background: linear-gradient(120deg, #E8880A, var(--itw-accent) 46%, #B45309);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 2px 6px rgba(180, 83, 9, 0.16),
		0 22px 48px rgba(180, 83, 9, 0.22);
}

/* Light moving behind the amber, so a large flat block of colour has
   something happening in it. */
.itw-ready__air { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.itw-ready__air i {
	position: absolute;
	inline-size: 30vmax;
	block-size: 30vmax;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.5;
}

.itw-ready__air i:nth-child(1) {
	inset-block-start: -40%;
	inset-inline-end: 6%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 66%);
	animation: itw-mesh-a 27s ease-in-out infinite;
}

.itw-ready__air i:nth-child(2) {
	inset-block-end: -46%;
	inset-inline-start: 2%;
	background: radial-gradient(circle, rgba(16, 16, 20, 0.24), transparent 64%);
	animation: itw-mesh-b 33s ease-in-out infinite;
}

.itw-ready__say { min-inline-size: 0; }

.itw-ready__title {
	max-inline-size: 26ch;
	font-family: var(--itw-font-heading);
	font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
	font-weight: var(--itw-fw-bold);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--itw-midnight);
}

.itw-ready__line {
	max-inline-size: 44ch;
	margin-block-start: 0.45rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(16, 16, 20, 0.72);
}

.itw-ready__act { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Midnight on amber, which is the strongest pair the palette has. */
.itw-ready__go,
.itw-ready__wa {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.35rem;
	border-radius: var(--itw-radius-full);

	/* Contact us broke onto two lines inside its own pill once the bar
	   stacked, which turned a button into a paragraph with a border. */
	white-space: nowrap;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 320ms var(--itw-ease-out), background-color 320ms var(--itw-ease);
}

.itw-ready__go { background: var(--itw-midnight); color: var(--itw-dark-heading); }
.itw-ready__go:hover { background: #22222A; }
.itw-ready__go svg { inline-size: 13px; block-size: 13px; }

.itw-ready__wa {
	background: rgba(255, 255, 255, 0.9);
	color: var(--itw-midnight);
}

.itw-ready__wa:hover { background: #FFFFFF; }
.itw-ready__wa svg { inline-size: 16px; block-size: 16px; color: #1FA855; }

.itw-ready__go:active,
.itw-ready__wa:active { transform: translateY(1px); }

@media (max-width: 720px) {
	/* Stacked and centred, and the buttons go full width so they are the two
	   widest things on the screen. */
	.itw-ready__bar { flex-direction: column; text-align: center; }
	.itw-ready__title, .itw-ready__line { max-inline-size: none; margin-inline: auto; }
	.itw-ready__act { inline-size: 100%; }
	.itw-ready__go, .itw-ready__wa { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.itw-ready__air i:nth-child(n) { animation: none; }
}


/* ==========================================================================
   15f. ARRIVING

   The same rise the rest of the site uses, on the same shared timing, so
   this page introduces things the way every other page does rather than
   inventing a third way.

   The hero is left out on purpose: it is on screen before anything can be
   scrolled to, and animating it only delays the first thing a visitor reads.

   Named itw-up, not itw-rise. The theme already owns itw-rise for the masked
   text on the home page, and that rule sets display: block and a 105 per cent
   translate. Reusing the name turned every card from a flex column into a
   block, which is why the icon tiles sat at the left edge and the buttons no
   longer lined up.
   ========================================================================== */

.js :where(.itw-incs, .itw-steps, .itw-about, .itw-faq, .itw-ready) .itw-up {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1);
}

.js .is-in .itw-up { opacity: 1; transform: none; }

/* One after another rather than all at once, which is the difference between
   a section arriving and a section appearing. */
.js .is-in .itw-up:nth-child(2) { transition-delay: var(--itw-in-step); }
.js .is-in .itw-up:nth-child(3) { transition-delay: calc(var(--itw-in-step) * 2); }
.js .is-in .itw-up:nth-child(4) { transition-delay: calc(var(--itw-in-step) * 3); }
.js .is-in .itw-up:nth-child(5) { transition-delay: calc(var(--itw-in-step) * 4); }

@media (prefers-reduced-motion: reduce) {
	.js :where(.itw-incs, .itw-steps, .itw-about, .itw-faq, .itw-ready) .itw-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   15g. ON A PHONE

   Two things measured rather than guessed: what is big enough to press, and
   what is big enough to read.
   ========================================================================== */

@media (max-width: 900px) {
	/* A plain link is as tall as its text, which was 24px. Padded out it is
	   a target rather than a word that happens to be tappable. */
	.itw-svc__see {
		padding: 0.7rem 0.9rem;
		margin-inline-start: -0.9rem;
	}

	/* Eleven pixels is small on a phone held at arm's length, and these are
	   the labels that tell you which section you are in. */
	.itw-sec__eyebrow,
	.itw-svc__eyebrow { font-size: 0.75rem; }
}
/* ==========================================================================
   HOME PAGE: HERO, THE 3D FLOOR, THE FOUR STEPS AND THE FOUNDER SECTION
   ==========================================================================

   Added to the end of style.css. Nothing above it is removed: the new parts
   use new class names, and where an old rule had to be overridden it is
   overridden here rather than deleted by hand, which is where mistakes come
   from.

   Four of those overrides are worth knowing about, because each one was a
   rule that was right for the old layout and wrong for this one:

     the first step had no top padding and the last had no bottom padding,
     which suited a column with rules between the steps and left the cards
     uneven;

     the step list was capped at 56rem, which held the four cards at 896px
     however wide the page was;

     the note under each step was a pill with a dot, which suited a column
     and not a card foot.

   ========================================================================== */


/* ==========================================================================
   HOME HERO

   A room rather than a flat colour, four things that are true, and a board
   on the right with the numbers drawing themselves.

   Everything here is drawn: no image is requested, nothing blurs on a
   retina screen, and the palette carries through automatically.
   ========================================================================== */

.itw-hero {
	position: relative;
	overflow: clip;
	isolation: isolate;

	/* More room top and bottom. The board and the four cards gave the
	   section more to hold, and the old padding left it looking as though
	   something had been removed. */
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);
}

/* ---- Light at the back ---- */
.itw-hero__mesh {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: clip;
	pointer-events: none;
}

.itw-hero__mesh i {
	position: absolute;
	inline-size: 56vmax;
	block-size: 56vmax;
	border-radius: 50%;
	filter: blur(80px);
}

.itw-hero__mesh i:nth-child(1) {
	inset-block-start: -30%;
	inset-inline-end: -14%;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.24) 0%, transparent 66%);
	animation: itw-hero-a 27s ease-in-out infinite;
}

.itw-hero__mesh i:nth-child(2) {
	inset-block-end: -34%;
	inset-inline-start: -18%;
	background: radial-gradient(circle, rgba(180, 83, 9, 0.15) 0%, transparent 64%);
	animation: itw-hero-b 35s ease-in-out infinite;
}

.itw-hero__mesh i:nth-child(3) {
	inset-block-start: 10%;
	inset-inline-start: 32%;
	inline-size: 34vmax;
	block-size: 34vmax;
	background: radial-gradient(circle, rgba(16, 16, 20, 0.06) 0%, transparent 62%);
	animation: itw-hero-c 31s ease-in-out infinite;
}

@keyframes itw-hero-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-7%, 9%, 0) scale(1.15); }
}

@keyframes itw-hero-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
	50%      { transform: translate3d(8%, -7%, 0) scale(1); }
}

@keyframes itw-hero-c {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(6%, 5%, 0); }
}

/* ---- The floor ----
   A plane tipped away from the eye. The lines converge because the plane is
   actually turned in space, which is the difference between depth and a
   picture of depth. It runs towards the viewer for ever: the grid is twice
   as tall as it needs to be and slides by exactly one square. */
.itw-hero__floor,
.itw-grid3d {
	position: absolute;
	inset-inline: -30%;
	inset-block-end: 0;
	block-size: 54%;
	z-index: -2;
	overflow: clip;
	pointer-events: none;
	perspective: 340px;
	perspective-origin: 50% 0%;
	mask-image: linear-gradient(180deg, transparent, #000 52%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 52%, #000 88%, transparent);
}

.itw-hero__floor i,
.itw-grid3d i {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 200%;
	transform-origin: 50% 0%;
	transform: rotateX(72deg);
	background-image:
		repeating-linear-gradient(90deg, rgba(16, 16, 20, 0.1) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(180deg, rgba(16, 16, 20, 0.1) 0 1px, transparent 1px 64px);
	animation: itw-floor-run 9s linear infinite;
}

@keyframes itw-floor-run {
	from { transform: rotateX(72deg) translateY(0); }
	to   { transform: rotateX(72deg) translateY(64px); }
}

/* The floor needs a positioned parent to sit inside, and it has to sit
   above the section's own background rather than behind it. Placed at -2
   with no positioned ancestor it ended up behind the page and could not be
   seen at all. */
.itw-services {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.itw-services > .itw-container { position: relative; z-index: 1; }

.itw-services .itw-grid3d { z-index: 0; }


/* ---- Dots in front ---- */
.itw-hero__dots {
	position: absolute;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 66% 58% at 50% 40%, #000 26%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 66% 58% at 50% 40%, #000 26%, transparent 76%);
}

.itw-hero__dots i {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(16, 16, 20, 0.2) 1px, transparent 1px);
}

.itw-hero__dots i:nth-child(1) { background-size: 26px 26px; opacity: 0.45; animation: itw-dot-a 24s linear infinite; }
.itw-hero__dots i:nth-child(2) { background-size: 44px 44px; opacity: 0.3;  animation: itw-dot-b 34s linear infinite; }
.itw-hero__dots i:nth-child(3) { background-size: 78px 78px; opacity: 0.2;  animation: itw-dot-c 46s linear infinite; }

@keyframes itw-dot-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(26px, 26px, 0); } }
@keyframes itw-dot-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-44px, 44px, 0); } }
@keyframes itw-dot-c { from { transform: translate3d(0,0,0); } to { transform: translate3d(78px, -78px, 0); } }


/* ==========================================================================
   THE COPY SIDE
   ========================================================================== */

.itw-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem;
	margin-block-end: clamp(0.8rem, 0.7rem + 0.5vw, 1.2rem);
	border-radius: var(--itw-radius-full);
	background: var(--itw-surface);
	box-shadow: inset 0 0 0 1px var(--itw-border), 0 4px 14px rgba(16, 16, 20, 0.05);
	font-family: var(--itw-font-heading);
	font-size: 0.75rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-heading);
}

.itw-hero__badge i {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--itw-accent);
}

/* ---- The four ----
   Only things already agreed. No visitor counts, no client totals and no
   satisfaction percentage, because none of those are known. */
.itw-hero__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.7rem;
	list-style: none;
	padding: 0;
	margin-block-start: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);

	/* The four are tilted as a set rather than one by one, so they read as
	   cards lying on the same surface instead of four separate objects. */
	perspective: 900px;
	perspective-origin: 50% 0%;
}

.itw-hero__facts li {
	padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem) clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
	border-radius: 16px;
	background: linear-gradient(170deg, var(--itw-white), var(--itw-surface));
	transform: rotateX(7deg);
	transform-origin: 50% 0%;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px var(--itw-border),
		0 1px 2px rgba(16, 16, 20, 0.04),
		0 10px 20px rgba(16, 16, 20, 0.06),
		0 26px 44px rgba(16, 16, 20, 0.05);
	transition: transform 420ms var(--itw-ease-out), box-shadow 420ms var(--itw-ease);
}

/* Standing up when you point at one, which is the whole reason to tilt them
   in the first place. */
.itw-hero__facts li:hover {
	transform: rotateX(0deg) translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px rgba(217, 119, 6, 0.28),
		0 2px 4px rgba(16, 16, 20, 0.05),
		0 18px 34px rgba(16, 16, 20, 0.09),
		0 40px 70px rgba(16, 16, 20, 0.06);
}

.itw-hero__small {
	display: block;
	font-family: var(--itw-font-heading);
	font-size: 0.625rem;
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--itw-text-muted);
}

.itw-hero__facts b {
	display: block;
	margin-block: 0.15rem 0.25rem;
	font-family: var(--itw-font-heading);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
	font-weight: var(--itw-fw-black);
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: var(--itw-accent-text);
}

.itw-hero__note {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--itw-text-muted);
}


/* ==========================================================================
   THE BOARD

   Four panels, each one a different shape of the same idea: the work going
   up and the site staying quick. Everything draws itself on one 14 second
   loop, so no two panels can drift out of step.
   ========================================================================== */

.itw-dash {
	position: relative;
	container-type: inline-size;
}

.itw-dash__glow {
	position: absolute;
	inset: 6% -4%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, rgba(217, 119, 6, 0.2), transparent 68%);
	filter: blur(48px);
}

.itw-dash__board {
	position: relative;
	padding: clamp(0.7rem, 0.6rem + 0.5vw, 1rem);
	border-radius: 20px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.05),
		0 24px 50px rgba(16, 16, 20, 0.1),
		0 56px 100px rgba(16, 16, 20, 0.07);
}

.itw-dash__bar {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-block-end: 0.7rem;
	padding-inline: 0.15rem;
}

.itw-dash__bar i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(16, 16, 20, 0.14); }
.itw-dash__bar i:first-child { background: var(--itw-accent); }
/* The board carries the name of the site it is a board for. Without it the
   panel is a generic dashboard; with it, it is ours. */
.itw-dash__mark {
	margin-inline-start: 0.45rem;
	font-family: var(--itw-font-heading);
	font-size: clamp(0.625rem, 2.1cqw, 0.75rem);
	font-weight: var(--itw-fw-black);
	font-style: normal;
	letter-spacing: -0.025em;
	color: var(--itw-heading);
	white-space: nowrap;
}

.itw-dash__mark s { text-decoration: none; color: var(--itw-accent); }

.itw-dash__bar b { flex: 1; block-size: 14px; margin-inline: 0.5rem; border-radius: 999px; background: rgba(16, 16, 20, 0.05); }

.itw-dash__bar u {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: rgba(31, 168, 85, 0.14);
	color: #167C3F;
	font-family: var(--itw-font-heading);
	font-size: 0.625rem;
	font-weight: var(--itw-fw-bold);
	text-decoration: none;
}

.itw-dash__bar u::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: currentColor;
	animation: itw-dash-pulse 2.4s ease-in-out infinite;
}

@keyframes itw-dash-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

.itw-dash__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 0.55rem;
}

.dc {
	padding: 0.75rem 0.8rem;
	border-radius: 14px;
	background: var(--itw-bg);
	box-shadow: inset 0 0 0 1px var(--itw-border);
}

.dc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.55rem; }

.dc__head b {
	font-family: var(--itw-font-heading);
	font-size: clamp(0.625rem, 2.1cqw, 0.8125rem);
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.015em;
	color: var(--itw-heading);
}

.dc__head u {
	font-size: clamp(0.5625rem, 1.8cqw, 0.6875rem);
	color: var(--itw-accent-text);
	text-decoration: none;
	font-weight: 500;
}

/* ---- The line ----
   Drawn left to right by hiding its own length and giving it back, which is
   the cheapest way to draw a path and the only one that cannot fall out of
   step with itself. */
.dc--line { position: relative; }

.dc__chart { display: block; inline-size: 100%; block-size: clamp(52px, 20cqw, 82px); overflow: visible; }

.dc__fill {
	fill: url(#itwDashFill);
	opacity: 0;
	animation: itw-dash-fill 14s var(--itw-ease) infinite;
}

.dc__line {
	stroke: var(--itw-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 260;
	stroke-dashoffset: 260;
	animation: itw-dash-draw 14s var(--itw-ease) infinite;
}

@keyframes itw-dash-draw {
	0%       { stroke-dashoffset: 260; }
	40%, 88% { stroke-dashoffset: 0; }
	100%     { stroke-dashoffset: 260; }
}

@keyframes itw-dash-fill {
	0%, 12%  { opacity: 0; }
	46%, 88% { opacity: 1; }
	100%     { opacity: 0; }
}

/* The head of the line, which is what makes it read as being drawn now
   rather than having been drawn already. */
.dc__dot {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--itw-accent);
	box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
	offset-path: path("M0 60 L28 50 L56 56 L84 34 L112 40 L140 20 L168 26 L200 8");
	animation: itw-dash-head 14s var(--itw-ease) infinite;
}

@keyframes itw-dash-head {
	0%       { offset-distance: 0%; opacity: 0; }
	6%       { opacity: 1; }
	40%      { offset-distance: 100%; opacity: 1; }
	88%      { offset-distance: 100%; opacity: 1; }
	94%, 100% { offset-distance: 100%; opacity: 0; }
}

/* ---- The rings ---- */
.dc__rings { display: flex; gap: 0.6rem; justify-content: space-around; }
.dc__ring { display: grid; place-items: center; gap: 0.25rem; }
.dc__ring svg { inline-size: clamp(38px, 14cqw, 52px); block-size: auto; }

.dc__track { stroke: rgba(16, 16, 20, 0.1); stroke-width: 4; }

.dc__arc {
	stroke: var(--itw-accent);
	stroke-width: 4;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	/* 2 pi r, so the dash is the whole circle and the offset is the part
	   not yet drawn. */
	stroke-dasharray: 119.4;
	stroke-dashoffset: 119.4;
	animation: itw-dash-ring 14s var(--itw-ease) infinite;
}

@keyframes itw-dash-ring {
	0%       { stroke-dashoffset: 119.4; }
	42%, 88% { stroke-dashoffset: calc(119.4 - (119.4 * var(--p))); }
	100%     { stroke-dashoffset: 119.4; }
}

.dc__ring u {
	font-family: var(--itw-font-heading);
	font-size: clamp(0.5rem, 1.7cqw, 0.625rem);
	font-weight: var(--itw-fw-semi);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--itw-text-muted);
	text-decoration: none;
}

/* ---- The bars ---- */
.dc__bars { display: flex; align-items: flex-end; gap: 0.3rem; block-size: clamp(42px, 16cqw, 64px); }

.dc__bars i {
	flex: 1;
	block-size: var(--h);
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, var(--itw-accent), #B45309);
	transform-origin: bottom center;
	transform: scaleY(0);
	animation: itw-dash-bar 14s var(--itw-ease) infinite;
	animation-delay: calc(var(--i) * 0.09s);
}

.dc__bars i:last-child { background: linear-gradient(180deg, #F0A03A, var(--itw-accent)); }

@keyframes itw-dash-bar {
	0%, 6%   { transform: scaleY(0); }
	34%, 88% { transform: scaleY(1); }
	100%     { transform: scaleY(0); }
}

/* ---- The list ---- */
.dc__list { list-style: none; padding: 0; display: grid; gap: 0.4rem; }

.dc__list li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: clamp(0.5625rem, 1.9cqw, 0.75rem);
	line-height: 1.3;
	color: var(--itw-text-muted);
	opacity: 0;
	transform: translateX(-6px);
	animation: itw-dash-row 14s var(--itw-ease) infinite;
	animation-delay: calc(var(--i) * 0.16s);
}

@keyframes itw-dash-row {
	0%, 14%  { opacity: 0; transform: translateX(-6px); }
	32%, 88% { opacity: 1; transform: none; }
	100%     { opacity: 0; transform: translateX(-6px); }
}

.dc__tick {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	border-radius: 50%;
	background: rgba(31, 168, 85, 0.16);
	color: #167C3F;
}

.dc__tick svg { inline-size: 0.55rem; block-size: 0.55rem; }

/* ---- The two chips ----
   Off the edge of the board, which is what stops a rectangle of panels
   reading as a screenshot. */
.itw-dash__chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.8rem;
	border-radius: 14px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 12px 26px rgba(16, 16, 20, 0.1);
	font-family: var(--itw-font-heading);
	font-size: 0.6875rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-heading);
	white-space: nowrap;
}

/* Clear of the board's own header. Measured: at -4% the chip sat across the
   name, on every width, not only on a phone. */
.itw-dash__chip--a {
	inset-block-start: 30%;
	inset-inline-start: -13%;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.05rem;
	animation: itw-dash-float 8s ease-in-out infinite;
}

.itw-dash__chip--a b { font-size: 0.9375rem; font-weight: var(--itw-fw-black); letter-spacing: -0.03em; color: var(--itw-accent-text); }
.itw-dash__chip--a u { font-size: 0.625rem; font-weight: 500; color: var(--itw-text-muted); text-decoration: none; }

.itw-dash__chip--b {
	inset-block-end: -5%;
	inset-inline-end: -4%;
	animation: itw-dash-float 8s ease-in-out -4s infinite;
}

.itw-dash__chip--b i {
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: #1FA855;
	animation: itw-dash-pulse 2.4s ease-in-out infinite;
}

@keyframes itw-dash-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
	.itw-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	/* Centred, because a single column of ranged left text with nothing
	   beside it reads as a column that lost its other half. */
	.itw-hero__copy { text-align: center; }
	.itw-hero__lead { margin-inline: auto; }
	.itw-hero__actions { justify-content: center; }
	.itw-hero__facts { text-align: start; }

	.itw-hero__floor,
	.itw-hero__dots,
	.itw-grid3d { display: none; }

	/* Full width. The hero grid centres its items on a phone, and an item
	   that is also a size container has no content width of its own, so the
	   board collapsed to nothing and the panels became thin vertical pills.
	   That is the two rules meeting, not either one being wrong. */
	.itw-dash {
		justify-self: stretch;
		inline-size: 100%;
		margin-block-start: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
	}

	/* Two across rather than one. Stacked, four panels made the board twice
	   the height of the phone. */
	.itw-dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* On a phone the chips come out of the air and sit under the board in a
	   row. Floating, there is nowhere left for them to go: every corner of a
	   narrow board has text in it, and a chip over a label is worse than a
	   chip in a plain row. */
	.itw-dash { display: flex; flex-direction: column; gap: 0.6rem; }

	.itw-dash__chip {
		position: static;
		animation: none;
	}

	.itw-dash__chip--a {
		flex-direction: row;
		align-items: baseline;
		gap: 0.35rem;
		align-self: flex-start;
	}

	.itw-dash__chip--b { align-self: flex-start; }

	/* Side by side, because two chips stacked is two more rows of scroll. */
	.itw-dash__chips-row { display: contents; }
}

@media (max-width: 560px) {
	/* Two, not one. Four full width cards is a screen of its own, and these
	   are meant to be read at a glance. */
	.itw-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.itw-hero__facts li { transform: none; }
	.itw-hero__facts { perspective: none; }
}

@media (max-width: 380px) {
	.itw-hero__facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.itw-hero__mesh i:nth-child(n),
	.itw-hero__dots i:nth-child(n),
	.itw-hero__floor i,
	.itw-grid3d i,
	.itw-dash__bar u::before,
	.itw-dash__chip,
	.itw-dash__chip--b i,
	.dc__fill,
	.dc__line,
	.dc__dot,
	.dc__arc,
	.dc__bars i,
	.dc__list li { animation: none; }

	/* Shown finished rather than mid draw. */
	.itw-hero__facts li { transform: rotateX(7deg); }
	.dc__fill { opacity: 1; }
	.dc__line { stroke-dashoffset: 0; }
	.dc__dot { offset-distance: 100%; }
	.dc__arc { stroke-dashoffset: calc(119.4 - (119.4 * var(--p))); }
	.dc__bars i { transform: scaleY(1); }
	.dc__list li { opacity: 1; transform: none; }
}


/* ==========================================================================
   THE FOUR STEPS, AS CARDS

   The same shape as the four on a service page: a tile turned on its corner,
   the text centred under it, and a line at the foot. Four steps read faster
   side by side than stacked, and stacked they were most of a screen each.

   The old rules for this section are still in the stylesheet above. They are
   overridden here rather than deleted, because they are shared with nothing
   and removing them by hand is where mistakes come from.
   ========================================================================== */

.itw-flow__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.6rem + 0.7vw, 1.1rem);
	list-style: none;
	padding: 0;
	margin-block-start: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	counter-reset: none;

	/* The same edges as the header bar, built the same way as the card in
	   the section above. Three bounds, because the container caps at one
	   width and the header keeps its gutter at another, and only all three
	   together make the two agree at every size. */
	position: relative;
	inline-size: min(
		var(--itw-hd-max),
		calc(100% + var(--itw-gutter) * 2),
		calc(100vw - var(--itw-gutter) * 2)
	);

	/* The theme caps this list at 56rem, which was right for a column of
	   four steps and holds them at 896px as cards. */
	max-inline-size: none;

	inset-inline-start: 50%;
	translate: -50% 0;
}

.itw-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1.25rem, 1rem + 1vw, 1.6rem);
	border: 0;
	border-radius: 20px;
	background: linear-gradient(170deg, var(--itw-white), var(--itw-surface));
	text-align: center;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px var(--itw-border),
		0 1px 2px rgba(16, 16, 20, 0.04),
		0 10px 24px rgba(16, 16, 20, 0.05);
	transition: transform 420ms var(--itw-ease-out), box-shadow 420ms var(--itw-ease);
}

.itw-flow__step::before,
.itw-flow__step::after { content: none; }

/* The theme takes the top padding off the first step and the bottom padding
   off the last, which was right when they were a column with rules between
   them. As cards it left the first one's tile hanging over the edge and its
   title 36px above the other three, and the fourth one's foot 25px low. */
.itw-flow__list .itw-flow__step:first-child {
	padding-block-start: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	border-block-start: 0;
}

.itw-flow__list .itw-flow__step:last-child {
	padding-block-end: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	border-block-end: 0;
}

.itw-flow__step:hover {
	transform: translateY(-4px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px rgba(217, 119, 6, 0.3),
		0 3px 6px rgba(16, 16, 20, 0.05),
		0 22px 44px rgba(16, 16, 20, 0.09);
}

/* The number on a tile turned on its corner, which is what stops four cards
   of text reading as a paragraph cut into four. */
.itw-flow__tile {
	display: grid;
	place-items: center;
	inline-size: 3.1rem;
	block-size: 3.1rem;
	margin-block-end: 0.35rem;
	border-radius: 14px;
	rotate: 45deg;
	color: var(--itw-white);
	box-shadow: 0 10px 20px rgba(16, 16, 20, 0.14);
	transition: rotate 520ms var(--itw-ease-out);
}

.itw-flow__step:hover .itw-flow__tile { rotate: 135deg; }

.itw-flow__n {
	rotate: -45deg;
	font-family: var(--itw-font-mono);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: inherit;
	transition: rotate 520ms var(--itw-ease-out);
}

.itw-flow__step:hover .itw-flow__n { rotate: -135deg; }

/* Four tones from one accent rather than four unrelated colours. */
.itw-flow__step--a .itw-flow__tile { background: linear-gradient(145deg, #E8880A, #B45309); }
.itw-flow__step--b .itw-flow__tile { background: linear-gradient(145deg, #D97706, #92400E); }
.itw-flow__step--c .itw-flow__tile { background: linear-gradient(145deg, #2A2A33, #101014); }
.itw-flow__step--d .itw-flow__tile { background: linear-gradient(145deg, #F0A03A, #D97706); }

.itw-flow__step h3 {
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: -0.022em;
}

.itw-flow__step > p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--itw-text-muted);
}

/* The line at the foot. The theme's own rule makes this a pill with a dot,
   which was right when the steps were a column and wrong now that they are
   cards, so every part of it is undone rather than half of it left behind. */
.itw-flow__step .itw-flow__note {
	display: block;
	margin-block-start: auto;
	padding: 0.85rem 0 0;
	inline-size: 100%;
	border-radius: 0;
	background: none;
	box-shadow: none;
	border-block-start: 1px solid var(--itw-border);
	font-family: var(--itw-font-heading);
	font-size: 0.75rem;
	font-weight: var(--itw-fw-semi);
	line-height: 1.45;
	color: var(--itw-accent-text);

	/* Two lines' worth, whatever the line says. One of the four fits on a
	   single line, and without this its rule sat 17px lower than the other
	   three. */
	min-block-size: calc(0.85rem + 2 * 1.45em);
}

.itw-flow__step .itw-flow__note::before { content: none; }

.itw-flow__step--c .itw-flow__note { color: var(--itw-heading); }

/* One thing absorbs the slack, not two. The paragraph had flex: 1 and the
   rule below it had margin-block-start: auto, and between them the fourth
   card put its rule 25px lower than the other three. */
.itw-flow__step > p:not(.itw-flow__note) { flex: 0 1 auto; }

/* ---- Arriving ----
   One after another, which is the difference between four steps arriving and
   four steps appearing. */
.js .itw-flow__list .itw-flow__step {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--itw-in-fade) var(--itw-ease),
	            transform var(--itw-in-move) cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 420ms var(--itw-ease);
}

.js .itw-flow__list .itw-flow__step.is-on,
.js .itw-flow__list.is-in .itw-flow__step { opacity: 1; transform: none; }

.js .itw-flow__list .itw-flow__step:nth-child(2) { transition-delay: var(--itw-in-step); }
.js .itw-flow__list .itw-flow__step:nth-child(3) { transition-delay: calc(var(--itw-in-step) * 2); }
.js .itw-flow__list .itw-flow__step:nth-child(4) { transition-delay: calc(var(--itw-in-step) * 3); }

@media (max-width: 1000px) {
	.itw-flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.itw-flow__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.js .itw-flow__list .itw-flow__step { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   WHO BUILDS IT

   The reference this follows is a client testimonial: a real customer, a
   real quote, a photograph. That is the one thing here that could not be
   copied, because writing a testimonial nobody said is inventing a customer.

   So it is a founder note instead. Same shape, same weight on the page, and
   every word of it is true: the photograph is Ahmad, the words are his, and
   the only claim made is one he can keep.
   ========================================================================== */

.itw-proof {
	position: relative;
	padding-block: clamp(2rem, 1.5rem + 1.8vw, 3.5rem) clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
	background: var(--itw-bg);
}

/* The two pieces overlap, which is what stops them reading as two unrelated
   boxes stacked up. */
.itw-proof__stack {
	position: relative;
	margin-block-start: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	padding-block-end: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
}


/* ==========================================================================
   THE WORLD

   A globe with the line above it climbing, in a frame. Drawn, so it costs no
   request and follows the palette.
   ========================================================================== */

.itw-world {
	position: relative;

	/* Clipped, so the globe is cut by the panel edge rather than hanging
	   out below it. This was dropped by accident while the width was being
	   changed, and the globe spilled past the card. */
	overflow: clip;
	inline-size: 86%;
	margin-inline: auto;
	aspect-ratio: 16 / 7;
	padding: clamp(0.7rem, 0.6rem + 0.5vw, 1rem);
	border-radius: 22px;
	background: var(--itw-surface);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.05),
		0 26px 54px rgba(16, 16, 20, 0.1);
}

.itw-world__chrome { display: flex; gap: 0.3rem; }
.itw-world__chrome i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(16, 16, 20, 0.14); }
.itw-world__chrome i:first-child { background: var(--itw-accent); }

/* ---- The line ----
   Drawn left to right by hiding its own length and giving it back. It runs
   above the globe because that is where the reference puts it, and because
   a line over a curve reads as distance covered. */
.itw-world__chart {
	position: absolute;
	z-index: 2;
	inset-block-start: 8%;
	inset-inline: 4%;
	block-size: 42%;
	overflow: visible;
}

.wc__line {
	stroke: var(--itw-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 900;
	stroke-dashoffset: 900;
	animation: itw-wc-draw 16s var(--itw-ease) infinite;
}

@keyframes itw-wc-draw {
	0%       { stroke-dashoffset: 900; }
	44%, 90% { stroke-dashoffset: 0; }
	100%     { stroke-dashoffset: 900; }
}

/* The head of the line, so it reads as being drawn now. */
.itw-world__head {
	position: absolute;
	z-index: 3;
	inline-size: 10px;
	block-size: 10px;
	inset-block-start: 8%;
	inset-inline-start: 4%;
	border-radius: 50%;
	background: var(--itw-accent);
	box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
	offset-path: path("M0 118 L40 96 L80 108 L120 74 L160 92 L200 60 L240 82 L280 46 L320 66 L360 38 L400 56 L440 26 L480 44 L520 20 L560 32 L600 8");
	animation: itw-wc-head 16s var(--itw-ease) infinite;
}

@keyframes itw-wc-head {
	0%        { offset-distance: 0%; opacity: 0; }
	5%        { opacity: 1; }
	44%, 90%  { offset-distance: 100%; opacity: 1; }
	96%, 100% { opacity: 0; }
}

/* ---- The globe ----

   A real orthographic projection: coastlines given as latitude and longitude
   and worked out for one viewpoint, which is what a photograph of the earth
   is and what makes the shapes right rather than approximately right.

   It does not turn. Turning it means a new projection for every frame, and
   at ten kilobytes a frame that is a quarter of a megabyte of decoration on
   the home page. The reference is a still globe too, and a still one that is
   accurate beats a moving one that is not.
   ========================================================================== */

.itw-world__globe {
	position: absolute;
	inset-block-end: -58%;
	inset-inline-start: 50%;
	inline-size: 54%;
	aspect-ratio: 1;
	translate: -50% 0;
}

.gl-globe { display: block; inline-size: 100%; block-size: auto; }

.gl-land path { fill: #3E4C6B; stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.8; }

.gl-grat path { fill: none; stroke: rgba(16, 16, 20, 0.16); stroke-width: 0.8; }

/* The group is only there to keep the markup readable. */
.gl-dots { pointer-events: none; }

/* The six places, lit one after another. Same colour, because they are the
   same kind of thing: somewhere we have worked. */
.gl-dot {
	fill: var(--itw-accent);
	stroke: #FFFFFF;
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
	animation: itw-gl-dot 7s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.5s);
}

@keyframes itw-gl-dot {
	0%, 100% { opacity: 0.45; scale: 0.8; }
	18%      { opacity: 1; scale: 1.15; }
	40%      { opacity: 0.7; scale: 1; }
}


/* ---- The badge ----
   A mark, not a number. The reference puts a score here; we have no score
   worth printing on every page, and a made up one is worse than none.
   ========================================================================== */
.itw-world__badge {
	position: absolute;
	/* Half above the panel and half below it, sitting on the edge.

	   It lives outside the panel, not inside it: the panel clips so the
	   globe is cut by its lower edge, and anything straddling the top edge
	   was cut in half by the same rule. */
	z-index: 2;
	inset-block-start: 0;
	inset-inline-start: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	inline-size: 3.4rem;
	block-size: 3.4rem;
	border-radius: 50%;
	background: var(--itw-white);
	box-shadow:
		inset 0 0 0 3px var(--itw-accent),
		0 10px 22px rgba(217, 119, 6, 0.24);
	animation: itw-world-beat 6s ease-in-out infinite;
}

/* The theme's own mark, not two letters standing in for it. */
.itw-world__logo { inline-size: 1.6rem; block-size: auto; }

@keyframes itw-world-beat {
	0%, 100% { box-shadow: inset 0 0 0 3px var(--itw-accent), 0 10px 22px rgba(217, 119, 6, 0.24); }
	50%      { box-shadow: inset 0 0 0 3px var(--itw-accent), 0 10px 30px rgba(217, 119, 6, 0.4); }
}

.itw-world__cursor {
	position: absolute;
	inset-block-start: 6%;
	inset-inline-end: 5%;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--itw-white);
	color: var(--itw-midnight);
	box-shadow: 0 8px 18px rgba(16, 16, 20, 0.16);
	animation: itw-world-float 7s ease-in-out infinite;
}

.itw-world__cursor svg { inline-size: 0.85rem; block-size: 0.85rem; }

@keyframes itw-world-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-6px, 8px, 0); }
}


/* ==========================================================================
   THE NOTE

   Pulled up over the world panel, which is the arrangement the reference
   uses and the reason the two read as one thing.
   ========================================================================== */

.itw-note {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	align-items: stretch;
	/* The same edges as the header bar, built the same way it is: fill the
	   space, stop at the header's own maximum. Reaching out through the
	   container gutter instead matched at 1440 and overshot at every width
	   below it, because the header keeps its gutter and the container caps
	   before it. */
	/* Whichever is smaller: the header's own maximum, or the full width of
	   the container including the gutter it sits inside.

	   Three bounds, because two were not enough. Capped at the maximum it
	   fell short by the gutter on wide screens. Reaching through the gutter
	   it overshot on every screen below the cap, because the container stops
	   capping there and the header keeps its gutter. The third bound is the
	   header's own rule, and it is what makes the two agree everywhere.

	   Centred with a translate rather than auto margins, because a box wider
	   than its parent cannot be centred with margins. */
	inline-size: min(
		var(--itw-hd-max),
		calc(100% + var(--itw-gutter) * 2),
		calc(100vw - var(--itw-gutter) * 2)
	);
	margin-inline: 0;
	inset-inline-start: 50%;
	translate: -50% 0;
	margin-block-start: clamp(-4rem, -3rem - 2.5vw, -2rem);
	border-radius: 20px;
	overflow: clip;
	background: var(--itw-surface);
	box-shadow:
		inset 0 0 0 1px var(--itw-border),
		0 2px 6px rgba(16, 16, 20, 0.05),
		0 28px 60px rgba(16, 16, 20, 0.14);
}

.itw-note__say {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
}

.itw-note__title {
	font-family: var(--itw-font-heading);
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
	font-weight: var(--itw-fw-bold);
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--itw-heading);
}

.itw-note__quote { margin: 0; }

.itw-note__quote p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--itw-text-muted);
}

.itw-note__who { display: flex; flex-direction: column; gap: 0.1rem; }

.itw-note__who b {
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: var(--itw-fw-semi);
	color: var(--itw-heading);
}

.itw-note__who span { font-size: 0.8125rem; color: var(--itw-text-muted); }

.itw-note__go {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	margin-block-start: auto;
	padding: 0.7rem 1.2rem;
	border-radius: var(--itw-radius-full);
	background: var(--itw-midnight);
	color: var(--itw-dark-heading);
	font-family: var(--itw-font-heading);
	font-size: 0.875rem;
	font-weight: var(--itw-fw-bold);
	text-decoration: none;
	transition: background-color var(--itw-dur) var(--itw-ease), transform 320ms var(--itw-ease-out);
}

.itw-note__go svg { inline-size: 13px; block-size: 13px; }
.itw-note__go:hover { background: #22222A; }
.itw-note__go:active { transform: translateY(1px); }

/* ---- The photograph ---- */
.itw-note__side {
	position: relative;
	display: grid;
	place-items: center;
	gap: 0.9rem;
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
	background: var(--itw-midnight);
}

.itw-note__grid {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, rgba(250, 248, 245, 0.06) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(180deg, rgba(250, 248, 245, 0.06) 0 1px, transparent 1px 44px);
}

.itw-note__shot {
	position: relative;
	margin: 0;
	inline-size: min(100%, 11rem);
	aspect-ratio: 1;
	border-radius: 16px;
	overflow: clip;
	background: #1A1A20;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.itw-note__shot img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
		position: relative;
	z-index: 1;
}

/* Until the photograph is in the theme, the frame holds the initials rather
   than an empty dark square. It is behind the image, so the moment the file
   is there it is covered without any change to the markup. */
.itw-note__shot::before {
	content: "AH";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--itw-font-heading);
	font-size: 2.25rem;
	font-weight: var(--itw-fw-black);
	letter-spacing: -0.04em;
	color: rgba(250, 248, 245, 0.18);
}

.itw-note__mark {
	position: relative;
	font-family: var(--itw-font-heading);
	font-size: 0.9375rem;
	font-weight: var(--itw-fw-black);
	letter-spacing: -0.03em;
	color: var(--itw-dark-heading);
}

.itw-note__mark s { text-decoration: none; color: var(--itw-accent); }


/* ==========================================================================
   RESPONSIVE AND REDUCED MOTION
   ========================================================================== */

@media (max-width: 760px) {
	/* Stacked, and the note no longer climbs over the panel: at this width
	   the overlap eats the globe rather than tying the two together. */
	.itw-note {
		grid-template-columns: minmax(0, 1fr);
		margin-block-start: -1.5rem;
	}

	.itw-note__side { order: -1; }
	.itw-note__shot { inline-size: min(60%, 9rem); }
	.itw-world { aspect-ratio: 16 / 11; }
	.itw-world__globe { inline-size: 88%; inset-block-end: -54%; }
}

@media (prefers-reduced-motion: reduce) {
	.wc__line,
	.itw-world__head,
	.gl-dot,
	.itw-world__badge,
	.itw-world__cursor { animation: none; }

	/* Shown finished rather than mid draw. */
	.wc__line { stroke-dashoffset: 0; }
	.itw-world__head { offset-distance: 100%; }
	.gl-dot { opacity: 1; scale: 1; }
}