/* Design & Build (/design-and-build/): Lee's sketch in the hero, a trail of real work, the full service list,
   Launch Your App, then the quote. Loaded after inner.css and service-tones.css. */

/* Hero: Lee's sketch draws itself in, then resolves into the view it leads to (design/sketch-to-view.js).
   Without script the finished view shows; the card keeps one size throughout */
.ip-hero .ip-hero-media.sv { aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; margin: 0; }
.sv-stage { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: #F4EFEA; box-shadow: 0 2px 4px rgba(var(--ha-ink-rgb), .18), 0 36px 64px -30px rgba(var(--ha-ink-rgb), .7); }
.sv-sketch, .sv-view { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s ease; }
.sv-sketch { display: block; opacity: 0; }
.sv-stage .sv-pen { position: absolute; left: 0; top: 0; width: 40cqw; aspect-ratio: 720 / 91; transform-origin: 0 0; opacity: 0; pointer-events: none; filter: drop-shadow(1.2cqw 1.6cqw 1.2cqw rgba(41, 43, 47, .28)); }
[data-state="drawing"] .sv-pen, [data-state="resolving"] .sv-pen { opacity: 1; }
/* The pen follows every frame itself: no inherited hero-image easing on it */
.ip-hero .ip-hero-media .sv-stage .sv-pen { transition: none; }
.sv-pen svg { display: block; width: 100%; height: 100%; overflow: visible; }
:is([data-state="ready"], [data-state="drawing"], [data-state="resolving"]) .sv-sketch { opacity: 1; transition: none; }
:is([data-state="ready"], [data-state="drawing"]) .sv-view { opacity: 0; }
/* While the script animates, no CSS transition may outrank it */
:is([data-state="ready"], [data-state="drawing"], [data-state="resolving"]) .sv-view { transition: none; }
@media (prefers-reduced-motion: reduce) { .sv-sketch, .sv-view { transition: none; } }

/* The enquiry view: an illustrative window, sized to the card so it reads the same at every width */
.sv-view { padding: 4.5cqw; font-family: var(--ha-font-sans); color: var(--ha-ink); }
.sv-view p { margin: 0; max-width: none; }
.sv-view .sv-win { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; border: 1px solid var(--ha-hairline); border-radius: 1.8cqw; box-shadow: 0 1.4cqw 3.4cqw -1.4cqw rgba(41, 43, 47, .28); overflow: hidden; }
.sv-view .sv-bar { display: flex; align-items: center; gap: 1cqw; padding: 2cqw 2.8cqw; border-bottom: 1px solid #EEE7E2; }
.sv-view .sv-bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--ha-hairline); }
.sv-view .sv-bar b { margin-left: 1.4cqw; font: 800 2.9cqw/1 var(--ha-font-sans); letter-spacing: -.02em; }
.sv-view .sv-bar span { margin-left: auto; display: inline-flex; align-items: center; gap: .9cqw; font: 600 2.1cqw/1 var(--ha-font-sans); color: var(--ha-support-on-paper); }
.sv-view .sv-bar span::before { content: ""; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--ha-phase-mine); }
.sv-view .sv-body { display: grid; grid-template-columns: 29% minmax(0, 1fr); min-height: 0; }
.sv-view .sv-src { padding: 2.6cqw 2.4cqw; background: var(--ha-card); border-right: 1px solid #EEE7E2; display: grid; align-content: start; gap: .4cqw; }
.sv-view .sv-h { font: 700 2.1cqw/1.2 var(--ha-font-sans); color: var(--ha-support-on-paper); margin-bottom: .8cqw !important; }
.sv-view .sv-s { display: flex; align-items: center; justify-content: space-between; padding: 1.1cqw 0; border-top: 1px solid #EEE7E2; font: 700 2.3cqw/1.1 var(--ha-font-sans); }
.sv-view .sv-s em { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--ha-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.6 3.6L18 8' fill='none' stroke='%23F7F1EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.sv-view .sv-main { padding: 2.6cqw 2.8cqw; display: grid; align-content: start; gap: 1.8cqw; min-width: 0; }
.sv-view .sv-wait { display: flex; align-items: baseline; gap: 1.2cqw; font: 700 2.4cqw/1 var(--ha-font-sans); }
.sv-view .sv-wait b { font: 800 6cqw/.8 var(--ha-font-sans); letter-spacing: -.04em; }
.sv-view .sv-wait span { margin-left: auto; font-weight: 600; font-size: 2.1cqw; color: var(--ha-support-on-paper); }
.sv-view .sv-list { display: grid; gap: 1.4cqw; }
.sv-view .sv-e { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1cqw 1.6cqw; align-items: center; padding: 1.8cqw 2cqw; border: 1px solid #EEE7E2; border-radius: 1.3cqw; background: #fff; }
.sv-view .sv-t { font: 800 2.6cqw/1.15 var(--ha-font-sans); letter-spacing: -.01em; }
.sv-view .sv-t span { display: block; margin-top: .5cqw; font: 600 2cqw/1.2 var(--ha-font-sans); color: var(--ha-support-on-paper); }
.sv-view .sv-who { display: flex; align-items: center; gap: .9cqw; font: 700 2.2cqw/1 var(--ha-font-sans); }
.sv-view .sv-who i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; display: grid; place-items: center; font: 800 1.8cqw/1 var(--ha-font-sans); font-style: normal; color: var(--ha-paper); background: var(--ha-phase-solve); }
.sv-view .sv-next { grid-column: 1 / -1; display: flex; align-items: center; gap: 1cqw; padding-top: 1.2cqw; border-top: 1px solid #EEE7E2; font: 700 2.2cqw/1.2 var(--ha-font-sans); }
.sv-view .sv-next::before { content: "→"; font-weight: 800; }
.sv-view .sv-next mark { padding: .5cqw 1cqw; border-radius: 99px; background: var(--ha-bloom); color: var(--ha-ink); font: 800 1.8cqw/1 var(--ha-font-sans); }


/* One engagement, from the table to the finished work */
.db-trail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.db-trail figure { margin: 0; min-width: 0; }
.db-trail .ip-media { aspect-ratio: 4 / 3; }
.db-trail .db-devices { background: var(--ha-ink); }
.db-trail .db-devices img { object-fit: contain; padding: 6%; }
.db-trail figcaption { margin-top: 14px; font: 500 16px/1.4 var(--ha-font-sans); color: var(--ha-support-on-paper); }
.db-trail figcaption b { color: var(--ha-ink); font-weight: 800; }
@media (max-width: 760px) { .db-trail { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ListenedTo on an iPhone 18 Pro, standing on the table clear of every face. --u is one point of a 268 by 559 phone. */
.db-trail .db-listen { position: relative; container-type: inline-size; }
.db-listen .lt-phone { --u: calc(28.8cqw / 268); position: absolute; left: 13%; bottom: 4%; z-index: 1; box-sizing: border-box; width: calc(268 * var(--u)); height: calc(559 * var(--u)); padding: calc(2.5 * var(--u)); border-radius: calc(44 * var(--u)); background: linear-gradient(115deg, #A2B7C2, #E5EEF0 13%, #ACBEC8 34%, #F2F7F8 58%, #A3B5BE 83%, #D6E4E9); box-shadow: 0 calc(16 * var(--u)) calc(26 * var(--u)) rgba(0,0,0,.42), 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.3), inset 0 0 0 calc(1 * var(--u)) #637984; font-family: var(--ha-font-sans); line-height: 1.3; text-align: left; color: var(--ha-ink); }
.db-listen .lt-side { position: absolute; width: calc(2.5 * var(--u)); border-radius: calc(2 * var(--u)); background: linear-gradient(90deg, #75909F, #D4E0E5, #8DA3B0); }
.db-listen .lt-action { left: calc(-2 * var(--u)); top: calc(92 * var(--u)); height: calc(20 * var(--u)); }
.db-listen .lt-volume-up { left: calc(-2 * var(--u)); top: calc(128 * var(--u)); height: calc(36 * var(--u)); }
.db-listen .lt-volume-down { left: calc(-2 * var(--u)); top: calc(172 * var(--u)); height: calc(36 * var(--u)); }
.db-listen .lt-power { right: calc(-2 * var(--u)); top: calc(140 * var(--u)); height: calc(56 * var(--u)); }
.db-listen .lt-camera { right: calc(-1 * var(--u)); top: calc(318 * var(--u)); width: calc(2 * var(--u)); height: calc(38 * var(--u)); background: linear-gradient(90deg, #0C0E10, #637984); box-shadow: 0 0 0 calc(.6 * var(--u)) #75909F; }
.db-listen .lt-screen { position: relative; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; padding: calc(38 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u)); border: calc(4 * var(--u)) solid #0C0E10; border-radius: calc(41.5 * var(--u)); overflow: hidden; background: radial-gradient(ellipse at 12% 2%, color-mix(in srgb, var(--ha-phase-mine), transparent 76%), transparent 58%), radial-gradient(ellipse at 94% 10%, color-mix(in srgb, var(--ha-violet), transparent 88%), transparent 55%), linear-gradient(transparent, var(--ha-paper) 70%), var(--ha-paper); }
.db-listen .lt-island { position: absolute; top: calc(8 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(54 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(9 * var(--u)); background: #050607; }
.db-listen .lt-island::after { content: ""; position: absolute; top: calc(5 * var(--u)); right: calc(5 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #334659, #0A1119 65%); }
.db-listen .lt-status-bar { position: absolute; top: calc(11 * var(--u)); left: calc(22 * var(--u)); right: calc(18 * var(--u)); display: flex; align-items: center; justify-content: space-between; font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1; }
.db-listen .lt-status-bar svg { width: calc(34 * var(--u)); height: calc(12 * var(--u)); }
.db-listen .lt-home-indicator { position: absolute; bottom: calc(6 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(76 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--ha-ink); opacity: .85; }
.db-listen .lt-app-name { display: flex; align-items: center; margin: calc(4 * var(--u)) calc(2 * var(--u)) calc(10 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.db-listen .lt-app-name > svg { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(6 * var(--u)); }
.db-listen .lt-app-name sup { align-self: start; font-size: .5em; }
.db-listen .lt-header-tools { display: grid; place-items: center; margin-left: auto; width: calc(25 * var(--u)); height: calc(25 * var(--u)); border: calc(1 * var(--u)) solid rgba(255,255,255,.6); border-radius: calc(8 * var(--u)); background: rgba(255,255,255,.3); }
.db-listen .lt-header-tools svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.db-listen .lt-card { position: relative; padding: calc(14 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u)); border: calc(1 * var(--u)) solid var(--ha-line); border-radius: calc(5 * var(--u)); background: var(--ha-paper); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(41,43,47,.05); }
.db-listen .lt-card-fold { position: absolute; top: 0; right: 0; width: calc(17 * var(--u)); height: calc(17 * var(--u)); background: linear-gradient(45deg, var(--ha-phase-mine) 50%, var(--ha-note-blue) 50%); }
.db-listen .lt-card-title { margin: 0 calc(12 * var(--u)) calc(10 * var(--u)) 0; font: 700 calc(23 * var(--u))/1 var(--ha-font-note); }
.db-listen .lt-card-line { padding: calc(7 * var(--u)) 0 calc(6 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(41,43,47,.12); }
.db-listen .lt-card-line b { display: block; font-size: calc(10 * var(--u)); font-weight: 500; color: var(--ha-support-on-paper); }
.db-listen .lt-card-line p { margin: calc(3 * var(--u)) 0 0; font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.35; }
.db-listen .lt-wow p { color: var(--ha-bloom-deep); }
.db-listen .lt-card-result { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; color: var(--ha-phase-mine); }
.db-listen .lt-listening { position: relative; display: grid; justify-items: center; margin-top: auto; padding-top: calc(28 * var(--u)); }
.db-listen .lt-wave { position: absolute; top: 0; width: calc(188 * var(--u)); height: calc(24 * var(--u)); color: var(--ha-bloom); fill: currentColor; }
.db-listen .lt-ribbon path { animation: lt-ribbon 1.8s ease-in-out infinite alternate; transform-origin: center; }
.db-listen .lt-ribbon path:nth-child(2) { animation-delay: -.6s; }
.db-listen .lt-ribbon path:nth-child(3) { animation-delay: -1.2s; }
.db-listen .lt-heart-normal { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.db-listen .lt-heart-trail { opacity: .24; }
.db-listen .lt-heart-sweep { stroke-dasharray: 44 188; animation: lt-heart-sweep 1.6s linear infinite; }
.db-listen .lt-orb { position: relative; display: grid; place-items: center; width: calc(76 * var(--u)); height: calc(72 * var(--u)); filter: drop-shadow(0 calc(6 * var(--u)) calc(12 * var(--u)) color-mix(in srgb, var(--ha-bloom), transparent 66%)); }
.db-listen .lt-candy { position: absolute; inset: 0; width: 100%; height: 100%; }
.db-listen .lt-candy-base { fill: var(--ha-paper); }
.db-listen .lt-capture-glyph { position: relative; width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.db-listen .lt-input-modes { display: flex; justify-content: space-between; margin-top: calc(8 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ha-support-on-paper); }
@keyframes lt-ribbon { to { transform: scaleY(.4); } }
@keyframes lt-heart-sweep { from { stroke-dashoffset: 44; } to { stroke-dashoffset: -188; } }
@media (prefers-reduced-motion: reduce) {
  .db-listen .lt-ribbon path, .db-listen .lt-heart-sweep { animation: none; }
  .db-listen .lt-heart-sweep { stroke-dasharray: none; }
}

/* What we do: every line of the service list, in its three ways of working */
.db-ways { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.db-do { grid-row: span 2; }
.db-way { padding: clamp(20px, 2vw, 28px); border-radius: 14px; background: #34363B; border: 1px solid rgba(247, 241, 238, .08); }
.db-way h3 { font: 800 clamp(20px, 1.7vw, 24px)/1.15 var(--ha-font-sans); letter-spacing: -.02em; color: var(--ha-paper); }
.db-way ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px 24px; align-content: start; }
.db-do ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-way li { padding: 9px 0; border-top: 1px solid rgba(247, 241, 238, .1); font: 600 16px/1.35 var(--ha-font-sans); color: var(--ha-paper); }
.db-way li small { display: block; margin-top: 4px; font: 500 14.5px/1.4 var(--ha-font-sans); color: var(--ha-vapour); }
.db-way li a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ha-bloom); }
.db-way li a:focus-visible { outline: 2px solid var(--ha-bloom); outline-offset: 3px; }
@media (max-width: 1100px) { .db-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-do { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 600px) { .db-ways, .db-do ul { grid-template-columns: minmax(0, 1fr); } }

/* Launch Your App: the last of the ways we work, across the full width, with its own action */
.db-ways .db-launch { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(14em, 1fr) auto; gap: 16px 40px; align-items: center; }
.db-launch p { margin: 8px 0 0; max-width: none; font: 500 16px/1.45 var(--ha-font-sans); color: var(--ha-vapour); }
.db-launch-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; max-width: 30em; }
.db-launch-act p { margin: 0; font-size: 14.5px; }
@media (max-width: 860px) { .db-ways .db-launch { grid-template-columns: minmax(0, 1fr); } }

/* The stages: the same cards on paper, in order */
.db-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: stage; }
.ip-sec:not(.dark) .db-way { background: var(--ha-card); border-color: var(--ha-hairline); }
.ip-sec:not(.dark) .db-way h3 { color: var(--ha-ink); }
.ip-sec:not(.dark) .db-way li { border-top-color: var(--ha-hairline); color: var(--ha-ink); }
.db-stages h3::before { counter-increment: stage; content: counter(stage) ". "; color: var(--ha-support-on-paper); }
@media (max-width: 860px) { .db-stages { grid-template-columns: minmax(0, 1fr); } }

/* Proof leads on to the whole story */
.db-more { margin: 28px 0 0; font: 600 17px/1.4 var(--ha-font-sans); }

/* The quote: six kinds of work, three across where there is room */
@media (min-width: 1100px) { .ps-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ps-get { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; align-content: start; }
.ps-get li { position: relative; padding-left: 18px; font: 600 14.5px/1.4 var(--ha-font-sans); color: var(--ha-paper); }
.ps-get li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ha-bloom); }
.ps-manage { font: 500 14px/1.45 var(--ha-font-sans); color: var(--ha-vapour); }
.ps-reset { justify-self: start; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(41, 43, 47, .3); border-radius: 999px; background: transparent; color: var(--ha-ink); font: 600 14px/1 var(--ha-font-sans); cursor: pointer; }
.ps-reset:not(:disabled):hover { background: var(--ha-ink); color: var(--ha-paper); }
.ps-reset:focus-visible { outline: 3px solid var(--ha-bloom); outline-offset: 2px; }
.ps-reset:disabled { opacity: .35; cursor: default; }
/* Narrow phones: the app's button wraps, and the kinds of work stack one to a row, each picture whole above its words */
@media (max-width: 420px) { .db-launch > * { min-width: 0; } .db-launch-act .ip-btn { white-space: normal; text-align: center; } }
@media (max-width: 360px) {
  .ps-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}