/* Project Desk (FE1 to FE4): enquiry form, confirmation, For business landing, lane page, project page.
   Tokens are the DC Web Studio set (docs/rebuild/web_studio/system/tokens.json, draft): flat, square, light only, ink focus ring, 44px targets.
   No colour literal outside :root. Loaded only by Project Desk views, which exist only while projectDesk.enabled is on. */
:root {
  color-scheme: light;
  --pd-ink: #14171A;
  --pd-slate: #434D56;
  --pd-pale: #DFE3E6;
  --pd-mid: #A9B0B4;
  --pd-paper: #F0EBE0;
  --pd-white: #FFFFFF;
  --pd-indigo: #2B5C7E;
  --pd-madder: #642C1F;
  --pd-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pd-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --pd-gutter: clamp(16px, 4vw, 56px);
}
.pd, .pd * { box-sizing: border-box; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; }
.pd label, .pd legend, .pd span, .pd p, .pd a, .pd li, .pd button, .pd h1, .pd h2, .pd h3, .pd strong { text-transform: none; } /* the site stylesheet capitalises labels; sentence case is the rule here */
.pd .pd-kicker, .pd .pd-draft, .pd .pd-slot-id { text-transform: uppercase; }
.pd { background: var(--pd-white); color: var(--pd-ink); font-family: var(--pd-serif); font-size: 17px; line-height: 1.6; padding: 24px 0 72px; }
.pd-wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--pd-gutter); }
.pd-wrap--wide { max-width: 1200px; }
.pd a { color: var(--pd-ink); text-underline-offset: 3px; }
.pd .pd-craft-line a { text-decoration: underline; } /* J01a: the craft in the form line is plainly a link back to the craft page */
.pd-p a, .pd-lead a, .pd-small a { font-size: inherit; } /* a link in a line reads at that line's size, not the site's 13px link size */
@media (hover: hover) { .pd a:hover { color: var(--pd-indigo); } }
.pd :focus-visible, .pd .pd-input:focus, .pd .pd-btn:focus, .pd .pd-linkbtn:focus { outline: 3px solid var(--pd-ink) !important; outline-offset: 2px !important; } /* ink on white is 17:1; !important because the site stylesheet removes outlines on inputs */
/* the thanks heading takes focus from script: no box for a pointer visitor, a quiet 2px ring only after keyboard use */
.pd .pd-h1[tabindex="-1"]:focus, .pd .pd-h1[tabindex="-1"]:focus-visible { outline: none !important; }
html.pd-kbd .pd .pd-h1[tabindex="-1"]:focus-visible { outline: 2px solid var(--pd-ink) !important; outline-offset: 4px !important; }
.pd .pd-choice:has(input:focus-visible) { outline: 3px solid var(--pd-ink); outline-offset: 2px; }
.pd-h1, .pd-h2, .pd-h3 { font-family: var(--pd-sans); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
.pd-h1 { font-size: clamp(35.2px, 7vw, 67.2px); margin: 8px 0 16px; }
.pd-h2 { font-size: clamp(25.6px, 4.2vw, 41.6px); margin: 0 0 16px; }
.pd-h3 { font-size: 20px; margin: 0 0 8px; }
.pd-lead { font-size: 19.2px; max-width: 62ch; margin: 0 0 24px; }
.pd-p { max-width: 62ch; margin: 0 0 16px; font-size: 16px; line-height: 1.55; } /* the site sets 13px on bare paragraphs; the thanks page lines must read at 14px or more */
.pd-small { font-size: 14.4px; color: var(--pd-slate); max-width: 62ch; margin: 16px 0 0; }
.pd-kicker { font-family: var(--pd-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 8px; }
.pd-draft { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border: 1px dashed var(--pd-slate); background: var(--pd-pale); color: var(--pd-slate); font-family: var(--pd-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- progress ---------- */
.pd-js-shown { font-size: inherit; }
.pd-progress { border-top: 4px solid var(--pd-ink); padding-top: 12px; margin: 0 0 24px; }
.pd-progress-now { font-family: var(--pd-sans); font-weight: 700; font-size: 14.4px; margin: 0 0 8px; }
.pd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-step-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--pd-slate); color: var(--pd-slate); font-family: var(--pd-sans); font-size: 14px; min-height: 36px; }
.pd-step-chip[aria-current="step"] { background: var(--pd-ink); color: var(--pd-white); border-color: var(--pd-ink); font-weight: 700; }
.pd-step-chip[data-done="1"] { color: var(--pd-ink); border-color: var(--pd-ink); }
.pd-step-n { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 1px solid currentColor; font-weight: 700; font-size: 14px; }
.pd-step-t { font-size: 14px; }
@media (max-width: 520px) { .pd-step-t { display: none; } .pd-step-chip[aria-current="step"] .pd-step-t { display: inline; } }

/* ---------- form ---------- */
.pd-form { margin: 0; }
.pd-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pd-legend { font-family: var(--pd-sans); font-weight: 900; font-size: 24px; letter-spacing: -0.02em; padding: 0; margin: 0 0 16px; display: block; }
.pd-legend-n { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pd-slate); margin-bottom: 4px; }
.pd-js .pd-fs[hidden] { display: none; }
.pd-field { margin: 0 0 24px; }
.pd-label { display: block; font-family: var(--pd-sans); font-weight: 700; font-size: 15.2px; margin: 0 0 6px; }
.pd-req, .pd-opt { font-family: var(--pd-serif); font-weight: 400; font-size: 14px; color: var(--pd-slate); }
.pd-input { display: block; width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--pd-ink); background: var(--pd-white); border: 1px solid var(--pd-slate); border-radius: 0; }
@media (hover: hover) { .pd-input:hover { border-color: var(--pd-ink); } }
.pd-input[aria-invalid="true"] { border: 2px solid var(--pd-madder); }
.pd-textarea { min-height: 132px; resize: vertical; }
.pd-select { appearance: auto; }
.pd-file { padding: 10px; }
.pd-hint { margin: 6px 0 0; font-size: 14.08px; color: var(--pd-slate); max-width: 62ch; }
.pd-err { white-space: pre-line; margin: 6px 0 0; font-size: 15.2px; font-weight: 700; color: var(--pd-madder); min-height: 0; }
.pd-err:empty { display: none; }
.pd-choice { font-family: var(--pd-serif); font-size: 16px; line-height: 1.45; text-transform: none; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--pd-slate); cursor: pointer; min-height: 48px; }
@media (hover: hover) { .pd-choice:hover { border-color: var(--pd-ink); background: var(--pd-paper); } }
.pd-choice input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--pd-ink); }
.pd-choice:has(input:checked) { border: 2px solid var(--pd-ink); padding: 9px 11px; }
.pd-choice-lane { color: var(--pd-slate); font-size: 14px; }
.pd-choice--consent { border-color: var(--pd-slate); }
.pd-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pd-filelist { list-style: none; margin: 8px 0 0; padding: 0; }
.pd-filelist li { font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 4px 16px; padding: 6px 0; border-bottom: 1px solid var(--pd-pale); }
.pd-fname { font-weight: 700; overflow-wrap: anywhere; }
.pd-fsize { color: var(--pd-slate); font-size: 14px; }
.pd-fok { font-family: var(--pd-sans); font-size: 14px; font-weight: 700; color: var(--pd-ink); border: 1px solid var(--pd-ink); padding: 0 8px; }
.pd-fok::before { content: "\2713\00a0"; }
.pd-sub { font-family: var(--pd-sans); font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.pd-count { text-align: right; max-width: none; }
.pd-count span { font-size: inherit; }
.pd-count--over { color: var(--pd-madder); font-weight: 700; }
.pd-count--near { color: var(--pd-madder); font-weight: 700; }
.pd-choice-t { font-size: 16px; }
.pd-sep { font-size: 14px; margin: 0 10px; color: var(--pd-slate); }
.pd-fs--group { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.pd-fs--group > .pd-label { padding: 0; margin: 0 0 6px; float: none; width: auto; border: 0; }
.pd-linkbtn { background: none; border: 0; padding: 8px 0; width: auto; text-align: left; min-height: 44px; font: inherit; text-decoration: underline; color: var(--pd-ink); cursor: pointer; }
.pd-errsum { border: 2px solid var(--pd-madder); padding: 12px 16px; margin: 0 0 24px; background: var(--pd-white); }
.pd-errsum[hidden] { display: none; }
.pd-errsum-t { font-family: var(--pd-sans); font-weight: 700; margin: 0 0 4px; color: var(--pd-madder); }
.pd-errsum ul { margin: 0; padding-left: 20px; }
.pd-errsum a { color: var(--pd-madder); }
.pd-files-status { margin: 8px 0 0; font-size: 14.4px; color: var(--pd-slate); max-width: 62ch; }
.pd-files-status:empty { display: none; }
.pd-status { min-height: 1.4em; margin: 0 0 8px; font-size: 14.4px; color: var(--pd-slate); }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; }
.pd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; font-family: var(--pd-sans); font-weight: 700; font-size: 16px; background: var(--pd-ink); color: var(--pd-white); border: 2px solid var(--pd-ink); border-radius: 0; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .pd-btn:hover { background: var(--pd-indigo); border-color: var(--pd-indigo); color: var(--pd-white); } }
.pd-btn[disabled] { background: var(--pd-slate); border-color: var(--pd-slate); cursor: progress; }
.pd-btn--ghost { background: var(--pd-white); color: var(--pd-ink); }
@media (hover: hover) { .pd-btn--ghost:hover { background: var(--pd-paper); color: var(--pd-ink); border-color: var(--pd-ink); } }
.pd .pd-btn--link, .pd a.pd-btn { color: var(--pd-white); }
@media (hover: hover) { .pd .pd-btn--link:hover { color: var(--pd-white); } }
.pd-btn[hidden] { display: none; }
.pd-ref { white-space: nowrap; font-family: var(--pd-sans); letter-spacing: 0.06em; border-bottom: 4px solid var(--pd-ink); }

/* ---------- landing, lane, project pages ---------- */
.pd-hero { padding: 24px 0 32px; border-bottom: 4px solid var(--pd-ink); margin: 0 0 40px; }
.pd-section { margin: 0 0 56px; }
.pd-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-card { border: 1px solid var(--pd-ink); padding: 20px; display: flex; flex-direction: column; gap: 8px; background: var(--pd-white); }
.pd-card a.pd-card-link { font-family: var(--pd-sans); font-weight: 700; }
.pd-stages { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 16px; }
@media (min-width: 768px) { .pd-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-stages li { counter-increment: s; border-top: 4px solid var(--pd-ink); padding-top: 8px; }
.pd-stages li::before { content: counter(s); font-family: var(--pd-sans); font-weight: 900; font-size: 24px; display: block; }
.pd-tags { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 24px; font-size: 15.2px; }
.pd-tags dt { font-family: var(--pd-sans); font-weight: 700; }
.pd-tags dd { margin: 0; }
.pd-chip { display: inline-block; border: 1px solid var(--pd-ink); padding: 2px 10px; margin: 0 6px 6px 0; font-family: var(--pd-sans); font-size: 14px; }
.pd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-top: 4px solid var(--pd-ink); padding-top: 24px; }
.pd-crumbs { font-family: var(--pd-sans); font-size: 14px; margin: 0 0 16px; }
.pd-crumbs a { color: var(--pd-slate); }
@media (prefers-reduced-motion: reduce) { .pd * { transition: none !important; animation: none !important; } }
.pd-img { width: 100%; height: auto; display: block; }
.pd a.pd-btn--ghost { color: var(--pd-ink); }
.pd-grid > *, .pd-stages > * { min-width: 0; }
.pd-input, .pd-choice, .pd-legend, .pd-errsum { scroll-margin-top: 96px; }

/* ---------- landing v2: image slots, on-page row, media cards, steps (2026-11-08) ---------- */
/* ratios: the frame keeps the exact aspect ratio at every width */
.pd-r191 { aspect-ratio: 1.91 / 1; }
.pd-r43 { aspect-ratio: 4 / 3; }
.pd-r32 { aspect-ratio: 3 / 2; }
.pd-frame { width: 100%; overflow: hidden; background: var(--pd-pale); }
.pd-frame .pd-img { width: 100%; height: 100%; object-fit: cover; }
.pd-fig { margin: 0; }
.pd-cap { font-size: 14px; line-height: 1.45; color: var(--pd-slate); padding: 8px 0 0; max-width: 62ch; }
.pd-card--media .pd-cap { padding: 8px 20px 0; }
.pd-src { display: block; font-family: var(--pd-sans); font-size: 14px; }
/* the empty frame a reviewer sees: flat, dashed, quiet, the intent line in plain type */
.pd-slot { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 16px; border: 1px dashed var(--pd-slate); background: var(--pd-pale); color: var(--pd-slate); font-family: var(--pd-sans); overflow: hidden; }
.pd-slot p { margin: 0; max-width: 56ch; }
.pd-slot-id { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--pd-ink); }
.pd-slot-intent { font-size: 14.4px; line-height: 1.45; }
.pd-slot-note { font-size: 14px; font-weight: 700; color: var(--pd-madder); }
.pd-card--media .pd-slot { border-width: 0 0 1px; }
.pd-card--media .pd-frame { border-bottom: 1px solid var(--pd-ink); }
@media (max-width: 767px) { .pd-slot { padding: 12px; } .pd-slot-intent { font-size: 14px; } }
/* hero: text first, then the wide slot, capped so it never owns the fold (1.91 x 420px = 802px wide) */
.pd-hero .pd-fig, .pd-hero .pd-slot { max-width: 802px; margin-top: 24px; }
.pd-hero .pd-actions { margin: 0; }
.pd-hero--text { padding-bottom: 40px; }
/* cards with a picture on top: the picture runs to the card's edges, the words keep their padding */
.pd-card--media { padding: 0; gap: 0; }
.pd-card--media > .pd-fig, .pd-card--media > .pd-slot { margin: 0; }
.pd-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.pd-card-body .pd-p { margin: 0; }
.pd-card .pd-p { margin: 0; }
.pd-review-note { margin: 0; }
/* on-page row: anchors, 44px targets, wraps on a phone, never scrolls sideways */
.pd-onpage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 40px; padding: 4px 0 12px; border-bottom: 1px solid var(--pd-ink); font-family: var(--pd-sans); font-size: 14.4px; }
.pd-onpage-t { font-weight: 700; color: var(--pd-slate); }
.pd-onpage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.pd-onpage a { display: inline-flex; align-items: center; min-height: 44px; }
.pd-section { scroll-margin-top: 96px; }
.pd .pd-h2[id], .pd .pd-h1[id] { scroll-margin-top: 112px; } /* the anchor is on the heading: clear the fixed site header (54px desktop, 90px phone) */
/* chips as a list; a chip that links is a 44px target */
.pd-chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chips .pd-chip { margin: 0; }
.pd-chip--link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-weight: 700; background: var(--pd-white); }
@media (hover: hover) { .pd a.pd-chip--link:hover { background: var(--pd-paper); color: var(--pd-ink); } }
.pd-card a.pd-card-link { display: inline-flex; align-items: center; min-height: 44px; }
/* how it runs: four numbered steps, a 3:2 picture each when there is one */
.pd-stages--media { gap: 24px; }
.pd-stages--media li { display: flex; flex-direction: column; gap: 8px; }
.pd-stages--media li .pd-p { margin: 0; }
.pd-stages--media li > .pd-fig, .pd-stages--media li > .pd-slot { margin: 4px 0 4px; }
@media (min-width: 768px) and (max-width: 1023px) { .pd-stages--media { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-stages .pd-p { margin: 0 0 8px; }
/* what you receive, other-lane links */
.pd .pd-list { list-style: disc; margin: 0 0 16px; padding-left: 20px; max-width: 62ch; font-size: 16px; line-height: 1.55; }
.pd-list li { margin: 0 0 8px; }
.pd-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; font-family: var(--pd-sans); font-weight: 700; }
.pd-linklist a { display: inline-flex; align-items: center; min-height: 44px; }
/* closing call to action */
section.pd-cta { display: block; }
section.pd-cta .pd-h2--cta { margin-bottom: 8px; }
section.pd-cta .pd-p { margin: 0 0 16px; }
.pd-h2--cta { font-size: clamp(25.6px, 3.4vw, 33.6px); }
@media (max-width: 767px) { .pd .pd-actions .pd-btn, .pd section.pd-cta .pd-btn { width: 100%; } .pd-hero { padding-top: 8px; } }
/* carry */