/* ===========================================================================
   Prescott Digital Media — pdm.css
   ---------------------------------------------------------------------------
   The site's only stylesheet. Written from scratch for prescottdigitalmedia.com
   and shares no rules, variables or @import with any other site in this account.

   The palette below was sampled directly from the approved spec art rather than
   chosen: warm cream ground, deep navy bands, rust accent, topographic line work.
   =========================================================================== */

/* ---------- Self-hosted brand faces ----------
   The three real faces off the client's flyer PSD, served from /fonts. No
   Google Fonts link and no @import: Inter and Spectral were placeholders
   standing in for these while the licences were confirmed, and every request
   to fonts.googleapis.com is gone with them.

   Licences, all safe to self-host: Aileron is CC0, Asap and IM Fell Double
   Pica are SIL OFL.

   Each face ships as woff2 (built from the supplied original with fontTools)
   with the original otf/ttf as the second source, so the originals stay in the
   repo as the authoritative artefact and browsers still get the small file.

   font-display: swap everywhere — the flyer's type IS the design, but a blank
   headline is worse than a reflow, and the fallback stacks below are metric
   neighbours rather than defaults.

   Aileron shipped as Regular / SemiBold / Bold only, so the site's existing
   400/500/600/700 declarations map onto three files: 500 rides Regular, 600
   rides SemiBold, 700 rides Bold. Declaring 400 and 500 against the same file
   keeps the browser from synthesising a fake intermediate weight. */
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-Regular.woff2") format("woff2"),
       url("../fonts/Aileron-Regular.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-SemiBold.woff2") format("woff2"),
       url("../fonts/Aileron-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/Aileron-Bold.woff2") format("woff2"),
       url("../fonts/Aileron-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Asap is a two-axis variable font (wght 100–900, wdth 75–125). Only the
   wordmark uses it, and only at one instance, but the axis ranges are declared
   honestly so the browser instances rather than synthesises. */
@font-face {
  font-family: "Asap";
  src: url("../fonts/Asap-Variable.woff2") format("woff2-variations"),
       url("../fonts/Asap-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IM Fell Double Pica";
  src: url("../fonts/IMFellDoublePica-Regular.woff2") format("woff2"),
       url("../fonts/IMFellDoublePica-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell Double Pica";
  src: url("../fonts/IMFellDoublePica-Italic.woff2") format("woff2"),
       url("../fonts/IMFellDoublePica-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Sampled from the spec art. */
  --pdm-cream:      #F3EADD;
  --pdm-cream-2:    #EDE2D2;
  --pdm-cream-3:    #E6D9C6;
  --pdm-navy:       #242B36;
  --pdm-navy-2:     #1E242E;
  --pdm-navy-soft:  #2E3745;
  --pdm-rust:       #A05439;
  --pdm-rust-dk:    #8A4529;
  --pdm-rust-lt:    #C0794F;

  --pdm-ink:        #242B36;
  --pdm-body:       #4A4639;
  --pdm-muted:      #7A7263;
  --pdm-line:       #D9CCB8;
  --pdm-line-soft:  #E4D9C7;
  --pdm-on-dark:    #EFE7DB;
  --pdm-on-dark-mu: #A3A9B4;
  --pdm-line-dark:  rgba(239, 231, 219, .16);

  /* The real faces. --pdm-serif keeps its name because every page still asks
     for "the heading face"; what it resolves to is now the flyer's own.
     --pdm-wordmark is separate because Asap is used for exactly one string. */
  --pdm-serif:    "IM Fell Double Pica", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --pdm-sans:     "Aileron", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pdm-wordmark: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fills read off the flyer PSD's own layers, kept apart from the sampled
     screen palette above so the two are never confused for one another. The
     homepage's flyer-matched type uses these; nothing else does yet.

     --pdm-psd-indigo is deliberately not --pdm-psd-ink: the service-card titles
     carry their own slightly violet navy on the flyer, and collapsing the two
     would quietly lose a distinction the client made on purpose. */
  --pdm-psd-ink:    #282E3A;
  --pdm-psd-rust:   #A75D3B;
  --pdm-psd-paper:  #F6F4F0;
  --pdm-psd-indigo: #322F4B;

  /* The sheet. The whole site is a printed flyer resting on a table, so the page
     has one width, not a per-section one: --pdm-sheet is that width and every
     band inherits it from the frame (see "The sheet" below).

     --pdm-slate is the table. It is deliberately several steps lighter and
     bluer than --pdm-navy / --pdm-navy-2 / --pdm-ground-approach: the approach
     band has to read as its own dark band sitting ON the backdrop, and a slate
     close to those navies would swallow its edges. The client reference shows a
     near-black surround, but that is the screenshot tool's letterboxing rather
     than a chosen colour, so it is not reproduced here.

     --pdm-sheet-gap is the smallest slate margin worth showing. Between the
     collapse breakpoint and the width that fits a full sheet plus two gaps, the
     sheet gives width back instead of rendering a few-pixel sliver of slate. */
  --pdm-sheet:     960px;
  --pdm-sheet-gap: 40px;
  --pdm-slate:     #454F5E;

  /* The inner content ceiling is the sheet itself — .pdm-wrap adds the gutter
     inside it. Kept as its own token because it is a different idea from the
     frame width, even while the two are equal. */
  --pdm-max:      var(--pdm-sheet);
  --pdm-gutter:   28px;
  --pdm-nav-h:    82px;

  /* Where each band's copy column ends, as a percentage of the sheet.

     These are the flyer's own numbers. On the 1275px page the hero headline
     ends at x=537 (42.1%), the approach band's rule and step grid end at ~935
     (73.3%), and the service cards end at ~1128 (88.5%). Each of those sits
     just short of where that band's contour art begins, which is how the flyer
     keeps copy off the line work — the clearance is composed, not accidental.

     Applied as a right inset on the band's .pdm-wrap, so one number per band
     governs the column and the art can be reasoned about against it. Reset at
     the collapse breakpoint, where the art is rescaled and the sheet is the
     viewport. */
  --pdm-copy-end-hero:     42%;
  --pdm-copy-end-approach: 71%;
  --pdm-copy-end-what:     88%;

  /* Contour tile. One shared size/rhythm so every section's pattern reads at the
     same scale — the flyer's line weight is constant across its cream and navy
     bands, only the ink colour changes. Sized for the sheet's ~904px of content
     rather than a full-viewport band. */
  --pdm-topo-tile: 360px;

  /* Ground colours sampled from the client's real flyer exports, one per band.
     They sit a couple of levels off --pdm-cream/--pdm-navy because they come off
     a print sheet, not the screen palette. Each band paints its own so the flat
     field left of the contour art is the same colour as the export itself and
     the join is invisible at any width. */
  --pdm-ground-hero:     #F1E9DB;
  --pdm-ground-approach: #2A303B;
  --pdm-ground-what:     #EDE7DD;

  --pdm-radius:   3px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--pdm-slate);
}

/* ---------- The sheet ----------
   The site is one printed flyer resting on a table: <html> is the table, <body>
   is the sheet. Every page file is already exactly header + main + footer inside
   <body>, so making <body> the frame gives all three the same left/right edge by
   construction. The alternative — a wrapper <div> added to all nine page files —
   buys nothing and gives nine places for the edges to drift apart.

   Because <html> paints its own background, <body>'s cream no longer propagates
   to the canvas, which is what exposes the slate beside the sheet.

   The width is min() of two things: the sheet width, and whatever is left after
   reserving a real margin on each side. Above ~1040px that is a flat 960px; from
   the collapse breakpoint up to there the sheet narrows so the slate margins stay
   even and deliberate rather than a stray few-pixel sliver. The second term is a
   percentage, not a vw unit, so the scrollbar is excluded and the page never
   overflows horizontally.

   No min-height here on purpose: the sheet is exactly as tall as header + main +
   footer. A page shorter than the viewport (Insights, one coming-soon section)
   should show slate below the footer, not more of the sheet's own cream — a
   forced 100vh sheet stretches the cream past the last real band. */
body {
  margin: 0 auto;
  max-width: min(var(--pdm-sheet), 100% - var(--pdm-sheet-gap) * 2);
  font-family: var(--pdm-sans);
  font-size: 15px;
  line-height: 1.62;
  color: var(--pdm-body);
  background: var(--pdm-cream);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 22px 60px rgba(0, 0, 0, .30);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; }
a { color: var(--pdm-rust); }

h1, h2, h3, h4 {
  font-family: var(--pdm-serif);
  color: var(--pdm-ink);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
/* The interior-page display ramp, sized against the sheet rather than the
   viewport. It used to be `clamp(min, Nvw, max)`, which measured a viewport the
   type no longer lives inside once every band was pinned to a 960px sheet, and
   so sat at its clamp ceiling on every desktop.

   These steps were solved against Spectral, the placeholder face, by matching
   the width of the flyer's headline rather than its cap-height — width being
   what governs the collision with the contour art, and the two not being
   matchable at once in a face that was not the client's.

   That caveat is now spent on the homepage: its three headlines are set from
   the flyer's own measurements in "Flyer type scale" near the bottom of this
   file, in the client's own IM Fell with the flyer's character stretch. The
   ramp here still governs the interior pages, which the flyer does not specify.
   Re-solving it for IM Fell is worth doing when those pages get their own pass;
   until then it renders IM Fell at Spectral-derived sizes, which is a size
   choice that is merely un-verified rather than wrong. */
h1 { font-size: 2.5rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--pdm-rust); outline-offset: 3px; }

/* ---------- Layout helpers ---------- */
.pdm-wrap {
  width: 100%;
  max-width: var(--pdm-max);
  margin: 0 auto;
  padding: 0 var(--pdm-gutter);
}

.pdm-section { position: relative; padding: 78px 0; }
.pdm-section--tight { padding: 56px 0; }
.pdm-section--cream2 { background: var(--pdm-cream-2); }

.pdm-eyebrow {
  display: inline-block;
  font-family: var(--pdm-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pdm-ink);
  margin: 0 0 18px;
}
.pdm-eyebrow--rust { color: var(--pdm-rust); }

/* Short rust rule used above lede paragraphs in the reference art. */
.pdm-rule {
  width: 46px;
  height: 2px;
  background: var(--pdm-rust);
  border: 0;
  margin: 0 0 22px;
}

.pdm-accent { color: var(--pdm-rust); }
.pdm-lede { font-size: .97rem; max-width: 46ch; }

/* ---------- Topographic motif ---------- */
/*
 * Per-section background model, matching how the flyer was actually built: the
 * client composed each band's contour art as its own Photoshop asset and aligned
 * them by hand so the lines read as one continuous sheet across a cream/navy
 * boundary. We do the same thing rather than stretching one shared layer behind
 * the whole page — section heights move at every breakpoint, and a single
 * cross-section layer has to be re-aligned each time they do.
 *
 * Each section owns one <div class="pdm-topo"> and controls it through five
 * custom properties. The hero and .pdm-banner name a tone variant
 * (.pdm-topo--cream/--navy) for the seamless placeholder tile; a content band
 * inherits its bespoke export from its own .pdm-band--navy/--cream tone class,
 * so the layer markup carries no tone of its own and survives a content swap.
 *
 *   --pdm-topo-src      the image (THE swap point)
 *   --pdm-topo-repeat   repeat for the tile; no-repeat for a bespoke export
 *   --pdm-topo-size     background-size
 *   --pdm-topo-x/-y     crop anchor — how far into the artwork this band starts.
 *                       --pdm-topo-y is what carries alignment across a section
 *                       boundary: a section continues its neighbour's crop
 *                       instead of restarting the artwork from the top.
 *   --pdm-topo-opacity  ink strength — set per tone, not per section (see below)
 *
 * The placeholder tile is seamless in both axes, so it survives fluid section
 * heights: adjacent bands share the same tile at the same scale and the pattern
 * has no landmark to expose a phase shift.
 *
 * --pdm-topo-y is what carries a line across a boundary, and js/topo-align.js
 * sets it at runtime from each section's measured page offset. Authoring those
 * offsets by hand here was the alternative; they are correct at exactly one
 * viewport width and go stale silently when content reflows. The CSS default of
 * 0px still paints a complete field if that script never runs — only
 * cross-boundary alignment degrades, not the artwork. A bespoke non-repeating
 * export carries its own crop, and the script leaves it alone.
 */
.pdm-topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pdm-topo-src);
  background-repeat: var(--pdm-topo-repeat, repeat);
  background-size: var(--pdm-topo-size, var(--pdm-topo-tile));
  background-position: var(--pdm-topo-x, 0px) var(--pdm-topo-y, 0px);
  opacity: var(--pdm-topo-opacity, 1);
  pointer-events: none;
}

/* The layer is always a section's first child, so everything after it is content
   and belongs above it. Stated once here instead of per section. */
.pdm-topo ~ * { position: relative; z-index: 1; }

/* Tone variants. Identical line geometry, recoloured for the ground they sit on:
   warm rust ink on cream, cool pale ink on navy — sampled from the flyer, where
   navy-band contours read *lighter* than the navy, not darker.

   Ink strength belongs to the tone, not to the section. The flyer is one print
   sheet at one density; varying opacity band to band makes a contour visibly
   change weight as it crosses a boundary, which defeats the alignment work. */
.pdm-topo--cream {
  --pdm-topo-src: url("../images/topo-tile-cream.svg");
  --pdm-topo-opacity: .85;
}
.pdm-topo--navy {
  --pdm-topo-src: url("../images/topo-tile-navy.svg");
  --pdm-topo-opacity: .8;
}

/* Real per-section exports, cropped from the client's print flyer.
 *
 * Every export is 1800px wide: the same full-sheet crop at the same 1.4118x
 * raster scale from the 1275px flyer. Their native heights differ only because
 * the flyer bands differ: hero 812px, approach 618px, and what-we-do 494px.
 *
 * The sizing rule therefore locks artwork to a shared horizontal reference,
 * never to an individual section's height: `100% auto` on desktop means every
 * export scales from the same sheet width. The contour geometry consequently
 * has one density at every hero -> approach -> what boundary. `cover` could
 * fill the extra vertical space, but it derived a separate scale per section
 * (at 1440px: hero 56.3%, approach 95.0%, what 141.1% of native size), which
 * made one continuous map look like three mismatched zoom levels.
 *
 * The images have been extended only along their unpainted edge with the exact
 * flat field sampled from that export: above the bottom-anchored hero and below
 * the top-anchored approach/what crops. That makes the width-locked raster tall
 * enough for each responsive content band without enlarging or distorting the
 * actual contour linework. The fill belongs to the asset so it remains within
 * the visible art bounds rather than becoming a CSS gap.
 *
 * On the full-bleed mobile layout, all three use the same 1150%-of-viewport
 * horizontal scale. That shared crop keeps the visible right-side map detail at
 * one density across the three bands while the extended canvases still reach
 * the bottom of their independently tall mobile content.
 *
 * The vertical anchor: the hero hangs from the bottom edge; the content bands
 * hang from the top. At 100% opacity, the ground goes on the section (not on
 * this layer) so the layer stays pure artwork. js/topo-align.js skips no-repeat
 * layers, so its runtime --pdm-topo-y is inert here. pdm-banner still uses the
 * seamless placeholder tile above because no bespoke export exists for it.
 */
.pdm-hero > .pdm-topo,
.pdm-band > .pdm-topo {
  --pdm-topo-repeat: no-repeat;
  --pdm-topo-x: right;
  --pdm-topo-opacity: 1;
}

.pdm-hero > .pdm-topo {
  --pdm-topo-src: url("../images/topo-hero-cream.webp");
  /* cover, not 100% auto: the hero's min-height (420px desktop, more once the
     copy wraps) is taller than the image's own 2550:1160 ratio produces at
     the rendered column width, so width-locked scaling left a growing flat
     cream strip between the art's bottom edge and the section's actual
     bottom — visible as the band across the top of the page once the header
     divider above it was removed. cover fills the full container height at
     every width instead of deriving height from width alone. Same fix the
     content bands already use below, and for the same reason. */
  --pdm-topo-size: cover;
  --pdm-topo-y: bottom;
}

/* The two content bands' exports.
 *
 * `cover`, not the hero's `100% auto`, and that is the whole headroom fix.
 *
 * The previous exports were short crops (494px and 618px of real linework) sat
 * on tall flat-field canvases. Width-locked `100% auto` scaled them by sheet
 * width alone, so the contour geometry rendered ~330-410px tall while the bands
 * themselves ran 500px+. The art ran out partway down and left a flat strip at
 * the boundary. Every prior fix attacked that from the padding side — trimming
 * the approach band to 12px/38px and the what band to 54px to stop the section
 * before its art expired. That is why this page's spacing has been reworked
 * repeatedly: padding was being used as a sizing correction for the artwork,
 * so any content change re-broke it.
 *
 * Both new exports carry linework across their full canvas (measured on the
 * source PNGs: cream inks rows 0-99.4%, navy rows 0-99.9%, and the navy's
 * density profile is near-symmetric top to bottom). `cover` therefore always
 * fills the band with real contour detail at any height, which removes the
 * constraint entirely: padding is now free to be whatever the layout wants,
 * and the bands use the single 44px rhythm set in the band block below rather
 * than the compensating values they carried before.
 *
 * The trade-off `cover` makes is that each band derives its own scale from its
 * own height, so contour density is no longer identical band to band the way
 * the width-locked rule enforced. That rule is what the 12px-top-padding hack
 * existed to work around; holding density constant while the art physically
 * could not reach the boundary was the worse half of the trade. The hero keeps
 * `100% auto` — its bottom-anchored crop already meets its boundary.
 */
.pdm-band > .pdm-topo {
  --pdm-topo-size: cover;
  --pdm-topo-y: top;
}
.pdm-band--navy > .pdm-topo {
  --pdm-topo-src: url("../images/topo-band-navy.webp");
}
.pdm-band--cream > .pdm-topo {
  --pdm-topo-src: url("../images/topo-band-cream.webp");
}

/* Interior-page cream bands (pagehead, closing CTA): both reuse the
 * homepage hero's cream export rather than the content-band export above --
 * same asset, two different sizing rules.
 *
 * .pdm-pagehead scales it with `cover`, identical to the homepage hero: a
 * short band still needs the art to reach every edge with no flat gap. Both
 * bands sit inside the same 960px flyer sheet (--pdm-sheet), and this box's
 * aspect ratio is wider than the artwork's, so `cover` here is width-bound —
 * it resolves to the artwork rendered at exactly the sheet's width. That is
 * the reference scale the closing band below is built to match.
 *
 * .pdm-ctaband.pdm-band--cream locks to that same width-bound scale
 * explicitly (`100% auto`, not `cover`) rather than recomputing its own
 * `cover` from its own (shorter) box height — `cover` on a shorter box would
 * still satisfy "no flat gap" but by zooming in further, which is exactly
 * the mismatch this replaces. `100% auto` scales the art only off the sheet
 * width the two bands share, so it renders at the identical zoom level as
 * the pagehead no matter how the closing band's own height changes with
 * copy edits. `repeat-y` covers whatever vertical run that scale doesn't —
 * the tile seam won't line up with the navy section above it (this band has
 * no shared crop to continue), but it holds the scale fixed instead of
 * `cover` re-zooming per edit, which is the actual source of the drift this
 * is fixing.
 *
 * Both anchor bottom-right, same as the hero: right because the flyer's
 * ink concentrates toward that edge, bottom because the hero's bottom edge
 * is the clean one (its baked-in navy sliver was already cropped from this
 * export -- see the hero asset comment above .pdm-hero > .pdm-topo). */
.pdm-pagehead > .pdm-topo,
.pdm-ctaband.pdm-band--cream > .pdm-topo {
  --pdm-topo-src: url("../images/topo-hero-cream.webp");
  --pdm-topo-x: right;
  --pdm-topo-y: bottom;
  --pdm-topo-opacity: 1;
}
.pdm-pagehead > .pdm-topo {
  --pdm-topo-repeat: no-repeat;
  --pdm-topo-size: cover;
}
.pdm-ctaband.pdm-band--cream > .pdm-topo {
  --pdm-topo-repeat: repeat-y;
  --pdm-topo-size: 100% auto;
}


/* ---------- Buttons ---------- */
.pdm-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--pdm-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 17px 26px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--pdm-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pdm-btn svg { flex: none; transition: transform .18s ease; }
.pdm-btn:hover svg { transform: translateX(4px); }

.pdm-btn--primary { background: var(--pdm-rust); color: #FFF7EE; }
.pdm-btn--primary:hover { background: var(--pdm-rust-dk); }

.pdm-btn--outline { background: transparent; color: var(--pdm-ink); border-color: var(--pdm-ink); }
.pdm-btn--outline:hover { background: var(--pdm-ink); color: var(--pdm-cream); }

.pdm-btn--on-dark { background: transparent; color: var(--pdm-on-dark); border-color: rgba(239,231,219,.4); }
.pdm-btn--on-dark:hover { background: var(--pdm-rust); border-color: var(--pdm-rust); color: #FFF7EE; }

/* Text link with a trailing arrow. */
.pdm-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pdm-ink);
  text-decoration: none;
}
.pdm-arrowlink svg { transition: transform .18s ease; }
.pdm-arrowlink:hover { color: var(--pdm-rust); }
.pdm-arrowlink:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
/* Flat cream fill, no pattern and no translucency: the header sits above the
   hero's contour art, and letting that art scroll through a semi-transparent bar
   made the nav labels move against a shifting ground. */
.pdm-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--pdm-cream);
  /* No border-bottom: the hero's topo art sits directly under the header at
     the same cream tone, so a divider line here only adds a second seam on
     top of the art's own edge. Removed together with .pdm-hero's matching
     border-bottom below — see that rule for the full reasoning. */
}
.pdm-header__inner {
  min-height: var(--pdm-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* The header splits the combined lockup: the icon mark is a standalone left
   anchor, and the wordmark moves in with the nav links so the whole right
   side reads as one right-aligned cluster (there is no nav CTA to balance
   against it anymore). Gap matches .pdm-header__inner's so the rhythm
   between [mark] [wordmark] [links] stays even across both joins. */
.pdm-header__right {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Wordmark + mark. The footer keeps the combined lockup (icon + stacked name
   in one link); the header splits them (see .pdm-header__right above). */
.pdm-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--pdm-ink);
}
.pdm-logo__mark img { height: 40px; width: auto; }

/* Header-only: the icon is sized to the wordmark's own rendered box (29px
   font-size × 1.06 line-height × 2 stacked lines = 61.48px, per the Asap sizing
   note below) so both sit inside the sticky bar with identical top/bottom
   padding. Width follows the mark's fixed 417.25:157.68 viewBox ratio
   (2.6463): 61.48 × 2.6463 ≈ 162.7px. */
.pdm-header .pdm-logo__mark img { height: 61.48px; width: 162.7px; }

/* Footer-only: scaled up slightly from the 40px base mark (to 46px, +15%)
   per Carin's request when the footer's mark switched to the new terracotta
   asset. Width follows the same fixed 417.25:157.68 viewBox ratio (2.6463)
   as the header rule above: 46 × 2.6463 ≈ 121.7px. */
.pdm-footer .pdm-logo__mark img { height: 46px; width: 121.7px; }
.pdm-logo__word {
  display: block;
  font-family: var(--pdm-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pdm-logo__word span { display: block; }

/* Nav */
.pdm-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdm-nav a {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pdm-ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.pdm-nav a:hover { color: var(--pdm-rust); }
.pdm-nav a.is-active { color: var(--pdm-rust); border-bottom-color: var(--pdm-rust); }

.pdm-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--pdm-line);
  border-radius: var(--pdm-radius);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--pdm-ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Home hero ---------- */
.pdm-hero {
  position: relative;
  background: var(--pdm-ground-hero);
  overflow: hidden;
  /* No border-bottom: the hero's own bottom-anchored topo art meets the navy
     band directly (the art's own dark ink was found to carry a baked-in navy
     sliver along its bottom edge, since cropped off — see the hero-asset
     comment above .pdm-hero > .pdm-topo). A CSS divider on top of that edge
     doubled the seam instead of cleaning it up. */
}
/* Single column: the hero's right-hand side is the contour field itself, as on
   the flyer, not an illustration sitting on top of it. */
.pdm-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  /* Trimmed from 460px: the taller minimum was holding the band well past its
     own copy, pushing the hero/approach boundary far below where the hero's
     bottom-anchored contour art actually ends and widening the blank run of
     flat ground the approach band's top-anchored art then has to cross before
     the two meet. 420px keeps the headline block comfortably clear of the
     nav above and the boundary below. */
  min-height: 420px;
  /* padding-block, not the `76px 0` shorthand: this element also carries
     .pdm-wrap, and the shorthand was silently zeroing that class's inline
     gutter. Invisible while .pdm-wrap floated inside a wider viewport, but on
     the fixed sheet it ran the hero copy flush to the paper's edge.
     62px -> 44px for the same reason as min-height above: less top/bottom air
     around the copy block, so the band sits closer to its own art. */
  padding-block: 44px;
  /* The copy column stops where the flyer's does. .pdm-wrap is the sheet, so a
     percentage right inset resolves against the sheet directly. */
  padding-right: calc(100% - var(--pdm-copy-end-hero));
}
/* The inset owns the column width now; a ch cap on top of it would only ever
   fight it, and did — 58ch at the old headline size was wider than the sheet. */
.pdm-hero__copy { max-width: none; }
/* The flyer's lede is narrower than its headline: it ends at 37.4% of the page
   against the headline's 42.1%, which is ~88% of the column. */
.pdm-hero__copy p { max-width: 88%; }
/* The CTA moves out of the copy column and onto the right side of the band,
   over the contour field itself — matching the flyer's own placement instead
   of trailing the headline on the left. Absolutely positioned against
   .pdm-hero__inner (the nearest positioned ancestor) so it is free of the
   copy column's right inset and can sit past it, overlapping the topo art on
   purpose.
   Vertically aligned with the lede paragraph rather than centered on the
   band: the headline + rule above the lede render at a fixed height on
   every desktop width (they're hard-coded per-line spans, not fluid text,
   so nothing above the lede reflows between the collapse breakpoint and an
   unbounded upper width) — confirmed by measuring the live render, where the
   lede's top edge sits at 324.7px from .pdm-hero__inner's top at both 1440px
   and 1050px. 359px is that lede's own vertical center at the 1440px
   reference width; it still falls inside the lede's box at narrower widths
   where the paragraph wraps onto a fourth line. Reset to static, in-flow
   placement below the collapse breakpoint (see the 900px query) where there
   is no reserved art column to float over. */
.pdm-hero__actions {
  position: absolute;
  right: var(--pdm-gutter);
  top: 359px;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 2;
}

/* Hero band: the artwork starts at the top of the sheet. Every following band
   continues from here — js/topo-align.js derives each band's offset. */
/* ---------- Content bands (tone-driven) ----------
 * A band is defined by its ground tone, not by the content on it. Before the
 * content swap, `.pdm-approach` meant "navy" and "the steps" at once, and
 * `.pdm-what` meant "cream" and "the service cards" at once — so moving content
 * between bands meant rewriting colour rules on both. Splitting the two ideas
 * (`.pdm-band--navy` / `.pdm-band--cream` own tone; `.pdm-approach__head`,
 * `.pdm-steps`, `.pdm-what__grid` own layout and carry no tone) is what makes
 * the swap a markup move instead of a stylesheet rewrite, and it is why the
 * per-content colour overrides further down could be deleted rather than
 * mirrored.
 *
 * Vertical rhythm: one padding pair for every band. The old per-section values
 * (12px/38px on approach, 54px on what) were compensation for the previous
 * exports, whose contour geometry stopped partway down a tall flat-field canvas
 * — the padding was tuned to stop the band before the art ran out. The new
 * exports carry linework edge to edge (measured: the cream export inks from row
 * 0 to 99.4% of its height, the navy from row 0 to 99.9%), so there is nothing
 * to compensate for and the padding can simply be the spacing the layout wants.
 */
.pdm-band {
  position: relative;
  overflow: hidden;
  padding: 44px 0;
}
.pdm-band .pdm-wrap { position: relative; z-index: 1; }

/* Navy ground: light heading ink, muted light body, light hairlines. */
.pdm-band--navy {
  background: var(--pdm-ground-approach);
  color: var(--pdm-on-dark-mu);
  --pdm-band-strong: var(--pdm-psd-paper);
  --pdm-band-body:   var(--pdm-psd-paper);
  --pdm-band-rule:   var(--pdm-line-dark);
}
.pdm-band--navy h2,
.pdm-band--navy h3 { color: var(--pdm-on-dark); }

/* Cream ground: ink heading, warm body, dark hairlines. */
.pdm-band--cream {
  background: var(--pdm-ground-what);
  color: var(--pdm-body);
  --pdm-band-strong: var(--pdm-psd-ink);
  --pdm-band-body:   var(--pdm-body);
  --pdm-band-rule:   var(--pdm-line);
}
.pdm-band--cream h2,
.pdm-band--cream h3 { color: var(--pdm-ink); }

/* The copy column's right edge is a property of the content block, not of the
   band's colour — it is the clearance that keeps copy off the contour art. It
   therefore travels with the content through the swap. */
.pdm-band:has(.pdm-steps) .pdm-wrap {
  padding-right: calc(100% - var(--pdm-copy-end-approach));
}
.pdm-band:has(.pdm-what__grid) .pdm-wrap {
  padding-right: calc(100% - var(--pdm-copy-end-what));
}

/* ---------- Process steps (content block) ---------- */
.pdm-approach__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  padding-bottom: 18px;
}
.pdm-approach__head h2 { margin: 0; }
.pdm-approach__head p { margin: 0; max-width: 44ch; }

.pdm-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--pdm-band-rule);
  /* Reset the global ol indent/markers — this is a layout grid, not a prose list. */
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.pdm-step {
  position: relative;
  padding: 8px 22px 8px 0;
  border-left: 1px solid var(--pdm-band-rule);
  padding-left: 22px;
}
.pdm-step:first-child { border-left: 0; padding-left: 0; }
.pdm-step__num {
  font-family: var(--pdm-serif);
  font-size: 1.35rem;
  line-height: 1;
}
.pdm-step__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--pdm-rust-lt);
  margin: 2px 0 6px;
}
.pdm-step__icon {
  height: 66px;
  margin-bottom: 8px;
  color: var(--pdm-band-strong);
}
.pdm-step__icon svg { height: 66px; width: auto; }
.pdm-step p { font-size: 13px; line-height: 1.6; margin: 0; }

/* The connector arrow between steps, hidden on the last one. */
.pdm-step__arrow {
  position: absolute;
  top: 36px;
  right: 14px;
  color: var(--pdm-band-body);
  opacity: .7;
}
.pdm-step:last-child .pdm-step__arrow { display: none; }

/* ---------- Service cards (content block) ---------- */

.pdm-what__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(5, minmax(0, 1fr));
  gap: 0;
}
.pdm-what__intro { padding-right: 40px; }
.pdm-what__intro h2 { margin-bottom: 22px; }

/* Explore Services now sits below the card grid rather than under the
   heading, so it needs its own top clearance instead of inheriting the
   heading's margin. */
.pdm-what__cta { margin-top: 40px; }

.pdm-svccard {
  padding: 0 18px;
  border-left: 1px solid var(--pdm-band-rule);
  display: flex;
  flex-direction: column;
}
.pdm-svccard__icon { color: var(--pdm-rust); margin-bottom: 18px; height: 38px; }
.pdm-svccard__icon svg { height: 38px; width: auto; }
.pdm-svccard h3 {
  font-family: var(--pdm-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.45;
  margin-bottom: 12px;
}
.pdm-svccard p { font-size: 12.5px; line-height: 1.55; margin: 0; }

/* ---------- Bottom banner ---------- */
/* Flat cream fill — same token as the header/nav bar, no contour art: this
   band is a clean stop before the footer rather than another textured
   section. Section and panel-inner padding both cut to a quarter of their
   original 76px/36px: the CTA copy is short, so the previous spacing read as
   dead air above and below the panel rather than breathing room. */
.pdm-banner { position: relative; background: var(--pdm-cream); padding: 19px 0; overflow: hidden; }
.pdm-banner .pdm-wrap { position: relative; z-index: 1; }
/* Semi-transparent so the section's contour field reads through the panel rather
   than being masked by an opaque box. */
.pdm-banner__panel {
  background: rgba(237, 226, 210, .82);
  border: 1px solid var(--pdm-line);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.pdm-banner__panel > * { padding: 9px 32px; }
.pdm-banner__lead h2 { font-size: 1.5rem; margin: 0; }
.pdm-banner__body { border-left: 1px solid var(--pdm-line); display: flex; flex-direction: column; justify-content: center; }
.pdm-banner__body p { font-size: 13.5px; }

/* ---------- Interior page header ---------- */
.pdm-pagehead {
  position: relative;
  /* --pdm-ground-hero, not --pdm-cream: same tone the homepage hero band
     paints, so an interior page's first band matches it exactly. */
  background: var(--pdm-ground-hero);
  border-bottom: 1px solid var(--pdm-line);
  overflow: hidden;
  padding: 68px 0 62px;
}
.pdm-pagehead .pdm-wrap { position: relative; z-index: 1; }
.pdm-pagehead h1 { max-width: 18ch; margin-bottom: 22px; }
/* Services hero title carries explicit <br> line breaks ("Digital solutions" /
   "for where your business" / "is headed.") per Carin's requested reading --
   the shared 18ch cap would re-wrap those lines on top of the manual breaks,
   so this instance opts out of the width constraint. */
.pdm-pagehead__title--wide { max-width: none; }
.pdm-pagehead p { max-width: 52ch; font-size: .97rem; margin: 0; }

/* ---------- Interior page bands (cream/navy, no topo) ----------
   Carries the homepage's flat cream/navy rhythm onto interior-page content
   sections, minus the flyer contour art: the same --pdm-ground-hero /
   --pdm-ground-approach fills .pdm-hero / .pdm-band--navy already paint, and
   the same on-dark tokens the navy band already applies to its
   headings, icons, small-caps labels, and dividers — just with no .pdm-topo
   layer underneath.

   A section that owns its own light "card" (.pdm-phase__aside,
   .pdm-contact-card) keeps its ink-on-cream treatment no matter which band
   it sits in — those cards carry their own ground, same as any light UI
   sitting on the homepage's dark approach band would. */
.pdm-band--cream { background: var(--pdm-ground-hero); }
.pdm-band--navy {
  background: var(--pdm-ground-approach);
  color: var(--pdm-on-dark-mu);
}
.pdm-band--navy h1,
.pdm-band--navy h2,
.pdm-band--navy h3 { color: var(--pdm-on-dark); }
.pdm-band--navy .pdm-svcrow__icon,
.pdm-band--navy .pdm-phase__icon { color: var(--pdm-on-dark); }
.pdm-band--navy .pdm-phase__num { color: var(--pdm-rust-lt); }
.pdm-band--navy .pdm-svcrow__kicker { color: var(--pdm-rust-lt); }
/* Workflow step numbers/titles matched to Services' number+title treatment
   per Carin's review: the phase number switches from on-dark white to the
   same rust-lt copper the Services kicker already uses, and the phase body
   copy/checklist below get the identical copper-lead + white-body split
   Services rows carry, scoped to .pdm-phase specifically so Contact's
   checklist (which reuses .pdm-checklist but not .pdm-phase) is untouched. */
.pdm-band--navy .pdm-phase__body > p:first-child { color: var(--pdm-rust-lt); font-weight: 700; }
/* Full-strength --pdm-on-dark white on the navy ground reads visually heavier
   than the same 400 weight does on a light background (light-on-dark text
   always looks bolder at equal weight) -- Carin read it as bold even though
   it never carried a font-weight override. Dropped to the same 82%-opacity
   cream already used for the Insight article body copy on navy bands
   (.pdm-band--navy .pdm-article__body p) to soften it the same way. */
.pdm-band--navy .pdm-phase__body > p:not(:first-child) { color: rgba(239, 231, 219, .82); }
/* Lead line (e.g. "Custom websites designed around your business...") reads
   copper per Carin's review, matching the rust-lt accent already used for
   the kicker/icon on this band; body copy and checklist items go the other
   way, up from the muted on-dark-mu default to full-strength on-dark --
   "the same white as the service titles" she asked for. Checklist scoped to
   .pdm-svcrow specifically so it doesn't reach the Workflow phase-aside or
   Contact "what happens next" checklists, which reuse the same .pdm-checklist
   class but keep their own ink-on-cream card treatment (see .pdm-band--navy
   .pdm-phase__aside / .pdm-contact-card below). */
.pdm-band--navy .pdm-svcrow__body > p:first-child { color: var(--pdm-rust-lt); }
.pdm-band--navy .pdm-svcrow__body > p:not(:first-child) { color: var(--pdm-on-dark); }
.pdm-band--navy .pdm-svcrow .pdm-checklist li { color: var(--pdm-on-dark); }
.pdm-band--navy .pdm-svcrow,
.pdm-band--navy .pdm-phase { border-top-color: var(--pdm-line-dark); }
.pdm-band--navy .pdm-checklist li::before { background: var(--pdm-rust-lt); }
.pdm-band--navy .pdm-field label { color: var(--pdm-on-dark); }
.pdm-band--navy .pdm-field__optional,
.pdm-band--navy .pdm-form__note { color: var(--pdm-on-dark-mu); }

/* Cards keep their own light ground regardless of the band around them, so
   their contents stay ink-on-cream rather than inheriting the band swap. */
.pdm-band--navy .pdm-phase__aside,
.pdm-band--navy .pdm-contact-card,
.pdm-band--navy .pdm-insight-cta,
.pdm-band--navy .pdm-insight-card { color: var(--pdm-ink); }
.pdm-band--navy .pdm-phase__aside h3,
.pdm-band--navy .pdm-insight-card h3 { color: var(--pdm-ink); }
.pdm-band--navy .pdm-contact-card h3 { color: var(--pdm-rust); }
.pdm-band--navy .pdm-phase__aside .pdm-checklist li::before,
.pdm-band--navy .pdm-contact-card .pdm-checklist li::before { background: var(--pdm-rust); }

/* The CTA band ships navy-by-default (see "CTA band" below) so it can also
   sit on the homepage; on an interior page it is the third band in the
   alternation and needs to flip back to cream. Compound selector so it
   overrides the base rule regardless of source order. */
.pdm-ctaband.pdm-band--cream {
  background: var(--pdm-ground-hero);
  color: var(--pdm-body);
}
.pdm-ctaband.pdm-band--cream h2 { color: var(--pdm-ink); }

/* ---------- Services detail rows ---------- */
.pdm-svcrow {
  display: grid;
  grid-template-columns: 64px minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 34px;
  padding: 44px 0;
  border-top: 1px solid var(--pdm-line);
  align-items: start;
}
.pdm-svcrow:first-of-type { border-top: 0; padding-top: 0; }
.pdm-svcrow__icon { color: var(--pdm-rust); }
.pdm-svcrow__icon svg { width: 44px; height: 44px; }
.pdm-svcrow h2 { font-size: 1.55rem; margin-bottom: 12px; }
.pdm-svcrow__kicker { font-size: 10.5px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--pdm-muted); display: block; margin-bottom: 10px; }
.pdm-svcrow__body > p:first-child { font-size: .97rem; color: var(--pdm-ink); }

/* Insight teaser: same "card keeps its own light ground" pattern as
   .pdm-phase__aside / .pdm-contact-card (see the .pdm-band--navy override
   above), so it reads on either a cream or navy service row. The Insights
   page has no published articles yet; the href below points at an anchor
   id that the first Insights card must carry once that page gets content
   later in this session. */
/* Column, not row-wrap: with align-items:baseline + flex-wrap:wrap, the
   kicker and link only broke onto separate lines once their combined width
   exceeded the container -- so the short "A website isn't finished when it
   launches" link stayed inline with "INSIGHT" while the four longer links
   wrapped below it, an inconsistency Carin flagged on review. Column layout
   stacks kicker-above-link every time, regardless of text length. */
.pdm-insight-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--pdm-cream-2);
  border: 1px solid var(--pdm-line);
  border-left: 2px solid var(--pdm-rust);
  padding: 16px 20px;
  margin-top: 24px;
}
.pdm-insight-cta__kicker {
  font-family: var(--pdm-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--pdm-rust);
}
.pdm-insight-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pdm-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pdm-ink);
  text-decoration: none;
}
.pdm-insight-cta a:hover { color: var(--pdm-rust); text-decoration: underline; }
.pdm-insight-cta a svg { flex: none; transition: transform .18s ease; }
.pdm-insight-cta a:hover svg { transform: translateX(4px); }

.pdm-checklist { list-style: none; padding: 0; margin: 22px 0 0; }
.pdm-checklist li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.pdm-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 11px; height: 1px;
  background: var(--pdm-rust);
}

/* ---------- Insights index: card grid + full-article list ----------
   The Insights page lists every topic as a teaser card first (published or
   "coming soon"), then the full article bodies further down the same page —
   each still carrying the id its Services-page CTA anchors to (see
   pages/services.html), so those links keep working unchanged. Cards use the
   same "owns its own light ground on any band" pattern as .pdm-insight-cta /
   .pdm-contact-card (override list above), and the published variant reuses
   .pdm-arrowlink rather than a new hover treatment. */
.pdm-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.pdm-insight-card {
  background: var(--pdm-cream-2);
  border: 1px solid var(--pdm-line);
  border-left: 2px solid var(--pdm-rust);
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease;
}
a.pdm-insight-card:hover { border-color: var(--pdm-rust); }
a.pdm-insight-card:hover h3 { color: var(--pdm-rust); }
.pdm-insight-card--soon { border-left-color: var(--pdm-line); }
.pdm-insight-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 10px 0 12px; }
.pdm-insight-card p {
  font-family: var(--pdm-sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pdm-muted);
  margin: 0 0 20px;
  flex: 1;
}
.pdm-insight-card .pdm-arrowlink { margin-top: auto; font-size: 11.5px; letter-spacing: .14em; }
.pdm-insight-card__status {
  font-family: var(--pdm-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pdm-muted);
  margin-top: auto;
}

/* Divider between the card grid and the full article text below it. Label
   reuses .pdm-svcrow__kicker rather than .pdm-eyebrow: .pdm-eyebrow has no
   navy-band override and would render near-invisible (dark ink on navy),
   while .pdm-svcrow__kicker already flips to --pdm-rust-lt on navy. */
.pdm-insight-divider { border-top: 1px solid var(--pdm-line-dark); margin-top: 64px; padding-top: 40px; }
.pdm-band--cream .pdm-insight-divider { border-top-color: var(--pdm-line); }
.pdm-insight-divider p { margin: 0 0 8px; }

/* Each full article stacked below the divider gets the same rule-between-
   entries treatment as .pdm-svcrow / .pdm-phase, so a second, third, fourth
   published piece separates cleanly from the one above it without repeating
   the divider band. */
.pdm-insight-full { padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--pdm-line-dark); }
.pdm-band--cream .pdm-insight-full { border-top-color: var(--pdm-line); }
.pdm-insight-full:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---------- Article page left margin ----------
   Carin's review: double the left inset on the five standalone Insights
   article pages specifically (not the shared .pdm-wrap sitewide, which
   would also shift the nav, footer, and every other page's content). The
   five pages/insights/*.html files add .pdm-article-page to their outer
   <section>, scoping this to just those pages' .pdm-wrap; the right side is
   untouched, so this reads as an asymmetric left margin, not a re-centered
   column. */
.pdm-article-page .pdm-wrap { padding-left: calc(var(--pdm-gutter) * 2); }

/* ---------- Long-form article (Insights, and the news.js-rendered
   article.html single view — see js/news.js renderArticle, which writes
   an <h1> + .pdm-article__meta + .pdm-article__body into #news-article).
   Insights hand-authors its five published pieces directly in HTML instead
   of going through that CMS feed, so its markup differs slightly (a bare
   <h2> title, no kicker label — the "Insight" kicker that used to sit above
   it was dropped per Carin's review, see the removed .pdm-article__kicker
   rule this comment used to describe), but shares the same body/heading
   rules below so the two don't diverge visually once the CMS feed is wired
   up. Max-width caps the measure at ~68ch regardless of which band or
   section wraps it. */
.pdm-article { max-width: 640px; }
.pdm-article__meta { color: var(--pdm-rust); }
/* No max-width cap here: the article body below wraps at the full 640px
   .pdm-article measure (see above), and an 18ch cap on just the heading
   forced long titles into a narrow, ragged, left-bunched column instead of
   matching that measure. Removed per Carin's review. */
.pdm-article > h2 { font-size: 1.9rem; margin-bottom: 28px; }
/* Title reads copper on the navy Insights band per Carin's review — same
   --pdm-rust-lt accent the h3 subheads below already use (and the removed
   kicker used to carry), rather than inheriting the cream .pdm-band--navy h2
   default. Two classes + child combinator (0,2,1) outweighs the base
   .pdm-band--navy h2 rule (0,1,1) regardless of source order. */
.pdm-band--navy .pdm-article > h2 { color: var(--pdm-rust-lt); }
.pdm-article__meta {
  font-family: var(--pdm-sans);
  font-size: 12px;
  letter-spacing: .04em;
  margin: -14px 0 28px;
}
.pdm-article__body p { font-size: .97rem; }
.pdm-article__body h3 {
  font-size: 1.1rem;
  margin-top: 1.6em;
}
/* Navy band: body copy and h3 subheads need to hold contrast against
   --pdm-ground-approach the same way the h2 title already does. Body text
   reuses the on-dark cream at reduced opacity (same rgb channels as the
   --pdm-on-dark-tinted .pdm-btn--on-dark border already uses, see
   rgba(239,231,219,.4) above) rather than full-strength --pdm-on-dark —
   Carin's review called full-strength cream body copy too heavy against
   navy, so this softens it while keeping the same cream hue rather than
   switching to the blue-grey --pdm-on-dark-mu used for meta/label text
   elsewhere. h3 subheads reuse --pdm-rust-lt, the same rust already used
   for "highlight" text on navy bands (.pdm-band--navy .pdm-svcrow__kicker)
   and now the article h2 title above. */
.pdm-band--navy .pdm-article__body p { color: rgba(239, 231, 219, .82); }
.pdm-band--navy .pdm-article__body h3 { color: var(--pdm-rust-lt); }
/* .pdm-article__closer (italic serif, top-border divider) removed per
   Carin's review: the closing line of each article now reads as a plain
   paragraph like the rest of the body copy. The class was dropped from the
   closing <p> in all five split article pages (pages/insights/*.html), so
   this rule had no remaining callers. */

/* ---------- Workflow page phases ---------- */
/* Section layout matched to Services' three-column row per Carin's review:
   icon | number+title | body, same as .pdm-svcrow, replacing the previous
   two-column layout that stacked the icon above the number+title inside a
   shared left column. Column widths mirror Services' 64px icon rail plus
   its .85fr/1.15fr split (Workflow's title column runs a little wider than
   Services' since "Understand"/"Maintain" etc. sit alone with no kicker
   line above eating the space, hence .78fr instead of .85fr). */
.pdm-phase {
  display: grid;
  grid-template-columns: 64px minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 34px;
  padding: 44px 0;
  border-top: 1px solid var(--pdm-line);
  align-items: start;
}
.pdm-phase:first-of-type { border-top: 0; padding-top: 0; }
/* Number + title matched to Services' kicker+h2 treatment per Carin's review:
   same small-caps sans label style for the number (was a large 2.4rem serif
   numeral) and the same 1.55rem title size (was inheriting the base 1.9rem
   h2). Color for both comes from the .pdm-band--navy overrides below, same
   rust-lt the Services kicker already uses. */
.pdm-phase__num {
  font-family: var(--pdm-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--pdm-rust);
  display: block;
  margin-bottom: 10px;
}
.pdm-phase h2 { font-size: 1.55rem; margin-bottom: 0; }
.pdm-phase__icon { color: var(--pdm-rust); }
.pdm-phase__icon svg { width: 44px; height: 44px; }
.pdm-phase__aside {
  background: var(--pdm-cream-2);
  border: 1px solid var(--pdm-line);
  padding: 22px 24px;
  margin-top: 22px;
}
.pdm-phase__aside h3 { font-family: var(--pdm-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 10px; }
.pdm-phase__aside p:last-child, .pdm-phase__aside ul:last-child { margin-bottom: 0; }
/* "What happens in this phase" and its checklist dashes read copper on the
   cream card, up from ink/rust-default -- Carin flagged the rust dash as
   hard to see at the checklist's line width, so it also gets a touch
   thicker (1px -> 2px) alongside the color bump. Scoped to .pdm-phase__aside
   so Contact's checklist card keeps its current ink/rust treatment. */
.pdm-band--navy .pdm-phase__aside h3 { color: var(--pdm-rust); }
.pdm-phase__aside .pdm-checklist li::before { height: 2px; }

/* ---------- Contact ---------- */
.pdm-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 72px;
  align-items: start;
}
.pdm-contact-card {
  background: var(--pdm-cream-2);
  border: 1px solid var(--pdm-line);
  padding: 32px 32px 34px;
}
.pdm-contact-card + .pdm-contact-card { margin-top: 24px; }
.pdm-contact-card h3 { font-family: var(--pdm-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 16px; color: var(--pdm-rust); }
.pdm-contact-card a { text-decoration: none; }
.pdm-contact-card a:hover { text-decoration: underline; }

.pdm-contact-line { display: block; font-size: 1.05rem; font-family: var(--pdm-serif); color: var(--pdm-ink); margin-bottom: 6px; }
.pdm-contact-line a { color: var(--pdm-ink); }
.pdm-contact-note { font-size: 13px; color: var(--pdm-muted); margin: 0; }

/* ---------- Forms ---------- */
.pdm-form { max-width: 640px; }
.pdm-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pdm-field { margin-bottom: 20px; }
.pdm-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pdm-ink);
  margin-bottom: 8px;
}
.pdm-field__optional { color: var(--pdm-muted); font-weight: 500; letter-spacing: .1em; }
.pdm-field input, .pdm-field textarea, .pdm-field select {
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  color: var(--pdm-ink);
  padding: 13px 15px;
  border: 1px solid var(--pdm-line);
  border-radius: var(--pdm-radius);
  background: #FBF6EE;
}
.pdm-field input:focus, .pdm-field textarea:focus, .pdm-field select:focus {
  outline: 2px solid var(--pdm-rust);
  outline-offset: 1px;
  border-color: var(--pdm-rust);
}
.pdm-field textarea { min-height: 168px; resize: vertical; }
.pdm-field [aria-invalid="true"] { border-color: #96402F; }
/* Empty until a validation message is set, so it takes no space when valid. */
.pdm-field__error { font-size: 13.5px; color: #96402F; margin: 7px 0 0; }
.pdm-field__error:empty { display: none; }
.pdm-form__status { font-size: 15px; margin: 18px 0 0; }
.pdm-form__status--ok  { color: #2F6B45; }
.pdm-form__status--err { color: #96402F; }
.pdm-form__note { font-size: 13.5px; color: var(--pdm-muted); margin: 16px 0 0; }

/* ---------- Coming-soon (Insights) ---------- */
.pdm-comingsoon {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 88px 0 94px;
}
.pdm-comingsoon .pdm-wrap { position: relative; z-index: 1; }
.pdm-comingsoon__inner { max-width: 620px; margin: 0 auto; }
.pdm-comingsoon__inner p { margin-left: auto; margin-right: auto; }
.pdm-comingsoon .pdm-rule { margin-left: auto; margin-right: auto; }
.pdm-badge {
  display: inline-block;
  border: 1px solid var(--pdm-rust);
  color: var(--pdm-rust);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--pdm-radius);
  margin-bottom: 30px;
}

/* ---------- CTA band ---------- */
.pdm-ctaband {
  position: relative;
  background: var(--pdm-navy);
  color: var(--pdm-on-dark-mu);
  overflow: hidden;
  padding: 62px 0;
}
.pdm-ctaband .pdm-wrap { position: relative; z-index: 1; }
.pdm-ctaband h2 { color: var(--pdm-on-dark); max-width: 20ch; margin-bottom: 20px; }
/* Services' closing CTA title is short enough, and Carin wants it, to run on
   one line -- but the 20ch cap above is shared with Workflow's and Insights'
   longer titles, which are meant to wrap. Scoped override on this instance
   only rather than raising the shared cap. */
.pdm-ctaband__title--wide { max-width: none; }
/* Workflow's closing CTA title reads copper per Carin's review, instead of
   the shared cream-band ink default two rules up -- scoped to this instance
   only since Services' and Insights' closing CTAs keep the ink title. */
.pdm-ctaband.pdm-band--cream .pdm-ctaband__title--copper { color: var(--pdm-rust); }
.pdm-ctaband__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 40px; align-items: center; }
.pdm-ctaband p { max-width: 48ch; margin: 0; }

/* ---------- Feed states ---------- */
/* Every CMS-backed list renders one of these; none is silent. */
.pdm-state {
  padding: 34px;
  border: 1px dashed var(--pdm-line);
  border-radius: var(--pdm-radius);
  color: var(--pdm-muted);
  text-align: center;
}
.pdm-state--error { border-color: #D6B3AB; background: #FBF1EE; color: #96402F; }

/* ---------- Footer ---------- */
/* Flat navy fill, no pattern. Column layout modeled on the Prescott
   Broadcasting site footer: brand lockup beside labeled Quick Links / Contact
   Us columns, each column left-aligned under a small-caps heading with a
   short rust underline (the same accent .pdm-eyebrow/.pdm-rule use
   elsewhere), then a thin rule and a slim legal bar.

   No "Connect" social column — the site carries no social links, so there is
   nothing for a fourth column to hold.

   Leading went 1.62 (inherited body) -> 1.4 -> 1.2 -> 1: each pass roughly
   halved the excess over single-line spacing. At 1 the text sits at its
   tightest legible spacing — fine here since every footer line is a short
   link or contact entry, never a wrapped paragraph. Quick Links runs 2
   columns (grid-auto-flow: column, 3 rows) instead of a 5-row single stack,
   which is most of the vertical compaction — a 5-item list stacked
   one-per-row is the tallest thing in the footer even after the leading
   trim.

   .pdm-footer__top is flex, not grid: .pdm-footer__brand takes its natural
   width and margin-right: auto pushes it to the left edge, which shoves the
   Quick Links / Contact Us pair together against the right edge instead of
   spreading all three across even fractional columns. */
.pdm-footer {
  background: var(--pdm-navy);
  color: var(--pdm-on-dark-mu);
  padding: 32px 0 16px;
  font-size: 14.5px;
  line-height: 1;
}
.pdm-footer a { color: var(--pdm-on-dark); text-decoration: none; }
.pdm-footer a:hover { color: #FFF; text-decoration: underline; }
.pdm-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}
.pdm-footer__brand { margin-right: auto; }
.pdm-footer .pdm-logo { color: var(--pdm-on-dark); }
.pdm-footer__heading {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--pdm-rust);
  display: inline-block;
  font-family: var(--pdm-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pdm-on-dark);
  line-height: 1;
}
.pdm-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: 24px;
  row-gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdm-footer__nav a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
.pdm-footer__contact { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1; }
.pdm-footer__legal {
  border-top: 1px solid var(--pdm-line-dark);
  margin-top: 24px;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
  font-size: 11.5px;
  line-height: 1;
  /* #6F7784 sat at 3.1:1 on the navy ground — below AA for body text. The
     established light-on-dark tokens clear it (6.1:1 muted, 12.5:1 links). */
  color: var(--pdm-on-dark-mu);
}
.pdm-footer__legal ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.pdm-footer__legal a { color: var(--pdm-on-dark); }

/* ---------- Flyer type scale (homepage) ----------
   Everything below is measured off the client's flyer rather than composed, and
   is scoped to the homepage's three bands because those are the surfaces the
   flyer actually specifies. Interior pages keep the ramp above; they inherit the
   new faces, not these sizes.

   The flyer page is 2550px at 300 DPI (8.5in) and this site's sheet represents
   that same page at 960px, so every value here is a flyer measurement carried
   across at 960/1275 from the 1275px page render.

   ---------------------------------------------------------------------------
   THE DISPLAY STRETCH

   The flyer's three big headlines are not simply IM Fell at a size. Photoshop's
   character panel applies Horizontal Scale 115% / Vertical Scale 200% to them,
   and that is a glyph transform no font-size can reproduce: the letters are
   twice as tall as they are wide-proportioned. It is checkable on the flyer
   itself — the hero's cap-height measures 45.6px at sheet scale, and 31px x
   IM Fell's 0.7368 cap ratio x 2 is 45.7px.

   So the size below is the *nominal* size, and .pdm-display__line carries the
   stretch. Three things then have to be true for the transform not to wreck the
   flow, because a CSS transform is painted after layout and reserves nothing:

     1. Line spacing. The flyer's headlines sit on a fixed baseline grid — 47px
        between baselines, shared by the hero and the approach band despite
        their different sizes, so it is a grid value and not a ratio. Each line
        is laid out at HALF that (line-height: lead/2) and scaleY(2) restores
        it, which makes the rendered line pitch exactly the grid.

     2. Space after each line. Every line's own box is only lead/2 tall, so each
        one carries a margin-bottom of lead/2 to hold the room its scaled glyphs
        will occupy. Block height is then lines x lead: the grid, exactly.

     3. Ascender/descender bleed. A line box of lead/2 is shorter than IM Fell's
        content area, so glyphs overflow it above and below, and scaleY doubles
        the overflow. --pdm-display-bleed is that overflow computed from the
        face's own metrics ((asc+desc)/upm = 1.2535 for IM Fell), reserved as
        padding so the first line's ascenders cannot climb into the nav and the
        last line's descenders cannot sit on whatever follows.

   One line per element, authored as such in the markup with the flyer's own
   breaks — a line that wrapped would lay out at 2x lead/2 and only reserve one
   line's worth of margin. The sizes are small enough that no line wraps at any
   width the site renders at; scripts/measure-scale.py is what proves it. */
.pdm-display {
  --pdm-display-size: 31px;
  --pdm-display-lead: 47px;
  --pdm-display-bleed: calc(1.2535 * var(--pdm-display-size) - var(--pdm-display-lead) / 2);

  font-family: var(--pdm-serif);
  font-weight: 400;
  font-size: var(--pdm-display-size);
  line-height: calc(var(--pdm-display-lead) / 2);
  letter-spacing: .01em;
  padding-block: var(--pdm-display-bleed);
  margin: 0;
}
.pdm-display__line {
  display: block;
  transform: scale(1.15, 2);
  transform-origin: left top;
  margin-bottom: calc(var(--pdm-display-lead) / 2);
}

/* The flyer opens a wider gap where a headline changes colour — the hero's
   baselines step 67.5, 85, 65 flyer px, so the jump from the ink couplet to the
   rust one is ~1.28x a normal line. Scaled onto the 47px grid that is 13px of
   extra room, and without it "want to go."'s descender lands in the rust line's
   ascenders: at 200% vertical scale a descender is twice as long as the face's
   metrics would lead you to expect.

   Not halved the way line-height is. A transform is painted after layout, so it
   scales the glyphs and not the margin — 14px here is 14px on screen.

   Written as lead/2 + 14 rather than 14, because this margin meets the previous
   line's margin-bottom of lead/2 and adjacent siblings collapse to the larger of
   the two. A bare 14px is smaller than what it collapses into and does nothing;
   measuring the render is what caught it. */
.pdm-display__line--break { margin-top: calc(var(--pdm-display-lead) / 2 + 14px); }

/* The flyer's two headline inks. Applied per line because the flyer's colour
   runs are per line, not per heading. */
.pdm-display__line--ink  { color: var(--pdm-psd-ink); }
.pdm-display__line--rust { color: var(--pdm-psd-rust); }
/* Tone-following heading ink. --ink/--paper above pin an absolute colour, which
   is right for the hero (always cream ground). A headline that can live on
   either band has to follow its band instead, or a content swap silently paints
   it navy-on-navy — so it reads --pdm-band-strong, which each band sets. */
.pdm-display__line--strong { color: var(--pdm-band-strong, var(--pdm-psd-ink)); }

/* 1 — Hero headline. 31px on the 47px grid. */
.pdm-hero h1 {
  --pdm-display-size: 31px;
  --pdm-display-lead: 47px;
  margin-bottom: 24px;
}

/* 2 — Approach band headline. Smaller face, same 47px grid. */
.pdm-approach__head h2 {
  --pdm-display-size: 22px;
  --pdm-display-lead: 47px;
}

/* 3 — What-we-do headline. Its own 36px grid. */
.pdm-what__intro h2 {
  --pdm-display-size: 19px;
  --pdm-display-lead: 36px;
  margin-bottom: 22px;
}

/* 4 — Hero lede. Aileron SemiBold.

   16px/23px, not the 31px/46px the PSD's size field reports. Those two numbers
   are exactly 2x what the flyer renders, and the same 2x shows up in the
   approach paragraph and the card copy — three independent width solves against
   the flattened flyer put this line at 15.0-15.4px, the approach paragraph at
   10.2px and the card copy at 7.8px, all within 3% of half their PSD figure.
   The ratio inside each pair is kept; only the doubled scale is corrected. */
.pdm-hero__copy .pdm-lede {
  font-family: var(--pdm-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
  color: var(--pdm-psd-ink);
  max-width: 88%;
}

/* 5 — Approach supporting paragraph. Flyer solves to 10.2px, which is print
   small-print and not a size to set web body copy at; floored at 13px with the
   flyer's own loose leading ratio carried across.
   Weight 600 (SemiBold) -> 400 (Regular, Aileron ships 400/500/600/700, so no
   font swap is needed): at 13px near-white on navy the SemiBold read as bold
   text, heavier than the section calls for.
   Leading 23px -> 18px: the flyer's loose ratio carried a print leading onto
   a much narrower web column; 18px (~1.38x the 13px face) is still open but
   no longer floats the three lines apart. */
.pdm-approach__head p {
  font-family: var(--pdm-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--pdm-band-body);
}

/* 6 — Card and workflow-step body copy. Same story: the flyer sets these at
   7.8px, legible at 300 DPI and not on a screen. Floored at 13px, the pair's
   1.44 ratio kept.
   .pdm-step p's weight/leading/color are overridden separately below as part
   of the approach-section pass. .pdm-svccard p used to keep its own 600/19px
   here, which read as a different typeface next to the 400-weight step copy
   once the two sections sat back to back on the page; it now inherits the
   same 400 weight so both bodies of card copy read as one voice, and keeps
   only its own ink color. */
.pdm-step p,
.pdm-svccard p {
  font-family: var(--pdm-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
}
/* Dimmed rather than --pdm-band-body's near-white: at 13px, light text on the
   navy ground optically reads bolder than the same weight/size in dark text
   on the cream ground (irradiation) even though both are Aileron/400. #C7C7C6
   is picked to land on the same ~7.8:1 contrast ratio against navy that the
   cream section's body copy has against its own background, so the two read
   as one weight side by side. Scoped to this rule only — --pdm-band-body
   itself stays untouched since it also feeds the step arrows and approach
   intro copy. */
.pdm-svccard p { color: #C7C7C6; }
/* Step paragraph copy (Understand/Design/Build/Maintain):
   - line-height 19px -> 16px: the flyer's card-copy ratio carried over
     unchanged, looser than this narrower column needs; 16px (~1.23 of the
     13px face) still clears comfortable reading measure at four columns.
   - font-weight 600 -> 400: SemiBold at 13px read as bold body text, heavier
     than the section's supporting copy should be.
   - colour follows the band rather than naming a tone, so it stays matched to
     the "Clarity first." paragraph beside it on whichever ground it lands. */
.pdm-step p { font-weight: 400; line-height: 16px; color: var(--pdm-band-body); }

/* 7 — Wordmark. Asap at the size that matches the flyer's cap-height: the
   flyer's mark measures 20.3px cap at sheet scale and Asap's cap ratio is 0.70,
   which lands on 29px. Letter-spacing 0, per the PSD.

   This used to be scoped to the header, back when the header carried its own
   icon + wordmark lockup beside the nav links. The header now shows the icon
   mark alone (see headerHtml in layout.js), so this sizing has moved to the
   footer's combined lockup — the one place .pdm-logo__word still renders —
   instead of the smaller uppercase-Aileron treatment the base .pdm-logo__word
   rule sets. Colour is set on .pdm-logo, not .pdm-logo__word, so the existing
   .pdm-footer .pdm-logo { color: var(--pdm-on-dark) } override still wins
   (an unscoped colour on __word would outrank it and paint the mark
   navy-on-navy again — see the footer block for that rule). */
.pdm-footer .pdm-logo__word {
  font-family: var(--pdm-wordmark);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
}

/* 8 — Eyebrow labels. Both of the homepage's content bands: the flyer uses the
   one rust on both grounds, so this is keyed to the band, not to the tone. */
.pdm-band .pdm-eyebrow {
  font-family: var(--pdm-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--pdm-psd-rust);
}

/* 9 — Workflow step titles. */
.pdm-step__label {
  font-family: var(--pdm-sans);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--pdm-psd-rust);
}

/* 10 — Service card titles. Their own indigo-navy on cream; on the navy band
   that indigo would vanish into the ground, so the band's heading ink wins. */
.pdm-svccard h3 {
  font-family: var(--pdm-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--pdm-psd-indigo);
}
.pdm-band--navy .pdm-svccard h3 { color: var(--pdm-on-dark); }

/* 11 — Step numbers. The flyer sets these in Arimo, which is not one of the
   three faces being sourced, so Aileron Bold stands in at a size that still
   reads as a number label rather than body copy. */
.pdm-step__num {
  font-family: var(--pdm-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--pdm-band-strong);
}

/* ---------- Utilities ---------- */
.pdm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Content layout at the sheet width ----------
   These rules used to live in `@media (max-width: 1080px)`. That query was using
   viewport width as a stand-in for how much room the content actually had, which
   was fair while sections spanned the whole viewport. They no longer do: every
   band is now pinned to the sheet, so the content column is ~904px at 1440px and
   at 1920px alike, and the layouts below are simply the layouts this site has.
   Leaving them behind a 1080px query would have meant a 6-column service grid in
   904px on every desktop. */
.pdm-what__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 0; }
.pdm-what__intro { grid-column: 1 / -1; padding-right: 0; }
.pdm-svccard:nth-child(2) { border-left: 0; padding-left: 0; }

.pdm-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }

/* ---------- Responsive ---------- */

/* Nav collapse. The header cluster now needs about 723px in one row —
   162.7 mark + 28 + 476 links + 56 gutters — now that the wordmark no longer
   sits in the header (moved to the footer lockup) and the CTA that used to
   absorb overflow is also gone. 780px keeps a ~57px buffer over that so link
   hover states and letter-spacing rounding don't nudge the row into wrapping
   right at the edge; narrower than the hero's own 900px full-bleed
   breakpoint, so the nav still switches to its hamburger state on its own
   breakpoint rather than reusing the hero's. */
@media (max-width: 780px) {
  .pdm-nav-toggle { display: inline-flex; }
  .pdm-header__inner { position: relative; }
  .pdm-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: var(--pdm-nav-h);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--pdm-cream);
    border-bottom: 1px solid var(--pdm-line);
    padding: 10px var(--pdm-gutter) 20px;
  }
  .pdm-nav.is-open { display: flex; }
  .pdm-nav a { padding: 14px 0; font-size: 13px; }
}

/* Collapse: below this the sheet cannot hold a readable column and still show
   margins, so the flyer goes full-bleed and the table is put away. Cream on
   <html> rather than slate so overscroll matches the page instead of flashing
   the backdrop. */
@media (max-width: 900px) {
  html { background: var(--pdm-cream); }
  body { max-width: none; box-shadow: none; }

  /* Full-bleed keeps `cover` from the desktop rule rather than re-scaling.
     The hero used to need a `1150% auto` override here to blow up a short,
     shallow crop for mobile's tall single-column band; that crop carried a
     baked-in navy sliver along its bottom edge and has since been replaced
     and switched to `cover` at the desktop rule itself (see .pdm-hero >
     .pdm-topo above), so no mobile override remains needed — `cover` already
     fills these much taller mobile bands with real contour at a sane scale,
     the same as the content bands below. */

  /* Full-bleed: there is no reserved art column to hold copy out of, because
     the art now spans the whole band. The copy runs edge to edge and the art
     drops to a wash behind it instead — the flyer's clearance is a function of
     its page proportion, and that proportion does not exist down here.

     The :has() selectors that set those desktop insets score (0,3,0), so a
     plain `.pdm-band .pdm-wrap` at (0,2,0) loses to them and the inset
     survived into mobile — measured at 700px as 82px/198px of dead right
     padding instead of the 28px gutter. Matching their specificity here is
     what actually retires them. */
  .pdm-hero__inner,
  .pdm-band:has(.pdm-steps) .pdm-wrap,
  .pdm-band:has(.pdm-what__grid) .pdm-wrap { padding-right: var(--pdm-gutter); }
  .pdm-hero > .pdm-topo,
  .pdm-band > .pdm-topo { --pdm-topo-opacity: .42; }

  .pdm-hero__copy p { max-width: none; }
  .pdm-hero__inner { min-height: 0; padding-block: 56px; }
  /* Full-bleed has no reserved art column for the CTA to float over, and the
     copy now runs the section's full width, so the desktop absolute
     right-side placement is reset back to its normal in-flow position below
     the lede — the same place it sits before the desktop override applies. */
  .pdm-hero__actions {
    position: static;
    transform: none;
    margin-top: 28px;
  }
}

@media (max-width: 860px) {
  .pdm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdm-step { padding-bottom: 30px; }
  .pdm-step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pdm-step__arrow { display: none; }
  .pdm-approach__head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .pdm-ctaband__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pdm-svcrow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pdm-phase { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pdm-insight-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .pdm-section { padding: 52px 0; }
  .pdm-band { padding: 40px 0; }
  .pdm-banner { padding-bottom: 52px; }
  .pdm-pagehead { padding: 48px 0 44px; }
  .pdm-what__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Single column: every card starts a row, so the first-column rule exemption
     no longer applies and each card carries its own left rule. Written at
     :nth-child(2) specificity (0,2,0) because the desktop exemption above is
     too, and a plain .pdm-svccard (0,1,0) loses to it — which left card one as
     the only card with no rule. */
  .pdm-svccard,
  .pdm-svccard:nth-child(2) { padding: 0 0 0 20px; border-left: 1px solid var(--pdm-band-rule); }
  .pdm-banner__panel { grid-template-columns: minmax(0, 1fr); }
  .pdm-banner__body { border-left: 0; border-top: 1px solid var(--pdm-line); }
  .pdm-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pdm-footer__top { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .pdm-footer__brand { margin-right: 0; }
  .pdm-footer__contact { align-items: center; }
  .pdm-footer__nav { justify-content: center; justify-items: center; }
  .pdm-footer .pdm-logo { justify-content: center; }

}

@media (max-width: 560px) {
  :root { --pdm-topo-tile: 300px; }
  .pdm-steps { grid-template-columns: minmax(0, 1fr); }
  .pdm-step { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}