/* ============================================================
   PrimeStart - page styles: our work
   Rebuilt on 4 September 2026 to the About / Websites / SEO standard,
   hero included. Everything is prefixed wk-. The phone layout (<=640px)
   sits at the end: the page is composed for a phone, not stacked.
   ============================================================ */

/* ---------- hero ----------
   9 September 2026: the page now takes the standard shared hero
   (template-parts/layout/page-hero.php) with a photograph, and every
   .hero-wk / .hero-wk-facts rule that dressed the old bespoke hero is
   removed - that hero no longer exists on this page. The scene below
   ("1b. FIVE PAGES, ONE WEBSITE" in our-work.php) reuses the .wk* classes
   that follow unchanged, which is why they stay. */

/* the scene's new home: centred and held to the width it was designed at
   (the old hero's right-hand column), rather than stretching to the full
   1200px .wrap now that it sits in a section of its own */
.wk-scene-sec .hero-visual{max-width:640px;margin:0 auto}

.wk{position:relative;min-width:0}
.wk-stage{position:relative;padding-top:34px}
.wk-frame{position:relative;z-index:2;transition:opacity .6s var(--ease),transform .8s var(--ease-out)}
.wk-frame .frame{border-radius:12px;box-shadow:0 34px 70px -34px rgba(18,33,47,.55)}
.wk-frame .frame .shot{aspect-ratio:16/10.6}
.wk-live{
  position:absolute;right:14px;top:-13px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;background:var(--white);border:1px solid var(--line);
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
  box-shadow:0 12px 26px -16px rgba(18,33,47,.45);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.wk-live i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.18)}
.wk-live.on,.wk:not(.is-live) .wk-live{opacity:1;transform:none}

/* the five sheets: fanned out while the scene runs, tucked behind the frame at rest */
.wk-sheets{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:1;pointer-events:none}
.wk-sheet{
  position:absolute;left:50%;top:50%;width:112px;aspect-ratio:3/4;margin:-84px 0 0 -56px;
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:9px 9px 24px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 18px 34px -24px rgba(18,33,47,.45);
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(var(--s,1));
  opacity:var(--o,1);
  transition:transform .9s var(--ease-io),opacity .5s var(--ease);
}
.wk-sheet b{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.wk-sheet-bar{height:5px;border-radius:3px;background:var(--ink);width:38%}
.wk-sheet-hero{height:32px;border-radius:4px;background:linear-gradient(135deg,#E9E2D6,#D9CFBF)}
.wk-sheet-row{height:5px;border-radius:3px;background:var(--line);width:88%}
.wk-sheet-row.short{width:56%}
.wk-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.wk-sheet-grid i{display:block;height:16px;border-radius:3px;background:#E9E2D6}
.wk-sheet-pills{display:flex;gap:4px}
.wk-sheet-pills i{display:block;height:8px;width:22px;border-radius:100px;background:#E9E2D6}
.wk-sheet-field{height:11px;border-radius:3px;border:1px solid var(--line);background:var(--paper)}
.wk-sheet-btn{height:11px;border-radius:3px;background:var(--orange);width:60%}
/* rest state (no JavaScript, reduced motion, and after the scene): three sheets peek behind the frame's top edge */
.wk-sheet[data-i="0"]{--x:-46%;--y:-118%;--r:-10deg;--s:.86;--o:1}
.wk-sheet[data-i="1"]{--x:-8%;--y:-124%;--r:-3deg;--s:.86;--o:1}
.wk-sheet[data-i="2"]{--x:30%;--y:-120%;--r:5deg;--s:.86;--o:1}
.wk-sheet[data-i="3"],.wk-sheet[data-i="4"]{--x:0;--y:-110%;--r:0deg;--s:.8;--o:0}
/* the scene: sheets fan across the stage, then gather into the frame */
.wk.is-live:not(.built) .wk-frame{opacity:0;transform:translateY(18px) scale(.985)}
.wk.is-live.spread .wk-sheet{--o:1}
.wk.is-live.spread .wk-sheet[data-i="0"]{--x:-190%;--y:-40%;--r:-12deg;--s:1}
.wk.is-live.spread .wk-sheet[data-i="1"]{--x:-95%;--y:-70%;--r:-6deg;--s:1}
.wk.is-live.spread .wk-sheet[data-i="2"]{--x:0;--y:-82%;--r:0deg;--s:1}
.wk.is-live.spread .wk-sheet[data-i="3"]{--x:95%;--y:-70%;--r:6deg;--s:1}
.wk.is-live.spread .wk-sheet[data-i="4"]{--x:190%;--y:-40%;--r:12deg;--s:1}
.wk.is-live.gather .wk-sheet[data-i]{--x:0;--y:-50%;--r:0deg;--s:.92;--o:0;transition-duration:.75s,.55s}
.wk.is-live.gather .wk-sheet[data-i="1"]{transition-delay:.06s}
.wk.is-live.gather .wk-sheet[data-i="2"]{transition-delay:.12s}
.wk.is-live.gather .wk-sheet[data-i="3"]{transition-delay:.18s}
.wk.is-live.gather .wk-sheet[data-i="4"]{transition-delay:.24s}
.wk.is-live.built .wk-frame{opacity:1;transform:none}
.wk.is-live:not(.spread):not(.is-done) .wk-sheet[data-i]{--o:0;--x:0;--y:-50%;--r:0deg;--s:.9}
/* the arrival before the fan: sheets rise into the fan positions */
.wk.is-live.spread .wk-sheet{transition-duration:.7s,.45s}
/* once the scene has finished, the sheets ease back to their rest positions behind the frame */
.wk.is-done .wk-sheet{transition-duration:.8s,.5s}
.wk-cap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.wk-cap b{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.wk-cap span{font-size:14px;color:var(--muted)}
.wk-cap em{margin-left:auto;font-style:normal;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:-0.015em;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .wk-sheet,.wk-frame,.wk-live{transition:none}
}

/* ---------- shared pieces ---------- */
.wk-statement{font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1.04;letter-spacing:-0.045em;max-width:16ch}
.wk-statement-hl{color:var(--orange)}   /* owner, 9 September 2026: "the same care" in orange */
.wk-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--wash);color:var(--orange-dk);font-family:var(--fh);font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ---------- 1. the work ---------- */
.wk-work{padding-bottom:104px}
.wk-work-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:56px}
.wk-work-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.wk-work-head .lede{padding-bottom:6px;max-width:44ch}
.wk-gallery{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px;border-top:1px solid var(--ink);padding-top:44px}
.wk-site .frame{border-radius:12px}
.wk-site-meta{display:grid;grid-template-columns:34px 1fr;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.wk-site-n{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--orange-dk);letter-spacing:.04em;padding-top:5px;font-variant-numeric:tabular-nums}
.wk-site h3{font-size:20px;font-weight:700;letter-spacing:-0.028em;line-height:1.22}
.wk-site-ind{margin-top:5px;font-family:var(--fh);font-size:14px;font-weight:600;letter-spacing:-0.018em;color:var(--orange-dk)}
.wk-site-ind a{color:inherit}
.wk-site-lead{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:44ch}
.wk-site-plan{display:inline-block;margin-top:14px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.015em;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:5px 13px;background:var(--white)}
.wk-more{margin-top:64px;padding-top:28px;border-top:1px solid var(--ink)}
.wk-more-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk);margin:0 0 26px}
.wk-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.wk-site-sm h3{font-size:17px}
.wk-site-sm .wk-site-meta{margin-top:16px;padding-top:12px}
.wk-site-sm .wk-site-lead{font-size:14.5px}
.wk-work-note{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--muted);max-width:74ch}

/* ---------- 2. what every website gets right ---------- */
.wk-right-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.wk-right-copy{position:sticky;top:120px}
.wk-right-copy h2{max-width:13ch}
.wk-right-copy .lede{margin-top:20px;max-width:40ch}
.wk-ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.wk-ledger li{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.wk-ln{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--orange-dk);letter-spacing:.06em;padding-top:5px;font-variant-numeric:tabular-nums}
.wk-ledger h3{font-size:21px;font-weight:700;letter-spacing:-0.03em;line-height:1.25}
.wk-ledger p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:52ch}

/* ---------- 3. the statement (dark) ---------- */
.wk-part{padding:112px 0}
.wk-part-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.wk-part-words{position:sticky;top:120px}
.wk-part-line{font-family:var(--fh);font-size:clamp(34px,4.2vw,56px);font-weight:800;line-height:1.05;letter-spacing:-0.046em;color:#fff;margin:0;max-width:15ch}
.wk-part-copy > p:not(.eyebrow){margin-top:14px;font-size:17px;line-height:1.65;color:var(--on-dark-muted);max-width:50ch}
.wk-parts{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.wk-parts-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.wk-parts ul{list-style:none;margin:0;padding:0}
.wk-parts li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--fh);font-size:15.5px;font-weight:600;letter-spacing:-0.02em;color:#fff;line-height:1.35}

/* ---------- 4. from brief to live ---------- */
.wk-route-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:52px}
.wk-route-head h2{max-width:19ch}
.wk-route-head .lede{padding-bottom:6px;max-width:46ch}
.wk-rail{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:0 20px;position:relative;border-top:1px solid var(--ink)}
.wk-rail li{position:relative;padding-top:0;min-width:0}
.wk-rail b{display:block;margin-top:14px;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.024em;color:var(--ink);line-height:1.3}
.wk-rail em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:5px;max-width:24ch}
.wk-rail .is-key .wk-n{background:var(--orange);color:#fff}
.wk-rail .is-key b{color:var(--orange-dk)}
.wk-route-note{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:15.5px;color:var(--muted)}

/* ---------- 5. by industry ---------- */
.wk-ind-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:44px}
.wk-ind-head h2{max-width:14ch}
.wk-ind-head .lede{padding-bottom:6px;max-width:46ch}

/* ---------- 6. final ---------- */
.final p{color:#A3B5C4;font-size:19px;max-width:50ch;margin:0 auto 34px}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width:1180px){
  .wk-right-grid,.wk-part-grid{gap:56px}
}
@media (max-width:1040px){
  /* .hero-wk rules removed with the hero itself; the scene below keeps its
     own width via .hero-visual's default max-width, no page rule needed. */
  .wk-work-head,.wk-route-head,.wk-ind-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  .wk-right-grid,.wk-part-grid{grid-template-columns:1fr;gap:40px}
  .wk-right-copy,.wk-part-words{position:static}
  .wk-rail{grid-template-columns:repeat(3,1fr);gap:28px 20px}
}
@media (max-width:820px){
  .wk-gallery{gap:36px 24px}
  .wk-more-grid{gap:28px 20px}
  .wk-parts{grid-template-columns:1fr;gap:24px}
}

/* ============================================================
   Phone (<=640px): composed for a phone, nothing removed
   ============================================================ */
@media (max-width:640px){
  /* .hero-wk rules removed with the hero itself. */
  .wk-scene-sec .hero-visual{max-width:none}
  .wk-stage{padding-top:26px}
  .wk-sheet{width:78px;margin:-58px 0 0 -39px;padding:6px 6px 18px;gap:4px}
  .wk-sheet b{font-size:9.5px;bottom:5px}
  .wk-sheet-hero{height:20px}
  .wk-sheet[data-i="0"]{--x:-40%;--y:-112%}
  .wk-sheet[data-i="2"]{--x:26%;--y:-114%}
  .wk.is-live.spread .wk-sheet[data-i="0"]{--x:-150%;--y:-52%}
  .wk.is-live.spread .wk-sheet[data-i="1"]{--x:-75%;--y:-76%}
  .wk.is-live.spread .wk-sheet[data-i="3"]{--x:75%;--y:-76%}
  .wk.is-live.spread .wk-sheet[data-i="4"]{--x:150%;--y:-52%}
  .wk-live{right:10px;top:-11px;font-size:12px;padding:5px 10px}
  .wk-cap{margin-top:16px;gap:8px}
  .wk-cap em{flex-basis:100%;margin-left:0}

  .sec.wk-work{padding:56px 0 60px}
  .wk-statement{font-size:clamp(28px,7.6vw,34px);max-width:none}
  .wk-work-head{margin-bottom:26px}
  .wk-work-head .lede{font-size:16px}
  /* the gallery becomes a snap swipe strip */
  .wk-gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:22px 0 8px;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:none;border-top:1px solid var(--ink)}
  .wk-gallery::-webkit-scrollbar{display:none}
  .wk-gallery .wk-site{flex:0 0 84%;scroll-snap-align:start}
  .wk-site .frame .shot{aspect-ratio:16/11}
  .wk-site-meta{margin-top:14px;padding-top:12px;gap:12px}
  .wk-site h3{font-size:17px}
  .wk-site-lead{font-size:14.5px}
  .wk-more{margin-top:36px;padding-top:20px}
  .wk-more-k{margin-bottom:16px}
  .wk-more-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .wk-more-grid .wk-site-sm{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .wk-more-grid .wk-site-sm .frame{border-radius:6px}
  .wk-more-grid .wk-site-sm .frame .chrome{display:none}
  .wk-more-grid .wk-site-sm .frame .shot{aspect-ratio:4/3}
  .wk-more-grid .wk-site-sm .wk-site-meta{margin:0;padding:0;border:0;grid-template-columns:1fr;gap:0}
  .wk-more-grid .wk-site-sm .wk-site-n{display:none}
  .wk-more-grid .wk-site-sm h3{font-size:15.5px}
  .wk-more-grid .wk-site-sm .wk-site-ind{font-size:13px;margin-top:3px}
  .wk-more-grid .wk-site-sm .wk-site-lead{display:none}
  .wk-work-note{margin-top:28px;padding-top:18px;font-size:15px}

  .sec.wk-right{padding:52px 0}
  .wk-right-copy h2{max-width:none;font-size:clamp(26px,7vw,30px)}
  .wk-right-copy .lede{font-size:16px;margin-top:14px}
  .wk-ledger li{grid-template-columns:32px 1fr;gap:14px;padding:18px 0}
  .wk-ledger h3{font-size:17.5px}
  .wk-ledger p{font-size:15px}

  .wk-part{padding:56px 0}
  .wk-part-line{font-size:clamp(28px,7.8vw,34px);max-width:none}
  .wk-part-copy > p:not(.eyebrow){font-size:16px}
  .wk-parts{margin-top:24px;gap:20px}

  .sec.wk-route{padding:52px 0}
  .wk-route-head h2{max-width:none;font-size:clamp(26px,7vw,30px)}
  .wk-route-head .lede{font-size:16px}
  .wk-rail{grid-template-columns:1fr;gap:0;padding-top:0}
  .wk-rail li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
  .wk-rail b{margin-top:0}
  .wk-rail em{grid-column:2;margin-top:2px;max-width:none}
  .wk-route-note{margin-top:26px;padding-top:16px;display:flex;flex-direction:column;gap:12px}
  .wk-route-note span{display:none}
  .wk-route-note a{min-height:44px;display:inline-flex;align-items:center;align-self:flex-start}

  .sec.wk-ind{padding:52px 0}
  .wk-ind-head h2{max-width:none;font-size:clamp(26px,7vw,30px)}
  .wk-ind-head .lede{font-size:16px}
  .istrip-foot{margin-top:20px;flex-direction:column;align-items:stretch}
  .istrip-foot .btn{width:100%}

  .final{padding:64px 0}
  .final p{font-size:16.5px}
  .final .btns .btn{width:100%}
}
/* ============================================================
   Phone, second pass (5 September 2026)

   Measured at 390px the page ran 8,781px. The length was fair; the
   READING was not. Everything around the portfolio previews sat below
   the 14.5px floor - the project numerals, the industry line and its
   link, the plan chip, the ledger numerals, the rail captions, the hero
   facts and the industry-strip captions - so the supporting copy was
   the hardest part of the page to read on the screen it is written for.
   All of it is raised to at least 14.5px here.

   Deliberately NOT raised: the type inside the miniature website
   thumbnails (.v-nav, .v-card, .v-copy, .v-cta, .v-logo, .chrome .url)
   and the hero's five page sheets. Those are pictures of screens; the
   small type is what makes them read as screens.

   Two sections also change shape:
     the work        1,437px - the browser previews keep their swipe
                     strip but lose the numeral column, and the three
                     "Also built" projects become tight index rows
     what they get   1,221px - the five things every site gets right
       right         become an accordion (data-m-acc in our-work.php)
   ============================================================ */
@media (max-width:640px){
  /* --- readability floor: 14.5px on every caption and label --- */
  /* .hero-wk-facts dt rule removed with the hero itself; the standard
     hero's own facts (.hero-std-facts) are unaffected by this page. */
  .wk-cap span{font-size:14.5px}
  .wk-cap em{font-size:14.5px}
  .wk-site-n{font-size:14.5px}
  .wk-site-ind{font-size:14.5px}
  .wk-more-grid .wk-site-sm .wk-site-ind{font-size:14.5px}
  .wk-site-plan{font-size:14.5px;padding:5px 12px}
  .wk-ln{font-size:14.5px}
  .wk-n{font-size:14.5px}
  .wk-rail em{font-size:14.5px}
  .page-template-our-work .istrip-cap b{font-size:14.5px}
  /* the industry link inside a preview caption is 19px of text; padding
     grows the tap area to 45px and an equal negative margin keeps the
     caption's spacing exactly where it was */
  .wk-site-ind a{display:inline-block;padding:13px 2px;margin:-13px -2px}

  /* --- 1. the work --- */
  .sec.wk-work{padding:46px 0 48px}
  .wk-work-head{margin-bottom:18px}
  .wk-statement{font-size:clamp(26px,7.2vw,31px)}
  .wk-work-head .lede{font-size:15.5px;line-height:1.48}
  .wk-gallery{padding-top:16px;padding-bottom:8px;gap:14px}
  .wk-gallery .wk-site{flex-basis:80%}
  .wk-gallery .frame .shot{aspect-ratio:16/10}
  .wk-gallery .frame .chrome{height:30px;padding:0 11px}
  /* the numeral column costs 46px of a 280px card and repeats the order
     the strip already shows, so the caption takes the full card width
     and the lead sentence reads in three lines instead of four */
  .wk-gallery .wk-site-n{display:none}
  .wk-gallery .wk-site-meta{grid-template-columns:1fr;margin-top:12px;padding-top:11px}
  .wk-gallery .wk-site-lead{margin-top:8px;line-height:1.45}
  .wk-gallery .wk-site-plan{margin-top:10px}
  /* "Also built": a tight index of three - thumbnail, name and trade on
     one line each, so three more projects cost 174px instead of 300 */
  .wk-more{margin-top:22px;padding-top:14px}
  .wk-more-k{margin-bottom:8px}
  .wk-more-grid .wk-site-sm{grid-template-columns:66px 1fr;gap:12px;padding:7px 0}
  .wk-more-grid .wk-site-sm .frame .shot{aspect-ratio:16/11}
  .wk-more-grid .wk-site-sm h3{font-size:15.5px;line-height:1.22}
  .wk-more-grid .wk-site-sm .wk-site-ind{margin-top:2px;line-height:1.3}
  .wk-work-note{margin-top:20px;padding-top:14px;font-size:15px;line-height:1.5}

  /* --- 2. what every website gets right: an accordion, first open --- */
  .sec.wk-right{padding:46px 0}
  .wk-right-grid{gap:20px}
  .wk-right-copy .lede{font-size:15.5px;line-height:1.5;margin-top:12px}
  .wk-ledger.m-acc{border-top:1px solid var(--ink)}
  .wk-ledger.m-acc > .m-acc-item{grid-template-columns:30px 1fr;gap:0 10px;align-items:start}
  .wk-ledger .m-acc-btn{min-height:52px;padding:14px 0;font-size:17px}
  .wk-ledger .m-acc-item .wk-ln{padding-top:20px}
  .wk-ledger .m-acc-item > .m-acc-panel{grid-column:2;padding-bottom:16px}
  .wk-ledger .m-acc-panel p{margin-top:0;font-size:14.5px;line-height:1.5;max-width:none}

  /* --- 3. the statement --- */
  .wk-part{padding:50px 0}
  .wk-part-grid{gap:24px}
  .wk-part-copy > p:not(.eyebrow){font-size:15.5px;line-height:1.55}
  .wk-parts li{padding:9px 0;font-size:15px}

  /* --- 4. from brief to live --- */
  .sec.wk-route{padding:46px 0}
  .wk-route-head{margin-bottom:18px}
  .wk-route-head .lede{font-size:15.5px;line-height:1.48}
  .wk-rail li{padding:8px 0;column-gap:12px}
  .wk-rail .wk-n{width:30px;height:30px}
  .wk-rail b{font-size:15.5px}
  .wk-rail em{line-height:1.4}
  .wk-route-note{margin-top:18px;padding-top:14px;gap:4px}

  /* --- 5. by industry --- */
  .sec.wk-ind{padding:46px 0}
  .wk-ind-head{margin-bottom:16px}
  .wk-ind-head .lede{font-size:15.5px;line-height:1.48}
  .page-template-our-work .istrip{gap:10px}
  .istrip-foot{margin-top:16px;gap:12px}
  .istrip-foot p{font-size:15px;line-height:1.5}

  /* --- 6. final --- */
  .final{padding:56px 0}
}
@media (max-width:360px){
  /* .hero-wk-facts rule removed with the hero itself. */
  .wk-gallery .wk-site{flex-basis:88%}
  .wk-route-head h2{font-size:24px;letter-spacing:-0.035em}
  .wk-more-grid .wk-site-sm{grid-template-columns:72px 1fr}
}