/* Design & Build: the work is the page. Big, whole pictures and short words, Landywood first, then more work,
   what we make, the stages and the quote. Everything sits under .dbw so the site's own classes are untouched. */
.dbw { --dbw-gut: clamp(16px, 5.5vw, 79px); color: var(--ha-ink); background: var(--ha-paper); }
.dbw * { box-sizing: border-box; }
.dbw img { display: block; width: 100%; height: auto; }
.dbw :where(p) { margin: 0; max-width: none; }
.dbw figure { margin: 0; }
.dbw figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ha-support-on-paper); }
.dbw .dbw-dark { background: var(--ha-ink); color: var(--ha-white); }
.dbw .dbw-dark figcaption { color: var(--ha-meta-on-dark); }
/* Line up with the site's sections: the page gutter, then the section's own gutter inside it */
.dbw .dbw-in { padding-inline: calc(max(var(--ha-gutter), (100vw - var(--ha-content-max)) / 2) + var(--dbw-gut)); }
.dbw .dbw-ph { border-radius: 10px; }

/* Opening: the headline, then Neil in the pub, edge to edge */
.ip-hero.dbw-hero .ip-in { align-items: end; }
body.ha-inner main .ip-sec.dbw-hero h1 { max-width: 14ch; text-wrap: balance; }
body.ha-inner main .ip-sec.dbw-hero h1 .lead { color: var(--ha-vapour); }
.dbw-cap { font-size: 13px; line-height: 1.5; color: var(--ha-vapour); text-align: right; justify-self: end; }
p.dbw-cap.dbw-cap { max-width: 34ch; text-wrap: balance; } /* two even lines, wherever the column breaks them */
.dbw-heroimg { margin: 0; background: var(--ha-ink); }
.dbw-heroimg img { display: block; width: 100%; height: auto; }
/* First screen (Lee, 30 Oct): the headline, then Neil's phone and his dog in view. The picture fills what the
   headline leaves of the screen, cropped to the phone; the caption sits at its top right, or under it on phones. */
.dbw-hero .ip-in { padding-bottom: clamp(32px, 4vw, 56px); }
.dbw-heroimg figcaption.dbw-cap { margin: 0; padding: 14px clamp(16px, 5.5vw, 79px) 0; color: var(--ha-vapour); text-align: left; }
@media (min-width: 901px) {
  .dbw-heroimg { position: relative; }
  .dbw-heroimg img { height: clamp(380px, calc(100svh - 34vw - 30px), 55.8vw); object-fit: cover; object-position: 50% 60%; }
  .dbw-heroimg figcaption.dbw-cap { position: absolute; max-width: 34ch; text-wrap: balance; bottom: calc(100% + clamp(32px, 4vw, 56px)); right: calc(max(0px, (100% - 1440px) / 2) + clamp(16px, 5.5vw, 79px)); padding: 0; text-align: right; }
}
@media (max-width: 700px) { .dbw-heroimg img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 70%; } }

/* The idea, in one line */
.dbw .dbw-statement { padding-block: clamp(88px, 9vw, 140px) clamp(72px, 7vw, 104px); }
.dbw .dbw-statement p { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.dbw .dbw-statement p span { color: var(--ha-support-on-paper); }

/* Case opener: the name, the facts, then the place */
.dbw .dbw-casehead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; padding-bottom: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ha-ink); padding-top: clamp(28px, 3vw, 40px); }
.dbw .dbw-casehead h2 { margin: 0; font-size: clamp(56px, 9vw, 148px); line-height: 1; font-weight: 800; letter-spacing: -.05em; color: var(--ha-ink); }
.dbw .dbw-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 0; }
.dbw .dbw-facts dt { font-size: 13px; color: var(--ha-support-on-paper); margin-bottom: 4px; }
.dbw .dbw-facts dd { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; }
.dbw .dbw-casesub { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--ha-support-on-paper); max-width: 34ch; margin-top: clamp(28px, 3.4vw, 52px); }
.dbw .dbw-casesub b { color: var(--ha-ink); font-weight: 700; }

/* The crew's own photos: a justified row, every picture whole */
.dbw .dbw-jrow { display: flex; gap: clamp(8px, 1vw, 14px); margin-top: clamp(12px, 1.4vw, 20px); }
.dbw .dbw-jrow figure { min-width: 0; flex: var(--a); }
.dbw .dbw-jrow img { border-radius: 10px; }
.dbw .dbw-note { margin-top: 12px; font-size: 13px; color: var(--ha-support-on-paper); }

/* The brief, and Lee's sketch of it drawing itself in */
.dbw .dbw-brief { padding-block: clamp(72px, 8vw, 120px) clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--ha-hairline); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.dbw .dbw-briefline { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.dbw .dbw-briefline span { color: var(--ha-support-on-paper); }
.dbw .dbw-brief .sv-stage { box-shadow: 0 2px 4px rgba(var(--ha-ink-rgb), .12), 0 30px 54px -30px rgba(var(--ha-ink-rgb), .45); }

/* Chapters: the words hold still on the left, the work moves on the right */
.dbw .dbw-chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 80px); padding-block: clamp(72px, 8vw, 120px); }
.dbw .dbw-words { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.dbw .dbw-step { font-size: 15px; font-weight: 700; color: var(--ha-support-on-paper); }
.dbw .dbw-words h3 { margin: 0; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; color: inherit; }
.dbw .dbw-words p:not(.dbw-step) { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ha-support-on-paper); max-width: 30ch; }
.dbw .dbw-dark .dbw-step { color: var(--ha-meta-on-dark); }
.dbw .dbw-dark .dbw-words p:not(.dbw-step) { color: var(--ha-vapour); }
.dbw .dbw-work { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.dbw .dbw-plinth { background: var(--ha-bone-alt); border-radius: 10px; padding: clamp(24px, 4vw, 56px); }
.dbw .dbw-black { background: #000; border-radius: 10px; overflow: hidden; }
.dbw .dbw-landyrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.dbw .dbw-landyrow .dbw-black { aspect-ratio: 1040 / 940; display: flex; align-items: center; justify-content: center; }
.dbw .dbw-landyrow .dbw-phone { width: 34%; }
.dbw .dbw-landyrow .dbw-landy { padding: 9%; }
.dbw .dbw-landy img { width: auto; max-width: 100%; max-height: 100%; }

/* Neil, in his own words */
.dbw .dbw-proof { padding-block: clamp(56px, 6vw, 88px) clamp(88px, 9vw, 140px); border-top: 1px solid var(--ha-ink-raised); }
.dbw .dbw-neil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.dbw .dbw-neil img { border-radius: 10px; }
.dbw .dbw-quote { margin: 0; }
.dbw .dbw-quote p { font-size: clamp(34px, 5.2vw, 80px); line-height: 1.04; font-weight: 800; letter-spacing: -.04em; max-width: 20ch; text-wrap: balance; color: var(--ha-white); }
.dbw .dbw-quote footer { margin-top: 24px; font-size: 16px; color: var(--ha-vapour); }
.dbw .dbw-quote footer b { color: var(--ha-white); font-weight: 700; }

/* Device frames, drawn plainly so the screens read as real */
.dbw .dbw-browser { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 12px 40px rgba(var(--ha-ink-rgb), .16); border: 1px solid var(--ha-hairline); }
.dbw .dbw-browser .dbw-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #ECE6E2; border-bottom: 1px solid var(--ha-hairline); }
.dbw .dbw-browser .dbw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D3CBC6; }
.dbw .dbw-browser .dbw-bar span { margin-left: 10px; font-size: 12px; color: var(--ha-support-on-paper); }
.dbw .dbw-dark .dbw-browser { border-color: #3d4047; background: #111; }
.dbw .dbw-dark .dbw-browser .dbw-bar { background: #33363C; border-bottom-color: #3d4047; }
.dbw .dbw-dark .dbw-browser .dbw-bar i { background: #55585f; }
.dbw .dbw-dark .dbw-browser .dbw-bar span { color: var(--ha-meta-on-dark); }
.dbw .dbw-phone { border-radius: clamp(22px, 2.6vw, 38px); border: clamp(5px, .6vw, 8px) solid #1d1f22; overflow: hidden; background: #1d1f22; box-shadow: 0 18px 40px rgba(var(--ha-ink-rgb), .24); }
/* iPhone 18 Pro, drawn in CSS: a thin black bezel inside a brushed titanium band, the Dynamic Island, and a side
   button. The screen keeps the iPhone's 1206 x 2622 shape, so every phone reads the same and its screenshot fills it. */
.dbw .dbw-phone.dbw-i18 { position: relative; container-type: inline-size; border: 0; border-radius: 0; overflow: visible; padding: 0; background: none; box-shadow: none; }
.dbw .dbw-i18 > .dbw-fr { position: relative; display: block; padding: 1.8cqw; border-radius: 15cqw; background: #050506; box-shadow: 0 0 0 1px #9b9894, 0 0 0 2.5px #4a4846, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 50px -14px rgba(0, 0, 0, .55); }
.dbw .dbw-fr > img { display: block; width: 100%; height: calc(96.4cqw * 2622 / 1206); object-fit: cover; object-position: 50% 0; border-radius: 13.2cqw; }
.dbw .dbw-fr::before { content: ""; position: absolute; z-index: 2; top: 4.4cqw; left: 50%; width: 30cqw; height: 8.8cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.dbw .dbw-fr::after { content: ""; position: absolute; right: -0.9cqw; top: 22%; width: 0.9cqw; height: 9%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #4a4846, #9b9894); }
/* a website in Safari: the status bar sits on the site's own header colour, either side of the Dynamic Island */
.dbw .dbw-web .dbw-sb { display: flex; align-items: center; justify-content: space-between; height: 13cqw; padding: 1.5cqw 8cqw 0 9cqw; border-radius: 13.2cqw 13.2cqw 0 0; background: var(--sb, #fff); color: #111; font: 600 4cqw/1 -apple-system, "SF Pro Text", var(--ha-font-sans); letter-spacing: -.01em; }
.dbw .dbw-sb svg { height: 3.4cqw; width: auto; }
.dbw .dbw-web .dbw-fr > img { height: calc(96.4cqw * 2622 / 1206 - 13cqw); border-radius: 0 0 13.2cqw 13.2cqw; }

/* More work */
.dbw .dbw-h2 { margin: 0 0 clamp(32px, 4vw, 56px); font-size: clamp(34px, 3.9vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; max-width: 20ch; color: inherit; }
.dbw .dbw-h2 span { color: var(--ha-support-on-paper); }
.dbw .dbw-more { padding-top: clamp(88px, 9vw, 140px); }
.dbw .dbw-more .dbw-h2 { margin-bottom: 0; }
.dbw .dbw-pj { padding-block: clamp(64px, 7vw, 104px); border-top: 1px solid var(--ha-hairline); }
.dbw .dbw-pj.first { margin-top: clamp(32px, 4vw, 56px); }
.dbw .dbw-pjhead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 40px; align-items: baseline; margin-bottom: clamp(28px, 3.5vw, 48px); }
.dbw .dbw-pjhead h3 { margin: 0; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; color: inherit; }
.dbw .dbw-pjhead p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--ha-support-on-paper); }
.dbw .dbw-pjhead .dbw-m { font-size: 14px; line-height: 1.6; }
.dbw .dbw-pjhead .dbw-m a { color: var(--ha-ink); font-weight: 700; text-underline-offset: 4px; }
/* Phillips: the garden edge to edge, and the site breaking out over its lower edge onto the paper */
.dbw .dbw-pbls { margin-bottom: clamp(72px, 8vw, 120px); }
.dbw .dbw-pbls-bg { width: 100%; }
.dbw .dbw-pbls-dev { position: relative; width: 66%; margin: calc(-1 * clamp(120px, 19vw, 280px)) 0 0 auto; padding-right: 8%; }
.dbw .dbw-pbls-dev .dbw-phone { position: absolute; right: 0; bottom: -7%; width: 17%; }
/* TRIZ 40 in use: the team at the bench, the app and its icon on the quiet wall beside them */
.dbw .dbw-triz { position: relative; }
.dbw .dbw-triz-bg { border-radius: 10px; }
.dbw .dbw-triz-fg { position: absolute; right: 3%; bottom: 8%; width: 19%; display: grid; grid-template-columns: 56fr 40fr; gap: 4%; align-items: end; }
.dbw .dbw-icon { align-self: center; border-radius: 22%; overflow: hidden; box-shadow: 0 18px 40px rgba(var(--ha-ink-rgb), .24); }
.dbw .dbw-own { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dbw .dbw-own h3 { margin: 0 0 16px; font-size: clamp(40px, 4.6vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -.04em; color: inherit; }
.dbw .dbw-own p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ha-support-on-paper); max-width: 30ch; }
.dbw .dbw-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-weight: 800; color: var(--ha-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Each project wears its own brand in its title */
.dbw .dbw-casehead h2.dbw-landy-mark { line-height: 0; }
.dbw .dbw-landy-mark img { width: clamp(260px, 40vw, 600px); }
.dbw .dbw-pbls-title { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); color: #2F4A2A !important; }
.dbw .dbw-pbls-title img { width: clamp(52px, 5vw, 76px); flex: none; }
/* TRIZ40's own lockup: Helvetica 400, never bold, 40 in burnt orange, by Problemsmith beneath, always on charcoal */
.dbw .dbw-trizband { background: #232323; color: #F0EDE8; }
/* Problemsmith, in its own approved identity (24 Oct 2026): charcoal, teal, IBM Plex Sans, the canonical wordmark. */
.dbw .dbw-psband { background: #202423; color: #F3F1E9; font-family: "IBM Plex Sans", var(--ha-font-sans); }
.dbw .dbw-psband .dbw-pj { border-top: 0; }
.dbw .dbw-psband .dbw-pjhead p { color: #B6C2BF; }
.dbw .dbw-psband .dbw-pjhead .dbw-m { color: #8E9A97; }
.dbw .dbw-ps-title img { display: block; width: clamp(200px, 22vw, 320px); height: auto; }
.dbw .dbw-psband .dbw-browser { border-color: #56615E; background: #202423; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); }
.dbw .dbw-psband .dbw-browser .dbw-bar { background: #303735; border-bottom-color: #56615E; }
.dbw .dbw-psband .dbw-browser .dbw-bar i { background: #56615E; }
.dbw .dbw-psband .dbw-browser .dbw-bar span { color: #B6C2BF; }
.dbw .dbw-browser video { display: block; width: 100%; height: auto; }
.dbw .dbw-ps-stages { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(12px, 1.6vw, 24px); }
@media (max-width: 700px) { .dbw .dbw-ps-stages { grid-template-columns: 1fr; } }
.dbw .dbw-trizband .dbw-pj { border-top: 0; }
.dbw .dbw-trizband .dbw-pjhead p { color: #9A9690; }
.dbw .dbw-triz-title, .dbw .dbw-triz-title * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400 !important; letter-spacing: .01em !important; }
.dbw .dbw-triz-title .tz { color: #F0EDE8; }
.dbw .dbw-triz-title .tz span { color: #D47042; }
.dbw .dbw-triz-title small { display: flex; align-items: baseline; gap: .35em; margin-top: 10px; font-size: clamp(14px, 1.2vw, 17px); color: #9A9690; letter-spacing: 0; }
.dbw .dbw-triz-title .tz-ps { color: #8A8A8F; }
.dbw .dbw-triz-title .tz-ps span { color: #ABABAF; }
.dbw .dbw-triz-title sup { font-size: .55em; color: #9A9690; }

/* Landywood in its own colours: deep green, evergreen and mint, lime for the details, charcoal for the build */
.dbw .dbw-lw { --lw-green: #185951; --lw-band: #123F3A; --lw-mint: #C2DBD7; --lw-lime: #8FB33A; --lw-paper-on-dark: #EAF2F0; --lw-soft-on-dark: #AFC4BF; }
.dbw .dbw-lw :is(.dbw-words h3, .dbw-briefline) { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.015em; }
.dbw .lw-open { background: var(--lw-band); color: var(--lw-paper-on-dark); padding-bottom: clamp(56px, 6vw, 88px); }
.dbw .lw-open .dbw-casehead { border-top: 0; padding-top: clamp(56px, 6vw, 88px); }
.dbw .lw-open .dbw-casehead::before { content: ""; grid-column: 1 / -1; height: 4px; width: 72px; background: var(--lw-lime); border-radius: 2px; margin-bottom: 8px; }
.dbw .lw-open .dbw-casesub { color: var(--lw-soft-on-dark); }
.dbw .lw-open .dbw-casesub b, .dbw .lw-open .dbw-facts dd { color: var(--lw-paper-on-dark); }
.dbw .lw-open .dbw-facts dt { color: var(--lw-lime); }
.dbw .lw-open figcaption, .dbw .lw-open .dbw-note { color: var(--lw-soft-on-dark); }
.dbw .lw-brief { background: var(--lw-green); color: var(--lw-paper-on-dark); }
.dbw .lw-brief .dbw-brief { border-bottom: 0; padding-block: clamp(72px, 8vw, 120px); }
.dbw .lw-brief .dbw-briefline span { color: var(--lw-mint); }
.dbw .lw-brief .dbw-link { color: var(--lw-paper-on-dark); text-decoration-color: var(--lw-lime); }
.dbw .lw-brief .sv-stage { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 36px 64px -30px rgba(0, 0, 0, .55); }
.dbw .lw-mint { background: var(--lw-mint); }
.dbw .lw-mint .dbw-step { color: var(--lw-green); }
.dbw .lw-mint .dbw-words p:not(.dbw-step) { color: #2F4440; }
.dbw .lw-mint .dbw-plinth { background: #E7EEEC; }
.dbw .lw-mint figcaption { color: #2F4440; }
.dbw .dbw-lw .dbw-dark .dbw-step, .dbw .dbw-lw .dbw-quote footer b { color: var(--lw-lime); }
/* Landywood's bands as a deck: each scrolls through, holds by its foot, and the next slides over it while
   the one beneath eases back and darkens. Each new band is a magnetic detent; a firm scroll carries on.
   landywood-deck.js sets --stick (how far a tall band sits above the top) and --under (0 to 1). */
/* inner.css turns page snapping off on every inner page. Design & Build turns it back on only while a detent is
   just ahead (page-detents.js sets .dbw-snap), so its detents hold without pulling small gestures back */
html.dbw-snap { scroll-snap-type: y proximity !important; }
.dbw .dbw-lw.is-deck > div { position: sticky; top: var(--stick, 0px); transform-origin: 50% calc(100% - 50vh); transform: scale(calc(1 - var(--under, 0) * .04)); }
.dbw .dbw-lw.is-deck > div::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--under, 0) * .35); pointer-events: none; }
.dbw .dbw-lw.is-deck > div + div, .dbw .dbw-lw.is-deck > .lw-detent + div { border-radius: 22px 22px 0 0; box-shadow: 0 -18px 48px rgba(0, 0, 0, .28); }
.dbw .dbw-lw.is-deck > div:last-child { position: relative; top: 0; }
.dbw .dbw-lw .lw-detent { display: block; height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.dbw .dbw-lw .dbw-dark .dbw-proof { border-top-color: rgba(143, 179, 58, .35); }

/* ThoughtSift, featured in its own world: its ink, its teal, its type */
.dbw .dbw-tsf { --ts-teal: #20C8A0; --ts-fg: #E8EDF8; --ts-soft: #B0B8D0; background: #080B12; color: var(--ts-fg); padding-block: clamp(88px, 9vw, 140px); font-family: "Space Grotesk", var(--ha-font-sans); }
.dbw .dbw-tsf-head { display: grid; gap: clamp(28px, 3.5vw, 48px); }
.dbw .dbw-tsf-mark { margin: 0; display: flex; align-items: center; gap: .16em; font: 600 clamp(32px, 9vw, 140px)/.9 "Space Grotesk", var(--ha-font-sans); letter-spacing: -.035em; color: var(--ts-fg); }
.dbw .dbw-tsf-mark img { width: .82em; height: .82em; border-radius: 22%; flex: none; }
.dbw .dbw-tsf-mark span { color: var(--ts-teal); }
.dbw .dbw-tsf-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px clamp(32px, 5vw, 80px); align-items: start; }
.dbw .dbw-tsf-copy .dbw-tsf-m { grid-column: 2; }
.dbw .dbw-tsf-line { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.dbw .dbw-tsf-copy p:not(.dbw-tsf-line) { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--ts-soft); max-width: 40ch; }
.dbw .dbw-tsf-m a { color: var(--ts-teal); font-weight: 600; text-underline-offset: 4px; }
.dbw .dbw-tsf-show { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .62fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.dbw .dbw-tsf-walk img { border-radius: 12px; }

/* What we make, and all the work */
.dbw .dbw-index { padding-block: clamp(72px, 8vw, 120px); border-top: 1px solid var(--ha-ink); }
/* What we make: a studio's capabilities index. Each way of working is a row, its name set large on the left
   and its work in quiet columns on the right: products and services, Amps and systems, then the web. */
.dbw .dbw-way { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(32px, 5vw, 80px); padding-block: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--ha-hairline); }
.dbw .dbw-way:first-child { border-top-color: var(--ha-ink); }
.dbw .dbw-way h3 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--ha-ink); }
.dbw .dbw-way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px clamp(24px, 3vw, 48px); align-content: start; }
.dbw .dbw-way .dbw-way-do { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
.dbw .dbw-way .dbw-way-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dbw .dbw-way li { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ha-ink); }
.dbw .dbw-way li small { display: block; margin-top: 6px; max-width: 34ch; font-size: 15px; line-height: 1.45; font-weight: 500; letter-spacing: 0; color: var(--ha-support-on-paper); }
.dbw .dbw-way a { color: var(--ha-ink); text-decoration-color: var(--ha-bloom); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 900px) {
  .dbw .dbw-way { grid-template-columns: 1fr; }
  .dbw .dbw-way .dbw-way-do, .dbw .dbw-way .dbw-way-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 520px) { .dbw .dbw-way .dbw-way-do, .dbw .dbw-way .dbw-way-row { grid-template-columns: 1fr; } }
.dbw .dbw-launch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 0; padding-top: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--ha-hairline); scroll-margin-top: 96px; }
.dbw .dbw-launch h3 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ha-ink); }
.dbw .dbw-launch p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ha-support-on-paper); }


@media (max-width: 960px) {
  .dbw .dbw-tsf-copy { grid-template-columns: minmax(0, 1fr); }
  .dbw .dbw-tsf-copy .dbw-tsf-m { grid-column: auto; }
  .dbw .dbw-pjhead, .dbw .dbw-neil, .dbw .dbw-casehead, .dbw .dbw-own, .dbw .dbw-chapter, .dbw .dbw-brief { grid-template-columns: minmax(0, 1fr); }
  .dbw .dbw-neil figure { max-width: 320px; }
  .dbw .dbw-words { position: static; }
}
@media (max-width: 900px) { .dbw-cap { text-align: left; justify-self: start; } }
@media (max-width: 600px) {
  .dbw .dbw-tsf-show { grid-template-columns: minmax(0, 1fr); }
  .dbw .dbw-tsf-show .dbw-phone { width: 62%; justify-self: center; }
  .dbw .dbw-landyrow, .dbw .dbw-facts, .dbw .dbw-launch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--ha-hairline); scroll-margin-top: 96px; }
  .dbw .dbw-jrow { flex-wrap: wrap; gap: 10px; }
  .dbw .dbw-jrow figure { flex: 0 0 calc((100% - 10px) * var(--a) / 2.083); }
  .dbw .dbw-triz-fg { position: static; width: auto; margin: 20px auto 0; max-width: 250px; }
  .dbw .dbw-pbls-dev { width: auto; margin-top: -40px; padding-right: 18%; }
  .dbw .dbw-pbls-dev .dbw-phone { width: 30%; bottom: -12%; }
}

/* HumanAmp OS in its own lockup: the teal Amp tile, Human Amp, OS in the OS teal */
.dbw .dbw-os-mark { display: flex; flex-wrap: wrap; align-items: center; gap: .28em; }
@media (max-width: 400px) { .dbw .dbw-own h3.dbw-os-mark { font-size: 32px; } }
.dbw .dbw-os-mark img { width: 1.05em; height: 1.05em; border-radius: 22%; flex: none; }
.dbw .dbw-os-mark span { font-weight: 500; letter-spacing: -.035em; }
.dbw .dbw-os-mark b { font-weight: 800; }
.dbw .dbw-os-mark em { font-style: normal; font-weight: 800; color: #34A8AA; margin-left: .22em; }

/* ThoughtSift, deeper: from storm to gist, what it does for you, and the brand kit */
.dbw .dbw-tsf-storm { position: relative; margin-top: clamp(64px, 8vw, 120px); border-radius: 14px; overflow: hidden; }
.dbw .dbw-tsf-storm img { width: 100%; height: auto; }
.dbw .dbw-tsf-storm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 11, 18, .82) 0%, rgba(8, 11, 18, .55) 38%, rgba(8, 11, 18, 0) 70%); pointer-events: none; }
.dbw .dbw-tsf-storm figcaption { position: absolute; z-index: 1; left: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); max-width: 30ch; margin: 0; font: 500 clamp(17px, 1.6vw, 22px)/1.4 "Space Grotesk", var(--ha-font-sans); color: var(--ts-soft); text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.dbw .dbw-tsf-storm figcaption b { display: block; margin-bottom: 6px; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ts-fg); }
.dbw .dbw-tsf-value { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 48px); }
.dbw .dbw-tsf-value li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(232, 237, 248, .14); }
.dbw .dbw-tsf-value i { font: 700 13px/1 "Space Mono", var(--ha-font-mono); font-style: normal; color: var(--ts-teal); }
.dbw .dbw-tsf-value b { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--ts-fg); }
.dbw .dbw-tsf-value span { font-size: 16px; line-height: 1.5; color: var(--ts-soft); }
.dbw .dbw-tsf-brand { margin-top: clamp(64px, 8vw, 120px); }
.dbw .dbw-tsf-brand h3 { margin: 0 0 clamp(24px, 3vw, 40px); font: 600 clamp(28px, 3vw, 44px)/1.05 "Space Grotesk", var(--ha-font-sans); letter-spacing: -.03em; color: var(--ts-fg); }
.dbw .dbw-tsf-kit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 16px; }
.dbw .dbw-tsf-kit > * { margin: 0; border-radius: 14px; background: #0F1320; border: 1px solid rgba(232, 237, 248, .08); }
.dbw .dbw-tsf-logo { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px 18px; }
.dbw .dbw-tsf-logo img { width: 52px; height: 52px; border-radius: 13px; }
.dbw .dbw-tsf-logo span { font: 600 clamp(26px, 2.4vw, 34px)/1 "Space Grotesk", var(--ha-font-sans); letter-spacing: -.03em; color: var(--ts-fg); }
.dbw .dbw-tsf-logo em { font-style: normal; color: var(--ts-teal); }
.dbw .dbw-tsf-swatches { list-style: none; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dbw .dbw-tsf-swatches li { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 64px; padding: 10px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(232, 237, 248, .12); }
.dbw .dbw-tsf-swatches b { font: 600 13px/1.2 "Space Grotesk", var(--ha-font-sans); color: var(--t, #E8EDF8); }
.dbw .dbw-tsf-swatches code { font: 400 11px/1.2 "Space Mono", var(--ha-font-mono); color: var(--t, #B0B8D0); }
.dbw .dbw-tsf-type { padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.dbw .dbw-tsf-type p { display: flex; align-items: baseline; gap: 10px; color: var(--ts-fg); }
.dbw .dbw-tsf-type .g { font: 600 44px/1 "Space Grotesk", var(--ha-font-sans); }
.dbw .dbw-tsf-type .m { font: 400 40px/1 "Space Mono", var(--ha-font-mono); color: var(--ts-teal); }
.dbw .dbw-tsf-type span { font: 400 12px/1 "Space Mono", var(--ha-font-mono); color: var(--ts-soft); }
.dbw .dbw-tsf-spark { overflow: hidden; }
.dbw .dbw-tsf-spark img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  .dbw .dbw-tsf-value { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbw .dbw-tsf-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dbw .dbw-tsf-storm figcaption { position: static; transform: none; padding: 16px 0 0; text-shadow: none; }
  .dbw .dbw-tsf-storm::after { display: none; }
  .dbw .dbw-tsf-storm { overflow: visible; }
  .dbw .dbw-tsf-storm img { border-radius: 14px; }
}

/* The quote ends on two actions: book Lee, or tell Amp first */
#quote .ps-acts { display: flex; flex-wrap: wrap; gap: 10px; }
#quote .ps-acts .ip-btn { margin: 0; }
#quote .ps-acts { align-items: center; gap: 12px 24px; }
#quote .ps-amp { cursor: pointer; font: inherit; font-weight: 700; }
#quote .ps-cta { display: inline-flex; align-items: center; min-height: 44px; color: var(--ha-paper); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(247, 241, 238, .4); text-underline-offset: 4px; }
#quote .ps-cta:hover { text-decoration-color: currentColor; }
#quote .ps-cta:focus-visible, #quote .ps-amp:focus-visible { outline: 2px solid var(--ha-bloom); outline-offset: 3px; }